/* 스냅북 영어: the same learning tools, in a warm and clear palette. */
:root {
  --cream: var(--n-fffaf2,#fffaf2);
  --paper: var(--n-fffdf9,#fffdf9);
  --ink: var(--n-3e3a32,#3e3a32);
  --coral: var(--n-e67957,#e67957);
  --coral-soft: var(--n-fff0e7,#fff0e7);
  --terracotta: var(--n-a94c31,#a94c31);
  --sage: var(--n-729a80,#729a80);
  --sage-dark: var(--n-41664c,#41664c);
  --sage-soft: var(--n-edf4ec,#edf4ec);
  --yellow: var(--n-f4d786,#f4d786);
  --yellow-soft: var(--n-fff5d9,#fff5d9);
  --blue: var(--terracotta);
  --muted: var(--n-716d63,#716d63);
  --line: var(--n-e7dfd2,#e7dfd2);
  --focus: var(--n-93452e,#93452e);
  --card-shadow: 0 5px 24px #54482a08;
  color: var(--ink);
  background: var(--cream);
  font-family: var(--font-en), 'Noto Sans KR', 'Apple SD Gothic Neo', sans-serif;
}

body {
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
}

button, input, textarea, select { font-family: inherit; }
button, a, input, textarea, select { -webkit-tap-highlight-color: var(--n-e6795726,#e6795726); }
button { touch-action: manipulation; }
button:focus-visible, a:focus-visible, summary:focus-visible,
input:focus-visible, textarea:focus-visible, select:focus-visible,
.book-panel button:focus-visible, .book-tabs button:focus-visible,
.sentence-picker>summary:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 4px;
}

.header {
  height: auto;
  min-height: 88px;
  padding: 13px max(5vw, 24px);
  gap: 22px;
  background: var(--paper);
  border-bottom-color: var(--line);
}

.brand {
  flex-shrink: 0;
  gap: 12px;
  color: var(--ink);
  letter-spacing: -.8px;
}

.brand-logo { width: 58px; height: 48px; object-fit: contain; }
.brand-name { display: grid; gap: 3px; font-size: 22px; line-height: 1.25; }
/* 스냅북 ⧖ 영어 (2026-11-11, owner: "로고에 모래시계 모양도 같이 넣어줘"): the name is real text and the logo's small hourglass sits
   between its two words as an inline drawing in a token colour (so it shows on every 화면 색, dark too). */
.brand-word { display: inline-flex; align-items: center; white-space: nowrap; }
.brand-hourglass { flex: none; width: .42em; height: .76em; margin: 0 .2em; fill: var(--muted); }
.brand-name small {
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: .6px;
  white-space: nowrap;
}
.header-caption { margin-left: 6px; color: var(--muted); font-size: 13px; }
.mode-badge { margin-left: 0; background: var(--sage-soft); color: var(--sage-dark); padding: 7px 12px; }
.header .secondary { color: var(--muted); border-color: var(--line); }

/* The header's tools (dist/header-tools.js; since 2026-10-31 ⚙ 설정 · 로그아웃, below; 2026-10-30 새로고침 · 로그아웃, owner: "새로고침과 로그아웃 위치 바꿔서 하단 어떤 탭을 누르던 저
   위치에 나타나게 수정해줘", then "새로고침 로그아웃 변경된 위치와 아이콘 동일하게 선생님, 학부모 페이지도 동일하게 적용해서
   변경해줘"): one pair in the brand header (index.html .header-tools), at its right end, for the student (every tab),
   teacher (every menu) and parent page alike. Shown only on body[data-header-tools-shown="on"]: a signed-in home and
   its boot frame (set before the header is parsed), never the role chooser, a sign-in card, another role's notice or
   an invite/reset page. Each keeps a 44 px target inside any header (38 px student, 48 px teacher, 80/88 px parent): its
   -10px margins leave a 24 px box, so it never sets the header's height and sits centred on the logo's line, its target
   spilling over the rest of the page (z-index). 11 px label, 14 px icon. A fixed width (60 px: the icon, its gap and
   the label in Noto Sans KR are 58.5 px) keeps both in place while the Korean web font loads (its fallback draws the
   label 3.5 px wider), and the icon stays where it is (flex-start). A pressed or locked one dims only after 0.4 s, so a
   quick 새로고침 (now in the 설정 sheet; it marks 설정 busy) never blinks (No loading flashes). */
.header-tools { display: none; }
body[data-header-tools-shown="on"] .header-tools { position: relative; z-index: 1; display: flex; align-items: center; gap: 8px; flex: 0 0 auto; min-width: 0; margin-left: auto; }
.header-tool { display: flex; align-items: center; justify-content: flex-start; gap: 4px; box-sizing: border-box; flex: 0 0 auto; width: 60px; min-width: 60px; min-height: 44px; margin: -10px 0; padding: 4px 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; color: var(--n-716d63,#716d63); font-size: 11px; font-weight: 400; line-height: normal; letter-spacing: normal; white-space: nowrap; }
.header-tool svg { display: block; flex-shrink: 0; width: 14px; height: 14px; }
.header-tool:focus-visible { outline: 3px solid var(--n-d4916b,#d4916b); outline-offset: 2px; }
.header-tool:disabled { opacity: 1; cursor: default; animation: header-tool-wait 0s linear .4s both; }
.header-tool[aria-busy="true"] { cursor: progress; }
@keyframes header-tool-wait { to { opacity: .5; } }
/* 설정 (2026-10-31, owner with a 412 px teacher screenshot, the palette and refresh icons circled: "아이콘 둘다 없애고 톱니
   바퀴모양 아이콘에 설정 글씨를 로그아웃과 똑같은 느낌으로 만들어 대신 배치해줘"): [⚙ 설정] [⇥ 로그아웃]. 설정 is 로그아웃's
   twin (the .header-tool rule above: 14 px icon, stroke 1.7, 11 px label, 44 px target, flex-start); its box is 44 px wide
   (the icon, its gap and "설정" are 40 px in Noto Sans KR, about 41 px in the fallback), so the label never moves while the
   web font loads. It opens the 설정 sheet (dist/appearance-ui.js: 글씨체, 화면 색, 화면 새로고침; 원장·매니저 also 학원 기본
   글씨체) and shows only on a student's or staff member's own page (html[data-look], written by the server before the
   first paint): parents, 반 코드 visitors and the role chooser see 로그아웃 alone, and the tools are right-anchored, so a
   설정 that appears later moves nothing else. At 320 px: 44 + 8 + 60 = 112 px, one line. */
.header-tool[data-header-action="settings"] { display: none; width: 44px; min-width: 44px; }
html[data-look="student"] .header-tool[data-header-action="settings"], html[data-look="staff"] .header-tool[data-header-action="settings"] { display: flex; }

main { padding-top: 36px; }
h1, h2, h3, h4 { color: var(--ink); }
h1 { font-weight: 800; }
:is(.school-heading h1, .study-heading h2, .study-finish h2,
    .reading-score-heading, .credential-editor h4) { color: var(--ink); }
.eyebrow { color: var(--terracotta); letter-spacing: 1.5px; }
.level-pill { background: var(--yellow-soft); border-color: var(--n-ecddb3,#ecddb3); color: var(--n-746039,#746039); }

.primary {
  min-height: 44px;
  background: var(--terracotta);
  color: var(--n-ffffff,#fff);
  border-radius: 12px;
  box-shadow: 0 3px 9px var(--n-a94c3114,#a94c3114);
}
.secondary {
  min-height: 44px;
  background: var(--paper);
  border-color: var(--n-d9d1c4,#d9d1c4);
  color: var(--n-62584a,#62584a);
  border-radius: 12px;
}
.text-button { color: var(--n-746656,#746656); }
.text-button:hover, .example-button, .teacher-signout, dialog a { color: var(--terracotta); }
.example-button { text-decoration-color: var(--n-c39f8e,#c39f8e); }
.danger { color: var(--i-a13e36,#a13e36) !important; }

:is(.book-panel, .lesson, .score-card, .class-library, .access-card,
    .academy-management, .personal-dashboard, .study-word-card,
    .study-quiz-card, .curriculum-day-editor, .study-empty, .study-finish) {
  background: var(--paper);
  border-color: var(--line);
  box-shadow: var(--card-shadow);
}
.book-tabs { border-bottom-color: var(--line); }
.book-tabs button { color: var(--muted); }
.book-tabs button.selected { color: var(--terracotta); border-bottom-color: var(--terracotta); }

:is(.book-panel input:not([type="checkbox"]):not([type="range"]):not([type="file"]),
    .book-panel textarea, .academy-form input, .academy-form select,
    .academy-inline input, .compact-form input, .rename-class input,
    .student-class-form select, .book-class-form select,
    .study-answer-label textarea, .curriculum-day-editor textarea) {
  color: var(--ink);
  background: var(--n-fffefb,#fffefb);
  border-color: var(--n-d9d0c1,#d9d0c1);
}
:is(.book-panel input, .book-panel textarea, .study-answer-label textarea,
    .curriculum-day-editor textarea):focus {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
textarea { color: var(--ink); }
textarea::placeholder, .book-panel textarea::placeholder { color: var(--n-81796c,#81796c); }
.answer-box { background: var(--n-fffefb,#fffefb); border-color: var(--n-ded5c8,#ded5c8); }
.answer-box:focus-within { border-color: var(--terracotta); }
.field-label span { color: var(--muted); }
:is(.academy-form label, .academy-inline label, .compact-form label,
    .rename-class label, .student-class-form label, .book-class-form label,
    .credential-fields legend, .task-options legend, .study-answer-label,
    .curriculum-day-editor label) { color: var(--n-62594d,#62594d); }
input[type="checkbox"], input[type="radio"], input[type="range"],
.book-panel .sentence-choice input, .book-panel .publish-options input,
.task-options input, .study-speed input, .curriculum-sentence-choices input,
.book-panel input#readingSpeed { accent-color: var(--terracotta); }

:is(.field-help, .setup-footer p, .library-book p, .publish-state,
    .school-heading p, .access-card p, .academy-title p,
    .study-heading .eyebrow, .study-progress, .study-meaning, .study-note,
    .study-quiz-instruction, .study-korean, .curriculum-toolbar p,
    .curriculum-day-editor .field-help, .reading-count, .reading-instruction,
    .reading-note, .reading-speed, .reading-selector-heading span,
    .reading-summary p, .translation-label, .privacy-note, .mini-note,
    .record-caption, .small-label, .input-kind, .input-foot, .score-formula,
    .score-label, .outline-badge, .speech-guide, .roster-row small,
    .student-report summary>span, .homework-title>span, .book-index,
    .picker-empty, .source-tools>span, .sentence-picker>summary span,
    .picker-footer, .book-day-preview-item span) { color: var(--muted); }

.class-sidebar { background: var(--sage-soft); }
.class-option { color: var(--sage-dark); background: var(--n-ffffffa8,#ffffffa8); }
.class-option.selected { background: var(--sage-dark); border-color: var(--sage-dark); color: var(--n-ffffff,#fff); }
.compact-form, .rename-class { border-top-color: var(--n-d6e0d0,#d6e0d0); }
.library-book { border-color: var(--line); border-top-color: var(--coral); background: var(--n-fffdf8,#fffdf8); }
.class-settings, .publish-options, .sentence-picker, .academy-tools>details,
.student-report, .personal-records, .curriculum-source-note {
  background: var(--n-f6f5ec,#f6f5ec);
  border-color: var(--line);
}
.class-settings summary, .sentence-picker>summary, .academy-tools summary,
.student-report summary, .personal-records summary, .curriculum-source-note { color: var(--n-5d6350,#5d6350); }
.code-share strong { color: var(--terracotta); }
.empty-library { background: var(--sage-soft); color: var(--muted); }
.sentence-choice { border-color: var(--line); background: var(--paper); }
.sentence-choice:has(input:checked) { background: var(--coral-soft); border-color: var(--n-d09e85,#d09e85); }
.source-tools .text-button { color: var(--terracotta); }
.photo-result { background: var(--sage-soft); border-color: var(--n-d3dfce,#d3dfce); }
.book-day-preview-item, .curriculum-sentence-choices label { background: var(--n-f8f5ed,#f8f5ed); border-color: var(--line); }
.book-day-preview-item strong { color: var(--terracotta); }
.book-day-preview-item.empty { background: var(--n-f7f6f2,#f7f6f2); border-color: var(--line); }
.book-day-preview-item.empty strong { color: var(--muted); }
.task-options, .credential-fields, .credential-editor { border-color: var(--line); }
.roster-row, .roster-entry, .book-class-form { border-color: var(--line); }
.credential-editor { background: var(--n-fffefb,#fffefb); }
.issued-credentials { background: var(--yellow-soft); border-color: var(--n-e4c574,#e4c574); }

.question { background: var(--sage-soft); }
.question-label, .question p { color: var(--sage-dark); }
.question-number { color: var(--n-86a48a,#86a48a); }
.question h2, .study-word, .study-writing-prompt, .study-blank-sentence,
.study-result .study-model { color: var(--ink); }
.icon-button { color: var(--sage-dark); border-color: var(--n-cfdcc8,#cfdcc8); background: var(--n-ffffffb3,#ffffffb3); }
.topic { background: var(--n-e0ead9,#e0ead9); color: var(--sage-dark); }
.steps li { color: var(--muted); }
.steps li span { background: var(--n-f3eee4,#f3eee4); }
.steps li.active { color: var(--terracotta); }
.steps li.active span { background: var(--terracotta); }
.steps li.done { color: var(--sage-dark); }
.steps li.done span { background: var(--i-e0ecd9,#e0ecd9); color: var(--sage-dark); }
.segmented { background: var(--n-f3eee4,#f3eee4); }
.segmented button { color: var(--muted); }
.segmented button.selected { color: var(--terracotta); background: var(--paper); }
.coach-card { background: var(--yellow-soft); border-color: var(--n-ecdcaa,#ecdcaa); }
.coach-card h2 { color: var(--n-6a512c,#6a512c); }
.coach-card p, .coach-footer, .coach-card .eyebrow { color: var(--n-7b6945,#7b6945); }
.coach-footer { border-top-color: var(--n-e8d8a4,#e8d8a4); }
.coach-footer strong { color: var(--n-6a512c,#6a512c); }
.record { background: var(--terracotta); box-shadow: 0 0 0 7px var(--coral-soft); }
.reading-record { box-shadow: 0 0 0 4px var(--coral-soft); }
.record.recording { background: var(--i-b74240,#b74240); }
.hint-card { background: var(--yellow-soft); border-color: var(--n-ecdcaa,#ecdcaa); color: var(--n-7d602f,#7d602f); }
.chip { background: var(--n-f6f1e8,#f6f1e8); color: var(--n-756552,#756552); border-color: var(--n-e5dac9,#e5dac9); }
.chip.current { background: var(--coral-soft); border-color: var(--terracotta); color: var(--terracotta); }
.chip.completed, .feedback, .selection-feedback:not(:empty) { background: var(--sage-soft); color: var(--sage-dark); }
.sentence { background: var(--n-faf7ee,#faf7ee); border-color: var(--line); }
.completed-sentence { background: var(--sage-soft); color: var(--sage-dark); border-left-color: var(--sage); }
.score-label strong { color: var(--ink); }
.score-empty { color: var(--n-b6ac9c,#b6ac9c); }
.score-empty span { color: var(--muted); }
.score-total, .score-example { color: var(--terracotta); }
.score-total span { color: var(--muted); }
.bar { background: var(--n-efe8dc,#efe8dc); }
.bar>span { background: var(--sage); }

.homework-summary { background: var(--yellow-soft); }
.homework-summary>strong { color: var(--terracotta); }
.homework-card, .attempt-row { background: var(--paper); border-color: var(--line); }
.homework-parts span { color: var(--n-6d6558,#6d6558); background: var(--n-f3eee4,#f3eee4); }
.homework-parts .done { background: var(--i-e5f0df,#e5f0df); color: var(--sage-dark); }
.day-hub-card { background: var(--n-fffefb,#fffefb); border-color: var(--line); }
.day-hub-card.selected { border-color: var(--terracotta); box-shadow: 0 0 0 1px var(--terracotta); }
.day-hub-card h3 { color: var(--terracotta); }
.day-hub-card p { color: var(--muted); }

.reading-target { background: var(--n-f4f7ec,#f4f7ec); border-color: var(--n-d4dfc9,#d4dfc9); }
.reading-target p { color: var(--ink); }
.reading-target.hidden-target { background: var(--n-f2eee6,#f2eee6); border-color: var(--n-d7cdbc,#d7cdbc); }
.reading-target.hidden-target p { color: var(--n-6d6252,#6d6252); }
.reading-dots div { background: var(--n-f6f2e9,#f6f2e9); border-color: var(--line); color: var(--muted); }
.reading-dots .current { background: var(--coral-soft); border-color: var(--coral); color: var(--terracotta); }
.reading-dots .done { background: var(--sage-soft); border-color: var(--i-cbdcc4,#cbdcc4); color: var(--sage-dark); }
.reading-badge, .reading-speed output, .study-phase { color: var(--terracotta); }
.reading-selector, .picker-footer { border-color: var(--line); }
.reading-selector-heading { color: var(--n-62584a,#62584a); }
.sentence-number, .reading-day { background: var(--n-f8f5ed,#f8f5ed); border-color: var(--line); color: var(--n-6b6052,#6b6052); }
.sentence-number.selected { background: var(--coral-soft); border-color: var(--terracotta); color: var(--terracotta); }
.reading-day.selected { background: var(--terracotta); border-color: var(--terracotta); color: var(--n-ffffff,#fff); }
.reading-day:disabled { background: var(--n-f4f1eb,#f4f1eb); }
.reading-auto-status, .speech-feedback { background: var(--sage-soft); color: var(--sage-dark); }
.reading-score-card { background: linear-gradient(150deg, var(--paper), var(--n-fff6e4,#fff6e4)); border-color: var(--n-e7dac2,#e7dac2); box-shadow: 0 24px 90px #54482a35; }
.reading-score-ring { background: conic-gradient(var(--sage) calc(var(--reading-score)*1%), var(--n-e9e7da,#e9e7da) 0); box-shadow: 0 8px 28px var(--n-729a8016,#729a8016); }
.reading-score-ring>div { background: var(--paper); }
.reading-score-ring strong { color: var(--sage-dark); }
.reading-score-ring p, .reading-score-metrics span, .reading-score-explanation { color: var(--muted); }
.reading-score-metrics>div { background: var(--paper); border-color: var(--line); }
.reading-score-metrics strong { color: var(--ink); }
.reading-score-next { color: var(--sage-dark); }
.reading-score-popup.is-retry .reading-score-star { background: var(--yellow-soft); color: var(--i-9a7028,#9a7028); }
.reading-score-popup.is-retry .reading-score-next { color: var(--muted); }

.study-item-nav button { border-color: var(--line); color: var(--n-706455,#706455); background: var(--paper); }
.study-item-nav .selected { border-color: var(--terracotta); background: var(--terracotta); color: var(--n-ffffff,#fff); box-shadow: 0 3px 10px var(--n-a94c311f,#a94c311f); }
.study-rounds>span { background: var(--n-f6f1e7,#f6f1e7); color: var(--muted); }
.study-rounds>.active { background: var(--coral-soft); color: var(--terracotta); }
.study-rounds>.done { background: var(--sage-soft); color: var(--sage-dark); }
.study-speed { color: var(--muted); }
.study-blank, #studyPanel .study-letter { color: var(--ink); border-color: var(--n-dacdb7,#dacdb7); border-bottom-color: var(--coral); background: var(--n-fff9ed,#fff9ed); caret-color: var(--terracotta); }
.study-blank:focus, #studyPanel .study-letter:focus { outline-color: var(--focus); border-color: var(--terracotta); background: var(--n-ffffff,#fff); }
.study-blank:disabled, #studyPanel .study-letter:disabled { color: var(--ink); -webkit-text-fill-color: var(--ink); background: var(--n-f4f0e6,#f4f0e6); }
.study-result { background: var(--sage-soft); border-color: var(--n-cfddc6,#cfddc6); color: var(--sage-dark); }
.study-result .study-model-label { color: var(--muted); }
.study-finish>span { background: var(--sage-soft); color: var(--sage-dark); }
.curriculum-editor-nav button { background: var(--paper); border-color: var(--line); color: var(--n-6c6151,#6c6151); }
.curriculum-editor-nav button.selected { background: var(--sage-dark); border-color: var(--sage-dark); color: var(--n-ffffff,#fff); }


dialog { background: var(--paper); color: var(--ink); border-color: var(--line); box-shadow: 0 20px 90px #54482a33; }
dialog p { color: var(--muted); }
dialog::backdrop { background: var(--n-3e3a326b,#3e3a326b); }
#notice { background: var(--ink); box-shadow: 0 4px 20px #54482a24; }
.loading { color: var(--sage-dark); }
footer { color: var(--muted); }
footer strong { color: var(--n-675b4b,#675b4b); }

@media (max-width: 1100px) {
  .header { gap: 16px; }
  .header-caption { display: none; }
}
@media (max-width: 760px) {
  .header { min-height: 80px; padding: 12px 18px; gap: 12px; flex-wrap: wrap; }
  .header .brand { margin-right: 0; }
  .brand { gap: 9px; }
  .brand-logo { width: 46px; height: 38px; }
  .brand-name { font-size: 19px; }
  .brand-name small { font-size: 10px; letter-spacing: .3px; }
  .header .secondary { min-height: 40px; padding: 8px 11px; }
  main { padding-top: 25px; }
}
@media (max-width: 430px) {
  .header { padding: 11px 15px; }
  .brand-name { font-size: 18px; }
  .brand-logo { width: 42px; height: 34px; }
}

:is(body[data-view="student"],body[data-view="parent"]) .header .mode-badge,
:is(body[data-view="student"],body[data-view="parent"]) .header #connectionButton { display: none; }
:is(body[data-view="student"],body[data-view="parent"]) .access-card { max-width: 460px; margin: 28px auto 70px; padding: 32px; border-radius: 24px; }
:is(body[data-view="student"],body[data-view="parent"]) .access-card h2 { font-size: 26px; margin: 10px 0 14px; }
:is(body[data-view="student"],body[data-view="parent"]) .access-card p { color: var(--muted); line-height: 1.8; }
.student-records-summary { max-width: 850px; margin: 20px auto 35px; border-top: 1px solid var(--line); padding: 21px 2px; }
.student-records-summary>summary { cursor: pointer; font-weight: 650; color: var(--muted); }
.student-day-heading h2 { margin: 10px 0; line-height: 1.5; }
.student-day-heading p { color: var(--muted); margin-bottom: 20px; }
.student-day-options { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.student-day-options button { display: grid; gap: 6px; text-align: left; padding: 16px; min-width: 0; }
.student-day-options strong { color: var(--terracotta); font-size: 18px; }
.student-day-options span { font-size: 13px; line-height: 1.5; }
@media(max-width:420px) { :is(body[data-view="student"],body[data-view="parent"]) .access-card { padding: 27px 23px; margin-top: 15px; } }

/* First page: who is signing in (dist/role-gate.js). Three big choices, one column on phones. */
/* ── Sign-in pages in the logo's colours (2026-11-11, owner: "로고 색상에 맞춰서 로그인 페이지 다시 ui 구성해줘") ──
   Every signed-out screen — the role chooser (/), the student, parent and teacher logins, a teacher's invitation or
   reset link and the "already signed in" notice — is drawn on body[data-entry] ("chooser" or "login"; index.html's
   early script sets it at the first paint, school.js syncEntry for good) with the --se-* palette below, sampled from the
   owner's logo (teal #00888a, orange #f9a503, grey #777675) and tuned to WCAG AA (entry-palette.test.mjs holds the
   pairs). The 화면 색 themes do not reach these pages (content/theme/palette.json keeps data-entry rules as written): a
   signed-in home keeps its own colours. Dark: the same palette on deep teal when the device asks for dark or the page
   carries 밤 (the two blocks below hold the same values). Orange is the accent only (the student's tile, the arrow, the
   notice); every button and link is teal, so text on it passes 4.5:1. */
body[data-entry] {
  --se-page: #f1f8f6; --se-card: #ffffff; --se-aside: #def1ee; --se-ink: #1d3537; --se-muted: #5f6663;
  --se-teal: #00888a; --se-teal-strong: #007174; --se-teal-hover: #005e61; --se-teal-deep: #0a4d50; --se-teal-soft: #def1ee;
  --se-on-primary: #ffffff; --se-line: #cfe3e0; --se-field-line: #6f9795;
  --se-orange: #f9a503; --se-orange-soft: #fff0d2; --se-orange-deep: #8f5200;
  --se-warm: #f3efe8; --se-danger: #b3261e;
  --se-shadow: 0 14px 34px #0a4d5014; --se-shadow-small: 0 3px 10px #0a4d500f;
  display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh;
  color: var(--se-ink); background: var(--se-page);
}
html:has(body[data-entry]) { background: #f1f8f6; }
@media (prefers-color-scheme: dark) {
  body[data-entry] {
  --se-page: #0e2325; --se-card: #163235; --se-aside: #102a2c; --se-ink: #e9f4f2; --se-muted: #a8bcb9;
    --se-teal: #4cc4bf; --se-teal-strong: #3fbdb8; --se-teal-hover: #63d2cd; --se-teal-deep: #bfece8; --se-teal-soft: #1e4649;
    --se-on-primary: #04282a; --se-line: #2c5255; --se-field-line: #6e9c99;
    --se-orange: #ffb52e; --se-orange-soft: #40310f; --se-orange-deep: #ffc65c;
    --se-warm: #243a3b; --se-danger: #ffb3a8;
    --se-shadow: 0 14px 34px #00000040; --se-shadow-small: 0 3px 10px #00000033;
    color-scheme: dark;
  }
  html:has(body[data-entry]) { background: #0e2325; color-scheme: dark; }
}
html[data-theme="dark"] body[data-entry] {
  --se-page: #0e2325; --se-card: #163235; --se-aside: #102a2c; --se-ink: #e9f4f2; --se-muted: #a8bcb9;
  --se-teal: #4cc4bf; --se-teal-strong: #3fbdb8; --se-teal-hover: #63d2cd; --se-teal-deep: #bfece8; --se-teal-soft: #1e4649;
  --se-on-primary: #04282a; --se-line: #2c5255; --se-field-line: #6e9c99;
  --se-orange: #ffb52e; --se-orange-soft: #40310f; --se-orange-deep: #ffc65c;
  --se-warm: #243a3b; --se-danger: #ffb3a8;
  --se-shadow: 0 14px 34px #00000040; --se-shadow-small: 0 3px 10px #00000033;
  color-scheme: dark;
}
html[data-theme="dark"]:has(body[data-entry]) { background: #0e2325; color-scheme: dark; }

/* The page: the header is the small way home on a phone's login and is not shown where the logo itself is on the page
   (the chooser, and a wide login's left panel); the card sits near the top on a phone (so the on-screen keyboard leaves
   its button in sight) and in the middle of a wide screen; the footer line rests at the bottom, so nothing moves when
   the card arrives. */
body[data-entry] .header { justify-content: center; height: auto; min-height: 0; padding: 14px 20px 0; background: transparent; border-bottom: 0; }
body[data-entry="chooser"] .header { display: none; }
body[data-entry] .header .brand { gap: 8px; margin: 0; min-height: 44px; color: var(--se-teal-deep); border-radius: 12px; }
body[data-entry] .brand-logo { width: 41px; height: 34px; }
body[data-entry] .brand-name { width: 90px; font-size: 19px; } /* a set width: the name does not slide when its font arrives */
body[data-entry] .brand-name small { display: none; }
body[data-entry] .brand-hourglass { fill: var(--se-muted); }
body[data-entry] main { display: flex; flex: 1 0 auto; flex-direction: column; box-sizing: border-box; width: 100%; margin: 0 auto; padding: 14px 20px 0; }
body[data-entry] #schoolPanel:not([hidden]) { display: flex; flex: 1 0 auto; flex-direction: column; }
body[data-entry] #schoolContent { display: flex; flex: 1 0 auto; flex-direction: column; }
body[data-entry] footer { display: block; padding: 18px 0 max(18px, env(safe-area-inset-bottom)); text-align: center; color: var(--se-muted); font-size: 12px; line-height: 20px; }
/* The footer line comes with the card (a card taller than the screen would push it down otherwise). */
body[data-entry] main:not(:has(.role-chooser, .entry-frame)) footer { visibility: hidden; }
body[data-entry] footer strong { color: var(--se-teal-deep); }
body[data-entry] footer span { display: none; }
body[data-entry] :is(a, button, input, select):focus-visible { outline: 3px solid var(--se-teal-strong); outline-offset: 3px; }
body[data-entry] :is(a, button, input, select) { -webkit-tap-highlight-color: transparent; }

/* The first page: the owner's logo with the tagline, then who is signing in. Each choice's tile is a small puzzle
   piece (the knob on its right edge), the one drawing borrowed from the logo. */
body[data-entry] .role-chooser { box-sizing: border-box; width: 100%; max-width: 440px; margin: auto; padding: 6px 0 min(9vh, 80px); }
body[data-entry] .role-chooser-heading { margin-bottom: 22px; text-align: center; }
body[data-entry] .role-chooser-logo { display: block; width: 160px; height: 133px; margin: 0 auto; }
body[data-entry] .role-chooser-tagline { margin: 6px 0 22px; color: var(--se-muted); font-size: 13px; font-weight: 700; line-height: 1.5; letter-spacing: .22em; text-indent: .22em; }
body[data-entry] .role-chooser-heading h1 { margin: 0 0 6px; color: var(--se-teal-deep); font-size: 26px; line-height: 1.35; letter-spacing: -.5px; }
body[data-entry] .role-chooser-lead { margin: 0; color: var(--se-muted); font-size: 14px; line-height: 1.6; word-break: keep-all; }
body[data-entry] .role-choices { display: grid; grid-template-columns: 1fr; gap: 12px; }
body[data-entry] .role-choice {
  display: flex; flex-direction: row; align-items: center; gap: 20px; box-sizing: border-box; min-height: 88px; padding: 14px 16px;
  color: var(--se-ink); text-align: left; text-decoration: none;
  background: var(--se-card); border: 1.5px solid var(--se-line); border-radius: 24px; box-shadow: var(--se-shadow-small);
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
body[data-entry] .role-choice:hover { border-color: var(--se-teal); box-shadow: var(--se-shadow); transform: translateY(-2px); }
body[data-entry] .role-choice:active { transform: none; box-shadow: var(--se-shadow-small); }
body[data-entry] .role-choice-icon { position: relative; display: grid; flex: none; place-items: center; width: 58px; height: 58px; border-radius: 18px; color: var(--se-teal-strong); background: var(--se-teal-soft); }
body[data-entry] .role-choice-icon::after { content: ""; position: absolute; top: 50%; right: -7px; width: 15px; height: 15px; margin-top: -7.5px; border-radius: 50%; background: inherit; }
body[data-entry] .role-choice-icon svg { width: 30px; height: 30px; }
body[data-entry] .role-choice-icon.is-student { color: var(--se-orange-deep); background: var(--se-orange-soft); }
body[data-entry] .role-choice-icon.is-teacher { color: var(--se-on-primary); background: var(--se-teal-strong); }
body[data-entry] .role-choice-text { display: grid; flex: 1; gap: 2px; min-width: 0; }
body[data-entry] .role-choice-text strong { color: var(--se-teal-deep); font-size: 21px; line-height: 1.3; }
body[data-entry] .role-choice-text span { color: var(--se-muted); font-size: 14px; line-height: 1.5; word-break: keep-all; }
body[data-entry] .role-choice-arrow { display: grid; flex: none; place-items: center; width: 30px; height: 30px; padding-bottom: 3px; box-sizing: border-box; color: var(--se-orange-deep); font-size: 22px; line-height: 1; background: var(--se-orange-soft); border-radius: 50%; }

/* A login: one calm card. Its first line is the role's tile and "학생 로그인"; ‹ 처음으로 above it leads back. */
body[data-entry] .entry-frame { box-sizing: border-box; width: 100%; max-width: 440px; margin: 0 auto; }
body[data-entry] .entry-aside { display: none; }
body[data-entry] .entry-frame .access-card { box-sizing: border-box; max-width: none; margin: 0; padding: 18px 22px 24px; color: var(--se-ink); line-height: 1.6; background: var(--se-card); border: 1px solid var(--se-line); border-radius: 28px; box-shadow: var(--se-shadow); }
body[data-entry] .entry-frame .role-back-link { display: inline-flex; align-items: center; width: max-content; min-height: 44px; margin: -6px 0 0 -10px; padding: 0 10px; color: var(--se-muted); font-size: 14px; text-decoration: none; border-radius: 12px; }
body[data-entry] .entry-frame .role-back-link:hover { color: var(--se-teal-strong); }
body[data-entry] .entry-head { display: flex; align-items: center; gap: 18px; margin: 6px 0 12px; }
body[data-entry] .entry-head .role-choice-icon { width: 48px; height: 48px; border-radius: 16px; }
body[data-entry] .entry-head .role-choice-icon::after { right: -6px; width: 13px; height: 13px; margin-top: -6.5px; }
body[data-entry] .entry-head .role-choice-icon svg { width: 26px; height: 26px; }
body[data-entry] .entry-frame .access-card h2 { margin: 0; color: var(--se-teal-deep); font-size: 24px; line-height: 1.3; letter-spacing: -.4px; word-break: keep-all; }
body[data-entry] .entry-frame .access-card p { margin: 0 0 12px; color: var(--se-muted); font-size: 15px; line-height: 1.7; word-break: keep-all; }
body[data-entry] .entry-frame .access-card p a { display: inline; color: var(--se-teal-strong); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
body[data-entry] .entry-frame .academy-form { display: grid; gap: 14px; margin: 18px 0 0; }
body[data-entry] .entry-frame .academy-form label { display: grid; gap: 8px; color: var(--se-ink); font-size: 14px; font-weight: 700; }
body[data-entry] .entry-frame .access-card .academy-form :is(input, select) { box-sizing: border-box; width: 100%; min-width: 0; min-height: 52px; padding: 12px 14px; color: var(--se-ink); font: inherit; font-size: 17px; font-weight: 500; background: var(--se-card); border: 1.5px solid var(--se-field-line); border-radius: 14px; }
body[data-entry] .entry-frame .access-card .academy-form :is(input, select):focus-visible { border-color: var(--se-teal-strong); outline-offset: 2px; }
/* When a phone brings the focused field above its keyboard, the message line and the button come with it. */
body[data-entry] .entry-frame .access-card .academy-form :is(input, select) { scroll-margin: 64px 0 124px; }
/* The code a child types: big characters in the middle of a tall field, shown in capitals as the code is read. */
body[data-entry] .entry-frame .access-card .academy-form .short-login-code { min-height: 68px; height: 72px; padding: 10px 12px; font-size: 32px; line-height: 1.2; font-weight: 750; letter-spacing: .2em; text-align: center; text-transform: uppercase; }
/* The hint is small text in the middle of the same tall field (the field's own size while it is empty). */
body[data-entry] .entry-frame .access-card .academy-form .short-login-code:placeholder-shown { font-size: 15px; font-weight: 500; letter-spacing: 0; text-transform: none; }
body[data-entry] .entry-frame .access-card .academy-form .short-login-code::placeholder { color: var(--se-muted); }
body[data-entry] .entry-frame :is(.primary, .secondary) { display: flex; align-items: center; justify-content: center; box-sizing: border-box; width: 100%; min-height: 54px; margin: 0; padding: 12px 18px; font-size: 17px; font-weight: 750; line-height: 1.4; text-align: center; text-decoration: none; border-radius: 16px; }
body[data-entry] .entry-frame .primary { color: var(--se-on-primary); background: var(--se-teal-strong); border: 0; box-shadow: var(--se-shadow-small); }
body[data-entry] .entry-frame .primary:hover { background: var(--se-teal-hover); }
body[data-entry] .entry-frame .primary:active { transform: translateY(1px); }
body[data-entry] .entry-frame .primary:disabled { opacity: .6; }
body[data-entry] .entry-frame .secondary { color: var(--se-teal-deep); background: var(--se-card); border: 1.5px solid var(--se-field-line); }
body[data-entry] .entry-frame .secondary:hover { border-color: var(--se-teal-strong); }
/* A form's message has its line from the start, between the fields and the button (in sight above the on-screen
   keyboard), so nothing moves when it speaks. */
body[data-entry] .entry-frame .academy-form > button { order: 2; }
body[data-entry] .entry-frame .academy-form > .academy-error,
body[data-entry] .entry-frame .academy-form > .academy-error:empty { display: block; order: 1; min-height: 22px; margin: -6px 0 -5px; color: var(--se-danger); font-size: 14px; font-weight: 700; line-height: 22px; }
body[data-entry] .entry-frame .access-card .field-help { margin: 16px 0 0; font-size: 13px; line-height: 1.7; }
body[data-entry] .entry-frame .teacher-access-actions { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 18px; }
/* "지금 ○○으로 로그인되어 있어요": the sentence in the accent's soft colour, then 로그아웃 and the way to that home. */
body[data-entry] .entry-frame .access-card .role-signed-in-message { margin: 16px 0 18px; padding: 14px 16px; color: var(--se-ink); font-size: 16px; line-height: 1.7; word-break: keep-all; background: var(--se-orange-soft); border: 0; border-radius: 16px; }
body[data-entry] .role-signed-in-actions { display: grid; gap: 10px; }
body[data-entry] .entry-frame .role-signed-in > .academy-error { margin: 12px 0 0; color: var(--se-danger); font-size: 14px; font-weight: 700; }
body[data-entry] .entry-frame .role-signed-in > .academy-error:empty { display: none; }

/* Small phones (320 px wide, 568 px tall): the three choices fit in one screen with the logo above them. */
@media (max-width: 360px) {
  body[data-entry] main { padding: 10px 14px 0; }
  body[data-entry] .role-chooser-heading { margin-bottom: 14px; }
  body[data-entry] .role-chooser-logo { width: 108px; height: 90px; }
  body[data-entry] .role-chooser-tagline { margin: 4px 0 12px; font-size: 12px; letter-spacing: .16em; text-indent: .16em; }
  body[data-entry] .role-chooser-heading h1 { margin-bottom: 2px; font-size: 22px; }
  body[data-entry] .role-chooser-lead { font-size: 13px; }
  body[data-entry] .role-choices { gap: 9px; }
  body[data-entry] .role-choice { gap: 17px; min-height: 76px; padding: 11px 12px; border-radius: 20px; }
  body[data-entry] .role-choice-icon { width: 50px; height: 50px; border-radius: 16px; }
  body[data-entry] .role-choice-icon svg { width: 27px; height: 27px; }
  body[data-entry] .role-choice-text strong { font-size: 19px; }
  body[data-entry] .role-choice-text span { font-size: 13px; }
  body[data-entry] .role-choice-arrow { display: none; }
  body[data-entry] .header { padding-top: 8px; }
  body[data-entry] .entry-frame .access-card { padding: 12px 16px 18px; border-radius: 24px; }
  body[data-entry] .entry-head { gap: 16px; margin: 2px 0 8px; }
  body[data-entry] .entry-frame .access-card h2 { font-size: 22px; }
  body[data-entry] .entry-frame .access-card p { font-size: 14px; }
  body[data-entry] .entry-frame .academy-form { gap: 12px; margin-top: 12px; }
  body[data-entry] .entry-frame .academy-form > .academy-error { font-size: 13px; letter-spacing: -.4px; }
}
/* Tablets and up: the chooser's three choices stand side by side as cards. */
@media (min-width: 700px) {
  body[data-entry] main { padding: 24px 32px 0; }
  body[data-entry] .role-chooser { max-width: 900px; margin: auto; padding: 0 0 24px; }
  body[data-entry] .role-chooser-heading { margin-bottom: 30px; }
  body[data-entry] .role-chooser-logo { width: 200px; height: 166px; }
  body[data-entry] .role-chooser-tagline { margin-bottom: 30px; font-size: 14px; }
  body[data-entry] .role-chooser-heading h1 { font-size: 30px; }
  body[data-entry] .role-chooser-lead { font-size: 15px; }
  body[data-entry] .role-choices { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
  body[data-entry] .role-choice { flex-direction: column; gap: 16px; padding: 30px 20px 28px; text-align: center; border-radius: 28px; }
  body[data-entry] .role-choice-icon { width: 72px; height: 72px; border-radius: 22px; }
  body[data-entry] .role-choice-icon::after { right: -9px; width: 19px; height: 19px; margin-top: -9.5px; }
  body[data-entry] .role-choice-icon svg { width: 36px; height: 36px; }
  body[data-entry] .role-choice-text { flex: none; gap: 6px; }
  body[data-entry] .role-choice-text strong { font-size: 23px; }
  body[data-entry] .role-choice-arrow { display: none; }
  body[data-entry] .entry-frame { margin: auto; padding-bottom: 24px; }
  body[data-entry] .entry-frame .access-card { padding: 26px 32px 32px; }
}
/* Wide screens: the logo and the tagline stand beside the form as one piece: the panel's knob fits into the card
   like the two pages of the logo. The header is not shown (the panel's logo is the way home). */
@media (min-width: 900px) {
  body[data-entry="login"] .header { display: none; }
  body[data-entry] .entry-frame { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); max-width: 900px; min-height: 460px; padding: 0; background: var(--se-card); border: 1px solid var(--se-line); border-radius: 32px; box-shadow: var(--se-shadow); }
  body[data-entry] .entry-aside { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 40px 28px; background: var(--se-aside); border-radius: 31px 0 0 31px; }
  body[data-entry] .entry-aside::after { content: ""; position: absolute; top: 50%; right: -22px; z-index: 1; width: 46px; height: 46px; margin-top: -23px; background: var(--se-aside); border-radius: 50%; }
  body[data-entry] .entry-aside-home { display: block; border-radius: 20px; }
  body[data-entry] .entry-aside-logo { display: block; width: 240px; height: 199px; }
  body[data-entry] .entry-aside-tagline { margin: 0; color: var(--se-muted); font-size: 15px; font-weight: 700; letter-spacing: .24em; text-indent: .24em; white-space: nowrap; }
  body[data-entry] .entry-frame .access-card { align-self: center; padding: 40px 48px 44px 60px; background: transparent; border: 0; border-radius: 0; box-shadow: none; }
}
/* Short screens (a phone on its side): everything a little smaller, so the form's button stays in reach. */
@media (max-height: 520px) {
  body[data-entry] main { padding-top: 10px; }
  body[data-entry] .role-chooser-logo { width: 96px; height: 80px; }
  body[data-entry] .role-chooser-tagline { margin: 2px 0 8px; font-size: 12px; }
  body[data-entry] .role-chooser-heading { margin-bottom: 14px; }
  body[data-entry] .role-chooser-heading h1 { font-size: 22px; margin-bottom: 0; }
  body[data-entry] .role-chooser-lead { font-size: 13px; }
  body[data-entry] .role-choice { flex-direction: row; gap: 18px; min-height: 76px; padding: 12px 16px; text-align: left; border-radius: 22px; }
  body[data-entry] .role-choice-icon { width: 50px; height: 50px; border-radius: 16px; }
  body[data-entry] .role-choice-icon::after { right: -6px; width: 13px; height: 13px; margin-top: -6.5px; }
  body[data-entry] .role-choice-icon svg { width: 27px; height: 27px; }
  body[data-entry] .role-choice-text { flex: 1; gap: 2px; }
  body[data-entry] .role-choice-text strong { font-size: 19px; }
  body[data-entry] .role-choice-text span { font-size: 13px; }
  body[data-entry] .entry-frame { min-height: 0; }
  body[data-entry] .entry-aside { padding: 20px; }
  body[data-entry] .entry-aside-logo { width: 160px; height: 133px; }
  body[data-entry] .entry-frame .access-card { padding-top: 14px; padding-bottom: 18px; }
  body[data-entry] .entry-frame .academy-form { gap: 10px; margin-top: 10px; }
  body[data-entry] footer { padding: 10px 0; }
}
@media (prefers-reduced-motion: reduce) {
  body[data-entry] .role-choice, body[data-entry] .entry-frame .primary { transition: none; }
  body[data-entry] .role-choice:hover, body[data-entry] .entry-frame .primary:active { transform: none; }
}
/* 화면 색 (2026-10-31): in the four other colour sets the header tools' focus ring is the set's --t-focus (3:1 or more on
   the header); 지금 keeps it. */
:where(:root[data-theme]:not([data-theme="classic"])) .header-tool:focus-visible { outline-color: var(--t-focus); }