/* =====================================================================
   대시보드 · 차트

   색 배정 근거 (dataviz 검증 통과, 라이트/다크 양쪽):
     입고 #17815F · 출고 #2145FF
     색각 분리 ΔE 27.3(protan) / 31.0(normal) — 기준치 8 / 15 를 크게 상회
   그리고 위아래 방향이 1차 인코딩이라 색은 보조 수단이다.
   색을 못 봐도 "위로 뻗으면 입고"는 읽힌다.
   ===================================================================== */

/* ---------- 히어로 ---------- */
/* 대시보드가 이끄는 숫자 하나. 나머지는 전부 이 숫자의 맥락이다. */

.hero {
  background: var(--ux-ink-950);
  color: #fff;
  border-radius: var(--r-lg);
  padding: 26px 28px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 176px;
}
/* 광원 하나. 여러 겹 그라데이션은 지저분해진다. */
.hero::after {
  content: '';
  position: absolute;
  right: -120px; top: -120px;
  width: 380px; height: 380px; border-radius: 50%;
  background: radial-gradient(circle, rgba(33, 69, 255, .5), transparent 66%);
  filter: blur(10px);
  pointer-events: none;
}
.hero__label {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: 7px;
  font-size: 11.5px; font-weight: 750; letter-spacing: .02em;
  color: var(--ux-ink-400);
}
.hero__value {
  position: relative; z-index: 1;
  font-size: clamp(46px, 5.4vw, 68px);
  font-weight: 900; line-height: .96; letter-spacing: -.055em;
  font-variant-numeric: tabular-nums;
  margin: 10px 0 2px;
}
.hero__unit { font-size: .38em; font-weight: 800; color: var(--ux-ink-400); margin-left: 8px; letter-spacing: -.02em; }
.hero__foot {
  position: relative; z-index: 1;
  display: flex; gap: 22px; flex-wrap: wrap;
  border-top: 1px solid rgba(255,255,255,.1);
  padding-top: 13px; margin-top: 14px;
}
.hero__cell__k { font-size: 10.5px; font-weight: 700; color: var(--ux-ink-500); }
.hero__cell__v { font-size: 16px; font-weight: 850; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }

/* ---------- KPI 타일 ---------- */

.kpi {
  background: var(--ux-surface);
  border: 1px solid var(--ux-line);
  border-radius: var(--r-md);
  padding: 14px 16px;
  display: flex; flex-direction: column; justify-content: center;
  min-height: 0;
}
.kpi__k {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 750; color: var(--ux-ink-500);
}
.kpi__v {
  font-size: 24px; font-weight: 850; letter-spacing: -.045em;
  font-variant-numeric: tabular-nums; margin-top: 3px;
}
.kpi__s { font-size: 10.5px; font-weight: 650; color: var(--ux-ink-400); }
.kpi--danger { border-color: #F3C7C3; background: var(--ux-danger-soft); }
.kpi--danger .kpi__v, .kpi--danger .kpi__k { color: var(--ux-danger); }
.kpi--ok .kpi__v { color: var(--ux-success); }

/* ---------- 차트 공통 ---------- */

.chart { position: relative; }
.chart svg { display: block; width: 100%; overflow: visible; }

/* 격자와 축은 물러나 있어야 한다. 데이터보다 눈에 띄면 안 된다. */
.chart .grid line { stroke: var(--ux-line); stroke-width: 1; }
.chart .zero  line { stroke: var(--ux-line-strong); stroke-width: 1; }
.chart .axis text {
  font-family: var(--font); font-size: 10px; font-weight: 700;
  fill: var(--ux-ink-400);
}

/* 막대: 얇게, 기준선 반대쪽 끝만 둥글게, 서로 2px 간격 */
.chart .bar { transition: opacity var(--t-fast); }
.chart .col:hover .bar { opacity: 1; }
.chart.is-hovering .bar { opacity: .32; }
.chart.is-hovering .col.is-hot .bar { opacity: 1; }
.chart .col rect.hit { fill: transparent; cursor: pointer; }
.chart .col.is-hot rect.hit { fill: var(--ux-blue-soft); opacity: .55; }

.legend { display: flex; align-items: center; gap: 14px; }
.legend__item { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 750; color: var(--ux-ink-600); }
.legend__swatch { width: 10px; height: 10px; border-radius: 3px; flex: 0 0 auto; }

/* 툴팁: 차트는 정적 그림이 아니다. 값을 알고 싶으면 짚을 수 있어야 한다. */
.tip {
  position: absolute; z-index: var(--z-drop);
  background: var(--ux-ink-950); color: #fff;
  border-radius: var(--r-sm); padding: 8px 11px;
  font-size: 11.5px; font-weight: 700; line-height: 1.5;
  pointer-events: none; white-space: nowrap;
  box-shadow: var(--shadow-md);
  transform: translate(-50%, -100%);
  opacity: 0; transition: opacity var(--t-fast);
}
.tip.is-on { opacity: 1; }
.tip__d { color: var(--ux-ink-400); font-size: 10.5px; font-weight: 650; margin-bottom: 3px; }
.tip__r { display: flex; align-items: center; gap: 7px; }
.tip__r b { margin-left: auto; font-variant-numeric: tabular-nums; }

/* ---------- 가로 막대(창고별) ---------- */
/* 크기 비교가 목적이므로 단일 색상. 창고마다 색을 다르게 주면
   "색이 뭘 뜻하지?"를 묻게 만든다. 여기서 색은 아무 뜻도 없다. */

.hbars { display: flex; flex-direction: column; gap: 11px; }
.hbar__top { display: flex; align-items: baseline; gap: 8px; margin-bottom: 5px; }
.hbar__name { font-size: 12.5px; font-weight: 750; }
.hbar__meta { font-size: 10.5px; font-weight: 650; color: var(--ux-ink-400); }
.hbar__val  { margin-left: auto; font-size: 13px; font-weight: 850; font-variant-numeric: tabular-nums; }
.hbar__track {
  height: 8px; border-radius: 99px;
  background: var(--ux-canvas);
  overflow: hidden;
}
.hbar__fill { height: 100%; border-radius: 99px; background: var(--ux-blue); }
.hbar__fill--zero { background: var(--ux-line-strong); }

/* ---------- 주의 목록 ---------- */

.alertbox {
  border: 1px solid #F3C7C3;
  background: var(--ux-danger-soft);
  border-radius: var(--r-md);
  overflow: hidden;
}
.alertbox__head {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 16px;
  font-size: 12.5px; font-weight: 800; color: var(--ux-danger);
  border-bottom: 1px solid #F3C7C3;
}
.alertbox__note { margin-left: auto; font-size: 10.5px; font-weight: 650; color: #A03028; }
.alertbox .tbl tbody td { border-bottom-color: #F3C7C3; background: transparent; }
.alertbox .tbl tbody tr:hover td { background: rgba(217,45,32,.05); }

/* ---------- 대시보드 격자 ---------- */

.dash {
  display: grid;
  gap: var(--sp-3);
  grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr);
}
.dash__kpis { display: grid; grid-template-rows: repeat(3, 1fr); gap: var(--sp-3); }
.dash__wide { grid-column: 1 / -1; }
.dash__split { grid-column: 1 / -1; display: grid; gap: var(--sp-3); grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); }

@media (max-width: 1180px) {
  .dash, .dash__split { grid-template-columns: 1fr; }
  .dash__kpis { grid-template-rows: none; grid-template-columns: repeat(3, 1fr); }
}

.chart__note {
  margin-top: 10px; padding-top: 9px; border-top: 1px dashed var(--ux-line);
  font-size: 11px; font-weight: 650; color: var(--ux-ink-400); line-height: 1.5;
}
.chart__note b { color: var(--ux-ink-700); font-weight: 800; font-variant-numeric: tabular-nums; }