/* 음역대 테스트(vocal-range-test) — 음역 지도. 작업면 컨테이너 vrtw: 위(판독 | 결과) → 지도(성부 막대 · 노래 막대 · 건반 · 내 음역 띠 · 지금 음 표시선) → 노래방 키 → 상태 줄.
   강조색은 내 음역 띠와 지금 찾는 단계 표시에만 쓴다(가까운 성부 막대는 채움색). 지도 위치는 --a·--b(막대 양 끝)·--x(표시선) 비율.
   640 이하: 위 한 열(판독 → 결과), 키 칸 두 칸 + 결과 한 줄 / 400 이하: 키 칸 한 열, 큰 음이름 줄임. */
.vrt{container:vrtw / inline-size;--vrt-tone:color-mix(in srgb, var(--wash) 70%, var(--paper));--vrt-kw:var(--paper);--vrt-kbk:color-mix(in srgb, var(--ink) 82%, var(--paper));--vrt-kl:var(--line)}
:root[data-theme="dark"] .vrt{--vrt-kw:color-mix(in srgb, var(--ink) 72%, var(--paper));--vrt-kbk:color-mix(in srgb, var(--paper) 80%, #000);--vrt-kl:color-mix(in srgb, var(--paper) 55%, var(--ink))}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .vrt{--vrt-kw:color-mix(in srgb, var(--ink) 72%, var(--paper));--vrt-kbk:color-mix(in srgb, var(--paper) 80%, #000);--vrt-kl:color-mix(in srgb, var(--paper) 55%, var(--ink))} }
.vrt [hidden]{display:none !important}
.vrt p{margin:0}

/* ---------- 위: 판독 | 결과 ---------- */
.vrt-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.12fr)}
.vrt-live{display:flex;flex-direction:column;gap:8px;min-width:0;padding:12px 16px 14px;background:var(--vrt-tone)}
.vrt-bar1{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:26px}
.vrt-chip{display:inline-flex;align-items:center;gap:7px;min-width:0;font-family:var(--sans);font-size:12px;font-weight:600;color:var(--muted)}
.vrt-chip span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vrt-dot{flex:none;width:8px;height:8px;border-radius:50%;background:var(--muted);opacity:.45}
.vrt[data-state="run"] .vrt-dot{background:var(--accent);opacity:1}
.vrt[data-state="wait"] .vrt-dot{animation:vrt-blink 1s ease-in-out infinite}
@keyframes vrt-blink{50%{opacity:.1}}
.vrt-lv{flex:none;width:34px;height:4px;border-radius:2px;background:var(--soft);overflow:hidden}
.vrt-lv i{display:block;height:100%;background:var(--ink);transform:scaleX(0);transform-origin:left}
.vrt:not([data-state="run"]) .vrt-lv{visibility:hidden}
.vrt-demo{flex:none;height:26px;padding:0 10px;border:1px solid var(--line);border-radius:999px;background:var(--paper);font-family:var(--sans);font-size:11.5px;font-weight:650;color:var(--ink);cursor:pointer}
.vrt-demo[aria-pressed="true"]{background:var(--fill);border-color:var(--fill);color:var(--on-fill)}

.vrt-note{display:flex;align-items:baseline;justify-content:center;gap:2px;min-height:68px;font-family:var(--sans);color:var(--ink);line-height:1}
.vrt-note b{font-size:64px;font-weight:800;letter-spacing:-.02em}
.vrt-note sub{font-size:26px;font-weight:700;vertical-align:baseline}
.vrt[data-state="idle"] .vrt-note,.vrt[data-state="wait"] .vrt-note{color:var(--muted)}
.vrt-nt{min-height:1.5em;font-family:var(--sans);font-size:13px;font-weight:600;line-height:1.5;color:var(--muted);text-align:center;font-variant-numeric:tabular-nums}
.vrt-hold{height:6px;margin:2px auto 4px;width:min(100%,240px);border-radius:3px;background:var(--soft);overflow:hidden}
.vrt-hold i{display:block;height:100%;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform 80ms linear}
.vrt-step{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.vrt-step button{height:34px;min-width:0;padding:0 8px;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vrt-guide{min-height:4.5em;font-family:var(--sans);font-size:13px;line-height:1.5;color:var(--ink)}
.vrt-go{justify-content:center;gap:8px;width:100%;font-size:14px}
.vrt-go .i{width:17px;height:17px}

.vrt-sum{display:grid;grid-template-columns:max-content minmax(0,1fr) auto;align-content:start;min-width:0;padding:4px 16px 6px;border-left:1px solid var(--soft)}
.vrt-r{grid-column:1 / -1;display:grid;grid-template-columns:subgrid;grid-template-rows:auto auto;column-gap:12px;align-items:center;padding:10px 0 10px 9px;border-bottom:1px solid var(--soft);box-shadow:inset 3px 0 transparent;transition:box-shadow var(--ease)}
.vrt-r:last-child{border-bottom:0}
.vrt-rk{grid-row:1 / span 2;font-family:var(--sans);font-size:12px;font-weight:650;color:var(--muted)}
.vrt-rv{grid-column:2;font-family:var(--sans);font-size:26px;font-weight:800;line-height:1.15;color:var(--ink);font-variant-numeric:tabular-nums lining-nums}
.vrt-rs{grid-column:2 / -1;font-family:var(--sans);font-size:12px;line-height:1.45;color:var(--muted);font-variant-numeric:tabular-nums}
.vrt-rb{grid-column:3;grid-row:1 / span 2;display:flex;gap:5px}
.vrt-ib{display:grid;place-items:center;width:34px;height:34px;padding:0;border:1px solid var(--line);border-radius:var(--radius);background:var(--btn);color:var(--ink);cursor:pointer}
.vrt-ib:hover{background:var(--btn-hover)}
.vrt-ib:disabled{opacity:.35;cursor:not-allowed}
.vrt-ib .i{width:16px;height:16px}
.vrt:not([data-state="demo"])[data-step="lo"] .vrt-r--lo,.vrt:not([data-state="demo"])[data-step="hi"] .vrt-r--hi{box-shadow:inset 3px 0 var(--accent)}
.vrt-r.is-pop .vrt-rv{animation:vrt-pop .5s cubic-bezier(.2,.8,.3,1)}
@keyframes vrt-pop{0%{transform:scale(1.22);color:var(--accent)}100%{transform:none}}
.vrt-rv{transform-origin:left center}
.vrt-tys{grid-column:2 / -1;display:flex;flex-wrap:wrap;gap:2px 16px}
.vrt-ty{display:inline-flex;align-items:baseline;gap:6px;min-width:0;font-family:var(--sans)}
.vrt-ty small{font-size:11.5px;font-weight:600;color:var(--muted)}
.vrt-ty b{font-size:18px;font-weight:800;line-height:1.3;color:var(--ink)}
.vrt[data-ty="none"] .vrt-ty b,.vrt[data-ty="short"] .vrt-ty b{color:var(--muted)}

/* ---------- 지도 ---------- */
.vrt-map{padding:14px 16px 8px;border-top:1px solid var(--soft)}
.vrt-plot{position:relative}
.vrt-rows{display:grid;gap:3px}
.vrt-row{position:relative;height:22px}
.vrt-bar{position:absolute;top:0;bottom:0;left:calc(var(--a) * 100%);width:calc((var(--b) - var(--a)) * 100%);display:flex;align-items:center;min-width:0;border-radius:4px;background:color-mix(in srgb, var(--ink) 9%, var(--paper));font-style:normal;overflow:hidden;transition:left .45s cubic-bezier(.2,.8,.3,1),width .45s cubic-bezier(.2,.8,.3,1)}
.vrt-bar span{padding:0 7px;font-family:var(--sans);font-size:11.5px;font-weight:650;line-height:1;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
.vrt-row.is-near .vrt-bar{background:var(--fill)}
.vrt-row.is-near .vrt-bar span{color:var(--on-fill)}
.vrt-row--song .vrt-bar{background:none;border:1.5px dashed var(--ink)}
.vrt-row--song .vrt-bar span{color:var(--ink)}
.vrt-row--song .vrt-bar.is-none{border-color:var(--line)}
.vrt-row--song .vrt-bar.is-none span{color:var(--muted);font-weight:600}
.vrt-row--song.is-none{height:auto;min-height:22px}
.vrt-row--song.is-none .vrt-bar{position:relative;left:0;width:100%;min-height:22px}
.vrt-row--song.is-none .vrt-bar span{padding:4px 7px;line-height:1.35;white-space:normal}
.vrt-kb{height:34px;margin-top:6px;border-radius:3px;outline:1px solid var(--line);outline-offset:-1px;overflow:hidden}
.vrt-kb svg{display:block;width:100%;height:100%}
.vrt-kb .w{fill:var(--vrt-kw)}
.vrt-kb .ln line{stroke:var(--vrt-kl);stroke-width:1;vector-effect:non-scaling-stroke}
.vrt-kb .bk rect{fill:var(--vrt-kbk)}
.vrt-band{position:absolute;top:-5px;bottom:-3px;left:calc(var(--a) * 100%);width:calc((var(--b) - var(--a)) * 100%);border-left:2px solid var(--accent);border-right:2px solid var(--accent);border-radius:3px;background:color-mix(in srgb, var(--accent) 13%, transparent);pointer-events:none;transition:left .45s cubic-bezier(.2,.8,.3,1),width .45s cubic-bezier(.2,.8,.3,1)}
.vrt-cur{position:absolute;top:-7px;bottom:-3px;left:calc(var(--x) * 100%);width:2px;margin-left:-1px;background:var(--ink);pointer-events:none;transition:left 90ms linear}
.vrt-cur::after{content:"";position:absolute;bottom:4px;left:50%;width:10px;height:10px;margin-left:-5px;border-radius:50%;background:var(--ink);box-shadow:0 0 0 2px var(--paper)}
.vrt-cur.is-out{opacity:.45}
.vrt[data-state="idle"] .vrt-cur,.vrt[data-state="wait"] .vrt-cur{opacity:.4}
.vrt-ax{position:relative;height:16px;margin-top:4px}
.vrt-ax i{position:absolute;top:0;left:calc(var(--x) * 100%);transform:translateX(-50%);font-family:var(--sans);font-size:10.5px;font-weight:600;font-style:normal;color:var(--muted);white-space:nowrap}

/* ---------- 노래방 키 ---------- */
.vrt-key{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.35fr);gap:8px 12px;align-items:end;padding:12px 16px 14px;border-top:1px solid var(--soft);background:var(--vrt-tone)}
.vrt-kh{grid-column:1 / -1;font-family:var(--sans);font-size:13px;font-weight:700;color:var(--ink)}
.vrt .v2-input select{flex:1 1 auto;width:100%;min-width:0;height:calc(var(--v2-ctl) - 2px);padding:0 6px 0 9px;border:0;background:none;outline:0;font-family:var(--sans);font-size:14.5px;font-weight:600;color:var(--ink);cursor:pointer;font-variant-numeric:tabular-nums}
.vrt .v2-input select option{background:var(--paper);color:var(--ink)}
.vrt-ko{display:flex;flex-direction:column;justify-content:center;gap:3px;align-self:stretch;min-width:0;font-family:var(--sans)}
.vrt-ko b{font-size:22px;font-weight:800;line-height:1.15;color:var(--ink);font-variant-numeric:tabular-nums}
.vrt-ko span{font-size:12.5px;line-height:1.5;color:var(--ink)}
.vrt[data-key="none"] .vrt-ko b,.vrt[data-key="none"] .vrt-ko span{color:var(--muted)}
.vrt-msg{padding:9px 16px 11px;border-top:1px solid var(--soft)}

@container vrtw (max-width: 640px){
  .vrt-top{grid-template-columns:minmax(0,1fr)}
  .vrt-sum{border-left:0;border-top:1px solid var(--soft)}
  .vrt-guide{min-height:0}
  .vrt-key{grid-template-columns:repeat(2,minmax(0,1fr))}
  .vrt-ko{grid-column:1 / -1}
}
@container vrtw (max-width: 400px){
  .vrt-live,.vrt-sum,.vrt-map,.vrt-key{padding-left:12px;padding-right:12px}
  .vrt-note b{font-size:56px}
  .vrt-step button{font-size:12.5px;padding:0 5px}
  .vrt .v2-input select{font-size:13.5px;padding:0 4px 0 7px}
  .vrt-bar span{padding:0 5px;font-size:10.5px}
  .vrt-rv{font-size:23px}
}
@container vrtw (max-width: 340px){
  .vrt-key{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion: reduce){
  .vrt-bar,.vrt-band,.vrt-cur,.vrt-hold i,.vrt-r{transition:none}
  .vrt-r.is-pop .vrt-rv{animation:none}
  .vrt[data-state="wait"] .vrt-dot{animation:none}
}