:root {
    /* 🌙 기본 다크 테마 */
    --bg-color: #0d1117;
    --card-bg: #161b22;
    --header-bg: #21262d;
    --text-main: #ffffff;
    --text-muted: #8b949e;
    --accent-purple: #c084fc;
    --accent-blue: #58a6ff;
    --border-color: #30363d;
    --input-bg: #0d1117;
    --btn-primary: linear-gradient(135deg, #b788ff, #9b6bff);
    --strike-color: rgba(255, 255, 255, 0.4); /* 다크모드 취소선 */
}

/* ☀️ 라이트 모드 변수 정의 */
html.light-mode {
    --bg-color: #f0f2f5;
    --card-bg: #ffffff;
    --header-bg: #f8f9fa;
    --text-main: #1f2328;
    --text-muted: #636c76;
    --accent-purple: #8250df;
    --accent-blue: #0969da;
    --border-color: #d0d7de;
    --input-bg: #ffffff;
    --btn-primary: linear-gradient(135deg, #8250df, #6531b3);
    --strike-color: rgba(0, 0, 0, 0.3); /* 라이트모드 취소선 */
}

body {
    background-color: var(--bg-color) !important;
    color: var(--text-main) !important;
    font-family: 'Pretendard', -apple-system, sans-serif;
    transition: background-color 0.3s, color 0.3s;
    line-height: 1.6;
    margin: 0;
}

/* 1. 통계 카드 (가독성 최적화) */
.stats-card {
    background: var(--card-bg) !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    border-radius: 12px;
}

html:not(.light-mode) .stats-card {
    background: linear-gradient(135deg, #1c212e 0%, #0d1117 100%) !important;
    border-color: var(--accent-purple) !important;
}

.stats-card h5 { color: var(--accent-purple) !important; font-weight: 700; }
.stats-card h3 { color: var(--text-main) !important; font-weight: 800; }

#percentText, #adminPercentText {
    background: linear-gradient(45deg, var(--accent-purple), var(--accent-blue));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 800;
    text-shadow: 0 0 10px rgba(192, 132, 252, 0.2);
}

/* 2. 입력창 및 카드 */
.content-card, .table-card {
    background-color: var(--card-bg) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 12px;
    overflow: hidden;
}

.form-control {
    background-color: var(--input-bg) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-main) !important;
}

.form-control:focus {
    border-color: var(--accent-purple) !important;
    box-shadow: 0 0 0 3px rgba(192, 132, 252, 0.25) !important;
}

/* 3. 테이블 및 가독성 이슈 해결 */
.table { color: var(--text-main) !important; margin-bottom: 0; }

.table thead th {
    background-color: var(--header-bg) !important;
    color: var(--text-muted) !important;
    border-bottom: 2px solid var(--accent-purple) !important;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.85rem;
}

.table td {
    background-color: var(--card-bg) !important;
    color: var(--text-main) !important;
    border-bottom: 1px solid var(--border-color) !important;
    padding: 1rem 0.75rem;
}

/* 4. ✅ 완료 항목 (Strike-through 적용) */
.row-completed {
    opacity: 0.6;
}

.row-completed td {
    text-decoration: line-through;
    text-decoration-color: var(--accent-purple);
    color: var(--text-muted) !important;
}

/* 체크박스 열은 취소선 제외 */
.row-completed td:last-child {
    text-decoration: none;
}

/* 5. 🔴 지연 항목 (가독성 1순위) */
.table-danger, .table-danger td {
    background-color: rgba(248, 81, 73, 0.1) !important;
    border-left: 5px solid #f85149 !important;
}

.text-danger {
    color: #ff7b72 !important;
    font-weight: 800;
}

/* 6. 날짜 입력창 및 다크모드 대응 */
input[type="date"] {
    color-scheme: dark;
    color: var(--text-main) !important;
    background-color: var(--input-bg) !important;
}

html.light-mode input[type="date"] {
    color-scheme: light;
}

/* 7. 체크박스 커스텀 */
.form-check-input {
    cursor: pointer;
    width: 1.25rem;
    height: 1.25rem;
    background-color: var(--input-bg);
    border: 1px solid var(--border-color);
}

.form-check-input:checked {
    background-color: var(--accent-purple);
    border-color: var(--accent-purple);
}

.font-mono {
    font-family: 'JetBrains Mono', 'Courier New', monospace;
    letter-spacing: -0.5px;
}