/* ============================================================
   darkmode.css - 다크모드 CSS 변수 오버라이드
   html[data-theme="dark"] 으로 제어
   ============================================================ */

html[data-theme="dark"] {

    /* -------------------------------------------------------
       색상 변수 오버라이드
    ------------------------------------------------------- */
    --color-bg:             #0f0f0f;
    --color-bg-secondary:   #161616;
    --color-bg-card:        #1a1a1a;
    --color-bg-dark:        #000000;

    --color-text:           #f0f0f0;
    --color-text-secondary: #a0a0a0;
    --color-text-muted:     #666666;
    --color-text-inverse:   #0f0f0f;

    --color-border:         #2a2a2a;
    --color-border-dark:    #333333;

    --color-primary-bg:     rgba(232, 184, 75, 0.08);

    --shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.4);
    --shadow-lg: 0 8px 24px rgba(0,0,0,0.5);
}

/* -------------------------------------------------------
   네비게이션
------------------------------------------------------- */
html[data-theme="dark"] .site-header {
    background: #0f0f0f;
    border-bottom-color: #1e1e1e;
}

html[data-theme="dark"] .nav-dropdown {
    background: #1a1a1a;
    border-color: #2a2a2a;
}

html[data-theme="dark"] .nav-link {
    color: #a0a0a0;
}
html[data-theme="dark"] .nav-link:hover,
html[data-theme="dark"] .nav-link.active {
    color: #f0f0f0;
}

html[data-theme="dark"] .nav-phone {
    color: var(--color-primary);
}

/* 모바일 메뉴 */
html[data-theme="dark"] .mobile-menu {
    background: #0f0f0f;
    border-color: #1e1e1e;
}

html[data-theme="dark"] .mobile-menu-link {
    color: #a0a0a0;
    border-bottom-color: #1e1e1e;
}

/* -------------------------------------------------------
   카드 / 폼
------------------------------------------------------- */
html[data-theme="dark"] .car-card {
    background: #1a1a1a;
    border-color: #2a2a2a;
}
html[data-theme="dark"] .car-card:hover {
    border-color: var(--color-primary);
}

html[data-theme="dark"] .form-control {
    background: #1e1e1e;
    border-color: #333;
    color: #f0f0f0;
}
html[data-theme="dark"] .form-control:focus {
    background: #222;
    border-color: var(--color-primary);
}
html[data-theme="dark"] .form-control::placeholder {
    color: #555;
}

html[data-theme="dark"] select.form-control {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23666' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
}

/* -------------------------------------------------------
   버튼
------------------------------------------------------- */
html[data-theme="dark"] .btn-outline {
    color: #c0c0c0;
    border-color: #444;
}
html[data-theme="dark"] .btn-outline:hover {
    color: var(--color-primary);
    border-color: var(--color-primary);
}

html[data-theme="dark"] .btn-dark {
    background: #f0f0f0;
    color: #0f0f0f;
    border-color: #f0f0f0;
}

/* -------------------------------------------------------
   뱃지 / 필터 탭
------------------------------------------------------- */
html[data-theme="dark"] .filter-tab {
    background: #1a1a1a;
    border-color: #2a2a2a;
    color: #888;
}
html[data-theme="dark"] .filter-tab.active {
    background: var(--color-primary);
    color: #0f0f0f;
    border-color: var(--color-primary);
}
html[data-theme="dark"] .filter-tab:hover:not(.active) {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

/* -------------------------------------------------------
   페이지네이션
------------------------------------------------------- */
html[data-theme="dark"] .pagination a,
html[data-theme="dark"] .pagination span {
    background: #1a1a1a;
    border-color: #2a2a2a;
    color: #888;
}
html[data-theme="dark"] .pagination .current {
    background: var(--color-primary);
    color: #0f0f0f;
    border-color: var(--color-primary);
}

/* -------------------------------------------------------
   buy-car.php 필터 사이드바
------------------------------------------------------- */
html[data-theme="dark"] .filter-sidebar {
    background: #1a1a1a;
    border-color: #2a2a2a;
}

html[data-theme="dark"] .filter-section-title {
    color: #888;
    border-bottom-color: #2a2a2a;
}

html[data-theme="dark"] .brand-btn,
html[data-theme="dark"] .model-btn {
    background: #222;
    border-color: #333;
    color: #a0a0a0;
}
html[data-theme="dark"] .brand-btn.active,
html[data-theme="dark"] .model-btn.active {
    background: var(--color-primary-bg);
    border-color: var(--color-primary);
    color: var(--color-primary);
}

/* -------------------------------------------------------
   car-detail.php
------------------------------------------------------- */
html[data-theme="dark"] .detail-sidebar {
    background: #1a1a1a;
    border-color: #2a2a2a;
}

html[data-theme="dark"] .detail-spec-item {
    background: #1e1e1e;
    border-color: #2a2a2a;
}

html[data-theme="dark"] .trust-badge {
    background: #1e1e1e;
    border-color: #2a2a2a;
}

html[data-theme="dark"] .purchase-cost-box {
    background: #161616;
    border-color: #2a2a2a;
}

html[data-theme="dark"] .detail-section {
    border-bottom-color: #1e1e1e;
}

html[data-theme="dark"] .detail-tab {
    color: #666;
    border-bottom-color: transparent;
}
html[data-theme="dark"] .detail-tab.active {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
}

html[data-theme="dark"] .warranty-bar-wrap {
    background: #2a2a2a;
}

html[data-theme="dark"] .faq-item {
    border-bottom-color: #1e1e1e;
}

html[data-theme="dark"] .recommend-box {
    background: #161616;
}

/* -------------------------------------------------------
   후기 페이지
------------------------------------------------------- */
html[data-theme="dark"] .review-card {
    background: #1a1a1a;
    border-color: #2a2a2a;
}

/* -------------------------------------------------------
   모달 / 오버레이
------------------------------------------------------- */
html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .image-modal-content {
    background: #1a1a1a;
    border-color: #2a2a2a;
}

/* -------------------------------------------------------
   토스트
------------------------------------------------------- */
html[data-theme="dark"] .toast {
    background: #2a2a2a;
    color: #f0f0f0;
    border-color: #333;
}

/* -------------------------------------------------------
   티커 (상단 띠배너) - 다크모드에서 조금 더 어둡게
------------------------------------------------------- */
html[data-theme="dark"] .ticker-wrap {
    background: #000;
}

/* -------------------------------------------------------
   스크롤바 (webkit)
------------------------------------------------------- */
html[data-theme="dark"] ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
html[data-theme="dark"] ::-webkit-scrollbar-track {
    background: #1a1a1a;
}
html[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: #333;
    border-radius: 3px;
}
html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: #444;
}

/* -------------------------------------------------------
   이미지 밝기 조절 (너무 눈부시지 않게)
------------------------------------------------------- */
html[data-theme="dark"] img:not([src*=".svg"]):not(.no-dim) {
    filter: brightness(0.92);
}
html[data-theme="dark"] img:hover:not([src*=".svg"]):not(.no-dim) {
    filter: brightness(1);
}

/* -------------------------------------------------------
   다크모드 토글 버튼
------------------------------------------------------- */
.darkmode-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-full);
    border: 1px solid var(--color-border);
    background: var(--color-bg-card);
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 16px;
    flex-shrink: 0;
}
.darkmode-toggle:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

/* -------------------------------------------------------
   전환 애니메이션 (테마 전환 시 부드럽게)
------------------------------------------------------- */
html.theme-transitioning,
html.theme-transitioning *,
html.theme-transitioning *::before,
html.theme-transitioning *::after {
    transition:
        background-color 0.25s ease,
        border-color 0.25s ease,
        color 0.2s ease,
        box-shadow 0.2s ease !important;
}