/* 하프마라톤 기록 예측기 전용 CSS (2026-10-19). 결과 카드 hmp-res(큰 숫자 | 타일 / 결승 시간 자 / 버튼) → 최근 기록 장부 hmp-in
   → 목표 hmp-goal(목표 칸 | 필요한 기록 표) → 결승선 장면 hmp-race(나 ↔ 목표 페이서, 지점 통과표).
   툴 폭은 컨테이너 hmp 로 재고(셸 폭과 무관), 공용 부품은 assets/v2.css */
.hmp-work{container:hmp / inline-size}
.hmp-work [hidden]{display:none !important}
.hmp-help{margin:0;font:400 12px/1.55 var(--sans);color:var(--muted)}
.hmp-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:2px 14px}

/* 결과 카드 */
.hmp-res{display:grid;grid-template-columns:minmax(0,1fr);gap:14px 24px;padding:16px 18px 14px;border-bottom:1px solid var(--soft)}
.hmp-live>.v2-label{display:block;margin-bottom:6px}
.hmp-res .v2-sub.is-error{color:var(--accent)}
.hmp-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;align-content:start}
.hmp-tiles>div{min-width:0;padding:9px 12px 8px;border:1px solid var(--soft);border-radius:var(--radius);background:var(--paper)}
.hmp-tiles .v2-label{display:block}
.hmp-tiles b{display:block;margin-top:3px;font:800 20px/1.15 var(--sans);font-variant-numeric:tabular-nums lining-nums;letter-spacing:-.01em;color:var(--ink);overflow-wrap:anywhere}
#hmpGoalV{font-size:18px}
.hmp-tiles b.warn{color:var(--muted)}
.hmp-tiles small{display:block;margin-top:2px;font:500 11.5px/1.4 var(--sans);color:var(--muted)}
.hmp-rulebox{margin:0;min-width:0}
.hmp-acts{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
@container hmp (min-width:600px){ /* 왼쪽 = 큰 숫자·문장·결승 시간 자, 오른쪽 = 타일 2×2 (두 열 높이를 맞춰 빈칸을 줄임) */
  .hmp-res{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"live tiles" "rule tiles" "acts acts"}
  .hmp-live{grid-area:live}.hmp-tiles{grid-area:tiles}.hmp-rulebox{grid-area:rule;align-self:end}.hmp-acts{grid-area:acts}
}

/* 결승 시간 자: 위 = 시각 눈금, 가운데 = 축·지수 띠·점, 아래 = 점 이름(겹치면 두 번째 줄) */
.hmp-rule{position:relative;height:72px;margin:0 10px}
.hmp-rl{position:absolute;inset:0}
.hmp-rax{position:absolute;left:0;right:0;top:27px;height:2px;border-radius:1px;background:var(--line)}
.hmp-rticks span{position:absolute;top:0;transform:translateX(-50%);font:500 10.5px/14px var(--sans);font-variant-numeric:tabular-nums;color:var(--muted);white-space:nowrap}
.hmp-rticks span::after{content:"";position:absolute;left:50%;top:17px;width:1px;height:7px;background:var(--line)}
.hmp-rband{position:absolute;top:20px;height:16px;border-radius:8px;background:var(--accent-wash);outline:1px solid color-mix(in srgb, var(--accent) 35%, transparent)}
.hmp-rgoal{position:absolute;top:0;bottom:30px;width:0;border-left:2px dashed var(--ink)}
.hmp-rgoal span{position:absolute;top:0;left:-1px;transform:translateX(-50%);padding:0 5px;border-radius:3px;background:var(--fill);color:var(--on-fill);font:700 10.5px/14px var(--sans);font-variant-numeric:tabular-nums;white-space:nowrap;z-index:2}
.hmp-rdots span,.hmp-rme{position:absolute;top:28px;width:0;height:0}
.hmp-rdots span::before,.hmp-rme::before{content:"";position:absolute;left:-5px;top:-5px;width:10px;height:10px;border-radius:50%;box-sizing:border-box;border:2px solid var(--muted);background:var(--paper)}
.hmp-rdots span.k-h::before{border-radius:2px;border-color:var(--ink);background:var(--ink)}
.hmp-rme::before{left:-8px;top:-8px;width:16px;height:16px;border:0;background:var(--accent);box-shadow:0 0 0 3px var(--paper)}
.hmp-rme{z-index:1}
.hmp-rdots b,.hmp-rme b{position:absolute;top:12px;left:0;transform:translateX(-50%);font:600 11px/14px var(--sans);color:var(--muted);white-space:nowrap}
.hmp-rme b{font-weight:750;color:var(--accent)}
.hmp-rdots span.k-h b{color:var(--ink)}
.hmp-rdots .lo2 b,.hmp-rme.lo2 b{top:27px}
.hmp-rband,.hmp-rgoal,.hmp-rdots span,.hmp-rme,.hmp-rticks span{transition:left .45s cubic-bezier(.2,.7,.2,1),width .45s cubic-bezier(.2,.7,.2,1)}
#hmpRuleCap{margin-top:2px}

/* 최근 기록 장부: 줄 = 번호 · 거리 · 시·분·초 · 그 기록으로 본 하프 · 지우기 (subgrid 로 세로선 맞춤) */
.hmp-in{padding:16px 18px;border-bottom:1px solid var(--soft)}
.hmp-tab{display:grid;grid-template-columns:20px minmax(104px,.8fr) minmax(0,2fr) minmax(88px,auto) 34px;column-gap:8px;margin-top:10px}
.hmp-cols,.hmp-rows,.hmp-row{grid-column:1 / -1;display:grid;grid-template-columns:subgrid;align-items:center}
.hmp-cols{margin-bottom:5px}
.hmp-cols span:nth-child(4){text-align:right}
.hmp-rows{list-style:none;margin:0;padding:0;row-gap:6px}
.hmp-i{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--wash);font:700 11px var(--sans);color:var(--muted)}
.hmp-sel{display:block;width:100%;min-width:0;height:var(--v2-ctl,42px);padding:0 8px;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:14px;font-weight:600}
.hmp-sel:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.hmp-hms{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;min-width:0}
.hmp-hms .v2-input b{min-width:0;padding:0 7px}
.hmp-o{display:flex;flex-direction:column;align-items:flex-end;justify-content:center;min-width:0;text-align:right;line-height:1.2}
.hmp-o b{font:750 15.5px/1.2 var(--sans);font-variant-numeric:tabular-nums lining-nums;color:var(--ink);white-space:nowrap}
.hmp-o i,.hmp-o span{font:600 11px/1.3 var(--sans);font-style:normal;color:var(--muted);white-space:nowrap}
.hmp-row.is-anchor .hmp-o b,.hmp-row.is-anchor .hmp-o i{color:var(--accent)}
.hmp-row.is-invalid .v2-input{border-color:var(--accent)}
.hmp-x{display:grid;place-items:center;width:34px;height:34px;padding:0;border:1px solid var(--soft);border-radius:var(--radius);background:var(--paper);color:var(--muted);cursor:pointer}
.hmp-x svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.hmp-x:hover:not(:disabled){color:var(--ink);background:var(--btn)}
.hmp-x:disabled{opacity:.35;cursor:default}
.hmp-x:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.hmp-more{display:grid;grid-template-columns:auto minmax(150px,1fr) auto;align-items:end;gap:10px 14px;margin-top:12px}
.hmp-add{height:var(--v2-ctl,42px)}
.hmp-addf>.v2-label{visibility:hidden}
.hmp-more .v2-f>.v2-label{display:block;margin:0 0 5px}
.hmp-uf .v2-seg{flex-wrap:nowrap}
.hmp-uf .v2-seg button{height:var(--v2-ctl,42px)}
.hmp-wkf.is-invalid .v2-input{border-color:var(--accent)}
@container hmp (max-width:619px){
  .hmp-tab{display:block}
  .hmp-cols{display:none}
  .hmp-rows{display:flex;flex-direction:column;gap:8px}
  .hmp-row{display:grid;grid-template-columns:20px minmax(0,1fr) auto 34px;grid-template-areas:"i d o x" "i t t t";gap:6px 8px;align-items:center}
  .hmp-row .hmp-i{grid-area:i;align-self:start;margin-top:11px}
  .hmp-row .hmp-sel{grid-area:d}
  .hmp-row .hmp-o{grid-area:o}
  .hmp-row .hmp-x{grid-area:x}
  .hmp-row .hmp-hms{grid-area:t}
  .hmp-more{grid-template-columns:minmax(0,1fr) auto}
  .hmp-more .hmp-addf{grid-column:1 / -1}
  .hmp-addf>.v2-label{display:none}
}

/* 목표: 목표 칸·칩 | 목표에 맞는 기록 표 */
.hmp-goal{display:grid;grid-template-columns:minmax(0,1fr);gap:16px 24px;padding:16px 18px;border-bottom:1px solid var(--soft)}
.hmp-gin .v2-f>.v2-label{display:block;margin:0 0 5px}
.hmp-chips{margin-top:8px}
.hmp-chips button{height:28px;padding:0 9px;font-variant-numeric:tabular-nums}
#hmpGoalF.is-invalid .v2-input{border-color:var(--accent)}
.hmp-need table{width:100%;margin-top:6px;border-collapse:collapse;font:500 13px/1.35 var(--sans);font-variant-numeric:tabular-nums lining-nums}
.hmp-need th,.hmp-need td{padding:6px 6px;border-top:1px solid var(--soft);text-align:right;white-space:nowrap}
.hmp-need thead th{border-top:0;padding-top:0;font:600 11px/1.3 var(--sans);color:var(--muted);white-space:normal;vertical-align:bottom}
.hmp-need td:last-child{white-space:normal}
.hmp-need th:first-child{text-align:left}
.hmp-need tbody th{font-weight:650;color:var(--ink)}
.hmp-need td:nth-child(2){font-weight:750;color:var(--ink)}
.hmp-need td .ok{font-weight:700;color:var(--ink)}
.hmp-need td .ok::before{content:"✓ ";color:var(--accent)}
#hmpNeedPace{margin-top:6px}
@container hmp (min-width:640px){ .hmp-goal{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)} }
@container hmp (max-width:399px){ .hmp-need table{font-size:12px} .hmp-need th,.hmp-need td{padding:6px 3px} }

/* 결승선 장면: 이름 열 | 코스(두 줄 레인, 아래 눈금), 결승 체크 무늬 */
.hmp-race{margin:0;padding:14px 18px 16px}
.hmp-race .hmp-head{align-items:center}
.hmp-clock{margin-left:auto;font:800 17px/1 var(--sans);font-variant-numeric:tabular-nums lining-nums;letter-spacing:-.01em;color:var(--ink)}
.hmp-replay{margin-left:10px}
.hmp-track{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:12px;margin-top:10px}
.hmp-names{display:grid;grid-template-rows:30px 30px;align-content:start;font:700 12px/1.2 var(--sans);font-variant-numeric:tabular-nums;white-space:nowrap}
.hmp-names span{align-self:center}
#hmpNameM{color:var(--accent)}
#hmpNameP{color:var(--ink)}
.hmp-course{position:relative;margin-right:8px;padding-bottom:22px}
.hmp-course::after{content:"";position:absolute;top:0;bottom:22px;right:-6px;width:6px;background:repeating-linear-gradient(0deg,var(--ink) 0 5px,var(--paper) 5px 10px);border:1px solid var(--ink);box-sizing:border-box}
.hmp-lane{position:relative;height:30px}
.hmp-lane::before{content:"";position:absolute;left:0;right:0;top:50%;height:0;border-top:2px dotted var(--line)}
.hmp-tok{position:absolute;top:50%;left:0;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 3px var(--paper);transition-property:left;z-index:1}
.hmp-lane.p .hmp-tok{background:var(--ink)}
.hmp-gapbar{position:absolute;top:8px;height:14px;min-width:3px;border-radius:7px;background:var(--accent-wash);outline:1px solid color-mix(in srgb, var(--accent) 40%, transparent);transition-property:left,width;display:flex;align-items:center;justify-content:center}
.hmp-gapbar.on-p{top:38px}
.hmp-gapbar b{font:700 10px/1 var(--sans);font-variant-numeric:tabular-nums;color:var(--accent);white-space:nowrap}
.hmp-gapbar.tight b{position:absolute;right:calc(100% + 12px);top:50%;transform:translateY(-50%);padding:1px 5px;border-radius:3px;background:var(--paper)}
.hmp-track.is-running .hmp-gapbar{opacity:0;transition:none}
.hmp-ticks{position:absolute;left:0;right:0;bottom:0;height:20px}
.hmp-ticks span{position:absolute;top:6px;transform:translateX(-50%);font:500 10.5px/12px var(--sans);font-variant-numeric:tabular-nums;color:var(--muted);white-space:nowrap}
.hmp-ticks span::before{content:"";position:absolute;left:50%;top:-6px;width:1px;height:4px;background:var(--line)}
.hmp-ticks span::after{content:"";position:absolute;left:50%;bottom:calc(100% + 4px);height:60px;border-left:1px dashed var(--soft)}
.hmp-ticks span:first-child::after{left:0;border-left:2px solid var(--line)}
.hmp-ticks span.end::after{display:none}
.hmp-ticks span:first-child{transform:none}
.hmp-ticks span:first-child::before{left:0}
.hmp-ticks span.end{transform:translateX(-100%);font-weight:700;color:var(--ink)}
.hmp-ticks span.end::before{left:auto;right:0}
.hmp-ticks span.nolab{color:transparent}
.hmp-read{margin:6px 0 0;font:500 13.5px/1.55 var(--sans);color:var(--ink)}
.hmp-cpwrap{margin-top:8px}
.hmp-cps{width:100%;border-collapse:collapse;font:500 12.5px/1.35 var(--sans);font-variant-numeric:tabular-nums lining-nums}
.hmp-cps th,.hmp-cps td{padding:5px 4px;border-top:1px solid var(--soft);text-align:right;white-space:nowrap}
.hmp-cps thead th{border-top:0;font:600 11px var(--sans);color:var(--muted)}
.hmp-cps th:first-child{text-align:left}
.hmp-cps tbody th{font-weight:700}
.hmp-cps tbody tr:first-child th{color:var(--accent)}
.hmp-cps tr.d td,.hmp-cps tr.d th{color:var(--muted);font-weight:500}
@container hmp (max-width:399px){ .hmp-cps{font-size:11.5px} .hmp-cps th,.hmp-cps td{padding:5px 2px} }

@media (prefers-reduced-motion: reduce){
  .hmp-rband,.hmp-rgoal,.hmp-rdots span,.hmp-rme,.hmp-rticks span,.hmp-tok,.hmp-gapbar{transition:none !important}
}