/* 말하기 몰아서 — 색은 테마 변수(themes/a.css·b.css)만 사용 */
.spk { font-family: var(--font); color: var(--ink); display: flex; flex-direction: column; gap: 12px; }
.spk * { box-sizing: border-box; }
.spk button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
.spk h2 { font-size: 22px; font-weight: 800; }
.spk small { display: block; font-size: 13px; color: var(--sub); }
.spk-top p { margin-top: 4px; color: var(--sub); font-size: 14px; line-height: 1.45; }

.spk-list { display: flex; flex-direction: column; gap: 10px; }
.spk-les { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px; border: 2px solid var(--line); border-radius: 16px; background: var(--card); box-shadow: 0 var(--press) 0 var(--line); text-align: left; }
.spk-les:active { transform: translateY(calc(var(--press) * .8)); box-shadow: 0 calc(var(--press) * .2) 0 var(--line); }
.spk-ico { font-size: 26px; flex: none; }
.spk-t { flex: 1; min-width: 0; }
.spk-t b { display: block; font-size: 16px; line-height: 1.3; }
.spk-les em { flex: none; font-style: normal; font-weight: 800; color: var(--mute); }
.spk-les em.all { color: var(--gd); }
.spk-empty { color: var(--sub); text-align: center; padding: 24px 0; }

.spk-bar { display: flex; align-items: center; gap: 12px; }
.spk-x { font-size: 20px; color: var(--mute); padding: 4px; }
.spk-bar i { flex: 1; height: 14px; border-radius: 7px; background: var(--line); overflow: hidden; }
.spk-bar b { display: block; height: 100%; background: var(--g); border-radius: 7px; transition: width .3s; box-shadow: 0 0 var(--glow) var(--g); }
.spk-q { font-size: 18px; font-weight: 800; }

.spk-cue, .spk-me { display: flex; align-items: flex-start; gap: 10px; padding: 14px; border: 2px solid var(--line); border-radius: 16px; background: var(--card); }
.spk-me.reply { margin-left: 28px; border-color: var(--sel); background: var(--selbg); }
.spk-cue { margin-right: 28px; }
.spk-cue span, .spk-me span { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; overflow-wrap: anywhere; }
.spk-cue b, .spk-me b { font-size: 20px; line-height: 1.35; }
.spk-snd { flex: none; width: 44px; height: 44px; border-radius: 12px; font-size: 20px; background: var(--b) !important; box-shadow: 0 calc(var(--press) * .8) 0 var(--bd), 0 0 var(--glow) var(--b); }

.spk-act { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.spk-row { display: flex; gap: 10px; }
.spk-row > * { flex: 1; min-width: 0; }
.spk-btn { display: block; width: 100%; text-align: center; font-weight: 800 !important; font-size: 17px; padding: 14px 10px; border-radius: 16px; color: var(--bg) !important; background: var(--g) !important; box-shadow: 0 var(--press) 0 var(--gd), 0 0 var(--glow) var(--g); }
.spk-btn:active { transform: translateY(calc(var(--press) * .8)); box-shadow: 0 calc(var(--press) * .2) 0 var(--gd); }
.spk-btn.bad { background: var(--r) !important; box-shadow: 0 var(--press) 0 var(--rd), 0 0 var(--glow) var(--r); }
.spk-btn.ghost { color: var(--b) !important; background: var(--card) !important; border: 2px solid var(--line) !important; box-shadow: 0 var(--press) 0 var(--line); }
.spk-mic.on { background: var(--r) !important; box-shadow: 0 var(--press) 0 var(--rd), 0 0 calc(var(--glow) + 8px) var(--r); animation: spk-pulse 1s ease-in-out infinite; }
@keyframes spk-pulse { 50% { opacity: .7; } }
.spk-skip { color: var(--mute) !important; font-weight: 700; font-size: 14px; padding: 6px; text-align: center; }
.spk-msg { min-height: 1.2em; font-size: 14px; color: var(--sub); text-align: center; }
.spk-msg:empty { display: none; }

.spk-band { padding: 16px; border-radius: 16px; display: flex; flex-direction: column; gap: 8px; }
.spk-band[hidden] { display: none; }
.spk-band.ok { background: var(--okbg); color: var(--gd); }
.spk-band.ng { background: var(--ngbg); color: var(--rd); }
.spk-band > b { font-size: 20px; }
.spk-band p { font-size: 15px; overflow-wrap: anywhere; }

.spk-done { display: flex; flex-direction: column; gap: 12px; text-align: center; padding-top: 24px; }
.spk-done > p { color: var(--sub); }
.spk-big { font-size: 64px; }
.spk-cards { display: flex; gap: 10px; margin: 8px 0; }
.spk-cards div { flex: 1; padding: 12px; border: 2px solid var(--y); border-radius: 16px; background: var(--card); }
.spk-cards b { font-size: 26px; color: var(--yd); }