/* v2 CSS Variables — 토스/카카오 벤치마킹 기반 디자인 시스템 */
:root {
    /* 색상 — 메인 */
    --color-primary: #2563eb;
    --color-primary-light: #3b82f6;
    --color-primary-dark: #1d4ed8;
    --color-primary-bg: #eff6ff;
    --color-primary-rgb: 37, 99, 235;

    /* 색상 — 상태 */
    --color-success: #16a34a;
    --color-success-bg: #f0fdf4;
    --color-warning: #d97706;
    --color-warning-bg: #fffbeb;
    --color-danger: #dc2626;
    --color-danger-bg: #fef2f2;
    --color-info: #0891b2;
    --color-info-bg: #ecfeff;

    /* 색상 — 우선순위 */
    --priority-urgent: #dc2626;
    --priority-high: #ea580c;
    --priority-normal: #2563eb;
    --priority-low: #6b7280;

    /* 색상 — 상태 배지 */
    --status-pending: #f59e0b;
    --status-pending-bg: #fffbeb;
    --status-processing: #3b82f6;
    --status-processing-bg: #eff6ff;
    --status-completed: #16a34a;
    --status-completed-bg: #f0fdf4;
    --status-hold: #6b7280;
    --status-hold-bg: #f3f4f6;

    /* 색상 — 중립 */
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --gray-900: #111827;

    /* 색상 — 배경/테두리 */
    --bg-body: #f8fafc;
    --bg-card: #ffffff;
    --bg-sidebar: #1e293b;
    --border-color: #e2e8f0;
    --border-light: #f1f5f9;

    /* 텍스트 */
    --text-primary: #1e293b;
    --text-secondary: #64748b;
    --text-muted: #94a3b8;
    --text-inverse: #ffffff;

    /* 타이포그래피 */
    --font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

    --text-xs: 0.75rem;    /* 12px */
    --text-sm: 0.8125rem;  /* 13px */
    --text-base: 0.875rem; /* 14px */
    --text-lg: 1rem;       /* 16px */
    --text-xl: 1.125rem;   /* 18px */
    --text-2xl: 1.5rem;    /* 24px */
    --text-3xl: 1.875rem;  /* 30px */

    --font-normal: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;

    --leading-tight: 1.25;
    --leading-normal: 1.5;
    --leading-relaxed: 1.75;

    /* 간격 */
    --space-1: 0.25rem;   /* 4px */
    --space-2: 0.5rem;    /* 8px */
    --space-3: 0.75rem;   /* 12px */
    --space-4: 1rem;      /* 16px */
    --space-5: 1.25rem;   /* 20px */
    --space-6: 1.5rem;    /* 24px */
    --space-8: 2rem;      /* 32px */
    --space-10: 2.5rem;   /* 40px */
    --space-12: 3rem;     /* 48px */

    /* 둥글기 */
    --radius-sm: 0.25rem;   /* 4px */
    --radius-md: 0.375rem;  /* 6px */
    --radius-lg: 0.5rem;    /* 8px */
    --radius-xl: 0.75rem;   /* 12px */
    --radius-2xl: 1rem;     /* 16px */
    --radius-full: 9999px;

    /* 그림자 */
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
    --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1);
    --shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1);

    /* 트랜지션 */
    --transition-fast: 150ms ease;
    --transition-normal: 200ms ease;
    --transition-slow: 300ms ease;

    /* 레이아웃 */
    --sidebar-width: 240px;
    --sidebar-collapsed: 64px;
    --header-height: 56px;
    --content-max-width: 100%;
    --table-row-height: 48px;

    /* z-index */
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-modal-backdrop: 850;
    --z-modal: 870;
    --z-tooltip: 600;
    --z-mobile-nav: 800;
    --z-bottomsheet-backdrop: 900;
    --z-bottomsheet: 950;
    --z-toast: 1000;

/* ===== 민원 카테고리 색상 시스템 ===== */
    /* AI 입력바 */
    --ai-bar-bg: linear-gradient(135deg, #f0f4ff, #e8f0fe);
    --ai-bar-border: #4285f4;
    --ai-bar-btn-bg: #4285f4;
    --ai-bar-btn-color: #ffffff;
    --ai-bar-link-color: #4285f4;

    /* AI 결과 프리뷰 */
    --ai-result-bg: #f8f9fa;
    --ai-result-border: #e9ecef;
    --ai-result-title-color: #333333;
    --ai-result-sub-color: #6c757d;

    /* AI 신뢰도 */
    --ai-conf-high-bg: #28a745;
    --ai-conf-medium-bg: #ffc107;
    --ai-conf-low-bg: #dc3545;

    /* 카테고리 칩 기본 (DB color 없을 때 폴백) */
    --cat-chip-bg: #f3f4f6;
    --cat-chip-color: #6b7280;

    /* 카드 3줄 배경 */
    --card-row3-bg: #f9fafb;

    /* 플로팅 메뉴 */
    --float-menu-bg: var(--bg-card, #fff);
    --float-menu-border: var(--border-color, #e5e7eb);
    --float-menu-hover: var(--gray-50, #f9fafb);

    /* 퀵칩 */
    --ai-qchip-bg: var(--bg-card, #fff);
    --ai-qchip-border: var(--border-color, #e0e0e0);
    --ai-qchip-hover-bg: var(--color-primary-bg, #e8f0fe);
}

/* ===== 다크 모드 ===== */
/* OS 설정 따르기 (수동 light 설정 시 제외) */
:root[data-theme=dark] {
    /* 배경 */
        --bg-body: #1a1a2e;
        --bg-card: #16213e;
        --bg-sidebar: #0f3460;

        /* 텍스트 */
        --text-primary: #e0e0e0;
        --text-secondary: #a0a0a0;
        --text-tertiary: #8b8b8b;
        --text-muted: #707070;
        --text-inverse: #1a1a2e;

        /* 테두리 */
        --border-color: rgba(255,255,255,0.1);
        --border-light: rgba(255,255,255,0.05);

        /* 중립 색상 역전 */
        --gray-50: #1a1a2e;
        --gray-100: #16213e;
        --gray-200: #1f2b47;
        --gray-300: #2a3a55;
        --gray-400: #707070;
        --gray-500: #a0a0a0;
        --gray-600: #c0c0c0;
        --gray-700: #d0d0d0;
        --gray-800: #e0e0e0;
        --gray-900: #f0f0f0;

        /* 메인 색상 밝기 조정 */
        --color-primary: #4a8af4;
        --color-primary-light: #6aa3f7;
        --color-primary-dark: #3b7ae0;
        --color-primary-bg: #1a2d50;
        --color-primary-rgb: 74, 138, 244;

        /* 상태색 밝기 조정 */
        --color-success: #22c55e;
        --color-success-bg: #14342a;
        --color-warning: #f59e0b;
        --color-warning-bg: #3d2a08;
        --color-danger: #ef4444;
        --color-danger-bg: #3d1212;
        --color-info: #22d3ee;
        --color-info-bg: #143040;

        --status-pending-bg: #3d2a08;
        --status-processing-bg: #1a2d50;
        --status-completed-bg: #14342a;
        --status-hold-bg: #1f2b47;

        /* 그림자 (다크모드에서 더 진하게) */
        --shadow-sm: 0 1px 3px rgba(0,0,0,0.4);
        --shadow-md: 0 4px 8px rgba(0,0,0,0.5);
        --shadow-lg: 0 10px 20px rgba(0,0,0,0.5);
        --shadow-xl: 0 20px 30px rgba(0,0,0,0.5);
    }

/* 수동 다크 모드 토글 */
[data-theme=dark] {
    /* 배경 */
        --bg-body: #1a1a2e;
        --bg-card: #16213e;
        --bg-sidebar: #0f3460;

        /* 텍스트 */
        --text-primary: #e0e0e0;
        --text-secondary: #a0a0a0;
        --text-tertiary: #8b8b8b;
        --text-muted: #707070;
        --text-inverse: #1a1a2e;

        /* 테두리 */
        --border-color: rgba(255,255,255,0.1);
        --border-light: rgba(255,255,255,0.05);

        /* 중립 색상 역전 */
        --gray-50: #1a1a2e;
        --gray-100: #16213e;
        --gray-200: #1f2b47;
        --gray-300: #2a3a55;
        --gray-400: #707070;
        --gray-500: #a0a0a0;
        --gray-600: #c0c0c0;
        --gray-700: #d0d0d0;
        --gray-800: #e0e0e0;
        --gray-900: #f0f0f0;

        /* 메인 색상 밝기 조정 */
        --color-primary: #4a8af4;
        --color-primary-light: #6aa3f7;
        --color-primary-dark: #3b7ae0;
        --color-primary-bg: #1a2d50;
    --color-primary-rgb: 74, 138, 244;

        /* 상태색 밝기 조정 */
        --color-success: #22c55e;
        --color-success-bg: #14342a;
        --color-warning: #f59e0b;
        --color-warning-bg: #3d2a08;
        --color-danger: #ef4444;
        --color-danger-bg: #3d1212;
        --color-info: #22d3ee;
        --color-info-bg: #143040;

        --status-pending-bg: #3d2a08;
        --status-processing-bg: #1a2d50;
        --status-completed-bg: #14342a;
        --status-hold-bg: #1f2b47;

        /* 그림자 (다크모드에서 더 진하게) */
        --shadow-sm: 0 1px 3px rgba(0,0,0,0.4);
        --shadow-md: 0 4px 8px rgba(0,0,0,0.5);
        --shadow-lg: 0 10px 20px rgba(0,0,0,0.5);
        --shadow-xl: 0 20px 30px rgba(0,0,0,0.5);
}

/* ===== 캘린더 카테고리 색상 ===== */
:root {
    --cal-check-bg: #fce8e6;
    --cal-check-text: #c5221f;
    --cal-check-bar: #d50000;
    --cal-meeting-bg: #e1f5fe;
    --cal-meeting-text: #01579b;
    --cal-meeting-bar: #039be5;
    --cal-complaint-bg: #fce4ec;
    --cal-complaint-text: #c62828;
    --cal-complaint-bar: #e67c73;
    --cal-construction-bg: #fff3e0;
    --cal-construction-text: #e65100;
    --cal-construction-bar: #f4511e;
    --cal-other-bg: #f5f5f5;
    --cal-other-text: #424242;
    --cal-other-bar: #616161;
    --cal-done-color: #22c55e;
    /* Category: vendor_visit - 초록 */
    --cal-vendor-bg: #E8F5E9;
    --cal-vendor-text: #2E7D32;
    --cal-vendor-bar: #4CAF50;
    /* Category: contract - 주황 */
    --cal-contract-bg: #FFF3E0;
    --cal-contract-text: #E65100;
    --cal-contract-bar: #FF9800;
    /* Category: resident - 보라 */
    --cal-resident-bg: #F3E5F5;
    --cal-resident-text: #7B1FA2;
    --cal-resident-bar: #9C27B0;
}

:root[data-theme=dark] {
        --cal-check-bg: #3b1c1c;
        --cal-check-text: #fca5a5;
        --cal-check-bar: #ef4444;
        --cal-meeting-bg: #1a3a4a;
        --cal-meeting-text: #7dd3fc;
        --cal-meeting-bar: #38bdf8;
        --cal-complaint-bg: #3b1c2a;
        --cal-complaint-text: #fda4af;
        --cal-complaint-bar: #fb7185;
        --cal-construction-bg: #3d2e0a;
        --cal-construction-text: #fdba74;
        --cal-construction-bar: #fb923c;
        --cal-other-bg: #334155;
        --cal-other-text: #d1d5db;
        --cal-other-bar: #9ca3af;
        --cal-done-color: #4ade80;
        --cal-vendor-bg: #1B5E20;
        --cal-vendor-text: #A5D6A7;
        --cal-vendor-bar: #66BB6A;
        --cal-contract-bg: #E65100;
        --cal-contract-text: #FFCC80;
        --cal-contract-bar: #FFA726;
        --cal-resident-bg: #4A148C;
        --cal-resident-text: #CE93D8;
        --cal-resident-bar: #AB47BC;
        --ai-bar-bg: linear-gradient(135deg, #1a2540, #1e2d50);
        --ai-bar-border: #4a8af4;
        --ai-bar-btn-bg: #4a8af4;
        --ai-bar-btn-color: #e0e0e0;
        --ai-bar-link-color: #6aa3f7;

        --ai-result-bg: #1f2b47;
        --ai-result-border: rgba(255,255,255,0.1);
        --ai-result-title-color: #e0e0e0;
        --ai-result-sub-color: #a0a0a0;

        --ai-conf-high-bg: #16a34a;
        --ai-conf-medium-bg: #d97706;
        --ai-conf-low-bg: #ef4444;

        --cat-chip-bg: #2a3a55;
        --cat-chip-color: #a0a0a0;

        --card-row3-bg: #1f2b47;
    }

[data-theme=dark] {
    --cal-check-bg: #3b1c1c;
    --cal-check-text: #fca5a5;
    --cal-check-bar: #ef4444;
    --cal-meeting-bg: #1a3a4a;
    --cal-meeting-text: #7dd3fc;
    --cal-meeting-bar: #38bdf8;
    --cal-complaint-bg: #3b1c2a;
    --cal-complaint-text: #fda4af;
    --cal-complaint-bar: #fb7185;
    --cal-construction-bg: #3d2e0a;
    --cal-construction-text: #fdba74;
    --cal-construction-bar: #fb923c;
    --cal-other-bg: #334155;
    --cal-other-text: #d1d5db;
    --cal-other-bar: #9ca3af;
    --cal-done-color: #4ade80;
    --cal-vendor-bg: #1B5E20;
    --cal-vendor-text: #A5D6A7;
    --cal-vendor-bar: #66BB6A;
    --cal-contract-bg: #E65100;
    --cal-contract-text: #FFCC80;
    --cal-contract-bar: #FFA726;
    --cal-resident-bg: #4A148C;
    --cal-resident-text: #CE93D8;
    --cal-resident-bar: #AB47BC;
    --ai-bar-bg: linear-gradient(135deg, #1a2540, #1e2d50);
    --ai-bar-border: #4a8af4;
    --ai-bar-btn-bg: #4a8af4;
    --ai-bar-btn-color: #e0e0e0;
    --ai-bar-link-color: #6aa3f7;

    --ai-result-bg: #1f2b47;
    --ai-result-border: rgba(255,255,255,0.1);
    --ai-result-title-color: #e0e0e0;
    --ai-result-sub-color: #a0a0a0;

    --ai-conf-high-bg: #16a34a;
    --ai-conf-medium-bg: #d97706;
    --ai-conf-low-bg: #ef4444;

    --cat-chip-bg: #2a3a55;
    --cat-chip-color: #a0a0a0;

    --card-row3-bg: #1f2b47;
}

/* ===== D3-1 디자인토큰 (2026-04-16) — 듀얼 radius + teal 팔레트 + 파스텔 확장 ===== */
/* 기존 --radius-* / --shadow-* 체계 유지. 프로토타입(bank-queue/settlement-slide) 정답지와 호환되도록 별칭/보강만 추가. */
:root {
    /* radius 듀얼 별칭 (프로토타입 호환) — 기존 --radius-md(6px)/--radius-sm(4px)/--radius-xl(12px) 그대로 재활용 */
    --r: 6px;           /* 버튼/입력/칩 (= --radius-md) */
    --r-sm: 4px;        /* 배지/태그 작은것 (= --radius-sm) */
    --r-lg: 12px;       /* 카드/패널/모달 (= --radius-xl) */

    /* teal 팔레트 — AI박스, 추천뱃지, 정보성 */
    --teal: #0d9488;
    --teal-light: #ccfbf1;
    --teal-dark: #0f766e;

    /* 상태 파스텔 변형 — 칩 배경용 (기존 --color-*-bg 와 다른 톤, 프로토타입 정답지 매칭) */
    --success-light: #dcfce7;
    --warning-light: #fef3c7;
    --danger-light:  #fee2e2;
    --info-light:    #dbeafe;

    /* 보라 (분할매칭/특수상태) */
    --purple: #7c3aed;
    --purple-light: #ede9fe;

    /* 미정의 토큰 보강 (2026-08-10) — 그동안 var(--bg-secondary, #f8f9fa) 같은 폴백이
       다크모드에서도 밝은 값으로 고정되어 '흰 판때기'를 만들었다.
       기존 토큰의 별칭으로 두면 다크 전환이 자동으로 따라온다. */
    --bg-primary: var(--bg-card);
    /* [2026-08-13] --text-tertiary 는 34곳에서 var(--text-tertiary,#888) 로 쓰이는데
       정의가 한 번도 없었다 → 라이트·다크 모두 #888 고정, 대비 3.5:1 (AA 4.5 미달).
       하필 「정원 미입력」「요금 미확인」「번호 미확인」 같은
       '숨기지 않겠다'고 만든 문구들이 이 색을 쓴다. 별칭이면 다크가 자동 추종한다. */
    /* ★별칭(=secondary)으로 두면 대비는 통과하지만 글자 위계가 3단 → 2단으로 무너져
       「집계 전」「도면 없음」 같은 흐린 표시가 본문과 같은 색이 된다.
       독립값으로 두되 AA(4.5:1) 는 지킨다. 라이트 #78859a = 4.5:1 on #fff */
    --text-tertiary: #78859a;
    --bg-secondary: var(--gray-50);
    --bg-2: var(--gray-100);
    --bg-hover: var(--gray-100);
    --border-color-light: var(--border-light);
    --color-primary-soft: var(--color-primary-bg);
    --color-info-soft: var(--color-info-bg);

    /* 프로토타입 별칭 (호환성) */
    --primary: var(--color-primary);
    --primary-light: var(--info-light);
    --success: var(--color-success);
    --warning: var(--color-warning);
    --danger: var(--color-danger);
    --border: var(--border-color);
    --radius: var(--r-lg);
    --shadow: var(--shadow-sm);
    /* 기존 --shadow-sm/--shadow-lg 값(0 1px 2px .05 / 0 10px 15px .1)은 유지. */
}

/* D3-1 다크모드 대응 */
:root[data-theme=dark] {
        --teal: #2dd4bf;
        --teal-light: #134e48;
        --teal-dark: #5eead4;

        --success-light: #14342a;
        --warning-light: #3d2a08;
        --danger-light:  #3d1212;
        --info-light:    #1a2d50;

        --purple: #a78bfa;
        --purple-light: #2e1e5c;
    }

[data-theme=dark] {
    --teal: #2dd4bf;
    --teal-light: #134e48;
    --teal-dark: #5eead4;

    --success-light: #14342a;
    --warning-light: #3d2a08;
    --danger-light:  #3d1212;
    --info-light:    #1a2d50;

    --purple: #a78bfa;
    --purple-light: #2e1e5c;
}

/* ===== W11 Token: 4단계 헬스 + 모듈 액센트 (라이트) ===== */
:root {
    /* 4단계 헬스 상태 (B안 카드 좌측 띠/배지 통일) */
    --health-ok:       #22c55e;  --health-ok-bg:       #f0fdf4;
    --health-notice:   #3b82f6;  --health-notice-bg:   #eff6ff;
    --health-warning:  #f59e0b;  --health-warning-bg:  #fffbeb;
    --health-critical: #ef4444;  --health-critical-bg: #fef2f2;

    /* 모듈 액센트 (--cal-* 패턴 답습) */
    --module-building:    #2563eb; --module-building-bg:   #eff6ff;
    --module-complaint:   #e67c73; --module-complaint-bg:  #fce4ec;
    --module-vendor:      #4caf50; --module-vendor-bg:     #e8f5e9;
    --module-settlement:  #f4511e; --module-settlement-bg: #fff3e0;
    --module-resident:    #9c27b0; --module-resident-bg:   #f3e5f5;
    --module-device:      #0891b2; --module-device-bg:     #ecfeff;
}

/* W11 Token 다크모드 (OS 설정 따르기) */
:root[data-theme=dark] {
        --health-ok:       #4ade80;  --health-ok-bg:       #0f2818;
        --health-notice:   #60a5fa;  --health-notice-bg:   #0f1d33;
        --health-warning:  #fbbf24;  --health-warning-bg:  #2e1f04;
        --health-critical: #f87171;  --health-critical-bg: #2e0f0f;

        --module-building:    #60a5fa; --module-building-bg:   #0f1d33;
        --module-complaint:   #f0a39b; --module-complaint-bg:  #3a1620;
        --module-vendor:      #81c784; --module-vendor-bg:     #102818;
        --module-settlement:  #ff8a65; --module-settlement-bg: #3a1f0c;
        --module-resident:    #ce93d8; --module-resident-bg:   #2a1138;
        --module-device:      #22d3ee; --module-device-bg:     #082c33;
    }

[data-theme=dark] {
    --health-ok:       #4ade80;  --health-ok-bg:       #0f2818;
    --health-notice:   #60a5fa;  --health-notice-bg:   #0f1d33;
    --health-warning:  #fbbf24;  --health-warning-bg:  #2e1f04;
    --health-critical: #f87171;  --health-critical-bg: #2e0f0f;

    --module-building:    #60a5fa; --module-building-bg:   #0f1d33;
    --module-complaint:   #f0a39b; --module-complaint-bg:  #3a1620;
    --module-vendor:      #81c784; --module-vendor-bg:     #102818;
    --module-settlement:  #ff8a65; --module-settlement-bg: #3a1f0c;
    --module-resident:    #ce93d8; --module-resident-bg:   #2a1138;
    --module-device:      #22d3ee; --module-device-bg:     #082c33;
}