/* 마우스 테스트 — '마우스 점검대': 위 막대 → [시험 패드 | 시험 패널] → 신호 파형 → 카드 6장. 컨테이너 mst 640·420 기준. */
.mst-work{container:mst/inline-size;overflow:hidden}
.mst-work [hidden]{display:none!important}
.mst-bar{display:flex;align-items:center;justify-content:space-between;gap:10px 14px;flex-wrap:wrap;padding:12px 18px;border-bottom:1px solid var(--soft)}
.mst-acts{display:flex;flex-wrap:wrap;gap:6px}

.mst-main{display:grid;grid-template-columns:minmax(0,1fr) 272px;min-height:372px}
.mst-side .v2-seg button{padding:0 9px}
.mst-pad{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;align-items:center;gap:10px 14px;min-width:0;padding:14px 18px 12px;border-right:1px solid var(--soft);
  background-color:var(--paper);background-image:radial-gradient(var(--dot) 1px,transparent 1.3px);background-size:14px 14px;
  cursor:crosshair;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;overflow:hidden}
.mst-pad:focus{outline:none}
.mst-trail{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.mst-mouse{position:relative;display:block;height:282px;width:auto;max-width:100%;pointer-events:none;overflow:visible}
.mst-rd{position:relative;display:flex;flex-direction:column;align-self:stretch;justify-content:center;min-width:0;pointer-events:none}
.mst-rl{font:600 11.5px/1.35 var(--sans);color:var(--muted)}
.mst-rv{margin:3px 0 2px;font:800 30px/1.05 var(--sans);letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mst-rv.is-flag{color:var(--accent)}
.mst-rc{font:500 11.5px/1.4 var(--sans);color:var(--muted)}
.mst-rl--log{margin-top:14px;padding-top:10px;border-top:1px solid var(--soft)}
.mst-log{display:flex;flex-direction:column;gap:2px;min-height:calc(6 * 17px);margin:5px 0 0;padding:0;list-style:none}
.mst-log li{overflow:hidden;font:600 11px/15px var(--sans);color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap;text-overflow:ellipsis}
.mst-log li:nth-child(n+3){color:var(--muted)}
.mst-log li.is-flag{color:var(--accent)}
.mst-hint{position:relative;grid-column:1/-1;margin:0;text-wrap:balance;font:500 12px/1.45 var(--sans);color:var(--muted);text-align:center;pointer-events:none}

.mst-body{fill:var(--card);stroke:var(--line);stroke-width:1.5}
.mst-k{fill:var(--card);stroke:var(--line);stroke-width:1.2;stroke-dasharray:3 3;transition:fill 80ms ease}
.mst-k.is-seen{stroke:var(--ink);stroke-dasharray:none}
.mst-k.is-down{fill:var(--fill)}
.mst-split{fill:none;stroke:var(--line);stroke-width:1.5}
.mst-gr path{fill:none;stroke:var(--muted);stroke-width:1.2}
.mst-wh.is-down + g .mst-gr path{stroke:var(--on-fill)}
.mst-gr.roll-d{animation:mst-roll-d 170ms ease-out}
.mst-gr.roll-u{animation:mst-roll-u 170ms ease-out}
.mst-ar{fill:var(--soft)}
.mst-ar.is-on{animation:mst-ar 480ms ease-out}
.mst-n{font:800 24px var(--sans);fill:var(--muted);font-variant-numeric:tabular-nums}
.mst-n.is-seen{fill:var(--ink)}
.mst-n.is-down{fill:var(--on-fill)}
.mst-n--s{font-size:12.5px}
.mst-n--s.is-down{fill:var(--ink)}
.mst-sl{font:600 9.5px var(--sans);fill:var(--muted)}

.mst-side{display:flex;flex-direction:column;gap:12px;min-width:0;padding:14px 16px}
.mst-p{display:flex;flex-direction:column;gap:12px}
.mst-ph{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.mst-ph b{font:800 20px/1 var(--sans);color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.mst-ph--line{padding-top:10px;border-top:1px solid var(--soft)}
.mst-ph--line b{font-size:15px}
.mst-sm{margin:0;font:500 11.5px/1.45 var(--sans);color:var(--muted)}
.mst-sm:empty{display:none}

.mst-checks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px;margin:0;padding:0;list-style:none}
.mst-checks li{display:flex;align-items:center;gap:6px;min-width:0;min-height:30px;padding:4px 8px;border:1px dashed var(--line);border-radius:var(--radius);font:600 12px/1.25 var(--sans);color:var(--muted);transition:background var(--ease),color var(--ease)}
.mst-checks li i{position:relative;flex:0 0 auto;width:13px;height:13px;border:1px solid var(--line);border-radius:50%}
.mst-checks li.is-on{border-style:solid;border-color:var(--ink);background:var(--paper);color:var(--ink)}
.mst-checks li.is-on i{border-color:var(--ink);background:var(--ink);animation:mst-pop 220ms ease-out}
.mst-checks li.is-on i::after{content:"";position:absolute;left:3.5px;top:1.5px;width:3px;height:6px;border:solid var(--paper);border-width:0 1.6px 1.6px 0;transform:rotate(45deg)}

.mst-hz{display:flex;flex-direction:column;gap:4px}
.mst-ruler{position:relative;height:24px;margin-top:9px;border-top:2px solid var(--soft)}
.mst-ruler span{position:absolute;top:5px;left:var(--x);transform:translateX(-50%);font:600 10px/1 var(--sans);color:var(--muted);font-variant-numeric:tabular-nums}
.mst-ruler span::before{content:"";position:absolute;left:50%;top:-7px;width:1px;height:5px;background:var(--line)}
.mst-ruler span:last-of-type{transform:translateX(-75%)}
.mst-ruler span:last-of-type::before{left:75%}
.mst-rnow{position:absolute;top:-10px;left:0;width:0;height:0;border:5px solid transparent;border-top:7px solid var(--ink);transform:translateX(-50%);transition:left 160ms ease}
.mst-rtop{position:absolute;top:-6px;left:0;width:2px;height:9px;background:var(--muted);transform:translateX(-50%)}

.mst-pf{display:flex;flex-direction:column;gap:6px}
.mst-dots{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:5px;margin:0;padding:0;list-style:none}
.mst-dots li{position:relative;aspect-ratio:1;border:1.5px solid var(--line);border-radius:50%;transition:background var(--ease),border-color var(--ease)}
.mst-dots li.next{border-style:dashed;border-color:var(--ink)}
.mst-dots li.on{border-color:var(--ink);background:var(--ink);animation:mst-pop 220ms ease-out}
.mst-dots li.x{border-color:var(--accent);background:var(--accent)}
.mst-dots li i{position:absolute;inset:0;display:grid;place-items:center;font:800 9px/1 var(--sans);font-style:normal;color:var(--paper)}
.mst-verdict{margin:0;font:600 13px/1.5 var(--sans);color:var(--ink)}
.mst-verdict.is-flag{color:var(--accent)}
.mst-p > .v2-btn{align-self:flex-start}

.mst-cv{display:grid;grid-template-columns:92px minmax(0,1fr);align-items:center;gap:12px}
.mst-gauge{position:relative;width:92px;height:92px}
.mst-gauge svg{display:block;width:100%;height:100%;transform:rotate(-90deg)}
.mst-rbg{fill:none;stroke:var(--soft);stroke-width:6}
.mst-rfg{fill:none;stroke:var(--ink);stroke-width:6}
.mst-cps[data-s="run"] .mst-rfg{transition:none}
.mst-cps[data-s="done"] .mst-rfg{transition:stroke-dashoffset 360ms ease}
.mst-gauge p{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;margin:0}
.mst-gauge b{font:800 23px/1 var(--sans);color:var(--ink);font-variant-numeric:tabular-nums}
.mst-gauge small{margin-top:2px;font:600 10.5px var(--sans);color:var(--muted)}
.mst-cside{display:flex;flex-direction:column;align-items:flex-start;gap:8px;min-width:0}
.mst-cside .v2-btn{height:auto;min-height:32px;padding-top:5px;padding-bottom:5px;line-height:1.25;text-align:left}
.mst-csub{margin:0;font:600 12px/1.45 var(--sans);color:var(--ink)}
.mst-binw{display:flex;flex-direction:column;gap:4px}
.mst-bins{display:flex;align-items:flex-end;gap:1px;height:56px;padding-top:12px;border-bottom:1px solid var(--line)}
.mst-bins:empty{background:repeating-linear-gradient(90deg,var(--soft) 0 1px,transparent 1px 10%) bottom/100% 24px no-repeat}
.mst-bins i{position:relative;flex:1 1 0;min-width:0;height:var(--h);background:var(--ink);transform-origin:bottom}
.mst-bins.is-in i{animation:mst-grow 420ms cubic-bezier(.2,.7,.2,1) both}
.mst-bins i b{position:absolute;bottom:100%;left:50%;padding-bottom:1px;transform:translateX(-50%);font:700 9.5px/1 var(--sans);color:var(--muted);font-variant-numeric:tabular-nums}
.mst-bins.is-many i b{display:none}
.mst-status:empty{display:none}

.mst-wave{padding:12px 18px 10px;border-top:1px solid var(--soft)}
.mst-wvh{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px;margin-bottom:6px}
.mst-wvh small{font:500 11.5px/1.4 var(--sans);color:var(--muted)}
.mst-wave.is-ex .mst-wvh small{color:var(--ink)}
.mst-lg{display:flex;align-items:center;gap:5px;margin-left:auto;font:500 11px/1.3 var(--sans);color:var(--muted)}
.mst-lg i{display:inline-block;flex:0 0 auto}
.mst-lg i.p{width:10px;height:8px;background:var(--ink)}
.mst-lg i.f{width:0;height:0;margin-left:6px;border:5px solid transparent;border-top:6px solid var(--accent);transform:translateY(2px)}
#mstWave{display:block;width:100%;height:152px}

.mst-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;border-top:1px solid var(--soft);background:var(--soft)}
.mst-card{display:flex;flex-direction:column;gap:8px;min-width:0;padding:12px 14px;background:var(--card)}
.mst-ch{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.mst-ct{min-width:0;font:650 12.5px/1.3 var(--sans);color:var(--ink)}
.mst-ct .s{display:none}
.mst-cn{white-space:nowrap}
.mst-cn b{font:800 22px/1 var(--sans);color:var(--muted);font-variant-numeric:tabular-nums}
.mst-card.is-seen .mst-cn b{color:var(--ink)}
.mst-cn small{margin-left:3px;font:600 11px var(--sans);color:var(--muted)}
.mst-dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px 10px;margin:0}
.mst-dl div{min-width:0}
.mst-dl dt{font:500 11px/1.3 var(--sans);color:var(--muted)}
.mst-dl dd{margin:2px 0 0;font:700 13px/1.2 var(--sans);color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.mst-cf{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:2px 8px;margin:auto 0 0;padding-top:7px;border-top:1px dashed var(--soft);font:500 11px/1.35 var(--sans);color:var(--muted)}
.mst-cf b{font-weight:700;color:var(--ink);white-space:nowrap;font-variant-numeric:tabular-nums}
.mst-cf small{grid-column:1/-1;font:600 11px/1.3 var(--sans)}
.mst-cf small:empty{display:none}
.mst-cf.is-flag,.mst-cf.is-flag b{color:var(--accent)}
.mst-nojs{margin:0;padding:14px 18px;font:600 13px var(--sans);color:var(--accent)}

.mst-rip{position:absolute;width:44px;height:44px;margin:-22px 0 0 -22px;border:2px solid var(--ink);border-radius:50%;pointer-events:none;animation:mst-rip 380ms ease-out forwards}
.mst-rip.is-flag{border-color:var(--accent)}
@keyframes mst-rip{from{transform:scale(.3);opacity:.7}to{transform:scale(1.3);opacity:0}}
@keyframes mst-roll-d{from{transform:translateY(-6px)}to{transform:none}}
@keyframes mst-roll-u{from{transform:translateY(6px)}to{transform:none}}
@keyframes mst-ar{from{fill:var(--ink)}to{fill:var(--soft)}}
@keyframes mst-pop{from{transform:scale(1.3)}to{transform:none}}
@keyframes mst-grow{from{transform:scaleY(0)}to{transform:none}}

@container mst (max-width:640px){
  .mst-main{grid-template-columns:minmax(0,1fr)}
  .mst-pad{border-right:0;border-bottom:1px solid var(--soft)}
  .mst-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mst-checks{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@container mst (max-width:420px){
  .mst-bar{padding:10px 12px}
  .mst-pad{gap:8px 12px;padding:12px}
  .mst-mouse{height:236px}
  .mst-rv{font-size:25px}
  .mst-side,.mst-wave{padding-left:12px;padding-right:12px}
  .mst-card{padding:10px 12px}
  .mst-checks{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mst-lg{margin-left:0}
  .mst-ct .f,.mst-cn small{display:none}
  .mst-ct .s{display:inline}
}
@media (prefers-reduced-motion:reduce){.mst-work *,.mst-work *::after{animation:none!important;transition:none!important}}