/*
 * 새 대회 페이지(tournament-v2.html) — docs/tournament-public-page-renewal-plan.md §4, 디자인 캔버스와 같은 구성
 * 토큰은 /css/statify-tokens.css. 클래스는 tv- 접두사(내비게이션 스타일과 겹치지 않게).
 * 폭: 데스크톱 1240px(안쪽 1200), 모바일 390px·360px 에서 가로 스크롤 없음(표는 열을 줄인다). 모바일 터치 대상은 40px 이상.
 */

.tv-page { background: var(--st-bg); color: var(--st-text); font-family: var(--st-font); min-height: 70vh; padding-bottom: 72px; word-break: keep-all; overflow-wrap: break-word; }
.tv-page *, .tv-page *::before, .tv-page *::after { box-sizing: border-box; }
/* 기본값은 :where() 로 우선순위 0 — .tv-chip·.tv-btn 같은 클래스 규칙이 언제나 이긴다 */
:where(.tv-page) :where(button, input, select) { font: inherit; }
:where(.tv-page) :where(a) { color: var(--st-accent); text-decoration: none; }
:where(.tv-page) :where(a:hover) { color: var(--st-accent-strong); }
/* 포커스 고리: 실선(배경 대비 3:1 이상), 요소 모양(알약·라운드)은 그대로 */
:where(.tv-page) :focus-visible { outline: 3px solid var(--st-accent); outline-offset: 2px; }
.tv-hero :focus-visible { outline-color: #86efac; }
/* 가로 스크롤 줄 안에서는 고리가 잘리지 않게 안쪽으로 */
.tv-tabs .tv-tab:focus-visible, .tv-chips .tv-chip:focus-visible, .tv-team-chips .tv-chip:focus-visible, .tv-days .tv-day:focus-visible { outline-offset: -3px; }
.tv-page h1, .tv-page h2, .tv-page h3 { color: var(--st-text); }
.tv-wrap { max-width: 1240px; margin: 0 auto; padding-left: 20px; padding-right: 20px; }
.tv-num { font-variant-numeric: tabular-nums; }
.tv-ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.tv-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.tv-muted { color: var(--st-sub); }
.tv-only-narrow { display: none; }

/* ---------- 공통 조각 ---------- */
.tv-emblem { width: var(--sz, 26px); height: var(--sz, 26px); object-fit: contain; flex: none; display: inline-block; }
.tv-mono { width: var(--sz, 26px); height: var(--sz, 26px); flex: none; border-radius: 999px; background: var(--st-draw-bg); color: var(--st-draw-fg);
    font-size: calc(var(--sz, 26px) * 0.36); font-weight: 800; display: inline-flex; align-items: center; justify-content: center; letter-spacing: -0.02em; overflow: hidden; }
.tv-team { display: inline-flex; align-items: center; gap: 10px; min-width: 0; max-width: 100%; color: var(--st-text); font-weight: 700; }
.tv-page a.tv-team { color: var(--st-text); }
.tv-page a.tv-team:hover .tv-team-name { text-decoration: underline; }
.tv-team-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.tv-withdrawn, .tv-forfeit-tag { font-size: 11px; font-weight: 800; color: var(--st-loss-fg); background: var(--st-loss-bg); border-radius: 6px; padding: 1px 6px; flex: none; white-space: nowrap; }

.tv-card { background: var(--st-card); border: 1px solid var(--st-border); border-radius: var(--st-radius-lg); padding: 20px 22px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.tv-card-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 10px; }
.tv-card-head h2, .tv-card-head h3, .tv-card-title { margin: 0; font-size: 18px; font-weight: 800; letter-spacing: -0.01em; }
.tv-card-title-sm { margin: 0; font-size: 16px; font-weight: 800; }
.tv-card-head .tv-card-note { font-size: 13px; color: var(--st-sub); font-weight: 600; }
.tv-card-link { margin-left: auto; font-size: 14px; font-weight: 700; }
.tv-section-bar { padding: 0 2px; align-items: center; }
.tv-empty { padding: 18px 4px; color: var(--st-sub); font-size: 14px; }
.tv-badge { display: inline-flex; align-items: center; font-size: 12px; font-weight: 800; border-radius: 6px; padding: 2px 8px; }
.tv-badge--day { color: var(--st-accent); background: var(--st-accent-soft); }
.tv-badge--edition { color: var(--st-accent-strong); background: var(--st-accent-soft); padding: 3px 9px; }
.tv-badge--type { color: var(--st-draw-fg); background: var(--st-soft); font-weight: 700; padding: 3px 9px; }
.tv-badge--hidden { color: var(--st-gold-fg); background: var(--st-gold-chip); font-weight: 700; padding: 3px 9px; }

.tv-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 10px; font-size: 14px; font-weight: 700;
    border: 1px solid transparent; cursor: pointer; white-space: nowrap; text-decoration: none; background: none; color: var(--st-text); }
.tv-page a.tv-btn--primary, .tv-btn--primary { background: var(--st-accent); color: var(--st-on-accent); }
.tv-page a.tv-btn--primary:hover, .tv-btn--primary:hover { background: var(--st-accent-strong); color: var(--st-on-accent); }
.tv-page a.tv-btn--outline, .tv-btn--outline { border-color: var(--st-border-strong); background: var(--st-card); color: var(--st-text); }
.tv-btn--outline:hover { background: var(--st-soft); }
.tv-btn--quiet { color: var(--st-muted); padding: 0 12px; }
.tv-page a.tv-btn--quiet { color: var(--st-muted); }
.tv-btn--icon { width: 40px; padding: 0; }
.tv-btn--sm { height: 32px; padding: 0 12px; border-radius: 8px; font-size: 13px; }
.tv-btn--sm.tv-btn--icon { width: 32px; padding: 0; }
.tv-btn svg { flex: none; }
/* ▶ 영상 버튼은 빨강(캔버스) — 테두리 버튼 색 규칙보다 우선 */
.tv-page a.tv-btn.tv-video { color: #b91c1c; }
[data-theme="dark"] .tv-page a.tv-btn.tv-video { color: #fca5a5; }

.tv-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.tv-chip { height: 34px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--st-border); background: var(--st-card); color: var(--st-draw-fg);
    font-size: 13px; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.tv-chip:hover { border-color: var(--st-border-strong); }
.tv-chip[aria-pressed="true"] { border-color: var(--st-accent); background: var(--st-accent); color: var(--st-on-accent); font-weight: 800; }
.tv-chip--sm { height: 32px; padding: 0 10px; font-size: 12px; }

.tv-seg { display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; background: var(--st-soft); border-radius: 10px; padding: 4px; }
.tv-seg button { height: 34px; padding: 0 14px; border: 0; border-radius: 8px; background: transparent; color: var(--st-muted); font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.tv-seg button[aria-pressed="true"] { background: var(--st-card); color: var(--st-accent); font-weight: 800; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08); }
.tv-seg--block { display: grid; }

.tv-form { display: flex; gap: 3px; }
.tv-form span { width: 26px; height: 22px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; }
.tv-res-W { background: var(--st-win-bg); color: var(--st-win-fg); }
.tv-res-D { background: var(--st-draw-bg); color: var(--st-draw-fg); }
.tv-res-L { background: var(--st-loss-bg); color: var(--st-loss-fg); }
.tv-res-N { background: var(--st-soft); color: var(--st-muted); }

.tv-loading, .tv-error { max-width: 1240px; margin: 40px auto; padding: 0 20px; color: var(--st-sub); font-size: 15px; }
.tv-wrap .tv-error, .tv-body .tv-error { padding: 0; }
.tv-error .tv-error-title { color: var(--st-text); display: block; font-size: 18px; font-weight: 800; margin: 0 0 6px; }
.tv-error .tv-btn { margin-top: 10px; }
.tv-skeleton { display: block; height: 14px; border-radius: 6px; background: linear-gradient(90deg, var(--st-soft), var(--st-line), var(--st-soft)); background-size: 200% 100%; animation: tv-shimmer 1.2s linear infinite; }
@keyframes tv-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .tv-skeleton { animation: none; } }

/* 이름 타일(배너 없을 때) */
.tv-tile { background: var(--st-tile-bg); display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; padding: 12px 16px; aspect-ratio: 3 / 1; overflow: hidden; }
.tv-tile-label { font-size: 11px; font-weight: 700; color: var(--st-hero-label); letter-spacing: 0.04em; }
.tv-tile-name { font-size: 18px; font-weight: 800; color: #ffffff; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tv-banner { display: block; width: 100%; aspect-ratio: 3 / 1; object-fit: cover; background: var(--st-tile-bg); }
/* 다크 모드: 타일이 카드 배경과 섞이지 않게 테두리 */
[data-theme="dark"] .tv-tile, [data-theme="dark"] span.tv-switch-thumb { box-shadow: inset 0 0 0 1px var(--st-hero-line); }

/* ---------- 허브 ---------- */
.tv-hub { padding-top: 32px; display: flex; flex-direction: column; gap: 36px; }
.tv-hub-head { display: flex; flex-direction: column; gap: 6px; }
.tv-hub-head h1 { margin: 0; font-size: 34px; font-weight: 800; letter-spacing: -0.02em; }
.tv-hub-head p { margin: 0; font-size: 16px; color: var(--st-sub); }
.tv-section { display: flex; flex-direction: column; gap: 14px; }
.tv-section-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.tv-section-head > div { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; }
.tv-section h2 { margin: 0; font-size: 20px; font-weight: 800; }
.tv-live-title { display: flex; align-items: center; gap: 10px; font-size: 22px !important; }
.tv-live-dot { width: 12px; height: 12px; border-radius: 999px; background: #22c55e; box-shadow: 0 0 0 5px rgba(34, 197, 94, 0.18); flex: none; }

.tv-hero { background: var(--st-hero-bg); border-radius: var(--st-radius-xl); padding: 24px; display: flex; flex-direction: column; gap: 20px; box-shadow: var(--st-shadow-hero); }
.tv-hero-top { display: flex; flex-wrap: wrap; align-items: stretch; gap: 24px; }
.tv-hero-art { flex: 1 1 380px; max-width: 460px; border-radius: 16px; overflow: hidden; aspect-ratio: 3 / 1; }
.tv-hero-art .tv-tile { aspect-ratio: auto; width: 100%; height: 100%; background: var(--st-hero-panel); border: 1px solid var(--st-hero-line); border-radius: 16px; padding: 20px 24px; gap: 4px; }
.tv-hero-art .tv-tile-label { font-size: 13px; }
.tv-hero-art .tv-tile-name { font-size: 38px; }
.tv-hero-art .tv-banner { border-radius: 16px; height: 100%; }
.tv-hero-info { flex: 999 1 420px; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 12px; }
.tv-page a.tv-hero-name { font-size: 30px; font-weight: 800; color: #ffffff; letter-spacing: -0.02em; }
.tv-page a.tv-hero-name:hover { color: #ffffff; text-decoration: underline; }
.tv-hero-meta { font-size: 15px; color: var(--st-hero-text); }
.tv-progress { display: flex; align-items: center; gap: 12px; max-width: 520px; }
.tv-progress-track { flex: 1; height: 10px; border-radius: 999px; background: var(--st-hero-track); overflow: hidden; }
.tv-progress-fill { height: 100%; border-radius: 999px; background: #4ade80; }
.tv-progress-label { font-size: 14px; font-weight: 800; color: #ffffff; }
.tv-hero-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.tv-page a.tv-btn--hero { height: 42px; background: #ffffff; color: #102a1d; font-size: 15px; font-weight: 800; }
.tv-page a.tv-btn--hero:hover { background: #ecfdf3; color: #102a1d; }
.tv-page a.tv-btn--hero-ghost { height: 42px; border-color: var(--st-hero-button-line); color: #ffffff; font-size: 15px; }
.tv-page a.tv-btn--hero-ghost:hover { background: rgba(255, 255, 255, 0.08); color: #ffffff; }
.tv-hero-panels { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 14px; }
.tv-panel { background: var(--st-card); border-radius: 16px; padding: 16px 18px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.tv-panel-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.tv-panel-head h3 { margin: 0; font-size: 16px; font-weight: 800; }
.tv-panel-head span { font-size: 13px; font-weight: 700; color: var(--st-sub); }
.tv-panel-head .tv-badge--day { color: var(--st-accent); font-weight: 800; }
.tv-panel > a { font-size: 13px; font-weight: 700; margin-top: auto; }
.tv-mini { list-style: none; margin: 0; padding: 0; }
.tv-mini li { display: grid; align-items: center; gap: 8px; min-height: 40px; border-top: 1px solid var(--st-line); font-size: 14px; }
.tv-mini--table li { grid-template-columns: 20px minmax(0, 1fr) auto; }
.tv-mini--table .tv-mini-rank { font-weight: 800; color: var(--st-draw-fg); }
.tv-mini--table .tv-mini-pts { text-align: right; font-weight: 800; }
.tv-mini--vs li { grid-template-columns: minmax(0, 1fr) 26px minmax(0, 1fr); font-weight: 700; }
.tv-mini--score li { grid-template-columns: minmax(0, 1fr) 58px minmax(0, 1fr); gap: 6px; }
.tv-mini-side { display: flex; align-items: center; gap: 6px; min-width: 0; }
.tv-mini-side--home { justify-content: flex-end; text-align: right; }
.tv-mini-vs { text-align: center; font-size: 11px; font-weight: 800; color: var(--st-faint); }
.tv-mini-score { text-align: center; font-size: 15px; font-weight: 800; }
.tv-lose { font-weight: 600; color: var(--st-muted); }
.tv-win { font-weight: 800; color: var(--st-text); }

.tv-upcoming-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(460px, 100%), 1fr)); gap: 16px; }
.tv-page a.tv-upcoming { display: flex; align-items: stretch; background: var(--st-card); border: 1px solid var(--st-border); border-radius: 16px; overflow: hidden; color: var(--st-text); }
.tv-page a.tv-upcoming:hover { border-color: var(--st-border-strong); color: var(--st-text); }
.tv-upcoming-art { width: 180px; flex: none; }
.tv-upcoming-art .tv-tile, .tv-upcoming-art .tv-banner { height: 100%; aspect-ratio: auto; }
.tv-upcoming-art .tv-tile-name { font-size: 22px; }
.tv-upcoming-body { padding: 16px 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; min-width: 0; }
.tv-upcoming-body strong { font-size: 18px; font-weight: 800; }
.tv-upcoming-body span { font-size: 13px; color: var(--st-sub); }

.tv-past-list { display: flex; flex-direction: column; gap: 14px; }
.tv-edition-title { margin: 6px 0 0; font-size: 15px; font-weight: 800; color: var(--st-muted) !important; }
.tv-archive-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(270px, 100%), 1fr)); gap: 14px; }
.tv-page a.tv-archive { display: flex; flex-direction: column; background: var(--st-card); border: 1px solid var(--st-border); border-radius: 14px; overflow: hidden; color: var(--st-text); }
.tv-page a.tv-archive:hover { border-color: var(--st-border-strong); color: var(--st-text); box-shadow: var(--st-shadow-sm); }
.tv-archive-art { display: block; }
.tv-archive-body { padding: 12px 16px 14px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.tv-archive-body strong { font-size: 15px; font-weight: 700; }
.tv-archive-body span { font-size: 13px; color: var(--st-sub); }
.tv-archive-chevron { display: none; }
.tv-champion { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--st-gold-fg) !important; min-width: 0; }

/* ---------- 상세 머리 ---------- */
.tv-detail-top { padding-top: 20px; display: flex; flex-direction: column; gap: 14px; }
.tv-crumbs { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--st-sub); min-width: 0; }
.tv-page .tv-crumbs a { color: var(--st-sub); font-weight: 600; }
.tv-crumbs strong { color: var(--st-text); font-weight: 700; }
.tv-head { background: var(--st-card); border: 1px solid var(--st-border); border-radius: 16px; padding: 24px 28px; display: flex; flex-wrap: wrap; align-items: center; gap: 28px; box-shadow: var(--st-shadow-sm); }
.tv-head-main { flex: 999 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.tv-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.tv-head h1 { margin: 0; font-size: 32px; font-weight: 800; letter-spacing: -0.02em; }
.tv-head-meta { margin: 0; font-size: 15px; color: var(--st-sub); }
.tv-head-champion { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 800; color: var(--st-gold-fg); background: var(--st-gold-bg); border: 1px solid var(--st-gold-border); border-radius: 999px; padding: 4px 12px; align-self: flex-start; }
.tv-head-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 4px; }
.tv-head-art { flex: 1 1 360px; max-width: 400px; border-radius: 12px; overflow: hidden; }
.tv-head-art .tv-tile { padding: 16px 20px; gap: 4px; }
.tv-head-art .tv-tile-label { font-size: 12px; }
.tv-head-art .tv-tile-name { font-size: 26px; }
/* 901px 이상: 배너가 정보 아래로 떨어지지 않고 옆에서 줄어든다 */
@media (min-width: 901px) {
    .tv-head { flex-wrap: nowrap; }
    .tv-head-main { flex: 1 1 0; }
    .tv-head-art { flex: 0 1 360px; min-width: 240px; }
}

.tv-switch-anchor { position: relative; display: inline-flex; }
.tv-switcher { position: absolute; top: 48px; left: 0; z-index: 60; width: 440px; max-height: min(70vh, 640px); overflow-y: auto; overscroll-behavior: contain; background: var(--st-card); border: 1px solid var(--st-border);
    border-radius: 16px; box-shadow: var(--st-shadow-pop); padding: 10px; display: flex; flex-direction: column; gap: 4px; }
.tv-switcher[hidden] { display: none; }
.tv-switcher-head { display: flex; align-items: center; gap: 8px; padding: 8px 10px 6px; }
.tv-switcher-head strong { font-size: 15px; font-weight: 800; }
.tv-switcher-head a { margin-left: auto; font-size: 13px; font-weight: 700; }
.tv-switcher-close { display: none; }
.tv-switcher-group { font-size: 12px; font-weight: 800; color: var(--st-sub); padding: 8px 10px 4px; }
.tv-page a.tv-switch-item { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 10px; color: var(--st-text); }
.tv-page a.tv-switch-item:hover { background: var(--st-soft); color: var(--st-text); }
.tv-page a.tv-switch-item[aria-current="page"] { background: var(--st-accent-tint); }
.tv-switch-thumb { width: 72px; height: 24px; border-radius: 4px; object-fit: cover; flex: none; background: var(--st-tile-bg); }
.tv-switch-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.tv-switch-text strong { font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tv-switch-text span { font-size: 12px; color: var(--st-sub); }
.tv-sheet-backdrop { display: none; }

.tv-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--st-border); overflow-x: auto; scrollbar-width: none; }
.tv-tabs::-webkit-scrollbar { display: none; }
.tv-page a.tv-tab { display: inline-flex; align-items: center; height: 48px; padding: 0 18px; font-size: 15px; font-weight: 700; color: var(--st-muted);
    border-bottom: 3px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.tv-page a.tv-tab:hover { color: var(--st-text); }
.tv-page a.tv-tab[aria-current="page"] { color: var(--st-accent); border-bottom-color: var(--st-accent); font-weight: 800; }
.tv-body { padding-top: 24px; }

/* ---------- 개요 ---------- */
.tv-ov { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
.tv-ov-main { flex: 2 1 640px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.tv-ov-side { flex: 1 1 340px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.tv-stack { display: flex; flex-direction: column; gap: 20px; }

.tv-table-wrap { overflow-x: auto; margin: 0 -4px; }
.tv-table { width: 100%; border-collapse: collapse; font-size: 15px; font-variant-numeric: tabular-nums; }
.tv-table th { color: var(--st-sub); font-size: 12px; font-weight: 700; padding: 8px 6px; text-align: right; white-space: nowrap; }
.tv-table td { padding: 10px 6px; border-top: 1px solid var(--st-line); text-align: right; color: var(--st-muted); white-space: nowrap; }
.tv-table .tv-l { text-align: left; }
.tv-table .tv-c { text-align: center; }
/* 숫자 열은 고정 폭(그룹 표끼리 열이 맞는다), 팀 열이 남는 폭을 쓰고 긴 이름은 말줄임 */
.tv-table .tv-c-rank { width: 44px; } .tv-table .tv-c-move { width: 52px; } .tv-table .tv-c-p { width: 48px; } .tv-table .tv-c-wdl { width: 80px; }
.tv-table .tv-c-gf { width: 76px; } .tv-table .tv-c-gd { width: 56px; } .tv-table .tv-c-pts { width: 56px; } .tv-table .tv-c-form { width: 156px; }
.tv-table td.tv-rank { text-align: center; font-weight: 800; color: var(--st-draw-fg); }
.tv-table td.tv-team-cell { text-align: left; width: 100%; max-width: 0; }
.tv-table td.tv-team-cell .tv-team { max-width: 100%; }
.tv-table td.tv-strong { color: var(--st-text); font-weight: 700; }
.tv-table td.tv-pts { color: var(--st-text); font-weight: 800; font-size: 16px; }
.tv-table tr.tv-row-1 td { background: var(--st-gold-bg); }
.tv-table tr.tv-row-podium td { background: var(--st-subtle); }
.tv-table tr.tv-row-withdrawn td { opacity: 0.65; }
.tv-move { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; font-size: 12px; font-weight: 800; border-radius: 6px; padding: 2px 4px; color: var(--st-faint); }
.tv-move--up { color: var(--st-win-fg); background: var(--st-win-bg); }
.tv-move--down { color: var(--st-loss-fg); background: var(--st-loss-bg); }
[data-theme="dark"] .tv-table tr.tv-row-1 .tv-move:not(.tv-move--up):not(.tv-move--down) { color: var(--st-sub); }
.tv-group-title { margin: 6px 0 0; font-size: 15px; font-weight: 800; color: var(--st-text); }

.tv-match-list { list-style: none; margin: 0; padding: 0; }
.tv-match { display: grid; grid-template-columns: minmax(0, 1fr) 96px minmax(0, 1fr) 112px; align-items: center; gap: 12px; min-height: 54px; border-top: 1px solid var(--st-line); padding: 4px 0; }
.tv-match-side { display: flex; align-items: center; gap: 10px; min-width: 0; font-size: 15px; font-weight: 700; color: var(--st-text); }
.tv-match-side--home { justify-content: flex-end; text-align: right; }
.tv-match-side.tv-lose { font-weight: 600; color: var(--st-muted); }
.tv-score { justify-self: center; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-size: 17px; font-weight: 800; font-variant-numeric: tabular-nums; background: var(--st-subtle);
    border: 1px solid var(--st-line); border-radius: 10px; padding: 3px 12px; color: var(--st-text); white-space: nowrap; }
button.tv-score { cursor: pointer; }
button.tv-score:hover { border-color: var(--st-border-strong); background: var(--st-soft); }
.tv-score .tv-colon { color: var(--st-faint); font-weight: 600; }
.tv-score .tv-lose { color: var(--st-faint); font-weight: 800; }
.tv-time { justify-self: center; font-size: 13px; font-weight: 800; color: var(--st-muted); background: var(--st-soft); border-radius: 8px; padding: 5px 10px; white-space: nowrap; }
.tv-status { justify-self: center; font-size: 12px; font-weight: 800; border-radius: 8px; padding: 5px 10px; white-space: nowrap; text-align: center; }
.tv-status--forfeit { color: var(--st-gold-fg); background: var(--st-gold-chip); }
.tv-status--cancelled { color: var(--st-muted); background: var(--st-soft); text-decoration: line-through; }
.tv-match-actions { display: flex; justify-content: flex-end; gap: 6px; }
.tv-btn-icon-m { display: none; }
.tv-match-note { font-size: 11px; font-weight: 800; color: var(--st-gold-fg); }

.tv-leaders { list-style: none; margin: 0; padding: 0; }
.tv-leaders li { display: flex; align-items: center; gap: 10px; min-height: 44px; border-top: 1px solid var(--st-line); }
.tv-leaders .tv-leader-rank { width: 18px; font-size: 14px; font-weight: 800; color: var(--st-draw-fg); flex: none; }
.tv-leaders .tv-leader-who { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.tv-leaders .tv-leader-who strong { font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tv-leaders .tv-leader-who span { font-size: 12px; color: var(--st-sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tv-leaders .tv-leader-value { font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums; }

.tv-podium { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 14px; }
.tv-podium-item { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; border-radius: 14px; padding: 16px 18px; background: var(--st-subtle); border: 1px solid var(--st-border); min-width: 0; }
.tv-podium-item--1 { background: var(--st-gold-bg); border-color: var(--st-gold-border); }
.tv-podium-place { font-size: 12px; font-weight: 800; border-radius: 6px; padding: 3px 9px; background: var(--st-draw-bg); color: var(--st-draw-fg); }
.tv-podium-item--1 .tv-podium-place { background: var(--st-gold-chip); color: var(--st-gold-fg); }
.tv-podium-item--3 .tv-podium-place { background: var(--st-bronze-bg); color: var(--st-bronze-fg); }
.tv-podium-item--4 .tv-podium-place { background: var(--st-soft); color: var(--st-muted); }
.tv-page a.tv-podium-name, .tv-podium-name { font-size: 20px; font-weight: 800; color: var(--st-text); max-width: 100%; }
.tv-podium-line { font-size: 14px; color: var(--st-muted); font-weight: 600; }

.tv-awards { list-style: none; margin: 0; padding: 0; }
.tv-awards li { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 8px; align-items: baseline; padding: 8px 0; border-top: 1px solid var(--st-line); font-size: 14px; }
.tv-awards .tv-award-title { font-size: 12px; font-weight: 700; color: var(--st-sub); }
.tv-awards .tv-award-who { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-weight: 800; }
.tv-awards .tv-award-note { font-size: 12px; font-weight: 600; color: var(--st-sub); }
.tv-stat-grid { margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.tv-stat-grid > div { background: var(--st-subtle); border: 1px solid var(--st-line); border-radius: 12px; padding: 10px 12px; min-width: 0; }
.tv-stat-grid dt { font-size: 12px; font-weight: 700; color: var(--st-sub); }
.tv-stat-grid dd { margin: 4px 0 0; font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; }
.tv-stat-note { font-size: 13px; color: var(--st-muted); }
.tv-stat-note strong { color: var(--st-text); }
.tv-pills { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.tv-pills li { font-size: 12px; font-weight: 600; color: var(--st-draw-fg); background: var(--st-soft); border-radius: 999px; padding: 4px 9px; }

/* ---------- 일정 ---------- */
.tv-sched { display: flex; flex-direction: column; gap: 16px; }
.tv-controls { background: var(--st-card); border: 1px solid var(--st-border); border-radius: 16px; padding: 16px 18px; display: flex; flex-direction: column; gap: 14px; }
.tv-controls-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.tv-controls-hint { font-size: 13px; color: var(--st-sub); }
.tv-controls-block { display: flex; flex-direction: column; gap: 8px; border-top: 1px solid var(--st-line); padding-top: 12px; }
.tv-controls-block > strong { font-size: 13px; font-weight: 800; color: var(--st-draw-fg); }
.tv-days { display: flex; flex-wrap: wrap; gap: 8px; }
.tv-day { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 112px; padding: 8px 14px; border-radius: 12px; border: 1px solid var(--st-border);
    background: var(--st-card); color: var(--st-text); cursor: pointer; text-align: left; }
.tv-day strong { font-size: 14px; font-weight: 800; }
.tv-day span { font-size: 12px; font-weight: 700; color: var(--st-sub); }
.tv-day[aria-pressed="true"] { border-color: var(--st-accent); background: var(--st-accent); color: var(--st-on-accent); }
.tv-day[aria-pressed="true"] span { color: var(--st-accent-soft); }
[data-theme="dark"] .tv-day[aria-pressed="true"] span { color: var(--st-on-accent); }
.tv-team-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.tv-team-chip { height: 38px; padding: 0 12px 0 8px; }
.tv-team-chip--all { padding: 0 14px; }

.tv-round { padding: 18px 22px 8px; gap: 0; }
.tv-round-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; padding-bottom: 8px; }
.tv-round-head h2 { margin: 0; font-size: 17px; font-weight: 800; }
.tv-round-head span { font-size: 14px; font-weight: 700; color: var(--st-sub); }

.tv-day-group h2 { margin: 0; padding: 16px 0 8px; font-size: 16px; font-weight: 800; display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.tv-day-group h2 span { font-size: 13px; font-weight: 700; color: var(--st-sub); }
.tv-compact { display: grid; grid-template-columns: 56px 44px minmax(0, 1fr) 84px minmax(0, 1fr) 54px; align-items: center; gap: 10px; min-height: 44px; border-top: 1px solid var(--st-line); font-size: 14px; }
.tv-compact-time { font-weight: 700; color: var(--st-muted); }
.tv-compact-round { font-size: 12px; font-weight: 700; color: var(--st-sub); }
.tv-compact-side { display: flex; align-items: center; gap: 6px; min-width: 0; font-weight: 700; }
.tv-compact-side--home { justify-content: flex-end; text-align: right; }
.tv-compact-side.tv-lose { font-weight: 600; color: var(--st-muted); }
.tv-compact .tv-score { font-size: 15px; padding: 2px 10px; }
.tv-compact-link { justify-self: end; font-size: 13px; font-weight: 700; background: none; border: 0; color: var(--st-accent); cursor: pointer; padding: 6px 0; }

.tv-team-head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding-bottom: 10px; }
.tv-team-head h2 { margin: 0; font-size: 18px; font-weight: 800; display: flex; align-items: center; gap: 10px; min-width: 0; }
.tv-team-head .tv-team-summary { font-size: 14px; font-weight: 700; color: var(--st-sub); }
.tv-team-head .tv-btn { margin-left: auto; }
.tv-teamrow { display: grid; grid-template-columns: 128px 52px 44px minmax(0, 1fr) 90px 64px; align-items: center; gap: 12px; min-height: 50px; border-top: 1px solid var(--st-line); font-size: 14px; }
.tv-teamrow-when { font-weight: 700; color: var(--st-muted); }
.tv-teamrow-round { font-weight: 700; color: var(--st-sub); }
.tv-venue { font-size: 12px; font-weight: 800; color: var(--st-muted); background: var(--st-soft); border-radius: 6px; padding: 3px 0; text-align: center; }
.tv-teamrow-opp { display: flex; align-items: center; gap: 10px; min-width: 0; font-weight: 700; }
.tv-teamrow-opp-text { display: flex; flex-direction: column; min-width: 0; }
.tv-teamrow-meta { display: none; font-size: 11px; font-weight: 600; color: var(--st-sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tv-teamrow-score { font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums; text-align: center; background: none; border: 0; color: var(--st-text); cursor: default; padding: 4px 0; }
button.tv-teamrow-score { cursor: pointer; text-decoration: underline dotted; text-underline-offset: 4px; }
.tv-result-chip { justify-self: end; min-width: 44px; text-align: center; font-size: 13px; font-weight: 800; border-radius: 8px; padding: 4px 8px; }

/* 토너먼트: 단계별 세로 흐름 (6-3 에서 데스크톱 트리 추가) */
.tv-stages { display: flex; flex-direction: column; gap: 16px; }
.tv-stage-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr)); gap: 12px; }
.tv-slot { border: 1px solid var(--st-border); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; background: var(--st-card); min-width: 0; }
.tv-slot-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; font-weight: 700; color: var(--st-sub); }
.tv-slot-row { display: grid; grid-template-columns: minmax(0, 1fr) 40px; align-items: center; gap: 6px; min-height: 34px; font-size: 14px; }
.tv-slot-row .tv-leg { text-align: center; color: var(--st-muted); font-variant-numeric: tabular-nums; }
.tv-slot-row .tv-agg { text-align: center; font-weight: 800; font-variant-numeric: tabular-nums; }
.tv-slot-row.tv-slot-winner .tv-team, .tv-page .tv-slot-row.tv-slot-winner a.tv-team { font-weight: 800; color: var(--st-text); }
.tv-slot-row.tv-slot-winner .tv-agg { color: var(--st-accent); }
.tv-slot-row.tv-slot-loser .tv-team, .tv-page .tv-slot-row.tv-slot-loser a.tv-team { font-weight: 600; color: var(--st-muted); }
.tv-slot-row.tv-slot-loser .tv-agg { color: var(--st-faint); }
.tv-slot-tbd { color: var(--st-sub); font-weight: 600; font-style: normal; }
.tv-slot-foot { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.tv-leg-actions { display: inline-flex; gap: 4px; }

/* 준비 중 탭 */

/* 경기 기록 모달 */
.tv-modal { position: fixed; inset: 0; z-index: 4000; background: rgba(15, 23, 42, 0.55); display: flex; align-items: center; justify-content: center; padding: 24px; }
.tv-modal[hidden] { display: none; }
.tv-modal-dialog { background: var(--st-card); border-radius: 16px; width: min(1100px, 100%); height: min(88vh, 900px); display: flex; flex-direction: column; overflow: hidden; box-shadow: var(--st-shadow-pop); }
.tv-modal-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px 8px 16px; border-bottom: 1px solid var(--st-border); }
.tv-modal-bar strong { font-size: 15px; font-weight: 800; }
.tv-modal-frame { flex: 1; width: 100%; border: 0; background: var(--st-bg); }
.tv-toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 4100; background: #0f172a; color: #ffffff; font-size: 14px; font-weight: 700; padding: 10px 16px; border-radius: 10px; box-shadow: var(--st-shadow-pop); max-width: calc(100vw - 32px); }
.tv-toast[hidden] { display: none; }

/* ---------- 좁은 화면 ---------- */
/* 진행 중 개요: 두 칸이 나란히 안 들어가면(약 1040px 미만, 스크롤바 여유 포함) 순위 → 다음 → 최근 → 리더 순으로 쌓는다 */
@media (max-width: 1080px) {
    .tv-ov--live { flex-direction: column; flex-wrap: nowrap; align-items: stretch; }
    .tv-ov--live .tv-ov-main, .tv-ov--live .tv-ov-side { display: contents; }
    .tv-o-table { order: 1; } .tv-o-next { order: 2; } .tv-o-recent { order: 3; } .tv-o-leaders { order: 4; }
}

@media (max-width: 900px) {
    .tv-head { padding: 20px; gap: 18px; }
    .tv-head-art { max-width: none; flex-basis: 100%; order: -1; }
}

@media (max-width: 640px) {
    .tv-wrap { padding-left: 16px; padding-right: 16px; }
    .tv-only-wide { display: none; }
    .tv-only-narrow { display: inline; }
    .tv-hub { padding-top: 22px; gap: 28px; }
    .tv-hub-head h1 { font-size: 26px; }
    .tv-hub-head p { font-size: 14px; }

    /* 진행 중 대회 카드: 시안(HubMobile)처럼 짧게 — 순위·다음 경기 3줄, 최근 결과·보조 버튼 숨김, 큰 [대회 보기] 하나 */
    .tv-hero { padding: 16px; border-radius: 18px; gap: 16px; }
    .tv-hero-top { gap: 14px; }
    .tv-hero-art { flex-basis: 100%; max-width: none; }
    .tv-hero-art .tv-tile-name { font-size: 28px; }
    .tv-page a.tv-hero-name { font-size: 22px; }
    .tv-hero-meta { font-size: 13px; }
    .tv-hero .tv-panel--recent, .tv-page .tv-hero a.tv-btn--hero-ghost { display: none; }
    .tv-page .tv-hero a.tv-btn--hero { width: 100%; height: 48px; }
    .tv-hero .tv-panel--table .tv-mini li:nth-child(n+4), .tv-hero .tv-panel--next .tv-mini li:nth-child(n+4) { display: none; }
    .tv-panel { padding: 14px; }
    .tv-upcoming-art { width: 112px; }
    .tv-upcoming-art .tv-tile-name { font-size: 16px; }
    .tv-section h2 { font-size: 18px; }

    /* 지난 대회: 시안(HubMobile)처럼 한 카드 안 목록 */
    .tv-archive-grid { grid-template-columns: 1fr; gap: 0; background: var(--st-card); border: 1px solid var(--st-border); border-radius: 16px; overflow: hidden; }
    .tv-page a.tv-archive { flex-direction: row; align-items: center; gap: 12px; min-height: 64px; padding: 12px 14px; border: 0; border-top: 1px solid var(--st-line); border-radius: 0; }
    .tv-page a.tv-archive:first-child { border-top: 0; }
    .tv-page a.tv-archive:hover { box-shadow: none; background: var(--st-subtle); }
    .tv-archive-art { width: 96px; flex: none; border-radius: 6px; overflow: hidden; }
    .tv-archive-art .tv-tile { padding: 4px 8px; }
    .tv-archive-art .tv-tile-label { display: none; }
    .tv-archive-art .tv-tile-name { font-size: 11px; }
    .tv-archive-body { padding: 0; flex: 1; gap: 2px; }
    .tv-archive-body strong { font-size: 14px; }
    .tv-archive-body span { font-size: 12px; }
    .tv-archive-chevron { display: block; color: var(--st-faint); flex: none; }

    .tv-detail-top { padding-top: 14px; gap: 10px; }
    .tv-crumbs a { display: inline-flex; align-items: center; min-height: 40px; }
    .tv-head { padding: 16px; border-radius: 14px; gap: 14px; }
    .tv-head h1 { font-size: 24px; }
    .tv-head-meta { font-size: 13px; }
    .tv-head-actions > a.tv-btn--quiet { display: none; }
    .tv-switch-anchor { position: static; }
    .tv-switcher { position: fixed; left: 0; right: 0; bottom: 0; top: auto; width: 100%; max-height: 78vh; border-radius: 18px 18px 0 0; padding: 12px 12px calc(12px + env(safe-area-inset-bottom)); z-index: 4200; }
    .tv-switcher-close { display: inline-flex; }
    .tv-sheet-backdrop.is-open { display: block; position: fixed; inset: 0; background: rgba(15, 23, 42, 0.45); z-index: 4150; }
    .tv-page a.tv-tab { height: 44px; padding: 0 14px; font-size: 14px; }
    .tv-body { padding-top: 16px; }

    .tv-card { padding: 16px; border-radius: 14px; }
    .tv-card-link { display: inline-flex; align-items: center; min-height: 40px; }
    .tv-round { padding: 14px 16px 6px; }
    .tv-col-move, .tv-col-wdl, .tv-col-form, .tv-col-gf { display: none; }
    .tv-table { font-size: 14px; }
    .tv-table td, .tv-table th { padding-left: 4px; padding-right: 4px; }
    .tv-table .tv-c-rank { width: 32px; } .tv-table .tv-c-p { width: 36px; } .tv-table .tv-c-gd { width: 44px; } .tv-table .tv-c-pts { width: 44px; }

    /* 경기 행: 열 폭 고정(점수가 줄마다 같은 자리), 엠블럼 숨김, 오른쪽은 버튼 하나(점수 버튼이 기록을 연다) */
    .tv-match { grid-template-columns: minmax(0, 1fr) 56px minmax(0, 1fr) 32px; gap: 6px; min-height: 52px; }
    .tv-match-side { font-size: 14px; gap: 4px; }
    .tv-match-side .tv-emblem, .tv-match-side .tv-mono { display: none; }
    .tv-match .tv-score, .tv-match .tv-time, .tv-match .tv-status { justify-self: stretch; justify-content: center; padding: 6px 0; font-size: 15px; gap: 5px; }
    .tv-match .tv-status { font-size: 12px; }
    .tv-match-actions { justify-content: center; gap: 0; }
    .tv-match-actions .tv-btn-text { display: none; }
    .tv-match-actions .tv-btn-icon-m { display: inline-flex; }
    .tv-match-actions .tv-btn--sm { width: 32px; height: 32px; padding: 0; position: relative; }
    .tv-match-actions .tv-btn--sm::after { content: ''; position: absolute; inset: -8px -4px; }
    .tv-match-actions.tv-has-video .tv-record-btn { display: none; }

    .tv-chips, .tv-team-chips, .tv-days { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; margin: 0 -16px; padding-left: 16px; padding-right: 16px; }
    .tv-chips::-webkit-scrollbar, .tv-team-chips::-webkit-scrollbar, .tv-days::-webkit-scrollbar { display: none; }
    .tv-chip, .tv-team-chip, .tv-chip--sm { height: 40px; flex: none; }
    .tv-day { min-width: 104px; flex: none; }
    .tv-seg button { height: auto; min-height: 40px; }
    .tv-controls { padding: 14px; }
    .tv-compact { grid-template-columns: 40px minmax(0, 1fr) 56px minmax(0, 1fr); gap: 6px; font-size: 13px; min-height: 48px; }
    .tv-compact-round, .tv-compact-link, .tv-compact-link-empty { display: none; }
    .tv-compact .tv-score, .tv-compact .tv-time, .tv-compact .tv-status { justify-self: stretch; justify-content: center; padding: 6px 0; }
    .tv-teamrow { grid-template-columns: minmax(0, 1fr) auto 44px; gap: 8px; font-size: 13px; min-height: 56px; }
    .tv-teamrow-when, .tv-teamrow-round, .tv-venue { display: none; }
    .tv-teamrow-meta { display: block; }
    .tv-teamrow-opp .tv-emblem, .tv-teamrow-opp .tv-mono { --sz: 22px !important; }
    .tv-teamrow-score { min-height: 44px; min-width: 52px; }
    .tv-team-head .tv-btn--sm, .tv-slot-foot .tv-btn--sm, .tv-error .tv-btn--sm { height: 40px; }
    .tv-slot-foot .tv-btn--sm.tv-btn--icon { width: 40px; }
    .tv-awards li { grid-template-columns: 92px minmax(0, 1fr); }
    .tv-stat-grid dd { font-size: 17px; }
    .tv-modal { padding: 0; }
    .tv-modal-dialog { width: 100%; height: 100%; border-radius: 0; }
}

/* =====================================================================
 * 6-3: 순위 · 참가팀(로스터 모달) · 개인 기록 · 수상 · 대진표 트리
 * ===================================================================== */

/* 내용 모달(로스터 등) — 경기 기록 모달과 같은 틀, 높이는 내용만큼 */
.tv-modal--panel .tv-modal-dialog { width: min(620px, 100%); height: auto; max-height: min(88vh, 860px); }
.tv-modal-body { overflow-y: auto; padding: 16px 18px 20px; display: flex; flex-direction: column; gap: 12px; }
/* 모바일은 경기 기록 모달처럼 전체 화면(위 패널 규칙이 모바일 전체 화면 규칙보다 우선이라 다시 둔다) */
@media (max-width: 640px) { .tv-modal--panel .tv-modal-dialog { width: 100%; height: 100%; max-height: none; } }

/* 순위 탭: 넓은 화면은 모든 열, 좁은 화면은 순위·팀·경기·득실·승점 + 펼치기 */
.tv-table--full .tv-c-n { width: 44px; }
.tv-table .tv-st-m { display: none; }
.tv-table td.tv-st-m { width: 40px; text-align: center; padding: 4px 0; }
.tv-st-toggle svg { transition: transform 0.15s; }
.tv-st-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.tv-table tr.tv-st-more td { padding: 4px 10px 12px; border-top: 0; text-align: left; white-space: normal; background: var(--st-subtle); }
.tv-st-more-list { margin: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13px; }
.tv-st-more-list div { display: flex; gap: 6px; align-items: center; }
.tv-st-more-list dt { color: var(--st-sub); font-weight: 700; }
.tv-st-more-list dd { margin: 0; color: var(--st-text); font-weight: 700; }
@media (min-width: 641px) { .tv-table tr.tv-st-more { display: none; } }
@media (max-width: 640px) {
    .tv-table--full .tv-st-x { display: none; }
    .tv-table--full .tv-st-m { display: table-cell; }
}

/* 순위 변동 그래프 */
.tv-chip--team { display: inline-flex; align-items: center; gap: 6px; padding: 0 12px 0 6px; }
/* 강조한 팀: 선 색 테두리 + 옅은 배경, 글자는 본문 색(밝은 선 색 위 흰 글자는 대비가 모자라다) */
.tv-chip--team[aria-pressed="true"] { background: color-mix(in srgb, var(--chip-color, var(--st-accent)) 16%, var(--st-card)); border-color: var(--chip-color, var(--st-accent)); box-shadow: inset 0 0 0 1px var(--chip-color, var(--st-accent)); color: var(--st-text); font-weight: 800; }
.tv-chart-scroll { overflow-x: auto; margin: 0 -4px; padding: 4px; }
.tv-chart { display: block; max-width: none; }
.tv-chart-grid { stroke: var(--st-line); stroke-width: 1; }
.tv-chart-axis { fill: var(--st-sub); font-size: 11px; font-weight: 700; font-family: var(--st-font); }
.tv-chart-line { fill: none; stroke: var(--st-border-strong); stroke-width: 1.5; }
.tv-chart-label { fill: var(--st-sub); font-size: 12px; font-weight: 600; font-family: var(--st-font); }
.tv-chart-label.is-on { font-weight: 800; }

/* 참가팀 */
.tv-note-line { margin: 0 0 12px; font-size: 13.5px; font-weight: 700; color: var(--st-gold-fg); background: var(--st-gold-bg); border: 1px solid var(--st-gold-border); border-radius: 10px; padding: 8px 12px; }
.tv-team-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.tv-team-card { gap: 8px; }
.tv-team-card.is-withdrawn { opacity: 0.75; }
.tv-team-card-head { display: flex; align-items: center; gap: 12px; min-width: 0; }
.tv-team-card-title { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; }
.tv-team-card-name { font-size: 17px; font-weight: 800; color: var(--st-text); }
.tv-page a.tv-team-card-name { color: var(--st-text); }
.tv-page a.tv-team-card-name:hover { text-decoration: underline; }
.tv-team-card-rank { font-size: 13px; font-weight: 800; color: var(--st-accent-strong); background: var(--st-accent-soft); border-radius: 6px; padding: 2px 8px; white-space: nowrap; }
.tv-team-card-rank.tv-muted { color: var(--st-sub); background: var(--st-soft); }
.tv-team-card-line { margin: 0; font-size: 13.5px; color: var(--st-muted); display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.tv-team-card-line strong { color: var(--st-text); }
.tv-team-card-foot { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 4px; }

/* 로스터 모달 */
.tv-roster { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.tv-roster-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; padding: 9px 2px; border-bottom: 1px solid var(--st-line); }
.tv-roster-name { display: inline-flex; align-items: center; gap: 6px; min-width: 0; font-weight: 700; }
.tv-page .tv-roster-name a { color: var(--st-text); }
.tv-roster-meta { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; justify-content: flex-end; }
.tv-badge--role { color: var(--st-accent-strong); background: var(--st-accent-soft); }
.tv-badge--new { color: var(--st-gold-fg); background: var(--st-gold-chip); }
.tv-badge--out { color: var(--st-loss-fg); background: var(--st-loss-bg); }
.tv-hist { font-size: 12px; font-weight: 800; border-radius: 6px; padding: 3px 8px; border: 1px solid var(--st-border-strong); background: var(--st-soft); color: var(--st-draw-fg); cursor: pointer; min-height: 28px; }
.tv-hist--top { color: var(--st-gold-fg); background: var(--st-gold-chip); border-color: var(--st-gold-border); }
.tv-hist-detail { flex-basis: 100%; text-align: right; font-size: 12px; color: var(--st-sub); }
.tv-roster-rule { margin: 0; font-size: 13px; color: var(--st-gold-fg); background: var(--st-gold-bg); border: 1px solid var(--st-gold-border); border-radius: 10px; padding: 8px 12px; line-height: 1.6; }
.tv-roster-sub { margin: 6px 0 0; font-size: 14px; font-weight: 800; }
.tv-roster-changes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.tv-roster-foot { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 6px; }

/* 개인 기록 */
.tv-pl-tools { display: flex; flex-wrap: wrap; gap: 8px; }
.tv-field { display: flex; min-width: 0; }
.tv-field input, .tv-field select { height: 40px; border: 1px solid var(--st-border-strong); border-radius: 10px; padding: 0 12px; background: var(--st-card); color: var(--st-text); font-size: 14px; min-width: 0; max-width: 100%; }
.tv-pl-search { flex: 1 1 220px; }
.tv-pl-search input { width: 100%; }
.tv-pl-pos { flex-wrap: nowrap; overflow-x: auto; padding: 2px 0; }
.tv-pl-pos .tv-chip { flex: none; }
.tv-player { display: inline-flex; align-items: center; gap: 10px; min-width: 0; max-width: 100%; }
.tv-player-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.tv-player-text > * { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tv-player-text .tv-muted { font-size: 12px; }
.tv-page a.tv-player-name { color: var(--st-text); font-weight: 700; }
.tv-page a.tv-player-name:hover { text-decoration: underline; }
.tv-avatar { width: var(--sz, 28px); height: var(--sz, 28px); border-radius: 999px; object-fit: cover; flex: none; background: var(--st-soft); display: inline-block; }
.tv-avatar--mono { display: inline-flex; align-items: center; justify-content: center; font-size: calc(var(--sz, 28px) * 0.36); font-weight: 800; color: var(--st-draw-fg); background: var(--st-draw-bg); }
.tv-table--players td:nth-child(2) { width: 100%; max-width: 0; }
.tv-table--players .tv-pl-team { width: 190px; max-width: 190px; }
.tv-table--players .tv-pl-team .tv-team { font-weight: 600; font-size: 13.5px; }
.tv-table--players td.is-sorted { color: var(--st-text); font-weight: 800; }
.tv-th-sort { font-size: 12px; font-weight: 700; color: inherit; background: none; border: 0; padding: 4px 2px; cursor: pointer; }
.tv-table--players th.is-sorted .tv-th-sort { color: var(--st-accent-strong); }
.tv-pl-cards { display: none; list-style: none; margin: 0; padding: 0; }
.tv-pl-card { display: grid; grid-template-columns: 26px 36px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px 2px; border-top: 1px solid var(--st-line); }
.tv-pl-rank { font-weight: 800; color: var(--st-draw-fg); text-align: center; }
.tv-pl-main { display: flex; flex-direction: column; min-width: 0; gap: 2px; }
.tv-pl-line { font-size: 12px; color: var(--st-sub); }
.tv-pl-value { display: flex; flex-direction: column; align-items: flex-end; }
.tv-pl-value strong { font-size: 20px; font-weight: 900; color: var(--st-text); font-variant-numeric: tabular-nums; }
.tv-pl-value span { font-size: 11px; color: var(--st-sub); font-weight: 700; }
.tv-pl-more { display: flex; justify-content: center; }
.tv-pl-more:empty { display: none; }
@media (max-width: 640px) {
    .tv-pl-table { display: none; }
    .tv-pl-cards { display: block; }
    .tv-pl-tools .tv-field:not(.tv-pl-search) { flex: 1 1 40%; }
    .tv-pl-tools .tv-field select { width: 100%; }
}

/* 수상 */
.tv-award-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; align-items: start; }
.tv-award-card { padding: 0; overflow: hidden; gap: 0; }
.tv-award-band { display: flex; align-items: center; gap: 10px; padding: 14px 16px; color: #ffffff; background: linear-gradient(135deg, var(--award-a, #15803d), var(--award-b, #0f766e)); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35); }
.tv-page .tv-award-band h3 { margin: 0; font-size: 16px; font-weight: 800; color: #ffffff; flex: 1; min-width: 0; }
.tv-award-icon { font-size: 22px; line-height: 1; }
.tv-award-kind { font-size: 11px; font-weight: 800; background: rgba(0, 0, 0, 0.22); border-radius: 6px; padding: 2px 7px; flex: none; }
.tv-award-desc { margin: 12px 16px 0; font-size: 13px; color: var(--st-muted); }
.tv-award-recipients { list-style: none; margin: 0; padding: 12px 16px 16px; display: flex; flex-direction: column; gap: 8px; }
.tv-award-recipient { display: flex; align-items: center; gap: 8px; font-weight: 700; min-width: 0; }
.tv-page .tv-award-recipient a { color: var(--st-text); }
.tv-award-card .tv-empty { padding: 12px 16px; }

/* 대진표: 넓은 화면은 트리(연결선), 좁은 화면은 단계별 세로 흐름 */
@media (min-width: 901px) { .tv-bt-mob { display: none; } }
@media (max-width: 900px) { .tv-bt-desk { display: none; } }
.tv-bt-card { padding: 16px; }
.tv-bt { overflow-x: auto; padding-bottom: 6px; }
.tv-bt-inner { width: max-content; display: flex; flex-direction: column; gap: 14px; }
.tv-bt-heads { display: flex; gap: 28px; }
.tv-bt-heads span { flex: none; width: var(--bt-w, 260px); font-size: 13px; font-weight: 800; color: var(--st-sub); }
.tv-bt-tree { display: flex; flex-direction: column; gap: 10px; }
.tv-bt-node { display: flex; align-items: center; justify-content: flex-end; }
.tv-bt-kids { display: flex; flex-direction: column; justify-content: center; padding-right: 28px; }
.tv-bt-kids > .tv-bt-node { position: relative; padding: 6px 0; }
.tv-bt-kids > .tv-bt-node::after { content: ''; position: absolute; right: -14px; top: 50%; width: 14px; border-top: 2px solid var(--st-border-strong); }
.tv-bt-kids > .tv-bt-node::before { content: ''; position: absolute; right: -14px; border-right: 2px solid var(--st-border-strong); }
.tv-bt-kids > .tv-bt-node:first-child::before { top: 50%; bottom: 0; }
.tv-bt-kids > .tv-bt-node:last-child::before { top: 0; bottom: 50%; }
.tv-bt-kids > .tv-bt-node:only-child::before { display: none; }
.tv-bt-match { flex: none; width: var(--bt-w, 260px); position: relative; }
.tv-bt-match--joined::before { content: ''; position: absolute; left: -14px; top: 50%; width: 14px; border-top: 2px solid var(--st-border-strong); }
.tv-bt-third { align-self: flex-end; width: var(--bt-w, 260px); display: flex; flex-direction: column; gap: 6px; }
.tv-bt-col-title { margin: 0; font-size: 14px; font-weight: 800; color: var(--st-sub); }
.tv-bt--cols .tv-bt-inner, .tv-bt--cols { display: flex; flex-direction: row; gap: 18px; align-items: flex-start; }
.tv-bt-col { flex: none; width: var(--bt-w, 260px); display: flex; flex-direction: column; gap: 10px; }

/* =========================================================================
 * R3: 참가 신청 · 로스터 관리 (registration.js) — 머리 날짜 정보 · 팀장 버튼 · 신청/관리 창
 * ========================================================================= */
.tv-reg-actions { display: contents; }
.tv-head-info { display: flex; flex-direction: column; gap: 4px; }
.tv-head-info-line { margin: 0; font-size: 14px; font-weight: 700; color: var(--st-text); display: flex; align-items: baseline; gap: 8px; }
.tv-head-info-line::before { content: ''; flex: none; width: 6px; height: 6px; border-radius: 999px; background: var(--st-accent); transform: translateY(-2px); }
.tv-head-info-line--rule { color: var(--st-gold-fg); }
.tv-head-info-line--rule::before { background: var(--st-gold-fg); }
.tv-head-info-line--hint { color: var(--st-sub); font-weight: 600; }
.tv-head-info-line--hint::before { background: var(--st-border-strong); }
.tv-upcoming-body .tv-reg-note { font-size: 13px; font-weight: 800; color: var(--st-accent); }
.tv-reg-team { display: flex; align-items: center; gap: 12px; min-width: 0; }
.tv-reg-team-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tv-reg-team-text strong { font-size: 16px; font-weight: 800; }
.tv-reg-team-text span { font-size: 13px; }
.tv-reg-status { margin: 0; font-size: 14px; line-height: 1.6; background: var(--st-soft); border-radius: 10px; padding: 10px 12px; }
.tv-reg-status--ok { background: var(--st-accent-tint); color: var(--st-accent-strong); font-weight: 700; }
.tv-reg-status--bad { background: var(--st-loss-bg); color: var(--st-loss-fg); font-weight: 700; }
.tv-reg-status:focus { outline: none; }
.tv-reg-error { font-size: 14px; line-height: 1.6; color: var(--st-loss-fg); background: var(--st-loss-bg); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.tv-reg-error p, .tv-reg-error ul { margin: 0; }
.tv-reg-error ul { padding-left: 18px; }
.tv-reg-error:focus { outline: none; }
.tv-reg-warn { margin: 0; font-size: 13px; font-weight: 700; color: var(--st-gold-fg); background: var(--st-gold-bg); border: 1px solid var(--st-gold-border); border-radius: 10px; padding: 8px 12px; }
.tv-picks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.tv-pick { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 10px; padding: 7px 2px; border-bottom: 1px solid var(--st-line); min-height: 48px; }
.tv-pick-label { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1 1 180px; }
label.tv-pick-label { cursor: pointer; }
.tv-pick-label input { width: 20px; height: 20px; margin: 0; flex: none; accent-color: var(--st-accent); }
.tv-pick-name { display: inline-flex; align-items: center; gap: 6px; min-width: 0; font-weight: 700; }
.tv-pick.is-disabled .tv-pick-name { color: var(--st-sub); }
.tv-pick.is-disabled label.tv-pick-label { cursor: default; }
.tv-pick-meta { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px; margin-left: auto; }
.tv-pick-reason { font-size: 12px; font-weight: 700; color: var(--st-sub); }
.tv-pick-reason:empty { display: none; }
.tv-pick-bar { position: sticky; bottom: -20px; z-index: 1; margin: 4px -18px -20px; padding: 12px 18px 14px; background: var(--st-card); border-top: 1px solid var(--st-border);
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.tv-pick-count { margin: 0; font-size: 13.5px; color: var(--st-text); }
.tv-pick-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
@media (max-width: 640px) {
    .tv-head-info-line { font-size: 13.5px; }
    /* 팀장 버튼은 한 줄을 나눠 쓰고, 다른 대회 · 링크 복사는 다음 줄 */
    .tv-reg-actions { display: flex; gap: 8px; width: 100%; }
    .tv-reg-actions:empty { display: none; }
    .tv-reg-actions .tv-btn { flex: 1; height: 44px; }
    .tv-pick-actions { width: 100%; }
    .tv-pick-actions .tv-btn--primary { flex: 1; height: 44px; }
    .tv-pick-meta .tv-btn--sm { height: 40px; }
}

/* =========================================================================
 * 6-4: 주장 결과 제출(submit.js) · 내 기록 수정 요청(correction.js)
 * ========================================================================= */
.tv-modal--wide.tv-modal--panel .tv-modal-dialog { width: min(980px, 100%); }
.tv-count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: rgba(255, 255, 255, 0.24); font-size: 12px; font-weight: 800; }
.tv-sub { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 18px; align-items: start; }
.tv-sub-list { position: sticky; top: 0; max-height: calc(min(88vh, 860px) - 120px); overflow-y: auto; padding-right: 2px; }
.tv-sub-items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.tv-sub-item { width: 100%; text-align: left; border: 1px solid var(--st-border); border-radius: 12px; background: var(--st-card); padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; cursor: pointer; font: inherit; color: var(--st-text); min-height: 48px; }
.tv-sub-item:hover { border-color: var(--st-border-strong); }
.tv-sub-item[aria-current="true"] { border-color: var(--st-accent); background: var(--st-accent-tint); }
.tv-sub-item-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 12.5px; }
.tv-sub-item-vs { display: flex; align-items: center; gap: 8px; font-weight: 800; min-width: 0; }
.tv-sub-state { flex: none; font-size: 11.5px; font-weight: 800; border-radius: 6px; padding: 1px 6px; white-space: nowrap; }
.tv-sub-state--due { color: var(--st-on-accent); background: var(--st-accent); }
.tv-sub-state--edit { color: var(--st-gold-fg); background: var(--st-gold-chip); }
.tv-sub-state--part { color: var(--st-loss-fg); background: var(--st-loss-bg); }
.tv-sub-state--later { color: var(--st-sub); background: var(--st-soft); }
.tv-sub-form { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.tv-sub-head { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tv-sub-head p { margin: 0; font-size: 13px; }
.tv-page .tv-sub-vs, .tv-sub-vs { display: flex; align-items: center; gap: 8px; margin: 2px 0; font-size: 17px; font-weight: 800; min-width: 0; }
.tv-sub-back { align-self: flex-start; padding-left: 4px; margin-bottom: 4px; }
.tv-sub-rule { margin: 0; font-size: 13px; color: var(--st-sub); }
.tv-sub-leg { border: 1px solid var(--st-border); border-radius: 12px; padding: 10px 12px 12px; margin: 0; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.tv-sub-leg legend { padding: 0 4px; font-size: 14px; font-weight: 800; }
.tv-sub-cands { display: flex; flex-direction: column; gap: 6px; }
.tv-sub-cand { display: grid; grid-template-columns: 20px auto minmax(0, 1fr) auto; grid-template-areas: "r time score meta"; align-items: center; gap: 8px; border: 1px solid var(--st-line); border-radius: 10px; padding: 8px 10px; cursor: pointer; min-height: 48px; }
.tv-sub-cand input { grid-area: r; width: 18px; height: 18px; margin: 0; accent-color: var(--st-accent); }
.tv-sub-cand:has(input:checked) { border-color: var(--st-accent); background: var(--st-accent-tint); }
.tv-sub-cand.is-disabled { opacity: 0.62; cursor: default; }
.tv-sub-cand-time { grid-area: time; font-size: 13px; font-weight: 700; color: var(--st-sub); white-space: nowrap; }
.tv-sub-cand-score { grid-area: score; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 8px; font-size: 14px; font-weight: 700; min-width: 0; }
.tv-sub-cand-score > span:first-child { text-align: right; }
.tv-sub-cand-score strong { font-size: 16px; }
.tv-sub-cand-meta { grid-area: meta; display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; white-space: nowrap; }
.tv-sub-check { display: flex; align-items: center; gap: 8px; font-size: 13.5px; cursor: pointer; }
.tv-sub-check input { width: 18px; height: 18px; margin: 0; flex: none; accent-color: var(--st-accent); }
.tv-sub-scores { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.tv-sub-scores label { display: flex; align-items: center; gap: 6px; min-width: 0; font-weight: 700; font-size: 13.5px; }
.tv-sub-scores input { width: 64px; height: 40px; text-align: center; font-size: 16px; border: 1px solid var(--st-border-strong); border-radius: 10px; background: var(--st-card); color: var(--st-text); }
.tv-sub-scores p { flex-basis: 100%; margin: 0; font-size: 12.5px; }
.tv-field.tv-sub-video, .tv-field.tv-fix-field { flex-direction: column; gap: 4px; }
.tv-sub-video span, .tv-fix-field span { font-size: 13px; font-weight: 700; color: var(--st-sub); }
.tv-sub-video input, .tv-fix-field input, .tv-fix-field textarea { width: 100%; }
.tv-fix-field textarea { border: 1px solid var(--st-border-strong); border-radius: 10px; padding: 8px 12px; font: inherit; font-size: 14px; background: var(--st-card); color: var(--st-text); resize: vertical; }
.tv-fix-field input[type="file"] { height: auto; padding: 8px; }
.tv-sub-empty p { margin: 0 0 6px; font-size: 14px; }
.tv-sub-tb { display: flex; flex-wrap: wrap; gap: 14px; }
.tv-sub-form .tv-pick-bar { margin: 4px 0 -20px; padding: 12px 0 14px; }
.tv-reg-warn ul { margin: 6px 0 0; padding-left: 18px; font-weight: 600; }
.tv-fix-table th, .tv-fix-table td { padding: 6px 8px; }
.tv-fix-input input, .tv-fix-input select { width: 100%; max-width: 150px; height: 36px; border: 1px solid var(--st-border-strong); border-radius: 8px; padding: 0 8px; background: var(--st-card); color: var(--st-text); font-size: 14px; }
@media (max-width: 640px) {
    .tv-sub { grid-template-columns: 1fr; }
    .tv-sub[data-view="form"] .tv-sub-list { display: none; }
    .tv-sub[data-view="list"] .tv-sub-form { display: none; }
    .tv-sub-list { position: static; max-height: none; overflow: visible; }
    .tv-sub-cand { grid-template-columns: 20px minmax(0, 1fr) auto; grid-template-areas: "r time meta" "r score score"; }
    .tv-sub-form .tv-pick-bar { margin: 4px -18px -20px; padding: 12px 18px 14px; }
}
.tv-modal-bar .tv-modal-fix { margin-left: auto; margin-right: 6px; gap: 6px; }
@media (max-width: 640px) { .tv-modal-bar .tv-modal-fix { height: 36px; } }

/* 참가 신청 창: 신청 기간 안내 · 로스터 고르기 머리(가능한 선수 모두 선택 · 선택 해제) */
.tv-reg-info { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--st-accent-strong); background: var(--st-accent-tint); border-radius: 10px; padding: 9px 12px; }
.tv-pick-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; }
.tv-pick-head .tv-roster-sub { margin: 0; }
.tv-pick-tools { display: flex; flex-wrap: wrap; gap: 6px; }
@media (max-width: 640px) { .tv-pick-tools .tv-btn--sm { height: 40px; } }