/* 본사 관리 화면 — 현장 화면(style.css)과 같은 체계: 회색 캔버스 + 흰 카드 + 1px 헤어라인 */
.admin-top { justify-content: space-between; padding: 0 16px; position: sticky; top: 0; z-index: 5; }
.admin-brand { font-size: 17px; font-weight: 900; letter-spacing: -.01em; }
.admin-brand span { color: var(--meta); font-weight: 800; margin-left: 4px; }
body.admin main { padding: 16px 12px 48px; max-width: 1100px; margin: 0 auto; overflow: visible; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 16px; margin-bottom: 12px; }
.card h2 { margin: 0 0 4px; font-size: 19px; font-weight: 900; }
.card h3 { margin: 16px 0 6px; font-size: 16px; font-weight: 900; }
.card h3 small { font-weight: 700; }
.desc { color: var(--ink-2); font-size: 14px; margin: 4px 0 12px; }
.desc b { color: var(--ink); }
.row-form { display: flex; gap: 8px; }
.row-form input { flex: 1; min-width: 0; border: 1px solid var(--line-strong); border-radius: var(--r); padding: 10px; font-size: 18px; }
.grid-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 8px 12px; align-items: end; }
.grid-form .wide { grid-column: 1 / -1; }
.form-actions { display: flex; gap: 8px; justify-content: flex-end; grid-column: 1 / -1; margin-top: 4px; }
.result { margin-top: 10px; font-weight: 800; font-size: 15px; }
.result.ok { color: var(--ok); }
.result.bad { color: var(--bad); }
.tbl-wrap { overflow-x: auto; margin-top: 12px; border-top: 1px solid var(--line); }
table.tbl { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 15px; }
.tbl th, .tbl td { border-bottom: 1px solid var(--line); padding: 8px 6px; text-align: left; vertical-align: top; }
.tbl th { color: var(--meta); font-weight: 800; font-size: 14px; }
.muted { color: var(--meta); font-size: 14px; }
.st-COMPLETED { color: var(--ok); font-weight: 800; }
.st-IN_PROGRESS { color: var(--tray); font-weight: 800; }
.st-NOT_STARTED { color: var(--ink-2); }
/* 지난 출고분·종료 클레임: 흐리게(opacity) 대신 보조 글자색 — 대비 4.5:1 이상 유지 */
.closed td, .closed td * { color: var(--meta); }
.admin-top-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
/* 포장 실적 */
.pf-branch { margin-top: 14px; }
.pf-branch h3 { margin: 0 0 8px; }
.pf-card { border: 1px solid var(--line); border-radius: var(--r); padding: 14px 16px; background: var(--surface); }
.pf-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-weight: 900; font-size: 16px; }
.pf-badge { padding: 2px 10px; border-radius: 999px; font-size: 13px; font-weight: 800; white-space: nowrap; background: var(--surface-2); color: var(--ink-2); border: 1px solid var(--line); }
.pf-badge.is-done { background: var(--ok-tint); color: var(--ok); border-color: #B5DCC3; }
.pf-bar { height: 10px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); margin: 10px 0 14px; overflow: hidden; }
.pf-bar > i { display: block; height: 100%; background: var(--go); }
.pf-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.pf-kpis span { display: block; color: var(--meta); font-size: 14px; font-weight: 700; }
.pf-kpis b { display: block; font-size: 24px; font-weight: 900; color: var(--ink); margin-top: 2px; font-variant-numeric: tabular-nums; }
.pf-kpis small { display: block; color: var(--ink-2); font-size: 13px; margin-top: 2px; }
.pf-cmp { margin-top: 12px; font-weight: 800; font-size: 15px; }
.pf-cmp.up { color: var(--ok); }
.pf-cmp.down { color: var(--bad); }
.pf-note { margin: 10px 0 0; padding-top: 10px; border-top: 1px solid var(--line); color: var(--ink-2); font-size: 14px; }
.pf-mini { display: inline-block; width: 64px; height: 6px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); vertical-align: middle; margin-right: 6px; overflow: hidden; }
.pf-mini > i { display: block; height: 100%; background: var(--go); }
@media (max-width: 520px) { .pf-kpis { gap: 8px; } .pf-kpis b { font-size: 18px; } }
/* 박스 크기 피드백 */
.fb-filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); gap: 8px 12px; align-items: end; }
.fb-csv { justify-self: start; align-self: end; min-height: 40px; }
.fb-reps { display: grid; gap: 6px; }
.fb-rep { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface-2); font-size: 15px; cursor: pointer; }
.fb-rep input, .fb-tbl input { width: 22px; height: 22px; flex: 0 0 auto; accent-color: var(--ok); }
.fb-rep > span { flex: 1 1 auto; min-width: 0; }
.fb-rep .fb-chk { flex: 0 0 auto; color: var(--meta); font-weight: 700; }
.fb-rep.is-done { background: var(--surface); }
.fb-rep.is-done > span, .fb-rep.is-done > span * { color: var(--meta); }
.fb-k { display: inline-block; padding: 0 6px; border-radius: 6px; font-weight: 800; white-space: nowrap; }
.fb-small { background: #FDECEE; color: #9F0D25; }
.fb-large { background: var(--tray-tint); color: var(--tray-ink); }.fb-items { display: grid; gap: 6px; }
.fb-item { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); cursor: pointer; }
.fb-item input { width: 22px; height: 22px; flex: 0 0 auto; margin-top: 2px; accent-color: var(--ok); }
.fb-body { display: grid; gap: 2px; min-width: 0; }
.fb-l1 { font-size: 16px; }
.fb-l2 { font-size: 14px; color: var(--ink-2); }
.fb-item.is-done { background: var(--surface-2); }
.fb-item.is-done .fb-body, .fb-item.is-done .fb-body * { color: var(--meta); }
.card { scroll-margin-top: 64px; }/* 원 선택기: 검색 → 목록에서 선택 → 칩 (자유 입력 없음) */
.ipk { display: grid; gap: 6px; }
.ipk-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ipk-chips:empty { display: none; }
.ipk-chip { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px; padding: 6px 4px 6px 10px; border-radius: var(--r-sm); background: var(--tray-tint); border: 1px solid var(--tray-line); color: var(--tray-ink); font-size: 14px; font-weight: 600; }
.ipk-chip b { color: var(--ink); }
.ipk-chip em { font-style: normal; color: var(--bad); font-weight: 700; }
.ipk-chip button { min-width: 32px; min-height: 32px; border: 0; background: none; color: var(--ink-2); font-size: 16px; cursor: pointer; }
.ipk-q { width: 100%; min-height: 44px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); padding: 0 10px; font-size: 16px; background: var(--surface); }
.ipk-q:focus { outline: 3px solid var(--tray); outline-offset: 0; }
.ipk-res { display: grid; gap: 4px; max-height: 300px; overflow-y: auto; }
.ipk-res:empty { display: none; }
.ipk-opt { display: grid; gap: 2px; text-align: left; min-height: 48px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); cursor: pointer; font-size: 15px; }
.ipk-opt span { font-size: 13px; color: var(--ink-2); font-weight: 600; }
.ipk-opt em { font-style: normal; color: var(--bad); }
.ipk-opt:active, .ipk-opt:hover { background: var(--surface-2); border-color: var(--line-strong); }
.ipk-hint { margin: 0; }
.ipk-hint:empty { display: none; }
.bad-name { color: var(--bad); font-weight: 800; font-size: 13px; }/* 휴대폰 폭: 표를 카드형으로(가로 스크롤 속에 오른쪽 열이 숨지 않게). 칸 이름은 data-label 로 앞에 붙인다 */
@media (max-width: 640px) {
  .tbl-wrap { overflow-x: visible; border-top: 0; }
  table.tbl { min-width: 0; }
  .tbl thead { display: none; }
  .tbl, .tbl tbody, .tbl tr, .tbl td { display: block; width: 100%; }
  .tbl tr { border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); padding: 8px 10px; margin-bottom: 8px; }
  .tbl tr.closed { background: var(--surface-2); }
  .tbl td { border: 0; padding: 2px 0; }
  .tbl td[data-label]::before { content: attr(data-label); display: inline-block; min-width: 76px; margin-right: 8px; color: var(--meta); font-size: 13px; font-weight: 700; }
  .tbl td.td-main { font-size: 16px; font-weight: 800; }
  .tbl td.td-actions { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 6px; }
  .tbl td.td-actions .btn { min-height: 40px; }
}@media (max-width: 640px) {
  /* 값이 여러 줄이어도 칸 이름 열 아래로 말려 들어가지 않게: 값은 들여 쓰고 칸 이름은 왼쪽에 고정 */
  .tbl td[data-label] { position: relative; padding-left: 92px; min-height: 22px; }
  .tbl td[data-label]::before { position: absolute; left: 0; top: 3px; width: 84px; min-width: 0; margin: 0; }
}
@media (max-width: 640px) {
  /* 원 이름은 길 수 있어 칸 이름을 위에 두고 전체 폭을 준다(긴 이름이 단어 중간에서 끊기지 않게) */
  .tbl td.td-main[data-label] { padding-left: 0; padding-top: 20px; }
  .tbl td.td-main[data-label]::before { top: 0; }
}
/* 특수식기 일정: 요일 여러 개 체크 · 날짜 여러 개 칩 */
.wd-boxes { display: flex; flex-wrap: wrap; gap: 6px; }
.wd-box { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; min-width: 56px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--surface); font-size: 16px; font-weight: 700; color: var(--ink); cursor: pointer; }
.wd-box input { width: 20px; height: 20px; accent-color: var(--tray); }
.wd-box:has(input:checked) { background: var(--tray-tint); border-color: var(--tray); color: var(--tray-ink); }
.date-add { display: flex; gap: 8px; }
.date-add input { flex: 1 1 auto; min-width: 0; }
#sc-dates { margin-top: 6px; }
/* 반영 확인창 (새 판 반영 — 완료 이어받기 미리 보기) */
.cd { width: min(520px, calc(100vw - 32px)); border: 1px solid var(--line-strong); border-radius: var(--r); padding: 16px; color: var(--ink); background: var(--surface); }
.cd::backdrop { background: rgba(15, 23, 42, .45); }
.cd h3 { margin: 0 0 8px; font-size: 19px; font-weight: 900; }
.cd p { margin: 6px 0; font-size: 15px; }
.cd-list { margin: 8px 0; padding-left: 20px; display: grid; gap: 4px; font-size: 15px; }
.cd-list .cd-rk { color: var(--rk-ink); }
.cd-list .cd-rk b { background: var(--rk-tint); padding: 0 4px; border-radius: 4px; }
.cd-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
.cd-actions .btn { min-height: 44px; }
/* 클레임 유형 선택 · 체크박스 */
.ct-boxes { display: flex; flex-wrap: wrap; gap: 6px; }
.ct-box { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--surface); font-size: 15px; font-weight: 700; color: var(--ink); cursor: pointer; }
.ct-box input { width: 18px; height: 18px; accent-color: var(--bad); }
.ct-box:has(input:checked) { background: var(--bad-tint); border-color: var(--bad); color: var(--bad); }
.cl-flags { display: grid; gap: 6px; }
.cl-flag { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface-2); font-size: 15px; cursor: pointer; }
.cl-flag input { width: 22px; height: 22px; flex: 0 0 auto; margin-top: 1px; accent-color: var(--bad); }
.cl-flag span { display: grid; gap: 2px; }
.cl-flag small { color: var(--ink-2); font-size: 13px; font-weight: 600; }
.cl-flag:has(input:checked) { background: var(--bad-tint); border-color: #F0A9B4; }
.cl-period { margin: 0; padding: 8px 10px; border-radius: var(--r-sm); background: var(--warn-tint); color: var(--warn-ink); font-size: 14px; font-weight: 700; }
.ct-type { display: inline-block; padding: 0 6px; border-radius: 6px; background: var(--bad-tint); color: var(--bad); font-weight: 800; white-space: nowrap; }/* 포장 완료 잠금 시간 */
.lock-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.lock-row input[type=range] { flex: 1 1 200px; min-width: 0; accent-color: var(--go); height: 32px; }
.lock-row b { min-width: 52px; font-size: 18px; }
/* 라벨데이터 자동 생성 상태 */
.lbl-line { margin: 12px 0 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface-2); font-size: 14px; line-height: 1.6; }
.lbl-ok { color: var(--ok); font-weight: 800; }
.lbl-failed { color: var(--bad); font-weight: 800; }
.lbl-missing { color: var(--meta); }
/* 저울 개당 무게 5칸 (v2) */
.uw-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; margin: 8px 0; }
.uw-cell { display: grid; gap: 4px; font-weight: 800; font-size: 14px; }
.uw-cell input, .uw-over input { width: 100%; min-width: 0; padding: 8px; font-size: 16px; border: 1px solid var(--line-strong, #A3AFBD); border-radius: 8px; }
.uw-over { display: flex; align-items: center; gap: 8px; font-weight: 800; }
.uw-over input { width: 70px; }
/* 롤 라벨 디자인 편집기 (v2, 2026-10-20) */
.le-top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 4px 0 12px; }
.le-seg { display: inline-flex; border: 1px solid var(--line-strong); border-radius: var(--r-sm); overflow: hidden; }
.le-seg button { min-height: 44px; padding: 0 18px; border: 0; background: var(--surface); color: var(--ink); font-size: 16px; font-weight: 800; cursor: pointer; }
.le-seg button + button { border-left: 1px solid var(--line-strong); }
.le-seg button[aria-pressed="true"] { background: var(--tray); color: #fff; }
.le-status { color: var(--ink-2); font-size: 14px; font-weight: 600; }
.le-dirty { margin-left: 6px; padding: 2px 8px; border-radius: 999px; background: var(--warn-tint); color: var(--warn-ink); font-size: 13px; white-space: nowrap; }
.le-data { display: grid; grid-template-columns: minmax(110px, 140px) minmax(160px, 220px) minmax(180px, 1fr) auto; gap: 8px 12px; align-items: end; }
.le-quick { display: flex; gap: 6px; flex-wrap: wrap; }
.le-quick .btn { min-height: 40px; }
.le-results { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; max-height: 180px; overflow-y: auto; }
.le-results:empty { display: none; }
.le-results button { min-height: 40px; padding: 6px 10px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); color: var(--ink); font-size: 14px; text-align: left; cursor: pointer; }
.le-results button:hover { background: var(--surface-2); border-color: var(--line-strong); }
.le-data-now { margin: 8px 0 10px; font-size: 14px; font-weight: 700; color: var(--ink); }
.le-none { margin: 0; color: var(--meta); font-size: 14px; }
.le-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 12px; align-items: start; }
.le-stage { border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface-2); padding: 0; overflow: hidden; }
.le-stage canvas { display: block; touch-action: none; }
.le-stage canvas:focus-visible { outline: 3px solid var(--tray); outline-offset: -3px; }
.le-toggles { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 8px; font-size: 15px; font-weight: 700; color: var(--ink); }
.le-toggles label, .le-checks label { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; cursor: pointer; }
.le-toggles input, .le-checks input { width: 20px; height: 20px; accent-color: var(--tray); }
.le-help { margin: 4px 0 0; color: var(--ink-2); font-size: 13px; }
.le-real { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 10px; padding: 10px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); }
.le-real canvas { border: 1px solid var(--line-strong); background: #fff; }
.le-real span { color: var(--ink-2); font-size: 13px; }
.le-fields { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.le-fields button { min-height: 36px; padding: 4px 10px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--surface); color: var(--ink); font-size: 14px; font-weight: 700; cursor: pointer; }
.le-fields button[aria-pressed="true"] { background: var(--tray-tint); border-color: var(--tray); color: var(--tray-ink); }
.le-fields button.is-over { border: 2px solid var(--bad); color: var(--bad); }
.le-warn { margin-top: 10px; font-size: 14px; }
.le-warn ul { margin: 0; padding-left: 20px; display: grid; gap: 4px; }
.le-warn .bad { color: var(--bad); }
.le-warn .warn { color: var(--warn-ink); }
.le-warn .ok { margin: 0; color: var(--ok); font-weight: 700; }
.le-panel { border: 1px solid var(--line); border-radius: var(--r-sm); padding: 12px; background: var(--surface); display: grid; gap: 8px; }
.le-panel h3 { margin: 0; }
.le-panel #le-props { display: grid; gap: 8px; }
.le-panel #le-props[hidden] { display: none; }
.le-panel .field input, .le-panel .field select { min-height: 40px; font-size: 15px; }
.le-xywh { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.le-checks { display: grid; gap: 2px; font-size: 15px; font-weight: 700; color: var(--ink); }
.le-note { margin: 0; color: var(--ink-2); font-size: 13px; }
.le-note:empty { display: none; }
.le-fbtns { display: flex; gap: 6px; }
.le-fbtns .btn { min-height: 40px; flex: 1; }
.le-del { color: var(--bad); border-color: #F0A9B4; }
.le-add { min-height: 44px; }
.le-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.le-actions .btn { min-height: 44px; }
@media (max-width: 860px) {
  .le-wrap { grid-template-columns: minmax(0, 1fr); }
  .le-data { grid-template-columns: 1fr 1fr; }
  .le-data .le-q, .le-data .le-quick { grid-column: 1 / -1; }
}
/* 휴대폰 폭에서는 머리띠 버튼을 늘리지 않는다(편집기는 PC용, 아래로 내려가면 있음) */
@media (max-width: 520px) { .le-jump { display: none; } }