/* ============================================================
   ES 재고관리 — B2B 도매   v80
   원본: 개발 인계 소스 src/b2b.css
   · 클래스명은 원본 그대로 유지하고 #b2bv2 아래로만 스코프
   · 모달 · 장바구니는 body 직속 고정이라 스코프 밖에서도 토큰이 필요 →
     .bb-modal-back / .bb-cart-back 에도 같은 토큰 블록을 준다
   · z-index 재매핑 (원본 → 앱)
       .bb-modal-back  97 → 110   (앱 #modalWrap 100 위, #toast 300 아래)
       .bb-cart-back   98 → 112
     원본 값 그대로 두면 앱의 공용 모달(#modalWrap 100)이 위를 덮는다.
   ============================================================ */

#b2bv2, .bb-modal-back, .bb-cart-back {
  /* ---- 토큰 (원본 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;
}
#b2bv2 { background: var(--bg); }
#b2bv2 *, .bb-modal-back *, .bb-cart-back * { box-sizing: border-box; }

/* ---------- 페이지 헤더 (v64 셸) ---------- */
#b2bv2 .page-header { position: sticky; top: var(--bbtop, 0px); z-index: 40;
  background: var(--panel); border-bottom: 1px solid var(--line); }
#b2bv2 .page-header__row { display: flex; align-items: flex-end; gap: 14px;
  padding: 11px var(--pad-page) 0; flex-wrap: wrap; }
#b2bv2 .crumb { display: flex; align-items: center; gap: 6px; font-size: var(--fs-sm);
  color: var(--muted); font-weight: 600; }
#b2bv2 .page-title { margin: 0; font-size: var(--fs-title); font-weight: 800; letter-spacing: -.4px; color: var(--text); }
#b2bv2 .chip { border-radius: var(--r-sm); padding: 2px 8px; font-size: var(--fs-sm); font-weight: 700; }
#b2bv2 .chip--accent { background: var(--accent-bg); color: var(--accent-fg); }
#b2bv2 .chip--ok { background: var(--ok-bg); color: var(--ok-fg); }
#b2bv2 .chip--warn { background: var(--warn-bg); color: var(--warn-fg); }

/* ---------- 버튼 ---------- */
#b2bv2 .btn, .bb-modal-back .btn, .bb-cart-back .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; }
#b2bv2 .btn:hover, .bb-modal-back .btn:hover, .bb-cart-back .btn:hover { border-color: #c9c5a1; background: #f6f5ec; }
#b2bv2 .btn--primary, .bb-modal-back .btn--primary, .bb-cart-back .btn--primary {
  border-color: var(--accent); background: var(--accent); color: #fff; font-weight: 700; padding: 7px 15px; }
#b2bv2 .btn--primary:hover, .bb-modal-back .btn--primary:hover, .bb-cart-back .btn--primary:hover {
  background: var(--accent-hover); border-color: var(--accent-hover); }
#b2bv2 .btn--danger, .bb-modal-back .btn--danger { border-color: var(--danger-line); background: var(--panel); color: var(--danger); }
#b2bv2 .btn--danger:hover, .bb-modal-back .btn--danger:hover { background: #f7e7e1; }
#b2bv2 .btn--sm, .bb-modal-back .btn--sm, .bb-cart-back .btn--sm { padding: 5px 11px; font-size: var(--fs-sm); font-weight: 700; }
#b2bv2 .btn--icon { width: 34px; height: 34px; padding: 0; justify-content: center; }
#b2bv2 .btn:disabled, .bb-modal-back .btn:disabled, .bb-cart-back .btn:disabled { opacity: .55; cursor: default; }

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

/* ---------- 시트 탭 ---------- */
#b2bv2 .bb-tabs { display:flex; gap:2px; padding:8px 16px 0; overflow-x:auto; }
#b2bv2 .bb-tabs__item {
  padding:7px 13px 9px; border:0; background:none; font:inherit;
  font-size:var(--fs-body); font-weight:600; color:var(--sub);
  cursor:pointer; white-space:nowrap; box-shadow:inset 0 -2px 0 0 transparent; }
#b2bv2 .bb-tabs__item:hover { color:var(--text); }
#b2bv2 .bb-tabs__item.is-active { color:var(--text); box-shadow:inset 0 -2px 0 0 var(--accent); }
#b2bv2 .bb-tabs__n { margin-left:5px; font-size:var(--fs-xs); font-weight:700; color:var(--muted); }

/* ---------- 카드 · 표 공통 ---------- */
#b2bv2 .bb-card, .bb-modal-back .bb-card { background:var(--panel); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; }
#b2bv2 .bb-card__head, .bb-modal-back .bb-card__head {
  display:flex; align-items:center; gap:9px; flex-wrap:wrap;
  padding:11px 14px; border-bottom:1px solid var(--line-soft); }
#b2bv2 .bb-card__foot {
  padding:11px 14px; border-top:1px solid var(--line-faint); background:var(--panel-sub);
  font-size:11.5px; color:var(--muted); line-height:1.6; word-break:keep-all; }
#b2bv2 .bb-table, .bb-modal-back .bb-table { width:100%; border-collapse:collapse; }
#b2bv2 .bb-table th, .bb-modal-back .bb-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; }
#b2bv2 .bb-table td, .bb-modal-back .bb-table td { border-bottom:1px solid var(--line-faint); padding:9px 10px; }
#b2bv2 .bb-scroll, .bb-modal-back .bb-scroll { overflow-x:auto; }

/* ---------- 칩 ---------- */
#b2bv2 .bb-chip, .bb-modal-back .bb-chip {
  display:inline-flex; align-items:center; gap:5px; padding:5px 11px;
  border:1px solid var(--line); border-radius:var(--r-pill); background:var(--panel);
  font:inherit; font-size:var(--fs-sm); font-weight:600; color:var(--sub);
  cursor:pointer; white-space:nowrap; }
#b2bv2 .bb-chip.is-active, .bb-modal-back .bb-chip.is-active {
  background:var(--accent-bg); color:var(--accent-fg); border-color:var(--accent-line); font-weight:700; }
#b2bv2 .bb-chip--list { border-color:var(--ok-line); background:var(--ok-bg); color:var(--ok-fg); font-weight:700; font-size:var(--fs-xs); padding:3px 9px; }
#b2bv2 .bb-chip--add { border-style:dashed; border-color:var(--accent-line); color:var(--accent-fg); font-weight:700; font-size:var(--fs-xs); padding:3px 9px; }
#b2bv2 .bb-chip--add:hover { border-style:solid; }

/* ---------- 배지 ---------- */
#b2bv2 .bb-badge, .bb-modal-back .bb-badge, .bb-cart-back .bb-badge {
  display:inline-block; font-size:var(--fs-xs); font-weight:800; border-radius:5px; padding:2px 8px; white-space:nowrap; }
#b2bv2 .bb-badge--ok, .bb-modal-back .bb-badge--ok, .bb-cart-back .bb-badge--ok { background:var(--ok-bg); color:var(--ok-fg); }
#b2bv2 .bb-badge--wait, .bb-modal-back .bb-badge--wait, .bb-cart-back .bb-badge--wait { background:var(--warn-bg); color:var(--warn-fg); }
#b2bv2 .bb-badge--none, .bb-modal-back .bb-badge--none, .bb-cart-back .bb-badge--none { background:var(--neutral-bg); color:var(--muted); }
#b2bv2 .bb-badge--info, .bb-modal-back .bb-badge--info, .bb-cart-back .bb-badge--info { background:var(--accent-bg); color:var(--accent-fg); }
#b2bv2 .bb-badge--purple, .bb-modal-back .bb-badge--purple { background:var(--info-bg); color:var(--info); }
#b2bv2 .bb-badge--danger, .bb-modal-back .bb-badge--danger { background:var(--danger-bg); color:var(--danger-fg); }

/* ---------- 리스트 카드 ---------- */
#b2bv2 .bb-list { padding:13px 14px; border-bottom:1px solid var(--line-faint); min-width:0; }
#b2bv2 .bb-list__row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
#b2bv2 .bb-list__tags { display:flex; gap:5px; margin-top:9px; flex-wrap:wrap; }
#b2bv2 .bb-tag, .bb-modal-back .bb-tag { font-size:var(--fs-xs); font-weight:700; border-radius:5px; padding:2px 8px; white-space:nowrap; }
#b2bv2 .bb-tag--cat, .bb-modal-back .bb-tag--cat { background:var(--neutral-bg); color:var(--slate); }
#b2bv2 .bb-tag--field, .bb-modal-back .bb-tag--field { background:var(--accent-bg); color:var(--accent-fg); }
#b2bv2 .bb-tag--org, .bb-modal-back .bb-tag--org { background:var(--ok-bg); color:var(--ok-fg); border-radius:var(--r-pill); padding:2px 9px; }

/* ---------- 주문 · 견적 ---------- */
#b2bv2 .bb-steps { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:12px; }
#b2bv2 .bb-step {
  flex:1 1 150px; min-width:0; padding:11px 13px;
  border:1.5px solid var(--line); border-radius:11px; background:var(--panel); }
#b2bv2 .bb-step.is-active { border-color:var(--accent-line); background:var(--accent-bg-2); }
#b2bv2 .bb-step__n {
  width:20px; height:20px; flex:none; border-radius:var(--r-pill);
  background:var(--line-soft); color:var(--muted);
  font-size:var(--fs-xs); font-weight:800;
  display:flex; align-items:center; justify-content:center; }
#b2bv2 .bb-step.is-done .bb-step__n, #b2bv2 .bb-step.is-active .bb-step__n { background:var(--accent); color:#fff; }

#b2bv2 .bb-order { padding:14px; border-bottom:1px solid var(--line-faint); min-width:0; }
#b2bv2 .bb-order__items { margin-top:10px; border:1px solid var(--line-soft); border-radius:var(--r-md); overflow:hidden; }
#b2bv2 .bb-order__items th { padding:7px 10px; font-size:11.5px; }
#b2bv2 .bb-order__items td { padding:7px 10px; font-size:var(--fs-sm); }
#b2bv2 .bb-order__pending, .bb-modal-back .bb-order__pending { background:#fffaf3; }   /* 도매가 미입력 행 */
#b2bv2 .bb-order__totals, .bb-modal-back .bb-order__totals {
  display:flex; flex-direction:column; gap:4px;
  padding:9px 12px; background:var(--panel-sub); border-top:1px solid var(--line-soft); }
#b2bv2 .bb-order__note, .bb-modal-back .bb-order__note {
  display:flex; gap:8px; align-items:flex-start; margin-top:9px;
  padding:9px 11px; border:1px solid var(--accent-line); border-radius:9px;
  background:var(--accent-bg-2); min-width:0; }
#b2bv2 .bb-order__note--warn, .bb-modal-back .bb-order__note--warn { border-color:var(--warn-line); background:#fffaf3; }

/* ---------- 고객사 화면 미리보기 ---------- */
#b2bv2 .bb-view { border:1.5px solid var(--accent-line); border-radius:var(--r-lg); overflow:hidden; background:var(--panel); }
#b2bv2 .bb-view__bar {
  display:flex; align-items:center; gap:9px; flex-wrap:wrap;
  padding:11px 14px; background:var(--dark); color:#cbd3e1; }
#b2bv2 .bb-view__nav { display:flex; gap:2px; padding:0 14px; border-bottom:1px solid var(--line-soft); background:var(--panel-alt); }
#b2bv2 .bb-view__nav-item { padding:9px 13px; font-size:var(--fs-body); font-weight:600; color:var(--muted); white-space:nowrap;
  border:0; background:none; font-family:inherit; cursor:pointer; }
#b2bv2 .bb-view__nav-item.is-active { color:var(--accent-fg); font-weight:700; background:var(--accent-bg); }
#b2bv2 .bb-view__body { padding:14px; }

#b2bv2 .bb-recent {
  border:1.5px solid #e2e0cc; border-radius:var(--r-lg);
  background:#faf9ef; padding:13px 14px; margin-bottom:12px; }
#b2bv2 .bb-recent__grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:8px; }
#b2bv2 .bb-recent__card { border:1px solid #e2e0cc; border-radius:var(--r-md); background:var(--panel); padding:10px 11px; min-width:0; }

#b2bv2 .bb-cart-btn {
  display:inline-flex; align-items:center; gap:6px; padding:6px 12px;
  border:1px solid var(--line); border-radius:var(--r-pill); background:var(--panel);
  font:inherit; font-size:var(--fs-sm); font-weight:700; color:var(--slate);
  cursor:pointer; white-space:nowrap; }
#b2bv2 .bb-cart-btn.has-items { border-color:var(--accent-line); background:var(--accent-bg); color:var(--accent-fg); }
#b2bv2 .bb-cart-btn__n {
  font-size:var(--fs-xs); font-weight:800; border-radius:var(--r-pill);
  padding:1px 7px; background:var(--danger); color:#fff; font-variant-numeric:tabular-nums; }

/* 상품 사진 (썸네일) */
#b2bv2 .bb-thumb, .bb-modal-back .bb-thumb {
  width:38px; height:38px; border-radius:7px; object-fit:cover; background:var(--neutral-bg);
  border:1px solid var(--line-soft); display:block; cursor:zoom-in; }
#b2bv2 .bb-thumb--none { display:flex; align-items:center; justify-content:center;
  font-size:10.5px; color:var(--muted); font-weight:700; cursor:default; }

/* ---------- 모달 (body 직속 · z-index 재매핑) ---------- */
.bb-modal-back {
  position:fixed; inset:0; z-index:110; background:rgba(16,24,40,.44);
  display:flex; align-items:flex-start; justify-content:center;
  padding:40px 20px; overflow-y:auto; }
.bb-modal {
  width:660px; max-width:100%; max-height:calc(100vh - 80px);
  display:flex; flex-direction:column; background:var(--panel);
  border-radius:16px; box-shadow:0 30px 70px rgba(16,24,40,.32); overflow:hidden; }
.bb-modal--wide { width:720px; }
.bb-modal--xwide { width:880px; }
.bb-modal--narrow { width:560px; }
.bb-modal__head {
  flex:none; display:flex; align-items:flex-start; gap:11px;
  padding:16px 20px 14px; border-bottom:1px solid var(--line-soft); }
.bb-modal__ico {
  width:36px; height:36px; flex:none; border-radius:var(--r-md);
  font-size:15px; display:flex; align-items:center; justify-content:center; }
.bb-modal__body { flex:1; min-height:0; overflow-y:auto; padding:16px 20px 18px; }
.bb-modal__foot {
  flex:none; display:flex; align-items:center; gap:9px; flex-wrap:wrap;
  padding:13px 20px 16px; border-top:1px solid var(--line-soft); background:var(--panel-sub); }
.bb-modal__x {
  flex:none; width:30px; height:30px; border:0; border-radius:var(--r);
  background:none; font:inherit; font-size:15px; color:var(--muted); cursor:pointer; padding:0; }
.bb-modal__x:hover { background:#f4f3e8; }

/* 3단계 스텝 (리스트 만들기) */
.bb-wizard { display:flex; gap:6px; padding:11px 20px 0; flex-wrap:wrap; }
.bb-wizard__step {
  flex:1 1 140px; min-width:0; text-align:left; padding:9px 12px;
  border:1.5px solid var(--line); border-radius:var(--r-md); background:var(--panel);
  font:inherit; cursor:pointer; color:var(--text); }
.bb-wizard__step.is-active { border-color:var(--accent); background:var(--accent-bg-2); }

/* 폼 */
.bb-field { display:block; min-width:0; }
.bb-field__label { display:block; font-size:var(--fs-sm); font-weight:700; color:var(--slate); margin-bottom:5px; }
.bb-input {
  width:100%; padding:9px 11px; border:1.5px solid var(--line);
  border-radius:9px; outline:none; font:inherit; font-size:var(--fs-body); background:var(--panel); color:var(--text); }
.bb-input:focus { border-color:var(--accent-line); }
.bb-input--num { text-align:right; font-variant-numeric:tabular-nums; }
.bb-grid2 { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:11px; }
.bb-grid3 { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; }
.bb-grid4 { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:9px; }

/* 체크 카드 */
.bb-check {
  display:flex; gap:10px; align-items:flex-start; padding:10px 12px;
  border:1.5px solid var(--line-soft); border-radius:var(--r-md); background:var(--panel);
  font:inherit; cursor:pointer; text-align:left; color:var(--text); min-width:0; }
.bb-check.is-on { border-color:var(--accent-line); background:var(--accent-bg-2); }
.bb-check__box {
  width:17px; height:17px; flex:none; margin-top:1px;
  border:1.5px solid var(--faint); border-radius:5px; background:var(--panel);
  color:#fff; font-size:10.5px; font-weight:900;
  display:flex; align-items:center; justify-content:center; }
.bb-check.is-on .bb-check__box { border-color:var(--accent); background:var(--accent); }

/* 드롭존 · 서류 */
.bb-drop {
  display:flex; flex-direction:column; gap:8px; align-items:center; text-align:center;
  padding:14px; border:1.5px dashed var(--accent-line); border-radius:11px; background:var(--accent-bg-2); }
.bb-drop.is-ok { border-color:var(--ok-line); background:var(--ok-bg); }
.bb-doc {
  display:flex; align-items:center; gap:9px; padding:9px 11px;
  border:1px solid var(--line-soft); border-radius:9px; background:var(--panel); min-width:0; }
.bb-doc__ico {
  width:30px; height:30px; flex:none; border-radius:7px;
  font-size:10.5px; font-weight:800;
  display:flex; align-items:center; justify-content:center; }

/* 장바구니 패널 */
.bb-cart-back { position:fixed; inset:0; z-index:112; background:rgba(16,24,40,.44); display:flex; justify-content:flex-end; }
.bb-cart {
  width:420px; max-width:100%; height:100%;
  display:flex; flex-direction:column; background:var(--panel);
  box-shadow:-20px 0 60px rgba(16,24,40,.3); }
.bb-cart__item {
  display:flex; align-items:center; gap:10px; padding:11px 12px;
  border:1px solid var(--line-soft); border-radius:var(--r-md); background:var(--panel); min-width:0; }
.bb-qty { display:inline-flex; align-items:center; gap:4px; }
.bb-qty__btn {
  width:26px; height:26px; border:1px solid var(--line); border-radius:7px;
  background:var(--panel); font:inherit; font-size:12.5px; color:var(--slate); cursor:pointer; padding:0; }

/* 고객사 열 최소 폭 — 상호가 세로로 쪼개지지 않게 */
#b2bv2 .bb-table td:first-child { min-width:118px; }
#b2bv2 .bb-table td b { word-break:keep-all; }

/* 빈 상태 */
#b2bv2 .bb-empty, .bb-modal-back .bb-empty {
  padding:34px 16px; text-align:center; color:var(--muted); font-size:var(--fs-body); line-height:1.8; }