/*static/css/shift_schedule.css */
/* ================================
   SHIFT SCHEDULE (scoped)
   루트: <section class="... shift_schedule">
   ================================ */


/* ===== Base ===== */
.shift_schedule h1 { margin-bottom: 8px; }

.shift_schedule .desc {
    color: #555;
    margin-bottom: 24px;
}

/* 페이지 내부 카드(bootstrap card와 충돌 방지용: 기존 .card 유지하되 스코프만) */
.shift_schedule .card {
    background: #fff;
    padding: 16px;
    margin-bottom: 16px;
    border-radius: 8px;
}

/* ===== Common ===== */
.shift_schedule .hidden { display: none !important; }

.shift_schedule .mb-10 { margin-bottom: 10px; }

.shift_schedule .hint {
    font-size: 0.85em;
    color: #666;
}

.shift_schedule .required {
    color: #d00;
    margin-left: 4px;
}

/* ===== Form spacing (기존 전역 label/input 영향 제거) ===== */
.shift_schedule label { margin-bottom: 8px; }

.shift_schedule input[type="number"],
.shift_schedule input[type="month"],
.shift_schedule select,
.shift_schedule input[type="text"] {
    margin-left: 8px;
    padding: 4px 6px;
}

/* ===== Rules ===== */
.shift_schedule .rule-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
}

.shift_schedule .rule-row input { width: 60px; }



.shift_schedule .rule-block {
    display: flex;
    flex-direction: column;
    gap: 4px; /* 줄 사이의 간격을 일정하게 유지 */
    margin-bottom: 12px;
}
/* 안내 경고 박스 */
.shift_schedule .warning-box {
    margin-top: 10px;
    padding: 12px;
    border: 2px dashed #ff6b6b;
    background: #fff5f5;
    border-radius: 8px;
    font-size: 0.9em;
    color: #333;
}

.shift_schedule .warning-title {
    font-weight: 600;
    color: #d33;
    margin-bottom: 4px;
}

.shift_schedule .warning-sub {
    margin-top: 6px;
    color: #555;
}

/* ===== Pattern ===== */
.shift_schedule .pattern-box {
    margin-top: 12px;
    padding: 12px;
    background: #f8f9fa;
    border-radius: 6px;
    position: relative;
    z-index: 10;
}

.shift_schedule .pattern-row { margin-bottom: 10px; }

.shift_schedule .pattern-row label {
    font-weight: 600;
    margin-bottom: 4px;
}

.shift_schedule .pattern-result {
    margin-top: 6px;
    font-size: 0.9em;
    color: #333;
}

.shift_schedule .pattern-input-wrap {
    position: relative;
    display: inline-block;
    width: 100%;
}
/* 💡 패턴 입력 경고 툴팁 (아래쪽으로 위치 변경 및 애니메이션 수정) */
.shift_schedule .pattern-tooltip {
    position: absolute;
    bottom: calc(100% + 10px); /* 💡 입력창 '위'로 띄움 */
    top: auto;
    left: 0;
    background: #ff4d4f;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    padding: 10px 14px;
    border-radius: 10px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: all 0.2s;
    transform: translateY(10px); /* 💡 나타날 때 위로 살짝 올라오는 효과 */
    box-shadow: 0 4px 12px rgba(255, 77, 79, 0.3);
    z-index: 9999;
}

/* 툴팁 말풍선 꼬리 (위쪽을 가리키도록 삼각형 방향 뒤집기) */
.shift_schedule .pattern-tooltip::before {
    content: '';
    position: absolute;
    top: 100%; /* 💡 꼬리가 툴팁의 바닥에 붙음 */
    bottom: auto;
    left: 20px;
    border-width: 6px;
    border-style: solid;
    border-color: #ff4d4f transparent transparent transparent; /* 💡 빨간색이 위로 가도록 역삼각형 */
}

/* 활성화 시 짠 하고 나타나는 효과 */
.shift_schedule .pattern-tooltip.show {
    opacity: 1;
    transform: translateY(0);
}

.shift_schedule .double-pair select,
.shift_schedule .double-readonly {
    padding: 4px 6px;
    font-size: 0.9rem;
}

.shift_schedule .double-readonly {
    width: 42px;
    text-align: center;
    background: #f5f5f5;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.shift_schedule .double-pair select:disabled,
.shift_schedule .double-readonly:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.shift_schedule .plus {
    font-weight: 600;
    opacity: 0.4;
}

/* ===== Modal (custom) ===== */
.shift_schedule .modal {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.shift_schedule .modal.show { display: flex; }

.shift_schedule .modal-content {
    background: #fff;
    width: min(1400px, 96vw);
    height: min(90vh, 900px);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
}

.shift_schedule .modal-header {
    padding: 12px;
    border-bottom: 1px solid #ddd;
}




/* 날짜 칸 폭 고정 */
.shift_schedule .schedule-table thead th[data-day],
.shift_schedule .schedule-table thead th.virtual-prev,
.shift_schedule .schedule-table thead th.virtual-next,
.shift_schedule .schedule-table tbody td:not(.summary-cell) {
    min-width: 36px;
    width: 36px;
}

/* 이름 입력칸(input) */
.shift_schedule .name-input {
    width: 100%;
    height: 100%;
    padding: 4px;
    box-sizing: border-box;
    border: none;
    outline: none;
    background: transparent;
    font-size: 16px;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;

}

/* 이름 전체 보기 툴팁 */
.shift_schedule .name-tooltip {
    position: fixed;
    background: #222;
    color: #fff;
    font-size: 12px;
    padding: 6px 8px;
    border-radius: 4px;
    white-space: nowrap;
    z-index: 9999;
    pointer-events: none;
}

/* ===== Mini modal (person settings) ===== */
.shift_schedule .mini-modal {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.3);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2000;
}

.shift_schedule .mini-modal.hidden { display: none; }

.shift_schedule .mini-modal-content {
    background: #fff;
    padding: 16px;
    border-radius: 8px;
    width: 280px;
}

.shift_schedule .modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 12px;
}

/* ===== Name cell UI / drag ===== */
.shift_schedule .name-cell-wrap {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    padding: 0 6px;
}

.shift_schedule .name-cell-wrap .name-input {
    flex: 1;
    min-width: 0;
    text-align: left;
}

.shift_schedule .person-setting-btn {
    border: none;
    background: none;
    cursor: pointer;
    font-size: 12px;
    opacity: 0.6;
}

.shift_schedule .person-setting-btn:hover { opacity: 1; }

/* 그룹 제목 행 */
.shift_schedule .group-row td {
    background: #f8f9fa;
    font-weight: 700;
    text-align: center;
    padding: 8px 10px;
    border: 1px solid #ccc;
}

/* 드래그 표시 */
.shift_schedule .person-row { cursor: grab; }
.shift_schedule .person-row.dragging { cursor: grabbing; opacity: 0.8; background: #f1f3f5; }
.shift_schedule .person-row.dragging .name-cell { background: #e7f5ff; }

/* 드롭 타겟 */
.shift_schedule .person-row.drop-target {
    background: #fff3bf;
    outline: 2px dashed #ffd43b;
}

.shift_schedule .group-row.drop-target td {
    background: #e6fcf5;
    outline: 2px dashed #63e6be;
}

/* 드롭 위치 라인 */
.shift_schedule .drop-indicator {
    position: absolute;
    left: 0;
    right: 0;
    height: 0;
    border-top: 3px solid #228be6;
    pointer-events: none;
    display: none;
    z-index: 9999;
}

/* ===== Usage guide ===== */
.shift_schedule .usage-guide {
    margin-bottom: 12px;
    padding: 12px;
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    font-size: 15px;
    color: #333;
}

.shift_schedule .usage-guide strong {
    display: block;
    margin-bottom: 6px;
}

.shift_schedule .usage-guide ol {
    margin: 0;
    padding-left: 18px;
}

.shift_schedule .usage-guide li { margin: 4px 0; }

/* ===== Advanced rule ===== */
.shift_schedule .advanced-rule-box {
    border: 1px solid #ddd;
    padding: 10px 12px;
    margin-bottom: 12px;
    background: #fafafa;
    border-radius: 8px;
    font-size: 15px;

    /* 💡 핵심 수정: 테이블과 너비를 맞추기 위한 설정 */
    width: 100%;             /* 기본은 꽉 차게 */
    min-width: max-content;   /* 테이블이 옆으로 길어지면 같이 늘어남 */
    box-sizing: border-box;   /* 패딩 때문에 삐져나가는 것 방지 */
}



.shift_schedule .advanced-rule-box strong { font-size: 13px; }

.shift_schedule .advanced-rule-box .advanced-summary {
    cursor: pointer;
    font-weight: 700;
    list-style: none;
}

.shift_schedule .advanced-rule-box summary::-webkit-details-marker { display: none; }

.shift_schedule .advanced-rule-box .advanced-summary::before {
    content: "▶ ";
    opacity: 0.7;
}

.shift_schedule .advanced-rule-box[open] .advanced-summary::before { content: "▼ "; }

.shift_schedule .advanced-inner { margin-top: 10px; }

.shift_schedule .advanced-title {
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
}

.shift_schedule .advanced-section { margin-top: 10px; }

/* 고급 근무 규칙 숫자 입력 compact */
.shift_schedule .advanced-section .row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 4px 0;
    font-size: 13px;
}

.shift_schedule .advanced-section .row input[type="number"] {
    width: 60px;
    padding: 3px 4px;
    margin: 0;
}

/* 드롭다운 폭 고정 */
.shift_schedule .advanced-section select {
    width: 260px;
    min-width: 260px;
    max-width: 260px;
}

.shift_schedule #trainingPairList li { margin-top: 4px; }

.shift_schedule .training-input-row .arrow { opacity: 0.6; }

.shift_schedule .btn-add {
    padding: 4px 10px;
    font-size: 12px;
    cursor: pointer;
}

/* 트레이닝 묶음 리스트 */
.shift_schedule .training-pair-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

/* pill */
.shift_schedule .training-pair {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    background: #e7f5ff;
    border: 1px solid #74c0fc;
    border-radius: 999px;
    font-size: 12px;
}

.shift_schedule .training-pair .remove {
    cursor: pointer;
    font-weight: bold;
    color: #d00;
    padding: 0 4px;
}

.shift_schedule .training-label {
    display: flex;
    flex-direction: column;
    font-size: 12px;
    gap: 2px;
}

/* ===== Person gear + popover ===== */
.shift_schedule .person-gear {
    pointer-events: none;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 14px;
    opacity: 0.65;
    transition: all .15s ease;
}

.shift_schedule .person-gear:hover {
    opacity: 1;
    transform: rotate(20deg);
}

/* popover: 기존에 fixed/absolute가 중복되어 있어 "둘 다 가능한 형태"로 안전하게 유지 */
.shift_schedule .person-settings-popover {
    position: fixed; /* 기본: 화면 기준 */
    z-index: 9999;
    width: 200px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 10px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.12);
}

.shift_schedule .person-settings-popover.hidden { display: none; }
.shift_schedule .person-settings-popover.is-visible { display: block; }

/* 필요 시(JS에서 붙일 수 있게) absolute도 허용 */
.shift_schedule .person-settings-popover.is-absolute { position: absolute; z-index: 999; }

.shift_schedule .ps-title { font-weight: 700; margin-bottom: 8px; }
.shift_schedule .ps-row { display: flex; gap: 8px; align-items: center; margin: 6px 0; }
.shift_schedule .ps-actions { margin-top: 10px; text-align: right; }

.shift_schedule .ps-divider {
    border: 0;
    border-top: 1px solid #e9ecef;
    margin: 8px 0;
}

/* ===== Cell states ===== */
.shift_schedule td.cell-error {
    outline: 2px solid #e33;
    background: rgba(255, 0, 0, 0.06);
}

.shift_schedule td.cell-training { background: rgba(0, 120, 255, 0.10); }

.shift_schedule .day-charge-missing { outline: 2px solid #ff4d4f; }

.shift_schedule .schedule-table td.custom-fixed { position: relative; }

.shift_schedule .schedule-table td.custom-fixed::before {
    content: "";
    position: absolute;
    left: 4px;
    right: 4px;
    bottom: 2px;
    height: 3px;
    background-color: #868e96;
    border-radius: 2px;
    opacity: 0.8;
}

/* setting cell hover */
.shift_schedule .setting-cell {
    width: 56px;
    text-align: center;
    cursor: pointer;
}

.shift_schedule .setting-cell:hover { background: #f1f3f5; }

/* ===== Badge ===== */
.shift_schedule .badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    background-color: #6c757d;
}

/* 원본 유지(지원 브라우저만 동작) */
.shift_schedule .badge:has(:not(:empty)) { background-color: #6c757d; }

.shift_schedule .shift-D .badge { background-color: #0d6efd; }
.shift_schedule .shift-E .badge { background-color: #fd7e14; }
.shift_schedule .shift-N .badge { background-color: #6f42c1; }

.shift_schedule .badge:hover { transform: scale(1.1); }




/* ===== Month & summary ===== */
.shift_schedule .schedule-month {
    font-weight: 700;
    font-size: 15px;
    margin: 12px 0 6px;
    color: #333;
}

.shift_schedule .col-summary {
    min-width: 140px;
    background: #f8f9fa;
}

.shift_schedule .summary-cell {
    font-size: 14px;
    font-weight: 600;
    background: #f1f3f5;
    white-space: nowrap;
}


/* ===== Help modal size ===== */
.shift_schedule #helpModal .modal-content {
    width: min(720px, 90vw);
    height: auto;
    max-height: 70vh;
    border-radius: 12px;
}

.shift_schedule #helpModal .modal-footer { padding: 12px; }

.shift_schedule #helpModal .modal-footer .btn {
    width: auto;
    padding: 8px 20px;
    font-size: 14px;
}

/* ===== Weekend 표시 ===== */
.shift_schedule .schedule-table th.weekend { font-weight: 800; }
.shift_schedule .schedule-table th.weekend.sat { color: #1971c2; }
.shift_schedule .schedule-table th.weekend.sun { color: #e03131; }

.shift_schedule .schedule-table td.weekend.sat { background: rgba(25, 113, 194, 0.06); }
.shift_schedule .schedule-table td.weekend.sun { background: rgba(224, 49, 49, 0.06); }

/* ===== Active row/col/cell highlight ===== */
.shift_schedule .person-row.row-active td,
.shift_schedule .person-row.row-active th {
    box-shadow: inset 0 0 0 9999px rgba(255, 249, 219, 0.75);
}

.shift_schedule .col-active {
    box-shadow: inset 0 0 0 9999px rgba(255, 249, 219, 0.6);
}

.shift_schedule .cell-active {
    box-shadow: inset 0 0 0 9999px rgba(116, 192, 252, 0.9);
    outline: 2px solid #228be6;
    font-weight: 700;
}


/* ===== Legend ===== */
.shift_schedule .schedule-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 15px;
    margin-bottom: 6px;
}

.shift_schedule .legend-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #495057;
    white-space: nowrap;
}

.shift_schedule .legend-item .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    display: inline-block;
}

.shift_schedule .legend-item.d .dot { background: #74c0fc; }
.shift_schedule .legend-item.e .dot { background: #a5d8ff; }
.shift_schedule .legend-item.n .dot { background: #b197fc; }
.shift_schedule .legend-item.o .dot { background: #dee2e6; }
.shift_schedule .legend-item.v .dot { background: #69db7c; }
.shift_schedule .legend-item.p .dot { background: #ff8787; }
.shift_schedule .legend-item.b .dot { background: #ffd43b; }
.shift_schedule .legend-item.L .dot {background: #adb5bd; }
.shift_schedule .legend-item.F .dot { background: #ffa94d; }
.shift_schedule .legend-item.S .dot { background: #3bc9db; }
.shift_schedule .legend-item.T .dot { background: #1864ab; }

/* legend double 토글 */
.shift_schedule #legendDouble { display: inline-flex; }
.shift_schedule #legendDouble.is-hidden { display: none; }

/* ===== Analysis panel ===== */
/* ===== Analysis panel (가로 한 줄 버전) ===== */
.shift_schedule .analysis-panel {
    display: flex;
    justify-content: center;
    padding: 8px 14px; /* 세로 패딩을 줄여서 더 슬림하게 */
    border-radius: 10px;
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    font-size: 15px;
    width: 100%;
    margin-bottom: 10px; /* 아래 버튼들과의 간격 */
}

.shift_schedule .analysis-content {
    width: 100%;
    display: flex;
    flex-direction: row; /* 💡 가로 배치 */
    align-items: center;
    justify-content: center;
    flex-wrap: wrap; /* 💡 뱃지가 너무 많아지면 버튼을 밀지 않고 이 안에서 줄바꿈 */
}

.shift_schedule .analysis-header {
    font-weight: 700;
    color: #343a40;
    margin-right: 12px; /* 제목과 첫 번째 뱃지 사이 간격 */
    white-space: nowrap; /* 제목은 줄바꿈 안되게 고정 */
}

/* 뱃지들 사이의 간격 미세 조정 */
.shift_schedule .analysis-body {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}

.shift_schedule .analysis-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 14px;
    background: #fff;
    border: 1px solid transparent;
}


.shift_schedule .analysis-item.ok {
    color: #2f9e44;
    background: #ebfbee;
    border-color: #b2f2bb;
}

.shift_schedule .analysis-item.warn {
    color: #e8590c;
    background: #fff4e6;
    border-color: #ffd8a8;
}

.shift_schedule .analysis-item.info {
    color: #1c7ed6;
    background: #e7f5ff;
    border-color: #a5d8ff;
}

.shift_schedule .analysis-item.error {
    color: #c92a2a;
    background: #fff5f5;
    border-color: #ffa8a8;
}

/* ===== Tooltip (day) ===== */
/* ===== Tooltip (day) : CSP-safe (no inline style) ===== */

/* day 헤더 th 기준으로 툴팁 위치 잡기 위해 relative 필요 */
.shift_schedule .schedule-table thead th[data-day]{
    position: relative;
}

/* th 내부에 들어간 툴팁을 absolute로 배치 */
.shift_schedule .day-tooltip{
    position: absolute;
    left: 50%;
    top: 100%;
    margin-top: 6px;
    transform: translateX(-50%);
    z-index: 50;

    background: #fff;
    border: 1px solid #ddd;
    padding: 10px 12px;
    font-size: 14px;
    border-radius: 8px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.15);
    min-width: 180px;
    line-height: 1.4;
    pointer-events: none;
    max-width: 260px;
    white-space: normal;
    word-break: break-word;
}

.shift_schedule .day-tooltip.hidden{
    display: none;
}

/* 기존에 템플릿에서 쓰는 클래스에 맞춘 내부 스타일 */
.shift_schedule .day-tooltip__title{
    font-weight: 600;
    margin-bottom: 6px;
}

.shift_schedule .day-tooltip__row.mt{
    margin-top: 6px;
}


/* 툴팁 공통 */
.shift_schedule .tooltip {
    position: fixed;
    pointer-events: none;
}

.shift_schedule .tooltip.show { display: block; }



/* ===== Virtual 날짜 및 툴팁 ===== */
.shift_schedule .virtual-prev {
    background: #f3f3f3;

    color: #888;
}

.shift_schedule .virtual-label {
    color: #999;
    font-size: 11px;
}

.shift_schedule .day-tip-row.mt {
    margin-top: 6px;
}

/* 사람 설정 팝오버 - 전담 근무 목표 일수 UI 스타일 (보안 에러 우회용) */
.shift_schedule .target-days-row {
    margin-top: 8px;
}
.shift_schedule .target-days-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}
.shift_schedule .target-days-text {
    font-size: 13px;
}
.shift_schedule .target-days-input {
    width: 50px;
    text-align: right;
    padding: 2px;
}

/* V(휴가) 배정 시 강조 스타일 */
.shift_schedule .highlight-v {
    color: #007bff;
    font-weight: bold;
}
/* =======================================
   새로 추가된 기능 (아코디언 & 날짜만 상단 고정)
======================================= */



/* 3. 이전 달 아코디언 (접기/펼치기) */
.shift_schedule .schedule-table.collapsed-prev th.collapsible-prev,
.shift_schedule .schedule-table.collapsed-prev td.collapsible-prev {
    display: none;
}

/* 4. 아코디언 토글 버튼 디자인 */
.shift_schedule .prev-toggle-btn {
    background: #e9ecef;
    border: 1px solid #ced4da;
    border-radius: 4px;
    cursor: pointer;
    font-size: 10px;
    margin-left: 6px;
    padding: 2px 6px;
    color: #495057;
    vertical-align: middle;
    transition: all 0.2s;
}

.shift_schedule .prev-toggle-btn:hover {
    background: #dee2e6;
    color: #000;
}

/* 툴팁 내 부족/초과 구분선 (CSP 대응 버전) */
.shift_schedule .analysis-divider {
    margin: 12px 0;
    border-top: 1px dashed #ffa8a8;
    padding-top: 10px;
    height: 1px;
}

/* 인라인 스타일을 대체하는 클래스 */
.shift_schedule .csv-import-group {
    width: 300px !important;
}

/* ===== Modern Dashboard Setting UI ===== */

.shift_schedule .setting-wrapper {
    display: flex;
    flex-direction: column;
    gap: 20px;

}

.shift_schedule .setting-container {
    border: none !important;
    box-shadow: 0 8px 24px rgba(149, 157, 165, 0.1) !important;
    padding: 24px !important;
    border-radius: 16px !important;
}

.shift_schedule .setting-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 24px;
}

.shift_schedule .step-badge {
    padding: 4px 10px;
    background: #e7f5ff;
    color: #228be6;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 700;
}

.shift_schedule .step-badge.success {
    background: #ebfbee;
    color: #40c057;
}

/* 그리드 시스템 */
.shift_schedule .setting-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.shift_schedule .input-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.shift_schedule .input-field label {
    font-size: 15px;
    font-weight: 700;
    color: #495057;
}

/* 입력창 세련되게 */
.shift_schedule input[type="number"],
.shift_schedule input[type="month"],
.shift_schedule select {
    border: 1.5px solid #e9ecef !important;
    border-radius: 8px !important;
    padding: 10px !important;
    font-size: 15px !important;
    margin: 0 !important;
    outline: none !important;
}

.shift_schedule input:focus {
    border-color: #228be6 !important;
    box-shadow: 0 0 0 4px rgba(34, 139, 230, 0.1) !important;
}

/* D/E/N 인원 카드 */
.shift_schedule .work-count-grid {
    display: grid;
    /* 3칸 고정 대신, 카드의 최소 너비를 180px로 보장하면서 공간이 부족하면 알아서 줄바꿈(밑으로 내림) 하도록 변경 */
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 15px;
    margin-top: 10px;
}

.shift_schedule .count-card {
    padding: 15px;
    border-radius: 12px;
    text-align: center;
    border: 1.5px solid #f1f3f5;
}

.shift_schedule .count-card.day { background: #fff9db; border-color: #ffec99; }
.shift_schedule .count-card.evening { background: #e7f5ff; border-color: #a5d8ff; }
.shift_schedule .count-card.night { background: #f3f0ff; border-color: #d0bfff; }

.shift_schedule .count-card label {
    display: block;
    margin-bottom: 8px;
    font-weight: 800;
    color: #444;
}

/* 추가할 코드: 인원 카드 안의 입력창 크기 초과 방지 및 가운데 정렬 */
.shift_schedule .count-card input[type="text"],
.shift_schedule .count-card input[type="number"] {
    width: 100% !important;
    box-sizing: border-box !important; /* 폭(100%) 안에 패딩과 테두리를 포함시킴 */
    margin-left: 0 !important;         /* 원인: 왼쪽으로 밀어내던 범인 제거 */
    text-align: center;                /* 숫자 3도 'Day'처럼 예쁘게 가운데 정렬 */
}

/* 메인 버튼 */
.shift_schedule .btn-generate-main {
    width: 100%;
    padding: 18px;
    margin-top: 20px;
    background: linear-gradient(135deg, #228be6 0%, #15aabf 100%);
    color: #fff;
    border: none;
    border-radius: 14px;
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(34, 139, 230, 0.3);
    transition: transform 0.2s, box-shadow 0.2s;
}

.shift_schedule .btn-generate-main:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(34, 139, 230, 0.4);
}
/* ============================================================
   ✨ 작업 중(계속하기) 상태의 버튼 스타일 (CSP 안전 - Rose Pink)
   ============================================================ */
/* 기본 상태: 화사하고 세련된 로즈 핑크 그라데이션 */
.shift_schedule .btn-generate-main.btn-continue-mode {
    background: linear-gradient(135deg, #ff758c 0%, #ff7eb3 100%) !important;
    box-shadow: 0 4px 15px rgba(255, 117, 140, 0.3) !important;
    border: none !important;
    color: #ffffff !important;
}

/* 마우스 올렸을 때 (Hover): 살짝 더 진해지며 떠오르는 느낌 */
.shift_schedule .btn-generate-main.btn-continue-mode:hover {
    background: linear-gradient(135deg, #ff5e78 0%, #ff68a8 100%) !important;
    box-shadow: 0 6px 20px rgba(255, 117, 140, 0.4) !important;
    transform: translateY(-2px) !important;
}

/* 클릭했을 때 (Active): 꾹 눌리는 느낌의 딥 핑크 */
.shift_schedule .btn-generate-main.btn-continue-mode:active {
    background: linear-gradient(135deg, #f03e63 0%, #e84393 100%) !important;
    transform: translateY(1px) !important;
    box-shadow: inset 0 3px 5px rgba(0,0,0,0.15) !important;
}
/* 체크박스 개선 */
.shift_schedule .checkbox-wrapper {
    display: flex;
    gap: 20px;
}

.shift_schedule .modern-check {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-weight: 600;
    font-size: 15px;
}
/* 메인 버튼 업그레이드 (부트스트랩 클래스 위에 덮어씌움) */
.shift_schedule .btn-generate-main {
    width: 100% !important;
    padding: 16px !important;
    margin-top: 24px !important;
    background: linear-gradient(135deg, #228be6 0%, #15aabf 100%) !important;
    border: none !important;
    border-radius: 14px !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    box-shadow: 0 4px 15px rgba(34, 139, 230, 0.3) !important;
    transition: all 0.2s ease-in-out !important;
}

.shift_schedule .btn-generate-main:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(34, 139, 230, 0.4) !important;
}


/* 유닛 입력창(명, 회, 일) 스타일 */
.shift_schedule .unit-input {
    position: relative;
    display: flex;
    align-items: center;
}

.shift_schedule .unit-input .unit {
    position: absolute;
    right: 12px;
    font-size: 13px;
    color: #868e96;
    pointer-events: none;
}

.shift_schedule .unit-input input {
    width: 100%;
    padding-right: 35px !important;
}

/* 💡 패턴 입력 경고 툴팁 (크고 선명하게 개선) */
.shift_schedule .pattern-tooltip {
    position: absolute;
    bottom: calc(100% + 10px); /* 입력창 위로 띄움 */
    left: 0;
    background: #ff4d4f; /* 강렬한 레드 계열 */
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    padding: 10px 14px;
    border-radius: 10px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: all 0.2s cubic-bezier(0.18, 0.89, 0.32, 1.28);
    transform: translateY(10px);
    z-index: 100;
    box-shadow: 0 4px 12px rgba(255, 77, 79, 0.3);
}

/* 툴팁 아래쪽 삼각형 */
.shift_schedule .pattern-tooltip::before {
    content: '';
    position: absolute;
    top: 100%;
    left: 20px;
    border-width: 6px;
    border-style: solid;
    border-color: #ff4d4f transparent transparent transparent;
}

/* 활성화 시 위로 슥 올라오는 효과 */
.shift_schedule .pattern-tooltip.show {
    opacity: 1;
    transform: translateY(0);
}

/* 패턴 입력창 래퍼 */
.shift_schedule .pattern-input-wrap {
    position: relative;
    width: 100%;
}

.shift_schedule #customPatternInput {
    width: 100%;
    font-family: 'Courier New', monospace;
    letter-spacing: 1px;
}
/* Step 3 (패턴 설정) 전용 보라색 뱃지 */
.shift_schedule .step-badge.pattern {
    background: #f3f0ff;
    color: #845ef7;
}

/* ===== Shift Alias Input (근무 명칭 커스텀) ===== */
.shift_schedule .shift-alias-input {
    display: block;
    width: 100%;
    text-align: center;
    font-weight: 800;
    color: #444;
    background: transparent;
    border: none;
    border-bottom: 2px dashed rgba(0,0,0,0.15); /* 수정 가능하다는 힌트 (점선) */
    margin-bottom: 8px;
    padding: 0 0 4px 0;
    font-size: 15px;
    transition: border-color 0.2s ease-in-out;
}

/* 마우스 올리거나 클릭(포커스)했을 때 명확하게 표시 */
/* ===== Shift Alias Input (명확한 입력창 스타일) ===== */
.shift_schedule .shift-alias-input {
    display: block;
    width: 100%;
    text-align: center;
    font-weight: 700;
    color: #495057;

    /* 💡 기본 상태부터 확실한 흰 배경과 테두리를 줌 */
    background-color: #ffffff;
    border: 1px solid #ced4da;
    border-radius: 4px;
    margin-bottom: 8px;
    padding: 6px 8px;
    font-size: 14px;
    transition: all 0.2s ease-in-out;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.05); /* 입력창 특유의 살짝 들어간 그림자 */
}

/* 마우스 올리면 테두리 진해짐 */
.shift_schedule .shift-alias-input:hover {
    border-color: #adb5bd;
}

/* 클릭해서 입력할 때 파란색 테두리 */
.shift_schedule .shift-alias-input:focus {
    outline: none;
    border-color: #228be6;
    box-shadow: 0 0 0 3px rgba(34, 139, 230, 0.15);
}

/* 조별 배정 안내 문구 스타일 */
.shift_schedule .auto-label {
    display: block;
    font-size: 13px;
    color: #868e96;
    padding: 10px 0;
    font-weight: 500;
    background: #f8f9fa;
    border-radius: 4px;
    border: 1px dashed #dee2e6;
    text-align: center;
}

.shift_schedule .group-config-box {
    background: #f1f3f5;
    padding: 15px;
    border-radius: 8px;
    border: 1px solid #e9ecef;
}

.shift_schedule .info-text {
    font-size: 15px;
    color: #495057;
    margin-top: 8px;
}

/* 팀별 상단 테두리 색상 클래스 */
.shift_schedule .team-a { border-top: 4px solid #4dabf7 !important; }
.shift_schedule .team-b { border-top: 4px solid #ff922b !important; }
.shift_schedule .team-c { border-top: 4px solid #51cf66 !important; }
.shift_schedule .team-d { border-top: 4px solid #cc5de8 !important; }
.shift_schedule .team-e { border-top: 4px solid #ff6b6b !important; }
/* 💡 Step 2 설정 카드 전용 (박스 상단 테두리) */
.shift_schedule .team-f {
    border-top: 4px solid #20c997 !important;
}

/* =======================================
   ✨ 패턴 모드 팀별 그룹 헤더 (디자인 통일)
======================================= */

/* 공통: 선 두께와 폰트 정렬 */
.shift_schedule tr.group-row.team-group td {
    padding: 10px 12px !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    text-align: left !important;
}
/* Team A (Blue) - 1, 6, 11...번째 조 */
.shift_schedule tr.group-row.team-a td {
    background-color: #e7f5ff !important;
    border-left: 6px solid #228be6 !important;
    border-top: 1px solid #a5d8ff !important;
    color: #1864ab;
}
/* Team B (Orange) - 2, 7, 12...번째 조 */
.shift_schedule tr.group-row.team-b td {
    background-color: #fff4e5 !important;
    border-left: 6px solid #f59f00 !important;
    border-top: 1px solid #ffe0b2 !important;
    color: #d9480f;
}
/* Team C (Green) - 3, 8, 13...번째 조 */
.shift_schedule tr.group-row.team-c td {
    background-color: #ebfbee !important;
    border-left: 6px solid #40c057 !important;
    border-top: 1px solid #b2f2bb !important;
    color: #2b8a3e;
}
/* Team D (Purple) - 4, 9, 14...번째 조 */
.shift_schedule tr.group-row.team-d td {
    background-color: #f3f0ff !important;
    border-left: 6px solid #845ef7 !important;
    border-top: 1px solid #d0bfff !important;
    color: #5f3dc4;
}
/* Team E (Red) - 5, 10, 15...번째 조 */
.shift_schedule tr.group-row.team-e td {
    background-color: #fff5f5 !important;
    border-left: 6px solid #ff6b6b !important;
    border-top: 1px solid #ffc9c9 !important;
    color: #c92a2a;
}

/* Team F (Teal / 청록색) - 6, 12...번째 조 */
.shift_schedule tr.group-row.team-f td {
    background-color: #e6fcf5 !important; /* 연청록 배경 */
    border-left: 6px solid #20c997 !important; /* 청록색 바 */
    border-top: 1px solid #96f2d7 !important;
    color: #087f5b;
}

/* 비번 설정 칸 레이아웃 */
.shift_schedule .sleep-config-full {
    width: 100%;
}

.shift_schedule .sleep-label-style {
    font-size: 0.85rem;
    color: #666;
}

/* 💡 패턴 모드 전용: 이름 칸만 맨 왼쪽에 고정 */
.shift_schedule .schedule-table.is-pattern .col-name,
.shift_schedule .schedule-table.is-pattern .name-cell {
    left: 0 !important;
    border-right: 1px solid #ccc !important;
}

/* ⚠️ 6조 제한 경고창 스타일*/
.shift_schedule .team-limit-warning {
    margin-top: 10px;
    padding: 12px;
    border: 1.5px solid #ff4d4f;
    background-color: #fff5f5; /* 연한 레드 배경 */
    color: #e03131;            /* 선명한 레드 글씨 */
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    transition: all 0.2s ease-in-out;
}

/* hidden 클래스가 붙으면 즉시 숨김 */
.shift_schedule .team-limit-warning.hidden {
    display: none !important;
}

/* 🔽 드롭다운 박스에 화살표 아이콘 추가 */
.shift_schedule select.form-control {
    -webkit-appearance: none;  /* 브라우저 기본 화살표 제거 (크롬/사파리) */
    -moz-appearance: none;     /* 브라우저 기본 화살표 제거 (파폭) */
    appearance: none;          /* 브라우저 기본 화살표 제거 (표준) */

    /* 화살표 SVG 아이콘 (청회색) */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23495057' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center; /* 오른쪽에서 12px 띄우고 중앙 정렬 */
    background-size: 14px;                 /* 화살표 크기 */

    padding-right: 32px !important;        /* 화살표와 글자가 겹치지 않게 오른쪽 여백 확보 */
    cursor: pointer;
}

/* 마우스를 올렸을 때 살짝 더 선명하게 */
.shift_schedule select.form-control:hover {
    border-color: #adb5bd;
}

/* 🏖️ 주말 자동 휴무 스위치 커스텀 스타일 */
.shift_schedule .weekend-switch-container {
    padding-top: 24px; /* 기존 pt-4 대응 */
}

.shift_schedule .weekend-switch-input {
    cursor: pointer;
    width: 2.5em !important;
    height: 1.25em !important;
}

.shift_schedule .weekend-switch-label {
    cursor: pointer;
    color: #495057;
    font-weight: 700; /* fw-bold 대응 */
    margin-left: 8px; /* ms-2 대응 */
    user-select: none;
}

/* 스위치 활성화 시 색상 (선택 사항) */
.shift_schedule .weekend-switch-input:checked {
    background-color: #20c997;
    border-color: #20c997;
}

.weekend-switch-container { padding-top: 24px; }
.weekend-switch-input { cursor: pointer; width: 2.5em !important; height: 1.25em !important; }
.weekend-switch-label { cursor: pointer; color: #495057; font-weight: 700; margin-left: 8px; user-select: none; }
.weekend-switch-input:checked { background-color: #20c997; border-color: #20c997; }

#patternResult {
    padding: 8px 12px;
    line-height: 1.4;
    word-break: break-all; /* 패턴이 길면 자연스럽게 줄바꿈 */
    height: auto;          /* 높이 자동 조절 */
    min-height: 40px;
}

/* 패턴 미리보기 글자 색상 */
/* 요일 색상 */
.day-sun { color: #dc3545; font-weight: bold; } /* 일요일 빨강 */
.day-sat { color: #0d6efd; font-weight: bold; } /* 토요일 파랑 */
.day-normal { color: #555; }                     /* 평일 회색 */

/* 근무별 색상 */
.shift-work { color: #000000; font-weight: 800; } /* D, E, N (검정) */
.shift-duty { color: #000000; font-weight: 800; } /* F (당직 - 보라색) */
.shift-off  { color: #dc3545; font-weight: 800; } /* O, S (오프 - 빨간색) */

#patternResult {
    line-height: 1.6;
    padding: 10px;
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 6px;
}

/* 주말 자동휴무 안내 문구 스타일 */
.weekend-help-text {
    font-size: 0.75rem;
    color: #666;
    line-height: 1.4;
    margin-top: 0.25rem; /* mt-1 대체 */
}

/* 미리보기 강조 텍스트 (prefix) */
.preview-prefix {
    color: #333;
    font-weight: bold;
}

/* 비활성화된 스위치와 라벨 스타일 */
.form-check-input:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.form-check-input:disabled ~ .form-check-label {
    color: #999; /* 글자색을 연하게 */
    cursor: not-allowed;
    text-decoration: line-through; /* 선택 불가라는 시각적 암시 (선택사항) */
}

/* 1. 테이블: collapse를 버리고 separate로 변경 (선 사라짐 방지 핵심) */
.shift_schedule .schedule-table {
    border-collapse: separate !important; /* 버그 방지를 위해 반드시 separate */
    border-spacing: 0 !important;        /* 셀 사이 간격을 0으로 해서 얇은 선 유지 */

    /* 전체 테두리의 위쪽과 왼쪽만 먼저 그려줍니다 */
    border-top: 1px solid #ccc !important;
    border-left: 1px solid #ccc !important;

    width: max-content !important;
    table-layout: fixed;
}

.shift_schedule .schedule-table th,
.shift_schedule .schedule-table td {
    background-clip: padding-box !important;
    border-right: 1px solid #ccc !important;
    border-bottom: 1px solid #ccc !important;
    border-left: none !important;
    border-top: none !important;
    background-clip: padding-box !important;
    padding: 4px;
    /* --- 아래 두 줄 추가 --- */
    text-align: center;
    vertical-align: middle;
}
/* 3. 상단 박스들이 잘리지 않게 너비 동기화 */
.shift_schedule .modal-body {
    display: inline-block !important; /* 내용물(테이블) 너비만큼 부모도 늘어남 */
    min-width: 100%;
    overflow-x: auto !important;
    padding: 16px;
    box-sizing: border-box;
}

.shift_schedule .advanced-rule-box,
.shift_schedule .schedule-month,
.shift_schedule .schedule-legend {
    display: block !important;
    width: 100% !important; /* 이제 늘어난 부모(inline-block) 덕분에 끝까지 늘어남 */
    min-width: 100%;
    box-sizing: border-box;
    margin-bottom: 15px;
}

/* "지난달이면서 동시에 주말인 칸"이라고 콕 집어서 말해줌으로써 파란색을 회색으로 강제 굴복시킴 */
.shift_schedule .schedule-table td.virtual-prev.weekend.sat,
.shift_schedule .schedule-table td.virtual-prev.weekend.sun {
    background-color: #f3f3f3 !important; /* 토요일/일요일 색상보다 이게 더 중요하다고 표시 */
    color: #888 !important;
}

/* 1. 지난달 칸(virtual-prev)은 값이 있든 없든 무조건 회색으로 강제 고정 */
.shift_schedule .schedule-table td.virtual-prev {
    background-color: #f3f3f3 !important;
    /* 글자색도 살짝 흐리게(회색빛) 해서 과거 기록임을 명시 */
    color: #888 !important;
    font-weight: normal !important;
}

/* 2. 지난달 칸에 생기는 '수동 입력 표시(회색 밑줄)' 강제로 숨기기 */
.shift_schedule .schedule-table td.virtual-prev::before {
    display: none !important;
}

/* 3. 혹시나 남아있을 수 있는 주말 배경색 간섭까지 한 번 더 차단 */
.shift_schedule .schedule-table td.virtual-prev.weekend {
    background-color: #f3f3f3 !important;
}

/* 고급 근무 규칙 박스 등이 hidden 클래스를 가질 때 display: block !important 를 이기도록 강제 */
.shift_schedule .advanced-rule-box.hidden {
    display: none !important;
}

/* 총 근무일수 강조 스타일 (CSP 호환) */
.shift_schedule .highlight-total-work {
    color: #1864ab;
    font-weight: 800;
    margin-right: 6px;
}

/* 1. 그룹 헤더 전체에 입체감과 깊이감 부여 */
.shift_schedule .group-row td {
    padding: 12px 15px !important; /* 높이를 살짝 높여서 여유공간 확보 */
    font-size: 15px !important;
    letter-spacing: -0.5px;
    position: relative;

    /* 하단 그림자로 살짝 튀어나온 느낌(Elevation) 부여 */
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), 0 2px 4px rgba(0,0,0,0.08) !important;
    border-bottom: 1px solid rgba(0,0,0,0.1) !important;
    z-index: 10; /* 그림자가 아래 행을 살짝 덮도록 */
}


/* 각 직급별 그라데이션 및 테두리 디테일 강화 */
/* Senior (Orange) */
.shift_schedule .group-row[data-grade="senior"] td {
    background: linear-gradient(to bottom, #fff9f0, #FFF4E5) !important;
    border-left: 8px solid #f59f00 !important;
    color: #855d00;
}

/* Intermediate (Green) */
.shift_schedule .group-row[data-grade="intermediate"] td {
    background: linear-gradient(to bottom, #f3fcf4, #ebfbee) !important;
    border-left: 8px solid #40c057 !important;
    color: #2b8a3e;
}

/* Junior (Purple) */
.shift_schedule .group-row[data-grade="junior"] td {
    background: linear-gradient(to bottom, #f8f7ff, #f3f0ff) !important;
    border-left: 8px solid #845ef7 !important;
    color: #5f3dc4;
}

/* 4. 마우스를 올렸을 때의 반응 (인터랙티브 강조) */
.shift_schedule .group-row:hover td {
    filter: brightness(0.98); /* 살짝 어두워지며 눌릴 것 같은 느낌 */
}

/* 5. 실제로 사람을 끌고 이 위로 올라왔을 때 (Drop Target) */
.shift_schedule .group-row.drop-target td {
    background: #e7f5ff !important; /* 전체가 파란색으로 변하며 */
    border-left: 8px solid #228be6 !important; /* 파란색 바 강조 */
    outline: 2px dashed #228be6 !important; /* 점선 테두리로 '여기에 놓으세요' 표시 */
    box-shadow: 0 0 15px rgba(34, 139, 230, 0.3) !important;
}

/* 25가 넘거나 1보다 작을 때 입력창을 빨갛게 강조 */
.unit-input input:invalid {
    border-color: #fa5252 !important;
    background-color: #fff5f5;
}

/* 인원 제한 안내 문구 스타일 */
.shift_schedule .input-limit-text {
    font-size: 14px;
    color: #868e96; /* 부드러운 회색 */
    margin-top: 6px;
    margin-bottom: 0;
    letter-spacing: -0.3px;
    font-weight: 500;
}

/* 💡 만약 사용자가 25를 입력하면 문구 색상을 살짝 강조하고 싶을 때 (선택 사항) */
.shift_schedule .input-limit-text.at-limit {
    color: #e03131; /* 주의를 끄는 빨간색 */
    font-weight: 700;
}

/* 가이드 디자인 다듬기 */
.usage-guide { text-align: left; padding: 15px; }
.usage-guide h3 { font-size: 16px; color: #2c3e50; margin: 15px 0 10px 0; }
.usage-guide h4 { font-size: 14px; color: #34495e; margin: 10px 0 5px 0; }
.usage-guide ul { padding-left: 20px; margin-bottom: 10px; }
.usage-guide li { font-size: 15px; margin-bottom: 5px; line-height: 1.4; color: #444; }
.usage-guide .sub-text { font-size: 12px; color: #7f8c8d; margin-bottom: 8px; font-style: italic; }
.usage-guide hr { border: 0; border-top: 1px solid #eee; margin: 15px 0; }
.tips-section { background: #fdfdfd; padding: 10px; border-radius: 5px; border: 1px dashed #ddd; }

/* --- 가이드 모달 강제 줄바꿈 방지 --- */
.usage-guide li {
    display: list-item !important; /* 혹시 걸려있을 flex 속성을 무효화 */
    line-height: 1.6;
    margin-bottom: 8px;
    word-break: keep-all; /* 단어 중간에 뚝 끊기지 않게 보호 */
}

.usage-guide li strong,
.usage-guide li b,
.usage-guide li span {
    display: inline !important; /* 강제로 한 줄(inline)에 찰싹 붙어있게 만듭니다 */
    margin: 0 !important;
    padding: 0 !important;
}

.usage-guide p.sub-text {
    display: block !important;
    margin-top: 2px;
    margin-bottom: 8px;
}

/* ⭐ PC(웹)에서는 삐쭉 세모 버튼을 절대 안 보이게 삭제! */
.shift_schedule .footer-drag-handle {
    display: none !important;
}

/* 자동 채우기 버튼 기본(PC) 사이즈 */
.shift_schedule .btn-autofill-main {
    height: 42px !important;
    padding: 0 24px !important;
    font-size: 15px !important;
}

/* JS 터치 드래그 시 모바일 스크롤 방지용 클래스 */
body.no-scroll {
    overflow: hidden !important;
}



/* =======================================
   ✨ [최종] 툴팁 제자리(바로 위) 배치 & 화면 잘림 방지
======================================= */
/* 1. 다시 툴팁이 '클릭한 뱃지 바로 위'에 뜨도록 원상복구 */
.shift_schedule .analysis-panel { position: static !important; }
.shift_schedule .analysis-item.clickable-badge { position: relative !important; }

/* 2. 툴팁 공통 사이즈 및 기본 형태 */
.shift_schedule .analysis-popover {
    position: absolute !important;
    bottom: calc(100% + 10px) !important; /* 무조건 클릭한 뱃지 바로 위! */
    width: max-content !important;
    max-width: 280px !important; /* 모바일에서 너무 길어지지 않게 폭 제한 */
    z-index: 10005 !important;
    white-space: normal !important;
    word-break: keep-all !important;
}

/* 3. ⭐ 핵심: 뱃지 종류(위치)에 따라 말풍선이 뻗는 방향 조절 */

/* 👉 [오른쪽에 주로 위치하는 뱃지] 오프 부족, 배정 문제
      -> 화면 밖으로 안 나가게 말풍선을 '왼쪽'으로 뻗게 함 */
.shift_schedule .analysis-item[data-key="offShortage"] .analysis-popover,
.shift_schedule .analysis-item[data-key="chargePhysical"] .analysis-popover {
    left: auto !important;
    right: -10px !important; /* 오른쪽을 고정하고 왼쪽으로 길어짐 */
    transform: none !important;
}
/* 말풍선 꼬리(세모)도 뱃지 중앙에 맞게 위치 이동 */
.shift_schedule .analysis-item[data-key="offShortage"] .analysis-popover::after,
.shift_schedule .analysis-item[data-key="chargePhysical"] .analysis-popover::after {
    left: auto !important;
    right: 35px !important;
    transform: none !important;
}

/* 👈 [왼쪽/중앙에 주로 위치하는 뱃지] 차지 부족
      -> 말풍선을 '오른쪽'으로 뻗게 함 */
.shift_schedule .analysis-item[data-key="charge"] .analysis-popover {
    left: -10px !important;
    right: auto !important;
    transform: none !important;
}
.shift_schedule .analysis-item[data-key="charge"] .analysis-popover::after {
    left: 35px !important;
    right: auto !important;
    transform: none !important;
}



/* ---------------------------------------------------------
   ✨ 개인 달력 저장 전용 커스텀 스타일 (3중 모달 대응)
--------------------------------------------------------- */

/* 모달 컨텐츠 박스 */
.shift_schedule .name-select-content {
    width: 300px;
    background: #ffffff;
    border-radius: 24px;
    padding: 24px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
    text-align: center;
    border: 1px solid #eee;
    animation: modalPop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes modalPop {
    from { transform: scale(0.8); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.shift_schedule .name-select-title { font-size: 18px; font-weight: 800; color: #222; margin-bottom: 6px; }
.shift_schedule .name-select-desc { font-size: 12px; color: #888; margin-bottom: 16px; }

/* ==========================================================
   📅 [통합본] 개인 달력 저장용 (모달 UI + 캡처 색상)
========================================================== */
/* --- 1. 이름 선택 모달 화면 디자인 (최종 세련된 UX) --- */
.shift_schedule .name-select-content {
    width: 300px;
    background: #ffffff;
    border-radius: 24px;
    padding: 24px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
    text-align: center;
    border: 1px solid #eee;
}

/* ... 이름 리스트 스타일 (기존 유지) ... */
.shift_schedule .name-list-wrapper {
    max-height: 220px;
    overflow-y: auto;
    margin: 15px 0;
    border: 1.5px solid #f1f3f5;
    border-radius: 14px;
}
.shift_schedule .name-item {
    padding: 14px;
    border-bottom: 1px solid #f8f9fa;
    cursor: pointer;
    font-size: 15px;
    color: #444;
    transition: 0.2s;
}
.shift_schedule .name-item:hover {
    background: #fff5f5;
    color: #ff6b6b;
}
.shift_schedule .name-item.selected {
    background: #fff0f0 !important;
    color: #e03131 !important;
    font-weight: 800;
}

.shift_schedule .btn-cancel-simple { background: #f1f3f5; color: #868e96; }
.shift_schedule .btn-save-simple { background: #ff6b6b; color: white; font-weight: 700; }


/* --- 2. 📸 이미지 저장용 달력 디자인 (상속 버그 해결 버전) --- */
.shift_schedule.cal-cap-area {
    position: fixed; top: -9999px; left: -9999px;
    width: 600px; background-color: #ffffff !important;
    padding: 40px; border-radius: 24px; font-family: sans-serif;
}
.shift_schedule .cal-cap-header { text-align: center; margin-bottom: 25px; }
.shift_schedule .cal-cap-year { font-size: 16px; color: #888; }
.shift_schedule .cal-cap-title { font-size: 28px; font-weight: 800; color: #333; }
.shift_schedule .cal-cap-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 12px; }
.shift_schedule .cal-cap-cell {
    height: 85px;
    background-color: #f1f3f5 !important; /* 기존 #fcfcfc보다 더 진한 회색으로 변경 */
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px;
}
.shift_schedule .cal-cap-date { font-size: 12px; font-weight: bold; margin-bottom: 6px; color: #555; }

/* 3. 캡처용 배지 색상 강제 고정 (background-color 필수) */
.shift_schedule .cal-cap-badge {
    width: 40px; height: 40px; border-radius: 50%;
    display: flex !important; align-items: center; justify-content: center;
    font-weight: 900; font-size: 18px;
    color: #000000 !important; /* 글자색은 선명하게 검정 */
}

/* 🚀 [최종] 비근무일(비, 휴 등) 빨간색 글자 강제 적용 */
.shift_schedule.cal-cap-area .cal-cap-badge.cal-cap-shift-plain {
    color: #e03131 !important;          /* 🍎 무조건 빨간색! (검정색 스타일을 이김) */
    border: none !important;            /* 테두리 제거 */
    background-color: transparent !important; /* 배경 투명 */
    font-weight: 800 !important;        /* 글자 두껍게 */
    font-size: 20px !important;         /* 크기도 살짝 키움 */
    box-shadow: none !important;        /* 그림자 제거 */
    width: auto !important;             /* 원형 박스 제약 해제 */
    height: auto !important;
}


/* 근무별 색상 (Day, Evening, Night) */
.shift_schedule .cal-cap-badge.shift-D { background-color: #fff3bf !important; }
.shift_schedule .cal-cap-badge.shift-E { background-color: #d0ebff !important; }
.shift_schedule .cal-cap-badge.shift-N { background-color: #e5dbff !important; }
.shift_schedule .cal-cap-badge.shift-F { background-color: #ffd8a8 !important; }

/* 🔴 오프(O, S, V, P) 전용: 하얀 배경 + 빨간 테두리 */
.shift_schedule .cal-cap-badge.shift-O,
.shift_schedule .cal-cap-badge.shift-S,
.shift_schedule .cal-cap-badge.shift-V,
.shift_schedule .cal-cap-badge.shift-P,
.shift_schedule .cal-cap-badge.shift-L {
    background-color: #ffffff !important;
    color: #e03131 !important;
    border: 2.5px solid #ff6b6b !important;
    box-shadow: none !important;
}

/* 주말(일/토) 날짜 색상 */
.shift_schedule .cal-cap-dow.sun, .shift_schedule .cal-cap-date.sun { color: #ff6b6b !important; }
.shift_schedule .cal-cap-dow.sat, .shift_schedule .cal-cap-date.sat { color: #4dabf7 !important; }

/* ==========================================================
   📸 [최종 수정] 개인 달력 캡처 전용 스타일 (그리드 실종 해결)
========================================================== */

/* 1. 캡처 영역 레이아웃 (포지션을 수정하여 렌더링 누락 방지) */
.shift_schedule.cal-cap-area {
    position: absolute; top: 0; left: -2000px; /* 화면 왼쪽 먼 곳에 배치 */
    width: 600px; background-color: #ffffff !important;
    padding: 40px; border-radius: 24px; font-family: sans-serif;
    z-index: -1;
}
.shift_schedule .cal-cap-header { text-align: center; margin-bottom: 25px; }
.shift_schedule .cal-cap-year { font-size: 16px; color: #888; }
.shift_schedule .cal-cap-title { font-size: 28px; font-weight: 800; color: #333; margin-top: 5px; }

/* 2. 그리드 설정 (가로로 7칸 확실히 고정) */
.shift_schedule .cal-cap-grid {
    display: grid !important;
    grid-template-columns: repeat(7, 1fr) !important;
    gap: 10px !important;
    width: 520px !important; /* 내부 폭 고정 */
}
/* 🚀 2. 요일(일~토) 헤더 배경색 및 디자인 */
.shift_schedule .cal-cap-dow {
    text-align: center;
    font-size: 13px;
    font-weight: bold;
    padding: 6px 0;
    border-radius: 6px;
    background-color: #f1f3f5 !important; /* 기본(월~금) 옅은 회색 배경 */
    color: #495057;
    margin-bottom: 5px;
}

/* 일요일 배경 (옅은 빨강) */
.shift_schedule .cal-cap-dow.sun {
    background-color: #fff5f5 !important;
    color: #e03131 !important;
}

/* 토요일 배경 (옅은 파랑) */
.shift_schedule .cal-cap-dow.sat {
    background-color: #e7f5ff !important;
    color: #1971c2 !important;
}

.shift_schedule .cal-cap-cell {
    height: 80px; background: #fcfcfc; border-radius: 12px;
    display: flex; flex-direction: column; align-items: center; padding: 6px;
}
.shift_schedule .cal-cap-date { font-size: 11px; font-weight: bold; margin-bottom: 4px; color: #555; }

/* 3. 캡처용 배지 색상 강제 고정 (클래스명 보정) */
.shift_schedule .cal-cap-badge {
    width: 38px; height: 38px; border-radius: 50%;
    display: flex !important; align-items: center; justify-content: center;
    font-weight: 900; font-size: 18px; color: #000000 !important;
}
/* 🚀 1. 요약 바와 요일 헤더 사이 여백 추가 */
.shift_schedule .cal-cap-summary-wrap {
    margin-bottom: 15px !important; /* 답답하지 않게 충분한 여백 부여 */
}

/* 근무별 색상 (JS의 cap-shift-V와 일치시킴) */
.shift_schedule .cap-shift-D { background-color: #fff3bf !important; }
.shift_schedule .cap-shift-E { background-color: #d0ebff !important; }
.shift_schedule .cap-shift-N { background-color: #e5dbff !important; }
.shift_schedule .cap-shift-F { background-color: #ffd8a8 !important; }

/* 🔴 오프 전용: 하얀 배경 + 빨간 테두리 */
.shift_schedule .cap-shift-O,
.shift_schedule .cap-shift-S,
.shift_schedule .cap-shift-V,
.shift_schedule .cap-shift-P,
.shift_schedule .cap-shift-L {
    background-color: #ffffff !important;
    color: #e03131 !important;
    border: 2px solid #ff6b6b !important;
    box-shadow: none !important;
}


/* --- 1. 이름 선택 모달 화면 디자인 (최종 세련된 UX) --- */
.shift_schedule .name-select-content {
    width: 300px;
    background: #ffffff;
    border-radius: 24px;
    padding: 24px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
    text-align: center;
    border: 1px solid #eee;
}

/* ... 이름 리스트 스타일 (기존 유지) ... */
.shift_schedule .name-list-wrapper {
    max-height: 220px;
    overflow-y: auto;
    margin: 15px 0;
    border: 1.5px solid #f1f3f5;
    border-radius: 14px;
}
.shift_schedule .name-item {
    padding: 14px;
    border-bottom: 1px solid #f8f9fa;
    cursor: pointer;
    font-size: 15px;
    color: #444;
    transition: 0.2s;
}
.shift_schedule .name-item:hover {
    background: #fff5f5;
    color: #ff6b6b;
}
.shift_schedule .name-item.selected {
    background: #fff0f0 !important;
    color: #e03131 !important;
    font-weight: 800;
}

/* ==========================================================
   ✨ 버튼 영역 UI 최적화 (촌스러운 테두리 제거 & 색상 변경)
========================================================== */

/* 공통: 모달 내부의 모든 버튼 기본 스타일 초기화 */
.shift_schedule .name-select-btns button {
    border: none !important;      /* 🚫 촌스러운 테두리 완전 삭제 */
    outline: none !important;     /* 🚫 클릭 시 생기는 파란/검정 아웃라인 삭제 */
    border-radius: 10px;          /* 모던하고 둥근 코너 적용 */
    padding: 10px 20px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* 1. "취소" 버튼 (`.btn-cancel-simple`): 부드럽고 세련된 회색 */
.shift_schedule .btn-cancel-simple {
    background-color: #f1f3f5;    /* 부드러운 회색 배경 */
    color: #868e96;               /* 연한 회색 글씨 */
}

/* 취소 버튼 마우스 올렸을 때 (Hover) */
.shift_schedule .btn-cancel-simple:hover {
    background-color: #e9ecef;    /* 약간 더 진한 회색 */
    color: #495057;               /* 더 선명한 회색 글씨 */
    transform: translateY(-1px);  /* 아주 살짝 뜨는 효과 */
}

/* 2. "이미지 저장" 버튼 (`.btn-save-simple`): SnapTools 프라이머리 블루 */
.shift_schedule .btn-save-simple {
    /* 🚀 [최종 해결] 산호색(Red/My Duty)에서 세련된 SnapTools 블루로 변경! */
    background-color: #228be6;    /* SnapTools의 메인 블루 */
    color: white;                 /* 글씨색은 흰색 */
    font-weight: 700;             /* 선명하게 700으로 복구 */
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

/* 이미지 저장 버튼 마우스 올렸을 때 (Hover) */
.shift_schedule .btn-save-simple:hover {
    background-color: #1c7ed6;    /* 약간 더 진한 블루 */
    transform: translateY(-1px);
    box-shadow: 0 6px 12px rgba(34, 139, 230, 0.3);
}

/* 이미지 저장 버튼 클릭 시 (Active) */
.shift_schedule .btn-save-simple:active {
    background-color: #1971c2;    /* 가장 진한 블루 (눌린 느낌) */
    transform: translateY(1px);   /* 살짝 내려가는 효과 */
    box-shadow: inset 0 3px 5px rgba(0,0,0,0.2); /* 안쪽 그림자로 눌린 느낌 표현 */
}


/* ============================================================
   ✨ 패턴 모드 전용: 근무 명칭 설정 바 (최종 디자인)
   ============================================================ */

/* 1. 전체 바 컨테이너 */
.shift_schedule .alias-config-bar {
    display: flex;
    align-items: center;
    justify-content: center; /* 중앙 정렬 */
    gap: 15px;
    background: #ffffff;
    padding: 12px 20px;
    border-radius: 14px;
    border: 1.5px solid #e9ecef;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
    margin-bottom: 5px;
    overflow-x: auto; /* 항목이 많아지면 모바일에서 가로 스크롤 */
    white-space: nowrap;
}

/* 2. 그룹화 (근무 / 휴가 구분) */
.shift_schedule .alias-group {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* 3. 중앙 세로 구분선 */
.shift_schedule .alias-divider-v {
    width: 1px;
    height: 24px;
    background-color: #dee2e6;
    margin: 0 8px;
}

/* 4. 개별 아이템 (D: [입력]) */
.shift_schedule .alias-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* 5. 왼쪽 심볼 (D, E, N 등) */
.shift_schedule .alias-item .symbol {
    font-size: 12px;
    font-weight: 900;
    color: #adb5bd; /* 부드러운 회색 */
    background: #f8f9fa;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
}

/* 6. 입력창 스타일 (세련된 밑줄형) */
.shift_schedule .alias-input {
    width: 60px; /* 폭 최적화 */
    border: none !important;
    border-bottom: 2px solid #e9ecef !important;
    background: transparent !important;
    text-align: center;
    font-weight: 700;
    font-size: 14px;
    color: #495057;
    padding: 2px 0 !important;
    transition: all 0.2s ease;
    border-radius: 0 !important; /* 밑줄형이므로 둥근 모서리 제거 */
}

/* 입력창 클릭 시(Focus) */
.shift_schedule .alias-input:focus {
    outline: none !important;
    border-bottom-color: #228be6 !important; /* SnapTools 메인 블루 */
    color: #228be6;
}



/* ============================================================
   ✨ 패턴 모드 명칭 설정 바: 가로 스크롤 최적화
   ============================================================ */

.shift_schedule .alias-config-bar {
    display: flex;
    align-items: center;
    gap: 20px;
    background: #ffffff;
    padding: 12px 20px;
    border-radius: 14px;
    border: 1.5px solid #e9ecef;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);

    /* 🚀 가로 스크롤 핵심 설정 */
    flex-wrap: nowrap !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch; /* 모바일 부드러운 스크롤 */
}

/* 스크롤바가 너무 투박하지 않게 숨기거나 얇게 만들기 */
.shift_schedule .alias-config-bar::-webkit-scrollbar {
    height: 4px;
}
.shift_schedule .alias-config-bar::-webkit-scrollbar-thumb {
    background: #dee2e6;
    border-radius: 10px;
}

.shift_schedule .alias-group {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0; /* 내용물이 줄어들지 않게 고정 */
}

.shift_schedule .alias-divider-v {
    width: 1px;
    height: 20px;
    background-color: #dee2e6;
    flex-shrink: 0;
}

.shift_schedule .alias-item {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.shift_schedule .alias-input {
    width: 50px !important;
    border: none !important;
    border-bottom: 2px solid #f1f3f5 !important;
    background: transparent !important;
    text-align: center;
    font-weight: 700;
    font-size: 14px;
    padding: 2px 0 !important;
}

.shift_schedule .small-title {
    font-size: 18px;
    font-weight: 700;
    margin-left: 5px;
}

/* ============================================================
   ✨ 패턴 모드 명칭 설정 바: 2단 세로 배열 최적화
   ============================================================ */

.shift_schedule .alias-rows-wrapper {
    display: flex;
    flex-direction: column;
    gap: 8px; /* 두 줄 사이의 간격 */
}

.shift_schedule .alias-config-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #ffffff;
    padding: 8px 16px;
    border-radius: 12px;
    border: 1.5px solid #e9ecef;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);

    /* 🚀 모바일에서도 한 줄 유지를 위해 최소 너비 확보 */
    flex-wrap: nowrap;
    overflow-x: auto;
}

/* 왼쪽 근무/휴가 태그 디자인 */
.shift_schedule .line-tag {
    font-size: 11px;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 6px;
    margin-right: 4px;
    flex-shrink: 0;
}
.shift_schedule .line-tag.work { background: #e7f5ff; color: #228be6; } /* 파란색 태그 */
.shift_schedule .line-tag.leave { background: #fff5f5; color: #fa5252; } /* 빨간색 태그 */

.shift_schedule .alias-item {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

/* 심볼 디자인 살짝 슬림하게 */
.shift_schedule .alias-item .symbol {
    font-size: 10px;
    font-weight: 900;
    color: #adb5bd;
    background: #f8f9fa;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
}

/* 입력창 폭 조절 */
.shift_schedule .alias-input {
    width: 52px !important;
    border: none !important;
    border-bottom: 2px solid #f1f3f5 !important;
    background: transparent !important;
    text-align: center;
    font-weight: 700;
    font-size: 14px;
    padding: 2px 0 !important;
    transition: border-bottom 0.2s;
}

.shift_schedule .alias-input:focus {
    border-bottom-color: #228be6 !important;
    outline: none;
}

/* 모바일 스크롤바 숨기기 (깔끔함 유지) */
.shift_schedule .alias-config-bar::-webkit-scrollbar {
    display: none;
}

.shift_schedule .alias-item .symbol {
    font-size: 11px;
    font-weight: 900;
    color: #868e96;
    background: #f1f3f5;

    /* 🚀 한글 1글자가 들어가도 동그랗고 예쁘게 유지되도록 너비 조정 */
    width: 24px;
    height: 24px;
    min-width: 24px;

    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    transition: all 0.2s;
}

/* 입력창에 포커스 가면 기호 박스도 같이 강조 */
.shift_schedule .alias-input:focus + .symbol,
.shift_schedule .alias-item:focus-within .symbol {
    background: #e7f5ff;
    color: #228be6;
}
/* 🚨 중복된 약자 경고 스타일 */
.shift_schedule .symbol.symbol-error {
    background-color: #fff5f5 !important;
    color: #e03131 !important;
    border: 2px solid #ff8787 !important;
    animation: shake 0.4s; /* 흔들리는 효과 */
}

/* 쉐이크 애니메이션 */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-2px); }
    75% { transform: translateX(2px); }
}

/* 시작 버튼이 잠겼을 때 스타일 */
.shift_schedule .btn-generate-main:disabled {
    background: #ced4da !important;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
}

/* ============================================================
   ✨ 패턴 모드 명칭 설정 영역 (CSP 대응 & 2단 레이아웃)
   ============================================================ */

/* 제목 옆 힌트 텍스트 */
.shift_schedule .alias-hint {
    font-weight: normal !important;
    font-size: 11px !important;
    color: #868e96;
    margin-left: 4px;
}

/* 2단 래퍼 */
.shift_schedule .alias-rows-wrapper {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* 개별 설정 줄 (근무/휴가) */
.shift_schedule .alias-config-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #ffffff;
    padding: 8px 16px;
    border-radius: 12px;
    border: 1.5px solid #e9ecef;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* 태그 디자인 (근무/휴가) */
.shift_schedule .line-tag {
    font-size: 11px;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 6px;
    margin-right: 4px;
    flex-shrink: 0;
}
.shift_schedule .line-tag.work { background: #e7f5ff; color: #228be6; }
.shift_schedule .line-tag.leave { background: #fff5f5; color: #fa5252; }

/* 약자(Symbol) 박스 */
.shift_schedule .alias-item {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.shift_schedule .symbol {
    font-size: 11px;
    font-weight: 900;
    color: #868e96;
    background: #f1f3f5;
    width: 24px;
    height: 24px;
    min-width: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    transition: all 0.2s;
}

/* 중복 발생 시 에러 스타일 */
.shift_schedule .symbol.symbol-error {
    background-color: #fff5f5 !important;
    color: #e03131 !important;
    border: 1.5px solid #ff8787 !important;
}

/* 입력창 스타일 */
.shift_schedule .alias-input {
    width: 52px !important;
    border: none !important;
    border-bottom: 2px solid #f1f3f5 !important;
    background: transparent !important;
    text-align: center;
    font-weight: 700;
    font-size: 14px;
    padding: 2px 0 !important;
    transition: border-bottom 0.2s;
}
.shift_schedule .alias-input:focus {
    border-bottom-color: #228be6 !important;
    outline: none;
}

/* ⚠️ 중복 경고 메시지 */
.shift_schedule .alias-error-msg {
    margin-top: 5px;
    margin-bottom: 5px;
    padding: 8px 12px;
    background-color: #fff5f5;
    border-radius: 8px;
    border: 1px solid #ffc9c9;
    color: #e03131;
    font-size: 13px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
}
/*.shift_schedule .alias-error-msg.hidden { display: none; }*/

/* 근무 명칭 설정 항목 숨김 클래스 */
.shift_schedule .alias-item.hidden {
    display: none !important;
}
/* =========================================
   ✨ 감각적인 "공란 분석" 카드형 디자인
========================================= */

/* 1. 전체 컨테이너: 그림자와 라운딩으로 부드럽게 */
.shift_schedule .analysis-popover.type-info {
    background-color: #ffffff !important;
    border: 1px solid #e9ecef !important; /* 선을 아주 연하게 */
    border-radius: 16px !important;       /* 모서리를 더 둥글게 */
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12) !important; /* 깊이감 있는 그림자 */
    padding: 20px !important;
    min-width: 300px !important;
}

/* 2. 제목 영역: 폰트 두께와 색상 조절 */
.shift_schedule .analysis-popover.type-info strong {
    font-size: 16px;
    font-weight: 800;
    color: #212529;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* 3. 리스트: 촌스러운 점(•) 대신 박스 레이아웃 적용 */
.shift_schedule .analysis-popover.type-info .analysis-detail-list {
    margin: 0 !important;
    padding: 0 !important;
    display: flex;
    flex-direction: column;
    gap: 10px; /* 항목 간 간격 */
}

.shift_schedule .analysis-popover.type-info .analysis-detail-list li {
    background: #f8f9fa; /* 항목마다 연한 배경 깔기 */
    padding: 12px 15px !important;
    border-radius: 10px;
    border: 1px solid #f1f3f5;
    margin-bottom: 0 !important;
    line-height: 1.5;
}

/* 촌스러운 파란 점 제거 */
.shift_schedule .analysis-popover.type-info .analysis-detail-list li::before {
    content: none !important;
}

/* 4. 내부 텍스트 강조 디테일 */
.shift_schedule .analysis-popover.type-info b {
    font-size: 15px;
    color: #1c7ed6 !important; /* 신뢰감 있는 블루 */
}

/* '배정 실패' 강조 시 빨간색 포인트 */
.shift_schedule .analysis-popover.type-info li:first-child b {
    color: #e03131 !important;
}

.shift_schedule .analysis-popover.type-info small {
    display: block;
    font-size: 12px;
    color: #868e96; /* 부연 설명은 연하게 */
    margin-top: 4px;
}

/* 5. 하단 팁 영역: 배경 분리로 깔끔하게 마무리 */
.shift_schedule .analysis-popover.type-info .analysis-detail-tip {
    margin-top: 15px !important;
    padding: 10px 12px !important;
    background-color: #e7f5ff; /* 팁 영역에만 아주 연한 하늘색 배경 */
    border-radius: 8px;
    border-top: none !important;
    color: #1864ab !important;
    font-size: 14px !important;
    font-weight: 500;
    line-height: 1.4;
}

/* 🚨 이건 새로 추가하는 에러용 스타일입니다! (기존 type-info 아래에 추가) */
.shift_schedule .analysis-popover.type-error {
    background-color: #fff5f5 !important; /* 👈 배경을 연한 빨강으로! */
    border: 1.5px solid #ffa8a8 !important;
    box-shadow: 0 12px 30px rgba(201, 42, 42, 0.15) !important;
    padding: 20px !important;
    min-width: 300px !important;
    border-radius: 16px !important;
}

/* 에러 팝업 안의 제목 색상 */
.shift_schedule .analysis-popover.type-error strong {
    color: #c92a2a !important;
}

/* 에러 팝업 하단 팁 영역 색상 */
.shift_schedule .analysis-popover.type-error .analysis-detail-tip {
    background-color: #ffe3e3 !important; /* 👈 팁 영역도 빨간 톤으로 */
    color: #c92a2a !important;
    margin-top: 15px !important;
    padding: 10px 12px !important;
    border-radius: 8px !important;
}
/* ⚠️ 차지 부족 팝오버를 배정 문제와 똑같은 디자인으로 통일 */
.shift_schedule .analysis-popover.type-warning {
    background-color: #fff5f5 !important; /* 연한 핑크 배경 */
    border: 1.5px solid #ffa8a8 !important; /* 연한 레드 테두리 */
    box-shadow: 0 12px 30px rgba(201, 42, 42, 0.15) !important;
    padding: 20px !important;
    min-width: 300px !important;
    border-radius: 16px !important;
}

/* 제목 색상 변경 */
.shift_schedule .analysis-popover.type-warning strong {
    color: #c92a2a !important; /* 진한 레드 */
}

/* 하단 팁 영역 디자인 통일 */
.shift_schedule .analysis-popover.type-warning .analysis-detail-tip {
    background-color: #ffe3e3 !important;
    color: #c92a2a !important;
    margin-top: 15px !important;
    padding: 10px 12px !important;
    border-radius: 8px !important;
}



/* 1. 리스트 전체의 기본 점 제거 */
.shift_schedule .analysis-popover.type-info .analysis-detail-list {
    list-style: none !important; /* 브라우저 기본 점 제거 */
    margin: 0 !important;
    padding: 0 !important;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* 2. 혹시 남아있을 수 있는 개별 항목의 점(marker) 강제 숨김 */
.shift_schedule .analysis-popover.type-info .analysis-detail-list li {
    list-style-type: none !important; /* 점 타입 없앰 */
    display: block !important;       /* list-item 대신 block으로 변경하여 marker 생성 차단 */

    background: #f8f9fa;
    padding: 12px 15px !important;
    border-radius: 10px;
    border: 1px solid #f1f3f5;
    margin-bottom: 0 !important;
    line-height: 1.5;
}

/* 3. 불필요한 가상 요소 확인 및 제거 */
.shift_schedule .analysis-popover.type-info .analysis-detail-list li::before {
    content: none !important; /* 혹시 CSS로 만든 커스텀 점이 있다면 제거 */
}

/* =======================================
   🚀 [절대 방어] 상단 헤더 전체 & 이름칸 십자 고정 (최종)
======================================= */

/* 1. 상단 헤더 전체: 스크롤 내릴 때 무조건 다 같이 내려옴 (top: 0) */
/*.shift_schedule .schedule-table thead th {*/
/*    position: sticky !important;*/
/*    top: 0 !important;*/
/*    left: auto !important; !* 기본적으로 가로 고정 해제 *!*/
/*    z-index: 30 !important; !* ⭐ 본문(20)보다 무조건 높게! (파묻힘 방지) *!*/
/*    background-color: #f1f3f5 !important;*/
/*    box-shadow: inset 0 -1px 0 #ccc !important;*/
/*}*/

/* 2. ⭐ 헤더의 '이름' 칸: 위아래 + 좌우 절대 사수! */
/* (col-name이든 name-cell이든 확실하게 잡아냄) */
.shift_schedule .schedule-table thead th.col-name,
.shift_schedule .schedule-table thead th.name-cell {
    left: 0 !important;
    z-index: 40 !important; /* 십자 교차점이니 가장 높게 띄움! */
    background-color: #f1f3f5 !important;
    border-right: 1px solid #ccc !important;
}

/* 3. 본문의 '이름' 칸: 오른쪽 밀 때(left: 0)만 고정 */
.shift_schedule .schedule-table tbody th.name-cell {
    position: sticky !important;
    left: 0 !important;
    z-index: 20 !important; /* ⭐ 헤더(30)보다는 낮게! */
    background-color: #ffffff !important;
    border-right: 1px solid #ccc !important;
}

/* 4. 본문의 나머지 칸(이동, 설정, 전담): 고정 없이 스크롤 따라 화면 밖으로 퇴장 */
.shift_schedule .schedule-table tbody th.handle-cell,
.shift_schedule .schedule-table tbody th.setting-cell,
.shift_schedule .schedule-table tbody th.badge-cell {
    position: static !important;
    z-index: 1 !important;
    background-color: #ffffff !important;
}


.shift_schedule .hidden-file-input {
    display: none !important;
}

.shift_schedule .custom-file-input-group {
    display: flex;
    align-items: center;
    margin-top: 5px;
    padding: 6px 12px;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    background: #fff;
}


/* ============================================================
   🚀 [최종 완결] 대시보드-모바일 하이브리드 레이아웃
   ============================================================ */

/* [1] 공통: 설정-편집 전환 애니메이션 */
#shiftContent { transition: all 0.3s ease-in-out; }



/* [6] 가이드 모달 우선순위 보정 */
.modal, #helpModal, #nameSelectModal { z-index: 3000 !important; }

/* [7] 분석 패널 디자인 */
.shift_schedule .analysis-panel {
    background: #f8f9fa !important;
    border: 1px solid #f1f3f5 !important;
    border-radius: 16px !important;
    padding: 16px !important;

    /* 💡 수정된 부분: 양옆으로 20px 여백을 주고, 너비를 자연스럽게 채우도록 조절 */
    width: auto !important;
    margin: 0 20px 15px 20px !important; /* 위 0, 오른쪽 20px, 아래 15px, 왼쪽 20px */
}
/* CSP 대응 클래스 */
.shift_schedule .text-primary-blue { color: #007bff !important; }
.shift_schedule .text-dark { color: #333 !important; }
.shift_schedule .text-muted { color: #666 !important; }
.shift_schedule .day-tooltip__row.mt { margin-top: 8px; }



/* [4] ⭐ 이름 칸 십자 고정 (헤더와 본문 모두 top 값을 일치시켜야 함) */
.shift_schedule .schedule-table thead th.col-name,
.shift_schedule .schedule-table thead th.name-cell {
    left: 0 !important;
    top: 0 !important; /* 여기도 0으로 맞춤 */
    z-index: 110 !important;
    background-color: #f1f3f5 !important;
}

.shift_schedule .visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}



/* ============================================================
   🚀 [SaaS 완결] 이중 스크롤 완전 박멸 및 버튼 양끝 정렬
   ============================================================ */




/* 6. 버튼 배치: 초기화는 왼쪽 끝, 나머지는 오른쪽 끝 */
.shift_schedule .responsive-button-group {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    padding: 10px 20px !important;     /* 💡 좌우 패딩을 0에서 20px로 변경 */
    box-sizing: border-box !important; /* 💡 패딩을 추가해도 전체 100% 너비를 초과하지 않도록 제어 */
}

.shift_schedule #clearScheduleBtn {
    border-color: #ff8787 !important;
    color: #e03131 !important;
}


/* ============================================================
   ✅ [최종 통합] 푸터 레이아웃: PC(유동형) vs 모바일(고정형)
   ============================================================ */

/* [1] PC: 푸터의 위치를 일반 흐름(static)으로 변경하여 표 밑에 붙임 */
.shift_schedule .bottom-sheet-footer {
    position: static !important;  /* 공중에 떠 있는 설정을 해제 */
    transform: none !important;   /* 접고 펴는 이동 효과 제거 */
    width: 100% !important;
    margin-top: 25px !important;  /* 표와의 간격 확보 */
    padding: 20px 0 !important;
    background: #fff !important;
    border-top: 2px solid #e9ecef !important;
    box-shadow: none !important;  /* 공중에 떠 있는 그림자 제거 */
    flex-shrink: 0 !important;
}

/* [2] PC: 접혀있더라도 분석창과 버튼이 다 보이도록 강제 노출 */
.shift_schedule .bottom-sheet-footer .collapsible-item {
    display: block !important;
    opacity: 1 !important;
    height: auto !important;
    overflow: visible !important;
}

/* [3] PC: 모바일용 손잡이(드래그 핸들) 숨기기 */
.shift_schedule .footer-drag-handle {
    display: none !important;
}




/* 3. 하단 푸터는 무조건 바닥에 고정 */
.shift_schedule .bottom-sheet-footer {
    position: static !important; /* Flex 구조 안에서 순서대로 배치됨 */
    flex-shrink: 0 !important;   /* 높이가 줄어들지 않음 */
    background: #fff;
    border-top: 2px solid #e9ecef;
}



/* [2] 표 자체: 압축되지 않도록 설정 */
.shift_schedule .schedule-table {
    width: max-content !important; /* 내용물만큼 가로로 길어지게 함 */
    min-width: 100%;
    border-collapse: separate !important; /* sticky 작동을 위해 필요 */
    border-spacing: 0;
}




/* ====================================================================
   추가할 코드: 스케줄 에디터 전체 배경을 흰색으로 채워서 위아래가 이어지게 만듦
   ==================================================================== */
.shift_schedule .dashboard-editor-wrapper {
    background-color: #ffffff !important;
}

/* ✨ [최종 통합본] 1. 상단 헤더 전체는 무조건 천장에 고정 (찢어짐 방지) */
.shift_schedule .schedule-table thead th {
    position: sticky !important;
    top: 0 !important;
    z-index: 100 !important;
    background-color: #f1f3f5 !important;
    border-bottom: 2px solid #adb5bd !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1) !important;
}

/* ✨ [최종 통합본] 2. 헤더의 '이름' 칸: 천장(top)과 왼쪽(left) 동시 고정 (십자 교차점) */
.shift_schedule .schedule-table thead th.name-cell,
.shift_schedule .schedule-table thead th.col-name {
    left: 0 !important;
    z-index: 110 !important; /* 날짜(100)보다 더 높게 띄워서 가려지지 않게 함 */
    border-right: 1px solid #ced4da !important;
    box-shadow: none !important; /* 붕 떠 보이는 그림자 제거 */
}

/* ✨ [최종 통합본] 3. 본문의 '이름' 칸: 왼쪽(left)만 고정 */
.shift_schedule .schedule-table tbody th.name-cell {
    position: sticky !important;
    left: 0 !important;
    z-index: 10 !important;
    background-color: #ffffff !important;
    border-right: 1px solid #ced4da !important;
}


/* ====================================================================
   ✨ [진짜 최종] td 자체에 입력하는 방식에 맞춘 디자인 복구 코드
   ==================================================================== */
.shift_schedule .schedule-table tbody td[contenteditable="true"] {
    /* 1. 글자 정중앙 정렬 및 여백 제거 */
    vertical-align: middle !important;
    padding: 0 !important;

    /* 2. 글자 굵기와 높이 설정 */
    font-weight: 700 !important;
    line-height: 36px !important; /* 셀 높이에 맞춰 글자를 수직 중앙으로 */

    /* 3. 클릭 시 생기는 지저분한 외곽선 제거 */
    outline: none !important;

    /* 4. 커서 모양 수정 */
    cursor: text !important;
}

/* O, V 등 특수 근무자 글자색 상속 보장 */
.shift_schedule .schedule-table tbody td.shift-O,
.shift_schedule .schedule-table tbody td.shift-P,
.shift_schedule .schedule-table tbody td.shift-V,
.shift_schedule .schedule-table tbody td.shift-S {
    color: #e03131 !important; /* 부모(td)에 설정된 빨간색이 확실히 보이게 */
}

/* 에디터 헤더의 도움말 및 닫기 버튼 크기 조정 */
.shift_schedule #helpBtn,
.shift_schedule #closeBtn {
    padding: 8px 16px !important; /* 안쪽 여백을 늘려 버튼 전체 크기 확대 */
    font-size: 16px !important;    /* 글자 및 이모지 크기 확대 */
    height: auto !important;       /* 높이 자동 조절 */
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* 닫기(← 설정) 버튼의 텍스트가 잘리지 않게 너비 살짝 확보 */
.shift_schedule #closeBtn {
    min-width: 80px;
}


/* ============================================================
   📸 [통합 완결판] 이미지 캡처 최적화 (PC 뷰포트 조작 방식)
   ============================================================ */

/* 1. 캡처 중 불필요한 요소 숨김 및 sticky 고정 해제 */
.shift_schedule .is-capturing .editor-header,
.shift_schedule .is-capturing .bottom-sheet-footer,
.shift_schedule .is-capturing .advanced-rule-box {
    display: none !important;
}

.shift_schedule .is-capturing .schedule-table thead th,
.shift_schedule .is-capturing .schedule-table tbody th.name-cell {
    position: static !important;
    background-color: #f1f3f5 !important;
}

/* 2. 에디터 배경 및 여백 정리 */
.shift_schedule .is-capturing.dashboard-editor-wrapper {
    background-color: #ffffff !important;
    height: auto !important;
    min-height: 0 !important;
}

.shift_schedule .is-capturing .editor-top-panel,
.shift_schedule .is-capturing #scheduleContainer {
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
}
/* 3. 범례와 헤더 간격 타이트하게 조절 */
.shift_schedule .is-capturing .editor-top-panel > .d-flex.mb-3 {
    margin-bottom: 0 !important;
}

.shift_schedule .is-capturing .schedule-month {
    margin: 5px 0 2px 0 !important;
}

.shift_schedule .is-capturing .schedule-legend {
    flex-wrap: nowrap !important; /* 범례 한 줄로 쭉 펴기 */
    white-space: nowrap !important;
    margin-bottom: 15px !important;
}

/* 🌟 [수정] 모바일 캡처 시 이름 칸은 1.5배(180px)로 넉넉하게 */
.shift_schedule .is-capturing .schedule-table th.name-cell,
.shift_schedule .is-capturing .schedule-table td.name-cell,
.shift_schedule .is-capturing .schedule-table .col-name {
    min-width: 180px !important;
    width: 180px !important;
    max-width: 180px !important;
}

.shift_schedule .is-capturing .schedule-table .name-input {
    text-overflow: clip !important;
    width: 100% !important;
}

/* 🌟 [수정] 합계 칸 사이즈를 280px로 타이트하게 줄임 (태평양 압수!) */
.shift_schedule .is-capturing .schedule-table th.col-summary,
.shift_schedule .is-capturing .schedule-table td.summary-cell {
    min-width: 280px !important;
    width: 280px !important;
    max-width: 280px !important;
    white-space: nowrap !important;
}

/* 🌟 [핵심] 표 전체가 남는 화면 공간을 흡수해서 제멋대로 늘어나는 현상 원천 차단 */
.shift_schedule .is-capturing .schedule-table {
    width: max-content !important;
    table-layout: fixed !important;
    margin: 0 auto !important; /* 표를 중앙에 예쁘게 배치 */
}
/* 4. 워터마크 중앙 정렬 & 안전 여백 확보 (잘림 방지) */
.shift_schedule .cal-cap-watermark {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    color: #868e96 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    margin-top: 15px !important;
    padding-bottom: 30px !important;
}

.shift_schedule .full-schedule-watermark {
    font-size: 26px !important;
    margin-top: 30px !important;
    padding-bottom: 40px !important;
    letter-spacing: 2px !important;
}

/* ============================================================
   ⏳ 이미지 다운로드 로딩 오버레이 (스코프 안으로 편입!)
   ============================================================ */
.shift_schedule .capture-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 999999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: opacity 0.3s ease;
}

.shift_schedule .capture-overlay.hidden {
    display: none !important;
    opacity: 0;
}

/* 📱 모바일 캡처 시 뷰포트 축소에 대응하는 3배 뻥튀기 */
.shift_schedule .capture-overlay.mobile-zoomed .capture-spinner {
    width: 150px;
    height: 150px;
    border-width: 15px;
    margin-bottom: 60px;
}

.shift_schedule .capture-overlay.mobile-zoomed .capture-loading-text {
    font-size: 54px;
    line-height: 1.4;
}

/* 빙글빙글 도는 스피너 애니메이션 */
.shift_schedule .capture-spinner {
    width: 50px;
    height: 50px;
    border: 5px solid #f1f3f5;
    border-top: 5px solid #228be6;
    border-radius: 50%;
    animation: capture-spin 1s linear infinite; /* 이름 충돌 방지 */
    margin-bottom: 20px;
}

@keyframes capture-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.shift_schedule .capture-loading-text {
    font-size: 18px;
    font-weight: 800;
    color: #343a40;
    text-align: center;
    line-height: 1.5;
    margin: 0;
}

/* 🖥️ [PC 전용] 화면이 769px 이상일 때만 작동 */
@media (min-width: 769px) {
    /* 가로 스크롤 시 배경 짤림 방지 */
    body:has(.shift_schedule) .app-header,
    body:has(.shift_schedule) .app-footer-content {
        position: sticky !important;
        left: 0 !important;
        width: 100% !important;
        z-index: 1040 !important;
    }

    /* 본문 컨테이너 확장 (모바일에서는 절대 금지!) */
    body:has(.shift_schedule) .app-content,
    body:has(.shift_schedule) #shiftContent {
        min-width: fit-content !important;
    }
}


/* ============================================================
   📱 모바일 반응형 완결 통합본 (768px 이하)
   [레이아웃 최적화 + 슬림 & 콤팩트 분석 툴팁]
   ============================================================ */
@media (max-width: 768px) {


    .shift_schedule .analysis-item[data-key] .analysis-popover {
        position: fixed !important;
        top: 50% !important;
        left: 50% !important;

        /* 기존에 설정된 left/right/transform 값을 완전히 무효화 */
        right: auto !important;
        bottom: auto !important;
        transform: translate(-50%, -50%) !important;

        /* 디자인 유지 */
        width: 85vw !important;
        max-width: 320px !important;
        min-width: 260px !important;
        max-height: 70vh !important;
        overflow-y: auto !important;
        padding: 18px !important;
        background-color: #ffffff !important;
        border-radius: 16px !important;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3) !important;
        z-index: 100000 !important;
    }

    /* 말풍선 꼬리 제거 */
    .shift_schedule .analysis-item[data-key] .analysis-popover::after,
    .shift_schedule .analysis-item[data-key] .analysis-popover::before {
        display: none !important;
    }

    /* [1] 전체 페이지 레이아웃 보정 (화면 밀림/쏠림 방지) */
    body, html, #shiftContent, .app-content {
        max-width: 100vw !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }

    /* [2] 설정 카드 & 그리드 시스템 (Step 1, 2) */
    .shift_schedule .setting-container {
        padding: 15px !important;
        width: 100% !important;
        margin: 0 0 16px 0 !important;
        box-sizing: border-box !important;
    }

    .shift_schedule .setting-grid,
    .shift_schedule .work-count-grid {
        grid-template-columns: 1fr !important; /* 무조건 한 줄에 하나씩 */
        gap: 12px !important;
    }

    /* [3] 분석 패널 (제목은 위로, 뱃지는 2열로 정렬) */
    .shift_schedule .analysis-panel {
        flex-direction: column !important;
        align-items: flex-start !important;
        padding: 15px !important;
        margin: 0 10px 15px 10px !important;
        gap: 12px !important;
        width: auto !important;
        overflow: visible !important; /* 툴팁 노출 보장 */
    }

    .shift_schedule .analysis-header {
        margin: 0 0 8px 0 !important;
        width: 100% !important;
        text-align: left !important;
    }

    .shift_schedule .analysis-body {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important; /* 깔끔한 2열 배치 */
        width: 100% !important;
        gap: 8px !important;
        align-items: start !important;
        overflow: visible !important;
    }

    .shift_schedule .analysis-item {
        position: static !important; /* 툴팁의 absolute 기준점 해제 */
        height: auto !important;
        min-height: 32px !important;
        padding: 6px 8px !important;
        font-size: 11px !important;
        line-height: 1.3 !important;
        justify-content: center !important;
        white-space: normal !important;
        word-break: keep-all !important;
    }

    /* [4] 🚀 분석 툴팁: 슬림 & 콤팩트 고정 모달 버전 */
    .shift_schedule .analysis-popover {
        /* 위치: 중앙에서 살짝 위로 올려 가독성 높임 */
        position: fixed !important;
        top: 45% !important;
        left: 50% !important;
        bottom: auto !important;
        transform: translate(-50%, -50%) !important;

        /* 크기 슬림화 */
        width: auto !important;
        min-width: 240px !important;
        max-width: 280px !important;
        max-height: 60vh !important;
        overflow-y: auto !important;

        /* 내부 여백 대폭 축소 */
        padding: 12px !important;
        background-color: #ffffff !important;
        border: 1.5px solid #ffa8a8 !important;
        border-radius: 12px !important;
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2) !important;
        z-index: 100000 !important; /* 최상단 보장 */
        margin: 0 !important;
        pointer-events: auto !important;
    }

    /* 툴팁 활성화 시 배경 어둡게 처리 (is-visible 상태일 때) */
    .shift_schedule .analysis-popover:not(.hidden)::before {
        content: '';
        position: fixed;
        top: -5000px;
        left: -5000px;
        width: 10000px;
        height: 10000px;
        background: rgba(0, 0, 0, 0.2) !important; /* 답답함 해소 */
        z-index: -1;
        pointer-events: none;
    }

    /* 제목 영역 간격 축소 */
    .shift_schedule .analysis-popover strong {
        font-size: 14px !important;
        margin-bottom: 8px !important;
        display: block !important;
        color: #c92a2a !important;
    }

    /* 리스트 항목 디자인을 더 얇고 촘촘하게 */
    .shift_schedule .analysis-popover .analysis-detail-list {
        list-style: none !important;
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 6px !important;
    }


    /* 하단 팁 영역 최소화 */
    .shift_schedule .analysis-popover .analysis-detail-tip {
        margin-top: 8px !important;
        padding: 6px 8px !important;
        background-color: #ffe3e3 !important;
        color: #c92a2a !important;
        font-size: 11px !important;
        border-radius: 6px !important;
        border-top: none !important;
    }

    /* 불필요한 말풍선 꼬리 제거 */
    .shift_schedule .analysis-popover::after,
    .shift_schedule .analysis-popover::before {
        display: none !important;
    }

    /* [5] 하단 버튼 그리드 (자동 채우기 1층, 나머지 2층 3칸) */
    .shift_schedule .responsive-button-group {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 8px !important;
        padding: 10px !important;
        align-items: start !important;
    }

    .shift_schedule .mobile-wrap-buttons {
        display: contents !important;
    }

    .shift_schedule #autoFillBtn {
        grid-column: 1 / 4 !important;
        order: -1 !important;
        height: 50px !important;
        font-size: 15px !important;
    }

    .shift_schedule #clearScheduleBtn,
    .shift_schedule #fillVBtn,
    .shift_schedule .btn-group .btn {
        height: 44px !important;
        font-size: 12px !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* [6] 표(Table) 최적화 (이름 3글자 + 가로 스크롤) */
    .shift_schedule .name-cell,
    .shift_schedule .col-name {
        min-width: 55px !important;
        width: 55px !important;
        max-width: 55px !important;
        overflow: hidden;
    }

    .shift_schedule .name-input {
        width: 100% !important;
        font-size: 0.85rem !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    .shift_schedule .schedule-scroll-wrapper {
        width: 100% !important;
        overflow-x: auto !important;
        display: block !important;
        -webkit-overflow-scrolling: touch;
    }

    /* [7] 고급 근무 규칙 (가로 튀어나감 방지 및 세로 정렬) */
    .shift_schedule .advanced-rule-box {
        width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    .shift_schedule .advanced-section select {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
    }

    .shift_schedule .advanced-section .d-flex {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
    }

    .shift_schedule .advanced-section .d-flex > div:nth-child(2).text-muted {
        text-align: center !important;
        transform: rotate(90deg) !important;
        margin: -5px 0 !important;
    }

    .shift_schedule #addTrainingPair {
        width: 100% !important;
        margin-left: 0 !important;
        height: 44px !important;
    }

    /* 🚨 [1] 쥐구멍 탈출 (이중 스크롤 완전 박멸) */
    /* 표를 가두던 상자를 부숴서 표가 원래 크기대로 시원하게 밑으로 뻗게 합니다 */
    .shift_schedule .schedule-scroll-wrapper {
        overflow: visible !important;
        width: max-content !important;
        height: auto !important;
        max-height: none !important;
        display: block !important;
    }

    /* 🚨 [2] PC / 가로모드와 동일한 마법 적용 */
    /* 페이지 전체가 표 너비만큼 넓어지게 허용하여, 상하좌우 스크롤을 앱 메인에서 쾌적하게 한 번에 처리! */
    .app-main {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    .app-content,
    #shiftContent,
    .dashboard-editor-wrapper {
        min-width: fit-content !important; /* 표 크기만큼 컨테이너 자동 확장 */
        overflow: visible !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* 🚨 [3] UI 도망 방지 (Sticky Panning) */
    /* 가로로 스크롤할 때, 다른 UI들이 왼쪽 화면에 계속 따라붙도록 고정 */
    .app-header,
    .app-footer-content,
    .shift_schedule #setupArea,
    .shift_schedule .editor-header,
    .shift_schedule .editor-top-panel,
    .shift_schedule .bottom-sheet-footer {
        position: sticky !important;
        left: 0 !important;
        width: 100vw !important; /* 항상 내 스마트폰 화면 너비 유지 */
        box-sizing: border-box !important;
        z-index: 1040 !important;
    }

    /* 🚨 [4] 표 여백 최적화 (가로 고정된 UI들에 맞게 패딩 예쁘게 조절) */
    .shift_schedule .editor-header,
    .shift_schedule .editor-top-panel,
    .shift_schedule .bottom-sheet-footer {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
    .shift_schedule #scheduleContainer {
        padding-left: 10px !important;
        padding-right: 15px !important;
        margin-top: 10px;
    }

    /* 🚨 [5] 상하좌우 이름/날짜 고정 (PC와 동일하게 완벽 작동) */
    .shift_schedule .schedule-table thead th {
        position: sticky !important;
        top: 0 !important;
        z-index: 100 !important;
        box-shadow: 0 2px 5px rgba(0,0,0,0.1) !important;
    }
    .shift_schedule .schedule-table thead th.name-cell,
    .shift_schedule .schedule-table thead th.col-name {
        left: 0 !important;
        z-index: 120 !important;
    }
    .shift_schedule .schedule-table tbody th.name-cell {
        position: sticky !important;
        left: 0 !important;
        z-index: 110 !important;
    }

    /* ============================================================
   👇 드래그 핸들(이동 버튼) 터치 영역 넓히기
   ============================================================ */
    .shift_schedule .schedule-table .handle-cell {
        min-width: 34px !important; /* 기존 23px -> 34px로 확대 */
        width: 34px !important;
        padding-left: 8px !important;  /* 좌우 여백을 늘려서 터치하기 쉽게 만듦 */
        padding-right: 8px !important;
        text-align: center !important;
    }


}