:root {
  --font: "Pretendard", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;

  --brand: #24c4b3;
  --brand-hover: #43d6c5;
  --brand-soft: #123b4a;
  --danger: #dc2626;
  --danger-soft: #fef2f2;

  --ink: #eaf3fb;
  --ink-2: #bdd0df;
  --ink-3: #8fa9bd;
  --line: #29465d;
  --line-strong: #46657c;
  --page: #081522;
  --surface: #102638;

  --side-bg: #091a2a;
  --side-bg-2: #0d2537;
  --side-ink: #b4cad9;
  --side-ink-active: #f0fbff;

  --topbar-h: 57px;   /* GNB: 60px -5% */
  --side-w: 250px;
  --side-w-collapsed: 60px;
  --footer-h: 10px;

  --radius: 10px;
  --focus: 0 0 0 3px rgb(36 196 179 / .26);
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: var(--font);
  font-size: 14px;
  color: var(--ink);
  background: var(--page);
  -webkit-font-smoothing: antialiased;
  letter-spacing: -0.01em;
}
a { color: inherit; }
button, input, select { font-family: inherit; }

/* ── Buttons: Tailwind tone & manner (same as legacy ui-modern.css) ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 36px; padding: 8px 14px;
  border: 0; border-radius: 6px;
  font-size: 14px; font-weight: 600; line-height: 20px; white-space: nowrap;
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);
  transition: background-color .15s, color .15s, box-shadow .15s;
  cursor: pointer; text-decoration: none;
}
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.btn-primary { background: var(--brand); color: #06111d; }
.btn-primary:hover { background: var(--brand-hover); }
.btn-neutral { background: #10273a; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-strong), 0 1px 2px 0 rgb(0 0 0 / .18); }
.btn-neutral:hover { background: #17354a; }
.btn-danger { background: #dc2626; color: #fff; }                  /* bg-red-600 */
.btn-danger:hover { background: #ef4444; }
.btn-ghost { background: transparent; color: var(--ink-2); box-shadow: none; }
.btn-ghost:hover { background: #10273a; }
.btn-block { width: 100%; }
.btn-lg { min-height: 44px; padding: 10px 18px; font-size: 15px; }

/* ── Form controls ──────────────────────────────────────────────────── */
.input, .select {
  height: 36px; padding: 0 12px;
  border: 1px solid var(--line-strong); border-radius: 6px;
  background: #0b1929; color: var(--ink); font-size: 14px;
  transition: border-color .15s, box-shadow .15s;
}
.input:focus, .select:focus { outline: none; border-color: var(--brand); box-shadow: var(--focus); }
.input-lg { height: 44px; font-size: 15px; }

/* ── Forms (migrated detail screens) ───────────────────────────────── */
.form-grid { display: grid; grid-template-columns: 140px minmax(0, 640px); gap: 14px 20px; align-items: start; }
.form-grid--richtext { grid-template-columns: 140px minmax(0, 860px); }
.form-grid > label { padding-top: 9px; font-weight: 600; color: var(--ink-2); }
.form-grid .req { color: var(--danger); }
.form-grid .input, .form-grid .select { width: 100%; }
.form-grid .textarea { height: auto; padding: 8px 12px; line-height: 1.5; resize: vertical; }
.form-grid .file-preview { max-width: 220px; max-height: 120px; border-radius: 6px; box-shadow: inset 0 0 0 1px var(--line); display: block; }
.form-grid .stack { display: grid; gap: 8px; }
.form-grid .row { display: flex; gap: 8px; }
.form-grid .static { padding-top: 9px; }
.form-grid .checks { display: flex; gap: 18px; flex-wrap: wrap; padding-top: 8px; }
.form-grid .check { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; }
.form-grid + .card, .card + .card { margin-top: 20px; }
.form-grid .hint { margin: 6px 0 0; color: var(--ink-3); font-size: 12.5px; }
.form-grid .input[readonly] { background: #10273a; color: var(--ink-2); }
.form-grid .form-error, .form-grid .form-actions { grid-column: 1 / -1; }
/* Detail forms use the whole work area: fields flow into as many columns as fit (3 on FHD, 2 on laptops, 1 on phones)
   so a typical form shows without scrolling. Wide controls (editor, long textarea, option lists) take a full row. */
.form-grid.form-grid--cols { grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr)); gap: 14px 32px; }
.form-grid--cols > .form-field { display: grid; grid-template-columns: 124px minmax(0, 1fr); gap: 12px; align-items: start; min-width: 0; }
.form-grid--cols > .form-field > label { padding-top: 9px; font-weight: 600; color: var(--ink-2); }
.form-grid--cols > .form-field--wide { grid-column: 1 / -1; }
.form-grid--cols .textarea { min-height: 38px; }
@media (max-width: 700px) { .form-grid--cols > .form-field { grid-template-columns: 1fr; gap: 6px; } .form-grid--cols > .form-field > label { padding-top: 0; } }
.form-actions { display: flex; gap: 8px; padding: 12px 0 0; border-top: 1px solid var(--line); position: sticky; bottom: 0; background: var(--surface); }
/* position: relative keeps AG Grid's absolutely positioned helpers inside the box (they extended the page otherwise) */
.fit-scroll { position: relative; overflow-y: auto; overscroll-behavior: contain; padding-right: 2px; }
.fit-scroll > .card:first-child { padding-bottom: 0; }
.fit-scroll .form-actions { margin: 0 -20px; padding: 12px 20px 20px; border-radius: 0 0 var(--radius) var(--radius); }

/* ── Student detail: compact, monitor-like workspace ─────────────── */
.content.student-detail-content {
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: #f4f4f2;
  color: #0b0b0b;
  --brand: #2a78d6;
  --brand-hover: #1768c7;
  --brand-soft: #eaf2fd;
  --ink: #0b0b0b;
  --ink-2: #52514e;
  --ink-3: #7a7974;
  --line: rgb(11 11 11 / .10);
  --line-strong: rgb(11 11 11 / .18);
  --surface: #fcfcfb;
}
.student-detail { flex: 1; min-height: 0; display: grid; grid-template-rows: clamp(260px, 36vh, 346px) minmax(0, 1fr); gap: 14px; }
.student-detail .card { margin: 0; border-color: rgb(11 11 11 / .10); border-radius: 10px; box-shadow: none; background: #fcfcfb; }
.student-detail__profile { min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto auto; align-items: stretch; gap: 10px; overflow: hidden; padding: 14px 16px !important; }
.student-detail__profile-head, .student-detail__history-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.student-detail h2 { margin: 0; color: #0b0b0b; font-size: 15px; font-weight: 600; letter-spacing: .01em; }
.student-detail__profile-head p, .student-detail__history-head p { margin: 3px 0 0; color: #7a7974; font-size: 12px; }
.student-detail__sections { min-height: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.student-detail__section { min-width: 0; min-height: 0; overflow: auto; border: 1px solid rgb(11 11 11 / .10); border-radius: 8px; background: #f0efeb; padding: 10px 12px; }
.student-detail__section h3 { margin: 0 0 9px; color: #52514e; font-size: 12px; font-weight: 600; letter-spacing: .02em; }
.student-detail__section-body { display: grid; gap: 8px; }
.student-detail__field { display: grid; gap: 4px; min-width: 0; color: #52514e; font-size: 12px; font-weight: 500; }
.student-detail__field > .input, .student-detail__field > .select { width: 100%; height: 32px; padding: 0 9px; border-color: rgb(11 11 11 / .15); border-radius: 6px; background: #fcfcfb; color: #0b0b0b; font-size: 13px; }
.student-detail__field > .textarea { min-height: 58px; height: 58px; padding: 7px 9px; resize: vertical; }
.student-detail__field .static { min-height: 32px; padding: 7px 9px; overflow: hidden; border: 1px solid rgb(11 11 11 / .10); border-radius: 6px; background: #e7e6e1; color: #52514e; text-overflow: ellipsis; white-space: nowrap; }
.student-detail__field .checks { min-height: 32px; padding: 6px 0; gap: 10px; }
.student-detail__field .check { font-size: 13px; }
.student-detail__profile .form-error { min-height: 0; margin: 0; }
.student-detail__actions { position: static; bottom: auto; display: flex; align-items: center; justify-content: flex-end; min-height: 38px; padding: 10px 0 0 !important; border-top: 1px solid rgb(11 11 11 / .10); background: transparent !important; }
.student-detail__actions > a:first-child { margin-right: auto; }
.student-detail__actions .btn { min-height: 32px; padding: 6px 11px; font-size: 12px; }
.student-detail__history { min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); padding: 14px 16px; overflow: hidden; }
.student-detail__tabs { display: inline-flex; gap: 2px; padding: 2px; border-radius: 7px; background: #f0efeb; }
.student-detail__tabs button { min-height: 30px; padding: 5px 11px; border: 0; border-radius: 5px; background: transparent; color: #52514e; font: inherit; font-size: 12px; cursor: pointer; }
.student-detail__tabs button:hover { background: #e7e6e1; }
.student-detail__tabs button.active { background: #fcfcfb; color: #0b0b0b; font-weight: 600; box-shadow: 0 1px 2px rgb(0 0 0 / .10); }
.student-detail__panels, .student-detail__panel { min-height: 0; height: 100%; }
.student-detail__panel { padding-top: 12px; }
.student-detail__panel > div { height: 100%; }
.student-detail .ag-theme-quartz { --ag-header-background-color: #f0efeb; --ag-header-foreground-color: #52514e; --ag-border-color: rgb(11 11 11 / .10); --ag-row-hover-color: #eaf2fd; --ag-selected-row-background-color: #eaf2fd; --ag-active-color: #2a78d6; --ag-wrapper-border-radius: 8px; }
.student-detail .pager { margin-top: 8px; }
.student-detail .pager .info { font-size: 12px; }
@media (max-width: 1100px) { .student-detail { grid-template-rows: clamp(300px, 45vh, 430px) minmax(0, 1fr); } .student-detail__sections { grid-template-columns: 1fr 1fr; } }
@media (max-width: 700px) { .content.student-detail-content { overflow: auto; height: auto; } .student-detail { display: block; } .student-detail__profile, .student-detail__history { min-height: auto; margin-bottom: 14px !important; } .student-detail__sections { grid-template-columns: 1fr; } .student-detail__history { height: 480px; } .student-detail__history-head { align-items: stretch; flex-direction: column; } }

/* Student row quick view: the list remains in place while the detail is inspected. */
.student-modal { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 24px; }
.student-modal__backdrop { position: absolute; inset: 0; background: rgb(11 11 11 / .44); backdrop-filter: blur(2px); }
.student-modal__panel { position: relative; display: grid; grid-template-rows: auto minmax(0, 1fr); width: min(1240px, 100%); max-height: min(760px, calc(100dvh - 48px)); overflow: hidden; border: 1px solid rgb(11 11 11 / .12); border-radius: 10px; background: #fcfcfb; box-shadow: 0 24px 64px rgb(0 0 0 / .24); color: #0b0b0b; }
.student-modal__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 16px 18px 13px; border-bottom: 1px solid rgb(11 11 11 / .10); }
.student-modal__head-actions { display: inline-flex; align-items: center; gap: 6px; }.student-modal__head-actions .btn { min-height: 30px; padding: 5px 10px; font-size: 12px; }
.student-modal__head h2 { margin: 0; font-size: 16px; font-weight: 600; }
.student-modal__head p { margin: 3px 0 0; color: #7a7974; font-size: 12px; }
.student-modal__close { display: grid; place-items: center; width: 30px; height: 30px; border: 0; border-radius: 6px; background: transparent; color: #52514e; font-size: 23px; line-height: 1; cursor: pointer; }
.student-modal__close:hover { background: #f0efeb; color: #0b0b0b; }
.student-modal__body { min-height: 0; overflow: auto; padding: 14px 18px 18px; }
.student-modal__sections { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.student-modal__section { min-width: 0; border: 1px solid rgb(11 11 11 / .10); border-radius: 8px; background: #f0efeb; padding: 10px 12px; }
.student-modal__section h3 { margin: 0 0 8px; color: #52514e; font-size: 12px; font-weight: 600; }
.student-modal__kv { display: grid; grid-template-columns: 82px minmax(0, 1fr); gap: 6px 10px; margin: 0; font-size: 12px; }
.student-modal__kv dt { color: #7a7974; }.student-modal__kv dd { min-width: 0; margin: 0; overflow: hidden; color: #0b0b0b; text-overflow: ellipsis; white-space: nowrap; }
.student-modal__tabs { display: flex; gap: 2px; margin-top: 14px; padding: 2px; width: max-content; border-radius: 7px; background: #f0efeb; }
.student-modal__tabs button { min-height: 30px; padding: 5px 11px; border: 0; border-radius: 5px; background: transparent; color: #52514e; font: inherit; font-size: 12px; cursor: pointer; }
.student-modal__tabs button.active { background: #fcfcfb; color: #0b0b0b; font-weight: 600; box-shadow: 0 1px 2px rgb(0 0 0 / .10); }
.student-modal__table-wrap { overflow: auto; max-height: 260px; margin-top: 8px; border: 1px solid rgb(11 11 11 / .10); border-radius: 8px; }
.student-modal table { width: 100%; border-collapse: collapse; font-size: 12px; }.student-modal th, .student-modal td { padding: 9px 10px; border-bottom: 1px solid rgb(11 11 11 / .08); text-align: left; white-space: nowrap; }.student-modal th { position: sticky; top: 0; background: #f0efeb; color: #52514e; font-weight: 600; }.student-modal td { overflow: hidden; max-width: 360px; text-overflow: ellipsis; }.student-modal tbody tr:last-child td { border-bottom: 0; }.student-modal__empty { padding: 28px; color: #7a7974; text-align: center; }
@media (max-width: 800px) { .student-modal { padding: 12px; }.student-modal__sections { grid-template-columns: 1fr; }.student-modal__panel { max-height: calc(100dvh - 24px); } }
@media (max-width: 700px) { .form-grid { grid-template-columns: 1fr; } .form-grid > label { padding-top: 0; } }

/* ── Login ─────────────────────────────────────────────────────────── */
.login-page {
  min-height: 100vh; display: grid; place-items: center; padding: 24px 16px calc(24px + var(--footer-h));
  background:
    radial-gradient(900px 500px at 15% 0%, rgb(30 138 172 / .27) 0%, transparent 60%),
    radial-gradient(800px 480px at 100% 100%, rgb(126 227 208 / .16) 0%, transparent 55%),
    #040a12;
}
.login-page { position: relative; overflow: hidden; }
.login-bg { position: fixed; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; pointer-events: none; }
.login-card {
  position: relative; z-index: 1;
  width: 100%; max-width: 400px; padding: 36px 32px 32px;
  background: rgb(14 32 50 / .94); backdrop-filter: blur(12px); border: 1px solid rgb(126 227 208 / .23); border-radius: 3px;
  box-shadow: 0 30px 60px -20px rgb(0 0 0 / .72), 0 0 80px -20px rgb(30 138 172 / .32);
}
.login-brand { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 0 auto 28px; color: #e8f8ff; font-size: 30px; font-weight: 850; letter-spacing: -.06em; line-height: .9; white-space: nowrap; }
.login-brand img { width: 56px; height: 56px; object-fit: contain; }.login-brand strong, .admin-brand-wordmark strong { color: #13a8e7; }.login-brand small { display: block; margin-top: 5px; color: #95b9c9; font-size: 8px; font-weight: 800; letter-spacing: .13em; }
.login-card form { display: grid; gap: 12px; }
.login-card .btn { margin-top: 8px; }
.form-error { min-height: 20px; margin: 0; color: var(--danger); font-size: 13px; }

/* ── Shell ─────────────────────────────────────────────────────────── */
.topbar {
  position: fixed; inset: 0 0 auto 0; height: var(--topbar-h); z-index: 30;
  display: flex; align-items: center;
  background: var(--surface); border-bottom: 1px solid var(--line);
}
.topbar .brand {
  width: var(--side-w); height: 100%; display: flex; align-items: center; padding: 0 16px;
  transition: width .2s ease;
}
.topbar .brand .logo-full { height: auto; }
.admin-brand-lockup { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; color: #e8f8ff; font-size: 20px; font-weight: 850; letter-spacing: -.06em; line-height: .9; white-space: nowrap; }.admin-brand-mark { width: 38px; height: 38px; object-fit: contain; }.admin-brand-wordmark small { display: block; margin-top: 4px; color: #95b9c9; font-size: 7px; font-weight: 800; letter-spacing: .11em; }
.topbar .brand .logo-icon { display: none; width: 40px; height: 40px; object-fit: contain; }
.topbar .hamburger { margin-left: 8px; }
.topbar .spacer { flex: 1; }
.topbar .user { display: flex; align-items: center; gap: 10px; padding-right: 16px; color: var(--ink-2); font-weight: 600; }
.topbar .user .role { padding: 2px 8px; border-radius: 999px; background: var(--brand-soft); color: var(--brand); font-size: 12px; }

.sidebar {
  position: fixed; top: var(--topbar-h); bottom: var(--footer-h); left: 0; width: var(--side-w); z-index: 20;
  overflow-y: auto; overflow-x: hidden;
  background: var(--side-bg); color: var(--side-ink);
  transition: width .2s ease;
}
.content {
  margin-left: var(--side-w); padding: calc(var(--topbar-h) + 22px) 24px calc(var(--footer-h) + 32px) 22px;   /* top/left gutters -10% */
  min-height: 100vh; background: #f4f8fb; color: #0e2130; transition: margin-left .2s ease;
  /* The admin work area stays crisp and paper-white while the global shell remains AI LMS navy. */
  --brand: #078c89;
  --brand-hover: #057674;
  --brand-soft: #dff6f3;
  --ink: #0e2130;
  --ink-2: #2f4a5c;
  --ink-3: #506a7a;
  --line: #d6e3ea;
  --line-strong: #9db6c5;
  --surface: #ffffff;
}
/* Admin work screens are intentionally light: keep every interactive control
   on the same readable white surface instead of inheriting the shell's navy UI. */
.content .input,
.content .select {
  background: #fff;
  color: #0e2130;
}
.content .input::placeholder { color: #71899a; }
.content .input:disabled,
.content .select:disabled,
.content .form-grid .input[readonly] {
  background: #f4f7f9;
  color: #4a6475;
}
.content .btn-primary { background: #078c89; color: #fff; }
.content .btn-primary:hover { background: #057674; }
.content .btn-neutral {
  background: #fff;
  color: #17303f;
  box-shadow: inset 0 0 0 1px #b9cdd8, 0 1px 2px rgb(15 43 60 / .08);
}
.content .btn-neutral:hover { background: #f2f7f8; border-color: #8baebd; }
.content .btn-ghost:hover { background: #eef6f6; }

/* ── GNB theme toggle ─────────────────────────────────────────────── */
.theme-toggle { min-height: 30px; padding: 4px 9px; color: #bdd1de; font-size: 12px; }
.theme-toggle span:first-child { font-size: 16px; line-height: 1; }

/* ── Theme-aware admin shell (GNB + LNB) ───────────────────────────── */
:root[data-theme="light"] .topbar { background: #ffffff; border-color: #d6e3ea; box-shadow: 0 2px 12px rgb(27 67 91 / .06); }
:root[data-theme="light"] .topbar .user { color: #1d3a4d; }
:root[data-theme="light"] .admin-brand-lockup { color: #0e2637; }
:root[data-theme="light"] .admin-brand-wordmark small { color: #47667a; }
:root[data-theme="light"] .theme-toggle { color: #2a485b; }
:root[data-theme="light"] .topbar .btn-ghost:hover { background: #eaf5f4; color: #057674; }
:root[data-theme="light"] .topbar .btn-neutral { color: #17303f; background: #f8fbfc; box-shadow: inset 0 0 0 1px #abc2d0; }
:root[data-theme="light"] .sidebar { background: #f7fbfd; color: #27445a; border-right: 1px solid #d6e3ea; }
:root[data-theme="light"] .nav-group > button:hover { color: #087f7c; background: #e8f5f4; }
:root[data-theme="light"] .nav-group.open > button { color: #0e2a3d; background: #edf6f8; }
:root[data-theme="light"] .nav-group ul { background: #eef6f8; }
:root[data-theme="light"] .nav-group li a { color: #36546a; }
:root[data-theme="light"] .nav-group li a:hover { color: #087f7c; background: #e4f3f1; }
:root[data-theme="light"] .nav-group li a.active { color: #057674; background: #dff3f0; box-shadow: inset 3px 0 0 #078c89; }

:root[data-theme="dark"] .topbar { background: #0b1d2e; border-color: #29465d; }
:root[data-theme="dark"] .sidebar { background: #091a2a; color: #b4cad9; }
:root[data-theme="dark"] .theme-toggle { color: #c7d8e4; }

/* The operational workspace changes with the selected theme. */
:root[data-theme="dark"] .content {
  background: #0c1625;
  color: #eaf3fb;
  --brand: #27c5b5;
  --brand-hover: #4cdbc9;
  --brand-soft: #123f4b;
  --ink: #eaf3fb;
  --ink-2: #bfd0de;
  --ink-3: #89a4b8;
  --line: #29445c;
  --line-strong: #46657b;
  --surface: #14243a;
}
:root[data-theme="dark"] .content .input,
:root[data-theme="dark"] .content .select,
:root[data-theme="dark"] .content .textarea { background: #0e1c2d; color: #eaf3fb; border-color: #46657b; }
:root[data-theme="dark"] .content .input::placeholder { color: #7e9aaf; }
:root[data-theme="dark"] .content .input:disabled,
:root[data-theme="dark"] .content .select:disabled,
:root[data-theme="dark"] .content .form-grid .input[readonly] { background: #1b3045; color: #b7cad8; }
:root[data-theme="dark"] .content .btn-neutral { background: #1a3046; color: #eaf3fb; box-shadow: inset 0 0 0 1px #46657b; }
:root[data-theme="dark"] .content .btn-neutral:hover,
:root[data-theme="dark"] .content .btn-ghost:hover { background: #244057; }
:root[data-theme="dark"] .content .card { background: #14243a; }
:root[data-theme="dark"] .content .ag-theme-quartz { --ag-background-color: #14243a; --ag-foreground-color: #eaf3fb; --ag-header-background-color: #0f2134; --ag-header-foreground-color: #c7d9e5; --ag-border-color: #29445c; --ag-row-border-color: #29445c; --ag-odd-row-background-color: #16283e; --ag-row-hover-color: #1b4151; --ag-selected-row-background-color: #1b4151; --ag-active-color: #27c5b5; --ag-input-focus-border-color: #27c5b5; }
:root[data-theme="dark"] .content.student-detail-content { background: #111827; color: #e8edf3; }
:root[data-theme="dark"] .student-detail .card,
:root[data-theme="dark"] .student-detail__section { background: #172033; border-color: #2c3b4f; }
:root[data-theme="dark"] .student-detail h2,
:root[data-theme="dark"] .student-detail__field > .input,
:root[data-theme="dark"] .student-detail__field > .select { color: #e8edf3; }
:root[data-theme="dark"] .student-detail__section h3,
:root[data-theme="dark"] .student-detail__field { color: #bdc9d6; }
:root[data-theme="dark"] .student-detail__field > .input,
:root[data-theme="dark"] .student-detail__field > .select,
:root[data-theme="dark"] .student-detail__field .static { background: #101826; border-color: #44566c; color: #e8edf3; }
:root[data-theme="dark"] .student-detail__tabs { background: #101826; }
:root[data-theme="dark"] .student-detail__tabs button { color: #bdc9d6; }
:root[data-theme="dark"] .student-detail__tabs button.active { background: #29394e; color: #fff; }

/* Dark operational canvas: AG Grid has its own background variables, so set
   them explicitly to prevent a white table body inside the navy workspace. */
:root[data-theme="dark"] .content .ag-theme-quartz .ag-root-wrapper,
:root[data-theme="dark"] .content .ag-theme-quartz .ag-root,
:root[data-theme="dark"] .content .ag-theme-quartz .ag-center-cols-viewport,
:root[data-theme="dark"] .content .ag-theme-quartz .ag-center-cols-container,
:root[data-theme="dark"] .content .ag-theme-quartz .ag-pinned-left-cols-viewport,
:root[data-theme="dark"] .content .ag-theme-quartz .ag-pinned-right-cols-viewport { background-color: #14243a; }
:root[data-theme="dark"] .content .ag-theme-quartz .ag-row { color: #eaf3fb; background-color: #14243a; }
:root[data-theme="dark"] .content .ag-theme-quartz .ag-row-odd { background-color: #16283e; }
:root[data-theme="dark"] .content .ag-theme-quartz .ag-row:hover,
:root[data-theme="dark"] .content .ag-theme-quartz .ag-row-hover { background-color: #1b4151; }
:root[data-theme="dark"] .content .ag-theme-quartz .ag-header,
:root[data-theme="dark"] .content .ag-theme-quartz .ag-header-cell { background-color: #0f2134; }
:root[data-theme="dark"] .content .ag-theme-quartz .cell-link { color: #59d9ce; }
:root[data-theme="dark"] .content .pager button { background: #14243a; color: #bfd0de; border-color: #46657b; }
:root[data-theme="dark"] .content .pager button.current { background: #27c5b5; border-color: #27c5b5; color: #06221f; }
:root[data-theme="dark"] .content .richtext,
:root[data-theme="dark"] .content .dual__col,
:root[data-theme="dark"] .content .note { background: #14243a; border-color: #29445c; }
:root[data-theme="dark"] .content .dual__head,
:root[data-theme="dark"] .content .hwp-output pre { background: #0f2134; color: #eaf3fb; border-color: #29445c; }
:root[data-theme="dark"] .content .ranking-table th { background: #0f2134; }
:root[data-theme="dark"] .content .ranking-table tbody tr:hover { background: #1b4151; }
:root[data-theme="dark"] .content .app-modal__panel,
:root[data-theme="dark"] .content .record-modal__panel { background: #14243a; border-color: #29445c; }

.nav-group > button {
  display: flex; align-items: center; gap: 12px; width: 100%; height: 46px; padding: 0 18px;
  border: 0; background: transparent; color: inherit; font-size: 15px; font-weight: 600; text-align: left; cursor: pointer;
}
.nav-group > button:hover { color: var(--side-ink-active); background: rgba(255, 255, 255, .04); }
.nav-group > button .ico { width: 20px; flex: none; text-align: center; font-size: 16px; }
.nav-group > button .label { flex: 1; white-space: nowrap; }
.nav-group > button .chev { transition: transform .2s ease; font-size: 11px; opacity: .7; }
.nav-group.open > button { color: var(--side-ink-active); }
.nav-group.open > button .chev { transform: rotate(90deg); }
.nav-group ul { display: none; margin: 0; padding: 4px 0 8px; list-style: none; background: var(--side-bg-2); }
.nav-group.open ul { display: block; }
.nav-group li a {
  display: flex; align-items: center; gap: 8px; padding: 9px 18px 9px 50px;
  color: var(--side-ink); font-size: 14px; text-decoration: none; white-space: nowrap;
}
.nav-group li a:hover { color: var(--side-ink-active); }
.nav-group li a.active { color: #a2f3e3; font-weight: 700; box-shadow: inset 3px 0 0 var(--brand); background: rgb(126 227 208 / .10); }
.nav-group li a .tag { margin-left: auto; padding: 1px 6px; border-radius: 4px; background: rgba(255, 255, 255, .08); font-size: 10.5px; color: #9ca3af; }

/* Collapsed sidebar (hamburger): icon-only logo and rail */
body.side-collapsed .topbar .brand { width: var(--side-w-collapsed); padding: 0 10px; }
body.side-collapsed .topbar .brand .logo-full { display: none; }
body.side-collapsed .topbar .brand .logo-icon { display: block; }
body.side-collapsed .sidebar { width: var(--side-w-collapsed); }
body.side-collapsed .content { margin-left: var(--side-w-collapsed); }
body.side-collapsed .nav-group > button { justify-content: center; padding: 0; }
body.side-collapsed .nav-group > button .label,
body.side-collapsed .nav-group > button .chev,
body.side-collapsed .nav-group ul { display: none; }

.app-footer {
  position: fixed; inset: auto 0 0 0; height: var(--footer-h); z-index: 40;
  background: #000; color: #fff; font-size: 8px; font-weight: 700; letter-spacing: 2px;
  line-height: var(--footer-h); text-align: center;
}

/* ── Page building blocks ─────────────────────────────────────────── */
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.page-head h1 { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -0.02em; }
.page-head p { margin: 4px 0 0; color: var(--ink-3); font-size: 13px; }

.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; }
.card + .card { margin-top: 20px; }
.card h2 { margin: 0 0 4px; font-size: 16px; font-weight: 700; }
.card .sub { margin: 0 0 12px; color: var(--ink-3); font-size: 13px; }
.card__title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.card__title-row .sub { margin-bottom: 12px; }
.card__more { flex: none; padding: 4px 0; color: var(--brand); background: transparent; border: 0; font-size: 12px; font-weight: 750; cursor: pointer; }
.card__more:hover { color: var(--brand-hover); text-decoration: underline; }

.ranking-modal { position: fixed; z-index: 100; inset: 0; display: grid; place-items: center; padding: 24px; }
.ranking-modal__backdrop { position: absolute; inset: 0; background: rgb(17 24 39 / .52); backdrop-filter: blur(2px); }
.ranking-modal__panel { position: relative; width: min(720px, 100%); max-height: min(720px, calc(100dvh - 48px)); overflow: hidden; background: var(--surface); border-radius: 14px; box-shadow: 0 24px 64px rgb(0 0 0 / .25); outline: none; }
.ranking-modal__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 22px 24px 18px; border-bottom: 1px solid var(--line); }
.ranking-modal__head h2 { margin: 0; font-size: 18px; }
.ranking-modal__head p { margin: 5px 0 0; color: var(--ink-3); font-size: 13px; }
.ranking-modal__close { display: grid; place-items: center; width: 34px; height: 34px; margin: -5px -7px 0 0; color: var(--ink-2); background: transparent; border: 0; border-radius: 7px; font-size: 27px; line-height: 1; cursor: pointer; }
.ranking-modal__close:hover { color: var(--ink); background: #10273a; }
.ranking-modal__body { max-height: calc(min(720px, 100dvh - 48px) - 92px); overflow: auto; }
.ranking-table { width: 100%; border-collapse: collapse; }
.ranking-table th, .ranking-table td { padding: 14px 24px; border-bottom: 1px solid var(--line); text-align: left; }
.ranking-table th { position: sticky; top: 0; z-index: 1; color: var(--ink-3); background: #0b1929; font-size: 12px; font-weight: 700; }
.ranking-table th:first-child, .ranking-table td:first-child { width: 78px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.ranking-table th:last-child, .ranking-table td:last-child { width: 145px; text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.ranking-table tbody tr:hover { background: #10273a; }
.ranking-table__empty { padding: 42px !important; color: var(--ink-3); text-align: center !important; }

.toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; }
.toolbar label { color: var(--ink-2); font-size: 13px; font-weight: 600; }
.toolbar .grow { flex: 1; }

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px; margin-bottom: 20px; }
.stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; }
.stat .k { color: var(--ink-3); font-size: 13px; font-weight: 600; }
.stat .v { margin-top: 8px; font-size: 26px; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.stat .v small { margin-left: 2px; font-size: 14px; font-weight: 600; color: var(--ink-3); }

/* Chart + data side by side, both filling the viewport (stacked on narrow screens) */
.split { display: grid; grid-template-columns: minmax(0, 3fr) minmax(340px, 2fr); gap: 20px; align-items: start; }
.split .card + .card { margin-top: 0; }
@media (max-width: 1200px) { .split { grid-template-columns: 1fr; } .split .card + .card { margin-top: 20px; } }

.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: 20px; }
.grid-2 .card + .card { margin-top: 0; }
.dash-charts { display: grid; gap: 20px; }
.dash-charts .card + .card, .dash-charts .card + .grid-2 { margin-top: 0; }
.dash-charts .apexcharts-canvas { margin: 0 auto; }
.chart-surface {
  --chart-bg: #ffffff;
  --chart-border: #d6e3ea;
  --chart-grid: #dce7ed;
  --chart-ink: #36566b;
  --chart-ink-muted: #627f92;
  --chart-series-primary: #078c89;
  --chart-series-secondary: #1976a3;
  --chart-marker-stroke: #ffffff;
  --chart-crosshair: #8aa8b9;
  overflow: hidden;
  background: var(--chart-bg);
  border: 1px solid var(--chart-border);
  border-radius: 4px;
}
.chart-surface .apexcharts-canvas,
.chart-surface .apexcharts-svg { background: var(--chart-bg) !important; }
:root[data-theme="dark"] .chart-surface {
  --chart-bg: #050b12;
  --chart-border: #25445a;
  --chart-grid: #25445a;
  --chart-ink: #bdd1de;
  --chart-ink-muted: #94afbf;
  --chart-series-primary: #7ee3d0;
  --chart-series-secondary: #28a9e8;
  --chart-marker-stroke: #0e2032;
  --chart-crosshair: #4e7185;
}
/* Tooltip markup keeps the theme class assigned at chart creation, so make
   its surface follow the current shell theme through CSS as well. */
:root[data-theme="light"] .chart-surface .apexcharts-tooltip.apexcharts-theme-dark,
:root[data-theme="light"] .chart-surface .apexcharts-xaxistooltip.apexcharts-theme-dark {
  color: #183043;
  background: #ffffff;
  border-color: #c6d8e2;
  box-shadow: 0 4px 14px rgb(24 48 67 / .14);
}
:root[data-theme="light"] .chart-surface .apexcharts-tooltip.apexcharts-theme-dark .apexcharts-tooltip-title {
  background: #f1f6f8;
  border-color: #d6e3ea;
}
:root[data-theme="light"] .chart-surface .apexcharts-xaxistooltip.apexcharts-theme-dark::before {
  border-bottom-color: #c6d8e2;
}
:root[data-theme="light"] .chart-surface .apexcharts-xaxistooltip.apexcharts-theme-dark::after {
  border-bottom-color: #ffffff;
}
.dash-charts.compact { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dash-charts.compact .grid-2 { display: contents; }

.pager { display: flex; gap: 4px; justify-content: center; align-items: center; margin-top: 16px; min-height: 34px; flex-wrap: nowrap; }
.pager button {
  min-width: 34px; height: 34px; padding: 0 8px; border: 1px solid var(--line-strong); border-radius: 6px;
  background: var(--surface); color: var(--ink-2); font-weight: 600; cursor: pointer;
}
.pager button:hover:not([disabled]) { border-color: var(--brand); color: var(--brand); }
.pager button.current { background: var(--brand); border-color: var(--brand); color: #06111d; }
.pager button[disabled] { opacity: .4; cursor: default; }
.pager .info { margin-left: 12px; color: var(--ink-3); font-size: 13px; }

.empty, .loading, .error-box { padding: 40px 0; text-align: center; color: var(--ink-3); }
.error-box { color: var(--danger); }

/* AG Grid: match the app */
.ag-theme-quartz {
  --ag-font-family: var(--font);
  --ag-font-size: 14px;
  --ag-header-background-color: #0b1929;
  --ag-header-foreground-color: var(--ink-2);
  --ag-border-color: var(--line);
  --ag-row-hover-color: var(--brand-soft);
  --ag-selected-row-background-color: var(--brand-soft);
  --ag-active-color: var(--brand);
  --ag-wrapper-border-radius: 8px;
}
.ag-theme-quartz .cell-link { color: var(--brand); font-weight: 600; cursor: pointer; }
.ag-theme-quartz .num { font-variant-numeric: tabular-nums; }
.ag-theme-quartz .ag-cell { display: flex; align-items: center; }
.ag-theme-quartz .ag-right-aligned-cell { justify-content: flex-end; }
.ag-theme-quartz .thumb-cell { display: flex; align-items: center; }
.thumb { position: relative; display: inline-grid; place-items: center; overflow: hidden; border-radius: 6px;
  background: linear-gradient(135deg, #123c52, #174759); color: #7ee3d0; font-weight: 800; font-size: 16px;
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / .06); }
.thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pill { display: inline-flex; align-items: center; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; line-height: 20px; }
.pill-on { background: #ecfdf5; color: #047857; box-shadow: inset 0 0 0 1px rgb(5 150 105 / .2); }
.pill-off { background: #10273a; color: #b8ccda; box-shadow: inset 0 0 0 1px rgb(148 175 191 / .2); }
.ag-theme-quartz .grid-message { color: var(--ink-3); font-weight: 600; }

@media (max-width: 900px) {
  :root { --side-w: 0px; }
  .topbar .brand { width: auto; }
  .sidebar { width: 0; }
  body.side-open .sidebar { width: 250px; }
  .content { margin-left: 0; padding-left: 16px; padding-right: 16px; }
  .grid-2 { grid-template-columns: 1fr; }
}


/* ── Modal (row actions, prompts) ───────────────────────────────────── */
.app-modal { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; }
.app-modal__backdrop { position: absolute; inset: 0; background: rgb(17 24 39 / .45); }
.app-modal__panel { position: relative; width: min(520px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow: auto; background: var(--surface); border-radius: 12px; padding: 22px 24px; box-shadow: 0 30px 60px -20px rgb(0 0 0 / .4); }
.app-modal__panel h2 { margin: 0 0 12px; font-size: 17px; }
.app-modal__msg { margin: 0 0 12px; color: var(--ink-2); }
.app-modal__grid { grid-template-columns: 110px minmax(0, 1fr); }
.app-modal__actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }

/* ── Row action buttons in grids ────────────────────────────────────── */
.row-actions { display: inline-flex; gap: 6px; }
.btn.btn-sm { min-height: 28px; padding: 4px 10px; font-size: 12.5px; line-height: 16px; }
.ag-theme-quartz .row-selected { background: var(--brand-soft); }
.input-sm { height: 30px; font-size: 13px; }

/* ── Rich text (wangEditor) ─────────────────────────────────────────── */
.richtext { border: 1px solid var(--line-strong); border-radius: 6px; overflow: hidden; background: var(--surface); }
.richtext__toolbar { border-bottom: 1px solid var(--line); }
.richtext__editor { overflow-y: auto; }
.multitext__row { align-items: center; }
.multitext__row .input { flex: 1; }

/* ── Dual list (class assignment) ───────────────────────────────────── */
.dual { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 14px; align-items: stretch; }
.dual__col { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; display: flex; flex-direction: column; }
.dual__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; background: #f9fafb; border-bottom: 1px solid var(--line); font-weight: 600; font-size: 13px; }
.dual__head .input { width: 140px; }
.dual__list { max-height: 260px; overflow: auto; padding: 4px 0; }
.dual__row { display: flex; align-items: center; gap: 8px; padding: 7px 10px; font-size: 13.5px; cursor: pointer; }
.dual__row:hover { background: var(--brand-soft); }
.dual__mid { display: flex; flex-direction: column; justify-content: center; gap: 8px; }
.note { padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; }
.note p { margin: 4px 0 8px; white-space: pre-wrap; color: var(--ink-2); }
.stats--compact { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 8px; }
.hwp-output pre { white-space: pre-wrap; font-family: var(--font); background: #f9fafb; padding: 12px; border-radius: 8px; }

/* ── FullCalendar ───────────────────────────────────────────────────── */
.fc { --fc-border-color: var(--line); --fc-button-bg-color: #fff; --fc-button-border-color: var(--line-strong); --fc-button-text-color: var(--ink); --fc-button-active-bg-color: #4f46e5; --fc-button-active-border-color: #4f46e5; --fc-button-hover-bg-color: #f9fafb; --fc-button-hover-border-color: #9ca3af; --fc-today-bg-color: var(--brand-soft); font-size: 13.5px; }
.fc .fc-button { font-weight: 600; border-radius: 6px; text-transform: none; }
.fc .fc-button-primary:not(:disabled).fc-button-active { color: #fff; }
.fc .fc-toolbar-title { font-size: 18px; font-weight: 700; }
.fc .fc-daygrid-event { border-radius: 4px; padding: 1px 4px; }

/* ── Generic management-list detail popup ─────────────────────────── */
.record-modal { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 24px; }
.record-modal__backdrop { position: absolute; inset: 0; background: rgb(11 11 11 / .44); backdrop-filter: blur(2px); }
.record-modal__panel { position: relative; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; width: min(720px, 100%); max-height: min(680px, calc(100dvh - 48px)); overflow: hidden; border: 1px solid rgb(11 11 11 / .12); border-radius: 10px; background: #fcfcfb; color: #0b0b0b; box-shadow: 0 24px 64px rgb(0 0 0 / .24); }
.record-modal__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 16px 18px 13px; border-bottom: 1px solid rgb(11 11 11 / .10); }
.record-modal__head h2 { margin: 0; font-size: 16px; font-weight: 600; }.record-modal__head p { margin: 3px 0 0; color: #7a7974; font-size: 12px; }
.record-modal__close { display: grid; place-items: center; width: 30px; height: 30px; border: 0; border-radius: 6px; background: transparent; color: #52514e; font-size: 23px; line-height: 1; cursor: pointer; }.record-modal__close:hover { background: #f0efeb; color: #0b0b0b; }
.record-modal__body { min-height: 0; overflow: auto; padding: 14px 18px; }.record-modal__fields { display: grid; grid-template-columns: minmax(120px, .42fr) minmax(0, 1fr); margin: 0; border-top: 1px solid rgb(11 11 11 / .10); }.record-modal__fields dt, .record-modal__fields dd { min-width: 0; margin: 0; padding: 10px 12px; border-bottom: 1px solid rgb(11 11 11 / .10); }.record-modal__fields dt { background: #f0efeb; color: #52514e; font-size: 12px; font-weight: 600; }.record-modal__fields dd { overflow: hidden; color: #0b0b0b; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.record-modal__actions { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 18px; border-top: 1px solid rgb(11 11 11 / .10); }.record-modal__actions .btn { min-height: 32px; padding: 6px 11px; font-size: 12px; }
@media (max-width: 700px) { .record-modal { padding: 12px; }.record-modal__panel { max-height: calc(100dvh - 24px); }.record-modal__fields { grid-template-columns: 110px minmax(0, 1fr); } }

/* ---- 접수 관리 (pages/intakes.js) ---- */
.intake-kpis { display: flex; gap: 10px; flex-wrap: wrap; }
.intake-kpi { display: inline-flex; flex-direction: column; min-width: 96px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.intake-kpi small { color: var(--ink-3); font-size: 11px; font-weight: 600; }
.intake-kpi b { font-size: 18px; font-variant-numeric: tabular-nums; }
.intake-kpi.is-warn { border-color: rgb(245 158 11 / .55); }
.intake-kpi.is-warn b { color: #f59e0b; }
.intake-toolbar .select, .intake-toolbar .input[type=date] { width: auto; }
.intake-toolbar__tilde { color: var(--ink-3); }
.chips { display: inline-flex; gap: 4px; padding: 3px; border-radius: 999px; background: var(--brand-soft); }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 12px; border: 0; border-radius: 999px; background: transparent; color: var(--ink-2); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.chip b { font-variant-numeric: tabular-nums; }
.chip:hover { color: var(--ink); }
.chip.active { background: var(--brand); color: #06111d; }
.chip:focus-visible { outline: none; box-shadow: var(--focus); }
.pill-received { background: rgb(36 196 179 / .16); color: #5fe0d0; box-shadow: inset 0 0 0 1px rgb(36 196 179 / .35); }
.pill-contacted { background: rgb(59 130 246 / .16); color: #7fb0ff; box-shadow: inset 0 0 0 1px rgb(59 130 246 / .35); }
.pill-reserved { background: rgb(245 158 11 / .16); color: #f8bd4f; box-shadow: inset 0 0 0 1px rgb(245 158 11 / .35); }
.pill-done { background: rgb(34 197 94 / .16); color: #6fdc92; box-shadow: inset 0 0 0 1px rgb(34 197 94 / .35); }
.pill-cancelled { background: rgb(148 163 184 / .16); color: #a9b8c8; box-shadow: inset 0 0 0 1px rgb(148 163 184 / .35); }
.record-modal__panel .pill-received { color: #0f766e; }.record-modal__panel .pill-contacted { color: #1d4ed8; }.record-modal__panel .pill-reserved { color: #b45309; }.record-modal__panel .pill-done { color: #15803d; }.record-modal__panel .pill-cancelled { color: #475569; }
.intake-modal .record-modal__panel { width: min(1080px, 100%); max-height: min(860px, calc(100dvh - 48px)); }
.intake-modal__body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 24px; }
.intake-modal__col { min-width: 0; }
.intake-modal__col h3 { margin: 14px 0 8px; color: #52514e; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.intake-modal__col h3:first-child { margin-top: 0; }
.intake-modal__col h3 small { margin-left: 6px; font-weight: 600; color: #7a7974; text-transform: none; }
.intake-modal__fields dd { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.intake-modal__message { margin: 0; padding: 10px 12px; min-height: 64px; border: 1px solid rgb(11 11 11 / .10); border-radius: 8px; background: #f6f5f1; font-size: 13px; line-height: 1.55; white-space: pre-wrap; word-break: break-word; }
.intake-modal__message .hint, .intake-modal .hint { color: #7a7974; font-size: 12.5px; }
.intake-modal__row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 10px; }
.intake-modal__action { display: grid; gap: 8px; }
.intake-modal__action label { display: grid; gap: 4px; font-size: 12px; font-weight: 600; color: #52514e; }
.intake-modal__action .req { color: var(--danger); }
.intake-modal .input, .intake-modal .select { height: 32px; background: #fff; color: #0b0b0b; border: 1px solid rgb(11 11 11 / .18); box-shadow: none; }
.intake-modal .select { min-width: 220px; }
.intake-modal .btn-neutral { background: #f0efeb; color: #0b0b0b; box-shadow: inset 0 0 0 1px rgb(11 11 11 / .12); }
.intake-modal .btn-neutral:hover { background: #e6e4de; }
.intake-modal .btn[disabled] { opacity: .5; cursor: not-allowed; }
.intake-modal .record-modal__actions { justify-content: space-between; }
.intake-modal .record-modal__actions .form-error { flex: 1; margin: 0; }
.intake-steps { display: flex; gap: 6px; margin: 0 0 12px; padding: 0; list-style: none; }
.intake-steps li { flex: 1; display: flex; align-items: center; gap: 6px; padding: 6px 8px; border-radius: 6px; background: #f0efeb; color: #7a7974; font-size: 12px; font-weight: 600; }
.intake-steps li span { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: #d9d7d0; color: #fff; font-size: 11px; }
.intake-steps li.done { color: #15803d; }.intake-steps li.done span { background: #22c55e; }
.intake-steps li.current { background: #e0f7f4; color: #0f766e; }.intake-steps li.current span { background: var(--brand); color: #06111d; }
.intake-steps.is-cancelled { align-items: center; gap: 10px; color: #475569; font-size: 12.5px; }
.intake-timeline { margin: 0; padding: 0; list-style: none; max-height: 260px; overflow: auto; border: 1px solid rgb(11 11 11 / .10); border-radius: 8px; }
.intake-timeline li { display: grid; grid-template-columns: 124px minmax(0, 1fr); gap: 10px; padding: 8px 12px; border-bottom: 1px solid rgb(11 11 11 / .08); font-size: 12.5px; }
.intake-timeline li:last-child { border-bottom: 0; }
.intake-timeline time { color: #7a7974; font-variant-numeric: tabular-nums; }
.intake-timeline strong { font-weight: 600; }
.intake-timeline p { margin: 2px 0 0; color: #3b3a37; white-space: pre-wrap; }
.intake-timeline small { display: block; margin-top: 2px; color: #9a9893; }
@media (max-width: 1100px) { .intake-modal__body { grid-template-columns: 1fr; } }

/* ---- 레벨테스트 · 진단서 (pages/levelTests.js, diagnoses.js) ---- */
.score-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.score-table th, .score-table td { padding: 7px 10px; border-bottom: 1px solid rgb(11 11 11 / .08); text-align: left; vertical-align: middle; }
.score-table th { position: sticky; top: 0; background: #f0efeb; color: #52514e; font-weight: 600; z-index: 1; }
.score-table td { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.score-table td.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.score-table tr.is-ok td:last-child { color: #15803d; font-weight: 700; }
.score-table tr.is-bad td:last-child { color: #b91c1c; font-weight: 700; }
.score-table .btn { min-height: 26px; padding: 3px 8px; font-size: 11.5px; }
.score-questions { max-height: 520px; }
.bar { position: relative; height: 18px; min-width: 120px; border-radius: 4px; background: #e9e7e1; overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--brand); border-radius: 4px 0 0 4px; }
.bar span { position: absolute; inset: 0; display: grid; place-items: center; font-size: 11px; font-weight: 700; color: #0b0b0b; font-variant-numeric: tabular-nums; }
.intake-modal textarea.input { height: auto; resize: vertical; font: inherit; font-size: 13px; }
.score-questions td:nth-child(3) { max-width: 220px; }
.score-questions td:nth-child(5) { max-width: 140px; }
.att-table td { text-align: center; }
.att-table td:first-child, .att-table td:nth-child(2), .att-table td:last-child { text-align: left; }
.att-table input[type=radio] { width: 16px; height: 16px; accent-color: var(--brand); }
.intake-toolbar label { display: inline-flex; align-items: center; gap: 6px; }
#lms-kpis .intake-kpi { padding: 2px 10px; min-width: 84px; }
#lms-kpis .intake-kpi b { font-size: 15px; line-height: 1.2; }
#lms-kpis .intake-kpi small { font-size: 10.5px; }
.rule-pre { max-height: 360px; overflow: auto; font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: pre-wrap; word-break: break-word; }

/* Status pills on the light work area: the base pill text colours are tuned for the navy shell and wash out on white,
   so the light surface gets the dark step of each hue (≥ 4.5:1) and dark mode restores the light step. */
.content .pill-received { color: #0b6b63; background: rgb(36 196 179 / .14); box-shadow: inset 0 0 0 1px rgb(13 148 136 / .45); }
.content .pill-contacted { color: #1e45b8; background: rgb(59 130 246 / .12); box-shadow: inset 0 0 0 1px rgb(37 99 235 / .4); }
.content .pill-reserved { color: #92400e; background: rgb(245 158 11 / .16); box-shadow: inset 0 0 0 1px rgb(217 119 6 / .45); }
.content .pill-done { color: #166534; background: rgb(34 197 94 / .14); box-shadow: inset 0 0 0 1px rgb(22 163 74 / .45); }
.content .pill-cancelled { color: #475569; background: rgb(148 163 184 / .18); box-shadow: inset 0 0 0 1px rgb(100 116 139 / .45); }
:root[data-theme="dark"] .content .pill-received { color: #5fe0d0; }
:root[data-theme="dark"] .content .pill-contacted { color: #7fb0ff; }
:root[data-theme="dark"] .content .pill-reserved { color: #f8bd4f; }
:root[data-theme="dark"] .content .pill-done { color: #6fdc92; }
:root[data-theme="dark"] .content .pill-cancelled { color: #a9b8c8; }