/* =============================================================
   다차원 분석의 칠. **표와 타일은 공용**(`grid.css`·`an.css`)이고 여기 있는 것은
   축 줄과 **일자·월 축의 막대 그림** 둘뿐이다.
   색은 tokens.css 하나가 정한다 — 여기서 색을 짓지 않는다.
   ============================================================= */

.pf { min-width: 0; }
/* 표는 공용 그리드 한 판이다 — 여기서는 자리만 준다(폭이 넘치면 표가 스스로 흐른다). */
.pf-grid { min-width: 0; }

.pf-top { margin-bottom: 12px; }
.pf-note { font-size: 11.5px; color: var(--faint); display: inline-flex; align-items: center; gap: 4px; }

.pf-axis { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.pf-al { font-size: 12px; color: var(--muted); }
/* 재고가 안 붙는 기준에서 서는 한 줄 — **왜 비었는지 말하는 자리**다(화면 §3). */
.pf-why { font-size: 11.5px; color: var(--faint); display: inline-flex; align-items: center; gap: 4px; }

/* ---- 막대 그림 — 일자·월 축에만 (화면 §6) ----
   눈금이 없다: 바로 밑의 표가 숫자를 이미 말한다. 마디가 많으면 가로로 흐른다. */
.pf-chart {
  display: flex; align-items: stretch; gap: 3px; height: 96px;
  overflow-x: auto; padding: 4px 2px 6px; margin-bottom: 10px;
}
.pf-bar { flex: 0 0 auto; width: 18px; max-width: 40px; display: flex; flex-direction: column; }
/* 위 칸과 아래 칸이 0 선을 나눠 갖는다 — **적자는 금 밑으로 내려간다.** */
.pf-half { flex: 1 1 50%; display: flex; }
.pf-up { align-items: flex-end; border-bottom: 1px solid var(--line); }
.pf-down { align-items: flex-start; }
.pf-fill { width: 100%; background: var(--accent); border-radius: 3px 3px 0 0; }
.pf-fill.pf-minus { background: var(--danger); border-radius: 0 0 3px 3px; }

/* ---- 펼친 줄 — 셈의 근거 (화면 §5) ---- */
.pf-d { padding: 9px 12px; font-size: 12px; line-height: 1.85; }
.pf-dl { color: var(--text); }
.pf-dl.pf-none { color: var(--faint); font-size: 11.5px; }