refactor(M01): 표 · 모달 · 띠 알림 · 배지 · 알약 · 보조 글 · 빈 상태를 부품으로 (PLAN 553-5)

- 표 둘 = 표 부품(m01-master__grid = 일반표 · m01-logic__grid = 데이터표) · 페이지 CSS 는 폭 · 머리 고정 · 칸 상태만
- 손 모달 다섯(조달 찾기 · 요소 고르기 · 표 바꾸기 · 복사 시트 · 표 고르기) = 모달 부품 openModal
- 알림 띠 · 막힘 까닭 = 띠 알림 · 태그 = 배지 · 알약 · × · 삭제 · 로직 키 = 단추 부품 · muted 세 벌 = 보조 글 · 빈 줄 = 빈 상태
- M02 가 빌린 M01 클래스(표 · muted · 고르기 창)도 같은 부품으로 · 죽은 CSS 걷음 · 지킴 시험 test_553_5_m01_m02

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

M01_MasterData/M01_MasterData_UI_LogicLab_FlowView.ts

@@ -34,6 +34,7 @@ import {
   type FlowGroupKey,
 } from "./M01_MasterData_UI_LogicLab_FlowRows";
 import "./M01_MasterData_UI_LogicLab_FlowView.css";
+import { createText } from "@ui/ui_template_text";
 
 const TEXT = {
   Detail: ["단가산출 상세", "Unit-price detail"],
@@ -91,7 +92,7 @@ const groupTable = (g: FlowGroup): HTMLElement => {
         className: "m01-logic__scroll",
         children: [
           el("table", {
-            className: "m01-logic__grid",
+            className: "ui-table ui-table--data m01-logic__grid",
             children: [
               el("thead", {
                 children: [
@@ -159,7 +160,7 @@ export function buildFlowView(
     ev = opts.result ?? evalLogic(lg, values, { logics: opts.logics });
   } catch (e) {
     host.replaceChildren(
-      section(tf("Detail"), [el("p", { className: "m01-logic__muted", text: String(e) })]),
+      section(tf("Detail"), [el("p", { className: "ui-text ui-text--muted", text: String(e) })]),
     );
     return;
   }
@@ -168,17 +169,17 @@ export function buildFlowView(
   const detail = section(tf("Detail"), [
     ...(rows.groups.length
       ? rows.groups.map(groupTable)
-      : [el("p", { className: "m01-logic__muted", text: tf("None") })]),
+      : [el("p", { className: "ui-text ui-text--muted", text: tf("None") })]),
     el("p", {
       className: "m01lab__total",
       attrs: { "data-sum": String(rows.total) },
       text: `${tf("Total")} ${rows.totalText}`,
     }),
     el("p", {
-      className: "m01-logic__muted",
+      className: "ui-text ui-text--muted",
       text: `${tf("TotalNote")}: ${roundText(totalRound)}`,
     }),
-    ...rows.errors.slice(0, 3).map((t) => el("p", { className: "m01flow__warn", text: t })),
+    ...rows.errors.slice(0, 3).map((t) => createText(t, "error", 14)),
   ]);
   /** 함수 상자마다 식 두 줄(sub2 식 보기 · 받는 알약 값을 칸에 넣고 셈) — 못 그리면 이름 = 값만 */
   const linesOf = (id: string): FormulaLine[] | null => {
@@ -193,7 +194,7 @@ export function buildFlowView(
   const bodies = rows.funcs.map((f) => funcBlock(f, linesOf(f.box)));
   const text = section(
     tf("Formula"),
-    bodies.length ? bodies : [el("p", { className: "m01-logic__muted", text: tf("NoFunc") })],
+    bodies.length ? bodies : [el("p", { className: "ui-text ui-text--muted", text: tf("NoFunc") })],
   );
   host.replaceChildren(detail, text);
 }