/* 디자인: 시안 A "런스루(RUNTHRU)" 중계 그래픽형 — 밤 남색 다크가 기본(라이트 모드 없음).
   방송 그래픽식 비스듬히 잘린 탭(--cut), 판 위쪽 색 띠, 숫자는 좁은 글꼴(Barlow Condensed), 한글은 Pretendard. 원본 docs/mockups/ */
:root {
  color-scheme: dark;
  --bg: #0B1324;            /* 바탕 밤 남색 */
  --surface: #121D36;       /* 판 */
  --card: #121D36;
  --raise: #1A2848;         /* 칩·버튼 바탕 */
  --raise-2: #16223F;
  --field: #0E1830;         /* 입력칸 */
  --ink: #F4F6FA;
  --sub: #A4AFC4;
  --line: #2A3858;
  --accent: #FF5A1F;        /* 브랜드 주황 — 위 글자는 진한 색(약 6.2:1) */
  --on-accent: #0B0D10;
  --accent-ink: #0B0D10;
  --accent-text: #FF7A45;   /* 어두운 판 위 주황 글자 */
  --ahead: #2EE6D6;         /* 앞섬·켜짐 청록 */
  --behind: #FFB020;        /* 늦음 호박 */
  --gel: #FFD23F;           /* 에너지 젤 노랑 (급수 하늘색·오르막 호박과 구별) */
  --up: #FFB020; --down: #38BDF8; --sprint: #FF5A1F; --water: #38BDF8;
  --blue: #38BDF8;
  --bad: #FF6B81;
  --warn-bg: #08101F; --warn-ink: #C9D1E0;
  --panel: rgba(11,19,36,.86);   /* 3D 위 판 */
  --legal-bg: rgba(11,19,36,.88); --legal-ink: #C9D1E0;
  --focus: #2EE6D6;
  --cut: polygon(0 0, 100% 0, calc(100% - 12px) 100%, 0 100%);
  --f-body: "Pretendard Variable", Pretendard, -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
  --f-num: "Barlow Condensed", "Arial Narrow", "Roboto Condensed", "Pretendard Variable", Pretendard, sans-serif;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--f-body);
  line-height: 1.6;
  word-break: keep-all;
  overflow-x: hidden;
}
a { color: var(--accent-text); }
button, input, select, textarea { font: inherit; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.num, .big, .stats dd, .fv, .cd-num, .fin-time, .band-meta, .prof-axis, .nx-d, #speedNow { font-variant-numeric: tabular-nums; }
.ic { width: 20px; height: 20px; flex: none; display: inline-block; vertical-align: -4px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { max-width: 1440px; margin: 0 auto; padding: 0 16px; } /* 27인치(가로 1440px) 기준까지 넓게 */
.notice {
  background: var(--warn-bg); color: var(--warn-ink); border-bottom: 1px solid var(--line);
  font-size: 13px; padding: 8px 16px; text-align: center;
}

/* ── 머리: 로고(R 코스 심볼 + 글자) ── */
.site-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.brand { display: inline-flex; align-items: center; gap: 10px; min-width: 0; color: var(--ink); text-decoration: none; }
.brand .sym { display: block; flex: none; width: 34px; height: 34px; } /* 11/3 로고 B(R 코스) — 남색 정사각 심볼, 글자와 세로 가운데 */
.lg-a-t { display: flex; flex-direction: column; min-width: 0; line-height: 1; }
.lg-a-t b { font-family: var(--f-body); font-weight: 800; font-size: 22px; letter-spacing: -.01em; color: var(--ink); } /* 한글 이름이 주 */
.lg-a-t small { font-family: var(--f-num); font-weight: 700; font-size: 13px; color: var(--sub); letter-spacing: .157em; padding-left: .058em; margin: 3px -.157em 0 0; } /* 영문은 보조 — Barlow Condensed. 간격은 '런스루' 잉크 폭과 양끝이 맞게 잰 값(11/3, 끝 글자 뒤 간격은 margin 으로 상쇄) */
.lg-a-t small i { font-style: normal; color: var(--accent-text); } /* RUN 만 주황 포인트 */
/* 머리줄 이동 버튼: 깎은 주황 면(브리핑→3D 달리기) / 주황 2px 테두리(달리기→브리핑, 출발 버튼과 안 겹치게). 면은 ::before·::after 로 그려 포커스 테두리가 안 잘림.
   대비 — 주황 면 위 진한 글자 6.2:1 · 테두리형 주황 글자 #FF7A45 on #0B1324 약 7:1 · 포커스(청록)는 주황·남색 모두와 구분 */
.head-link { position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: 8px; flex: none; min-height: 44px; padding: 0 28px 0 16px; color: var(--on-accent); font-size: 15px; font-weight: 800; line-height: 1.2; white-space: nowrap; text-decoration: none; }
.head-link::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--accent); clip-path: var(--cut); }
.head-link .ic { width: 18px; height: 18px; vertical-align: 0; }
.head-link .hl-s { display: none; }
.head-link:hover::before { filter: brightness(1.1); }
.head-link.ghost { color: var(--accent-text); }
.head-link.ghost::after { content: ''; position: absolute; inset: 2px; z-index: -1; background: var(--bg); clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 100%, 0 100%); }
.head-link.ghost:hover { color: var(--ink); }
.head-link.ghost:hover::before { filter: none; }
.head-link.ghost:hover::after { background: var(--raise); }
@media (min-width: 400px) { .head-link { font-size: 16px; } }
@media (max-width: 349px) { .head-link { padding: 0 24px 0 12px; } .head-link .hl-l { display: none; } .head-link .hl-s { display: inline; } } /* 320px 급 폰: "3D 달리기" */
.notice-sub { background: var(--raise-2); color: var(--ink); border-bottom: 1px solid var(--line); font-size: 13px; padding: 6px 16px; text-align: center; }

/* ── 대회 바: 머리줄에서 로고 바로 뒤. 휴대폰은 둘째 줄 전체 폭, PC(900+)는 로고 오른쪽. 깎은 모양은 ::before(포커스 테두리가 안 잘리게) ── */
/* 색: 청록 바탕 + 진한 남색 글자(주황은 출발 버튼 색이라 피함). 대비 — 남색 #0B1324 11.8:1 · 보조글 #0B3A44 7.9:1 · D-n 칩(남색 바탕 청록 글자) 11.8:1. 포커스는 흰 테두리(청록과 구분) */
.race-bar { --rb-bg: var(--ahead); --rb-ink: #0B1324; --rb-sub: #0B3A44; position: relative; isolation: isolate; order: 3; flex: 1 0 100%; min-width: 0; min-height: 56px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 6px 28px 6px 12px; border: 0; background: none; color: var(--rb-ink); font: inherit; text-align: left; cursor: pointer; }
.race-bar::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--rb-bg); clip-path: var(--cut); }
.race-bar:hover::before { filter: brightness(.92); }
.race-bar:focus-visible { outline-color: var(--ink); }
.rb-tag { font-size: 12px; font-weight: 800; color: var(--rb-ink); border: 1.5px solid var(--rb-ink); padding: 0 6px; line-height: 1.5; }
.rb-main { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.rb-main b { font-size: 16px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rb-main small { font-size: 13px; color: var(--rb-sub); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rb-dday { font-family: var(--f-num); font-variant-numeric: tabular-nums; font-size: 18px; font-weight: 800; color: var(--ahead); background: var(--rb-ink); padding: 0 10px; line-height: 1.5; white-space: nowrap; }
.rb-dday:empty { padding: 0; background: none; }
.rb-dday.is-today { background: var(--accent); color: var(--on-accent); }
.rb-dday.is-soon, .rb-dday.is-past { font-family: var(--f-body); font-size: 13px; font-weight: 700; color: var(--ink); }
.rb-chev { display: grid; place-items: center; color: var(--rb-ink); }
.rb-chev svg { width: 18px; height: 18px; }
.race-bar[aria-expanded="true"] .rb-chev { transform: rotate(180deg); }
.race-bar[aria-disabled="true"] { --rb-bg: #5FB3AE; cursor: default; } /* 달리는 중 잠김: 흐린 청록(남색 글자 7.6:1) */
.race-bar[aria-disabled="true"] .rb-chev { visibility: hidden; }
@media (min-width: 900px) { .race-bar { order: 0; flex: 0 1 420px; margin: 0 auto 0 8px; min-height: 52px; } }

/* ── 글자·버튼 공통 ── */
.eyebrow { display: inline-block; color: var(--ink); background: var(--raise); padding: 2px 16px 2px 8px; clip-path: var(--cut); font-weight: 700; font-size: 13px; letter-spacing: .02em; }
h1 { font-size: clamp(28px, 6.4vw, 48px); line-height: 1.2; margin: 10px 0 12px; font-weight: 700; letter-spacing: -.01em; }
h2 { font-size: 22px; margin: 0 0 12px; line-height: 1.3; }
h3 { font-size: 17px; margin: 0 0 4px; }
.lead { color: var(--sub); font-size: 16px; margin: 0 0 18px; max-width: 36em; }
.small { font-size: 13px; color: var(--sub); }
/* 버튼: 주황 바탕은 ::before 에 깎은 모양으로 그려 포커스 테두리가 잘리지 않게 */
.btn {
  position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px; padding: 6px 30px 6px 20px; border: 0; background: none; cursor: pointer;
  color: var(--on-accent); font: inherit; font-weight: 800; font-size: 16px; line-height: 1.25; text-decoration: none; text-align: center;
}
.btn::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--accent); clip-path: var(--cut); }
.btn:hover:not(:disabled)::before { filter: brightness(1.08); }
.btn .ic { width: 18px; height: 18px; }
.btn.ghost { color: var(--ink); padding: 6px 20px; }
.btn.ghost::before { background: transparent; clip-path: none; box-shadow: inset 0 0 0 2px var(--line); }
.btn.ghost:hover:not(:disabled)::before { box-shadow: inset 0 0 0 2px var(--sub); filter: none; }
.btn:disabled { opacity: .5; cursor: default; }
.btn.sm { min-height: 44px; font-size: 14px; padding: 4px 24px 4px 14px; }
.btn.ghost.sm { padding: 4px 14px; }
.card { background: var(--surface); border-top: 3px solid var(--line); padding: 20px; margin: 0 0 16px; min-width: 0; }
section { margin: 32px 0; }
section > h2 { display: flex; align-items: center; gap: 10px; }
section > h2::before { content: ''; flex: none; width: 20px; height: 18px; background: var(--accent); clip-path: var(--cut); }
.tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0 0 12px; max-width: 360px; }
.tabs.tabs-many { max-width: 480px; }
@media (min-width: 900px) { .tabs.tabs-many { grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); } }
.tab { position: relative; isolation: isolate; min-height: 44px; padding: 4px 20px 4px 12px; border: 0; background: none; color: var(--sub); font: inherit; font-weight: 800; font-size: 15px; cursor: pointer; }
.tab::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--raise-2); clip-path: var(--cut); }
.tab[aria-selected="true"] { color: var(--bg); }
.tab[aria-selected="true"]::before { background: var(--ink); }
.chip { font: inherit; font-size: 13px; font-weight: 700; border: 0; border-radius: 0; padding: 8px 12px; min-height: 40px; background: var(--raise); color: var(--ink); cursor: pointer; }
.chip.on, .chip[aria-checked="true"], .chip[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
.row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 0 0 12px; }
select, input[type=email], input[type=time], input[type=text], .pace-row input {
  font: inherit; padding: 10px 12px; border-radius: 2px; border: 1px solid var(--line);
  background: var(--field); color: var(--ink); min-width: 0; max-width: 100%;
}
select:hover, input:hover { border-color: var(--sub); }
input[type=email] { flex: 1 1 240px; }
label.check { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; color: var(--sub); }
label.check input { accent-color: var(--accent); width: 18px; height: 18px; margin-top: 3px; flex: none; }
.cta-box { border-top: 4px solid var(--accent); }
.ok { color: var(--ahead); font-weight: 700; }
table { width: 100%; border-collapse: collapse; font-size: 15px; }
th, td { text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { color: var(--sub); font-weight: 600; font-size: 13px; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; font-family: var(--f-num); font-size: 17px; font-weight: 600; white-space: nowrap; }
footer { color: var(--sub); font-size: 13px; padding: 24px 0 48px; border-top: 1px solid var(--line); margin-top: 40px; }
footer p { margin: 0 0 6px; }
footer a { color: var(--ink); }
.hidden { display: none !important; }
.legend { display: flex; gap: 6px 14px; flex-wrap: wrap; font-size: 12px; color: var(--sub); margin: 8px 0 0; padding: 0; list-style: none; }
.lg { display: inline-flex; align-items: center; gap: 5px; }
.lg::before { content: ''; width: 12px; height: 12px; flex: none; }
.lg-up::before { background: var(--up); opacity: .55; } .lg-down::before { background: var(--down); opacity: .55; } .lg-sprint::before { background: var(--sprint); opacity: .55; }
.lg-water::before, .lg-uturn::before { display: none; }
.lg .ic { width: 14px; height: 14px; vertical-align: 0; }
.lg-water .ic { color: var(--water); } .lg-uturn .ic { color: var(--accent-text); }

/* ── 1. 브리핑(index) ── */
body.brief-page { background: radial-gradient(120% 900px at 90% 0, #14244A 0%, rgba(20,36,74,0) 60%) no-repeat var(--bg); }
.brief-hero { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; margin: 24px 0 0; }
.hero-text { min-width: 0; }
.cta-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.cta-row .btn { flex: 1 1 220px; }
.cta-row .btn.ghost { flex: 1 1 160px; }
.cta-note { margin: 10px 0 0; font-size: 13px; color: var(--sub); }
.course-card { min-width: 0; padding: 14px; background: var(--surface); border-top: 4px solid var(--accent); }
.cc-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 12px; font-size: 13px; margin: 0 0 8px; }
.cc-head b { font-family: var(--f-num); font-size: 18px; letter-spacing: .06em; }
.cc-head span { color: var(--sub); }
.map { aspect-ratio: 1000 / 600; min-height: 220px; max-height: 460px; width: 100%; overflow: hidden; border: 1px solid var(--line); }
.prof-brief { margin-top: 12px; }
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 20px 0 0; padding: 0; list-style: none; }
.fact { min-width: 0; padding: 12px; display: flex; flex-direction: column; gap: 2px; background: var(--surface); border-top: 3px solid var(--line); }
.f-hill { border-top-color: var(--up); } .f-uturn { border-top-color: var(--accent); } .f-water { border-top-color: var(--water); } .f-sprint { border-top-color: var(--sprint); }
.fk { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--sub); letter-spacing: .02em; }
.fk .ic { width: 16px; height: 16px; vertical-align: 0; }
.f-hill .fk .ic { color: var(--up); } .f-uturn .fk .ic { color: var(--accent-text); } .f-water .fk .ic { color: var(--water); }
.fv { font-family: var(--f-num); font-size: 26px; line-height: 1.1; font-weight: 800; word-break: keep-all; }
.fv small { font-size: .55em; margin-left: 2px; font-weight: 600; }
.fv-list { font-size: 17px; line-height: 1.3; }
.fd { font-size: 13px; color: var(--sub); word-break: keep-all; }
.seg-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.seg { background: var(--surface); border-top: 3px solid var(--line); padding: 14px 16px; min-width: 0; }
.seg .km { color: var(--accent-text); font-family: var(--f-num); font-weight: 700; font-size: 18px; letter-spacing: .02em; }
.seg p { margin: 4px 0 0; }
.seg p b { color: var(--ink); }
.zone-list { display: grid; gap: 12px; }
.zone { background: var(--surface); border-top: 3px solid var(--line); padding: 12px 14px; }
.zone.z-up { border-top-color: var(--up); } .zone.z-down { border-top-color: var(--down); } .zone.z-build, .zone.z-sprint { border-top-color: var(--sprint); }
.zone .km { font-size: 13px; color: var(--sub); }
.zone p { margin: 4px 0 0; font-size: 15px; }
.gel-box { background: var(--raise-2); padding: 14px 16px; margin: 14px 0 0; }
.gel-box p { margin: 4px 0 0; }

/* ── 맞춤 전략표(브리핑): 입력 · 요약 · km 표 · 버튼. 칩 색은 고도 단면 띠와 같은 뜻(오르막 호박 · 내리막·급수 하늘 · 스퍼트 주황) ── */
#plan { scroll-margin-top: 12px; }
.plan-card { padding: 14px; }
.plan-in { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); gap: 12px; margin: 0 0 6px; }
.plan-in label { display: flex; flex-direction: column; gap: 4px; min-width: 0; font-size: 13px; font-weight: 700; color: var(--sub); }
.plan-in select, .plan-in input { width: 100%; min-width: 0; max-width: 100%; min-height: 44px; font-size: 16px; font-weight: 600; }
.plan-in input.bad { border-color: var(--bad); outline-color: var(--bad); }
.plan-msg { min-height: 20px; margin: 0 0 6px; font-size: 13px; color: var(--bad); }
.plan-msg.ok { color: var(--ahead); }
.plan-style { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 14px; }
.plan-lbl { font-size: 13px; font-weight: 700; color: var(--sub); margin-right: 2px; }
.plan-sum { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0 0 14px; padding: 0; list-style: none; }
.plan-sum .fact { background: var(--raise-2); }
.plan-sum .fv { font-size: 24px; }
.plan-sum .f-pass, .plan-sum .f-gel { grid-column: 1 / -1; }
.plan-sum .f-gel { border-top-color: var(--gel); } .plan-sum .f-gel .fk .ic { color: var(--gel); }
.plan-sum .fv.fv-list { font-size: 20px; line-height: 1.35; }
.plan-sum .ps { display: inline-block; white-space: nowrap; margin-right: 14px; }
.plan-sum .f-slow { border-top-color: var(--up); } .plan-sum .f-slow .fk .ic { color: var(--up); }
.plan-sum .f-fast { border-top-color: var(--down); } .plan-sum .f-fast .fk .ic { color: var(--down); }
.plan-scroll { overflow-x: auto; margin: 0 -2px; }
.plan-t { min-width: 0; }
.plan-t th, .plan-t td { padding: 8px 4px; }
.plan-t th { font-family: var(--f-body); font-size: 12px; }
.plan-t td.num { font-size: 18px; }
.plan-t td.pt-km { font-weight: 800; }
.plan-t tr.five td { border-bottom: 2px solid var(--sub); }
.plan-t tr.five td.pt-cum { color: var(--ink); font-weight: 800; }
.plan-t .cl-sm { display: block; font-size: 12px; font-weight: 600; color: var(--sub); line-height: 1.2; }
.plan-t .pc-clock { display: none; }
.pt-memo { min-width: 0; }
.pn { display: inline-flex; align-items: center; gap: 4px; margin: 0 4px 4px 0; padding: 1px 7px; font-size: 12.5px; font-weight: 700; line-height: 1.5; white-space: nowrap; background: var(--raise); color: var(--ink); }
.pn .ic { width: 13px; height: 13px; vertical-align: 0; }
.pn-up { color: var(--up); background: rgba(255,176,32,.13); }
.pn-down, .pn-water { color: var(--down); background: rgba(56,189,248,.13); }
.pn-gel { color: var(--gel); background: rgba(255,210,63,.13); }
.pn-sprint { color: var(--accent-text); background: rgba(255,90,31,.12); }
.pt-place { display: block; font-size: 12px; line-height: 1.35; color: var(--sub); }
.plan-act { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin: 14px 0 6px; }
.plan-act .btn { min-width: 0; }
.plan-fine { margin: 8px 0 0; }
.gel-box h3 .ic { color: var(--gel); width: 18px; height: 18px; vertical-align: -3px; }
@media (min-width: 640px) {
  .plan-card { padding: 20px; }
  .plan-t .pc-clock { display: table-cell; }
  .plan-t .cl-sm { display: none; }
  .plan-t th, .plan-t td { padding: 8px 8px; }
}
@media (min-width: 900px) {
  .plan-sum { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
  .plan-sum .f-pass { grid-column: auto; }
  .plan-sum .fv { font-size: 30px; }
  .plan-sum .fv.fv-list { font-size: 22px; }
  .plan-act { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); }
}

/* 고도 단면 (브리핑·달리는 중 아래 띠 공용) */
.prof { position: relative; min-width: 0; }
.prof-graph { position: relative; height: var(--pg-h, 110px); }
.prof-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; }
.pz { opacity: .13; }
.pz-up { fill: var(--up); } .pz-down { fill: var(--down); } .pz-sprint, .pz-build { fill: var(--sprint); }
.pz-build { opacity: .07; }
.pa { fill: rgba(244,246,250,.12); }
.pl { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; }
.pa-done { fill: var(--accent); opacity: .4; }
.pl-done { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linejoin: round; }
.prof-call span { position: absolute; top: 2px; transform: translateX(-50%); font-size: 12px; font-weight: 700; line-height: 1.3; white-space: nowrap; padding: 1px 6px; background: var(--bg); color: var(--ink); box-shadow: inset 3px 0 0 var(--accent); }
.prof-call span.pc-start { transform: none; }
.prof-call span.pc-end { transform: translateX(-100%); }
.prof-ticks { position: relative; height: 22px; }
.tk { position: absolute; top: 3px; width: 18px; height: 18px; margin-left: -9px; display: grid; place-items: center; }
.tk .ic { width: 15px; height: 15px; vertical-align: 0; }
.tk-water { color: var(--water); }
.tk-uturn { color: var(--accent-text); }
.tk-gel { color: var(--gel); margin-left: -19px; } .tk-gel .ic { filter: drop-shadow(0 0 1px rgba(0,0,0,.6)); } /* 젤은 급수 0.2km 앞이라 아이콘이 겹쳐서 10px 왼쪽에 둔다 */
.tk-flag { margin-left: 1px; color: var(--ink); } /* 도착은 단면 오른쪽 여백 칸에 (마지막 급수 아이콘과 안 겹치게) */
.prof-axis { position: relative; height: 18px; font-size: 12px; color: var(--sub); font-family: var(--f-num); font-weight: 600; }
.prof-axis span { position: absolute; top: 0; transform: translateX(-50%); }
.prof-axis span:first-child { transform: none; }
.prof-axis .ax-end { transform: translateX(-100%); }

/* ── 같이 달리기 쪽 머리(run) ── */
.room-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; align-items: flex-end; padding: 16px 0 10px; }
.big { font-family: var(--f-num); font-size: 44px; line-height: 1.05; font-weight: 800; margin-top: 6px; }
.stat { display: flex; gap: 6px 18px; flex-wrap: wrap; font-size: 14px; color: var(--sub); }
.stat b { color: var(--ink); font-size: 18px; font-family: var(--f-num); font-weight: 700; }
.room-map { height: 52vh; min-height: 300px; overflow: hidden; border: 1px solid var(--line); }
.toast {
  position: fixed; left: 50%; bottom: 140px; transform: translateX(-50%); /* 휴대폰: 아래 조작 줄 위(미니맵은 잠깐 가려도 됨) */
  width: max-content; max-width: min(560px, calc(100vw - 32px)); background: rgba(18,29,54,.97); color: var(--ink);
  padding: 12px 16px; font-size: 15px; box-shadow: inset 0 3px 0 var(--accent), 0 8px 30px rgba(0,0,0,.45);
  opacity: 0; transition: opacity .3s; pointer-events: none; z-index: 1000;
}
.toast.show { opacity: 1; }
/* 무대 안(.in-stage, #stage 의 자식): 어떤 HUD 와도 안 겹치는 빈 곳에 둔다.
   휴대폰 = 미니맵 오른쪽(미니맵과 바닥이 같음) · 지도 모드 = 따라가기 칩 위 · PC 900~1199 = 띠 위 가운데 · PC 1200+ = 위 가운데(기록판·도구 사이) */
.toast.in-stage { position: absolute; z-index: 1100; transform: none; left: 120px; right: 8px; bottom: calc(var(--lg-h) + 60px); width: auto; max-width: none; padding: 10px 12px; font-size: 13px; line-height: 1.45; }
.stage.flat .toast.in-stage { left: 8px; right: 56px; bottom: calc(var(--lg-h) + 128px); }
.cheer-bar { position: sticky; bottom: 0; background: rgba(11,19,36,.95); border-top: 1px solid var(--line); padding: 10px 0; display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; z-index: 900; }
body.pre-run .cheer-bar { position: static; } /* 출발 전엔 바닥에 붙지 않게(PC 첫 화면에서 출발 버튼을 가리던 것) */
.floaty { position: fixed; font-size: 26px; pointer-events: none; animation: up 1.6s ease-out forwards; z-index: 1001; }
@keyframes up { from { transform: translateY(0); opacity: 1; } to { transform: translateY(-90px); opacity: 0; } }
.overlay { position: fixed; inset: 0; background: rgba(5,9,18,.74); display: flex; align-items: center; justify-content: center; z-index: 2000; padding: 16px; }
.overlay .card { max-width: 440px; width: 100%; border-top: 4px solid var(--accent); }

/* ── 대회 고르기 시트: 휴대폰은 아래에 붙어 나타남(위 테두리 4px 주황) / PC 는 바 아래 펼침 판 ── */
.overlay.race-overlay { align-items: flex-end; padding: 0; }
.overlay.race-overlay .card.race-sheet { display: flex; flex-direction: column; max-width: 640px; max-height: 82vh; max-height: 82dvh; margin: 0; padding: 0; overflow: hidden; animation: rsIn .15s ease-out; }
@keyframes rsIn { from { opacity: 0; } to { opacity: 1; } } /* 올라오는 움직임(translateY)은 뺌: 버튼이 움직이는 동안 누르면 손가락을 뗄 때 다른 곳에 닿아 클릭이 사라졌다 */
.rs-head { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 8px 8px 16px; }
.rs-head h2 { margin: 0; font-size: 20px; }
.rs-close { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border: 0; background: none; color: var(--ink); cursor: pointer; }
.rs-close:hover { background: var(--raise-2); }
.rs-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 0 calc(12px + env(safe-area-inset-bottom)); }
.rs-ul { list-style: none; margin: 0; padding: 0; }
.rs-li { min-width: 0; }
.rs-month { margin: 0; padding: 10px 16px 4px; font-size: 13px; color: var(--sub); }
.race-item { width: 100%; min-width: 0; min-height: 64px; display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 12px; border: 0; border-bottom: 1px solid var(--line); background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.race-item:hover { background: var(--raise-2); }
.race-item:focus-visible { outline-offset: -3px; }
.race-item.on { background: var(--raise); }
.ri-date { display: flex; flex-direction: column; align-items: center; line-height: 1.1; }
.ri-date b { font-family: var(--f-num); font-size: 20px; font-weight: 800; }
.ri-date small { font-size: 12px; color: var(--sub); }
.ri-main { display: flex; flex-direction: column; min-width: 0; }
.ri-name { font-size: 16px; font-weight: 700; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ri-sub { font-size: 13px; color: var(--sub); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ri-end { display: flex; align-items: center; gap: 8px; }
.ri-ck { color: var(--ahead); display: grid; }
.ri-ck .ic { width: 20px; height: 20px; vertical-align: 0; }
.ri-d { font-family: var(--f-num); font-variant-numeric: tabular-nums; font-size: 18px; font-weight: 800; color: var(--ahead); white-space: nowrap; }
.ri-d.is-today { background: var(--accent); color: var(--on-accent); padding: 0 8px; }
.ri-d.is-soon { font-family: var(--f-body); font-size: 12px; font-weight: 700; color: var(--ink); background: var(--raise); padding: 2px 8px; }
.race-item.is-soon .ri-name { color: var(--sub); }
.rs-note { margin: 0; padding: 6px 16px 8px; background: var(--raise-2); }
.rs-note:empty { display: none; }
.rs-past summary { min-height: 44px; display: flex; align-items: center; padding: 0 16px; font-size: 14px; font-weight: 700; color: var(--sub); cursor: pointer; }
.rs-search { position: sticky; top: 0; z-index: 1; padding: 4px 16px 8px; background: var(--surface); }
.rs-search input { width: 100%; min-height: 44px; padding: 8px 12px; font: inherit; color: var(--ink); background: var(--field); border: 1px solid var(--line); border-radius: 2px; }
.rs-empty, .rs-state { margin: 0; padding: 20px 16px; color: var(--sub); }
.rs-retry { margin: 0 16px; }
.rs-req { padding: 14px 16px 4px; }
.rs-req p { margin: 0 0 8px; }
@media (min-width: 900px) {
  .overlay.race-overlay { display: block; background: transparent; }
  .overlay.race-overlay .card.race-sheet { position: absolute; width: 440px; max-width: calc(100vw - 16px); max-height: min(70vh, 640px); animation: none; box-shadow: 0 12px 40px rgba(0,0,0,.55); }
}

/* ── 2. 출발 카드 ── */
.join-card { border-top: 4px solid var(--accent); padding: 18px 16px 16px; }
.jc-head h2 { margin: 0; font-size: 22px; }
.jc-head p { margin: 0; font-size: 13px; color: var(--sub); }
.join-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 8px 32px; }
.join-grid > div { min-width: 0; }
.join-grid .row > label, .join-grid select { min-width: 0; max-width: 100%; } /* 긴 곡 이름이 열을 넓혀 휴대폰에서 카드 밖으로 밀리지 않게 */
.field-label { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 13px; font-weight: 800; color: var(--sub); margin: 18px 0 8px; }
.field-label small { font-weight: 500; }
.picker { display: flex; gap: 16px; align-items: center; margin: 0; min-width: 0; }
.picker > div:last-child { min-width: 0; }
.pick-preview { flex: none; position: relative; overflow: hidden; width: 76px; height: 96px; background: var(--bg); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; }
.pick-preview svg { width: 64px; height: 84px; }
.pick-preview .pv-svg { display: flex; align-items: center; justify-content: center; }
.pick-preview canvas.lv3d { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } /* 3D 사람 모델(lookview.js) — 그려지면 SVG 는 숨긴다 */
.pick-preview.is3d .pv-svg { display: none; }
.picker .row { margin-bottom: 8px; gap: 8px; }
.swatches { display: flex; gap: 8px; flex-wrap: wrap; }
.swatch { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--surface); box-shadow: 0 0 0 1px var(--line); cursor: pointer; padding: 0; }
.swatch.on { box-shadow: 0 0 0 3px var(--ink); }
.full-sel { width: 100%; min-height: 48px; }
.one-course { margin: 0; padding: 10px 12px; min-height: 48px; display: flex; align-items: center; font-weight: 700; background: var(--raise); }
#targetChips { display: grid; grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr)); gap: 6px; margin: 0 0 10px; }
#targetChips .chip { min-height: 48px; padding: 4px 2px; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.1; min-width: 0; }
#targetChips .chip b { font-family: var(--f-num); font-size: 18px; font-weight: 800; }
#targetChips .chip small { font-size: 11px; font-weight: 500; color: var(--sub); font-family: var(--f-num); }
#targetChips .chip.on small { color: inherit; opacity: .75; }
.swap { display: grid; grid-template-columns: minmax(0, 1fr) 32px minmax(0, 1fr); align-items: end; gap: 8px; }
.swap label { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 12px; color: var(--sub); }
.swap .sw-b { text-align: right; }
.pace-row input { width: 100%; font-family: var(--f-num); font-size: 24px; font-weight: 700; line-height: 1.1; padding: 6px 10px; }
.sw-b input { text-align: right; }
.pace-row input.bad { border-color: var(--bad); outline-color: var(--bad); }
.sw-ic { display: grid; place-items: center; height: 44px; color: var(--accent-text); }
.pass { margin: 10px 0 0; font-size: 13px; line-height: 1.6; color: var(--sub); }
.pass b { color: var(--ahead); font-family: var(--f-num); font-size: 15px; font-weight: 700; }
.music-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-height: 52px; padding: 6px 10px; background: var(--raise); }
.music-row .tg-t { flex: none; }
.music-row select { flex: 1 1 160px; }
.tog { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 4px 12px; margin-top: 8px; background: var(--raise); cursor: pointer; }
.tog input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.tg-t { font-weight: 800; font-size: 15px; color: var(--ink); line-height: 1.3; }
.tg-t small { display: block; font-weight: 500; font-size: 12px; color: var(--sub); }
.tg-sw { position: relative; flex: none; width: 46px; height: 28px; background: var(--line); border-radius: 2px; }
.tg-sw::after { content: ''; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; background: var(--surface); border-radius: 1px; transition: transform .15s; }
.tog input:checked ~ .tg-sw { background: var(--accent); }
.tog input:checked ~ .tg-sw::after { transform: translateX(18px); }
.tog input:focus-visible ~ .tg-sw { outline: 3px solid var(--focus); outline-offset: 2px; }
.btn-start { width: 100%; min-height: 56px; font-size: 18px; margin-top: 18px; }
.hint { margin: 8px 0 0; font-size: 12px; color: var(--sub); }
@media (max-width: 760px) { .join-grid { grid-template-columns: minmax(0, 1fr); } }

/* 같이 달리기 방 1~5 — 한 줄 5칸, 높이 52px */
.rooms { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin: 0 0 6px; }
.room-btn { font: inherit; min-width: 0; overflow: hidden; min-height: 52px; border: 0; background: var(--raise); color: var(--ink); padding: 4px 2px; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; line-height: 1.15; text-align: center; }
.room-btn b { font-family: var(--f-num); font-size: 20px; font-weight: 800; white-space: nowrap; }
.room-btn small { font-size: 12px; color: var(--sub); min-height: 1.2em; white-space: nowrap; }
.room-btn.on { background: var(--ink); color: var(--bg); }
.room-btn.on small { color: inherit; opacity: .8; }
.room-btn.full small { color: var(--bad); font-weight: 700; }
.room-btn.on.full small { color: #B4233C; opacity: 1; }
.room-btn:disabled { opacity: .5; cursor: not-allowed; }
.room-hint { margin: 0 0 12px; color: var(--behind); }
.room-hint:empty { display: none; }
@media (max-width: 420px) { .room-btn small { font-size: 11px; } }

/* ── 3D 무대 ── */
/* --lg-h: 바닥 고정 표시 줄 높이(휴대폰은 전체 화면에서만 보임) · --mm: PC 미니맵 크기 */
.stage { --lg-h: 0px; --mm: min(200px, 26vh); position: relative; height: 62vh; min-height: 340px; overflow: hidden; border: 1px solid var(--line); background: #7c8a96; }
.stage .view3d { position: absolute; inset: 0; }
.stage .view3d canvas { display: block; }
/* 옆으로 이동(좌우 절반 꾹 누르기): 길게 눌러도 글자 선택·메뉴가 안 뜨게. 스크롤 막기는 달리는 중 3D 화면 위에서만 */
.stage .view3d { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
.stage.steerable .view3d { touch-action: none; }
.steer-edge { position: absolute; top: 0; bottom: 0; width: 22%; max-width: 160px; z-index: 2; display: flex; align-items: center; opacity: 0; transition: opacity .12s; pointer-events: none; }
.steer-edge.l { left: 0; padding-left: 14px; background: linear-gradient(90deg, rgba(255,122,69,.26), rgba(255,122,69,0)); }
.steer-edge.r { right: 0; padding-right: 14px; justify-content: flex-end; background: linear-gradient(270deg, rgba(255,122,69,.26), rgba(255,122,69,0)); }
.steer-edge::after { content: ''; width: 20px; height: 20px; border: solid rgba(255,255,255,.7); border-width: 0 0 4px 4px; transform: translateX(4px) rotate(45deg); }
.steer-edge.r::after { transform: translateX(-4px) rotate(-135deg); }
.stage.steer-l .steer-edge.l, .stage.steer-r .steer-edge.r { opacity: 1; }
.steer-hint { position: absolute; left: 50%; top: 61%; transform: translate(-50%, -50%); z-index: 1000; width: max-content; max-width: calc(100% - 32px); padding: 10px 20px 10px 16px; background: var(--panel); color: var(--ink); font-size: 14px; font-weight: 700; line-height: 1.45; text-align: center; box-shadow: inset 0 -3px 0 var(--accent); clip-path: var(--cut); pointer-events: none; }
.stage .room-map { position: absolute; inset: 0; height: auto; min-height: 0; border: 0; z-index: 1; }
.stage .room-map.mini { inset: auto auto calc(var(--lg-h) + 60px) 8px; width: 104px; height: 104px; border: 2px solid var(--surface); border-top: 3px solid var(--accent); box-shadow: 0 4px 16px rgba(0,0,0,.35); z-index: 3; }
.stage .room-map.mini .leaflet-control-zoom, .stage .room-map.mini .leaflet-control-attribution { display: none; }
.stage .room-map.mini .runner-icon { transform-origin: 50% 100%; }
.stage .room-map.mini .leaflet-tooltip { display: none; }
.stage .room-map:not(.mini) .leaflet-bottom.leaflet-right { bottom: calc(var(--lg-h) + 4px); }
.stage.running .room-map:not(.mini) .leaflet-bottom.leaflet-right { bottom: calc(var(--lg-h) + 56px); } /* 2D 지도 확대·축소: 오른쪽 아래, 조작 줄 위 */
.stage-legal { position: absolute; left: 0; right: 0; bottom: 0; z-index: 960; display: none; flex-wrap: wrap; justify-content: center; gap: 0 14px; margin: 0; padding: 6px 12px; font-size: 12px; line-height: 1.4; text-align: center; background: var(--legal-bg); color: var(--legal-ink); pointer-events: none; }
.stage-msg { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(11,19,36,.92); color: var(--ink); font-weight: 700; z-index: 5; text-align: center; padding: 16px; }
/* 지도 타일은 어둡게 뒤집어 남색 화면에 맞춤(코스 선·캐릭터는 그대로) */
.map .leaflet-tile-pane, .room-map .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) brightness(.92) contrast(.88) saturate(.5); }
.leaflet-container { background: #1b2433; font-family: var(--f-body); }
.leaflet-bar a, .leaflet-bar a:hover { background: var(--surface); color: var(--ink); border-bottom-color: var(--line); }
.leaflet-bar { border: 1px solid var(--line) !important; border-radius: 0 !important; box-shadow: 0 2px 8px rgba(0,0,0,.35) !important; }
.leaflet-bar a:first-child, .leaflet-bar a:last-child { border-radius: 0 !important; }
.leaflet-control-attribution { background: rgba(11,19,36,.82) !important; color: var(--sub) !important; }
.leaflet-control-attribution a { color: var(--ink) !important; }
.leaflet-tooltip { background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 0; box-shadow: 0 2px 8px rgba(0,0,0,.4); }
.leaflet-tooltip-top::before { border-top-color: var(--surface); }
.leaflet-tooltip-bottom::before { border-bottom-color: var(--surface); }

/* ── 4. 달리는 중: 거리·고도 띠(#energy) — 휴대폰은 위, PC는 아래(로어서드). JS 는 0.25초마다 글자·clip·transform 만 바꾼다 ── */
.energy { position: absolute; z-index: 950; left: 8px; right: 8px; top: 8px; padding: 6px 10px 2px; background: var(--panel); box-shadow: inset 0 3px 0 var(--accent), 0 2px 10px rgba(0,0,0,.25); color: var(--ink); pointer-events: none; }
.band-meta { display: flex; align-items: baseline; gap: 10px; min-width: 0; font-size: 13px; line-height: 1.3; white-space: nowrap; overflow: hidden; }
.band-meta b { font-family: var(--f-num); font-size: 17px; font-weight: 800; }
.bm-pct { color: var(--accent-text); font-family: var(--f-num); font-size: 16px; font-weight: 800; }
.bm-msg { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-weight: 700; color: var(--ahead); }
.bm-left { margin-left: auto; color: var(--sub); }
.bm-left b { color: var(--ink); font-size: 15px; }
.en-prof { --pg-h: 26px; margin: 4px 18px 0 0; } /* 오른쪽 18px = 도착 깃발 칸 */
.en-ticks { margin-right: 18px; height: 20px; }
.en-axis { margin-right: 18px; height: 15px; font-size: 11px; line-height: 1; } /* 단면 아래 km 숫자. 휴대폰: 하프는 2km, 풀은 5km 마다 */
.en-axis.long .k-odd, .en-axis.full .k-x { display: none; }
.en-done { position: absolute; inset: 0; clip-path: inset(0 100% 0 0); }
.en-head { position: absolute; inset: 0; transform: translateX(0); transition: transform .25s linear; }
.en-head i { position: absolute; left: -1px; top: -3px; bottom: -3px; width: 2px; background: #fff; }
.en-head i::after { content: ''; position: absolute; left: -6px; top: 50%; width: 14px; height: 14px; margin-top: -7px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px rgba(255,90,31,.95); animation: enBob 1s ease-in-out infinite alternate; }
/* 구간 이동(11/3): 달리는 중엔 띠를 눌러 그 구간으로. 확인 상자(.seek-box)는 5초 뒤 저절로 닫힘, 띠 위엔 누른 자리 표시선(.en-seek) */
.energy.seekable { pointer-events: auto; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.en-seek { position: absolute; inset: 0; pointer-events: none; }
.en-seek i { position: absolute; left: var(--x, 0%); top: -3px; bottom: -3px; width: 3px; margin-left: -1px; background: var(--ahead); box-shadow: 0 0 0 1px rgba(11,19,36,.7); }
.en-seek i::before { content: ''; position: absolute; left: -5px; top: 0; border: solid transparent; border-width: 7px 6.5px 0; border-top-color: var(--ahead); }
.seek-box { position: absolute; z-index: 1050; left: 8px; right: 8px; top: 42%; margin: 0 auto; width: max-content; min-width: min(260px, calc(100% - 16px)); max-width: calc(100% - 16px); padding: 12px 14px 15px; background: rgba(18,29,54,.98); color: var(--ink); box-shadow: inset 0 3px 0 var(--ahead), 0 8px 30px rgba(0,0,0,.5); overflow: hidden; }
.seek-box p { margin: 0 0 2px; font-size: 15px; font-weight: 800; line-height: 1.4; overflow-wrap: anywhere; }
.seek-sub { display: block; margin: 0 0 10px; font-size: 13px; line-height: 1.4; color: var(--sub); }
.seek-btns { display: flex; gap: 8px; min-width: 0; }
.seek-btns .btn { flex: 1 1 0; min-width: 0; padding-left: 10px; padding-right: 10px; }
.seek-btns .btn:not(.ghost) { padding-right: 18px; }
.seek-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--ahead); transform-origin: 0 50%; animation: seekBar 5s linear forwards; }
@keyframes seekBar { to { transform: scaleX(0); } }
.fin-skip { margin: 2px 0 0; color: var(--ahead); font-weight: 700; }
.energy.paused { filter: grayscale(.85); }
.energy.paused .en-head i::after { animation-play-state: paused; }
.energy.pulse { animation: enPulse .9s ease-out; }
.energy.done { animation: enDone 1.2s ease-out 2; }
@keyframes enBob { from { box-shadow: 0 0 0 3px rgba(255,90,31,.95); } to { box-shadow: 0 0 0 6px rgba(255,90,31,.35); } }
@keyframes enPulse { 0% { box-shadow: inset 0 3px 0 var(--accent), 0 0 0 0 rgba(255,122,69,.9); } 100% { box-shadow: inset 0 3px 0 var(--accent), 0 0 0 12px rgba(255,122,69,0); } }
@keyframes enDone { 0%, 100% { filter: none; } 30% { filter: brightness(1.3); box-shadow: inset 0 3px 0 var(--ahead), 0 0 18px 4px rgba(46,230,214,.7); } }

/* HUD: 기록판(늘 같은 자리) · 구간 카드 · 다음 지점 카드 · 오른쪽 세로 도구 줄 */
.hud { position: absolute; left: 8px; right: 8px; top: 8px; z-index: 4; pointer-events: none; }
.stage.running .hud { top: 96px; } /* 휴대폰: 위 띠 아래 */
.hud.flat { z-index: 1000; }
.hud-left { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; pointer-events: none; }
.hud-left > * { pointer-events: auto; }
.hud-zone, .hud-next, .hud-wx { max-width: calc(100% - 86px); } /* 오른쪽 도구 버튼(74px) 자리 */
.hud-zone { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; padding: 7px 10px; background: var(--panel); color: var(--ink); font-size: 13px; line-height: 1.4; }
.hud-zone:empty { display: none; }
.hud-zone b { font-size: 14px; }
.z-tag { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 800; padding: 1px 12px 1px 6px; background: var(--raise); color: var(--ink); clip-path: var(--cut); }
.z-tag .ic { width: 13px; height: 13px; vertical-align: 0; }
.hud-zone.z-up .z-tag { background: var(--up); color: #0B0D10; }
.hud-zone.z-down .z-tag { background: var(--down); color: #0B0D10; }
.hud-zone.z-build .z-tag, .hud-zone.z-sprint .z-tag { background: var(--accent); color: #0B0D10; }
.z-km { flex-basis: 100%; font-size: 12px; color: var(--sub); }
.hud-zone p { display: none; flex-basis: 100%; margin: 0; font-size: 13px; line-height: 1.45; }
.stats { margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: var(--panel); color: var(--ink); }
.hud-stats { order: -1; align-self: stretch; }
.st { min-width: 0; padding: 6px 8px; }
.st + .st { box-shadow: inset 1px 0 0 var(--line); }
.st dt { font-size: 12px; line-height: 1.2; white-space: nowrap; color: var(--sub); letter-spacing: .02em; }
.st dd { margin: 0; font-family: var(--f-num); font-size: 20px; line-height: 1.15; font-weight: 800; white-space: nowrap; overflow: hidden; }
.st dd small { font-size: .6em; font-weight: 600; margin-left: 1px; }
.st-delta dd small { display: none; }
.st-delta.is-ahead { background: var(--ahead); color: #0B0D10; } /* 목표보다 앞섬 */
.st-delta.is-behind { background: var(--behind); color: #0B0D10; } /* 목표보다 늦음 */
.st-delta.is-ahead dt, .st-delta.is-behind dt { color: rgba(11,13,16,.78); }
.st-delta.is-even dd { color: var(--ahead); }
.hud-next { display: flex; flex-direction: column; gap: 4px; }
.hud-next:empty { display: none; }
.nx { display: flex; align-items: center; gap: 8px; padding: 6px 10px; background: var(--panel); color: var(--ink); min-width: 0; }
.nx .ic { width: 18px; height: 18px; }
.nx-main { box-shadow: inset 0 -3px 0 var(--water); }
.nx-main .ic { color: var(--water); }
.nx-sub { font-size: 13px; }
.nx-sub .ic { color: var(--accent-text); }
.nx-l { font-weight: 800; font-size: 14px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nx-sub .nx-l { font-weight: 700; font-size: 13px; }
.nx-d { font-family: var(--f-num); font-size: 22px; line-height: 1.1; font-weight: 800; white-space: nowrap; }
.nx-sub .nx-d { font-size: 16px; }
.nx-k { font-size: 12px; color: var(--sub); white-space: nowrap; }
.nx-big { display: none; }
/* 급수 300m 안: 물색 테두리 + 은은한 맥동(1초 주기) + 큰 글자. 움직임 줄이기면 맥동 없이 테두리 색만 */
.nx-main.near { box-shadow: inset 0 0 0 2px var(--water); background: rgba(14,38,66,.92); animation: nxPulse 1s ease-in-out infinite; }
.nx-main.near .nx-l, .nx-main.near .nx-d, .nx-main.near .nx-k { display: none; }
.nx-main.near .nx-big { display: block; font-family: var(--f-num); font-size: 28px; line-height: 1.1; font-weight: 800; color: #fff; white-space: nowrap; }
.nx-main.near .ic { width: 26px; height: 26px; }
@keyframes nxPulse { 0%, 100% { box-shadow: inset 0 0 0 2px var(--water), 0 0 0 0 rgba(56,189,248,.35); } 50% { box-shadow: inset 0 0 0 2px var(--water), 0 0 0 5px rgba(56,189,248,0); } }
.hud-btns { position: absolute; right: 0; top: 58px; display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
.stage:not(.running) .hud-btns { top: 0; }
.hud.flat .hud-btns { top: 112px; }
.stage:not(.running) .hud.flat .hud-btns { top: 52px; }
.hud-btns > * { pointer-events: auto; }
.hud.flat #camBtn, .hud.flat #viewBtn { display: none; }
/* 오른쪽 위 도구 버튼 3개(카메라·보기·전체 화면): 아이콘 + 이름 + 지금 상태 알약. 휴대폰은 위 줄 아이콘·이름 / 아래 줄 상태, PC는 한 줄 */
.tl { position: relative; width: 74px; min-height: 46px; display: grid; grid-template-columns: auto auto; justify-content: center; align-content: center; align-items: center; gap: 3px 3px; padding: 5px 4px 6px; border: 0; background: rgba(8,14,28,.94); color: var(--ink); cursor: pointer; font: inherit; box-shadow: inset 0 3px 0 var(--accent), 0 0 0 1px rgba(244,246,250,.34), 0 3px 10px rgba(0,0,0,.45); }
.tl .ic { width: 15px; height: 15px; vertical-align: 0; }
.tl-l { font-size: 10px; line-height: 1.2; font-weight: 800; white-space: nowrap; }
.tl-s { grid-column: 1 / -1; justify-self: stretch; min-width: 0; padding: 1px 4px; text-align: center; font-size: 11px; line-height: 1.4; font-weight: 800; white-space: nowrap; background: var(--accent); color: var(--on-accent); }
.tl-s .ic { width: 11px; height: 11px; margin-left: 3px; vertical-align: -1px; }
#fsBtn .tl-s { background: var(--raise); color: var(--ink); box-shadow: inset 0 0 0 1px rgba(244,246,250,.4); }
#fsBtn .tl-s.on { background: var(--ahead); color: var(--on-accent); box-shadow: none; }
#fsBtn[aria-pressed="true"] { box-shadow: inset 0 3px 0 var(--ahead), 0 0 0 1px rgba(46,230,214,.7), 0 3px 10px rgba(0,0,0,.45); }
.tl:hover, .cb:hover { background: rgba(26,40,72,.97); }
.stage .to3d { position: absolute; top: 8px; right: 8px; z-index: 1000; display: none; }
.stage.flat .to3d { display: grid; }
.stage.running.flat .to3d { top: 150px; }
.stage .follow { position: absolute; bottom: calc(var(--lg-h) + 82px); left: 50%; transform: translateX(-50%); z-index: 1000; min-height: 44px; background: var(--panel); color: var(--ink); box-shadow: inset 0 -3px 0 var(--accent); }

/* 날씨 평년값(HUD 왼쪽 맨 아래): 대회 시각 · 하늘 · 기온 · 체감 · 습도 · 바람. 누르면 범위·출처가 펼쳐진다 */
.hud-wx { background: var(--panel); color: var(--ink); box-shadow: inset 0 3px 0 var(--blue); font-size: 13px; line-height: 1.4; }
.wx-main { display: flex; align-items: center; gap: 6px; width: 100%; min-height: 34px; padding: 4px 8px 0 10px; border: 0; background: none; color: inherit; text-align: left; cursor: pointer; font: inherit; }
.wx-line { flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; }
.wx-clock, .wx-t { font-family: var(--f-num); font-size: 18px; line-height: 1.2; font-weight: 800; }
.wx-t { color: var(--ahead); }
.wx-sky { font-weight: 800; white-space: nowrap; }
.wx-f, .wx-rh, .wx-w { font-size: 12px; color: var(--sub); white-space: nowrap; }
/* 휴대폰: 날씨는 접힌 한 줄(시각·하늘·기온·습도·'평년')이 기본, 거리·경과 줄 바로 아래 얇은 띠. 누르면 체감·바람·제한·예보 아님·범위가 펼쳐진다 */
.hud-wx { order: -1; width: calc(100% - 86px); }
.hud-wx:not(.open) .wx-f, .hud-wx:not(.open) .wx-w, .hud-wx:not(.open) .wx-note { display: none; }
.hud-wx:not(.open) .wx-line { flex-wrap: nowrap; overflow: hidden; gap: 0 6px; }
.hud-wx:not(.open) .wx-clock, .hud-wx:not(.open) .wx-t { font-size: 16px; }
.hud-wx:not(.open) .wx-line { gap: 0 5px; }
.hud-wx:not(.open) .wx-sky { font-size: 12px; }
.hud-wx:not(.open) .wx-main { gap: 4px; padding-left: 8px; }
.hud-wx:not(.open) .wx-rh { font-size: 11px; }
.hud-wx:not(.open) .wx-main { min-height: 32px; padding-bottom: 3px; }
.wx-tag { flex: none; padding: 0 4px; font-size: 10px; font-weight: 800; line-height: 1.5; background: var(--raise); color: var(--behind); }
.hud-wx.open .wx-tag { display: none; }
.wx-chev { flex: none; width: 14px; height: 14px; color: var(--sub); transition: transform .15s; }
.hud-wx.open .wx-chev { transform: rotate(180deg); }
.wx-note { display: flex; flex-wrap: wrap; gap: 0 8px; padding: 0 10px 4px; font-size: 11px; line-height: 1.35; color: var(--sub); }
.wx-note b { color: var(--ink); font-family: var(--f-num); font-size: 14px; }
.wx-cut { color: var(--ink); font-weight: 700; }
.wx-basis { color: var(--behind); font-weight: 700; }
.wx-long { display: none; font-weight: 500; }
.wx-more { padding: 0 10px 8px; font-size: 12px; line-height: 1.5; color: var(--ink); }
.wx-more small { color: var(--sub); font-size: 11px; }
.wx-start { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.wx-start label { flex: none; display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--sub); }
.wx-start input { width: 168px; min-height: 44px; font-size: 16px; font-weight: 700; }
.wx-start .pass { flex: 1 1 200px; min-width: 0; margin: 0; }
.wx-start .pass b { color: var(--ink); font-size: 16px; }

/* 조작 줄: 멈춤·속도·배경음·현장음 4개만 한 줄 */
.ctrl { position: absolute; left: 8px; right: 8px; bottom: calc(var(--lg-h) + 8px); z-index: 1000; display: flex; gap: 8px; align-items: center; flex-wrap: nowrap; pointer-events: none; }
.ctrl > * { pointer-events: auto; }
.cb { min-width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 10px; border: 0; background: var(--panel); color: var(--ink); font: inherit; font-weight: 800; font-size: 14px; cursor: pointer; white-space: nowrap; }
.speed-ctl { display: inline-flex; align-items: center; background: var(--panel); }
.speed-ctl .cb { background: none; }
.speed-ctl b { min-width: 44px; text-align: center; font-family: var(--f-num); font-weight: 800; font-size: 18px; }
#musicBtn, #sfxBtn { position: relative; color: var(--ahead); }
#musicBtn.off, #sfxBtn.off { color: var(--sub); }
#musicBtn.off::after, #sfxBtn.off::after { content: ''; position: absolute; left: 11px; right: 11px; top: 50%; height: 2px; background: currentColor; transform: rotate(-45deg); } /* 꺼짐 = 빗금 */
.paused-veil { position: absolute; inset: 0; z-index: 900; background: rgba(11,19,36,.55); display: flex; align-items: center; justify-content: center; color: var(--ink); text-align: center; font-size: 22px; padding: 16px; }
.paused-veil > div { background: var(--surface); box-shadow: inset 0 4px 0 var(--accent); padding: 18px 24px 20px; }
.paused-veil .btn { margin-top: 12px; }
.fs-root .floaty { position: fixed; }

/* ── 무대 크기: 휴대폰은 화면 거의 전부, PC 최대 76vh, 전체 화면 ── */
@media (max-width: 520px) {
  .stage { height: calc(100vh - 80px); height: calc(100svh - 80px); min-height: 420px; max-height: 780px; }
  .cheer-bar .btn { font-size: 15px; min-height: 44px; padding: 4px 16px 4px 12px; }
  .cheer-bar .btn.ghost { padding: 4px 12px; }
  .hide-sm { display: none; }
}
.fs-root { position: relative; }
.fs-root:fullscreen, .fs-root.pseudo-fs { background: #000; }
.fs-root:-webkit-full-screen { background: #000; width: 100%; height: 100%; }
.fs-root.pseudo-fs { position: fixed; inset: 0; z-index: 3000; }
.fs-root:fullscreen .stage, .fs-root.pseudo-fs .stage { height: 100vh; height: 100dvh; min-height: 0; max-height: none; border: 0; --lg-h: 46px; }
.fs-root:-webkit-full-screen .stage { height: 100vh; max-height: none; border: 0; --lg-h: 46px; }
.fs-root:fullscreen .stage-legal, .fs-root.pseudo-fs .stage-legal { display: flex; }
.fs-root:-webkit-full-screen .stage-legal { display: flex; } /* -webkit- 선택자는 따로 (모르는 브라우저가 묶인 규칙 전체를 버리지 않게) */
body.no-scroll { overflow: hidden; }

/* ── PC 900px 이상: 띠는 아래(로어서드), 기록판 왼쪽 위 470px, 도구 오른쪽 위(글자 보임), 조작 줄 오른쪽 아래 ── */
@media (min-width: 900px) {
  h2 { font-size: 24px; }
  .lead { font-size: 17px; }
  .brief-hero { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px; align-items: center; margin-top: 44px; }
  .course-card { padding: 20px; }
  .prof-brief { --pg-h: 140px; }
  .facts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 32px; }
  .fact { padding: 16px 18px; }
  .fv { font-size: 34px; }
  .fv-list { font-size: 22px; }
  .seg-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .zone-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .zone-list > .card, .zone-list > .small { grid-column: 1 / -1; }
  .join-card { padding: 24px 26px 22px; }
  .stage { height: min(76vh, 860px); --lg-h: 30px; --en-h: 124px; }
  .stage-legal { display: flex; }
  .fs-root:fullscreen .stage, .fs-root.pseudo-fs .stage { --lg-h: 30px; }
  .fs-root:-webkit-full-screen .stage { --lg-h: 30px; }
  .stage .room-map.mini { inset: auto auto calc(var(--lg-h) + 10px) 16px; width: var(--mm); height: var(--mm); }
  .energy { top: auto; bottom: calc(var(--lg-h) + 10px); left: calc(var(--mm) + 32px); right: 16px; padding: 8px 14px 2px; }
  .band-meta { font-size: 14px; }
  .band-meta b { font-size: 20px; }
  .en-prof { --pg-h: 46px; }
  .en-axis { height: 17px; font-size: 12px; }
  .en-axis.long .k-odd { display: inline; } /* PC: 하프는 1km, 풀은 2km 마다 */
  .en-axis.full .k-x { display: inline; } .en-axis.full .k-odd { display: none; }
  .hud, .stage.running .hud { left: 16px; right: 16px; top: 16px; }
  .hud-left { width: 470px; max-width: calc(100% - 180px); }
  .hud-zone, .hud-next { max-width: none; align-self: stretch; }
  .hud-zone p { display: block; }
  .st dd { font-size: 25px; }
  .st-delta dd small { display: inline; margin-left: 3px; }
  .stats { grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.3fr); }
  .hud-btns, .stage:not(.running) .hud-btns { top: 0; align-items: flex-end; }
  .hud.flat .hud-btns, .stage:not(.running) .hud.flat .hud-btns { top: 60px; }
  .tl { display: flex; align-items: center; gap: 10px; width: 216px; min-height: 48px; padding: 0 12px 2px; }
  .tl .ic { width: 22px; height: 22px; }
  .tl-l { font-size: 14px; }
  .tl-s { grid-column: auto; margin-left: auto; padding: 2px 12px; font-size: 14px; }
  .tl-s .ic { width: 14px; height: 14px; margin-left: 4px; }
  .stage.flat .to3d { display: flex; }
  .hud-wx { max-width: none; width: auto; align-self: stretch; order: 0; }
  .hud-wx:not(.open) .wx-f, .hud-wx:not(.open) .wx-w { display: inline; }
  .hud-wx:not(.open) .wx-note { display: flex; }
  .hud-wx:not(.open) .wx-line { flex-wrap: wrap; overflow: visible; gap: 0 8px; }
  .hud-wx:not(.open) .wx-clock, .hud-wx:not(.open) .wx-t { font-size: 20px; }
  .hud-wx:not(.open) .wx-sky { font-size: 13px; }
  .hud-wx:not(.open) .wx-rh { font-size: 12px; }
  .hud-wx:not(.open) .wx-main { gap: 6px; padding-left: 10px; }
  .hud-wx:not(.open) .wx-line { gap: 0 8px; }
  .hud-wx:not(.open) .wx-main { min-height: 40px; padding-bottom: 0; }
  .wx-tag { display: none; }
  .wx-long { display: inline; }
  .wx-main { min-height: 40px; padding-top: 7px; }
  .wx-clock, .wx-t { font-size: 20px; }
  .wx-note { font-size: 12px; padding-bottom: 6px; }

  .stage .to3d, .stage.running.flat .to3d { top: 16px; right: 16px; }
  .ctrl { left: auto; right: 16px; bottom: calc(var(--lg-h) + 124px); }
  .stage .follow { bottom: calc(var(--lg-h) + 124px); }
  .stage.running .room-map:not(.mini) .leaflet-bottom.leaflet-right { bottom: calc(var(--lg-h) + 176px); }
  .toast { bottom: 190px; }
  .steer-hint { top: 28%; } /* PC: 캐릭터 머리 위 하늘쪽 */
  .seek-box { top: auto; left: calc(var(--mm) + 32px); right: 372px; bottom: calc(var(--lg-h) + var(--en-h) + 14px); min-width: 280px; max-width: 460px; } /* PC: 아래 띠 바로 위(오른쪽 조작 줄은 피함) */
  .stage.flat .seek-box { bottom: calc(var(--lg-h) + 180px); } /* 지도 모드: 따라가기 칩 위 */
  .toast.in-stage, .stage.flat .toast.in-stage { left: calc(var(--mm) + 32px); right: 372px; bottom: calc(var(--lg-h) + 132px); margin: 0 auto; width: max-content; max-width: min(560px, calc(100% - var(--mm) - 404px)); padding: 12px 16px; font-size: 14px; line-height: 1.5; }
  .stage.flat .toast.in-stage { bottom: calc(var(--lg-h) + 176px); } /* 지도 모드: 따라가기 칩(가운데 아래) 위 */
  .big { font-size: 52px; }
  /* 멈춤 화면: 아래 고도 띠(#energy)가 카드를 가리지 않게 — 띠 높이만큼 아래를 비우고, 카드가 넘치면 요령 칸만 안에서 스크롤 */
  .paused-veil { padding-bottom: calc(var(--lg-h) + 10px + var(--en-h) + 14px); }
  .paused-veil > div { display: flex; flex-direction: column; align-items: center; max-height: 100%; min-height: 0; }
  .paused-veil > div > b, .paused-veil > div > .btn { flex: none; }
  .paused-veil > div > br { display: none; }
  .paused-veil .pv-tip { flex: 0 1 auto; align-self: stretch; min-height: 0; max-height: none; }
}
@media (min-width: 1200px) {
  .toast.in-stage, .stage.flat .toast.in-stage { top: 16px; bottom: auto; left: 518px; right: 200px; max-width: min(560px, calc(100% - 718px)); font-size: 15px; }
}
/* 키가 낮은 PC 창: 구간 카드 요령 줄은 접어 3D 를 덜 가림 */
@media (min-width: 900px) and (max-height: 760px) { .hud-zone p { display: none; } }

/* ── 코스 안내 자리 정리 (11/2): 한 줄 알림(#hudTip) · 다음 지점 판(#hudBoard) · 멈춤 화면 요령(#pvTip) ──
   알림 상자(#toast)는 방·대회·링크·오류 같은 시스템 안내 전용. 코스 안내는 HUD 안에서만 */
.hud-board { display: contents; } /* PC: 구간 카드·다음 지점 카드는 기록판 아래 그대로 */
.hud-tip { align-self: stretch; padding: 8px 12px 9px; background: var(--panel); color: var(--ink); font-size: 14px; line-height: 1.4; font-weight: 700; box-shadow: inset 0 3px 0 var(--k, var(--accent)); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.hud-tip[data-k="up"] { --k: var(--up); } .hud-tip[data-k="down"] { --k: var(--down); } .hud-tip[data-k="gel"] { --k: var(--gel); } .hud-tip[data-k="turn"], .hud-tip[data-k="build"], .hud-tip[data-k="sprint"] { --k: var(--accent); }
.hud-tip.fresh { animation: tipFlash 1.2s ease-out 2; }
.hud-zone[data-flash] { --k: var(--accent); animation: zoneFlash 1.2s ease-out 2; } /* PC: 경사 구간에 들어가면 카드만 깜박(요령 글은 카드 안에 이미 있다) */
.hud-zone[data-k="up"] { --k: var(--up); } .hud-zone[data-k="down"] { --k: var(--down); }
@keyframes zoneFlash { 0%, 100% { box-shadow: 0 0 0 0 transparent; } 40% { box-shadow: 0 0 0 3px var(--k); } }
@keyframes tipFlash { 0%, 100% { box-shadow: inset 0 3px 0 var(--k, var(--accent)); } 40% { box-shadow: inset 0 3px 0 var(--k, var(--accent)), 0 0 0 3px var(--k, var(--accent)); } }
.z-end { display: none; } /* 구간 끝 km: 휴대폰 판에서만 */
.nx-sub.near { box-shadow: inset 0 0 0 2px var(--accent); background: rgba(40,20,12,.92); } /* 반환·회전 200m 안: 주황 테두리(맥동 없음) */
.tl-m { display: none; } /* 도구 버튼 짧은 이름: 휴대폰 달리는 중에만 */
.paused-veil > div { max-width: min(460px, 100%); }
.pv-tip { max-height: 46vh; overflow: auto; margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 14px; line-height: 1.5; font-weight: 400; text-align: left; }
.pv-tip:empty { display: none; }
.pv-tip p { margin: 0 0 8px; }
.pv-tip .pv-h { font-weight: 800; }
.pv-tip dl { margin: 0 0 10px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 10px; }
.pv-tip dt { color: var(--accent-text); font-weight: 800; white-space: nowrap; }
.pv-tip dd { margin: 0; }

/* 휴대폰(899px 이하) 달리는 중: 위는 숫자판만(거리 바·고도·경과·페이스·목표 대비), 코스 안내는 아래 미니맵 오른쪽 "다음 지점 판", 도구 3개는 오른쪽 아래 엄지 자리.
   위쪽 판은 화면 위 17% 안에서 끝내고 하늘·가로수·지명 표지판 높이(25~45%)는 평소 비운다 */
@media (max-width: 899px) {
  .stage.running .en-prof { --pg-h: 22px; }
  .stage.running .en-ticks { height: 16px; }
  .stage.running .en-axis { height: 13px; }
  .stage.running .hud { top: 0; bottom: 0; }
  .stage.running .hud-left { margin-top: 93px; } /* 거리 띠(8~93px) 바로 아래 */
  .stage.running .hud-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } /* 거리 칸은 띠와 같은 숫자라 뺌 */
  .stage.running .hud-stats .st:first-child { display: none; }
  .stage.running .hud-stats .st:nth-child(2) { box-shadow: none; }
  .stage.running .hud-stats .st { padding: 4px 8px 5px; }
  .stage.running .hud-wx { max-width: none; width: auto; align-self: stretch; }
  /* 아래: 미니맵(왼쪽) · 다음 지점 판(가운데) · 도구 줄(오른쪽). 판 폭은 375px 폰에서 약 207px */
  .stage.running .room-map.mini { width: 96px; height: 96px; }
  .stage.running .hud-board { position: absolute; left: 0; right: 50px; bottom: calc(var(--lg-h) + 60px); display: flex; flex-direction: column; align-items: stretch; gap: 3px; pointer-events: none; }
  .stage.running .hud-tip { order: -1; margin-bottom: 3px; padding: 6px 10px 7px; font-size: 13px; line-height: 1.35; } /* 판 바로 위, 폭은 미니맵까지 */
  .stage.running .hud-zone, .stage.running .hud-next { margin-left: 102px; max-width: none; }
  .stage.running.flat .hud-zone, .stage.running.flat .hud-next { margin-left: 0; } /* 지도 보기엔 미니맵이 없다 */
  .stage.running .hud-zone { gap: 0 6px; padding: 5px 8px 6px; font-size: 12px; line-height: 1.3; }
  .stage.running .hud-zone .z-km, .stage.running .hud-zone p, .stage.running .z-par { display: none; }
  .stage.running .z-end { display: inline; font-family: var(--f-num); font-size: 16px; font-weight: 800; line-height: 1.3; }
  .stage.running .hud-zone .z-title { flex: 0 1 auto; min-width: 0; font-size: 12px; font-weight: 700; line-height: 1.3; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
  .stage.running .hud-next { gap: 3px; }
  .stage.running .nx { padding: 5px 8px; gap: 6px; }
  .stage.running .nx-main .nx-k { display: none; }
  .stage.running .nx-main .nx-l { font-size: 13px; }
  .stage.running .nx-main .nx-d { margin-left: auto; font-size: 18px; }
  .stage.running .nx-main.near .nx-big { font-size: 20px; }
  .stage.running .nx-main.near .ic { width: 20px; height: 20px; }
  .stage.running .nx-sub .nx-d { order: 1; font-size: 16px; } /* 거리를 이름 앞에 */
  .stage.running .nx-sub .nx-l { order: 2; flex: 1 1 0; white-space: normal; font-size: 12px; line-height: 1.25; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } /* 이름은 2줄까지, …로 자르지 않는 길이 */
  .stage.running .hud-btns, .stage.running .hud.flat .hud-btns { top: auto; bottom: calc(var(--lg-h) + 60px); right: 0; align-items: stretch; gap: 6px; }
  .stage.running .tl { width: 44px; min-height: 44px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 4px 0 3px; }
  .stage.running .tl .ic { width: 20px; height: 20px; }
  .stage.running .tl-l { font-size: 10px; line-height: 1.1; }
  .stage.running .tl-p, .stage.running .tl-s { display: none; }
  .stage.running .tl-m { display: inline; }
  .stage.running:not(.flat) .to3d { display: none; }
  .stage.running.flat .to3d { display: flex; top: auto; right: 8px; bottom: calc(var(--lg-h) + 110px); } /* 지도 보기: 3D 로 돌아가는 버튼은 전체 화면 버튼 위 */
  .stage.running.flat .follow { bottom: calc(var(--lg-h) + 200px); }
  .stage.running.flat .room-map:not(.mini) .leaflet-bottom.leaflet-right { bottom: calc(var(--lg-h) + 172px); }
  .stage.running .pv-tip { max-height: min(44vh, 360px); font-size: 13.5px; }
  .stage.running .toast.in-stage, .stage.running.flat .toast.in-stage { top: 146px; bottom: auto; left: 8px; right: 8px; font-size: 13px; } /* 시스템 안내만: 숫자판 바로 아래(지명 표지판 높이 위) */
}

/* ── 다가오는 지점(무대 아래 정보 칸) ── */
.run-info .ele-svg { margin-top: 2px; }
.marks { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 10px; }
.mark { border-left: 4px solid var(--line); padding: 3px 10px; font-size: 13px; background: var(--raise-2); }
.mark.first { box-shadow: inset 0 0 0 1px var(--accent); }
.mark.k-left, .mark.k-right { border-left-color: var(--ink); }
.mark.k-uturn { border-left-color: var(--accent); }
.mark.k-up { border-left-color: var(--up); }
.mark.k-down { border-left-color: var(--down); }
.mark.k-bridge { border-left-color: var(--ahead); }
.mark.k-water { border-left-color: var(--water); }
.mark.k-gel { border-left-color: var(--gel); }
.mark .ic-gel { width: 14px; height: 14px; vertical-align: -2px; color: var(--gel); }
.gel-info { display: flex; gap: 6px; align-items: flex-start; }
.gel-info .ic { flex: none; width: 16px; height: 16px; margin-top: 3px; color: var(--gel); }
.gel-info span { min-width: 0; }
.gel-info small { display: block; font-size: 12px; line-height: 1.5; }
.mark.k-sprint, .mark.k-build { border-left-color: var(--sprint); }

/* 고도 그래프(무대 아래 정보 칸, common.js elevationSvg) */
.ele-svg { width: 100%; height: auto; display: block; }
.ele-area { fill: var(--accent); opacity: .18; }
.ele-line { fill: none; stroke: var(--accent); stroke-width: 2; }
.ele-seg { stroke: var(--line); stroke-dasharray: 3 3; }
.zone-up { fill: var(--up); opacity: .13; }
.zone-down { fill: var(--down); opacity: .13; }
.zone-build { fill: var(--sprint); opacity: .07; }
.zone-sprint { fill: var(--sprint); opacity: .16; }
.ele-tick { fill: var(--sub); font-size: 11px; }
.ele-water { font-size: 11px; }
.ele-gel { color: var(--gel); }
.ele-dot { fill: var(--water); opacity: .7; }
.ele-me { fill: #fff; stroke: var(--accent); stroke-width: 3; }

/* 2D 지도 위 지점 이름 (미니맵·멀리 줌아웃하면 숨김) */
.mark-icon { width: 0 !important; height: 0 !important; }
.mark-icon span { position: absolute; left: 0; top: 0; transform: translate(-50%, -150%); white-space: nowrap; background: var(--surface); color: var(--ink); font-size: 11px; font-weight: 700; padding: 2px 7px; box-shadow: inset 3px 0 0 var(--sub), 0 1px 4px rgba(0,0,0,.4); }
.mark-icon.k-left span, .mark-icon.k-right span { box-shadow: inset 3px 0 0 var(--ink), 0 1px 4px rgba(0,0,0,.4); }
.mark-icon.k-uturn span { box-shadow: inset 3px 0 0 var(--accent), 0 1px 4px rgba(0,0,0,.4); }
.mark-icon.k-bridge span { box-shadow: inset 3px 0 0 var(--ahead), 0 1px 4px rgba(0,0,0,.4); }
.mark-icon.k-up span { box-shadow: inset 3px 0 0 var(--up), 0 1px 4px rgba(0,0,0,.4); }
.mark-icon.k-down span { box-shadow: inset 3px 0 0 var(--down), 0 1px 4px rgba(0,0,0,.4); }
.mark-icon.k-sprint span, .mark-icon.k-start span, .mark-icon.k-finish span { background: var(--accent); color: var(--on-accent); box-shadow: 0 1px 4px rgba(0,0,0,.4); }
.room-map.mini .mark-icon, .zoom-lo .mark-icon.k-place, .zoom-lo .mark-icon.k-up, .zoom-lo .mark-icon.k-down { display: none; }

/* 2D 러너 캐릭터 (옆모습, 팔다리 흔들기) */
.runner-icon { background: none; border: 0; }
.runner-icon svg { display: block; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 0 1.2px #fff) drop-shadow(0 0 1.2px #fff) drop-shadow(0 1px 2px rgba(0,0,0,.35)); }
.runner-icon.flip svg { transform: scaleX(-1); }
.runner2d.bot { opacity: .92; }
.runner2d .leg, .runner2d .arm { animation: swing .62s ease-in-out infinite alternate; }
.runner2d .leg.b, .runner2d .arm.f { animation-delay: -.62s; }
.runner2d .arm { animation-name: swingArm; }
.runner2d .body { animation: bob .31s ease-in-out infinite alternate; }
.runner2d .pony { transform-origin: 15.4px 6.6px; animation: pony .31s ease-in-out infinite alternate; }
.runner-icon.fast .runner2d .leg, .runner-icon.fast .runner2d .arm { animation-duration: .36s; }
.runner-icon.fast .runner2d .leg.b, .runner-icon.fast .runner2d .arm.f { animation-delay: -.36s; }
.runner-icon.fast .runner2d .body, .runner-icon.fast .runner2d .pony { animation-duration: .18s; }
.runner-icon.still .runner2d * { animation: none !important; }
@keyframes swing { from { transform: rotate(-26deg); } to { transform: rotate(26deg); } } /* 짧은 보폭 (3D 러너와 같게) */
@keyframes swingArm { from { transform: rotate(28deg); } to { transform: rotate(-28deg); } } /* 작은 팔치기 */
@keyframes bob { from { transform: translateY(0); } to { transform: translateY(-1.4px); } }
@keyframes pony { from { transform: rotate(-10deg); } to { transform: rotate(14deg); } }
.pick-preview .runner2d .leg, .pick-preview .runner2d .arm { animation-duration: .5s; }
.pick-preview .runner2d .leg.b, .pick-preview .runner2d .arm.f { animation-delay: -.5s; }

/* ── 3. 출발 카운트다운 (#fsRoot 안 · 화면 전체를 덮어 전체 화면에서도 보임, 누르면 건너뛰기) ── */
.countdown { position: absolute; inset: 0; z-index: 2500; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 16px 16px calc(var(--lg-h) + 12px); background: rgba(11,19,36,.62); color: #fff; text-align: center; cursor: pointer; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
.cd-cap { min-height: 1.55em; font-size: clamp(16px, 4.6vw, 24px); font-weight: 800; background: var(--accent); color: var(--on-accent); padding: 4px 24px 4px 12px; clip-path: var(--cut); }
.cd-cap:empty { visibility: hidden; }
.cd-num { font-family: var(--f-num); font-size: clamp(110px, min(46vw, 28vh), 260px); font-weight: 800; line-height: .9; min-height: .9em; color: #fff; text-shadow: 0 6px 0 rgba(0,0,0,.35); }
.cd-num.pop { animation: cdPop 1.1s ease-out both; }
.cd-num.go { color: var(--accent); font-family: var(--f-body); font-size: clamp(76px, 22vw, 180px); animation: cdGo .5s cubic-bezier(.2,1.4,.4,1) both; }
.cd-keys { display: grid; gap: 6px; width: 100%; max-width: 360px; margin: 6px 0 0; padding: 0; list-style: none; text-align: left; }
.cd-keys:empty { display: none; }
.cd-keys li { display: grid; grid-template-columns: 72px minmax(0, 1fr); align-items: baseline; gap: 10px; padding: 8px 12px; font-size: 14px; background: var(--panel); box-shadow: inset 0 3px 0 var(--accent); }
.cd-keys b { font-family: var(--f-num); font-size: 18px; font-weight: 800; color: var(--accent-text); }
.cd-skip { margin: 0 0 2px; font-size: 13px; background: rgba(11,19,36,.7); padding: 4px 12px; }
@keyframes cdPop { 0% { transform: scale(1.6); opacity: 0; } 15% { transform: scale(1); opacity: 1; } 80% { opacity: 1; } 100% { transform: scale(.86); opacity: .3; } }
@keyframes cdGo { from { transform: scale(1.7); opacity: 0; } to { transform: none; opacity: 1; } }
/* 카운트다운 동안 아래 버튼 줄·조작 줄·HUD 숨김 (안내 글자와 겹침 방지) */
body.counting .cheer-bar, body.counting .ctrl, body.counting .hud, body.counting .toast, body.counting .room-map.mini { visibility: hidden; }
@media (min-width: 900px) { .cd-keys { max-width: 520px; } }

/* ── 5. 완주: 기록 카드 + 메달 ── */
.overlay .fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.overlay .finish-card { position: relative; max-width: 1040px; max-height: 92vh; overflow: auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 18px 16px; text-align: left; }
.fin-race { margin: 0 0 2px; }
.fin-eye { margin: 0; color: var(--accent-text); font-size: 13px; font-weight: 800; letter-spacing: .04em; }
.fin-time { font-family: var(--f-num); font-size: 64px; line-height: 1; font-weight: 800; margin: 4px 0; }
.fin-delta { margin: 0; font-size: 14px; }
.fin-delta b { color: var(--ahead); font-family: var(--f-num); font-size: 17px; }
.fin-meta { margin: 6px 0 0; }
#finishText { margin: 10px 0 0; font-size: 14px; color: var(--sub); }
.fin-ask { background: var(--raise-2); padding: 12px 14px; margin-top: 16px; }
.fin-ask p { margin: 0 0 10px; }
.fin-ask .row { margin: 0 0 6px; }
.fin-medal { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; min-width: 0; }
.medal-wrap { width: 200px; max-width: 70%; margin: 0 auto; perspective: 600px; }
.medal-wrap svg { width: 100%; height: auto; display: block; filter: drop-shadow(0 8px 18px rgba(0,0,0,.45)); }
.medal-wrap.drop svg { transform-origin: 50% 0; animation: medalDrop 1.1s cubic-bezier(.2,1.4,.4,1) both, medalSwing 2.4s ease-in-out 1.1s 2 alternate; }
.medal-shine { animation: shine 2.2s ease-in-out .9s infinite; }
.not-official { margin: 0; font-size: 13px; font-weight: 700; color: var(--sub); }
.fin-actions { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; width: 100%; max-width: 340px; }
.fin-plan { font-size: 13px; padding: 10px 6px; color: var(--accent-text); }
@keyframes medalDrop { from { transform: translateY(-120%) rotateY(540deg) scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes medalSwing { from { transform: rotate(-4deg); } to { transform: rotate(4deg); } }
@keyframes shine { from { transform: translateX(-60px) rotate(20deg); } to { transform: translateX(300px) rotate(20deg); } }
@media (min-width: 900px) {
  .overlay .finish-card { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 16px 32px; padding: 28px 32px; align-items: center; }
  .fin-medal { grid-column: 2; grid-row: 1 / span 2; }
  .fin-ask { margin-top: 0; }
  .fin-time { font-size: 96px; }
  .medal-wrap { width: 240px; }
}

/* ── 의견 보내기 (run 아래 버튼 줄 · index 바닥) — 창은 body 에 붙음 ── */
.fb-box { max-height: 92vh; overflow: auto; }
.fb-box h2 { margin-bottom: 4px; }
.fb-kinds { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 12px; }
.fb-label { display: block; font-size: 13px; font-weight: 700; color: var(--sub); margin: 0 0 4px; }
.fb-box textarea, .fb-box input { display: block; width: 100%; min-width: 0; max-width: 100%; font: inherit; padding: 10px 12px; border-radius: 2px; border: 1px solid var(--line); background: var(--field); color: var(--ink); }
.fb-box textarea { resize: vertical; min-height: 110px; }
.fb-count { text-align: right; margin: 2px 0 10px; }
.fb-box .row { margin: 12px 0 4px; }
.fb-msg:empty { display: none; }
.fb-foot { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin: 0 0 14px; }

/* ── 페이스 밴드 인쇄: "페이스 밴드 인쇄" 버튼이 body 에 printing-band 를 붙이면 밴드 종이만 남는다. A4 에 폭 30mm 밴드 2장(오려 쓰기) ── */
#bandPrint { display: none; }
.band-sheet { page: band; }
@page band { size: A4 portrait; margin: 8mm; }
@media print {
  :root { color-scheme: light; }
  html, body.printing-band { background: #fff !important; }
  body.printing-band > *:not(#bandPrint) { display: none !important; }
  body.printing-band #bandPrint { display: block; color: #000; font-family: var(--f-body); line-height: 1.25; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .bs-top { margin: 0 0 4mm; font-size: 9pt; }
  .bs-cols { display: flex; gap: 14mm; align-items: flex-start; }
  .band { width: 30mm; border: 0.3mm dashed #000; padding: 1.5mm 1.2mm 1.5mm; break-inside: avoid; }
  .bd-head { border-bottom: 0.3mm solid #000; padding-bottom: 1mm; margin-bottom: 0.6mm; }
  .bd-head b { display: block; font-family: var(--f-num); font-size: 17pt; line-height: 1; font-weight: 800; }
  .bd-head span { display: block; font-size: 5.5pt; line-height: 1.25; }
  .bd-rows { list-style: none; margin: 0; padding: 0; }
  .bd-rows li { display: grid; grid-template-columns: 6.5mm 11.5mm minmax(0, 1fr); align-items: center; height: var(--rh, 8mm); border-bottom: 0.15mm solid #888; font-size: 7pt; }
  .bd-rows li.five { background: #ddd; border-bottom: 0.4mm solid #000; font-weight: 800; }
  .bd-rows .k { font-family: var(--f-num); font-size: 8.5pt; font-weight: 800; text-align: right; padding-right: 1mm; }
  .bd-rows .c { font-family: var(--f-num); font-size: 9pt; font-weight: 700; text-align: right; white-space: nowrap; }
  .bd-rows .m { font-size: 6.5pt; font-weight: 700; padding-left: 1mm; white-space: nowrap; overflow: hidden; }
  .bd-legend, .bd-foot { margin: 1mm 0 0; font-size: 5pt; line-height: 1.3; word-break: keep-all; }
  .bd-foot { border-top: 0.2mm solid #000; padding-top: 0.8mm; }
  .bs-fine { margin: 4mm 0 0; font-size: 8pt; }
}

/* ── 움직임 줄이기 ── */
@media (prefers-reduced-motion: reduce) {
  .runner2d * { animation: none !important; }
  .medal-wrap.drop svg, .medal-shine { animation: none; }
  .cd-num.pop, .cd-num.go { animation: none; }
  .en-head i::after { animation: none; }
  .energy.pulse, .energy.done { animation: none; }
  .nx-main.near { animation: none; }
  .hud-tip.fresh, .hud-zone[data-flash] { animation: none; }
  .en-head { transition: none; }
  .seek-bar { animation: none; }
  .toast { transition: none; }
}

/* SEO 정적 구역 (build_seo.mjs 가 HTML 을 만든다): 홈 대회 목록 · 설명 글 · 404 */
.race-list { margin: 16px 0 0; min-width: 0; }
.race-list h2 { margin: 0 0 10px; }
.race-links { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin: 0; padding: 0; list-style: none; }
.race-links li { min-width: 0; }
.race-links a { display: block; min-width: 0; padding: 10px 14px; background: var(--surface); border-top: 3px solid var(--line); color: var(--ink); text-decoration: none; }
.race-links a:hover, .race-links a:focus-visible { border-top-color: var(--accent); }
.race-links b { display: block; overflow-wrap: anywhere; }
.race-links small { display: block; color: var(--sub); font-size: 13px; overflow-wrap: anywhere; }
.seo-sum { margin: 32px 0 0; min-width: 0; }
.seo-sum h3 { font-size: 17px; margin: 20px 0 6px; }
.seo-sum p, .seo-sum li { overflow-wrap: anywhere; }
.seo-sum ul { margin: 6px 0; padding-left: 1.2em; }
.seo-sum li { margin: 3px 0; }
.seo-sum a:not(.btn) { color: var(--accent-text); }
@media (min-width: 720px) { .race-links { grid-template-columns: repeat(3, minmax(0, 1fr)); } }