/* 퀴즈 오버레이 — 전체 화면 카드. 발표자 뷰(deck-presenter.css)처럼 덱 위를 덮되
   여긴 배경까지 덮어야 아래 슬라이드 클릭이 새지 않는다(코어는 [data-deck-ui] 안만 걸러준다). */

#quiz-shell {
  position:fixed; inset:0; z-index:400;
  background:var(--bg);
  display:flex; align-items:center; justify-content:center;
  padding:4vh 4vw; overflow-y:auto;
}

.quiz-panel {
  width:min(720px, 100%); max-height:100%; overflow-y:auto;
  background:var(--panel); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow-pill); padding:4vh 4vw; color:var(--fg);
}
.quiz-panel h2 { margin-bottom:1.4vh; }
.quiz-sub { color:var(--muted); margin-bottom:0.8vh; }
.quiz-progress { color:var(--muted); font-size:0.85em; margin-bottom:1.6vh; }
.quiz-q { font-size:clamp(22px,2vw,34px); line-height:1.35; margin-bottom:2.4vh; }

.quiz-actions { display:flex; gap:12px; flex-wrap:wrap; margin-top:2.4vh; }

/* 보기 버튼 — 코어 .deck-btn 을 쓰지 않는다: 여긴 좌우 정렬된 리스트 항목이라
   버튼마다 번호 배지가 붙는 별도 레이아웃이 필요하다 */
.quiz-choices { display:flex; flex-direction:column; gap:10px; }
.quiz-choice {
  display:flex; align-items:center; gap:14px; text-align:left;
  border:1px solid var(--border); background:var(--bg); color:var(--fg);
  border-radius:var(--radius); padding:1.4vh 1.4vw; font:inherit; font-size:0.95em; cursor:pointer;
}
.quiz-choice:hover:not(:disabled) { border-color:var(--accent); }
.quiz-choice:disabled { cursor:default; opacity:.7; }
.quiz-choice-key {
  flex:0 0 auto; width:1.8em; height:1.8em; display:flex; align-items:center; justify-content:center;
  border-radius:50%; background:var(--panel); border:1px solid var(--border);
  font-weight:700; font-size:0.85em;
}

#quiz-short-form { display:flex; gap:10px; }
#quiz-short-input {
  flex:1 1 auto; font:inherit; font-size:0.95em; padding:1.2vh 1.2vw;
  border:1px solid var(--border); border-radius:var(--radius); background:var(--bg); color:var(--fg);
}
#quiz-short-input:disabled { opacity:.7; }

.quiz-reveal { margin-top:2.4vh; padding-top:2.4vh; border-top:1px solid var(--border); }
.quiz-verdict { font-weight:800; font-size:1.15em; margin-bottom:0.8vh; }
.quiz-reveal.ok .quiz-verdict { color:var(--ok); }
.quiz-reveal.bad .quiz-verdict { color:var(--bad); }
.quiz-correct-answer { color:var(--fg); margin-bottom:0.8vh; }
.quiz-why { color:var(--muted); line-height:1.6; }

.quiz-score { font-size:clamp(36px,4vw,64px); font-weight:800; margin-bottom:2vh; }

.quiz-breakdown { border-collapse:collapse; width:100%; font-size:0.9em; margin-top:1vh; }
.quiz-breakdown td { border-bottom:1px solid var(--border); padding:0.9vh 0.4vw; }
.quiz-breakdown td.ok { color:var(--ok); text-align:right; font-weight:700; }
.quiz-breakdown td.bad { color:var(--bad); text-align:right; font-weight:700; }