/* ============================================================
   themes.css — 디자인 시스템(개인용) : 회사 LMT 디자인시스템 토큰 재사용
   출처: claude.ai 디자인시스템 아티팩트(LMT ERP) tokens.json (8테마).
   규칙: 강조색 바탕 글자는 항상 --accent-ink, 상태 글자는 --ok-fg/--warn-fg/--bad-fg.
         원색을 글자에 직접 쓰지 않는다. 테마는 data-theme 하나로 바뀐다.
   ※ LMT 상호·로고는 쓰지 않음(개인 상호만). 토큰 '값'만 재사용.
   ============================================================ */

:root {
  /* 글꼴·간격·모서리(테마 공통) */
  --font: Inter, "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px;
  --gap: 16px; --sidebar-w: 248px;
  --radius-sm: 8px; --radius-md: 12px; --radius-lg: 24px; --radius-full: 9999px;
  --shadow-pop: 0 24px 70px rgba(0,0,0,.28);

  /* 레거시 별칭 — 앱 코드가 쓰는 이름을 토큰으로 연결 */
  --text-weak: var(--text-muted);
  --on-accent: var(--accent-ink);
  --good: var(--ok-fg);
  --warn: var(--warn-fg);
  --bad: var(--bad-fg);
  --chart-grid: var(--border);
  --shadow: var(--shadow-card);
  --accent-strong: var(--accent);
  --radius: var(--radius-card);
}

/* 1. 클린 (기본) */
:root, [data-theme="clean"] {
  --bg:#eef1f8; --surface:rgba(255,255,255,.86); --surface-2:#f1f4fa; --surface-3:#e8ecf6;
  --border:#e3e8f3; --border-strong:#cdd5e6; --panel:#ffffff;
  --text:#1d2233; --text-muted:#5f667d;
  --accent:#4a63e7; --accent-ink:#ffffff; --accent-text:#3a4fd0;
  --ok-bg:#dcfce7; --ok-fg:#15803d; --warn-bg:#fef3c7; --warn-fg:#b45309; --bad-bg:#fee2e2; --bad-fg:#b91c1c;
  --radius-card:16px;
  --shadow-card:0 1px 2px rgba(30,41,80,.04), 0 8px 24px rgba(30,41,80,.06);
}

/* 2. 심플 */
[data-theme="light"] {
  --bg:#fafafa; --surface:#ffffff; --surface-2:#f4f4f5; --surface-3:#e9e9ec;
  --border:#e7e7ea; --border-strong:#d3d3d8; --panel:#ffffff;
  --text:#18181b; --text-muted:#686871;
  --accent:#4f46e5; --accent-ink:#ffffff; --accent-text:#4338ca;
  --ok-bg:#dcfce7; --ok-fg:#15803d; --warn-bg:#fef3c7; --warn-fg:#b45309; --bad-bg:#fee2e2; --bad-fg:#b91c1c;
  --radius-card:8px; --shadow-card:none;
}

/* 3. 다크 */
[data-theme="dark"] {
  --bg:#09090b; --surface:#18181b; --surface-2:#1f1f23; --surface-3:#27272a;
  --border:#27272a; --border-strong:#3f3f46; --panel:#18181b;
  --text:#fafafa; --text-muted:#a1a1aa;
  --accent:#4f46e5; --accent-ink:#ffffff; --accent-text:#a5b4fc;
  --ok-bg:#14321f; --ok-fg:#4ade80; --warn-bg:#3a2a10; --warn-fg:#fbbf24; --bad-bg:#3b1618; --bad-fg:#f87171;
  --radius-card:14px; --shadow-card:none;
}

/* 4. 전자잉크 */
[data-theme="eink"] {
  --bg:#e5e0d2; --surface:#ece8dc; --surface-2:#e2ddcf; --surface-3:#d6d0c0;
  --border:#d0c9b8; --border-strong:#b1a995; --panel:#ece8dc;
  --text:#2d2b26; --text-muted:#66615a;
  --accent:#3a3731; --accent-ink:#ece8dc; --accent-text:#3a3731;
  --ok-bg:#dcd9c9; --ok-fg:#3a4633; --warn-bg:#e2d9c0; --warn-fg:#5e4b20; --bad-bg:#e0d3cc; --bad-fg:#6e3d36;
  --radius-card:6px; --shadow-card:none;
}

/* 5. 모던 그린 */
[data-theme="green"] {
  --bg:#f4f5f7; --surface:#ffffff; --surface-2:#f1f3f5; --surface-3:#e6e9ec;
  --border:#ebedf0; --border-strong:#d3d8dd; --panel:#ffffff;
  --text:#101828; --text-muted:#667085;
  --accent:#16c47f; --accent-ink:#06301f; --accent-text:#067347;
  --ok-bg:#d7f7e6; --ok-fg:#077a4b; --warn-bg:#ffeed1; --warn-fg:#a35d06; --bad-bg:#ffe0e0; --bad-fg:#b42318;
  --radius-card:18px; --shadow-card:0 1px 2px rgba(16,24,40,.04);
}

/* 6. Black Iris (유리) */
[data-theme="g-iris"] {
  --bg:#080813; --surface:rgba(255,255,255,.06); --surface-2:rgba(255,255,255,.08); --surface-3:rgba(255,255,255,.14);
  --border:rgba(255,255,255,.10); --border-strong:rgba(255,255,255,.20); --panel:rgba(16,16,34,.86);
  --text:#eef0ff; --text-muted:#9a9cc4;
  --accent:#8f90ff; --accent-ink:#0b0b1a; --accent-text:#8f90ff;
  --ok-bg:rgba(74,222,128,.15); --ok-fg:#6ee7a0; --warn-bg:rgba(251,191,36,.15); --warn-fg:#fcd34d; --bad-bg:rgba(248,113,113,.16); --bad-fg:#fca5a5;
  --radius-card:20px; --shadow-card:0 8px 30px rgba(0,0,0,.10);
}

/* 7. Frozen (유리) */
[data-theme="g-frozen"] {
  --bg:#a0bddb; --surface:rgba(255,255,255,.38); --surface-2:rgba(255,255,255,.30); --surface-3:rgba(255,255,255,.52);
  --border:rgba(255,255,255,.55); --border-strong:rgba(30,60,100,.25); --panel:rgba(214,228,242,.92);
  --text:#0f1c2e; --text-muted:#3d5470;
  --accent:#1f4f86; --accent-ink:#ffffff; --accent-text:#1f4f86;
  --ok-bg:rgba(22,163,74,.16); --ok-fg:#0d4a22; --warn-bg:rgba(217,119,6,.16); --warn-fg:#653503; --bad-bg:rgba(220,38,38,.14); --bad-fg:#6e1111;
  --radius-card:20px; --shadow-card:0 8px 30px rgba(0,0,0,.10);
}

/* 8. Eclipse (유리) */
[data-theme="g-eclipse"] {
  --bg:#00272b; --surface:rgba(255,255,255,.06); --surface-2:rgba(255,255,255,.08); --surface-3:rgba(255,255,255,.14);
  --border:rgba(255,255,255,.10); --border-strong:rgba(255,255,255,.20); --panel:rgba(3,44,46,.9);
  --text:#e6fff6; --text-muted:#8fbfb2;
  --accent:#3ddc97; --accent-ink:#00272b; --accent-text:#3ddc97;
  --ok-bg:rgba(61,220,151,.15); --ok-fg:#6ee7b7; --warn-bg:rgba(251,191,36,.15); --warn-fg:#fcd34d; --bad-bg:rgba(248,113,113,.16); --bad-fg:#fca5a5;
  --radius-card:20px; --shadow-card:0 8px 30px rgba(0,0,0,.10);
}

/* 유리 테마: 카드·사이드바·상단바 뒤 흐림 */
[data-theme^="g-"] .card,
[data-theme^="g-"] .sidebar,
[data-theme^="g-"] .topbar,
[data-theme^="g-"] .kpi,
[data-theme^="g-"] .modal,
[data-theme^="g-"] .preview-canvas { -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }