feat(711-1): M01 시험 계산 — 옵션 · 자재 격자 둘 + 수평 구분선 · 기본 4 열 · 자재 이름 누르면 고르기 모달

- 옵션 고르기 · 자재 고르기 사이 709-1 수평 구분선 부품(createDivider)
- 기본 4 열 · 긴 이름 칸 두 칸
- [품목 고르기] 단추 걷음 — 잡힌 품목 이름 링크를 누르면 모달 · 고르면 다시 셈

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

M01_MasterData/M01_MasterData_UI_Logic_CalcPick.ts

@@ -1,6 +1,6 @@
 /* =============================================================================
  * M01_MasterData_UI_Logic_CalcPick.ts
- * 시험 계산의 재료 · 기계 고르기 — 재료 줄마다 「잡힌 품목 + 품목 고르기」 · 기계 입력은 단추 하나
+ * 시험 계산의 재료 · 기계 고르기 — 재료 칸마다 잡힌 품목 이름(누르면 고르기) · 기계 입력은 단추 하나
  * 누르면 마스터 표 모달(`PickTable`) · 고른 재료는 `고름`(호표 줄 차례 → 키)에 실어 다시 계산 · 저장 안 함
  * ========================================================================== */
 
@@ -49,10 +49,11 @@ const isMachineInput = (spec: LogicInput): boolean =>
 const pickButton = (label: string, onClick: () => void): HTMLButtonElement =>
   createButton({ label, variant: "ghost", onClick });
 
-const line = (label: string, current: HTMLElement, button: HTMLElement): HTMLElement =>
+/** 자재 칸 — 이름 + 잡힌 품목(누르면 고르기 모달) · 긴 이름은 두 칸 */
+const line = (label: string, current: HTMLElement): HTMLElement =>
   el("div", {
-    className: "m01-logic__field m01-logic__field--wide",
-    children: [el("span", { text: label }), el("div", { children: [current, button] })],
+    className: `m01-logic__field${label.length > 10 ? " m01-logic__field--wide" : ""}`,
+    children: [el("span", { text: label }), current],
   });
 
 /** 재료 줄마다 한 칸 — 지금 잡힌 품목 + 품목 고르기 */
@@ -80,12 +81,16 @@ export function materialRows(
       const seeds = [cond?.["검색어"], cond?.이름, cond?.상세구분, cond?.구분, label]
         .map(headWord)
         .filter((w, k, all) => w && all.indexOf(w) === k);
-      const current = el("span", {
-        className: "ui-text ui-text--muted",
-        text: `${nowName || tx("Mat_NoPrice")} `,
-        attrs: { "data-mat-idx": String(i), "data-ref": brief?.ref ?? "" },
+      // 잡힌 품목 이름 = 링크 단추 — 누르면 고르기 모달([품목 고르기] 단추 걷음)
+      const current = createButton({
+        label: nowName || tx("Mat_NoPrice"),
+        variant: "link",
+        onClick: () => pick(),
       });
-      const button = pickButton(tx("Pick_Item"), () =>
+      current.dataset.matIdx = String(i);
+      current.dataset.ref = brief?.ref ?? "";
+      current.title = tx("Pick_Item");
+      const pick = (): void =>
         openPickTable({
           kind: "재료",
           title: `${tx("Pick_MatTitle")} · ${label}`,
@@ -94,12 +99,11 @@ export function materialRows(
           isCurrent: (r) => String(r["키"]) === (mine.get(i)?.ref ?? current.dataset.ref),
           onPick: (r) => {
             mine.set(i, { ref: String(r["키"]), label: nameOf(r) });
-            current.textContent = `${nameOf(r)} `;
+            current.textContent = nameOf(r);
             again();
           },
-        }),
-      );
-      return line(`${label}${item.규격 ? ` ${item.규격}` : ""}`, current, button);
+        });
+      return line(`${label}${item.규격 ? ` ${item.규격}` : ""}`, current);
     });
 }
 
@@ -115,7 +119,7 @@ export function showItems(
     const item = lines[i]?.품목;
     if (!item || mine.has(i)) return;
     span.dataset.ref = item.키;
-    span.textContent = `${`${item.이름 ?? ""} ${item.규격 ?? ""}`.trim() || item.키} `;
+    span.textContent = `${item.이름 ?? ""} ${item.규격 ?? ""}`.trim() || item.키;
   });
 }