/* 노트 마하 변환기 전용 CSS (2026-10-20). 답 띠 → [입력판 | 고도–속도 판](작업면 720 이상 두 열, 판이 입력판 높이를 채움) → 속도 띠.
   움직임(R45): 판의 지금 점·눈금 표식(translate), 처음 그릴 때 음속선이 그려짐, 속도 띠 표식(translateX). 동작 줄이기면 바로. 폭 판단은 작업면 컨테이너 kmc. 공용 부품 assets/v2.css */
.kmc-work{container:kmc / inline-size}
.kmc-work .v2-status:empty{display:none}
.kmc-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:2px 10px;margin:0 0 8px}
.kmc-headhint{font-family:var(--sans);font-size:12px;color:var(--muted);overflow-wrap:anywhere}
.kmc-note{margin:0;font-family:var(--sans);font-size:12px;line-height:1.55;color:var(--muted)}
.kmc-note:empty{display:none}

/* 답 띠 */
.kmc-ans{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,auto);align-items:end;gap:10px 24px;padding:16px 18px 14px;border-bottom:1px solid var(--soft)}
.kmc-ansl{min-width:0;container:kmcans / inline-size}
.kmc-ansl > .v2-label{display:block;margin-bottom:6px;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.kmc-ans .v2-big{flex-wrap:wrap;transition:opacity var(--ease)}
.kmc-ans .v2-big:not(.is-empty) span{white-space:nowrap;font-size:clamp(22px, calc(100cqi / (var(--kmc-len, 6) * .62)), 1em)}
.kmc-ans .v2-big.is-empty span{font-size:16px;font-weight:600;line-height:1.4;color:var(--muted);white-space:normal}
.kmc-ans .v2-sub{transition:opacity var(--ease)}
.kmc-ans.is-pend .v2-big,.kmc-ans.is-pend .v2-sub,.kmc-tiles.is-pend{opacity:.45}
.kmc-ansr{display:flex;flex-direction:column;align-items:flex-end;gap:10px;min-width:0;max-width:400px}
.kmc-ansr .v2-formula{margin:0;text-align:right;white-space:normal;overflow-wrap:anywhere;line-height:1.6}
.kmc-acts{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:8px}
@container kmc (max-width:640px){
  .kmc-ans{grid-template-columns:minmax(0,1fr)}
  .kmc-ansr{align-items:stretch;max-width:none}
  .kmc-ansr .v2-formula{text-align:left}
  .kmc-acts{justify-content:flex-start}
}

/* 입력판 | 고도–속도 판 */
.kmc-main{display:grid;grid-template-columns:minmax(0,1fr);border-bottom:1px solid var(--soft)}
.kmc-panel{display:grid;align-content:start;gap:12px;min-width:0;padding:14px 18px 16px}
.kmc-plot{display:flex;flex-direction:column;min-width:0;padding:14px 18px 12px;border-top:1px solid var(--soft)}
.kmc-chart{position:relative;flex:1 1 auto;min-height:300px;touch-action:pan-y;cursor:crosshair;user-select:none;-webkit-user-select:none}
.kmc-chart svg{position:absolute;inset:0;display:block;width:100%;height:100%;overflow:visible}
@container kmc (min-width:720px){
  .kmc-main{grid-template-columns:minmax(330px,390px) minmax(0,1fr)}
  .kmc-plot{border-top:0;border-left:1px solid var(--soft)}
  .kmc-chart{min-height:330px}
}
.kmc-pair,.kmc-air{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 12px}
.kmc-cell > label{display:flex;align-items:baseline;justify-content:space-between;gap:6px}
.kmc-cell > label span{min-width:0;overflow-wrap:anywhere}
.kmc-ap{flex:0 0 auto;font-family:var(--mono);font-size:11.5px;font-style:normal;font-weight:700;color:var(--muted)}
.kmc-cell .v2-input input{font-size:17px;font-weight:750}
.kmc-cell.is-src .v2-input{border-color:var(--ink)}
.kmc-oat > label em{color:var(--muted)}
.kmc-oat.is-auto .v2-input input{color:var(--muted);font-weight:500}
.kmc-ctl{display:grid;gap:5px;min-width:0}
.kmc-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.kmc-quick button{padding:0 9px;font-variant-numeric:tabular-nums}
.kmc-unit{flex:0 0 auto;min-width:52px;height:auto;padding:0 6px 0 9px;border:0;border-left:1px solid var(--soft);border-radius:0 var(--radius) var(--radius) 0;background:var(--wash);color:var(--ink);font-family:var(--sans);font-size:12.5px;font-weight:650;cursor:pointer}
.kmc-unit:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.kmc-isa{height:30px;padding:0 10px;border:1px dashed var(--line);border-radius:var(--radius);background:none;font-family:var(--sans);font-size:12px;font-weight:650;color:var(--ink);cursor:pointer}
.kmc-isa:hover{background:var(--btn)}
.kmc-isa:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* 값 타일 */
.kmc-tiles{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,108px),1fr));gap:1px;background:var(--soft);border:1px solid var(--soft);border-radius:var(--radius);overflow:hidden;transition:opacity var(--ease)}
.kmc-tiles li{display:flex;flex-direction:column;gap:1px;min-width:0;padding:8px 10px 7px;background:var(--paper)}
.kmc-tiles span{font-family:var(--sans);font-size:11.5px;font-weight:600;line-height:1.3;color:var(--muted);overflow-wrap:anywhere}
.kmc-tiles b{font-family:var(--sans);font-size:15.5px;font-weight:800;line-height:1.25;color:var(--ink);font-variant-numeric:tabular-nums lining-nums;overflow-wrap:anywhere}
.kmc-tiles small{font-family:var(--sans);font-size:11.5px;line-height:1.3;color:var(--muted);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.kmc-tiles small:empty{display:none}
.kmc-tiles li[data-k="a"] b{color:var(--accent)}

/* 고도–속도 판 */
.kmc-chart .gl{stroke:var(--soft);stroke-width:1}
.kmc-chart .fr{fill:none;stroke:var(--line);stroke-width:1}
.kmc-chart .tx{font-family:var(--sans);font-size:11px;fill:var(--muted);font-variant-numeric:tabular-nums}
.kmc-chart .ax{font-family:var(--sans);font-size:11px;font-weight:650;fill:var(--muted)}
.kmc-chart .trop{stroke:var(--muted);stroke-width:1;stroke-dasharray:2 4}
.kmc-chart .tl{font-family:var(--sans);font-size:10.5px;font-weight:600;fill:var(--muted)}
.kmc-chart .tl,.kmc-chart .ml{paint-order:stroke;stroke:var(--card);stroke-width:3px;stroke-linejoin:round}
.kmc-chart .mk{fill:none;stroke:color-mix(in srgb, var(--ink) 38%, var(--card));stroke-width:1.1}
.kmc-chart .m1{fill:none;stroke:var(--ink);stroke-width:2}
.kmc-chart .m1.is-in{stroke-dasharray:1;stroke-dashoffset:1;animation:kmcDraw 1.1s cubic-bezier(.3,.6,.3,1) .1s forwards}
@keyframes kmcDraw{to{stroke-dashoffset:0}}
.kmc-chart .ml{font-family:var(--sans);font-size:10.5px;font-weight:700;fill:var(--muted)}
.kmc-chart .m1l{fill:var(--ink)}
.kmc-chart .mc{fill:none;stroke:var(--accent);stroke-width:1.6;stroke-dasharray:6 4}
.kmc-chart .cs{fill:none;stroke:var(--ink);stroke-width:1.3;stroke-dasharray:2 3}
.kmc-chart .pt,.kmc-chart .xm,.kmc-chart .ym{transition:transform .55s cubic-bezier(.2,.75,.25,1)}
.kmc-chart .pt .halo{fill:color-mix(in srgb, var(--accent) 20%, transparent)}
.kmc-chart .pt .dot{fill:var(--accent);stroke:var(--card);stroke-width:2}
.kmc-chart .pt .pl{font-family:var(--sans);font-size:12px;font-weight:800;fill:var(--ink);paint-order:stroke;stroke:var(--card);stroke-width:4px;stroke-linejoin:round}
.kmc-chart .xm line,.kmc-chart .ym line{stroke:var(--accent);stroke-width:2}
.kmc-chart .xm text,.kmc-chart .ym text{font-family:var(--sans);font-size:11px;font-weight:800;fill:var(--accent);font-variant-numeric:tabular-nums;paint-order:stroke;stroke:var(--card);stroke-width:4px;stroke-linejoin:round}
.kmc-chart.is-drag .pt,.kmc-chart.is-drag .xm,.kmc-chart.is-drag .ym{transition:none}

/* 속도 띠 */
.kmc-band{padding:14px 18px 14px}
.kmc-strip svg{display:block;width:100%;height:96px;overflow:visible}
.kmc-strip .rg{fill:color-mix(in srgb, var(--ink) 7%, var(--paper));stroke:var(--card);stroke-width:1;transition:fill var(--ease)}
.kmc-strip .rg-trans{fill:color-mix(in srgb, var(--ink) 12%, var(--paper))}
.kmc-strip .rg-sup{fill:color-mix(in srgb, var(--ink) 17%, var(--paper))}
.kmc-strip .rg-hyper{fill:color-mix(in srgb, var(--ink) 23%, var(--paper))}
.kmc-strip .rg.is-on{fill:color-mix(in srgb, var(--accent) 22%, var(--paper))}
.kmc-strip .rn{font-family:var(--sans);font-size:11px;font-weight:650;fill:var(--ink);pointer-events:none;paint-order:stroke;stroke:color-mix(in srgb, var(--ink) 10%, var(--paper));stroke-width:3px;stroke-linejoin:round}
.kmc-strip .rn.is-on{font-weight:800}
.kmc-strip .tk{stroke:var(--muted);stroke-width:1}
.kmc-strip .tn{font-family:var(--sans);font-size:10.5px;fill:var(--muted);font-variant-numeric:tabular-nums}
.kmc-strip .ld{stroke:var(--soft);stroke-width:1}
.kmc-strip .rl{font-family:var(--sans);font-size:11px;font-weight:600;fill:var(--muted)}
.kmc-strip .rl.is-near{fill:var(--ink);font-weight:750}
.kmc-strip .rf{fill:var(--card);stroke:var(--muted);stroke-width:1.2}
.kmc-strip .rf.is-near{fill:var(--ink);stroke:var(--ink)}
.kmc-strip .cur{transition:transform .55s cubic-bezier(.2,.75,.25,1)}
.kmc-strip .cur line{stroke:var(--accent);stroke-width:2.5;opacity:.85}
.kmc-strip .cur path{fill:var(--accent)}
.kmc-strip .cl{font-family:var(--sans);font-size:12px;font-weight:800;fill:var(--accent);font-variant-numeric:tabular-nums}
.kmc-near{list-style:none;margin:8px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 12px}
.kmc-near li{display:flex;align-items:baseline;justify-content:space-between;gap:10px;min-width:0;padding:8px 10px;border:1px solid var(--soft);border-radius:var(--radius);background:var(--paper)}
.kmc-near li span{min-width:0;font-family:var(--sans);font-size:12.5px;line-height:1.45;color:var(--muted);overflow-wrap:anywhere}
.kmc-near li b{flex:0 0 auto;font-family:var(--sans);font-size:15px;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums}
.kmc-near li.is-off b{color:var(--muted);font-weight:600}
@container kmc (max-width:520px){ .kmc-near{grid-template-columns:minmax(0,1fr)} }

@media (prefers-reduced-motion: reduce){
  .kmc-chart .pt,.kmc-chart .xm,.kmc-chart .ym,.kmc-strip .cur{transition:none}
  .kmc-chart .m1.is-in{animation:none;stroke-dasharray:none;stroke-dashoffset:0}
}