/* Korean with Hazel — shared web identity. Sources: docs/hazel-brand.md. */
@font-face {
  font-family: 'Hazel Nunito'; src: url('./assets/brand/fonts/Nunito-SemiBold.ttf?v=6f61088d0df8') format('truetype');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'LeeSeoyun'; src: url('./assets/brand/fonts/LeeSeoyun.ttf?v=d9a5edc3d1b7') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
:root {
  color-scheme: light;
  --hazel-blue: #43546c; --hazel-ink: #253c50; --hazel-paper: #fbf8f1;
  --hazel-pink: #f3d7dc; --hazel-rose: #8d3e5b; --hazel-gold: #b99958;
  --ink: var(--hazel-ink); --muted: #626b74; --line: #e0ded8;
  --pink: var(--hazel-rose); --pink-soft: #f9e9ec; --rose: var(--hazel-rose);
  --mint: #34665c;
  --font-body: 'Hazel Nunito', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  --font-display: 'Hazel Nunito', 'LeeSeoyun', sans-serif;
  font-family: var(--font-body);
  font-synthesis: none; color: var(--ink); background: var(--hazel-paper);
}
body.access-page { font-family: inherit; color: var(--ink); background: var(--hazel-paper); }
button, input, select, textarea { font-family: inherit; }
a, button, input, summary { -webkit-tap-highlight-color: transparent; }
:is(button, a, input, summary):focus-visible { outline: 3px solid var(--hazel-blue); outline-offset: 4px; }
input:focus { outline-color: var(--hazel-blue); }
button { transition: background .16s, border-color .16s, color .16s; }
button:hover:not(:disabled) { filter: none; }
.page { max-width: 1240px; padding: 0 40px; }
.site-header, .topbar, .access-header { gap: 20px; padding-top: 18px; padding-bottom: 18px; }
.site-header .brand, .topbar .brand { margin-right: auto; }
.brand, .access-brand { display: flex; flex-direction: column; align-items: center; gap: 5px; text-decoration: none; flex-shrink: 0; }
.brand > .brand-art { margin: 0; }
.brand-art { position: relative; display: block; width: 180px; line-height: 0; }
.brand-art .brand-logo { display: block; width: 100%; height: auto; padding: 0; border-radius: 0; background: transparent; clip-path: polygon(0 0, 43% 0, 43% 40%, 100% 40%, 100% 100%, 0 100%); }
.brand-art .brand-wordmark { display: block; position: absolute; left: 43%; top: 23%; white-space: nowrap; font: 600 14px/1.2 var(--font-body); color: #86435c; letter-spacing: 0; }

.practice-link, .back-link { display: flex; align-items: center; justify-content: center; gap: 9px; width: auto; white-space: nowrap; flex-shrink: 0; font: 700 13px/1.6 var(--font-body); min-height: 44px; padding: 11px 16px; border: 1px solid #e3bdc8; border-radius: 14px; background: #fff9fa; color: var(--hazel-ink); text-decoration: none; }
.back-link > span { font-size: inherit; margin: 0; color: inherit; }
.practice-link small, .back-link small { font-size: 11px; font-weight: 600; color: inherit; }
.practice-link:hover, .back-link:hover { background: var(--pink-soft); }
.welcome { position: relative; isolation: isolate; overflow: hidden; min-height: 180px; margin: 0 0 28px; padding: 12px 40px; gap: 28px; justify-content: center; border: 1px solid #edd2d9; border-radius: 24px; background: var(--hazel-paper); color: var(--hazel-ink); }
.welcome::before { content: ''; position: absolute; z-index: -1; width: 350px; height: 350px; top: -230px; left: -110px; border-radius: 50%; background: #f3d7dc; }
.welcome::after { content: ''; position: absolute; z-index: -1; width: 200px; height: 200px; right: -80px; bottom: -140px; border-radius: 50%; background: #f3d7dc; }
.welcome .welcome-korean { font: 400 27px/1.25 var(--font-display); color: var(--hazel-rose); margin-bottom: 5px; }
.welcome h1 { font: 600 clamp(26px, 3vw, 36px)/1.2 var(--font-body); letter-spacing: -.6px; }
.welcome h1 > span { color: var(--hazel-blue); }
.welcome .welcome-note { color: #546170; font-size: 13px; line-height: 1.5; margin-top: 8px; }
.banner-character, .banner-seoul { position: relative; flex-shrink: 0; overflow: hidden; }
.banner-character { width: 125px; height: 155px; }
.banner-seoul { width: 170px; height: 155px; margin-left: 32px; }
.banner-character img, .banner-seoul img { position: absolute; width: 850px; max-width: none; height: auto; }
.banner-character img { left: -208px; top: -157px; }
.banner-landmark { position: absolute; top: 87px; left: 0; right: 0; bottom: 0; overflow: hidden; }
.banner-landmark img { left: -525px; top: -243px; }
.banner-hello, .banner-hangul { position: absolute; display: grid; place-items: center; font: 400 21px/1 var(--font-display); border-radius: 12px; }
.banner-hello { top: 20px; left: 45px; width: 75px; height: 34px; background: #b26d86; color: #fffaf7; }
.banner-hello::after { content: ''; position: absolute; bottom: -5px; right: 12px; border: 6px solid transparent; border-top-color: #b26d86; border-bottom: 0; }
.banner-hangul { top: 63px; left: 20px; width: 82px; height: 28px; background: var(--hazel-pink); color: #73475b; font-size: 18px; }
.learning { display: grid; grid-template-columns: 188px minmax(0, 1fr); gap: 32px; align-items: start; }
.collection-menu { grid-template-columns: 1fr; gap: 6px; margin: 0; position: sticky; top: 20px; }
.collection-button { align-items: flex-start; gap: 2px; min-height: 58px; padding: 10px 16px; border-radius: 14px; border-color: transparent; background: transparent; text-align: left; }
.collection-name { font-size: 13px; }
.collection-button small { padding-left: 22px; font-size: 11px; }
.collection-button:hover:not(:disabled) { background: #f0ede6; }
.collection-button[aria-pressed=true], .collection-button[aria-pressed=true]:hover { background: var(--hazel-pink); border-color: #ce95a6; color: var(--hazel-ink); }
.collection-button[aria-pressed=true] small { color: var(--hazel-ink); }
.deck { min-width: 0; border: 1px solid var(--line); background: #fffdf9; border-radius: 24px; padding: 28px; }
.browse-controls { gap: 18px; margin-bottom: 22px; }
#deck-title { font: 400 32px/1.2 var(--font-display); }
#deck-title small { font: 600 13px/1.5 'Hazel Nunito', sans-serif; letter-spacing: .2px; }
.search-field { width: 230px; }
.search-field > span { color: var(--ink); }
input[type=search] { border-radius: 12px; background: white; }
.course-picker { gap: 8px; padding-bottom: 4px; }
.course-picker button { border-radius: 12px; background: white; color: var(--muted); }
.course-picker button[aria-pressed=true] { background: var(--pink-soft); border-color: #d6a6b1; color: #81334f; }
.lesson-buttons { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.topic-buttons button { font-size: 12px; border-radius: 12px; padding: 10px 12px; background: #fffdf9; color: #495661; }
.topic-buttons button:hover { background: #f3f0ea; border-color: #b8bec6; }
.topic-buttons button[aria-pressed=true] { color: var(--hazel-ink); background: #f9e6ec; border-color: #cd98a9; box-shadow: inset 3px 0 #b66f87; }
.study-area { border-top: 1px solid var(--line); margin-top: 24px; padding-top: 4px; }
.cue-toggle { color: var(--ink); border-radius: 12px; }
.cue-toggle[aria-pressed=true] { background: var(--pink-soft); border-color: #d6a6b1; }
.deck-intro { color: var(--muted); }
.card-grid { gap: 20px 14px; }
.picture-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.card-face, [class*=tone-] .card-front, [class*=tone-] .text-card .card-front { background: #fcf6ee; border-color: #e8ddcc; color: var(--hazel-ink); border-radius: 18px; }
.card-back { background: #f7e9ed; border-color: #e3bcc7; }
.front-word, .back-word, .text-card .back-word { color: var(--hazel-ink); }
.front-word[lang=ko], .back-word[lang=ko], .lesson-card .front-word[lang=ko] { font-family: var(--font-display); font-size: 32px; font-weight: 400; line-height: 1.5; letter-spacing: 0; }
.back-meaning, .usage-note, .word-usage { color: #596572; }
.example-sentence { color: #344a5d; border-color: #dccbd0; }
.connector-highlight { color: var(--hazel-rose); }
.lesson-word-icon { font-size: 30px; }
.lesson-card .back-word[lang=en] { font-size: 20px; }
.card-prompt { color: var(--muted); }
.result-actions button { border-radius: 12px; color: var(--hazel-blue); }
.listen-button { color: var(--hazel-blue); }
.listen-button:hover:not(:disabled) { background: #e9edf2; }
.listen-button[aria-pressed=true] { background: var(--hazel-pink); color: var(--hazel-ink); }
.site-footer { margin-top: 8px; padding: 28px 0 36px; }
.footer-credit, .site-footer a, footer.footer-credit, .access-footer { color: var(--muted); }
.collection-menu .requires-code, .course-picker .requires-code, .topic-buttons .requires-code { background: #f0eeea; color: #626b74; border-color: #e1dfd9; }
.collection-menu .requires-code small, .course-picker .requires-code small { color: #626b74; }
.collection-menu .requires-code[aria-pressed=true], .course-picker .requires-code[aria-pressed=true], .topic-buttons .requires-code[aria-pressed=true] { color: var(--ink); border-color: #8998aa; background: #e9edf2; }
.locked-access-button, .primary-button { background: var(--hazel-pink); color: var(--hazel-ink); border-color: #ce95a6; }
/* Access styles can be injected after this sheet; keep these selectors explicit. */
body .access-exit { display: flex; align-items: center; justify-content: center; gap: 9px; color: var(--hazel-ink); border: 1px solid #e3bdc8; border-radius: 14px; min-height: 44px; padding: 11px 16px; background: #fff9fa; font: 700 13px/1.6 var(--font-body); }
body .access-exit small { font-size: 11px; font-weight: 600; }
body .access-exit:hover { background: var(--pink-soft); }
body .student-access-dialog { background: var(--hazel-paper); color: var(--ink); border-color: var(--line); }
body .student-access-dialog p, body .student-access-dialog h2 small { color: var(--muted); }
body .student-access-dialog .student-enter { background: var(--hazel-pink); border-color: #ce95a6; color: var(--hazel-ink); }
body .student-access-dialog :focus-visible { outline-color: var(--hazel-blue); }
.access-page .entry-card { background: #fffdf9; border-radius: 26px; box-shadow: 0 16px 48px #43546c08; border-top: 4px solid #db9db2; }
.entry-portrait { display: block; width: 88px; height: 88px; object-fit: contain; border-radius: 50%; margin-bottom: 22px; }
.entry-card h1 { font: 400 38px/1.3 var(--font-display); }
.entry-card h1 small { font: 600 15px/1.6 'Hazel Nunito', sans-serif; margin-top: 9px; }
.access-page .primary { background: var(--hazel-pink); border-color: #ce95a6; color: var(--hazel-ink); }
.access-page .preview-badge { background: #e9edf2; color: var(--hazel-blue); border-color: #cbd0d7; }
.access-page .code-state { background: #e5eee8; }
.access-page .code-state.stopped { background: #f1ece8; }
/* Keep instructional Hangul glyphs and stroke geometry in their original typeface. */
.topbar { max-width: 1240px; padding-left: 40px; padding-right: 40px; line-height: 1.6; }
.topbar + main { max-width: 1112px; }
.page-heading { padding: 16px 0 28px; }
.page-heading h1 { font: 400 38px/1.4 var(--font-display); color: var(--hazel-ink); }
.page-heading h1 span { font-family: 'Hazel Nunito', sans-serif; }
.group-tabs { background: #eeebe5; }
.group-tabs button[aria-pressed=true] { background: var(--hazel-pink); color: var(--hazel-ink); border-color: #ce95a6; }
.group-tabs button[aria-pressed=true] span { color: var(--hazel-ink); }
.group-tabs button[aria-pressed=true]:hover { background: var(--hazel-pink); }
.writing-panel, .sound-detail, .syllable-result, .choice-section { background: #fffdf9; }
.help summary { color: var(--muted); }
@media (max-width: 1000px) {
  .page { padding: 0 24px; }
  .topbar { padding-left: 24px; padding-right: 24px; }
  .learning { grid-template-columns: 160px minmax(0,1fr); gap: 20px; }
  .deck { padding: 22px; }
  .lesson-buttons { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .welcome { padding: 12px 24px; gap: 20px; }
  .banner-seoul { margin-left: 0; }
  .picture-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 760px) {
  .learning { display: block; }
  .collection-menu { position: static; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 7px; margin-bottom: 24px; }
  .collection-button { align-items: center; padding: 10px 5px; min-height: 68px; border-color: var(--line); background: #fffdf9; text-align: center; }
  .collection-button small { padding-left: 0; }
  .banner-seoul { display: none; }
  .deck { padding: 22px; }
  .site-header, .topbar { flex-wrap: wrap; }
  .site-header:has(.access-exit) .practice-link { margin-left: auto; }
  .site-header:has(.access-exit) .access-exit { margin-left: auto; }
}
@media (max-width: 600px) {
  .page { padding: 0 16px; }
  .site-header, .topbar, .access-header { gap: 10px; padding-top: 16px; padding-bottom: 16px; }
  .brand-art { width: 158px; }
  .brand-art .brand-wordmark { font-size: 12px; }
  .practice-link { padding: 8px 12px; border-radius: 12px; }
  .welcome { gap: 12px; min-height: 126px; padding: 14px 16px; margin: 0 0 22px; border-radius: 20px; align-items: center; justify-content: flex-start; }
  .welcome .welcome-korean { font-size: 21px; margin-bottom: 5px; }
  .welcome h1 { font-size: 23px; line-height: 1.15; letter-spacing: -.4px; }
  .welcome h1 > span { display: block; }
  .welcome .welcome-note { font-size: 11px; margin-top: 6px; max-width: 190px; }
  .banner-character { width: 70px; height: 104px; }
  .banner-character img { width: 570px; left: -144px; top: -106px; }
  .welcome::before { width: 180px; height: 180px; left: -130px; top: -140px; }
  .welcome::after { width: 160px; height: 160px; right: -90px; bottom: -120px; }
  .site-header:has(.access-exit), .topbar:has(.access-exit) { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 6px 10px; }
  .site-header:has(.access-exit) .brand, .topbar:has(.access-exit) .brand { grid-row: 1 / 3; }
  .site-header .practice-link, .topbar .back-link { justify-self: end; }
  body .site-header .access-exit, body .topbar .access-exit { flex-direction: column; gap: 0; white-space: normal; font-size: 12px; padding: 8px 12px; justify-self: end; border-radius: 12px; }
  body .access-exit small { font-size: 10px; }
  .collection-name { font-size: 12px; }
  .collection-button small { font-size: 10px; }
  .deck { padding: 20px 14px; border-radius: 20px; }
  #deck-title { font-size: 30px; }
  #deck-title small { display: inline-block; font-size: 12px; }
  .search-field { width: 100%; }
  input[type=search] { font-size: 16px; }
  .topic-buttons button { font-size: 12px; padding: 10px; }
  .course-picker button { font-size: 13px; padding: 9px 11px; }
  .course-picker button small { font-size: 11px; }
  .card-grid { gap: 16px 10px; }
  .front-word[lang=ko], .back-word[lang=ko], .lesson-card .front-word[lang=ko] { font-size: 28px; }
  .lesson-card .back-word[lang=en] { font-size: 18px; }
  .lesson-card .card-face { padding: 18px 10px; }
  .lesson-word-icon { font-size: 27px; }
  .text-card .card-front, .text-card .card-back { padding: 22px 18px; }
  .topbar { padding-left: 16px; padding-right: 16px; }
  .practice-link, .back-link { flex-direction: column; gap: 0; width: auto; padding: 8px 12px; font-size: 12px; border-radius: 12px; }
  .practice-link small, .back-link small { font-size: 10px; }
  .back-link span { display: block; margin: 0; color: inherit; font-size: inherit; }
  .page-heading h1 { font-size: 34px; }
  .page-heading h1 span { display: block; margin: 2px 0 0; font-size: 14px; }
  .entry-card h1 { font-size: 34px; }
  .access-header .preview-badge { font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* Typography roles: one stack per role; avoid English falling back inside Korean headings. */
:where(body, button, input, select, textarea, p, small, label, summary, h1, h2, h3, strong, span) { font-synthesis: none; }
#deck-title small, .page-heading h1 span, .entry-card h1 small { font-family: var(--font-body); font-weight: 600; }
.student-access-dialog h2, .admin-title h1, dialog h2 { font-family: var(--font-display); font-weight: 400; }
.student-access-dialog h2 small { font-family: var(--font-body); font-weight: 600; }
.issued-code { font-family: ui-monospace, monospace; }
@media (max-width: 360px) {
  .site-header:has(.access-exit), .topbar:has(.access-exit) { column-gap: 6px; }
  .brand-art { width: 136px; }
  .brand-art .brand-wordmark { font-size: 11px; }
  .welcome { padding: 12px; gap: 8px; }
  .welcome h1 { font-size: 21px; }
  .welcome .welcome-note { font-size: 10px; }
}

/* Letter roles match across activity tabs, previews and selected choices.
   Unselected extended letters retain their existing pink difficulty cue. */
#syllable-panel .part-initial,
.group-tabs button[data-group=consonants],
#letter-workspace:has(#lesson-nav[data-group=consonants]),
#lesson-nav[data-group=consonants],
#syllable-panel #initial-choices { --part-fill: #eaf5ef; --part-edge: #6c9d8b; --part-ink: #285f50; }
#syllable-panel .part-vowel,
.group-tabs button[data-group=vowels],
#letter-workspace:has(#lesson-nav[data-group=vowels]),
#lesson-nav[data-group=vowels],
#syllable-panel #vowel-choices { --part-fill: #f1ebf8; --part-edge: #9b80b5; --part-ink: #63487d; }
#syllable-panel .part-final,
.group-tabs button[data-group=batchim],
#batchim-panel,
#batchim-choices,
#syllable-panel #final-choices { --part-fill: #fceee2; --part-edge: #bd916c; --part-ink: #795335; }
.group-tabs button[data-group]:not([data-group=syllable]),
.group-tabs button[data-group]:not([data-group=syllable]):hover {
  background: var(--part-fill);
  color: var(--part-ink);
}

/* Tracing and pronunciation carry the same role colors as their selectors. */
#writing #guides path.current { stroke: var(--part-edge); stroke-opacity: .4; }
#writing #guides path.finished { stroke: var(--part-edge); }
#writing .ink, #writing .demo-ink, #writing .arrow { stroke: var(--part-ink); }
#writing #start-marker circle { fill: var(--part-ink); }
#batchim-panel .ending-equation > div,
#batchim-panel #ending-reading { color: var(--part-ink); }

/* Account status stays quieter than the primary learning navigation. */
body .student-access-state { display: flex; flex-wrap: nowrap; align-items: center; gap: 14px; }
body .student-access-active {
  display: grid; grid-template-columns: auto auto; align-items: center; column-gap: 6px;
  padding: 7px 12px; border-radius: 12px; background: #eaf5ef; color: #285f50;
  font: 600 12px/1.4 var(--font-body); white-space: nowrap;
}
.student-access-active .access-state-check { grid-row: 1 / 3; font-size: 15px; }
.student-access-active small { grid-column: 2; font-size: 10px; }
body .student-access-state .access-exit {
  flex-direction: column; gap: 0; margin: 0; padding: 6px 8px;
  border: 0; border-radius: 8px; background: transparent; color: var(--muted);
  font-size: 12px; font-weight: 600; min-height: 44px;
}
body .student-access-state .access-exit small { font-size: 10px; }
body .student-access-state .access-exit:hover { background: #eeebe5; color: var(--hazel-ink); }
@media (max-width: 760px) {
  body .student-access-state { flex-basis: 100%; justify-content: flex-end; }
}
@media (max-width: 600px) {
  .site-header:has(.student-access-state) .brand, .topbar:has(.student-access-state) .brand { grid-row: 1; }
  body .student-access-state { grid-column: 1 / -1; justify-self: end; margin: 4px 0 0; }
}
.group-tabs button[data-group]:not([data-group=syllable]) span { color: inherit; }
.group-tabs button[data-group]:not([data-group=syllable])[aria-pressed=true] {
  border-color: var(--part-edge);
  box-shadow: inset 0 0 0 1px var(--part-edge);
}
#syllable-panel .block-parts > div { background: var(--part-fill); }
#syllable-panel .block-parts strong { color: var(--part-ink); }
#lesson-nav[data-group] button[aria-current=true],
#batchim-choices button[aria-pressed=true],
#syllable-panel .jamo-choices button[aria-pressed=true] {
  background: var(--part-fill);
  border-color: var(--part-edge);
  box-shadow: inset 0 0 0 1px var(--part-edge);
  color: var(--part-ink);
}

/* One header control system across learning, Hangul and personal classrooms. */
body .site-header:has(.header-navigation),body .topbar:has(.header-navigation){display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
body .header-navigation{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:10px;margin-left:auto}
body .header-navigation .header-control{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:56px;margin:0;padding:9px 15px;border:1px solid #e3bdc8;border-radius:14px;background:#fff9fa;color:var(--hazel-ink);font:600 14px/1.4 var(--font-body);text-align:center;white-space:nowrap;text-decoration:none;cursor:pointer}
body .header-navigation .header-control small{display:block;margin:0;font:400 12px/1.4 -apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo','Malgun Gothic',sans-serif;color:var(--muted)}
body .header-navigation .header-control:hover{background:var(--pink-soft)}
body .header-navigation .header-classroom{max-width:260px;min-width:150px}
body .header-navigation .header-classroom>span{max-width:100%;overflow:hidden;text-overflow:ellipsis}
body .header-navigation .header-control[aria-current=page]{background:var(--hazel-rose);border-color:var(--hazel-rose);color:#fff;box-shadow:none}
body .header-navigation .header-control[aria-current=page] small{color:#fff}
body .header-navigation [aria-current=page]>span{text-decoration:underline;text-underline-offset:4px}
body .header-navigation .header-signout{background:transparent;border-color:transparent;color:var(--muted);min-height:44px;padding:6px 8px;font-size:12px}
body .header-navigation .header-signout small{font-size:10px}
body .header-navigation .header-signout:hover{background:transparent;color:var(--hazel-rose)}
body .header-navigation .header-control:focus-visible{outline:2px solid var(--hazel-rose);outline-offset:3px}
@media(max-width:700px){body .header-navigation{width:100%;margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}body .header-navigation .header-control{min-height:54px;width:100%;padding:8px 10px;font-size:13px;white-space:normal}body .header-navigation .header-control small{font-size:12px}body .header-navigation .header-signout small{font-size:11px}body .header-navigation .header-signout:last-child:nth-child(odd){grid-column:1/-1;justify-self:end;width:auto;min-width:calc(50% - 4px)}}

@media(max-width:700px){
  body .header-navigation .header-classroom{grid-column:1/-1;max-width:none;min-width:0;white-space:nowrap}
  body .header-navigation .header-signout:last-child{grid-column:1/-1;justify-self:end;width:auto;min-width:0;min-height:44px;padding:6px 8px;font-size:12px}
  body .header-navigation:has(.header-management) .header-signout:last-child{grid-column:auto}
}