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_FlowStrength.ts

@@ -12,6 +12,7 @@
 
 import { currentLanguageIndex, ui_locales } from "@ui/ui_template_locale";
 import { themeColor } from "@ui/ui_template_palette";
+import { createLayerToggle } from "./B04_PreProcess_UI_LayerToggle";
 import { fetchRoadInflow, type VWorldMeta } from "./B04_PreProcess_Api_Fetch";
 import {
   haloColor,
@@ -84,15 +85,19 @@ function formatArea(areaM2: number): string {
 }
 
 export function createFlowStrengthOverlay(onChange: () => void): FlowStrengthOverlay {
-  const button = document.createElement("button");
-  button.type = "button";
   // 기본 켜짐(2026-08-01 사용자 지시) — 분석 결과가 들어오면 바로 보이게 한다.
   let shown = true;
-  button.className = "b04-map__layer-button b04-map__layer-button--gis is-active";
-  button.textContent = L("B04_Surface_Flow_Strength");
-  button.style.setProperty("--b04-layer-color", themeColor("--map-flow-ramp-5", "#dc2626"));
-  button.setAttribute("aria-pressed", "true");
-  button.title = L("B04_Surface_Flow_Strength_Tip");
+  const button = createLayerToggle({
+    label: L("B04_Surface_Flow_Strength"),
+    color: themeColor("--map-flow-ramp-5", "#dc2626"),
+    on: true,
+    title: L("B04_Surface_Flow_Strength_Tip"),
+    onChange: (on) => {
+      shown = on;
+      syncLegend();
+      onChange();
+    },
+  }).root;
   const legend = createFlowLegend();
 
   /** 범례는 강도 색칠이 켜져 있고 값이 있을 때만 띄운다. */
@@ -100,38 +105,26 @@ export function createFlowStrengthOverlay(onChange: () => void): FlowStrengthOve
     legend.update(maxStrength, shown);
   }
 
-  button.addEventListener("click", () => {
-    shown = !shown;
-    button.classList.toggle("is-active", shown);
-    button.setAttribute("aria-pressed", String(shown));
-    syncLegend();
-    onChange();
-  });
-
   // 유입 집중점 마커는 관 매설 마커와 같은 계획선 위에 찍혀 서로 가린다. 그래서 강도 색칠과
   // 떼어 내 별도 토글을 두고, 기본은 꺼 둔다(2026-08-01 사용자 지시).
   let markersShown = false;
-  const markerButton = document.createElement("button");
-  markerButton.type = "button";
-  markerButton.className = "b04-map__layer-button b04-map__layer-button--gis";
-  markerButton.textContent = L("B04_Surface_Flow_Hotspots");
-  markerButton.style.setProperty("--b04-layer-color", themeColor("--map-flow-ramp-4", "#f97316"));
-  markerButton.setAttribute("aria-pressed", "false");
-  markerButton.title = L("B04_Surface_Flow_Hotspots_Tip");
-  markerButton.addEventListener("click", () => {
-    markersShown = !markersShown;
-    markerButton.classList.toggle("is-active", markersShown);
-    markerButton.setAttribute("aria-pressed", String(markersShown));
-    if (!markersShown) {
-      // 마커를 감추면 골라 둔 유입 외곽선도 같이 걷는다 — 고른 마커가 안 보이는데 외곽선만
-      // 남으면 무엇을 본 결과인지 알 수 없다.
-      selected = null;
-      selectionRings = [];
-      statusText = "";
-      requestSequence += 1;
-    }
-    onChange();
-  });
+  const markerButton = createLayerToggle({
+    label: L("B04_Surface_Flow_Hotspots"),
+    color: themeColor("--map-flow-ramp-4", "#f97316"),
+    title: L("B04_Surface_Flow_Hotspots_Tip"),
+    onChange: (on) => {
+      markersShown = on;
+      if (!markersShown) {
+        // 마커를 감추면 골라 둔 유입 외곽선도 같이 걷는다 — 고른 마커가 안 보이는데 외곽선만
+        // 남으면 무엇을 본 결과인지 알 수 없다.
+        selected = null;
+        selectionRings = [];
+        statusText = "";
+        requestSequence += 1;
+      }
+      onChange();
+    },
+  }).root;
 
   let projectId: string | null = null;
   let meta: VWorldMeta | null = null;