/* 대흥정밀 생산/금형 EMR — 스타일 */

/* ===== 폰트: 나눔스퀘어 self-host (사내망·오프라인에서도 각 PC 설치 없이 동작) =====
   R=400(본문 기본) · B=700(강조: 제목·값·지표·표데이터) · EB=800(여유분) */
@font-face { font-family:'NanumSquare'; font-weight:400; font-style:normal; font-display:swap; src:url('/fonts/NanumSquareR.woff2') format('woff2'); }
@font-face { font-family:'NanumSquare'; font-weight:700; font-style:normal; font-display:swap; src:url('/fonts/NanumSquareB.woff2') format('woff2'); }
@font-face { font-family:'NanumSquare'; font-weight:800; font-style:normal; font-display:swap; src:url('/fonts/NanumSquareEB.woff2') format('woff2'); }

/* ★색·크기 토큰은 /css/tokens.css(세 앱 공통, index.html에서 style.css보다 먼저 로드) — 여기서는 정의하지 않는다. 09-10 디자인 1단계 */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
/* 뷰 전환 시 세로 스크롤바 생겼다/사라졌다로 화면이 흔들리는 것 방지 */
html { scrollbar-gutter: stable; }
body {
  /* 나눔스퀘어(self-host) 우선 → 미로드 시 맑은고딕 대체. 한글·숫자·영문 모두 나눔스퀘어로 통일 */
  font-family: "NanumSquare", "Malgun Gothic", "맑은 고딕", system-ui, sans-serif;
  background: var(--bg); color: var(--ink); font-size: 14px; line-height: 1.45;
  /* ★ 전역 기본 굵기 = 400(Regular). 강조는 개별 요소에서만 700(제목·값·지표·표데이터). */
  font-weight: 400;
}
#app { min-height: 100vh; }

/* ===== 상단 네비(topnav) — 09-24 P4-0에 폐지: 왼쪽 메뉴 셸(파일 끝 "셸" 블록)로 이전 ===== */
.badge {
  background: var(--danger); color: #fff; border-radius: 999px; font-size: 11px;
  min-width: 18px; height: 18px; padding: 0 5px; display: inline-flex; align-items: center; justify-content: center;
}
.badge.hidden { display: none; }

/* ===== 레이아웃 =====
   섹션 간 간격은 12px로 통일한다. */
.main > .content { padding: 12px 22px 28px; margin: 0; width: 100%; min-width: 0; } /* 09-24 셸 = 3000 여백. ★폭 상한 없음(08-11 사장님) — 넓은 모니터에선 끝까지 늘어난다. 3000·3100 공통 규칙 */
.page-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; flex-wrap: wrap; gap: 10px; }
.page-head h1 { font-size: 18px; margin: 0; }
.page-head .sub { color: var(--muted); font-size: 12px; }

.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 12px 14px; margin-bottom: 12px; }
.panel h2 { font-size: 14px; margin: 0 0 8px; }
.grid-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; margin-bottom: 12px; }
.panel .grid-cards { margin-bottom: 0; }

/* ===== 대시보드 상단 ===== */
.dash-top { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.dash-top .stats { display: flex; gap: 10px; flex-wrap: wrap; }
.dash-top .quick { display: flex; gap: 8px; margin-left: auto; flex-wrap: wrap; }

/* 요약 카드: 작고 컴팩트 (숫자 옆 라벨) — 사이즈 최소화로 아래 정보량 확보 */
.stat {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 9px; box-shadow: var(--shadow); padding: 9px 18px; min-width: 165px; min-height: 47px;
  display: inline-flex; align-items: baseline; gap: 10px;
  text-decoration: none; color: inherit; transition: box-shadow .12s;
}
.stat:hover { box-shadow: 0 3px 10px rgba(20,30,50,.1); }
.stat .n { font-size: 31px; font-weight: 800; line-height: 1; letter-spacing: -.5px; }
.stat .l { color: var(--muted); font-size: 17px; font-weight: 400; white-space: nowrap; }
.stat.alert .n { color: var(--danger); }

/* 바로가기 버튼: 한 줄 직렬, 흰색 (왼쪽 요약 박스와 사이즈 통일) */
.qbtn {
  display: inline-flex; align-items: center; justify-content: center; text-decoration: none; color: var(--ink);
  background: var(--panel); border: 1px solid var(--line); border-radius: 9px;
  padding: 0 20px; min-height: 47px; font-weight: 400; font-size: 14px; white-space: nowrap;
  box-shadow: var(--shadow); transition: box-shadow .12s, background .12s;
}
.qbtn:hover { background: var(--bg-soft); box-shadow: 0 3px 10px rgba(20,30,50,.1); }

/* 가동 현황 칩 */
.run-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.run-chip {
  display: inline-flex; align-items: center; gap: 8px; background: var(--chip); border: 1px solid var(--brand-line);
  border-radius: 8px; padding: 6px 10px; font-size: 12.5px;
}
.run-chip b { color: var(--brand-dark); font-weight: 800; }
.run-chip span { color: var(--ink-2); }
.run-chip.fixing { background: var(--danger-bg-2); border-color: var(--danger-line); }
.run-chip .mini-tag { background: var(--danger); color: #fff; border-radius: 5px; padding: 1px 6px; font-size: 10.5px; font-weight: 700; }

/* 패널 헤더(악센트 바) */
.panel-head { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.panel-head h2 { margin: 0; font-size: 14px; position: relative; padding-left: 10px; }
.panel-head h2::before { content: ''; position: absolute; left: 0; top: 1px; bottom: 1px; width: 3px; border-radius: 2px; background: var(--brand); }
.panel-head .hint { margin-left: auto; }
.panel-head .meta { margin-left: auto; font-weight: 400; font-size: 13px; color: var(--ink); }
/* 패널 헤더 안 버튼은 제목 줄 높이(20px)를 넘지 않게 — 뷰 간 표 시작 위치 통일(흔들림 금지).
   flex 중앙정렬 + 하단 2px 보정: 나눔스퀘어 글리프가 낮게 앉아 텍스트가 아래로 쏠려 보이는 것 방지.
   .panel-head .btn.sm 병기 = 뒤에 오는 .btn.sm의 padding(5px)이 덮지 못하게 특이도 확보 */
.panel-head .btn, .panel-head .btn.sm { height: 20px; padding: 0 10px 2px; font-size: 12px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px; white-space: nowrap; flex-shrink: 0; }

/* 제목 영문 병기 */
.h1-en { font-size: 15px; font-weight: 700; color: var(--muted); margin-left: 8px; letter-spacing: .3px; }
.datechip { background: var(--chip); color: var(--brand-dark); border: 1px solid var(--brand-line); border-radius: 999px; padding: 5px 14px; font-weight: 700; font-size: 12.5px; }

/* 정렬 그룹: 같은 제품 이어지는 행은 상단 경계 없이 이어 보이게(색 없음) */
tbody tr.grp td { border-top: none; }
tbody tr:not(.grp) td { border-top: 1px solid var(--line-soft); }
td.strong { font-weight: 700; }

/* 2단 배치 */
.cols2 { display: grid; grid-template-columns: 1.15fr 1fr; gap: 12px; align-items: start; margin-bottom: 12px; }
.cols2 .panel { margin-bottom: 0; }
@media (max-width: 1100px) { .cols2 { grid-template-columns: 1fr; } }

/* ===== 버튼 ===== */
.btn {
  border: 1px solid var(--brand); background: var(--brand); color: #fff; cursor: pointer;
  padding: 8px 14px; border-radius: 8px; font-weight: 400; font-size: 13px; white-space: nowrap;
}
.btn:hover { background: var(--brand-dark); }
.btn.ghost { background: #fff; color: var(--ink); border-color: var(--line); }
.btn.ghost:hover { background: var(--chip); }
.btn.danger { background: var(--danger); border-color: var(--danger); }
.btn.sm { padding: 5px 10px; font-size: 12px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

.row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.row.end { justify-content: flex-end; }
.row.gap { gap: 12px; }
.spacer { flex: 1; }
.muted { color: var(--muted); }
.chip { background: var(--chip); color: var(--brand-dark); border-radius: 8px; padding: 2px 10px 3px; font-size: 12px; font-weight: 400; display: inline-block; line-height: 1.45; white-space: nowrap; flex: 0 0 auto; } /* 칩 radius 8 전역(pill 금지). 하단 +1px — 나눔스퀘어 글리프가 낮게 앉아 밑이 잘려 보이는 것 방지. nowrap+flex:none(08-03, daeheung 동기) — flex 행에서 긴 텍스트 옆 칩이 눌려 글자가 세로로 쌓이는 것 방지 */
.chip.gray { background: var(--closed); color: var(--muted); }
.chip.ok { background: var(--ok-bg); color: var(--ok); }
.chip.warn { background: var(--warn-bg); color: var(--warn-ink); }
.chip.wait { background: var(--danger-bg-2); color: var(--danger); }
.chip.brand { background: var(--brand); color: #fff; } /* 강조 관리구분(중점관리/CPK/CHK) — 솔리드 파랑 */
.chip.bold { font-weight: 700; } /* '관리' 칩 — 비관리보다 강조 */
/* 경고 안내판 — "안 보고 넘기면 문제되는 것"에만(본사 마스터 가져오기의 이름 바꾸기 안내, 07-31).
   앰버 좌측 바 + 옅은 배경. daeheung의 .empty-warn과 같은 문법(이 앱엔 없어 여기서 정의). */
.warn-box { background: var(--warn-bg); border-left: 4px solid var(--warn); padding: 10px 14px; font-size: 12.5px; line-height: 1.6; }
.warn-box b { color: var(--ink); }
.warn-box .sub { color: var(--muted); font-size: 12px; }
/* 표 안 칩 고정폭 (DESIGN 4-D): 그룹 내 최장 텍스트 기준 통일 — 표준 = 한글 4자(66px)·가운데 정렬.
   칩 텍스트는 최대 4자로 한정(품질의뢰/생산의뢰/수리검토/접수대기 등, 띄어쓰기 없음) */
table .chip { min-width: 66px; padding-left: 4px; padding-right: 4px; text-align: center; box-sizing: border-box; }

/* ===== 표 ===== (DHPV MES 색 구성: 파란 헤더 + 흰 글자)
   스크롤 기준점: 표 내부에서 스크롤(헤더·고정컬럼은 고정) */
/* ★세로 상한에 바닥을 둔다(08-10): 구버전 `calc(100vh - 250px)`는 창이 낮으면 그대로 따라 줄어
   700px 창에서 450px, 600px 창에서 350px, 더 낮으면 표가 두세 줄만 보이는 상태가 됐다.
   max()로 **최소 300px는 보장**한다 — 내용이 짧으면 어차피 그 높이까지 안 쓴다(빈 공간 안 생김). */
.table-wrap { overflow: auto; max-height: max(300px, calc(100vh - 250px)); border-bottom: 1px solid var(--line); } /* 표가 넘쳐 스크롤돼도 표 맨 밑 라인 유지 */
.table-wrap tbody tr:last-child td { border-bottom: none; } /* 마지막 행 밑줄은 래퍼 테두리가 대신(이중선 방지) */
table { border-collapse: collapse; width: 100%; font-size: 12.5px; }
th, td { padding: 5px 8px; border-bottom: 1px solid var(--line); border-right: 1px solid var(--line-soft); text-align: left; white-space: nowrap; }
th { background: var(--brand); color: #fff; font-weight: 700; position: sticky; top: 0; z-index: 2; border-bottom: none; border-right: 1px solid var(--brand-dark); text-align: center; }
/* 표 안 데이터는 전부 볼드 (통일) */
tbody td { font-weight: 700; }
/* 표 좌우 끝에는 세로선 없음 */
th:last-child, td:last-child { border-right: none; }
tbody tr:hover { background: var(--hover); }
/* PO 없는 양산 제품: 연회색 처리 */
tbody tr.nopo td { color: var(--dim); }
tbody tr.nopo td.strong { color: var(--dim); font-weight: 700; }
td.num { text-align: right; font-variant-numeric: tabular-nums; }
th.num { font-variant-numeric: tabular-nums; } /* 헤더는 가운데 정렬 유지 */
tr.clickable { cursor: pointer; }
.pos { color: var(--ok); font-weight: 700; }
.neg { color: var(--danger); font-weight: 700; }
.need { color: var(--brand); font-weight: 700; }
/* 표 공통 기준 (DESIGN 4-D):
   일자 컬럼 표준폭 = 숫자 12자(110px) · 구분 칩 다열 간격 · 가동률 조건부 서식
   범주값 셀(칩·날짜·시각·구분 등)은 가운데 정렬 = td.ctr (텍스트 왼쪽·숫자 오른쪽은 유지) */
th.col-date, td.col-date { width: 110px; min-width: 110px; white-space: nowrap; text-align: center; } /* min-width: 컬럼 많은 표에서도 압축 금지 */
td.chips .chip + .chip { margin-left: 6px; }
td.chips { text-align: center; }
td.ctr { text-align: center; }
.rate-low { color: var(--danger) !important; } /* 가동률 85% 미만 */
td.rate-na { color: var(--muted); }            /* 마감인데 산출불가(SPM·시간 미입력) */
/* 긴 텍스트 컬럼 말줄임 — 표가 옆으로 늘어나지 않게. 전체 내용은 툴팁(title)·상세 팝업에서 */
td.clip-l { max-width: 380px; overflow: hidden; text-overflow: ellipsis; }
td.clip-s { max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
/* 측정완료·마감된 이력 행 = 회색 (마감상태=회색 원칙) */
tbody tr.row-closed td { background: var(--closed); }
tbody tr.row-closed:hover td { background: var(--line); }

/* ===== 폼 ===== */
.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
/* 수리 등록 폼: 4열 — 수리일·담당자가 한 줄에 각 1/4 폭(합쳐서 기존 절반 폭), .col2=절반 폭 */
.form-grid.rep-form { grid-template-columns: repeat(4, 1fr); }
.rep-form .field.col2 { grid-column: span 2; }
/* 첫 줄 높이 통일 38 (4-G): date input의 내재 높이가 select보다 커서 어긋나는 것 교정. 수리완료 버튼도 동일 높이 */
.rep-form input, .rep-form select, .rep-form .field > .btn { height: 38px; box-sizing: border-box; }
/* 조치 부품 체크 목록: 부위·부품명 라벨이 가로로 흐르며 줄바꿈 */
.rp-checks { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; }
.rp-check { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; cursor: pointer;
  border: 1px solid var(--line); border-radius: 8px; padding: 4px 9px; background: #fff; }
.rp-check:hover { background: var(--chip); }
.field { display: flex; flex-direction: column; gap: 4px; }
.field.full { grid-column: 1 / -1; }
.field .lbl { font-size: 12px; color: var(--muted); font-weight: 400; }
/* 신규 생산 등록: 필드별 고정폭 + wrap으로 줄 수 압축(목록이 위로) */
.reg-grid { display: flex; flex-wrap: wrap; gap: 12px 14px; align-items: flex-start; }
.reg-grid .field { flex: 0 0 auto; }
.reg-grid input, .reg-grid select { width: 100%; }
/* 미입력 강조(공통): 담당자가 직접 입력해야 하는 칸이 비어있으면 앰버 표시 (등록 패널·상세 SPM) */
input.f-empty, select.f-empty { background: var(--warn-bg); border-color: var(--warn); }
input, select, textarea {
  font: inherit; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--ink);
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--brand-line-2); border-color: var(--brand); }
textarea { min-height: 70px; resize: vertical; }
.toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.search-input { min-width: 240px; }

/* ===== 모달 ===== */
.modal-overlay { position: fixed; inset: 0; background: rgba(15, 23, 40, .45); display: flex; align-items: flex-start; justify-content: center; padding: 40px 16px; z-index: 100; overflow-y: auto; }
.modal-box { background: #fff; border-radius: 12px; width: 560px; max-width: 100%; box-shadow: 0 12px 40px rgba(0,0,0,.25); }
.modal-box.wide { width: 900px; }
.modal-box.xl { width: 84vw; max-width: 1320px; }
.modal-box.lg { width: 67vw; max-width: 1060px; } /* 생산건 상세(xl)의 80% — 금형 수리의뢰 등 */
.modal-box.md { width: 42vw; max-width: 660px; }  /* 생산건 상세(xl)의 50% — 기존 수리의뢰 확인 등 */
.modal-box.w90 { width: 76vw; max-width: 1190px; } /* 생산 이력 상세(xl)의 90% — 순회 품질 검사 이력 */
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--line); cursor: move; user-select: none; flex: 0 0 auto; } /* 제목줄 드래그로 팝업 이동 */
.modal-head h3 { margin: 0; font-size: 16px; }
.modal-head .x { border: none; background: none; font-size: 18px; cursor: pointer; color: var(--muted); }
/* ★팝업 본문에 스크롤을 둔다(08-10 사장님 "가로·세로 스크롤 필요하면 넣어줘").
   구버전은 .modal-box가 overflow:visible·max-height:none이라, 좁은 창에서 내용이 상자보다 넓으면
   **스크롤 없이 그대로 밖으로 삐져나갔다**(실측: IQC 보고서 팝업 — 상자 710px에 표 839px, 잘려서 못 읽음).
   제목줄은 고정하고 본문만 스크롤한다(제목·닫기 버튼이 스크롤과 함께 사라지지 않게).
   ⚠드래그 이동 시 ui.js가 box에 maxHeight/overflowY를 직접 얹는다 — 그때는 상자 전체가 스크롤된다(기존 동작 유지). */
.modal-box { display: flex; flex-direction: column; max-height: calc(100vh - 80px); }
.modal-body { padding: 18px; overflow: auto; flex: 1 1 auto; min-height: 0; }
.confirm-msg { margin: 0 0 16px; }

/* ===== 토스트 ===== */
.toast { position: fixed; bottom: 24px; left: 50%; transform: translate(-50%, 20px); background: var(--ink); color: #fff; padding: 10px 18px; border-radius: 8px; opacity: 0; transition: all .25s; z-index: 200; box-shadow: var(--shadow); }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.err { background: var(--danger); }

/* ===== EMR 차트 ===== */
.chart-head { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px 20px; }
.chart-head .kv .k { color: var(--muted); font-size: 12px; }
.chart-head .kv .v { font-weight: 700; }
/* 금형 기본정보 한 줄 배치: 항목별 예상 텍스트 길이 반영 —
   금형번호 84 · 고객사 70 · 제품군 100 · 품명(유동) · 차수 70 · 후처리(칩2) 128 · Status 70 · 직전가동일 94 · 비고(유동) */
.mold-head { grid-template-columns: 84px 70px 100px minmax(150px, 1.2fr) 70px 128px 70px 94px minmax(130px, 1fr); gap: 8px 16px; }
.mold-head .kv .v.clip-v { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* 비고 길면 …+툴팁 */
@media (max-width: 1100px) { .mold-head { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); } } /* 좁은 화면은 자동 줄바꿈 */
.thumbs { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.thumb { width: 72px; height: 72px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); cursor: pointer; }

/* ===== 서브탭 ===== */
.subtabs { display: flex; gap: 4px; }
.subtab { padding: 7px 16px; border-radius: 8px; text-decoration: none; color: var(--muted); font-weight: 400; font-size: 13px; }
.subtab:hover { background: var(--chip); color: var(--ink); }
.subtab.on { background: var(--brand); color: #fff; }
.subtab.action { cursor: pointer; }

/* ===== 일자별 매트릭스 ===== (표 규격은 '현황요약' 기준: 12.5px / 5px 8px)
   스크롤 기준점: 매트릭스 내부 스크롤(헤더 상단·좌측 컬럼 고정) */
/* 외곽 테두리·라운드 없음 — 현황요약 표와 동일한 직각/무외곽 규격 */
.matrix-wrap { overflow: auto; max-height: max(300px, calc(100vh - 250px)); max-width: 100%; border-bottom: 1px solid var(--line); } /* 표 맨 밑 라인 유지(.table-wrap과 동일 규칙) */
.matrix-wrap tbody tr:last-child td { border-bottom: none; }
table.matrix { border-collapse: separate; border-spacing: 0; font-size: 12.5px; white-space: nowrap; background: #fff; }
.matrix th, .matrix td { padding: 5px 8px; border-bottom: 1px solid var(--line-soft); border-right: 1px solid var(--line-soft); text-align: center; }
.matrix thead th { background: var(--brand); color: #fff; position: sticky; top: 0; z-index: 2; border-right: 1px solid var(--brand-dark); }
.matrix .dc { color: var(--dim); min-width: 38px; }
.matrix .dc.has { color: var(--ink); font-weight: 700; }
.matrix .dc.po { color: var(--brand-dark); font-weight: 700; } /* 날짜별 PO 수량 = 잔여PO 값(.need 700)과 동일 굵기 */
.matrix .dc.neg { color: var(--danger); font-weight: 700; }
/* 재고 부족 시점 PO: 현재고 기준 대응 불가 → 빨간 배경 강조 */
.matrix td.dc.short { background: var(--danger-bg-2); color: var(--danger); font-weight: 700; } /* 부족 PO도 동일 굵기(700) */
/* 일반 표에서 재고 부족 셀(현재고 < 당월 PO) */
td.short-cell { background: var(--danger-bg-2); color: var(--danger); font-weight: 800; text-align: right; }
/* 오늘: 헤더 진한 주황+흰글자, 본문 옅은 노랑 */
.matrix td.today { background: var(--warn-bg); }
.matrix thead th.today { background: var(--amber); color: #fff; }
/* 일요일·공휴일: 헤더 빨강+흰글자, 본문 옅은 빨강 (토요일은 평일과 동일) */
.matrix thead th.sun, .matrix thead th.hol { background: var(--danger); color: #fff; }
.matrix td.sun, .matrix td.hol { background: var(--danger-bg); }
.matrix tr.stock td { background: var(--bg-soft); color: var(--ink-2); font-weight: 700; }
.matrix .rowlab { color: var(--muted); font-weight: 400; }
.matrix .mini { color: var(--muted); font-weight: 400; font-size: 11px; }
.matrix tr.clickable:hover td { background: var(--hover); }
.matrix tr.nopo td { color: var(--dim); }
/* 매트릭스도 좌우 끝 세로선 없음 + 데이터 볼드 (현황요약 규격) */
.matrix th:last-child, .matrix td:last-child { border-right: none; }
.matrix tbody td { font-weight: 700; }

/* 범용 고정 컬럼 (left/width는 인라인으로 지정) */
.matrix .sticky { position: sticky; background: #fff; text-align: left; z-index: 1; border-right: 1px solid var(--line); }
.matrix .sticky.num { text-align: right; }
.matrix thead .sticky { background: var(--brand); color: #fff; z-index: 3; text-align: center; }
.matrix .cat { color: var(--muted); font-weight: 400; }
.matrix .strong { font-weight: 700; }

/* 팝업/구분 고정 컬럼 */
.matrix .c-gubun { position: sticky; left: 0; width: 52px; min-width: 52px; background: #fff; z-index: 1; border-right: 1px solid var(--line); }
.matrix thead .c-gubun { background: var(--brand); color: #fff; z-index: 3; }

/* ===== 요약 카드(현황판 상단) ===== */
.sum-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; margin-bottom: 12px; }
.panel.sum { margin: 0; padding: 10px 12px; }
.sum-t { font-weight: 700; font-size: 13px; margin-bottom: 6px; padding-left: 8px; border-left: 3px solid var(--brand); }
.panel.sum table { font-size: 12px; }
.panel.sum td { padding: 3px 6px; }
.sum-total td { border-top: 2px solid var(--line); color: var(--brand-dark); }
.bars { display: flex; flex-direction: column; gap: 5px; }
.bar-row { display: grid; grid-template-columns: 40px 1fr 46px; align-items: center; gap: 8px; font-size: 12px; }
.bar-lbl { color: var(--muted); }
.bar-track { background: var(--line-soft); border-radius: 4px; height: 12px; overflow: hidden; }
.bar-fill { display: block; height: 100%; background: var(--brand); border-radius: 4px; }
.bar-val { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }

/* ===== 필터 바 ===== */
.filterbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; margin-bottom: 12px; box-shadow: var(--shadow); }
.filterbar .fb-lbl { font-size: 12px; color: var(--muted); font-weight: 400; }
.filterbar select, .filterbar input { padding: 6px 8px; font-size: 12.5px; }
.filterbar .fb-count { margin-left: auto; font-size: 12px; color: var(--muted); font-weight: 400; }

/* ===== 요약 breakdown (고객사>제품군>후처리) ===== */
.breakdown { font-size: 12.5px; }
.breakdown th, .breakdown td { padding: 4px 10px; }
.breakdown td.bd-cust { font-weight: 800; background: var(--chip); vertical-align: top; }
.breakdown td.bd-grp { font-weight: 700; color: var(--ink-2); vertical-align: top; }
.breakdown tr.bd-sub td { border-top: 1px solid var(--line); font-weight: 800; color: var(--brand-dark); background: var(--bg-soft); }
.breakdown tr.bd-total td { border-top: 2px solid var(--brand); font-weight: 800; }

/* ===== 팝업 빠른 입력 ===== */
.quick-entry { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px; }
.qe-box { background: var(--bg-soft); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; }
.qe-box b { font-size: 12.5px; display: block; margin-bottom: 6px; }
.qe-box input[type=number] { width: 90px; }
.mini { font-size: 11px; color: var(--muted); }
@media (max-width: 720px) { .quick-entry { grid-template-columns: 1fr; } }

.rate-preview { background: var(--chip); border: 1px solid var(--brand-line); border-radius: 8px; padding: 8px 12px; font-weight: 800; color: var(--brand-dark); text-align: center; }

/* 수리의뢰 배너 (생산 건 상세 상단) — 품질/생산 누가 냈든 여기 표시 */
.req-banner { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
/* 배너 텍스트 = 세부이력 표 내용(td)과 동일(13.5 · 볼드). 출처 구분은 칩·배경톤으로 */
.req-line { display: flex; align-items: center; gap: 10px; background: var(--danger-bg-2); border: 1px solid var(--danger-line); border-radius: 8px; padding: 8px 12px; font-size: 13.5px; }
.req-line .chip { margin-right: 20px; }  /* 출처 칩 ↔ 접수대기 간격 3배(gap10 + 20 = 30) */
.req-line .req-meta { color: var(--danger); font-weight: 700; }
.req-line .req-name { color: var(--ink); font-weight: 700; } /* 이름은 빨간색 금지 */
.req-line .req-sym { color: var(--ink); font-weight: 700; }
/* 품질 의뢰: 같은 빨강 계열이되 더 짙게 구분 — 배경 톤·좌측바 짙은red */
.req-line.qual { background: var(--danger-bg-2); border-color: var(--danger-line); }
/* 수리 검증 대기 배너(생산 건 상세) — 경고성 앰버 톤(의뢰 빨강과 구분: 조치할 일이지 문제 상황은 아님) */
.req-line.verify { background: var(--warn-bg); border-color: var(--warn-line); }
.req-line.verify .req-meta { color: var(--warn-ink); }
/* 출처 칩: 둘 다 도형(pill)이되 구분 — 생산=테두리형(흰 배경·빨강 테두리), 품질=솔리드 레드 */
.chip.trial { background: #fff; border: 1px solid var(--brand); color: var(--brand); } /* Trial(개발 시타) — 테두리형 파랑 */
.chip.rq-prod { background: #fff; border: 1px solid var(--danger); color: var(--danger); }
.chip.rq-qual { background: var(--danger); border: 1px solid var(--danger); color: #fff; }
/* "이 문제로 수리의뢰?" 팝업의 직전 이력 표시 박스 */
.prev-ev { margin-top: 10px; background: var(--bg-soft); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; font-size: 13.5px; font-weight: 700; white-space: pre-wrap; }
/* 금형 지난 수리이력 박스 (수리의뢰 창) */
.mold-hist { margin-top: 12px; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.mold-hist .mh-title { background: var(--bg); padding: 6px 10px; font-size: 12.5px; color: var(--muted); border-bottom: 1px solid var(--line); }
.mold-hist .mh-empty { padding: 10px; font-size: 12.5px; color: var(--muted); }
.mold-hist .mh-list { max-height: 150px; overflow-y: auto; }
.mold-hist .mh-row { display: flex; gap: 10px; padding: 6px 10px; border-bottom: 1px solid var(--line-soft); font-size: 12.5px; }
.mold-hist .mh-row:last-child { border-bottom: none; }
.mold-hist .mh-date { flex: 0 0 auto; color: var(--muted); font-variant-numeric: tabular-nums; }
.mold-hist .mh-sym { flex: 1 1 auto; }
.mold-hist .mh-eng { flex: 0 0 auto; color: var(--muted); }

/* 생산 건 상세 — 헤더(상태 우측, 폰트 키움) */
.detail-head { display: flex; flex-wrap: wrap; gap: 6px 40px; align-items: center; margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--line); } /* 항목 간 간격 40(2배) — flex gap이라 제품명이 길어도 유지 */
/* 헤더 정보 항목: 키·값 폰트 크기 통일(16px)로 균일성·가독성 확보 */
.dkv { display: flex; gap: 7px; align-items: baseline; font-size: 16px; }
.dkv .k { color: var(--muted); font-size: 16px; }
.dkv .v { font-weight: 700; }
/* 헤더 SPM 인라인 입력: 시타 후 확정값을 상세에서 바로 입력/수정(즉시 저장) */
.dkv-spm { width: 76px; height: 30px; padding: 4px 8px; font-size: 15px; font-weight: 700; }
/* 상태 dkv: 다른 항목과 같은 간격·표준 칩 크기 (오른쪽 밀착·확대 금지 — 간격 균일) */
.dkv-status { gap: 8px; }

/* 마감 가로 바 — 입력·지표 셀 동일 스타일, 전체폭 균등, 버튼 오른쪽 */
.close-bar { display: flex; gap: 12px; align-items: flex-end; }
.cb-cell { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.cb-cell .lbl { font-size: 13.5px; color: var(--muted); font-weight: 400; } /* 셀 라벨 13.5 · Regular */
.cb-cell input { width: 100%; height: 38px; font-size: 15px; padding: 10px; } /* 입력칸 15 · 여백 10 균일 */
.num-in { text-align: right; font-variant-numeric: tabular-nums; }
.mval { height: 38px; border: 1px solid var(--brand-line); border-radius: 8px; background: var(--chip); display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 800; color: var(--brand-dark); } /* 지표값 15 */
.cb-btn { flex: 0 0 auto; align-self: flex-end; height: 38px; padding: 0 24px; font-size: 15px; } /* 버튼류 폰트 15 통일 */
/* 마감 상태: 배경 회색 (확실한 구분) */
.panel.closed { background: var(--closed); }
.panel.closed .mval { background: var(--line); border-color: var(--line-2); }
.panel.closed .ev-add { background: var(--line); }

/* ===== 상세 팝업 공통 기준 (다른 패널 수정 시에도 이 기준 적용)
   폰트: 패널제목 14 · 표/칩/라벨/입력 본문 13.5(마감 입력은 15) · 지표값 15
   여백: TRBL 균일(패널/박스 14 · 입력·표셀 8~10, 좌우값에 상하 맞춤)
   모서리: 버튼·유형칩 radius 8 통일 · 버튼 높이 38(표 안 버튼 제외) ===== */
.ev-panel, .close-panel { padding: 14px; }                     /* 패널 안쪽여백 TRBL 14 */

/* 세부 이력 패널: 표·유형칩·meta */
.ev-panel .panel-head .meta { font-size: 14px; }               /* meta(건수) 14 */
.ev-table th, .ev-table td { font-size: 13.5px; padding: 5px 8px; } /* 표 헤더·본문 13.5 · 상하5/좌우8 */
.ev-table .chip { font-size: 12.5px; padding: 2px 5px; border-radius: 8px; } /* 유형칩: 폰트 12.5 · 상하2(표준 칩 높이와 동일) · radius 8 */
/* 팝업 이력 표 행 높이 통일 (기준 = 품질검사 이력: 칩 포함 32px) — 세부이력·수리이력·검사이력·가동이력 동일 */
.ev-table td, .rep-table td, .qi-table td, .run-table td { height: 32px; }
/* 금형 차트 이력 표 기본 행수: 수리 7행 · 검사/가동 4행 — 넘치면 내부 스크롤 (thead 28.5 + 행 32×n)
   (.hist-sec .table-wrap 240px 기본보다 우선하도록 특이도 유지) */
.table-wrap.rows7, .hist-sec .table-wrap.rows7 { max-height: 254px; }
.table-wrap.rows4, .hist-sec .table-wrap.rows4 { max-height: 158px; }
/* 금형 가동 이력 (.run-table, fixed): 생산일 폭 = 검사일(106) 통일, 남는 폭은 품명(auto)으로.
   min-width: 좁은 화면에서 품명이 0으로 눌리지 않게 — 부족하면 표 내부 가로 스크롤 */
.run-table { table-layout: fixed; width: 100%; min-width: 950px; }
.run-table th:nth-child(1), .run-table td:nth-child(1) { width: 106px; }  /* 생산일 = 검사일 폭 */
.run-table th:nth-child(3), .run-table td:nth-child(3) { width: 62px; }   /* 차수 */
.run-table th:nth-child(4), .run-table td:nth-child(4) { width: 70px; }   /* 설비 */
.run-table th:nth-child(5), .run-table td:nth-child(5) { width: 56px; }   /* 주야 */
.run-table th:nth-child(6), .run-table td:nth-child(6) { width: 84px; }   /* 담당자 */
.run-table th:nth-child(7), .run-table td:nth-child(7) { width: 90px; }   /* 생산 */
.run-table th:nth-child(8), .run-table td:nth-child(8) { width: 78px; }   /* 불량 */
.run-table th:nth-child(9), .run-table td:nth-child(9) { width: 90px; }   /* 마감 */
.run-table th:nth-child(10), .run-table td:nth-child(10) { width: 78px; } /* 가동률 */
.run-table th:nth-child(11), .run-table td:nth-child(11) { width: 52px; } /* 이력 */
/* 세부이력 컬럼 폭: 유형 축소 · 불량수 축소 · 내용 최대 · 삭제 우측 */
.ev-table { table-layout: fixed; width: 100%; }
.ev-table th:nth-child(1), .ev-table td:nth-child(1) { width: 62px; text-align: center; }   /* 시각 — 범주값 가운데 */
.ev-table th:nth-child(2), .ev-table td:nth-child(2) { width: 96px; text-align: center; }   /* 유형 칩 — 가운데 */
.ev-table th:nth-child(3), .ev-table td:nth-child(3) { width: 58px; }   /* 불량수 */
.ev-table th:nth-child(5), .ev-table td:nth-child(5) { width: 132px; }  /* 수리의뢰(문제성 유형만)+삭제 */
.ev-table td:nth-child(5) .btn { margin-right: 4px; }
.ev-table td:nth-child(5) .btn:last-child { margin-right: 0; }
/* 표 안 수리의뢰 버튼: 삭제와 같은 규격, 빨강 톤으로만 구분 */
.btn.ghost.req-btn { color: var(--danger); border-color: var(--danger-line); }
.btn.ghost.req-btn:hover { background: var(--danger-bg-2); }
.ev-note { white-space: pre-wrap; word-break: break-word; }

.ev-add { margin-top: 12px; background: var(--bg-soft); padding: 14px; } /* 박스 안쪽여백 TRBL 14 */
.ev-add-title { font-size: 14px; font-weight: 700; margin-bottom: 10px; } /* 패널제목 14 */
/* 이력추가 하단 버튼줄: 높이 38 통일(입력칸과 일치), 폰트 15, radius 8, 텍스트 세로중앙 */
.ev-add .row .btn { height: 38px; font-size: 15px; display: inline-flex; align-items: center; justify-content: center; }
/* 시각 · 유형 · 내용(유형 바로 오른쪽에서 시작, 잔여 전폭) — 상단 라인 정렬, 내용은 기본 1줄(입력 시 자동 확장)
   불량수 컬럼은 '불량발생'일 때만(.has-extra) 펼침 → 그 외엔 내용칸이 왼쪽으로 당겨지고 넓어짐 */
.ev-add-grid { display: grid; grid-template-columns: 150px 150px 1fr; gap: 12px; align-items: start; } /* 시각=유형 동일폭(150) — 시간 텍스트 잘림 방지 */
.ev-add-grid.has-extra { grid-template-columns: 150px 150px 110px 1fr; }
.ev-extra { display: none; }                                   /* 불량수 숨김(기본) */
.ev-add-grid.has-extra .ev-extra { display: block; }           /* 불량발생 시 노출 */
.ev-add-grid .field { gap: 5px; }                              /* 라벨↔입력 간격 통일 */
.ev-add-grid .lbl { font-size: 13.5px; }                       /* 셀 라벨 13.5 */
.ev-add-grid input, .ev-add-grid select, .ev-add-grid textarea { height: 38px; font-size: 13.5px; padding: 10px; } /* 박스 높이 38 · 본문 13.5 · 여백 10 균일 */
.ev-note-field textarea { min-height: 0; resize: none; overflow-y: hidden; line-height: 16px; } /* 1줄이 여백10+높이38 안에 딱 맞게(줄바꿈 시 autoGrow) */
@media (max-width: 900px) { .ev-add-grid { grid-template-columns: 1fr 1fr; } }

/* 열람 팝업 섹션(생산 이력 상세 등) — 섹션 간격 12px 통일(DESIGN 기준) + 표는 섹션 내부 스크롤 */
/* ===== 검사 기준(프리셋) 팝업 ===== */
/* 팝업 공통 규격(DESIGN 4-G): 칩 radius 8·폰트 12.5·여백 상하6/좌우5. 패널 제목줄 버튼은 sm(29·5/10·12) */
.modal-box .panel-head .btn { height: auto; padding: 5px 10px; font-size: 12px; line-height: inherit; border-radius: 8px; }
.spec-table { table-layout: fixed; width: 100%; min-width: 940px; } /* 좁은 화면(태블릿)에서 항목명이 눌리지 않게 — 고정컬럼 702 + 항목명 최소 238, 부족하면 표 내부 가로 스크롤 */
.spec-wrap { max-height: 510px; } /* 헤더(28.6) + 15행(32×15) + 래퍼 테두리 — 화면에 15행만 보이고 내부 스크롤 */
.spec-table .chip { font-size: 12.5px; padding: 2px 5px; border-radius: 8px; } /* 유형칩 상하2/좌우5 (4-G 표준 칩 높이) */
.spec-table td { height: 32px; padding-top: 1px; padding-bottom: 1px; overflow: hidden; text-overflow: ellipsis; } /* 행 32px(EMR 이력 표 규격) — 삭제 버튼(29) 포함 32 유지. 잘리면 …로, 전체 텍스트는 툴팁(title) */
.spec-table th:nth-child(1), .spec-table td:nth-child(1) { width: 114px; }  /* 그룹 — 8자(띄어쓰기 포함) 제한, 남는 폭은 항목명(auto)으로 */
.spec-table th:nth-child(3), .spec-table td:nth-child(3) { width: 78px; }   /* 기준값 — 8자 */
.spec-table th:nth-child(4), .spec-table td:nth-child(4) { width: 78px; }   /* +공차 */
.spec-table th:nth-child(5), .spec-table td:nth-child(5) { width: 78px; }   /* -공차 */
.spec-table th:nth-child(6), .spec-table td:nth-child(6) { width: 92px; }   /* 구분 — 칩 66 + 여백 확보 */
.spec-table th:nth-child(7), .spec-table td:nth-child(7) { width: 92px; }   /* 관리구분 — 칩 66 + 여백(셀 선에 붙지 않게). 항목명(auto)이 줄어 흡수 */
.spec-table th:nth-child(8), .spec-table td:nth-child(8) { width: 106px; }  /* 저장일 2026-07-05 */
.spec-table th:nth-child(9), .spec-table td:nth-child(9) { width: 64px; }   /* 삭제 */
/* 범주값 가운데 정렬 (DESIGN 4-D): 구분·관리구분 칩 · 저장일 · 삭제 버튼 */
.spec-table td:nth-child(6), .spec-table td:nth-child(7),
.spec-table td:nth-child(8), .spec-table td:nth-child(9) { text-align: center; }
/* 항목명(2열)은 잔여 폭 전부 */
/* 도면 열람 팝업 (금형당 1장, A4/A3 가로) — 이미지 또는 PDF(브라우저 내장 뷰어) */
/* ===== 플로팅 창 (도면 열람 등) — 배경을 막지 않아 뒤 팝업과 동시 작업 가능. 제목줄 드래그·모서리 리사이즈 ===== */
.float-win { position: fixed; z-index: 140; background: #fff; border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 16px 48px rgba(0,0,0,.3); display: flex; flex-direction: column;
  resize: both; overflow: hidden; min-width: 420px; min-height: 300px; max-width: 98vw; max-height: 96vh; }
.float-win .fw-head { display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px; border-bottom: 1px solid var(--line); cursor: move; user-select: none; flex: 0 0 auto; }
.float-win .fw-head h3 { margin: 0; font-size: 15px; }
.float-win .fw-head .x { border: none; background: none; font-size: 17px; cursor: pointer; color: var(--muted); }
.float-win .fw-body { flex: 1; overflow: auto; padding: 12px 14px; display: flex; flex-direction: column; }

/* 도면 뷰: 플로팅 창 크기에 맞춰 꽉 차게 (아래 잘림 없음 — 창을 늘리면 도면도 늘어남) */
.drawing-view { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.drawing-view img { flex: 1; min-height: 0; width: 100%; object-fit: contain; display: block; background: var(--bg-soft); border: 1px solid var(--line); border-radius: 8px; }
.drawing-view iframe.drawing-pdf { flex: 1; min-height: 0; width: 100%; display: block; border: 1px solid var(--line); border-radius: 8px; background: var(--bg-soft); }

/* ===== 품질검사 입력 ===== */
.insp-table { table-layout: auto; width: 100%; }
.insp-table .meas-td { padding: 3px 6px; }
/* 검사 입력 표: 행 높이 = 직전 검사(qi-table, 32px) 수준으로 컴팩트 */
.insp-table td { padding: 2px 8px; height: 32px; }
.insp-table input.meas, .insp-table select.meas { width: 96px; height: 26px; padding: 2px 8px; }
.tol-part { font-weight: 400; } /* 기준(+/-공차): 기준값=볼드(표 기본), 공차=Regular로 구분 */
/* 측정 샘플수 선택 (검사 입력 팝업 제목줄) — 제품 2~3개 반복 측정 시 열 확장 */
.smp-pick { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); }
.smp-pick select { height: 29px; padding: 4px 8px; font-size: 12.5px; }

/* 검사 상세 치수표 (.dim-table): 치수 데이터는 밀도 우선 — 행 높이 컴팩트 + 고정 폭.
   측정값·판정은 기준 폭 수준으로 줄이고, 남는 폭은 항목명(auto)이 흡수 */
.dim-table { table-layout: fixed; width: 100%; min-width: 1050px; } /* 좁은 화면(태블릿)에서 항목명이 눌리지 않게 — 부족하면 표 내부 가로 스크롤 */
.dim-table th:nth-child(1), .dim-table td:nth-child(1) { width: 90px; }   /* 그룹 */
.dim-table th:nth-child(3), .dim-table td:nth-child(3) { width: 90px; }   /* 관리구분 — 칩 66 + 여백 */
.dim-table th:nth-child(4), .dim-table td:nth-child(4) { width: 70px; }   /* 기준 */
.dim-table th:nth-child(5), .dim-table td:nth-child(5) { width: 62px; }   /* +공차 */
.dim-table th:nth-child(6), .dim-table td:nth-child(6) { width: 62px; }   /* -공차 */
.dim-table th:nth-child(7), .dim-table td:nth-child(7) { width: 58px; }   /* 캐비티 */
.dim-table th:nth-child(8), .dim-table td:nth-child(8) { width: 48px; }   /* 샘플 */
.dim-table th:nth-child(9), .dim-table td:nth-child(9) { width: 92px; }   /* 측정값 — 기준 폭 수준 */
.dim-table th:nth-child(10), .dim-table td:nth-child(10) { width: 64px; }  /* 판정 */
.dim-table th:nth-child(11), .dim-table td:nth-child(11) { width: 150px; } /* 비고(항목별) */
.dim-table th:nth-child(12), .dim-table td:nth-child(12) { width: 58px; }  /* 행 삭제 */
.dim-table td { padding: 2px 8px; }
.dim-table .meas { width: 80px; height: 24px; padding: 2px 6px; font-size: 12.5px; }
.dim-table .note-in { width: 100%; height: 24px; padding: 2px 6px; font-size: 12.5px; }
.dim-table .chip { min-width: 44px; padding-top: 1px; padding-bottom: 1px; }       /* 판정 OK/NG 2자 그룹 */
.dim-table td:nth-child(3) .chip { min-width: 66px; } /* 관리구분은 4자 그룹 표준(66) 유지 */
.dim-table .btn { padding: 2px 8px; font-size: 11.5px; }

/* 검사 입력 표 항목별 비고 입력칸 */
.insp-table .item-note { width: 100%; min-width: 130px; height: 26px; padding: 2px 8px; font-size: 12.5px; }

/* ===== 품질 페이지 상단 2단: 좌 순회검사 · 우 검사 지표 ===== */
.qual-top { display: grid; grid-template-columns: minmax(0, 1fr) 520px; gap: 12px; align-items: stretch; margin-bottom: 12px; }
.qual-top .panel { margin: 0; }
@media (max-width: 1100px) { .qual-top { grid-template-columns: 1fr; } }
/* 순회검사 표: 검사 이력 표와 열 폭 정렬 — 상태=결과(112) · 금형=금형(124) · 설비/주야/담당자/오늘검사=수리구분(84) */
.round-table { table-layout: fixed; width: 100%; }
.round-table th:nth-child(1), .round-table td:nth-child(1) { width: 112px; }  /* 상태 */
.round-table th:nth-child(3), .round-table td:nth-child(3) { width: 124px; }  /* 금형 */
.round-table th:nth-child(4), .round-table td:nth-child(4) { width: 84px; }   /* 설비 */
.round-table th:nth-child(5), .round-table td:nth-child(5) { width: 84px; }   /* 주야 */
.round-table th:nth-child(6), .round-table td:nth-child(6) { width: 84px; }   /* 담당자 */
.round-table th:nth-child(7), .round-table td:nth-child(7) { width: 84px; }   /* 오늘 검사 */
/* 지표 목록 (검사 대기·미마감·NG 랭킹) — 클릭 행 */
.qneed { border-top: 1px solid var(--line); }
.qlist { max-height: 176px; overflow: auto; }
.qlist-3 { max-height: 103px; overflow: auto; } /* 마감 필요 검사이력 — 3행까지 보이고 스크롤 */
.qneed-row { display: flex; align-items: center; gap: 8px; padding: 6px 4px; border-bottom: 1px solid var(--line); cursor: pointer; font-size: 12.5px; font-weight: 700; }
.qneed-row:hover { background: var(--hover); }
.qneed-row .rank { width: 18px; text-align: center; color: var(--muted); }

/* 측정완료(잠금) 열람 모드 — 생산 마감의 회색 박스와 같은 톤 + 측정값 입력 테두리 제거(수정하는 곳 아님) */
.insp-closed .table-wrap table td { background: var(--closed); }
.insp-closed .table-wrap tbody tr:hover td { background: var(--closed); }
.insp-closed .dim-table .meas { border: none; background: transparent; appearance: none; pointer-events: none; padding-left: 0; }
.insp-closed .dim-table .meas.ng { background: transparent; color: var(--danger); }
.insp-table .meas.ng { background: var(--danger-bg-2); border-color: var(--danger); color: var(--danger); font-weight: 700; }
input.ng { background: var(--danger-bg-2); border-color: var(--danger); color: var(--danger); font-weight: 700; }
.spec-grp td { background: var(--bg); color: var(--muted); font-weight: 700; font-size: 12px; padding: 4px 8px; }
.meta.neg { color: var(--danger); font-weight: 700; }
.row.wrap { flex-wrap: wrap; }

/* 열람 팝업 섹션 리듬 — 근접성: 제목 위 여백(20) > 제목→자기 내용(12)이어야 제목이 아래 내용과 한 덩어리로 읽힘.
   페이지 본문 패널의 섹션 간격 12px 규격과는 별개(팝업 .hist-sec 한정) */
.hist-sec { margin-top: 20px; }
.hist-sec > .panel-head { margin-bottom: 6px; padding-bottom: 6px; }
.hist-sec .table-wrap { max-height: 240px; }            /* 이력 많으면 섹션 안에서 스크롤(헤더 고정) */
.hist-sec .empty { padding: 12px 0; }                   /* 빈 상태도 같은 리듬(40px → 12px) */

/* 금형 차트(EMR) 이력 표 — 셀별 Max text 기준 고정폭, 텍스트 컬럼(문제점·현상·조치)이 잔여 폭 전부 */
.qi-table { table-layout: fixed; width: 100%; }
.qi-table th:nth-child(1), .qi-table td:nth-child(1) { width: 106px; } /* 검사일 2026-07-05 */
.qi-table th:nth-child(2), .qi-table td:nth-child(2) { width: 67px; }  /* 시각 18:30 */
.qi-table th:nth-child(3), .qi-table td:nth-child(3) { width: 62px; }  /* 구분 초물 */
.qi-table th:nth-child(4), .qi-table td:nth-child(4) { width: 67px; }  /* 외관 30/30 */
.qi-table th:nth-child(5), .qi-table td:nth-child(5) { width: 82px; }  /* 수리구분 외관 */
.qi-table th:nth-child(6), .qi-table td:nth-child(6) { width: 101px; } /* 결과 수리요청 칩 */
/* 문제점·비고 = 잔여 폭 3:1 (over-constrained % → 잔여만 비율 분배. 비고는 짧은 메모라 문제점에 폭 몰아줌) */
.qi-table th:nth-child(7), .qi-table td:nth-child(7) { width: 75%; }   /* 문제점 */
.qi-table th:nth-child(8), .qi-table td:nth-child(8) { width: 25%; }   /* 비고 */
/* 범주값 가운데 정렬: 검사일·시각·구분·외관·수리구분·결과 칩 */
.qi-table td:nth-child(1), .qi-table td:nth-child(2), .qi-table td:nth-child(3),
.qi-table td:nth-child(4), .qi-table td:nth-child(5), .qi-table td:nth-child(6) { text-align: center; }
.rep-table { table-layout: fixed; width: 100%; }
.rep-table th:nth-child(1), .rep-table td:nth-child(1) { width: 106px; text-align: center; }  /* 수리일 = 검사일 폭, 가운데 */
.rep-table th:nth-child(2), .rep-table td:nth-child(2) { width: 84px; text-align: center; }   /* 담당자 — 가운데 */
.rep-table th:nth-child(5), .rep-table td:nth-child(5) { width: 64px; text-align: center; }  /* LOT — 범주값 가운데 */
.rep-table th:nth-child(6), .rep-table td:nth-child(6) { width: 52px; }  /* 첨부 수 */

/* ===== 부품 리스트(BOM) — P/N 체계 ===== */
.bom-table { table-layout: fixed; width: 100%; min-width: 1020px; } /* 좁으면 표 내부 가로 스크롤 */
.bom-table td { height: 32px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bom-table .pn { font-weight: 700; }                                 /* P/N = 식별자 강조 */
.bom-table th:nth-child(1), .bom-table td:nth-child(1) { width: 232px; } /* P/N SC-MD16845-PA01-03P-01 */
.bom-table th:nth-child(2), .bom-table td:nth-child(2) { width: 58px; }  /* Rev */
.bom-table th:nth-child(4), .bom-table td:nth-child(4) { width: 78px; }  /* 구분 칩 */
.bom-table th:nth-child(5), .bom-table td:nth-child(5) { width: 130px; } /* Stage S03 NOCHING */
.bom-table th:nth-child(6), .bom-table td:nth-child(6) { width: 64px; }  /* 계열 */
.bom-table th:nth-child(8), .bom-table td:nth-child(8) { width: 56px; }  /* 수리 N회 */
.bom-table th:nth-child(9), .bom-table td:nth-child(9) { width: 90px; }  /* 최근 수리 */
.bom-table th:nth-child(10), .bom-table td:nth-child(10) { width: 62px; } /* 삭제 */
.bom-table th:nth-child(3) { width: 30%; }                                /* 명칭 : 규격/메이커 = 3:2 잔여 분배 */
.bom-table th:nth-child(7) { width: 20%; }
.bom-table .chip { font-size: 12.5px; padding: 2px 5px; border-radius: 8px; }
.bom-wrap { max-height: 446px; }        /* 헤더 + 13행 — 넘치면 내부 스크롤 */
.bom-table .num.neg, .ph-table .neg, .v.neg { color: var(--danger); font-weight: 700; } /* 수리 3회↑ 경고 */
/* 부품 수리 이력 표 */
.ph-table { table-layout: fixed; width: 100%; }
.ph-table td { height: 32px; }
.ph-table th:nth-child(1), .ph-table td:nth-child(1) { width: 106px; }  /* 수리일 = 날짜 폭 통일 */
.ph-table th:nth-child(2), .ph-table td:nth-child(2) { width: 66px; }   /* 구분 칩 */
.ph-table th:nth-child(3), .ph-table td:nth-child(3) { width: 96px; }   /* Rev R00→R01 */
.ph-table th:nth-child(6), .ph-table td:nth-child(6) { width: 76px; }   /* 담당자 */

/* BOM Tree — 스테이지 헤더 행 + 들여쓴 부품 행 (32px 리듬) */
.tree-wrap { max-height: 62vh; overflow: auto; border: 1px solid var(--line); }
.bom-tree { min-width: 980px; }  /* 좁은 화면에서 P/N(flex)이 눌리지 않게 — 부족하면 내부 가로 스크롤(표 규격과 동일 원칙) */
.tree-stage { display: flex; align-items: center; gap: 10px; height: 32px; padding: 0 10px;
  background: var(--bg); font-weight: 700; font-size: 12.5px; border-top: 1px solid var(--line); }
.tree-stage:first-child { border-top: none; }
.tree-stage.dim .t-name { color: var(--muted); font-weight: 400; }
.tree-stage .meta { margin-left: auto; font-size: 12px; color: var(--muted); }
.tree-part { display: flex; align-items: center; gap: 10px; height: 32px; padding: 0 10px 0 26px;
  font-size: 12.5px; border-top: 1px solid var(--closed); }
.tree-part:hover { background: var(--bg-soft); }
.tree-part .t-kind { width: 66px; text-align: center; flex-shrink: 0; }   /* 구분: 공정부품/플레이트/규격품 */
.tree-part .t-fam { width: 62px; text-align: center; flex-shrink: 0; }    /* 계열: PUNCH/STR/DIE */
.tree-part .t-name { font-weight: 700; width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex-shrink: 0; } /* 명칭 20자 */
/* P/N = 식별자, 절대 잘리면 안 됨 — 잔여 폭 전부 + 최소폭 보장(부족하면 트리 가로 스크롤) */
.tree-part .t-pn { color: var(--muted); white-space: nowrap; flex: 1; min-width: 220px; }
.tree-part .t-spec { color: var(--muted); width: 80px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex-shrink: 0; } /* 규격 8자 */
.tree-part .t-rev { width: 44px; text-align: center; flex-shrink: 0; }    /* Rev 3자 */
.tree-part .t-rep { width: 74px; text-align: right; flex-shrink: 0; }
.tree-part .t-rep.neg { color: var(--danger); font-weight: 700; }
.tree-part .t-last { width: 84px; text-align: right; color: var(--muted); flex-shrink: 0; }
.tree-part .chip { font-size: 12.5px; padding: 2px 5px; border-radius: 8px; flex-shrink: 0; }

/* BOM Tree 스트립 도식 — 스트립 레이아웃의 대략 개념만(장식 없음). 피스 클릭 = 스테이지 필터 토글.
   도면 콜아웃식 세로 라벨(아래→위) + 번호. 한 화면에 억지로 안 구겨넣음 — 넘치면 가로 스크롤(말줄임 없음) */
.strip { display: flex; margin-bottom: 10px; border: 1px solid var(--line); border-radius: 6px;
  overflow-x: auto; }
.strip-pc { flex: 0 0 60px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  padding: 8px 0 4px; cursor: pointer; border-left: 1px solid var(--line); background: #fff; }
.strip-pc:first-child { border-left: none; }
.strip-pc.all { flex: 0 0 46px; background: var(--bg); } /* [전체] 피스 — 스테이지 필터 해제 */
.strip-pc .pc-nm { writing-mode: vertical-rl; text-orientation: sideways; transform: rotate(180deg);
  white-space: nowrap; height: 104px; display: flex; align-items: center; font-size: 11.5px; color: var(--ink); }
  /* text-orientation: sideways — 한글·숫자도 영문처럼 통째로 눕혀 회전(도면 콜아웃과 동일). 기본값(mixed)은 "1차"가 제각각 섬 */
.strip-pc .pc-no { font-size: 12.5px; font-weight: 700; line-height: 1.2; margin-top: 12px; } /* 세로 라벨과 간격 2배 */
/* 진행 도트 — 스트립을 지나는 제품 흐름 상징: 피스마다 점, 라인은 피스 폭 전체(이웃과 이어져 보임).
   부품 등록 스테이지 = 채운 점 / 없음 = 빈 점 / 선택 = 파란 점 */
.pc-track { position: relative; width: 100%; height: 14px; margin-top: 6px;
  display: flex; align-items: center; justify-content: center; }
.pc-track::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 2px;
  margin-top: -1px; background: var(--line-2); }
.pc-dot { position: relative; width: 9px; height: 9px; border-radius: 50%; background: var(--ink-2); }
.pc-dot.hollow { width: 8px; height: 8px; background: #fff; border: 2px solid var(--line-2); }
.strip-pc.on .pc-dot { background: var(--brand); }
.strip-pc.dim { background: var(--bg-soft); }
.strip-pc.dim .pc-no, .strip-pc.dim .pc-nm { color: var(--muted); font-weight: 400; }
.strip-pc:hover { background: var(--hover); }
.strip-pc.on { background: var(--chip); box-shadow: inset 0 -2px 0 var(--brand); }

/* 수리 등록 팝업 안 "지난 수리이력" 표 */
.rr-table { table-layout: fixed; width: 100%; }
.rr-table td { height: 32px; }
.rr-table th:nth-child(1), .rr-table td:nth-child(1) { width: 106px; }  /* 수리일 */
.rr-table th:nth-child(2), .rr-table td:nth-child(2) { width: 76px; }   /* 담당자 */
.rr-table th:nth-child(3), .rr-table td:nth-child(3) { width: 92px; }   /* 이상 유형 */
.rr-table th:nth-child(6), .rr-table td:nth-child(6) { width: 56px; }   /* 부품 수 */

/* ===== 수리 등록 팝업 — 목업 구성(07-07) ===== */
.rep2-grid { display: grid; grid-template-columns: 1fr 1.7fr; gap: 14px; align-items: stretch; }
.rep2-left { display: flex; flex-direction: column; gap: 10px; }
.rep2-symp textarea { min-height: 96px; height: 100%; }   /* 문제 현상 3줄 — 왼쪽 입력 2단 높이에 맞춤 */
.grow { flex: 1; min-width: 0; }
/* 하단 메모(2줄)·첨부 — 양쪽 박스 끝단 높이 맞춤 */
.rep2-foot { align-items: stretch; }
.rep2-foot .field textarea { flex: 1; resize: none; }
/* 조치 부품 결과 표 — 선택은 BOM Tree에서, 여기는 기록만. 행 32px 리듬 · 최대 6행 후 내부 스크롤(224px)
   min-width: 텍스트 잘림 방지(공통 규칙) — 좁으면 표 내부 가로 스크롤 */
.cp-table { table-layout: fixed; width: 100%; min-width: 920px; }
.cp-table td { height: 32px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-table .chip { font-size: 12.5px; padding: 2px 5px; border-radius: 8px; }
.cp-table th:nth-child(1), .cp-table td:nth-child(1) { width: 150px; }  /* 위치 S03 NOCHING */
.cp-table th:nth-child(2), .cp-table td:nth-child(2) { width: 232px; } /* P/N */
.cp-table th:nth-child(4), .cp-table td:nth-child(4) { width: 96px; }  /* Rev R00→R01 */
.cp-table th:nth-child(5), .cp-table td:nth-child(5) { width: 66px; }  /* 구분 칩 */
.cp-table th:nth-child(6), .cp-table td:nth-child(6) { width: 56px; }  /* 개정 체크 */
.cp-table th:nth-child(7), .cp-table td:nth-child(7) { width: 62px; }  /* 삭제 */

/* 재고·PO 현황 3개 뷰(현황 요약·생산 계획·전체 현황판) — 컬럼 제목(th)만 가운데 정렬(사용자 확정).
   데이터 셀 정렬은 기존 규칙 유지(숫자 우측 등). th.num(우측) 개별 규칙을 덮기 위해 !important */
.tbl-center th { text-align: center !important; }

/* 신규 생산 등록 — 입력요소 높이 38px 한 기준으로 전부 통일(박스별 미세 차이 금지) */
.reg-grid input, .reg-grid select, .reg-grid .btn { height: 38px; box-sizing: border-box; }

/* 생산 건 목록 — 상태·구분 5자 폭(78px)·가운데, 우측(설비~이력) 열 폭 균일(88px), 남는 폭은 제품이 흡수.
   min-width 1170 = 고정폭 합(1000) + 제품 최소 170px(20자 보장) — 더 좁아지면 표 내부 가로 스크롤 */
.prod-list { table-layout: fixed; width: 100%; min-width: 1170px; }
.prod-list td:nth-child(3) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* 초장문 품명 침범 방지(보험) */
.prod-list th:nth-child(1), .prod-list td:nth-child(1) { width: 78px; }
.prod-list th:nth-child(2), .prod-list td:nth-child(2) { width: 78px; }
.prod-list th:nth-child(4), .prod-list td:nth-child(4) { width: 140px; } /* 금형 1차 M-001-1 */
.prod-list th:nth-child(n+5), .prod-list td:nth-child(n+5) { width: 88px; }
.prod-list td:nth-child(1), .prod-list td:nth-child(2) { text-align: center; }
.prod-list td:nth-child(5), .prod-list td:nth-child(6), .prod-list td:nth-child(7) { text-align: center; } /* 설비·주야·담당자 가운데 */
.prod-list .chip { min-width: 0; padding-left: 6px; padding-right: 6px; } /* 5자 컬럼 안에서 칩 고정폭 66 해제 */

/* 신규 생산 등록(다건) 라인 — 구분·제품(넓게)·금형·Cavity·설비·담당자·SPM·삭제 */
.pr-row { display: grid; grid-template-columns: 92px 1.6fr 132px 76px 150px 112px 78px 56px;
  gap: 8px; align-items: center; margin-top: 6px; }
.pr-row.pr-head { margin-top: 0; }
.pr-row.pr-head .lbl { font-size: 12px; color: var(--muted); }
.pr-row input, .pr-row select { height: 34px; box-sizing: border-box; min-width: 0; }
/* 자동 입력 박스 — 제품 선택 시 자동으로 채워지는 값(금형 차수·Cavity): 입력창이 아니라 표시형으로 보이게.
   드롭다운 화살표 제거·음영 배경. 클릭하면 여전히 차수 변경/Cavity 수정 가능(신규 금형 대비) */
.pr-row .auto-in { background: var(--bg-soft); border-color: var(--line); appearance: none; -webkit-appearance: none;
  text-align: center; color: var(--ink); }

/* PO·출하 다건 입력 행 — 제품(넓게)·날짜·수량·비고·삭제 */
.me-row { display: grid; grid-template-columns: 1.5fr 136px 110px 1fr 56px; gap: 8px; align-items: center; margin-top: 6px; }
.me-row.me-head { margin-top: 0; }
.me-row.me-head .lbl { font-size: 12px; color: var(--muted); }
.me-row input, .me-row select { height: 34px; box-sizing: border-box; }

/* 마스터 표 공통(.mst) — 행 높이 32px(수리 이력 '처리 이력' 표 규격). 행 클릭 = 편집 팝업(행별 버튼 금지, ↑↓만 예외) */
.mst td { height: 32px; padding-top: 1px; padding-bottom: 1px; }
.mst .chip { font-size: 12.5px; padding: 2px 5px 3px; border-radius: 8px; }
.mst select, .mst input { height: 28px; padding: 2px 6px; font-size: 12.5px; }
.mst .btn.sm { height: 26px; padding: 2px 8px; line-height: 20px; }

/* 칩 하단 여백 통일 — 상단 2 / 하단 3 (나눔스퀘어 하단 잘림 방지). 스코프별 shorthand가 덮지 않게 마지막에 일괄 적용 */
.ev-table .chip, .spec-table .chip, .bom-table .chip, .tree-part .chip, .cp-table .chip,
.qi-table .chip, .rr-table .chip, .ph-table .chip, .dim-table .chip, table .chip { padding-bottom: 3px; }

/* 치수 측정 입력 행 */
.dim-head, .dim-row { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr 32px; gap: 6px; align-items: center; }
.dim-head { font-size: 11px; color: var(--muted); font-weight: 400; margin: 6px 0 4px; padding: 0 2px; }
.dim-row { margin-bottom: 5px; }
.dim-row input { padding: 5px 7px; font-size: 12px; }

.error-box { background: var(--danger-bg-2); color: var(--danger); padding: 14px; border-radius: 8px; }
.empty { text-align: center; color: var(--muted); padding: 40px 0; }
.hint { font-size: 12px; color: var(--muted); }

/* 반응형(태블릿/모바일) */
@media (max-width: 720px) {
  .form-grid { grid-template-columns: 1fr; }
  /* ★구버전은 여기서 네비를 세로로 쌓았는데(height:auto + column), 721~900px 구간엔 그 규칙이 안 걸려
     메뉴만 2줄이 되고 높이는 56px 그대로라 밖으로 삐져나왔다(08-10 실측). 이제 전 폭에서 nowrap + 가로 스크롤
     한 가지 규칙으로 처리한다 — 좁은 화면에서 메뉴를 옆으로 밀어 보는 건 모바일 표준 동작이다. */
  .main > .content { padding: 12px 14px 20px; }
}

/* ================================================================
   DHPV Daily Inspection — 전용 스타일 (조건부 서식·검사 입력)
   ================================================================ */

/* ===== NG% 3밴드 조건부 서식 (DHPV 표준) =====
   >=10% 연어색(hi) · 3~10% 노랑(mid) · <3% 파랑(lo). 값이 있는 셀만 착색. */
td.ng-hi  { background: var(--band-hi-bg); color: var(--band-hi-ink); font-weight: 800; }
td.ng-mid { background: var(--band-mid-bg); color: var(--band-mid-ink); font-weight: 800; }
td.ng-lo  { background: var(--band-lo-bg); color: var(--band-lo-ink); font-weight: 800; }
/* 요약 스트립/카드 안에서 쓰는 인라인 밴드 pill */
.ngpill { border-radius: 8px; padding: 2px 10px 3px; font-weight: 800; display: inline-block; }
.ngpill.ng-hi { background:var(--band-hi-bg); color:var(--band-hi-ink); }
.ngpill.ng-mid { background:var(--band-mid-bg); color:var(--band-mid-ink); }
.ngpill.ng-lo { background:var(--band-lo-bg); color:var(--band-lo-ink); }


/* ===== 검사 상태 칩 (Func 상태 등) ===== */
.chip.st-ok   { background:var(--ok-bg); color:var(--ok); }
.chip.st-none { background:var(--danger-bg-2); color:var(--danger); }
.chip.st-na   { background:var(--closed); color:var(--muted); }

/* ===== KPI 카드 (대시보드) ===== */
.kpi-row { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:12px; }
.kpi { background:var(--panel); border:1px solid var(--line); border-radius:9px; box-shadow:var(--shadow);
  padding:10px 14px; min-width:0; flex:1 1 150px; }
.kpi .k { color:var(--muted); font-size:13px; font-weight:400; }
.kpi .v { font-size:24px; font-weight:800; line-height:1.15; letter-spacing:-.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.kpi .v.sm { font-size:20px; }

/* ===== 검사 입력 그리드 (불량 유형 7종 한 줄) ===== */
.defect-grid { display:grid; grid-template-columns:repeat(7, minmax(0,1fr)); gap:8px; margin-top:6px; }
.defect-grid .field { min-width:0; }
.defect-grid .field .lbl { text-align:center; }
.defect-grid input { width:100%; min-width:0; text-align:center; font-variant-numeric:tabular-nums; }
@media (max-width: 720px){ .defect-grid { grid-template-columns:repeat(4,minmax(0,1fr)); } }

/* 검사 입력 상단 요약(실시간 NG/OK/NG%) */
.insp-live { display:flex; gap:14px; align-items:center; background:var(--bg-soft); border:1px solid var(--line);
  border-radius:8px; padding:8px 14px; margin:10px 0; font-weight:800; }
.insp-live .kv { display:flex; gap:6px; align-items:baseline; }
.insp-live .kv .k { color:var(--muted); font-size:12.5px; font-weight:400; }
.insp-live .kv .v { font-size:17px; }

/* 간단 막대 (대시보드 월별 추이·Pareto) */
.mbar-row { display:grid; grid-template-columns:64px 1fr 92px; align-items:center; gap:10px; font-size:12.5px; padding:2px 0; }
.mbar-lbl { color:var(--muted); font-weight:700; }
.mbar-track { background:var(--line-soft); border-radius:4px; height:14px; overflow:hidden; position:relative; }
.mbar-fill { display:block; height:100%; background:var(--brand); border-radius:4px; }
.mbar-fill.hi { background:var(--danger); } .mbar-fill.mid { background:var(--warn); } .mbar-fill.lo { background:var(--ok); }
.mbar-val { text-align:right; font-weight:800; font-variant-numeric:tabular-nums; }

/* LOT 상태 도넛 대체 = 3색 스택 바 */
.statbar { display:flex; height:22px; border-radius:6px; overflow:hidden; border:1px solid var(--line); }
.statbar .seg { display:flex; align-items:center; justify-content:center; color:#fff; font-size:11px; font-weight:800; }
.statbar .seg.app { background:var(--ok); } .statbar .seg.func { background:var(--warn); } .statbar .seg.none { background:var(--line-2); }

/* ===== NG% 행 전체 옅은 톤 (헤드라인 NG% 기준, <3%는 흰색) =====
   tr 배경으로 은은하게 — 진한 셀 밴드(td.ng-hi 등, 불투명)가 위에서 이김. */
tbody tr.ng-row-hi  { background: var(--danger-bg); }
tbody tr.ng-row-mid { background: var(--warn-bg); }
tbody tr.ng-row-hi:hover, tbody tr.ng-row-mid:hover { background: var(--hover); }

/* 표 안 칩 세로 컴팩트 — 칩이 있는 행(입고·LOT요약)도 외관검사 텍스트 행과 같은 높이 */
table td .chip { padding-top: 0; padding-bottom: 1px; line-height: 1.3; }

/* ===== 검사 입력 팝업 — 세그먼트 토글 + 다중 검사원 입력 그리드 ===== */
.seg-toggle { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.seg-toggle .seg { border: none; background: #fff; color: var(--muted); padding: 7px 16px; font: inherit; cursor: pointer; font-size: 13px; }
.seg-toggle .seg + .seg { border-left: 1px solid var(--line); }
.seg-toggle .seg.on { background: var(--brand); color: #fff; font-weight: 700; }

.entry-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 8px; }
table.entry-grid { border-collapse: collapse; width: 100%; font-size: 12.5px; }
table.entry-grid th { background: var(--brand); color: #fff; font-weight: 700; padding: 5px 6px; text-align: center; white-space: nowrap; position: static; }
table.entry-grid td { padding: 3px 5px; border-bottom: 1px solid var(--line); }
table.entry-grid tbody td { font-weight: 400; }
table.entry-grid input, table.entry-grid select { width: 100%; min-width: 62px; padding: 5px 6px; height: 32px; }
table.entry-grid select { min-width: 150px; }
table.entry-grid input[type=time] { min-width: 92px; }
table.entry-grid input[type=number] { text-align: right; font-variant-numeric: tabular-nums; }
table.entry-grid .btn.sm { padding: 3px 8px; }

/* ===== 대시보드 정리 — 균일 KPI + 정렬된 막대행 ===== */
.kpi-row { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
@media screen and (max-width: 1320px) { .kpi-row { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* 09-24: 왼쪽 메뉴 220 반영 — 홈 위 지표(.kpis6)와 같은 기준 · 큰 숫자가 칸을 넘치지 않게 */
.kpi { display: flex; flex-direction: column; gap: 3px; justify-content: center; }
.kpi .v.hi { color: var(--danger); } .kpi .v.mid { color: var(--warn-ink); } .kpi .v.lo { color: var(--ok); }

/* 막대 행: 각 숫자가 자기 컬럼에서 우측 정렬되어 세로로 딱 맞음 */
.mrow { display: grid; align-items: center; gap: 10px; font-size: 12.5px; padding: 3px 2px; border-bottom: 1px solid var(--bg-soft); }
.mrow:last-child { border-bottom: none; }
.mrow.m-month { grid-template-columns: 44px minmax(60px, 1fr) 46px 46px 46px 52px 84px; }
.mrow.m-pareto { grid-template-columns: 74px 1fr 64px 50px 62px; }
.mrow .lbl { color: var(--muted); font-weight: 700; }
.mrow .r { text-align: right; font-variant-numeric: tabular-nums; font-weight: 800; }
.mrow .r.mut { font-weight: 400; color: var(--muted); }
.mrow .track { background: var(--line-soft); border-radius: 4px; height: 13px; overflow: hidden; }
.mrow .fill { display: block; height: 100%; background: var(--brand); border-radius: 4px; }
.mrow .fill.hi { background: var(--danger); } .mrow .fill.mid { background: var(--warn); } .mrow .fill.lo { background: var(--ok); }
.dash-note { font-size: 11.5px; color: var(--muted); margin-top: 8px; }

/* ===== Filter widths — Model/search 텍스트 최소 폭 확보 ===== */
/* 검색칸 270 → 190: 필터 줄이 한 줄에 들어가지 않아 보기 전환 버튼이 아래로 밀렸다(08-09 사장님).
   플레이스홀더가 조금 잘려도 무방 — 타이핑하면 어차피 짧다. */
.filterbar input[type=search] { min-width: 190px; }
.filterbar select { min-width: 150px; }              /* Model 등 긴 값 대비(≈20자) */
.filterbar input.dateinput { min-width: 138px; }

/* ===== English custom date input + calendar popup ===== */
.dateinput { cursor: pointer; background: #fff; }
.dateinput::placeholder { color: var(--dim); }
.datepop {
  position: fixed; z-index: 300; background: #fff; border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 8px 30px rgba(15,23,40,.18); padding: 10px; width: 236px; user-select: none;
}
.dp-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.dp-title { font-weight: 800; font-size: 13.5px; }
.dp-nav { border: 1px solid var(--line); background: #fff; border-radius: 6px; width: 26px; height: 26px; cursor: pointer; font-size: 15px; line-height: 1; color: var(--ink); }
.dp-nav:hover { background: var(--chip); }
.dp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.dp-wd { text-align: center; font-size: 11px; color: var(--muted); font-weight: 700; padding: 2px 0; }
.dp-day { border: none; background: none; cursor: pointer; border-radius: 6px; height: 28px; font: inherit; font-size: 12.5px; color: var(--ink); }
.dp-day:hover { background: var(--chip); }
.dp-day.today { color: var(--brand); font-weight: 800; }
.dp-day.sel { background: var(--brand); color: #fff; font-weight: 800; }
.dp-foot { display: flex; justify-content: space-between; margin-top: 6px; border-top: 1px solid var(--line); padding-top: 6px; }
.dp-link { border: none; background: none; color: var(--brand); cursor: pointer; font: inherit; font-size: 12.5px; padding: 2px 4px; }
.dp-link:hover { text-decoration: underline; }

/* ===== "No data" 시각 표현 ===== */
/* 선택한 제품에 LOT이 없는 등 — 비활성 회색 select */
select.is-empty, select:disabled { background: var(--closed); color: var(--muted); border-color: var(--line); cursor: not-allowed; }
/* 빈 목록/데이터 없음 박스 */
.empty { color: var(--muted); text-align: center; padding: 18px 12px; font-size: 12.5px; font-weight: 700;
  background: var(--bg-soft); border: 1px dashed var(--line); border-radius: 8px; margin: 4px 0; }

/* 회사 로고 (상단 네비) — 기존 DH 칩과 동일 높이 */

/* ================================================================
   주간업무보고 (Weekly Report) — 본사 제출용 '문서'.
   대시보드가 현황 조회라면 이쪽은 인쇄해서 넘기는 한 장짜리 보고서다.
   그래서 패널을 흩뿌리지 않고 한 장(rpt-sheet) 안에 절 번호대로 쌓는다.
   ================================================================ */
.rpt-sheet { background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 16px 20px 20px; }

.rpt-title { display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  border-bottom: 2px solid var(--brand); padding-bottom: 7px; margin-bottom: 14px; flex-wrap: wrap; }
.rpt-title h2 { margin: 0; font-size: 17px; letter-spacing: -.3px; }
.rpt-period { font-size: 12.5px; color: var(--muted); font-weight: 700; }

.rpt-kpi { margin-bottom: 14px; }
.rpt-kpi .kpi { padding: 8px 14px; }
.rpt-kpi .kpi .v { font-size: 23px; }

.rpt-sec { margin-bottom: 16px; break-inside: avoid; }
.rpt-sechead { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.rpt-sechead h3 { margin: 0; font-size: 13.5px; background: var(--brand-bg-2); color: var(--brand-ink);
  border-left: 3px solid var(--brand); padding: 4px 12px 5px; border-radius: 0 6px 6px 0; }
.rpt-sechead .meta { font-size: 11.5px; color: var(--muted); font-weight: 400; }
.rpt-subhead { font-size: 12px; font-weight: 800; color: var(--brand-ink); margin: 0 0 5px 2px; }
/* 영문 병기 — 한글 옆에 옅고 작게(수신자는 본사, 작성자는 현지. 둘 다 읽혀야 한다) */
.rpt-en { font-weight: 400; font-size: .82em; opacity: .72; margin-left: 6px; letter-spacing: 0; }
.kpi .k .rpt-en { display: block; margin-left: 0; font-size: 11px; opacity: .65; }

.rpt-2col { display: grid; grid-template-columns: 1.25fr 1fr; gap: 14px; align-items: start; }
.rpt-2col.mp { grid-template-columns: 1.1fr 1fr; }
.rpt-daily { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media screen and (max-width: 1320px) { .rpt-2col, .rpt-2col.mp { grid-template-columns: 1fr; } } /* 09-24: 왼쪽 메뉴 220 반영(구 1100) */

.rpt-chart { border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px 6px; background: #fff; }
.rpt-chart .rchart { width: 100%; height: auto; display: block; }
.rpt-foot { font-size: 11px; color: var(--muted); margin-top: 4px; }

/* 모델별 미니 카드 3×3 */
.rpt-modelgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
@media (max-width: 1100px) { .rpt-modelgrid { grid-template-columns: repeat(2, 1fr); } }
.rpt-mcard { border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px 4px; }
.rpt-mhead { display: flex; align-items: center; gap: 6px; margin-bottom: 2px; }
.rpt-mhead .nm { font-size: 12px; font-weight: 800; background: var(--ink-2); color: #fff;
  border-radius: 5px; padding: 2px 8px 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rpt-mhead .q { font-size: 11px; color: var(--muted); margin-left: auto; white-space: nowrap; }
.rpt-mhead .ngpill { font-size: 11.5px; padding: 1px 7px 2px; }
.rpt-mcard .rchart { width: 100%; height: auto; display: block; }

/* 서술 절 — 보기(텍스트) / 편집(textarea) 전환 */
.rpt-noteblock { border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px 10px; background: var(--bg-soft); }
.rpt-notetitle { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 800;
  color: #fff; background: var(--dim); border-radius: 5px; padding: 2px 9px 3px; margin: 0 0 7px; width: fit-content; }
.rpt-notetitle .btn { margin-left: 6px; }
.rpt-note { font-size: 12.5px; line-height: 1.75; min-height: 34px; }
.rpt-note.big { min-height: 96px; }
.rpt-line { white-space: pre-wrap; word-break: break-word; }
.rpt-empty { color: var(--dim); font-size: 12px; font-weight: 700; }
.rpt-ta { width: 100%; min-height: 130px; font: inherit; font-size: 12.5px; line-height: 1.7;
  padding: 8px 10px; border: 1px solid var(--brand); border-radius: 6px; resize: vertical; }
.rpt-ta.big { min-height: 190px; }
.rpt-sheet.editing { box-shadow: 0 0 0 2px var(--brand-line), var(--shadow); }

.rpt-recheck-hl { text-align: center; font-size: 15px; font-weight: 800; color: var(--danger-ink); margin-top: 2px; }

.rpt-sign { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  border-top: 1px solid var(--line); margin-top: 14px; padding-top: 8px;
  font-size: 11px; color: var(--muted); }

/* 표 안 증감 */
td.num.up { color: var(--danger-ink); font-weight: 800; }
td.num.down { color: var(--ok); font-weight: 800; }
td.num.mut { color: var(--muted); font-weight: 400; }
table.rpt-table th { white-space: nowrap; }

/* 인원 현황 표 — 값은 항상 보이고, 편집 모드에서만 입력칸으로 바뀐다.
   ※ 전역 th 규칙(파란 배경·흰 글자·sticky)을 여기서는 되돌린다 — 이 표의 th는 헤더가 아니라 행 머리다. */
table.rpt-mp { border-collapse: collapse; width: 100%; font-size: 12px; }
table.rpt-mp th, table.rpt-mp td { border: 1px solid var(--line); padding: 3px 6px; }
table.rpt-mp th { position: static; background: var(--bg-soft); color: var(--ink); }
table.rpt-mp .mp-side { background: var(--line-soft); font-weight: 800; width: 74px; font-size: 11.5px;
  color: var(--brand-ink); white-space: normal; line-height: 1.35; }
table.rpt-mp .mp-grp { font-weight: 700; white-space: nowrap; width: 96px; text-align: left; color: var(--brand-ink); }
table.rpt-mp .mp-cell { text-align: center; min-width: 54px; }
table.rpt-mp .mp-cell .mp-lbl { display: block; font-size: 10px; color: var(--muted); line-height: 1.25; font-weight: 400; }
table.rpt-mp .mp-cell .mp-v { font-weight: 800; font-variant-numeric: tabular-nums; min-height: 15px; display: block; }
table.rpt-mp .mp-cell.mp-blank { background: var(--bg-soft); }
table.rpt-mp .mp-in { display: none; width: 100%; min-width: 44px; padding: 2px 4px; text-align: center;
  font: inherit; font-size: 12px; border: 1px solid var(--brand); border-radius: 4px; }
.mp-edit table.rpt-mp .mp-in { display: block; }
/* 합계 칸은 입력칸이 없으므로 편집 중에도 계속 보여준다(입력하면서 합계를 확인) */
.mp-edit table.rpt-mp .mp-cell:not(.mp-total) .mp-v { display: none; }
table.rpt-mp .mp-total { background: var(--line-soft); width: 68px; }
table.rpt-mp tr.mp-gt th, table.rpt-mp tr.mp-gt td { background: var(--brand-bg-2); font-weight: 800; color: var(--brand-ink); }
table.rpt-mp .mp-total.g { background: var(--brand-line); }
table.rpt-mp tr.now th, table.rpt-mp tr.now td { border-color: var(--brand-line-2); }
.mp-delta { font-size: 12px; font-weight: 800; margin-top: 6px; color: var(--ink); }
.mp-delta.up { color: var(--danger-ink); } .mp-delta.down { color: var(--brand); }
.mp-wrap { max-height: none; }

/* SVG 차트 텍스트 (chart.js) */
.rchart { font-family: inherit; }
.rchart .rc-cat { font-size: 9.5px; fill: var(--muted); }
.rchart .rc-cat.cur { fill: var(--brand-ink); font-weight: 800; }
.rchart .rc-grp { font-size: 9.5px; fill: var(--dim); font-weight: 700; }
.rchart .rc-val { font-size: 10px; fill: var(--ink); font-weight: 800; }
.rchart .rc-val.cur { fill: var(--danger-ink); }
.rchart .rc-seg { font-size: 9px; fill: #fff; font-weight: 700; }
.rchart-daily .rc-cat { font-size: 8.5px; }
.rc-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 6px; font-size: 11px; color: var(--muted); }
.rc-lg { display: inline-flex; align-items: center; gap: 5px; }
.rc-lg i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.rc-lg-line::before { content: ''; width: 14px; height: 2px; background: var(--danger-ink); display: inline-block;
  margin-right: 5px; vertical-align: middle; }

/* ===== 검색형 셀렉트(.ssel — ui.js searchSelect, daeheung 07-19 UX 이식 2026-08-09) =====
   클릭=전체 목록 / 타이핑=즉시 필터. 원본 select는 숨긴 채 데이터·값의 원천으로 남는다. */
.ssel { position: relative; display: inline-flex; }
.ssel-native { display: none; }
.ssel-in { width: 140px; padding-right: 24px; cursor: pointer; }
.ssel::after { content: ''; position: absolute; right: 10px; top: 50%; margin-top: -2px;
  border: 4px solid transparent; border-top-color: var(--muted); pointer-events: none; }
.filterbar .ssel-in { padding: 6px 24px 6px 8px; font-size: 12.5px; }
.ssel-pop { position: fixed; z-index: 300; background: #fff; border: 1px solid var(--line); border-radius: 8px;
  box-shadow: 0 8px 28px rgba(0,0,0,.18); max-height: 300px; overflow-y: auto; padding: 4px; }
.ssel-opt { padding: 6px 10px; border-radius: 6px; cursor: pointer; font-size: 12.5px; white-space: nowrap; }
.ssel-opt:hover, .ssel-opt.act { background: var(--hover); }
.ssel-opt.on { background: var(--hover); font-weight: 700; }
.ssel-opt.ssel-all { color: var(--muted); border-bottom: 1px solid var(--line); border-radius: 6px 6px 0 0; margin-bottom: 2px; }
.ssel-empty { padding: 6px 10px; font-size: 12px; color: var(--muted); }
.ssel-model .ssel-in { width: 200px; }             /* 모델·검사원 칸은 넓게(긴 이름) */
.field .ssel { width: 100%; min-width: 0; }
.field .ssel .ssel-in { width: 100%; min-width: 0; box-sizing: border-box; }
table.entry-grid .ssel, table.entry-grid .ssel .ssel-in { width: 100%; min-width: 0; }

/* 보기 전환 버튼 묶음(daeheung .seg — 인접 버튼을 하나로 붙인다) */
.seg { display: inline-flex; gap: 0; }
.seg .btn { border-radius: 0; margin: 0; }
.seg .btn:first-child { border-radius: 8px 0 0 8px; }
.seg .btn:last-child { border-radius: 0 8px 8px 0; margin-left: -1px; }

/* 사진 크게 보기(ui.js imageView) — 새 탭이 아니라 팝업. 원본 비율 유지, 잘리지 않게 contain */
.iv-body { text-align: center; }
.iv-img { display: block; margin: 0 auto; max-width: 100%; max-height: 72vh; object-fit: contain;
  background: var(--bg-soft); border: 1px solid var(--line); border-radius: 8px; }
.iv-foot { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.iv-cap { font-weight: 700; font-size: 12.5px; }
.iv-n { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }

/* ===== IQC(수입검사) — 2026-08-09 ===== */
/* 보조 설명문. 여러 화면이 이미 .sub를 쓰고 있었는데 정의가 없어 본문 크기로 튀었다 — 여기서 한 번에 잡는다. */
.sub { color: var(--muted); font-size: 12px; font-weight: 400; }
/* seg-toggle을 링크(<a>)로도 쓴다 — 해시 라우팅이라 뒤로가기가 살아 있어야 한다 */
.seg-toggle a.seg { display: inline-block; text-decoration: none; line-height: 1.45; }
.seg-toggle a.seg.on { color: #fff; }

/* 합계 행 — 표 마지막에 붙는 굵은 줄(본문 표·보고서 공용) */
tfoot td { background: var(--bg-soft); font-weight: 800; border-top: 2px solid var(--line-2); }
.table-wrap tfoot td { position: sticky; bottom: 0; z-index: 1; }

/* ★목록 표 최소 폭(08-10 사장님 "3000처럼 화면을 줄여도 잘 바뀌게") — 본가 `.mold-list`와 같은 방식.
   구버전은 min-width가 없어 창을 줄이면 표가 **자기 최소 폭까지 눌려** 컬럼이 다 뭉갠 채로 들어갔다.
   min-width를 두면 그 아래로는 안 줄고 `.table-wrap(overflow:auto)`이 가로 스크롤을 받는다 — 글자 크기·컬럼 폭 불변.
   ★값은 **컬럼이 필요한 만큼** 준다 — 화면 가용폭(.content 1500 → 표 1419px)에 맞춰 깎지 않는다.
   본가도 그렇게 한다: `.oqch-table 1755` · `.ptl-table 1716` · `.dev-table 1490` — 넓은 모니터에서도 가로 스크롤을 받아들인다.
   컬럼을 눌러 다 보여주는 것보다, 제 폭으로 두고 미는 게 읽힌다는 판단이다(08-10 사장님 "상한은 3000 수준으로").
   산식 = **자연 폭(max-content 실측) + 열당 16px**. 열을 늘리면 여기 값도 같이 올릴 것. */
.bx-table        { min-width: 1180px; }  /* Incoming 11열 (자연 997) */
.iqc-list        { min-width: 1330px; }  /* IQC Inspections 15열 (1086) */
.iqc-lotlist     { min-width: 1700px; }  /* IQC By LOT 22열 (1346) — 불량 7종 + JIG */
.iqc-modellist   { min-width: 1600px; }  /* IQC By Model 21열 (1259) */
.app-list        { min-width: 1800px; }  /* 외관검사 21열 (1458) */
.func-list       { min-width: 940px;  }  /* 기능검사 10열 (780) */
.rew-list        { min-width: 1260px; }  /* 재검·반품 15열 (1016) */
.sum-lotlist     { min-width: 1570px; }  /* Summary By LOT 16열 (1309) */
.sum-modellist   { min-width: 1650px; }  /* Summary By Model 20열 (1326) */
.mst             { min-width: 1000px; }  /* Master 10열 — 08-12 Stage(차수)·Cav 파생 컬럼 추가(+160) */
.hqlog           { min-width: 720px;  }  /* HQ Sync history 7열 — 자연 폭 + 열당 16px 규칙 */
.dv-stock        { min-width: 1440px; }  /* Delivery Stock 14열(08-20) */
.dv-list         { min-width: 1120px; }  /* Delivery ledger 9열 */
.dv-invlist      { min-width: 900px;  }  /* Invoice 목록 7열 */
.dv-retlist      { min-width: 1260px; }  /* 고객 반품 목록 10열(09-26) */
.dv-retlist td, .dv-retrec td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dv-retrec { table-layout: fixed; width: 100%; }
.dv-oslist       { min-width: 1300px; }  /* Outsource 목록 11열 */
.dv-lots         { min-width: 1360px; }  /* Stock 모델 드릴다운 14열(팝업) */
.dv-cell-lots    { min-width: 1300px; }  /* 날짜 셀 팝업 LOT 표 13열 */

/* 목록 렌더 상한 안내(ui.listCap) — 표 바로 아래. 잘린 사실은 화면이 말한다(DESIGN).
   조치가 필요한 오류가 아니라 "더 있다"는 알림이라 앰버 틴트 + 뮤트 글자(빨강 아님). */
.hint.list-cap { background: var(--warn-bg); border: 1px solid var(--line); border-radius: 6px; padding: 6px 10px; margin-top: 6px; }

/* NG% >100% = 불가능치 표시(08-11 감사 B-5) — 밴드색 위에 점선 밑줄만 얹는다(title에 설명).
   값 클램프·별도 색은 안 쓴다(왜곡 금지 + 빨강은 이미 밴드가 쓴다). */
.ng-over { text-decoration: underline dashed; text-underline-offset: 2px; }

/* ★행 높이 통일 = Summary 표 기준 30px(08-10 사장님) — 섹터마다 29.1 / 29.6 / 32 / 37로 제각각이었다.
   원인은 행 안에 든 것: 글자만 있으면 29.1, 칩이 있으면 29.6, 버튼이 있으면 37(IQC).
   td에 height를 주고(표 셀에서 height는 최소값처럼 동작) **행 안 칩·버튼을 납작하게** 눌러 어디서나 30px이 되게 한다.
   본가도 같은 방식(`.rec-table td .btn.sm{height:20px}` · `td .chip{height:18px}`). */
.table-wrap tbody td { height: 30px; }
/* 행 안 요소는 18px로 통일 — 세로 여백(5+5)과 경계선(1)을 더해 29px이라 위 height:30px이 그대로 이긴다.
   20px이면 31px이 되어 그 표만 1px 높아진다(IQC의 [Report] 버튼이 그랬다 — 실측 37→31→30). */
.table-wrap tbody td .btn.sm { height: 18px; line-height: 16px; padding: 0 9px; font-size: 11.5px; }
.table-wrap tbody td .chip {
  height: 18px; min-width: 66px; box-sizing: border-box; padding: 0 8px; font-size: 12px; line-height: 1.2;
  display: inline-flex; align-items: center; justify-content: center;
  vertical-align: middle; /* 기본 baseline 정렬은 글리프 descender만큼(0.2px) 행을 밀어 올린다 */
}

/* ★Incoming 묶음(BOX) 구분(08-10 사장님) — 표 모양은 원본 구글시트 그대로(1행 = 1 LOT, BOX Qty 반복).
   ★구분은 **색이 아니라 선 굵기 위계**다(08-10 색 감사 결론): DESIGN §4는 "표 본문 흰색(줄무늬 X)",
   "같은 값 반복 시 그룹처럼 보이기 — 색 아님(.grp)"이라 **행 배경 밴딩은 규칙과 정면 충돌**한다.
   게다가 이 앱은 이미 hex 91종을 쓰고 있어(46종이 사실상 중복) 색을 하나 더 얹을 자리가 없다.
     · 묶음 안쪽 행 구분선 = 옅게(#f0f3f8 — td border-right와 같은 값, 새 색 아님) → 한 덩어리로 뭉친다
     · 묶음 경계 = var(--line) 그대로 → 어디서 끊기는지가 선 굵기로 읽힌다
     · 색맹·흑백 인쇄 대비 = LOT-ID 옆 묶음 순번(n/m). 색에 기대지 않는 두 번째 신호. */
.bx-table tbody tr.bx-r td { border-bottom: 1px solid var(--line-soft); }         /* 묶음 안쪽 = 옅은 선(td 세로선과 같은 값) */
.bx-table tbody tr.bx-r.bx-end td { border-bottom: 1px solid var(--line-2); }  /* 묶음 경계 = 본가 표준 행 구분선(짙은 회색) */
.bx-table tbody tr.bx-r.grp td { border-top: none; }                    /* 이어지는 행은 위 경계 없음(기존 .grp 문법) */
/* ⚠행 배경 밴딩은 쓰지 않는다(08-10 최종). 두 번 시도했다 — 진한 회색(#eef1f5)·아주 약한 회색(--bg) 모두 철회.
   표 본문에 면색이 깔리면 IQC/Func/APP 칩과 NG 조건부 서식이 앉을 자리가 흐려진다(DESIGN §4 "표 본문 흰색·줄무늬 X").
   묶음 구분은 위의 **선 위계 + 순번(n/m)** 으로 충분하다. td 배경을 비워 두므로 행 호버(`tbody tr:hover`)도 그대로 산다. */
/* 묶음 순번 — 값이 아니라 위치 표시라 흐리게. LOT-ID 뒤에 붙는다(칸 추가 없음). */
.bx-table .bx-seq { margin-left: 6px; font-weight: 400; color: var(--muted); font-size: 11.5px; font-variant-numeric: tabular-nums; }
/* ⚠묶음 LOT 합 ≠ BOX Qty에 색을 쓰지 않는다(08-10 판단): 부분 입고는 일상이라 구데이터에서 157칸이 걸렸다
   (부분 입고 82 · 초과 75). 색은 조치가 필요한 것 전용 — 여기 칠하면 IQC/Func/APP 칩의 신호가 묻힌다.
   합계는 BOX Qty 셀 툴팁에 항상 실려 있다. 이상 건만 따로 보려면 전용 필터·리포트로 뽑는 게 맞다. */

/* ★Sampled LOTs 입력 격자 = 검사기준 표와 같은 "엑셀" 문법(사장님 08-09):
   셀 안에 입력 상자를 그리지 않는다 — 격자선이 곧 칸이고 값은 그냥 텍스트로 보인다.
   ⚠셀렉터는 `table.entry-grid.iqc-entry`로 쓸 것: `.iqc-entry`만으로는 위 `table.entry-grid input`의
     min-width:62px에 특이도로 밀려 좁은 열(Cav)에서 입력칸이 열 밖으로 삐져나갔다(실측). */
/* 래퍼 테두리를 빼고 표 자신이 테두리를 갖는다(엑셀 격자).
   ★overflow-y는 기본 hidden — auto로 두면 행 높이의 소수점이 쌓여(실측 224 vs 227) 넘치지도 않았는데
     세로 스크롤바가 생긴다. 실제로 넘칠 때만 JS(fitWrap)가 auto로 바꾼다. */
.entry-wrap.iqc-wrap { border: none; border-radius: 0; overflow-x: auto; overflow-y: hidden; }
table.entry-grid.iqc-entry { table-layout: fixed; border: 1px solid var(--line); }
table.entry-grid.iqc-entry th { padding: 5px 4px; }
table.entry-grid.iqc-entry td { padding: 0; border-right: 1px solid var(--line); }
table.entry-grid.iqc-entry td:last-child { border-right: none; text-align: center; }
table.entry-grid.iqc-entry input,
table.entry-grid.iqc-entry select,
table.entry-grid.iqc-entry .ssel,
table.entry-grid.iqc-entry .ssel .ssel-in {
  min-width: 0; width: 100%; height: 27px; border: none; border-radius: 0;
  background: transparent; box-shadow: none; padding: 3px 6px; font-size: 12.5px;
}
table.entry-grid.iqc-entry .ssel .ssel-in { padding-right: 18px; }
table.entry-grid.iqc-entry .ssel::after { right: 6px; }
/* 포커스만 눈에 띄게 — 엑셀 활성 셀과 같은 느낌(테두리가 아니라 안쪽 윤곽선) */
table.entry-grid.iqc-entry input:focus, table.entry-grid.iqc-entry .ssel .ssel-in:focus {
  outline: 2px solid var(--brand); outline-offset: -2px; background: #fff; }
table.entry-grid.iqc-entry input::placeholder { color: var(--line-2); }
table.entry-grid.iqc-entry .btn.ghost.sm { padding: 0 6px; height: 22px; }

.iqc-lotcell { display: flex; align-items: center; gap: 4px; padding-left: 4px; }
/* LOT-ID = 칩(검사기준 표의 '수검' 칩과 같은 어휘). 폭은 글자에 맞춘다 — table .chip의 min-width 66px 미적용 */
.iqc-lotid { flex: 0 0 auto; font-size: 11px; line-height: 1.5; padding: 1px 6px 2px; border-radius: 6px;
  background: var(--chip); color: var(--brand-dark); font-weight: 700; white-space: nowrap;
  font-variant-numeric: tabular-nums; }
.iqc-lotid.muted { background: var(--closed); color: var(--muted); font-weight: 400; }

/* 입고 묶음 목록: 이미 검사한 묶음은 옅은 회색(종결 신호) — 숨기지 않고 볼 때 구분되게 */
tr.iqc-done td, tr.iqc-done td.strong { background: var(--closed); color: var(--dim); }
tr.iqc-done:hover td { background: var(--closed); }
table.entry-grid.iqc-entry tr.iqc-skip td { background: var(--closed); color: var(--dim); }
table.entry-grid.iqc-entry tr.iqc-skip input:not([type=checkbox]) { color: var(--dim); }
table.entry-grid.iqc-entry input[type=checkbox] { width: auto; height: auto; margin: 0; padding: 0; vertical-align: middle; }

/* 검사일 · 검사원(부서→이름) · 입고수량 · 결과 한 줄 */
.form-grid.iqc-form { grid-template-columns: 170px 1fr 140px 150px; }
.iqc-insp { display: flex; gap: 6px; }
.iqc-insp .ssel { flex: 1 1 0; width: auto; min-width: 0; }
.iqc-insp .ssel:first-child { flex: 0 0 130px; }   /* 부서는 짧다 */
/* 결과 2택(PASS/NG) — **새 어휘를 만들지 않는다**(DESIGN §1-A). 기존 .seg-toggle/.seg 그대로 쓰고
   ①폼 칸이므로 옆 입력칸과 같은 폭으로 채우고 ②선택 색만 의미에 맞춘다(PASS 초록 / NG 빨강 = 조건부 서식). */
.seg-toggle.seg-res { display: flex; width: 100%; }
/* padding 9px = 옆 입력칸과 같은 38px 높이(실측 대조 — DESIGN §4-O) */
.seg-toggle.seg-res .seg { flex: 1 1 0; padding: 9px 10px; font-size: 12.5px; transition: background .12s; }
.seg-toggle.seg-res .seg:hover { background: var(--hover); }
.seg-toggle.seg-res .seg.on, .seg-toggle.seg-res .seg.on:hover { background: var(--ok); color: #fff; }
.seg-toggle.seg-res .seg.res-ng.on, .seg-toggle.seg-res .seg.res-ng.on:hover { background: var(--danger); }
/* 비고 필수인데 비었을 때 — 미입력은 색으로 알린다(앱 공통 f-empty 문법) */
input.f-empty { border-color: var(--danger); background: var(--danger-bg); }

/* .chart-head의 kv = 라벨 위 / 값 아래(daeheung 금형 차트 기본정보와 같은 문법).
   이 앱은 kv를 span으로 만들어 두어 라벨과 값이 한 줄에 붙어 버렸다 — 이 스코프에서만 세운다. */
.chart-head .kv .k, .chart-head .kv .v { display: block; }

/* 불량 사진 — 입력(상세 팝업)과 보고서가 같은 골격을 쓴다 */
.iqc-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 10px; margin-top: 6px; }
/* 사진 구역 드래그 앤 드롭(09-07 — 파일 선택 버튼과 같은 upload 경로): 끌고 있는 동안만 파란 점선 + 옅은 면 */
.iqc-photos.over { outline: 2px dashed var(--brand); outline-offset: 4px; background: var(--bg-soft); border-radius: 8px; }
.iqc-photo { margin: 0; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: #fff; }
/* contain — 불량 사진은 잘리면 안 된다(잘린 자리에 결함이 있을 수 있다). 여백은 옅은 회색. */
.iqc-photo img { width: 100%; height: 148px; object-fit: contain; background: var(--bg-soft); display: block; cursor: zoom-in; }
.iqc-pmeta { display: flex; align-items: center; gap: 4px; padding: 5px 6px; border-top: 1px solid var(--line); }
.iqc-pmeta select { padding: 3px 4px; font-size: 11.5px; min-width: 0; flex: 1 1 auto; }
.iqc-pmeta .btn { flex: 0 0 auto; }
.iqc-pq { font-size: 11.5px; color: var(--muted); font-weight: 700; white-space: nowrap; flex: 0 0 auto; }
.iqc-photos.rpt .iqc-photo img { height: 168px; cursor: zoom-in; }
.iqc-photos.rpt figcaption { display: flex; align-items: baseline; justify-content: space-between; gap: 6px;
  padding: 4px 6px; border-top: 1px solid var(--line); font-size: 11.5px; }

/* 보고서 한 장 — 원본 엑셀과 같은 순서(머리 정보 → LOT 표 → 사진 → 각주) */
table.iqc-head { width: 100%; border-collapse: collapse; font-size: 12.5px; margin-bottom: 10px; }
table.iqc-head td { border: 1px solid var(--line); padding: 5px 8px; }
td.iqc-h { background: var(--chip); color: var(--brand-dark); font-weight: 700; width: 108px; text-align: center; }
td.iqc-v { font-weight: 700; }
/* 18열이 A4 가로 한 장(≈1030px)에 들어가야 한다 — 머리글 줄바꿈 허용 + 여백 축소로 맞춘다.
   ★table-layout:fixed는 쓰지 않는다(폭을 균등 배분해 'SCRATCH'가 'SCRA…'로 잘렸다 — 실측). */
table.iqc-rpt { border-collapse: collapse; width: 100%; font-size: 11.5px; }
table.iqc-rpt th, table.iqc-rpt td { padding: 3px 5px; }
table.iqc-rpt th { position: static; white-space: normal; line-height: 1.2; }
.iqc-rpt-sub { margin: 14px 0 6px; font-weight: 700; font-size: 12.5px; color: var(--brand-dark); }
.iqc-foot { margin-top: 12px; font-size: 12px; }
.iqc-foot b { color: var(--muted); font-weight: 700; }
.iqc-note { margin-top: 6px; color: var(--muted); font-size: 11.5px; }

/* ===== 인쇄 (A4 가로) — 보고서 원본이 가로 한 장이다 ===== */
@media print {
  @page { size: A4 landscape; margin: 8mm; }
  /* ★이 블록은 ui.js printNode가 **조건 없이 한 번 더 펴서** 새 탭/저장 문서에도 그대로 먹인다
     — 인쇄 미리보기와 저장 파일이 같은 모습이 되도록. 새 규칙을 넣으면 자동으로 따라간다. */
  .side, .main > .top, .no-print, .filterbar, .toast, .modal-overlay, .float-win, .ssel-pop { display: none !important; }
  body { background: #fff; }
  .main > .content { padding: 0; max-width: none; }
  #app.shell { display: block; }
  .rpt-sheet { border: none; box-shadow: none; padding: 0; }
  .rpt-ta { display: none !important; }
  .rpt-note.view { display: block !important; }
  .mp-edit table.rpt-mp .mp-in { display: none; }
  .mp-edit table.rpt-mp .mp-cell .mp-v { display: block; }
  .table-wrap { overflow: visible; max-height: none; }
  .rpt-sec, .rpt-mcard, .rpt-chart, table { break-inside: avoid; }
  thead { display: table-header-group; }
  /* IQC 보고서: 사진은 **4열**(사장님 엑셀 양식과 같은 배치 — A4 가로 폭이면 4장이 한 줄에 들어간다) */
  .iqc-photos.rpt { grid-template-columns: repeat(4, 1fr); }
  .iqc-photo { break-inside: avoid; }
  .iqc-photos.rpt .iqc-photo img { height: 130px; }
  table.iqc-head td, table.iqc-rpt th, table.iqc-rpt td, tfoot td {
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  .table-wrap tfoot td { position: static; }
  td.ng-hi, td.ng-mid, td.ng-lo, .ngpill, .chip, table.rpt-mp thead th, .rpt-sechead h3 {
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
}

/* ★hover 팝업 + [?] 도움 칩(08-12 — 본사 이식): 설명은 제목 옆 칩으로, 내용은 body 포털 팝업으로 */
.hover-pop { position: fixed; z-index: 300; background: #fff; border: 1px solid var(--line); border-radius: 8px;
  box-shadow: var(--shadow); padding: 6px 12px; font-size: 12.5px; color: var(--ink); pointer-events: none; }
/* ★이 앱의 기본 .chip은 display:inline-block(본사는 inline-flex)이라 justify-content가 그냥은 안 먹는다 —
   08-20 실측: 21px 고정폭 안에서 '?'가 왼쪽으로 치우쳤다. 칩 자체를 flex로 세워 가로·세로 모두 가운데 고정. */
.chip.help { min-width: 0; width: 21px; height: 20px; padding: 0; box-sizing: border-box;
  display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; line-height: 1;
  cursor: help; color: var(--brand); background: var(--brand-bg-3); border: none; font-weight: 800; font-size: 13px; flex: 0 0 auto; }
.chip.help:hover { background: var(--brand); color: #fff; }
/* 도움 팝업 구조(본사 08-12 3차) — 소제목 + 불릿 */
.hover-pop { padding: 10px 14px; line-height: 1.6; }
.hover-pop .hp-body { text-align: left; font-weight: 400; }
.hover-pop .hp-p { white-space: pre-line; margin: 0 0 6px; }
.hover-pop .hp-p:last-child { margin-bottom: 0; }
.hover-pop .hp-sec { margin: 0 0 8px; }
.hover-pop .hp-sec:last-child { margin-bottom: 0; }
.hover-pop .hp-h { font-weight: 700; color: var(--brand-dark); margin: 0 0 3px; }
.hover-pop ul.hp-list { margin: 0; padding-left: 16px; }
.hover-pop ul.hp-list li { margin: 2px 0; }
/* 폭 = 텍스트에 맞춤(본사 08-12 3차) — max-content + 어절 단위 줄바꿈 */
.hover-pop { width: max-content; word-break: keep-all; overflow-wrap: break-word; }

/* ===== Invoice(DELIVERY RECEIPT) 문서 — 08-20 Delivery. JH document 실물의 구획을 재현한다.
   문서라서 표 규격(12.5px 직각)과 별도 — 인쇄물 모양이 기준. printNode가 CSS를 인라인해 그대로 찍는다. */
.inv-sheet { background: #fff; border: 1px solid var(--line); padding: 22px 26px; max-width: 900px; font-size: 12.5px; color: var(--ink); }
.inv-title { text-align: center; font-size: 20px; font-weight: 800; letter-spacing: 6px; margin-bottom: 14px; }
.inv-grid { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--ink-2); border-bottom: none; }
.inv-box { border-bottom: 1px solid var(--ink-2); padding: 6px 10px; min-height: 40px; }
.inv-box:nth-child(odd) { border-right: 1px solid var(--ink-2); }
.inv-h { font-weight: 700; font-size: 11.5px; margin-bottom: 2px; }
.inv-b { line-height: 1.5; white-space: pre-line; }
table.inv-table { width: 100%; border-collapse: collapse; margin-top: 12px; }
.inv-table th { background: var(--line-soft); color: var(--ink); border: 1px solid var(--ink-2); padding: 6px 8px; font-size: 12px; }
.inv-table td { border: 1px solid var(--ink-2); padding: 5px 8px; }
.inv-table td.num { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; }
.inv-table td.ctr { text-align: center; }
.inv-table tr.inv-total td { font-weight: 800; background: var(--gray-bg); }
.inv-sign { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 34px; }
.inv-sigline { border-bottom: 1px solid var(--ink-2); height: 46px; margin: 8px 12px 6px; }
.inv-sign .ctr { text-align: center; font-weight: 700; }


/* ═══════════ tablekit(09-07 — 3200 견적앱 이식): 우클릭 팝업·행 색·셀 형광펜·셀 메모·칼럼 숨김·복수 선택·범위 필터·형광펜 문법 ═══════════ */
/* 행 색 마킹(rc1~3) — 로직 없는 임의 구분. sticky 칸이 있는 표는 그 칸에도 배경을 재선언할 것 */
table tr.rc1 td { background: var(--mark-blue); }
table tr.rc2 td { background: var(--mark-amber); }
table tr.rc3 td { background: var(--mark-green); }
table tr.rsink { opacity: .62; } /* 내려두기(표 맨 아래 그룹) = 흐림 */
table tbody tr.rowsel td { box-shadow: inset 0 0 0 999px rgba(61, 110, 181, .14); } /* 복수 선택 = 파란 인셋 틴트 */
/* 우클릭 통합 팝업(.rcpop): 왼쪽 [행]/[셀]/[메모] 박스 2~3단 + 오른쪽 동작 버튼 스택 */
.rcpop { position: fixed; z-index: 320; background: #fff; border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 8px 26px rgba(0, 0, 0, .18); padding: 8px; display: flex; gap: 8px; align-items: stretch; }
.rcpop .rccol { display: flex; flex-direction: column; gap: 6px; }
.rcpop .rcrow { display: flex; gap: 5px; align-items: center; border: 1px solid var(--line); border-radius: 8px; padding: 4px 6px; }
.rcpop .rclbl { font-size: 12px; color: var(--ink, var(--ink)); font-weight: 700; white-space: nowrap; padding: 0 4px 0 1px; min-width: 24px; }
.rcpop .rcacts { display: flex; flex-direction: column; gap: 6px; }
.rcpop .rcacts .swx { flex: 1; min-height: 30px; border-radius: 8px; padding: 0 14px; }
.rcpop .sw { width: 28px; height: 22px; border: 1px solid var(--line); border-radius: 4px; cursor: pointer; padding: 0; }
.rcpop .sw.rc1 { background: var(--mark-blue); }
.rcpop .sw.rc2 { background: var(--mark-amber); }
.rcpop .sw.rc3 { background: var(--mark-green); }
.rcpop .sw.on { outline: 2px solid var(--brand); outline-offset: 1px; }
.rcpop .sw.none { background: #fff; position: relative; }
.rcpop .sw.none::after { content: '∅'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 13px; color: var(--muted, var(--muted)); }
.rcpop .swx { height: 22px; padding: 0 8px; border: 1px solid var(--line); border-radius: 4px; background: #fff; font: inherit; font-size: 12px; cursor: pointer; white-space: nowrap; color: var(--ink, var(--ink)); }
.rcpop .swx.on { outline: 2px solid var(--brand); outline-offset: 1px; }
.rcpop .sw.hy { background: var(--hl-y); }
.rcpop .sw.hr { background: var(--hl-r); }
.rcpop .sw.hg { background: var(--hl-g); }
/* 셀 형광펜 — td 내용을 감싼 span(글자 뒤 배경만) */
.cellhl { padding: 1px 3px; border-radius: 2px; }
.cellhl.hy { background: var(--hl-y); }
.cellhl.hr { background: var(--hl-r); }
.cellhl.hg { background: var(--hl-g); }
td .cellhl:empty { display: inline-block; min-width: 14px; height: 13px; vertical-align: -2px; }
/* 셀 메모 — 칸 왼쪽 위 파란 삼각형 + 호버 메모지 + 편집 팝업 */
td.hasmemo { position: relative; }
td.hasmemo::before { content: ''; position: absolute; left: 0; top: 0; width: 0; height: 0; pointer-events: none; z-index: 1;
  border-style: solid; border-width: 8px 8px 0 0; border-color: var(--brand) transparent transparent transparent; }
.memo-pop { position: fixed; z-index: 330; background: var(--memo-bg); border: 1px solid var(--memo-line); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.16);
  padding: 6px 9px; font-size: 12.5px; color: var(--memo-ink); max-width: 260px; white-space: pre-wrap; pointer-events: none; }
.rcpop.cellmemo { display: flex; flex-direction: column; gap: 6px; padding: 8px 10px; min-width: 240px; }
.rcpop.cellmemo .memo-h { font-size: 12px; font-weight: 700; color: var(--brand-ink); }
.rcpop.cellmemo .memo-in { font: inherit; font-size: 12.5px; height: 26px; padding: 0 7px; border: 1px solid var(--line); width: 100%; box-sizing: border-box; }
.rcpop.cellmemo .memo-acts { display: flex; justify-content: flex-end; gap: 6px; }
.rcpop.cellmemo .swx.on, .rcpop .rcrow.memorow .swx.on { background: var(--brand); color: #fff; border-color: var(--brand); font-weight: 700; }
.rcpop .rcrow.memorow .memo-in { font: inherit; font-size: 12px; height: 22px; padding: 0 6px; border: 1px solid var(--line); width: 170px; }
/* 칼럼 숨김(colhide.js): th 우클릭 메뉴 + [숨김처리 n] 복원 팝업(칩 = .q-ancopy 문법) */
.rcpop.colhide { display: flex; flex-direction: column; gap: 6px; padding: 8px; }
th.ah-gap { box-shadow: inset 3px 0 0 var(--brand); }
th.ah-gap-r { box-shadow: inset -3px 0 0 var(--brand); }
.rcpop.colhide .swx { text-align: left; min-height: 26px; padding: 0 10px; }
.filterbar .colhide-host:empty, .panel-head .colhide-host:empty { display: none; }
.q-ancopy { width: max-content; max-width: 90vw; }
.q-ancopy .line { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.q-ancopy .line .k { font-size: 12.5px; font-weight: 700; color: var(--brand-ink); }
.q-ancopy .line .hint, .q-ancopy .hint { font-size: 12px; color: var(--muted, var(--muted)); }
.q-ancopy .sects { display: flex; flex-wrap: wrap; gap: 6px; }
.q-ancopy .sect { font: inherit; font-size: 12px; height: 24px; padding: 0 10px; border: 1px solid var(--line); background: #fff; color: var(--muted, var(--muted)); cursor: pointer; }
.q-ancopy .sect.on { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 700; }
.q-ancopy .acts { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
.q-colhide .sects { margin-top: 10px; max-width: 720px; }
.modal-box:has(.q-ancopy) { width: fit-content; min-width: 420px; max-width: min(1100px, 92vw); }
.modal-box:has(.q-ancopy) .modal-body { container-type: normal; } /* ★container-type: inline-size는 내용 폭 기여를 0으로 만든다 */
/* 범위 필터 [min ~ max] 단일 박스 + 그룹 라벨 칩 + 앰버 초기화 + 보기 토글 켬 */
.filterbar .fgl { font-size: 12px; font-weight: 700; color: var(--brand-ink); background: var(--brand-bg-3); padding: 2px 8px; border-radius: 6px; white-space: nowrap; }
.filterbar .rng { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; white-space: nowrap; }
.filterbar .rng .k { color: var(--muted, var(--muted)); font-weight: 700; }
.filterbar .rngbox { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 6px; background: #fff; padding: 0 4px; }
.filterbar .rng input.rngin { width: 38px; text-align: center; font: inherit; font-size: 12.5px; border: none; padding: 4px 2px; background: transparent; }
.filterbar .rng .tilde { color: var(--muted, var(--muted)); padding: 0 2px; }
.btn.reset { color: var(--amber-ink); border-color: var(--warn-line); }
.btn.reset:hover { background: var(--warn-bg); }
.filterbar .btn.on { background: var(--brand-bg-2); border-color: var(--brand); color: var(--brand-ink); }
/* 형광펜 문법(값은 그대로, 글자 뒤 배경만) + 보기 세그먼트 토글 */
.hlv { background: var(--hl-y); padding: 2px 4px; }
.hlb { background: var(--brand-bg-3); color: var(--brand-ink); padding: 3px 6px; }
.gapp { background: var(--brand-bg-3); color: var(--brand-ink); padding: 0 5px; font-weight: 800; font-size: 11.5px; }
.hlm { background: var(--brand-bg-3); color: var(--brand-ink); padding: 2px 4px; font-weight: 800; }
.curseg { display: inline-flex; align-items: center; gap: 2px; padding: 2px; background: #fff; border: 1px solid var(--line); border-radius: 999px; }
.curseg .btn { min-width: 0; padding: 0 9px; height: 20px; line-height: 20px; font-size: 11.5px; border: none !important; border-radius: 999px; box-shadow: none; }
.curseg .btn.ghost { background: transparent !important; color: var(--muted, var(--muted)) !important; }
.curseg .btn:not(.ghost) { background: var(--brand) !important; color: #fff !important; }
/* 2줄 헤더 규격: 하위 행 sticky 겹침 방지(--th-h = 1줄 높이) + 마지막 하위 th 세로선 복원 + 파란 헤더 경계선 흰색 */
table.h2 thead th { height: 30px; box-sizing: border-box; padding-top: 0; padding-bottom: 0; } /* 행 높이 고정 = 2행 sticky top(30px)과 정확히 일치(단차 방지, 09-07) */
table.h2 thead tr:nth-child(2) th { top: var(--th-h, 30px); }
table.h2 thead tr:nth-child(2) th:last-child { border-right: 1px solid rgba(255, 255, 255, 0.55); }
table.h2 thead th { border-color: rgba(255, 255, 255, 0.55); }
@media print { .rcpop, .memo-pop { display: none !important; } }

/* 3000 이식(09-07): 저장 플래시 + 확인창 info 표(promptText) */
input.saved-flash, select.saved-flash { border-color: var(--ok) !important; box-shadow: 0 0 0 2px rgba(26, 157, 90, .18) !important; }
.saved-tag { position: absolute; transform: translateY(-50%); z-index: 5; font-size: 11.5px; font-weight: 700; color: var(--ok); background: #fff; padding: 1px 5px; border-radius: 4px; border: 1px solid var(--ok-line); white-space: nowrap; pointer-events: none; animation: savedTagFade 1.5s forwards; }
.mold-hist .mh-date { flex: 0 0 auto; color: var(--muted); font-variant-numeric: tabular-nums; }
.confirm-box { margin: 0 0 16px; }
.cf-what { margin: 0 0 10px; font-weight: 700; font-size: 13.5px; line-height: 1.5; }
.cf-info { background: var(--bg-soft); border: 1px solid var(--line); border-radius: 8px;
  padding: 9px 12px; margin: 0 0 12px; display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px;
  /* ★정보 행이 많아도 질문(.cf-ask)·버튼이 화면 밖으로 밀리지 않게 정보 박스가 먼저 스크롤한다(08-01 사용자).
     짧은 확인창은 이 값에 닿지 않아 보이는 변화가 없다 — 긴 목록(정리 대상 20건 등)에서만 내부 스크롤. */
  max-height: min(300px, calc(100vh - 330px)); overflow-y: auto; }
.cf-kv { display: contents; }   /* 라벨 열·값 열이 세로로 맞아떨어지게(각 항목이 한 줄) */
.cf-info .k { color: var(--muted); font-size: 12px; }
.cf-info .v { font-weight: 700; font-size: 12.5px; }
.cf-info .v.miss { color: var(--danger); }   /* '(미입력)' = 누락 인지(07-23) */
/* 검사 목록 집계 스트립(09-07 직원 요청 4 — Tai: 구글시트 "Filtered Sum" 문법): 필터된 전 행의 합계·NG% */
.sumstrip { display: flex; flex-wrap: wrap; align-items: stretch; gap: 6px; margin: 0 0 8px; }
/* 09-08 사장님 3번: 타일 폭 통일 — Insp Qty 천만 단위(10자 "16,718,331" ≈ 82px @14px bold) 기준 104px 고정. 행 수 칩(.ssl)은 필터바 오른쪽 끝(.fb-sum)으로 */
.sumstrip .sst { display: flex; flex-direction: column; width: 104px; min-width: 104px; box-sizing: border-box; padding: 4px 9px; border: 1px solid var(--line); background: var(--panel); border-radius: 6px; }
.filterbar .fb-sum { margin-left: auto; display: inline-flex; align-items: center; }
.filterbar .fb-sum:empty { display: none; }
.sumstrip .sst .k { font-size: 11px; color: var(--muted); white-space: nowrap; }
.sumstrip .sst .v { font-size: 14px; font-weight: 800; color: var(--ink); text-align: right; font-variant-numeric: tabular-nums; }
.sumstrip .sst.hl .v { background: var(--hl-y); padding: 0 4px; }
.sumstrip .sst.ng .v { color: var(--danger); }
.sumstrip .ssl { align-self: center; font-size: 12px; font-weight: 700; color: var(--brand-ink); background: var(--brand-bg-3); padding: 2px 8px; border-radius: 6px; white-space: nowrap; }


/* ═══════════ Tray(포장 자재) 관리(09-07) — 표 min-width 등록 + 인라인 편집칸 ═══════════ */
.tr-stock  { min-width: 1780px; }  /* Stock 16열 */
.tr-req    { min-width: 870px;  }  /* Requirement 품목별 8열 */
.tr-reqm   { min-width: 1020px; }  /* Requirement 모델별 9열 */
.tr-po     { min-width: 1300px; }  /* Monthly PO 11열 */
.tr-items  { min-width: 1240px; }  /* Tray master 10열 */
.tr-map    { min-width: 930px;  }  /* Product specs 7열 */
.tr-ledger { min-width: 800px;  }  /* 품목 원장 팝업 6열(09-26 줄 단가 칸 폐지) */
table input.inl { width: 100%; min-width: 60px; height: 26px; padding: 2px 6px; font-size: 12.5px; box-sizing: border-box; border: 1px solid transparent; background: transparent; }
table input.inl:hover { border-color: var(--line); background: #fff; }
table input.inl:focus { border-color: var(--brand); background: #fff; outline: none; }
table td .ssel { width: 100%; }
tr.dimrow td { color: var(--muted); }
tr.rowbad td { background: var(--danger-bg); }
.tr-po tfoot td, .tr-req tfoot td, .tr-stock tfoot td { border-top: 2px solid var(--line); background: var(--bg-soft); }

/* Tray 2차(09-07): 단가 시트(월 칸 클릭 · 이번 달 · ⧉ 월 복사 · 환율 행) + 인상/인하 색 + 표 폭 */
.tr-price   { min-width: 1100px; }
.tr-board   { min-width: 2300px; }
.tr-items   { min-width: 1900px; }
.tr-map     { min-width: 1500px; }
td.cell { cursor: pointer; }
td.cell:hover { background: var(--brand-bg); }
td.cell.cur { background: var(--brand-bg); }
td.cell.cur:hover { background: var(--brand-bg-2); }
td.num.dn { color: var(--brand); font-weight: 800; }
tr.fxrow td { background: var(--bg-soft); font-weight: 700; border-bottom: 2px solid var(--line); }
th .mcopy { margin-left: 4px; border: 1px solid rgba(255,255,255,.7); background: transparent; color: #fff; border-radius: 4px; font-size: 11px; line-height: 14px; padding: 0 3px; cursor: pointer; }
th .mcopy:hover { background: rgba(255,255,255,.25); }
.navright { display: inline-flex; gap: 6px; align-items: center; }

/* Tray 3차(09-07): 입력 칸이 든 행도 일반 행과 같은 높이(28px) — .inl / 검색 셀렉트 24px + 상하 2px */
.tr-board td, .tr-map td, .tr-reqm td { height: 28px; box-sizing: border-box; padding-top: 2px; padding-bottom: 2px; }
table input.inl { height: 24px; padding: 0 6px; }
table td .ssel { width: 100%; }
table td .ssel .ssel-in { height: 24px; padding: 0 22px 0 6px; font-size: 12.5px; box-sizing: border-box; width: 100%; }
/* 빠진 정보 = 노랑 칸(사장님 2번) */
/* 09-08 제안 7: 빠진 정보 = 앰버 틴트 + 점선 테두리 — 사용자가 칠하는 형광펜 노랑(#ffe999)과 갈라 둔다("채워야 할 칸" vs "내가 표시한 칸") */
td.miss { background: var(--warn-bg) !important; outline: 1px dashed var(--warn); outline-offset: -2px; }
tr.rowbad td.miss { background: var(--warn-bg-2) !important; }
.tr-count td { height: 30px; box-sizing: border-box; padding-top: 2px; padding-bottom: 2px; }
.tr-count { min-width: 1010px; }
/* Tray 4차(09-07): 2줄 헤더 묶음 칸 아래 경계선(가운데 테두리) + 표식 선택 팝업 + Used by 칸 */
table.h2 thead tr:first-child th[colspan] { border-bottom: 1px solid rgba(255, 255, 255, 0.55); }
td.pick { cursor: pointer; }
td.pick:hover { background: var(--brand-bg); }
td.pick .muted { font-weight: 500; }
table.pick tr.cur td { background: var(--brand-bg-2); }
td.usedby { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
td.usedby .ub-names { margin-left: 6px; color: var(--muted); font-weight: 500; }
td.usedby.clickable:hover { background: var(--brand-bg); cursor: pointer; }
.pick-search { width: 260px; }

/* Tray 5차(09-07): 품목 편집 = 표 형태 입력(.tr-edit) — 입력 칸은 항상 테두리(.inl.ed) */
.tr-edit td { padding: 2px 3px; height: 30px; box-sizing: border-box; }
.tr-edit input.inl.ed, .tr-edit select.inl.ed { width: 100%; height: 26px; padding: 0 6px; border: 1px solid var(--line); background: #fff; font-size: 12.5px; box-sizing: border-box; border-radius: 4px; }
.tr-edit input.inl.ed:focus, .tr-edit select.inl.ed:focus { border-color: var(--brand); outline: none; }
.tr-edit input[type=number] { text-align: right; }
.float-win .fw-body .sub { margin: 0; }
.tr-edit input.ctr { text-align: center; }

/* ★설명 상자(09-08 사장님 7번 — 주석은 깔끔·명료): 용어(굵게, 고정 폭) + 한 문장. 팝업·화면 머리 공용(ui.noteBox) */
.notebox { display: flex; flex-direction: column; gap: 2px; padding: 6px 10px; border: 1px solid var(--line); border-left: 3px solid var(--brand); border-radius: 6px; background: var(--bg-soft); font-size: 12px; color: var(--ink); }
.notebox .nb-title { font-weight: 700; color: var(--brand-dark); margin-bottom: 2px; }
.notebox .nb-row { display: flex; gap: 8px; align-items: baseline; line-height: 1.5; }
.notebox .nb-k { flex: 0 0 auto; min-width: 72px; font-weight: 700; color: var(--brand-dark); white-space: nowrap; }
.notebox .nb-v { color: var(--muted); }
.notebox .nb-v.nb-only { color: var(--ink); }
.notebox .nb-v b { color: var(--ink); font-weight: 700; }

/* 표식 선택 팝업(tablePick) 09-08: 고정 폭 칼럼(colgroup) + 필터 줄(검색 + 항목별 셀렉트) */
.pick-bar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 8px; }
.pick-bar .fb-lbl { font-size: 12px; color: var(--muted); }
.pick-bar select { padding: 4px 6px; font-size: 12.5px; min-width: 0; }
.pick-bar .ssel-in { padding: 4px 22px 4px 8px; font-size: 12.5px; height: 28px; box-sizing: border-box; }
.pick-bar .pick-n { margin-left: auto; font-size: 12px; color: var(--muted); white-space: nowrap; }
table.pick { table-layout: fixed; }
/* 팝업 안 표 사이 간격(09-08 사장님 "표 간 간격 조금 더") — 설명 상자·표·표 순으로 쌓일 때 12px */
.modal-body .notebox + .table-wrap, .fw-body .notebox + .table-wrap, .modal-body .notebox + table, .fw-body .notebox + table { margin-top: 12px; }
.modal-body .table-wrap + .table-wrap, .fw-body .table-wrap + .table-wrap { margin-top: 12px; }
.modal-body .notebox + .pick-bar { margin-top: 10px; }
table.pick td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
table.pick td.left { text-align: left; }
table.pick td.wrap { white-space: normal; }

/* ── 칼럼 묶음 접기/펼치기(09-12 — 3200 cg.js 이식, colhide.js head2 자동 배선 · 3000 동일 블록) ── */
/* 묶음 th = 라벨 + [−] · 접힘 = 26px 스텁(th.cgs [+] / td.cgx). 버튼 = currentColor(파란 머리 = 흰색), 규격 = 3000 §4-S 표 안 컨트롤 22 · 12/800 · 직각 */
th .cgh { display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: 100%; }
.cgb { border: 1px solid currentColor; background: transparent; color: inherit; width: 22px; height: 22px; line-height: 1; padding: 0; font: inherit; font-size: 12px; font-weight: 800; cursor: pointer; flex: none; opacity: .8; }
.cgb:hover { opacity: 1; background: color-mix(in srgb, currentColor 18%, transparent); }
th.cgs { padding: 0 !important; text-align: center !important; }
td.cgx { background: var(--bg-soft); padding: 0 !important; }

.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--bg); padding: 16px; box-sizing: border-box; }
.login-card { width: 360px; max-width: 100%; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); padding: 24px; box-sizing: border-box; display: flex; flex-direction: column; gap: 12px; }
.login-brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 18px; margin-bottom: 4px; }
.login-brand img { height: 28px; }
.login-title { font-weight: 800; font-size: 15px; }
.login-field { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--muted); }
.login-field input { height: 36px; font-size: 14px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; box-sizing: border-box; color: var(--ink, #111); }
.login-remember { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.login-err { min-height: 18px; font-size: 12.5px; color: var(--danger, #c62828); font-weight: 700; }
.login-btn { height: 38px; font-size: 14px; }
.login-hint { font-size: 12px; color: var(--muted); margin: 0; }
.login-foot { display: flex; justify-content: flex-end; }
.user-chip { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); cursor: pointer; font-size: 12.5px; white-space: nowrap; }
.user-chip span { color: var(--muted); font-size: 12px; }
.user-pop { position: fixed; z-index: 200; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow); display: flex; flex-direction: column; min-width: 180px; padding: 4px; }
.user-pop button { text-align: left; background: none; border: 0; padding: 8px 10px; font-size: 13px; border-radius: 6px; cursor: pointer; }
.user-pop button:hover { background: var(--hover, #f1f4f9); }
.net-band { position: fixed; left: 50%; top: 64px; transform: translateX(-50%); z-index: 400; display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 10px; background: #fff4e5; border: 1px solid #f0b35a; box-shadow: var(--shadow); font-size: 13px; font-weight: 700; color: #7a4a00; max-width: calc(100vw - 32px); box-sizing: border-box; }
.net-band .net-count { padding: 1px 8px; border-radius: 6px; background: #fff; border: 1px solid #f0b35a; font-size: 12px; white-space: nowrap; }
.net-band .net-count[hidden] { display: none; }

/* =====================================================================
   셸 — 왼쪽 메뉴 220 + 상단 바 56 (09-24 P4-0 · 3000 v5.css 30~62행 · 1724~1738행 이식)
   설계 = docs/설계_3100측면메뉴_2026-09-24.html. 값은 3000과 1px도 다르지 않게 둔다(세 앱 = 한 프로그램).
   ===================================================================== */
#app.shell { display: grid; grid-template-columns: 220px minmax(0, 1fr); min-height: 100vh; }
.side { background: #fff; border-right: 1px solid var(--line); display: flex; flex-direction: column; padding: 14px 12px 12px;
  position: sticky; top: 0; height: 100vh; overflow-y: auto; z-index: 60;
  font-size: 13px; } /* 3000 본문 13(3100 본문 14) — 메뉴 안 줄 높이를 3000과 같게 */
.side .logo { display: flex; align-items: center; gap: 10px; padding: 2px 8px 12px; }
.side .logo .mk { width: 30px; height: 30px; border-radius: 9px; background: var(--brand); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 13px; flex: none; }
.side .logo b { display: block; font-size: 14px; line-height: 1.2; font-weight: 800; }
.side .logo small { display: block; color: var(--muted); font-size: 11.5px; white-space: nowrap; }
.side .site { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 10px; padding: 7px 10px; margin-bottom: 4px; }
.side .site .i { width: 28px; height: 28px; border-radius: 8px; background: #fff; border: 1px solid var(--line); display: grid; place-items: center; color: var(--ink-2); font-size: 12px; flex: none; }
.side .site b { display: block; font-size: 12.5px; font-weight: 800; }
.side .site span { color: var(--muted); font-size: 11.5px; }
.side .grp { font-size: 11.5px; font-weight: 800; letter-spacing: .06em; color: var(--dim); padding: 12px 10px 3px; }
.side .navlink { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 9px; color: var(--ink-2); font-weight: 700; font-size: 13px; text-decoration: none; white-space: nowrap; }
.side .navlink svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; color: var(--muted); flex: none; margin-right: 2px; }
.side .navlink:hover { background: var(--hover); color: var(--ink); }
.side .navlink.active { background: var(--brand-bg); color: var(--brand-dark); }
.side .navlink.active svg { color: var(--brand); }
/* 메뉴 배지 = 3000 .chip.n(22 · R6 · 11.5/800). 톤 = 빨강 채움(지금 조치) / 노랑(오늘 안에) */
.side .navlink .chip.n { margin-left: auto; height: 22px; min-width: 22px; padding: 0 6px; border-radius: 6px; font-size: 11.5px; font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center; line-height: 1; }
.side .navlink .chip.n.neg { background: var(--danger); color: #fff; }
.side .navlink .chip.n.warn { background: var(--warn-bg); color: var(--warn-ink); }
.side .navlink .chip.hidden { display: none; }
/* HQ Link 연결 점 — 초록 = 전송 기준점 있음 / 회색 = 아직 없음(P2 운반 뒤 실제 연결 상태) */
.side .hqdot { width: 7px; height: 7px; border-radius: 50%; background: var(--line-2); flex: none; }
.side .hqdot.ok { background: var(--ok); }
.side .foot { margin-top: auto; border-top: 1px solid var(--line); padding-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.side .foot .rolebox { margin: 0; display: flex; align-items: center; gap: 6px; padding: 0 4px; }
.side .foot .rolebox .lbl { color: var(--muted); font-size: 11.5px; width: 54px; flex: none; white-space: nowrap; } /* VI 'Ngôn ngữ'가 한 줄에 들게 54 */
.side .foot .rolesel { flex: 1; min-width: 0; height: 28px; font-size: 12.5px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--ink); padding: 0 6px; }
.side .foot .curseg { flex: 1; display: flex; }
.side .foot .curseg .btn { flex: 1; height: 22px; line-height: 22px; }
.main { display: flex; flex-direction: column; min-width: 0; }
.main > .top { height: 56px; background: #fff; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 12px; padding: 0 22px;
  position: sticky; top: 0; z-index: 50; }
.main > .top .ttl { font-size: 18px; font-weight: 800; white-space: nowrap; }
.main > .top .sp { flex: 1; }
.main > .top .datechip { height: 30px; display: inline-flex; align-items: center; padding: 0 12px; }
/* 로컬 시험용 사본 칩(09-25 tools/local-test.js) — 날짜 칩과 같은 높이·모양, 앰버 = "실제 시스템 아님" */
.main > .top .testchip { height: 30px; display: inline-flex; align-items: center; padding: 0 12px; border-radius: 999px; box-sizing: border-box;
  background: var(--warn-bg); border: 1px solid var(--warn-line); color: var(--warn-ink); font-weight: 800; font-size: 12.5px; letter-spacing: .3px; white-space: nowrap; cursor: help; }
/* 머리 격자 1층(3000 통합기준 §1) = page-head 37 — 날짜칩·버튼 유무로 높이가 흔들리지 않게 */
.main > .content > .page-head { min-height: 37px; }

/* 1366 검사 PC = 64px 아이콘 레일(Screen = Inspection PC, 또는 Auto에서 1280 미만). hover = 232로 펼침(위에 뜬다 — 본문은 안 밀린다) */
html[data-screen="floor"] #app.shell { grid-template-columns: 64px minmax(0, 1fr); }
html[data-screen="floor"] .side { width: 64px; padding: 12px 8px 10px; overflow-x: hidden; transition: width .12s ease, box-shadow .12s ease; }
html[data-screen="floor"] .side:hover { width: 232px; padding: 12px 10px 10px; box-shadow: 12px 0 32px rgba(20,30,50,.16); }
html[data-screen="floor"] .side:not(:hover) .logo { justify-content: center; padding: 2px 0 10px; }
html[data-screen="floor"] .side:not(:hover) .logo > div:last-child,
html[data-screen="floor"] .side:not(:hover) .site,
html[data-screen="floor"] .side:not(:hover) .foot,
html[data-screen="floor"] .side:not(:hover) .hqdot,
html[data-screen="floor"] .side:not(:hover) .navlink > span:not(.chip) { display: none; }
html[data-screen="floor"] .side:not(:hover) .grp { font-size: 0; padding: 0; height: 1px; background: var(--line); margin: 8px 6px; }
html[data-screen="floor"] .side:not(:hover) .navlink { position: relative; justify-content: center; padding: 9px 0; }
html[data-screen="floor"] .side:not(:hover) .navlink svg { margin: 0; }
html[data-screen="floor"] .side:not(:hover) .navlink .chip.n { position: absolute; top: 1px; right: 1px; height: 16px; min-width: 16px; padding: 0 4px; font-size: 10.5px; }
html[data-screen="floor"] .main > .content { padding: 10px 12px 20px; }

/* =====================================================================
   팝업 · 드로어 (09-24 P4-1 — 3000 style.css 429~ · v5.css 200~210·404~409·553~560·872~908·1216~1250 이식)
   ★배경을 막지 않는다: 오버레이 = 투명 + pointer-events none, 상자만 클릭된다(3000 규칙 — 뒤 표를 보며·눌러 가며 작업).
   드로어 = 오른쪽 도킹 · 높이 100vh · 바닥 버튼 줄이 내용이 짧아도 바닥에. 층계 d0~d3 · 접힌 띠 .dw-min · 왼쪽 변 손잡이 .drsz.
   ===================================================================== */
.modal-overlay { background: transparent; pointer-events: none; }
.modal-box { pointer-events: auto; border: 1px solid var(--line-2); box-shadow: 0 20px 60px rgba(20,30,50,.24); }
.modal-head { cursor: default; }
.modal-head h3 { font-size: 15px; font-weight: 800; }
.modal-box.sm { width: 460px; }
.modal-box.lgx { width: 72vw; max-width: 1220px; }
.modal-box.xxl { width: 88vw; max-width: 1300px; }
.modal-actions { position: sticky; bottom: -18px; z-index: 4; background: var(--bg); border-top: 1px solid var(--line); margin: 14px -18px -18px; padding: 10px 18px; border-radius: 0 0 12px 12px; } /* 10-05: bottom 0 → −18 = 본문 아래 여백(18)만큼 끌려 올라가 바로 위 줄을 4px 덮던 것(Add Incoming [+ Copy last row] 잘림 실측) — 드로어와 같은 값 */
.modal-head .hd-tool { margin-left: auto; margin-right: 8px; height: 26px; }
.modal-head .hd-tool + .hd-tool { margin-left: 0; }

.modal-overlay.drawer { justify-content: flex-end; padding: 0; align-items: stretch; overflow: hidden; transition: padding-right .13s cubic-bezier(.4, 0, .2, 1); }
.modal-overlay.drawer .modal-box { position: relative; display: flex; flex-direction: column; width: min(960px, 70vw) !important; max-width: 70vw; max-height: 100vh; height: 100vh;
  border-radius: 0; border: 0; border-left: 1px solid var(--line-2); box-shadow: -20px 0 44px rgba(20,30,50,.24), -1px 0 0 rgba(20,30,50,.05);
  transition: width .13s cubic-bezier(.4, 0, .2, 1), min-width .13s cubic-bezier(.4, 0, .2, 1), max-width .13s cubic-bezier(.4, 0, .2, 1); }
.modal-overlay.drawer .modal-box::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: linear-gradient(to right, rgba(20,30,50,.10), rgba(20,30,50,0)); pointer-events: none; z-index: 5; }
.modal-overlay.drawer .modal-head { padding: 10px 18px; cursor: grab; }
.modal-overlay.drawer .modal-head:active { cursor: grabbing; }
.modal-overlay.drawer .modal-body { flex: 1 1 auto; display: flex; flex-direction: column; overflow-x: auto; scrollbar-gutter: stable; }
.modal-overlay.drawer .modal-body > div:has(> .modal-actions) { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
.modal-overlay.drawer .modal-body > div > .modal-actions { margin-top: auto !important; } /* 인라인 margin-top(16 등)이 이기면 버튼 줄이 본문 중간에 뜬다 */
.modal-overlay.drawer .modal-actions { bottom: -18px; border-radius: 0; background: #fff; box-shadow: 0 -6px 18px rgba(20,30,50,.08); }
.modal-overlay.drawer .modal-box.sm { width: min(540px, 84vw) !important; max-width: 84vw; }
.modal-overlay.drawer .modal-box.md { width: min(660px, 84vw) !important; max-width: 84vw; }
.modal-overlay.drawer .modal-box.wide { width: min(900px, 84vw) !important; max-width: 84vw; }
.modal-overlay.drawer .modal-box.lg { width: min(1060px, 84vw) !important; max-width: 84vw; }
.modal-overlay.drawer .modal-box.xl { width: min(1040px, 76vw) !important; max-width: 76vw; }
.modal-overlay.drawer .modal-box.lgx { width: min(1220px, 84vw) !important; max-width: 84vw; }
.modal-overlay.drawer .modal-box.w90 { width: min(1190px, 84vw) !important; max-width: 84vw; }
.modal-overlay.drawer .modal-box.xxl { width: min(1300px, 84vw) !important; max-width: 84vw; }
/* 층계 — d0(맨 위) 진한 그림자·흰 제목줄·제목줄 밑 파랑 띠 / d1·d2·d3 한 단계씩 옅게 */
.modal-overlay.drawer.d1 .modal-box { box-shadow: -12px 0 28px rgba(20,30,50,.14); }
.modal-overlay.drawer.d2 .modal-box, .modal-overlay.drawer.d3 .modal-box { box-shadow: -8px 0 20px rgba(20,30,50,.10); }
.modal-overlay.drawer.d0 .modal-head { box-shadow: inset 0 -2px 0 var(--brand); }
.modal-overlay.drawer.d1 .modal-head { background: var(--bg-soft); }
.modal-overlay.drawer.d2 .modal-head { background: var(--bg); }
.modal-overlay.drawer.d3 .modal-head { background: #e9edf3; }
/* 왼쪽 변 손잡이 8px · 가운데 그립(hover) */
.modal-overlay.drawer .modal-box .drsz { position: absolute; left: 0; top: 0; bottom: 0; width: 8px; cursor: ew-resize; z-index: 6; }
.modal-overlay.drawer .modal-box .drsz:hover { background: var(--brand-bg-3); }
.modal-overlay.drawer .modal-box .drsz::after { content: ''; position: absolute; left: 2px; top: 50%; width: 3px; height: 36px; margin-top: -18px; border-radius: 2px; background: var(--line-2); opacity: 0; transition: opacity .15s; }
.modal-overlay.drawer .modal-box:hover .drsz::after { opacity: 1; }
.modal-overlay.drawer .modal-box .drsz:hover::after, .modal-overlay.drawer .modal-box .drsz:active::after { background: var(--brand); }
/* 드로어 표 머리 고정(ui.js syncDrawerTables) */
.modal-overlay.drawer .modal-box .table-wrap { max-height: none; }
.modal-overlay.drawer .modal-body .table-wrap:not(.inscroll) { overflow: visible; max-height: none; }
.modal-overlay.drawer .modal-body .table-wrap:not(.inscroll) thead th { top: calc(var(--pin-h, 0px) - 18px); }
.modal-overlay.drawer .modal-body .table-wrap.inscroll { overflow: auto; max-height: calc(100vh - 220px); scrollbar-gutter: stable; }
/* 접힌 띠(.dw-min) — 펼침은 1차와 지금 보는 것 둘뿐, 나머지는 세로 띠(식별 문구 + ✕). 클릭 = 펼치기 */
.modal-overlay.drawer .modal-box .dw-rail, .modal-overlay.drawer .modal-box .dw-tag, .modal-overlay.drawer .modal-box .dw-state { display: none; }
.modal-overlay.drawer .modal-box.dw-min { cursor: pointer; overflow: hidden; }
.modal-overlay.drawer .modal-box.dw-min:hover { background: var(--brand-bg-3); }
.modal-overlay.drawer .modal-box.dw-min > .modal-body, .modal-overlay.drawer .modal-box.dw-min > .drsz { display: none; }
.modal-overlay.drawer .modal-box.dw-min > .modal-head { flex: 1 1 auto; flex-direction: column; align-items: center; justify-content: flex-start; gap: 8px; padding: 8px 0 12px; height: 100%; overflow: hidden; cursor: pointer; border-bottom: 0; }
.modal-overlay.drawer .modal-box.dw-min > .modal-head > .hd-row { display: none; }
.modal-overlay.drawer .modal-box.dw-min > .modal-head > .x { order: -1; font-size: 15px; flex: 0 0 auto; }
.modal-overlay.drawer .modal-box.dw-min .dw-tag, .modal-overlay.drawer .modal-box.dw-min .dw-state { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; writing-mode: vertical-rl; width: 22px; min-width: 22px; max-width: 22px; height: auto; min-height: 62px; max-height: 148px; padding: 5px 0; margin: 0; font-size: 10px; letter-spacing: 0; white-space: nowrap; overflow: hidden; border-radius: 6px; }
.modal-overlay.drawer .modal-box.dw-min .dw-rail { display: block; writing-mode: vertical-rl; font-size: 12.5px; font-weight: 800; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-height: 0; flex: 1 1 auto; }
.modal-overlay.drawer .modal-box.dw-min > .modal-head > *:not(.x):not(.dw-tag):not(.dw-rail):not(.dw-state) { order: 9; flex: 0 0 auto; writing-mode: vertical-rl; width: 24px; min-width: 24px; max-width: 24px; height: auto; max-height: 150px; padding: 8px 0; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 드로어 이동 애니메이션(0.13s) — 끄는 중·여는 순간·모션 최소화 설정에서는 끈다 */
body.dw-dragging .modal-overlay.drawer, body.dw-dragging .modal-overlay.drawer .modal-box { transition: none; }
body.dw-opening .modal-overlay.drawer, body.dw-opening .modal-overlay.drawer .modal-box { transition: none; }
.modal-overlay.drawer.dw-enter { transition: none; }
.modal-overlay.drawer.dw-enter .modal-box { animation: dwEnter .13s cubic-bezier(.4, 0, .2, 1); }
@keyframes dwEnter { from { transform: translateX(26px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .modal-overlay.drawer, .modal-overlay.drawer .modal-box { transition: none; } .modal-overlay.drawer.dw-enter .modal-box { animation: none; } }
/* 팝업 크기 조절 손잡이(네 변·모서리 — 3000 09-14) */
.modal-box.resizable { overflow: auto; min-width: 360px; min-height: 140px; }
.modal-box.resizable .rsz { position: sticky; bottom: 0; left: 0; width: 16px; height: 16px; margin-top: -16px; cursor: nesw-resize; background: linear-gradient(45deg, var(--line-2) 0 3px, transparent 3px 6px, var(--line-2) 6px 9px, transparent 9px 12px, var(--line-2) 12px 15px, transparent 15px); clip-path: polygon(0 0, 0 100%, 100% 100%); z-index: 5; flex: 0 0 auto; }
.modal-box.resizable .rsz-h { position: sticky; left: 0; width: 100%; z-index: 6; flex: 0 0 auto; }
.modal-box.resizable .rsz-n { top: 0; height: 6px; margin-bottom: -6px; cursor: ns-resize; }
.modal-box.resizable .rsz-s { bottom: 0; height: 6px; margin-top: -6px; cursor: ns-resize; }
.modal-box.resizable .rsz-x { top: 0; height: 0; pointer-events: none; }
.modal-box.resizable .rsz-x::before, .modal-box.resizable .rsz-x::after { content: ''; position: absolute; top: 0; width: 8px; height: var(--h, 400px); pointer-events: auto; cursor: ew-resize; }
.modal-box.resizable .rsz-x::before { left: 0; } .modal-box.resizable .rsz-x::after { right: 0; }
html.narrow .modal-overlay.drawer .modal-box { width: 100% !important; max-width: 100% !important; min-width: 0 !important; border-left: 0; }
html.narrow .modal-overlay.drawer .modal-box .drsz { display: none; }
html.narrow .modal-overlay.drawer .modal-head { cursor: default; }
html.narrow .modal-overlay:not(.drawer) { padding: 8px; }
html.narrow .modal-overlay:not(.drawer) .modal-box { position: relative !important; left: auto !important; top: auto !important; margin: 0 !important; width: calc(100vw - 16px) !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; max-height: calc(100vh - 16px) !important; }
html.narrow .modal-box.resizable .rsz, html.narrow .modal-box.resizable .rsz-h { display: none; }
html.narrow .float-win { left: 0 !important; top: 0 !important; width: 100vw !important; min-width: 0 !important; max-width: 100vw !important; height: 100vh !important; min-height: 0; max-height: 100vh; resize: none; border-radius: 0; border: 0; }
html.narrow .float-win .fw-head { cursor: default; gap: 8px; }
html.narrow .float-win .fw-head h3 { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html.narrow .float-win .fw-head .x { flex: 0 0 auto; min-width: 32px; height: 32px; }
html.narrow .float-win .fw-body { min-height: 0; }
.login-pop { display: flex; flex-direction: column; gap: 12px; }
/* 구획(.fsec) · 구획 접기 */
.fsec { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 800; color: var(--brand-dark); margin: 16px 0 8px; padding-top: 14px; border-top: 1px solid var(--line-2); }
.fsec.first, .modal-body > div > .fsec:first-child, .modal-body > .fsec:first-child { margin-top: 0; padding-top: 0; border-top: none; }
.fsec .fsec-hint { font-weight: 400; font-size: 12px; color: var(--muted); }
.fsec .chip { font-weight: 800; }
.fsec .sec-x, .panel-head .sec-x { margin-left: auto; width: 24px; min-width: 24px; height: 22px; padding: 0; color: var(--muted); }
.fsec.sec-closed > :not(.sec-x) { display: none !important; } .fsec.sec-closed { margin-bottom: 6px; }
.panel-head.sec-closed > :not(h2):not(.sec-x) { display: none !important; }
.sec-hide { display: none !important; }
/* 드로어 머리 정보(.kvs) · 라벨-값 표(.kv-table) · 행 펼침(.x-row) — 3000 v5 */
.kvs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 4px; }
html.narrow .kvs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kvs > div { border: 1px solid var(--line); border-radius: 8px; background: var(--bg-soft); padding: 5px 10px; min-width: 0; }
.kvs > div small { display: block; font-size: 11.5px; color: var(--muted); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kvs > div b { display: block; font-size: 14px; font-weight: 800; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kvs > div.need { border-color: var(--danger-line); background: var(--danger-bg); } .kvs > div.need b { color: var(--danger-ink); }
.kvs > div.okk { border-color: var(--ok-line); background: var(--ok-bg); } .kvs > div.okk b { color: var(--ok-ink); }
.kvs.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .kvs.c5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } .kvs.c6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.kv-table { table-layout: fixed; width: 100%; border-collapse: collapse; }
.kv-table td { height: 26px; padding: 2px 10px; border-bottom: 1px solid var(--line-soft); font-size: 12.5px; }
.kv-table td.k { width: 110px; background: var(--bg-soft); color: var(--muted); font-weight: 700; font-size: 12px; text-align: center; white-space: normal; } /* 09-24: 긴 라벨(VI)은 줄바꿈 — 칸 밖으로 넘치지 않게 */
th.x-th, td.x-td { width: 42px; padding: 0 6px; text-align: center; }
td.x-td .btn.sm.x-btn { height: 22px; width: 26px; min-width: 26px; padding: 0; font-size: 12px; }
tr.x-open td { background: var(--brand-bg); }
tr.x-detail > td { background: var(--bg-soft); padding: 8px 10px 10px 44px; border-bottom: 1px solid var(--line); }
tr.x-detail .x-kv { width: 100%; } .x-kv td.k { width: 96px; }

/* =====================================================================
   표 · 칩 · 버튼 = 3000 v5 기준(09-24 P4-1 · 3000 통합기준 §4 · 충돌표 #1·#2·#16 "v5가 이긴다")
   ▸ 표 머리 = 캔버스색 바탕 + 뮤트 글자 12/800 · 높이 30 (구 3100 = 파랑 바탕 흰 글자 — 3000은 09-10에 폐지)
   ▸ 행 = 26(구 3100 30 — 08-10 "Summary 높이로 통일"은 3100 안의 통일이었다. 09-23 개편안 = 3000 행 26으로 세 앱 통일)
   ▸ 행 안 칩 18 · 행 안 버튼 22 — td 세로 패딩 0이라 22 + 경계선 1 < 26
   ▸ NG% 3밴드(연어·노랑·파랑)·마킹 색은 그대로(3100 표준 · 사용자가 익힌 색)
   ===================================================================== */
th, thead th, .matrix thead th, .matrix thead .sticky, .matrix thead .c-gubun, table.entry-grid th {
  background: var(--bg); color: var(--muted); font-weight: 800; font-size: 12px; height: 30px; padding: 0 8px;
  border-bottom: 1px solid var(--line-2); border-right: 1px solid var(--line-soft); }
th:last-child { border-right: none; }
.matrix thead th.today { background: var(--warn-bg); color: var(--warn-ink); }
.matrix thead th.sun, .matrix thead th.hol { background: var(--danger-bg); color: var(--danger-ink); }
th .mcopy { border-color: var(--line-2); color: var(--muted); }
th .mcopy:hover { background: var(--brand-bg-3); color: var(--brand-dark); }
td { padding: 0 8px; }
.table-wrap tbody td { height: 26px; }
tbody tr:hover { background: var(--brand-bg); }
.table-wrap tbody td .btn.sm, td .btn.sm { height: 22px; line-height: 20px; padding: 0 8px; font-size: 11.5px; }
.table-wrap tbody td .chip { height: 18px; font-size: 11.5px; font-weight: 800; border-radius: 6px; }
/* 칩 단일 규격(표 밖) — 22 · R6 · 11.5/800 */
.chip { border-radius: 6px; font-size: 11.5px; font-weight: 800; }
.chip.wait { background: var(--danger-bg); color: var(--danger-ink); }
.chip.ok { color: var(--ok-ink); }
.chip.neg { background: var(--danger); color: #fff; }
/* 버튼 단일 규격 — 32 · sm 26 · 제목줄 안 22 */
.btn { height: 32px; padding: 0 12px; border-radius: 8px; font-size: 12.5px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; gap: 6px; box-sizing: border-box; }
.btn.sm { height: 26px; padding: 0 9px; font-size: 12px; }
.btn.amber { background: var(--warn-bg); border-color: transparent; color: var(--warn-ink); font-weight: 700; }
.btn.amber:hover { background: var(--warn-bg-2); }
.panel-head .btn, .panel-head .btn.sm, .modal-box .panel-head .btn { height: 22px; font-size: 11.5px; padding: 0 8px; }
.curseg .btn { height: 20px; }
.side .foot .curseg .btn { height: 22px; }

/* ===== 1단 탭(.subtabs.sec) = 3000 §4-R(09-11) — 밑줄형 + 선택 틀. 머리 격자 2층(y117 · 높이 36) =====
   선택 = 상·좌·우 1px 선(--line-2) + 글자 폭 파란 바 2px + 바닥 열림 · 비선택 = 투명 테두리(선택이 바뀌어도 글자가 안 움직인다).
   탭 줄 오른쪽 끝 = 그 화면의 큰 행동 버튼(32). 배지 18. ui.js tabBar()가 만든다. */
.subtabs, .subtabs.sec { display: flex; gap: 2px; border-bottom: 1px solid var(--line-2); margin: 2px 0 12px; align-items: flex-end; min-height: 36px; --tab-gap: var(--bg); }
.panel .subtabs, .modal-box .subtabs, .float-win .subtabs { --tab-gap: var(--panel, #fff); }
.subtab { position: relative; height: 36px; box-sizing: border-box; padding: 0 14px; border-radius: 8px 8px 0 0; font-weight: 700; font-size: 13px; white-space: nowrap;
  border: 1px solid transparent; border-bottom: 0; margin-bottom: -1px; color: var(--muted); background: transparent; display: inline-flex; align-items: center; gap: 6px; text-decoration: none; cursor: pointer; }
.subtab:hover { background: transparent; color: var(--ink); }
.subtab.on { color: var(--brand-dark); border-color: var(--line-2);
  background: linear-gradient(var(--brand), var(--brand)) 14px 100% / calc(100% - 28px) 2px no-repeat,
              linear-gradient(var(--tab-gap), var(--tab-gap)) 0 100% / 100% 1px no-repeat; }
.subtab .chip.n { height: 18px; min-width: 18px; padding: 0 5px; font-size: 11px; border-radius: 5px; display: inline-flex; align-items: center; justify-content: center; }
.subtabs .spacer { flex: 1; }
.subtabs .btn { margin-bottom: 2px; }
.subtabs .btn.sm { height: 26px; margin-bottom: 4px; }
.subtabs .btn + .btn { margin-left: 8px; }

/* Summary By Model 트리(09-24 P4 · 개편안 ⑧A) — 제품 합계 행(구조 회색 --closed = 합계 줄 전용 토큰) ▸ 차수·열 행(들여쓰기) */
table.sum-modellist tr.tree-sum td { background: var(--closed); font-weight: 800; }
table.sum-modellist tr.tree-sum td .tree-x { color: var(--muted); font-size: 11px; }
table.sum-modellist td.tree-kid { padding-left: 26px; color: var(--ink-2); }

/* Delivery Stock = 좌 재고 · 우 납품 등록 2분할 고정(09-24 P4 · 개편안 ⑦B 사장님 확정). 오른쪽 칸은 화면을 스크롤해도 제자리(sticky) */
.dv-split { display: grid; grid-template-columns: minmax(0, 1fr) 560px; gap: 12px; align-items: start; }
.dv-split > .panel { margin-bottom: 0; min-width: 0; }
.dv-split > .dv-right { position: sticky; top: 68px; max-height: calc(100vh - 80px); overflow: auto; }
.dv-right .dv-actions { position: sticky; bottom: -14px; background: #fff; border-top: 1px solid var(--line); padding: 10px 0 4px; }
.dv-right .dv-today { margin-top: 6px; }
table.dv-stock tr.sel td { background: var(--brand-bg-2); }
@media (max-width: 1280px) { .dv-split { grid-template-columns: minmax(0, 1fr) 480px; } }
.dv-right table.dv-pick td .row { flex-wrap: nowrap; }
.dv-right table.dv-pick td input.num-in { width: 76px !important; }
.dv-right table.dv-pick td, .dv-right table.dv-pick th { padding: 0 6px; }
.dv-right table.dv-pick td input.num-in { height: 22px; padding: 0 6px; box-sizing: border-box; }
.dv-right table.dv-pick td .btn.sm { height: 22px; }

/* 홈 머리 = 오늘(09-24 P4 · 개편안 ②A — 3000 홈 골격): 본사 연계 버튼 + 회색 줄(09-25) · 지표 6(68px) · 오늘 할 일 카드 · 미결 표. .hq-band = Incoming 띠 */
.data-basis { font-size: 11.5px; color: var(--dim); margin: -6px 0 10px; text-align: right; }
.hq-band { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px 14px; margin-bottom: 12px; border-radius: 10px; border: 1px solid var(--brand-line); background: var(--brand-bg); color: var(--brand-ink); font-size: 12.5px; font-weight: 700; flex-wrap: wrap; }
.hq-band.warn { border-color: var(--warn-line); background: var(--warn-bg); color: var(--warn-ink); }
.hq-band .sep { color: var(--dim); }
/* 본사 특기사항 5축 칩·성적서 칩·본사 보고 칩(P3-2 · 09-25) — 칩은 표 칸 안에서 한 줄, 내용은 title */
.hqn-row { display: inline-flex; gap: 3px; margin-right: 6px; vertical-align: middle; }
.chip.hqn { height: 20px; min-width: 0; padding: 0 6px; font-size: 11px; font-weight: 700; }
.hqn-lines { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.hqn-line { display: flex; align-items: baseline; gap: 8px; font-size: 12.5px; }
.hqn-line .chip.hqn { flex: none; min-width: 64px; justify-content: center; }
.chip.hq-wait { background: transparent; border: 1px dashed var(--line-2); color: var(--muted); }
a.chip.cert-link { text-decoration: none; cursor: pointer; }
a.chip.cert-link:hover { outline: 1px solid var(--ok); }
.iqc-hq { margin-top: 10px; }
.iqc-hq table { width: 100%; }
.iqc-hq td.hq-notes { white-space: normal; }
.kpis6 { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
.kpis6 .kpi.hk { height: 68px; box-sizing: border-box; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; display: grid; grid-template-columns: max-content minmax(0, 1fr); grid-template-areas: 'k s' 'v v'; align-content: center; column-gap: 8px; row-gap: 2px; box-shadow: none; }
.kpis6 .kpi.hk.clickable { cursor: pointer; } .kpis6 .kpi.hk.clickable:hover { border-color: var(--brand-line-2); }
.kpis6 .kpi.hk .k { grid-area: k; font-size: 12px; font-weight: 700; color: var(--muted); }
.kpis6 .kpi.hk .sub { grid-area: s; font-size: 11.5px; color: var(--dim); text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.kpis6 .kpi.hk .v { grid-area: v; font-size: 24px; font-weight: 800; line-height: 1.1; color: var(--ink); }
.kpis6 .kpi.hk .v.neg { color: var(--danger); }
.kpis6 .kpi.hk .v small { font-size: 12px; font-weight: 700; color: var(--muted); }
@media (max-width: 1320px) { .kpis6 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cols2.home-top { grid-template-columns: 1fr 1.35fr; align-items: start; }
.cols2.home-top > .panel { margin-bottom: 0; min-width: 0; }
.tcards { display: grid; grid-template-columns: 1fr; gap: 8px; }
.tcard { display: flex; align-items: center; gap: 12px; border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; min-height: 48px; background: #fff; cursor: pointer; }
.tcard:hover { border-color: var(--brand-line-2); background: var(--hover); }
.tcard b { display: block; font-size: 13px; } .tcard span { color: var(--muted); font-size: 11.5px; }
.tcard > .chip { margin-left: auto; }
.tcard.idle b { color: var(--ink-2); }
.tcard .chip.n { height: 22px; min-width: 22px; padding: 0 6px; display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; }
.chip.n.warn { background: var(--warn-bg); color: var(--warn-ink); }
.home-sec { display: flex; align-items: baseline; gap: 10px; margin: 18px 0 10px; padding-top: 12px; border-top: 1px solid var(--line-2); }
.home-sec h2 { margin: 0; font-size: 15px; font-weight: 800; }
.home-sec .meta { font-size: 12px; color: var(--muted); }

/* 본사 PL → In transit → Receive(09-24 P3-1): Receive 드로어 표 = colgroup 고정 폭 + 넘침 말줄임(§7) · 받은 LOT 회색 · PL과 다른 수량 앰버 */
.rcv-table { table-layout: fixed; width: 100%; }
.rcv-table th, .rcv-table td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rcv-table td input.num-in { width: 100%; height: 22px; padding: 0 6px; box-sizing: border-box; text-align: right; }
.rcv-table td input.num-in.diff { background: var(--warn-bg); border-color: var(--warn); }
.rcv-table td input[type=checkbox] { margin: 0; vertical-align: middle; }
.rcv-table tr.done td { background: var(--closed); color: var(--dim); }
.rcv-table tr.done:hover td { background: var(--closed); }
.rcv-table tr.plchg td { background: var(--warn-bg); }
.rcv-table tr.plchg td.num { font-weight: 800; }

.gate-off { display: none !important; }
html.cap-no-input .rcpop:not(.colhide) { display: none !important; }
html.cap-no-tray_item .tr-map td.pick, html.cap-no-tray_price .tr-price td.cell { pointer-events: none; cursor: default; }
input.gate-ro, select.gate-ro { background: transparent; cursor: default; }

/* ===== ★09-26 3000 v5 부품 정렬(사장님 "3000과 다 맞춰 — 새 창 전에") =====
   3000 v5.css·style.css의 기본 부품 규칙을 그대로 옮긴다(두 앱 화면 실측 대조로 찾은 차이만). 이 블록이 앞 규칙을 이긴다.
   3100 전용 부품(.notebox·.seg-toggle·.chip.st-ok 등)은 대상이 아니다. 인쇄·래스터 문서(printCss)는 style.css를 그대로 쓴다. */
body { font-size: 13px; }
button { font-family: inherit; }
.page-head h1 { font-size: 18px; font-weight: 800; }
.datechip { padding: 3px 12px; }
.main > .top .datechip { padding: 3px 12px; box-sizing: border-box; }
.panel, .kpi { border-radius: 12px; box-shadow: none; border: 1px solid var(--line); }
.panel-head { border-bottom: 0; padding-bottom: 0; margin-bottom: 8px; min-height: 22px; }
.panel-head h2 { padding-left: 0; font-size: 14px; font-weight: 800; }
.panel-head h2::before { display: none; }
.panel-head .meta { font-size: 12px; color: var(--muted); }
.btn { display: inline-flex; align-items: center; justify-content: center; line-height: 1.45; box-sizing: border-box; vertical-align: middle; }
.btn.ghost { color: var(--ink-2); }
.btn.tint { background: var(--brand-bg); border-color: var(--brand-line); color: var(--brand-dark); }
.btn.danger { background: #fff; border-color: #f3c9c5; color: var(--danger-ink); }
.btn.danger:hover { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn.danger.solid { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn.danger.solid:hover { background: var(--danger-ink); border-color: var(--danger-ink); color: #fff; }
.btn.danger.tint { background: var(--danger-bg); border-color: #f3c9c5; color: var(--danger-ink); }
.btn.danger.tint:hover { background: var(--danger-bg-2); }
.chip { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; vertical-align: middle;
  height: 22px; padding: 0 8px; border-radius: 6px; font-size: 11.5px; font-weight: 800; line-height: 1; gap: 5px; background: var(--brand-bg); color: var(--brand-ink); }
.chip + .chip { margin-left: 4px; }
table .chip { min-width: 0; padding-left: 8px; padding-right: 8px; }
.chip.gray { background: var(--gray-bg); color: var(--ink-2); }
.chip.ok { background: var(--ok-bg); color: var(--ok-ink); }
.chip.warn { background: var(--warn-bg); color: var(--warn-ink); }
.chip.wait { background: var(--danger-bg); color: var(--danger-ink); }
.chip.neg, .chip.solid { background: var(--danger); color: #fff; font-weight: 700; }
.chip.brand { background: var(--brand); color: #fff; }
.chip.n { min-width: 22px; padding: 0 6px; justify-content: center; }
.chip.hidden { display: none; }
.table-wrap { border-bottom: 0; }
.table-wrap td .chip { height: 18px; padding: 0 8px; min-width: 0; font-size: 12px; line-height: 18px; }
.table-wrap tbody td .chip { font-size: 12px; min-width: 0; line-height: 18px; }
.table-wrap td .btn.sm, .table-wrap td .btn.ghost.sm, .table-wrap tbody td .btn.sm, .table-wrap tbody td .btn.ghost.sm { height: 20px; padding: 0 10px; font-size: 11.5px; line-height: 1; }
.mst td { height: 26px; padding-top: 0; padding-bottom: 0; }
.mst .chip, .mst tbody td .chip { font-size: 12px; height: 18px; line-height: 18px; padding: 0 8px; border-radius: 8px; }
.mst select, .mst input { height: 24px; padding: 1px 6px; font-size: 12.5px; box-sizing: border-box; }
.mst .btn.sm { height: 22px; padding: 0 8px; line-height: 20px; }
.kv-table td { border-bottom-color: var(--line); }
.filterbar { box-shadow: none; border-radius: 10px; padding: 8px 12px; margin: 0 0 8px; }
.filterbar .fb-lbl, .filterbar .fb-count { font-size: 11.5px; }
.filterbar select, .filterbar input, .filterbar .ssel-in { height: 26px; border-radius: 8px; font-size: 12px; font-weight: 700; color: var(--ink-2); padding: 0 8px; }
.filterbar .ssel-in { padding-right: 24px; }
.filterbar .rngbox, .filterbar .rng input.rngin { height: 26px; }
.filterbar label.row { height: 26px; box-sizing: border-box; font-size: 12px; font-weight: 700; color: var(--ink-2); }
.filterbar .btn { height: 26px; padding: 0 9px; font-size: 12px; }
.subtab { line-height: 1.45; }
.modal-head { background: #fff; }
.modal-head .x { padding: 1px 6px; }
input, select, textarea { border-radius: 8px; }
.empty { padding: 40px 0; background: none; border: 0; border-radius: 0; margin: 0; font-size: inherit; font-weight: 400; }
/* 문서(주간보고 .rpt-sheet) 안 빈 칸 = 종전 상자 그대로 — 인쇄 문서 모양·쪽수를 바꾸지 않는다(09-26 실측: 이 줄이 없으면 문서가 41px 길어진다) */
.rpt-sheet .empty { padding: 18px 12px; background: var(--bg-soft); border: 1px dashed var(--line); border-radius: 8px; margin: 4px 0;
  font-size: 12.5px; font-weight: 700; }
/* 문서 표 안 칩(IQC 보고서 머리 PASS/NG) = 종전 모양 — 칩 22가 머리 줄을 30 → 33으로 키우고 칸 폭을 흔들었다(09-26 실측) */
.rpt-sheet table td .chip { display: inline-block; height: auto; min-width: 66px; padding: 0 4px 1px; line-height: 1.3; vertical-align: baseline; }

/* ★09-26 드로어 입력칸 = 3000 .reg-v6 규격(3000 v5.css 09-12 4차 "BOX 행 높이 통일" 그대로) — 입력·셀렉트·날짜·검색칸 26 · 12/700 · --ink-2 · R8.
   반품·IQC·APP/Func·Rework·LOT·Receive 드로어(15차). 표 안 수량 칸: IQC·APP 격자 = 26, Receive 표 = 22(3000 §4-S 행 26 표 안 컨트롤). */
.reg-v6 .row.gap { gap: 8px; }
.reg-v6 .field { gap: 4px; }
.reg-v6 .field :is(input:not([type=checkbox]):not([type=radio]), select), .reg-v6 .row.gap > select { height: 26px; box-sizing: border-box; padding: 0 8px; font-size: 12px; font-weight: 700; color: var(--ink-2); border-radius: 8px; }
.reg-v6 .field .ssel-in { padding-right: 24px; }
.reg-v6 .field textarea { font-size: 12px; font-weight: 700; color: var(--ink-2); padding: 6px 8px; min-height: 52px; box-sizing: border-box; }
.reg-v6 .form-grid { gap: 10px 12px; }
.reg-v6 .form-grid .span2 { grid-column: 1 / -1; }
.reg-v6 .check-line { display: inline-flex; align-items: center; gap: 6px; height: 26px; font-size: 12px; font-weight: 700; color: var(--ink-2); }
.reg-v6 .field .ssel > input.ssel-in { padding-right: 24px; }
.reg-v6 .row.gap > input:not([type=checkbox]):not([type=radio]) { height: 26px; box-sizing: border-box; padding: 0 8px; font-size: 12px; font-weight: 700; color: var(--ink-2); border-radius: 8px; }
.reg-v6 .seg-toggle .seg { height: 24px; padding: 0 12px; font-size: 12px; }
.reg-v6 table.entry-grid :is(input:not([type=checkbox]):not([type=radio]), select) { height: 26px; padding: 0 6px; font-size: 12px; font-weight: 700; color: var(--ink-2); }
.reg-v6 table.entry-grid.iqc-entry .ssel { height: 26px; }
.reg-v6 table.entry-grid.iqc-entry .ssel .ssel-in { padding-right: 18px; }
.reg-v6 .rcv-table td input.num-in { font-size: 12px; font-weight: 700; color: var(--ink-2); }
.reg-v6 table.dv-pick td .row.gap > input.num-in { height: 22px; padding: 0 6px; }

/* 09-26 16차 대시보드 품질 지표 7칸(Return% 추가) — 1320 이하 = 4칸 · 9자 넘는 수(전체 기간 검사수량 등)가 있으면 줄 전체 숫자 20(1321폭 7칸에서 잘리지 않게) */
.kpi-row.k7 { grid-template-columns: repeat(7, minmax(0, 1fr)); }
@media screen and (max-width: 1320px) { .kpi-row.k7 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.kpi-row.k7.small .kpi .v { font-size: 20px; }

/* ★10-02 마스터 탭 8개(Inspectors · Accounts 분리) — 1140폭 VI에서 탭 줄 오른쪽 [Data check]가 9px 밖으로 밀렸다(실측).
   좁은 화면만 탭 좌우 여백 14 → 10(선택 바 위치·폭도 같이). */
@media screen and (max-width: 1200px) {
  .subtab { padding: 0 10px; }
  .subtab.on { background-position: 10px 100%, 0 100%; background-size: calc(100% - 20px) 2px, 100% 1px; }
}
/* 10-05 수량 칸 = 쉼표 text 칸(ui.js commaNum 자동 배선) — 옛 input[type=number] 규칙의 짝 */
.qe-box input.num-in { width: 90px; }
.tr-edit input.num-in { text-align: right; }
.entry-adds { margin-top: 8px; }
/* ★10-05 엑셀식 범위 합계(js/cellsum.js) — 잡은 칸 = 옅은 파랑 + 범위 바깥선 2px, 오른쪽 아래 띠 = Average · Count · Sum(엑셀 상태 표시줄 순서) */
td.xsel { background-color: rgba(47, 107, 214, .12) !important; }
td.xsel-t { box-shadow: inset 0 2px 0 var(--brand); }
td.xsel-b { box-shadow: inset 0 -2px 0 var(--brand); }
td.xsel-t.xsel-b { box-shadow: inset 0 2px 0 var(--brand), inset 0 -2px 0 var(--brand); }
td.xsel-l { border-left: 2px solid var(--brand) !important; }
td.xsel-r { border-right: 2px solid var(--brand) !important; }
body.xsel-drag, body.xsel-drag * { user-select: none !important; cursor: cell; }
.xsum { position: fixed; right: 18px; bottom: 14px; z-index: 290; display: flex; gap: 18px; align-items: center; height: 34px; padding: 0 16px;
  background: #fff; border: 1px solid var(--line-2); border-radius: 10px; box-shadow: 0 8px 24px rgba(20,30,50,.18); font-size: 13px; color: var(--ink); font-variant-numeric: tabular-nums; }
.xsum small { color: var(--muted); font-size: 11.5px; font-weight: 700; margin-right: 4px; }
.xsum b { font-weight: 800; }
.xsum .sum b { color: var(--brand-dark); font-size: 14px; }
.pl-gate { position: fixed; inset: 0; z-index: 950; background: rgba(20, 30, 50, .45); display: flex; align-items: center; justify-content: center; padding: 16px; }
.pl-gate .pl-box { width: min(440px, 100%); background: #fff; border-radius: 12px; box-shadow: 0 18px 50px rgba(0, 0, 0, .3); overflow: hidden; }
.pl-gate .pl-head { background: var(--warn-bg); color: var(--warn-ink); font-size: 16px; font-weight: 800; padding: 14px 20px; border-bottom: 1px solid var(--line); }
.pl-gate .pl-body { padding: 14px 20px 10px; display: flex; flex-direction: column; gap: 8px; }
.pl-gate .pl-row { display: flex; justify-content: space-between; gap: 12px; font-size: 13.5px; }
.pl-gate .pl-row .k { color: var(--muted); font-weight: 700; }
.pl-gate .pl-row b { color: var(--ink); font-variant-numeric: tabular-nums; text-align: right; }
.pl-gate .pl-note { margin-top: 4px; font-size: 12px; color: var(--muted); }
.pl-gate .pl-acts { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 20px; border-top: 1px solid var(--line); background: var(--bg); }

th.xf-th { padding-right: 24px; }
.xf-btn { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; padding: 0; border: 1px solid var(--line-2); border-radius: 4px;
  background: #fff; color: var(--brand-dark); font-size: 11px; font-weight: 800; line-height: 16px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.xf-btn:not(.sorted)::before { content: ''; border: 4px solid transparent; border-top-color: var(--muted); margin-top: 4px; }
.xf-btn:hover { border-color: var(--brand); }
.xf-btn.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.xf-btn.on:not(.sorted)::before { border-top-color: #fff; }
.rcpop.xf { flex-direction: column; gap: 6px; width: 270px; padding: 10px; }
.rcpop.xf .swx { min-height: 28px; border-radius: 8px; padding: 0 10px; text-align: left; justify-content: flex-start; }
.rcpop.xf input[type=search] { height: 28px; width: 100%; box-sizing: border-box; font-size: 12.5px; }
.xf-list { max-height: 260px; overflow-y: auto; border: 1px solid var(--line); border-radius: 8px; padding: 4px; }
.xf-opt { display: flex; align-items: center; gap: 6px; padding: 3px 6px; border-radius: 6px; font-size: 12.5px; cursor: pointer; white-space: nowrap; }
.xf-opt:hover { background: var(--hover); }
.xf-opt input { margin: 0; flex: 0 0 auto; }
.xf-opt .xf-v { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.xf-opt .xf-n { color: var(--muted); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.xf-opt.xf-all { border-bottom: 1px solid var(--line); border-radius: 6px 6px 0 0; margin-bottom: 2px; font-weight: 700; }
.xf-more { padding: 4px 6px; font-size: 12px; color: var(--muted); }
.xf-acts { display: flex; align-items: center; gap: 6px; }