/* 걸음 수 km 변환 계산기 전용 CSS (2026-10-19). 막대 stk-bar(구할 값·단위) → 식 줄 stk-eq([걸음 수] × [보폭] = [거리], 구할 칸 = 결과 상자)
   → stk-res(문장·칸) → stk-fig(발자국 확대 + 전체 거리 자) → stk-acts(걷는 빠르기·복사) → stk-alt(보폭이 다르면, 카드 9장).
   툴 폭은 컨테이너 stk 로 재고(셸 폭과 무관), 좁으면 식 줄을 세로로 쌓고 구할 칸을 맨 위로. 공용 부품은 assets/v2.css */
.stk-work{container:stk / inline-size}
.stk-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:12px 18px;border-bottom:1px solid var(--soft)}
.stk-find button{height:34px;padding:0 13px;font-size:13.5px}
.stk-units{margin-left:auto}

/* 식 줄: [걸음 수] × [보폭] = [거리]. 연산 기호는 입력 상자 높이에 맞춤 */
.stk-eq{display:grid;grid-template-columns:minmax(0,1fr) 18px minmax(0,1fr) 18px minmax(0,1fr);gap:0 10px;align-items:start;margin:0;padding:16px 18px 14px}
.stk-term{min-width:0;container:stkt / inline-size}
.stk-in[hidden],.stk-out[hidden]{display:none}
.stk-op{display:grid;place-items:center;height:var(--v2-ctl);margin-top:22px;font-family:var(--sans);font-size:20px;font-weight:700;color:var(--muted)}
.stk-chips{margin-top:6px}
.stk-chips button{height:28px;padding:0 9px;font-size:12px}
.stk-du{flex:0 0 auto;align-self:stretch;margin:0;padding:0 24px 0 9px;border:0;border-left:1px solid var(--soft);border-radius:0 var(--radius) var(--radius) 0;background:transparent;font-family:var(--sans);font-size:13px;font-weight:650;color:var(--muted);cursor:pointer}
.stk-du:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.stk-out>.v2-label{display:block;margin:0 0 5px;color:var(--ink)}
.stk-out .v2-big{min-height:var(--v2-ctl);padding:8px 12px;border:1.5px solid var(--fill);border-radius:var(--radius);background:var(--paper);font-size:clamp(24px,14cqi,40px);white-space:nowrap}
.stk-out .v2-big small{font-family:var(--sans);font-size:14px}
.stk-out .v2-big.is-empty{font-size:22px}
.stk-out-sub{margin:6px 0 0;font-family:var(--sans);font-size:12px;line-height:1.5;color:var(--muted)}
.stk-out-sub:empty{display:none}

/* 문장·칸 */
.stk-res{padding:14px 18px}
.stk-res .v2-sub{margin:0}
.stk-res .v2-sub.is-error{color:var(--accent)}
.stk-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,150px),1fr));gap:12px 18px;margin:12px 0 0;padding:12px 0 0;border-top:1px solid var(--soft)}
.stk-tiles:empty{display:none}
.stk-tiles div{min-width:0}
.stk-tiles dt{font-family:var(--sans);font-size:11.5px;font-weight:600;color:var(--muted)}
.stk-tiles dd{margin:2px 0 0;font-family:var(--sans);font-size:17px;font-weight:750;line-height:1.3;color:var(--ink);font-variant-numeric:tabular-nums lining-nums}
.stk-tiles dd small{display:block;margin-top:1px;font-size:11.5px;font-weight:400;line-height:1.4;color:var(--muted)}

/* 그림: 발자국 확대(처음 몇 걸음, 위 치수선 = 한 걸음, 아래 = 두 걸음) + 전체 거리 자(발자국 하나 = n걸음). 실제 폭으로 그림 */
.stk-fig{margin:0;padding:14px 18px 12px;border-top:1px solid var(--soft)}
.stk-fig>.v2-label{display:block;margin-bottom:4px}
.stk-zoom,.stk-ruler{min-width:0}
.stk-zoom svg,.stk-ruler svg{display:block;max-width:100%;height:auto;overflow:visible}
.stk-zoom .grid line{stroke:var(--soft);stroke-width:1}
.stk-zoom .grid text{font:600 10.5px var(--sans);fill:var(--muted);font-variant-numeric:tabular-nums}
.stk-zoom .mid{stroke:var(--line);stroke-width:1;stroke-dasharray:3 4}
.stk-zoom .fp{fill:var(--ink);opacity:.85;transition:transform 450ms cubic-bezier(.2,.7,.2,1),opacity 250ms}
.stk-zoom .fp.rt{opacity:.6}
.stk-zoom .dim line{stroke:var(--ink);stroke-width:1.2}
.stk-zoom .d2 line{stroke:var(--muted)}
.stk-zoom .dt{font:750 12px var(--sans);fill:var(--ink);font-variant-numeric:tabular-nums;paint-order:stroke;stroke:var(--card);stroke-width:4px;stroke-linejoin:round}
.stk-zoom .d2 .dt{font-weight:600;fill:var(--muted)}
.stk-ruler{margin-top:4px}
.stk-ruler .trk{fill:var(--soft)}
.stk-ruler .done{fill:color-mix(in srgb,var(--accent) 30%,transparent)}
.stk-ruler .fp{fill:var(--accent)}
.stk-ruler.is-walk .fp{animation:stkStep 240ms cubic-bezier(.2,.7,.2,1) both}
@keyframes stkStep{from{opacity:0;transform:translateY(-4px)}}
.stk-ruler .tk{stroke:var(--muted);stroke-width:1.2}
.stk-ruler .tl{font:600 10.5px var(--sans);fill:var(--muted);font-variant-numeric:tabular-nums}
.stk-ruler .lm{stroke:var(--ink);stroke-width:1;stroke-dasharray:2 2}
.stk-ruler .lml{font:650 10.5px var(--sans);fill:var(--ink)}
.stk-ruler .end circle{fill:var(--accent);stroke:var(--card);stroke-width:3}
.stk-ruler .end text{font:800 12.5px var(--sans);fill:var(--ink);paint-order:stroke;stroke:var(--card);stroke-width:4px;stroke-linejoin:round;font-variant-numeric:tabular-nums}
@media (prefers-reduced-motion:reduce){.stk-zoom .fp{transition:none}.stk-ruler .fp{animation:none!important}}
.stk-help{margin:6px 0 0;font-family:var(--sans);font-size:12px;line-height:1.55;color:var(--muted)}
.stk-help:empty{display:none}
.stk-help a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:3px}
.stk-help a:hover{text-decoration-color:var(--accent)}

/* 걷는 빠르기·복사 */
.stk-acts{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:10px 16px;padding:12px 18px;border-top:1px solid var(--soft)}
.stk-cad{flex:0 1 220px}
.stk-work[data-find="l"] .stk-cad,.stk-work[data-find="l"] [data-chips="steps"]{display:none} /* 보폭 구하기: 걸음 수는 직접 센 값, 시간 칸 없음 */
.stk-select{display:block;width:100%;height:var(--v2-ctl);padding:0 28px 0 10px;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);font-family:var(--sans);font-size:14px;font-weight:600;color:var(--ink)}
.stk-btns{display:flex;flex-wrap:wrap;align-items:center;gap:8px}

/* 보폭이 다르면: 카드 9장(넓으면 한 줄), 아래 띠 = 값 비율 */
.stk-alt{padding:14px 18px 16px;border-top:1px solid var(--soft)}
.stk-alt-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:2px 12px;margin-bottom:8px}
.stk-alt-head .stk-help{margin:0}
.stk-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.stk-cards:empty{display:none}
.stk-cards button{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-width:0;padding:8px 9px 11px;border:1px solid var(--soft);border-radius:var(--radius);background:var(--paper);text-align:left;overflow:hidden;cursor:pointer;transition:border-color var(--ease),background var(--ease)}
.stk-cards button:hover{border-color:var(--line)}
.stk-cards button[aria-pressed="true"]{border-color:var(--fill);background:var(--wash)}
.stk-cards .k{font-family:var(--sans);font-size:11.5px;font-weight:600;color:var(--muted);white-space:nowrap}
.stk-cards b{font-family:var(--sans);font-size:14px;font-weight:750;line-height:1.25;color:var(--ink);font-variant-numeric:tabular-nums lining-nums;white-space:nowrap}
.stk-cards i{position:absolute;left:0;bottom:0;height:3px;width:var(--w);background:var(--line)}
.stk-cards button[aria-pressed="true"] i{background:var(--ink)}

@container stk (min-width:760px){.stk-cards{grid-template-columns:repeat(9,minmax(0,1fr))}}
@container stk (max-width:620px){
  .stk-eq{grid-template-columns:minmax(0,1fr);gap:14px}
  .stk-op{display:none}
  .stk-term.is-out{order:-1}
}