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

@@ -56,6 +56,7 @@ import { buildHeadBar } from "./M01_MasterData_UI_Head";
 import { fetchSessionUser } from "../A06_Login/A06_Login_Api_Fetch";
 import type { CfLogic } from "../M02_MasterTemplete/DataFlow/M02_DF_Model";
 import "./M01_MasterData_UI_Logic_Style.css";
+import { createEmpty } from "@ui/ui_template_empty";
 
 /** 저장 안 한 로직 하나 — origKey null = 새 로직 · row null = 지움 */
 interface Draft {
@@ -129,12 +130,15 @@ export async function mountM01LogicLab(
   const editor = el("div", { className: "m01-logic__editor" });
   // 로직 상세 — 왼쪽 지금 내용 · 오른쪽 접는 패널 둘(흐름도 · 원문 · 하나만 열림 · 폭 공유)
   const panes = buildLogicSide(editor);
-  const errors = el("div", { className: "m01-logic__reasons", attrs: { hidden: "" } });
+  const errors = el("div", {
+    className: "ui-banner ui-banner--danger m01-logic__reasons",
+    attrs: { hidden: "" },
+  });
   const calc = el("div", { className: "m01lab__calc" });
   const filterHost = el("div");
-  const waiting = el("p", { className: "m01-logic__muted", text: tx("Loading") });
+  const waiting = el("p", { className: "ui-text ui-text--muted", text: tx("Loading") });
   let loaded = false; // 첫 목록이 오기 전에는 「0 줄」 빈 표를 보이지 않음
-  const pending = el("span", { className: "m01-logic__muted" });
+  const pending = el("span", { className: "ui-text ui-text--muted" });
   const list = buildList(
     (item) => void open(item.id, item.sub, item.key),
     (item, alias) => void onAlias(item, alias),
@@ -235,9 +239,7 @@ export async function mountM01LogicLab(
     back.hidden = listing;
     if (!opened) return;
     if (!opened.row) {
-      editor.replaceChildren(
-        el("p", { className: "m01-logic__empty", text: `● ${tx("List_Deleted")}` }),
-      );
+      editor.replaceChildren(createEmpty({ text: `● ${tx("List_Deleted")}`, small: true }));
       return;
     }
     const current = opened;
@@ -321,7 +323,7 @@ export async function mountM01LogicLab(
       made.setExamples(o.values); // 띄우는 사이에 온 자동값까지
     } catch (e) {
       panes.flowSplit.right.replaceChildren(
-        el("p", { className: "m01-logic__muted", text: tf("Failed", String(e)) }),
+        el("p", { className: "ui-text ui-text--muted", text: tf("Failed", String(e)) }),
       );
     }
   };