/* Asung IMS — 화면 공통 스타일
   ─────────────────────────────────────────────
   ⚠️ 여기를 고치면 모든 화면이 바뀐다. 고친 뒤 CHECKLIST.md 를 처음부터 훑는다.
   ⚠️ 화면마다 다른 것(열 너비 · 그 화면에만 있는 덩어리)은 각 html 의 <style> 에 남긴다.
   📌 2026-09-15 · 화면 다섯에 복사돼 있던 것을 모았다. */

:root{
  --line:#e5e9ef; --muted:#6b7686; --ink:#12161c; --bg:#f7f8fa; --accent:#2f6df6;
  --warn:#92640a; --bad:#b42318; --good:#16794a;
  --mono:ui-monospace,Menlo,monospace;
  --ims-logo-h:22px;          /* 헤더 로고 높이(IMS · POS) · WMS 는 아래에서 28px(운영 picker.html 실측 · frontend.md 의 15px 는 낡은 값) */
}
*{box-sizing:border-box}

/* ── 110% — IMS · POS 화면만 (2026-09-30 lay-1 · 판정 154 · 157) ──
   ims-auth.js 가 읽히는 즉시 <html data-ims-mode="ims|wms|pos"> 를 단다(파일 이름으로) · WMS 일곱은 그대로 100%(창고 태블릿 · Caleb 이 필요할 때 요청).
   ⚠️ zoom 이다(transform 아님) — 화면들이 px 를 직접 써서 루트 font-size 로는 안 커진다 · 표준 zoom(Chrome 128+ · Firefox 126+ · Safari)에서
      vh 단위는 zoom 의 영향을 받지 않고 px 는 1.1 배가 된다 ⇒ calc(100vh - 230px) 류가 그대로 맞는다(lay-1 보고 ②).
   ⚠️ 번쩍임: script 가 body 끝이라 첫 그림이 100% 로 한 번 그려질 수 있다 — 화면 파일이 <html data-ims-mode="ims"> 를 미리 달면 첫 그림부터 110%(화면 차수). */
html[data-ims-mode="ims"],html[data-ims-mode="pos"]{zoom:1.1}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:"Inter",system-ui,-apple-system,"Malgun Gothic","Apple SD Gothic Neo",sans-serif;
}

/* ── 헤더 ─────────────────────────────────────
   ⚠️ ☰ Menu 는 이름·역할 바로 옆 · 다른 버튼보다 앞 (WMS UI 규칙과 같다) */
header{
  display:flex;align-items:center;gap:8px;padding:12px 18px;background:#fff;
  border-bottom:1px solid var(--line);position:sticky;top:0;z-index:10;
}
header .brand{font-family:var(--mono);font-weight:800;font-size:14px}
header .sp{flex:1}
header .who{font-size:13px;color:var(--muted)}
header button{
  border:1px solid var(--line);background:#fff;border-radius:9px;padding:7px 11px;
  font:inherit;font-size:13px;font-weight:600;cursor:pointer;
}
header button:hover{background:#f2f4f8}

/* ── 헤더 — 로고 · 모드 · 윗줄 펼침 (2026-09-30 lay-1 · 판정 149 ~ 167 · ims-auth.js setupHeader 가 그린다 · 마크업은 화면에 없다) ──
   [로고] [IMS · WMS · POS] Purchasing ▾ · Sales ▾ · Inventory ▾ · Action Center · Settings ▾ … 이름 · Sign Out
   · 로고는 .brand 자리(a.ims-logo) · 모드는 둘 이상일 때만(.ims-modes) · 윗줄 펼침은 IMS 화면만(.ims-top) · WMS 는 로고 + 모드만 더하고 탭 줄 · ☰ 그대로
   · 펼침 자리는 CSS — .ims-grp{position:relative} 안의 .ims-drop{position:absolute} · 좌표 계산 없음(zoom 아래에서 getBoundingClientRect 가 1.1 배 어긋난다)
   · 보이는 조건은 .ims-grp.open>.ims-drop **하나뿐** — 여는 일은 js 한 곳(ims-auth.js wireDropdowns · 판정 168): 마우스는 올리기 · 터치는 클릭 · 한 번에 하나 · 밖 클릭 · Esc 로 닫힘
   ⚠️ [2026-09-30 밤 lay-1b] CSS :hover 로 여는 규칙(hover 미디어 블록 · 다리 ::after)은 지웠다 — 클릭으로 연 것과 겹쳤다(Caleb 화면 실사고) · 단추의 hover 배경만 남겼다
   · 좁은 폭: 윗줄 펼침이 한 줄에 못 서면 JS 가 header.ims-wrap 을 달아 둘째 줄 전체로 내린다 · 늘어난 높이는 --ims-hdr-extra(.list 의 top 이 더한다) */
header .ims-brand{display:flex;align-items:center;font:inherit}
header .ims-logo{display:flex;align-items:center;text-decoration:none}
header .ims-logo img{height:var(--ims-logo-h);width:auto;display:block}
html[data-ims-mode="wms"] header .ims-logo img{height:28px}
header .ims-modes{display:flex;align-items:center;gap:2px;margin-left:4px;padding-left:10px;border-left:1px solid var(--line)}
header .ims-modes a.mode{
  font-family:var(--mono);font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  padding:6px 8px;border-radius:7px;color:var(--muted);text-decoration:none;white-space:nowrap;
}
header .ims-modes a.mode:hover{background:#f2f4f8;color:var(--ink)}
header .ims-modes a.mode.cur{color:#fff;background:var(--ink)}
header .ims-authtag{font-size:10px;white-space:nowrap}
header.ims-hdr-ims{flex-wrap:wrap;row-gap:6px}
header .ims-top{display:flex;align-items:center;gap:2px;margin-left:10px;flex-wrap:wrap}
header .ims-grp{position:relative}
header .ims-grpbtn{
  border:0;background:transparent;border-radius:8px;padding:7px 11px;font:inherit;font-size:13.5px;font-weight:700;color:#1e2430;
  cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:5px;white-space:nowrap;line-height:1.2;
}
header .ims-grpbtn .car{font-size:10px;color:var(--muted)}
header .ims-grpbtn:hover,header .ims-grp.open>.ims-grpbtn{background:#f2f4f8;color:var(--ink)}
header .ims-grp.cur>.ims-grpbtn,header .ims-grpbtn.flat.cur{color:#3b5bdb;background:#eef3ff}
header .ims-grpbtn.flat.cur{pointer-events:none}
header .ims-drop{
  display:none;position:absolute;top:calc(100% + 4px);left:0;z-index:30;min-width:220px;
  background:#fff;border:1px solid #e3e6eb;border-radius:12px;box-shadow:0 12px 32px rgba(15,20,30,.16);padding:6px;
}
header .ims-grp.open>.ims-drop{display:block}
header .ims-grp:last-child>.ims-drop{left:auto;right:0}
header .ims-drop a{display:block;padding:9px 13px;border-radius:8px;font-size:13.5px;font-weight:600;color:#1e2430;text-decoration:none;white-space:nowrap}
header .ims-drop a:hover{background:#f2f4f8}
header .ims-drop a.cur{background:#eef3ff;color:#3b5bdb;pointer-events:none}
/* 둘째 줄로 내려간 윗줄 펼침(JS 가 .ims-wrap 을 단다) — 이름 · Sign Out 은 첫 줄 오른쪽에 남는다 */
header.ims-wrap .ims-top{order:10;flex-basis:100%;margin-left:0;padding-top:4px;border-top:1px solid #f1f3f7}

/* ── 배치 ───────────────────────────────────── */
.wrap{display:flex;gap:16px;padding:16px 18px;align-items:flex-start}
main{flex:1;min-width:0}
main.stack{display:flex;flex-direction:column;gap:14px}

/* ── 왼쪽 목록 패널 ───────────────────────────
   폭은 화면마다 다르다 — 각 html 에서 .list{width:…;flex:0 0 …} 로 덮는다 */
.list{
  background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden;
  position:sticky;top:calc(70px + var(--ims-hdr-extra,0px));   /* 헤더(sticky) 아래 12px · 헤더가 두 줄로 꺾이면 그만큼 더(2026-09-30 lay-1 · --ims-hdr-extra 는 ims-auth.js setHeaderVars 가 적는다) */
}
.list .top{padding:10px;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:8px}
.list input[type=search]{
  width:100%;border:1px solid var(--line);border-radius:9px;padding:8px 11px;font:inherit;font-size:13px;
}
.list select{border:1px solid var(--line);border-radius:8px;padding:6px 8px;font:inherit;font-size:12.5px}
.list .opts{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:12.5px;color:var(--muted)}
.list .opts label{display:flex;align-items:center;gap:5px;cursor:pointer;user-select:none}
.list .rows{overflow:auto}
.list .row{padding:9px 12px;border-bottom:1px solid #f1f3f7;cursor:pointer;font-size:13.5px}
.list .row:hover{background:#fafbfd}
.list .row.cur{background:#eef3ff}
.list .foot{display:flex;align-items:center;gap:8px;padding:9px 11px;border-top:1px solid var(--line)}
.list .foot .sp{flex:1}
.list .foot button,
.bar button{
  border:1px solid var(--line);background:#fff;border-radius:8px;padding:5px 9px;
  font:inherit;font-size:12.5px;font-weight:600;cursor:pointer;
}
.list .foot button:disabled,
.bar button:disabled{opacity:.45;cursor:default}
.range{font-family:var(--mono);font-size:11.5px;color:var(--muted);white-space:nowrap}

/* 2026-10-29 · 입력칸 기본 테두리(대화 Claude · Caleb 「직사각형의 색을 연하게 해줘야 화면이 부드러울 것 같아 · 팝업 화면들이 대부분 그래」)
   화면이 따로 꾸미지 않은 칸(시각 · 날짜 · 메모 · 팝업 창의 칸)은 브라우저 기본 테두리(진한 회색 2px)로 그려졌다 → 연한 1px · 둥근 모서리
   ⭐ :where() = 가장 약한 규칙(0점) — 화면 <style> 이나 클래스(.sofield · .qin · .tin · .mrow input …)가 꾸민 칸은 그 모양이 그대로 이긴다 · 체크박스 · 라디오 · 파일 · 색 · 단추형은 빼고
   ⚠️ 두께가 2px → 1px 이라 칸이 1px 씩 작아진다 · 배경 · 안쪽 여백은 건드리지 않는다(꺼진 칸의 회색이 남게) */
:where(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]):not([type=button]):not([type=submit]):not([type=reset]):not([type=image]),select,textarea){
  border:1px solid #d5dbe4;border-radius:6px;
}

input:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(47,109,246,.12);
}

/* ── 카드 ───────────────────────────────────── */
.card{background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.card h3{
  margin:0;padding:11px 14px;border-bottom:1px solid var(--line);
  font-size:12px;font-family:var(--mono);color:var(--muted);
  text-transform:uppercase;letter-spacing:.04em;display:flex;align-items:center;gap:8px;
}
.card h3 .n{color:var(--ink);font-weight:700}
.head{padding:16px}
.head .sk{font-family:var(--mono);font-size:13px;color:var(--muted)}
.head .nm{font-size:19px;font-weight:700;margin:3px 0 8px}
.note{padding:10px 14px;border-top:1px solid var(--line);font-size:12.5px;color:var(--muted);background:#fafbfd}

/* 카드 위쪽 도구 줄 (제목 · 검색 · 페이징) */
.bar{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.bar .sp{flex:1}
.bar .nm{font-size:16px;font-weight:700}
.bar h2{margin:0;font-size:15px;font-family:var(--mono)}
.bar input[type=search]{border:1px solid var(--line);border-radius:9px;padding:7px 10px;font:inherit;font-size:12.5px;width:200px}
.bar label{font-size:12.5px;color:var(--muted);display:flex;align-items:center;gap:5px;cursor:pointer;user-select:none}

/* 숫자 요약 */
.stats{display:flex;gap:16px;padding:10px 14px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.stat{font-size:12px;color:var(--muted)}
.stat b{display:block;font-size:17px;color:var(--ink);font-family:var(--mono);font-weight:700;margin-top:1px}
.stat.warn b{color:var(--warn)}

/* ── 칩 ─────────────────────────────────────── */
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{
  border:1px solid var(--line);border-radius:999px;padding:2px 9px;
  font-size:11.5px;font-family:var(--mono);color:var(--muted);
}
.chip.bad{border-color:#f3d3cf;color:var(--bad)}
.chip.good{border-color:#cfe9d7;color:var(--good)}
.chip.warn{border-color:#ecdcb4;color:var(--warn)}

/* 목록 행에 붙는 작은 꼬리표 */
.tag{
  font-size:10.5px;font-family:var(--mono);border:1px solid var(--line);border-radius:999px;
  padding:0 6px;white-space:nowrap;color:var(--muted);font-weight:500;
}
.tag.off{color:var(--bad);border-color:#f3d3cf}
.tag.disc{color:var(--warn);border-color:#ecdcb4}

/* ── 표 ─────────────────────────────────────── */
table{border-collapse:collapse;width:100%;font-size:13px}
thead th{
  background:#fafbfd;text-align:left;padding:8px 12px;border-bottom:1px solid var(--line);
  font-size:10.5px;font-family:var(--mono);color:var(--muted);text-transform:uppercase;white-space:nowrap;
}
tbody td{padding:7px 12px;border-bottom:1px solid #f1f3f7;vertical-align:top}
tbody tr:hover{background:#fafbfd}
.kv td:first-child{
  width:150px;color:var(--muted);font-size:10.5px;font-family:var(--mono);
  text-transform:uppercase;white-space:nowrap;
}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}

/* ── 값 표시 ──────────────────────────────────
   ⚠️ 색은 is_active 에만 쓴다. staging·default·primary 는 false 가 정상인데
      빨갛게 칠하면 전 행이 경고처럼 보인다(2026-09-15 화면에서 드러남).
   ✅ [2026-09-15 오후] 여섯 화면 전부 — is_default·is_primary 는 yn(v, false) 로 회색 */
.mono{font-family:var(--mono);font-size:12.5px}
.num{font-family:var(--mono);text-align:right}
.dim{color:#9aa4b2}
.on{color:#16a34a;font-weight:600}
.off{color:var(--bad);font-weight:600}
.neutral{color:#4b5565;font-weight:600}
.lnk{color:var(--accent);text-decoration:none;cursor:pointer}
.lnk:hover{text-decoration:underline}
.msg{padding:22px 14px;text-align:center;color:var(--muted);font-size:13.5px}
.err{color:#dc2626;font-weight:600}

/* ═══════════════════════════════════════════════════════════════
   ⑤ 문서 화면 공통 — po.html · invoices.html · charges.html 에 같은 내용이 복사돼 있던 것을 올렸다 (2026-09-17 · 규칙 34)
   ─────────────────────────────────────────────────────────────
   왜: [Caleb 2026-09-17] 「레이아웃과 디자인을 PO 에서 잡는다 — 상품등록·SO 에도 그대로 쓴다」 ⇒ 기준이 한 곳에 있어야 한다.
       버튼 하나를 바꾸면 세 곳을 고쳐야 했고, 넷째 화면(payments.html)이 오기 전이 가장 싸다.
   ⚠️ 통일한 값 셋(이름은 같은데 화면마다 달랐다 — 설계가 아니라 그때그때 늘린 값):
       .qin 84→104px(charges 값 · 금액이 잘리는 것이 좁은 것보다 나쁘다 ⇒ .qin.pin(104px)은 뜻이 없어져 지웠다 · class="qin pin" 의 pin 은 이제 아무 규칙도 안 건다)
       .tin 150→180px(charges 값) · .wfilt input[type=search] 280/340→260/320(invoices·charges 값 · po 만 혼자 넓었다)
   ⚠️ 올리지 않은 것: main(ims-ui.css 의 main 과 이름이 겹친다 — 바른 길은 <main class="stack"> · HTML 은 이번 범위 밖) ·
       .pobox input,.pobox select(invoices·charges 2곳 · po 모달 안의 .qin 을 덮어 모양이 바뀐다 — 각 화면에 남겼다)
   📌 #wide 묶음은 「넓은 목록」 구조를 세 화면이 같은 id 로 쓴다 — 다음 화면이 #wide 를 안 쓰면 이 묶음만 안 듣는다(다른 묶음과 무관) */

/* 버튼 — 문서 화면의 기본 버튼 · .go 는 주 동작(Create · Confirm) */
.pobtn{border:1px solid var(--line);background:#fff;border-radius:9px;padding:6px 12px;
       font:inherit;font-size:12.5px;font-weight:600;cursor:pointer;color:var(--ink)}
.pobtn:hover{background:#f2f4f8}
.pobtn:disabled{opacity:.45;cursor:default}
.pobtn.go{background:#3b5bdb;border-color:#3b5bdb;color:#fff}
.pobtn.go:hover{background:#3550c4}

/* 인라인 입력 — 표 안에서 바로 고치는 칸(수량·금액 .qin · 글·날짜 .tin) · 줄 지우기 .xbtn */
.qin{width:104px;border:1px solid var(--line);border-radius:7px;padding:3px 6px;
     font-family:var(--mono);font-size:12.5px;text-align:right}
.tin{width:180px;border:1px solid var(--line);border-radius:7px;padding:3px 6px;font:inherit;font-size:12.5px}
.xbtn{border:1px solid var(--line);background:#fff;border-radius:7px;padding:2px 7px;
      font:inherit;font-size:12px;cursor:pointer;color:var(--muted)}
.xbtn:hover{background:#fdf0ef;color:var(--bad);border-color:#f3d3cf}

/* 모달 — .pomodal(덮개) 안에 .pobox(상자) · h4 머리 · .pbody 본문 · .pfoot 발 · .frow 는 폼 한 줄(라벨 + 입력) */
.pomodal{position:fixed;inset:0;z-index:5000;background:rgba(16,22,30,.45);
         display:flex;align-items:center;justify-content:center;padding:20px}
.pobox{background:#fff;border-radius:14px;max-width:900px;width:100%;max-height:86vh;
       display:flex;flex-direction:column;box-shadow:0 20px 60px rgba(15,20,30,.28)}
.pobox h4{margin:0;padding:14px 16px;border-bottom:1px solid var(--line);font-size:14px}
.pobox .pbody{padding:14px 16px;overflow:auto;flex:1}
.pobox .pfoot{padding:12px 16px;border-top:1px solid var(--line);display:flex;gap:8px;align-items:center}
.pobox .pfoot .sp{flex:1}
.frow{display:flex;gap:10px;align-items:center;margin-bottom:10px;font-size:12.5px;color:var(--muted)}
.frow label{min-width:120px}
.frow input,.frow select{flex:1}

/* 넓은 목록(#wide) · 그 위의 필터 줄(.wfilt) — 아무것도 안 골랐을 때 화면 전체를 차지하는 표 */
#wide{padding:14px}
#wide .card{padding:0}
#wide table{font-size:12.5px}
#wide tbody tr{cursor:pointer}
#wide tbody tr:hover{background:#fafbfd}
.wfilt{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:12px 14px;border-bottom:1px solid var(--line)}
.wfilt .sp{flex:1}
.wfilt input[type=search]{min-width:260px;flex:0 1 320px}
.wfilt input,.wfilt select{border:1px solid var(--line);border-radius:9px;padding:6px 9px;font:inherit;font-size:12.5px}
.wfilt .dash{color:var(--muted);font-size:12px}

/* 문서 머리 — 번호 줄(.invbar) · 두 칸 격자(.invgrid) · 카드 아래 잔글(.invsub) (invoices · charges · 다음 문서 화면도 이것을 쓴다) */
.invbar{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.invbar .pn{font-family:var(--mono);font-size:20px;font-weight:700}
.invgrid{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
@media (max-width:900px){ .invgrid{grid-template-columns:1fr} }
.invsub{padding:8px 12px;font-size:12px;color:var(--muted);background:#fafbfd;border-top:1px solid var(--line)}

/* ⚠️⚠️ [실사고 2026-09-16 · po.html] `hidden` 속성이 안 먹었다 —
   .wrap 에 display:flex 가 걸려 있어 브라우저 기본 [hidden]{display:none} 을 이긴다.
   그래서 숨기라고 해도 그대로 보이고, 넓은 목록은 숨은 채였다.
   ⇒ 작성자 규칙으로 못 박는다. display 를 가진 요소에 hidden 을 쓸 때마다 걸리는 함정이다. */
[hidden]{display:none !important}

/* ═══════════════════════════════════════════════════════════════
   탭 줄 — 지금 화면 갈래의 탭 · 헤더 바로 아래 한 줄 (2026-09-17 · ims-auth.js setupTabs 가 그린다 · 마크업은 화면에 없다)
   ✅ [2026-09-30 lay-1] 모드(IMS · WMS)와 묶음(Purchasing · Sales)은 이 줄에서 **헤더로 올라갔다**(위 「헤더 — 로고 · 모드 · 윗줄 펼침」 · 판정 153 · 160).
   ✅ [2026-09-30 밤 lay-1c · 판정 169] IMS 는 **Purchasing · Sales 의 문서 화면**(열 줄)에서 이 줄이 다시 선다 — 펼침 = 다른 갈래로 건너가는 길 · 탭 = 같은 갈래 안 옆 화면 ·
      마스터(Suppliers) · Inventory · Action Center · Settings · POS 는 줄 없음 · WMS 일곱은 그대로(Picking · Packing · Fulfillment · Receiving · Bin Moves · Split & Waves · WMS Admin).
      .ims-tabs a.mode · .sep 규칙은 쓰는 곳이 없어 지웠다(모드 모양은 header .ims-modes).
   [Caleb] 「payments·charges·invoices 로 넘어가면 PO 로 돌아갈 길이 메뉴 클릭뿐이라 불편하다 — 탭으로」
   ⚠️ sticky 가 아니다 — 헤더(sticky · top:0)만 남고 이 줄은 함께 스크롤된다.
      스크롤 0 에서 내용이 이 줄 높이만큼 내려온다 — --ims-tabs-h(JS 가 잰다 · 헤더 둘째 줄 높이 + 이 줄 높이)를 .list .rows 의 max-height 가 빼 쓴다(po · so · so-invoices · so-payments · so-credits).
   ⚠️ 이름은 ims- 접두어(ims-nav 선례) · 충돌 없음(2026-09-17 grep). */
.ims-tabs{display:flex;gap:2px;padding:0 18px;background:#fff;border-bottom:1px solid var(--line)}
.ims-tabs a{
  padding:9px 13px;font-size:13px;font-weight:600;color:var(--muted);text-decoration:none;
  border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap;
}
.ims-tabs a:hover{color:var(--ink);background:#fafbfd}
.ims-tabs a.cur{color:#3b5bdb;border-bottom-color:#3b5bdb;pointer-events:none}

/* ═══════════════════════════════════════════════════════════════
   구역 제목 띠 — PO · SO 상세의 Lines · Discounts · Receipts … (2026-09-30 lay-1 · 판정 156 · 167 · 화면에 붙이는 것은 lay-3)
   · 왼쪽 색 막대 + 그 색의 굵은 제목 글씨 · 구역마다 다른 색 · 같은 구역은 PO · SO 같은 색 · 색은 **여기 한 번만**
   · 쓰는 법: <h3 class="ims-sec" data-sec="invoices">Invoices <span class="n">3</span></h3>  (po.html · so.html 의 tbl() 이 내는 .card h3 에 class · data-sec 만 더한다)
   · data-sec 값 = 구역 이름의 소문자 복수형 — 같은 뜻은 같은 값(SO 의 「Invoice」 도 invoices)
   · 다크 모드 변수 체계는 아직 없다(ims-ui.css 전부 밝은 색) — 생기면 --sec · --sec-bg 만 바꾼다
   · [2026-10-01 thumb-1] 상품 구역 일곱(prices … photos) — products.html · Same family 는 variants(SO 의 family 와 뜻이 다르다) */
.ims-sec{--sec:#6b7686;--sec-bg:#f7f8fa}                                  /* 모르는 구역 — 회색 */
.ims-sec[data-sec="lines"]{--sec:#2f6df6;--sec-bg:#eef3ff}                /* Lines — 파랑 */
.ims-sec[data-sec="discounts"]{--sec:#7c3aed;--sec-bg:#f3eefe}            /* Discounts — 보라 */
.ims-sec[data-sec="receipts"]{--sec:#16794a;--sec-bg:#e9f6ee}             /* Receipts — 초록 */
.ims-sec[data-sec="invoices"]{--sec:#d97706;--sec-bg:#fdf3e4}             /* Invoices · Invoice — 주황 */
.ims-sec[data-sec="payments"]{--sec:#0f766e;--sec-bg:#e6f5f3}             /* Payments — 청록 */
.ims-sec[data-sec="credits"]{--sec:#b42318;--sec-bg:#fdecea}              /* Credits — 빨강 */
.ims-sec[data-sec="charges"]{--sec:#be185d;--sec-bg:#fce9f1}              /* Charges — 자홍 */
.ims-sec[data-sec="family"]{--sec:#4f46e5;--sec-bg:#eeedfc}               /* Order family(SO) — 남보라 */
.ims-sec[data-sec="balance"]{--sec:#475569;--sec-bg:#eef1f5}              /* Customer balance(SO) — 청회색 */
.ims-sec[data-sec="prices"]{--sec:#a16207;--sec-bg:#fdf7e3}               /* Sale prices(products) — 금색 */
.ims-sec[data-sec="suppliers"]{--sec:#0369a1;--sec-bg:#e8f4fb}            /* Suppliers(products) — 하늘 */
.ims-sec[data-sec="barcodes"]{--sec:#57534e;--sec-bg:#f3f1ef}             /* Barcodes(products) — 돌색 */
.ims-sec[data-sec="components"]{--sec:#4d7c0f;--sec-bg:#f1f8e6}           /* Components(products) — 연두(제안 #65a30d 는 대비 2.84 → 4.59) */
.ims-sec[data-sec="sets"]{--sec:#c2410c;--sec-bg:#fdeee6}                 /* Sets of this product(products) — 주황 갈색 */
.ims-sec[data-sec="variants"]{--sec:#0e7490;--sec-bg:#e0f7fa}             /* Same family(products) — 청록 하늘(제안 #0891b2/#e6f6fa 는 대비 3.32 · 배경이 suppliers 와 같아 보여 → 4.81) */
.ims-sec[data-sec="photos"]{--sec:#db2777;--sec-bg:#fdebf3}               /* Photos(products) — 분홍 */
.card h3.ims-sec{
  border-left:4px solid var(--sec);background:var(--sec-bg);color:var(--sec);
  font-weight:800;font-size:12.5px;letter-spacing:.05em;padding-left:12px;
}
.card h3.ims-sec .n{color:var(--sec);font-weight:800}

/* ═══════════════════════════════════════════════════════════════
   썸네일 — 줄 표의 SKU 왼쪽 작은 사진(40px) · 누르면 크게 (2026-10-01 thumb-1 · 판정 208 · 도우미는 ims-ui.js 의 imsThumb · imsThumbFill)
   · 쓰는 법: imsThumb(sku) → '<span class="ims-thumb" data-thumb="SKU"></span>' 를 줄 표 SKU 칸 왼쪽에 (빈 SKU 는 data-thumb 없는 빈 칸)
   ·          표를 innerHTML 로 그린 뒤 imsThumbFill(그 상자) — await 안 해도 된다 · 안 채운 [data-thumb] 만 모아 한 번에 읽는다
   · 상태: .done = 채웠다(다시 안 채운다) · .none = 사진 없음 · 없는 SKU(점선 빈 칸) · .parent = 세트가 낱개 사진을 빌림(모서리 점 · title "Single's photo" · 판정 194)
   · #imsThumbZoom 은 도우미의 자기 덮개 — 화면의 #modal · .pomodal(5000) 위 · #imsLogin(9999) 아래 · 배경 클릭 · Esc 로 닫기 · Open original 새 탭 */
.ims-thumb{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;flex:0 0 40px;
  border:1px solid var(--line);border-radius:6px;background:#fff;overflow:hidden;vertical-align:middle;position:relative;box-sizing:border-box}
.ims-thumb img{max-width:100%;max-height:100%;object-fit:contain;cursor:zoom-in;display:block}
.ims-thumb.none{border-style:dashed;background:#fafbfd;opacity:.55}
.ims-thumb.parent i.p{position:absolute;right:2px;bottom:2px;width:9px;height:9px;border-radius:50%;background:#0e7490;border:1.5px solid #fff;pointer-events:none}
#imsThumbZoom{display:none;position:fixed;inset:0;z-index:9000;background:rgba(16,22,30,.72);align-items:center;justify-content:center;cursor:zoom-out}
#imsThumbZoom.open{display:flex}
#imsThumbZoom .box{display:flex;flex-direction:column;align-items:center;gap:10px;cursor:default}
#imsThumbZoom .box img{max-width:90vw;max-height:80vh;object-fit:contain;background:#fff;border-radius:8px;box-shadow:0 20px 60px rgba(0,0,0,.45)}
#imsThumbZoom .box a{color:#fff;font-size:13px;font-weight:600;text-decoration:underline}