/* Official unmodified fonts; binaries and licenses live outside Git. */
@font-face { font-family: 'Mellory Nanum Round'; src: url('/font/NanumSquareRound-Regular.otf') format('opentype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Mellory Nanum Round'; src: url('/font/NanumSquareRound-Bold.otf') format('opentype'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Mellory Nanum Round'; src: url('/font/NanumSquareRound-ExtraBold.otf') format('opentype'); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: 'Mellory Nunito Sans'; src: url('/font/NunitoSans-Variable.ttf') format('truetype'); font-weight: 200 1000; font-style: normal; font-display: swap; }
/* Mellory v1: tokens, foundations, shared components. Loaded after legacy CSS. */
:root {
  color-scheme: light;
  --mint: #f2fbf7; --teal: #00837e; --teal-dark: #006b67; --ink: #173e43; --muted: #5b747b;
  --lilac: #eee8ff; --lilac-ink: #5a479b; --peach: #ffe2d7; --peach-ink: #884831; --lemon: #ffe18a;
  --paper: #fff; --canvas: var(--mint); --green: var(--teal); --soft: #e2f5ef; --line: #d3e8e2; --gold: #9c6611;
  --radius-sm: 12px; --radius-card: 24px; --radius-pill: 999px;
  --shadow-card: 0 8px 28px #1b6e6410; --shadow-button: 0 4px 0 #006b6730;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px;
  --font-ui: 'Mellory Nunito Sans', 'Mellory Nanum Round', 'Apple SD Gothic Neo', 'Noto Sans KR', system-ui, sans-serif;
  --font-heading: var(--font-ui);
  --font-reading: 'Mellory Nunito Sans', 'Segoe UI', sans-serif;
}
[hidden] { display: none !important; }
body { font-family: var(--font-ui); background: var(--canvas); font-weight: 400; }
h1,h2,h3 { font-family: var(--font-heading); font-weight: 800; }
p { margin: 0 0 16px; } h1 { font-size: clamp(28px,3vw,40px); } h2 { font-size: 22px; }
.eyebrow { color: var(--teal-dark); font-size: 12px; font-weight: 750; letter-spacing: .06em; }
.icon { width: 24px; height: 24px; flex-shrink: 0; vertical-align: middle; }
:where(button,a,input,select,textarea,summary):focus-visible { outline: 3px solid var(--lilac-ink); outline-offset: 4px; }
button { transition: background-color .16s, box-shadow .16s, transform .16s; }
.primary,.secondary,.listen-button,.text-link { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; max-width: 100%; padding: 11px 20px; border-radius: var(--radius-pill); line-height: 1.5; text-decoration: none; font-weight: 650; }
.primary { background: var(--teal); border: 1px solid var(--teal); color: #fff; box-shadow: var(--shadow-button); }
.primary:hover:not(:disabled) { background: var(--teal-dark); transform: translateY(-1px); }
.primary:active:not(:disabled),.secondary:active:not(:disabled) { transform: translateY(2px); box-shadow: none; }
.secondary { background: var(--soft); color: var(--ink); border-color: var(--line); }
.secondary:hover:not(:disabled) { background: #d3eee5; }
.secondary[aria-pressed=true] { background: var(--teal); color: white; border-color: var(--teal); }
button:disabled { cursor: default; opacity: .6; box-shadow: none; }
.text-link { background: transparent; color: var(--teal-dark); border: 0; padding-inline: 8px; }
.text-link:hover { background: var(--soft); }
.inline-form { margin: 0; }
/* Keep wrapped labels and form-backed actions aligned within each row. */
.actions { gap: 12px; align-items: stretch; }
.actions > .inline-form { display: flex; flex: 0 1 auto; min-width: 0; }
.actions > .inline-form > button { flex: 1; }
.actions > .inline-form > button,.actions > button { justify-content: flex-start; text-align: left; }
.primary,.secondary { word-break: keep-all; }
/* Character portraits distinguish the main learning action. */
.primary:has(.action-avatar) { min-height: 62px; padding: 7px 20px 7px 8px; gap: 12px; }
.action-avatar { position: relative; display: block; width: 44px; height: 44px; flex: 0 0 44px; overflow: hidden; border: 2px solid white; border-radius: 50%; background: #e2f5ef; box-shadow: 0 2px 5px #004c4930; }
.action-avatar .character { position: absolute; width: 78px; max-width: none; height: auto; left: -17px; top: -4px; }
.action-label { min-width: 0; overflow-wrap: anywhere; }
select,textarea { border: 1px solid #9bbab4; border-radius: 12px; min-height: 48px; }textarea { min-height: 140px; }
.select-field { position: relative; width: 100%; }
.select-field::after { content: ''; position: absolute; right: 17px; top: calc(50% - 5px); width: 7px; height: 7px; border-right: 1.6px solid var(--teal-dark); border-bottom: 1.6px solid var(--teal-dark); transform: rotate(45deg); pointer-events: none; }
.select-field > select { appearance: none; -webkit-appearance: none; display: block; width: 100%; height: 44px; min-height: 44px; margin: 0; padding: 8px 44px 8px 14px; border: 1px solid transparent; border-radius: 10px; background: #f1f7f4; color: var(--ink); font-size: 14px; line-height: 1.4; cursor: pointer; box-shadow: none; }
.select-field > select:hover { background: #e8f3ee; }
.select-field > select:focus { outline: none; box-shadow: none; }
.select-field > select:focus-visible { outline: none; box-shadow: inset 0 0 0 1.5px var(--teal); }
.choice { padding: 16px 20px; border-radius: 16px; min-height: 56px; }.choice input { width: 20px; height: 20px; margin-top: 5px; }
.choice:hover { border-color: #8bbdb2; background: #f8fdfa; }
.surface-mint { background: var(--soft); }.surface-lilac { background: var(--lilac); }.surface-peach { background: var(--peach); }
.support,.feedback,.explanation,.next-step { padding: 24px; border-radius: 20px; margin: 24px 0; }.feedback { background: #e7f6ee; }
.validation { background: #fff1ce; border-radius: 16px; }.model { font-family: var(--font-reading); font-size: 24px; line-height: 1.75; }
.speech { border: 1.5px solid #5a8989; border-radius: 24px 24px 24px 5px; background: #ffffffed; padding: 14px 18px; font-size: 16px; font-weight: 650; line-height: 1.55; }
.character { display: block; object-fit: contain; height: auto; max-width: 100%; }
summary { min-height: 44px; padding-block: 8px; }pre { background: var(--soft); border-radius: 12px; }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }