/* ═══════════════════════════════════════════════════════════════════
   BLOOM Design System v1.0 · Production CSS
   Academy OS — 밝고 따뜻한 학원 OS
   ═══════════════════════════════════════════════════════════════════ */

/* ─── § 1. TOKENS ─────────────────────────────────────────────── */
:root{
  /* Canvas */
  --cream:        #FFF9F0;
  --cream-2:      #FEF6E8;
  --cream-3:      #FCF2DE;
  --paper:        #FFFFFF;
  --ink-1:        #3A2718;
  --ink-2:        #6B4B2E;
  --ink-3:        #9A7C5B;
  --ink-4:        #C7AE8E;
  --line-1:       #F3E4C9;
  --line-2:       #E8CFA3;

  /* Palette */
  --orange:       #F97316;
  --orange-soft:  #FFE8C7;
  --orange-deep:  #B45309;
  --peach:        #FFC1B6;
  --peach-soft:   #FFEDE7;
  --peach-deep:   #B84A32;
  --sage:         #7FA285;
  --sage-soft:    #D4E5B8;
  --sage-deep:    #4D6B2A;
  --sky:          #B8D4E8;
  --sky-soft:     #E5F0F7;
  --sky-deep:     #3F6B90;
  --sunflower:    #F5C842;
  --sunflower-soft:#FCEFC5;
  --plum:         #A88CC9;
  --plum-soft:    #EDE4F1;
  --plum-deep:    #5D4177;
  --rose:         #E88787;
  --rose-soft:    #F9DFDE;
  --rose-deep:    #8B4646;

  /* Semantic aliases */
  --success:      var(--sage);
  --success-soft: var(--sage-soft);
  --danger:       var(--rose);
  --danger-soft:  var(--rose-soft);
  --warning:      var(--sunflower);
  --warning-soft: var(--sunflower-soft);
  --info:         var(--sky);
  --info-soft:    var(--sky-soft);

  /* Season default (여름) */
  --season:       var(--sunflower);
  --season-soft:  var(--sunflower-soft);
  --season-deep:  #7A5820;

  /* Type */
  --sans: 'DM Sans','Pretendard','Noto Sans KR',-apple-system,BlinkMacSystemFont,sans-serif;
  --serif:'Fraunces','Iowan Old Style',Georgia,serif;
  --mono: 'JetBrains Mono','SF Mono',Consolas,monospace;

  /* Shadow (warm-toned) */
  --sh-1: 0 1px 2px rgba(180,90,30,.05), 0 2px 8px rgba(180,90,30,.04);
  --sh-2: 0 4px 12px rgba(180,90,30,.08), 0 1px 3px rgba(180,90,30,.05);
  --sh-3: 0 12px 32px rgba(180,90,30,.12), 0 4px 12px rgba(180,90,30,.06);
  --sh-4: 0 24px 60px rgba(180,90,30,.15);
  --sh-orange: 0 6px 20px rgba(249,115,22,.28);
  --sh-sage:   0 6px 20px rgba(127,162,133,.28);
  --sh-plum:   0 6px 20px rgba(168,140,201,.28);

  /* Radius */
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 26px;
  --r-2xl: 32px;
  --r-full: 9999px;

  /* Motion */
  --ease-out:    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-fast:    160ms;
  --dur-normal:  260ms;
  --dur-slow:    400ms;

  /* Layout */
  --sidebar-w: 244px;
  --sidebar-w-collapsed: 68px;
  --topbar-h: 68px;
  --content-pad: 32px;
}

/* ─── § 2. SEASON THEMES ──────────────────────────────────────── */
body.season-spring{ --season: var(--peach); --season-soft: var(--peach-soft); --season-deep: var(--peach-deep); }
body.season-summer{ --season: var(--sunflower); --season-soft: var(--sunflower-soft); --season-deep: #7A5820; }
body.season-autumn{ --season: #D4A657; --season-soft: #FAECC7; --season-deep: #7A5820; }
body.season-winter{ --season: var(--sky); --season-soft: var(--sky-soft); --season-deep: var(--sky-deep); }

/* Time of day tinting (subtle) */
body.tod-dawn    { --cream: #FEF5E4; }
body.tod-morning { --cream: #FFF9F0; }
body.tod-day     { --cream: #FFF9F0; }
body.tod-evening { --cream: #FCF2DE; }
body.tod-night   { --cream: #F9EDD5; }

/* ─── § 3. RESET & BASE ───────────────────────────────────────── */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;font-size:16px}
body{
  font-family:var(--sans);font-size:14px;line-height:1.55;
  color:var(--ink-1);background:var(--cream);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  min-height:100vh;overflow:hidden;
}
button{font-family:inherit;border:none;background:none;cursor:pointer;color:inherit}
input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}
input,select,textarea{outline:none}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
::selection{background:var(--orange-soft);color:var(--orange-deep)}

/* Warm ambient background */
body.has-ambient{
  background:
    radial-gradient(circle at 8% 12%, rgba(255,232,199,.55) 0%, transparent 25%),
    radial-gradient(circle at 92% 85%, rgba(255,193,182,.35) 0%, transparent 30%),
    radial-gradient(circle at 50% 100%, rgba(245,200,66,.14) 0%, transparent 40%),
    var(--cream);
}
body.season-spring.has-ambient{
  background:
    radial-gradient(circle at 12% 15%, rgba(255,193,182,.5) 0%, transparent 28%),
    radial-gradient(circle at 88% 80%, rgba(249,199,212,.35) 0%, transparent 30%),
    var(--cream);
}
body.season-autumn.has-ambient{
  background:
    radial-gradient(circle at 12% 15%, rgba(212,166,87,.4) 0%, transparent 28%),
    radial-gradient(circle at 88% 80%, rgba(232,135,135,.35) 0%, transparent 30%),
    var(--cream);
}
body.season-winter.has-ambient{
  background:
    radial-gradient(circle at 12% 15%, rgba(184,212,232,.5) 0%, transparent 28%),
    radial-gradient(circle at 88% 80%, rgba(168,140,201,.3) 0%, transparent 30%),
    var(--cream);
}

/* ═══════════════════════════════════════════════════════════════
   § 4. APP SHELL (기존 .app-shell, .sidebar 오버라이드)
   ═══════════════════════════════════════════════════════════════ */
.app-shell,.shell{display:flex;min-height:100vh;height:100dvh;background:var(--cream)}
.main-area,.main{flex:1;min-width:0;display:flex;flex-direction:column;overflow:hidden}
.content-area,.content{flex:1;padding:var(--content-pad);overflow-y:auto;overflow-x:hidden}

/* Custom scrollbar */
.content-area::-webkit-scrollbar,.content::-webkit-scrollbar{width:8px;height:8px}
.content-area::-webkit-scrollbar-track,.content::-webkit-scrollbar-track{background:transparent}
.content-area::-webkit-scrollbar-thumb,.content::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:99px}
.content-area::-webkit-scrollbar-thumb:hover,.content::-webkit-scrollbar-thumb:hover{background:var(--ink-4)}

/* ═══════════════════════════════════════════════════════════════
   § 5. SIDEBAR
   ═══════════════════════════════════════════════════════════════ */
.sidebar,.side{
  width:var(--sidebar-w);flex-shrink:0;
  background:linear-gradient(180deg,#FFFDF7 0%, #FEF6E8 100%);
  border-right:1px solid var(--line-1);
  display:flex;flex-direction:column;padding:18px 14px;
  position:sticky;top:0;height:100dvh;overflow:hidden;
  transition:width var(--dur-normal) var(--ease-out);
}
.sidebar.collapsed{width:var(--sidebar-w-collapsed)}
.sidebar.collapsed .sidebar-logo-text,
.sidebar.collapsed .sidebar-search-text,
.sidebar.collapsed .sidebar-search-kbd,
.sidebar.collapsed .nav-item-label,
.sidebar.collapsed .nav-badge,
.sidebar.collapsed .sidebar-section-label,
.sidebar.collapsed .sidebar-user-info,
.sidebar.collapsed .side-mascot-txt{display:none}

.sidebar-logo,.side-brand{
  display:flex;align-items:center;gap:12px;padding:6px 8px 22px;
  border-bottom:1px solid var(--line-1);margin-bottom:12px;
}
.sidebar-logo-icon,.side-brand-mark{
  width:40px;height:40px;border-radius:12px;
  background:linear-gradient(135deg,var(--orange) 0%, var(--sunflower) 100%);
  display:grid;place-items:center;color:#fff;font-size:18px;font-weight:700;
  box-shadow:var(--sh-orange);flex-shrink:0;
  animation:bloomFloat 4s ease-in-out infinite;
}
.sidebar-logo-text{flex:1;overflow:hidden}
.sidebar-logo-name{
  font-family:var(--sans);font-weight:700;font-size:16px;letter-spacing:-.02em;
  color:var(--ink-1);white-space:nowrap;line-height:1.2;
}
.sidebar-logo-sub{
  font-family:var(--mono);font-size:10px;color:var(--ink-3);letter-spacing:.1em;
  margin-top:2px;white-space:nowrap;
}

/* Sidebar search / command trigger */
.sidebar-search{
  display:flex;align-items:center;gap:10px;padding:8px 12px;
  background:var(--paper);border:1px solid var(--line-1);border-radius:12px;
  color:var(--ink-3);cursor:pointer;margin-bottom:8px;
  transition:all var(--dur-fast) var(--ease-out);
}
.sidebar-search:hover{border-color:var(--orange);box-shadow:0 2px 8px rgba(249,115,22,.1)}
.sidebar-search i{font-size:12px}
.sidebar-search-text{flex:1;font-size:12px}
.sidebar-search-kbd{display:flex;gap:2px}
.sidebar-search-kbd kbd{
  font-family:var(--mono);font-size:9px;background:var(--cream-2);padding:1px 5px;
  border-radius:4px;border:1px solid var(--line-1);color:var(--ink-3);
}

/* Nav */
.sidebar-nav,.side-nav{
  flex:1;display:flex;flex-direction:column;gap:2px;overflow-y:auto;overflow-x:hidden;
  scrollbar-width:thin;padding:4px 0;
}
.sidebar-nav::-webkit-scrollbar,.side-nav::-webkit-scrollbar{width:3px}
.sidebar-nav::-webkit-scrollbar-thumb,.side-nav::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:99px}

.sidebar-section{margin-bottom:6px}
.sidebar-section-label,.side-section{
  font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-4);padding:12px 10px 4px;line-height:1;font-weight:600;
}

.nav-item{
  display:flex;align-items:center;gap:11px;padding:8px 12px;border-radius:11px;
  font-size:13px;font-weight:500;color:var(--ink-2);
  transition:all var(--dur-fast) var(--ease-out);
  cursor:pointer;position:relative;
  background:transparent;border:none;width:100%;text-align:left;
  white-space:nowrap;
}
.nav-item:hover:not(.active){
  background:rgba(249,115,22,.08);color:var(--ink-1);transform:translateX(2px);
}
.nav-item.active{
  background:linear-gradient(135deg,#fff 0%, var(--orange-soft) 100%);
  color:var(--orange-deep);font-weight:600;
  box-shadow:0 2px 8px rgba(249,115,22,.12), inset 0 0 0 1px rgba(249,115,22,.15);
}
.nav-item.active::before{
  content:'';position:absolute;left:-14px;top:25%;bottom:25%;width:3px;
  background:var(--orange);border-radius:0 3px 3px 0;
}
.nav-item-icon{
  width:18px;height:18px;display:grid;place-items:center;
  font-size:13px;opacity:.85;flex-shrink:0;
}
.nav-item.active .nav-item-icon{opacity:1;color:var(--orange)}
.nav-item-label{flex:1;overflow:hidden;text-overflow:ellipsis}
.nav-badge{
  margin-left:auto;background:var(--orange);color:#fff;font-size:9px;font-weight:700;
  padding:2px 6px;border-radius:99px;min-width:16px;text-align:center;
  letter-spacing:.03em;
}
.nav-item.active .nav-badge{box-shadow:0 2px 4px rgba(249,115,22,.35)}

/* Sidebar footer — mascot 자리 */
.sidebar-footer{
  border-top:1px solid var(--line-1);padding:12px 4px 4px;flex-shrink:0;
  display:flex;flex-direction:column;gap:6px;
}
.side-mascot{
  padding:14px;border-radius:16px;
  background:linear-gradient(135deg, #FFF9F0 0%, var(--sunflower-soft) 100%);
  border:1px solid var(--sunflower-soft);
  display:flex;align-items:center;gap:10px;position:relative;overflow:hidden;
  cursor:pointer;transition:all var(--dur-fast) var(--ease-out);
}
.side-mascot:hover{transform:translateY(-2px);box-shadow:var(--sh-2)}
.side-mascot::before{
  content:'';position:absolute;top:-20px;right:-20px;width:60px;height:60px;
  background:radial-gradient(circle,rgba(245,200,66,.35) 0%,transparent 70%);
  pointer-events:none;
}
.side-mascot-avatar{
  width:38px;height:38px;flex-shrink:0;position:relative;z-index:1;
  animation:sproutSway 3.5s ease-in-out infinite;
}
.side-mascot-txt{font-size:11px;color:var(--ink-2);line-height:1.4;position:relative;z-index:1;flex:1;min-width:0}
.side-mascot-txt strong{color:var(--ink-1);font-weight:600;display:block;font-size:12px;margin-bottom:1px}

.sidebar-collapse-btn{
  display:flex;align-items:center;gap:10px;padding:6px 10px;border-radius:8px;
  color:var(--ink-3);font-size:11px;cursor:pointer;
  transition:all var(--dur-fast);background:transparent;border:none;width:100%;
}
.sidebar-collapse-btn:hover{background:var(--cream-2);color:var(--ink-1)}

.sidebar-user{
  display:flex;align-items:center;gap:10px;padding:6px 10px;border-radius:10px;
  cursor:pointer;transition:background var(--dur-fast);
}
.sidebar-user:hover{background:var(--cream-2)}
.sidebar-avatar{
  width:30px;height:30px;border-radius:50%;
  background:linear-gradient(135deg,var(--peach),var(--orange));
  color:#fff;font-weight:700;font-size:12px;display:grid;place-items:center;flex-shrink:0;
}
.sidebar-user-info{flex:1;min-width:0;overflow:hidden}
.sidebar-user-name{font-size:12.5px;font-weight:600;color:var(--ink-1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sidebar-user-role{font-size:10px;color:var(--ink-3);white-space:nowrap;margin-top:1px}

/* Mobile overlay */
.sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(58,39,24,.4);backdrop-filter:blur(2px);z-index:39}
@media (max-width:768px){
  .sidebar{position:fixed;left:-100%;transition:left var(--dur-slow) var(--ease-out);z-index:40}
  .sidebar.mobile-open{left:0}
  .sidebar-overlay.mobile-open{display:block}
}

/* ═══════════════════════════════════════════════════════════════
   § 6. TOPBAR
   ═══════════════════════════════════════════════════════════════ */
.topbar,.top{
  height:var(--topbar-h);padding:0 var(--content-pad);
  display:flex;align-items:center;gap:14px;
  background:rgba(255,249,240,.85);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line-1);
  position:sticky;top:0;z-index:30;
}
.topbar-breadcrumb,.top-crumbs{
  display:flex;align-items:center;gap:10px;flex:1;min-width:0;
}
.topbar-breadcrumb-home,.top-crumbs .c-home{color:var(--ink-3);font-size:14px}
.topbar-breadcrumb-sep,.top-crumbs i.fa-chevron-right{font-size:9px;color:var(--ink-4)}
.topbar-breadcrumb-current,.top-crumbs .c-cur{
  font-family:var(--serif);font-style:italic;color:var(--ink-1);
  font-size:19px;font-weight:400;letter-spacing:-.01em;
  font-variation-settings:"opsz" 144;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.topbar-actions,.top-actions{display:flex;align-items:center;gap:8px;flex-shrink:0}

.search-bar,.top-search{
  display:flex;align-items:center;gap:10px;padding:8px 14px;
  background:var(--paper);border:1px solid var(--line-1);border-radius:99px;
  min-width:220px;color:var(--ink-3);cursor:pointer;
  transition:all var(--dur-fast) var(--ease-out);font-size:13px;
}
.search-bar:hover,.top-search:hover{border-color:var(--orange);box-shadow:0 2px 8px rgba(249,115,22,.1)}
.search-bar i,.top-search i{font-size:12px}
.search-bar-text{flex:1}
.search-bar-kbd kbd,.top-search kbd{
  font-family:var(--mono);font-size:10px;background:var(--cream-2);padding:1px 6px;
  border-radius:5px;border:1px solid var(--line-1);color:var(--ink-3);
}

/* Season indicator */
.top-season{
  display:flex;align-items:center;gap:6px;padding:6px 12px;border-radius:99px;
  background:linear-gradient(135deg,var(--season-soft),#fff);
  border:1px solid var(--season-soft);
  font-size:11.5px;font-weight:500;color:var(--ink-2);
}
.top-season .sun{display:inline-block;font-size:14px;animation:sunPulse 6s ease-in-out infinite}

/* Live indicator (topbar) */
.live-indicator{
  display:flex;align-items:center;gap:6px;font-size:10.5px;font-weight:600;letter-spacing:.04em;
  color:var(--sage-deep);padding:4px 10px;background:var(--sage-soft);border-radius:99px;
  border:1px solid var(--sage-soft);
}
.live-dot{width:6px;height:6px;border-radius:50%;background:var(--sage);animation:livePulse 2.4s ease-in-out infinite}
@keyframes livePulse{
  0%,100%{box-shadow:0 0 0 0 rgba(127,162,133,.7)}
  50%{box-shadow:0 0 0 5px rgba(127,162,133,0)}
}

.topbar-icon-btn,.top-icon{
  width:36px;height:36px;border-radius:11px;
  background:var(--paper);border:1px solid var(--line-1);
  display:grid;place-items:center;color:var(--ink-2);
  transition:all var(--dur-fast) var(--ease-out);position:relative;cursor:pointer;font-size:14px;
}
.topbar-icon-btn:hover,.top-icon:hover{border-color:var(--orange);color:var(--orange);transform:translateY(-1px)}
.topbar-notif-dot,.notif-dot{
  position:absolute;top:8px;right:9px;width:7px;height:7px;border-radius:50%;
  background:var(--orange);border:2px solid var(--paper);
}

/* ═══════════════════════════════════════════════════════════════
   § 7. PAGE HEADER
   ═══════════════════════════════════════════════════════════════ */
.page-header,.page-head{
  display:flex;justify-content:space-between;align-items:flex-end;gap:20px;
  margin-bottom:28px;flex-wrap:wrap;
}
.page-header-left,.page-head-left{display:flex;align-items:center;gap:16px;min-width:0}
.page-icon{
  width:52px;height:52px;border-radius:14px;
  background:linear-gradient(135deg,var(--orange-soft),var(--sunflower-soft));
  color:var(--orange);
  display:grid;place-items:center;font-size:22px;flex-shrink:0;
  box-shadow:0 2px 8px rgba(249,115,22,.15);
}
.page-title,.page-head h1{
  font-family:var(--serif);font-weight:400;font-size:38px;line-height:1.05;letter-spacing:-.028em;
  color:var(--ink-1);font-variation-settings:"opsz" 144;
}
.page-title em, .page-head h1 em{font-style:italic;color:var(--orange)}
.page-desc,.page-head p{font-size:13.5px;color:var(--ink-3);margin-top:4px;line-height:1.5}
.page-header-actions,.page-head-actions{display:flex;gap:8px;flex-wrap:wrap}

/* Accent variants for page icon */
.page-icon.accent-e,.page-icon.accent-emerald{background:linear-gradient(135deg,var(--sage-soft),#E8F1DC);color:var(--sage-deep)}
.page-icon.accent-v,.page-icon.accent-violet{background:linear-gradient(135deg,var(--plum-soft),#F5EDF8);color:var(--plum-deep)}
.page-icon.accent-a,.page-icon.accent-amber{background:linear-gradient(135deg,var(--sunflower-soft),#FCF3D1);color:#7A5820}
.page-icon.accent-c,.page-icon.accent-cyan{background:linear-gradient(135deg,var(--sky-soft),#E8F3F9);color:var(--sky-deep)}
.page-icon.accent-s,.page-icon.accent-sky{background:linear-gradient(135deg,var(--sky-soft),#E8F3F9);color:var(--sky-deep)}
.page-icon.accent-rose{background:linear-gradient(135deg,var(--rose-soft),#FBEBE9);color:var(--rose-deep)}
.page-icon.accent-blue,.page-icon.accent-indigo{background:linear-gradient(135deg,var(--sky-soft),#E8F3F9);color:var(--sky-deep)}

/* ═══════════════════════════════════════════════════════════════
   § 8. HERO SECTION (dashboard)
   ═══════════════════════════════════════════════════════════════ */
.hero-section{
  position:relative;overflow:hidden;border-radius:var(--r-2xl);
  background:linear-gradient(135deg,#fff 0%, var(--sunflower-soft) 60%, var(--peach-soft) 100%);
  border:1px solid var(--line-1);
  padding:36px 40px;margin-bottom:24px;box-shadow:var(--sh-2);
}
.hero-section::before{
  content:'';position:absolute;top:-80px;right:-80px;width:280px;height:280px;
  background:radial-gradient(circle,rgba(245,200,66,.4) 0%,transparent 70%);
  opacity:.7;pointer-events:none;
}
.hero-section::after{
  content:'';position:absolute;bottom:-40px;left:-40px;width:180px;height:180px;
  background:radial-gradient(circle,rgba(255,193,182,.4) 0%,transparent 70%);
  pointer-events:none;
}
.hero-content{position:relative;z-index:1}
.hero-greeting{
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--orange-deep);font-weight:600;margin-bottom:10px;
  display:inline-flex;align-items:center;gap:8px;
}
.hero-title{
  font-family:var(--serif);font-weight:400;font-size:36px;line-height:1.15;letter-spacing:-.025em;
  color:var(--ink-1);margin-bottom:6px;font-variation-settings:"opsz" 144;max-width:640px;
}
.hero-title em{font-style:italic;color:var(--orange)}
.hero-subtitle{
  font-size:14px;color:var(--ink-2);display:flex;align-items:center;gap:14px;
  margin-bottom:24px;flex-wrap:wrap;
}
.hero-refresh-btn{
  display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:99px;
  background:rgba(255,255,255,.6);border:1px solid var(--line-2);color:var(--ink-2);
  font-size:11.5px;font-weight:500;cursor:pointer;transition:all var(--dur-fast);
}
.hero-refresh-btn:hover{background:#fff;border-color:var(--orange);color:var(--orange-deep)}
.hero-stats{display:flex;gap:32px;flex-wrap:wrap}
.hero-stat{cursor:pointer;transition:transform var(--dur-fast);padding:4px 0}
.hero-stat:hover{transform:translateY(-2px)}
.hero-stat-value{
  font-family:var(--serif);font-size:32px;font-weight:400;letter-spacing:-.03em;
  line-height:1;color:var(--ink-1);font-variation-settings:"opsz" 144;
}
.hero-stat-label{font-family:var(--mono);font-size:10px;color:var(--ink-3);letter-spacing:.1em;margin-top:5px;text-transform:uppercase}
.hero-divider{width:1px;background:var(--line-2);align-self:stretch;margin:0 4px}

/* ═══════════════════════════════════════════════════════════════
   § 9. BUTTONS
   ═══════════════════════════════════════════════════════════════ */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 18px;border-radius:12px;
  font-size:13.5px;font-weight:600;letter-spacing:-.005em;
  transition:all var(--dur-fast) var(--ease-out);
  cursor:pointer;white-space:nowrap;line-height:1;
  border:1px solid transparent;
}
.btn i{font-size:12px}
.btn:active{transform:scale(.97)}
.btn:disabled{opacity:.5;cursor:not-allowed}

.btn-primary{background:var(--ink-1);color:#fff;box-shadow:0 2px 8px rgba(58,39,24,.2)}
.btn-primary:hover:not(:disabled){background:#000;transform:translateY(-1px);box-shadow:0 4px 14px rgba(58,39,24,.3)}

.btn-orange,.btn-brand{background:var(--orange);color:#fff;box-shadow:var(--sh-orange)}
.btn-orange:hover:not(:disabled),.btn-brand:hover:not(:disabled){background:#EA6410;transform:translateY(-1px);box-shadow:0 8px 24px rgba(249,115,22,.4)}

.btn-secondary,.btn-outline{background:var(--paper);color:var(--ink-1);border:1px solid var(--line-2)}
.btn-secondary:hover:not(:disabled),.btn-outline:hover:not(:disabled){border-color:var(--orange);color:var(--orange-deep);background:var(--orange-soft)}

.btn-ghost{background:transparent;color:var(--ink-2)}
.btn-ghost:hover:not(:disabled){background:var(--cream-2);color:var(--ink-1)}

.btn-success{background:var(--sage);color:#fff}
.btn-success:hover:not(:disabled){background:#6B8E71;box-shadow:var(--sh-sage)}

.btn-danger{background:var(--rose);color:#fff}
.btn-danger:hover:not(:disabled){background:#D26B6B}

.btn-sage{background:var(--sage);color:#fff}
.btn-plum{background:var(--plum);color:#fff}
.btn-plum:hover:not(:disabled){background:#9377BE;box-shadow:var(--sh-plum)}

.btn-xs{padding:4px 10px;font-size:11px;border-radius:8px}
.btn-sm{padding:7px 14px;font-size:12.5px;border-radius:10px}
.btn-lg{padding:14px 24px;font-size:14.5px;border-radius:16px}
.btn-xl{padding:16px 28px;font-size:15px;border-radius:16px}
.btn-icon{padding:0;width:36px;height:36px;justify-content:center}
.btn-icon.btn-sm{width:30px;height:30px}
.btn-icon.btn-lg{width:44px;height:44px}

/* ═══════════════════════════════════════════════════════════════
   § 10. CARD SYSTEM (기존 .card, .panel 오버라이드)
   ═══════════════════════════════════════════════════════════════ */
.card,.panel,.p-card{
  background:var(--paper);border:1px solid var(--line-1);border-radius:var(--r-lg);
  box-shadow:var(--sh-1);
  transition:all var(--dur-normal) var(--ease-out);
}
.card:hover,.p-card:hover{box-shadow:var(--sh-2);transform:translateY(-2px);border-color:var(--line-2)}
.card-hover{cursor:pointer}
.card-warm{background:linear-gradient(135deg,#fff 0%,var(--cream-2) 100%)}

/* Panel head/body */
.panel-header,.card-head,.card-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 22px 10px;gap:14px;
}
.panel-title,.card-title{
  font-family:var(--sans);font-size:14.5px;font-weight:700;color:var(--ink-1);
  letter-spacing:-.01em;display:flex;align-items:center;gap:8px;
}
.panel-subtitle,.card-sub{font-size:12px;color:var(--ink-3);margin-top:2px}
.panel-actions{display:flex;align-items:center;gap:6px}
.panel-body,.card-body{padding:10px 22px 20px}
.panel-body.no-pad{padding:0}
.panel-footer{
  padding:12px 22px;border-top:1px solid var(--line-1);
  background:var(--cream-2);font-size:12px;color:var(--ink-3);
}

/* Gradient card variants */
.card-gradient-orange{background:linear-gradient(135deg,#fff 0%, var(--orange-soft) 100%)}
.card-gradient-sage{background:linear-gradient(135deg,#fff 0%, var(--sage-soft) 100%)}
.card-gradient-peach{background:linear-gradient(135deg,#fff 0%, var(--peach-soft) 100%)}
.card-gradient-sky{background:linear-gradient(135deg,#fff 0%, var(--sky-soft) 100%)}
.card-gradient-sun{background:linear-gradient(135deg,#fff 0%, var(--sunflower-soft) 100%)}
.card-gradient-plum{background:linear-gradient(135deg,#fff 0%, var(--plum-soft) 100%)}

/* ═══════════════════════════════════════════════════════════════
   § 11. KPI CARDS (기존 .kpi-card 완전 오버라이드)
   ═══════════════════════════════════════════════════════════════ */
.kpi-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:16px;margin-bottom:24px;
}
.kpi-grid-4{grid-template-columns:repeat(4,1fr)}
.kpi-grid-3{grid-template-columns:repeat(3,1fr)}
.kpi-grid-2{grid-template-columns:repeat(2,1fr)}
.kpi-grid-5{grid-template-columns:repeat(5,1fr)}
.kpi-grid-6{grid-template-columns:repeat(6,1fr)}

.kpi,.kpi-card{
  background:var(--paper) !important;border:1px solid var(--line-1) !important;
  border-radius:var(--r-xl) !important;padding:20px 22px !important;
  position:relative !important;overflow:hidden !important;
  box-shadow:var(--sh-1) !important;
  transition:all var(--dur-normal) var(--ease-out) !important;
}
.kpi:hover,.kpi-card:hover{transform:translateY(-3px);box-shadow:var(--sh-2)}

.kpi::before,.kpi-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:var(--orange);border-radius:var(--r-xl) var(--r-xl) 0 0;
  opacity:.9;
}
.kpi.a-orange::before,.kpi-card.accent-blue::before,.kpi-card.accent-indigo::before{background:var(--orange)}
.kpi.a-sage::before,.kpi-card.accent-emerald::before,.kpi-card.accent-teal::before{background:var(--sage)}
.kpi.a-peach::before,.kpi-card.accent-rose::before{background:var(--peach-deep)}
.kpi.a-sky::before,.kpi-card.accent-cyan::before{background:var(--sky-deep)}
.kpi.a-sun::before,.kpi-card.accent-amber::before,.kpi-card.accent-orange::before{background:var(--sunflower)}
.kpi.a-plum::before,.kpi-card.accent-violet::before{background:var(--plum)}

.kpi-emoji{
  position:absolute;top:14px;right:16px;font-size:24px;opacity:.85;
  animation:kpiFloat 3s ease-in-out infinite;
}
.kpi:nth-child(2n) .kpi-emoji{animation-delay:.5s}
.kpi:nth-child(3n) .kpi-emoji{animation-delay:1s}

/* KPI icon wrap (기존 스타일 재정의) */
.kpi-icon-wrap,.kpi-card-header .kpi-icon-wrap{
  width:36px !important;height:36px !important;border-radius:10px !important;
  display:grid !important;place-items:center !important;
  font-size:16px !important;
  background:var(--orange-soft) !important;color:var(--orange) !important;
  box-shadow:0 2px 6px rgba(249,115,22,.15) !important;
}
.kpi-card.accent-emerald .kpi-icon-wrap,.kpi.a-sage .kpi-icon-wrap{background:var(--sage-soft) !important;color:var(--sage-deep) !important}
.kpi-card.accent-rose .kpi-icon-wrap,.kpi.a-peach .kpi-icon-wrap{background:var(--rose-soft) !important;color:var(--rose-deep) !important}
.kpi-card.accent-amber .kpi-icon-wrap,.kpi.a-sun .kpi-icon-wrap{background:var(--sunflower-soft) !important;color:#7A5820 !important}
.kpi-card.accent-violet .kpi-icon-wrap,.kpi.a-plum .kpi-icon-wrap{background:var(--plum-soft) !important;color:var(--plum-deep) !important}
.kpi-card.accent-cyan .kpi-icon-wrap,.kpi.a-sky .kpi-icon-wrap{background:var(--sky-soft) !important;color:var(--sky-deep) !important}

.kpi-label{
  font-size:11.5px;font-weight:500;color:var(--ink-3);letter-spacing:-.005em;
  margin-bottom:10px;text-transform:none;
}
.kpi-value{
  font-family:var(--serif) !important;font-weight:400 !important;
  font-size:34px !important;color:var(--ink-1) !important;
  letter-spacing:-.035em !important;line-height:1 !important;
  font-variation-settings:"opsz" 144 !important;
}
.kpi-value small{
  font-family:var(--sans) !important;font-size:14px !important;font-weight:600 !important;
  color:var(--ink-3) !important;margin-left:3px !important;letter-spacing:0 !important;
}
.kpi-meta{font-size:11px;color:var(--ink-3);margin-top:6px}

.kpi-trend{
  display:inline-flex !important;align-items:center !important;gap:4px !important;
  padding:3px 9px !important;border-radius:99px !important;
  font-size:10.5px !important;font-weight:600 !important;
  margin-top:12px !important;letter-spacing:.02em !important;
}
.kpi-trend.up{background:var(--sage-soft) !important;color:var(--sage-deep) !important}
.kpi-trend.down{background:var(--peach-soft) !important;color:var(--peach-deep) !important}
.kpi-trend.warn{background:var(--sunflower-soft) !important;color:#7A5820 !important}
.kpi-trend.flat{background:var(--cream-2) !important;color:var(--ink-3) !important}

/* KPI progress */
.kpi-progress,.progress-bar{
  margin-top:12px;height:6px;background:var(--cream-2);border-radius:99px;
  overflow:hidden;position:relative;
}
.kpi-progress-fill,.progress-fill{
  height:100%;border-radius:99px;
  background:linear-gradient(90deg,var(--orange),var(--sunflower));
  transition:width 1s var(--ease-out);
}
.progress-fill.success{background:linear-gradient(90deg,var(--sage),var(--sage-soft))}
.progress-fill.warning{background:linear-gradient(90deg,var(--sunflower),var(--peach))}
.progress-fill.error{background:linear-gradient(90deg,var(--rose),var(--peach-deep))}
.progress-fill.gradient{background:linear-gradient(90deg,var(--orange),var(--plum))}

/* KPI sparkline */
.kpi-spark,.kpi-sparkline-row{display:flex;align-items:flex-end;gap:3px;height:28px;margin-top:12px}
.kpi-spark span,.sparkline-bar{
  flex:1;background:var(--orange);opacity:.25;border-radius:2px 2px 0 0;
  transition:height .6s var(--ease-out);min-height:4px;
}
.kpi-spark span:last-child,.sparkline-bar:last-child{opacity:1}

/* Mini KPI (기존 스타일 오버라이드) */
.mini-kpi,.mini-kpi-card{
  padding:14px 18px !important;
  background:var(--paper) !important;border:1px solid var(--line-1) !important;
  border-radius:var(--r-md) !important;
  display:flex !important;align-items:center !important;gap:12px !important;
  transition:all var(--dur-fast) !important;box-shadow:var(--sh-1) !important;
}
.mini-kpi:hover,.mini-kpi-card:hover{border-color:var(--line-2);box-shadow:var(--sh-2);transform:translateY(-1px)}
.mini-kpi-icon{
  width:32px !important;height:32px !important;border-radius:10px !important;
  display:grid !important;place-items:center !important;font-size:14px !important;
  background:var(--orange-soft) !important;color:var(--orange) !important;
}
.mini-kpi-body{flex:1;min-width:0}
.mini-kpi-value,.mini-kpi-val{
  font-family:var(--serif) !important;font-weight:400 !important;
  font-size:20px !important;color:var(--ink-1) !important;
  letter-spacing:-.025em !important;line-height:1 !important;
  font-variation-settings:"opsz" 144 !important;
}
.mini-kpi-label,.mini-kpi-lbl{
  font-size:11px !important;color:var(--ink-3) !important;
  margin-top:3px !important;font-weight:500 !important;
}

/* ═══════════════════════════════════════════════════════════════
   § 12. BADGES
   ═══════════════════════════════════════════════════════════════ */
.badge,.bdg{
  display:inline-flex;align-items:center;gap:5px;padding:3px 10px;
  border-radius:99px;font-size:11px;font-weight:600;letter-spacing:-.005em;
  white-space:nowrap;vertical-align:middle;line-height:1;
}
.badge-blue,.bdg-orange,.badge-primary{background:var(--orange-soft) !important;color:var(--orange-deep) !important}
.badge-emerald,.bdg-sage,.badge-success{background:var(--sage-soft) !important;color:var(--sage-deep) !important}
.badge-amber,.bdg-sun,.badge-warning{background:var(--sunflower-soft) !important;color:#7A5820 !important}
.badge-rose,.bdg-rose,.badge-danger{background:var(--rose-soft) !important;color:var(--rose-deep) !important}
.badge-violet,.bdg-plum{background:var(--plum-soft) !important;color:var(--plum-deep) !important}
.badge-cyan,.bdg-sky,.badge-info{background:var(--sky-soft) !important;color:var(--sky-deep) !important}
.badge-gray,.bdg-neutral,.badge-neutral{background:var(--cream-2) !important;color:var(--ink-2) !important;border:1px solid var(--line-1) !important}
.badge-sky{background:var(--sky-soft) !important;color:var(--sky-deep) !important}
.badge-orange{background:var(--orange-soft) !important;color:var(--orange-deep) !important}
.badge-teal{background:var(--sage-soft) !important;color:var(--sage-deep) !important}
.bdg-peach{background:var(--peach-soft) !important;color:var(--peach-deep) !important}
.badge-sm{font-size:10px;padding:2px 8px}

/* ═══════════════════════════════════════════════════════════════
   § 13. STUDENT AVATAR — Bloom 자동 팔레트
   ═══════════════════════════════════════════════════════════════ */
.avatar{
  width:40px;height:40px;border-radius:50%;flex-shrink:0;
  display:grid;place-items:center;font-size:16px;font-weight:700;color:#fff;
  position:relative;box-shadow:var(--sh-1);
  transition:transform var(--dur-fast) var(--ease-bounce);
  font-family:var(--sans);
}
.avatar:hover{transform:scale(1.08) rotate(-3deg)}
.avatar-sm{width:30px;height:30px;font-size:13px}
.avatar-lg{width:56px;height:56px;font-size:22px}
.avatar-xl{width:80px;height:80px;font-size:32px}
.avatar-2xl{width:112px;height:112px;font-size:44px}

.avatar.g-1{background:linear-gradient(135deg,#FFD4A3,#F97316)}
.avatar.g-2{background:linear-gradient(135deg,#FFC1B6,#E88787)}
.avatar.g-3{background:linear-gradient(135deg,#D4E5B8,#7FA285)}
.avatar.g-4{background:linear-gradient(135deg,#B8D4E8,#8FB3D1)}
.avatar.g-5{background:linear-gradient(135deg,#F5C842,#D4A657)}
.avatar.g-6{background:linear-gradient(135deg,#EDE4F1,#A88CC9)}
.avatar.g-7{background:linear-gradient(135deg,#FFE8C7,#F5C842)}
.avatar.g-8{background:linear-gradient(135deg,#F9DFDE,#E88787)}

/* Growth stage badge on avatar */
.avatar-stage{
  position:absolute;bottom:-2px;right:-4px;
  width:20px;height:20px;border-radius:50%;background:var(--paper);
  display:grid;place-items:center;font-size:11px;
  border:2px solid var(--paper);box-shadow:var(--sh-1);color:initial;
}
.avatar-lg .avatar-stage{width:24px;height:24px;font-size:13px}
.avatar-xl .avatar-stage{width:30px;height:30px;font-size:16px}

/* Legacy student-avatar override */
.student-avatar,.stud-avatar,.staff-avatar,.crm-avatar,.avatar-blue{
  border-radius:50% !important;color:#fff !important;font-weight:700 !important;
  background:linear-gradient(135deg,var(--peach),var(--orange)) !important;
  box-shadow:var(--sh-1) !important;
}

/* ═══════════════════════════════════════════════════════════════
   § 14. GROWTH STAGE INDICATORS
   ═══════════════════════════════════════════════════════════════ */
.growth{display:inline-flex;align-items:center;gap:5px;font-size:11px;color:var(--ink-2);font-weight:500}
.growth-icon{font-size:13px}
.growth.seed{color:var(--ink-3)}
.growth.sprout{color:var(--sage-deep)}
.growth.bud{color:var(--peach-deep)}
.growth.bloom{color:#7A5820}
.growth.tree{color:var(--plum-deep)}

/* ═══════════════════════════════════════════════════════════════
   § 15. SPROUT AI MESSAGE (새싹이 말풍선)
   ═══════════════════════════════════════════════════════════════ */
.sprout-msg{
  display:flex;align-items:flex-start;gap:14px;
  padding:18px 22px;border-radius:var(--r-xl);
  background:linear-gradient(135deg,#fff 0%, var(--sage-soft) 100%);
  border:1px solid var(--sage-soft);
  position:relative;box-shadow:var(--sh-1);
}
.sprout-msg::before{
  content:'';position:absolute;top:24px;left:-8px;width:16px;height:16px;
  background:#fff;border:1px solid var(--sage-soft);
  transform:rotate(45deg);border-right:none;border-top:none;
}
.sprout-avatar{
  width:52px;height:52px;flex-shrink:0;position:relative;z-index:1;
  animation:sproutSway 3s ease-in-out infinite;
}
.sprout-body{flex:1;min-width:0}
.sprout-name{
  font-size:11px;font-weight:700;color:var(--sage-deep);
  letter-spacing:.06em;text-transform:uppercase;margin-bottom:6px;
  display:flex;align-items:center;gap:6px;
}
.sprout-name::before{
  content:'';width:6px;height:6px;border-radius:50%;background:var(--sage);
  animation:blink 2s ease-in-out infinite;
}
.sprout-text{
  font-family:var(--serif);font-size:17px;line-height:1.5;color:var(--ink-1);
  letter-spacing:-.01em;font-weight:400;
}
.sprout-text em{font-style:italic;color:var(--orange-deep);font-weight:500}
.sprout-text strong{font-weight:600;color:var(--ink-1)}
.sprout-actions{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}

/* Floating sprout button (global) */
.sprout-fab{
  position:fixed;bottom:24px;right:24px;z-index:900;
  width:64px;height:64px;border-radius:50%;
  background:linear-gradient(135deg,#fff 0%, var(--sunflower-soft) 100%);
  border:1px solid var(--sunflower-soft);
  box-shadow:var(--sh-3);cursor:pointer;
  display:grid;place-items:center;
  transition:all var(--dur-fast) var(--ease-bounce);
}
.sprout-fab:hover{transform:scale(1.08) rotate(-6deg);box-shadow:var(--sh-4)}
.sprout-fab svg{width:44px;height:44px;animation:bloomFloat 3s ease-in-out infinite}
.sprout-fab::after{
  content:'';position:absolute;top:-2px;right:-2px;width:12px;height:12px;
  background:var(--sage);border-radius:50%;border:2px solid #fff;
  animation:blink 2s ease-in-out infinite;
}

/* ═══════════════════════════════════════════════════════════════
   § 16. TABLE
   ═══════════════════════════════════════════════════════════════ */
.data-table,.tbl{
  width:100%;border-collapse:separate;border-spacing:0;font-size:13px;
}
.data-table th,.tbl thead th,.table-head th{
  padding:12px 14px !important;text-align:left !important;
  font-family:var(--mono) !important;font-size:10px !important;
  letter-spacing:.14em !important;text-transform:uppercase !important;
  font-weight:500 !important;color:var(--ink-3) !important;
  background:var(--cream-2) !important;border-bottom:1px solid var(--line-1) !important;
  white-space:nowrap;
}
.data-table td,.tbl tbody td,.table-row td{
  padding:12px 14px !important;border-bottom:1px solid var(--line-1) !important;
  vertical-align:middle !important;color:var(--ink-1) !important;font-size:13px !important;
}
.data-table tbody tr,.tbl tbody tr,.table-row{
  transition:background var(--dur-fast) var(--ease-out) !important;
}
.data-table tbody tr:hover,.tbl tbody tr:hover,.table-row:hover{
  background:var(--cream-2) !important;
}
.data-table tbody tr:last-child td,.tbl tbody tr:last-child td{border-bottom:none !important}

.table-wrapper{
  overflow-x:auto;border-radius:var(--r-lg);border:1px solid var(--line-1);
  background:var(--paper);box-shadow:var(--sh-1);
}

/* ═══════════════════════════════════════════════════════════════
   § 17. FORM ELEMENTS
   ═══════════════════════════════════════════════════════════════ */
.input,.select,.textarea,.form-input,.form-select,.form-textarea,.search-input{
  width:100%;padding:10px 14px;
  background:var(--paper);border:1px solid var(--line-2);border-radius:12px;
  font-size:14px;color:var(--ink-1);
  transition:all var(--dur-fast) var(--ease-out);
}
.input:focus,.select:focus,.textarea:focus,
.form-input:focus,.form-select:focus,.form-textarea:focus,
.search-input:focus{
  border-color:var(--orange);
  box-shadow:0 0 0 3px rgba(249,115,22,.12);
}
.input::placeholder,.textarea::placeholder{color:var(--ink-4)}
.input-sm{padding:7px 12px;font-size:13px;border-radius:10px}
.textarea{min-height:88px;resize:vertical;line-height:1.55}

.form-label{font-size:12.5px;font-weight:600;color:var(--ink-2);margin-bottom:4px;display:block}
.form-label .required{color:var(--rose);margin-left:2px}
.form-hint{font-size:11.5px;color:var(--ink-3);margin-top:4px}
.form-error{font-size:11.5px;color:var(--rose-deep);margin-top:4px}
.form-group{margin-bottom:16px}

.input-group{position:relative}
.input-group i.input-icon{
  position:absolute;left:14px;top:50%;transform:translateY(-50%);
  color:var(--ink-3);font-size:13px;pointer-events:none;
}
.input-group .input{padding-left:38px}

/* Toggle */
.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(--line-2);border-radius:99px;transition:background var(--dur-normal)}
.toggle input:checked + .toggle-track{background:var(--orange)}
.toggle-thumb{
  position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;
  background:#fff;transition:transform var(--dur-normal) var(--ease-bounce);
  box-shadow:var(--sh-1);
}
.toggle input:checked ~ .toggle-thumb{transform:translateX(18px)}

/* ═══════════════════════════════════════════════════════════════
   § 18. TABS
   ═══════════════════════════════════════════════════════════════ */
.tabs,.tab-bar{
  display:flex;gap:2px;border-bottom:1px solid var(--line-1);
  margin-bottom:20px;overflow-x:auto;scrollbar-width:none;
}
.tabs::-webkit-scrollbar,.tab-bar::-webkit-scrollbar{display:none}
.tab-item,.tab-btn{
  padding:10px 16px;padding-bottom:12px;border:none;background:transparent;
  font-size:13px;font-weight:500;color:var(--ink-3);cursor:pointer;
  position:relative;white-space:nowrap;transition:color var(--dur-fast);
  border-bottom:2px solid transparent;
}
.tab-item:hover,.tab-btn:hover{color:var(--ink-1)}
.tab-item.active,.tab-btn.active{color:var(--orange-deep);font-weight:700;border-bottom-color:var(--orange)}
.tab-panel{display:none}
.tab-panel.active{display:block}

/* Pill tabs */
.tabs-pill{
  display:inline-flex;gap:2px;padding:3px;background:var(--cream-2);
  border-radius:12px;border:1px solid var(--line-1);
}
.tab-pill{
  padding:6px 14px;border-radius:9px;font-size:12.5px;font-weight:500;
  color:var(--ink-3);cursor:pointer;border:none;background:transparent;
  white-space:nowrap;transition:all var(--dur-fast);
}
.tab-pill.active{background:#fff;color:var(--ink-1);font-weight:600;box-shadow:var(--sh-1)}

/* ═══════════════════════════════════════════════════════════════
   § 19. MODAL
   ═══════════════════════════════════════════════════════════════ */
.modal-backdrop{
  position:fixed;inset:0;background:rgba(58,39,24,.4);backdrop-filter:blur(4px);
  z-index:1000;display:flex;align-items:center;justify-content:center;
  padding:16px;animation:fadeIn .2s ease forwards;
}
.modal{
  background:var(--paper);border:1px solid var(--line-1);
  border-radius:var(--r-2xl);box-shadow:var(--sh-4);
  width:100%;max-width:540px;max-height:90vh;overflow-y:auto;padding:28px;
  animation:modalIn .3s var(--ease-bounce) forwards;
}
.modal-lg{max-width:740px}
.modal-sm{max-width:420px}
@keyframes modalIn{
  from{opacity:0;transform:scale(.94) translateY(12px)}
  to{opacity:1;transform:scale(1) translateY(0)}
}
.modal-header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:22px}
.modal-title{font-family:var(--serif);font-size:24px;font-weight:400;letter-spacing:-.02em;color:var(--ink-1);font-variation-settings:"opsz" 144}
.modal-title em{font-style:italic;color:var(--orange)}
.modal-subtitle{font-size:13px;color:var(--ink-3);margin-top:4px}
.modal-close{
  width:32px;height:32px;border-radius:10px;display:grid;place-items:center;
  background:var(--cream-2);border:none;color:var(--ink-3);font-size:15px;cursor:pointer;
  transition:all var(--dur-fast);flex-shrink:0;
}
.modal-close:hover{background:var(--rose-soft);color:var(--rose-deep)}
.modal-body{margin-bottom:22px}
.modal-footer{display:flex;justify-content:flex-end;gap:10px;padding-top:18px;border-top:1px solid var(--line-1)}

/* ═══════════════════════════════════════════════════════════════
   § 20. COMMAND PALETTE (⌘K)
   ═══════════════════════════════════════════════════════════════ */
.cmd-backdrop{
  position:fixed;inset:0;background:rgba(58,39,24,.35);backdrop-filter:blur(6px);
  z-index:5000;display:flex;align-items:flex-start;justify-content:center;padding-top:12vh;
}
.cmd-palette{
  background:var(--paper);border:1px solid var(--line-1);
  border-radius:var(--r-2xl);box-shadow:var(--sh-4);
  width:100%;max-width:620px;overflow:hidden;
  animation:cmdIn .22s var(--ease-bounce) forwards;
}
@keyframes cmdIn{
  from{opacity:0;transform:scale(.96) translateY(-10px)}
  to{opacity:1;transform:scale(1) translateY(0)}
}
.cmd-input-wrap{
  display:flex;align-items:center;gap:12px;padding:18px 22px;
  border-bottom:1px solid var(--line-1);
}
.cmd-input-icon{font-size:16px;color:var(--orange);flex-shrink:0}
.cmd-input{
  flex:1;border:none;background:transparent;font-size:16px;color:var(--ink-1);outline:none;
  font-family:var(--sans);
}
.cmd-input::placeholder{color:var(--ink-4)}
.cmd-list{max-height:400px;overflow-y:auto;padding:8px}
.cmd-group-label,.cmd-section-label{
  padding:8px 12px 4px;font-family:var(--mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-4);font-weight:600;
}
.cmd-item{
  display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:11px;
  cursor:pointer;transition:background var(--dur-fast);font-size:13.5px;color:var(--ink-1);
}
.cmd-item:hover,.cmd-item.active{background:var(--orange-soft);color:var(--orange-deep)}
.cmd-item-icon{
  width:30px;height:30px;border-radius:9px;display:grid;place-items:center;
  font-size:13px;flex-shrink:0;background:var(--cream-2);color:var(--ink-2);
}
.cmd-item.active .cmd-item-icon{background:var(--orange);color:#fff}
.cmd-item-label,.cmd-item-title{flex:1;font-weight:500}
.cmd-item-sub,.cmd-item-desc{font-size:11.5px;color:var(--ink-3)}
.cmd-item-kbd,.cmd-shortcut,.cmd-highlight{
  font-family:var(--mono);font-size:10px;padding:1px 6px;border-radius:5px;
  background:var(--cream-2);border:1px solid var(--line-1);color:var(--ink-3);
}
.cmd-footer{
  display:flex;align-items:center;gap:16px;padding:12px 22px;
  border-top:1px solid var(--line-1);background:var(--cream-2);
  font-size:11px;color:var(--ink-3);
}
.cmd-footer kbd{
  font-family:var(--mono);padding:1px 6px;background:#fff;
  border:1px solid var(--line-1);border-radius:5px;font-size:10px;color:var(--ink-2);
}
.cmd-empty{padding:32px;text-align:center;font-size:13px;color:var(--ink-3)}

/* Sprout AI response in cmd */
.cmd-sprout-response{
  padding:14px 18px;margin:8px;border-radius:14px;
  background:linear-gradient(135deg,#fff, var(--sage-soft));
  border:1px solid var(--sage-soft);
  display:flex;gap:12px;align-items:flex-start;
}
.cmd-sprout-response .avatar-sm{width:36px;height:36px;flex-shrink:0;background:transparent;box-shadow:none}
.cmd-sprout-response .msg{font-family:var(--serif);font-size:15px;line-height:1.5;color:var(--ink-1)}

/* ═══════════════════════════════════════════════════════════════
   § 21. DROPDOWN
   ═══════════════════════════════════════════════════════════════ */
.dropdown{position:relative;display:inline-block}
.dropdown-menu{
  position:absolute;top:calc(100% + 6px);right:0;min-width:200px;
  background:var(--paper);border:1px solid var(--line-1);border-radius:14px;
  box-shadow:var(--sh-3);z-index:1000;overflow:hidden;padding:6px;
  animation:dropIn .18s var(--ease-bounce) forwards;
}
@keyframes dropIn{
  from{opacity:0;transform:translateY(-6px) scale(.97)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
.dropdown-item{
  display:flex;align-items:center;gap:10px;padding:8px 12px;width:100%;
  font-size:13px;color:var(--ink-1);border:none;background:transparent;cursor:pointer;
  border-radius:9px;transition:background var(--dur-fast);text-align:left;
}
.dropdown-item:hover{background:var(--cream-2)}
.dropdown-item.danger{color:var(--rose-deep)}
.dropdown-item.danger:hover{background:var(--rose-soft)}
.dropdown-divider{height:1px;background:var(--line-1);margin:4px 0}
.dropdown-header{padding:8px 12px;font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-4);font-weight:600}

/* ═══════════════════════════════════════════════════════════════
   § 22. TOAST
   ═══════════════════════════════════════════════════════════════ */
#toast-root,#bloom-toast-root{
  position:fixed;top:80px;right:24px;z-index:10000;
  display:flex;flex-direction:column;gap:8px;max-width:380px;
}
.toast{
  display:flex;align-items:flex-start;gap:12px;padding:14px 18px;
  background:#fff;border:1px solid var(--line-1);border-radius:16px;
  box-shadow:var(--sh-3);border-left:4px solid var(--orange);
  animation:slideInRight .3s var(--ease-bounce) forwards;position:relative;
}
.toast.success{border-left-color:var(--sage)}
.toast.error{border-left-color:var(--rose)}
.toast.warning{border-left-color:var(--sunflower)}
.toast.info{border-left-color:var(--sky-deep)}
.toast-icon{font-size:16px;flex-shrink:0;margin-top:1px}
.toast-body{flex:1;min-width:0}
.toast-title{font-size:13.5px;font-weight:700;color:var(--ink-1);line-height:1.3}
.toast-msg{font-size:12px;color:var(--ink-2);margin-top:2px;line-height:1.4}
.toast-close{
  background:transparent;border:none;color:var(--ink-4);cursor:pointer;
  font-size:14px;padding:0;line-height:1;flex-shrink:0;
}
.toast-close:hover{color:var(--ink-2)}
@keyframes slideInRight{
  from{opacity:0;transform:translateX(30px)}
  to{opacity:1;transform:translateX(0)}
}

/* ═══════════════════════════════════════════════════════════════
   § 23. SECTION HEADERS
   ═══════════════════════════════════════════════════════════════ */
.sec-hd,.section-heading{
  display:flex;align-items:baseline;justify-content:space-between;
  margin:28px 0 16px;padding-bottom:12px;border-bottom:1px solid var(--line-1);gap:14px;
}
.sec-hd-left,.section-heading-left{flex:1;min-width:0}
.sec-hd-right,.section-heading-right{display:flex;align-items:center;gap:8px;flex-shrink:0}
.sec-title,.section-title{
  font-family:var(--serif);font-weight:400;font-size:24px;letter-spacing:-.02em;
  color:var(--ink-1);font-variation-settings:"opsz" 144;line-height:1.1;
}
.sec-title em{font-style:italic;color:var(--orange)}
.sec-desc,.section-desc{font-size:12.5px;color:var(--ink-3);margin-top:2px}

/* ═══════════════════════════════════════════════════════════════
   § 24. STUDENT/CLASS/STAFF CARDS
   ═══════════════════════════════════════════════════════════════ */
.student-grid,.staff-grid,.class-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;
}
.student-card,.class-card,.staff-card,.exam-card,.crm-card{
  background:var(--paper) !important;border:1px solid var(--line-1) !important;
  border-radius:var(--r-xl) !important;padding:20px !important;
  box-shadow:var(--sh-1) !important;
  transition:all var(--dur-normal) var(--ease-out) !important;
  cursor:pointer !important;position:relative !important;overflow:hidden !important;
}
.student-card:hover,.class-card:hover,.staff-card:hover,.exam-card:hover,.crm-card:hover{
  transform:translateY(-3px) !important;box-shadow:var(--sh-2) !important;
  border-color:var(--line-2) !important;
}
.student-name,.stud-name,.staff-name,.class-name,.exam-card-title,.class-card-title{
  font-family:var(--serif) !important;font-size:17px !important;
  font-weight:500 !important;letter-spacing:-.01em !important;color:var(--ink-1) !important;
  font-variation-settings:"opsz" 144 !important;
}
.student-meta,.stud-school,.stud-meta,.staff-role,.class-teacher{
  font-size:12px !important;color:var(--ink-3) !important;margin-top:2px !important;
}

/* ═══════════════════════════════════════════════════════════════
   § 25. QUICK ACTIONS (QA)
   ═══════════════════════════════════════════════════════════════ */
.qa-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));
  gap:12px;margin-bottom:24px;
}
.qa-item{
  display:flex;flex-direction:column;align-items:center;gap:10px;
  padding:18px 14px;border-radius:var(--r-lg);
  background:var(--paper);border:1px solid var(--line-1);
  cursor:pointer;transition:all var(--dur-normal) var(--ease-out);
  font-size:12.5px;font-weight:600;color:var(--ink-2);text-align:center;
  box-shadow:var(--sh-1);
}
.qa-item:hover{
  border-color:var(--orange);background:linear-gradient(135deg,#fff,var(--orange-soft));
  color:var(--orange-deep);transform:translateY(-3px);box-shadow:var(--sh-2);
}
.qa-item-icon{
  width:44px;height:44px;border-radius:14px;display:grid;place-items:center;
  font-size:18px;transition:all var(--dur-fast);
  background:var(--orange-soft);color:var(--orange);
}
.qa-item:hover .qa-item-icon{transform:scale(1.1)}

.qa-item-e .qa-item-icon{background:var(--sage-soft);color:var(--sage-deep)}
.qa-item-v .qa-item-icon{background:var(--plum-soft);color:var(--plum-deep)}
.qa-item-s .qa-item-icon{background:var(--sky-soft);color:var(--sky-deep)}
.qa-item-a .qa-item-icon{background:var(--sunflower-soft);color:#7A5820}
.qa-item-c .qa-item-icon{background:var(--sky-soft);color:var(--sky-deep)}
.qa-item-p .qa-item-icon{background:var(--peach-soft);color:var(--peach-deep)}

/* ═══════════════════════════════════════════════════════════════
   § 26. INSIGHT / ALERT CARDS
   ═══════════════════════════════════════════════════════════════ */
.insight-card,.alert{
  padding:14px 18px;border-radius:14px;border:1px solid;margin-bottom:8px;
  display:flex;align-items:flex-start;gap:12px;
  transition:box-shadow var(--dur-fast);
}
.insight-card.critical,.alert-danger{background:var(--rose-soft);border-color:var(--rose-soft);color:var(--rose-deep)}
.insight-card.warning,.alert-warning{background:var(--sunflower-soft);border-color:var(--sunflower-soft);color:#7A5820}
.insight-card.info,.alert-info{background:var(--sky-soft);border-color:var(--sky-soft);color:var(--sky-deep)}
.insight-card.success,.alert-success{background:var(--sage-soft);border-color:var(--sage-soft);color:var(--sage-deep)}
.insight-icon,.alert-icon{font-size:15px;flex-shrink:0;margin-top:2px}
.insight-body,.alert-body{flex:1;min-width:0}
.insight-label{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.06em}
.insight-title,.alert-title{font-size:13px;font-weight:700;color:var(--ink-1);margin:2px 0}
.insight-msg,.alert-text{font-size:12px;color:var(--ink-2);line-height:1.5}
.insight-date{font-size:10.5px;color:var(--ink-3);margin-top:4px;font-family:var(--mono)}

/* ═══════════════════════════════════════════════════════════════
   § 27. TIMELINE / KANBAN / MISC LEGACY BRIDGE
   ═══════════════════════════════════════════════════════════════ */
.timeline-dot{background:var(--orange) !important;box-shadow:0 0 0 2px var(--orange) !important;border-color:#fff !important}
.timeline-line{background:var(--line-1) !important}
.timeline-time{font-family:var(--mono) !important;color:var(--ink-3) !important;font-size:10.5px !important}
.timeline-title{font-size:13px !important;font-weight:600 !important;color:var(--ink-1) !important}
.timeline-desc{font-size:12px !important;color:var(--ink-2) !important}

/* Kanban */
.kanban-board,.kb-cols{display:flex;gap:14px;overflow-x:auto;padding-bottom:14px}
.kanban-col,.kb-col{
  min-width:260px;width:260px;background:var(--cream-2);
  border:1px solid var(--line-1);border-radius:var(--r-lg);flex-shrink:0;
}
.kanban-col-header,.kb-col-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 16px 10px;border-bottom:1px solid var(--line-1);
}
.kanban-col-title,.kb-col-title{font-size:13px;font-weight:700;color:var(--ink-1)}
.kanban-col-count,.kb-col-count{
  font-size:10px;font-weight:700;padding:2px 8px;background:#fff;
  border:1px solid var(--line-1);border-radius:99px;color:var(--ink-2);
}
.kanban-cards,.kb-cards{padding:10px;display:flex;flex-direction:column;gap:8px;min-height:100px}
.kanban-card,.task-card,.kb-card{
  background:#fff !important;border:1px solid var(--line-1) !important;
  border-radius:var(--r-md) !important;padding:12px 14px !important;
  cursor:grab !important;transition:all var(--dur-fast) !important;
}
.kanban-card:hover,.task-card:hover,.kb-card:hover{
  box-shadow:var(--sh-2) !important;border-color:var(--line-2) !important;
}

/* ═══════════════════════════════════════════════════════════════
   § 28. ANIMATIONS
   ═══════════════════════════════════════════════════════════════ */
@keyframes bloomFloat{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-3px) rotate(2deg)}}
@keyframes sproutSway{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}
@keyframes kpiFloat{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-4px) rotate(-3deg)}}
@keyframes sunPulse{0%,100%{transform:rotate(0deg);opacity:.9}50%{transform:rotate(180deg);opacity:1}}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.4}}
@keyframes fadeSlideUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

/* Page enter stagger */
.content > *,.content-area > *{animation:fadeSlideUp 400ms var(--ease-out) both}
.content > *:nth-child(1),.content-area > *:nth-child(1){animation-delay:0ms}
.content > *:nth-child(2),.content-area > *:nth-child(2){animation-delay:60ms}
.content > *:nth-child(3),.content-area > *:nth-child(3){animation-delay:120ms}
.content > *:nth-child(4),.content-area > *:nth-child(4){animation-delay:180ms}
.content > *:nth-child(5),.content-area > *:nth-child(5){animation-delay:240ms}
.content > *:nth-child(n+6),.content-area > *:nth-child(n+6){animation-delay:300ms}

.kpi-grid .kpi,.kpi-grid .kpi-card{animation:fadeSlideUp 500ms var(--ease-out) both}
.kpi-grid .kpi:nth-child(1),.kpi-grid .kpi-card:nth-child(1){animation-delay:80ms}
.kpi-grid .kpi:nth-child(2),.kpi-grid .kpi-card:nth-child(2){animation-delay:140ms}
.kpi-grid .kpi:nth-child(3),.kpi-grid .kpi-card:nth-child(3){animation-delay:200ms}
.kpi-grid .kpi:nth-child(4),.kpi-grid .kpi-card:nth-child(4){animation-delay:260ms}
.kpi-grid .kpi:nth-child(5),.kpi-grid .kpi-card:nth-child(5){animation-delay:320ms}
.kpi-grid .kpi:nth-child(6),.kpi-grid .kpi-card:nth-child(6){animation-delay:380ms}

.anim-slide-in{animation:fadeSlideUp 400ms var(--ease-out) both}
.anim-in{animation:fadeSlideUp 300ms var(--ease-out) both}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:0.01ms!important;animation-iteration-count:1!important;
    transition-duration:0.01ms!important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   § 29. UTILITY (Tailwind subset · Bloom edition)
   ═══════════════════════════════════════════════════════════════ */
.flex{display:flex}.inline-flex{display:inline-flex}
.grid{display:grid}.block{display:block}.inline-block{display:inline-block}
.hidden{display:none}
.items-center{align-items:center}.items-start{align-items:flex-start}
.items-end{align-items:flex-end}.items-baseline{align-items:baseline}
.justify-between{justify-content:space-between}.justify-center{justify-content:center}
.justify-start{justify-content:flex-start}.justify-end{justify-content:flex-end}
.flex-1{flex:1}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}
.flex-shrink-0{flex-shrink:0}.flex-none{flex:none}
.gap-1{gap:4px}.gap-2{gap:8px}.gap-3{gap:12px}.gap-4{gap:16px}
.gap-5{gap:20px}.gap-6{gap:24px}.gap-8{gap:32px}
.mt-1{margin-top:4px}.mt-2{margin-top:8px}.mt-3{margin-top:12px}.mt-4{margin-top:16px}
.mt-5{margin-top:20px}.mt-6{margin-top:24px}.mt-8{margin-top:32px}
.mb-1{margin-bottom:4px}.mb-2{margin-bottom:8px}.mb-3{margin-bottom:12px}
.mb-4{margin-bottom:16px}.mb-5{margin-bottom:20px}.mb-6{margin-bottom:24px}.mb-8{margin-bottom:32px}
.ml-auto{margin-left:auto}.mr-2{margin-right:8px}.ml-2{margin-left:8px}
.p-2{padding:8px}.p-3{padding:12px}.p-4{padding:16px}
.px-3{padding-left:12px;padding-right:12px}.px-4{padding-left:16px;padding-right:16px}
.py-2{padding-top:8px;padding-bottom:8px}.py-3{padding-top:12px;padding-bottom:12px}
.py-4{padding-top:16px;padding-bottom:16px}
.w-full{width:100%}.w-auto{width:auto}.h-full{height: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}.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:12.5px}.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-4xl{font-size:36px}.text-5xl{font-size:48px}
.font-serif{font-family:var(--serif);font-variation-settings:"opsz" 144}
.font-mono{font-family:var(--mono)}
.italic{font-style:italic}
.text-primary,.text-ink-1{color:var(--ink-1)}
.text-secondary,.text-ink-2{color:var(--ink-2)}
.text-tertiary,.text-ink-3{color:var(--ink-3)}
.text-brand,.text-orange{color:var(--orange)}
.text-success,.text-sage{color:var(--sage-deep)}
.text-warning{color:#7A5820}
.text-error,.text-rose{color:var(--rose-deep)}
.text-peach{color:var(--peach-deep)}
.text-muted{color:var(--ink-3)}
.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-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)}.rounded-full{border-radius:99px}
.border{border:1px solid var(--line-1)}
.border-b{border-bottom:1px solid var(--line-1)}
.shadow-sm{box-shadow:var(--sh-1)}
.shadow-md{box-shadow:var(--sh-2)}
.shadow-lg{box-shadow:var(--sh-3)}
.opacity-50{opacity:.5}.opacity-75{opacity:.75}
.transition{transition:all var(--dur-normal) var(--ease-out)}
.leading-tight{line-height:1.25}.leading-normal{line-height:1.5}.leading-relaxed{line-height:1.65}

/* ═══════════════════════════════════════════════════════════════
   § 30. RESPONSIVE
   ═══════════════════════════════════════════════════════════════ */
@media (max-width:1024px){
  .kpi-grid-4,.kpi-grid-5,.kpi-grid-6{grid-template-columns:repeat(2,1fr)}
  .kpi-grid-3{grid-template-columns:repeat(2,1fr)}
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
  .dash-grid{grid-template-columns:1fr}
}
@media (max-width:768px){
  :root{--topbar-h:56px;--content-pad:16px}
  .content,.content-area{padding-bottom:80px}
  .kpi-grid,.kpi-grid-2,.kpi-grid-3,.kpi-grid-4,.kpi-grid-5,.kpi-grid-6{grid-template-columns:repeat(2,1fr)}
  .hero-title,.page-title{font-size:28px}
  .hero-stat-value{font-size:22px}
  .sprout-fab{bottom:76px;right:16px;width:52px;height:52px}
  .sprout-fab svg{width:36px;height:36px}
  #live-indicator,.search-bar,.top-season{display:none}
  #menu-toggle{display:flex!important}
}
@media (max-width:480px){
  .kpi-grid,.kpi-grid-2,.kpi-grid-3,.kpi-grid-4{grid-template-columns:1fr}
  .hero-section{padding:24px 20px}
  .hero-title{font-size:24px}
}

/* Bottom nav (모바일) */
.bottom-nav{
  position:fixed;bottom:0;left:0;right:0;height:60px;
  background:var(--paper);border-top:1px solid var(--line-1);
  display:none;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(--ink-3);
  cursor:pointer;transition:color var(--dur-fast);border:none;background:transparent;
}
.bottom-nav-item i{font-size:17px}
.bottom-nav-item.active{color:var(--orange)}

/* ═══════════════════════════════════════════════════════════════
   § 31. PRINT
   ═══════════════════════════════════════════════════════════════ */
@media print{
  .sidebar,.side,.topbar,.top,.bottom-nav,.sprout-fab,#toast-root{display:none!important}
  .content,.content-area{padding:0;overflow:visible}
  .main-area,.main{overflow:visible}
  .app-shell,.shell{height:auto}
  .card,.panel,.kpi,.kpi-card{break-inside:avoid;box-shadow:none;border:1px solid #ddd}
  body{background:#fff !important}
}

/* ═══════════════════════════════════════════════════════════════
   § 32. LEGACY COMPATIBILITY (기존 클래스 처리)
   ═══════════════════════════════════════════════════════════════ */

/* 기존 skeleton loader */
.skeleton{
  background:linear-gradient(90deg,var(--cream-2) 25%, var(--cream-3) 50%, var(--cream-2) 75%);
  background-size:200% 100%;animation:shimmer 1.5s infinite linear;
  border-radius:var(--r-sm);
}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
.skeleton-text{height:14px;margin-bottom:8px}.skeleton-title{height:22px;margin-bottom:12px}
.skeleton-card{height:120px;border-radius:var(--r-lg)}.skeleton-line{height:14px}

/* Spinner */
.spinner,.loading-spinner{
  display:inline-block;border:3px solid var(--line-1);
  border-top-color:var(--orange);border-radius:50%;
  width:22px;height:22px;animation:spin .7s linear infinite;
}
.spinner.sm,.loading-spinner{width:16px;height:16px;border-width:2px}
.spinner.lg{width:32px;height:32px;border-width:4px}
@keyframes spin{to{transform:rotate(360deg)}}

/* Empty states */
.empty-state,.empty-state-center,.empty-state-glass,.empty,.empty-center{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:56px 24px;text-align:center;color:var(--ink-3);gap:14px;
}
.empty-icon,.empty-state-icon,.empty-icon-lg{
  width:64px;height:64px;border-radius:20px;
  background:var(--cream-2);color:var(--ink-4);
  display:grid;place-items:center;font-size:26px;margin-bottom:8px;
}
.empty-title,.empty-state-title{
  font-family:var(--serif);font-size:18px;font-weight:500;
  color:var(--ink-1);letter-spacing:-.015em;margin-bottom:4px;
}
.empty-desc,.empty-state-desc{font-size:13px;color:var(--ink-3);max-width:320px;line-height:1.5}

/* Divider */
.divider{height:1px;background:var(--line-1);margin:16px 0}
.divider-lg{margin:24px 0}
.divider-vertical{width:1px;background:var(--line-1);align-self:stretch}

/* Tag */
.tag{
  display:inline-flex;align-items:center;gap:4px;padding:2px 9px;
  border-radius:99px;font-size:11.5px;font-weight:500;
  background:var(--cream-2);color:var(--ink-2);border:1px solid var(--line-1);
}
.tag-remove{cursor:pointer;opacity:.6;transition:opacity var(--dur-fast)}
.tag-remove:hover{opacity:1}

/* 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(--cream-2);color:var(--ink-2);
}
.rank-badge.rank-1{background:linear-gradient(135deg,var(--sunflower),var(--orange));color:#fff}
.rank-badge.rank-2{background:linear-gradient(135deg,#B8B8B8,#9AA0AA);color:#fff}
.rank-badge.rank-3{background:linear-gradient(135deg,var(--peach),var(--peach-deep));color:#fff}

/* Score badge */
.score-badge{
  display:inline-flex;padding:3px 10px;border-radius:99px;
  font-size:11.5px;font-weight:700;font-family:var(--mono);
}
.score-badge.high{background:var(--sage-soft);color:var(--sage-deep)}
.score-badge.mid{background:var(--sunflower-soft);color:#7A5820}
.score-badge.low{background:var(--rose-soft);color:var(--rose-deep)}

/* Risk badge */
.risk-badge{
  display:inline-flex;align-items:center;gap:4px;padding:3px 10px;
  border-radius:99px;font-size:11px;font-weight:600;
}
.risk-high{background:var(--rose-soft);color:var(--rose-deep)}
.risk-medium{background:var(--peach-soft);color:var(--peach-deep)}
.risk-low{background:var(--sage-soft);color:var(--sage-deep)}

/* NOVA / branding legacy overrides */
.sidebar-logo-icon i{color:#fff !important}