/* Shared interface tokens. Loaded after legacy layout rules; rich-text content
   keeps its own colors, emphasis, lists, whitespace and image presentation. */
:root {
  --font-ui: 'Nunito', 'Noto Sans KR', 'Malgun Gothic', 'Apple SD Gothic Neo', system-ui, sans-serif;
  --text-xs: .8125rem; --text-sm: .875rem; --text-base: 1rem;
  --text-card: 1.25rem; --text-section: 1.5rem; --text-page: 2rem;
  --weight-normal: 400; --weight-medium: 600; --weight-bold: 700;
  --space-1: 4px; --space-2: 8px; --space-3: 12px;
  --space-4: 16px; --space-6: 24px; --space-8: 32px;
  --radius-control: 10px; --radius-card: 16px;
  --control-height: 44px; --control-compact: 32px;
  --surface-input: #fffdfa; --surface-soft: #fff8ef;
  --border-input: #bcab9c; --focus-ring: #406aa0;
  --action-hover: #713b1d; --danger: #943d2e;
}
body {font-family:var(--font-ui);font-size:var(--text-base);line-height:1.55}
button,input,select,textarea {font-family:var(--font-ui)}
h1,h2,h3 {font-family:var(--font-ui);font-weight:var(--weight-bold);line-height:1.25;overflow-wrap:anywhere}
h1,.login-panel h1,.builder-top h1,.lesson-content h1,.course-editor-top h1 {font-size:var(--text-page);margin-bottom:var(--space-4)}
h2 {font-size:var(--text-section);margin-bottom:var(--space-4)}
h3,.lesson-block h2,.demo-layout .notice h2,.lesson-navigation h2 {font-size:var(--text-card)}
.brand {font:var(--weight-bold) 28px/1.25 var(--font-ui);gap:var(--space-4);min-width:0}
.brand span {overflow-wrap:anywhere}
.stat strong {font:var(--weight-bold) 32px/1.3 var(--font-ui)}
.module-summary strong,.scenario-name {font:var(--weight-medium) var(--text-card)/1.35 var(--font-ui)}
.block-palette h2 {font:var(--weight-bold) 20px/1.3 var(--font-ui)}
.editor-card-head h2,.task-top h2 {font-family:var(--font-ui);font-size:18px;line-height:1.4}
.count,.block-palette button,.mini-button,.builder-field input,.builder-field textarea,.option-editor input[type=text],.answer-input {font-family:var(--font-ui)}
.intro,.login-panel .intro {font-size:var(--text-base);line-height:1.6;margin-bottom:var(--space-6)}
.eyebrow {font-size:var(--text-xs);letter-spacing:.1em;margin-bottom:var(--space-3)}
.hint,.stage-note,.media-caption,.students-table small,.material-scroll>.hint {font-size:var(--text-sm);line-height:1.5}
.sidebar nav a {font-size:var(--text-base);padding:var(--space-3) var(--space-4);gap:var(--space-3)}
.side-motto {font-size:20px;margin:var(--space-8) var(--space-4)}
.dashboard {padding:var(--space-8);min-width:0}
.workspace {grid-template-columns:240px minmax(0,1fr)}
.panel {border-radius:var(--radius-card);box-shadow:none;min-width:0}
/* Bare panels are used for documents, settings and ordinary forms. Composite
   editor cards and stat blocks retain their own internal layout. */
.dashboard>.panel,.dashboard>form.panel,.form-panel,.content-card {padding:var(--space-6);margin-block:var(--space-6)}
.dashboard>.panel h2,.content-card h2 {font-size:var(--text-card)}
.course-card,.empty-panel,.progress-course,.recent-lessons,.structure-panel,.lesson-content,.review-attempt {padding:var(--space-6)}
.login-panel,.student-entry .login-panel {padding:var(--space-8);max-width:760px}
.course-form {padding:var(--space-6)}
.lesson-block {padding:var(--space-6);margin-block:var(--space-4)}
.panel>p:last-child {margin-bottom:0}
.notice,.flash,.error {padding:var(--space-4);line-height:1.55}
.notice p:last-child {margin-bottom:0}
.actions,.review-buttons,.structure-actions,.module-tools,.row-tools {gap:var(--space-3);flex-wrap:wrap}
.actions form {margin:0}
.block-tools,.rich-toolbar {gap:var(--space-2)}
/* Buttons: filled primary, bordered secondary, compact and destructive. */
.action,.primary {display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);min-height:var(--control-height);padding:10px var(--space-4);border-radius:var(--radius-control);border:1px solid var(--brown);background:var(--brown);color:#fffaf4;font:var(--weight-medium) 15px/1.4 var(--font-ui);text-decoration:none;white-space:normal;max-width:100%}
.primary {margin-top:var(--space-6)}
.primary span {font-size:18px;margin-left:var(--space-2)}
.action.secondary {background:var(--surface-input);color:var(--brown)}
.action.danger {background:var(--danger);border-color:var(--danger)}
.action:hover,.primary:hover {background:var(--action-hover);filter:none;text-decoration:none}
.action.secondary:hover {background:#f6e6d6}
.action.danger:hover {background:#783023}
.action:active,.primary:active {box-shadow:inset 0 0 0 2px #ffffff50}
.action:disabled,.primary:disabled,.mini-button:disabled,button[aria-disabled=true] {opacity:.55;cursor:not-allowed}
[aria-busy=true] {cursor:progress}
.mini-button,.module-tools button,.row-tools button {min-height:var(--control-compact);padding:var(--space-1) var(--space-2);border-radius:8px;font-size:var(--text-sm);line-height:1.4}
.mini-button.danger {border-color:var(--danger);color:var(--danger)}
.danger-link {text-decoration:underline;text-underline-offset:3px}
/* Form geometry excludes checkboxes, radio buttons and file inputs. */
:where(input:not([type]),input[type=text],input[type=password],input[type=search],input[type=email],input[type=url],input[type=number],input[type=date],select,textarea) {max-width:100%;min-height:var(--control-height);border:1px solid var(--border-input);border-radius:var(--radius-control);padding:10px var(--space-3);background:var(--surface-input);color:var(--ink);font:var(--text-base)/1.4 var(--font-ui)}
.login-form input:not([type=hidden]):not([type=checkbox]):not([type=radio]),.login-form select,.form-field input,.form-field select,.form-field textarea {min-height:var(--control-height);padding:10px var(--space-3);border-color:var(--border-input);border-radius:var(--radius-control);font-family:var(--font-ui)}
textarea {resize:vertical}
.login-form textarea,.form-panel textarea {width:100%;min-height:120px}
.login-form label,.form-field label,.builder-field label,.rich-label,.form-panel label {font-size:var(--text-sm);font-weight:var(--weight-medium);margin-bottom:var(--space-2)}
.form-panel label {display:block}
.form-panel form>p {margin-block:var(--space-4)}
.form-panel select {min-width:180px}
.form-field {margin-bottom:var(--space-6)}
.form-pair {gap:var(--space-4)}
input[type=checkbox],input[type=radio] {accent-color:var(--brown);flex-shrink:0}
.login-form input[type=checkbox],.login-form input[type=radio] {width:18px;min-height:18px;height:18px;padding:0;vertical-align:middle}
input:disabled,select:disabled,textarea:disabled {background:#f1eae3;color:var(--muted);cursor:not-allowed}
[aria-invalid=true] {border-color:var(--danger)}
:is(a,button,input,select,textarea,summary,[contenteditable]):focus-visible {outline:3px solid var(--focus-ring);outline-offset:3px}
/* Navigation/card titles have a shape or context; prose links stay underlined. */
.back-link,.editor-back,.subtle-link,.header-note,.structure-actions a,.module-tools a,.row-tools a {text-decoration:none;text-underline-offset:4px}
.back-link,.subtle-link {display:inline-block;padding-block:var(--space-2);margin-bottom:var(--space-4)}
.dashboard>h1 {margin-top:var(--space-2)}
.dashboard>.panel h2>a,.content-card h2>a,.course-card h2>a,.lesson-row>a,.recent-lesson a {text-decoration:none}
.dashboard>.panel:has(h2>a):hover,.content-card:has(h2>a):hover,.course-card:has(h2>a):hover {border-color:#b98a65}
.dashboard>.panel h2>a:hover,.content-card h2>a:hover,.course-card h2>a:hover,.lesson-row>a:hover,.recent-lesson a:hover,.back-link:hover,.subtle-link:hover,.header-note:hover {text-decoration:underline;text-underline-offset:4px}
.legal-text a,.rich-output a {text-decoration:underline;text-underline-offset:3px}
/* Keep compact editing tools compact, including all material controls. */
.rich-toolbar select,.rich-toolbar .mini-button,.material-panel input:not([type=checkbox]),.material-panel select,.material-rule select {min-height:var(--control-compact);padding:var(--space-1) var(--space-2);font-family:var(--font-ui);font-size:var(--text-sm)}
.builder-field input,.builder-field textarea,.option-editor input[type=text] {font-size:var(--text-base)}
.material-panel button {margin:var(--space-1)}
.material-table .mini-button {font-size:var(--text-xs)}
.builder-top .actions,.course-editor-top .actions {gap:var(--space-2)}
.builder-top .action,.course-editor-top .action {min-height:38px;font-size:var(--text-sm);padding:var(--space-2) var(--space-3)}
.rich-toolbar,.material-sources-picker,.grid-settings {min-width:0;max-width:100%}
.rich-toolbar select,.material-rule select {min-width:0}
.account,.heading-row>*,.form-pair>*,.profile-details>* {min-width:0}
.table-scroll,.grid-scroll,.answer-grid-scroll {max-width:100%}
.review-columns>*,.builder-columns>*,.lesson-layout>* {min-width:0}
.legal-text {margin-top:var(--space-6)}
@media(max-width:1000px) {
  .workspace {grid-template-columns:200px minmax(0,1fr)}
  .dashboard {padding:var(--space-6)}
  .brand {font-size:24px}
}
@media(max-width:760px) {
  :root {--text-page:1.75rem;--text-section:1.375rem}
  .workspace {display:block}
  .topbar {padding:var(--space-4);gap:var(--space-3);flex-wrap:wrap}
  .brand {font-size:23px;gap:var(--space-3)}
  .brand .brand-logo {width:60px}
  .sidebar {padding:var(--space-4) var(--space-4) 0;border:0}
  .sidebar nav {display:flex;flex-wrap:wrap;gap:var(--space-1)}
  .sidebar nav a {padding:var(--space-2) var(--space-3);min-height:44px;font-size:15px}
  .side-motto {display:none}
  .dashboard,.login-layout {padding:var(--space-6) var(--space-4)}
  .dashboard>.panel,.dashboard>form.panel,.form-panel,.content-card,.course-card,.empty-panel,.progress-course,.recent-lessons,.structure-panel,.lesson-content,.review-attempt {padding:var(--space-4)}
  .login-panel,.student-entry .login-panel {padding:var(--space-6) var(--space-4)}
  .lesson-block {padding:var(--space-4)}
  .form-pair {grid-template-columns:1fr;gap:0}
  .actions {gap:var(--space-2)}
  .actions>* {max-width:100%}
  .lesson-navigation {padding:var(--space-4)}
  .progress-course .students-table {min-width:560px;table-layout:auto}
}
/* Anchor clipped accessible labels to the scroller rather than the viewport. */
.answer-grid-scroll{position:relative}
.dashboard>a:first-child{text-decoration:none;display:inline-block;padding-block:var(--space-2);margin-bottom:var(--space-4)}
.dashboard>a:first-child:hover{text-decoration:underline;text-underline-offset:4px}
.table-actions{display:flex;flex-wrap:wrap;gap:var(--space-2);align-items:center}
.table-actions .action{margin:0;min-width:104px}
.action.secondary.danger{background:var(--surface-input);color:var(--danger);border-color:var(--danger)}
.action.secondary.danger:hover{background:#fff0e9}
.header-note.demo-code-entry{display:block;flex-shrink:0}