/* 악기 튜너(online-tuner) — 조율대. 작업면 컨테이너 tunw: 머리(악기 6칸 · 전체 화면 / 조율 · 기준음 A4) → 무대(판독 | 줄 레일 또는 건반) → 최근 10초 기록 → 상태 줄.
   무대와 기록은 같은 톤으로 잇는다. 강조색은 맞음 구역·맞은 바늘·맞춤 표시에만 쓴다(지금 목표 줄은 채움색).
   640 이하: 무대 한 열(레일은 계기 아래 가로 줄) / 520 이하: 악기 3칸 × 2줄, 전체 화면은 그림 단추 / 400 이하: 조율 · A4 한 열, 시작 · 음 듣기 한 열. */
.tun{container:tunw / inline-size;--tun-tone:color-mix(in srgb, var(--wash) 70%, var(--paper));--gw:420px}
.tun [hidden]{display:none !important}

/* ---------- 머리 ---------- */
.tun-head{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:10px 12px;padding:12px 14px;border-bottom:1px solid var(--soft)}
.tun-inst{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:4px}
.tun-inst button{height:var(--v2-ctl);min-width:0;padding:0 6px;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tun-full{gap:7px;padding:0 13px;font-size:13px}
.tun-full .i{width:16px;height:16px}
.tun-opts{grid-column:1 / -1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,190px);gap:10px 12px}
.tun .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}
.tun .v2-input select:disabled{cursor:default;opacity:1}
.tun .v2-input select option{background:var(--paper);color:var(--ink)}

/* ---------- 무대: 판독 | 줄 레일 ---------- */
.tun-stage{display:grid;grid-template-columns:minmax(0,1fr) minmax(196px,34%);background:var(--tun-tone)}
.tun-main{display:flex;flex-direction:column;align-items:center;min-width:0;padding:10px 16px 14px}
.tun-main > *{width:100%;max-width:var(--gw)}
.tun-main p{margin:0}
.tun-top{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:26px}
.tun-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)}
.tun-chip span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tun-dot{flex:none;width:8px;height:8px;border-radius:50%;background:var(--muted);opacity:.45}
.tun[data-state="run"] .tun-dot{background:var(--accent);opacity:1}
.tun[data-state="wait"] .tun-dot{animation:tun-blink 1s ease-in-out infinite}
@keyframes tun-blink{50%{opacity:.1}}
.tun-lv{flex:none;width:34px;height:4px;border-radius:2px;background:var(--soft);overflow:hidden}
.tun-lv i{display:block;height:100%;background:var(--ink);transform:scaleX(0);transform-origin:left}
.tun[data-state="demo"] .tun-lv,.tun[data-state="idle"] .tun-lv{visibility:hidden}
.tun-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}
.tun-demo[aria-pressed="true"]{background:var(--fill);border-color:var(--fill);color:var(--on-fill)}

.tun-gw{margin-top:2px}
.tun-g{display:block;width:100%;height:auto;overflow:visible}
.tun-tk .mn{stroke:var(--line);stroke-width:1.2}
.tun-tk .mj{stroke:var(--muted);stroke-width:1.8}
.tun-tk .tl{font-family:var(--sans);font-size:10.5px;font-weight:600;fill:var(--muted);text-anchor:middle;font-variant-numeric:tabular-nums}
.tun-zn{fill:none;stroke:var(--accent);stroke-width:9;opacity:.38}
.tun-fs{font-family:var(--sans);font-size:19px;fill:var(--muted);text-anchor:middle}
.tun-nd line{stroke:var(--ink);stroke-width:3.2;stroke-linecap:round}
.tun[data-j=""] .tun-nd line{stroke:var(--muted);opacity:.45}
.tun[data-j="ok"] .tun-nd line{stroke:var(--accent)}
.tun-nl{font-family:var(--sans);font-size:64px;font-weight:800;fill:var(--ink);text-anchor:middle}
.tun-no{font-size:26px;font-weight:700}
.tun-ns{font-family:var(--sans);font-size:15px;font-weight:600;fill:var(--muted);text-anchor:middle}

.tun-cents{display:flex;align-items:baseline;justify-content:center;flex-wrap:wrap;gap:2px 7px;min-height:36px;margin-top:2px !important;text-align:center}
.tun-cents b{font-family:var(--sans);font-size:28px;font-weight:800;line-height:1.2;color:var(--ink);font-variant-numeric:tabular-nums lining-nums}
.tun-cents small{font-family:var(--sans);font-size:12px;font-weight:600;color:var(--muted)}
.tun-cents span{font-family:var(--sans);font-size:14px;font-weight:650;color:var(--ink)}
.tun[data-j="ok"] .tun-cents span{color:var(--accent)}
.tun[data-j=""] .tun-cents span{font-weight:600;color:var(--muted)}
.tun-hz{min-height:1.5em;font-family:var(--sans);font-size:12.5px;line-height:1.5;color:var(--muted);text-align:center;font-variant-numeric:tabular-nums}
.tun-strobe{height:18px;margin-top:9px;border-radius:4px;background:linear-gradient(90deg,color-mix(in srgb, var(--ink) 50%, transparent) 0 14px,transparent 14px 32px) 0 0 / 32px 100% repeat-x;-webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);opacity:.75}
.tun[data-j="ok"] .tun-strobe{background-image:linear-gradient(90deg,var(--accent) 0 14px,transparent 14px 32px)}
.tun[data-j=""] .tun-strobe{opacity:.3}
.tun-act{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;margin-top:12px}
.tun-go,.tun-ref{justify-content:center;min-width:0;font-size:14px}
.tun-go span,.tun-ref span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tun-go .i,.tun-ref .i{flex:none;width:17px;height:17px}
.tun[data-state="run"] .tun-go{background:var(--btn);border-color:var(--line);color:var(--ink)}

.tun-rail{display:flex;flex-direction:column;gap:8px;min-width:0;padding:12px 12px 14px;border-left:1px solid var(--soft)}
.tun-rl{margin:0;min-height:2.9em;font-family:var(--sans);font-size:12px;line-height:1.45;color:var(--muted)}
.tun-strs{flex:1 1 auto;display:grid;grid-template-columns:repeat(var(--n,6),minmax(0,1fr));grid-auto-rows:minmax(0,1fr);gap:2px;min-height:228px}
.tun-s{position:relative;display:grid;grid-template-rows:minmax(0,1fr) auto;justify-items:center;min-width:0;padding:22px 0 6px;border:1px solid transparent;border-radius:var(--radius);background:none;color:var(--muted);cursor:pointer;transition:background var(--ease),border-color var(--ease)}
.tun-s:hover{background:color-mix(in srgb, var(--ink) 5%, transparent)}
.tun-s[aria-pressed="true"]{border-color:var(--ink);background:var(--paper)}
.tun-sv{display:block;width:20px;height:100%;min-height:0;contain:size;overflow:visible}
.tun-sv path{fill:none;stroke:currentColor;stroke-width:var(--w,1.5px);opacity:.55}
.tun-s.is-on{color:var(--ink)}
.tun-s.is-on .tun-sv path{opacity:1}
.tun-sn{display:grid;justify-items:center;gap:1px;margin-top:6px}
.tun-sn b{padding:1px 5px;border-radius:4px;font-family:var(--sans);font-size:15px;font-weight:750;line-height:1.25;color:var(--ink);white-space:nowrap}
.tun-sn sub{font-size:10px;font-weight:700;vertical-align:baseline}
.tun-s.is-on .tun-sn b{background:var(--fill);color:var(--on-fill)}
.tun-sn small{font-family:var(--mono);font-size:10.5px;color:var(--muted)}
.tun-ck{position:absolute;top:4px;left:50%;width:16px;height:16px;margin-left:-8px;color:var(--accent);opacity:0;transform:scale(.5);transition:opacity .2s ease,transform .25s cubic-bezier(.3,1.5,.6,1)}
.tun-s.is-done .tun-ck{opacity:1;transform:none}

.tun-keys{flex:1 1 auto;display:flex;flex-direction:column;justify-content:center;gap:10px;min-height:228px}
.tun-kb{position:relative;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:2px;height:124px}
.tun-k{display:block}
.tun-k--w{display:flex;align-items:flex-end;justify-content:center;padding-bottom:6px;border:1px solid var(--line);border-radius:0 0 5px 5px;background:var(--paper);font-family:var(--sans);font-size:11px;font-weight:650;font-style:normal;color:var(--muted)}
.tun-k--b{position:absolute;top:0;left:calc(var(--x) * 100% / 7 - 6.5%);width:13%;height:60%;border-radius:0 0 4px 4px;background:var(--ink)}
.tun-k--w.is-on{background:var(--fill);border-color:var(--fill);color:var(--on-fill)}
.tun-k--b.is-on{background:var(--accent)}
.tun-ko{margin:0;font-family:var(--sans);font-size:12.5px;font-weight:600;color:var(--ink);text-align:center;min-height:1.5em}

/* ---------- 기록 · 상태 ---------- */
.tun-trace{position:relative;height:64px;border-top:1px solid var(--soft);background:var(--tun-tone)}
.tun-trace canvas{display:block;width:100%;height:100%}
.tun-tl{position:absolute;left:10px;bottom:3px;font-family:var(--sans);font-size:10.5px;font-weight:600;color:var(--muted);pointer-events:none}
.tun-ty{position:absolute;top:0;right:6px;bottom:0;display:flex;flex-direction:column;justify-content:space-between;padding:2px 0;font-family:var(--mono);font-size:9.5px;color:var(--muted);pointer-events:none}
.tun-ty i{font-style:normal;line-height:1.2}
.tun-msg{margin:0;padding:10px 14px 12px;border-top:1px solid var(--soft);min-height:calc(1.5em * 2 + 22px);line-height:1.5}

/* ---------- 전체 화면(작업면 전체) ---------- */
.tun:fullscreen{display:flex;flex-direction:column;overflow:auto;border:0;border-radius:0;background:var(--card)}
.tun.is-full{position:fixed;inset:0;z-index:1000;height:100dvh;display:flex;flex-direction:column;overflow:auto;border:0;border-radius:0;background:var(--card)}
.tun.is-fs .tun-stage{flex:1 1 auto}
.tun.is-fs .tun-strs,.tun.is-fs .tun-keys{min-height:0}
.tun.is-fs .tun-cents b{font-size:40px}
.tun.is-fs .tun-cents span{font-size:17px}
.tun.is-fs .tun-hz{font-size:14px}
.tun.is-fs .tun-trace{height:96px}
html.tun-noscroll{overflow:hidden}

/* ---------- 좁은 작업면 ---------- */
@container tunw (max-width: 640px){
  .tun-stage{grid-template-columns:minmax(0,1fr)}
  .tun-rail{padding:8px 10px 12px;border-left:0;border-top:1px solid var(--soft)}
  .tun-rl{min-height:0}
  .tun-strs{min-height:0;height:136px}
  .tun-keys{min-height:0}
  .tun-kb{height:92px}
}
@container tunw (max-width: 520px){
  .tun-head{padding:10px}
  .tun-inst{grid-template-columns:repeat(3,minmax(0,1fr))}
  .tun-full{width:var(--v2-ctl);padding:0;justify-content:center}
  .tun-full span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .tun-main{padding:8px 10px 12px}
}
@container tunw (max-width: 520px){
  .tun.is-fs .tun-inst button{height:36px}
  .tun.is-fs .tun-opts .v2-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .tun.is-fs .tun-strs{height:110px}
  .tun.is-fs .tun-act{grid-template-columns:minmax(0,1fr) auto}
  .tun.is-fs .tun-trace{height:64px}
}
@container tunw (max-width: 400px){
  .tun-opts{grid-template-columns:minmax(0,1fr) minmax(0,118px);gap:10px 8px}
  .tun-act{grid-template-columns:minmax(0,1fr)}
  .tun-cents b{font-size:26px}
}
@media (prefers-reduced-motion: reduce){
  .tun-ck,.tun-s{transition:none}
  .tun[data-state="wait"] .tun-dot{animation:none}
}