/* ── 오늘런 site.css ──────────────────────────────────────────────
 * 출발점은 docs/mockup/*.html — 토큰과 대비 수치를 그대로 옮겼다. 기준은 G:\workspace\UIUX.md.
 * 팔레트: 새벽 남색(accent) + 트랙 레인 회청색(lane). 크림·주황 계열을 일부러 피했다.
 * 🔥 대비는 전부 계산한 값이다(WCAG 2.x 상대휘도, 2026-10-14). 새 색을 만들면 같이 잰다.
 * 수치는 paper / surface / sunken 순서. 빨강(--crit)은 '피하기'·오류 전용 — 강조색으로 쓰지 않는다.
 * 강조색(--accent)은 내비/탭바 '지금 위치' + 화면당 주 버튼 하나.
 */
:root {
  --paper:   #F3F6F5;
  --surface: #FFFFFF;
  --sunken:  #E6ECEA;
  --ink:     #132127;  /* 15.2 / 16.5 / 13.8 */
  --ink-2:   #2D3C43;  /* 10.5 / 11.4 / 9.5 */
  --muted:   #506169;  /* 5.9 / 6.5 / 5.4 */
  --line:    #C7D1CE;  /* 구분선 장식 전용(1.56) — 이 색만으로 정보를 전하지 않는다 */
  --accent:  #2F45B5;  /* 7.3 / 8.0 / 6.6 · 흰 글자를 8.0:1 로 받는다 */
  --on-accent: #FFFFFF;
  --good:    #1B6B40;  /* 6.0 / 6.5 / 5.4 · 판정 '좋음' */
  --warn:    #875200;  /* 6.0 / 6.5 / 5.4 · 판정 '주의' */
  --crit:    #AE271D;  /* 6.2 / 6.8 / 5.6 · 판정 '피하기' */
  --lane:    #DDE6F6;  /* 시간 띠 바탕 */
  --lane-ink:#1F3270;  /* lane 위 9.6 */
  --dark-veil: rgba(19,33,39,.16); /* 해 진 뒤 덮개 — 장식, 뜻은 '어두움' 글자가 전한다 */
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper:   #0E1518;
    --surface: #152024;
    --sunken:  #1C282D;
    --ink:     #E5ECEE;  /* 15.4 / 13.9 / 12.6 */
    --ink-2:   #C8D3D7;  /* 12.1 / 10.9 / 9.9 */
    --muted:   #98A9B0;  /* 7.6 / 6.8 / 6.2 */
    --line:    #2D3C42;
    --accent:  #A3AFFF;  /* 8.9 / 8.0 / 7.3 · 위 글자는 --paper 8.9:1 */
    --on-accent: #0E1518;
    --good:    #72D19C;  /* 9.9 / 9.0 / 8.1 */
    --warn:    #EDB65A;  /* 10.0 / 9.1 / 8.2 */
    --crit:    #FF8E84;  /* 8.3 / 7.5 / 6.8 */
    --lane:    #1E2A4A;
    --lane-ink:#C9D2FF;  /* lane 위 9.5 */
    --dark-veil: rgba(0,0,0,.35);
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 16px/1.6 "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
}
img, svg { max-width: 100%; }
a { color: var(--accent); text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }
.tap { display: inline-flex; align-items: center; min-height: 44px; }  /* 문장 속 행동 링크도 44px */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { max-width: 1040px; margin: 0 auto; padding: 0 16px; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 8px; z-index: 20; background: var(--surface); padding: 12px 16px; }

/* 머리 — 로고 = 홈, 내비 5칸 */
.top { background: var(--surface); border-bottom: 1px solid var(--line); }
.top .wrap { display: flex; align-items: center; gap: 16px; min-height: 60px; }
.logo { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--ink); text-decoration: none; font-weight: 800; font-size: 20px; letter-spacing: -.02em; }
.logo svg { width: 28px; height: 28px; color: var(--accent); }
.nav { margin-left: auto; display: flex; gap: 4px; }
.nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; color: var(--ink-2); text-decoration: none; }
.nav a:hover { text-decoration: underline; }
.nav a[aria-current="page"] { color: var(--accent); font-weight: 700; box-shadow: inset 0 -3px 0 var(--accent); }

main.wrap { padding-top: 32px; padding-bottom: 48px; }  /* .wrap 의 padding 줄임꼴이 이기지 않게 main.wrap 으로 */
h1 { margin: 0 0 4px; font-size: 26px; line-height: 1.25; letter-spacing: -.02em; }
h2 { font-size: 20px; line-height: 1.3; margin: 44px 0 8px; letter-spacing: -.01em; }  /* 제목은 자기 본문에 붙는다: 위 44 > 아래 8 */
h3 { font-size: 17px; line-height: 1.35; margin: 28px 0 8px; }
.sub { color: var(--muted); margin: 0 0 16px; font-size: 15px; }
.note { font-size: 14px; color: var(--muted); margin: 12px 0 0; }
.empty { background: var(--surface); border-radius: 12px; padding: 20px 16px; color: var(--ink-2); margin: 0; }
.linkish { font: inherit; color: var(--accent); background: none; border: 0; padding: 0; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* ── 추천 시간대 — 홈의 큰 글자는 이것 하나(손을 쓰는 값: 몇 시에 나갈지) */
.when { margin: 0; }
.when__where { color: var(--muted); font-size: 15px; margin: 0 0 4px; }
.when__h { margin: 0; font-size: 22px; line-height: 1.25; font-weight: 700; letter-spacing: -.02em; }
.when__h b { display: block; font-size: clamp(56px, 12vw, 104px); line-height: 1; font-weight: 800; letter-spacing: -.045em; margin: 8px 0 4px; }
.when__h b.when__none { font-size: clamp(28px, 6vw, 40px); letter-spacing: -.02em; }
.when__why { max-width: 38em; margin: 12px 0 0; color: var(--ink-2); }
.daytabs { display: flex; gap: 8px; margin: 12px 0 0; padding: 0; }
.daytabs li { list-style: none; }
.daytabs a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 8px; color: var(--ink-2); }
.daytabs a[aria-current="true"] { color: var(--ink); font-weight: 700; text-decoration: none; background: var(--surface); }

/* ── 시간 띠(레인). 뜻은 색 + 무늬 + 글자 셋으로 전한다(색만으로 구분하지 않는다).
 * 좋음=칠함 · 보통=--muted 칠함 · 주의=빗금 · 피하기=격자 · 자료 없음=점선 빈 칸. 칠한 색은 surface 위 비텍스트 3:1 을 모두 넘는다(위 수치). */
.lane { margin: 24px 0 0; background: var(--surface); border-radius: 12px; padding: 16px 16px 12px; }
.lane__line { margin: 0 0 28px; font-weight: 700; }  /* 아래 '지금' 글자(띠 위 22px)와 겹치지 않게 */
.lane__box { position: relative; }
.lane__track { position: relative; display: grid; grid-template-columns: repeat(19, 1fr); gap: 2px; height: 56px; background: var(--lane); border-radius: 6px; padding: 6px; margin: 0; }
.lane--slim .lane__track { height: 44px; }
.lane__track li { list-style: none; border-radius: 3px; }
.v-good { background: var(--good); }
.v-ok   { background: var(--muted); }
.v-warn { background: repeating-linear-gradient(135deg, var(--warn) 0 4px, transparent 4px 8px); box-shadow: inset 0 0 0 2px var(--warn); }
.v-bad  { background: repeating-linear-gradient(45deg, var(--crit) 0 3px, transparent 3px 7px), repeating-linear-gradient(135deg, var(--crit) 0 3px, transparent 3px 7px); box-shadow: inset 0 0 0 2px var(--crit); }
.v-none { box-shadow: inset 0 0 0 1px var(--muted); background: transparent; border: 1px dashed transparent; }
.v-past { opacity: .45; }
.lane__dark { position: absolute; top: 0; bottom: 0; background: var(--dark-veil); border-radius: 6px; pointer-events: none; }
.lane__now { position: absolute; top: -6px; bottom: -6px; width: 2px; background: var(--ink); }
.lane__now::before { content: "지금"; position: absolute; top: -22px; left: -12px; white-space: nowrap; font-size: 12px; color: var(--ink); font-weight: 700; }
.lane__pick { position: absolute; top: -2px; bottom: -2px; border: 2px solid var(--ink); border-radius: 6px; pointer-events: none; }  /* 강조색은 내비 '지금 위치' 하나에 남긴다 — 테두리는 --ink */
.lane__ticks { display: grid; grid-template-columns: repeat(19, 1fr); margin: 4px 6px 0; font-size: 12px; color: var(--muted); }
.lane__sun { display: flex; flex-wrap: wrap; gap: 4px 20px; margin: 12px 0 0; font-size: 14px; color: var(--ink-2); }
.legend { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 12px 0 0; padding: 0; font-size: 14px; color: var(--ink-2); }
.legend li { list-style: none; display: inline-flex; align-items: center; gap: 6px; }
.legend i { display: inline-block; width: 18px; height: 14px; border-radius: 3px; }
.legend .i-dark { background: var(--dark-veil); outline: 1px solid var(--line); }
.warnbar { margin: 12px 0 0; padding: 12px 16px; border-radius: 10px; background: var(--sunken); color: var(--ink); border-left: 4px solid var(--crit); }

/* 칩 — 필터 칸 하나. 상태는 주소(?kind=)에 */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 0; padding: 0; }
.chips li { list-style: none; }
.chips a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 22px; background: var(--surface); color: var(--ink-2); text-decoration: none; border: 1px solid var(--line); white-space: nowrap; }
.chips a:hover { text-decoration: underline; }
.chips a[aria-current="true"] { border-color: var(--ink); color: var(--ink); font-weight: 700; }
.chips small { color: var(--muted); font-weight: 400; }
.chips--tight { margin-top: 8px; }

.cols { display: grid; grid-template-columns: 1.3fr 1fr; gap: 32px; }
@media (max-width: 860px) { .cols { grid-template-columns: 1fr; gap: 0; } }

/* ── 목록 줄 — 줄 전체가 링크(앵커를 grid 로 깐다, UIUX Fitts) */
.rows { margin: 0; padding: 0; background: var(--surface); border-radius: 12px; }
.rows li { list-style: none; border-top: 1px solid var(--line); }
.rows li:first-child { border-top: 0; }
.course { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 16px; min-height: 64px; padding: 12px 16px; color: var(--ink); text-decoration: none; }
.course:hover .course__name { text-decoration: underline; }
.course__name { font-weight: 700; }
.course__meta { grid-column: 1; color: var(--muted); font-size: 14px; }
.course__km { grid-row: 1 / span 2; grid-column: 2; font-size: 22px; font-weight: 800; letter-spacing: -.02em; }
.course__km small { font-size: 14px; font-weight: 600; color: var(--muted); margin-left: 2px; }

/* ── 대회 줄 — 배번표(bib) 꼴. 두 귀퉁이 핀 구멍은 장식 */
.bib { display: grid; grid-template-columns: 88px 1fr; gap: 16px; align-items: center; min-height: 72px; padding: 12px 16px; color: var(--ink); text-decoration: none; }
.bib:hover .bib__name { text-decoration: underline; }
.bib__no { position: relative; display: grid; place-items: center; height: 56px; border: 2px solid var(--ink); border-radius: 6px; font-size: 22px; font-weight: 800; letter-spacing: -.03em; background: var(--surface); color: var(--ink); }
.bib__no::before, .bib__no::after { content: ""; position: absolute; top: 5px; width: 5px; height: 5px; border-radius: 50%; background: var(--line); }
.bib__no::before { left: 5px; } .bib__no::after { right: 5px; }
.bib__name { font-weight: 700; display: block; }
.bib__meta { color: var(--muted); font-size: 14px; }
.state { font-weight: 700; }
.state--open { color: var(--good); }
.state--closing, .state--soon { color: var(--warn); }
.state--closed, .state--done, .state--unknown { color: var(--muted); font-weight: 400; }
.month { margin: 28px 0 8px; font-size: 15px; color: var(--ink-2); font-weight: 700; }

.more { display: inline-flex; align-items: center; min-height: 44px; margin-top: 8px; }

/* 대회 거르기 — 칸 2개(권역·종목) + 보조 버튼. JS 없이 GET */
.filters { display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px 12px; align-items: end; margin: 16px 0 0; max-width: 560px; }
.filters label { font-size: 14px; color: var(--muted); display: block; }
.filters select { width: 100%; min-height: 44px; font: inherit; font-size: 15px; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 0 8px; }
.go { min-height: 44px; padding: 0 16px; font: inherit; font-weight: 700; color: var(--ink); background: var(--surface); border: 1px solid var(--ink); border-radius: 8px; cursor: pointer; }  /* 보조 버튼 꼴(강조색은 내비 현재 위치 하나) */
@media (max-width: 560px) { .filters { grid-template-columns: 1fr 1fr; } .go { grid-column: 1 / -1; } }

/* ── 상세 머리 — 코스 상세의 큰 숫자는 거리 하나(손을 쓰는 값: 몇 km 뛸지) */
.crumb { display: flex; flex-wrap: wrap; gap: 0 4px; margin: -12px 0 8px; padding: 0; font-size: 14px; color: var(--muted); }
.crumb li { list-style: none; display: inline-flex; align-items: center; }
.crumb li + li::before { content: "›"; margin-right: 4px; }
.crumb a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink-2); }
.head { display: grid; grid-template-columns: 1fr auto; gap: 8px 32px; align-items: end; }
.head h1 { margin: 0; font-size: 28px; line-height: 1.25; }
.head .kind { margin: 4px 0 0; color: var(--muted); }
.km { grid-column: 2; grid-row: 1 / span 2; text-align: right; margin: 0; }
.km b { display: block; font-size: clamp(56px, 10vw, 88px); line-height: 1; font-weight: 800; letter-spacing: -.045em; }
.km b span { font-size: .35em; font-weight: 700; letter-spacing: 0; }
.km > span { color: var(--ink-2); font-size: 15px; }
@media (max-width: 560px) { .head { grid-template-columns: 1fr; } .km { grid-column: 1; grid-row: auto; text-align: left; } }

.split { display: grid; grid-template-columns: 1.4fr 1fr; gap: 32px; margin-top: 24px; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; gap: 16px; } }
.facts { margin: 0; background: var(--surface); border-radius: 12px; padding: 4px 16px; }
.facts div { display: grid; grid-template-columns: 6.5em 1fr; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.facts div:first-child { border-top: 0; }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; overflow-wrap: anywhere; }
.btn { display: flex; align-items: center; justify-content: center; min-height: 48px; margin-top: 16px; padding: 0 20px; border-radius: 10px; background: var(--accent); color: var(--on-accent); font-weight: 700; text-decoration: none; }
.btn:hover { text-decoration: underline; }
.alt { display: inline-flex; align-items: center; min-height: 44px; margin-top: 4px; color: var(--ink-2); }

/* ── 지도 (Leaflet 1.9.4 자체 서빙). 타일 위 글자는 Leaflet 이 그린다 */
.map { position: relative; height: 360px; border-radius: 12px; overflow: hidden; background: var(--sunken); z-index: 0; }
.map--big { height: 520px; }
.map > .empty { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; }
.mapnote { font-size: 13px; color: var(--muted); margin: 8px 0 0; }
.mapnote a { color: var(--ink-2); }
.locate { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; margin: 12px 0 0; border-radius: 10px; background: var(--surface); color: var(--ink); border: 1px solid var(--line); font: inherit; font-weight: 700; cursor: pointer; }
.leaflet-popup-content { font: 14px/1.5 "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif; }
.leaflet-popup-content b { display: block; font-size: 16px; }
.leaflet-popup-content a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; }
.leaflet-container a.leaflet-popup-close-button { width: 44px; height: 44px; font-size: 24px; line-height: 44px; }
.map.leaflet-container .leaflet-bar a { width: 44px; height: 44px; line-height: 44px; }  /* 뒤에 읽히는 leaflet.css 의 .leaflet-touch 30px 를 이기려고 한 단계 더 세게 */
.mapnote .tap { min-height: 44px; }

/* 시간별 근거 표 — 숫자 칸을 읽는 표라 줄을 덮지 않는다(UIUX). 360px 에서는 표만 가로 스크롤 예외 */
.tbl { overflow-x: auto; background: var(--surface); border-radius: 12px; }
table { border-collapse: collapse; width: 100%; min-width: 520px; font-size: 15px; }
th, td { padding: 0 12px; height: 44px; text-align: right; border-top: 1px solid var(--line); white-space: nowrap; }
th:first-child, td:first-child { text-align: left; }
thead th { border-top: 0; color: var(--muted); font-weight: 600; font-size: 14px; }
.t-good { color: var(--good); font-weight: 700; }
.t-ok { color: var(--ink-2); }
.t-warn { color: var(--warn); font-weight: 700; }
.t-bad { color: var(--crit); font-weight: 700; }
.vtable { min-width: 560px; }
.vtable th, .vtable td { text-align: left; white-space: normal; }

/* 글(배우기·정적 3장) */
.prose { max-width: 42em; }
.prose p, .prose li { color: var(--ink-2); }
.prose ul { padding-left: 1.2em; }
.prose li { margin: 4px 0; }
.lede { font-size: 17px; color: var(--ink-2); margin: 8px 0 0; max-width: 40em; }

/* 페이스 계산기 */
.calc { display: grid; gap: 12px; max-width: 560px; margin: 16px 0 0; background: var(--surface); border-radius: 12px; padding: 16px; }
.calc fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: 8px; }
.calc legend { font-weight: 700; margin-bottom: 4px; padding: 0; }
.calc label { font-size: 14px; color: var(--muted); }
.calc input[type="text"] { width: 100%; min-height: 44px; font: inherit; color: var(--ink); background: var(--paper); border: 1px solid var(--muted); border-radius: 8px; padding: 0 12px; }  /* 칸 테두리는 --muted(3:1 이상) */
.calc .pre { display: flex; flex-wrap: wrap; gap: 8px; }
.calc .pre label { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px; border: 1px solid var(--line); border-radius: 22px; color: var(--ink-2); font-size: 15px; cursor: pointer; }
.calc .pre input { width: 18px; height: 18px; margin: 0; }
.calc button { min-height: 48px; border: 0; border-radius: 10px; background: var(--accent); color: var(--on-accent); font: inherit; font-weight: 700; cursor: pointer; }
.result { margin: 24px 0 0; }
.result b { display: block; font-size: clamp(48px, 10vw, 80px); line-height: 1; font-weight: 800; letter-spacing: -.04em; }
.err { margin: 16px 0 0; padding: 12px 16px; border-radius: 10px; background: var(--sunken); color: var(--ink); border-left: 4px solid var(--crit); }

/* 더보기 격자 — --ink-2 on --sunken 9.5 */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; margin: 0; padding: 0; }
.grid li { list-style: none; }
.grid a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 88px; padding: 8px; border-radius: 12px; background: var(--sunken); color: var(--ink-2); text-decoration: none; font-size: 15px; text-align: center; }
.grid a:hover { text-decoration: underline; }
.grid svg { width: 24px; height: 24px; }

/* 쿠팡 파트너스 칸(running/coupang.py) — 대가성 문구는 제목 바로 아래 */
.cpn { margin: 44px 0 0; padding: 16px; background: var(--surface); border-radius: 12px; }
.cpn__h { margin: 0; font-weight: 700; }
.cpn__d { margin: 4px 0 12px; font-size: 13px; color: var(--muted); }
.cpn__l { margin: 0; padding: 0; display: grid; gap: 8px; }
.cpn__i { list-style: none; display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; align-items: center; }
.cpn__img { grid-row: span 2; border-radius: 8px; }
.cpn__a { display: inline-flex; align-items: center; min-height: 44px; }
.cpn__n { font-size: 13px; color: var(--muted); }

footer { border-top: 1px solid var(--line); background: var(--surface); color: var(--muted); font-size: 14px; }
footer .wrap { padding-top: 24px; padding-bottom: 32px; }
footer nav { display: flex; flex-wrap: wrap; gap: 0 8px; margin-left: -8px; }
footer nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px; color: var(--ink-2); }
footer p { margin: 8px 0 0; }

/* 폰: 상단 내비 숨김 + 하단 탭바 5칸(순수 링크, JS 없음) */
.tabbar { display: none; }
@media (max-width: 720px) {
  .nav { display: none; }
  body { padding-bottom: 64px; }
  main.wrap { padding-top: 24px; }
  .tabbar { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; background: var(--surface); border-top: 1px solid var(--line); z-index: 1000; padding-bottom: env(safe-area-inset-bottom); }
  .tabbar a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 56px; color: var(--muted); text-decoration: none; font-size: 12px; }
  .tabbar a[aria-current="page"] { color: var(--accent); font-weight: 700; }
  .tabbar svg { width: 22px; height: 22px; }
  .bib { grid-template-columns: 72px 1fr; }
  .bib__no { font-size: 19px; height: 50px; }
  .chips--scroll { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }  /* 칩 줄만 가로 스크롤 — 페이지는 아니다 */
  .chips--scroll li { flex: none; }
  .btn { width: 100%; }
  .map--big { height: 420px; }
  .lane { padding: 12px; }
  .lane__track { padding: 5px; height: 44px; }
}