refactor(B04): 전처리 화면 자체 변종을 부품 상자 부품으로 — 켜기 칩 · 분할 고르기 · 고르기 · 슬라이더 · 값 목록 · 카드 · 도구줄 (PLAN 553-1)

- 지도 층 단추 열다섯 안팎 · 표시 토글 셋 · 라이다 겹침 = 켜기 칩(층 색 점) · 도엽 보간 방식 = 분할 고르기 · 도구줄 부품
- 고르기 38 → 고르기 부품 · 점 크기 · 밀도 = 슬라이더 · 입력 파일 정보 = 값 목록 · 초기화 = 위험 고스트 · 묶음 상자 = 카드 + 패널 머리
- 죽은 CSS 열여섯 걷음 · 날 색 → 공통 값 · 가이드 촬영 선택자 · 지킴 시험 test_553_1_pages 늘림

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

B04_PreProcess/B04_PreProcess_UI_Group.ts

@@ -0,0 +1,20 @@
+/* =============================================================================
+ * B04_PreProcess_UI_Group.ts
+ * 묶음 상자 — 카드 부품 + 패널 머리 부품을 한 번에 조립한다(왼쪽 패널 넷 · 도엽 서피스 칸).
+ * ========================================================================== */
+
+import { createPanelHead } from "@ui/ui_template_panel_head";
+
+/** 제목이 달린 카드. `className` 은 칸 안 배치(기본 = 세로 쌓임) 자리 이름. */
+export function buildSurfaceGroup(
+  title: string,
+  children: HTMLElement[],
+  className = "b04-surface__group",
+): HTMLElement {
+  const root = document.createElement("section");
+  // ui-sidebar-section: 사이드 컨테이너 공통 외곽선(진하게, 2026-08-05 사용자 지시).
+  root.className = `ui-card ui-sidebar-section ${className}`;
+  root.dataset.pad = "16";
+  root.append(createPanelHead({ title }).root, ...children);
+  return root;
+}