/**
 * 다크모드 스타일
 * ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 */

/* 다크모드 변수 - 따뜻한 다크 톤 */
body.dark-mode,
html.dark-mode body {
    --bg-color: #1A1816;
    --bg-secondary: #242220;
    --text-color: #F5F1EB;
    --text-secondary: #A69E96;
    --border-color: #3D3A37;
    --primary-color: #F4A896;
    --primary-dark: #FADAD2;
    --card-bg: #343130;
    --input-bg: #2D2A27;
}

/* 기본 배경 및 텍스트 */
body.dark-mode {
    background-color: var(--bg-color);
    color: var(--text-color);
}

/* 카드 */
body.dark-mode .card,
body.dark-mode .stat-card,
body.dark-mode .feature-card,
body.dark-mode .post-card,
body.dark-mode .diary-card,
body.dark-mode .auth-card {
    background: var(--card-bg);
    border-color: var(--border-color);
    color: var(--text-color);
}

/* 인풋 */
body.dark-mode input,
body.dark-mode textarea,
body.dark-mode select {
    background: var(--input-bg);
    border-color: var(--border-color);
    color: var(--text-color);
}

body.dark-mode input::placeholder,
body.dark-mode textarea::placeholder {
    color: var(--text-secondary);
}

body.dark-mode input:focus,
body.dark-mode textarea:focus,
body.dark-mode select:focus {
    border-color: var(--primary-color);
}

/* 버튼 */
body.dark-mode .btn-outline {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

body.dark-mode .btn-outline:hover {
    background: var(--primary-color);
    color: white;
}

/* 네비게이션 */
body.dark-mode header,
body.dark-mode nav,
body.dark-mode .navbar {
    background: var(--bg-secondary);
    border-color: var(--border-color);
}

body.dark-mode .nav-link,
body.dark-mode .navbar a,
body.dark-mode .nav-dropdown-toggle,
body.dark-mode .nav-single-link {
    color: var(--text-color);
}

body.dark-mode .nav-dropdown-menu {
    background: var(--bg-secondary);
    border-color: var(--border-color);
}

body.dark-mode .nav-dropdown-menu li a:hover,
body.dark-mode .nav-dropdown-toggle:hover,
body.dark-mode .nav-single-link:hover {
    background: var(--bg-primary);
}

body.dark-mode .nav-dropdown-menu li a.current {
    background: rgba(244, 168, 150, 0.15);
    color: var(--primary-color);
}

body.dark-mode .nav-badge-soon {
    background: var(--bg-primary);
    color: var(--text-muted);
}

@media (max-width: 768px) {
    body.dark-mode .nav-menu {
        background: var(--bg-secondary);
    }

    body.dark-mode .nav-dropdown-menu {
        background: var(--bg-primary);
    }

    body.dark-mode .nav-overlay.active {
        background: rgba(0, 0, 0, 0.5);
    }
}

/* 링크 */
body.dark-mode a {
    color: var(--primary-color);
}

body.dark-mode a:hover {
    color: var(--primary-dark);
}

/* 테이블 */
body.dark-mode table {
    background: var(--card-bg);
}

body.dark-mode th {
    background: var(--bg-secondary);
    color: var(--text-color);
    border-color: var(--border-color);
}

body.dark-mode td {
    border-color: var(--border-color);
    color: var(--text-color);
}

body.dark-mode tr:hover td {
    background: rgba(255, 255, 255, 0.05);
}

/* 모달 */
body.dark-mode .modal-content,
body.dark-mode .modal {
    background: var(--card-bg);
    color: var(--text-color);
}

body.dark-mode .modal-header,
body.dark-mode .modal-footer {
    border-color: var(--border-color);
}

/* 사이드바 */
body.dark-mode .sidebar {
    background: var(--bg-secondary);
    border-color: var(--border-color);
}

/* 드롭다운 */
body.dark-mode .dropdown-menu {
    background: var(--card-bg);
    border-color: var(--border-color);
}

body.dark-mode .dropdown-item {
    color: var(--text-color);
}

body.dark-mode .dropdown-item:hover {
    background: rgba(255, 255, 255, 0.1);
}

/* 코드 블록 */
body.dark-mode code,
body.dark-mode pre {
    background: var(--input-bg);
    color: var(--text-color);
}

/* 구분선 */
body.dark-mode hr {
    border-color: var(--border-color);
}

/* Footer */
body.dark-mode footer {
    background: var(--bg-secondary);
    border-color: var(--border-color);
    color: var(--text-secondary);
}

/* 알림 박스 */
body.dark-mode .alert {
    border-color: var(--border-color);
}

body.dark-mode .alert-success {
    background: rgba(72, 187, 120, 0.2);
    color: #68d391;
}

body.dark-mode .alert-error,
body.dark-mode .alert-danger {
    background: rgba(245, 101, 101, 0.2);
    color: #fc8181;
}

body.dark-mode .alert-warning {
    background: rgba(237, 137, 54, 0.2);
    color: #f6ad55;
}

body.dark-mode .alert-info {
    background: rgba(66, 153, 225, 0.2);
    color: #63b3ed;
}

/* 배지 */
body.dark-mode .badge {
    background: var(--input-bg);
    color: var(--text-color);
}

/* 감정 카드 */
body.dark-mode .emotion-card,
body.dark-mode .need-card {
    background: var(--card-bg);
    border-color: var(--border-color);
}

body.dark-mode .emotion-card.selected,
body.dark-mode .need-card.selected {
    border-color: var(--primary-color);
    background: rgba(244, 168, 150, 0.2);
}

/* 일기 작성 영역 */
body.dark-mode .diary-textarea,
body.dark-mode .content-area {
    background: var(--input-bg);
    color: var(--text-color);
}

/* 통계 카드 */
body.dark-mode .stats-card {
    background: var(--card-bg);
}

/* 커뮤니티 포스트 */
body.dark-mode .community-post {
    background: var(--card-bg);
    border-color: var(--border-color);
}

/* 그림자 조정 (다크모드에서는 더 진하게) */
body.dark-mode .card,
body.dark-mode .modal-content,
body.dark-mode .dropdown-menu {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

/* 스크롤바 */
body.dark-mode ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

body.dark-mode ::-webkit-scrollbar-track {
    background: var(--bg-secondary);
}

body.dark-mode ::-webkit-scrollbar-thumb {
    background: #555;
    border-radius: 4px;
}

body.dark-mode ::-webkit-scrollbar-thumb:hover {
    background: #666;
}

/* 다크모드 토글 버튼 */
.dark-mode-toggle {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0.5rem;
    transition: transform 0.2s ease;
    line-height: 1;
}

.dark-mode-toggle:hover {
    transform: scale(1.1);
}

/* 트랜지션 효과 */
body {
    transition: background-color 0.3s ease, color 0.3s ease;
}

.card, .btn, input, textarea, select, .navbar, footer {
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}