/* ============================================================
   ES 재고관리 — 상품 카테고리 (폴더 뷰 · 캔버스 뷰)   v77
   원본: 개발 인계 소스 src/category.css
   · 클래스명은 원본 그대로 유지하고 #catmap 아래로만 스코프
   · .ctx(우클릭 메뉴)는 body 직속이라 .cm-ctx 로 이름만 바꾸고
     z-index 를 앱 팝오버 대역(425)으로 올림 (원본 120 → 채팅 FAB/모달에 가림)
   ============================================================ */

/* ---------- 뷰 전환 ---------- */
#catmap .cat-views { display:inline-flex; border:1px solid var(--line,#dedac4); border-radius:var(--r,8px); overflow:hidden; }
#catmap .cat-views__item {
  padding:6px 13px; border:0; background:var(--panel,#fff);
  font:inherit; font-size:12.5px; font-weight:600; color:var(--sub,#475569); cursor:pointer;
}
#catmap .cat-views__item.is-active { background:var(--accent,#5a6636); color:#fff; font-weight:700; }

/* ---------- 폴더 뷰 ---------- */
#catmap .cat-group {
  background:var(--panel,#fff); border:1.5px solid var(--line,#dedac4);
  border-radius:var(--r-lg,14px); padding:12px 14px 14px;
}
#catmap .cat-group.is-over { border-color:var(--accent,#5a6636); background:var(--accent-bg-2,#f3f2e6); }
#catmap .cat-group.is-dragging { opacity:.45; }
#catmap .cat-group.is-hidden { opacity:.55; border-style:dashed; }

#catmap .cat-group__head { display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin-bottom:11px; }
#catmap .cat-group__grip { font-size:12.5px; color:var(--faint,#c6c8b4); cursor:grab; }
#catmap .cat-group__title { font-size:13.5px; font-weight:800; letter-spacing:-.2px; }
#catmap .cat-group__meta { font-size:var(--fs-sm,12px); color:var(--muted,#9aa08a); }

#catmap .cat-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(190px, 1fr)); gap:9px; min-width:0; }

#catmap .cat-card {
  display:flex; flex-direction:column; gap:6px; min-width:0;
  padding:11px 12px; border:1px solid var(--line-soft,#eceade); border-radius:11px;
  background:var(--panel,#fff); font:inherit; text-align:left; color:var(--text,#0f172a); cursor:grab;
}
#catmap .cat-card:hover { border-color:var(--accent,#5a6636); background:var(--accent-bg-2,#f3f2e6); }
#catmap .cat-card.is-dragging { opacity:.45; }
#catmap .cat-card.is-over { border-color:var(--accent,#5a6636); box-shadow:inset 0 0 0 1px var(--accent,#5a6636); }
#catmap .cat-card.is-hidden { opacity:.5; border-style:dashed; }
#catmap .cat-card__code { font-size:11.5px; font-weight:800; color:var(--accent-fg,#4d5434); }
#catmap .cat-card__name { font-size:12.5px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#catmap .cat-card__n    { font-size:11.5px; color:var(--muted,#9aa08a); font-variant-numeric:tabular-nums; }
#catmap .cat-card__pin  { font-size:10.5px; color:var(--warn,#8f6708); }

/* ---------- 캔버스 뷰 ---------- */
#catmap .canvas-wrap {
  height:620px; overflow:auto;
  background-color:var(--panel-sub,#f6f5ec);
  background-image:radial-gradient(var(--line,#dedac4) 1px, transparent 1px);
  background-size:18px 18px;
}
#catmap .canvas-inner {
  transform-origin:0 0; width:2000px; padding:24px;
  display:grid; grid-template-columns:repeat(3, 620px); gap:26px;
}
#catmap .canvas-group {
  position:relative; height:300px;
  border:1.5px dashed var(--line,#dedac4); border-radius:14px;
}

/* 대분류 허브 — 끌면 소속 중분류가 간격 유지한 채 따라옴 */
#catmap .hub {
  position:absolute; z-index:3; transform:translate(-50%,-50%);
  display:flex; align-items:center; gap:7px;
  padding:10px 15px; border:0; border-radius:var(--r-pill,999px);
  background:#1e3a8a; color:#fff; font:inherit; font-size:12.5px; font-weight:800;
  white-space:nowrap; user-select:none; cursor:grab;
  box-shadow:0 6px 18px rgba(30,58,138,.28);
}
#catmap .hub.is-dragging { cursor:grabbing; box-shadow:0 10px 26px rgba(30,58,138,.42); }
#catmap .hub__grip { font-size:11.5px; opacity:.7; }
#catmap .hub__n { font-size:11.5px; font-weight:600; opacity:.85; }

/* 중분류 노드 */
#catmap .node {
  position:absolute; z-index:2; transform:translate(-50%,-50%);
  display:flex; flex-direction:column; gap:2px; align-items:center;
  min-width:96px; max-width:150px;
  padding:8px 11px; border:1.5px solid var(--line,#dedac4); border-radius:11px;
  background:var(--panel,#fff); font:inherit; color:var(--text,#0f172a);
  user-select:none; cursor:grab; box-shadow:0 2px 6px rgba(16,24,40,.06);
}
#catmap .node:hover { border-color:var(--accent,#5a6636); }
#catmap .node.is-dragging { cursor:grabbing; border-color:var(--accent,#5a6636); box-shadow:0 10px 24px rgba(90,102,54,.28); }
#catmap .node__code { font-size:10.5px; font-weight:800; color:var(--accent-fg,#4d5434); }
#catmap .node__name { font-size:11.5px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:128px; }
#catmap .node__n    { font-size:10.5px; color:var(--muted,#9aa08a); font-variant-numeric:tabular-nums; }

#catmap .canvas-edges { position:absolute; inset:0; width:100%; height:100%; z-index:1; pointer-events:none; }
/* ↑ v87: svg 는 대체(replaced) 요소라 inset:0 만으로는 300×150 기본 크기로 남아
   연결선이 잘려 «부분적으로만 이어진» 것처럼 보였습니다 — 명시적 100% 크기로 수정 */
#catmap .canvas-edges line { stroke:#c9c5a1; stroke-width:1.5; }

/* 캔버스 하단 바 */
#catmap .canvas-bar {
  display:flex; align-items:center; gap:9px; flex-wrap:wrap;
  padding:10px 14px; border-top:1px solid var(--line-soft,#eceade); background:var(--panel-sub,#f6f5ec);
}
#catmap .zoom { display:inline-flex; align-items:center; gap:6px; }
#catmap .zoom__btn {
  width:28px; height:28px; padding:0;
  border:1px solid var(--line,#dedac4); border-radius:var(--r,8px); background:var(--panel,#fff);
  font:inherit; font-size:12.5px; color:var(--slate,#334155); cursor:pointer;
}
#catmap .zoom__btn:hover { background:#f6f5ec; }
#catmap .zoom__val { font-size:12.5px; font-weight:700; font-variant-numeric:tabular-nums; min-width:44px; text-align:center; }

#catmap .reset-pos {
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 12px; border:1px solid var(--line,#dedac4); border-radius:var(--r,8px);
  background:var(--panel,#fff); font:inherit; font-size:12.5px; font-weight:700;
  color:var(--muted,#9aa08a); cursor:default; white-space:nowrap;
}
#catmap .reset-pos.is-dirty { background:var(--warn-bg,#fef3c7); border-color:var(--warn-line,#fcd34d); color:var(--warn-fg,#92400e); cursor:pointer; }

/* ---------- 상세 표 · 변경 이력 ---------- */
#catmap .cm-table { width:100%; border-collapse:collapse; font-size:12.5px; background:var(--panel,#fff); }
#catmap .cm-table th, #catmap .cm-table td { padding:8px 10px; border-bottom:1px solid var(--line-soft,#eceade); text-align:left; white-space:nowrap; }
#catmap .cm-table th { background:var(--panel-sub,#f6f5ec); font-size:11.5px; font-weight:800; color:var(--muted,#64748b); position:sticky; top:0; z-index:1; }
#catmap .cm-table td.num { text-align:right; font-variant-numeric:tabular-nums; }
#catmap .cm-table tbody tr:hover { background:var(--accent-bg-2,#f6f9ff); }
#catmap .cm-wrap { border:1px solid var(--line,#dedac4); border-radius:var(--r-lg,14px); overflow:auto; max-height:640px; }

/* ---------- 우클릭 메뉴 (body 직속 · 앱 팝오버 대역) ---------- */
.cm-ctx {
  position:fixed; z-index:425; width:232px;
  background:var(--panel,#fff); border:1px solid var(--line,#dedac4); border-radius:11px;
  box-shadow:var(--shadow-pop, 0 12px 34px rgba(15,23,42,.18)); padding:6px;
}
.cm-ctx__title {
  padding:7px 10px 8px; margin-bottom:4px; border-bottom:1px solid var(--line-faint,#f2f1e6);
  font-size:11.5px; font-weight:800; color:var(--muted,#9aa08a);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.cm-ctx__item {
  display:flex; align-items:center; gap:9px; width:100%;
  padding:8px 10px; border:0; border-radius:var(--r,8px); background:none;
  font:inherit; font-size:12.5px; color:var(--text,#0f172a); text-align:left; cursor:pointer;
}
.cm-ctx__item:hover { background:#f4f3e8; }
.cm-ctx__item--danger { color:var(--danger,#a8442a); }
.cm-ctx__sep { height:1px; margin:4px 0; background:var(--line-faint,#f2f1e6); }


/* ============================================================
   v87 — 화면 뼈대 이식 (시안 tokens.css · workspace.css 셸)
   전역 스타일이 시안과 달라(제목 28px 등) 시안 규격으로 맞춥니다.
   ============================================================ */
#catmap {
  --bg:#eef0e6; --panel:#ffffff; --panel-sub:#fbfaf2; --panel-alt:#f6f5ec;
  --line:#dcd8c0; --line-soft:#e8e5d1; --line-faint:#edebdb;
  --text:#1c2430; --text-mid:#3a4030; --sub:#6b7160; --muted:#98a08a; --faint:#c6c8b4; --slate:#4f5644;
  --accent:#5a6636; --accent-hover:#4d5434; --accent-fg:#4d5434;
  --accent-bg:#ecead7; --accent-bg-2:#f5f4e7; --accent-line:#c9c5a1;
  --ok:#4d7c2f; --ok-fg:#3f6626; --ok-bg:#e9f0e0; --warn:#b8860b; --warn-fg:#8f6708;
  --danger:#a8442a; --danger-bg:#f7e7e1; --neutral-bg:#eceade;
  --r-sm:0; --r:0; --r-md:0; --r-lg:0; --r-pill:99px;
  --gap:12px; --pad-page:16px;
  --font:'ES Emoji', 'Pretendard Variable', Pretendard, 'Apple SD Gothic Neo', system-ui, sans-serif;
  --fs-title:20px; --fs-card:13.5px; --fs-body:12.5px; --fs-sm:11.5px; --fs-xs:10.5px;
  font-family: var(--font); color: var(--text); font-size: 13.5px; background: var(--bg);
}
#catmap * { box-sizing: border-box; }
#catmap .page-header { position: sticky; top: var(--rmtop, 0px); z-index: 40;
  background: var(--panel); border-bottom: 1px solid var(--line); }
#catmap .page-header__row { display: flex; align-items: flex-end; gap: 14px;
  padding: 11px var(--pad-page) 0; flex-wrap: wrap; }
#catmap .crumb { display: flex; align-items: center; gap: 6px; font-size: var(--fs-sm);
  color: var(--muted); font-weight: 600; }
#catmap .page-title { margin: 0; font-size: var(--fs-title); font-weight: 800; letter-spacing: -.4px; color: var(--text); }
#catmap .chip { border-radius: var(--r-sm); padding: 2px 8px; font-size: var(--fs-sm); font-weight: 700; }
#catmap .chip--accent { background: var(--accent-bg); color: var(--accent-fg); }
#catmap .page-tabs { display: flex; gap: 2px; padding: 8px var(--pad-page) 0; overflow: auto; }
#catmap .page-tabs__item { padding: 7px 12px 9px; border: 0; background: none; border-radius: 0;
  box-shadow: inset 0 -2px 0 0 transparent;
  font: inherit; font-size: 12.5px; font-weight: 600; color: var(--sub); cursor: pointer; white-space: nowrap; }
#catmap .page-tabs__item.is-active { color: var(--text); box-shadow: inset 0 -2px 0 0 var(--accent); background: none; }
#catmap .btn { display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--line); background: var(--panel);
  padding: 7px 12px; border-radius: var(--r);
  font: inherit; font-size: 12.5px; font-weight: 400; color: var(--text); cursor: pointer; white-space: nowrap; }
#catmap .btn:hover { border-color: #c9c5a1; background: #f6f5ec; }
#catmap .btn--primary { border-color: var(--accent); background: var(--accent); color: #fff; font-weight: 700; padding: 7px 15px; }
#catmap .btn--primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
#catmap .btn--icon { width: 34px; height: 34px; padding: 0; justify-content: center; }
#catmap .btn--sm { padding: 5px 11px; font-size: var(--fs-sm); font-weight: 700; }
#catmap .main { width: 100%; margin: 0; padding: var(--pad-page); }

/* ============================================================
   v103 — 시안 「11 상품 카테고리」 추가 반영
   · 기초자료 한 줄 칩 (드롭다운 대체)
   · 분류 상세 표 (#catdt) — .cat-bar / .cat-table / 바코드 라벨 버튼 / 선택 일괄 동작
   ============================================================ */

/* ---------- 기초자료 칩 줄 ---------- */
#catmap .base-row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:12px; min-width:0; }
#catmap .base-fold { display:inline-flex; align-items:center; gap:6px; flex:none; border:0; background:none;
  padding:0; font:inherit; cursor:pointer; color:var(--slate,#4f5644); }
#catmap .base-fold b { font-size:11.5px; letter-spacing:.2px; }
#catmap .base-chips { display:flex; align-items:center; gap:5px; flex-wrap:wrap; min-width:0; }
#catmap .bchip { display:inline-flex; align-items:center; gap:6px; flex:none;
  padding:5px 11px; border:1px solid var(--line,#dcd8c0); border-radius:99px; background:#fff;
  font:inherit; font-size:11.5px; font-weight:600; color:var(--text,#1c2430); cursor:pointer; white-space:nowrap; }
#catmap .bchip:hover { border-color:var(--accent,#5a6636); background:var(--accent-bg-2,#f5f4e7); }
#catmap .bchip__ico { font-size:12.5px; opacity:.75; }
#catmap .bchip__meta { font-size:10.5px; font-weight:700; border-radius:5px; padding:1px 6px; }

/* ---------- 분류 상세 표 ---------- */
/* v103 fix — 클래식 셸(#content)에는 디자인 토큰이 없어 var() 가 무효화된다.
   #catdt · .lbpv 범위에 토큰을 직접 선언해 색/테두리가 사라지지 않게 한다. */
#catdt, .lbpv {
  --panel:#ffffff; --panel-sub:#fbfaf2; --panel-alt:#f6f5ec;
  --line:#dcd8c0; --line-soft:#e8e5d1; --line-faint:#edebdb;
  --text:#1c2430; --text-mid:#3a4030; --sub:#6b7160; --muted:#98a08a;
  --faint:#c6c8b4; --slate:#4f5644;
  --accent:#5a6636; --accent-hover:#4d5434; --accent-fg:#4d5434;
  --accent-bg:#ecead7; --accent-bg-2:#f5f4e7; --accent-line:#c9c5a1;
  --ok:#4d7c2f; --ok-fg:#3f6626; --ok-bg:#e9f0e0;
  --warn:#b8860b; --warn-fg:#8f6708; --warn-bg:#faf1dc;
  --danger:#a8442a; --danger-fg:#8c3721; --danger-bg:#f7e7e1;
  --neutral-bg:#eceade; --r-lg:0; --r:0; --r-sm:0;
}

#catdt .cat-bar { display:flex; align-items:center; gap:9px; padding:11px 14px;
  border-bottom:1px solid var(--line-soft,#e8e5d1); flex-wrap:wrap; }
#catdt .cat-card-box { background:var(--panel,#fff); border:1.5px solid var(--line,#dcd8c0);
  border-radius:var(--r-lg,12px); padding:0; overflow:hidden; }
#catdt .cat-table { width:100%; border-collapse:collapse; }
#catdt .cat-table th { background:var(--panel-alt,#f6f5ec); border-bottom:1px solid var(--line,#dcd8c0);
  padding:9px 10px; font-size:11.5px; color:var(--slate,#4f5644); font-weight:700; white-space:nowrap; }
#catdt .cat-table td { border-bottom:1px solid var(--line-faint,#edebdb); padding:9px 10px; font-size:12.5px; }
#catdt .cat-table tr:hover td { background:#fcfdff; }
#catdt .cat-foot { padding:10px 14px; border-top:1px solid var(--line-faint,#edebdb);
  background:var(--panel-sub,#fbfaf2); font-size:10.5px; color:var(--muted,#98a08a); word-break:keep-all; }

/* 바코드 라벨 버튼 */
#catdt .dbar { display:inline-flex; align-items:center; gap:6px; padding:3px 9px;
  border:1px solid var(--line,#dcd8c0); border-radius:7px; background:#fff; font:inherit;
  font-size:11.5px; font-family:'SFMono-Regular',Menlo,Consolas,monospace; cursor:pointer; white-space:nowrap; }
#catdt .dbar:hover { border-color:var(--accent,#5a6636); background:var(--accent-bg-2,#f5f4e7); }
#catdt .dbar__ico { display:inline-block; width:15px; height:11px;
  background:repeating-linear-gradient(90deg,#1c2430 0 1px,#fff 1px 2px,#1c2430 2px 3px,#fff 3px 5px); }

/* 선택 일괄 동작 pill */
#catdt .selacts { display:inline-flex; align-items:center; gap:6px; padding:4px 6px 4px 11px;
  border:1.5px solid var(--accent-line,#c9c5a1); border-radius:99px; background:var(--accent-bg-2,#f5f4e7); flex-wrap:wrap; }
#catdt .selacts b { font-size:11.5px; color:var(--accent-fg,#4d5434); font-variant-numeric:tabular-nums; }
#catdt .dact { display:inline-flex; align-items:center; gap:5px; padding:4px 10px;
  border:1px solid var(--line,#dcd8c0); border-radius:99px; background:#fff; font:inherit;
  font-size:11px; font-weight:700; cursor:pointer; white-space:nowrap; }
#catdt .dclr { width:22px; height:22px; border:0; border-radius:99px; background:none;
  font:inherit; font-size:11px; color:var(--muted,#98a08a); cursor:pointer; padding:0; }
/* v105 — 셀 드래그 영역 하이라이트 (v102 스타일이 .tb 전용이라 .cat-table 에 다시 선언) */
#catdt .cat-table.selmode { user-select:none; }
#catdt .cat-table td.selc { cursor:cell; }
#catdt .cat-table td.is-sel { background:#eceada !important; box-shadow:inset 0 0 0 1px #a8ac82; }
#catdt .cat-table td.is-merged { background:#fbfaf2; }
#catdt .cat-table td.is-merged::after {
  content:'⇕'; float:right; font-size:9.5px; color:#c2bfa6; margin-left:3px; line-height:1; }

/* 행 선택 체크박스 — 인라인 var() 없이 확실히 보이게 */
#catdt .dchk { display:inline-block; width:17px; height:17px; flex:none; border-radius:5px;
  border:1.5px solid #b6c2d4; background:#fff; color:#fff;
  font-size:10.5px; font-weight:900; cursor:pointer; padding:0; line-height:1; vertical-align:middle; }
#catdt .dchk:hover { border-color:#5a6636; }
#catdt .dchk.is-on { border-color:#5a6636; background:#5a6636; }
#catdt .dact[disabled] { opacity:.42; cursor:default; }
#catdt .selacts--idle { border-color:var(--line); background:var(--panel-sub); }
#catdt .selacts--idle b { color:var(--muted); font-weight:600; }

/* 라벨 미리보기 모달 */
.lbpv { position:fixed; inset:0; z-index:130; background:rgba(16,24,40,.44);
  display:flex; align-items:center; justify-content:center; padding:24px; }
.lbpv__card { width:380px; max-width:100%; background:#fff; border-radius:14px;
  box-shadow:0 30px 70px rgba(16,24,40,.32); overflow:hidden; }
.lbpv__head { display:flex; align-items:center; gap:9px; padding:14px 16px; border-bottom:1px solid var(--line-soft,#e8e5d1); }
.lbpv__body { padding:18px; display:flex; justify-content:center; background:var(--panel-sub,#fbfaf2); }
.lbpv__label { width:200px; height:160px; border:1.5px solid var(--faint,#c6c8b4); border-radius:6px;
  background:#fff; padding:11px 12px; display:flex; flex-direction:column; gap:3px; }
.lbpv__bars { height:26px; background:repeating-linear-gradient(90deg,#1c2430 0 2px,#fff 2px 4px,#1c2430 4px 5px,#fff 5px 8px); }
.lbpv__foot { display:flex; gap:7px; padding:13px 16px; border-top:1px solid var(--line-soft,#e8e5d1); }
.lbpv__foot button { flex:1; padding:9px; border-radius:9px; font:inherit; font-size:12.5px; font-weight:700; cursor:pointer; }

/* ============================================================
   v122 — 분류 카드 배치 3단계 (시안 「11 상품 카테고리」)
   ============================================================ */
#catmap .cat-card { position: relative; }
#catmap .cat-card__ph { border-radius: 0; }
#catmap .cat-card__pop {
  position: absolute; top: 4px; right: 4px; width: 22px; height: 22px;
  display: none; align-items: center; justify-content: center;
  border: 1px solid var(--line); background: rgba(255,255,255,.92);
  font-size: 11px; line-height: 1; color: var(--slate); cursor: pointer; z-index: 2;
}
#catmap .cat-card:hover .cat-card__pop { display: flex; }
#catmap .cat-card__pop:hover { border-color: var(--accent); color: var(--accent-fg); background: #fff; }
#catmap .cat-views + .cat-views { margin-left: 2px; }

/* ============================================================
   v124 — «목록» 배치의 우측 패널을 카테고리 상세 표와 같은 구성으로
   · 카드 배치(보통 / 큰 카드)에서 분류를 열었을 때와 동일한 표를 그대로 씁니다
   · 도구줄(선택 · 일괄 동작)은 패널 위에 남기고, 표 안쪽만 스크롤 + 머리글 고정
   ============================================================ */
.cm-listdt #catdt .cat-card-box { border: 0; box-shadow: none; }   /* 패널 카드 안이라 이중 테두리 제거 */
/* 표 영역만 세로로 스크롤 — 머리글은 그 안에서 고정 */
.cm-listdt #catdt .cat-card-box > div:not(.cat-bar):not(.cat-foot) { max-height: 60vh; overflow: auto; }
.cm-listdt #catdt .cat-table th { position: sticky; top: 0; z-index: 2; }
.cm-listdt #catdt .cat-table tbody tr { scroll-margin-top: 44px; }
.cm-listdt #catdt .cat-foot { font-size: 11px; }