feat(m01): 마스터 요소 상세 일곱 화면 머리를 단가산출 로직과 같은 공용 조각으로(제목 18px · 단추 줄 · 찾기 줄)

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

M01_MasterData/M01_MasterData_UI_Head.ts

@@ -0,0 +1,36 @@
+/* =============================================================================
+ * M01_MasterData_UI_Head.ts
+ * 마스터 화면 머리 공용 조각 — 제목 줄(제목 왼쪽 · 단추 오른쪽) + 찾기 줄.
+ * 인력 · 재료 · 유가·전력 · 기계 · 소요량 · 계수 · 환율 · 요율 상세와 「단가산출 로직」 화면이 같은 조각을 써
+ * 제목 크기 · 자리 · 단추 차례 · 공용 단추 크기 · 찾기 칸 꼴이 한 벌로 같음.
+ * ========================================================================== */
+
+import { el } from "@ui/ui_template_elements";
+import "./M01_MasterData_UI_Head.css";
+
+export interface HeadOptions {
+  /** 제목 앞에 놓을 것(예: ← 목록 단추) */
+  lead?: HTMLElement[];
+  /** 제목 — 글이면 h2 를 만듦 */
+  title: HTMLElement | string;
+  /** 제목 바로 뒤 · 단추 앞 알림(고친 개수 등) */
+  status?: HTMLElement[];
+  /** 오른쪽 단추 — 차례 그대로(공용 단추 · 크기를 덮지 않음) */
+  buttons: HTMLElement[];
+}
+
+/** 제목 줄 — 제목은 18px · 왼쪽 · 남는 자리를 차지해 단추를 오른쪽으로 밂 */
+export function buildHeadBar(opts: HeadOptions): { root: HTMLElement; title: HTMLElement } {
+  const title = typeof opts.title === "string" ? el("h2", { text: opts.title }) : opts.title;
+  title.classList.add("m01-head__title");
+  const root = el("div", {
+    className: "m01-head",
+    children: [...(opts.lead ?? []), title, ...(opts.status ?? []), ...opts.buttons],
+  });
+  return { root, title };
+}
+
+/** 찾기 줄 — 찾기 칸 · 거름 · 쪽 넘기기를 위에서 아래로 쌓음 */
+export function buildHeadFilters(children: HTMLElement[]): HTMLElement {
+  return el("div", { className: "m01-head__filters", children });
+}