/* 음성 답변 (voice.js) — style.css 의 색 변수를 그대로 쓴다. 라이트/다크 모두 대비 4.5:1 이상. */
:root {
  --rec: #b3261e;
  --rec-ink: #ffffff;
  --rec-soft: #fde7e5;
}
@media (prefers-color-scheme: dark) {
  :root {
    --rec: #ff8a80;
    --rec-ink: #2a0907;
    --rec-soft: #3a1714;
  }
}

.voice { margin: 0 0 8px; }
.voice-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.voice-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  flex: 1 1 200px; min-height: 48px; font-weight: 700;
  border: 2px solid var(--accent); color: var(--accent); background: var(--surface);
}
.voice-btn:disabled { opacity: .5; cursor: not-allowed; border-color: var(--border); color: var(--muted); }
.voice.is-rec .voice-btn { background: var(--rec); color: var(--rec-ink); border-color: var(--rec); }
.voice.is-rec .voice-btn svg { animation: voice-pulse 1.2s ease-in-out infinite; }
.voice-cancel, .voice-retry { flex: 0 0 auto; }

.voice-live { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
.voice-time { font-variant-numeric: tabular-nums; font-weight: 700; min-width: 5.5em; }
.voice-meter { flex: 1; height: 10px; background: var(--bar-bg); border-radius: 999px; overflow: hidden; }
.voice-meter > i { display: block; height: 100%; width: 0; background: var(--rec); border-radius: 999px; transition: width .12s linear; }
.voice-status { margin: 6px 0 0; min-height: 1.4em; }
.voice-status.error { color: var(--err); font-weight: 600; }
.voice.is-busy .voice-status { color: var(--text); font-weight: 600; }

/* 리포트 */
.voice-report { margin-top: 8px; }
.voice-report .card .hint { margin-top: 2px; }
.voice-metrics { border-top: 1px dashed var(--border); margin-top: 10px; padding-top: 8px; font-size: 13px; }
.voice-metrics .k { color: var(--muted); font-weight: 600; margin-bottom: 2px; }
.voice-line { color: var(--text); margin: 2px 0; overflow-wrap: anywhere; }

@keyframes voice-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) {
  .voice.is-rec .voice-btn svg { animation: none; }
  .voice-meter > i { transition: none; }
}
@media (max-width: 380px) {
  .voice-btn { flex-basis: 100%; }
}