fix(M01): 47-3 로직 상세 오른쪽 = 공용 접는 패널 둘(흐름도 · 원문) — 위아래 접기 카드 걷어냄

- 흐름도 · 원문 = 따로 패널 · 접힌 패널 = 세로 글 띠 · 하나만 열림 · 모두 접힘 됨 · 폭 공유(경계 끌기 · 화살표 키)
- 열린 패널 · 폭 = 취향 키 m01-logic-side · 흐름도 패널 자체 접기 단추 · 끌기 경계는 숨김
- 옛 두 칸 비율 막대(buildSplit) 제거 · 부품 칸 숨김([hidden]) 규칙 덧붙임
- 화면 시나리오 ui_checks/47-3_로직상세_오른쪽패널.js

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

M01_MasterData/M01_MasterData_UI_LogicLab_Side.ts

@@ -1,16 +1,14 @@
 /* =============================================================================
  * 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`) · 원문은 출처 글로 서버가 찾음(`GET /m01/logic/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 "../M02_MasterTemplete/DataFlow/M02_DF_Panel.css";
 import "./M01_MasterData_UI_LogicLab_Side.css";
@@ -28,9 +26,6 @@ const TEXT = {
 const ts = (key: keyof typeof TEXT, v = ""): string =>
   TEXT[key][currentLanguageIndex === 1 ? 1 : 0].replace("{v}", v);
 
-/** 둘 다 접힘 — 제목 행 둘이 들어가는 칸 너비 */
-const FOLDED = 140;
-
 export type PanelPick = "flow" | "source" | "none";
 
 interface Block {
@@ -47,7 +42,9 @@ interface Found {
 }
 
 export interface LogicSide {
-  /** 흐름도 패널에 넘길 칸 — right = 흐름도 자리 · setRight = 흐름도 패널이 알린 너비 */
+  /** [왼쪽 지금 내용, 오른쪽 패널] 칸 */
+  root: HTMLElement;
+  /** 흐름도 패널에 넘길 칸 — right = 흐름도 자리 · 폭은 오른쪽 패널 몫(setRight 안 씀) */
   flowSplit: SplitHandle;
   flowFolded(): boolean;
   pick(next: PanelPick): void;
@@ -57,11 +54,6 @@ 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", {
@@ -83,59 +75,38 @@ function blockNode(b: Block): HTMLElement {
   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 sp = createSidePanels({
+    prefKey: "m01-logic-side",
+    defaultWidth: 520,
+    minWidth: 320,
+    panels: [
+      { id: "flow", title: ts("Flow"), body: flowSlot },
+      {
+        id: "source",
+        title: ts("Source"),
+        body: el("div", { className: "m01lab-src", children: [title, body] }),
+      },
+    ],
+    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;
+    if (sp.current() !== "source" || shown === want) return;
     const src = (shown = want);
     title.textContent = src || ts("NoSource");
     body.replaceChildren(el("p", { className: "m01-logic__muted", text: ts("Loading") }));
@@ -165,28 +136,11 @@ export function buildLogicSide(split: SplitHandle): LogicSide {
       });
   };
 
-  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;
     },