@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css");
* { box-sizing:border-box; margin:0; padding:0; }
:root { --fs:13px;
  --point-color:#2c3e50; --border-color:#d1d5db; --bg-color:#f3f4f6;
  --panel-bg:#fff; --text:#1f2937; --text-sub:#4b5563; --text-dim:#9ca3af;
  --th-bg:#f9fafb; --th-hover:#e5e7eb; --td-border:#e5e7eb;
  /* ─── 표 공통 (재고장에서 정한 값 · report.js 인쇄물과 같은 계열) ───
     화면은 종이보다 대비를 한 단계 올려 잡는다.
     종이는 잉크가 번져 선이 굵어 보이지만 화면은 1px 그대로다. */
  --gl:#a8bdcb;      /* 칸 사이 선      흰바탕 대비 1.94:1 */
  --gl2:#6b8ea3;     /* 묶음 경계·머리글선  3.49:1 */
  --thb:#bcdaee;     /* 머리글 바탕      1.46:1 */
  --tht:#12384d;     /* 머리글 글자      바탕 위 8.5:1 */
  --band:#ddf0f7;    /* 묶음 띠         밝기차 15.6% */
  --row-hover:#fef9c3; --sum-bg:#f3f4f6;
  --buy-bg:#eff6ff; --buy-th:#dbeafe; --lock-bg:#f8fafc; --future-bg:#fbfbfc;
  --cur-bg:#fffbeb; --input-bg:#fff; 
  /* 글꼴은 하나로. 숫자 정렬은 tabular-nums 로 하므로 고정폭 글꼴을 섞지 않는다 */
  --font: 'Pretendard','Malgun Gothic','Apple SD Gothic Neo',sans-serif;
}
html.dark { --point-color:#0f172a; --border-color:#334155; --bg-color:#0b1220;
  --panel-bg:#111a2c; --text:#e2e8f0; --text-sub:#94a3b8; --text-dim:#64748b;
  --th-bg:#1e293b; --th-hover:#334155; --td-border:#1e293b;
  --gl:#2c3d4e; --gl2:#4a6b82; --thb:#17303f; --tht:#bcd9ea; --band:#152532;
  --row-hover:#2b2a12; --sum-bg:#1e293b;
  --buy-bg:#12233d; --buy-th:#1e3a5f; --lock-bg:#0f1729; --future-bg:#0d1424;
  --cur-bg:#2b2513; --input-bg:#0f1a2e; }
html { min-height:100%; }
/* body 를 감추는 동안(auth-wait) 흰 바탕이 스치지 않도록 html 도 같은 색을 갖는다 */
html { background:var(--bg-color); }
/* ★ 전표 화면은 표가 스스로 스크롤하므로 body 는 잠근다.
   그런데 메뉴·원장처럼 아래로 길어지는 화면은 그러면 잘린다.
   그래서 기본은 스크롤되게 두고, 전표 화면만 body.fixed 로 잠근다.
   (메뉴를 하나 늘릴 때마다 아래가 잘리던 원인이 이것이었다) */
body { font-family:var(--font); background:var(--bg-color);
       color:var(--text); font-size:var(--fs); padding:8px;
       overflow-x:hidden; overflow-y:auto; }
body.fixed { overflow:hidden; }
html, body.fixed { height:100%; }
/* ★ body.fixed 를 붙이려면 안쪽에 스스로 스크롤하는 통이 반드시 있어야 한다.
   .grid-wrap 처럼 height 를 잡고 overflow:auto 인 것. 그게 없으면
   아래가 잘리고 내려갈 방법이 없다 — 창고 세팅에서 실제로 그렇게 됐다.
   전표(매입·매출)만 이 클래스를 쓴다. 나머지는 붙이지 말 것. */

/* ─── 메인 전용 제목줄 ───────────────────────────────────────
   업무 화면은 .win-title 을 쓴다. 이건 main.html 한 곳만 쓴다.
   (클래스는 쓰는데 정의가 없어서 민무늬로 나오고 있었다) */
.topbar { display:flex; align-items:center; gap:10px; padding:9px 14px; margin-bottom:12px;
          background:var(--point-color); color:#fff; border-radius:6px; }
.tb-l { display:flex; align-items:center; gap:8px; min-width:0; }
.tb-r { margin-left:auto; display:flex; gap:8px; align-items:center; }
.tb-ico { font-size:16px; }
.tb-title { font-weight:700; font-size:14px; }
.tb-sub { font-size:11px; opacity:.75; }
.topbar .btn { border-color:rgba(255,255,255,.3); background:rgba(255,255,255,.1); color:#fff; }
.topbar .btn:hover { border-color:#fff; }

.breadcrumb { font-size:11px; color:var(--text-dim); padding:2px 4px 5px; }
.breadcrumb b { color:var(--text-sub); }

.win-title { background:var(--point-color); color:#fff; padding:8px 14px;
             font-weight:600; font-size:14px; display:flex; align-items:center; gap:8px;
             border-radius:6px 6px 0 0; }
.win-title .right { margin-left:auto; display:flex; gap:8px; align-items:center; }
.theme-btn { padding:3px 11px; border:1px solid rgba(255,255,255,.3); background:rgba(255,255,255,.1);
             color:#fff; border-radius:4px; cursor:pointer; font-size:12px; font-family:inherit; }
.mode-chip { font-size:11px; font-weight:800; padding:3px 10px; border-radius:12px;
             background:#3b82f6; color:#fff; letter-spacing:.3px; }
.mode-chip.edit { background:#f59e0b; }
.mode-chip.saved { background:#10b981; animation:pulse .5s ease 3; }
@keyframes pulse { 0%{transform:scale(1)} 50%{transform:scale(1.12)} 100%{transform:scale(1)} }

/* ─── 헤더 2줄 ─── */
.hd { background:var(--panel-bg); border:1px solid var(--border-color); border-top:none;
      border-radius:0 0 6px 6px; padding:7px 12px; margin-bottom:7px; }
.hd-row { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.hd-row + .hd-row { margin-top:6px; padding-top:6px; border-top:1px dashed var(--border-color); }
.hd-item { display:flex; align-items:center; gap:5px; }
.hd-item > label { font-weight:700; color:var(--text-sub); font-size:12px; white-space:nowrap; }
.hd-item input[type="text"], .hd-item input[type="date"], .hd-item select {
  padding:3px 7px; border:1px solid var(--border-color); border-radius:4px; font-family:inherit;
  font-size:var(--fs); background:var(--input-bg); color:var(--text); height:27px; }
.hd-item input[readonly] { background:var(--sum-bg); }
.docnav { display:flex; align-items:center; gap:3px; }
.docnav button { width:24px; height:27px; border:1px solid var(--border-color); background:var(--panel-bg);
  color:var(--text); border-radius:4px; cursor:pointer; font-size:11px; }
.docnav button:hover { border-color:#3b82f6; color:#3b82f6; }
.doc-cnt { font-size:11px; color:var(--text-dim); min-width:34px; text-align:center; }
.icon-btn { border:1px solid var(--border-color); background:var(--panel-bg); color:var(--text);
  border-radius:4px; height:27px; padding:0 8px; cursor:pointer; font-size:12px; font-family:inherit; }
.icon-btn:hover { border-color:#3b82f6; color:#3b82f6; }
.sep { width:1px; height:20px; background:var(--border-color); }
.kv { font-size:12px; color:var(--text-sub); }
.kv b { color:var(--text); font-weight:700; }
.kv .neg { color:#059669; }
.kv .big { color:#dc2626; font-weight:800; }
.pill { font-size:10px; font-weight:800; padding:1px 6px; border-radius:3px; }
.pill.pay { background:#dcfce7; color:#166534; }
.pill.ship { background:#e0e7ff; color:#3730a3; }
html.dark .pill.pay { background:#14532d; color:#bbf7d0; }
html.dark .pill.ship { background:#312e81; color:#c7d2fe; }
.chk { display:flex; align-items:center; gap:4px; font-size:12px; color:var(--text-sub); font-weight:600; }

/* ─── 그리드 ─── */
/* ★ 높이를 숫자로 못 박지 않는다.
   헤더 줄이 늘거나 창이 좁아 줄이 접히면 그만큼 아래 버튼이 밀려났다.
   fitGrid() 가 실제 높이를 재서 넣는다. 아래 값은 그 전까지의 임시값이다. */
.grid-wrap { background:var(--panel-bg); border:1px solid var(--border-color); border-radius:6px;
             overflow:auto; height:calc(100vh - 262px); }
table.grid { border-collapse:collapse; font-size:var(--fs); width:100%; min-width:2280px; table-layout:fixed; }
table.grid thead { position:sticky; top:0; z-index:3; }
table.grid thead th { background:var(--th-bg); color:var(--text-sub); padding:5px 5px; font-weight:700;
  text-align:center; border-right:1px solid var(--border-color);
  border-bottom:2px solid var(--border-color); white-space:nowrap; font-size:11px; }
table.grid thead th.gh { background:var(--buy-th); color:#1e40af; }
html.dark table.grid thead th.gh { color:#bfdbfe; }
table.grid td { padding:0; border-right:1px solid var(--td-border); border-bottom:1px solid var(--td-border);
  white-space:nowrap; height:29px; }
table.grid td.buy { background:var(--buy-bg); }
table.grid tr.cur td { background:var(--cur-bg); }
table.grid tr.cur td.buy { background:#fef3c7; }
html.dark table.grid tr.cur td.buy { background:#33290f; }
table.grid tr.lock td { background:var(--lock-bg); color:var(--text-sub); }
table.grid tr.lock td.buy { background:var(--buy-bg); opacity:.75; }
table.grid tr.future td { background:var(--future-bg); color:var(--text-dim); }
table.grid td .cell { display:block; padding:5px 6px; overflow:hidden; text-overflow:ellipsis;
  font-size:12px; line-height:17px; }
table.grid td .cell.r { text-align:right; }
table.grid td .cell.c { text-align:center; }
table.grid td input, table.grid td select {
  width:100%; height:100%; border:none; outline:none; background:transparent; color:inherit;
  font-family:inherit; font-size:12px; padding:5px 6px; }
table.grid td input.r { text-align:right; }
table.grid td input:focus { background:#dbeafe; box-shadow:inset 0 0 0 2px #3b82f6; }
html.dark table.grid td input:focus { background:#1e3a5f; }
table.grid td input:disabled, table.grid td select:disabled { color:inherit; opacity:.85; }
.rn { color:var(--text-dim); font-size:11px; text-align:center; }
.pc { cursor:pointer; font-weight:700; color:#2563eb; }
.pc:hover { text-decoration:underline; }
.pc.locked { color:var(--text-sub); font-weight:600; cursor:context-menu; }
.pc.future { color:var(--text-dim); cursor:not-allowed; }
.pc.empty { color:var(--text-dim); font-weight:400; }

/* ★ PDA 에서 「미정」으로 넘어온 줄 (142번)
   상품을 정해야 확정이 된다. 눈에 띄어야 한다 */
.pc.need, .cell.need{
  color:#c62828; font-weight:800; cursor:pointer;
  background:rgba(198,40,40,.10);
  box-shadow:inset 0 0 0 1px rgba(198,40,40,.45);
}
.pc.need:hover, .cell.need:hover{ background:rgba(198,40,40,.20) }
html.dark .pc.need, html.dark .cell.need{ color:#fca5a5 }
td.pcell:focus-within, td.pcell.kfocus { box-shadow:inset 0 0 0 2px #3b82f6; }
.badge { font-size:9px; font-weight:800; padding:1px 5px; border-radius:3px; vertical-align:middle; }
.b-part { background:#dbeafe; color:#1e40af; }
.b-done { background:#dcfce7; color:#166534; }
.b-unk  { background:#fee2e2; color:#991b1b; cursor:help; }
.b-none { background:#f3f4f6; color:#9ca3af; }
html.dark .b-part { background:#1e3a8a; color:#bfdbfe; }
html.dark .b-done { background:#14532d; color:#bbf7d0; }
html.dark .b-unk  { background:#7f1d1d; color:#fecaca; }
html.dark .b-none { background:#1e293b; color:#64748b; }
.gr { font-size:10px; font-weight:800; padding:1px 5px; border-radius:3px; background:#dbeafe; color:#1e40af; }
html.dark .gr { background:#1e3a8a; color:#bfdbfe; }
.xbtn { width:100%; height:100%; border:none; background:transparent; color:var(--text-dim);
  cursor:pointer; font-size:13px; }
.xbtn:hover { color:#dc2626; }
.tax-f { color:#7c3aed; font-weight:700; }
.neg-kg { color:#dc2626; font-weight:700; }

/* ─── 하단 툴바 ─── */
.foot { display:flex; gap:8px; margin-top:7px; align-items:stretch; }
.foot-l { flex:1; background:var(--panel-bg); border:1px solid var(--border-color); border-radius:6px;
          padding:6px 10px; display:flex; flex-direction:column; gap:6px; }
.sum-box { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.sum-cell { background:var(--sum-bg); border-radius:5px; padding:4px 10px; display:flex; gap:6px; align-items:baseline; }
.sum-cell .l { font-size:11px; color:var(--text-dim); font-weight:700; }
.sum-cell .v { font-size:14px; font-weight:800; color:#3b82f6; font-variant-numeric:tabular-nums; }
.sum-cell.total .v { color:#dc2626; font-size:15px; }
.fkeys { display:flex; gap:5px; flex-wrap:wrap; align-items:center; }
.fk { padding:4px 9px; border:1px solid var(--border-color); background:var(--panel-bg); color:var(--text);
  border-radius:4px; cursor:pointer; font-size:11px; font-family:inherit; font-weight:600; }
.fk:hover { border-color:#3b82f6; color:#3b82f6; }
.fk b { color:#3b82f6; font-weight:800; }
.fk.danger:hover { border-color:#dc2626; color:#dc2626; }
.fk.danger b { color:#dc2626; }
.foot-r { width:186px; display:flex; flex-direction:column; gap:5px; }
.big-btn { flex:1; border:1px solid var(--border-color); background:var(--panel-bg); color:var(--text);
  border-radius:6px; cursor:pointer; font-size:12.5px; font-family:inherit; font-weight:700;
  display:flex; align-items:center; justify-content:center; gap:6px; min-height:36px; }
.big-btn:hover:not(:disabled) { border-color:#3b82f6; color:#3b82f6; background:#eff6ff; }
html.dark .big-btn:hover:not(:disabled) { background:#12233d; }
.big-btn:disabled { opacity:.38; cursor:not-allowed; }
.big-btn.kk:hover:not(:disabled) { border-color:#fbbf24; color:#92400e; background:#fef3c7; }

/* ─── 팝업 공통 ─── */
.pop-bg { position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:80; display:none;
          align-items:center; justify-content:center; }
.pop-bg.show { display:flex; }
.pop { background:var(--panel-bg); border-radius:8px; box-shadow:0 12px 40px rgba(0,0,0,.3);
       max-height:88vh; display:flex; flex-direction:column; overflow:hidden; }
.pop-hd { background:var(--point-color); color:#fff; padding:10px 14px; display:flex; align-items:center; gap:8px;
          font-weight:700; font-size:13.5px; }
.pop-hd .close { margin-left:auto; background:none; border:none; color:#fff; font-size:19px; cursor:pointer; line-height:1; }
.pop-bd { padding:12px 14px; overflow:auto; }
.pop-ft { padding:9px 14px; border-top:1px solid var(--border-color); display:flex; gap:7px;
          align-items:center; justify-content:flex-end; background:var(--sum-bg); }
.pop-ft .hint { margin-right:auto; font-size:11px; color:var(--text-dim); }
.btn { padding:5px 12px; border:1px solid var(--border-color); background:var(--panel-bg);
       color:var(--text); font-family:inherit; font-size:var(--fs); cursor:pointer;
       border-radius:4px; font-weight:600; height:28px; }
.btn:hover { border-color:#3b82f6; }
.btn.primary { background:#3b82f6; border-color:#3b82f6; color:#fff; }
.btn.success { background:#10b981; border-color:#10b981; color:#fff; }
.btn.warn { background:#f59e0b; border-color:#f59e0b; color:#fff; }
.btn.danger { background:#dc2626; border-color:#dc2626; color:#fff; }
.f-row { display:flex; gap:8px; align-items:center; margin-bottom:9px; flex-wrap:wrap; }
.f-row label { font-size:12px; font-weight:700; color:var(--text-sub); }
.f-row input[type="text"], .f-row input[type="date"], .f-row select {
  padding:5px 8px; border:1px solid var(--border-color); border-radius:4px; font-family:inherit;
  font-size:var(--fs); background:var(--input-bg); color:var(--text); height:29px; }
.plist { border:1px solid var(--border-color); border-radius:6px; overflow:auto; }
.plist table { border-collapse:collapse; width:100%; font-size:12px; }
.plist thead th { background:var(--thb); color:var(--tht); padding:5px 7px; font-weight:700;
  font-size:11.5px; text-align:left; border:1px solid var(--gl2); position:sticky; top:0; z-index:1;
  white-space:nowrap; }
/* ★ 세로 칸선 — 없었다. 칸이 열 개 넘는 표에서 이게 없으면
   숫자가 어느 칸 것인지 매번 머리글까지 올라가서 세야 한다 (재고장에서 드러났다) */
.plist td { padding:4px 7px; white-space:nowrap;
  border-left:1px solid var(--gl); border-right:1px solid var(--gl);
  border-bottom:1px solid var(--gl); }
/* 묶음 — 같은 값이 이어지는 덩어리. 첫 줄에만 값을 찍고 나머지는 비운다 */
.plist tbody tr.z1 > td { background:var(--band); }
.plist tbody tr.gs  > td { border-top:2px solid var(--gl2); }
.plist tbody td.pk { font-weight:700; color:var(--text); }
.plist tr.sel-row { cursor:pointer; }
.plist tr.sel-row:hover td { background:var(--row-hover); }
.plist tr.sel-row.on td { background:#dbeafe; }
html.dark .plist tr.sel-row.on td { background:#1e3a5f; }
.plist .r { text-align:right; font-variant-numeric:tabular-nums; }
.plist .c { text-align:center; }
/* ─── 조회용 표 (table.js) ────────────────────────────────────
   원장·매입일보·매출일보가 같이 쓴다.
   종이(report.js)와 달리 칸이 더 많고, 머리글을 눌러 정렬한다. */
.dtbl { border-collapse:collapse; width:100%; font-size:12px;
        font-variant-numeric:tabular-nums; table-layout:auto; }
.dtbl thead th { background:var(--thb); color:var(--tht); padding:5px 8px;
                 font-weight:700; font-size:11.5px; white-space:nowrap;
                 border:1px solid var(--gl2);
                 position:sticky; top:0; z-index:2; }
.dtbl th.srt { cursor:pointer; user-select:none; }
.dtbl th.srt:hover { background:#a6cde8; }
.dtbl th.srt.on { background:#1f4e8c; color:#fff; }
.dtbl td { padding:4px 8px; white-space:nowrap;
           border-left:1px solid var(--gl); border-right:1px solid var(--gl);
           border-bottom:1px solid var(--gl); }
.dtbl tbody tr.z1 > td { background:var(--band); }
.dtbl tbody tr.gs  > td { border-top:2px solid var(--gl2); }
.dtbl tbody td.pk { font-weight:700; color:var(--text); }
.dtbl tbody tr:hover td { background:var(--row-hover); }
.dtbl td.r, .dtbl th.r { text-align:right; }
.dtbl td.c, .dtbl th.c { text-align:center; }
.dtbl td.neg { color:#c0392b; }
.dtbl tfoot tr.tsum td { background:var(--thb); color:var(--tht); font-weight:800;
                         border-top:2px solid var(--gl2);
                         border-bottom:none; position:sticky; bottom:0; z-index:2; }
/* ★ 테마는 html 에 dark 를 건다 (toggleTheme). html.dark 로 쓴 규칙은
   애초에 걸리지 않았다 — 다크모드에서 표가 흰 바탕으로 남아 있었다. */
html.dark .dtbl th.srt:hover { background:#2b4a63; }

.empty { padding:34px 10px; text-align:center; color:var(--text-dim); font-size:12.5px; line-height:2; }
.empty b { color:#3b82f6; }
.tag-wh { font-size:10px; background:#f3e8ff; color:#6b21a8; padding:1px 5px; border-radius:3px; font-weight:700; }
html.dark .tag-wh { background:#581c87; color:#e9d5ff; }
.exp-near { color:#d97706; font-weight:700; }
.exp-bad { color:#dc2626; font-weight:800; }

/* 라인 액션 팝오버 */
.rowmenu { position:fixed; z-index:95; background:var(--panel-bg); border:1px solid var(--border-color);
  border-radius:7px; box-shadow:0 8px 24px rgba(0,0,0,.22); padding:4px; display:none; min-width:158px; }
.rowmenu.show { display:block; }
.rowmenu .mi { display:flex; align-items:center; gap:8px; padding:7px 10px; border-radius:5px;
  cursor:pointer; font-size:12.5px; font-weight:600; }
.rowmenu .mi:hover { background:var(--row-hover); }
.rowmenu .mi.del:hover { background:#fee2e2; color:#991b1b; }
.rowmenu .mi .k { margin-left:auto; font-size:10px; color:var(--text-dim); }
.rowmenu .hdr { padding:5px 10px 6px; font-size:11px; color:var(--text-dim); border-bottom:1px solid var(--td-border);
  margin-bottom:3px; }

/* 카톡 미리보기 */
.kakao { background:#b2c7d9; border-radius:8px; padding:12px; max-height:290px; overflow:auto; }
html.dark .kakao { background:#26343f; }
.kk-row { display:flex; margin-bottom:9px; }
.kk-row.me { justify-content:flex-end; }
.kk-name { font-size:11px; color:#3d4a54; margin-bottom:3px; font-weight:700; }
html.dark .kk-name { color:#c9d6e0; }
.kk-b { background:#fff; border-radius:9px; padding:8px 11px; font-size:12.5px; max-width:80%;
  line-height:1.65; color:#1f2937; box-shadow:0 1px 2px rgba(0,0,0,.08); white-space:pre-line; }
.kk-row.me .kk-b { background:#fef01b; }
.kk-b .li { font-size:11.5px; }
.kk-btns { display:flex; gap:6px; margin-top:8px; }
.kk-btn { flex:1; padding:7px; border-radius:6px; border:1px solid #d1d5db; background:#fff; color:#1f2937;
  font-family:inherit; font-size:12px; font-weight:700; cursor:pointer; }
.kk-btn.y:hover { border-color:#10b981; color:#059669; }
.kk-btn.n:hover { border-color:#dc2626; color:#dc2626; }

/* 입고내역서 A4 */
.a4 { background:#fff; color:#111; width:760px; padding:26px 30px; font-size:12px; }
.a4 .a4-t { text-align:center; font-size:20px; font-weight:800; letter-spacing:10px; margin-bottom:4px; }
.a4 .a4-sub { text-align:center; font-size:11px; color:#555; margin-bottom:14px; }
.a4 .a4-parties { display:flex; gap:10px; margin-bottom:10px; }
.a4 .party { flex:1; border:1px solid #333; }
.a4 .party .ph { background:#f1f1f1; font-weight:800; font-size:11px; padding:3px 6px; border-bottom:1px solid #333; }
.a4 .party .pr { display:flex; font-size:11px; border-bottom:1px solid #ddd; }
.a4 .party .pr:last-child { border-bottom:none; }
.a4 .party .pk { width:64px; background:#fafafa; padding:3px 6px; font-weight:700; border-right:1px solid #ddd; }
.a4 .party .pv { flex:1; padding:3px 6px; }
.a4 .a4-meta { display:flex; gap:14px; font-size:11px; margin-bottom:8px; color:#333; }
.a4 table { width:100%; border-collapse:collapse; font-size:11px; }
.a4 th { background:#f1f1f1; border:1px solid #333; padding:4px 3px; font-weight:800; }
.a4 td { border:1px solid #999; padding:3px 4px; }
.a4 td.r { text-align:right; font-variant-numeric:tabular-nums; }
.a4 td.c { text-align:center; }
.a4 tr.sumr td { background:#f6f6f6; font-weight:800; border-top:2px solid #333; }
/* ── 판매경로 ─────────────────────────────────────────────────
   계산서를 누가 발행하는지가 경로에서 갈린다.
   담당자가 헷갈리면 안 되므로 화면 색으로도 알린다. */
body.ch-meatbox .hd{ border-top:3px solid #2f8f5b; background:linear-gradient(180deg,#eefaf2,transparent 60%) }
body.ch-meatbox #hChannel{ background:#2f8f5b; color:#fff; font-weight:700; border-color:#25764a }
body.ch-retail  .hd{ border-top:3px solid #7a5cc4; background:linear-gradient(180deg,#f4f0fd,transparent 60%) }
body.ch-retail  #hChannel{ background:#7a5cc4; color:#fff; font-weight:700; border-color:#6549ad }
#chHint{ font-weight:700 }
body.ch-meatbox #chHint{ color:#2f8f5b }
body.ch-retail  #chHint{ color:#7a5cc4 }
/* 가명세서 모드가 켜지면 경로 색은 양보한다 — 둘이 겹치면 아무것도 안 보인다 */
body.pf-mode.ch-meatbox .hd, body.pf-mode.ch-retail .hd{
  border-top:3px solid #e08a1e; background:linear-gradient(180deg,#fff8ec,transparent 60%) }

/* ── 가거래명세서 모드 ────────────────────────────────────────
   실수로 정식 매출을 저장하는 일이 없어야 한다.
   글자로 알리는 것으로는 부족해서 화면 색을 바꾼다. */
body.pf-mode .hd{ border-top:3px solid #e08a1e; background:linear-gradient(180deg,#fff8ec,transparent 60%) }
body.pf-mode #pfLabel{ background:#e08a1e; color:#fff; padding:2px 9px; border-radius:11px }
body.pf-mode #pfBar{ background:#fdf3e3; border-top:1px dashed #e0b877 }
body.pf-mode #btnSave{ background:#e08a1e; border-color:#c2761a }
/* 전환 직후 중량 — 아직 저울에 안 올린 값이다. 눈에 띄어야 한다.
   가명세서 모드가 아니라 정식 전표에서 보이는 것이라 body 조건을 걸지 않는다. */
.grid td.pf-est{ background:#fff3cd; box-shadow:inset 0 0 0 1px #e0b877 }
.grid td.pf-est::after{ content:'예상'; float:right; font-size:9px; color:#8a6d1f;
  font-weight:800; margin-left:4px }
body.pf-mode #modeChip::after{ content:' · 가'; font-weight:800 }
/* 명세서 부제 — 가거래명세서임을 종이에서 바로 알아보게 */
.a4 .a4-sub{ text-align:center; font-size:11.5px; color:#a04a00; font-weight:700;
             letter-spacing:0.5px; margin:-4px 0 8px }
/* 당사자 블록 — 한 줄에 두 쌍이 들어갈 수 있다 (등록번호|값  대표|값) */
.a4 .a4-parties .pr .pk:nth-child(3) { border-left:1px solid #ddd; }
/* 품목 아래 둘째 줄 — 원산지 · 이력번호 (법정 표시사항) */
.a4 tr.subr td.sub { font-size:10px; color:#333; padding:1px 6px 4px; border-top:none;
                     letter-spacing:0.2px; }
.a4 tr.subr td { border-top:none; }
.a4 .a4-note { margin-top:10px; border:1px solid #333; padding:6px 8px;
               font-size:10px; line-height:1.6; color:#222; }
.a4 .a4-foot { display:flex; margin-top:12px; gap:12px; align-items:flex-start; }
.a4 .a4-bal { flex:1; border:1px solid #333; }
.a4 .a4-bal .br { display:flex; font-size:11px; border-bottom:1px solid #ddd; }
.a4 .a4-bal .br:last-child { border-bottom:none; }
.a4 .a4-bal .bk { width:96px; background:#fafafa; padding:4px 7px; font-weight:700; border-right:1px solid #ddd; }
.a4 .a4-bal .bv { flex:1; padding:4px 7px; text-align:right; font-variant-numeric:tabular-nums; }
.a4 .a4-bal .br.hi .bv { font-weight:800; font-size:13px; color:#c00; }
.a4 .a4-sign { width:220px; border:1px solid #333; height:74px; position:relative; font-size:11px; }
.a4 .a4-sign .sl { background:#f1f1f1; padding:3px 6px; font-weight:800; border-bottom:1px solid #333; }
.a4 .a4-sign .sn { position:absolute; right:8px; bottom:6px; color:#888; font-size:10px; }

/* 토스트 */
.toast-wrap { position:fixed; left:50%; bottom:26px; transform:translateX(-50%); z-index:120;
  display:flex; flex-direction:column; gap:6px; align-items:center; pointer-events:none; }
/* 토스트 자리가 없는 화면에서도 보이게 — 코어가 body 에 직접 붙인다 */
body > .toast { position:fixed; left:50%; bottom:26px; transform:translateX(-50%); z-index:120; }
.toast { background:#1f2937; color:#fff; padding:8px 16px; border-radius:20px; font-size:12.5px;
  font-weight:600; box-shadow:0 4px 16px rgba(0,0,0,.28); max-width:78vw; display:none; }
.toast.show { display:block; animation:tin .18s ease; }
.toast.err { background:#dc2626; }
.toast.ok { background:#10b981; }
.toast.info { background:#3b82f6; }
@keyframes tin { from{opacity:0; transform:translateY(9px)} to{opacity:1; transform:none} }

/* 단가 확인 회신 화면 */
.ck-tabs { display:flex; gap:6px; margin-bottom:11px; }
.ck-tab { flex:1; padding:7px; border:1px solid var(--border-color); background:var(--panel-bg);
  color:var(--text-sub); border-radius:6px; font-family:inherit; font-size:12.5px; font-weight:700; cursor:pointer; }
.ck-tab.on { background:#3b82f6; border-color:#3b82f6; color:#fff; }
.ck-card { border:1px solid var(--border-color); border-radius:8px; padding:10px 12px; margin-bottom:9px;
  background:var(--panel-bg); }
.ck-card.done { background:var(--sum-bg); opacity:.72; }
.ck-h { font-size:13px; font-weight:700; margin-bottom:3px; }
.ck-h .no { display:inline-block; width:19px; height:19px; line-height:19px; text-align:center;
  background:#3b82f6; color:#fff; border-radius:50%; font-size:11px; margin-right:6px; }
.ck-sub { font-size:11.5px; color:var(--text-dim); margin-bottom:7px; }
.ck-prev { font-size:12px; background:var(--sum-bg); border-radius:5px; padding:5px 9px; margin-bottom:8px; }
.ck-prev b { color:#2563eb; }
.ck-prev .none { color:var(--text-dim); }
.ck-act { display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
.ck-btn { padding:6px 11px; border-radius:6px; border:1px solid var(--border-color); background:var(--panel-bg);
  color:var(--text); font-family:inherit; font-size:12px; font-weight:700; cursor:pointer; }
.ck-btn.y { border-color:#10b981; color:#059669; }
.ck-btn.y:hover { background:#ecfdf5; }
.ck-btn.n:hover { border-color:#3b82f6; color:#2563eb; }
.ck-btn.warn { background:#dc2626; border-color:#dc2626; color:#fff; }
.ck-in { width:104px; padding:6px 8px; border:1px solid var(--border-color); border-radius:6px;
  font-family:inherit; font-size:12.5px; text-align:right; background:var(--input-bg); color:var(--text); }
.ck-alert { margin-top:7px; font-size:12px; border-radius:6px; padding:7px 10px; line-height:1.6; }
.ck-alert.cost { background:#fef2f2; color:#991b1b; border:1px solid #fecaca; }
.ck-alert.digit { background:#fffbeb; color:#92400e; border:1px solid #fde68a; }
html.dark .ck-alert.cost { background:#2a1414; color:#fecaca; border-color:#7f1d1d; }
html.dark .ck-alert.digit { background:#2b2410; color:#fde68a; border-color:#78350f; }
.ck-log { font-size:11.5px; border-top:1px solid var(--border-color); padding-top:8px; }
.ck-log .row { padding:3px 0; color:var(--text-sub); }
.ck-log .row b { color:var(--text); }
.ck-log .ok { color:#059669; font-weight:700; }
.ck-log .ch { color:#d97706; font-weight:700; }

/* 단가 경고 (스텔스) */
table.grid td.pw-cost { box-shadow:inset 3px 0 0 #dc2626; background:#fef2f2 !important; }
table.grid td.pw-diff { box-shadow:inset 3px 0 0 #f59e0b; background:#fffbeb !important; }
html.dark table.grid td.pw-cost { background:#2a1414 !important; }
html.dark table.grid td.pw-diff { background:#2b2410 !important; }
table.grid td input::placeholder { color:var(--text-dim); opacity:.55; font-style:italic; }
.price-tip { position:fixed; z-index:110; display:none; background:#1f2937; color:#e5e7eb;
  border-radius:6px; padding:6px 10px; font-size:11.5px; line-height:1.5; white-space:nowrap;
  box-shadow:0 6px 20px rgba(0,0,0,.3); pointer-events:none; }
.price-tip.show { display:block; }
.price-tip b { color:#fff; }
.price-tip .sep2 { color:#6b7280; margin:0 7px; }
.price-tip .up { color:#34d399; } .price-tip .dn { color:#fca5a5; }
.price-tip .warn { color:#fbbf24; font-weight:700; }
.price-tip .none { color:#9ca3af; }
.badge.b-cost { background:#fee2e2; color:#991b1b; }
.badge.b-diff { background:#fef3c7; color:#92400e; }
html.dark .badge.b-cost { background:#7f1d1d; color:#fecaca; }
html.dark .badge.b-diff { background:#78350f; color:#fde68a; }
/* 로그인 게이트 */
.lg-wrap { position:fixed; inset:0; z-index:200; background:var(--point-color);
  display:flex; align-items:center; justify-content:center; }
.lg-box { background:var(--panel-bg); border-radius:12px; padding:32px 30px; width:340px;
  box-shadow:0 16px 48px rgba(0,0,0,.35); display:flex; flex-direction:column; gap:10px; }
.lg-title { font-size:19px; font-weight:800; color:var(--text); }
.lg-sub { font-size:11px; color:var(--text-dim); margin-bottom:10px; }
.lg-box input[type=text], .lg-box input[type=password] {
  padding:10px 12px; border:1px solid var(--border-color); border-radius:6px;
  font-family:inherit; font-size:14px; background:var(--input-bg); color:var(--text); }
.lg-remember { font-size:12px; color:var(--text-sub); display:flex; align-items:center; gap:6px; }
.lg-btn { padding:11px; border:none; border-radius:6px; background:#3b82f6; color:#fff;
  font-family:inherit; font-size:14px; font-weight:700; cursor:pointer; margin-top:4px; }
.lg-btn:hover { background:#2563eb; }
.lg-msg { font-size:12px; color:#dc2626; min-height:16px; text-align:center; }
.loading-veil { position:fixed; inset:0; z-index:150; background:rgba(0,0,0,.35);
  display:none; align-items:center; justify-content:center; color:#fff; font-size:14px; font-weight:700; }
.loading-veil.show { display:flex; }

.note-line { font-size:11px; color:var(--text-dim); line-height:1.75; }
.note-line b { color:var(--text-sub); }
@media print {
  body > *:not(#pdfPopBg) { display:none !important; }
  #pdfPopBg { position:static; background:none; display:block !important; }
  #pdfPopBg .pop { box-shadow:none; max-height:none; }
  #pdfPopBg .pop-hd, #pdfPopBg .pop-ft { display:none !important; }
  #pdfPopBg .pop-bd { padding:0; overflow:visible; }
}
/* 팝업에서 마우스를 올린 줄을 확실히 표시한다 */
#lotPopList tr:hover td, #ptPopList tr:hover td{ background:#e8f0fe !important; cursor:pointer; }
html.dark #lotPopList tr:hover td, html.dark #ptPopList tr:hover td{ background:#2b3a52 !important; }
#lotPopList tr:hover td:first-child, #ptPopList tr:hover td:first-child{ box-shadow:inset 3px 0 0 #1a73e8; }


/* 지점(창고)은 색으로 강조하지 않는다. 대신 글씨를 키워 읽기 쉽게 한다 */
td .wh, .wh-pill, span.wh{
  background:transparent !important; border:0 !important; color:inherit !important;
  padding:0 !important; font-size:13px; font-weight:600;
}

/* 하단 버튼이 잘리지 않게 — 오른쪽 묶음이 넘치면 그 안에서 스크롤된다 */
.foot{ align-items:stretch; }
.foot-r{ display:flex; flex-direction:column; gap:6px; max-height:160px; overflow-y:auto; }
.foot-r .big-btn{ white-space:nowrap; flex:0 0 auto; }

/* 숫자는 폭이 같은 글꼴로. 섞이면 눈이 피로하고 자릿수를 잘못 읽는다 */
.num, td.r, th.r, .plist td.r, .sum-cell .v, input.r{
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

/* 표 컬럼 폭 조절 — 헤더 오른쪽 끝을 잡고 끈다 */
table th{ position:relative; }
th .rsz{
  position:absolute; top:0; right:-3px; width:7px; height:100%;
  cursor:col-resize; user-select:none; z-index:5;
}
th .rsz:hover{ background:rgba(26,115,232,.35); }
body.resizing{ cursor:col-resize !important; user-select:none !important; }

/* 저장은 제일 많이 누르는 버튼이다. 크고 눈에 띄어야 한다 */
.big-btn.save{
  background:#1a73e8; color:#fff; border-color:#1557b0;
  font-size:16px; font-weight:700; padding:14px 18px; letter-spacing:.5px;
}
.big-btn.save:hover{ background:#1557b0; }
.big-btn.save span{
  font-size:11px; font-weight:600; opacity:.85; margin-left:6px;
  border:1px solid rgba(255,255,255,.5); border-radius:3px; padding:1px 5px;
}
.big-btn.save:disabled{ background:#9aa0a6; border-color:#9aa0a6; }

/* ═══════════════════════════════════════════════════════════════
   프로젝트 기본 — 목록·팝업에서 마우스를 올린 줄을 반드시 표시한다
   (사용자 확정 2026-07-30 · 앞으로 만드는 모든 화면에 자동 적용)
   ═══════════════════════════════════════════════════════════════ */
.pop table tbody tr:hover > td,
table.pick tbody tr:hover > td,
#lotPopList tr:hover > td, #ptPopList tr:hover > td,
#docPopList tr:hover > td, #ckList tr:hover > td {
  background: #e8f0fe !important;
  cursor: pointer;
}
html.dark .pop table tbody tr:hover > td,
html.dark table.pick tbody tr:hover > td,
html.dark #lotPopList tr:hover > td, html.dark #ptPopList tr:hover > td,
html.dark #docPopList tr:hover > td, html.dark #ckList tr:hover > td {
  background: #2b3a52 !important;
}
.pop table tbody tr:hover > td:first-child,
table.pick tbody tr:hover > td:first-child,
#lotPopList tr:hover > td:first-child, #ptPopList tr:hover > td:first-child,
#docPopList tr:hover > td:first-child {
  box-shadow: inset 3px 0 0 #1a73e8;
}


/* ═══ 글꼴 통일 ═══════════════════════════════════════════════
   input·select·button 은 기본 글꼴을 따로 쓴다. 전부 맞춘다. */
*, input, select, button, textarea, table, th, td{
  font-family: var(--font);
}
/* 숫자는 폭만 고정한다 (글꼴은 그대로) */
.num, td.r, th.r, input.r, .sum-cell .v, .tdi .v{
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}


/* ── 계산서 발행완료건 잠금 (121번) ─────────────────────────
   ★ 회색으로 덮고 손을 못 대게 한다. 지우지 않는다 —
     무엇이 나갔는지는 계속 보여야 한다.
   ★ 회계·관리자는 사유를 적고 풀 수 있다. */
.doc-lock-bar{ display:flex; align-items:center; gap:6px;
               background:#f1f5f9; border:1px solid #cbd5e1;
               border-radius:6px; padding:7px 12px; margin:6px 0;
               font-size:12.5px; color:#334155; }
html.dark .doc-lock-bar{ background:#1e293b; border-color:#475569; color:#cbd5e1; }
#appRoot.doc-locked .grid-wrap{ opacity:.6; filter:grayscale(.55);
                                pointer-events:none; position:relative; }
#appRoot.doc-locked .grid-wrap::after{
  content:''; position:absolute; inset:0;
  background:repeating-linear-gradient(45deg,transparent,transparent 8px,
    rgba(120,120,120,.06) 8px, rgba(120,120,120,.06) 16px);
  pointer-events:none; }
#appRoot.doc-locked .doc-lock-bar{ opacity:1; filter:none; pointer-events:auto; }

/* ── 대시보드 「확인 요청」에서 넘어온 전표의 빈 줄 (?hl=1) ──
   ★ 전표를 열어놓고 어디가 빈지 눈으로 찾게 하면 결국 안 고친다. */
tr.hl > td{ background:#fef2f2 !important; }
tr.hl > td:first-child{ box-shadow:inset 3px 0 0 #dc2626; }
html.dark tr.hl > td{ background:#450a0a !important; }

/* ── 상품원장 — 매입·매출을 색으로 가른다 (134번) ──────────
   ★ 좌우로 갈린 표는 띠가 없으면 어느 쪽 숫자인지 눈이 헤맨다.
     TBL.render 의 cols 에 cls:'gb' · cls:'gs' 로 준다. */
.dtbl th.gb, .dtbl td.gb{ background:#eef4fb; }
.dtbl th.gs, .dtbl td.gs{ background:#eefaf0; }
.dtbl th.go, .dtbl td.go{ background:#fdf3e7; }
.dtbl th.gb{ border-bottom:2px solid #7ba7d7; }
.dtbl th.gs{ border-bottom:2px solid #82c99a; }
.dtbl th.go{ border-bottom:2px solid #e0b070; }
html.dark .dtbl th.gb, html.dark .dtbl td.gb{ background:#16233a; }
html.dark .dtbl th.gs, html.dark .dtbl td.gs{ background:#0f2a19; }
html.dark .dtbl th.go, html.dark .dtbl td.go{ background:#33240f; }
/* 줄에 마우스를 올리면 색이 옅어지지 않게 */
.dtbl tbody tr:hover td.gb{ background:#e2edf9; }
.dtbl tbody tr:hover td.gs{ background:#e2f6e8; }
.dtbl tbody tr:hover td.go{ background:#fbebd8; }

/* ── 명세표 도장 (2026-08-11) ──────────────────────────────
   ★ 공급자 대표 이름 옆에 반투명으로 겹쳐 올린다 (사장님 지시).
   ★ 자리를 차지하면 안 된다 — 처음에 크게 넣었더니
     공급자 칸이 늘어나 아래 줄이 다 밀렸다.
       position:absolute  → 칸 높이에 영향을 안 준다
       height 를 줄 높이에 맞춘다 (26px)
       overflow 를 안 건드린다 — 칸이 늘어나지 않는다 */
.a4 .party .pv.ceo{ position:relative; }
.a4 .party .pv.ceo .seal{
  position:absolute; left:22px; top:50%; transform:translateY(-50%);
  /* ★ 지름은 mm 로 준다 (사장님 — 1센치 정도).
     .a4 는 폭 760px = A4 210mm 이므로 화면에서 1cm ≈ 36px 이다.
     px 로 적으면 인쇄 배율이 바뀔 때 크기가 달라진다.
     ★ 겹쳐도 된다 하셨으므로 자리를 안 차지하는 것만 지킨다
       (position:absolute — 칸이 안 늘어난다). */
  height:14mm; width:auto; opacity:.7;
  pointer-events:none; z-index:1;
  mix-blend-mode:multiply;      /* 글자와 겹쳐도 이름이 읽힌다 */
}
@media print{
  .a4 .party .pv.ceo .seal{ opacity:.8;
    -webkit-print-color-adjust:exact; print-color-adjust:exact; }
}


/* ── 루트 (breadcrumb) ────────────────────────────────────────
   ★ 눌러서 그 단계로 돌아간다. 화면마다 손대지 않고 코어가 그린다 */
.breadcrumb .tr-a{ color:var(--text-sub); text-decoration:none; cursor:pointer;
  padding:1px 4px; border-radius:4px; }
.breadcrumb .tr-a:hover{ color:#2563eb; background:rgba(37,99,235,.10);
  text-decoration:underline; text-underline-offset:2px; }
.breadcrumb .tr-s{ margin:0 4px; opacity:.45; }
.breadcrumb .tr-back{ display:inline-block; margin-right:7px; cursor:pointer;
  width:19px; height:19px; line-height:17px; text-align:center; font-size:15px;
  border:1px solid var(--border-color); border-radius:5px; color:var(--text-sub);
  vertical-align:-3px; }
.breadcrumb .tr-back:hover{ border-color:#2563eb; color:#2563eb;
  background:rgba(37,99,235,.08); }
html.dark .breadcrumb .tr-a:hover{ background:rgba(96,165,250,.14); color:#93c5fd; }
html.dark .breadcrumb .tr-back:hover{ border-color:#60a5fa; color:#93c5fd; }