/* =========================================
   1. 글쓰기 폼 (근태 등록) 모던 UI CSS
========================================= */
.duty-form-card { background: #ffffff; border-radius: 16px; padding: 40px; box-shadow: 0 10px 30px rgba(0,0,0,0.03); border: 1px solid #f1f5f9; font-family: 'Pretendard', sans-serif; }
.duty-form-header { text-align: center; border-bottom: 2px solid #f1f5f9; padding-bottom: 20px; margin-bottom: 30px; }
.duty-form-header h3 { font-size: 24px; font-weight: 800; color: #0f172a; margin: 0 0 10px 0; display: flex; align-items: center; justify-content: center; gap: 10px; }
.duty-form-header h3 i { color: #3b82f6; }
.duty-form-header p { font-size: 14px; color: #64748b; margin: 0; }

.duty-grid-row { display: flex; gap: 20px; margin-bottom: 24px; flex-wrap: wrap; }
.duty-grid-row.cols-3 > .duty-input-group { flex: 1 1 calc(33.333% - 14px); }
.duty-input-group { flex: 1; display: flex; flex-direction: column; }
.duty-input-group label { font-size: 13px; font-weight: 700; color: #334155; margin-bottom: 8px; }
.duty-input-group label .req { color: #ef4444; margin-left: 3px; }

.duty-control { width: 100%; padding: 14px 16px; border: 1px solid #cbd5e1; border-radius: 10px; font-size: 14px; color: #1e293b; background: #fff; transition: all 0.2s ease; box-sizing: border-box; }
.duty-control:focus { border-color: #3b82f6; box-shadow: 0 0 0 4px rgba(59,130,246,0.1); outline: none; }
select.duty-control { cursor: pointer; appearance: auto; }

/* 아이콘 포함 인풋 */
.input-with-icon { position: relative; }
.input-with-icon i { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: #94a3b8; font-size: 16px; }
.input-with-icon input { padding-left: 45px; }

/* 날짜 범위 */
.date-range-wrap { display: flex; align-items: center; gap: 10px; }
.date-range-wrap .tilde { font-weight: 600; color: #94a3b8; }

/* 폼 하단 버튼 */
.duty-form-footer { margin-top: 40px; padding-top: 20px; border-top: 2px solid #f1f5f9; display: flex; justify-content: center; gap: 15px; }
.btn-duty-cancel { padding: 14px 28px; border-radius: 10px; font-size: 15px; font-weight: 600; background: #f1f5f9; color: #475569; text-decoration: none; transition: all 0.2s; }
.btn-duty-cancel:hover { background: #e2e8f0; color: #0f172a; }
.btn-duty-submit { padding: 14px 28px; border-radius: 10px; font-size: 15px; font-weight: 700; background: linear-gradient(135deg, #3b82f6, #2563eb); color: #fff; border: none; cursor: pointer; transition: all 0.2s; box-shadow: 0 4px 12px rgba(37,99,235,0.2); }
.btn-duty-submit:hover { transform: translateY(-2px); box-shadow: 0 6px 15px rgba(37,99,235,0.35); }

/* =========================================
   2. 근무표(Roster) 및 상단 버튼 CSS
========================================= */
.roster-wrap { background:#fff; border-radius:16px; padding:30px; box-shadow:0 10px 30px rgba(0,0,0,0.03); border:1px solid #f1f5f9; font-family:'Pretendard', sans-serif; margin-bottom:40px; }
.roster-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:25px; }
.roster-header h2 { font-size:24px; font-weight:800; color:#1e293b; margin:0; }
.btn-roster-nav { padding:8px 16px; background:#f8fafc; border:1px solid #e2e8f0; border-radius:8px; color:#475569; text-decoration:none; font-size:14px; font-weight:600; transition: all 0.2s; }
.btn-roster-nav:hover { background:#f1f5f9; color:#0f172a; }

.roster-controls { display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; padding-bottom:20px; border-bottom:1px solid #e2e8f0; }
.notice-text { font-size:14px; color:#3b82f6; font-weight:600; }

/* 모던 버튼 공통 */
.btn-group .btn-modern { display:inline-block; padding:10px 18px; border-radius:8px; font-size:14px; font-weight:600; text-decoration:none; cursor:pointer; margin-left:8px; transition: all 0.2s; }
.btn-gray { background:#475569; color:#fff; border:1px solid #475569; }
.btn-primary { background:#3b82f6; color:#fff; border:1px solid #3b82f6; box-shadow: 0 4px 10px rgba(59,130,246,0.2); }
.btn-outline { background:#fff; color:#475569; border:1px solid #cbd5e1; }
.btn-group .btn-modern:hover { transform: translateY(-1px); opacity: 0.9; }
.btn-outline:hover { background:#f8fafc; color:#0f172a; border-color:#94a3b8; }

.table-responsive { width:100%; overflow-x:auto; }
.roster-table { width:100%; border-collapse:collapse; text-align:center; font-size:13px; border-top:2px solid #1e293b; border-bottom:2px solid #1e293b; }
.roster-table th, .roster-table td { border:1px solid #e2e8f0; padding:8px 2px; }
.roster-table thead th { background:#f8fafc; font-weight:700; color:#334155; padding:10px 2px; }
.roster-table .col-part { width:80px; background:#f1f5f9; }
.roster-table .d-num { font-size:15px; font-weight:800; margin-bottom:2px; }
.roster-table .d-yoil { font-size:11px; color:#94a3b8; }
.text-red .d-num, .text-red .d-yoil { color:#ef4444 !important; }
.text-blue .d-num, .text-blue .d-yoil { color:#3b82f6 !important; }

.part-header td { background:#f8fafc; font-weight:800; text-align:left; padding-left:15px; color:#0f172a; font-size:14px; border-top:2px solid #cbd5e1; }
.col-name { font-weight:700; color:#334155; background:#fff; }
.status-off { color:#ef4444; font-weight:800; } /* 휴 */
.status-work { color:#3b82f6; font-weight:700; } /* 출 */

/* =========================================
   3. 엑셀 업로드 영역 모던 UI
========================================= */
.excel-modern-wrap { display:flex; align-items:center; gap:25px; background:linear-gradient(to right, #ffffff, #f8fafc); border-radius:16px; padding:30px; border:1px solid #e2e8f0; box-shadow:0 4px 20px rgba(0,0,0,0.02); margin-bottom:40px; }
.excel-icon-circle { background:#fff; width:70px; height:70px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; box-shadow:0 8px 20px rgba(16,185,129,0.15); border:1px solid #f1f5f9; }
.excel-content { flex-grow:1; }
.excel-content h3 { margin:0 0 8px 0; font-size:18px; color:#0f172a; font-weight:800; }
.excel-content p { margin:0 0 20px 0; font-size:14px; color:#64748b; }

.excel-form-inline { display:flex; gap:12px; align-items:center; flex-wrap:wrap; background:#fff; padding:15px; border-radius:12px; border:1px solid #e2e8f0; }
.modern-file-input { padding:10px; background:#f8fafc; border:1px dashed #cbd5e1; border-radius:8px; font-size:13px; color:#475569; width:220px; cursor:pointer; }
.wage-box { display:flex; align-items:center; border:1px solid #cbd5e1; border-radius:8px; overflow:hidden; background:#fff; }
.wage-label { background:#f1f5f9; padding:10px 14px; font-size:13px; font-weight:700; color:#475569; border-right:1px solid #cbd5e1; }
.modern-wage-input { padding:10px 12px; border:none; outline:none; font-size:14px; width:120px; font-weight:600; color:#0f172a; }
.btn-excel-primary { background:#10b981; color:#fff; border:none; padding:11px 24px; border-radius:8px; font-size:14px; font-weight:700; cursor:pointer; transition:all 0.2s; box-shadow:0 4px 12px rgba(16,185,129,0.2); }
.btn-excel-primary:hover { background:#059669; transform: translateY(-1px); box-shadow:0 6px 15px rgba(16,185,129,0.3); }

.excel-result-area { margin-top:20px; display:none; background:#fff; padding:20px; border-radius:12px; border:1px solid #e2e8f0; box-shadow:0 4px 10px rgba(0,0,0,0.02); }
.calc-table { width:100%; border-collapse:collapse; font-size:13px; }
.calc-table th, .calc-table td { padding:12px 10px; border-bottom:1px solid #f1f5f9; text-align:left; }
.calc-table th { background:#f8fafc; color:#475569; font-weight:700; border-top:1px solid #e2e8f0; border-bottom:2px solid #e2e8f0; }

/* =========================================
   4. 인쇄 전용 스타일 (@media print)
========================================= */
@media print {
    #hd, #ft, #left_menu, .no-print, .bo_sch_wrap, #bo_btn_top, footer, hr { display: none !important; }
    @page { margin: 10mm; size: landscape; }
    body { background: #fff !important; padding:0; margin:0; }
    #bo_list { width: 100% !important; max-width: none !important; margin: 0 !important; }
    .roster-wrap { border: none; box-shadow: none; padding: 0; margin: 0; }
    .roster-table { width: 100%; border: 2px solid #000; zoom: 95%; }
    .roster-table th, .roster-table td { border: 1px solid #000 !important; }
    .part-header td { background-color: #e2e8f0 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .status-off { color: #ef4444 !important; }
    .status-work { color: #3b82f6 !important; }
    .text-red .d-num, .text-red .d-yoil { color: #ef4444 !important; }
    .text-blue .d-num, .text-blue .d-yoil { color: #3b82f6 !important; }
}

/* =========================================
   5. 모달 및 반응형 UI 커스텀
========================================= */

/* 클릭 가능한 달력 셀 호버 이펙트 */
.cell-clickable { cursor: pointer; transition: all 0.2s; position: relative; }
.cell-clickable:hover { background: #fef08a !important; box-shadow: inset 0 0 0 2px #facc15; font-weight: bold; }
.cell-clickable:active { transform: scale(0.95); }

/* 커스텀 팝업 모달창 (SaaS 스타일) */
.custom-modal { display: none; position: fixed; z-index: 9999; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(15, 23, 42, 0.6); backdrop-filter: blur(4px); align-items: center; justify-content: center; }
.custom-modal-content { background-color: #fff; margin: auto; padding: 0; border: 1px solid #e2e8f0; width: 90%; max-width: 500px; border-radius: 16px; box-shadow: 0 20px 40px rgba(0,0,0,0.15); animation: modalFadeIn 0.3s cubic-bezier(0.16, 1, 0.3, 1); overflow: hidden; }

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

.modal-header { display: flex; justify-content: space-between; align-items: center; background: #f8fafc; padding: 20px 25px; border-bottom: 1px solid #e2e8f0; }
.modal-header h3 { margin: 0; font-size: 18px; color: #1e293b; font-weight: 800; display: flex; align-items: center; gap: 8px; }
.modal-header h3 i { color: #3b82f6; }
.modal-close { background: transparent; border: none; font-size: 20px; color: #94a3b8; cursor: pointer; transition: color 0.2s; padding: 0; }
.modal-close:hover { color: #ef4444; }

.modal-body { padding: 25px; background: #fff; }
.form-group label { display: block; font-size: 13px; font-weight: 700; color: #475569; margin-bottom: 8px; }
.form-group-inline { display: flex; gap: 15px; }
.form-group-inline label { display: block; font-size: 13px; font-weight: 700; color: #475569; margin-bottom: 8px; }

.duty-control.bg-gray { background: #f1f5f9; color: #64748b; border-color: #e2e8f0; pointer-events: none; }

/* =========================================
   6. 직원 이름/직급 레이아웃 및 모달 가이드
========================================= */

/* 테이블 내 이름과 직급 */
.s-name { display: block; font-weight: 800; color: #1e293b; font-size: 14px; }
.s-rank { display: inline-block; margin-top: 3px; font-size: 11px; color: #475569; background: #f1f5f9; padding: 2px 6px; border-radius: 4px; border: 1px solid #e2e8f0; }

/* 직원 관리 모달 가이드 박스 */
.guide-box { background: #f0fdf4; border: 1px dashed #4ade80; padding: 12px 15px; border-radius: 8px; font-size: 13px; color: #15803d; line-height: 1.5; }

/* 모달 입력창(textarea) 높이 조정 */
textarea.duty-control { resize: vertical; min-height: 80px; font-family: 'Pretendard', sans-serif; line-height: 1.5; }

/* =========================================
   7. 직원 명단 동적 폼 (모달 확장)
========================================= */

/* 모달창 사이즈 확장 */
.modal-wide { max-width: 800px !important; }

/* 리스트 컨테이너 및 헤더 */
.staff-list-container { margin-top: 10px; border: 1px solid #e2e8f0; border-radius: 8px; overflow: hidden; }
.staff-row-header { display: grid; grid-template-columns: 1fr 1fr 1fr 1.5fr 40px; gap: 10px; background: #f8fafc; padding: 10px 15px; border-bottom: 1px solid #e2e8f0; font-size: 13px; font-weight: 700; color: #475569; text-align: center; }

/* 개별 입력 행 (Grid 정렬) */
.staff-row { display: grid; grid-template-columns: 1fr 1fr 1fr 1.5fr 40px; gap: 10px; align-items: center; padding: 10px 15px; border-bottom: 1px solid #f1f5f9; background: #fff; }
.staff-row:last-child { border-bottom: none; }
.staff-row .duty-control { padding: 8px 10px; font-size: 13px; border-radius: 6px; }

/* 행 삭제 버튼 */
.btn-del-row { background: #fee2e2; color: #ef4444; border: none; border-radius: 6px; height: 35px; width: 35px; cursor: pointer; transition: all 0.2s; display: flex; align-items: center; justify-content: center; }
.btn-del-row:hover { background: #ef4444; color: #fff; }

/* 행 추가 버튼 */
.btn-add-row { margin-top: 10px; width: 100%; background: #f8fafc; border: 1px dashed #cbd5e1; padding: 10px; border-radius: 8px; color: #64748b; font-weight: 700; cursor: pointer; transition: all 0.2s; }
.btn-add-row:hover { background: #f1f5f9; color: #3b82f6; border-color: #93c5fd; }