/* ============================================================
   데이터팝콘 HR 시스템 — Professional HR Design
   ============================================================ */

:root {
    /* Brand */
    --primary: #D6336C;
    --primary-hover: #C2255C;
    --primary-light: #FFF0F6;
    --primary-subtle: #FFDEEB;

    /* Status */
    --success: #2F9E44;
    --success-light: #EBFBEE;
    --success-border: #B2F2BB;
    --warning: #E8590C;
    --warning-light: #FFF4E6;
    --warning-border: #FFD8A8;
    --danger: #E03131;
    --danger-light: #FFF5F5;
    --danger-border: #FFC9C9;
    --info: #1971C2;
    --info-light: #E7F5FF;
    --info-border: #A5D8FF;

    /* Neutrals */
    --white: #FFFFFF;
    --gray-50: #F8F9FA;
    --gray-100: #F1F3F5;
    --gray-200: #E9ECEF;
    --gray-300: #DEE2E6;
    --gray-400: #CED4DA;
    --gray-500: #868E96;
    --gray-600: #495057;
    --gray-700: #343A40;
    --gray-800: #212529;
    --gray-900: #0F0F10;

    /* Sizing */
    --radius-sm: 6px;
    --radius: 10px;
    --radius-lg: 14px;
    --radius-xl: 20px;

    /* Shadows */
    --shadow-xs: 0 1px 2px rgba(0,0,0,0.04);
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.03);
    --shadow: 0 2px 8px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.04);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.04);
    --shadow-lg: 0 8px 24px rgba(0,0,0,0.08), 0 4px 8px rgba(0,0,0,0.04);

    /* Layout */
    --content-width: 840px;
}

/* ==================== Reset ==================== */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Pretendard", "Noto Sans KR", sans-serif;
    background: var(--gray-50);
    color: var(--gray-800);
    line-height: 1.6;
    min-height: 100vh;
    word-break: keep-all;
    overflow-wrap: break-word;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }


/* ==================== Layout ==================== */
.container {
    max-width: var(--content-width);
    margin: 0 auto;
    padding: 0 20px 48px;
}


/* ==================== Navigation ==================== */
.nav {
    background: rgba(255,255,255,0.88);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--gray-200);
    position: sticky;
    top: 0;
    z-index: 100;
}

.nav-inner {
    max-width: var(--content-width);
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 56px;
}

.nav-brand {
    display: flex;
    align-items: center;
}

.nav-logo {
    height: 30px;
    width: auto;
    vertical-align: middle;
}

.nav-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.nav-date {
    color: var(--gray-500);
    font-size: 0.82rem;
    font-weight: 500;
    white-space: nowrap;
}

.nav-name {
    color: var(--gray-700);
    font-weight: 600;
    font-size: 0.88rem;
}

.nav-logout-form {
    display: inline;
    margin: 0;
}

.nav-logout {
    color: var(--gray-500);
    font-size: 0.82rem;
    padding: 6px 10px;
    border-radius: var(--radius-sm);
    transition: all 0.15s;
    text-decoration: none !important;
    background: transparent;
    border: none;
    cursor: pointer;
    font-family: inherit;
}

.nav-logout:hover {
    background: var(--gray-100);
    color: var(--gray-700);
}

.nav-tabs {
    max-width: var(--content-width);
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    gap: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.nav-tabs::-webkit-scrollbar { display: none; }

.nav-tabs a {
    flex-shrink: 0;
    padding: 12px 18px;
    font-size: 0.87rem;
    font-weight: 500;
    color: var(--gray-500);
    border-bottom: 2.5px solid transparent;
    transition: all 0.2s;
    text-decoration: none !important;
    white-space: nowrap;
}

.nav-tabs a:hover {
    color: var(--gray-700);
}

.nav-tabs a.active {
    color: var(--primary);
    border-bottom-color: var(--primary);
    font-weight: 600;
}

.nav-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--danger);
    color: white;
    font-size: 0.68rem;
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    border-radius: 9px;
    padding: 0 5px;
    margin-left: 4px;
    vertical-align: middle;
}


/* ==================== Page Header ==================== */
.page-header {
    padding: 28px 0 22px;
}

.page-header h1 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--gray-800);
    letter-spacing: -0.02em;
}

.page-header p {
    color: var(--gray-500);
    margin-top: 6px;
    font-size: 0.9rem;
}


/* ==================== Cards ==================== */
.card {
    background: var(--white);
    border-radius: var(--radius-lg);
    border: 1px solid var(--gray-200);
    padding: 24px;
    margin-bottom: 16px;
    transition: box-shadow 0.2s;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.card-header h2 {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--gray-800);
    letter-spacing: -0.01em;
}


/* ==================== Balance Card (Dashboard) ==================== */
.balance-card {
    background: linear-gradient(135deg, #C2255C 0%, #D6336C 40%, #E8436F 100%);
    color: white;
    border-radius: var(--radius-lg);
    padding: 32px;
    margin-bottom: 20px;
    position: relative;
    overflow: hidden;
}

.balance-card::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -15%;
    width: 280px;
    height: 280px;
    border-radius: 50%;
    background: rgba(255,255,255,0.07);
    pointer-events: none;
}

.balance-card::after {
    content: '';
    position: absolute;
    bottom: -40%;
    left: -8%;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: rgba(255,255,255,0.04);
    pointer-events: none;
}

.balance-card .label {
    font-size: 0.88rem;
    opacity: 0.85;
    margin-bottom: 10px;
    font-weight: 500;
    letter-spacing: 0.01em;
}

.balance-card .value {
    font-size: 2.8rem;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.03em;
    position: relative;
}

.balance-card .value small {
    font-size: 1.1rem;
    font-weight: 400;
    opacity: 0.75;
}

.balance-bar {
    margin-top: 20px;
    background: rgba(255,255,255,0.2);
    border-radius: 10px;
    height: 8px;
    overflow: hidden;
}

.balance-bar-fill {
    height: 100%;
    background: white;
    border-radius: 10px;
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.balance-details {
    display: flex;
    gap: 24px;
    margin-top: 14px;
    font-size: 0.85rem;
    opacity: 0.85;
    font-weight: 500;
}


/* ==================== Stats Card (Dashboard) ==================== */
.stats-card {
    display: flex;
    background: var(--white);
    border-radius: var(--radius-lg);
    border: 1px solid var(--gray-200);
    padding: 20px 24px;
    align-items: center;
}

.stats-item {
    flex: 1;
    text-align: center;
}

.stats-divider {
    width: 1px;
    height: 40px;
    background: var(--gray-200);
    flex-shrink: 0;
}

.stats-label {
    display: block;
    font-size: 0.73rem;
    color: var(--gray-500);
    margin-bottom: 6px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.stats-value {
    display: block;
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--gray-800);
}

.stats-value.highlight, .highlight {
    color: var(--primary);
}


/* ==================== Extra Balance Cards ==================== */
.extra-balance-row {
    display: flex;
    gap: 12px;
}

.extra-balance-card {
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--white);
    border-radius: var(--radius-lg);
    border: 1px solid var(--gray-200);
    padding: 16px 20px;
}

.extra-label {
    font-size: 0.87rem;
    font-weight: 600;
    color: var(--gray-600);
}

.extra-value {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--gray-800);
}


/* ==================== Tables ==================== */
.table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 -24px;
    padding: 0 24px;
}

table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
}

thead th {
    text-align: left;
    padding: 10px 14px;
    border-bottom: 1px solid var(--gray-200);
    color: var(--gray-500);
    font-weight: 600;
    font-size: 0.76rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

tbody td {
    padding: 14px;
    border-bottom: 1px solid var(--gray-100);
    white-space: nowrap;
}

tbody tr:hover {
    background: var(--gray-50);
}

tbody tr:last-child td {
    border-bottom: none;
}

.table-center th,
.table-center td {
    text-align: center;
}

.table-center th:last-child,
.table-center td:last-child {
    width: 72px;
    min-width: 72px;
}


/* ==================== Badges ==================== */
.badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 0.73rem;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.badge-approved { background: var(--success-light); color: #1B7A30; }
.badge-pending { background: var(--warning-light); color: #C2410C; }
.badge-cancelled { background: var(--gray-100); color: var(--gray-500); text-decoration: line-through; }
.badge-rejected { background: var(--danger-light); color: #C92A2A; }

.badge-cat-annual { background: var(--primary-light); color: var(--primary); }
.badge-cat-accrual { background: var(--success-light); color: #1B7A30; }
.badge-cat-family_event { background: #F3D9FA; color: #862E9C; }
.badge-cat-compensatory { background: #E5DBFF; color: #6741D9; }
.badge-cat-sick { background: #FFE8CC; color: #D9480F; }

/* Activity log action badges */
.badge-action-login { background: #D3F9D8; color: #2B8A3E; }
.badge-action-login_fail { background: var(--danger-light); color: #C92A2A; }
.badge-action-logout { background: var(--gray-100); color: var(--gray-500); }
.badge-action-leave_apply { background: var(--primary-light); color: var(--primary); }
.badge-action-leave_cancel { background: var(--gray-100); color: var(--gray-500); }
.badge-action-leave_admin_cancel { background: #FFE8CC; color: #D9480F; }
.badge-action-leave_approve { background: #D3F9D8; color: #2B8A3E; }
.badge-action-leave_reject { background: var(--danger-light); color: #C92A2A; }
.badge-action-grant_leave { background: #E5DBFF; color: #6741D9; }
.badge-action-revoke_leave { background: #FFE8CC; color: #D9480F; }
.badge-action-employee_add { background: #D0EBFF; color: #1864AB; }
.badge-action-employee_edit { background: #D0EBFF; color: #1864AB; }
.badge-action-employee_deactivate { background: var(--danger-light); color: #C92A2A; }
.badge-action-password_reset_admin { background: #D0EBFF; color: #1864AB; }
.badge-action-password_change { background: var(--gray-100); color: var(--gray-600); }
.badge-action-password_reset_self { background: var(--gray-100); color: var(--gray-600); }


/* ==================== Buttons ==================== */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 22px;
    border: none;
    border-radius: var(--radius);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none !important;
    font-family: inherit;
}

.btn-primary {
    background: var(--primary);
    color: white;
    box-shadow: 0 1px 3px rgba(214, 51, 108, 0.2);
}

.btn-primary:hover {
    background: var(--primary-hover);
    box-shadow: 0 4px 12px rgba(214, 51, 108, 0.25);
    transform: translateY(-1px);
}

.btn-primary:active {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(214, 51, 108, 0.2);
}

.btn-danger {
    background: var(--danger);
    color: white;
}

.btn-danger:hover {
    background: #C92A2A;
    transform: translateY(-1px);
}

.btn-danger:active {
    transform: translateY(0);
}

.btn-outline {
    background: var(--white);
    color: var(--gray-600);
    border: 1px solid var(--gray-300);
}

.btn-outline:hover {
    background: var(--gray-50);
    border-color: var(--gray-400);
}

.btn-sm {
    padding: 5px 12px;
    font-size: 0.8rem;
    border-radius: var(--radius-sm);
}

.btn-lg {
    padding: 15px 24px;
    font-size: 1rem;
}

.btn-block {
    width: 100%;
    justify-content: center;
}

.btn-row {
    display: flex;
    gap: 12px;
}

.btn-flex {
    flex: 1;
    justify-content: center;
    padding: 14px;
    font-size: 1rem;
}

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
}


/* ==================== Forms ==================== */
.form-group {
    margin-bottom: 18px;
}

.form-group label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--gray-700);
    margin-bottom: 8px;
}

.form-control {
    width: 100%;
    padding: 11px 14px;
    border: 1px solid var(--gray-300);
    border-radius: var(--radius);
    font-size: 0.92rem;
    transition: all 0.2s;
    font-family: inherit;
    color: var(--gray-800);
    background: var(--white);
}

.form-control:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(214, 51, 108, 0.1);
}

.form-control::placeholder {
    color: var(--gray-400);
}

select.form-control {
    appearance: auto;
}

textarea.form-control {
    resize: vertical;
    min-height: 80px;
}

.form-row {
    display: flex;
    gap: 14px;
}

.form-col {
    flex: 1;
}


/* ==================== Radio Group ==================== */
.radio-group {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.radio-item {
    flex: 1;
    min-width: 120px;
}

.radio-item input[type="radio"] { display: none; }

.radio-item label {
    display: block;
    text-align: center;
    padding: 12px;
    border: 1.5px solid var(--gray-200);
    border-radius: var(--radius);
    cursor: pointer;
    transition: all 0.2s;
    font-weight: 500;
    font-size: 0.88rem;
    color: var(--gray-600);
}

.radio-item label:hover {
    border-color: var(--gray-300);
    background: var(--gray-50);
}

.radio-item input:checked + label {
    border-color: var(--primary);
    background: var(--primary-light);
    color: var(--primary);
    font-weight: 600;
}


/* ==================== Category Cards (Apply) ==================== */
.category-cards {
    display: flex;
    gap: 10px;
}

.category-card {
    flex: 1;
    background: var(--white);
    border: 1.5px solid var(--gray-200);
    border-radius: var(--radius-lg);
    padding: 18px 14px;
    cursor: pointer;
    text-align: center;
    transition: all 0.2s;
    border-left: 3px solid;
}

.category-card:hover {
    border-color: var(--gray-300);
    box-shadow: var(--shadow-sm);
}

.category-card.selected {
    box-shadow: var(--shadow);
}

.category-title {
    font-weight: 700;
    font-size: 0.92rem;
    margin-bottom: 4px;
}

.category-sub {
    font-size: 0.78rem;
    color: var(--gray-500);
}

.category-card.cat-annual { border-left-color: var(--primary); }
.category-card.cat-compensatory { border-left-color: #6741D9; }
.category-card.cat-sick { border-left-color: #D9480F; }
.category-card.cat-family { border-left-color: #862E9C; }

.category-card.cat-annual.selected { background: var(--primary-light); border-color: var(--primary); }
.category-card.cat-compensatory.selected { background: #F3F0FF; border-color: #6741D9; }
.category-card.cat-sick.selected { background: #FFF4E6; border-color: #D9480F; }
.category-card.cat-family.selected { background: #F8F0FC; border-color: #862E9C; }

.category-card.cat-annual.selected .category-title { color: var(--primary); }
.category-card.cat-compensatory.selected .category-title { color: #6741D9; }
.category-card.cat-sick.selected .category-title { color: #D9480F; }
.category-card.cat-family.selected .category-title { color: #862E9C; }

.category-card.disabled {
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: none;
}


/* ==================== Calendar ==================== */
.cal-card {
    padding: 24px;
}

.cal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.cal-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--gray-800);
}

.cal-nav {
    background: none;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    width: 38px;
    height: 38px;
    font-size: 1.4rem;
    cursor: pointer;
    color: var(--gray-600);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}

.cal-nav:hover {
    background: var(--gray-100);
    border-color: var(--gray-300);
}

.cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}

.cal-wk {
    text-align: center;
    font-size: 0.73rem;
    font-weight: 600;
    color: var(--gray-400);
    padding: 8px 0 6px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.cal-wk.sun { color: var(--danger); }
.cal-wk.sat { color: var(--primary); }

.cal-day {
    text-align: center;
    padding: 10px 0;
    font-size: 0.88rem;
    border-radius: var(--radius);
    cursor: pointer;
    position: relative;
    transition: all 0.15s;
    font-weight: 500;
}

.cal-day:hover:not(.disabled):not(.empty) {
    background: var(--primary-light);
}

.cal-day.empty { cursor: default; }

.cal-day.today {
    font-weight: 700;
    box-shadow: inset 0 0 0 2px var(--primary);
    color: var(--primary);
}

.cal-day.weekend {
    color: var(--gray-300);
    cursor: default;
}

.cal-day.holiday {
    color: var(--danger);
    opacity: 0.5;
    cursor: default;
}

.cal-day.past {
    color: var(--gray-300);
    cursor: default;
}

.cal-day.past-biz {
    color: var(--gray-500);
    cursor: pointer;
}

.cal-day.past-biz:hover {
    background: var(--gray-100);
}

.cal-day.past-biz.selected {
    background: var(--primary);
    color: white;
    opacity: 0.85;
}

.past-warning {
    margin-top: 10px;
    padding: 12px 16px;
    background: var(--warning-light);
    border: 1px solid var(--warning-border);
    border-radius: var(--radius);
    font-size: 0.85rem;
    font-weight: 500;
    color: #C2410C;
}

.cal-day.has-leave {
    background: var(--warning-light);
    color: var(--warning);
    cursor: pointer;
}

.cal-day.has-leave::after {
    content: '';
    display: block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--warning);
    margin: 2px auto 0;
}

.cal-day.disabled { cursor: default; }

.cal-day.selected {
    background: var(--primary);
    color: white;
    font-weight: 600;
}

.cal-day.range-start {
    background: var(--primary);
    color: white;
    font-weight: 600;
    border-radius: var(--radius) 4px 4px var(--radius);
}

.cal-day.range-end {
    background: var(--primary);
    color: white;
    font-weight: 600;
    border-radius: 4px var(--radius) var(--radius) 4px;
}

.cal-day.range-start.range-end {
    border-radius: var(--radius);
}

.cal-day.in-range-gap {
    background: var(--primary-light);
    opacity: 0.6;
    border-radius: 0;
}

.selection-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    margin-top: 16px;
    background: var(--primary-light);
    border-radius: var(--radius);
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--primary);
}

.selection-reset {
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--gray-500);
    white-space: nowrap;
    margin-left: 12px;
    transition: color 0.15s;
}

.selection-reset:hover {
    color: var(--gray-700);
}


/* ==================== Step Labels (Apply) ==================== */
.step-label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--gray-500);
    margin-bottom: 12px;
    margin-top: 24px;
}

.step-label:first-of-type { margin-top: 0; }

.step-toggle {
    cursor: pointer;
    user-select: none;
}
.step-toggle:hover { opacity: 0.7; }

.toggle-arrow {
    margin-left: auto;
    color: var(--gray-400);
    font-size: 0.85rem;
    transition: transform 0.15s;
}

.step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--primary);
    color: white;
    font-size: 0.75rem;
    font-weight: 700;
    flex-shrink: 0;
}

.options-enter {
    animation: optSlideUp 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes optSlideUp {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
}


/* ==================== Family Event Guide ==================== */
.family-event-guide {
    background: var(--gray-50);
    border-radius: var(--radius);
    padding: 20px;
    border: 1px solid var(--gray-100);
}

.guide-title {
    font-weight: 700;
    font-size: 0.88rem;
    margin-bottom: 12px;
    color: var(--gray-700);
}

.guide-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.guide-item {
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
    padding: 6px 0;
    border-bottom: 1px solid var(--gray-200);
    color: var(--gray-600);
}

.guide-item:last-child { border-bottom: none; }


/* ==================== Toggle Link ==================== */
.toggle-link {
    display: inline-block;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--gray-500);
    cursor: pointer;
    text-decoration: none !important;
    transition: color 0.15s;
}

.toggle-link:hover { color: var(--gray-700); }


/* ==================== Preview Box ==================== */
.preview-box {
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    padding: 18px;
    margin-top: 16px;
    font-size: 0.9rem;
}

.preview-box .label { color: var(--gray-500); font-size: 0.8rem; font-weight: 500; }
.preview-box .value { font-size: 1.2rem; font-weight: 700; margin-top: 6px; color: var(--gray-800); }
.preview-box .value.warning { color: var(--warning); }
.preview-box .value.danger { color: var(--danger); }

.preview-accent {
    border-left: 4px solid var(--primary);
}

/* Balance Preview Row (3-block) */
.balance-preview-row {
    display: flex;
    gap: 12px;
}
.balance-preview-block {
    flex: 1;
    text-align: center;
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    padding: 16px 8px;
}
.balance-preview-block .bp-label {
    font-size: 0.78rem;
    color: var(--gray-500);
    font-weight: 500;
    margin-bottom: 6px;
}
.balance-preview-block .bp-value {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--gray-800);
}
.balance-preview-block .bp-value.accent { color: var(--primary); }
.balance-preview-block .bp-value.warning { color: var(--warning); }
.balance-preview-block .bp-value.danger { color: var(--danger); }

@media (max-width: 640px) {
    .balance-preview-row { gap: 8px; }
    .balance-preview-block { padding: 12px 4px; }
    .balance-preview-block .bp-value { font-size: 1.1rem; }
}

/* ==================== Warning Box ==================== */
.warning-box {
    background: var(--warning-light);
    border: 1px solid var(--warning-border);
    color: #C2410C;
    border-radius: var(--radius);
    padding: 14px 18px;
    font-size: 0.88rem;
    margin-bottom: 16px;
    font-weight: 500;
}

.warning-box.danger {
    background: var(--danger-light);
    border-color: var(--danger-border);
    color: #C92A2A;
}

/* 민감정보 수집 안내 (질병휴가) — 개보법 제23조 */
.sensitive-notice {
    background: var(--primary-light);
    border-left: 3px solid var(--primary);
    border-radius: var(--radius);
    padding: 12px 14px;
    margin-bottom: 12px;
    font-size: 0.85rem;
    line-height: 1.6;
    color: var(--gray-800);
}
.sensitive-notice strong {
    display: block;
    margin-bottom: 4px;
    color: var(--primary);
    font-weight: 600;
}
.sensitive-notice p {
    margin: 0;
}
.sensitive-notice em {
    font-style: normal;
    font-weight: 500;
    color: var(--gray-900);
    background: rgba(255, 230, 0, 0.25);
    padding: 0 3px;
    border-radius: 2px;
}
.consent-group .consent-label {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    cursor: pointer;
    font-size: 0.88rem;
    line-height: 1.5;
    padding: 10px 12px;
    background: var(--gray-50, #F9FAFB);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
}
.consent-group input[type="checkbox"] {
    margin-top: 2px;
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: var(--primary);
    flex-shrink: 0;
}


/* ==================== Flash Messages ==================== */
.flash-wrap {
    padding-top: 16px;
}

.flash {
    padding: 14px 18px;
    border-radius: var(--radius);
    margin-bottom: 12px;
    font-size: 0.9rem;
    font-weight: 500;
    border: 1px solid;
}

.flash-success { background: var(--success-light); color: #1B7A30; border-color: var(--success-border); }
.flash-warning { background: var(--warning-light); color: #C2410C; border-color: var(--warning-border); }
.flash-error { background: var(--danger-light); color: #C92A2A; border-color: var(--danger-border); }
.flash-info { background: var(--info-light); color: #1864AB; border-color: var(--info-border); }


/* ==================== Login Page ==================== */
body:has(.login-wrap) {
    background: linear-gradient(160deg, #FFF0F6 0%, var(--gray-50) 50%, #F8F0FC 100%);
}

body:has(.login-wrap) .container {
    max-width: none;
    padding: 0;
}

.login-wrap {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: linear-gradient(160deg, #FFF0F6 0%, var(--gray-50) 50%, #F8F0FC 100%);
}

.login-box {
    width: 100%;
    max-width: 420px;
    background: var(--white);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    padding: 48px 36px;
    border: 1px solid rgba(0,0,0,0.04);
}

.login-logo {
    text-align: center;
    margin-bottom: 16px;
}

.login-logo img {
    max-width: 180px;
    height: auto;
}

.login-box h1 {
    text-align: center;
    font-size: 1.5rem;
    margin-bottom: 8px;
    letter-spacing: -0.02em;
}

.login-box .subtitle {
    text-align: center;
    color: var(--gray-500);
    margin-bottom: 36px;
    font-size: 0.9rem;
}

.login-help {
    text-align: center;
    margin-top: 24px;
}

.btn-google {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: #fff;
    color: #3c4043;
    border: 1px solid var(--gray-300);
    font-weight: 500;
    text-decoration: none;
    margin-bottom: 8px;
}
.btn-google:hover {
    background: var(--gray-50);
    color: #3c4043;
    border-color: var(--gray-400);
}
.btn-google svg {
    flex-shrink: 0;
}

.login-note {
    text-align: center;
    margin-top: 18px;
    color: var(--gray-500);
    font-size: 0.85rem;
    line-height: 1.6;
}
.login-note.error {
    color: var(--danger, #dc2626);
}

.login-info {
    margin-top: 12px;
    padding: 14px;
    background: var(--primary-light);
    border-radius: var(--radius);
    font-size: 0.85rem;
    color: var(--gray-700);
    line-height: 1.8;
}

.login-privacy {
    margin-top: 20px;
    text-align: center;
    font-size: 0.8rem;
    color: var(--gray-500);
    line-height: 1.6;
}
.login-privacy a {
    color: var(--gray-700);
    text-decoration: underline;
}

/* 앱 공통 푸터 — 개인정보처리방침 등 법적 링크 고정 노출 */
.app-footer {
    margin-top: 40px;
    padding: 20px 16px;
    border-top: 1px solid var(--gray-200);
    background: var(--gray-50, #F9FAFB);
}
.footer-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    font-size: 0.82rem;
    color: var(--gray-500);
}
.footer-link {
    color: var(--gray-600);
    text-decoration: none;
}
.footer-link:hover {
    color: var(--primary);
    text-decoration: underline;
}

/* 개인정보처리방침 문서 스타일 */
.privacy-doc {
    font-size: 0.92rem;
    line-height: 1.75;
    color: var(--gray-800);
}
.privacy-doc h2 {
    margin-top: 28px;
    margin-bottom: 10px;
    padding-bottom: 6px;
    border-bottom: 2px solid var(--primary);
    font-size: 1.05rem;
    color: var(--gray-900);
}
.privacy-doc h3 {
    margin-top: 16px;
    margin-bottom: 6px;
    font-size: 0.98rem;
    color: var(--gray-900);
}
.privacy-doc p, .privacy-doc ul, .privacy-doc ol {
    margin-bottom: 10px;
}
.privacy-doc ul, .privacy-doc ol {
    padding-left: 22px;
}
.privacy-doc li {
    margin-bottom: 4px;
}
.privacy-doc table {
    margin: 10px 0 18px;
    font-size: 0.88rem;
}
.privacy-doc table th {
    background: var(--gray-50, #F9FAFB);
    font-weight: 600;
}

.input-password-wrap {
    position: relative;
}

.input-password-wrap .form-control {
    padding-right: 44px;
}

.pw-toggle {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    color: var(--gray-400);
    padding: 4px;
    display: flex;
    align-items: center;
    transition: color 0.15s;
}

.pw-toggle:hover { color: var(--gray-600); }

.remember-row {
    margin-top: 14px;
}

.checkbox-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    color: var(--gray-500);
    cursor: pointer;
}

.checkbox-label input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--primary);
    cursor: pointer;
}


/* ==================== Admin Tabs ==================== */
.admin-tabs {
    display: flex;
    gap: 0;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 24px;
    background: var(--white);
}

.admin-tabs a {
    flex: 1 0 auto;
    text-align: center;
    padding: 12px 16px;
    font-weight: 600;
    font-size: 0.88rem;
    color: var(--gray-500);
    background: transparent;
    transition: all 0.2s;
    text-decoration: none !important;
    border-right: 1px solid var(--gray-200);
    white-space: nowrap;
}

.admin-tabs a:last-child { border-right: none; }

.admin-tabs a:hover {
    background: var(--gray-50);
    color: var(--gray-700);
}

.admin-tabs a.active {
    background: var(--primary);
    color: white;
}

.admin-sub-tabs {
    display: flex;
    gap: 0;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 24px;
    background: var(--gray-50);
}
.admin-sub-tabs a {
    flex: 1 0 auto;
    text-align: center;
    padding: 10px 14px;
    font-weight: 500;
    font-size: 0.84rem;
    color: var(--gray-500);
    background: transparent;
    transition: all 0.2s;
    text-decoration: none !important;
    border-right: 1px solid var(--gray-200);
    white-space: nowrap;
}
.admin-sub-tabs a:last-child { border-right: none; }
.admin-sub-tabs a:hover { background: var(--white); color: var(--gray-700); }
.admin-sub-tabs a.active { background: var(--white); color: var(--primary); font-weight: 600; }


/* ==================== Admin Summary Cards ==================== */
.admin-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 14px;
    margin-bottom: 24px;
}

.admin-card {
    background: var(--white);
    border-radius: var(--radius-lg);
    border: 1px solid var(--gray-200);
    padding: 22px;
    transition: box-shadow 0.2s;
}

.admin-card:hover {
    box-shadow: var(--shadow);
}

.admin-card-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 14px;
}

.admin-card-badge .badge {
    font-size: 0.8rem;
    padding: 4px 12px;
}

.admin-card .name {
    font-weight: 700;
    font-size: 1.02rem;
    margin-bottom: 2px;
    color: var(--gray-800);
}

.admin-card .role {
    color: var(--gray-500);
    font-size: 0.8rem;
}

.admin-card-stats {
    border-top: 1px solid var(--gray-100);
    padding-top: 12px;
}

.admin-card .stat {
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
    padding: 5px 0;
    color: var(--gray-600);
}

.admin-card .stat.stat-muted {
    opacity: 0.7;
    font-size: 0.82rem;
}

.admin-card .stat-value {
    font-weight: 600;
    color: var(--gray-800);
}

.admin-card .stat-value small {
    font-weight: 400;
    font-size: 0.8rem;
}

/* --- Grant grid (부여/회수 2컬럼) --- */
.grant-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

/* --- Action cell (직원관리 테이블) --- */
.action-cell {
    white-space: nowrap;
    display: flex;
    gap: 6px;
    align-items: center;
}


/* ==================== Approval Card ==================== */
.approval-card {
    border-left: 4px solid var(--warning);
}

.approval-details {
    margin: 14px 0;
}

.approval-details .stat {
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
    padding: 5px 0;
    color: var(--gray-600);
}

.approval-details .stat-value {
    font-weight: 600;
    color: var(--gray-800);
}

.approval-actions {
    display: flex;
    gap: 8px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--gray-200);
}


/* ==================== Empty State ==================== */
.empty-state {
    text-align: center;
    padding: 48px 20px;
    color: var(--gray-500);
}

.empty-state .icon {
    font-size: 2.5rem;
    margin-bottom: 12px;
    opacity: 0.4;
}


/* ==================== Filter / Sort ==================== */
.filter-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.filter-group, .sort-group {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.filter-btn, .sort-btn {
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--gray-500);
    background: var(--gray-100);
    text-decoration: none !important;
    transition: all 0.15s;
}

.filter-btn:hover, .sort-btn:hover {
    background: var(--gray-200);
    color: var(--gray-700);
}

.filter-btn.active {
    background: var(--primary);
    color: white;
}

.sort-btn.active {
    background: var(--gray-700);
    color: white;
}


/* ==================== Year Filter ==================== */
.year-filter {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.year-filter a {
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.85rem;
    color: var(--gray-500);
    transition: all 0.15s;
}

.year-filter a:hover { background: var(--gray-100); }

.year-filter a.active {
    background: var(--primary);
    color: white;
}


/* ==================== Pagination ==================== */
.pagination-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 16px 0 4px;
}


/* ==================== Employee Selector (Admin) ==================== */
.emp-selector {
    display: flex;
    gap: 8px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}

.emp-btn {
    padding: 8px 18px;
    border-radius: 20px;
    font-size: 0.87rem;
    font-weight: 600;
    color: var(--gray-600);
    background: var(--gray-100);
    text-decoration: none !important;
    transition: all 0.15s;
}

.emp-btn:hover {
    background: var(--gray-200);
    color: var(--gray-700);
}

.emp-btn.active {
    background: var(--primary);
    color: white;
}


/* ==================== Row Styles ==================== */
.row-accrual {
    background: #F0FFF4 !important;
}

.row-cancelled td {
    opacity: 0.45;
}

.clickable-row {
    cursor: pointer;
    transition: background 0.1s;
}


/* ==================== Modal ==================== */
.modal-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.4);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: fadeIn 0.15s ease;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.modal-content {
    background: var(--white);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    width: 100%;
    max-width: 480px;
    max-height: 90vh;
    overflow-y: auto;
    animation: modalSlideUp 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes modalSlideUp {
    from { opacity: 0; transform: translateY(20px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 22px 28px;
    border-bottom: 1px solid var(--gray-200);
}

.modal-header h3 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--gray-800);
}

.modal-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--gray-400);
    line-height: 1;
    padding: 4px 6px;
    border-radius: var(--radius-sm);
    transition: all 0.15s;
}

.modal-close:hover {
    color: var(--gray-700);
    background: var(--gray-100);
}

.modal-body {
    padding: 24px 28px;
}

.detail-item {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 12px 0;
    border-bottom: 1px solid var(--gray-100);
    font-size: 0.9rem;
}

.detail-item:last-child { border-bottom: none; }

.detail-label {
    color: var(--gray-500);
    font-weight: 500;
    flex-shrink: 0;
}

.detail-value {
    font-weight: 600;
    text-align: right;
    margin-left: 16px;
    color: var(--gray-800);
}


/* ==================== Date Picker Area ==================== */
.date-picker-area {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.date-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: var(--primary-light);
    color: var(--primary);
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 500;
}

.date-chip button {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--primary);
    font-size: 1rem;
    line-height: 1;
    padding: 0;
}


/* ==================== Utilities ==================== */
.mt-2 { margin-top: 8px; }
.mt-4 { margin-top: 16px; }
.mb-2 { margin-bottom: 8px; }
.mb-4 { margin-bottom: 16px; }
.text-right { text-align: right; }
.text-center { text-align: center; }
.text-muted { color: var(--gray-500); }
.text-sm { font-size: 0.85rem; }
.text-success { color: var(--success); }
.text-danger { color: var(--danger); }
.text-warning { color: var(--warning); }
.flex-between { display: flex; justify-content: space-between; align-items: center; }

/* 근무시간 관련 배지 */
.badge-success { background: var(--success-light); color: #1B7A30; }
.badge-danger { background: var(--danger-light); color: #C92A2A; }
.badge-warning { background: var(--warning-light); color: #C2410C; }
.badge-info { background: #D0EBFF; color: #1864AB; }
.badge-outline { background: var(--gray-100); color: var(--gray-600); }
.badge-default { background: var(--gray-100); color: var(--gray-600); }

/* 근무유형 배지 — office 포함 전 유형 표기, 유형별 색상 구분 */
.badge-wt-office      { background: var(--gray-100);      color: var(--gray-600); }
.badge-wt-remote      { background: #D0EBFF;              color: #1864AB; }
.badge-wt-outside     { background: var(--warning-light); color: #C2410C; }
.badge-wt-mixed       { background: var(--primary-light); color: var(--primary); }
.badge-wt-half_day_am { background: var(--primary-light); color: var(--primary); }
.badge-wt-half_day_pm { background: var(--primary-light); color: var(--primary); }
.badge-wt-sick        { background: #FFE8CC;              color: #D9480F; }
.badge-wt-leave       { background: var(--primary-light); color: var(--primary); }

/* 달력 셀 등 인라인 텍스트 유형 라벨 — 배지와 동일한 색 체계 유지 */
.wh-type-office      { color: var(--gray-500); }
.wh-type-remote      { color: var(--info); }
.wh-type-outside     { color: var(--warning); }
.wh-type-mixed       { color: var(--primary); }
.wh-type-half_day_am { color: var(--primary); }
.wh-type-half_day_pm { color: var(--primary); }
.wh-type-sick        { color: #D9480F; }
.wh-type-leave       { color: var(--primary); }

/* 공휴일 이름 툴팁 — apply.html 달력에서 비활성 셀 hover·tap 시 표시.
   터치 환경에서는 tap이 :hover 를 일시 활성화하므로 별도 JS 불필요. */
[data-tooltip] { position: relative; }
[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--gray-800);
    color: var(--white);
    padding: 6px 10px;
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    font-weight: 500;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 150ms ease;
    z-index: 20;
    box-shadow: var(--shadow-sm);
}
[data-tooltip]:hover::after,
[data-tooltip]:focus-visible::after,
[data-tooltip]:active::after { opacity: 1; }

/* 52시간 초과 행 */
.row-danger { background: var(--danger-light) !important; }
.row-danger td { color: var(--danger) !important; }
.hide-mobile { /* handled in responsive */ }


/* ==================== Work Hours Dashboard ==================== */

/* Header / Navigation */
.wh-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.wh-nav {
    display: flex;
    align-items: center;
    gap: 12px;
}

.wh-title {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
    white-space: nowrap;
}

.wh-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

.wh-date-input {
    padding: 6px 10px;
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
}

/* Stats Cards */
.wh-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    padding: 16px;
    border-bottom: 1px solid var(--gray-200);
}

.wh-stat {
    text-align: center;
    padding: 12px 8px;
    background: var(--gray-50);
    border-radius: var(--radius);
    border: 1px solid var(--gray-200);
}

.wh-stat-value {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--gray-800);
    line-height: 1.2;
}

.wh-stat-label {
    font-size: 0.75rem;
    color: var(--gray-500);
    margin-top: 2px;
}

.wh-stat-warn { background: var(--warning-light); border-color: var(--warning-border); }
.wh-stat-warn .wh-stat-value { color: var(--warning); }
.wh-stat-danger { background: var(--danger-light); border-color: var(--danger-border); }
.wh-stat-danger .wh-stat-value { color: var(--danger); }

/* Weekly Grid */
.wh-grid-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.wh-grid {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
    min-width: 600px;
}

.wh-grid th {
    padding: 10px 6px;
    font-weight: 700;
    color: var(--gray-600);
    border-bottom: 2px solid var(--gray-200);
    text-align: center;
    font-size: 0.82rem;
}

.wh-grid-name {
    width: 80px;
    min-width: 80px;
    text-align: left !important;
    padding-left: 16px !important;
    position: sticky;
    left: 0;
    background: var(--white);
    z-index: 2;
}

.wh-grid-day {
    width: auto;
    min-width: 90px;
}

.wh-grid-date {
    display: block;
    font-size: 0.9rem;
    color: var(--gray-800);
    font-weight: 800;
}

.wh-grid-total {
    width: 100px;
    min-width: 100px;
}

.wh-emp-name {
    font-weight: 700;
    font-size: 0.88rem;
    color: var(--gray-800);
}

.wh-emp-role {
    font-size: 0.7rem;
    color: var(--gray-400);
}

.wh-role-tag {
    font-size: 0.7rem;
    color: var(--gray-400);
    margin-left: 4px;
}

/* Grid Cells */
.wh-cell {
    padding: 8px 6px;
    text-align: center;
    border-bottom: 1px solid var(--gray-100);
    vertical-align: top;
    position: relative;
    transition: background 0.15s;
}

.wh-cell:hover { background: var(--gray-50); }

.wh-cell.wh-today { background: #FFFCE8; }
th.wh-today { background: #FFF9DB !important; }

/* Cell Status Colors */
.wh-cell-normal { }
.wh-cell-overtime { background: #FFF9DB; }
.wh-cell-excessive { background: #FFF4E6; }
.wh-cell-leave { background: var(--info-light); }
.wh-cell-holiday { background: var(--gray-50); }
.wh-cell-holiday_work { background: #F3F0FF; }
.wh-cell-missing { background: var(--gray-50); }
.wh-cell-anomaly { background: #FFF5F5; border: 2px solid var(--danger); }

.wh-cell-hours {
    font-size: 1rem;
    font-weight: 800;
    color: var(--gray-800);
    line-height: 1.2;
}

.wh-cell-overtime .wh-cell-hours { color: var(--warning); }
.wh-cell-excessive .wh-cell-hours { color: var(--danger); }
.wh-cell-anomaly .wh-cell-hours { color: var(--danger); }

.wh-cell-times {
    font-size: 0.72rem;
    color: var(--gray-500);
    margin-top: 2px;
}

.wh-cell-type {
    font-size: 0.65rem;
    margin-top: 1px;
}

.wh-cell-leave-label {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--info);
    padding: 8px 0;
}

.wh-cell-holiday-label {
    font-size: 0.72rem;
    color: var(--gray-400);
    padding: 8px 0;
}

.wh-cell-missing-label {
    font-size: 0.75rem;
    color: var(--gray-400);
    padding: 8px 0;
}

.wh-cell-empty {
    color: var(--gray-300);
    padding: 8px 0;
}

.wh-anomaly-icon {
    position: absolute;
    top: 2px;
    right: 4px;
    font-size: 0.7rem;
    color: var(--danger);
}

/* Progress Bars */
.wh-cell-bar {
    height: 3px;
    background: var(--gray-200);
    border-radius: 2px;
    margin-top: 4px;
    overflow: hidden;
}

.wh-bar-fill {
    height: 100%;
    background: var(--success);
    border-radius: 2px;
    transition: width 0.3s;
}

.wh-cell-overtime .wh-bar-fill { background: var(--warning); }
.wh-cell-excessive .wh-bar-fill { background: var(--danger); }

/* Total Cell */
.wh-grid-total-cell {
    padding: 8px 10px;
    text-align: center;
    border-bottom: 1px solid var(--gray-100);
    border-left: 2px solid var(--gray-200);
    vertical-align: top;
}

.wh-total-hours {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--gray-800);
}

.wh-total-days {
    font-size: 0.7rem;
    color: var(--gray-400);
}

.wh-total-overtime {
    font-size: 0.72rem;
    color: var(--warning);
    font-weight: 600;
}

.wh-total-bar {
    height: 4px;
    background: var(--gray-200);
    border-radius: 2px;
    margin-top: 6px;
    position: relative;
    overflow: hidden;
}

.wh-bar-weekly {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    background: var(--success);
}
.wh-bar-overflow {
    position: absolute;
    top: 0;
    height: 100%;
    background: var(--warning);
}

.wh-bar-limit {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    background: var(--gray-400);
}

.wh-exceed .wh-total-hours { color: var(--warning); }

.wh-row-danger { background: var(--danger-light); }

/* Legend */
.wh-legend {
    display: flex;
    gap: 16px;
    padding: 12px 16px;
    border-top: 1px solid var(--gray-200);
    flex-wrap: wrap;
}

.wh-legend-item {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.72rem;
    color: var(--gray-500);
}

.wh-legend-dot {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    border: 1px solid var(--gray-300);
}

/* Monthly Heatmap */
.wh-heatmap-section {
    padding: 16px;
    border-top: 1px solid var(--gray-200);
}

.wh-section-title {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--gray-700);
    margin-bottom: 12px;
}

.wh-heatmap {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.72rem;
}

.wh-heatmap th {
    padding: 2px 1px;
    font-weight: 600;
    color: var(--gray-500);
    text-align: center;
    font-size: 0.65rem;
}

.wh-heatmap-day {
    min-width: 24px;
}

.wh-hm-dow {
    display: block;
    font-size: 0.6rem;
    color: var(--gray-400);
}

.wh-hm-date {
    display: block;
    font-size: 0.72rem;
    color: var(--gray-700);
    font-weight: 700;
}

.wh-hm-cell {
    padding: 3px 1px;
    text-align: center;
    border: 1px solid var(--white);
    border-radius: 3px;
    min-height: 22px;
}

.wh-hm-hours {
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--gray-700);
}

.wh-hm-leave {
    font-size: 0.6rem;
    font-weight: 600;
    color: var(--info);
}

.wh-weekend-col { background: var(--gray-50); }

/* Daily Detail Extras */
.wh-leave-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--gray-200);
    background: var(--info-light);
    flex-wrap: wrap;
}

.wh-leave-bar-label {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--info);
}

.wh-empty {
    padding: 24px;
    text-align: center;
    color: var(--gray-500);
}

.wh-missing-section {
    padding: 16px;
    border-top: 1px solid var(--gray-200);
}

.wh-missing-label {
    font-weight: 600;
    color: var(--warning);
    margin-bottom: 8px;
    font-size: 0.88rem;
}

.wh-missing-list {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.wh-row-anomaly td {
    background: #FFF5F5;
}

.wh-anomaly-row td {
    padding: 4px 10px 10px;
    background: #FFF5F5;
    border-bottom: 2px solid var(--danger-border);
}

.wh-anomaly-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.78rem;
    margin-right: 6px;
}

.wh-anomaly-warning { background: var(--warning-light); color: var(--warning); }
.wh-anomaly-danger { background: var(--danger-light); color: var(--danger); font-weight: 600; }

.wh-anomaly-hint {
    font-size: 0.72rem;
    color: var(--danger);
    font-weight: 600;
}

.wh-bar-mini {
    height: 3px;
    margin-top: 4px;
    max-width: 120px;
}

.wh-cell-anomaly .wh-cell-anomaly { border: none; }

.wh-cell .wh-cell-anomaly { font-size: 0.85rem; }


/* ==================== Responsive ==================== */
@media (max-width: 768px) {
    .hide-mobile { display: none !important; }
}

@media (max-width: 640px) {
    .container { padding: 0 16px 32px; }

    .nav-inner { padding: 0 16px; height: 52px; }
    .nav-tabs { padding: 0 12px; }
    .nav-tabs a { padding: 11px 14px; font-size: 0.84rem; }
    .nav-logo { height: 26px; }
    .nav-date { display: none; }
    .nav-name { font-size: 0.84rem; }

    .page-header { padding: 22px 0 16px; }
    .page-header h1 { font-size: 1.25rem; }
    .page-header p { font-size: 0.85rem; }

    .balance-card { padding: 24px; }
    .balance-card .value { font-size: 2.2rem; }
    .balance-details { gap: 12px; flex-wrap: wrap; }

    .stats-card { padding: 14px 16px; }
    .stats-label { font-size: 0.68rem; }
    .stats-value { font-size: 0.82rem; }

    .extra-balance-row { flex-direction: column; }
    .extra-balance-card { padding: 14px 16px; }

    .card { padding: 18px; border-radius: var(--radius); }

    .table-wrap { margin: 0 -18px; padding: 0 18px; }
    table { font-size: 0.8rem; }
    thead th { padding: 8px 10px; font-size: 0.7rem; }
    tbody td { padding: 10px; }

    .radio-group { flex-direction: column; }
    .form-row { flex-direction: column; gap: 0; }
    .filter-bar { flex-direction: column; align-items: flex-start; }

    .admin-summary { grid-template-columns: 1fr; }
    .grant-grid { grid-template-columns: 1fr; }
    .action-cell { flex-direction: column; gap: 4px; align-items: flex-start; }
    .admin-tabs a { padding: 10px 8px; font-size: 0.82rem; }
    .admin-sub-tabs a { padding: 8px 6px; font-size: 0.78rem; }

    .category-cards { gap: 8px; flex-wrap: wrap; }
    .category-card { padding: 14px 10px; min-width: calc(50% - 4px); }
    .category-title { font-size: 0.85rem; }
    .category-sub { font-size: 0.73rem; }

    .cal-card { padding: 18px; }
    .cal-day { padding: 8px 0; font-size: 0.82rem; }
    .cal-wk { font-size: 0.68rem; padding: 6px 0; }
    .cal-nav { width: 34px; height: 34px; font-size: 1.2rem; }
    .cal-title { font-size: 1rem; }

    .wh-stats { grid-template-columns: repeat(2, 1fr); gap: 8px; padding: 12px; }
    .wh-stat { padding: 10px 6px; }
    .wh-stat-value { font-size: 1.2rem; }
    .wh-grid { font-size: 0.78rem; }
    .wh-grid-name { width: 60px; min-width: 60px; padding-left: 8px !important; }
    .wh-grid-day { min-width: 70px; }
    .wh-cell-hours { font-size: 0.88rem; }
    .wh-cell-times { font-size: 0.65rem; }
    .wh-title { font-size: 0.95rem; }
    .wh-legend { padding: 8px 12px; gap: 10px; }
    .wh-header { flex-direction: column; align-items: flex-start; }

    .selection-info { font-size: 0.82rem; padding: 10px 14px; }

    .step-label { font-size: 0.8rem; margin-top: 18px; }
    .step-num { width: 22px; height: 22px; font-size: 0.7rem; }

    .modal-overlay { align-items: flex-end; padding: 0; }
    .modal-content { border-radius: var(--radius-xl) var(--radius-xl) 0 0; max-height: 85vh; }

    .login-box { padding: 36px 24px; border-radius: var(--radius-lg); }

    .btn-lg { padding: 13px 20px; }

    .my-wh-days { flex-direction: column; }
    .my-wh-day { min-width: unset; }
    .my-wh-cal-grid { grid-template-columns: repeat(7, 1fr); }
    .my-wh-cal-cell { min-height: 48px; padding: 4px; }
    .my-wh-cal-hours { font-size: 0.72rem; }
}

/* ============================================================
   내 근무시간 (직원 본인 조회)
   ============================================================ */

/* 주간 일별 카드 */
.my-wh-days {
    display: flex;
    gap: 8px;
    padding: 16px;
    overflow-x: auto;
}
.my-wh-day {
    flex: 1;
    min-width: 120px;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    padding: 12px;
    text-align: center;
    transition: box-shadow 0.15s;
}
.my-wh-day.wh-today {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
}
.my-wh-day-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    font-size: 0.85rem;
    color: var(--gray-500);
}
.my-wh-dow { font-weight: 600; }
.my-wh-date { font-size: 0.8rem; }
.my-wh-day-body { min-height: 60px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 4px; }
.my-wh-hours { font-size: 1.4rem; font-weight: 700; color: var(--gray-800); }
.my-wh-times { font-size: 0.75rem; color: var(--gray-500); }
.my-wh-type { font-size: 0.72rem; }
.my-wh-overtime { font-size: 0.72rem; color: var(--warning); font-weight: 600; }
.my-wh-label { font-size: 0.82rem; color: var(--gray-500); font-weight: 500; }
.my-wh-missing { color: var(--warning); }
.my-wh-bar { margin-top: 8px; height: 4px; background: var(--gray-100); border-radius: 2px; overflow: hidden; }

/* 셀 상태 색상 */
.my-wh-day-normal { border-color: var(--gray-200); }
.my-wh-day-overtime { border-color: var(--warning); background: rgba(245, 158, 11, 0.04); }
.my-wh-day-overtime .my-wh-hours { color: var(--warning); }
.my-wh-day-excessive { border-color: var(--danger); background: rgba(239, 68, 68, 0.04); }
.my-wh-day-excessive .my-wh-hours { color: var(--danger); }
.my-wh-day-leave { border-color: var(--info); background: rgba(6, 182, 212, 0.04); }
.my-wh-day-leave .my-wh-label { color: var(--info); }
.my-wh-day-holiday { border-color: var(--gray-200); background: var(--gray-50); }
.my-wh-day-holiday .my-wh-label { color: var(--gray-400); }
.my-wh-day-missing { border-color: var(--warning); border-style: dashed; }
.my-wh-day-holiday_work { border-color: var(--purple, #8b5cf6); background: rgba(139, 92, 246, 0.04); }

/* 주간 합계 바 */
.my-wh-summary { padding: 12px 16px 16px; }
.my-wh-summary-bar { height: 12px; background: var(--gray-100); border-radius: 6px; overflow: hidden; position: relative; }
.my-wh-summary-text { text-align: center; font-size: 0.82rem; color: var(--gray-600); margin-top: 6px; }

/* 월간 캘린더 */
.my-wh-calendar { padding: 16px; }
.my-wh-cal-header {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    margin-bottom: 4px;
}
.my-wh-cal-dow {
    text-align: center;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--gray-500);
    padding: 4px 0;
}
.my-wh-cal-dow.my-wh-weekend { color: var(--gray-400); }
.my-wh-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}
.my-wh-cal-cell {
    min-height: 56px;
    padding: 6px;
    border: 1px solid var(--gray-100);
    border-radius: var(--radius-sm);
    text-align: center;
    transition: background 0.15s;
}
.my-wh-cal-cell.wh-today { border-color: var(--primary); box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.2); }
.my-wh-cal-cell.my-wh-weekend { background: var(--gray-50); }
.my-wh-cal-empty { border-color: transparent; }
.my-wh-cal-date { font-size: 0.72rem; color: var(--gray-500); margin-bottom: 2px; }
.my-wh-cal-hours { font-size: 0.85rem; font-weight: 700; color: var(--gray-700); }
.my-wh-cal-tag { font-size: 0.7rem; color: var(--info); font-weight: 600; }

/* 일별 상세 카드 */
.my-wh-detail-card {
    padding: 16px;
}
.my-wh-detail-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid var(--gray-100);
}
.my-wh-detail-row:last-child { border-bottom: none; }
.my-wh-detail-label { font-size: 0.85rem; color: var(--gray-500); font-weight: 500; }
.my-wh-detail-value { font-size: 0.9rem; color: var(--gray-800); }

.my-wh-anomaly-section {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--gray-100);
}

/* 52h 경고 */
.my-wh-warning {
    margin: 12px 16px 16px;
    padding: 10px 14px;
    background: rgba(239, 68, 68, 0.06);
    border: 1px solid rgba(239, 68, 68, 0.15);
    border-radius: var(--radius-md);
    font-size: 0.85rem;
    color: var(--danger);
}

/* ============================================================
   마이페이지
   ============================================================ */

.mypage-profile {
    text-align: center;
    padding: 32px 16px 24px;
    border-bottom: 1px solid var(--gray-100);
}
.mypage-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    font-size: 1.5rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 12px;
    position: relative;
    overflow: hidden;
}
.mypage-avatar-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}
.mypage-avatar-initial {
    line-height: 1;
}
.mypage-name {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--gray-800);
}
.mypage-role {
    font-size: 0.85rem;
    color: var(--gray-500);
    margin-top: 4px;
}

.mypage-info {
    padding: 16px;
}
.mypage-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid var(--gray-100);
}
.mypage-row:last-child { border-bottom: none; }
.mypage-label {
    font-size: 0.85rem;
    color: var(--gray-500);
    font-weight: 500;
}
.mypage-value {
    font-size: 0.9rem;
    color: var(--gray-800);
    font-weight: 500;
}

.mypage-actions {
    padding: 16px;
    text-align: center;
    border-top: 1px solid var(--gray-100);
}

/* ============================================================
   대시보드 (카드 기반 통합 뷰)
   ============================================================ */

.dash-card {
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    margin-bottom: 12px;
    overflow: hidden;
}
.dash-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px 0;
}
.dash-card-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--gray-500);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 14px 16px 0;
}
.dash-card-header .dash-card-label { padding: 0; }
.dash-sub {
    font-size: 0.78rem;
    color: var(--gray-500);
    font-weight: 500;
}
.dash-link {
    font-size: 0.78rem;
    color: var(--primary);
    text-decoration: none;
    font-weight: 500;
}

/* 오늘 출퇴근 */
.dash-today { text-align: center; padding-bottom: 16px; }
.dash-today .dash-card-label { padding-bottom: 12px; }
.dash-today-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0;
    padding: 0 16px;
}
.dash-today-item { flex: 1; text-align: center; }
.dash-today-label { display: block; font-size: 0.72rem; color: var(--gray-500); margin-bottom: 4px; }
.dash-today-time { font-size: 1.3rem; font-weight: 700; color: var(--gray-800); }
.dash-today-divider { width: 1px; height: 36px; background: var(--gray-200); }
.dash-today-type { margin-top: 8px; display: flex; gap: 6px; flex-wrap: wrap; }
.dash-today-empty { padding: 20px 16px 6px; font-size: 0.85rem; color: var(--gray-400); }
.dash-today-leave {
    padding: 18px 16px 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.95rem;
}
.dash-today-leave-icon {
    font-weight: 700;
    color: var(--gray-600);
}

/* 이번 주 근무 */
.dash-week-stats {
    display: flex;
    gap: 0;
    padding: 12px 16px;
}
.dash-week-stat {
    flex: 1;
    text-align: center;
    padding: 6px 0;
}
.dash-week-stat-value { font-size: 1.2rem; font-weight: 700; color: var(--gray-800); }
.dash-week-stat-label { font-size: 0.7rem; color: var(--gray-500); margin-top: 2px; }
.dash-stat-warn .dash-week-stat-value { color: var(--warning); }

.dash-week-bar {
    height: 8px;
    background: var(--gray-100);
    border-radius: 4px;
    margin: 0 16px;
    position: relative;
    overflow: hidden;
}
.dash-week-bar-fill {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    background: var(--success);
    border-radius: 4px 0 0 4px;
    transition: width 0.3s;
}
.dash-week-bar-overflow {
    position: absolute;
    top: 0;
    height: 100%;
    background: var(--warning);
    border-radius: 0 4px 4px 0;
    transition: width 0.3s;
}
.dash-week-bar-limit {
    position: absolute;
    top: 0;
    width: 2px;
    height: 100%;
    background: var(--gray-400);
}
.dash-week-bar-label {
    text-align: center;
    font-size: 0.7rem;
    color: var(--gray-500);
    margin: 4px 0 0;
}

.dash-week-days {
    display: flex;
    gap: 4px;
    padding: 12px 16px 16px;
}
.dash-day {
    flex: 1;
    text-align: center;
    padding: 8px 2px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--gray-100);
    min-width: 0;
}
.dash-day-today {
    border-color: var(--primary);
    box-shadow: 0 0 0 1px rgba(214, 51, 108, 0.15);
}
.dash-day-dow {
    display: block;
    font-size: 0.68rem;
    color: var(--gray-500);
    font-weight: 600;
    margin-bottom: 4px;
}
.dash-day-hours {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--gray-800);
}
.dash-day-tag {
    font-size: 0.7rem;
    color: var(--gray-400);
    font-weight: 500;
}
.dash-day-normal { background: rgba(47, 158, 68, 0.05); }
.dash-day-overtime { background: rgba(232, 89, 12, 0.06); }
.dash-day-overtime .dash-day-hours { color: var(--warning); }
.dash-day-excessive { background: rgba(224, 49, 49, 0.06); }
.dash-day-excessive .dash-day-hours { color: var(--danger); }
.dash-day-leave { background: rgba(25, 113, 194, 0.05); }
.dash-day-leave .dash-day-tag { color: var(--info); }
.dash-day-holiday { background: var(--gray-50); }
.dash-day-missing { border-style: dashed; border-color: var(--gray-300); }
/* 주말 — 별도 status 색(holiday_work/normal 등)이 없을 때 회색 톤 유지 */
.dash-day-weekend.dash-day-holiday { background: #F9FAFB; }
.dash-day-weekend .dash-day-dow { color: var(--gray-400); }

/* 내 근로시간 주간 — 주말 카드도 회색 톤 */
.my-wh-day.my-wh-weekend { background: #F9FAFB; }
.my-wh-day.my-wh-weekend .my-wh-dow { color: var(--gray-400); }

/* 휴가 현황 */
.dash-leave-main { padding: 12px 16px; text-align: center; }
.dash-leave-big-value {
    font-size: 2.2rem;
    font-weight: 800;
    color: var(--primary);
    line-height: 1;
}
.dash-leave-big-value small { font-size: 1rem; font-weight: 500; }
.dash-leave-big-label {
    font-size: 0.78rem;
    color: var(--gray-500);
    margin-top: 4px;
}
.dash-leave-bar {
    height: 6px;
    background: var(--gray-100);
    border-radius: 3px;
    margin: 12px 0 6px;
    overflow: hidden;
}
.dash-leave-bar-fill {
    height: 100%;
    background: var(--primary);
    border-radius: 3px;
}
.dash-leave-detail {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    color: var(--gray-500);
}
.dash-leave-extra {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 16px;
    background: var(--gray-50);
    border-top: 1px solid var(--gray-100);
}
.dash-leave-extra-label { font-size: 0.8rem; color: var(--gray-600); font-weight: 500; }
.dash-leave-extra-value { font-size: 0.85rem; font-weight: 600; color: var(--gray-800); }
.dash-leave-extra-value small { font-weight: 400; color: var(--gray-500); }
.dash-leave-info {
    border-top: 1px solid var(--gray-100);
    padding: 10px 16px;
}
.dash-leave-info-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
    color: var(--gray-600);
    padding: 4px 0;
}
.dash-leave-info-highlight { color: var(--primary); font-weight: 600; }

/* 최근 내역 */
.dash-history { padding: 0; }
.dash-history-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 16px;
    border-bottom: 1px solid var(--gray-50);
    cursor: pointer;
    transition: background 0.1s;
}
.dash-history-item:last-child { border-bottom: none; }
.dash-history-item:active { background: var(--gray-50); }
.dash-history-cancelled { opacity: 0.5; }
.dash-history-left {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex: 1;
}
.dash-history-desc {
    font-size: 0.82rem;
    color: var(--gray-700);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dash-history-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.dash-history-change { font-size: 0.82rem; font-weight: 600; }
.dash-history-status { font-size: 0.68rem; }
.dash-empty { padding: 24px 16px; text-align: center; font-size: 0.85rem; color: var(--gray-400); }

/* 지난 근로 내역 네비게이션 */
.dash-today-nav {
    display: flex;
    align-items: center;
    gap: 8px;
}
.dash-today-nav-btn {
    background: transparent;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-sm);
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gray-600);
    cursor: pointer;
    font-size: 0.85rem;
    padding: 0;
    line-height: 1;
    text-decoration: none;
}
.dash-today-nav-btn:active { background: var(--gray-100); }
.dash-today-nav-btn[aria-disabled="true"] {
    opacity: 0.35;
    pointer-events: none;
}
.dash-day-num {
    display: block;
    font-size: 0.68rem;
    color: var(--gray-400);
    font-weight: 500;
    margin-bottom: 2px;
}

/* 모바일 대시보드 */
@media (max-width: 640px) {
    .dash-today-time { font-size: 1.1rem; }
    .dash-week-stat-value { font-size: 1rem; }
    .dash-leave-big-value { font-size: 1.8rem; }
}