/* 1. 테마 변수 설정 */
:root {
    --fig-primary: #6f42c1;
    --fig-secondary: #e9ecef;
    --fig-success: #198754;
    --fig-bg: #f4f7f6;
    --fig-card-bg: #ffffff;
    --fig-text-main: #333333;
    --fig-text-muted: #6c757d;
    --fig-border: #dee2e6;
    --fig-card-shadow: 0 4px 6px rgba(0,0,0,0.07);
}

/* 2. 다크모드 강제 적용 (html 클래스 기준) */
html.dark-mode body,
body.dark-mode {
    --fig-bg: #121212;
    --fig-card-bg: #1e1e1e;
    --fig-text-main: #e0e0e0;
    --fig-text-muted: #a0a0a0;
    --fig-border: #333333;
    --fig-card-shadow: 0 4px 10px rgba(0,0,0,0.3);
}

/* 3. 기본 스타일 및 전환 효과 */
body {
    background-color: var(--fig-bg);
    color: var(--fig-text-main);
    font-family: 'Pretendard', sans-serif;
    transition: background-color 0.2s, color 0.2s;
}

/* 4. 다크모드 시 고정 클래스 강제 무력화 (!important) */
html.dark-mode .bg-white,
html.dark-mode .bg-light,
html.dark-mode .navbar,
html.dark-mode footer,
html.dark-mode main {
    background-color: var(--fig-bg) !important;
    color: var(--fig-text-main) !important;
    border-color: var(--fig-border) !important;
}

html.dark-mode .card {
    background-color: var(--fig-card-bg) !important;
    border-color: var(--fig-border) !important;
}

/* 5. 컴포넌트 유틸리티 */
.text-fig { color: var(--fig-primary); }
.bg-fig { background-color: var(--fig-primary); color: white; }
.transition-card:active { transform: scale(0.96); filter: brightness(0.9); }


/* [Dark Mode] 수동/시스템 통합 강제 적용 */
html.dark-mode,
html.dark-mode body,
html.dark-mode main,
html.dark-mode footer,
html.dark-mode .container-fluid,
html.dark-mode .container {
    background-color: var(--fig-bg) !important;
    color: var(--fig-text-main) !important;
}

/* 부트스트랩의 흰색 배경 클래스들을 가진 요소들까지 강제 타겟팅 */
html.dark-mode .bg-white,
html.dark-mode .bg-light {
    background-color: var(--fig-card-bg) !important; /* 카드는 약간 밝은 회색으로 */
    color: var(--fig-text-main) !important;
}

/* 네비게이션 바와 푸터 경계선 조절 */
html.dark-mode .navbar,
html.dark-mode footer.border-top {
    background-color: var(--fig-bg) !important;
    border-color: var(--fig-border) !important;
}


/* 1. 최상위 html부터 바닥 끝까지 배경색 강제 고정 */
html.dark-mode {
    background-color: var(--fig-bg) !important;
}

html.dark-mode body {
    background-color: var(--fig-bg) !important;
    min-height: 100vh; /* 화면 높이가 낮아도 바닥까지 채움 */
}

/* 2. 푸터의 흰색 배경 강제 제거 */
html.dark-mode footer,
html.dark-mode .bg-white,
html.dark-mode .border-top {
    background-color: var(--fig-bg) !important;
    color: var(--fig-text-muted) !important;
    border-color: var(--fig-border) !important;
}

/* 3. 혹시 모를 내부 요소의 흰색 배경 방지 */
html.dark-mode div[class*="bg-white"] {
    background-color: var(--fig-bg) !important;
}


/* [Dark Mode] 글자색 시인성 긴급 처방 */
html.dark-mode body,
html.dark-mode .text-dark,
html.dark-mode .fw-bold,
html.dark-mode h1, html.dark-mode h2, html.dark-mode h3, 
html.dark-mode h4, html.dark-mode h5, html.dark-mode h6 {
    color: var(--fig-text-main) !important; /* 밝은 회색(#e0e0e0)으로 강제 고정 */
}

/* 푸터 및 뮤트(흐린) 글자 처리 */
html.dark-mode .text-muted,
html.dark-mode .extra-small,
html.dark-mode footer p {
    color: var(--fig-text-muted) !important; /* 조금 더 밝은 회색(#a0a0a0)으로 */
}

/* 링크 및 강조 텍스트 */
html.dark-mode a:not(.btn) {
    color: #b388ff !important; /* 다크모드에서 잘 보이는 연보라색 */
}

/* 카드 내부의 검은색 텍스트 강제 변환 */
html.dark-mode .card .fw-bold {
    color: var(--fig-text-main) !important;
}