/* ============================================================================
   speaking.css — 스피킹 안내 · 과제 · 그림/이모지 장면 · 녹음
   ============================================================================ */

/* ── 안내 (시작 전 절차) ──────────────────────────────────────────────── */
.spk-instructions{
  padding:var(--ap-s5);
  background:var(--ap-blue-tint);border-bottom:1px solid var(--ap-separator-soft);
}
.spk-inst-title{
  display:flex;align-items:center;gap:var(--ap-s2);margin-bottom:var(--ap-s3);
  font-size:var(--ap-t-subhead);font-weight:600;color:var(--ap-blue-text);
}
.spk-inst-steps{display:flex;flex-direction:column;gap:var(--ap-s2)}
.spk-inst-step{
  display:flex;align-items:flex-start;gap:var(--ap-s3);
  font-size:var(--ap-t-footnote);line-height:1.6;color:var(--ap-label-2);
}
.spk-inst-step>span:not(.spk-inst-num){flex:1;min-width:0;line-height:1.55}
.spk-inst-num{
  width:22px;height:22px;flex-shrink:0;margin-top:1px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--ap-blue);color:#fff;
  font-size:var(--ap-t-caption2);font-weight:600;
}

/* ── 과제 ─────────────────────────────────────────────────────────────── */
.spk-task-section{padding:var(--ap-s5);border-bottom:1px solid var(--ap-separator-soft)}
.spk-task-eye{
  margin-bottom:var(--ap-s2);font-size:var(--ap-t-caption2);font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;color:var(--ap-indigo);
}
.spk-task-txt{
  margin-bottom:var(--ap-s3);
  font-size:var(--ap-t-callout);line-height:1.6;font-weight:600;color:var(--ap-label);
}
.spk-prompt{
  margin-bottom:var(--ap-s1);padding:5px 0 5px 13px;
  border-left:2px solid var(--ap-separator);
  font-size:var(--ap-t-footnote);line-height:1.55;color:var(--ap-label-2);
}

/* 하위 질문 묶음 */
.spk-prompts{
  margin-bottom:var(--ap-s3);padding:14px 16px;border-radius:var(--ap-r-md);
  background:var(--ap-fill);
}
.spk-prompts-hd{margin-bottom:var(--ap-s2);font-size:var(--ap-t-caption);font-weight:600;color:var(--ap-blue-text)}
.spk-prompt-item{
  margin:5px 0;padding:5px 0 5px 13px;border-left:2px solid var(--ap-indigo);
  font-size:var(--ap-t-footnote);line-height:1.55;color:var(--ap-label);
}

/* ── 그림 / 이모지 장면 ───────────────────────────────────────────────── */
.spk-picture-wrap{margin:0 0 var(--ap-s4)}
.spk-picture-label{
  margin-bottom:var(--ap-s2);font-size:var(--ap-t-caption2);font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;color:var(--ap-label-3);
}
.spk-picture-img{
  display:block;width:100%;height:auto;aspect-ratio:4/3;
  object-fit:cover;object-position:center;border-radius:var(--ap-r-lg);
}
.spk-picture-fallback{
  padding:var(--ap-s5) var(--ap-s4);text-align:center;border-radius:var(--ap-r-lg);
  background:var(--ap-fill);
  font-size:var(--ap-t-footnote);line-height:1.6;color:var(--ap-label-2);
}
.spk-emoji-scene{
  display:flex;flex-wrap:wrap;gap:var(--ap-s3);justify-content:center;align-items:center;
  min-height:140px;padding:var(--ap-s6) var(--ap-s4);
  background:var(--ap-fill);border-radius:var(--ap-r-lg);
}
/* 레벨이 올라갈수록 장면 요소가 6~7개로 늘어난다 — 좁은 화면에서 줄바꿈은 두되
   글자가 눌리지 않도록 크기를 화면폭에 맞춰 조절한다. */
.spk-emoji{font-size:clamp(34px,10vw,46px);line-height:1}

/* ── 평가 기준 안내 ───────────────────────────────────────────────────── */
.spk-assessment-note{
  margin-top:var(--ap-s3);padding:14px 16px;border-radius:var(--ap-r-md);
  background:var(--ap-fill);
  font-size:var(--ap-t-footnote);line-height:1.7;color:var(--ap-label-2);
}
.spk-criteria-hd{margin-bottom:var(--ap-s2);font-size:var(--ap-t-footnote);font-weight:600;color:var(--ap-blue-text)}
.spk-criteria-item{
  margin:3px 0;padding:2px 0 2px 10px;border-left:2px solid var(--ap-separator);
  font-size:var(--ap-t-caption);color:var(--ap-label-2);
}

/* ── 주제 타이머 ──────────────────────────────────────────────────────── */
.topic-timer{display:flex;align-items:center;gap:var(--ap-s3);margin-bottom:var(--ap-s3)}
.topic-timer-bar-bg{flex:1;height:4px;border-radius:var(--ap-r-pill);background:var(--ap-fill-2);overflow:hidden}
.topic-timer-bar{height:100%;border-radius:inherit;background:var(--ap-indigo);transition:width 1s linear}
.topic-timer-lbl{white-space:nowrap;font-size:var(--ap-t-caption);font-weight:500;color:var(--ap-label-3)}