/* 걷기·만보 칼로리 계산기 전용 CSS (2026-10-18). 막대 wl-bar(종류·기준·단위) → 결과 wl-hero(총 소모·거리/시간/걸음 + 걸음 길 SVG + 칸) → 입력 타일 wl-set → wl-plan(속도·경사 표 | 계단 막대).
   결과가 입력보다 먼저(모든 폭). 툴 폭은 컨테이너 wl 로 재고(셸 폭과 무관), 공용 부품은 assets/v2.css */
.wl-work{container:wl / inline-size}
.wl-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:12px 18px;border-bottom:1px solid var(--soft)}
.wl-tabs button{height:34px;padding:0 13px;font-size:13.5px}
.wl-basis{margin-left:auto}
.wl-basis button[hidden],.wl-tile[hidden],.wl-chips[hidden],.wl-bars[hidden],.wl-map-box[hidden]{display:none}

/* 결과 */
.wl-hero{padding:16px 18px 14px;border-bottom:1px solid var(--soft)}
.wl-hl{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 28px}
.wl-hl-main{flex:1 1 250px;min-width:0}
.wl-hl-main>.v2-label{display:block;margin-bottom:6px}
.wl-hero .v2-sub.is-error{color:var(--accent)}
.wl-hero .v2-sub .wl-err{display:block;margin-top:4px;font-family:var(--sans);font-size:12.5px;color:var(--accent)}
.wl-trip{display:flex;flex-wrap:wrap;gap:8px 22px;margin:0}
.wl-trip:empty{display:none}
.wl-trip div{min-width:0}
.wl-trip dt{font-family:var(--sans);font-size:11.5px;font-weight:600;color:var(--muted)}
.wl-trip dd{margin:2px 0 0;font-family:var(--sans);font-size:19px;font-weight:750;line-height:1.25;color:var(--ink);font-variant-numeric:tabular-nums lining-nums;white-space:nowrap}
.wl-trip dd small{display:block;font-size:11.5px;font-weight:600;color:var(--muted)}

/* 걸음 길: 실제 폭으로 그림(글자 크기 유지). 깃발 = 총 소모, 눈금 = 걸음 수(계단은 분) */
.wl-route{margin:14px 0 0;min-width:0}
.wl-route>.v2-label{display:block;margin-bottom:2px}
.wl-route svg{display:block;max-width:100%;height:auto;overflow:visible}
.wl-route .gnd{fill:color-mix(in srgb,var(--soft) 60%,transparent)}
.wl-route .trk{fill:none;stroke:var(--line);stroke-width:2;stroke-dasharray:5 5}
.wl-route .done{fill:none;stroke:var(--accent);stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round}
.wl-route .tick{stroke:var(--muted);stroke-width:1.4}
.wl-route .tick.mb{stroke:var(--ink);stroke-width:1.4;stroke-dasharray:2 3}
.wl-route .tl{font:600 11px var(--sans);fill:var(--muted);font-variant-numeric:tabular-nums}
.wl-route .tl.mb{font-weight:800;fill:var(--ink)}
.wl-route .flag line{stroke:var(--ink);stroke-width:1.2}
.wl-route .flag text{font:650 11px var(--sans);fill:var(--ink);font-variant-numeric:tabular-nums}
.wl-route .flag.fut line{stroke:var(--line);stroke-dasharray:2 2}
.wl-route .flag.fut text{fill:var(--muted);font-weight:500}
.wl-route .goal line{stroke:var(--accent);stroke-width:1.5}
.wl-route .goal path{fill:var(--accent)}
.wl-route .goal text{font:750 11.5px var(--sans);fill:var(--accent)}
.wl-route .walker circle{fill:var(--accent);stroke:var(--card);stroke-width:3}
.wl-route .walker 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}
.wl-help{margin:6px 0 0;font-family:var(--sans);font-size:12px;line-height:1.55;color:var(--muted)}
.wl-help:empty{display:none}

.wl-cells{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,150px),1fr));gap:12px 18px;margin-top:12px;padding-top:12px;border-top:1px solid var(--soft)}
.wl-cells:empty{display:none}
.wl-cells>div{min-width:0}
.wl-cells b{display:block;margin-top:2px;font-family:var(--sans);font-size:17px;font-weight:750;line-height:1.3;color:var(--ink);font-variant-numeric:tabular-nums lining-nums}
.wl-cells b i{font-style:normal;font-size:12px;font-weight:650;color:var(--muted)}
.wl-cells small{display:block;margin-top:1px;font-family:var(--sans);font-size:11.5px;line-height:1.4;color:var(--muted)}
.wl-cells .is-target b{color:var(--accent)}

/* 입력 타일: 칸마다 라벨 → 입력 → 자주 쓰는 값(칩). 나란한 칸의 라벨 높이는 theme.js 가 맞춤 */
.wl-set{padding:14px 18px 16px;border-bottom:1px solid var(--soft)}
.wl-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,180px),1fr));gap:14px}
.wl-chips{display:flex;margin-top:6px;gap:3px}
.wl-chips button{height:26px;padding:0 7px;font-size:12px}
.wl-select{display:block;width:100%;max-width:100%;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}
.wl-select:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.wl-set>.wl-help{margin-top:12px}
.wl-acts{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:12px}

/* 속도·경사 표: 칸 색 = 같은 시간(거리)에서의 열량, 지금 조건 칸은 테두리. 좁으면 표만 가로 스크롤 */
.wl-plan{padding:14px 18px 16px}
.wl-plan-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 12px;margin-bottom:8px}
.wl-plan-head .wl-help{margin:0}
.wl-map-box{overflow-x:auto}
.wl-map{width:100%;min-width:340px;border-collapse:separate;border-spacing:3px;font-family:var(--sans)}
.wl-map th{padding:2px 4px;font-size:11.5px;font-weight:650;color:var(--muted);text-align:center;white-space:nowrap}
.wl-map thead th small{display:block;font-size:10.5px;font-weight:500}
.wl-map .corner{text-align:left;font-weight:600}
.wl-map tbody th{text-align:right;padding-right:6px}
.wl-map td{padding:0}
.wl-map button{display:block;width:100%;height:34px;padding:0 2px;border:1px solid transparent;border-radius:var(--radius);background:color-mix(in srgb,var(--accent) var(--a,6%),var(--paper));color:var(--ink);font-family:var(--sans);font-size:12.5px;font-weight:650;font-variant-numeric:tabular-nums;cursor:pointer;transition:background-color .35s ease}
.wl-map button:hover{border-color:var(--line)}
.wl-map button[aria-pressed="true"]{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink);font-weight:800}
.wl-map button:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.wl-plan>.wl-help{margin-top:8px}

/* 계단 종류 막대: 한 번 만들고 너비·값만 바꿈(누르는 중 사라짐 방지) */
.wl-bars{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));gap:4px 18px}
.wl-bars button{display:grid;grid-template-columns:minmax(0,1fr) minmax(60px,1fr) auto;gap:10px;align-items:center;width:100%;padding:6px;border:1px solid transparent;border-radius:var(--radius);background:none;font-family:var(--sans);font-size:12.5px;color:var(--ink);text-align:left;cursor:pointer}
.wl-bars button:hover{background:var(--btn)}
.wl-bars button:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.wl-bars .nm{min-width:0;line-height:1.3}
.wl-bars .nm small{display:block;font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}
.wl-bars .bar{height:10px;border-radius:5px;background:var(--soft);overflow:hidden}
.wl-bars .bar b{display:block;height:100%;border-radius:5px;background:var(--line);transition:width .45s ease}
.wl-bars .v{min-width:64px;text-align:right;font-variant-numeric:tabular-nums;color:var(--muted);white-space:nowrap}
.wl-bars li.is-on button{border-color:var(--accent);background:var(--accent-wash)}
.wl-bars li.is-on .bar b{background:var(--accent)}
.wl-bars li.is-on .v{font-weight:750;color:var(--ink)}
@media (prefers-reduced-motion:reduce){ .wl-map button,.wl-bars .bar b{transition:none} }

@container wl (max-width:560px){
  .wl-bar,.wl-hero,.wl-set,.wl-plan{padding-left:12px;padding-right:12px}
  .wl-basis{margin-left:0}
  .wl-trip{gap:8px 16px}
  .wl-trip dd{font-size:17px}
}
@container wl (max-width:400px){
  .wl-map button{font-size:12px}
  .wl-tiles{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px 10px}
  .wl-tiles .wl-tile:has(#wlGrade),.wl-tiles .wl-tile:has(#wlSpeed){grid-column:1 / -1}
}