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

@@ -27,6 +27,9 @@ import { createRoundRow } from "./M02_DF_RoundRow";
 import { createUnitPick, suggestPlaces } from "./M02_DF_UnitPick";
 import { ERR_KEY, FRAMES, TEXT, tf } from "./M02_DF_FuncText";
 import "./M02_DF_FuncPanel.css";
+import "@ui/ui_template_text.css";
+import "@ui/ui_template_banner.css";
+import "@ui/ui_template_badge.css";
 
 type Handlers = { change(lg: CfLogic): void };
 
@@ -261,10 +264,14 @@ function drawHead(st: State): void {
   });
   st.parts.head.replaceChildren(
     el("strong", { className: "m02-dfpanel-title", text: box?.name ?? "" }),
-    el("span", { className: "m02-dfpanel-cell", text: `${tf("Cell")} ${st.cell}` }),
+    el("span", {
+      className: "ui-badge ui-badge--pill ui-badge--neutral",
+      attrs: { "data-size": "24" },
+      text: `${tf("Cell")} ${st.cell}`,
+    }),
     el("label", {
       className: "m02-dfpanel-unitbox",
-      children: [el("span", { className: "m02-dfpanel-note", text: tf("Unit") }), unit],
+      children: [el("span", { className: "ui-text ui-text--muted", text: tf("Unit") }), unit],
     }),
   );
 }
@@ -275,9 +282,9 @@ function drawGot(st: State): void {
   const chips = items.map(({ port, unit }) => {
     const at = f?.inputs.find((i) => i.port === port)?.cell;
     const b = el("button", {
-      className: `m02-dfpanel-chip is-in${at ? " is-placed" : ""}`,
+      className: `ui-badge ui-badge--pill ui-badge--info m02-dfpanel-chip is-in${at ? " is-placed" : ""}`,
       text: `${port} (${unit}) · ${at ? `${tf("Placed")} ${at}` : tf("Free")}`,
-      attrs: { type: "button", draggable: st.readOnly ? "false" : "true" },
+      attrs: { type: "button", "data-size": "24", draggable: st.readOnly ? "false" : "true" },
     });
     b.addEventListener("click", () => placePort(st, port, st.cell));
     b.addEventListener("dragstart", (e) => e.dataTransfer?.setData("text/plain", port));
@@ -285,9 +292,11 @@ function drawGot(st: State): void {
   });
   st.parts.got.replaceChildren(
     el("span", { className: "m02-dfpanel-label", text: tf("Got") }),
-    ...(chips.length ? chips : [el("span", { className: "m02-dfpanel-note", text: tf("NoGot") })]),
+    ...(chips.length
+      ? chips
+      : [el("span", { className: "ui-text ui-text--muted", text: tf("NoGot") })]),
     ...(chips.length && !st.readOnly
-      ? [el("span", { className: "m02-dfpanel-note", text: tf("GotHint") })]
+      ? [el("span", { className: "ui-text ui-text--muted", text: tf("GotHint") })]
       : []),
   );
 }
@@ -303,7 +312,7 @@ function formField(
     return el("label", {
       className: "m02-dfpanel-fieldbox",
       children: [
-        el("span", { className: "m02-dfpanel-note", text: tf(label) }),
+        el("span", { className: "ui-text ui-text--muted", text: tf(label) }),
         createUnitPick({
           value: form.unit || "-",
           ariaLabel: tf(label),
@@ -321,7 +330,7 @@ function formField(
   input.addEventListener("keydown", (e) => e.key === "Enter" && makeVariable(st));
   return el("label", {
     className: "m02-dfpanel-fieldbox",
-    children: [el("span", { className: "m02-dfpanel-note", text: tf(label) }), input],
+    children: [el("span", { className: "ui-text ui-text--muted", text: tf(label) }), input],
   });
 }
 
@@ -330,7 +339,8 @@ function drawVars(st: State): void {
   const row: HTMLElement[] = [el("span", { className: "m02-dfpanel-label", text: tf("Vars") })];
   for (const v of f?.variables ?? []) {
     const chip = el("span", {
-      className: "m02-dfpanel-chip is-var",
+      className: "ui-badge ui-badge--pill ui-badge--warning m02-dfpanel-chip is-var",
+      attrs: { "data-size": "24" },
       children: [`${v.name} (${v.unit}) · ${v.cell ?? ""}`],
     });
     if (!st.readOnly) {
@@ -351,7 +361,7 @@ function drawVars(st: State): void {
     row.push(chip);
   }
   if (!f?.variables.length)
-    row.push(el("span", { className: "m02-dfpanel-note", text: tf("NoVars") }));
+    row.push(el("span", { className: "ui-text ui-text--muted", text: tf("NoVars") }));
   const parts: HTMLElement[] = [el("div", { className: "m02-dfpanel-row", children: row })];
   if (!st.readOnly) {
     const form = st.form;
@@ -400,12 +410,15 @@ function drawVars(st: State): void {
       });
       parts.push(
         el("div", {
-          className: "m02-dfpanel-row m02-dfpanel-form",
+          className: "ui-card m02-dfpanel-row m02-dfpanel-form",
           children: [
             formField(st, "VarName", "name"),
             el("label", {
               className: "m02-dfpanel-fieldbox",
-              children: [el("span", { className: "m02-dfpanel-note", text: tf("VarType") }), type],
+              children: [
+                el("span", { className: "ui-text ui-text--muted", text: tf("VarType") }),
+                type,
+              ],
             }),
             formField(st, "VarUnit", "unit"),
             ...(form.type === "number"
@@ -413,7 +426,11 @@ function drawVars(st: State): void {
               : []),
             ...(form.type === "choice" ? [formField(st, "VarChoices", "choices")] : []),
             formField(st, "VarExample", "example"),
-            el("span", { className: "m02-dfpanel-cell", text: `${tf("VarCell")} ${st.cell}` }),
+            el("span", {
+              className: "ui-badge ui-badge--pill ui-badge--neutral",
+              attrs: { "data-size": "24" },
+              text: `${tf("VarCell")} ${st.cell}`,
+            }),
             createButton({
               label: tf("Make"),
               variant: "filled",
@@ -427,7 +444,7 @@ function drawVars(st: State): void {
               onClick: () => ((st.form = null), drawVars(st)),
             }),
             ...(form.why
-              ? [el("span", { className: "m02-dfpanel-why", text: `⚠ ${form.why}` })]
+              ? [el("span", { className: "ui-text ui-text--warning", text: `⚠ ${form.why}` })]
               : []),
           ],
         }),
@@ -441,7 +458,7 @@ function drawBar(st: State): void {
   const f = funcOf(st);
   if (st.readOnly) {
     st.parts.bar.replaceChildren(
-      el("span", { className: "m02-dfpanel-note", text: tf("ReadOnly") }),
+      el("span", { className: "ui-text ui-text--muted", text: tf("ReadOnly") }),
     );
     return;
   }
@@ -456,8 +473,12 @@ function drawBar(st: State): void {
           size: "sm",
           onClick: () => setOutput(st, st.cell),
         }),
-        el("span", { className: "m02-dfpanel-chip is-out", text: outNow }),
-        el("span", { className: "m02-dfpanel-note", text: tf("OutOnly") }),
+        el("span", {
+          className: "ui-badge ui-badge--pill ui-badge--success m02-dfpanel-chip is-out",
+          attrs: { "data-size": "24" },
+          text: outNow,
+        }),
+        el("span", { className: "ui-text ui-text--muted", text: tf("OutOnly") }),
       ],
     }),
     ...(f?.output.cell
@@ -482,7 +503,7 @@ function drawBar(st: State): void {
             onClick: () => putFormula(st, formula),
           }),
         ),
-        el("span", { className: "m02-dfpanel-note", text: tf("FrameHint") }),
+        el("span", { className: "ui-text ui-text--muted", text: tf("FrameHint") }),
       ],
     }),
   );
@@ -647,7 +668,10 @@ export function renderFuncPanel(
     got: el("div", { className: "m02-dfpanel-row" }),
     vars: el("div", { className: "m02-dfpanel-vars" }),
     bar: el("div", { className: "m02-dfpanel-bar" }),
-    msg: el("p", { className: "m02-dfpanel-msg", attrs: { role: "status" } }),
+    msg: el("p", {
+      className: "ui-banner ui-banner--warning m02-dfpanel-msg",
+      attrs: { role: "status" },
+    }),
     sheet: el("div", { className: "m02-dfpanel-sheet", text: tf("Loading") }),
   };
   const st: State = {