feat(M02): 47-5 일위대가 줄 누름 = 고름 하이라이트 · [옵션] 단추로 넣을 값 모달 · 줄 단추 공용 묶음

- 단가산출 로직 표 줄 누름 = 고른 줄 하이라이트(로직 키 · 다시 그려도 유지) · 넣을 값 모달은 새 [옵션] 단추
- 줄 단추 이름 위로 · 아래로 · 옵션 · 삭제(빨강) · 카드 갈래 = 옵션 · 삭제
- 공용 단추 묶음 `ui-btn-group` · 간격 토큰 `--btn-group-gap`(4px) — 이 표에만 적용
- 시험: test_m02_card_shell 낡은 글 맞춤 + 47-5 확인 · 화면 시나리오 ui_checks/47-5_일위대가_줄_고름.js

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01MgChuAcyBqUkhHMTXomQC7

M02_MasterTemplete/M02_MasterTemplete_Labor_Rows.ts

@@ -6,7 +6,8 @@
  * 옵션 값(「지역 서울 · 규격 25mm」)은 줄 아래 이름 ~ 합계에 걸친 한 줄 · 맨 아래 합계 줄(전체 합계 강조).
  * 자재목록 = 코드 · 이름 · 규격 · 수량산출 · 단위 · 가격 다섯(기준 칸 강조) · 기준단가 / 반영 금액(43-3).
  * 금액은 calc 답(없으면 「…」).
- * 줄 누름 · 순서 단추는 `on` 이 있을 때만(보기 갈래 = 없음).
+ * 줄 누름 · 줄 단추(위로 · 아래로 · 옵션 · 삭제 · 묶음 `ui-btn-group`)는 `on` 이 있을 때만(보기 갈래 = 없음) ·
+ * 상세는 줄 누름 = 고름(`selected` 줄 하이라이트) · 넣을 값 모달은 [옵션](47-5).
  * ========================================================================== */
 
 import { createButton, el } from "@ui/ui_template_elements";
@@ -21,6 +22,7 @@ import type {
   LaborRow,
 } from "./M02_MasterTemplete_Labor_Api";
 import { tc } from "./M02_MasterTemplete_Labor_Text";
+import "@ui/ui_template_general_layout.css";
 import "./M02_MasterTemplete_Labor.css";
 import { valueLine } from "./M02_Labor_Values_Model";
 
@@ -98,7 +100,7 @@ function qtyCell(
     : el("span", { children: parts });
   if (open)
     body.addEventListener("click", (e) => {
-      e.stopPropagation(); // 줄 누름(입력 모달)과 따로
+      e.stopPropagation(); // 줄 누름(고름)과 따로
       open();
     });
   return el("td", {
@@ -158,9 +160,11 @@ const table = (heads: string[], rows: HTMLElement[], foot: HTMLElement[]): HTMLE
     ],
   });
 
-/** 줄 누름 · 순서 · 빼기 — 순서 · 빼기가 없으면 그 칸 없음 */
+/** 줄 누름 · 순서 · 옵션 · 삭제 — 셋 다 없으면 그 칸 없음 */
 export interface RowHandlers {
   open: (i: number) => void;
+  /** [옵션] 단추(47-5 · 넣을 값 모달) — 없으면 단추 없음 */
+  option?: (i: number) => void;
   /** 수량산출 칸 누름(손 입력 · 엑셀에서 고르기) — 없으면 줄 누름과 같음 */
   qty?: (i: number) => void;
   move?: (i: number, d: number) => void;
@@ -191,7 +195,7 @@ function aliasCell(
     },
   });
   input.value = value ?? "";
-  input.addEventListener("click", (e) => e.stopPropagation()); // 줄 누름(입력 모달)과 따로
+  input.addEventListener("click", (e) => e.stopPropagation()); // 줄 누름(고름)과 따로
   input.addEventListener("input", () => set(input.value.trim() || null));
   input.addEventListener("keydown", (e) => {
     if (e.key === "Enter") input.blur();
@@ -211,14 +215,16 @@ export interface LogicTableData {
   fail?: string | null;
   /** 알약 키 → 이은 면적산출 칸(「B6」) */
   cells?: ReadonlyMap<string, string>;
+  /** 고른 줄 로직 키(47-5 · 하이라이트) */
+  selected?: string | null;
 }
 
 /** 담은 로직 표 — 보기 갈래는 `on` 없이 */
 export function logicTable(data: LogicTableData, on?: RowHandlers): HTMLElement {
   const wait = !data.calc && !data.fail;
-  const { move, remove } = on ?? {};
-  // 빼기만(구조물 조합 카드 · 43-4)이어도 끝 칸 — 순서 단추는 `move` 가 있을 때만
-  const tools = !!(move || remove);
+  const { move, remove, option } = on ?? {};
+  // 옵션 · 삭제만(구조물 조합 카드 · 43-4)이어도 끝 칸 — 순서 단추는 `move` 가 있을 때만
+  const tools = !!(move || remove || option);
   const lineOf = (key: string): LaborCalcLine | undefined =>
     data.calc?.줄.find((l) => l.로직 === key);
   const trs = data.rows.flatMap((row, i) => {
@@ -237,12 +243,13 @@ export function logicTable(data: LogicTableData, on?: RowHandlers): HTMLElement
         label,
         variant,
         onClick: (e) => {
-          e.stopPropagation(); // 줄 누름(입력 모달)과 따로
+          e.stopPropagation(); // 줄 누름(고름)과 따로
           run();
         },
       });
+    const sel = data.selected === row.로직 ? " is-selected" : "";
     const tr = el("tr", {
-      className: on ? "m02-labrow__row is-open" : "m02-labrow__row",
+      className: (on ? "m02-labrow__row is-open" : "m02-labrow__row") + sel,
       attrs: { "data-labor-logic": row.로직 },
       children: [
         el("td", { className: "m02-labrow__no", text: String(i + 1) }),
@@ -281,10 +288,16 @@ export function logicTable(data: LogicTableData, on?: RowHandlers): HTMLElement
               el("td", {
                 className: "m02-labrow__move",
                 children: [
-                  ...(move
-                    ? [small(tc("Up"), () => move(i, -1)), small(tc("Down"), () => move(i, 1))]
-                    : []),
-                  ...(remove ? [small(tc("Remove"), () => remove(i), "danger")] : []),
+                  el("div", {
+                    className: "ui-btn-group",
+                    children: [
+                      ...(move
+                        ? [small(tc("Up"), () => move(i, -1)), small(tc("Down"), () => move(i, 1))]
+                        : []),
+                      ...(option ? [small(tc("Labor_Option"), () => option(i))] : []),
+                      ...(remove ? [small(tc("Remove"), () => remove(i), "danger")] : []),
+                    ],
+                  }),
                 ],
               }),
             ]
@@ -295,7 +308,7 @@ export function logicTable(data: LogicTableData, on?: RowHandlers): HTMLElement
     if (!note) return [tr];
     // 옵션 값 줄(44-6) — 이름 ~ 합계 칸에 걸친 한 줄(말줄임 · 전체 글은 title) · 행 높이 안 커짐
     const opt = el("tr", {
-      className: on ? "m02-labrow__optrow is-open" : "m02-labrow__optrow",
+      className: (on ? "m02-labrow__optrow is-open" : "m02-labrow__optrow") + sel,
       attrs: { "data-labor-opt": row.로직 },
       children: [
         el("td", { className: "m02-labrow__no", text: "" }),