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

/* 색상 테마 */
.exam-wrap { --exam-color:#FF5722; }
.exam-wrap[data-color="white"]  { --exam-color:#4a5568; }
.exam-wrap[data-color="yellow"] { --exam-color:#d69e2e; }
.exam-wrap[data-color="green"]  { --exam-color:#38a169; }
.exam-wrap[data-color="blue"]   { --exam-color:#3182ce; }

.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; }

/* 매칭 (레거시 드롭다운) */
.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}