refactor(B06): 카드 설계 줄 · 아래 띠 단추를 부품으로 — 분할 고르기 · 켜기 칩 · 단추 · 아이콘 단추 (PLAN 553-2)

- 측구 · 측구형식 · 경사 방향 묶음 = 부품 분할 고르기 20 · 토사 · 측구 · 단경사 켜고 끄기 = 켜기 칩 20 · [상세] = 단추(고스트) 20
- ⋯ 넘침 펼침 = 아이콘 단추(선) 22 꼴(펼침 = aria-pressed) · 암 경계 ▲▼↺ · 암 절토 ↺ = 아이콘 단추 22
- 지운 자체 CSS — b06-design__btn(--active) · 펼침 보라 채움 · rockb 단추 꼴 · 사이 금 · 글 0.72rem → --text-caption
- 부품 아이콘 단추의 display 가 hidden 을 덮어 선 칸 숨김 단추는 페이지에 숨김 한 줄
- 카드 높이 7 px 줄음(설계 줄 단추 24 → 20 · 지반 칩 24 → 20) · 그림 색 전후 같음(34 장면 × 102~120 선)
- 시험 헬퍼 둘 — helper_318 = 단추 줄 시험이 진짜 부품 파일을 흉내 노드로 실음 · helper_472 = 켜기 칩 글을 안쪽 span 에서 읽음
- Line_Cell · CutSlope 는 흉내 DOM 시험(370-3 등)이 @ui 를 안 풀어 부품 클래스 · data-size 계약으로 붙임

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

B06_Section/B06_Section_UI_Cross_Design.ts

@@ -14,7 +14,10 @@
  * 병합된다.
  * ========================================================================== */
 
+import { createButton, setUiSize } from "@ui/ui_template_button";
 import { currentLanguageIndex, ui_locales } from "@ui/ui_template_locale";
+import { createSegment } from "@ui/ui_template_segment";
+import { createToggle } from "@ui/ui_template_toggle";
 import type {
   CrossSection,
   DitchSide,
@@ -156,25 +159,19 @@ function segment<T extends string>(
     legendEl.textContent = legend;
     wrap.append(legendEl);
   }
-  const group = document.createElement("div");
-  group.className = "b06-design__seg-buttons";
-  for (const [value, labelKey] of options) {
-    const button = document.createElement("button");
-    button.type = "button";
-    button.className = `b06-design__btn${value === selected ? " b06-design__btn--active" : ""}`;
-    button.textContent = L(labelKey);
-    button.setAttribute("aria-pressed", value === selected ? "true" : "false");
-    // 선행 조건 미충족 시 비활성(상시 노출하되 클릭 불가·사유 툴팁) — E-6.
-    button.disabled = disabled;
-    if (disabled && reason) button.title = reason;
-    else button.addEventListener("click", () => onPick(value));
-    group.append(button);
-  }
+  // 부품 분할 고르기 20(553-2) — 선행 조건 미충족 시 비활성(클릭 불가·사유 툴팁) — E-6.
+  const group = createSegment({
+    options: options.map(([value, labelKey]) => ({ value, label: L(labelKey), disabled })),
+    value: selected ?? "",
+    size: 20,
+    onChange: (value) => onPick(value as T),
+  }).root;
+  if (disabled && reason) group.title = reason;
   wrap.append(group);
   return wrap;
 }
 
-/** 온/오프 토글 하나(포장·2단계 경사 공용). 세그먼트와 같은 컨테이너/버튼 스타일을 쓴다. */
+/** 온/오프 토글 하나(포장·2단계 경사 공용) — 부품 켜기 칩 20(553-2). */
 function toggle(
   legend: string,
   on: boolean,
@@ -192,18 +189,16 @@ function toggle(
     legendEl.textContent = legend;
     wrap.append(legendEl);
   }
-  const buttons = document.createElement("div");
-  buttons.className = "b06-design__seg-buttons";
-  const button = document.createElement("button");
-  button.type = "button";
-  button.className = `b06-design__btn${on ? " b06-design__btn--active" : ""}`;
-  button.textContent = on ? onLabel : offLabel;
-  button.setAttribute("aria-pressed", on ? "true" : "false");
-  button.disabled = disabled;
+  const button = createToggle({
+    kind: "chip",
+    label: on ? onLabel : offLabel,
+    checked: on,
+    size: 20,
+    disabled,
+    onChange: onToggle,
+  }).root;
   if (disabled && reason) button.title = reason;
-  else button.addEventListener("click", onToggle);
-  buttons.append(button);
-  wrap.append(buttons);
+  wrap.append(button);
   return { wrap, button };
 }
 
@@ -375,18 +370,26 @@ export function buildDesignControls(
   const more = document.createElement("details");
   more.className = "b06-design__more";
   const moreSummary = document.createElement("summary");
-  moreSummary.className = "b06-design__more-summary";
+  // 부품 아이콘 단추(선) 22 꼴 — 펼침 = 눌림(aria-pressed)
+  moreSummary.className = "ui-icon-btn ui-icon-btn--outline b06-design__more-summary";
+  setUiSize(moreSummary, 22);
   moreSummary.textContent = "⋯";
   moreSummary.title = L("B06_Design_More");
+  moreSummary.setAttribute("aria-pressed", "false");
+  more.addEventListener("toggle", () =>
+    moreSummary.setAttribute("aria-pressed", String(more.open)),
+  );
   const morePanel = document.createElement("div");
   morePanel.className = "b06-design__more-panel";
   more.append(moreSummary, morePanel);
   // [상세](138-4) — 맨 오른쪽 · 넘침 정리(moveable) 밖이라 늘 보임
-  const detail = document.createElement("button");
-  detail.type = "button";
-  detail.className = "b06-design__btn b06-design__detail";
-  detail.textContent = L("B06_Design_Detail");
-  detail.addEventListener("click", () => openCrossDetail(section));
+  const detail = createButton({
+    label: L("B06_Design_Detail"),
+    variant: "ghost",
+    size: 20,
+    onClick: () => openCrossDetail(section),
+  });
+  detail.classList.add("b06-design__detail");
   bar.append(slopeDirSeg, ...moveable, more, detail);
   refreshCrossDetail(section);