/* ============================================================
   집프로-견적매니저 화면 테마 (업체용 화면 공통)

   테마는 <html data-theme="..."> 로 전환된다 (js/theme.js 가 관리).
     - (속성 없음) 기본    : Tailwind 기본 팔레트 그대로 → 기존 화면과 동일
     - data-theme="cube"   : BMW 코퍼레이트 — 흰 캔버스 · 잉크 #262626 · BMW 블루 #1c69d4
                             · 0px 라운드 · 그림자 없음(1px 헤어라인) · 700/400 대비
     - data-theme="cloud"  : Airtable 에디토리얼 — 흰 캔버스 · 잉크 #181d26 · 근흑 CTA
                             · 링크 블루 #1b61c9 · 12/10/6px 라운드 · 헤어라인 #dddddd · 400/500 굵기
     - data-theme="stripe" : Stripe — 인디고 #533afd 필 CTA · 네이비 잉크 #0d253d · 얇은(300) 디스플레이
                             + 음수 자간 · 상단 그라디언트 워시 · 푸른빛 그림자 · tnum

   구조 (두 층):
     1) Tailwind 토큰 층 — js/theme.js 가 tailwind.config 로 gray/blue 팔레트, rounded-*,
        shadow-*, font-medium/semibold/bold, tracking-* 를 --jp-gray-N · --jp-blue-N · --jp-r-X ·
        --jp-sh-X · --jp-fw-X · --jp-ls-X 변수에 연결한다. 유틸리티 클래스가 HTML 수정 없이 테마를 따른다.
        (주의: 이 주석 안에 별표+슬래시를 쓰면 주석이 끝나 아래 :root 블록이 통째로 무시된다)
     2) 의미 변수 층 — --jp-primary, --jp-ink, --jp-hairline, --jp-r-card … 를 테마별로 정의하고,
        Tailwind 밖(페이지 인라인 스타일·주입 <style>·헤더·스위처)에 대한 보정 규칙은
        `[data-theme]` 접두 하나로 모든 테마에 공통 적용한다. 새 테마 = 변수 블록 하나 추가.

   변수 규칙: 팔레트 색은 "R G B" 세 값(알파 조합용), 의미 변수는 실제 CSS 값.
   ============================================================ */

/* ---------- 기본 테마 = Tailwind v3 기본값 (변경 금지) ---------- */
:root {
    --jp-gray-50: 249 250 251;
    --jp-gray-100: 243 244 246;
    --jp-gray-200: 229 231 235;
    --jp-gray-300: 209 213 219;
    --jp-gray-400: 156 163 175;
    --jp-gray-500: 107 114 128;
    --jp-gray-600: 75 85 99;
    --jp-gray-700: 55 65 81;
    --jp-gray-800: 31 41 55;
    --jp-gray-900: 17 24 39;
    --jp-gray-950: 3 7 18;

    --jp-blue-50: 239 246 255;
    --jp-blue-100: 219 234 254;
    --jp-blue-200: 191 219 254;
    --jp-blue-300: 147 197 253;
    --jp-blue-400: 96 165 250;
    --jp-blue-500: 59 130 246;
    --jp-blue-600: 37 99 235;
    --jp-blue-700: 29 78 216;
    --jp-blue-800: 30 64 175;
    --jp-blue-900: 30 58 138;
    --jp-blue-950: 23 37 84;

    --jp-r-sm: 0.125rem;
    --jp-r: 0.25rem;
    --jp-r-md: 0.375rem;
    --jp-r-lg: 0.5rem;
    --jp-r-xl: 0.75rem;
    --jp-r-2xl: 1rem;
    --jp-r-3xl: 1.5rem;

    --jp-sh-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --jp-sh: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    --jp-sh-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --jp-sh-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --jp-sh-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    --jp-sh-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);

    --jp-fw-medium: 500;
    --jp-fw-semibold: 600;
    --jp-fw-bold: 700;

    --jp-ls-tighter: -0.05em;
    --jp-ls-tight: -0.025em;

    /* 의미 변수 (기본 테마에서는 스위처만 사용) */
    --jp-ink: #1f2937;
    --jp-hairline-strong: #d1d5db;
    --jp-surface-soft: #f3f4f6;
    --jp-r-chip: 0.375rem;
}

/* ============================================================
   Cube — BMW 코퍼레이트
   ============================================================ */
[data-theme="cube"] {
    /* 회색: 50 surface-soft · 100 hover · 200 hairline · 300 hairline-strong
             400 muted-soft · 500 muted · 600 body · 700~800 ink · 900 surface-dark(navy) */
    --jp-gray-50: 247 247 247;
    --jp-gray-100: 240 240 240;
    --jp-gray-200: 230 230 230;
    --jp-gray-300: 204 204 204;
    --jp-gray-400: 154 154 154;
    --jp-gray-500: 107 107 107;
    --jp-gray-600: 60 60 60;
    --jp-gray-700: 43 43 43;
    --jp-gray-800: 38 38 38;
    --jp-gray-900: 26 33 41;
    --jp-gray-950: 15 20 26;

    /* 파랑: BMW 블루 단일 액션 컬러 (500/600 = primary, 700 = pressed) */
    --jp-blue-50: 238 244 252;
    --jp-blue-100: 219 231 249;
    --jp-blue-200: 185 208 242;
    --jp-blue-300: 141 178 233;
    --jp-blue-400: 90 144 222;
    --jp-blue-500: 28 105 212;
    --jp-blue-600: 28 105 212;
    --jp-blue-700: 6 83 182;
    --jp-blue-800: 4 66 143;
    --jp-blue-900: 3 53 111;
    --jp-blue-950: 2 36 73;

    /* 라운드 전부 0 (rounded-full 만 원형) */
    --jp-r-sm: 0px; --jp-r: 0px; --jp-r-md: 0px; --jp-r-lg: 0px;
    --jp-r-xl: 0px; --jp-r-2xl: 0px; --jp-r-3xl: 0px;

    /* 그림자 → 1px 헤어라인 링 */
    --jp-sh-sm: 0 0 0 1px #e6e6e6; --jp-sh: 0 0 0 1px #e6e6e6; --jp-sh-md: 0 0 0 1px #e6e6e6;
    --jp-sh-lg: 0 0 0 1px #e6e6e6; --jp-sh-xl: 0 0 0 1px #e6e6e6; --jp-sh-2xl: 0 0 0 1px #e6e6e6;

    --jp-fw-medium: 700; --jp-fw-semibold: 700; --jp-fw-bold: 700;
    --jp-ls-tighter: 0; --jp-ls-tight: 0;

    /* 의미 변수 */
    --jp-font: 'Pretendard', 'Inter', -apple-system, BlinkMacSystemFont, system-ui, 'Segoe UI', Roboto,
        'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
    --jp-font-features: normal;
    --jp-fw-body: 400;          /* 가이드는 Light 300 이나 한글 가독성으로 400. 300 으로 바꾸려면 여기만 */
    --jp-fw-display: 700;
    --jp-ls-display: 0;
    --jp-fw-btn: 700;
    --jp-ls-btn: 0.3px;
    --jp-nav-size: 14px;
    --jp-nav-ls: 0.3px;

    --jp-canvas: #ffffff;
    --jp-canvas-image: none;
    --jp-ink: #262626;
    --jp-muted: #6b6b6b;
    --jp-brand: #1c69d4;
    --jp-primary: #1c69d4;
    --jp-primary-active: #0653b6;
    --jp-primary-tint: #eef4fc;
    --jp-primary-tint-border: #b9d0f2;
    --jp-cta-bg: #1c69d4;
    --jp-cta-bg-active: #0653b6;
    --jp-chip-active: #262626;
    --jp-surface-soft: #f7f7f7;
    --jp-surface-dark: #1a2129;
    --jp-hairline: #e6e6e6;
    --jp-hairline-strong: #cccccc;

    --jp-r-xs: 0px;             /* 툴팁·간트 막대·스크롤바 */
    --jp-r-chip: 0px;           /* 칩·스위처 */
    --jp-r-btn: 0px;            /* CTA 버튼 */
    --jp-r-card: 0px;           /* 인라인 스타일 카드·패널 */
    --jp-r-msg: 0px;            /* 채팅 말풍선 */
    --jp-sh-card: 0 0 0 1px #e6e6e6;
    --jp-sh-float: 0 0 0 1px #e6e6e6;
    --jp-sh-bordered: 0 0 #0000;   /* border 가 이미 있는 요소의 shadow-* */
    --jp-hover-ring: 0 0 0 1px #262626;
}

/* ============================================================
   Cloud — Airtable 에디토리얼
   ============================================================ */
[data-theme="cloud"] {
    /* 회색: 50 surface-soft #f8fafc · 200 hairline #dddddd · 400 border-strong #9297a0
             500~600 muted · 700 body #333840 · 800~900 ink/surface-dark #181d26 */
    --jp-gray-50: 248 250 252;
    --jp-gray-100: 241 243 245;
    --jp-gray-200: 221 221 221;
    --jp-gray-300: 200 203 208;
    --jp-gray-400: 146 151 160;
    --jp-gray-500: 92 97 105;
    --jp-gray-600: 65 69 77;
    --jp-gray-700: 51 56 64;
    --jp-gray-800: 24 29 38;
    --jp-gray-900: 24 29 38;
    --jp-gray-950: 13 18 24;

    /* 파랑 = 링크 블루 #1b61c9 (CTA 는 아래 --jp-cta-bg 로 근흑) */
    --jp-blue-50: 238 244 252;
    --jp-blue-100: 214 228 247;
    --jp-blue-200: 179 205 240;
    --jp-blue-300: 134 174 230;
    --jp-blue-400: 79 137 217;
    --jp-blue-500: 27 97 201;
    --jp-blue-600: 27 97 201;
    --jp-blue-700: 23 79 163;
    --jp-blue-800: 26 56 102;
    --jp-blue-900: 20 42 77;
    --jp-blue-950: 14 30 56;

    /* 라운드 계층: 6 입력 · 10 콘텐츠 카드 · 12 CTA/대형 카드 */
    --jp-r-sm: 6px; --jp-r: 6px; --jp-r-md: 10px; --jp-r-lg: 12px;
    --jp-r-xl: 12px; --jp-r-2xl: 12px; --jp-r-3xl: 16px;

    /* 그림자 없음 → 헤어라인 링 (color-block first) */
    --jp-sh-sm: 0 0 0 1px #dddddd; --jp-sh: 0 0 0 1px #dddddd; --jp-sh-md: 0 0 0 1px #dddddd;
    --jp-sh-lg: 0 0 0 1px #dddddd; --jp-sh-xl: 0 0 0 1px #dddddd; --jp-sh-2xl: 0 0 0 1px #dddddd;

    /* 굵기: 400/500 만. 600·700 은 500 으로 */
    --jp-fw-medium: 500; --jp-fw-semibold: 500; --jp-fw-bold: 500;
    --jp-ls-tighter: 0; --jp-ls-tight: 0;

    --jp-font: 'Pretendard', 'Inter', -apple-system, BlinkMacSystemFont, system-ui, 'Segoe UI', Roboto,
        'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
    --jp-font-features: normal;
    --jp-fw-body: 400;
    --jp-fw-display: 400;       /* 디스플레이는 400 — 강조는 크기·색 대비로 */
    --jp-ls-display: 0;
    --jp-fw-btn: 500;
    --jp-ls-btn: 0;
    --jp-nav-size: 14px;
    --jp-nav-ls: 0;

    --jp-canvas: #ffffff;
    --jp-canvas-image: none;
    --jp-ink: #181d26;
    --jp-muted: #41454d;
    --jp-brand: #181d26;        /* 워드마크는 잉크 */
    --jp-primary: #1b61c9;      /* 링크/포커스/선택 상태 */
    --jp-primary-active: #1a3866;
    --jp-primary-tint: #eef4fc;
    --jp-primary-tint-border: #b3cdf0;
    --jp-cta-bg: #181d26;       /* 주 CTA 는 근흑 — 링크 블루가 아니다 */
    --jp-cta-bg-active: #0d1218;
    --jp-chip-active: #181d26;
    --jp-surface-soft: #f8fafc;
    --jp-surface-dark: #181d26;
    --jp-hairline: #dddddd;
    --jp-hairline-strong: #9297a0;

    --jp-r-xs: 4px;
    --jp-r-chip: 6px;
    --jp-r-btn: 12px;
    --jp-r-card: 10px;
    --jp-r-msg: 10px;
    --jp-sh-card: 0 0 0 1px #dddddd;
    --jp-sh-float: 0 0 0 1px #dddddd;
    --jp-sh-bordered: 0 0 #0000;
    --jp-hover-ring: 0 0 0 1px #181d26;
}

/* ============================================================
   Stripe
   ============================================================ */
[data-theme="stripe"] {
    /* 회색: 50 canvas-soft #f6f9fc · 200 hairline #e3e8ee · 300 hairline-input(완화)
             500 ink-mute #64748d · 700 ink-secondary #273951 · 800 ink #0d253d · 900 brand-dark #1c1e54 */
    --jp-gray-50: 246 249 252;
    --jp-gray-100: 238 242 247;
    --jp-gray-200: 227 232 238;
    --jp-gray-300: 207 215 224;
    --jp-gray-400: 136 152 170;
    --jp-gray-500: 100 116 141;
    --jp-gray-600: 79 91 118;
    --jp-gray-700: 39 57 81;
    --jp-gray-800: 13 37 61;
    --jp-gray-900: 28 30 84;
    --jp-gray-950: 10 22 40;

    /* 파랑 = 인디고 #533afd (600 primary · 700 deep · 800 press · 900 brand-dark) */
    --jp-blue-50: 240 238 254;
    --jp-blue-100: 224 220 254;
    --jp-blue-200: 196 189 253;
    --jp-blue-300: 162 154 252;
    --jp-blue-400: 124 111 253;
    --jp-blue-500: 83 58 253;
    --jp-blue-600: 83 58 253;
    --jp-blue-700: 68 52 212;
    --jp-blue-800: 46 43 140;
    --jp-blue-900: 28 30 84;
    --jp-blue-950: 20 22 60;

    /* 라운드: 6 입력 · 8 컴팩트 카드 · 12 카드 · 16 목업 크롬 (버튼은 아래 --jp-r-btn 로 필) */
    --jp-r-sm: 6px; --jp-r: 6px; --jp-r-md: 8px; --jp-r-lg: 12px;
    --jp-r-xl: 16px; --jp-r-2xl: 16px; --jp-r-3xl: 16px;

    /* 그림자: 헤어라인 + 푸른빛 Level 1 / Level 2 */
    --jp-sh-sm: 0 0 0 1px #e3e8ee, 0 1px 3px rgba(0, 55, 112, 0.08);
    --jp-sh: 0 0 0 1px #e3e8ee, 0 1px 3px rgba(0, 55, 112, 0.08);
    --jp-sh-md: 0 0 0 1px #e3e8ee, 0 8px 24px rgba(0, 55, 112, 0.08), 0 2px 6px rgba(0, 55, 112, 0.04);
    --jp-sh-lg: 0 0 0 1px #e3e8ee, 0 8px 24px rgba(0, 55, 112, 0.08), 0 2px 6px rgba(0, 55, 112, 0.04);
    --jp-sh-xl: 0 0 0 1px #e3e8ee, 0 8px 24px rgba(0, 55, 112, 0.08), 0 2px 6px rgba(0, 55, 112, 0.04);
    --jp-sh-2xl: 0 0 0 1px #e3e8ee, 0 8px 24px rgba(0, 55, 112, 0.08), 0 2px 6px rgba(0, 55, 112, 0.04);

    /* 굵기: 얇게. 500/600/700 → 400 (디스플레이는 300) */
    --jp-fw-medium: 400; --jp-fw-semibold: 400; --jp-fw-bold: 400;
    --jp-ls-tighter: -0.05em; --jp-ls-tight: -0.025em;

    --jp-font: 'Pretendard', 'Inter', -apple-system, BlinkMacSystemFont, system-ui, 'Segoe UI', Roboto,
        'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
    --jp-font-features: "ss01", "tnum";   /* 스타일세트 + 숫자 등폭(금액 표) */
    --jp-fw-body: 400;          /* 가이드는 300. 한글 본문 가독성으로 400 */
    --jp-fw-display: 300;       /* 얇은 디스플레이 + 음수 자간 = Stripe 시그니처 */
    --jp-ls-display: -0.02em;
    --jp-fw-btn: 400;
    --jp-ls-btn: 0;
    --jp-nav-size: 15px;
    --jp-nav-ls: 0;

    --jp-canvas: #ffffff;
    /* 상단 그라디언트 워시 (크림 → 셔벗 → 라벤더 → 인디고 → 루비), 아래로 흰 캔버스 */
    --jp-canvas-image:
        radial-gradient(38% 260px at 8% 0%, rgba(245, 233, 212, 0.9) 0%, rgba(245, 233, 212, 0) 70%),
        radial-gradient(34% 240px at 32% 0%, rgba(252, 171, 121, 0.45) 0%, rgba(252, 171, 121, 0) 70%),
        radial-gradient(36% 260px at 56% 0%, rgba(185, 185, 249, 0.6) 0%, rgba(185, 185, 249, 0) 70%),
        radial-gradient(30% 240px at 78% 0%, rgba(83, 58, 253, 0.22) 0%, rgba(83, 58, 253, 0) 70%),
        radial-gradient(34% 240px at 98% 0%, rgba(234, 34, 97, 0.28) 0%, rgba(234, 34, 97, 0) 70%);
    --jp-ink: #0d253d;
    --jp-muted: #64748d;
    --jp-brand: #533afd;
    --jp-primary: #533afd;
    --jp-primary-active: #2e2b8c;
    --jp-primary-tint: #f0eefe;
    --jp-primary-tint-border: #b9b9f9;
    --jp-cta-bg: #533afd;
    --jp-cta-bg-active: #2e2b8c;
    --jp-chip-active: #533afd;
    --jp-surface-soft: #f6f9fc;
    --jp-surface-dark: #1c1e54;
    --jp-hairline: #e3e8ee;
    --jp-hairline-strong: #a8c3de;

    --jp-r-xs: 4px;
    --jp-r-chip: 9999px;
    --jp-r-btn: 9999px;         /* 모든 버튼은 필 */
    --jp-r-card: 12px;
    --jp-r-msg: 12px;
    --jp-sh-card: 0 0 0 1px #e3e8ee, 0 1px 3px rgba(0, 55, 112, 0.08);
    --jp-sh-float: 0 0 0 1px #e3e8ee, 0 8px 24px rgba(0, 55, 112, 0.08), 0 2px 6px rgba(0, 55, 112, 0.04);
    --jp-sh-bordered: 0 1px 3px rgba(0, 55, 112, 0.08);
    --jp-hover-ring: 0 0 0 1px #a8c3de, 0 8px 24px rgba(0, 55, 112, 0.08);
}

/* ============================================================
   공통 보정 규칙 — data-theme 가 있는 모든 테마에 적용 (기본 테마는 속성이 없어 제외)
   ============================================================ */

/* 서체. 페이지마다 `* { font-family: Spoqa }` 가 있어 상속이 끊기므로 * 로 덮되 모노스페이스는 제외 */
[data-theme] *:not(.font-mono):not(pre):not(code):not(kbd) {
    font-family: var(--jp-font);
}

[data-theme] body {
    background-color: var(--jp-canvas);          /* body 의 bg-gray-50 보다 우선 */
    background-image: var(--jp-canvas-image);
    background-repeat: no-repeat;
    color: var(--jp-ink);
    font-weight: var(--jp-fw-body);
    font-feature-settings: var(--jp-font-features);
    letter-spacing: 0;
    -webkit-font-smoothing: antialiased;
}

[data-theme] h1,
[data-theme] h2,
[data-theme] h3 {
    font-weight: var(--jp-fw-display);
    letter-spacing: var(--jp-ls-display);
}

/* 색 채움 CTA (bg-blue-500/600/700 버튼·링크): 배경은 테마 CTA 색, 라운드·굵기는 버튼 토큰 */
[data-theme] :is(button, a):is([class~="bg-blue-500"], [class~="bg-blue-600"], [class~="bg-blue-700"]) {
    background-color: var(--jp-cta-bg);
}

[data-theme] :is(button, a):is([class~="bg-blue-500"], [class~="bg-blue-600"], [class~="bg-blue-700"]):is(:hover, :active) {
    background-color: var(--jp-cta-bg-active);
}

[data-theme] :is(button, a):is(
    [class~="bg-blue-500"], [class~="bg-blue-600"], [class~="bg-blue-700"],
    [class~="bg-green-500"], [class~="bg-green-600"], [class~="bg-green-700"],
    [class~="bg-red-500"], [class~="bg-red-600"], [class~="bg-red-700"],
    [class~="bg-gray-700"], [class~="bg-gray-800"], [class~="bg-gray-900"], [class~="bg-black"],
    [class~="bg-indigo-600"], [class~="bg-purple-600"], [class~="bg-orange-500"], [class~="bg-orange-600"],
    [class~="bg-emerald-600"]
):not(.font-normal) {
    font-weight: var(--jp-fw-btn);
    letter-spacing: var(--jp-ls-btn);
    border-radius: var(--jp-r-btn);
}

/* 외곽선 버튼 (block 카드 링크는 제외) */
[data-theme] button.border,
[data-theme] a.border:is(.inline-flex, .inline-block) {
    font-weight: var(--jp-fw-btn);
    border-radius: var(--jp-r-btn);
}

/* border 가 이미 있는 카드/입력은 링을 겹치지 않는다 (2px 방지) */
[data-theme] .border:is(.shadow-sm, .shadow, .shadow-md, .shadow-lg, .shadow-xl, .shadow-2xl) {
    --tw-shadow: var(--jp-sh-bordered);
}

/* 입력 포커스: 파란 링 유지 + 테두리 primary */
[data-theme] :is(input, select, textarea):focus {
    border-color: var(--jp-primary);
}

[data-theme] ::-webkit-scrollbar-track,
[data-theme] ::-webkit-scrollbar-thumb {
    border-radius: var(--jp-r-xs);
}

/* ---------- 상단 헤더 (topmenu.js) ---------- */
[data-theme] header nav > a,
[data-theme] header nav button {
    font-size: var(--jp-nav-size);
    letter-spacing: var(--jp-nav-ls);
}

[data-theme] #headerBrandName {
    color: var(--jp-brand);
    letter-spacing: 0;
}

/* ---------- 테마 스위처 ---------- */
.jp-theme-switch {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid var(--jp-hairline-strong);
    border-radius: var(--jp-r-chip);
    overflow: hidden;
    font-size: 11px;
    line-height: 1;
    user-select: none;
}

.jp-theme-switch button {
    padding: 6px 9px;
    background: #fff;
    color: rgb(var(--jp-gray-600));
    font-weight: var(--jp-fw-medium);
    letter-spacing: 0.3px;
    cursor: pointer;
    border: 0;
    border-radius: 0;
    white-space: nowrap;
}

.jp-theme-switch button + button {
    border-left: 1px solid var(--jp-hairline-strong);
}

.jp-theme-switch button:hover {
    background: var(--jp-surface-soft);
}

.jp-theme-switch button[aria-pressed="true"] {
    background: var(--jp-ink);
    color: #fff;
}

/* 테마 선택 셀렉트박스 (2026-09-19 버튼 4개 → 셀렉트 1개로 헤더 공간 확보) */
.jp-theme-select {
    height: 28px;
    padding: 0 22px 0 8px;
    border: 1px solid var(--jp-hairline-strong);
    border-radius: var(--jp-r-chip);
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236b7280' stroke-width='1.5' fill='none'/%3E%3C/svg%3E") no-repeat right 7px center;
    color: rgb(var(--jp-gray-600));
    font-size: 12px;
    font-weight: var(--jp-fw-medium);
    line-height: 1;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}
.jp-theme-select:hover { background-color: var(--jp-surface-soft); }
.jp-theme-select:focus { outline: 2px solid rgb(var(--jp-blue-500) / 0.4); outline-offset: 1px; }

/* 모바일(☰ 메뉴 안): 손가락으로 누르기 쉽게 */
@media (max-width: 767px) {
    .jp-theme-switch button {
        padding: 8px 12px;
    }
    .jp-theme-select {
        height: 36px;
        font-size: 14px;
    }
}

/* ---------- 페이지별 인라인 스타일 보정 ---------- */
/* dashboard.html 통계 타일 */
[data-theme] .stat-tile {
    border-radius: var(--jp-r-card);
    box-shadow: none;
    border-color: var(--jp-hairline);
}

[data-theme] a.stat-tile:hover {
    box-shadow: var(--jp-hover-ring);
    transform: none;
}

[data-theme] .stat-label {
    color: var(--jp-muted);
    letter-spacing: 0;
}

/* styles.css 공통 카드 호버 */
[data-theme] .card-hover:hover {
    transform: none;
    box-shadow: var(--jp-hover-ring);
}

/* 툴팁 / 채팅 말풍선 */
[data-theme] .tooltip::after {
    border-radius: var(--jp-r-xs);
    background: var(--jp-surface-dark);
}

[data-theme] #chatModal .chat-message {
    border-radius: var(--jp-r-msg);
}

[data-theme] #chatModal .chat-message.mine {
    background-color: var(--jp-primary);
}

/* admin/lead-program.html */
[data-theme] .tab-btn.active {
    border-color: var(--jp-primary);
    color: var(--jp-primary);
    background: var(--jp-primary-tint);
}

[data-theme] .toggle-switch input:checked + .toggle-slider,
[data-theme] .lp-q:hover {
    background: var(--jp-primary);
}

[data-theme] .lp-sec {
    border-radius: var(--jp-r-card);
    border-color: var(--jp-hairline);
}

[data-theme] .tp-screen .trust-box {
    border-radius: var(--jp-r-card);
}

/* admin/lead-submissions.html 상태 탭 */
[data-theme] .status-tab {
    border-color: var(--jp-hairline-strong);
    border-radius: var(--jp-r-chip);
}

/* 선택 안 된 탭만 회색 글씨 — 활성 탭(진한 배경)까지 회색이 되면 글씨가 안 보인다 (2026-09-20) */
[data-theme] .status-tab:not(.active) {
    color: rgb(var(--jp-gray-600));
}

[data-theme] .status-tab:not(.active):hover {
    background: var(--jp-surface-soft);
}

[data-theme] .status-tab.active {
    background: var(--jp-chip-active);
    border-color: var(--jp-chip-active);
    color: #fff;
}

[data-theme] .submission-card:hover {
    box-shadow: var(--jp-hover-ring);
}

/* leads/manual-register.html 옵션 카드 */
[data-theme] .opt-card.selected {
    border-color: var(--jp-primary);
    background: var(--jp-primary-tint);
}

[data-theme] .opt-card.selected .opt-check {
    background: var(--jp-primary);
    border-color: var(--jp-primary);
}

/* projects/timeline.html 간트 */
[data-theme] .timeline-bar {
    border-radius: var(--jp-r-xs);
    box-shadow: none;
}

[data-theme] .timeline-bar:hover {
    box-shadow: var(--jp-hover-ring);
}

[data-theme] .timeline-cell.today {
    background-color: var(--jp-primary-tint);
}

[data-theme] .day-header.today {
    background-color: var(--jp-primary);
}

[data-theme] .timeline-cell.weekend,
[data-theme] .day-header.weekend {
    background-color: var(--jp-surface-soft);
}

[data-theme] .day-header,
[data-theme] .timeline-cell {
    border-color: var(--jp-hairline);
}

/* customers/detail.html 사진 썸네일 */
[data-theme] .photo-thumbnail {
    border-radius: var(--jp-r-card);
}

/* ---------- 기능문의 위젯 (js/support-widget.js 가 자체 <style> 을 주입 — Tailwind 밖) ---------- */
[data-theme] #spw-btn {
    background: var(--jp-primary);
    box-shadow: var(--jp-sh-float);
}

[data-theme] #spw-panel {
    border-radius: var(--jp-r-card);
    box-shadow: var(--jp-sh-float);
}

@media (max-width: 480px) {
    [data-theme] #spw-panel {
        border-radius: 0;                        /* 폰에서는 전체 화면 */
    }
}

[data-theme] .spw-head {
    background: var(--jp-surface-dark);         /* 그라디언트 없음 */
}

[data-theme] .spw-head button {
    border-radius: var(--jp-r-xs);
}

[data-theme] .spw-body {
    background: var(--jp-surface-soft);
}

[data-theme] .spw-msg,
[data-theme] .spw-row textarea {
    border-radius: var(--jp-r-msg);
}

[data-theme] .spw-att a,
[data-theme] .spw-att img,
[data-theme] .spw-ic {
    border-radius: var(--jp-r-xs);
}

[data-theme] .spw-chip,
[data-theme] .spw-status {
    border-radius: var(--jp-r-chip);
}

[data-theme] .spw-msg.user,
[data-theme] .spw-send {
    background: var(--jp-primary);
    border-color: var(--jp-primary);
}

[data-theme] .spw-msg.admin {
    color: var(--jp-ink);
    border-color: var(--jp-hairline);
}

[data-theme] .spw-chip {
    background: var(--jp-primary-tint);
    color: var(--jp-primary-active);
    border-color: var(--jp-primary-tint-border);
}

[data-theme] .spw-chip button {
    color: var(--jp-primary-active);
}

[data-theme] .spw-row textarea,
[data-theme] .spw-foot,
[data-theme] .spw-ic {
    border-color: var(--jp-hairline);
}

[data-theme] .spw-row textarea:focus {
    border-color: var(--jp-primary);
}