@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');

/* =========================================================================== */
/* ==================== [START: 1. 공통 및 전체 레이아웃] ==================== */
/* =========================================================================== */
html, body { overflow-x: hidden; }  /* 모바일에서 표/격자가 가로로 삐져나가도 화면이 안 늘어나게 (PC는 영향 없음) */
/* 📱 모바일 브라우저의 '글자 자동 확대(font boosting)' 끄기 → 내가 지정한 글씨 크기가 그대로 적용됨 (PC는 영향 없음) */
html { -webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
    font-family: 'Pretendard', 'Malgun Gothic', sans-serif;
    background-color: #f4f7f6;
    padding: 30px 20px;
    color: #333;
    margin: 0;
}
.container { 
    max-width: 1000px; 
    margin: auto; 
    background: #ffffff; 
    padding: 40px; 
    border-radius: 24px; 
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.05);
}
h1.main-title { 
    text-align: center; color: #e64980; font-size: 30px; margin-bottom: 30px; margin-top: 0; font-weight: 800; letter-spacing: -0.5px; border-bottom: 2px solid #fcc2d7; padding-bottom: 20px; 
}
.tab-menu { display: flex; justify-content: center; gap: 15px; margin-bottom: 25px; margin-top: 10px; flex-wrap: wrap; }
.tab-btn { padding: 14px 30px; font-size: 17px; font-weight: 800; border: 2px solid #ffc0cb; background-color: white; color: #ff8e8b; border-radius: 30px; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 4px 10px rgba(255, 168, 168, 0.1); }
.tab-btn:hover { background-color: #fff4e6; transform: translateY(-2px); }
.tab-btn.active { background-color: #ff8e8b; color: white; box-shadow: 0 4px 15px rgba(255, 142, 139, 0.4); border-color: #ff8e8b; }

.tool-section { display: none; animation: fadeIn 0.4s ease; }
.tool-section.active { display: block; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

.btn-container { text-align: center; margin: 20px 0 40px 0; }
.main-btn { padding: 18px 50px; background: linear-gradient(135deg, #ff8e8b, #ff726f); color: white; border: none; border-radius: 30px; font-size: 19px; font-weight: 800; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 6px 20px rgba(255, 142, 139, 0.4); letter-spacing: 0.5px; }
.main-btn:hover { transform: translateY(-3px); box-shadow: 0 8px 25px rgba(255, 142, 139, 0.5); }
.main-btn:disabled { background: #ced4da; cursor: not-allowed; transform: none; box-shadow: none; }
.copy-table-btn { padding: 14px 28px; background: #20c997; color: white; border: none; border-radius: 12px; font-size: 17px; font-weight: 800; cursor: pointer; box-shadow: 0 4px 12px rgba(32, 201, 151, 0.3); transition: all 0.2s ease; }
.copy-table-btn:hover { background: #12b886; transform: translateY(-2px); box-shadow: 0 6px 15px rgba(32, 201, 151, 0.4); }

.loader { display: none; font-size: 16px; color: #d6336c; font-weight: bold; margin-top: 15px; text-align: center; }
.api-status { font-size: 13px; color: #868e96; margin-top: 8px; font-weight: normal; text-align: center;}

.toast-container { position: fixed; bottom: 40px; left: 50%; transform: translateX(-50%); z-index: 9999; display: flex; flex-direction: column; gap: 10px; pointer-events: none; }
.toast { background: rgba(33, 37, 41, 0.95); color: #fff; padding: 16px 28px; border-radius: 30px; font-size: 15px; font-weight: 700; opacity: 0; transform: translateY(20px); transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55); box-shadow: 0 10px 25px rgba(0,0,0,0.2); text-align: center; }
.toast.show { opacity: 1; transform: translateY(0); }
.toast.success { background: rgba(32, 201, 151, 0.95); }
.toast.error { background: rgba(226, 75, 74, 0.95); }


/* =========================================================================== */
/* ==================== [START: 2. 공통 일지 입력 폼 요소] ==================== */
/* =========================================================================== */
.creator { text-align: right; color: #adb5bd; font-size: 14px; font-weight: 600; margin-bottom: 25px; padding-right: 10px; margin-top: 10px; }
.form-group { margin-bottom: 25px; }
.form-group label { display: block; font-weight: 700; margin-bottom: 10px; color: #d6336c; font-size: 16px; }
.auth-box { display: flex; align-items: center; justify-content: center; background-color: #f8f9fa; padding: 20px; border-radius: 15px; border: 2px dashed #ffc0cb; margin-bottom: 25px; }
.doc-auth-box { flex-direction: column; }
.input-row { display: flex; align-items: center; justify-content: center; margin-bottom: 15px; }
.auth-box label.title-label, .auth-box label { margin-bottom: 0; margin-right: 15px; color: #d6336c; font-size: 17px; font-weight: bold; }
.auth-box input[type="text"] { padding: 12px 15px; font-size: 16px; border: 1px solid #fcc2d7; border-radius: 10px; width: 250px; text-align: center; background-color: #fff; transition: all 0.3s ease; }
.auth-box input[type="text"]:focus { outline: none; border-color: #ff8e8b; box-shadow: 0 0 0 3px rgba(255, 142, 139, 0.2); }
.cute-warning { color: #c2255c; font-size: 14.5px; font-weight: 600; background-color: #ffe3e3; padding: 8px 18px; border-radius: 20px; margin-bottom: 20px; text-align: center; }
.notice-box { background-color: #fff4e6; border-left: 5px solid #ffa94d; padding: 20px; margin-bottom: 25px; border-radius: 12px; font-size: 15px; line-height: 1.6; }
.style-selector-container { display: flex; justify-content: center; gap: 40px; width: 100%; padding-top: 20px; border-top: 1px dashed #fcc2d7; flex-wrap: wrap;}
.style-selector { display: flex; align-items: center; }
.style-selector label.title-label { color: #4263eb; margin-right: 15px; font-size: 17px; font-weight: bold; }
.radio-group-inline { display: flex; gap: 20px; }
.radio-label { display: flex; align-items: center; font-weight: 500; cursor: pointer; font-size: 16px; margin-bottom: 0;}
.radio-label input[type="radio"] { margin-right: 8px; width: 18px; height: 18px; cursor: pointer; accent-color: #ff8e8b; }

textarea.input-textarea { width: 100%; padding: 18px; border: 1px solid #ced4da; border-radius: 12px; font-size: 15px; line-height: 1.7; resize: none; box-sizing: border-box; font-family: inherit; transition: border-color 0.3s; height: 150px;}
textarea.input-textarea:focus { outline: none; border-color: #ff8e8b; }
textarea.app-textarea { width: 100%; padding: 18px; border: 1px solid #ced4da; border-radius: 12px; font-size: 15px; line-height: 1.7; resize: none; box-sizing: border-box; font-family: inherit; transition: border-color 0.3s; }
textarea.raw-input { height: 150px; }
textarea.app-textarea:focus { outline: none; border-color: #ff8e8b; }


/* =========================================================================== */
/* ==================== [START: 3. 사회정보시스템 양식 테이블] ==================== */
/* =========================================================================== */
.ssis-table-wrap { overflow-x: auto; margin-top: 15px; }
.ssis-table { min-width: 800px; width: 100%; border-collapse: collapse; text-align: center; font-size: 14px; border: 1px solid #ced4da; background-color: #fff; table-layout: fixed; }
.ssis-table th, .ssis-table td { border: 1px solid #ced4da; padding: 0; }
.ssis-table .header-col { background-color: #EAEAEA; font-weight: bold; color: #333; padding: 8px 5px; word-break: keep-all; }
.ssis-table textarea { width: 100%; height: 100%; box-sizing: border-box; border: none; resize: none; text-align: left; padding: 10px; font-family: inherit; font-size: 14px; line-height: 1.6; outline: none; display: block; user-select: none; -webkit-user-select: none; cursor: pointer; background-color: transparent; }
.ssis-table textarea:hover { background-color: #f8f9fa; }
.ssis-table input[type="text"] { width: 100%; box-sizing: border-box; border: none; text-align: center; font-family: inherit; font-size: 14px; padding: 10px 0; outline: none; background-color: transparent; user-select: none; -webkit-user-select: none; cursor: pointer; }
.ssis-table input[type="text"]:hover { background-color: #f8f9fa; }
.ssis-table input[type="checkbox"] { width: 18px; height: 18px; cursor: pointer; accent-color: #ff8e8b; margin: auto; display: block; }

.report-header { display: flex; justify-content: space-between; align-items: center; margin-top: 45px; margin-bottom: 15px; border-bottom: 2px solid #ffc0cb; padding-bottom: 10px; }
.report-header h2 { margin: 0; font-size: 22px; color: #d6336c; font-weight: 800; border-bottom: none;}
.report-table { width: 100%; border-collapse: collapse; border: 1px solid #ced4da; table-layout: fixed; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.05); background-color: #fff;}
.report-table th, .report-table td { border: 1px solid #ced4da; padding: 0; }
.report-table th { background-color: #EAEAEA; color: #333; width: 120px; text-align: center; font-size: 14px; font-weight: bold; padding: 12px 5px; word-break: keep-all; }
.report-table input, .report-table textarea { width: 100%; box-sizing: border-box; border: none; padding: 12px; font-size: 14.5px; font-family: inherit; line-height: 1.6; outline: none; background-color: transparent; }
.report-table input:focus, .report-table textarea:focus { background-color: #f8f9fa; }
.report-table textarea { resize: vertical; display: block; }
.report-table input[type="text"], .report-table textarea { user-select: none; -webkit-user-select: none; cursor: pointer; }


/* =========================================================================== */
/* ==================== [START: 4. 건강 체력 대시보드 구조] ==================== */
/* =========================================================================== */
:root { 
    --bg: #f5f5f3; 
    --surface: #ffffff; 
    --surface2: #f0efed; 
    --border: rgba(0,0,0,0.10); 
    --border-md: rgba(0,0,0,0.18); 
    --text: #1a1a1a; 
    --text-sub: #6b6b6b; 
    --text-hint: #aaaaaa; 
    --primary: #378ADD; 
    --danger: #E24B4A; 
    --success: #1D9E75; 
    --radius-md: 8px; 
    --radius-lg: 12px; 
    --radius-xl: 16px; 
}
.health-wrapper { background: var(--bg); color: var(--text); padding: 24px 30px 40px; border-radius: 20px; box-shadow: 0 10px 30px rgba(0,0,0,0.15); }
.health-wrapper .header-wrap { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 24px; flex-wrap: wrap; gap: 16px; }
.health-wrapper .header h1 { font-size: 24px; font-weight: 800; margin-bottom: 4px; text-align: left; color: var(--text); border: none; padding: 0; }
.health-wrapper .header p { font-size: 14px; color: var(--text-sub); margin: 0; }
.health-wrapper .header-controls { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.health-wrapper .view-toggle { display: flex; background: var(--surface2); border-radius: var(--radius-md); padding: 4px; }
.health-wrapper .view-toggle button { border: none; background: transparent; padding: 6px 14px; font-size: 13px; font-weight: 500; color: var(--text-sub); border-radius: 6px; cursor: pointer; transition: all 0.2s; }
.health-wrapper .view-toggle button.active { background: var(--surface); color: var(--text); box-shadow: 0 1px 3px rgba(0,0,0,0.1); }

.btn-print, .btn-pdf { color: white; border: none; padding: 8px 16px; border-radius: var(--radius-md); font-size: 13px; font-weight: 600; cursor: pointer; transition: opacity 0.2s; display: flex; align-items: center; gap: 6px; }
.btn-print { background: #2E8B57; } .btn-pdf { background: #D85A30; } .btn-print:hover, .btn-pdf:hover { opacity: 0.8; }
.health-wrapper .top-controls { display: grid; grid-template-columns: 1fr; gap: 20px; margin-bottom: 20px; }

.card-sec { background: var(--surface); border: 1px solid var(--border-md); border-radius: var(--radius-lg); padding: 20px; box-shadow: 0 2px 8px rgba(0,0,0,0.03); }
.card-sec h3 { font-size: 16px; margin-top: 0; margin-bottom: 16px; display: flex; align-items: center; justify-content: space-between; color: var(--primary); font-weight: 700; }
.input-controls { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; background: var(--surface2); padding: 10px 14px; border-radius: var(--radius-md); }
.input-controls .left-grp { display: flex; gap: 8px; align-items: center; }
.input-controls select, .input-controls input { padding: 8px 12px; border: 1px solid var(--border-md); border-radius: 6px; font-size: 13px; outline: none; background: white;}
.input-controls input:focus { border-color: var(--primary); }

.btn-base { border: none; padding: 8px 16px; border-radius: 6px; font-size: 13px; cursor: pointer; transition: opacity 0.2s; font-weight: 600; }
.btn-apply { background: var(--primary); color: #fff; } .btn-manage { background: #fee; color: var(--danger); border: 1px solid #fcc; } .btn-reset { background: var(--surface); color: var(--text); border: 1px solid var(--border-md); }
.btn-base:hover { opacity: 0.8; }

.spreadsheet-container { width: 100%; overflow-x: auto; border: 1px solid var(--border-md); border-radius: 6px; max-height: 250px; overflow-y: auto; background: #fff; }
.spreadsheet-container table { width: 100%; border-collapse: collapse; font-size: 12px; white-space: nowrap; }
.spreadsheet-container th, .spreadsheet-container td { border: 1px solid var(--border); padding: 0; text-align: center; }
.spreadsheet-container th { background: #f8f9fa; font-weight: 600; color: var(--text-sub); padding: 10px 8px; position: sticky; top: 0; z-index: 2; }
.spreadsheet-container td { user-select: none; } 
.spreadsheet-container td[contenteditable="true"] { outline: none; padding: 8px; transition: background 0.1s; cursor: text; min-width: 60px; position: relative; }
.spreadsheet-container td[contenteditable="true"]:focus { user-select: text; background: #fff; box-shadow: inset 0 0 0 2px var(--primary); z-index: 1; }
.spreadsheet-container td.selected-cell { background-color: #e8f4ff !important; box-shadow: inset 0 0 0 1px var(--primary); z-index: 1; }

#analysis-section { display: none; }
.analysis-controls { display: flex; flex-direction: column; gap: 16px; margin-bottom: 20px; }
.checkbox-group { display: flex; flex-wrap: wrap; gap: 12px; font-size: 13px; padding: 10px; background: var(--surface2); border-radius: var(--radius-md); }
.checkbox-group label { display: flex; align-items: center; gap: 6px; cursor: pointer; color: var(--text-sub); font-weight: 500; margin: 0; }
.checkbox-group input { width: 16px; height: 16px; cursor: pointer; }

.health-wrapper .layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 16px; margin-bottom: 20px; }
@media (max-width: 768px) { .health-wrapper .layout { grid-template-columns: 1fr; } }

.sec-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.sec-label { font-size: 13px; font-weight: 700; color: var(--text-sub); }
.ctrl-btn { padding: 4px 10px; font-size: 11px; border-radius: var(--radius-md); border: 1px solid var(--border-md); background: var(--surface); color: var(--text-sub); cursor: pointer; font-weight: 600; }
.ctrl-btn:hover { background: var(--surface2); color: var(--text); }

.search-box { width: 100%; padding: 10px 12px; margin-bottom: 10px; border: 1px solid var(--border-md); border-radius: var(--radius-md); font-size: 13px; outline: none; transition: border-color 0.2s; box-sizing: border-box; }
.search-box:focus { border-color: var(--primary); }
.fixed-name { display: inline-block; width: 45px; text-align: left; }

.room-group { margin-bottom: 8px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); overflow: hidden; }
.room-header { padding: 10px 12px; font-size: 13px; font-weight: 600; background: var(--surface2); display: flex; justify-content: space-between; align-items: center; user-select: none; cursor: pointer; }
.room-header:hover { background: #e8e8e8; }
.room-content { padding: 8px; display: flex; flex-direction: column; gap: 4px; }
.room-group.collapsed .room-content { display: none; }
.arrow { font-size: 10px; transition: transform 0.2s; cursor: pointer; padding: 4px; }
.room-group.collapsed .arrow { transform: rotate(-90deg); }

.person-card { background: var(--surface); border: 1px solid var(--border); border-radius: 6px; padding: 8px 10px; cursor: grab; display: flex; align-items: center; gap: 8px; font-size: 13px; }
.person-card:hover { border-color: var(--border-md); }
.person-card.in-compare { border-color: var(--primary); background: #f0f7ff; }
.cdot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.check-mark { margin-left: auto; font-size: 12px; color: var(--primary); font-weight: bold; }

.drop-zone { border: 1.5px dashed var(--border-md); border-radius: var(--radius-lg); min-height: 100px; padding: 16px; background: var(--surface); display: flex; flex-direction: column; gap: 12px; }
.compare-room-group { background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 10px; }
.compare-room-title { font-size: 12px; font-weight: 700; color: var(--text-sub); margin-bottom: 8px; margin-left: 2px; }
.compare-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 6px; border: 1px solid var(--border-md); background: var(--surface); font-size: 13px; box-shadow: 0 1px 2px rgba(0,0,0,0.05); }
.chip input[type="checkbox"] { cursor: pointer; margin: 0; width: 14px; height: 14px; }

.metric-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.mtab { padding: 6px 14px; font-size: 13px; border-radius: 20px; border: 1px solid var(--border); background: var(--surface); color: var(--text-sub); cursor: pointer; font-weight: 500; transition: all 0.2s; }
.mtab:hover { border-color: var(--primary); color: var(--primary); }
.mtab.active { background: var(--text); color: #fff; border-color: var(--text); }

.chart-wrap { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: 24px; margin-bottom: 16px; box-shadow: 0 2px 10px rgba(0,0,0,0.02); }
.chart-canvas-wrap { position: relative; width: 100%; height: 350px; }

.data-table-wrap { width: 100%; overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); }
.data-table { width: 100%; border-collapse: collapse; font-size: 13px; text-align: center; white-space: nowrap; }
.data-table th, .data-table td { border: 1px solid var(--border); padding: 10px; }
.data-table th { background: var(--surface2); color: var(--text-sub); font-weight: 700; }

.diff-up { color: var(--danger); font-size: 11px; margin-left: 4px; font-weight: bold; }
.diff-down { color: var(--primary); font-size: 11px; margin-left: 4px; font-weight: bold; }
.diff-none { color: var(--text-hint); font-size: 11px; margin-left: 4px; }

.remove-weight-btn { color: var(--danger); cursor: pointer; font-weight: bold; border: none; background: none; padding: 4px; }
.remove-weight-btn:hover { background: #fee; border-radius: 4px; }

.modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 1000; align-items: center; justify-content: center; }
.modal-overlay.active { display: flex; }
.modal-content { background: var(--surface); width: 90%; max-width: 500px; border-radius: var(--radius-lg); padding: 24px; max-height: 85vh; overflow-y: auto; box-shadow: 0 10px 30px rgba(0,0,0,0.2); }
.modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.modal-header h2 { font-size: 18px; font-weight: 700; margin: 0; }
.close-btn { background: none; border: none; font-size: 24px; cursor: pointer; color: var(--text-hint); transition: color 0.2s; }
.close-btn:hover { color: var(--text); }
.pwd-input { width: 100%; padding: 12px; border: 1px solid var(--border-md); border-radius: 6px; margin-bottom: 12px; font-size: 14px; box-sizing: border-box; }
.btn-full { width: 100%; background: var(--text); color: #fff; padding: 12px; border: none; border-radius: 6px; cursor: pointer; font-size: 14px; font-weight: 600; }
.admin-actions { display: flex; gap: 8px; margin-bottom: 16px; }
.record-item { display: flex; align-items: center; padding: 8px 10px; border-bottom: 1px solid var(--border); font-size: 13px; gap: 10px; }
.record-item input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; margin: 0; }
.print-title { display: none; font-size: 24px; font-weight: 800; text-align: center; margin-bottom: 24px; color: #000; letter-spacing: -0.02em; border: none;}


/* =========================================================================== */
/* ==================== [START: 5. 프로그램 일지 디자인] ==================== */
/* =========================================================================== */
#tool-program .control-panel { background-color: #fff; padding: 25px; border-radius: 16px; border: 1px solid #dee2e6; box-shadow: 0 4px 12px rgba(0,0,0,0.03); margin-bottom: 30px; }
#tool-program .control-row { display: flex; align-items: center; margin-bottom: 18px; flex-wrap: wrap; gap: 10px; }
#tool-program .control-row:last-child { margin-bottom: 0; }
#tool-program .control-label { color: #d6336c; font-size: 16px; font-weight: 800; min-width: 70px; margin: 0; }

#tool-program .control-panel input[type="text"], 
#tool-program .control-panel select { 
    padding: 10px 14px; font-size: 15px; border: 1px solid #ced4da; border-radius: 8px; outline: none; box-sizing: border-box; transition: all 0.2s; background-color: #fff; color: #333; height: 42px;
}
#tool-program .control-panel input[type="text"]:focus, 
#tool-program .control-panel select:focus { border-color: #ff8e8b; box-shadow: 0 0 0 3px rgba(255, 142, 139, 0.2); background-color: #fff; }

#tool-program .radio-group { display: flex; gap: 15px; background: transparent; padding: 0; border: none; height: 42px; align-items: center; }
#tool-program .radio-group label { display: inline-flex; align-items: center; font-weight: 700; cursor: pointer; font-size: 15px; color: #495057; margin: 0; }
#tool-program .radio-group input[type="radio"] { margin-right: 6px; width: 16px; height: 16px; accent-color: #ff8e8b; cursor: pointer; }

#tool-program .member-checkboxes { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px; background: #f8f9fa; border: 1px solid #ced4da; border-radius: 10px; min-height: 40px; align-items: center; margin-top: 5px; }
#tool-program .member-checkboxes label { display: inline-flex; align-items: center; cursor: pointer; font-size: 13.5px; font-weight: 600; background: #fff; padding: 6px 12px; border-radius: 20px; border: 1px solid #e9ecef; transition: 0.2s; box-shadow: 0 2px 5px rgba(0,0,0,0.02); margin: 0; }
#tool-program .member-checkboxes label:hover { border-color: #ffc0cb; background: #fff0f3; }
#tool-program .member-checkboxes input[type="checkbox"] { margin-right: 6px; accent-color: #d6336c; cursor: pointer; width: 14px; height: 14px; }

#tool-program .rough-eval-container { margin-top: 20px; display: none; background: #fff; padding: 20px; border-radius: 12px; border: 2px dashed #ffc0cb; }
#tool-program .rough-eval-row { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
#tool-program .rough-eval-row:last-child { margin-bottom: 0; }
#tool-program .rough-eval-row .name-badge { font-weight: 800; background: #e9ecef; color: #495057; padding: 8px 12px; border-radius: 8px; width: 60px; text-align: center; font-size: 14px;}
#tool-program .rough-eval-row input { flex: 1; padding: 10px; border: 1px solid #ced4da; border-radius: 8px; outline: none; background: #f8f9fa; transition: 0.2s; font-size: 14px;}
#tool-program .rough-eval-row input:focus { border-color: #ff8e8b; background: #fff; }

#tool-program .ssis-table-wrap { overflow-x: auto; margin-top: 10px; display: flex; justify-content: center; width: 100%; }
#progTableUI { width: 100% !important; min-width: 900px !important; border-collapse: collapse; text-align: center; font-size: 15px; border: 2px solid #343a40; table-layout: fixed; background-color: #fff; }
#progTableUI th, #progTableUI td { border: 1px solid #adb5bd; padding: 0; vertical-align: middle; box-sizing: border-box; }
#progTableUI .header-col { background-color: #e9ecef; font-weight: 800; color: #343a40; padding: 14px 8px; letter-spacing: -0.3px; } 

#progTableUI input[type="text"], #progTableUI textarea { width: 100%; box-sizing: border-box; border: none; padding: 14px; font-family: inherit; font-size: 15px; outline: none; background: transparent; user-select: none; -webkit-user-select: none; cursor: default; color: #212529;}
#progTableUI input[type="text"] { text-align: center; }
#progTableUI textarea { resize: none; line-height: 1.6; display: block; }

#tool-program .img-upload-cell { position: relative; height: 260px; padding: 0; background-color: #fff; overflow: hidden; }
#tool-program .img-upload-cell input[type="file"] { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; z-index: 10; }
#tool-program .img-preview { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: #f8f9fa; border: 1px dashed #dee2e6; }
#tool-program .img-preview img { width: 100%; height: 100%; object-fit: cover; display: block; border: none; }
#tool-program .placeholder-text { color: #adb5bd; font-size: 15px; font-weight: 700; pointer-events: none; }


/* =========================================================================== */
/* ==================== [START: 6. 알림 공지창 및 에디터] ==================== */
/* =========================================================================== */
#draggablePatch { position: fixed; z-index: 20000; top: 50px; left: 50%; transform: translateX(-50%); width: 780px; max-width: 90%; background: #fff; border: 2px solid #e64980; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.25); font-family: 'Pretendard', sans-serif; display: none; }
.patch-header { background: #e64980; color: white; padding: 15px; cursor: move; display: flex; justify-content: space-between; align-items: center; border-radius: 10px 10px 0 0; font-weight: 800; font-size: 15px; }
.patch-body { padding: 25px; font-size: 15px; line-height: 1.7; color: #333; }
.patch-item { margin-bottom: 10px; padding-left: 12px; border-left: 3px solid #e64980; font-weight: 600; }
.patch-footer { padding: 15px; background: #f8f9fa; display: flex; justify-content: space-between; align-items: center; font-size: 13px; border-radius: 0 0 12px 12px; border-top: 1px solid #eee; }
.patch-close-btn { background: #333; color: #fff; border: none; padding: 8px 16px; border-radius: 5px; cursor: pointer; font-weight: bold; }

.header-actions { display: flex; align-items: center; gap: 10px; }
.edit-btn { background: rgba(255,255,255,0.2); color: white; border: 1px solid white; padding: 4px 10px; border-radius: 4px; cursor: pointer; font-size: 12px; font-weight: bold; transition: 0.2s; }
.edit-btn:hover { background: white; color: #e64980; }

#editToolbar { display: none; gap: 6px; margin-bottom: 8px; padding: 8px; background: #f8f9fa; border: 1px solid #ced4da; border-radius: 6px; flex-wrap: wrap; }
.toolbar-btn { padding: 4px 10px; font-size: 13px; font-weight: bold; cursor: pointer; border: 1px solid #adb5bd; background: #fff; color: #495057; border-radius: 4px; transition: 0.2s; }
.toolbar-btn:hover { background: #e9ecef; }

#editArea { width: 100%; min-height: 200px; box-sizing: border-box; padding: 15px; font-family: inherit; font-size: 15px; line-height: 1.7; border: 2px dashed #e64980; border-radius: 8px; overflow-y: auto; display: none; background: #fff; outline: none; }
#editArea:focus { border-color: #d6336c; box-shadow: 0 0 0 3px rgba(230,73,128,0.2); }
#editArea[placeholder]:empty:before { content: attr(placeholder); color: #adb5bd; pointer-events: none; display: block; }


/* =========================================================================== */
/* ==================== [START: 7. 서류 제출 모듈 구성] ==================== */
/* =========================================================================== */
.tab-menu-wrapper { display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px; margin-top: 10px; flex-wrap: wrap; gap: 15px; background: #ffffff; padding: 10px 25px; border-radius: 30px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); border: 1px solid #ffe3e3; }
.tab-menu { display: flex; gap: 10px; margin: 0; flex-wrap: wrap; flex: 1; justify-content: flex-start; }
.tab-btn { padding: 10px 20px; font-size: 14.5px; font-weight: 800; border: 2px solid #ffc0cb; background-color: white; color: #ff8e8b; border-radius: 30px; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 2px 5px rgba(255, 168, 168, 0.1); }
.tab-search-wrapper { display: flex; align-items: center; position: relative; }
.tab-search { padding: 10px 15px 10px 35px; border: 2px solid #ced4da; border-radius: 20px; font-size: 14px; outline: none; transition: border-color 0.3s; width: 200px; font-weight: 600; color: #495057; }
.tab-search:focus { border-color: #ff8e8b; box-shadow: 0 0 0 3px rgba(255, 142, 139, 0.2); }
.tab-search-icon { position: absolute; left: 12px; font-size: 14px; color: #adb5bd; pointer-events: none; }

#tool-submit.container { max-width: 1400px; } 
#tool-submit .main-layout { display: grid; grid-template-columns: 6fr 4fr; gap: 30px; align-items: start; }
@media (max-width: 900px) { #tool-submit .main-layout { grid-template-columns: 1fr; } }

#tool-submit .section-title { font-size: 20px; color: #d6336c; font-weight: 800; margin-bottom: 15px; display: flex; align-items: center; justify-content: space-between;}
#tool-submit .upload-section { background: #fff; padding-bottom: 10px; }
#tool-submit .name-select { padding: 10px 15px; border: 2px solid #ffc0cb; border-radius: 8px; font-size: 14px; outline: none; width: 100%; max-width: 300px; font-weight: bold; transition: border-color 0.3s; background-color: #fff; cursor: pointer; color: #495057;}
#tool-submit .name-select:focus { border-color: #ff8e8b; box-shadow: 0 0 0 3px rgba(255, 142, 139, 0.2); }
#tool-submit .name-select optgroup { font-weight: bold; color: #e64980; }
#tool-submit .file-input-wrapper { position: relative; width: 100%; height: 90px; border: 2px dashed #ffc0cb; border-radius: 12px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.3s; background: #fafafa; margin-bottom: 15px;}
#tool-submit .file-input-wrapper:hover, #tool-submit .file-input-wrapper.dragover { border-color: #e64980; background: #fff0f3; }
#tool-submit .file-input-wrapper input[type="file"] { position: absolute; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
#tool-submit .file-input-text { font-size: 14px; color: #868e96; font-weight: 600; padding: 0 15px; text-align: center; pointer-events: none; line-height: 1.5;}
#tool-submit .staged-container { background: #fff; border: 1px solid #ced4da; border-radius: 12px; padding: 15px; margin-bottom: 20px; display: none; }
#tool-submit .staged-container.active { display: block; }
#tool-submit .staged-title { font-size: 13px; font-weight: bold; color: #495057; margin-bottom: 10px; border-bottom: 1px dashed #ced4da; padding-bottom: 8px;}
#tool-submit .staged-list { list-style: none; padding: 0; margin: 0; max-height: 120px; overflow-y: auto; }
#tool-submit .staged-item { display: flex; justify-content: space-between; align-items: center; padding: 6px 10px; background: #f8f9fa; border-radius: 6px; margin-bottom: 6px; font-size: 13px; border: 1px solid #e9ecef; }
#tool-submit .staged-item-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #333; font-weight: 500; }
#tool-submit .staged-item-size { font-size: 11px; color: #adb5bd; margin-left: 10px; }
#tool-submit .staged-remove-btn { background: none; border: none; color: #e24b4a; cursor: pointer; font-weight: bold; font-size: 12px; padding: 4px 6px; border-radius: 4px; transition: 0.2s; }
#tool-submit .staged-remove-btn:hover { background: #ffe3e3; }

#tool-submit .btn-container { text-align: left; margin-bottom: 0; }
#tool-submit .divider { border-top: 2px dashed #fcc2d7; margin: 30px 0; }

#tool-submit .admin-toggle { display: flex; gap: 8px; background: #f1f3f5; padding: 4px; border-radius: 8px; }
#tool-submit .admin-toggle input[type="radio"] { display: none; }
#tool-submit .admin-toggle label { cursor: pointer; font-size: 13px; font-weight: 700; padding: 6px 12px; border-radius: 6px; color: #868e96; transition: 0.2s; user-select: none; margin:0; }
#tool-submit .admin-toggle input[type="radio"]:checked + label { background: #343a40; color: #fff; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }

#tool-submit .room-tabs { display: flex; gap: 8px; margin-bottom: 20px; flex-wrap: wrap; }
#tool-submit .room-tab-btn { padding: 8px 16px; font-size: 14px; font-weight: 800; border: 2px solid #ced4da; background-color: white; color: #868e96; border-radius: 20px; cursor: pointer; transition: all 0.3s ease; }
#tool-submit .room-tab-btn:hover { background: #f8f9fa; border-color: #adb5bd; }
#tool-submit .room-tab-btn.active { background-color: #e64980; color: white; border-color: #e64980; box-shadow: 0 4px 10px rgba(230, 73, 128, 0.3); }

#tool-submit .progress-container { background: #f8f9fa; border-radius: 12px; padding: 15px 20px; margin-bottom: 20px; display: flex; align-items: center; justify-content: space-between; border: 1px solid #e9ecef; }
#tool-submit .progress-text { font-size: 14px; font-weight: 700; color: #495057; min-width: 180px; }
#tool-submit .progress-bar-bg { flex-grow: 1; height: 10px; background: #dee2e6; border-radius: 10px; margin: 0 20px; overflow: hidden; }
#tool-submit .progress-bar-fill { height: 100%; background: linear-gradient(90deg, #20c997, #12b886); width: 0%; transition: width 0.5s ease; }

#tool-submit .table-wrapper { overflow-x: auto; border-radius: 12px; border: 1px solid #ced4da; }
#tool-submit .checklist-table { width: 100%; min-width: 800px; border-collapse: collapse; text-align: center; background: #fff; }
#tool-submit .checklist-table th, #tool-submit .checklist-table td { border: 1px solid #e9ecef; padding: 6px 4px; vertical-align: middle; }
#tool-submit .checklist-table th { background-color: #f8f9fa; color: #495057; font-size: 12px; font-weight: 800; position: sticky; top: 0; z-index: 2; word-break: keep-all; }
#tool-submit .checklist-table td.name-col { font-weight: 800; color: #343a40; background-color: #fdfdfd; font-size: 13px; position: sticky; left: 0; z-index: 1; box-shadow: 1px 0 3px rgba(0,0,0,0.05); }
#tool-submit .checklist-table tbody tr:hover { background-color: #fff0f3; }

#tool-submit .status-badge { display: inline-block; padding: 4px 8px; border-radius: 6px; font-size: 11px; font-weight: 700; }
#tool-submit .bg-none { background: #f1f3f5; color: #adb5bd; } 
#tool-submit .bg-edit { background: #ffa94d; color: #fff; }   
#tool-submit .bg-sub { background: #20c997; color: #fff; }      

#tool-submit .status-select { width: 100%; padding: 4px; border-radius: 6px; border: 1px solid #ced4da; font-size: 11px; font-weight: 700; cursor: pointer; outline: none; background: #fff; }
#tool-submit .status-select.sel-none { color: #adb5bd; }
#tool-submit .status-select.sel-edit { color: #fd7e14; border-color: #ffa94d;}
#tool-submit .status-select.sel-sub { color: #12b886; border-color: #20c997;}

#tool-submit .history-filters { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 12px; justify-content: flex-start;}
#tool-submit .history-filters input[type="radio"] { display: none; }
#tool-submit .history-filters label { cursor: pointer; font-size: 11px; font-weight: 700; padding: 4px 8px; border-radius: 20px; background: #fff; border: 1px solid #ced4da; color: #495057; transition: 0.2s; user-select: none; margin:0;}
#tool-submit .history-filters input[type="radio"]:checked + label { background: #e64980; border-color: #e64980; color: #fff; }
#tool-submit .history-search { width: 100%; padding: 8px 12px; margin-bottom: 12px; border: 1px solid #ced4da; border-radius: 8px; font-size: 13px; box-sizing: border-box; outline: none; transition: border-color 0.2s; }
#tool-submit .history-search:focus { border-color: #e64980; }

#tool-submit .history-container { background: #f8f9fa; padding: 20px; border-radius: 12px; border: 1px solid #e9ecef; margin-bottom: 20px; }
#tool-submit .history-header { font-size: 16px; margin-top: 0; margin-bottom: 12px; color: #343a40; display: flex; justify-content: space-between; align-items: center; font-weight: bold;}
#tool-submit .history-count { font-size: 12px; background: #e64980; color: white; padding: 3px 10px; border-radius: 20px; font-weight:bold; }
#tool-submit .history-list { list-style: none; padding: 0; margin: 0; height: 750px; overflow-y: auto; padding-right: 5px; } 
#tool-submit .history-list::-webkit-scrollbar { width: 6px; }
#tool-submit .history-list::-webkit-scrollbar-thumb { background-color: #adb5bd; border-radius: 10px; }
#tool-submit .history-list::-webkit-scrollbar-track { background-color: #f1f3f5; border-radius: 10px; }
#tool-submit .history-item { display: flex; justify-content: space-between; align-items: center; padding: 12px; border-bottom: 1px solid #e9ecef; background: #fff; border-radius: 8px; margin-bottom: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.02); }
#tool-submit .item-info { width: 65px; flex-shrink: 0; display: flex; flex-direction: column; }
#tool-submit .item-name { font-weight: 800; font-size: 13px; color: #495057; }
#tool-submit .item-room { font-size: 11px; color: #e64980; margin-top: 2px; }
#tool-submit .item-file-wrap { flex-grow: 1; margin: 0 10px; overflow: hidden; display: flex; flex-direction: column; }
#tool-submit .item-file { font-size: 12px; color: #495057; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#tool-submit .item-time { font-size: 11px; color: #adb5bd; margin-top: 3px; }
#tool-submit .status-badge-upload { padding: 4px 6px; border-radius: 20px; font-size: 10px; font-weight: bold; color: white; white-space: nowrap; flex-shrink: 0; }
#tool-submit .empty-msg { text-align: center; color: #adb5bd; font-size: 13px; padding: 30px 0; font-weight: 600; }

#tool-submit .download-container { background: #f8f9fa; padding: 25px; border-radius: 12px; border: 1px solid #e9ecef; }
#tool-submit .download-list { list-style: none; padding: 0; margin: 0; max-height: 400px; overflow-y: auto; padding-right: 5px; }
#tool-submit .download-list::-webkit-scrollbar { width: 6px; }
#tool-submit .download-list::-webkit-scrollbar-thumb { background-color: #adb5bd; border-radius: 10px; }
#tool-submit .download-list::-webkit-scrollbar-track { background-color: #f1f3f5; border-radius: 10px; }
#tool-submit .download-item { display: flex; justify-content: space-between; align-items: center; padding: 12px 15px; background: #fff; border-radius: 8px; margin-bottom: 10px; border: 1px solid #ced4da; box-shadow: 0 2px 4px rgba(0,0,0,0.02); }
#tool-submit .download-item span { font-weight: 800; color: #495057; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-right: 10px; }
#tool-submit .down-btn { background: #4263eb; color: #fff; padding: 8px 14px; border-radius: 6px; font-size: 12px; font-weight: bold; text-decoration: none; transition: 0.2s; cursor: pointer; border:none; white-space: nowrap;}
#tool-submit .down-btn:hover { background: #3b5bdb; }

.tab-right-container { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.patch-history-btn { width: 100px; padding: 4px 8px; font-size: 11px; font-weight: 800; color: #d6336c; background: #fff0f3; border: 1px solid #fcc2d7; border-radius: 20px; cursor: pointer; text-align: center; transition: 0.2s; box-shadow: 0 2px 4px rgba(230, 73, 128, 0.1); }
.patch-history-btn:hover { background: #ffe3e3; border-color: #e64980; transform: translateY(-1px); }
.patch-history-btn.active { background: #e64980; color: white; border-color: #e64980; }

#tool-patch .patch-version-box { background: #fff; border: 1px solid #ced4da; border-radius: 16px; padding: 25px; margin-bottom: 20px; box-shadow: 0 4px 10px rgba(0,0,0,0.02); }
#tool-patch .patch-title { font-size: 17px; font-weight: 800; color: #4263eb; border-bottom: 2px dashed #e9ecef; padding-bottom: 12px; margin-bottom: 15px; margin-top: 0; }
#tool-patch .patch-list { margin: 0; padding-left: 20px; color: #495057; line-height: 1.7; }
#tool-patch .patch-list li { margin-bottom: 6px; font-weight: 600; font-size: 14.5px; }


/* =========================================================================== */
/* ==================== [START: 8. 모니터링 교정기 스타일] ==================== */
/* =========================================================================== */
#tool-monitoring.container { max-width: 1300px !important; }
#tool-monitoring .top-actions { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; background: #f8f9fa; padding: 12px 20px; border-radius: 8px; border: 1px solid #dee2e6; }
#tool-monitoring .action-btn { padding: 10px 16px; border: none; border-radius: 6px; font-size: 14px; font-weight: 800; cursor: pointer; transition: 0.2s; margin-left: 4px; }
#tool-monitoring .btn-ai { background: #4263eb; color: #fff; box-shadow: 0 4px 10px rgba(66, 99, 235, 0.3); }
#tool-monitoring .btn-ai:hover { background: #3b5bdb; transform: translateY(-2px); }
#tool-monitoring .btn-reset { background: #868e96; color: #fff; }
#tool-monitoring .btn-reset:hover { background: #495057; }

#tool-monitoring .cell-selected { background-color: #dbeafe !important; outline: 2px solid #4263eb; outline-offset: -2px; }
#tool-monitoring table { user-select: none; width: 100%; border-collapse: collapse; margin-bottom: 20px; border: 2px solid #343a40; font-size: 14.5px; }
#tool-monitoring th, #tool-monitoring td { border: 1px solid #ced4da; padding: 8px 10px; vertical-align: middle; cursor: cell; }
#tool-monitoring th { background: #e9ecef; font-weight: 800; color: #343a40; text-align: center; white-space: nowrap; }
#tool-monitoring input, #tool-monitoring textarea, #tool-monitoring select { user-select: auto; transition: background 0.3s; }
#tool-monitoring .locked-input { background: transparent !important; outline: none !important; cursor: copy !important; color: #495057; }

#tool-monitoring .goal-lock-btn { display: inline-block; padding: 4px 8px; font-size: 11px; background: #495057; color: white; border: none; border-radius: 4px; cursor: pointer; transition: 0.2s; margin-left: 5px; vertical-align: middle; }
#tool-monitoring .goal-lock-btn:hover { background: #343a40; }
#tool-monitoring .goal-lock-btn.locked { background: #e24b4a; }

#tool-monitoring input[type="text"], #tool-monitoring input[type="number"] { width: 100%; border: none; outline: none; padding: 8px; font-size: 14.5px; background: transparent; text-align: center; color: #333; font-weight: 600; box-sizing: border-box; }
#tool-monitoring textarea.auto-expand { width: 100%; border: none; outline: none; padding: 8px; font-size: 14.5px; background: transparent; resize: none; overflow: hidden; display: block; text-align: center; color: #333; font-weight: 600; line-height: 1.5; box-sizing: border-box;}
#tool-monitoring textarea.align-left { text-align: left; }
#tool-monitoring input[type="text"]:focus, #tool-monitoring textarea:focus, #tool-monitoring input[type="number"]:focus { background: #f1f3f5; border-radius: 4px; }
#tool-monitoring textarea::placeholder { white-space: pre-wrap; font-size: 15px; line-height: 1.5; color: #adb5bd; }

#tool-monitoring .setting-bar { display: flex; gap: 15px; align-items: center; font-weight: 700; color: #d6336c; font-size: 15px;}
#tool-monitoring .quarter-radio { display: flex; gap: 6px; flex-wrap: nowrap; }
#tool-monitoring .quarter-radio label { cursor: pointer; padding: 6px 12px; background: #fff; border: 1px solid #ced4da; border-radius: 20px; font-size: 13.5px; color: #495057; white-space: nowrap; margin:0;}
#tool-monitoring .quarter-radio input[type="radio"]:checked + label { background: #e64980; color: #fff; border-color: #e64980; }
#tool-monitoring .quarter-radio input[type="radio"] { display: none; }
#tool-monitoring .check-method { display: flex; gap: 15px; justify-content: center; }
#tool-monitoring .check-method label { cursor: pointer; font-weight: 600; display: flex; align-items: center; gap: 5px; white-space: nowrap; margin:0;}
#tool-monitoring .check-method input[type="checkbox"] { width: 16px; height: 16px; accent-color: #e64980; cursor: pointer; margin:0;}

#tool-monitoring .service-th { background: #dbe4eb !important; color: #183153 !important; border-top: 2px solid #343a40 !important; border-bottom: 2px solid #adb5bd !important; }
#tool-monitoring .part-copy-btn { margin-left: 10px; padding: 4px 10px; font-size: 12px; background: #343a40; color: #fff; border: none; border-radius: 4px; cursor: pointer; vertical-align: middle; transition: 0.2s; }
#tool-monitoring .part-copy-btn:hover { background: #495057; }

#tool-monitoring .add-row-btn { padding: 8px 20px; background: #f8f9fa; border: 1px dashed #adb5bd; border-radius: 6px; font-weight: 700; cursor: pointer; color: #495057; display: block; transition: 0.2s;}
#tool-monitoring .add-row-btn:hover { background: #e9ecef; }

#tool-monitoring .scale-table th { background: #f8f9fa; }
#tool-monitoring .scale-table td.col-gubun { font-weight: 800; background: #fff; text-align: center; } 
#tool-monitoring .scale-table td.col-content { text-align: left; background: #fff; font-weight: 600; padding: 12px 15px; }
#tool-monitoring .scale-table td.radio-cell { text-align: center; vertical-align: middle; } 
#tool-monitoring .scale-table input[type="radio"] { width: 22px; height: 22px; accent-color: #e64980; cursor: pointer; margin: 0 auto; display: block; } 
#tool-monitoring .scale-label-big { font-size: 18px; font-weight: 900; color: #343a40; } 
#tool-monitoring .total-score-td { font-size: 18px; font-weight: 900; color: #e64980; text-align: center; }

#tool-monitoring .section-title { display: flex; align-items: center; font-size: 16px; font-weight: 800; color: #d6336c; margin: 20px 0 8px 0; border-bottom: 2px dashed #fcc2d7; padding-bottom: 6px; }
#tool-monitoring .text-section textarea { border: 1px solid #ced4da; border-radius: 8px; background: #fff; min-height: 80px; padding: 12px; line-height: 1.6; text-align: left; font-weight: 500; width: 100%; box-sizing: border-box;}
#tool-monitoring .unlock-btn { display: none; background: #e24b4a; margin-top: 10px; width: 100%; padding: 14px; color: white; border: none; border-radius: 8px; font-weight: bold; cursor: pointer; font-size: 15px;}


/* =========================================================================== */
/* ==================== [START: 9. 신규 체온 모니터링 디자인] ==================== */
/* =========================================================================== */
#tool-temperature { max-width: 1300px; padding: 0; background: transparent; box-shadow: none; }
#tool-temperature .temp-control-area { background: #f8f9fa; padding: 20px; border-radius: 12px; margin-bottom: 20px; border: 1px solid #e9ecef; box-shadow: 0 5px 15px rgba(0,0,0,0.05); }
#tool-temperature .temp-tab-menu { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 15px; }
#tool-temperature .temp-room-btn { padding: 10px 20px; font-size: 14.5px; font-weight: 800; border: 2px solid #ffc0cb; background-color: white; color: #ff8e8b; border-radius: 30px; cursor: pointer; transition: all 0.2s ease; }
#tool-temperature .temp-room-btn:hover { background-color: #fff4e6; }
#tool-temperature .temp-room-btn.active { background-color: #ff8e8b; color: white; border-color: #ff8e8b; box-shadow: 0 4px 10px rgba(255, 142, 139, 0.3); }

#tool-temperature .temp-controls { display: flex; gap: 15px; align-items: center; }
#tool-temperature .temp-month-input { padding: 8px 15px; border-radius: 20px; border: 2px solid #ced4da; font-size: 14px; outline: none; font-weight: 600; }
#tool-temperature .temp-print-btn { padding: 10px 25px; background: linear-gradient(135deg, #4263eb, #3b5bdb); color: white; border: none; border-radius: 30px; font-size: 15px; font-weight: 800; cursor: pointer; }

#tool-temperature .print-page { width: 100%; box-sizing: border-box; background: white; padding: 10mm 15mm; position: relative; margin-bottom: 20px; border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.05); }
#tool-temperature .header-wrap { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 10px; }
#tool-temperature .main-title { flex: 1; text-align: center; background: #fff2cc; border: 2px solid #000; padding: 10px; font-size: 22px; font-weight: 900; margin-right: 20px; line-height: 1.3; }
#tool-temperature .sign-table { border-collapse: collapse; }
#tool-temperature .sign-table th, #tool-temperature .sign-table td { border: 2px solid #000; width: 75px; text-align: center; font-size: 13px; font-weight: bold; }
#tool-temperature .sign-table td { height: 45px; }

#tool-temperature .content-table { width: 100%; border-collapse: collapse; table-layout: fixed; border: 2px solid #000; margin-bottom: 20px; }
#tool-temperature .content-table th, #tool-temperature .content-table td { border: 1px solid #000; text-align: center; padding: 1px; height: 25px; font-size: 12px; }
#tool-temperature .bg-light { background-color: #f2f2f2; font-weight: 800; }
#tool-temperature .mid-border { border-top: 2px solid #000 !important; }

#tool-temperature .col-target { background: #f9f9f9; font-weight: bold; font-size: 12px; }
#tool-temperature .col-name { font-weight: 900; font-size: 15px; }
#tool-temperature input[type="text"].temp-input { width: 100%; height: 100%; border: none; text-align: center; font-size: 13px; font-weight: 800; background: transparent; outline: none; }
#tool-temperature .page-footer { position: absolute; bottom: 5mm; right: 15mm; font-size: 13px; font-weight: bold; display: none; }


/* =========================================================================== */
/* ==================== [START: 10. 실시간 캘린더 구성] ==================== */
/* =========================================================================== */
#tool-calendar.container { max-width: 1600px; min-height: 88vh; height: auto; flex-direction: column; padding: 25px 30px; background: #fff; border-radius: 24px; box-shadow: 0 15px 35px rgba(0, 0, 0, 0.05); margin-bottom: 30px; }
#tool-calendar.container.active { display: flex !important; }

/* ── 공용/개인 모드 탭 ── */
#tool-calendar .cal-mode-tabs { display: flex; gap: 0; margin-bottom: 14px; background: #f1f3f5; border-radius: 12px; padding: 4px; width: fit-content; }
#tool-calendar .cal-mode-tab { padding: 8px 22px; border-radius: 9px; font-weight: 800; font-size: 14px; cursor: pointer; border: none; background: transparent; color: #868e96; transition: all 0.2s; white-space: nowrap; }
#tool-calendar .cal-mode-tab.active { background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,0.12); color: #4263eb; }
#tool-calendar #tab-personal.active { color: #7950f2; }

/* ── 개인 배너 ── */
#personalBanner { margin-bottom: 14px; padding: 12px 18px; border-radius: 12px; background: linear-gradient(135deg,#f3f0ff,#e5dbff); border-left: 4px solid #7950f2; font-size: 14px; color: #5f3dc4; font-weight: 700; align-items: center; gap: 8px; }

/* ── 슈퍼관리자 서브 탭 ── */
#superSubTabs { gap: 0; margin-bottom: 14px; background: #fff4e6; border-radius: 12px; padding: 4px; width: fit-content; }
#tool-calendar .super-sub-tab { padding: 7px 18px; border-radius: 9px; font-weight: 800; font-size: 13px; cursor: pointer; border: none; background: transparent; color: #c2550f; transition: all 0.2s; white-space: nowrap; }
#tool-calendar .super-sub-tab.active { background: #fff; color: #e8590c; box-shadow: 0 2px 8px rgba(0,0,0,0.12); }

/* ── 슈퍼관리자 직원 열람 드롭다운 행 ── */
#superAdminViewRow { margin-bottom: 14px; padding: 12px 18px; border-radius: 12px; background: #fff4e6; border-left: 4px solid #e8590c; font-size: 14px; color: #e8590c; font-weight: 700; align-items: center; gap: 12px; flex-wrap: wrap; }
#superAdminViewRow select { padding: 6px 12px; border-radius: 8px; border: 2px solid #ffa94d; font-weight: 800; font-size: 14px; color: #e8590c; outline: none; cursor: pointer; font-family: inherit; }

/* ── 개인 일정 색상 선택 ── */
#tool-calendar .cal-color-dot { width: 28px; height: 28px; border-radius: 50%; cursor: pointer; border: 3px solid transparent; transition: 0.15s; flex-shrink: 0; display: inline-block; }
#tool-calendar .cal-color-dot.selected { border-color: #333; transform: scale(1.18); }
#tool-calendar .cal-color-dot:hover { transform: scale(1.1); }

#tool-calendar .calendar-header { display: flex; justify-content: space-between; align-items: center; padding-bottom: 15px; border-bottom: 2px solid #ffc0cb; margin-bottom: 15px; }
#tool-calendar .header-title { color: #e64980; font-size: 26px; font-weight: 900; margin: 0; border: none !important; }
#tool-calendar .month-nav { display: flex; align-items: center; gap: 20px; }
#tool-calendar .current-month { font-size: 26px; font-weight: 800; color: #333; min-width: 160px; text-align: center; }
#tool-calendar .nav-btn { background: #fff; border: 2px solid #fcc2d7; color: #ff8e8b; font-size: 18px; width: 40px; height: 40px; border-radius: 50%; cursor: pointer; transition: 0.2s; }
#tool-calendar .nav-btn:hover { background: #fff4e6; transform: scale(1.1); }
#tool-calendar .btn-group { display: flex; gap: 10px; }
#tool-calendar .btn-action { padding: 10px 22px; border-radius: 20px; font-weight: 800; cursor: pointer; font-size: 14px; transition: 0.2s; }
#tool-calendar .btn-add { background: linear-gradient(135deg, #ff8e8b, #ff726f); color: white; border: none; box-shadow: 0 4px 12px rgba(255,142,139,0.3); }
#tool-calendar .btn-today { background: #fff; color: #ff8e8b; border: 2px solid #ff8e8b; }
#tool-calendar .btn-print { background: #495057; color: white; border: none; }

#tool-calendar .calendar-content { flex: 1; display: flex; flex-direction: column; min-height: 0; }
#tool-calendar .calendar-grid { flex: 1; display: grid; grid-template-columns: repeat(7, 1fr); grid-template-rows: 40px repeat(6, minmax(130px, auto)); background: #dee2e6; gap: 1px; border: 1px solid #dee2e6; border-radius: 12px; overflow: hidden; }
#tool-calendar .day-header { background: #f1f3f5; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 15px; color: #495057; }
#tool-calendar .day-header.sun { color: #e24b4a; }
#tool-calendar .day-header.sat { color: #4263eb; }

#tool-calendar .date-cell { background: #fff; display: flex; flex-direction: column; padding: 8px; box-sizing: border-box; overflow: hidden; position: relative; cursor: pointer; transition: background 0.1s; }
#tool-calendar .date-cell:hover { background: #fff9fa; }
#tool-calendar .date-cell.other-month { background: #f8f9fa; color: #adb5bd; cursor: default; }
#tool-calendar .date-cell.today { background: #fff4e6; border: 2px solid #ff8e8b; }
#tool-calendar .date-num-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; font-weight: 800; font-size: 16px; }
#tool-calendar .sun .date-num { color: #e24b4a; }
#tool-calendar .sat .date-num { color: #4263eb; }
#tool-calendar .holiday-tag { font-size: 11px; background: #ffe3e3; color: #e24b4a; padding: 2px 6px; border-radius: 4px; }

#tool-calendar .event-container { display: flex; flex-direction: column; gap: 4px; padding-bottom: 5px; }
#tool-calendar .event-chip { font-size: 12.5px; font-weight: 700; padding: 6px 8px; border-radius: 6px; cursor: pointer; white-space: pre-wrap; word-break: break-word; line-height: 1.4; box-shadow: 0 1px 2px rgba(0,0,0,0.05); transition: all 0.2s; border: 1px solid transparent; }
#tool-calendar .event-chip:hover { filter: brightness(0.95); transform: translateY(-1px); }

#calFilters {
    display: flex !important;
    gap: 15px !important;
    margin-bottom: 15px !important;
    flex-wrap: wrap !important;
    padding: 10px 15px !important;
    background: #f8f9fa !important; 
    border-radius: 12px !important;
    border: 1px solid #e9ecef !important;
    align-items: center !important;
}

/* =========================================================================== */
/* ==================== [START: 11. 프로그램 월 계획서 구성] ==================== */
/* =========================================================================== */
#tool-monthly-plan .inner-table { width: 100%; border-collapse: collapse; text-align: center; }
#tool-monthly-plan .inner-table th, #tool-monthly-plan .inner-table td { border: 1px solid #ced4da; padding: 0; }
#tool-monthly-plan .inner-table th { background-color: #e9ecef; font-weight: bold; padding: 10px; word-break: keep-all;}
#tool-monthly-plan .inner-table input[type="text"] { text-align: center; padding: 10px; }

#tool-monthly-plan .budget-table { width: 100%; border-collapse: collapse; text-align: center; }
#tool-monthly-plan .budget-table th, #tool-monthly-plan .budget-table td { border: 1px solid #ced4da; padding: 0; }
#tool-monthly-plan .budget-table th { background-color: #e9ecef; font-weight: bold; padding: 8px; word-break: keep-all;}
#tool-monthly-plan .budget-table td input[type="text"] { text-align: center; padding: 8px; }

#tool-monthly-plan .quick-btn { margin-top:6px; padding:4px 8px; font-size:12px; background:#e3fafc; color:#0b7285; border:1px solid #99e9f2; border-radius:6px; cursor:pointer; font-weight:bold; transition:0.2s; }
#tool-monthly-plan .quick-btn:hover { background:#c5f6fa; transform: translateY(-1px); }


/* =========================================================================== */
/* ==================== [START: 12. 파일공유센터 구성] ==================== */
/* =========================================================================== */
#tool-public-share .share-drop-zone { border: 2px dashed #20c997; border-radius: 12px; padding: 30px; text-align: center; background: #e6fcf5; cursor: pointer; transition: 0.3s; margin-bottom: 20px; }
#tool-public-share .share-drop-zone.dragover { background: #c3fae8; border-color: #0ca678; }
#tool-public-share .staged-list-wrap { background: #fff; border: 1px solid #ced4da; border-radius: 12px; padding: 15px; margin-bottom: 20px; display: none; }
#tool-public-share .staged-list-wrap.active { display: block; }

#tool-public-share .share-auth-box { display: flex; gap: 15px; background: #f8f9fa; padding: 15px 20px; border-radius: 12px; border: 1px solid #dee2e6; margin-bottom: 30px; align-items: center; justify-content: center; flex-wrap: wrap;}
#tool-public-share .share-auth-box input { padding: 10px 15px; border: 1px solid #ced4da; border-radius: 8px; font-size: 14.5px; outline: none; }
#tool-public-share .share-auth-box input:focus { border-color: #20c997; box-shadow: 0 0 0 3px rgba(32, 201, 151, 0.2); }

#tool-public-share .category-filters { display: flex; gap: 8px; margin-bottom: 15px; flex-wrap: wrap; }
#tool-public-share .share-cat-btn { padding: 8px 18px; font-size: 14px; font-weight: 800; border: 1px solid #ced4da; background: #fff; color: #495057; border-radius: 20px; cursor: pointer; transition: 0.2s; box-shadow: 0 2px 4px rgba(0,0,0,0.02); }
#tool-public-share .share-cat-btn:hover { background: #f1f3f5; }
#tool-public-share .share-cat-btn.active { background: #20c997; color: white; border-color: #20c997; box-shadow: 0 4px 10px rgba(32, 201, 151, 0.3); }

#tool-public-share .share-search-box { width: 100%; padding: 12px 20px; border: 2px solid #e9ecef; border-radius: 12px; font-size: 15px; font-weight: 600; outline: none; transition: 0.3s; margin-bottom: 20px; background: #f8f9fa; box-sizing: border-box; }
#tool-public-share .share-search-box:focus { border-color: #20c997; background: #fff; }

#tool-public-share .file-list-container { background: #fff; border-radius: 12px; border: 1px solid #ced4da; overflow: hidden; max-height: 600px; overflow-y: auto; }
#tool-public-share .share-table { width: 100%; border-collapse: collapse; text-align: left; table-layout: fixed; }
#tool-public-share .share-table .file-name-cell { overflow: hidden; text-overflow: ellipsis; }
#tool-public-share .share-table th, #tool-public-share .share-table td { padding: 15px 20px; border-bottom: 1px solid #e9ecef; }
#tool-public-share .share-table th { background: #f8f9fa; font-weight: 800; color: #495057; position: sticky; top: 0; z-index: 2; }
#tool-public-share .share-table tr:hover { background-color: #f1f3f5; }
/* ⚠️ td를 display:flex 로 만들면 표 칸 정렬이 깨짐 → 일반 표셀로 두고 내용만 가운데 정렬 */
#tool-public-share .file-name-cell { font-weight: 700; color: #343a40; word-break: break-all; font-size: 15px; vertical-align: middle; }
#tool-public-share .file-name-cell > span { margin-right: 8px; vertical-align: middle; }
#tool-public-share .file-meta { font-size: 13.5px; color: #868e96; font-weight: 600; }
#tool-public-share .action-buttons { display: flex; gap: 8px; justify-content: center; }
#tool-public-share .btn-download { padding: 6px 12px; background: #4263eb; color: white; border: none; border-radius: 6px; font-weight: bold; cursor: pointer; font-size: 13px; }
#tool-public-share .btn-delete { padding: 6px 12px; background: #ffe3e3; color: #e24b4a; border: 1px solid #ffa8a8; border-radius: 6px; font-weight: bold; cursor: pointer; font-size: 13px; }
#tool-public-share .btn-download:hover { background: #3b5bdb; }
#tool-public-share .btn-delete:hover { background: #fa5252; color: white; }

.tab-right-container { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; min-width: 350px; }
.tab-right-top { display: flex; gap: 6px; align-items: center; width: 100%; justify-content: flex-end; }
.external-links-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; width: 100%; }
.ext-link-btn { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 6px 4px; font-size: 12px; font-weight: 800; color: #495057; text-decoration: none; background: #fff; border: 1px solid #ced4da; border-radius: 20px; transition: all 0.2s; white-space: nowrap; letter-spacing: -0.5px; box-sizing: border-box; }
.ext-link-btn:hover { background: #f8f9fa; border-color: #adb5bd; transform: translateY(-1px); box-shadow: 0 2px 4px rgba(0,0,0,0.05); }
.ext-link-btn img { width: 14px; height: 14px; border-radius: 3px; object-fit: contain; }


/* =========================================================================== */
/* ==================== [START: 13. 스마트 유틸도구 구성] ==================== */
/* =========================================================================== */
#tool-utilities { max-width: 1600px; margin: 0 auto; }
#tool-utilities .util-header-container { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 25px; border-bottom: 3px solid #2b8a3e; padding-bottom: 15px; }
#tool-utilities .util-main-title { color: #2b8a3e; margin: 0; font-weight: 800; font-size: 28px; }
#tool-utilities .util-clock { font-size: 18px; font-weight: bold; color: #495057; background: #e9ecef; padding: 8px 15px; border-radius: 8px; }

#tool-utilities .util-grid-container { display: grid; grid-template-columns: repeat(6, 1fr); gap: 20px; }
#tool-utilities .util-col-3 { grid-column: span 2; }
#tool-utilities .util-col-2 { grid-column: span 3; }
#tool-utilities .util-col-1 { grid-column: span 6; }

@media (max-width: 1300px) { #tool-utilities .util-col-3 { grid-column: span 3; } }
@media (max-width: 900px) { #tool-utilities .util-col-3, #tool-utilities .util-col-2 { grid-column: span 6; } }

#tool-utilities .util-card { background: #ffffff; padding: 25px; border-radius: 15px; box-shadow: 0 4px 15px rgba(0,0,0,0.05); display: flex; flex-direction: column; border-top: 4px solid #2b8a3e; transition: 0.2s; }
#tool-utilities .util-calc-display { width: 100%; padding: 15px; margin-bottom: 10px; border: 2px solid #ff8e8b; border-radius: 12px; box-sizing: border-box; font-size: 24px; text-align: right; background: #fff4f4; font-weight: bold; font-family: 'Pretendard', sans-serif; }
#tool-utilities .util-korean-display { text-align: right; font-size: 13px; font-weight: bold; color: #e64980; margin-bottom: 12px; min-height: 18px; }
#tool-utilities .util-calc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
#tool-utilities .util-calc-btn { padding: 12px; border: none; border-radius: 10px; background: #f1f3f5; font-weight: bold; font-size: 16px; cursor: pointer; transition: 0.2s; }
#tool-utilities .util-calc-btn:hover { background: #dee2e6; }
#tool-utilities .util-calc-btn.pink { background: #ffc0cb; color: #fff; }
#tool-utilities .util-calc-btn.red { background: #ff8e8b; color: #fff; }
#tool-utilities .util-calc-btn.clear-btn { color: #e24b4a; font-weight: 900; }

#tool-utilities .percent-title { color: #2b8a3e; font-weight: 800; }
#tool-utilities .util-input-group { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; background: #f8f9fa; padding: 10px 15px; border-radius: 8px; border: 1px solid #e9ecef; }
#tool-utilities .util-input-group label { font-weight: bold; color: #495057; font-size: 14px; }
#tool-utilities .util-input-group input { width: 110px; padding: 8px; border: 1px solid #ced4da; border-radius: 6px; font-size: 16px; text-align: right; font-weight: bold; font-family: inherit; }
#tool-utilities .util-progress-container { width: 100%; background: #e9ecef; border-radius: 20px; height: 24px; margin-top: 10px; overflow: hidden; }
#tool-utilities .util-progress-bar { width: 0%; height: 100%; background: linear-gradient(90deg, #51cf66, #2b8a3e); transition: width 0.4s ease; }

#tool-utilities .util-memo-box { width: 100%; height: 250px; padding: 15px; border: none; border-radius: 8px; box-sizing: border-box; font-size: 16px; line-height: 1.6; resize: vertical; margin-bottom: 5px; background: #fff9db; box-shadow: inset 0 2px 5px rgba(0,0,0,0.05); }
#tool-utilities .util-memo-counter { text-align: right; font-size: 13px; color: #868e96; font-weight: bold; margin-bottom: 10px; }
#tool-utilities .util-memo-btn-group { display: flex; gap: 10px; }
#tool-utilities .util-ai-btn { flex-grow: 1; padding: 12px; background: #339af0; color: white; border: none; border-radius: 8px; font-size: 15px; font-weight: bold; cursor: pointer; }
#tool-utilities .util-save-btn { padding: 12px 20px; background: #495057; color: white; border: none; border-radius: 8px; font-size: 15px; font-weight: bold; cursor: pointer; }

#tool-utilities .util-remover-container { display: flex; flex-direction: column; align-items: center; gap: 15px; background: #f8f9fa; padding: 20px; border-radius: 8px; border: 1px solid #dee2e6; flex-grow: 1; justify-content: center; transition: all 0.2s ease; }
#tool-utilities .util-canvas-bg { width: 100%; min-height: 150px; background-image: linear-gradient(45deg, #ccc 25%, transparent 25%), linear-gradient(-45deg, #ccc 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #ccc 75%), linear-gradient(-45deg, transparent 75%, #ccc 75%); background-size: 20px 20px; background-position: 0 0, 0 10px, 10px -10px, -10px 0px; border: 2px dashed #adb5bd; border-radius: 8px; text-align: center; overflow: hidden; display: flex; justify-content: center; align-items: center; transition: all 0.2s ease; }
#tool-utilities .util-file-drop-area { border: 2px dashed #adb5bd; border-radius: 8px; padding: 20px; text-align: center; background: #f8f9fa; margin-bottom: 10px; cursor: pointer; font-weight: 500; transition: all 0.2s ease; }
#tool-utilities .util-file-drop-area.dragover { background: #e3fafc; border-color: #15aabf; }
#tool-utilities .util-preview-list { display: flex; flex-direction: column; gap: 8px; max-height: 250px; overflow-y: auto; margin-bottom: 10px; }
#tool-utilities .util-preview-item { display: flex; align-items: center; justify-content: space-between; background: #f8f9fa; padding: 8px 12px; border-radius: 6px; border: 1px solid #dee2e6; cursor: grab; transition: 0.1s; }
#tool-utilities .util-preview-item.dragging { opacity: 0.5; background: #e3fafc; }
#tool-utilities .util-preview-item img { height: 40px; width: 40px; object-fit: cover; border-radius: 4px; margin-right: 10px; }
#tool-utilities .util-preview-item-info { flex-grow: 1; display: flex; align-items: center; pointer-events: none; }
#tool-utilities .util-preview-item-info span { font-size: 13px; color: #495057; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 250px; }
#tool-utilities .size-badge { font-size: 11px; padding: 3px 6px; border-radius: 4px; margin-left: 5px; font-weight: bold; }
#tool-utilities .size-before { background: #e9ecef; color: #495057; }
#tool-utilities .size-after { background: #d3f9d8; color: #2b8a3e; }
#tool-utilities .util-del-btn { background: #ff8787; color: white; border: none; border-radius: 4px; padding: 5px 8px; cursor: pointer; font-size: 12px; font-weight: bold; }
#tool-utilities .util-action-btn { width: 100%; padding: 10px; background: #20c997; color: white; border: none; border-radius: 8px; font-weight: bold; cursor: pointer; margin-top: 5px; }
#tool-utilities .util-btn { padding: 10px; border: none; border-radius: 5px; cursor: pointer; font-weight: bold; color: white; font-size: 14px; flex-grow: 1; }

#tool-utilities #cardNukki:hover,
#tool-utilities #cardCompress:hover,
#tool-utilities #cardPdf:hover {
    border-top-color: #339af0 !important;
    box-shadow: 0 12px 30px rgba(51, 154, 240, 0.2) !important;
    background-color: #f8fafc !important;
}
#tool-utilities #cardNukki:hover .util-remover-container,
#tool-utilities #cardNukki:hover .util-canvas-bg,
#tool-utilities #cardCompress:hover #dropAreaCompress,
#tool-utilities #cardPdf:hover #dropAreaPdf {
    border-color: #339af0 !important;
    background-color: #e7f5ff !important;
    color: #1c7ed6 !important;
}
#tool-utilities .paste-hint {
    font-size: 11px;
    color: #868e96;
    background: #f1f3f5;
    padding: 3px 8px;
    border-radius: 20px;
    margin-left: 8px;
    font-weight: normal;
    transition: all 0.2s ease;
    display: inline-block;
    vertical-align: middle;
    letter-spacing: -0.3px;
}
#tool-utilities .util-card:hover .paste-hint {
    color: #ffffff !important;
    background-color: #339af0 !important;
    font-weight: 800 !important;
    animation: pulse-blue-glow 1.5s infinite;
}
@keyframes pulse-blue-glow {
    0% { box-shadow: 0 0 0 0 rgba(51, 142, 240, 0.5); }
    70% { box-shadow: 0 0 0 6px rgba(51, 142, 240, 0); }
    100% { box-shadow: 0 0 0 0 rgba(51, 142, 240, 0); }
}


/* =========================================================================== */
/* ==================== [START: 14. 하이브리드 미디어 쿼리 및 프린트 엔진] ==================== */
/* =========================================================================== */

/* [PDF 내보내기 전용 레이아웃 뷰] */
.pdf-exporting .health-wrapper .header-wrap, 
.pdf-exporting #input-section, 
.pdf-exporting .health-wrapper .layout > div:first-child, 
.pdf-exporting .drop-zone, 
.pdf-exporting .sec-row, 
.pdf-exporting .metric-tabs, 
.pdf-exporting .analysis-controls,
.pdf-exporting .modal-overlay,
.pdf-exporting .weight-search-container,
.pdf-exporting .toast-container,
.pdf-exporting .tab-menu { display: none !important; }
.pdf-exporting .print-title { display: block !important; margin-top: 20px;}
.pdf-exporting .health-wrapper .layout { display: block; margin-bottom: 0; }
.pdf-exporting .chart-wrap { border: 1px solid #ddd; box-shadow: none; break-inside: avoid; height: 120mm; margin-bottom: 24px; }
.pdf-exporting #weight-analysis-section { display: block !important; break-inside: avoid; border: none; box-shadow: none; padding: 0; }
.pdf-exporting .data-table-wrap { border: 1px solid #000; }
.pdf-exporting .data-table th, .pdf-exporting .data-table td { border: 1px solid #000; color: #000; }

/* [시스템 통합 미디어 쿼리 - 브라우저 인쇄 제어] */
@media print {
    /* 기본 여백 제로 설정 */
    @page { margin: 0; size: A4 landscape; }
    body { margin: 0 !important; background: #fff !important; -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
    
    /* 화면 공통 숨김 처리 */
    #draggablePatch, .tab-menu-wrapper, #toast-container, .patch-footer { display: none !important; }

    /* 🖨️ 1. 건강 체력 인쇄 모드 */
    body.health-printing > *:not(#tool-health) { display: none !important; }
    body.health-printing { padding: 15mm !important; }
    body.health-printing #tool-health { display: block !important; box-shadow: none !important; max-width: none !important; border-radius: 0 !important; padding: 0 !important; background: #fff !important;}
    body.health-printing .header-wrap, body.health-printing #input-section, body.health-printing .layout > div:first-child, body.health-printing .drop-zone, body.health-printing .sec-row, body.health-printing .metric-tabs, body.health-printing .modal-overlay, body.health-printing .analysis-controls, body.health-printing .weight-search-container { display: none !important; }
    body.health-printing .print-title { display: block !important; margin-top: 0 !important;}
    body.health-printing .layout { display: block !important; margin-bottom: 0 !important; }
    body.health-printing .chart-wrap { border: 1px solid #ddd !important; box-shadow: none !important; break-inside: avoid !important; height: 110mm !important; margin-bottom: 24px !important; padding: 10px !important;}
    body.health-printing .chart-canvas-wrap { height: 100% !important; }
    body.health-printing #weight-analysis-section { display: block !important; break-before: auto !important; break-inside: avoid !important; border: none !important; box-shadow: none !important; padding: 0 !important; margin-top: 20px !important;}
    body.health-printing .data-table-wrap { border: 1px solid #000 !important; }
    body.health-printing .data-table th, body.health-printing .data-table td { border: 1px solid #000 !important; color: #000 !important; }

    /* 🖨️ 2. 체온 기록지 인쇄 모드 */
    body.temp-printing > *:not(#tool-temperature) { display: none !important; }
    body.temp-printing { padding: 0 !important; }
    body.temp-printing #tool-temperature { display: block !important; padding: 0 !important; box-shadow: none !important; max-width: none !important;}
    body.temp-printing .temp-hide-print, body.temp-printing .temp-control-area { display: none !important; }
    body.temp-printing .print-page { page-break-after: always !important; page-break-inside: avoid !important; padding: 10mm 15mm !important; box-shadow: none !important; border-radius: 0 !important; margin-bottom: 0 !important; height: 100vh !important; }
    body.temp-printing .content-table { margin-bottom: 12px !important; }
    body.temp-printing .page-footer { display: block !important; }

    /* 🖨️ 3. 실시간 업무공유 캘린더 인쇄 모드 */
    body.cal-printing > *:not(#tool-calendar) { display: none !important; }
    body.cal-printing { padding: 10mm !important; }
    body.cal-printing #tool-calendar { display: flex !important; flex-direction: column !important; position: relative !important; width: 100% !important; height: auto !important; min-height: 100vh !important; max-width: none !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; box-shadow: none !important; border: none !important; }
    body.cal-printing .calendar-header .btn-group, body.cal-printing #calFilters, body.cal-printing .nav-btn { display: none !important; }
    body.cal-printing .calendar-header { padding-bottom: 10px !important; margin-bottom: 10px !important; }
    body.cal-printing .calendar-content { flex: 1 !important; display: flex !important; height: auto !important; overflow: visible !important; }
    body.cal-printing .calendar-grid { flex: 1 !important; height: auto !important; border: 2px solid #333 !important; border-radius: 0 !important; grid-template-rows: 30px repeat(6, minmax(120px, auto)) !important; }
    body.cal-printing .date-cell { border: 1px solid #999 !important; height: auto !important; min-height: 120px !important; overflow: visible !important; break-inside: avoid !important; }
    body.cal-printing .event-container { overflow: visible !important; height: auto !important; }
    body.cal-printing .event-chip { font-size: 11px !important; padding: 4px 6px !important; margin-bottom: 3px !important; white-space: pre-wrap !important; word-break: break-word !important; break-inside: avoid !important; border: 1px solid transparent !important; }

/* 🖨️ 4. 월간 프로그램 계획서 인쇄 모드 */
    body.monthly-printing > *:not(#tool-monthly-plan) { display: none !important; }
    body.monthly-printing { padding: 15mm !important; }
    #tool-monthly-plan.container { padding: 0 !important; box-shadow: none !important; max-width: 100% !important; border-radius: 0 !important; }
    #tool-monthly-plan .no-print, #tool-monthly-plan .auth-box, #tool-monthly-plan .btn-container, #tool-monthly-plan .notice-box, #tool-monthly-plan .creator, #tool-monthly-plan .main-title { display: none !important; }
    #tool-monthly-plan .report-header { margin-top: 0 !important; }
    #tool-monthly-plan textarea { height: auto !important; overflow: visible !important; }
} /* <--- @media print 전용 미디어 쿼리는 여기서 명확히 닫아줍니다. */

/* =========================================================================== */
/* ==================== [메인 시계 고유 스타일 복원 및 크기 고정] ==================== */
/* =========================================================================== */
#mainClock {
    font-size: 13px !important;
    font-weight: 800 !important;
    color: #495057 !important;
    background: #f1f3f5 !important;
    padding: 8px 14px !important;
    border-radius: 20px !important;
    border: 1px solid #dee2e6 !important;
    white-space: nowrap !important;
    letter-spacing: -0.3px !important;
    display: inline-block !important;
}

/* =========================================================================== */
/* ==================== [상단 메뉴바 깔끔한 2단 대형 및 오와열 유지 스타일] ==================== */
/* =========================================================================== */

/* 1. 시계 숫자가 바뀔 때 우측 박스와 검색창이 미세하게 떨리는(Jitter) 현상 완전 제거 */
#mainClock {
    display: inline-block !important;
    text-align: center !important;
    min-width: 220px !important;       /* 시계 영역 너비를 고정하여 주변 요소를 밀지 않게 방지 */
    font-variant-numeric: tabular-nums !important; /* 숫자의 가로폭을 균일하게 고정 (모노스페이스) */
    font-feature-settings: 'tnum' !important;      /* 브라우저 렌더링 호환 */
    -webkit-font-feature-settings: 'tnum' !important;
}

/* 2. 버튼 내부 글자 줄바꿈 및 찌그러짐 원천 차단 (한 줄 고정) */
.tab-btn {
    white-space: nowrap !important; /* "실시간 캘린더" 등의 텍스트가 강제로 한 줄로 유지됨 */
    word-break: keep-all !important;
    font-size: 14.5px !important;    /* 가장 편안하고 가독성이 뛰어난 규격 크기 고정 */
    padding: 10px 20px !important;   /* 안정적인 정원형 캡슐 알약 비율 고정 */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* 3. 메뉴바 래퍼: 좌우 대형을 흐트러짐 없이 원본 그대로 유지 */
.tab-menu-wrapper {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-wrap: nowrap !important; /* 억지로 깨져 내려가는 하단 wrapping 방지 */
    gap: 20px !important;
    background: #ffffff !important;
    padding: 15px 25px !important;
    border-radius: 30px !important;
    border: 1px solid #ffe3e3 !important;
}

.tab-menu {
    display: flex !important;
    flex-wrap: wrap !important; /* 가로 폭 범위 내에서 5개 / 6개로 가지런히 2줄 대형(오와열) 형성 */
    gap: 10px 12px !important;   /* 세로 10px, 가로 12px의 정밀한 그리드 격자 정렬 유지 */
    flex: 1 !important;
    justify-content: flex-start !important;
}

/* 4. 인쇄 시에는 자동 해상도 축소(zoom)를 일시 해제하여 인쇄 크기가 작아지는 것을 방지 */
@media print {
    body {
        zoom: 1 !important;
    }
}

/* 💡 읽기전용(readonly) 입력창 및 결과 테이블 칸 클릭 시 커서(캐럿) 깜빡임 차단 */
input[readonly],
textarea[readonly],
.ssis-table textarea,
.ssis-table input[type="text"],
.report-table textarea,
.report-table input[type="text"] {
    caret-color: transparent !important; /* 글쓰기 커서 투명화 */
    cursor: default !important;          /* 커서 마우스 아이콘 기본값 고정 */
}


/* =========================================================================== */
/* ==================== [START: 11. 로그인 / 회원가입 게이트] ==================== */
/* =========================================================================== */
.auth-gate { position: fixed; inset: 0; z-index: 30000; background: linear-gradient(135deg, #fff0f3, #ffe3e3); display: flex; align-items: center; justify-content: center; padding: 20px; }
.auth-card { background: #fff; width: 100%; max-width: 380px; border-radius: 20px; padding: 34px 30px; box-shadow: 0 15px 40px rgba(230, 73, 128, 0.18); }
.auth-brand { text-align: center; font-size: 22px; font-weight: 900; color: #e64980; line-height: 1.4; margin-bottom: 22px; }
.auth-brand span { font-size: 14px; font-weight: 700; color: #868e96; }
.auth-h2 { text-align: center; font-size: 18px; font-weight: 800; color: #343a40; margin: 0 0 18px; }
.auth-input { width: 100%; box-sizing: border-box; padding: 13px 15px; margin-bottom: 11px; border: 1px solid #ffc0cb; border-radius: 10px; font-size: 15px; font-family: inherit; outline: none; transition: 0.2s; background: #fff; color: #333; }
.auth-input:focus { border-color: #ff8e8b; box-shadow: 0 0 0 3px rgba(255, 142, 139, 0.2); }
.auth-btn { width: 100%; padding: 14px; margin-top: 6px; background: linear-gradient(135deg, #ff8e8b, #ff726f); color: #fff; border: none; border-radius: 10px; font-size: 16px; font-weight: 800; cursor: pointer; transition: 0.2s; }
.auth-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(255, 142, 139, 0.4); }
.auth-switch { text-align: center; margin-top: 16px; font-size: 14px; color: #868e96; }
.auth-switch span { color: #e64980; font-weight: 800; cursor: pointer; }
.auth-help { text-align: center; margin-top: 12px; font-size: 12.5px; color: #adb5bd; line-height: 1.5; }

/* 상단바 로그인 정보 / 버튼 */
.nav-user-chip { font-size: 13px; font-weight: 700; color: #495057; background: #fff0f3; border: 1px solid #fcc2d7; padding: 6px 12px; border-radius: 20px; white-space: nowrap; }
.nav-auth-btn { font-size: 12px; font-weight: 800; padding: 6px 12px; border-radius: 20px; cursor: pointer; border: 1px solid #ced4da; background: #fff; color: #495057; transition: 0.2s; white-space: nowrap; }
.nav-auth-btn:hover { background: #f1f3f5; }
#navAdminBtn { color: #1d4ed8; border-color: #93c5fd; background: #dbeafe; }

/* 회원 관리 모달 목록 */
.member-sec-title { font-size: 14px; font-weight: 800; color: #d6336c; margin: 0 0 10px; }
.member-list { display: flex; flex-direction: column; gap: 8px; max-height: 240px; overflow-y: auto; }
.member-empty { text-align: center; color: #adb5bd; font-size: 13px; padding: 18px 0; font-weight: 600; }
.member-row { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; background: #f8f9fa; border: 1px solid #e9ecef; border-radius: 10px; gap: 10px; }
.member-info { font-size: 13.5px; color: #343a40; line-height: 1.5; }
.member-info span { font-size: 12px; color: #1d4ed8; font-weight: 700; }
.member-info small { color: #868e96; }
.m-badge { background: #e64980 !important; color: #fff !important; font-size: 10px; padding: 2px 7px; border-radius: 10px; }
.member-actions { display: flex; gap: 6px; flex-shrink: 0; }
.member-actions button { border: none; border-radius: 6px; padding: 7px 11px; font-size: 12px; font-weight: 800; cursor: pointer; transition: 0.2s; }
.m-approve { background: #20c997; color: #fff; }
.m-reject { background: #f1f3f5; color: #e24b4a; }
.m-reset { background: #ffd43b; color: #343a40; }
.m-remove { background: #fff; color: #e24b4a; border: 1px solid #ffc9c9 !important; }
.member-actions button:hover { opacity: 0.85; }

/* 토스트 알림이 게이트 위에 보이도록 (로그인 오류 메시지 표시용) */
.toast-container { z-index: 40000; }

/* 인쇄 시 로그인막 숨김 */
@media print { .auth-gate { display: none !important; } }

/* 상단 사용자 바 (시계 + 로그인 정보 + 회원관리/로그아웃) */
.top-userbar { display: flex; justify-content: space-between; align-items: center; background: #fff; padding: 10px 22px; border-radius: 30px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); border: 1px solid #ffe3e3; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.topbar-brand { font-size: 15px; font-weight: 900; color: #e64980; letter-spacing: -0.3px; }
.topbar-right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.nav-user-chip { cursor: pointer; }
.nav-user-chip:hover { background: #ffe3e3; border-color: #f783ac; }

/* 내 정보 모달 라벨 */
.myinfo-label { display: block; font-size: 13px; font-weight: 700; color: #d6336c; margin: 4px 0 6px; }

/* 회원관리 직급 선택 */
.m-role { border: 1px solid #ced4da; border-radius: 6px; padding: 6px 8px; font-size: 12px; font-weight: 700; color: #343a40; background: #fff; cursor: pointer; outline: none; }
.m-role:focus { border-color: #4263eb; }


/* 📱 모바일 전용 메뉴 토글 버튼 — 기본은 숨김(데스크탑에서는 절대 안 보임) */
.mobile-menu-toggle { display: none; }

/* 📱 넓은 표 가로 스크롤 래퍼 — 데스크탑에선 그냥 투명한 블록(영향 0) */
.m-scroll { width: 100%; }

/* 📱 캘린더 모바일 일정목록(아젠다) — 데스크탑에선 숨김(영향 0) */
.cal-agenda { display: none; }

/* 📱 햄버거 드로어 펼침 애니메이션 (모바일에서만 사용 — 데스크탑 영향 0) */
@keyframes drawerDown {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* =========================================================================== */
/* ==================== [START: 📱 모바일(스마트폰) 최적화] ==================== */
/*  ⚠️ 화면이 좁을 때만 적용됩니다. PC/태블릿 디자인은 전혀 바뀌지 않습니다.       */
/* =========================================================================== */

/* ── 태블릿~큰 폰 (가로 768px 이하) ─────────────────────────────────────── */
@media (max-width: 768px) {
    body { padding: 14px 8px; }
    .container { padding: 20px 14px; border-radius: 16px; }

    h1.main-title { font-size: 22px; margin-bottom: 18px; padding-bottom: 14px; }

    /* 탭 메뉴: 버튼 작게 + 좌우로 쓸어 넘기기 */
    .tab-menu { gap: 8px; }
    .tab-btn { padding: 10px 16px; font-size: 14px; border-radius: 22px; }

    /* 큰 버튼들 폭 맞춤 */
    .main-btn { padding: 14px 30px; font-size: 16px; width: 100%; box-sizing: border-box; }
    .btn-container { margin: 16px 0 24px; }

    /* 상단 사용자 바 / 탭 래퍼 여백 축소 */
    .top-userbar, .tab-menu-wrapper { padding: 8px 14px; border-radius: 18px; }
    .topbar-brand { font-size: 13px; }

    /* ★ 탭 영역: 좌우 2단 → 위아래로 쌓기 (폰에서 겹침/몰림 해결) */
    /* 📱 메뉴바를 화면 상단에 고정(sticky) — 스크롤 내려도 ☰ 메뉴가 항상 손 닿는 곳에.
       z-index 900: 모달(1000)·로그인막(30000)보다 낮아 가려지지 않게 안전 */
    .tab-menu-wrapper { flex-direction: column; align-items: stretch; gap: 10px; padding: 10px; position: sticky; top: 6px; z-index: 900; }

    /* 📱 햄버거 드로어 토글: 평소엔 이 ☰ 막대만 보이고, 누르면 메뉴가 아래로 펼쳐짐 */
    .mobile-menu-toggle {
        display: flex !important; align-items: center; justify-content: space-between; gap: 8px;
        width: 100%; box-sizing: border-box;
        padding: 14px 18px; font-size: 15.5px; font-weight: 800; letter-spacing: -0.3px;
        color: #fff; background: linear-gradient(135deg, #ff8e8b, #ff726f);
        border: none; border-radius: 14px; cursor: pointer;
        box-shadow: 0 4px 12px rgba(255, 114, 111, 0.3);
    }
    .mobile-menu-toggle:active { transform: scale(0.99); }

    /* 드로어 닫힘(기본): 메뉴 목록 + 우측영역(검색·시계·외부링크) 모두 숨겨 화면을 깔끔하게 */
    #mainTabMenu { display: none !important; }
    #mainTabMenu:not(.menu-open) ~ .tab-right-container { display: none; }

    /* 드로어 열림: 메뉴를 2칸 격자 패널로 펼치고, 우측영역도 함께 노출 */
    #mainTabMenu.menu-open {
        display: grid !important; grid-template-columns: repeat(2, 1fr); flex: none; width: 100%;
        gap: 8px; padding: 12px; margin-top: 2px;
        background: #fff7f8; border: 1.5px solid #ffe3e3; border-radius: 14px;
        animation: drawerDown 0.22s ease;
    }
    /* 터치 영역 확보: 버튼 최소 높이 44px (애플/구글 권장 터치 크기) */
    .tab-menu .tab-btn { width: 100%; box-sizing: border-box; padding: 13px 6px; font-size: 13px; line-height: 1.3; word-break: keep-all; border-width: 1.5px; min-height: 44px; }

    .tab-right-container { min-width: 0; width: 100%; align-items: stretch; }
    .tab-right-top { flex-wrap: wrap; justify-content: center; gap: 8px; }
    .tab-search-wrapper { flex: 1; min-width: 150px; }
    .tab-search { width: 100%; box-sizing: border-box; }
    #mainClock { width: 100%; text-align: center; }

    /* 외부링크: 1줄씩 길게 → 2칸으로 묶어 높이 절반, 글자는 줄바꿈 허용 */
    .external-links-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .ext-link-btn { font-size: 11px; padding: 9px 6px; white-space: normal; text-align: center; line-height: 1.25; min-height: 38px; }

    /* 입력 폼 여백 축소 */
    .form-group { margin-bottom: 16px; }
    .auth-box input[type="text"] { width: 100%; box-sizing: border-box; }
    .input-row { flex-direction: column; align-items: stretch; gap: 8px; }

    /* 격자형 레이아웃은 모두 1~2단으로 접기 */
    #tool-utilities .util-grid-container { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    #tool-utilities .util-col-3, #tool-utilities .util-col-2 { grid-column: span 1; }
    #tool-utilities .util-calc-grid { grid-template-columns: repeat(4, 1fr); gap: 6px; }
    #tool-utilities .util-card { padding: 16px; }
    #tool-utilities .util-header-container { flex-wrap: wrap; gap: 8px; }
    #tool-utilities .util-main-title { font-size: 20px; }
    .external-links-grid { grid-template-columns: repeat(2, 1fr); }
    .health-wrapper { padding: 16px 14px; }
    .health-wrapper .top-controls { grid-template-columns: 1fr; }

    /* ★ 캘린더 상단: 좌우 2단 → 위아래로 쌓기 (제목 세로찌그러짐 해결) */
    #tool-calendar.container { padding: 16px 12px; }
    #tool-calendar .calendar-header { flex-direction: column; align-items: stretch; gap: 12px; text-align: center; }
    #tool-calendar .header-title { font-size: 18px; text-align: center; word-break: keep-all; }
    #tool-calendar .month-nav { justify-content: center; gap: 12px; }
    #tool-calendar .current-month { font-size: 20px; min-width: 110px; }
    #tool-calendar .btn-group { justify-content: center; flex-wrap: wrap; }
    #tool-calendar .btn-action { padding: 9px 16px; font-size: 13px; }
    #tool-calendar .nav-btn { width: 36px; height: 36px; font-size: 16px; }

    /* ★ 모바일 캘린더: 격자엔 날짜만(깔끔한 월 개요) → 일정 상세는 아래 '목록'에서 크게 읽기 */
    #tool-calendar .event-container { display: none; }
    #tool-calendar .calendar-grid { grid-template-rows: 26px repeat(6, minmax(40px, auto)); }
    #tool-calendar .date-cell { padding: 4px; }
    #tool-calendar .date-num-row { font-size: 12px; margin-bottom: 0; }
    /* 일정 있는 날 표시(점) — 격자엔 날짜만 보이므로 점으로 알려줌 */
    #tool-calendar .date-cell.has-event::after {
        content: ''; position: absolute; bottom: 5px; left: 50%; transform: translateX(-50%);
        width: 7px; height: 7px; border-radius: 50%; background: #ff6b6b;
    }

    /* 일정 목록(아젠다) — 폰에서 글자 크고 읽기 쉽게 */
    .cal-agenda { display: block; margin-top: 16px; }
    .cal-agenda-title { font-size: 16px; font-weight: 800; color: #e64980; margin: 6px 2px 12px; }
    .cal-agenda-date { font-size: 15px; font-weight: 800; margin: 16px 2px 8px; border-bottom: 2px solid #ffe3e3; padding-bottom: 5px; }
    .cal-agenda-item { border: 1px solid; border-radius: 12px; padding: 12px 14px; margin-bottom: 8px; cursor: pointer; }
    .cal-agenda-team { font-size: 11px; font-weight: 800; opacity: .75; margin-bottom: 4px; }
    .cal-agenda-text { font-size: 15px; font-weight: 800; line-height: 1.45; }
    .cal-agenda-target { font-size: 13px; font-weight: 700; margin-top: 6px; }
    .cal-agenda-empty { text-align: center; color: #adb5bd; padding: 28px 10px; font-weight: 700; }
    .cal-agenda-allbtn { float: right; font-size: 12px; font-weight: 700; color: #495057; background: #f1f3f5; border: 1px solid #dee2e6; border-radius: 14px; padding: 4px 10px; cursor: pointer; }
    .cal-agenda-addbtn { display: block; width: 100%; margin-top: 10px; padding: 12px; font-size: 14px; font-weight: 800; color: #fff; background: linear-gradient(135deg, #ff8e8b, #ff726f); border: none; border-radius: 12px; cursor: pointer; }

    /* ★ 체온기록표: 한 화면에 맞춰 축소(자세히는 줌으로) */
    #tool-temperature .print-page { min-width: 0; padding: 3mm; }
    #tool-temperature .temp-control-area { padding: 12px; }
    #tool-temperature .temp-controls { flex-wrap: wrap; gap: 8px; }
    #tool-temperature .temp-controls > span { margin-left: 0 !important; }
    #tool-temperature .sign-table th, #tool-temperature .sign-table td { width: auto; }
    #tool-temperature .main-title { font-size: 13px; padding: 6px; }

    /* ★ 모니터링 조작부(연도/분기 설정 + 버튼들): 옆으로 삐져나감 → 세로로 쌓기 */
    #tool-monitoring .top-actions { flex-direction: column; align-items: stretch; gap: 10px; padding: 12px; }
    #tool-monitoring .setting-bar { flex-wrap: wrap; gap: 8px; font-size: 13px; }
    #tool-monitoring .top-actions > div { display: flex; flex-wrap: wrap; gap: 6px; }
    #tool-monitoring .action-btn { margin-left: 0; padding: 9px 10px; font-size: 12.5px; flex: 1 1 40%; }
    #tool-monitoring .quarter-radio { flex-wrap: wrap; }

    /* 모달은 화면에 꽉 차되 여백 살짝 */
    .modal-content { width: 94%; padding: 18px; max-height: 88vh; }

    /* ★ 양식 표(생활일지·모니터링·월계획서 등): 처음부터 화면 폭에 '전체가 다 보이게' 맞춤.
       가로 스크롤 없음. 자세히 볼 땐 손가락으로 확대(줌). 한글은 단어 단위로만 줄바꿈해 안 깨지게. */
    .m-scroll, .ssis-table-wrap, .spreadsheet-container,
    #tool-submit .table-wrapper, #tempTableContainer { overflow-x: hidden; }
    .m-scroll > table, .ssis-table, #tool-submit .checklist-table,
    #tbl_main, #tbl_scale, #tool-public-share .share-table,
    #tool-temperature .print-page, .spreadsheet-container table {
        width: 100% !important; min-width: 0 !important; table-layout: fixed;
    }
    .tool-section table th, .tool-section table td { word-break: keep-all; overflow-wrap: break-word; padding: 2px !important; }
    .spreadsheet-container table { white-space: normal !important; }

    /* ★ 글씨를 확 줄여서 표 전체가 화면에 무조건 들어오게 (자세히는 손가락 줌).
       인라인 스타일까지 이기도록 ID + 전체선택자(*) + !important 로 강하게 적용 */
    #tool-consult table *, #tool-doc table *, #tool-program table *,
    #tool-monthly-plan table *, #tool-monitoring table *,
    #tool-temperature table *, #tool-public-share table *,
    #tool-health table * { font-size: 7px !important; line-height: 1.2 !important; }
    /* 표 안 입력/선택 요소도 동일하게 (혹시 위에서 안 잡히는 경우 대비) */
    #tool-monitoring table input, #tool-monitoring table textarea, #tool-monitoring table select,
    #tool-doc table input, #tool-doc table textarea,
    #tool-program table input, #tool-program table textarea { font-size: 7px !important; }
    /* 체크박스·라디오도 작게 → 칸 폭 절약 */
    .tool-section table input[type="checkbox"],
    .tool-section table input[type="radio"] { width: 11px !important; height: 11px !important; }
    /* 프로그램일지 사진칸이 너무 커지지 않게 */
    #tool-program .img-preview { min-height: 80px; }
}

/* ── 일반 스마트폰 (가로 480px 이하) ────────────────────────────────────── */
@media (max-width: 480px) {
    body { padding: 10px 6px; }
    .container { padding: 16px 10px; }

    h1.main-title { font-size: 19px; }
    .tab-btn { padding: 9px 13px; font-size: 13px; }

    /* 캘린더: 격자엔 날짜만 → 칸 작게 (일정 상세는 아래 목록에서) */
    #tool-calendar .calendar-grid { grid-template-rows: 24px repeat(6, minmax(34px, auto)); }
    #tool-calendar .date-cell { padding: 3px; }
    #tool-calendar .date-num-row { font-size: 12px; margin-bottom: 3px; }
    #tool-calendar .date-num { font-size: 12px; }
    #tool-calendar .day-header { font-size: 12px; }
    #tool-calendar .event-container { gap: 3px; }
    #tool-calendar .event-chip { font-size: 10px; padding: 3px 4px; line-height: 1.25; }
    #tool-calendar .holiday-tag { font-size: 9px; padding: 1px 4px; }
    /* 팀 필터 체크박스도 촘촘하게 */
    #calFilters { gap: 8px !important; padding: 8px 10px !important; font-size: 12px; }

    /* 유틸 카드는 작은 폰에서 1단으로 (뭉뚝함 방지). 계산기는 원래대로 4칸(계산기다움) */
    #tool-utilities .util-grid-container { grid-template-columns: 1fr !important; }
    #tool-utilities .util-card { grid-column: 1 / -1 !important; }
    #tool-utilities .util-calc-grid { grid-template-columns: repeat(4, 1fr) !important; }
    /* 외부링크는 작은 폰에서도 2칸 유지 (1칸이면 너무 길어짐) */
    .external-links-grid { grid-template-columns: repeat(2, 1fr); }

    /* 상단바: 브랜드명과 버튼이 줄바꿈돼도 깔끔하게 */
    .top-userbar { justify-content: center; text-align: center; }
    .topbar-right { justify-content: center; width: 100%; }

    /* 손가락 터치 영역 확보(작은 버튼도 누르기 쉽게) */
    .nav-auth-btn, .tab-btn { min-height: 38px; }
}
/* ==================== [END: 📱 모바일 최적화] ==================== */


/* =========================================================================== */
/* ===== 📱 모바일 양식표 강제 (파일 맨 끝 = 최우선) — 다른 ID/인라인 규칙 제압 ===== */
/* =========================================================================== */
@media (max-width: 768px) {
    /* 표를 화면 폭에 가두기: ID + !important 로 #progTableUI 900px 등도 제압 */
    #reportUI, #reportUI_SSIS, #progTableUI, #planTableUI,
    #tbl_main, #tbl_scale, #inbody-table, #monthly-input-table,
    #tool-submit .checklist-table, #tool-public-share .share-table,
    #tool-temperature .content-table, #tool-temperature .sign-table {
        width: 100% !important; min-width: 0 !important; table-layout: fixed !important;
    }
    /* 글씨 강제 축소: 각 표와 그 안 '모든' 요소 (인라인/기존 규칙보다 강하게) */
    #tool-consult #reportUI *, #tool-doc #reportUI_SSIS *,
    #tool-program #progTableUI *, #tool-monthly-plan #planTableUI *,
    #tool-monitoring #tbl_main *, #tool-monitoring #tbl_scale *,
    #tool-health #inbody-table *, #tool-health #monthly-input-table *,
    #tool-submit .checklist-table *, #tool-public-share .share-table *,
    #tool-temperature .content-table *, #tool-temperature .sign-table * {
        font-size: 8px !important; line-height: 1.15 !important;
    }
}

/* =========================================================================== */
/* ===== 📱 고정 px 양식표 '잘림' 해결 (체온기록표 · 생활일지) ================= */
/*  [원인] 희망이음 복사 시 칸이 깨지지 않도록 colgroup/셀에 px를 고정해 둬서,    */
/*         좁은 화면에서 표가 화면보다 넓어집니다(체온 약 540px, 생활일지 약 801px). */
/*         그래서 위쪽 'width:100%' 강제가 안 먹고 오른쪽 절반이 잘렸습니다.        */
/*  [해결] 데스크톱·인쇄·복사용 픽셀 고정은 그대로 두고, 모바일에서만 표 전체를     */
/*         비율 그대로 축소(zoom)해 한 화면에 담습니다. 자세히 볼 땐 손가락 확대.   */
/*  ⚠️ 전부 @media(max-width:768px) 안 → PC/희망이음 복사 동작에는 영향 0.         */
/* =========================================================================== */
@media (max-width: 768px) {
    /* ── 체온기록표 ─────────────────────────────────────────────── */
    /* 결재칸(담당자/사무국장/원장)을 제목 아래로 내려 가로 넘침부터 제거 */
    #tool-temperature .header-wrap { flex-direction: column; align-items: stretch; gap: 8px; }
    /* 표는 '설계 폭'으로 펼쳐 두고(깨짐 방지) 컨테이너에서 통째로 축소 */
    #tool-temperature .print-page { display: inline-block; width: auto !important; min-width: 0 !important; padding: 5mm; }
    #tool-temperature .content-table { width: 540px !important; table-layout: fixed !important; }
    #tool-temperature .content-table col:nth-child(1) { width: 24px !important; }  /* 대상자 */
    #tool-temperature .content-table col:nth-child(2) { width: 54px !important; }  /* 이름   */
    #tool-temperature .content-table col:nth-child(3) { width: 34px !important; }  /* 날짜/오전/오후 */
    #tool-temperature .content-table col:nth-child(4) { width: auto !important; }  /* 날짜 16칸 균등 */
    #tool-temperature .sign-table th, #tool-temperature .sign-table td { width: 60px !important; }
    /* 8px → 10px 로 키워 둔 뒤 축소 → 글씨 비율이 더 자연스러움 */
    #tool-temperature .content-table *, #tool-temperature .sign-table * { font-size: 10px !important; }
    #tempTableContainer { overflow-x: hidden; zoom: 0.62; }

    /* ── 생활일지 교정 결과표 ───────────────────────────────────── */
    /* 설계 폭(약 801px) 그대로 두고 통째로 축소해 한 화면에 (자세히는 손가락 확대) */
    #tool-doc #reportUI_SSIS { width: auto !important; zoom: 0.46; }
    #tool-doc #reportUI_SSIS * { font-size: 13px !important; line-height: 1.2 !important; }

    /* ── 모니터링 '기본사항' 표: 예시 회색글씨 크기 정리 ─────────── */
    /*  넓은 '예:' 입력칸(이용자·담당자·장기목표)만 아래 총평/피드백 칸(14.5px)과   */
    /*  같은 크기로 맞춰 '뭐는 크고 뭐는 작고'를 해결합니다.                        */
    #tool-monitoring #f_user,
    #tool-monitoring #f_manager,
    #tool-monitoring #f_goal { font-size: 14.5px !important; }
    /*  자동입력 안내칸(작성일자/차수/지원기간)은 칸이 좁아 글씨가 크면 잘립니다.    */
    /*  → 잘리지 않는 크기로 (안내 문구라 작아도 무방).                            */
    #tool-monitoring #f_date,
    #tool-monitoring #f_round,
    #tool-monitoring #f_period { font-size: 10px !important; }
    /*  기본사항 라벨(이용자/담당자/장기목표 등)은 너무 작지 않게.                  */
    #tool-monitoring #tbl_main th:not(.service-th) { font-size: 12px !important; }
    /*  ※ 서비스내용/서비스목표/진행결과 등 좁은 격자칸은 기존 8px 유지 → 안 잘림.  */
}