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

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

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

M02_MasterTemplete/DataFlow/M02_DF_Verify.ts

@@ -20,6 +20,9 @@ import {
   type CfVariable,
 } from "./M02_DF_Model";
 import "./M02_DF_Verify.css";
+import "@ui/ui_template_text.css";
+import "@ui/ui_template_banner.css";
+import "@ui/ui_template_toolbar.css";
 
 const TEXT = {
   Breaks: ["끊긴 곳", "Broken spots"],
@@ -133,8 +136,9 @@ function sampleField(
     }).root;
   } else {
     const box = el("input", {
-      className: "m02-dfver__input",
+      className: "ui-input m02-dfver__input",
       attrs: {
+        "data-size": "32",
         type: "text",
         inputmode: v.type === "number" ? "decimal" : "text",
         "aria-label": v.name,
@@ -168,15 +172,20 @@ function slotRow(box: CfBox, e: CfElementRef, on: CfVerifyOn, lg: CfLogic): HTML
   const panel = el("div", { className: "m02-dfver__panel" });
   panel.hidden = true;
   const q = el("input", {
-    className: "m02-dfver__input",
-    attrs: { type: "text", placeholder: tv("Search"), "aria-label": tv("Search") },
+    className: "ui-input m02-dfver__input",
+    attrs: {
+      "data-size": "32",
+      type: "text",
+      placeholder: tv("Search"),
+      "aria-label": tv("Search"),
+    },
   });
   q.value = e.scope?.찾는말 ?? "";
   const list = el("ul", { className: "m02-dfver__list" });
-  const pager = el("div", { className: "m02-dfver__pager" });
+  const pager = el("div", { className: "ui-toolbar m02-dfver__pager" });
   let page = 1;
   const load = async (): Promise<void> => {
-    list.replaceChildren(el("li", { className: "m02-dfver__muted", text: tv("Loading") }));
+    list.replaceChildren(el("li", { className: "ui-text ui-text--muted", text: tv("Loading") }));
     const got = await findMaterials({
       q: q.value.trim(),
       sub: e.scope?.구분,
@@ -199,7 +208,7 @@ function slotRow(box: CfBox, e: CfElementRef, on: CfVerifyOn, lg: CfLogic): HTML
               ],
             }),
           )
-        : [el("li", { className: "m02-dfver__muted", text: tv("NoHit") })]),
+        : [el("li", { className: "ui-text ui-text--muted", text: tv("NoHit") })]),
     );
     pager.replaceChildren(
       createButton({
@@ -247,7 +256,7 @@ function slotRow(box: CfBox, e: CfElementRef, on: CfVerifyOn, lg: CfLogic): HTML
   });
   panel.append(
     el("div", {
-      className: "m02-dfver__search",
+      className: "ui-toolbar m02-dfver__search",
       children: [
         q,
         createButton({
@@ -326,7 +335,7 @@ export function renderVerify(
   on: CfVerifyOn,
   opts: { values?: CfValues; logics?: CfEvalOptions["logics"] } = {},
 ): void {
-  const msg = el("p", { className: "m02-dfver__msg" });
+  const msg = el("p", { className: "ui-text ui-text--error" });
   const safe = (make: () => CfLogic): void => {
     msg.textContent = "";
     try {
@@ -355,7 +364,7 @@ export function renderVerify(
         }),
       ),
     }),
-    el("p", { className: "m02-dfver__muted", text: tv(hint) }),
+    el("p", { className: "ui-text ui-text--muted", text: tv(hint) }),
   ];
   const problems = spots.filter((s) => s.level !== "쉼");
   const resting = spots.filter((s) => s.level === "쉼");
@@ -363,7 +372,7 @@ export function renderVerify(
     ...(problems.length
       ? [
           el("div", {
-            className: "m02-dfver__block m02-dfver__breaks",
+            className: "ui-banner ui-banner--danger m02-dfver__block m02-dfver__breaks",
             children: [el("strong", { text: tv("Breaks") }), ...spotList(problems, "BreaksHint")],
           }),
         ]
@@ -427,8 +436,13 @@ export function renderVerify(
   const logics = designs.flatMap((d) => {
     if (d.kind !== "다른 로직") return [];
     const input = el("input", {
-      className: "m02-dfver__input",
-      attrs: { type: "text", placeholder: tv("OwnSample"), "aria-label": d.port },
+      className: "ui-input m02-dfver__input",
+      attrs: {
+        "data-size": "32",
+        type: "text",
+        placeholder: tv("OwnSample"),
+        "aria-label": d.port,
+      },
     });
     input.value = d.example === null || d.example === undefined ? "" : String(d.example);
     input.addEventListener("change", () => safe(() => putLogicExample(d.box, d.port, input.value)));
@@ -479,7 +493,7 @@ export function renderVerify(
             children: [
               el("strong", { className: "m02-dfver__title", text: tv("Design") }),
               ...design,
-              el("p", { className: "m02-dfver__muted", text: tv("DesignHint") }),
+              el("p", { className: "ui-text ui-text--muted", text: tv("DesignHint") }),
               msg,
             ],
           }),