/* 러닝 케이던스 계산기 — 식 콘솔 · 목표 띠 · 발자국 트랙 · 케이던스–보폭 지도 (2026-10-19). accent는 목표 케이던스(큰 숫자와 그림 속 목표)에만 */
.cad-work{container:cad / inline-size}
.cad-top{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:10px 24px;padding:14px 18px;border-bottom:1px solid var(--soft)}
.cad-top__f{display:flex;flex-direction:column;gap:6px;min-width:0}
.cad-top .v2-label{display:block;white-space:nowrap}
.cad-body{display:flex;flex-direction:column}
.cad-work [hidden]{display:none !important} /* 툴 CSS의 flex·grid가 hidden을 덮지 않게 */

/* 식 콘솔 [페이스·속도] = [케이던스] × [보폭] */
.cad-eqwrap{padding:16px 18px 14px}
.cad-eq{display:grid;grid-template-columns:minmax(0,1fr) 22px minmax(0,1fr) 22px minmax(0,1fr);align-items:start;gap:0 8px;margin:0}
.cad-op{padding-top:52px;text-align:center;font:700 22px/1 var(--sans);color:var(--muted)}
.cad-slot{min-width:0;padding:10px 12px 12px;border:1px solid var(--soft);border-radius:var(--radius);background:var(--paper);transition:background var(--ease),border-color var(--ease)}
.cad-slot.is-out{background:color-mix(in srgb, var(--wash) 70%, var(--paper));border:1px dashed var(--line)}
.cad-slot__head{display:flex;align-items:center;justify-content:space-between;gap:6px;min-height:28px;margin-bottom:8px}
.cad-slot__head .v2-label{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cad-slot__head .v2-seg{flex:0 0 auto;flex-wrap:nowrap}
.cad-slot__head .v2-seg button{height:26px;padding:0 8px;font-size:12px}
.cad-slot__out{display:flex;flex-direction:column;justify-content:center;min-height:var(--v2-ctl);margin:0}
.cad-slot__out b{font-family:var(--sans);font-size:22px;font-weight:800;line-height:1.15;letter-spacing:-.01em;color:var(--ink);font-variant-numeric:tabular-nums lining-nums}
.cad-slot__out small{margin-top:3px;font-family:var(--sans);font-size:12px;font-weight:600;color:var(--muted)}
.cad-ms,.cad-pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:6px}
.cad-slot{container:cadslot / inline-size}
@container cadslot (max-width:260px){ #cadCountBox .cad-pair{grid-template-columns:minmax(0,1fr)} } /* 걸음 단위 글자가 긴 언어(steps·pasos·langkah) */
.cad-count-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px;margin-top:8px}
.cad-count-row .v2-seg button{height:28px;padding:0 9px}
.cad-timer{height:28px;white-space:nowrap}
.cad-timer[aria-pressed="true"]{background:var(--fill,var(--ink));color:var(--on-fill,var(--paper));border-color:transparent}
.cad-timer-out{margin:7px 0 0;font-family:var(--sans);font-size:12px;line-height:1.45;color:var(--ink)}
.cad-timer-out:empty{display:none}
.cad-h{margin-top:10px;padding-top:10px;border-top:1px dashed var(--soft)}
.cad-h > .v2-label{display:block;margin-bottom:5px}
.cad-formula{margin:12px 0 0}
.cad-help{margin:6px 0 0;font-family:var(--sans);font-size:12px;line-height:1.55;color:var(--muted)}

/* 목표 띠 */
.cad-goal{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px 26px;padding:16px 18px 14px;border-top:1px solid var(--soft);border-bottom:1px solid var(--soft)}
.cad-goal__head{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-bottom:10px}
.cad-big{flex-wrap:wrap;row-gap:4px}
.cad-big span{color:var(--accent)}
.cad-big.is-empty span{color:inherit}
.cad-big small{font-family:var(--sans);font-size:13px;font-weight:600}
.cad-band{margin:8px 0 0;font-family:var(--sans);font-size:12.5px;line-height:1.55;color:var(--muted)}
.cad-band:empty{display:none}
.cad-rows li.is-calc span{color:var(--ink)}
.cad-rows li span em,.cad-shift li span em{display:block;margin-top:1px;font-size:12px}
.cad-acts{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.cad-play i{display:inline-block;width:0;height:0;border-left:8px solid currentColor;border-top:5px solid transparent;border-bottom:5px solid transparent}
.cad-play[aria-pressed="true"] i{width:9px;height:9px;border:0;border-radius:1px;background:currentColor}
.cad-goal__side .v2-status{display:block;margin-top:8px}
.cad-goal__side .v2-status:empty{display:none}

/* 발자국 트랙 */
.cad-lanes{padding:14px 18px 6px}
.cad-card__head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
.cad-card__head .v2-label{min-width:0}
.cad-replay{flex:0 0 auto;height:28px}
.cad-lanes__svg svg{display:block;overflow:visible}
.cad-lanes .lb{fill:color-mix(in srgb, var(--wash) 80%, var(--paper))}
.cad-lanes .lt{font-family:var(--sans);font-size:11.5px;font-weight:650;fill:var(--muted)}
.cad-lanes .ln-tg .lt{fill:var(--ink)}
.cad-lanes .ln-n{font-family:var(--sans);font-size:11.5px;font-weight:700;fill:var(--ink);font-variant-numeric:tabular-nums}
.cad-lanes .fp{fill:var(--ink);opacity:.1;transform-box:fill-box;transform-origin:center;transition:opacity .12s ease-out,transform .18s ease-out}
.cad-lanes .fp.on{opacity:.5}
.cad-lanes .ln-tg .fp.on{fill:var(--accent);opacity:.85}
.cad-lanes .fp.new{opacity:1;transform:scale(1.35)}
.cad-lanes .fp0,.cad-lanes .fp0.on,.cad-lanes .ln-tg .fp0.on{fill:none;stroke:var(--muted);stroke-width:1.2;opacity:.8} /* 출발점: 걸음 수에 넣지 않음 */
.cad-lanes .rn{stroke:var(--ink);stroke-width:1.5;stroke-dasharray:3 3}
.cad-lanes .tk{stroke:var(--line)}
.cad-work .ax{font-family:var(--sans);font-size:10.5px;fill:var(--muted);font-variant-numeric:tabular-nums}
.cad-note{margin:8px 0 0;font-family:var(--sans);font-size:12px;line-height:1.55;color:var(--muted)}

/* 지도 | 표 */
.cad-split{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:18px 22px;padding:12px 18px 18px}
.cad-card{min-width:0}
.cad-map{position:relative;margin-top:8px;touch-action:pan-y}
.cad-map svg{display:block}
.cad-map .gr{stroke:var(--soft)}
.cad-map .axt{font-family:var(--sans);font-size:10.5px;font-weight:650;fill:var(--muted)}
.cad-map .cv{fill:none;stroke:var(--line);stroke-width:1.3;stroke-dasharray:4 3}
.cad-map .cv-now{stroke:var(--ink);stroke-width:2;stroke-dasharray:none}
.cad-map .cvt{font-family:var(--sans);font-size:10.5px;font-weight:650;fill:var(--muted);font-variant-numeric:tabular-nums}
.cad-map .cvt.is-now{fill:var(--ink)}
.cad-map .ref{stroke:var(--muted);stroke-width:1;opacity:.45}
.cad-map .r180{stroke:var(--muted);stroke-width:1;stroke-dasharray:2 3;opacity:.7}
.cad-map .reft{font-family:var(--sans);font-size:10.5px;font-weight:700;fill:var(--muted);font-variant-numeric:tabular-nums}
.cad-map .reft.is-180{font-style:italic;font-weight:600}
.cad-map .cv-move{fill:none;stroke:var(--accent);stroke-width:4;stroke-linecap:round;opacity:.5}
.cad-map .pt-now{fill:var(--ink)}
.cad-map .pt-tg{fill:var(--accent);stroke:var(--card);stroke-width:2}
.cad-map .pt-alt{fill:var(--card);stroke:var(--muted);stroke-width:1.3}
.cad-map .ptt{font-family:var(--sans);font-size:11px;font-weight:700;fill:var(--ink)}
.cad-map .ptt.is-tg{fill:var(--accent)}
.cad-map .xh{stroke:var(--muted);stroke-dasharray:2 2}
.cad-tip{position:absolute;top:2px;left:0;padding:4px 8px;border:1px solid var(--line);border-radius:var(--radius);background:var(--card);font-family:var(--sans);font-size:11.5px;font-weight:650;color:var(--ink);white-space:nowrap;pointer-events:none}
.cad-refs{display:grid;gap:3px;margin:8px 0 0;padding:0;list-style:none}
.cad-refs li{display:grid;grid-template-columns:30px minmax(0,1fr);gap:6px;font-family:var(--sans);font-size:12px;line-height:1.45;color:var(--muted)}
.cad-refs b{color:var(--ink);font-variant-numeric:tabular-nums}
.cad-refs li.is-180 b{font-style:italic;font-weight:600;color:var(--muted)}
.cad-card .tbl{margin-top:8px;overflow-x:auto}
.cad-table{width:100%;border-collapse:collapse;font-family:var(--sans);font-size:13px}
.cad-table th{padding:6px 8px;border-bottom:1px solid var(--line);font-size:11.5px;font-weight:650;color:var(--muted);text-align:left;white-space:nowrap}
.cad-table td{padding:7px 8px;border-bottom:1px solid var(--soft);color:var(--ink);white-space:nowrap;font-variant-numeric:tabular-nums lining-nums}
.cad-table .n{text-align:right}
.cad-table tr.is-cur td{background:var(--accent-wash);font-weight:700}
.cad-sublabel{display:block;margin-top:16px}
.cad-shift{margin-top:4px}
.cad-shift li.is-cur span{color:var(--ink);font-weight:650}

@container cad (max-width:900px){ .cad-slot__head{flex-direction:column;align-items:flex-start;gap:6px} }
@container cad (max-width:880px){ .cad-split{grid-template-columns:minmax(0,1fr)} } /* en·es 표 머리(Steps per mile)가 반쪽 칸에서 잘림 */
@container cad (max-width:700px){ .cad-goal{grid-template-columns:minmax(0,1fr)} }
/* 좁은 작업면(720px 이하, 1280px 화면 포함): 목표 띠(결과)를 콘솔 위로, 식은 세로로 — 세 칸이면 분·초 칸 글자 자리가 15px */
@container cad (max-width:720px){
  .cad-goal{order:-1;border-top:0}
  .cad-top,.cad-eqwrap,.cad-goal,.cad-lanes,.cad-split{padding-left:14px;padding-right:14px}
  .cad-eq{grid-template-columns:minmax(0,1fr)}
  .cad-op{padding:4px 0;font-size:18px}
  .cad-slot__head{flex-direction:row;align-items:center}
}
@media (prefers-reduced-motion:reduce){ .cad-lanes .fp,.cad-slot{transition:none} .cad-lanes .fp.new{transform:none} }