/* ===== Dark Theme — 시맨틱 토큰 정의 ===== */
/* 설계 문서: docs/common/dark-theme.md */

/* 라이트 (기본) */
:root {
    --color-bg-base: #ffffff;
    --color-bg-elevated: #f8f9fa;
    --color-bg-elevated-bright: #ffffff;
    --color-bg-elevated-strong: #eef1f5;
    --color-bg-elevated-strong-hover: #e2e8ee;
    --color-bg-nav: #e9ecef;
    --color-bg-overlay: rgba(255, 255, 255, 0.92);
    --color-text-primary: #212529;
    --color-text-secondary: #6c757d;
    --color-text-muted: #adb5bd;
    --color-border: #dee2e6;
    --color-border-control: #ced4da;
    --color-accent: #0d6efd;
    --color-accent-fg: #ffffff;
    --color-shadow: rgba(0, 0, 0, 0.08);
    --hero-overlay-from: rgba(0, 0, 0, 0.35);
    --hero-overlay-to: rgba(0, 0, 0, 0.55);
}

/* 다크 — specificity 한 단계 올려 로드 순서 의존성 제거 */
html[data-theme="dark"] {
    --color-bg-base: #0f1216;
    --color-bg-elevated: #181c22;
    --color-bg-elevated-bright: #212832;
    --color-bg-elevated-strong: #232a33;
    --color-bg-elevated-strong-hover: #2b333d;
    --color-bg-nav: #1d2229;
    --color-bg-overlay: rgba(15, 18, 22, 0.92);
    --color-text-primary: #e6e8eb;
    --color-text-secondary: #adb5bd;
    --color-text-muted: #868e96;
    --color-border: #2a3038;
    --color-border-control: #495057;
    --color-accent: #4dabf7;
    --color-accent-fg: #0f1216;
    --color-shadow: rgba(0, 0, 0, 0.5);
    --hero-overlay-from: rgba(0, 0, 0, 0.55);
    --hero-overlay-to: rgba(0, 0, 0, 0.75);

    /* Bootstrap 5.3 변수 매핑 — utility 클래스 자동 분기 일관화 */
    --bs-body-bg: var(--color-bg-base);
    --bs-body-color: var(--color-text-primary);
    --bs-border-color: var(--color-border);
    --bs-secondary-color: var(--color-text-secondary);
    --bs-tertiary-bg: var(--color-bg-elevated);
    --bs-link-color: var(--color-accent);
    --bs-link-hover-color: var(--color-accent);
    --bs-emphasis-color: var(--color-text-primary);

    /* list-group — 카드/리스트 형태 컴포넌트 */
    --bs-list-group-bg: var(--color-bg-elevated);
    --bs-list-group-color: var(--color-text-primary);
    --bs-list-group-border-color: var(--color-border);
    --bs-list-group-action-color: var(--color-text-primary);
    --bs-list-group-action-hover-bg: var(--color-bg-base);
    --bs-list-group-action-hover-color: var(--color-text-primary);
    --bs-list-group-action-active-bg: var(--color-bg-base);
    --bs-list-group-action-active-color: var(--color-text-primary);
}

/* Bootstrap text utility — 다크 모드에서 알파 적용 흐릿함 제거 */
html[data-theme="dark"] .text-secondary {
    color: var(--color-text-secondary) !important;
    --bs-text-opacity: 1;
}

html[data-theme="dark"] .text-muted {
    color: var(--color-text-muted) !important;
    --bs-text-opacity: 1;
}

/* Bootstrap btn-outline-secondary — 다크 모드에서 텍스트/보더 가독성 보강 */
html[data-theme="dark"] .btn-outline-secondary {
    --bs-btn-color: var(--color-text-primary);
    --bs-btn-border-color: var(--color-border-control);
    --bs-btn-hover-color: var(--color-text-primary);
    --bs-btn-hover-bg: var(--color-bg-elevated);
    --bs-btn-hover-border-color: var(--color-border-control);
    --bs-btn-focus-shadow-rgb: 173, 181, 189;
    --bs-btn-active-color: var(--color-text-primary);
    --bs-btn-active-bg: var(--color-bg-elevated);
    --bs-btn-active-border-color: var(--color-border-control);
    --bs-btn-disabled-color: var(--color-text-muted);
    --bs-btn-disabled-border-color: var(--color-border);
}

/* 첫 paint 트랜지션 차단 */
html.theme-transitions-disabled,
html.theme-transitions-disabled *,
html.theme-transitions-disabled *::before,
html.theme-transitions-disabled *::after {
    transition: none !important;
}

/* 모드 전환 트랜지션 — body 전반 */
body {
    transition: background-color 200ms ease, color 200ms ease;
}

@media (prefers-reduced-motion: reduce) {
    body {
        transition: none;
    }
}

/* 인쇄 시 라이트 강제 — :root 와 html[data-theme="dark"] 양쪽 override */
@media print {
    :root,
    html[data-theme="dark"] {
        --color-bg-base: #ffffff;
        --color-bg-elevated: #f8f9fa;
        --color-bg-elevated-bright: #fafcff;
        --color-bg-elevated-strong: #eef1f5;
        --color-bg-elevated-strong-hover: #e2e8ee;
        --color-bg-nav: #e9ecef;
        --color-bg-overlay: rgba(255, 255, 255, 0.92);
        --color-text-primary: #212529;
        --color-text-secondary: #6c757d;
        --color-text-muted: #adb5bd;
        --color-border: #dee2e6;
        --color-border-control: #ced4da;
        --color-accent: #0d6efd;
        --color-accent-fg: #ffffff;
        --color-shadow: rgba(0, 0, 0, 0.08);
        --hero-overlay-from: rgba(0, 0, 0, 0.35);
        --hero-overlay-to: rgba(0, 0, 0, 0.55);
    }
}