/* =====================================================================
   v5.css — 09-10 디자인 3단계(3000) 덮어쓰기 층. style.css 뒤에 로드.
   기준 = docs/design-v5_2026-09-10.html(사장님 확정 시안) + 기준 탭.
   · 셸: 왼쪽 메뉴 220 + 상단 바 56 + 캔버스 #f4f6fa
   · 글자 6단계(18/14/12.5/12/11.5/24), 최소 11.5
   · 칩·배지 단일 규격 22 · R6 · 좌우 8 · 11.5/800 · solid = 빨강 배경 흰 글자
   · 표: 밝은 머리(캔버스 배경·뮤트 글자) · 행 26 · 카드 밖 넘침 금지(.table-wrap 내부 스크롤)
   · 버튼 32 / sm 26 · KPI 2줄 68 · 패널 3px 바 폐지 · 아이콘 상자 흰색
   · 부정 어휘(.ngw) = 빨강 글자
   style.css의 업무 규칙(폭·정렬·조건부 서식)은 그대로 두고 시각 규격만 바꾼다.
   ===================================================================== */
:root {
  --bg: #f4f6fa;          /* 캔버스 */
  --brand: #2b6de5;       /* v5 브랜드 파랑(더 선명) */
  --brand-dark: #1f57bf;
  --brand-bg: #eaf1fd; --brand-bg-2: #e3ecfb; --brand-bg-3: #dbe7fb; --brand-line: #c6d8fa; --brand-line-2: #9fbdf3; --brand-ink: #1f4fb0;
  --line: #e5e9f0; --line-2: #d2d8e3; --line-soft: #eef1f6;
  --ink: #18202e; --ink-2: #3c4757; --muted: #6a7488; --dim: #8f99a8;
  --danger: #dc3b30; --danger-ink: #b2271e; --danger-bg: #fdecea; --danger-bg-2: #fbe2df;
  --warn: #d9900a; --warn-ink: #8a5a00; --warn-bg: #fdf2da; --warn-bg-2: #fbe9c4;
  --ok: #1a9d5a; --ok-ink: #137a45; --ok-bg: #e4f6ec;
  --shadow: 0 1px 2px rgba(20,30,50,.05), 0 6px 20px rgba(20,30,50,.06);
  --radius: 12px;
  --h-row: 26px; --h-ctl: 32px; --h-chip: 22px; --h-btn-sm: 26px;
}
html { scrollbar-gutter: auto; }
body { background: var(--bg); font-size: 13px; }

/* ===== 셸 ===== */
#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; }
.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; }
.side .logo small { display: block; color: var(--muted); font-size: 11.5px; }
.side .logo .mk { display: none; }
.side .logo .wm { display: block; line-height: 0; }
.side .logo .wm svg { display: block; }
html[data-screen="floor"] .side:not(:hover) .logo .mk { display: grid; }
.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; }
.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; }
.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); }
.side .navlink .chip { margin-left: auto; }
.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; }
.side .foot .rolesel { flex: 1; height: 28px; font-size: 12.5px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--ink); }
.side .foot a { color: var(--ink-2); text-decoration: none; font-size: 12.5px; font-weight: 700; padding: 5px 10px; border-radius: 8px; }
.side .foot a:hover { background: var(--hover); }
.main { display: flex; flex-direction: column; min-width: 0; }
.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; }
.top .ttl { font-size: 18px; font-weight: 800; white-space: nowrap; }
.top .crumb { color: var(--muted); font-size: 12.5px; white-space: nowrap; }
.top .sp { flex: 1; }
.top .ds { color: var(--dim); font-size: 11.5px; white-space: nowrap; }
.top .datechip { height: 30px; display: inline-flex; align-items: center; }
/* margin:0 auto(style.css)는 column flex 안에서 stretch를 끄고 내용 폭(max-content)으로 늘어나 본문이 오른쪽으로 삐져나갔다(09-10 실측 1299 > 1205) */
.main > .content { padding: 12px 22px 28px; margin: 0; width: 100%; align-self: stretch; min-width: 0; }
.kpi-row { top: 56px; background: var(--bg); }

/* ===== 글자 하한 11.5 ===== */
.kpi .sub, .badge, .run-chip .mini-tag, .dept-lbl, .sub, .chart-legend, .filterbar .fb-lbl, .filterbar .fb-count { font-size: 11.5px; }

/* ===== 페이지 머리 ===== */
.page-head h1 { font-size: 18px; font-weight: 800; }
.h1-en { font-size: 12.5px; font-weight: 700; color: var(--muted); }
.page-head .sub { font-size: 12px; }
.datechip { border-radius: 999px; }

/* ===== 패널·카드 ===== */
.panel, .dcard, .kpi { border-radius: 12px; box-shadow: none; border: 1px solid var(--line); }
.panel-head { border-bottom: 0; padding-bottom: 0; margin-bottom: 8px; }
.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); }
.dcard-head .t { font-size: 14px; }
.drow .k { font-size: 12.5px; color: var(--muted); }
.drow .v { font-size: 12.5px; }

/* ===== KPI 2줄(68px): 1줄 = 라벨 + 보조(우측 흐림) / 2줄 = 값 24 ===== */
.kpi { padding: 10px 14px; height: 68px; 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; }
.kpi .k { grid-area: k; font-size: 12px; font-weight: 700; color: var(--muted); overflow: visible; }
.kpi .sub { grid-area: s; font-size: 11.5px; color: var(--dim); font-weight: 400; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.kpi .v { grid-area: v; font-size: 24px; font-weight: 800; letter-spacing: -.3px; line-height: 1.1; }
.kpi .v small { font-size: 12px; font-weight: 700; }

/* ===== 버튼 ===== */
.btn { height: 32px; padding: 0 12px; border-radius: 8px; font-size: 12.5px; font-weight: 700; }
.btn.sm { height: 26px; padding: 0 9px; font-size: 12px; }
.btn.sm.icon { width: 26px; min-width: 26px; }
td .btn.sm { height: 22px; line-height: 20px; font-size: 11.5px; padding: 0 8px; }
.subtabs .btn { height: 32px; }
.panel-head .btn, .panel-head .btn.sm { height: 22px; font-size: 11.5px; padding: 0 8px; }
.btn.ghost { color: var(--ink-2); }
.btn.tint { background: var(--brand-bg); border-color: var(--brand-line); color: var(--brand-dark); }
.btn.danger { border-color: #f3c9c5; color: var(--danger-ink); }
.btn.danger.tint { background: var(--danger-bg); border-color: #f3c9c5; color: var(--danger-ink); }
.btn.danger.tint:hover { background: var(--danger-bg-2); }

/* ===== 칩·배지 단일 규격 ===== */
.chip { 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; }           /* 지금 조치 = 빨강 채움 */
.chip.brand { background: var(--brand); color: #fff; }
.chip.n { min-width: 22px; padding: 0 6px; justify-content: center; }
.chip.hidden { display: none; }
/* 산출물 칩(09-20) — 만들었나/안 만들었나를 채움으로 읽는다. 미생성 = 투명(점선) · 생성됨 = 브랜드 채움 · 내용 바뀜 = 앰버 */
.chip.out { justify-content: center; font-weight: 700; }
.chip.out b { font-weight: 800; opacity: .82; }
.chip.out.none { background: transparent; border: 1px dashed var(--line); color: var(--muted); }
.chip.out.none.off { border-style: solid; opacity: .5; }        /* 전제 미충족(저장 전 등) — 누를 수는 있으나 안내만 */
.chip.out.done { background: var(--brand); color: #fff; }
.chip.out.redo { background: var(--warn-bg); color: var(--warn-ink); border: 1px solid var(--warn-ink); } /* 만든 뒤 내용이 바뀜 */
.panel-head .chip.cnt { height: 22px; font-size: 11.5px; padding: 0 8px; }
.chip.btn-h { height: 22px; min-width: 0; font-size: 11.5px; }
.badge { height: 22px; min-width: 22px; padding: 0 6px; border-radius: 6px; font-size: 11.5px; font-weight: 800; background: var(--danger); color: #fff; }
.dept-lbl { height: 22px; display: inline-flex; align-items: center; border-radius: 6px; padding: 0 8px; font-size: 11.5px; font-weight: 800; }
.dcard-head .go { height: 22px; border-radius: 6px; font-size: 11.5px; font-weight: 700; }

/* ===== 부정 어휘 = 빨강 글자 ===== */
.ngw, td.ngw, .neg { color: var(--danger-ink); font-weight: 700; }
td.warn-in, span.warn-in, .dim-table td span.warn-in,
.insp-closed .dim-table .meas.warn-in { background: var(--warn-bg); color: var(--amber-ink, #b45f06); font-weight: 700; border-radius: 3px; }

/* ===== 표: 밝은 머리 · 행 26 · 내부 스크롤 ===== */
table { font-size: 12.5px; }
th, thead th, .matrix thead th, .matrix thead .sticky, .matrix thead .c-gubun, .prod-table thead th.col-name {
  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; }
thead th.today, .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); } /* 일/공휴일 머리 = 빨강 틴트(밝은 머리와 짝) */
td { padding: 0 8px; height: var(--h-row); border-bottom: 1px solid var(--line); border-right: 1px solid var(--line-soft); }
tbody tr:hover { background: var(--brand-bg); }
.table-wrap { border-bottom: 0; }
.table-wrap, .panel > table, .modal-body > table { max-width: 100%; }
.panel > table, .modal-body > table, .hub-pop table { display: table; }
/* 표는 카드 밖으로 못 나간다 — 래퍼 없이 놓인 표는 패널이 가로 스크롤을 맡는다 */
.panel:has(> table), .dcard:has(> table) { overflow-x: auto; }
.panel .table-wrap { overflow-x: auto; }

/* ===== 서브탭 = 밑줄형 + 선택 틀(09-11 사장님 "선택한 게 뭔지 한눈에" — 규칙 DESIGN §4-R) =====
   선택 탭 = 상·좌·우 1px 테두리 선만(바탕 없음 — 사장님 09-11 2차 "파란 바가 있으니 테두리만으로 충분", 위 모서리 R8) + 파란 바 2px는 글자 폭만(좌우 패딩 14 안쪽).
   3차(사장님 스케치): 선 한 단계 진하게(--line-2, 틀·바닥선 같은 톤) + **바닥 마감 = 열림** — 선택 탭 아래에서는 줄의 바닥선이 끊긴다
   (`::before` 1px 띠가 바닥선을 바탕색 --tab-gap으로 가린다: 캔버스 = --bg, 흰 상자(.panel/.dcard/팝업/자유 창) 안 = --panel). 1단·2단·팝업 안 탭 공통.
   비선택 탭도 같은 크기의 투명 테두리 — 선택이 바뀌어도 글자가 1px도 움직이지 않는다(뷰 전환 흔들림 금지).
   높이 36 고정(배지 22 포함 flex 센터링) — 배지 있는 탭이 40으로 커져 틀 높이가 들쭉날쭉하던 것 해소(09-11 실측 36/40). */
.subtabs, .subtabs.sec { gap: 2px; border-bottom: 1px solid var(--line-2); margin: 2px 0 12px; align-items: flex-end; --tab-gap: var(--bg); } /* .sec 병기 = style.css .subtabs.sec(--line) 특이도 이김 — 1단도 같은 톤 */
.panel .subtabs, .dcard .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; /* 09-12: 탭 글자 2줄 꺾임 금지(높이 36 안) */
  border: 1px solid transparent; border-bottom: 0; margin-bottom: -1px; color: var(--muted); background: transparent; }
.subtab:hover { background: transparent; color: var(--ink); }
/* 선택 탭 배경 = 두 겹 그라데이션 레이어(색 채움 아님): ① 파란 바 2px(글자 폭 = 좌우 14 안쪽) ② 바닥 열기 띠 1px(--tab-gap, 줄의 바닥선을 가림) */
.subtab.on, .subtabs:not(.sec) .subtab.on, .toolbar .subtabs .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; }
/* 연결부 R(바깥쪽 필렛)은 09-11 4차에 넣었다가 사장님 지시로 폐지 — 화면 배율에서 모서리 깨짐·잔선. 세로선이 바닥선에 직각으로 닿는 지금 모양이 확정. 가상요소 사용 없음. */
.subtabs .btn { margin-bottom: 2px; } /* 09-12 머리 격자: 32+2 ≤ 36 — 버튼이 붙어도 탭 줄 높이 36 불변(구 6 → 줄 39) */
.subtabs .btn.sm { height: 26px; margin-bottom: 4px; }
.subtabs .btn + .btn { margin-left: 8px; }
.subtabs.sec { padding-bottom: 0; }
.subtabs.sec.wrap { flex-wrap: wrap; row-gap: 4px; }
.subtabs.sec.wrap .subtab { padding: 0 10px; }
.toolbar .subtabs { border-bottom: 0; }
.toolbar .subtabs .subtab { border-bottom: 0; border-radius: 8px; padding: 6px 12px; }
.toolbar .subtabs .subtab.on { background: var(--bg); color: var(--ink); }

/* ===== ★머리 격자(09-12 사장님 "전 화면이 한 기준으로 움직이는 느낌 — 헤더는 틀고정, 표 아래만 바뀐다") — DESIGN §4-U =====
   세로 격자(캔버스 y, 상단바 56 + 패딩 12 기준): 제목 68/37 → 1단 탭 117/36 → (2단 탭 165/36) → 패널 165|213 → 제목줄 +13/22 → 필터 +30/44 → 표 +52.
   간격 = 제목 12 · 탭 12 · 제목줄 8 · 필터 8. 아래 규칙은 "행 높이가 내용물(버튼·칩·입력·체크박스)에 따라 늘어나지 않게" 고정하는 것. */
.page-head { min-height: 37px; }
.page-head input[type=month], .page-head select { height: 26px; box-sizing: border-box; } /* PO 현황 기준 월 입력이 39로 제목줄을 키우던 것 */
.panel-head { min-height: 22px; } /* 버튼·칩(22) 유무로 20/22 오가며 필터·표가 2px 밀리던 것 */
.filterbar .btn { height: 26px; padding: 0 9px; font-size: 12px; } /* 필터 줄 안 버튼은 크기 불문 26(.btn 32가 섞이면 줄 50) */
.filterbar label.row { height: 26px; box-sizing: border-box; } /* 체크박스 라벨(잔량만) 32 → 26 */
.subtabs .subtab-note { height: 36px; box-sizing: border-box; display: inline-flex; align-items: center; padding: 0 4px; margin-bottom: -1px; } /* 열람 전용 안내도 탭 높이 */

/* ===== 필터 바 ===== */
.filterbar { box-shadow: none; border-radius: 10px; padding: 8px 12px; margin: 0 0 8px; } /* 09-12 머리 격자: 아래 간격 8 통일(구 10 — 인라인 8과 혼재) */
/* ★09-11 rev02(사장님 "필터 BOX 높이·폰트색 통일 — 3000/3100/3200"): 입력·셀렉트·날짜·검색칸 = 버튼(.btn.sm) 규격 26 · 12/700 · --ink-2 · R8.
   구 32px/12.5/400 입력과 26px 버튼이 한 줄에 섞여 들쭉날쭉하던 것. 3100·3200은 style.css 필터 블록에 같은 4줄 이식(탭 규칙과 함께). */
.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 { font-size: 12px; font-weight: 700; color: var(--ink-2); }
/* 09-11 rev03(사장님): 팝업 안 BOX류(빌더 출하일 셀렉트·날짜, 계획 표 납품처 셀렉트)도 같은 기준 · 세그먼트 칩(.segtab — 전체/성적서 미비, KOR/EN, 출하가능/전체 상태)도 총 26px */
.pl-builder .field .ssel-in, .pl-builder .field input { height: 26px; font-size: 12px; font-weight: 700; color: var(--ink-2); padding: 0 24px 0 8px; }
table.pl-plan .ssel-in { font-weight: 700; color: var(--ink-2); }
.pl-builder .field input[type=date] { padding: 0 8px; }
/* (.segtab 26px 규격은 아래 "세그먼트" 블록에서 — 뒤 규칙이 이겨서 여기 두면 무효) */
.filterbar .fgl { height: 22px; display: inline-flex; align-items: center; border-radius: 6px; font-size: 11.5px; }
input, select, textarea { border-radius: 8px; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--brand-line); border-color: var(--brand); }

/* ===== 팝업 · 드로어 ===== */
.modal-box { border-radius: 12px; border-color: var(--line-2); box-shadow: 0 20px 60px rgba(20,30,50,.24); }
.modal-head h3 { font-size: 15px; font-weight: 800; }
.modal-head .x { font-size: 18px; }
.modal-actions { background: var(--bg); margin: 0 -18px -18px; padding: 10px 18px; border-radius: 0 0 12px 12px; }
/* 드로어 = 오른쪽 도킹 팝업(표에서 여러 건을 연달아 보는 상세) */
.modal-overlay.drawer { justify-content: flex-end; padding: 0; align-items: stretch; }
.modal-overlay.drawer .modal-box { width: min(960px, 70vw) !important; max-width: 70vw; max-height: 100vh; height: 100vh; border-radius: 0; border: 0; border-left: 1px solid var(--line); box-shadow: -12px 0 40px rgba(20,30,50,.18); }
.modal-overlay.drawer .modal-box .table-wrap { max-height: none; }
.modal-overlay.drawer .modal-head { cursor: grab; } .modal-overlay.drawer .modal-head:active { cursor: grabbing; }

/* ===== 우클릭 업무 카드(A안 확정) — 제목 · 흐름 띠 · 현황 · 지금 할 일 · 업무 2열 · 최근 이력 · 행 표시 ===== */
.hub-pop { width: 640px; max-width: 94vw; border-radius: 12px; border-color: var(--line); box-shadow: 0 14px 44px rgba(20,30,50,.22); font-size: 12.5px; }
.hub-pop .hub-hd { padding: 10px 40px 10px 14px; gap: 6px; position: relative; }
.hub-pop .hub-hd .x { position: absolute; right: 10px; top: 8px; margin-left: 0; line-height: 1; }
.hub-pop .hub-hd .nm { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.hub-pop .hub-hd .nm { font-size: 13.5px; }
.hub-pop .chip.sm, .hub-pop .chip { height: 22px; font-size: 11.5px; padding: 0 8px; border-radius: 6px; }
.hub-pop .hub-flow { padding: 18px 14px 8px; }
.hub-pop .hub-sec { padding: 8px 14px 10px; border-top: 1px solid var(--line); }
.hub-pop .hub-flow + .hub-sec { border-top: 0; }
.hub-pop .hub-st { font-size: 11.5px; font-weight: 800; letter-spacing: .04em; color: var(--dim); margin-bottom: 6px; display: flex; align-items: center; gap: 8px; }
.hub-pop .hub-st em { font-style: normal; margin-left: auto; font-weight: 400; color: var(--muted); letter-spacing: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 70%; }
.hub-pop .hub-chips2 { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 8px; }
.hub-pop .hub-warn { margin: 0 0 8px; }
.hub-pop .kv3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px 12px; }
.hub-pop .kv3 > div { min-width: 0; }
.hub-pop .kv3 small { display: block; color: var(--muted); font-size: 11.5px; }
.hub-pop .kv3 b { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.hub-pop .kv3 b.neg { color: var(--danger-ink); } .hub-pop .kv3 b.warn { color: var(--warn-ink); } .hub-pop .kv3 b.ok { color: var(--ok-ink); }
.hub-pop .todo-row { display: flex; gap: 8px; align-items: center; min-height: 28px; border-radius: 6px; padding: 0 4px; }
.hub-pop .todo-row:hover { background: var(--hover); }
.hub-pop .todo-row .k { color: var(--muted); width: 32px; flex: none; }
.hub-pop .todo-row .t { font-weight: 700; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hub-pop .todo-row.me .k { color: var(--brand-dark); font-weight: 800; }
.hub-pop .rows2 { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.hub-pop .rows2 .btn { justify-content: flex-start; gap: 8px; height: 32px; padding: 0 10px; font-size: 12.5px; font-weight: 700; background: #fff; color: var(--ink-2); border: 1px solid var(--line); border-radius: 8px; min-width: 0; }
.hub-pop .rows2 .btn.p { background: var(--brand-bg); border-color: var(--brand-line); color: var(--brand-dark); }
.hub-pop .rows2 .btn.r { color: var(--danger-ink); }
.hub-pop .rows2 .btn .t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hub-pop .rows2 .btn kbd { margin-left: auto; flex: none; font: inherit; font-size: 11.5px; color: var(--dim); }
.hub-pop .hist > div { display: grid; grid-template-columns: 48px auto 1fr; gap: 8px; align-items: center; height: 26px; white-space: nowrap; overflow: hidden; }
.hub-pop .hist .d { color: var(--muted); } .hub-pop .hist .x { color: var(--muted); font-weight: 400; overflow: hidden; text-overflow: ellipsis; }
.hub-pop .hub-foot2 { background: var(--bg); border-radius: 0 0 12px 12px; }
.hub-pop .sw { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.hub-pop .sw i { width: 24px; height: 24px; border-radius: 6px; border: 1px solid var(--line-2); display: grid; place-items: center; font-size: 11.5px; font-weight: 800; font-style: normal; color: var(--ink-2); cursor: pointer; background: #fff; }
.hub-pop .sw i.rc1 { background: var(--mark-blue); } .hub-pop .sw i.rc2 { background: var(--mark-amber); } .hub-pop .sw i.rc3 { background: var(--mark-green); }
.hub-pop .sw i.on { outline: 2px solid var(--brand); outline-offset: 1px; }
.hub-pop .sw i.none { background: repeating-linear-gradient(45deg, #fff 0 4px, #eee 4px 8px); }
.hub-pop .sw .lb { font-size: 11.5px; color: var(--muted); }
.hub-pop .sw .memo-t { font-size: 11.5px; color: var(--ink-2); font-style: italic; max-width: 220px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ===== 홈 v5: 데이터 기준 줄 · 미완결 업무 | 부서 현황 ===== */
.data-basis { font-size: 11.5px; color: var(--dim); margin: -6px 0 10px; text-align: right; }
.cols2.home-mid { grid-template-columns: 1.35fr 1fr; align-items: stretch; }
.cols2.home-mid > .panel { margin-bottom: 0; min-width: 0; }
@media (max-width: 1280px) { .cols2.home-mid { grid-template-columns: 1fr; } }
.drow.h { padding-top: 8px; border-bottom: 1px solid var(--line); border-radius: 0; margin-top: 2px; }
.drow.h .k { font-weight: 800; color: var(--ink); font-size: 12.5px; }
.drow.h .chip { margin-left: auto; }
.panel-head .chip + .chip, .panel-head .btn.ghost.sm { margin-left: 0; }
.panel-head .meta:not(:last-child) { margin-right: 0; }
.modal-box .panel-head.meas-head, .modal-box .panel-head.dim-meas-head { gap: 6px; }
.modal-box .panel-head.meas-head .btn.ghost.sm, .modal-box .panel-head.dim-meas-head .btn.ghost.sm { margin-left: 0; }
.panel-head .ph-controls .btn.ghost.sm { margin-left: 0; }  /* 묶음 안에서는 .ph-controls의 gap 6만 (09-18) */
.modal-box .panel-head.meas-head .smp-pick > span:first-child { display: none; }
table.hu-table { table-layout: fixed; width: 100%; }
table.hu-table th, table.hu-table td { overflow: hidden; text-overflow: ellipsis; }
table.hu-table td:nth-child(1), table.hu-table th:nth-child(1) { width: 84px; text-align: center; }
table.hu-table td:nth-child(3), table.hu-table th:nth-child(3) { width: 96px; }
table.hu-table td:nth-child(4), table.hu-table th:nth-child(4) { width: 56px; }
table.hu-table td:nth-child(5), table.hu-table th:nth-child(5) { width: 84px; }
table.hu-table td:nth-child(6), table.hu-table th:nth-child(6) { width: 64px; }

/* ===== 오늘 할 일 그리드(홈) ===== */
.quick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.quick .q { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; text-decoration: none; color: var(--ink); }
.quick .q:hover { background: var(--hover); }
.quick .q .qi { width: 32px; height: 32px; border-radius: 9px; background: #fff; border: 1px solid var(--line); color: var(--ink-2); display: grid; place-items: center; flex: none; }
.quick .q .qi svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.quick .q b { display: block; font-size: 12.5px; }
.quick .q small { display: block; color: var(--muted); font-size: 11.5px; }
.quick .q .chip { margin-left: auto; }
@media (max-width: 1280px) { .quick { grid-template-columns: repeat(2, 1fr); } }

/* ===== 09-10 v6 ④ 부족 판정: 출하 가능 셀 = 7일 내 납기 부족 틴트 · 행 틴트는 출하 가능 음수만(inventory.js shortCellCls) ===== */
.matrix td.sticky.short7 { background: var(--danger-bg); color: var(--danger-ink); font-weight: 800; }
tbody tr.row-short td { background: transparent; } /* 구 규칙 잔재 무력화 */

/* ===== 09-10 v6 ① 신규 생산 등록 드로어 ===== */
.modal-overlay.drawer .modal-box.xl { width: min(1040px, 76vw) !important; max-width: 76vw; }
.modal-overlay.drawer .modal-box.xl:has(.mst-product) { width: min(1500px, 84vw) !important; max-width: 84vw; }
/* 검사 기준 표(16열) — 삭제 열까지 보이게(09-18). 제품·금형 팝업의 기존 폭 규칙보다 특이도가 높아야 이긴다 */
.modal-overlay.drawer .modal-box.xl:has(.mst-product):has(.spec-table),
.modal-overlay.drawer .modal-box.xl:has(.spec-table),
.modal-overlay.drawer .modal-box.xxl:has(.spec-table),
.modal-overlay.drawer .modal-box.lg:has(.spec-table),
.modal-overlay.drawer .modal-box.lgx:has(.spec-table) { width: min(1700px, 94vw) !important; max-width: 94vw; }
/* ★09-12 드로어 크기 클래스(사장님 "드로어 구조를 품질·금형 입력 전반에") — 팝업 크기 클래스를 드로어에서도 그대로 쓴다(폭 상한 84vw, 내용은 컨테이너 쿼리로 접힘).
   검사 입력 lgx 1220 · 검사 상세/수리 상세/수리 등록 w90 1190 · 수검 xxl 1300 · 수리의뢰 작성/카드/검사 이력 lg 1060. */
.modal-overlay.drawer .modal-box.lg { width: min(1060px, 84vw) !important; max-width: 84vw; }
.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; }
.modal-overlay.drawer .modal-box.wide { width: min(900px, 84vw) !important; max-width: 84vw; }
.modal-overlay.drawer .modal-box.wide:has(.oqc-d) { width: min(1030px, 84vw) !important; max-width: 84vw; }
.modal-overlay.drawer .modal-box.smf { width: min(840px, 84vw) !important; max-width: 84vw; }
.card-lite { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; margin-bottom: 12px; background: #fff; }
.card-lite-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; min-height: 22px; } /* 09-12 4차: 패널 제목줄 22 규칙(§4-U) — 칩 유무로 20/22 오가던 것 */
.card-lite-head b { font-size: 14px; font-weight: 800; }
.card-lite-head .sub { margin-left: auto; font-size: 12px; color: var(--muted); text-align: right; }
.btn.line { background: #fff; border-color: var(--brand); color: var(--brand); } /* 09-11 rev04: 아직 안 한 행동(LOT 담기) = 흰 바탕+파란 테두리, 한 뒤 = 파란 채움 */
.btn.line:hover { background: var(--brand-bg); }
.btn.soft { background: var(--bg); border-color: var(--line-2); color: var(--ink-2); }
.btn.hold { background: var(--warn-bg); border-color: var(--warn); color: var(--warn-ink); }
.btn.hold:hover { background: var(--warn-bg-2, var(--warn-bg)); border-color: var(--warn-ink); }
.btn.soft:hover { background: var(--gray-bg-2); }
.btn.soft:disabled { color: var(--dim); background: var(--bg); cursor: default; }
/* ★09-12 4차(사장님 "BOX 행 높이가 통일 안 됐다"): 생산 등록 드로어 컨트롤 규격 통일 — 실측 38.8(date/time 네이티브)·34(select)·32(라인)·26(버튼) 4종 혼재.
   공통 정보·검색 범위 = 필터 규격 26(§4 필터바 — pl-builder .field와 동일 문법) · 등록 라인 = §4-S 표 문법(셀 안 컨트롤 22 · 행 28, PO 입력 po-entry와 동일) · 표 안 × = 22 · 버튼 sm 26. 간격 = 패널 안 8(§4-U). */
.reg-v6 .row.gap { gap: 8px; }
.reg-v6 .field { gap: 4px; }
/* 09-21 사장님: 공통 정보 라벨 = 앱 공통 .field .lbl 그대로(전용 굵기·자간 폐지) */
.reg-v6 .field :is(input, 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; }
.pr-lines { container: prl / inline-size; }
.pr-row.v6 { grid-template-columns: 26px minmax(170px, 1fr) minmax(120px, 160px) 124px 80px 64px 30px; gap: 8px; margin-top: 0; min-height: 28px; box-sizing: border-box; padding: 3px 0; align-items: center; border-bottom: 1px solid var(--line-soft); }
.pr-row.v6.pr-head { margin-top: 0; padding: 0; height: 30px; background: var(--bg); border-bottom: 1px solid var(--line-2); }
.pr-row.v6.pr-head .lbl { font-size: 12px; font-weight: 800; color: var(--muted); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pr-row.v6 :is(input, select, .ssel-in) { height: 22px; padding: 0 6px; font-size: 12px; font-weight: 700; color: var(--ink-2); border-radius: 5px; box-sizing: border-box; }
.pr-row.v6 .ssel-in { padding-right: 22px; }
.pr-row.v6 .pr-no { color: var(--dim); font-weight: 800; font-size: 12.5px; text-align: center; }
.pr-row.v6 .mc { display: grid; grid-template-columns: 1fr 42px; gap: 4px; min-width: 0; }
.pr-row.v6 .mc .cav { text-align: center; padding: 0 4px; -moz-appearance: textfield; appearance: textfield; }
.pr-row.v6 .mc .cav::-webkit-inner-spin-button, .pr-row.v6 .mc .cav::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.pr-row.v6 .pr-x { height: 22px; width: 26px; min-width: 26px; padding: 0; font-size: 14px; line-height: 20px; border-radius: 5px; color: var(--dim); }
.pr-row.v6 .pr-x:hover { color: var(--danger-ink); }
.pr-row.v6 select.f-occ { background: var(--warn-bg); border-color: var(--warn-line); color: var(--warn-ink); font-weight: 700; }
/* 09-21 사장님: 판정을 등록 라인 행에 그대로 — 등록 불가 = 행 전체 빨강 · 주의 = 노랑. 걸린 칸은 테두리까지 */
.pr-row.v6.pr-neg { background: var(--danger-bg); }
.pr-row.v6.pr-warn { background: var(--warn-bg); }
.pr-row.v6.pr-neg .pr-no { color: var(--danger-ink); }
.pr-row.v6.pr-warn .pr-no { color: var(--warn-ink); }
.pr-row.v6 :is(select, input, .ssel-in).f-bad { background: var(--danger-bg); border-color: var(--danger); color: var(--danger-ink); font-weight: 800; }
.chk-row { padding: 2px 8px; margin: 0 -8px; border-radius: 5px; }
.chk-row.r-neg { background: var(--danger-bg); }
.chk-row.r-warn { background: var(--warn-bg); }
.chk-row:is(.r-neg, .r-warn) .k { color: var(--ink-2); font-weight: 700; }
.ssel-k { margin-left: 8px; color: var(--dim); font-size: 11.5px; font-weight: 400; }
.chk-card.has-neg { border-color: var(--danger-line); }
.chk-list { display: flex; flex-direction: column; }
.chk-row { display: grid; grid-template-columns: minmax(180px, 260px) 1fr; gap: 12px; align-items: center; min-height: 26px; border-bottom: 1px solid var(--line-soft); font-size: 12.5px; }
.chk-row:last-child { border-bottom: 0; }
.chk-row .k { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chk-row .v { font-weight: 700; text-align: right; }
.chk-row .v.neg { color: var(--danger-ink); } .chk-row .v.warn { color: var(--warn-ink); } .chk-row .v.ok { color: var(--ok-ink); } .chk-row .v.mu { color: var(--dim); font-weight: 400; }
/* 드로어 폭(≤1000)은 구 .pr-row 카드 전환점(1120) 아래 — v6 그리드는 자체 전환점(760)까지 한 줄 유지 */
@container (max-width: 1120px) {
  .pr-row.v6 { grid-template-columns: 26px minmax(170px, 1fr) minmax(120px, 160px) 160px 80px 64px 66px 30px; /* 설비 124→160(09-24 ppt: "DP13 SAMDO 125T" 잘림) */ border: 0; border-radius: 0; border-bottom: 1px solid var(--line-soft); padding: 3px 0; margin-top: 0; }
  .pr-row.v6.pr-head { display: grid; }
  .pr-row.v6 .prc { display: contents; }
  .pr-row.v6 .prc-lbl { display: none; }
}
@container prl (max-width: 735px) {
  .pr-row.v6 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 10px; border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px 10px; margin-top: 8px; }
  .pr-row.v6.pr-head, .pr-row.v6 .pr-no { display: none; }
  .pr-row.v6 .prc { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
  .pr-row.v6 .prc-lbl { display: block; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pr-row.v6 .prc-prod { grid-column: 1 / -1; }
  .pr-row.v6 .prc-del { grid-column: auto; align-self: end; align-items: flex-end; }
  .pr-row.v6 .prc-del .prc-lbl { display: none; }
}

/* ===== 09-10 v6 ③ PO 일자별 드로어: KPI 5 · 당월 합계 열 · 좁은 일자 열(숫자 = 세미컨덴스드 시스템 글꼴) ===== */
.kpis5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin: 0 0 4px; }
.kpis5 .kpi .v.ngw { color: var(--danger-ink); }
.kpis5 .kpi .v small { font-size: 11.5px; font-weight: 700; color: var(--muted); }
.kpis5 .kpi .v small.ngw { color: var(--danger-ink); }
.matrix.daily.v6 .dc, .matrix.daily.v6 th.dh { min-width: 50px; width: 50px; max-width: 50px; padding-left: 4px; padding-right: 4px; } /* 원래 글꼴 유지·열 50(사장님 09-10) — 최악값 -1,234 실측 39.8 < 내부 41 */
.matrix.daily.v6 td.dc { font-size: 12.5px; font-variant-numeric: tabular-nums; }
.matrix.daily.v6 th.dh { font-size: 11.5px; padding: 0 2px; }
/* 계 열 = 구분 열 오른쪽에 고정(가로 스크롤해도 남는다 — 사장님 09-10). left = 구분 열 폭 56 */
.matrix.daily.v6 .tot, .matrix.daily.v6 th.dh.tot { position: sticky; left: 56px; z-index: 2; min-width: 64px; width: 64px; max-width: 64px; padding: 0 4px; white-space: nowrap; background: var(--brand-bg); color: var(--brand-ink); font-weight: 800; border-right: 1px solid var(--brand-line-2); }
.matrix.daily.v6 thead th.dh.tot { z-index: 4; }
.matrix.daily.v6 tr.po-due-row td.tot, .matrix.daily.v6 tr.stock td.tot, .matrix.daily.v6 tr.shortage td.tot { background: var(--brand-bg-2); }
.matrix.daily.v6 td.tot.neg { color: var(--danger-ink); }
.matrix.daily.v6 .c-gubun { min-width: 56px; width: 56px; max-width: 56px; z-index: 3; }
.matrix.daily.v6 thead .c-gubun { z-index: 5; }

/* ===== 09-10 v6 ② 생산 건 상세: 빠른 기록 칩 · 마감 패널 바닥 고정 ===== */
/* 09-21 사장님: 빠른 기록 칩 = [이력 추가] 제목 줄 오른쪽. 칩 높이 = 버튼 규격 26. */
.qchips { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 0 0 0 auto; }
.qchips .qc { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 9px; border: 1px solid var(--line); border-radius: 7px; background: #fff; font: inherit; font-weight: 700; font-size: 12px; color: var(--ink-2); cursor: pointer; }
.qchips .qc i { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); flex: none; }
.qchips .qc.qc-ok i { background: var(--ok); } .qchips .qc.qc-neg i { background: var(--danger); } .qchips .qc.qc-brand i { background: var(--brand); }
.qchips .qc:hover { background: var(--hover); }
.qchips .qc.on { background: var(--brand-bg); border-color: var(--brand-line); color: var(--brand-dark); }
.qchips .qc:disabled { color: var(--dim); cursor: default; background: var(--bg); }
.qchips .hint { font-size: 11.5px; color: var(--dim); margin-left: auto; }
.ev-add-title .ev-quick { display: none; }
.ev-add-title { flex-wrap: wrap; row-gap: 6px; }
.ev-add-title > span:first-child { white-space: nowrap; flex: 0 0 auto; }
.ev-add-title > .chip { flex: 0 0 auto; }
/* 마감 패널 = 드로어 바닥 고정(이력이 길어도 마감이 손에 닿게). modal-body 패딩 18을 음수 마진으로 상쇄(.modal-actions와 같은 문법) */
.modal-overlay.drawer .close-panel { position: sticky; bottom: 0; z-index: 4; margin: 0 -18px -18px !important; border-radius: 0; border-left: 0; border-right: 0; border-bottom: 0; box-shadow: 0 -6px 18px rgba(20,30,50,.08); background: #fff; }
/* 드로어 = 세로 flex: 바닥 액션(.close-panel/.modal-actions)이 내용이 짧아도 바닥에 붙는다(v6 ②) */
.modal-overlay.drawer .modal-box { display: flex; flex-direction: column; }
.modal-overlay.drawer .modal-body { flex: 1 1 auto; display: flex; flex-direction: column; }
.modal-overlay.drawer .modal-body > div:has(> .close-panel), .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 > .close-panel, .modal-overlay.drawer .modal-body > div > .modal-actions { margin-top: auto; }

/* ===== 09-10 v6 ⑤ Packing List 탭: 목록 · 2단 빌더 · 바닥 액션 ===== */
.kpis5.k4 { grid-template-columns: repeat(4, 1fr); margin-bottom: 12px; }
.kpis5.k3 { grid-template-columns: repeat(3, 1fr); width: 50%; min-width: 600px; margin-bottom: 12px; } /* 09-11 rev07(사장님): PL KPI 3칸 = 화면 절반 */
/* 09-11 rev03(사장님): 세그먼트 칩 총 26px = 필터·버튼 규격(2 + 22 + 2) — 전체/성적서 미비, KOR/EN, 출하가능/전체 상태, 일자별/품명별 */
.segtab { display: inline-flex; gap: 2px; background: var(--bg); border-radius: 8px; padding: 2px; box-sizing: border-box; height: 26px; }
.segtab span { display: inline-flex; align-items: center; height: 22px; box-sizing: border-box; padding: 0 9px; border-radius: 6px; font-weight: 700; font-size: 12px; color: var(--muted); cursor: pointer; white-space: nowrap; }
.segtab span.on { background: #fff; color: var(--ink); box-shadow: var(--shadow); }
table.pl-list td.el { max-width: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* 09-20: 비고 유동 — 상한 없이 표 끝까지 */
.pl-2col { display: grid; grid-template-columns: minmax(420px, 460px) minmax(0, 1fr); gap: 12px; align-items: start; }
.pl-2col .card-lite { margin-bottom: 0; min-width: 0; }
@media (max-width: 1240px) { .pl-2col { grid-template-columns: 1fr; } }
table.pl-lots tr.grp td { background: var(--bg); font-weight: 800; height: 28px; }
table.pl-lots tr.in td { background: var(--ok-bg); }
table.pl-lots .add, table.pl-doc-edit .del { width: 26px; height: 22px; border-radius: 6px; border: 0; font: inherit; font-weight: 800; font-size: 13px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
table.pl-lots .add { background: var(--brand); color: #fff; }
table.pl-lots .add.g { background: var(--bg); color: var(--dim); border: 1px solid var(--line); }
table.pl-doc-edit .del { background: transparent; color: var(--dim); }
table.pl-doc-edit .del:hover { color: var(--danger-ink); }
table.pl-doc-edit td .cell { width: 100%; box-sizing: border-box; height: 22px; border: 1px solid var(--line); border-radius: 5px; padding: 0 6px; font: inherit; font-weight: 700; text-align: right; background: #fff; } /* 09-11 rev05: 24 → 22(행 26) · rev06: border-box — content-box라 칸 오른쪽 여백을 먹고 테두리에 붙었다(실측 88/80) */
table.pl-doc-edit td .cell.txt { text-align: left; font-weight: 400; }
table.pl-doc-edit td .cell.over { border-color: var(--danger); background: var(--danger-bg); color: var(--danger-ink); }
table.pl-doc-edit td .sub { display: block; font-size: 11.5px; color: var(--dim); font-weight: 400; }
table.pl-doc-edit tfoot td { background: var(--bg); font-weight: 800; }
.pl-actions { position: sticky; bottom: 0; z-index: 4; display: flex; align-items: center; gap: 8px; padding: 10px 0; margin-top: 12px; border-top: 1px solid var(--line); background: var(--bg); }
.pl-actions .btn.f-empty { background: var(--warn-bg); border-color: var(--warn); color: var(--warn-ink); }

/* ===== 09-10 v6 PO 현황 화면(#/po) ===== */
.kpis5.k6 { grid-template-columns: repeat(6, 1fr); margin-bottom: 12px; }
.kpis5 .kpi .v .delta { margin-left: 8px; }
.kpis5 .kpi .sub .delta { margin-left: 6px; height: 18px; font-size: 11px; }
.delta { display: inline-flex; align-items: center; height: 20px; padding: 0 6px; border-radius: 5px; font-weight: 800; font-size: 11.5px; vertical-align: middle; }
.delta.bad { background: var(--danger-bg); color: var(--danger-ink); } .delta.good { background: var(--ok-bg); color: var(--ok-ink); } .delta.flat { background: var(--bg); color: var(--muted); }
.cols2.po-mid { grid-template-columns: 1.1fr 1fr; align-items: stretch; margin-bottom: 12px; }
.cols2.po-mid > .panel, .cols3.po-low > .panel { margin-bottom: 0; min-width: 0; }
.cols3.po-low { display: grid; grid-template-columns: 1fr 1fr 1.4fr; gap: 12px; margin-bottom: 12px; }
@media (max-width: 1400px) { .cols3.po-low { grid-template-columns: 1fr 1fr; } .cols3.po-low > .panel:last-child { grid-column: 1 / -1; } }
@media (max-width: 1680px) { .kpis5.k6 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 1100px) { .cols2.po-mid { grid-template-columns: 1fr; } .cols3.po-low { grid-template-columns: 1fr; } }
.chart-box { width: 100%; }
.chart-legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 11.5px; color: var(--muted); margin-top: 4px; }
.chart-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.ratebar { display: inline-flex; align-items: center; gap: 6px; min-width: 96px; }
.ratebar .rt { display: block; width: 60px; height: 8px; background: var(--line-soft); border-radius: 4px; overflow: hidden; flex: none; }
.ratebar .rt i { display: block; height: 100%; }
.ratebar b { font-size: 11.5px; min-width: 40px; text-align: right; }
table.po-week tr.cur td { background: var(--warn-bg); }
table.po-prod td, table.po-cust td, table.po-week td, table.po-cons td, table.po-urg td { white-space: nowrap; }
td.okc { color: var(--ok-ink); font-weight: 700; }
/* PO 현황 2차(사장님): 잔여 강조 KPI · 기타 후처리 행 흐림 */
.kpi.kpi-main { border-color: var(--danger-line); background: var(--danger-bg); }
.kpi.kpi-main .v { color: var(--danger-ink); }
.kpi.kpi-neg .v { color: var(--danger-ink); }
table.po-afa tr.mu-row td { color: var(--dim); }
/* Packing List 빌더 3차(사장님 09-10): 출하 계획 표 · LOT 담기 드로어 · 문서 칸 폭 = 백만 단위(§4-Q) */
table.pl-plan tr.short td:nth-child(4) { font-weight: 800; }
table.pl-plan tr.done td:first-child { color: var(--ok-ink); }
table.pl-plan td, table.pl-pick td { white-space: nowrap; }
/* 09-10 6차: 문서 = 납품처 카드 한 장(고객사 칼럼은 카드 머리로) — 8칼럼: 품명(잔여)·총 수량 96·BOX 56·LOT No.(잔여)·LOT 수량 104·비고(잔여)·성적서 84·× 32 */
/* 09-11(사장님): 비고 칼럼 폐지 → 7칼럼 = 품명 170 · 총 수량 88 · BOX 56 · LOT No.(잔여, 말줄임) · LOT 수량 96 · 성적서 64 · × 28 */
/* 09-11 rev08(사장님 지정 폭): 품명 160 · 총 수량 90 · BOX 50 · LOT No. 유동 · LOT 수량 90 · 성적서 65 · × 34 */
/* 09-11 rev09(사장님): 한 표 8칼럼 = 품명 160 · 납품처 90 · 총 수량 90 · BOX 50 · LOT No. 유동 · LOT 수량 90 · 성적서 65 · × 34 */
table.pl-doc-edit th:nth-child(2), table.pl-doc-edit td:nth-child(2) { width: 90px; }
table.pl-doc-edit th:nth-child(3), table.pl-doc-edit td:nth-child(3) { width: 90px; }
table.pl-doc-edit th:nth-child(4), table.pl-doc-edit td:nth-child(4) { width: 50px; }
table.pl-doc-edit th:nth-child(6), table.pl-doc-edit td.w-qty { width: 90px; }
table.pl-doc-edit th:nth-child(7), table.pl-doc-edit td:nth-child(7) { width: 100px; }
table.pl-doc-edit th:nth-child(8), table.pl-doc-edit td:nth-child(8) { width: 34px; } /* × 26 + 패딩 — 28이면 6px 넘쳐 가로 스크롤(09-11 실측) */
.pl-doc-card { margin: 0 0 8px; padding: 10px 12px; background: var(--bg); }
.pl-doc-card:last-child { margin-bottom: 0; }
.pl-doc-card .card-lite-head { margin-bottom: 6px; }
.pl-doc-card .card-lite-head b { font-size: 13px; }
/* rev12: 문서 표 = 계획 표와 같은 맨 표(.pl-doc-wrap). 드로어를 줄이면 700 아래로는 가로 스크롤 */
.pl-doc-wrap { overflow-x: auto; }
table.pl-doc-edit { width: calc(100% - 2px); min-width: 700px; } /* −2px = 소수점 반올림 빈 스크롤바 방지(09-11 실측) */
table.pl-plan tr.grp td { background: var(--bg); height: 28px; } /* 09-11 rev10: 머리줄도 행 28 */
table.pl-plan tr.grp + tr td { border-top: 1px solid var(--line); }
/* 09-10 8차(사장님): 계획 표 6칼럼 고정폭 — 백만 단위(1,000,000 = 62px) 기준. 품명 170 · 납품처 126 · PO 수량 88(위 PO/아래 담은 수량) · 필요 수량 88 · 재고 122([가능]/[대기] 칩 34 + 숫자 62) · 조치 164(2줄 왼쪽) = 758 */
/* ★09-11(사장님 "PL 팝업 컴팩트·슬림"): 계획 표 전 칸 1줄(행 30) — 품명 170 · 납품처 126 · PO 수량 88 · 필요 수량 88 · 재고 88 · 조치(잔여 ≈ 224) = 784.
   포장단위·수검 대기 재고 = 점 hover(.udot). 구 2줄 구조(.stk/.stkl/.chip.mini, 조치 2줄 48px) 폐지. */
/* 09-11 rev08(사장님 지정 폭): 품명 160 · 납품처 110 · PO 수량 90 · 필요 수량 90 · 재고 90 · 조치 유동 = 540 + 조치 */
table.pl-plan { table-layout: fixed; width: 100%; min-width: 740px; }
table.pl-plan th:nth-child(1), table.pl-plan td:nth-child(1) { width: 160px; }
table.pl-plan th:nth-child(2), table.pl-plan td:nth-child(2) { width: 110px; }
table.pl-plan th:nth-child(3), table.pl-plan td:nth-child(3) { width: 90px; }
table.pl-plan th:nth-child(4), table.pl-plan td:nth-child(4) { width: 90px; }
table.pl-plan th:nth-child(5), table.pl-plan td:nth-child(5) { width: 90px; }
table.pl-plan td:nth-child(1) { overflow: hidden; text-overflow: ellipsis; }
table.pl-plan td.act { padding-left: 10px; text-align: left; }
/* ★09-11 rev05 표 안 컨트롤 규격(사장님 "셀 안 셀렉트·입력칸도 칩 높이로, 행 26 균일"): Packing List 표 6종(계획·문서·LOT 구성·PO 조정·성적서 창·목록)
   셀에 들어가는 셀렉트(.ssel-in)·입력칸·버튼(.btn.sm)·칩(.chip) = **22px**, 행 = **26**(위아래 2) — 구 30/34/37 혼재 폐지. 체크박스 제외. 규칙 = DESIGN §4-S(다른 표는 손댈 때 이식). */
:is(table.pl-plan, table.pl-doc-edit, table.pl-pick, table.pl-po-adj, table.pl-certs, table.pl-list) td { height: 22px; padding-top: 2px; padding-bottom: 2px; } /* td height = 내용 높이(패딩 제외) → 22 + 2 + 2 = 26 */
:is(table.pl-plan, table.pl-doc-edit, table.pl-pick, table.pl-po-adj, table.pl-certs, table.pl-list) td :is(.ssel-in, input:not([type=checkbox]):not([type=radio]), select) { height: 22px; padding-top: 0; padding-bottom: 0; font-size: 12px; border-radius: 5px; box-sizing: border-box; }
:is(table.pl-plan, table.pl-doc-edit, table.pl-pick, table.pl-po-adj, table.pl-certs, table.pl-list) td .ssel-in { padding-right: 22px; }
:is(table.pl-plan, table.pl-doc-edit, table.pl-pick, table.pl-po-adj, table.pl-certs, table.pl-list) td .btn.sm { height: 22px; line-height: 20px; }
:is(table.pl-plan, table.pl-doc-edit, table.pl-pick, table.pl-po-adj, table.pl-certs, table.pl-list) td .chip { height: 22px; line-height: 1; }
/* 09-11 rev10(사장님): 계획·문서·LOT 구성·PO 조정 4표 = 행 28(td height = border-box 총 높이 — 패딩 2/2 포함, 컨트롤 22 유지). 성적서 창·목록은 26 그대로.
   ★td height는 box-sizing border-box라 패딩을 포함한 값이다(22로 두면 내용 22+패딩 4가 이겨 26이 된다 — §4-S 정정) */
:is(table.pl-plan, table.pl-doc-edit, table.pl-pick, table.pl-po-adj) td { height: 28px; }
:is(table.pl-certs, table.pl-list) td { height: 26px; }
/* 빌더 머리 한 줄(.pl-head): 출하일 셀렉트·비고 입력 = 미납 칩과 같은 22px */
.pl-head .ssel-in, .pl-head input { height: 22px; font-size: 12px; font-weight: 700; color: var(--ink-2); padding: 0 8px; box-sizing: border-box; }
.pl-head .ssel-in { padding-right: 22px; }
/* 문서 표 LOT 수량 = 상자 없이 숫자만(포커스·오류 때만 테두리) */
table.pl-doc-edit td .cell.plain { border-color: transparent; background: transparent; }
table.pl-doc-edit td .cell.plain:focus { border-color: var(--line-2); background: #fff; }
table.pl-doc-edit td .cell.plain.over { border-color: var(--danger); background: var(--danger-bg); }
/* LOT 구성 표(생산일·주야 폐지): 담기 · LOT No.(유동) · 열 · 금형 · 상태 · LOT 수량 80 · 잔량 80 · 성적서 · 담을 수량 80 */
table.pl-pick th:nth-child(6), table.pl-pick td:nth-child(6), table.pl-pick th:nth-child(7), table.pl-pick td:nth-child(7), table.pl-pick th:nth-child(9), table.pl-pick td:nth-child(9) { width: 80px; }
table.pl-pick td:nth-child(9) .cell.q { width: 100%; box-sizing: border-box; }
/* 드로어 쌓기 폭: LOT 구성(빌더 왼쪽) · 출하 예정 일자(왼쪽) */
.modal-overlay.drawer .modal-box:has(.pl-lot-pop) { width: min(820px, calc(100vw - 960px)) !important; min-width: 520px; max-width: none; }
.modal-overlay.drawer .modal-box:has(.pl-dates-drawer) { width: 820px !important; max-width: none; } /* rev18: Packing List 칼럼 190 안 잘리게 760 → 820 */
/* 출하 예정 일자 표(사장님 지정 폭): 출하일 80 · PO 총량 90 · AFA S/C 90 · 기타 90 · 품명 50 · 필요 수량 90 · Packing List 140 · 조치 60 = 690 */
table.pl-dates2 { table-layout: fixed; width: 740px; } /* rev18: Packing List 140 → 190 */
table.pl-dates2 th:nth-child(1), table.pl-dates2 td:nth-child(1) { width: 80px; }
table.pl-dates2 th:nth-child(2), table.pl-dates2 td:nth-child(2), table.pl-dates2 th:nth-child(3), table.pl-dates2 td:nth-child(3), table.pl-dates2 th:nth-child(4), table.pl-dates2 td:nth-child(4), table.pl-dates2 th:nth-child(6), table.pl-dates2 td:nth-child(6) { width: 90px; }
table.pl-dates2 th:nth-child(5), table.pl-dates2 td:nth-child(5) { width: 50px; }
table.pl-dates2 th:nth-child(7), table.pl-dates2 td:nth-child(7) { width: 190px; overflow: hidden; text-overflow: ellipsis; }
table.pl-dates2 th:nth-child(8), table.pl-dates2 td:nth-child(8) { width: 60px; }
/* 성적서 창(하루) 표(rev12): 순번·납품처 140 · 품명 160 · LOT No. 유동(최소 200) · 수량 90 · 성적서 80 — 팝업(900) 여유만큼 LOT No.가 넓어져 안 잘린다 */
table.pl-certs { table-layout: fixed; width: 100%; min-width: 670px; }
table.pl-certs th:nth-child(1), table.pl-certs td:nth-child(1) { width: 140px; }
table.pl-certs th:nth-child(2), table.pl-certs td:nth-child(2) { width: 160px; }
table.pl-certs th:nth-child(3), table.pl-certs td:nth-child(3) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
table.pl-certs th:nth-child(4), table.pl-certs td:nth-child(4) { width: 90px; }
table.pl-certs th:nth-child(5), table.pl-certs td:nth-child(5) { width: 80px; }
/* PO 조정 팝업(700): 목표 출하일 중제목 상자 · PO 추가 구획(점 소제목 + 위 구분선) */
.modal-box.wide:has(.pl-builder-po) { width: 700px; }
.pl-target { display: inline-flex; align-items: center; gap: 10px; height: 32px; padding: 0 12px; margin-bottom: 10px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--bg); font-size: 12.5px; font-weight: 700; color: var(--ink); }
.pl-target b { font-size: 14px; font-weight: 800; color: var(--ink); }
.pl-po-new { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
.pl-po-new .t { font-size: 12.5px; font-weight: 800; color: var(--ink); margin-right: 6px; } /* rev12: 제목·수량·버튼 한 줄(행 26) */
.pl-po-new .t::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--brand); margin-right: 8px; vertical-align: 2px; }
.pl-po-new .cell { height: 22px; box-sizing: border-box; }
/* 09-11 rev11(개선 7): 바뀐 행 강조 1.4초 — PO 조정 뒤 계획 표·PO 표 */
@keyframes plflash { from { background: #fff3b0; } to { background: transparent; } }
tr.flash td { animation: plflash 1.4s ease-out; }
/* rev19(사장님): 재고·PO 일자별 매트릭스(.matrix 전부 — 재고·PO/생산 계획) = PL 목록 기준 — 행 26(패딩 2/2, 구 30), 가로선 --line(구 --line-2 진함), 세로선·sticky 칸 --line 계열 */
.matrix th, .matrix td { padding: 2px 8px; height: 26px; border-bottom-color: var(--line); }
.matrix.daily.v6 th.dh { padding: 0 2px; }
.matrix.daily.v6 .dc, .matrix.daily.v6 .tot, .matrix.daily.v6 th.dh.tot { padding-top: 2px; padding-bottom: 2px; }
.matrix tbody td.sticky, .matrix .sticky, .matrix .c-gubun { border-right-color: var(--line); }
.matrix tr.stock td, tbody tr.row-closed td { border-bottom-color: var(--line); }
/* rev12(사장님): 탭 배지(LOT 정보 46 · 후처리 18) = 표 안 경과 칩("40일")과 같은 18px */
.subtab .badge { height: 18px; min-width: 18px; padding: 0 5px; font-size: 11px; line-height: 18px; border-radius: 5px; }
/* rev12: 드로어 왼쪽 변 손잡이(가로 줄이기) — 줄이면 본문 가로 스크롤 */
.modal-overlay.drawer .modal-box { position: relative; }
.modal-overlay.drawer .modal-body { overflow-x: auto; }
.modal-overlay.drawer .modal-box .drsz { position: absolute; left: 0; top: 0; bottom: 0; width: 6px; cursor: ew-resize; z-index: 6; }
.modal-overlay.drawer .modal-box .drsz:hover { background: var(--brand-bg-3); }
/* 팝업 크기 손잡이 = 왼쪽 아래(ui.js attachResizer) — CSS resize(오른쪽 아래) 폐지 */
.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; }
table.pl-plan td.act .row { gap: 4px; align-items: center; flex-wrap: nowrap; min-height: 0; }
.udot.off { background: var(--line-2); } /* 비고 없음 · 클릭 = 입력(편집 모드) */
.udot.ink { background: currentColor; opacity: .5; margin-left: 7px; } /* 보조 정보 점 = 글자색을 따라가되 한 단계 옅게(50%) · 값과 7px(사장님 09-11 rev02). 파란 점은 조치·경고 신호로만 */
table.pl-po-adj td.acts .row { gap: 4px; justify-content: flex-start; flex-wrap: nowrap; align-items: center; min-height: 0; } /* rev10: 왼쪽 정렬 */
/* PO 조정 7칼럼(사장님 지정 폭): 납기 80 · PO 수량 90 · 출하됨 80 · 잔여 80 · 구분 50 · PO 조정·정리 = 남는 폭을 나눠 채움(rev12 — 팝업 오른쪽 여백 없이) */
table.pl-po-adj { table-layout: fixed; width: 100%; }
table.pl-po-adj th:nth-child(1), table.pl-po-adj td:nth-child(1), table.pl-po-adj th:nth-child(3), table.pl-po-adj td:nth-child(3), table.pl-po-adj th:nth-child(4), table.pl-po-adj td:nth-child(4) { width: 80px; }
table.pl-po-adj th:nth-child(2), table.pl-po-adj td:nth-child(2) { width: 90px; }
table.pl-po-adj th:nth-child(5), table.pl-po-adj td:nth-child(5) { width: 50px; }
table.pl-po-adj th:nth-child(6), table.pl-po-adj td:nth-child(6) { width: 170px; } /* 정리 = 나머지(≈112) */
table.pl-po-adj td.acts { padding-left: 10px; }
/* table.pl-certs 행 26 = 위 :is() 공통 규칙 */
/* LOT 구성 팝업(구 드로어) — 머리 kvs는 드로어 규칙과 동일 */
/* rev17(사장님): LOT 구성 머리 = 타일 5개(같은 폭 · 라벨 위 11.5 · 값 14/800) + 담은 비율 막대. 부족 .need = 빨강 틴트 · 충족 .okk = 초록 */
.modal-overlay.drawer :is(.pl-lot-pop, .pl-prod, .pl-builder) .kvs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.modal-overlay.drawer :is(.pl-lot-pop, .pl-prod, .pl-builder) .kvs > div { border: 1px solid var(--line); border-radius: 8px; background: var(--bg); padding: 5px 10px; min-width: 0; }
.modal-overlay.drawer :is(.pl-lot-pop, .pl-prod, .pl-builder) .kvs > div small { display: block; font-size: 11.5px; color: var(--muted); font-weight: 700; letter-spacing: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.modal-overlay.drawer :is(.pl-lot-pop, .pl-prod, .pl-builder) .kvs > div b { display: block; font-size: 14px; font-weight: 800; margin-top: 1px; white-space: nowrap; }
.modal-overlay.drawer :is(.pl-lot-pop, .pl-prod, .pl-builder) .kvs > div.need { border-color: var(--danger-line); background: var(--danger-bg); }
.modal-overlay.drawer :is(.pl-lot-pop, .pl-prod, .pl-builder) .kvs > div.need b { color: var(--danger-ink); }
.modal-overlay.drawer :is(.pl-lot-pop, .pl-prod, .pl-builder) .kvs > div.okk { border-color: var(--ok-line, var(--line)); background: var(--ok-bg); }
.modal-overlay.drawer :is(.pl-lot-pop, .pl-prod, .pl-builder) .kvs > div.okk b { color: var(--ok-ink); }
.pl-prog { height: 6px; margin: 8px 0 0; border-radius: 3px; background: var(--line-soft); overflow: hidden; }
.pl-prog i { display: block; height: 100%; width: 0; background: var(--brand); border-radius: 3px; transition: width .25s; }
.pl-prog.over i { background: var(--danger); }
.modal-box.xxl:has(.pl-lot-pop) { width: min(90vw, 1010px); max-width: 1010px; } /* 09-11 rev02: 품질 메모 칼럼(237) 폐지만큼 축소 1240 → 1010 */
/* 빌더 팝업 폭 = 계획 표 758 + 카드·팝업 여백 → 1000 상한(구 1560) */

/* 문서 표(납품처 카드): 품명 170 · 총 수량 88 · BOX 56 · LOT No. 200 · LOT 수량 96(입력 88) · 비고(잔여 ≥ 120) · 성적서 64 · × 28 — 백만 단위 */
table.pl-doc-edit { table-layout: fixed; width: calc(100% - 2px); min-width: 700px; } /* −2px = 소수점 빈 스크롤바 방지 · rev12 */
table.pl-doc-edit th:nth-child(1), table.pl-doc-edit td:nth-child(1) { width: 160px; }
table.pl-doc-edit th:nth-child(5), table.pl-doc-edit td:nth-child(5) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* LOT No.(유동) */
.pl-doc-card .card-lite-head .btn.sm { height: 22px; line-height: 20px; font-size: 11.5px; padding: 0 8px; }
/* 목록 = 상태·PL·출하일·총 수량(S/C·기타·합계)·품명·LOT·BOX·성적서·PL 엑셀·성적서 ZIP·비고(유동)·조치 */
/* 09-20 사장님: 산출물 칩 2칸 추가 + 비고 유동 → 표가 패널 오른쪽 끝까지(구 width:auto 835 고정 폐지) */
/* 폭은 packing.js PL_W(colgroup)에서 정한다 — 머리글이 2줄이라 td:nth-child 지정은 fixed 레이아웃에서 무시된다(09-20 실측).
   상태 70 · PL 90 · 출하일 110 · S/C 80 · 기타 80 · 합계 90 · 품명 60 · LOT 60 · BOX 60 · 성적서 75 ·
   PL 엑셀 95 · 성적서 ZIP 110 · 비고 유동 · 조치 60 = 고정 1040 + 비고 최소 160(§7) = 1200 */
table.pl-list { width: 100%; min-width: 1310px; table-layout: fixed; } /* 고정 1150(DHPV 칸 110 포함 — 09-24 P3-1) + 비고 최소 160 */
table.pl-list thead th { text-align: center; }
/* (구 PO 조정 폭 규칙 09-10 7차 — rev10 사장님 지정 폭 620 블록으로 대체, 여기 두면 뒤 규칙이 이겨 무효) */
table.pl-po-adj td { white-space: nowrap; }
table.pl-po-adj tr.cur td { background: var(--warn-bg); }
table.pl-po-adj td .udot { margin-left: 6px; }
table.pl-po-adj td .cell, .pl-builder-po .cell { width: 88px; box-sizing: border-box; height: 22px; border: 1px solid var(--line); border-radius: 5px; padding: 0 6px; font: inherit; font-weight: 700; text-align: right; background: #fff; }
table.pl-doc-edit td .cell { width: 100%; } /* 09-11 rev06: 구 88px 고정이 칸 내용 폭(80)을 넘어 오른쪽 테두리에 붙었다 → 칸 안 100%(좌우 8 균등) */
table.pl-doc-edit td .cell.txt { width: 100%; min-width: 0; }
table.pl-pick td .cell.q { width: 96px; height: 24px; border: 1px solid var(--line); border-radius: 5px; padding: 0 6px; font: inherit; font-weight: 700; text-align: right; background: #fff; }
table.pl-pick td .cell.q:disabled { background: var(--bg); color: var(--dim); }
table.pl-pick td .cell.q.over { border-color: var(--danger); background: var(--danger-bg); color: var(--danger-ink); }
table.pl-pick tr.in td { background: var(--ok-bg); }
.modal-overlay.drawer .kvs { display: flex; gap: 28px; flex-wrap: wrap; }
.modal-overlay.drawer .kvs div small { display: block; font-size: 11.5px; color: var(--dim); font-weight: 800; letter-spacing: .04em; }
.modal-overlay.drawer .kvs div b { font-size: 15px; }
/* Packing List 4차(사장님 09-10): 빌더 = 팝업(xxl) · 출하 예정 일자 팝업 · 품질 메모 열 */
.pl-builder .card-lite { margin-bottom: 10px; }
/* (빌더 폭 규칙은 09-10 8차 블록으로 이동 — 1000 상한) */
table.pl-dates2 tr.cur td { background: var(--warn-bg); }
table.pl-dates2 tr.past td { color: var(--dim); }
table.pl-dates2 td, table.pl-list td { white-space: nowrap; }
table.pl-pick td.memo { max-width: 220px; overflow: hidden; text-overflow: ellipsis; color: var(--ink-2); font-weight: 400; }
.ssel-pop .ssel-k { white-space: nowrap; }
/* Packing List 4차(사장님 09-10): 빌더 = 팝업(xxl) · 출하 예정 일자 팝업 · 품질 메모 열 */
.pl-builder .card-lite { margin-bottom: 10px; }
/* (빌더 폭 규칙은 09-10 8차 블록으로 이동 — 1000 상한) */
table.pl-dates2 tr.cur td { background: var(--warn-bg); }
table.pl-dates2 tr.past td { color: var(--dim); }
table.pl-dates2 td, table.pl-list td { white-space: nowrap; }
table.pl-pick td.memo { max-width: 220px; overflow: hidden; text-overflow: ellipsis; color: var(--ink-2); font-weight: 400; }
.ssel-pop .ssel-k { white-space: nowrap; }

/* ===== 09-10 v6 팝업 = 줄이기 가능(모서리 드래그, 늘리기 상한 = 연 크기) · 오른쪽 도킹(dock) ===== */
.modal-box.resizable { resize: none; overflow: auto; min-width: 480px; min-height: 180px; } /* rev10: 손잡이는 .rsz(왼쪽 아래) */
.modal-box.resizable .modal-body { min-width: 0; }
/* Packing List 빌더 = 오른쪽 도킹 팝업(목록을 보며 입력) · 폭 1180 상한 */

/* (09-10 8차 품명+포장단위 2줄 묶음 규칙 — 09-11 포장단위가 점(hover)으로 바뀌어 폐지. 행 = §4-S 26) */
table.pl-plan tr.sub-row td { background: var(--bg-soft); }
table.pl-plan .ssel-in { height: 22px; font-size: 12px; } /* 09-11 rev05: 표 안 컨트롤 22 */

/* ===== 09-11 rev20 PO 입력 드로어(사장님 9항목 ①~⑤): table.po-entry — §4-S 셀 안 컨트롤 22 · 행 28(PL 계획 표와 동일)
   칼럼 = 품명 260(구 팝업 ≈300 −40) · 고객사 70 · 제품군 90(품명 선택 시 자동, 텍스트) · 납기일 130 · 수량 110 · 비고 240(구 ≈300 −60) · 삭제 60 = 960
   드로어 폭 = 960 + modal-body 패딩 36 = 996 → 1000 */
/* ★09-12 사장님 "PO 입력창 폭 축소 — 상황별 포맷": 칼럼 = 클래스(nth-child 폐지). 다품목 = 품명 220 · 고객사·제품군 한 칸 130 · 납기 120 · 수량 100 · 비고 160 · 조치 96 = 826 → 드로어 870(구 1050).
   단일 제품(.one, 제품 드로어 [+ PO 추가] → 왼쪽 쌓기) = 납기 120 · 수량 100 · 비고 200 · 조치 60 = 480 → 드로어 540. */
.modal-overlay.drawer .modal-box:has(.po-entry-body) { width: min(960px, 84vw) !important; max-width: 84vw; }
.modal-overlay.drawer .modal-box:has(.po-entry-body.one) { width: 630px !important; max-width: 84vw; }
.po-entry-wrap { overflow-x: auto; overflow-y: visible; max-height: none; }
table.po-entry { width: 916px; table-layout: fixed; }
.po-entry-body.one table.po-entry { width: 570px; }
table.po-entry .c-cust { width: 90px; }
table.po-entry .c-prod { width: 220px; }
table.po-entry .c-cg { width: 130px; }
table.po-entry .c-date { width: 120px; }
table.po-entry .c-qty { width: 100px; }
table.po-entry .c-note { width: 160px; }
table.po-entry .c-act { width: 96px; }
.po-entry-body.one table.po-entry .c-note { width: 200px; }
.po-entry-body.one table.po-entry .c-act { width: 60px; }
table.po-entry td.c-cg { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
table.po-entry td { height: 28px; padding: 2px 4px; box-sizing: border-box; vertical-align: middle; }
table.po-entry td .ssel { width: 100%; min-width: 0; }
table.po-entry td :is(.ssel-in, input:not([type=checkbox]):not([type=radio]), select) { height: 22px; width: 100%; box-sizing: border-box; padding: 0 6px; font-size: 12px; font-weight: 700; color: var(--ink-2); border-radius: 5px; }
table.po-entry td .ssel-in { padding-right: 22px; }
table.po-entry td .btn.sm { height: 22px; line-height: 20px; }
table.po-entry td.auto { font-size: 12px; font-weight: 700; color: var(--ink-2); text-align: center; }
/* 최근 PO 참고 띠(단일 제품 포맷) */
.po-ref { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; margin: 0 0 10px; padding: 6px 10px; background: var(--bg); border: 1px solid var(--line); border-radius: 8px; font-size: 12px; color: var(--muted); }
.po-ref .kv .k { margin-right: 4px; }
.po-ref .kv b { color: var(--ink); font-weight: 800; font-variant-numeric: tabular-nums; }
/* DHPV PO 공유 드로어(rev20): 미리보기 표 = 목록 규격(행 26) — 고객사 70 · 품명 220 · 월 PO 90 · 납기 일수 70 · 잔여PO 90 · 재고 소진 90 = 630 */
.modal-overlay.drawer .modal-box:has(.po-share) { width: 700px !important; max-width: 90vw; }
table.po-share-tbl { table-layout: fixed; width: 630px; }
table.po-share-tbl th:nth-child(1), table.po-share-tbl td:nth-child(1) { width: 70px; }
table.po-share-tbl th:nth-child(2), table.po-share-tbl td:nth-child(2) { width: 220px; }
table.po-share-tbl th:nth-child(3), table.po-share-tbl td:nth-child(3) { width: 90px; }
table.po-share-tbl th:nth-child(4), table.po-share-tbl td:nth-child(4) { width: 70px; }
table.po-share-tbl th:nth-child(5), table.po-share-tbl td:nth-child(5) { width: 90px; }
table.po-share-tbl th:nth-child(6), table.po-share-tbl td:nth-child(6) { width: 90px; }
table.po-share-tbl td { height: 26px; padding: 1.6px 8px; box-sizing: border-box; } /* 실측 26.0 — 칩(22) 줄상자가 22.8이라 패딩 2/2면 26.8. 칩 없는 행은 height 26이 잡는다 */
table.po-share-tbl td .chip { height: 22px; line-height: 1; }
table.po-share-tbl td:nth-child(2) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.po-share .filterbar input[type=month] { height: 26px; }
table.po-share-tbl td .chip { vertical-align: top; } /* inline-block 칩의 베이스라인 여백(0.8px)이 행을 26.8로 키우던 것 */
/* ===== 09-11 rev21(사장님) ===== */
/* ① 일자별 PO 드로어 축소 대응 — 드로어를 줄이면 KPI 5칸·PO/출하 기록 2열이 찌그러지던 것. .modal-body가 컨테이너(container-type)라 컨테이너 쿼리로 접는다 */
@container (max-width: 980px) { .modal-body .kpis5 { grid-template-columns: repeat(3, 1fr); } }
@container (max-width: 640px) { .modal-body .kpis5 { grid-template-columns: repeat(2, 1fr); } }
@container (max-width: 820px) { .modal-body .cols2.cols2-even { grid-template-columns: 1fr; } }
.modal-body .cols2.cols2-even > .panel { min-width: 0; }
.modal-body .rec-table.rec-log th:nth-child(1), .modal-body .rec-table.rec-log td:nth-child(1) { min-width: 96px; white-space: nowrap; }
.modal-overlay.drawer .modal-box:has(.kpis5) { min-width: 520px; } /* 그 아래로는 줄이지 않는다(일자별 흐름 표 최소) */
/* ④ PO 입력 [+ 납기]: 조치 60 → 110([+ 납기][삭제]) — 표 960 → 1010 · 드로어 1000 → 1050. 납기 추가 행 = 품명 흐림 승계 */
table.po-entry td.act { padding: 2px 4px; white-space: nowrap; }
table.po-entry td.act .btn.sm { padding: 0 6px; }
table.po-entry td.act .btn.sm + .btn.sm { margin-left: 4px; }
table.po-entry tr.link td.auto { color: var(--dim); }
table.po-entry td.lk { text-align: left; padding-left: 10px; color: var(--muted); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ★09-12 사장님: 제품 일자별 드로어 = KPI 4칸(현재고+재고 소진 합침)만큼 폭 축소 1040 → 840. 일자별 흐름 표는 가로 스크롤(보이는 일자만 줄어든다).
   PO 기록·출하 기록 표 = 일자 칼럼이 넓었으니 수량 90·조치 100으로 줄여 두 표가 840 안에 균등(§4-D 정렬 유지). */
.modal-overlay.drawer .modal-box:has(.inv-daily) { width: 840px !important; max-width: 84vw; }
.modal-overlay.drawer .modal-box:has(.pl-prod) { width: 840px !important; max-width: 84vw; }
.modal-overlay.drawer .pl-prod .kvs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
:is(table.pl-prod-lot, table.pl-prod-po, table.pl-prod-ship) { table-layout: fixed; width: 100%; }
table.pl-prod-lot { min-width: 572px; }
table.pl-prod-po { min-width: 716px; }
table.pl-prod-ship { min-width: 634px; }
:is(table.pl-prod-lot, table.pl-prod-po, table.pl-prod-ship) :is(th, td) { white-space: nowrap; }
:is(table.pl-prod-lot, table.pl-prod-po, table.pl-prod-ship) td.el { overflow: hidden; text-overflow: ellipsis; }
:is(table.pl-prod-lot, table.pl-prod-po, table.pl-prod-ship) td { height: 22px; padding-top: 2px; padding-bottom: 2px; }
:is(table.pl-prod-lot, table.pl-prod-po, table.pl-prod-ship) td .chip { height: 22px; line-height: 1; }
:is(table.pl-prod-lot, table.pl-prod-po, table.pl-prod-ship) td.mu { color: var(--dim); font-weight: 400; }
table.pl-prod-po tr.cur td { background: var(--warn-bg); }
/* 09-12 5차 사장님: LOT 역추적 드로어 = 표 폭 축소분만큼 줄임(가장 넓은 생산 건 표 790 + 패딩 36 + 테두리 1 + 스크롤바 여유 17 → 850). xl 1040 규칙보다 우선.
   ★세로 스크롤바 17은 **폭에 더해 두기만** 한다(scrollbar-gutter 금지 — 자리를 항상 비우면 오른쪽 여백이 왼쪽보다 17 넓어진다, 사장님 지적).
     스크롤바 없음 = 17 여유를 표가 흡수(유동 칼럼 또는 고정 칼럼 비례 확대) / 있음 = 계산 폭 그대로. */
.modal-overlay.drawer .modal-box.xl:has(.lot-trace) { width: 850px !important; max-width: 84vw; }
.modal-overlay.drawer .modal-box.xl:has(.legacy-cert) { width: 1180px !important; max-width: 90vw; }
.modal-overlay.drawer .modal-box.xl:has(.legacy-pl) { width: 1180px !important; max-width: 90vw; }
td.clip { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lot-trace .hist-sec { margin-top: 12px; }   /* 드로어 구획 리듬 12(구 팝업 20) — 5구획×8 = 40 절약, 이력 3건 LOT이 6px 넘쳐 스크롤바가 생기던 것 해소 */
.modal-overlay.drawer .modal-box.xl:has(.dhpv-iqc-d) { width: 992px !important; max-width: 86vw; }
.dhpv-iqc-d .hist-sec { margin-top: 12px; }
.dhpv-iqc-photos { display: flex; flex-wrap: wrap; gap: 10px; }
.dhpv-iqc-photos figure { margin: 0; width: 150px; }
.dhpv-iqc-photos img { width: 150px; height: 112px; object-fit: cover; border: 1px solid var(--line); border-radius: 6px; cursor: zoom-in; display: block; }
.dhpv-iqc-photos figcaption { font-size: 11.5px; color: var(--muted); margin-top: 3px; }
table.dhpv-iqc-revs tr.on td { background: var(--done-row); font-weight: 700; }
/* ★드로어의 고정 머리(.pin-top): 팝업은 제목줄이 같은 스크롤 상자 안이라 top 55였지만, 드로어는 .modal-body만 스크롤하고 제목줄은 밖 —
   top 55가 남아 있으면 스크롤 0에서도 머리가 55px 아래로 밀려 그 아래 제목줄("치수 측정")을 덮고 위에 빈 공간이 생겼다(09-12 5차 사장님 "위 공간이 엄청 넓어"). 드로어 전부 top 0. */
.modal-overlay.drawer .pin-top { top: -18px !important; padding-top: 18px; margin-top: -18px; } /* 09-14 3차: 본문 패딩 18 위까지 올려 붙인다(0이면 머리 위에 18px 띠로 행이 지나갔다) */

/* ===== 09-12 5차(사장님): 생산 건 상세 드로어(.log-detail) = 740으로 좁힘 · 머리 5칸×2줄 · 이력 추가 2줄(내용 = 시각~불량수 끝단) · 세부 이력 내용 칼럼 … + 툴팁 + 클릭 펼침 · 마감 4칸×2줄(수량 줄 / 시각·가동 줄), 버튼은 마감 제목줄 오른쪽.
   폭 계산(740): 테두리 1 + 본문 패딩 36 + 스크롤바 17 → 686 · 패널 패딩 28 → 658(이력 표 · 마감 격자) · 이력 추가 상자 패딩 28 → 630 ≥ 격자 516 + 12 + 버튼 ≈ 100. ===== */
.modal-overlay.drawer .modal-box.xl:has(.log-detail) { width: 740px !important; max-width: 84vw; }
.log-detail .detail-head { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(4, minmax(0, 1fr)); gap: 6px 14px; align-items: center; }
.log-detail .detail-head .dkv { min-width: 0; }
.log-detail .detail-head .dkv .v { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 이력 추가 격자: 1줄 = 시각 110 · 구분 130 · 세부 유형 150 · 불량수 90(불량 유형일 때만 표시, 자리는 고정) / 2줄 = 내용(1~4열 끝까지) · [+ 이력 추가](5열, 바닥 정렬) */
.log-detail .ev-add-grid, .log-detail .ev-add-grid.has-extra { grid-template-columns: 110px 130px 150px 90px max-content; grid-template-rows: auto auto; gap: 8px 12px; }
.log-detail .ev-add-grid > .field:nth-child(1) { grid-area: 1 / 1; }
.log-detail .ev-add-grid > .field:nth-child(2) { grid-area: 1 / 2; }
.log-detail .ev-add-grid > .field:nth-child(3) { grid-area: 1 / 3; }
.log-detail .ev-add-grid > .ev-extra { grid-area: 1 / 4; }
/* 내용 = 시각~세부 유형 끝단(1~3열) · 버튼은 바로 옆 4열(90 ≥ 버튼 88) / 불량 유형이라 불량수 칸이 보이면 내용이 4열 끝까지, 버튼은 5열로 */
/* 09-21 사장님: 내용칸이 오른쪽 공간을 끝까지 쓰고, [+ 이력 추가]는 그 오른쪽 끝에 바닥 정렬 */
.log-detail .ev-add-grid > .ev-note-field { grid-area: 2 / 1 / 3 / 5; }
.log-detail .ev-add-grid > .ev-add-btn { grid-area: 2 / 5; align-self: end; justify-self: stretch; }
.log-detail .ev-add-grid.has-extra > .ev-note-field { grid-column: 1 / 5; }
.log-detail .ev-add-grid.has-extra > .ev-add-btn { grid-column: 5; }
.log-detail .ev-add-btn, .log-detail .cb-btn { height: 32px; padding: 0 14px; font-size: 12.5px; }
.log-detail .ev-add-grid textarea { min-height: 48px; }
/* ★09-21 사장님: 반드시 입력이 필요한 칸 = 비어 있는 동안 노랑. .cb-cell.cb-in input의 흰 배경보다 뒤에 와야 이긴다. */
.cb-cell.cb-in input.f-empty { background: var(--warn-bg); border-color: var(--warn); }
/* 세부 이력 표 내용 칼럼(잔여 ≈ 294): 한 줄 … · 마우스 = title 툴팁 · 클릭 = 펼침(.open)/접힘 */
.log-detail .ev-table td.ev-note { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.log-detail .ev-table td.ev-note.open { white-space: pre-wrap; word-break: break-word; height: auto; }
/* 마감: 4칸 격자 × 2줄(.cb-qty 수량 / .cb-time 시각·가동) · 열이 많아 5칸 이상이면 다음 줄로 · 버튼 묶음은 제목줄 오른쪽(meta 뒤) */
.log-detail .close-bar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px 12px; align-items: end; }
.log-detail .close-bar + .close-bar { margin-top: 8px; }
.log-detail .cb-cell { min-width: 0; }
.log-detail .close-panel .panel-head .cb-actions { margin-left: 0; }                       /* meta가 있으면 meta의 auto 마진이 오른쪽으로 민다 */
.log-detail .close-panel .panel-head:not(:has(.meta)) .cb-actions { margin-left: auto; }   /* meta 없음(마감 전 — 안내 문구 삭제 후) = 버튼이 직접 오른쪽 끝으로 */
/* 수리의뢰·수리 확인 배너 = 1줄(내용 …) + 클릭 메모(09-12 5차 사장님 — 내용이 길면 배너가 뚱뚱해져 구조가 깨졌다) */
.req-item { display: flex; flex-direction: column; }
.req-item .req-line { flex-wrap: nowrap; cursor: pointer; }
.req-item .req-line .req-sym { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1 1 0; min-width: 40px; }
.req-item .req-memo { display: none; margin-top: 4px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); font-size: 12.5px; }
.req-item.open .req-memo { display: block; }
.req-memo .rm-row { display: flex; gap: 8px; line-height: 1.6; }
.req-memo .rm-k { color: var(--muted); flex: 0 0 52px; }
.req-memo .rm-body { white-space: pre-line; word-break: break-word; margin-top: 4px; font-weight: 700; line-height: 1.6; }

/* ===== 09-12 5차(사장님): 검사 상세 드로어(.inspd) = 그룹 100 + 항목 220(−40) + 관리구분 90 + 기준 70 + 공차 60·60 + SPL 1·2(70×2) = 740 → 794(테두리 1 + 패딩 36 + 스크롤바 17). 내부 관리 칼럼(110) 있으면 904.
   SPL 3 이후·Avg/Max/Min·비고·삭제는 표 안 가로 스크롤, 그룹·항목은 sticky. 칼럼 폭은 colgroup(.ch) — 구 nth-child 폭 규칙은 해제. ===== */
.modal-overlay.drawer .modal-box.w90:has(.inspd) { width: 754px !important; max-width: 84vw; }
.modal-overlay.drawer .modal-box.w90:has(.inspd.has-internal) { width: 864px !important; }
/* 치수 표 = 남는 높이를 전부(드로어 세로 flex) — 표 안 세로 스크롤 하나만 남기고 본문 스크롤은 안 생긴다(본문 스크롤바가 생기면 SPL 2가 17 가려진다).
   구 max-height 캡(930/100vh−340)은 해제. 사진·문제점이 아주 길면 표 최소 240에서 본문이 스크롤. */
.inspd > .hist-sec:has(.dim-table.ch) { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; margin-top: 12px; }
.inspd > .hist-sec:has(.dim-table.ch) > div:last-child { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.inspd > .hist-sec:has(.dim-table.ch) .table-wrap { flex: 1 1 auto; min-height: 0; max-height: none !important; }
.inspd > .hist-sec:has(.dim-table.ch) > div:has(.itab-bar) { margin: 0 0 8px !important; }   /* 검사축·Cavity 칩 줄: 제목줄 아래 0 · 표 위 8 */
.inspd .hist-sec { margin-top: 12px; }                                                    /* 드로어 구획 리듬 12(구 팝업 20) */
.inspd .modal-actions { margin-top: 12px !important; }
.inspd .detail-head { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: 6px 14px; align-items: center; }
.inspd .detail-head .dkv { min-width: 0; }
.inspd .detail-head .dkv .v { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dim-table.ch { min-width: 0; }
.dim-table.ch :is(th, td) { width: auto !important; }               /* 폭 = colgroup(colhide) — 숨겨도 다음 칼럼이 안 밀린다 */
.dim-table.ch td.mg-td .chip { min-width: 66px; }                    /* 관리구분 칩(구 nth-child(3) 규칙 대체) */
.dim-table.ch .stk { position: sticky; z-index: 1; background: var(--panel); }
.dim-table.ch thead th.stk { z-index: 3; background: var(--bg); }    /* 머리 = 위·왼쪽 동시 고정(모서리) */
.dim-table.ch .stk-end { border-right: 1px solid var(--line-2); }     /* 고정 구간 끝 세로선 */
.dim-table.ch tbody tr:hover td.stk { background: var(--hover); }
.inv-daily .kpi .v .chip.kpi-run { margin-left: 8px; vertical-align: middle; height: 20px; font-size: 11.5px; }
.inv-daily .rec-table.rec-log th:nth-child(2), .inv-daily .rec-table.rec-log td:nth-child(2) { width: 90px; }
.inv-daily .rec-table.rec-log th:nth-child(3), .inv-daily .rec-table.rec-log td:nth-child(3) { width: 100px; }
/* 840 드로어(본문 803)는 컨테이너 쿼리 980/820 아래라 KPI 3칸·기록 2표 세로쌓임이 됐다 — 이 드로어는 4칸·2열 유지(600 아래로 줄이면 기존 규칙대로 접힘) */
@container (min-width: 600px) and (max-width: 980px) { .modal-body .inv-daily .kpis5.k4 { grid-template-columns: repeat(4, 1fr); } .modal-body .inv-daily .cols2.cols2-even { grid-template-columns: 1fr 1fr; } }
table.po-entry td .btn.ghost.sm { height: 22px; line-height: 20px; } /* style.css `.table-wrap td .btn.ghost.sm`(20, 특이도 0,3,1)이 [+ 납기]만 20으로 깎던 것 — §4-S 셀 안 버튼 22 */

/* ===== 09-12 4차(사장님 "§9 유산 2·16번 한 번에 스윕"): §4-G 생산 건 팝업 규격(입력·버튼 38 · 행 32 · 본문 13.5/15) → v5 규격(입력 26 · 버튼 32/sm 26 · 표 안 22 · 행 26 · 12.5)
   대상 = 생산 건 상세(.ev-panel/.ev-add/.close-panel) · 생산 이력 상세·금형 차트 이력 표(.ev-view/.rep-table/.qi-table/.run-table) · 검사 상세 머리(.dkv). style.css §4-G 블록은 그대로 두고 여기서 덮는다(스코프 동일, 뒤 규칙 우선). ===== */
.dkv, .dkv .k { font-size: 13px; }                                                       /* 헤더 kv 15 → 13(§9-20 v5 스케일) */
.dkv-spm { height: 26px; width: 70px; padding: 0 8px; font-size: 12.5px; box-sizing: border-box; }
.ev-add-grid .lbl, .cb-cell .lbl { font-size: 12px; }
.ev-add-grid :is(input, select, textarea) { height: 26px; font-size: 12.5px; padding: 0 8px; box-sizing: border-box; }
.ev-note-field textarea { padding: 4px 8px; line-height: 16px; }                          /* 1줄 = 16 + 4/4 = 24 ≤ 26, 줄바꿈 시 autoGrow */
.ev-add-grid .ev-add-btn, .ev-add .row .btn { height: 32px; font-size: 12.5px; }
.qchips .qc { height: 26px; padding: 0 9px; font-size: 12px; }                           /* 빠른 기록 칩 버튼 = sm 26 */
.cb-cell input, .mval { height: 26px; font-size: 12.5px; padding: 0 8px; box-sizing: border-box; }
.cb-btn { height: 32px; padding: 0 16px; font-size: 12.5px; }
.cb-cell { gap: 4px; } .ev-add-grid .field { gap: 4px; }
/* 이력 표 4종 + 열람 표: 행 26(§4-S) · 머리 30 · 본문 12.5 · 표 안 버튼 22 · 칩 18 */
:is(.ev-table, .ev-view, .rep-table, .qi-table, .run-table) th { height: 30px; padding: 0 8px; font-size: 12px; }
:is(.ev-table, .ev-view, .rep-table, .qi-table, .run-table) td { height: 26px; padding: 2px 8px; font-size: 12.5px; box-sizing: border-box; }
:is(.ev-table, .ev-view, .rep-table, .qi-table, .run-table) td .btn.sm, .table-wrap :is(.ev-table, .rep-table) td .btn.ghost.sm { height: 22px; line-height: 20px; font-size: 11.5px; padding: 0 8px; }
:is(.ev-table, .ev-view, .rep-table, .qi-table, .run-table) td .chip { height: 18px; font-size: 11.5px; padding: 0 6px; line-height: 1; }
.dim-table .meas, .dim-table .note-in { height: 22px; padding: 0 6px; font-size: 12px; }  /* 검사 상세 치수표 셀 안 입력 24 → 22(§4-S) */
/* 금형 차트 이력 표 기본 행수(수리 7 · 검사/가동 4) = 머리 30 + 26×n */
.table-wrap.rows7, .hist-sec .table-wrap.rows7 { max-height: min(212px, calc(100vh - 340px)); }
.table-wrap.rows4, .hist-sec .table-wrap.rows4 { max-height: min(134px, calc(100vh - 340px)); }

/* ===== 09-14(사장님 "남은 드로어·팝업 폭 축소 + 2줄 격자 머리 스윕 — 09-12 5차와 같은 로직"): 드로어 7종 = 폭은 표 고정 칼럼 합 + 본문 패딩 36 + 테두리 1 + 세로 스크롤바 17 · 머리 = N칸×2줄 격자 · 구획 리듬 12.
   검사 입력(.insp-in) 794 = 항목 220 + 관리구분 90 + 기준(±공차) 150 + SPL 4×70 = 740 (내부 관리 110 보이면 904) — 검사 상세(.inspd)와 같은 치수표 계열·같은 폭. SPL 5~·비고는 표 안 가로 스크롤, 항목 sticky.
   수검(.iqc-in) 794 = 그룹 100 + 항목 220 + 관리구분 90 + 기준 70 + 공차 60·60 + SPL 2×70 = 740 (내부 관리 110 → 904) — 구 80/250/70/130을 검사 상세 규격으로. 수검 결과·외관 = 좌우 2단(최소 858) → 2줄 격자.
   금형 NG 카드(.mold-card) 794 — 같은 계열(NG 측정값 표 = dim-table). 검사 이력(.insp-hist) 894 = 고정 440 + 문제점·비고 잔여 400(min-width 980 폐지). PL 빌더 884 = 계획 표 160·110·90·90·90 + 조치 290 = 830.
   금형 차트(.mold-chart) 1134 = 가동 이력 표 고정열 1040 + 스페이서 40. LOT 구성 820 유지(766 = 고정 580 + LOT No. 186 — 칼럼만 고정). ===== */
.modal-overlay.drawer .modal-box.lgx:has(.insp-in) { width: 771px !important; max-width: 84vw; }
.modal-overlay.drawer .modal-box.lgx:has(.insp-in .insp-table .in-col) { width: 881px !important; }
.modal-overlay.drawer .modal-box.lgx:has(.insp-in.pm-in) { width: 991px !important; }
.modal-overlay.drawer .modal-box.xxl:has(.iqc-in) { width: 771px !important; max-width: 84vw; }
.modal-overlay.drawer .modal-box.xxl:has(.iqc-in .oqc-meas .in-col) { width: 881px !important; }
.modal-overlay.drawer .modal-box.lg:has(.mold-card) { width: 794px !important; max-width: 84vw; }
.modal-overlay.drawer .modal-box.wide:has(.insp-hist) { width: 894px !important; max-width: 84vw; }
.modal-overlay.drawer .modal-box.xxl:has(.mold-chart) { width: 1064px !important; max-width: 84vw; }
/* 머리 격자 = N칸 × 2줄(품명 1.6fr 첫 칸 · 값 … + title) — 생산 건 상세·검사 상세와 같은 문법 */
:is(.insp-in, .iqc-in) .pin-top > .detail-head, .mold-card > .detail-head { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: 6px 14px; align-items: center; }
:is(.insp-in, .iqc-in) .pin-top > .detail-head .dkv, .mold-card > .detail-head .dkv { min-width: 0; }
:is(.insp-in, .iqc-in) .pin-top > .detail-head .dkv .v, .mold-card > .detail-head .dkv .v { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mold-chart .chart-head.mold-head { grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.6fr) minmax(0, 1fr); gap: 6px 14px; }   /* 금형번호·고객사·제품군·품명·차수 / 후처리·상태·직전 가동일·비고(2칸) */
.mold-chart .chart-head.mold-head > .kv { min-width: 0; }
.mold-chart .chart-head.mold-head > .kv:nth-child(9) { grid-column: span 2; }
/* 구획 리듬 12(드로어 — 구 팝업 20 · 카드 18) */
:is(.insp-in, .iqc-in, .mold-chart) .hist-sec { margin-top: 12px; }
.mold-card .mc-sec { margin-top: 12px; }
:is(.insp-in, .iqc-in) .modal-actions { margin-top: 12px !important; }
/* 수검 결과 + 외관 검사 = 2줄 격자(1줄 필드 · 2줄 외관 표) */
.iqc-in .top-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; margin-bottom: 12px; }
/* 검사 입력 치수 표: 항목 220(구 160) · 내부 관리 110(구 150) · 항목 sticky(가로 스크롤 시 고정) */
.insp-in .insp-table th:nth-child(1), .insp-in .insp-table td:nth-child(1) { width: 180px; }
.insp-in .insp-table .in-col { width: 110px; }
/* 수검 측정 표: 그룹 100 · 항목 220 · 관리구분 90 · 내부 관리 110(검사 상세 규격) · 그룹+항목 sticky */
.iqc-in .oqc-meas th:nth-child(1), .iqc-in .oqc-meas td:nth-child(1) { width: 100px; }
.iqc-in .oqc-meas th:nth-child(2), .iqc-in .oqc-meas td:nth-child(2) { width: 180px; }
.iqc-in .oqc-meas th:nth-child(3), .iqc-in .oqc-meas td:nth-child(3) { width: 90px; }
.iqc-in .oqc-meas .in-col { width: 110px; }
/* LOT 구성 표 = 고정 칼럼(담기 40 · LOT No. 잔여 · 열 50 · 금형 80 · 상태 80 · LOT 수량 80 · 잔량 80 · 성적서 90 · 담을 수량 80) */
table.pl-pick { table-layout: fixed; width: 100%; }
table.pl-pick th:nth-child(1), table.pl-pick td:nth-child(1) { width: 40px; }
table.pl-pick th:nth-child(3), table.pl-pick td:nth-child(3) { width: 50px; }
table.pl-pick th:nth-child(4), table.pl-pick td:nth-child(4), table.pl-pick th:nth-child(5), table.pl-pick td:nth-child(5) { width: 80px; }
table.pl-pick th:nth-child(8), table.pl-pick td:nth-child(8) { width: 90px; }
table.pl-pick td.lot-no { overflow: hidden; text-overflow: ellipsis; }
/* 검사 입력도 2줄 격자(2단이면 외관 특이사항 칸 48px — 실측) · 결과 필드 컨트롤 = 필터 규격 26 · 제목줄 안 측정 SPL 셀렉트 = 22 */
.insp-in .top-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; margin-bottom: 12px; }
:is(.insp-in, .iqc-in) .top-grid :is(input:not(.meas), select:not(.meas), .ssel-in) { height: 26px; padding: 0 8px; font-size: 12.5px; box-sizing: border-box; }
:is(.insp-in, .iqc-in) .panel-head .smp-pick select { height: 22px; padding: 0 6px; font-size: 12px; box-sizing: border-box; }
table.pl-plan td .btn.ghost.sm { height: 22px; line-height: 20px; } /* 지연 그룹 머리줄 [펼치기] — style.css `.table-wrap td .btn.ghost.sm`(20)이 깎던 것, §4-S 셀 안 버튼 22 */
:is(.insp-in, .iqc-in) .pin-top > .detail-head .dkv .k, .mold-card > .detail-head .dkv .k { white-space: nowrap; flex: 0 0 auto; } /* 라벨은 절대 두 줄로 안 꺾인다("검사\n일" 실측) — 잘림은 값(.v …)이 담당 */
/* 검사 입력·수검 = 811(내부 921): 검사 상세(794)와 달리 표 아래에 구획(직전 검사·최근 순회검사·첨부)이 있어 본문 스크롤바 17 + 치수표 자체 세로 스크롤바 17 = 34 — 실측 794에서 SPL 2(수검)·SPL 4(검사 입력)가 17px 잘렸다 */

/* ===== 09-14 2차(사장님 4항목): ① 검사 입력·수검 측정 표 칼럼 숨기기(colhide) ② 드로어 폭 넓히기 ③ 드로어 층계 ===== */
/* ① 폭 = colgroup(.ch — 구 nth-child 폭 해제) · sticky = data-ck(칼럼을 숨겨도 순서가 밀리지 않는다) · 항목 왼쪽 offset = --stk2(그룹 칼럼 유무) */
:is(.oqc-meas, .insp-table).ch :is(th, td) { width: auto !important; }
.insp-in .insp-table.ch :is(th, td)[data-ck="item"] { position: sticky; left: 0; z-index: 1; background: var(--panel); border-right: 1px solid var(--line-2); }
.insp-in .insp-table.ch thead th[data-ck="item"] { z-index: 3; background: var(--bg); }
.iqc-in .oqc-meas.ch :is(th, td)[data-ck="grp"] { position: sticky; left: 0; z-index: 1; background: var(--panel); }
.iqc-in .oqc-meas.ch :is(th, td)[data-ck="item"] { position: sticky; left: var(--stk2, 100px); z-index: 1; background: var(--panel); border-right: 1px solid var(--line-2); }
.iqc-in .oqc-meas.ch thead th[data-ck="grp"], .iqc-in .oqc-meas.ch thead th[data-ck="item"] { z-index: 3; background: var(--bg); }
.dim-meas-head .colhide-host:empty { display: none; }
/* ③ 층계(레퍼런스: Base UI Drawer "뒤로 밀린 조상 창은 옅어진다" · PatternFly 드로어 그림자 · Vaul 중첩 스케일) — 우리 구조(옆으로 쌓기)에 맞춰 톤·그림자 단계로:
   d0(맨 위 = 클릭한 창) 진한 그림자 + 흰 제목줄 + 제목줄 밑 파랑 띠 / d1·d2·d3 = 그림자 한 단계씩 옅게 + 제목줄 회색 한 단계씩. 왼쪽 변 = 6px 단 그늘(::before) + 진한 선. 손잡이 = 가운데 그립(hover) */
.modal-overlay.drawer .modal-box { 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); }
.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.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 · 가운데 그립(창에 마우스를 올리면 보임, 손잡이 위에서 파랑) */
.modal-overlay.drawer .modal-box .drsz { width: 8px; }
.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); }

/* ===== 09-14 3차(사장님 "세로 스크롤하면 표 머리가 안 붙는다 — 다 고쳐"): 드로어 표 머리 고정. ui.js syncDrawerTables가 표마다 판정 —
   가로로 안 넘치는 표 = wrap overflow visible → thead가 본문 스크롤에 붙는다(top = .pin-top 높이 --pin-h) / 가로로 넘치는 표 = .inscroll → wrap 내부 스크롤(머리·고정 칼럼이 안에서 붙음) ===== */
.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); } /* 본문 패딩 18 위로 — .pin-top과 같은 기준 */
.modal-overlay.drawer .modal-body .table-wrap.inscroll { overflow: auto; max-height: calc(100vh - 220px); } /* 최대 높이가 지정된 표(inline·rowsN)는 그 값이 이긴다(inline) — 가로 넘침 표만 이 상한 */
.modal-overlay.drawer .modal-body .table-wrap.inscroll.rows7 { max-height: min(212px, calc(100vh - 340px)); }
.modal-overlay.drawer .modal-body .table-wrap.inscroll.rows4 { max-height: min(134px, calc(100vh - 340px)); }
/* 검사 상세 열람(.modal-actions 없음)도 세로 flex — 치수표 wrap이 남는 높이로 묶여 안에서 스크롤(09-12 5차 편집 모드와 동일) */
.modal-overlay.drawer .modal-body > .inspd { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }

/* ===== 09-14 4차(사장님): ② 팝업 크기 조절 8방향 손잡이 · ③ 치수 비교 드로어(.dimcmp) ===== */
/* 손잡이 = sticky(팝업이 스크롤 상자라 absolute는 내용과 같이 밀린다): 위 변(.rsz-n, 6px 띠 — 양 끝 16px는 모서리) · 좌우 변(.rsz-x, 높이 0 앵커 + 100vh 세로 띠) · 아래 변(.rsz-s) · 왼쪽 아래(.rsz 기존) */
.modal-box.resizable .rsz-h { position: sticky; left: 0; width: 100%; z-index: 6; }
.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; }
.modal-box.resizable .rsz-n::before, .modal-box.resizable .rsz-n::after, .modal-box.resizable .rsz-s::after { content: ''; position: absolute; top: 0; width: 16px; height: 16px; }
.modal-box.resizable .rsz-n::before { left: 0; cursor: nwse-resize; } .modal-box.resizable .rsz-n::after { right: 0; cursor: nesw-resize; }
.modal-box.resizable .rsz-s::after { right: 0; top: auto; bottom: 0; cursor: nwse-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(100% 0, 0 100%, 100% 100%); }
/* 치수 비교 드로어: ☐28 · 그룹 90 · 항목 180 · 기준 130 · 현재 90 · 비교 90 · Δ 90 · 최근N 90 · Cpk 60 · 추이 150 = 998 → 1052(+36+1+17) */
.modal-overlay.drawer .modal-box:has(.dimcmp) { width: 1012px !important; max-width: 84vw; }
.dimcmp .dc-bar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 0 0 8px; }
.dimcmp .dc-bar .lbl { font-size: 12px; color: var(--muted); font-weight: 700; }
.dimcmp .dc-bar select, .dimcmp .dc-bar .ssel-in { height: 26px; padding: 0 8px; font-size: 12px; font-weight: 700; box-sizing: border-box; }
.dimcmp table.dc-table { table-layout: fixed; width: 100%; }
.dimcmp table.dc-table td { height: 26px; padding: 0 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dimcmp table.dc-table td.num, .dimcmp table.dc-table th.num { text-align: right; }
.dimcmp table.dc-table tr.on td { background: var(--brand-bg); }
.dimcmp table.dc-table tr.clickable { cursor: pointer; }
/* (구 .delta 규칙 폐지 — 전역 .delta 칩 클래스와 충돌) */
.dimcmp td.spark svg { display: block; }
.dimcmp .dc-chart { margin-top: 12px; border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; background: var(--panel); }
.dimcmp .dc-chart svg { width: 100%; height: 240px; display: block; }
.dimcmp .dc-stats { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin: 8px 0 0; }
.dimcmp .dc-stats > div { border: 1px solid var(--line); border-radius: 8px; background: var(--bg); padding: 5px 10px; min-width: 0; }
.dimcmp .dc-stats small { display: block; font-size: 11.5px; color: var(--muted); font-weight: 700; white-space: nowrap; }
.dimcmp .dc-stats b { display: block; font-size: 14px; font-weight: 800; white-space: nowrap; }
.dimcmp .dc-stats > div.neg b { color: var(--danger); } .dimcmp .dc-stats > div.warn b { color: var(--warn-ink); }

/* ===== 09-14 5차(사장님 8항목): 치수 비교 = 팝업 1160 · 그룹 칼럼 폐지 · 필터 2줄 틀 고정(.dc-pin) · Δ 값만 · Cpk 2칸(시료수 등급) · 추이 200(파랑 톤) · 행 펼침(추이/X̄-R) ===== */
.modal-box.xl:has(.dimcmp) { width: min(1120px, 92vw); max-width: 1120px; min-width: 1040px; }
.modal-box:has(.dimcmp) { scrollbar-gutter: stable; }
.dimcmp .dc-pin { padding-bottom: 0; margin-top: -18px; padding-top: 18px; }   /* 필터 2줄 + 제목줄 = 고정 머리(.pin-top) — 본문 패딩 위까지 올려 붙인다(드로어와 같은 트릭) · 표는 fitWrap 높이 안에서 내부 스크롤 */
.dimcmp .dc-pin .panel-head { margin-bottom: 6px; }
.dimcmp .dc-bar { display: flex; gap: 8px; align-items: center; flex-wrap: nowrap; margin: 0 0 8px; min-height: 26px; }
.dimcmp .dc-bar .lbl { font-size: 12px; color: var(--muted); font-weight: 700; white-space: nowrap; }
.dimcmp .dc-bar select, .dimcmp .dc-bar .ssel-in { height: 26px; padding: 0 8px; font-size: 12px; font-weight: 700; box-sizing: border-box; }
.dimcmp .dc-bar .btn.sm { height: 26px; }
.itab-bar { margin: 8px 0; gap: 6px; }
.itab { height: 22px; padding: 0 9px; font-size: 12px; border-radius: 6px; }
.itab-bar .btn, .itab-bar .btn.sm { height: 22px; font-size: 11.5px; padding: 0 8px; }
.dimcmp .dc-bar .btn .ng { color: var(--danger); font-weight: 800; }
.dimcmp .table-wrap { overflow: auto; }   /* max-height = JS fitWrap(상자 − 제목줄 − 고정 머리) */
.dimcmp table.dc-table { table-layout: fixed; width: 100%; }
.dimcmp table.dc-table td { height: 26px; padding: 0 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 700; }
.dimcmp table.dc-table td.num, .dimcmp table.dc-table th.num { text-align: right; }
.dimcmp table.dc-table tr.on td { background: var(--brand-bg-2); }
.dimcmp table.dc-table tr.clickable { cursor: pointer; }
.dimcmp td.dlt.neg { color: var(--danger); }   /* Δ = 다른 칸과 같은 폰트, 현재 값이 치수 NG면 빨강(09-14 3차) */
.dimcmp td.cpk.warn { color: var(--warn-ink); } .dimcmp td.cpk.neg { color: var(--danger); } .dimcmp td.cpk.ok { color: var(--ok-ink); } .dimcmp td.muted { color: var(--muted); font-weight: 400; }
.dimcmp td.spark { padding: 1px 4px; line-height: 0; } .dimcmp td.spark svg { display: block; }   /* 스파크 24 + 1/1 = 행 26 */
.dimcmp tr.dc-x > td { height: auto; padding: 8px 10px 12px; white-space: normal; background: var(--bg-soft); border-bottom: 2px solid var(--brand-line); }
.dimcmp .dc-detail { border: 1px solid var(--brand-line); border-radius: 8px; background: #fff; padding: 8px 12px 10px; }
.dimcmp .dc-detail .panel-head { margin-bottom: 4px; }
.dimcmp .dc-detail svg { width: 100%; display: block; }
.dimcmp .dc-stats { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; margin: 8px 0 0; }
.dimcmp .dc-stats > div { border: 1px solid var(--brand-line); border-radius: 8px; background: var(--brand-bg); padding: 5px 10px; min-width: 0; }
.dimcmp .dc-stats small { display: block; font-size: 11.5px; color: var(--muted); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dimcmp .dc-stats b { display: block; font-size: 14px; font-weight: 800; white-space: nowrap; }
.dimcmp .dc-stats > div.neg b { color: var(--danger); } .dimcmp .dc-stats > div.warn b { color: var(--warn-ink); } .dimcmp .dc-stats > div.ref b { color: var(--muted); }
/* 09-14 3차(사장님): 비교 요약 줄(.dc-sum — 현재 ↔ 비교 · 범위 · Cpk 풀) — 필터 아래 고정 머리 안 */
.dimcmp .dc-sum { display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; margin: 0 0 8px; padding: 6px 10px; border: 1px solid var(--brand-line); border-radius: 8px; background: var(--brand-bg); font-size: 12px; }
.dimcmp .dc-sum .k { color: var(--muted); font-weight: 700; } .dimcmp .dc-sum .v { font-weight: 700; color: var(--ink); } .dimcmp .dc-sum .arrow { color: var(--brand); font-weight: 800; padding: 0 4px; } .dimcmp .dc-sum .sep { color: var(--muted); }
.panel-head.jump-hit, .jump-hit { box-shadow: inset 0 -2px 0 var(--brand); transition: box-shadow .3s; }
.dimcmp .dc-bar .grp-r { margin-left: auto; display: inline-flex; gap: 8px; align-items: center; }
.dimcmp table.dc-table td.in-col { background: var(--in-tint); }
.dimv-table th.in-col, .dimv-table td.in-col { width: 110px; }
.dimv-table td.in-col { background: var(--in-tint); }
.dimv-table td:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dimcmp .dc-sum { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dimcmp .dc-sum .k { margin-right: 4px; } .dimcmp .dc-sum .sep { margin: 0 5px; }
.prob-table th:nth-child(2), .prob-table td:nth-child(2) { width: 180px; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.dimcmp .dc-bar > .lbl:first-child { width: 62px; flex: 0 0 auto; }
.dimcmp .dc-bar select.box-r { width: 130px; }
.dimcmp .segtab span.dis { color: var(--dim); opacity: .5; cursor: default; }
.modal-head select.dc-set { margin-left: auto; margin-right: 8px; height: 26px; width: 150px; padding: 0 8px; font-size: 12px; font-weight: 700; box-sizing: border-box; }
.dimcmp .dc-stats > div.ok b { color: var(--ok-ink); }
.dimcmp td.spark svg { display: block; }
.modal-overlay.drawer .modal-box:has(.rq-list-d) { width: 1026px !important; max-width: 84vw; }
.modal-overlay.drawer .modal-box:has(.rq-verify-d) { width: 904px !important; max-width: 84vw; }
.modal-overlay.drawer .modal-box.w90:has(.rep-view) { width: 794px !important; max-width: 84vw; }
.modal-overlay.drawer .modal-box:has(.reps-all) { width: 794px !important; max-width: 84vw; }
.modal-overlay.drawer .modal-box.w90:has(.rep-new) { width: 1134px !important; max-width: 92vw; }
.rep-view > .detail-head { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: 6px 14px; align-items: center; }
.rep-view > .detail-head .dkv { min-width: 0; margin-left: 0 !important; }
.rep-view > .detail-head .dkv .k { white-space: nowrap; flex: 0 0 auto; }
.rep-view > .detail-head .dkv .v { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vm-table.cg :is(th, td) { width: auto !important; }
.vm-table td, .rr-table td { height: 26px; }
.modal-head .hd-tool { margin-left: auto; margin-right: 8px; height: 26px; }
.modal-head .hd-tool + .hd-tool, .modal-head .hd-tool + .dc-set { margin-left: 0; }
.modal-overlay.drawer .modal-box:has(.meas-import) { width: 660px !important; max-width: 84vw; }
.modal-overlay.drawer .modal-box:has(.meas-preview) { width: 1010px !important; max-width: 84vw; }
.meas-import .guide { margin: 0 0 10px; padding: 0; list-style: none; font-size: 12px; color: var(--muted); }
.meas-import .guide li { display: flex; gap: 8px; line-height: 20px; } .meas-import .guide li b { color: var(--ink-2); flex: 0 0 76px; }
.meas-import .drop-zone { border: 1px dashed var(--brand-line); border-radius: 8px; padding: 14px; text-align: center; background: var(--brand-bg); cursor: pointer; margin-bottom: 8px; font-size: 12.5px; color: var(--ink-2); }
.meas-import .drop-zone b { color: var(--brand); margin-right: 4px; } .meas-import .drop-zone.over { border-color: var(--brand); background: #fff; }
.meas-import .drop-files { font-size: 12px; color: var(--ink-2); margin: 0 0 8px; }
.meas-preview td { height: 26px; padding: 1px 8px; } .meas-preview td select, .meas-preview .ssel-in { height: 26px; font-size: 12px; padding: 0 8px; box-sizing: border-box; }
.kv-table td { height: 26px; padding: 2px 10px; }
.modal-overlay.drawer .modal-box.w90:has(.rep-new) { width: 760px !important; }
.rep-new .rep2-grid { grid-template-columns: 1fr; }
.rep-new .field input:not([type=file]):not([type=checkbox]), .rep-new .field select, .rep-new .ssel-in, .rep-new input[type=date] { height: 26px; padding: 0 8px; font-size: 12.5px; box-sizing: border-box; }
.rep-new input[type=file] { height: 26px; font-size: 12px; }
.rep-new .panel-head { min-height: 26px; } .rep-new .panel-head .btn { height: 22px; font-size: 11.5px; padding: 0 8px; }
.modal-overlay.drawer .modal-box:has(.bom-d) { width: 1033px !important; max-width: 92vw; }
.bom-d .tree-part, .bom-d .tree-stage { height: 26px; }
.bom-d .panel-head select, .bom-d .panel-head input { height: 26px; padding: 0 8px; font-size: 12px; box-sizing: border-box; }
.bom-d .tree-part .chip { height: 22px; padding: 0 8px; font-size: 11.5px; border-radius: 6px; }
.bom-d .panel-head .btn { height: 22px; font-size: 11.5px; padding: 0 8px; }
.meas-preview td { padding: 0 8px; } .meas-preview td .ssel-in, .meas-preview td select { height: 24px; }
.drop-zone { border: 1px dashed var(--brand-line); border-radius: 8px; padding: 12px; text-align: center; background: var(--brand-bg); cursor: pointer; margin-bottom: 8px; font-size: 12.5px; color: var(--ink-2); }
.drop-zone b { color: var(--brand); margin-right: 4px; } .drop-zone.over { border-color: var(--brand); background: #fff; }
.meas-drop-over { outline: 2px dashed var(--brand); outline-offset: -2px; background: var(--brand-bg); }
.drop-files { font-size: 12px; color: var(--ink-2); margin: 0 0 4px; word-break: break-all; }
.rep-new .grow-sel { flex: 1 1 auto; min-width: 140px; width: auto !important; } .rep-new .grow-sel .ssel-in { width: 100% !important; box-sizing: border-box; }
.rep-new .rep2-foot .panel h2 { margin-bottom: 8px; }
.kv-table td.neg, .kv-table .neg { color: var(--danger); font-weight: 700; }
.mold-card .panel-head, .mold-card .row.gap { gap: 6px; }
.rr-table td.ev-note.clip { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 0; }
.modal-overlay:not(.drawer) .modal-box.w90:has(.inspd) { width: min(1100px, 92vw); }
.rep-new .pin-top { margin-top: 0; }
.modal-overlay.drawer .modal-box:has(.qh-insp) { width: 830px !important; max-width: 90vw; }
.modal-overlay.drawer .modal-box:has(.qh-verify) { width: 656px !important; max-width: 90vw; }
.modal-overlay.drawer .modal-box:has(.qh-trial) { width: 874px !important; max-width: 90vw; }
.qh-verify .qact-table th:last-child, .qh-verify .qact-table td:last-child { width: 0; padding: 0; border: 0; }
.qh-trial table { table-layout: fixed; width: 100%; }
.qh-trial th:nth-child(1), .qh-trial td:nth-child(1) { width: 70px; } .qh-trial th:nth-child(2), .qh-trial td:nth-child(2) { width: 70px; } .qh-trial th:nth-child(3), .qh-trial td:nth-child(3) { width: 100px; }
.qh-trial th:nth-child(5), .qh-trial td:nth-child(5) { width: 80px; } .qh-trial th:nth-child(6), .qh-trial td:nth-child(6) { width: 80px; } .qh-trial th:nth-child(7), .qh-trial td:nth-child(7) { width: 100px; } .qh-trial th:nth-child(8), .qh-trial td:nth-child(8) { width: 100px; }
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 { height: 26px; } .x-kv td.k { width: 96px; }
.qh-insp .ptl-table, .vh-table { table-layout: fixed; width: 100%; min-width: 0; }
.oqh-table { table-layout: fixed; width: 100%; } .oqh-table td.ev-note { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rep-edit .field input:not([type=checkbox]), .rep-edit .field select { height: 26px; padding: 0 8px; font-size: 12.5px; box-sizing: border-box; }
.oqc-d .oqch-table { min-width: 0; } .oqc-d .oqch-table th:nth-child(10), .oqc-d .oqch-table td:nth-child(10) { width: 42px; }
.modal-head .meta .chip { cursor: pointer; }

/* ★후처리 입고검사(09-15): 품질 페이지 IQC/OQC 통계 4박스 + 수검 입력 구획(.fin-sec) + 이력 드로어 */
.fin-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 10px; }
.fin-box .panel-head h2 { white-space: nowrap; }
.fin-grid > .panel { margin-bottom: 0; min-width: 0; }
.fin-box .table-wrap { max-height: 196px; }
.fin-box .panel-head .btn.sm { margin-left: auto; }
.fin-box .panel-head .meta + .btn.sm { margin-left: auto; }
table.fin-t th, table.fin-t td { height: 26px; }
table.fin-t td.strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 0; }
.fin-box .qpipe .chip { cursor: pointer; }
.qpipe.fill { column-gap: 12px; }
.qpipe.fill .chip { flex: 1 1 auto; }
.qpipe.fill .chip + .chip { margin-left: 0; }
@media (max-width: 1280px) { .fin-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.fin-sec .field input, .fin-sec .field select { height: 26px; padding: 0 8px; font-size: 12.5px; box-sizing: border-box; }
.fin-sec input.ng, .fin-sec select.ng, .fin-sec input[readonly].ng { color: var(--danger-ink); font-weight: 700; }
.fin-sec .app-table.fin-def th, .fin-sec .app-table.fin-def td { width: auto; }
.fin-sec .app-table.fin-def th { font-size: 11.5px; }
.fin-hist .vh-table { min-width: 910px; }
.fin-hist .vh-table :is(td.col-name, td.col-lot) { max-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.panel-head .sec-x { margin-left: 4px; width: 24px; min-width: 24px; padding: 0; color: var(--muted); }
.panel-head.sec-closed > :not(h2):not(.sec-x) { display: none !important; }
.modal-overlay.drawer .modal-body { scrollbar-gutter: stable; }
.modal-overlay.drawer .modal-body:has(> .prreg) { scrollbar-gutter: auto; }
.iqc-in .fin-sec { margin: 12px 0 18px; }
.fin-sec .fin-note-row { margin-bottom: 0; }
.panel-head .spacer + .sec-x, .panel-head .btn + .sec-x, .panel-head .meta + .sec-x { margin-left: 4px; }
.panel-head.sec-closed { margin-bottom: 4px; } .panel-head.sec-closed h2 { color: var(--muted); }
.fin-row { display: grid; gap: 5px; align-items: end; margin: 2px 0 8px; }
.fin-row .field input, .fin-row .field select { width: 100%; min-width: 0; padding: 0 6px; }
.fin-row .field .lbl { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fin-note-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; gap: 10px; align-items: end; margin: 0 0 4px; }
.fin-note-row .chk { height: 26px; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font-size: 12px; color: var(--ink-2); }
.fin-dhpv { background: var(--brand-bg); border: 1px solid var(--brand-line); border-radius: 8px; padding: 8px 10px; }
.fin-dhpv .lbl { color: var(--brand-dark); font-weight: 800; font-size: 12px; }
.fin-dhpv textarea { width: 100%; box-sizing: border-box; background: #fff; }
label.chk { height: 26px; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font-size: 12px; color: var(--ink-2); cursor: pointer; }
label.chk input { margin: 0; }
.fin-dhpv.vendor { background: var(--warn-bg); border-color: #ecd9a8; } .fin-dhpv.vendor .lbl { color: var(--warn-ink); }
.fin-def input.meas[readonly] { color: var(--ink-2); }
/* ★09-18: 드로어 폭이 좁아지면(자동 맞춤 520까지) 한 줄 nowrap이라 문구가 말줄임으로 잘렸다 → 줄바꿈 허용, 칩은 첫 줄에 고정 */
.hint.coedit { display: flex; align-items: flex-start; gap: 8px; min-height: 34px; margin-bottom: 8px; padding: 6px 10px; line-height: 1.45; white-space: normal; overflow: visible; }
.hint.coedit .chip { flex: none; }
.hint.coedit > span:last-child { min-width: 0; overflow: visible; white-space: normal; overflow-wrap: anywhere; padding: 2px 0; }
.sec-hide { display: none !important; }

.modal-overlay.drawer .modal-actions, .modal-overlay.drawer .close-panel { bottom: -18px; }
.fin-note { margin: 8px 0 0; }

.x-kv.kvn td.k { width: 96px; }
.fsec { display: flex; align-items: center; gap: 8px; } .fsec .sec-x { margin-left: auto; } .fsec.sec-closed > :not(.sec-x) { display: none !important; } .fsec.sec-closed { margin-bottom: 6px; }

.modal-overlay.drawer .modal-box.w90:has(.inspd.dev) { width: 780px !important; }
.inspd.dev .imgatt-grid { grid-template-columns: 1fr; } .inspd.dev .imgatt-thumb { aspect-ratio: 16 / 10; }
.mold-chart .panel-head :is(input, select, .ssel-in), .mst .panel-head :is(input, select, .ssel-in) { height: 26px; padding: 0 8px; font-size: 12px; box-sizing: border-box; }
.mold-chart .panel-head .ssel { height: 26px; }
.sim-table td { height: 26px; } .sim-table td .btn.sm { height: 22px; }
.dev-table td, .spl-table td { height: 26px; padding-top: 2px; padding-bottom: 2px; }
.dev-table td .btn, .spl-table td .btn, .dev-table td .btn.sm, .spl-table td .btn.sm { height: 20px; line-height: 18px; font-size: 11.5px; padding: 0 8px; }
.dev-table td input[type=date] { height: 20px; padding: 0 4px; font-size: 12px; box-sizing: border-box; }
.dev-table td .chip, .spl-table td .chip { height: 20px; line-height: 1; font-size: 11.5px; }
table.trial-wait { table-layout: fixed; width: 100%; } table.trial-wait td.strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reg-v6 textarea { font-size: 12.5px; padding: 6px 8px; box-sizing: border-box; }
.mst-product .form-grid { gap: 8px 12px; } .mst-product .fsec { margin: 12px 0 6px; padding-top: 8px; }

.modal-overlay.drawer .modal-box:has(.fin-hist) { width: 980px !important; max-width: 84vw; }
.x-kv.k4 td.k { width: 94px; padding: 2px 6px; white-space: nowrap; } .x-kv.k4 td:not(.k) { white-space: nowrap !important; overflow: hidden; text-overflow: ellipsis; max-width: 0; }
.dept-lbl.mold { background: var(--brand-bg); border-color: var(--brand-line); color: var(--brand-dark); }
.dept-lbl.qc { background: #f3ecfb; border-color: #e0d0f3; color: #6d28a8; }
.panel > .fsec.kpi-sec { margin: 14px 0 8px; padding-top: 10px; }
.mst .panel-head { flex-wrap: wrap; row-gap: 6px; }

.modal-overlay.drawer .modal-body .table-wrap.inscroll { scrollbar-gutter: stable; }
.table-wrap[class*="rows"] { scrollbar-gutter: stable; }

.modal-head .hd-row { flex: 1 1 auto; flex-wrap: nowrap; min-width: 0; }
.modal-head .hd-row > h3 { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.modal-head .hd-row > .meta { flex: none; white-space: nowrap; }
.modal-overlay.drawer .modal-head { padding: 10px 18px; }
.ptl-table td.ptl-rounds { white-space: nowrap; } .ptl-table td.ptl-rounds .chip + .chip { margin-left: 4px; }
.ptl-table td.ptl-rounds .ptl-chips { display: inline-flex; vertical-align: middle; align-items: center; gap: 4px; min-width: 0; max-width: calc(100% - 14px); } .ptl-table td.ptl-rounds .ptl-chips > .chip { flex: none; }
.ptl-table td.ptl-rounds .ptl-prev { display: flex; align-items: center; justify-content: flex-end; min-width: 0; overflow: hidden; } .ptl-table td.ptl-rounds .ptl-prev:empty { display: none; } .ptl-table td.ptl-rounds .ptl-prev > .chip { flex: none; }

/* ===== 09-16: 드로어·팝업 구획 구분선(사장님 — 수검 결과 / IQC 입고검사 / OQC 검사 구획을 선으로 분명히) + 수검 이력 Cpk 칼럼 ===== */
.modal-overlay .modal-body .hist-sec + .hist-sec, .modal-overlay .modal-body .hist-sec + div > .hist-sec:first-child,
.modal-overlay .modal-body .iqc-in .fin-sec, .modal-overlay .modal-body .iqc-in .panel-head.meas-head, .modal-overlay .modal-body .insp-in .panel-head.dim-meas-head { border-top: 1px solid var(--line-2); padding-top: 14px; margin-top: 16px; }
.iqc-in .fin-sec { margin: 16px 0 0; }
.iqc-in .fin-sec + .hint, .iqc-in .fin-sec + .panel-head.meas-head { margin-top: 16px; }
:is(.iqc-in, .insp-in).meas-focus .mf-hide { display: none !important; }
.modal-overlay .modal-body .iqc-in.meas-focus .panel-head.meas-head, .modal-overlay .modal-body .insp-in.meas-focus .panel-head.dim-meas-head { border-top: 0; padding-top: 0; margin-top: 4px; }
.insp-in.meas-focus .spec-tw { max-height: calc(100vh - 270px) !important; }
.modal-overlay .modal-body .hist-sec.sec-hide + .hist-sec { margin-top: 16px; }
.oqch-table.with-cpk th:nth-child(10), .oqch-table.with-cpk td:nth-child(10) { width: 64px; text-align: center; }
.oqch-table.with-cpk th:nth-child(11), .oqch-table.with-cpk td:nth-child(11), .oqch-table.with-cpk th:nth-child(12), .oqch-table.with-cpk td:nth-child(12) { width: 42px; }
.qi-table.qi-m td.cpk, .oqh-table td.cpk, .ptl-table td.cpk, .dimv-table td.cpk, .dim-table td.cpk { font-variant-numeric: tabular-nums; }
table.pl-pick td .btn.ghost.sm.adj { height: 18px; line-height: 16px; padding: 0 5px; margin-left: 4px; font-size: 11px; vertical-align: middle; }
.lot-trace .detail-head .dkv-status .v, .lot-table td .chip + .chip { margin-left: 0; }
table.pl-pick th:nth-child(7), table.pl-pick td:nth-child(7) { width: 118px; white-space: nowrap; }

/* ===== 09-16 2차: 치수 비교 = 추이 폐지 · Avg/Max/Min 2줄 머리(2줄 = 현재 LOT/비교 LOT) · 비교 대상 칩 · 항목 세트 칩 · IQC 항목 세트 편집 ===== */
.modal-box.xl:has(.dimcmp) { width: auto; min-width: 0; max-width: 96vw; }
.dimcmp table.dc-table thead th { position: sticky; top: 0; z-index: 2; }
.dimcmp table.dc-table thead tr:nth-child(2) th { top: var(--th-h, 30px); }
.dimcmp table.dc-table th.dc-grp { text-align: center; border-bottom: 1px solid var(--line-2); }
.dimcmp table.dc-table th.dc-cur { color: var(--brand-ink); }
.dimcmp table.dc-table th { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dimcmp .dc-vs { display: inline-flex; align-items: center; gap: 8px; min-height: 26px; }
.dimcmp .dc-vs .vs { font-size: 12px; font-weight: 800; color: var(--muted); }
.dimcmp .dc-vs .chip { height: 24px; font-size: 12px; white-space: nowrap; margin: 0; }
.dimcmp .dc-sets { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.dimcmp .dc-sets .chip { margin: 0; white-space: nowrap; }
.dimcmp .dc-bar .grp-r .btn.sm { white-space: nowrap; }
.dimset-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px 12px; max-height: 50vh; overflow: auto; border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px 8px; }
.dimset-grid .dimset-g { grid-column: 1 / -1; display: flex; gap: 6px; align-items: center; height: 26px; margin-top: 4px; border-bottom: 1px solid var(--line-soft); cursor: pointer; }
.dimset-grid .dimset-i { display: flex; gap: 6px; align-items: center; height: 24px; min-width: 0; white-space: nowrap; overflow: hidden; cursor: pointer; font-weight: 700; }
.dimset-grid .dimset-i .muted { font-size: 11.5px; font-weight: 400; overflow: hidden; text-overflow: ellipsis; }
.dimset .fsec .meta { margin-left: 8px; font-weight: 400; }

/* ===== 09-16 3차: 통합 검사 드로어(IQC+OQC) · 보기 [기준][내부] 다중 토글 · 엑셀 아이콘 버튼 · IQC 표 compact + 최종판정 ===== */
.segtab.multi span.on { background: #fff; color: var(--brand-ink); }
.fin-sec .app-table.fin-def.compact { table-layout: fixed; }
.fin-sec .app-table.fin-def.compact th { padding: 0 2px; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fin-sec .app-table.fin-def.compact td.meas-td { padding: 0 2px; } .fin-sec .app-table.fin-def.compact td.meas-td select.meas { padding: 0 2px; }
.fin-sec select.f-empty { background: var(--warn-bg); }
:is(.insp-in, .iqc-in) .panel-head .smp-pick select { width: 74px; }
.iqc-in .modal-actions .row.gap select { height: 32px; line-height: 32px; font-size: 13px; font-weight: 700; padding: 0 26px 0 10px; width: 124px; box-sizing: border-box; }
.iqc-in .modal-actions .row.gap .chip { height: 32px; font-size: 12.5px; padding: 0 10px; }

/* ===== 09-16 4차(사장님 13항목): 검사 드로어 머리 밑선 제거 · IQC 표 가득 · 최종판정 볼드 · 측정 표 Avg/Max/Min/Cpk · 열람 머리 라벨 · 역추적 비고 1줄 ===== */
.iqc-in .pin-top { border-bottom: 0; }
.fin-sec select.fin-final, .fin-sec select.fin-final option { font-weight: 700; }
.fin-sec .app-table.fin-def.compact { width: 100%; }
.iqc-in .oqc-meas th.st-col, .iqc-in .oqc-meas td.st-col { background: var(--bg); }
.iqc-in .oqc-meas td.st-col.ngw { color: var(--danger-ink); font-weight: 700; }
.iqc-in .oqc-meas td.st-col.warn-in { background: var(--warn-bg-2); color: var(--amber-ink, #b45f06); font-weight: 700; }
.inspd .pin-top > .detail-head .dkv .k { white-space: nowrap; flex: 0 0 auto; }
.modal-head .hd-row .dept-lbl, .modal-head .hd-row .chip { white-space: nowrap; flex: 0 0 auto; }
.lot-trace .lt-post td.ev-note { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 0; cursor: pointer; }
.lot-trace .lt-post td.ev-note.open { white-space: pre-wrap; word-break: break-word; }

/* ── LOT 수량 조정 팝업(09-19 사장님) ─────────────────────────────────────
   ① 표 좌1 = LOT NO. ② 숫자 칼럼 90~100(값 규모에 맞춘 표준 폭) ③ 조정 수량 = 실시간 조건부 서식.
   팝업 폭 = 칼럼 합 710 + 본문 패딩 36 + 상자 테두리 2 = 748 (md 1320은 값 대비 과폭이라 칼럼이 늘어났다). */
.modal-box:has(table.lot-adj) { width: 748px; }
table.app-table.lot-adj th.c-lot,   table.app-table.lot-adj td.c-lot   { width: 230px; text-align: left; padding: 0 8px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
table.app-table.lot-adj th.c-qty,   table.app-table.lot-adj td.c-qty   { width: 100px; }
table.app-table.lot-adj th.c-used,  table.app-table.lot-adj td.c-used  { width: 90px; }
table.app-table.lot-adj th.c-rem,   table.app-table.lot-adj td.c-rem   { width: 90px; }
table.app-table.lot-adj th.c-delta, table.app-table.lot-adj td.c-delta { width: 100px; }
table.app-table.lot-adj th.c-new,   table.app-table.lot-adj td.c-new   { width: 100px; }
table.app-table.lot-adj td.num { padding: 0 8px; }
/* 늘림 = 파랑 · 줄임 = 빨강(토큰 조건부 서식) — 입력과 동시에 바뀐다 */
table.app-table.lot-adj td.c-new.q-up { background: var(--brand-bg-2); color: var(--brand-ink); }
table.app-table.lot-adj td.c-new.q-dn { background: var(--danger-bg-2); color: var(--danger-ink); }
.iqc-in .modal-actions .row.gap select.ng { background: var(--danger); border-color: var(--danger); color: #fff; }
.iqc-in .modal-actions .row.gap select.warn { background: var(--warn-bg); border-color: var(--warn); color: var(--warn-ink); }
.meas-import .drop-zone, .meas-import textarea { height: 176px; box-sizing: border-box; }
.meas-import .drop-zone { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; align-content: center; gap: 4px; }
.filterbar:has(> .chip.help:first-child) { position: relative; padding-left: 41px; }
.filterbar > .chip.help:first-child { position: absolute; left: 12px; top: 11px; }
td.rsel { background: var(--brand-bg) !important; box-shadow: inset 0 0 0 1px var(--brand-line); }
td.rsel input.meas, td.rsel select.meas { background: transparent; }
td.std-col .btn.sm.icon.row-fill { width: auto; min-width: 26px; height: 20px; line-height: 20px; padding: 0 2px; margin-left: 2px; font-size: 10px; color: var(--muted); vertical-align: middle; }
td.std-col .btn.sm.icon.row-fill:hover { color: var(--brand); }
td.std-col .btn.sm.icon.row-fill.ngw { color: var(--danger-ink); }
.fin-sec select.fin-final.ng { background: var(--danger); border-color: var(--danger); color: #fff; }
.fin-sec select.fin-final.warn { background: var(--warn-bg); border-color: var(--warn); color: var(--warn-ink); }
.fin-row .lbl .fin-manual { margin-left: 6px; height: 16px; min-width: 0; padding: 0 6px; font-size: 10.5px; vertical-align: text-bottom; }
.segtab.multi span.off { color: var(--muted); background: var(--gray-bg-2); cursor: not-allowed; opacity: .7; }
.cf-dims.spl { table-layout: auto; width: auto; min-width: 100%; }
.cf-dims.spl th:nth-child(1), .cf-dims.spl td:nth-child(1) { width: auto; min-width: 130px; }
.cf-dims.spl th:nth-child(2), .cf-dims.spl td:nth-child(2) { width: 120px; min-width: 120px; }
.cf-dims.spl:not(.one) th:nth-child(n+3), .cf-dims.spl:not(.one) td:nth-child(n+3) { width: 72px; min-width: 72px; }
.cf-dims.spl th, .cf-dims.spl td { padding: 2px 5px; font-size: 12px; white-space: nowrap; }
.cf-dims.spl td.num { text-align: right; }
.cf-dims.spl td.edit { padding: 0 2px; background: var(--warn-bg); }
.cf-dims.spl td.edit input.meas { width: 58px; height: 22px; padding: 0 3px; border: 1px solid var(--warn); border-radius: 4px; background: #fff; text-align: right; font-size: 12px; }
.cf-dims.spl td.edit input.meas.ng { color: var(--danger-ink); border-color: var(--danger); font-weight: 700; }

/* ★09-18 접힌 드로어 띠(.dw-min) — 몇 개를 열든 펼침은 1차와 지금 보는 것 둘뿐, 나머지는 세로 띠.
   띠에는 그 드로어가 무엇인지(제품·LOT·차수·열·수량) 세로로 그대로 남는다 — 눌러서 펼치고, 자리·순서는 그대로. */
.modal-overlay.drawer .modal-box .dw-rail { 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; }
.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; }
/* ★09-18 드로어 이동 애니메이션(사장님) — 띠를 누르면 자리·폭이 0.18s로 미끄러져 무엇이 어디로 갔는지 눈에 보인다.
   끌어 옮기는 중(.dw-drag)과 모션 최소화 설정에서는 끈다. 드로어 전용이라 팝업·표에는 영향 없음. */
.modal-overlay.drawer { transition: padding-right .13s cubic-bezier(.4, 0, .2, 1); overflow: hidden; }
.modal-overlay.drawer .modal-box { 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); }
/* 끄는 동안은 드로어 **전부** 전환을 끈다 — 끌고 있는 창만 끄면 옆 창이 0.18s 늦게 따라와 튕기듯 보인다(사장님 09-18) */
body.dw-dragging .modal-overlay.drawer, body.dw-dragging .modal-overlay.drawer .modal-box { transition: none; }
@media (prefers-reduced-motion: reduce) { .modal-overlay.drawer, .modal-overlay.drawer .modal-box { transition: none; } }
.modal-overlay.drawer.dw-enter { transition: none; }
body.dw-opening .modal-overlay.drawer, body.dw-opening .modal-overlay.drawer .modal-box { 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.dw-enter .modal-box { animation: none; } }
/* 띠 태그 = 어떤 검사·어떤 상태에서 연 창인지. 짧은 글자는 62px 고정, 긴 태그는 글자에 맞춰 늘어난다. */
.modal-overlay.drawer .modal-box .dw-tag { display: none; }
.modal-overlay.drawer .modal-box.dw-min .dw-tag { 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; }
.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; letter-spacing: 0; }
/* 상태 칩(검사대기·특별관리 …) = 목록과 같은 색, 문구 아래 세로. 태그 칩과 같은 규칙 */
.modal-overlay.drawer .modal-box .dw-state { display: none; }
.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; }
/* 제목줄 액션 버튼(수량 조정 등)은 맨 아래로 내리고 세로로 — 가로면 22px 띠에서 잘린다 */
.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; }
.modal-overlay.drawer .modal-box.dw-min > .modal-head > * > svg { vertical-align: middle; }
/* 개발품 검사 이력 표(09-19) — 품명·문제점 유동, 나머지 colgroup 고정 */
table.devqc-hist { table-layout: fixed; width: 100%; }
table.devqc-hist th, table.devqc-hist td { overflow: hidden; text-overflow: ellipsis; }
/* 양산 이관 위저드(09-19) — 단계 띠(.hub-flow 재사용) + 단계 확인 줄 */
.pw .pw-flow { padding: 22px 8px 6px; margin-bottom: 4px; }
.pw .pw-flow .st { cursor: default; }
.pw .fsec.first { margin-top: 0; padding-top: 0; border-top: none; }
.pw .table-wrap.rows15 { max-height: 260px; }
.pw-ack { display: flex; gap: 8px; align-items: flex-start; margin-top: 12px; padding: 8px 10px; border-radius: 8px; background: var(--ok-bg); border: 1px solid var(--ok-line); font-size: 12.5px; font-weight: 700; cursor: pointer; }
.pw-ack.warn { background: var(--warn-bg); border-color: var(--warn-line); color: var(--warn-ink); }
.pw-ack input { margin: 2px 0 0; }
table.spl-t { table-layout: fixed; width: 100%; }
table.spl-t td { height: 26px; padding-top: 2px; padding-bottom: 2px; }
table.spl-t td .btn, table.spl-t td .btn.sm { height: 20px; line-height: 18px; font-size: 11.5px; padding: 0 8px; }
table.spl-t td .chip { height: 20px; line-height: 1; font-size: 11.5px; }
table.spl-t td input[type=date] { height: 22px; padding: 0 6px; font-size: 12px; line-height: 20px; border-radius: 5px; box-sizing: border-box; vertical-align: middle; }
table.spl-t td.strong, table.spl-t td.clip-s { text-align: left; }
table.spl-form td.k { width: 110px; text-align: left; padding-left: 12px; }
table.spl-form td.v { padding: 2px 8px; }
table.spl-form td.v input, table.spl-form td.v select { height: 26px; border: 1px solid var(--line); border-radius: 6px; padding: 0 8px; font: inherit; font-size: 12.5px; background: #fff; }
table.spl-form td.v input:focus, table.spl-form td.v select:focus { outline: 2px solid var(--brand); outline-offset: -2px; }
.spl-edit .table-wrap { border-bottom: 0; }
.docs-drop { padding: 0 12px; height: 26px; display: inline-flex; align-items: center; min-width: 200px; max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; background: var(--bg-soft); }
.docs-drop.has { color: var(--ink); border-style: solid; border-color: var(--brand-line-2); }
.dev-table th { height: 30px; }
table.spl-t th, table.spl-t td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
table.spl-t td .col-date { display: inline; }
.modal-overlay.drawer .modal-box:has(.spl-edit) { width: 680px !important; max-width: 84vw; }
.spl-edit .detail-head { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: 6px 14px; align-items: center; }
.spl-edit .detail-head .dkv { min-width: 0; } .spl-edit .detail-head .dkv .v { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.spl-edit .spl-flow { padding: 22px 8px 8px; margin: 0 0 8px; border-bottom: 1px solid var(--line); }
table.press-t, table.docs-t { table-layout: fixed; width: 100%; }
table.press-t th, table.press-t td, table.docs-t th, table.docs-t td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.press-pop .fsec:first-child { margin-top: 0; padding-top: 0; border-top: none; }

/* ===== PL 빌더 = 좌우 2단 준비 작업대(09-20 5차 사장님 — 제품당 LOT 수십 개) ===== */
/*  왼쪽 400 = 제품별 남은 일(부족·성적서·특기사항) · 오른쪽 = 고른 제품의 LOT 작업 칸.
    두 칸이 각자 전체 높이를 쓰고 표는 각자 스크롤한다(머리·합계 줄 고정). */
.modal-overlay.drawer .modal-box.xxl:has(.pl-builder) { width: min(1180px, 84vw) !important; max-width: 84vw; }
.modal-box.xxl:has(.pl-builder) { width: min(1180px, 84vw); max-width: min(1180px, 84vw); }
.modal-overlay.drawer .modal-body:has(.pl-builder) { overflow: hidden; }
.pl-builder { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.pl-split { display: flex; gap: 12px; flex: 1 1 auto; min-height: 0; }
.pl-split .pl-left { flex: 0 1 430px; display: flex; min-width: 260px; min-height: 0; }
.pl-split .pl-right { flex: 1 1 0; display: flex; min-width: 210px; min-height: 0; }
.pl-split .card-lite { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; min-height: 0; margin-bottom: 0; padding: 10px 12px; }
.pl-left-body, .pl-right-body { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.pl-right-body > div:last-child { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.pl-scroll { overflow: auto; min-height: 0; flex: 1 1 auto; max-height: none; }
:is(table.pl-prodlist, table.pl-lotwork) { table-layout: fixed; width: 100%; }
table.pl-prodlist { min-width: 404px; }
table.pl-lotwork { min-width: 581px; }
:is(table.pl-prodlist, table.pl-lotwork) :is(th, td) { white-space: nowrap; }
:is(table.pl-prodlist, table.pl-lotwork) th { position: sticky; top: 0; z-index: 2; }
:is(table.pl-prodlist, table.pl-lotwork) th.lft { text-align: left; }
:is(table.pl-prodlist, table.pl-lotwork) tfoot td { position: sticky; bottom: 0; z-index: 2; background: var(--closed); font-weight: 800; border-top: 1px solid var(--line-2); }
:is(table.pl-prodlist, table.pl-lotwork) tfoot td.sum-k { background: var(--gray-bg-2, #e3e7ee); color: var(--muted); }
:is(table.pl-prodlist, table.pl-lotwork) tfoot td.lft { text-align: left; }
:is(table.pl-prodlist, table.pl-lotwork) td.el { overflow: hidden; text-overflow: ellipsis; }
:is(table.pl-prodlist, table.pl-lotwork) td { height: 22px; padding-top: 2px; padding-bottom: 2px; }
:is(table.pl-prodlist, table.pl-lotwork) td :is(.cell, .ssel-in, input:not([type=checkbox]), select) { height: 22px; padding-top: 0; padding-bottom: 0; font-size: 12px; border-radius: 5px; box-sizing: border-box; }
:is(table.pl-prodlist, table.pl-lotwork) td .btn.sm { height: 22px; line-height: 20px; }
:is(table.pl-prodlist, table.pl-lotwork) td .chip { height: 22px; line-height: 1; }
:is(table.pl-prodlist, table.pl-lotwork) td.mu { color: var(--dim); font-weight: 400; }
table.pl-prodlist :is(td, tfoot td) { height: 26px; line-height: 22px; }
table.pl-prodlist tr.pick td { background: var(--brand-bg); }
table.pl-prodlist tr.pick td:first-child { box-shadow: inset 3px 0 0 var(--brand); }
table.pl-prodlist tr.grp td { background: var(--closed); font-weight: 800; color: var(--muted); border-top: 1px solid var(--line-2); }
table.acc-list tr.grp td { background: var(--closed); font-weight: 800; color: var(--muted); border-top: 1px solid var(--line-2); }
table.pl-lotwork tr.in td { background: var(--brand-bg); }
table.pl-lotwork tr.out td { color: var(--dim); }
table.pl-lotwork td .cell.q { width: 100%; text-align: right; }
table.pl-lotwork td .cell.q.over { border-color: var(--danger); background: var(--danger-bg); color: var(--danger-ink); }
table.pl-lotwork td .cell.memo { width: 100%; text-align: left; border-color: var(--line); }
table.pl-lotwork td .cell.memo.has { background: var(--warn-bg); color: var(--warn-ink); font-weight: 700; border-color: var(--warn-bg-2); }
table.pl-lotwork td .btn.ghost.sm.adj { height: 20px; line-height: 18px; padding: 0 5px; font-size: 11px; margin-left: 6px; }
.pl-wk { gap: 8px; align-items: center; margin-bottom: 8px; flex-wrap: nowrap; }
.pl-wk .nm { font-size: 14px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 250px; }
.pl-wk .ssel-in { height: 26px; font-size: 12px; font-weight: 700; color: var(--ink-2); padding: 0 24px 0 8px; box-sizing: border-box; }
.pl-wk2 { gap: 6px; align-items: center; margin-bottom: 8px; flex-wrap: wrap; min-width: 0; }
.pl-wk2 .cell { height: 26px; border: 1px solid var(--line-2); border-radius: 7px; padding: 0 8px; font: inherit; font-size: 12px; box-sizing: border-box; flex: 1 1 90px; min-width: 76px; max-width: 150px; }
.pl-wk2 .segtab, .pl-wk2 .ssel { flex: 0 0 auto; }
.pl-wk2 .ssel-in { height: 26px; font-size: 12px; font-weight: 700; color: var(--ink-2); padding: 0 24px 0 8px; box-sizing: border-box; }
.pl-wk2 > .btn { flex: 0 0 auto; margin-left: auto; }
.pl-wk-kvs { margin-bottom: 8px; }
/* 오늘 작업 시안(view=today2) — 공용 PC·섹터 단위 현장 작업면 */
.pt2-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 6px; }
table.pt2-list { width: 100%; table-layout: fixed; }
table.pt2-list :is(th, td) { white-space: nowrap; }
table.pt2-list th { position: sticky; top: 0; z-index: 2; text-align: center; }
table.pt2-list th.lft { text-align: left; }
table.pt2-list td { height: 26px; }
table.pt2-list td.el { overflow: hidden; text-overflow: ellipsis; }
table.pt2-list td.mu { color: var(--dim); font-weight: 400; }
table.pt2-list tr.pt2-stop td { background: var(--danger-bg); }
table.pt2-list tr.pt2-wait td { background: var(--warn-bg); }
table.pt2-list tr.pt2-dim td { color: var(--dim); }
table.dvp-list tr.grp td { background: var(--closed); color: var(--muted); font-weight: 800; border-top: 1px solid var(--line-2); }
table.pt2-list tr.grp td { background: var(--closed); color: var(--muted); font-weight: 800; border-top: 1px solid var(--line-2); }
/* 오늘 / 어제 이하 경계 = 굵은 이중선(09-21 사장님 — 글자색만으로는 구분이 약하다) */
table.pt2-list tr.grp.pt2-cut td { border-top: 3px solid var(--ink); color: var(--ink); background: var(--gray-bg-2, #e3e7ee); }
table.pt2-list tbody:first-of-type tr.grp.pt2-cut td, table.pt2-list thead + tbody tr.grp.pt2-cut td { border-top: 0; }
table.pt2-list tbody.pt2-past tr:not(.grp) td { color: var(--dim); }
/* 같은 설비 묶음 = 세로 병합 칸(09-21 사장님 — 왜 같은 설비가 여러 줄인지 보이게) */
table.pt2-list td.pt2-press { background: var(--bg); border-right: 1px solid var(--line-2); vertical-align: middle; }
/* 등록 전 확인 = [판정 칩] + 사실 한 줄(09-21 사장님 — 주석형 문구 폐지) */
.chk-row .v .chip { margin-right: 6px; height: 20px; font-size: 11.5px; }
.chk-row .chk-why { color: var(--ink-2); font-weight: 700; }
table.pt2-list .chip { height: 22px; line-height: 1; }
.pt2-bar { display: inline-block; width: 100%; max-width: 56px; height: 6px; border-radius: 3px; background: var(--gray-bg); overflow: hidden; vertical-align: middle; }
.pt2-bar > i { display: block; height: 6px; border-radius: 3px; background: var(--brand); }
/* 09-21 사장님: 왼쪽 박스 = 오늘 작업·상태 칩·공장 전체 띠 / 오른쪽 박스 = 보기 전환·카드. 가운데 선을 끌어 폭 조절(이 브라우저에 기억) */
.pt2-shell { display: flex; align-items: stretch; min-width: 0; margin-bottom: 12px; }
.pt2-shell > .panel { margin: 0; min-width: 0; }
.pt2-left { flex: 0 0 670px; min-width: 300px; max-width: calc(100% - 482px); display: flex; flex-direction: column; }
.pt2-right { flex: 1 1 0; min-width: 300px; container-type: inline-size; }
.pt2-gutter { flex: 0 0 12px; position: relative; cursor: col-resize; touch-action: none; outline: none; }
.pt2-gutter::after { content: ''; position: absolute; top: 10px; bottom: 10px; left: 50%; width: 2px; margin-left: -1px; border-radius: 1px; background: var(--line-2); }
.pt2-gutter:hover::after, .pt2-gutter:focus-visible::after, body.pt2-resizing .pt2-gutter::after { background: var(--brand); }
body.pt2-resizing { cursor: col-resize; user-select: none; }
body.pt2-resizing .pt2-shell { pointer-events: none; }
body.pt2-resizing .pt2-gutter { pointer-events: auto; }
.pt2-shell .panel-head { flex-wrap: wrap; row-gap: 6px; min-height: 26px; }
.pt2-shell .panel-head h2 { white-space: nowrap; flex: 0 0 auto; }
.pt2-shell .filterbar .chip + .chip { margin-left: 0; }
.pt2-rail { min-width: 0; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); overflow: hidden; }
.pt2-rail-hd { display: flex; align-items: center; gap: 6px; padding: 5px 9px; background: var(--bg); border-bottom: 1px solid var(--line); font-size: 12px; font-weight: 800; }
.pt2-rail-hd .mu { margin-left: auto; color: var(--muted); font-weight: 700; }
.pt2-rail-body { max-height: calc(100vh - 250px); overflow: auto; }
table.pt2-rail-t { table-layout: fixed; width: 100%; }
table.pt2-rail-t td { height: 26px; font-size: 12px; }
table.pt2-rail-t th { position: sticky; top: 0; z-index: 2; font-size: 11.5px; }
table.pt2-rail-t .chip { height: 19px; font-size: 11px; padding: 0 6px; }
table.pt2-todo td.pt2-why { color: var(--danger-ink); font-weight: 800; }
table.pt2-todo td.pt2-why.wait { color: var(--warn-ink); }
table.pt2-todo td.pt2-why.ho { color: var(--ink); }
table.pt2-todo tr.pt2-gap td { height: 8px; padding: 0; background: var(--bg); }
.pt2-rail .empty { padding: 9px 0; font-size: 12px; }
@media (min-width: 900px) {
  .main:has(> .content > .pt2-shell) { height: 100vh; }
  .main > .content:has(> .pt2-shell) { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; padding-bottom: 12px; }
  .content > .pt2-shell { flex: 1 1 0; min-height: 0; margin-bottom: 0; }
  .pt2-right { display: flex; flex-direction: column; }
  .pt2-rail-host { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; }
  .pt2-rail { flex: 0 1 auto; min-height: 0; display: flex; flex-direction: column; }
  .pt2-rail-body { flex: 1 1 auto; min-height: 0; max-height: none; }
  .pt2-body { flex: 1 1 0; min-height: 0; overflow: auto; margin-right: -14px; padding-right: 14px; }
  .pt2-right .pt2-body > .table-wrap { max-height: none; overflow: visible; }
}
/* 09-21 사장님: 카드는 한 줄에 3개 고정 — 남는 폭은 왼쪽 박스가 쓴다 */
.pt2-board { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.pt2-board .pt2-grp { grid-column: 1 / -1; display: flex; align-items: baseline; gap: 6px; padding: 6px 2px 0; font-size: 12.5px; border-bottom: 1px solid var(--line); }
.pt2-board .pt2-grp:first-child { padding-top: 0; }
.pt2-board .pt2-grp .mu { color: var(--muted); font-size: 12px; font-weight: 700; }
/* 오른쪽 박스 폭 기준 — 끌어서 좁히면 3열 → 2열 → 1열 */
@container (max-width: 740px) { .pt2-board { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container (max-width: 460px) { .pt2-board { grid-template-columns: minmax(0, 1fr); } }
.pt2-card { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); padding: 0; overflow: hidden; cursor: pointer; min-width: 0; }
.pt2-card > .by { padding: 6px 9px 7px; min-width: 0; }
.pt2-card > .bd { height: 22px; padding: 0 9px; font-size: 11px; }
.pt2-card:hover { box-shadow: inset 0 0 0 2px var(--brand-line-2); }
.pt2-card.run { border-color: var(--ok); } .pt2-card.run > .bd { background: var(--ok); }
.pt2-card.stop { border-color: var(--danger); } .pt2-card.stop > .bd { background: var(--danger); }
.pt2-card.wait { border-color: var(--warn); } .pt2-card.wait > .bd { background: var(--warn); color: #3b2d00; }
.pt2-card.closed > .bd { background: var(--dim); }
.pt2-card.pt2-empty { background: var(--line-soft); border-color: transparent; justify-content: center; }
.pt2-card.pt2-empty .pt2-c1 b { color: var(--dim); font-size: 12.5px; }
.pt2-card.pt2-empty .pt2-c1 .mu { color: var(--dim); font-weight: 400; }
.pt2-card.drag { opacity: .45; }
.pt2-card.over { outline: 2px solid var(--brand); outline-offset: -2px; }
.pt2-card .pt2-c1 { display: flex; align-items: center; gap: 5px; }
.pt2-card .pt2-c1 b { font-size: 13.5px; font-weight: 800; line-height: 18px; }
.pt2-card .pt2-c1 .chip { height: 19px; line-height: 1; font-size: 11px; padding: 0 6px; }
/* 09-21 사장님: 카드 배경 틴트와 칩 색이 같아 칩 모양이 안 보인다 → 같은 계열 테두리로 칩을 세운다 */
.pt2-card.run .chip.ok { border: 1px solid var(--ok-line); }
.pt2-card.wait .chip.warn { border: 1px solid var(--warn-line); }
.pt2-card.closed .chip.gray { border: 1px solid var(--line-2); }
/* 경과·가동률 = 설비명과 같은 톤(09-21 사장님 — 옅은 회색은 어두운 현장에서 안 보인다) */
.pt2-card .pt2-t { font-size: 12px; font-weight: 800; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.pt2-card .pt2-c2 { display: flex; align-items: baseline; gap: 6px; margin-top: 2px; min-width: 0; }
.pt2-card .pt2-nm { font-size: 12px; font-weight: 700; color: var(--ink-2); flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pt2-card .pt2-mold { flex: 0 0 auto; font-size: 11.5px; font-weight: 700; color: var(--muted); white-space: nowrap; }
.pt2-card .mu { color: var(--muted); }
.pt2-card .pt2-c1 .mu { font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.pt2-card .pt2-q { font-size: 11.5px; white-space: nowrap; }
.pt2-card .pt2-q b { font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--ink-2); }
.pt2-card .pt2-q .neg { color: var(--danger); font-weight: 700; }
/* 제품 이력 드로어 = 칼럼 합(526)에 맞춘 좁은 폭 — 1차(생산 건 상세)를 밀어내지 않는다 */
/* 폭 = 칼럼 합 532 + 드로어 여백 66 + 여유 = 620. 좁혀지면 표는 가로 스크롤(칼럼을 뭉개지 않는다). */
.modal-overlay.drawer .modal-box:has(.pt2-prodhist) { width: 620px !important; max-width: 84vw; min-width: 620px !important; }
.pt2-prodhist .table-wrap { overflow-x: auto; }
.pt2-prodhist table.pt2-list { min-width: 532px; }
.pl-band .chip.pl-fchip { height: 26px; cursor: pointer; }
.pl-band .chip.pl-fchip.on, .pt2-shell .filterbar .chip.pl-fchip.on { outline: 2px solid var(--brand); outline-offset: 1px; }

/* ===== 09-21 사장님: 세부 이력 = 프리셋 버튼 한 번 → 확인 팝업에서 기록(구분·세부유형 2단 드롭다운 폐지) ===== */
.evp-bar { --evp-w: 84px; --evp-n: 5; display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 5px 8px; align-items: center; }
.evp-bar .evp-g { height: 22px; min-width: 0; justify-content: center; padding: 0 6px; font-size: 11.5px; }
.evp-row { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; min-width: 0; }
.evp-row .qc, .confirm-box .qc { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 9px;
  border: 1px solid var(--line); border-radius: 7px; background: #fff; font: inherit; font-weight: 700; font-size: 12px;
  color: var(--ink-2); cursor: pointer; }
.evp-row .qc i, .confirm-box .qc i { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); flex: none; }
.evp-row .qc.qc-ok i, .confirm-box .qc.qc-ok i { background: var(--ok); }
.evp-row .qc.qc-neg i, .confirm-box .qc.qc-neg i { background: var(--danger); }
.evp-row .qc.qc-brand i, .confirm-box .qc.qc-brand i { background: var(--brand); }
.evp-row .qc:hover, .confirm-box .qc:hover { background: var(--hover); }
.evp-row .qc.on, .confirm-box .qc.on { background: var(--brand-bg); border-color: var(--brand-line); color: var(--brand-dark); }
.evp-row .qc:disabled { color: var(--dim); cursor: default; background: var(--bg); }
.evp-row .qc.off { color: var(--dim); background: var(--bg); border-style: dashed; }
.evp-row .qc.off i { background: var(--dim); }
.evp-row:not(.evp-manual) { display: grid; grid-template-columns: repeat(auto-fill, var(--evp-w)); }
.evp-row:not(.evp-manual) .qc { width: var(--evp-w); min-width: 0; box-sizing: border-box; white-space: nowrap; overflow: hidden; }
.evp-manual { gap: 6px; width: calc(var(--evp-n) * var(--evp-w) + (var(--evp-n) - 1) * 5px); max-width: 100%; }
.evp-manual :is(input, select) { height: 26px; font-size: 12.5px; padding: 0 6px; box-sizing: border-box; }
.evp-manual input[type="time"] { width: 124px; flex: 0 0 auto; }
.evp-manual select { flex: 1 1 auto; min-width: 130px; max-width: none; }
.evp-manual .btn.sm { height: 26px; flex: 0 0 auto; }
.ev-add-title { margin-bottom: 8px; }

/* 기록 확인창 = 시각·내용을 그 자리에서 고친다 — 값 칸이 입력칸이라 높이·정렬만 다시 잡는다 */
.cf-info:has(textarea) { align-items: center; max-height: none; overflow: visible; gap: 7px 14px; }
.cf-info:has(.imgatt-drop) { max-height: none; overflow: visible; }
.ev-note .chip.ev-pic { height: 18px; font-size: 11px; padding: 0 6px; margin-right: 6px; cursor: zoom-in; vertical-align: 1px; }
.cf-info:has(textarea) :is(input, textarea) { font-size: 12.5px; padding: 4px 8px; box-sizing: border-box;
  border: 1px solid var(--line); border-radius: 6px; background: #fff; }
.cf-info:has(textarea) input { height: 28px; }
.cf-info:has(textarea) textarea { min-height: 52px; line-height: 1.5; }

/* 생산 건 상세 = 드로어든 팝업이든 같은 폭(09-21 사장님 — 제품 이력에서 연 팝업이 화면 폭까지 벌어지던 것) */
.modal-box.xl:has(.log-detail) { width: 740px; max-width: 94vw; }

/* 09-21 사장님: 정지 기록 직후 "지금 상태" 창 = 작게, 드로어 왼쪽에 붙여(가리지 않게) · 결과 한 줄(재가동 조치 = 초록 / 수리 필요 = 빨강) */
.modal-box:has(.st-after) { width: 520px; max-width: calc(100vw - 32px); }
.st-after .cf-info .v { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.st-after .st-acts { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 12px; }
.st-after .st-acts .btn.st-ng { height: 26px; padding: 0 12px; font-size: 12px; font-weight: 700; margin-left: auto; }
.st-after .st-foot { align-items: center; padding-top: 10px; border-top: 1px solid var(--line-soft); }
.st-after .st-time { display: inline-flex; align-items: center; gap: 8px; }
.st-after .st-time .lbl { font-size: 12px; color: var(--muted); }
.st-after .st-time input { height: 26px; width: 124px; padding: 0 6px; font-size: 12.5px; box-sizing: border-box; }
.st-after .st-foot .btn.sm { height: 26px; }

/* 09-21 사장님: 이력 기록 → 지금 상태 → 금형 이상 등록이 드로어 왼쪽에서 같은 폭으로 아래로 이어진다. 끝난 단계는 한 줄 카드로 남는다 */
.flow-col { position: fixed; z-index: 99; display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
.flow-done { display: flex; align-items: center; gap: 8px; min-width: 0; height: 36px; padding: 0 12px; box-sizing: border-box; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 4px 14px rgba(0,0,0,.12); font-size: 12.5px; }
.flow-done .chip { flex: 0 0 auto; }
.flow-done b { flex: 0 0 auto; }
.flow-done .flow-t { flex: 1 1 auto; min-width: 0; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.flow-card { box-sizing: border-box; padding: 10px 14px 12px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 4px 14px rgba(0,0,0,.12); font-size: 12.5px; pointer-events: auto; }
.flow-card-hd { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.flow-card .cf-info { margin: 0; max-height: none; overflow: visible; }
.flow-card .cf-info .v { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.flow-card .flow-thumbs { margin-top: 8px; }

/* 09-21 사장님: 검사 입력은 여러 번·여러 PC로 나눠 끝난다 — 어디까지 측정했는지 그룹(측정 부위·기기)별로 보인다 */
.save-stamp { white-space: nowrap; }
.save-stamp.neg { color: var(--danger-ink); font-weight: 700; }

/* ===== 09-22 사장님: 생산 현황 — 왼쪽 설비 전부 · 카드 3줄 · 리스트 박스 · 품명 표형 드롭다운 · 흐름 띠 NG 빨강 · 계획 팝업 크게 ===== */
table.pt2-all td { height: 30px; font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; }
table.pt2-all .chip { height: 22px; font-size: 11.5px; padding: 0 8px; }
table.pt2-all tr.pt2-stop td { background: var(--danger-bg); }
table.pt2-all tr.pt2-wait td { background: var(--warn-bg); }
table.pt2-all td.mu { color: var(--dim); font-weight: 700; }
.pt2-card .pt2-c3 { margin-top: 2px; font-size: 11px; font-weight: 700; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.pt2-card.pt2-empty { min-height: 46px; }
.pt2-lbox { border: 1px solid var(--line); border-radius: 8px; background: var(--panel); overflow: clip; min-width: min-content; }
.pt2-lbox > .pt2-rail-hd { contain: inline-size; }
.pt2-lbox > .pt2-rail-hd > * { position: sticky; left: 9px; }
.pt2-lbox > .pt2-rail-hd > .mu { left: auto; right: 9px; }
.pt2-lbox table.pt2-list td.pt2-press { position: sticky; left: 0; z-index: 1; }
.pt2-lbox table.pt2-list thead th:first-child { left: 0; z-index: 3; }
table.pt2-rail-t td:first-child { position: sticky; left: 0; z-index: 1; background: var(--panel); border-right-color: transparent; box-shadow: inset -1px 0 var(--line-soft); }
table.pt2-rail-t thead th:first-child { border-right-color: transparent; box-shadow: inset -1px 0 var(--line-soft); }
table.pt2-rail-t thead th:first-child { left: 0; z-index: 3; }
.pt2-lbox + .pt2-lbox { margin-top: 10px; }
.pt2-lbox > .pt2-rail-hd { position: sticky; top: 0; z-index: 3; }
.pt2-lbox > .table-wrap { max-height: none; overflow: visible; border-bottom: 0; }
.pt2-lbox table.pt2-list th { top: 28px; }
.pt2-lbox table.pt2-list tbody tr:last-child td { border-bottom: 0; }
.ssel-pop.ssel-tbl { padding: 0 0 4px; max-height: 360px; }
.ssel-tbl .ssel-hd, .ssel-tbl .ssel-opt.ssel-row { display: grid; grid-template-columns: var(--ssel-cols); gap: 0 8px; align-items: center; }
.ssel-tbl .ssel-hd { position: sticky; top: 0; z-index: 1; background: var(--brand); color: #fff; font-size: 11.5px; font-weight: 700; padding: 5px 10px; }
.ssel-tbl .ssel-opt.ssel-row { border-radius: 0; padding: 5px 10px; border-bottom: 1px solid var(--line-soft); }
.ssel-tbl .ssel-opt.ssel-all { margin: 4px 4px 2px; }
.ssel-tbl .c { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; color: var(--ink-2); }
.ssel-tbl .c.strong { font-weight: 800; color: var(--ink); }
.ssel-tbl .c.ctr { text-align: center; }
.ssel-tbl .c.num { text-align: right; font-variant-numeric: tabular-nums; }
.ssel-tbl .ssel-hd .c { color: #fff; font-weight: 700; }
.ssel-tbl .ssel-empty { padding: 8px 10px; }
.flow-done.neg .flow-t { color: var(--danger-ink); font-weight: 800; }
.flow-card .cf-info .v.neg { color: var(--danger-ink); }
.modal-box.w90:has(.pt2-subpop) { width: calc(100vw - 48px); max-width: none; max-height: calc(100vh - 24px); }
.modal-overlay:has(> .modal-box.w90 .pt2-subpop) { padding: 12px 16px; }
.modal-box:has(.pt2-subpop) .matrix-wrap, .modal-box:has(.pt2-subpop) .table-wrap { max-height: calc(100vh - 236px); }
.modal-box.w90:has(> .modal-body > .pj-body) { width: calc(100vw - 48px); max-width: 1600px; max-height: calc(100vh - 24px); }
.modal-overlay:has(> .modal-box .pj-body) { padding: 12px 16px; }
.modal-box:has(> .modal-body > .pj-body) .table-wrap { max-height: calc(100vh - 300px); }

/* ===== 09-22 사장님: 생산 현황 [배치도] — 줄 단위 · 라인별 폭(ㄱ자) · 현황 한 줄 · 1:1 크기. 카드 = 위 상태 띠 + 상태 글자 안 · 구역 = 옅은 회색 면 ===== */
.pmap { --pitch: 84px; --tw: 44px; --th: 66px; --rowh: 80px; display: flex; flex-direction: column; gap: 16px; padding: 10px 2px 6px; width: max-content; box-sizing: border-box; }
.pmap-zone { --zin: calc(15px - (var(--pitch) - var(--tw)) / 2); position: relative; box-sizing: border-box; width: calc(var(--pitch) * var(--cols) + var(--zin) * 2 + 2px); border-radius: 10px; background: var(--panel); border: 1px solid var(--line); padding: 10px var(--zin) 15px; }
.pmap-leg { display: flex; align-items: baseline; gap: 6px; height: 24px; margin: 0 0 8px calc(15px - var(--zin)); line-height: 24px; }
.pmap-leg b { font-size: 13px; font-weight: 800; color: var(--ink); }
.pmap-leg span { font-size: 12px; font-weight: 700; color: var(--dim); }
.pmap-leg-n { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; }
.pmap-leg-n i { width: 8px; height: 8px; border-radius: 50%; margin-left: 4px; }
.pmap-leg-n i.ok { background: var(--ok); }
.pmap-leg-n i.neg { background: var(--danger); }
.pmap-leg-n i.warn { background: var(--warn); }
.pmap-leg-n b { font-size: 12px; font-weight: 800; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.pmap-row { display: grid; grid-template-columns: repeat(var(--cols), var(--pitch)); height: var(--th); }
.pmap-row + .pmap-row { margin-top: calc(var(--rowh) - var(--th)); }
.pmap-cell { display: flex; justify-content: center; min-width: 0; }
.pmap-tile { position: relative; box-sizing: border-box; width: var(--tw); height: var(--th); flex: none; display: flex; flex-direction: column; overflow: hidden; padding: 0; text-align: left;
  border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--ink-2); cursor: pointer; }
:is(.pmap-tile, .pt2-card) > .bd { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 4px; height: 20px; padding: 0 7px; font-size: 11px; font-weight: 800; color: #fff; white-space: nowrap; font-variant-numeric: tabular-nums; }
:is(.pmap-tile, .pt2-card) > .bd span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.pmap-tile .bd .s { display: none; }
:is(.pmap-tile, .pt2-card) > .bd b { flex: none; font-weight: 800; }
.pmap-tile .by { display: flex; flex-direction: column; gap: 1px; min-width: 0; padding: 5px 7px 0; }
.pmap-tile .no { font-size: 12.5px; font-weight: 800; line-height: 16px; color: var(--ink); white-space: nowrap; }
.pmap-tile .nm { font-size: 11px; font-weight: 700; line-height: 14px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pmap.r4:not(.tv) .pmap-tile > .bd { height: 22px; padding: 0 7px; font-size: 11px; }
.pmap.r4:not(.tv) .pmap-tile .by { padding: 6px 8px 0; }
.pmap.r4:not(.tv) .pmap-tile .no { font-size: 13.5px; line-height: 18px; }
.pmap.r4:not(.tv) .pmap-tile .nm { font-size: 11.5px; line-height: 15px; }
.pmap.r4:not(.tv) .pmap-tile.empty .no { font-size: 12.5px; }
.pmap.r4.tight:not(.tv) .pmap-tile > .bd { height: 20px; padding: 0 5px; font-size: 10.5px; }
.pmap.r4.tight:not(.tv) .pmap-tile .by { padding: 4px 6px 0; }
.pmap.r4.tight:not(.tv) .pmap-tile .no { font-size: 12.5px; line-height: 16px; }
.pmap.r4.tight:not(.tv) .pmap-tile .nm { font-size: 11px; line-height: 14px; }
.pmap.r4.tight:not(.tv) .pmap-tile.empty .by { padding: 0 2px; }
.pmap-tile.run { border-color: var(--ok); }
.pmap-tile.run .bd { background: var(--ok); }
.pmap-tile.stop { border-color: var(--danger); }
.pmap-tile.stop .bd { background: var(--danger); }
.pmap-tile.wait { border-color: var(--warn); }
.pmap-tile.wait .bd { background: var(--warn); color: #3b2d00; }
.pmap-tile.closed .bd { background: var(--dim); }
.pmap-tile.maint .bd { background: repeating-linear-gradient(45deg, #9aa4b2 0 5px, #aab3bf 5px 10px); }
.pmap-tile.empty { background: var(--line-soft); border-color: transparent; justify-content: center; }
.pmap-tile.empty .by { align-items: center; padding: 0 4px; }
.pmap-tile.empty .no { color: var(--dim); font-size: 12px; }
.pmap-tile.empty .nm { color: var(--dim); font-weight: 400; }
.pmap-tile.none { border: 0; background: transparent; cursor: default; }
.pmap-tile.static { cursor: default; }
.pmap-tile:not(.none):not(.static):hover { box-shadow: 0 0 0 2px var(--brand-line-2), 0 4px 12px rgba(20, 30, 50, .12); }
.pmap-dim { opacity: .3; }
.pmap-tail { display: flex; gap: 16px; align-items: stretch; }
.pmap-col { display: flex; flex-direction: column; gap: 16px; flex: none; }
.pmap-info { flex: 1 1 0; width: 0; min-width: 260px; align-self: stretch; }
.pmap-tail.below .pmap-info { width: auto; max-width: 560px; }
.pmap-sum { display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 8px 0 14px; box-sizing: border-box; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); width: 0; min-width: 100%; }
.pmap.tight .pmap-sum { gap: 4px; padding: 0 6px 0 10px; }
.pmap-fs { display: none; margin-left: auto; white-space: nowrap; }
.pmap.tv .pmap-fs { display: inline-flex; }
.pt2-body:fullscreen { margin: 0; padding: 20px 24px; background: var(--bg); overflow: auto; }
.pmap-sum-hd { display: flex; align-items: baseline; gap: 6px; margin-right: 8px; flex: none; white-space: nowrap; }
.pmap-sum-hd b { font-size: 15px; font-weight: 800; color: var(--ink); }
.pmap-sum-hd span { font-size: 12px; font-weight: 700; color: var(--dim); }
.pmap.tight .pmap-sum-hd span { display: none; }
.pmap-stat { display: flex; align-items: center; gap: 6px; height: 28px; padding: 0 8px; box-sizing: border-box; border-radius: 6px; min-width: 0; cursor: pointer; }
.pmap-stat:hover { background: var(--hover); }
.pmap-stat.on { background: var(--brand-bg-2); box-shadow: inset 0 0 0 1px var(--brand-line-2); }
.pmap.tight .pmap-stat { padding: 0 5px; gap: 4px; }
.pmap-stat i { width: 8px; height: 8px; border-radius: 2px; background: var(--line-2); flex: none; }
.pmap-stat span { min-width: 0; font-size: 12.5px; font-weight: 700; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pmap-stat b { flex: none; font-size: 16px; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.pmap-stat.ok i { background: var(--ok); }
.pmap-stat.neg i { background: var(--danger); }
.pmap-stat.neg b { color: var(--danger-ink); }
.pmap-stat.warn i { background: var(--warn); }
.pmap-stat.zero b { color: var(--dim); }
.pmap-info .empty { padding: 18px 0; font-size: 12.5px; color: var(--dim); text-align: center; }
.pmap.tv { gap: 24px; }
.pmap.tv .pmap-zone { padding: 12px var(--zin) 15px; }
.pmap.tv .pmap-leg { height: 30px; line-height: 30px; margin-bottom: 8px; }
.pmap.tv .pmap-leg b { font-size: 16px; }
.pmap.tv .pmap-leg span, .pmap.tv .pmap-leg-n b { font-size: 14px; }
.pmap.tv .pmap-leg-n i { width: 10px; height: 10px; }
.pmap.tv .pmap-tile { border-radius: 10px; }
.pmap.tv .pmap-tile .bd { height: 22px; padding: 0 10px; font-size: 12.5px; }
.pmap.tv .pmap-tile .by { padding: 6px 10px 0; }
.pmap.tv .pmap-tile .no { font-size: 15px; line-height: 18px; }
.pmap.tv .pmap-tile .nm { font-size: 13px; line-height: 16px; }
.pmap.tv .pmap-tile.empty .by { padding: 0 6px; }
.pmap.tv table.pmap-todo col:nth-child(1) { width: 66px !important; }
.pmap.tv table.pmap-todo col:nth-child(2) { width: 132px !important; }
.pmap.tv .pmap-sum { height: 52px; gap: 20px; padding: 0 12px 0 20px; }
.pmap.tv .pmap-sum-hd b { font-size: 20px; }
.pmap.tv .pmap-sum-hd span { font-size: 14px; }
.pmap.tv .pmap-stat { height: 36px; padding: 0 12px; gap: 8px; }
.pmap.tv .pmap-stat i { width: 10px; height: 10px; }
.pmap.tv .pmap-stat span { font-size: 14px; }
.pmap.tv .pmap-stat b { font-size: 22px; }
.pmap.compact .pmap-tile .nm { display: none; }
.pmap.compact .pmap-tile .bd { height: 16px; padding: 0 5px; font-size: 10.5px; justify-content: center; }
.pmap.compact .pmap-tile .bd .l { display: none; }
.pmap.compact .pmap-tile .bd .s { display: block; }
.pmap.compact .pmap-tile .by { padding: 3px 5px 0; }
.pmap.tight .pmap-tile .bd { padding: 0 4px; }
.pmap.tight .pmap-tile .by { padding-left: 4px; padding-right: 4px; }
.pmap.compact .pmap-tile.empty .by, .pmap.tight .pmap-tile.empty .by { padding: 0 2px; }
.pmap.tv .pmap-info { min-width: 320px; }
.pmap.tv table.pmap-todo td { height: 36px; font-size: 13.5px; }
.pmap-note { padding: 7px 10px; font-size: 12px; font-weight: 700; color: var(--warn-ink); border-top: 1px solid var(--line); }
.hover-pop.pmap-pop { width: 300px; padding: 0; border-radius: 10px; line-height: 1.4; box-shadow: 0 10px 32px rgba(20, 30, 50, .18); }
.pmap-memo .hd { display: flex; align-items: center; gap: 6px; padding: 10px 12px 8px; }
.pmap-memo .hd b { font-size: 13.5px; font-weight: 800; color: var(--ink); }
.pmap-memo .hd span:not(.chip) { font-size: 12px; font-weight: 700; color: var(--muted); white-space: nowrap; }
.pmap-memo .hd .chip { margin-left: auto; height: 22px; font-size: 11.5px; padding: 0 8px; border-radius: 6px; white-space: nowrap; }
.pmap-memo .pd { display: flex; align-items: baseline; gap: 8px; padding: 0 12px 8px; min-width: 0; }
.pmap-memo .pd b { font-size: 13px; font-weight: 800; color: var(--ink); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pmap-memo .pd span { flex: none; font-size: 12px; font-weight: 700; color: var(--muted); }
.pmap-memo .kv3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 12px; padding: 8px 12px 10px; border-top: 1px solid var(--line); }
.pmap-memo .kv3 > div { min-width: 0; }
.pmap-memo .kv3 small { display: block; font-size: 11.5px; color: var(--muted); }
.pmap-memo .kv3 b { display: block; font-size: 12.5px; font-weight: 800; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pmap-memo .kv3 b.neg { color: var(--danger-ink); } .pmap-memo .kv3 b.warn { color: var(--warn-ink); }
.pmap-memo .ft { padding: 6px 12px; font-size: 11.5px; font-weight: 700; color: var(--dim); background: var(--bg); border-top: 1px solid var(--line); border-radius: 0 0 10px 10px; }
.pmap-ed-w { gap: 12px; margin: 6px 0 12px; }
.pmap-ed-w .field { width: 130px; }
.pmap-ed-w input { width: 100%; height: 26px; box-sizing: border-box; text-align: center; font-weight: 800; }
table.pmap-ed-t { table-layout: fixed; width: 100%; min-width: 960px; }
table.pmap-ed-t td { height: 26px; padding: 2px 6px; box-sizing: border-box; }
table.pmap-ed-t :is(select, input) { height: 22px; padding: 0 4px; font-size: 12px; font-weight: 700; color: var(--ink-2); border-radius: 5px; box-sizing: border-box; }
table.pmap-ed-t td > select { width: 100%; }
table.pmap-ed-t input[type=number] { width: 56px; text-align: center; }
table.pmap-ed-t tr.off td { background: var(--bg); color: var(--dim); }
.pmap-ed-slots { display: flex; gap: 4px; }
.pmap-ed-slots select { width: 66px; flex: 0 0 66px; }
.pmap-ed-slots select.empty { color: var(--dim); border-style: dashed; }
.pmap-ed-un { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 8px 0 4px; font-size: 12.5px; }
.pmap-ed-un .mu { color: var(--dim); font-weight: 700; }
.pmap-ed-pv { border: 1px solid var(--line); border-radius: 10px; padding: 4px 10px; overflow-x: auto; }
table.pt2-all th { height: 28px; font-size: 12px; padding: 0 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
table.pmap-todo td { height: 32px; }
:is(.oqc-meas, .insp-table, .dim-table, .dimv-table) tbody tr.meas-done > td:not(.in-col):not(.dimin-col):not(.st-col) { background: var(--done-row); }
.iqc-in .oqc-meas.ch tbody tr.meas-done > td[data-ck], .insp-in .insp-table.ch tbody tr.meas-done > td[data-ck], .dim-table.ch tbody tr.meas-done > td.stk { background: var(--done-row); }
.iqc-in.locked :is(input, select, textarea):disabled { opacity: 1; cursor: default; }
.iqc-in.locked :is(input, select, textarea):disabled:not(.ng):not(.warn-in) { color: var(--ink); -webkit-text-fill-color: var(--ink); }
.iqc-in.locked .meas:disabled.ng { -webkit-text-fill-color: var(--danger); }
.cert-vers tr.on > td { background: var(--brand-bg-2); }
.pt2-shell.map-first > .pt2-right { order: 1; }
.pt2-shell.map-first > .pt2-gutter { order: 2; }
.pt2-shell.map-first > .pt2-left { order: 3; }
.pt2-zone { display: inline-flex; align-items: center; gap: 6px; }
.pt2-zone > b { color: var(--ink); }
.pt2-zone > span { color: var(--dim); font-weight: 700; }
table.pt2-list tr.pt2-hl > td { background: var(--brand-bg-2); }
.pmap-tile.pmap-hl { box-shadow: 0 0 0 2px var(--brand-line-2), 0 4px 12px rgba(20, 30, 50, .12); }
.matrix tr.rc1 > td:not(.short) { background: var(--mark-blue); }
.matrix tr.rc2 > td:not(.short) { background: var(--mark-amber); }
.matrix tr.rc3 > td:not(.short) { background: var(--mark-green); }
.kpis5.kpi-pin { position: sticky; top: 56px; z-index: var(--z-kpi); background: var(--bg); padding: 6px 0; margin-top: -6px; }
body.floor-mode #app.shell { grid-template-columns: minmax(0, 1fr); }
body.floor-mode .side, body.floor-mode .main > .top { display: none; }
body.floor-mode .main { height: 100vh; }
body.floor-mode .main > .content { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; padding: 12px 16px; }
.fl { flex: 1 1 0; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) var(--fl-dw, 724px); gap: 14px; }
.fl-main { min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 12px; }
.fl-head { flex: none; display: flex; align-items: center; gap: 14px; padding: 8px 14px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); flex-wrap: wrap; row-gap: 8px; }
.fl-title { display: flex; align-items: baseline; gap: 10px; white-space: nowrap; }
.fl-title b { font-size: var(--fs-stat); font-weight: 800; color: var(--ink); }
.fl-title span { font-size: var(--fs-h2); font-weight: 700; color: var(--muted); }
.fl-btn { height: 36px; font-size: var(--fs-h2); padding: 0 14px; }
.fl-map { flex: 1 1 0; min-width: 0; min-height: 0; overflow: auto; }
.fl-side { min-width: 0; min-height: 0; overflow: auto; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; }
.fl-side .panel-head { margin-bottom: 10px; }
.fl-extra { display: flex; gap: 8px; margin: 0 0 10px; }
.fl-po { display: flex; flex-direction: column; min-height: 0; }
.fl-po > .pt2-rail-hd .mu { margin-left: auto; }
.fl-po > .pt2-rail-hd .btn { height: 22px; }
.fl-po > .table-wrap { flex: 1 1 0; min-height: 0; overflow: auto; }
table.fl-po-t td, table.fl-today td { height: 32px; font-size: var(--fs-md); }
table.fl-po-t td.el, table.fl-today td.el { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html[data-screen="floor"] body:not(.floor-mode) #app.shell { grid-template-columns: 64px minmax(0, 1fr); }
html[data-screen="floor"] .side { width: 64px; padding: 12px 8px 10px; overflow-x: hidden; z-index: 60; 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) .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 { position: absolute; top: 1px; right: 1px; height: 16px; min-width: 16px; padding: 0 4px; font-size: 10.5px; }
html[data-screen="floor"] .top { padding: 0 14px; gap: 10px; }
html[data-screen="floor"] .top .ds { display: none; }
html[data-screen="floor"] .main > .content { padding: 10px 12px 20px; }
html[data-screen="floor"] .fl { grid-template-columns: minmax(0, 1fr); }
html[data-screen="floor"] .fl-side { display: none; }
html[data-screen="floor"] .subtabs.sec .subtab { padding: 0 10px; }
.subtabs.sec > .btn { height: var(--h-btn-sm); padding: 0 12px; font-size: 12px; align-self: center; margin-bottom: 1px; }
.pmap-tile.trial.run, .pt2-card.trial.run { border-color: var(--brand); }
.pmap-tile.trial.run > .bd, .pt2-card.trial.run > .bd { background: var(--brand); }
.pmap-tile.pmap-sel { box-shadow: 0 0 0 3px var(--brand), 0 4px 12px rgba(20, 30, 50, .14); }
.pmap-tile.empty.pmap-sel { background: var(--brand-bg-2); }
.pmap-tile.empty.pmap-sel .no { color: var(--brand-ink); font-weight: 800; }
.trial-map { overflow-x: auto; padding: 4px 2px; }
.trial-top { position: sticky; top: -18px; z-index: 4; background: var(--panel); margin: -18px -18px 0; padding: 18px 18px 12px; border-bottom: 1px solid var(--line); }
.modal-head .hd-row > h3 { flex: 0 1 auto; }
.hd-note { flex: 0 1 auto; min-width: 40px; max-width: 100%; height: 22px; line-height: 20px; padding: 0 10px; border: 1px solid; border-radius: 6px; font-size: 11.5px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-sizing: border-box; cursor: default; }
.hd-note.warn { background: var(--warn-bg); border-color: var(--warn-line, #f1d08a); color: var(--warn-ink); }
.hd-note.brand { background: var(--brand-bg); border-color: var(--brand-line); color: var(--brand-ink); }
.hd-note.neg { background: var(--danger-bg); border-color: var(--danger-line, #f4c7c1); color: var(--danger-ink); }
.hint.warn { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 도면 창 A(09-23 F3) — 왼쪽 Rev 표·정보·이력 300 + 오른쪽 뷰어(비교 = 좌우 2분할) */
.drawing-view.dw2 { flex-direction: row; gap: 10px; }
.dw2-side { flex: 0 0 300px; width: 300px; display: flex; flex-direction: column; gap: 8px; min-height: 0; overflow: auto; }
.dw2.fold .dw2-side { display: none; }
.dw2-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.dw2-bar { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; min-width: 0; overflow: hidden; }
.dw2-bar > b { white-space: nowrap; font-size: 13px; }
.dw2-bar .hint { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.dw2-panes { flex: 1; display: flex; gap: 8px; min-height: 0; }
.dw2-panes > .drawing-wrap { flex: 1; min-width: 0; position: relative; }
.dw2-panes.two > .drawing-wrap::before { content: attr(data-label); position: absolute; top: 6px; left: 6px; z-index: 1; display: inline-block; padding: 0 8px; height: 22px; line-height: 22px; border-radius: 6px; background: var(--ink, #1f2937); color: #fff; font-size: 11.5px; font-weight: 700; }
.dw2-sum { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.dw2-sum .dept-lbl, .dw2-sum .chip { white-space: nowrap; flex: none; }
.dw2-who { display: flex; align-items: center; gap: 6px; }
.dw2-who select { flex: 1; min-width: 0; }
.dw2-revs-wrap { flex: 0 0 auto; max-height: 222px; overflow: auto; }
table.dw2-revs { table-layout: fixed; width: 100%; border-collapse: collapse; font-size: 12px; }
table.dw2-revs th { height: 26px; font-size: 11.5px; font-weight: 700; color: var(--ink-3); background: var(--bg-soft); position: sticky; top: 0; }
table.dw2-revs th, table.dw2-revs td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 6px; border-bottom: 1px solid var(--line); }
table.dw2-revs td { height: 26px; cursor: pointer; }
table.dw2-revs td.l2 { height: 44px; white-space: normal; }
table.dw2-revs td.l2 > div { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 18px; }
table.dw2-revs td .chip { height: 20px; line-height: 1; font-size: 11px; padding: 0 6px; }
table.dw2-revs tr.on td { background: var(--brand-bg); font-weight: 700; }
table.dw2-revs tbody tr:hover td { background: var(--bg-soft); }
.dw2-card { border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; display: flex; flex-direction: column; gap: 6px; }
.dw2-card-h { display: flex; align-items: center; gap: 6px; min-height: 22px; }
.dw2-card-h b { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dw2-kv { display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 4px 8px; font-size: 12px; }
.dw2-kv .k { color: var(--ink-3); font-weight: 700; }
.dw2-kv .v { overflow-wrap: anywhere; }
.dw2-acts .btn.sm { height: 22px; }
.dw2-hist { list-style: none; margin: 0; padding: 0; font-size: 11.5px; display: flex; flex-direction: column; gap: 5px; }
.dw2-hist li { min-width: 0; }
.dw2-h1, .dw2-h2 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dw2-h2 { color: var(--ink-3); padding-left: 2px; }
.dw2-empty { flex: 1; display: flex; align-items: center; justify-content: center; font-size: 13.5px; }
.dw2-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 10px; }
.dw2-grid.one { grid-template-columns: minmax(0, 1fr); }
.dw2-f { display: flex; flex-direction: column; gap: 3px; font-size: 11.5px; font-weight: 700; color: var(--ink-3); min-width: 0; }
.dw2-f > span:first-child { white-space: nowrap; }
.dw2-f :is(input, select) { height: 26px; font-size: 12px; padding: 0 6px; box-sizing: border-box; width: 100%; font-weight: 400; color: var(--ink); }
.dw2-f textarea { font-size: 12px; padding: 4px 6px; box-sizing: border-box; width: 100%; resize: vertical; font-weight: 400; color: var(--ink); }
.dw2-chk { display: flex; align-items: center; gap: 6px; font-size: 12px; min-height: 22px; }
.dw2 input[type=checkbox], .dw2-reg input[type=checkbox] { height: auto; width: auto; }
.dw2-reg { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 14px; height: min(720px, calc(100vh - 170px)); min-height: 420px; }
.dw2-reg-l { display: flex; flex-direction: column; gap: 6px; min-height: 0; }
.dw2-reg-l .drawing-wrap { flex: 1; min-height: 0; background: var(--bg-soft); border: 1px solid var(--line); border-radius: 8px; }
.dw2-reg-l .drawing-wrap.fit img { width: 100%; height: 100%; object-fit: contain; display: block; }
.dw2-drop { padding: 14px 10px; font-size: 12.5px; text-align: center; }
.dw2-reg-r { display: flex; flex-direction: column; gap: 6px; min-height: 0; overflow: auto; }
.modal-box.xl:has(.dw2-reg) { width: min(1120px, 92vw); max-width: 92vw; }
.dw2-sec { margin-top: 4px; }
.dw2-reg-r { overflow-x: hidden; }
.dw2-f :is(input, select, textarea) { min-width: 0; }
/* 성적서 창 A(09-23 F3-2) — 머리 5칸 + 판 표(근거 3칸·상태) */
.modal-box.xl:has(.crt-win) { width: min(1120px, 94vw); max-width: 94vw; }
.crt-head { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)) 180px; gap: 6px 14px; align-items: center; margin-bottom: 8px; }
.crt-head .dkv { min-width: 0; }
.crt-head .dkv .v { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crt-head .dkv select { height: 26px; font-size: 12px; padding: 0 6px; width: 100%; box-sizing: border-box; }
table.crt-t { table-layout: fixed; width: 100%; }
table.crt-t th, table.crt-t td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; height: 26px; padding-top: 2px; padding-bottom: 2px; }
table.crt-t td .chip { height: 20px; line-height: 1; font-size: 11.5px; padding: 0 6px; }
table.crt-t td .chip + .chip { margin-left: 4px; }
table.crt-t td .btn.sm { height: 22px; line-height: 20px; font-size: 11.5px; padding: 0 8px; }
.crt-acts { display: flex; gap: 4px; justify-content: center; align-items: center; }
td.crt-acts { display: table-cell; }
td.crt-acts .btn + .btn { margin-left: 4px; }
.crt-hist { list-style: none; margin: 6px 0 0; padding: 0; font-size: 12px; display: flex; flex-direction: column; gap: 4px; max-height: 180px; overflow: auto; }
.crt-hist li { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 금형 문서 탭 A(09-23 F3-2) — 종류별 현행 1행 + 이력 펼침 */
table.mdoc-t { table-layout: fixed; width: 100%; }
table.mdoc-t th, table.mdoc-t td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; height: 26px; padding-top: 2px; padding-bottom: 2px; }
table.mdoc-t td .chip { height: 20px; line-height: 1; font-size: 11.5px; }
table.mdoc-t td .btn.sm { height: 22px; line-height: 20px; font-size: 11.5px; padding: 0 8px; }
table.mdoc-t td.mdoc-acts .btn + .btn { margin-left: 4px; }
table.mdoc-t tr.mdoc-old td { background: var(--bg-soft); color: var(--ink-3); }
.panel-head select { height: 26px; font-size: 12px; padding: 0 6px; }
.mdoc-reg { display: flex; flex-direction: column; gap: 8px; }
.mdoc-reg .docs-drop { padding: 18px 10px; text-align: center; }
.modal-overlay.drawer .modal-box:has(.mdoc-reg) { width: min(560px, 90vw) !important; max-width: 90vw; }
.crt-head .dkv .k { white-space: nowrap; }
.crt-head .dkv:has(select) { display: flex; align-items: center; gap: 6px; }
.btn.dw-review { position: relative; }
.btn.dw-review::after { content: ''; position: absolute; top: 3px; right: 3px; width: 6px; height: 6px; border-radius: 50%; background: var(--amber, #f59e0b); }
.modal-overlay.drawer .modal-box:has(.dvp) { width: min(1040px, 92vw) !important; max-width: 92vw; }
.dvp .detail-head { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.3fr) repeat(2, minmax(0, 1fr)); gap: 6px 14px; align-items: center; }
.dvp .detail-head .dkv { min-width: 0; } .dvp .detail-head .dkv .k { white-space: nowrap; flex: 0 0 auto; } .dvp .detail-head .dkv .v { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dvp .dvp-flow { padding: 22px 8px 8px; margin: 0 0 8px; border-bottom: 1px solid var(--line); }
.dvp-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; }
.dvp-grid > * { min-width: 0; }
@media (max-width: 960px) { .dvp-grid { grid-template-columns: minmax(0, 1fr); } }
.dvp .fsec .dvp-acts { margin-left: auto; display: inline-flex; gap: 6px; }
.dvp-tl { max-height: 460px; overflow: auto; }
.dvp-next { padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg-soft); font-size: 12.5px; line-height: 1.6; }
.dvp-next.stop { border-color: var(--danger-line); background: var(--danger-bg-2); }
.dvp > .modal-actions { margin-top: 14px; }
.modal-box.md:has(.meas-pop) { width: min(924px, 84vw) !important; max-width: 84vw; } /* 측정 방법 팝업 = md(1320) × 0.7 (09-24 ppt) */
table.spl-t.mp-info th { white-space: normal; word-break: keep-all; overflow: visible; text-overflow: clip; line-height: 1.2; height: auto; padding: 3px 4px; }
table.spl-t.mp-info td { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 1px 4px; }
.dvp-vars { margin: 0 0 10px; }
.dvp-var-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.dvp-var { min-width: 0; border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; background: var(--panel); font-size: 12px; line-height: 1.55; }
.dvp-var.cur { border-color: var(--brand); background: var(--brand-bg); }
.dvp-var.pick { border-color: var(--ok-line); background: var(--ok-bg); }
.dvp-var.out { background: var(--done-row); color: var(--muted); }
.dvp-var-h { display: flex; align-items: center; gap: 6px; font-weight: 700; white-space: nowrap; overflow: hidden; }
.dvp-var-l { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dvp-dots { display: inline-flex; align-items: center; vertical-align: middle; }
.dvp-dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--line); position: relative; flex: 0 0 auto; }
.dvp-dots i + i { margin-left: 9px; }
.dvp-dots i + i::before { content: ''; position: absolute; right: 8px; top: 3.5px; width: 9px; height: 1px; background: var(--line); }
.dvp-dots i.done { background: var(--ok); }
.dvp-dots i.cur { background: var(--brand); box-shadow: 0 0 0 2px var(--chip); }
.dvp-dots i.stop { background: var(--danger); box-shadow: 0 0 0 2px var(--danger-bg-2); }
.dvp-dots b { margin-left: 8px; font-size: 12px; font-weight: 700; }
.dvp-dots.stop b { color: var(--danger); }
.fin-grid.dvp-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.modal-overlay.drawer .modal-box:has(.dvt) { width: min(860px, 92vw) !important; max-width: 92vw; }
.dvt .detail-head { display: grid; grid-template-columns: minmax(0, .6fr) minmax(0, 1.6fr) repeat(2, minmax(0, 1fr)); gap: 6px 14px; align-items: center; margin-bottom: 4px; }
.dvt .detail-head .dkv { min-width: 0; } .dvt .detail-head .dkv .k { white-space: nowrap; flex: 0 0 auto; } .dvt .detail-head .dkv .v { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dvt > .modal-actions { margin-top: 14px; }
.dvt table.spl-form td.v textarea, .dvc table.spl-form td.v textarea { border: 1px solid var(--line); border-radius: 6px; padding: 4px 8px; font: inherit; font-size: 12.5px; resize: vertical; }
.modal-box:has(.dvc) table.spl-form td.v select { height: 26px; }
.dvp { container-type: inline-size; }
@container (max-width: 780px) { .dvp-grid { grid-template-columns: minmax(0, 1fr); } .dvp .detail-head { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dvp-var-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.modal-overlay.drawer .modal-box:has(.spl2) { width: min(820px, 92vw) !important; max-width: 92vw; }
.spl2 { container-type: inline-size; }
.spl2 .detail-head { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px 14px; align-items: center; }
.spl2 .detail-head .dkv { min-width: 0; } .spl2 .detail-head .dkv .k { white-space: nowrap; flex: 0 0 auto; } .spl2 .detail-head .dkv .v { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.spl2 .spl-flow { padding: 22px 8px 8px; margin: 0 0 8px; border-bottom: 1px solid var(--line); }
.spl2 .spl2-who { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-weight: 400; }
.spl2 .spl2-who select { height: 26px; width: 170px; font-size: 12.5px; padding: 0 6px; }
.spl2-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.spl2-card { border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; min-width: 0; font-size: 12.5px; }
.spl2-card.cur { border-color: var(--brand); box-shadow: 0 0 0 2px var(--chip); }
.spl2-card.done, .spl2-card.gray { background: var(--bg-soft); }
.spl2-card.wait { color: var(--muted); }
.spl2-hd { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; } .spl2-hd .chip { margin-left: auto; }
.spl2-kv > div { display: grid; grid-template-columns: 80px minmax(0, 1fr); gap: 8px; line-height: 22px; }
.spl2-kv .k { color: var(--muted); } .spl2-kv .v { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.spl2-card table.spl-form td.k { width: 80px; }
.spl2 > .modal-actions { margin-top: 14px; }
.spl2 .dvp-next { margin-bottom: 8px; }
@container (max-width: 640px) { .spl2-cards { grid-template-columns: minmax(0, 1fr); } .spl2 .detail-head { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ── 로그인(09-23, MES_AUTH=on) — 3100 login 블록 이식. 카드 360 · 입력 36 · 버튼 38(로그인 전용, 앱 안 규격과 무관) ── */
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--bg); }
.login-card { width: 360px; max-width: calc(100% - 32px); background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 24px 24px 20px; display: flex; flex-direction: column; gap: 10px; box-shadow: 0 8px 30px rgba(20,30,50,.08); }
.login-brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 16px; margin-bottom: 4px; }
.login-brand .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; }
.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; color: var(--ink); }
.login-remember { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.login-err { min-height: 18px; font-size: 12.5px; color: var(--danger); font-weight: 700; }
.login-btn { height: 38px; font-size: 14px; justify-content: center; }
.login-hint { font-size: 12px; color: var(--muted); margin: 0; }
.side .foot .rolebox .user-chip { flex: 1; }
.user-chip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--ink); font-size: 12.5px; cursor: pointer; min-width: 0; }
.user-chip b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-chip span { color: var(--muted); font-size: 11.5px; white-space: nowrap; }
.user-pop { position: fixed; z-index: 200; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 4px; display: flex; flex-direction: column; min-width: 160px; box-shadow: 0 6px 20px rgba(20,30,50,.12); }
.user-pop button { text-align: left; background: none; border: 0; padding: 8px 10px; font-size: 13px; border-radius: 6px; cursor: pointer; color: var(--ink); }
.user-pop button:hover { background: var(--hover); }
.matrix.daily.v6 tr.po-cust td { color: var(--muted); font-size: 12px; }
.matrix.daily.v6 tr.po-cust td.c-gubun { font-size: 10.5px; font-weight: 600; text-align: right; padding: 0 3px 0 0; letter-spacing: -0.2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }