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

@@ -4,6 +4,9 @@
  * ========================================================================== */
 
 import { createButton, createInputField, el, showToast } from "@ui/ui_template_elements";
+import { createEmpty } from "@ui/ui_template_empty";
+import { openModal } from "@ui/ui_template_modal";
+import { createText } from "@ui/ui_template_text";
 import { t as L } from "@ui/ui_template_locale";
 import { fetchPick, type PickItem, type PickKind } from "./M01_MasterData_Api_Fetch";
 import { show } from "./M01_MasterData_UI_Cells";
@@ -34,7 +37,6 @@ const field = (value: string, placeholder: string): ReturnType<typeof createInpu
   createInputField({ type: "search", placeholder, value });
 
 export function openPickModal(opt: PickOptions): void {
-  const close = (): void => back.remove();
   const searchField = field(opt.seed, L("M01_ProcureSearch"));
   const search = searchField.input;
   const list = el("div", { className: "m01-procure__list" });
@@ -44,8 +46,6 @@ export function openPickModal(opt: PickOptions): void {
     opt.onPick(null);
     close();
   });
-  const shut = button(L("M01_ProcureClose"));
-  shut.addEventListener("click", close);
 
   const condRow: HTMLElement[] = [];
   if (opt.cond) {
@@ -61,22 +61,15 @@ export function openPickModal(opt: PickOptions): void {
     condRow.push(el("div", { className: "m01-procure__cond", children: [name, spec, go] }));
   }
 
-  const box = el("div", {
-    className: "m01-procure__box",
-    children: [
-      el("h3", { text: opt.title }),
-      el("p", { className: "m01-master__muted", text: opt.current }),
-      searchField.root,
-      list,
-      ...condRow,
-      el("div", { className: "m01-procure__foot", children: [cut, shut] }),
-    ],
+  // 모달 부품 — 제목줄 [닫기] · 바깥 누르기 · Esc · 위 고정(공용 꼴) · [연결 끊기] 는 머리 단추 자리
+  const { close } = openModal({
+    title: opt.title,
+    closeLabel: L("M01_ProcureClose"),
+    width: "40rem",
+    dialogClass: "m01-procure__box",
+    actions: [cut],
+    mount: (body) => body.append(createText(opt.current), searchField.root, list, ...condRow),
   });
-  const back = el("div", { className: "m01-procure", children: [box] });
-  back.addEventListener("click", (e) => {
-    if (e.target === back) close();
-  });
-  document.body.append(back);
 
   const paint = (items: PickItem[], total: number): void => {
     list.replaceChildren(
@@ -84,12 +77,12 @@ export function openPickModal(opt: PickOptions): void {
         ? items.map((it) => {
             const tag = it.관급 ? ` · ${L("M01_Govt")}` : "";
             const b = el("button", {
-              className: "m01-procure__item",
-              attrs: { type: "button" },
+              className: "m01-procure__item ui-list-row ui-sidebar-row",
+              attrs: { type: "button", "data-size": "36" },
               children: [
                 el("strong", { text: it.이름 }),
                 el("span", { text: `${it.규격} · ${it.단위} · ${show(it.값)}${tag}` }),
-                el("span", { className: "m01-master__muted", text: it.ref }),
+                el("span", { className: "ui-text", text: it.ref }),
               ],
             });
             b.addEventListener("click", () => {
@@ -98,10 +91,8 @@ export function openPickModal(opt: PickOptions): void {
             });
             return b;
           })
-        : [el("p", { className: "m01-master__empty", text: L("M01_NoRows") })]),
-      ...(total > items.length
-        ? [el("p", { className: "m01-master__muted", text: `${items.length} / ${total}` })]
-        : []),
+        : [createEmpty({ text: L("M01_NoRows"), small: true })]),
+      ...(total > items.length ? [createText(`${items.length} / ${total}`)] : []),
     );
   };
   let timer: number | undefined;
@@ -123,5 +114,4 @@ export function openPickModal(opt: PickOptions): void {
     timer = window.setTimeout(() => void run(), 300);
   });
   void run(true);
-  search.focus();
 }