/* ============================================================
   프리미엄 다크 퍼플 (Premium Dark Plum) 테마
   ============================================================ */

/* 폰트 가져오기 (Pretendard) */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css');

/* ── 0. 히어로 텍스트 가시성 및 폰트 설정 ── */
html.dark-theme body {
    font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, Roboto, 'Helvetica Neue', 'Segoe UI', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', sans-serif !important;
}

html.dark-theme h1,
html.dark-theme h1 span {
    color: #F3F0FF !important;
    -webkit-text-fill-color: #F3F0FF !important;
}

/* 그라데이션 텍스트 - 부드러운 파스텔톤 블루-퍼플 */
html.dark-theme .text-transparent.bg-clip-text {
    -webkit-text-fill-color: transparent !important;
    background-image: linear-gradient(135deg, #7DD3FC 0%, #A5B4FC 50%, #C084FC 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    text-shadow: 0 0 20px rgba(125, 211, 252, 0.2);
    filter: none;
}

/* ── 1. 전체 배경 ── */
html.dark-theme body {
    background: #160D24 !important;
    background-color: #160D24 !important;
    color: #f0e9ff !important;
}

/* body에 래디얼 그라데이션 배경 추가 (더 세련된 매쉬 그라데이션) */
html.dark-theme body::before {
    content: '';
    position: fixed;
    inset: 0;
    background:
        radial-gradient(circle at 15% 15%, rgba(98, 0, 234, 0.15) 0%, transparent 40%),
        radial-gradient(circle at 85% 20%, rgba(0, 191, 255, 0.1) 0%, transparent 40%),
        radial-gradient(circle at 50% 50%, rgba(22, 13, 36, 1) 0%, transparent 100%),
        radial-gradient(circle at 80% 80%, rgba(255, 0, 128, 0.08) 0%, transparent 45%),
        radial-gradient(circle at 20% 85%, rgba(0, 255, 255, 0.07) 0%, transparent 40%);
    pointer-events: none;
    z-index: -1;
}

/* ── 2. 카드 및 흰색 배경 요소 ── */
html.dark-theme .bg-white,
html.dark-theme [style*="background-color: white"],
html.dark-theme [style*="background: #ffffff"],
html.dark-theme [style*="background-color: #fff"],
html.dark-theme [style*="background: rgba(255, 255, 255, 0.85)"],
html.dark-theme [style*="background: rgba(255,255,255,0.95)"] {
    background-color: #231736 !important;
    color: #f0e9ff !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
}

html.dark-theme .bg-white\/80,
html.dark-theme .bg-white\/95 {
    background-color: rgba(35, 23, 54, 0.9) !important;
}

html.dark-theme .bg-slate-50 {
    background-color: #1a1030 !important;
}

html.dark-theme .bg-slate-100 {
    background-color: rgba(255, 255, 255, 0.07) !important;
}

html.dark-theme [style*="background-color: #f8fafc"],
html.dark-theme [style*="background-color: #f9fafb"],
html.dark-theme [style*="background: #f1f5f9"],
html.dark-theme [style*="background: rgba(56, 189, 248, 0.05)"],
html.dark-theme [style*="background: rgba(255, 251, 235, 0.5)"] {
    background-color: rgba(255, 255, 255, 0.04) !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
}

/* ── 3. 텍스트 컬러 (RGBA 위계 적용) ── */
/* Primary: 타이틀, 주요 수치 (87%) */
html.dark-theme .text-slate-900,
html.dark-theme .text-slate-800,
html.dark-theme .text-gray-900,
html.dark-theme .metric-value,
html.dark-theme .font-black,
html.dark-theme .section-title,
html.dark-theme [style*="color: #111827"],
html.dark-theme [style*="color: #1e293b"],
html.dark-theme [style*="color: #0f172a"] {
    color: rgba(255, 255, 255, 0.87) !important;
}

/* Secondary: 서브타이틀, 종목명 등 (60%) */
html.dark-theme .text-slate-700,
html.dark-theme .text-slate-600,
html.dark-theme [style*="color: #374151"],
html.dark-theme [style*="color: #475569"] {
    color: rgba(255, 255, 255, 0.60) !important;
}

/* Tertiary: 작은 라벨, 부가 정보 (38%) */
html.dark-theme .text-slate-500,
html.dark-theme .text-slate-400,
html.dark-theme .text-gray-500,
html.dark-theme .text-gray-600,
html.dark-theme .text-gray-400,
html.dark-theme .metric-label,
html.dark-theme [style*="color: #64748b"],
html.dark-theme [style*="color: #94a3b8"] {
    color: rgba(255, 255, 255, 0.38) !important;
}

/* ── 3.5. 강조 색상 (Accent Colors) ── */
html.dark-theme a.text-blue-600,
html.dark-theme span.text-blue-600,
html.dark-theme .text-blue-600,
html.dark-theme .text-blue-500,
html.dark-theme .text-blue-400,
html.dark-theme [style*="color: rgb(37, 99, 235)"],
html.dark-theme [style*="color: #2563eb"],
html.dark-theme [style*="color: #3b82f6"] {
    color: #60A5FA !important;
}

/* ── 4. 네비게이션 바 ── */
html.dark-theme nav.fixed-nav,
html.dark-theme nav {
    background-color: #231736 !important;
    border-bottom-color: rgba(255, 255, 255, 0.06) !important;
}

html.dark-theme .nav-link {
    color: #A396B5 !important;
}

html.dark-theme .nav-link:hover,
html.dark-theme .nav-link.active {
    color: #60A5FA !important;
    background-color: rgba(96, 165, 250, 0.08) !important;
}

html.dark-theme .nav-profile {
    color: #d8cef0 !important;
    background-color: rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

html.dark-theme .nav-profile:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: #f0e9ff !important;
}

/* ── 5. 드롭다운 메뉴 ── */
html.dark-theme .dropdown-content {
    background-color: #231736 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.06) !important;
}

html.dark-theme .dropdown-content a {
    color: #d8cef0 !important;
    border-color: rgba(255, 255, 255, 0.05) !important;
}

html.dark-theme .dropdown-content a:hover {
    background-color: rgba(96, 165, 250, 0.08) !important;
    color: #60A5FA !important;
}

/* ── 6. 모바일 사이드바 ── */
html.dark-theme #mobile-sidebar {
    background-color: #1a1030 !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
}

html.dark-theme #mobile-sidebar .border-b {
    border-color: rgba(255, 255, 255, 0.08) !important;
}

html.dark-theme #mobile-sidebar span.font-bold {
    color: #f0e9ff !important;
}

html.dark-theme #mobile-sidebar .text-slate-800,
html.dark-theme #mobile-sidebar .text-slate-700,
html.dark-theme #mobile-sidebar .text-gray-900 {
    color: #f0e9ff !important;
}

html.dark-theme #mobile-sidebar .text-slate-500,
html.dark-theme #mobile-sidebar .text-xs {
    color: #A396B5 !important;
}

html.dark-theme #mobile-sidebar .text-slate-700.font-semibold {
    color: #d8cef0 !important;
}

html.dark-theme #mobile-sidebar button,
html.dark-theme #mobile-sidebar a {
    color: #d8cef0 !important;
}

html.dark-theme #mobile-sidebar .hover\:bg-slate-50:hover,
html.dark-theme #mobile-sidebar button:hover,
html.dark-theme #mobile-sidebar a:hover {
    background-color: rgba(96, 165, 250, 0.07) !important;
    color: #60A5FA !important;
}

html.dark-theme #mobile-sidebar .text-red-500 {
    color: #FF6B6B !important;
}

/* ── 7. 하단 탭 바 ── */
html.dark-theme .bottom-tabs {
    background: #160D24 !important;
    border-top-color: rgba(255, 255, 255, 0.07) !important;
}

html.dark-theme .tab-item {
    color: #7d6e95 !important;
}

html.dark-theme .tab-item.active {
    color: #60A5FA !important;
}

/* ── 8. 카드 컴포넌트 ── */
html.dark-theme .sector-card {
    background: #231736 !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3) !important;
}

html.dark-theme .analysis-card {
    background: #231736 !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
}

html.dark-theme .carousel-card {
    background: #231736 !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
}

html.dark-theme .loading-card {
    background-color: #231736 !important;
    color: #f0e9ff !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5) !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
}

/* ── 9. 로고 색상 ── */
html.dark-theme a span[style*="color: rgb(15, 39, 159)"] {
    color: #60A5FA !important;
}

html.dark-theme a span[style*="color: rgb(205, 4, 4)"],
html.dark-theme div span[style*="color: rgb(205, 4, 4)"],
html.dark-theme footer span[style*="color: rgb(205, 4, 4)"] {
    color: #FF6B6B !important;
}

/* ── 9.5. 푸터 ── */
html.dark-theme footer {
    background-color: #231736 !important;
    border-top-color: rgba(255, 255, 255, 0.06) !important;
}

html.dark-theme footer span[style*="color: rgb(15, 39, 159)"] {
    color: #5AC8FA !important;
}

/* ── 10. 버튼 ── */
html.dark-theme .bg-blue-600 {
    background-color: #ffffff !important;
    color: #160D24 !important;
}

html.dark-theme .hover\:bg-blue-700:hover,
html.dark-theme .hover\:bg-blue-500:hover {
    background-color: #e9d8ff !important;
    color: #160D24 !important;
}

html.dark-theme .text-blue-600 {
    color: #5AC8FA !important;
}

html.dark-theme .hover\:text-blue-700:hover {
    color: #4FACFE !important;
}

/* 네온 글로우 메인 버튼 (지금 시작하기, 내 자산 보기 등) */
html.dark-theme a[class*="bg-blue-600"],
html.dark-theme button[class*="bg-blue-600"] {
    background-color: #ffffff !important;
    color: #160D24 !important;
    box-shadow: 0 0 20px rgba(90, 200, 250, 0.2) !important;
}

html.dark-theme a[class*="bg-blue-600"]:hover,
html.dark-theme button[class*="bg-blue-600"]:hover {
    background-color: #e9d8ff !important;
    color: #160D24 !important;
    box-shadow: 0 0 30px rgba(90, 200, 250, 0.35) !important;
}

/* ── 11. 상단 텍스트 그라데이션 (hero) ── */
html.dark-theme .bg-gradient-to-r.from-blue-600.via-indigo-600.to-purple-600 {
    background-image: linear-gradient(to right, #00F2FE, #4FACFE, #a78bfa) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
}

/* ── 12. 서브 텍스트 (hero subtitle) ── */
html.dark-theme .text-slate-600.text-lg {
    color: #A396B5 !important;
}

/* ── 13. 보더 ── */
html.dark-theme .border-slate-200,
html.dark-theme .border-slate-100,
html.dark-theme .border {
    border-color: rgba(255, 255, 255, 0.07) !important;
}

html.dark-theme .border-b,
html.dark-theme .border-t {
    border-color: rgba(255, 255, 255, 0.07) !important;
}

/* ── 14. 입력 필드 ── */
html.dark-theme .search-input,
html.dark-theme input[type="text"],
html.dark-theme input[type="file"],
html.dark-theme textarea {
    background-color: rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: #f0e9ff !important;
}

html.dark-theme input::placeholder,
html.dark-theme textarea::placeholder {
    color: #7d6e95 !important;
}

html.dark-theme .search-input:focus,
html.dark-theme input:focus,
html.dark-theme textarea:focus {
    border-color: #5AC8FA !important;
    box-shadow: 0 0 0 3px rgba(90, 200, 250, 0.12) !important;
    outline: none !important;
}

/* ── 15. 분석 차트 관련 ── */
html.dark-theme #analysis-chart {
    background: #231736 !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
}

html.dark-theme .segmented-control {
    background: rgba(255, 255, 255, 0.06) !important;
}

html.dark-theme .segmented-control-slider {
    background: rgba(90, 200, 250, 0.2) !important;
    box-shadow: 0 0 12px rgba(90, 200, 250, 0.15) !important;
}

html.dark-theme .segmented-control-btn {
    color: #A396B5 !important;
}

html.dark-theme .segmented-control-btn.active {
    color: #f0e9ff !important;
}

html.dark-theme .dynamic-pill-chip {
    background: rgba(35, 23, 54, 0.85) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: #A396B5 !important;
}

html.dark-theme .selection-panel {
    background: rgba(35, 23, 54, 0.97) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

/* ── 16. 배지 / 인덱스 칩 (S&P, Nasdaq) ── */
html.dark-theme .badge-index {
    background-color: rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

html.dark-theme .badge-index .label {
    color: #A396B5 !important;
}

html.dark-theme .badge-index .value {
    color: #F3F0FF !important;
}

/* ── 17. 공포/탐욕 지수 게이지 ── */
html.dark-theme .w-24.h-2.bg-gradient-to-r {
    background: linear-gradient(to right, #FF3B5C, #FF9F0A, #30D158) !important;
    box-shadow: 0 0 10px rgba(48, 209, 88, 0.3) !important;
}

/* ── 18. 모달 다크 오버라이드 ── */
html.dark-theme .dark-modal-bg,
html.dark-theme [id$="-modal"] .bg-white,
html.dark-theme [id$="-modal"] .rounded-3xl {
    background-color: #231736 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

html.dark-theme .dark-text,
html.dark-theme [id$="-modal"] h3 {
    color: #f0e9ff !important;
}

html.dark-theme .dark-text-muted {
    color: #A396B5 !important;
}

html.dark-theme .dark-border,
html.dark-theme [id$="-modal"] .border-t {
    border-color: rgba(255, 255, 255, 0.07) !important;
}

html.dark-theme [id$="-modal"] p {
    color: #d8cef0 !important;
}

html.dark-theme [id$="-modal"] label {
    color: #d8cef0 !important;
}

html.dark-theme [id$="-modal"] [style*="background-color: #f9fafb"] {
    background-color: rgba(255, 255, 255, 0.03) !important;
}

html.dark-theme [id$="-modal"] [style*="background-color: #fee2e2"] {
    background-color: rgba(255, 107, 107, 0.15) !important;
}

html.dark-theme [id$="-modal"] [style*="color: #dc2626"] {
    color: #FF6B6B !important;
}

html.dark-theme .dark-modal-inner {
    background-color: #231736 !important;
}

html.dark-theme .dark-modal-footer {
    background-color: #2A1D40 !important;
    border-top-color: rgba(255, 255, 255, 0.08) !important;
}

html.dark-theme .dark-confirm-btn {
    color: #F3EAFF !important;
    /* 또렷한 아이스 라벤더색 */
    font-weight: 700 !important;
    background-color: #4F46E5 !important;
    /* 가시성 극대화 */
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3) !important;
}

html.dark-theme .dark-confirm-btn:hover {
    background-color: #4338CA !important;
}

/* ── 19. 설정 모달 토글 ── */
html.dark-theme .theme-toggle-container {
    background-color: rgba(255, 255, 255, 0.06) !important;
}

html.dark-theme .dark-btn-active {
    background-color: rgba(90, 200, 250, 0.15) !important;
    color: #5AC8FA !important;
    box-shadow: 0 0 12px rgba(90, 200, 250, 0.2) !important;
}

html.dark-theme .dark-btn-inactive {
    color: #7d6e95 !important;
}

/* 설정 모달 내 어둡게 버튼 활성 상태 수정 */
html.dark-theme #btn-theme-dark.bg-white {
    background-color: rgba(90, 200, 250, 0.15) !important;
    color: #5AC8FA !important;
}

html.dark-theme #btn-theme-light.bg-white {
    background-color: rgba(255, 255, 255, 0.12) !important;
    color: #f0e9ff !important;
}

/* ── 20. 스크롤바 ── */
html.dark-theme ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

html.dark-theme ::-webkit-scrollbar-track {
    background: #160D24;
}

html.dark-theme ::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 4px;
}

html.dark-theme ::-webkit-scrollbar-thumb:hover {
    background: rgba(90, 200, 250, 0.3);
}

/* ── 21. 온보딩 배너 ── */
html.dark-theme .bg-blue-600.text-white.py-3 {
    background-color: rgba(90, 200, 250, 0.15) !important;
    border-bottom: 1px solid rgba(90, 200, 250, 0.2) !important;
    color: #5AC8FA !important;
}

/* ── 22. 선택 영역 하이라이트 ── */
html.dark-theme ::selection {
    background: rgba(90, 200, 250, 0.25);
    color: #F3F0FF;
}

/* ── 23. 로딩 스피너 ── */
html.dark-theme .spinner {
    border-color: rgba(255, 255, 255, 0.1) !important;
    border-top-color: #5AC8FA !important;
}

/* ── 24. progress bar ── */
html.dark-theme #progress-bar {
    background-color: #5AC8FA !important;
}

html.dark-theme #loading-text {
    color: #5AC8FA !important;
}

html.dark-theme .w-full.bg-gray-200 {
    background-color: rgba(255, 255, 255, 0.08) !important;
}

/* ── 25. 설정 모달 내 아이콘 및 닫기 버튼 다크 오버라이드 ── */
html.dark-theme .dark-settings-icon-bg {
    background-color: rgba(90, 200, 250, 0.12) !important;
}

html.dark-theme .dark-settings-icon-color {
    stroke: #5AC8FA !important;
    color: #5AC8FA !important;
}

html.dark-theme .dark-close-btn {
    color: #7d6e95 !important;
}

html.dark-theme .dark-close-btn:hover {
    background-color: rgba(255, 255, 255, 0.07) !important;
    color: #f0e9ff !important;
}

/* ── 26. 강세 종목 카드 (gainers row) ── */
html.dark-theme a[style*="background-color: #fff1f2"] {
    background-color: rgba(255, 107, 107, 0.07) !important;
    border-color: rgba(255, 107, 107, 0.15) !important;
}

html.dark-theme a[style*="background-color: #fff1f2"]:hover {
    background-color: rgba(255, 107, 107, 0.13) !important;
}

/* 강세 종목 내부 텍스트 컬러 수정 */
html.dark-theme a[style*="background-color: #fff1f2"] .text-slate-800 {
    color: rgba(255, 255, 255, 0.87) !important;
}

html.dark-theme a[style*="background-color: #fff1f2"] .text-slate-500 {
    color: rgba(255, 255, 255, 0.38) !important;
}

/* ── 27. 슈퍼리치 카드 ── */
html.dark-theme a[style*="background: rgba(56, 189, 248"] {
    background-color: rgba(90, 200, 250, 0.06) !important;
    border-color: rgba(90, 200, 250, 0.12) !important;
}

/* ── 28. 다크 모드에서 표 및 목록 ── */
html.dark-theme tr:hover {
    background-color: rgba(255, 255, 255, 0.04) !important;
}

html.dark-theme td,
html.dark-theme th {
    border-color: rgba(255, 255, 255, 0.06) !important;
}

/* ── 29. 분석 페이지 탭 메뉴 배경색 ── */
/* 탭 컨테이너 (bg-slate-100 유사 회색 배경) - 전체 배경과 동일하게 처리 */
/* 탭 버튼을 감싸는 둥근 카드 (bg-gray-200/80 등) */
html.dark-theme [class*="bg-gray-200/80"],
html.dark-theme [class*="bg-slate-100"],
html.dark-theme .tab-btn-container {
    background-color: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
}

/* 스틱키 외부 컨테이너 (bg-slate-50/80 등) - 투명하게 하여 배경색과 일치 */
html.dark-theme [class*="bg-slate-50/80"] {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* 탭 버튼 기본 */
html.dark-theme .tab-btn {
    color: #A396B5 !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* 활성 탭 버튼 - 카드 색상(#231736)으로 변경하여 "떠 있는" 효과 */
html.dark-theme .tab-btn.active {
    background-color: #231736 !important;
    color: #60A5FA !important;
    /* 글씨 색상도 푸른색으로 통일 */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2), 0 0 1px rgba(255, 255, 255, 0.1) !important;
}

/* 활성 탭 아이콘 색상 변경 (Filter 사용) */
html.dark-theme .tab-btn.active img {
    filter: invert(65%) sepia(86%) saturate(313%) hue-rotate(183deg) brightness(103%) contrast(97%) !important;
    opacity: 1 !important;
}

/* 비활성 탭 아이콘 밝기 조정 */
html.dark-theme .tab-btn img {
    filter: brightness(0) invert(0.7) !important;
    opacity: 0.6;
    transition: all 0.3s ease;
}

/* ── 30. 분석 페이지 카드 페이드 아웃 그라데이션 ── */
/* more-fade-overlay의 --fade-color 변수가 흰색(#fff)으로 설정되므로 다크 모드에서 퍼플로 재지정 */
html.dark-theme .more-fade-overlay {
    background: linear-gradient(to bottom, transparent 0%, #231736 70%, #231736 100%) !important;
}

/* CSS 변수 직접 오버라이드 */
html.dark-theme [style*="--fade-color"] {
    --fade-color: #231736 !important;
}

/* ── 32. 홈 화면 히어로 뱃지 ── */
html.dark-theme .bg-blue-500\/10 {
    background-color: rgba(255, 255, 255, 0.08) !important;
}

html.dark-theme .border-blue-500\/20 {
    border-color: rgba(255, 255, 255, 0.2) !important;
}

html.dark-theme .text-blue-400 {
    color: #7DD3FC !important;
}

/* ── 33. 종목 카드 등락 배지 및 특수 텍스트 ── */
/* 상승 (Green) - 사용자 요청: 상승은 초록색 */
html.dark-theme .bg-rose-50,
html.dark-theme .bg-red-50,
html.dark-theme .bg-green-50,
html.dark-theme .bg-emerald-50 {
    background-color: rgba(52, 211, 153, 0.18) !important;
}

/* 텍스트 컬러 (Specificity 강화하여 font-black 등을 압도) */
html.dark-theme .text-green-600,
html.dark-theme .text-emerald-600,
html.dark-theme .text-up,
html.dark-theme .fng-value-text.text-up {
    color: #34D399 !important;
    /* Vibrant Emerald Green */
    -webkit-text-fill-color: #34D399 !important;
}

/* 하락 (Red) - 사용자 요청: 하락은 빨간색 */
html.dark-theme .bg-blue-50,
html.dark-theme .bg-red-50.bg-opacity-10 {
    background-color: rgba(255, 107, 107, 0.18) !important;
}

html.dark-theme .text-red-600,
html.dark-theme .text-rose-600,
html.dark-theme .text-down,
html.dark-theme .fng-value-text.text-down {
    color: #FF6B6B !important;
    /* Vibrant Rose Red */
    -webkit-text-fill-color: #FF6B6B !important;
}

/* ── 34. 공포/탐욕 지수 배지 및 텍스트 가시성 ── */
html.dark-theme .fng-status-badge,
html.dark-theme .sector-card .fng-status-badge,
html.dark-theme .sector-card [class*="bg-"][class*="-100"] {
    color: #160D24 !important;
    /* 배지 내부 텍스트는 어두운 색으로 고정 */
    -webkit-text-fill-color: #160D24 !important;
    font-weight: 800 !important;
}

/* FEAR & GREED INDEX 카드 배경색 (슈퍼리치 카드와 일치하도록 푸른색 가미) */
html.dark-theme .sector-card .bg-slate-50\/30 {
    background-color: rgba(90, 200, 250, 0.08) !important;
    border-color: rgba(90, 200, 250, 0.15) !important;
}

/* 배당/수익 (Emerald) */
html.dark-theme .bg-emerald-50 {
    background-color: rgba(52, 211, 153, 0.18) !important;
}

html.dark-theme .text-emerald-600 {
    color: #34D399 !important;
}

/* 경고/주의 (Yellow) */
html.dark-theme .bg-yellow-50 {
    background-color: rgba(251, 191, 36, 0.18) !important;
}

html.dark-theme .text-yellow-600 {
    color: #FBBF24 !important;
}

html.dark-theme #analysis-chart,
html.dark-theme [id^="macro-chart"],
html.dark-theme .chart-container-wrapper>div {
    background-color: transparent !important;
}

html.dark-theme .chart-overlay-container {
    background-color: transparent !important;
}

/* lightweight-charts 라이브러리 내부 배경 – JS로도 설정 필요하지만 CSS 방어 */
html.dark-theme .tv-lightweight-charts,
html.dark-theme .tv-lightweight-charts canvas {
    background: transparent !important;
}

/* 차트 위 indicator 오버레이 배경 (반투명 글래스) */
html.dark-theme .indicator-overlay {
    background: rgba(35, 23, 54, 0.6) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

/* dynamic pill chip (차트 위에 뜨는 지표 칩) */
html.dark-theme .dynamic-pill-chip {
    background: rgba(35, 23, 54, 0.85) !important;
    border-color: rgba(90, 200, 250, 0.2) !important;
    color: #A396B5 !important;
}

/* ── 32. 기업 분석 4종 추천 카드 배경색 (구분감 강화) ── */
/* 오늘의 추천 종목 (Yellow) */
html.dark-theme .analysis-card.bg-yellow-100\/70 {
    background: linear-gradient(135deg, rgba(234, 179, 8, 0.12) 0%, rgba(35, 23, 54, 0.6) 100%) !important;
    border-color: rgba(234, 179, 8, 0.25) !important;
}

html.dark-theme .analysis-card.bg-yellow-100\/70 h3 {
    color: #FDE047 !important;
}

/* 오늘의 급등 종목 (Rose) */
html.dark-theme .analysis-card.bg-rose-100\/70 {
    background: linear-gradient(135deg, rgba(244, 63, 94, 0.12) 0%, rgba(35, 23, 54, 0.6) 100%) !important;
    border-color: rgba(244, 63, 94, 0.25) !important;
}

html.dark-theme .analysis-card.bg-rose-100\/70 h3 {
    color: #FDA4AF !important;
}

/* 오늘의 급락 종목 (Blue) */
html.dark-theme .analysis-card.bg-blue-100\/70 {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.12) 0%, rgba(35, 23, 54, 0.6) 100%) !important;
    border-color: rgba(59, 130, 246, 0.25) !important;
}

html.dark-theme .analysis-card.bg-blue-100\/70 h3 {
    color: #93C5FD !important;
}

/* 최고의 배당 기업 (Emerald) */
html.dark-theme .analysis-card.bg-emerald-100\/70 {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.12) 0%, rgba(35, 23, 54, 0.6) 100%) !important;
    border-color: rgba(16, 185, 129, 0.25) !important;
}

html.dark-theme .analysis-card.bg-emerald-100\/70 h3 {
    color: #6EE7B7 !important;
}

/* 슈퍼리치의 선택 (Purple) */
html.dark-theme .analysis-card.bg-purple-100\/70 {
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.22) 0%, rgba(35, 23, 54, 0.7) 100%) !important;
    border-color: rgba(168, 85, 247, 0.5) !important;
    box-shadow: 0 8px 32px rgba(168, 85, 247, 0.15) !important;
}

html.dark-theme .analysis-card.bg-purple-100\/70 h3 {
    color: #D8B4FE !important;
}

/* 슈퍼리치의 선택 뱃지 다크테마 오버라이드 (눈부심 방지 & 보라색 일관성 유지) */
html.dark-theme .badge-super-rich {
    background-color: rgba(168, 85, 247, 0.18) !important;
    color: #D8B4FE !important;
    border: 1px solid rgba(168, 85, 247, 0.3) !important;
}

/* 슈퍼리치의 선택 더보기 고스트 버튼 다크테마 보랏빛 보정 */
html.dark-theme .analysis-card.bg-purple-100\/70 .more-fade-overlay button,
html.dark-theme .analysis-card.bg-purple-100\/70 button {
    color: #D8B4FE !important;
    border-color: rgba(168, 85, 247, 0.4) !important;
    background-color: rgba(35, 23, 54, 0.9) !important;
}

html.dark-theme .analysis-card.bg-purple-100\/70 .more-fade-overlay button svg {
    stroke: #D8B4FE !important;
}

/* 공통 카드 내부 스켈레톤/리스트 아이템 배경 조정 */
html.dark-theme .analysis-card .bg-white {
    background-color: rgba(255, 255, 255, 0.03) !important;
    border-color: rgba(255, 255, 255, 0.05) !important;
}

/* ── 35. 슈퍼리치 페이지 전용 (Tone-on-Tone) ── */
/* 카드 배경: 톤온톤 다크 퍼플 (#2A243D) */
html.dark-theme .carousel-card,
html.dark-theme .accordion-item {
    background-color: #2A243D !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2) !important;
}

/* 카드 내부 하단 영역 (bg-blue-50) */
html.dark-theme .carousel-card .bg-blue-50 {
    background-color: #332B4A !important;
    /* 약간 더 밝은 톤으로 구분 */
    border-top-color: rgba(255, 255, 255, 0.06) !important;
}

html.dark-theme .accordion-content {
    background-color: #332C4A !important;
    background: #332C4A !important;
}

html.dark-theme .accordion-body {
    background-color: transparent !important;
    background: transparent !important;
}

/* 카드 내부 텍스트 컬러 */
html.dark-theme .carousel-card h4,
html.dark-theme .accordion-body h4 {
    color: #60A5FA !important;
    /* 포인트 컬러 */
}

html.dark-theme .carousel-card span.text-slate-700,
html.dark-theme .accordion-body span.text-slate-700 {
    color: rgba(255, 255, 255, 0.8) !important;
}

/* 데이터 출처 및 안내 섹션 */
html.dark-theme section.bg-blue-50.rounded-3xl {
    background-color: #231736 !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
}

/* 제목 (데이터 출처 및 안내) */
html.dark-theme section.bg-blue-50.rounded-3xl h2 {
    color: rgba(255, 255, 255, 0.60) !important;
}

/* 본문 (13F 공시 자료 등) */
html.dark-theme section.bg-blue-50.rounded-3xl .text-blue-800,
html.dark-theme section.bg-blue-50.rounded-3xl p {
    color: rgba(255, 255, 255, 0.45) !important;
}

html.dark-theme section.bg-blue-50.rounded-3xl strong {
    color: rgba(255, 255, 255, 0.8) !important;
}

/* 모바일 아코디언 관련 추가 */
html.dark-theme .accordion-name {
    color: rgba(255, 255, 255, 0.87) !important;
}

html.dark-theme .accordion-header {
    background-color: #2A243D !important;
}

html.dark-theme .accordion-item.active {
    border-color: #60A5FA !important;
}

/* ── 37. 피드(블로그) 페이지 전용 ── */
/* 블로그 카드 배경: 톤온톤 다크 퍼플 (#2A243D) */
html.dark-theme .blog-card {
    background-color: #2A243D !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2) !important;
}

html.dark-theme .blog-card-title {
    color: rgba(255, 255, 255, 0.87) !important;
}

html.dark-theme .blog-card-content p,
html.dark-theme .blog-card-content span {
    color: rgba(255, 255, 255, 0.45) !important;
}

/* 피드 카드 하단 푸터 (좋아요 버튼 등) */
html.dark-theme .blog-card .bg-rose-50\/50,
html.dark-theme .blog-card .bg-slate-50\/50 {
    background-color: rgba(255, 255, 255, 0.03) !important;
    color: rgba(255, 255, 255, 0.6) !important;
}

html.dark-theme .blog-card-meta {
    color: rgba(255, 255, 255, 0.38) !important;
}

/* ── 36. 분석 페이지 매크로 탭 지표 가이드 ── */
html.dark-theme #tab-macro .bg-blue-50.p-6.rounded-2xl {
    background-color: #231736 !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
}

html.dark-theme #tab-macro .bg-blue-50.p-6.rounded-2xl h3 {
    color: rgba(255, 255, 255, 0.60) !important;
}

html.dark-theme #tab-macro .bg-blue-50.p-6.rounded-2xl ul,
html.dark-theme #tab-macro .bg-blue-50.p-6.rounded-2xl li {
    color: rgba(255, 255, 255, 0.45) !important;
}

html.dark-theme #tab-macro .bg-blue-50.p-6.rounded-2xl b {
    color: rgba(255, 255, 255, 0.8) !important;
}

/* 지표 선택 버튼 다크 테마 오버라이드 (다크 퍼플 + 에메랄드 조합) */
html.dark-theme .select-btn {
    background-color: #2A243D !important;
    border: 1.5px solid #34D399 !important;
    color: #34D399 !important;
    box-shadow: 0 4px 12px rgba(52, 211, 153, 0.15) !important;
}

html.dark-theme .select-btn:hover {
    background-color: rgba(52, 211, 153, 0.1) !important;
    box-shadow: 0 4px 20px rgba(52, 211, 153, 0.25) !important;
    transform: translateY(-1px);
}

/* 지표 선택 제한 안내 문구 다크 테마 오버라이드 (가시성 개선) */
html.dark-theme #tab-macro .selection-panel .text-slate-600 {
    color: #A396B5 !important;
}

/* AI Investment Report Card Background */
html.dark-theme #card-ai-summary {
    background: #2A243D !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
}

/* Events Inner Cards Glassmorphism */
html.dark-theme #card-events .bg-orange-50\/50 {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    transition: background 0.2s;
}

html.dark-theme #card-events .bg-orange-50\/50:hover {
    background: rgba(255, 255, 255, 0.08) !important;
}

/* Home Screen Gainer Cards Dark Mode */
html.dark-theme .gainer-card {
    background-color: #2A243D !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
}

html.dark-theme .gainer-card:hover {
    background-color: #332B4A !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

html.dark-theme .gainer-card .text-slate-800,
html.dark-theme .gainer-card .gainer-name {
    color: #ffffff !important;
}

html.dark-theme .gainer-card .text-slate-500,
html.dark-theme .gainer-card .gainer-price {
    color: rgba(200, 200, 220, 0.7) !important;
}

/* ── 19. 문의하기 모달 다크 테마 고밀도 오버라이드 ── */
html.dark-theme #inquiry-modal .bg-slate-50 {
    background-color: rgba(255, 255, 255, 0.05) !important;
}

html.dark-theme #inquiry-modal .border-slate-200 {
    border-color: rgba(255, 255, 255, 0.1) !important;
}

html.dark-theme #inquiry-modal button.bg-white {
    background-color: rgba(255, 255, 255, 0.08) !important;
    color: #E0E7FF !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

html.dark-theme #inquiry-modal button.bg-white:hover {
    background-color: rgba(255, 255, 255, 0.12) !important;
}

html.dark-theme #inquiry-modal button.bg-blue-600 {
    background-color: #4F46E5 !important;
    color: #F3EAFF !important;
    border: none !important;
}

html.dark-theme #inquiry-modal button.bg-blue-600:hover {
    background-color: #4338CA !important;
}

html.dark-theme #inquiry-modal p.text-slate-500 {
    color: #A396B5 !important;
}

html.dark-theme #inquiry-modal a.text-blue-600 {
    color: #A78BFA !important;
}

/* ── 21. 모달 버튼 및 프리미엄 다크 테마 추가 개편 ── */

/* Profile Modal & Other Modals - High Contrast Buttons & Inputs */
html.dark-theme #profile-modal button[onclick="closeProfileModal()"],
html.dark-theme #inquiry-modal button[onclick="closeInquiryModal()"],
html.dark-theme #updates-modal button[onclick="closeUpdatesModal()"] {
    background-color: rgba(255, 255, 255, 0.08) !important;
    color: #E0E7FF !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

html.dark-theme #profile-modal button[onclick="closeProfileModal()"]:hover,
html.dark-theme #inquiry-modal button[onclick="closeInquiryModal()"]:hover,
html.dark-theme #updates-modal button[onclick="closeUpdatesModal()"]:hover {
    background-color: rgba(255, 255, 255, 0.15) !important;
    color: #FFFFFF !important;
}

html.dark-theme #profile-modal button[onclick="submitProfileUpdate()"],
html.dark-theme #inquiry-modal button[onclick="submitInquiry()"],
html.dark-theme #settings-modal button[onclick="closeSettingsModal()"] {
    background-color: #6366F1 !important;
    color: #FFFFFF !important;
    border: none !important;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3) !important;
}

html.dark-theme #profile-modal button[onclick="submitProfileUpdate()"]:hover,
html.dark-theme #inquiry-modal button[onclick="submitInquiry()"]:hover,
html.dark-theme #settings-modal button[onclick="closeSettingsModal()"]:hover {
    background-color: #4F46E5 !important;
}

html.dark-theme #profile-modal input[type="text"][readonly] {
    background-color: rgba(255, 255, 255, 0.04) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: #A396B5 !important;
}

html.dark-theme #profile-modal input[type="file"] {
    background-color: rgba(255, 255, 255, 0.04) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: #E0E7FF !important;
}

html.dark-theme #profile-modal input[type="checkbox"] {
    accent-color: #6366F1 !important;
}

html.dark-theme #profile-modal div[style*="border-top"],
html.dark-theme #profile-modal div[style*="border-top-color"] {
    border-top-color: rgba(255, 255, 255, 0.1) !important;
}

/* 맞춤형 뉴스 피드 (내 주식 뉴스) 다크 테마 완벽 개선 */
html.dark-theme .news-modal-content {
    background: #15111E !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.5) !important;
}

html.dark-theme .news-modal-title {
    color: #E0E7FF !important;
}

html.dark-theme .news-modal-close {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #A396B5 !important;
}

html.dark-theme .modal-drag-handle {
    background-color: #3B2E56 !important;
}

html.dark-theme .news-ticker-header {
    color: #F3F0FF !important;
    border-bottom: 2px solid rgba(255, 255, 255, 0.08) !important;
}

html.dark-theme .news-ticker-header span {
    color: #F3F0FF !important;
}

html.dark-theme .news-card {
    background-color: #1E1A2E !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    color: #E0E7FF !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
}

html.dark-theme .news-card:hover {
    background-color: #26213B !important;
    border-color: #A78BFA !important;
}

html.dark-theme .news-title {
    color: #E0E7FF !important;
}

html.dark-theme .news-source {
    color: #A396B5 !important;
}

html.dark-theme .news-time {
    color: #A78BFA !important;
}

html.dark-theme .news-card-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
}

/* ── 38. 거래내역 다크 테마 가독성 개선 ── */
html.dark-theme .tx-table tr {
    background-color: var(--row-bg-dark) !important;
}
html.dark-theme .tx-table td div[style*="color: #666"],
html.dark-theme .tx-table td div[style*="color:#666"] {
    color: rgba(255, 255, 255, 0.6) !important;
}
html.dark-theme .tx-table td div[style*="color: #a0a0a0"],
html.dark-theme .tx-table td div[style*="color:#a0a0a0"] {
    color: rgba(255, 255, 255, 0.45) !important;
}
html.dark-theme .tx-table td span[style*="color: #999"],
html.dark-theme .tx-table td span[style*="color:#999"] {
    color: rgba(255, 255, 255, 0.35) !important;
}

/* ── 39. 투자내역 상세 보유 현황 다크 테마 가독성 및 배경색 개선 ── */
html.dark-theme .account-section .panel.open {
    background: #1E1A2E !important;
    background-color: #1E1A2E !important;
    border: none !important;
    box-shadow: none !important;
    color: #E0E7FF !important;
}

html.dark-theme .account-section .panel.open .holding-item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
}

html.dark-theme .account-section .panel.open .holding-item:last-child {
    border-bottom: none !important;
}