/* =============================================================
   이익 현황의 칠 — **계단 일곱 줄 하나뿐**이다(화면 §2).
   블록·타일·기간 고르개는 공용(`an.css`)이다.
   색은 tokens.css 하나가 정한다 — 여기서 색을 짓지 않는다.
   ============================================================= */

.an-lad { padding: 6px 14px 10px; }
/* 줄 하나 = [이름 (?)] [가로 막대] [금액] [비중/이익률 · ▲▼] */
.an-lr {
  display: grid; align-items: center; gap: 10px;
  grid-template-columns: 128px minmax(60px, 1fr) 140px 128px;
  padding: 7px 0; border-bottom: 1px solid var(--line);
}
.an-lr:last-child { border-bottom: 0; }
/* 매출액 · 매출총이익 · 최종이익 — 계단의 마디다. */
.an-lr.strong { font-weight: 700; }
.an-ln { font-size: 12.5px; color: var(--muted); display: inline-flex; align-items: center; gap: 4px; }
.an-lr.strong .an-ln { color: var(--text); }

/* 막대는 매출액을 100으로 한 크기 비교다 — 눈금이 없다: 옆의 금액이 값을 말한다. */
.an-lb {
  height: 10px; border-radius: 5px; min-width: 2px;
  background: color-mix(in srgb, var(--accent) 45%, var(--surface));
}
.an-lb.minus { background: color-mix(in srgb, var(--danger) 40%, var(--surface)); }
.an-lb.total { background: var(--accent); }

.an-lv { text-align: right; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.an-lr.strong .an-lv { font-size: 15px; }
/* 음수 금액은 붉다 — 적자 최종이익이 흑자로 읽히면 안 된다. */
.an-lv.bad { color: var(--danger); }
.an-lp {
  display: flex; align-items: center; justify-content: flex-end; gap: 6px;
  font-size: 11.5px; color: var(--faint); font-weight: 400;
}

/* 블록 밖의 흐린 한 줄 — 섞인 것과 추정한 것 */
.in-marks { display: block; margin: -4px 2px 12px; line-height: 1.7; }

@media (max-width: 720px) {
  .an-lr { grid-template-columns: 96px minmax(30px, 1fr) 108px 92px; gap: 6px; }
}