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

@@ -27,6 +27,7 @@ import {
 } from "./M01_MasterData_UI_Logic_Api";
 import { formatNumber, type PickDone, type PickMode } from "./M01_MasterData_UI_Logic_Edit";
 import { tx } from "./M01_MasterData_UI_Logic_Text";
+import { openModal } from "@ui/ui_template_modal";
 
 const GROUPS: Record<PickMode, string[]> = {
   element: ["인력", "재료", "기계", "로직"],
@@ -43,30 +44,23 @@ export function openPicker(mode: PickMode, group: string, done: PickDone): void
   const select = groupField.select;
   const searchField = createInputField({ type: "search", placeholder: tx("Pick_Search") });
   const search = searchField.input;
-  const count = el("span", { className: "m01-logic__muted" });
+  const count = el("span", { className: "ui-text ui-text--muted" });
   const list = el("div", { className: "m01-logic__pick-list" });
-  const close = (): void => backdrop.remove();
-  const dialog = el("div", {
-    className: "m01-logic__pick ui-popup",
-    attrs: { role: "dialog", "aria-label": tx("Pick_Title") },
-    children: [
-      el("div", {
-        className: "m01-logic__section-head",
-        children: [
-          el("h3", { text: tx("Pick_Title") }),
-          createButton({ label: tx("Pick_Close"), variant: "ghost", onClick: close }),
-        ],
-      }),
-      el("div", {
-        className: "m01-logic__pick-bar",
-        children: [groupField.root, searchField.root, count],
-      }),
-      list,
-    ],
+  // 모달 부품 — 제목줄 [닫기] · 바깥 누르기 · Esc · 위 고정
+  const { close } = openModal({
+    title: tx("Pick_Title"),
+    closeLabel: tx("Pick_Close"),
+    dialogClass: "m01-logic__pick",
+    backdropClass: "m01-logic__backdrop",
+    mount: (body) =>
+      body.append(
+        el("div", {
+          className: "m01-logic__pick-bar",
+          children: [groupField.root, searchField.root, count],
+        }),
+        list,
+      ),
   });
-  const backdrop = el("div", { className: "m01-logic__backdrop", children: [dialog] });
-  backdrop.addEventListener("click", (ev) => ev.target === backdrop && close());
-  backdrop.addEventListener("keydown", (ev) => ev.key === "Escape" && close());
 
   const choose = (item: ElementBrief, column?: string): void => {
     close();
@@ -94,7 +88,6 @@ export function openPicker(mode: PickMode, group: string, done: PickDone): void
     timer = window.setTimeout(load, 250);
   });
   select.addEventListener("change", load);
-  document.body.append(backdrop);
   search.focus();
   void load();
 }
@@ -110,7 +103,7 @@ function itemRow(
     children: [
       el("strong", { text: `${item.이름 ?? ""} ${item.규격 ?? ""}`.trim() }),
       el("span", {
-        className: "m01-logic__muted",
+        className: "ui-text ui-text--muted",
         text: [item.ref, note].filter(Boolean).join(" · "),
       }),
     ],
@@ -128,8 +121,8 @@ function itemRow(
   const unit = typeof item.단위 === "string" ? item.단위 : "";
   const value = typeof item.값 === "object" && item.값 !== null ? "{…}" : formatNumber(item.값);
   const row = el("button", {
-    className: "m01-logic__pick-row m01-logic__pick-row--button",
-    attrs: { type: "button" },
+    className: "m01-logic__pick-row ui-list-row ui-sidebar-row",
+    attrs: { type: "button", "data-size": "32" },
     children: [
       text,
       el("span", { className: "m01-logic__money", text: `${value} ${unit}`.trim() }),
@@ -276,7 +269,7 @@ function swapRow(one: LogicOne, line: HoLine, i: number, swaps: Swaps, onChange:
     className: "m01-test__pick",
     children: [
       el("strong", { text: `${line.종류} · ${line.이름 ?? String(line.요소)}${spec}` }),
-      el("span", { className: "m01c__muted", text: `${line.단위 ?? ""}${cost}` }),
+      el("span", { className: "ui-text ui-text--muted", text: `${line.단위 ?? ""}${cost}` }),
       subRow,
       itemBox.root,
     ],