html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

a, .btn-link {
    color: #006bb7;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred.";
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

/* ======================================================== */
/* 💡 라이트/다크 모드 변수 설정                            */
/* ======================================================== */
:root {
    --bg-color: #f8f9fa;
    --text-color: #212529;
    --card-bg: #ffffff;
    --card-inner-bg: #f8f9fa;
    --card-border: #dee2e6;
    --todo-bg: #e9ecef;
    --todo-hover: #ced4da;
    --todo-completed: #d1e7dd;
    --gauge-bg: #ffffff;
}

/* 다크 모드 (배경 연하게 + 카드 내부 계층감 완벽 분리) */
html.dark-mode {
    --bg-color: #323232; /* 1. 전체 바탕 배경색 (은은하고 연해진 다크회색) */
    --text-color: #ffffff;
    --card-bg: #414141; /* 2. 캐릭터 큰 카드 배경색 */
    --card-inner-bg: #383838; /* 3. 레이드/일숙 내부 박스 배경색 (밝게 띄워줌) */
    --card-border: #3d3d3d; /* 테두리 색상 */
    --todo-bg: #383838; /* 항목 배경색 */
    --todo-hover: #444444;
    --todo-completed: #2b4738;
    --gauge-bg: #1c1c1c; /* 게이지 빈 영역 배경색 */
}

body {
    background-color: var(--bg-color) !important;
    color: var(--text-color) !important;
    font-family: 'Noto Sans KR', sans-serif;
    transition: background-color 0.2s, color 0.2s;
}

.character-grid {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    padding: 16px 0;
}

.character-card {
    background-color: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 8px;
    min-width: 270px;
    max-width: 280px;
    padding: 14px;
}

.todo-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    margin-bottom: 6px;
    background-color: var(--todo-bg);
    border-radius: 4px;
    cursor: pointer;
    user-select: none;
    transition: background-color 0.15s ease-in-out;
}

    .todo-item:hover {
        background-color: var(--todo-hover);
    }

    .todo-item.completed {
        background-color: var(--todo-completed);
        text-decoration: line-through;
        color: #d1d5db;
    }

/* ======================================================== */
/* 💡 다크 모드 전용 스타일 계층 분리                       */
/* ======================================================== */

/* 1. 메인 바탕 배경 영역 */
html.dark-mode,
html.dark-mode body,
html.dark-mode div.min-vh-100 {
    background-color: var(--bg-color) !important;
    color: #ffffff !important;
}

    /* 2. 캐릭터 큰 카드 영역 (bg-white) */
    html.dark-mode .card,
    html.dark-mode .bg-white {
        background-color: var(--card-bg) !important;
        color: #ffffff !important;
        border-color: var(--card-border) !important;
    }

    /* 3. 레이드 및 숙제 내부 박스 영역 (bg-light) - 카드보다 밝게 입체감 부여 */
    html.dark-mode .bg-light {
        background-color: var(--card-inner-bg) !important;
        color: #ffffff !important;
        border-color: var(--card-border) !important;
    }

    /* 텍스트 컬러 처리 */
    html.dark-mode h1, html.dark-mode h2, html.dark-mode h3,
    html.dark-mode h4, html.dark-mode h5, html.dark-mode h6,
    html.dark-mode p, html.dark-mode span, html.dark-mode div,
    html.dark-mode label, html.dark-mode small,
    html.dark-mode .text-dark,
    html.dark-mode .text-secondary,
    html.dark-mode .text-muted {
        color: #ffffff !important;
    }

    /* 4. 게이지 바 배경 */
    html.dark-mode .progress,
    html.dark-mode [class*="gauge"],
    html.dark-mode [class*="progress"] {
        background-color: var(--gauge-bg) !important;
        border-color: var(--card-border) !important;
    }

        html.dark-mode .progress *,
        html.dark-mode [class*="gauge"] * {
            text-shadow: 1px 1px 2px #000, -1px -1px 2px #000, 1px -1px 2px #000, -1px 1px 2px #000 !important;
        }

    /* 5. 폼 / 드롭다운 / 탭 메뉴 다크화 */
    html.dark-mode .form-control,
    html.dark-mode .form-select {
        background-color: #242424 !important;
        color: #ffffff !important;
        border-color: var(--card-border) !important;
    }

        html.dark-mode .form-select option {
            background-color: #242424;
            color: #ffffff;
        }

    html.dark-mode .nav-tabs .nav-link {
        color: #ffffff;
        border-color: var(--card-border);
    }

        html.dark-mode .nav-tabs .nav-link.active {
            background-color: var(--card-bg) !important;
            color: #ffffff !important;
            border-color: var(--card-border) !important;
        }

    html.dark-mode .border,
    html.dark-mode .shadow-sm {
        border-color: var(--card-border) !important;
    }