/* 스마트 보폭 계산기 전용 CSS (2026-10-19). 몸 정보 한 줄 ssc-body → 카드 두 장 ssc-cards [걷기 보폭 | 달리기 보폭](머리 = 그림 전환 버튼)
   → 그림 ssc-scene(옆에서 본 사람, 실제 키 비례) → ssc-foot(문장·기기 줄·복사). 화면 순서 = DOM 순서(order 안 씀). 툴 폭은 컨테이너 ssc 로 잼. 공용 부품은 assets/v2.css */
.ssc-work{container:ssc / inline-size}

/* 몸 정보: 넓으면 한 줄, 좁으면 두 칸씩 */
.ssc-body{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr) minmax(0,1.2fr);gap:12px 14px;margin:0;padding:16px 18px 14px;border-bottom:1px solid var(--soft)}
.ssc-body:has(.ssc-f-unit){grid-template-columns:minmax(0,1fr) minmax(0,1.3fr) minmax(0,.8fr) minmax(0,1fr)}
@container ssc (max-width:620px){ .ssc-body:has(.ssc-f-unit){grid-template-columns:minmax(0,1fr) minmax(0,1fr)} }
/* 480px 아래: 키 | 나이, 성별은 한 줄 전체(긴 성별 이름·나이 칸 잘림 방지). en은 단위·키(ft·in) 한 줄씩, 나이 | 성별. 화면 순서 = DOM 순서 */
@container ssc (max-width:480px){
  .ssc-body{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} .ssc-f-sex{grid-column:1 / -1}
  .ssc-body:has(.ssc-f-unit) .ssc-f-unit,.ssc-body:has(.ssc-f-unit) .ssc-f-h{grid-column:1 / -1}
  .ssc-body:has(.ssc-f-unit) .ssc-f-sex{grid-column:auto}
}
.ssc-body .v2-seg{display:flex}
.ssc-body .v2-seg button{flex:1 1 0;height:var(--v2-ctl,42px)}
.ssc-pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px}
.ssc-f-h[hidden]{display:none}
.ssc-body span.v2-label,.ssc-in span.v2-label{display:block;margin:0 0 5px}

/* 그림 */
.ssc-scene{margin:0;padding:12px 18px 8px;border-top:1px solid var(--soft)}
.ssc-stage{min-width:0;overflow:hidden}
.ssc-stage svg{display:block;max-width:100%;height:auto}
.ssc-stage .gl{stroke:var(--line);stroke-width:1.5}
.ssc-stage .rul line:not(.gl){stroke:var(--muted);stroke-width:1}
.ssc-stage .rul text{font:600 10.5px var(--sans);fill:var(--muted);font-variant-numeric:tabular-nums}
.ssc-stage .fp{fill:none;stroke:var(--line);stroke-width:1;stroke-dasharray:2 2}
.ssc-stage .fp.on{fill:var(--ink);stroke:none;opacity:.55}
.ssc-stage .fp.on.f{opacity:.3}
.ssc-stage .near path,.ssc-stage .far path,.ssc-stage .bod path{fill:none;stroke-linecap:round;stroke-linejoin:round}
.ssc-stage .near path,.ssc-stage .bod path{stroke:var(--ink)}
.ssc-stage .far path{stroke:var(--muted);opacity:.55}
.ssc-stage .bod circle{fill:var(--ink)}
.ssc-stage .dim path{fill:none;stroke:var(--accent);stroke-width:1.4}
.ssc-stage .dim text{font:750 12.5px var(--sans);fill:var(--accent);font-variant-numeric:tabular-nums;paint-order:stroke;stroke:var(--card);stroke-width:4px;stroke-linejoin:round}
.ssc-stage .d2 path{stroke:var(--muted);stroke-width:1}
.ssc-stage .d2 text{font-weight:600;font-size:11px;fill:var(--muted)}
.ssc-stage .hd path{fill:none;stroke:var(--muted);stroke-width:1}
.ssc-stage .hd text{font:600 11px var(--sans);fill:var(--muted);font-variant-numeric:tabular-nums}
.ssc-cap{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:2px;font-family:var(--sans);font-size:12.5px;line-height:1.45;color:var(--muted)}
.ssc-play{flex:0 0 auto;height:30px;padding:0 10px;font-size:12.5px}
.ssc-play .i{width:12px;height:12px;fill:currentColor}
.ssc-play .pl,.ssc-play.is-paused .ps{display:none}
.ssc-play.is-paused .pl{display:inline}
.ssc-play[hidden]{display:none}

/* 카드 두 장: 머리(큰 수)가 그림 전환 버튼 */
.ssc-cards{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;padding:16px 18px 16px}
@container ssc (min-width:640px){ .ssc-cards{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} }
.ssc-card{display:grid;grid-template-rows:subgrid;grid-row:span 6;align-content:start;gap:10px;min-width:0;padding:14px 16px 14px;border:1.5px solid var(--soft);border-radius:var(--radius)} /* 폼은 .ssc-inw 안에 둔다: 폼의 부모는 테마가 컨테이너 v2in 으로 잡고, 컨테이너는 subgrid 가 꺼진다 */
.ssc-inw{min-width:0}
.ssc-card.is-on{border-color:var(--ink)}
.ssc-head{display:block;width:100%;margin:0;padding:0;border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer;border-radius:calc(var(--radius) - 2px)}
.ssc-head:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.ssc-head__row{display:flex;align-items:center;justify-content:space-between;gap:8px}
.ssc-head .v2-label{margin:0;color:var(--ink)}
.ssc-card:not(.is-on) .ssc-head .v2-label{color:var(--muted)}
.ssc-badge{font-family:var(--sans);font-size:11.5px;font-weight:650;color:var(--muted);white-space:nowrap}
.ssc-card.is-on .ssc-badge{color:var(--ink)}
.ssc-big{display:block;margin:4px 0 0;font-size:clamp(34px,13cqi,46px);line-height:1.05;white-space:nowrap}
.ssc-big small{margin-left:4px;font-family:var(--sans);font-size:16px;font-weight:650}
.ssc-big.is-empty{color:var(--muted)}
.ssc-note{margin:0;font-family:var(--sans);font-size:12.5px;line-height:1.55;color:var(--muted)}
.ssc-note.is-error{color:var(--accent)}

/* 어림 범위 띠: 키 × 0.30~0.55, 오므론 0.37~0.45 칠함, 눈금 = 천천히·평소·빠르게, 점 = 지금 값 */
.ssc-gauge{position:relative;padding:2px 0 16px}
.ssc-gauge:empty{padding:0}
.ssc-gauge .bar{position:relative;display:block;height:8px;border-radius:4px;background:var(--soft)}
.ssc-gauge .band{position:absolute;top:0;bottom:0;border-radius:4px;background:color-mix(in srgb,var(--ink) 18%,transparent)}
.ssc-gauge .tk{position:absolute;top:-2px;width:1px;height:12px;background:var(--muted);opacity:.6}
.ssc-gauge .mk{position:absolute;top:50%;width:14px;height:14px;margin:-7px 0 0 -7px;border:3px solid var(--card);border-radius:50%;background:var(--ink);transition:left 320ms cubic-bezier(.2,.7,.2,1)}
.ssc-gauge .mk.is-meas{background:var(--card);border-color:var(--ink)}
.ssc-gauge .lab{position:absolute;left:0;right:0;bottom:0;height:14px}
.ssc-gauge .lab em{position:absolute;transform:translateX(-50%);font:600 10.5px var(--sans);font-style:normal;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
@media (prefers-reduced-motion:reduce){ .ssc-gauge .mk{transition:none} }

.ssc-how .v2-seg{display:flex}
.ssc-how .v2-seg button{flex:1 1 0;min-width:0;height:auto;min-height:34px;padding:5px 8px;font-size:13px;line-height:1.25;white-space:normal}
.ssc-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px 12px;margin:0}
.ssc-in[hidden]{display:none}
.ssc-f-pace{grid-column:1 / -1}
.ssc-f-pace .v2-seg{display:flex}
.ssc-f-pace .v2-seg button{flex:1 1 0;height:var(--v2-ctl,42px)}
.ssc-ms{display:grid;grid-template-columns:minmax(0,1fr) 8px minmax(0,1fr);align-items:center;gap:0 4px}
.ssc-ms input{text-align:center}
#sscRunEst{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)}
.ssc-colon{font-family:var(--sans);font-weight:700;color:var(--muted);text-align:center}
.ssc-du{flex:0 0 auto;align-self:stretch;margin:0;padding:0 22px 0 8px;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}
.ssc-du:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.ssc-chips{margin-top:6px;flex-wrap:wrap}
.ssc-chips button{height:28px;padding:0 9px;font-size:12px}
@container v2in (max-width:330px){ .ssc-in,#sscRunEst{grid-template-columns:minmax(0,1fr)} }

.ssc-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 14px;margin:0;align-self:start;padding:10px 0 0;border-top:1px solid var(--soft)}
.ssc-tiles:empty{display:none}
.ssc-tiles div{min-width:0}
.ssc-tiles dt{font-family:var(--sans);font-size:11.5px;font-weight:600;color:var(--muted)}
.ssc-tiles dd{margin:2px 0 0;font-family:var(--sans);font-size:16px;font-weight:750;line-height:1.3;color:var(--ink);font-variant-numeric:tabular-nums lining-nums}
.ssc-tiles dd small{display:block;margin-top:1px;font-size:11.5px;font-weight:400;line-height:1.4;color:var(--muted)}

/* 문장·기기 줄·복사 */
.ssc-foot{padding:12px 18px 16px;border-top:1px solid var(--soft)}
.ssc-foot .v2-sub{margin:0}
.ssc-foot .v2-sub.is-error{color:var(--accent)}
.ssc-dev{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 12px;margin:12px 0 0}
@container ssc (max-width:600px){ .ssc-dev{grid-template-columns:minmax(0,1fr)} }
.ssc-dev p{margin:0;padding:10px 12px;border:1px solid var(--soft);border-radius:var(--radius);font-family:var(--sans);font-size:12.5px;line-height:1.55;color:var(--muted)}
.ssc-dev b{display:block;margin-bottom:2px;font-size:12.5px;color:var(--ink)}
.ssc-more{margin:10px 0 0;font-family:var(--sans);font-size:12.5px;line-height:1.55;color:var(--muted)}
.ssc-acts{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:12px}