/* RADARADA leaderboard — unified Apple-style dark (black/grey). One type family
   throughout (the system "San Francisco" stack), tabular figures for all times,
   generous spacing, hairline separators, minimal colour. No navy, no mixed fonts. */
:root{
  --bg:#0a0a0b; --surface:#161618; --surface2:#1d1d20; --elevated:#242427;
  --line:rgba(255,255,255,.08); --line2:rgba(255,255,255,.14);
  --text:#f5f5f7; --text2:rgba(235,235,245,.60); --text3:rgba(235,235,245,.34);
  --pi:#b8940f;   /* 차량 성능지수 — gold 보다 눌러 앉힌 노랑. 이름 옆 보조 수치라
                     차 이름보다 튀면 안 되고, text3 처럼 흐려도 못 읽는다 */
  --red:#ff453a; --green:#30d158; --cyan:#64d2ff; --gold:#ffd60a; --silver:#c7c7cc; --bronze:#d89461; --purple:#bf5af2;
  --r:16px; --r-sm:11px; --r-lg:22px;
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Segoe UI",system-ui,Roboto,sans-serif;
  --shadow:0 1px 0 rgba(255,255,255,.03) inset, 0 12px 32px rgba(0,0,0,.5);
}
*{box-sizing:border-box}
[hidden]{display:none!important}   /* author display (e.g. .cars{display:flex}) must never defeat hidden */
button,input,select,textarea{font-family:inherit;letter-spacing:inherit}
html,body{margin:0}
body{
  font-family:var(--font); color:var(--text); background:var(--bg);
  min-height:100vh;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  font-feature-settings:"ss01","cv01";letter-spacing:-.01em;overflow-x:hidden;
}
.grain{display:none}
.num,.tm,.last,.best,.rm,.pos,.lp,.dt-stat .v,.hrow .tm{font-variant-numeric:tabular-nums;letter-spacing:0}
h1,h2,h3{letter-spacing:-.02em}

/* header */
.top{display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:26px clamp(18px,5vw,56px) 9px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:14px}
.flag{width:30px;height:30px;border-radius:9px;flex:none;background:
  conic-gradient(from 45deg,#1c1c1f 0 25%,#3a3a3d 0 50%,#1c1c1f 0 75%,#3a3a3d 0)50%/10px 10px,#0e0e10;
  box-shadow:0 0 0 1px var(--line2) inset}
.brand-txt h1{font-weight:700;font-size:clamp(19px,2.4vw,24px);margin:0;line-height:1.05;color:var(--text)}
.tag{margin:3px 0 0;font-weight:500;letter-spacing:.01em;font-size:12.5px;color:var(--text3)}
.top-actions{display:flex;align-items:center;gap:12px}
.pill{display:inline-flex;align-items:center;gap:7px;font-weight:600;font-size:12px;letter-spacing:.02em;
  padding:7px 13px;border-radius:999px;border:1px solid var(--line);color:var(--text3);background:var(--surface)}
.pill i{width:7px;height:7px;border-radius:50%;background:var(--text3)}
.pill.on{color:var(--text);border-color:transparent;background:rgba(255,69,58,.14)}
.pill.on i{background:var(--red);box-shadow:0 0 8px var(--red);animation:beat 1.6s infinite}
@keyframes beat{0%,100%{opacity:1}50%{opacity:.4}}

/* server status strip */
/* Apple식 구역 리듬: 헤어라인 + 라인 아래로 옅게 스미는 음영 워시 */
.strip{display:flex;gap:14px;flex-wrap:wrap;padding:6px clamp(18px,5vw,56px) 13px;align-items:center;
  border-bottom:1px solid var(--line);position:relative}
.strip::after{content:"";position:absolute;left:0;right:0;top:100%;height:14px;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.035),transparent)}
/* 서킷(=같은 VPS 페어) 그룹: 라벨 없이 얇은 구분선만으로 페어를 나눈다 */
.sgrp{display:flex;min-width:0}
.sgrp + .sgrp{border-left:1px solid var(--line2);padding-left:14px}
.sgp{display:flex;gap:6px;flex-wrap:wrap}
.svr .mtag{font-size:9.5px;font-weight:700;padding:1.5px 6px;border-radius:5px;
  background:var(--elevated);color:var(--text3);border:1px solid var(--line)}
.svr .mtag[hidden]{display:none}
.svr.sprint{border-color:rgba(255,159,10,.28)}
.svr.sprint .mtag{color:#ffb86b;border-color:rgba(255,159,10,.35);background:rgba(255,159,10,.10)}
/* 주행 중 서버: 은은한 레드 펄스 + LIVE 태그 — 관객 유입 신호 (과하지 않게) */
.svr.hot{border-color:rgba(255,69,58,.4);animation:hotpulse 2.4s ease-in-out infinite}
@keyframes hotpulse{
  0%,100%{box-shadow:0 0 0 1px rgba(255,69,58,.10),0 0 10px rgba(255,69,58,.10)}
  50%{box-shadow:0 0 0 1px rgba(255,69,58,.26),0 0 16px rgba(255,69,58,.28)}}
.svr .lv{font-size:9px;font-weight:800;color:var(--red);letter-spacing:.07em;
  display:inline-flex;align-items:center;gap:3px}
.svr .lv::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--red);
  box-shadow:0 0 6px var(--red);animation:beat 1.6s infinite}
.svr .lv[hidden]{display:none}
/* status pills double as the broadcast-server switcher (tap to watch) */
.svr{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:500;padding:7px 13px;
  border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--text2);
  font-family:inherit;cursor:pointer;transition:border-color .15s,color .15s}
.svr:hover{color:var(--text);border-color:var(--line2)}
.svr.sel{color:var(--text);background:var(--elevated);border-color:var(--line2)}
.svr i{width:7px;height:7px;border-radius:50%;background:var(--text3)}
.svr.up i{background:var(--green);box-shadow:0 0 7px rgba(48,209,88,.7)}
.svr.down{opacity:.5}.svr.down i{background:var(--red)}
.svr .c{color:var(--text3);font-size:11.5px}

/* main tabs — segmented, Apple style. The join button shares this row (no wasted line). */
.tabsrow{display:flex;align-items:center;justify-content:flex-start;gap:10px;flex-wrap:wrap;
  margin:15px clamp(18px,5vw,56px) 0}
.maintabs{display:inline-flex;gap:2px;padding:3px;
  background:var(--surface);border:1px solid var(--line);border-radius:13px}
.mtab{font-weight:600;font-size:14.5px;letter-spacing:-.01em;display:inline-flex;align-items:center;gap:8px;
  padding:9px 18px;border-radius:10px;border:none;color:var(--text2);background:transparent;cursor:pointer;
  transition:background .18s,color .18s}
.mtab .mi{font-size:13px}.mtab .mi.dotred{color:var(--text3);font-size:9px}
.mtab:hover{color:var(--text)}
.mtab.on{color:var(--text);background:var(--elevated);box-shadow:0 1px 2px rgba(0,0,0,.4)}
.mtab.on .mi.dotred{color:var(--red);animation:beat 1.6s infinite}
.panel{padding-top:4px}

/* car chips — the hall follows the SELECTED server pill (no separate circuit tabs).
   Classes the server no longer runs drop into a dimmed LEGACY row underneath. */
.cars{display:flex;gap:7px;flex-wrap:wrap;padding:7px clamp(18px,5vw,56px) 4px}
.cars.legacy{padding-top:2px;padding-bottom:12px;align-items:center}
.lg-lab{font-size:10px;font-weight:700;letter-spacing:.09em;color:var(--text3);
  border:1px solid var(--line);border-radius:6px;padding:3px 7px;flex:none}
.lg-chips{display:flex;gap:7px;flex-wrap:wrap}
.chip.lg{opacity:.45;filter:grayscale(1)}
.chip.lg.on{opacity:.8;filter:grayscale(.5)}
.chip{font-weight:500;font-size:13px;padding:6px 12px;border-radius:999px;cursor:pointer;
  border:1px solid var(--line);color:var(--text2);background:var(--surface);transition:.15s}
.chip:hover{color:var(--text);border-color:var(--line2)}
.chip.on{color:#06210f;background:var(--green);border-color:transparent;font-weight:600}
.chip .n{opacity:.6;font-size:11px;margin-left:5px;font-variant-numeric:tabular-nums}
/* 칩 안에 PI(노랑)와 보유 기록 수(회색)가 나란히 서면 숫자 둘이 붙어 보인다 —
   앞쪽은 이름에 붙이고 뒤쪽만 떼어 (이름 PI)(기록수) 로 묶이게 한다. */
.chip .fpi + .n{margin-left:11px}
/* 선택된 칩은 배경이 녹색 — 어두운 노랑은 거기서 읽히지 않는다 */
.chip.on .fpi{color:#06210f;opacity:.72}

.sec-head{display:flex;align-items:center;gap:10px;margin:0 0 16px}
.sec-head h2{font-weight:700;font-size:21px;margin:0}
.sec-head .ico{font-size:19px}.sec-head .sub{margin-left:auto;color:var(--text3);font-size:12.5px}
.live-dot{width:8px;height:8px;border-radius:50%;background:var(--red);box-shadow:0 0 8px var(--red);animation:beat 1.6s infinite;flex:none}

/* cards */
.map-card,.tower-card,.detail-card,.chat-card{background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:18px;min-width:0}
.card-head{display:flex;align-items:center;gap:9px;margin:0 0 15px}
.card-head h3{font-weight:650;font-weight:600;font-size:17px;margin:0}
.card-head .sub{margin-left:auto;color:var(--text3);font-size:12px;text-align:right}

/* ===== HALL — 오늘 | 이번 달 | 전체 기간 side by side (no period tabs) ===== */
.hall{padding:18px clamp(18px,5vw,56px) 48px;margin-top:10px;border-top:1px solid var(--line);
  background:linear-gradient(180deg,rgba(255,255,255,.028),transparent 36px)}
.hall .sec-head{margin-bottom:12px}
.hall-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;align-items:start}
.hcol{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:14px 12px;min-width:0}
.hc-head{display:flex;align-items:baseline;gap:8px;margin:0 2px 10px}
.hc-head h4{margin:0;font-size:14.5px;font-weight:650;letter-spacing:-.01em}
.hc-n{margin-left:auto;color:var(--text3);font-size:11.5px;font-variant-numeric:tabular-nums}
.hlist{display:flex;flex-direction:column;gap:2px}
.hrow{display:grid;grid-template-columns:26px minmax(0,1fr) auto;align-items:center;gap:8px;
  padding:7px 9px;border-radius:10px;border:1px solid transparent;transition:background .15s}
.hrow:hover{background:var(--surface2)}
.hrow .rk{font-weight:700;font-size:13px;color:var(--text3);text-align:center}
.hrow.r1 .rk{color:var(--gold)}.hrow.r2 .rk{color:var(--silver)}.hrow.r3 .rk{color:var(--bronze)}
.hrow.r1{background:linear-gradient(90deg,rgba(255,214,10,.07),transparent 70%)}
.hrow .drv{font-weight:600;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hrow .rt{text-align:right}
.hrow .tm{display:block;font-weight:600;font-size:12.5px;color:var(--text)}
.hrow .dt{display:block;color:var(--text3);font-size:10px;margin-top:1px}
.hc-empty{padding:16px 8px;text-align:center;color:var(--text3);font-size:12px;border:1px dashed var(--line);border-radius:12px}

/* ===== LIVE ===== */
.btn-spectate{font-weight:600;font-size:13px;text-decoration:none;color:#fff;padding:8px 14px;border-radius:11px;
  white-space:nowrap;background:var(--red);transition:transform .12s,filter .12s}
.btn-spectate:hover{filter:brightness(1.08)}.btn-spectate:active{transform:scale(.98)}
/* AC ↔ EVO 전환 — 작지만 눈에 띄게, 호버 시 EVO 서버 운영 안내 툴팁 */
.btn-evo{position:relative;display:inline-flex;align-items:center;gap:7px;margin-left:auto;
  padding:9px 14px;border-radius:13px;text-decoration:none;white-space:nowrap;
  background:#141922;border:1px solid #2a3448;color:#c9d3e4;font-size:13px;font-weight:600;
  transition:border-color .14s,color .14s,transform .12s}
.btn-evo:hover{border-color:#ff3d2e;color:#fff;transform:translateY(-1px)}
.btn-evo:active{transform:scale(.98)}
/* 배지 글자를 상자 **정중앙**에 앉힌다. 대칭 패딩으로는 안 되고 1px 씩 두 번 보정해야
   하는데, 둘 다 원인이 분명하다 (2026-08-18 실측: x -0.5px / y +0.5px → 0 / 0):
   · 가로 — letter-spacing 은 CSS 규격상 **마지막 글자 뒤에도** 붙는다. 그 1px 만큼
     잉크가 오른쪽 여백을 남기고 끝나 왼쪽으로 밀려 보인다 → 왼쪽 패딩을 1px 더.
     (폰트와 무관하게 성립하는 보정이다)
   · 세로 — 폰트의 ascent(12)/descent(3)는 비대칭인데 AC·EVO 는 전부 대문자라
     baseline 아래 잉크가 없다. 줄상자는 **글자**가 아니라 **폰트 상자**를 중앙에
     두므로 글자가 0.5px 내려앉는다 → 아래 패딩을 1px 더.
   line-height 를 15px 로 못박는 이유: normal 은 폰트마다 달라 위 계산의 전제가 흔들린다. */
.btn-evo .evo-badge{background:#ff3d2e;color:#fff;font-weight:800;font-size:11px;letter-spacing:1px;
  line-height:15px;padding:2px 6px 3px 7px;border-radius:5px}
.btn-evo .evo-tip{position:absolute;top:calc(100% + 10px);right:0;width:330px;z-index:60;
  background:#0f1420;border:1px solid #2a3448;border-radius:12px;padding:13px 15px;
  font-size:12.5px;font-weight:400;line-height:1.65;color:#a9b4c7;white-space:normal;
  box-shadow:0 18px 44px -14px rgba(0,0,0,.75);opacity:0;visibility:hidden;transform:translateY(-4px);
  transition:opacity .16s,transform .16s,visibility .16s}
.btn-evo .evo-tip b{display:block;color:#fff;font-size:13px;margin-bottom:5px}
.btn-evo .evo-tip b + *{margin-top:0}
.btn-evo:hover .evo-tip,.btn-evo:focus-visible .evo-tip{opacity:1;visibility:visible;transform:translateY(0)}
@media(max-width:640px){.btn-evo .evo-lab{display:none}.btn-evo .evo-tip{right:auto;left:0;width:min(84vw,330px)}}

/* map | draggable side divider | right column. The SIDE divider sets WIDTH; each panel's own
   BOTTOM-EDGE bar (.rz-v) sets HEIGHT — consistent: sides = width, bottom = height. */
.bcast{display:grid;grid-template-columns:minmax(0,1.4fr) 12px minmax(0,1fr);gap:6px;padding:8px clamp(18px,5vw,56px) 8px;align-items:stretch}
@media(max-width:900px){.bcast{grid-template-columns:1fr!important}.bcast-split{display:none}}
.bcast-split{align-self:stretch;min-height:120px;cursor:col-resize;border-radius:7px;background:var(--line);
  position:relative;touch-action:none;transition:background .15s}
.bcast-split:hover,.bcast-split.drag{background:var(--text3)}
.bcast-split::before{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:2px;height:38px;border-radius:2px;background:var(--text2);opacity:.55}
/* bottom-edge HEIGHT handle — barely-there by default (a faint thin hairline grip); on hover the
   grip brightens + widens so it surfaces only when the cursor is near. Hit area stays grabbable. */
.rz-v{flex:0 0 auto;height:12px;margin-top:2px;cursor:ns-resize;background:transparent;
  position:relative;touch-action:none}
.rz-v::before{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:30px;height:2px;border-radius:2px;background:var(--text2);opacity:.1;
  transition:opacity .18s ease,width .18s ease,background .18s ease}
.rz-v:hover::before,.rz-v.drag::before{opacity:.65;width:48px;background:var(--text)}
/* big by default; drag the bottom-edge bar to resize height (width = the side divider) */
.map-box{position:relative;width:100%;height:clamp(320px,40vh,520px);border-radius:var(--r);overflow:hidden;
  background:radial-gradient(120% 100% at 50% 0%,#161619,#0d0d0f 75%);border:1px solid var(--line);
  min-height:300px;max-height:1500px}
#trackmap{position:absolute;inset:0;width:100%;height:100%}
.map-empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;
  padding:0 24px;color:var(--text3);font-size:14px}
.mp-edge{fill:none;stroke:#050506;stroke-linejoin:round;stroke-linecap:round;stroke-width:5}
.mp-track{fill:none;stroke:#34343a;stroke-linejoin:round;stroke-linecap:round}
/* true-width surface (annulus from real sideLeft/sideRight edges) + its edge lines */
.mp-surface{fill:#34343a;stroke:none}
.mp-edgeline{fill:none;stroke:#4a4a52;stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round}
.mp-center{fill:none;stroke:#6a6a74;stroke-width:1.4;stroke-dasharray:1.5 11;stroke-linecap:round;opacity:.5}
.car-g{cursor:pointer}   /* motion handled by the JS interpolator (rAF), not CSS transition */
.car-dot{fill:var(--cyan);stroke:#0009;stroke-width:1.5}
.car-g.lead .car-dot{stroke:var(--gold);stroke-width:3.5}
.car-halo{fill:var(--cyan);opacity:.16}.car-g.lead .car-halo{opacity:.28}
/* tiny stable number riding on each car so you can tell who's who at a glance */
.car-num{font-family:var(--font);font-weight:800;font-size:8px;fill:#0a0a0c;pointer-events:none}
/* nicknames stay hidden (they covered the track) — shown only on hover */
.car-lbl{font-family:var(--font);font-weight:600;font-size:14px;fill:#fff;paint-order:stroke;stroke:#000c;stroke-width:4px;dominant-baseline:middle;opacity:0;transition:opacity .12s;pointer-events:none}
.car-g:hover .car-lbl{opacity:1}
.car-g.lead .car-lbl{fill:var(--gold)}
/* car in the pits → a clear blue "P" garage badge at its real pit spot (replaces the dot) */
.pit-box{display:none;fill:#1d4ed8;stroke:#bfdbfe;stroke-width:1.4}
.car-g.pit .pit-box{display:inline}
.car-g.pit .car-dot,.car-g.pit .car-halo{display:none}
.car-g.pit .car-num{fill:#fff;font-size:9px}
/* off-track → red ring around the car */
.car-g.off .car-dot{stroke:#ff453a;stroke-width:3}
.car-g.off .car-halo{fill:#ff453a;opacity:.2}
.car-g.ai{cursor:default}
.car-g.ai .car-dot{fill:var(--text2);stroke:#111}
.car-g.ai .car-halo{fill:var(--text2);opacity:.1}
.car-g.ai .car-lbl{fill:var(--text2)}
.lrow.ai{opacity:.72}
.lrow.ai .lp{font-size:11px;font-weight:700;color:var(--text3)}
.lrow.ai .best,.lrow.ai .last{color:var(--text2)}

/* timing tower */
/* compact; height adjustable via the bottom-edge bar directly below it */
.tower{display:flex;flex-direction:column;gap:3px;max-height:clamp(220px,38vh,460px);overflow-y:auto;scrollbar-width:thin;min-height:140px}
.lrow{display:grid;grid-template-columns:30px 1fr auto auto;align-items:center;gap:11px;
  padding:11px 13px;border-radius:12px;background:var(--surface2);border:1px solid transparent;cursor:pointer;transition:background .15s}
.lrow:hover{background:var(--elevated)}
.lrow.p1{background:linear-gradient(90deg,rgba(255,214,10,.10),var(--surface2));border-color:rgba(255,214,10,.22)}
.lrow .who{min-width:0}
.lrow .lp{font-weight:700;font-size:16px;color:var(--text3);text-align:center;font-variant-numeric:tabular-nums}
.lrow.p1 .lp{color:var(--gold)}
.lrow .ln{font-weight:600;font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lrow .lc{font-size:11.5px;color:var(--text3)}
.lrow .last{font-size:13px;color:var(--text2);text-align:right;font-variant-numeric:tabular-nums}
.lrow .best{font-weight:600;font-size:14px;color:var(--cyan);text-align:right;font-variant-numeric:tabular-nums}
.lrow .best.fastest{color:var(--purple)}
.lab{font-size:10px;color:var(--text3);letter-spacing:.04em;text-transform:uppercase}

.empty{padding:30px 16px;text-align:center;color:var(--text3);border:1px dashed var(--line2);border-radius:var(--r);font-size:14px}

/* driver detail */
/* driver detail = full-width card below the map+chat row */
.live-detail{margin:14px clamp(18px,5vw,56px) 48px}
.live-detail .dt-head{margin-bottom:11px}
.live-detail .dt-head h3{font-size:15px}
/* right column = timing tower (top) + live chat (bottom), both right of the map */
.rightcol{display:flex;flex-direction:column;gap:16px;min-width:0;height:100%}
/* 높이의 **기준은 좌측**(맵+중계 clamp)이다. 채팅까지 고정 높이로 두면 두 기둥이
   수십 px 어긋나고, 반대로 좌측까지 auto 로 풀면 기둥 높이를 아무도 정하지 않게
   되어 중계 목록이 통째로 펼쳐진다(실측 2071px). 좌측 확정 + 채팅 flex 가 정답. */
.chat-card{display:flex;flex-direction:column;flex:1;min-height:260px}
.chat-card .card-head{margin-bottom:10px}
.chat-card .card-head h3{font-size:15px}
.chat-msgs{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:7px;padding:2px;scrollbar-width:thin}
.chat-msg{font-size:13px;line-height:1.4;word-break:break-word}
.chat-msg .tm{font-size:10px;color:var(--text3);opacity:.55;margin-right:5px;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.chat-msg .cn{font-weight:700;color:var(--cyan);margin-right:6px}
.chat-msg.me .cn{color:var(--gold)}
.chat-msg .iptag{font-size:9px;font-weight:600;color:var(--text3);opacity:.6;margin-left:3px;letter-spacing:0}
.chat-msg .tomb{font-size:11px;color:#6b7280}   /* deleted stub: smaller + darker than a normal message */
.chat-msg .cx-del{margin-left:6px;padding:0 5px;font-size:10px;line-height:16px;border:1px solid var(--line);
  border-radius:6px;background:transparent;color:var(--text3);opacity:.4;cursor:pointer;vertical-align:1px}
.chat-msg:hover .cx-del,.chat-msg .cx-del:focus{opacity:1}
.chat-msg .cx-del.arm{opacity:1;color:#ff6b6b;border-color:#ff6b6b;font-weight:700}
.chat-msg .cx-del:disabled{opacity:.3;cursor:default}
/* touch devices have no hover: keep the button visible and big enough to hit */
@media (pointer:coarse){.chat-msg .cx-del{opacity:.75;padding:3px 9px;line-height:18px}}
.chat-day{align-self:center;margin:6px 0 2px}
.chat-day span{font-size:11px;color:var(--text3);background:rgba(255,255,255,.05);border:1px solid var(--line);padding:2px 12px;border-radius:999px;letter-spacing:.02em}
.chat-hint{color:var(--text3);font-size:13px;text-align:center;padding:20px 8px}
.chat-row{display:flex;gap:6px;margin-top:10px}
.chat-in{padding:8px 10px;border-radius:9px;background:var(--surface2);border:1px solid var(--line);color:inherit;font:inherit;font-size:13px;min-width:0}
.chat-in.name{width:80px;flex:0 0 auto}
.chat-in.text{flex:1}
.chat-send{padding:8px 14px;flex:0 0 auto}
/* driver detail sits full-width UNDER the three period boards */
.hall-detail{margin-top:16px}
.dt-ic{font-size:17px}.dt-body{margin-top:8px}
.dt-hint{color:var(--text3);font-size:13.5px;padding:26px 8px;text-align:center;border:1px dashed var(--line2);border-radius:var(--r)}
.dt-stats{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:14px}
.dt-stat{flex:1;min-width:78px;background:var(--surface2);border:1px solid var(--line);border-radius:14px;padding:11px 12px}
.dt-stat .v{font-weight:700;font-size:22px;color:var(--text);line-height:1;font-variant-numeric:tabular-nums}
.dt-stat .k{font-size:11.5px;color:var(--text3);margin-top:5px}
.dt-sech{font-weight:600;font-size:12px;letter-spacing:.04em;color:var(--text3);margin:6px 0 8px;text-transform:uppercase}
.dt-recs{display:flex;flex-direction:column;gap:4px}
.dt-rec{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;padding:10px 13px;border-radius:12px;background:var(--surface2)}
.dt-rec .rt{font-weight:600;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dt-rec .rc{font-size:11px;color:var(--text3)}
.dt-rec .rm{font-weight:600;font-size:14px;color:var(--cyan);text-align:right;font-variant-numeric:tabular-nums}
.dt-rec .rd{font-size:10px;color:var(--text3);text-align:right;margin-top:1px}
.dt-rec.cur{border:1px solid rgba(48,209,88,.4);background:rgba(48,209,88,.07)}
.dt-rec.cur .rm{color:var(--green)}
/* ===== achievement badges (hall driver detail) ===== */
/* ===== badge wall: BIG visual-only badges, all detail in the hover/tap tooltip ===== */
.sech-hint{font-weight:500;font-size:10.5px;color:var(--text3);letter-spacing:0;margin-left:8px}
.bdg-wall{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-start;margin:2px 0 16px}
.bdg{position:relative;display:inline-flex;flex-direction:column;align-items:center;gap:1px;
  padding:2px 4px 4px;border-radius:14px;cursor:default;outline:none;border:none;background:transparent;
  transition:transform .12s ease,z-index 0s .15s}   /* z drops back AFTER the tip fade-out */
.bdg:hover,.bdg:focus{transform:translateY(-3px);z-index:40;   /* lift above later siblings — the tip must never hide behind the next badge row */
  transition:transform .12s ease,z-index 0s 0s}
.bdg .emb{width:110px;height:110px;object-fit:contain;display:block;-webkit-user-drag:none;user-select:none}
/* circuit name floats in the emblem's empty top-center notch (medal badges only) */
.bdg .embw{position:relative;display:inline-block;line-height:0}
.bdg .ovr{position:absolute;top:12.5%;left:50%;transform:translateX(-50%);
  font-size:13px;line-height:1;font-weight:900;letter-spacing:.05em;white-space:nowrap;
  max-width:58%;overflow:hidden;text-overflow:ellipsis;pointer-events:none;
  color:#bfe3ff;text-shadow:0 1px 2px rgba(0,0,0,.92),0 0 7px rgba(0,0,0,.55)}  /* m1 다이아 — 아이스 블루 */
.bdg.m2 .ovr{color:#dff3ef}  /* 플래티넘 — 쿨 실버틸 */
.bdg.m3 .ovr{color:#ffe3a3}  /* 골드 — 기존 1위 금색 재사용 */
.bdg .cap{font-size:10.5px;font-weight:800;color:var(--text2);letter-spacing:.01em;text-align:center;
  margin-top:-12px;   /* 티어 마크 하단 여백(엠블럼 PNG 자체 패딩)을 상쇄해 차종을 바짝 붙임 */
  max-width:118px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* 챔피언 뱃지(마스터/챌린저) — 은은한 광휘로 격을 표시 */
/* ── 서킷 통계 랜딩 (차종 미선택 기본 화면) — 왕좌·랭킹·접전 브리핑 ── */
#hall-ov{display:flex;flex-direction:column;gap:20px;margin-top:2px}
.ov-hero{padding:10px 14px;border:1px solid var(--line);border-radius:var(--r-sm);
  background:linear-gradient(135deg,rgba(255,214,10,.045),transparent 60%),var(--surface)}
.ov-feed-t{font-size:11.5px;font-weight:800;color:var(--text2);margin-bottom:5px;letter-spacing:.02em}
.ov-feed-line{font-size:12px;color:var(--text2);line-height:1.7;font-variant-numeric:tabular-nums}
.ov-feed-line .d{color:var(--text3);font-size:11px;margin-right:2px}
.ov-feed-line b{color:var(--text);font-weight:700}
.ov-feed-line b.rk1{color:var(--gold)}
.ov-feed-line b.rk2{color:var(--silver)}
.ov-feed-line b.rk3{color:var(--bronze)}
.ov-feed-line.dare{margin-top:4px;padding-top:6px;border-top:1px dashed var(--line);color:var(--text)}
.ov-feed-line.dare b{color:var(--gold)}
/* 기간 레코드(오늘/이달): 트랙 레코드보다 한 톤 낮게 */
.ov-feed-line.sub{font-size:11px;color:var(--text3)}
.ov-feed-line.sub b{color:var(--text2);font-weight:650}
.ov-feed-line .carshort{display:none}
/* 실시간 중계 패널도 명예의 전당과 같은 구분 리듬 (탭 아래 헤어라인 + 음영 워시) */
#panel-live{border-top:1px solid var(--line);margin-top:12px;padding-top:12px;
  background:linear-gradient(180deg,rgba(255,255,255,.028),transparent 36px)}
.ov-t{font-size:13px;font-weight:800;color:var(--text2);margin:0 0 9px;letter-spacing:.02em}
.ov-hint{font-size:10.5px;color:var(--text3);font-weight:500;margin-left:8px}
.ov-thrones{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:10px}
.ov-th{position:relative;text-align:left;padding:13px 15px;border:1px solid var(--line);
  border-radius:var(--r-sm);background:var(--surface);cursor:pointer;font:inherit;color:inherit;
  transition:transform .15s,border-color .15s,background .15s}
.ov-th:hover{transform:translateY(-2px);border-color:rgba(255,214,10,.38);background:var(--surface2)}
.ov-th .c{font-size:11px;color:var(--text3);letter-spacing:.03em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ov-th .h{font-size:14.5px;font-weight:800;margin:4px 0 1px;display:flex;gap:6px;align-items:center;min-width:0}
.ov-th .t{font-variant-numeric:tabular-nums;font-size:13.5px;color:var(--gold);font-weight:700}
.ov-th .td{font-size:9.5px;color:var(--text3);font-weight:500;margin-left:9px}   /* 랩타임 옆 날짜 — 작고 어둡게 */
.ov-th .m{font-size:10.5px;color:var(--text3);margin-top:4px}
.ov-grid2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.ov-row{display:flex;align-items:center;gap:10px;padding:8px 6px;border-top:1px solid var(--line);cursor:pointer;border-radius:6px}
.ov-row:hover{background:var(--elevated)}
.ov-row .rk{width:20px;font-weight:800;color:var(--text3);font-variant-numeric:tabular-nums}
.ov-row .nm{flex:1;font-weight:700;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ov-row .v{font-variant-numeric:tabular-nums;font-size:12px;color:var(--text2);white-space:nowrap}
.ov-duel-line{padding:9px 6px;border-top:1px solid var(--line);font-size:13px;color:var(--text2)}
.ov-duel-line b{color:var(--text);font-variant-numeric:tabular-nums}
.ov-empty{padding:22px;color:var(--text3);text-align:center;width:100%}
.chip.stat{border-color:rgba(255,214,10,.3);color:var(--text2)}
.chip.stat.on{background:rgba(255,214,10,.12);border-color:rgba(255,214,10,.5);color:var(--text)}

/* 랭크 디스크: 이모지 메달 대신 뱃지 색과 깔맞춤 + 또렷한 숫자 (캡션·툴팁 공용) */
.rkm{display:inline-flex;align-items:center;justify-content:center;
  width:14px;height:14px;border-radius:50%;font-size:9.5px;font-weight:900;
  color:#0a0a0b;margin-right:4px;vertical-align:middle;position:relative;top:-1px;
  flex:0 0 auto;background:var(--text3)}
.rkg{display:inline-flex;align-items:center;margin-right:12px;font-variant-numeric:tabular-nums}
.rkg:last-of-type{margin-right:0}
.rkm.c1,.bdg.m1 .cap .rkm{background:#bfe3ff;box-shadow:0 0 6px rgba(120,205,255,.45)}   /* 다이아 */
.rkm.c2,.bdg.m2 .cap .rkm{background:#dff3ef}                                            /* 플래티넘 */
.rkm.c3,.bdg.m3 .cap .rkm{background:#ffe3a3}                                            /* 골드 */
.bdg.lgc .cap .rkm{width:11px;height:11px;font-size:7.5px;opacity:.58;
  filter:grayscale(.35);box-shadow:none;margin-right:3px}   /* 레거시: 캡션처럼 작고 흐리게 */
/* 뱃지 월: 현역 | 레거시 구분선 */
.bdg-sep{align-self:stretch;width:1px;background:var(--line2);margin:8px 5px;border-radius:1px}
/* 다이아몬드(서킷 레코드 1위, 현역만): 은은한 아이스-시안 글로우 — 과하지 않게 */
.bdg.m1:not(.lgc) .emb{filter:brightness(1.05) drop-shadow(0 0 7px rgba(120,205,255,.42)) drop-shadow(0 0 18px rgba(120,205,255,.16))}
.bdg.m1:not(.lgc) .cap{color:#c9ecff}
/* 레거시(현재 미운영 차종) 조합 뱃지: 작게 + 채도 낮춤 + LEGACY 태그 — 공정성 표기 */
.bdg.lgc .emb{width:84px;height:84px;filter:grayscale(.4) brightness(.85)}
.bdg.lgc .ovr{font-size:10px}
.bdg.lgc .cap{font-size:9.5px;color:var(--text3)}
.bdg .lgtag{font-size:7.5px;font-weight:800;letter-spacing:.12em;color:var(--text3);
  border:1px solid var(--line);border-radius:3px;padding:0 4px;margin-top:1px}
.bdg.champ .emb{filter:drop-shadow(0 0 9px rgba(120,200,255,.55))}
.bdg.champ .cap{color:#bfe3ff;margin-top:-8px}
/* tooltip: appears UNDER the badge (never clipped by the section header above) */
.bdg .tip{position:absolute;top:calc(100% + 9px);left:50%;transform:translateX(-50%) translateY(-4px);
  width:max-content;max-width:min(260px,72vw);padding:10px 13px;border-radius:12px;z-index:30;
  background:rgba(16,16,20,.97);border:1px solid var(--line);box-shadow:0 10px 28px rgba(0,0,0,.5);
  font-size:12px;line-height:1.5;color:var(--text2);text-align:left;
  opacity:0;pointer-events:none;transition:opacity .13s ease,transform .13s ease}
.bdg .tip::before{content:"";position:absolute;bottom:100%;left:50%;transform:translateX(-50%);
  border:7px solid transparent;border-bottom-color:rgba(16,16,20,.97)}
.bdg .tip b{display:block;font-size:12.5px;color:var(--text);margin-bottom:3px}
.bdg .tip i{display:block;font-style:normal;font-size:11px;color:var(--text3);margin-top:3px}
.bdg:hover .tip,.bdg:focus .tip{opacity:1;transform:translateX(-50%) translateY(0)}
.bdg-wall .bdg:first-child .tip{left:0;transform:translateX(0) translateY(-4px)}
.bdg-wall .bdg:first-child .tip::before{left:44px}
.bdg-wall .bdg:first-child:hover .tip,.bdg-wall .bdg:first-child:focus .tip{transform:translateX(0) translateY(0)}
/* JS-applied when the centered tip would run off the right screen edge */
.bdg-wall .bdg .tip.tip-r{left:auto;right:0;transform:translateX(0) translateY(-4px)}
.bdg-wall .bdg .tip.tip-r::before{left:auto;right:44px;transform:none}
.bdg-wall .bdg:hover .tip.tip-r,.bdg-wall .bdg:focus .tip.tip-r{transform:translateX(0) translateY(0)}
.rkline{font-size:10px;font-weight:800}
.rkline.r1{color:var(--gold)}.rkline.r2{color:var(--silver)}.rkline.r3{color:var(--bronze)}.rkline.r4{color:var(--text3)}
/* per-period rank badges (hall driver detail — this circuit · this class) */
.hd-badges{display:flex;gap:8px;flex-wrap:wrap;margin:2px 0 14px}
.hd-badge{display:inline-flex;align-items:baseline;gap:6px;padding:7px 12px;border-radius:12px;
  background:var(--surface2);border:1px solid var(--line);font-size:12px;color:var(--text3)}
.hd-badge b{font-size:15px;color:var(--text);font-weight:700;font-variant-numeric:tabular-nums}
.hd-badge.gold b{color:var(--gold)}
/* current-session block (live driver detail under the tower) */
.dt-sech.sess{color:#34d399;text-transform:none;font-size:12.5px;margin-top:2px}
.dt-stat .v.hot{color:var(--gold)}
.dt-stat .v.sm{font-size:13.5px;line-height:1.3;padding-top:4px;font-weight:800}
.dt-laps{display:flex;flex-direction:column;gap:3px;max-height:260px;overflow-y:auto;margin-bottom:14px;scrollbar-width:thin}
.dt-lap{display:flex;align-items:center;gap:10px;padding:6px 11px;border-radius:9px;background:var(--surface2);font-variant-numeric:tabular-nums}
.dt-lap .ln{font-size:11px;color:var(--text3);font-weight:700;min-width:28px}
.dt-lap .lt{font-weight:600;font-size:14px;color:var(--text)}
.dt-lap.best{background:rgba(255,214,10,.12);border:1px solid rgba(255,214,10,.38)}
.dt-lap.best .lt{color:var(--gold)}
.dt-lap.cut{opacity:.5}
.dt-lap .cx{font-size:9px;color:var(--red);font-weight:800;text-transform:uppercase;margin-left:auto}
/* live in-progress lap timer + off-track indicator (top of the session block) */
.cur-wrap{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--surface2);border:1px solid var(--line);border-radius:13px;padding:10px 14px;margin-bottom:12px}
/* 랩타이머식 실시간 텔레메트리 (예상 랩·델타·기어·RPM·속도) */
.dt-tele{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:12px}
.dt-tele .tl{flex:1;min-width:86px;background:var(--surface2);border:1px solid var(--line);border-radius:11px;padding:7px 10px;display:flex;flex-direction:column;gap:2px}
.dt-tele .tk{font-size:10.5px;color:var(--text3);letter-spacing:.02em}
.dt-tele .tv{font-size:15px;font-weight:800;font-variant-numeric:tabular-nums}
.dt-tele .tv.up{color:#ff6b6b}
.dt-tele .tv.dn{color:#41d98d}
.cur-lap{font-size:26px;font-weight:780;line-height:1;font-variant-numeric:tabular-nums;color:#34d399}
.cur-lab{font-size:11px;color:var(--text3);margin-top:4px}
.off-ind{font-size:11px;font-weight:700;padding:5px 10px;border-radius:999px;white-space:nowrap}
.off-ind.ok{color:#34d399;background:rgba(52,211,153,.12)}
.off-ind.on{color:#fff;background:var(--red)}
.lrow,.hrow{cursor:pointer}
/* 선택 하이라이트: 빨간 테두리 대신 은은한 시안 톤 (테두리 얇게 + 옅은 채움) */
.lrow.sel,.hrow.sel{outline:1px solid rgba(100,210,255,.38);outline-offset:-1px;
  background:rgba(100,210,255,.07);border-radius:8px}

.foot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;color:var(--text3);
  font-size:12.5px;padding:20px clamp(18px,5vw,56px) 40px;border-top:1px solid var(--line);margin-top:10px}
.foot code{color:var(--cyan);background:var(--surface);padding:2px 8px;border-radius:6px}

/* ===== Mobile (phones ≤760px): one-glance compact layout =====
   Server pills on ONE line (they are the switcher), slim tabs, no join button
   (can't run AC on a phone — the live page itself is the spectator view), map
   height auto-fits the track aspect from JS, tighter timing/chat type. */
.mv{display:none}   /* card reorder arrows — phones only (see the media block) */

@media(max-width:760px){
  .top{padding:10px 12px 0}
  .brand{gap:10px}
  .brand-txt h1{font-size:17px}
  .tag{font-size:11px}
  .strip{flex-wrap:nowrap;overflow-x:auto;gap:6px;padding:4px 10px 9px;scrollbar-width:none}
  .strip::-webkit-scrollbar{display:none}
  .svr{font-size:11px;padding:4px 9px;gap:6px;flex:0 0 auto;white-space:nowrap}
  .svr .c{font-size:10px}
  .strip{gap:10px}
  .sgrp{flex:0 0 auto}   /* keep each circuit group intact on the narrow strip (no squash) */
  .sgrp + .sgrp{padding-left:10px}
  .svr .mtag{font-size:8.5px;padding:1px 4px}
  /* 서킷 통계 랜딩 — 폰에서 한눈에: 요약 한 줄 + 왕좌 2열 + 섹션 간격 압축 */
  #hall-ov{gap:12px}
  .ov-hero{padding:8px 12px}
  .ov-hero .ov-sum{font-size:11px;line-height:1.5}
  .ov-t{font-size:12px;margin-bottom:6px}
  .ov-hint{display:block;margin:2px 0 0 0;font-size:9.5px}
  .ov-thrones{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
  .ov-th{padding:9px 10px;border-radius:10px}
  .ov-th .c{font-size:9.5px}
  .ov-th .h{font-size:12.5px;margin:2px 0 0}
  .ov-th .t{font-size:12px}
  .ov-th .td{font-size:8.5px;margin-left:6px}
  .ov-th .m{font-size:9px;margin-top:2px;line-height:1.4}
  .ov-grid2{grid-template-columns:1fr;gap:12px}
  .ov-row{padding:6px 4px;gap:8px}
  .ov-row .nm{font-size:12.5px}
  .ov-row .v{font-size:10.5px}
  .ov-duel-line{padding:7px 4px;font-size:11.5px;line-height:1.45}
  /* 폰 피드는 무조건 1줄: 날짜·라벨·긴 차종명 숨기고 단축명만, 넘치면 말줄임 */
  .ov-feed-line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:11.5px;line-height:1.9}
  .ov-feed-line .d,.ov-feed-line .lbl,.ov-feed-line .carfull{display:none}
  .ov-feed-line .carshort{display:inline}
  #panel-live{margin-top:8px;padding-top:8px}
  .bdg.lgc .emb{width:64px;height:64px}
  .maintabs{padding:2px;gap:2px;border-radius:10px}
  .mtab{font-size:11.5px;padding:4px 10px;gap:4px;border-radius:8px}
  .mtab .mi{font-size:10px}
  .mtab .mi.dotred{font-size:7px}
  .panel{padding-top:4px}
  .map-card,.tower-card,.detail-card,.chat-card{padding:10px;border-radius:14px}
  .tabsrow{margin:10px 10px 0}
  #spectate{display:none}   /* phones can't run AC — the page itself is the spectator view */
  /* stretch, not the desktop's start — otherwise each card shrink-wraps its content width */
  .bcast{display:flex;flex-direction:column;padding:6px 8px 4px;gap:6px;align-items:stretch}
  .rightcol{display:contents}
  .map-card,.tower-card,.chat-card{width:100%;min-width:0}
  .card-head{margin:0 0 6px;flex-wrap:nowrap;min-width:0}
  .card-head h3{font-size:12.5px;flex:0 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .card-head .sub{font-size:10px;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .map-box{height:48vh;min-height:200px}   /* placeholder; JS snaps it to the track aspect */
  .tower{min-height:0;max-height:26vh;gap:2px}
  .empty{padding:10px 8px;font-size:12px}
  .chat-card{height:146px;flex:none}       /* ≈3 chat lines + input — track stays visible while chatting */
  .chat-card .card-head{margin-bottom:5px}
  .chat-msgs{gap:4px}
  .chat-msg{font-size:11.5px;line-height:1.35}
  .chat-msg .tm{font-size:9px}
  .chat-day span{font-size:10px;padding:1px 10px}
  .chat-hint{font-size:11.5px;padding:8px 6px}
  .chat-row{margin-top:6px}
  .chat-in{font-size:12px;padding:6px 8px}
  .chat-in.name{width:60px}
  .chat-send{padding:6px 11px;font-size:12px}
  /* touch: no hover — keep the grips faintly visible, but nearly zero layout height, and
     HUG the card's bottom edge (negative margin swallows most of the card's own padding
     instead of adding to it). An invisible ::after pad keeps the drag target finger-sized;
     it may spill a little into the 6px gap below, never into the next card. */
  .rz-v{height:6px;margin:0 0 -8px}
  .rz-v::before{opacity:.4;width:46px}
  .rz-v::after{content:"";position:absolute;left:0;right:0;top:-2px;bottom:-6px}
  .live-detail{margin:6px 8px 22px}
  .dt-hint{font-size:12px;padding:14px 8px}
  /* hall on phones: chips scroll in one line; the three period boards stack (오늘 first) */
  .cars{flex-wrap:nowrap;overflow-x:auto;padding:8px 10px 2px;scrollbar-width:none}
  .cars::-webkit-scrollbar{display:none}
  .chip{flex:0 0 auto;font-size:11.5px;padding:4px 9px}
  .chip .n{font-size:9.5px;margin-left:4px}
  .cars.legacy{padding-top:4px;padding-bottom:4px}
  .hall{padding:12px 10px 28px;margin-top:6px}
  .racewrap{padding:12px 10px 28px;margin-top:6px}
  .hall .sec-head{margin-bottom:8px;flex-wrap:nowrap;min-width:0}
  .sec-head h2{font-size:15px;white-space:nowrap;flex:0 0 auto}
  .sec-head .ico{font-size:14px}
  .sec-head .sub{font-size:10.5px;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .hall-cols{grid-template-columns:1fr;gap:8px}
  .hcol{padding:10px 8px;border-radius:14px}
  .hc-head{margin-bottom:7px}
  .hc-head h4{font-size:12.5px}
  .hrow{padding:5px 7px;gap:6px;grid-template-columns:22px minmax(0,1fr) auto}
  .hrow .drv{font-size:12px}
  .hrow .tm{font-size:11.5px}
  .hall-detail{margin-top:8px}
  .bdg{padding:2px 3px 3px}
  .bdg .emb{width:86px;height:86px}
  .bdg .ovr{font-size:10.5px}
  .bdg .cap{font-size:9.5px;max-width:96px}
  .bdg-wall{gap:6px}
  .foot{font-size:11px;padding:0 12px 14px}
}

/* ==================== 뱃지 수성 단계 (1주 / 2주 / 3주 / 1달) ====================
   테두리나 장식을 덧붙이지 않는다. 엠블럼 그림 자체가 단계마다 조금씩 커지고 날이 서고
   색이 짙어져서, 오래 지킨 기록일수록 형상이 더 사납게 보이도록 한다. */
.bdg.m1{--hc:#8fd6ff}
.bdg.m2{--hc:#cfe9e2}
.bdg.m3{--hc:#ffd88a}
.bdg.mdl:not(.lgc) .emb{transition:transform .25s ease,filter .25s ease}
.bdg.hold1 .emb{transform:scale(1.05,1.08);
  filter:saturate(1.12) contrast(1.06) drop-shadow(0 0 7px rgba(255,255,255,.10))}
.bdg.hold2 .emb{transform:scale(1.09,1.15);
  filter:saturate(1.24) contrast(1.12) drop-shadow(0 1px 9px rgba(255,255,255,.14))}
.bdg.hold3 .emb{transform:scale(1.13,1.23) skewX(-1.5deg);
  filter:saturate(1.36) contrast(1.19) drop-shadow(0 2px 12px rgba(255,255,255,.18))}
.bdg.hold4 .emb{transform:scale(1.18,1.33) skewX(-2.5deg);
  filter:saturate(1.5) contrast(1.27) brightness(1.06) drop-shadow(0 3px 16px rgba(255,255,255,.24))}
.bdg.hold3 .cap,.bdg.hold4 .cap{color:var(--hc)}
.bdg.hold4 .ovr{text-shadow:0 1px 4px rgba(0,0,0,.6)}
.bdg-wall{row-gap:16px}
@media (max-width:600px){.bdg-wall{row-gap:12px}}

/* ==================== 서킷 최신 소식: 3줄 + 펼치기 ==================== */
button.ov-feed-t{background:none;border:0;padding:0;margin:0 0 5px;width:100%;text-align:left;
  cursor:pointer;display:flex;align-items:center;gap:6px;min-height:30px;
  font-size:11.5px;font-weight:800;color:var(--text2);letter-spacing:.02em}
button.ov-feed-t:focus-visible{outline:1px solid var(--line2);outline-offset:3px;border-radius:6px}
.ov-feed-n{font-size:10px;font-weight:800;color:var(--text3);border:1px solid var(--line);
  border-radius:999px;padding:1px 7px}
.ov-feed-cv{margin-left:auto;font-size:13px;color:var(--text3);transition:transform .2s ease}
button.ov-feed-t.on .ov-feed-cv{transform:rotate(180deg)}
.ov-feed-more{overflow:hidden;max-height:0;transition:max-height .24s ease}
.ov-feed-more.on{max-height:1400px}
@media (prefers-reduced-motion:reduce){
  .ov-feed-more,.ov-feed-cv{transition:none}}
@media (max-width:600px){
  .bdg-wall{row-gap:14px}
  .bdg[class*="hold"]{margin-top:4px}
}

/* ---- 레이스 결과 (스프린트 서버 전용) ---- */
.racewrap{padding:18px clamp(18px,5vw,56px) 48px;margin-top:10px;border-top:1px solid var(--line);
  background:linear-gradient(180deg,rgba(255,255,255,.028),transparent 36px)}
.racewrap .sec-head{margin-bottom:12px}
.racewrap .detail-card{margin-top:16px}
.race-list{display:flex;flex-direction:column;gap:6px;max-height:min(46vh,420px);overflow-y:auto}
.race-item{display:grid;grid-template-columns:auto 1fr auto auto;gap:10px;align-items:center;
  text-align:left;padding:9px 12px;border-radius:10px;cursor:pointer;
  background:var(--card2,#161a20);border:1px solid transparent;color:inherit;font:inherit}
.race-item:hover{border-color:var(--line,#2a3038)}
.race-item.sel{border-color:var(--acc,#e2483d);background:var(--card3,#1b2027)}
.race-item .r-when{font-variant-numeric:tabular-nums;opacity:.75;font-size:.86rem}
.race-item .r-win{font-weight:650}
.race-item .r-meta{opacity:.7;font-size:.84rem;font-variant-numeric:tabular-nums}
.race-item .r-est,.est-note{font-size:.74rem;opacity:.8}
.race-item .r-est{padding:1px 6px;border-radius:999px;background:#3a3320;color:#e5c76b}
.est-note{margin-bottom:10px;padding:7px 10px;border-radius:8px;background:#2a2418;color:#e5c76b}
.racetab{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.racetab th{text-align:left;font-size:.76rem;opacity:.6;font-weight:600;padding:0 8px 6px}
.racetab td{padding:7px 8px;border-top:1px solid var(--line,#242a32)}
.racetab tr[data-guid]{cursor:pointer}
.racetab tr[data-guid]:hover td{background:var(--card3,#1b2027)}
.racetab .pos{font-weight:700;width:52px}
.racetab tr.dnf .pos{color:#8b939c}
.racetab tr.dnf .nm{opacity:.65}
.racetab .nm{font-weight:600}
.racetab .car,.racetab .q,.racetab .gp{opacity:.8}
.racetab .fl{font-size:.68rem;padding:1px 5px;border-radius:999px;background:#3b2a52;color:#c9a8ff}
.racetab .up{color:#5fd08a;font-size:.78rem}
.racetab .dn{color:#e2726a;font-size:.78rem}
.racetab tr.laprow td{border-top:0;padding-top:0}
.laps{display:flex;flex-wrap:wrap;gap:4px 8px;padding:0 0 8px 52px}
.lp1{font-size:.74rem;opacity:.72;font-variant-numeric:tabular-nums}
.lp1.cut{color:#e2a45f;opacity:.9}
.lp1.ww{color:#e2726a;opacity:.9;text-decoration:line-through}
.rhist{display:flex;flex-direction:column;gap:4px;margin:6px 0 2px}
.rh{display:grid;grid-template-columns:44px 34px 1fr auto auto auto;gap:8px;align-items:center;
  text-align:left;padding:5px 8px;border-radius:8px;cursor:pointer;font:inherit;color:inherit;
  background:transparent;border:1px solid transparent;font-variant-numeric:tabular-nums;font-size:.84rem}
.rh:hover{background:var(--card3,#1b2027);border-color:var(--line,#2a3038)}
.rh-p{font-weight:700}
.rh-p.win{color:#ffd257}.rh-p.pod{color:#c9d3dc}
.rh-f,.rh-d{opacity:.55;font-size:.78rem}
.rh-t{opacity:.85;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rh-b{opacity:.8}