/* 결과를 읽고 다음 연습에서 바꿀 한 가지를 먼저 확인한다. */
.page > .score-hero, .report-group > .score-hero { padding: 28px 32px; }
.page > .score-hero .score-num, .report-group > .score-hero .score-num { font-size: 104px; }
.page > .score-hero h2, .report-group > .score-hero h2 { margin-top: 18px; font-size: 21px; }
.page > .score-hero p, .report-group > .score-hero p { font-size: 15px; }
.report-focus.section { margin-top: 20px; }
.report-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40px 28px 44px;
  text-align: center;
  background: radial-gradient(ellipse at 50% 0, rgba(255, 147, 80, .11), transparent 70%), var(--surface);
}
.report-empty img { width: 112px; height: 112px; object-fit: contain; margin-bottom: 14px; }
.report-empty h2 { margin: 0; font-size: 24px; line-height: 1.45; }
.report-empty p { max-width: 580px; margin: 12px 0 24px; color: var(--ink-2); }
.report-pending { padding: 30px 32px; }
.report-kicker { color: #b83d0f; font-size: 13px; font-weight: 700; }
.report-pending h2 { display: flex; align-items: center; gap: 10px; margin: 8px 0; font-size: 23px; line-height: 1.4; }
.report-pending p { max-width: 660px; margin: 8px 0 20px; color: var(--ink-2); }
.report-pending small { display: block; margin-top: 10px; font-size: 13px; color: var(--muted); }
/* 분석 중: 모키가 돋보기로 답변을 살펴본다 */
.report-pending.analyzing { position: relative; padding-right: 150px; }
.report-moki { position: absolute; right: 32px; top: 50%; width: 96px; height: 96px; object-fit: contain; translate: 0 -50%; animation: mokiPeer 2.4s ease-in-out infinite; }
@keyframes mokiPeer { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-4px) rotate(-3deg); } }
@media (prefers-reduced-motion: reduce) { .report-moki { animation: none; } }
.report-focus { padding: 28px 32px; border: 1px solid rgba(255, 90, 31, .2); }
.report-focus h2 { margin: 6px 0 8px; font-size: 23px; line-height: 1.45; }
.report-goal > p { margin: 0; font-size: 18px; font-weight: 600; line-height: 1.7; color: var(--ink); }
.report-example { margin-top: 22px; padding: 20px 22px; background: #fff5ee; border-radius: var(--r-md); }
.report-example-label { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.report-example-label b { font-size: 14px; color: #a63810; }
.report-example-label span { font-size: 12px; color: #756252; }
.report-example h3 { margin: 10px 0 8px; font-size: 16px; line-height: 1.6; }
.report-example-answer, .report-example-more p { margin: 0; color: var(--ink-2); font-size: 15px; line-height: 1.85; overflow-wrap: anywhere; }
.report-example-more { margin-top: 8px; }
.report-example-more summary { width: fit-content; padding: 5px 0; color: #a63810; cursor: pointer; font-size: 13px; font-weight: 600; }
.report-example-more[open] p { margin-top: 8px; }
.report-example-more summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 4px; }
@media (max-width: 640px) {
  .page > .score-hero, .report-group > .score-hero { padding: 24px 20px; }
  .page > .score-hero .score-num, .report-group > .score-hero .score-num { font-size: 88px; }
  .report-empty { padding: 28px 20px 32px; }
  .report-empty h2 { font-size: 21px; }
  .report-empty p { font-size: 14px; }
  .report-empty p br { display: none; }
  .report-pending, .report-focus { padding: 24px 20px; }
  .report-pending.analyzing { padding-right: 20px; }
  .report-moki { position: static; display: block; width: 72px; height: 72px; margin-bottom: 8px; translate: none; }
  .report-pending h2, .report-focus h2 { font-size: 21px; }
  .report-pending p { font-size: 14px; }
  .report-goal > p { font-size: 16px; }
  .report-example { margin-top: 18px; padding: 18px 16px; }
  .report-example-label { display: grid; gap: 2px; }
}

/* 써 둔 스크립트와 실제 답변 비교 */
.script-compare { margin-top: 4px; padding: 16px 18px; background: var(--grey-50); border-radius: 14px; }
.sc-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }
.sc-head h4 { margin: 0; }
.sc-head span { font-size: 13px; color: var(--muted); }
.sc-head b { color: var(--ink); }
.sc-terms { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.sc-term { padding: 5px 10px; border-radius: 8px; background: var(--surface); color: var(--grey-500); font-size: 13px; font-weight: 600; box-shadow: inset 0 0 0 1px var(--grey-200); }
.sc-term.hit { background: var(--good-weak); color: #028a54; box-shadow: none; }
.sc-full { margin-top: 10px; }
.answer .sc-full summary { display: block; width: fit-content; padding: 4px 0; border-radius: 0; background: none; font-size: 13px; font-weight: 600; color: var(--muted); cursor: pointer; }
.answer .sc-full summary:hover { background: none; color: var(--ink-2); }
.sc-full p { margin: 8px 0 0; font-size: 14px; line-height: 1.8; color: var(--ink-2); white-space: pre-line; }

/* 녹음: 이 창에서만 듣고, 원하면 내 컴퓨터에 받는다 */
.answer-audio { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.answer-audio audio { flex: 1 1 260px; }
.answer-audio .btn svg { width: 16px; height: 16px; }
.answer-audio .hint { flex-basis: 100%; font-size: 12px; }
.audio-gone { margin: 0; padding: 10px 14px; border-radius: 12px; background: var(--grey-50); font-size: 13px; color: var(--muted); }

/* 첫 연습 뒤 다음 단계 추천 */
.next-step { display: flex; align-items: center; gap: 16px; margin-top: 16px; padding: 18px 20px; }
.next-step img { flex: none; mix-blend-mode: multiply; }
.next-step > div { flex: 1; min-width: 0; display: grid; gap: 4px; }
.next-step .eyebrow { margin: 0; }
.next-step b { font-size: 16px; }
.next-step p { margin: 0; font-size: 14px; color: var(--muted); line-height: 1.6; }
.next-step .btn { flex: none; }
@media (max-width: 640px) { .next-step { flex-wrap: wrap; } .next-step .btn { width: 100%; } }
.section-title > [data-action="full-audio"] { flex: 0 0 auto; }
@media (max-width: 640px) { .section-title:has(> [data-action="full-audio"]) { flex-wrap: wrap; align-items: flex-start; } }

/* ---------- AI 분석 / 기본 기록 구분 ---------- */
.report-group { margin-top: 28px; }
.report-group:first-of-type { margin-top: 8px; }
.group-head { display: flex; align-items: center; gap: 10px; margin: 0 4px 12px; }
.group-head h2 { margin: 0; font-size: 20px; letter-spacing: -0.02em; }
.scope-tag { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 999px; background: var(--grey-200); color: var(--ink-2); font-size: 12px; font-weight: 700; }
.scope-tag.api { background: var(--accent-weak); color: var(--accent-ink); }
.scope-tag.free { background: var(--good-weak); color: #027a4a; }
.report-group > .card + .score-hero, .report-group > .score-hero + .section, .report-group > .card + .section { margin-top: 12px; }
.report-pending.failed .report-kicker { color: #c2253a; }
.pending-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.pending-actions:empty { display: none; }
.cost-note { display: block; margin-top: 10px; font-size: 13px; color: var(--muted); }
.ai-includes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; margin: 4px 0 20px; padding: 0; list-style: none; }
.ai-includes li { padding: 12px 14px; border-radius: 12px; background: var(--grey-50); font-size: 14px; font-weight: 700; color: var(--ink); }
.ai-includes small { display: block; margin-top: 2px; font-size: 12px; font-weight: 500; color: var(--muted); }
.score-hero .hero-note { margin-left: 6px; padding: 2px 8px; border-radius: 999px; background: rgba(255, 255, 255, .14); font-size: 12px; font-weight: 600; }
.score-hero .hero-scope { margin-top: 14px; font-size: 13px !important; opacity: .72; }

/* 질문별 답변: 받아쓰기(무료) · AI 피드백 */
.answer-text-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; }
.answer-text-head h4 { display: flex; align-items: center; gap: 8px; margin: 0; }
.use-tag { padding: 2px 8px; border-radius: 999px; background: var(--grey-100); color: var(--ink-2); font-size: 11px; font-weight: 700; }
.measure { font-size: 12px; color: var(--muted); }
.answer-text > p { margin: 8px 0 0; }
.answer-text textarea { width: 100%; margin-top: 10px; }
.answer-text-actions, .answer-edit-actions { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 8px; }
.answer-text-actions .text-btn { font-size: 13px; }
.orig-answer { margin-top: 8px; font-size: 13px; color: var(--muted); }
.orig-answer summary { cursor: pointer; font-weight: 600; }
.orig-answer p { margin: 6px 0 0; padding: 10px 12px; border-radius: 10px; background: var(--grey-50); }
.thin-note { margin: 8px 0 0; padding: 10px 12px; border-radius: 10px; background: var(--warn-weak); color: #8a5300; font-size: 13px; }
.ai-block { margin-top: 4px; padding: 16px 18px; border-radius: 14px; background: var(--grey-50); }
.ai-block-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.ai-tag { padding: 3px 9px; border-radius: 999px; background: var(--accent-weak); color: var(--accent-ink); font-size: 12px; font-weight: 700; }
.ai-block .answer-grid { margin-top: 0; }
.evidence { margin: 10px 0 0; padding: 8px 12px; border-left: 3px solid var(--grey-300); background: var(--surface); border-radius: 0 8px 8px 0; font-size: 13px; color: var(--ink-2); }
.evidence span { display: block; margin-bottom: 2px; font-size: 11px; font-weight: 700; color: var(--muted); }
.fill-list { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; font-size: 12px; }
.fill-list span { font-weight: 700; color: var(--muted); }
.fill-list em { padding: 3px 8px; border-radius: 6px; background: var(--warn-weak); color: #8a5300; font-style: normal; font-weight: 600; }
mark.blank { padding: 0 3px; border-radius: 4px; background: var(--warn-weak); color: #8a5300; font-weight: 700; }
.better small { display: block; margin-top: 8px; font-size: 12px; color: var(--muted); }
.answer-retry { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding-top: 4px; }
.answer-retry .btn svg { width: 15px; height: 15px; }
.compare-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; overflow: hidden; }
.cmp-col { padding: 20px 22px; }
.cmp-col + .cmp-col { border-left: 1px solid var(--grey-100); }
.cmp-col.now { background: var(--grey-50); }
.cmp-label { font-size: 12px; font-weight: 700; color: var(--muted); }
.cmp-col.now .cmp-label { color: var(--accent-ink); }
.cmp-col p { margin: 8px 0; font-size: 15px; line-height: 1.7; }
.cmp-col small { font-size: 12px; color: var(--muted); }
@media (max-width: 640px) {
  .ai-includes { grid-template-columns: minmax(0, 1fr); }
  .compare-grid { grid-template-columns: minmax(0, 1fr); }
  .cmp-col + .cmp-col { border-left: 0; border-top: 1px solid var(--grey-100); }
}
/* 같은 질문 지난번과 비교 */
.prev-measure { display: inline-block; margin-left: 6px; font-style: normal; color: var(--faint); }
.score-delta { font-size: 12px; font-weight: 600; color: var(--muted); }
.score-delta.up { color: #027a4a; }
.score-delta.down { color: #c2253a; }
.sc .score-delta { margin-left: 4px; }
.sessions-note { margin: 0 4px 8px; font-size: 12px; color: var(--faint); }
.ai-block-mini { padding: 10px 14px; }
.ai-block-mini .ai-block-head { margin: 0; }
/* 지난 면접 칩: 고른 것만 검정, 나머지는 선만. 상태는 글자색으로 구분 */
.sess { display: inline-flex; align-items: center; gap: 6px; background: transparent; box-shadow: inset 0 0 0 1px var(--grey-300); white-space: nowrap; }
.sess:hover { background: var(--surface); box-shadow: inset 0 0 0 1px var(--grey-400); }
.sess .sess-date { color: var(--muted); font-weight: 500; }
.sess .sess-kind { padding: 1px 7px; border-radius: 999px; background: var(--grey-100); color: var(--ink-2); font-size: 12px; font-weight: 600; }
.sess .sess-score { color: var(--ink); }
.sess .sess-state { font-weight: 600; color: var(--faint); }
.sess .sess-state.failed { color: #c2253a; }
.sess .sess-state.running { color: var(--accent-ink); }
.sess.on { background: var(--ink); box-shadow: none; }
.sess.on .sess-date { color: var(--grey-400); }
.sess.on .sess-kind { background: rgba(255, 255, 255, .14); color: #fff; }
.sess.on .sess-score, .sess.on .sess-state { color: #fff; }
.sess.on .sess-state.failed { color: #ff8a95; }
/* 지난 면접 칩: 가로 스크롤 대신 줄바꿈, 5개 넘으면 더보기 */
.sessions { flex-wrap: wrap; overflow: visible; }
.sess-more { box-shadow: none; background: var(--grey-200); color: var(--ink-2); font-weight: 600; }
.sess-more:hover { background: var(--grey-300); box-shadow: none; }
.sess { height: 36px; padding: 0 12px; gap: 5px; font-size: 13px; }
.sess .sess-kind { font-size: 11px; }
.review-practice-hint { display: block; margin-top: 6px; font-size: 12px; }