feat(ui-kit): 묶음 부품 열 — 카드 · 접이 카드 · 빈 상태 · 알림 · 띠 알림 · 숫자 카드 · 값 목록 · 진행 막대 · 작은 그래프 · 범례 (PLAN 552-3)

- 새 부품 파일: ui_template_card · empty · banner · stat · kv · toast · flow_legend(.ts) · 진행 막대 · 막대 · 원 그래프 덧붙임
- createCard · showToast · 로딩 가림막은 부품 파일로 옮기고 본체(ui_template_elements)가 다시 내보냄 — 부름 꼴 그대로
- 대시보드 emptyState = 빈 상태 부품을 씀(한 벌) · 선 카드 그림자 0 · 가림막 옛 보라 → --color-scrim
- 부품 모음 화면 견본(밝음 · 어두움 · 상태) · 지킴 시험 test_552_3_* 열
- 전후 촬영: B01 여덟 화면 자리 · 화소 같음(실시간 CPU 값만 다름) · A01 · B08 카드 그림자만 다름

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

ui_template/ui_template_elements_chart.css

@@ -0,0 +1,32 @@
+/* 작은 그래프(552-3) — 막대 · 원 · 대시보드 `.b01-home__bars` · `__donut` 꼴 · 선 그래프 꼴은 ui_template_elements_styles.ts */
+.ui-chart--mini .ui-chart__empty {
+  padding: var(--spacing-16) 0;
+}
+.ui-mini-bars {
+  display: block;
+  max-width: 400px;
+}
+.ui-mini-bars text {
+  font-size: 10px;
+  fill: var(--color-text);
+}
+.ui-mini-donut-row {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-16);
+}
+.ui-mini-donut {
+  flex: none;
+}
+.ui-mini-donut circle {
+  fill: none;
+  stroke-width: 6;
+}
+.ui-mini-donut .ui-mini-donut__track {
+  stroke: var(--color-hover);
+}
+.ui-mini-donut text {
+  font-size: 8px;
+  font-weight: 700;
+  fill: var(--color-text);
+}