/* ============================================================
   ES 재고관리 — 📋 업무 보드 (🛡 인증/지재권 · 🤝 거래처)   v90
   원본 디자인: 「22 인증 지재권 관리」 (src/certs.css) · 「21 거래처 관리」 (src/vendors.css)
   board3.css 의 #b3 셸을 그대로 쓰고 화면 전용 클래스만 얹습니다.
   ============================================================ */

/* ---------- 인증/지재권 — 표 (certs.css) ---------- */
#b3 .ct-toolbar { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:12px; }
#b3 .ct-search { width:250px; max-width:100%; padding:8px 11px; border:1.5px solid var(--line);
  border-radius:var(--r); outline:none; background:var(--panel); font:inherit; font-size:12.5px; color:var(--text); }
#b3 .table-wrap { background:var(--panel); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; }
#b3 .table-scroll { overflow-x:auto; }
#b3 .ct-table { width:100%; border-collapse:collapse; min-width:940px; }
#b3 .ct-table th { background:var(--panel-alt); border-bottom:1px solid var(--line);
  padding:9px 10px; font-size:12.5px; color:var(--slate); font-weight:700; text-align:left; white-space:nowrap; }
#b3 .ct-table th.is-sortable { cursor:pointer; user-select:none; }
#b3 .ct-table th.is-sortable:hover { color:var(--accent-fg); }
#b3 .ct-table th .sort-caret { margin-left:4px; font-size:10.5px; color:var(--faint); }
#b3 .ct-table th.is-sorted .sort-caret { color:var(--accent); }
#b3 .ct-table td { border-bottom:1px solid var(--line-faint); padding:8px 10px; font-size:12.5px; }
#b3 .ct-table tbody tr:hover { background:var(--panel-sub); }
#b3 .ct-table tbody tr.is-selected { background:var(--accent-bg-2); }
#b3 .ct-table .center { text-align:center; }
#b3 .checkbox { width:17px; height:17px; padding:0; line-height:1;
  border:1.5px solid var(--faint); border-radius:5px;
  background:var(--panel); color:#fff; font-size:11.5px; font-weight:900; cursor:pointer; }
#b3 .checkbox.is-on { border-color:var(--accent); background:var(--accent); }

/* 상품코드 hover 미리보기 */
#b3 .code-cell { position:relative; display:inline-block; }
#b3 .code-link { border:0; background:none; padding:0; font:inherit; font-size:12.5px;
  font-weight:800; color:var(--accent-fg); cursor:pointer; white-space:nowrap; }
#b3 .code-link:hover { text-decoration:underline; }
#b3 .code-pop { position:absolute; left:0; top:calc(100% + 6px); z-index:30; width:250px; padding:10px;
  display:none; background:var(--panel); border:1px solid var(--line);
  border-radius:var(--r-lg); box-shadow:var(--shadow-pop); text-align:left; }
#b3 .code-cell:hover .code-pop { display:block; }
#b3 .code-pop__thumb { width:100%; height:110px; border-radius:var(--r-md); background:var(--neutral-bg);
  display:flex; align-items:center; justify-content:center; font-size:11.5px; color:var(--muted); overflow:hidden; }
#b3 .code-pop__thumb img { width:100%; height:100%; object-fit:cover; }

/* 첨부 칩 */
#b3 .file-chip { display:inline-flex; align-items:center; gap:5px; padding:4px 9px;
  border:1px solid var(--accent-line); border-radius:7px; background:var(--accent-bg-2);
  font:inherit; font-size:11.5px; font-weight:700; color:var(--accent-fg); cursor:pointer; white-space:nowrap; }
#b3 .file-chip--empty { border-color:var(--line); background:var(--panel); color:var(--muted); }
#b3 .file-chip:hover { border-color:var(--accent); }

/* 하단 일괄 액션 바 */
#b3 .bulk-bar { position:fixed; left:50%; bottom:22px; transform:translateX(-50%); z-index:80;
  display:flex; align-items:center; gap:9px; padding:10px 14px; border-radius:14px;
  background:#101828; color:#fff; box-shadow:0 18px 40px rgba(16,24,40,.32); }
#b3 .bulk-bar__btn { display:inline-flex; align-items:center; gap:6px; flex:none;
  padding:7px 12px; border:1px solid #454c2f; border-radius:9px; background:#2f3524;
  font:inherit; font-size:var(--fs-body); font-weight:600; color:#fff; cursor:pointer; white-space:nowrap; }
#b3 .bulk-bar__btn:hover { background:#1c2b47; border-color:#4f5644; }
#b3 .bulk-bar__btn--danger { color:#ff9b9b; }

/* 드롭존 · 파일 행 (모달) */
.b3-pop .dropzone { display:flex; flex-direction:column; align-items:center; gap:8px; padding:18px;
  border:1.5px dashed var(--accent-line); border-radius:var(--r-lg); background:var(--accent-bg-2); text-align:center; }
.b3-pop .dropzone.is-over { border-color:var(--accent); background:#f0efe0; }
.b3-pop .file-row { display:flex; align-items:center; gap:10px; padding:9px 11px;
  border:1px solid var(--line-soft); border-radius:var(--r-md); background:var(--panel); min-width:0; }
.b3-pop .file-row__thumb { width:34px; height:34px; flex:none; border-radius:var(--r);
  display:flex; align-items:center; justify-content:center; font-size:10.5px; font-weight:800; }

/* ---------- 거래처 — 카드 (vendors.css) ---------- */
#b3 .vd-toolbar { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:12px; min-width:0; }
#b3 .vd-search { width:240px; max-width:100%; padding:8px 11px; border:1.5px solid var(--line);
  border-radius:var(--r); outline:none; font:inherit; font-size:12.5px; background:var(--panel); color:var(--text); }
#b3 .vd-cat { display:inline-flex; align-items:center; gap:6px; flex:none; padding:6px 12px;
  border:1px solid var(--line); border-radius:var(--r-pill); background:var(--panel);
  font:inherit; font-size:12.5px; font-weight:600; color:var(--sub); cursor:pointer; white-space:nowrap; }
#b3 .vd-cat.is-on { background:var(--accent-bg); color:var(--accent-fg); border-color:var(--accent-line); font-weight:700; }
#b3 .vd-cat__n { font-size:10.5px; font-weight:800; opacity:.75; }
#b3 .vd-cat--add { border-style:dashed; border-color:var(--faint); background:none; }
#b3 .vd-cat--add:hover { border-color:var(--accent); color:var(--accent-fg); }
#b3 .vd-sort { display:inline-flex; border:1px solid var(--line); border-radius:var(--r); overflow:hidden; }
#b3 .vd-sort button { padding:6px 11px; border:0; background:var(--panel); font:inherit;
  font-size:11.5px; font-weight:600; color:var(--sub); cursor:pointer; white-space:nowrap; }
#b3 .vd-sort button + button { border-left:1px solid var(--line); }
#b3 .vd-sort button.is-on { background:var(--accent); color:#fff; font-weight:700; }
#b3 .vd-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:12px; min-width:0; }
#b3 .vd-card { display:flex; flex-direction:column; background:var(--panel); border:1.5px solid var(--line);
  border-radius:var(--r-lg); overflow:hidden; min-width:0; cursor:pointer; }
#b3 .vd-card:hover { border-color:var(--accent-line); }
#b3 .vd-card__head { display:flex; align-items:flex-start; gap:10px; padding:13px 14px; }
#b3 .vd-card__ico, .b3-pop .vd-card__ico { width:38px; height:38px; flex:none; border-radius:11px; font-size:15px;
  display:flex; align-items:center; justify-content:center; }
#b3 .vd-card__name { font-size:13.5px; font-weight:700; letter-spacing:-.2px; }
#b3 .vd-card__meta { display:block; font-size:11.5px; color:var(--muted); margin-top:3px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#b3 .vd-kpi { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px;
  background:var(--line-soft); border-top:1px solid var(--line-soft); }
#b3 .vd-kpi > div { background:var(--panel); padding:9px 11px; min-width:0; }
#b3 .vd-kpi span { display:block; font-size:10.5px; color:var(--muted); font-weight:600; white-space:nowrap; }
#b3 .vd-kpi b { display:block; font-size:13.5px; font-variant-numeric:tabular-nums; margin-top:3px; letter-spacing:-.2px; }
#b3 .vd-spark { display:flex; align-items:flex-end; gap:3px; height:34px; padding:10px 14px 0; }
#b3 .vd-spark i { flex:1; border-radius:3px 3px 0 0; background:var(--accent-bg); display:block; }
#b3 .vd-spark i.is-last { background:var(--accent); }
#b3 .vd-tags { display:flex; flex-wrap:wrap; gap:4px; padding:10px 14px 0; }
#b3 .vd-tag, .b3-pop .vd-tag { font-size:10.5px; font-weight:700; border-radius:5px; padding:2px 7px;
  background:var(--panel-alt); color:var(--slate); white-space:nowrap; }
#b3 .vd-foot { display:flex; align-items:center; gap:6px; padding:11px 14px;
  border-top:1px solid var(--line-faint); background:var(--panel-sub); flex-wrap:wrap; }
.b3-pop .vd-month { display:flex; align-items:center; gap:8px; padding:9px 11px;
  border:1px solid var(--line-soft); border-radius:var(--r-md); background:var(--panel);
  min-width:0; cursor:pointer; font:inherit; text-align:left; color:var(--text); }
.b3-pop .vd-month:hover { border-color:var(--accent); background:var(--accent-bg-2); }
.b3-pop .vd-month.is-empty { background:var(--panel-sub); border-style:dashed; }
.b3-pop .vd-file { display:flex; align-items:center; gap:9px; padding:8px 10px;
  border:1px solid var(--line-soft); border-radius:var(--r); background:var(--panel); min-width:0; }
.b3-pop .vd-file__thumb { width:30px; height:30px; flex:none; border-radius:7px; font-size:10.5px; font-weight:800;
  display:flex; align-items:center; justify-content:center; }
.b3-pop .vd-dup { font-size:10.5px; font-weight:800; border-radius:4px; padding:1px 5px;
  background:var(--warn-bg); color:var(--warn-fg); white-space:nowrap; }