/* 팀 탭 (S2) — docs/sdd/team_stats-design/wf-team3.jsx 픽셀 충실 구현.
   색은 이 :root 팔레트(--tw-*)에만 정의하고 규칙 본문에서는 var()만 쓴다. */

:root {
  /* 정본 토큰과 값이 같은 것 → --bb-* 별칭으로 수렴 (frontend.md 토큰 규칙) */
  --tw-white: var(--bb-neutral-0);
  --tw-ink: var(--bb-ink);
  --tw-line: var(--bb-border);
  --tw-line-soft: var(--bb-border-soft);
  --tw-orange: var(--bb-primary);
  --tw-orange-soft: var(--bb-primary-soft);
  /* wf-team3.jsx S2 고유 값 — 근접 --bb-* 토큰과 미세하게 달라 픽셀 충실을 위해 유지.
     정본 정렬(예: 파랑 → --bb-accent #0064FF)은 시각 변화를 동반하므로 별도 결정 필요. */
  --tw-off: #f7f8fa;
  --tw-bg: #f1f3f5;
  --tw-ink2: #4e5968;
  --tw-ink3: #8b95a1;
  --tw-ink4: #b0b8c1;
  --tw-blue: #3182f6;
  --tw-blue-soft: #e8f1ff;
  --tw-blue-ink: #1b64da;
  --tw-orange-tint: #fff8f5;
  /* #31 — CDN(_rtp_base) defines only 'Pretendard Variable' */
  --tw-num: 'Barlow', 'Pretendard Variable', 'Pretendard', system-ui, sans-serif;
  --tw-ko: 'Pretendard Variable', 'Pretendard', system-ui, sans-serif;
  --tw-mono: 'JetBrains Mono', ui-monospace, monospace;
}

.tw-root { background: var(--tw-white); font-family: var(--tw-ko); color: var(--tw-ink); min-height: 100vh; }
.tw-root * { box-sizing: border-box; }
.tw-root button { font-family: inherit; }
.tw-root--gray { background: var(--tw-bg); }

/* ── 사진 placeholder (WfPhoto — 사선 스트라이프) ───────────────────── */
.tw-photo {
  position: relative; overflow: hidden; flex-shrink: 0;
  background: repeating-linear-gradient(135deg, var(--tw-line) 0 6px, var(--tw-line-soft) 6px 12px);
  border: 1px dashed var(--tw-ink4);
  display: flex; align-items: center; justify-content: center;
}
.tw-photo img { width: 100%; height: 100%; object-fit: cover; }

/* ── 헤더 (T3Shell) ─────────────────────────────────────────────────── */
.tw-header {
  padding: 14px 16px 10px 20px;
  display: flex; align-items: center; gap: 10px; background: var(--tw-white);
}
.tw-header__photo { width: 34px; height: 34px; border-radius: 11px; }
.tw-header__main { flex: 1; min-width: 0; position: relative; }
.tw-header__seasonwrap { position: relative; }
.tw-chev { display: flex; color: var(--tw-ink3); }
/* min-height 는 프로젝트 최소 탭 타겟 44px. 헤더가 두꺼워지지 않게 세로 여백은 음수
   마진으로 흡수한다(시각 위치 불변) — .tw-season-pill 도 같은 처리. */
.tw-header__namerow { display: flex; align-items: center; gap: 6px; cursor: pointer; border: none; background: transparent; padding: 0; min-height: 44px; margin: -11px 0; }
.tw-header__name { font-family: var(--tw-ko); font-size: 17px; font-weight: 800; color: var(--tw-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tw-header__pool { font-family: var(--tw-ko); font-size: 10.5px; color: var(--tw-ink3); margin-top: 1px; }
.tw-season-pill {
  display: flex; align-items: center; gap: 6px; padding: 7px 12px;
  border-radius: 999px; background: var(--tw-bg); border: none; cursor: pointer;
  min-height: 44px; margin: -6px 0;   /* 알약 시각 높이(32px)는 유지, 탭 타겟만 44px */
}
.tw-season-pill__val { font-family: var(--tw-num); font-size: 12.5px; font-weight: 800; color: var(--tw-ink); }

/* 드롭다운 메뉴 (팀 전환 · 시즌 전환) */
.tw-menu {
  position: absolute; top: calc(100% + 6px); z-index: 30; min-width: 130px;
  background: var(--tw-white); border: 1px solid var(--tw-line); border-radius: 12px;
  box-shadow: 0 8px 24px rgba(25, 31, 40, 0.12); padding: 5px; display: none;
}
.tw-menu--open { display: block; }
.tw-menu--left { left: 0; }
.tw-menu--right { right: 0; }
.tw-menu__item {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; text-align: left; padding: 9px 11px; border: none; background: transparent;
  border-radius: 8px; cursor: pointer;
  font-family: var(--tw-ko); font-size: 12.5px; font-weight: 600; color: var(--tw-ink);
}
.tw-menu__item:hover { background: var(--tw-off); }
.tw-menu__item--on { font-weight: 800; color: var(--tw-orange); }
.tw-menu__sub { font-family: var(--tw-num); font-size: 10.5px; font-weight: 700; color: var(--tw-ink3); }

/* superuser 열람 배너 */
.tw-su-banner {
  margin: 0 20px 4px; padding: 7px 12px; border-radius: 10px;
  background: var(--tw-blue-soft); color: var(--tw-blue-ink);
  font-size: 11px; font-weight: 700;
}

/* ── 콘텐츠 스크롤 영역 ─────────────────────────────────────────────── */
.tw-content { padding: 0 20px 110px; }

/* ── 서브탭 (S2 sticky) — 개인 스탯 페이지 .rtp-tab 과 동일 스펙으로 통일 ── */
.tw-subtabs { position: sticky; top: 0; z-index: 10; background: var(--tw-white); margin: 0 -20px; padding: 6px 0 0; }
.tw-subtabs__row { display: flex; border-bottom: 1px solid var(--tw-line-soft); }
/* .tw-root button 의 font-family:inherit 보다 우선하도록 .tw-root 를 붙임 */
.tw-root .tw-subtab {
  flex: 1; padding: 16px 0 12px; border: none; background: transparent; cursor: pointer;
  position: relative; font-family: var(--bb-font-num); font-size: 12px; font-weight: 800;
  letter-spacing: 1px; color: var(--tw-ink4);
  transition: color var(--bb-t-base) ease;
}
.tw-subtab--on { color: var(--tw-ink); }
.tw-subtab--on::after {
  content: ''; position: absolute; left: 50%; bottom: -1px; transform: translateX(-50%);
  width: 40px; height: 3px; border-radius: 2px; background: var(--tw-orange);
}
.tw-subtabs-gap { height: 14px; }

/* ── 카드 공통 (T3Card / T3Head) ────────────────────────────────────── */
.tw-card { padding: 15px 16px; border-radius: 14px; border: 1px solid var(--tw-line); background: var(--tw-white); }
.tw-card--btn { width: 100%; text-align: left; cursor: pointer; }
.tw-clickable { cursor: pointer; }
.tw-gap { height: 8px; }
.tw-head { display: flex; align-items: center; gap: 7px; margin-bottom: 12px; }
.tw-head--tight { margin-bottom: 0; }
.tw-head__en { font-family: var(--tw-num); font-size: 13px; font-weight: 800; color: var(--tw-ink); letter-spacing: 0.4px; }
.tw-head__ko { font-family: var(--tw-ko); font-size: 11px; font-weight: 700; color: var(--tw-ink3); flex: 1; }
.tw-head__badge { padding: 2px 7px; border-radius: 6px; background: var(--tw-bg); font-family: var(--tw-ko); font-size: 9.5px; font-weight: 700; color: var(--tw-ink3); }
.tw-head__right { font-family: var(--tw-ko); font-size: 10px; color: var(--tw-ink3); }

/* 상태 안내 카드 (empty/no_modern 등) */
.tw-note { font-family: var(--tw-ko); font-size: 11px; color: var(--tw-ink3); line-height: 1.5; }
.tw-note--center { text-align: center; padding-top: 6px; }
.tw-note--gap { margin-top: 8px; }
.tw-note--pad { padding: 20px 2px; }
.tw-empty { padding: 48px 20px; text-align: center; }
.tw-empty__title { font-size: 15px; font-weight: 800; color: var(--tw-ink); margin-bottom: 6px; }
.tw-empty__sub { font-size: 12px; color: var(--tw-ink3); line-height: 1.6; }

/* ── A1+A2 다크 히어로 (T3A12) ──────────────────────────────────────── */
.tw-hero { padding: 18px 20px; border-radius: 18px; background: var(--tw-ink); margin-bottom: 8px; }
.tw-hero__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.tw-hero__season { display: flex; align-items: baseline; gap: 8px; }
.tw-hero__season-en { font-family: var(--tw-num); font-size: 15px; font-weight: 800; color: var(--tw-white); letter-spacing: 0.5px; }
.tw-hero__season-ko { font-family: var(--tw-ko); font-size: 11px; font-weight: 700; color: rgba(255, 255, 255, 0.55); }
.tw-hero__games { padding: 3px 8px; border-radius: 6px; background: rgba(255, 255, 255, 0.1); font-family: var(--tw-ko); font-size: 9.5px; font-weight: 700; color: rgba(255, 255, 255, 0.6); }
.tw-hero__mid { display: flex; align-items: flex-end; justify-content: space-between; }
.tw-hero__recordwrap { display: flex; align-items: center; gap: 8px; }
.tw-hero__record { font-family: var(--tw-num); font-size: 38px; font-weight: 800; color: var(--tw-white); letter-spacing: -1.5px; line-height: 1; }
.tw-hero__record .u { font-size: 17px; font-family: var(--tw-ko); font-weight: 700; }

/* 무패/전패 뱃지 (R22) — 항상 var(--bb-*) 토큰, rgba 하드코딩 금지 */
.tw-badge {
  display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 999px;
  font-family: var(--tw-ko); font-size: 10px; font-weight: 800; white-space: nowrap;
}
.tw-badge--win { background: var(--bb-success-soft); color: var(--bb-success); }
.tw-badge--winless { background: var(--bb-surface); color: var(--bb-ink-sub); }
.tw-hero__kpis { display: flex; gap: 14px; }
.tw-hero__kpi { text-align: right; }
.tw-hero__kpi-k { display: block; font-family: var(--tw-ko); font-size: 10px; font-weight: 700; color: rgba(255, 255, 255, 0.5); }
.tw-hero__kpi-v { display: block; font-family: var(--tw-num); font-size: 19px; font-weight: 800; color: var(--tw-orange); margin-top: 2px; }
.tw-hero__bottom { margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, 0.12); display: flex; align-items: center; justify-content: space-between; }
.tw-hero__rank { font-family: var(--tw-ko); font-size: 11px; color: rgba(255, 255, 255, 0.6); }
.tw-hero__rank b { color: var(--tw-white); font-family: var(--tw-num); }
.tw-hero__chips { display: flex; gap: 4px; }
.tw-chip-sm {
  width: 20px; height: 20px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--tw-num); font-size: 10px; font-weight: 800;
  background: rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.5);
}
.tw-chip-sm--w { background: var(--tw-orange); color: var(--tw-white); }

/* ── A3 FORM (T3A3) ─────────────────────────────────────────────────── */
.tw-form__row { display: flex; align-items: center; justify-content: space-between; }
.tw-form__chips { display: flex; gap: 5px; }
.tw-chip {
  width: 30px; height: 30px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--tw-num); font-size: 13px; font-weight: 800;
  background: var(--tw-bg); color: var(--tw-ink3);
}
.tw-chip--w { background: var(--tw-orange); color: var(--tw-white); }
.tw-form__right { text-align: right; }
.tw-form__wl { font-family: var(--tw-num); font-size: 18px; font-weight: 800; color: var(--tw-ink); }
.tw-form__label { font-family: var(--tw-ko); font-size: 10px; color: var(--tw-ink3); margin-top: 2px; }

/* ── B1 QUARTERS (T3B1) ─────────────────────────────────────────────── */
.tw-q__cols { display: flex; gap: 14px; }
.tw-q__col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.tw-q__margin { font-family: var(--tw-num); font-size: 11.5px; font-weight: 800; color: var(--tw-orange); }
.tw-q__margin--lose { color: var(--tw-blue-ink); }
.tw-q__bars { width: 100%; height: 70px; display: flex; gap: 3px; align-items: flex-end; justify-content: center; }
.tw-q__bar { width: 13px; border-radius: 4px 4px 0 0; }
.tw-q__bar--team { background: var(--tw-orange); }
.tw-q__bar--team.is-lose { opacity: 0.55; }
.tw-q__bar--opp { background: var(--tw-line); }
.tw-q__bar--opp.is-lose { background: var(--tw-blue); }
.tw-q__label { font-family: var(--tw-mono); font-size: 10px; font-weight: 700; color: var(--tw-ink3); }
.tw-q__label--lose { color: var(--tw-blue-ink); }
.tw-callout { margin-top: 12px; padding: 9px 12px; border-radius: 10px; background: var(--tw-blue-soft); font-family: var(--tw-ko); font-size: 11px; font-weight: 700; color: var(--tw-blue-ink); }
.tw-callout--warm { background: var(--tw-orange-soft); color: var(--tw-orange); }

/* ── 레이더 (T2RankR3) ──────────────────────────────────────────────── */
.tw-radar { padding: 18px 16px 10px; border-radius: 14px; border: 1px solid var(--tw-line); background: var(--tw-white); }
.tw-radar svg { display: block; max-width: 260px; margin: 0 auto; width: 100%; }
.tw-radar__legend { display: flex; justify-content: center; gap: 14px; padding: 8px 0 6px; }
.tw-radar__legend span { display: flex; gap: 5px; align-items: center; font-family: var(--tw-ko); font-size: 10px; font-weight: 700; color: var(--tw-ink3); }
.tw-radar__swatch { width: 12px; height: 3px; border-radius: 2px; background: var(--tw-orange); display: inline-block; }
.tw-radar__swatch--dash { height: 0; border-top: 2px dashed var(--tw-line); background: transparent; border-radius: 0; }
.tw-radar__chips { display: flex; flex-wrap: wrap; gap: 6px; padding-bottom: 8px; }
.tw-radar__chip {
  display: inline-flex; align-items: baseline; gap: 5px; padding: 7px 11px;
  border-radius: 999px; border: 1px solid var(--tw-line); background: var(--tw-white); cursor: pointer;
}
.tw-radar__chip-en { font-family: var(--tw-num); font-size: 11px; font-weight: 800; color: var(--tw-ink); }
.tw-radar__chip-val { font-family: var(--tw-num); font-size: 12px; font-weight: 800; color: var(--tw-orange); }

/* ── D1 VS POOL (T3D1) ──────────────────────────────────────────────── */
.tw-sw__group { font-family: var(--tw-ko); font-size: 10.5px; font-weight: 700; margin-bottom: 7px; }
.tw-sw__group--strong { color: var(--tw-blue-ink); }
.tw-sw__group--weak { color: var(--tw-orange); }
.tw-sw__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.tw-sw__chips--last { margin-bottom: 10px; }
.tw-sw-chip { display: inline-flex; align-items: baseline; gap: 5px; padding: 7px 12px; border-radius: 999px; background: var(--tw-blue-soft); border: none; cursor: pointer; }
.tw-sw-chip--weak { background: var(--tw-orange-soft); }
.tw-sw-chip__k { font-family: var(--tw-ko); font-size: 11.5px; font-weight: 800; color: var(--tw-blue-ink); }
.tw-sw-chip__d { font-family: var(--tw-num); font-size: 11px; font-weight: 800; color: var(--tw-blue-ink); opacity: 0.75; }
.tw-sw-chip--weak .tw-sw-chip__k, .tw-sw-chip--weak .tw-sw-chip__d { color: var(--tw-orange); }
.tw-caption { font-family: var(--tw-ko); font-size: 11px; color: var(--tw-ink2); line-height: 1.5; }

/* ── D2 TREND (T3D2) ────────────────────────────────────────────────── */
.tw-trend__badge { font-family: var(--tw-num); font-size: 11px; font-weight: 800; color: var(--tw-orange); }
.tw-trend__badge--down { color: var(--tw-blue-ink); }
.tw-trend svg { display: block; width: 100%; }
.tw-trend__caption { font-family: var(--tw-ko); font-size: 11px; color: var(--tw-ink2); margin-top: 6px; }

/* ── C1 SCORING (T3C1) ──────────────────────────────────────────────── */
.tw-ts-pill { padding: 3px 8px; border-radius: 999px; background: var(--tw-bg); font-family: var(--tw-num); font-size: 10px; font-weight: 800; color: var(--tw-ink2); }
.tw-sc__row { display: flex; align-items: center; gap: 16px; }
.tw-sc__label { font-family: var(--tw-ko); font-size: 10.5px; font-weight: 700; color: var(--tw-ink3); }
.tw-sc__avg { font-family: var(--tw-num); font-size: 36px; font-weight: 800; color: var(--tw-ink); letter-spacing: -1.5px; line-height: 1.1; }
.tw-sc__sub { font-family: var(--tw-ko); font-size: 10.5px; color: var(--tw-ink2); margin-top: 6px; line-height: 1.5; }
.tw-sc__donutwrap { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.tw-sc__legend { display: flex; flex-direction: column; gap: 5px; }
.tw-sc__legend-row { display: flex; align-items: center; gap: 5px; }
.tw-sc__dot { width: 8px; height: 8px; border-radius: 3px; display: inline-block; }
.tw-sc__legend-k { font-family: var(--tw-num); font-size: 10.5px; font-weight: 800; color: var(--tw-ink); }
.tw-sc__legend-v { font-family: var(--tw-num); font-size: 10.5px; font-weight: 700; color: var(--tw-ink3); }

/* ── C2~C7 그리드 (T3Cgrid) ─────────────────────────────────────────── */
.tw-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px; }
.tw-cell { text-align: left; cursor: pointer; padding: 13px 14px; border-radius: 14px; background: var(--tw-white); border: 1px solid var(--tw-line); }
.tw-cell--weak { background: var(--tw-orange-tint); border: 1.5px solid var(--tw-orange); }
.tw-cell__top { display: flex; align-items: center; gap: 6px; }
.tw-cell__en { font-family: var(--tw-num); font-size: 12px; font-weight: 800; color: var(--tw-ink); letter-spacing: 0.4px; }
.tw-cell__ko { font-family: var(--tw-ko); font-size: 9.5px; font-weight: 700; color: var(--tw-ink3); flex: 1; }
.tw-cell__tag { font-family: var(--tw-ko); font-size: 9px; font-weight: 800; color: var(--tw-orange); }
.tw-cell__val { font-family: var(--tw-num); font-size: 22px; font-weight: 800; color: var(--tw-ink); letter-spacing: -0.5px; margin: 7px 0 3px; }
.tw-cell__sub { font-family: var(--tw-ko); font-size: 9.5px; color: var(--tw-ink3); }

.tw-roster-card { width: 100%; text-align: left; cursor: pointer; padding: 13px 16px; border-radius: 14px; border: 1px solid var(--tw-line); background: var(--tw-white); }
.tw-roster-card__top { display: flex; align-items: center; gap: 8px; }
.tw-roster-card__tiles { display: flex; gap: 6px; margin-top: 10px; }
.tw-leader-tile { flex: 1; padding: 9px 10px; border-radius: 10px; background: var(--tw-bg); text-align: center; }
.tw-leader-tile__t { font-family: var(--tw-ko); font-size: 9.5px; font-weight: 700; color: var(--tw-ink3); }
.tw-leader-tile__n { font-family: var(--tw-ko); font-size: 12px; font-weight: 800; color: var(--tw-ink); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tw-leader-tile__n--me { color: var(--tw-orange); }
.tw-leader-tile__v { font-family: var(--tw-num); font-size: 11px; font-weight: 800; color: var(--tw-ink2); margin-top: 1px; }

/* ── B3 BALANCE (T3B3) ──────────────────────────────────────────────── */
.tw-bal__bar { display: flex; height: 22px; border-radius: 8px; overflow: hidden; margin-bottom: 8px; }
.tw-bal__legend { display: flex; flex-wrap: wrap; gap: 8px; }
.tw-bal__legend span { font-family: var(--tw-ko); font-size: 10px; font-weight: 700; color: var(--tw-ink3); }
.tw-bal__legend b { font-family: var(--tw-num); }
.tw-bal__legend .is-me { color: var(--tw-orange); }
.tw-bal__caption { margin-top: 10px; font-family: var(--tw-ko); font-size: 11px; color: var(--tw-ink2); line-height: 1.5; }

/* ── B2 MY POSITION (T3B2) ──────────────────────────────────────────── */
.tw-my__top { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.tw-my__ranks { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.tw-rank-tile { display: flex; align-items: baseline; gap: 5px; padding: 7px 10px; border-radius: 9px; background: var(--tw-bg); }
.tw-rank-tile--first { background: var(--tw-orange-soft); }
.tw-rank-tile__en { font-family: var(--tw-num); font-size: 11px; font-weight: 800; color: var(--tw-ink); }
.tw-rank-tile__r { font-family: var(--tw-num); font-size: 13px; font-weight: 800; color: var(--tw-ink); }
.tw-rank-tile__u { font-size: 9.5px; font-family: var(--tw-ko); font-weight: 700; color: var(--tw-ink3); }
.tw-rank-tile--first .tw-rank-tile__en, .tw-rank-tile--first .tw-rank-tile__r { color: var(--tw-orange); }
.tw-my__identity { padding: 8px 12px; border-radius: 10px; background: var(--tw-orange-soft); font-family: var(--tw-ko); font-size: 11px; font-weight: 700; color: var(--tw-orange); margin-bottom: 12px; }
.tw-mate-row { display: flex; align-items: center; gap: 10px; padding: 8px 2px; border-bottom: 1px solid var(--tw-line-soft); }
.tw-mate-row--last { border-bottom: none; }
.tw-mate-row__photo { width: 22px; height: 22px; border-radius: 11px; }
.tw-mate-row__name { flex: 1; font-family: var(--tw-ko); font-size: 12px; font-weight: 600; color: var(--tw-ink); }
.tw-mate-row__name--me { font-weight: 800; color: var(--tw-orange); }
.tw-mate-row__cat { font-family: var(--tw-num); font-size: 10.5px; font-weight: 800; color: var(--tw-ink3); }
.tw-mate-row__val { font-family: var(--tw-num); font-size: 13px; font-weight: 800; color: var(--tw-ink); }
.tw-my__more { display: block; width: 100%; text-align: center; padding-top: 8px; border: none; background: transparent; font-family: var(--tw-ko); font-size: 11px; font-weight: 700; color: var(--tw-ink3); cursor: pointer; }

/* ── 드릴다운 헤더 (T3StatDetail / T3Roster) ────────────────────────── */
.tw-dheader { padding: 14px 16px 8px 6px; display: flex; align-items: center; gap: 4px; background: var(--tw-white); }
.tw-dheader__back { width: 44px; height: 44px; border: none; background: transparent; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.tw-dheader__titles { flex: 1; display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.tw-dheader__en { font-family: var(--tw-num); font-size: 16px; font-weight: 800; color: var(--tw-ink); letter-spacing: 0.4px; }
.tw-dheader__ko { font-family: var(--tw-ko); font-size: 12px; font-weight: 700; color: var(--tw-ink3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tw-dheader__season { font-family: var(--tw-num); font-size: 11px; color: var(--tw-ink3); font-weight: 700; }

/* ── 스탯 상세 (T3StatDetail) ───────────────────────────────────────── */
.tw-detail { padding: 16px 20px 110px; }
.tw-dhero { padding: 18px 20px; border-radius: 18px; background: var(--tw-white); border: 1px solid var(--tw-line); margin-bottom: 12px; }
.tw-dhero__label { font-family: var(--tw-ko); font-size: 13px; font-weight: 700; color: var(--tw-ink2); }
.tw-dhero__row { display: flex; align-items: flex-end; justify-content: space-between; margin-top: 6px; }
.tw-dhero__val { font-family: var(--tw-num); font-size: 46px; font-weight: 800; color: var(--tw-ink); letter-spacing: -2px; line-height: 1; }
.tw-dhero__rankwrap { text-align: right; }
.tw-dhero__pool { display: block; font-family: var(--tw-ko); font-size: 10.5px; font-weight: 700; color: var(--tw-ink3); }
.tw-dhero__rank { display: block; font-family: var(--tw-num); font-size: 24px; font-weight: 800; color: var(--tw-orange); letter-spacing: -0.5px; margin-top: 2px; }
.tw-dhero__rank--weak { color: var(--tw-blue-ink); }
.tw-dhero__rank .u { font-size: 12px; font-family: var(--tw-ko); }
.tw-dhero__delta { margin-top: 12px; display: inline-flex; padding: 5px 11px; border-radius: 999px; background: var(--tw-blue-soft); font-family: var(--tw-ko); font-size: 11px; font-weight: 800; color: var(--tw-blue-ink); }
.tw-dhero__delta--weak { background: var(--tw-orange-soft); color: var(--tw-orange); }

.tw-dcard { padding: 16px 18px; border-radius: 16px; background: var(--tw-white); border: 1px solid var(--tw-line); margin-bottom: 12px; }
.tw-dcard__title { font-family: var(--tw-ko); font-size: 12px; font-weight: 800; color: var(--tw-ink); margin-bottom: 10px; }
.tw-dcard__titlerow { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.tw-dcard__titlerow .tw-dcard__title { margin-bottom: 0; }
.tw-dcard__hint { font-family: var(--tw-ko); font-size: 10.5px; color: var(--tw-ink3); }
.tw-drow { display: flex; align-items: baseline; justify-content: space-between; padding: 9px 0; border-bottom: 1px solid var(--tw-line-soft); }
.tw-drow--last { border-bottom: none; }
.tw-drow__k { font-family: var(--tw-ko); font-size: 12.5px; font-weight: 600; color: var(--tw-ink2); }
.tw-drow__vwrap { display: flex; gap: 8px; align-items: baseline; }
.tw-drow__v { font-family: var(--tw-num); font-size: 16px; font-weight: 800; color: var(--tw-ink); }
.tw-drow__share { font-family: var(--tw-num); font-size: 11px; color: var(--tw-ink3); font-weight: 700; }

.tw-top3-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--tw-line-soft); text-decoration: none; }
.tw-top3-row--last { border-bottom: none; }
.tw-top3-row__rank { width: 20px; font-family: var(--tw-num); font-size: 12px; font-weight: 800; color: var(--tw-ink3); }
.tw-top3-row__rank--first { color: var(--tw-orange); }
.tw-top3-row__photo { width: 24px; height: 24px; border-radius: 12px; }
.tw-top3-row__name { flex: 1; font-family: var(--tw-ko); font-size: 12.5px; font-weight: 600; color: var(--tw-ink); }
.tw-top3-row__name--me { font-weight: 800; color: var(--tw-orange); }
.tw-top3-row__val { font-family: var(--tw-num); font-size: 15px; font-weight: 800; color: var(--tw-ink); }

/* ── 로스터 (T3Roster) ──────────────────────────────────────────────── */
.tw-sort { padding: 4px 20px 12px; display: flex; gap: 6px; background: var(--tw-white); }
.tw-sort__btn {
  flex: 1; padding: 9px 0; border-radius: 999px; border: 1px solid var(--tw-line); background: var(--tw-white);
  color: var(--tw-ink2); font-family: var(--tw-num); font-size: 11.5px; font-weight: 800; letter-spacing: 0.6px; cursor: pointer;
}
.tw-sort__btn--on { border: none; background: var(--tw-ink); color: var(--tw-white); }
.tw-roster { padding: 0 20px 110px; }
.tw-roster__caption { display: flex; justify-content: space-between; padding: 2px 2px 8px; }
.tw-roster__caption span { font-family: var(--tw-ko); font-size: 10.5px; font-weight: 700; color: var(--tw-ink3); }
.tw-rrow {
  display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 12px;
  border-bottom: 1px solid var(--tw-line-soft); text-decoration: none; color: inherit; cursor: pointer;
}
.tw-rrow--me { background: var(--tw-orange-soft); border-bottom: none; margin-bottom: 4px; }
.tw-rrow__rank { width: 22px; font-family: var(--tw-num); font-size: 13px; font-weight: 800; color: var(--tw-ink3); }
.tw-rrow__rank--first { color: var(--tw-orange); }
.tw-rrow__photo { width: 30px; height: 30px; border-radius: 15px; }
.tw-rrow__main { flex: 1; min-width: 0; }
.tw-rrow__namerow { display: flex; align-items: center; gap: 6px; }
.tw-rrow__name { font-family: var(--tw-ko); font-size: 13.5px; font-weight: 700; color: var(--tw-ink); }
.tw-rrow__name--me { font-weight: 800; color: var(--tw-orange); }
.tw-rrow__crown { padding: 2px 7px; border-radius: 6px; background: var(--tw-ink); font-family: var(--tw-ko); font-size: 9px; font-weight: 800; color: var(--tw-white); }
.tw-rrow__sub { font-family: var(--tw-ko); font-size: 10px; color: var(--tw-ink3); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tw-rrow__val { font-family: var(--tw-num); font-size: 17px; font-weight: 800; color: var(--tw-ink); }
.tw-rrow__val--me { color: var(--tw-orange); }
.tw-roster__foot { text-align: center; padding: 14px 0 0; font-family: var(--tw-ko); font-size: 11px; font-weight: 700; color: var(--tw-ink3); }

/* ── 선수 페이지 (player_detail.html) ───────────────────────────────── */
.tw-player { padding: 0 20px 110px; }
.tw-pcard { padding: 20px 18px; border-radius: 18px; border: 1px solid var(--tw-line); background: var(--tw-white); display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.tw-pcard__photo { width: 56px; height: 56px; border-radius: 999px; }
.tw-pcard__name { font-family: var(--tw-ko); font-size: 18px; font-weight: 800; color: var(--tw-ink); }
.tw-pcard__me { font-size: 12px; color: var(--tw-orange); }
.tw-pcard__sub { font-family: var(--tw-ko); font-size: 11.5px; color: var(--tw-ink3); margin-top: 3px; }
.tw-pcard__sub b { font-family: var(--tw-num); color: var(--tw-ink2); }
.tw-season-block { margin-bottom: 12px; }
.tw-season-block__head { display: flex; align-items: baseline; gap: 7px; margin: 16px 2px 8px; }
.tw-season-block__year { font-family: var(--tw-num); font-size: 13px; font-weight: 800; color: var(--tw-ink); }
.tw-season-block__team { font-family: var(--tw-ko); font-size: 11px; font-weight: 700; color: var(--tw-ink3); flex: 1; }
.tw-season-block__games { font-family: var(--tw-num); font-size: 10.5px; font-weight: 700; color: var(--tw-ink4); }
.tw-statgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.tw-statgrid__cell { padding: 11px 8px; border-radius: 12px; background: var(--tw-off); text-align: center; }
.tw-statgrid__k { font-family: var(--tw-num); font-size: 10px; font-weight: 800; color: var(--tw-ink3); letter-spacing: 0.4px; }
.tw-statgrid__v { font-family: var(--tw-num); font-size: 17px; font-weight: 800; color: var(--tw-ink); margin-top: 3px; }

/* 팀 페이지 득점 가림 안내 (contracts/stat_privacy.py) — SCORING 카드 하단·상세 카드 */
.tw-sp-note {
  margin-top: 12px;
  padding-top: 11px;
  border-top: 1px solid var(--tw-line-soft, #f1f3f5);
  color: var(--tw-ink3, #8b95a1);
  font-size: 12px;
  line-height: 1.5;
  text-align: left;
}