/* ============================================================
   ES 재고관리 — 상품 · SKU 관리   v79
   원본: 개발 인계 소스 src/sku.css (+ board.css 의 .code-link / .code-pop)
   · 클래스명은 원본 그대로 유지하고 #skuv2 아래로만 스코프
   · .bulk-bar 는 원본 z-index 80 → 90 (채팅 FAB #v2fab 이 80 이라 겹침 방지)
   · 코드 hover 카드는 표 셀이 overflow:hidden 이라 셀 안에서 잘린다 →
     body 직속 고정(.sku-pop, z-index 425 = 앱 팝오버 대역)으로 띄운다
   ============================================================ */

#skuv2 {
  /* ---- 토큰 (원본 tokens.css 그대로) ---- */
  --panel:#ffffff; --panel-sub:#fbfaf2; --panel-alt:#f6f5ec;
  --dark:#101828; --dark-sub:#2f3524; --dark-line:#454c2f;
  --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; --ok-line:#cbdcb6;
  --warn:#b8860b; --warn-fg:#8f6708; --warn-bg:#faf1dc; --warn-line:#e6d3a3;
  --danger:#a8442a; --danger-fg:#8c3721; --danger-bg:#f7e7e1; --danger-line:#e3c2b6;
  --info:#5b6b4a; --info-bg:#eef0e6; --neutral-bg:#eceade;
  --r-sm:0; --r:0; --r-md:0; --r-lg:0; --r-xl:0; --r-pill:99px;
  --bg:#eef0e6; --gap:12px; --pad-page:16px; --pad-card:13px 15px;
  --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;
  --shadow-pop:0 14px 34px rgba(16,24,40,.16);
  font-family: var(--font); color: var(--text); font-size: 13.5px; background: var(--bg);
}
#skuv2 *, .sku-pop * { box-sizing: border-box; }

/* ---------- 페이지 헤더 (v64 셸) ---------- */
#skuv2 .page-header { position: sticky; top: var(--skutop, 0px); z-index: 40;
  background: var(--panel); border-bottom: 1px solid var(--line); }
#skuv2 .page-header__row { display: flex; align-items: flex-end; gap: 14px;
  padding: 11px var(--pad-page) 0; flex-wrap: wrap; }
#skuv2 .crumb { display: flex; align-items: center; gap: 6px; font-size: var(--fs-sm);
  color: var(--muted); font-weight: 600; }
#skuv2 .page-title { margin: 0; font-size: var(--fs-title); font-weight: 800; letter-spacing: -.4px; color: var(--text); }
#skuv2 .chip { border-radius: var(--r-sm); padding: 2px 8px; font-size: var(--fs-sm); font-weight: 700; }
#skuv2 .chip--accent { background: var(--accent-bg); color: var(--accent-fg); }
#skuv2 .chip--ok { background: var(--ok-bg); color: var(--ok-fg); }
#skuv2 .chip--warn { background: var(--warn-bg); color: var(--warn-fg); }
#skuv2 .page-tabs { display: flex; gap: 2px; padding: 8px var(--pad-page) 0; overflow: auto; }
#skuv2 .page-tabs__item { padding: 7px 12px 9px; border: 0; background: none; 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; }
#skuv2 .page-tabs__item:hover { color: var(--text); }
#skuv2 .page-tabs__item.is-active { color: var(--text); box-shadow: inset 0 -2px 0 0 var(--accent); }

/* ---------- 버튼 ---------- */
#skuv2 .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-family: var(--font); font-size: 12.5px; font-weight: 400; color: var(--text);
  cursor: pointer; white-space: nowrap; box-shadow: none; text-transform: none; min-width: 0; }
#skuv2 .btn:hover { border-color: #c9c5a1; background: #f6f5ec; }
#skuv2 .btn--primary { border-color: var(--accent); background: var(--accent); color: #fff; font-weight: 700; padding: 7px 15px; }
#skuv2 .btn--primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
#skuv2 .btn--danger { border-color: var(--danger-line); background: var(--panel); color: var(--danger); }
#skuv2 .btn--danger:hover { background: #f7e7e1; }
#skuv2 .btn--sm { padding: 5px 11px; font-size: var(--fs-sm); font-weight: 700; }
#skuv2 .btn--icon { width: 34px; height: 34px; padding: 0; justify-content: center; }
#skuv2 .btn:disabled { opacity: .55; cursor: default; }

/* ---------- 본문 ---------- */
#skuv2 .main { width: 100%; margin: 0; padding: var(--pad-page) var(--pad-page) 90px;
  display: flex; flex-direction: column; gap: var(--gap); }

/* ---------- 툴바 ---------- */
#skuv2 .sku-bar { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:12px; }
#skuv2 .sku-search {
  width:250px; padding:8px 11px; border:1.5px solid var(--line);
  border-radius:8px; outline:none; background:var(--panel); font:inherit; font-size:12.5px; color:var(--text);
}
#skuv2 .sku-search:focus { border-color:var(--accent-line); }

/* 툴바 버튼 (원본 .btn--sm 대응) */
#skuv2 .sku-btn {
  display:inline-flex; align-items:center; gap:5px; padding:7px 12px;
  border:1px solid var(--line); border-radius:var(--r); background:var(--panel);
  font:inherit; font-size:12.5px; font-weight:600; color:var(--text); cursor:pointer; white-space:nowrap;
}
#skuv2 .sku-btn:hover { background:var(--panel-alt); border-color:var(--accent-line); }
#skuv2 .sku-btn.is-on { background:var(--accent-bg); border-color:var(--accent-line); color:var(--accent-fg); }
#skuv2 .sku-sel {
  padding:7px 10px; border:1px solid var(--line); border-radius:var(--r);
  background:var(--panel); font:inherit; font-size:12.5px; font-weight:600; color:var(--text);
  cursor:pointer; max-width:230px;
}

/* 탭 안 건수 배지 */
#skuv2 .page-tabs__item b { font-weight:800; color:var(--muted); margin-left:4px; }
#skuv2 .page-tabs__item.is-active b { color:var(--accent-fg); }

/* ---------- 표 카드 ---------- */
#skuv2 .sku-card { background:var(--panel); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; }
#skuv2 .sku-card__hint {
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  padding:9px 13px; border-bottom:1px solid var(--line-soft); background:var(--panel-sub);
  font-size:11.5px; color:var(--muted);
}
#skuv2 .sku-scroll { overflow-x:auto; }

/* 고정 레이아웃 표 */
#skuv2 .sku-table { width:100%; border-collapse:collapse; table-layout:fixed; }
#skuv2 .sku-table th {
  position:relative; background:var(--panel-alt); border-bottom:1px solid var(--line);
  padding:9px 14px 9px 10px; font-size:12.5px; color:var(--slate); font-weight:700;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; user-select:none;
}
#skuv2 .sku-table td {
  border-bottom:1px solid var(--line-faint); padding:8px 10px; font-size:12.5px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
#skuv2 .sku-table tr.is-sel td { background:var(--accent-bg-2); }
#skuv2 .sku-table tbody tr:hover td { background:var(--panel-sub); }
#skuv2 .sku-table tbody tr.is-sel:hover td { background:var(--accent-bg-2); }

/* 열 경계 그립 — v162: 항상 보이는 경계선 + 넓은 잡기 영역 (기존 8px 투명 띠는 찾기 어려웠음) */
#skuv2 .col-grip {
  position:absolute; top:0; right:0; width:14px; height:100%;
  cursor:col-resize; z-index:3; background:transparent; touch-action:none;
}
#skuv2 .col-grip::after {
  content:''; position:absolute; top:22%; bottom:22%; right:5px; width:2px;
  background:var(--line); border-radius:2px;
}
#skuv2 .col-grip:hover::after, #skuv2 .col-grip.is-active::after {
  background:var(--accent); top:8%; bottom:8%; width:3px; right:4px;
}

/* 정렬 버튼 */
#skuv2 .sku-sort {
  display:flex; align-items:center; gap:5px; width:100%; padding:9px 14px 9px 10px;
  border:0; background:none; font:inherit; font-size:12.5px; font-weight:700; cursor:pointer;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--slate);
}
#skuv2 .sku-sort.is-on { color:var(--accent-fg); }
#skuv2 .sku-subh {
  display:block; padding:0 10px 7px; font-size:10.5px; color:var(--muted); font-weight:600;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* 셀 표현 */
#skuv2 .sku-code   { font-weight:800; color:var(--accent); }
#skuv2 .sku-num    { text-align:right; font-variant-numeric:tabular-nums; font-weight:700; }
#skuv2 .sku-sub    { color:var(--sub); font-size:12.5px; }
#skuv2 .sku-badge  { display:inline-block; border-radius:var(--r-sm); padding:2px 7px; font-size:11.5px; font-weight:700; }

/* 행 작업 */
#skuv2 .sku-acts { display:flex; gap:5px; justify-content:center; }
#skuv2 .sku-act {
  padding:4px 9px; border:1px solid var(--line); border-radius:var(--r-sm);
  background:var(--panel); font:inherit; font-size:11.5px; font-weight:600;
  cursor:pointer; white-space:nowrap;
}
#skuv2 .sku-act:hover { background:#f6f5ec; }
#skuv2 .sku-more {
  width:26px; height:24px; padding:0; border:1px solid var(--line); border-radius:var(--r-sm);
  background:var(--panel); font:inherit; font-size:12.5px; color:var(--slate); cursor:pointer;
}

/* 체크박스 */
#skuv2 .sku-check {
  width:17px; height:17px; padding:0; border:1.5px solid var(--faint); border-radius:5px;
  background:var(--panel); color:#fff; font-size:11.5px; font-weight:900; cursor:pointer; line-height:1;
}
#skuv2 .sku-check.is-on { border-color:var(--accent); background:var(--accent); }

/* 상품코드 hover 링크 (board.css .code-link) */
#skuv2 .code-link {
  position:relative; display:inline-flex; align-items:center; gap:5px;
  border:0; background:none; padding:0; font:inherit;
  font-size:12.5px; font-weight:800; color:var(--accent-fg); cursor:pointer;
}
#skuv2 .code-link:hover { text-decoration:underline; }

/* ---------- 일괄 액션 바 ---------- */
#skuv2 .bulk-bar {
  position:fixed; left:50%; bottom:22px; transform:translateX(-50%); z-index:90;
  display:flex; align-items:center; gap:9px; padding:10px 14px; border-radius:var(--r-xl);
  background:var(--dark); color:#fff; box-shadow:0 18px 40px rgba(16,24,40,.32);
  max-width:calc(100vw - 40px); flex-wrap:wrap; justify-content:center;
}
#skuv2 .bulk-bar__btn {
  display:inline-flex; align-items:center; gap:6px; flex:none; white-space:nowrap;
  padding:7px 12px; border:1px solid #3a4030; border-radius:9px; background:var(--dark-sub);
  font:inherit; font-size:12.5px; font-weight:600; color:#fff; cursor:pointer;
}
#skuv2 .bulk-bar__btn:hover { background:#1c2b47; border-color:#4f5644; }

/* ---------- 코드 hover 카드 (body 직속 · 셀 클리핑 회피) ---------- */
.sku-pop {
  position:fixed; z-index:425; width:260px; display:flex; gap:10px; padding:10px;
  background:#fff; border:1px solid #dcd8c0; border-radius:12px;
  box-shadow:0 14px 34px rgba(16,24,40,.16); text-align:left; pointer-events:none;
}
.sku-pop__thumb {
  width:64px; height:64px; flex:none; border-radius:10px; overflow:hidden;
  background:#eceade; color:#98a08a; font-size:10.5px;
  display:flex; align-items:center; justify-content:center;
}
.sku-pop__thumb img { width:100%; height:100%; object-fit:contain; background:#fff; display:block; }
.sku-pop__name { font-size:12.5px; font-weight:700; color:#1c2430; line-height:1.4; }
.sku-pop__meta { font-size:11.5px; color:#98a08a; margin-top:2px; }
.sku-pop__locs { font-size:11.5px; color:#4f5644; margin-top:5px; line-height:1.6; }

/* ============================================================
   v107 — 카테고리 화면과 동일한 «기초자료 칩 줄» · «선택 일괄 동작 pill 바»
   ============================================================ */
#skuv2 .base-row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:12px; min-width:0; }
#skuv2 .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); }
#skuv2 .base-fold b { font-size:11.5px; letter-spacing:.2px; }
#skuv2 .base-chips { display:flex; align-items:center; gap:5px; flex-wrap:wrap; min-width:0; }
#skuv2 .bchip { display:inline-flex; align-items:center; gap:6px; flex:none;
  padding:5px 11px; border:1px solid var(--line); border-radius:99px; background:#fff;
  font:inherit; font-size:11.5px; font-weight:600; color:var(--text); cursor:pointer; white-space:nowrap; }
#skuv2 .bchip:hover { border-color:var(--accent); background:var(--accent-bg-2); }
#skuv2 .bchip__ico { font-size:12.5px; opacity:.75; }
#skuv2 .bchip__meta { font-size:10.5px; font-weight:700; border-radius:5px; padding:1px 6px; }

#skuv2 .selacts { display:inline-flex; align-items:center; gap:6px; padding:4px 6px 4px 11px;
  border:1.5px solid var(--accent-line); border-radius:99px; background:var(--accent-bg-2); flex-wrap:wrap; }
#skuv2 .selacts b { font-size:11.5px; color:var(--accent-fg); font-variant-numeric:tabular-nums; }
#skuv2 .selacts--idle { border-color:var(--line); background:var(--panel-sub); }
#skuv2 .selacts--idle b { color:var(--muted); font-weight:600; }
#skuv2 .dact { display:inline-flex; align-items:center; gap:5px; padding:4px 10px;
  border:1px solid var(--line); border-radius:99px; background:#fff; font:inherit;
  font-size:11px; font-weight:700; cursor:pointer; white-space:nowrap; }
#skuv2 .dact[disabled] { opacity:.42; cursor:default; }
#skuv2 .dclr { width:22px; height:22px; border:0; border-radius:99px; background:none;
  font:inherit; font-size:11px; color:var(--muted); cursor:pointer; padding:0; }