:root {
  font-family: Pretendard, "Apple SD Gothic Neo", "Noto Sans KR", Inter, system-ui, sans-serif;
  color: #23372e;
  background: #f1eee7;
  font-synthesis: none;
  --green: #486b5b;
  --deep-green: #17372b;
  --orange: #db8152;
  --cream: #fffdf8;
  --line: #ded9cf;
}
* { box-sizing: border-box; }
body { min-width: 320px; min-height: 100vh; margin: 0; background: radial-gradient(circle at 78% 4%, rgba(221,158,95,.16), transparent 28rem), #f1eee7; }
button, input { font: inherit; }
button { color: inherit; }
.topbar { display: flex; width: min(1420px, calc(100% - 40px)); height: 76px; margin: 0 auto; align-items: center; gap: 14px; }
.back-link { display: grid; width: 38px; height: 38px; place-items: center; border: 1px solid #d6d0c5; border-radius: 12px; text-decoration: none; }
.brand { display: inline-flex; align-items: center; gap: 9px; color: inherit; text-decoration: none; }
.brand > span { display: grid; width: 32px; height: 32px; place-items: center; border-radius: 10px; color: #fff8e9; background: var(--green); font-size: 12px; font-weight: 900; }
.brand strong { font-size: 14px; letter-spacing: -.04em; }
.save-state { display: flex; align-items: center; gap: 8px; margin-left: auto; color: #7f857f; font-size: 11px; font-weight: 700; }
.save-state i { width: 7px; height: 7px; border-radius: 50%; background: #5da77f; box-shadow: 0 0 0 5px rgba(93,167,127,.1); }

.study-shell { display: grid; width: min(1420px, calc(100% - 40px)); min-height: calc(100vh - 106px); margin: 0 auto 30px; grid-template-columns: 230px minmax(500px, 1fr) 180px; overflow: hidden; border: 1px solid #d7d0c5; border-radius: 26px; background: rgba(255,253,248,.72); box-shadow: 0 24px 70px rgba(64,48,35,.12); }
.eyebrow { margin: 0; color: #a06d4f; font-size: 9px; font-weight: 900; letter-spacing: .18em; }
.session-panel { display: flex; min-width: 0; flex-direction: column; padding: 47px 28px 32px; color: #f9f4e9; background: var(--deep-green); }
.session-panel h1 { margin: 13px 0 44px; font-size: 40px; line-height: 1.1; letter-spacing: -.07em; }
.wave-meta { display: flex; align-items: end; justify-content: space-between; }
.wave-meta span { color: #e4b36d; font-size: 10px; font-weight: 900; letter-spacing: .13em; }
.wave-meta strong { font-size: 13px; }
.progress-track { height: 5px; margin-top: 13px; overflow: hidden; border-radius: 10px; background: rgba(255,255,255,.12); }
.progress-track i { display: block; width: 0; height: 100%; border-radius: inherit; background: #e3a15f; transition: width 240ms ease; }
.word-steps { display: grid; gap: 8px; margin: 26px 0 0; padding: 0; list-style: none; }
.word-steps li { display: flex; min-width: 0; align-items: center; gap: 10px; padding: 9px 11px; border-radius: 10px; color: rgba(255,255,255,.45); font-size: 11px; }
.word-steps b { display: grid; width: 22px; height: 22px; flex: 0 0 auto; place-items: center; border-radius: 50%; background: rgba(255,255,255,.09); font-size: 8px; }
.word-steps span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.word-steps .is-current { color: #17372b; background: #f1e8d8; font-weight: 900; }
.word-steps .is-current b { color: white; background: var(--orange); }
.word-steps .is-done { color: rgba(255,255,255,.7); }
.word-steps .is-done b { color: white; background: #4f8f70; }
.session-tip { display: flex; gap: 10px; margin-top: auto; padding-top: 28px; border-top: 1px solid rgba(255,255,255,.1); color: rgba(255,255,255,.58); }
.session-tip > span { color: #e4b36d; }
.session-tip p { margin: 0; font-size: 10px; line-height: 1.65; }
.session-tip strong { display: block; margin-bottom: 3px; color: rgba(255,255,255,.85); }

.learning-stage { display: grid; min-width: 0; place-items: center; padding: 42px; background: radial-gradient(circle at 50% 42%, #fff, #f4f1eb 74%); }
.question-card { width: min(100%, 720px); min-height: 580px; overflow: hidden; border: 1px solid #ddd8ce; border-radius: 24px; background: var(--cream); box-shadow: 0 18px 50px rgba(68,52,39,.1); }
.question-header { display: flex; min-height: 76px; align-items: center; justify-content: space-between; gap: 18px; padding: 18px 26px; border-bottom: 1px solid #e8e3da; }
.question-header div { display: flex; align-items: center; gap: 10px; }
.question-header div > span { font-size: 11px; font-weight: 900; }
.question-header small { padding: 5px 8px; border-radius: 6px; color: #557165; background: #e7eee9; font-size: 8px; font-weight: 900; letter-spacing: .08em; }
.question-header > span { overflow: hidden; color: #8b918d; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.question-content { display: flex; min-height: 503px; flex-direction: column; justify-content: center; padding: 42px 48px 48px; }
.prompt { margin-bottom: 34px; text-align: center; }
.kicker { margin: 0 0 16px; color: #768078; font-size: 12px; font-weight: 750; }
.prompt h2 { margin: 0; font-size: clamp(40px, 5vw, 64px); letter-spacing: -.06em; }
.context { margin: 17px auto 0; color: #858c87; font-size: 13px; line-height: 1.65; }
.choices { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.choice, .ox-actions button, .letter, .secondary-button { min-height: 62px; border: 1px solid #dcd8cf; border-radius: 13px; background: white; cursor: pointer; font-size: 14px; font-weight: 750; transition: transform 140ms ease, border-color 140ms ease, background 140ms ease; }
.choice:hover, .choice:focus-visible, .ox-actions button:hover, .letter:hover { border-color: #71907f; outline: none; background: #f0f5f1; transform: translateY(-2px); }
.choice strong, .choice small { display: block; }
.choice small { margin-top: 4px; color: #89908b; font-size: 10px; }
.choice-key { display: inline-grid; width: 20px; height: 20px; margin-right: 7px; place-items: center; border-radius: 5px; color: #7e8781; background: #f0eee9; font-size: 8px; }
.ox-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ox-actions button { min-height: 90px; font-size: 30px; }
.ox-meaning { margin: 20px 0 0; color: #d17448; font-size: 22px; font-weight: 900; }
.answer-form { display: flex; gap: 9px; }
.answer-form input { width: 100%; min-width: 0; height: 62px; padding: 0 18px; border: 1px solid #d8d3ca; border-radius: 13px; background: white; outline: none; font-size: 17px; }
.answer-form input:focus { border-color: #567967; box-shadow: 0 0 0 4px rgba(86,121,103,.1); }
.primary-button { min-width: 112px; border: 0; border-radius: 13px; color: white; background: var(--green); cursor: pointer; font-weight: 900; }
.listen-button { display: inline-flex; min-height: 54px; align-items: center; justify-content: center; padding: 0 22px; border: 0; border-radius: 99px; color: white; background: var(--green); cursor: pointer; font-weight: 850; }
.letters { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.letter { width: 50px; min-height: 52px; font-size: 18px; text-transform: uppercase; }
.letter:disabled { opacity: .25; transform: translateY(3px); }
.scramble-answer { min-height: 54px; margin: 18px 0 0; color: #355e4c; font-family: ui-monospace, monospace; font-size: 30px; font-weight: 900; letter-spacing: .16em; }
.scramble-actions { display: flex; justify-content: center; gap: 9px; margin-top: 18px; }
.secondary-button { min-height: 48px; padding: 0 18px; }
.feedback { padding: 24px 28px 28px; border-top: 1px solid #d9e6dc; background: #eef6f0; }
.feedback.is-wrong { border-color: #eed4c4; background: #fff2e9; }
.feedback strong, .feedback span { display: block; }
.feedback strong { margin-bottom: 5px; font-size: 18px; }
.feedback span { color: #68766e; font-size: 12px; }
.feedback button { width: 100%; min-height: 48px; margin-top: 18px; border: 0; border-radius: 11px; color: white; background: var(--green); cursor: pointer; font-weight: 900; }
.question-card.has-feedback .question-content { min-height: 358px; }
.summary { display: flex; min-height: 420px; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.summary-mark { display: grid; width: 62px; height: 62px; place-items: center; border-radius: 50%; color: white; background: var(--green); font-size: 24px; }
.summary h2 { margin: 22px 0 9px; font-size: 30px; letter-spacing: -.05em; }
.summary > p { margin: 0; color: #7c847e; font-size: 13px; }
.summary-stats { display: grid; width: min(100%, 420px); grid-template-columns: repeat(3, 1fr); margin: 30px 0; padding: 20px 0; border: solid #e6e1d8; border-width: 1px 0; }
.summary-stats strong, .summary-stats span { display: block; }
.summary-stats strong { font-size: 25px; }.summary-stats span { margin-top: 4px; color: #858c87; font-size: 9px; }

.study-stats { padding: 47px 24px; border-left: 1px solid #e2ddd4; background: rgba(255,255,255,.52); }
.study-stats > div { padding: 22px 0; border-bottom: 1px solid #e4dfd7; }
.study-stats strong, .study-stats span { display: block; }
.study-stats strong { font-size: 29px; letter-spacing: -.05em; }.study-stats div span { margin-top: 3px; color: #858b87; font-size: 10px; font-weight: 750; }
.shortcut-note { margin: 28px 0 0; color: #888e8a; font-size: 10px; line-height: 1.6; }
kbd { padding: 2px 5px; border: 1px solid #d5d0c7; border-bottom-width: 2px; border-radius: 4px; background: white; font: inherit; }
.toast { position: fixed; right: 22px; bottom: 22px; z-index: 20; padding: 13px 17px; border-radius: 10px; color: white; background: #19392d; box-shadow: 0 12px 30px rgba(0,0,0,.18); font-size: 12px; font-weight: 800; }

@media (max-width: 1050px) {
  .study-shell { grid-template-columns: 200px 1fr; }
  .study-stats { display: none; }
}
@media (max-width: 740px) {
  .topbar { width: calc(100% - 24px); }
  .save-state span { display: none; }
  .study-shell { display: block; width: calc(100% - 24px); min-height: 0; overflow: visible; }
  .session-panel { padding: 25px 22px 22px; border-radius: 24px 24px 0 0; }
  .session-panel h1, .session-tip { display: none; }
  .wave-meta { margin-top: 15px; }
  .word-steps { display: flex; margin-top: 17px; }
  .word-steps li { width: 100%; height: 5px; padding: 0; border-radius: 5px; background: rgba(255,255,255,.12); }
  .word-steps li b, .word-steps li span { display: none; }
  .word-steps .is-done { background: #62a07f; }.word-steps .is-current { background: #e4a25f; }
  .learning-stage { display: block; padding: 12px; }
  .question-card { min-height: 0; border-radius: 18px; }
  .question-header { padding: 15px 17px; }.question-header > span { max-width: 90px; }
  .question-content { min-height: 480px; padding: 34px 20px 36px; }
  .question-card.has-feedback .question-content { min-height: 330px; }
  .prompt h2 { font-size: 42px; }
  .choices { grid-template-columns: 1fr; }
  .choice { min-height: 54px; }
  .feedback { padding: 20px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: .01ms !important; } }