:root {
  font-family:'Nunito','Noto Sans KR',sans-serif;
  font-synthesis:none;
  color:#493c38;
  background:#fffaf7;
  --pink:#ad3b68;
  --pink-soft:#faeaf0;
  --mint:#2a7163;
  --line:#e8ddd7;
  --muted:#796d66;
}
* { box-sizing:border-box; }
body { margin:0; font-size:16px; line-height:1.6; }
button,input,a { font:inherit; }
button,a { touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
button { color:inherit; cursor:pointer; }
button:disabled { cursor:default; opacity:.45; }
button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible { outline:3px solid #378e83; outline-offset:4px; }
a { color:var(--pink); }
h1,h2,h3,p { margin:0; }
button { border:0; }
button:hover:not(:disabled) { filter:brightness(.98); }
.page { max-width:1120px; margin:auto; padding:0 28px; }
.skip-link { position:absolute; left:14px; top:-80px; z-index:20; padding:10px 20px; background:white; border:2px solid currentColor; border-radius:12px; }
.skip-link:focus { top:14px; }
.site-header { display:flex; justify-content:space-between; align-items:center; gap:24px; padding:26px 0; }
.brand { text-decoration:none; color:#493c38; display:flex; flex-direction:column; line-height:1.4; }
.brand strong { font-size:27px; letter-spacing:-.6px; font-weight:900; }
.brand-dot { font-size:18px; margin-left:3px; color:#dc8bab; }
.brand>span { font-size:11px; color:var(--muted); }
.practice-link { display:flex; align-items:center; gap:9px; min-height:44px; padding:10px 17px; border-radius:24px; background:#eef7f2; color:var(--mint); border:1px solid #cfe2d9; text-decoration:none; font-size:13px; font-weight:700; }
.practice-link small { font-size:11px; font-weight:600; }
.welcome { display:flex; align-items:center; justify-content:space-between; gap:24px; margin:4px 0 30px; padding:32px 38px; border:1px solid #efdee4; border-radius:28px; background:linear-gradient(110deg,#fbeaf0,#f4f1f4 60%,#eaf5ef); }
.welcome .welcome-korean { color:#98516b; font-size:14px; font-weight:700; margin:0 0 6px; }
.welcome h1 { font-size:39px; font-weight:900; line-height:1.2; letter-spacing:-1px; }
.welcome h1>span { color:var(--pink); }
.welcome .welcome-note { color:#7b656a; font-size:12px; margin-top:14px; }
.welcome-note>span { margin-right:9px; }
.welcome-mark { display:grid; place-items:center; width:110px; height:110px; flex-shrink:0; border-radius:40% 55% 45% 50%; background:#ffffff80; color:#b87694; font-size:68px; font-weight:700; transform:rotate(8deg); }
.learning { padding:0 0 48px; outline:none; scroll-margin-top:20px; }
.collection-menu { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:10px; margin-bottom:34px; }
.collection-button { display:flex; flex-direction:column; justify-content:center; align-items:center; gap:4px; min-height:70px; min-width:0; padding:10px 6px; background:#fffdfa; border:1px solid var(--line); border-radius:18px; line-height:1.4; }
.collection-name { font-size:13px; font-weight:700; word-break:keep-all; }
.collection-button small { font-size:10px; color:var(--muted); }
.collection-button[aria-pressed=true] { background:var(--pink-soft); border-color:#d896b1; color:#9c345f; }
.collection-button[aria-pressed=true] small { color:#9c345f; }
.deck { scroll-margin-top:18px; outline:none; border-top:1px solid var(--line); padding-top:28px; }
.browse-controls { display:flex; align-items:center; justify-content:space-between; gap:24px; margin-bottom:22px; }
#deck-title { font-size:21px; font-weight:800; line-height:1.4; }
#deck-title small { display:block; color:var(--muted); font-size:13px; font-weight:600; margin-top:4px; }
.search-field { display:flex; flex-direction:column; gap:7px; min-width:0; width:280px; }
.field-label,.search-field>span { font-size:12px; font-weight:700; color:#6f5e56; }
.field-label small,.search-field small { margin-left:6px; font-size:11px; font-weight:600; color:var(--muted); }
input[type=search] { width:100%; min-width:0; height:46px; border:1px solid var(--line); border-radius:15px; background:white; color:inherit; padding:0 12px; font-size:14px; }
.topic-buttons { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.topic-buttons button { min-height:44px; padding:8px 13px; border:1px solid var(--line); border-radius:22px; background:#fffdfa; font-size:12px; line-height:1.5; text-align:left; overflow-wrap:anywhere; }
.topic-buttons button[aria-pressed=true] { background:#eaf3ed; border-color:#a9cec0; color:#286457; }
input[type=search]::placeholder { color:#877a73; }
.practice-options { display:flex; justify-content:space-between; flex-wrap:wrap; align-items:center; gap:12px; margin-top:18px; }
.practice-options:empty { display:none; }
.cue-toggle { display:flex; align-items:center; gap:7px; margin-left:auto; min-height:44px; padding:8px 11px; border-radius:16px; border:1px solid var(--line); background:transparent; font-size:12px; font-weight:600; }
.cue-toggle small { font-size:11px; }
.cue-toggle>span { font-size:10px; border-radius:12px; padding:2px 7px; background:#eee8e3; color:#6d5f56; }
.cue-toggle[aria-pressed=true]>span { background:#dcefe5; color:#236c61; }
.deck-intro { position:relative; display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin:24px 0 12px; color:var(--muted); font-size:12px; }
.deck-intro>p>span { margin-left:6px; }
.learning-help { flex-shrink:0; }
.learning-help summary { cursor:pointer; min-height:44px; padding:10px 0; }
.learning-help summary span { margin-left:4px; font-size:11px; }
.learning-help[open] { flex:1; }
.learning-help[open] p { padding:8px 0; max-width:560px; }
.deck-intro:has(.learning-help[open]) { flex-wrap:wrap; }
.deck-intro:has(.learning-help[open]) .learning-help { flex-basis:100%; padding:0 16px 10px; background:#f5eee9; border-radius:16px; }
.results-toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; padding-bottom:18px; }
.result-count { font-size:13px; color:var(--muted); }
.result-actions { display:flex; gap:8px; }
.result-actions button { min-height:44px; padding:8px 15px; border-radius:16px; background:white; border:1px solid var(--line); font-size:12px; font-weight:700; }
.result-actions button:first-child { color:var(--mint); }
.card-grid { display:grid; gap:24px 20px; align-items:stretch; }
.picture-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
.word-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
.wide-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
/* Comparison members stay consecutive in the ordinary grid without reserved slots. */

/* Grammar summaries keep their place while one inline panel holds the detail. */
.grammar-summary { position:relative; display:flex; flex:1; flex-direction:column; align-items:flex-start; justify-content:center; gap:8px; width:100%; min-width:0; min-height:160px; padding:24px 26px; border:1px solid #e3bcc7; border-radius:18px; background:#f7e9ed; color:var(--hazel-ink); text-align:left; overflow-wrap:anywhere; word-break:keep-all; }
.grammar-summary:hover { background:#f3dfe6; border-color:#c88da3; }
.grammar-summary[aria-expanded=true] { border-color:#ad6480; background:#f1dce4; box-shadow:inset 0 0 0 1px #ad6480; }
.grammar-summary::after { content:'⌄'; position:absolute; right:18px; bottom:10px; color:#82445c; font-family:Arial,sans-serif; font-size:22px; line-height:1; }
.grammar-summary[aria-expanded=true]::after { transform:rotate(180deg); }
.grammar-summary:focus-visible { outline:2px solid #9d4566; outline-offset:3px; }
.grammar-summary-meaning { font-size:15px; font-weight:600; line-height:1.6; color:#596572; }
.grammar-summary>.front-word,.grammar-summary-meaning { max-width:100%; padding-right:12px; }
.short-study .card-surface:has(.study-save) .grammar-summary { padding-top:52px; }
.grammar-study-deck { min-width:0; }
.grammar-study-deck .study-area { margin-top:0; padding-top:0; border-top:0; }
.grammar-study-screen { min-width:0; padding:24px; border:1px solid #e3bcc7; border-radius:22px; background:#fffaf7; color:var(--hazel-ink); overflow-wrap:anywhere; }
.grammar-inline-panel { grid-column:1 / -1; margin:0; }
#results:has(.grammar-summary) { overflow-anchor:none; }
.grammar-study-meaning { margin:0 0 22px; color:#596572; font-size:16px; line-height:1.6; }
.grammar-study-heading { display:flex; align-items:flex-start; gap:16px; justify-content:space-between; padding:0 0 18px; }
#grammar-study-title { min-width:0; margin:0; font-family:var(--font-display); font-size:32px; font-weight:400; line-height:1.5; color:var(--hazel-ink); }
#grammar-study-title:focus { outline:none; }
.grammar-inline-close { flex-shrink:0; min-height:44px; padding:8px 10px; border:1px solid #e4becd; border-radius:14px; background:#fffdf9; color:#82445c; font-size:12px; font-weight:700; line-height:1.5; white-space:nowrap; }
.grammar-inline-close:hover { background:#f8e9ef; }
.grammar-inline-close:focus-visible { outline:2px solid #9d4566; outline-offset:3px; }
.grammar-inline-close>span[aria-hidden] { margin-right:3px; font-size:18px; line-height:1; }
.grammar-study-section-title { display:flex; flex-wrap:wrap; align-items:baseline; gap:8px; margin:0 0 14px; font-size:16px; font-weight:700; line-height:1.6; color:#82445c; }
.grammar-study-section-title>span[lang=en] { font-size:14px; font-weight:600; color:#596572; }
.grammar-study-rules { padding-top:0; }
.grammar-study-rules ul { display:grid; gap:0; margin:0; padding:0; list-style:none; border:1px solid #ead5df; border-radius:14px; overflow:hidden; background:#fcf5f7; }
.grammar-study-rule { display:grid; gap:8px; min-width:0; font-size:14px; line-height:1.65; }
.grammar-study-rules .grammar-study-rule { padding:12px 16px; }
.grammar-study-rules .grammar-study-rule+.grammar-study-rule { border-top:1px solid #ead5df; }
.grammar-study-rule-choice { display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 10px; min-width:0; }
.grammar-study-condition { min-width:0; font-size:14px; line-height:1.65; color:#506e65; }
.grammar-study-form { min-width:0; font-size:16px; color:#315b52; }
.grammar-study-formation { display:block; min-width:0; font-size:14px; line-height:1.65; color:#596572; }
.grammar-study-example-section { margin-top:24px; }
.grammar-study-heading+.grammar-study-example-section { margin-top:0; }
.grammar-study-examples { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.grammar-study-examples:has(.grammar-study-example:only-child) { grid-template-columns:1fr; }
.grammar-study-example { display:flex; min-width:0; flex-direction:column; align-items:stretch; gap:12px; padding:18px; border:1px solid #ead5df; border-radius:16px; background:#f9eef2; }
.grammar-study-example-form { margin:0; font-family:var(--font-display); font-size:24px; font-weight:400; line-height:1.5; color:var(--hazel-ink); }
.grammar-study-example-form .grammar-study-form { font:inherit; color:inherit; }
.grammar-study-example-label { margin:0; font-size:16px; font-weight:700; line-height:1.65; color:#82445c; }
.grammar-study-sentence { display:flex; flex:1; min-width:0; flex-direction:column; align-items:flex-start; gap:6px; }
.has-integrated-rule .grammar-study-sentence { margin-top:2px; padding-top:14px; border-top:1px solid #e5cfd9; }
.grammar-form-example { display:block; font-size:16px; line-height:1.75; color:var(--hazel-ink); white-space:pre-line; }
.grammar-form-translation { display:block; font-size:14px; line-height:1.65; color:#506e65; }
.grammar-form-highlight { color:#82445c; font-weight:800; text-decoration:underline; text-underline-offset:3px; }
.grammar-study-listen { margin-top:auto; align-self:flex-start; }
.grammar-study-speech-status:empty { margin:0; }
.grammar-study-notes { margin-top:24px; padding-top:18px; border-top:1px solid #ecdcd7; font-size:14px; line-height:1.65; color:#596572; }
.grammar-study-notes .grammar-study-section-title { margin-bottom:8px; }
.grammar-study-note { margin:0; }
@media(max-width:600px) {
 .grammar-summary { padding:22px; }
 .grammar-study-screen { padding:18px; }
 .grammar-study-heading { gap:8px; padding:0 0 16px; }
 #grammar-study-title { font-size:28px; }
 .grammar-inline-close { padding:8px; }
 .grammar-study-rules .grammar-study-rule { padding:10px 12px; }
 .grammar-study-examples { grid-template-columns:1fr; gap:14px; }
 .grammar-study-example { padding:16px; }
 .grammar-study-example-form { font-size:22px; }
}


/* Each grammar alternative is written in full; wrapping never shrinks the type. */
.grammar-notation-variant { display:inline-block; max-width:100%; vertical-align:top; white-space:normal; word-break:keep-all; overflow-wrap:anywhere; }
.grammar-notation-separator { font:inherit; white-space:pre; }

/* The flip button and audio button are siblings, never nested controls. */
.card-item { display:flex; flex-direction:column; min-width:0; gap:8px; }
.study-card { position:relative; width:100%; flex:1; perspective:1100px; border:0; background:transparent; padding:0; text-align:center; min-width:0; border-radius:22px; min-height:210px; }
.card-inner { display:grid; grid-template-areas:'card'; height:100%; transform-style:preserve-3d; transition:transform .42s cubic-bezier(.2,.7,.2,1); }
.is-flipped .card-inner { transform:rotateY(180deg); }
.card-face { grid-area:card; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:8px; min-width:0; border:1px solid #ecdcd7; border-radius:22px; padding:26px 18px; backface-visibility:hidden; -webkit-backface-visibility:hidden; overflow-wrap:anywhere; word-break:keep-all; line-height:1.6; }
.card-front { background:#fcf0ef; }
.card-back { transform:rotateY(180deg); background:#eaf5ef; border-color:#c1dace; }
.word-emoji { font-size:56px; line-height:1.3; }
.picture-clue { font-size:15px; font-weight:700; margin-top:8px; }
.back-word { font-size:27px; font-weight:800; color:#245c54; line-height:1.45; letter-spacing:-.5px; }
.back-meaning { font-size:15px; color:#42645e; font-weight:600; }
.text-card .card-front,.text-card .card-back { align-items:flex-start; text-align:left; padding:26px; min-height:245px; }
.front-word { font-size:23px; line-height:1.55; font-weight:800; letter-spacing:-.25px; color:#493c45; }
.text-card .back-word { font-size:23px; }
.example-sentence { font-size:16px; color:#315b52; line-height:1.75; padding-top:12px; border-top:1px solid #c9ded2; margin-top:4px; width:100%; }
.usage-note { font-size:14px; line-height:1.65; color:#506e65; }
.connector-example { white-space:pre-line; }
.connector-highlight { font-weight:800; color:#245c54; }
.card-prompt { font-size:13px; color:#766672; margin-top:5px; }
.tone-lavender .card-front { background:#f0edf8; border-color:#ded7ec; }
.tone-aqua .card-front { background:#eaf6f6; border-color:#cde4e4; }
.tone-peach .card-front { background:#fcf1e5; border-color:#edddca; }
.tone-mint .card-front { background:#eef5eb; border-color:#d8e4d0; }
.tone-pink .text-card .card-front { background:#faecf2; border-color:#ead5e0; }
.card-audio { display:flex; justify-content:center; }
.listen-button { min-height:44px; max-width:100%; padding:7px 13px; border:1px solid transparent; border-radius:20px; background:transparent; color:var(--mint); font-size:12px; font-weight:700; line-height:1.4; }
.listen-button:hover:not(:disabled) { background:#eaf3ed; }
.listen-button[aria-pressed=true] { background:var(--mint); color:white; }
.speech-note { font-size:12px; color:var(--muted); margin:0 0 12px; }
.speech-status { font-size:13px; color:#983258; overflow-wrap:anywhere; }
.speech-status:not(:empty) { margin:0 0 14px; padding:12px 16px; background:#faeaf0; border-radius:15px; }
.empty-state { text-align:center; padding:45px 20px; border:1px dashed #d9c8c1; border-radius:22px; background:white; }
.empty-state h3 { font-size:23px; }
.empty-state p { margin:10px 0 18px; color:var(--muted); }
.primary-button { min-height:44px; background:var(--pink); color:white; padding:11px 20px; border-radius:22px; font-weight:700; }
.site-footer { display:flex; align-items:center; justify-content:space-between; gap:24px; border-top:1px solid var(--line); padding:30px 0 40px; font-size:12px; color:var(--muted); }
.footer-credit { display:grid; gap:4px; color:#796d67; font-size:12px; line-height:1.6; }
.footer-credit small { font-size:11px; }
.site-footer a { text-decoration:none; min-height:44px; padding:4px 0; text-align:right; color:#796056; }
.site-footer a>span { display:block; font-size:11px; }
@media(max-width:900px) {
  .collection-menu { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .picture-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .word-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:600px) {
  .page { padding:0 18px; }
  .site-header { gap:12px; padding:20px 0; }
  .brand strong { font-size:24px; }
  .brand>span>span { display:none; }
  .practice-link { flex-direction:column; gap:0; padding:7px 13px; font-size:12px; border-radius:20px; }
  .practice-link small { font-size:10px; }
  .welcome { margin:0 0 22px; padding:25px 22px; border-radius:24px; }
  .welcome .welcome-korean { font-size:12px; }
  .welcome h1 { font-size:29px; letter-spacing:-.8px; }
  .welcome .welcome-note { font-size:11px; line-height:1.7; margin-top:12px; }
  .welcome-note>span { display:block; margin:0; }
  .welcome-mark { display:none; }
  .collection-menu { grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-bottom:24px; }
  .collection-button { min-height:72px; padding:9px 5px; border-radius:15px; }
  .collection-name { font-size:12px; }
  .collection-button small { font-size:10px; }
  .deck { padding-top:22px; }
  .browse-controls { flex-direction:column; align-items:stretch; gap:16px; margin-bottom:18px; }
  #deck-title { font-size:20px; }
  #deck-title small { display:inline; margin-left:9px; font-size:12px; }
  .search-field { gap:5px; width:100%; }
  .topic-buttons { gap:6px; }
  .topic-buttons button { padding:8px 11px; font-size:11px; }
  .practice-options { gap:8px; margin-top:12px; }
  .deck-intro { margin:16px 0 4px; font-size:11px; }
  .deck-intro>p>span { display:block; margin:0; font-size:10px; }
  .results-toolbar { padding-bottom:14px; }
  .result-actions button { padding:8px 12px; }
  .card-grid { gap:18px 12px; }
  .picture-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .word-grid,.wide-grid { grid-template-columns:1fr; }
  .study-card { min-height:170px; border-radius:20px; }
  .card-face { border-radius:20px; padding:20px 12px; }
  .word-emoji { font-size:49px; }
  .back-word { font-size:25px; }
  .text-card .card-front,.text-card .card-back { min-height:220px; padding:24px; }
  .learning { padding-bottom:34px; }
  .site-footer { flex-wrap:wrap; gap:12px; padding:25px 0; }
}
@media(max-width:360px) {
  .page { padding:0 14px; }
  .welcome h1 { font-size:26px; }
  .welcome { padding:23px 18px; }
  .collection-name { font-size:11px; }
  .collection-button small { font-size:9px; }
  .practice-link { padding:7px 10px; }
  .result-actions { gap:5px; }
  .result-actions button { padding:8px 10px; }
  .study-card { min-height:160px; }
  .word-emoji { font-size:44px; }
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after { transition:none!important; animation:none!important; scroll-behavior:auto!important; }
}

/* Beginner courses include phrases: the text is the cue, with a small supporting icon. */
.lesson-word-icon { font-size:35px; line-height:1.3; margin-bottom:8px; }
.lesson-card .front-word { font-size:20px; font-weight:700; }
.lesson-card .front-word[lang=ko] { font-size:24px; }
.lesson-card .back-word[lang=en] { font-size:20px; letter-spacing:0; }
.lesson-buttons { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); }
.lesson-buttons button { border-radius:15px; min-width:0; }
.grammar-books button { display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:2px; }
.grammar-books button small { font-size:11px; font-weight:400; }
@media(max-width:900px) { .lesson-buttons { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media(max-width:600px) {
  .lesson-buttons { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .lesson-card .front-word,.lesson-card .back-word[lang=en] { font-size:17px; }
  .lesson-card .front-word[lang=ko] { font-size:21px; }
  .lesson-card .card-face { padding:20px 13px; }
}

/* Course buttons keep both available stages visible without adding another main menu. */
.course-picker { display:flex; flex-wrap:wrap; gap:8px; margin:4px 0 14px; }
.course-picker button { display:flex; align-items:center; gap:8px; min-height:44px; border:1px solid var(--line); border-radius:18px; padding:10px 16px; background:#fffdfa; color:#6f5e56; font-size:14px; font-weight:700; }
.course-picker button small { font-size:11px; font-weight:500; }
.course-picker button[aria-pressed=true] { background:#f9e8ef; border-color:#dfa3bc; color:#9e3c65; }
.word-usage { color:#506e65; font-size:14px; line-height:1.6; margin-top:6px; }
@media(max-width:600px) {
  .course-picker button { padding:9px 12px; gap:6px; }
  .course-picker button small { font-size:10px; }
  .word-usage { font-size:13px; }
}

.reaction-dialogue { white-space:pre-line; }
/* Public topics remain complete; student topics keep the same quiet grid. */
/* Muted surfaces indicate student access; keep readable text and keyboard access. */
.collection-menu .requires-code,.course-picker .requires-code,.topic-buttons .requires-code { position:relative; background:#f1eeeb; border-color:#e2ddd8; color:#716a65; }
.collection-menu .requires-code small,.course-picker .requires-code small { color:#716a65; }
.collection-menu .requires-code .collection-name>span:first-child { filter:grayscale(1); }
.collection-menu .requires-code[aria-pressed=true],.course-picker .requires-code[aria-pressed=true],.topic-buttons .requires-code[aria-pressed=true] { border-color:#a99e94; background:#e9e3de; color:#625b56; }
.collection-menu .requires-code:hover,.course-picker .requires-code:hover,.topic-buttons .requires-code:hover { border-color:#b6a89e; }
.access-lock { width:15px; height:15px; flex-shrink:0; color:currentColor; }
.collection-menu .access-lock { position:absolute; top:7px; right:7px; width:12px; height:12px; }
.topic-buttons .requires-code { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.topic-buttons .requires-code>span { min-width:0; }
.course-picker .requires-code { gap:8px; }
.collection-menu .requires-code { padding-left:14px; padding-right:14px; }
/* A quiet next step within the lesson, without a second promotional panel. */
.locked-learning { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:20px 32px; padding:32px 0; }
.locked-learning p { display:flex; flex-direction:column; gap:3px; color:var(--muted); font-size:14px; line-height:1.6; }
.locked-learning p span[lang=en] { font-size:13px; }
.locked-access-button { display:flex; align-items:center; justify-content:center; gap:8px; min-height:44px; padding:10px 18px; border:1px solid #e4becd; border-radius:16px; background:var(--pink-soft); color:#954260; font-size:14px; font-weight:700; }
.locked-access-button small { font-size:12px; font-weight:400; }
@media(max-width:480px) {
  .locked-learning { flex-direction:column; gap:16px; padding:28px 0; text-align:center; }
}

/* Keep grammar hierarchy and search recovery visually quiet. */
.study-area { scroll-margin-top:18px; outline:none; }
.grammar-books button>span { display:flex; flex-direction:column; }
.topic-buttons.grammar-books .requires-code { flex-direction:row; }
.empty-state h3 small { display:block; font-size:14px; font-weight:400; margin-top:4px; }
.empty-state .primary-button small { display:block; font-size:12px; font-weight:400; }

/* Explicit NEW labels remain readable on both sides of recent cards. */
.new-card-badge { position:absolute; top:14px; right:14px; z-index:1; display:inline-flex; align-items:center; justify-content:center; min-width:54px; height:28px; padding:0 12px; border-radius:999px; background:var(--hazel-rose,#8d3e5b); color:#fffaf7; font:800 12px/1 var(--font-body,'Nunito',sans-serif); letter-spacing:.06em; white-space:nowrap; }
.study-card.has-new-card .card-face { padding-top:56px; }
.results-toolbar:has(.new-card-legend) { flex-wrap:wrap; }
.results-meta { display:flex; align-items:center; flex-wrap:wrap; gap:8px 12px; min-width:0; }
.new-card-legend { display:inline-flex; align-items:center; gap:7px; color:var(--muted,#796d66); font-size:12px; line-height:1.5; white-space:nowrap; }
.new-card-legend>span { display:inline-flex; align-items:center; justify-content:center; min-width:44px; height:24px; padding:0 9px; border-radius:999px; background:var(--hazel-rose,#8d3e5b); color:#fffaf7; font-size:11px; font-weight:800; letter-spacing:.05em; }
.reaction-context { padding-top:8px; border-top:1px dashed #dccbd0; }

/* Describe added cards, so this cannot be mistaken for a new collection. */
.collection-button .collection-update { display:inline-flex; align-items:center; justify-content:center; align-self:flex-start; max-width:calc(100% - 22px); margin:5px 0 0 22px; padding:3px 7px; border:1px solid #dfb2c0; border-radius:999px; background:#fff6f8; color:var(--hazel-rose,#8d3e5b); font-size:10px; font-weight:800; line-height:1.4; white-space:nowrap; }
@media(max-width:760px) {
  .collection-button .collection-update { align-self:center; max-width:100%; margin-left:0; padding:3px 5px; }
}

/* Recording controls share the existing 44px touch target and calm palette. */
.listen-button.recording-button { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-width:176px; padding:10px 16px; border-color:#e3bcc9; background:#fff6f8; color:var(--hazel-rose,#8d3e5b); font-size:14px; }
.listen-button.recording-button:hover:not(:disabled) { background:#faeaf0; }
.listen-button.recording-button[aria-pressed=true] { border-color:var(--hazel-rose,#8d3e5b); background:var(--hazel-rose,#8d3e5b); color:#fff; }
.listen-button.recording-button:focus-visible { outline:2px solid var(--hazel-rose,#8d3e5b); outline-offset:3px; }
.recording-button .audio-icon { width:16px; height:16px; flex:none; }
.listen-button[data-playback=loading] { background:#faeaf0; color:var(--ink); }
.listen-button[data-playback=loading]::before { content:''; display:inline-block; width:10px; height:10px; margin-right:7px; border:2px solid currentColor; border-right-color:transparent; border-radius:50%; vertical-align:-1px; animation:audio-loading .8s linear infinite; }
.listen-button.recording-button[data-playback=loading]::before { width:12px; height:12px; margin-right:0; flex:none; }
@keyframes audio-loading { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce) { .listen-button[data-playback=loading]::before { animation:none; } }

/* Reviewed word examples keep the English meaning above a bilingual example. */
.has-word-example .card-back .lesson-word-icon { display:none; }
.word-example { display:block; width:100%; padding-top:14px; margin-top:6px; border-top:1px solid #dbc8d0; text-align:left; }
.word-example-ko,.word-example-en { display:block; white-space:pre-line; font-family:system-ui,-apple-system,"Apple SD Gothic Neo","Malgun Gothic",sans-serif; font-weight:400; line-height:1.65; }
.word-example-ko { font-size:16px; color:#493c45; }
.word-example-ko strong { font-weight:700; }
.word-example-en { margin-top:9px; font-size:14px; color:#665b60; }
@media(max-width:600px) {
  .word-example-ko { font-size:15px; }
  .word-example-en { font-size:14px; }
}