/* 속도 계산기 전용 CSS (2026-10-21). 답 띠(+ 다른 단위 칸) → [거리·속력·시간 삼각형 | 단위·식] → 구간 줄(거리 · 시·분·초 · 속력) + 합계 → 거리–시간 그래프 → 속력 자.
   폭 판단은 작업면 컨테이너 sdt: 720px 이상은 머리글 + 한 줄 표, 그 밑은 줄마다 카드(거리 | 속력 / 걸린 시간). 긴 값은 칸 글자를 줄임(is-long). 줄 열은 모든 줄이 같은 fr 틀이라 세로선이 맞는다.
   움직임(R45): 그래프 점이 실제 시간 비율로 선을 따라 감(동작 줄이기면 끝에 멈춤). 공용 부품 assets/v2.css */
.sdt-work{container:sdt / inline-size}
.sdt-work .v2-status:empty{display:none}
.sdt-work:lang(ko) :is(.v2-sub,.sdt-cap,.sdt-trihint,.v2-hint){word-break:keep-all;overflow-wrap:anywhere} /* KO는 낱말 중간에서 끊지 않음 */

/* 답 띠 */
.sdt-ans{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,auto);grid-template-areas:"l r" "s s" "f f" "t t";align-items:end;gap:10px 24px;padding:16px 18px 14px;border-bottom:1px solid var(--soft)}
.sdt-ansl{grid-area:l}.sdt-ansr{grid-area:r}.sdt-sent{grid-area:s}.sdt-fml{grid-area:f}.sdt-tiles{grid-area:t}
.sdt-ans .sdt-fml{margin:0;white-space:normal;overflow-wrap:anywhere;line-height:1.6}
.sdt-ans .sdt-sent{margin:0;max-width:62em}
.sdt-ansl{min-width:0}
.sdt-ansl > .v2-label{display:block;margin-bottom:6px}
.sdt-ans .v2-big{flex-wrap:wrap;transition:opacity var(--ease)}
.sdt-ans .v2-big.is-long{font-size:34px}
.sdt-ans .v2-big:not(.is-empty) span{white-space:nowrap}
.sdt-ans .v2-big .sdt-eq{font-style:normal;font-weight:700;font-size:.62em;color:var(--muted);align-self:center}
.sdt-ans .v2-big.is-empty span{font-size:16px;font-weight:600;line-height:1.4;color:var(--muted);white-space:normal}
.sdt-ans .v2-sub{transition:opacity var(--ease)}
.sdt-ans.is-pend .v2-big,.sdt-ans.is-pend .v2-sub,.sdt-ans.is-pend .sdt-tiles{opacity:.45}
.sdt-ansr{display:flex;flex-direction:column;align-items:flex-end;align-self:start;gap:8px;min-width:0;max-width:300px} /* 버튼은 둘씩 접혀 큰 수 자리를 남긴다 */
.sdt-acts{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:8px}
.sdt-tiles{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:2px 0 0;padding:0} /* 칸 수가 4~5개로 바뀌어도 마지막 줄이 비지 않게 늘림 */
.sdt-tiles[hidden]{display:none}
.sdt-tiles li{flex:1 1 96px;display:flex;flex-direction:column;gap:2px;min-width:0;padding:7px 10px;background:var(--paper);border:1px solid var(--soft);border-radius:var(--radius)}
.sdt-tiles span{font-family:var(--sans);font-size:11px;font-weight:600;color:var(--muted);overflow-wrap:anywhere}
.sdt-tiles b{font-family:var(--sans);font-size:15px;font-weight:750;font-variant-numeric:tabular-nums lining-nums;color:var(--ink);overflow-wrap:anywhere}
.sdt-tiles b i{font-style:normal;font-weight:600;color:var(--muted);margin-right:3px}

/* 삼각형 + 단위 */
.sdt-top{display:grid;grid-template-columns:168px minmax(0,1fr);align-items:center;gap:12px 22px;padding:14px 18px;border-bottom:1px solid var(--soft)}
.sdt-tri > .v2-label{display:block;margin:0 0 6px}
.sdt-trib{position:relative;width:168px;aspect-ratio:160 / 136}
.sdt-trib svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.sdt-trib .tri-r{fill:var(--paper);transition:fill var(--ease)}
.sdt-trib .tri-r.is-on{fill:var(--fill)}
.sdt-trib .tri-o{fill:none;stroke:var(--ink);stroke-width:1.6;stroke-linejoin:round}
.tri-b{position:absolute;transform:translate(-50%,-50%);height:24px;padding:0 6px;border:0;border-radius:var(--radius);background:var(--paper);font-family:var(--sans);font-size:12.5px;font-weight:750;line-height:24px;color:var(--ink);white-space:nowrap;cursor:pointer} /* 글자가 변에 걸려도 읽히게 칸 색 바탕 */
.tri-b:hover{background:var(--btn)}
.tri-b[aria-pressed="true"]{color:var(--on-fill);background:var(--fill)}
.tri-b:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.tri-b--d{left:50%;top:40%}
.tri-b--v{left:28%;top:80%}
.tri-b--t{left:72%;top:80%}
.sdt-ctl{display:grid;gap:8px;min-width:0}
.sdt-units{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.sdt-units select{display:block;width:100%;min-width:0;height:var(--v2-ctl,42px);padding:0 6px;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;text-overflow:ellipsis}
.sdt-units select:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.sdt-rule{margin:0;font-family:var(--mono);font-size:13px;font-weight:700;color:var(--ink)}
.sdt-trihint{margin:0;font-family:var(--sans);font-size:12px;line-height:1.55;color:var(--muted)}

/* 구간 줄: 머리글·줄·합계가 같은 열 틀 */
.sdt-form{padding:12px 18px 16px;border-bottom:1px solid var(--soft)}
.sdt-head,.sdt-row,.sdt-tot{display:grid;grid-template-columns:2.2em minmax(0,1.3fr) minmax(0,2fr) minmax(0,1.3fr) 30px;gap:8px;align-items:center}
.sdt-head{margin:0 0 6px}
.sdt-head span{font-family:var(--sans);font-size:11.5px;font-weight:600;letter-spacing:.02em;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sdt-head span.is-auto{color:var(--ink)}
.sdt-rows{display:grid;gap:8px;list-style:none;margin:0;padding:0}
.sdt-no{font-family:var(--mono);font-size:12px;font-weight:700;color:var(--muted);text-align:center}
.sdt-nol{display:none}
.sdt-rows:not(.is-multi) .sdt-no{visibility:hidden}
.sdt-c{position:relative}
.sdt-fl{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} /* 넓은 화면은 머리글이 라벨 */
.sdt-tag{font-style:normal;font-weight:700;margin-left:6px;color:var(--ink)}
.sdt-tag:empty{display:none}
.sdt-c .v2-input input{padding:0 8px}
.sdt-c .v2-input input.is-long{font-size:13px;padding:0 5px} /* 긴 값(넘겨받은 소수·큰 수)도 칸 안에 */
.sdt-c.is-auto .v2-input{background:var(--wash);border-color:var(--ink);border-style:dashed}
.sdt-c.is-auto .v2-input b{background:none}
.sdt-hms{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}
.sdt-hms .v2-input b{min-width:0;padding:0 5px;font-size:11px}
.sdt-hms .v2-input input{padding:0 5px}
.sdt-del{width:30px;height:var(--v2-ctl,42px);padding:0;border:1px solid var(--soft);border-radius:var(--radius);background:var(--paper);font-family:var(--sans);font-size:18px;line-height:1;color:var(--muted);cursor:pointer}
.sdt-del:hover{background:var(--btn);color:var(--ink)}
.sdt-del:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.sdt-del[hidden]{display:none}
.sdt-tot{margin:8px 0 0;padding:8px 0 0;border-top:1px solid var(--line)}
.sdt-tot[hidden]{display:none}
.sdt-tot .sdt-no{font-family:var(--sans);font-size:11.5px;text-align:left;white-space:nowrap}
.sdt-tv{font-family:var(--sans);font-size:13.5px;font-weight:750;font-variant-numeric:tabular-nums lining-nums;color:var(--ink);text-align:right;padding:0 8px;overflow-wrap:anywhere}
.sdt-more{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:12px 0 0}
.sdt-more .v2-hint{flex:1 1 220px;min-width:0}

/* 그림: 거리–시간 그래프, 속력 자 */
.sdt-gf,.sdt-sf{margin:0;padding:14px 18px 14px}
.sdt-gf{border-bottom:1px solid var(--soft)}
.sdt-vhead{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 12px;margin:0 0 6px}
.sdt-replay{height:28px}
.sdt-g{height:232px}
.sdt-s{height:122px}
.sdt-g svg,.sdt-s svg{display:block;width:100%;height:100%;overflow:visible}
.sdt-cap{margin:6px 0 0;font-family:var(--sans);font-size:12.5px;line-height:1.6;color:var(--muted)}
.sdt-gf text,.sdt-sf text{font-family:var(--sans);font-variant-numeric:tabular-nums lining-nums}
.g-grid{stroke:var(--soft);stroke-width:1}
.g-axis{fill:none;stroke:var(--line);stroke-width:1.2}
.g-ty{font-size:10.5px;fill:var(--muted);text-anchor:end}
.g-tx{font-size:10.5px;fill:var(--muted);text-anchor:middle}
.g-ax{font-size:10.5px;font-weight:600;fill:var(--muted);text-anchor:start}
.g-line{fill:none;stroke:var(--ink);stroke-width:2.4;stroke-linejoin:round;stroke-linecap:round}
.g-avg{stroke:var(--muted);stroke-width:1.4;stroke-dasharray:5 4}
.g-knot{fill:var(--card);stroke:var(--ink);stroke-width:1.5}
.g-sl,.g-al,.g-dot text,.s-me,.s-name{paint-order:stroke;stroke:var(--card);stroke-width:3px;stroke-linejoin:round}
.g-sl{font-size:11.5px;font-weight:700;fill:var(--ink);text-anchor:middle}
.g-al{font-size:11px;font-weight:600;fill:var(--muted);text-anchor:start}
.g-dot circle{fill:var(--accent);stroke:var(--card);stroke-width:2}
.g-dot text{font-size:11.5px;font-weight:750;fill:var(--accent);text-anchor:middle}
.s-axis{stroke:var(--line);stroke-width:1.5}
.s-tick{stroke:var(--line);stroke-width:1}
.s-dec{font-size:10px;fill:var(--muted);text-anchor:middle}
.s-unit{font-size:10.5px;font-weight:600;fill:var(--muted);text-anchor:end}
.s-band{stroke:var(--muted);stroke-width:7;stroke-linecap:round;opacity:.5}
.s-ref{fill:var(--muted)}
.s-lead{stroke:var(--soft);stroke-width:1}
.s-name{font-size:11px;font-weight:600;fill:var(--ink);text-anchor:middle}
.s-me{font-size:12px;font-weight:800;fill:var(--accent);text-anchor:middle}
.s-mel{stroke:var(--accent);stroke-width:2}

/* 좁은 작업면: 답 띠 한 열, 삼각형 작게, 줄은 카드 */
@container sdt (max-width:640px){
  .sdt-ans{grid-template-columns:minmax(0,1fr);grid-template-areas:"l" "s" "f" "r" "t"}
  .sdt-ansr{align-items:flex-start;max-width:none}
  .sdt-acts{justify-content:flex-start}
}
@container sdt (max-width:719px){
  .sdt-top{grid-template-columns:150px minmax(0,1fr);gap:10px 14px;padding:12px 14px}
  .sdt-trib{width:150px}
  .tri-b{font-size:11.5px;padding:0 3px}
  .sdt-units{grid-template-columns:minmax(0,1fr)}
  .sdt-form{padding:12px 14px 14px}
  .sdt-head{display:none}
  .sdt-row{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-areas:"no no" "d v" "t t";gap:6px 8px;position:relative}
  .sdt-rows.is-multi .sdt-row{padding:8px 10px 10px;border:1px solid var(--soft);border-radius:var(--radius)}
  .sdt-rows:not(.is-multi) .sdt-no{display:none}
  .sdt-no{grid-area:no;text-align:left;font-family:var(--sans);font-size:12px;color:var(--ink);min-height:30px;line-height:30px}
  .sdt-nol{display:inline}
  .sdt-c--d{grid-area:d}.sdt-c--v{grid-area:v}.sdt-c--t{grid-area:t}
  .sdt-fl{position:static;width:auto;height:auto;overflow:visible;clip:auto;display:block;margin:0 0 5px;font-family:var(--sans);font-size:11.5px;font-weight:600;letter-spacing:.02em;color:var(--muted);white-space:nowrap}
  .sdt-del{position:absolute;top:8px;right:10px;width:30px;height:30px}
  .sdt-tot{display:flex;flex-wrap:wrap;gap:2px 14px}
  .sdt-tot .sdt-tv{text-align:left;padding:0}
  .sdt-tot > span:last-child{display:none}
  .sdt-gf,.sdt-sf{padding:12px 14px}
  .sdt-g{height:206px}
}
@container sdt (max-width:419px){
  .sdt-trihint{display:none}
  .sdt-ans{padding:14px 14px 12px}
  .sdt-tiles li{flex-basis:40%}
}
@media (prefers-reduced-motion:reduce){.sdt-trib .tri-r{transition:none}}