/* ═══════════════════════════════════════════════════════════════════
   NOVA ACADEMY OS — LUMINA DESIGN SYSTEM v12.0
   Precision Light · Enterprise SaaS · Linear × Vercel × Stripe
   2026-07-12 — 완전 재설계
   ═══════════════════════════════════════════════════════════════════ */

/* ═══ 1. DESIGN TOKENS ══════════════════════════════════════════════ */
:root {
  /* ── Primitive: Blue ── */
  --hsl-blue-50:  214 100% 97%;
  --hsl-blue-100: 214  95% 93%;
  --hsl-blue-200: 213  87% 85%;
  --hsl-blue-300: 212  80% 72%;
  --hsl-blue-400: 213  74% 60%;
  --hsl-blue-500: 217  91% 53%;
  --hsl-blue-600: 221  83% 45%;
  --hsl-blue-700: 224  76% 37%;
  --hsl-blue-800: 226  69% 28%;
  --hsl-blue-900: 229  64% 20%;

  /* ── Primitive: Slate Neutral ── */
  --hsl-slate-0:    0   0% 100%;
  --hsl-slate-25:  220  33% 99%;
  --hsl-slate-50:  220  27% 98%;
  --hsl-slate-100: 220  20% 96%;
  --hsl-slate-150: 220  18% 94%;
  --hsl-slate-200: 220  14% 91%;
  --hsl-slate-300: 220  12% 82%;
  --hsl-slate-400: 220   9% 64%;
  --hsl-slate-500: 220   7% 47%;
  --hsl-slate-600: 220   8% 33%;
  --hsl-slate-700: 220  10% 23%;
  --hsl-slate-800: 220  13% 15%;
  --hsl-slate-900: 222  16%  9%;

  /* ── Primitive: Accent Colors ── */
  --hsl-emerald-100: 150  60% 93%;
  --hsl-emerald-400: 152  69% 48%;
  --hsl-emerald-500: 152  66% 38%;
  --hsl-emerald-600: 152  72% 30%;
  --hsl-amber-100:    43  95% 92%;
  --hsl-amber-400:    43  96% 54%;
  --hsl-amber-500:    38  91% 46%;
  --hsl-amber-600:    33  85% 38%;
  --hsl-rose-100:    355  80% 95%;
  --hsl-rose-400:    355  78% 60%;
  --hsl-rose-500:    355  76% 50%;
  --hsl-rose-600:    355  74% 42%;
  --hsl-violet-100:  258  80% 95%;
  --hsl-violet-400:  258  79% 63%;
  --hsl-violet-500:  258  74% 53%;
  --hsl-cyan-100:    192  90% 92%;
  --hsl-cyan-400:    192  88% 47%;
  --hsl-cyan-500:    192  82% 38%;
  --hsl-orange-400:   25  90% 56%;
  --hsl-teal-400:    174  68% 40%;

  /* ════ SEMANTIC TOKENS ════ */

  /* ── Surface ── */
  --color-bg:               hsl(var(--hsl-slate-50));
  --color-surface-base:     hsl(var(--hsl-slate-50));
  --color-surface-elevated: hsl(var(--hsl-slate-0));
  --color-surface-overlay:  hsl(var(--hsl-slate-100));
  --color-surface-sunken:   hsl(var(--hsl-slate-150));
  --color-surface-hover:    hsl(220 18% 97%);

  /* ── Brand ── */
  --color-brand-subtle:  hsl(var(--hsl-blue-50));
  --color-brand-muted:   hsl(var(--hsl-blue-100));
  --color-brand-default: hsl(var(--hsl-blue-500));
  --color-brand-strong:  hsl(var(--hsl-blue-600));
  --color-brand-intense: hsl(var(--hsl-blue-700));
  --color-brand-text:    hsl(var(--hsl-blue-600));

  /* ── Text ── */
  --color-text-primary:   hsl(var(--hsl-slate-800));
  --color-text-secondary: hsl(var(--hsl-slate-600));
  --color-text-tertiary:  hsl(var(--hsl-slate-400));
  --color-text-disabled:  hsl(var(--hsl-slate-300));
  --color-text-inverse:   hsl(var(--hsl-slate-0));
  --color-text-brand:     hsl(var(--hsl-blue-600));
  --color-text-success:   hsl(var(--hsl-emerald-500));
  --color-text-warning:   hsl(var(--hsl-amber-600));
  --color-text-error:     hsl(var(--hsl-rose-500));

  /* ── Border ── */
  --color-border-subtle:  hsl(var(--hsl-slate-150));
  --color-border-default: hsl(var(--hsl-slate-200));
  --color-border-strong:  hsl(var(--hsl-slate-300));
  --color-border-brand:   hsl(var(--hsl-blue-300));
  --color-border-focus:   hsl(var(--hsl-blue-400));

  /* ── State ── */
  --color-success-bg:  hsl(var(--hsl-emerald-100));
  --color-success-fg:  hsl(var(--hsl-emerald-500));
  --color-success-border: hsl(150 55% 80%);
  --color-warning-bg:  hsl(var(--hsl-amber-100));
  --color-warning-fg:  hsl(var(--hsl-amber-500));
  --color-warning-border: hsl(43 85% 78%);
  --color-error-bg:    hsl(var(--hsl-rose-100));
  --color-error-fg:    hsl(var(--hsl-rose-500));
  --color-error-border: hsl(355 70% 82%);
  --color-info-bg:     hsl(var(--hsl-blue-50));
  --color-info-fg:     hsl(var(--hsl-blue-600));
  --color-info-border: hsl(var(--hsl-blue-200));

  /* ── Motion ── */
  --dur-instant:  50ms;
  --dur-fast:    120ms;
  --dur-normal:  200ms;
  --dur-slow:    350ms;
  --dur-lazy:    500ms;
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-enter:  cubic-bezier(0, 0, 0.2, 1);
  --ease-exit:   cubic-bezier(0.4, 0, 1, 1);
  --ease-back:   cubic-bezier(0.36, 0.07, 0.19, 0.97);

  /* ── Elevation ── */
  --shadow-xs:   0 1px 2px 0 hsl(222 16% 9% / 0.04);
  --shadow-sm:   0 1px 3px 0 hsl(222 16% 9% / 0.07),
                 0 1px 2px -1px hsl(222 16% 9% / 0.05);
  --shadow-md:   0 4px 6px -1px hsl(222 16% 9% / 0.07),
                 0 2px 4px -2px hsl(222 16% 9% / 0.04);
  --shadow-lg:   0 10px 15px -3px hsl(222 16% 9% / 0.08),
                 0 4px 6px -4px hsl(222 16% 9% / 0.05);
  --shadow-xl:   0 20px 25px -5px hsl(222 16% 9% / 0.08),
                 0 8px 10px -6px hsl(222 16% 9% / 0.04);
  --shadow-2xl:  0 25px 50px -12px hsl(222 16% 9% / 0.14);
  --shadow-brand:0 4px 14px 0 hsl(217 91% 53% / 0.25);
  --shadow-inset:inset 0 1px 2px 0 hsl(222 16% 9% / 0.06);

  /* ── Spacing ── */
  --sp-1:   4px;  --sp-2:   8px;  --sp-3:  12px;  --sp-4:  16px;
  --sp-5:  20px;  --sp-6:  24px;  --sp-7:  28px;  --sp-8:  32px;
  --sp-10: 40px;  --sp-12: 48px;  --sp-16: 64px;

  /* ── Radius ── */
  --r-sm:   6px;  --r-md:  10px;  --r-lg:  14px;  --r-xl:  18px;
  --r-2xl: 24px;  --r-3xl: 32px;  --r-full: 9999px;

  /* ── Typography ── */
  --font-sans: 'Pretendard', 'Noto Sans KR', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;

  /* ── Sidebar ── */
  --sidebar-w: 240px;
  --topbar-h:  56px;

  /* ── Backward compat aliases ── */
  --space-1:  var(--sp-1); --space-2: var(--sp-2); --space-3: var(--sp-3);
  --space-4:  var(--sp-4); --space-5: var(--sp-5); --space-6: var(--sp-6);
  --space-8:  var(--sp-8); --space-10: var(--sp-10);
  --radius-sm: var(--r-sm); --radius-md: var(--r-md); --radius-lg: var(--r-lg);
  --radius-xl: var(--r-xl); --radius-2xl: var(--r-2xl); --radius-full: var(--r-full);
  --duration-fast:   var(--dur-fast);
  --duration-normal: var(--dur-normal);
  --duration-slow:   var(--dur-slow);

  /* ── Missing primitive HSL tokens (app.js 참조) ── */
  --hsl-indigo-400: 239  84% 67%;
  --hsl-indigo-500: 239  84% 57%;
  --hsl-sky-400:    199  89% 48%;

  /* ── Semantic shorthand tokens (app.js 구버전 참조) ── */
  /* Text hierarchy */
  --text-1:    var(--color-text-primary);
  --text-2:    var(--color-text-secondary);
  --text-3:    var(--color-text-tertiary);
  --text-4:    hsl(var(--hsl-slate-400));
  --text-5:    hsl(var(--hsl-slate-300));
  --text-muted: var(--color-text-tertiary);

  /* Brand shorthand */
  --brand-400: hsl(var(--hsl-blue-400));
  --brand-500: hsl(var(--hsl-blue-500));
  --brand-600: hsl(var(--hsl-blue-600));

  /* State shorthand */
  --success: hsl(var(--hsl-emerald-500));
  --warning: hsl(var(--hsl-amber-500));
  --danger:  hsl(var(--hsl-rose-500));
  --info:    hsl(var(--hsl-blue-500));
  --rose:    hsl(var(--hsl-rose-400));
  --violet:  hsl(var(--hsl-violet-500));

  /* Palette shorthand (파스텔 강조색) */
  --p-emerald: hsl(var(--hsl-emerald-500));
  --p-amber:   hsl(var(--hsl-amber-500));
  --p-violet:  hsl(var(--hsl-violet-500));

  /* Accent */
  --color-accent-indigo: hsl(var(--hsl-indigo-400));
  --color-accent-brand:  hsl(var(--hsl-blue-500));   /* ← 핵심: form focus, spinner, tab active */

  /* Surface additional */
  --color-surface-page: var(--color-bg);

  /* Legacy interactive tokens */
  --bg-hover:   var(--color-surface-hover);
  --bg-active:  var(--color-surface-overlay);
  --border:     var(--color-border-default);

  /* ── Utility aliases ── */
  --ml-2:       var(--sp-2);
}

/* ═══ 2. RESET & BASE ═══════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 16px; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-text-primary);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow: hidden;
}

a { color: var(--color-text-brand); text-decoration: none; transition: color var(--dur-fast); }
a:hover { color: var(--color-brand-strong); }

img, svg { display: block; max-width: 100%; }

button, input, select, textarea {
  font-family: inherit; font-size: inherit; color: inherit;
}

/* ── A11y ── */
.skip-link {
  position: absolute; top: -100%; left: var(--sp-4);
  padding: var(--sp-2) var(--sp-4);
  background: var(--color-brand-default); color: #fff;
  border-radius: var(--r-md); font-weight: 600; font-size: 14px;
  z-index: 99999; transition: top var(--dur-fast);
}
.skip-link:focus { top: var(--sp-4); }

:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px; border-radius: var(--r-sm);
}
:focus:not(:focus-visible) { outline: none; }

@media (forced-colors: active) {
  :focus-visible { outline: 3px solid ButtonText; outline-offset: 3px; }
}

/* ── Utility Classes (Tailwind-subset) ── */
.flex                   { display: flex; }
.inline-flex            { display: inline-flex; }
.grid                   { display: grid; }
.hidden                 { display: none; }
.block                  { display: block; }
.items-center           { align-items: center; }
.items-start            { align-items: flex-start; }
.items-end              { align-items: flex-end; }
.justify-between        { justify-content: space-between; }
.justify-center         { justify-content: center; }
.justify-end            { justify-content: flex-end; }
.flex-1                 { flex: 1 1 0%; }
.flex-shrink-0          { flex-shrink: 0; }
.flex-col               { flex-direction: column; }
.flex-wrap              { flex-wrap: wrap; }
.gap-1                  { gap: var(--sp-1); }
.gap-2                  { gap: var(--sp-2); }
.gap-3                  { gap: var(--sp-3); }
.gap-4                  { gap: var(--sp-4); }
.gap-6                  { gap: var(--sp-6); }
.gap-8                  { gap: var(--sp-8); }
.mb-1                   { margin-bottom: var(--sp-1); }
.mb-2                   { margin-bottom: var(--sp-2); }
.mb-3                   { margin-bottom: var(--sp-3); }
.mb-4                   { margin-bottom: var(--sp-4); }
.mb-6                   { margin-bottom: var(--sp-6); }
.mt-1                   { margin-top: var(--sp-1); }
.mt-2                   { margin-top: var(--sp-2); }
.mt-3                   { margin-top: var(--sp-3); }
.mt-4                   { margin-top: var(--sp-4); }
.ml-auto                { margin-left: auto; }
.mr-2                   { margin-right: var(--sp-2); }
.p-2                    { padding: var(--sp-2); }
.p-3                    { padding: var(--sp-3); }
.p-4                    { padding: var(--sp-4); }
.px-3                   { padding-left: var(--sp-3); padding-right: var(--sp-3); }
.px-4                   { padding-left: var(--sp-4); padding-right: var(--sp-4); }
.py-2                   { padding-top: var(--sp-2); padding-bottom: var(--sp-2); }
.py-3                   { padding-top: var(--sp-3); padding-bottom: var(--sp-3); }
.w-full                 { width: 100%; }
.min-w-0                { min-width: 0; }
.overflow-hidden        { overflow: hidden; }
.overflow-auto          { overflow: auto; }
.truncate               { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.whitespace-nowrap      { white-space: nowrap; }
.text-center            { text-align: center; }
.text-right             { text-align: right; }
.right                  { text-align: right; }  /* table cell alias */
.text-left              { text-align: left; }
.font-medium            { font-weight: 500; }
.font-semibold          { font-weight: 600; }
.font-bold              { font-weight: 700; }
.font-extrabold         { font-weight: 800; }
.text-xs                { font-size: 11px; }
.text-sm                { font-size: 13px; }
.text-base              { font-size: 14px; }
.text-lg                { font-size: 16px; }
.text-xl                { font-size: 18px; }
.text-2xl               { font-size: 22px; }
.text-3xl               { font-size: 28px; }
.text-primary           { color: var(--color-text-primary); }
.text-secondary         { color: var(--color-text-secondary); }
.text-tertiary          { color: var(--color-text-tertiary); }
.text-brand             { color: var(--color-brand-default); }
.text-success           { color: var(--color-success-fg); }
.text-warning           { color: var(--color-warning-fg); }
.text-error             { color: var(--color-error-fg); }
.cursor-pointer         { cursor: pointer; }
.select-none            { user-select: none; }
.relative               { position: relative; }
.absolute               { position: absolute; }
.inset-0                { inset: 0; }
.z-10                   { z-index: 10; }
.rounded                { border-radius: var(--r-md); }
.rounded-full           { border-radius: var(--r-full); }
.border                 { border: 1px solid var(--color-border-default); }
.border-b               { border-bottom: 1px solid var(--color-border-default); }
.shadow-sm              { box-shadow: var(--shadow-sm); }
.opacity-50             { opacity: 0.5; }
.opacity-0              { opacity: 0; }
.transition             { transition: all var(--dur-normal) var(--ease-smooth); }
.pointer-events-none    { pointer-events: none; }
.leading-tight          { line-height: 1.25; }
.leading-relaxed        { line-height: 1.75; }

/* ─── swipeable scroll row ─── */
.swipeable {
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.swipeable::-webkit-scrollbar { display: none; }

/* ═══ 3. LAYOUT SHELL ═══════════════════════════════════════════════ */
.app-shell {
  display: flex;
  height: 100dvh;
  overflow: hidden;
  background: var(--color-bg);
}

/* ═══ 4. SIDEBAR ════════════════════════════════════════════════════ */
.sidebar {
  width: var(--sidebar-w);
  height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--color-surface-elevated);
  border-right: 1px solid var(--color-border-subtle);
  transition: width var(--dur-slow) var(--ease-smooth);
  overflow: hidden;
  flex-shrink: 0;
  z-index: 40;
  position: relative;
}
.sidebar.collapsed { width: 64px; }

/* Logo */
.sidebar-logo {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 0 var(--sp-4);
  height: var(--topbar-h);
  border-bottom: 1px solid var(--color-border-subtle);
  flex-shrink: 0;
}
.sidebar-logo-icon {
  width: 32px; height: 32px;
  border-radius: var(--r-lg);
  background: var(--color-brand-default);
  display: grid; place-items: center;
  color: #fff; font-size: 16px; flex-shrink: 0;
  box-shadow: var(--shadow-brand);
}
.sidebar-logo-text { flex: 1; overflow: hidden; }
.sidebar-logo-name {
  font-size: 15px; font-weight: 800;
  color: var(--color-text-primary);
  letter-spacing: -0.03em; white-space: nowrap;
  line-height: 1.2;
}
.sidebar-logo-sub {
  font-size: 10px; color: var(--color-text-tertiary);
  white-space: nowrap; letter-spacing: 0.02em;
  margin-top: 1px;
}

/* Search trigger */
.sidebar-search {
  margin: var(--sp-3) var(--sp-3) var(--sp-2);
  display: flex; align-items: center; gap: var(--sp-2);
  padding: 7px var(--sp-3);
  background: var(--color-surface-overlay);
  border: 1px solid var(--color-border-default);
  border-radius: var(--r-md);
  cursor: pointer; transition: all var(--dur-fast);
  flex-shrink: 0;
}
.sidebar-search:hover {
  border-color: var(--color-border-brand);
  background: var(--color-brand-subtle);
}
.sidebar-search-text {
  flex: 1; font-size: 12px; color: var(--color-text-tertiary); white-space: nowrap;
}
.sidebar-search-kbd {
  display: flex; gap: 2px;
}
.sidebar-search-kbd kbd {
  display: inline-block;
  padding: 0 4px; font-size: 9px;
  font-family: var(--font-mono);
  background: var(--color-surface-elevated);
  border: 1px solid var(--color-border-default);
  border-radius: 3px;
  color: var(--color-text-tertiary); line-height: 16px;
}

/* Nav */
.sidebar-nav {
  flex: 1; overflow-y: auto; overflow-x: hidden;
  padding: var(--sp-2) 0;
  scrollbar-width: thin;
  scrollbar-color: var(--color-border-default) transparent;
}
.sidebar-nav::-webkit-scrollbar { width: 3px; }
.sidebar-nav::-webkit-scrollbar-thumb {
  background: var(--color-border-default);
  border-radius: var(--r-full);
}

.sidebar-section { margin-bottom: var(--sp-1); }
.sidebar-section-label {
  padding: var(--sp-3) var(--sp-4) var(--sp-1);
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--color-text-disabled); white-space: nowrap;
  line-height: 1;
}

.nav-item {
  display: flex; align-items: center;
  gap: var(--sp-2); padding: 7px var(--sp-3);
  border-radius: var(--r-md);
  margin: 0 var(--sp-2) 1px;
  color: var(--color-text-secondary);
  font-size: 13.5px; font-weight: 500;
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease-smooth);
  white-space: nowrap; position: relative;
  user-select: none; border: none; background: transparent;
  width: calc(100% - var(--sp-4)); text-align: left;
}
.nav-item:hover {
  background: var(--color-surface-overlay);
  color: var(--color-text-primary);
}
.nav-item.active {
  background: var(--color-brand-muted);
  color: var(--color-brand-strong); font-weight: 600;
}
.nav-item.active::before {
  content: '';
  position: absolute; left: calc(-1 * var(--sp-2));
  top: 25%; bottom: 25%; width: 3px;
  border-radius: 0 var(--r-full) var(--r-full) 0;
  background: var(--color-brand-default);
}
.nav-item-icon {
  width: 18px; height: 18px;
  display: grid; place-items: center;
  font-size: 14px; flex-shrink: 0;
  opacity: 0.75; transition: opacity var(--dur-fast);
}
.nav-item.active .nav-item-icon,
.nav-item:hover .nav-item-icon { opacity: 1; }
.nav-item-label { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.nav-badge {
  margin-left: auto; min-width: 18px; height: 18px;
  padding: 0 5px; border-radius: var(--r-full);
  background: var(--color-brand-default); color: #fff;
  font-size: 10px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}

/* Sidebar footer */
.sidebar-footer {
  border-top: 1px solid var(--color-border-subtle);
  padding: var(--sp-3); flex-shrink: 0;
  display: flex; flex-direction: column; gap: var(--sp-2);
}
.sidebar-collapse-btn {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: 7px var(--sp-3); border-radius: var(--r-md);
  color: var(--color-text-tertiary); font-size: 13px;
  cursor: pointer; transition: all var(--dur-fast);
  background: transparent; border: none; white-space: nowrap;
  width: 100%; text-align: left;
}
.sidebar-collapse-btn:hover {
  background: var(--color-surface-overlay);
  color: var(--color-text-secondary);
}
.sidebar-user {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3); border-radius: var(--r-md);
  cursor: pointer; transition: background var(--dur-fast); overflow: hidden;
}
.sidebar-user:hover { background: var(--color-surface-overlay); }
.sidebar-avatar {
  width: 30px; height: 30px; border-radius: var(--r-full);
  background: linear-gradient(135deg, hsl(var(--hsl-blue-500)), hsl(var(--hsl-violet-500)));
  display: grid; place-items: center;
  font-size: 12px; font-weight: 700; color: #fff; flex-shrink: 0;
}
.sidebar-user-info { flex: 1; overflow: hidden; }
.sidebar-user-name {
  font-size: 13px; font-weight: 600;
  color: var(--color-text-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sidebar-user-role { font-size: 11px; color: var(--color-text-tertiary); white-space: nowrap; }

/* Overlay */
.sidebar-overlay {
  display: none; position: fixed; inset: 0;
  background: hsl(222 16% 9% / 0.4);
  backdrop-filter: blur(2px);
  z-index: 39;
}

/* ═══ 5. TOPBAR ═════════════════════════════════════════════════════ */
.main-area { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-width: 0; }

.topbar {
  height: var(--topbar-h);
  display: flex; align-items: center; gap: var(--sp-3);
  padding: 0 var(--sp-6);
  background: var(--color-surface-elevated);
  border-bottom: 1px solid var(--color-border-subtle);
  flex-shrink: 0; z-index: 30;
}
.topbar-breadcrumb {
  display: flex; align-items: center; gap: var(--sp-2);
  font-size: 13px; color: var(--color-text-secondary);
  flex: 1; min-width: 0;
}
.topbar-breadcrumb-home { color: var(--color-text-tertiary); font-size: 14px; }
.topbar-breadcrumb-sep { color: var(--color-text-disabled); font-size: 11px; }
.topbar-breadcrumb-current {
  font-size: 14px; font-weight: 600;
  color: var(--color-text-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.topbar-actions {
  display: flex; align-items: center; gap: var(--sp-2); flex-shrink: 0;
}
.topbar-icon-btn {
  width: 34px; height: 34px; border-radius: var(--r-md);
  display: grid; place-items: center;
  font-size: 15px; color: var(--color-text-secondary);
  cursor: pointer; transition: all var(--dur-fast);
  background: transparent; border: none; position: relative;
}
.topbar-icon-btn:hover {
  background: var(--color-surface-overlay);
  color: var(--color-text-primary);
}
.topbar-notif-dot {
  position: absolute; top: 7px; right: 7px;
  width: 7px; height: 7px; border-radius: var(--r-full);
  background: var(--color-error-fg);
  border: 2px solid var(--color-surface-elevated);
}

/* Search bar (topbar) */
.search-bar {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: 6px var(--sp-3);
  background: var(--color-surface-overlay);
  border: 1px solid var(--color-border-default);
  border-radius: var(--r-md);
  cursor: pointer; transition: all var(--dur-fast);
  font-size: 13px; color: var(--color-text-tertiary);
  min-width: 160px;
}
.search-bar:hover { border-color: var(--color-border-brand); background: var(--color-brand-subtle); }
.search-bar-text { flex: 1; }
.search-bar-kbd { display: flex; gap: 2px; }
.search-bar-kbd kbd {
  font-size: 9px; font-family: var(--font-mono);
  padding: 1px 4px; border-radius: 3px;
  background: var(--color-surface-elevated);
  border: 1px solid var(--color-border-default);
  color: var(--color-text-tertiary); line-height: 14px;
}

/* Live indicator */
.live-indicator {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.04em;
  color: var(--color-success-fg);
  padding: 4px var(--sp-3);
  background: var(--color-success-bg);
  border: 1px solid var(--color-success-border);
  border-radius: var(--r-full);
}
.live-dot {
  width: 7px; height: 7px; border-radius: var(--r-full);
  background: var(--color-success-fg);
  position: relative; flex-shrink: 0;
  animation: livePulse 2.4s ease-in-out infinite;
}
@keyframes livePulse {
  0%, 100% { box-shadow: 0 0 0 0 hsl(var(--hsl-emerald-400) / 0.7); }
  50%       { box-shadow: 0 0 0 5px hsl(var(--hsl-emerald-400) / 0); }
}

/* ═══ 6. CONTENT AREA ═══════════════════════════════════════════════ */
.content-area {
  flex: 1; overflow-y: auto; overflow-x: hidden;
  padding: var(--sp-6);
  scrollbar-width: thin;
  scrollbar-color: var(--color-border-default) transparent;
  background: var(--color-bg);
}
.content-area::-webkit-scrollbar { width: 5px; }
.content-area::-webkit-scrollbar-thumb {
  background: var(--color-border-default);
  border-radius: var(--r-full);
}

/* ═══ 7. PAGE HEADER ════════════════════════════════════════════════ */
.page-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--sp-4); margin-bottom: var(--sp-6);
  flex-wrap: wrap;
}
.page-header-left { display: flex; align-items: center; gap: var(--sp-4); min-width: 0; }
.page-icon {
  width: 44px; height: 44px; border-radius: var(--r-xl);
  display: grid; place-items: center;
  font-size: 20px; flex-shrink: 0;
  background: var(--color-brand-muted);
  color: var(--color-brand-default);
}
.page-title {
  font-size: 20px; font-weight: 800;
  color: var(--color-text-primary);
  letter-spacing: -0.025em; line-height: 1.2;
}
.page-desc {
  font-size: 13px; color: var(--color-text-secondary);
  margin-top: 2px; line-height: 1.5;
}
.page-header-actions { display: flex; align-items: center; gap: var(--sp-2); flex-shrink: 0; }

.toolbar {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  background: var(--color-surface-elevated);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--r-lg);
  margin-bottom: var(--sp-4);
  flex-wrap: wrap;
}

/* ─── Section heading shorthand ─── */
.section-title {
  font-size: 15px; font-weight: 700;
  color: var(--color-text-primary); letter-spacing: -0.01em;
}
.section-desc { font-size: 12px; color: var(--color-text-tertiary); margin-top: 2px; }

/* ═══ 8. HERO SECTION ═══════════════════════════════════════════════ */
.hero-section {
  position: relative; overflow: hidden;
  border-radius: var(--r-2xl);
  background: linear-gradient(130deg,
    hsl(var(--hsl-blue-700)) 0%,
    hsl(var(--hsl-blue-600)) 45%,
    hsl(var(--hsl-violet-500)) 100%);
  padding: var(--sp-8) var(--sp-8) var(--sp-6);
  margin-bottom: var(--sp-5);
  box-shadow: var(--shadow-lg), 0 0 40px hsl(217 91% 53% / 0.15);
}
.hero-section::before {
  content: '';
  position: absolute; inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  pointer-events: none;
}
.hero-section::after {
  content: '';
  position: absolute; right: -60px; bottom: -60px;
  width: 280px; height: 280px; border-radius: 50%;
  background: hsl(var(--hsl-violet-400) / 0.25);
  filter: blur(60px); pointer-events: none;
}
.hero-content { position: relative; z-index: 1; }
.hero-greeting {
  font-size: 12px; font-weight: 600; letter-spacing: 0.08em;
  color: hsl(0 0% 100% / 0.65); text-transform: uppercase;
  margin-bottom: var(--sp-2);
}
.hero-title {
  font-size: 26px; font-weight: 800;
  color: #fff; letter-spacing: -0.03em;
  line-height: 1.2; margin-bottom: var(--sp-2);
}
.hero-subtitle {
  font-size: 14px; color: hsl(0 0% 100% / 0.7);
  display: flex; align-items: center; gap: var(--sp-3);
  margin-bottom: var(--sp-6); flex-wrap: wrap;
}
.hero-refresh-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px var(--sp-3); border-radius: var(--r-md);
  background: hsl(0 0% 100% / 0.12);
  border: 1px solid hsl(0 0% 100% / 0.2);
  color: hsl(0 0% 100% / 0.85);
  font-size: 12px; font-weight: 600;
  cursor: pointer; transition: all var(--dur-fast);
}
.hero-refresh-btn:hover { background: hsl(0 0% 100% / 0.2); }
.hero-stats {
  display: flex; gap: var(--sp-6); flex-wrap: wrap;
}
.hero-stat {
  cursor: pointer; transition: transform var(--dur-fast);
  padding: var(--sp-1) 0;
}
.hero-stat:hover { transform: translateY(-2px); }
.hero-stat-value {
  font-size: 28px; font-weight: 800;
  color: #fff; letter-spacing: -0.04em; line-height: 1;
}
.hero-stat-label {
  font-size: 11px; color: hsl(0 0% 100% / 0.6);
  margin-top: 4px; font-weight: 500;
}
.hero-divider {
  width: 1px; background: hsl(0 0% 100% / 0.15);
  align-self: stretch; margin: 0 var(--sp-2);
}

/* ═══ 9. KPI GRID ════════════════════════════════════════════════════ */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--sp-3);
  margin-bottom: var(--sp-5);
}
.kpi-grid-4 { grid-template-columns: repeat(4, 1fr); }
.kpi-grid-6 { grid-template-columns: repeat(6, 1fr); }

.kpi-card {
  background: var(--color-surface-elevated);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--r-xl);
  padding: var(--sp-5);
  cursor: pointer;
  transition: all var(--dur-normal) var(--ease-smooth);
  position: relative; overflow: hidden;
}
.kpi-card:hover {
  border-color: var(--color-border-default);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}
.kpi-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 3px; border-radius: var(--r-xl) var(--r-xl) 0 0;
  background: transparent;
  transition: background var(--dur-normal);
}

/* Color accents */
.kpi-card.accent-emerald::before { background: hsl(var(--hsl-emerald-400)); }
.kpi-card.accent-blue::before    { background: hsl(var(--hsl-blue-500)); }
.kpi-card.accent-violet::before  { background: hsl(var(--hsl-violet-400)); }
.kpi-card.accent-amber::before   { background: hsl(var(--hsl-amber-400)); }
.kpi-card.accent-rose::before    { background: hsl(var(--hsl-rose-400)); }
.kpi-card.accent-cyan::before    { background: hsl(var(--hsl-cyan-400)); }
.kpi-card.accent-orange::before  { background: hsl(var(--hsl-orange-400)); }
.kpi-card.accent-teal::before    { background: hsl(var(--hsl-teal-400)); }

.kpi-card-header {
  display: flex; align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sp-3);
}
.kpi-icon-wrap {
  width: 36px; height: 36px; border-radius: var(--r-lg);
  display: grid; place-items: center;
  font-size: 16px;
  background: var(--color-surface-overlay);
  color: var(--color-text-secondary);
  transition: all var(--dur-fast);
}
.kpi-card:hover .kpi-icon-wrap { background: var(--color-brand-muted); color: var(--color-brand-default); }
.kpi-card.accent-emerald:hover .kpi-icon-wrap { background: hsl(var(--hsl-emerald-100)); color: hsl(var(--hsl-emerald-500)); }
.kpi-card.accent-violet:hover  .kpi-icon-wrap { background: hsl(var(--hsl-violet-100)); color: hsl(var(--hsl-violet-500)); }
.kpi-card.accent-amber:hover   .kpi-icon-wrap { background: hsl(var(--hsl-amber-100));  color: hsl(var(--hsl-amber-500)); }
.kpi-card.accent-rose:hover    .kpi-icon-wrap { background: hsl(var(--hsl-rose-100));   color: hsl(var(--hsl-rose-500)); }
.kpi-card.accent-cyan:hover    .kpi-icon-wrap { background: hsl(var(--hsl-cyan-100));   color: hsl(var(--hsl-cyan-500)); }

.kpi-trend {
  font-size: 11px; font-weight: 700;
  padding: 3px 8px; border-radius: var(--r-full);
  white-space: nowrap;
}
.kpi-trend.up   { background: var(--color-success-bg); color: var(--color-success-fg); }
.kpi-trend.down { background: var(--color-error-bg);   color: var(--color-error-fg); }
.kpi-trend.flat { background: var(--color-surface-overlay); color: var(--color-text-tertiary); }

.kpi-value {
  font-size: 30px; font-weight: 800;
  color: var(--color-text-primary);
  letter-spacing: -0.04em; line-height: 1; margin-bottom: 4px;
}
.kpi-value small { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; opacity: 0.7; }
.kpi-label {
  font-size: 12px; color: var(--color-text-secondary);
  font-weight: 500; margin-bottom: 3px;
}
.kpi-meta {
  font-size: 11px; color: var(--color-text-tertiary);
  margin-bottom: var(--sp-3);
}
.kpi-sparkline { height: 3px; margin-top: 0; }

/* Mini KPI */
.mini-kpi {
  padding: var(--sp-3) var(--sp-4);
  background: var(--color-surface-elevated);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--r-lg);
  display: flex; align-items: center; gap: var(--sp-3);
  transition: all var(--dur-fast);
}
.mini-kpi:hover { border-color: var(--color-border-default); box-shadow: var(--shadow-xs); }
.mini-kpi-icon {
  width: 32px; height: 32px; border-radius: var(--r-md);
  display: grid; place-items: center;
  font-size: 14px; flex-shrink: 0;
}
.mini-kpi-body { flex: 1; min-width: 0; }
.mini-kpi-value { font-size: 16px; font-weight: 700; color: var(--color-text-primary); line-height: 1.2; }
.mini-kpi-label { font-size: 11px; color: var(--color-text-tertiary); }

/* ═══ 10. PROGRESS BAR ══════════════════════════════════════════════ */
.progress-bar {
  width: 100%; height: 6px;
  background: var(--color-surface-overlay);
  border-radius: var(--r-full); overflow: hidden;
}
.progress-fill {
  height: 100%; border-radius: var(--r-full);
  background: var(--color-brand-default);
  transition: width 1.2s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.progress-fill.success  { background: var(--color-success-fg); }
.progress-fill.warning  { background: var(--color-warning-fg); }
.progress-fill.error    { background: var(--color-error-fg); }
.progress-fill.gradient {
  background: linear-gradient(90deg, hsl(var(--hsl-blue-500)), hsl(var(--hsl-violet-500)));
}

/* ═══ 11. PANEL / CARD ══════════════════════════════════════════════ */
.panel {
  background: var(--color-surface-elevated);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--r-xl); overflow: hidden;
  transition: box-shadow var(--dur-normal);
}
.panel:hover { box-shadow: var(--shadow-sm); }

.panel-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--color-border-subtle);
  gap: var(--sp-3);
}
.panel-title {
  font-size: 14px; font-weight: 700;
  color: var(--color-text-primary); display: flex; align-items: center; gap: var(--sp-2);
}
.panel-subtitle { font-size: 12px; color: var(--color-text-tertiary); margin-top: 2px; }
.panel-actions { display: flex; align-items: center; gap: var(--sp-2); }

.panel-body { padding: var(--sp-5); }
.panel-body.no-pad { padding: 0; }
.panel-body.sm-pad { padding: var(--sp-3); }

.panel-footer {
  padding: var(--sp-3) var(--sp-5);
  border-top: 1px solid var(--color-border-subtle);
  background: var(--color-surface-overlay);
  font-size: 12px; color: var(--color-text-tertiary);
}

/* Card (generic) */
.card {
  background: var(--color-surface-elevated);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--r-xl); padding: var(--sp-5);
  transition: all var(--dur-normal) var(--ease-smooth);
}
.card:hover { box-shadow: var(--shadow-md); border-color: var(--color-border-default); }
.card-hover { cursor: pointer; }
.card-hover:hover { transform: translateY(-2px); }

/* ═══ 12. BUTTONS ═══════════════════════════════════════════════════ */
.btn {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: 8px var(--sp-4);
  border-radius: var(--r-md);
  font-size: 13.5px; font-weight: 600;
  cursor: pointer; transition: all var(--dur-fast);
  border: none; user-select: none; white-space: nowrap;
  text-decoration: none; line-height: 1;
}
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn:active:not(:disabled) { transform: scale(0.97); }

/* Sizes */
.btn-xs  { padding: 4px var(--sp-3); font-size: 11.5px; border-radius: var(--r-sm); }
.btn-sm  { padding: 6px var(--sp-3); font-size: 12.5px; }
.btn-lg  { padding: 10px var(--sp-6); font-size: 15px; border-radius: var(--r-lg); }
.btn-xl  { padding: 13px var(--sp-8); font-size: 15.5px; border-radius: var(--r-lg); }
.btn-icon { width: 34px; height: 34px; padding: 0; justify-content: center; }
.btn-icon.btn-sm { width: 30px; height: 30px; }
.btn-icon.btn-lg { width: 40px; height: 40px; }

/* Variants */
.btn-primary {
  background: var(--color-brand-default);
  color: #fff; box-shadow: var(--shadow-sm);
}
.btn-primary:hover:not(:disabled) {
  background: var(--color-brand-strong);
  box-shadow: var(--shadow-brand);
}
.btn-secondary {
  background: var(--color-surface-elevated);
  color: var(--color-text-primary);
  border: 1px solid var(--color-border-default);
  box-shadow: var(--shadow-xs);
}
.btn-secondary:hover:not(:disabled) {
  background: var(--color-surface-overlay);
  border-color: var(--color-border-strong);
}
.btn-ghost {
  background: transparent; color: var(--color-text-secondary); border: none;
}
.btn-ghost:hover:not(:disabled) {
  background: var(--color-surface-overlay); color: var(--color-text-primary);
}
.btn-danger {
  background: var(--color-error-fg); color: #fff;
}
.btn-danger:hover:not(:disabled) { background: hsl(var(--hsl-rose-600)); }
.btn-success {
  background: var(--color-success-fg); color: #fff;
}
.btn-success:hover:not(:disabled) { background: hsl(var(--hsl-emerald-600)); }
.btn-outline {
  background: transparent;
  border: 1px solid var(--color-border-default);
  color: var(--color-text-primary);
}
.btn-outline:hover:not(:disabled) {
  border-color: var(--color-border-brand);
  background: var(--color-brand-subtle);
  color: var(--color-brand-text);
}

/* ═══ 13. QUICK ACTIONS ═════════════════════════════════════════════ */
.qa-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: var(--sp-3); margin-bottom: var(--sp-5);
}
.qa-item {
  display: flex; flex-direction: column; align-items: center;
  gap: var(--sp-2); padding: var(--sp-4) var(--sp-3);
  border-radius: var(--r-xl);
  background: var(--color-surface-elevated);
  border: 1px solid var(--color-border-subtle);
  cursor: pointer; transition: all var(--dur-normal) var(--ease-smooth);
  font-size: 12.5px; font-weight: 600;
  color: var(--color-text-secondary); text-align: center;
  user-select: none;
}
.qa-item:hover {
  border-color: var(--color-border-brand);
  background: var(--color-brand-subtle);
  color: var(--color-brand-text);
  transform: translateY(-2px); box-shadow: var(--shadow-md);
}
.qa-item:active { transform: translateY(0); }
.qa-item-icon {
  width: 40px; height: 40px; border-radius: var(--r-lg);
  display: grid; place-items: center;
  font-size: 18px; flex-shrink: 0;
  transition: all var(--dur-fast);
}
.qa-item:hover .qa-item-icon { transform: scale(1.1); }

/* Accent colors for QA icons */
.qa-item-e .qa-item-icon { background: hsl(var(--hsl-emerald-100)); color: hsl(var(--hsl-emerald-500)); }
.qa-item-v .qa-item-icon { background: hsl(var(--hsl-violet-100));  color: hsl(var(--hsl-violet-500)); }
.qa-item-s .qa-item-icon { background: var(--color-brand-muted);    color: var(--color-brand-default); }
.qa-item-a .qa-item-icon { background: hsl(var(--hsl-amber-100));   color: hsl(var(--hsl-amber-500)); }
.qa-item-c .qa-item-icon { background: hsl(var(--hsl-cyan-100));    color: hsl(var(--hsl-cyan-500)); }
.qa-item-p .qa-item-icon { background: hsl(var(--hsl-rose-100));    color: hsl(var(--hsl-rose-500)); }

/* ═══ 14. BADGES ════════════════════════════════════════════════════ */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px var(--sp-2);
  border-radius: var(--r-full);
  font-size: 11px; font-weight: 700;
  white-space: nowrap; vertical-align: middle;
  line-height: 1;
}
.badge-blue    { background: var(--color-brand-muted);    color: var(--color-brand-strong); }
.badge-emerald { background: var(--color-success-bg);     color: var(--color-success-fg); }
.badge-amber   { background: var(--color-warning-bg);     color: var(--color-warning-fg); }
.badge-rose    { background: var(--color-error-bg);       color: var(--color-error-fg); }
.badge-violet  { background: hsl(var(--hsl-violet-100));  color: hsl(var(--hsl-violet-500)); }
.badge-cyan    { background: hsl(var(--hsl-cyan-100));    color: hsl(var(--hsl-cyan-500)); }
.badge-gray    { background: var(--color-surface-overlay); color: var(--color-text-secondary); }
.badge-sky     { background: hsl(var(--hsl-blue-50));     color: hsl(var(--hsl-blue-600)); }
.badge-orange  { background: hsl(25 90% 94%);             color: hsl(var(--hsl-orange-400)); }
.badge-teal    { background: hsl(174 60% 92%);            color: hsl(var(--hsl-teal-400)); }

/* ═══ 15. FORM ELEMENTS ═════════════════════════════════════════════ */
.form-group { display: flex; flex-direction: column; gap: var(--sp-1); margin-bottom: var(--sp-4); }
.form-label {
  font-size: 13px; font-weight: 600;
  color: var(--color-text-secondary);
}
.form-label .required { color: var(--color-error-fg); margin-left: 2px; }

.input, .select, .textarea {
  width: 100%; padding: 9px var(--sp-3);
  background: var(--color-surface-elevated);
  border: 1px solid var(--color-border-default);
  border-radius: var(--r-md);
  font-size: 14px; color: var(--color-text-primary);
  transition: all var(--dur-fast);
  outline: none;
}
.input:hover, .select:hover, .textarea:hover { border-color: var(--color-border-strong); }
.input:focus, .select:focus, .textarea:focus {
  border-color: var(--color-border-focus);
  box-shadow: 0 0 0 3px hsl(var(--hsl-blue-400) / 0.12);
}
.input::placeholder, .textarea::placeholder { color: var(--color-text-disabled); }
.input.error { border-color: var(--color-error-fg); }
.input.error:focus { box-shadow: 0 0 0 3px hsl(var(--hsl-rose-400) / 0.12); }
.input-sm { padding: 6px var(--sp-3); font-size: 13px; }
.select { cursor: pointer; }
.textarea { min-height: 100px; resize: vertical; line-height: 1.6; }
.form-hint { font-size: 12px; color: var(--color-text-tertiary); }
.form-error { font-size: 12px; color: var(--color-error-fg); }

/* Input group */
.input-group { position: relative; }
.input-group .input-icon {
  position: absolute; left: var(--sp-3); top: 50%; transform: translateY(-50%);
  color: var(--color-text-tertiary); font-size: 14px; pointer-events: none;
}
.input-group .input { padding-left: var(--sp-10); }

/* Toggle / Switch */
.toggle {
  position: relative; display: inline-flex;
  width: 40px; height: 22px; cursor: pointer;
}
.toggle input { opacity: 0; width: 0; height: 0; }
.toggle-track {
  position: absolute; inset: 0;
  background: var(--color-border-strong);
  border-radius: var(--r-full);
  transition: background var(--dur-normal);
}
.toggle input:checked + .toggle-track { background: var(--color-brand-default); }
.toggle-thumb {
  position: absolute; top: 3px; left: 3px;
  width: 16px; height: 16px; border-radius: 50%;
  background: #fff; transition: transform var(--dur-normal) var(--ease-spring);
  box-shadow: var(--shadow-sm);
}
.toggle input:checked ~ .toggle-thumb { transform: translateX(18px); }

/* ═══ 16. TABLE ═════════════════════════════════════════════════════ */
.table-wrapper {
  overflow-x: auto; border-radius: var(--r-xl);
  border: 1px solid var(--color-border-subtle);
  background: var(--color-surface-elevated);
}
.data-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.data-table th {
  padding: var(--sp-3) var(--sp-4);
  text-align: left; font-size: 11px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--color-text-tertiary);
  background: var(--color-surface-overlay);
  border-bottom: 1px solid var(--color-border-subtle);
  white-space: nowrap;
}
.data-table td {
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--color-border-subtle);
  color: var(--color-text-primary);
  vertical-align: middle;
}
.data-table tr:last-child td { border-bottom: none; }
.data-table tbody tr { transition: background var(--dur-fast); }
.data-table tbody tr:hover { background: var(--color-surface-hover); }
.data-table.striped tbody tr:nth-child(even) { background: hsl(220 20% 98%); }

/* Attend table */
.attend-table td, .attend-table th { padding: var(--sp-2) var(--sp-3); font-size: 12px; }

/* ═══ 17. GRID LAYOUTS ══════════════════════════════════════════════ */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--sp-4); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); }
.grid-2-3 { display: grid; grid-template-columns: 2fr 1fr; gap: var(--sp-4); }
.grid-3-2 { display: grid; grid-template-columns: 3fr 2fr; gap: var(--sp-4); }
.grid-sidebar-main { display: grid; grid-template-columns: 280px 1fr; gap: var(--sp-4); }

/* Dashboard 2-col */
.dash-grid { display: grid; grid-template-columns: 1fr 360px; gap: var(--sp-4); align-items: start; }

/* ═══ 18. TOAST ═════════════════════════════════════════════════════ */
#toast-root {
  position: fixed; bottom: var(--sp-6); right: var(--sp-6);
  z-index: 10000; display: flex; flex-direction: column;
  gap: var(--sp-2); max-width: 380px; width: 100%;
}
.toast {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  padding: var(--sp-4);
  background: var(--color-text-primary);
  color: #fff; border-radius: var(--r-xl);
  box-shadow: var(--shadow-2xl);
  animation: toastIn 0.35s var(--ease-spring) forwards;
  position: relative; overflow: hidden;
  border-left: 3px solid transparent;
}
.toast.success { border-left-color: hsl(var(--hsl-emerald-400)); }
.toast.error   { border-left-color: hsl(var(--hsl-rose-400)); }
.toast.warning { border-left-color: hsl(var(--hsl-amber-400)); }
.toast.info    { border-left-color: hsl(var(--hsl-blue-400)); }
.toast-icon { font-size: 16px; flex-shrink: 0; margin-top: 1px; }
.toast-body { flex: 1; min-width: 0; }
.toast-title { font-size: 13px; font-weight: 700; line-height: 1.3; }
.toast-msg   { font-size: 12px; opacity: 0.75; margin-top: 2px; line-height: 1.4; }
.toast-close {
  background: transparent; border: none; color: hsl(0 0% 100% / 0.5);
  cursor: pointer; font-size: 14px; padding: 0; line-height: 1;
  flex-shrink: 0; transition: color var(--dur-fast);
}
.toast-close:hover { color: #fff; }
@keyframes toastIn {
  from { opacity: 0; transform: translateX(20px) scale(0.95); }
  to   { opacity: 1; transform: translateX(0) scale(1); }
}
.toast.out { animation: toastOut 0.25s var(--ease-exit) forwards; }
@keyframes toastOut {
  to { opacity: 0; transform: translateX(20px); max-height: 0; padding: 0; margin: 0; }
}

/* ═══ 19. MODAL ═════════════════════════════════════════════════════ */
.modal-backdrop {
  position: fixed; inset: 0;
  background: hsl(222 16% 9% / 0.45);
  backdrop-filter: blur(4px);
  z-index: 1000; display: flex;
  align-items: center; justify-content: center;
  padding: var(--sp-4);
  animation: backdropIn 0.2s ease forwards;
}
@keyframes backdropIn {
  from { opacity: 0; } to { opacity: 1; }
}
.modal {
  background: var(--color-surface-elevated);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--r-2xl);
  box-shadow: var(--shadow-2xl);
  width: 100%; max-width: 540px;
  max-height: 90vh; overflow-y: auto;
  animation: modalIn 0.3s var(--ease-spring) forwards;
  padding: var(--sp-6);
}
.modal-lg { max-width: 740px; }
.modal-sm { max-width: 400px; }
@keyframes modalIn {
  from { opacity: 0; transform: scale(0.96) translateY(10px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
.modal-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--sp-4); margin-bottom: var(--sp-5);
}
.modal-title {
  font-size: 18px; font-weight: 800;
  color: var(--color-text-primary); letter-spacing: -0.02em;
}
.modal-subtitle { font-size: 13px; color: var(--color-text-tertiary); margin-top: 3px; }
.modal-close {
  width: 32px; height: 32px; border-radius: var(--r-md);
  display: grid; place-items: center;
  background: var(--color-surface-overlay); border: none;
  color: var(--color-text-tertiary); font-size: 16px;
  cursor: pointer; transition: all var(--dur-fast); flex-shrink: 0;
}
.modal-close:hover { background: var(--color-error-bg); color: var(--color-error-fg); }
.modal-body { margin-bottom: var(--sp-5); }
.modal-footer {
  display: flex; justify-content: flex-end; gap: var(--sp-3);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--color-border-subtle);
}

/* ═══ 20. COMMAND PALETTE ═══════════════════════════════════════════ */
.cmd-backdrop {
  position: fixed; inset: 0;
  background: hsl(222 16% 9% / 0.4);
  backdrop-filter: blur(4px);
  z-index: 5000; display: flex;
  align-items: flex-start; justify-content: center;
  padding-top: 15vh;
}
.cmd-palette {
  background: var(--color-surface-elevated);
  border: 1px solid var(--color-border-default);
  border-radius: var(--r-2xl);
  box-shadow: var(--shadow-2xl);
  width: 100%; max-width: 580px;
  overflow: hidden;
  animation: cmdIn 0.22s var(--ease-spring) forwards;
}
@keyframes cmdIn {
  from { opacity: 0; transform: scale(0.97) translateY(-8px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
.cmd-input-wrap {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--color-border-subtle);
}
.cmd-input-icon { font-size: 16px; color: var(--color-text-tertiary); flex-shrink: 0; }
.cmd-input {
  flex: 1; border: none; background: transparent;
  font-size: 16px; color: var(--color-text-primary);
  outline: none;
}
.cmd-input::placeholder { color: var(--color-text-disabled); }
.cmd-list { max-height: 380px; overflow-y: auto; padding: var(--sp-2); }
.cmd-group-label {
  padding: var(--sp-2) var(--sp-3);
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--color-text-disabled);
}
.cmd-item {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-3);
  border-radius: var(--r-lg);
  cursor: pointer; transition: background var(--dur-fast);
  font-size: 14px; color: var(--color-text-primary);
}
.cmd-item:hover, .cmd-item.active { background: var(--color-surface-overlay); }
.cmd-item.active { background: var(--color-brand-muted); color: var(--color-brand-text); }
.cmd-item-icon {
  width: 32px; height: 32px; border-radius: var(--r-md);
  display: grid; place-items: center;
  font-size: 14px; flex-shrink: 0;
  background: var(--color-surface-overlay);
  color: var(--color-text-secondary);
}
.cmd-item-label { flex: 1; font-weight: 500; }
.cmd-item-sub { font-size: 12px; color: var(--color-text-tertiary); }
.cmd-item-kbd { font-size: 10px; font-family: var(--font-mono); color: var(--color-text-tertiary); }
.cmd-footer {
  display: flex; align-items: center; gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-5);
  border-top: 1px solid var(--color-border-subtle);
  background: var(--color-surface-overlay);
  font-size: 11px; color: var(--color-text-tertiary);
}
.cmd-footer kbd {
  font-family: var(--font-mono); padding: 1px 5px;
  background: var(--color-surface-elevated);
  border: 1px solid var(--color-border-default);
  border-radius: var(--r-sm); font-size: 10px;
  color: var(--color-text-secondary);
}

/* ═══ 21. DROPDOWN ══════════════════════════════════════════════════ */
.dropdown { position: relative; display: inline-block; }
.dropdown-menu {
  position: absolute; top: calc(100% + 6px); right: 0;
  min-width: 180px;
  background: var(--color-surface-elevated);
  border: 1px solid var(--color-border-default);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-xl);
  z-index: 1000; overflow: hidden;
  animation: dropIn 0.18s var(--ease-spring) forwards;
  padding: var(--sp-1);
}
@keyframes dropIn {
  from { opacity: 0; transform: translateY(-6px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.dropdown-item {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3); width: 100%;
  font-size: 13.5px; color: var(--color-text-primary);
  border: none; background: transparent; cursor: pointer;
  border-radius: var(--r-md); transition: background var(--dur-fast);
  text-align: left;
}
.dropdown-item:hover { background: var(--color-surface-overlay); }
.dropdown-item.danger { color: var(--color-error-fg); }
.dropdown-item.danger:hover { background: var(--color-error-bg); }
.dropdown-divider {
  height: 1px; background: var(--color-border-subtle);
  margin: var(--sp-1) 0;
}
.dropdown-header {
  padding: var(--sp-2) var(--sp-3);
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--color-text-disabled);
}

/* ═══ 22. TABS ══════════════════════════════════════════════════════ */
.tabs {
  display: flex; gap: 2px;
  border-bottom: 1px solid var(--color-border-subtle);
  margin-bottom: var(--sp-5); overflow-x: auto;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab-item {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4); padding-bottom: var(--sp-3);
  border: none; background: transparent;
  font-size: 13.5px; font-weight: 500;
  color: var(--color-text-secondary); cursor: pointer;
  position: relative; white-space: nowrap;
  transition: color var(--dur-fast);
}
.tab-item:hover { color: var(--color-text-primary); }
.tab-item.active {
  color: var(--color-brand-default); font-weight: 700;
}
.tab-item.active::after {
  content: '';
  position: absolute; bottom: -1px; left: 0; right: 0;
  height: 2px; background: var(--color-brand-default);
  border-radius: var(--r-full);
}
.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* Pill tabs */
.tabs-pill {
  display: flex; gap: var(--sp-1);
  padding: 3px; background: var(--color-surface-overlay);
  border-radius: var(--r-lg);
  border: 1px solid var(--color-border-subtle);
  width: fit-content;
}
.tab-pill {
  padding: 6px var(--sp-4); border-radius: var(--r-md);
  font-size: 13px; font-weight: 500;
  color: var(--color-text-secondary); cursor: pointer;
  border: none; background: transparent; white-space: nowrap;
  transition: all var(--dur-fast);
}
.tab-pill.active {
  background: var(--color-surface-elevated);
  color: var(--color-text-primary); font-weight: 700;
  box-shadow: var(--shadow-sm);
}

/* ═══ 23. ACCORDION ═════════════════════════════════════════════════ */
.accordion { border: 1px solid var(--color-border-subtle); border-radius: var(--r-xl); overflow: hidden; }
.accordion + .accordion { margin-top: var(--sp-2); }
.accordion-item { border-bottom: 1px solid var(--color-border-subtle); }
.accordion-item:last-child { border-bottom: none; }
.accordion-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sp-4) var(--sp-5);
  cursor: pointer; transition: background var(--dur-fast);
  font-size: 14px; font-weight: 600;
  color: var(--color-text-primary);
  background: var(--color-surface-elevated);
  border: none; width: 100%; text-align: left; gap: var(--sp-3);
}
.accordion-header:hover { background: var(--color-surface-overlay); }
.accordion-chevron {
  font-size: 12px; color: var(--color-text-tertiary);
  transition: transform var(--dur-normal) var(--ease-smooth);
  flex-shrink: 0;
}
.accordion-item.open .accordion-chevron { transform: rotate(180deg); }
.accordion-body {
  overflow: hidden; max-height: 0;
  transition: max-height var(--dur-slow) var(--ease-smooth);
  background: var(--color-surface-elevated);
}
.accordion-body-inner { padding: var(--sp-4) var(--sp-5); border-top: 1px solid var(--color-border-subtle); }

/* ═══ 24. TOOLTIP ═══════════════════════════════════════════════════ */
[data-tooltip] { position: relative; }
.lumina-tooltip {
  position: fixed; z-index: 9000;
  padding: 6px 10px;
  background: hsl(var(--hsl-slate-800));
  color: hsl(var(--hsl-slate-100));
  font-size: 12px; font-weight: 500;
  border-radius: var(--r-md);
  box-shadow: var(--shadow-xl);
  pointer-events: none; white-space: nowrap;
  animation: tooltipIn 0.15s var(--ease-enter) forwards;
}
@keyframes tooltipIn { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }

/* ═══ 25. SKELETON ══════════════════════════════════════════════════ */
.skeleton {
  background: linear-gradient(90deg,
    var(--color-surface-overlay) 25%,
    var(--color-surface-sunken) 50%,
    var(--color-surface-overlay) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite linear;
  border-radius: var(--r-md);
}
@keyframes shimmer { 0% { background-position: 200% 0; } to { background-position: -200% 0; } }
.skeleton-text  { height: 14px; margin-bottom: var(--sp-2); }
.skeleton-title { height: 20px; margin-bottom: var(--sp-3); }
.skeleton-card  { height: 120px; border-radius: var(--r-xl); }
.skeleton-circle { border-radius: var(--r-full); }

/* ═══ 26. EMPTY / ERROR STATE ═══════════════════════════════════════ */
.empty-state {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: var(--sp-16) var(--sp-8);
  min-height: 300px;
}
.empty-icon {
  width: 72px; height: 72px; border-radius: var(--r-2xl);
  display: grid; place-items: center;
  background: var(--color-surface-overlay);
  font-size: 28px; color: var(--color-text-disabled);
  margin-bottom: var(--sp-5);
}
.empty-title {
  font-size: 18px; font-weight: 800;
  color: var(--color-text-primary); letter-spacing: -0.02em;
  margin-bottom: var(--sp-2);
}
.empty-desc { font-size: 14px; color: var(--color-text-tertiary); max-width: 340px; line-height: 1.6; margin-bottom: var(--sp-5); }

/* ═══ 27. ALERT ═════════════════════════════════════════════════════ */
.alert {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  padding: var(--sp-4);
  border-radius: var(--r-lg); border: 1px solid;
  margin-bottom: var(--sp-4); font-size: 13.5px;
}
.alert-info    { background: var(--color-info-bg);    border-color: var(--color-info-border);    color: var(--color-info-fg); }
.alert-success { background: var(--color-success-bg); border-color: var(--color-success-border); color: var(--color-success-fg); }
.alert-warning { background: var(--color-warning-bg); border-color: var(--color-warning-border); color: var(--color-warning-fg); }
.alert-danger  { background: var(--color-error-bg);   border-color: var(--color-error-border);   color: var(--color-error-fg); }
.alert-icon { font-size: 16px; flex-shrink: 0; margin-top: 1px; }
.alert-body { flex: 1; }
.alert-title { font-weight: 700; margin-bottom: 2px; }
.alert-text  { opacity: 0.85; line-height: 1.5; }

/* ═══ 28. SPINNER ════════════════════════════════════════════════════ */
.spinner {
  display: inline-block;
  border: 3px solid var(--color-border-default);
  border-top-color: var(--color-brand-default);
  border-radius: 50%;
  width: 24px; height: 24px;
  animation: spin 0.7s linear infinite;
}
.spinner.sm  { width: 16px; height: 16px; border-width: 2px; }
.spinner.lg  { width: 36px; height: 36px; border-width: 4px; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ═══ 29. ANIMATIONS ════════════════════════════════════════════════ */
.anim-fade-in {
  animation: fadeIn var(--dur-normal) var(--ease-enter) both;
}
.anim-slide-up {
  animation: slideUp var(--dur-slow) var(--ease-spring) both;
}
.anim-slide-right {
  animation: slideRight var(--dur-slow) var(--ease-spring) both;
}
@keyframes fadeIn   { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp  { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@keyframes slideRight { from { opacity: 0; transform: translateX(-16px); } to { opacity: 1; transform: translateX(0); } }

.page-enter {
  animation: pageEnter 0.32s var(--ease-spring) both;
}
@keyframes pageEnter {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Stagger delays */
[style*="animation-delay: 0.05"], [style*="animation-delay:0.05s"] { animation-delay: 50ms; }
[style*="animation-delay: 0.1"],  [style*="animation-delay:0.1s"]  { animation-delay: 100ms; }
[style*="animation-delay: 0.15"], [style*="animation-delay:0.15s"] { animation-delay: 150ms; }
[style*="animation-delay: 0.2"],  [style*="animation-delay:0.2s"]  { animation-delay: 200ms; }

/* Ripple */
.ripple { position: relative; overflow: hidden; }
.ripple::after {
  content: ''; position: absolute; border-radius: 50%;
  width: 100px; height: 100px;
  background: hsl(0 0% 100% / 0.25);
  transform: scale(0); animation: none;
  top: 50%; left: 50%; margin: -50px 0 0 -50px;
}
.ripple:active::after {
  animation: rippleAnim 0.5s ease forwards;
}
@keyframes rippleAnim { to { transform: scale(4); opacity: 0; } }

/* ═══ 30. CHART ══════════════════════════════════════════════════════ */
.chart-wrapper { position: relative; overflow: hidden; }
.chart-wrapper canvas { display: block; }

/* ═══ 31. STUDENT CARDS ═════════════════════════════════════════════ */
.student-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--sp-3);
}
.student-card {
  background: var(--color-surface-elevated);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--r-xl); padding: var(--sp-5);
  transition: all var(--dur-normal) var(--ease-smooth);
  cursor: pointer; position: relative; overflow: hidden;
}
.student-card:hover {
  border-color: var(--color-border-default);
  box-shadow: var(--shadow-md); transform: translateY(-2px);
}
.student-card-header {
  display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-3);
}
.student-avatar {
  width: 44px; height: 44px; border-radius: var(--r-full);
  display: grid; place-items: center;
  font-size: 16px; font-weight: 700;
  background: var(--color-brand-muted);
  color: var(--color-brand-strong); flex-shrink: 0;
}
.student-name { font-size: 15px; font-weight: 700; color: var(--color-text-primary); }
.student-meta { font-size: 12px; color: var(--color-text-tertiary); margin-top: 2px; }
.student-card-body { display: flex; flex-direction: column; gap: var(--sp-2); }
.student-card-row {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 12.5px;
}
.student-card-row .label { color: var(--color-text-tertiary); }
.student-card-row .value { font-weight: 600; color: var(--color-text-primary); }

/* ═══ 32. CLASS & EXAM CARDS ════════════════════════════════════════ */
.class-card, .exam-card {
  background: var(--color-surface-elevated);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--r-xl); padding: var(--sp-5);
  transition: all var(--dur-normal) var(--ease-smooth);
  cursor: pointer;
}
.class-card:hover, .exam-card:hover {
  box-shadow: var(--shadow-md); border-color: var(--color-border-default); transform: translateY(-1px);
}
.class-card-title, .exam-card-title {
  font-size: 15px; font-weight: 700;
  color: var(--color-text-primary); margin-bottom: var(--sp-2);
}

/* ═══ 33. KANBAN ════════════════════════════════════════════════════ */
.kanban-board {
  display: flex; gap: var(--sp-4); align-items: flex-start;
  overflow-x: auto; padding-bottom: var(--sp-4);
}
.kanban-col {
  min-width: 280px; width: 280px; flex-shrink: 0;
  background: var(--color-surface-overlay);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--r-xl);
  display: flex; flex-direction: column;
}
.kanban-col-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sp-4) var(--sp-4) var(--sp-3);
  border-bottom: 1px solid var(--color-border-subtle);
}
.kanban-col-title {
  font-size: 13px; font-weight: 700; color: var(--color-text-primary); display: flex; align-items: center; gap: var(--sp-2);
}
.kanban-col-count {
  font-size: 11px; font-weight: 700;
  min-width: 20px; height: 20px; padding: 0 6px;
  background: var(--color-surface-elevated);
  border: 1px solid var(--color-border-default);
  border-radius: var(--r-full);
  display: flex; align-items: center; justify-content: center;
  color: var(--color-text-secondary);
}
.kanban-cards { padding: var(--sp-3); display: flex; flex-direction: column; gap: var(--sp-2); min-height: 80px; }
.kanban-card, .task-card {
  background: var(--color-surface-elevated);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--r-lg); padding: var(--sp-3) var(--sp-4);
  cursor: grab; transition: all var(--dur-fast);
}
.kanban-card:hover, .task-card:hover { box-shadow: var(--shadow-md); border-color: var(--color-border-default); }
.kanban-card:active { cursor: grabbing; }
.kanban-card.dragging { opacity: 0.5; transform: rotate(2deg); }
.kanban-drop-target {
  border: 2px dashed var(--color-border-brand);
  background: var(--color-brand-subtle);
  border-radius: var(--r-lg); min-height: 60px;
}
.task-card-title { font-size: 13px; font-weight: 600; color: var(--color-text-primary); margin-bottom: var(--sp-2); }
.task-card-meta  { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }

/* Risk badge */
.risk-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 8px; border-radius: var(--r-full);
  font-size: 11px; font-weight: 700;
}
.risk-high   { background: var(--color-error-bg);   color: var(--color-error-fg); }
.risk-medium { background: var(--color-warning-bg); color: var(--color-warning-fg); }
.risk-low    { background: var(--color-success-bg); color: var(--color-success-fg); }

/* ═══ 34. CRM CARD ══════════════════════════════════════════════════ */
.crm-card {
  background: var(--color-surface-elevated);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--r-xl); padding: var(--sp-4) var(--sp-5);
  transition: all var(--dur-fast); cursor: pointer;
  display: flex; align-items: center; gap: var(--sp-4);
}
.crm-card:hover { box-shadow: var(--shadow-md); border-color: var(--color-border-default); }

/* ═══ 35. FINANCE ════════════════════════════════════════════════════ */
.finance-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-3); margin-bottom: var(--sp-5);
}
.finance-item {
  background: var(--color-surface-elevated);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--r-xl); padding: var(--sp-5);
  text-align: center;
}
.finance-item-value { font-size: 22px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.2; }
.finance-item-label { font-size: 12px; color: var(--color-text-tertiary); margin-top: 4px; }
.pay-bar { display: flex; height: 8px; border-radius: var(--r-full); overflow: hidden; gap: 2px; margin: var(--sp-2) 0; }
.pay-bar-paid    { background: var(--color-success-fg); border-radius: var(--r-full); }
.pay-bar-partial { background: var(--color-warning-fg); border-radius: var(--r-full); }
.pay-bar-unpaid  { background: var(--color-error-fg); border-radius: var(--r-full); }

/* ═══ 36. STAFF ══════════════════════════════════════════════════════ */
.staff-card {
  background: var(--color-surface-elevated);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--r-xl); padding: var(--sp-5);
  transition: all var(--dur-fast); cursor: pointer;
}
.staff-card:hover { box-shadow: var(--shadow-md); border-color: var(--color-border-default); }
.staff-avatar {
  width: 48px; height: 48px; border-radius: var(--r-full);
  display: grid; place-items: center;
  font-size: 18px; font-weight: 700; flex-shrink: 0;
}
.staff-name  { font-size: 15px; font-weight: 700; color: var(--color-text-primary); }
.staff-role  { font-size: 12px; color: var(--color-text-tertiary); margin-top: 2px; }
.staff-stats {
  display: flex; gap: var(--sp-3); flex-wrap: wrap;
  font-size: 12px; color: var(--color-text-secondary); margin-top: var(--sp-3);
}
.staff-stats span { display: flex; align-items: center; gap: 4px; }

/* ═══ 37. CONSULTATION ══════════════════════════════════════════════ */
.consult-item {
  display: flex; gap: var(--sp-4);
  padding: var(--sp-4) 0;
  border-bottom: 1px solid var(--color-border-subtle);
}
.consult-item:last-child { border-bottom: none; }
.consult-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--color-brand-default); flex-shrink: 0;
  margin-top: 5px;
}
.consult-meta { font-size: 12px; color: var(--color-text-tertiary); margin-top: 3px; }
.consult-note { font-size: 13px; color: var(--color-text-secondary); margin-top: 4px; line-height: 1.5; }

/* ═══ 38. TIMELINE ══════════════════════════════════════════════════ */
.timeline { display: flex; flex-direction: column; gap: 0; }
.timeline-item {
  display: flex; gap: var(--sp-4); position: relative; padding-bottom: var(--sp-4);
}
.timeline-item:last-child { padding-bottom: 0; }
.timeline-left { display: flex; flex-direction: column; align-items: center; }
.timeline-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--color-brand-default);
  border: 2px solid var(--color-surface-elevated);
  box-shadow: 0 0 0 2px var(--color-brand-default);
  flex-shrink: 0; margin-top: 4px;
  z-index: 1; position: relative;
}
.timeline-line {
  flex: 1; width: 2px; min-height: 24px;
  background: var(--color-border-subtle);
  margin-top: 4px;
}
.timeline-item:last-child .timeline-line { display: none; }
.timeline-body { flex: 1; min-width: 0; padding-bottom: var(--sp-2); }
.timeline-time { font-size: 11px; color: var(--color-text-tertiary); margin-bottom: 4px; font-weight: 600; }
.timeline-title { font-size: 13.5px; font-weight: 600; color: var(--color-text-primary); }
.timeline-desc  { font-size: 12px; color: var(--color-text-secondary); margin-top: 2px; }

/* Lesson item in timeline */
.lesson-item {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-5);
  border-bottom: 1px solid var(--color-border-subtle);
  transition: background var(--dur-fast);
}
.lesson-item:last-child { border-bottom: none; }
.lesson-item:hover { background: var(--color-surface-hover); }
.lesson-time {
  min-width: 50px; font-size: 11px;
  font-weight: 700; color: var(--color-text-tertiary);
  font-family: var(--font-mono);
}
.lesson-bar { width: 3px; height: 36px; border-radius: 2px; opacity: 0.8; flex-shrink: 0; }
.lesson-body { flex: 1; min-width: 0; }
.lesson-name  { font-size: 13px; font-weight: 600; color: var(--color-text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lesson-sub   { font-size: 11px; color: var(--color-text-tertiary); margin-top: 1px; }

/* ═══ 39. DATE PICKER ════════════════════════════════════════════════ */
.datepicker-popup {
  position: absolute; z-index: 2000; top: calc(100% + 6px); left: 0;
  background: var(--color-surface-elevated);
  border: 1px solid var(--color-border-default);
  border-radius: var(--r-xl); box-shadow: var(--shadow-xl);
  padding: var(--sp-4); min-width: 280px;
  animation: dropIn 0.18s var(--ease-spring) forwards;
}
.dp-nav {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: var(--sp-3);
}
.dp-title { font-size: 14px; font-weight: 700; color: var(--color-text-primary); }
.dp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.dp-day-label {
  font-size: 10px; font-weight: 700; text-align: center;
  color: var(--color-text-tertiary); padding: 4px 0;
}
.dp-day {
  aspect-ratio: 1; display: grid; place-items: center;
  font-size: 12px; border-radius: var(--r-md);
  cursor: pointer; transition: all var(--dur-fast);
  color: var(--color-text-primary); border: none; background: transparent;
}
.dp-day:hover { background: var(--color-surface-overlay); }
.dp-day.today { font-weight: 700; color: var(--color-brand-default); }
.dp-day.selected { background: var(--color-brand-default); color: #fff; }
.dp-day.other-month { color: var(--color-text-disabled); }

/* ═══ 40. MATRIX / SCORE TABLE ══════════════════════════════════════ */
.matrix-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.matrix-table th, .matrix-table td {
  padding: 6px var(--sp-3);
  text-align: center;
  border: 1px solid var(--color-border-subtle);
}
.matrix-table th { background: var(--color-surface-overlay); font-weight: 700; color: var(--color-text-secondary); }
.matrix-cell-high   { background: var(--color-success-bg); color: var(--color-success-fg); font-weight: 700; }
.matrix-cell-mid    { background: var(--color-warning-bg); color: var(--color-warning-fg); font-weight: 700; }
.matrix-cell-low    { background: var(--color-error-bg);   color: var(--color-error-fg);   font-weight: 700; }

/* ═══ 41. INSIGHT CARD ══════════════════════════════════════════════ */
.insight-card {
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-lg);
  border: 1px solid;
  margin-bottom: var(--sp-2);
  display: flex; align-items: flex-start; gap: var(--sp-3);
  transition: all var(--dur-fast);
}
.insight-card:hover { box-shadow: var(--shadow-sm); }
.insight-card.critical { background: var(--color-error-bg);   border-color: var(--color-error-border);   }
.insight-card.warning  { background: var(--color-warning-bg); border-color: var(--color-warning-border); }
.insight-card.info     { background: var(--color-info-bg);    border-color: var(--color-info-border);    }
.insight-card.success  { background: var(--color-success-bg); border-color: var(--color-success-border); }
.insight-icon { font-size: 14px; flex-shrink: 0; margin-top: 2px; }
.insight-card.critical .insight-icon { color: var(--color-error-fg); }
.insight-card.warning  .insight-icon { color: var(--color-warning-fg); }
.insight-card.info     .insight-icon { color: var(--color-info-fg); }
.insight-card.success  .insight-icon { color: var(--color-success-fg); }
.insight-body { flex: 1; min-width: 0; }
.insight-label { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; }
.insight-card.critical .insight-label { color: var(--color-error-fg); }
.insight-card.warning  .insight-label { color: var(--color-warning-fg); }
.insight-card.info     .insight-label { color: var(--color-info-fg); }
.insight-card.success  .insight-label { color: var(--color-success-fg); }
.insight-title  { font-size: 13px; font-weight: 700; color: var(--color-text-primary); margin: 2px 0; }
.insight-msg    { font-size: 12px; color: var(--color-text-secondary); line-height: 1.5; }
.insight-date   { font-size: 10px; color: var(--color-text-tertiary); margin-top: 2px; }

/* ═══ 42. BOTTOM NAV (Mobile) ═══════════════════════════════════════ */
.bottom-nav {
  position: fixed; bottom: 0; left: 0; right: 0;
  height: 60px; background: var(--color-surface-elevated);
  border-top: 1px solid var(--color-border-subtle);
  display: flex; z-index: 50;
  padding-bottom: env(safe-area-inset-bottom);
}
.bottom-nav-item {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; padding: 4px 0;
  font-size: 10px; font-weight: 500;
  color: var(--color-text-tertiary); cursor: pointer;
  transition: color var(--dur-fast); border: none; background: transparent;
}
.bottom-nav-item i { font-size: 18px; }
.bottom-nav-item.active { color: var(--color-brand-default); }

/* ═══ 43. DIVIDER ════════════════════════════════════════════════════ */
.divider {
  height: 1px; background: var(--color-border-subtle);
  margin: var(--sp-4) 0;
}
.divider-lg { margin: var(--sp-6) 0; }

/* ═══ 44. TAG ════════════════════════════════════════════════════════ */
.tag {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: var(--r-md);
  font-size: 12px; font-weight: 600;
  background: var(--color-surface-overlay);
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border-subtle);
}
.tag .tag-remove {
  cursor: pointer; opacity: 0.6; transition: opacity var(--dur-fast);
}
.tag .tag-remove:hover { opacity: 1; }

/* ═══ 45. SECTION HEADER PATTERN ════════════════════════════════════ */
.sec-hd {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4); margin-bottom: var(--sp-4); flex-wrap: wrap;
}
.sec-hd-left  { flex: 1; min-width: 0; }
.sec-hd-right { display: flex; align-items: center; gap: var(--sp-2); flex-shrink: 0; }
.sec-title {
  font-size: 16px; font-weight: 800;
  color: var(--color-text-primary); letter-spacing: -0.02em;
}
.sec-desc { font-size: 12.5px; color: var(--color-text-tertiary); margin-top: 2px; }

/* ═══ 46. STAT ROW ══════════════════════════════════════════════════ */
.stat-row {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2) 0;
  border-bottom: 1px solid var(--color-border-subtle);
  font-size: 13px;
}
.stat-row:last-child { border-bottom: none; }
.stat-row-label { flex: 1; color: var(--color-text-secondary); }
.stat-row-value { font-weight: 700; color: var(--color-text-primary); }
.stat-row-bar { flex: 2; height: 4px; background: var(--color-surface-overlay); border-radius: var(--r-full); overflow: hidden; }

/* ═══ 47. SCORE RING ════════════════════════════════════════════════ */
.score-ring {
  width: 80px; height: 80px; border-radius: 50%;
  display: grid; place-items: center;
  background: conic-gradient(var(--color) var(--pct, 0%), var(--color-surface-overlay) 0%);
  position: relative;
}
.score-ring::before {
  content: ''; position: absolute; inset: 8px;
  border-radius: 50%; background: var(--color-surface-elevated);
}
.score-ring-text {
  position: relative; z-index: 1;
  font-size: 18px; font-weight: 800;
  color: var(--color-text-primary);
}

/* ═══ 48. WORKBOOK ══════════════════════════════════════════════════ */
.workbook-editor {
  background: var(--color-surface-elevated);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--r-xl);
  min-height: 400px; padding: var(--sp-6);
}
.workbook-editor [contenteditable] { outline: none; }

/* ═══ 49. RESPONSIVE ════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .grid-2   { grid-template-columns: 1fr; }
  .grid-3   { grid-template-columns: 1fr 1fr; }
  .grid-4   { grid-template-columns: 1fr 1fr; }
  .dash-grid { grid-template-columns: 1fr; }
  .grid-2-3, .grid-3-2, .grid-sidebar-main { grid-template-columns: 1fr; }
  .kpi-grid-4 { grid-template-columns: repeat(2, 1fr); }
  .kpi-grid-6 { grid-template-columns: repeat(3, 1fr); }
  .finance-summary { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  :root { --topbar-h: 52px; }
  .sidebar { position: fixed; left: -100%; transition: left var(--dur-slow) var(--ease-smooth); }
  .sidebar.mobile-open { left: 0; }
  .sidebar-overlay.mobile-open { display: block; }
  .content-area { padding: var(--sp-4); padding-bottom: 76px; }
  .kpi-grid      { grid-template-columns: repeat(2, 1fr); }
  .kpi-grid-4    { grid-template-columns: repeat(2, 1fr); }
  .kpi-grid-6    { grid-template-columns: repeat(2, 1fr); }
  .grid-2        { grid-template-columns: 1fr; }
  .grid-3        { grid-template-columns: 1fr; }
  .grid-4        { grid-template-columns: 1fr 1fr; }
  .hero-stats    { gap: var(--sp-5); }
  .hero-title    { font-size: 22px; }
  .hero-stat-value { font-size: 22px; }
  .page-title    { font-size: 18px; }
  #menu-toggle   { display: flex !important; }
  #live-indicator, .search-bar { display: none; }
  .bottom-nav    { display: flex; }
  .qa-grid       { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 480px) {
  .kpi-grid, .kpi-grid-4, .kpi-grid-6 { grid-template-columns: 1fr; }
  .hero-section { padding: var(--sp-5) var(--sp-4); }
  .qa-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ═══ 50. PRINT ══════════════════════════════════════════════════════ */
@media print {
  .sidebar, .topbar, .bottom-nav, #toast-root { display: none !important; }
  .content-area { padding: 0; overflow: visible; }
  .main-area { overflow: visible; }
  .app-shell { height: auto; }
  .panel, .kpi-card, .card { break-inside: avoid; }
}

/* ═══════════════════════════════════════════════════════════════════
   LUMINA DESIGN SYSTEM v13.0 — 추가 컴포넌트
   lesson-item · insight-card · finance-item · sec-hd · empty-state-sm
   alert 고도화 · mt-2 유틸
   ═══════════════════════════════════════════════════════════════════ */

/* ── Utility 보완 ── */
.mt-2 { margin-top: var(--sp-2); }
.mt-6 { margin-top: var(--sp-6); }
.mb-5 { margin-bottom: var(--sp-5); }
.px-5 { padding-left: var(--sp-5); padding-right: var(--sp-5); }
.py-4 { padding-top: var(--sp-4); padding-bottom: var(--sp-4); }
.btn-xs { padding: 3px var(--sp-2); font-size: 11px; border-radius: var(--r-sm); }

/* ── lesson-item — 수업 타임라인 ── */
.lesson-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-5);
  border-bottom: 1px solid var(--color-border-subtle);
  transition: background var(--dur-fast);
}
.lesson-item:last-child { border-bottom: none; }
.lesson-item:hover { background: var(--color-surface-hover); }

.lesson-time {
  min-width: 48px;
  font-size: 11px;
  font-weight: 700;
  color: var(--color-text-tertiary);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  flex-shrink: 0;
}
.lesson-bar {
  width: 3px;
  height: 36px;
  border-radius: var(--r-full);
  background: var(--color-border-strong);
  flex-shrink: 0;
  opacity: 0.5;
  transition: opacity var(--dur-fast);
}
.lesson-item.completed .lesson-bar { background: var(--color-success-fg); opacity: 0.8; }
.lesson-item.ongoing   .lesson-bar { background: hsl(var(--hsl-cyan-400)); opacity: 1; }

.lesson-body {
  flex: 1;
  min-width: 0;
}
.lesson-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}
.lesson-meta {
  font-size: 11px;
  color: var(--color-text-tertiary);
  margin-top: 2px;
  line-height: 1.3;
}
.lesson-status-icon {
  font-size: 14px;
  color: var(--color-border-strong);
  flex-shrink: 0;
  transition: color var(--dur-fast);
}
.lesson-item.completed .lesson-status-icon { color: var(--color-success-fg); }
.lesson-item.ongoing   .lesson-status-icon { color: hsl(var(--hsl-cyan-400)); }

/* ── insight-card — AI 인사이트 ── */
.insight-card {
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-lg);
  border: 1px solid var(--color-border-subtle);
  background: var(--color-surface-overlay);
  margin-bottom: var(--sp-2);
  transition: all var(--dur-fast);
}
.insight-card:last-child { margin-bottom: 0; }
.insight-card:hover { box-shadow: var(--shadow-sm); }

.insight-card.critical {
  background: var(--color-error-bg);
  border-color: var(--color-error-border);
}
.insight-card.warning {
  background: var(--color-warning-bg);
  border-color: var(--color-warning-border);
}
.insight-card.info {
  background: var(--color-info-bg);
  border-color: var(--color-info-border);
}
.insight-card.success {
  background: var(--color-success-bg);
  border-color: var(--color-success-border);
}

.insight-card-header {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-1);
}
.insight-icon {
  font-size: 13px;
  flex-shrink: 0;
}
.insight-card.critical .insight-icon { color: var(--color-error-fg); }
.insight-card.warning  .insight-icon { color: var(--color-warning-fg); }
.insight-card.info     .insight-icon { color: var(--color-info-fg); }
.insight-card.success  .insight-icon { color: var(--color-success-fg); }

.insight-label {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.insight-card.critical .insight-label { color: var(--color-error-fg); }
.insight-card.warning  .insight-label { color: var(--color-warning-fg); }
.insight-card.info     .insight-label { color: var(--color-info-fg); }
.insight-card.success  .insight-label { color: var(--color-success-fg); }

.insight-date {
  font-size: 10px;
  color: var(--color-text-tertiary);
  margin-left: auto;
}
.insight-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--color-text-primary);
  margin-bottom: 2px;
  line-height: 1.4;
}
.insight-msg {
  font-size: 11px;
  color: var(--color-text-secondary);
  line-height: 1.5;
}

/* ── finance-item — 재무 수치 블록 ── */
.finance-item {
  padding: var(--sp-3) var(--sp-3);
  background: var(--color-surface-overlay);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--r-lg);
  text-align: center;
  transition: all var(--dur-fast);
}
.finance-item:hover { border-color: var(--color-border-default); box-shadow: var(--shadow-xs); }
.finance-item-value {
  font-size: 14px;
  font-weight: 800;
  color: var(--color-text-primary);
  letter-spacing: -0.02em;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.finance-item-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--color-text-tertiary);
  margin-top: 3px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ── sec-hd — 섹션 헤더 ── */
.sec-hd {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
}
.sec-hd-left { flex: 1; min-width: 0; }
.sec-hd-right { display: flex; align-items: center; gap: var(--sp-2); flex-shrink: 0; }
.sec-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text-primary);
  letter-spacing: -0.015em;
  line-height: 1.2;
}
.sec-desc {
  font-size: 12px;
  color: var(--color-text-tertiary);
  margin-top: 2px;
  line-height: 1.4;
}

/* ── empty-state-sm — 인라인 빈 상태 ── */
.empty-state-sm {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-8) var(--sp-4);
  color: var(--color-text-tertiary);
  text-align: center;
}
.empty-state-sm i {
  font-size: 28px;
  opacity: 0.35;
  display: block;
}
.empty-state-sm span {
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
}

/* ── alert 고도화 ── */
.alert {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-xl);
  border: 1px solid;
  margin-bottom: var(--sp-4);
  font-size: 13px;
}
.alert-icon-wrap {
  width: 36px;
  height: 36px;
  border-radius: var(--r-full);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  font-size: 16px;
}
.alert-danger  .alert-icon-wrap { background: var(--color-error-bg);   color: var(--color-error-fg); }
.alert-warning .alert-icon-wrap { background: var(--color-warning-bg); color: var(--color-warning-fg); }
.alert-info    .alert-icon-wrap { background: var(--color-info-bg);    color: var(--color-info-fg); }
.alert-success .alert-icon-wrap { background: var(--color-success-bg); color: var(--color-success-fg); }
.alert-body { flex: 1; min-width: 0; }
.alert-title {
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 2px;
}
.alert-text  { font-size: 12px; opacity: 0.85; line-height: 1.4; }
.alert-action { flex-shrink: 0; }

.alert-danger  {
  background: var(--color-error-bg);
  border-color: var(--color-error-border);
  color: var(--color-error-fg);
}
.alert-danger .alert-action {
  border-color: var(--color-error-border);
  color: var(--color-error-fg);
}
.alert-warning {
  background: var(--color-warning-bg);
  border-color: var(--color-warning-border);
  color: var(--color-warning-fg);
}
.alert-info {
  background: var(--color-info-bg);
  border-color: var(--color-info-border);
  color: var(--color-info-fg);
}
.alert-success {
  background: var(--color-success-bg);
  border-color: var(--color-success-border);
  color: var(--color-success-fg);
}

/* ── 추가 Tailwind-subset 보완 ── */
.gap-5 { gap: var(--sp-5); }
.gap-0 { gap: 0; }
.w-auto { width: auto; }
.h-full { height: 100%; }
.place-items-center { place-items: center; }
.self-stretch { align-self: stretch; }
.flex-none { flex: none; }
.text-inherit { color: inherit; }
.not-italic { font-style: normal; }
.capitalize { text-transform: capitalize; }
.uppercase  { text-transform: uppercase; }
.tracking-wide { letter-spacing: 0.05em; }
.tracking-wider { letter-spacing: 0.08em; }
.lh-tight { line-height: 1.25; }
.lh-loose { line-height: 1.75; }
.no-underline { text-decoration: none; }
.underline { text-decoration: underline; }
.list-none { list-style: none; }
.text-4xl { font-size: 36px; }
.text-5xl { font-size: 48px; }
.font-light { font-weight: 300; }
.font-normal { font-weight: 400; }
.rounded-sm { border-radius: var(--r-sm); }
.rounded-lg { border-radius: var(--r-lg); }
.rounded-xl { border-radius: var(--r-xl); }
.rounded-2xl { border-radius: var(--r-2xl); }
.border-0  { border: none; }
.border-2  { border: 2px solid var(--color-border-default); }
.bg-transparent { background: transparent; }
.bg-overlay { background: var(--color-surface-overlay); }
.bg-brand-subtle { background: var(--color-brand-subtle); }
.ring { box-shadow: 0 0 0 3px hsl(var(--hsl-blue-400) / 0.15); }

/* ── KPI sparkline 추가 ── */
.kpi-sparkline-row {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 32px;
  margin-top: var(--sp-2);
}
.sparkline-bar {
  flex: 1;
  border-radius: 2px 2px 0 0;
  background: var(--color-brand-muted);
  transition: height 0.6s var(--ease-smooth), background var(--dur-fast);
  min-height: 4px;
}
.sparkline-bar:hover { background: var(--color-brand-default); }

/* ── Notification badge upgrade ── */
.notif-badge {
  position: absolute;
  top: 5px; right: 5px;
  min-width: 16px; height: 16px;
  padding: 0 4px;
  background: var(--color-error-fg);
  color: #fff;
  font-size: 9px; font-weight: 800;
  border-radius: var(--r-full);
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--color-surface-elevated);
  line-height: 1;
}

/* ── 대시보드 수납 트렌드 바 ── */
.trend-bar-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex: 1;
}
.trend-bar-outer {
  width: 100%;
  height: 60px;
  background: var(--color-surface-overlay);
  border-radius: var(--r-sm);
  overflow: hidden;
  display: flex;
  align-items: flex-end;
}
.trend-bar-fill {
  width: 100%;
  background: var(--color-brand-default);
  transition: height 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
  border-radius: var(--r-sm) var(--r-sm) 0 0;
}
.trend-bar-label {
  font-size: 9px;
  color: var(--color-text-tertiary);
  font-weight: 600;
  white-space: nowrap;
}

/* ── Pagination ── */
.pagination {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  justify-content: center;
  margin-top: var(--sp-4);
}
.page-btn {
  min-width: 32px; height: 32px;
  padding: 0 var(--sp-2);
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--r-md);
  border: 1px solid var(--color-border-subtle);
  background: var(--color-surface-elevated);
  color: var(--color-text-secondary);
  font-size: 13px; font-weight: 500;
  cursor: pointer;
  transition: all var(--dur-fast);
}
.page-btn:hover { border-color: var(--color-border-brand); color: var(--color-brand-text); }
.page-btn.active {
  background: var(--color-brand-default);
  border-color: var(--color-brand-default);
  color: #fff; font-weight: 700;
}
.page-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* ── Tag / Chip ── */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px var(--sp-2);
  border-radius: var(--r-full);
  border: 1px solid var(--color-border-default);
  background: var(--color-surface-elevated);
  font-size: 12px;
  font-weight: 500;
  color: var(--color-text-secondary);
  white-space: nowrap;
  cursor: default;
}
.tag-remove {
  width: 14px; height: 14px;
  border-radius: var(--r-full);
  display: flex; align-items: center; justify-content: center;
  font-size: 9px; cursor: pointer;
  background: var(--color-border-default);
  color: var(--color-text-secondary);
  border: none;
  transition: all var(--dur-fast);
}
.tag-remove:hover { background: var(--color-error-fg); color: #fff; }

/* ── Divider ── */
.divider {
  height: 1px;
  background: var(--color-border-subtle);
  margin: var(--sp-4) 0;
}
.divider-vertical {
  width: 1px;
  background: var(--color-border-subtle);
  align-self: stretch;
}

/* ── Avatar group ── */
.avatar-group {
  display: flex;
  flex-direction: row-reverse;
}
.avatar-group .student-avatar {
  border: 2px solid var(--color-surface-elevated);
  margin-left: -10px;
  font-size: 12px;
  width: 32px; height: 32px;
}
.avatar-group .student-avatar:first-child { margin-left: 0; }

/* ── Stat row ── */
.stat-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--sp-2) 0;
  border-bottom: 1px solid var(--color-border-subtle);
  font-size: 13px;
}
.stat-row:last-child { border-bottom: none; }
.stat-row-label { color: var(--color-text-secondary); }
.stat-row-value { font-weight: 700; color: var(--color-text-primary); }

/* ═══════════════════════════════════════════════════════════════
   NOVA Academy — 누락 클래스 완전 보충 v14.0
   스캔된 450개 미정의 클래스 중 핵심 컴포넌트 클래스 정의
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. Page sub-title ── */
.page-sub {
  font-size: 13px;
  color: var(--color-text-secondary);
  margin-top: var(--sp-1);
  line-height: 1.5;
}

/* ── 2. Page Icon accent variants ── */
.page-icon.accent-indigo {
  background: color-mix(in srgb, hsl(var(--hsl-indigo-500)) 12%, transparent);
  color: hsl(var(--hsl-indigo-400));
}
.page-icon.accent-emerald, .page-icon.accent-e {
  background: var(--color-success-bg);
  color: var(--color-success-fg);
}
.page-icon.accent-amber, .page-icon.accent-a {
  background: var(--color-warning-bg);
  color: hsl(var(--hsl-amber-400));
}
.page-icon.accent-violet, .page-icon.accent-v {
  background: color-mix(in srgb, hsl(var(--hsl-violet-500)) 12%, transparent);
  color: hsl(var(--hsl-violet-400));
}
.page-icon.accent-cyan, .page-icon.accent-c {
  background: var(--color-info-bg);
  color: hsl(var(--hsl-cyan-400));
}
.page-icon.accent-sky, .page-icon.accent-s {
  background: color-mix(in srgb, hsl(var(--hsl-sky-500)) 12%, transparent);
  color: hsl(var(--hsl-sky-400));
}
.page-icon.accent-rose {
  background: var(--color-error-bg);
  color: var(--color-error-fg);
}
.page-icon.accent-blue {
  background: color-mix(in srgb, hsl(var(--hsl-blue-500)) 12%, transparent);
  color: hsl(var(--hsl-blue-400));
}

/* stat-icon accent variants */
.stat-icon { width: 40px; height: 40px; border-radius: var(--r-xl); display: grid; place-items: center; font-size: 16px; flex-shrink: 0; }
.stat-icon.accent-e { background: var(--color-success-bg); color: var(--color-success-fg); }
.stat-icon.accent-a { background: var(--color-warning-bg); color: hsl(var(--hsl-amber-400)); }
.stat-icon.accent-c { background: var(--color-error-bg); color: var(--color-error-fg); }
.stat-icon.accent-s { background: color-mix(in srgb, hsl(var(--hsl-sky-500)) 12%, transparent); color: hsl(var(--hsl-sky-400)); }
.stat-icon.accent-v { background: color-mix(in srgb, hsl(var(--hsl-violet-500)) 12%, transparent); color: hsl(var(--hsl-violet-400)); }
.stat-icon.accent-indigo { background: color-mix(in srgb, hsl(var(--hsl-indigo-500)) 12%, transparent); color: hsl(var(--hsl-indigo-400)); }
.stat-icon.accent-blue { background: color-mix(in srgb, hsl(var(--hsl-blue-500)) 12%, transparent); color: hsl(var(--hsl-blue-400)); }

/* panel-icon accent */
.panel-icon { width: 36px; height: 36px; border-radius: var(--r-lg); display: grid; place-items: center; font-size: 15px; flex-shrink: 0; }
.panel-icon.accent-e { background: var(--color-success-bg); color: var(--color-success-fg); }
.panel-icon.accent-v { background: color-mix(in srgb, hsl(var(--hsl-violet-500)) 12%, transparent); color: hsl(var(--hsl-violet-400)); }

/* ── 3. Student card (stud-*) ── */
.stud-avatar {
  width: 44px; height: 44px;
  border-radius: var(--r-full);
  display: grid; place-items: center;
  font-size: 16px; font-weight: 700;
  color: #fff;
  flex-shrink: 0;
  position: relative;
}
.stud-dot {
  position: absolute;
  bottom: 2px; right: 2px;
  width: 10px; height: 10px;
  border-radius: var(--r-full);
  border: 2px solid var(--color-surface-elevated);
}
.stud-name {
  font-size: 14px; font-weight: 600;
  color: var(--color-text-primary);
  line-height: 1.3;
}
.stud-school {
  font-size: 12px;
  color: var(--color-text-tertiary);
}
.stud-meta {
  font-size: 11px;
  color: var(--color-text-tertiary);
  display: flex; gap: var(--sp-2); flex-wrap: wrap;
  margin-top: var(--sp-1);
}
.stud-right {
  margin-left: auto;
  display: flex; flex-direction: column;
  align-items: flex-end; gap: var(--sp-1);
  flex-shrink: 0;
}
.stud-date {
  font-size: 11px;
  color: var(--color-text-tertiary);
}
.stud-arrow {
  color: var(--color-text-tertiary);
  font-size: 12px;
  transition: transform var(--dur-fast) ease;
}

/* ── 4. Empty state variants ── */
.empty-state-glass {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: var(--sp-12) var(--sp-6);
  text-align: center;
  background: var(--color-surface-elevated);
  border: 1px dashed var(--color-border-subtle);
  border-radius: var(--r-2xl);
}
.empty-state-icon {
  width: 56px; height: 56px;
  border-radius: var(--r-full);
  background: var(--color-surface-overlay);
  display: grid; place-items: center;
  font-size: 22px;
  color: var(--color-text-tertiary);
  margin-bottom: var(--sp-4);
}
.empty-state-title {
  font-size: 15px; font-weight: 600;
  color: var(--color-text-secondary);
  margin-bottom: var(--sp-1);
}
.empty-state-desc {
  font-size: 13px;
  color: var(--color-text-tertiary);
  line-height: 1.6;
}
.empty { display: flex; flex-direction: column; align-items: center; padding: var(--sp-8); text-align: center; }
.empty-center { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--sp-10); text-align: center; }
.empty-icon-lg { font-size: 48px; margin-bottom: var(--sp-4); opacity: .4; }
.empty-title { font-size: 15px; font-weight: 600; color: var(--color-text-secondary); }

/* ── 5. stat-* 통계 카드 ── */
.stat-card {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: var(--color-surface-elevated);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--r-xl);
}
.stat-val {
  font-size: 22px; font-weight: 800;
  color: var(--color-text-primary);
  line-height: 1;
}
.stat-label { font-size: 12px; color: var(--color-text-tertiary); }
.stat-mini { display: flex; flex-direction: column; align-items: center; gap: var(--sp-1); }
.stat-mini-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
  gap: var(--sp-3);
}
.stat-mini-label { font-size: 11px; color: var(--color-text-tertiary); }
.stat-mini-val { font-size: 18px; font-weight: 700; color: var(--color-text-primary); }
.stats-bar { display: flex; align-items: center; gap: var(--sp-2); margin-top: var(--sp-2); }

/* ── 6. mini-kpi aliases (val, lbl) ── */
.mini-kpi-val {
  font-size: 18px; font-weight: 700;
  color: var(--color-text-primary);
  line-height: 1;
}
.mini-kpi-lbl {
  font-size: 11px;
  color: var(--color-text-tertiary);
  margin-top: var(--sp-1);
}

/* ── 7. glass-card ── */
.glass-card {
  background: var(--color-surface-elevated);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--r-2xl);
  overflow: hidden;
}
.glass-card-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--color-border-subtle);
}
.glass-card-title {
  font-size: 14px; font-weight: 600;
  color: var(--color-text-primary);
  display: flex; align-items: center; gap: var(--sp-2);
}
.glass-card-body { padding: var(--sp-5); }

/* ── 8. card-body, card-header, card-title (generic) ── */
.card-body { padding: var(--sp-4); }
.card-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--color-border-subtle);
}
.card-title { font-size: 14px; font-weight: 600; color: var(--color-text-primary); }

/* ── 9. score-* 성적 표시 ── */
.score-circle {
  width: 52px; height: 52px;
  border-radius: var(--r-full);
  background: color-mix(in srgb, var(--score-color, hsl(var(--hsl-emerald-400))) 15%, transparent);
  border: 2px solid var(--score-color, hsl(var(--hsl-emerald-400)));
  display: grid; place-items: center;
  font-size: 14px; font-weight: 800;
  color: var(--score-color, hsl(var(--hsl-emerald-400)));
  flex-shrink: 0;
}
.score-bar {
  height: 6px;
  background: var(--color-surface-overlay);
  border-radius: var(--r-full);
  overflow: hidden;
  flex: 1;
}
.score-fill {
  height: 100%;
  border-radius: var(--r-full);
  transition: width var(--dur-normal) ease;
}

/* ── 10. pay-bar-* 수납 바 차트 ── */
.pay-bars {
  display: flex; align-items: flex-end;
  gap: var(--sp-2);
  height: 80px;
}
.pay-bar-col { display: flex; flex-direction: column; align-items: center; gap: var(--sp-1); flex: 1; }
.pay-bar-wrap {
  width: 100%; flex: 1;
  background: var(--color-surface-overlay);
  border-radius: var(--r-md) var(--r-md) 0 0;
  overflow: hidden;
  position: relative;
  min-height: 4px;
}
.pay-bar-fill {
  position: absolute; bottom: 0; left: 0; right: 0;
  border-radius: var(--r-md) var(--r-md) 0 0;
  transition: height var(--dur-normal) ease;
}
.pay-bar-rate { font-size: 10px; font-weight: 600; color: var(--color-text-secondary); }
.pay-bar-label { font-size: 10px; color: var(--color-text-tertiary); }

/* ── 11. matrix-* 수납 매트릭스 ── */
.matrix-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.matrix-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  min-width: 600px;
}
.matrix-table th, .matrix-table td {
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--color-border-subtle);
  text-align: center;
  white-space: nowrap;
}
.matrix-table th { background: var(--color-surface-overlay); font-weight: 600; color: var(--color-text-secondary); }
.matrix-cell { cursor: pointer; transition: background var(--dur-fast) ease; }
.matrix-cell:hover { background: var(--color-surface-overlay); }
.matrix-cell-high { background: var(--color-success-bg); color: var(--color-success-fg); font-weight: 600; }
.matrix-cell-mid  { background: var(--color-warning-bg); color: hsl(var(--hsl-amber-600)); font-weight: 600; }
.matrix-cell-low  { background: var(--color-error-bg); color: var(--color-error-fg); font-weight: 600; }

/* ── 12. panel-list-item, panel-item-* ── */
.panel-list-item {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--color-border-subtle);
  transition: background var(--dur-fast) ease;
}
.panel-list-item:last-child { border-bottom: none; }
.panel-list-item:hover { background: var(--color-surface-overlay); }
/* panel-item: 아이콘+바디 레이아웃 컨테이너 */
.panel-item {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--color-border-subtle);
  transition: background var(--dur-fast) ease;
}
.panel-item:last-child { border-bottom: none; }
.panel-item:hover { background: var(--color-surface-hover); }
.panel-item-icon { width: 36px; height: 36px; border-radius: var(--r-lg); display: grid; place-items: center; font-size: 15px; flex-shrink: 0; }
.panel-item-body { flex: 1; min-width: 0; }
.panel-item-title { font-size: 13px; font-weight: 600; color: var(--color-text-primary); }
.panel-item-sub { font-size: 12px; color: var(--color-text-tertiary); }

/* ── 13. Analytics grid ── */
.analytics-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--sp-5); }

/* ── 14. Finance chart cards ── */
.finance-chart-card {
  background: var(--color-surface-elevated);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--r-2xl);
  overflow: hidden;
}
.finance-chart-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--color-border-subtle);
}
.finance-chart-title { font-size: 14px; font-weight: 600; color: var(--color-text-primary); }
.finance-chart-body { padding: var(--sp-4); }
.finance-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--sp-4); }

/* finance P&L */
.fin-pl-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: var(--sp-2) 0;
  border-bottom: 1px solid var(--color-border-subtle);
  font-size: 13px;
}
.fin-pl-row:last-child { border-bottom: none; }
.fin-pl-section-header {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--color-text-tertiary);
  padding: var(--sp-2) 0 var(--sp-1);
}
.fin-toggle { display: flex; gap: var(--sp-1); }
.profit-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: var(--sp-3) 0;
  font-weight: 700; font-size: 14px;
  border-top: 2px solid var(--color-border-default);
}
.total-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: var(--sp-2) 0;
  font-weight: 600;
  border-top: 1px solid var(--color-border-default);
}

/* finance unpaid */
.finance-unpaid-card { padding: var(--sp-4); background: var(--color-error-bg); border: 1px solid var(--color-error-border); border-radius: var(--r-xl); }
.finance-unpaid-item { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) 0; border-bottom: 1px solid var(--color-border-subtle); }
.finance-unpaid-item:last-child { border-bottom: none; }
.finance-unpaid-avatar { width: 32px; height: 32px; border-radius: var(--r-full); background: var(--color-error-fg); display: grid; place-items: center; font-size: 13px; font-weight: 700; color: #fff; }
.finance-unpaid-name { font-size: 13px; font-weight: 600; color: var(--color-text-primary); }
.finance-unpaid-meta { font-size: 11px; color: var(--color-text-tertiary); }
.finance-unpaid-amt { font-size: 13px; font-weight: 700; color: var(--color-error-fg); margin-left: auto; }

/* payment quick info */
.payment-quick-info {
  display: flex; gap: var(--sp-4); flex-wrap: wrap;
  padding: var(--sp-4) var(--sp-5);
  background: var(--color-surface-elevated);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--r-xl);
}
.pq-student { font-size: 14px; font-weight: 600; color: var(--color-text-primary); }
.pq-period { font-size: 12px; color: var(--color-text-tertiary); }

/* ── 15. exam-* 시험 카드 ── */
.exam-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--sp-4); }
.exam-card {
  background: var(--color-surface-elevated);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--r-2xl);
  overflow: hidden;
  transition: transform var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
}
.exam-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px var(--color-shadow-md); }
.exam-top { padding: var(--sp-4); }
.exam-title { font-size: 14px; font-weight: 700; color: var(--color-text-primary); }
.exam-meta { font-size: 12px; color: var(--color-text-tertiary); margin-top: var(--sp-1); }
.exam-type { display: inline-flex; align-items: center; gap: var(--sp-1); margin-top: var(--sp-2); }
.exam-type-tag { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: var(--r-full); background: var(--color-surface-overlay); color: var(--color-text-secondary); }
.exam-body { padding: var(--sp-4); border-top: 1px solid var(--color-border-subtle); }
.exam-stats { display: flex; gap: var(--sp-4); }
.exam-stat { display: flex; flex-direction: column; align-items: center; }
.exam-stat-val { font-size: 20px; font-weight: 800; color: var(--color-text-primary); }
.exam-stat-lbl { font-size: 11px; color: var(--color-text-tertiary); }

/* ── 16. salary-* 급여 ── */
.salary-card {
  background: var(--color-surface-elevated);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--r-2xl);
  overflow: hidden;
}
.salary-card-header {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--color-border-subtle);
}
.salary-card-title { font-size: 14px; font-weight: 600; color: var(--color-text-primary); }
.salary-avatar { width: 40px; height: 40px; border-radius: var(--r-full); display: grid; place-items: center; font-size: 16px; font-weight: 700; color: #fff; flex-shrink: 0; }
.salary-kpi-card { background: var(--color-surface-overlay); border-radius: var(--r-xl); padding: var(--sp-4); display: flex; align-items: center; gap: var(--sp-3); }
.salary-kpi-icon { width: 36px; height: 36px; border-radius: var(--r-lg); display: grid; place-items: center; font-size: 15px; flex-shrink: 0; }
.salary-kpi-val { font-size: 18px; font-weight: 700; color: var(--color-text-primary); }
.salary-kpi-lbl { font-size: 11px; color: var(--color-text-tertiary); }
.salary-kpi { display: flex; flex-direction: column; gap: var(--sp-1); }
.salary-net { font-size: 24px; font-weight: 800; color: var(--color-text-primary); }
.salary-progress { height: 6px; background: var(--color-surface-overlay); border-radius: var(--r-full); overflow: hidden; }
.salary-progress-fill { height: 100%; border-radius: var(--r-full); }
.salary-breakdown { padding: var(--sp-4); }
.salary-rec {
  display: flex; justify-content: space-between; align-items: center;
  padding: var(--sp-2) 0;
  border-bottom: 1px solid var(--color-border-subtle);
  font-size: 13px;
}
.salary-rec:last-child { border-bottom: none; }

/* ── 17. notif-* 알림 패널 ── */
.notif-panel {
  position: fixed; top: 56px; right: var(--sp-4);
  width: 360px; max-height: 500px;
  background: var(--color-surface-elevated);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--r-2xl);
  box-shadow: 0 16px 48px var(--color-shadow-lg);
  z-index: 900;
  overflow: hidden;
  display: flex; flex-direction: column;
}
.notif-item {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--color-border-subtle);
  transition: background var(--dur-fast) ease;
  cursor: pointer;
}
.notif-item:last-child { border-bottom: none; }
.notif-item:hover { background: var(--color-surface-overlay); }
.notif-item.unread { background: var(--color-info-bg); }
.notif-icon { width: 32px; height: 32px; border-radius: var(--r-full); display: grid; place-items: center; font-size: 13px; flex-shrink: 0; }
.list-item { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--color-border-subtle); transition: background var(--dur-fast) ease; }
.list-item.unread { background: var(--color-info-bg); }
.list-item-body { flex: 1; min-width: 0; }
.list-item-title { font-size: 13px; font-weight: 600; color: var(--color-text-primary); }
.list-item-sub { font-size: 12px; color: var(--color-text-tertiary); }

/* ── 18. staff-* ── */
.staff-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--sp-4); }
.staff-grid .staff-card { cursor: pointer; transition: transform var(--dur-fast) ease; }
.staff-grid .staff-card:hover { transform: translateY(-2px); }
.staff-info { flex: 1; min-width: 0; }
.staff-info-row { display: flex; align-items: center; gap: var(--sp-2); font-size: 12px; color: var(--color-text-tertiary); margin-top: var(--sp-1); }
.staff-actions { display: flex; gap: var(--sp-2); }

/* ── 19. chart-card ── */
.chart-card {
  background: var(--color-surface-elevated);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--r-2xl);
  overflow: hidden;
}
.chart-card-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--color-border-subtle);
}
.chart-card-title { font-size: 14px; font-weight: 600; color: var(--color-text-primary); }
.chart-card-sub { font-size: 12px; color: var(--color-text-tertiary); }
.chart-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--sp-5); }

/* ── 20. class-* ── */
.class-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--sp-4); }
.class-card {
  background: var(--color-surface-elevated);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--r-2xl);
  overflow: hidden;
  cursor: pointer;
  transition: transform var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
}
.class-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px var(--color-shadow-md); }
.class-stripe { height: 4px; }
.class-top { padding: var(--sp-4); }
.class-name { font-size: 15px; font-weight: 700; color: var(--color-text-primary); }
.class-teacher { font-size: 12px; color: var(--color-text-tertiary); margin-top: var(--sp-1); }
.class-body { padding: 0 var(--sp-4); }
.class-stats { display: flex; gap: var(--sp-4); font-size: 13px; color: var(--color-text-secondary); }
.class-cap-bar { height: 4px; background: var(--color-surface-overlay); border-radius: var(--r-full); overflow: hidden; margin-top: var(--sp-1); }
.class-cap-fill { height: 100%; border-radius: var(--r-full); }
.class-footer { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-3) var(--sp-4); border-top: 1px solid var(--color-border-subtle); }
.class-fee { font-size: 13px; font-weight: 600; color: var(--color-text-primary); }
.class-pill { font-size: 11px; padding: 2px 8px; border-radius: var(--r-full); }

/* ── 21. kanban-* ── */
.kanban-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--sp-4); }
.kanban-summary { display: flex; gap: var(--sp-4); padding: var(--sp-4) var(--sp-5); background: var(--color-surface-elevated); border: 1px solid var(--color-border-subtle); border-radius: var(--r-xl); }
.kanban-sum { display: flex; align-items: center; gap: var(--sp-2); flex: 1; }
.kanban-sum-icon { font-size: 20px; }
.kanban-sum-val { font-size: 18px; font-weight: 700; color: var(--color-text-primary); }
.kanban-sum-lbl { font-size: 11px; color: var(--color-text-tertiary); }

/* kb-* kanban board */
.kb-nav-bar { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-4); }
.kb-month-pills, .kb-week-pills { display: flex; gap: var(--sp-1); flex-wrap: wrap; }
.kb-month-pill, .kb-week-pill { padding: var(--sp-1) var(--sp-3); border-radius: var(--r-full); font-size: 12px; font-weight: 500; background: var(--color-surface-overlay); color: var(--color-text-secondary); border: 1px solid var(--color-border-subtle); cursor: pointer; transition: all var(--dur-fast) ease; }
.kb-month-pill.active, .kb-week-pill.active { background: var(--color-accent-brand); color: #fff; border-color: transparent; }
.kb-cols { display: flex; gap: var(--sp-4); overflow-x: auto; padding-bottom: var(--sp-4); }
.kb-col { min-width: 240px; flex: 1; background: var(--color-surface-overlay); border-radius: var(--r-xl); padding: var(--sp-3); }
.kb-col-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-3); }
.kb-col-count { font-size: 11px; font-weight: 600; padding: 2px 8px; background: var(--color-surface-elevated); border-radius: var(--r-full); color: var(--color-text-secondary); }
.kb-col-empty { padding: var(--sp-6); text-align: center; font-size: 12px; color: var(--color-text-tertiary); border: 1px dashed var(--color-border-subtle); border-radius: var(--r-lg); }
.kb-cards { display: flex; flex-direction: column; gap: var(--sp-2); }
.kb-card { background: var(--color-surface-elevated); border: 1px solid var(--color-border-subtle); border-radius: var(--r-lg); padding: var(--sp-3); cursor: pointer; transition: all var(--dur-fast) ease; }
.kb-card:hover { box-shadow: 0 4px 12px var(--color-shadow-md); transform: translateY(-1px); }
.kb-card-text { font-size: 13px; font-weight: 600; color: var(--color-text-primary); }
.kb-card-actions { display: flex; gap: var(--sp-1); margin-top: var(--sp-2); }
.kb-move-btn { font-size: 11px; padding: 2px var(--sp-2); border-radius: var(--r-md); background: var(--color-surface-overlay); border: 1px solid var(--color-border-subtle); color: var(--color-text-secondary); cursor: pointer; transition: all var(--dur-fast) ease; }
.kb-done-stamp { font-size: 10px; font-weight: 700; color: var(--color-success-fg); padding: 2px 6px; background: var(--color-success-bg); border-radius: var(--r-full); display: inline-flex; align-items: center; gap: 3px; }

/* kb-axis */
.kb-axis-block { background: var(--color-surface-elevated); border: 1px solid var(--color-border-subtle); border-radius: var(--r-xl); overflow: hidden; }
.kb-axis-header { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--color-border-subtle); }
.kb-axis-icon { width: 32px; height: 32px; border-radius: var(--r-lg); display: grid; place-items: center; font-size: 14px; flex-shrink: 0; }
.kb-axis-title { font-size: 13px; font-weight: 600; color: var(--color-text-primary); }
.kb-axis-role { font-size: 11px; color: var(--color-text-tertiary); }

/* ── 22. consult-* 상담 ── */
.consult-card { background: var(--color-surface-elevated); border: 1px solid var(--color-border-subtle); border-radius: var(--r-xl); overflow: hidden; cursor: pointer; transition: all var(--dur-fast) ease; }
.consult-card:hover { box-shadow: 0 4px 16px var(--color-shadow-md); }
.consult-header { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--color-border-subtle); }
.consult-student { font-size: 14px; font-weight: 600; color: var(--color-text-primary); }
.consult-meta { font-size: 11px; color: var(--color-text-tertiary); }
.consult-body { padding: var(--sp-3) var(--sp-4); }
.consult-content { font-size: 13px; color: var(--color-text-secondary); line-height: 1.6; }
.consult-result { font-size: 12px; font-weight: 500; color: var(--color-text-secondary); margin-top: var(--sp-2); }
.consult-followup { padding: var(--sp-3) var(--sp-4); background: var(--color-surface-overlay); border-top: 1px solid var(--color-border-subtle); font-size: 12px; color: var(--color-text-secondary); }
.consult-chip { font-size: 11px; padding: 2px 8px; border-radius: var(--r-full); background: var(--color-surface-overlay); color: var(--color-text-secondary); }
.consult-list { display: flex; flex-direction: column; gap: var(--sp-3); }
.consult-side { display: flex; flex-direction: column; gap: var(--sp-3); }
.consult-stats { display: flex; gap: var(--sp-3); flex-wrap: wrap; }
.consult-actions { display: flex; gap: var(--sp-2); }

/* followup-* */
.followup-list { display: flex; flex-direction: column; gap: var(--sp-2); }
.followup-item { display: flex; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-3); background: var(--color-surface-overlay); border-radius: var(--r-lg); }
.followup-item-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-1); }
.followup-date { font-size: 12px; color: var(--color-text-tertiary); }
.followup-method { font-size: 11px; font-weight: 500; padding: 2px 8px; border-radius: var(--r-full); background: var(--color-surface-elevated); border: 1px solid var(--color-border-subtle); }
.followup-result { font-size: 13px; color: var(--color-text-secondary); }
.followup-next { font-size: 11px; color: hsl(var(--hsl-amber-400)); font-weight: 500; margin-top: var(--sp-1); }

/* ── 23. r-* 리포트 테이블 ── */
.r-score, .r-imp, .r-prev, .r-cmt, .r-sid { font-size: 13px; color: var(--color-text-primary); }
.r-score { font-weight: 700; }
.r-imp { color: var(--color-success-fg); font-weight: 600; }
.r-prev { color: var(--color-text-tertiary); }
.r-cmt { color: var(--color-text-secondary); font-style: italic; }
.r-sid { color: var(--color-text-tertiary); font-size: 11px; }

/* ── 24. form-* 확장 ── */
.form-input { width: 100%; padding: var(--sp-3) var(--sp-4); font-size: 14px; background: var(--color-surface-elevated); border: 1px solid var(--color-border-default); border-radius: var(--r-lg); color: var(--color-text-primary); transition: border-color var(--dur-fast) ease; outline: none; }
.form-input:focus { border-color: var(--color-accent-brand); box-shadow: 0 0 0 3px var(--color-brand-muted); }
.form-select { width: 100%; padding: var(--sp-3) var(--sp-4); font-size: 14px; background: var(--color-surface-elevated); border: 1px solid var(--color-border-default); border-radius: var(--r-lg); color: var(--color-text-primary); cursor: pointer; appearance: none; outline: none; }
.form-select:focus { border-color: var(--color-accent-brand); }
.form-textarea { width: 100%; padding: var(--sp-3) var(--sp-4); font-size: 14px; background: var(--color-surface-elevated); border: 1px solid var(--color-border-default); border-radius: var(--r-lg); color: var(--color-text-primary); resize: vertical; outline: none; }
.form-textarea:focus { border-color: var(--color-accent-brand); box-shadow: 0 0 0 3px var(--color-brand-muted); }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--sp-4); }
.form-full { grid-column: 1 / -1; }

/* ── 25. attend-* 출결 ── */
.attend-wrap { overflow-x: auto; }
.attend-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.attend-table th, .attend-table td { padding: var(--sp-2) var(--sp-3); border: 1px solid var(--color-border-subtle); text-align: center; white-space: nowrap; }
.attend-table th { background: var(--color-surface-overlay); font-weight: 600; color: var(--color-text-secondary); font-size: 11px; }
.attend-btn { width: 28px; height: 28px; border-radius: var(--r-md); border: 1px solid var(--color-border-subtle); background: var(--color-surface-overlay); cursor: pointer; transition: all var(--dur-fast) ease; font-size: 11px; font-weight: 600; display: grid; place-items: center; }
.attend-dot { width: 8px; height: 8px; border-radius: var(--r-full); display: inline-block; }
.bulk-attend-row { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) 0; }
.bulk-attend-name { flex: 1; font-size: 13px; font-weight: 500; color: var(--color-text-primary); }
.bulk-attend-btns { display: flex; gap: var(--sp-1); }
.bulk-attend-list { display: flex; flex-direction: column; gap: var(--sp-1); }

/* ── 26. task-* 업무 카드 ── */
.task-card {
  background: var(--color-surface-elevated);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--r-xl);
  padding: var(--sp-4);
  cursor: pointer;
  transition: all var(--dur-fast) ease;
}
.task-card:hover { box-shadow: 0 4px 12px var(--color-shadow-md); transform: translateY(-1px); }
.task-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.task-title { font-size: 13px; font-weight: 600; color: var(--color-text-primary); }
.task-desc { font-size: 12px; color: var(--color-text-secondary); line-height: 1.5; }
.task-footer { display: flex; align-items: center; gap: var(--sp-2); margin-top: var(--sp-3); }

/* ── 27. premium-card ── */
.premium-card {
  background: var(--color-surface-elevated);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--r-2xl);
  overflow: hidden;
}
.premium-card-header { padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--color-border-subtle); }
.premium-card-title { font-size: 15px; font-weight: 700; color: var(--color-text-primary); }
.premium-card-sub { font-size: 12px; color: var(--color-text-tertiary); margin-top: var(--sp-1); }
.premium-card-body { padding: var(--sp-5); }

/* ── 28. avatar (generic) ── */
.avatar { width: 36px; height: 36px; border-radius: var(--r-full); display: grid; place-items: center; font-size: 14px; font-weight: 700; color: #fff; flex-shrink: 0; }
.avatar-blue { background: linear-gradient(135deg, hsl(var(--hsl-blue-500)), hsl(var(--hsl-blue-400))); }

/* ── 29. loading-* ── */
.loading-state { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--sp-12); }
.loading-sm { display: flex; align-items: center; justify-content: center; padding: var(--sp-4); }
.loading-spinner { width: 20px; height: 20px; border: 2px solid var(--color-border-subtle); border-top-color: var(--color-accent-brand); border-radius: var(--r-full); animation: spin var(--dur-slow) linear infinite; }

/* ── 30. search-* 검색 ── */
.search-wrap { display: flex; align-items: center; gap: var(--sp-2); flex: 1; }
.search-input { flex: 1; padding: var(--sp-2) var(--sp-3); font-size: 13px; background: var(--color-surface-elevated); border: 1px solid var(--color-border-default); border-radius: var(--r-lg); color: var(--color-text-primary); outline: none; transition: border-color var(--dur-fast) ease; }
.search-input:focus { border-color: var(--color-accent-brand); }

/* ── 31. kpi-5 (5열 그리드) ── */
.kpi-5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--sp-4); }
@media (max-width: 1200px) { .kpi-5 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px) { .kpi-5 { grid-template-columns: repeat(2, 1fr); } }

/* ── 32. section-label ── */
.section-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--color-text-tertiary); padding: var(--sp-2) 0; }

/* ── 33. page-header-right ── */
.page-header-right { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }

/* ── 34. highlight (cmd-palette) ── */
.highlight { background: var(--color-warning-bg); color: hsl(var(--hsl-amber-600)); border-radius: 2px; }

/* cmd-* 보충 */
.cmd-empty { padding: var(--sp-8); text-align: center; font-size: 13px; color: var(--color-text-tertiary); }
.cmd-section-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--color-text-tertiary); padding: var(--sp-2) var(--sp-4) var(--sp-1); }
.cmd-shortcut { font-size: 10px; padding: 2px 6px; background: var(--color-surface-overlay); border: 1px solid var(--color-border-subtle); border-radius: 4px; color: var(--color-text-tertiary); }
.cmd-item-content { flex: 1; min-width: 0; }
.cmd-item-title { font-size: 13px; font-weight: 600; color: var(--color-text-primary); }
.cmd-item-desc { font-size: 11px; color: var(--color-text-tertiary); }
.cmd-highlight { background: var(--color-warning-bg); color: hsl(var(--hsl-amber-600)); }

/* ── 35. workbook / wb-* ── */
.wb-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-4); flex-wrap: wrap; gap: var(--sp-3); }
.wb-header-left { display: flex; align-items: center; gap: var(--sp-3); }
.wb-header-right { display: flex; align-items: center; gap: var(--sp-2); }
.wb-title { font-size: 18px; font-weight: 700; color: var(--color-text-primary); }
.wb-slogan { font-size: 12px; color: var(--color-text-tertiary); }
.wb-month-tabs-wrap { overflow-x: auto; margin-bottom: var(--sp-4); }
.wb-month-tabs { display: flex; gap: var(--sp-1); }
.wb-month-tab { padding: var(--sp-2) var(--sp-3); border-radius: var(--r-lg); font-size: 12px; font-weight: 500; background: transparent; border: 1px solid var(--color-border-subtle); color: var(--color-text-secondary); cursor: pointer; transition: all var(--dur-fast) ease; white-space: nowrap; display: flex; align-items: center; gap: var(--sp-1); }
.wb-month-tab.active { background: var(--color-accent-brand); color: #fff; border-color: transparent; }
.wb-tab-emoji { font-size: 14px; }
.wb-tab-name { font-size: 12px; font-weight: 500; }
.wb-tab-pct { font-size: 10px; font-weight: 600; opacity: .8; }
.wb-month-badge { font-size: 10px; font-weight: 600; padding: 1px 6px; border-radius: var(--r-full); background: var(--color-surface-overlay); }
.wb-overview-card { background: var(--color-surface-elevated); border: 1px solid var(--color-border-subtle); border-radius: var(--r-xl); padding: var(--sp-4); }
.wb-overview-title { font-size: 13px; font-weight: 600; color: var(--color-text-primary); margin-bottom: var(--sp-2); }
.wb-overview-text { font-size: 12px; color: var(--color-text-secondary); line-height: 1.6; }
.wb-progress-row { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-2); }
.wb-progress-label { font-size: 12px; color: var(--color-text-secondary); min-width: 80px; }
.wb-progress-track { flex: 1; height: 6px; background: var(--color-surface-overlay); border-radius: var(--r-full); overflow: hidden; }
.wb-progress-fill { height: 100%; border-radius: var(--r-full); }
.wb-progress-num { font-size: 12px; font-weight: 600; color: var(--color-text-primary); min-width: 32px; text-align: right; }
.wb-progress-pct { font-size: 12px; color: var(--color-text-tertiary); }
.wb-progress-info { font-size: 11px; color: var(--color-text-tertiary); }
.wb-role-filter { display: flex; gap: var(--sp-1); flex-wrap: wrap; }
.wb-role-btn { padding: var(--sp-1) var(--sp-3); border-radius: var(--r-full); font-size: 12px; font-weight: 500; background: var(--color-surface-overlay); border: 1px solid var(--color-border-subtle); color: var(--color-text-secondary); cursor: pointer; transition: all var(--dur-fast) ease; }
.wb-role-btn.active { background: var(--color-accent-brand); color: #fff; border-color: transparent; }
.wb-col-student, .wb-col-role, .wb-col-marketing, .wb-col-staff, .wb-col-label, .wb-col-text { font-size: 13px; padding: var(--sp-2) var(--sp-3); }
.wb-group { background: var(--color-surface-elevated); border: 1px solid var(--color-border-subtle); border-radius: var(--r-xl); overflow: hidden; margin-bottom: var(--sp-3); }
.wb-group-header { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--color-border-subtle); background: var(--color-surface-overlay); cursor: pointer; }
.wb-group-title { font-size: 13px; font-weight: 600; color: var(--color-text-primary); }
.wb-group-count { font-size: 11px; font-weight: 600; padding: 2px 8px; background: var(--color-surface-elevated); border-radius: var(--r-full); color: var(--color-text-secondary); }
.wb-group-role-badge { font-size: 11px; padding: 2px 8px; border-radius: var(--r-full); }
.wb-content-tabs { display: flex; gap: var(--sp-1); margin-bottom: var(--sp-4); border-bottom: 1px solid var(--color-border-subtle); }
.wb-content-tab { padding: var(--sp-2) var(--sp-4); font-size: 13px; font-weight: 500; color: var(--color-text-secondary); cursor: pointer; border-bottom: 2px solid transparent; transition: all var(--dur-fast) ease; }
.wb-content-tab.active { color: var(--color-text-primary); border-bottom-color: var(--color-accent-brand); }
.wb-week-cols { display: grid; grid-template-columns: 60px 1fr; gap: 0; }
.wb-week-header { font-size: 11px; font-weight: 600; color: var(--color-text-tertiary); padding: var(--sp-2) 0; border-bottom: 1px solid var(--color-border-subtle); }
.wb-week-col { display: flex; flex-direction: column; }
.wb-week-block { border-bottom: 1px solid var(--color-border-subtle); padding: var(--sp-2) var(--sp-3); }
.wb-col-label { font-size: 11px; color: var(--color-text-tertiary); border-bottom: 1px solid var(--color-border-subtle); padding: var(--sp-2) var(--sp-3); text-align: center; }
.wb-checklist { display: flex; flex-direction: column; gap: var(--sp-2); }
.wb-check-item { display: flex; align-items: flex-start; gap: var(--sp-2); padding: var(--sp-2); border-radius: var(--r-md); transition: background var(--dur-fast) ease; cursor: pointer; }
.wb-check-item:hover { background: var(--color-surface-overlay); }
.wb-checkbox { width: 16px; height: 16px; border-radius: 4px; border: 2px solid var(--color-border-default); flex-shrink: 0; display: grid; place-items: center; transition: all var(--dur-fast) ease; }
.wb-check-item.done .wb-checkbox { background: var(--color-success-fg); border-color: var(--color-success-fg); }
.wb-check-text { font-size: 13px; color: var(--color-text-secondary); }
.wb-check-item.done .wb-check-text { text-decoration: line-through; color: var(--color-text-tertiary); }

/* ── 36. timetable tt-* ── */
.tt-row { display: grid; grid-template-columns: 60px 1fr; border-bottom: 1px solid var(--color-border-subtle); }
.tt-cell-empty { background: var(--color-surface-overlay); }
.tt-cell-block { padding: var(--sp-1); position: relative; }
.tt-block { border-radius: var(--r-md); padding: var(--sp-2); font-size: 11px; font-weight: 600; overflow: hidden; cursor: pointer; }
.tt-empty-hint { font-size: 11px; color: var(--color-text-tertiary); text-align: center; padding: var(--sp-4); }

/* ── 37. crm-* ── */
.crm-pipeline { display: flex; gap: var(--sp-4); overflow-x: auto; padding-bottom: var(--sp-4); }
.crm-col { min-width: 220px; flex: 1; background: var(--color-surface-overlay); border-radius: var(--r-xl); padding: var(--sp-3); }
.crm-col-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-3); }
.crm-col-title { font-size: 13px; font-weight: 600; color: var(--color-text-primary); }
.crm-cards { display: flex; flex-direction: column; gap: var(--sp-2); }
.crm-card { background: var(--color-surface-elevated); border: 1px solid var(--color-border-subtle); border-radius: var(--r-lg); padding: var(--sp-3); cursor: pointer; transition: all var(--dur-fast) ease; }
.crm-card:hover { box-shadow: 0 4px 12px var(--color-shadow-md); }
.crm-name { font-size: 13px; font-weight: 600; color: var(--color-text-primary); }
.crm-meta { font-size: 11px; color: var(--color-text-tertiary); margin-top: var(--sp-1); }
.crm-avatar { width: 32px; height: 32px; border-radius: var(--r-full); display: grid; place-items: center; font-size: 13px; font-weight: 700; color: #fff; flex-shrink: 0; }
.crm-actions { display: flex; gap: var(--sp-2); margin-top: var(--sp-2); }
.crm-empty { padding: var(--sp-6); text-align: center; font-size: 12px; color: var(--color-text-tertiary); border: 1px dashed var(--color-border-subtle); border-radius: var(--r-lg); }

/* ── 38. manual-* 매뉴얼 ── */
.manual-hero { background: var(--color-surface-elevated); border: 1px solid var(--color-border-subtle); border-radius: var(--r-2xl); padding: var(--sp-6); margin-bottom: var(--sp-5); position: relative; overflow: hidden; }
.manual-hero-body { position: relative; z-index: 1; }
.manual-hero-emoji { font-size: 40px; margin-bottom: var(--sp-3); }
.manual-hero-theme { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--color-accent-brand); margin-bottom: var(--sp-1); }
.manual-hero-month { font-size: 13px; color: var(--color-text-tertiary); }
.manual-hero-slogan { font-size: 20px; font-weight: 800; color: var(--color-text-primary); line-height: 1.3; margin-bottom: var(--sp-2); }
.manual-hero-pct { font-size: 36px; font-weight: 900; color: var(--color-text-primary); line-height: 1; }
.manual-hero-pct-label { font-size: 12px; color: var(--color-text-tertiary); margin-top: var(--sp-1); }
.manual-hero-progress { height: 6px; background: var(--color-surface-overlay); border-radius: var(--r-full); overflow: hidden; margin-top: var(--sp-3); }
.manual-progress-bar { height: 100%; background: var(--color-surface-overlay); border-radius: var(--r-full); overflow: hidden; }
.manual-progress-fill { height: 100%; border-radius: var(--r-full); background: var(--color-accent-brand); }
.manual-progress-ring { width: 60px; height: 60px; border-radius: var(--r-full); border: 3px solid var(--color-surface-overlay); display: grid; place-items: center; font-size: 13px; font-weight: 700; }
.manual-overview-card { background: var(--color-surface-elevated); border: 1px solid var(--color-border-subtle); border-radius: var(--r-xl); padding: var(--sp-4); }
.manual-overview-badge { font-size: 10px; font-weight: 600; padding: 2px 8px; border-radius: var(--r-full); background: var(--color-surface-overlay); color: var(--color-text-secondary); margin-bottom: var(--sp-2); display: inline-block; }
.manual-overview-text { font-size: 13px; color: var(--color-text-secondary); line-height: 1.6; }
.manual-month-tabs { display: flex; gap: var(--sp-1); overflow-x: auto; padding-bottom: var(--sp-2); margin-bottom: var(--sp-4); }
.manual-month-tab { padding: var(--sp-2) var(--sp-4); border-radius: var(--r-full); font-size: 12px; font-weight: 500; background: var(--color-surface-overlay); border: 1px solid var(--color-border-subtle); color: var(--color-text-secondary); cursor: pointer; white-space: nowrap; transition: all var(--dur-fast) ease; }
.manual-month-tab.active { background: var(--color-accent-brand); color: #fff; border-color: transparent; }
.manual-tab-emoji { margin-right: 4px; }
.manual-tab-num { font-size: 10px; opacity: .7; }
.manual-detail-tabs { display: flex; gap: var(--sp-1); border-bottom: 1px solid var(--color-border-subtle); margin-bottom: var(--sp-4); }
.manual-detail-tab { padding: var(--sp-2) var(--sp-4); font-size: 13px; font-weight: 500; cursor: pointer; border-bottom: 2px solid transparent; color: var(--color-text-secondary); transition: all var(--dur-fast) ease; }
.manual-detail-tab.active { color: var(--color-text-primary); border-bottom-color: var(--color-accent-brand); }
.manual-detail-body { display: flex; flex-direction: column; gap: var(--sp-4); }
.manual-detail-section { background: var(--color-surface-elevated); border: 1px solid var(--color-border-subtle); border-radius: var(--r-xl); overflow: hidden; }
.manual-section-body { padding: var(--sp-4); }
.manual-section-points { display: flex; flex-direction: column; gap: var(--sp-2); }
.manual-points-title { font-size: 12px; font-weight: 600; color: var(--color-text-secondary); margin-bottom: var(--sp-2); }
.manual-points-list { display: flex; flex-direction: column; gap: var(--sp-1); }
.manual-point-item { display: flex; align-items: flex-start; gap: var(--sp-2); font-size: 13px; color: var(--color-text-secondary); }
.manual-point-dot { width: 6px; height: 6px; border-radius: var(--r-full); background: var(--color-accent-brand); margin-top: 5px; flex-shrink: 0; }
.manual-kpi-item { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-2) 0; border-bottom: 1px solid var(--color-border-subtle); }
.manual-kpi-item:last-child { border-bottom: none; }
.manual-kpi-name { font-size: 13px; color: var(--color-text-secondary); }
.manual-kpi-target { font-size: 13px; font-weight: 600; color: var(--color-text-primary); }
.manual-weekly-section { display: flex; flex-direction: column; gap: var(--sp-3); }
.manual-week-row { display: flex; align-items: flex-start; gap: var(--sp-3); }
.manual-week-item { background: var(--color-surface-elevated); border: 1px solid var(--color-border-subtle); border-radius: var(--r-xl); flex: 1; overflow: hidden; }
.manual-week-body { padding: var(--sp-3); }
.manual-week-icon { font-size: 20px; margin-bottom: var(--sp-2); }
.manual-week-badge { font-size: 10px; font-weight: 600; padding: 2px 8px; border-radius: var(--r-full); background: var(--color-surface-overlay); color: var(--color-text-secondary); margin-bottom: var(--sp-1); display: inline-block; }
.manual-week-text { font-size: 12px; color: var(--color-text-secondary); line-height: 1.5; }
.manual-checklist-cat { background: var(--color-surface-elevated); border: 1px solid var(--color-border-subtle); border-radius: var(--r-xl); overflow: hidden; margin-bottom: var(--sp-3); }
.manual-cat-header { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--color-border-subtle); cursor: pointer; background: var(--color-surface-overlay); }
.manual-cat-count { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: var(--r-full); background: var(--color-surface-elevated); color: var(--color-text-secondary); }
.manual-check-item { display: flex; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--color-border-subtle); cursor: pointer; transition: background var(--dur-fast) ease; }
.manual-check-item:hover { background: var(--color-surface-overlay); }
.manual-check-item:last-child { border-bottom: none; }
.manual-check-box { width: 18px; height: 18px; border-radius: 4px; border: 2px solid var(--color-border-default); flex-shrink: 0; display: grid; place-items: center; margin-top: 1px; transition: all var(--dur-fast) ease; }
.manual-check-item.done .manual-check-box { background: var(--color-success-fg); border-color: var(--color-success-fg); }
.manual-check-text { font-size: 13px; color: var(--color-text-secondary); }
.manual-check-date { font-size: 11px; color: var(--color-text-tertiary); margin-top: var(--sp-1); }
.manual-check-items { display: flex; flex-direction: column; }
.manual-check-list { display: flex; flex-direction: column; }
.manual-check-period { padding: var(--sp-3) var(--sp-4); background: var(--color-surface-overlay); border-bottom: 1px solid var(--color-border-subtle); }
.manual-check-period-label { font-size: 11px; font-weight: 600; color: var(--color-text-tertiary); text-transform: uppercase; letter-spacing: .05em; }
.manual-cycle-card { background: var(--color-surface-elevated); border: 1px solid var(--color-border-subtle); border-radius: var(--r-xl); padding: var(--sp-4); }
.manual-cycle-num { font-size: 11px; font-weight: 700; color: var(--color-accent-brand); margin-bottom: var(--sp-1); }
.manual-cycle-name { font-size: 14px; font-weight: 700; color: var(--color-text-primary); }
.manual-cycle-desc { font-size: 12px; color: var(--color-text-secondary); margin-top: var(--sp-1); line-height: 1.5; }
.manual-cycle-months { display: flex; gap: var(--sp-1); flex-wrap: wrap; margin-top: var(--sp-2); }
.manual-cycle-kpis { display: flex; gap: var(--sp-4); margin-top: var(--sp-3); }
.manual-cycle-current-badge { font-size: 10px; font-weight: 600; padding: 2px 8px; border-radius: var(--r-full); background: var(--color-success-bg); color: var(--color-success-fg); }
.manual-cycles-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--sp-4); }
.manual-cycle-body { display: flex; flex-direction: column; gap: var(--sp-2); }
.manual-callout { display: flex; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-4); background: var(--color-info-bg); border: 1px solid var(--color-info-border); border-radius: var(--r-xl); }
.manual-callout-icon { font-size: 20px; flex-shrink: 0; }
.manual-callout-title { font-size: 13px; font-weight: 600; color: var(--color-text-primary); margin-bottom: var(--sp-1); }
.manual-callout-text { font-size: 12px; color: var(--color-text-secondary); line-height: 1.6; }

/* ── 39. appendix-* ── */
.appendix-section { margin-bottom: var(--sp-8); }
.appendix-section-header { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-4); padding-bottom: var(--sp-3); border-bottom: 2px solid var(--color-border-subtle); }
.appendix-section-title { font-size: 18px; font-weight: 800; color: var(--color-text-primary); }
.appendix-section-sub { font-size: 13px; color: var(--color-text-tertiary); }
.appendix-tab-bar { display: flex; gap: var(--sp-1); overflow-x: auto; padding-bottom: var(--sp-2); margin-bottom: var(--sp-5); border-bottom: 1px solid var(--color-border-subtle); }
.appendix-tab-btn { padding: var(--sp-2) var(--sp-4); font-size: 13px; font-weight: 500; cursor: pointer; border-bottom: 2px solid transparent; color: var(--color-text-secondary); white-space: nowrap; transition: all var(--dur-fast) ease; background: none; border-top: none; border-left: none; border-right: none; }
.appendix-tab-btn.active { color: var(--color-text-primary); border-bottom-color: var(--color-accent-brand); }
.appendix-block { background: var(--color-surface-elevated); border: 1px solid var(--color-border-subtle); border-radius: var(--r-xl); overflow: hidden; margin-bottom: var(--sp-4); }
.appendix-block-title { font-size: 13px; font-weight: 600; color: var(--color-text-primary); padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--color-border-subtle); background: var(--color-surface-overlay); }
.appendix-block-body { padding: var(--sp-4); }
.appendix-kpi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--sp-3); }
.appendix-kpi-card { background: var(--color-surface-overlay); border-radius: var(--r-lg); padding: var(--sp-3); text-align: center; }
.appendix-kpi-icon { font-size: 24px; margin-bottom: var(--sp-2); }
.appendix-kpi-label { font-size: 11px; color: var(--color-text-tertiary); }
.appendix-kpi-target { font-size: 18px; font-weight: 700; color: var(--color-text-primary); }
.appendix-kpi-warn { font-size: 11px; color: var(--color-error-fg); margin-top: var(--sp-1); }
.appendix-table-wrap { overflow-x: auto; }
.appendix-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.appendix-table th, .appendix-table td { padding: var(--sp-2) var(--sp-3); border: 1px solid var(--color-border-subtle); }
.appendix-table th { background: var(--color-surface-overlay); font-weight: 600; }
.appendix-list-item { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) 0; border-bottom: 1px solid var(--color-border-subtle); font-size: 13px; }
.appendix-list-item:last-child { border-bottom: none; }
.appendix-list-label { color: var(--color-text-secondary); flex: 1; }
.appendix-list-code { font-family: monospace; font-size: 12px; color: var(--color-accent-brand); background: var(--color-brand-muted); padding: 2px 6px; border-radius: 4px; }
.appendix-principle-card { background: var(--color-surface-elevated); border: 1px solid var(--color-border-subtle); border-radius: var(--r-xl); padding: var(--sp-5); }
.appendix-principle-head { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.appendix-principle-num { font-size: 28px; font-weight: 900; color: var(--color-accent-brand); opacity: .3; }
.appendix-principle-icon { font-size: 24px; }
.appendix-principle-title { font-size: 16px; font-weight: 700; color: var(--color-text-primary); }
.appendix-principle-desc { font-size: 13px; color: var(--color-text-secondary); line-height: 1.7; }
.appendix-principle-tip { font-size: 12px; font-style: italic; color: var(--color-text-tertiary); margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px solid var(--color-border-subtle); }
.appendix-principles { display: flex; flex-direction: column; gap: var(--sp-4); }
.appendix-principles-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--sp-4); }
.appendix-principles-intro { font-size: 14px; color: var(--color-text-secondary); line-height: 1.7; margin-bottom: var(--sp-4); }
.appendix-process { display: flex; flex-direction: column; gap: var(--sp-3); }
.appendix-process-step { display: flex; align-items: flex-start; gap: var(--sp-4); }
.appendix-process-badge { width: 28px; height: 28px; border-radius: var(--r-full); background: var(--color-accent-brand); color: #fff; display: grid; place-items: center; font-size: 12px; font-weight: 700; flex-shrink: 0; }
.appendix-process-content { flex: 1; }
.appendix-rule-item { display: flex; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-3) 0; border-bottom: 1px solid var(--color-border-subtle); }
.appendix-rule-item:last-child { border-bottom: none; }
.appendix-rule-icon { font-size: 18px; flex-shrink: 0; }
.appendix-rules-grid { display: flex; flex-direction: column; }
.appendix-tip-item { display: flex; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-3); background: var(--color-surface-overlay); border-radius: var(--r-lg); margin-bottom: var(--sp-2); }
.appendix-tip-num { font-size: 11px; font-weight: 700; color: var(--color-accent-brand); background: var(--color-brand-muted); width: 24px; height: 24px; border-radius: var(--r-full); display: grid; place-items: center; flex-shrink: 0; }
.appendix-docs-list { display: flex; flex-direction: column; gap: var(--sp-2); }
.appendix-content-card { background: var(--color-surface-elevated); border: 1px solid var(--color-border-subtle); border-radius: var(--r-xl); overflow: hidden; margin-bottom: var(--sp-4); }
.appendix-finance-item { display: flex; justify-content: space-between; align-items: center; padding: var(--sp-2) 0; border-bottom: 1px solid var(--color-border-subtle); font-size: 13px; }
.appendix-finance-item:last-child { border-bottom: none; }
.appendix-mgmt-kpi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--sp-3); }
.appendix-mgmt-kpi-card { background: var(--color-surface-overlay); border-radius: var(--r-lg); padding: var(--sp-3); text-align: center; }
.appendix-monthly-checks { display: flex; flex-direction: column; gap: var(--sp-4); }
.appendix-check-list { display: flex; flex-direction: column; gap: var(--sp-2); }
.appendix-check-period { background: var(--color-surface-overlay); border-radius: var(--r-lg); padding: var(--sp-2) var(--sp-3); margin-bottom: var(--sp-2); }
.appendix-check-period-label { font-size: 11px; font-weight: 600; color: var(--color-text-tertiary); text-transform: uppercase; letter-spacing: .05em; }
.appendix-check-items { display: flex; flex-direction: column; gap: var(--sp-1); }
.appendix-cycle-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--sp-4); }
.appendix-cycle-card { background: var(--color-surface-elevated); border: 1px solid var(--color-border-subtle); border-radius: var(--r-xl); padding: var(--sp-4); }
.appendix-emergency-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--sp-4); }
.appendix-emergency-card { background: var(--color-surface-elevated); border: 1px solid var(--color-border-subtle); border-radius: var(--r-xl); padding: var(--sp-4); }
.appendix-emergency-head { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.appendix-emergency-steps { display: flex; flex-direction: column; gap: var(--sp-2); }

/* ── 40. campaign-* ── */
.campaign-card-v2 { background: var(--color-surface-elevated); border: 1px solid var(--color-border-subtle); border-radius: var(--r-2xl); overflow: hidden; cursor: pointer; transition: all var(--dur-fast) ease; }
.campaign-card-v2:hover { transform: translateY(-2px); box-shadow: 0 8px 24px var(--color-shadow-md); }
.campaign-card-v2-header { padding: var(--sp-4); border-bottom: 1px solid var(--color-border-subtle); }
.campaign-type-icon-v2 { width: 40px; height: 40px; border-radius: var(--r-xl); display: grid; place-items: center; font-size: 18px; }
.campaign-kpis-v2 { display: flex; gap: var(--sp-4); padding: var(--sp-3) var(--sp-4); border-top: 1px solid var(--color-border-subtle); }
.campaign-kpi-v2 { display: flex; flex-direction: column; flex: 1; }
.campaign-kpi-card-v2 { padding: var(--sp-3); background: var(--color-surface-overlay); border-radius: var(--r-lg); text-align: center; }
.campaign-kpi-icon-v2 { font-size: 20px; margin-bottom: var(--sp-1); }
.camp-kpi-v2 { font-size: 18px; font-weight: 700; color: var(--color-text-primary); }
.camp-budget-bar-v2 { height: 4px; background: var(--color-surface-overlay); border-radius: var(--r-full); overflow: hidden; margin-top: var(--sp-2); }

/* channel-* */
.channel-grid-v2 { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--sp-4); }
.channel-card-v2 { background: var(--color-surface-elevated); border: 1px solid var(--color-border-subtle); border-radius: var(--r-xl); padding: var(--sp-4); }
.channel-icon-v2 { width: 36px; height: 36px; border-radius: var(--r-lg); display: grid; place-items: center; font-size: 16px; }
.channel-bar-v2 { height: 4px; background: var(--color-surface-overlay); border-radius: var(--r-full); overflow: hidden; margin-top: var(--sp-2); }
.channel-bar-fill-v2 { height: 100%; border-radius: var(--r-full); }

/* ── 41. academy-* ── */
.academy-grid-v2 { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--sp-4); }
.academy-card-v2 { background: var(--color-surface-elevated); border: 1px solid var(--color-border-subtle); border-radius: var(--r-2xl); overflow: hidden; cursor: pointer; transition: all var(--dur-fast) ease; }
.academy-card-v2:hover { transform: translateY(-2px); box-shadow: 0 8px 24px var(--color-shadow-md); }
.academy-card-v2-header { padding: var(--sp-4); border-bottom: 1px solid var(--color-border-subtle); display: flex; align-items: center; gap: var(--sp-3); }
.academy-card-v2-body { padding: var(--sp-4); }
.academy-card-v2-footer { padding: var(--sp-3) var(--sp-4); border-top: 1px solid var(--color-border-subtle); background: var(--color-surface-overlay); }
.academy-icon-v2 { width: 44px; height: 44px; border-radius: var(--r-xl); display: grid; place-items: center; font-size: 20px; flex-shrink: 0; }
.academy-name-v2 { font-size: 15px; font-weight: 700; color: var(--color-text-primary); }
.academy-type-v2 { font-size: 11px; color: var(--color-text-tertiary); }
.academy-address-v2 { font-size: 12px; color: var(--color-text-tertiary); }
.academy-info-grid-v2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.info-grid-v2 { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: var(--sp-3); }
.info-item-v2 { display: flex; flex-direction: column; gap: var(--sp-1); }
.info-label { font-size: 11px; color: var(--color-text-tertiary); }
.info-value { font-size: 13px; font-weight: 600; color: var(--color-text-primary); }

/* student detail */
.student-detail-grid-v2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
.student-hero { background: linear-gradient(135deg, var(--color-surface-elevated), var(--color-surface-overlay)); border: 1px solid var(--color-border-subtle); border-radius: var(--r-2xl); padding: var(--sp-6); display: flex; align-items: center; gap: var(--sp-5); margin-bottom: var(--sp-5); }
.student-hero-avatar { width: 64px; height: 64px; border-radius: var(--r-full); display: grid; place-items: center; font-size: 24px; font-weight: 800; color: #fff; flex-shrink: 0; }
.student-hero-name { font-size: 20px; font-weight: 800; color: var(--color-text-primary); }
.student-hero-meta { font-size: 13px; color: var(--color-text-tertiary); margin-top: var(--sp-1); display: flex; gap: var(--sp-2); flex-wrap: wrap; }

/* ── 42. dp-* datepicker ── */
.dp-cell { width: 36px; height: 36px; border-radius: var(--r-md); display: grid; place-items: center; font-size: 13px; cursor: pointer; transition: all var(--dur-fast) ease; }
.dp-cell:hover { background: var(--color-surface-overlay); }
.dp-cell.selected { background: var(--color-accent-brand); color: #fff; }
.dp-cell.today { font-weight: 700; color: var(--color-accent-brand); }
.dp-clear { font-size: 12px; color: var(--color-text-tertiary); cursor: pointer; padding: var(--sp-2); }
.dp-today { font-size: 12px; color: var(--color-accent-brand); cursor: pointer; font-weight: 600; padding: var(--sp-2); }
.dp-prev, .dp-next { width: 28px; height: 28px; border-radius: var(--r-md); display: grid; place-items: center; cursor: pointer; transition: background var(--dur-fast) ease; }
.dp-prev:hover, .dp-next:hover { background: var(--color-surface-overlay); }

/* ── 43. student-list ── */
.student-list { display: flex; flex-direction: column; gap: var(--sp-2); }
.student-list .student-card { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); background: var(--color-surface-elevated); border: 1px solid var(--color-border-subtle); border-radius: var(--r-xl); cursor: pointer; transition: all var(--dur-fast) ease; }
.student-list .student-card:hover { transform: translateX(2px); box-shadow: 0 4px 12px var(--color-shadow-md); }

/* ── 44. score-ring, checklist-pct ── */
.score-ring { position: relative; width: 48px; height: 48px; }
.score-ring-text { position: absolute; inset: 0; display: grid; place-items: center; font-size: 12px; font-weight: 700; }
.checklist-pct-badge { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: var(--r-full); }

/* ── 45. spotlight-item ── */
.spotlight-item { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-radius: var(--r-lg); cursor: pointer; transition: background var(--dur-fast) ease; }
.spotlight-item:hover { background: var(--color-surface-overlay); }

/* ── 46. tip ── */
.tip { font-size: 12px; color: var(--color-text-tertiary); font-style: italic; padding: var(--sp-2) var(--sp-3); background: var(--color-surface-overlay); border-radius: var(--r-lg); border-left: 3px solid var(--color-accent-brand); }

/* ── 47. skeleton-line ── */
.skeleton-line { height: 14px; background: var(--color-surface-overlay); border-radius: var(--r-md); animation: skeleton-pulse 1.5s ease-in-out infinite; }

/* ── 48. kpi-card accent variants (missing ones) ── */
.kpi-card.accent-rose { border-color: var(--color-error-border); }
.kpi-card.accent-rose .kpi-icon-wrap { background: var(--color-error-bg); color: var(--color-error-fg); }

/* ── 49. list-body, list-name, list-sub ── */
.list-body { flex: 1; min-width: 0; }
.list-name { font-size: 14px; font-weight: 600; color: var(--color-text-primary); }
.list-sub { font-size: 12px; color: var(--color-text-tertiary); }

/* ── 50. page-header-actions (alias) ── */
.page-header-actions { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }

/* ── kpi-grid alias ── */
.kpi-grid-5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--sp-4); }
@media (max-width: 1200px) { .kpi-grid-5 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px) { .kpi-grid-5 { grid-template-columns: repeat(2, 1fr); } }

/* ══════════════════════════════════════════════════════════════
   v14.1 — 잔여 누락 클래스 보충 (18개)
   ══════════════════════════════════════════════════════════════ */

/* badge-sm — 작은 배지 (클래스 상세) */
.badge-sm { font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 999px; }

/* bottom-nav-item-icon — 모바일 하단 네비 아이콘 */
.bottom-nav-item-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  font-size: 16px;
}

/* lesson-card — 수업 일지 카드 */
.lesson-card {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--r-2xl);
  border: 1px solid var(--color-border-subtle);
  transition: border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
  background: var(--color-surface-elevated);
}
.lesson-card:hover {
  border-color: var(--color-brand-muted);
  box-shadow: 0 4px 16px rgba(0,0,0,.12);
}

/* rank-badge — 성적 순위 배지 */
.rank-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 800;
  background: var(--color-surface-overlay);
  color: var(--color-text-secondary);
}
.rank-badge.rank-1 { background: linear-gradient(135deg, hsl(var(--hsl-amber-400)), hsl(var(--hsl-amber-600))); color: #fff; }
.rank-badge.rank-2 { background: linear-gradient(135deg, #9ca3af, #6b7280); color: #fff; }
.rank-badge.rank-3 { background: linear-gradient(135deg, hsl(var(--hsl-amber-600)), hsl(var(--hsl-amber-800))); color: #fff; }
.rank-badge.rank-4, .rank-badge.rank-n { background: var(--color-surface-overlay); color: var(--color-text-tertiary); }

/* score-badge — 성적 점수 배지 */
.score-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
}
.score-badge.high { background: var(--color-success-bg); color: var(--color-success-fg); }
.score-badge.mid  { background: var(--color-warning-bg); color: var(--color-warning-fg); }
.score-badge.low  { background: var(--color-error-bg); color: var(--color-error-fg); }

/* timeline-content — 타임라인 컨텐츠 */
.timeline-content {
  flex: 1;
  min-width: 0;
  padding: var(--sp-3) var(--sp-4);
  background: var(--color-surface-elevated);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--r-xl);
}

/* matrix-cell paid/unpaid — 수납 매트릭스 상태 셀 */
.matrix-cell.paid  { background: var(--color-success-bg); color: var(--color-success-fg); border-color: rgba(0,229,160,.3); }
.matrix-cell.unpaid { background: var(--color-error-bg); color: var(--color-error-fg); border-color: rgba(244,63,94,.3); }

/* salary-rec paid — 급여 지급 완료 상태 */
.salary-rec.paid { background: rgba(0,229,160,.04); }

/* notif-item unread — 읽지 않은 알림 */
.notif-item.unread { background: var(--color-info-bg); border-left: 3px solid hsl(var(--hsl-cyan-400)); }
.unread { font-weight: 600; }

/* PDF 출력용 sub/meta 클래스 */
.sub  { font-size: 12px; color: #64748b; margin-bottom: 24px; }
.meta { margin-top: 32px; padding-top: 12px; border-top: 1px solid #e2e8f0; font-size: 11px; color: #94a3b8; display: flex; justify-content: space-between; }

/* ══════════════════════════════════════════════════════════════
   v14.2 — 4개 렌더러 추가 누락 클래스 보충
   (consultations, manual, appendix, workbook 전수 검토 완료)
   ══════════════════════════════════════════════════════════════ */

/* manual-callout 타입 modifier — tip/check/warn/template */
.manual-callout.tip      { background: rgba(14,165,233,.06);  border-color: rgba(14,165,233,.25); }
.manual-callout.check    { background: var(--color-success-bg); border-color: rgba(0,229,160,.25); }
.manual-callout.warn     { background: var(--color-warning-bg); border-color: rgba(245,158,11,.25); }
.manual-callout.template { background: var(--color-surface-elevated); border-color: var(--color-border-default); }

/* manual-week-icon 역할별 색상 modifier */
.manual-week-icon.student   { color: hsl(var(--hsl-cyan-400)); }
.manual-week-icon.marketing { color: hsl(var(--hsl-violet-500)); }
.manual-week-icon.staff     { color: hsl(var(--hsl-amber-400)); }

/* kb-move-btn primary — 칸반 이동 버튼 강조 variant */
.kb-move-btn.primary {
  background: var(--color-accent-brand);
  color: #fff;
  border-color: var(--color-accent-brand);
  font-weight: 700;
}
.kb-move-btn.primary:hover { opacity: .85; }

/* wb-group-role-badge 색상 variants */
.wb-group-role-badge.role-emerald { background: rgba(16,185,129,.12); color: hsl(var(--hsl-emerald-400)); border: 1px solid rgba(16,185,129,.25); }
.wb-group-role-badge.role-violet  { background: rgba(139,92,246,.12); color: hsl(var(--hsl-violet-400)); border: 1px solid rgba(139,92,246,.25); }
.wb-group-role-badge.role-amber   { background: rgba(245,158,11,.12); color: hsl(var(--hsl-amber-400));  border: 1px solid rgba(245,158,11,.25); }
.wb-group-role-badge.role-brand   { background: rgba(5,150,105,.12);  color: #059669;                     border: 1px solid rgba(5,150,105,.25); }

/* 텍스트 유틸리티 */
.text-muted    { color: var(--color-text-tertiary) !important; }
.text-sky      { color: hsl(var(--hsl-sky-400))    !important; }
.text-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }


/* ═══════════════════════════════════════════════════════════════════
   LUMINA v14.2 PATCH — 미정의 컴포넌트 보완 (2026-07-12)
   ═══════════════════════════════════════════════════════════════════ */

/* ── btn-brand: 브랜드 컬러 버튼 (btn-primary alias) ── */
.btn-brand {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  background: var(--color-brand-default);
  color: #fff;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  font-size: 13px; font-weight: 600;
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease-smooth);
}
.btn-brand:hover { background: var(--color-brand-strong); transform: translateY(-1px); }
.btn-brand:active { transform: translateY(0); }

/* ── badge 표준 semantic variants (badge-success 등) ── */
.badge-success { background: var(--color-success-bg);   color: var(--color-success-fg); }
.badge-warning { background: var(--color-warning-bg);   color: var(--color-warning-fg); }
.badge-danger  { background: var(--color-error-bg);     color: var(--color-error-fg); }
.badge-info    { background: var(--color-info-bg);      color: var(--color-info-fg); }
.badge-primary { background: var(--color-brand-muted);  color: var(--color-brand-strong); }
.badge-neutral { background: var(--color-surface-overlay); color: var(--color-text-secondary); }

/* ── mini-kpi-card: mini-kpi 카드 wrapper ── */
.mini-kpi-card {
  background: var(--color-surface-elevated);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--r-lg);
  padding: var(--sp-3) var(--sp-4);
  display: flex; align-items: center; gap: var(--sp-3);
  transition: box-shadow var(--dur-fast);
}
.mini-kpi-card:hover { box-shadow: var(--shadow-sm); }

/* ── anim-slide-in: 좌측에서 슬라이드인 ── */
@keyframes slideIn {
  from { opacity: 0; transform: translateX(-16px); }
  to   { opacity: 1; transform: translateX(0); }
}
.anim-slide-in {
  animation: slideIn var(--dur-slow) var(--ease-enter) both;
}

/* ── table-head, table-row: data-table 보조 ── */
.table-head th {
  background: var(--color-surface-overlay);
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--color-text-tertiary);
  padding: var(--sp-2) var(--sp-3);
  border-bottom: 1px solid var(--color-border-default);
}
.table-row td {
  padding: var(--sp-3);
  border-bottom: 1px solid var(--color-border-subtle);
  font-size: 13px; color: var(--color-text-primary);
}
.table-row:last-child td { border-bottom: none; }
.table-row:hover td { background: var(--color-surface-hover); }

/* ── tab-bar / tab-btn: 공통 탭 컴포넌트 ── */
.tab-bar {
  display: flex; gap: var(--sp-1); overflow-x: auto;
  padding-bottom: var(--sp-2); margin-bottom: var(--sp-4);
  border-bottom: 1px solid var(--color-border-subtle);
  scrollbar-width: none;
}
.tab-bar::-webkit-scrollbar { display: none; }
.tab-btn {
  padding: var(--sp-2) var(--sp-4);
  font-size: 13px; font-weight: 500;
  cursor: pointer; white-space: nowrap;
  border: none; background: none;
  border-bottom: 2px solid transparent;
  color: var(--color-text-secondary);
  transition: all var(--dur-fast) ease;
}
.tab-btn:hover { color: var(--color-text-primary); }
.tab-btn.active {
  color: var(--color-text-primary);
  border-bottom-color: var(--color-accent-brand);
  font-weight: 600;
}

/* ── modal-overlay / modal-content: 모달 구조 보완 ── */
.modal-backdrop { /* modal-overlay는 id로도 사용 */
  position: fixed; inset: 0;
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(4px);
  z-index: 9000;
  display: flex; align-items: center; justify-content: center;
}
.modal-content-wrapper { /* modal-content id의 wrapper */
  background: var(--color-surface-elevated);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-2xl);
  max-width: 90vw; max-height: 90vh;
  overflow: hidden;
}

/* ── 유틸리티 보완 ── */
.ml-2   { margin-left: var(--sp-2); }
.ml-3   { margin-left: var(--sp-3); }
.ml-4   { margin-left: var(--sp-4); }
.mr-2   { margin-right: var(--sp-2); }
.mt-2   { margin-top: var(--sp-2); }
.mb-2   { margin-bottom: var(--sp-2); }
.p-0    { padding: 0 !important; }
.p-2    { padding: var(--sp-2); }
.p-4    { padding: var(--sp-4); }
.gap-2  { gap: var(--sp-2); }
.gap-3  { gap: var(--sp-3); }
.w-full { width: 100%; }

/* ── kpi-card 정적 그림자 (호버 전에도 약한 그림자) ── */
.kpi-card {
  box-shadow: var(--shadow-xs);
}

/* ── QA Item 중복 클래스 방어 (qa-item이 두 번 적용돼도 깨지지 않음) ── */
.qa-item.qa-item { /* 중복 적용 시 동일 스타일 유지 */ }

/* ═══════════════════════════════════════════════════════════════
   ✅ [Design Audit Fix] 2026-07-12 디자인 통일성 개선 패치
   분석된 19개 페이지 결함 수정
═══════════════════════════════════════════════════════════════ */

/* ── Fix 1: btn-danger — 삭제버튼 색상 부드럽게 (강사/학생/상담 카드 내 휴지통)
   원인: 순수 rose-500 단색이 파스텔 디자인과 충돌
   수정: 배경 연하게 + 텍스트 강조 + 아이콘버튼 형태에 투명 배경 ── */
.btn.btn-danger {
  background: var(--color-error-bg);
  color: var(--color-error-fg);
  border: 1px solid hsl(var(--hsl-rose-400) / 0.35);
  box-shadow: none;
}
.btn.btn-danger:hover:not(:disabled) {
  background: var(--color-error-fg);
  color: #fff;
  border-color: var(--color-error-fg);
  box-shadow: 0 2px 8px hsl(var(--hsl-rose-500) / 0.25);
}
/* 아이콘 전용 삭제버튼 (btn-icon + btn-danger 조합) */
.btn.btn-icon.btn-danger {
  background: transparent;
  color: var(--color-text-tertiary);
  border: 1px solid transparent;
}
.btn.btn-icon.btn-danger:hover:not(:disabled) {
  background: var(--color-error-bg);
  color: var(--color-error-fg);
  border-color: hsl(var(--hsl-rose-400) / 0.4);
}

/* ── Fix 2: campaign-kpi-icon-v2 — 캠페인 KPI 아이콘 백그라운드 투명도 완화
   원인: app.js에서 inline style로 진한 그라디언트(#6366f1→#4f46e5) 설정
   수정: 아이콘 래퍼에 opacity 조정으로 파스텔 톤 통일 ── */
.campaign-kpi-icon-v2 {
  opacity: 0.85;
  border-radius: var(--r-lg) !important;
  width: 36px !important;
  height: 36px !important;
  margin: 0 auto var(--sp-2);
}
.campaign-kpi-card-v2 {
  border: 1px solid var(--color-border-subtle);
  box-shadow: var(--shadow-xs);
}

/* ── Fix 3: 급여관리 finance-item — 그림자·배경 통일
   원인: finance-item이 surface-overlay(#F4F6F8) 사용으로 kpi-card와 톤 다름
   수정: surface-elevated(흰색)로 통일 + 그림자 추가 ── */
.finance-item {
  background: var(--color-surface-elevated) !important;
  box-shadow: var(--shadow-xs);
}
.finance-item-value {
  font-size: 18px !important;
}

/* ── Fix 4: staff-card 삭제버튼 — 카드 내 btn-danger 아이콘 버튼 부드럽게
   강사카드 우측 하단 휴지통 버튼 스타일 ── */
.staff-card .btn.btn-danger {
  background: transparent;
  color: var(--color-text-tertiary);
  border: 1px solid transparent;
  font-size: 13px;
}
.staff-card .btn.btn-danger:hover:not(:disabled) {
  background: var(--color-error-bg);
  color: var(--color-error-fg);
  border-color: hsl(var(--hsl-rose-400) / 0.4);
}

/* ── Fix 5: consult-actions 삭제버튼 — 상담일지 카드 내 btn-danger
   원인: .consult-actions 내 btn-danger가 분홍/빨강 배경으로 표시됨
   수정: 투명 배경 + 회색 아이콘, 호버 시에만 연한 빨강 ── */
.consult-item {
  position: relative;
}
.consult-actions .btn.btn-danger,
.consult-actions .btn-danger {
  background: transparent !important;
  color: var(--color-text-tertiary) !important;
  border: 1px solid transparent !important;
  box-shadow: none !important;
  font-size: 13px;
  padding: 5px 8px;
  border-radius: var(--r-md);
}
.consult-actions .btn.btn-danger:hover:not(:disabled),
.consult-actions .btn-danger:hover:not(:disabled) {
  background: var(--color-error-bg) !important;
  color: var(--color-error-fg) !important;
  border-color: hsl(var(--hsl-rose-400) / 0.4) !important;
}
.consult-item .btn.btn-danger {
  background: transparent;
  color: var(--color-text-tertiary);
  border: 1px solid transparent;
  font-size: 12px;
  padding: 4px 6px;
}
.consult-item .btn.btn-danger:hover:not(:disabled) {
  background: var(--color-error-bg);
  color: var(--color-error-fg);
  border-color: hsl(var(--hsl-rose-400) / 0.4);
}

/* ── Fix 6: salary/급여관리 KPI 카드 — 사이드바 활성 표시 강화
   nav-item active 상태 색상 명도 개선 ── */
.nav-item.active {
  background: var(--color-brand-muted) !important;
  color: var(--color-brand-strong) !important;
}
.nav-item.active .nav-item-icon {
  color: var(--color-brand-default);
  opacity: 1 !important;
}

/* ── Fix 7: 업무칸반 stat-card 아이콘 — 파스텔 통일
   원인: 원색(진한 파랑/초록) 아이콘 배경이 다른 카드와 부조화
   수정: 밝기 기반 파스텔 필터 ── */
.stat-card .stat-icon {
  filter: saturate(0.75) brightness(1.1);
}

/* ── Fix 8: mini-kpi 일관성 강화 — 모든 mini-kpi에 통일된 그림자
   원인: 일부 페이지에서 mini-kpi에 그림자 없음 ── */
.mini-kpi {
  box-shadow: var(--shadow-xs);
  background: var(--color-surface-elevated) !important;
}

/* ── Fix 9: page-header 하단 마진 통일 ── */
.page-header + * {
  margin-top: 0;
}

/* ── Fix 10: 빈 상태(empty state) UI — 통일된 스타일
   수업일지/업무칸반 빈 화면에 사용되는 클래스 ── */
.empty-state-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--sp-12) var(--sp-6);
  text-align: center;
  color: var(--color-text-tertiary);
  gap: var(--sp-3);
}
.empty-state-center .empty-icon {
  font-size: 40px;
  opacity: 0.35;
  line-height: 1;
}
.empty-state-center .empty-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-text-secondary);
}
.empty-state-center .empty-desc {
  font-size: 13px;
  color: var(--color-text-tertiary);
  max-width: 280px;
  line-height: 1.6;
}

/* ═══════════════════════════════════════════════════════════════════════════
   NOVA PREMIUM DESIGN v2.0 — 고퀄리티 디자인 전면 업그레이드
   라이트 테마 유지 | CSS-only | app.js read-only 대응
   2026-07-12
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────────────
   PHASE 0 · 추가 디자인 토큰
   ───────────────────────────────────────────────────────────────────────── */
:root {
  /* 글래스모피즘 */
  --glass-bg:     hsl(0 0% 100% / 0.72);
  --glass-border: hsl(220 20% 88% / 0.60);
  --glass-blur:   saturate(180%) blur(14px);

  /* 그라디언트 팔레트 */
  --grad-blue:    linear-gradient(135deg, hsl(217 91% 53%), hsl(258 74% 53%));
  --grad-emerald: linear-gradient(135deg, hsl(152 66% 38%), hsl(192 82% 38%));
  --grad-amber:   linear-gradient(135deg, hsl(38 91% 46%), hsl(25 90% 56%));
  --grad-rose:    linear-gradient(135deg, hsl(355 76% 50%), hsl(330 80% 55%));
  --grad-violet:  linear-gradient(135deg, hsl(258 74% 53%), hsl(280 70% 55%));
  --grad-cyan:    linear-gradient(135deg, hsl(192 82% 38%), hsl(174 68% 40%));
  --grad-surface: linear-gradient(160deg, hsl(0 0% 100%) 0%, hsl(220 27% 98%) 100%);

  /* 글로우 색상 */
  --glow-blue:    hsl(217 91% 53% / 0.18);
  --glow-emerald: hsl(152 66% 38% / 0.16);
  --glow-amber:   hsl(38 91% 46% / 0.16);
  --glow-rose:    hsl(355 76% 50% / 0.16);
  --glow-violet:  hsl(258 74% 53% / 0.18);

  /* 향상된 그림자 */
  --shadow-card: 0 1px 3px hsl(222 16% 9% / 0.06),
                 0 4px 12px hsl(222 16% 9% / 0.06),
                 0 0 0 1px hsl(220 20% 88% / 0.60);
  --shadow-card-hover: 0 4px 8px hsl(222 16% 9% / 0.06),
                       0 12px 32px hsl(222 16% 9% / 0.10),
                       0 0 0 1px hsl(220 20% 88% / 0.70);
  --shadow-glow-blue:    0 8px 24px hsl(217 91% 53% / 0.20);
  --shadow-glow-emerald: 0 8px 24px hsl(152 66% 38% / 0.18);
  --shadow-glow-violet:  0 8px 24px hsl(258 74% 53% / 0.20);
  --shadow-glow-amber:   0 8px 24px hsl(38 91% 46% / 0.18);
  --shadow-glow-rose:    0 8px 24px hsl(355 76% 50% / 0.18);

  /* 애니메이션 타이밍 */
  --ease-out-expo:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-bounce:     cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth:     cubic-bezier(0.4, 0, 0.2, 1);
  --dur-enter:       400ms;
  --dur-hover:       220ms;
  --dur-shimmer:     1.8s;
}

/* ─────────────────────────────────────────────────────────────────────────
   PHASE 1 · 핵심 @keyframes 애니메이션
   ───────────────────────────────────────────────────────────────────────── */

/* 카드 페이지 진입 — 위로 떠오르며 등장 */
@keyframes fadeSlideUp {
  from { opacity: 0; transform: translateY(22px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}

/* 좌측 슬라이드 인 */
@keyframes fadeSlideLeft {
  from { opacity: 0; transform: translateX(-20px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* 스케일 등장 */
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1); }
}

/* 섬머(shimmer) 로딩 효과 */
@keyframes shimmer {
  0%   { background-position: -600px 0; }
  100% { background-position:  600px 0; }
}

/* 진행바 fill 애니메이션 */
@keyframes progressExpand {
  from { width: 0 !important; }
  to   { /* JS가 설정한 width 유지 */ }
}

/* 숫자 글로우 펄스 */
@keyframes valueGlow {
  0%, 100% { text-shadow: none; }
  50%       { text-shadow: 0 0 20px hsl(217 91% 53% / 0.35); }
}

/* active nav 글로우 */
@keyframes navGlow {
  0%, 100% { box-shadow: 0 0 0 0 hsl(217 91% 53% / 0.30); }
  50%       { box-shadow: 0 0 0 5px hsl(217 91% 53% / 0); }
}

/* 호버 lift 미세 효과 */
@keyframes liftIn {
  from { transform: translateY(0); }
  to   { transform: translateY(-3px); }
}

/* 배지 등장 */
@keyframes badgePop {
  0%   { transform: scale(0.6); opacity: 0; }
  70%  { transform: scale(1.1); opacity: 1; }
  100% { transform: scale(1); }
}

/* 아이콘 래퍼 회전 */
@keyframes iconSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* 카드 내부 스파크라인 슬라이드 */
@keyframes sparkSlide {
  from { transform: translateX(100%); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}

/* 그라디언트 이동 */
@keyframes gradientShift {
  0%   { background-position: 0%   50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0%   50%; }
}

/* ─────────────────────────────────────────────────────────────────────────
   PHASE 2 · 전역 페이지 진입 staggered animation
   ───────────────────────────────────────────────────────────────────────── */

/* 컨텐츠 영역 내 최상위 직계 자식들 순차 등장 */
.content-area > * {
  animation: fadeSlideUp var(--dur-enter) var(--ease-out-expo) both;
}
.content-area > *:nth-child(1)  { animation-delay:  0ms; }
.content-area > *:nth-child(2)  { animation-delay: 40ms; }
.content-area > *:nth-child(3)  { animation-delay: 80ms; }
.content-area > *:nth-child(4)  { animation-delay: 120ms; }
.content-area > *:nth-child(5)  { animation-delay: 160ms; }
.content-area > *:nth-child(n+6){ animation-delay: 200ms; }

/* KPI 카드 그리드 내부 순차 등장 */
.kpi-grid > .kpi-card:nth-child(1) { animation-delay: 60ms; }
.kpi-grid > .kpi-card:nth-child(2) { animation-delay: 100ms; }
.kpi-grid > .kpi-card:nth-child(3) { animation-delay: 140ms; }
.kpi-grid > .kpi-card:nth-child(4) { animation-delay: 180ms; }
.kpi-grid > .kpi-card:nth-child(5) { animation-delay: 220ms; }
.kpi-grid > .kpi-card:nth-child(6) { animation-delay: 260ms; }
.kpi-grid > .kpi-card:nth-child(7) { animation-delay: 300ms; }
.kpi-grid > .kpi-card:nth-child(8) { animation-delay: 340ms; }

.kpi-grid > .kpi-card {
  animation: fadeSlideUp var(--dur-enter) var(--ease-out-expo) both;
}

/* 미니 KPI 순차 등장 */
.mini-kpi-row > .mini-kpi:nth-child(1),
.mini-kpi-row > *:nth-child(1) { animation-delay: 80ms; }
.mini-kpi-row > .mini-kpi:nth-child(2),
.mini-kpi-row > *:nth-child(2) { animation-delay: 130ms; }
.mini-kpi-row > .mini-kpi:nth-child(3),
.mini-kpi-row > *:nth-child(3) { animation-delay: 180ms; }
.mini-kpi-row > .mini-kpi:nth-child(4),
.mini-kpi-row > *:nth-child(4) { animation-delay: 230ms; }
.mini-kpi-row > .mini-kpi:nth-child(5),
.mini-kpi-row > *:nth-child(5) { animation-delay: 280ms; }

/* 패널 그리드 순차 등장 */
.panel-grid > .panel:nth-child(1),
.two-col > *:nth-child(1) { animation: fadeSlideUp var(--dur-enter) var(--ease-out-expo) 100ms both; }
.panel-grid > .panel:nth-child(2),
.two-col > *:nth-child(2) { animation: fadeSlideUp var(--dur-enter) var(--ease-out-expo) 160ms both; }

/* ─────────────────────────────────────────────────────────────────────────
   PHASE 3 · KPI 카드 — 전면 프리미엄 업그레이드
   ───────────────────────────────────────────────────────────────────────── */
.kpi-card {
  background: var(--grad-surface) !important;
  border: 1px solid hsl(220 20% 92% / 0.80) !important;
  border-radius: 20px !important;
  box-shadow: var(--shadow-card) !important;
  transition:
    transform     var(--dur-hover) var(--ease-out-expo),
    box-shadow    var(--dur-hover) var(--ease-out-expo),
    border-color  var(--dur-hover) ease !important;
  position: relative;
  overflow: hidden;
}

/* 카드 내부 광택 하이라이트 */
.kpi-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    135deg,
    hsl(0 0% 100% / 0.60) 0%,
    hsl(0 0% 100% / 0)    60%
  );
  pointer-events: none;
  z-index: 0;
}

/* 기존 상단 컬러 스트라이프 강화 */
.kpi-card::before {
  height: 3px !important;
  border-radius: 3px 3px 0 0;
  background: var(--grad-blue) !important;
  z-index: 1;
}
.kpi-card.accent-emerald::before { background: var(--grad-emerald) !important; }
.kpi-card.accent-blue::before    { background: var(--grad-blue) !important; }
.kpi-card.accent-violet::before  { background: var(--grad-violet) !important; }
.kpi-card.accent-amber::before   { background: var(--grad-amber) !important; }
.kpi-card.accent-rose::before    { background: var(--grad-rose) !important; }
.kpi-card.accent-cyan::before    { background: var(--grad-cyan) !important; }
.kpi-card.accent-orange::before  { background: var(--grad-amber) !important; }
.kpi-card.accent-teal::before    { background: var(--grad-cyan) !important; }

/* KPI 카드 hover lift */
.kpi-card:hover {
  transform:    translateY(-4px) scale(1.005) !important;
  box-shadow:   var(--shadow-card-hover) !important;
  border-color: hsl(220 20% 86% / 0.90) !important;
}
.kpi-card.accent-blue:hover    { box-shadow: var(--shadow-card-hover), var(--shadow-glow-blue) !important; }
.kpi-card.accent-emerald:hover { box-shadow: var(--shadow-card-hover), var(--shadow-glow-emerald) !important; }
.kpi-card.accent-violet:hover  { box-shadow: var(--shadow-card-hover), var(--shadow-glow-violet) !important; }
.kpi-card.accent-amber:hover   { box-shadow: var(--shadow-card-hover), var(--shadow-glow-amber) !important; }
.kpi-card.accent-rose:hover    { box-shadow: var(--shadow-card-hover), var(--shadow-glow-rose) !important; }

/* KPI 아이콘 래퍼 — 듀얼톤 그라디언트 */
.kpi-icon-wrap {
  width: 42px !important;
  height: 42px !important;
  border-radius: 12px !important;
  display: grid !important;
  place-items: center !important;
  font-size: 18px !important;
  transition:
    transform     var(--dur-hover) var(--ease-bounce),
    box-shadow    var(--dur-hover) ease !important;
  position: relative;
  z-index: 1;
}
.kpi-card:hover .kpi-icon-wrap {
  transform: scale(1.12) rotate(-4deg) !important;
}

/* 아이콘 accent별 그라디언트 배경 */
.kpi-card.accent-blue    .kpi-icon-wrap { background: var(--grad-blue) !important;    color: #fff !important; box-shadow: 0 4px 12px hsl(217 91% 53% / 0.30) !important; }
.kpi-card.accent-emerald .kpi-icon-wrap { background: var(--grad-emerald) !important; color: #fff !important; box-shadow: 0 4px 12px hsl(152 66% 38% / 0.28) !important; }
.kpi-card.accent-violet  .kpi-icon-wrap { background: var(--grad-violet) !important;  color: #fff !important; box-shadow: 0 4px 12px hsl(258 74% 53% / 0.28) !important; }
.kpi-card.accent-amber   .kpi-icon-wrap { background: var(--grad-amber) !important;   color: #fff !important; box-shadow: 0 4px 12px hsl(38 91% 46% / 0.28) !important; }
.kpi-card.accent-rose    .kpi-icon-wrap { background: var(--grad-rose) !important;    color: #fff !important; box-shadow: 0 4px 12px hsl(355 76% 50% / 0.28) !important; }
.kpi-card.accent-cyan    .kpi-icon-wrap { background: var(--grad-cyan) !important;    color: #fff !important; box-shadow: 0 4px 12px hsl(192 82% 38% / 0.28) !important; }
.kpi-card.accent-orange  .kpi-icon-wrap { background: var(--grad-amber) !important;   color: #fff !important; }
.kpi-card.accent-teal    .kpi-icon-wrap { background: var(--grad-cyan) !important;    color: #fff !important; }

/* KPI 핵심 수치 — 강한 타이포 + 글로우 */
.kpi-value {
  font-size: 28px !important;
  font-weight: 800 !important;
  letter-spacing: -0.04em !important;
  line-height: 1.1 !important;
  color: var(--color-text-primary) !important;
  position: relative;
  z-index: 1;
}

/* KPI 추세 배지 강화 */
.kpi-trend.up {
  background: hsl(152 66% 38% / 0.10) !important;
  color: hsl(152 66% 30%) !important;
  border: 1px solid hsl(152 66% 38% / 0.20) !important;
  border-radius: 99px !important;
  padding: 2px 8px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
}
.kpi-trend.down {
  background: hsl(355 76% 50% / 0.10) !important;
  color: hsl(355 76% 42%) !important;
  border: 1px solid hsl(355 76% 50% / 0.20) !important;
  border-radius: 99px !important;
  padding: 2px 8px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
}

/* KPI 라벨 */
.kpi-label {
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.03em !important;
  color: var(--color-text-tertiary) !important;
  text-transform: uppercase !important;
  z-index: 1;
  position: relative;
}

/* ─────────────────────────────────────────────────────────────────────────
   PHASE 4 · 미니 KPI — 고급화
   ───────────────────────────────────────────────────────────────────────── */
.mini-kpi {
  background: hsl(0 0% 100%) !important;
  border: 1px solid hsl(220 20% 92% / 0.80) !important;
  border-radius: 16px !important;
  box-shadow: var(--shadow-card) !important;
  padding: 16px 18px !important;
  transition:
    transform     var(--dur-hover) var(--ease-out-expo),
    box-shadow    var(--dur-hover) ease,
    border-color  var(--dur-hover) ease !important;
  display: flex;
  align-items: center;
  gap: 14px;
  animation: fadeSlideUp var(--dur-enter) var(--ease-out-expo) both;
}
.mini-kpi:hover {
  transform:    translateY(-3px) !important;
  box-shadow:   var(--shadow-card-hover) !important;
  border-color: hsl(220 20% 86%) !important;
}

/* 미니 KPI 아이콘 래퍼 그라디언트 */
.mini-kpi-icon {
  width: 40px !important;
  height: 40px !important;
  border-radius: 11px !important;
  display: grid !important;
  place-items: center !important;
  font-size: 16px !important;
  flex-shrink: 0 !important;
  transition: transform var(--dur-hover) var(--ease-bounce) !important;
}
.mini-kpi:hover .mini-kpi-icon {
  transform: scale(1.10) rotate(-5deg) !important;
}

/* 미니 KPI 수치 */
.mini-kpi-value,
.mini-kpi-val {
  font-size: 20px !important;
  font-weight: 800 !important;
  letter-spacing: -0.035em !important;
  line-height: 1.1 !important;
  color: var(--color-text-primary) !important;
}
.mini-kpi-label,
.mini-kpi-lbl {
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.03em !important;
  color: var(--color-text-tertiary) !important;
  text-transform: uppercase !important;
  margin-top: 3px !important;
}

/* mini-kpi-card 변형 */
.mini-kpi-card {
  background: hsl(0 0% 100%) !important;
  border: 1px solid hsl(220 20% 92% / 0.80) !important;
  border-radius: 16px !important;
  box-shadow: var(--shadow-card) !important;
  transition: transform var(--dur-hover) var(--ease-out-expo), box-shadow var(--dur-hover) ease !important;
}
.mini-kpi-card:hover {
  transform: translateY(-3px) !important;
  box-shadow: var(--shadow-card-hover) !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   PHASE 5 · 패널 (Panel) & 카드 — 전면 프리미엄
   ───────────────────────────────────────────────────────────────────────── */
.panel {
  background: hsl(0 0% 100%) !important;
  border: 1px solid hsl(220 20% 92% / 0.80) !important;
  border-radius: 20px !important;
  box-shadow: var(--shadow-card) !important;
  transition:
    box-shadow var(--dur-hover) ease,
    border-color var(--dur-hover) ease !important;
  overflow: hidden;
}
.panel:hover {
  box-shadow: var(--shadow-card-hover) !important;
  border-color: hsl(220 20% 86%) !important;
}

.card {
  background: hsl(0 0% 100%) !important;
  border: 1px solid hsl(220 20% 92% / 0.80) !important;
  border-radius: 16px !important;
  box-shadow: var(--shadow-card) !important;
  transition:
    transform    var(--dur-hover) var(--ease-out-expo),
    box-shadow   var(--dur-hover) ease,
    border-color var(--dur-hover) ease !important;
}
.card:hover {
  transform:    translateY(-2px) !important;
  box-shadow:   var(--shadow-card-hover) !important;
  border-color: hsl(220 20% 86%) !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   PHASE 6 · 배지 (Badge) — 마이크로 디테일 강화
   ───────────────────────────────────────────────────────────────────────── */

/* 전체 배지 기본 스타일 강화 */
[class*="badge-"] {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.03em !important;
  padding: 3px 9px !important;
  border-radius: 99px !important;
  white-space: nowrap !important;
  position: relative;
}

/* status dot — 배지 앞 색상 점 */
[class*="badge-"]::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-block;
}

/* 배지 색상별 dot */
.badge-emerald::before,
.badge-success::before { background: hsl(var(--hsl-emerald-400)); }
.badge-amber::before,
.badge-warning::before  { background: hsl(var(--hsl-amber-400)); }
.badge-rose::before,
.badge-danger::before   { background: hsl(var(--hsl-rose-400)); }
.badge-blue::before,
.badge-info::before     { background: hsl(var(--hsl-blue-500)); }
.badge-violet::before,
.badge-primary::before  { background: hsl(var(--hsl-violet-400)); }
.badge-cyan::before     { background: hsl(var(--hsl-cyan-400)); }
.badge-gray::before,
.badge-neutral::before  { background: hsl(var(--hsl-slate-400)); }
.badge-sky::before      { background: hsl(var(--hsl-blue-400)); }
.badge-orange::before   { background: hsl(var(--hsl-orange-400)); }
.badge-teal::before     { background: hsl(var(--hsl-teal-400)); }

/* 배지 배경 + 테두리 강화 */
.badge-emerald,
.badge-success  {
  background: hsl(152 65% 94%) !important;
  color: hsl(152 72% 26%) !important;
  border: 1px solid hsl(152 66% 80%) !important;
}
.badge-amber,
.badge-warning  {
  background: hsl(43 95% 93%) !important;
  color: hsl(33 85% 30%) !important;
  border: 1px solid hsl(43 85% 75%) !important;
}
.badge-rose,
.badge-danger   {
  background: hsl(355 80% 95%) !important;
  color: hsl(355 74% 38%) !important;
  border: 1px solid hsl(355 70% 80%) !important;
}
.badge-blue,
.badge-info     {
  background: hsl(214 100% 95%) !important;
  color: hsl(221 83% 38%) !important;
  border: 1px solid hsl(213 80% 78%) !important;
}
.badge-violet,
.badge-primary  {
  background: hsl(258 80% 95%) !important;
  color: hsl(258 74% 42%) !important;
  border: 1px solid hsl(258 70% 80%) !important;
}
.badge-cyan     {
  background: hsl(192 90% 93%) !important;
  color: hsl(192 82% 28%) !important;
  border: 1px solid hsl(192 75% 72%) !important;
}
.badge-gray,
.badge-neutral  {
  background: hsl(220 18% 95%) !important;
  color: hsl(220 10% 38%) !important;
  border: 1px solid hsl(220 14% 84%) !important;
}
.badge-sky      {
  background: hsl(214 100% 96%) !important;
  color: hsl(221 83% 42%) !important;
  border: 1px solid hsl(213 80% 82%) !important;
}
.badge-orange   {
  background: hsl(25 90% 94%) !important;
  color: hsl(25 85% 38%) !important;
  border: 1px solid hsl(25 80% 76%) !important;
}
.badge-teal     {
  background: hsl(174 60% 92%) !important;
  color: hsl(174 68% 28%) !important;
  border: 1px solid hsl(174 55% 72%) !important;
}

/* badge-sm 강화 */
.badge-sm {
  font-size: 10px !important;
  padding: 2px 7px !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   PHASE 7 · 테이블 Row — hover lift + 개선
   ───────────────────────────────────────────────────────────────────────── */
.data-table {
  border-collapse: separate !important;
  border-spacing: 0 !important;
  width: 100%;
}

/* 테이블 헤더 강화 */
.data-table thead th,
.table-head th {
  background: hsl(220 27% 97%) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: var(--color-text-tertiary) !important;
  padding: 10px 14px !important;
  border-bottom: 1px solid hsl(220 20% 90%) !important;
}

/* 테이블 Row hover */
.data-table tbody tr,
.table-row {
  transition:
    background   180ms ease,
    box-shadow   180ms ease,
    transform    180ms var(--ease-out-expo) !important;
  cursor: default;
}
.data-table tbody tr:hover,
.table-row:hover {
  background: hsl(217 91% 53% / 0.04) !important;
  box-shadow: inset 3px 0 0 hsl(217 91% 53%) !important;
  transform: translateX(2px) !important;
}
.data-table tbody td,
.table-row td {
  padding: 12px 14px !important;
  border-bottom: 1px solid hsl(220 20% 94%) !important;
  font-size: 13px !important;
  vertical-align: middle !important;
  transition: inherit !important;
}
.data-table tbody tr:last-child td,
.table-row:last-child td {
  border-bottom: none !important;
}

/* 테이블 row 내 이름 강조 */
.data-table tbody td:first-child,
.table-row td:first-child {
  font-weight: 600 !important;
  color: var(--color-text-primary) !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   PHASE 8 · 아바타 — 그라디언트 링 효과
   ───────────────────────────────────────────────────────────────────────── */
.avatar {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  font-weight: 700 !important;
  flex-shrink: 0 !important;
  transition: transform var(--dur-hover) var(--ease-bounce) !important;
}
.avatar:hover {
  transform: scale(1.08) !important;
}

/* 아바타 그라디언트 링 */
.avatar::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  background: var(--grad-blue);
  z-index: -1;
  opacity: 0;
  transition: opacity var(--dur-hover) ease !important;
}
.avatar:hover::before {
  opacity: 1 !important;
}

/* staff-avatar 전용 그라디언트 */
.staff-avatar {
  width: 52px !important;
  height: 52px !important;
  border-radius: 14px !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  position: relative !important;
  transition: transform var(--dur-hover) var(--ease-bounce), box-shadow var(--dur-hover) ease !important;
}
.staff-avatar::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, hsl(0 0% 100% / 0.25) 0%, transparent 60%);
  pointer-events: none;
}
.staff-card:hover .staff-avatar {
  transform: scale(1.06) rotate(-3deg) !important;
  box-shadow: 0 6px 16px currentColor / 0.25 !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   PHASE 9 · 진행바 (Progress Bar) — 그라디언트 + 애니메이션
   ───────────────────────────────────────────────────────────────────────── */
.progress-bar {
  height: 8px !important;
  background: hsl(220 20% 92%) !important;
  border-radius: 99px !important;
  overflow: hidden !important;
  position: relative !important;
}
.progress-fill {
  height: 100% !important;
  border-radius: 99px !important;
  background: var(--grad-blue) !important;
  background-size: 200% 100% !important;
  animation: gradientShift 3s ease infinite !important;
  position: relative !important;
  transition: width 600ms var(--ease-out-expo) !important;
}
.progress-fill::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, transparent 0%, hsl(0 0% 100% / 0.35) 50%, transparent 100%);
  animation: shimmer 1.8s linear infinite;
  background-size: 200% 100%;
}
.progress-fill.success  { background: var(--grad-emerald) !important; animation: gradientShift 3s ease infinite !important; }
.progress-fill.warning  { background: var(--grad-amber) !important;   animation: gradientShift 3s ease infinite !important; }
.progress-fill.error    { background: var(--grad-rose) !important;     animation: gradientShift 3s ease infinite !important; }
.progress-fill.gradient { background: var(--grad-violet) !important;   animation: gradientShift 3s ease infinite !important; }

/* ─────────────────────────────────────────────────────────────────────────
   PHASE 10 · 사이드바 Nav — active glow + 강화
   ───────────────────────────────────────────────────────────────────────── */
.nav-item {
  border-radius: 10px !important;
  padding: 8px 12px !important;
  margin: 1px 0 !important;
  transition:
    background  var(--dur-fast) ease,
    color       var(--dur-fast) ease,
    box-shadow  var(--dur-fast) ease,
    transform   120ms var(--ease-out-expo) !important;
}
.nav-item:hover:not(.active) {
  background: hsl(220 20% 94%) !important;
  color: var(--color-text-primary) !important;
  transform: translateX(2px) !important;
}

.nav-item.active {
  background: hsl(217 91% 53% / 0.10) !important;
  color: hsl(217 91% 45%) !important;
  font-weight: 700 !important;
  box-shadow:
    inset 0 0 0 1px hsl(217 91% 53% / 0.20),
    0 2px 8px hsl(217 91% 53% / 0.12) !important;
  transform: none !important;
}

/* active 좌측 인디케이터 바 */
.nav-item.active::before {
  content: '' !important;
  position: absolute !important;
  left: -8px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 3px !important;
  height: 18px !important;
  border-radius: 0 3px 3px 0 !important;
  background: hsl(217 91% 53%) !important;
  box-shadow: 0 0 8px hsl(217 91% 53% / 0.50) !important;
}

.nav-item.active .nav-item-icon,
.nav-item.active .nav-item-label {
  color: hsl(217 91% 45%) !important;
}

/* 사이드바 섹션 레이블 */
.nav-section-label {
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase !important;
  color: var(--color-text-disabled) !important;
  padding: 12px 12px 5px !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   PHASE 11 · 버튼 — 마이크로인터랙션
   ───────────────────────────────────────────────────────────────────────── */
.btn {
  position: relative !important;
  overflow: hidden !important;
  transition:
    transform   120ms var(--ease-bounce),
    box-shadow  120ms ease,
    background  var(--dur-fast) ease !important;
}
.btn:active {
  transform: scale(0.97) !important;
}

/* ripple 효과 */
.btn::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: hsl(0 0% 100% / 0.20);
  opacity: 0;
  transition: opacity 200ms ease !important;
}
.btn:active::after {
  opacity: 1 !important;
}

/* primary 버튼 강화 */
.btn-primary {
  background: var(--grad-blue) !important;
  background-size: 200% 100% !important;
  border: none !important;
  color: #fff !important;
  font-weight: 700 !important;
  box-shadow: 0 1px 3px hsl(217 91% 53% / 0.30), 0 4px 12px hsl(217 91% 53% / 0.20) !important;
  transition:
    transform   120ms var(--ease-bounce),
    box-shadow  var(--dur-hover) ease,
    background-position 300ms ease !important;
}
.btn-primary:hover:not(:disabled) {
  background-position: right center !important;
  box-shadow: 0 2px 6px hsl(217 91% 53% / 0.35), 0 8px 20px hsl(217 91% 53% / 0.25) !important;
  transform: translateY(-1px) !important;
}
.btn-primary:active:not(:disabled) {
  transform: translateY(0) scale(0.98) !important;
  box-shadow: 0 1px 3px hsl(217 91% 53% / 0.25) !important;
}

/* secondary 버튼 강화 */
.btn-secondary {
  background: hsl(0 0% 100%) !important;
  border: 1px solid hsl(220 14% 86%) !important;
  color: var(--color-text-primary) !important;
  font-weight: 600 !important;
  box-shadow: 0 1px 2px hsl(222 16% 9% / 0.05) !important;
  transition: all 140ms ease !important;
}
.btn-secondary:hover:not(:disabled) {
  border-color: hsl(220 14% 76%) !important;
  box-shadow: 0 2px 6px hsl(222 16% 9% / 0.08) !important;
  background: hsl(220 27% 99%) !important;
  transform: translateY(-1px) !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   PHASE 12 · Staff 카드 — 프리미엄 업그레이드
   ───────────────────────────────────────────────────────────────────────── */
.staff-card {
  background: var(--grad-surface) !important;
  border: 1px solid hsl(220 20% 92% / 0.80) !important;
  border-radius: 20px !important;
  box-shadow: var(--shadow-card) !important;
  padding: 22px !important;
  transition:
    transform     var(--dur-hover) var(--ease-out-expo),
    box-shadow    var(--dur-hover) ease,
    border-color  var(--dur-hover) ease !important;
  position: relative;
  overflow: hidden;
}

/* 카드 상단 광택 */
.staff-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 50%;
  background: linear-gradient(180deg, hsl(0 0% 100% / 0.60) 0%, transparent 100%);
  pointer-events: none;
  border-radius: inherit;
}

.staff-card:hover {
  transform:    translateY(-5px) scale(1.005) !important;
  box-shadow:   var(--shadow-card-hover) !important;
  border-color: hsl(220 20% 84%) !important;
}

/* 스태프 이름 */
.staff-name {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--color-text-primary) !important;
  letter-spacing: -0.02em !important;
}
.staff-role {
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  color: var(--color-text-tertiary) !important;
  text-transform: uppercase !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   PHASE 13 · Finance Item — 고급화
   ───────────────────────────────────────────────────────────────────────── */
.finance-item {
  background: hsl(0 0% 100%) !important;
  border: 1px solid hsl(220 20% 92% / 0.80) !important;
  border-radius: 16px !important;
  box-shadow: var(--shadow-card) !important;
  padding: 18px 20px !important;
  position: relative !important;
  overflow: hidden !important;
  transition:
    transform     var(--dur-hover) var(--ease-out-expo),
    box-shadow    var(--dur-hover) ease,
    border-color  var(--dur-hover) ease !important;
}
.finance-item::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 3px;
  background: var(--grad-blue);
  border-radius: 0 0 16px 16px;
  opacity: 0;
  transition: opacity var(--dur-hover) ease !important;
}
.finance-item:hover {
  transform:    translateY(-3px) !important;
  box-shadow:   var(--shadow-card-hover) !important;
  border-color: hsl(220 20% 86%) !important;
}
.finance-item:hover::after {
  opacity: 1 !important;
}

.finance-item-value {
  font-size: 26px !important;
  font-weight: 800 !important;
  letter-spacing: -0.04em !important;
  line-height: 1.1 !important;
  background: var(--grad-blue) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}
.finance-item-label {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  color: var(--color-text-tertiary) !important;
  margin-top: 5px !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   PHASE 14 · 캠페인 KPI 카드 — 강화
   ───────────────────────────────────────────────────────────────────────── */
.campaign-kpi-card-v2 {
  background: hsl(0 0% 100%) !important;
  border: 1px solid hsl(220 20% 92% / 0.80) !important;
  border-radius: 14px !important;
  box-shadow: var(--shadow-card) !important;
  padding: 14px !important;
  text-align: center !important;
  transition:
    transform     var(--dur-hover) var(--ease-out-expo),
    box-shadow    var(--dur-hover) ease !important;
}
.campaign-kpi-card-v2:hover {
  transform:  translateY(-3px) !important;
  box-shadow: var(--shadow-card-hover) !important;
}

.campaign-kpi-icon-v2 {
  width: 38px !important;
  height: 38px !important;
  border-radius: 10px !important;
  margin: 0 auto var(--sp-2) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 17px !important;
  opacity: 1 !important;
  position: relative !important;
  overflow: hidden !important;
}
.campaign-kpi-icon-v2::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, hsl(0 0% 100% / 0.25) 0%, transparent 60%);
}

.campaign-kpi-v2-value {
  font-size: 18px !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
  color: var(--color-text-primary) !important;
}
.campaign-kpi-v2-label {
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  color: var(--color-text-tertiary) !important;
  margin-top: 3px !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   PHASE 15 · Stat 카드 — 고급화
   ───────────────────────────────────────────────────────────────────────── */
.stat-card {
  background: hsl(0 0% 100%) !important;
  border: 1px solid hsl(220 20% 92% / 0.80) !important;
  border-radius: 18px !important;
  box-shadow: var(--shadow-card) !important;
  transition:
    transform    var(--dur-hover) var(--ease-out-expo),
    box-shadow   var(--dur-hover) ease !important;
}
.stat-card:hover {
  transform:  translateY(-3px) !important;
  box-shadow: var(--shadow-card-hover) !important;
}

/* stat-card 아이콘 그라디언트 */
.stat-card .stat-icon,
.stat-card [class*="icon"] {
  filter: none !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   PHASE 16 · 칸반 카드 — 글래스모피즘 미세 효과
   ───────────────────────────────────────────────────────────────────────── */
.kanban-card,
.task-card,
.lead-card {
  background: hsl(0 0% 100%) !important;
  border: 1px solid hsl(220 20% 92% / 0.80) !important;
  border-radius: 14px !important;
  box-shadow: var(--shadow-card) !important;
  transition:
    transform    var(--dur-hover) var(--ease-out-expo),
    box-shadow   var(--dur-hover) ease,
    border-color var(--dur-hover) ease !important;
  position: relative;
  overflow: hidden;
}
.kanban-card:hover,
.task-card:hover,
.lead-card:hover {
  transform:    translateY(-3px) translateX(1px) !important;
  box-shadow:   var(--shadow-card-hover) !important;
  border-color: hsl(220 20% 84%) !important;
}

/* 칸반 컬럼 헤더 */
.kanban-col-header,
.kanban-header {
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   PHASE 17 · Shimmer Loading Skeleton
   ───────────────────────────────────────────────────────────────────────── */
.skeleton,
[class*="skeleton-"] {
  background: linear-gradient(
    90deg,
    hsl(220 20% 93%) 0%,
    hsl(220 20% 97%) 40%,
    hsl(220 20% 93%) 80%
  ) !important;
  background-size: 600px 100% !important;
  animation: shimmer var(--dur-shimmer) linear infinite !important;
  border-radius: var(--r-md) !important;
  color: transparent !important;
}
.skeleton-text  { height: 14px; margin-bottom: 8px; border-radius: 4px; }
.skeleton-title { height: 20px; margin-bottom: 12px; border-radius: 6px; }
.skeleton-card  { height: 120px; border-radius: 16px; }
.skeleton-avatar{
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(90deg, hsl(220 20% 90%) 0%, hsl(220 20% 95%) 40%, hsl(220 20% 90%) 80%) !important;
  background-size: 200px 100% !important;
  animation: shimmer 1.6s linear infinite !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   PHASE 18 · 차트 Bar — 그라디언트 + 라운드 모서리
   ───────────────────────────────────────────────────────────────────────── */

/* SVG/CSS 바차트 컬럼 */
.bar-col,
.chart-bar,
[class*="bar-item"] {
  border-radius: 6px 6px 0 0 !important;
  background: var(--grad-blue) !important;
  transition: opacity var(--dur-fast) ease, filter var(--dur-fast) ease !important;
  position: relative;
  overflow: hidden;
}
.bar-col::after,
.chart-bar::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 40%;
  background: hsl(0 0% 100% / 0.20);
  border-radius: inherit;
  pointer-events: none;
}
.bar-col:hover,
.chart-bar:hover {
  opacity: 0.88 !important;
  filter: brightness(1.05) !important;
}

/* Finance 바 차트 그라디언트 */
.finance-bar,
.bar-fill {
  border-radius: 4px 4px 0 0 !important;
  background: var(--grad-blue) !important;
  transition: width 500ms var(--ease-out-expo), height 500ms var(--ease-out-expo) !important;
}
.finance-bar.positive { background: var(--grad-emerald) !important; }
.finance-bar.negative { background: var(--grad-rose) !important; }

/* ─────────────────────────────────────────────────────────────────────────
   PHASE 19 · 페이지 헤더 — 강화
   ───────────────────────────────────────────────────────────────────────── */
.page-header {
  margin-bottom: var(--sp-6) !important;
  animation: fadeSlideUp 350ms var(--ease-out-expo) both !important;
}
.page-title {
  font-size: 22px !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
  color: var(--color-text-primary) !important;
  line-height: 1.2 !important;
}
.page-subtitle {
  font-size: 13px !important;
  color: var(--color-text-tertiary) !important;
  margin-top: 4px !important;
  font-weight: 500 !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   PHASE 20 · 대시보드 히어로 배너 — 고급화
   ───────────────────────────────────────────────────────────────────────── */
.dashboard-hero,
.hero-banner {
  border-radius: 22px !important;
  overflow: hidden !important;
  position: relative !important;
  box-shadow: 0 4px 20px hsl(217 91% 53% / 0.20) !important;
}

/* 히어로 내부 장식 */
.dashboard-hero::after {
  content: '';
  position: absolute;
  top: -40%; right: -10%;
  width: 50%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, hsl(0 0% 100% / 0.12) 0%, transparent 70%);
  pointer-events: none;
}

/* ─────────────────────────────────────────────────────────────────────────
   PHASE 21 · 빠른 액션 버튼 (Quick Action) — 프리미엄
   ───────────────────────────────────────────────────────────────────────── */
.quick-action-btn,
.action-btn,
.quick-btn {
  border-radius: 14px !important;
  transition:
    transform    var(--dur-hover) var(--ease-bounce),
    box-shadow   var(--dur-hover) ease,
    background   var(--dur-fast) ease !important;
}
.quick-action-btn:hover,
.action-btn:hover,
.quick-btn:hover {
  transform:  translateY(-3px) scale(1.03) !important;
  box-shadow: var(--shadow-card-hover) !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   PHASE 22 · 알림 / 피드 아이템 — 강화
   ───────────────────────────────────────────────────────────────────────── */
.notif-item,
.feed-item,
.activity-item,
.consult-item {
  border-radius: 12px !important;
  padding: 12px 14px !important;
  transition:
    background   140ms ease,
    box-shadow   140ms ease,
    transform    140ms var(--ease-out-expo) !important;
  border: 1px solid transparent !important;
}
.notif-item:hover,
.feed-item:hover,
.activity-item:hover,
.consult-item:hover {
  background:   hsl(217 91% 53% / 0.04) !important;
  border-color: hsl(217 91% 53% / 0.12) !important;
  transform:    translateX(3px) !important;
}

/* 알림 미읽음 도트 강화 */
.notif-unread::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: hsl(217 91% 53%);
  box-shadow: 0 0 0 3px hsl(217 91% 53% / 0.20);
  flex-shrink: 0;
}

/* ─────────────────────────────────────────────────────────────────────────
   PHASE 23 · 시간표 그리드 — 강화
   ───────────────────────────────────────────────────────────────────────── */
.timetable-cell,
.schedule-cell {
  border-radius: 10px !important;
  transition:
    transform    var(--dur-hover) var(--ease-out-expo),
    box-shadow   var(--dur-hover) ease,
    filter       var(--dur-hover) ease !important;
}
.timetable-cell:hover,
.schedule-cell:hover {
  transform:  scale(1.03) !important;
  box-shadow: var(--shadow-card-hover) !important;
  z-index: 2 !important;
  filter: brightness(1.03) !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   PHASE 24 · AI 인사이트 카드 — 특수 강화
   ───────────────────────────────────────────────────────────────────────── */
.insight-card,
.ai-card,
.intel-card {
  background: linear-gradient(
    135deg,
    hsl(258 80% 97%) 0%,
    hsl(217 100% 97%) 100%
  ) !important;
  border: 1px solid hsl(258 60% 88%) !important;
  border-radius: 18px !important;
  box-shadow: 0 2px 8px hsl(258 74% 53% / 0.12) !important;
  position: relative !important;
  overflow: hidden !important;
  transition:
    transform    var(--dur-hover) var(--ease-out-expo),
    box-shadow   var(--dur-hover) ease !important;
}
.insight-card::before {
  content: '';
  position: absolute;
  top: -20px; right: -20px;
  width: 120px; height: 120px;
  border-radius: 50%;
  background: radial-gradient(circle, hsl(258 74% 53% / 0.12) 0%, transparent 70%);
  pointer-events: none;
}
.insight-card:hover {
  transform:  translateY(-3px) !important;
  box-shadow: 0 8px 24px hsl(258 74% 53% / 0.18) !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   PHASE 25 · 탭 (Tab) 네비게이션 — 강화
   ───────────────────────────────────────────────────────────────────────── */
.tab-btn,
.tab-item {
  font-size: 13px !important;
  font-weight: 600 !important;
  padding: 8px 16px !important;
  border-radius: 8px !important;
  transition:
    background   var(--dur-fast) ease,
    color        var(--dur-fast) ease,
    box-shadow   var(--dur-fast) ease !important;
  color: var(--color-text-secondary) !important;
}
.tab-btn:hover:not(.active),
.tab-item:hover:not(.active) {
  background: hsl(220 20% 94%) !important;
  color: var(--color-text-primary) !important;
}
.tab-btn.active,
.tab-item.active {
  background: hsl(0 0% 100%) !important;
  color: hsl(217 91% 45%) !important;
  box-shadow: 0 1px 4px hsl(222 16% 9% / 0.10), 0 0 0 1px hsl(220 20% 88%) !important;
  font-weight: 700 !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   PHASE 26 · 폼 입력 필드 — 강화
   ───────────────────────────────────────────────────────────────────────── */
.form-input,
.form-select,
.form-textarea,
input[type="text"],
input[type="email"],
input[type="number"],
select,
textarea {
  border: 1px solid hsl(220 14% 88%) !important;
  border-radius: 10px !important;
  background: hsl(0 0% 100%) !important;
  color: var(--color-text-primary) !important;
  font-size: 13px !important;
  transition:
    border-color var(--dur-fast) ease,
    box-shadow   var(--dur-fast) ease !important;
}
.form-input:focus,
.form-select:focus,
.form-textarea:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
select:focus,
textarea:focus {
  border-color: hsl(217 91% 53%) !important;
  box-shadow: 0 0 0 3px hsl(217 91% 53% / 0.14) !important;
  outline: none !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   PHASE 27 · 수납 / 결제 관련 특수 카드 — 강화
   ───────────────────────────────────────────────────────────────────────── */
.payment-card,
.billing-card {
  background: hsl(0 0% 100%) !important;
  border: 1px solid hsl(220 20% 92%) !important;
  border-radius: 16px !important;
  box-shadow: var(--shadow-card) !important;
  transition: transform var(--dur-hover) var(--ease-out-expo), box-shadow var(--dur-hover) ease !important;
}
.payment-card:hover,
.billing-card:hover {
  transform:  translateY(-2px) !important;
  box-shadow: var(--shadow-card-hover) !important;
}

/* 수납 금액 강조 */
.amount-positive { color: hsl(152 66% 32%) !important; font-weight: 800 !important; }
.amount-negative { color: hsl(355 76% 44%) !important; font-weight: 800 !important; }
.amount-neutral  { color: var(--color-text-primary) !important; font-weight: 800 !important; }

/* ─────────────────────────────────────────────────────────────────────────
   PHASE 28 · 히트맵 (Heatmap / Curriculum) — 강화
   ───────────────────────────────────────────────────────────────────────── */
.heatmap-cell,
.curriculum-cell {
  border-radius: 5px !important;
  transition:
    transform    120ms var(--ease-bounce),
    filter       120ms ease,
    box-shadow   120ms ease !important;
}
.heatmap-cell:hover,
.curriculum-cell:hover {
  transform:  scale(1.25) !important;
  z-index: 2 !important;
  filter: brightness(1.10) !important;
  box-shadow: 0 2px 8px currentColor / 0.30 !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   PHASE 29 · 섹션 타이틀 — 강화
   ───────────────────────────────────────────────────────────────────────── */
.section-title,
.panel-title {
  font-size: 14px !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  color: var(--color-text-primary) !important;
}
.section-subtitle,
.panel-subtitle {
  font-size: 12px !important;
  color: var(--color-text-tertiary) !important;
  font-weight: 500 !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   PHASE 30 · 전반적 Typography — 강화
   ───────────────────────────────────────────────────────────────────────── */
body {
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  text-rendering: optimizeLegibility !important;
}

/* 링크 강화 */
a {
  transition: color var(--dur-fast) ease, opacity var(--dur-fast) ease !important;
}
a:hover { opacity: 0.82 !important; }

/* ─────────────────────────────────────────────────────────────────────────
   PHASE 31 · 스크롤바 — 세련되게
   ───────────────────────────────────────────────────────────────────────── */
* {
  scrollbar-width: thin !important;
  scrollbar-color: hsl(220 14% 84%) transparent !important;
}
*::-webkit-scrollbar { width: 5px; height: 5px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: hsl(220 14% 84%);
  border-radius: 99px;
}
*::-webkit-scrollbar-thumb:hover { background: hsl(220 14% 72%); }

/* ─────────────────────────────────────────────────────────────────────────
   PHASE 32 · 선택 영역 — 브랜드 색
   ───────────────────────────────────────────────────────────────────────── */
::selection {
  background: hsl(217 91% 53% / 0.18) !important;
  color: var(--color-text-primary) !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   PHASE 33 · 반응형 & 접근성 보완
   ───────────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:   0.01ms !important;
    animation-delay:      0.01ms !important;
    transition-duration:  0.01ms !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   PHASE 34 · 인라인 SVG 스파크라인 시뮬레이션 (CSS-only)
   ───────────────────────────────────────────────────────────────────────── */

/* KPI 카드 하단 트렌드 라인 시뮬레이션 */
.kpi-sparkline,
.sparkline-wrap {
  width: 80px;
  height: 32px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}
.kpi-sparkline::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      to right,
      hsl(217 91% 53% / 0)   0%,
      hsl(217 91% 53% / 0.08) 30%,
      hsl(217 91% 53% / 0.12) 60%,
      hsl(217 91% 53% / 0.06) 100%
    );
  clip-path: polygon(0 80%, 15% 60%, 30% 70%, 45% 40%, 60% 50%, 75% 20%, 100% 30%, 100% 100%, 0 100%);
  border-radius: 0 0 4px 4px;
  animation: sparkSlide 600ms var(--ease-out-expo) both;
}
.kpi-sparkline::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, hsl(217 91% 53% / 0.3), hsl(217 91% 53% / 0.8), hsl(217 91% 53% / 0.3));
  clip-path: polygon(0 80%, 15% 60%, 30% 70%, 45% 40%, 60% 50%, 75% 20%, 100% 30%, 100% 100%, 0 100%);
  animation: sparkSlide 600ms var(--ease-out-expo) 100ms both;
}

/* Emerald sparkline */
.kpi-card.accent-emerald .kpi-sparkline::before {
  background: linear-gradient(to right, hsl(152 66% 38% / 0) 0%, hsl(152 66% 38% / 0.12) 100%);
}
.kpi-card.accent-emerald .kpi-sparkline::after {
  background: linear-gradient(90deg, hsl(152 66% 38% / 0.3), hsl(152 66% 38% / 0.8), hsl(152 66% 38% / 0.3));
}

/* ─────────────────────────────────────────────────────────────────────────
   PHASE 35 · Radial Gauge / Donut 시뮬레이션 (conic-gradient)
   ───────────────────────────────────────────────────────────────────────── */
.radial-gauge {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: conic-gradient(
    hsl(217 91% 53%) 0deg,
    hsl(258 74% 53%) calc(var(--gauge-pct, 65) * 3.6deg),
    hsl(220 20% 92%) calc(var(--gauge-pct, 65) * 3.6deg) 360deg
  );
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  flex-shrink: 0;
}
.radial-gauge::before {
  content: '';
  width: 58px; height: 58px;
  border-radius: 50%;
  background: hsl(0 0% 100%);
  position: absolute;
}
.radial-gauge-value {
  position: relative;
  z-index: 1;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--color-text-primary);
}

/* ─────────────────────────────────────────────────────────────────────────
   PHASE 36 · 특수 수치 강조 — count-up 효과 시뮬레이션
   ───────────────────────────────────────────────────────────────────────── */

/* 수치 등장 애니메이션 — 아래에서 위로 */
.kpi-value,
.mini-kpi-value,
.mini-kpi-val,
.finance-item-value,
.stat-value {
  animation: fadeSlideUp 500ms var(--ease-out-expo) 200ms both !important;
}

/* 대형 수치 글로우 미세 효과 */
.kpi-value:not(:empty) {
  position: relative;
}

/* ─────────────────────────────────────────────────────────────────────────
   PHASE 37 · 아이콘 래퍼 듀얼톤 스타일
   ───────────────────────────────────────────────────────────────────────── */
.icon-wrap,
.icon-wrapper,
[class*="-icon-wrap"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 10px !important;
  width: 38px !important;
  height: 38px !important;
  flex-shrink: 0 !important;
  transition: transform var(--dur-hover) var(--ease-bounce) !important;
}
[class*="-icon-wrap"]:hover,
.icon-wrap:hover {
  transform: scale(1.12) rotate(-5deg) !important;
}

/* 아이콘 컬러 시스템 — 듀얼톤 */
.icon-blue    { background: hsl(214 100% 95%); color: hsl(221 83% 45%); }
.icon-emerald { background: hsl(152 65% 94%); color: hsl(152 72% 32%); }
.icon-violet  { background: hsl(258 80% 95%); color: hsl(258 74% 48%); }
.icon-amber   { background: hsl(43 95% 93%);  color: hsl(33 85% 38%);  }
.icon-rose    { background: hsl(355 80% 95%); color: hsl(355 74% 44%); }
.icon-cyan    { background: hsl(192 90% 93%); color: hsl(192 82% 32%); }
.icon-teal    { background: hsl(174 60% 92%); color: hsl(174 68% 30%); }
.icon-orange  { background: hsl(25 90% 94%);  color: hsl(25 85% 38%);  }

/* ─────────────────────────────────────────────────────────────────────────
   PHASE 38 · 전체 콘텐츠 영역 배경 미세 패턴
   ───────────────────────────────────────────────────────────────────────── */
.content-area {
  background:
    radial-gradient(ellipse at 80% 0%, hsl(217 91% 53% / 0.04) 0%, transparent 50%),
    radial-gradient(ellipse at 20% 100%, hsl(258 74% 53% / 0.03) 0%, transparent 50%),
    hsl(220 27% 98%) !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   PHASE 39 · 상태 인디케이터 (온라인/오프라인) 강화
   ───────────────────────────────────────────────────────────────────────── */
.status-dot {
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  display: inline-block !important;
  flex-shrink: 0 !important;
}
.status-dot.online  {
  background: hsl(var(--hsl-emerald-400)) !important;
  box-shadow: 0 0 0 2px hsl(var(--hsl-emerald-400) / 0.25) !important;
  animation: livePulse 2.4s ease-in-out infinite !important;
}
.status-dot.offline { background: hsl(var(--hsl-slate-400)) !important; }
.status-dot.away    { background: hsl(var(--hsl-amber-400)) !important; }
.status-dot.busy    { background: hsl(var(--hsl-rose-400)) !important; }

/* ─────────────────────────────────────────────────────────────────────────
   PHASE 40 · 최종 — 사이드바 전체 강화
   ───────────────────────────────────────────────────────────────────────── */
.sidebar {
  background: hsl(0 0% 100%) !important;
  border-right: 1px solid hsl(220 20% 92%) !important;
  box-shadow: 1px 0 0 hsl(220 20% 92%), 4px 0 16px hsl(222 16% 9% / 0.03) !important;
}

/* 사이드바 로고 강화 */
.sidebar-logo,
.brand-logo {
  font-weight: 900 !important;
  letter-spacing: -0.04em !important;
}

/* 탑바 강화 */
.topbar {
  background: hsl(0 0% 100% / 0.92) !important;
  backdrop-filter: blur(12px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(12px) saturate(180%) !important;
  border-bottom: 1px solid hsl(220 20% 92%) !important;
  box-shadow: 0 1px 0 hsl(220 20% 92%), 0 2px 8px hsl(222 16% 9% / 0.04) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   TIMETABLE GRID FIX — patch v3 레이아웃 보완
   ═══════════════════════════════════════════════════════════════════════════ */

/* 시간표 그리드 래퍼: 가로 스크롤 확보 */
#tt-grid-wrap {
  overflow: visible !important;
}
#tt-grid-wrap > div {
  overflow-x: auto !important;
  width: 100% !important;
}

/* 시간표 테이블: 고정 너비로 열 균등 분배 */
#tt-grid {
  width: 100% !important;
  min-width: 900px !important;
  table-layout: fixed !important;
  border-collapse: collapse !important;
}

/* 시간 열 (첫 번째 th/td) */
#tt-grid thead th:first-child,
#tt-grid tbody td:first-child {
  width: 62px !important;
  min-width: 62px !important;
  max-width: 62px !important;
}

/* 요일 열 (나머지 th) — 균등하게 */
#tt-grid thead th:not(:first-child) {
  width: calc((100% - 62px) / 7) !important;
  min-width: 100px !important;
}

/* 수업 블록 내부 텍스트 잘림 방지 */
.tt-block {
  overflow: hidden !important;
  word-break: break-word !important;
}
.tt-block > div[style*="font-weight:700"],
.tt-block > div[style*="font-weight: 700"] {
  white-space: normal !important;
  overflow-wrap: break-word !important;
}

/* 빈 셀 힌트 */
.tt-cell-empty:hover .tt-empty-hint {
  opacity: 1 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   END · NOVA PREMIUM DESIGN v2.0
   ═══════════════════════════════════════════════════════════════════════════ */