/* IELTS 리스닝 재생기 — js/ielts-listen.js (2026-09-29, docs/dev/15-listening.md 2단계).
   문항 칸(#questionsPanel) 맨 위에 붙는다. 지문 칸은 지문 없는 세트 규칙(#readingPanels.pp-no-passage)으로 숨는다.
   색은 style.css 의 :root 토큰만 쓴다. */

.ls-player {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
  margin: 0 0 12px; padding: 12px 14px;
  border: 1px solid var(--border-soft); border-radius: var(--radius);
  background: var(--bg-elevated);
  position: sticky; top: 0; z-index: 2;
}
.ls-play {
  border: 1px solid var(--accent); background: var(--accent); color: #fff;
  border-radius: 999px; padding: 8px 16px; font: inherit; font-weight: 600; cursor: pointer;
}
.ls-play:disabled { background: var(--bg-secondary); border-color: var(--border-mid); color: var(--text-dim); cursor: default; }
.ls-play.is-hidden { display: none; }
.ls-track { flex: 1 1 200px; display: flex; align-items: center; gap: 10px; min-width: 0; }
.ls-bar { flex: 1; height: 6px; border-radius: 3px; background: var(--bg-secondary); overflow: hidden; }
.ls-bar i { display: block; height: 100%; width: 0; background: var(--accent); }
.ls-time { font-variant-numeric: tabular-nums; color: var(--text-dim); font-size: 0.9em; white-space: nowrap; }
.ls-part { font-weight: 600; color: var(--text-primary); }
.ls-part:empty { display: none; }
.ls-note { flex-basis: 100%; margin: 0; color: var(--text-dim); font-size: 0.9em; }
.ls-note:empty { display: none; }
.ls-credit { flex-basis: 100%; margin: 0; color: var(--text-faint); font-size: 12px; line-height: 1.4; }

/* 결과 표의 관측치 칸(3단계) — 잰 값만, 색으로 판정하지 않는다 */
.ls-obs { white-space: nowrap; color: var(--text-dim); }
/* 폰(표준 S2 ≤600) — 열 여섯 · 일곱이 옆으로 넘쳐 잘렸다(2026-10-19 사용자 사진). 머리 줄 없이 문항마다 두 줄로 쌓는다:
   1줄 「번호 · 내 답 · Answer: 정답 · ✓」, 2줄 「On screen when heard: … · Answered: …」(값이 없는 칸은 뺌). 가로 스크롤 없음 */
@media (max-width: 600px) {
  .ie-rtable.is-ls, .ie-rtable.is-ls tbody { display: block; }
  .ie-rtable.is-ls thead { display: none; }
  .ie-rtable.is-ls tr { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; padding: 10px 14px; border-bottom: 1px solid var(--border-soft); }
  .ie-rtable.is-ls tr:last-child { border-bottom: 0; }
  .ie-rtable.is-ls td { display: block; padding: 0; border: 0; overflow-wrap: anywhere; }
  .ie-rtable.is-ls td:first-child { min-width: 18px; color: var(--text-dim); }
  .ie-rtable.is-ls td:nth-child(3)::before { content: var(--ls-ans); color: var(--text-dim); font-size: 13px; font-weight: 400; }
  .ie-rtable.is-ls td:last-child { order: 1; margin-left: auto; }
  .ie-rtable.is-ls td.ls-obs { order: 2; flex-basis: 100%; white-space: normal; font-size: 13px; padding-left: 30px; }
  .ie-rtable.is-ls td.ls-obs::before { content: attr(data-k) ': '; }
  .ie-rtable.is-ls td.ls-obs.is-none, .ie-rtable.is-ls td:empty { display: none; }
}

/* 문장별 받아쓰기 — 단계 · 속도 · 틀린 원인(ielts-dict.js, 2026-10-03 단계 H) */
.dict-lv, .dict-rates { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.dict-lv { margin-bottom: 10px; }
.dict-lv button, .dict-rates button { font: inherit; font-size: var(--fs-body); font-weight: 600; padding: 6px 12px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--border-mid); background: var(--bg-elevated); color: var(--text-primary); }
.dict-lv button.is-on, .dict-rates button.is-on { background: var(--purple-soft, #f3eeff); border-color: var(--accent); color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }   /* 활성 = 연보라 + 테두리, 채운 보라는 주 단추 하나(표준 S5 · 2026-10-18) */
.dict-lv button:disabled, .dict-rates button:disabled { opacity: .4; cursor: not-allowed; }
.dict-lv button.is-on:disabled { opacity: 1; }   /* 고른 답은 고른 뒤에도 또렷하게(2026-10-18 — 흐린 연보라라 고른 것이 안 보였다) */
/* Numbers & spelling 거르기(2026-10-18) — 단계 줄 아래 제 줄 · 끝 화면의 실전 실수 한 줄 */
.dict-lv.dict-focus { display: flex; }
.dict-slips { margin: -8px 0 16px; font-size: 14px; color: var(--text-dim, #56627A); }
/* Catch the trap(ielts-trap.js, 2026-10-18) — 문항 한 줄 · 물음 · 고른 뒤 두 줄(A · B 머리 + 칠한 대본) */
.trap-q { margin: 0 0 14px; font-size: var(--t3); line-height: 1.5; }
.trap-qn { font-weight: 700; margin-right: 4px; }
.trap-ask { margin: 16px 0 8px; font-weight: 600; }
.trap-lines { margin: 12px 0 8px; }
.trap-lines .xr-lx-row b { flex: none; min-width: 22px; font-size: var(--fs-label); color: var(--text-dim, #56627A); }
.dict-ctl { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.dict-full { width: 100%; box-sizing: border-box; font: inherit; font-size: 17px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--border-mid); }
.dict-slow { margin: 6px 0 0; font-size: 14px; color: #15803d; font-weight: 600; }
.dict-why { margin: 6px 0 0; font-size: var(--fs-body); line-height: 1.5; color: var(--text-primary); }
.dict-typed { margin: 4px 0 0; font-size: 14px; color: var(--text-dim); }
.dict-unlock { margin: 6px 0 0; font-size: 14px; font-weight: 700; color: var(--accent); }
.dict-cause { margin: 10px 0; }