Merge remote-tracking branch 'origin/sub_laptop_2' into sub_laptop_3

2026-10-05 13:47:53 +09:00
parent 03c13dacf7 66cb7afbab
commit 26399f0dd8
20 changed files with 646 additions and 330 deletions
@@ -39,7 +39,6 @@ import { setLogicOpener } from "./M01_MasterData_UI_LogicLab_Modal";
 import { openCopyScreen } from "./M01_MasterData_UI_LogicLab_Copy";
 import { tl } from "./M01_MasterData_UI_LogicLab_Text";
 import {
-  buildSplit,
  emptyFlow,
  designFields,
  examplesOf,
@@ -128,10 +127,8 @@ export async function mountM01LogicLab(
    .catch(() => false);
  let recalc: number | undefined;
  const editor = el("div", { className: "m01-logic__editor" });
-  // 로직 상세 두 칸 — 왼쪽 지금 내용 · 오른쪽 흐름도(패널 자리) · 너비 비율 기억
-  const split = buildSplit(editor);
-  // 오른쪽 두 패널(흐름도 · 원문) — 하나만 열림 · 흐름도는 이 칸 안에 띄움
-  const panes = buildLogicSide(split);
+  // 로직 상세 — 왼쪽 지금 내용 · 오른쪽 접는 패널 둘(흐름도 · 원문 · 하나만 열림 · 폭 공유)
+  const panes = buildLogicSide(editor);
  const errors = el("div", { className: "m01-logic__reasons", attrs: { hidden: "" } });
  const calc = el("div", { className: "m01lab__calc" });
  const filterHost = el("div");
@@ -228,7 +225,7 @@ export async function mountM01LogicLab(
    const listing = !opened;
    list.root.hidden = !listing || !loaded;
    waiting.hidden = loaded;
-    split.root.hidden = !opened;
+    panes.root.hidden = !opened;
    back.hidden = listing;
    if (!opened) return;
    if (!opened.row) {
@@ -570,7 +567,7 @@ export async function mountM01LogicLab(
      children: [
        el("main", {
          className: "m01-logic__main",
-          children: [bar, errors, waiting, list.root, split.root],
+          children: [bar, errors, waiting, list.root, panes.root],
        }),
      ],
    }),
@@ -1,35 +1,3 @@
-/* 로직 상세 두 칸 — 왼쪽 지금 내용 · 끌기 막대 · 오른쪽 흐름도 */
-.m01lab-flow {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
-  align-items: start;
-  gap: 0;
-}
-
-.m01lab-flow[hidden] {
-  display: none;
-}
-
-.m01lab-flow__left,
-.m01lab-flow__right {
-  min-width: 0;
-}
-
-.m01lab-flow__bar {
-  align-self: stretch;
-  width: 8px;
-  margin: 0 var(--spacing-4);
-  border-radius: var(--radius-sm);
-  background: var(--color-border);
-  cursor: col-resize;
-  touch-action: none;
-}
-
-.m01lab-flow__bar:hover,
-.m01lab-flow__bar:focus-visible {
-  background: var(--color-primary);
-}
-
 .m01lab-flow__wait {
  margin: 0;
  padding: var(--spacing-16);
@@ -39,10 +7,6 @@
  text-align: center;
 }

-.m01lab-flow__bar[hidden] {
-  display: none;
-}
-
 .m01lab-flow__note {
  margin: 0 0 var(--spacing-8);
  color: var(--color-text-secondary);
@@ -1,7 +1,6 @@
 /* =============================================================================
 * M01_MasterData_UI_LogicLab_Flow.ts
- * 로직 상세 두 칸 — 왼쪽 지금 내용(보기) · 가운데 끌기 막대 · 오른쪽 흐름도 패널
- * 너비 — 패널이 없으면 두 칸 비율(끌기 막대 · localStorage) · 패널이 있으면 패널이 알린 너비(px · 패널 가장자리 끌기)
+ * 로직 상세 오른쪽 흐름도 — 칸 · 폭은 오른쪽 접는 패널(LogicLab_Side) 몫
 * 잇기(mountLogicFlow) — 패널(M02_DF_Panel) · 왼쪽 보기(LogicLab_FlowView) · 입력 값 · 다른 로직 흐름 받기
 * DataFlow 파일은 import() 로 늦게(엔진이 M01 첫 묶음에 안 들어가게). 정함 `docs/raw/M01_쉬운단가/흐름도_적용_정함.md` 2 · 5 · 6 · 7
 * ========================================================================== */
@@ -14,7 +13,6 @@ import type { CfValues } from "../M02_MasterTemplete/DataFlow/M02_DF_Eval";
 import "./M01_MasterData_UI_LogicLab_Flow.css";

 const TEXT = {
-  Resize: ["두 칸 너비 — 끌어서 조절", "Drag to resize the two columns"],
  New: ["신규 로직", "New logic"],
  Waiting: ["흐름도 불러오는 중", "Loading the flow diagram"],
  Converted: [
@@ -27,93 +25,13 @@ const TEXT = {
 export const tf = (key: keyof typeof TEXT, v = ""): string =>
  TEXT[key][currentLanguageIndex === 1 ? 1 : 0].replace("{v}", v);

-const STORE = "m01.logic.flowRatio";
-const MIN = 0.25;
-const MAX = 0.75;
-
-const clamp = (r: number): number => Math.min(MAX, Math.max(MIN, r));
-
-function readRatio(): number {
-  try {
-    const r = Number(localStorage.getItem(STORE));
-    return r ? clamp(r) : 0.5;
-  } catch {
-    return 0.5;
-  }
-}
-
 export interface SplitHandle {
-  root: HTMLElement;
  /** 오른쪽 칸 — 흐름도 패널을 붙이는 곳 */
  right: HTMLElement;
-  /** 패널이 정한 너비(px) — 끌기 막대는 숨김(패널 가장자리로 조절) · null = 비율로 돌아감 */
+  /** 패널이 알린 너비(px) · null = 패널 내림 */
  setRight(px: number | null): void;
 }

-/** 두 칸 만들기 — left 는 지금 화면 그대로 왼쪽에 둠 */
-export function buildSplit(left: HTMLElement): SplitHandle {
-  const right = el("div", { className: "m01lab-flow__right" });
-  const bar = el("div", {
-    className: "m01lab-flow__bar",
-    attrs: {
-      role: "separator",
-      "aria-orientation": "vertical",
-      "aria-label": tf("Resize"),
-      title: tf("Resize"),
-      tabindex: "0",
-    },
-  });
-  const leftCol = el("div", { className: "m01lab-flow__left", children: [left] });
-  const root = el("div", { className: "m01lab-flow", children: [leftCol, bar, right] });
-  let ratio = readRatio();
-  let panelPx: number | null = null;
-  const apply = (): void => {
-    root.style.gridTemplateColumns =
-      panelPx === null
-        ? `minmax(0, ${ratio}fr) auto minmax(0, ${1 - ratio}fr)`
-        : `minmax(0, 1fr) ${panelPx}px`;
-  };
-  const keep = (): void => {
-    try {
-      localStorage.setItem(STORE, String(ratio));
-    } catch {
-      /* 기억 못 해도 지금 화면은 그대로 */
-    }
-  };
-  bar.addEventListener("pointerdown", (ev) => {
-    if (ev.button !== 0) return;
-    ev.preventDefault();
-    const box = root.getBoundingClientRect();
-    const move = (m: PointerEvent): void => {
-      ratio = clamp((m.clientX - box.left) / box.width);
-      apply();
-    };
-    const up = (): void => {
-      window.removeEventListener("pointermove", move);
-      window.removeEventListener("pointerup", up);
-      keep();
-    };
-    window.addEventListener("pointermove", move);
-    window.addEventListener("pointerup", up);
-  });
-  // 키보드 — 왼쪽 · 오른쪽 화살표로 조금씩
-  bar.addEventListener("keydown", (ev) => {
-    const step = ev.key === "ArrowLeft" ? -0.05 : ev.key === "ArrowRight" ? 0.05 : 0;
-    if (!step) return;
-    ev.preventDefault();
-    ratio = clamp(ratio + step);
-    apply();
-    keep();
-  });
-  const setRight = (px: number | null): void => {
-    panelPx = px;
-    bar.hidden = px !== null;
-    apply();
-  };
-  apply();
-  return { root, right, setRight };
-}
-
 /* ── 흐름 받기 · 잇기 ─────────────────────────────────────────────────── */

 export interface FlowAnswer {
@@ -1,15 +1,11 @@
-/* 로직 상세 오른쪽 두 패널 — 흐름도 · 원문 · 공용 접기 카드(접힌 카드 = 제목 행) */
-.m01lab-side {
-  min-width: 0;
-}
-
-.m01lab-side__card,
+/* 로직 상세 오른쪽 두 패널(흐름도 · 원문) — 공용 오른쪽 접는 패널 안 */
 .m01lab-side__slot {
  min-width: 0;
 }

-/* 카드 제목 행이 접기 단추 — 흐름도 패널 자체 접기 단추 · 테두리는 뺌 */
-.m01lab-side .m02-dfp__toggle {
+/* 접기 · 폭은 공용 패널 몫 — 흐름도 패널 자체 접기 단추 · 끌기 경계 · 테두리는 뺌 */
+.m01lab-side .m02-dfp__toggle,
+.m01lab-side .m02-dfp__grip {
  display: none;
 }

@@ -1,53 +1,31 @@
 /* =============================================================================
 * M01_MasterData_UI_LogicLab_Side.ts
- * 로직 상세 오른쪽 두 패널 — 「흐름도」(다이어그램 · 상세 내용 = M02_DF_Panel) · 「원문」(품셈 본문 절)
- * 공용 접기 카드(`ui-collapsible` · 제목 행 누름 · 캐럿) 두 장 — attachCollapsible 토글 위에 하나만 열림 규칙
- * 둘 다 접기 됨 · 접힌 카드 = 제목 행만
- * 열린 패널은 계정 취향(`m01-logic-panel`)으로 기억 · 원문은 출처 글로 서버가 찾음(`GET /m01/logic/source`)
+ * 로직 상세 — 왼쪽 지금 내용 · 오른쪽 접는 패널 둘 「흐름도」(M02_DF_Panel) · 「원문」(품셈 본문 절)
+ * 공용 오른쪽 접는 패널(ui_template_side_panels) — 하나만 열림 · 모두 접힘 됨 · 폭 공유 · 접힌 패널 = 세로 글 띠
+ * 열린 패널 · 폭은 취향 키(`m01-logic-side`) · 원문 = 공용 원문 보기(`LogicLab_Source`)
 * ========================================================================== */

 import { currentLanguageIndex } from "@ui/ui_template_locale";
-import { attachCollapsible } from "@ui/ui_template_collapsible";
+import { createSidePanels } from "@ui/ui_template_side_panels";
 import { el } from "@ui/ui_template_elements";
-import { API_BASE_URL } from "@config/config_frontend";
-import { readStateRaw, writeStateRaw } from "../A00_Common/b_page_state";
 import type { SplitHandle } from "./M01_MasterData_UI_LogicLab_Flow";
+import { createSourceView } from "./M01_MasterData_UI_LogicLab_Source";
 import "../M02_MasterTemplete/DataFlow/M02_DF_Panel.css";
 import "./M01_MasterData_UI_LogicLab_Side.css";

 const TEXT = {
  Flow: ["흐름도", "Flow"],
  Source: ["원문", "Source"],
-  Loading: ["원문 찾는 중", "Looking up the source"],
-  None: ["원문 연결 없음", "No linked source"],
-  From: ["출처", "Source"],
-  NoSource: ["출처 없음", "No source"],
-  Near: ["{v} 절이 없어 위 절", "No {v} section — showing the parent"],
 } as const;

-const ts = (key: keyof typeof TEXT, v = ""): string =>
-  TEXT[key][currentLanguageIndex === 1 ? 1 : 0].replace("{v}", v);
-
-/** 둘 다 접힘 — 제목 행 둘이 들어가는 칸 너비 */
-const FOLDED = 140;
+const ts = (key: keyof typeof TEXT): string => TEXT[key][currentLanguageIndex === 1 ? 1 : 0];

 export type PanelPick = "flow" | "source" | "none";

-interface Block {
-  h?: number;
-  text?: string;
-  p?: string;
-  table?: string[][];
-}
-interface Found {
-  number: string;
-  matched: string;
-  file: string;
-  blocks: Block[];
-}
-
 export interface LogicSide {
-  /** 흐름도 패널에 넘길 칸 — right = 흐름도 자리 · setRight = 흐름도 패널이 알린 너비 */
+  /** [왼쪽 지금 내용, 오른쪽 패널] 칸 */
+  root: HTMLElement;
+  /** 흐름도 패널에 넘길 칸 — right = 흐름도 자리 · 폭은 오른쪽 패널 몫(setRight 안 씀) */
  flowSplit: SplitHandle;
  flowFolded(): boolean;
  pick(next: PanelPick): void;
@@ -57,136 +35,40 @@ export interface LogicSide {
  showSource(src: string): void;
 }

-const readPick = (): PanelPick => {
-  const got = readStateRaw("m01-logic-panel");
-  return got === "source" || got === "none" ? got : "flow";
-};
-
-function blockNode(b: Block): HTMLElement {
-  if (b.table)
-    return el("div", {
-      className: "m01-logic__scroll",
-      children: [
-        el("table", {
-          className: "m01-logic__grid m01lab-src__table",
-          children: [
-            el("tbody", {
-              children: b.table.map((r) =>
-                el("tr", { children: r.map((c) => el("td", { text: c })) }),
-              ),
-            }),
-          ],
-        }),
-      ],
-    });
-  if (b.h) return el("h4", { className: "m01lab-src__head", text: b.text ?? "" });
-  return el("p", { className: "m01lab-src__p", text: b.p ?? "" });
-}
-
-export function buildLogicSide(split: SplitHandle): LogicSide {
+export function buildLogicSide(left: HTMLElement): LogicSide {
  const flowSlot = el("div", { className: "m01lab-side__slot" });
-  const body = el("div", { className: "m01lab-src__body" });
-  const title = el("strong", { className: "m02-dfp__title" });
-  const card = (label: string, inner: HTMLElement): HTMLElement =>
-    el("section", {
-      className: "m01lab-side__card ui-collapsible ui-sidebar-section ui-sidebar-card",
-      children: [el("h3", { className: "ui-collapsible__title", text: label }), inner],
-    });
-  const flowCard = card(ts("Flow"), flowSlot);
-  const sourceCard = card(
-    ts("Source"),
-    el("div", { className: "m01lab-src", children: [title, body] }),
-  );
-  const side = el("div", {
-    className: "m01lab-side ui-sidebar-panel",
-    children: [flowCard, sourceCard],
+  const source = createSourceView();
+  const sp = createSidePanels({
+    prefKey: "m01-logic-side",
+    defaultWidth: 520,
+    minWidth: 320,
+    panels: [
+      { id: "flow", title: ts("Flow"), body: flowSlot },
+      { id: "source", title: ts("Source"), body: source.root },
+    ],
+    onChange: () => {
+      flowFold?.(sp.current() !== "flow"); // 다시 펴면 흐름도 판을 폭에 맞춤
+      load();
+    },
  });
-  attachCollapsible(side);
-  // 공용 토글 뒤 — 연 카드만 남기고 다른 카드는 접음(접었으면 둘 다 닫힘)
-  side.addEventListener("click", (ev) => {
-    const at = (ev.target as HTMLElement).closest(".ui-collapsible__title")?.parentElement;
-    if (at !== flowCard && at !== sourceCard) return;
-    pick(at.classList.contains("is-collapsed") ? "none" : at === flowCard ? "flow" : "source");
+  const root = el("div", {
+    className: "m01lab-side ui-side-panels-row",
+    children: [left, sp.root],
  });
-  split.right.replaceChildren(side);

-  let now = readPick();
-  let flowPx: number | null = null;
  let flowFold: ((on: boolean) => void) | null = null;
  let want = "";
-  let shown: string | null = null;
-
-  /** 카드 안팎 여백(좌우 안쪽 + 테두리) — 흐름도 패널 너비에 더함 */
-  const pad = (): number => {
-    const s = getComputedStyle(flowCard);
-    return ["paddingLeft", "paddingRight", "borderLeftWidth", "borderRightWidth"].reduce(
-      (n, k) => n + (parseFloat(s[k as "paddingLeft"]) || 0),
-      0,
-    );
-  };
-  /** 칸 너비 — 원문(또는 흐름도가 아직 안 뜸) = 두 칸 비율 · 흐름도 = 패널 너비 + 카드 여백 · 둘 다 접힘 = 제목 행 */
-  const width = (): void =>
-    split.setRight(
-      now === "source" || (now === "flow" && flowPx === null)
-        ? null
-        : now === "flow"
-          ? (flowPx ?? 0) + pad()
-          : FOLDED,
-    );

+  /** 원문 패널이 열려 있을 때만 찾음 */
  const load = (): void => {
-    if (now !== "source" || shown === want) return;
-    const src = (shown = want);
-    title.textContent = src || ts("NoSource");
-    body.replaceChildren(el("p", { className: "m01-logic__muted", text: ts("Loading") }));
-    const none = (): void =>
-      body.replaceChildren(
-        el("p", { className: "m01lab-src__none", text: ts("None") }),
-        el("p", { className: "m01-logic__muted", text: `${ts("From")} · ${src || "—"}` }),
-      );
-    if (!src.trim()) return none();
-    void fetch(`${API_BASE_URL}/m01/logic/source?${new URLSearchParams({ src })}`, {
-      credentials: "include",
-    })
-      .then((r) => (r.ok ? (r.json() as Promise<{ found: Found[] }>) : { found: [] }))
-      .catch(() => ({ found: [] as Found[] }))
-      .then(({ found }) => {
-        if (shown !== src) return;
-        if (!found.length) return none();
-        body.replaceChildren(
-          ...found.flatMap((f) => [
-            el("p", {
-              className: "m01-logic__muted m01lab-src__file",
-              text: f.matched === f.number ? f.file : `${f.file} · ${ts("Near", f.number)}`,
-            }),
-            ...f.blocks.map(blockNode),
-          ]),
-        );
-      });
+    if (sp.current() === "source") source.show(want);
  };

-  const pick = (next: PanelPick): void => {
-    if (next !== now) writeStateRaw("m01-logic-panel", next);
-    now = next;
-    flowFold?.(now !== "flow"); // 칸을 줄이기 전에 — 흐름도 패널이 접기 전 너비를 재어 둠
-    flowCard.classList.toggle("is-collapsed", now !== "flow");
-    sourceCard.classList.toggle("is-collapsed", now !== "source");
-    width();
-    load();
-  };
-
-  pick(now);
  return {
-    flowSplit: {
-      root: split.root,
-      right: flowSlot,
-      setRight: (px) => {
-        flowPx = px;
-        width();
-      },
-    },
-    flowFolded: () => now !== "flow",
-    pick,
+    root,
+    flowSplit: { right: flowSlot, setRight: () => undefined },
+    flowFolded: () => sp.current() !== "flow",
+    pick: (next) => sp.open(next === "none" ? null : next),
    bindFlow: (f) => {
      flowFold = f;
    },
@@ -0,0 +1,101 @@
+/* =============================================================================
+ * M01_MasterData_UI_LogicLab_Source.ts
+ * 원문 보기(품셈 본문 절) — 출처 글로 서버가 찾음(`GET /m01/logic/source`) · 늦게 온 답은 버림
+ * M01 로직 상세 「원문」 패널 · M02 일위대가 상세 「원문」 패널(47-4)이 같이 씀
+ * ========================================================================== */
+
+import { currentLanguageIndex } from "@ui/ui_template_locale";
+import { el } from "@ui/ui_template_elements";
+import { API_BASE_URL } from "@config/config_frontend";
+import "../M02_MasterTemplete/DataFlow/M02_DF_Panel.css";
+import "./M01_MasterData_UI_LogicLab_Side.css";
+
+const TEXT = {
+  Loading: ["원문 찾는 중", "Looking up the source"],
+  None: ["원문 연결 없음", "No linked source"],
+  From: ["출처", "Source"],
+  NoSource: ["출처 없음", "No source"],
+  Near: ["{v} 절이 없어 위 절", "No {v} section — showing the parent"],
+} as const;
+
+const ts = (key: keyof typeof TEXT, v = ""): string =>
+  TEXT[key][currentLanguageIndex === 1 ? 1 : 0].replace("{v}", v);
+
+interface Block {
+  h?: number;
+  text?: string;
+  p?: string;
+  table?: string[][];
+}
+interface Found {
+  number: string;
+  matched: string;
+  file: string;
+  blocks: Block[];
+}
+
+function blockNode(b: Block): HTMLElement {
+  if (b.table)
+    return el("div", {
+      className: "m01-logic__scroll",
+      children: [
+        el("table", {
+          className: "m01-logic__grid m01lab-src__table",
+          children: [
+            el("tbody", {
+              children: b.table.map((r) =>
+                el("tr", { children: r.map((c) => el("td", { text: c })) }),
+              ),
+            }),
+          ],
+        }),
+      ],
+    });
+  if (b.h) return el("h4", { className: "m01lab-src__head", text: b.text ?? "" });
+  return el("p", { className: "m01lab-src__p", text: b.p ?? "" });
+}
+
+export interface SourceView {
+  root: HTMLElement;
+  /** 그 출처 글의 원문을 그림 — 지금 보이는 것과 같으면 안 부름 */
+  show(src: string): void;
+}
+
+export function createSourceView(): SourceView {
+  const body = el("div", { className: "m01lab-src__body" });
+  const title = el("strong", { className: "m02-dfp__title" });
+  let shown: string | null = null;
+
+  const show = (src: string): void => {
+    if (shown === src) return;
+    shown = src;
+    title.textContent = src || ts("NoSource");
+    body.replaceChildren(el("p", { className: "m01-logic__muted", text: ts("Loading") }));
+    const none = (): void =>
+      body.replaceChildren(
+        el("p", { className: "m01lab-src__none", text: ts("None") }),
+        el("p", { className: "m01-logic__muted", text: `${ts("From")} · ${src || "—"}` }),
+      );
+    if (!src.trim()) return none();
+    void fetch(`${API_BASE_URL}/m01/logic/source?${new URLSearchParams({ src })}`, {
+      credentials: "include",
+    })
+      .then((r) => (r.ok ? (r.json() as Promise<{ found: Found[] }>) : { found: [] }))
+      .catch(() => ({ found: [] as Found[] }))
+      .then(({ found }) => {
+        if (shown !== src) return;
+        if (!found.length) return none();
+        body.replaceChildren(
+          ...found.flatMap((f) => [
+            el("p", {
+              className: "m01-logic__muted m01lab-src__file",
+              text: f.matched === f.number ? f.file : `${f.file} · ${ts("Near", f.number)}`,
+            }),
+            ...f.blocks.map(blockNode),
+          ]),
+        );
+      });
+  };
+
+  return { root: el("div", { className: "m01lab-src", children: [title, body] }), show };
+}
@@ -41,7 +41,7 @@ def _logics(codes: list[str]) -> tuple[list[dict], list[str]]:


 def _listed(logics: list[dict]) -> list[dict[str, Any]]:
-    """로직 줄마다 `{로직, 이름, 결과단위, 입력: [{이름, 설명, 단위, 고르기?, 범위?, 자동값}]}`."""
+    """로직 줄마다 `{로직, 이름, 결과단위, 출처, 입력: [{이름, 설명, 단위, 고르기?, 범위?, 자동값}]}`."""
    whole = m01.loaded()[1]
    out = []
    for logic in logics:
@@ -57,6 +57,7 @@ def _listed(logics: list[dict]) -> list[dict[str, Any]]:
                "로직": logic.get("키"),
                "이름": logic.get("이름"),
                "결과단위": logic.get("결과단위"),
+                "출처": logic.get("출처"),
                "입력": specs,
            }
        )
@@ -313,6 +313,8 @@ export interface ItemLogic {
  로직: string;
  이름: string;
  결과단위?: string;
+  /** 품셈 출처 글(47-4 · 원문 패널) */
+  출처?: string | null;
  입력: ItemInput[];
 }

@@ -119,6 +119,17 @@
  background: var(--color-mist-violet);
 }

+/* 고른 줄(47-5) — 옵션 값 줄까지 한 덩이 · 왼쪽 띠 */
+.m02-labrow .m02-labrow__row.is-selected,
+.m02-labrow .m02-labrow__optrow.is-selected {
+  background: var(--color-mist-violet);
+}
+
+.m02-labrow__row.is-selected > td:first-child,
+.m02-labrow__optrow.is-selected > td:first-child {
+  box-shadow: inset 3px 0 0 var(--color-primary);
+}
+
 /* 별칭 칸(44-6) — 칸 안 글상자 · 누르면 바로 고침 */
 .m02-labrow__alias {
  min-width: 7rem;
@@ -2,15 +2,19 @@
 * M02_MasterTemplete_Labor_Detail.ts
 * 일위대가 상세(39-3) — 구조물 열마다 하나(`labor/<열>.json`) · UI_Main 종류 `labor` 가 이 부품을 붙임
 * (양식 길 읽기 · [저장] · [다시 읽기]는 UI_Main). 차례 = 정보(단위 · 본뜬) → 담은 로직 → 자재목록 → 다이어그램.
- *  · 담은 로직 줄 누름 = 입력 모달(`Labor_Input`) · [확인] = 화면 캐시만 · 저장은 [저장]
+ *  · 담은 로직 줄 누름 = 고름(하이라이트 · 다시 그려도 유지 · 47-5) · [옵션] = 입력 모달(`Labor_Input`) ·
+ *    [확인] = 화면 캐시만 · 저장은 [저장]
 *  · 금액 = 서버 calc(기준 ③ · 최신 응답만 · 저장 안 함) · 고칠 때마다 뒤에서 다시 셈
 *  · 같은 로직 두 번 · 같은 자재 두 번 막음 · 빈 일위대가도 저장 됨
+ *  · 오른쪽 「원문」 접는 패널(47-4 · 상세만 · 공용 `ui_template_side_panels`) = 고른 줄 로직의 출처 원문
 * ========================================================================== */

 import { createButton, createInputField, el, showToast } from "@ui/ui_template_elements";
+import { createSidePanels } from "@ui/ui_template_side_panels";
 import { ROUTES } from "@config/config_frontend";
 import { navigateTo } from "../A00_Common/router";
 import { setPendingLogicKey } from "../M01_MasterData/M01_MasterData_UI_Side";
+import { createSourceView } from "../M01_MasterData/M01_MasterData_UI_LogicLab_Source";
 import type { Workbook } from "../A00_Common/spreadsheet/spreadsheet";
 import { recalcWorkbook } from "../A00_Common/spreadsheet/spreadsheet_recalc";
 import {
@@ -57,8 +61,8 @@ export interface LaborDetailOptions {
  onChanged: (dirty: boolean) => void;
  /** 「면적산출에서 잇기」 — 그 열 면적산출 상세로(옮겨 가면 참 · 취소 = 거짓 · 없으면 단추 없음) */
  goArea: GoArea | null;
-  /** 구조물 조합 카드 갈래(43-4) — 단가산출 로직 표 + 자재목록만 · 올리기 · 내리기 · 로직 추가 ·
-   * 정보(단위 · 본뜬) · 다이어그램 없음 · 빼기 · 자재 추가 · 줄 · 수량 모달은 상세와 같음 */
+  /** 구조물 조합 카드 갈래(43-4) — 단가산출 로직 표 + 자재목록만 · 위로 · 아래로 · 로직 추가 ·
+   * 정보(단위 · 본뜬) · 다이어그램 없음 · 옵션 · 삭제 · 자재 추가 · 줄 · 수량 모달은 상세와 같음 */
  card?: boolean;
 }

@@ -84,6 +88,8 @@ export function mountLaborDetail(
  let seq = 0;
  let timer = 0;
  let alive = true;
+  /** 고른 줄 로직 키(47-5) — 키로 둬서 순서가 바뀌어도 따라감 */
+  let picked: string | null = null;
  /** 그 열 면적산출의 알약 → 칸 · 값(저장본 · 서버 calc 와 같은 것) */
  let links = new Map<string, { 칸: string; 값: number | null }>();
  const cells = (): Map<string, string> => new Map([...links].map(([k, v]) => [k, v.칸]));
@@ -105,6 +111,26 @@ export function mountLaborDetail(
    children: [el("summary", { text: diagramTitle() }), dgHost],
  });

+  /** 원문 패널(47-4 · 카드 갈래엔 없음) — 열려 있을 때만 찾음 · 고른 줄 없으면 안내 한 줄 */
+  const source = createSourceView();
+  const sourceHost = el("div", { attrs: { "data-labor-source": "" } });
+  const side = opt.card
+    ? null
+    : createSidePanels({
+        prefKey: "m02-labor-side",
+        panels: [{ id: "source", title: tc("Labor_Source"), body: sourceHost }],
+        onChange: () => showSource(),
+      });
+  function showSource(): void {
+    if (side?.current() !== "source") return;
+    if (!picked)
+      return void sourceHost.replaceChildren(
+        el("p", { className: "m01-logic__muted", text: tc("Labor_SourceHint") }),
+      );
+    source.show(logics.get(picked)?.출처 ?? "");
+    if (sourceHost.firstChild !== source.root) sourceHost.replaceChildren(source.root);
+  }
+
  const lineOf = (key: string) => calc?.줄.find((l) => l.로직 === key);
  const matOf = (code: string) => calc?.자재.find((m) => m.코드 === code);

@@ -133,17 +159,18 @@ export function mountLaborDetail(
  const draw = (): void => {
    logicHost.replaceChildren(
      logicTable(
-        { rows: cur.담은로직, logics, calc, fail, cells: cells() },
-        // 읽기만이면 순서 · 빼기 없음(줄 누름 = 보기 모달은 둠)
+        { rows: cur.담은로직, logics, calc, fail, cells: cells(), selected: picked },
+        // 읽기만이면 순서 · 삭제 없음([옵션] = 보기 모달은 둠)
        edit
          ? {
-              open: openRow,
+              open: pick,
+              option: openRow,
              qty: openQty,
              ...(opt.card ? {} : { move }),
              remove: removeRow,
              alias: setAlias,
            }
-          : { open: openRow },
+          : { open: pick, option: openRow },
      ),
    );
    matHost.replaceChildren(
@@ -153,6 +180,7 @@ export function mountLaborDetail(
      ),
    );
    drawDg();
+    showSource();
  };

  /** 서버 다시 셈 — 늦게 온 답은 버림(최신 응답만) */
@@ -265,7 +293,15 @@ export function mountLaborDetail(
    [cur.담은로직[i], cur.담은로직[j]] = [cur.담은로직[j], cur.담은로직[i]];
    changed();
  }
+  /** 줄 고름(47-5) — 하이라이트(표만 · 다이어그램 안 다시 그림) + 원문 패널(47-4) · 화면 캐시 안 바뀜 */
+  function pick(i: number): void {
+    picked = cur.담은로직[i].로직;
+    for (const tr of logicHost.querySelectorAll<HTMLElement>("[data-labor-logic],[data-labor-opt]"))
+      tr.classList.toggle("is-selected", (tr.dataset.laborLogic ?? tr.dataset.laborOpt) === picked);
+    showSource();
+  }
  function removeRow(i: number): void {
+    if (cur.담은로직[i].로직 === picked) picked = null;
    cur.담은로직.splice(i, 1);
    changed();
  }
@@ -379,26 +415,30 @@ export function mountLaborDetail(
      ],
    });

+  const editor = (body: HTMLElement): HTMLElement =>
+    side ? el("div", { className: "ui-side-panels-row", children: [body, side.root] }) : body;
  host.replaceChildren(
-    el("div", {
-      className: "m01-logic__editor m01-combo m02-labor__edit",
-      attrs: { "data-labor": opt.column },
-      children: [
-        ...(opt.card
-          ? []
-          : [
-              el("section", {
-                className: "m01lab__box m01-logic__section",
-                children: [
-                  el("div", { className: "m01lab__info", children: [unit.root, origin.root] }),
-                ],
-              }),
-            ]),
-        section(tc("Logics_Title"), opt.card ? null : addLogic, logicHost),
-        section(tc("Labor_Mats"), addMat, matHost),
-        ...(opt.card ? [] : [dgBox]),
-      ],
-    }),
+    editor(
+      el("div", {
+        className: "m01-logic__editor m01-combo m02-labor__edit",
+        attrs: { "data-labor": opt.column },
+        children: [
+          ...(opt.card
+            ? []
+            : [
+                el("section", {
+                  className: "m01lab__box m01-logic__section",
+                  children: [
+                    el("div", { className: "m01lab__info", children: [unit.root, origin.root] }),
+                  ],
+                }),
+              ]),
+          section(tc("Logics_Title"), opt.card ? null : addLogic, logicHost),
+          section(tc("Labor_Mats"), addMat, matHost),
+          ...(opt.card ? [] : [dgBox]),
+        ],
+      }),
+    ),
  );
  draw();
  // 로직 입력 목록 · 면적산출 이은 칸(없으면 빈 것 — 새 구조물)을 받은 뒤 첫 계산
@@ -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: "" }),
@@ -31,9 +31,15 @@ const TEXT = {
  Alias_Edit: ["눌러서 별칭 고침", "Click to edit alias"],
  Col_Unit: ["결과 단위", "Result unit"],
  Col_Move: ["순서", "Move"],
-  Up: ["올리기", "Up"],
-  Down: ["내리기", "Down"],
-  Remove: ["빼기", "Remove"],
+  Up: ["위로", "Up"],
+  Down: ["아래로", "Down"],
+  Remove: ["삭제", "Delete"],
+  Labor_Option: ["옵션", "Options"],
+  Labor_Source: ["원문", "Source"],
+  Labor_SourceHint: [
+    "단가산출 로직 줄을 고르면 그 원문이 보임",
+    "Pick a logic row to see its source",
+  ],
  AddLogic: ["로직 추가", "Add logic"],
  NoLogic: ["단가산출 로직 없음", "No logics yet"],
  Open: ["열기", "Open"],
@@ -78,7 +78,7 @@ def test_일위대가_카드는_상세_카드_갈래():
    assert "...(opt.card ? {} : { move })" in detail  # 순서 단추 없음 · 빼기는 그대로
    assert "opt.card ? null : addLogic" in detail and "...(opt.card ? [] : [dgBox])," in detail
    rows = _text("M02_MasterTemplete_Labor_Rows.ts")
-    assert "const tools = !!(move || remove);" in rows and "compactTable" not in rows
+    assert "const tools = !!(move || remove || option);" in rows and "compactTable" not in rows
    assert "compact" not in _text("M02_MasterTemplete_Labor_View.ts").split("*/", 1)[1]


@@ -90,3 +90,24 @@ def test_일위대가_상세_단위는_표준_단위_고르기():
    assert "extra: [unit0, cur.단위].filter((u): u is string => !!u)," in detail
    assert "cur.단위 = u === NO_UNIT ? null : u;" in detail
    assert "readOnly: !edit," in detail and "maxLength = 20" not in detail
+
+
+def test_일위대가_줄_고름과_옵션_단추():
+    """47-5 — 줄 누름 = 고름(하이라이트 · 키로 둬서 다시 그려도 유지) · 넣을 값 모달 = [옵션] ·
+    단추 위로 · 아래로 · 옵션 · 삭제(빨강) · 묶음 간격 = 공용 `ui-btn-group`."""
+    detail = _text("M02_MasterTemplete_Labor_Detail.ts")
+    assert "open: pick," in detail and "option: openRow," in detail
+    assert "{ open: pick, option: openRow }" in detail  # 읽기만도 고름 · [옵션] = 보기 모달
+    assert "selected: picked" in detail
+    rows = _text("M02_MasterTemplete_Labor_Rows.ts")
+    up, down = rows.index('small(tc("Up")'), rows.index('small(tc("Down")')
+    opt, rm = (
+        rows.index('small(tc("Labor_Option")'),
+        rows.index('small(tc("Remove"), () => remove(i), "danger")'),
+    )
+    assert up < down < opt < rm and 'className: "ui-btn-group"' in rows
+    text = _text("M02_MasterTemplete_Labor_Text.ts")
+    for t in ('Up: ["위로"', 'Down: ["아래로"', 'Remove: ["삭제"', 'Labor_Option: ["옵션"'):
+        assert t in text
+    css = (ROOT / "ui_template" / "ui_template_general_layout.css").read_text(encoding="utf-8")
+    assert ".ui-btn-group {" in css and "gap: var(--btn-group-gap);" in css
@@ -43,6 +43,7 @@ def test_입력_목록은_키_차례_겹침_한_번_자동값_빠진_로직(clie
    assert got["빠진로직"] == ["GF999999"]
    one = got["로직"][1]
    assert one["이름"] and one["결과단위"]
+    assert all("출처" in x for x in got["로직"])  # 47-4 원문 패널
    assert one["입력"] and all("자동값" in i and "이름" in i for i in one["입력"])
    # 입력 목록 몸 한 벌(M02_Labor_Inputs)
    assert got["로직"] == labor_inputs.logic_inputs([B, A])["로직"]
@@ -0,0 +1,141 @@
+/* 47-3 M01 단가산출 로직 상세 오른쪽 패널 — `orca eval --expression "$(cat 이 파일)"` 한 번에 돎 · JSON 돌려줌.
+ *
+ * 시작 화면: M01 마스터 데이터(#/m01-master-data · 시스템 관리자 로그인) · 아무 화면이나.
+ *   로직 GC000277(건설품셈 토목 1-1-2 유도선 설치 및 해체)을 엶 · 고치지 않음 · 끝에 열린 패널 · 폭을 처음 값으로 되돌림.
+ * 기대 수치:
+ *   panels = ["흐름도","원문"] · 패널 몸 = 공용 패널(.ui-side-panels) · 왼쪽 칸 오른쪽에 붙음(sideRight)
+ *   flow   = {open:["flow"], strips:["원문"]} · 흐름도 판 보임 · 흐름도 패널 자체 접기 단추 · 끌기 경계 안 보임(inner 0)
+ *   source = {open:["source"], strips:["흐름도"]} · 폭 = flow 폭(공유) · srcHead 에 「1-1-2 유도선」 · srcTable true
+ *   none   = {open:[], strips:["흐름도","원문"]} · 띠 너비 < 40
+ *   back   = {open:["flow"]}(흐름도 띠로 다시 폄)
+ *   drag   = 왼쪽 경계를 100px 왼쪽으로 끌면 폭 +100 · 원문으로 바꿔도 같은 폭 · key = 화살표 ← 한 번 +20
+ *   noLink = 「원문 연결 없음」 + 「출처 · …」(서버가 빈 목록을 줄 때 · fetch 를 잠시 바꿔 봄)
+ *   restored = 처음 취향 값과 같음
+ */
+(async () => {
+  const W = (ms) => new Promise((r) => setTimeout(r, ms));
+  const $ = (s, root = document) => root.querySelector(s);
+  const $$ = (s, root = document) => [...root.querySelectorAll(s)];
+  const until = async (f, ms = 15000) => {
+    for (let t = 0; t < ms; t += 200) {
+      const v = f();
+      if (v) return v;
+      await W(200);
+    }
+    return null;
+  };
+  const PREF = "aislo:pref:m01-logic-side";
+  const first = localStorage.getItem(PREF);
+  const out = {};
+  const openLogic = async (key) => {
+    sessionStorage.setItem("m01.logic.pending", key);
+    const tab = $$(".ui-collapsible__title").find((h) => h.innerText.trim() === "단가산출 로직");
+    if (!tab) return false;
+    if (!tab.closest(".ui-collapsible").classList.contains("is-collapsed")) tab.click();
+    tab.click();
+    return until(() => {
+      const t = $(".m02-dfp__title")?.innerText ?? "";
+      return !$(".m01lab-side")?.hidden && $(".m01lab-side .m02-dfp") && t;
+    });
+  };
+  if (!(await openLogic("GC000277"))) return JSON.stringify({ error: "로직 못 엶" });
+  await W(800);
+  const shown = (n) => !!n && n.getBoundingClientRect().height > 0;
+  const panel = (id) => $(`.m01lab-side .ui-side-panels__panel[data-panel="${id}"]`);
+  const strip = (title) =>
+    $$(".m01lab-side .ui-side-panels__strip").find((s) => s.innerText.replace(/\s/g, "") === title);
+  const wOf = (n) => Math.round(n.getBoundingClientRect().width);
+  const state = () => ({
+    open: ["flow", "source"].filter((id) => shown(panel(id))),
+    strips: $$(".m01lab-side .ui-side-panels__strip")
+      .filter(shown)
+      .map((s) => s.innerText.replace(/\s/g, "")),
+    width: ["flow", "source"].filter((id) => shown(panel(id))).map((id) => wOf(panel(id)))[0] ?? 0,
+  });
+  const pref = () => JSON.parse(localStorage.getItem(PREF) ?? "{}");
+  out.panels = $$(".m01lab-side .ui-side-panels__title").map((t) => t.innerText.trim());
+  const editor = $(".m01lab-side > .m01-logic__editor").getBoundingClientRect();
+  const side = $(".m01lab-side .ui-side-panels").getBoundingClientRect();
+  out.sideRight = Math.round(side.left - editor.right);
+  // 처음 = 흐름도 열림으로 맞춤
+  if (!shown(panel("flow"))) {
+    strip("흐름도").click();
+    await W(400);
+  }
+  out.flow = state();
+  out.flowDiagram = shown($(".m02-dfp__open", panel("flow")));
+  out.inner = $$(".m01lab-side .m02-dfp__toggle, .m01lab-side .m02-dfp__grip").filter(shown).length;
+  // 끌기 — 왼쪽 경계를 100px 왼쪽으로
+  const grip = $(".ui-side-panels__grip", panel("flow"));
+  const g = grip.getBoundingClientRect();
+  const x0 = g.left + g.width / 2;
+  const y0 = g.top + 50;
+  const w0 = state().width;
+  grip.dispatchEvent(
+    new PointerEvent("pointerdown", { bubbles: true, button: 0, clientX: x0, clientY: y0 }),
+  );
+  window.dispatchEvent(new PointerEvent("pointermove", { clientX: x0 - 50, clientY: y0 }));
+  window.dispatchEvent(new PointerEvent("pointerup", { clientX: x0 - 100, clientY: y0 }));
+  await W(200);
+  out.drag = { before: w0, after: state().width, pref: pref().width };
+  // 원문 — 폭 공유
+  strip("원문").click();
+  await until(() => $(".m01lab-src__head"));
+  out.source = state();
+  out.srcHead = $(".m01lab-src__head")?.innerText;
+  out.srcTable = $$(".m01lab-src__table td").some((td) => td.innerText === "특별인부");
+  // 키보드 — ← 한 번 = +20 · → 한 번 = 되돌림
+  const sg = $(".ui-side-panels__grip", panel("source"));
+  sg.dispatchEvent(new KeyboardEvent("keydown", { key: "ArrowLeft", bubbles: true }));
+  const k1 = state().width;
+  sg.dispatchEvent(new KeyboardEvent("keydown", { key: "ArrowRight", bubbles: true }));
+  out.key = { left: k1 - out.source.width, back: state().width - out.source.width };
+  // 모두 접기 — 원문 머리 ▸
+  $(".ui-side-panels__fold", panel("source")).click();
+  await W(300);
+  out.none = { ...state(), stripW: wOf(strip("흐름도")), pref: pref().open };
+  strip("흐름도").click();
+  await W(600);
+  out.back = { ...state(), pref: pref().open };
+  // 원문 연결 없음 — 서버가 빈 목록을 줄 때
+  strip("원문").click();
+  const real = window.fetch;
+  window.fetch = (u, o) =>
+    String(u).includes("/m01/logic/source")
+      ? Promise.resolve(new Response(JSON.stringify({ found: [] }), { status: 200 }))
+      : real(u, o);
+  try {
+    await openLogic("GC000338");
+    await until(() => $(".m01lab-src__none"));
+    out.noLink = [
+      $(".m01lab-src__none")?.innerText,
+      $(".m01lab-src__body .m01-logic__muted")?.innerText,
+    ];
+  } finally {
+    window.fetch = real;
+  }
+  // 되돌림 — 폭(끈 만큼 ←→ 화살표로) · 열린 패널
+  const was = JSON.parse(first ?? "{}");
+  const want = was.open === undefined ? "flow" : was.open;
+  const now = () => ["flow", "source"].find((id) => shown(panel(id))) ?? null;
+  if (now() !== want) {
+    if (want === null) $(".ui-side-panels__fold", panel(now())).click();
+    else strip(want === "flow" ? "흐름도" : "원문").click();
+    await W(300);
+  }
+  const target = was.width ?? w0;
+  const anyGrip = $$(".m01lab-side .ui-side-panels__grip")[0];
+  for (let i = 0; i < 40 && pref().width !== target; i++) {
+    const d = target - pref().width;
+    anyGrip.dispatchEvent(
+      new KeyboardEvent("keydown", {
+        key: d > 0 ? "ArrowLeft" : "ArrowRight",
+        shiftKey: Math.abs(d) >= 80,
+        bubbles: true,
+      }),
+    );
+  }
+  out.restored = first === null ? pref() : localStorage.getItem(PREF) === first;
+  out.first = first;
+  return JSON.stringify(out);
+})();
@@ -0,0 +1,82 @@
+/* 47-4 — 일위대가 상세 오른쪽 「원문」 접는 패널(공용 ui_template_side_panels) · 고른 줄 로직의 원문
+ * 시작 화면: M02 마스터 템플릿 · 마스터 층(#/m02-master-template?open=구조물조합&root=master) · 시스템 관리자 ·
+ *   나무에 item1(구조물 조합 · 일위대가 로직 담김)이 있음
+ * 부르는 법: orca eval --expression "$(tr '\n' ' ' < 이 파일)" (async 식 · JSON 글을 돌려줌)
+ * 하는 일: item1 카드(패널 없음) → 일위대가 [수정] 상세 → 패널 펴기 → 줄 고르기 → 접고 폄 → 처음 패널 상태로 → item1 다시
+ * 기대 수치:
+ *   - cardPanel = 0(카드 갈래엔 패널 없음) · detailPanel = 1
+ *   - hint = 「단가산출 로직 줄을 고르면 그 원문이 보임」(고른 줄 없음)
+ *   - picked.title = 그 로직 출처 글(예 「건설품셈 공통 6-3-3」) · picked.blocks > 0(원문 절 글 · 표) · picked.loading = false
+ *   - second.title ≠ picked.title 이면 다른 로직 원문으로 바뀜(출처가 같으면 같음)
+ *   - folded = { panel: true(숨음) , strip: false(띠 보임) } · reopened.title = second.title(접고 펴도 그대로)
+ *   - restored = 처음 패널 상태 · back = true
+ */
+(async () => {
+  const w = (ms) => new Promise((r) => setTimeout(r, ms));
+  const until = async (fn, ms = 8000) => {
+    for (let t = 0; t < ms; t += 150) {
+      const v = fn();
+      if (v) return v;
+      await w(150);
+    }
+    return null;
+  };
+  const node = await until(() => document.querySelector('[data-node="i|item1"]'));
+  if (!node) return JSON.stringify({ error: "item1 없음 — 폴더를 펼쳐 둘 것" });
+  node.click();
+  const card = await until(() =>
+    [...document.querySelectorAll(".m02-struct__card")].find((c) =>
+      c.querySelector("table.m02-labrow tbody tr[data-labor-logic]"),
+    ),
+  );
+  if (!card) return JSON.stringify({ error: "일위대가 카드 표 없음" });
+  const out = { cardPanel: card.querySelectorAll(".ui-side-panels").length };
+  [...card.querySelectorAll(".m02-struct__card-tools button")]
+    .find((b) => b.innerText.trim() === "수정")
+    ?.click();
+  const row = await until(() =>
+    document.querySelector(".ui-side-panels-row .m02-labor__edit")?.closest(".ui-side-panels-row"),
+  );
+  if (!row) return JSON.stringify({ ...out, error: "상세 패널 칸 없음" });
+  await until(() => row.querySelector("tbody tr[data-labor-logic]"));
+  const sp = row.querySelector(".ui-side-panels");
+  out.detailPanel = row.querySelectorAll(":scope > .ui-side-panels").length;
+  const box = sp.querySelector('.ui-side-panels__panel[data-panel="source"]');
+  const strip = sp.querySelector(".ui-side-panels__strip");
+  const wasOpen = !box.hidden;
+  if (!wasOpen) strip.click();
+  await w(200);
+  const host = () => row.querySelector("[data-labor-source]");
+  out.hint = host().innerText.trim();
+  const read = async () => {
+    await until(() => !/원문 찾는 중/.test(host().innerText), 8000);
+    return {
+      title: host().querySelector(".m02-dfp__title")?.innerText.trim() ?? null,
+      blocks: host().querySelectorAll(".m01lab-src__p, .m01lab-src__head, .m01lab-src__table")
+        .length,
+      loading: /원문 찾는 중/.test(host().innerText),
+      none: !!host().querySelector(".m01lab-src__none"),
+    };
+  };
+  const rows = () => [...row.querySelectorAll("tbody tr[data-labor-logic]")];
+  rows()[0].querySelector(".m02-labrow__name").click();
+  out.picked = { key: rows()[0].dataset.laborLogic, ...(await read()) };
+  const two = rows()[1];
+  if (two) {
+    two.querySelector(".m02-labrow__name").click();
+    out.second = { key: two.dataset.laborLogic, ...(await read()) };
+  }
+  sp.querySelector(".ui-side-panels__fold").click();
+  await w(200);
+  out.folded = { panel: box.hidden, strip: strip.hidden };
+  strip.click();
+  await w(300);
+  out.reopened = await read();
+  if (!wasOpen) sp.querySelector(".ui-side-panels__fold").click();
+  await w(200);
+  out.restored = !box.hidden === wasOpen;
+  document.querySelector('[data-node="i|item1"]')?.click();
+  await w(1200);
+  out.back = !!document.querySelector(".m02-struct__card table.m02-labrow");
+  return JSON.stringify(out);
+})();
@@ -0,0 +1,128 @@
+/* 47-5 — 일위대가 단가산출 로직 표 줄 누름 = 고름(하이라이트) · 넣을 값 모달 = [옵션] · 줄 단추 꼴 — 카드 · 상세 두 곳
+ * 시작 화면: M02 마스터 템플릿 · 마스터 층(#/m02-master-template?open=구조물조합&root=master) · 시스템 관리자 ·
+ *   나무에 item1(구조물 조합 · 일위대가 로직 둘 이상)이 있음
+ * 부르는 법: orca eval --expression "$(tr '\n' ' ' < 이 파일)" (async 식 · JSON 글을 돌려줌)
+ * 하는 일: item1 카드 표 → 일위대가 카드 [수정]으로 상세 → 둘째 줄 아래로 · 위로(제자리) → item1 다시(값 안 바뀜)
+ * 기대 수치:
+ *   - card.btns = ["옵션","삭제"] · detail.btns = ["위로","아래로","옵션","삭제"] · danger = true(삭제 = ui-btn--danger)
+ *   - gap = "4px"(공용 `ui-btn-group` · `--btn-group-gap`) · 단추 사이 실제 틈 = gap
+ *   - pick.selected = 1(누른 줄만 is-selected · 옵션 값 줄 있으면 함께) · pick.modal = 0(줄 누름이 모달을 안 엶)
+ *   - option.modal = 1(옵션 단추 = 넣을 값 모달) · 닫은 뒤 0
+ *   - kept.afterDown = 고른 키가 셋째 줄에서 is-selected · kept.afterUp = 둘째 줄에서 is-selected(다시 그려도 유지)
+ *   - back = true(카드 화면으로 돌아감)
+ */
+(async () => {
+  const w = (ms) => new Promise((r) => setTimeout(r, ms));
+  const until = async (fn, ms = 8000) => {
+    for (let t = 0; t < ms; t += 150) {
+      const v = fn();
+      if (v) return v;
+      await w(150);
+    }
+    return null;
+  };
+  const modals = () => document.querySelectorAll(".ui-modal__backdrop").length;
+  const closeModal = async () => {
+    document.querySelector(".ui-modal__top button")?.click();
+    await w(300);
+  };
+  const rowsOf = (t) => [...t.querySelectorAll("tbody tr[data-labor-logic]")];
+  const btnsOf = (tr) => [...tr.querySelectorAll(".ui-btn-group button")];
+  /* 금액 셈이 끝나 표가 더 안 바뀔 때까지(셈 중 「…」) — 표는 다시 그려지므로 늘 살아 있는 표를 다시 찾음 */
+  const settled = (get) =>
+    until(() => {
+      const t = get();
+      return t && !/…/.test(t.querySelector("tbody").innerText) ? t : null;
+    }, 10000);
+  const measure = async (get) => {
+    const t = await settled(get);
+    const rows = rowsOf(t);
+    const tr = rows[1] ?? rows[0];
+    const btns = btnsOf(tr);
+    const group = tr.querySelector(".ui-btn-group");
+    const gaps = btns
+      .slice(1)
+      .map((b, i) =>
+        Math.round(b.getBoundingClientRect().left - btns[i].getBoundingClientRect().right),
+      );
+    const del = btns.find((b) => b.innerText.trim() === "삭제");
+    const key = tr.getAttribute("data-labor-logic");
+    tr.querySelector(".m02-labrow__name").click();
+    await w(200);
+    const live = get();
+    const pick = {
+      key,
+      selected: rowsOf(live).filter((r) => r.classList.contains("is-selected")).length,
+      mine: !!live.querySelector(`tr[data-labor-logic="${key}"].is-selected`),
+      opt:
+        live.querySelector(`tr[data-labor-opt="${key}"]`)?.classList.contains("is-selected") ??
+        null,
+      bg: getComputedStyle(live.querySelector(`tr[data-labor-logic="${key}"]`)).backgroundColor,
+      modal: modals(),
+    };
+    btnsOf(live.querySelector(`tr[data-labor-logic="${key}"]`))
+      .find((b) => b.innerText.trim() === "옵션")
+      ?.click();
+    await until(() => modals() > 0, 3000);
+    const option = { modal: modals() };
+    await closeModal();
+    option.after = modals();
+    return {
+      btns: btns.map((b) => b.innerText.trim()),
+      danger: !!del && del.className.includes("ui-btn--danger"),
+      gap: group && getComputedStyle(group).gap,
+      gaps,
+      pick,
+      option,
+    };
+  };
+  const node = await until(() => document.querySelector('[data-node="i|item1"]'));
+  if (!node) return JSON.stringify({ error: "item1 없음 — 폴더를 펼쳐 둘 것" });
+  node.click();
+  const card = await until(() =>
+    [...document.querySelectorAll(".m02-struct__card")].find((c) =>
+      c.querySelector("table.m02-labrow tbody tr[data-labor-logic]"),
+    ),
+  );
+  if (!card) return JSON.stringify({ error: "일위대가 카드 표 없음" });
+  await w(1500);
+  const out = { card: await measure(() => card.querySelector("table.m02-labrow")) };
+  const edit = [...card.querySelectorAll(".m02-struct__card-tools button")].find(
+    (b) => b.innerText.trim() === "수정",
+  );
+  if (!edit) return JSON.stringify({ ...out, error: "일위대가 [수정] 없음" });
+  edit.click();
+  const dt = await until(() =>
+    [...document.querySelectorAll("table.m02-labrow")].find(
+      (t) => !t.closest(".m02-struct__card") && t.querySelector("tbody tr[data-labor-logic]"),
+    ),
+  );
+  if (!dt) return JSON.stringify({ ...out, error: "상세 표 없음" });
+  await w(2000);
+  const table = () =>
+    [...document.querySelectorAll("table.m02-labrow")].find((t) => !t.closest(".m02-struct__card"));
+  out.detail = await measure(table);
+  /* 다시 그려도 유지 — 고른 줄 아래로(서버 다시 셈 → 다시 그림) → 위로(제자리) */
+  const key = out.detail.pick.key;
+  const selAt = () => rowsOf(table()).findIndex((r) => r.classList.contains("is-selected"));
+  const press = async (label) => {
+    const tr = table().querySelector(`tr[data-labor-logic="${key}"]`);
+    btnsOf(tr)
+      .find((b) => b.innerText.trim() === label)
+      ?.click();
+    await w(2500);
+  };
+  await press("아래로");
+  out.kept = { afterDown: selAt() };
+  await press("위로");
+  out.kept.afterUp = selAt();
+  /* 카드 화면으로 돌아감(순서는 제자리 — 버림 물음 뜨면 확인) */
+  document.querySelector('[data-node="i|item1"]')?.click();
+  await w(800);
+  [...document.querySelectorAll(".ui-modal button, dialog button")]
+    .find((b) => /확인|버림|떠나기/.test(b.innerText))
+    ?.click();
+  await w(1200);
+  out.back = !!document.querySelector(".m02-struct__card table.m02-labrow");
+  return JSON.stringify(out);
+})();
@@ -48,6 +48,13 @@
  gap: var(--spacing-8);
 }

+/* 붙은 단추 묶음(표 줄 위로 · 아래로 · 옵션 · 삭제 등) — 사이 간격은 `--btn-group-gap` 하나 */
+.ui-btn-group {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--btn-group-gap);
+}
+
 .ui-general-block__table-wrap {
  overflow-x: auto;
 }
@@ -7,6 +7,10 @@
  min-width: 0;
 }

+.ui-side-panels-row[hidden] {
+  display: none;
+}
+
 .ui-side-panels-row > :first-child {
  flex: 1 1 auto;
  min-width: 0;
@@ -140,6 +140,7 @@
  --spacing-96: 96px;
  --spacing-104: 104px;
  --spacing-216: 216px;
+  --btn-group-gap: var(--spacing-4); /* 붙은 단추 묶음(.ui-btn-group) 사이 */

  /* ---------------------------------------------------------------------------
   * 5. 보더 반경 (Border Radius) — 8px 시그니처