/* Speaking Mentor: 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: 48px; height: 58px; object-fit: contain; }
.brand-name { display: grid; gap: 3px; font-size: 22px; line-height: 1.25; }
.brand-name small {
  font-size: 9px;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: 2px;
}
.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: 38px; height: 46px; }
  .brand-name { font-size: 19px; }
  .brand-name small { font-size: 8px; letter-spacing: 1.4px; }
  .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: 34px; height: 42px; }
}

: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. */
.role-chooser { max-width: 880px; margin: 6px auto 64px; }
.role-chooser-heading { text-align: center; margin-bottom: 26px; }
.role-chooser-heading h1 { font-size: 30px; line-height: 1.35; margin: 8px 0; }
.role-chooser-heading p { color: var(--muted); font-size: 15px; line-height: 1.7; word-break: keep-all; }
.role-choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.role-choice {
  display: flex; flex-direction: column; align-items: center; gap: 14px; min-width: 0;
  padding: 30px 20px 26px; text-align: center; text-decoration: none; color: var(--ink);
  background: var(--paper); border: 1px solid var(--line); border-radius: 24px; box-shadow: var(--card-shadow);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.role-choice:hover { transform: translateY(-2px); border-color: var(--n-dccfba,#dccfba); box-shadow: 0 10px 28px #54482a14; }
.role-choice:active { transform: none; }
.role-choice-icon { display: grid; place-items: center; width: 68px; height: 68px; border-radius: 22px; }
.role-choice-icon svg { width: 36px; height: 36px; }
.role-choice-student .role-choice-icon { background: var(--coral-soft); color: var(--terracotta); }
.role-choice-parent .role-choice-icon { background: var(--sage-soft); color: var(--sage-dark); }
.role-choice-teacher .role-choice-icon { background: var(--yellow-soft); color: var(--n-87652a,#87652a); }
.role-choice-text { display: grid; gap: 6px; min-width: 0; }
.role-choice-text strong { font-size: 23px; line-height: 1.3; }
.role-choice-text span { color: var(--muted); font-size: 14px; line-height: 1.6; word-break: keep-all; }
.role-choice-arrow { display: none; }
@media (prefers-reduced-motion: reduce) { .role-choice { transition: none; } .role-choice:hover { transform: none; } }
@media (max-width: 640px) {
  .role-chooser { margin-top: 0; }
  .role-chooser-heading { margin-bottom: 18px; }
  .role-chooser-heading h1 { font-size: 25px; }
  .role-chooser-heading p { font-size: 14px; }
  .role-choices { grid-template-columns: 1fr; gap: 12px; }
  .role-choice { flex-direction: row; gap: 16px; padding: 18px; text-align: left; border-radius: 20px; }
  .role-choice-icon { flex-shrink: 0; width: 58px; height: 58px; border-radius: 18px; }
  .role-choice-icon svg { width: 31px; height: 31px; }
  .role-choice-text { flex: 1; gap: 3px; }
  .role-choice-text strong { font-size: 21px; }
  .role-choice-arrow { display: block; color: var(--n-b8ab98,#b8ab98); font-size: 30px; line-height: 1; }
}
/* Small phones (320 px, iPhone SE 1st gen): all three choices fit in one 568 px screen without scrolling. */
@media (max-width: 360px) {
  .role-chooser-heading { margin-bottom: 12px; }
  .role-chooser-heading .eyebrow { display: none; }
  .role-chooser-heading h1 { font-size: 23px; margin: 0 0 4px; }
  .role-chooser-heading p { font-size: 13px; line-height: 1.55; }
  .role-choices { gap: 10px; }
  .role-choice { gap: 12px; padding: 13px 14px; }
  .role-choice-icon { width: 48px; height: 48px; border-radius: 15px; }
  .role-choice-icon svg { width: 27px; height: 27px; }
  .role-choice-text strong { font-size: 20px; }
  .role-choice-text span { font-size: 13px; line-height: 1.5; }
}
/* Each login page's way back to the chooser, and the notice shown on another role's page while signed in. */
.access-card .role-back-link { display: flex; width: max-content; }
.role-back-link { align-items: center; min-height: 36px; margin: -10px 0 4px -6px; padding: 0 6px; color: var(--muted); font-size: 14px; text-decoration: none; }
.role-back-link:hover { color: var(--terracotta); }
.access-card.role-signed-in { max-width: 460px; margin: 28px auto 70px; padding: 32px; border-radius: 24px; }
.role-signed-in h2 { font-size: 26px; margin: 10px 0 14px; }
.access-card.role-signed-in .role-signed-in-message { margin-bottom: 20px; padding: 14px 16px; color: var(--ink); font-size: 16px; line-height: 1.75; word-break: keep-all; background: var(--yellow-soft); border: 1px solid var(--n-ecddb3,#ecddb3); border-radius: 14px; }
.role-signed-in-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.access-card .role-signed-in-actions > * { display: inline-flex; flex: 1 1 160px; align-items: center; justify-content: center; min-height: 48px; font-size: 16px; text-decoration: none; }
.role-signed-in .academy-error:empty { display: none; }
@media (max-width: 420px) { .access-card.role-signed-in { margin-top: 15px; padding: 27px 23px; } }
/* 화면 색 (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); }