refactor(M02): 띠 알림 · 빈 상태 · 보조 글 · 배지 · 탭 · 표 · 목록 줄 · 도구줄 · 체크를 부품으로 (PLAN 553-5)

- DataFlow: 표 넷 = 데이터표 · 함수 판 알림 · 선/알약 경고 · 끊긴 곳 = 띠 알림 · 알약 · 칸 종류 = 배지 · 고르는 줄 = 목록 줄 · 입력 넷 = 입력 · 도구줄 여섯 · 날 색 → 공통 값
- 구조물 옵션 · 구조물 · 도면 · 면적 · 품목 고르기: 판 띠 = 띠 알림 · 한눈/종류별/부품 = 탭 · 표 둘 = 데이터표 · 체크 둘 = 체크 · 카드 · 번호 = 카드 · 배지 · 도면 도구줄
- 일위대가 · 호표 · 실무자료 · 본 화면 · 서고: 알림 = 띠 알림 · 빈 상태 · 보조 글 · 도구줄 여섯 · 옛 보라 별칭 0
- M01 로직 입력칸 = 입력 부품(작은 칸) · 일위대가 상세 줄 수 고정 시험 693 · 지킴 시험 M02 몫 더함

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

M02_MasterTemplete/StructOptions/M02_SO_Def_Ui.ts

@@ -7,6 +7,8 @@
 import { createButton, el } from "@ui/ui_template_elements";
 import { step } from "./M02_SO_Def_Model";
 import { to } from "./M02_SO_Text";
+import { createText } from "@ui/ui_template_text";
+import { createCheckbox } from "@ui/ui_template_checkbox";
 
 /** 글 칸 — 글자마다 `set` · 떠날 때 `done` */
 export function textBox(
@@ -69,13 +71,15 @@ export function checkBox(
   set: (v: boolean) => void,
   opt: { edit: boolean; attr?: string },
 ): HTMLLabelElement {
-  const box = el("input", {
-    attrs: { type: "checkbox", ...(opt.attr ? { [opt.attr]: "" } : {}) },
-  }) as HTMLInputElement;
-  box.checked = on;
-  box.disabled = !opt.edit;
-  box.addEventListener("change", () => set(box.checked));
-  return el("label", { className: "m02-sod__check", children: [box, el("span", { text: label })] });
+  // 체크 부품 — 속성(data-sod-*)은 칸에 그대로
+  const { root, input } = createCheckbox(label, {
+    checked: on,
+    disabled: !opt.edit,
+    onChange: set,
+  });
+  if (opt.attr) input.setAttribute(opt.attr, "");
+  root.classList.add("m02-sod__check");
+  return root;
 }
 
 /** 고르기 — [값, 글] 짝 */
@@ -117,5 +121,5 @@ export function moveButtons<T>(
 /** 절 제목 + 안내 한 줄 */
 export const head = (title: string, note?: string): HTMLElement[] => [
   el("h4", { className: "m02-opts__group", text: title }),
-  ...(note ? [el("p", { className: "m02-side__empty", text: note })] : []),
+  ...(note ? [createText(note)] : []),
 ];