/* ============================================================================
   listening.css — 리스닝 화자 스테이지 · 문항 목록
   ============================================================================ */

.lst-stage{
  padding:var(--ap-s6) var(--ap-s5);
  background:var(--ap-fill);border-bottom:1px solid var(--ap-separator-soft);
}
.lst-stage.dlg{display:grid;grid-template-columns:1fr auto 1fr;gap:var(--ap-s4);align-items:center}
.lst-stage.mono{display:flex;justify-content:center}

.lst-stage-spk{
  display:flex;flex-direction:column;align-items:center;gap:var(--ap-s2);
  padding:14px 12px;border-radius:var(--ap-r-lg);
  border:1px solid transparent;
  transition:background var(--ap-dur-2) var(--ap-ease-out),border-color var(--ap-dur-2) var(--ap-ease-out);
}
.lst-stage-spk.left{align-items:flex-start}
.lst-stage-spk.right{align-items:flex-end}
.lst-stage-spk.active{background:var(--ap-surface);border-color:var(--ap-separator-soft);box-shadow:var(--ap-shadow-xs)}

.lst-stage-av{
  width:72px;height:72px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:38px;line-height:1;
  background:var(--ap-surface);border:1px solid var(--ap-separator-soft);
  box-shadow:var(--ap-shadow-xs);
  transition:box-shadow var(--ap-dur-2) var(--ap-ease-out),transform var(--ap-dur-2) var(--ap-ease-out),border-color var(--ap-dur-2) var(--ap-ease-out);
}
.lst-stage-av.speaking{
  border-color:var(--ap-blue);
  box-shadow:0 0 0 5px var(--ap-blue-tint),var(--ap-shadow-sm);
  transform:scale(1.06);
}
.lst-stage-name{font-size:var(--ap-t-footnote);font-weight:600;color:var(--ap-label)}
.lst-stage-role{
  font-size:var(--ap-t-caption2);font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ap-label-3);
}
.lst-stage-narrator,.lst-stage-center{display:flex;flex-direction:column;align-items:center;gap:var(--ap-s2);padding:10px 6px}
.lst-stage-wave{display:flex;align-items:center;gap:3px;height:36px}
.lst-stage-wave span{
  display:block;width:5px;height:4px;border-radius:var(--ap-r-pill);
  background:var(--ap-blue);transition:height .08s ease;
}
.lst-stage-cur{
  max-width:88px;text-align:center;line-height:1.4;
  font-size:var(--ap-t-caption2);font-weight:600;color:var(--ap-label-3);
}

/* ── 문항 목록 (한 음원에 여러 문항) ──────────────────────────────────── */
.lst-q-item{padding:var(--ap-s4) 0}
.lst-q-item-sep{margin-top:var(--ap-s1);border-top:1px solid var(--ap-separator-soft)}
.lst-q-num{
  display:flex;align-items:center;gap:var(--ap-s1);margin-bottom:var(--ap-s2);
  font-size:var(--ap-t-caption);font-weight:600;letter-spacing:.05em;
  text-transform:uppercase;color:var(--ap-label-3);
}
.lst-q-answered{margin-left:auto}
.lst-q-text{
  margin-bottom:var(--ap-s3);
  font-size:var(--ap-t-callout);line-height:1.5;font-weight:600;color:var(--ap-label);
}
.lst-opts-compact .opt{min-height:46px;padding:11px 14px;margin-bottom:var(--ap-s1)}

/* 문항 힌트 (재생 전 안내) */
.lst-q-hint{
  margin-left:var(--ap-s2);padding:2px 9px;border-radius:var(--ap-r-pill);
  background:var(--ap-orange-tint);color:var(--ap-orange);
  font-size:var(--ap-t-caption2);font-weight:600;
}

@media (max-width:640px){
  .lst-stage{padding:var(--ap-s5) var(--ap-s4)}
  .lst-stage.dlg{gap:var(--ap-s2)}
  .lst-stage-av{width:60px;height:60px;font-size:32px}
}