feat(M01): 화면 부품 공용화 — 드롭다운·찾기 칸·단추·확인창을 공용 템플릿으로 · 재료 컨테이너 차례

- createSelectField 에 선택 인자 더함(compact · ariaLabel · setOptions) — 기본 동작 그대로
- 인력 2단 거름 · 로직 편집 고르기 · 계산 입력 · 요소 찾기 창 그룹 select 를 공용으로 · m01-side__select 걷음
- 찾기 칸은 createInputField · 표 칸·모달 단추는 createButton · 버리기 확인은 showConfirmDialog
- 재료 컨테이너 = 자재품목 · 유가 · 품셈재료 차례 · 안 쓰는 조달 문구 걷음

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_016WRFJmmhPi4exAzHgPZHMT

M01_MasterData/M01_MasterData_UI_Logic_Calc.ts

@@ -4,7 +4,7 @@
  * 고친 로직은 저장 전 줄(`row`)을 같이 보내 메모리에서 셈(`POST /calc`) — 파일에 안 씀
  * ========================================================================== */
 
-import { createButton, el, showToast } from "@ui/ui_template_elements";
+import { createButton, createSelectField, el, showToast } from "@ui/ui_template_elements";
 import {
   runCalc,
   type CalcAnswer,
@@ -31,22 +31,25 @@ const SUMS = ["노무비", "재료비", "경비", "계"];
 export function buildCalc(host: HTMLElement, ctx: CalcContext): void {
   const fields = (ctx.row.입력 ?? []).map((spec) => {
     const name = spec.이름;
-    let control: HTMLInputElement | HTMLSelectElement;
+    let control: HTMLElement;
     if (spec.고르기?.length) {
-      control = el("select", { className: "m01-logic__input" });
-      for (const option of ["", ...spec.고르기.map(String)]) {
-        control.append(el("option", { text: option, attrs: { value: option } }));
-      }
+      const pick = createSelectField({
+        options: ["", ...spec.고르기.map(String)].map((o) => ({ value: o, text: o })),
+        value: ctx.values[name] ?? "",
+        compact: true,
+        onChange: (v) => (ctx.values[name] = v),
+      });
+      control = pick.root;
     } else {
-      control = el("input", {
+      const box = el("input", {
         className: "m01-logic__input",
         attrs: { type: "text", inputmode: "decimal" },
       });
-      if (spec.범위) control.placeholder = `${spec.범위[0]} ∼ ${spec.범위[1]}`;
+      if (spec.범위) box.placeholder = `${spec.범위[0]} ∼ ${spec.범위[1]}`;
+      box.value = ctx.values[name] ?? "";
+      box.addEventListener("input", () => (ctx.values[name] = box.value));
+      control = box;
     }
-    control.value = ctx.values[name] ?? "";
-    control.addEventListener("input", () => (ctx.values[name] = control.value));
-    control.addEventListener("change", () => (ctx.values[name] = control.value));
     const label = spec.단위 ? `${name} (${spec.단위})` : name;
     return el("label", {
       className: "m01-logic__field",