:root {
  --pink: #FF6FA5; --blue: #4A90E2; --green: #36C275; --red: #FF5A5A;
  --yellow: #FFC93C; --ink: #2B2B4A; --bg: #FFF7FB;
}
* { box-sizing: border-box; }
body {
  margin: 0; font-family: "Pretendard", "Apple SD Gothic Neo", sans-serif;
  background: var(--bg); color: var(--ink);
  -webkit-text-size-adjust: 100%;
}
.top { text-align: center; padding: 18px 12px 6px; }
.top h1 { font-size: 28px; margin: 0 0 8px; }
.subjects { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.subject-tab {
  background: #fff; border: 2px solid #FFD6E7; color: var(--ink);
  border-radius: 20px; padding: 6px 16px; font-size: 16px; font-weight: 700;
  cursor: pointer;
}
.subject-tab.active { background: var(--pink); color: #fff; border-color: var(--pink); }

main { max-width: 520px; margin: 0 auto; padding: 12px 16px 40px; }
.card {
  background: #fff; border-radius: 24px; padding: 24px 20px; margin-top: 16px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.08); text-align: center;
}
.hidden { display: none; }
h2 { font-size: 22px; margin: 0 0 18px; }

.row { display: flex; align-items: center; gap: 10px; margin: 14px 0; text-align: left; flex-wrap: wrap; }
.lbl { font-weight: 700; min-width: 52px; color: #8A8AA8; }
.choices { display: flex; gap: 8px; flex-wrap: wrap; flex: 1; }
.chip {
  background: #F2F4FF; border: 2px solid transparent; color: var(--ink);
  border-radius: 16px; padding: 10px 14px; font-size: 16px; font-weight: 700; cursor: pointer;
}
.chip.active { background: var(--blue); color: #fff; }

.big-btn {
  width: 100%; margin-top: 18px; background: var(--green); color: #fff;
  border: none; border-radius: 18px; padding: 16px; font-size: 20px; font-weight: 800;
  cursor: pointer; box-shadow: 0 4px 0 #2BA862;
}
.big-btn:active { transform: translateY(2px); box-shadow: 0 2px 0 #2BA862; }
.best { margin-top: 14px; color: #B0B0C8; font-size: 14px; }

.progress { font-size: 16px; color: #B0B0C8; font-weight: 700; }
.question { font-size: 48px; font-weight: 900; margin: 24px 0; letter-spacing: 2px; }
.answer-input {
  width: 100%; font-size: 40px; text-align: center; font-weight: 800;
  border: 3px solid #E5E7F0; border-radius: 16px; padding: 12px; color: var(--ink);
}
.answer-input:focus { outline: none; border-color: var(--blue); }
.feedback { font-size: 28px; font-weight: 900; min-height: 40px; margin-top: 14px; }
.feedback.ok { color: var(--green); }
.feedback.no { color: var(--red); }

.result-emoji { font-size: 64px; }
.score { font-size: 40px; font-weight: 900; color: var(--blue); margin: 10px 0; }
.stars { font-size: 36px; margin-bottom: 8px; }