/*
 * rtp-tournament.css — Tournament Bracket UI 개편 (2026-08-05)
 * docs/ui_kits_tournament/ (tokens.css + NextGameCard + GroupStandings + FinalsBracket) 를
 * 그대로 이식한다. 킷의 전역 규칙(body 배경·폰트, a, button, .demo-*)은 기존 페이지를
 * 오염시키므로 제거하고, :root 토큰과 컴포넌트 클래스(.nx-/.gs-/.fb-)만 가져온다.
 * 킷 토큰명(--ink/--blue/--org 등)은 basketball 앱의 --bb-* 토큰과 이름이 겹치지 않는다
 * (확인: rtp-tournament 로드 대상 페이지에 로드되는 다른 CSS 어디에도 --ink/--blue/--org
 * 계열 변수가 없음) — 프리픽스 없이 그대로 사용.
 *
 * 대진표 밖 보조 UI(예선 일정 접이식, 로그인 CTA, 카드/내팀 메타 텍스트)는 기존처럼
 * --bb-* 토큰 기반 .tb-* 클래스를 그대로 쓴다 — 킷 컴포넌트 범위 밖.
 */

/* =============================================================
 * 킷 tokens.css — :root 변수만 (전역 body/a/button/.demo-* 제거)
 * ============================================================= */
:root {
  --ink: #191f28;
  --ink2: #4e5968;
  --ink3: #8b95a1;
  --ink4: #b0b8c1;
  --line: #e5e8eb;
  --soft: #eef0f2;
  --bg: #f2f4f6;
  --off: #f7f8fa;
  --blue: #3182f6;
  --blue-soft: #e8f1ff;
  --blue-ink: #1b64da;
  --org: #ff6b35;
  --org-soft: #ffeee6;
  --red: #ef2b2b;
  --grn: #12b886;
  --radius-card: 14px;
  --radius-sm: 9px;
  /* #31 — CDN(_rtp_base) defines only 'Pretendard Variable' */
  --num: 'Barlow', 'Pretendard Variable', 'Pretendard', system-ui, sans-serif;
  --ko: 'Pretendard Variable', 'Pretendard', -apple-system, system-ui, sans-serif;
}

/* =============================================================
 * NextGameCard (kit .nx-*) — 내 팀 카드의 "다음 경기" 블록
 * ============================================================= */
.nx { background: #fff; border-radius: var(--radius-card); overflow: hidden; }
.nx-top { display: flex; align-items: center; gap: 7px; padding: 12px 13px 0; font-size: 11px; font-weight: 700; color: var(--ink3); }
.nx-dday { font-family: var(--num); font-size: 11px; font-weight: 900; background: var(--org); color: #fff; border-radius: 6px; padding: 3px 6px; letter-spacing: .3px; }
.nx-vs { display: flex; align-items: center; gap: 10px; padding: 12px 13px; }
.nx-side { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.nx-side.is-away { align-items: flex-end; text-align: right; }
.nx-name { font-size: 15px; font-weight: 800; letter-spacing: -.4px; display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nx-meta { font-size: 10.5px; font-weight: 700; color: var(--ink3); display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nx-mid { font-family: var(--num); font-size: 12px; font-weight: 900; color: var(--ink4); flex-shrink: 0; }
.nx-stats { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--soft); }
.nx-stat { padding: 11px 6px; text-align: center; border-right: 1px solid var(--soft); }
.nx-stat:last-child { border-right: none; }
.nx-stat > b { display: block; font-family: var(--num); font-size: 15px; font-weight: 900; letter-spacing: -.3px; }
.nx-stat > span { display: block; font-size: 10px; font-weight: 700; color: var(--ink3); margin-top: 3px; }
.nx-form { display: inline-flex; gap: 3px; align-items: center; justify-content: center; }
.nx-form i { width: 15px; height: 15px; border-radius: 4px; display: grid; place-items: center; font-family: var(--num); font-size: 9px; font-weight: 900; font-style: normal; background: var(--blue); color: #fff; }
.nx-form i.is-loss { background: var(--line); color: var(--ink3); }
.nx-cta { display: flex; align-items: center; justify-content: center; gap: 5px; padding: 13px; background: var(--org-soft); color: var(--org); font-size: 13px; font-weight: 800; width: 100%; min-height: var(--bb-tap-target, 44px); text-align: center; text-decoration: none; }
.nx-cta:active { background: #ffe2d4; }

/* =============================================================
 * GroupStandings (kit .gs-*) — 조편성 순위표
 * ============================================================= */
.gs { background: #fff; border-radius: var(--radius-card); }
.gs-banner { display: flex; align-items: center; gap: 9px; padding: 12px 13px; border-bottom: 1px solid var(--soft); }
.gs-banner .rank { width: 30px; height: 30px; border-radius: var(--radius-sm); background: #e6f8f2; color: #0b8f6d; display: grid; place-items: center; font-size: 14px; font-weight: 900; flex-shrink: 0; }
.gs-banner .tx b { display: block; font-size: 13px; font-weight: 800; }
.gs-banner .tx span { display: block; font-size: 11px; font-weight: 600; color: var(--ink3); margin-top: 2px; }
/* 조 탭이 375px 에서 8개(A~H) 다 안 들어가는 건 킷 원본도 마찬가지(가로 스크롤 전제 —
   GroupStandings/styles.css 도 overflow-x:auto, 그대로 유지). 다만 정적 캡처(실기기
   검수)에서는 "스크롤 가능"이라는 단서 없이 마지막 탭이 뚝 끊겨 보였다 — CSS만으로
   스크롤 위치에 따라 나타났다 사라지는 "스크롤 그림자"(JS 없이 background-attachment
   local/scroll 조합)를 얹는다. 끝까지 스크롤하면 오른쪽 그림자가 저절로 사라지고,
   애초에 안 넘치면(항목이 적어 다 보이면) 처음부터 안 뜬다 — 늘 떠 있는 고정 마스크가
   아니라서 "다 보이는데도 마지막 항목이 흐려 보이는" 오작동이 없다. division 탭도
   같은 패턴으로 통일(항목은 4개뿐이지만 375px 에서 넘칠 수 있어 동일 처리). */
.gs-tabs {
  display: flex; gap: 5px; padding: 11px 11px 2px; overflow-x: auto; scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  background:
    linear-gradient(to right, var(--bb-bg, #fff) 30%, rgba(255, 255, 255, 0)) 0 0,
    linear-gradient(to right, rgba(255, 255, 255, 0), var(--bb-bg, #fff) 70%) 100% 0,
    radial-gradient(farthest-side at 0 50%, rgba(0, 0, 0, .18), rgba(0, 0, 0, 0)) 0 0,
    radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, .18), rgba(0, 0, 0, 0)) 100% 0;
  background-repeat: no-repeat;
  background-color: var(--bb-bg, #fff);
  background-size: 24px 100%, 24px 100%, 10px 100%, 10px 100%;
  background-attachment: local, local, scroll, scroll;
}
.gs-tabs::-webkit-scrollbar { display: none; }
.gs-tab { flex: 0 0 auto; min-width: var(--bb-tap-target, 44px); min-height: var(--bb-tap-target, 44px); padding: 0 10px; border-radius: var(--radius-sm); background: var(--off); font-family: var(--num); font-size: 12.5px; font-weight: 800; color: var(--ink3); display: grid; place-items: center; cursor: pointer; border: none; }
.gs-tab.is-active { background: var(--ink); color: #fff; }
.gs-tab.is-mine { box-shadow: 0 0 0 1.4px var(--org) inset; color: var(--org); }
.gs-tab.is-active.is-mine { background: var(--org); color: #fff; box-shadow: none; }
.gs-group-panel[hidden] { display: none; }
.gs-table { padding: 4px 0 8px; }
.gs-head, .gs-row { display: grid; grid-template-columns: 22px 1fr 46px 40px 52px; gap: 4px; }
.gs-head { padding: 8px 13px; font-size: 10px; font-weight: 800; color: var(--ink4); }
.gs-head span:nth-child(n+3) { text-align: center; }
.gs-row { align-items: center; padding: 9px 13px; font-size: 12.5px; font-weight: 700; }
.gs-row.is-mine { background: var(--org-soft); }
.gs-row.is-withdrawn { opacity: .55; }
.gs-row .rk { font-family: var(--num); font-weight: 900; color: var(--ink3); }
.gs-row.is-qualified .rk { color: var(--org); }
.gs-row .tm { font-weight: 800; letter-spacing: -.3px; display: flex; align-items: center; gap: 5px; min-width: 0; }
.gs-badge { display: inline-flex; align-items: center; border-radius: 999px; background: var(--org); color: #fff; font-family: var(--num); font-size: 10px; font-weight: 900; letter-spacing: .4px; padding: 3px 7px; }
.gs-badge--withdrawn { background: var(--ink4); }
.gs-row .num { font-family: var(--num); font-weight: 800; text-align: center; color: var(--ink2); }
.gs-row .num.pm { color: var(--blue-ink); }
.gs-row .num.pm.is-neg { color: var(--red); }
.gs-cut { display: flex; align-items: center; gap: 8px; padding: 6px 13px; font-size: 10px; font-weight: 800; color: var(--org); }
.gs-cut i { flex: 1; height: 1px; background: var(--org); opacity: .35; display: block; }

/* =============================================================
 * FinalsBracket (kit .fb-*) — 결선 사다리
 * 킷 원본은 JS 가 좌표(x/y)를 계산해 절대배치한다. 서버 렌더에서는 좌표 계산 대신
 * flexbox 로 같은 결과를 낸다: 라운드 컬럼은 전부 같은 높이로 stretch 되고
 * (align-items:stretch), 각 컬럼 안에서 경기는 justify-content:space-around 로
 * 고르게 분산된다 — 완전 이진 트리에서는 이 방식이 JS 좌표 계산과 동일한 중심점을
 * 만든다(부모 경기 중심 y = 자식 두 경기 중심의 평균).
 * ============================================================= */
.fb { background: #fff; border-radius: var(--radius-card); }
.fb-banner { display: flex; align-items: center; gap: 9px; padding: 12px 13px; border-bottom: 1px solid var(--soft); }
.fb-banner .ic { width: 30px; height: 30px; border-radius: var(--radius-sm); background: var(--blue-soft); color: var(--blue-ink); display: grid; place-items: center; font-family: var(--num); font-size: 13px; font-weight: 900; flex-shrink: 0; }
.fb-banner .tx b { display: block; font-size: 13px; font-weight: 800; }
.fb-banner .tx span { display: block; font-size: 11px; font-weight: 600; color: var(--ink3); margin-top: 2px; }
.fb-scroll { overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.fb-scroll::-webkit-scrollbar { display: none; }
.fb-canvas { position: relative; width: max-content; padding: 10px 12px 12px; }
.fb-heads { display: flex; gap: 26px; margin-bottom: 8px; }
.fb-head-col { display: block; flex: 0 0 112px; width: 112px; font-size: 10px; font-weight: 800; color: var(--ink4); text-align: center; }
.fb-grid { display: flex; gap: 26px; align-items: stretch; }
.fb-round-col { display: flex; flex-direction: column; justify-content: space-around; gap: 8px; flex: 0 0 112px; width: 112px; position: relative; }
.fb-round-col:not(:first-child) .fb-match { position: relative; }
.fb-round-col:not(:first-child) .fb-match::before {
  content: ''; position: absolute; left: -13px; top: 50%; width: 13px; height: 1px; background: #d0d6dd;
}
.fb-match { background: var(--off); border-radius: 8px; padding: 5px 7px; display: flex; flex-direction: column; justify-content: center; gap: 3px; min-height: 52px; }
.fb-match.is-mine { background: var(--org-soft); box-shadow: 0 0 0 1.3px var(--org) inset; }
.fb-match.is-tbd { background: #fff; box-shadow: 0 0 0 1px var(--line) inset; }
.fb-team { display: flex; align-items: center; justify-content: space-between; gap: 5px; font-size: 11px; font-weight: 700; color: var(--ink4); line-height: 1.2; }
.fb-team span:first-child { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fb-team.is-winner { color: var(--ink); font-weight: 800; }
.fb-team b { font-family: var(--num); font-size: 10.5px; font-weight: 900; flex-shrink: 0; }
.fb-legend { display: flex; gap: 12px; padding: 10px 13px 12px; font-size: 10px; font-weight: 700; color: var(--ink3); }
.fb-legend i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; background: var(--org); margin-right: 4px; vertical-align: middle; }

/* =============================================================
 * 내 팀 카드 래퍼 (_tournament_my_card.html) — 킷 범위 밖 보조 텍스트
 * ============================================================= */
.tb-mycard {
  margin: var(--bb-space-4) 0;
  display: flex;
  flex-direction: column;
  gap: var(--bb-space-2);
  padding: var(--bb-space-3);
}

.tb-mycard__team {
  font: var(--bb-type-h5);
  color: var(--bb-ink);
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--bb-space-05);
}

.tb-mycard__meta {
  font: var(--bb-type-caption);
  color: var(--bb-ink-sub);
  font-weight: 500;
}

.tb-mycard__next-empty {
  font: var(--bb-type-body-sm);
  color: var(--bb-ink-sub);
  margin: 0;
  padding: var(--bb-space-3);
  background: var(--bb-surface);
  border-radius: var(--bb-radius);
}

.tb-mycard__asof {
  font: var(--bb-type-caption);
  color: var(--bb-ink-muted);
  margin: 0;
}

/* =============================================================
 * 대진표 섹션 래퍼 (_tournament_bracket.html) — 킷 범위 밖
 * ============================================================= */
.tb-section {
  margin: var(--bb-space-4) 0;
  display: flex;
  flex-direction: column;
  gap: var(--bb-space-3);
}

.tb-section__head {
  display: flex;
  flex-direction: column;
  gap: var(--bb-space-05);
}

.tb-section__title {
  font: var(--bb-type-h4);
  color: var(--bb-ink);
  margin: 0;
}

.tb-section__period {
  font: var(--bb-type-body-sm);
  color: var(--bb-ink-sub);
  margin: 0;
}

/* 부서 탭 — 넘치면 가로 스크롤(줄바꿈 대신), 탭타겟 44px 필수.
   조 탭(.gs-tabs)과 같은 CSS-only 스크롤 그림자 처리 — 배경색만 페이지 배경(--rtp-bg,
   rtp-entry__body 배경)에 맞춤. */
.tb-divtabs {
  display: flex;
  gap: var(--bb-space-2);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  background:
    linear-gradient(to right, var(--rtp-bg, #f1f3f5) 30%, rgba(241, 243, 245, 0)) 0 0,
    linear-gradient(to right, rgba(241, 243, 245, 0), var(--rtp-bg, #f1f3f5) 70%) 100% 0,
    radial-gradient(farthest-side at 0 50%, rgba(0, 0, 0, .18), rgba(0, 0, 0, 0)) 0 0,
    radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, .18), rgba(0, 0, 0, 0)) 100% 0;
  background-repeat: no-repeat;
  background-color: var(--rtp-bg, #f1f3f5);
  background-size: 24px 100%, 24px 100%, 10px 100%, 10px 100%;
  background-attachment: local, local, scroll, scroll;
}
.tb-divtabs::-webkit-scrollbar { display: none; }

.tb-divtab {
  flex: 1 0 auto;
  min-height: var(--bb-tap-target);
  padding: 0 var(--bb-space-3);
  border: 1px solid var(--bb-border);
  border-radius: var(--bb-radius-pill);
  background: var(--bb-bg);
  color: var(--bb-ink-sub);
  font: var(--bb-type-body-sm);
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--bb-t-fast) var(--bb-ease),
              color var(--bb-t-fast) var(--bb-ease),
              border-color var(--bb-t-fast) var(--bb-ease);
}

.tb-divtab:focus-visible {
  outline: 2px solid var(--bb-primary);
  outline-offset: 2px;
}

.tb-divtab--active {
  background: var(--bb-primary);
  border-color: var(--bb-primary);
  color: var(--bb-bg);
}

/* 활성 부서 패널만 노출 — [hidden] 이 항상 이긴다(레이아웃 override 방지) */
.tb-divpanel {
  display: flex;
  flex-direction: column;
  gap: var(--bb-space-3);
}

.tb-divpanel[hidden] {
  display: none;
}

.tb-cta {
  margin: 0;
}

/* 예선 일정 — 접이식 */
.tb-schedule-details {
  border: 1px solid var(--bb-border-soft);
  border-radius: var(--bb-radius);
  background: var(--bb-surface);
}

.tb-schedule-details__summary {
  padding: var(--bb-space-3);
  font: var(--bb-type-body-sm);
  font-weight: 700;
  color: var(--bb-ink);
  cursor: pointer;
  min-height: var(--bb-tap-target);
  display: flex;
  align-items: center;
  gap: var(--bb-space-2);
  list-style: none;   /* 기본 ▶ 마커 제거 — 자체 chevron 을 쓴다 */
}
.tb-schedule-details__summary::-webkit-details-marker { display: none; }
.tb-schedule-details__ic {
  display: inline-flex;
  color: var(--bb-primary);
}
.tb-schedule-details__tx { flex: 1; }
.tb-schedule-details__chev {
  display: inline-flex;
  color: var(--bb-ink-muted);
  transition: transform 0.18s ease;
}
.tb-schedule-details[open] .tb-schedule-details__chev { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) {
  .tb-schedule-details__chev { transition: none; }
}

.tb-schedule {
  display: flex;
  flex-direction: column;
  gap: var(--bb-space-3);
  padding: 0 var(--bb-space-3) var(--bb-space-3);
}

.tb-schedule__date {
  font: var(--bb-type-body-sm);
  font-weight: 700;
  color: var(--bb-ink);
  margin: 0 0 var(--bb-space-1);
}

.tb-schedule__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--bb-space-2);
  padding: var(--bb-space-2);
  border-radius: var(--bb-radius);
  background: var(--bb-bg);
  margin-bottom: var(--bb-space-1);
}

.tb-schedule__row--mine {
  background: var(--bb-primary-tint);
  border: 1px solid var(--bb-primary-soft);
}

.tb-schedule__row--cancelled {
  text-decoration: line-through;
  opacity: 0.6;
}

.tb-schedule__time {
  color: var(--bb-ink-sub);
  font: var(--bb-type-body-sm);
}

.tb-schedule__venue {
  color: var(--bb-ink-sub);
  font: var(--bb-type-caption);
}

.tb-schedule__match {
  flex: 1 0 auto;
  font: var(--bb-type-body-sm);
  color: var(--bb-ink);
}

.tb-schedule__vs {
  color: var(--bb-ink-muted);
  margin: 0 var(--bb-space-1);
}

.tb-schedule__result {
  color: var(--bb-ink);
  font-weight: 700;
}

.tb-bracket__pending {
  font: var(--bb-type-body-sm);
  color: var(--bb-ink-sub);
  text-align: center;
  padding: var(--bb-space-3);
  background: var(--bb-surface);
  border-radius: var(--bb-radius);
  margin: 0;
}

/* =============================================================
 * Desktop (768px+) — 조편성 넓게, 결선은 이미 가로 스크롤 트리라 그대로
 * ============================================================= */
@media (min-width: 768px) {
  .fb-round-col,
  .fb-head-col {
    flex-basis: 128px;
    width: 128px;
  }
}