/* 마이크 테스트(/tools/mic-test/) · 스피커·헤드셋 좌우 테스트(/tools/speaker-test/) 전용.
 * tools-bottleneck.css · tools-sensitivity.css · tools-measure.css 다음에 링크된다 — 토큰(--site-*, --bn-*)과
 * .bn·.bn-doc·.bn-field·.bn-go·.sv-links·.mt-label·.mt-stats·.mt-again·.mt-steps 를 그대로 쓴다.
 * 구조: 제목 → (마이크: 장치·소리 처리) → 검사 무대(왼쪽 칸 | 읽은 값) → 설명. 마우스 테스트와 같은 무대 모양.
 * 어떤 문구를 보일지는 루트 .au 의 data-state · data-* 플래그로 고른다(tools-audio.js 가 바꾼다).
 * 모서리: 무대 20px · 칸 16px · 칩·버튼 10px(다른 측정 도구와 같은 단계). 색은 토큰만(괄호 안 hex 는 토큰이 없을 때의 폴백).
 * ⚠ prefers-reduced-motion 은 CSS 전환만 끈다. 검사 자체는 막지 않는다.
 */
.au { --au-bar: var(--bn-gpu); }

/* ── 고르기 줄(마이크: 장치 · 소리 처리) ───────────────────────── */
.au-opts { margin-top: 24px; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 14px 28px; align-items: start; }
.au-field { min-width: 0; }
.au-field::after {
    content: ""; position: absolute; right: 16px; top: 29px; width: 7px; height: 7px; margin-top: -2px;
    border-right: 2px solid var(--site-text-2, #b0b0b0); border-bottom: 2px solid var(--site-text-2, #b0b0b0);
    transform: translateY(-50%) rotate(45deg); pointer-events: none;
}
.au-opt { margin: 0; padding: 0; border: 0; min-width: 0; }
.au-opt legend { padding: 0; margin-bottom: 8px; font-size: .8125rem; font-weight: 600; color: var(--site-text-3, #949494); }
.au-seg { display: flex; flex-wrap: wrap; gap: 6px; }
.au-chip { position: relative; display: inline-flex; cursor: pointer; }
.au-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.au-chip > span {
    display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 10px 14px; border-radius: 10px;
    background: var(--site-surface-2, #2a2a2a); border: 1px solid transparent;
    font-size: .875rem; font-weight: 600; line-height: 1.35; color: var(--site-text-2, #b0b0b0);
    transition: background-color .15s, border-color .15s, color .15s;
}
.au-chip > span::before {   /* 체크 칸: 켜짐/꺼짐을 색만이 아니라 모양으로도 */
    content: ""; flex: none; width: 14px; height: 14px; border-radius: 4px; border: 1.5px solid var(--site-text-3, #949494);
}
.au-chip:hover > span { background: var(--site-surface-3, #333); color: var(--site-text, #f0f0f0); }
.au-chip input:checked + span { border-color: var(--site-accent, #7aa5f2); color: var(--site-text, #f0f0f0); }
.au-chip input:checked + span::before { border-color: var(--site-accent, #7aa5f2); background: var(--site-accent, #7aa5f2); box-shadow: inset 0 0 0 2.5px var(--site-surface-2, #2a2a2a); }
.au-chip input:focus-visible + span { outline: 2px solid var(--site-focus, #a8c6ff); outline-offset: 2px; }
.au-chip.is-na { cursor: default; }
.au-chip.is-na > span { opacity: .4; }
.au-chip.is-na:hover > span { background: var(--site-surface-2, #2a2a2a); color: var(--site-text-2, #b0b0b0); }
.au-small { margin-top: 8px !important; font-size: .8125rem; line-height: 1.6; color: var(--site-text-3, #949494); }

/* ── 검사 무대 ─────────────────────────────────────────────────── */
.au-stage { margin-top: 20px; display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 16px; align-items: stretch; }
.au-read {
    min-width: 0; padding: clamp(22px, 3vw, 30px); border-radius: 20px;
    background: var(--site-surface, #232323); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035);
    display: flex; flex-direction: column; align-items: flex-start;
}
.au-big {
    margin-top: 6px !important; display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 10px;
    font-size: clamp(2.75rem, 2rem + 3vw, 4rem); font-weight: 800; letter-spacing: -.035em; line-height: 1;
    color: var(--site-text-3, #949494); white-space: nowrap;
}
.au-big > .bn-mono { font-weight: 800; }
.au[data-on] .au-big { color: var(--bn-gpu); }
.au[data-clip] .au-big { color: var(--bn-warn); }
.au-big--word { font-family: inherit; }
.au[data-lit] .au-big--word, .au[data-state="left"] .au-big--word, .au[data-state="right"] .au-big--word,
.au[data-state="center"] .au-big--word, .au[data-state="alt"] .au-big--word, .au[data-state="ch"] .au-big--word { color: var(--bn-gpu); }
.au-clip-badge {
    display: none; align-self: center; padding: 4px 10px; border-radius: 10px; letter-spacing: 0;
    font: 700 .8125rem/1.3 var(--bn-font); color: var(--site-bg, #1a1a1a); background: var(--bn-warn);
}
.au[data-clip] .au-clip-badge { display: inline-block; }

/* 레벨 막대: 0 = 바닥(audio.METER_FLOOR_DB), 1 = 0 dBFS. RMS 는 채운 막대, 피크는 붙잡아 둔 세로선. */
.au-meter {
    position: relative; margin-top: 18px; width: 100%; height: 12px; border-radius: 6px; overflow: hidden;
    background: var(--site-bg-raise, #1e1e1e);
}
.au-meter-rms { position: absolute; inset: 0; background: var(--bn-gpu); transform-origin: left; transform: scaleX(var(--au-rms, 0)); }
.au-meter-peak { position: absolute; top: 0; bottom: 0; left: 0; width: 3px; margin-left: -3px; background: var(--site-text, #f0f0f0); transform: translateX(calc(var(--au-peak, 0) * 100cqw)); }
.au-meter { container-type: inline-size; }
.au[data-clip] .au-meter-rms { background: var(--bn-warn); }
.au:not([data-on]) .au-meter-peak { opacity: 0; }

/* 상태 문구: 기본은 숨기고 상태에 맞는 줄만. */
.au-live { width: 100%; }
.au-msg { display: none; margin-top: 14px !important; font-size: .9375rem; line-height: 1.6; color: var(--site-text-2, #b0b0b0); max-width: 36em; }
.au-msg--warn { color: var(--bn-warn); }
.au-noscript { display: block; }
.au[data-state="idle"] [data-for="idle"], .au[data-state="asking"] [data-for="asking"], .au[data-state="live"] [data-for="live"],
.au[data-state="silent"] [data-for="silent"], .au[data-state="clip"] [data-for="clip"], .au[data-state="denied"] [data-for="denied"],
.au[data-state="notfound"] [data-for="notfound"], .au[data-state="busy"] [data-for="busy"], .au[data-state="gone"] [data-for="gone"],
.au[data-state="error"] [data-for="error"], .au[data-state="unsupported"] [data-for="unsupported"], .au[data-state="paused"] [data-for="paused"],
.au[data-state="stopped"] [data-for="stopped"], .au[data-state="left"] [data-for="left"], .au[data-state="right"] [data-for="right"],
.au[data-state="center"] [data-for="center"], .au[data-state="alt"] [data-for="alt"], .au[data-state="ch"] [data-for="ch"] { display: block; }

.au-read > .mt-stats { margin-top: 20px; width: 100%; }
.au-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.au-stats dd { font-size: 1.125rem; }

/* ── 마이크: 왼쪽 칸(레벨 기록 + 시작 버튼) ─────────────────────── */
.au-pad {
    position: relative; min-height: clamp(300px, 32vw, 380px); border-radius: 20px; overflow: hidden;
    background:
        radial-gradient(circle at 50% 50%, rgba(122, 165, 242, .07), transparent 62%),
        var(--site-bg-raise, #1e1e1e);
    border: 1px dashed var(--site-line-2, rgba(255, 255, 255, .14));
}
.au-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.au-pad-cta {
    position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 20px;
    text-align: center;
}
.au[data-on] .au-pad-cta { display: none; }
.au-start { display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 22px; font-size: 1rem; white-space: nowrap; }
.au-start .bi { font-size: 1.125rem; }
.au-start[aria-disabled="true"] { opacity: .4; pointer-events: none; }
.au-pad-hint { max-width: 260px; font-size: .875rem; line-height: 1.5; color: var(--site-text-3, #949494); }

/* 녹음해서 들어 보기 */
.au-rec { margin-top: 22px; width: 100%; padding-top: 18px; border-top: 1px solid var(--site-line, rgba(255, 255, 255, .08)); }
.au-rec-row { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 8px; }
.au-rec-left { min-width: 1ch; color: var(--bn-warn); }
.au-rec-left:empty { display: none; }
.au-rec-state span { display: none; }
.au[data-rec="need"] [data-rec="need"], .au[data-rec="recording"] [data-rec="recording"],
.au[data-rec="ready"] [data-rec="ready"], .au[data-rec="none"] [data-rec="none"] { display: inline; }

/* 다시 하기 류 버튼: tools-measure.css 의 `html:not(.mt-js) .mt-again { visibility: hidden }` 은 이 페이지에 해당하지 않는다
 * (여기는 .au-js). JS 가 없을 때만 숨긴다. */
html.au-js .au .mt-again { visibility: visible; }
html:not(.au-js) .au .mt-again, html:not(.au-js) .au .au-start { visibility: hidden; }
.au .mt-again .bi { font-size: 1rem; }
.au .mt-again[aria-pressed="true"] { border-color: var(--site-accent, #7aa5f2); color: var(--site-text, #f0f0f0); }

.au-side-note { margin-top: 12px !important; display: flex; gap: 8px; font-size: .8125rem; line-height: 1.6; color: var(--site-text-3, #949494); }
.au-side-note .bi { flex: none; margin-top: 2px; }

/* ── 스피커: 왼쪽 칸(재생 버튼) ─────────────────────────────────── */
.au-pad--spk { display: flex; flex-direction: column; gap: 14px; padding: clamp(16px, 2.4vw, 24px); border-style: solid; border-color: var(--site-line, rgba(255, 255, 255, .08)); }
.au-sides { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .8fr) minmax(0, 1fr); gap: 10px; min-height: 180px; }
.au-side {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; min-width: 0; padding: 18px 8px;
    border: 1px solid var(--site-line-2, rgba(255, 255, 255, .14)); border-radius: 16px;
    background: var(--site-surface, #232323); color: var(--site-text, #f0f0f0);
    font: 700 1.0625rem/1.2 var(--bn-font); cursor: pointer;
    transition: background-color .12s, border-color .12s, color .12s;
}
.au-side .bi { font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem); color: var(--site-text-2, #b0b0b0); transition: color .12s; }
.au-side--left .bi { transform: scaleX(-1); }   /* 소리가 왼쪽으로 나가는 모양 */
.au-side:hover { background: var(--site-surface-2, #2a2a2a); }
.au-side:active { transform: translateY(1px) scale(.985); }
.au-side:focus-visible { outline: 2px solid var(--site-focus, #a8c6ff); outline-offset: 2px; }
.au-side[aria-pressed="true"] { border-color: var(--site-accent, #7aa5f2); }
.au-side:disabled { opacity: .4; cursor: default; }
/* 삑이 나는 동안만 그쪽이 켜진다(초당 2번 — 1초 3번 이하). */
.au[data-lit="left"] .au-side--left, .au[data-lit="right"] .au-side--right, .au[data-lit="center"] .au-side--center,
.au[data-lit="ch"] [data-ch][aria-pressed="true"], .au[data-lit="alt"] [data-play="alt"] {
    background: var(--bn-gpu); border-color: var(--bn-gpu); color: var(--site-bg, #1a1a1a);
}
.au[data-lit="left"] .au-side--left .bi, .au[data-lit="right"] .au-side--right .bi, .au[data-lit="center"] .au-side--center .bi { color: var(--site-bg, #1a1a1a); }
.au-sub { display: flex; flex-wrap: wrap; gap: 8px; }
.au-surround { padding-top: 14px; border-top: 1px solid var(--site-line, rgba(255, 255, 255, .08)); }
.au-surround[hidden] { display: none !important; }
.au-ch { margin-top: 10px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.au-ch .mt-again { justify-content: center; padding: 0 8px; font-size: .875rem; }

.au-vol { margin-top: 22px; width: 100%; }
.au-vol-row { margin-top: 10px; display: flex; align-items: center; gap: 12px; }
.au-vol-row .bi { color: var(--site-text-3, #949494); }
.au-vol-row output { min-width: 4ch; text-align: right; font-weight: 700; color: var(--site-text, #f0f0f0); }
/* base.css 의 전역 input 모양(테두리·패딩·배경)을 걷어 내고 가는 트랙 + 둥근 손잡이로. */
.au-range {
    -webkit-appearance: none; appearance: none; flex: 1; min-width: 0; height: 28px; margin: 0; padding: 0;
    border: 0; border-radius: 0; background: transparent; box-shadow: none; cursor: pointer;
}
.au-range:focus { border: 0; box-shadow: none; outline: none; }
.au-range:focus-visible { outline: 2px solid var(--site-focus, #a8c6ff); outline-offset: 2px; border-radius: 6px; }
.au-range::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: var(--site-surface-3, #333); }
.au-range::-moz-range-track { height: 6px; border-radius: 3px; background: var(--site-surface-3, #333); }
.au-range::-moz-range-progress { height: 6px; border-radius: 3px; background: var(--site-accent, #7aa5f2); }
.au-range::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none; width: 18px; height: 18px; margin-top: -6px; border-radius: 50%;
    background: var(--site-accent, #7aa5f2); border: 0; box-shadow: 0 0 0 4px rgba(122, 165, 242, .18);
}
.au-range::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--site-accent, #7aa5f2); border: 0; }

/* ── 반응형 ───────────────────────────────────────────────────── */
@media (max-width: 860px) {
    .au-opts, .au-stage { grid-template-columns: minmax(0, 1fr); }
    .au-pad { min-height: 240px; }
    .au-pad--spk { min-height: 0; }
}
@media (max-width: 420px) {
    .au-sides { gap: 6px; min-height: 150px; }
    .au-side { font-size: .9375rem; }
    .au-ch { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .au-stats dd { font-size: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
    .au-chip > span, .au-side, .au-side .bi { transition: none !important; }
}