/* ==========================================================================
   1. Variables & Reset
   ========================================================================== */
:root {
    /* Color Palette: Dark Brown Theme */
    --primary-color: #3E2723;
    /* Deep Espresso */
    --primary-light: #5D4037;
    /* Lighter Brown */
    --accent-color: #8D6E63;
    /* Muted Earthy Brown */

    --bg-body: #F5F5F5;
    /* Warm Light Grey */
    --bg-card: #FFFFFF;

    --text-main: #212121;
    --text-sub: #757575;

    --danger-color: #D32F2F;
    --success-color: #2E7D32;
    --border-color: #E0E0E0;

    /* Spacing & Radius */
    --radius-md: 8px;
    --radius-lg: 12px;
    --shadow-card: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);

    /* FullCalendar Custom Theme */
    /* --fc-page-bg-color: #fff;
    --fc-neutral-bg-color: #FAFAFA;
    --fc-list-event-hover-bg-color: #F5F5F5;
    --fc-button-bg-color: var(--primary-color);
    --fc-button-border-color: var(--primary-color);
    --fc-button-hover-bg-color: var(--primary-light);
    --fc-button-hover-border-color: var(--primary-light);
    --fc-button-active-bg-color: var(--primary-color);
    --fc-today-bg-color: #FFF3E0;
    --fc-event-bg-color: var(--accent-color);
    --fc-event-border-color: var(--accent-color); */
}

* {
    box-sizing: border-box;
}

body {
    font-family: "Pretendard Variable", Pretendard, sans-serif;
    margin: 0;
    background: var(--bg-body);
    color: var(--text-main);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

/* ==========================================================================
   2. Header & Navigation
   ========================================================================== */
header {
    background: var(--primary-color);
    color: white;
    height: 60px;
    /* 헤더 높이 축소 (70px -> 60px) */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.header-inner {
    max-width: 1200px;
    margin: 0 auto;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
}

.logo-area h1 {
    font-size: 1.2rem;
    margin: 0;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Navigation (Desktop) */
.nav-container {
    display: flex;
    align-items: center;
    gap: 15px;
    height: 100%;
    z-index: 10000;
}

.nav-group {
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
}

.nav-group-title {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    padding: 0 10px;
    height: 100%;
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: inherit;
}

.nav-group:hover .nav-group-title {
    color: #fff;
    background-color: rgba(255, 255, 255, 0.1);
}

.arrow {
    font-size: 0.75rem;
    transition: transform 0.2s;
}

.nav-group:hover .arrow {
    transform: rotate(180deg);
}

/* Dropdown */
.nav-dropdown {
    position: absolute;
    top: 60px;
    /* 헤더 높이에 맞춤 */
    left: 50%;
    transform: translateX(-50%);
    background: #fff;
    min-width: 160px;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    display: none;
    flex-direction: column;
    padding: 5px 0;
    overflow: hidden;
}

.nav-group:hover .nav-dropdown {
    display: flex;
}

.nav-item {
    background: white;
    border: none;
    color: var(--text-main);
    padding: 10px 20px;
    text-align: left;
    cursor: pointer;
    font-size: 0.9rem;
    font-family: inherit;
    width: 100%;
    transition: background 0.2s;
}

.nav-item:hover {
    background: #F5F5F5;
    color: var(--primary-color);
}

.nav-item.active {
    background: #EFEBE9;
    color: var(--primary-color);
    font-weight: 700;
}

/* Header Utilities */
.nav-utils {
    display: flex;
    gap: 5px;
    margin-left: 15px;
    padding-left: 15px;
    border-left: 1px solid rgba(255, 255, 255, 0.2);
}

.nav-icon-btn {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.8);
    font-size: 1.1rem;
    cursor: pointer;
    padding: 8px;
    border-radius: 50%;
    transition: all 0.2s;
}

.nav-icon-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    color: white;
}

/* ==========================================================================
   [알림 시스템] 벨 아이콘 배지 + 드롭다운 패널
   ========================================================================== */

/* 알림 배지 (빨간 원형, 벨 아이콘 우상단) */
.notification-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    background: #E74C3C;
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    min-width: 16px;
    height: 16px;
    line-height: 16px;
    text-align: center;
    border-radius: 50%;
    padding: 0 4px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
    pointer-events: none;
    animation: notif-pulse 2s infinite;
}

@keyframes notif-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.15); }
}

/* 알림 드롭다운 패널 */
.notification-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 360px;
    max-height: 450px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.15);
    z-index: 9999;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* 드롭다운 헤더 */
.notification-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    border-bottom: 1px solid #eee;
    font-weight: 700;
    font-size: 0.95rem;
    color: #333;
}

.btn-mark-all-read {
    background: none;
    border: none;
    color: var(--primary-color, #3498db);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    transition: background 0.2s;
}

.btn-mark-all-read:hover {
    background: #EBF5FB;
}

/* 알림 목록 스크롤 영역 */
.notification-list {
    overflow-y: auto;
    max-height: 360px;
    flex: 1;
}

/* 개별 알림 아이템 */
.notification-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 16px;
    cursor: pointer;
    transition: background 0.15s;
    border-bottom: 1px solid #f5f5f5;
}

.notification-item:hover {
    background: #f8f9fa;
}

/* 읽지 않은 알림 강조 */
.notification-item.unread {
    background: #EBF5FB;
}

.notification-item.unread:hover {
    background: #D6EAF8;
}

/* 알림 아이콘 */
.notification-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #EBF5FB;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--primary-color, #3498db);
    font-size: 0.9rem;
}

.notification-item.unread .notification-icon {
    background: var(--primary-color, #3498db);
    color: #fff;
}

/* 알림 텍스트 */
.notification-body {
    flex: 1;
    min-width: 0;
}

.notification-body .notif-title {
    font-size: 0.85rem;
    color: #333;
    line-height: 1.4;
    margin-bottom: 2px;
}

.notification-body .notif-title strong {
    font-weight: 700;
}

.notification-body .notif-preview {
    font-size: 0.8rem;
    color: #888;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.notification-body .notif-time {
    font-size: 0.75rem;
    color: #aaa;
    margin-top: 3px;
}

/* 빈 알림 */
.notification-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    color: #999;
    font-size: 0.85rem;
}

.hamburger-btn {
    display: none;
    background: none;
    border: none;
    color: white;
    font-size: 1.5rem;
    cursor: pointer;
}

.mobile-only {
    display: none;
}

.mobile-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 998;
}

.mobile-overlay.show {
    display: block;
}

.mobile-close-btn {
    display: none;
}

/* ==========================================================================
   3. Main Layout & Slim Dashboard
   ========================================================================== */
main {
    padding: 15px 20px;
    /* [Slim] 상단 여백 축소 */
}

.container {
    max-width: 1200px;
    margin: 0 auto;
}

/* [Slim] Dashboard Stats Bar */
.dashboard-stats {
    display: flex;
    background: white;
    border-radius: var(--radius-md);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    border: 1px solid var(--border-color);
    margin-bottom: 15px;
    overflow: hidden;
    flex-wrap: wrap;
}

.stat-card {
    flex: 1;
    min-width: 200px;
    padding: 10px 20px;
    display: flex;
    align-items: center;
    border-right: 1px solid #eee;
    background: transparent;
}

.stat-card:last-child {
    border-right: none;
}

/* [신규 2026-02-16] 클릭 가능한 위젯 카드 스타일 */
.stat-card-clickable {
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.1s ease;
}
.stat-card-clickable:hover {
    background-color: rgba(46, 125, 50, 0.06);
}
.stat-card-clickable:active {
    transform: scale(0.97);
}

.stat-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    margin-right: 12px;
    flex-shrink: 0;
}

.icon-blue {
    background-color: #e3f2fd;
    color: #1976d2;
}

.icon-purple {
    background-color: #f3e5f5;
    color: #7b1fa2;
}

.icon-green {
    background-color: #e8f5e9;
    color: #388e3c;
}

/* [Storage 대시보드] 아이콘 색상 */
.icon-orange {
    background-color: #fff3e0;
    color: #e67e22;
}

.stat-info {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.stat-label {
    font-size: 0.85rem;
    color: #888;
    white-space: nowrap;
    margin: 0;
}

.stat-value {
    font-size: 1.25rem;
    font-weight: 700;
    color: #333;
}

.attendance-values {
    font-size: 1.15rem;
    font-weight: 700;
    display: flex;
    align-items: baseline;
}

/* Cards Common */
.card {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    overflow: hidden;
    margin-bottom: 20px;
    /* 간격 축소 */
}

.card-header {
    padding: 12px 20px;
    border-bottom: 1px solid var(--border-color);
    background: #FAFAFA;
}

.card-header h2 {
    margin: 0 0 2px 0;
    font-size: 1.1rem;
    color: var(--primary-color);
}

.subtitle {
    margin: 0;
    color: var(--text-sub);
    font-size: 0.8rem;
}

.card-body {
    padding: 15px 20px;
}

.card-footer {
    background: #FAFAFA;
    border-top: 1px solid var(--border-color);
    padding: 10px 20px;
    text-align: right;
    font-size: 0.8rem;
    color: var(--text-sub);
}

.hidden {
    display: none !important;
}

.divider {
    height: 1px;
    background: var(--border-color);
    margin: 20px 0;
}

.message-area {
    min-height: 20px;
    margin-bottom: 10px;
    color: var(--danger-color);
    font-size: 0.9rem;
}

/* ==========================================================================
   4. Forms, Inputs & Buttons (Slim)
   ========================================================================== */
/* [Slim] Search Box */
.search-box-wrapper {
    background: #F8F9FA;
    padding: 10px 15px;
    /* 패딩 축소 */
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    align-items: center;
    margin-bottom: 15px;
}

.filter-group {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.filter-group label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-sub);
    margin: 0;
}

.input-row {
    display: flex;
    align-items: center;
    gap: 5px;
}

/* [Slim] Inputs & Buttons Height Control (36px) */
.form-control {
    padding: 0 10px;
    height: 36px;
    border: 1px solid #CCC;
    border-radius: 4px;
    font-size: 0.9rem;
    font-family: inherit;
    min-width: 120px;
}

.form-control:focus {
    outline: none;
    border-color: var(--primary-color);
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0 14px;
    height: 36px;
    border-radius: 4px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    border: none;
    transition: background 0.2s;
    text-decoration: none;
}

.btn:active {
    transform: translateY(1px);
}

/* Button Colors */
.btn-primary {
    background: var(--primary-color);
    color: #fff;
}

.btn-primary:hover {
    background: var(--primary-light);
}

.btn-secondary {
    background: #90A4AE;
    color: #fff;
}

.btn-secondary:hover {
    background: #78909C;
}

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

.btn-danger:hover {
    background: #B71C1C;
}

.btn-success {
    background: var(--success-color);
    color: #fff;
}

.btn-success:hover {
    background: #1B5E20;
}

.btn-sm {
    padding: 0 10px;
    font-size: 0.85rem;
    height: 32px;
}

.btn-xs {
    padding: 2px 8px;
    font-size: 0.8rem;
    height: 28px;
}

.button-group-right {
    margin-left: auto;
    display: flex;
    gap: 8px;
}

.action-footer {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
}

/* Month Picker Group */
.month-picker-group {
    display: flex;
    align-items: center;
}

.month-picker-group .btn-icon-only:first-child {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    margin-right: -1px;
    z-index: 1;
}

.month-picker-group input[type="month"] {
    border-radius: 0;
    width: 130px;
    z-index: 0;
    text-align: center;
}

.month-picker-group input[type="month"]:focus {
    z-index: 2;
}

.month-picker-group .btn-icon-only:nth-child(3) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    margin-left: -1px;
    z-index: 1;
}

.btn-icon-only {
    padding: 0 10px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Checkboxes */
.checkbox-group {
    display: flex;
    align-items: center;
    height: 36px;
    padding-top: 18px;
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 500;
}

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

/* Employee Form */
.form-box-wrapper {
    background: #fff;
    margin-bottom: 20px;
}

.form-row.multi-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 15px;
    margin-top: 10px;
}

.form-buttons-row {
    margin-top: 15px;
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

.input-group {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.full-width-group {
    width: 100%;
}

/* Toggle Switch */
.switch {
    position: relative;
    display: inline-block;
    width: 48px;
    height: 24px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .4s;
    border-radius: 24px;
}

.slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}

input:checked+.slider {
    background-color: var(--primary-color);
}

input:checked+.slider:before {
    transform: translateX(24px);
}

/* Date Time Wrapper */
.date-time-wrapper {
    background: #FAFAFA;
    border: 1px solid #EEEEEE;
    border-radius: var(--radius-md);
    padding: 15px;
    margin-top: 15px;
}

.date-time-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.date-time-label {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--text-main);
    display: flex;
    align-items: center;
    gap: 8px;
}

.date-inputs-row {
    display: flex;
    gap: 10px;
}

.date-inputs-row .form-control {
    flex: 1;
}

@media (max-width: 600px) {
    .date-inputs-row {
        flex-direction: column;
    }
}

/* [모바일 ≤480px] 초소형 화면 근태 캘린더 추가 축소 */
@media (max-width: 480px) {
    /* [추가] 초소형 화면에서 calendar-section 뷰포트 초과 방지 */
    #calendar-section {
        max-width: 100vw;       /* 뷰포트 너비 초과 절대 방지 */
    }

    #calendar-section .card-body {
        padding: 6px 4px;       /* 더 좁은 패딩 */
    }

    .calendar-cell {
        min-height: 55px;       /* 65px → 55px */
        padding: 2px;           /* 3px → 2px */
        min-width: 0;           /* [추가] Grid 아이템 축소 허용 */
        overflow: hidden;       /* [추가] 셀 넘침 차단 */
    }

    .calendar-weekdays div {
        padding: 4px 1px;
        font-size: 0.7rem;
    }

    .date-number {
        font-size: 0.7rem;      /* 0.8rem → 0.7rem */
    }

    .chip-name {
        font-size: 0.6rem;      /* 0.65rem → 0.6rem */
    }

    .weather-icon-text {
        font-size: 0.75rem;     /* 0.85rem → 0.75rem */
    }

    .holiday-label {
        font-size: 0.5rem;
    }
}

/* ==========================================================================
   5. Tables
   ========================================================================== */
.table-responsive {
    overflow-x: auto;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
}

table {
    width: 100%;
    border-collapse: collapse;
    background: white;
    min-width: 600px;
}

table th {
    background: #EFEBE9;
    color: var(--primary-color);
    font-weight: 600;
    padding: 10px 15px;
    text-align: left;
    white-space: nowrap;
    border-bottom: 2px solid #D7CCC8;
    font-size: 0.9rem;
}

table td {
    padding: 10px 15px;
    border-bottom: 1px solid #EEEEEE;
    color: #424242;
    vertical-align: middle;
    font-size: 0.9rem;
}

table tr:hover td {
    background-color: #FAFAFA;
}

.photo-thumbnail {
    height: 40px;
    width: auto;
    border-radius: 4px;
    border: 1px solid #ddd;
    cursor: pointer;
    transition: transform 0.2s;
}

.photo-thumbnail:hover {
    transform: scale(1.1);
}

.badge-admin {
    padding: 2px 6px;
    background-color: #EFEBE9;
    color: #5D4037;
    border: 1px solid #D7CCC8;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
}

.empty-state {
    text-align: center;
    padding: 30px;
    color: var(--text-sub);
}

/* ==========================================================================
   6. Modals & Login
   ========================================================================== */
/* Login Page */
.login-wrapper {
    position: absolute;
    top: 70px;
    left: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    width: 100%;
    background: var(--primary-color);
    gap: 20px;
}


.login-card {
    width: 100%;
    max-width: 400px;
    background: white;
    padding: 0;
}

.login-header {
    padding: 0%;
    text-align: center;
    border-bottom: 1px solid var(--border-color);
    z-index: 100;
}

/* .login-header h2 { margin: 0 0 5px; color: var(--primary-color); font-size: 1.4rem; } */
.login-body {
    padding: 25px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.login-body .full-width {
    width: 100%;
    height: 40px;
    margin-top: 5px;
}

.app-download-area {
    text-align: center;
}

.app-link {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    font-size: 0.9rem;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 20px;
    transition: all 0.2s;
}

.app-link:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    border-color: #fff;
}

.text-btn {
    background: none;
    border: none;
    color: #5D4037;
    cursor: pointer;
    font-size: 0.9rem;
    text-decoration: underline;
}

/* Modals */
/* [신규] 회원가입 모달용 .modal 클래스 */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 3000;
    display: flex;
    justify-content: center;
    align-items: center;
}

.modal .modal-content {
    background: white;
    width: 90%;
    max-width: 500px;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    overflow: hidden;
}

.modal .modal-header {
    background: var(--primary-color);
    color: white;
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal .modal-header h2 {
    margin: 0;
    font-size: 1.3rem;
    display: flex;
    align-items: center;
    gap: 10px;
}

.modal .modal-close {
    background: none;
    border: none;
    color: white;
    font-size: 2rem;
    cursor: pointer;
    line-height: 1;
    padding: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s;
}

.modal .modal-close:hover {
    opacity: 0.7;
}

.modal .modal-body {
    padding: 25px;
    max-height: 70vh;
    overflow-y: auto;
}

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 2000;
    display: flex;
    justify-content: center;
    align-items: center;
}

.modal-box {
    background: white;
    width: 90%;
    max-width: 500px;
    border-radius: var(--radius-lg);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    animation: slideUp 0.3s ease-out;
    display: flex;
    flex-direction: column;
}

.modal-box.manual-box {
    max-width: 1300px;
    height: 85vh;
}

/* 매뉴얼용 */

@keyframes slideUp {
    from {
        transform: translateY(20px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.modal-header {
    background: var(--primary-color);
    color: white;
    padding: 15px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-header h3 {
    margin: 0;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    gap: 8px;
}

.close-btn {
    background: none;
    border: none;
    color: white;
    font-size: 2rem;
    cursor: pointer;
    padding: 0;
}

.modal-body {
    padding: 20px;
    display: flex;
    /* Flexbox 전환 */
    flex-direction: column;
    /* 세로 배치 */
    height: 100%;
    /* 모달 전체 높이 사용 */
    overflow: hidden;
    /* 이중 스크롤 방지 */
}

/* 2. 스크롤이 필요한 콘텐츠 영역 (flex: 1) */
.modal-scroll-area {
    flex: 1;
    /* 남은 공간 모두 차지 */
    overflow-y: auto;
    /* 내용 넘칠 때만 스크롤 */
    padding-right: 5px;
    /* 스크롤바 여백 */
}

.modal-body.no-padding {
    padding: 0;
    flex: 1;
}

.modal-footer {
    padding: 15px 20px;
    background: #fafafa;
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.info-text {
    font-size: 0.85rem;
    color: var(--text-sub);
    margin: 0;
    background: #f5f5f5;
    padding: 10px;
    border-radius: var(--radius-md);
}

/* Image Modal */
.image-modal {
    position: fixed;
    z-index: 2000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.85);
    display: flex;
    justify-content: center;
    align-items: center;
}

.image-modal .modal-content {
    max-width: 90%;
    max-height: 85vh;
    border-radius: 8px;
    animation: zoom 0.3s;
}

.close-modal {
    position: absolute;
    top: 20px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    cursor: pointer;
}

@keyframes zoom {
    from {
        transform: scale(0)
    }

    to {
        transform: scale(1)
    }
}

/* ==========================================================================
   7. Domain Specific: Wage & Reports
   ========================================================================== */
.wage-summary-box {
    display: flex;
    justify-content: space-around;
    align-items: center;
    background-color: #FAFAFA;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 20px 10px;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 15px;
}

.summary-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    flex: 1;
    min-width: 140px;
}

.summary-item .label {
    font-size: 0.85rem;
    color: var(--text-sub);
    font-weight: 600;
}

.summary-item .value {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--text-main);
    white-space: nowrap;
}

.summary-item.highlight .value {
    color: var(--primary-color);
    font-size: 1.5rem;
}

.divider-vertical {
    width: 1px;
    height: 30px;
    background-color: #ddd;
}

/* Weekly Report Table */
.report-card {
    background: #fff;
    border: 1px solid #BBDEFB;
    border-radius: var(--radius-md);
    overflow: hidden;
    margin-bottom: 20px;
}

.report-header {
    background: #E3F2FD;
    color: #1565C0;
    padding: 10px 15px;
    font-weight: 700;
    font-size: 0.9rem;
    border-bottom: 1px solid #BBDEFB;
}

.report-table th {
    background: #F1F8E9;
    color: #33691E;
    border-bottom: 1px solid #DCEDC8;
    font-size: 0.85rem;
}

.calc-formula {
    font-family: 'Courier New', monospace;
    font-size: 0.8rem;
    color: #555;
    background: #FAFAFA;
    padding: 2px 6px;
    border-radius: 4px;
}

.allowance-success {
    color: #1565C0;
    font-weight: 700;
}

.clickable-allowance {
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.clickable-allowance:hover {
    filter: brightness(0.8);
}

/* Payslip Capture (Hidden) */
.payslip-card {
    width: 800px;
    background: #fff;
    padding: 40px;
    border: 1px solid #ddd;
    color: #333;
}

.payslip-header {
    text-align: center;
    border-bottom: 2px solid #3E2723;
    padding-bottom: 20px;
    margin-bottom: 30px;
}

.payslip-header h1 {
    font-size: 24px;
    color: #3E2723;
    margin: 0 0 10px;
}

.payslip-section-title {
    font-size: 16px;
    font-weight: 700;
    color: #3E2723;
    margin: 30px 0 10px;
    border-left: 4px solid #3E2723;
    padding-left: 10px;
}

.payslip-summary {
    display: flex;
    justify-content: space-between;
    background: #FAFAFA;
    border: 1px solid #eee;
    padding: 20px;
    border-radius: 8px;
}

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

.payslip-summary-value {
    font-size: 18px;
    font-weight: 700;
}

.payslip-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.payslip-table th {
    background: #EFEBE9;
    color: #3E2723;
    padding: 8px;
    border-bottom: 1px solid #D7CCC8;
}

.payslip-table td {
    padding: 8px;
    border-bottom: 1px solid #eee;
    text-align: center;
}

.payslip-footer {
    margin-top: 40px;
    text-align: right;
    font-size: 12px;
    color: #999;
    border-top: 1px solid #eee;
    padding-top: 10px;
}

/* Wage Detail Modal */
.detail-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid #eee;
    font-size: 0.9rem;
}

.formula-box {
    background-color: #E3F2FD;
    border: 1px solid #BBDEFB;
    border-radius: 8px;
    padding: 15px;
    margin-top: 10px;
}

.formula-expression {
    font-family: 'Courier New', monospace;
    font-size: 0.95rem;
    background: #fff;
    padding: 8px;
    border-radius: 4px;
    text-align: center;
    font-weight: 600;
}

/* =========================================
   [신규] 급여 정산 보기 모드 탭 스타일
   ========================================= */
.view-mode-tabs .btn {
    border-radius: 20px;
    /* 둥근 탭 스타일 */
    font-weight: 600;
    transition: all 0.2s;
}

/* 비활성 탭 스타일 (회색) */
.view-mode-tabs .btn.btn-secondary {
    background-color: #f0f0f0;
    color: #666;
    border: 1px solid #ddd;
}

.view-mode-tabs .btn.btn-secondary:hover {
    background-color: #e0e0e0;
}

/* 활성 탭 스타일 (primary 색상 유지) */
.view-mode-tabs .btn.btn-primary {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}


/* ==========================================================================
   8. Domain Specific: Calendar & Schedule
   ========================================================================== */

/* [복구] 캘린더 그리드 레이아웃 (Grid Layout Restoration) */
.calendar-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    background: #f4f4f4;
    border-bottom: 1px solid #ddd;
}

.calendar-weekdays div {
    padding: 10px;
    text-align: center;
    font-weight: bold;
    color: #555;
    border-right: 1px solid #eee;
}

.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    /* 7열 그리드 강제 */
    background: #fff;
    border-left: 1px solid #eee;
    /* 좌측 마감선 */
}

.calendar-cell {
    min-height: 120px;
    /* 셀 최소 높이 보장 */
    border-bottom: 1px solid #eee;
    border-right: 1px solid #eee;
    padding: 5px;
    position: relative;
    background: #fff;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.calendar-cell.other-month {
    background-color: #fcfcfc;
    color: #ccc;
}

.calendar-cell.today-cell {
    background-color: #fff8e1;
    /* 오늘 날짜 배경 강조 */
    border: 2px solid #FFD54F;
    /* 테두리 강조 */
}

/* 날짜 숫자 스타일 */
.date-number {
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 4px;
    padding-left: 4px;
}

/* 주말 색상 처리 */
.calendar-weekdays .sunday {
    color: var(--danger-color);
}

.calendar-weekdays .saturday {
    color: #1976D2;
}

/* 캘린더 내부 근태 칩 스타일 */
.attendance-chip {
    background: #EFEBE9;
    border-left: 3px solid #5D4037;
    padding: 4px 6px;
    border-radius: 4px;
    font-size: 0.75rem;
    margin-bottom: 2px;
}

.chip-name {
    font-weight: 700;
    color: #3E2723;
}

.chip-time {
    color: #555;
    font-size: 0.7rem;
}

/* [수정] 날씨 및 공휴일 위젯 스타일 (이모지 기반) */
.weather-widget {
    position: absolute;
    top: 6px;
    right: 8px;
    display: flex;
    align-items: center;
    gap: 3px;
    background-color: rgba(255, 255, 255, 0.9);
    /* 배경 추가하여 가독성 확보 */
    padding: 1px 4px;
    border-radius: 4px;
    z-index: 5;
}

/* 이미지 대신 텍스트 이모지 사용 */
.weather-icon-text {
    font-size: 1.1rem;
    /* 이모지 크기 */
    line-height: 1;
    cursor: default;
}

.weather-icon {
    width: 24px;
    height: 24px;
}

.weather-temp {
    font-size: 0.75rem;
    font-weight: 700;
    color: #555;
    font-family: 'Pretendard', sans-serif;
}

/* 공휴일 라벨 위치 조정 */
.holiday-label {
    font-size: 0.7rem;
    color: var(--danger-color);
    font-weight: 800;
    display: inline-block;
    margin-left: 6px;
    position: relative;
    top: -1px;
}

/* 날짜가 휴일일 때 숫자 색상 */
.date-number.is-holiday {
    color: var(--danger-color);
}


.calendar-header-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.calendar-nav {
    display: flex;
    align-items: center;
    gap: 10px;
}

.calendar-nav h2 {
    margin: 0;
    min-width: 140px;
    text-align: center;
    color: var(--primary-color);
    font-size: 1.2rem;
}

/* ==========================================================================
   FullCalendar Theme Overrides (Brown Theme)
   ========================================================================== */
#calendar-scheduler {
    max-width: 100%;
    min-height: 700px;
    padding: 10px;
    background: #fff;
    border-radius: 8px;
}

/* 1. 툴바 버튼 스타일 (Primary Color 적용) */
.fc-button-primary {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    font-weight: 600 !important;
    transition: all 0.2s !important;
}

.fc-button-primary:hover {
    background-color: var(--primary-light) !important;
    border-color: var(--primary-light) !important;
    transform: translateY(-1px);
}

.fc-button-primary:disabled {
    background-color: #a1887f !important;
    border-color: #a1887f !important;
}

.fc-button-active {
    background-color: #3E2723 !important;
    border-color: #3E2723 !important;
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.2) !important;
}

/* 2. 오늘 날짜 강조 */
.fc-day-today {
    background-color: #FFF8E1 !important;
    /* 연한 노란색 배경 */
}

.fc-daygrid-day-number {
    font-weight: 600;
    color: #333;
    padding: 8px !important;
}

/* 3. 날씨 아이콘 (FullCalendar 전용 위치) */
/* [수정 2026-01-03] 날씨 위젯 스타일 (고정 폭 제거 및 기온 텍스트 추가) */
.fc-weather-widget {
    margin-right: 4px;
    cursor: help;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* width: 24px;  <- 고정 너비 제거 */
    height: 24px;
    padding: 0 4px;
    /* 여백 추가 */
    border-radius: 4px;
    transition: background-color 0.2s;
    gap: 2px;
    /* 아이콘과 텍스트 사이 간격 */
}

.fc-weather-widget:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

/* [신규] 기온 텍스트 스타일 */
.fc-weather-temp {
    font-size: 0.75rem;
    font-weight: 700;
    color: #555;
    font-family: 'Pretendard', sans-serif;
    margin-top: 1px;
    /* 시각적 보정 */
}

/* 이모지 크기 조정 */
.fc-weather-emoji {
    font-size: 1.1rem;
    line-height: 1;
}

.fc-daygrid-day-top {
    flex-direction: row;
    justify-content: space-between;
    /* 날짜(좌) - 날씨(우) 배치 */
    padding-left: 4px;
}

/* 4. 주말 색상 */
.fc-day-sun .fc-col-header-cell-cushion,
.fc-day-sun .fc-daygrid-day-number {
    color: var(--danger-color);
}

.fc-day-sat .fc-col-header-cell-cushion,
.fc-day-sat .fc-daygrid-day-number {
    color: #1976D2;
}

/* 4-1. 공휴일 (FullCalendar) */
.fc-holiday-number {
    color: var(--danger-color) !important;
}

.fc-holiday-label {
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--danger-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 60px;
}

/* 5. 이벤트 스타일 미세 조정 */
.fc-event {
    border: none !important;
    border-radius: 3px !important;
    padding: 1px 3px !important;
    font-size: 0.85rem !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* FullCalendar Theme Overrides (Brown Theme) */


/* Legend */
.legend-item {
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 4px;
    transition: opacity 0.2s;
}

.legend-item.dimmed {
    opacity: 0.3;
}

.legend-item.active {
    font-weight: 700;
    background-color: rgba(0, 0, 0, 0.08);
}

/* Shortcut */
.shortcut-area {
    display: flex;
    align-items: center;
    gap: 15px;
    background: #fff;
    padding: 15px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    margin-top: 10px;
}

.shortcut-icon-preview {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    border: 1px solid #eee;
}


/* =========================================
   [신규] 캘린더 이미지 저장용 스타일 (Print View)
   ========================================= */

/* 저장용 헤더 (평소에는 hidden) */
.print-header {
    text-align: center;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 2px solid var(--primary-color);
}

.print-header h1 {
    font-size: 2.5rem;
    /* 제목 크게 */
    color: var(--primary-color);
    margin: 0 0 10px 0;
    font-weight: 800;
}

.print-meta {
    display: flex;
    justify-content: center;
    gap: 20px;
    font-size: 1rem;
    color: #555;
}

/* 드롭다운 대체용 박스 (완벽한 중앙 정렬) */
.filter-print-box {
    display: flex;
    align-items: center;
    justify-content: center;
    /* 가로 중앙 */
    height: 40px;
    padding: 0 30px;
    background-color: #fff;
    border: 1px solid #aaa;
    border-radius: 4px;
    font-size: 1.2rem;
    font-weight: bold;
    color: #333;
    min-width: 250px;
    margin: 0 auto 20px auto;
    /* 박스 자체를 가운데 정렬 */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}



/* =========================================
   [신규] 고도화된 급여명세서 스타일 (표준 양식)
   ========================================= */
.payslip-container {
    width: 800px;
    background: #fff;
    padding: 40px;
    border: 1px solid #ddd;
    font-family: 'Pretendard', sans-serif;
    color: #333;
}

.payslip-title-area {
    text-align: center;
    border-bottom: 2px solid #3E2723;
    padding-bottom: 20px;
    margin-bottom: 30px;
}

.payslip-title-area h1 {
    margin: 0;
    font-size: 26px;
    color: #3E2723;
}

.payslip-title-area p {
    margin: 10px 0 0;
    font-size: 14px;
    color: #666;
}

/* 2단 그리드 (지급 vs 공제) */
.payslip-grid {
    display: flex;
    gap: 0;
    /* 테두리 겹침 처리를 위해 */
    border: 1px solid #3E2723;
    margin-bottom: 20px;
}

.payslip-col {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.payslip-col.left {
    border-right: 1px solid #3E2723;
}

.payslip-header-cell {
    background: #EFEBE9;
    padding: 10px;
    text-align: center;
    font-weight: 700;
    border-bottom: 1px solid #ccc;
    color: #3E2723;
}

.payslip-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 15px;
    border-bottom: 1px solid #eee;
    font-size: 13px;
}

.payslip-row:last-child {
    border-bottom: none;
}

.payslip-row.total-row {
    background: #FAFAFA;
    font-weight: 700;
    border-top: 1px solid #ccc;
}

/* 하단 실 지급액 강조 */
.payslip-footer-total {
    background: #3E2723;
    color: #fff;
    padding: 15px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 4px;
    margin-top: 20px;
}

.total-label {
    font-size: 16px;
    font-weight: 600;
}

.total-amount {
    font-size: 24px;
    font-weight: 700;
}

.payslip-info {
    margin-top: 30px;
    text-align: center;
    font-size: 12px;
    color: #888;
    line-height: 1.6;
}


/* =========================================
   [신규] 공제 방식 상태 배지 스타일
   ========================================= */
.badge-tax {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    white-space: nowrap;
}

/* 4대보험 (파란색 계열) */
.badge-tax.badge-primary {
    background-color: #E3F2FD;
    color: #1565C0;
    border: 1px solid #BBDEFB;
}

/* 3.3% (주황색 계열) */
.badge-tax.badge-warning {
    background-color: #FFF3E0;
    color: #E65100;
    border: 1px solid #FFE0B2;
}

/* 미적용 (회색 계열) */
.badge-tax.badge-secondary {
    background-color: #F5F5F5;
    color: #616161;
    border: 1px solid #E0E0E0;
}

/* 미설정/기본값 (흰색 바탕 + 테두리) */
.badge-tax.badge-outline {
    background-color: #FFFFFF;
    color: #9E9E9E;
    border: 1px solid #BDBDBD;
    border-style: dashed;
    /* 미완성 느낌 */
}



/* [수정] 테이블 내 버튼 그룹 스타일 (줄바꿈 방지) */
.table-responsive table td .btn-group {
    display: flex;
    gap: 4px;
    /* 간격 조금 더 좁게 */
    flex-wrap: nowrap;
    /* 절대 줄바꿈 금지 */
    justify-content: flex-start;
}

.table-responsive table td {
    white-space: nowrap;
    /* 셀 내용 줄바꿈 방지 */
}

/* 버튼 크기 및 텍스트 조정 */
.btn-xs {
    padding: 2px 6px;
    font-size: 0.75rem;
    /* 폰트 사이즈 살짝 축소 */
    height: 26px;
    min-width: 34px;
    /* 최소 너비 확보 */
}


/* [신규] 출퇴근 기록 썸네일 및 모달 스타일 */
.photo-thumbnail {
    width: 40px;
    height: 40px;
    object-fit: cover;
    /* 비율 유지하며 꽉 채우기 */
    border-radius: 6px;
    /* 부드러운 사각형 */
    border: 1px solid #ddd;
    cursor: pointer;
    vertical-align: middle;
    align-items: center;
    transition: all 0.2s ease-in-out;
    background-color: #fff;
}

/* 호버 시 확대 효과 (Zoom Interaction) */
.photo-thumbnail:hover {
    transform: scale(2.5);
    /* 2.5배 확대 */
    z-index: 100;
    position: relative;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    border-color: var(--primary-color);
}

/* 사진 없을 때 아이콘 */
.no-photo {
    color: #e0e0e0;
    font-size: 1.5rem;
    vertical-align: middle;
    align-items: center;
    display: inline-block;
    padding: 5px;
}

/* [신규] 이니셜 아바타 스타일 */
.avatar-placeholder {
    width: 40px;
    height: 40px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 1.1rem;
    color: white;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    cursor: default;
    /* 클릭 안됨 표시 */
}


/* 테이블 헤더 통합 스타일 */
.th-action {
    text-align: center;
    width: 100px;
}



/* [UI 개선] 관리자 테이블 액션 버튼 (Ghost Style) */
.action-btn-group {
    display: flex;
    justify-content: center;
    gap: 8px;
    /* 버튼 사이 간격 */
    align-items: center;
}

.btn-ghost {
    background: transparent;
    border: 1px solid transparent;
    color: #9E9E9E;
    /* 기본: 은은한 회색 */
    width: 32px;
    height: 32px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 1rem;
}

/* 호버 효과: 수정(파랑), 삭제(빨강) */
.btn-ghost.edit:hover {
    background-color: #E3F2FD;
    color: #1976D2;
    transform: translateY(-1px);
}

.btn-ghost.delete:hover {
    background-color: #FFEBEE;
    color: #D32F2F;
    transform: translateY(-1px);
}

/* 기존 버튼 스타일 덮어쓰기 방지 */
.btn-ghost:focus {
    outline: none;
}



/* [신규] 급여 인사이트 대시보드 스타일 */
.wage-insight-dashboard {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr;
    /* 첫 번째 카드를 조금 더 넓게 */
    gap: 15px;
    margin-bottom: 25px;
}

.insight-card {
    background: #fff;
    border: 1px solid #E0E0E0;
    border-radius: var(--radius-md);
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.total-cost-card {
    background: linear-gradient(to bottom right, #ffffff, #fafafa);
    border-left: 4px solid var(--primary-color);
}

.card-label {
    font-size: 0.85rem;
    color: #757575;
    font-weight: 600;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.main-value {
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--primary-color);
    letter-spacing: -0.5px;
    margin-bottom: 12px;
}

/* 비용 구성 바 (Stacked Bar) */
.cost-bar-container {
    display: flex;
    height: 10px;
    background-color: #eee;
    border-radius: 5px;
    overflow: hidden;
    margin-bottom: 10px;
}

.cost-bar-segment {
    height: 100%;
    transition: width 0.5s ease;
}

.cost-bar-segment.base {
    background-color: #BDBDBD;
}

/* 기본급: 회색 */
.cost-bar-segment.allow {
    background-color: #1565C0;
}

/* 수당: 파란색 */
.cost-bar-segment.ded {
    background-color: #EF5350;
}

/* 공제: 빨간색 */

.cost-legend {
    display: flex;
    gap: 12px;
    font-size: 0.8rem;
    color: #666;
}

.legend-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 4px;
}

.legend-dot.base {
    background-color: #BDBDBD;
}

.legend-dot.allow {
    background-color: #1565C0;
}

.legend-dot.ded {
    background-color: #EF5350;
}

/* 인력 운영 & 효율 지표 내부 스타일 */
.sub-stat-row {
    display: flex;
    align-items: center;
    justify-content: space-around;
    height: 100%;
}

.sub-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.sub-label {
    font-size: 0.8rem;
    color: #999;
}

.sub-value {
    font-size: 1.2rem;
    font-weight: 700;
    color: #333;
}

.sub-stat-column {
    display: flex;
    flex-direction: column;
    gap: 10px;
    justify-content: center;
    height: 100%;
}

.mini-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.9rem;
    border-bottom: 1px solid #f0f0f0;
    padding-bottom: 4px;
}

.mini-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.mini-row span {
    color: #666;
}

.mini-row strong {
    font-size: 1.1rem;
    color: #333;
}

/* 모바일 대응 */
@media (max-width: 768px) {
    .wage-insight-dashboard {
        grid-template-columns: 1fr;
    }

    .insight-card {
        min-height: auto;
        padding: 15px;
    }
}



/* [신규] 테이블 삽입용 미니 배지 */
.badge-mini {
    font-size: 0.7rem;
    /* 글자 크기 축소 */
    padding: 2px 5px;
    /* 여백 축소 */
    margin-right: 6px;
    /* 금액과의 간격 */
    vertical-align: 1px;
    /* 수직 정렬 보정 */
    letter-spacing: -0.5px;
    /* 자간 좁힘 */
}



/* [신규] 급여 세부 내역서 이미지 저장용 스타일 */
#hidden-detail-wrapper {
    position: fixed;
    top: 0;
    left: -9999px;
    /* 화면 밖으로 숨김 */
    width: 900px;
    /* 이미지 고정 너비 (A4 비율 고려) */
    background-color: #fff;
    padding: 40px;
    font-family: 'Pretendard', sans-serif;
    color: #333;
    z-index: -1;
}

/* 제목 스타일 */
.print-doc-title {
    text-align: center;
    font-size: 28px;
    font-weight: 800;
    color: #333;
    padding-bottom: 20px;
    border-bottom: 3px solid #333;
    margin-bottom: 30px;
}

/* 새로 추가되는 요약 섹션 스타일 */
.print-summary-section {
    margin-bottom: 30px;
    border: 1px solid #ccc;
    border-radius: 8px;
    overflow: hidden;
}

.print-summary-row {
    display: flex;
    border-bottom: 1px solid #eee;
}

.print-summary-row:last-child {
    border-bottom: none;
}

.print-label {
    background-color: #f5f5f5;
    width: 140px;
    padding: 12px 15px;
    font-weight: 700;
    color: #555;
    border-right: 1px solid #eee;
    display: flex;
    align-items: center;
}

.print-value {
    flex: 1;
    padding: 12px 15px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    /* 우측 정렬 */
    font-size: 1.1rem;
}

.print-sub-text {
    font-size: 0.85rem;
    color: #888;
    margin-right: auto;
    /* 왼쪽 정렬 */
    padding-left: 10px;
}

/* [업데이트] 급여 세부 내역서 이미지 저장용 스타일 (최적화 버전) */
#hidden-detail-wrapper {
    position: fixed;
    top: 0;
    left: -9999px;
    width: 1100px;
    /* [변경] 너비 확장 (줄바꿈 방지) */
    background-color: #fff;
    padding: 40px;
    font-family: 'Pretendard', sans-serif;
    color: #333;
    z-index: -1;
}

/* 제목 및 요약 섹션 (기존 유지) */
.print-doc-title {
    text-align: center;
    font-size: 28px;
    font-weight: 800;
    color: #333;
    padding-bottom: 20px;
    border-bottom: 3px solid #333;
    margin-bottom: 30px;
}

.print-summary-section {
    margin-bottom: 30px;
    border: 1px solid #ccc;
    border-radius: 8px;
    overflow: hidden;
}

.print-summary-row {
    display: flex;
    border-bottom: 1px solid #eee;
}

.print-summary-row:last-child {
    border-bottom: none;
}

.print-label {
    background-color: #f5f5f5;
    width: 140px;
    padding: 12px 15px;
    font-weight: 700;
    color: #555;
    border-right: 1px solid #eee;
    display: flex;
    align-items: center;
}

.print-value {
    flex: 1;
    padding: 12px 15px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    font-size: 1.1rem;
    font-variant-numeric: tabular-nums;
    /* 숫자 등폭 정렬 */
}

.print-sub-text {
    font-size: 0.85rem;
    color: #888;
    margin-right: auto;
    padding-left: 10px;
}

/* [최적화] 테이블 스타일 (폰트 축소, 줄바꿈 방지, 가독성 패턴) */
#hidden-detail-wrapper table {
    width: 100% !important;
    font-size: 0.85rem;
    /* [변경] 폰트 사이즈 축소 (13px~14px) */
    border-collapse: collapse;
    margin-bottom: 20px;
    table-layout: fixed;
    /* 컬럼 너비 고정 */
}

#hidden-detail-wrapper th {
    background: #EFEBE9 !important;
    color: #3E2723 !important;
    border: 1px solid #ccc;
    padding: 6px 4px;
    /* 패딩 축소 */
    text-align: center;
    white-space: nowrap;
    /* [중요] 헤더 줄바꿈 금지 */
    letter-spacing: -0.5px;
}

#hidden-detail-wrapper td {
    border: 1px solid #ddd;
    padding: 6px 4px;
    /* 패딩 축소 */
    text-align: center;
    white-space: nowrap;
    /* [중요] 내용 줄바꿈 금지 */
    font-variant-numeric: tabular-nums;
    /* 숫자 등폭 정렬 */
}

/* [신규] Zebra Striping (줄무늬 배경) - 가독성 향상 */
#hidden-detail-wrapper tbody tr:nth-child(even) {
    background-color: #f9f9f9 !important;
}

/* 주휴수당 리포트 카드 테두리 제거 */
#hidden-detail-wrapper .report-card {
    border: none !important;
    box-shadow: none !important;
}



/* CSS */
.button-48 {
    appearance: none;
    background-color: #FFFFFF;
    border-width: 0;
    box-sizing: border-box;
    color: #000000;
    cursor: pointer;
    display: inline-block;
    font-family: Clarkson, Helvetica, sans-serif;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 1em;
    margin: 0;
    opacity: 1;
    outline: 0;
    padding: 1.5em 2.2em;
    position: relative;
    text-align: center;
    text-decoration: none;
    text-rendering: geometricprecision;
    text-transform: uppercase;
    transition: opacity 300ms cubic-bezier(.694, 0, 0.335, 1), background-color 100ms cubic-bezier(.694, 0, 0.335, 1), color 100ms cubic-bezier(.694, 0, 0.335, 1);
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    vertical-align: baseline;
    white-space: nowrap;
    z-index: 1;
    /* 버튼 자체의 z-index 설정 */
}

.button-48:before {
    animation: opacityFallbackOut .5s step-end forwards;
    backface-visibility: hidden;
    background-color: #EBEBEB;
    clip-path: polygon(-1% 0, 0 0, -25% 100%, -1% 100%);
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    transform: translateZ(0);
    transition: clip-path .5s cubic-bezier(.165, 0.84, 0.44, 1), -webkit-clip-path .5s cubic-bezier(.165, 0.84, 0.44, 1);
    width: 100%;
    z-index: -1;
    /* 배경은 뒤로 */
}

.button-48:hover:before {
    animation: opacityFallbackIn 0s step-start forwards;
    clip-path: polygon(0 0, 101% 0, 101% 101%, 0 101%);
}

.button-48:after {
    background-color: #FFFFFF;
}

/* --- 수정된 부분 --- */
.button-48 span {
    z-index: 10;
    /* 텍스트가 배경보다 확실히 앞에 오도록 높은 값 설정 */
    position: relative;
    transition: font-weight 0.2s ease-in-out, text-shadow 0.2s ease-in-out, color 0.2s ease-in-out;
    /* color transition 추가 */
}

/* 마우스를 올렸을 때 텍스트 스타일 */
.button-48:hover span {
    font-weight: 700;
    /* 글씨를 굵게 */
    text-shadow: 0 0 0.5px rgba(0, 0, 0, 0.5);
    /* 그림자로 선명하게 */
    color: #000000;
    /* hover 시 텍스트 색상을 명시적으로 검은색으로 설정 */
}




/* 출퇴근 조회 */
/* [신규] 카드 헤더 액션 버튼 그룹 (Flexbox) */
.header-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.header-actions {
    display: flex;
    gap: 8px;
}

/* 정렬 가능한 헤더 스타일 */
th.sortable {
    cursor: pointer;
    user-select: none;
    transition: background-color 0.2s;
}

th.sortable:hover {
    background-color: #E0E0E0;
}

th.sortable i {
    font-size: 0.8rem;
    color: #999;
    margin-left: 4px;
}

/* 모바일 대응 */
@media (max-width: 768px) {
    .header-flex {
        flex-direction: column;
        align-items: flex-start;
    }

    .header-actions {
        width: 100%;
        margin-top: 10px;
        justify-content: flex-end;
    }

    .header-actions .btn {
        flex: 1;
    }
}

/* 출퇴근 조회 */


/* 출퇴근 조회 */
/* [신규] 개선된 필터 UI 스타일 */
.search-box-vertical {
    align-items: stretch;
    /* 높이 맞춤 */
    gap: 20px;
    padding: 15px 20px;
}

.filter-section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
}

.filter-label {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-sub);
    margin-bottom: 2px;
}

.radio-row {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 36px;
}

.radio-label {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-main);
    min-width: 85px;
}

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

.date-range-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* 퀵 버튼 (Chips) */
.quick-btn-group {
    display: flex;
    gap: 4px;
    margin-left: 8px;
}

.chip-btn {
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 12px;
    padding: 4px 10px;
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.2s;
    color: #555;
}

.chip-btn:hover:not(:disabled) {
    background: #EFEBE9;
    color: var(--primary-color);
    border-color: var(--primary-color);
}

.chip-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: #f5f5f5;
}

/* 필터 사이 구분선 */
.divider-vertical-filter {
    width: 1px;
    background-color: #E0E0E0;
    margin: 0 10px;
}

/* 모바일 대응 */
@media (max-width: 768px) {
    .search-box-vertical {
        flex-direction: column;
        gap: 15px;
    }

    .divider-vertical-filter {
        display: none;
    }

    .date-range-group {
        flex-wrap: wrap;
    }

    .radio-row {
        height: auto;
        flex-wrap: wrap;
    }

    .filter-section {
        width: 100%;
    }

    #filter-employee-select {
        width: 100% !important;
    }
}

/* 출퇴근 조회 */



/* [신규 2026-01-03] 이니셜 아바타 스타일 */
.emp-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    color: white;
    font-weight: 700;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* 테이블 내 수직 정렬 보정 */
#employee-table td {
    vertical-align: middle;
}






/* ==========================================================================
   [신규] Dev 환경 전용 스타일 (매직 버튼 & 리본)
   ========================================================================== */

/* 1. 매직 버튼 (동적 주입용) */
.demo-magic-btn {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 12px;
    border-radius: 8px;
    text-align: center;
    cursor: pointer;
    margin-bottom: 20px;
    box-shadow: 0 4px 15px rgba(118, 75, 162, 0.3);
    transition: all 0.2s ease;
    border: 1px solid rgba(255, 255, 255, 0.2);
    animation: floatBtn 3s ease-in-out infinite;
}

.demo-magic-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(118, 75, 162, 0.4);
    filter: brightness(1.1);
}

.demo-magic-btn strong {
    display: block;
    font-size: 0.95rem;
    margin-bottom: 2px;
}

.demo-magic-btn span {
    font-size: 0.75rem;
    opacity: 0.9;
    font-weight: 300;
}

@keyframes floatBtn {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-3px);
    }
}

/* 2. 데모 모드 리본 (우측 상단 띠) */
.demo-ribbon {
    position: fixed;
    top: 40px;
    right: -40px;
    width: 200px;
    background: #FF6F00;
    /* 강렬한 오렌지색 */
    color: white;
    text-align: center;
    font-size: 0.8rem;
    font-weight: 800;
    padding: 8px 0;
    transform: rotate(45deg);
    z-index: 9999;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    pointer-events: none;
    /* 클릭 통과 */
    border: 2px dashed rgba(255, 255, 255, 0.3);
}

/* 3. 폼 흔들림 애니메이션 (피드백용) */
@keyframes shakeForm {
    0% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-5px);
    }

    50% {
        transform: translateX(5px);
    }

    75% {
        transform: translateX(-5px);
    }

    100% {
        transform: translateX(0);
    }
}

.shake-animation {
    animation: shakeForm 0.4s ease-in-out;
}



/* =========================================
   [반응형] Mobile (max-width: 768px)
   ========================================= */
@media (max-width: 768px) {
    .hamburger-btn {
        display: block;
        /* 햄버거 보이기 */
        z-index: 1002;
        /* 메뉴보다 위에 표시 (필요시) */
    }

    /* [수정 1] 헤더 레이아웃: 세로(column) -> 가로(row) 복구 */
    .header-inner {
        flex-direction: row;
        height: 70px;
        /* 높이 고정 */
        padding: 0 20px;
        gap: 0;
        justify-content: space-between;
        /* 로고(좌) - 햄버거(우) 배치 */
    }

    /* [수정 2] 네비게이션 여백 및 정렬 수정 */
    nav {
        width: 100%;
        justify-content: flex-start;
        /* 중앙 정렬 제거 -> 상단 정렬 */
    }

    .nav-btn {
        flex: 1;
        text-align: center;
    }



    /* 사이드 드로어 스타일 */
    /* [수정] z-index 대폭 상향 및 상단 디자인 개선 */
    .nav-container {
        position: fixed;
        top: 0;
        right: -280px;
        width: 280px;
        height: 100vh;
        background: #fff;
        display: flex;
        flex-direction: column;
        align-items: stretch;

        /* [수정] 배너보다 무조건 위에 오도록 최상위 레벨 설정 */
        z-index: 20000 !important;

        /* [수정] 상단 여백 제거 (프로필 헤더가 대신함) */
        padding: 0;

        box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
        transition: right 0.3s cubic-bezier(0.25, 1, 0.5, 1);
        overflow-y: auto;
    }

    .nav-container.open {
        right: 0;
    }

    /* [수정] 닫기 버튼을 프로필 헤더 안으로 배치하기 위해 위치 조정 */
    .mobile-close-btn {
        display: block !important;
        position: absolute;
        top: 15px;
        right: 15px;
        /* 왼쪽(left)에서 오른쪽(right)으로 변경하여 엄지손가락 접근성 향상 */
        left: auto;
        background: none;
        border: none;
        font-size: 2rem;
        color: #fff;
        /* 배경이 어두운색(프로필영역)이므로 흰색으로 변경 */
        cursor: pointer;
        padding: 5px;
        z-index: 20002;
        /* 메뉴보다 더 위 */
        transition: transform 0.2s;
    }

    .mobile-close-btn:active {
        transform: scale(0.9);
    }

    /* [신규 추가] 모바일 오버레이 z-index 상향 (파일 맨 아래나 적절한 곳에 추가) */
    .mobile-overlay {
        z-index: 19999 !important;
        /* 메뉴 바로 아래 */
    }

    /* [신규 추가] 모바일 메뉴 상단 프로필 카드 디자인 */
    .mobile-nav-header {
        background-color: var(--primary-color);
        /* 테마색 적용 */
        padding: 30px 20px 20px;
        color: #fff;
        display: flex;
        flex-direction: column;
        gap: 10px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    }

    .mobile-user-info {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-top: 10px;
    }

    .mobile-avatar {
        width: 48px;
        height: 48px;
        background: #fff;
        color: var(--primary-color);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 700;
        font-size: 1.2rem;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    }

    .mobile-user-text {
        display: flex;
        flex-direction: column;
    }

    .mobile-user-name {
        font-weight: 700;
        font-size: 1.1rem;
        letter-spacing: -0.5px;
    }

    .mobile-user-email {
        font-size: 0.85rem;
        opacity: 0.8;
        font-weight: 300;
    }

    /* [기존 유지] 모바일 그룹 스타일 */
    .nav-group {
        height: auto;
        flex-direction: column;
        align-items: stretch;
        border-bottom: 1px solid #eee;
        width: 100%;
        flex-shrink: 0;
        /* 높이 축소 방지 */
    }



    /* 
    .nav-group-title {
        color: #333;
        height: 50px;
        justify-content: space-between;
        font-size: 1rem;
        width: 100%;
    } 
    .nav-group-title:hover {
        background: var(--primary-color);
        color: var(--primary-color);
    } */

    /* 
    var(--primary-color)
    var(--primary-light)
    var(--accent-color)
    var(--bg-body)
    var(--bg-card)
    var(--text-main)
    var(--text-sub)    
    */


    .nav-group-title {
        color: var(--primary-light);
        height: 50px;
        justify-content: space-between;
        font-weight: bold;
        font-size: 1.1rem;
        width: 100%;
    }

    .nav-group:hover .nav-group-title {
        background: #896f67 !important;
        color: #fff;
    }


    .nav-group:hover .nav-dropdown {
        display: none;
    }

    /* 모바일 아코디언 */
    .nav-dropdown {
        position: static;
        transform: none;
        box-shadow: none;
        background: #fafafa;
        border-radius: 0;
        display: none;
        width: 100%;
    }

    /* [수정] 모바일 아코디언 표시 (우선순위 강제 적용) */
    .nav-group .nav-dropdown.show {
        display: flex !important;
    }

    .nav-item {
        padding-left: 30px;
    }

    /* [알림 드롭다운] 모바일 대응 */
    .notification-dropdown {
        width: 300px;
        right: -50px;
    }

    /* [핵심 수정] 하단 고정형 유틸리티 바 (Sticky Footer) */
    .nav-utils {
        display: flex;
        flex-direction: column;
        border-left: none;
        margin: 0;
        padding: 20px;
        /* 내부 여백 */
        width: 100%;

        /* [Magic] 남은 공간을 모두 차지하여 하단으로 밀어냄 */
        margin-top: auto;

        /* 디자인 디테일: 배경색 분리 */
        background-color: #f9f9f9;
        border-top: 1px solid #eee;
        gap: 8px;
        /* 버튼 사이 간격 */
    }

    .nav-icon-btn {
        color: #555;
        border-radius: 8px;
        /* 버튼 둥글게 */
        width: 100%;
        text-align: left;
        padding: 12px 15px;
        display: flex;
        align-items: center;
        gap: 12px;
        font-size: 1rem;
        background-color: #fff;
        /* 카드 형태 */
        border: 1px solid #eee;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
    }

    .nav-icon-btn:hover,
    .nav-icon-btn:active {
        background: #fff;
        border-color: var(--primary-color);
        color: var(--primary-color);
        font-weight: 600;
    }

    /* 로그아웃 버튼 강조 (선택 사항) */
    .nav-icon-btn.logout {
        color: var(--danger-color);
        background-color: #FFF8F8;
        border-color: #FFEBEE;
    }

    .mobile-only {
        display: inline-block;
        font-size: 0.95rem;
    }

    .mobile-overlay.show {
        display: block;
    }

    /* 카드 바디 패딩 조정 */
    .card-body {
        padding: 20px;
    }

    /* 폼 요소 스택 */
    .search-box-wrapper,
    .form-row {
        flex-direction: column;
        align-items: stretch;
    }

    .input-row {
        flex-wrap: wrap;
    }

    .form-control,
    .btn {
        width: 100%;
    }

    /* 출퇴근 조회 기간 지정 */
    #start-date,
    #end-date {
        width: 43%;
    }

    .button-group-right {
        margin-left: 0;
        margin-top: 10px;
        flex-direction: column;
    }

    /* 출퇴근조회 테이블 code 컬럼 인비저블 처리 */
    #attendance-table {
        min-width: 400px;
    }

    /* 헤더의 '코드' 컬럼 */
    #attendance-table thead th:nth-child(2) {
        display: none;
    }

    /* 바디의 employeeCode 컬럼 */
    #attendance-table tbody td:nth-child(2) {
        display: none;
    }




    /* ==========================================================================
       [모바일] 근태 캘린더 영역 초과 방지 (calendar-section)
       - 7열 그리드가 좁은 화면에서 card-body를 넘치지 않도록 패딩/크기 축소
       - 컨테이너에 overflow-x: auto로 만약의 넘침에 가로 스크롤 허용
       ========================================================================== */

    /* 0. calendar-section 카드 자체 너비 제한 + 오버플로우 차단 */
    #calendar-section {
        max-width: 100%;                    /* 뷰포트 너비 초과 방지 */
        overflow: hidden;                   /* 카드 레벨에서 넘침 차단 */
    }

    /* 1. 캘린더 card-body 패딩 축소 + 오버플로우 제어 */
    #calendar-section .card-body {
        padding: 10px 8px;                  /* 좌우 패딩 20px → 8px (가용 너비 확보) */
        overflow-x: auto;                   /* 넘침 시 가로 스크롤 허용 (안전장치) */
        -webkit-overflow-scrolling: touch;  /* iOS 부드러운 스크롤 */
    }

    /* 2. 캘린더 그리드 및 요일 헤더 너비 제한 */
    .calendar-weekdays,
    .calendar-grid {
        width: 100%;
        max-width: 100%;
        min-width: 0;           /* flex/grid 컨텍스트에서 축소 허용 */
        box-sizing: border-box;
    }

    /* 3. 캘린더 셀 크기 축소 (밀도 향상) + 오버플로우 차단 */
    .calendar-cell {
        min-height: 65px;       /* 100px → 65px */
        padding: 3px;           /* 6px → 3px */
        min-width: 0;           /* [추가] Grid 아이템이 콘텐츠 최소 너비 이하로 축소 허용 */
        overflow: hidden;       /* [추가] 셀 내부 콘텐츠 넘침 차단 */
        word-break: break-all;  /* [추가] 긴 텍스트 강제 줄바꿈 */
    }

    /* 4. 요일 헤더 패딩/폰트 축소 + 오버플로우 제어 */
    .calendar-weekdays div {
        padding: 6px 2px;       /* 10px → 6px 2px */
        font-size: 0.75rem;     /* 기본 → 0.75rem */
        min-width: 0;           /* [추가] Grid 아이템 축소 허용 */
        overflow: hidden;       /* [추가] 넘침 차단 */
    }

    /* 5. 날짜 번호 크기 축소 */
    .date-number {
        font-size: 0.8rem;      /* 1rem → 0.8rem */
        margin-bottom: 2px;     /* 4px → 2px */
        padding-left: 2px;      /* 4px → 2px */
    }

    /* 6. 날씨 위젯 크기/위치 축소 */
    .weather-icon-text {
        font-size: 0.85rem;     /* 1.1rem → 0.85rem */
    }

    .weather-widget {
        top: 2px;               /* 6px → 2px */
        right: 3px;             /* 8px → 3px */
        padding: 0 2px;         /* 1px 4px → 0 2px */
    }

    /* 7. 출퇴근 칩 오버플로우 방지 */
    .attendance-chip {
        overflow: hidden;
        max-width: 100%;        /* 부모 셀 너비 초과 방지 */
        min-width: 0;           /* [추가] flex 아이템 축소 허용 */
    }

    .attendance-chip::before {
        width: 4px;             /* 6px → 4px (도트 축소) */
        height: 4px;
    }

    .chip-name {
        font-size: 0.65rem;     /* 0.8rem → 0.65rem */
        overflow: hidden;
        text-overflow: ellipsis; /* 넘치면 말줄임(...) 표시 */
        white-space: nowrap;
        max-width: 100%;
    }

    /* 8. 공휴일 라벨 크기 축소 */
    .holiday-label {
        font-size: 0.55rem;     /* 0.7rem → 0.55rem */
        margin-left: 2px;       /* 6px → 2px */
    }

    /* 9. 캘린더 헤더(연월 네비) 모바일 레이아웃 */
    .calendar-header-flex {
        padding: 10px 12px;
        flex-direction: column;  /* 가로 → 세로 배치 */
        align-items: flex-start;
    }

    /* 10. 캘린더 툴바(필터/버튼) 모바일 최적화 */
    .calendar-toolbar {
        padding: 8px 10px;
        gap: 8px;
    }

    .minimal-select {
        font-size: 0.8rem;
        height: 34px;           /* 38px → 34px */
        padding-left: 28px !important; /* 35px → 28px */
    }

    .btn-outline {
        width: 34px;            /* 38px → 34px */
        height: 34px;
    }

    /* 근태 캘린더 */

    /* 기온은 기본 숨김, 호버 시 표시 (공간 절약) */
    .fc-weather-temp {
        display: none;
        position: absolute;
        top: 100%;
        right: 0;
        background: rgba(0, 0, 0, 0.8);
        color: #fff;
        padding: 2px 6px;
        border-radius: 4px;
        font-size: 0.7rem;
        white-space: nowrap;
        z-index: 10;
    }

    .weather-widget:hover .fc-weather-temp {
        display: block;
        /* 마우스 올리면 보임 */
    }

    .weather-temp {
        display: none;
        font-size: 0.75rem;
        font-weight: 700;
        color: #555;
        font-family: 'Pretendard', sans-serif;
    }

    .weather-widget:hover .weather-temp {
        display: block;
        /* 마우스 올리면 보임 */
    }

    /* 근태 캘린더 연월 */
    .calendar-nav h2 {
        min-width: 110px;
    }

    #btn-today {
        white-space: nowrap;
    }

    /* 급여정산 */
    #btn-prev-month-wage,
    #btn-next-month-wage {
        width: 28.5px;
        height: 32px;
    }

    #wage-month-picker {
        height: 32px;
    }

    #btn-current-month-wage {
        width: 70px;
    }

    .insight-card.total-cost-card {
        width: 332px;
    }

    .action-footer {
        flex-direction: column;
        gap: 8px;
    }

    .cost-legend {
        gap: 2px;
    }


    /* 헤더의 '코드' 컬럼 */
    #attendance-table thead th:nth-child(2) {
        display: none;
    }

    /* 바디의 employeeCode 컬럼 */
    #attendance-table tbody td:nth-child(2) {
        display: none;
    }

    /* 근무자관리 */
    #employee-table th:nth-child(1),
    #employee-table td:nth-child(1) {
        max-width: 40px;
        /* 최대 너비 제한 */
        width: 40px;
        /* 기준 너비 설정 */
    }

    #employee-table {
        min-width: 400px;
    }

    #employee-table th:nth-child(2),
    #employee-table td:nth-child(2) {
        display: none;
    }

    #employee-table th:nth-child(3),
    #employee-table td:nth-child(3) {
        max-width: 70px;
        /* 최대 너비 제한 */
        width: 70px;
        /* 기준 너비 설정 */
        white-space: nowrap;
        /* 텍스트 줄바꿈 방지 */
        overflow: hidden;
        /* 영역을 벗어나는 텍스트 숨김 */
        /* text-overflow: ellipsis; 잘린 부분에 ... 표시 */
    }

    #employee-table th:nth-child(4),
    #employee-table td:nth-child(4) {
        max-width: 70px;
        /* 최대 너비 제한 */
        width: 70px;
        /* 기준 너비 설정 */
        white-space: nowrap;
        /* 텍스트 줄바꿈 방지 */

    }

    #employee-table th:nth-child(5),
    #employee-table td:nth-child(5) {
        max-width: 80px;
        /* 최대 너비 제한 */
        width: 80px;
        /* 기준 너비 설정 */
        white-space: nowrap;
        /* 텍스트 줄바꿈 방지 */
        overflow: hidden;
        /* 영역을 벗어나는 텍스트 숨김 */
        text-overflow: ellipsis;
        /* 잘린 부분에 ... 표시 */
    }

    #btn-today-schedule {
        white-space: nowrap;
        padding: 0px 30px;
    }





    /* 일정공유 캘린더 */
    /* 1. 툴바 레이아웃: 세로 배치 (타이틀 상단, 버튼 하단) */
    /* 1. 캘린더 컨테이너: 높이 제한 및 내부 스크롤 */
    #calendar-scheduler {
        padding: 0 !important;
        background: transparent !important;
        /* [핵심] 높이 제한: 화면의 약 60%만 차지하고 나머지는 스크롤 */
        max-height: 55vh !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        /* 부드러운 스크롤 */
        /* 스크롤바 디자인 (크롬/사파리) */
        scrollbar-width: thin;
        border-bottom: 1px solid #eee;
        /* 하단 경계선 추가 */
    }

    /* 2. 툴바는 스크롤되지 않고 상단에 고정되어야 함 */
    /* 주의: 툴바는 #calendar-scheduler 외부에 있으므로 영향받지 않음.
       하지만 내부 리스트 헤더는 고정이 필요함. */

    /* 3. 리스트 뷰 디자인 (카드형 변환 유지) */
    #calendar-scheduler .fc-list-table,
    #calendar-scheduler .fc-list-table tbody,
    #calendar-scheduler .fc-list-table tr,
    #calendar-scheduler .fc-list-table td {
        display: block !important;
        width: 100% !important;
        border: none !important;
    }

    /* 4. [UX 개선] 날짜 헤더 스티키(Sticky) 효과 */
    /* 스크롤을 내려도 날짜바가 상단에 붙어있게 함 */
    #calendar-scheduler .fc-list-day-cushion {
        position: sticky !important;
        top: 0 !important;
        z-index: 10 !important;
        /* 일정보다 위에 위치 */
        background-color: #f5f5f5 !important;
        /* 배경 불투명 필수 */
        border-bottom: 1px solid #ddd !important;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
        /* 입체감 추가 */
        padding: 10px 15px !important;
        margin: 0 !important;
        /* 마진 제거하여 빈틈 없애기 */
    }

    #calendar-scheduler .fc-list-day-text {
        font-weight: 700;
        color: #333;
        font-size: 0.95rem !important;
    }

    /* 일정 아이템 (카드 스타일 - 기존 유지) */
    #calendar-scheduler .fc-list-event {
        background-color: #fff !important;
        border: 1px solid #eee !important;
        border-radius: 8px !important;
        margin: 10px 5px !important;
        /* 좌우 여백 약간 줌 */
        padding: 12px 15px !important;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
    }

    /* 빈 화면 처리 */
    #calendar-scheduler .fc-list-empty {
        height: 200px !important;
        /* 빈 화면 높이 고정 */
        background-color: transparent !important;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }






}


/* ==========================================================================
   [Mobile UX Patch] 대시보드 공간 최적화 (방문자 숨김 & 여백 축소)
   ========================================================================== */
@media (max-width: 768px) {

    /* 1. [핵심] 방문자 통계 숨김 (1번째, 2번째 카드) */
    .dashboard-stats .stat-card:nth-child(1),
    .dashboard-stats .stat-card:nth-child(2) {
        display: none !important;
    }

    /* 2. 남은 '오늘 근태' 카드 스타일 다듬기 */
    .dashboard-stats .stat-card:nth-child(3) {
        border-right: none !important;
        border-bottom: none !important;
        padding: 15px 20px !important;
        /* 높이 약간 축소 */
        background-color: #fff;
    }

    /* 3. 데모 리본 숨김 (화면 가림 방지) */
    .demo-ribbon {
        display: none !important;
    }

    /* 4. 전체 레이아웃 여백 축소 (Compact View) */
    main {
        padding-top: 15px !important;
        /* 헤더와의 간격 축소 */
    }

    .dashboard-stats {
        margin-bottom: 15px !important;
        /* 통계와 조회 카드 사이 간격 축소 */
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
        /* 그림자 부드럽게 */
    }

    /* 5. 조회 필터 내부 여백 최적화 */
    .search-box-vertical {
        padding: 15px !important;
        /* 좌우 여백 확보 */
    }

    /* 모바일에서 카드 헤더(제목) 폰트 크기 살짝 조정 */
    .card-header h2 {
        font-size: 1.05rem;
    }
}

/* 출퇴근조회 필터 영역 */
/* [신규] 입력폼 유효성 검사 에러 스타일 */
.input-error {
    border: 2px solid #D32F2F !important;
    animation: shake 0.4s ease-in-out;
    background-color: #FFEBEE !important;
}

@keyframes shake {
    0% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-5px);
    }

    50% {
        transform: translateX(5px);
    }

    75% {
        transform: translateX(-5px);
    }

    100% {
        transform: translateX(0);
    }
}

/* 출퇴근조회 필터 영역 */




/* 근태 캘린더 */

/* ==========================================================================
   [Refactoring] 캘린더 디자인 리뉴얼 (Modern & Minimal)
   ========================================================================== */

/* 1. 컨트롤 툴바 (Toolbar) */
.calendar-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #fff;
    padding: 10px 15px;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
    margin-bottom: 20px;
    border: 1px solid #f0f0f0;
}

.toolbar-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* 셀렉트 박스 디자인 (아이콘 결합) */
.select-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.select-icon {
    position: absolute;
    left: 12px;
    color: #999;
    font-size: 0.9rem;
    pointer-events: none;
}

.minimal-select {
    padding-left: 35px !important;
    /* 아이콘 공간 확보 */
    border: 1px solid #eee;
    background-color: #f9f9f9;
    font-weight: 600;
    color: #555;
    height: 38px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.minimal-select:hover {
    background-color: #fff;
    border-color: var(--primary-color);
}

/* 버튼 디자인 (Outline Style) */
.btn-outline {
    background: #fff;
    border: 1px solid #ddd;
    color: #555;
    width: 38px;
    /* 정사각형 버튼 */
    height: 38px;
    padding: 0;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    transition: all 0.2s;
}

.btn-outline:hover {
    background: #f5f5f5;
    color: var(--primary-color);
    border-color: var(--primary-color);
    transform: translateY(-1px);
}

/* 2. 캘린더 그리드 (Grid System) */
.calendar-weekdays {
    border-top: 1px solid #eee;
    background-color: #fafafa;
    color: #888;
    font-size: 0.85rem;
}

.calendar-cell {
    min-height: 100px;
    /* 높이 약간 축소로 밀도 향상 */
    padding: 6px;
    border-right: 1px solid #f5f5f5;
    /* 선을 연하게 */
    border-bottom: 1px solid #f5f5f5;
    transition: background-color 0.2s;
}

.calendar-cell:hover {
    background-color: #fafafa;
}

/* 날짜 숫자 (좌측 상단) */
.date-number {
    font-size: 1rem;
    font-weight: 500;
    color: #333;
    margin-bottom: 8px;
}

/* 3. 날씨 위젯 (Minimal Icon Only) */
.weather-widget {
    background: transparent !important;
    /* 배경 제거 */
    padding: 0;
    right: 4px;
    top: 4px;
}

.fc-weather-emoji {
    font-size: 1.2rem;
    /* 아이콘 키움 */
    filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.1));
    /* 입체감 */
    cursor: pointer;
}


/* 4. 근태 칩 (Dot Style for Mobile) */
.attendance-chip {
    background: transparent;
    border: none;
    border-radius: 4px;
    padding: 2px 0;
    margin-bottom: 1px;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* 이름 앞에 작은 점 추가 */
.attendance-chip::before {
    content: '';
    display: block;
    width: 6px;
    height: 6px;
    background-color: var(--primary-color);
    /* 테마색 점 */
    border-radius: 50%;
    flex-shrink: 0;
}

.chip-name {
    font-size: 0.8rem;
    font-weight: 500;
    color: #444;
}

.chip-time {
    display: none;
    /* 모바일에서는 시간 숨김 (너무 복잡함) -> 클릭 시 상세 모달 권장 */
}

/* PC에서는 시간 보이기 */
@media (min-width: 769px) {
    .attendance-chip {
        background: #f5f5f5;
        padding: 3px 6px;
    }

    .attendance-chip::before {
        display: none;
    }

    .chip-time {
        display: inline-block;
        font-size: 0.7rem;
        color: #888;
        margin-left: 4px;
    }
}

/* 근태 캘린더 */





/* ==========================================================================
   [신규] 캘린더 리스트 뷰 (List View Mode)
   - 모바일 환경 가독성을 위한 세로형 레이아웃
   ========================================================================== */

/* 1. 리스트 모드 컨테이너 */
.calendar-grid.mode-list {
    display: flex;
    flex-direction: column;
    border-left: none;
}

/* 리스트 모드일 때 요일 헤더 숨김 */
.calendar-weekdays.hidden-force {
    display: none !important;
}

/* 2. 리스트 아이템 (날짜 셀 변형) */
.calendar-grid.mode-list .calendar-cell {
    min-height: auto;
    /* 고정 높이 해제 */
    border-right: none;
    border-bottom: 1px solid #eee;
    padding: 15px;
    display: flex;
    flex-direction: row;
    /* 좌우 배치 */
    align-items: flex-start;
    gap: 15px;
}

/* 리스트 모드에서 '오늘' 강조 스타일 변경 */
.calendar-grid.mode-list .calendar-cell.today-cell {
    background-color: #FFF3E0;
    border: none;
    border-bottom: 1px solid #FFCC80;
    border-left: 4px solid #FF9800;
    /* 왼쪽 띠로 강조 */
}

/* 3. 날짜 영역 (왼쪽) */
.calendar-grid.mode-list .date-number {
    font-size: 1.1rem;
    width: 60px;
    /* 고정 너비 */
    flex-shrink: 0;
    margin-bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* 요일 표시 (리스트 뷰 전용) */
.list-weekday-badge {
    font-size: 0.75rem;
    font-weight: 400;
    color: #888;
    margin-top: 2px;
}

.list-weekday-badge.sun {
    color: var(--danger-color);
}

.list-weekday-badge.sat {
    color: #1976D2;
}

/* 4. 콘텐츠 영역 (오른쪽) */
.calendar-grid.mode-list .cell-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 100%;
}

/* 5. 날씨 위젯 위치 조정 (리스트 뷰) */
.calendar-grid.mode-list .weather-widget {
    position: static;
    /* 절대 위치 해제 */
    background: transparent;
    padding: 0;
    margin-bottom: 5px;
    justify-content: flex-start;
}

/*  [신규] 캘린더 리스트 뷰 (List View Mode) */


/* style.css 파일 하단에 추가 */

/* --- [신규] 수리 이력 게시판 상태 배지 --- */
.status-badge {
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 700;
    color: #fff;
    text-transform: uppercase;
}

.status-pending {
    background-color: #757575;
}

/* 대기 (회색) */
.status-inspecting {
    background-color: #FBC02D;
    color: #333;
}

/* 확인중 (노랑) */
.status-in_progress {
    background-color: #1976D2;
}

/* 작업중 (파랑) */
.status-resolved {
    background-color: #2E7D32;
}

/* 완료 (초록) */
.status-rejected {
    background-color: #D32F2F;
}

/* 반려 (빨강) */

/* [추가] 유지보수 의견 접수 상태 */
.status-scheduled {
    background-color: #F57C00;
}

/* 작업예정 (주황) */
.status-hold {
    background-color: #9E9E9E;
}

/* 보류 (회색) */

/* [추가] 구매 요청 접수 상태 */
.status-reviewing {
    background-color: #7B1FA2;
}

/* 검토중 (보라) */
.status-approved {
    background-color: #0288D1;
}

/* 구매승인 (하늘) */
.status-purchasing {
    background-color: #F57C00;
}

/* 배송중 (주황) */
.status-completed {
    background-color: #2E7D32;
}

/* 구매완료 (초록) */
.status-stock {
    background-color: #00897B;
}

/* 재고사용 (틸) */

/* [추가] 사용 설명서 카테고리 라벨 */
.manual-cat-label {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    background-color: #E3F2FD;
    color: #1565C0;
    white-space: nowrap;
}

/* --- [신규] 수직 타임라인 (Vertical Timeline) --- */
#repair-timeline-section {
    margin-top: 30px;
    border-top: 1px dashed #ccc;
    padding-top: 20px;
}

.timeline-container {
    display: flex;
    flex-direction: column;
    padding-left: 10px;
    border-left: 2px solid #eee;
    margin-left: 10px;
}

.timeline-item {
    position: relative;
    padding-left: 20px;
    padding-bottom: 20px;
}

.timeline-dot {
    position: absolute;
    left: -6px;
    top: 0;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: var(--primary-color);
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px #eee;
}

.timeline-content {
    background: #fff;
    padding: 10px 15px;
    border-radius: 8px;
    border: 1px solid #eee;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
}

.timeline-status {
    font-weight: 700;
    color: var(--primary-color);
    font-size: 0.9rem;
    margin-bottom: 4px;
}

.timeline-meta {
    font-size: 0.8rem;
    color: #888;
    display: flex;
    justify-content: space-between;
}

/* 1. 처리 이력 수정/삭제 버튼 */
.timeline-content {
    position: relative;
    /* 버튼 배치를 위한 기준점 */
    padding-right: 40px;
    /* 버튼 공간 확보 */
}

.timeline-actions {
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
    gap: 5px;
    opacity: 0;
    /* 평소에는 숨김 */
    transition: opacity 0.2s;
}

/* 타임라인 항목에 마우스를 올리면 버튼 표시 (모바일은 항상 표시 가능) */
.timeline-content:hover .timeline-actions {
    opacity: 1;
}

.btn-timeline-action {
    background: transparent;
    border: none;
    color: #999;
    cursor: pointer;
    font-size: 0.85rem;
    padding: 2px 5px;
    transition: color 0.2s;
}

.btn-timeline-action:hover {
    color: var(--primary-color);
}

.btn-timeline-action.delete:hover {
    color: var(--danger-color);
}


/* 2. 라이트박스 갤러리 (좌우 네비게이션) */
.lightbox-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(255, 255, 255, 0.15);
    color: white;
    border: none;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    font-size: 1.5rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    z-index: 2001;
    backdrop-filter: blur(2px);
}

.lightbox-nav-btn:hover {
    background-color: rgba(255, 255, 255, 0.3);
    transform: translateY(-50%) scale(1.1);
}

.lightbox-prev {
    left: 20px;
}

.lightbox-next {
    right: 20px;
}

/* 첫/마지막 이미지일 때 버튼 숨김 클래스 */
.lightbox-nav-btn.hidden {
    display: none;
}

/* 모바일 터치 영역 확보 */
.image-modal {
    touch-action: pan-y;
}

/* 가로 스와이프 허용 */


/* --- [신규] 파일 업로더 스타일 --- */
.file-drop-zone {
    border: 2px dashed #ccc;
    border-radius: 8px;
    padding: 20px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
    display: block;
    background: #fafafa;
}

.file-drop-zone:hover {
    border-color: var(--primary-color);
    background: #f0f4f8;
}

.drop-msg {
    color: #888;
    font-size: 0.9rem;
}

.file-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #fff;
    border: 1px solid #eee;
    padding: 8px 12px;
    margin-top: 5px;
    border-radius: 4px;
}

.file-item {
    /* 기존 스타일 유지하면서 align-items 확인 */
    align-items: center;
    gap: 12px;
    /* 간격 확보 */
}

.file-remove {
    color: var(--danger-color);
    cursor: pointer;
}

/* 1. 드래그 오버 시 시각적 효과 (강조) */
.file-drop-zone.drag-over {
    background-color: #e3f2fd;
    /* 연한 파란색 */
    border-color: var(--primary-color);
    border-style: solid;
    /* 점선 -> 실선 */
    transform: scale(1.02);
    /* 살짝 확대 */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* 2. 파일 리스트 아이템 레이아웃 보정 */
.file-item {
    /* 기존 스타일 유지하면서 align-items 확인 */
    align-items: center;
    gap: 12px;
    /* 간격 확보 */
}

/* 3. [신규] 이미지 썸네일 미리보기 */
.file-thumbnail {
    width: 36px;
    height: 36px;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid #ddd;
    background-color: #fff;
    flex-shrink: 0;
}

/* 4. 파일 정보 텍스트 영역 (썸네일 옆) */
.file-info {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    overflow: hidden;
}

.file-name-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.9rem;
    color: #444;
}



/* 3. Quill 에디터 높이 유동적 변경 */
.editor-container {
    display: flex;
    flex-direction: column;
    min-height: 250px;
    /* 최소 높이 확보 */
    flex: 1;
    /* 남은 공간 채우기 */
    position: relative;
    /* [추가] 업로드 진행률 오버레이의 기준점 */
}

#repair-editor {
    flex: 1;
    /* 에디터 내부 확장 */
    height: auto;
    /* 고정 높이 제거 */
}

/* ========================================
   [추가] 이미지 업로드 진행률 오버레이
   에디터 위에 반투명 배경 + 프로그레스바 표시
   ======================================== */
.upload-progress-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.85);
    /* 반투명 흰색 배경 */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 100;
    /* 에디터 위에 표시 */
    border-radius: 0 0 4px 4px;
    backdrop-filter: blur(2px);
    /* 배경 흐림 효과 */
}

.upload-progress-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 20px;
}

.upload-progress-text {
    font-size: 0.9rem;
    font-weight: 600;
    color: #555;
}

/* 프로그레스바 배경 (회색 트랙) */
.upload-progress-bar-bg {
    width: 250px;
    height: 8px;
    background: #e0e0e0;
    border-radius: 4px;
    overflow: hidden;
}

/* 프로그레스바 채움 (기본 색상 사용) */
.upload-progress-bar {
    height: 100%;
    background: var(--primary-color);
    border-radius: 4px;
    transition: width 0.2s ease;
    /* 부드러운 진행 애니메이션 */
}

/* ========================================
   [추가] 에디터 내 이미지 리사이즈 핸들 스타일
   이미지 클릭 시 모서리에 파란 네모 표시
   드래그로 크기 조절 가능
   ======================================== */

/* ========================================
   Quill 한글 폰트 드롭다운 레이블 (툴바 표시용)
   ======================================== */

/* 기본 폰트 (whitelist 바깥 = 기본 Pretendard) */
.ql-snow .ql-picker.ql-font .ql-picker-label::before,
.ql-snow .ql-picker.ql-font .ql-picker-item::before {
    content: '기본 (Pretendard)';
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="pretendard"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="pretendard"]::before {
    content: 'Pretendard';
    font-family: 'Pretendard Variable', Pretendard, sans-serif;
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="noto-sans-kr"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="noto-sans-kr"]::before {
    content: 'Noto Sans KR';
    font-family: 'Noto Sans KR', sans-serif;
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="noto-serif-kr"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="noto-serif-kr"]::before {
    content: 'Noto Serif KR';
    font-family: 'Noto Serif KR', serif;
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="nanum-square"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="nanum-square"]::before {
    content: '나눔스퀘어';
    font-family: 'NanumSquare', sans-serif;
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="maruburi"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="maruburi"]::before {
    content: '마루부리';
    font-family: 'MaruBuri', serif;
}

/* ========================================
   Quill 폰트 실제 적용 (에디터 본문 + 뷰 모달)
   ======================================== */
.ql-font-pretendard {
    font-family: 'Pretendard Variable', Pretendard, sans-serif;
}
.ql-font-noto-sans-kr {
    font-family: 'Noto Sans KR', sans-serif;
}
.ql-font-noto-serif-kr {
    font-family: 'Noto Serif KR', serif;
}
.ql-font-nanum-square {
    font-family: 'NanumSquare', sans-serif;
}
.ql-font-maruburi {
    font-family: 'MaruBuri', serif;
}

/* 폰트 드롭다운 너비 확장 (한글 레이블이 잘리지 않도록) */
.ql-snow .ql-picker.ql-font {
    width: 150px;
}

/* .ql-container에 position: relative — 리사이즈 오버레이 absolute 기준점 */
.ql-container {
    position: relative;
}

/* Quill 에디터 내부 */
.ql-editor {
    position: relative;
}

/* 선택된 이미지에 파란 테두리 표시 */
.ql-image-selected {
    outline: 2px solid var(--primary-color) !important;
    outline-offset: 2px;
    cursor: default;
}

/* 리사이즈 오버레이 (이미지 위에 겹쳐서 표시) */
.ql-image-resize-overlay {
    position: absolute;
    border: 1px dashed var(--primary-color);
    pointer-events: none;
    /* 오버레이 자체는 클릭 투과 */
    box-sizing: border-box;
    z-index: 50;
}

/* 모서리 드래그 핸들 (파란 네모) */
.ql-image-resize-handle {
    position: absolute;
    width: 10px;
    height: 10px;
    background: var(--primary-color);
    border: 1px solid #fff;
    border-radius: 2px;
    pointer-events: all;
    /* 핸들은 클릭 가능 */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    z-index: 51;
}

/* 각 모서리 위치 및 커서 */
.ql-image-resize-handle-nw {
    top: -5px;
    left: -5px;
    cursor: nw-resize;
}

.ql-image-resize-handle-ne {
    top: -5px;
    right: -5px;
    cursor: ne-resize;
}

.ql-image-resize-handle-sw {
    bottom: -5px;
    left: -5px;
    cursor: sw-resize;
}

.ql-image-resize-handle-se {
    bottom: -5px;
    right: -5px;
    cursor: se-resize;
}

/* 크기 표시 라벨 (오버레이 하단 중앙) */
.ql-image-resize-size {
    position: absolute;
    bottom: -24px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    font-size: 0.7rem;
    padding: 2px 8px;
    border-radius: 3px;
    white-space: nowrap;
    pointer-events: none;
}

/* 4. [신규] 기존 첨부파일 스타일 (파란색 배경으로 구분) */
.file-item.existing {
    background-color: #e3f2fd;
    border-color: #90caf9;
    color: #1565C0;
}

.file-item.existing .file-info i {
    color: #1565C0;
}

/* ==========================================================================
   댓글 시스템 기본 스타일 + 대댓글(답글) 스레드 지원
   ========================================================================== */

/* --- 댓글 컨테이너 --- */
.maintenance-comments {
    padding: 15px 0;
}

.maintenance-comments h3 {
    font-size: 1rem;
    margin: 0 0 12px 0;
    color: #333;
}

/* --- 댓글 목록 컨테이너 --- */
.m-comment-list {
    margin-bottom: 12px;
}

/* --- 개별 댓글 아이템 --- */
.m-comment-item {
    padding: 10px 12px;
    border-bottom: 1px solid #f0f0f0;
    position: relative;
    transition: background 0.15s;
}

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

.m-comment-item:hover {
    background: #fcfcfc;
}

/* --- 대댓글(답글) 들여쓰기 --- */
.m-comment-item.is-reply {
    margin-left: 32px;
    padding-left: 12px;
    border-left: 2px solid #e0e0e0;
    background-color: #fafafa;
}

.m-comment-item.is-reply:hover {
    background-color: #f5f5f5;
}

/* --- 댓글 헤더 (작성자 + 날짜 + 버튼들) --- */
.m-comment-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
    flex-wrap: wrap;
}

/* --- 댓글 작성자 이름 --- */
.m-comment-author {
    font-weight: bold;
    font-size: 0.9rem;
    color: #333;
}

/* --- 댓글 작성 시각 --- */
.m-comment-date {
    font-size: 0.8rem;
    color: #888;
}

/* --- @멘션 표시 (답글에서 부모 작성자 이름 표시) --- */
.m-comment-mention {
    font-size: 0.8rem;
    color: #1976d2;
    font-weight: 500;
}

/* --- 댓글 본문 --- */
.m-comment-body,
.m-comment-text {
    font-size: 0.9rem;
    color: #444;
    line-height: 1.5;
    word-break: break-word;
}

/* --- 댓글 액션 버튼 컨테이너 (답글, 삭제) --- */
.m-comment-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 4px;
}

/* --- 답글 버튼 --- */
.btn-reply-comment {
    background: none;
    border: none;
    color: #888;
    font-size: 0.8rem;
    cursor: pointer;
    padding: 2px 4px;
    transition: color 0.2s;
}

.btn-reply-comment:hover {
    color: #1976d2;
}

/* --- 삭제 버튼 --- */
.btn-delete-comment {
    background: none;
    border: none;
    color: #ccc;
    font-size: 0.8rem;
    cursor: pointer;
    padding: 2px 4px;
    margin-left: auto;
    /* 오른쪽 정렬 */
    transition: color 0.2s;
}

.btn-delete-comment:hover {
    color: #e53935;
}

/* --- 인라인 답글 입력 폼 --- */
.m-reply-form {
    display: flex;
    gap: 8px;
    margin-top: 8px;
    margin-left: 32px;
    padding: 8px 10px;
    background: #f5f5f5;
    border-radius: 6px;
    border: 1px solid #e0e0e0;
    align-items: center;
    animation: replyFormFadeIn 0.2s ease;
}

@keyframes replyFormFadeIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* --- 답글 입력창 --- */
.m-reply-input {
    flex: 1;
    padding: 6px 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 0.85rem;
    outline: none;
    background: #fff;
    transition: border-color 0.2s;
}

.m-reply-input:focus {
    border-color: #90caf9;
}

/* --- 답글 등록 버튼 --- */
.btn-save-reply {
    flex-shrink: 0;
    padding: 4px 12px;
    height: 32px;
    font-size: 0.8rem;
    background: var(--primary-color, #1976d2);
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.2s;
}

.btn-save-reply:hover {
    background: #1565c0;
}

/* --- 답글 취소 버튼 --- */
.btn-cancel-reply {
    flex-shrink: 0;
    padding: 4px 8px;
    height: 32px;
    font-size: 0.8rem;
    background: #eee;
    color: #666;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.2s;
}

.btn-cancel-reply:hover {
    background: #ddd;
}

/* =========================== 댓글 입력 폼 =========================== */
/* [수정] 댓글 입력 폼 디자인 개선 (가로 폭 확대) */
.m-comment-form {
    display: flex;
    gap: 10px;
    background: #f9f9f9;
    padding: 15px;
    border-radius: 8px;
    border: 1px solid #eee;
    align-items: center;
    /* 세로 중앙 정렬 */
}

.m-comment-input {
    flex: 1;
    /* 가로 공간 100% 차지 */
    width: 100%;
    /* Flex 아이템 너비 강제 */
    padding: 10px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 0.95rem;
    /* 폰트 크기 미세 확대 */
    outline: none;
    transition: border-color 0.2s;
    background-color: #fff;
}

/* [신규] 댓글 등록 버튼 스타일 보정 */
#btn-save-comment {
    flex-shrink: 0;
    /* 버튼 크기 줄어듦 방지 */
    height: 40px;
    /* 입력창 높이와 맞춤 */
    padding: 0 20px;
}

/* 관리자페이지 */
.logo-area h1 {
    font-size: 1.2rem;
    margin: 0;
    font-weight: 700;
    display: flex;
    align-items: center;
    /* 수직 중앙 정렬 보장 */
    gap: 8px;
    /* 아이콘과 텍스트 간격 조정 */
    color: #fff;
    /* 헤더 배경이 갈색이므로 흰색 유지 */
}


/* 브랜드 이미지 배너 스타일 (가로 꽉 채움, 세로 중앙 크롭) */
.brand-banner {
    position: relative;
    width: 100%;
    height: 170px;
    /* 이 높이만큼만 이미지가 보입니다 (조절 가능) */
    overflow: hidden;
    /* 넘치는 이미지 숨김 */
    /* border-radius: var(--radius-md); 모서리 둥글게 */
    margin-bottom: 0px;
    /* border: 1px solid var(--border-color); */
    z-index: 10;
}

.brand-banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* 비율 유지하며 가득 채우기 (핵심) */
    object-position: center 45%;
    /* 세로 위치 조정 (50%는 정중앙, 60%는 약간 아래쪽 다이어리 중심) */
    display: block;
}

/* 전체적으로 어둡게 필터 적용 */
.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 170px;
    /* background-color: rgba(0, 0, 0, 0.3); 전체적인 어두움 정도 조절 (0.0 ~ 1.0) */
    background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.6));
    z-index: 11;
}

/* 상단 헤더의 로고 아이콘 대체용 스타일 */
.header-logo-img {
    height: 24px;
    /* 헤더 높이에 맞춤 */
    width: auto;
    vertical-align: middle;
    margin-right: 5px;
    border-radius: 4px;
}

/* [신규 추가] 1. Variables & Reset 하단에 추가 (약 35행 부근) */
/* Branding Typography */
.brand-logo {
    font-family: 'Times New Roman', Times, serif;
    /* 기록(Log)의 감성을 위한 세리프 폰트 */
    font-weight: 700;
    letter-spacing: -0.5px;
    position: absolute;
    left: 50px;
    top: 17px;
    z-index: 13;
}

.text-primary {
    font-size: 2rem;
    color: #ffffff;
}

.brand-slogan {
    font-family: "Pretendard Variable", Pretendard, sans-serif;
    font-size: 1.1rem;
    font-weight: 400;
    color: #fff;
    /* color: var(--text-sub); */
    margin: 0;
    letter-spacing: -0.2px;
    position: absolute;
    left: 50px;
    top: 90px;
    text-align: left;
    z-index: 14;
}

.brand-slogan-sub {
    font-family: "Pretendard Variable", Pretendard, sans-serif;
    font-size: 1.1rem;
    font-weight: 400;
    color: #fff;
    /* color: var(--text-sub); */
    margin: 0;
    letter-spacing: -0.2px;
    position: absolute;
    left: 50px;
    top: 90px;
    z-index: 14;
}

.brand-slogan-sub {
    display: none;
}

.brand-text-overlay {
    z-index: 2;
    /* 필터보다 위에 표시 */
}

.brand-text-overlay h2,
.brand-text-overlay p {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
    /* 그림자 설정 조절 */

}



#admin-container {
    margin-top: -1px;
    /* 겹쳐진 부분이 위에 오도록 설정 (선택사항) */
    position: relative;
    z-index: 200;
}

/* 1. 모달 높이 자동 조절 (불필요한 공백 제거) */
#repair-view-modal .modal-box {
    height: auto !important;
    /* 인라인 스타일(90vh) 강제 덮어쓰기 -> 내용만큼만 높이 차지 */
    max-height: 90vh;
    /* 화면을 넘어가지 않도록 제한 */
    display: flex;
    flex-direction: column;
}

#repair-view-modal .modal-body {
    overflow: hidden;
    /* 이중 스크롤 방지 */
    display: flex;
    flex-direction: column;
    padding: 0;
    /* 내부 여백 초기화 (app.js에서 인라인으로 제어 중인 부분과 조화) */
}

/* 2. 상세 보기 내부 스크롤 영역 최적화 */
#repair-view-modal .view-scroll-container {
    flex: 1;
    overflow-y: auto;
    /* 내용이 길 때만 스크롤 생성 */
    padding: 20px;
    min-height: 150px;
    /* 최소 높이 확보 */
}

/* 3. 첨부파일 이미지 미리보기 스타일 */
.view-attachment-item {
    display: block;
    margin-top: 10px;
    text-decoration: none;
}

.view-attachment-img {
    max-width: 100%;
    /* 모바일 대응: 부모 너비 넘지 않음 */
    max-height: 400px;
    /* 너무 길어짐 방지 */
    border-radius: 8px;
    border: 1px solid #eee;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    transition: transform 0.2s;
    object-fit: contain;
    /* 비율 유지 */
    background-color: #fafafa;
}

.view-attachment-img:hover {
    transform: scale(1.01);
    border-color: var(--primary-color);
}

.view-file-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background-color: #f5f5f5;
    border-radius: 4px;
    color: #555;
    text-decoration: none;
    font-size: 0.9rem;
    margin-top: 5px;
    transition: all 0.2s;
}

.view-file-link:hover {
    background-color: #e0e0e0;
    color: #333;
}

/* ==========================================================================
   [신규] 사용 설명서 게시판 (Manual Board)
   ========================================================================== */
.manual-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
    padding: 5px;
}

.manual-card {
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 15px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: all 0.2s;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.03);
}

.manual-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
    border-color: var(--accent-color);
}

.manual-icon {
    font-size: 2.5rem;
    text-align: center;
    margin-bottom: 5px;
}

/* PDF가 첨부된 게시글용 아이콘 (빨간 PDF 아이콘) */
.manual-icon--pdf {
    color: var(--danger-color);
}

/* PDF 미첨부 게시글용 아이콘 (중립 문서 아이콘) */
.manual-icon--doc {
    color: var(--primary-color);
}

/* 이미지 첨부 게시글용 아이콘 */
.manual-icon--image {
    color: #1e88e5;
}

/* 동영상 첨부 게시글용 아이콘 */
.manual-icon--video {
    color: #8e24aa;
}

/* 외부 링크 첨부 게시글용 아이콘 */
.manual-icon--link {
    color: #00897b;
}

.manual-meta {
    font-size: 0.8rem;
    color: var(--text-sub);
    display: flex;
    justify-content: space-between;
}

.manual-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-main);
    text-align: center;
    margin: 5px 0;
    word-break: keep-all;
}

.manual-cat-badge {
    align-self: center;
    background: #EFEBE9;
    color: var(--primary-color);
    padding: 3px 8px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
}

/* 태그 한 줄 표시 */
.manual-tags-line {
    font-size: 0.75rem;
    color: var(--text-sub);
    text-align: center;
    margin-top: -4px;
}

/* ===== [수정 2026-02-13] 제품 사용 설명서 PDF 버튼 스타일 ===== */

/* 파일 정보 카드 호버 효과 */
#pdf-file-info {
    transition: box-shadow 0.3s ease;
}

#pdf-file-info:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* 버튼 컨테이너 */
#pdf-action-buttons {
    margin: 20px 0;
}

/* 미리보기 버튼 (기본 .btn .btn-primary 스타일 사용) */
#btn-preview-pdf {
    min-width: 140px;
    font-weight: 600;
}

/* 다운받기 버튼 (기본 .btn .btn-secondary 스타일 사용) */
#btn-download-pdf {
    min-width: 140px;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* PDF 컨테이너 애니메이션 */
#pdf-container {
    transition: all 0.3s ease;
}

#pdf-container.hidden {
    display: none;
}

/* 반응형: 모바일에서 버튼 세로 배치 */
@media (max-width: 600px) {
    #pdf-action-buttons {
        flex-direction: column;
    }

    #btn-preview-pdf,
    #btn-download-pdf {
        width: 100%;
    }
}

/* [기존 유지] PDF 뷰어 최적화 */
#pdf-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    min-height: 400px;
    justify-content: flex-start; /* 상단 정렬 */
    padding-top: 20px;
    overflow-x: hidden; /* 가로 스크롤 방지 */
}

.pdf-page-canvas {
    max-width: 100%;
    height: auto;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
    background: #fff;
}

.pdf-controls {
    display: flex;
    align-items: center;
}

/* [신규] PDF 캔버스 스타일 (모바일 대응) */
.pdf-page-canvas {
    max-width: 95%; /* 모바일에서 좌우 여백 확보 */
    height: auto !important; /* 비율 유지 */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    background: #fff;
    display: block;
}

/* [신규] 로딩 인디케이터 */
.pdf-loading-msg {
    color: #fff;
    font-size: 1.1rem;
    margin-top: 50px;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* =========================================
   [신규] PDF 텍스트 레이어 & 핀치 줌 스타일
   ========================================= */

/* PDF 래퍼 (캔버스 + 텍스트 레이어를 감싸는 컨테이너) */
#pdf-wrapper {
    position: relative;
    display: inline-block; /* 내용물 크기에 맞춤 */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    touch-action: none; /* 브라우저 기본 줌/스크롤 차단하고 JS로 제어 */
    transform-origin: 0 0; /* 줌 확대 기준점 */
}

/* 텍스트 레이어 (투명 텍스트) */
.textLayer {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    line-height: 1.0;
    opacity: 0.2; /* 디버깅용: 0.2, 실제 배포 시: 0 또는 아주 낮게 설정 */
    transform-origin: 0 0;
}

/* PDF.js 텍스트 레이어 필수 스타일 */
.textLayer span {
    color: transparent;
    position: absolute;
    white-space: pre;
    cursor: text;
    transform-origin: 0% 0%;
}

/* 텍스트 선택 시 하이라이트 색상 */
.textLayer ::selection {
    background: rgba(0, 0, 255, 0.3);
    color: transparent;
}

/* 핀치 줌 컨테이너 (스크롤 가능 영역) */
#pdf-container {
    overflow: auto; /* 확대 시 스크롤 허용 */
    touch-action: pan-x pan-y; /* 핀치 줌 외의 스크롤은 허용 */
    background-color: #525659;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: flex-start; /* 상단 정렬 */
}






/* ==========================================================================
   [최종 수정 V2] 일정 공유 캘린더 모바일 긴급 패치
   - FullCalendar 내부 스타일 강제 오버라이딩 (!important 사용)
   - 툴바 세로 배치 및 빈 화면 디자인 개선
   ========================================================================== */
@media (max-width: 768px) {

    /* 1. 레이아웃 여백 재조정 */
    main {
        padding-top: 10px !important;
    }

    .dashboard-stats {
        margin-bottom: 15px !important;
    }

    /* 캘린더 컨테이너: 배경 투명화 및 패딩 제거 */
    #calendar-scheduler {
        padding: 0 !important;
        background: transparent !important;
        min-height: auto !important;
    }

    /* 2. [핵심] 상단 툴바 깨짐 방지 (세로 배치) */
    #calendar-scheduler .fc-header-toolbar {
        display: flex !important;
        flex-direction: column !important;
        /* 위아래로 쌓기 */
        gap: 10px !important;
        margin-bottom: 15px !important;
        align-items: center !important;
    }

    /* 툴바 내부 그룹 (버튼들, 타이틀) 너비 및 정렬 */
    #calendar-scheduler .fc-toolbar-chunk {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        width: 100% !important;
    }

    /* 타이틀 폰트 크기 최적화 */
    #calendar-scheduler .fc-toolbar-title {
        font-size: 1.2rem !important;
        /* 폰트 줄임 */
        font-weight: 800 !important;
        color: var(--primary-color);
        text-align: center;
        white-space: nowrap;
        /* 줄바꿈 방지 */
    }

    /* 버튼 그룹 디자인 */
    #calendar-scheduler .fc-button-group {
        width: 100%;
        display: flex;
        justify-content: center;
    }

    #calendar-scheduler .fc-button {
        padding: 6px 12px !important;
        font-size: 0.85rem !important;
        flex: initial !important;
        /* 버튼 늘어짐 방지 */
    }

    /* 3. [핵심] 리스트 뷰 디자인 (카드형 변환) */

    /* 테이블 구조 해제 -> 블록 구조로 변경 */
    #calendar-scheduler .fc-list-table,
    #calendar-scheduler .fc-list-table tbody,
    #calendar-scheduler .fc-list-table tr,
    #calendar-scheduler .fc-list-table td {
        display: block !important;
        width: 100% !important;
        border: none !important;
    }

    /* 날짜 헤더 (Sticky) */
    #calendar-scheduler .fc-list-day-cushion {
        background-color: #f5f5f5 !important;
        padding: 8px 12px !important;
        border-radius: 6px !important;
        margin-top: 10px !important;
    }

    #calendar-scheduler .fc-list-day-text {
        font-weight: 700;
        color: #333;
    }

    /* 일정 아이템 (카드 스타일) */
    #calendar-scheduler .fc-list-event {
        background-color: #fff !important;
        border: 1px solid #eee !important;
        border-radius: 8px !important;
        margin-top: 5px !important;
        padding: 10px !important;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.03) !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        cursor: pointer;
    }

    /* 일정 내 시간/제목 정렬 */
    #calendar-scheduler .fc-list-event-time {
        display: inline-block !important;
        min-width: 60px;
        color: #666;
        font-size: 0.85rem;
        font-weight: 600;
    }

    #calendar-scheduler .fc-list-event-title {
        font-weight: 600;
        color: #212121;
    }

    #calendar-scheduler .fc-list-event-graphic {
        display: none !important;
        /* 기본 점 숨김 */
    }

    /* 4. [핵심] '일정 없음' 화면 디자인 (회색 박스 제거) */
    #calendar-scheduler .fc-list-empty {
        background-color: transparent !important;
        /* 배경 투명 */
        border: none !important;
        height: 250px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
    }

    #calendar-scheduler .fc-list-empty-text {
        font-size: 1rem;
        color: #999;
    }

    /* 아이콘 추가 (폰트어썸 코드 사용) */
    #calendar-scheduler .fc-list-empty-text::before {
        content: '\f073';
        /* FontAwesome Calendar Icon */
        font-family: "Font Awesome 6 Free";
        font-weight: 900;
        display: block;
        font-size: 3rem;
        margin-bottom: 15px;
        text-align: center;
        color: #e0e0e0;
    }

    /* 5. 기타 요소 숨김 */
    .search-box-vertical .divider-vertical-filter {
        display: none;
    }

    .demo-ribbon {
        display: none !important;
    }

    /* 방문자 통계 숨김 (공간 확보) */
    .dashboard-stats .stat-card:nth-child(1),
    .dashboard-stats .stat-card:nth-child(2) {
        display: none !important;
    }

    .dashboard-stats .stat-card:nth-child(3) {
        border: none !important;
        padding: 15px !important;
    }

    .fc-scrollgrid-section-body {
        width: 451px;
    }

    .fc-col-header {
        width: 450px;
    }


    #repair-write-modal .modal-box,
    #repair-view-modal .modal-box {
        width: 100%;
        height: 100%;
        max-width: 100%;
        border-radius: 0;
    }

    .admin-control-panel {
        flex-direction: column;
        gap: 10px;
        align-items: stretch !important;
    }

    .view-actions {
        display: flex;
        justify-content: flex-end;
        gap: 10px;
        margin-top: 10px;
    }



    /* [핵심 해결 1] 테이블 태그의 기본 최소 너비(600px) 초기화 */
    #repair-table {
        min-width: 0 !important;
        width: 100% !important;
        display: block !important;
        /* 테이블 속성 해제 */
    }

    #repair-table tbody {
        display: block !important;
        width: 100% !important;
    }

    /* [핵심 해결 2] 행(TR) 그리드 레이아웃 */
    #repair-table tr {
        display: grid !important;
        /* auto: 배지크기 / minmax(0, 1fr): 남은공간(줄어듬 허용) / auto: 숫자크기 */
        grid-template-columns: auto minmax(0, 1fr) auto !important;
        gap: 4px 10px;
        /* 상하 4px, 좌우 10px */
        align-items: center;

        /* 카드 디자인 */
        margin-bottom: 15px;
        border: 1px solid #eee;
        border-radius: 8px;
        padding: 12px 15px;
        background: #fff;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
        width: 100% !important;
        /* 부모 너비에 맞춤 */
        box-sizing: border-box;
        /* 패딩 포함 크기 계산 */
    }

    /* 모든 셀 초기화 */
    #repair-table td {
        display: block;
        border: none !important;
        padding: 0 !important;
        text-align: left !important;
        width: auto !important;
    }

    /* --- [1번째 줄] --- */

    /* 1. 상태 배지 (좌측) */
    #repair-table td:nth-child(1) {
        grid-row: 1;
        grid-column: 1;
        margin-right: 5px;
    }

    /* 2. 제목 (중앙 ~ 우측 끝까지) */
    #repair-table td:nth-child(2) {
        grid-row: 1;
        grid-column: 2 / 4;
        /* 2번부터 끝(4번 라인)까지 확장 */

        /* 말줄임표(...) 필수 설정 */
        min-width: 0;
        /* Flex/Grid 자식 요소 축소 허용 */
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;

        font-size: 1rem;
        font-weight: 700;
        color: #333;
    }

    /* --- [2번째 줄] --- */

    /* 3. 작성자 (좌측) */
    #repair-table td:nth-child(3) {
        grid-row: 2;
        grid-column: 1;
        font-size: 0.85rem;
        color: #666;
        margin-top: 6px;
    }

    /* 5. 날짜 (중앙) */
    #repair-table td:nth-child(5) {
        grid-row: 2;
        grid-column: 2;
        font-size: 0.8rem;
        color: #999;
        text-align: right !important;
        /* 우측 정렬하여 조회수 옆에 붙임 */
        margin-top: 6px;
    }

    /* 4. 조회수 (우측 끝) */
    #repair-table td:nth-child(4) {
        grid-row: 2;
        grid-column: 3;
        font-size: 0.8rem;
        color: #999;
        text-align: right !important;
        margin-top: 6px;
        padding-left: 8px !important;
    }

    /* 조회수 아이콘 추가 (선택사항) */
    #repair-table td:nth-child(4)::before {
        content: '\f06e';
        font-family: "Font Awesome 6 Free";
        font-weight: 900;
        margin-right: 3px;
    }

    /* 기존 THEAD 숨김 */
    #repair-table thead {
        display: none;
    }

    /* ===== 유지보수 의견 / 구매 요청 테이블 모바일 반응형 ===== */
    #maintenance-table,
    #purchase-req-table {
        min-width: 0 !important;
        width: 100% !important;
        display: block !important;
    }

    #maintenance-table tbody,
    #purchase-req-table tbody {
        display: block !important;
        width: 100% !important;
    }

    #maintenance-table tr,
    #purchase-req-table tr {
        display: grid !important;
        grid-template-columns: auto minmax(0, 1fr) auto !important;
        gap: 0 !important;
        padding: 12px 10px !important;
        border-bottom: 1px solid #eee !important;
    }

    #maintenance-table tr:hover,
    #purchase-req-table tr:hover {
        background-color: #f8f9fa;
    }

    #maintenance-table td,
    #purchase-req-table td {
        display: block;
        border: none !important;
        padding: 0 !important;
    }

    #maintenance-table td:nth-child(1),
    #purchase-req-table td:nth-child(1) {
        grid-row: 1;
        grid-column: 1;
        margin-right: 5px;
    }

    #maintenance-table td:nth-child(2),
    #purchase-req-table td:nth-child(2) {
        grid-row: 1;
        grid-column: 2 / 4;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    #maintenance-table td:nth-child(3),
    #purchase-req-table td:nth-child(3) {
        grid-row: 2;
        grid-column: 1;
        font-size: 0.85rem;
        color: #777;
        margin-top: 6px;
    }

    #maintenance-table td:nth-child(5),
    #purchase-req-table td:nth-child(5) {
        grid-row: 2;
        grid-column: 2;
        font-size: 0.8rem;
        color: #999;
        text-align: right !important;
        margin-top: 6px;
    }

    #maintenance-table td:nth-child(4),
    #purchase-req-table td:nth-child(4) {
        grid-row: 2;
        grid-column: 3;
        font-size: 0.8rem;
        color: #999;
        text-align: right !important;
        margin-top: 6px;
        padding-left: 8px !important;
    }

    #maintenance-table td:nth-child(4)::before,
    #purchase-req-table td:nth-child(4)::before {
        content: '\f06e';
        font-family: "Font Awesome 6 Free";
        font-weight: 900;
        margin-right: 3px;
    }

    #maintenance-table thead,
    #purchase-req-table thead {
        display: none;
    }

    /* ===== 물품 구매 현황 테이블 모바일 반응형 (상태 컬럼 없음) ===== */
    #purchase-status-table {
        min-width: 0 !important;
        width: 100% !important;
        display: block !important;
    }

    #purchase-status-table tbody {
        display: block !important;
        width: 100% !important;
    }

    #purchase-status-table tr {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        gap: 0 !important;
        padding: 12px 10px !important;
        border-bottom: 1px solid #eee !important;
    }

    #purchase-status-table tr:hover {
        background-color: #f8f9fa;
    }

    #purchase-status-table td {
        display: block;
        border: none !important;
        padding: 0 !important;
    }

    #purchase-status-table td:nth-child(1) {
        grid-row: 1;
        grid-column: 1 / 3;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    #purchase-status-table td:nth-child(2) {
        grid-row: 2;
        grid-column: 1;
        font-size: 0.85rem;
        color: #777;
        margin-top: 6px;
    }

    #purchase-status-table td:nth-child(4) {
        grid-row: 2;
        grid-column: 2;
        font-size: 0.8rem;
        color: #999;
        text-align: right !important;
        margin-top: 6px;
    }

    #purchase-status-table td:nth-child(3) {
        display: none;
    }

    #purchase-status-table thead {
        display: none;
    }

    /* ===== 사용 설명서 테이블 모바일 반응형 ===== */
    #manual-table {
        min-width: 0 !important;
        width: 100% !important;
        display: block !important;
    }

    #manual-table tbody {
        display: block !important;
        width: 100% !important;
    }

    #manual-table tr {
        display: grid !important;
        grid-template-columns: auto minmax(0, 1fr) auto !important;
        gap: 0 !important;
        padding: 12px 10px !important;
        border-bottom: 1px solid #eee !important;
    }

    #manual-table tr:hover {
        background-color: #f8f9fa;
    }

    #manual-table td {
        display: block;
        border: none !important;
        padding: 0 !important;
    }

    /* 1. 카테고리 (좌측) */
    #manual-table td:nth-child(1) {
        grid-row: 1;
        grid-column: 1;
        margin-right: 5px;
    }

    /* 2. 제목 (중앙~우측) */
    #manual-table td:nth-child(2) {
        grid-row: 1;
        grid-column: 2 / 4;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* 3. 작성자 (좌측 하단) */
    #manual-table td:nth-child(3) {
        grid-row: 2;
        grid-column: 1;
        font-size: 0.85rem;
        color: #777;
        margin-top: 6px;
    }

    /* 5. 날짜 (중앙 하단) */
    #manual-table td:nth-child(5) {
        grid-row: 2;
        grid-column: 2;
        font-size: 0.8rem;
        color: #999;
        text-align: right !important;
        margin-top: 6px;
    }

    /* 4. 조회수 (우측 하단) */
    #manual-table td:nth-child(4) {
        grid-row: 2;
        grid-column: 3;
        font-size: 0.8rem;
        color: #999;
        text-align: right !important;
        margin-top: 6px;
        padding-left: 8px !important;
    }

    #manual-table td:nth-child(4)::before {
        content: '\f06e';
        font-family: "Font Awesome 6 Free";
        font-weight: 900;
        margin-right: 3px;
    }

    #manual-table thead {
        display: none;
    }


    .brand-banner {
        position: relative;
    }

    .brand-logo {
        position: absolute;
        left: 30px;
        top: 17px;
    }

    .brand-banner,
    .overlay {
        height: 130px !important;
    }


    .brand-slogan {
        display: none;
    }

    .brand-slogan-sub {
        display: block !important;
    }


    .timeline-actions {
        opacity: 1;
    }


    /* 0. 대댓글(답글) 모바일 들여쓰기 축소 */
    .m-comment-item.is-reply {
        margin-left: 16px;
    }

    .m-reply-form {
        margin-left: 16px;
    }

    /* 1. 댓글 입력창 레이아웃 수정 */
    .m-comment-form {
        display: flex !important;
        flex-direction: row !important;
        /* 가로 정렬 강제 */
        gap: 8px !important;
    }

    .m-comment-input {
        flex: 1 !important;
        /* 입력창이 남은 공간 차지 */
        min-width: 0;
    }

    #btn-save-comment {
        width: auto !important;
        white-space: nowrap;
    }

    /* 2. 관리자 컨트롤 패널 (상태변경 + 수정/삭제) 레이아웃 정비 */
    .admin-control-panel {
        display: flex !important;
        flex-direction: column !important;
        /* 세로 스택 구조 */
        gap: 15px !important;
        padding: 15px !important;
        align-items: stretch !important;
        /* 가로 꽉 채우기 */
    }

    /* 2-1. 상태 변경 행 (라벨 + 드롭다운 + 변경버튼) */
    .admin-control-panel>div:first-child {
        display: flex !important;
        flex-wrap: wrap;
        /* 공간 부족시 줄바꿈 허용 */
        align-items: center !important;
        justify-content: space-between;
        /* 양끝 정렬 */
        gap: 10px;
        width: 100%;
    }

    /* "상태 변경:" 텍스트 라벨 */
    .admin-control-panel span {
        white-space: nowrap;
        /* 줄바꿈 강제 금지 */
        font-size: 0.9rem;
        margin-right: auto;
        /* 왼쪽 정렬 유지 */
    }

    /* 상태 드롭다운 */
    #view-status-select {
        flex: 1;
        /* 남은 공간 차지 */
        min-width: 100px;
        /* 최소 너비 확보 */
        height: 40px !important;
    }

    /* 변경 버튼 */
    #btn-update-status {
        height: 40px !important;
        padding: 0 15px;
    }

    /* 2-2. 하단 액션 버튼 (수정/삭제) */
    .view-actions {
        display: flex !important;
        width: 100%;
        gap: 10px;
        margin-top: 5px;
    }

    .view-actions .btn {
        flex: 1;
        /* 버튼 너비 50:50 균등 분배 */
        height: 45px;
        /* 터치하기 편한 높이 */
        font-size: 1rem;
        display: flex;
        align-items: center;
        justify-content: center;
    }








}

/* =========================================
   [신규] PDF 뷰어 스타일 개선 (2026-02-06)
   ========================================= */

/* 캔버스 그림자 및 중앙 정렬 */
.pdf-page-canvas {
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    /* 종이 느낌 그림자 */
    max-width: 100%;
    height: auto;
    margin-bottom: 20px;
    /* 페이지 간 여백 */
    background-color: #fff;
    /* 로딩 전 흰 배경 */
}

/* 로딩 스피너 컨테이너 */
.pdf-loading-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #f5f5f5;
    /* 밝은 회색 텍스트 */
    gap: 15px;
    height: 300px;
}

/* 스피너 애니메이션 */
.pdf-loading-spinner {
    font-size: 3rem;
    color: #fff;
    animation: spin 1s linear infinite;
}

/* 에러 메시지 카드 */
.pdf-error-card {
    background: #fff;
    color: #333;
    padding: 30px;
    border-radius: 8px;
    text-align: center;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    max-width: 400px;
    margin: 20px;
}

.pdf-error-icon {
    font-size: 3rem;
    color: #EF5350;
    /* Red */
    margin-bottom: 15px;
}

.pdf-error-title {
    font-size: 1.2rem;
    font-weight: 800;
    margin-bottom: 10px;
}

.pdf-error-desc {
    font-size: 0.9rem;
    color: #666;
    margin-bottom: 20px;
}

/* 페이지 넘김 버튼 스타일 개선 */
.pdf-nav-btn {
    min-width: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* ==========================================================================
   회원 등급 관리 - 등급별 색상 스타일
   ========================================================================== */

/* 등급 선택 박스 기본 스타일 */
.role-select {
    padding: 6px 12px;
    border-radius: 6px;
    border: 2px solid;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.3s ease;
    min-width: 140px;
}

.role-select:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* 시스템 관리자 - 진한 파란색 */
.role-type-admin {
    background-color: #0066cc;
    color: white;
    border-color: #0052a3;
}

.role-type-admin:hover:not(:disabled) {
    background-color: #0052a3;
    box-shadow: 0 2px 8px rgba(0, 102, 204, 0.3);
}

/* 총괄 책임자 - 주황색 */
.role-type-supervisor {
    background-color: #ff8c00;
    color: white;
    border-color: #cc7000;
}

.role-type-supervisor:hover:not(:disabled) {
    background-color: #cc7000;
    box-shadow: 0 2px 8px rgba(255, 140, 0, 0.3);
}

/* 매니저 - 보라색 */
.role-type-manager {
    background-color: #9b59b6;
    color: white;
    border-color: #7d3c98;
}

.role-type-manager:hover:not(:disabled) {
    background-color: #7d3c98;
    box-shadow: 0 2px 8px rgba(155, 89, 182, 0.3);
}

/* 스태프 - 청록색 */
.role-type-step {
    background-color: #16a085;
    color: white;
    border-color: #138d75;
}

.role-type-step:hover:not(:disabled) {
    background-color: #138d75;
    box-shadow: 0 2px 8px rgba(22, 160, 133, 0.3);
}

/* 일반 멤버 - 회색 */
.role-type-user {
    background-color: #7f8c8d;
    color: white;
    border-color: #5d6d7e;
}

.role-type-user:hover:not(:disabled) {
    background-color: #5d6d7e;
    box-shadow: 0 2px 8px rgba(127, 140, 141, 0.3);
}

/* 게스트 - 연한 회색 */
.role-type-guest {
    background-color: #bdc3c7;
    color: #2c3e50;
    border-color: #95a5a6;
}

.role-type-guest:hover:not(:disabled) {
    background-color: #95a5a6;
    box-shadow: 0 2px 8px rgba(189, 195, 199, 0.3);
}

/* 본인 표시 뱃지 */
.badge-admin {
    display: inline-block;
    padding: 4px 12px;
    background-color: #3498db;
    color: white;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 600;
}

/* ==========================================================================
   [Storage 대시보드] 모달 스타일
   ========================================================================== */

/* 요약 카드 영역 */
.storage-summary {
    display: flex;
    gap: 16px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.storage-summary-item {
    flex: 1;
    min-width: 140px;
    display: flex;
    align-items: center;
    gap: 10px;
    background: #f8f9fa;
    border-radius: 10px;
    padding: 12px 14px;
}

.storage-summary-item i {
    font-size: 1.3rem;
    flex-shrink: 0;
}

.storage-summary-label {
    font-size: 0.75rem;
    color: #888;
    display: block;
}

.storage-summary-item strong {
    font-size: 1.1rem;
    color: #333;
}

/* 폴더별 프로그레스바 */
.storage-bar-bg {
    width: 100%;
    height: 6px;
    background: #e9ecef;
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 2px;
}

.storage-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #e67e22, #f39c12);
    border-radius: 3px;
    transition: width 0.4s ease;
}

/* 폴더 테이블 code 태그 */
#storage-folder-table code {
    font-size: 0.8rem;
    color: #e67e22;
    background: #fff3e0;
    padding: 1px 5px;
    border-radius: 3px;
}

/* 반응형: 모바일 */
@media (max-width: 600px) {
    .storage-summary {
        flex-direction: column;
    }
    .storage-summary-item {
        min-width: auto;
    }
    #storage-folder-table th:nth-child(4),
    #storage-folder-table td:nth-child(4) {
        display: none;
    }
}


/* ==========================================================================
   [이미지 Lazy Loading] 플레이스홀더 + 페이드인 효과
   - applyLazyLoading() 함수에서 적용되는 CSS
   - .lazy-img: 로드 전 플레이스홀더 상태
   - .lazy-img.loaded: 로드 완료 후 페이드인
   ========================================================================== */

/* 로드 전: 회색 플레이스홀더 (깜빡임 방지) */
.lazy-img {
    background: linear-gradient(110deg, #f0f0f0 30%, #e8e8e8 50%, #f0f0f0 70%);
    background-size: 200% 100%;
    animation: lazy-shimmer 1.5s ease-in-out infinite;
    min-height: 60px;
    opacity: 0;
    transition: opacity 0.4s ease;
}

/* 로드 완료: 페이드인 */
.lazy-img.loaded {
    animation: none;
    background: transparent;
    opacity: 1;
}

/* 시머(shimmer) 애니메이션 — 로딩 진행 중 시각 피드백 */
@keyframes lazy-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}


/* ==========================================================================
   [신규 2026-02-23] 페이지네이션 스타일
   - 게시판 5개: 클라이언트 사이드 페이지 네비게이션
   - 출퇴근 기록: "더 보기" 버튼 (Firestore 커서 기반)
   ========================================================================== */

/* --- 페이지 네비게이션 --- */
.pagination-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 12px 0 4px;
    flex-wrap: wrap;
}

.pagination-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 8px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-card);
    color: var(--text-main);
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.15s ease;
}

.pagination-btn:hover:not(:disabled):not(.active) {
    background: #f5f5f5;
    border-color: var(--accent-color);
}

.pagination-btn.active {
    background: var(--primary-color);
    color: #fff;
    border-color: var(--primary-color);
    font-weight: 600;
}

.pagination-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.pagination-dots {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 32px;
    color: var(--text-sub);
    font-size: 0.85rem;
}

.pagination-info {
    margin-left: 12px;
    font-size: 0.8rem;
    color: var(--text-sub);
}

/* --- "더 보기" 버튼 (출퇴근 기록) --- */
.load-more-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 0;
}

.load-more-container.hidden {
    display: none;
}

.load-more-count {
    font-size: 0.8rem;
    color: var(--text-sub);
}

/* 모바일 페이지네이션 */
@media (max-width: 768px) {
    .pagination-container {
        gap: 2px;
    }
    .pagination-btn {
        min-width: 28px;
        height: 28px;
        font-size: 0.8rem;
    }
    .pagination-info {
        display: block;
        width: 100%;
        text-align: center;
        margin-left: 0;
        margin-top: 4px;
    }
}


/* ==========================================================================
   [소프트 삭제] 휴지통 모달 스타일
   ========================================================================== */

/* 휴지통 안내 텍스트 */
.trash-info-text {
    padding: 10px 14px;
    background: #f8f9fa;
    border-left: 3px solid var(--primary-color, #4A90D9);
    border-radius: 4px;
    font-size: 0.85rem;
    color: #555;
    margin-bottom: 15px;
    line-height: 1.5;
}

.trash-info-text i {
    color: var(--primary-color, #4A90D9);
    margin-right: 5px;
}

/* 휴지통 테이블 게시판 라벨 */
.trash-board-label {
    display: inline-block;
    padding: 3px 8px;
    background: #eef2f7;
    color: #4A90D9;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
}

/* 남은 일수 표시 */
.trash-remain {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
}

.trash-remain-normal {
    background: #eaf7ee;
    color: #27ae60;
}

.trash-remain-warning {
    background: #fef5e7;
    color: #e67e22;
}

.trash-remain-expired {
    background: #fdeaea;
    color: #e74c3c;
    animation: pulse-danger 1.5s ease-in-out infinite;
}

@keyframes pulse-danger {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

/* 복구 버튼 */
.btn-restore {
    background: #27ae60;
    color: white;
    border: none;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 0.78rem;
    cursor: pointer;
    margin-right: 4px;
    transition: background 0.2s;
}

.btn-restore:hover {
    background: #219a52;
}

.btn-restore i {
    margin-right: 3px;
}

/* 영구 삭제 버튼 */
.btn-permanent-delete {
    background: #e74c3c;
    color: white;
    border: none;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 0.78rem;
    cursor: pointer;
    transition: background 0.2s;
}

.btn-permanent-delete:hover {
    background: #c0392b;
}

.btn-permanent-delete i {
    margin-right: 3px;
}

/* 휴지통 테이블 반응형 */
@media (max-width: 768px) {
    #trash-table th:nth-child(3),
    #trash-table td:nth-child(3) {
        display: none; /* 삭제자 컬럼 숨김 */
    }
    #trash-table th:nth-child(4),
    #trash-table td:nth-child(4) {
        display: none; /* 삭제일 컬럼 숨김 */
    }
    .btn-restore,
    .btn-permanent-delete {
        padding: 3px 6px;
        font-size: 0.72rem;
    }
}

/* ==========================================================================
   [2026-02-26] 게시글 링크 공유 기능 스타일
   ========================================================================== */

/* 공유 버튼 - 모달 메타 정보 영역에 배치 */
.btn-share-post {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 12px;
    border: 1px solid #ddd;
    border-radius: 20px;
    background: #fff;
    color: #555;
    font-size: 0.82rem;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.btn-share-post:hover {
    background: var(--primary-color);
    color: #fff;
    border-color: var(--primary-color);
}

.btn-share-post i {
    font-size: 0.85rem;
}

/* 토스트 알림 컨테이너 */
#toast-container {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 99999;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    pointer-events: none;
}

/* 토스트 메시지 */
.toast-message {
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 500;
    color: #fff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    opacity: 0;
    transform: translateY(20px);
    animation: toastSlideUp 0.3s ease forwards;
    pointer-events: auto;
}

/* 토스트 타입별 배경색 */
.toast-message.success {
    background: #2ecc71;
}

.toast-message.error {
    background: #e74c3c;
}

.toast-message.info {
    background: var(--primary-color);
}

/* 토스트 소멸 애니메이션 */
.toast-message.fade-out {
    animation: toastFadeOut 0.3s ease forwards;
}

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

@keyframes toastFadeOut {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(-10px);
    }
}

/* ==========================================================================
   [2026-02-27] 공유 옵션 모달 스타일
   - 내부 링크 / 공개 링크 선택 UI
   - 만료 설정, 결과 표시, 링크 관리
   ========================================================================== */

/* 모달 오버레이 (반투명 배경) */
.share-options-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 9000;
    display: flex;
    justify-content: center;
    align-items: center;
    animation: shareModalFadeIn 0.2s ease;
}

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

/* 모달 박스 */
.share-modal-content {
    background: white;
    width: 90%;
    max-width: 440px;
    border-radius: var(--radius-lg);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    animation: shareModalSlideUp 0.25s ease;
}

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

/* 모달 헤더 */
.share-modal-header {
    background: var(--primary-color);
    color: white;
    padding: 16px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.share-modal-header h3 {
    margin: 0;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    gap: 8px;
}

.share-modal-close {
    background: none;
    border: none;
    color: white;
    font-size: 1.3rem;
    cursor: pointer;
    padding: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background 0.2s;
}

.share-modal-close:hover {
    background: rgba(255, 255, 255, 0.15);
}

/* 모달 본문 */
.share-modal-body {
    padding: 20px;
    max-height: 70vh;
    overflow-y: auto;
}

/* 공유 옵션 그룹 */
.share-option-group {
    margin-bottom: 12px;
}

/* 공유 옵션 버튼 (내부 링크) */
.share-option-btn.internal {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 14px 16px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: white;
    cursor: pointer;
    text-align: left;
    transition: all 0.2s ease;
}

.share-option-btn.internal:hover {
    border-color: var(--primary-color);
    background: #FAFAFA;
}

.share-option-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #E8EAF6;
    color: #3949AB;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.share-option-icon.public {
    background: #E8F5E9;
    color: #2E7D32;
}

.share-option-text {
    flex: 1;
}

.share-option-text strong {
    display: block;
    font-size: 0.95rem;
    color: var(--text-main);
    margin-bottom: 2px;
}

.share-option-text span {
    display: block;
    font-size: 0.8rem;
    color: var(--text-sub);
}

.share-option-btn.internal > i:last-child {
    color: #ccc;
    font-size: 0.85rem;
}

/* 구분선 */
.share-divider {
    display: flex;
    align-items: center;
    margin: 16px 0;
}

.share-divider::before,
.share-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border-color);
}

.share-divider span {
    padding: 0 12px;
    font-size: 0.82rem;
    color: var(--text-sub);
}

/* 공개 링크 영역 */
.share-public-area {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 16px;
    background: #FAFFFE;
}

.share-public-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}

/* 비밀글 경고 */
.share-warning {
    margin: 0 0 12px;
    padding: 8px 12px;
    background: #FFF3E0;
    border: 1px solid #FFE0B2;
    border-radius: 6px;
    color: #E65100;
    font-size: 0.82rem;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* 만료 설정 행 */
.share-expiry-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}

.share-expiry-row label {
    font-size: 0.85rem;
    color: var(--text-sub);
    display: flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}

.share-expiry-select {
    flex: 1;
    max-width: 140px;
    padding: 6px 10px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 0.85rem;
    color: var(--text-main);
    background: white;
    cursor: pointer;
}

/* 공개 링크 생성 버튼 */
.share-option-btn.public {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 11px 16px;
    border: none;
    border-radius: var(--radius-md);
    background: var(--success-color);
    color: white;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}

.share-option-btn.public:hover:not(:disabled) {
    background: #1B5E20;
}

.share-option-btn.public:disabled {
    background: #ccc;
    cursor: not-allowed;
}

/* 생성 결과 영역 */
.share-result-area {
    margin-top: 16px;
    padding: 14px;
    background: #F1F8E9;
    border: 1px solid #C5E1A5;
    border-radius: var(--radius-md);
}

.share-result-area label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: #2E7D32;
    margin-bottom: 8px;
}

.share-result-row {
    display: flex;
    gap: 8px;
}

.share-result-input {
    flex: 1;
    padding: 8px 10px;
    border: 1px solid #C5E1A5;
    border-radius: 6px;
    font-size: 0.82rem;
    color: var(--text-main);
    background: white;
    overflow: hidden;
    text-overflow: ellipsis;
}

.share-result-copy-btn {
    padding: 8px 14px;
    border: 1px solid #C5E1A5;
    border-radius: 6px;
    background: white;
    color: #2E7D32;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s;
}

.share-result-copy-btn:hover {
    background: #2E7D32;
    color: white;
}

/* 공유 링크 관리 */
.share-manage-toggle {
    margin-top: 16px;
    text-align: center;
}

.share-manage-btn {
    background: none;
    border: none;
    color: var(--text-sub);
    font-size: 0.82rem;
    cursor: pointer;
    padding: 6px 12px;
    transition: color 0.2s;
}

.share-manage-btn:hover {
    color: var(--primary-color);
    text-decoration: underline;
}

.share-manage-area {
    margin-top: 12px;
    border-top: 1px solid var(--border-color);
    padding-top: 12px;
}

.share-manage-area h4 {
    margin: 0 0 10px;
    font-size: 0.9rem;
    color: var(--text-main);
    display: flex;
    align-items: center;
    gap: 6px;
}

.share-link-list {
    max-height: 200px;
    overflow-y: auto;
}

/* 반응형: 모바일 */
@media (max-width: 600px) {
    .share-modal-content {
        width: 95%;
        max-height: 85vh;
    }

    .share-modal-body {
        padding: 16px;
    }

    .share-expiry-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    .share-expiry-select {
        max-width: 100%;
        width: 100%;
    }
}

/* ==========================================================================
   [2026-03-02] 시급 수정 모달 (#rate-modal) 레이아웃 개선
   - 문제: 4대보험 선택 시 12+ 입력 필드가 단일 컬럼으로 세로 나열 → 뷰포트 초과
   - 해결: 모달 확장(620px) + 스크롤 영역 + 2단 그리드 + 소제목 압축
   - JS 변경 없음 (모든 element ID 유지)
   ========================================================================== */

/* 1. 모달 박스: 너비 확장 + 높이 제한 (repair-write-modal 패턴 준수) */
#rate-modal .modal-box {
    max-width: 620px;
    max-height: 90vh;
}

/* 2. 4대보험 보험 필드 2단 그리드 — 세로 길이 44% 절감 */
.rate-insurance-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 16px;
    align-items: start;
}

/* 그리드 안의 input-group 여백 축소 */
.rate-insurance-grid .input-group {
    margin-bottom: 0;
}

/* 그리드 전체 폭 차지 (안내 텍스트 등) */
.rate-insurance-grid .rate-grid-full {
    grid-column: 1 / -1;
}

/* 3. 소제목 헤더 — 기존 인라인 스타일 대체, 더 컴팩트 */
.rate-subsection-header {
    font-size: 0.82rem;
    font-weight: 600;
    color: #5D4037;
    margin: 12px 0 8px;
    padding: 8px 0 6px;
    border-top: 1px solid #e0dbd5;
    display: flex;
    align-items: center;
    gap: 5px;
}

/* 첫 번째 소제목은 위쪽 테두리 불필요 */
.rate-subsection-header:first-child {
    border-top: none;
    margin-top: 0;
    padding-top: 0;
}

/* 4. 보험 섹션 내부 label 크기 축소 */
#rate-modal #rate-insurance-section label {
    font-size: 0.82rem;
}

/* 5. 보험 섹션 내부 안내 텍스트 */
.rate-info-text {
    font-size: 0.75rem;
    color: #999;
    margin-top: 2px;
    line-height: 1.4;
}

/* 6. 두루누리 체크박스를 소제목 헤더에 인라인 배치 */
.rate-subsection-header .rate-durunnuri-label {
    margin-left: auto;
    font-weight: 400;
    font-size: 0.82rem;
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
}

/* 7. 모바일: 1단 폴백 + 전체 화면 */
@media (max-width: 600px) {
    #rate-modal .modal-box {
        max-width: 100%;
        width: 100%;
        height: 100vh;
        max-height: 100vh;
        border-radius: 0;
    }

    .rate-insurance-grid {
        grid-template-columns: 1fr;
    }
}
}