/* 정밀 마라톤 페이스 계산기 전용 CSS (2026-10-19). 결과 카드 pmp-res → 대회 정보 pmp-in → 페이스·이븐 대비 그림 pmp-chartbox → 손목 페이스 밴드 pmp-bandbox.
   툴 폭은 컨테이너 pmp 로 재고(셸 폭과 무관), 공용 부품은 assets/v2.css */
.pmp-work{container:pmp / inline-size}
.pmp-work [hidden]{display:none !important}
.pmp-help{margin:0;font:400 12px/1.55 var(--sans);color:var(--muted)}

/* 결과 카드: 큰 숫자·문장·페이스 흐름 막대 | 타일 2×2 */
.pmp-res{display:grid;grid-template-columns:minmax(0,1fr);gap:14px 24px;padding:16px 18px;border-bottom:1px solid var(--soft)}
.pmp-live>.v2-label{display:block;margin-bottom:6px}
.pmp-res .v2-sub.is-error{color:var(--accent)}
.pmp-ramp{display:flex;align-items:flex-end;gap:10px;margin-top:12px;max-width:360px}
.pmp-ramp span{display:flex;flex-direction:column;flex:none}
.pmp-ramp span.z{text-align:right}
.pmp-ramp small{font:600 11px/1.3 var(--sans);color:var(--muted)}
.pmp-ramp b{font:750 15px/1.3 var(--sans);font-variant-numeric:tabular-nums lining-nums;color:var(--ink);white-space:nowrap}
.pmp-ramp span.z b{color:var(--accent)}
.pmp-ramp svg{flex:1 1 auto;min-width:40px;height:24px;margin-bottom:3px;overflow:visible}
.pmp-ramp path{fill:none;stroke:var(--accent);stroke-width:2.5;stroke-linecap:round;vector-effect:non-scaling-stroke}
.pmp-ramp.flat path{stroke:var(--muted);stroke-dasharray:5 4}
.pmp-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;align-content:start}
.pmp-tiles>div{min-width:0;padding:9px 12px 8px;border:1px solid var(--soft);border-radius:var(--radius);background:var(--paper)}
.pmp-tiles.no-fin #pmpGapT{grid-column:1 / -1}
.pmp-tiles .v2-label{display:block}
.pmp-tiles b{display:block;margin-top:3px;font:800 21px/1.15 var(--sans);font-variant-numeric:tabular-nums lining-nums;letter-spacing:-.01em;color:var(--ink);white-space:nowrap}
.pmp-tiles small{display:block;margin-top:2px;font:500 11.5px/1.4 var(--sans);color:var(--muted)}
@container pmp (min-width:560px){ .pmp-res{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start} }

/* 대회 정보: 12칸 격자 */
.pmp-in{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:14px;padding:16px 18px;border-bottom:1px solid var(--soft)}
.pmp-f{grid-column:span 12;min-width:0}
.pmp-f>.v2-label{display:block;margin:0 0 5px}
@container pmp (min-width:560px){ .pmp-fd,.pmp-ft,.pmp-fsp,.pmp-fe{grid-column:span 6} }
.pmp-hms{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.pmp-hms .v2-input b,.pmp-in .pmp-fsp .v2-input b,.pmp-in .pmp-fe .v2-input b{min-width:0;padding:0 8px}
.pmp-chips{margin-top:7px}
.pmp-chips button{height:28px;padding:0 8px;font-variant-numeric:tabular-nums}
.pmp-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.pmp-pair .v2-input b{min-width:0;padding:0 8px}
/* 거리 칸 안 단위 전환 */
.pmp-dbox .pmp-unit{display:flex;align-items:center;gap:2px;padding:0 5px;border-left:1px solid var(--soft);background:var(--wash);border-radius:0 var(--radius) var(--radius) 0}
.pmp-unit button{height:30px;padding:0 9px;border:0;border-radius:calc(var(--radius) - 1px);background:none;font:600 12px var(--sans);color:var(--muted);cursor:pointer}
.pmp-unit button:hover{color:var(--ink)}
.pmp-unit button[aria-pressed="true"]{background:var(--fill);color:var(--on-fill)}
.pmp-unit button:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.pmp-f.is-invalid .v2-input{border-color:var(--accent)}

/* 페이스·이븐 대비 그림 */
.pmp-chartbox{margin:0;padding:14px 18px 12px;border-bottom:1px solid var(--soft)}
.pmp-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:2px 14px}
.pmp-keys{list-style:none;display:flex;flex-wrap:wrap;gap:4px 16px;margin:8px 0 2px;padding:0;font:600 11.5px/1.4 var(--sans);color:var(--muted)}
.pmp-keys li::before{content:"";display:inline-block;width:16px;height:0;margin-right:6px;vertical-align:3px;border-top:2.5px solid var(--accent)}
.pmp-keys li.k-even::before{border-top:1.5px dashed var(--muted)}
.pmp-chart{position:relative;margin-top:2px;cursor:crosshair;touch-action:pan-y;border-radius:var(--radius)}
.pmp-chart:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.pmp-chart svg{display:block;width:100%;height:auto;overflow:visible}
.pmp-chart text{font-family:var(--sans);font-variant-numeric:tabular-nums lining-nums}
.pmp-chart .tl{font-size:11px;fill:var(--muted)}
.pmp-chart .tl.half{fill:var(--ink);font-weight:700}
.pmp-chart .cap{font-size:11px;font-weight:600;fill:var(--muted)}
.pmp-chart .side{font-size:10.5px;fill:var(--muted)}
.pmp-chart .lab{font-size:12px;font-weight:750;fill:var(--accent)}
.pmp-chart .vt{stroke:var(--soft);stroke-width:1;stroke-dasharray:2 3}
.pmp-chart .vt.half{stroke:var(--line);stroke-dasharray:none}
.pmp-chart .even{stroke:var(--muted);stroke-width:1.5;stroke-dasharray:5 4}
.pmp-chart .pl{fill:none;stroke:var(--accent);stroke-width:2.6;stroke-linejoin:round;stroke-linecap:round}
.pmp-chart .ga{fill:color-mix(in srgb, var(--accent) 16%, transparent);stroke:var(--accent);stroke-width:1.4}
.pmp-chart .zero{stroke:var(--muted);stroke-width:1.2}
.pmp-chart .cur{stroke:var(--ink);stroke-width:1.2;opacity:.75}
.pmp-chart .cd{fill:var(--paper);stroke:var(--accent);stroke-width:2.5}
.pmp-chart .cd.g{stroke:var(--ink);stroke-width:2}
.pmp-read{margin:6px 0 4px;min-height:1.55em;font:600 12.5px/1.55 var(--sans);font-variant-numeric:tabular-nums;color:var(--ink)}

/* 손목 페이스 밴드: 출발·간격 → 띠(칸 수는 tool.js 가 줄마다 같게) → 버튼 */
.pmp-bandbox{padding:14px 18px 16px}
.pmp-bset{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 14px;margin:10px 0 12px}
.pmp-bset .pmp-f{grid-column:auto}
.pmp-bset .pmp-f[data-k=bi]{grid-column:1 / -1}
@container pmp (min-width:560px){ .pmp-bset{grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto} .pmp-bset .pmp-f[data-k=bi]{grid-column:auto} }
.pmp-time{width:100%;height:var(--v2-ctl,42px);padding:0 10px;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);font:600 15.5px var(--sans);color:var(--ink);font-variant-numeric:tabular-nums}
.pmp-time:focus{outline:0;border-color:var(--ink);box-shadow:0 0 0 2px var(--accent-wash)}
.pmp-bi button{height:var(--v2-ctl,42px);padding:0 14px;white-space:nowrap}
.pmp-band{list-style:none;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));margin:0;padding:0;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--paper)}
.pmp-band li{display:flex;flex-direction:column;align-items:center;gap:1px;min-width:0;padding:9px 4px 8px;text-align:center;box-shadow:1px 0 0 var(--soft),0 1px 0 var(--soft)}
.pmp-band .k{font:600 11px/1.3 var(--sans);color:var(--muted);white-space:nowrap}
.pmp-band b{font:750 16px/1.25 var(--sans);font-variant-numeric:tabular-nums lining-nums;color:var(--ink);white-space:nowrap}
.pmp-band small{font:500 11.5px/1.3 var(--sans);font-variant-numeric:tabular-nums;color:var(--muted);white-space:nowrap}
.pmp-band li.half,.pmp-band li.end{background:var(--wash);box-shadow:inset 0 3px 0 var(--accent),1px 0 0 var(--soft),0 1px 0 var(--soft)}
.pmp-band li.end .k{color:var(--accent)}
.pmp-acts{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:12px}
.pmp-acts .v2-status{margin-left:2px}
@container pmp (max-width:420px){ .pmp-band b{font-size:15px} .pmp-band li{padding:8px 2px 7px} }