:root{
  /* [화면 정리 3차 2026-10-16 · 글자 크기 단계] 글자 크기는 이 10단계에서만 — font-size 에 px 를 직접 쓰지 말 것(차트 SVG CH_STYLE 은 따로) · 표 · 입력 · 필터 = tbl · 본문 = md · CLAUDE.md 6장 42 */
  --fs-2xs:10px; --fs-xs:11px; --fs-sm:12px; --fs-tbl:12.5px; --fs-md:13px; --fs-lg:14px; --fs-xl:16px; --fs-num-sm:20px; --fs-num:22px; --fs-num-lg:26px;
  --shell:#1E3A5F; --shell-dark:#16293F; --shell-line:#35506E;
  --brand:#0A6ED1; --brand-dark:#085CAF;
  /* [시스템 그룹색 토큰 2026-10-13 · 후속 지시서 docs/instructions/색체계_B안_후속_v20261013.md ③] 넷을 여기 한 곳에 — .page-head.sys-* · .kpi-group.sys-* · .nav-group.sys-* 가 이 토큰만 읽는다(--brand · --coral · --positive · hex 를 직접 읽지 않는다). 값은 종전 화면과 같다(색 변경 0).
     -light 는 남색 사이드바 바탕용 밝은 값(그룹 글자 · 지금은 .sidebar 규칙으로 꺼져 있다). 알가공은 진초록(글자 · 테두리 · --c-st-ok 와 같은 값)과 연초록(막대 · [CL] 단백이와 같은 값) 두 단 — 같은 색의 농도로 본다(세원 결정 ④). */
  --sys-ek:#0A6ED1;  --sys-ek-light:#5EA6E8;   /* 에그코리아 — 파랑(= --brand 값 · 따로 적음) */
  --sys-dl:#E9730C;                            /* 다미로직스 — 코랄(= --coral 값 · 따로 적음) */
  --sys-ga:#107E3E;  --sys-ga-light:#5FBF7A;   /* 알가공 — 진초록(= --positive 값) · 연초록(= [CL] --c-ag-danbaegi 값) */
  --sys-cp:#7B52C7;  --sys-cp-light:#B49CE8;   /* 온라인 발주 — 보라(= [CL] --c-ch-kurly 값 · 뜻은 다르다) · 연보라 */
  --sb-active:#F5A623;       /* 사이드바 활성 메뉴 주황 띠(2026-10-13 변수화 · [CL] 반숙란과 같은 값) */
  --positive:#107E3E; --positive-bg:#EBF5EC;
  --negative:#BB0000; --negative-bg:#FBECEC;
  --critical:#E9730C; --critical-bg:#FDF3EA;
  --coral:#E9730C;
  --bg:#F2F4F6; --card:#FFFFFF; --border:#E2E5E8; --border-strong:#CDD3D9;
  --text:#2A2E33; --text-2:#5B6169; --text-3:#8A9199;
  --hover:#EFF5FC; --zebra:#F9FAFB; --sticky:#F5F7F9;
  --radius:8px;
  /* [2026-09-07] 표 좌우 여백의 단일 기준값.
     세 곳(.panel-body.flush 패딩 · .tbl-wrap 의 거터 상쇄 · 가로 잘림 그림자 좌표)이
     같은 값을 봐야 어긋나지 않아 변수로 묶었다. 한 곳만 고치면 다시 벌어진다.
     --tbl-gutter 는 .tbl-wrap 의 scrollbar-gutter 가 잡는 폭(Chromium/Windows 실측 15px). */
  --tbl-side:16px; --tbl-gutter:15px;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;word-break:keep-all;overflow-wrap:break-word}
/* [2026-09-01] 세로 스크롤바 자리를 항상 비워 둔다.
   행 수가 바뀌면(날짜 이동) 페이지 높이가 달라져 스크롤바가 생겼다 없어졌다 하고,
   그때마다 뷰포트 폭이 스크롤바 두께(약 15px)만큼 변한다. 표는 width:100% 라
   그 15px 이 table-layout:fixed 의 "남는 공간 분배"로 전 열에 퍼져 열이 통째로 밀렸다.
   자리를 미리 잡아 두면 폭이 변하지 않아 열 좌표가 그대로 유지된다. */
/* ===== [CL] 색 체계 - 시작 ===== */
/* [2026-10-12 · 지시서 docs/instructions/색체계_v20261012.md · CLAUDE.md 6장 「색 체계」]
   구분별 색 변수 — 코드 어디서든 계열 · 상태 색은 **여기서만** 가져온다(hex 직접 금지 · tests/display-rules.js 가 [CL] 밖 hex 를 센다).
   ① 색 하나에 뜻 하나 — 채널 · 알가열 = 고유색(이름 구분) · 난중 = 한 색상의 4단 농도(순서형 · 2026-10-13 시안 B) · 채널 안 세부(컬리 PB/NB · 쿠팡 등급) = 그 채널 색의 농도.
   ② 상태 5색은 뜻 고정(결론 남 · 미납/감소 적 · 증가/달성 청 · 주의 황토 · 보조 회) — 계열로 쓰지 않는다 · 기호(▲ ▼ !) 병행.
   ③ 글자는 글자색 — 수치 · 이름표 · 범례 글자에 계열 색을 쓰지 않는다 · 색 옆에는 항상 이름표(.od-sw 네모).
   ④ 같은 채널의 원발주 · 확정 · 미납은 색을 늘리지 않고 선 모양(점선 = 원발주 · 실선 = 확정 · 빨강 덧댐 = 미납 · 빈 테두리 = 확정 전).
   ⑤ 주의(황토)는 글자 · 배지만 — 막대 채움 금지. ⑥ 쌓은 막대 조각 사이 2px 흰 간격(.od-band gap).
   ★ [시안 B 2026-10-13 · 지시서 docs/instructions/색체계_B안_막대폭_v20261013.md] 색상(hue)은 **시스템 그룹색 넷**뿐 — 에그 파랑(--brand) · 다미 코랄(--coral) · 알가공 초록(.sys-ga) · 온라인 보라(.sys-cp).
     순서가 있는 구분(난중 · 등급 · NB/PB)은 색이 아니라 **같은 색의 농도**. 쿠팡 = 시스템 기본 파랑과 같은 값이지만 var(--brand) 를 참조하지 않고 값을 따로 적는다(뜻은 변수 이름이 정본 · 6장 🚫).
     지난 값(2026-10-12 · 주간업무보고 색 → 쿠팡 오렌지 #D9640A · 컬리 #7030A0 · MF 초록 #2A8C6E · 총합 하늘 #2E9BB5 · 난중 벽돌/황금/파랑/초록 · 알가열 갈색/파랑/분홍)은 docs/color-system.md 「지난 값」.
   ★ 기존 토큰(--brand · --coral · --positive · --negative)은 에그 · 다미 · 알가공 계열 · 7-2 KPI 액센트에 그대로 남는다 — 3단계가 상태(결손 · 증감 · 주의)만 이쪽으로 잇는다. */
:root{
  --c-ch-coupang:#0A6ED1; --c-ch-kurly:#7B52C7; --c-ch-mf:#2E9BB5;        /* 채널 — 쿠팡프레시 = 시스템 기본 파랑과 같은 값(따로 적음 · 2026-10-13 B) · 컬리 = 온라인 그룹 보라(--sys-cp 와 같은 값) · 쿠팡 MF 청록(옛 총합 선 값 · 3단 툴팁 내역 · 발주 이력 출처 배지에만 남는다) */
  --c-total:#2A2E33;                                                       /* 총합 선(전체 채널 합) = 먹색(--text 와 같은 값 · 따로 적음 · 2026-10-13 B) */
  --c-size-1:#16293F; --c-size-2:#0A6ED1; --c-size-3:#5B93D6; --c-size-4:#A9CBEF;   /* 난중 — 왕 · 특 · 대 · 중(=초) = 남색 → 연파랑 4단 농도(순서형 · 2026-10-13 B) · 중란은 흰 바탕 1.7:1 라 이름표 · 2px 흰 간격 필수 · 왕란 = --shell-dark 와 같은 값(사이드바 전용이라 한 화면에 안 겹친다) */
  --c-pb:#7B52C7; --c-nb:#C5B3EE;                                          /* 컬리 PB · NB(컬리 보라 진함 · 연함 · 2026-10-13 B) */
  --c-gr-1:#0A6ED1; --c-gr-mid:#5B93D6; --c-gr-0:#9CC6EE;                  /* 쿠팡 등급 3단 — 1+등급 진함 · 1등급 중간 · 무등급 연함(쿠팡 파랑 농도 · [IM 1-C 2026-10-14] 1등급 추가 · --c-gr-mid = --c-size-3 와 같은 값 · 따로 적음 · 1등급이 0이면 범례 · 막대에 안 나온다) */                                      /* 쿠팡 1+등급 · 무등급(쿠팡 파랑 진함 · 연함 · 2026-10-13 B · 무등급은 흰 바탕 1.8:1 라 이름표 · 2px 흰 간격 필수) */
  --c-co-egg:#16293F; --c-co-sub:#0A6ED1; --c-co-food:#5B93D6; --c-co-site:#A9CBEF; --c-co-fac:#D6E6F7;   /* [원가 3단계 2026-10-15] 원가 구성 막대 — 원란 · 부자재 · 식품원료 · 제경비 · OEM · 사료 · 판정비(시스템 파랑 농도 5단 · 2px 흰 간격 · 이름표 필수) */
  --c-ag-baked:#E9730C; --c-ag-soft:#F5A623; --c-ag-danbaegi:#5FBF7A;      /* 알가열 — 구운란 코랄(다미 계열 · --c-st-flow 와 같은 값 · 흐름색은 글자 · 배지 · 사이드바 전용이라 막대로 한 화면에 안 나온다) · 반숙란 금색(사이드바 활성 주황 --sb-active 와 같은 값) · 단백이 초록(알가공 그룹색 --sys-ga-light 와 같은 값) — 2026-10-13 B */
  --c-st-head:#102A56;   /* 결론 · 제목 · 강조 수치 */
  --c-st-bad:#C62828;    /* 미납 · 감소 · 경고 · 마감 임박 ▼ */
  --c-st-good:#1565C0;   /* 증가 · 달성 ▲ */
  --c-st-warn:#B26A00;   /* 주의(미납율 25~40% · 「대형발주 영향」) ! · 글자 · 배지만 */
  --c-st-muted:#8A94A6;  /* 보조 · 0 값 · 설명 */
  --c-prod-pc:#1B2F5B; --c-prod-ff:#3E8E6B; --c-prod-ek:#B8701C;   /* [생산처 C안 2026-10-17] 생산처 칸 바탕 — 포천 남색 · 가족 녹색 · 에그코리아 주황(흰 글자 · 칸 안에 늘 이름) · B안 점 값(#3D5A99 · #C77A1E · 글자 #4A5563)은 지움 */
  --c-unknown:#C9D1DC;   /* 미확인(등급 빈칸 등) · 이름표 「미확인」 */
  --c-nav-ganong:#5BC0EB; --c-nav-outsourced:#F6B26B;   /* [SB 그룹색 2026-10-12] 사이드바 묶음 머리 「가농」·「외주」 글자 · 짧은 선 — 가농 하늘 · 외주 살구(남색 --shell 대비 5.6:1 · 6.3:1 · 채널 3색과 다른 값 · 지시서 docs/instructions/사이드바_그룹색_v20261012.md) */
  --negative:var(--c-st-bad);   /* [CL 3단계 2026-10-12] 결손 · 미납 · 캐파 초과 · 저장 실패 토큰을 상태색 적으로 잇는다 — .bg.neg · .kpi.neg · .dot.neg · .toast.err · 미납 글자 · 캐파선 전부 따라온다(위 :root 의 #BB0000 보다 뒤라 이쪽이 이긴다 · --negative-bg 는 그대로).
                                  ★ 초록 · 주황은 아래 --c-st-ok · --c-st-flow 로 이름을 올렸다(2026-10-12 세원 결정 ⓒ · 값 그대로 · 화면 변화 없음). */
  --c-st-ok:#107E3E;     /* 가용 · 충족 · 확정(옛 --positive 값 그대로 · 알가공 계열색이기도 하다) */
  --c-st-flow:#E9730C;   /* 당일 · 기간 활동량 · 경고(깜빡) · 차트 선(옛 --coral/--critical 값 그대로 · 다미 계열색이기도 하다) */
  --positive:var(--c-st-ok); --coral:var(--c-st-flow); --critical:var(--c-st-flow);   /* [CL ⓒ] 옛 토큰을 새 이름에 잇는다 — 값이 같아 화면은 안 바뀐다 · 7-2 KPI 액센트 · 차트 팔레트 그대로 */
  --c-heat-1:#EAF2FB; --c-heat-2:#CFE1F6; --c-heat-3:#A9CBEF; --c-heat-4:#7FB1E6; --c-heat-txt:#0B2E55;   /* 출고 캘린더 농도 4단(지시 표 밖 · 종전 값 그대로 · 원칙 ⑥ 변수화) */
  --c-iv-egg:#16293F; --c-iv-stock:#5B93D6; --c-iv-idx:#E9730C; --c-iv-mer:#B8701C; --c-iv-heat:#5FBF7A; --c-iv-liq:#A9CBEF;   /* [IV 재고 지표 2026-10-17] 총 집란 · 총 재고 · 재고지표 · 상인 판매 · 알가열 이동 · 액란 이동(값은 기존 팔레트에서 · 뜻은 이름) */
}
/* ===== [CL] 색 체계 - 끝 ===== */
html{scrollbar-gutter:stable}
body{
  /* [2026-09-07] 'NanumSquare Neo' 를 뺐다 — **이 파일은 그 폰트를 불러온 적이 없다.**
     설치된 PC 에서만 잡혀 사람마다 글꼴이 갈렸다. 지금은 8행 CDN 으로 실제 받아오는
     Pretendard 하나로 통일된다(고딕형 그대로).
     ⚠️ 폭은 Pretendard 가 더 좁다(실측: 한글 -5~6% · 숫자 -2~3%). 좁아지는 방향이라
        폭이 빠듯해지는 자리는 없다. 흐름도 노드는 두 폰트 모두 min-width:110px 하한에 붙는다. */
  font-family:'Pretendard','Noto Sans KR','Noto Sans CJK KR','Malgun Gothic',-apple-system,BlinkMacSystemFont,sans-serif;   /* [공통 폼글꼴 2026-10-15] 공통 기준 typography — Pretendard → Noto Sans KR → 맑은 고딕 */
  background:var(--bg); color:var(--text); font-size:var(--fs-md); line-height:1.45;
  -webkit-font-smoothing:antialiased;
}
button{font-family:inherit;cursor:pointer}
button,input,select,textarea{font-family:inherit;font-size:inherit}   /* [공통 폼글꼴 2026-10-15] 폼 요소도 본문 글꼴 · 크기를 따른다(브라우저 기본 Arial 13.33px 방지) · 개별 규칙이 크기를 주면 그쪽이 이김 */
svg{display:block}

/* ===== SHELL BAR ===== */
.shell{
  position:fixed;top:0;left:0;right:0;height:46px;background:var(--shell);
  display:flex;align-items:center;padding:0 16px;z-index:100;
  box-shadow:0 1px 0 rgba(0,0,0,.15);
}
.shell .logo{display:flex;align-items:center;gap:10px;color:#fff;cursor:pointer}
.shell .logo:hover .brand-img{opacity:.85}
.shell .brand{display:flex;align-items:center;gap:9px}
.shell .brand .egg{width:24px;height:28px;flex-shrink:0}
.shell .brand .brand-img{height:26px;width:auto;display:block}
.shell .brand .bt{display:flex;flex-direction:column;line-height:1;gap:3px}
.shell .brand .bt b{font-size:var(--fs-xl);font-weight:800;color:#fff;letter-spacing:-.6px}
.shell .brand .bt b em{color:var(--coral);font-style:normal}
.shell .brand .bt small{font-size:var(--fs-2xs);letter-spacing:2.5px;color:#93A2AE;font-weight:700}
.shell .divider{width:1px;height:22px;background:var(--shell-line);margin:0 3px}
.shell .logo .mark{
  width:26px;height:26px;border-radius:6px;background:var(--coral);
  display:flex;align-items:center;justify-content:center;font-weight:800;color:#fff;font-size:var(--fs-md);letter-spacing:-1px;
}
.shell .title{font-weight:800;font-size:var(--fs-lg);letter-spacing:-.3px}
.shell .sub{font-size:var(--fs-xs);color:#B7C2CC;margin-left:9px;padding-left:10px;border-left:1px solid var(--shell-line)}
.shell .spacer{flex:1}
.shell .shell-btn{
  width:32px;height:32px;border-radius:6px;border:none;background:transparent;color:#C7D0D8;
  display:flex;align-items:center;justify-content:center;margin-left:2px;
}
.shell .shell-btn:hover{background:rgba(255,255,255,.1);color:#fff}
.shell .user{
  display:flex;align-items:center;gap:8px;margin-left:10px;padding-left:12px;border-left:1px solid var(--shell-line);
  color:#E4E9ED;font-size:var(--fs-sm);flex-shrink:0;
}
.shell .avatar{width:28px;height:28px;border-radius:50%;background:#5B7186;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:var(--fs-sm);flex-shrink:0}
/* 로그인한 사람 표시 — 이름이 주, 부서(협력사는 회사명)가 보조.
   공용 PC 에서 앞사람 계정으로 작업하는 사고를 막으려면 "누구로 로그인했는지"가 한눈에 보여야 한다.
   ⚠️ max-width + ellipsis 는 필수다 — 이름·이메일이 길어도 상단바(46px 고정)를 밀지 않게 한다.
   .who-sub:empty 는 보조줄이 빈 계정에서 빈 줄이 남지 않도록 접는다. */
.shell .user .who{display:flex;flex-direction:column;align-items:flex-end;justify-content:center;line-height:1.25;min-width:0}
.shell .user .who-name{font-size:var(--fs-tbl);font-weight:700;color:#F0F4F7;max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.shell .user .who-sub{font-size:var(--fs-2xs);color:#93A2AE;max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.shell .user .who-sub:empty{display:none}

/* ===== SIDEBAR ===== */
.sidebar{
  position:fixed;top:46px;left:0;bottom:0;width:216px;background:var(--shell);z-index:90;
  display:flex;flex-direction:column;padding-top:8px;
}
.nav-item{
  display:flex;align-items:center;gap:11px;height:44px;padding:0 18px;color:#BDC7D0;
  font-size:var(--fs-md);font-weight:600;border:none;background:transparent;width:100%;text-align:left;
  border-left:3px solid transparent;transition:background .12s;
}
.nav-item:hover{background:var(--shell-dark);color:#fff}
.nav-item.active{background:var(--shell-dark);color:#fff;border-left-color:var(--coral)}
.nav-item svg{width:18px;height:18px;flex-shrink:0}
.nav-sep{height:1px;background:var(--shell-line);margin:8px 16px}

/* ===== MAIN ===== */
.main{margin-left:216px;margin-top:46px;padding:18px 22px 40px}
.page-head{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:16px}
.page-head h1{font-size:var(--fs-num-sm);font-weight:800;letter-spacing:-.4px}
.page-head .crumb{font-size:var(--fs-xs);color:var(--text-3);margin-bottom:3px}
.page-head .desc{font-size:var(--fs-sm);color:var(--text-2);margin-top:3px}
/* 시스템별 색상 코딩 — 에그코리아=블루/다미로직스=코랄/홈=네이비. 좌측 액센트 바 + breadcrumb
   색상만 사용(상태색 .kpi.pos/.crit 등과는 별개 용도, 카드·아이콘 색은 건드리지 않음). */
.page-head.sys-ek,.page-head.sys-dl,.page-head.sys-home{border-left:3px solid;padding-left:12px}
.page-head.sys-ek{border-color:var(--sys-ek)}   /* [시스템 그룹색 토큰 2026-10-13] 그룹색은 :root --sys-* 만 읽는다 */
.page-head.sys-ek .crumb{color:var(--sys-ek);font-weight:700;font-size:var(--fs-sm)}
.page-head.sys-dl{border-color:var(--sys-dl)}
.page-head.sys-dl .crumb{color:var(--sys-dl);font-weight:700;font-size:var(--fs-sm)}
.page-head.sys-home{border-color:var(--shell)}
.page-head.sys-home .crumb{color:var(--shell);font-weight:700;font-size:var(--fs-sm)}
/* 알가공(가농 자체 생산) 계열색 [2026-09-19] — 에그 brand(파랑)·다미 coral(주황)과 갈라야 해서 Forest(--positive)를 쓴다.
   ⚠️ 상태색(pos)과 같은 값이지만 자리가 다르다(페이지 머리·사이드바 그룹명 vs 배지). 헷갈리면 전용 토큰을 만들 것. */
.page-head.sys-ga{border-color:var(--sys-ga)}
.page-head.sys-ga .crumb{color:var(--sys-ga);font-weight:700;font-size:var(--fs-sm)}
table.dt tr.ga-mark td:first-child{box-shadow:inset 3px 0 0 var(--brand)}   /* 재고회전일 표의 「오늘」 행 */
table.dt tr.ga-dim td{color:var(--text-3)}                        /* 출고 추천에서 출고 기한·소비기한으로 제외된 로트 */

/* ===== FLOW CHAIN ===== */
.flow{
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
  padding:16px 20px;margin-bottom:16px;display:flex;align-items:center;gap:0;overflow-x:auto;
}
/* 공급망 흐름도(두 갈래 경로)처럼 여러 줄을 세로로 쌓아야 하는 경우 전용 — 원래 .flow(단일 가로줄,
   에그코리아 일일 공정 흐름 ekProcessFlow 등에서 사용 중)는 그대로 두고 이 modifier로만 세로 배치. */
.flow.flow-multi{flex-direction:column;align-items:stretch;gap:12px;overflow-x:visible}
.flow-row{display:flex;align-items:center;gap:0;overflow-x:auto}
.flow-node{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:150px;text-align:center}
.flow-node .ic{width:44px;height:44px;border-radius:10px;display:flex;align-items:center;justify-content:center;color:#fff}
.flow-node .ic.a{background:#5B7186}.flow-node .ic.b{background:var(--coral)}.flow-node .ic.c{background:var(--brand)}
.flow-node .nm{font-weight:800;font-size:var(--fs-md)}
.flow-node .lc{font-size:var(--fs-xs);color:var(--text-2)}
.flow-node .tag{font-size:var(--fs-2xs);color:var(--text-3);background:var(--bg);padding:2px 7px;border-radius:10px;margin-top:1px}
.flow-arrow{flex:1;min-width:70px;display:flex;flex-direction:column;align-items:center;color:var(--text-3);gap:2px}
.flow-arrow .ln{font-size:var(--fs-2xs);font-weight:700;color:var(--coral)}
.flow-arrow svg{width:100%;height:14px}

/* ===== 에그코리아 일일 공정 흐름 (에그코리아 대시보드 전용) ===== */
.eflow-node{display:flex;flex-direction:column;align-items:center;gap:5px;min-width:110px;text-align:center}
.eflow-node .ic{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;color:#fff}
.eflow-node .ic.a{background:var(--shell)}.eflow-node .ic.b{background:var(--coral)}.eflow-node .ic.c{background:var(--brand)}.eflow-node .ic.crit{background:var(--critical)}
/* [2026-09-07] tabular-nums — 여기는 세로 비교가 아니라 **화살표 길이** 때문이다.
   노드 폭이 변하면 `.flow-arrow{flex:1}` 이 남는 공간을 나눠 가져 화살표 3개가 함께 흔들린다
   (2026-09-06 에 보조줄로 한 번 겪은 문제). 숫자 폭을 고정해 그 경로를 하나 더 막는다.
   ※ 지금은 다섯 노드가 전부 min-width:110px 하한에 붙어 있어 화면 변화는 없다(실측). */
.eflow-node .vl{font-size:var(--fs-num-sm);font-weight:800;letter-spacing:-.5px;color:var(--text);font-variant-numeric:tabular-nums}
.eflow-node .vl small{font-size:var(--fs-2xs);font-weight:600;color:var(--text-3);margin-left:2px}
.eflow-node .lb{font-size:var(--fs-xs);font-weight:700;color:var(--text-2)}
.eflow-node .sub{font-size:var(--fs-2xs);color:var(--text-3)}
.ek-chart{width:100%;height:180px;display:block}
/* 차트 호버 툴팁 (v4 방식 복원) — 툴팁은 SVG 밖 absolute div, 마우스를 가로채지 않도록 pointer-events 해제 */
.ch-wrap{position:relative}
.ch-fit{width:100%}   /* [SVG 1:1 2026-10-13 후속] 차트 svg 틀 — 높이는 인라인(viewBox 높이) · 폭 실측용 */
.ch-tip{position:absolute;top:4px;background:#1A2433;color:#fff;border-radius:5px;padding:6px 9px;
  font-size:var(--fs-xs);line-height:1.6;pointer-events:none;white-space:nowrap;box-shadow:0 4px 12px rgba(0,0,0,.22);z-index:3}   /* [차트 스타일 2026-10-13] 툴팁 글자 10.5 → 11(caption 체계) */
.ch-tip .t{font-weight:800;margin-bottom:2px;color:#DBE4EF}
/* [2026-09-06] flex-wrap 추가 — 범례 항목이 늘면서(주간 차트 2→4개, 30일 차트에 최대값 표기)
   .panel-head 가 wrap 하지 않아 좁은 폭에서 .panel{overflow:hidden} 에 **잘려 나갈** 수 있었다.
   줄바꿈을 허용하면 잘리는 대신 헤더가 한 줄 높아진다. 쓰는 곳은 살아 있는 차트 패널 2개뿐이다
   (donutRawByPum 의 범례는 2026-09-04 에 화면에서 내려 호출되지 않는다). */
.chart-legend{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:var(--fs-xs);color:var(--text-2)}
.chart-legend span{display:flex;align-items:center;gap:5px}
.chart-legend i{width:9px;height:9px;border-radius:2px;display:inline-block}
.hbar-row{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.hbar-row:last-child{margin-bottom:0}
.hbar-lb{width:106px;font-size:var(--fs-sm);color:var(--text-2);flex-shrink:0}
.hbar-track{flex:1;height:calc(14px * var(--bar-w, 1));background:var(--bg);border-radius:7px;overflow:hidden}   /* [막대 폭 2026-10-13 후속] 두께 = 14px × BAR_W(JS 가 --bar-w 로 넣는다) · 에그 · 알가공 .hbar-row 와 온라인 .hbs/.hbg 전부 */
.hbar-fill{height:100%;background:var(--brand);border-radius:7px}
.hbar-fill.pos{background:var(--positive)}.hbar-fill.crit{background:var(--critical)}
.hbar-val{width:64px;text-align:right;font-size:var(--fs-sm);font-weight:700;color:var(--text);flex-shrink:0}
.date-nav{display:flex;align-items:center;gap:6px}
.date-nav input[type=date]{height:30px;border:1px solid var(--border-strong);border-radius:6px;padding:0 8px;font-size:var(--fs-sm);font-family:inherit;color:var(--text);background:var(--card)}
/* 날짜 이동 기능 없이 자동저장 배지만 올려두는 자리(다미로직스 입고 등록·출고) — .date-nav와 레이아웃은
   같지만 실제 날짜 조회 기능이 없어 혼동 방지를 위해 클래스를 분리함. */
.badge-row{display:flex;align-items:center;gap:6px}
/* ===== 모달 (생산 실적 추가 등 공용) ===== */
.modal-overlay{position:fixed;inset:0;background:rgba(20,30,40,.5);z-index:500;display:flex;align-items:center;justify-content:center;padding:20px}
.modal-card{background:var(--card);border-radius:var(--radius);width:640px;max-width:100%;max-height:88vh;overflow:auto;box-shadow:0 24px 60px rgba(0,0,0,.35)}
/* [2026-10-12 세원 · 지시서 docs/instructions/에그_생산투입_로트칸_v20261012.md] 위쪽 정렬 모달 — 로트 select 가 맨 위에 있는 작은 모달(생산투입 · 원란 실사)은 세로 가운데에 두면
   select 아래 공간이 모자라 브라우저가 목록을 **위로** 펼친다(기본 select 는 펼침 방향을 코드로 못 정한다 · 직접 그리는 목록으로 바꾸지 않는다). 자리로 푼다 — 위쪽 정렬 + 상단 여백. */
.modal-overlay.modal-top{align-items:flex-start;padding-top:7vh}
.modal-head{padding:18px 22px;border-bottom:1px solid var(--border)}
.modal-head h3{font-size:var(--fs-xl);font-weight:800}
.modal-head .sub{font-size:var(--fs-sm);color:var(--text-2);margin-top:3px}
.modal-body{padding:20px 22px}
.modal-foot{padding:14px 22px;border-top:1px solid var(--border);display:flex;justify-content:flex-end;gap:8px}
/* ===== 자료실 HTML 뷰어 [2026-09-08] =====
   ★ render() 트리 밖(document.body 바로 아래)에 붙인다 — render 가 innerHTML 을 새로 그리면
     iframe 이 통째로 다시 로드돼 문서 안 스크립트가 처음부터 다시 돈다(3MB 재파싱).
     저장 배지를 노드만 갱신하도록 바꾼 것과 같은 이유다(2026-09-07). */
.docv{position:fixed;inset:0;z-index:600;background:rgba(20,30,40,.55);display:flex;align-items:center;justify-content:center;padding:20px}
.docv-card{background:var(--card);border-radius:var(--radius);width:1180px;max-width:100%;height:92vh;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.35)}
.docv-head{padding:12px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px;flex:0 0 auto}
.docv-head .t{font-size:var(--fs-lg);font-weight:800;flex:1;min-width:0;white-space:normal;overflow-wrap:break-word}
.docv-body{flex:1;position:relative;background:#fff;min-height:0}
.docv-body iframe{width:100%;height:100%;border:0;display:block}
.docv-status{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:var(--card);color:var(--text-2);font-size:var(--fs-md)}
.docv-bar{width:220px;height:6px;border-radius:3px;background:var(--border);overflow:hidden}
.docv-bar i{display:block;height:100%;width:0;background:var(--brand);transition:width .15s}
/* 전체화면일 때 카드가 화면을 꽉 채우도록 */
.docv:fullscreen{padding:0;background:#fff}
.docv:fullscreen .docv-card{width:100%;height:100%;border-radius:0;box-shadow:none}
/* ===== 필터 탭 + 검색 ===== */
.filter-bar{display:flex;align-items:center;gap:8px;margin-bottom:14px;flex-wrap:wrap}
.filter-tab{height:32px;padding:0 14px;border-radius:7px;border:1px solid var(--border-strong);background:var(--card);color:var(--text-2);font-size:var(--fs-tbl);font-weight:700;font-family:inherit}
.filter-tab.active{background:var(--shell);border-color:var(--shell);color:#fff}
.search-box{display:inline-flex;align-items:center;gap:4px}   /* [4차 2026-10-11] 검색칸 + 「검색」 + 「×」 */
.search-box .search-x{min-width:28px;padding:0 8px;font-size:var(--fs-lg);line-height:1}
.filter-search.fs-auto,.filter-search.sm.fs-auto{width:auto}   /* [작은 정리 2026-10-16] 표 밖 날짜 칸(이월률 기간 = 패널 머리라 sm 26px · 가족농장 판정 기준일 = 32px)도 검색 칸과 같은 모양 · 폭만 내용대로 */
.filter-search.sm{height:26px;width:150px;font-size:var(--fs-sm);padding:0 8px;border-radius:6px}
.panel-head .search-box{margin:-5px 0}   /* 패널 헤더 안 검색칸(알가공 발주 내역) — 「검색」 버튼 30px 가 h3 줄상자(20.3px)를 넘어 헤더가 커지지 않게 바깥 높이만 줄인다(screen-metrics 7-7 · link-btn 과 같은 방식). 클릭 영역은 그대로 */
.filter-search{height:32px;border:1px solid var(--border-strong);border-radius:7px;padding:0 10px;font-size:var(--fs-tbl);font-family:inherit;color:var(--text);width:200px}
.filter-bar select{height:32px;border:1px solid var(--border-strong);border-radius:7px;padding:0 8px;font-size:var(--fs-tbl);color:var(--text);background:var(--card)}   /* [공통 폼글꼴 2026-10-15] 필터 줄 고르기 = 검색 칸과 같은 모양(모든 화면 공통 · 화면마다 따로 쓰지 않기) */
.pum-dot{width:9px;height:9px;border-radius:50%;display:inline-block;margin-right:6px;vertical-align:middle}
/* 품종 색의 단일 출처 [2026-09-04] — 점(.pum-dot)과 막대(.progress-fill)가 같은 규칙을 쓴다.
   색을 바꿀 일이 생기면 이 세 줄만 고치면 화면 전체가 따라온다. 품종별로 색을 다시 적지 말 것. */
.pum-dot.p-omg,.progress-fill.p-omg{background:var(--brand)}
.pum-dot.p-vit,.progress-fill.p-vit{background:var(--coral)}
.pum-dot.p-jr, .progress-fill.p-jr {background:var(--shell)}
.progress-row{margin-bottom:14px}
.progress-row:last-child{margin-bottom:0}
.progress-row .pr-head{display:flex;justify-content:space-between;align-items:baseline;font-size:var(--fs-tbl);margin-bottom:5px}
.progress-row .pr-name{font-weight:700;color:var(--text)}
.progress-row .pr-num{color:var(--text-2)}
.progress-track{height:calc(10px * var(--bar-w, .7) / .7);background:var(--bg);border-radius:5px;overflow:hidden}
.progress-fill{height:100%;background:var(--brand);border-radius:5px}
.progress-fill.crit{background:var(--critical)}
/* 에그코리아(index.html) 원본과 동일한 깜박임 애니메이션 재사용 (일원화) */
@keyframes eggpulse{0%,100%{opacity:1}50%{opacity:.35}}
.egg-blink{animation:eggpulse 1s ease-in-out infinite}
/* 로딩 펄스 — 데이터 로드 전 KPI 카드를 깜빡임(위 eggpulse 재사용).
   컨테이너(.kpis / .kpi-group)에 is-loading 을 달면 그 안의 카드가 전부 깜빡인다. */
.kpis.is-loading .kpi,.kpi-group.is-loading .kpi{animation:eggpulse 1s ease-in-out infinite}
/* 접근성 — 동작 줄이기를 켠 사용자에겐 펄스도 카운트업도 끔(카운트업은 JS 쪽에서 차단). */
@media (prefers-reduced-motion:reduce){
  .kpis.is-loading .kpi,.kpi-group.is-loading .kpi,.egg-blink{animation:none}
}

/* ===== KPI TILES ===== */
.kpis{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin-bottom:16px}
/* 홈 대시보드 KPI를 시스템별로 묶는 용도(액센트 바 + 소제목). 카드 자체 색은 안 건드림. */
.kpi-group{margin-bottom:14px}
.kpi-group-head{font-size:var(--fs-sm);font-weight:800;letter-spacing:.2px;margin-bottom:8px}
.kpi-group.sys-ek .kpi-group-head{color:var(--sys-ek)}   /* [시스템 그룹색 토큰 2026-10-13] 넷 다 :root --sys-* */
.kpi-group.sys-dl .kpi-group-head{color:var(--sys-dl)}
.kpi-group.sys-ga .kpi-group-head{color:var(--sys-ga)}
.kpi-group.sys-cp .kpi-group-head{color:var(--sys-cp)}   /* [OD] 온라인 발주 묶음 — 페이지 머리 sys-cp 와 같은 토큰 */
.kpi-group.sys-cp .kpi .vl{font-size:var(--fs-num);white-space:nowrap}
.kpi-group .kpi .sub{white-space:normal;overflow-wrap:break-word}   /* [화면정리 2차 2026-10-15] 말줄임 → 줄바꿈(글자는 다 보여 준다) */   /* [표시 보정 2026-10-11] 묶음 4개가 되며 칸이 좁아져(137px) 「최근 30일 · 발주 N알 / 출고 N알」이 두 줄로 꺾였다 — 한 줄 + … · 전체 글은 title */   /* [OD] 「2,985만원」이 좁은 칸(약 137px)에서 두 줄로 꺾이지 않게 — 대시보드 KPI 와 같은 22px */
/* [2026-09-07] overflow:hidden → visible.
   숨긴 이유는 **액센트 바(::before)의 각진 모서리를 카드 둥근 모서리에 맞춰 깎는 것 하나**였다
   (.kpi 안에서 absolute 인 요소는 ::before 뿐이고, 나머지 .lb/.vl/.sub 는 평범한 블록이다).
   그래서 바 자체에 왼쪽 모서리를 주고 hidden 을 걷었다.
   ★ 걷은 이유: 값이 칸을 넘칠 때 **읽을 수 있는 숫자로 잘려 나갔다.**
     `12,345,678` 이 `12,345,67` 로 보여 **1,234만이 123만으로 읽힌다**(10배 오독).
     넘쳐서 옆 카드를 침범하는 편이 낫다 — 최소한 눈에 띄고, 틀린 값으로 읽히지 않는다.
   ※ 여백(padding 14px)과 테두리(1px)가 있어 자식 margin 이 부모 밖으로 빠져나가지 않는다
     (margin collapse 는 hidden 이 만들던 BFC 가 아니라 이쪽이 막고 있었다 — 카드 높이 불변). */
.kpi{
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:14px 15px;
  position:relative;overflow:visible;
}
/* 🚨 반지름은 var(--radius)(=8px) 를 쓸 것. 숫자를 박으면 카드 모서리와 어긋난다. */
.kpi::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--brand);
  border-radius:var(--radius) 0 0 var(--radius)}
.kpi.pos::before{background:var(--positive)}.kpi.neg::before{background:var(--negative)}
.kpi.crit::before{background:var(--critical)}.kpi.coral::before{background:var(--coral)}
.kpi .lb{font-size:var(--fs-xs);color:var(--text-2);font-weight:600;display:flex;align-items:center;gap:5px}
/* [2026-09-07] tabular-nums — 카운트업 도중 자릿수가 바뀌며 폭이 출렁이던 것을 잡는다.
   Pretendard 숫자는 폭이 제각각이라(실측: 9자리에서 111,111,111 109.9px ↔ 888,888,888 155.2px,
   편차 45.3px) 카운트업이 지나갈 때 숫자가 좌우로 흔들렸다. tabular 를 켜면 편차가 0 이 된다.
   ⚠️ 대신 폭 자체는 +3~11px 늘어난다. **7자리 값이 들어오면 1280·1366px 에서 잘린다**
      (`.kpi{overflow:hidden}`). 7자리는 tabular 없이도 1280px 에서 이미 넘쳤다 — 0장 09-07 기록 참조. */
.kpi .vl{font-size:var(--fs-num-lg);font-weight:800;letter-spacing:-1px;margin-top:6px;font-variant-numeric:tabular-nums}
.kpi .vl small{font-size:var(--fs-sm);font-weight:600;color:var(--text-3);margin-left:3px}
.kpi .sub{font-size:var(--fs-xs);color:var(--text-3);margin-top:2px}
.kpi .sub.up{color:var(--positive)}.kpi .sub.dn{color:var(--negative)}

/* ===== PANELS ===== */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px}   /* 통합 대시보드 KPI 그룹 3개(에그·다미·알가공) [2026-09-19] — 1180px 이하 1열 */
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}   /* [OD 2026-10-11] 통합 대시보드 묶음 4개(온라인 발주 + 회사 3) — 1180px 이하 2열 */
.grid4 > .home-ext,.grid3 > .home-ext{position:relative}.grid4 > .home-ext::before,.grid3 > .home-ext::before{content:'';position:absolute;left:-8px;top:0;bottom:0;border-left:1px solid var(--border-strong)}   /* [NM 3차 2026-10-11 · 5차에서 자리 이동] 외주 | 가농 구분 — 칸 사이(16px 틈 한가운데) 세로선 · 사이드바 묶음 구분과 같은 뜻 · 알가공 묶음 · 패널(가농 첫째)에 붙는다 */
.panel{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);margin-bottom:16px;overflow:hidden}
.panel-head{
  display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--border);
}
.panel-head h3{font-size:var(--fs-lg);font-weight:800;white-space:nowrap}
/* [2026-09-07] 🚨 **이 음수 여백을 지우지 말 것 — 장식이 아니라 높이 계산을 막는 장치다.**
   `.panel-head` 는 높이 지정이 없어 **가장 높은 자식이 헤더 높이를 정한다**
   (상하 padding 24 + 자식 + 아래 선 1). 제목 h3 의 줄상자는 20.3px 인데
   버튼(.link-btn)은 28px, 배지(.bg)는 21.6px 라 **그 패널만 헤더가 커졌다.**
   그 결과 같은 grid2 행에 나란히 놓인 패널의 **제목 아래 구분선 높이가 어긋났다**
   (실측: 버튼 있는 쪽 53.0px ↔ 없는 쪽 45.3px · 배지 46.6px ↔ 없음 45.3px).
   ▶ 음수 여백으로 자식의 **바깥 높이만** 줄여 h3 줄상자 안에 들어오게 한다.
     · .link-btn 28 − 8 = 20 ≤ 20.3 ✅   · .bg 21.6 − 2 = 19.6 ≤ 20.3 ✅
   ★ **클릭 영역(height:28px)은 그대로다** — 줄인 것은 레이아웃 계산상의 바깥 높이뿐이다.
     버튼을 작게 만드는 안(28→22px)은 클릭 영역이 줄어 채택하지 않았다.
   ⚠️ 헤더에 **28px 보다 높은 요소를 새로 넣으면 다시 어긋난다.** 그때는 여기에 같이 등록할 것.
   [2026-09-22] 필터·입력칸 두 종을 등록했다 — **표시검사(`tests/display-rules.js`)가 6건을 잡아서**다.
     · .pumf(품종·맛 필터) 26 − 6 = 20 ≤ 20.3 ✅   · .panel-head input(날짜·검색) 26 − 6 = 20 ≤ 20.3 ✅
     예전에는 .pumf 를 "짝이 없는 패널이라 두고 있다"고 적어 두었는데(7-7), 그건 **검사가 없어 확인
     비용이 컸을 때의 판단**이다. 이제 전 화면이 6.5초면 확인되므로 예외를 늘리지 않는 쪽으로 바꿨다.
   🚫 인라인 style="height:26px" 이 붙은 input 3개(ga-turn-from·ga-turn-to·ga-o-search)는 그대로 두었다 —
     인라인 style 정리는 0-2 미결 항목이라 별건이다. 여백은 인라인과 충돌하지 않는다. */
.panel-head .link-btn{margin:-4px 0}
.panel-head .bg{margin:-1px 0}
.panel-head .pumf,.panel-head input{margin:-3px 0}
/* [2026-09-07] 헤더 안 요소 묶음 — **.l(왼쪽 묶음) / .r(오른쪽 묶음) 한 쌍이다.**
   ⚠️ 여기의 .l/.r 은 `td.l`/`td.r` 의 **글자 정렬이 아니라 자리 묶음**이다.
      정렬 규칙은 선택자가 table.dt 로 갈려 있어(table.dt td.l 등) 서로 간섭하지 않는다.
   ▶ **왜 필요한가** — .panel-head 는 justify-content:space-between 이라 요소가 3개가 되면
     **가운데 것이 화면 한복판에 떠 버린다.** 실측(2026-09-07 · 에그코리아 대시보드 '출고 실적'):
     제목–배지 477.7px, 배지–버튼 477.7px 로 똑같이 벌어졌고, 그 거리는 창 폭을 따라
     269.7px(1024) ~ 717.7px(1920) 로 움직였다. 자리를 정해 둔 요소라면 이렇게 떠다니지 않는다.
     배지는 **제목의 조건**을 적는 것이라(예: '최근 30일') 제목 옆이 제자리다 —
     나머지 배지 19곳도 전부 제목과 짝이 되어 우측 끝에 붙어 있다.
   ▶ 그래서 **세 요소를 두 묶음으로 만든다**: .l = 제목+배지 / .r = 오른쪽 것들.
     space-between 이 나눌 대상이 둘뿐이라 가운데가 생기지 않는다.
   ★ **헤더 높이는 45.3px 그대로다**(실측) — 묶음의 높이는 h3 줄상자 20.3px 가 정하고,
     배지는 바로 위 .panel-head .bg 의 -1px 로 19.6px 라 그 안에 들어온다.
   ※ 요소가 3개 이상인 패널이 또 생기면 **여기 두 묶음에 나눠 담을 것.**
     2026-09-07 실측 기준 전 화면 패널 헤더 29개 중 3요소는 '출고 실적' 하나뿐이다
     (1요소 8개 · 2요소 20개). 2요소는 space-between 만으로 제자리라 건드리지 않았다. */
.panel-head .l,.panel-head .r{display:flex;gap:8px;align-items:center}
/* 품종 필터 pill (원란 입고 원란재고 현황) — 한 번에 하나만 선택. 선택은 aria-pressed 로 표시한다
   (스타일 훅이자 스크린리더에도 눌림 상태가 전달됨). 색은 에그코리아 계열 = var(--brand). */
.pumf{display:inline-flex;gap:4px}
.pumf button{height:26px;padding:0 10px;border-radius:13px;border:1px solid var(--border-strong);
  background:#fff;color:var(--text-2);font-size:var(--fs-xs);font-weight:700;font-family:inherit;cursor:pointer;
  display:inline-flex;align-items:center;gap:5px;transition:background .12s,color .12s,border-color .12s}
.pumf button:hover{background:var(--hover)}
.pumf button[aria-pressed="true"]{background:var(--brand);border-color:var(--brand);color:#fff}
.pumf .n{font-size:var(--fs-2xs);font-weight:800;opacity:.7}
.panel-body{padding:14px 16px}
/* [2026-09-07] flush 의 의도와 좌우 여백 — 근거가 없던 자리라 여기에 적어 둔다.
   ▶ **왜 flush 인가(원래 의도)** — 표를 .tbl-wrap 으로 감싸 **sticky 헤더·합계 행의
     스크롤 컨테이너를 만들기 위해서다.** 위아래 패딩이 있으면 헤더가 붙는 위치가 어긋나고,
     표가 패널 폭을 꽉 채우지 못해 고정 열 폭(w-name 150px 등) 합계를 담을 여지가 줄어든다.
     ※ 최초 이관 커밋(130d334)부터 있던 규칙인데 설명이 없었다. 2026-09-07 에 조사해 적었다.
   ▶ **왜 좌우만 16px 를 주는가(2026-09-07 추가)** — 위아래는 0 이 맞지만 **좌우 0 은 아니었다.**
     실측: flush 표 15개가 **표 좌 0px / 글자 좌 10px** 로 첫 열이 패널 테두리에서 바로 시작했고,
     오른쪽 15px 는 여백이 아니라 scrollbar-gutter 가 잡아 둔 **스크롤바 자리**라 좌우가 0:15 로
     비대칭이었다. pad body 표(원란 숙성 현황)는 26:26 로 대칭이다 — 그쪽이 기준이다.
   ⚠️ **여기 패딩만으로는 좌우가 맞지 않는다(2026-09-07 정정).** 오른쪽은 이 16px **뒤에**
     .tbl-wrap 의 거터 15px 가 더 붙어 **16:31** 이었다(실측 · .tbl-wrap 을 쓰는 표 17개 전부).
     상쇄는 거터를 만든 쪽에서 한다 — 아래 .tbl-wrap 의 margin-right 참조.
     🚫 여기서 좌우 padding 을 다르게 주는 방식(오른쪽 1px)은 쓰지 말 것 — 이 선택자가
        .flush 에만 걸려 **백업 패널처럼 flush 가 아닌 panel-body 의 표 2개를 놓친다.**
   ⚠️ **대가: 표에 쓸 수 있는 폭이 17px 줄어 가로로 잘리는 표가 늘어난다**
     (좌우 32px 중 15px 는 .tbl-wrap 의 margin-right 로 되돌려 받는다).
     그래서 아래 .tbl-wrap 의 '가로 잘림 그림자'를 함께 넣었다. 하나만 하면 안 된다.
   🚫 위아래 패딩을 되살리지 말 것 — sticky 헤더가 어긋난다. */
.panel-body.flush{padding:0 var(--tbl-side)}

/* 캡션·본문·강조 3단계 텍스트 크기 통일(화면 곳곳의 인라인 font-size를 여기로 점진 치환).
   색상·굵기는 각 위치의 기존 값을 그대로 두고 크기만 통일한다. */
/* [2026-09-07] 캡션 아래 여백 기준 — **표·패널 모두 8px.**
   여백을 만드는 방식이 body 종류에 따라 둘로 나뉜다.
     · flush body(padding:0)  → 캡션이 padding:8px 16px 로 스스로 만든다 → 아래 8px
     · pad body(padding:14px) → 캡션에 margin-bottom:-6px 를 줘 14 − 6 = 8px 로 깎는다
   ⚠️ 그 -6px 는 장식이 아니라 **두 방식의 결과를 같게 맞추는 값**이다. 지우면 그 패널만 14px 가 된다.
   🔻 예외 하나 — 원란 숙성 현황은 -2px(=12px). 이유는 그 자리 주석 참조.
   ※ 캡션이 없는 표는 0px 그대로 둔다 — tfoot 회색 띠가 패널 바닥에 닿아 끝나는 것이
     표의 끝을 표시한다. 글자가 붙는 문제도 없다. */
.text-caption{font-size:var(--fs-xs)}
/* 하단 안내의 "계산 기준" 접기 — list-style:none 으로 기본 삼각형을 지우고 마커를 직접 붙인다.
   (기본 마커는 브라우저마다 모양·간격이 달라 문구와 줄이 안 맞는다) */
#ekp-guide>summary::before{content:"▸ ";display:inline-block;width:1em}
#ekp-guide[open]>summary::before{content:"▾ "}
#ekp-guide>summary:hover{color:var(--text-2)}
.text-body{font-size:var(--fs-tbl)}
.text-strong{font-size:var(--fs-md)}

/* ===== TABLE ===== */
/* ===== 표 안정화 (2026-09-01) — 스크롤·날짜 변경에도 흔들리지 않게 =====
   [문제 1] 헤더가 고정되지 않았다.
     thead th 에 position:sticky; top:0 은 이미 있었지만, 스크롤 조상이 없어 붙을 자리가 없었다.
     .tbl-wrap 은 overflow-x:auto 만 줬는데 CSS 규칙상 한 축이 auto 면 나머지 축의 visible 은
     auto 로 계산되므로 .tbl-wrap 은 이미 세로 스크롤 컨테이너였다. 다만 높이 제한이 없어
     세로로는 절대 스크롤되지 않았고(페이지가 대신 스크롤됨), 그래서 sticky 가 한 번도 동작하지 않았다.
     → max-height 를 줘서 표가 자기 영역 안에서 스크롤되게 한다. 그러면 top:0 이 정확한 값이 된다.
     ※ 페이지 스크롤 쪽에 붙이려면 top:46px(고정 .shell 높이)여야 하는데, 그러려면 overflow-x:auto 를
       포기해야 해서(가로 스크롤이 필요한 넓은 표가 있다) 자체 스크롤 방식을 택했다.
     ※ 행이 적은 표는 max-height 에 닿지 않아 지금과 똑같이 보인다.
   [문제 2] 열 폭이 값에 따라 흔들렸다.
     table-layout 이 auto 라 자릿수가 바뀌면(날짜 이동·입력) 브라우저가 폭을 다시 계산해 표가 밀렸다.
     → table-layout:fixed + th 에 명시적 width. fixed 는 첫 행(thead)의 폭만 보므로 th 에만 주면 된다.
     ※ 폭 합계가 화면보다 넓으면 표가 넘치고 .tbl-wrap 이 가로 스크롤한다 — 잘리는 것보다 낫다.
       그래서 폭은 넉넉한 쪽으로 잡았다(td 는 white-space:nowrap 이라 좁으면 이웃 칸을 침범한다).
   ⚠️ 계산·데이터 로직은 건드리지 않았다. 전부 표시 스타일이다. */
/* [2026-09-01] 표 자체 스크롤 영역에도 같은 처리.
   행 수가 max-height 를 넘나들면 여기 세로 스크롤바가 생겼다 없어지고, 그만큼 표 폭이 변한다.
   ⚠️ 이게 "날짜를 바꾸면 열이 밀린다"의 직접 원인이었다 — 셀 내용(버튼 유무)이 아니라
      컨테이너 폭이 바뀐 것이다. table-layout:fixed 는 내용으로는 절대 폭을 바꾸지 않는다. */
.tbl-wrap{overflow-x:auto;overflow-y:scroll;max-height:min(68vh,620px);scrollbar-gutter:stable;
  /* [2026-09-07] overflow-y 를 auto 가 아니라 **scroll** 로 둔다 — 🚨 **아래 margin-right 와 세트다.**
     ▶ **왜** — overflow 의 잘라내기 기준은 content box 가 아니라 **padding box** 이고,
       scrollbar-gutter 가 잡아 둔 15px 는 padding box **안쪽**이다. 그래서 가로로 넘치는 표의
       내용은 **예약된 거터 위로 새어 나와 그려진다**(2026-09-07 픽셀 실측: 1280px 에서 표 글자가
       패널 테두리 2px 앞까지 침범). auto 면 세로 스크롤이 없는 표에는 스크롤바가 안 그려져
       그 침범을 가려 줄 것이 없다.
     ▶ scroll 로 두면 **트랙이 항상 그려지고**, 아래 ::-webkit-scrollbar-track 이 흰색(--card)이라
       거터가 늘 흰 여백으로 덮인다 → 보이는 잘림 지점이 정확히 16px 이 된다(실측 확인).
     ★ 부수 효과 — scrollWidth > clientWidth 가 **곧 '가려진 내용이 있다'** 와 같아진다.
       그래서 tblOverflowScan 의 판정과 실제로 보이는 잘림이 어긋나지 않는다.
       (예전에는 4px 넘침으로 그림자가 떴지만 실제로는 아무것도 잘리지 않았다 — 1440px 원란재고(품종).)
     🚫 auto 로 되돌리지 말 것 — 위 침범이 그대로 살아난다. */
  /* [2026-09-07] 거터 상쇄 — 🚨 **이 한 줄이 표 좌우 대칭을 만든다. 지우면 16:31 로 돌아간다.**
     scrollbar-gutter 가 잡는 15px 는 .panel-body 의 padding 16px **바깥이 아니라 안쪽에**
     생겨서, 오른쪽만 16+15=31px 이 됐다(실측 · 표 17개 전부 · 왼쪽은 16px).
     음수 여백으로 .tbl-wrap 을 오른쪽 패딩 위로 15px 끌어내면 거터가 그 패딩 자리를 대신 써서
     표의 내용 상자 오른쪽 끝이 정확히 16px 지점으로 온다 → **좌우 16:16.**
     ⚠️ **이 한 줄만 넣으면 안 된다** — 거터가 패널 테두리 쪽(1~16px)으로 옮겨 오므로,
        위 overflow-y:scroll + 흰 트랙이 함께 있어야 거터 침범이 가려진다. 셋이 한 세트다.
     ★ 부수 효과 둘 — 둘 다 의도한 것이다.
       · 표에 쓸 수 있는 폭이 15px 늘어 **가로로 잘리는 표가 줄어든다**(아래 실측표).
       · 아래 '가로 잘림 그림자'가 **실제 잘리는 지점 위에 얹힌다.** 예전에는 표 끝이 31px,
         그림자는 16~30px 라 빈 거터에 14.5px 벗어나 떠 있었다 — 그래서 표가 오른쪽 테두리에
         붙어 보였다. 그림자 규칙은 고치지 않았고 좌표가 맞아진 것이다.
     ⚠️ both-edges 는 검토 후 기각 — 좌우가 31:31 로 같아지는 대신 표 폭이 15px 더 줄어
        1024px 잘림이 8→9개가 되고, 스크롤바가 뜨면 보이는 여백이 좌 31 : 우 16 으로 더 어긋난다. */
  margin-right:calc(-1 * var(--tbl-gutter))}
/* [2026-09-07] 스크롤바를 거터 안쪽에 가늘게 — **위 margin-right 와 한 쌍이다.**
   상쇄 후 스크롤바가 앉는 자리는 패널 테두리에서 1~16px 이라, 기본 스크롤바를 그대로 두면
   **테두리에 밀착해 보이고** 스크롤바가 생겼다 없어질 때마다 흰 여백이 16↔1px 로 출렁인다
   (상쇄 전에는 같은 이유로 16↔31px 로 출렁였다 — 행 수가 바뀌면 같은 표가 다르게 보였다).
   트랙을 **패널과 같은 흰색(--card)** 으로 채우고 썸만 4px 씩 안으로 넣으면(보이는 폭 7px)
   거터가 늘 흰 여백으로 읽혀 **스크롤 가능 여부와 무관하게 좌우가 16:16 으로 보인다.**
   ⚠️ 트랙을 transparent 로 두지 말 것 — 위 overflow-y 주석의 '거터 침범'이 비쳐 보인다.
      투명 트랙은 실측에서 1366·1280px 의 흰 여백을 16px → 1px 로 무너뜨렸다.
   ⚠️ 폭은 --tbl-gutter 를 쓴다 — 상쇄값과 스크롤바 폭이 **반드시 같아야** 하기 때문이다.
   ⚠️ 표준 속성 scrollbar-color 는 쓰지 않았다 — Chromium 에서 이 ::-webkit-scrollbar 규칙을
      통째로 무효화한다. Firefox 는 기본 스크롤바 그대로이고 폭도 15px 가 아닐 수 있어
      그쪽에서는 오른쪽 여백이 몇 px 어긋난다(사내 표준이 Chrome 이라 감수한다). */
.tbl-wrap::-webkit-scrollbar{width:var(--tbl-gutter);height:var(--tbl-gutter)}
.tbl-wrap::-webkit-scrollbar-track{background:var(--card)}
.tbl-wrap::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:8px;
  border:4px solid transparent;background-clip:padding-box}
.tbl-wrap::-webkit-scrollbar-thumb:hover{background:var(--text-3);background-clip:padding-box}
.tbl-wrap::-webkit-scrollbar-corner{background:var(--card)}
/* [2026-09-07] 가로 잘림 표시 — 표가 옆으로 잘렸다는 것을 보이게 한다.
   ★ **왜 필요한가** — 잘려도 스크롤바 말고는 표시가 없어 **마지막 열이 없는 줄 알기 쉽다.**
     실측(2026-09-07 · 창 폭별 잘리는 표 / .tbl-wrap 을 쓰는 표 17개 기준):
       1920 → 0개 · 1600 → 0개 · 1440 → 0개 · 1366 → 2개 · 1280 → 3개 · 1205 → 4개 · 1024 → 8개.
     ※ 예전에 적혀 있던 값(1440 → 0 · 1366 → 2 · 1205 → 5)은 좌우 16px 여백을 넣기 **전** 숫자였다.
       여백을 넣은 뒤 실제로는 1440 → 1 · 1366 → 3 · 1205 → 5 였고, 위 .tbl-wrap 의 거터 상쇄로
       표 폭 15px 를 되찾아 지금 값이 됐다.
   ▶ 그림자는 **넘칠 때만** 뜬다 — JS 가 scrollWidth > clientWidth 를 보고
     data-ovf 를 좌/우/양쪽으로 달아 준다(tblOverflowScan). 안 넘치면 속성 자체가 없다.
   ▶ **왼쪽에도 넣었다** — 오른쪽 끝까지 스크롤하면 이번엔 **왼쪽이 잘린 상태**가 되는데
     그때 표시가 없으면 첫 열(이름 열)이 사라진 것을 모른다. 방향만 반대일 뿐 같은 문제다.
   ▶ **짙은 쪽이 잘리는 지점, 옅은 쪽이 표 안쪽이다** — 좌표(left/right)와 그라데이션 방향
     (to right / to left)이 함께 맞아야 뜻이 통한다. 좌표는 var(--tbl-side) 하나로
     .panel-body 의 좌우 패딩과 묶여 있다. **여기에 16px 를 직접 쓰지 말 것** —
     예전에는 그렇게 적혀 있었고, 그때 오른쪽은 표 끝이 31px 인데 그림자는 16~30px 라
     **빈 거터 위에 14.5px 벗어나** 떠 있었다(2026-09-07 픽셀 실측). 왼쪽은 원래 맞아 있었다.
   ⚠️ **sticky 헤더(z-index:5)·합계 행(z-index:4) 보다 낮게 둔다(z-index:3).**
     더 높이면 그림자가 헤더 글자 위에 얹힌다.
   ※ 그림자는 .tbl-wrap 이 아니라 **감싸는 .panel-body 에 그린다** — 스크롤 컨테이너 안에
     그리면 내용과 함께 밀려 나가고, 표의 배경(얼룩 무늬·헤더)에 가려 줄무늬로 보인다. */
.panel-body{position:relative}
.panel-body[data-ovf]::before,.panel-body[data-ovf]::after{
  content:"";position:absolute;top:0;bottom:0;width:14px;pointer-events:none;z-index:3}
.panel-body[data-ovf="l"]::before,.panel-body[data-ovf="lr"]::before{
  left:var(--tbl-side);background:linear-gradient(to right,rgba(27,39,51,.13),transparent)}
.panel-body[data-ovf="r"]::after,.panel-body[data-ovf="lr"]::after{
  right:var(--tbl-side);background:linear-gradient(to left,rgba(27,39,51,.13),transparent)}
/* scrollbar-gutter 미지원 브라우저(구형 Safari 등)에서는 스크롤바를 항상 띄워 같은 효과를 낸다.
   트랙이 늘 보이는 대신 폭은 절대 변하지 않는다.
   ※ [2026-09-07] .tbl-wrap 은 이제 기본값이 overflow-y:scroll 이라 여기서는 사실상 재확인이다
     (위 '거터 침범' 주석 참조). html 쪽은 여전히 여기서만 처리된다. */
@supports not (scrollbar-gutter: stable){
  html{overflow-y:scroll}
  .tbl-wrap{overflow-y:scroll}
}
table.dt{width:100%;border-collapse:collapse;font-size:var(--fs-tbl);table-layout:fixed}
table.dt thead th{
  background:var(--sticky);color:var(--text-2);font-weight:700;text-align:center;padding:9px 10px;
  border-bottom:1px solid var(--border-strong);white-space:nowrap;position:sticky;top:0;z-index:5;
  font-size:var(--fs-xs);letter-spacing:-.2px;
  /* border-collapse:collapse 에서는 경계선이 셀이 아니라 표에 그려져, sticky 로 떠 있는 동안
     border-bottom 이 같이 따라오지 않는다. 안쪽 그림자로 같은 선을 한 번 더 그려 둔다. */
  box-shadow:inset 0 -1px 0 var(--border-strong);
}
/* 열 폭 — table-layout:fixed 용. 값이 아니라 "그 열이 무엇을 담는가"로 정한다.
   숫자 열은 우측 정렬(td.r)을 그대로 두고 폭만 넉넉히 잡는다. 날짜는 YYYY-MM-DD 로 형식이
   고정이라 딱 맞게. 입력칸이 든 열은 ekNumInput(width:72px) + td 좌우 padding 20px 을 담아야 한다. */
table.dt th.w-rank{width:60px}    /* 순위·출고순위 — 한 자리 숫자뿐이라 헤더 폭이면 충분 */
table.dt th.w-mini{width:76px}    /* 관리·상태·구분·출처·유형·복원·순위 (삭제 버튼 = .btn.sm 약 52px) */
table.dt th.w-sm{width:86px}      /* 품종·난중·각종 비율·경과일 */
table.dt th.w-date{width:96px}    /* YYYY-MM-DD (10자 = 약 69px + padding 20px) */
table.dt th.w-date2{width:116px}  /* 소비기한(최단)·백업 일시·숙성(N일 기준) — 헤더가 폭을 정한다 */
/* [2026-09-07] `w-numlg` 를 없애고 여기로 합쳤다 — 정의가 둘 다 104px 로 **같았고**,
   `w-numlg` 주석만 "자릿수가 큰 열"이라고 설명해 **이름과 실제가 어긋나 있었다.**
   같은 성격의 열에 표마다 다른 이름이 붙어(ek-ship 위 표 `발주량`=w-num / 아래 표 `발주량(팩)`=w-numlg)
   새 표를 만들 때 어느 쪽을 쓸지 알 수 없었다. **이름과 실제가 어긋난 쪽을 없앤 것이다.**
   ⚠️ **폭을 실제로 다르게 주는 안은 채택하지 않았다** — 어느 열이 더 넓어야 하는지 판단 근거가 없었다.
   ▶ 나중에 자릿수가 큰 열에 **정말로** 더 넓은 폭이 필요해지면 **그때 새 클래스를 만들 것.**
     🚫 **이름만 있고 정의가 같은 클래스를 미리 두지 말 것** — 지금 없앤 것이 정확히 그 상태였다. */
table.dt th.w-num{width:104px}    /* 수량 열 전반 — 일반 수량 · 자릿수가 큰 합계·(알) 표기 · 입력칸 열
                                     (입력칸은 ekNumInput 72px 상자 + td 좌우 padding 20px 을 담는다) */
table.dt th.w-lot{width:128px}    /* 로트번호 OMG-XL-20260817 = 15자 약 103px + padding 20px */
table.dt th.w-name{width:150px}   /* 거래처·품목·상품명 등 이름 */
table.dt th.w-wide{width:168px}   /* 배지·긴 안내가 들어가는 열 (예: "엑셀 업로드(이월재고 N알 포함)") */
table.dt th.w-act{width:90px}     /* 버튼만 있는 관리 열 — "취소" 버튼 약 52px + padding 20px */
table.dt th.w-act2{width:132px}   /* [2026-09-15] 버튼이 **둘** 든 관리 열 — 자료실 "갱신 · 삭제".
                                     .btn.sm 52px × 2 + 사이 공백 4px + td 좌우 padding 20px = 128 → 132.
                                     ★ 위 09-07 주석이 말한 "정말로 더 넓은 폭이 필요해지는 때"가 이 자리다.
                                     🚫 `w-lot`(128px)을 돌려쓰지 말 것 — 폭은 맞지만 **로트번호 열 이름이라
                                       이름과 실제가 어긋난다**(09-07 에 없앤 것이 정확히 그 상태였다). */
/* 헤더 없는 라벨/값 요약표(홈 좌우 카드·원란 숙성 분포)는 예외로 둔다.
   thead 가 없어 폭을 실을 곳이 없고, fixed 로 두면 열이 똑같이 나뉘어
   "굽기가능 · 숙성대기" 같은 긴 라벨이 좁은 칸에 갇힌다. 값이 바뀌어도 줄 수가 고정이라
   원래 흔들리던 표도 아니다. */
table.dt.dt-kv{table-layout:auto}
/* 입력칸이 고정 폭(72px)이라 열이 좁아져도 상자 크기는 변하지 않는다.
   혹시 더 좁은 열에 들어가더라도 칸을 넘지 않도록 상한만 걸어 둔다. */
table.dt td input{max-width:100%;box-sizing:border-box}
/* 긴 문구가 들어가는 칸만 줄바꿈 허용 — td 는 기본이 nowrap 이라 한 줄로 뻗으면서 열을 넓힌다.
   (예: 생산 실적 "당일 등록"의 '엑셀 업로드(이월재고 N알 포함)') 열을 넓히는 대신 두 줄로 접는다. */
table.dt td.wrap{white-space:normal;line-height:1.35;word-break:keep-all}
/* [화면정리 2차 2026-10-15] 화면의 글자는 다 보여 준다(말줄임 금지 · 1-M · 1-N 기준을 모든 표로) — 글자 칸(이름 td.name · 거래처 · 비고 · 이력 · 사유 td.l)은 줄바꿈 · 행 높이는 내용만큼 · 숫자 · 코드 · 날짜 칸은 td 기본(한 줄) */
table.dt td.name,table.dt td.l{white-space:normal;word-break:keep-all;overflow-wrap:break-word;line-height:1.35}
/* [줄바꿈 전수 정리 2026-10-16 · 지시서 docs/instructions/줄바꿈_전수정리_v20261016.md · CLAUDE.md 6장 42] 글은 두 종류 — 짧은 글(표 머리 · 배지 · 단추 · 코드 · 구분 · 거래처 · 상태 · 날짜 · 숫자 · 사람 이름 · 이름표 · 필터 · 탭) = 한 줄(.t-short) · 긴 글(원래 이름 · 설명 · 메모 · 비고 · 안내) = 단어 단위로만 줄바꿈(keep-all · 넘칠 때만 긴 낱말을 끊음 break-word) · 「아무 데서나 끊기(anywhere)」는 쓰지 않음 · 기본값은 body */
table.dt tbody td.t-short,.t-short{white-space:nowrap}.t-long{white-space:normal;word-break:keep-all;overflow-wrap:break-word}
.co-note,.co-note-ed{white-space:normal}   /* 거래처 칸 안 메모(긴 글) — 칸은 한 줄 · 메모만 줄바꿈 */
/* 내용 폭 배치 dt-fit(원가 co-fit · 품목 마스터 1-M 과 같은 방식) — 숫자 · 코드 · 날짜 · 배지 열 = 내용 폭(width:1% · 한 줄) · 글자 열(th.l · td.l · td.name · td.wrap)이 남는 폭을 나눠 가지며 줄바꿈 · 1280 폭 표 넘침 0 */
table.dt.dt-fit{table-layout:auto}
table.dt.dt-fit th,table.dt.dt-fit td{width:auto;padding-left:7px;padding-right:7px}   /* 폭 클래스(w-*)는 여기서 안 씀 — 칸 폭 = 내용 */
table.dt.dt-fit thead th{white-space:nowrap;line-height:1.3}
table.dt.co-fit td.name,table.dt.co-fit td.l,table.dt.imm-t12 td.name,table.dt.pr-pnl td.name{word-break:keep-all}
table.dt.dt-fit td select{max-width:260px}
table.dt.pr-price td.name{overflow-wrap:break-word;min-width:96px}
table.dt.pr-price td select{max-width:120px}   /* 「거래처 지정」 고르기 — 고른 뒤 이름은 칸 안 글자로 */
table.dt.pr-price th,table.dt.pr-price td{padding-left:5px;padding-right:5px}   /* 14열 — 손익 표(pr-pnl)와 같은 좌우 여백 */   /* 붙여 쓴 긴 ERP 이름만 칸 안에서 접힘(띄어쓴 이름은 낱말 단위) */
table.dt.dt-fit td.l.im-num{word-break:keep-all;overflow-wrap:break-word}   /* 품번 연결 「품번 · 제안」 — 추천 사유가 긴 칸 */   /* 칸 안 고르기 — 가장 긴 선택지가 열을 넓히지 않게 */   /* 원가 · 품목 마스터 · 손익 이름 칸은 1-M · 원가 3단계 그대로(글자 단위 줄바꿈) */
/* [2026-09-07] 헤더 정렬 — `td.l`/`td.r` 과 **짝이 되는 규칙이 헤더에는 없었다.**
   `thead th` 는 무조건 가운데였고 `th class="l ..."` 는 21곳에 쓰이는데 아무 효과가 없었다.
   그래서 전 화면 표 16개 · 열 64개에서 헤더와 값의 정렬이 어긋나 있었다(실측).
   ★ 규칙은 폭 클래스(w-num 등)가 아니라 **l/r 로 건다** — 같은 폭 클래스가 숫자와 글자를
     함께 쓰기 때문이다(예: `w-num` 에 '숙성(8일 기준)'·'잔여' 는 가운데, `w-sm` 은 반반).
     폭으로 정렬을 정하면 그 예외들이 조용히 틀어진다. */
table.dt thead th.l{text-align:left}
table.dt thead th.r{text-align:right}
table.dt tbody td{padding:9px 10px;text-align:center;border-bottom:1px solid var(--border);white-space:nowrap}
table.dt tbody tr:nth-child(even){background:var(--zebra)}
table.dt tbody tr:hover{background:var(--hover)}
table.dt td.l{text-align:left}
table.dt td.r{text-align:right;font-variant-numeric:tabular-nums;font-weight:600}
/* [2026-09-07] 이름 열 규칙 — **무엇은 굵게, 누구는 보통.**
   · `td.name`(굵게) — 품목 · 상품명 · 품종 · 원란 · 내용  … 그 행이 **무엇에 관한 행인지**
   · `td.l`(보통)   — 거래처 · 납품처 · 비고            … **누구인지 · 부가정보**
   같은 표에서 `거래처(td.l) + 품목(td.name)` 조합이 네 표에 반복된다.
   ★ **굵게는 인라인 style 로 하지 말 것 — 반드시 이 클래스로.**
     09-07 이전에는 9곳이 `class="l" style="font-weight:700"` 인라인이었고 4곳만 이 클래스였다.
     화면은 같았지만 **규칙이 코드에 남지 않아** 표를 새로 만들 때 어느 쪽을 따를지 알 수 없었다
     (실제로 출고 등록 개별 내역의 품목 하나가 굵기를 빠뜨린 채 있었다).
   ⚠️ 이 클래스에 `text-align:left` 가 **이미 들어 있다** — `class="name l"` 처럼 겹쳐 쓰지 말 것. */
table.dt td.name{text-align:left;font-weight:700}
/* 합계 행도 붙여 둔다 — 표가 자기 영역 안에서 스크롤되면서 합계가 시야 밖으로 밀리지 않도록.
   헤더와 같은 이유로 위쪽 경계선을 안쪽 그림자로 한 번 더 그린다. */
table.dt tfoot td{padding:10px;background:var(--sticky);font-weight:800;border-top:2px solid var(--border-strong);text-align:center;position:sticky;bottom:0;z-index:4;box-shadow:inset 0 2px 0 var(--border-strong)}
table.dt tfoot td.r{text-align:right;font-variant-numeric:tabular-nums}

/* ===== BADGES ===== */
/* [2026-09-07] tabular-nums — 출고율 배지가 표 마지막 칸에 **세로로 쌓여 비교**된다.
   글자만 든 배지(기간·품종)에는 아무 영향이 없다 — 숫자 글리프에만 적용되는 속성이다. */
.bg{display:inline-flex;align-items:center;gap:4px;padding:2px 9px;border-radius:11px;font-size:var(--fs-xs);font-weight:700;line-height:1.6;font-variant-numeric:tabular-nums;white-space:nowrap}   /* [짧은 글 줄바꿈 2026-10-16 · 검사 ⑮] 배지 글자는 꺾이지 않는다 */
.bg.pos{background:var(--positive-bg);color:var(--positive)}
.bg.neg{background:var(--negative-bg);color:var(--negative)}
.bg.crit{background:var(--critical-bg);color:var(--critical)}
.bg.mut{background:var(--bg);color:var(--text-2)}
.im-src{display:inline-block;width:6px;height:6px;border-radius:50%;margin-left:4px;vertical-align:middle;background:var(--c-unknown)}   /* [IM 1-B] 출처 점 — 상품표 = 회색 */
.im-src.m{background:var(--sys-ek)}   /* 마스터 = 에그 파랑(시스템 그룹색 토큰) */
.im-diff{color:var(--c-st-warn);font-weight:700}
.pr-jump{color:var(--c-st-bad);font-weight:700}
.pr-promo{color:var(--c-st-warn);font-weight:700}   /* [1-F] 행사 공급가 — 주의(황토) 글자 */
.kpis.imm5{grid-template-columns:repeat(5,1fr)}@media(max-width:1180px){.kpis.imm5{grid-template-columns:1fr 1fr}}   /* [1-F] 단가 KPI 5 */   /* [PR 1-E] 단가 급변 — 상태색 적(경고) · 글자만 */   /* 마스터 ≠ 상품표 — 주의 글자(막대 채움 아님 · 원칙 ⑤) */
.bg.mut.ek-spent{color:var(--c-st-muted)}   /* [2026-10-13] 원란 입고 표 「당일 소진」 배지 — 잔여 0 인데 기준일 움직임이 있어 보이는 행(지시서 에그_원란입고_잔여0표시) · 상태 보조 회색 [CL] */
.bg.brand{background:#E8F1FB;color:var(--brand)}
.dot{width:7px;height:7px;border-radius:50%;display:inline-block}
.dot.pos{background:var(--positive)}.dot.crit{background:var(--critical)}.dot.neg{background:var(--negative)}.dot.coral{background:var(--coral)}

.chip{display:inline-block;padding:1px 7px;border-radius:5px;font-size:var(--fs-2xs);font-weight:700;background:var(--bg);color:var(--text-2)}
.chip.gu{background:#FDEEE1;color:#C25A08}
.chip.or{background:#EAF0F6;color:#3E5C78}
.chip.jj{background:#EEF3E9;color:#4A6B2E}
.chip.ch{background:#FBF2E4;color:#B07E1A}

/* ===== FORMS ===== */
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px 18px}
.fld{display:flex;flex-direction:column;gap:5px}
.fld label{font-size:var(--fs-xs);font-weight:700;color:var(--text-2)}
.fld label .req{color:var(--negative);margin-left:2px}
.fld input,.fld select{
  height:34px;border:1px solid var(--border-strong);border-radius:6px;padding:0 11px;font-size:var(--fs-md);
  font-family:inherit;color:var(--text);background:#fff;outline:none;transition:border .12s,box-shadow .12s;
}
.fld input:focus,.fld select:focus{border-color:var(--brand);box-shadow:0 0 0 2px rgba(10,110,209,.15)}
.fld input[type=number]{-moz-appearance:textfield}
.fld input[type=number]::-webkit-outer-spin-button,
.fld input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.fld input[readonly]{background:var(--bg);color:var(--text-2)}
.fld .hint{font-size:var(--fs-2xs);color:var(--text-3)}
.fld .hint.warn{color:var(--negative);font-weight:700}
.fld .hint.ok{color:var(--positive);font-weight:700}

.btn{height:34px;padding:0 18px;border-radius:6px;border:1px solid var(--brand);background:var(--brand);color:#fff;font-weight:700;font-size:var(--fs-md);transition:background .12s}
.btn:hover{background:var(--brand-dark)}
.btn.ghost{background:#fff;color:var(--brand)}
.btn.ghost:hover{background:var(--hover)}
.btn.neutral{background:#fff;color:var(--text-2);border-color:var(--border-strong)}
.btn.neutral:hover{background:var(--bg)}
.btn.sm{height:30px;padding:0 13px;font-size:var(--fs-sm)}
.btn:disabled{opacity:.45;cursor:not-allowed}

/* ===== FILTER BAR ===== */
.filterbar{
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:13px 16px;margin-bottom:16px;
  display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap;
}
.filterbar .fld{min-width:150px}
.filterbar .fb-actions{margin-left:auto;display:flex;gap:8px}

/* ===== FIFO preview ===== */
.fifo-line{
  display:flex;align-items:center;gap:10px;padding:8px 12px;border:1px dashed var(--border-strong);
  border-radius:6px;margin-bottom:7px;font-size:var(--fs-sm);background:var(--zebra);
}
.fifo-line .seq{width:22px;height:22px;border-radius:50%;background:var(--coral);color:#fff;font-weight:800;font-size:var(--fs-xs);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.fifo-line .grow{flex:1}
.fifo-line .take{font-weight:800;color:var(--coral)}

/* ===== toast ===== */
.toast{
  position:fixed;bottom:22px;left:50%;transform:translateX(-50%) translateY(20px);
  background:var(--shell);color:#fff;padding:11px 20px;border-radius:8px;font-size:var(--fs-md);font-weight:600;
  box-shadow:0 6px 24px rgba(0,0,0,.25);opacity:0;pointer-events:none;transition:all .28s;z-index:200;
  display:flex;align-items:center;gap:9px;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast.err{background:var(--negative)}
.toast.ok{background:var(--positive)}

.empty{padding:40px;text-align:center;color:var(--text-3);font-size:var(--fs-md)}
.legend{display:flex;gap:14px;font-size:var(--fs-xs);color:var(--text-2);align-items:center}
.legend span{display:flex;align-items:center;gap:5px}

.sample-note{
  font-size:var(--fs-xs);color:var(--critical);background:var(--critical-bg);border:1px solid #F5D9BE;
  padding:6px 12px;border-radius:6px;margin-bottom:14px;display:flex;align-items:center;gap:7px;
}

/* mini bar for stock */

/* ===== ACCESS GATE (초기 비밀번호) ===== */
.gate{position:fixed;inset:0;z-index:1000;background:linear-gradient(160deg,var(--shell-dark),#2E4A6E);display:flex;align-items:center;justify-content:center;padding:20px}
.gate-card{width:372px;max-width:92vw;background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 24px 70px rgba(0,0,0,.42)}
.gate-head{background:var(--shell);padding:24px;display:flex;justify-content:center}
.gate-head img{height:30px;width:auto}
.gate-body{padding:26px 30px 28px}
.gate-title{font-size:var(--fs-xl);font-weight:800;color:var(--text);text-align:center;letter-spacing:-.3px}
.gate-sub{font-size:var(--fs-sm);color:var(--text-2);text-align:center;margin:6px 0 20px}
.gate-body input{width:100%;height:44px;border:1px solid var(--border-strong);border-radius:9px;padding:0 14px;font-size:var(--fs-lg);font-family:inherit;color:var(--text);outline:none;margin-bottom:12px;transition:border .12s,box-shadow .12s}
.gate-body input:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(10,110,209,.15)}
.gate-err{color:var(--negative);font-size:var(--fs-sm);font-weight:700;min-height:15px;margin-bottom:8px;text-align:center}
.gate-body .btn{width:100%;height:44px;font-size:var(--fs-lg)}
.gate-link{display:block;margin-top:13px;text-align:center;font-size:var(--fs-sm);font-weight:700;color:var(--brand);cursor:pointer}
.gate-link:hover{text-decoration:underline}
.gate-note{margin-top:13px;padding:10px 12px;background:var(--bg);border:1px solid var(--border);border-radius:8px;font-size:var(--fs-xs);line-height:1.65;color:var(--text-2);text-align:left}
.gate-note b{color:var(--text)}
.gate-foot{margin-top:16px;text-align:center;font-size:var(--fs-xs);color:var(--text-3);letter-spacing:.2px}

/* [2026-09-07] 1366px 이하에서 KPI 숫자를 22px 로.
   6열이 유지되는 구간(1181~1366px)에서 칸이 153~168px 까지 좁아지는데, 26px 로는
   **7자리 값이 1280px 에서 18.1px 넘친다**(실측). 22px 면 여유 +22px 로 들어온다.
   ⚠️ 카드 높이가 96px → 91px 로 5px 줄어든다. 줄 수는 그대로 1행이다.
   ※ 1180px 이하는 3열로 접혀 칸이 넓어지므로 26px 로 둬도 되지만, 폭이 줄어드는
     구간에서 글자만 도로 커지면 그게 더 어색해 경계를 나누지 않았다. */
@media(max-width:1366px){.kpi .vl{font-size:var(--fs-num)}}
@media(max-width:1180px){.kpis{grid-template-columns:repeat(3,1fr)}.grid2{grid-template-columns:1fr}.grid3{grid-template-columns:1fr}.grid4{grid-template-columns:1fr 1fr}}   /* [OD] grid4 */

/* ===== UNIFIED additions ===== */
.sidebar{overflow-y:auto}
.nav-group{font-size:var(--fs-sm);font-weight:800;letter-spacing:.3px;color:#A6B6C4;padding:16px 18px 7px;margin-top:4px;border-top:1px solid var(--shell-line)}
/* 시스템별 색상 코딩과 사이드바를 일치시킴(에그코리아=블루/다미로직스=코랄). 관리자·품목 마스터는 무채색 유지.
   에그코리아는 네이비 사이드바 배경 위 가독성을 위해 --brand보다 밝은 톤 사용(코랄은 원래도 대비 충분). */
.nav-group.sys-ek{color:var(--sys-ek-light)}   /* [시스템 그룹색 토큰 2026-10-13] 남색 바탕용 -light · 지금은 아래 .sidebar 규칙으로 꺼져 있다 */
.nav-group.sys-dl{color:var(--sys-dl)}
.nav-group.sys-ga{color:var(--sys-ga-light)}
/* ===== [CP] 쿠팡 발주 - 시작 ===== */
/* 온라인 발주 계열색 [2026-10-08] — 파랑(에그)·주황(다미)·초록(알가공)이 이미 쓰이고, 빨강은 경고·미납 색이라(7-2) 보라를 쓴다.
   사이드바(네이비 배경)는 밝은 톤, 페이지 머리(흰 배경)는 진한 톤 — 에그 #5EA6E8 / --brand 와 같은 짝이다. */
.nav-group.sys-cp{color:var(--sys-cp-light)}
.page-head.sys-cp{border-left:3px solid var(--sys-cp);padding-left:12px}
.page-head.sys-cp .crumb{color:var(--sys-cp);font-weight:700;font-size:var(--fs-sm)}
/* KPI 5장 — 기본 .kpis 는 6열이라 한 칸이 빈다. 인라인 style 로 열 수를 주면 미디어쿼리가 안 들어서(0-2 8번) 클래스로 준다 */
.kpis.cp5{grid-template-columns:repeat(5,1fr)}
/* [화면 정리 3차 ② 2026-10-16 · backlog §8 해결] KPI 열 수 = 클래스(인라인 style 금지 — 미디어쿼리가 안 든다) · k3 3칸 · k4 4칸(1180 이하 2칸) · kfit 칸 폭 128px 이상 자동 · 6칸은 기본 .kpis(1180 이하 3칸) */
.kpis.k3{grid-template-columns:repeat(3,1fr)}.kpis.k4{grid-template-columns:repeat(4,1fr)}.kpis.kfit{grid-template-columns:repeat(auto-fit,minmax(128px,1fr))}
@media(max-width:1180px){.kpis.k4{grid-template-columns:1fr 1fr}}
.kpis.kfit .vl{font-size:var(--fs-num)}   /* 칸 폭 128px 안팎(통합 대시보드 · 온라인 발주 묶음) — 6자리 + 단위가 26px 로는 3px 넘침(2026-10-16 실측) · 1366 이하 화면과 같은 22px */
@media(max-width:1180px){.kpis.cp5{grid-template-columns:repeat(3,1fr)}}
@media(max-width:1380px){.kpis.oh6,.kpis.od6{grid-template-columns:repeat(3,1fr)}}   /* [표시 보정 2026-10-11] 발주 이력 · 온라인 발주 대시보드 KPI 6칸 — 1280px 에서 9자리 값 · 보조줄이 두 줄로 꺾인다 → 3칸씩 두 줄 */
table.dt td.cp-num{font-variant-numeric:tabular-nums}   /* 발주번호·상품번호 칩 — 숫자로 된 번호 */
table.dt td.cp-clip{white-space:normal;word-break:keep-all;overflow-wrap:break-word}   /* [화면정리 2차 2026-10-15] 말줄임 → 줄바꿈 */   /* 쿠팡 상품명은 길다 — 옆 숫자 칸을 덮지 않게 자르고 title 로 전체를 보인다 */
table.dt tr.cp-sub td{background:var(--zebra);font-size:var(--fs-sm)}   /* 취합표 — 펼친 발주 줄 */
.cp-clip1{white-space:normal;word-break:keep-all;overflow-wrap:break-word}   /* 취합표 상품명 첫 줄 */
span.cp-num{font-variant-numeric:tabular-nums}
input[data-cp-ex]{width:126px}
/* ===== [CP] 쿠팡 발주 - 끝 ===== */
/* ===== [CS] 출고시트 - 시작 ===== [2026-10-12] 쿠팡 발주 「확정 작업」 안 출고시트 패널 · 걷어내려면 [CS] 두 구역 · 공용 자리의 [CS] 줄 */
.cs-head{display:flex;flex-wrap:wrap;gap:8px;align-items:center}   /* 날짜 · 버튼 줄은 패널 본문 첫 줄(머리에 두면 7-7 높이 규칙에 걸린다) */
.cs-meta{font-size:var(--fs-tbl);color:var(--text-2)}
.cs-delta{font-size:var(--fs-xs);font-weight:700;margin-left:4px;white-space:nowrap}
.cs-delta.up{color:var(--c-st-good)} .cs-delta.down{color:var(--c-st-bad)}   /* 증가 ▲ 청 · 감소 ▼ 적(6장 색 체계 ②) */
.cs-blocks{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:1180px){.cs-blocks{grid-template-columns:1fr}}
table.dt tr.cs-oem td{background:var(--zebra)}   /* 에그코리아 출고등록에서 읽는 줄 */
/* ===== [CS] 출고시트 - 끝 ===== */
/* ===== [IM] 채널 상품 - 시작 ===== */
table.dt td.im-num{font-variant-numeric:tabular-nums}   /* 상품코드 칩 — 숫자로 된 쿠팡 코드 */
table.dt td.im-clip,.im-clip{white-space:normal;word-break:keep-all;overflow-wrap:break-word}   /* [화면정리 2차 2026-10-15] 말줄임 → 줄바꿈(포장 사양 · 거래처별 품목 · 마스터 이력) · 이름은 그대로 */
table.dt tr[data-im-row]:hover td{background:var(--hover)}
/* [IM 사내 품목 1-A 2026-10-12] 품목마스터 화면 — 색은 [CL] 변수 · 상품군 배지는 중립(.bg.mut) */
.imm-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:10px}
.imm-step{border:1px solid var(--border);border-radius:8px;padding:10px 12px;background:var(--card)}
.imm-step .t{font-weight:700;font-size:var(--fs-tbl)}.imm-step .d{font-size:var(--fs-xs);color:var(--text-2);margin-top:4px;line-height:1.4}.imm-step .n{font-size:var(--fs-xs);color:var(--text-3);margin-top:6px}
@media(max-width:1180px){.imm-steps{grid-template-columns:1fr 1fr}}
.kpis.imm4{grid-template-columns:repeat(4,1fr)}@media(max-width:1180px){.kpis.imm4{grid-template-columns:1fr 1fr}}
.kpis.imm3{grid-template-columns:repeat(3,1fr)}@media(max-width:1180px){.kpis.imm3{grid-template-columns:1fr 1fr}}   /* [1-H] 포장 사양 KPI 3 */
/* [1-I] ERP 구분(참고) — 표시명 옆 작은 회색 글자 */
/* [1-N 2026-10-15] 상세 창(.dwrap) — 글자는 잘라내지 않고 줄바꿈 · 두 단은 창 폭 안에서 줄어듦 · 가로 스크롤 0(검사 ⑧ tests/rules.js) */
.modal-card.dwrap .grid2{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.modal-card.dwrap .grid2>*{min-width:0}
.modal-card.dwrap table.dt{table-layout:fixed;width:100%}
.modal-card.dwrap table.dt td{white-space:normal;overflow-wrap:break-word}.modal-card.dwrap table.dt th,.modal-card.dwrap table.dt thead th{white-space:nowrap}
.modal-card.dwrap table.dt td.im-clip,.modal-card.dwrap .im-clip{overflow:visible;text-overflow:clip;white-space:normal}
/* [품목 상세 창 정리 2026-10-16] 속성 표 — 이름표 칸은 한 줄 · 폭 = 가장 긴 이름표(table-layout auto) · 값 칸은 줄바꿈 · 머리 작은 줄(품번 · 구분 · 거래처) */
.modal-card.dwrap table.dt.imm-attr{table-layout:auto}
/* [품목 상세 창 넓이 2026-10-16 · 지시서 docs/instructions/품목상세창_넓이_v20261016.md] 품목 상세 창 = min(1440px, 96vw) · 속성 : 채널 · 포장 · 이력 = 6 : 4 · 품명 · ERP 모품명 · 거래처 줄 · 상품군 · 혼합 구성은 넓은 화면(1366 이상)에서 한 줄 — 좁으면 줄바꿈(말줄임 없음) */
/* [상세 창 통일 2026-10-16 · 지시서 docs/instructions/상세창_통일_v20261016.md] 상세 창(품번 · 거래처 하나를 눌러 여는 정보 창) = 한 부품 — 두 칸 창 dw2 = 폭 min(1440px, 96vw) · 왼쪽 : 오른쪽 6 : 4 · 한 칸 창 dw1 = 내용 폭(최소 560 · 상한 min(1440px, 96vw)) · 입력 · 확인 창은 대상 아님 */
.modal-card.dw2{width:min(1440px,96vw)}
.modal-card.dw2 .grid2{grid-template-columns:minmax(0,3fr) minmax(0,2fr)}
.modal-card.dw2.imm-dw{width:min(1080px,calc(100vw - 32px))}.modal-card.dw2.imm-dw .grid2{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}   /* [연속 10 ① 2절 2026-10-17] 품목 상세 전용 — 폭 1080(작은 화면 100vw − 32) · 왼쪽 속성 5 : 오른쪽 7(실측 속성 값 285 ~ 359px · 포장 사양 줄 468 ~ 618 · 이력 549 ~ 577) · 공용 dw2 값은 그대로 */
.modal-card.dw1{width:fit-content;min-width:min(560px,96vw);max-width:min(1440px,96vw)}.modal-card.dw1 table.dt{width:auto;min-width:100%;table-layout:auto}
@media(min-width:1366px){.modal-card.dwrap table.dt.imm-attr td.imm-one{white-space:nowrap;overflow-wrap:normal}}
/* [상세 창 머리 비침 2026-10-16] 창 몸통 위 여백(20px) 때문에 sticky 머리가 20px 아래에 붙어 그 틈으로 아래 글자가 비쳤다 — 상세 창(.dwrap) 몸통은 위 여백 0 · 첫 내용이 대신 20px 내려와 시작(같은 모양) · 머리는 몸통 맨 위에 붙음 */
.modal-card.dwrap .modal-body,.modal-card.dw1 .modal-body{padding-top:0}.modal-card.dwrap .modal-body>:first-child,.modal-card.dw1 .modal-body>:first-child{margin-top:20px}   /* [상세 창 통일] 한 칸 창(dw1)도 같은 머리 고침 */
.modal-card.dwrap table.dt.imm-attr td{font-variant-numeric:tabular-nums}   /* 값 칸 숫자(입수 · 개수)가 세로로 비교된다(표시 규칙 ⑤) */
.modal-card.dwrap table.dt.imm-attr td.imm-al{white-space:nowrap;overflow-wrap:normal;width:1%;color:var(--text-2);padding-right:12px}
.imm-dh{color:var(--text-2);margin-bottom:4px}
.imm-shopsel{display:inline-flex;gap:4px;align-items:center}
.imm-shopq{width:110px;height:30px;padding:0 8px;font-size:var(--fs-sm)}   /* [1-K] 거래처 찾기 칸 */
/* [공통 표 안 입력 2026-10-15 · 세원] 표(table.dt) 안 입력 칸 · 고르기 공통 모양 한 규칙 — 높이 28 · 테두리 --border-strong · 모서리 6 · 좌우 7 · 12.5px · --card · 포커스 --brand(.fld 와 같은 방식)
   폭은 칸마다(인라인 width · 클래스) 그대로 · 숫자 칸(inputmode numeric · decimal · number)은 우측 · tabular-nums · 빈 칸 빨간 테두리(.co-blank)는 그대로 이김 · 표 안 작은 단추(.btn.sm)도 28px 로 줄을 맞춤 */
table.dt input:not([type]),table.dt input[type=text],table.dt input[type=number],table.dt input[type=date],table.dt input[type=search],table.dt select{height:28px;border:1px solid var(--border-strong);border-radius:6px;padding:0 7px;font-size:var(--fs-tbl);background:var(--card);color:var(--text);vertical-align:middle}
table.dt input:not([type=checkbox]):not([type=radio]):focus,table.dt select:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 2px rgba(10,110,209,.15)}
table.dt input[inputmode=numeric],table.dt input[inputmode=decimal],table.dt input[type=number]{text-align:right;font-variant-numeric:tabular-nums}
table.dt input.co-blank{border-color:var(--c-st-bad)}
table.dt input:disabled,table.dt select:disabled{background:var(--bg);color:var(--text-2)}
table.dt .btn.sm{height:28px}
/* [공통 폼글꼴 2026-10-15] 필터 줄 안의 고르기 · 입력 칸 · 단추 높이 32px · 글자 12.5px 한 규칙(여기 두는 이유: .btn.sm · .pumf button · .imm-shopq 보다 뒤라야 이긴다) */
.filter-bar select,.filter-bar .btn,.filter-bar .pumf button,.filter-bar button:not(.link-btn),.filter-bar input:not([type=checkbox]):not([type=radio]):not([type=file]){height:32px;font-size:var(--fs-tbl)}   /* [화면정리 2차] 필터 줄 단추 전부 32px(표 안 .btn.sm 28px 은 그대로) */
.filter-bar .pumf button{border-radius:16px}
.imm-shopq{border:1px solid var(--border-strong);border-radius:7px;background:var(--card);color:var(--text)}   /* 거래처 찾기 칸 = 검색 칸과 같은 테두리 */
.imm-catb{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.imm-catb i{width:7px;height:7px;border-radius:50%;display:inline-block;flex:none}   /* [1-L] 구분 — 색 점 + 이름표(원칙 ③) */
/* [1-M 2026-10-15] 품명 두 줄은 잘라내지 않고 줄바꿈(붙여 쓴 긴 ERP 이름도 칸 안에서 접힘) · 행 높이는 내용만큼 */
table.dt.imm-t12 td.name{white-space:normal;min-width:240px}
.imm-t12 td .imm-nm1,.imm-t12 td .imm-nm2{white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:break-word;line-height:1.35}
/* 품명 열이 남는 폭을 가져가게 — 표만 auto 배치 · 나머지 열은 내용 폭만큼(width:1% · 줄바꿈 없음) · 생산처 배지는 한 줄(1-O) */
table.dt.imm-t12{table-layout:auto}
table.dt.imm-t12 th:not(:nth-child(4)),table.dt.imm-t12 td:not(:nth-child(4)){width:1%;white-space:nowrap;padding-left:8px;padding-right:8px}
table.dt.imm-t12 th:nth-child(4){min-width:240px}
table.dt td .imm-nm2{font-size:var(--fs-xs);font-weight:400;color:var(--text-3);margin-top:1px}
/* [나열 통일 2026-10-15] 품번 표 공통 칸 — ERP 모품명 2줄은 붙여 쓴 긴 이름도 칸 안에서 접힘 · 거래처 · 정산 방식 배지 칸은 줄바꿈 허용(표 폭을 늘리지 않게) */
table.dt td .imm-nm2{overflow-wrap:break-word;word-break:keep-all;line-height:1.35}
table.dt tbody td.im-usec,table.dt tbody td.im-usec .bg{white-space:nowrap}   /* [짧은 글 줄바꿈 ⑮] 거래처 · 정산 방식 배지 한 줄 */
table.dt.pk-tbl th,table.dt.pk-tbl td{padding-left:3px;padding-right:3px}   /* 포장 사양 15열 — 칸 여백만 줄임 */
/* [1-I] 「거래처별 품목」 거래처 정보 한 줄 */
.pr-shopline{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center;margin-top:10px;font-size:var(--fs-tbl);color:var(--text-2)}
.pr-shopline b{color:var(--text)}
/* [1-J] 원본 링크 · 인쇄용 PDF — 작은 글자 링크 · 작은 단추(새 hex 없음) */
.pk-src{font-size:var(--fs-xs);font-weight:600;color:var(--brand);text-decoration:none;white-space:nowrap}
.pk-src:hover{text-decoration:underline}
.pk-files{display:inline-flex;flex-direction:column;align-items:center;gap:3px}   /* [1-R] 포장 사양 표 「원본 · PDF」 칸 — 링크 · 단추를 세로로(표 가로 스크롤 방지) */
.pk-pdf{font-size:var(--fs-2xs);font-weight:700;padding:1px 6px;border:1px solid var(--border);border-radius:4px;background:var(--bg);color:var(--text-2);cursor:pointer;white-space:nowrap}
.pk-pdf-row{display:flex;align-items:center;gap:6px;margin-top:6px;font-size:var(--fs-sm)}
/* [1-H] 포장 사양 이미지 — 작은 그림 · 올리기 칸 · 크게 보기(새 hex 없음 · 기존 변수만) */
.pk-ths{display:inline-flex;gap:4px;align-items:center;vertical-align:middle}
.pk-th{width:34px;height:34px;padding:0;border:1px solid var(--border);border-radius:5px;background:var(--bg);overflow:hidden;cursor:zoom-in;display:inline-flex;align-items:center;justify-content:center;position:relative;flex:none}
span.pk-th{cursor:default}
.pk-th img{width:100%;height:100%;object-fit:cover;display:block}
.pk-th img.pk-bad,.pk-th img:not([src]){visibility:hidden}   /* [작은 그림 2026-10-16] 못 받은 그림 = 빈 네모(깨진 그림 표시 없음) */
@media(min-width:1366px){table.dt.pk-tbl td.name .imm-nm1,table.dt.pk-tbl td.name .imm-nm2,table.dt.imm-t12 td.name .imm-nm1,table.dt.imm-t12 td.name .imm-nm2{white-space:nowrap;overflow-wrap:normal}}   /* [포장 사양 표 정리 2026-10-16] 품명(표시명 · 원래 이름) = 넓은 화면에서 한 줄 · 폭은 품명 칸이 먼저 · 줄바꿈은 패키지 · 아웃박스 · 사이즈 칸에서 · 1366 미만은 줄바꿈 허용 */
@media(min-width:1600px){table.dt.pr-pnl td.name .imm-nm1,table.dt.co-fit td.name .imm-nm1,table.dt.pr-price td.name .imm-nm1{white-space:nowrap}}   /* [사진 뒤로 2026-10-17] 거래처 손익 단가 표도 사진 열이 붙어 13칸 — 1600 이상 한 줄 */   /* [줄바꿈 전수 정리 2026-10-16] 원가 · 거래처 손익 표(13 · 14칸)는 1600 이상에서 품명 한 줄 — 1440 에서 한 줄이면 표가 넘쳐(105 · 62px) 그 아래는 단어 단위 줄바꿈 */
.pk-tjob{display:inline-flex;align-items:center;gap:8px;min-width:240px}.pk-tjob .hbar-track{flex:1;display:block;min-width:140px}.pk-tjob .hbar-fill{display:block;height:100%}   /* [작은 그림 2] 진행 막대가 폭 0 이라 안 보이던 것 */
.pk-th.lg{width:72px;height:72px}
/* [포장 사양 정리 ② 2026-10-16] 품목 상세 창 「포장」 요약 — 사진 왼쪽 · 구성 · 사이즈 · 바코드 오른쪽 · 바코드 고정폭 숫자 */
.pk-card{display:flex;gap:12px;align-items:flex-start;padding:8px 0;border-top:1px solid var(--border)}
.pk-card:first-child{border-top:0}
table.dt .pk-card .pk-th.lg{width:84px;height:84px}
.pk-card-b{flex:1;min-width:0}
.pk-card-t{border-collapse:collapse;width:100%}
.pk-card-t td{padding:2px 0;border:0;vertical-align:top;white-space:normal;font-size:var(--fs-tbl)}
.pk-card-t td.pk-cl{width:56px;color:var(--text-2)}
.pk-bc{font-variant-numeric:tabular-nums}
.pk-card-f{text-align:right;margin-top:4px;color:var(--text-2)}
table.dt .pk-th{width:30px;height:30px}
/* [사진 = 품명 칸 왼쪽 2026-10-16] 품명 칸 = [그림 34px · 2026-10-16 상세 창 통일] [표시명 / 원래 이름] · 그림이 없어도 같은 크기 빈 자리(옅은 테두리) → 이름 시작 위치가 같다 · 그림은 품명 2줄 높이 안 */
.pk-th.nm-ph0{background:transparent;border-color:var(--border);cursor:default}
/* [사진 없음 표기 2026-10-16] 「없음」 = 회색 네모 안 작은 글 · 「!」 = 주황 네모(주의 · 글자로 뜻) · 비움 = 폭만(네모 없음) — 사진 자리 늘 두 칸 */
.pk-th.nm-skip{visibility:hidden;border-color:transparent;background:transparent;cursor:default}
.pk-th.sm{width:auto;min-width:22px;height:18px;padding:0 3px;vertical-align:middle;display:inline-flex}
/* [생산처 C안 2026-10-17] 칸 고정 — 「포천 | 가족」 두 칸(해당 칸만 색) · 「에그코리아」 한 칸 · 한 줄 */
.imm-pbox{display:inline-flex;border:1px solid var(--border-strong);border-radius:4px;overflow:hidden;white-space:nowrap;vertical-align:middle;font-size:var(--fs-2xs);font-weight:700;line-height:1;cursor:default}
.imm-pbox>span{padding:3px 6px}.imm-pbox>span+span{border-left:1px solid var(--border-strong)}
.imm-pbox .on{color:var(--card)}.imm-pbox .on.pc{background:var(--c-prod-pc)}.imm-pbox .on.ff{background:var(--c-prod-ff)}.imm-pbox .on.ek{background:var(--c-prod-ek)}.imm-pbox .off{color:var(--text-3);background:var(--card);font-weight:500}
.imm-pbox.sm>span{padding:2px 4px}
/* [사진 뒤로 2026-10-17] 표 뒤쪽 사진 칸 — 두 칸 그림 폭(내용 폭) · 남는 폭은 품명 칸 */
table.dt td.imm-phc{width:1%;white-space:nowrap;text-align:center;padding-left:4px;padding-right:4px}table.dt th.imm-phh{padding-left:4px;padding-right:4px}@media(max-width:1365px){table.dt th.imm-phh{font-size:var(--fs-2xs);padding-left:2px;padding-right:2px}table.dt td.imm-phc{padding-left:2px;padding-right:2px}}   /* [사진 두 열] 두 열이 되며 늘어난 칸 여백을 줄여 표 폭 그대로 */
table.dt th.imm-phh{white-space:nowrap;line-height:1.25}   /* [사진 두 열 2026-10-17] 머리 한 줄 칸 안 작은 「사진」(두 칸 선이 이어져 묶음으로 보임) */
.pk-slotlb{display:inline-flex;flex-direction:column;align-items:center;gap:2px}.pk-slotlb .lb{font-size:var(--fs-2xs);color:var(--text-3)}   /* [사진 두 열] 상세 창 큰 그림 두 자리 이름표 */
select.pick-empty{color:var(--text-3)}select option.opt-grey{color:var(--text-3)}   /* [A23] 고르기 「선택」 · 필터 정리용 항목 회색 */
table.dt td.imm-phc .pk-th{width:34px;height:34px}
.pk-th .n{position:absolute;right:1px;bottom:1px;font-size:var(--fs-2xs);font-weight:700;line-height:1.3;background:rgba(255,255,255,.88);color:var(--text-2);border-radius:3px;padding:0 3px}
.pk-slot{border:1px solid var(--border);border-radius:8px;padding:10px 12px}
.pk-drop{margin-top:8px;border:1px dashed var(--border);border-radius:6px;padding:10px;text-align:center;color:var(--text-2);font-size:var(--fs-sm)}
.pk-drop.on{border-color:var(--brand);color:var(--brand)}
.pk-sec+.pk-sec{margin-top:12px}.pk-sh{font-weight:700;font-size:var(--fs-md);margin-bottom:6px;white-space:nowrap}.pk-hint{margin-top:4px;font-size:var(--fs-xs);color:var(--text-3);white-space:nowrap}.pk-drop.pk-drop-s{margin-top:0;padding:5px 8px}.pk-thl{flex-wrap:wrap;align-items:center}.pk-thl.on{outline:1px dashed var(--brand)}.pk-add{width:46px;height:46px;border:1px dashed var(--border-strong);border-radius:6px;background:var(--card);color:var(--text-2);font-size:var(--fs-xs);cursor:pointer}.pk-add:hover{border-color:var(--brand);color:var(--brand)}   /* [연속 10 ① 2-2 2026-10-17] 포장 사양 수정 창 아래 두 칸 — ① ② ③ 같은 간격 · 제목 같은 크기 · 안내 한 줄 · 끌어다 놓기 칸 반 높이 · 「+ 추가」 */
.pk-lb .modal-body{display:flex;align-items:center;justify-content:center;gap:10px}
.pk-lb-img{max-width:min(78vw,1100px);max-height:68vh;min-width:120px;min-height:120px;object-fit:contain;display:block;background:var(--bg)}
.imm-miss{color:var(--c-st-warn);font-weight:700}   /* 「미입력」 — 주의(황토)는 글자만([CL] ⑤) */
table.dt tr[data-imm-row]:hover td{background:var(--hover)}
/* ===== [IM] 채널 상품 - 끝 ===== */
/* ===== [OH] 공통 발주이력 - 시작 ===== */
.kpis.oh6 .vl{font-size:var(--fs-num-sm)}                                   /* 9자리 알 수 · 6칸 — 기본 26px 로는 1440px 에서 넘친다 */
.kpis.oh6 .kpi .sub{line-height:1.45}
.oh-num,table.dt td .oh-num{font-variant-numeric:tabular-nums}
table.dt th.oh-prod{width:240px}   /* min-width 는 이 표에서 듣지 않는다(다른 폭 클래스처럼 width 로) */
table.dt td.oh-prod{white-space:normal;line-height:1.3}   /* 상세 표 상품 칸 — 열 12개라 좁다 · 이름은 줄바꿈, 코드는 아래 줄 */
table.dt tr.oh-short td{color:var(--negative)}                   /* 미납 표시 줄 — 도구와 같은 빨강 */
.oh-chart{width:100%;height:200px;display:block}
/* 수평 막대 두 꼴 [2026-10-11 · 4-2] — ① 구성 패널(hbg · 격자: 이름 | 막대 | 값): 값은 「14,677,055알」 한 덩어리(nowrap) · 비율은 둘째 줄 고정 · 값 칸 폭은 격자 auto 라 가장 긴 값에 맞춰 넓어진다
   ② TOP 표(hbs · 쌓기): 상품명을 막대 위 한 줄(넘치면 … + title) · 아래 줄은 막대 전체 폭 + 값은 오른쪽 끝 */
.hbg{display:grid;grid-template-columns:106px 1fr auto;column-gap:10px;row-gap:10px;align-items:center}
.hbg-lb{font-size:var(--fs-sm);color:var(--text-2);white-space:normal;overflow-wrap:break-word;line-height:1.3}
.hbg-val{display:flex;flex-direction:column;align-items:flex-end;white-space:nowrap;font-size:var(--fs-sm);font-weight:700;color:var(--text);line-height:1.3;font-variant-numeric:tabular-nums}
.hbg-val .p{font-size:var(--fs-xs);font-weight:600;color:var(--text-3)}
.hbs-row{margin-bottom:10px}.hbs-row:last-child{margin-bottom:0}
.hbs-lb{font-size:var(--fs-sm);color:var(--text);white-space:normal;overflow-wrap:break-word;line-height:1.3;margin-bottom:4px}
.hbs-line{display:flex;align-items:center;gap:10px}
.hbs-val{white-space:nowrap;font-size:var(--fs-sm);font-weight:700;color:var(--text);font-variant-numeric:tabular-nums;flex-shrink:0}
.hbs-val small{font-size:var(--fs-xs);font-weight:600;color:var(--text-3);margin-left:4px}
.oh-cal{display:flex;flex-wrap:wrap;gap:14px}
.oh-cal-month{min-width:266px;flex:1 1 266px;max-width:340px}
.oh-cal-title{font-size:var(--fs-sm);font-weight:800;color:var(--text-2);margin-bottom:6px}
.oh-cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
.oh-cal-w{font-size:var(--fs-2xs);color:var(--text-3);text-align:center}
.oh-cal-cell{height:36px;min-width:0;border:1px solid var(--border);border-radius:5px;padding:2px 4px;font-size:var(--fs-2xs);color:var(--text-3);display:flex;flex-direction:column;justify-content:space-between;background:#fff}
.oh-cal-cell.empty{border-color:transparent;background:transparent}
.oh-cal-cell.out{opacity:.35}
.oh-cal-cell[data-oh-day]{cursor:pointer}
.oh-cal-cell[data-oh-day]:hover{border-color:var(--brand)}
.oh-cal-cell .v{font-size:var(--fs-2xs);font-weight:700;color:var(--text);font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap;letter-spacing:-.2px;overflow:hidden}   /* 「260만」 이 두 줄로 꺾이지 않게 */
.oh-cal-cell.lv1{background:var(--c-heat-1)}.oh-cal-cell.lv2{background:var(--c-heat-2)}.oh-cal-cell.lv3{background:var(--c-heat-3)}.oh-cal-cell.lv4{background:var(--c-heat-4)}   /* [CL] */
.oh-cal-cell.lv3 .v,.oh-cal-cell.lv4 .v{color:var(--c-heat-txt)}   /* [CL] */
.oh-cal-cell.sel{outline:2px solid var(--coral);outline-offset:-1px}
.search-box select{font-family:inherit}
/* 상품 선택 패널 [2026-10-11 · 4-1] — 도구의 「상품 선택 ▾」 방식. 패널 안 찾기칸은 목록(#oh-prod-list)만 다시 그린다 — render() 를 부르지 않으므로 Enter 규칙(6장)의 예외다 */
.oh-prodsel{position:relative;display:inline-block}
.oh-prodsel .oh-prod-btn.on{background:var(--brand);border-color:var(--brand);color:#fff}
.oh-prod-panel{position:absolute;top:calc(100% + 6px);left:0;z-index:40;width:min(380px,90vw);background:#fff;border:1px solid var(--border);border-radius:8px;box-shadow:0 8px 24px rgba(20,30,40,.18);padding:10px;text-align:left}
.oh-prod-panel[hidden]{display:none}
.oh-prod-panel input[type=text]{width:100%;height:30px;margin-bottom:8px;font-family:inherit}
.oh-prod-list{max-height:280px;overflow:auto;display:flex;flex-direction:column;gap:2px}
.oh-prod-grp{font-size:var(--fs-xs);font-weight:800;color:var(--text-3);padding:6px 6px 2px;position:sticky;top:0;background:#fff}
.oh-prod-grp small{font-weight:700;opacity:.8}
.oh-prod-it{display:flex;align-items:center;gap:8px;padding:5px 6px;border-radius:6px;cursor:pointer;font-size:var(--fs-tbl);line-height:1.35}
.oh-prod-it:hover{background:var(--hover)}
.oh-prod-it.on{background:#E8F1FB}
.oh-prod-it input{flex-shrink:0;margin:0}
.oh-prod-it .oh-unl{font-size:var(--fs-2xs);color:var(--text-3);font-weight:700}
.oh-prod-foot{display:flex;gap:8px;align-items:center;margin-top:8px;padding-top:8px;border-top:1px solid var(--border)}
.oh-chips{display:flex;flex-wrap:wrap;gap:6px;margin:-8px 0 14px}
.oh-chip{display:inline-flex;align-items:center;gap:3px;padding:2px 5px 2px 9px;border-radius:11px;font-size:var(--fs-xs);font-weight:700;background:#E8F1FB;color:var(--brand);line-height:1.6}
.oh-chip small{font-weight:600;opacity:.75}
.oh-chip button{border:0;background:none;color:inherit;font-size:var(--fs-lg);line-height:1;padding:0 3px;cursor:pointer;border-radius:50%}
.oh-chip button:hover{background:rgba(10,110,209,.15)}
/* ===== [OH] 공통 발주이력 - 끝 ===== */
/* ===== [OD] 온라인 발주 대시보드 - 시작 ===== */
.kpis.od6 .vl{font-size:var(--fs-num)}                                   /* 지시서 타이포 기준(KPI 값 22px) — 7자리 · 6칸 · 1440px 실측으로 넘침 확인(보고서) */
.kpis.od6 .kpi .sub{line-height:1.45;display:flex;flex-wrap:wrap;gap:0 6px;align-items:center}
.kpi.mut::before{background:var(--border-strong)}.kpi.mut .vl{color:var(--text-3)}   /* 0 건 — 회색 */
.od-legend{display:flex;gap:14px;flex-wrap:wrap;font-size:var(--fs-xs);color:var(--text-2);margin-top:8px;align-items:center}   /* [차트 스타일 2026-10-13] 차트 아래(에그 .chart-legend 과 같은 자리 · 간격) */
.od-sw{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:5px;vertical-align:-1px}   /* [차트 스타일 2026-10-13] 견본 9px(에그 .chart-legend i 와 같게) */
.od-chart{width:100%;height:240px;display:block}   /* [차트 스타일 2026-10-13] viewBox 높이 240 과 같게(글자 세로 비율 1) */
.od-chart circle{cursor:pointer}.od-chart circle:focus{outline:none;stroke-width:3}
.od-band{display:flex;gap:2px;height:calc(22px * var(--bar-w, .7) / .7);border-radius:5px;overflow:hidden;margin-bottom:10px}
.od-band div{min-width:2px}
table.dt tr.od-row{cursor:pointer}table.dt tr.od-row:hover td,table.dt tr.od-row:focus td{background:var(--hover)}
.od-rate{display:flex;align-items:center;gap:6px;min-width:96px}
table.dt th.od-rate-th{width:130px}
.od-rate .tr{flex:1;height:calc(10px * var(--bar-w, 1));background:var(--bg);border-radius:5px;overflow:hidden}   /* [막대 폭 2026-10-13] 계란 부족 현황 띠 두께 = 10px × BAR_W(--bar-w · 2026-10-18 15:20 = 5px) */
.od-rate .fl{height:100%;border-radius:5px}
.od-rate .pc{width:44px;text-align:right;font-size:var(--fs-xs);font-weight:700;font-variant-numeric:tabular-nums}
.od-b{font-weight:700}.od-t-neg{color:var(--c-st-bad)}.od-t-warn{color:var(--c-st-warn)}.od-t-mut{color:var(--c-st-muted)}   /* 굵기 · 색은 클래스로(인라인 금지 · 7-3) · [CL] 상태색 */
.od-todo .it{display:flex;align-items:center;gap:8px;padding:9px 0;border-bottom:1px solid var(--border);font-size:var(--fs-md);white-space:nowrap}   /* 한 줄 [표시 보정 2026-10-11] */
.od-todo .it .lb{font-weight:700;flex-shrink:0}
.od-todo .it .mid{flex:1;min-width:0;white-space:normal;overflow-wrap:break-word;font-size:var(--fs-tbl)}
.od-todo .it .link-btn{flex-shrink:0;padding:0 9px}
.od-todo .it:last-child{border-bottom:0}
.od-todo .it.off{color:var(--text-3)}
.od-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0;background:var(--c-st-muted)}
.od-dot.neg{background:var(--c-st-bad)}.od-dot.warn{background:var(--c-st-warn)}   /* [CL] */
.od-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
.od-grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px}
@media(max-width:1180px){.od-grid,.od-grid3{grid-template-columns:1fr}}
/* [OD 보강 2026-10-12 · 지시서 docs/instructions/온라인발주_대시보드_보강_v20261012.md] 세 단 머리 · 매출 표 · 펼침 행 */
.od-sec{display:flex;align-items:center;gap:10px;margin:22px 0 12px;font-size:var(--fs-lg);font-weight:800;color:var(--c-st-head)}
.od-sec::before{content:"";width:4px;height:16px;border-radius:2px;background:var(--c-st-head)}
.od-sec small{font-size:var(--fs-xs);font-weight:400;color:var(--text-2)}
.od-sec:first-child{margin-top:0}
.kpis.od4{grid-template-columns:repeat(4,1fr)}
.kpis.od4 .vl{font-size:var(--fs-num)}
table.dt tr.od-srow{cursor:pointer}table.dt tr.od-srow:hover td{background:var(--hover)}
table.dt tr.od-srow .od-caret{display:inline-block;width:12px;color:var(--text-3);font-size:var(--fs-2xs)}
table.dt tr.od-srow.on td{background:var(--hover)}
.od-sales-sub{margin:0 16px 10px;border:1px solid var(--border);border-radius:6px;overflow:hidden}
.od-sales-sub-t{padding:7px 12px;font-size:var(--fs-sm);font-weight:700;background:var(--sticky);border-bottom:1px solid var(--border)}
.od-sales-sub table.dt{font-size:var(--fs-sm)}
table.dt tr.od-stot td{font-weight:800;border-top:2px solid var(--border-strong)}
.od-wchart{width:100%;height:230px;display:block}
.od-wchart .od-wbar{cursor:pointer}.od-wchart .od-wbar:hover rect,.od-wchart .od-wbar:focus rect{opacity:1}   /* [차트 스타일 2026-10-13] 강조 1 — 후속 ②로 기본도 1(CH_STYLE.opacityStack)이라 호버 때 변화는 없다 · 규칙은 그대로 둔다 */.od-wchart .od-wbar:focus{outline:none}
.od-sw.unk{background:repeating-linear-gradient(45deg,var(--c-unknown) 0 3px,var(--card) 3px 5px);border:1px solid var(--c-unknown)}
.od-wnote{font-size:var(--fs-xs);color:var(--text-2);margin-top:6px}
/* ===== [OD] 온라인 발주 대시보드 - 끝 ===== */
.nav-cnt{margin-left:auto;background:#33507A;color:#C7D0D8;font-size:var(--fs-xs);font-weight:700;min-width:22px;text-align:center;padding:1px 8px;border-radius:11px;line-height:1.6}
.nav-item.active .nav-cnt{background:#3E5E88;color:#fff}
.nav-cnt:empty{display:none}
/* ===== [CO] 원가 - 시작 ===== */
.co-ok{color:var(--c-st-good);font-weight:700;white-space:nowrap}
.co-bad{color:var(--c-st-bad);font-weight:700;white-space:nowrap}
.co-total{color:var(--c-st-head)}
.co-up{color:var(--c-st-good);font-size:var(--fs-xs);font-weight:700}
.co-down{color:var(--c-st-bad);font-size:var(--fs-xs);font-weight:700}
.co-end td,.co-end td *{color:var(--c-st-muted)}
.co-in{width:96px;text-align:right}   /* 높이 · 테두리는 표 안 공통 모양([공통 표 안 입력]) */
.co-in.co-blank{border:1px solid var(--c-st-bad)}
/* [원가 2단계] 거래처 비용 · 손익 */
.co-pend{color:var(--c-st-warn);font-size:var(--fs-xs);font-weight:700;white-space:nowrap}   /* [원가 3단계] 확인 전(황토 = 글자 · 배지만) */
.co-siteline{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;margin-top:12px;font-size:var(--fs-tbl)}
.co-etc{margin:0 16px 8px}
table.dt.co-todo-t td.co-why{white-space:normal;color:var(--text-2);font-size:var(--fs-sm)}
/* [원가 3단계] 품번별 원가 · 자재 단가 표 — 내용 폭(auto) · 이름 · 비고만 줄바꿈(1280 폭 넘침 0) */
table.dt.co-fit{table-layout:auto}
table.dt.co-fit th,table.dt.co-fit td{width:1%;white-space:nowrap;padding-left:5px;padding-right:5px}   /* [나열 통일] 6 → 5px — 앞 4열(구분 · 거래처 배지)이 더해져서 */
table.dt.co-fit thead th{white-space:nowrap;line-height:1.3}   /* [짧은 글 줄바꿈 2026-10-16 · ⑮] 표 머리 한 줄 */
table.dt.co-fit td.name,table.dt.co-fit td.co-wrap{width:auto;white-space:normal;overflow-wrap:break-word;min-width:110px}table.dt.co-fit th.co-wrap{width:auto;white-space:nowrap}
table.dt.co-fit td.co-note2{white-space:normal;overflow-wrap:break-word;min-width:90px;max-width:220px;font-size:var(--fs-xs);color:var(--text-2)}
table.dt.co-fit .co-basis{width:100%;min-width:110px}
table.dt.co-fit td .co-pend{display:block}
table.dt.co-fit td.co-st{white-space:normal;min-width:76px}   /* [공통 폼글꼴 때 함께] 상태 배지 둘(▲ 미입력 · 제경비 산정 중)은 세로로 */
@media(max-width:1439px){table.dt.co-fit td.co-st .co-bad{white-space:normal}table.dt.co-fit td.co-note2{min-width:60px}}@media(max-width:1365px){table.dt.co-fit th,table.dt.co-fit td{padding-left:2px;padding-right:2px}}   /* [점검2차 후속 ③ 2026-10-17] 1440 미만 = 원인 사이에서만 줄 넘김(원인 글자는 .pr-nw 로 한 줄 · 거래처 손익 상태 칸과 같은 규칙) · 비고 칸 최소 폭 90 → 60 · 1366 미만 = 칸 좌우 여백 5 → 2px(사진 열과 같은 방식) · 1440 · 1920 그대로 */
#co-todo,#co-sec-egg,#co-sec-shop,#co-sec-mat,#co-sec-site,#co-sec-feed{scroll-margin-top:60px}
.co-etc summary{cursor:pointer;padding:6px 0}
table.dt.co-shop-t{table-layout:auto}
table.dt.co-shop-t td,table.dt.co-shop-t th{padding-left:5px;padding-right:5px}
table.dt.co-shop-t td.co-shopn{white-space:normal;word-break:keep-all;min-width:96px}   /* [화면정리 2차] 거래처 이름 줄바꿈 */
table.dt.co-shop-t thead th{white-space:nowrap;line-height:1.3}   /* [짧은 글 줄바꿈 ⑮] 표 머리 한 줄 */
.co-in.co-in-w{width:78px}   /* [나열 통일] 90 → 80 · 정산 방식 열이 더해져서(9자리 금액까지 들어감) */
.co-in.co-in-s{width:110px}
.co-memo{width:100%;min-width:64px;height:26px}
.co-note{font-size:var(--fs-xs);font-weight:400;color:var(--text-3);white-space:normal;margin-top:2px;max-width:260px}
.co-note-ed{border:0;background:none;color:var(--text-3);cursor:pointer;font-size:var(--fs-xs);padding:0 2px}
.co-erp{font-size:var(--fs-xs);color:var(--text-3);margin-top:3px;white-space:nowrap}
table.dt tr.co-grp td{background:var(--bg);font-size:var(--fs-xs);font-weight:700;color:var(--text-2);text-align:left}
.co-np-pos{color:var(--c-st-good)}
.co-np-neg{color:var(--c-st-bad)}
table.dt.pr-pnl{table-layout:auto}
table.dt.pr-pnl th,table.dt.pr-pnl td{width:1%;white-space:nowrap;padding-left:5px;padding-right:5px}
table.dt.pr-pnl th.pr-nameh{width:auto}
table.dt.pr-pnl td.name{width:auto;white-space:normal;overflow-wrap:break-word;min-width:100px}
table.dt.pr-pnl td.pr-why{white-space:normal;min-width:96px}table.dt.pr-pnl td.pr-why .co-bad{white-space:normal}@media(min-width:1600px){table.dt.pr-pnl td.pr-why,table.dt.pr-pnl td.pr-why .co-bad{white-space:nowrap}}.pr-nw{white-space:nowrap}   /* [손익 줄바꿈 2026-10-16] 상태 = 이유를 점으로 이은 한 줄 · 칸이 좁으면 이유 사이에서만 줄을 넘김(이유 글자 · 배지는 꺾이지 않음) · 제경비 산정 중은 표 머리 */
table.dt.pr-pnl td.pr-shopc{white-space:nowrap}   /* [손익 줄바꿈] 거래처 = 한 줄 · 남는 폭은 품명 칸 */
.pr-sub{display:block;font-size:var(--fs-xs);font-weight:400;color:var(--text-3)}
.co-map>summary{cursor:pointer;list-style:none}
/* ===== [CO] 원가 - 끝 ===== */
/* ===== [SB] 사이드바 그룹 접기 - 시작 ===== */
/* [2026-10-09] 머리글 div.nav-group 을 스크립트가 button 으로 바꿔 끼운다(SB_COLLAPSE_ENABLED 일 때만).
   글자·색·여백·윗선은 .nav-group 그대로 받고, 버튼 기본 모양(테두리 세 변·배경·줄 간격)만 걷는다 — 펼친 상태의 높이가 작업 전과 같다.
   접힘은 래퍼에 .sb-closed — 머리글 말고 전부(메뉴 · 안쪽 data-admin-only 래퍼) 숨긴다.
   ★ 숨기기만 한다. 권한으로 숨은 것(인라인 display:none · hidden)을 보이게 하는 규칙은 없다. */
button.nav-group{display:flex;align-items:center;gap:6px;width:100%;text-align:left;background:transparent;border-left:0;border-right:0;border-bottom:0;line-height:inherit;border-radius:0}
button.nav-group:hover{filter:brightness(1.25)}
button.nav-group:focus-visible{outline:2px solid #fff;outline-offset:-2px}
.sb-caret{width:10px;flex-shrink:0;font-size:var(--fs-2xs)}
.sb-closed > :not(.nav-group){display:none}
/* [SB 그룹색 2026-10-12 · 지시서 docs/instructions/사이드바_그룹색_v20261012.md] 가농 / 외주 구분 + 화살표 키우기. 메뉴 구성 · 권한 · 라우트 무변경.
   · 구분은 묶음 머리 .nav-sec(외주 / 가농 · 2026-10-11)의 data-kind(ganong | outsourced) 한 속성.
   · 표시 = **묶음 머리 「외주」·「가농」 글자색 · 굵게 600 · 왼쪽 짧은 선 3px**(정정 2026-10-12 22:22 · 지시서 docs/instructions/사이드바_그룹색_정정_v20261012.md). 그룹 머리글은 원래 모양 그대로.
     이름 옆 꼬리표(e9d7021)와 그룹 머리글 왼쪽 띠 3px(3ef5a7b 까지)는 세원 라이브 확인으로 **둘 다 뺐다**(지시서 docs/instructions/사이드바_띠삭제_v20261012.md). 메뉴 줄(.nav-item · 활성 주황 띠)은 그대로.
   · 화살표는 글자(▾ ▸)가 아니라 SVG 꺾쇠 15px · 선 2px · 머리글 글자색(흰색) — 접히면 -90° 회전(오른쪽 향함). 색 값은 [CL] --c-nav-* 만 쓴다(hex 없음). */
.sidebar .nav-sec[data-kind]{display:flex;align-items:center;gap:8px;font-weight:600}   /* 묶음 머리 — [SB2] 의 흰색 45% 를 아래 색이 이긴다(선택자가 더 세다) · 글자 크기 11px · 여백 · 윗선은 그대로 */
.sidebar .nav-sec[data-kind]::before{content:"";width:3px;height:1em;border-radius:1px;background:currentColor;flex-shrink:0}   /* 글자 높이만큼 짧은 세로 선 — 그룹 머리글 띠와 같은 색 · 굵기 */
.sidebar .nav-sec[data-kind="outsourced"]{color:var(--c-nav-outsourced)}
.sidebar .nav-group .sb-caret{width:15px;height:15px;font-size:0;color:#fff;opacity:.9;display:inline-flex;transition:transform .15s,opacity .15s}   /* .nav-group 을 끼워 [SB2] 의 .sidebar .sb-caret(10px · 흰색 50%)보다 세게 — 그 줄은 지우지 않는다 */
.sidebar .sb-caret svg{width:15px;height:15px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.sidebar .sb-caret.closed{transform:rotate(-90deg)}
.sidebar button.nav-group:hover .sb-caret{opacity:1;filter:drop-shadow(0 0 2px rgba(255,255,255,.6))}
/* ===== [SB] 사이드바 그룹 접기 - 끝 ===== */
/* ===== [SB2] 사이드바 모양 통일 - 시작 ===== */
/* [2026-10-11 · 지시서 docs/instructions/사이드바_통일형_v20261011.md · A안 통일형] 바꾸는 것은 **모양**뿐이다 — 글자 크기 13px 하나(배지 11 · 접기 표시 10) ·
   글자색 흰색 하나(그룹별 색 없음) · 아이콘은 대메뉴(머리글)에만 · 하위메뉴는 글자만 + 들여쓰기 + 세로선 · 활성은 주황 띠(:root --sb-active).
   ★ 원래 선언(.nav-group · .nav-item · .sys-* 색)은 지우지 않고 **여기서 덮어쓴다**(이 구역을 지우면 그대로 돌아간다). 메뉴 순서 · 이름 · 권한 · 접기 동작([SB])은 손대지 않는다.
   ★ 행 높이는 작업 전과 같게 — 머리글 41px(전 41.4) · 메뉴 44px. 머리글 아이콘은 아래 [SB2] 스크립트가 하위메뉴 SVG 를 복제해 넣는다(새 아이콘 묶음 없음). */
.sidebar .nav-group{box-sizing:border-box;height:41px;padding:0 18px;display:flex;align-items:center;gap:10px;font-size:var(--fs-md);font-weight:700;letter-spacing:0;color:#fff;margin-top:4px}
.sidebar .nav-group.sys-ek,.sidebar .nav-group.sys-dl,.sidebar .nav-group.sys-ga,.sidebar .nav-group.sys-cp{color:#fff}   /* 그룹별 색 끄기 — 원래 선언은 위에 그대로(되살리려면 이 줄만 지운다) */
.sidebar .nav-group .sb2-ic{width:16px;height:16px;flex-shrink:0;stroke:currentColor}
.sidebar button.nav-group:hover{filter:none;background:rgba(255,255,255,.05)}
.sidebar .sb-caret{order:3;margin-left:auto;font-size:var(--fs-2xs);color:rgba(255,255,255,.5)}   /* 접기 표시를 오른쪽 끝으로 · 흰색 50% */
.sidebar .nav-item{font-size:var(--fs-md);font-weight:400;color:rgba(255,255,255,.72);padding-left:42px;position:relative}   /* 하위메뉴 — 글자만 · 머리글 아이콘 자리에 맞춰 들여쓰기 */
.sidebar .nav-item:not([data-view="home"]) svg{display:none}   /* 하위메뉴 아이콘은 숨기기만(요소는 남김) */
.sidebar .nav-item:not([data-view="home"])::before{content:'';position:absolute;left:26px;top:0;bottom:0;width:1px;background:rgba(255,255,255,.12)}   /* 그룹 묶음 세로선 */
.sidebar .nav-item:hover{background:rgba(255,255,255,.05);color:#fff}
.sidebar .nav-item.active{font-weight:700;color:#fff;background:rgba(255,255,255,.07);border-left-color:var(--sb-active)}   /* 활성 — 주황 띠 3px(원래 3px 자리) · 값은 :root --sb-active */
.sidebar .nav-item[data-view="home"]{font-weight:700;color:#fff;padding-left:18px;gap:10px}   /* 통합 대시보드 — 그룹 밖 단독 · 머리글과 같은 모양 */
.sidebar .nav-item[data-view="home"] svg{width:16px;height:16px}
.sidebar .nav-item[data-view="home"]::before{display:none}
.sidebar .nav-sec{font-size:var(--fs-xs);font-weight:600;color:rgba(255,255,255,.45);letter-spacing:.4px;padding:10px 18px 0;margin-top:8px;border-top:1px solid rgba(255,255,255,.12);user-select:none}   /* [NM 3차 2026-10-11] 묶음 머리 가농 / 외주 / 공통 — 표시만 */
/* ===== [SB2] 사이드바 모양 통일 - 끝 ===== */
/* ===== [SB3] 사이드바 정리 - 시작 ===== */
/* [1-G 2026-10-15 · 세원 확정 A안 + 관리자 하단] 메뉴 사이 가로선 전부 제거 · 묶음 이름표(외주 · 가농) 앞에만 여백(위 20 · 아래 4) · 메뉴 줄 위아래 9px(줄 높이 살짝 줄임) ·
   자료실 앞 여백 · 관리자는 맨 아래(스크롤 영역 안 margin-top:auto — 사이드바가 화면보다 길면 목록 끝에 붙어 가리지 않는다) · 구분선 1줄 · 작은 글자 · 흐린 색.
   ★ [SB] · [SB2] 선언은 그대로 두고 덮어쓴다(이 구역을 지우면 돌아간다). 하위 메뉴 세로선 · 배지 · 그룹색 · 접기는 그대로. 새 hex 없음(흰색 투명도는 [SB2] 와 같은 값). */
.sidebar .nav-group{border-top:0;margin-top:0;height:auto;min-height:0;padding-top:9px;padding-bottom:9px}
.sidebar .nav-item{height:auto;min-height:0;padding-top:9px;padding-bottom:9px}
.sidebar .nav-item[data-view="home"]{padding-top:10px;padding-bottom:10px}
.sidebar .nav-sec{border-top:0;margin-top:0;padding:20px 18px 4px}
/* [2026-10-17] 자료실 앞 여백(margin-top 16px) 없앰 — 다른 그룹(발주 · 손익 · 채권 · 품목 · 거래처)과 같은 간격 */
.sidebar .nav-sec[data-kind="outsourced"]{margin-top:28px;border-top:1px solid rgba(255,255,255,.12)}   /* [정리 1차 2026-10-16] 외주 묶음은 가농 메뉴 뒤 — 묶음 간격보다 넓은 여백 + 윗선 한 줄로 떼어 보인다(「가농」 머리는 지움 · 주 사용자가 가농) */
.sidebar .sb-admin{margin-top:auto;border-top:1px solid rgba(255,255,255,.12);padding:4px 0 10px}
.sidebar .sb-admin .nav-group{font-size:var(--fs-xs);font-weight:600;color:rgba(255,255,255,.5);padding-top:7px;padding-bottom:7px}
.sidebar .sb-admin .nav-item{font-size:var(--fs-sm);color:rgba(255,255,255,.5);padding-top:7px;padding-bottom:7px}
.sidebar .sb-admin .nav-item.active{color:#fff}
/* ===== [SB3] 사이드바 정리 - 끝 ===== */
.shell .ctx{font-size:var(--fs-xs);color:#B7C2CC;margin-left:9px;padding-left:10px;border-left:1px solid var(--shell-line)}
.link-btn{background:none;border:1px solid var(--brand);color:var(--brand);height:28px;padding:0 12px;border-radius:6px;font-weight:700;font-size:var(--fs-sm)}
.link-btn:hover{background:var(--hover)}
.pcard{display:flex;gap:12px;align-items:center;padding:14px;border:1px solid var(--border);border-radius:8px;background:#fff}
.pcard .pic{width:42px;height:42px;border-radius:10px;display:flex;align-items:center;justify-content:center;color:#fff;flex-shrink:0}
/* [계정 · 권한 2026-10-16] 수정 창 묶음 체크 — 한 줄에 하나 */
.acct-grp{display:block;margin:3px 0;white-space:normal}
.acct-off td,.acct-off .acct-grp,.acct-dim,.acct-fnoff{color:var(--text-3)}.acct-in-w{width:300px;max-width:100%}   /* [계정 초대 · 비활성 2026-10-17] 비활성 계정 = 회색(지우지 않음) · 창구 설정 전 안내 회색 · 초대 · 사유 입력 칸 폭 */
/* [상세 창 연결 칸 2026-10-16] 이름표 옆 「?」 · 수정 창 「고급」 */
.imm-q{display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;border-radius:50%;border:1px solid var(--border-strong);color:var(--text-3);font-size:var(--fs-2xs);font-weight:700;cursor:help;vertical-align:middle;margin-left:2px}
.imm-adv summary{cursor:pointer;color:var(--text-2);font-size:var(--fs-sm);padding:4px 0}
/* [원가 단가 표기 2026-10-16] 단가 옆 ⓘ = 단가 근거(마우스 · admin 은 눌러서 수정) */
.co-why{border:0;background:none;padding:0 2px;color:var(--text-3);font-size:var(--fs-xs);cursor:help;vertical-align:middle}.co-why[data-co-basis]{cursor:pointer}.co-why.none{opacity:.35}
/* [원가 ERP 전환 2단계 2026-10-16] 미리보기 차이율 — ▲ 증가 청 · ▼ 감소 적(기호 병행) */
.co-up{color:var(--c-st-good)}.co-dn{color:var(--c-st-bad)}
.co-fixl{display:inline-flex;align-items:center;gap:2px;font-size:var(--fs-2xs);color:var(--text-3);margin-left:4px;vertical-align:middle;white-space:nowrap}.co-fixl input{margin:0}
input.pick-bad,table.dt input.pick-bad{border-color:var(--c-st-bad)}   /* [입력칸 선택 2026-10-17] 검색 고르기 — 목록 밖 값(저장 안 됨) */
.co-ready{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin:0 0 12px;padding:8px 12px;border:1px solid var(--border);border-radius:8px;background:var(--card)}.co-ready .co-ready-i{font-weight:700;white-space:nowrap;padding:0;border:0;background:none;cursor:pointer;font-size:var(--fs-sm)}.co-ready .co-ready-i:hover{text-decoration:underline}   /* [원가 9월 기준 2026-10-17] 준비 상태 한 줄 — ✔ co-ok · ✖ co-bad(적색 + 기호) */
.ws-t tr.ws-sub td,.ws-t tr.ws-tot td{font-weight:700;background:var(--bg)}.ws-t tr.ws-click{cursor:pointer}   /* [주간 수불 2026-10-17] 소계 · 합계 줄 · 단백이 펼침 줄 */
.bg.warn{color:var(--c-st-warn);background:var(--card);border:1px solid var(--c-st-warn)}   /* [증빙서류 2026-10-17] 임박 ◔ — 주의(황토)는 글자 · 배지만([CL] ⑤) */
table.dt td.pk-bc{font-family:ui-monospace,Consolas,"D2Coding",monospace;white-space:nowrap}   /* [연속 10 ① 2-3 2026-10-17] 바코드 = 고정폭 글꼴 · 한 줄(글자 그대로 · 앞자리 0 유지) */
table.dt:has(td.name>.imm-nm1)>tbody>tr>td{vertical-align:top}table.dt td.name>.imm-nm1:only-child::after{content:"\00a0";display:block;font-size:var(--fs-xs);font-weight:400;line-height:1.35;margin-top:1px}   /* [연속 10 ① 2-5 2026-10-17 세원] 품명 2줄 칸(품명 + 회색 보조줄)이 있는 표 = 모든 칸 위쪽 맞춤 · 보조줄 없는 줄도 그 자리만큼 비워 행 높이를 같게(사진 34px 와 같은 높이) */
table.dt td.name>.imm-nm1 .bg{padding-top:0;padding-bottom:0;line-height:inherit;vertical-align:baseline}   /* [연속 10 ① 2-5] 품명 줄 안 배지(「수정」 등)가 줄 높이를 키우지 않게 */
.imm-st0{color:var(--text-3)}.imm-use{cursor:pointer;white-space:nowrap}.imm-use.pub{color:var(--brand);font-weight:600}.imm-use.none{color:var(--text-3);cursor:default}.imm-use:hover{text-decoration:underline}.imm-use.none:hover{text-decoration:none}   /* [연속 10 ① 2-6 2026-10-17 · 색 B안] 평소 값 = 색 없음 · 판매 = 회색 글자 · 공용 N곳 = 청색 글자(칩 없이) · 미사용 = 회색 */
.pm-nst0{color:var(--text-3)}.pm-line{width:110px}.pm-cal{overflow-x:auto}.pm-cr{display:grid;grid-template-columns:220px minmax(560px,1fr);align-items:center;border-bottom:1px solid var(--border);min-height:28px}.pm-cl{font-size:var(--fs-sm);padding:4px 8px;word-break:keep-all;overflow-wrap:break-word}.pm-cg{display:grid;align-items:center;padding:3px 0}.pm-ch .pm-cg{padding:0}.pm-cd{font-size:var(--fs-2xs);color:var(--text-3);text-align:center;padding:4px 0;border-left:1px solid var(--border)}.pm-cd.we{background:var(--bg)}.pm-cd.td{color:var(--brand);font-weight:700}.pm-bar{height:calc(20px * var(--bar-w, .7) / .7);border:1px solid var(--brand);background:color-mix(in srgb,var(--brand) 10%,var(--card));color:var(--brand);border-radius:4px;font-size:var(--fs-2xs);padding:0 4px;white-space:nowrap;cursor:pointer;text-align:left;min-width:0}.pm-bar.nt{border-style:dashed}.pm-bar.off{border-color:var(--border-strong);background:var(--bg);color:var(--text-3)}   /* [행사 기안 보강 2026-10-17] 행사 리스트 · 달력(막대 = 기간 · 점선 = 노션 이력 · 회색 = 취소 · 채널 = 점 색) */
tr.ar-on td{background:var(--bg)}.ar-trend{display:flex;gap:14px;align-items:flex-end;min-height:120px;overflow-x:auto}.ar-tc{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:72px}.ar-tv{font-size:var(--fs-xs);color:var(--text-2);font-variant-numeric:tabular-nums}.ar-tb{width:28px;background:var(--brand);border-radius:3px 3px 0 0}.ar-tb.neg{background:var(--text-3)}.ar-tm{font-size:var(--fs-xs);color:var(--text-3)}   /* [채권 1단계 2026-10-17] 줄을 누르면 달별 잔액 막대(올린 달만 · 마이너스 = 회색) */
table.dt td.ar-bd{min-width:84px}table.dt td.ar-bd .bg{margin:1px 0}   /* [채권] 표시 칸 = 배지 사이에서만 줄 넘김 */
.ev-tb{font-size:var(--fs-2xs);font-weight:700;margin-left:2px}.ev-tb.bad{color:var(--c-st-bad)}.ev-tb.soon{color:var(--c-st-warn)}   /* [증빙서류 3분할 2026-10-17] 탭 배지 — ⚠ 만료 · 30일(적색) · ◔ 임박(주황) */
/* [IV] 재고 현황 2026-10-17 — 거래처 묶음 첫 줄 위 선 · 숨긴 줄 흐림 · 줄 끌기 손잡이 */
.iv-t tr.iv-g1 td{border-top:1px solid var(--border-strong)}
.iv-t tr.iv-hid td{opacity:.5}
.iv-t td.iv-mg{cursor:grab;color:var(--text-3);user-select:none}
.panel-head .btn.sm{margin-top:-5px;margin-bottom:-5px}   /* [표정렬 전수 2026-10-17] 패널 머리 작은 단추(30px)가 h3 줄상자(20px)보다 높아 머리가 커지던 것 — 바깥 높이만 줄임(screen-metrics.md 7-7 · 검사 2) */
.badge-row > .btn{white-space:nowrap;flex-shrink:0}   /* [표정렬 전수 2026-10-17] 머리 줄 단추 = 짧은 글 한 줄(계정 · 권한 「+ 계정 초대」가 두 줄로 꺾이던 것 · 검사 15) */
table.dt.dt-fit.ar-led th,table.dt.dt-fit.ar-led td{padding-left:6px;padding-right:6px}   /* [채권 3단계 2026-10-17] 전체 원장 = 열 11개(회수 기간 · 입금 없음 더함) · 1280 넘침 0 */
table.dt tr.od-hsub td{color:var(--text-2);font-size:var(--fs-sm)}table.dt tr.od-hsub td.name{font-weight:400;padding-left:28px}   /* [A44 2026-10-17] 알가열 세부 줄 = 들여쓰기 · 회색 작은 글씨 */
table.dt td .od-hcar,table.dt th .od-hcar{margin:0 4px 0 0;padding:0 2px;border:0;background:none;box-shadow:none;height:auto;min-height:0;min-width:0;font-size:var(--fs-xs);color:var(--text-3);cursor:pointer}   /* [A44] 알가열 세부 접기 단추 */
table.dt td.ar-old{color:var(--c-st-bad);font-weight:700}table.dt td.ar-m3{color:var(--c-st-warn);font-weight:700}   /* [채권 4단계 2026-10-17] 연령 흐름 · 묵은 잔액 — 4개월째 이전 적색 · 3개월째 주황(글자만 · [CL] ⑤) */
table.dt td.ar-up{color:var(--c-st-bad)}table.dt td.ar-dn{color:var(--c-st-good)}.ar-grp-l{margin:3px 0;line-height:1.6}   /* [채권 5단계 2026-10-17] 지난주 대비 — ▲ 적 = 늘어남 · ▼ 청 = 줄어듦(기호 병행) · 묶음 · 상계 목록 줄 */
.ar-roll-l{margin:4px 0 0 18px;font-size:var(--fs-sm);color:var(--text-2);line-height:1.5}   /* [채권 4단계] 가져오기 미리 보기 목록 */
.modal-card.dwrap table.dt.ar-roll td,.modal-card.dwrap table.dt.ar-roll th{white-space:nowrap}   /* [채권 4단계] 연령 흐름 = 만 단위 · 한 줄(숫자 가운데서 꺾이지 않게) */
table.dt th.iv-now{color:var(--text);border-bottom:2px solid var(--c-iv-egg)}   /* [수급 2026-10-17] 이번 주 열 머리 */
.aj-rules{background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:10px 14px;margin-bottom:16px;color:var(--text-2);font-size:var(--fs-sm);line-height:1.7}.aj-steps{margin:0;padding-left:22px;line-height:1.8}.aj-flag{color:var(--c-st-warn)}.aj-say{margin-top:10px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}table.dt tr.aj-sel td{background:var(--bg)}   /* [자동 작업 2026-10-17] 공통 규칙 회색 상자 · 프로세스 단계 · 승인 ⚑ · 하는 말 · 고른 줄 */
table.od-st td.od-cell{cursor:pointer;vertical-align:top}table.od-st td.od-cell:hover,table.od-st td.od-cell.on{background:var(--hover)}table.od-st .od-cdl{font-size:var(--fs-2xs);line-height:1.3;margin-top:1px}table.od-st th.od-hsubh{color:var(--text-3);font-size:var(--fs-2xs);font-weight:600;background:var(--sticky)}table.od-st td.od-hsubc{background:var(--sticky);color:var(--text-2);font-size:var(--fs-sm)}table.od-st td.od-hsubc:hover,table.od-st td.od-hsubc.on{background:var(--hover)}table.od-st tr.od-srow td.name,table.od-st tr.od-stot td.name{vertical-align:top}   /* [A62 2026-10-17] 채널표 행 전환 — 칸 = 값 + 아래 작은 증감 · 알가열 세부 열 = 회색 작은 머리 · 옅은 배경 · 칸 클릭 */
.fin-ro{opacity:.45;cursor:not-allowed}   /* [손익 · 채권 열람 2026-10-17] 보기 계정 — 수정 단추 · 칸 흐림(마우스 글 「관리자만 수정」) */
.pick-wrap{max-height:420px;overflow:auto}.pick-wrap table.pick-t thead th{position:sticky;top:0;z-index:1;background:var(--card)}table.pick-t tr.pk-grp td{background:var(--sticky)}table.pick-t tr.pk-has td{color:var(--text-3)}   /* [선택 칸 통일 A65 2026-10-17] 표준 ② 품목 추가 표 — 패널 안 스크롤 · 머리 고정 · 묶음 머리 줄 · 이미 든 품목 회색 */
#sidebar .nav-sub{padding:8px 16px 2px 28px;font-size:var(--fs-2xs);font-weight:700;color:var(--sb-text-dim, var(--text-3));letter-spacing:.02em}   /* [메뉴 재구성 A64 2026-10-17] 생산 안 「알가공 · 단백이」 소제목(접히지 않음 · 그룹색 글자 = .sys-ga) */
/* ===== [DH] 통합 대시보드 확정안 F(2026-10-18 A69) — 색 = [CL] 변수만 · 글자 = --fs-* · 막대 두께 = --bar-w ===== */
.dh-head{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.dh-n-bad{color:var(--c-st-bad)}.dh-n-ok{color:var(--c-st-ok)}
.dh-steps{display:flex;align-items:center;gap:6px;font-size:var(--fs-sm);flex-wrap:wrap}.dh-steps-lb{color:var(--text-2);margin-right:4px;white-space:nowrap}
.dh-step{border:1px solid var(--border-strong);background:var(--card);color:var(--c-st-muted);border-radius:12px;padding:3px 10px;font-size:var(--fs-sm);font-family:inherit;cursor:pointer;white-space:nowrap}
.dh-step.on{background:var(--c-st-good);border-color:var(--c-st-good);color:#fff}.dh-step-ln{width:16px;height:2px;background:var(--border-strong)}.dh-step-ln.on{background:var(--c-st-good)}
.dh-todo{display:grid;grid-template-columns:170px minmax(0,1fr);gap:8px 24px;padding:14px 18px;margin-bottom:16px}
.dh-todo-l{display:flex;flex-direction:column;gap:8px;border-right:1px solid var(--border);padding-right:18px}
.dh-lvbar{display:flex;height:calc(10px * var(--bar-w, .7) / .7);border-radius:4px;overflow:hidden;gap:2px}
.dh-cnt{font-size:var(--fs-sm)}
.dh-todo-r{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 24px;align-content:start}
.dh-row{display:flex;gap:10px;align-items:center;font-size:var(--fs-md);padding:5px 0;border-bottom:1px solid var(--bg);min-width:0}
.dh-ic{font-weight:800;width:18px;flex:none;text-align:center}.dh-txt{min-width:0}.dh-area{font-size:var(--fs-xs);color:var(--text-3);white-space:nowrap}
.dh-row .dh-go{margin-left:auto;flex:none}
.dh-r-bad .dh-txt{font-weight:700}.dh-r-bad .dh-ic{color:var(--c-st-bad)}.dh-r-warn .dh-ic{color:var(--c-st-warn)}.dh-r-plan{color:var(--text-2)}
.dh-more{grid-column:1/-1;justify-self:start;margin-top:4px}
.dh-bad{color:var(--c-st-bad)}.dh-warn{color:var(--c-st-warn)}.dh-plan{color:var(--text-2)}.dh-good{color:var(--c-st-good)}.dh-mut{color:var(--text-3);font-weight:400}.dh-strong{font-weight:700}
.dh-bad-bg{background:var(--c-st-bad)}.dh-warn-bg{background:var(--c-st-warn)}.dh-plan-bg{background:var(--c-st-muted)}.dh-good-bg{background:var(--c-st-good)}.dh-ok-bg{background:var(--c-st-ok)}
.dh-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:16px}.dh-cards.dh-n3{grid-template-columns:repeat(3,minmax(0,1fr))}.dh-cards.dh-n2{grid-template-columns:repeat(2,minmax(0,1fr))}.dh-cards.dh-n1{grid-template-columns:minmax(0,1fr)}
.dh-card{padding:16px;display:flex;flex-direction:column;gap:9px;min-width:0;margin:0}
.dh-card-h{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:var(--fs-md)}.dh-card-h b{white-space:nowrap}
.dh-big{font-size:var(--fs-num-lg);font-weight:800;color:var(--c-st-head);line-height:1.15}.dh-big small,.dh-mid-n small{font-size:var(--fs-sm);font-weight:400;color:var(--text-2);margin-left:6px}
.dh-big.dh-bad{color:var(--c-st-bad)}
.dh-mid-n{font-size:var(--fs-num);font-weight:800;color:var(--c-st-head)}
.dh-sub{font-size:var(--fs-sm);color:var(--text-2)}
.dh-none{font-size:var(--fs-sm);color:var(--text-3);background:var(--bg);border-radius:6px;padding:8px 10px}
.dh-gauge{position:relative;height:calc(10px * var(--bar-w, .7) / .7);background:var(--bg);border-radius:5px}.dh-gauge>span{position:absolute;left:0;top:0;bottom:0;border-radius:5px}.dh-gauge>i{position:absolute;top:-3px;bottom:-3px;width:2px;background:var(--text-2)}
.dh-axis{display:flex;justify-content:space-between;font-size:var(--fs-xs);color:var(--text-3);margin-top:-4px}
.dh-stack{display:flex;height:calc(11px * var(--bar-w, .7) / .7);border-radius:4px;overflow:hidden;gap:2px}.dh-stack span{min-width:2px}
.dh-leg{display:flex;gap:10px;flex-wrap:wrap;font-size:var(--fs-sm)}.dh-leg i,.dh-sw{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:4px;vertical-align:-1px}.dh-leg i.dh-dash{width:12px;height:0;border-top:2px dashed;border-radius:0;vertical-align:3px}
.dh-hb{display:flex;flex-direction:column;gap:6px;font-size:var(--fs-sm)}.dh-hb-r{display:grid;grid-template-columns:minmax(56px,auto) 1fr auto;gap:8px;align-items:center}.dh-hb-r>span:first-child{white-space:nowrap}
.dh-hb-t{height:calc(8px * var(--bar-w, .7) / .7)}.dh-hb-t>span{display:block;height:100%;border-radius:2px}.dh-hb-l{font-size:var(--fs-md);gap:7px}.dh-hb-l .dh-hb-r{grid-template-columns:120px 1fr 56px}
.dh-mid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-bottom:16px}.dh-mid.has-wide{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,.8fr)}.dh-mid.dh-m2{grid-template-columns:repeat(2,minmax(0,1fr))}.dh-mid.dh-m1{grid-template-columns:minmax(0,1fr)}
.dh-vbars{display:flex;align-items:flex-end;gap:28px;height:140px;padding:0 10px}.dh-vb{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;height:100%;justify-content:flex-end}
.dh-vb-v{font-size:var(--fs-sm);white-space:nowrap}.dh-vb-v.dh-good{font-weight:700}.dh-vb-x{font-size:var(--fs-sm);color:var(--text-2)}
.dh-vb-b{width:calc(64% * var(--bar-w, .7) / .7);border-radius:3px 3px 0 0;position:relative;max-height:calc(100% - 44px)}.dh-vb-a{background:var(--sys-ek-light)}.dh-vb-c{background:var(--sys-ek)}.dh-vb-m{position:absolute;left:0;right:0;bottom:0;background:var(--c-st-head)}
.dh-out{padding:16px 18px}.dh-out-go{display:flex;gap:8px;flex-wrap:wrap}.dh-out-g{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:12px}.dh-out-g>div{display:flex;flex-direction:column;gap:8px;min-width:0}
.dh-out-t{font-size:var(--fs-md);font-weight:700}.dh-out-t.sys-ek{color:var(--sys-ek)}.dh-out-t.sys-dl{color:var(--sys-dl)}.dh-out-t.sys-ga{color:var(--sys-ga)}
@media(max-width:1180px){.dh-cards,.dh-cards.dh-n3{grid-template-columns:repeat(2,minmax(0,1fr))}.dh-mid,.dh-mid.has-wide{grid-template-columns:minmax(0,1fr)}.dh-todo-r{grid-template-columns:minmax(0,1fr)}}
/* ===== [DH] 끝 ===== */
/* [매출 현황 A74 2026-10-18] sales.js — 회색 줄(반품 · 품목 밖) · 빈 칸 · 머리 눌러 정렬 */
.sa-mut{color:var(--text-3)}.sa-grey td{color:var(--text-3)}.sa-sort{cursor:pointer;user-select:none}
/* [A76 2026-10-18] ERP 기준일 · 확정 전 경고(주의 = 글자만 · 색 체계 ⑤) */
.pr-asof{color:var(--text-3);font-weight:400;font-size:var(--fs-xs);white-space:nowrap}.pr-early{color:var(--c-st-warn);font-weight:600;font-size:var(--fs-xs);white-space:nowrap;cursor:help}