/* ══ WMAC Daegu 2026 — 지도 우선 UI ═══════════════════════════════════
   공식 엠블럼에서 뽑은 브랜드 색과 전진 기울기(스피드라인) 모티프를 그대로 쓴다.
   지도가 콘텐츠이므로 UI 는 지도 위에 떠 있는 어두운 크롬으로 두고, 설명은 모달로 뺀다. */
:root {
  --brand:      #BD1C20;   /* 공식 로고타입 레드 */
  --brand-hi:   #D11120;   /* 밝은 레드(강조) */
  --brand-dk:   #8E1418;
  --gold:       #EEB11A;   /* World Masters Athletics */
  --green:      #11813B;   /* 대구광역시 */
  --ink:        #17100F;
  --ink-2:      #241A19;
  --ink-3:      #332624;
  --line:       #3E2F2D;
  --text:       #F5EFEE;
  --muted:      #B3A3A0;
  --paper:      #FFFFFF;
  --paper-text: #241A19;
  --paper-mute: #6D5D5A;
  --paper-line: #E7DEDC;
  --water:      #1C7ED6;
  --aid:        #1F9D55;
  --turn:       #6F42C1;
  --r:   14px;
  --r-s: 10px;
  --shadow: 0 2px 6px rgba(0,0,0,.18), 0 12px 34px rgba(0,0,0,.24);
  --top: 56px;                     /* 상단바 높이 */
  --sb: 0px;                       /* 상황 스트립 높이 — 표시될 때 JS 가 채운다 */
  --bottom-ui: 0px;                /* 화면 아래 UI(하단바+도크)가 먹는 높이 — JS 가 채운다 */
  --sans: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic",
          "Noto Sans KR", "맑은 고딕", sans-serif;
}
@media (min-width: 1024px) { :root { --top: 62px; } }

* { box-sizing: border-box; }
/* .login-wrap{display:grid}·.tb-btn{display:inline-flex} 처럼 클래스가 display 를 지정하면
   UA 의 [hidden]{display:none} 을 특이도로 이겨서 hidden 이 무시된다. 전역으로 못박는다. */
[hidden] { display: none !important; }
html, body { height: 100%; }
body {
  margin: 0; font-family: var(--sans); font-size: 15px; line-height: 1.6;
  color: var(--text); background: var(--ink); word-break: keep-all;
  -webkit-text-size-adjust: 100%; overscroll-behavior: none;
}
img { max-width: 100%; display: block; }
button { font: inherit; color: inherit; }
h1,h2,h3,h4 { margin: 0; line-height: 1.25; letter-spacing: -.02em; }
.num { font-variant-numeric: tabular-nums; }

/* 스피드라인 — 엠블럼의 전진 기울기(-16°)를 UI 전반의 공통 리듬으로 */
.speed {
  background-image: repeating-linear-gradient(106deg,
    rgba(255,255,255,.13) 0 2px, transparent 2px 9px);
}
.slash { display: inline-block; transform: skewX(-11deg); }

/* ══ 상단바 ═══════════════════════════════════════════════════════════ */
.topbar {
  position: fixed; inset: 0 0 auto 0; height: var(--top); z-index: 1000;
  display: flex; align-items: center; gap: 10px; padding: 0 12px;
  background: linear-gradient(96deg, var(--brand) 0%, var(--brand-dk) 62%, #5E0E11 100%);
  box-shadow: 0 1px 0 rgba(0,0,0,.35), 0 6px 20px rgba(0,0,0,.28);
}
.topbar::after {   /* 하단 골드 라인 — WMA 상징색 */
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: linear-gradient(90deg, var(--gold), var(--green) 55%, transparent);
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; min-width: 0; }
.brand .chip {
  background: #fff; border-radius: 5px; padding: 5px 9px; display: block; flex: none;
  box-shadow: 0 1px 3px rgba(0,0,0,.25);
}
.brand img { height: 16px; width: auto; }
@media (min-width: 1024px) { .brand img { height: 20px; } .brand .chip { padding: 6px 11px; } }
.brand .sub {
  display: none; font-size: 11px; font-weight: 700; letter-spacing: .06em;
  color: rgba(255,255,255,.72); padding-left: 10px; border-left: 1px solid rgba(255,255,255,.28);
  text-transform: uppercase;
}
@media (min-width: 860px) { .brand .sub { display: block; } }

.tb-spacer { flex: 1 1 auto; }

/* 경기 전환 세그먼트 */
.seg { display: flex; gap: 3px; padding: 3px; border-radius: 999px; background: rgba(0,0,0,.26); }
/* 지도 위 경기 전환 — 모바일은 상단바 바로 아래 전체폭(지도유형 버튼과 겹치지 않게),
   데스크톱은 지도 가운데 위에 부유. */
.seg.float {
  position: fixed; z-index: 800; left: 8px; right: 8px; top: calc(var(--top) + var(--sb) + 8px);
  background: rgba(23,16,15,.9); backdrop-filter: blur(8px);
  border: 1px solid var(--line); justify-content: center;
}
.seg.float button { flex: 1 1 0; padding: 8px 6px; }
@media (min-width: 700px) {
  .seg.float { left: 50%; right: auto; transform: translateX(-50%); top: calc(var(--top) + var(--sb) + 12px); }
  .seg.float button { flex: none; padding: 6px 14px; }
}
.seg button {
  border: 0; background: transparent; color: rgba(255,255,255,.78); cursor: pointer;
  padding: 6px 12px; border-radius: 999px; font-size: 13px; font-weight: 800; white-space: nowrap;
}
.seg button[aria-pressed="true"] { background: #fff; color: var(--brand); }
.seg button:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }

.tb-btn {
  border: 1px solid rgba(255,255,255,.32); background: rgba(0,0,0,.18); color: #fff;
  border-radius: 999px; padding: 6px 12px; font-size: 12.5px; font-weight: 800; cursor: pointer;
  white-space: nowrap; text-decoration: none; display: inline-flex; align-items: center; gap: 5px;
}
.tb-btn:hover { background: rgba(0,0,0,.34); }
.tb-btn .badge {
  min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px; background: var(--gold);
  color: #3A2400; font-size: 11px; font-weight: 900; display: grid; place-items: center;
}

/* 좁은 화면에서 감출 상단바 요소 — .tb-btn/.dday 의 display 를 이겨야 해서 뒤에 둔다. */
.topbar .hide-sm { display: none; }
@media (min-width: 860px) { .topbar .hide-sm { display: inline-flex; } }

/* D-day 배지 — 기울여서 속도감 */
.dday {
  display: none; align-items: center; gap: 7px; padding: 5px 12px 5px 10px;
  background: #fff; color: var(--brand); border-radius: 4px; transform: skewX(-11deg);
}
.dday > * { transform: skewX(11deg); }
.dday b { font-size: 16px; font-weight: 900; letter-spacing: -.03em; }
.dday span { font-size: 11.5px; font-weight: 800; color: var(--paper-mute); }
@media (min-width: 700px) { .dday { display: inline-flex; } }

/* ══ 지도 ═════════════════════════════════════════════════════════════ */
#map { position: fixed; inset: calc(var(--top) + var(--sb)) 0 0 0; background: #10201A; }

/* ══ 폭염 상황 스트립 ═════════════════════════════════════════════════
   상단바 바로 아래. 특보·오늘 최고·강수를 한 줄로 — 상황판의 첫인상이다. */
.statusbar {
  position: fixed; z-index: 950; top: var(--top); left: 0; right: 0; height: 40px;
  display: flex; align-items: center; gap: 0;
  background: linear-gradient(90deg, #2A1210, #3A1A16 60%, #2A1210);
  border-bottom: 1px solid #4A2A24; overflow: hidden;
}
.sb-scroll { display: flex; align-items: center; gap: 7px; overflow-x: auto; padding: 0 12px;
             height: 100%; flex: 1; scrollbar-width: none; }
.sb-scroll::-webkit-scrollbar { display: none; }
.sb-chip {
  display: inline-flex; align-items: center; gap: 5px; flex: none; white-space: nowrap;
  font-size: 13px; font-weight: 800; color: #F2E4E1;
}
.sb-chip b { font-variant-numeric: tabular-nums; }
.sb-chip .tag {
  font-size: 11.5px; font-weight: 900; padding: 2px 7px; border-radius: 3px; color: #fff;
  transform: skewX(-11deg);
}
.sb-chip .tag span { display: inline-block; transform: skewX(11deg); }
.sb-sep { width: 1px; height: 15px; background: #5A342C; flex: none; }
.sb-muted { color: #B79A94; font-weight: 700; }
.statusbar .sb-more {
  flex: none; border: 0; border-left: 1px solid #4A2A24; background: rgba(0,0,0,.25);
  color: #F2E4E1; font-size: 12.5px; font-weight: 800; padding: 0 12px; height: 100%; cursor: pointer;
}
.statusbar .sb-more:hover { background: rgba(0,0,0,.45); }
.leaflet-container { font: inherit; background: #10201A; }
/* 확대/축소·저작권 표시가 하단바·도크에 가리지 않게 그만큼 띄운다.
   (감사 결과 zoom↔peakbar, attribution↔dock 이 모든 화면에서 겹쳤다) */
.leaflet-bottom { bottom: var(--bottom-ui); }
.leaflet-control-attribution { background: rgba(255,255,255,.82); }
.leaflet-control-attribution { font-size: 10.5px; }
.leaflet-bar a { color: var(--paper-text) !important; }

/* 지도 위 우측 도구 */
.tools { position: fixed; right: 10px; top: calc(var(--top) + var(--sb) + 58px); z-index: 700;
         display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }
@media (min-width: 700px) { .tools { right: 12px; top: calc(var(--top) + var(--sb) + 12px); } }
/* 상세 패널이 열리면 지도유형 버튼이 그 아래로 숨는다 → 패널 폭만큼 왼쪽으로 */
@media (min-width: 1024px) { body.panel-open .tools { right: 392px; } }
.basemap { display: flex; background: rgba(23,16,15,.86); border: 1px solid var(--line);
           border-radius: 999px; padding: 3px; backdrop-filter: blur(6px); }
.basemap button {
  border: 0; background: transparent; color: var(--muted); cursor: pointer;
  padding: 5px 11px; border-radius: 999px; font-size: 12px; font-weight: 800;
}
.basemap button[aria-pressed="true"] { background: var(--brand); color: #fff; }

/* ══ 하단/좌측 도크 ═══════════════════════════════════════════════════ */
.dock {
  position: fixed; z-index: 800; left: 0; right: 0; bottom: 0;
  background: rgba(23,16,15,.93); backdrop-filter: blur(10px);
  border-top: 1px solid var(--line); border-radius: 18px 18px 0 0;
  box-shadow: var(--shadow); max-height: 48vh; display: flex; flex-direction: column;
}
.dock-grip { display: flex; justify-content: center; padding: 7px 0 2px; cursor: grab; }
.dock-grip i { width: 38px; height: 4px; border-radius: 3px; background: #5A4644; display: block; }
.dock-hd { display: flex; align-items: center; gap: 9px; padding: 4px 15px 10px; }
.dock-hd .tag {
  font-size: 10.5px; font-weight: 900; letter-spacing: .08em; padding: 3px 8px; border-radius: 3px;
  background: var(--brand); color: #fff; transform: skewX(-11deg);
}
.dock-hd .tag span { display: inline-block; transform: skewX(11deg); }
.dock-hd h2 { font-size: 16.5px; font-weight: 900; }
.dock-hd .when { margin-left: auto; font-size: 12.5px; font-weight: 800; color: var(--gold); white-space: nowrap; }
.dock-bd { padding: 0 15px 14px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.dock.collapsed .dock-bd { display: none; }

@media (min-width: 1024px) {
  .dock {
    /* 내용 높이만큼만 — top 을 고정하면 아래가 텅 빈 검은 판으로 남는다. */
    left: 14px; right: auto; top: calc(var(--top) + var(--sb) + 62px); bottom: auto;
    width: 340px; border-radius: var(--r); border: 1px solid var(--line);
    max-height: calc(100vh - var(--top) - var(--sb) - 90px);
  }
  .dock-grip { display: none; }
  .dock-hd { padding: 15px 16px 11px; }
  .dock-bd { padding: 0 16px 16px; }
}

/* 요약 수치 타일 */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin-bottom: 12px; }
.stat { background: var(--ink-2); border: 1px solid var(--line); border-radius: var(--r-s); padding: 9px 10px; }
.stat .k { font-size: 10.5px; font-weight: 800; color: var(--muted); letter-spacing: .02em; }
.stat .v { font-size: 16px; font-weight: 900; margin-top: 1px; letter-spacing: -.02em; }
.stat .v small { font-size: 11px; font-weight: 800; color: var(--muted); margin-left: 1px; }

/* 레이어 토글 */
.legend { display: flex; flex-wrap: wrap; gap: 6px; }
.lg {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  border: 1px solid var(--line); background: var(--ink-2); color: var(--muted);
  border-radius: 999px; padding: 5px 11px 5px 8px; font-size: 12px; font-weight: 700;
}
.lg[aria-pressed="true"] { color: var(--text); border-color: #6A504D; background: var(--ink-3); }
.lg i { width: 10px; height: 10px; border-radius: 50%; display: block; flex: none; }
.lg[aria-pressed="false"] i { opacity: .3; }
.lg.line i { width: 16px; height: 3px; border-radius: 2px; }
.lg.zoomed-out { opacity: .55; font-style: italic; }

.dock-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 12px; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer;
  border: 1px solid var(--line); background: var(--ink-2); color: var(--text);
  border-radius: var(--r-s); padding: 10px 12px; font-size: 13px; font-weight: 800;
  text-decoration: none; text-align: center;
}
.btn:hover { background: var(--ink-3); }
.btn.primary { background: var(--brand); border-color: var(--brand); }
.btn.primary:hover { background: var(--brand-hi); }
.btn.wide { grid-column: 1 / -1; }
.btn.sm { padding: 7px 11px; font-size: 12.5px; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

.hint { font-size: 12.5px; color: var(--muted); margin-top: 10px; line-height: 1.55; }

/* ══ 지도 마커 ════════════════════════════════════════════════════════ */
/* 물방울 핀 — 작은 원형 점은 코스선에 묻혀 안 보인다는 지적이 있어 전부 핀으로 바꿨다.
   끝점이 실제 위치이므로 iconAnchor 를 아래 꼭짓점에 맞춘다. */
.mpin {
  border-radius: 50% 50% 50% 0; transform: rotate(-45deg);
  border: 2.5px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,.45);
  display: grid; place-items: center;
}
.mpin > span { transform: rotate(45deg); line-height: 1; font-weight: 900; color: #fff; }
.mpin.dbl { box-shadow: 0 2px 6px rgba(0,0,0,.45), 0 0 0 3px rgba(255,255,255,.35); }
/* 코스 위 배지 — 원의 중심이 실제 지점. 흰 링으로 지도 배경과 분리한다. */
.mbadge {
  border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 900;
  box-shadow: 0 0 0 2.5px #fff, 0 2px 6px rgba(0,0,0,.45); line-height: 1;
  font-variant-numeric: tabular-nums;
}
.mbadge.km { box-shadow: 0 0 0 2px #fff, 0 2px 5px rgba(0,0,0,.4); letter-spacing: -.03em; }
.mbadge-wrap { display: flex; flex-direction: column; align-items: center; }
.mbadge-cap {
  background: #241A19; color: #fff; border: 1.5px solid #fff; border-radius: 999px;
  font-size: 10px; font-weight: 900; padding: 0 6px; line-height: 15px; margin-bottom: 2px;
  white-space: nowrap; box-shadow: 0 1px 3px rgba(0,0,0,.4); font-variant-numeric: tabular-nums;
}
.mbadge.dbl { box-shadow: 0 0 0 2.5px #fff, 0 0 0 5px rgba(255,255,255,.45), 0 2px 6px rgba(0,0,0,.45); }

/* 경기장 — 더 크고, 이름표를 달아 지도만 봐도 어디가 어딘지 읽히게 */
.vpin {
  display: flex; align-items: center; gap: 0; white-space: nowrap;
}
.vpin .mk {
  width: 38px; height: 38px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg);
  border: 3px solid #fff; box-shadow: 0 3px 10px rgba(0,0,0,.5); display: grid; place-items: center; flex: none;
}
.vpin .mk > span { transform: rotate(45deg); font-size: 17px; line-height: 1; }
.vpin.left { flex-direction: row; }
.vpin.left .lb { margin-left: 0; margin-right: 9px; }
.vpin .lb {
  margin-left: 9px; background: rgba(23,16,15,.92); color: #fff; border: 1px solid rgba(255,255,255,.3);
  border-radius: 6px; padding: 3px 9px; font-size: 12px; font-weight: 800; box-shadow: 0 2px 8px rgba(0,0,0,.4);
}
.vpin .lb b { display: block; font-size: 12.5px; }
.vpin .lb i { display: block; font-style: normal; font-size: 10.5px; color: #FFD9A0; font-weight: 700; }

/* ── 온도 타일·표 ─────────────────────────────────────────── */
.heat { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 12px; }
.heat-hd { display: flex; align-items: baseline; gap: 7px; margin-bottom: 8px; }
.heat-hd h3 { font-size: 12.5px; font-weight: 900; color: var(--gold); letter-spacing: .02em; }
.heat-hd span { font-size: 11px; color: var(--muted); margin-left: auto; }
.heat-row { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.heat-tile {
  background: linear-gradient(140deg, #2A1A18, #3A211C); border: 1px solid var(--line);
  border-radius: var(--r-s); padding: 9px 10px;
}
.heat-tile .k { font-size: 10.5px; font-weight: 800; color: var(--muted); }
.heat-tile .v { font-size: 18px; font-weight: 900; letter-spacing: -.02em; margin-top: 1px; }
.heat-tile .v small { font-size: 11px; font-weight: 800; color: var(--muted); margin-left: 2px; }
.heat-tile .s { font-size: 10.5px; color: #FFB4A0; font-weight: 700; }

.tabs { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 10px; align-items: center; }
.tabs-note { font-size: 12px; color: var(--paper-mute); font-weight: 700; margin-left: auto; }
/* 보기 전환(스타디움 / 코스·교량 / 코스·거리표지) — 날짜 탭과 구분되게 한 칸 아래, 다른 톤 */
.vtabs { display: flex; gap: 3px; padding: 3px; border-radius: 10px; background: #F4EEED;
         border: 1px solid var(--paper-line); margin-bottom: 14px; overflow-x: auto; }
.vtabs button {
  flex: 1 1 auto; white-space: nowrap; border: 0; background: transparent; cursor: pointer;
  padding: 8px 14px; border-radius: 8px; font-size: 13.5px; font-weight: 800; color: var(--paper-mute);
}
.vtabs button[aria-pressed="true"] { background: #fff; color: var(--brand);
                                     box-shadow: 0 1px 3px rgba(0,0,0,.12); }
/* 그래프 시각 선택 */
.hrsel { display: flex; flex-wrap: wrap; gap: 4px; margin: 2px 0 10px; align-items: center; }
.hrsel .lb { font-size: 12.5px; font-weight: 800; color: var(--paper-mute); margin-right: 3px; }
.hrsel button {
  border: 1px solid var(--paper-line); background: #fff; color: var(--paper-mute); cursor: pointer;
  padding: 6px 13px; border-radius: 999px; font-size: 13px; font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.hrsel button[aria-pressed="true"] { color: #fff; border-color: transparent; }
.tabs button {
  border: 1px solid var(--paper-line); background: #FAF7F7; color: var(--paper-mute);
  border-radius: 999px; padding: 6px 15px; font-size: 13.5px; font-weight: 800; cursor: pointer;
}
.tabs button[aria-pressed="true"] { background: var(--brand); border-color: var(--brand); color: #fff; }

table.heat-t { width: 100%; border-collapse: collapse; font-size: 13.5px; font-variant-numeric: tabular-nums; }
table.heat-t th, table.heat-t td { padding: 6px 5px; border-bottom: 1px solid var(--paper-line); text-align: right; }
table.heat-t th:first-child, table.heat-t td:first-child { text-align: left; white-space: nowrap; }
table.heat-t thead th { color: var(--paper-mute); font-weight: 800; font-size: 11.5px; }
table.heat-t td.pass { background: #FFF4E5; font-weight: 900; color: #8A4B00; }
table.heat-t tr.hot td { background: #FDECEC; }
table.heat-t .km { font-weight: 900; }
table.heat-t .nm { color: var(--paper-mute); font-weight: 600; font-size: 11.5px; }
/* ── 온도 모달: 스타디움 카드 ───────────────────────────── */
.hsec + .hsec { margin-top: 18px; }
.hsec-hd { display: flex; align-items: baseline; gap: 8px; margin-bottom: 9px; }
.hsec-hd h3 { font-size: 15px; font-weight: 900; color: var(--paper-text);
              border: 0; padding: 0; display: block; }
.hsec-hd .note { font-size: 12.5px; color: var(--paper-mute); margin-left: auto; }

.vcards { display: grid; gap: 8px; grid-template-columns: 1fr; }
@media (min-width: 560px) { .vcards { grid-template-columns: 1fr 1fr; } }
.vcard {
  display: flex; align-items: center; gap: 12px; padding: 11px 13px;
  border: 1px solid var(--paper-line); border-radius: 12px; background: #fff;
}
.vcard.hot { border-color: #F3C0BC; background: #FFF8F7; }
.vcard .l { flex: 1; min-width: 0; }
.vcard .nm { font-size: 15px; font-weight: 900; }
.vcard .ev { font-size: 12.5px; color: var(--paper-mute); margin-top: 1px; }
.vcard .bd { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.vcard .r { flex: none; text-align: right; }
.vcard .t { font-size: 25px; font-weight: 900; letter-spacing: -.03em; line-height: 1.05;
            font-variant-numeric: tabular-nums; }
.vcard .t small { font-size: 12px; font-weight: 800; margin-left: 1px; }
.vcard .sub { font-size: 12px; color: var(--paper-mute); font-variant-numeric: tabular-nums; }
.bdg { font-size: 12px; font-weight: 800; padding: 2px 7px; border-radius: 999px;
       border: 1px solid var(--paper-line); background: #FAF7F7; color: var(--paper-mute); }
.bdg.on { color: #fff; border-color: transparent; }

/* ── 특보 줄 ────────────────────────────────────────────── */
.wrn { display: flex; flex-wrap: wrap; gap: 6px; }
.wrn-i { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 999px;
         background: #FFF3F1; border: 1px solid #F6CFC9; font-size: 13px; font-weight: 800; }
.wrn-i b { color: #fff; padding: 2px 8px; border-radius: 999px; font-size: 12px; }
.wrn-i span { color: var(--paper-mute); font-weight: 700; }

/* ── 코스 온도 단면도 ───────────────────────────────────── */
.profile { width: 100%; overflow-x: auto; margin-top: 2px; }
.profile svg { display: block; width: 100%; min-width: 820px; height: auto; }
.pf-grid { stroke: #EFE7E5; stroke-width: 1; }
.pf-axis { stroke: #D9CDCA; stroke-width: 1; }
.pf-yl { fill: #9A8B88; font-size: 12px; font-weight: 700; }
.pf-nm { fill: var(--paper-text); font-size: 13px; font-weight: 800; }
.pf-km { fill: #A99A97; font-size: 11px; font-weight: 700; }
.pf-ln { fill: none; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; opacity: .55; }
.pf-ln.race { stroke-width: 3.2; opacity: 1; }
.pf-area { opacity: .16; }
.pf-dot { stroke: #fff; stroke-width: 1.4; }
/* 값이 선 위에 얹혀 읽히도록 흰 테두리를 두른다(paint-order 로 글자보다 먼저 칠함) */
.pf-val { font-size: 13.5px; font-weight: 900; fill: var(--paper-text);
          paint-order: stroke; stroke: #fff; stroke-width: 3px; stroke-linejoin: round; }
.pf-val.feels { font-size: 12.5px; font-weight: 800; fill: #B23A16; }
.pf-ln.feels { stroke-dasharray: 5 4; }
.pf-peak { font-size: 12.5px; font-weight: 900; fill: var(--brand);
           paint-order: stroke; stroke: #fff; stroke-width: 3px; stroke-linejoin: round; }
.pf-hr { paint-order: stroke; stroke: #fff; stroke-width: 3px; stroke-linejoin: round; }
.pf-turn { stroke: #6F42C1; stroke-width: 1.4; stroke-dasharray: 4 4; opacity: .7; }
.pf-tag { fill: #6F42C1; font-size: 12px; font-weight: 800; }
.pf-hr { font-size: 12.5px; font-weight: 800; }
.pf-lg { display: flex; flex-wrap: wrap; gap: 5px 12px; margin-top: 9px; align-items: center; }
.pf-lg span { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 700;
              color: var(--paper-mute); }
.pf-lg i { width: 15px; height: 3px; border-radius: 2px; display: inline-block; }
.pf-lg .race { color: var(--paper-text); font-weight: 900; }

details.more { border-top: 1px solid var(--paper-line); padding-top: 10px; margin-top: 14px; }
details.more > summary { cursor: pointer; font-size: 12.5px; font-weight: 800; color: var(--brand); }
details.more > summary::marker { color: var(--brand); }
details.more > *:not(summary) { margin-top: 10px; }

.tsc { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }

.vtemp { font-size: 11.5px; font-weight: 800; color: #B23A16; }

.pin {
  border-radius: 50%; border: 2px solid #fff; box-shadow: 0 1px 5px rgba(0,0,0,.5);
  display: grid; place-items: center; font-size: 10px; font-weight: 900; color: #fff;
}
.pin.sq { border-radius: 4px; }
.kmpin {
  background: rgba(23,16,15,.9); border: 1px solid rgba(255,255,255,.45); color: #fff;
  border-radius: 4px; font-size: 10.5px; font-weight: 900; padding: 1px 5px; white-space: nowrap;
  text-align: center; box-shadow: 0 1px 4px rgba(0,0,0,.45); font-variant-numeric: tabular-nums;
}
.bigpin {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  border: 3px solid #fff; box-shadow: 0 2px 8px rgba(0,0,0,.5); font-size: 15px;
}
.leaflet-tooltip.dtip {
  background: rgba(23,16,15,.92); border: 1px solid var(--line); color: #fff;
  font-size: 11.5px; font-weight: 800; padding: 3px 8px; border-radius: 5px; box-shadow: none;
}
.leaflet-tooltip.dtip::before { display: none; }
/* 지도 팝업도 앱 톤에 맞춘다 */
.leaflet-popup-content-wrapper {
  background: var(--ink-2); color: var(--text); border: 1px solid var(--line);
  border-radius: var(--r-s); box-shadow: var(--shadow);
}
.leaflet-popup-content { margin: 11px 13px; font-size: 13px; line-height: 1.55; }
.leaflet-popup-tip { background: var(--ink-2); border: 1px solid var(--line); }
.leaflet-popup-close-button { color: var(--muted) !important; }
.pop-t { font-weight: 900; font-size: 14px; margin-bottom: 3px; }
.pop-s { font-size: 12px; color: var(--muted); }
.pop-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 7px; }
.pop-chip { font-size: 11px; font-weight: 800; padding: 2px 7px; border-radius: 999px; color: #fff; }

/* ══ 하단 지점바 (폭염DT 하단바와 같은 역할) ═════════════════════════ */
.peakbar {
  /* 내용만큼만(right 로 늘리면 오른쪽이 텅 빈 판으로 남는다) + 남은 공간의 가운데.
     left/right 를 함께 주고 margin:auto 를 얹으면 그 띠 안에서 가운데 정렬된다. */
  position: fixed; z-index: 780; bottom: calc(var(--dock-h, 0px) + 8px); left: 8px; right: 8px;
  margin: 0 auto; width: max-content; max-width: calc(100vw - 16px);
  background: rgba(23,16,15,.93); backdrop-filter: blur(10px);
  border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow);
  display: flex; align-items: stretch; overflow: hidden;
}
@media (min-width: 1024px) {
  /* 좌측 도크(340+14)와 우측 상세 패널을 피해 앉는다. */
  /* 좌우 여백을 같게 줘 **화면 한가운데**에 온다. 좌측 도크는 이 바보다 한참 위에서 끝나므로
     폭을 좁힐 필요 없이 전폭을 쓴다(겹침 감사로 확인). 도크 오른쪽만 기준으로 가운데를 잡으면
     수학적으로는 정중앙이어도 화면 기준으로는 오른쪽으로 쏠려 보인다. */
  .peakbar { left: 14px; right: 14px; bottom: 14px; max-width: calc(100vw - 28px); }
  /* 상세 패널이 열리면 그 폭만큼 양쪽을 똑같이 물려 가운데를 유지하면서 패널을 피한다. */
  body.panel-open .peakbar { left: 392px; right: 392px; max-width: calc(100vw - 784px); }
}
.peakbar .pb-hd {
  display: none; flex-direction: column; justify-content: center; padding: 8px 12px;
  border-right: 1px solid var(--line); white-space: nowrap; flex: none;
}
@media (min-width: 700px) { .peakbar .pb-hd { display: flex; } }
.peakbar .pb-hd b { font-size: 12.5px; font-weight: 900; color: var(--gold); }
.peakbar .pb-hd i { font-style: normal; font-size: 11px; color: var(--muted); margin-top: 1px; }
.pb-scroll {
  display: flex; gap: 2px; overflow-x: auto; padding: 6px; flex: 0 1 auto; min-width: 0;
  -webkit-overflow-scrolling: touch; scrollbar-width: thin;
}
.pb-scroll::-webkit-scrollbar { height: 5px; }
.pb-scroll::-webkit-scrollbar-thumb { background: #4A3634; border-radius: 3px; }
.peak {
  /* width:max-content 가 없으면 칩이 일정 폭으로 눌려 글자가 옆 칩으로 넘쳐 겹친다. */
  flex: 0 0 auto; width: max-content; min-width: 116px; max-width: 300px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
  padding: 6px 11px; border: 0; border-radius: var(--r-s);
  background: transparent; cursor: pointer; text-align: left; color: inherit; overflow: hidden;
}
.peak:hover, .peak:focus-visible { background: var(--ink-3); }
.peak[aria-pressed="true"] { background: var(--ink-3); box-shadow: inset 0 0 0 1px #6A504D; }
.peak .n { font-size: 13.5px; font-weight: 900; white-space: nowrap; max-width: 100%;
           overflow: hidden; text-overflow: ellipsis; }
.peak .e { font-size: 11px; font-weight: 700; color: var(--gold); white-space: nowrap;
           max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.peak .r { display: flex; align-items: baseline; gap: 5px; white-space: nowrap;
           font-variant-numeric: tabular-nums; }
.peak .hi { font-size: 16px; font-weight: 900; }
.peak .lo { font-size: 12.5px; font-weight: 800; color: #8FC7F0; }
.peak .hr { font-size: 11px; font-weight: 700; color: var(--muted); }
.peak.na .hi { color: var(--muted); font-size: 12px; }

/* ══ 지점 상세 패널 (지도 옆) ═════════════════════════════════════════ */
.sidepanel {
  position: fixed; z-index: 860; left: 0; right: 0; bottom: 0; max-height: 74vh;
  background: var(--paper); color: var(--paper-text); border-radius: 18px 18px 0 0;
  box-shadow: var(--shadow); display: flex; flex-direction: column; overflow: hidden;
  animation: rise .2s cubic-bezier(.2,.8,.3,1);
}
@media (min-width: 1024px) {
  .sidepanel {
    left: auto; right: 14px; top: calc(var(--top) + var(--sb) + 14px); bottom: auto;
    width: 366px; max-height: calc(100vh - var(--top) - var(--sb) - 100px); border-radius: var(--r);
    animation: slidein .2s cubic-bezier(.2,.8,.3,1);
  }
}
@keyframes slidein { from { transform: translateX(18px); opacity: .3 } to { transform: none; opacity: 1 } }
.sp-hd { position: relative; padding: 14px 46px 12px 16px; color: #fff; flex: none;
         background: linear-gradient(96deg, var(--brand), var(--brand-dk)); }
.sp-hd .eyebrow { font-size: 10px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase;
                  color: rgba(255,255,255,.78); }
.sp-hd h2 { font-size: 17px; font-weight: 900; margin-top: 2px; }
.sp-hd .meta { font-size: 12px; color: rgba(255,255,255,.86); margin-top: 3px; }
.sp-bd { padding: 14px 16px 20px; overflow-y: auto; }
.sp-bd > * + * { margin-top: 12px; }
.sp-x { position: absolute; top: 11px; right: 12px; width: 30px; height: 30px; border-radius: 50%;
        border: 1px solid rgba(255,255,255,.4); background: rgba(0,0,0,.18); color: #fff;
        cursor: pointer; font-size: 16px; line-height: 1; display: grid; place-items: center; }
.sp-x:hover { background: rgba(0,0,0,.34); }

.sp-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.sp-stat { border: 1px solid var(--paper-line); border-radius: var(--r-s); padding: 8px 9px; background: #FAF7F7; }
.sp-stat .k { font-size: 10.5px; font-weight: 800; color: var(--paper-mute); }
.sp-stat .v { font-size: 17px; font-weight: 900; letter-spacing: -.02em; }
.sp-stat .h { font-size: 10.5px; font-weight: 700; color: var(--paper-mute); }

/* 시간대별 막대 — 값 크기를 색과 높이로 같이 보여 준다 */
.spark { display: flex; align-items: flex-end; gap: 2px; height: 74px; }
.spark .b { flex: 1; border-radius: 2px 2px 0 0; position: relative; min-height: 2px; }
.spark .b.now { outline: 2px solid var(--brand); outline-offset: 1px; }
.spark-x { display: flex; gap: 2px; margin-top: 3px; }
.spark-x span { flex: 1; text-align: center; font-size: 8.5px; color: var(--paper-mute); }
.spark-lg { font-size: 11px; color: var(--paper-mute); }

/* ══ 모달 ═════════════════════════════════════════════════════════════ */
dialog.sheet {
  padding: 0; border: 0; background: transparent; max-width: 100%; max-height: 100%;
  width: 100%; height: 100%; margin: 0; color: var(--paper-text);
}
dialog.sheet::backdrop { background: rgba(10,6,6,.62); backdrop-filter: blur(3px); }
.sheet-in {
  position: absolute; left: 0; right: 0; bottom: 0; max-height: 92vh;
  background: var(--paper); border-radius: 18px 18px 0 0; overflow: hidden;
  display: flex; flex-direction: column; box-shadow: var(--shadow);
  animation: rise .22s cubic-bezier(.2,.8,.3,1);
}
@keyframes rise { from { transform: translateY(28px); opacity: .4 } to { transform: none; opacity: 1 } }
@media (min-width: 760px) {
  .sheet-in {
    left: 50%; right: auto; bottom: auto; top: 50%; transform: translate(-50%, -50%);
    width: min(1040px, 94vw); max-height: 90vh; border-radius: var(--r);
  }
  @keyframes rise { from { transform: translate(-50%,-46%); opacity: .4 } to { transform: translate(-50%,-50%); opacity: 1 } }
}
.sheet-hd {
  position: relative; padding: 16px 52px 14px 18px; color: #fff; flex: none;
  background: linear-gradient(96deg, var(--brand), var(--brand-dk));
}
.sheet-hd .eyebrow {
  font-size: 10.5px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255,255,255,.78);
}
.sheet-hd h2 { font-size: 20px; font-weight: 900; margin-top: 2px; }
.sheet-hd .meta { font-size: 12.5px; font-weight: 700; color: rgba(255,255,255,.85); margin-top: 4px; }
.sheet-x {
  position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.4); background: rgba(0,0,0,.18); color: #fff;
  cursor: pointer; font-size: 17px; line-height: 1; display: grid; place-items: center;
}
.sheet-x:hover { background: rgba(0,0,0,.34); }
.sheet-bd { padding: 16px 18px 24px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.sheet-bd > * + * { margin-top: 14px; }

/* 모달 안 표 */
table.t { width: 100%; border-collapse: collapse; font-size: 14.5px; }
table.t th, table.t td { padding: 9px 4px; border-bottom: 1px solid var(--paper-line); text-align: left; vertical-align: top; }
table.t th { width: 112px; color: var(--paper-mute); font-weight: 800; white-space: nowrap; }
table.t tr:last-child th, table.t tr:last-child td { border-bottom: 0; }
.sheet-bd h3 {
  font-size: 13px; font-weight: 900; color: var(--brand); letter-spacing: .01em;
  padding-bottom: 6px; border-bottom: 2px solid var(--brand); display: inline-block;
}
.sheet-bd p { margin: 0; font-size: 14.5px; }
.sheet-bd .small { font-size: 13.5px; color: var(--paper-mute); }
.sheet-bd img.course { border: 1px solid var(--paper-line); border-radius: var(--r-s); width: 100%; }
.sheet-bd a { color: var(--brand); }

.klist { display: flex; flex-wrap: wrap; gap: 5px; }
.kcount { font-size: 11.5px; font-weight: 700; color: var(--paper-mute); }
.kchip {
  font-size: 13px; font-weight: 800; padding: 4px 10px; border-radius: 999px;
  border: 1px solid var(--paper-line); background: #FAF7F7; color: var(--paper-text);
  font-variant-numeric: tabular-nums;
}
.kchip.w { border-color: #BBDCF7; background: #EFF7FE; color: #12557F }
.kchip.a { border-color: #B7E2C8; background: #EFFAF3; color: #14663A }

.notice { border-left: 3px solid var(--paper-line); padding: 2px 0 2px 11px; }
.notice + .notice { margin-top: 12px; }
.notice.urgent { border-color: var(--brand); }
.notice.warn { border-color: var(--gold); }
.notice .nt { font-weight: 900; font-size: 14px; }
.notice .nb { font-size: 13px; white-space: pre-wrap; margin-top: 2px; }
.notice .nm { font-size: 11.5px; color: var(--paper-mute); margin-top: 3px; }

.vlist { display: grid; gap: 8px; }
.vrow {
  display: flex; gap: 11px; align-items: flex-start; width: 100%; text-align: left; cursor: pointer;
  border: 1px solid var(--paper-line); border-radius: var(--r-s); padding: 11px 12px; background: #fff;
}
.vrow:hover { background: #FAF7F7; }
.vrow .dot { width: 10px; height: 10px; border-radius: 50%; margin-top: 5px; flex: none; }
.vrow .n { font-weight: 900; font-size: 14px; }
.vrow .a { font-size: 12.5px; color: var(--paper-mute); }
.vrow .e { font-size: 12px; color: var(--brand); font-weight: 700; margin-top: 2px; }

.partners { width: 100%; margin-top: 6px; opacity: .92; }
.src { font-size: 12.5px; color: var(--paper-mute); line-height: 1.55; }

/* ══ 관계자(드론) 화면 ════════════════════════════════════════════════ */
/* 모바일: 지도 위 전체 패널(도크의 '실시간 영상' 버튼으로 연다). 두 개의 하단 시트가 겹치면 못 쓴다.
   데스크톱: 우하단 부유 도크. */
.vid-dock {
  position: fixed; z-index: 950; inset: calc(var(--top) + var(--sb)) 0 0 0; width: auto;
  background: rgba(23,16,15,.97); backdrop-filter: blur(10px); border: 0;
  border-radius: 0; box-shadow: none; overflow: hidden; display: flex; flex-direction: column;
}
@media (min-width: 1024px) {
  .vid-dock {
    inset: auto 12px 12px auto; width: 460px; border: 1px solid var(--line);
    border-radius: var(--r); box-shadow: var(--shadow);
  }
}
.vid-hd { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-bottom: 1px solid var(--line); }
.vid-hd h3 { font-size: 13px; font-weight: 900; }
.vid-bd { display: grid; gap: 7px; padding: 9px; overflow-y: auto; grid-template-columns: 1fr 1fr; }
@media (max-width: 559px) { .vid-bd { grid-template-columns: 1fr; } }
@media (min-width: 1024px) { .vid-bd { max-height: 52vh; } }
.vid-dock.min .vid-bd { display: none; }
.only-sm { display: block; }
@media (min-width: 1024px) { .only-sm { display: none; } }
.vcell { background: #000; border: 1px solid var(--line); border-radius: var(--r-s); overflow: hidden; }
.vcell-hd { display: flex; align-items: center; gap: 6px; padding: 5px 8px; font-size: 11.5px; font-weight: 800; }
.dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.live { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 900; color: #FF6B6B; }
.live i { width: 6px; height: 6px; border-radius: 50%; background: #FF4444; animation: pulse 1.4s infinite; }
@keyframes pulse { 0%,100% { opacity: 1 } 50% { opacity: .2 } }
.vwrap { position: relative; }
.vwrap video { width: 100%; display: block; background: #000; aspect-ratio: 1170/656; }
.vwrap.off > video { visibility: hidden; }
.vwrap.off::after {
  content: attr(data-msg); position: absolute; inset: 0; display: grid; place-items: center;
  color: #8A7573; font-size: 11.5px; text-align: center; padding: 8px; pointer-events: none;
}
.vcell-ft { padding: 5px 8px; font-size: 10.5px; color: var(--muted); min-height: 22px; font-variant-numeric: tabular-nums; }

.login-wrap { position: fixed; inset: calc(var(--top) + var(--sb)) 0 0 0; z-index: 900; display: grid; place-items: center;
              padding: 16px; background: rgba(23,16,15,.92); backdrop-filter: blur(6px); overflow-y: auto; }
.login-card { width: min(400px, 100%); background: var(--ink-2); border: 1px solid var(--line);
              border-radius: var(--r); box-shadow: var(--shadow); overflow: hidden; }
.login-card .hd { padding: 15px 18px; background: linear-gradient(96deg, var(--brand), var(--brand-dk)); }
.login-card .hd h2 { font-size: 17px; font-weight: 900; }
.login-card .bd { padding: 18px; }
.fld { margin-bottom: 12px; }
.fld label { display: block; font-size: 12px; font-weight: 800; margin-bottom: 5px; color: var(--muted); }
.fld input {
  width: 100%; padding: 11px 12px; border-radius: var(--r-s); border: 1px solid var(--line);
  background: var(--ink); color: var(--text); font: inherit; font-size: 15px;
}
.fld input:focus { outline: 2px solid var(--brand); outline-offset: -1px; }
.err { color: #FF8787; font-size: 13px; margin-top: 9px; min-height: 18px; }

.ops-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.ops-stats .stat { padding: 8px; text-align: center; }
.ops-stats .stat .v { font-size: 19px; }

table.t.dark th { color: var(--muted); border-color: var(--line); background: transparent; }
table.t.dark td { border-color: var(--line); }
.sheet-in.dark { background: var(--ink-2); color: var(--text); }
.sheet-in.dark .sheet-bd .small, .sheet-in.dark .src { color: var(--muted); }

/* 접근성 */
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }