/* 색상 시험 (exam 엔진) 학생 응시 UI */
.exam-page { background:#FAFAFA; }
.exam-wrap { max-width:760px; margin:0 auto; padding:16px 16px 120px; }

/* 색상 테마 (.exam-review = 코치 채점 화면의 시험지형 결과 리뷰) */
.exam-wrap, .exam-review { --exam-color:#FF5722; }
.exam-wrap[data-color="white"],  .exam-review[data-color="white"]  { --exam-color:#4a5568; }
.exam-wrap[data-color="yellow"], .exam-review[data-color="yellow"] { --exam-color:#d69e2e; }
.exam-wrap[data-color="green"],  .exam-review[data-color="green"]  { --exam-color:#38a169; }
.exam-wrap[data-color="blue"],   .exam-review[data-color="blue"]   { --exam-color:#3182ce; }
.exam-wrap[data-color="red"],    .exam-review[data-color="red"]    { --exam-color:#e53e3e; }

.exam-header { text-align:center; padding:20px 0 14px; border-bottom:3px double #333; margin-bottom:18px; }
.exam-header h1 { font-size:21px; margin:0 0 8px; color:#111; }
.exam-badge { display:inline-block; padding:4px 16px; border-radius:20px; color:#fff; font-size:13px; font-weight:700; letter-spacing:.5px; background:var(--exam-color); }

/* 인트로 / 결과 카드 */
.exam-card { background:#fff; border-radius:16px; padding:28px 22px; text-align:center; box-shadow:0 2px 10px rgba(0,0,0,.05); margin-top:24px; }
.exam-card .emoji { font-size:44px; margin-bottom:12px; }
.exam-card h2 { font-size:18px; margin:0 0 10px; color:#333; }
.exam-card p { font-size:14px; color:#777; line-height:1.7; margin:0 0 6px; }
.exam-btn { display:inline-block; border:none; border-radius:12px; padding:13px 34px; font-size:16px; font-weight:700; cursor:pointer; background:var(--exam-color); color:#fff; margin-top:16px; }
.exam-btn:disabled { opacity:.5; cursor:not-allowed; }

/* 영역 단계 표시 */
.exam-step { display:flex; align-items:center; gap:7px; margin:4px 0 2px; }
.exam-step-dot { width:9px; height:9px; border-radius:50%; background:#ddd; }
.exam-step-dot.past { background:color-mix(in srgb, var(--exam-color) 45%, #fff); }
.exam-step-dot.now { background:var(--exam-color); transform:scale(1.25); }
.exam-step-label { font-size:12.5px; color:#888; font-weight:700; margin-left:2px; }

/* 섹션/문항 */
.exam-section-title { font-size:15px; font-weight:700; background:#fff; padding:8px 12px; margin:26px 0 12px; border-left:5px solid var(--exam-color); border-radius:0 6px 6px 0; }
.exam-q { background:#fff; border-radius:12px; padding:14px; margin-bottom:14px; box-shadow:0 1px 4px rgba(0,0,0,.04); }
.exam-q .q-text { font-weight:700; font-size:14px; margin-bottom:10px; line-height:1.6; }
.exam-q .q-box { background:#fcfcfc; border:1px dashed #bbb; padding:10px 14px; margin-bottom:10px; border-radius:6px; font-size:13.5px; line-height:1.7; }
.exam-q .options label { display:flex; align-items:flex-start; gap:8px; margin:0 0 8px; padding:8px 10px; border:1.5px solid #eee; border-radius:8px; cursor:pointer; font-size:14px; line-height:1.5; }
.exam-q .options label:has(input:checked) { border-color:var(--exam-color); background:color-mix(in srgb, var(--exam-color) 6%, #fff); }
.exam-q .options input { margin-top:3px; }
.exam-phonetic { font-family:'Times New Roman',serif; font-weight:700; color:#b7791f; }

/* 단어/녹음 카드 */
.exam-word-card { border:2px solid #cbd5e0; background:#f7fafc; padding:12px 15px; border-radius:8px; margin-bottom:10px; display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.exam-word-main { font-size:22px; font-weight:700; color:#2d3748; }
.exam-rec-btn { border:1.5px solid #fc8181; background:#fff5f5; color:#c53030; border-radius:20px; padding:7px 14px; font-size:13px; font-weight:700; cursor:pointer; white-space:nowrap; }
.exam-rec-btn.recording { background:#c53030; color:#fff; border-color:#c53030; animation:exam-pulse 1s infinite; }
.exam-rec-btn.done { background:#f0fff4; border-color:#48bb78; color:#2f855a; }
@keyframes exam-pulse { 50% { opacity:.6; } }

/* 빈칸 */
.exam-blank-input { width:100px; border:none; border-bottom:2px solid #888; font-size:14px; text-align:center; outline:none; padding:2px 4px; background:#fffbeb; }
.exam-blank-input:focus { border-bottom-color:var(--exam-color); }
.exam-hint { color:#718096; font-size:12.5px; margin-top:6px; }

/* 문장 조립 */
.exam-chips { display:flex; flex-wrap:wrap; gap:7px; margin:8px 0; }
.exam-chip { background:#fff; border:1.6px solid var(--exam-color); color:#2d3748; border-radius:18px; padding:6px 13px; font-size:14px; font-weight:700; cursor:pointer; user-select:none; }
.exam-chip.used { opacity:.28; pointer-events:none; }
.exam-slot { min-height:40px; border:1.8px dashed #aaa; border-radius:8px; padding:7px 10px; display:flex; flex-wrap:wrap; gap:6px; background:#fff; }
.exam-slot .placed { background:var(--exam-color); color:#fff; border-radius:16px; padding:5px 12px; font-size:14px; font-weight:700; cursor:pointer; }
/* 철자 조합(spell): 글자 1개짜리 타일 — 정사각에 가깝게, 놓인 글자는 붙여 읽히도록 간격을 좁힌다 */
.exam-chip-letter { min-width:40px; text-align:center; padding:8px 10px; font-size:17px; border-radius:10px; letter-spacing:.5px; }
.exam-slot-letter { gap:3px; }
.exam-slot-letter .placed { min-width:36px; text-align:center; padding:7px 8px; font-size:17px; border-radius:8px; }

/* 매칭 (레거시 드롭다운) */
.exam-match-row { display:flex; align-items:center; gap:10px; margin-bottom:8px; font-size:14px; }
.exam-match-row select { padding:6px 10px; border:1.5px solid #ccc; border-radius:8px; font-size:14px; }

/* 매칭 (탭-투-커넥트) */
.exam-match-help { font-size:12.5px; color:#718096; margin-bottom:9px; }
.exam-match-grid { display:flex; gap:12px; align-items:flex-start; }
.exam-match-col { flex:1; min-width:0; display:flex; flex-direction:column; gap:8px; }
.exam-match-col-title { font-size:12px; font-weight:700; color:#a0aec0; text-align:center; margin-bottom:1px; }
.exam-mitem { display:flex; align-items:center; gap:7px; width:100%; text-align:left; border:1.7px solid #e2e8f0; background:#fff; border-radius:10px; padding:11px 12px; font-size:14px; font-weight:600; color:#2d3748; cursor:pointer; line-height:1.4; }
.exam-mitem .exam-mlabel { font-weight:800; color:#4a5568; flex-shrink:0; }
.exam-mitem .exam-mword { word-break:break-word; }
.exam-mitem.sel { border-color:var(--exam-color); background:color-mix(in srgb, var(--exam-color) 9%, #fff); box-shadow:0 0 0 2px color-mix(in srgb, var(--exam-color) 25%, #fff); }
.exam-mitem.linked { border-color:#48bb78; background:#f0fff4; }
.exam-mpair { margin-left:auto; font-weight:800; color:#2f855a; font-size:12.5px; flex-shrink:0; }
.exam-mright.used { opacity:.65; }

/* 듣기 버튼 (녹음 재생) */
.exam-play-btn { border:1.5px solid #90cdf4; background:#ebf8ff; color:#2b6cb0; border-radius:20px; padding:7px 14px; font-size:13px; font-weight:700; cursor:pointer; white-space:nowrap; margin-left:6px; }
.exam-play-btn:disabled { opacity:.4; cursor:not-allowed; }

/* 한글 해석 박스 */
.exam-q .q-ko { background:#f0f7ff; border-left:3px solid #90cdf4; color:#2c5282; padding:8px 12px; margin:0 0 10px; border-radius:0 6px 6px 0; font-size:13px; line-height:1.6; }
.exam-q .q-ko::before { content:'뜻 '; font-weight:800; color:#3182ce; }

/* 지문 */
.exam-passage { border:1.5px solid #e2e8f0; border-left:5px solid var(--exam-color); background:#fbfdff; border-radius:8px; padding:12px 15px; margin:6px 0 12px; }
.exam-passage-title { font-weight:700; font-size:14px; margin-bottom:6px; }
.exam-passage p { margin:0; font-size:13.5px; line-height:1.8; }
.exam-passage-note { font-size:12.5px; color:#4a5568; margin-top:8px; padding-top:8px; border-top:1px dashed #cbd5e0; }
.exam-passage-note b { color:var(--exam-color); }
/* 지문 그룹 구분선 (지문 읽고 푸는 문제 시작 표시) */
.exam-readgroup-divider { display:flex; align-items:center; gap:10px; margin:22px 2px 4px; color:#718096; font-size:12.5px; font-weight:700; }
.exam-readgroup-divider::before, .exam-readgroup-divider::after { content:''; flex:1; height:1px; background:#e2e8f0; }

/* 하단 바 */
.exam-bar { position:fixed; left:0; right:0; bottom:0; background:#fff; border-top:2px solid var(--exam-color); padding:12px 16px calc(12px + env(safe-area-inset-bottom)); display:flex; align-items:center; justify-content:space-between; gap:12px; box-shadow:0 -2px 10px rgba(0,0,0,.06); z-index:100; }
.exam-bar .progress { font-size:13px; color:#666; font-weight:600; }

/* '다음' 버튼 위 되돌아갈 수 없음 안내 말풍선 (X 닫기) */
.exam-next-tip { position:absolute; right:12px; bottom:calc(100% + 14px); max-width:310px; background:#FFF3E0; border:2px solid #FFB74D; border-radius:14px; padding:12px 38px 12px 16px; font-size:14.5px; font-weight:700; color:#BF360C; line-height:1.55; box-shadow:0 4px 14px rgba(0,0,0,.14); animation:tipBob 2.2s ease-in-out infinite; }
.exam-next-tip::before { content:''; position:absolute; top:100%; right:34px; border:10px solid transparent; border-top-color:#FFB74D; border-bottom:none; }
.exam-next-tip::after { content:''; position:absolute; top:calc(100% - 3px); right:37px; border:7px solid transparent; border-top-color:#FFF3E0; border-bottom:none; }
.exam-next-tip-close { position:absolute; top:5px; right:6px; width:26px; height:26px; border:none; background:transparent; color:#BF360C; font-size:20px; font-weight:700; line-height:1; cursor:pointer; padding:0; }
@keyframes tipBob { 0%, 100% { transform:translateY(0); } 50% { transform:translateY(-5px); } }

/* 결과 */
.exam-score-total { font-size:30px; font-weight:800; color:var(--exam-color); margin:8px 0; }
.exam-score-areas { text-align:left; margin:16px auto 0; max-width:340px; }
.exam-score-area { display:flex; justify-content:space-between; padding:9px 4px; border-bottom:1px solid #f0f0f0; font-size:14px; }
.exam-score-area b { color:var(--exam-color); }

/* 보기 선택형 빈칸 (payload.options) */
.exam-blank-slot { display:inline-block; min-width:62px; padding:0 8px; border-bottom:2.5px solid var(--exam-color); text-align:center; font-weight:800; color:#E65100; line-height:1.5; }
.exam-blank-slot i { font-style:normal; color:#90A4AE; font-size:12px; margin-right:3px; }
.exam-bopt-row { display:flex; align-items:center; flex-wrap:wrap; gap:7px; margin:9px 0; }
.exam-bopt-mark { font-size:13px; font-weight:800; color:#607D8B; min-width:18px; }
.exam-bopt.sel { background:var(--exam-color); color:#fff; }
.exam-hold-box{margin-top:14px;padding:12px;border-top:1px solid #eee}
.exam-hold-note{margin-top:14px;padding:10px;background:#f5f7fa;border-radius:8px;font-size:13px;color:#555}
.exam-btn-outline{background:#fff;border:1.5px solid #4a90d9;color:#4a90d9;border-radius:8px;padding:10px 18px;font-weight:600;cursor:pointer}

/* 마이크 권한 안내 (mic-guide.js) — 모달 껍데기는 common.css 의 .modal 계열을 그대로 쓴다 */
.mic-guide-lead { font-size:15px; font-weight:700; line-height:1.6; color:#37474F; margin-bottom:14px; }
.mic-guide-steps { margin:0 0 14px; padding-left:22px; }
.mic-guide-steps li { font-size:14.5px; line-height:1.7; color:#455A64; margin-bottom:8px; }
.mic-guide-steps b { color:#E65100; }
.mic-guide-note { font-size:13px; line-height:1.6; color:#78909C; background:#F5F7FA; border-radius:10px; padding:10px 12px; margin-bottom:4px; }
.mic-guide-raw { font-size:12px; color:#B0BEC5; word-break:break-all; margin-bottom:10px; }
.mic-guide-actions { display:flex; flex-direction:column; gap:8px; margin-top:16px; }
.mic-guide-actions .btn { text-align:center; text-decoration:none; }
.mic-guide-url { width:100%; padding:10px; border:1.5px solid #CFD8DC; border-radius:8px; font-size:13px; color:#455A64; }

/* 인트로 사전 안내 배너 — 인앱 브라우저일 때만 노출 */
.mic-guide-notice { display:flex; flex-direction:column; align-items:center; gap:6px; margin:0 0 16px; padding:14px 16px; background:#FFF3E0; border:2px solid #FFB74D; border-radius:14px; color:#BF360C; line-height:1.55; }
.mic-guide-notice b { font-size:15px; }
.mic-guide-notice span { font-size:13.5px; font-weight:600; }
.mic-guide-notice-btn { margin-top:4px; padding:9px 18px; border:none; border-radius:20px; background:#E65100; color:#fff; font-size:14px; font-weight:700; cursor:pointer; }

/* ===== 시험지형 결과 리뷰 (코치 채점 화면 — js/exam-review.js) =====
   학생이 본 시험지 마크업을 그대로 쓰고, 정오·학생 답·정답 표시만 얹는다. */
.rv-chips { display:flex; flex-wrap:wrap; gap:6px; margin:0 0 12px; }
.rv-chip { display:inline-flex; align-items:center; gap:6px; border:1.5px solid #E0E0E0; background:#fff; color:#616161;
  border-radius:18px; padding:7px 13px; font-size:12.5px; font-weight:700; cursor:pointer; font-family:inherit; }
.rv-chip.active { border-color:var(--exam-color); background:color-mix(in srgb, var(--exam-color) 10%, #fff); color:#212121; }
.rv-chip-score { font-size:11.5px; font-weight:800; color:#9E9E9E; }
.rv-chip-score.ok { color:#2E7D32; }
.rv-chip-score.ng { color:#C62828; }

/* 오답만 보기 토글 — 영역 칩(선택)과 성격이 달라 줄을 나누고 오른쪽에 둔다 */
.rv-toolbar { display:flex; justify-content:flex-end; margin:-6px 0 10px; }
.rv-toggle { display:inline-flex; align-items:center; gap:7px; border:1.5px solid #E0E0E0; background:#fff;
  color:#757575; border-radius:18px; padding:6px 13px; font-size:12.5px; font-weight:700; cursor:pointer; font-family:inherit; }
.rv-toggle-box { width:14px; height:14px; border:1.5px solid #BDBDBD; border-radius:4px; position:relative; flex:none; }
.rv-toggle.active { border-color:#EF9A9A; background:#FDF3F3; color:#C62828; }
.rv-toggle.active .rv-toggle-box { background:#C62828; border-color:#C62828; }
.rv-toggle.active .rv-toggle-box::after { content:'✓'; position:absolute; inset:0; color:#fff; font-size:10px;
  font-weight:800; line-height:11px; text-align:center; }
.rv-filter-note { font-size:12px; color:#8D6E63; background:#FFF8F0; border-radius:8px; padding:8px 11px;
  margin:0 0 12px; line-height:1.6; }
.rv-filter-note span { color:#BCAAA4; }
.rv-filter-note.ok { color:#2E7D32; background:#F1F8E9; }
.rv-filter-note.ok b { font-weight:800; }

.exam-review .exam-section-title { margin-top:0; }
.rv-q { border-left:4px solid #E0E0E0; }
.rv-q.ok { border-left-color:#66BB6A; }
.rv-q.ng { border-left-color:#EF5350; background:#FFFCFC; }
.rv-q.na { border-left-color:#FFA726; background:#FFFDF7; }
.rv-mark { font-size:13px; font-weight:800; }
.rv-mark.ok { color:#2E7D32; }
.rv-mark.ng { color:#C62828; }
.rv-mark.na { font-size:11px; font-weight:700; background:#FB8C00; color:#fff; padding:2px 7px; border-radius:8px; }

/* 객관식 보기 — 학생이 고른 것과 정답을 함께 */
.rv-opt { display:flex; align-items:flex-start; gap:8px; margin:0 0 8px; padding:8px 10px; border:1.5px solid #eee;
  border-radius:8px; font-size:14px; line-height:1.5; }
.rv-opt .rv-num { font-weight:700; color:#90A4AE; flex:none; }
.rv-opt-text { flex:1; min-width:0; }
.rv-opt.correct { border-color:#A5D6A7; background:#F4FBF5; }
.rv-opt.picked-ok { border-color:#4CAF50; background:#EDF7EE; }
.rv-opt.picked-ng { border-color:#EF9A9A; background:#FDF3F3; }
.rv-tag { flex:none; font-size:10.5px; font-weight:800; padding:2px 7px; border-radius:8px; white-space:nowrap; }
.rv-tag.ok { background:#2E7D32; color:#fff; }
.rv-tag.ng { background:#C62828; color:#fff; }

.rv-answer { margin-top:8px; font-size:12.5px; color:#2E7D32; background:#F1F8E9; border-radius:8px; padding:7px 10px; line-height:1.6; }
.rv-answer b { font-weight:800; }

/* 빈칸 — 학생이 쓴/고른 말이 빈칸 자리에 그대로 */
.rv-blank.ok { color:#2E7D32; border-bottom-color:#66BB6A; }
.rv-blank.ng { color:#C62828; border-bottom-color:#EF5350; text-decoration:line-through; }
.rv-blank.na { color:#EF6C00; border-bottom-color:#FFB74D; font-size:12px; font-weight:700; }
.rv-bopt { cursor:default; border-color:#E0E0E0; color:#9E9E9E; font-weight:600; }
.rv-bopt.correct { border-color:#66BB6A; color:#2E7D32; }
.rv-bopt.picked-ok { background:#2E7D32; border-color:#2E7D32; color:#fff; }
.rv-bopt.picked-ng { background:#C62828; border-color:#C62828; color:#fff; }

/* 조립·철자 — 제시 타일은 흐리게, 학생이 늘어놓은 순서는 그대로 */
.rv-static { cursor:default; opacity:.5; }
.rv-slot { cursor:default; }
.rv-slot.ok { border-color:#A5D6A7; background:#F4FBF5; }
.rv-slot.ng { border-color:#EF9A9A; background:#FDF3F3; }
.rv-slot .placed { cursor:default; }

.rv-empty { font-size:12.5px; color:#B0BEC5; }
.rv-rec { margin-top:10px; }
.rv-word-center { justify-content:center; flex-direction:column; text-align:center; }
.exam-review .xmt-help { display:none; }  /* 조작 안내 — 읽기 전용에선 불필요 */
.rv-note { margin-top:6px; }  /* 녹음 문항의 note = 시험지엔 없는 채점 참고(학생에겐 안 보인다) */