diff --git a/ui_template/ui_template_ui_kit.css b/ui_template/ui_template_ui_kit.css
index 263dac4e1..53d60352c 100644
--- a/ui_template/ui_template_ui_kit.css
+++ b/ui_template/ui_template_ui_kit.css
@@ -18,7 +18,8 @@
 
 .ui-kit__frame {
   display: block;
-  width: 100%;
+  box-sizing: content-box; /* 높이 = 문서 높이(테두리 밖) — 안 스크롤 막대 없음 */
+  width: calc(100% - 2px);
   min-height: 240px;
   border: 1px solid var(--color-border);
   border-radius: var(--radius-cards, 10px);
diff --git a/ui_template/ui_template_ui_kit_parts.ts b/ui_template/ui_template_ui_kit_parts.ts
index 1c827737c..4f8323ba5 100644
--- a/ui_template/ui_template_ui_kit_parts.ts
+++ b/ui_template/ui_template_ui_kit_parts.ts
@@ -6,6 +6,7 @@
  *   자리   = `ui_template/` 한 곳 · 부품 하나 = `ui_template_<이름>.ts` (+ 같은 이름 `.css`) · 700 줄 넘으면 `_<갈래>` 로 나눔
  *   이름   = 만들기 `create<부품>(opts)` → 요소 또는 { root, … } 손잡이 · 클래스 `ui-<부품>` · 속 `ui-<부품>__<조각>` · 꼴 `ui-<부품>--<꼴>`
  *   크기   = `data-size="18|20|22|24|28|32|36|42"`(높이 px · 여덟 단) — 단추 · 아이콘 단추 · 입력 · 고르기 · 분할 고르기 · 탭 같은 값
+ *            옛 `size: "sm"` = 18 · `compact` = 32 · 지금 높이는 가까운 단(같은 거리면 표 · 도구 = 작은 단 · 주 동작 · 양식 = 큰 단)
  *   상태   = 마우스 `:hover` · 눌림 `:active` · 고름 `.is-active` / `aria-selected` · 막힘 `disabled` / `aria-disabled` · 오류 `.is-error` / `aria-invalid`
  *            → CSS 는 `:is(:hover, [data-state="hover"])` · `:is(:active, [data-state="active"])` 로 써서 이 화면이 상태를 굳혀 보임
  *   색     = 공통 값(`--color-*` · `--radius-*` · `--shadow-*`)만 · 날 색 · `--b01-*` · 그림 값(`--draw-*`) 금지
@@ -109,24 +110,31 @@ export const KIT_PARTS: KitPart[] = [
   { key: "tooltip", name: "툴팁", group: "basic", kinds: "마우스 글 · 값 풍선", file: "ui_template_hover_info.ts" },
   { key: "icon", name: "아이콘", group: "basic", kinds: "Tabler 선 · 16 · 18 · 24 · 32", file: "ui_template_icons.ts", legacy: true,
     demo: (s) => (s === "default" ? row(icon("home"), icon("folder"), icon("route"), icon("search"), icon("bell"), icon("users")) : null) },
+  { key: "slider", name: "슬라이더", group: "basic", kinds: "값 하나 · 이름 · 값 글", file: "ui_template_input.ts" },
+  { key: "text", name: "보조 글 · 안내 줄", group: "basic", kinds: "흐린 글 · 안내 · 상태(오류 · 경고) · 칸 오류", file: "ui_template_text.ts" },
   // ── 552-3 묶음 ─────────────────────────────────────────────
   { key: "card", name: "카드", group: "compound", kinds: "선 카드 · 머리 카드 · 고를 수 있는 카드", file: "ui_template_card.ts" },
+  { key: "float-panel", name: "떠 있는 판", group: "compound", kinds: "그림 위 판 · 끌기 머리 · 닫기 · 팝오버", file: "ui_template_float_panel.ts" },
   { key: "collapsible", name: "접이 카드", group: "compound", kinds: "패널 카드 · 구역 · 캐럿 셰브런", file: "ui_template_collapsible.ts" },
   { key: "panel-head", name: "패널 머리", group: "compound", kinds: "제목 · 부제 · 오른쪽 단추", file: "ui_template_panel_head.ts" },
   { key: "table", name: "표", group: "compound", kinds: "데이터표(28 · 밀도) · 일반표(40) · ⋯ 칸 · 한글 배지 · 빈 줄", file: "ui_template_table.ts", legacy: true,
     demo: (s) => (s === "default" ? dataTable([{ label: "이름" }, { label: "상태", width: "90px" }, { label: "연장", width: "80px", align: "end" }, { label: "", width: "44px" }], [["임도 1 노선", badge("진행 중", "accent"), "1,080 m", rowMenu([{ label: "열기", onClick: noop }])], ["임도 2 노선", badge("완료", "success"), "640 m", rowMenu([{ label: "열기", onClick: noop }])]]) : null) },
+  { key: "list-row", name: "목록 줄", group: "compound", kinds: "고르는 줄 · 두 줄 · 끌기 손잡이 · 색 띠", file: "ui_template_list_row.ts" },
   { key: "row-menu", name: "⋯ · 오른쪽 메뉴", group: "compound", kinds: "줄 끝 ⋯ · 오른쪽 누름 메뉴 · 위험 항목", file: "ui_template_context_menu.ts", legacy: true,
     demo: (s) => (s === "default" ? rowMenu([{ label: "이름 바꾸기", onClick: noop }, { label: "삭제", danger: true, onClick: noop }]) : null) },
   { key: "empty", name: "빈 상태", group: "compound", kinds: "선 아이콘 · 한 줄 · 주 단추 · 사용법", file: "ui_template_empty.ts", legacy: true,
     demo: (s) => (s === "default" ? emptyState({ icon: "folder", text: "아직 프로젝트가 없음" }) : null) },
   { key: "modal", name: "모달 · 확인창", group: "compound", kinds: "보통 · 넓음 · 확인 · 위험 확인", file: "ui_template_modal.ts" },
   { key: "drawer", name: "오른쪽 서랍", group: "compound", kinds: "상세 · 설정", file: "ui_template_side_panels.ts" },
-  { key: "toast", name: "알림", group: "compound", kinds: "토스트 4꼴 · 띠 알림 · 로딩 가림막", file: "ui_template_toast.ts" },
+  { key: "toast", name: "알림", group: "compound", kinds: "토스트 4꼴 · 로딩 가림막", file: "ui_template_toast.ts" },
+  { key: "banner", name: "띠 알림", group: "compound", kinds: "왼쪽 띠 · 정보 · 경고 · 위험 · 펼침 · 안 단추", file: "ui_template_banner.ts" },
   { key: "toolbar", name: "도구줄", group: "compound", kinds: "단추 묶음 · 나눔선 · 찾기 · 고르기", file: "ui_template_toolbar.ts" },
   { key: "steps", name: "단계 줄", group: "compound", kinds: "가로 막대 · 세로 목록 · compact", file: "ui_template_workflow_layout.ts" },
   { key: "stat", name: "숫자 카드", group: "compound", kinds: "값 · 단위 · 변화", file: "ui_template_stat.ts" },
+  { key: "kv", name: "값 목록", group: "compound", kinds: "이름 : 값 줄 · 판정(✓ ✗) · 큰 값", file: "ui_template_kv.ts" },
   { key: "progress", name: "진행 막대", group: "compound", kinds: "막대 · 원", file: "ui_template_progress.ts" },
   { key: "mini-chart", name: "작은 그래프", group: "compound", kinds: "막대 · 원 · 선", file: "ui_template_elements_chart.ts" },
+  { key: "legend", name: "범례", group: "compound", kinds: "색 칩 · 선 · 점선 · 색 띠 눈금", file: "ui_template_flow_legend.ts" },
   { key: "setting-row", name: "설정 줄", group: "compound", kinds: "제목 · 설명 · 오른쪽 값 · 조작", file: "ui_template_setting_row.ts", legacy: true,
     demo: (s) => (s === "default" ? settingCard([settingRow("회사 이름", "보고서 머리에 들어감", valueText("산림설계")), settingRow("단위", "", valueText(null))]) : null) },
   { key: "drop", name: "파일 놓기 칸", group: "compound", kinds: "끌어 놓기 · 고르기 단추 · 진행", file: "ui_template_drop.ts" },