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

@@ -19,6 +19,7 @@ import { pointInRings } from "./B04_PreProcess_UI_MapOverlays";
 import { createMapContextMenu } from "@ui/ui_template_context_menu";
 import { currentLanguageIndex, ui_locales } from "@ui/ui_template_locale";
 import { themeColor } from "@ui/ui_template_palette";
+import { createLayerToggle, setLayerLabel } from "./B04_PreProcess_UI_LayerToggle";
 import {
   computeDetailBasins,
   fetchDetailPipePoints,
@@ -179,30 +180,33 @@ export function createDetailBasinOverlay(onChange: () => void): DetailBasinOverl
 
   const menu = createMapContextMenu("b04-map");
 
-  const button = document.createElement("button");
-  button.type = "button";
-  button.className = "b04-map__layer-button b04-map__layer-button--gis";
-  button.textContent = L("B04_Surface_Basin_Btn");
-  button.style.setProperty("--b04-layer-color", themeColor("--map-pipe-user", "#16a34a"));
-  button.title = L("B04_Surface_Basin_Btn_Tip");
+  // 분석 단추 — 층 칩 꼴 · 눌림은 남기지 않고 바로 다시 계산한다
+  const toggle = createLayerToggle({
+    label: L("B04_Surface_Basin_Btn"),
+    color: themeColor("--map-pipe-user", "#16a34a"),
+    title: L("B04_Surface_Basin_Btn_Tip"),
+    onChange: () => {
+      toggle.set(false);
+      void recompute();
+    },
+  });
+  const button = toggle.root;
 
   // 관 마커와 세부유역은 늘 같이 본다 — 따로 끄면 관을 옮겨도 유역이 안 보여 판단할 수 없다.
   // 그래서 토글은 하나뿐이다(2026-08-01 사용자 지시).
   let shown = true;
-  const partButton = document.createElement("button");
-  partButton.type = "button";
-  partButton.className = "b04-map__layer-button b04-map__layer-button--gis is-active";
-  partButton.textContent = L("B04_Surface_Basin_Part_Basins");
-  partButton.style.setProperty("--b04-layer-color", themeColor("--map-pipe-user", "#16a34a"));
-  partButton.setAttribute("aria-pressed", "true");
-  partButton.addEventListener("click", () => {
-    shown = !shown;
-    partButton.classList.toggle("is-active", shown);
-    partButton.setAttribute("aria-pressed", String(shown));
-    if (!shown) menu.close();
-    onChange();
-  });
-  const partButtons = [partButton];
+  const partButtons = [
+    createLayerToggle({
+      label: L("B04_Surface_Basin_Part_Basins"),
+      color: themeColor("--map-pipe-user", "#16a34a"),
+      on: true,
+      onChange: (on) => {
+        shown = on;
+        if (!shown) menu.close();
+        onChange();
+      },
+    }).root,
+  ];
 
   function say(text: string): void {
     statusElement.textContent = text;
@@ -328,7 +332,7 @@ export function createDetailBasinOverlay(onChange: () => void): DetailBasinOverl
     if (!projectId || busy) return;
     busy = true;
     button.disabled = true;
-    button.textContent = L("B04_Surface_Basin_Btn_Busy");
+    setLayerLabel(toggle, L("B04_Surface_Basin_Btn_Busy"));
     const sequence = ++requestSequence;
     try {
       const response = await computeDetailBasins(
@@ -343,7 +347,7 @@ export function createDetailBasinOverlay(onChange: () => void): DetailBasinOverl
     } finally {
       busy = false;
       button.disabled = false;
-      button.textContent = L("B04_Surface_Basin_Btn");
+      setLayerLabel(toggle, L("B04_Surface_Basin_Btn"));
       onChange();
     }
   }
@@ -366,10 +370,6 @@ export function createDetailBasinOverlay(onChange: () => void): DetailBasinOverl
     onChange();
   }
 
-  button.addEventListener("click", () => {
-    void recompute();
-  });
-
   return {
     button,
     partButtons,