* { box-sizing: border-box; }
body { font-family: -apple-system, 'Segoe UI', 'Noto Sans KR', Arial, sans-serif;
       margin: 0; background: #f5f7fa; color: #1f2937; }
header { background: #305496; color: #fff; padding: 14px 28px;
         display: flex; justify-content: space-between; align-items: center;
         box-shadow: 0 2px 6px rgba(0,0,0,0.08); }
.brand { font-size: 18px; font-weight: bold; letter-spacing: 0.5px; }
nav a { color: #e5eaf4; margin-left: 18px; text-decoration: none; font-size: 14px; }
nav a:hover { color: #fff; text-decoration: underline; }
main { max-width: 1400px; margin: 24px auto; padding: 0 20px; }
footer { text-align: center; padding: 20px; color: #6b7280; font-size: 12px; }

h2 { color: #305496; margin-top: 0; }
h3 { color: #374151; }
.flash { background: #fffbe6; padding: 12px 20px; border-left: 4px solid #faad14;
         max-width: 1400px; margin: 10px auto; border-radius: 4px; }

.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
            gap: 12px; margin: 20px 0; }
.kpi-card { background: #fff; padding: 16px; border-radius: 8px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.05); border-left: 4px solid #305496; }
.kpi-card.alert { border-left-color: #d9534f; }
.kpi-card.highlight { border-left-color: #52c41a; background: #f6ffed; }
.kpi-label { font-size: 12px; color: #6b7280; margin-bottom: 6px; }
.kpi-val { font-size: 24px; font-weight: bold; color: #1f2937; }
.kpi-val.kpi-small { font-size: 13px; font-weight: normal; word-break: break-all; }

.upload-section { background: #fff; padding: 28px; border-radius: 8px;
                  box-shadow: 0 1px 3px rgba(0,0,0,0.05); margin-top: 20px; }
.upload-form { display: flex; flex-direction: column; gap: 16px; align-items: stretch; }
.file-drop { display: flex; align-items: center; justify-content: center;
             border: 2px dashed #bac0cc; border-radius: 8px;
             padding: 60px 40px; min-height: 140px; text-align: center;
             cursor: pointer; background: #fafbfc;
             transition: background-color 0.15s, border-color 0.15s; }
.file-drop:hover { border-color: #305496; background: #f0f4fa; }
.file-drop.dragging { border-color: #2563eb; background: #dbeafe; border-style: solid; }
.file-drop input[type=file] { display: none; }
.file-drop span { color: #6b7280; font-size: 14px; display: block; pointer-events: none; }
.file-drop * { pointer-events: none; }
.hint { color: #6b7280; font-size: 13px; margin-top: 12px; }

.btn, .btn-primary, .btn-ghost, .mini-btn {
  display: inline-block; padding: 10px 18px; border-radius: 6px;
  text-decoration: none; font-size: 14px; border: none; cursor: pointer; font-weight: 500;
}
.btn-primary { background: #305496; color: #fff; }
.btn-primary:hover { background: #264883; }
.btn { background: #fff; color: #305496; border: 1px solid #305496; }
.btn:hover { background: #eaf0fa; }
.btn-ghost { background: transparent; color: #6b7280; border: 1px solid #bac0cc; }
.mini-btn { padding: 4px 10px; font-size: 12px; background: #fff; color: #305496;
            border: 1px solid #bac0cc; border-radius: 4px; }
.mini-btn.danger { color: #d9534f; border-color: #f5c2c2; }

.download-bar { display: flex; gap: 10px; margin-bottom: 0; flex-wrap: wrap; align-items: flex-start; }
.result-header { display: flex; justify-content: space-between; align-items: flex-start;
                 flex-wrap: wrap; gap: 16px; margin-bottom: 16px; }
.result-header .meta { color: #6b7280; font-size: 13px; margin-top: 4px; }
.result-header .upload-id { color: #6b7280; font-size: 14px; font-weight: normal; }

.panel { background: #fff; padding: 24px; border-radius: 8px;
         box-shadow: 0 1px 3px rgba(0,0,0,0.05); margin-bottom: 20px; }
.panel-manager { border-top: 4px solid #52c41a; }
.panel-worker { border-top: 4px solid #1890ff; }

.data-table { width: 100%; border-collapse: collapse; margin-top: 10px;
              background: #fff; font-size: 13px; }
.data-table th { background: #d9e1f2; padding: 10px 8px; text-align: center;
                 font-weight: 600; border: 1px solid #b8c4e0; }
.data-table td { padding: 8px; border: 1px solid #e5e7eb; text-align: center; }
.data-table td.num { text-align: right; }
.data-table td.note { text-align: left; color: #6b7280; font-size: 12px; }
.data-table td.fname { text-align: left; font-size: 12px; max-width: 240px; overflow: hidden;
                      text-overflow: ellipsis; white-space: nowrap; }
.data-table td.cost { font-weight: 600; color: #b45309; }
.data-table td.mono { font-family: 'Consolas', monospace; font-size: 11px; text-align: left; color: #6b7280; }

.th-final { background: #ffe699 !important; }
.scenario { font-size: 12px; line-height: 1.5; }
.scenario.chosen { background: #c6efce; font-weight: 600; }
.scenario .cost { color: #305496; font-weight: 600; margin-top: 2px; }
.final-cell { background: #fff2cc; font-weight: bold; }
.final-method { color: #305496; font-size: 14px; }
.final-cost { font-size: 16px; color: #b45309; margin-top: 4px; }

.group-card { margin-top: 20px; padding: 16px; background: #f0f5ff;
              border-left: 4px solid #1890ff; border-radius: 4px; }
.group-card h3 { margin: 0 0 14px 0; }
.badge { display: inline-block; padding: 2px 8px; background: #1890ff; color: #fff;
         border-radius: 4px; font-size: 12px; font-weight: normal; }
.badge-orange { display: inline-block; padding: 2px 8px; background: #fa8c16;
                color: #fff; border-radius: 4px; font-size: 11px; }
.badge-status { display: inline-block; padding: 2px 8px; background: #e5e7eb;
                color: #374151; border-radius: 4px; font-size: 11px; }

.box-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.box-card { background: #fff; padding: 12px; border-radius: 6px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.05); transition: all .15s; }
.box-card.editable { cursor: pointer; }
.box-card.editable:hover { box-shadow: 0 3px 12px rgba(48,84,150,0.2); transform: translateY(-1px); }
.box-card.full-box { border-left: 4px solid #52c41a; }
.box-card.leftover-box { border-left: 4px solid #faad14; background: #fffdf0; }
.box-no { font-size: 11px; color: #6b7280; display: flex; justify-content: space-between; }
.mini-pencil { color: #bac0cc; font-size: 11px; }
.box-card.editable:hover .mini-pencil { color: #305496; }
.box-type { font-size: 11px; color: #374151; margin-bottom: 4px; }
.box-model { font-weight: bold; color: #1f2937; font-size: 14px; }
.box-meta { color: #374151; font-size: 13px; margin-top: 6px; }
.box-contents { margin-top: 6px; font-size: 11px; }
.box-contents .item { display: inline-block; background: #f3f4f6; padding: 2px 6px;
                      border-radius: 3px; margin: 2px 4px 2px 0; }
.box-tag.reduced { display: inline-block; background: #ffe699; color: #b45309;
                   padding: 2px 8px; border-radius: 3px; font-size: 11px; margin-top: 6px; }

.filter-bar { margin: 14px 0; display: flex; gap: 8px; }
.btn-filter { padding: 6px 14px; border-radius: 4px; background: #fff;
              border: 1px solid #bac0cc; color: #374151; text-decoration: none; font-size: 13px; }
.btn-filter.active { background: #305496; color: #fff; border-color: #305496; }

.data-table.editable .edit-cell { cursor: pointer; transition: background .15s; }
.data-table.editable .edit-cell:hover { background: #fff9e6; }
.data-table.editable .edit-cell.hl { background: #fffbe6; }
.row-new { background: #fffbe6 !important; }
.row-disc { background: #ffece8 !important; color: #a8071a; }

.cfg-input { padding: 6px 10px; width: 100%; border: 1px solid #d1d5db;
             border-radius: 4px; font-size: 13px; }
.form-actions { margin-top: 20px; text-align: right; }

/* 이력 */
.history-row { cursor: pointer; transition: background .15s; }
.history-row:hover { background: #f0f5ff; }
.empty-state { text-align: center; padding: 40px; color: #6b7280; background: #fff;
               border-radius: 8px; margin-top: 20px; }

/* 모달 */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.4);
                 display: flex; align-items: center; justify-content: center; z-index: 999; }
.modal-overlay.hidden { display: none; }
.modal { background: #fff; padding: 24px; border-radius: 8px; width: 420px; max-width: 90%;
         box-shadow: 0 20px 50px rgba(0,0,0,0.25); }
.modal h3 { margin: 0 0 14px 0; color: #305496; }
.modal-body label { display: block; margin-bottom: 12px; font-size: 13px; color: #374151; }
.modal-body input { display: block; width: 100%; margin-top: 4px; padding: 8px;
                    border: 1px solid #d1d5db; border-radius: 4px; font-size: 14px; }
.modal-actions { margin-top: 18px; display: flex; justify-content: flex-end; gap: 10px; }
#modal-target { font-weight: bold; color: #1890ff; margin-bottom: 14px; padding: 10px;
                background: #f0f5ff; border-radius: 4px; }

/* 부피 사용률 표시 */
.vol-pct { font-weight: 600; }
.vol-pct.vol-high { color: #b45309; }  /* 90%↑ 주황 */
.vol-pct.vol-low { color: #6b7280; }   /* 30%↓ 회색 */

/* 우산 정렬 정보 (Round 7) */
.align-info { margin-top: 4px; padding: 3px 6px; background: #e8f5ff;
              color: #0958d9; border-radius: 3px; font-size: 11px;
              border-left: 3px solid #1890ff; }

/* === 포장 작업자 영역 가시성 개선 === */
.group-card-v2 { padding: 18px; background: #fff; border: 2px solid #e5e7eb;
                 border-left: 6px solid #1890ff; border-radius: 8px;
                 margin-bottom: 24px; box-shadow: 0 2px 6px rgba(0,0,0,0.04); }
.group-header { display: flex; justify-content: space-between; align-items: center;
                margin-bottom: 14px; flex-wrap: wrap; gap: 10px; }
.group-header h3 { margin: 0; font-size: 16px; color: #1f2937; }
.method-badge { display: inline-block; padding: 4px 12px; border-radius: 4px;
                color: #fff; font-size: 13px; margin-right: 8px; font-weight: 600; }
.method-로젠 { background: #52c41a; }
.method-밀크런 { background: #1890ff; }
.method-밀크런-pallet { background: #fa8c16; }

.btn-add { padding: 6px 14px; background: #52c41a; color: #fff; border: none;
           border-radius: 6px; cursor: pointer; font-size: 13px; font-weight: 600; }
.btn-add:hover { background: #389e0d; }
.btn-danger { padding: 8px 14px; background: #ff4d4f; color: #fff; border: none;
              border-radius: 6px; cursor: pointer; font-size: 13px; }
.btn-danger:hover { background: #d9363e; }

.section-title { font-size: 13px; font-weight: 600; color: #6b7280;
                 margin: 14px 0 8px 2px; padding-left: 6px;
                 border-left: 3px solid #d1d5db; }

.box-grid-v2 { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
               gap: 12px; }
.box-card-v2 { background: #fff; padding: 14px; border-radius: 8px;
               box-shadow: 0 2px 4px rgba(0,0,0,0.06);
               border: 1.5px solid #e5e7eb; transition: all .15s; }
.box-card-v2.full-box { border-left: 5px solid #52c41a; }
.box-card-v2.leftover-box { border-left: 5px solid #faad14; background: #fffdf5; }
.box-card-v2:hover { box-shadow: 0 4px 12px rgba(48,84,150,0.18); transform: translateY(-1px); }

.bc-head { display: flex; justify-content: space-between; align-items: center;
           margin-bottom: 8px; gap: 6px; }
.bc-no { font-size: 13px; color: #6b7280; font-weight: 600; }
.bc-tag { padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; }
.tag-full { background: #d4edda; color: #155724; }
.tag-leftover { background: #fff3cd; color: #856404; }
.bc-edit { padding: 4px 10px; background: #305496; color: #fff; border: none;
           border-radius: 4px; cursor: pointer; font-size: 12px; margin-left: auto; }
.bc-edit:hover { background: #264883; }

.bc-model-v2 { font-size: 17px; font-weight: bold; color: #1f2937;
               margin: 6px 0 10px; }
.bc-info-v2 { display: flex; flex-wrap: wrap; gap: 12px; font-size: 13px;
              color: #374151; padding: 8px; background: #f8fafc; border-radius: 5px;
              margin-bottom: 10px; }
.bc-info-v2 b { color: #305496; font-size: 15px; }
.bc-info-v2 .bc-side { color: #b45309; }
.bc-info-v2 .bc-side b { color: #b45309; }
.bc-contents-v2 { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.item-pill { display: inline-block; background: #e0e7ff; color: #1e40af;
             padding: 3px 8px; border-radius: 12px; font-size: 12px; }
.item-pill b { font-weight: 700; margin-left: 2px; }
.bc-align-v2 { margin-top: 8px; padding: 4px 10px; background: #e6f7ff;
               color: #0958d9; border-radius: 4px; font-size: 11px;
               border-left: 3px solid #1890ff; }
.bc-tag-bottom { margin-top: 6px; display: inline-block; padding: 2px 8px;
                 border-radius: 4px; font-size: 11px; }
.tag-reduced { background: #fff2cc; color: #b45309; }

/* 박스 모델 정보 표시 */
.model-info-box { padding: 10px 12px; background: #f0f5ff; border-left: 4px solid #1890ff;
                  border-radius: 4px; margin-top: 8px; }
.mi-row { font-size: 13px; line-height: 1.7; color: #374151; }
.mi-row b { color: #305496; }

/* 모델별 카드 새 표시 */
.bc-cap { color: #6b7280; font-weight: 400; font-size: 14px; }
.hl-count { font-size: 15px; color: #b45309; }
.hl-count b { color: #b45309; font-size: 18px; }

/* 엑셀 다운로드 옵션 카드 */
.dl-options { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.dl-option { display: flex; align-items: center; gap: 12px;
             padding: 12px 14px; border: 2px solid #e5e7eb; border-radius: 8px;
             cursor: pointer; transition: all 0.15s; background: #fff; }
.dl-option:hover { border-color: #305496; background: #f0f5ff; }
.dl-option input[type=radio] { transform: scale(1.3); accent-color: #305496; }
.dl-option input[type=radio]:checked + .dl-info .dl-title { color: #305496; }
.dl-option:has(input:checked) { border-color: #305496; background: #eff6ff; }
.dl-info { flex: 1; }
.dl-title { font-weight: 600; font-size: 14px; color: #1f2937; }
.dl-desc { font-size: 12px; color: #6b7280; margin-top: 2px; }

.bc-color { color: #b45309; font-size: 14px; font-weight: 600; }
.item-pill i { color: #b45309; font-style: normal; font-weight: 600; margin: 0 2px; }