/* =============================================================
   분석 화면 조각(`AZ.an` — 화면 규칙 §5)의 칠. 블록 하나가 여기 있다.

   ⭐ 분석 다섯이 함께 쓸 자리이고 **첫 손님이 경영 관리다**(묶음 7) — 업무 화면인데
      블록의 골격은 분석과 같다(제목 · 부제 · 표 · 바닥 한 줄).
   색은 tokens.css 하나가 정한다 — 여기서 색을 짓지 않는다.
   ============================================================= */

.an-b {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 11px; margin-bottom: 14px; overflow: hidden;
}
.an-bh {
  padding: 11px 14px 9px; border-bottom: 1px solid var(--line);
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
}
.an-bt { font-size: 14px; font-weight: 700; display: inline-flex; align-items: center; gap: 4px; }
.an-bd { font-size: 12px; color: var(--muted); }
.an-bb { padding: 2px 0; }
/* 「무엇으로 셌나」 — 조회 화면이 스스로 밝히는 자리다(화면 규칙 §6). */
.an-bf {
  padding: 9px 14px; border-top: 1px solid var(--line);
  font-size: 11.5px; color: var(--faint); line-height: 1.7;
}

/* ---- 요약 타일 (화면 규칙 §5 · 다차원 화면 §2) ----
   좁은 화면에서는 **두 줄·세 줄로 접힌다** — 숫자가 잘리지 않는다. */
.an-tiles {
  display: grid; gap: 10px; margin-bottom: 14px;
  grid-template-columns: repeat(auto-fit, minmax(178px, 1fr));
}
.an-tile {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 11px; padding: 11px 13px 10px; min-width: 0;
}
.an-tk {
  font-size: 11.5px; color: var(--muted);
  display: flex; align-items: center; gap: 4px;
}
.an-tv { font-size: 20px; font-weight: 700; margin-top: 3px; letter-spacing: -0.3px; }
/* 적자는 붉다 — 첫눈에 보여야 한다(매출 전표와 같은 규칙). */
.an-tv.bad { color: var(--danger); }
.an-tf {
  margin-top: 4px; display: flex; align-items: center; gap: 6px;
  flex-wrap: wrap; min-height: 16px;
}
.an-ts { font-size: 11px; color: var(--faint); }
/* ⭐ 화살표는 **색과 모양을 함께** 쓴다 — 색만으로 방향을 말하지 않는다. */
.an-d { font-size: 11px; font-weight: 700; }
.an-d.up { color: var(--ok); }
.an-d.down { color: var(--danger); }

/* ---- 기간 고르개 (`AZ.period` · 화면 규칙 §5) ---- */
.pd { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.pd-l { font-size: 12px; color: var(--muted); }
.pd-w { font-size: 12px; color: var(--faint); }
.pd-t { font-size: 12px; color: var(--faint); }
.pd-d {
  height: 30px; padding: 0 8px; font-size: 12.5px;
  border: 1px solid var(--border); border-radius: 7px;
  background: var(--surface); color: var(--text);
}
.pd-m { height: 30px; }

/* ---- 화면 바탕과 도구 줄 (묶음 8 — 분석 넷이 붙으며) ---- */
.an { min-width: 0; }
.an-top { margin-bottom: 12px; }
.an-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.an-bar {
  padding: 8px 14px; border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.an-note { font-size: 11.5px; color: var(--faint); display: inline-flex; align-items: center; gap: 4px; }
.an-vs { font-size: 11.5px; color: var(--muted); font-weight: 700; }
/* 표를 세울 자리가 아닐 때 그 자리에 서는 안내 — **빈 표를 세우지 않는다.** */
.an-hint { padding: 12px 14px; font-size: 12px; color: var(--muted); line-height: 1.75; }
/* 그리드는 받은 자리를 비우고 시작한다 — 조각이 여럿인 몸에서는 제 그릇을 준다. */
.an-gbox { min-width: 0; }

/* ---- 표 밑의 합계 한 줄 ---- */
.an-sum {
  display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap;
  padding: 9px 14px; border-top: 1px solid var(--line); font-size: 12px;
}
.an-sk { color: var(--muted); }
.an-sv { color: var(--text); font-size: 13px; }

/* ---- 스파크라인 — 눈금이 없다. 옆 칸의 숫자가 값을 말한다 ---- */
.an-spark { display: block; overflow: visible; }
.an-spark polyline { fill: none; stroke: var(--accent); stroke-width: 1.4; }
.an-spark circle { fill: var(--accent); }
.an-none { color: var(--faint); }

/* ---- 가로 띠와 범례 (연령 구간) ---- */
.an-bandw { padding: 12px 14px 4px; }
.an-band { display: flex; height: 14px; border-radius: 7px; overflow: hidden; gap: 1px; }
.an-g1 { background: color-mix(in srgb, var(--accent) 30%, var(--surface)); }
.an-g2 { background: color-mix(in srgb, var(--accent) 55%, var(--surface)); }
.an-g3 { background: color-mix(in srgb, var(--danger) 45%, var(--surface)); }
.an-g4 { background: var(--danger); }
.an-leg {
  display: flex; gap: 14px; flex-wrap: wrap; margin-top: 8px;
  font-size: 11.5px; color: var(--muted);
}
.an-leg span { display: inline-flex; align-items: center; gap: 5px; }
.an-sw { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }

/* ---- 차입 이율 칸 (`AZ.fin.box` — 재고 분석과 거래처 분석이 같은 칸) ---- */
.an-rate { display: inline-flex; align-items: center; gap: 6px; }
.an-in {
  width: 78px; height: 30px; padding: 0 8px; font-size: 12.5px; text-align: right;
  border: 1px solid var(--border); border-radius: 7px;
  background: var(--surface); color: var(--text);
}
.an-unit { font-size: 12px; color: var(--muted); }

/* 검색창 있는 드롭다운 — 폭만 정한다(생김새는 dropdown.css 한 벌이다). */
.an-pickw { min-width: 150px; }