/* =====================================================================
   창고 · 위치 트리

   트리는 "무엇이 무엇 안에 있는가" 를 보여주는 것이 전부다.
   들여쓰기만으로는 부족하다 — 눈이 세로선을 따라가야 계층이 읽힌다.
   ===================================================================== */

.loc { display: flex; flex-direction: column; height: calc(100vh - var(--h-header) - var(--sp-5) * 2); }
.loc__bar { display: flex; align-items: center; gap: var(--sp-2); flex: 0 0 auto; }
.loc__table { flex: 1 1 auto; min-height: 0; margin-top: var(--sp-3); }

/* ---------- 창고 요약 카드 ---------- */

.whcards {
  /* 1fr 로 두면 창고가 하나일 때 카드가 화면 끝까지 늘어난다 —
     숫자 하나가 1200px 를 차지하면 오히려 안 읽힌다.
     최대 폭을 정하고 왼쪽부터 채운다. */
  display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 230px));
  justify-content: start;
  gap: var(--sp-2); margin-top: var(--sp-3);
  flex: 0 0 auto;
}
.whcard {
  background: var(--ux-surface);
  border: 1px solid var(--ux-line);
  border-radius: var(--r-md);
  padding: 12px 14px;
}
.whcard--alt { background: var(--ux-surface-soft); }

/* 비어 있는 창고 — 알려주기는 하되 자리를 뺏지는 않는다 */
.whempty {
  display: flex; align-items: center; gap: 7px;
  margin-top: var(--sp-2); padding: 9px 13px;
  background: var(--ux-surface-soft); border: 1px solid var(--ux-line);
  border-radius: var(--r-md);
  font-size: 11.5px; font-weight: 700; color: var(--ux-ink-500);
}
.whempty b { font-weight: 750; color: var(--ux-ink-600); }
.whcard__n {
  display: flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 750; color: var(--ux-ink-600);
}
.whcard__q {
  font-size: 22px; font-weight: 850; letter-spacing: -.04em;
  font-variant-numeric: tabular-nums; margin-top: 3px;
}
.whcard--alt .whcard__q { color: var(--ux-ink-400); }
.whcard__s { font-size: 10.5px; font-weight: 650; color: var(--ux-ink-400); }

/* ---------- 트리 ---------- */

.tbl--loc tbody td { height: 40px; }

/* 창고 구분줄 — 표 안에서 섹션을 나눈다 */
.locwh td {
  background: var(--ux-ink-950) !important;
  color: #fff;
  font-size: 12px; font-weight: 750;
  height: 34px !important;
}
.locwh .muted { color: var(--ux-ink-500); margin-left: 6px; }
.locwh .badge { background: rgba(255,255,255,.14); color: #fff; border-color: transparent; margin-left: 6px; }

.locname { display: flex; align-items: center; gap: 7px; position: relative; }

/* 계층 세로선을 넣어봤지만 들여쓰기(padding-left)와 어긋나
   엉뚱한 자리에 그어졌다. 잘못된 위치의 안내선은 없느니만 못하다.
   여기서는 들여쓰기 + 접힘 화살표 + 가지 배경색으로 계층을 읽힌다. */

.locname__tw {
  width: 18px; height: 18px; flex: 0 0 auto;
  display: grid; place-items: center;
  border: none; background: none; cursor: pointer;
  color: var(--ux-ink-500);
  border-radius: 4px;
  transition: transform var(--t-fast), background var(--t-fast);
}
.locname__tw:hover { background: var(--ux-line); color: var(--ux-ink-900); }
.locname__tw.is-open { transform: rotate(90deg); }
.locname__leaf { width: 18px; flex: 0 0 auto; }

.locname__code { font-size: 12.5px; font-weight: 800; letter-spacing: -.01em; }
.locname__label { font-size: 11.5px; font-weight: 650; color: var(--ux-ink-500); }
.locname__kids {
  font-size: 10px; font-weight: 800;
  background: var(--ux-canvas); color: var(--ux-ink-500);
  border-radius: 99px; padding: 1px 6px; margin-left: 2px;
}

/* 가지(합계)와 잎(실제 칸)을 다르게 그린다.
   59,887(구역 합계)과 344(한 칸)가 같은 무게면 무엇이 실제 재고인지 헷갈린다. */
.locrow.is-branch .locname__code { color: var(--ux-ink-700); }
.locrow.is-branch td { background: var(--ux-surface-soft); }

.locqty { font-size: 13.5px; font-weight: 850; font-variant-numeric: tabular-nums; }
.locqty--roll { font-weight: 700; color: var(--ux-ink-500); font-size: 12.5px; }
.locqty__note { font-size: 9.5px; font-weight: 650; color: var(--ux-ink-400); }
.locqty--empty {
  font-size: 11px; font-weight: 700; color: var(--ux-ink-400);
  border: 1px dashed var(--ux-line-strong); border-radius: var(--r-xs);
  padding: 2px 7px;
}

/* 빈 칸은 물러나되 존재는 보인다.
   창고에서 "어디가 비었나" 는 물건을 넣을 때 가장 먼저 묻는 것이다. */
.locrow.is-empty .locname__code { color: var(--ux-ink-400); }

.tbl--loc tbody tr:not(.locwh):hover td { background: var(--ux-blue-soft); cursor: pointer; }
.tbl--loc .dim { color: var(--ux-ink-400); }