feat(M02): 49-7 상세 셋(도면 · 일위대가 · 면적산출) 머리 제목 옆 [?] 도움말 — 카드와 같은 글 한 벌 · 상세 전용 줄(파일 불러오기 · 도면으로 보내기 · 돌아가기) 더함

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

M02_MasterTemplete/M02_MasterTemplete_CardHelp.ts

@@ -95,3 +95,24 @@ export const CARD_HELP: Record<"structure" | "labor" | "area", CardHelp> = {
     ],
   },
 };
+
+/** 상세에만 있는 단추 줄(49-7) — 카드 도움말 글 한 벌 뒤에 더함 */
+const DETAIL_ONLY: Record<keyof typeof CARD_HELP, [string, string][]> = {
+  structure: [["파일 불러오기", "DXF · DWG 파일을 도면으로 불러옴(상세 머리 📂)"]],
+  labor: [],
+  area: [["도면으로 보내기", "고른 범위를 도면 표로 보냄(상세 머리)"]],
+};
+const BACK: [string, string] = ["돌아가기", "구조물집계표로 · 그 열을 고른 채"];
+
+/** 상세 머리 [?] 글 — 카드 글 그대로 + 상세에만 있는 줄 */
+export const detailHelp = (kind: keyof typeof CARD_HELP): CardHelp => ({
+  ...CARD_HELP[kind],
+  features: [...CARD_HELP[kind].features, ...DETAIL_ONLY[kind], BACK],
+});
+
+/** 도움말 상자 제목 — 카드 제목과 같은 글 */
+export const HELP_TITLE: Record<keyof typeof CARD_HELP, string> = {
+  structure: "도면 정보",
+  labor: "일위대가",
+  area: "면적산출",
+};

M02_MasterTemplete/M02_MasterTemplete_CardShell.ts

@@ -159,8 +159,11 @@ const pairs = (rows: [string, string][]): HTMLElement =>
     children: rows.flatMap(([key, what]) => [el("dt", { text: key }), el("dd", { text: what })]),
   });
 
-/** ? — 카드 제목 바로 옆 · 누르면 도움말 상자(카드 오른쪽 위 · 보이고 숨김) · 상자는 본문 앞에 끼움 */
-export function helpButton(shell: CardShell, title: string, help: CardHelp): HTMLElement {
+/** ? 단추 + 도움말 상자 한 쌍(카드 · 상세 머리 공용 · 49-7) — 놓는 자리는 부른 쪽이 정함 */
+export function helpParts(
+  title: string,
+  help: CardHelp,
+): { button: HTMLElement; box: HTMLElement } {
   const button = createButton({ label: CARD_TEXT.help, variant: "ghost", size: "sm" });
   button.title = button.ariaLabel = CARD_TEXT.helpTip.replace("{value}", title);
   button.classList.add("m02-struct__help");
@@ -188,6 +191,12 @@ export function helpButton(shell: CardShell, title: string, help: CardHelp): HTM
     event.stopPropagation(); // 누름 ≠ 접기
     box.hidden = !box.hidden;
   });
+  return { button, box };
+}
+
+/** ? — 카드 제목 바로 옆 · 누르면 도움말 상자(카드 오른쪽 위 · 보이고 숨김) · 상자는 본문 앞에 끼움 */
+export function helpButton(shell: CardShell, title: string, help: CardHelp): HTMLElement {
+  const { button, box } = helpParts(title, help);
   shell.title.after(button);
   shell.root.insertBefore(box, shell.body);
   return button;

M02_MasterTemplete/M02_MasterTemplete_UI_Main.ts

@@ -29,6 +29,8 @@ import {
 import { askSettle } from "./M02_MasterTemplete_TreePanel_Dialogs";
 import { buildAreaPanel, type AreaPanel } from "./M02_MasterTemplete_AreaPanel";
 import { createAreaToDrawing } from "./M02_MasterTemplete_AreaToDrawing";
+import { detailHelp, HELP_TITLE } from "./M02_MasterTemplete_CardHelp";
+import { helpParts } from "./M02_MasterTemplete_CardShell";
 import type { SpreadsheetHandle } from "../A00_Common/spreadsheet/spreadsheet";
 import type { LinkOptions } from "../A00_Common/spreadsheet/spreadsheet_links";
 export interface Selection {
@@ -132,6 +134,7 @@ export function createMain(
   const save = createButton({ label: L("M02_Save"), variant: "filled" });
   // 구조물 도면 · 일위대가 · 면적산출 상세 화면 → 구조물집계표(그 열 고른 채) · 일반 단추(43-5 · 알약 · ghost 아님)
   const back = createButton({ label: L("M02_Back") });
+  const helpSlot = el("span", { className: "m02-main__help" }); // 상세 [?](49-7) — 제목 바로 옆
   const slot = el("div", { className: "m02-main__slot" }); // 도면 양식의 작도 영역 칸이 들어옴
   const notice = el("div", { className: "m02-main__notice", attrs: { hidden: "" } });
   const host = el("div", { className: "m02-main__host" });
@@ -143,7 +146,15 @@ export function createMain(
       el("div", {
         className: "m02-main__head",
         // M01 머리 꼴(39-5) — ← 는 제목 앞 · 제목 18px 왼쪽 · 단추는 오른쪽(slot 이 늘어나 밂)
-        children: [back, title, slot, reload, save, ...(extras.newItem ? [extras.newItem] : [])],
+        children: [
+          back,
+          title,
+          helpSlot,
+          slot,
+          reload,
+          save,
+          ...(extras.newItem ? [extras.newItem] : []),
+        ],
       }),
       ...(extras.search ? [extras.search] : []),
       notice,
@@ -220,6 +231,9 @@ export function createMain(
     reload.hidden = !sel;
     save.hidden = !sel || !canEdit(sel.layer, isAdmin);
     back.hidden = !sel || !(sel.kind in NUMBER_FIELD);
+    const kind = sel && sel.kind in HELP_TITLE ? (sel.kind as keyof typeof HELP_TITLE) : null;
+    const help = kind && helpParts(HELP_TITLE[kind], detailHelp(kind)); // 열 때마다 새로 — 상자는 닫힘
+    helpSlot.replaceChildren(...(help ? [help.button, help.box] : []));
   };
 
   // 면적산출 범위 → 도면 표(41-3) — 몸은 `AreaToDrawing` · 여기는 갈고리만

M02_MasterTemplete/M02_MasterTemplete_UI_Style.css

@@ -65,6 +65,7 @@
 }
 
 .m02-main__head {
+  position: relative; /* 상세 [?] 도움말 상자의 기준(49-7) */
   display: flex;
   flex-wrap: wrap;
   align-items: center;
@@ -84,6 +85,20 @@
   white-space: nowrap;
 }
 
+/* 상세 [?] — 단추는 제목 바로 옆 흐름 · 상자는 머리 아래 오른쪽에 뜸 */
+.m02-main__help {
+  display: contents;
+}
+
+.m02-main__head > .m02-main__help > .m02-struct__keys {
+  top: calc(100% + var(--spacing-8));
+  right: 0;
+  width: max-content;
+  max-width: min(36rem, 100%);
+  max-height: 70vh;
+  z-index: 20;
+}
+
 .m02-main__slot {
   display: flex;
   flex: 1 1 auto;