/* HealthyHub 디자인 시안 (2026-10-09) — <html data-theme="a|b|c|d"> 일 때만 적용된다.
   a 프레시 그린 · b 코퍼레이트 네이비 · c 나이트 · d 클린 메디컬. data-theme 가 없으면 지금 화면(app.css) 그대로다.
   색은 모두 「색 역할」(--text, --primary …) 로만 바꾼다. 차트 색(--series-*)은 검증 도구(dataviz validate_palette)로
   밝은 화면은 흰 카드 위, 나이트는 #151c25 카드 위에서 색약 구분·밝기·채도·대비를 확인한 순서다 — 순서를 바꾸지 말 것.
   글자 대비는 tools/theme 의 check.py 로 4.5:1 이상(보조 글씨 4.3 이상)을 확인했다. */

/* ── 시안 A · 프레시 그린 ── */
:root[data-theme="a"] {
  color-scheme: light;
  --bg: #f4f7f2;
  --surface: #ffffff;
  --surface-2: #f7faf5;
  --surface-3: #e9f0e5;
  --border: #e1e8dc;
  --border-strong: #c8d4c1;
  --text: #17211a;
  --text-2: #465349;
  --muted: #667367;
  --row-hover: #f5f9f2;
  --badge-bg: #edf3e9;
  --primary: #3b7e2b;
  --primary-600: #357426;
  --primary-700: #275b1b;
  --primary-50: #edf6e8;
  --primary-100: #d6eacb;
  --on-primary: #ffffff;
  --link: #2f6f22;
  --focus: #3b7e2b;
  --accent: #ECA860;
  --accent-ink: #9a5a12;
  --info-ink: #275b1b;
  --good: #0a7a0a;
  --good-bg: #e7f6e7;
  --good-border: #bfe3bf;
  --good-ink: #0b5c0b;
  --warn: #8a5a00;
  --warn-bg: #fff3d1;
  --warn-border: #f2dc9b;
  --warn-ink: #6b4700;
  --bad: #c22f2f;
  --bad-bg: #fde8e8;
  --bad-border: #f1c2c2;
  --bad-ink: #8c1f1f;
  --danger-border: #efc4c4;
  --st-good: #0ca30c;
  --st-warning: #fab219;
  --st-serious: #ec835a;
  --st-critical: #d03b3b;
  --meter-bad-bg: #f8d7d7;
  --meter-good-bg: #cfeccf;
  --toast-bad: #a52626;
  --toast-good: #0d6b0d;
  --series-1: #5e9044;
  --series-2: #2a78d6;
  --series-3: #eb6834;
  --series-4: #1baf7a;
  --series-5: #c7802b;
  --series-6: #e87ba4;
  --series-7: #4a3aa7;
  --series-8: #e34948;
  --seq-1: #8bbf71;
  --seq-2: #5e9044;
  --seq-3: #37621e;
  --mark-rise: #c7802b;
  --grid: #e9eee5;
  --axis: #c8d4c1;
  --chart-gray: #b6c2b0;
  --chart-track: #ecf2e8;
  --pnl-lv0: #f2f8ee;
  --pnl-cur: #f1f8ec;
  --pnl-lv0-cur: #e2efd9;
  --tooltip-bg: #1b271d;
  --tooltip-text: #ffffff;
  --toast-bg: #1b271d;
  --toast-text: #ffffff;
  --overlay: rgba(18, 30, 20, .45);
  --overlay-soft: rgba(18, 30, 20, .3);
  --edge-shadow: rgba(18, 30, 20, .28);
  --shadow-xs: 0 1px 2px rgba(18, 30, 20, .12);
  --shadow: 0 1px 2px rgba(18, 30, 20, .04), 0 8px 24px rgba(18, 30, 20, .05);
  --shadow-lg: 0 16px 48px rgba(18, 30, 20, .18);
  --card-shadow: var(--shadow);
  --topbar-bg: rgba(244, 247, 242, .88);
  --tabbar-bg: rgba(255, 255, 255, .96);
  --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1.5 1.5 6 6l4.5-4.5' fill='none' stroke='%23465349' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --side-bg: #ffffff;
  --side-line: #e6ece2;
  --side-text: #465349;
  --side-strong: #17211a;
  --side-muted: #68756a;
  --side-hover: #f3f8f0;
  --side-active-bg: #e9f4e3;
  --side-active-text: #275b1b;
  --side-bar: #ECA860;
  --side-logo-a: #94C37E;
  --side-logo-b: #ECA860;
  --logo-a: #94C37E;
  --logo-b: #ECA860;
  --scroll-thumb: #c2cfbb;
  --scroll-thumb-hover: #a5b79b;
  --scroll-track: transparent;
  --selection: #d6eacb;
  --auth-bg: #f4f7f2;
  --hero-bg: radial-gradient(900px 520px at 85% 110%, rgba(236, 168, 96, .35), transparent 60%), radial-gradient(800px 600px at 0% 0%, #a5d18e 0%, transparent 55%), linear-gradient(155deg, #78b05c 0%, #3b7e2b 100%);
  --hero-text: #ffffff;
  --hero-muted: rgba(255, 255, 255, .82);
  --hero-accent: #fff2df;
  --hero-ring: rgba(255, 255, 255, .22);
  --hero-ring-2: rgba(236, 168, 96, .55);
  --hero-logo-a: #ffffff;
  --hero-logo-b: #ffe2bd;
  --title-size: 21px;
  --kpi-size: 26px;
  --kpi-weight: 700;
}
/* ── 시안 B · 코퍼레이트 네이비 ── */
:root[data-theme="b"] {
  color-scheme: light;
  --bg: #f3f5f8;
  --surface: #ffffff;
  --surface-2: #f6f8fb;
  --surface-3: #e8ecf2;
  --border: #e0e5ed;
  --border-strong: #c6cfdb;
  --text: #111a27;
  --text-2: #455164;
  --muted: #667184;
  --row-hover: #f4f7fb;
  --badge-bg: #edf1f6;
  --primary: #1d4176;
  --primary-600: #183764;
  --primary-700: #183764;
  --primary-50: #eaf0f8;
  --primary-100: #d2ddee;
  --on-primary: #ffffff;
  --link: #1d4f8f;
  --focus: #2f63ad;
  --accent: #ECA860;
  --accent-ink: #9a5a12;
  --info-ink: #183764;
  --good: #0a7a0a;
  --good-bg: #e7f6e7;
  --good-border: #bfe3bf;
  --good-ink: #0b5c0b;
  --warn: #8a5a00;
  --warn-bg: #fff3d1;
  --warn-border: #f2dc9b;
  --warn-ink: #6b4700;
  --bad: #c22f2f;
  --bad-bg: #fde8e8;
  --bad-border: #f1c2c2;
  --bad-ink: #8c1f1f;
  --danger-border: #efc4c4;
  --st-good: #0ca30c;
  --st-warning: #fab219;
  --st-serious: #ec835a;
  --st-critical: #d03b3b;
  --meter-bad-bg: #f8d7d7;
  --meter-good-bg: #cfeccf;
  --toast-bad: #a52626;
  --toast-good: #0d6b0d;
  --series-1: #256abf;
  --series-2: #5e9044;
  --series-3: #e87ba4;
  --series-4: #c7802b;
  --series-5: #1baf7a;
  --series-6: #eb6834;
  --series-7: #4a3aa7;
  --series-8: #e34948;
  --seq-1: #86b6ef;
  --seq-2: #3987e5;
  --seq-3: #1c5cab;
  --mark-rise: #c7802b;
  --grid: #e8ecf2;
  --axis: #c6cfdb;
  --chart-gray: #b7c0ce;
  --chart-track: #edf1f6;
  --pnl-lv0: #f3f6fb;
  --pnl-cur: #eff4fb;
  --pnl-lv0-cur: #e2eaf6;
  --tooltip-bg: #182230;
  --tooltip-text: #ffffff;
  --toast-bg: #182230;
  --toast-text: #ffffff;
  --overlay: rgba(12, 18, 28, .5);
  --overlay-soft: rgba(12, 18, 28, .34);
  --edge-shadow: rgba(12, 18, 28, .3);
  --shadow-xs: 0 1px 2px rgba(12, 18, 28, .12);
  --shadow: 0 1px 2px rgba(12, 18, 28, .05), 0 4px 14px rgba(12, 18, 28, .05);
  --shadow-lg: 0 18px 50px rgba(12, 18, 28, .22);
  --card-shadow: var(--shadow);
  --topbar-bg: #ffffff;
  --tabbar-bg: rgba(255, 255, 255, .97);
  --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1.5 1.5 6 6l4.5-4.5' fill='none' stroke='%23455164' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --side-bg: #182230;
  --side-line: rgba(255, 255, 255, .08);
  --side-text: #b8c2d1;
  --side-strong: #ffffff;
  --side-muted: #8792a5;
  --side-hover: rgba(255, 255, 255, .06);
  --side-active-bg: rgba(255, 255, 255, .1);
  --side-active-text: #ffffff;
  --side-bar: #ECA860;
  --side-logo-a: #ffffff;
  --side-logo-b: #ECA860;
  --side-btn-bg: transparent;
  --side-btn-border: rgba(255, 255, 255, .16);
  --side-btn-text: #dfe5ee;
  --side-btn-hover: rgba(255, 255, 255, .08);
  --avatar-bg: rgba(236, 168, 96, .18);
  --avatar-text: #ffd9a8;
  --logo-a: #94C37E;
  --logo-b: #ECA860;
  --scroll-thumb: #c3ccd8;
  --scroll-thumb-hover: #a3aec0;
  --scroll-track: transparent;
  --selection: #d2ddee;
  --auth-bg: #f3f5f8;
  --hero-bg: radial-gradient(700px 520px at 100% 100%, rgba(236, 168, 96, .16), transparent 60%), radial-gradient(900px 600px at 0% 0%, #26334a 0%, transparent 60%), #182230;
  --hero-text: #ffffff;
  --hero-muted: #aab4c4;
  --hero-accent: #ECA860;
  --hero-ring: rgba(255, 255, 255, .08);
  --hero-ring-2: rgba(236, 168, 96, .45);
  --hero-logo-a: #ffffff;
  --hero-logo-b: #ECA860;
  --title-size: 21px;
  --kpi-size: 26px;
  --kpi-weight: 700;
}
/* ── 시안 C · 나이트 ── */
:root[data-theme="c"] {
  color-scheme: dark;
  --bg: #0d1218;
  --surface: #151c25;
  --surface-2: #1a222d;
  --surface-3: #202a36;
  --border: #252f3c;
  --border-strong: #344152;
  --text: #e7ecf2;
  --text-2: #b1bccb;
  --muted: #8794a6;
  --row-hover: #1b2430;
  --badge-bg: #222c39;
  --primary: #94C37E;
  --primary-600: #a7d093;
  --primary-700: #b9dca8;
  --primary-50: #1b2920;
  --primary-100: #2a4131;
  --on-primary: #0d1218;
  --link: #a7d093;
  --focus: #94C37E;
  --accent: #ECA860;
  --accent-ink: #f2c18a;
  --info-ink: #b9dca8;
  --good: #5fcf78;
  --good-bg: #15301f;
  --good-border: #25502f;
  --good-ink: #a9e8b6;
  --warn: #f0bd5a;
  --warn-bg: #33290f;
  --warn-border: #5a4718;
  --warn-ink: #f6d690;
  --bad: #ff8484;
  --bad-bg: #3a1b1f;
  --bad-border: #5f2a30;
  --bad-ink: #ffb8b8;
  --danger-border: #5f2a30;
  --st-good: #0ca30c;
  --st-warning: #fab219;
  --st-serious: #ec835a;
  --st-critical: #d03b3b;
  --meter-bad-bg: #3a1b1f;
  --meter-good-bg: #15301f;
  --toast-bad: #8f2a2a;
  --toast-good: #245c2c;
  --series-1: #6ca450;
  --series-2: #3987e5;
  --series-3: #d95926;
  --series-4: #199e70;
  --series-5: #c17a23;
  --series-6: #d55181;
  --series-7: #9085e9;
  --series-8: #e66767;
  --seq-1: #45712d;
  --seq-2: #69a14d;
  --seq-3: #9dce86;
  --mark-rise: #f0bd5a;
  --grid: #222b37;
  --axis: #384556;
  --chart-gray: #4d596a;
  --chart-track: #212a36;
  --pnl-lv0: #1a2330;
  --pnl-cur: #1a2620;
  --pnl-lv0-cur: #223428;
  --tooltip-bg: #273240;
  --tooltip-text: #ffffff;
  --toast-bg: #273240;
  --toast-text: #ffffff;
  --overlay: rgba(0, 0, 0, .6);
  --overlay-soft: rgba(0, 0, 0, .45);
  --edge-shadow: rgba(0, 0, 0, .55);
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .18);
  --shadow-lg: 0 18px 50px rgba(0, 0, 0, .5);
  --card-shadow: var(--shadow);
  --topbar-bg: rgba(13, 18, 24, .86);
  --tabbar-bg: rgba(16, 22, 29, .96);
  --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1.5 1.5 6 6l4.5-4.5' fill='none' stroke='%23b1bccb' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --side-bg: #10161d;
  --side-line: #1e2732;
  --side-text: #aab5c3;
  --side-strong: #ffffff;
  --side-muted: #77849a;
  --side-hover: #18202a;
  --side-active-bg: #1b2920;
  --side-active-text: #b9dca8;
  --side-bar: #ECA860;
  --side-logo-a: #94C37E;
  --side-logo-b: #ECA860;
  --side-btn-bg: transparent;
  --side-btn-border: #2c3747;
  --side-btn-text: #c9d2de;
  --side-btn-hover: #18202a;
  --avatar-bg: #1b2920;
  --avatar-text: #b9dca8;
  --logo-a: #94C37E;
  --logo-b: #ECA860;
  --scroll-thumb: #2c3746;
  --scroll-thumb-hover: #3c4a5c;
  --scroll-track: transparent;
  --selection: #2a4131;
  --auth-bg: #0d1218;
  --hero-bg: radial-gradient(700px 500px at 100% 100%, rgba(236, 168, 96, .14), transparent 60%), radial-gradient(800px 600px at 0% 0%, rgba(148, 195, 126, .16), transparent 60%), #0f151c;
  --hero-text: #ffffff;
  --hero-muted: #9aa7b8;
  --hero-accent: #94C37E;
  --hero-ring: rgba(148, 195, 126, .14);
  --hero-ring-2: rgba(236, 168, 96, .4);
  --hero-logo-a: #94C37E;
  --hero-logo-b: #ECA860;
  --title-size: 21px;
  --kpi-size: 26px;
  --kpi-weight: 700;
}
/* ── 시안 D · 클린 메디컬 ── */
:root[data-theme="d"] {
  color-scheme: light;
  --bg: #ffffff;
  --surface: #ffffff;
  --surface-2: #f8f9f9;
  --surface-3: #f1f3f4;
  --border: #e8eaec;
  --border-strong: #d3d7db;
  --text: #101418;
  --text-2: #4a5158;
  --muted: #6b737b;
  --row-hover: #f7f8f9;
  --badge-bg: #f1f3f4;
  --primary: #12181e;
  --primary-600: #000000;
  --primary-700: #12181e;
  --primary-50: #f1f3f4;
  --primary-100: #e2e5e8;
  --on-primary: #ffffff;
  --link: #127a6b;
  --focus: #078e7d;
  --accent: #ECA860;
  --accent-ink: #9a5a12;
  --info-ink: #2b3238;
  --good: #0a7a0a;
  --good-bg: #e7f6e7;
  --good-border: #bfe3bf;
  --good-ink: #0b5c0b;
  --warn: #8a5a00;
  --warn-bg: #fff3d1;
  --warn-border: #f2dc9b;
  --warn-ink: #6b4700;
  --bad: #c22f2f;
  --bad-bg: #fde8e8;
  --bad-border: #f1c2c2;
  --bad-ink: #8c1f1f;
  --danger-border: #efc4c4;
  --st-good: #0ca30c;
  --st-warning: #fab219;
  --st-serious: #ec835a;
  --st-critical: #d03b3b;
  --meter-bad-bg: #f8d7d7;
  --meter-good-bg: #cfeccf;
  --toast-bad: #a52626;
  --toast-good: #0d6b0d;
  --series-1: #078e7d;
  --series-2: #c7802b;
  --series-3: #e87ba4;
  --series-4: #5e9044;
  --series-5: #2a78d6;
  --series-6: #eb6834;
  --series-7: #4a3aa7;
  --series-8: #e34948;
  --seq-1: #5fc6b3;
  --seq-2: #078e7d;
  --seq-3: #015a4f;
  --mark-rise: #c7802b;
  --grid: #eff1f2;
  --axis: #d3d7db;
  --chart-gray: #c3c8cd;
  --chart-track: #f1f3f4;
  --pnl-lv0: #f8f9f9;
  --pnl-cur: #f0faf8;
  --pnl-lv0-cur: #e3f4f0;
  --tooltip-bg: #12181e;
  --tooltip-text: #ffffff;
  --toast-bg: #12181e;
  --toast-text: #ffffff;
  --overlay: rgba(16, 20, 24, .4);
  --overlay-soft: rgba(16, 20, 24, .26);
  --edge-shadow: rgba(16, 20, 24, .22);
  --shadow-xs: 0 1px 2px rgba(16, 20, 24, .1);
  --shadow: 0 1px 2px rgba(16, 20, 24, .04);
  --shadow-lg: 0 16px 48px rgba(16, 20, 24, .16);
  --card-shadow: none;
  --topbar-bg: rgba(255, 255, 255, .9);
  --tabbar-bg: rgba(255, 255, 255, .97);
  --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1.5 1.5 6 6l4.5-4.5' fill='none' stroke='%234a5158' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --side-bg: #fafafa;
  --side-line: #ededed;
  --side-text: #4a5158;
  --side-strong: #101418;
  --side-muted: #6f777f;
  --side-hover: #f1f3f4;
  --side-active-bg: #ffffff;
  --side-active-text: #101418;
  --side-bar: #078e7d;
  --side-logo-a: #94C37E;
  --side-logo-b: #ECA860;
  --avatar-bg: #fdf1e2;
  --avatar-text: #9a5a12;
  --logo-a: #94C37E;
  --logo-b: #ECA860;
  --scroll-thumb: #d6dade;
  --scroll-thumb-hover: #b4bbc2;
  --scroll-track: transparent;
  --selection: #cfeee8;
  --auth-bg: #ffffff;
  --hero-bg: radial-gradient(600px 420px at 100% 100%, rgba(236, 168, 96, .12), transparent 60%), #f7f8f7;
  --hero-text: #101418;
  --hero-muted: #5b636b;
  --hero-accent: #127a6b;
  --hero-ring: rgba(236, 168, 96, .5);
  --hero-ring-2: rgba(148, 195, 126, .55);
  --hero-logo-a: #94C37E;
  --hero-logo-b: #ECA860;
  --title-size: 24px;
  --kpi-size: 30px;
  --kpi-weight: 650;
}

/* ═══════════ 네 시안 공통 — 모든 화면 크기 ═══════════ */
:root[data-theme] {
  --radius: 14px; --radius-sm: 10px;
  --font: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Segoe UI", "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", system-ui, sans-serif;
}
[data-theme] body { letter-spacing: -0.005em; }
[data-theme] ::selection { background: var(--selection); }
[data-theme] h1, [data-theme] h2, [data-theme] h3 { letter-spacing: -0.02em; }

/* 스크롤 막대: 바탕에 녹아드는 얇은 막대. 위에 올리면 조금 진해진다 (Chrome·Edge 121+, Firefox) */
@supports (scrollbar-color: auto) {
  :root[data-theme] { scrollbar-color: var(--scroll-thumb) var(--scroll-track); }
  [data-theme] .table-wrap, [data-theme] .nav, [data-theme] .drawer-body, [data-theme] .modal-body, [data-theme] .overlay { scrollbar-width: thin; }
  [data-theme] .table-wrap:hover, [data-theme] .nav:hover, [data-theme] .drawer-body:hover, [data-theme] .modal-body:hover { scrollbar-color: var(--scroll-thumb-hover) var(--scroll-track); }
}
/* 그 밖의 브라우저(사파리 등) */
@supports not (scrollbar-color: auto) {
  [data-theme] ::-webkit-scrollbar { width: 12px; height: 12px; }
  [data-theme] ::-webkit-scrollbar-track { background: transparent; }
  [data-theme] ::-webkit-scrollbar-thumb { background-color: var(--scroll-thumb); border: 3px solid transparent; border-radius: 999px; background-clip: padding-box; }
  [data-theme] ::-webkit-scrollbar-thumb:hover { background-color: var(--scroll-thumb-hover); }
  [data-theme] ::-webkit-scrollbar-corner { background: transparent; }
}

/* 로고: 예전 십자 표시와 글자 대신 회사 로고 */
[data-theme] .brand > .brand-mark, [data-theme] .brand > .brand-mark + div { display: none; }
[data-theme] .brand-logo { display: flex; align-items: center; gap: 12px; min-width: 0; }
[data-theme] .sidebar { --logo-a: var(--side-logo-a); --logo-b: var(--side-logo-b); }
[data-theme] .brand-logo svg.logo { height: 38px; width: auto; flex: none; }
[data-theme] .brand-label { font-size: 12.5px; font-weight: 650; color: var(--side-muted); padding-left: 12px; border-left: 1px solid var(--side-line); line-height: 1.25; letter-spacing: .02em; white-space: nowrap; }
[data-theme] .sheet-close { color: var(--side-text); }
[data-theme] .sheet-close:hover { background: var(--side-hover); color: var(--side-strong); }

/* 왼쪽 메뉴 아래 칸 (사용자 · 비밀번호 · 로그아웃 · 앱 설치) */
[data-theme] .avatar { background: var(--avatar-bg, var(--primary-100)); color: var(--avatar-text, var(--primary-700)); }
[data-theme] .side-foot .btn { background: var(--side-btn-bg, var(--surface)); border-color: var(--side-btn-border, var(--border-strong)); color: var(--side-btn-text, var(--text)); }
[data-theme] .side-foot .btn:hover { background: var(--side-btn-hover, var(--surface-2)); }
[data-theme] .side-foot .install-btn.primary { background: var(--side-cta-bg, var(--primary)); border-color: var(--side-cta-bg, var(--primary)); color: var(--side-cta-text, var(--on-primary)); }
[data-theme] .side-foot .install-btn.primary:hover { filter: brightness(1.06); }
[data-theme] .side-foot .install-btn:not(.primary) small { color: var(--side-muted); }
:root[data-theme="b"] { --side-cta-bg: #ECA860; --side-cta-text: #182230; }
:root[data-theme="c"] { --side-cta-bg: #94C37E; --side-cta-text: #0d1218; }

/* 표·배지·입력 다듬기 (색 역할만 쓰므로 모든 크기에서 같다) */
[data-theme] .tbl thead th { color: var(--text-2); letter-spacing: -0.005em; }
[data-theme] .badge { border-radius: 7px; }
[data-theme] .input, [data-theme] select.input { background-color: var(--surface); }
[data-theme] .input::placeholder { color: var(--muted); opacity: 1; }
[data-theme] .card-head h3, [data-theme] .section-title h2 { letter-spacing: -0.02em; }
[data-theme] .tooltip { border-radius: 10px; box-shadow: var(--shadow-lg); }
[data-theme] .notice { border-radius: 10px; }
[data-theme] .seg { background: var(--surface-3); }
[data-theme] .seg button.on { background: var(--seg-on, var(--surface)); }
:root[data-theme="c"] { --seg-on: #2f3b4c; }
[data-theme] .dropzone { background: var(--surface); }

/* ── 로그인 화면: 왼쪽 브랜드 영역 + 오른쪽 입력 카드 (좁으면 카드만, 위에 로고) ── */
[data-theme] .auth-page { padding: 0; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(420px, .92fr); place-items: stretch; background: var(--auth-bg); }
[data-theme] .auth-hero { display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; background: var(--hero-bg); color: var(--hero-text); padding: 56px 64px; --logo-a: var(--hero-logo-a); --logo-b: var(--hero-logo-b); }
/* 로고의 고리를 닮은 큰 원 두 개 */
[data-theme] .auth-hero::before, [data-theme] .auth-hero::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; }
[data-theme] .auth-hero::before { width: 860px; height: 860px; right: -380px; bottom: -430px; border: 2px solid var(--hero-ring); }
/* 로고의 고리처럼 왼쪽이 열린 원 */
[data-theme] .auth-hero::after { width: 470px; height: 470px; right: -120px; bottom: -180px; border: 3px solid var(--hero-ring-2); border-left-color: transparent; transform: rotate(-28deg); }
[data-theme] .auth-hero-in { position: relative; z-index: 1; width: min(460px, 100%); }
[data-theme] .auth-hero-logo { height: 66px; width: auto; margin-bottom: 44px; }
[data-theme] .auth-eyebrow { font-size: 12.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--hero-accent); margin-bottom: 14px; }
[data-theme] .auth-slogan { font-size: 36px; font-weight: 760; line-height: 1.28; letter-spacing: -0.035em; word-break: keep-all; text-wrap: balance; }
[data-theme] .auth-hero-sub { margin-top: 18px; font-size: 15px; color: var(--hero-muted); }
[data-theme] .auth-card { align-self: center; justify-self: center; width: min(400px, calc(100% - 48px)); margin: 48px 0; padding: 34px 32px 28px; border-radius: 18px; box-shadow: var(--shadow-lg); }
:root[data-theme="d"] .auth-card { box-shadow: none; }
[data-theme] .auth-card > .brand { display: none !important; }
[data-theme] .auth-card h1 { margin-top: 0; font-size: 24px; }
[data-theme] .auth-logo { display: none; align-items: center; gap: 12px; margin-bottom: 22px; }
[data-theme] .auth-logo svg.logo { height: 34px; }
[data-theme] .auth-card .btn.primary { height: 46px; font-size: 15px; }
@media screen and (max-width: 900px), screen and (max-height: 500px) and (max-width: 1000px) {
  [data-theme] .auth-page { grid-template-columns: minmax(0, 1fr); padding: 16px; place-items: center; min-height: 100dvh; background: var(--auth-bg); }
  [data-theme] .auth-hero { display: none; }
  [data-theme] .auth-logo { display: flex; }
  [data-theme] .auth-card { margin: 24px 0; width: min(420px, 100%); }
}
@media screen and (max-width: 640px) {
  [data-theme] .auth-card { padding: 26px 20px 22px; border-radius: 16px; }
}

/* ═══════════ PC 화면에서만 (좁은 화면 규칙과 겹치지 않게) ═══════════ */
@media screen and (min-width: 861px) and (min-height: 501px), screen and (min-width: 1001px) {
  [data-theme] .brand { padding: 24px 20px 18px 22px; }
  [data-theme] .nav { padding: 2px 12px 12px; }
  [data-theme] .nav-group { font-size: 11px; letter-spacing: .1em; padding: 18px 10px 6px; }
  [data-theme] .nav a { position: relative; border-radius: 10px; padding: 9px 12px; gap: 11px; font-weight: 560; transition: background .12s, color .12s; }
  [data-theme] .nav a.active { font-weight: 700; }
  /* 지금 보는 메뉴: 왼쪽 끝에 로고 고리 색(주황) 막대 */
  [data-theme] .nav a.active::before { content: ""; position: absolute; left: -12px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--side-bar); }
  [data-theme] .side-foot { padding: 14px 14px 12px; }
  [data-theme] .topbar { padding: 20px 32px 14px; border-bottom: 1px solid var(--topbar-line, transparent); }
  [data-theme] .topbar h1 { font-size: var(--title-size); font-weight: 750; letter-spacing: -0.03em; }
  [data-theme] .topbar .desc { margin-top: 2px; }
  [data-theme] .content { padding: 12px 32px 56px; }
  [data-theme] .card { box-shadow: var(--card-shadow); }
  [data-theme] .card-head { padding: 18px 22px 0; }
  [data-theme] .card-body { padding: 14px 22px 20px; }
  [data-theme] .card-pad { padding: 20px 22px; }
  [data-theme] .grid { gap: 18px; }
  [data-theme] .tile { padding: 18px 20px; }
  [data-theme] .tile .value { font-size: var(--kpi-size); font-weight: var(--kpi-weight); letter-spacing: -0.03em; margin-top: 8px; }
  [data-theme] .btn { border-radius: 10px; }
  [data-theme] .btn.primary { box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }
  [data-theme] .seg { border-radius: 10px; }
  [data-theme] .seg button { border-radius: 8px; }
  [data-theme] .tbl th, [data-theme] .tbl td { padding: 10px 14px; }
  [data-theme] .table-wrap { border-radius: 12px; }
  [data-theme] .modal { border-radius: 18px; }
  [data-theme] .drawer-head { padding: 20px 24px 14px; }
  [data-theme] .drawer-body { padding: 20px 24px 30px; }
}
:root[data-theme="b"], :root[data-theme="d"] { --topbar-line: var(--border); }
/* 클린 메디컬: 그림자 없이 얇은 선과 여백으로 */
:root[data-theme="d"] .card { border-color: var(--border); }
:root[data-theme="d"] .nav a.active { box-shadow: inset 0 0 0 1px var(--border); }
:root[data-theme="d"] .tile .label { text-transform: none; letter-spacing: 0; }

/* ═══════════ 좁은 화면(휴대폰·태블릿) ═══════════ */
@media screen and (max-width: 860px), screen and (max-height: 500px) and (max-width: 1000px) {
  [data-theme] .sidebar .brand-logo svg.logo { height: 30px; }
  [data-theme] .sidebar .brand-logo { flex: 1; }
  [data-theme] .tab.active { color: var(--side-active-text-compact, var(--primary-700)); }
  [data-theme] .tabbar { border-top-color: var(--border); }
}
/* 나이트: 아래 탭의 지금 메뉴 글자는 밝은 초록 */
:root[data-theme="c"] { --side-active-text-compact: #b9dca8; }
/* 네이비: 좁은 화면의 「전체 메뉴」도 남색 판 위에 흰 로고 */

/* ═══════════ 시안마다 다른 표정 ═══════════ */
/* A 프레시 그린: 머리 쪽에 연한 초록 빛, 카드 제목 앞에 로고 고리 색 점 */
:root[data-theme="a"] .card-head h3::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); margin-right: 9px; vertical-align: 2px; }
@media screen and (min-width: 861px) and (min-height: 501px), screen and (min-width: 1001px) {
  :root[data-theme="a"] { --topbar-bg: rgba(244, 247, 242, .7); }
  :root[data-theme="a"] .main { background: radial-gradient(1200px 440px at 16% -90px, rgba(148, 195, 126, .36), transparent 72%), radial-gradient(900px 360px at 96% -120px, rgba(236, 168, 96, .18), transparent 72%); }
}

/* B 코퍼레이트 네이비: 왼쪽 메뉴와 위 제목줄이 하나의 남색 틀 (설치한 창의 제목 표시줄·휴대폰 상단 띠도 남색) */
:root[data-theme="b"] { --topbar-bg: #182230; --topbar-line: #182230; }
:root[data-theme="b"] .topbar { border-bottom-color: #182230; }
:root[data-theme="b"] .topbar h1 { color: #ffffff; }
:root[data-theme="b"] .topbar .desc, :root[data-theme="b"] .topbar .upd, :root[data-theme="b"] .topbar .period .small { color: #aab4c4; }
:root[data-theme="b"] .topbar .input { background-color: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .2); color: #ffffff; color-scheme: dark; }
:root[data-theme="b"] .topbar .input:focus { border-color: #ECA860; }
:root[data-theme="b"] .topbar select.input option { color: #111a27; background: #ffffff; }
:root[data-theme="b"] .topbar { --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1.5 1.5 6 6l4.5-4.5' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
:root[data-theme="b"] .topbar .icon-btn { color: #dfe5ee; }
@media screen and (min-width: 861px) and (min-height: 501px), screen and (min-width: 1001px) {
  :root[data-theme="b"] .topbar { padding-bottom: 18px; }
  :root[data-theme="b"] .content { padding-top: 22px; }
  /* 지표 카드: 왼쪽에 얇은 남색 선 */
  :root[data-theme="b"] .grid.kpi > .card { border-left: 3px solid #1d4176; }
}

/* C 나이트: 머리 쪽에 아주 옅은 초록·주황 빛 */
@media screen and (min-width: 861px) and (min-height: 501px), screen and (min-width: 1001px) {
  :root[data-theme="c"] { --topbar-bg: rgba(13, 18, 24, .72); }
  :root[data-theme="c"] .main { background: radial-gradient(1100px 420px at 18% -100px, rgba(148, 195, 126, .13), transparent 72%), radial-gradient(860px 340px at 94% -130px, rgba(236, 168, 96, .09), transparent 72%); }
}

/* D 클린 메디컬: 지표를 하나의 띠로(칸 사이 가는 선), 청록 표시, 넓은 여백 */
@media screen and (min-width: 861px) and (min-height: 501px), screen and (min-width: 1001px) {
  :root[data-theme="d"] .grid.kpi { gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
  :root[data-theme="d"] .grid.kpi > .card { border: 0; border-radius: 0; box-shadow: none; }
  :root[data-theme="d"] .tile { padding: 22px 24px; }
  :root[data-theme="d"] .tile .label { color: var(--muted); font-weight: 600; }
  :root[data-theme="d"] .card-head { padding: 22px 24px 0; }
  :root[data-theme="d"] .card-body { padding: 16px 24px 22px; }
  :root[data-theme="d"] .grid { gap: 20px; }
  :root[data-theme="d"] .content { padding-top: 20px; }
}
@media screen and (min-width: 861px) and (max-width: 1180px) {
  :root[data-theme="d"] .grid.kpi.c5 > :last-child:nth-child(odd), :root[data-theme="d"] .grid.kpi.c3 > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* 앱으로 열었을 때(설치한 창): 설치 단추를 숨긴다 */
@media (display-mode: standalone) { [data-theme] .install-row { display: none !important; } }