/* =============================================================
   재고 분석의 칠 — **넓이 그림**과 **단가 시뮬의 조각들**.
   블록·타일·이율 칸·고르는 칸은 공용(`an.css`)이다.
   색은 tokens.css 하나가 정한다 — 여기서 색을 짓지 않는다.
   ============================================================= */

/* ---- 재고자산 추이 그림 (화면 §4-2) ----
   ⛔ 값을 읽을 자리가 그림뿐이라 **짚으면 그 날의 값이 나온다** — 다차원의 막대와 규칙이 다르다. */
.an-fig { position: relative; padding: 10px 14px 4px; }
.an-fig svg { width: 100%; height: 120px; display: block; }
.an-fa { fill: color-mix(in srgb, var(--accent) 14%, transparent); stroke: none; }
.an-fl { fill: none; stroke: var(--accent); stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.an-fl.dash { stroke-dasharray: 4 3; stroke: var(--muted); }
/* 짚개와 점 — 처음에는 숨어 있고 손이 닿으면 선다. */
.an-fg2 { stroke: var(--btn-bd-s); stroke-width: 1; vector-effect: non-scaling-stroke; opacity: 0; }
.an-fdot { fill: var(--accent); opacity: 0; }
.an-fdot.dash { fill: var(--muted); }

/* 날짜 눈금 셋 — 손을 안 대도 「언제쯤」은 보여야 한다. */
.an-fx {
  display: flex; justify-content: space-between;
  font-size: 11px; color: var(--faint); margin-top: 2px;
}

/* 읽개 — 짚은 자리를 따라가되 **그림 밖으로 안 나간다**. */
.an-frd {
  position: absolute; top: 6px; transform: translateX(-50%);
  background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
  box-shadow: var(--shadow); padding: 6px 9px; pointer-events: none;
  font-size: 11.5px; line-height: 1.6; white-space: nowrap; z-index: 2;
}
.an-frd b { display: block; color: var(--text); }
.an-frd span { display: block; color: var(--muted); }
.an-frd.l { transform: translateX(0); }
.an-frd.r { transform: translateX(-100%); }

/* 그림 밑 캡션 — 선의 뜻 + 기말과 기간 첫날 대비 증감 */
.an-fcap { padding: 4px 14px 0; font-size: 11.5px; color: var(--faint); line-height: 1.7; }

/* ---- 일괄 조정 셋 (화면 §5-2) ----
   ⛔ 한 줄 세그먼트로 합치지 마라 — **줄이 나뉘어야 칸 옆의 단위가 실수를 없앤다.** */
.an-forms { padding: 10px 14px 4px; }
.an-fh { display: flex; align-items: center; gap: 4px; margin-bottom: 6px; }
.an-form { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.an-form .pd-l { width: 84px; display: inline-flex; align-items: center; gap: 4px; }

/* ---- 시뮬 요약 표 — 행 둘 × 열 넷 (화면 §5-4) ---- */
.an-simslot { min-width: 0; }
.an-simwrap { padding: 10px 14px 0; }
.an-sim { border-collapse: collapse; font-size: 12.5px; }
.an-sim th, .an-sim td { padding: 6px 12px; border-bottom: 1px solid var(--line); }
.an-sim th { color: var(--muted); font-weight: 600; font-size: 11.5px; }
.an-sim .n { text-align: right; font-variant-numeric: tabular-nums; }
/* 나빠지면 붉다. */
.an-sim td.bad { color: var(--danger); }