/* =====================================================================
   품목 상세

   이 화면이 답해야 하는 순서:
     지금 몇 개 있나 → 어디에 있나 → 어떻게 움직였나 → 얼마짜리인가
   그래서 재고를 맨 앞 큰 숫자로 두고, 가격은 그 옆에 나란히 둔다.
   ===================================================================== */

.idet__top { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-3); }

.idet__hero {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: var(--sp-4);
  background: var(--ux-surface);
  border: 1px solid var(--ux-line);
  border-radius: var(--r-md);
  padding: var(--sp-4);
}
@media (max-width: 1100px) { .idet__hero { grid-template-columns: 1fr; } }

/* 제품 사진은 흰 배경이 많다. contain 으로 전체를 담고 바탕을 살짝 어둡게. */
.idet__img {
  width: 200px; height: 200px;
  padding: 14px;
  border-radius: var(--r-md);
  border: 1px solid var(--ux-line);
  background: var(--ux-canvas) center/contain no-repeat;
  display: grid; place-items: center; color: var(--ux-ink-400);
}

.idet__head { min-width: 0; }
.idet__title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.idet__title h1 {
  font-size: 26px; font-weight: 900; letter-spacing: -.045em; line-height: 1.15;
  margin: 0;
}
.idet__code { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 9px; }

.codechip {
  display: inline-flex; align-items: center; gap: 5px;
  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: 3px 8px;
}
.codechip--bc { color: var(--ux-blue); border-color: var(--ux-blue-line); background: var(--ux-blue-soft); }

/* 속성 — 이름과 값을 붙여 하나의 덩어리로 읽히게 */
.idet__attrs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.attr {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--ux-line);
  border-radius: var(--r-xs);
  padding: 4px 9px;
  background: var(--ux-surface-soft);
}
.attr__k { font-size: 10.5px; font-weight: 750; color: var(--ux-ink-500); }
.attr__v { font-size: 12.5px; font-weight: 800; letter-spacing: -.01em; }
/* 설정에 정의되지 않은 키. 이관 잔재일 수 있으니 눈에 띄게 표시한다. */
.attr--undef { border-style: dashed; border-color: var(--ux-warn); background: var(--ux-warn-soft); }
.attr--undef .attr__k { color: var(--ux-warn); }

/* KPI — 재고가 첫 번째다 */
.idet__kpis {
  grid-column: 1 / -1;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: var(--sp-3);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--ux-line);
}
.kpibig__k {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 750; color: var(--ux-ink-500);
}
.kpibig__v {
  font-size: 30px; font-weight: 900; letter-spacing: -.05em;
  font-variant-numeric: tabular-nums; margin-top: 4px; line-height: 1;
}
.kpibig__s { font-size: 10.5px; font-weight: 650; color: var(--ux-ink-400); margin-top: 5px; }
.kpibig--warn .kpibig__v { color: var(--ux-warn); }
.kpibig--warn .kpibig__k { color: var(--ux-warn); }
.kpibig--dim .kpibig__v { color: var(--ux-ink-400); font-size: 22px; }

.idet__grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: var(--sp-3);
  margin-top: var(--sp-3);
  align-items: start;
}

/* 비중 막대 — 어느 칸에 몰려 있는지 숫자보다 빨리 읽힌다 */
.mini { width: 46px; height: 5px; border-radius: 99px; background: var(--ux-canvas); margin-left: auto; }
.mini__f { height: 100%; border-radius: 99px; background: var(--ux-blue); }

/* ── 품목 상세의 이동 이력 ────────────────────────────────────
   표(일곱 열)를 줄로 바꿨다. 원장에서 사람이 묻는 건 셋이다:
   언제 · 어디로 · 몇 개. 나머지는 그 아래 한 줄로 내린다. */
.mvr {
  display: flex; align-items: center; gap: 14px;
  padding: 11px 18px;
  border-bottom: 1px solid var(--ux-line);
}
.mvr:last-child { border-bottom: none; }
.mvr:hover { background: var(--ux-surface-soft); }

.mvr__d { flex: 0 0 92px; }
.mvr__day {
  font-size: 12px; font-weight: 750; color: var(--ux-ink-600);
  font-variant-numeric: tabular-nums;
}
.mvr__time { font-size: 10.5px; font-weight: 650; color: var(--ux-ink-400); }

.mvr__mid { flex: 1; min-width: 0; }
.mvr__top {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.mvr__path {
  font-size: 13px; font-weight: 800; color: var(--ux-ink-900);
  letter-spacing: -.01em;
}
.mvr__sub {
  margin-top: 3px; display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  font-size: 11px; font-weight: 650; color: var(--ux-ink-400);
}
.mvr__memo { color: var(--ux-ink-500); }

/* 수량이 가장 크다. 창고에서 제일 먼저 읽는 값이다 */
.mvr__q {
  flex: 0 0 auto; min-width: 68px; text-align: right;
  font-size: 17px; font-weight: 850; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  color: var(--ux-ink-950);
}
/* 방향은 색으로. 들어온 것과 나간 것을 숫자만 보고 가르게 하지 않는다 */
.mvr.is-in  .mvr__q { color: var(--ux-blue); }
.mvr.is-out .mvr__q { color: var(--ux-danger); }
/* 취소된 줄은 물러난다 — 배경을 칠하면 목록 전체가 분홍이 된다 */
.mvr.is-void { opacity: .5; }
.mvr.is-void .mvr__q { color: var(--ux-ink-400); text-decoration: line-through; }