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

@@ -4,10 +4,11 @@
  * 검색 칸을 채워 열고 · 잡힌 품목 칠함 · 한 줄 누르면 고름 · 저장 안 함(읽기만)
  * ========================================================================== */
 
-import { createButton, createInputField, el, showToast } from "@ui/ui_template_elements";
+import { createInputField, el, showToast } from "@ui/ui_template_elements";
 import { fetchRows, type Row } from "./M01_MasterData_Api_Fetch";
 import { buildPager, flatten, show } from "./M01_MasterData_UI_Cells";
 import { tx } from "./M01_MasterData_UI_Logic_Text";
+import { openModal } from "@ui/ui_template_modal";
 
 export type PickTableKind = "재료" | "기계";
 
@@ -42,7 +43,6 @@ export interface PickTableOptions {
 }
 
 export function openPickTable(opt: PickTableOptions): void {
-  const close = (): void => back.remove();
   const searchField = createInputField({
     type: "search",
     placeholder: tx("Pick_Search"),
@@ -50,24 +50,14 @@ export function openPickTable(opt: PickTableOptions): void {
   });
   const search = searchField.input;
   const host = el("div", { className: "m01-logic__pick-list" });
-  const dialog = el("div", {
-    className: "m01-logic__pick m01-logic__pick--table ui-popup",
-    attrs: { role: "dialog", "aria-label": opt.title },
-    children: [
-      el("div", {
-        className: "m01-logic__section-head",
-        children: [
-          el("h3", { text: opt.title }),
-          createButton({ label: tx("Pick_Close"), variant: "ghost", onClick: close }),
-        ],
-      }),
-      searchField.root,
-      host,
-    ],
+  // 모달 부품 — 제목줄 [닫기] · 바깥 누르기 · Esc · 위 고정 · 폭만 표 모달 곁값
+  const { close } = openModal({
+    title: opt.title,
+    closeLabel: tx("Pick_Close"),
+    dialogClass: "m01-logic__pick m01-logic__pick--table",
+    backdropClass: "m01-logic__backdrop",
+    mount: (body) => body.append(searchField.root, host),
   });
-  const back = el("div", { className: "m01-logic__backdrop", children: [dialog] });
-  back.addEventListener("click", (ev) => ev.target === back && close());
-  back.addEventListener("keydown", (ev) => ev.key === "Escape" && close());
 
   let page = 1;
   const tried = new Set([opt.seed]);
@@ -109,10 +99,10 @@ export function openPickTable(opt: PickTableOptions): void {
           void load();
         }),
         el("div", {
-          className: "m01-master__grid-wrap",
+          className: "ui-table-wrap m01-master__grid-wrap",
           children: [
             el("table", {
-              className: "m01-master__grid",
+              className: "ui-table m01-master__grid",
               children: [
                 el("thead", {
                   children: [el("tr", { children: cols.map((c) => el("th", { text: c })) })],
@@ -136,7 +126,5 @@ export function openPickTable(opt: PickTableOptions): void {
       void load();
     }, 300);
   });
-  document.body.append(back);
-  search.focus();
   void load(true);
 }