/* GO기릿 중계석 (2026-10-07, 베타) — 어두운 중계 화면. 지휘통제실(live2)과 같은 바탕·골드 계열.
   레이아웃: 1400px+ 3단(영상|순위|채팅·중계) · 1100~1399 2단 · 그 아래는 영상 상단 고정 + 탭 4개 */
:root{
  color-scheme:dark;
  --bg:#07090e; --panel:#0e131c; --panel2:#141b27; --line:#1f2a3a;
  --tx:#e6eef7; --tx2:#9db0c6; --tx3:#7d93ad;
  --gold:#ffc857; --gold2:#e0a838; --ink:#1a1204;
  --live:#ff3b4e; --up:#22d3a6; --down:#ff6b7a;
  --hd:64px; --r:12px;
}
*{box-sizing:border-box}
html,body{margin:0; background:var(--bg); color:var(--tx)}
body{font-family:-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Pretendard","Noto Sans KR",system-ui,sans-serif; font-size:14px; min-height:100dvh}
a{color:inherit}
.num,b{font-variant-numeric:tabular-nums}
.mute{color:var(--tx3)}
.tiny{margin:4px 0 0; font-size:11.5px; color:var(--tx3)}
h1,h2{margin:0}

/* ── 머리 ── */
.hd{position:sticky; top:0; z-index:30; display:flex; align-items:center; gap:16px; min-height:var(--hd); padding:10px 18px;
  background:rgba(7,9,14,.94); backdrop-filter:blur(8px); border-bottom:1px solid var(--line)}
.hd-home{font-weight:900; color:var(--gold); text-decoration:none; letter-spacing:-.02em; font-size:16px}
.hd-t{display:flex; align-items:center; gap:8px; min-width:0}
.hd-t h1{font-size:16px; font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.st{flex:0 0 auto; font-size:11.5px; font-weight:800; padding:3px 8px; border-radius:999px; background:#2a3446; color:var(--tx2)}
.st.is-live{background:var(--live); color:#fff}
.st.is-live::before{content:''; display:inline-block; width:6px; height:6px; border-radius:50%; background:#fff; margin-right:5px; vertical-align:1px; animation:blink 1.2s infinite}
@keyframes blink{50%{opacity:.25}}
.beta{flex:0 0 auto; font-size:11px; font-weight:800; padding:2px 7px; border-radius:6px; border:1px solid var(--gold2); color:var(--gold)}
.hd-sum{margin-left:auto; display:flex; align-items:baseline; gap:8px}
.hd-sum small{color:var(--tx3); font-size:12px}
.hd-sum b{font-size:24px; font-weight:900; color:var(--gold); letter-spacing:-.02em}
.hd-sum .d{font-size:12.5px; color:var(--up); font-weight:700}
.hd-r{display:flex; align-items:center; gap:12px}
.read{font-size:12px; color:var(--tx3); white-space:nowrap}
.read.is-stale{color:var(--gold)}
.yt{font-size:13px; font-weight:700; text-decoration:none; padding:8px 12px; border-radius:8px; background:#ff0033; color:#fff; white-space:nowrap}

/* ── 격자 ── */
.grid{display:grid; gap:12px; padding:12px; max-width:1920px; margin:0 auto}
.a-video,.a-rank,.a-side,.a-stats{background:var(--panel); border:1px solid var(--line); border-radius:var(--r); min-width:0}
.tabs{display:none}
.ph{display:flex; align-items:baseline; justify-content:space-between; gap:8px; padding:12px 14px 6px}
.ph h2{font-size:15px; font-weight:800}
.ph-s{font-size:11.5px; color:var(--tx3)}

/* 영상 */
.a-video{overflow:hidden; position:relative}
.vbox{position:relative; aspect-ratio:16/9; background:#000}
.vbox iframe{position:absolute; inset:0; width:100%; height:100%; border:0}
.vwait{position:absolute; inset:0; display:grid; place-items:center}
.vwait img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.45}
.vw-tx{position:relative; text-align:center; display:flex; flex-direction:column; gap:6px; padding:16px}
.vw-tx b{font-size:clamp(18px,2.4vw,28px); font-weight:900}
.vw-tx span{color:var(--tx2); font-size:14px}
.vfold{display:none}

/* 순위 레이스 — 줄은 절대 위치(transform)로 움직인다 */
.race{position:relative; list-style:none; margin:0; padding:0 10px 10px}
.race li{position:absolute; left:10px; right:10px; height:44px; display:grid; align-items:center; gap:8px;
  grid-template-columns:28px 34px minmax(0,1fr) auto; transition:transform .7s cubic-bezier(.2,.8,.2,1)}
.race .rk{font-weight:900; font-size:15px; text-align:center; color:var(--tx2)}
.race li:nth-child(n){}
.race .r1 .rk{color:var(--gold)}
.race img{width:34px; height:34px; border-radius:50%; object-fit:cover; background:#223}
.race .nm{min-width:0}
.race .nm b{display:block; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.race .bar{display:block; height:6px; margin-top:4px; border-radius:3px; background:#1d2636; overflow:hidden}
.race .bar i{display:block; height:100%; width:0; border-radius:3px; background:linear-gradient(90deg,#3b82f6,#60a5fa); transition:width .7s ease}
.race .r1 .bar i{background:linear-gradient(90deg,var(--gold2),var(--gold))}
.race .r2 .bar i,.race .r3 .bar i{background:linear-gradient(90deg,#8b5cf6,#c084fc)}
.race .am{text-align:right}
.race .am b{display:block; font-size:14px; font-weight:800}
.race .am small{font-size:11px; color:var(--up)}
.race .mv{font-size:11px; font-weight:800; margin-left:4px}
.race .mv.up{color:var(--up)} .race .mv.dn{color:var(--down)}
.race li.flash{animation:flash 1.2s ease}
@keyframes flash{0%{background:rgba(255,200,87,.22)}100%{background:transparent}}
.race li{border-radius:8px}

/* 채팅·중계 */
.a-side{display:flex; flex-direction:column; overflow:hidden}
.stabs{display:flex; gap:4px; padding:8px; border-bottom:1px solid var(--line)}
.stabs button{flex:1; height:36px; border:0; border-radius:8px; background:transparent; color:var(--tx2); font:inherit; font-weight:700; cursor:pointer}
.stabs button[aria-selected="true"]{background:var(--panel2); color:var(--tx)}
.a-side .pane{display:none; flex:1; min-height:0}
.a-side .pane.is-on{display:flex; flex-direction:column}
.chatbox{flex:1; min-height:0; position:relative; display:grid; place-items:center; padding:16px; text-align:center}
.chatbox iframe{position:absolute; inset:0; width:100%; height:100%; border:0; background:#fff}
.chat-out{display:block; text-align:center; padding:10px; font-size:13px; font-weight:700; text-decoration:none; color:var(--gold); border-top:1px solid var(--line)}
.fd{list-style:none; margin:0; padding:6px 10px 12px; overflow-y:auto; flex:1; min-height:0}
.fd li{display:grid; grid-template-columns:42px 1fr; gap:8px; padding:9px 4px; border-bottom:1px solid #161e2b; font-size:13.5px; line-height:1.45}
.fd li time{color:var(--tx3); font-size:12px; font-variant-numeric:tabular-nums; padding-top:1px}
.fd li.k-ai span{color:#cfe3ff; font-weight:600}
.fd li.k-rank span,.fd li.k-mile span{color:var(--gold); font-weight:800}
.fd li.k-jump span{color:#ff9fb0; font-weight:700}
.fd li.is-new{animation:flash 1.5s ease}

/* 흐름 */
.chart{padding:0 12px}
.chart svg{display:block; width:100%; height:auto}
.chart .lg{display:flex; flex-wrap:wrap; gap:10px; font-size:12px; color:var(--tx2); padding:4px 2px 0}
.chart .lg i{display:inline-block; width:10px; height:3px; border-radius:2px; margin-right:4px; vertical-align:3px}
.cards{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; padding:12px}
.card{background:var(--panel2); border-radius:10px; padding:10px 12px; min-width:0}
.card small{color:var(--tx3); font-size:12px}
.speed{list-style:none; margin:6px 0 0; padding:0; font-size:13.5px}
.speed li{display:flex; justify-content:space-between; gap:6px; padding:2px 0}
.speed li b{color:var(--up)}
.mvp{margin-top:6px; font-size:14px; font-weight:700; line-height:1.4}
.mvp em{font-style:normal; color:var(--gold)}

.ticker{display:none}
.foot{max-width:1920px; margin:0 auto; padding:4px 16px 20px; font-size:12px; color:var(--tx3)}

/* ── PC 3단 ── */
@media (min-width:1400px){
  .grid{grid-template-columns:minmax(0,1.7fr) minmax(300px,.9fr) minmax(320px,.85fr);
    grid-template-areas:"video rank side" "stats rank side"; height:calc(100dvh - var(--hd) - 34px); grid-template-rows:auto minmax(0,1fr)}
  .a-video{grid-area:video} .a-rank{grid-area:rank; overflow-y:auto} .a-side{grid-area:side} .a-stats{grid-area:stats; overflow-y:auto}
}
/* ── PC 2단 ── */
@media (min-width:1100px) and (max-width:1399px){
  .grid{grid-template-columns:minmax(0,1.5fr) minmax(320px,1fr); grid-template-areas:"video side" "rank side" "stats stats"}
  .a-video{grid-area:video} .a-rank{grid-area:rank} .a-side{grid-area:side; height:calc(100dvh - var(--hd) - 24px); position:sticky; top:calc(var(--hd) + 12px)} .a-stats{grid-area:stats}
}
/* ── 모바일·태블릿: 영상 상단 고정 + 탭 ── */
@media (max-width:1099px){
  :root{--hd:auto}
  .hd{flex-wrap:wrap; gap:6px 10px; padding:8px 12px; position:relative}
  .hd-home{font-size:14px}
  .hd-t h1{font-size:14px}
  .hd-sum{margin-left:0; order:3; flex:1 1 auto}
  .hd-sum b{font-size:20px}
  .hd-r{order:4; gap:8px}
  .read{font-size:11.5px}
  .yt{padding:6px 10px; font-size:12.5px}
  .grid{display:block; padding:0}
  .a-video{position:sticky; top:0; z-index:20; border-radius:0; border:0}
  .a-video.is-folded .vbox{display:none}
  .vfold{display:block; width:100%; height:30px; border:0; background:#111824; color:var(--tx2); font:inherit; font-size:12.5px; font-weight:700; cursor:pointer}
  .tabs{display:flex; position:sticky; z-index:19; background:var(--bg); border-bottom:1px solid var(--line); padding:6px 8px; gap:4px}
  .tabs button{flex:1; height:38px; border:0; border-radius:8px; background:transparent; color:var(--tx2); font:inherit; font-size:14px; font-weight:800; cursor:pointer}
  .tabs button[aria-selected="true"]{background:var(--panel2); color:var(--gold)}
  .a-rank,.a-side,.a-stats{border-radius:0; border:0; background:transparent}
  .stabs{display:none}
  .pane{display:none}
  .pane.is-on{display:block}
  .a-side{display:block}
  .a-side .pane.is-on{display:flex}
  .chat .chatbox{height:calc(100dvh - var(--vtop, 300px) - 140px); min-height:360px}
  .fd{max-height:none; padding-bottom:70px}
  .cards{grid-template-columns:1fr; padding-bottom:70px}
  .a-rank{padding-bottom:64px}
  .ticker{display:block; position:fixed; left:0; right:0; bottom:0; z-index:25; padding:10px 14px calc(10px + env(safe-area-inset-bottom));
    background:rgba(14,19,28,.96); border-top:1px solid var(--line); font-size:13.5px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  .ticker:empty{display:none}
  .foot{padding-bottom:70px}
}
@media (max-width:380px){
  .race li{grid-template-columns:24px 30px minmax(0,1fr) auto; gap:6px}
  .race img{width:30px; height:30px}
  .hd-sum b{font-size:18px}
}
@media (prefers-reduced-motion:reduce){
  .race li,.race .bar i{transition:none} .st.is-live::before{animation:none}
}
.fd li.mute{display:block}   /* 빈 안내 문구는 시간 칸 없이 한 줄로 */