:root { color-scheme: light; font-family: "Malgun Gothic", "Noto Sans KR", sans-serif; --bg-page: #f3f5f8; --bg-surface: #ffffff; --text-primary: #202938; --text-secondary: #667085; --border-default: #dbe1e9; --border-input: #c8d0dc; --border-card: #e0e5ec; --border-choice: #e2e6ec; --button-bg: #ffffff; --button-hover-bg: #eef3fb; --primary-bg: #255dc2; --primary-text: #ffffff; --primary-border: #255dc2; --accent-color: #255dc2; --answer-read-bg: #fffaf0; --answer-read-border: #d99a24; --answer-read-glow: #f0c96b; --correct-bg: #ecf9f1; --correct-border: #2a9d62; --wrong-bg: #fff0f0; --wrong-border: #db5a5a; --shadow: 0 8px 22px #24344d12; --error-color: #b42318; --surface-shadow: 0 8px 22px #24344d12; color: var(--text-primary); background: var(--bg-page); }
[data-theme="dark"] { --bg-page: #0d0d1a; --bg-surface: #1a1a2e; --text-primary: #e0e0f0; --text-secondary: #9a9ab0; --border-default: #2a2a4a; --border-input: #3a3a5a; --border-card: #2a2a4a; --border-choice: #2a2a4a; --button-bg: #2a2a4a; --button-hover-bg: #3a3a5a; --primary-bg: #3a6fd8; --primary-text: #ffffff; --primary-border: #3a6fd8; --accent-color: #5a8ff0; --answer-read-bg: #2a2a1a; --answer-read-border: #b8860b; --answer-read-glow: #9a7a0b; --correct-bg: #0a2a1a; --correct-border: #2a9d62; --wrong-bg: #2a0a0a; --wrong-border: #db5a5a; --shadow: 0 8px 22px #00000040; --error-color: #ff6b6b; --surface-shadow: 0 8px 22px #00000040; color: var(--text-primary); background: var(--bg-page); }
[data-theme="dark"] select { background: #1a1a2e; color: #e0e0f0; }
[data-theme="dark"] input[type="range"] { accent-color: #5a8ff0; }
[data-theme="dark"] .icon-button { color: #5a8ff0; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg-page); }
button, select, input { font: inherit; }
button { border: 1px solid var(--border-input); border-radius: 7px; background: var(--button-bg); padding: 9px 15px; cursor: pointer; color: var(--text-primary); }
button:hover { background: var(--button-hover-bg); }
.primary { color: var(--primary-text); background: var(--primary-bg); border-color: var(--primary-border); }
#app { max-width: 1100px; margin: 0 auto; padding: 20px 18px; }
.screen { background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: 13px; padding: 18px 20px; box-shadow: var(--surface-shadow); }
.hidden { display: none !important; }
h1 { margin-top: 0; color: var(--text-primary); }
.intro-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 36px; width: 100%; }
label { display: grid; grid-template-columns: 180px 1fr; align-items: center; gap: 15px; color: var(--text-primary); }
select { min-width: 190px; padding: 8px; border: 1px solid var(--border-input); border-radius: 6px; background: var(--bg-surface); color: var(--text-primary); }
.voice-field { display: grid; grid-template-columns: 180px 1fr; align-items: start; gap: 15px; }
.voice-controls { display: flex; flex-direction: column; align-items: stretch; gap: 2px; }
.voice-row { display: flex; align-items: center; gap: 6px; }
.voice-controls select { width: 145px; min-width: 145px; }
.icon-button { width: 36px; height: 36px; padding: 0; color: var(--accent-color); font-size: 16px; }
.intro-actions { justify-content: flex-end; }
.voice-controls .status { margin: 0; white-space: nowrap; font-size: 0.88rem; }
.speed-control { display: flex; align-items: center; gap: 12px; }
.actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 20px; }
.status { min-height: 1.3em; color: var(--text-secondary); }
.study-header { display: flex; justify-content: space-between; font-weight: 700; margin-bottom: 15px; color: var(--text-primary); }
.study-meta { display: flex; gap: 18px; }
.card { border: 1px solid var(--border-card); border-radius: 10px; padding: 14px 17px; background: var(--bg-surface); line-height: 1.5; overflow-wrap: anywhere; color: var(--text-primary); }
.question-text { font-size: 1.08rem; font-weight: 600; }
.question-image, .display-image { display: block; max-width: 100%; max-height: 360px; margin: 9px auto; object-fit: contain; }
.choices { display: grid; gap: 5px; margin-top: 12px; }
.choice.answer-read { border: 2px solid var(--answer-read-border); background: var(--answer-read-bg); box-shadow: 0 0 0 1px var(--answer-read-glow) inset; }
.choice { padding: 7px 11px; border: 1px solid var(--border-choice); border-radius: 7px; color: var(--text-primary); }
.choice.correct { border-color: var(--correct-border); background: var(--correct-bg); }
.choice.wrong { border-color: var(--wrong-border); background: var(--wrong-bg); }
.answer-area { margin-top: 15px; }
.radio-answer { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.radio-answer label { display: flex; grid-template-columns: none; gap: 5px; cursor: pointer; color: var(--text-primary); }
.radio-answer input { accent-color: var(--accent-color); }
.answer-area select { min-width: 120px; }
.result { font-size: 1.1rem; font-weight: 700; }
@media (max-width: 700px) { .intro-grid { grid-template-columns: 1fr; } .screen { padding: 18px; } label, .voice-field { grid-template-columns: 1fr; align-items: flex-start; gap: 5px; } select { width: 100%; } .voice-controls, .voice-row { width: 100%; } .voice-row select { flex: 1; } }