/* =====================================================================
   품목 목록

   창고 화면에서 가장 자주 보는 표다.
   그래서 "재고가 어떤 상태인가" 가 다른 무엇보다 먼저 읽혀야 한다.
   ===================================================================== */

.ilist { display: flex; flex-direction: column; height: calc(100vh - var(--h-header) - var(--sp-5) * 2); }
.ilist__bar { display: flex; align-items: center; gap: var(--sp-2); flex: 0 0 auto; }
.ilist__meta {
  display: flex; align-items: center; gap: 16px;
  padding: 11px 2px 9px;
  font-size: 12px; font-weight: 700; color: var(--ux-ink-500);
  flex: 0 0 auto;
}
.ilist__meta b { color: var(--ux-ink-900); font-weight: 850; font-variant-numeric: tabular-nums; }
.ilist__hint { display: flex; align-items: center; gap: 12px; font-size: 11.5px; font-weight: 650; }
.ilist__table { flex: 1 1 auto; min-height: 0; }
.ilist__more, .ilist__end {
  padding: 14px; text-align: center;
  font-size: 11.5px; font-weight: 650; color: var(--ux-ink-400);
}

/* 검색창 — 이 화면에서 가장 많이 쓰는 요소다. 크게. */
.bigsearch {
  display: flex; align-items: center; gap: 10px;
  height: 40px; padding: 0 12px;
  min-width: 340px;
  border: 1px solid var(--ux-line-strong);
  border-radius: var(--r-md);
  background: var(--ux-surface);
  color: var(--ux-ink-400);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.bigsearch:focus-within {
  border-color: var(--ux-blue);
  box-shadow: 0 0 0 3px var(--ux-blue-soft);
  color: var(--ux-blue);
}
.bigsearch input {
  flex: 1; min-width: 0;
  border: none; outline: none; background: none;
  font-family: var(--font); font-size: 14px; font-weight: 700; letter-spacing: -.015em;
  color: var(--ux-ink-900);
}
.bigsearch input::placeholder { color: var(--ux-ink-400); font-weight: 600; }
.bigsearch__x {
  border: none; background: none; padding: 3px;
  color: var(--ux-ink-400); cursor: pointer; display: grid; place-items: center;
}
.bigsearch__x:hover { color: var(--ux-ink-800); }

/* 필터 칩 — 선택은 검정. 파랑은 1차 동작에만 쓴다. */
.chips { display: flex; gap: 4px; }
.chip {
  height: 32px; padding: 0 13px;
  border: 1px solid var(--ux-line-strong);
  border-radius: 99px;
  background: var(--ux-surface);
  color: var(--ux-ink-600);
  font-family: var(--font); font-size: 12.5px; font-weight: 700;
  cursor: pointer; white-space: nowrap;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.chip:hover { border-color: var(--ux-ink-400); }
.chip.is-on {
  background: var(--ux-ink-950); border-color: var(--ux-ink-950); color: #fff;
}

/* 상태 점 — 표의 색이 무슨 뜻인지 알려준다. 색만 칠하고 두면 추측하게 된다. */
.dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 5px; }
.dot--out { background: var(--ux-ink-400); }
.dot--low { background: var(--ux-warn); }

/* ---------- 표 ---------- */

.tbl--items tbody td { height: 52px; }

.icell { display: flex; align-items: center; gap: 11px; min-width: 0; }
/* 제품 사진은 대개 흰 배경에서 찍는다.
   cover 로 중앙을 잘라내면 프레임 튜브만 남아 빈 상자처럼 보인다.
   contain 으로 전체를 담고 바탕을 살짝 어둡게 해서 윤곽이 드러나게 한다. */
.icell__img {
  width: 44px; height: 44px; flex: 0 0 auto;
  padding: 4px;
  border-radius: var(--r-sm);
  border: 1px solid var(--ux-line);
  background: var(--ux-canvas) center/contain no-repeat;
  display: grid; place-items: center; color: var(--ux-ink-400);
  overflow: hidden;
}
.icell__n {
  font-size: 13px; font-weight: 800; letter-spacing: -.02em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.icell__c { font-size: 11px; font-weight: 650; color: var(--ux-ink-400); }

/* 판매가가 주인공, 정가는 참고값. 둘을 같은 크기로 두면 시선이 반씩 갈린다. */
.price { font-size: 14px; font-weight: 850; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.price__list {
  font-size: 10.5px; font-weight: 650; color: var(--ux-ink-400);
  font-variant-numeric: tabular-nums; margin-top: 1px;
}

/* 재고 — 이 표에서 가장 먼저 읽혀야 하는 값 */
.stock {
  font-size: 15px; font-weight: 850;
  font-variant-numeric: tabular-nums; letter-spacing: -.02em;
  color: var(--ux-ink-950);
}
.stock--low { color: var(--ux-warn); }
.stock--out {
  font-size: 11.5px; font-weight: 750;
  color: var(--ux-ink-400);
  border: 1px solid var(--ux-line-strong);
  border-radius: var(--r-xs);
  padding: 2px 7px;
}
.stock__safe { font-size: 10px; font-weight: 650; color: var(--ux-ink-400); margin-top: 1px; }
.dim { color: var(--ux-ink-400); }

/* 품절 행은 물러나게, 부족 행은 표시를 남긴다.
   둘 다 빨갛게 칠하면 무엇이 급한지 구분이 안 된다. */
.tbl--items tbody tr.is-out td { background: var(--ux-surface-soft); }
.tbl--items tbody tr.is-out .icell__n { color: var(--ux-ink-600); }
.tbl--items tbody tr.is-low td:first-child { box-shadow: inset 3px 0 0 var(--ux-warn); }
.tbl--items tbody tr:hover td { background: var(--ux-blue-soft); }

/* ---------- 빈 상태 ----------
   "결과 없음" 으로 끝내지 않는다. 다음에 할 수 있는 일을 준다. */

.emptybox {
  padding: 56px 24px; text-align: center;
  color: var(--ux-ink-400);
}
.emptybox__t { margin-top: 12px; font-size: 15px; font-weight: 800; color: var(--ux-ink-800); }
.emptybox__s { margin-top: 6px; font-size: 12.5px; font-weight: 650; }

/* ---------- 스켈레톤 ----------
   스피너 하나만 돌리면 화면이 통째로 사라졌다가 나타난다.
   표 모양을 유지한 채 기다리면 눈이 자리를 잃지 않는다. */

.sk td { pointer-events: none; }
.sk__row { display: flex; align-items: center; gap: 11px; }
.sk__img { width: 40px; height: 40px; border-radius: var(--r-sm); flex: 0 0 auto; }
.sk__l { height: 11px; border-radius: 4px; margin: 3px 0; }
.sk__l--s { height: 9px; opacity: .7; }
.sk__img, .sk__l {
  background: linear-gradient(90deg, var(--ux-canvas) 25%, var(--ux-line) 37%, var(--ux-canvas) 63%);
  background-size: 400% 100%;
  animation: sk 1.3s ease infinite;
}
@keyframes sk { from { background-position: 100% 50% } to { background-position: 0 50% } }


/* =====================================================================
   목록 공통 (datalist)
   ===================================================================== */

.dl { display: flex; flex-direction: column; height: calc(100vh - var(--h-header) - var(--sp-5) * 2); }
/* ⚠ wrap 이 없어서 이력 화면(검색+날짜+칩 7개, 실측 1129px)이 1006px 칸에서
   잘렸다 — '실사' 칩이 화면 밖에 있어 있는 줄도 모른다. 못 들어가면 줄을 바꾼다. */
.dl__bar { display: flex; align-items: center; gap: var(--sp-2); row-gap: var(--sp-2); flex: 0 0 auto; flex-wrap: wrap; }
.dl__meta {
  display: flex; align-items: center; gap: 16px;
  padding: 11px 2px 9px;
  font-size: 12px; font-weight: 700; color: var(--ux-ink-500);
  flex: 0 0 auto;
}
.dl__meta b { color: var(--ux-ink-900); font-weight: 850; font-variant-numeric: tabular-nums; }
.dl__table { flex: 1 1 auto; min-height: 0; }

.tiny { font-size: 10.5px; }

/* 위치 코드는 라벨에 찍히는 값이다. 고정폭으로 두면 자리수가 흔들리지 않는다. */
.loccode {
  font-family: var(--font-num);
  font-size: 12px; font-weight: 800;
  background: var(--ux-canvas);
  border: 1px solid var(--ux-line);
  border-radius: var(--r-xs);
  padding: 2px 7px;
}

/* 이동 경로 — 화살표 하나로 방향이 읽힌다 */
.path { display: inline-flex; align-items: center; gap: 7px; }
.path__n { font-size: 12px; font-weight: 750; }
.path__a { color: var(--ux-ink-400); font-weight: 800; }
.path__a--in { color: var(--ux-success); }
.path__a--out { color: var(--ux-blue); }

.docno {
  font-family: var(--font-num);
  font-size: 12px; font-weight: 800; letter-spacing: -.01em;
}

.pcell { display: flex; align-items: center; gap: 7px; }
.pcell__n { font-size: 13px; font-weight: 800; letter-spacing: -.02em; }
.pcell__fav {
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--ux-blue-soft); color: var(--ux-blue);
  display: grid; place-items: center; flex: 0 0 auto;
}

.stock--neg { color: var(--ux-danger); }

/* 취소분은 원장에 남지만 시선을 뺏으면 안 된다. 물러나되 보이게. */
.tbl tbody tr.is-rev td { background: var(--ux-danger-soft); }
.tbl tbody tr.is-rev .icell__n { color: var(--ux-ink-600); }
/* 미확정 전표는 아직 재고에 반영되지 않았다는 뜻이다. 왼쪽에 표시를 남긴다. */
.tbl tbody tr.is-draft td:first-child { box-shadow: inset 3px 0 0 var(--ux-warn); }


/* 별은 채워야 '표시해둔 것' 으로 읽힌다. 선만 그리면 그냥 도형이다. */
.pcell__fav .ico { fill: currentColor; stroke-width: 1; }


/* =====================================================================
   다중 선택 · 일괄 작업
   ===================================================================== */

.selcol { width: 38px; text-align: center; }
.selcol input { width: 15px; height: 15px; cursor: pointer; accent-color: var(--ux-blue); }

/* 고른 행은 파랗게. 이 화면에서 파랑은 "고른 것" 하나만 뜻한다. */
.tbl tbody tr.is-picked td { background: var(--ux-blue-soft); }
.tbl tbody tr.is-picked td:first-child { box-shadow: inset 3px 0 0 var(--ux-blue); }
.tbl tbody tr.is-picked:hover td { background: #E3EAFF; }

/* 액션 바 — 선택이 없으면 아예 없다. 늘 떠 있으면 화면만 좁아진다. */
.actbar {
  display: flex; align-items: center; gap: 14px;
  background: var(--ux-ink-950); color: #fff;
  border-radius: var(--r-md);
  padding: 9px 12px 9px 16px;
  margin-bottom: var(--sp-2);
  box-shadow: var(--shadow-md);
  animation: actbar-in .14s cubic-bezier(.2,.9,.3,1.02);
}
@keyframes actbar-in { from { transform: translateY(-6px); opacity: 0 } to { transform: none; opacity: 1 } }
.actbar__n { font-size: 12.5px; font-weight: 700; color: var(--ux-ink-400); white-space: nowrap; }
.actbar__n b { color: #fff; font-size: 15px; font-weight: 850; font-variant-numeric: tabular-nums; }
.actbar__btns { display: flex; gap: 6px; flex: 1; flex-wrap: wrap; }
.actbar__b {
  display: inline-flex; align-items: center; gap: 6px;
  height: 30px; padding: 0 11px;
  border-radius: var(--r-sm); border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.08); color: #fff;
  font-family: var(--font); font-size: 12px; font-weight: 750;
  cursor: pointer; white-space: nowrap;
}
.actbar__b:hover { background: rgba(255,255,255,.16); }
.actbar__b.is-danger { color: #FFB4AD; border-color: rgba(255,180,173,.3); }
.actbar__x {
  width: 28px; height: 28px; flex: 0 0 auto;
  display: grid; place-items: center;
  border: none; background: none; color: var(--ux-ink-400);
  border-radius: var(--r-xs); cursor: pointer;
}
.actbar__x:hover { background: rgba(255,255,255,.12); color: #fff; }

/* 일괄 수정 폼 — 켠 것만 바뀐다는 게 눈에 보여야 한다 */
.bulkrow {
  display: grid; grid-template-columns: 160px 1fr;
  align-items: center; gap: 12px;
  padding: 11px 2px;
  border-bottom: 1px solid var(--ux-line);
}
.bulkrow:last-of-type { border-bottom: none; }
.bulkrow .input:disabled, .bulkrow .select:disabled {
  background: var(--ux-canvas); color: var(--ux-ink-400);
}


/* =====================================================================
   라벨 · QR

   이 화면이 답해야 하는 것: 무엇을 · 몇 장 · 어떤 모양으로.
   그래서 왼쪽은 "무엇을", 오른쪽은 "어떤 모양·몇 장" 으로 가른다.
   ===================================================================== */

.lab { display: flex; flex-direction: column; height: calc(100vh - var(--h-header) - var(--sp-5) * 2); }
.lab__bar { display: flex; align-items: center; gap: var(--sp-2); flex: 0 0 auto; margin-bottom: var(--sp-3); }
.lab__main {
  flex: 1 1 auto; min-height: 0;
  display: grid; grid-template-columns: minmax(0, 1fr) 360px;
  gap: var(--sp-3); align-items: start;
}
.lab__table { max-height: 100%; }
.lab__side { position: sticky; top: 0; }

/* 미리보기 — 여러 종류를 뽑을 때 뭐가 나오는지 보여준다.
   한 장만 보여주면 나머지가 어떻게 나올지 모른 채 200장을 뽑게 된다. */
.lab__preview {
  background: var(--ux-canvas);
  border-top: 1px solid var(--ux-line);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  max-height: 300px; overflow-y: auto;
}
.lab__more { font-size: 11.5px; font-weight: 700; color: var(--ux-ink-400); }

/* 몇 장이 나오는지 — 라벨지는 비싸다. 누르기 전에 알려준다. */
.lab__total {
  background: var(--ux-canvas);
  border-radius: var(--r-sm);
  padding: 12px 14px;
  text-align: center;
}
.lab__totalv {
  font-size: 30px; font-weight: 900; letter-spacing: -.05em;
  font-variant-numeric: tabular-nums; line-height: 1;
}
.lab__totalv span { font-size: 14px; font-weight: 750; color: var(--ux-ink-500); margin-left: 3px; }
.lab__totalv--none { color: var(--ux-ink-400); }
.lab__totals { font-size: 11px; font-weight: 650; color: var(--ux-ink-500); margin-top: 5px; }

.lab__tip {
  margin-top: 12px; padding-top: 10px;
  border-top: 1px solid var(--ux-line);
  font-size: 10.5px; font-weight: 650; color: var(--ux-ink-400); line-height: 1.6;
}

@media (max-width: 1180px) {
  .lab__main { grid-template-columns: 1fr; }
  .lab__side { position: static; }
}