/* ============================================================
   HYROX & TIME TRIAL SYSTEM — Dashboard
   1920×1080 고정 스테이지. 화면 크기에 맞춰 통째로 스케일된다.
   ============================================================ */

:root {
  --bg: #0a0a0b;
  --panel: #111114;
  --panel-2: #0d0d0f;
  --line: #1c1c20;
  --line-2: #202024;
  --line-3: #303036;
  --text: #f4f4f5;
  --mid: #a0a0a6;
  --muted: #6b6b70;
  --dim: #3a3a40;
  --dimmer: #2f2f35;
  --red: #ec0b2b;
  --red-hot: #ff2444;
  --red-soft: #ff5c73;
  --amber: #ffb300;

  /* 플레이어 수에 따라 JS가 갱신하는 타이포/폭 스케일 */
  --f-speed: 84px;
  --f-target: 64px;
  --f-name: 34px;
  --f-num: 44px;
  --f-dist: 24px;
  --f-time: 24px;
  --f-finish: 46px;
  --f-ftime: 42px;
  --w-id: 350px;
  --w-time: 195px;
  --w-speed: 300px;

  --kr: 'Pretendard', 'Apple SD Gothic Neo', 'Malgun Gothic', 'Noto Sans KR';
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  height: 100%;
  background: var(--bg);
  overflow: hidden;
}

body {
  font-family: 'Archivo', var(--kr), sans-serif;
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}

.stage {
  position: absolute;
  top: 0; left: 0;
  width: 1920px;
  height: 1080px;
  transform-origin: top left;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  overflow: hidden;
}

/* ============================================================
   상단 바
   ============================================================ */

.topbar {
  height: 96px;
  flex: none;
  display: flex;
  align-items: stretch;
  border-bottom: 2px solid var(--line);
  background: var(--panel-2);
}

.brand {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 0 40px;
  border-right: 1px solid var(--line);
}

/* 회사 로고 (SEARED KOREA) — 모든 화면 좌측 상단 상시 노출 */
.brand-logo {
  width: auto;
  height: 54px;
  flex: none;
  display: block;
}

.brand-title {
  font-family: 'Oswald', var(--kr), sans-serif;
  font-weight: 700;
  font-size: 30px;
  letter-spacing: 2px;
  text-transform: uppercase;
  line-height: 1;
}
.brand-title span { color: var(--red); }
.brand-title em {
  font-style: normal;
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 1.5px;
  color: var(--muted);
}

.brand-sub {
  font-family: 'Oswald', var(--kr), sans-serif;
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 4px;
  color: var(--muted);
  text-transform: uppercase;
  margin-top: 2px;
}

.clock {
  flex: none;
  display: flex;
  align-items: center;
  gap: 12px;
}
.clock-label {
  font-family: 'Oswald', var(--kr), sans-serif;
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 3px;
  color: var(--muted);
  text-transform: uppercase;
}
.clock-value {
  font-family: 'Chakra Petch', monospace;
  font-weight: 700;
  font-size: 44px;
  letter-spacing: 2px;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.topbar-right {
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 0 32px;
  border-left: 1px solid var(--line);
  flex: none;
}
.count-box { text-align: right; }
.count-label {
  font-family: 'Oswald', var(--kr), sans-serif;
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 3px;
  color: var(--muted);
  text-transform: uppercase;
}
.count-value {
  font-family: 'Chakra Petch', monospace;
  font-weight: 700;
  font-size: 26px;
  line-height: 1.1;
}
.count-value em { font-style: normal; font-size: 15px; color: var(--muted); }

.status-pill {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 18px;
  background: rgba(107, 107, 112, .12);
  border: 1px solid var(--line-3);
  transition: background .3s, border-color .3s;
}
.status-dot {
  width: 11px; height: 11px;
  border-radius: 50%;
  background: var(--muted);
}
.status-text {
  font-family: 'Oswald', var(--kr), sans-serif;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--mid);
}

/* 진행중 */
.status-pill.is-running {
  background: rgba(236, 11, 43, .14);
  border-color: var(--red);
}
.status-pill.is-running .status-dot {
  background: var(--red);
  animation: pulseDot 1.1s ease-in-out infinite;
}
.status-pill.is-running .status-text { color: var(--red-soft); }

/* 완료 */
.status-pill.is-done {
  background: rgba(255, 255, 255, .08);
  border-color: var(--dim);
}
.status-pill.is-done .status-dot { background: var(--text); }
.status-pill.is-done .status-text { color: var(--text); }

/* ============================================================
   레인 그리드
   ============================================================ */

.lanes {
  flex: 1;
  min-height: 0;
  padding: 20px;
  position: relative;
}

.lane {
  position: absolute;
  left: 20px;
  right: 20px;
  display: flex;
  align-items: stretch;
  background: var(--panel);
  border: 1px solid var(--line-2);
  overflow: hidden;
  /* 레인 위치는 LANE 번호 순으로 고정 — 순위가 바뀌어도 행이 움직이지 않는다 */
  transition: border-color .3s, box-shadow .3s;
}

.lane.is-entering { animation: laneIn .45s ease both; }

/* 좌측 액센트 바 */
.lane-accent {
  width: 6px;
  flex: none;
  background: #26262a;
  transition: background .3s;
}
.lane.state-live .lane-accent {
  background: linear-gradient(180deg, var(--red) 0%, #7c0617 50%, var(--red) 100%);
  background-size: 100% 200%;
  animation: accentFlow 1.4s linear infinite;
}
.lane.state-finish .lane-accent { background: var(--red); }

/* 선두 강조 */
.lane.is-leader {
  border-color: rgba(236, 11, 43, .55);
  box-shadow: inset 0 0 0 1px rgba(236, 11, 43, .18);
}

/* 완주 */
.lane.state-finish { border-color: rgba(236, 11, 43, .4); }
.lane.just-finished { animation: finishFlash .9s ease-out; }

/* 스테이션 이동 중 */
.lane.state-station { border-color: rgba(255, 179, 0, .45); }
.lane.state-station .lane-accent {
  background: var(--amber);
  animation: stationAccent 1.2s ease-in-out infinite;
}
/* 거리가 누적되지 않는 상태임을 셰이더 정지로 표현 */
.lane.state-station .bar-fill {
  animation-play-state: paused;
  filter: saturate(.55) brightness(.85);
}
.lane.just-station { animation: stationFlash .9s ease-out; }
.lane.just-resumed { animation: resumeFlash .8s ease-out; }

/* --- 좌측 ID 블록 --- */
.lane-id {
  width: var(--w-id);
  flex: none;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 0 30px;
  border-right: 1px solid var(--line);
}
.lane-num { text-align: center; min-width: 60px; }
.lane-num-tag {
  font-family: 'Oswald', var(--kr), sans-serif;
  font-size: 10px;
  letter-spacing: 2px;
  color: var(--muted);
  text-transform: uppercase;
}
.lane-num-value {
  font-family: 'Chakra Petch', monospace;
  font-weight: 700;
  font-size: var(--f-num);
  line-height: 1;
  color: var(--dimmer);
  transition: color .3s;
}
.lane-num-value.rank-pop { animation: rankPop .5s ease-out; }

.lane-name-wrap { min-width: 0; flex: 1; }
.lane-name {
  font-family: 'Oswald', var(--kr), sans-serif;
  font-weight: 600;
  font-size: var(--f-name);
  letter-spacing: .5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: text;
  transition: color .2s;
}
.lane-name:hover { color: var(--red-soft); }
.lane-name-input {
  width: 100%;
  background: #050506;
  border: 1.5px solid var(--red);
  color: var(--text);
  font-family: 'Oswald', var(--kr), sans-serif;
  font-weight: 600;
  font-size: var(--f-name);
  padding: 2px 8px;
  outline: none;
}
.lane-machine {
  font-family: 'Oswald', var(--kr), sans-serif;
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 2px;
  color: var(--muted);
  text-transform: uppercase;
}

/* --- 중앙 패널 --- */
.lane-body {
  flex: 1;
  display: flex;
  align-items: center;
  padding: 0 34px;
  min-width: 0;
}
.panel { width: 100%; display: none; }
.lane.state-ready   .panel-ready  { display: block; }
.lane.state-live    .panel-run    { display: block; }
.lane.state-station .panel-run    { display: block; }
.lane.state-finish  .panel-finish { display: block; }

/* 주행 ↔ 스테이션은 진행 게이지를 공유하고 좌측 블록만 교체된다 */
.station-block { display: none; }
.lane.state-station .speed-block { display: none; }
.lane.state-station .station-block { display: block; }

.label-cap {
  font-family: 'Oswald', var(--kr), sans-serif;
  font-size: 12px;
  letter-spacing: 3px;
  color: var(--muted);
  text-transform: uppercase;
  margin-bottom: 2px;
}

/* 준비 패널 */
.panel-ready .row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}
.target-value {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.target-value b {
  font-family: 'Chakra Petch', monospace;
  font-weight: 700;
  font-size: var(--f-target);
  line-height: .9;
  font-variant-numeric: tabular-nums;
}
.target-value i {
  font-style: normal;
  font-family: 'Oswald', var(--kr), sans-serif;
  font-weight: 500;
  font-size: 20px;
  color: var(--muted);
}

.ready-badge {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 26px;
  background: rgba(107, 107, 112, .1);
  border: 1.5px solid var(--line-3);
  cursor: pointer;
  transition: background .25s, border-color .25s;
}
.ready-badge .dot {
  width: 10px; height: 10px;
  flex: none;
  border-radius: 50%;
  background: var(--muted);
}
.ready-badge .ready-label {
  font-family: 'Oswald', var(--kr), sans-serif;
  font-weight: 600;
  font-size: 18px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--mid);
}
.ready-badge.is-ready {
  background: rgba(236, 11, 43, .14);
  border-color: var(--red);
}
.ready-badge.is-ready .dot {
  background: var(--red);
  animation: pulseDot 1.6s ease-in-out infinite;
}
.ready-badge.is-ready .ready-label { color: var(--red-soft); }

/* 주행 패널 */
.panel-run .row {
  display: flex;
  align-items: center;
  gap: 44px;
}
.speed-block { width: var(--w-speed); flex: none; }
.speed-value { display: flex; align-items: baseline; gap: 8px; }
.speed-value b {
  font-family: 'Chakra Petch', monospace;
  font-weight: 700;
  font-size: var(--f-speed);
  line-height: .85;
  font-variant-numeric: tabular-nums;
  color: #fff;
}
.speed-value i {
  font-style: normal;
  font-family: 'Oswald', var(--kr), sans-serif;
  font-weight: 500;
  font-size: 20px;
  color: var(--red);
}
.pace-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-top: 4px;
}
.pace-row .cap {
  font-family: 'Oswald', var(--kr), sans-serif;
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--muted);
  text-transform: uppercase;
  width: 56px;
}
.pace-row b {
  font-family: 'Chakra Petch', monospace;
  font-weight: 600;
  font-size: 16px;
  font-variant-numeric: tabular-nums;
  color: var(--mid);
}
.pace-row i {
  font-style: normal;
  font-family: 'Oswald', var(--kr), sans-serif;
  font-size: 11px;
  color: var(--muted);
}

/* 스테이션 (NEXT STATION) */
.station-block {
  width: var(--w-speed);
  flex: none;
}
.station-title {
  font-family: 'Oswald', var(--kr), sans-serif;
  font-weight: 700;
  font-size: calc(var(--f-dist) * 0.92);
  letter-spacing: 4px;
  color: var(--amber);
  text-transform: uppercase;
  line-height: 1;
  margin-bottom: 4px;
  animation: stationIn .5s cubic-bezier(.2, .9, .3, 1.3) both;
}
.station-main {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.station-main b {
  font-family: 'Chakra Petch', monospace;
  font-weight: 700;
  font-size: var(--f-speed);
  line-height: .85;
  font-variant-numeric: tabular-nums;
  color: #fff;
  display: inline-block;
}
.station-main b.tick { animation: stationTick .45s cubic-bezier(.2, .8, .3, 1) both; }
.station-main i {
  font-style: normal;
  font-family: 'Oswald', var(--kr), sans-serif;
  font-weight: 500;
  font-size: 20px;
  color: var(--amber);
}
.station-sub {
  font-family: 'Oswald', var(--kr), sans-serif;
  font-size: 12px;
  letter-spacing: 1px;
  color: var(--mid);
  text-transform: uppercase;
  margin-top: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;   /* 레인 수가 많아 폭이 좁아져도 옆 블록을 침범하지 않도록 */
}

/* 잠금 해제 — 달리면 자동 시작 */
.station-block.is-ready .station-title { color: #2ecc71; }
.station-block.is-ready .station-main b {
  color: #2ecc71;
  letter-spacing: 6px;
  animation: goPulse 1s ease-in-out infinite;
}
.station-block.is-ready .station-sub { color: #2ecc71; }

.progress-block { flex: 1; min-width: 0; }
.progress-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 8px;
  gap: 16px;
}
.dist-text {
  font-family: 'Chakra Petch', monospace;
  font-weight: 700;
  font-size: var(--f-dist);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.dist-text em {
  font-style: normal;
  font-size: 15px;
  color: var(--muted);
  font-weight: 500;
}
.seg-text {
  font-family: 'Oswald', var(--kr), sans-serif;
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 1.5px;
  color: var(--mid);
  text-transform: uppercase;
  white-space: nowrap;
}
.seg-text b { color: #fff; font-weight: 600; }
.seg-text.seg-hit { animation: segHit .8s ease-out; }
.pct-text {
  font-family: 'Chakra Petch', monospace;
  font-weight: 600;
  font-size: var(--f-dist);
  color: var(--red);
  font-variant-numeric: tabular-nums;
}

.bar {
  height: 14px;
  background: var(--line);
  position: relative;
  overflow: hidden;
}
.bar-fill {
  position: absolute;
  top: 0; left: 0;
  height: 100%;
  width: 0;
  background: var(--red);
  background-image: linear-gradient(45deg,
    rgba(255, 255, 255, .18) 25%, transparent 25%,
    transparent 50%, rgba(255, 255, 255, .18) 50%,
    rgba(255, 255, 255, .18) 75%, transparent 75%);
  background-size: 40px 40px;
  animation: barShimmer .6s linear infinite;
  transition: width .12s linear;
}
.bar-tick {
  position: absolute;
  top: 0;
  height: 100%;
  width: 2px;
  background: var(--bg);
}
.bar-tick.tick-hit { animation: tickHit .8s ease-out; }

/* 완주 패널 */
.panel-finish .row {
  display: flex;
  align-items: center;
  gap: 32px;
}
.finish-word {
  font-family: 'Oswald', var(--kr), sans-serif;
  font-weight: 700;
  font-size: var(--f-finish);
  letter-spacing: 6px;
  color: var(--red);
  text-transform: uppercase;
  line-height: 1;
  animation: finishWord .6s cubic-bezier(.2, .9, .3, 1.3) both;
}
.finish-time {
  display: flex;
  align-items: baseline;
  gap: 14px;
}
.finish-time b {
  font-family: 'Chakra Petch', monospace;
  font-weight: 700;
  font-size: var(--f-ftime);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.finish-time i {
  font-style: normal;
  font-family: 'Oswald', var(--kr), sans-serif;
  font-size: 14px;
  letter-spacing: 2px;
  color: var(--muted);
}

/* --- 우측 소요시간 --- */
.lane-time {
  width: var(--w-time);
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  padding: 0 32px;
  border-left: 1px solid var(--line);
}
.lane-time-label {
  font-family: 'Oswald', var(--kr), sans-serif;
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--muted);
  text-transform: uppercase;
}
.lane-time-value {
  font-family: 'Chakra Petch', monospace;
  font-weight: 600;
  font-size: var(--f-time);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.lane.state-finish .lane-time-value { color: var(--red); }

/* 센서 미연결 표시 */
.lane.no-signal .lane-machine::after {
  content: ' · 센서 대기';
  color: var(--red);
}

/* ============================================================
   하단 컨트롤
   ============================================================ */

.controls {
  height: 84px;
  flex: none;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 40px;
  background: var(--panel-2);
  border-top: 2px solid var(--line);
}

.btn {
  font-family: 'Oswald', var(--kr), sans-serif;
  font-weight: 600;
  font-size: 18px;
  letter-spacing: 2px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .2s, border-color .2s, color .2s;
}
.btn-primary {
  color: #fff;
  background: var(--red);
  border: none;
  padding: 14px 40px;
}
.btn-primary:hover { background: var(--red-hot); }
.btn-primary.is-paused { background: #7c0617; }
.btn-ghost {
  color: var(--text);
  background: transparent;
  border: 1.5px solid var(--line-3);
  padding: 14px 32px;
}
.btn-ghost:hover { border-color: var(--muted); }

/* 경기 진행 중의 '리셋' → '경기종료' (되돌릴 수 없는 조작이라 붉게 표시) */
.btn.is-endgame {
  color: var(--red-soft);
  border-color: #5a1420;
}
.btn.is-endgame:hover {
  border-color: var(--red);
  background: rgba(236, 11, 43, .1);
}

.divider {
  width: 1px;
  height: 40px;
  background: var(--line);
  margin: 0 8px;
}

.field {
  display: flex;
  align-items: center;
  gap: 8px;
}
.field-label {
  font-family: 'Oswald', var(--kr), sans-serif;
  font-size: 13px;
  letter-spacing: 2px;
  color: var(--muted);
  text-transform: uppercase;
}
.field-unit {
  font-family: 'Oswald', var(--kr), sans-serif;
  font-size: 13px;
  letter-spacing: 2px;
  color: var(--muted);
}
.field input {
  width: 92px;
  height: 48px;
  background: var(--panel);
  border: 1.5px solid var(--line-3);
  color: var(--text);
  font-family: 'Chakra Petch', monospace;
  font-weight: 700;
  font-size: 18px;
  text-align: center;
  outline: none;
  transition: border-color .2s;
}
.field input:focus { border-color: var(--red); }
.field input:disabled { opacity: .4; cursor: not-allowed; }

.controls-spacer { flex: 1; }

.sensor-badge {
  font-family: 'Oswald', var(--kr), sans-serif;
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 8px 16px;
  margin-right: 16px;
  border: 1.5px solid var(--line-3);
  color: var(--mid);
  transition: color .3s, border-color .3s, background .3s;
}
.sensor-badge.is-full {
  color: #2ecc71;
  border-color: rgba(46, 204, 113, .55);
  background: rgba(46, 204, 113, .08);
}
.sensor-badge.is-partial {
  color: var(--red-soft);
  border-color: var(--red);
  background: rgba(236, 11, 43, .1);
}
.sensor-badge.is-none {
  color: var(--muted);
  border-color: var(--line-3);
}

.conn {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-right: 20px;
}
.conn-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--dim);
  transition: background .3s;
}
.conn.is-online .conn-dot {
  background: #2ecc71;
  box-shadow: 0 0 8px rgba(46, 204, 113, .8);
}
.conn.is-offline .conn-dot {
  background: var(--red);
  animation: pulseDot .8s ease-in-out infinite;
}
.conn-text {
  font-family: 'Oswald', var(--kr), sans-serif;
  font-size: 12px;
  letter-spacing: 2px;
  color: var(--muted);
  text-transform: uppercase;
}

.brandmark {
  font-family: 'Oswald', var(--kr), sans-serif;
  font-size: 12px;
  letter-spacing: 2px;
  color: var(--dim);
  text-transform: uppercase;
}

/* ============================================================
   카운트다운 오버레이
   ============================================================ */

.countdown {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background: rgba(10, 10, 11, .88);
  z-index: 50;
}
.countdown.is-on { display: flex; }
.countdown-ring {
  position: absolute;
  width: 420px;
  height: 420px;
  border: 3px solid rgba(236, 11, 43, .35);
  border-radius: 50%;
  animation: ringPulse 1s ease-out infinite;
}
.countdown-num {
  font-family: 'Oswald', var(--kr), sans-serif;
  font-weight: 700;
  font-size: 280px;
  line-height: 1;
  color: var(--text);
  letter-spacing: 4px;
}
.countdown-num.tick { animation: countTick .9s cubic-bezier(.2, .8, .3, 1) both; }
.countdown-num.go { color: var(--red); font-size: 200px; letter-spacing: 20px; }
.countdown-label {
  font-family: 'Oswald', var(--kr), sans-serif;
  font-weight: 500;
  font-size: 20px;
  letter-spacing: 12px;
  color: var(--muted);
  text-transform: uppercase;
  margin-top: 12px;
}

/* ============================================================
   애니메이션
   ============================================================ */

@keyframes pulseDot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .35; transform: scale(.82); }
}

@keyframes barShimmer {
  0% { background-position: 0 0; }
  100% { background-position: 40px 0; }
}

@keyframes accentFlow {
  0% { background-position: 0 0; }
  100% { background-position: 0 200%; }
}

@keyframes laneIn {
  from { opacity: 0; transform: translateX(-24px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes finishFlash {
  0% { background: rgba(236, 11, 43, .38); }
  100% { background: var(--panel); }
}

@keyframes finishWord {
  from { opacity: 0; transform: scale(.7); letter-spacing: 24px; }
  to { opacity: 1; transform: scale(1); letter-spacing: 6px; }
}

@keyframes rankPop {
  0% { transform: scale(1); }
  35% { transform: scale(1.35); }
  100% { transform: scale(1); }
}

@keyframes segHit {
  0% { color: var(--red); transform: translateX(4px); }
  100% { color: var(--mid); transform: translateX(0); }
}

@keyframes tickHit {
  0% { background: #fff; box-shadow: 0 0 10px #fff; width: 4px; }
  100% { background: var(--bg); box-shadow: none; width: 2px; }
}

@keyframes countTick {
  0% { opacity: 0; transform: scale(2.2); }
  25% { opacity: 1; transform: scale(1); }
  100% { opacity: .85; transform: scale(.94); }
}

@keyframes stationIn {
  from { opacity: 0; transform: translateX(-16px); letter-spacing: 14px; }
  to { opacity: 1; transform: translateX(0); letter-spacing: 4px; }
}

@keyframes stationTick {
  0% { transform: scale(1.45); opacity: .55; }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes goPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .45; transform: scale(.95); }
}

@keyframes stationAccent {
  0%, 100% { opacity: 1; }
  50% { opacity: .3; }
}

@keyframes stationFlash {
  0% { background: rgba(255, 179, 0, .3); }
  100% { background: var(--panel); }
}

@keyframes resumeFlash {
  0% { background: rgba(46, 204, 113, .28); }
  100% { background: var(--panel); }
}

@keyframes ringPulse {
  0% { transform: scale(.7); opacity: 0; }
  40% { opacity: 1; }
  100% { transform: scale(1.25); opacity: 0; }
}

@keyframes podiumGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(236, 11, 43, 0); }
  50% { box-shadow: 0 0 60px 0 rgba(236, 11, 43, .35); }
}

/* ============================================================
   상단 네비 — 서비스 모드 전환 + 뷰 탭
   ============================================================ */

.brand { flex: none; }

.topnav {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: stretch;
  overflow: hidden;
}

/* 서비스 모드 전환 (하이록스 ⇄ 타임트라이얼) */
.mode-switch {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 20px;
  border-right: 1px solid var(--line);
  flex: none;
}
.mode-switch-label {
  font-family: 'Oswald', var(--kr), sans-serif;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--muted);
  text-transform: uppercase;
  padding-right: 6px;
}
.mode-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  padding: 8px 16px;
  background: transparent;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: background .2s, border-color .2s;
}
.mode-btn b {
  font-family: 'Oswald', var(--kr), sans-serif;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 1px;
  color: var(--mid);
  transition: color .2s;
}
.mode-btn i {
  font-style: normal;
  font-family: 'Oswald', var(--kr), sans-serif;
  font-weight: 500;
  font-size: 9px;
  letter-spacing: 1.5px;
  color: var(--dim);
  text-transform: uppercase;
  transition: color .2s;
}
.mode-btn:hover { border-color: var(--line-3); }
.mode-btn.is-active { background: var(--red); border-color: var(--red); }
.mode-btn.is-active b { color: #fff; }
.mode-btn.is-active i { color: rgba(255, 255, 255, .7); }

/* 뷰 탭 (레이스 / 누적 랭킹보드 / 최종순위 공지) */
.tabs {
  display: flex;
  align-items: stretch;
  min-width: 0;
}
.tab {
  position: relative;
  display: flex;
  align-items: center;
  padding: 0 26px;
  background: transparent;
  border: none;
  border-right: 1px solid var(--line);
  cursor: pointer;
  font-family: 'Oswald', var(--kr), sans-serif;
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #8a8a90;
  white-space: nowrap;
  transition: color .2s, background .2s;
}
.tab::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 3px;
  background: transparent;
  transition: background .2s;
}
.tab:hover { color: var(--text); }
.tab.is-active { background: var(--panel); color: #fff; }
.tab.is-active::before { background: var(--red); }

/* ============================================================
   본문 컨테이너 — 레이스 / 랭킹 / 포디움 뷰 전환
   ============================================================ */

.stage-body {
  flex: 1;
  min-height: 0;
  position: relative;
  display: flex;
  flex-direction: column;
}

.view-ranking,
.view-podium {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  background: var(--bg);
}
.stage.is-view-ranking .view-ranking { display: flex; }
.stage.is-view-podium  .view-podium  { display: flex; }
/* 레이스 뷰가 아닐 때 레인 숨김 (특이도 높게 잡아 타임트라이얼 grid 규칙을 확실히 덮는다) */
.stage.is-view-ranking .stage-body .lanes,
.stage.is-view-podium  .stage-body .lanes { display: none; }

/* ============================================================
   타임트라이얼 — 세로 열 카드 (왼쪽부터 M01·M02…)
   ============================================================ */

.stage.mode-timetrial .lanes {
  display: grid;
  grid-template-columns: var(--tt-cols, repeat(4, 1fr));
  grid-template-rows: 1fr;
  gap: 16px;
  align-items: stretch;
}

.tlane {
  position: relative;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--line-2);
  overflow: hidden;
}
.tlane.is-entering { animation: laneIn .45s ease both; }
.tlane.is-leader {
  border-color: rgba(236, 11, 43, .55);
  box-shadow: inset 0 0 0 1px rgba(236, 11, 43, .18);
}
.tlane.state-finish { border-color: rgba(236, 11, 43, .4); }
.tlane.just-finished { animation: finishFlash .9s ease-out; }

.tlane-accent {
  height: 6px;
  flex: none;
  background: #26262a;
  transition: background .3s;
}
.tlane.state-live .tlane-accent,
.tlane.state-finish .tlane-accent { background: var(--red); }

/* 상단: 순위/이름/레인 */
.tlane-head {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 18px 14px 16px;
  border-bottom: 1px solid var(--line);
}
.tlane-tag {
  font-family: 'Oswald', var(--kr), sans-serif;
  font-size: 15px;
  letter-spacing: 2px;
  color: var(--muted);
  text-transform: uppercase;
}
.tlane-num {
  font-family: 'Chakra Petch', monospace;
  font-weight: 700;
  font-size: var(--tt-num, 50px);
  line-height: .9;
  color: var(--dimmer);
  transition: color .3s;
}
.tlane-num.rank-pop { animation: rankPop .5s ease-out; }
.tlane-name {
  font-family: 'Oswald', var(--kr), sans-serif;
  font-weight: 600;
  font-size: var(--tt-name, 40px);
  letter-spacing: .5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  text-align: center;
  cursor: text;
  transition: color .2s;
}
.tlane-name:hover { color: var(--red-soft); }
.tlane-name-input {
  width: 100%;
  background: #050506;
  border: 1.5px solid var(--red);
  color: var(--text);
  font-family: 'Oswald', var(--kr), sans-serif;
  font-weight: 600;
  font-size: var(--tt-name, 40px);
  text-align: center;
  padding: 2px 6px;
  outline: none;
}
.tlane-machine {
  font-family: 'Oswald', var(--kr), sans-serif;
  font-weight: 400;
  font-size: 18px;
  letter-spacing: 2px;
  color: var(--muted);
  text-transform: uppercase;
}
.tlane.no-signal .tlane-machine::after { content: ' · 센서 대기'; color: var(--red); }

/* 중앙: 준비 / 주행 / 완주 */
.tlane-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px 14px;
  gap: 12px;
}
.tpanel { display: none; width: 100%; flex-direction: column; align-items: center; }
.tlane.state-ready  .tpanel-ready  { display: flex; }
.tlane.state-live   .tpanel-live   { display: flex; }
.tlane.state-finish .tpanel-finish { display: flex; }

.tpanel-ready { gap: 20px; }
.tt-target-cap {
  font-family: 'Oswald', var(--kr), sans-serif;
  font-size: 18px;
  letter-spacing: 3px;
  color: var(--muted);
  text-transform: uppercase;
  margin-bottom: 4px;
  text-align: center;
}
.tt-target {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
}
.tt-target b {
  font-family: 'Chakra Petch', monospace;
  font-weight: 700;
  font-size: var(--tt-target, 64px);
  line-height: .9;
  font-variant-numeric: tabular-nums;
}
.tt-target i {
  font-style: normal;
  font-family: 'Oswald', var(--kr), sans-serif;
  font-weight: 500;
  font-size: 16px;
  color: var(--muted);
}
.tt-ready-badge {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 22px;
  background: rgba(107, 107, 112, .1);
  border: 1.5px solid var(--line-3);
  cursor: pointer;
  transition: background .25s, border-color .25s;
}
.tt-ready-badge .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--muted); }
.tt-ready-badge b {
  font-family: 'Oswald', var(--kr), sans-serif;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--mid);
}
.tt-ready-badge.is-ready { background: rgba(236, 11, 43, .14); border-color: var(--red); }
.tt-ready-badge.is-ready .dot { background: var(--red); animation: pulseDot 1.6s ease-in-out infinite; }
.tt-ready-badge.is-ready b { color: var(--red-soft); }

.tpanel-live { justify-content: space-between; flex: 1; gap: 14px; }
.tt-live-top {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.tt-speed-cap {
  font-family: 'Oswald', var(--kr), sans-serif;
  font-size: 18px;
  letter-spacing: 3px;
  color: var(--muted);
  text-transform: uppercase;
  margin-bottom: 2px;
}
.tt-speed {
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.tt-speed b {
  font-family: 'Chakra Petch', monospace;
  font-weight: 700;
  font-size: var(--tt-speed, 120px);
  line-height: .82;
  font-variant-numeric: tabular-nums;
  color: #fff;
}
.tt-speed i {
  font-style: normal;
  font-family: 'Oswald', var(--kr), sans-serif;
  font-weight: 500;
  font-size: 15px;
  color: var(--red);
}
.tt-pace {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 8px;
}
.tt-pace .cap {
  font-family: 'Oswald', var(--kr), sans-serif;
  font-size: 15px;
  letter-spacing: 2px;
  color: var(--muted);
  text-transform: uppercase;
}
.tt-pace b {
  font-family: 'Chakra Petch', monospace;
  font-weight: 600;
  font-size: var(--tt-pace, 42px);
  font-variant-numeric: tabular-nums;
  color: var(--mid);
}
.tt-pace i { font-style: normal; font-family: 'Oswald', var(--kr), sans-serif; font-size: 15px; color: var(--muted); }

.tt-progress { width: 100%; }
.tt-progress-head { display: flex; justify-content: flex-end; margin-bottom: 6px; }
.tt-pct {
  font-family: 'Chakra Petch', monospace;
  font-weight: 600;
  font-size: var(--tt-dist, 30px);
  color: var(--red);
  font-variant-numeric: tabular-nums;
}
.tt-bar {
  height: 34px;
  background: var(--line);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tt-bar-fill {
  position: absolute;
  top: 0; left: 0;
  height: 100%;
  width: 0;
  background: var(--red);
  background-image: linear-gradient(45deg,
    rgba(255, 255, 255, .18) 25%, transparent 25%,
    transparent 50%, rgba(255, 255, 255, .18) 50%,
    rgba(255, 255, 255, .18) 75%, transparent 75%);
  background-size: 40px 40px;
  animation: barShimmer .6s linear infinite;
  transition: width .12s linear;
}
.tt-bar-text {
  position: relative;
  z-index: 1;
  font-family: 'Chakra Petch', monospace;
  font-weight: 700;
  font-size: var(--tt-dist, 30px);
  font-variant-numeric: tabular-nums;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .7);
}
.tt-bar-text em { font-style: normal; font-weight: 500; }

.tpanel-finish { gap: 12px; text-align: center; }
.tt-finish-word {
  font-family: 'Oswald', var(--kr), sans-serif;
  font-weight: 700;
  font-size: var(--tt-finish, 54px);
  letter-spacing: 4px;
  color: var(--red);
  text-transform: uppercase;
  line-height: 1;
  animation: finishWord .6s cubic-bezier(.2, .9, .3, 1.3) both;
}
.tt-finish-time {
  font-family: 'Chakra Petch', monospace;
  font-weight: 700;
  font-size: var(--tt-ftime, 48px);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.tt-finish-sub {
  font-family: 'Oswald', var(--kr), sans-serif;
  font-size: 12px;
  letter-spacing: 2px;
  color: var(--muted);
  text-transform: uppercase;
}

/* 하단: 소요시간 */
.tlane-time {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 12px;
  border-top: 1px solid var(--line);
}
.tlane-time-cap {
  font-family: 'Oswald', var(--kr), sans-serif;
  font-size: 15px;
  letter-spacing: 2px;
  color: var(--muted);
  text-transform: uppercase;
}
.tlane-time-val {
  font-family: 'Chakra Petch', monospace;
  font-weight: 600;
  font-size: var(--tt-time, 40px);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.tlane.state-finish .tlane-time-val { color: var(--red); }

/* ============================================================
   누적 랭킹보드
   ============================================================ */

.view-ranking { padding: 32px 60px; }
.rank-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 24px;
  flex: none;
}
.rank-title {
  font-family: 'Oswald', var(--kr), sans-serif;
  font-weight: 700;
  font-size: 40px;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.rank-sub {
  font-family: 'Oswald', var(--kr), sans-serif;
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 3px;
  color: var(--muted);
  text-transform: uppercase;
}
.rank-colhead {
  display: flex;
  align-items: center;
  padding: 0 26px 14px;
  font-family: 'Oswald', var(--kr), sans-serif;
  font-size: 14px;
  letter-spacing: 2px;
  color: var(--muted);
  text-transform: uppercase;
  border-bottom: 1px solid var(--line);
  flex: none;
}
.rank-colhead .rc-rank { width: 110px; }
.rank-colhead .rc-name { flex: 1; }
.rank-colhead .rc-best { width: 260px; text-align: right; }
.rank-colhead .rc-pace { width: 200px; text-align: right; }

.rank-rows { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.rank-row {
  flex: 1;
  display: flex;
  align-items: center;
  padding: 0 26px;
  border-bottom: 1px solid #141417;
  min-height: 0;
}
.rank-row:nth-child(odd)  { background: var(--panel); }
.rank-row:nth-child(even) { background: #0e0e10; }
.rank-row .rc-rank { width: 110px; display: flex; align-items: center; gap: 14px; }
.rank-row .rc-medal { width: 8px; height: 34px; background: #26262a; flex: none; }
.rank-row .rc-num {
  font-family: 'Chakra Petch', monospace;
  font-weight: 700;
  font-size: 30px;
  font-variant-numeric: tabular-nums;
}
.rank-row .rc-name {
  flex: 1;
  font-family: 'Oswald', var(--kr), sans-serif;
  font-weight: 600;
  font-size: 26px;
  letter-spacing: .5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rank-row .rc-best {
  width: 260px;
  text-align: right;
  font-family: 'Chakra Petch', monospace;
  font-weight: 700;
  font-size: 26px;
  font-variant-numeric: tabular-nums;
}
.rank-row .rc-pace {
  width: 200px;
  text-align: right;
  font-family: 'Chakra Petch', monospace;
  font-weight: 500;
  font-size: 22px;
  font-variant-numeric: tabular-nums;
  color: var(--mid);
}
.rank-row .rc-pace em { font-style: normal; font-size: 14px; color: var(--muted); }

.rank-empty {
  display: none;
  flex: 1;
  align-items: center;
  justify-content: center;
  font-family: 'Oswald', var(--kr), sans-serif;
  font-size: 20px;
  letter-spacing: 2px;
  color: var(--muted);
  text-transform: uppercase;
}
.view-ranking.is-empty .rank-colhead,
.view-ranking.is-empty .rank-rows { display: none; }
.view-ranking.is-empty .rank-empty { display: flex; }

/* ============================================================
   최종순위 공지 (포디움)
   ============================================================ */

.view-podium {
  align-items: center;
  justify-content: flex-start;
  padding: 36px 60px 0;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 50% 8%, rgba(236, 11, 43, .14) 0%, rgba(236, 11, 43, .03) 34%, transparent 60%),
    var(--bg);
}
.podium-glow {
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 520px; height: 100%;
  background: linear-gradient(180deg, rgba(236, 11, 43, .10) 0%, transparent 55%);
  pointer-events: none;
}
.podium-head { text-align: center; z-index: 1; flex: none; }
.podium-eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  font-family: 'Oswald', var(--kr), sans-serif;
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 7px;
  color: var(--red);
  text-transform: uppercase;
}
.podium-eyebrow i { width: 46px; height: 1px; background: linear-gradient(90deg, transparent, var(--red)); }
.podium-eyebrow i:last-child { background: linear-gradient(270deg, transparent, var(--red)); }
.podium-title {
  font-family: 'Oswald', var(--kr), sans-serif;
  font-weight: 700;
  font-size: 60px;
  letter-spacing: 8px;
  text-transform: uppercase;
  margin-top: 8px;
  line-height: 1;
}
.podium-subtitle {
  font-family: 'Oswald', var(--kr), sans-serif;
  font-weight: 500;
  font-size: 17px;
  letter-spacing: 5px;
  color: #8a8a90;
  text-transform: uppercase;
  margin-top: 6px;
}

.podium-stage {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 30px;
  margin-top: 20px;
  padding-bottom: 56px;
  z-index: 1;
}
.podium-col { display: flex; flex-direction: column; align-items: center; }
.podium-crown { width: 5px; height: 16px; margin-bottom: 14px; transform: skewX(-12deg); background: transparent; }
.podium-disc {
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 6px var(--bg), 0 0 0 7px currentColor;
}
.podium-disc span {
  font-family: 'Chakra Petch', monospace;
  font-weight: 700;
  line-height: 1;
}
.podium-place {
  font-family: 'Oswald', var(--kr), sans-serif;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 4px;
  text-transform: uppercase;
  margin-top: 20px;
}
.podium-place-sub {
  font-family: 'Oswald', var(--kr), sans-serif;
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 3px;
  color: var(--muted);
  text-transform: uppercase;
  margin-top: 2px;
}
.podium-name {
  font-family: 'Oswald', var(--kr), sans-serif;
  font-weight: 600;
  letter-spacing: .5px;
  margin: 14px 0 8px;
  text-align: center;
  white-space: nowrap;
}
.podium-time { display: flex; align-items: baseline; gap: 8px; }
.podium-time b {
  font-family: 'Chakra Petch', monospace;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.podium-time span {
  font-family: 'Oswald', var(--kr), sans-serif;
  font-size: 12px;
  letter-spacing: 2px;
  color: var(--muted);
  text-transform: uppercase;
}
.podium-pace {
  font-family: 'Oswald', var(--kr), sans-serif;
  font-size: 12px;
  letter-spacing: 2px;
  color: var(--muted);
  text-transform: uppercase;
  margin-top: 4px;
}
.podium-plinth {
  width: 100%;
  margin-top: 22px;
  border: 1px solid var(--line-2);
  border-bottom: 3px solid currentColor;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.podium-plinth::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .14), transparent);
}
.podium-plinth span {
  font-family: 'Chakra Petch', monospace;
  font-weight: 700;
  color: rgba(255, 255, 255, .05);
  line-height: 1;
}
.podium-foot {
  position: absolute;
  bottom: 22px; left: 50%;
  transform: translateX(-50%);
  font-family: 'Oswald', var(--kr), sans-serif;
  font-size: 15px;
  letter-spacing: 3px;
  color: var(--muted);
  text-transform: uppercase;
  z-index: 1;
}
.podium-empty {
  display: none;
  position: absolute;
  inset: 0;
  align-items: center;
  justify-content: center;
  font-family: 'Oswald', var(--kr), sans-serif;
  font-size: 22px;
  letter-spacing: 2px;
  color: var(--muted);
  text-transform: uppercase;
}
.view-podium.is-empty .podium-stage,
.view-podium.is-empty .podium-foot { visibility: hidden; }
.view-podium.is-empty .podium-empty { display: flex; }

/* ============================================================
   하단 컨트롤 — 추가 버튼
   ============================================================ */

.btn-danger {
  color: var(--red-soft);
  background: transparent;
  border: 1.5px solid #5a1420;
  padding: 14px 26px;
}
.btn-danger:hover { border-color: var(--red); background: rgba(236, 11, 43, .1); }
.btn-light {
  color: #0a0a0b;
  background: var(--text);
  border: 1.5px solid var(--text);
  padding: 14px 26px;
}
.btn-light:hover { background: var(--red); border-color: var(--red); color: #fff; }

/* ============================================================
   대시보드(방송) 탭 — 조작부 없이 경기 화면만
   조작 탭에서 '대시보드' 버튼 → ?dashboard=1 새 탭으로 열린다.
   ============================================================ */

/* 우측 상단 — 방송 탭에서는 이 영역이 비어 있어 레인/기록을 가리지 않는다 */
.dash-exit {
  position: absolute;
  top: 26px; right: 24px;
  display: none;
  align-items: center;
  gap: 9px;
  padding: 10px 18px;
  background: rgba(13, 13, 15, .9);
  border: 1.5px solid var(--line-3);
  cursor: pointer;
  z-index: 60;
  font-family: 'Oswald', var(--kr), sans-serif;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 2px;
  color: var(--text);
  text-transform: uppercase;
  /* 방송 화면을 가리지 않도록 마우스를 움직일 때만 잠깐 나타난다 */
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s ease;
}
.stage.is-dashboard.show-hud .dash-exit { opacity: 1; pointer-events: auto; }
.dash-exit:hover { border-color: var(--red); }
.dash-exit-bar { width: 9px; height: 9px; background: var(--red); transform: skewX(-12deg); }

/* 방송 탭: 모드전환·뷰탭·하단 컨트롤 전체 제거 → 그만큼 레인이 커진다 */
.stage.is-dashboard .topnav,
.stage.is-dashboard .controls { display: none; }
.stage.is-dashboard .dash-exit { display: flex; }

/* 보기 전용 — 이름/READY 클릭 편집 비활성 */
.stage.is-dashboard .lane-name,
.stage.is-dashboard .ready-badge,
.stage.is-dashboard .tlane-name,
.stage.is-dashboard .tt-ready-badge { pointer-events: none; }
.stage.is-dashboard .lane-name:hover,
.stage.is-dashboard .tlane-name:hover { color: inherit; }

/* 서버 연결이 끊겼을 때만 좌하단에 경고 칩 (JS가 .stage 직속으로 옮겨둔다) */
.stage.is-dashboard > .conn {
  position: absolute;
  bottom: 20px; left: 24px;
  z-index: 60;
  margin: 0;
  padding: 9px 15px;
  background: rgba(13, 13, 15, .92);
  border: 1.5px solid var(--red);
  display: none;
}
.stage.is-dashboard > .conn.is-offline { display: flex; }
.stage.is-dashboard > .conn.is-offline .conn-text { color: var(--red-soft); }

/* ============================================================
   확인 팝업 — 되돌릴 수 없는 조작(서비스 전환 · 경기종료 · 리셋)
   ============================================================ */

.modal {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(6, 6, 7, .82);
  z-index: 80;
}
.modal.is-on { display: flex; animation: modalFade .18s ease-out both; }

.modal-box {
  position: relative;
  width: 720px;
  padding: 44px 48px 40px;
  background: var(--panel);
  border: 1.5px solid var(--line-3);
  box-shadow: 0 40px 120px rgba(0, 0, 0, .7);
  animation: modalPop .22s cubic-bezier(.2, .8, .3, 1) both;
}
.modal-bar {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--red);
}
.modal-eyebrow {
  font-family: 'Oswald', var(--kr), sans-serif;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 5px;
  color: var(--red);
  text-transform: uppercase;
  margin-bottom: 14px;
}
.modal-title {
  font-family: 'Oswald', var(--kr), sans-serif;
  font-weight: 700;
  font-size: 40px;
  line-height: 1.15;
  letter-spacing: 1px;
  color: var(--text);
}
.modal-desc {
  margin-top: 16px;
  font-size: 19px;
  line-height: 1.6;
  color: var(--mid);
  white-space: pre-line;   /* 줄바꿈(\n)을 그대로 살린다 */
}
.modal-desc:empty { display: none; }
.modal-actions {
  margin-top: 36px;
  display: flex;
  justify-content: flex-end;
  gap: 14px;
}
.modal-actions .btn { font-size: 19px; }
.modal-actions .btn-primary { padding: 15px 52px; }
#modalYes:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; }

@keyframes modalFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes modalPop {
  from { opacity: 0; transform: translateY(18px) scale(.985); }
  to   { opacity: 1; transform: none; }
}

/* ============================================================
   브랜드 표기 (SEARED KOREA)
   - 헤더 좌측 락업(.brand-logo)은 상단 바 섹션에 정의
   - 배경 워터마크: S 심볼만 아주 옅게 → 정보 가독성을 해치지 않는 범위
   - 시상 화면: 상단에 락업 (시상 사진에 로고가 함께 남는다)
   ============================================================ */

.brand-watermark {
  position: absolute;
  inset: 96px 0 0 0;            /* 상단 바 아래 전체 */
  z-index: 5;
  pointer-events: none;
  background: url(../assets/brand/seared-mark-white.png) center center / 560px auto no-repeat;
  opacity: .04;                 /* 세기 조절 지점 — 프로젝터가 어두우면 .06~.08 */
}
/* 시상 화면은 상단 로고가 있어 배경 워터마크까지 겹치지 않게 한다 */
.stage.is-view-podium .brand-watermark { display: none; }

.podium-logo {
  height: 70px;
  width: auto;
  display: block;
  margin: 0 auto 16px;
}

/* ============================================================
   성별 부문 (남/여) — 참가자 지정 + 랭킹·시상 탭
   ============================================================ */

/* --- 레인의 성별 선택 (이름 아래) --- */
.lane-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 3px;
}

.gender-pick {
  display: inline-flex;
  flex: none;
  border: 1px solid var(--line-3);
  overflow: hidden;
}
.gender-pick .gp {
  font-family: 'Oswald', var(--kr), sans-serif;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 1px;
  padding: 3px 9px;
  background: transparent;
  border: none;
  color: var(--muted);
  cursor: pointer;
  transition: background .2s, color .2s;
}
.gender-pick .gp + .gp { border-left: 1px solid var(--line-3); }
.gender-pick .gp:hover { color: var(--text); }
/* 선택된 부문 — 남/여를 색으로 구분해 멀리서도 읽힌다 */
.gender-pick .gp.is-on[data-gender="male"] {
  background: #1a3a6b;
  color: #cfe4ff;
}
.gender-pick .gp.is-on[data-gender="female"] {
  background: #6b1a3f;
  color: #ffd7e8;
}

/* 타임트라이얼 카드는 세로 배치라 여백만 준다 */
.tlane-head .gender-pick { margin-top: 8px; }
.tlane-head .gender-pick .gp { font-size: 14px; padding: 4px 12px; }

/* --- 랭킹보드 / 시상 화면의 부문 탭 --- */
.gender-tabs {
  display: flex;
  flex: none;
  gap: 8px;
}
.gender-tabs .gtab {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Oswald', var(--kr), sans-serif;
  font-weight: 600;
  font-size: 17px;
  letter-spacing: 2px;
  padding: 10px 22px;
  background: transparent;
  border: 1.5px solid var(--line-3);
  color: var(--muted);
  cursor: pointer;
  transition: background .2s, border-color .2s, color .2s;
}
.gender-tabs .gtab:hover { color: var(--text); border-color: var(--muted); }
.gender-tabs .gtab em {
  font-style: normal;
  font-family: 'Chakra Petch', monospace;
  font-size: 14px;
  color: var(--dim);
}
.gender-tabs .gtab.is-active {
  background: rgba(236, 11, 43, .14);
  border-color: var(--red);
  color: var(--text);
}
.gender-tabs .gtab.is-active em { color: var(--red-soft); }

/* 시상 화면: 우측 상단 고정 — 가운데는 1위 컬럼이 올라와 겹친다 */
.gender-tabs.is-podium {
  position: absolute;
  top: 30px;
  right: 44px;
  margin: 0;
  z-index: 4;
}

/* 방송 탭: 부문 표시는 남기고 클릭만 막는다 (조작은 조작 탭에서) */
.stage.is-dashboard .gender-tabs { pointer-events: none; }