/* 마이크 테스트(microphone-test) — 소리 점검 콘솔. 작업면 컨테이너 mctw: 680 이상 [판독 4칸 | 마이크 시작], 679 이하 시작 단추 한 줄 위 + 판독 4칸,
   560 이하 판독 2 × 2, 679 이하 녹음 줄 두 줄, 480 미만 스코프 낮춤. 스코프는 테마와 상관없이 어두운 모니터(주파수 색이 테마에 따라 바뀌지 않게).
   강조색은 잘림·녹음·경고 문장에만 쓴다. */
.mct{container:mctw / inline-size;--mct-mon:#16110b;--mct-ink:#f4efe6}
.mct [hidden]{display:none !important}
.mct-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- 스코프: 파형 · 주파수 지도 | 세로 계기 ---------- */
.mct-scope{display:grid;grid-template-columns:minmax(0,1fr) 58px;background:var(--mct-mon);color:var(--mct-ink);border-radius:var(--radius) var(--radius) 0 0;overflow:hidden}
.mct-plots{position:relative;display:grid;grid-template-rows:64px 178px 20px;min-width:0}
.mct-wv,.mct-sp{position:relative;min-width:0}
.mct-wv{border-bottom:1px solid rgba(244,239,230,.12)}
.mct-plots canvas{display:block;width:100%;height:100%}
.mct-pl{position:absolute;right:8px;z-index:1;padding:1px 6px;border-radius:9px;background:rgba(22,17,11,.62);font-family:var(--sans);font-size:10.5px;font-weight:650;letter-spacing:.02em;color:rgba(244,239,230,.72);pointer-events:none}
.mct-wv .mct-pl{bottom:4px}
.mct-sp .mct-pl{top:5px}
.mct-fax{position:absolute;inset:0;pointer-events:none}
.mct-fax span{position:absolute;left:5px;transform:translateY(-50%);padding:0 3px;border-radius:3px;background:rgba(22,17,11,.55);font-family:var(--mono);font-size:10px;line-height:14px;color:rgba(244,239,230,.74)}
.mct-fax span::after{content:"";position:absolute;left:100%;top:50%;width:6px;border-top:1px solid rgba(244,239,230,.32)}
.mct-tax{display:flex;justify-content:space-between;align-items:center;margin:0;padding:0 8px;font-family:var(--mono);font-size:10.5px;color:rgba(244,239,230,.6);border-top:1px solid rgba(244,239,230,.12)}

.mct-chip{position:absolute;left:8px;top:8px;z-index:2;display:flex;align-items:center;gap:7px;max-width:calc(100% - 140px);margin:0;padding:4px 10px;border-radius:13px;background:rgba(10,8,5,.66);font-family:var(--sans);font-size:12px;font-weight:650;line-height:1.3;color:var(--mct-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mct-chip span:last-child{overflow:hidden;text-overflow:ellipsis}
.mct:not([data-db="1"]) .mct-chip{max-width:calc(100% - 16px)} /* 예시 단추가 없으면 마이크 이름을 넓게 */
.mct-dot{flex:none;width:8px;height:8px;border-radius:50%;background:#9a9186}
.mct[data-state="run"] .mct-dot{background:#7fd08a}
.mct[data-rec="1"] .mct-dot{background:#ff4b3a;animation:mct-blink 1.2s ease-in-out infinite}
.mct[data-state="wait"] .mct-dot{background:#f2c14e}
.mct[data-demo="play"] .mct-dot{background:#f2c14e;animation:mct-blink 1.6s ease-in-out infinite}
@keyframes mct-blink{50%{opacity:.3}}
.mct-demo{position:absolute;right:8px;top:8px;z-index:2;height:26px;padding:0 10px;border:1px solid rgba(244,239,230,.3);border-radius:13px;background:rgba(10,8,5,.66);font-family:var(--sans);font-size:12px;font-weight:650;color:var(--mct-ink);cursor:pointer}
.mct-demo:hover{background:rgba(10,8,5,.86)}
.mct-demo[aria-pressed="true"]{background:var(--mct-ink);border-color:var(--mct-ink);color:#16110b}
.mct-demo:focus-visible,.mct-rec:focus-visible{outline:2px solid #ffb27a;outline-offset:2px}

/* 세로 레벨 계기: 색 막대(−60~0 dBFS) 위를 가림막이 덮고, 피크 유지선·말소리(◀ 밝음)·바탕 잡음(◀ 흐림) 표식 */
.mct-meter{display:flex;flex-direction:column;align-items:stretch;gap:5px;padding:8px 6px 6px 7px;border-left:1px solid rgba(244,239,230,.12)}
.mct-clip{display:block;padding:2px 0;border-radius:4px;background:rgba(244,239,230,.08);font-family:var(--sans);font-size:10px;font-weight:750;letter-spacing:.04em;text-align:center;color:rgba(244,239,230,.45);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mct-clip.is-on{background:#ff4b2b;color:#fff}
.mct-mb{position:relative;flex:1 1 auto;margin:4px 0}
.mct-mb::before{content:"";position:absolute;left:3px;top:0;bottom:0;width:11px;border-radius:2px;background:linear-gradient(to top,#a8916a 0%,#efe3cc 55%,#f3b453 78%,#ff8a3a 90%,#ff4b2b 100%)}
.mct-mc{position:absolute;left:3px;top:0;width:11px;height:100%;background:#2b2219;transform-origin:top;transform:scaleY(1)}
.mct-mp{position:absolute;left:1px;width:15px;height:2px;margin-bottom:-1px;background:#fff}
.mct-mk{position:absolute;left:15px;width:7px;height:9px;margin-bottom:-4.5px;clip-path:polygon(0 50%,100% 0,100% 100%)}
.mct-mk--v{background:#fff3d6}
.mct-mk--n{background:#8f8270}
.mct-mt{position:absolute;right:0;top:calc(var(--y) * 100%);transform:translateY(-50%);font-family:var(--mono);font-size:9.5px;line-height:1;color:rgba(244,239,230,.58)}
.mct-mu{font-family:var(--mono);font-size:9.5px;text-align:center;color:rgba(244,239,230,.5)}

/* ---------- 시작 단추 + 판독 4칸 ---------- */
.mct-bar{display:grid;grid-template-columns:minmax(0,1fr) 164px;grid-template-areas:"tiles go";gap:8px;padding:12px 18px 10px}
.mct-go{grid-area:go;justify-content:center;height:auto;min-height:var(--v2-ctl,42px);font-size:13.5px}
.mct-go .i{width:17px;height:17px}
.mct-go.is-on{background:var(--paper);color:var(--ink);border-color:var(--line)}
.mct-go.is-on:hover{background:var(--btn)}
.mct-tiles{grid-area:tiles;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin:0}
.mct-t{min-width:0;padding:7px 10px 8px;background:var(--wash);border-radius:var(--radius)}
.mct-t dt{font-family:var(--sans);font-size:11.5px;font-weight:600;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mct-t dd{margin:2px 0 0;font-family:var(--sans);font-size:20px;font-weight:800;line-height:1.15;letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums lining-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mct-t dd em{font-style:normal;font-size:11.5px;font-weight:650;letter-spacing:0;color:var(--muted)}
.mct-t small{display:block;margin-top:2px;font-family:var(--sans);font-size:11.5px;line-height:1.4;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mct-t[data-b="tv_vlow"] small,.mct-t[data-b="tv_hot"] small,.mct-t[data-b="tn_loud"] small,.mct-t[data-b="tn_zero"] small,.mct-t[data-b="ts_noisy"] small,.mct-t[data-b="tp_clip"] small{color:var(--accent);font-weight:650}
.mct[data-state="demo"] .mct-t dd{color:var(--muted)}
.mct-msg{margin:0;padding:0 18px 12px;min-height:1.6em;line-height:1.6}

/* ---------- 녹음 데크 ---------- */
.mct-deck{padding:12px 18px;border-top:1px solid var(--soft)}
.mct-dh{display:grid;grid-template-columns:48px minmax(0,1fr) auto;align-items:center;gap:12px}
.mct-rec{position:relative;width:48px;height:48px;padding:0;border:0;border-radius:50%;background:transparent;cursor:pointer}
.mct-rec svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg);fill:none;stroke-width:3}
.mct-rec .r-bg{stroke:var(--soft)}
.mct-rec .r-pg{stroke:var(--accent);stroke-dasharray:calc(var(--p) * 100) 100;stroke-linecap:round}
.mct-rec i{position:absolute;left:50%;top:50%;width:20px;height:20px;margin:-10px 0 0 -10px;border-radius:50%;background:var(--accent);transition:border-radius var(--ease),transform var(--ease)}
.mct-rec:hover i{transform:scale(1.08)}
.mct-rec[aria-pressed="true"] i{border-radius:4px;transform:scale(.8)}
.mct-rec:disabled{opacity:.4;cursor:not-allowed}
.mct-dt{margin:0;min-width:0;font-family:var(--sans)}
.mct-dt b{display:block;font-size:14px;font-weight:750;color:var(--ink)}
.mct-dt small{display:block;margin-top:1px;font-size:12px;line-height:1.5;color:var(--muted)}
.mct[data-rec="1"] .mct-dt small{color:var(--accent);font-variant-numeric:tabular-nums}
.mct-dn{font-family:var(--mono);font-size:12px;color:var(--muted)}

.mct-takes{margin:10px 0 0;padding:0;list-style:none}
.mct-tk{display:grid;grid-template-columns:34px minmax(96px,1fr) minmax(110px,1.6fr) minmax(104px,auto) 32px 32px;grid-template-areas:"p n w s b x";align-items:center;gap:10px;padding:8px 0;border-top:1px solid var(--soft)}
.mct-tp{grid-area:p;display:grid;place-items:center;width:34px;height:34px;padding:0;border:0;border-radius:50%;background:var(--fill);color:var(--on-fill);cursor:pointer}
.mct-tp svg{width:15px;height:15px;fill:currentColor}
.mct-tp:hover{background:var(--fill-hover)}
.mct-tn{grid-area:n;min-width:0;font-family:var(--sans)}
.mct-tn b{display:block;font-size:13px;font-weight:750;color:var(--ink)}
.mct-tn b em{font-style:normal;font-weight:600;font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.mct-tn small{display:block;font-size:11.5px;line-height:1.4;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mct-tw{grid-area:w;position:relative;height:40px;min-width:0;border-radius:var(--radius);background:var(--wash);overflow:hidden}
.mct-tw svg{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:var(--muted);stroke-width:1.6;stroke-linecap:round}
.mct-tw svg path{vector-effect:non-scaling-stroke}
.mct-tw svg .c{stroke:var(--accent)}
.mct-th{position:absolute;inset:0;background:var(--accent);opacity:.18;transform-origin:left;transform:scaleX(0)}
.mct-tk.is-play .mct-tw{box-shadow:inset 0 0 0 1px var(--accent)}
.mct-ts{grid-area:s;min-width:0;font-family:var(--sans);text-align:right}
.mct-ts b{display:block;font-size:15px;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.mct-ts b em{font-style:normal;font-size:11px;font-weight:650;color:var(--muted)}
.mct-ts small{display:block;font-size:11.5px;line-height:1.4;color:var(--muted);font-variant-numeric:tabular-nums}
.mct-ts .w{color:var(--accent);font-weight:650}
.mct-tb{display:grid;place-items:center;width:32px;height:32px;padding:0;border:1px solid var(--line);border-radius:var(--radius);background:var(--btn);color:var(--ink);cursor:pointer}
.mct-tb:hover{background:var(--btn-hover)}
.mct-tb svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
a.mct-tb{grid-area:b}
.mct-tx{grid-area:x}

/* ---------- 설정 줄 ---------- */
.mct-set{display:grid;grid-template-columns:minmax(180px,1fr) auto;align-items:end;gap:8px 16px;padding:12px 18px 14px;border-top:1px solid var(--soft)}
.mct-set .v2-label{display:block;margin:0 0 5px}
.mct-set select{width:100%;height:var(--v2-ctl,42px);padding:0 30px 0 10px;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);font-family:var(--sans);font-size:14px;font-weight:600;color:var(--ink);text-overflow:ellipsis}
.mct-procf .v2-label{contain:inline-size} /* 긴 로케일 라벨이 칸 너비를 정하지 않게: 너비는 단추 줄이 정하고 라벨은 그 안에서 줄바꿈 */
.mct-set .v2-seg{flex-wrap:nowrap}
.mct-set .v2-seg button{flex:none;height:var(--v2-ctl,42px);padding:0 13px;white-space:nowrap}
.mct-dev{grid-column:1/-1;margin:0;font-family:var(--sans);font-size:12px;line-height:1.55;color:var(--muted);overflow-wrap:anywhere}

/* ---------- 좁은 작업면 ---------- */
@container mctw (max-width:679px){
  .mct-bar{grid-template-columns:minmax(0,1fr);grid-template-areas:"go" "tiles"}
  .mct-tk{grid-template-columns:34px minmax(0,1fr) auto 32px 32px;grid-template-areas:"p n n b x" "p w s s s";row-gap:6px}
  .mct-ts{max-width:min(46cqi,230px)}
}
@container mctw (max-width:560px){
  .mct-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mct-set{grid-template-columns:minmax(0,1fr)}
  .mct-set .v2-seg{display:flex}
  .mct-set .v2-seg button{flex:1 1 0;padding:0 6px}
  .mct-bar,.mct-deck,.mct-set{padding-left:14px;padding-right:14px}
  .mct-msg{padding-left:14px;padding-right:14px}
}
@container mctw (max-width:479px){
  .mct-plots{grid-template-rows:52px 150px 20px}
  .mct-scope{grid-template-columns:minmax(0,1fr) 52px}
  .mct-t dd{font-size:18px}
  .mct-dn{display:none}
  .mct[data-db="1"] .mct-chip{max-width:calc(100% - 118px)}
}
@media (prefers-reduced-motion:reduce){
  .mct-rec i,.mct-dot{transition:none;animation:none !important}
}