/**
 * 다크 모드 - CLAUDE.md 기준 색상 팔레트
 */

/* 다크 모드 CSS 변수 재정의 */
html.dark {
    /* 배경 색상 */
    --bg-main: #0F0F1E;
    --bg-card: rgba(42, 45, 60, 0.7);
    --bg-section: #1A1A2E;
    --bg-navy: #0F0F1E;
    --bg-dark: #1A1A2E;

    /* 텍스트 색상 */
    --text-primary: #F5F5F5;
    --text-secondary: #B8B8B8;
    --text-muted: #8B8B8B;

    /* 테두리 색상 */
    --border-light: rgba(255, 255, 255, 0.1);
    --border-card: rgba(139, 92, 246, 0.2);

    /* 카드 배경 */
    --card-bg: rgba(42, 45, 60, 0.7);
    --card-bg-hover: rgba(42, 45, 60, 0.9);

    /* 그림자 */
    --shadow-card: 0 2px 12px rgba(0, 0, 0, 0.3);
    --shadow-card-hover: 0 8px 24px rgba(139, 92, 246, 0.25);
}

/* body 배경 */
html.dark body {
    background: var(--bg-main);
    color: var(--text-primary);
}

/* 다크 모드 추가 스타일 */
html.dark .header-bg {
    background: rgba(15, 15, 30, 0.95) !important;
    backdrop-filter: blur(10px);
}

html.dark .service-card {
    background: var(--bg-card);
    border-color: var(--border-card);
}

html.dark .category-tab {
    background: var(--bg-section);
    color: var(--text-secondary);
}

html.dark .category-tab.active {
    background: linear-gradient(135deg, #8B5CF6, #A78BFA);
    color: white;
}

/* 입력 필드 다크 모드 */
html.dark input,
html.dark select,
html.dark textarea {
    background: var(--bg-section);
    color: var(--text-primary);
    border-color: var(--border-light);
}

html.dark input::placeholder,
html.dark textarea::placeholder {
    color: var(--text-muted);
}

/* 하단 네비게이션 다크 모드 */
html.dark .bottom-nav,
html.dark [class*="bottom-nav"] {
    background: rgba(15, 15, 30, 0.95) !important;
    backdrop-filter: blur(10px);
}

/* 모달/팝업 다크 모드 */
html.dark .modal-content,
html.dark [class*="modal-content"] {
    background: var(--bg-card);
    border-color: var(--border-card);
}

/* 버튼 다크 모드 */
html.dark .btn-secondary,
html.dark [class*="btn-secondary"] {
    background: rgba(139, 92, 246, 0.15);
    color: #A78BFA;
}

/* 스크롤바 다크 모드 */
html.dark ::-webkit-scrollbar-track {
    background: var(--bg-section);
}

html.dark ::-webkit-scrollbar-thumb {
    background: rgba(139, 92, 246, 0.3);
}

/* 포춘 쿠키 다크 모드 */
html.dark .fortune-hero {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.15), rgba(236, 72, 153, 0.1));
}

/* 롤링 배너 다크 모드 */
html.dark .rolling-banner-wrapper {
    background: var(--bg-card);
}