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

@@ -21,6 +21,7 @@ import { explain, loadTable, type TableRow } from "./M01_MasterData_UI_Logic_Not
 import { jumpToMaster, type MasterJump } from "./M01_MasterData_UI_Side";
 import { fragmentRow, type Fragment } from "./M01_MasterData_UI_LogicLab_Pill";
 import { tl } from "./M01_MasterData_UI_LogicLab_Text";
+import { createText } from "@ui/ui_template_text";
 
 /** 로직 알약 → 그 로직 열기 — 로직 화면이 자기 열기를 등록 · 열려 있는 모달은 다 닫음 */
 let logicOpener: (key: string) => void = () => {};
@@ -138,11 +139,11 @@ function tableView(table: TableRow, target: TableTarget): HTMLElement {
     children: [
       el("strong", { text: `${table.원문번호 ?? ""} ${table.이름 ?? table.키} · ${table.키}` }),
       el("p", {
-        className: "m01-logic__muted",
+        className: "ui-text ui-text--muted",
         text: [`${tl("Modal_Source")} ${table.출처 ?? ""}`, use].filter(Boolean).join(" · "),
       }),
       el("p", {
-        className: "m01-logic__muted",
+        className: "ui-text ui-text--muted",
         text: hit ? tl("Modal_Hit") : target.col ? tl("Modal_ColOnly") : tl("Modal_NoHit"),
       }),
       goButton({ kind: "table", key: table.키 }),
@@ -150,7 +151,7 @@ function tableView(table: TableRow, target: TableTarget): HTMLElement {
         className: "m01-logic__scroll",
         children: [
           el("table", {
-            className: "m01-logic__grid m01lab__table",
+            className: "ui-table ui-table--data m01-logic__grid m01lab__table",
             children: [
               el("thead", {
                 children: [el("tr", { children: cols.map((c) => el("th", { text: c })) })],
@@ -217,7 +218,7 @@ function openDialog(title: string, mount: (body: HTMLElement) => void): void {
   });
 }
 
-const muted = (text: string): HTMLElement => el("p", { className: "m01-logic__muted", text });
+const muted = (text: string): HTMLElement => el("p", { className: "ui-text ui-text--muted", text });
 
 /** 재료 고르기 줄 후보 목록 — 잡힌 품목(`pickedRef`)을 노란 줄로 · 후보가 100건을 넘으면 앞 100건만 옴 */
 function candidateView(
@@ -249,7 +250,7 @@ function candidateView(
           className: "m01-logic__scroll",
           children: [
             el("table", {
-              className: "m01-logic__grid m01lab__table",
+              className: "ui-table ui-table--data m01-logic__grid m01lab__table",
               children: [
                 el("thead", {
                   children: [
@@ -421,12 +422,10 @@ export function openNoteModal(title: string, text: string): void {
 /** 수량 칸 표 알약을 눌렀을 때 — 그 표만 보임(걸린 줄 강조) */
 export function openTableModal(target: TableTarget): void {
   openDialog(target.title, (body) => {
-    body.replaceChildren(el("p", { className: "m01-logic__muted", text: "…" }));
+    body.replaceChildren(el("p", { className: "ui-text ui-text--muted", text: "…" }));
     void loadTable(target.table).then((table) => {
       body.replaceChildren(
-        table
-          ? tableView(table, target)
-          : el("p", { className: "m01-logic__bad", text: `${target.table} ?` }),
+        table ? tableView(table, target) : createText(`${target.table} ?`, "error"),
       );
     });
   });