/**
 * WonSpirit 통합 테마 CSS
 * - 전체 프로젝트에서 사용되는 색상 변수 정의
 * - 다크모드 지원을 위한 기반 구조
 */

:root {
    /* ========================================
       Primary 색상 (Tailwind Blue)
       ======================================== */
    --ws-primary: #2563eb;
    --ws-primary-hover: #1d4ed8;
    --ws-primary-light: rgba(37, 99, 235, 0.1);
    --ws-primary-rgb: 37, 99, 235;
    
    /* ========================================
       텍스트 색상 (Tailwind Slate)
       ======================================== */
    --ws-text: #0f172a;           /* slate-900 - 메인 텍스트 */
    --ws-text-emphasis: #334155;  /* slate-700 - 강조 텍스트 */
    --ws-text-secondary: #64748b; /* slate-500 - 보조 텍스트 */
    --ws-text-muted: #94a3b8;     /* slate-400 - 약한 텍스트 */
    --ws-text-rgb: 15, 23, 42;
    
    /* ========================================
       배경 색상
       ======================================== */
    --ws-bg: #f8fafc;             /* slate-50 - 페이지 배경 */
    --ws-bg-card: #ffffff;        /* 카드/컨테이너 배경 */
    --ws-bg-card-rgb: 255, 255, 255;
    --ws-bg-soft: #f1f5f9;        /* slate-100 - 부드러운 배경 */
    --ws-bg-hover: rgba(15, 23, 42, 0.04);
    
    /* ========================================
       테두리 색상
       ======================================== */
    --ws-border: #e2e8f0;         /* slate-200 - 기본 테두리 */
    --ws-border-light: #f1f5f9;   /* slate-100 - 연한 테두리 */
    --ws-border-strong: #cbd5e1;  /* slate-300 - 강한 테두리 */
    
    /* ========================================
       상태 색상
       ======================================== */
    /* Danger (에러/위험) */
    --ws-danger: #ef4444;
    --ws-danger-hover: #dc2626;
    --ws-danger-light: rgba(239, 68, 68, 0.1);
    --ws-danger-rgb: 239, 68, 68;
    
    /* Success (성공) */
    --ws-success: #10b981;
    --ws-success-hover: #059669;
    --ws-success-light: rgba(16, 185, 129, 0.1);
    --ws-success-rgb: 16, 185, 129;
    
    /* Warning (경고) */
    --ws-warning: #f59e0b;
    --ws-warning-hover: #d97706;
    --ws-warning-light: rgba(245, 158, 11, 0.1);
    --ws-warning-rgb: 245, 158, 11;
    
    /* Info (정보) */
    --ws-info: #0ea5e9;
    --ws-info-hover: #0284c7;
    --ws-info-light: rgba(14, 165, 233, 0.1);
    --ws-info-rgb: 14, 165, 233;
    
    /* ========================================
       그림자
       ======================================== */
    --ws-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05);
    --ws-shadow: 0 4px 6px rgba(15, 23, 42, 0.07);
    --ws-shadow-md: 0 10px 15px rgba(15, 23, 42, 0.1);
    --ws-shadow-lg: 0 20px 25px rgba(15, 23, 42, 0.15);
    
    /* ========================================
       Border Radius
       ======================================== */
    --ws-radius-sm: 6px;
    --ws-radius: 8px;
    --ws-radius-md: 12px;
    --ws-radius-lg: 16px;
    --ws-radius-xl: 24px;
    --ws-radius-full: 9999px;
    
    /* ========================================
       폰트
       ======================================== */
    --ws-font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;

    /* ========================================
       트랜지션
       ======================================== */
    --ws-transition-fast: 0.15s ease;
    --ws-transition: 0.2s ease;
    --ws-transition-slow: 0.3s ease;

    /* ========================================
       차트 분석 지표별 컬러 팔레트 (SCA)
       - 7개 지표 + 음수값 공통 컬러
       - 라이트모드 기준 (흰 배경 대비 4.5:1 이상)
       ======================================== */

    /* 배당 (dividend) - 에메랄드 그린 계열 (emerald-600, 대비율 ~4.6:1) */
    --sca-dividend-primary: #059669;
    --sca-dividend-light: rgba(5, 150, 105, 0.10);
    --sca-dividend-hover: #047857;
    --sca-dividend-gradient-start: rgba(5, 150, 105, 0.25);
    --sca-dividend-gradient-end: rgba(5, 150, 105, 0.02);
    --sca-dividend-accent: #10b981;
    --sca-dividend-rgb: 5, 150, 105;

    /* 매수금액 (purchaseAmt) - 스카이 블루 계열 (sky-700, 대비율 ~4.7:1) */
    --sca-purchaseAmt-primary: #0284c7;
    --sca-purchaseAmt-light: rgba(2, 132, 199, 0.10);
    --sca-purchaseAmt-hover: #0369a1;
    --sca-purchaseAmt-gradient-start: rgba(2, 132, 199, 0.25);
    --sca-purchaseAmt-gradient-end: rgba(2, 132, 199, 0.02);
    --sca-purchaseAmt-accent: #0ea5e9;
    --sca-purchaseAmt-rgb: 2, 132, 199;

    /* 순매수금액 (netPurchaseAmt) - 인디고 계열 */
    --sca-netPurchaseAmt-primary: #6366f1;
    --sca-netPurchaseAmt-light: rgba(99, 102, 241, 0.10);
    --sca-netPurchaseAmt-hover: #4f46e5;
    --sca-netPurchaseAmt-gradient-start: rgba(99, 102, 241, 0.25);
    --sca-netPurchaseAmt-gradient-end: rgba(99, 102, 241, 0.02);
    --sca-netPurchaseAmt-accent: #818cf8;
    --sca-netPurchaseAmt-rgb: 99, 102, 241;

    /* 수익 (profit) - 코랄/오렌지 계열 (orange-600, 대비율 ~4.5:1) */
    --sca-profit-primary: #ea580c;
    --sca-profit-light: rgba(234, 88, 12, 0.10);
    --sca-profit-hover: #c2410c;
    --sca-profit-gradient-start: rgba(234, 88, 12, 0.25);
    --sca-profit-gradient-end: rgba(234, 88, 12, 0.02);
    --sca-profit-accent: #f97316;
    --sca-profit-rgb: 234, 88, 12;

    /* 수익률 (profitRate) - 골드/앰버 계열 (amber-700, 대비율 ~5.0:1) */
    --sca-profitRate-primary: #b45309;
    --sca-profitRate-light: rgba(180, 83, 9, 0.10);
    --sca-profitRate-hover: #92400e;
    --sca-profitRate-gradient-start: rgba(180, 83, 9, 0.25);
    --sca-profitRate-gradient-end: rgba(180, 83, 9, 0.02);
    --sca-profitRate-accent: #d97706;
    --sca-profitRate-rgb: 180, 83, 9;

    /* 평가금액 (evalAmt) - 퍼플/바이올렛 계열 (violet-600, 대비율 ~5.6:1) */
    --sca-evalAmt-primary: #7c3aed;
    --sca-evalAmt-light: rgba(124, 58, 237, 0.10);
    --sca-evalAmt-hover: #6d28d9;
    --sca-evalAmt-gradient-start: rgba(124, 58, 237, 0.25);
    --sca-evalAmt-gradient-end: rgba(124, 58, 237, 0.02);
    --sca-evalAmt-accent: #8b5cf6;
    --sca-evalAmt-rgb: 124, 58, 237;

    /* 배당수익률 (dividendYield) - 사이안 계열 (cyan-600, 대비율 ~4.5:1, dividend와 차별화) */
    --sca-dividendYield-primary: #0891b2;
    --sca-dividendYield-light: rgba(8, 145, 178, 0.10);
    --sca-dividendYield-hover: #0e7490;
    --sca-dividendYield-gradient-start: rgba(8, 145, 178, 0.25);
    --sca-dividendYield-gradient-end: rgba(8, 145, 178, 0.02);
    --sca-dividendYield-accent: #06b6d4;
    --sca-dividendYield-rgb: 8, 145, 178;

    /* 음수값 공통 (bar 차트 등) - 레드 계열 */
    --sca-negative-bar: #ef4444;
    --sca-negative-bar-light: rgba(239, 68, 68, 0.65);
    --sca-negative-bar-rgb: 239, 68, 68;
}

/* ============================================
   다크모드 (Dark Mode)
   ============================================ */
[data-theme="dark"] {
    /* ========================================
       Primary 색상 (다크모드에서 약간 밝게)
       ======================================== */
    --ws-primary: #3b82f6;        /* blue-500 */
    --ws-primary-hover: #60a5fa;  /* blue-400 */
    --ws-primary-light: rgba(59, 130, 246, 0.15);
    --ws-primary-rgb: 59, 130, 246;

    /* ========================================
       액션 버튼 다크모드
       ======================================== */
    .ws-action-btn {
        color: var(--ws-text-secondary) !important;
        background-color: transparent !important;
        border-color: var(--ws-border) !important;
    }

    .ws-action-btn:hover {
        color: var(--ws-primary) !important;
        background-color: var(--ws-bg-soft) !important;
        border-color: var(--ws-border) !important;
    }

    .ws-action-btn-primary {
        background-color: var(--ws-primary) !important;
        color: white !important;
        border-color: var(--ws-primary) !important;
    }

    .ws-action-btn-primary:hover {
        background-color: var(--ws-primary-hover) !important;
        border-color: var(--ws-primary-hover) !important;
    }

    .ws-action-btn-secondary {
        background-color: var(--ws-bg-soft) !important;
        color: var(--ws-text-secondary) !important;
        border-color: var(--ws-border) !important;
    }

    .ws-action-btn-secondary:hover {
        background-color: var(--ws-bg-hover) !important;
        color: var(--ws-text) !important;
        border-color: var(--ws-border-strong) !important;
    }

    .ws-action-btn-more {
        background-color: transparent !important;
        color: var(--ws-text-secondary) !important;
        border-color: var(--ws-border) !important;
    }

    .ws-action-btn-more:hover {
        background-color: var(--ws-bg-soft) !important;
        border-color: var(--ws-border-strong) !important;
        color: var(--ws-text) !important;
    }

    /* ========================================
       텍스트 색상 (반전)
       ======================================== */
    --ws-text: #f1f5f9;           /* slate-100 - 메인 텍스트 */
    --ws-text-emphasis: #e2e8f0;  /* slate-200 - 강조 텍스트 */
    --ws-text-secondary: #94a3b8; /* slate-400 - 보조 텍스트 */
    --ws-text-muted: #64748b;     /* slate-500 - 약한 텍스트 */
    --ws-text-rgb: 241, 245, 249;
    
    /* ========================================
       배경 색상 (어두운 톤)
       ======================================== */
    --ws-bg: #0f172a;             /* slate-900 - 페이지 배경 */
    --ws-bg-card: #1e293b;        /* slate-800 - 카드/컨테이너 배경 */
    --ws-bg-card-rgb: 30, 41, 59;
    --ws-bg-soft: #334155;        /* slate-700 - 부드러운 배경 */
    --ws-bg-hover: rgba(241, 245, 249, 0.04);
    
    /* ========================================
       테두리 색상 (어두운 톤)
       ======================================== */
    --ws-border: #334155;         /* slate-700 - 기본 테두리 */
    --ws-border-light: #1e293b;   /* slate-800 - 연한 테두리 */
    --ws-border-strong: #475569;  /* slate-600 - 강한 테두리 */
    
    /* ========================================
       상태 색상 (다크모드에서 약간 밝게)
       ======================================== */
    /* Danger */
    /* --ws-danger: #f87171;         red-400 */
    --ws-danger: #dc3545;         
    --ws-danger-hover: #fca5a5;   /* red-300 */
    --ws-danger-light: rgba(248, 113, 113, 0.15);
    --ws-danger-rgb: 248, 113, 113;
    
    /* Success */
    --ws-success: #34d399;        /* emerald-400 */
    --ws-success-hover: #6ee7b7;  /* emerald-300 */
    --ws-success-light: rgba(52, 211, 153, 0.15);
    --ws-success-rgb: 52, 211, 153;
    
    /* Warning */
    --ws-warning: #fbbf24;        /* amber-400 */
    --ws-warning-hover: #fcd34d;  /* amber-300 */
    --ws-warning-light: rgba(251, 191, 36, 0.15);
    --ws-warning-rgb: 251, 191, 36;
    
    /* Info */
    --ws-info: #38bdf8;           /* sky-400 */
    --ws-info-hover: #7dd3fc;     /* sky-300 */
    --ws-info-light: rgba(56, 189, 248, 0.15);
    --ws-info-rgb: 56, 189, 248;
    
    /* ========================================
       그림자 (다크모드에서 더 진하게)
       ======================================== */
    --ws-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --ws-shadow: 0 4px 6px rgba(0, 0, 0, 0.4);
    --ws-shadow-md: 0 10px 15px rgba(0, 0, 0, 0.5);
    --ws-shadow-lg: 0 20px 25px rgba(0, 0, 0, 0.6);

    /* ========================================
       차트 분석 지표별 컬러 팔레트 (SCA) - 다크모드
       - 어두운 배경 대비 가독성을 위해 밝기 상향
       - slate-800 (#1e293b) 배경 기준 4.5:1 이상
       ======================================== */

    /* 배당 (dividend) - 에메랄드 그린 (다크모드: emerald-400) */
    --sca-dividend-primary: #34d399;
    --sca-dividend-light: rgba(52, 211, 153, 0.15);
    --sca-dividend-hover: #6ee7b7;
    --sca-dividend-gradient-start: rgba(52, 211, 153, 0.28);
    --sca-dividend-gradient-end: rgba(52, 211, 153, 0.03);
    --sca-dividend-accent: #10b981;
    --sca-dividend-rgb: 52, 211, 153;

    /* 매수금액 (purchaseAmt) - 스카이 블루 (다크모드: 밝게) */
    --sca-purchaseAmt-primary: #38bdf8;
    --sca-purchaseAmt-light: rgba(56, 189, 248, 0.15);
    --sca-purchaseAmt-hover: #7dd3fc;
    --sca-purchaseAmt-gradient-start: rgba(56, 189, 248, 0.28);
    --sca-purchaseAmt-gradient-end: rgba(56, 189, 248, 0.03);
    --sca-purchaseAmt-accent: #7dd3fc;
    --sca-purchaseAmt-rgb: 56, 189, 248;

    /* 순매수금액 (netPurchaseAmt) - 인디고 (다크모드: 밝게) */
    --sca-netPurchaseAmt-primary: #818cf8;
    --sca-netPurchaseAmt-light: rgba(129, 140, 248, 0.15);
    --sca-netPurchaseAmt-hover: #a5b4fc;
    --sca-netPurchaseAmt-gradient-start: rgba(129, 140, 248, 0.28);
    --sca-netPurchaseAmt-gradient-end: rgba(129, 140, 248, 0.03);
    --sca-netPurchaseAmt-accent: #a5b4fc;
    --sca-netPurchaseAmt-rgb: 129, 140, 248;

    /* 수익 (profit) - 코랄/오렌지 (다크모드: 밝게) */
    --sca-profit-primary: #fb923c;
    --sca-profit-light: rgba(251, 146, 60, 0.15);
    --sca-profit-hover: #fdba74;
    --sca-profit-gradient-start: rgba(251, 146, 60, 0.28);
    --sca-profit-gradient-end: rgba(251, 146, 60, 0.03);
    --sca-profit-accent: #fdba74;
    --sca-profit-rgb: 251, 146, 60;

    /* 수익률 (profitRate) - 골드/앰버 (다크모드: 밝게) */
    --sca-profitRate-primary: #f59e0b;
    --sca-profitRate-light: rgba(245, 158, 11, 0.15);
    --sca-profitRate-hover: #fbbf24;
    --sca-profitRate-gradient-start: rgba(245, 158, 11, 0.28);
    --sca-profitRate-gradient-end: rgba(245, 158, 11, 0.03);
    --sca-profitRate-accent: #fbbf24;
    --sca-profitRate-rgb: 245, 158, 11;

    /* 평가금액 (evalAmt) - 퍼플/바이올렛 (다크모드: 밝게) */
    --sca-evalAmt-primary: #a78bfa;
    --sca-evalAmt-light: rgba(167, 139, 250, 0.15);
    --sca-evalAmt-hover: #c4b5fd;
    --sca-evalAmt-gradient-start: rgba(167, 139, 250, 0.28);
    --sca-evalAmt-gradient-end: rgba(167, 139, 250, 0.03);
    --sca-evalAmt-accent: #c4b5fd;
    --sca-evalAmt-rgb: 167, 139, 250;

    /* 배당수익률 (dividendYield) - 사이안 (다크모드: cyan-500, 눈의 편안함 개선) */
    --sca-dividendYield-primary: #06b6d4;
    --sca-dividendYield-light: rgba(6, 182, 212, 0.15);
    --sca-dividendYield-hover: #22d3ee;
    --sca-dividendYield-gradient-start: rgba(6, 182, 212, 0.28);
    --sca-dividendYield-gradient-end: rgba(6, 182, 212, 0.03);
    --sca-dividendYield-accent: #22d3ee;
    --sca-dividendYield-rgb: 6, 182, 212;

    /* 음수값 공통 (bar 차트 등) - 레드 (다크모드: 밝게) */
    --sca-negative-bar: #f87171;
    --sca-negative-bar-light: rgba(248, 113, 113, 0.65);
    --sca-negative-bar-rgb: 248, 113, 113;
}

/* ============================================
   테마 전환 애니메이션
   ============================================ */
html {
    transition: background-color var(--ws-transition-slow),
                color var(--ws-transition-slow);
}

html[data-theme="dark"] body,
html[data-theme="dark"] .ws-navbar,
html[data-theme="dark"] .rog-card,
html[data-theme="dark"] .ws-card,
html[data-theme="dark"] .card,
html[data-theme="dark"] .modal-content {
    transition: background-color var(--ws-transition-slow),
                border-color var(--ws-transition-slow),
                color var(--ws-transition-slow);
}

/* ============================================
   Bootstrap 컴포넌트 다크모드 Override
   ============================================ */

/* 드롭다운 메뉴 */
[data-theme="dark"] .dropdown-menu {
    background-color: var(--ws-bg-card);
    border-color: var(--ws-border);
}

[data-theme="dark"] .dropdown-item {
    color: var(--ws-text-secondary); /* Adjusted for better visibility in dark mode */
}

[data-theme="dark"] .dropdown-item:hover,
[data-theme="dark"] .dropdown-item:focus {
    background-color: var(--ws-bg-soft);
    color: var(--ws-text-secondary); /* Adjusted for better visibility in dark mode */
}

/* 폼 컨트롤 */
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select {
    background-color: var(--ws-bg-soft);
    border-color: var(--ws-border);
    color: var(--ws-text-secondary); /* Adjusted for better visibility in dark mode */
}

[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus {
    background-color: var(--ws-bg-card);
    border-color: var(--ws-primary);
    color: var(--ws-text-secondary); /* Adjusted for better visibility in dark mode */
    box-shadow: 0 0 0 0.25rem rgba(var(--ws-primary-rgb), 0.25);
}

[data-theme="dark"] .form-control::placeholder {
    color: var(--ws-text-muted);
}

/* 테이블 */
[data-theme="dark"] .table {
    --bs-table-bg: var(--ws-bg-card);
    --bs-table-border-color: var(--ws-border);
    color: var(--ws-text-secondary); /* Adjusted for better visibility in dark mode */
}

[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: rgba(255, 255, 255, 0.02);
}

[data-theme="dark"] .table-hover > tbody > tr:hover > * {
    background-color: var(--ws-bg-soft);
}

/* 카드 */
[data-theme="dark"] .card {
    background-color: var(--ws-bg-card);
    border-color: var(--ws-border);
}

[data-theme="dark"] .card-header,
[data-theme="dark"] .card-footer {
    background-color: var(--ws-bg-soft);
    border-color: var(--ws-border);
}

/* 모달 */
[data-theme="dark"] .modal-content {
    background-color: var(--ws-bg-card);
    border-color: var(--ws-border);
}

[data-theme="dark"] .modal-header,
[data-theme="dark"] .modal-footer {
    border-color: var(--ws-border);
}

[data-theme="dark"] .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

/* 네비게이션 바 */
[data-theme="dark"] .navbar {
    background-color: var(--ws-bg-card) !important;
}

[data-theme="dark"] .navbar-toggler-icon {
    filter: invert(1);
}

/* 버튼 outline 스타일 */
[data-theme="dark"] .btn-outline-secondary {
    color: var(--ws-text-secondary);
    border-color: var(--ws-border);
}

[data-theme="dark"] .btn-outline-secondary:hover {
    background-color: var(--ws-bg-soft);
    border-color: var(--ws-border-strong);
    color: var(--ws-text-secondary); /* Adjusted for better visibility in dark mode */
}

/* 버튼 outline-primary 다크모드 — solid로 전환하여 가시성 확보 */
[data-theme="dark"] .btn-outline-primary {
    background: var(--ws-primary);
    border-color: var(--ws-primary);
    color: #fff;
}

[data-theme="dark"] .btn-outline-primary:hover {
    background-color: var(--ws-primary-hover);
    border-color: var(--ws-primary-hover);
    color: #fff;
}

/* 텍스트 색상 유틸리티 */
[data-theme="dark"] .text-muted {
    color: var(--ws-text-muted) !important;
}

[data-theme="dark"] .text-secondary {
    color: var(--ws-text-secondary) !important;
}

/* 배경 유틸리티 */
[data-theme="dark"] .bg-white {
    background-color: var(--ws-bg-card) !important;
}

[data-theme="dark"] .bg-light {
    background-color: var(--ws-bg-soft) !important;
}

/* 테두리 유틸리티 */
[data-theme="dark"] .border {
    border-color: var(--ws-border) !important;
}

[data-theme="dark"] .border-top,
[data-theme="dark"] .border-bottom,
[data-theme="dark"] .border-start,
[data-theme="dark"] .border-end {
    border-color: var(--ws-border) !important;
}

/* Progress bar 배경 */
[data-theme="dark"] .progress {
    background-color: var(--ws-bg-soft);
}

/* 리스트 그룹 */
[data-theme="dark"] .list-group-item {
    background-color: var(--ws-bg-card);
    border-color: var(--ws-border);
    color: var(--ws-text-secondary); /* Adjusted for better visibility in dark mode */
}

/* Alert */
[data-theme="dark"] .alert {
    border-color: var(--ws-border);
}

/* 페이지네이션 */
[data-theme="dark"] .page-link {
    background-color: var(--ws-bg-card);
    border-color: var(--ws-border);
    color: var(--ws-text-secondary); /* Adjusted for better visibility in dark mode */
}

[data-theme="dark"] .page-link:hover {
    background-color: var(--ws-bg-soft);
    border-color: var(--ws-border);
    color: var(--ws-primary);
}

[data-theme="dark"] .page-item.active .page-link {
    background-color: var(--ws-primary);
    border-color: var(--ws-primary);
    color: white !important;
}

[data-theme="dark"] .page-item.disabled .page-link {
    background-color: var(--ws-bg-soft);
    color: var(--ws-text-muted);
}

/* ============================================
   Main Page 다크모드 전용 스타일
   ============================================ */

/* 성장 히어로 섹션 */
[data-theme="dark"] .ws-growth-hero {
    background: var(--ws-bg-card);
}

/* Quote 박스 */
[data-theme="dark"] .ws-quote {
    background: var(--ws-bg-soft);
    border-left-color: var(--ws-primary);
}

/* 칩 스타일 */
[data-theme="dark"] .ws-chip {
    background: var(--ws-bg-soft);
    border-color: var(--ws-border);
    color: var(--ws-text-secondary); /* Adjusted for better visibility in dark mode */
}

[data-theme="dark"] .ws-chip-primary {
    background: rgba(var(--ws-primary-rgb), 0.15);
    border-color: rgba(var(--ws-primary-rgb), 0.3);
    color: var(--ws-primary);
}

/* Ticker Note */
[data-theme="dark"] .ws-ticker-note {
    color: var(--ws-text-muted);
}

/* Recent Trade 테이블 */
[data-theme="dark"] .ws-recent-card .table thead th {
    color: var(--ws-text-muted);
}

/* KPI 라벨 */
[data-theme="dark"] .ws-kpi-label {
    background: transparent;
}

/* 스파크 차트 */
[data-theme="dark"] .ws-spark {
    background: transparent;
}

/* 배지 스타일 */
[data-theme="dark"] .badge.text-bg-light {
    background-color: var(--ws-bg-soft) !important;
    color: var(--ws-text) !important;
}

/* ============================================
   전체 페이지 공통 다크모드 스타일
   ============================================ */

/* 인라인 style="background: white" 등을 오버라이드 */
[data-theme="dark"] [style*="background: white"],
[data-theme="dark"] [style*="background:white"],
[data-theme="dark"] [style*="background: #fff"],
[data-theme="dark"] [style*="background:#fff"],
[data-theme="dark"] [style*="background: rgba(255"],
[data-theme="dark"] [style*="background:rgba(255"] {
    background: var(--ws-bg-card) !important;
}

/* 라운드된 박스/컨테이너 */
[data-theme="dark"] .rounded,
[data-theme="dark"] .rounded-2,
[data-theme="dark"] .rounded-3,
[data-theme="dark"] .rounded-4,
[data-theme="dark"] .rounded-pill {
    border-color: var(--ws-border) !important;
}

/* 테이블 강화 */
[data-theme="dark"] .table thead {
    background-color: rgba(255, 255, 255, 0.02);
}

[data-theme="dark"] .table thead th {
    background-color: rgba(255, 255, 255, 0.02);
    color: var(--ws-text-secondary); /* Adjusted for better visibility in dark mode */
    border-color: var(--ws-border);
    border-bottom: 2px solid var(--ws-border);
}

[data-theme="dark"] .table tbody td {
    background-color: var(--ws-bg-card);
    color: var(--ws-text-secondary); /* Adjusted for better visibility in dark mode */
    border-color: var(--ws-border);
}

[data-theme="dark"] .table-bordered {
    border-color: var(--ws-border);
}

[data-theme="dark"] .table-bordered > :not(caption) > * > * {
    border-color: var(--ws-border);
}

/* input-group */
[data-theme="dark"] .input-group-text {
    background-color: var(--ws-bg-soft);
    border-color: var(--ws-border);
    color: var(--ws-text-secondary); /* Adjusted for better visibility in dark mode */
}

/* Select dropdown */
[data-theme="dark"] .form-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2394a3b8' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

/* 비활성화된 폼 */
[data-theme="dark"] .form-control:disabled,
[data-theme="dark"] .form-control[readonly],
[data-theme="dark"] .form-select:disabled {
    background-color: var(--ws-bg) !important;
    color: var(--ws-text-muted);
    border-color: var(--ws-border);
}

/* ============================================
   계좌/투자 관련 페이지 다크모드
   ============================================ */

/* 계좌 요약 카드 */
[data-theme="dark"] .account-summary-card,
[data-theme="dark"] .summary-card,
[data-theme="dark"] .stat-card,
[data-theme="dark"] .info-card {
    background-color: var(--ws-bg-card) !important;
    border-color: var(--ws-border) !important;
}

/* 차트 컨테이너 - chart-card만 명시적으로 지정 */
[data-theme="dark"] .chart-container,
[data-theme="dark"] .chart-card {
    background-color: var(--ws-bg-card);
}

/* ============================================
   게시판 페이지 다크모드
   ============================================ */

/* 검색/필터 영역 */
[data-theme="dark"] .search-area,
[data-theme="dark"] .filter-area,
[data-theme="dark"] .ws-filter {
    background-color: transparent !important;
}

/* 히어로 섹션 */
[data-theme="dark"] .ws-hero {
    background: linear-gradient(135deg, var(--ws-bg-card) 0%, var(--ws-bg-soft) 100%) !important;
}

/* YouTube 배너 등 외부 컨텐츠 카드 */
[data-theme="dark"] .youtube-banner,
[data-theme="dark"] .external-banner,
[data-theme="dark"] .promo-card {
    background-color: var(--ws-bg-card) !important;
    border-color: var(--ws-border) !important;
}

/* ============================================
   사용자 프로필/설정 페이지 다크모드
   ============================================ */

/* 안내 카드 */
[data-theme="dark"] .guide-card,
[data-theme="dark"] .info-panel,
[data-theme="dark"] .tip-card,
[data-theme="dark"] .help-card {
    background-color: var(--ws-bg-card) !important;
    border-color: var(--ws-border) !important;
}

/* 프로필 폼 카드 */
[data-theme="dark"] .profile-card,
[data-theme="dark"] .auth-card,
[data-theme="dark"] .settings-card {
    background-color: var(--ws-bg-card) !important;
}

/* 아이콘 박스 */
[data-theme="dark"] .icon-box,
[data-theme="dark"] .feature-icon {
    background-color: var(--ws-bg-soft) !important;
}

/* ============================================
   Rog Feed 페이지 다크모드
   ============================================ */

/* 우측 패널 카드 */
[data-theme="dark"] .right-panel-card,
[data-theme="dark"] .sidebar-card,
[data-theme="dark"] .side-widget {
    background-color: var(--ws-bg-card) !important;
    border-color: var(--ws-border) !important;
}

/* 피드 카드 */
[data-theme="dark"] .feed-card,
[data-theme="dark"] .rog-card,
[data-theme="dark"] .post-card {
    background-color: var(--ws-bg-card) !important;
    border-color: var(--ws-border) !important;
}

/* 탭 버튼 */
[data-theme="dark"] .nav-pills .nav-link {
    color: var(--ws-text-secondary); /* Adjusted for better visibility in dark mode */
}

[data-theme="dark"] .nav-pills .nav-link.active {
    background-color: var(--ws-primary);
    color: white;
}

[data-theme="dark"] .nav-pills .nav-link:not(.active):hover {
    background-color: var(--ws-bg-soft);
}


/* ============================================
   Rog Feed Tab Bar Styles
   ============================================ */
.rog-tab-bar {
    background: var(--ws-bg-card);
    border: 1px solid var(--ws-border);
    border-radius: 999px;
    box-shadow: var(--ws-shadow-sm);
}

/* 탭 버튼 기본 (비활성) — Bootstrap btn-primary/btn-light에 의존하지 않는 독립 스타일 */
.rog-tab-bar .btn {
    border-radius: 999px;
    border: none !important;
    font-weight: 600;
    font-size: 0.8125rem !important;
    padding: 6px 14px !important;
    color: var(--ws-text-secondary);
    background-color: transparent !important;
    box-shadow: none !important;
    transition: color 0.2s ease, background-color 0.2s ease;
}

/* 탭 버튼 호버 (비활성 상태에서 마우스 올릴 때) */
.rog-tab-bar .btn:not(.active):hover {
    color: var(--ws-primary);
    background-color: rgba(var(--ws-primary-rgb), .08) !important;
}

/* 탭 버튼 활성 — 가벼운 강조 (솔리드 블루 대신 반투명 배경 + 프라이머리 텍스트) */
.rog-tab-bar .btn.active {
    color: var(--ws-primary) !important;
    background-color: rgba(var(--ws-primary-rgb), .12) !important;
    font-weight: 700;
}

/* ============================================
   차트 분석 페이지 다크모드
   ============================================ */

/* 좌측 메뉴 */
[data-theme="dark"] .analysis-menu,
[data-theme="dark"] .report-menu,
[data-theme="dark"] .menu-list {
    background-color: var(--ws-bg-card) !important;
}

[data-theme="dark"] .menu-item.active,
[data-theme="dark"] .report-item.active,
[data-theme="dark"] .analysis-item.active {
    background-color: var(--ws-bg-soft) !important;
    border-color: var(--ws-primary) !important;
}

/* 차트 패널 */
[data-theme="dark"] .chart-panel,
[data-theme="dark"] .analysis-panel {
    background-color: var(--ws-bg-card) !important;
}

/* 범례 */
[data-theme="dark"] .chart-legend,
[data-theme="dark"] .legend-container {
    background-color: var(--ws-bg-card);
    color: var(--ws-text-secondary); /* Adjusted for better visibility in dark mode */
}

/* ============================================
   링크 및 텍스트 색상
   ============================================ */

[data-theme="dark"] a:not(.btn):not(.nav-link):not(.dropdown-item):not(.ws-page-link) {
    color: var(--ws-primary);
}

[data-theme="dark"] a:not(.btn):not(.nav-link):not(.dropdown-item):not(.ws-page-link):hover {
    color: var(--ws-primary-hover);
}

.rog-uid {
    color: var(--ws-text) !important; /* Set text color based on theme */
}

.rog-uid:hover {
    text-decoration: none !important;
}

.rog-content {
    color: var(--ws-text) !important; /* Set text color based on theme */
}

/* hr 구분선 */
[data-theme="dark"] hr {
    border-color: var(--ws-border);
    opacity: 1;
}

/* 그림자 오버라이드 */
[data-theme="dark"] .shadow,
[data-theme="dark"] .shadow-sm,
[data-theme="dark"] .shadow-lg {
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.3) !important;
}

/* blockquote */
[data-theme="dark"] blockquote,
[data-theme="dark"] .blockquote {
    border-color: var(--ws-border);
    color: var(--ws-text-secondary);
}

/* code/pre */
[data-theme="dark"] code {
    background-color: var(--ws-bg-soft);
    color: var(--ws-danger);
}

[data-theme="dark"] pre {
    background-color: var(--ws-bg-soft);
    border-color: var(--ws-border);
    color: var(--ws-text-secondary); /* Adjusted for better visibility in dark mode */
}

/* ============================================
   Rog Feed 페이지 인라인 스타일 오버라이드
   ============================================ */

/* 탭 바 */
[data-theme="dark"] .d-flex.gap-2.p-2.mb-3[style*="background:rgba(255,255,255"] {
    background: var(--ws-bg-card) !important;
    border-color: var(--ws-border) !important;
}

/* 검색/필터 카드 */
[data-theme="dark"] .card[style*="background:rgba(255,255,255"] {
    background: var(--ws-bg-card) !important;
}

/* 우측 패널 카드 본문 */
[data-theme="dark"] .card-body[style*="background:white"] {
    background: var(--ws-bg-card) !important;
    border-color: var(--ws-border) !important;
}

/* 사용자 검색 입력 */
[data-theme="dark"] #userSearchInput {
    background: var(--ws-bg-soft) !important;
    border-color: var(--ws-border) !important;
    color: var(--ws-text) !important;
}

/* 사용자 검색 결과 */
[data-theme="dark"] #userSearchResults {
    background: var(--ws-bg-card) !important;
    border-color: var(--ws-border) !important;
}

/* 시장 데이터/인기 로그 등 박스 */
[data-theme="dark"] #marketDataBox,
[data-theme="dark"] #popularRogBox,
[data-theme="dark"] #recentCertificationBox,
[data-theme="dark"] #recommendUserBox {
    color: var(--ws-text-muted) !important;
}

/* ============================================
   계좌 관리 페이지 다크모드
   ============================================ */

/* 테이블 헤더 (Bootstrap table-light) */
[data-theme="dark"] .table-light,
[data-theme="dark"] thead.table-light,
[data-theme="dark"] .table-light th {
    background-color: var(--ws-bg-soft) !important;
    color: var(--ws-text) !important;
    border-color: var(--ws-border) !important;
}

/* 카드 헤더 (bg-white) */
[data-theme="dark"] .card-header.bg-white,
[data-theme="dark"] .card-header[class*="bg-white"] {
    background-color: var(--ws-bg-card) !important;
    border-color: var(--ws-border) !important;
}

/* ============================================
   YouTube 배너 다크모드
   ============================================ */

[data-theme="dark"] .youtube-banner {
    background: var(--ws-bg-card) !important;
    border-color: var(--ws-border) !important;
}

/* ============================================
   폼/입력 관련 추가 스타일
   ============================================ */

/* 폼 라벨 */
[data-theme="dark"] .form-label,
[data-theme="dark"] label {
    color: var(--ws-text-secondary); /* Adjusted for better visibility in dark mode */
}

/* Placeholder 텍스트 */
[data-theme="dark"] .form-control::placeholder,
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
    color: var(--ws-text-muted) !important;
    opacity: 1;
}

/* 체크박스/라디오 */
[data-theme="dark"] .form-check-input {
    background-color: var(--ws-bg-soft);
    border-color: var(--ws-border);
}

[data-theme="dark"] .form-check-input:checked {
    background-color: var(--ws-primary);
    border-color: var(--ws-primary);
}

/* 버튼 그룹 */
[data-theme="dark"] .btn-group .btn-outline-secondary {
    color: var(--ws-text-secondary); /* Adjusted for better visibility in dark mode */
    border-color: var(--ws-border);
}

[data-theme="dark"] .btn-group .btn-outline-secondary:hover,
[data-theme="dark"] .btn-group .btn-outline-secondary.active {
    background-color: var(--ws-bg-soft);
    border-color: var(--ws-border);
    color: var(--ws-text-secondary); /* Adjusted for better visibility in dark mode */
}

/* 로그인 버튼 호버 - 라이트모드 */
[data-theme="light"] .btn-login:hover {
    background-color: var(--ws-primary-hover) !important;
    color: white !important;
}

/* 로그인 버튼 호버 - 다크모드 (login.jsp 특정) */
[data-theme="dark"] .login-box form .btn-ws-sm-primary:hover {
    background-color: var(--ws-primary-hover) !important;
    border-color: var(--ws-primary-hover) !important;
    color: white !important;
}

/* ============================================
   게시판 글쓰기 페이지 다크모드
   ============================================ */

/* 페이지 제목 */
[data-theme="dark"] .page-title {
    color: var(--ws-text) !important;
}

/* ws-card 배경 */
[data-theme="dark"] .ws-card {
    background-color: var(--ws-bg-card) !important;
    border-color: var(--ws-border) !important;
}

/* ws-card-header */
[data-theme="dark"] .ws-card-header {
    background: linear-gradient(180deg, var(--ws-primary-light), rgba(var(--ws-primary-rgb), 0.02)) !important;
    border-bottom-color: var(--ws-border) !important;
}

/* ws-badge-soft */
[data-theme="dark"] .ws-badge-soft {
    background: var(--ws-primary-light) !important;
    color: var(--ws-primary) !important;
    border-color: rgba(var(--ws-primary-rgb), .3) !important;
}

/* ws-help */
.ws-help {
    background: transparent !important;
}

[data-theme="dark"] .ws-help {
    background: transparent !important;
    border-color: var(--ws-border) !important;
    color: var(--ws-text-secondary) !important;
}

/* fw-bold, fw-black 라벨 */
[data-theme="dark"] .fw-bold,
[data-theme="dark"] .fw-black {
    color: var(--ws-text) !important;
}

/* 컨테이너 배경 */
[data-theme="dark"] .container {
    color: var(--ws-text);
}

/* 모든 div 기본 색상 */
[data-theme="dark"] .ws-card .p-3,
[data-theme="dark"] .ws-card .p-md-4,
[data-theme="dark"] .ws-card .p-4 {
    background-color: var(--ws-bg-card) !important;
    color: var(--ws-text);
}

/* ============================================
   Quill 에디터 다크모드 스타일
   ============================================ */

/* Quill 툴바 */
[data-theme="dark"] .ql-toolbar.ql-snow {
    background-color: var(--ws-bg-soft) !important;
    border-color: var(--ws-border) !important;
}

/* Quill 에디터 컨테이너 */
[data-theme="dark"] .ql-container.ql-snow {
    border-color: var(--ws-border) !important;
    background-color: var(--ws-bg-card) !important;
}

/* Quill 에디터 텍스트 - 가장 중요! */
[data-theme="dark"] .ql-editor {
    color: var(--ws-text) !important;
    background-color: var(--ws-bg-card) !important;
}

[data-theme="dark"] .ql-editor p,
[data-theme="dark"] .ql-editor ol,
[data-theme="dark"] .ql-editor ul,
[data-theme="dark"] .ql-editor pre,
[data-theme="dark"] .ql-editor blockquote,
[data-theme="dark"] .ql-editor h1,
[data-theme="dark"] .ql-editor h2,
[data-theme="dark"] .ql-editor h3,
[data-theme="dark"] .ql-editor h4,
[data-theme="dark"] .ql-editor h5,
[data-theme="dark"] .ql-editor h6 {
    color: var(--ws-text) !important;
}

[data-theme="dark"] .ql-editor.ql-blank::before {
    color: var(--ws-text-muted) !important;
}

/* Quill 툴바 버튼 및 아이콘 */
[data-theme="dark"] .ql-toolbar.ql-snow button,
[data-theme="dark"] .ql-toolbar.ql-snow select {
    color: var(--ws-text-secondary) !important;
}

[data-theme="dark"] .ql-toolbar.ql-snow button:hover,
[data-theme="dark"] .ql-toolbar.ql-snow button.ql-active {
    color: var(--ws-primary) !important;
}

/* Quill SVG 아이콘 */
[data-theme="dark"] .ql-toolbar.ql-snow .ql-stroke {
    stroke: var(--ws-text-secondary) !important;
}

[data-theme="dark"] .ql-toolbar.ql-snow .ql-fill {
    fill: var(--ws-text-secondary) !important;
}

[data-theme="dark"] .ql-toolbar.ql-snow button:hover .ql-stroke,
[data-theme="dark"] .ql-toolbar.ql-snow button.ql-active .ql-stroke {
    stroke: var(--ws-primary) !important;
}

[data-theme="dark"] .ql-toolbar.ql-snow button:hover .ql-fill,
[data-theme="dark"] .ql-toolbar.ql-snow button.ql-active .ql-fill {
    fill: var(--ws-primary) !important;
}

/* Quill 포맷 구분선 */
[data-theme="dark"] .ql-toolbar.ql-snow .ql-formats {
    border-right-color: var(--ws-border) !important;
}

/* Quill select 드롭다운 */
[data-theme="dark"] .ql-snow .ql-picker {
    color: var(--ws-text-secondary) !important;
}

[data-theme="dark"] .ql-snow .ql-picker-label {
    color: var(--ws-text-secondary) !important;
    border-color: var(--ws-border) !important;
}

[data-theme="dark"] .ql-snow .ql-picker-label::before {
    color: var(--ws-text-secondary) !important;
}

[data-theme="dark"] .ql-snow .ql-picker-options {
    background-color: var(--ws-bg-card) !important;
    border-color: var(--ws-border) !important;
}

[data-theme="dark"] .ql-snow .ql-picker-item {
    color: var(--ws-text-secondary) !important;
}

[data-theme="dark"] .ql-snow .ql-picker-item.ql-selected,
[data-theme="dark"] .ql-snow .ql-picker-item:hover {
    color: var(--ws-primary) !important;
}

[data-theme="dark"] .ql-snow .ql-picker.ql-expanded .ql-picker-label {
    border-color: var(--ws-border) !important;
}

/* Quill 색상/배경색 팝오버 */
[data-theme="dark"] .ql-snow .ql-color-picker .ql-picker-options,
[data-theme="dark"] .ql-snow .ql-background .ql-picker-options {
    background-color: var(--ws-bg-card) !important;
    border: 1px solid var(--ws-border) !important;
}

[data-theme="dark"] .ql-picker-item.ql-selected .ql-stroke,
[data-theme="dark"] .ql-picker-item:hover .ql-stroke {
    stroke: var(--ws-primary) !important;
}

[data-theme="dark"] .ql-picker-item.ql-selected .ql-fill,
[data-theme="dark"] .ql-picker-item.ql-selected .ql-stroke.ql-fill,
[data-theme="dark"] .ql-picker-item:hover .ql-fill,
[data-theme="dark"] .ql-picker-item:hover .ql-stroke.ql-fill {
    fill: var(--ws-primary) !important;
}

/* =========================================================
   푸터 공통 스타일
========================================================= */
.ws-footer {
    background-color: var(--ws-bg-card);
    border-color: var(--ws-border) !important;
}

.ws-footer-inner {
    color: var(--ws-text-secondary);
    font-size: 0.8rem;
}

/* 상단: 브랜드 + 연락처 */
.ws-footer-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.ws-footer-brand {
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--ws-text-secondary);
}

/* 연락처 링크 그룹 */
.ws-footer-links {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 16px;
}

.ws-footer-link {
    color: var(--ws-text-secondary);
    text-decoration: none;
    transition: color 0.15s;
    white-space: nowrap;
}

.ws-footer-link:hover {
    color: var(--ws-primary);
}

.ws-footer-link i {
    margin-right: 3px;
}

/* 하단: 면책조항 + 버전 */
.ws-footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--ws-border-light);
    font-size: 0.75rem;
    color: var(--ws-text-muted);
}

.ws-footer-version {
    font-family: 'SFMono-Regular', Consolas, monospace;
    font-size: 0.7rem;
    color: var(--ws-text-muted);
}

/* 모바일 반응형 */
@media (max-width: 768px) {
    .ws-footer-top {
        flex-direction: column;
        text-align: center;
    }
    .ws-footer-links {
        justify-content: center;
    }
    .ws-footer-bottom {
        flex-direction: column;
        text-align: center;
    }
}