From 712d3f19d54d762f3d478275ffea55f1d80a3351 Mon Sep 17 00:00:00 2001
From: umsangdon <umsangdon@gmail.com>
Date: Mon, 5 Oct 2026 16:16:59 +0900
Subject: [PATCH] =?UTF-8?q?fix(ui):=2049=20=EC=98=A4=EB=A5=B8=EC=AA=BD=20?=
 =?UTF-8?q?=EC=A0=91=EB=8A=94=20=ED=8C=A8=EB=84=90=20=3D=20=EC=A2=8C?=
 =?UTF-8?q?=EC=B8=A1=20=ED=8C=A8=EB=84=90=20=EC=86=90=EC=9E=A1=EC=9D=B4=20?=
 =?UTF-8?q?=EC=96=91=EC=8B=9D=20=C2=B7=20=ED=8C=A8=EB=84=90=20=EB=AA=B8?=
 =?UTF-8?q?=EB=A7=8C=20=EB=94=B0=EB=A1=9C=20=EC=8A=A4=ED=81=AC=EB=A1=A4=20?=
 =?UTF-8?q?=C2=B7=20=EC=9B=90=EB=AC=B8=20=EB=B3=B4=EA=B8=B0=20=ED=95=9C=20?=
 =?UTF-8?q?=EB=B2=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 49-1 공용 ui_template_side_panels — 세로 글 띠 · 접기 ▸ 걷어내고 공용 createWorkflowPanelHandle(side · right · 이름표) 손잡이를 패널 왼쪽 가장자리에 붙임 · 패널마다 손잡이 하나 · 하나만 열림 · 폭 공유 · 모두 접힘(폭 0 · 손잡이만 남음) — M01 로직 상세 · M02 일위대가 상세 · 면적산출 상세 모두 따라감
- 49-3 패널 묶음을 보이는 칸 안에 붙임(followView · 위 칸 overflow 가 CSS sticky 를 막아 JS) — 높이 = 보이는 칸 · 머리띠 아래 멈춤 · 몸만 스크롤
- 49-2 원문 md 읽기 — 빈 줄 · 주석이 붙은 표 둘을 가름(한 표로 합쳐지던 깨짐) · 칸 안 <br> = 줄바꿈
- 49-4 원문 칸 80vh 제한 걷어냄 — 표 높이 = 내용 · 가로 넓은 표만 가로 스크롤
- 49-5 원문 꼴 한 벌 — M01 둘레 글자 크기(14) 안 따르고 본문 크기(M02 와 같음)
- 확인 시나리오 ui_checks/49_오른쪽패널_양식.js · 시험 test_m01_logic_source 표 가름 한 줄

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01NPJGtfXo6GMbcpiboQC4uK
---
 M01_MasterData/M01_MasterData_Store_Make.py   |  12 +-
 .../M01_MasterData_UI_LogicLab_Side.css       |   7 +-
 resources/tester/test_m01_logic_source.py     |   8 +
 .../tester/ui_checks/49_오른쪽패널_양식.js    | 194 ++++++++++++++++++
 ui_template/ui_template_side_panels.css       |  76 +++----
 ui_template/ui_template_side_panels.ts        |  84 +++++---
 6 files changed, 304 insertions(+), 77 deletions(-)
 create mode 100644 resources/tester/ui_checks/49_오른쪽패널_양식.js

diff --git a/M01_MasterData/M01_MasterData_Store_Make.py b/M01_MasterData/M01_MasterData_Store_Make.py
index c5ab2df45..029ce0d35 100644
--- a/M01_MasterData/M01_MasterData_Store_Make.py
+++ b/M01_MasterData/M01_MasterData_Store_Make.py
@@ -108,11 +108,14 @@ _NUMBER = re.compile(r"(?<![\d-])\d+(?:-\d+)+(?![\d-])")
 
 
 def _blocks(lines: list[str]) -> list[dict]:
-    """md 줄 → 화면 조각 — 제목 {h} · 표 {table} · 글 {p} · 주석 줄은 뺌."""
+    """md 줄 → 화면 조각 — 제목 {h} · 표 {table} · 글 {p} · 주석 줄은 뺌 ·
+    빈 줄 · 주석이 표를 끊음(붙은 표 둘을 한 표로 안 합침) · `<br>` = 줄바꿈."""
     out: list[dict] = []
+    joinable = False
     for line in lines:
-        text = line.strip()
+        text = re.sub(r"<br\s*/?>", "\n", line.strip())
         if not text or text.startswith("<!--"):
+            joinable = False
             continue
         if text.startswith("#"):
             out.append({"h": len(text) - len(text.lstrip("#")), "text": text.lstrip("#").strip()})
@@ -120,11 +123,14 @@ def _blocks(lines: list[str]) -> list[dict]:
             cells = [c.strip() for c in text.strip("|").split("|")]
             if all(re.fullmatch(r":?-{3,}:?", c) for c in cells):
                 continue  # 머리 · 몸 가름 줄
-            if not out or "table" not in out[-1]:
+            if not joinable:
                 out.append({"table": []})
             out[-1]["table"].append(cells)
+            joinable = True
+            continue
         else:
             out.append({"p": text})
+        joinable = False
     return out
 
 
diff --git a/M01_MasterData/M01_MasterData_UI_LogicLab_Side.css b/M01_MasterData/M01_MasterData_UI_LogicLab_Side.css
index 38b5f9359..bcf46df3a 100644
--- a/M01_MasterData/M01_MasterData_UI_LogicLab_Side.css
+++ b/M01_MasterData/M01_MasterData_UI_LogicLab_Side.css
@@ -14,7 +14,9 @@
   background: none;
 }
 
+/* 원문 꼴 한 벌(M01 · M02 같음) — 둘레 글자 크기(M01 14)를 안 따르고 본문 크기 */
 .m01lab-src {
+  font-size: var(--text-body);
   display: flex;
   flex-direction: column;
   gap: var(--spacing-8);
@@ -26,8 +28,6 @@
   flex-direction: column;
   gap: var(--spacing-8);
   min-width: 0;
-  max-height: 80vh;
-  overflow: auto;
 }
 
 .m01lab-src__head {
@@ -51,6 +51,7 @@
   font-weight: 600;
 }
 
+/* 칸 안 줄바꿈(원문 <br>)만 살리고 저절로 접지 않음 */
 .m01lab-src__table td {
-  white-space: nowrap;
+  white-space: pre;
 }
diff --git a/resources/tester/test_m01_logic_source.py b/resources/tester/test_m01_logic_source.py
index 75d2dab56..530e3b55a 100644
--- a/resources/tester/test_m01_logic_source.py
+++ b/resources/tester/test_m01_logic_source.py
@@ -53,3 +53,11 @@ def test_route() -> None:
     app.include_router(router_module.router)
     got = TestClient(app).get("/api/m01/logic/source", params={"src": "산림품셈 3-1"}).json()
     assert got["found"][0]["matched"] == "3-1"
+
+
+def test_tables_split_and_br() -> None:
+    """빈 줄 · 주석이 붙은 표 둘을 가름(49-2) · 칸 안 `<br>` = 줄바꿈."""
+    one = make.source("건설품셈 공통 6-1-1")["found"][0]
+    tables = [b["table"] for b in one["blocks"] if "table" in b]
+    assert [len(t[0]) for t in tables] == [7, 2]
+    assert tables[0][2][0] == "인력운반\n타설"
diff --git a/resources/tester/ui_checks/49_오른쪽패널_양식.js b/resources/tester/ui_checks/49_오른쪽패널_양식.js
new file mode 100644
index 000000000..0b38e149f
--- /dev/null
+++ b/resources/tester/ui_checks/49_오른쪽패널_양식.js
@@ -0,0 +1,194 @@
+/* 49 — 오른쪽 접는 패널 = 좌측 패널과 같은 손잡이 양식 · 패널 몸만 따로 스크롤 · M01 원문 표 칸 수 = M02
+ * 시작 화면: M01 마스터 데이터(#/m01-master-data) · 시스템 관리자 · 나무 item1(구조물 조합)이 M02 마스터 층에 있음
+ * 부르는 법: orca eval --expression "$(cat 이 파일)" (async 식 · JSON 글을 돌려줌) · 저장 안 함 · 끝에 열린 패널 되돌림
+ * 하는 일: M01 로직 GC000198 상세(흐름도 · 원문) → M02 일위대가 상세(원문 · 같은 GC000198 줄) → M02 면적산출 상세(일위대가 · 도면)
+ * 기대 수치(화면마다):
+ *   - handleClass = 좌측 패널 손잡이와 같은 클래스(ui-workflow-overlay__handle ui-workflow-overlay__handle--side is-labeled)
+ *   - handles = 패널 수(M01 2 · 일위대가 1 · 면적 2) · 손잡이 x < 패널 x(왼쪽 가장자리 밖)
+ *   - steps[i].open = 누른 패널 하나만 · width 모두 같음(폭 공유) · none.open = [] · none.rootW = 0(손잡이만 남음)
+ *   - sticky.tops = [0 · 250 · 400 굴렸을 때 패널 top] — 머리띠(head) 아래 8 에 닿으면 그 자리에 멈춤(250 = 400) · 본문이 짧으면 덜 굴러감(scrolled) · inView = 패널 위아래 끝이 창 안
+ *   - ownScroll: 패널 몸을 굴리면 몸 scrollTop 만 바뀌고 본문 스크롤 그대로(mainMoved 0)
+ *   - m01Cells = m02Cells(같은 로직 GC000198 원문 표 칸 수) · 표 둘(7칸 · 2칸)
+ *   - m01Look = m02Look(sameLook true) — 같은 클래스 · 글자 크기(16px) · 표 칸 꼴 · tableFit 모두 true(표 높이 = 내용 · 자체 세로 스크롤 없음)
+ */
+(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 (fn, ms = 10000) => {
+    for (let t = 0; t < ms; t += 150) {
+      const v = fn();
+      if (v) return v;
+      await W(150);
+    }
+    return null;
+  };
+  const shown = (n) => !!n && n.getBoundingClientRect().height > 0;
+  const LEFT = "ui-workflow-overlay__handle ui-workflow-overlay__handle--side is-labeled";
+
+  /** 한 패널 묶음 — 손잡이 꼴 · 하나만 열림 · 폭 공유 · 모두 접힘 · sticky · 몸 스크롤 */
+  const check = async (sp, scrollId) => {
+    const handles = $$(".ui-side-panels__handles > button", sp);
+    const ids = handles.map((h) => h.dataset.panel);
+    const was =
+      ids.find((id) => shown($(`.ui-side-panels__panel[data-panel="${id}"]`, sp))) ?? null;
+    const box = (id) => $(`.ui-side-panels__panel[data-panel="${id}"]`, sp);
+    const state = () => ({
+      open: ids.filter((id) => shown(box(id))),
+      expanded: handles.map((h) => h.getAttribute("aria-expanded")),
+    });
+    const out = {
+      handles: handles.length,
+      handleClass: handles.every((h) => h.className === LEFT),
+      labels: handles.map((h) => h.innerText.replace(/\s/g, "")),
+      steps: [],
+    };
+    for (const h of handles) {
+      if (h.getAttribute("aria-expanded") !== "true") h.click();
+      await W(300);
+      const b = box(h.dataset.panel);
+      out.steps.push({
+        ...state(),
+        width: Math.round(b.getBoundingClientRect().width),
+        handleOutside: Math.round(b.getBoundingClientRect().left - h.getBoundingClientRect().right),
+      });
+    }
+    // sticky · 몸 스크롤 — 고른 패널을 펴고 봄
+    const pick = handles.find((h) => h.dataset.panel === scrollId);
+    if (pick.getAttribute("aria-expanded") !== "true") pick.click();
+    await W(400);
+    const panel = box(scrollId);
+    const body = $(".ui-side-panels__body", panel);
+    // 본문 스크롤 칸 — 위 칸 중 굴러가는 것 · 없으면 창 · 숨은 탭은 scroll 알림이 안 와 직접 보냄
+    let sc = null;
+    for (let n = sp.parentElement; n && !sc; n = n.parentElement) {
+      const oy = getComputedStyle(n).overflowY;
+      if ((oy === "auto" || oy === "scroll") && n.scrollHeight > n.clientHeight + 1) sc = n;
+    }
+    const roll = async (y) => {
+      if (sc) sc.scrollTop = y;
+      else window.scrollTo(0, y);
+      (sc ?? window).dispatchEvent(new Event("scroll"));
+      await W(200);
+    };
+    const pos = () => (sc ? sc.scrollTop : window.scrollY);
+    await roll(0);
+    const t0 = panel.getBoundingClientRect().top;
+    await roll(250);
+    const t1 = panel.getBoundingClientRect().top;
+    await roll(400);
+    const r1 = panel.getBoundingClientRect();
+    const head = Math.round($(".app-header").getBoundingClientRect().bottom);
+    out.sticky = {
+      scroller: sc ? sc.className.split(" ")[0] : "window",
+      scrolled: Math.round(pos()),
+      tops: [t0, t1, r1.top].map(Math.round),
+      head,
+    };
+    out.inView = Math.round(r1.bottom) <= innerHeight && Math.round(r1.top) >= 0;
+    const y = pos();
+    body.scrollTop = 0;
+    body.scrollTop = 300;
+    body.dispatchEvent(new Event("scroll"));
+    await W(150);
+    out.ownScroll = {
+      bodyOverflow: body.scrollHeight > body.clientHeight,
+      bodyTop: Math.round(body.scrollTop),
+      mainMoved: Math.round(pos() - y),
+    };
+    body.scrollTop = 0;
+    await roll(0);
+    // 모두 접힘
+    $$(".ui-side-panels__handles > button[aria-expanded=true]", sp).forEach((h) => h.click());
+    await W(300);
+    out.none = { ...state(), rootW: Math.round(sp.getBoundingClientRect().width) };
+    // 되돌림
+    if (was) handles.find((h) => h.dataset.panel === was).click();
+    await W(300);
+    out.restored = (ids.find((id) => shown(box(id))) ?? null) === was;
+    return out;
+  };
+  const cells = (root) =>
+    $$(".m01lab-src__table", root).map((t) => [...t.rows].map((r) => r.cells.length).join(","));
+  /** 원문 꼴 — 클래스 · 글자 크기 · 표 칸 꼴 · 표 감싸개 높이 = 내용(자체 세로 스크롤 없음) */
+  const look = (root) => {
+    const src = $(".m01lab-src", root);
+    const fs = (sel) => (sel ? getComputedStyle(sel).fontSize : null);
+    const td = $(".m01lab-src__table td", src);
+    return {
+      classes: [...new Set($$("*", src).map((n) => n.className.toString()))].sort().join(" "),
+      font: [fs(src), fs($(".m01lab-src__p", src)), fs($(".m01lab-src__head", src)), fs(td)],
+      td: td ? ["padding", "whiteSpace", "borderBottom"].map((k) => getComputedStyle(td)[k]) : null,
+      tableFit: $$(".m01lab-src__table", src).map((t) => {
+        const box = t.parentElement;
+        return box.scrollHeight <= box.clientHeight;
+      }),
+    };
+  };
+  const result = {};
+
+  // ① M01 로직 상세 — 흐름도 · 원문
+  sessionStorage.setItem("m01.logic.pending", "GC000198");
+  const tab = $$(".ui-collapsible__title").find((h) => h.innerText.trim() === "단가산출 로직");
+  if (!tab) return JSON.stringify({ error: "M01 화면 아님" });
+  if (!tab.closest(".ui-collapsible").classList.contains("is-collapsed")) tab.click();
+  tab.click();
+  const m01 = await until(() => $(".m01lab-side .m02-dfp") && $(".m01lab-side > .ui-side-panels"));
+  if (!m01) return JSON.stringify({ error: "M01 로직 못 엶" });
+  await W(600);
+  result.m01 = await check(m01, "source");
+  const srcHandle = $('.ui-side-panels__handles > button[data-panel="source"]', m01);
+  const m01Was = srcHandle.getAttribute("aria-expanded");
+  if (m01Was !== "true") srcHandle.click();
+  await until(() => $(".m01lab-side .m01lab-src__table"));
+  result.m01Cells = cells($(".m01lab-side"));
+  result.m01Look = look($(".m01lab-side"));
+  if (m01Was !== "true") srcHandle.click();
+
+  // ② M02 일위대가 상세 — 원문(같은 로직 줄)
+  location.hash = "#/m02-master-template?open=구조물조합&root=master";
+  const node = await until(() => $('[data-node="i|item1"]'));
+  if (!node) return JSON.stringify({ ...result, error: "item1 없음" });
+  node.click();
+  const card = await until(() =>
+    $$(".m02-struct__card").find((c) => $("table.m02-labrow tbody tr[data-labor-logic]", c)),
+  );
+  $$(".m02-struct__card-tools button", card)
+    .find((b) => b.innerText.trim() === "수정")
+    ?.click();
+  const row = await until(() =>
+    $(".ui-side-panels-row .m02-labor__edit")?.closest(".ui-side-panels-row"),
+  );
+  if (!row) return JSON.stringify({ ...result, error: "일위대가 상세 없음" });
+  const labor = $(":scope > .ui-side-panels", row);
+  const lh = $(".ui-side-panels__handles > button", labor);
+  const laborWas = lh.getAttribute("aria-expanded");
+  if (laborWas !== "true") lh.click();
+  const same = await until(() => $('tbody tr[data-labor-logic="GC000198"] .m02-labrow__name', row));
+  same?.click();
+  await until(() => $("[data-labor-source] .m01lab-src__table", row));
+  result.m02Cells = cells(row);
+  result.m02Look = look(row);
+  if (laborWas !== "true") lh.click();
+  await W(200);
+  result.labor = await check(labor, "source");
+
+  // ③ M02 면적산출 상세 — 일위대가 · 도면
+  node.click();
+  const vis = (b) => b && !b.hidden && b.offsetParent !== null;
+  const edits = () =>
+    $$(".m02-struct button").filter((b) => vis(b) && b.textContent.trim() === "수정");
+  await until(() => edits().length === 3);
+  (edits().find((b) => /면적/.test(b.title)) ?? edits()[2])?.click();
+  const area = await until(() =>
+    $$(".ui-side-panels").find((s) => shown(s) && $('[data-panel="drawing"]', s)),
+  );
+  if (!area) return JSON.stringify({ ...result, error: "면적산출 상세 없음" });
+  await W(600);
+  result.area = await check(area, "labor");
+  node.click();
+  await W(800);
+  result.sameCells = JSON.stringify(result.m01Cells) === JSON.stringify(result.m02Cells);
+  result.sameLook = JSON.stringify(result.m01Look) === JSON.stringify(result.m02Look);
+  return JSON.stringify(result);
+})();
diff --git a/ui_template/ui_template_side_panels.css b/ui_template/ui_template_side_panels.css
index 344f6fb1b..77f3f306f 100644
--- a/ui_template/ui_template_side_panels.css
+++ b/ui_template/ui_template_side_panels.css
@@ -1,4 +1,5 @@
-/* 본문 오른쪽 접는 패널 여럿 — 접힌 패널 = 세로 글 띠 · 편 패널 = 공유 폭(--ui-side-panels-width) */
+/* 본문 오른쪽 접는 패널 여럿 — 왼쪽 가장자리 손잡이(좌측 패널과 같은 꼴) · 편 패널 = 공유 폭(--ui-side-panels-width)
+   보이는 칸 안에 붙음(JS followView) — 몸만 따로 스크롤 · 메인 스크롤과 따로 */
 
 /* 부르는 쪽 칸 — [본문, 패널 묶음] */
 .ui-side-panels-row {
@@ -17,40 +18,45 @@
 }
 
 .ui-side-panels {
+  position: relative;
   display: flex;
   flex: none;
-  align-items: stretch;
+  align-self: flex-start;
+  /* 높이 · 붙는 자리 = JS(followView) · 처음 한 번 그릴 때까지 */
+  height: calc(100vh - 80px);
+  /* 손잡이 자리(24) + 틈 */
+  margin-left: calc(var(--spacing-24) + var(--spacing-8));
+}
+
+/* 모두 접힘 — 폭 0 · 손잡이만 왼쪽 밖에 남음 */
+.ui-side-panels.is-collapsed {
+  width: 0;
+}
+
+/* 손잡이 줄 — 패널 왼쪽 밖 세로 가운데 · 패널 둘이면 위아래로 */
+.ui-side-panels__handles {
+  position: absolute;
+  z-index: 2;
+  top: 50%;
+  left: calc(-1 * var(--spacing-24));
+  display: flex;
+  flex-direction: column;
   gap: var(--spacing-4);
-  margin-left: var(--spacing-8);
+  transform: translateY(-50%);
+}
+
+.ui-side-panels__handles > .ui-workflow-overlay__handle--side {
+  position: static;
+  transform: none;
+  border-right: 0;
+  border-left: 1px solid var(--panel-handle-border, var(--color-border));
+  border-radius: var(--radius-buttons) 0 0 var(--radius-buttons);
 }
 
 .ui-side-panels.is-resizing {
   user-select: none;
 }
 
-.ui-side-panels__strip {
-  flex: none;
-  width: 32px;
-  padding: var(--spacing-8) 0;
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-cards);
-  background: var(--color-surface);
-  color: var(--color-text-secondary);
-  font: inherit;
-  font-size: var(--text-body-sm);
-  font-weight: 600;
-  writing-mode: vertical-rl;
-  text-orientation: mixed;
-  text-align: start;
-  cursor: pointer;
-}
-
-.ui-side-panels__strip:hover,
-.ui-side-panels__strip:focus-visible {
-  border-color: var(--color-primary);
-  color: var(--color-text);
-}
-
 .ui-side-panels__panel {
   position: relative;
   display: flex;
@@ -58,12 +64,12 @@
   flex-direction: column;
   width: var(--ui-side-panels-width, 420px);
   min-width: 0;
+  height: 100%;
   border: 1px solid var(--color-border);
   border-radius: var(--radius-cards);
   background: var(--color-surface);
 }
 
-.ui-side-panels__strip[hidden],
 .ui-side-panels__panel[hidden] {
   display: none;
 }
@@ -101,22 +107,6 @@
   color: var(--color-text);
 }
 
-.ui-side-panels__fold {
-  flex: none;
-  padding: 0 var(--spacing-4);
-  border: 0;
-  border-radius: var(--radius-sm);
-  background: none;
-  color: var(--color-text-secondary);
-  font: inherit;
-  cursor: pointer;
-}
-
-.ui-side-panels__fold:hover,
-.ui-side-panels__fold:focus-visible {
-  color: var(--color-primary);
-}
-
 .ui-side-panels__body {
   flex: 1 1 auto;
   min-width: 0;
diff --git a/ui_template/ui_template_side_panels.ts b/ui_template/ui_template_side_panels.ts
index 9198144a0..8ba93babb 100644
--- a/ui_template/ui_template_side_panels.ts
+++ b/ui_template/ui_template_side_panels.ts
@@ -1,7 +1,9 @@
 /* =============================================================================
  * ui_template_side_panels.ts
  * 본문 오른쪽 접는 패널 여럿 — 나란히 · 하나만 열림 · 모두 접힘 됨 · 폭 공유
- * 접힌 패널 = 제목 세로 글 띠(누르면 폄) · 편 패널 = 머리(제목 · 접기 ▸) + 몸 · 왼쪽 경계 끌기(화살표 키)
+ * 좌측 패널과 같은 접기 양식 — 패널 왼쪽 가장자리 손잡이(공용 createWorkflowPanelHandle · 오른쪽으로 접힘)
+ *   패널마다 손잡이 하나(이름표 세로) · 누르면 폄/접음 · 모두 접히면 손잡이만 남음
+ * 편 패널 = 머리(제목) + 몸 · 왼쪽 경계 끌기(화살표 키) · 보이는 칸 안에 붙어 몸만 따로 스크롤(followView)
  * 열린 패널 · 폭 = 부르는 쪽 취향 키(`aislo:pref:{prefKey}`)
  * 부르기: const sp = createSidePanels({ prefKey, panels: [{ id, title, body }] }) →
  *         본문과 함께 `.ui-side-panels-row` 칸에 [본문, sp.root] 로 넣음
@@ -10,11 +12,10 @@
 import { readByKey, writeByKey } from "../A00_Common/b_page_state";
 import { el } from "./ui_template_elements";
 import { currentLanguageIndex } from "./ui_template_locale";
+import { createWorkflowPanelHandle } from "./ui_template_overlay";
 import "./ui_template_side_panels.css";
 
 const TEXT = {
-  Open: ["{v} 펴기", "Open {v}"],
-  Close: ["{v} 접기", "Collapse {v}"],
   Grip: ["패널 너비 — 끌거나 화살표 키", "Panel width — drag or arrow keys"],
 } as const;
 
@@ -89,29 +90,15 @@ export function createSidePanels(opts: SidePanelsOpts): SidePanels {
     if (keep) save();
   };
 
+  const handles = el("div", { className: "ui-side-panels__handles" });
+  root.append(handles);
   const views = opts.panels.map((p) => {
     const bodyId = `ui-side-panel-${opts.prefKey}-${p.id}`;
-    const strip = el("button", {
-      className: "ui-side-panels__strip",
-      text: p.title,
-      attrs: { type: "button", "aria-expanded": "false", "aria-controls": bodyId },
-    });
-    strip.title = ts("Open", p.title);
-    strip.addEventListener("click", () => {
-      open(p.id);
-      fold.focus();
-    });
-    const fold = el("button", {
-      className: "ui-side-panels__fold",
-      text: "▸",
-      attrs: { type: "button", "aria-expanded": "true", "aria-controls": bodyId },
-    });
-    fold.title = ts("Close", p.title);
-    fold.setAttribute("aria-label", fold.title);
-    fold.addEventListener("click", () => {
-      open(null);
-      strip.focus();
-    });
+    const handle = createWorkflowPanelHandle("side", "right", p.title);
+    handle.root.setAttribute("aria-controls", bodyId);
+    handle.root.dataset.panel = p.id;
+    handle.root.addEventListener("click", () => open(now === p.id ? null : p.id));
+    handles.append(handle.root);
     const grip = el("div", {
       className: "ui-side-panels__grip",
       attrs: {
@@ -128,7 +115,7 @@ export function createSidePanels(opts: SidePanelsOpts): SidePanels {
         grip,
         el("header", {
           className: "ui-side-panels__head",
-          children: [el("strong", { className: "ui-side-panels__title", text: p.title }), fold],
+          children: [el("strong", { className: "ui-side-panels__title", text: p.title })],
         }),
         el("div", { className: "ui-side-panels__body", attrs: { id: bodyId }, children: [p.body] }),
       ],
@@ -156,16 +143,17 @@ export function createSidePanels(opts: SidePanelsOpts): SidePanels {
       ev.preventDefault();
       setWidth(width + d, true);
     });
-    root.append(strip, box);
-    return { id: p.id, strip, box };
+    root.append(box);
+    return { id: p.id, handle, box };
   });
 
   const draw = (): void => {
     for (const v of views) {
       const on = v.id === now;
-      v.strip.hidden = on;
+      v.handle.setOpen(on);
       v.box.hidden = !on;
     }
+    root.classList.toggle("is-collapsed", now === null);
   };
 
   function open(id: string | null): void {
@@ -178,5 +166,45 @@ export function createSidePanels(opts: SidePanelsOpts): SidePanels {
   }
 
   draw();
+  followView(root);
   return { root, open, current: () => now, width: () => width };
 }
+
+/** 가장 가까운 스크롤 칸(없으면 창) */
+function scroller(node: HTMLElement): HTMLElement | null {
+  for (let n = node.parentElement; n; n = n.parentElement) {
+    const y = getComputedStyle(n).overflowY;
+    if ((y === "auto" || y === "scroll") && n.scrollHeight > n.clientHeight + 1) return n;
+  }
+  return null;
+}
+
+/**
+ * 패널 묶음을 보이는 칸 안에 붙임 — 높이 = 보이는 칸 · 본문을 굴려도 그 자리(몸만 따로 스크롤)
+ * CSS sticky 는 위 칸의 overflow 가 막아 JS 로 — 어느 칸이 굴러도(capture) 다시 잼
+ */
+function followView(node: HTMLElement): void {
+  const ref = new WeakRef(node); // 떼었다 다시 붙이는 화면(M01)도 있어 떼어져도 듣기는 남김 · 버려지면 그침
+  const place = (): void => {
+    const root = ref.deref();
+    if (!root) return stop();
+    if (!root.isConnected) return;
+    const box = scroller(root)?.getBoundingClientRect();
+    const head = document.querySelector(".app-header")?.getBoundingClientRect().bottom ?? 0;
+    const top = Math.max(head, box?.top ?? 0) + 8;
+    const bottom = Math.min(window.innerHeight, box?.bottom ?? window.innerHeight) - 8;
+    const row = root.parentElement?.getBoundingClientRect();
+    if (!row) return;
+    const height = Math.max(240, bottom - top);
+    root.style.height = `${height}px`;
+    const shift = Math.min(Math.max(0, top - row.top), Math.max(0, row.height - height));
+    root.style.transform = shift ? `translateY(${Math.round(shift)}px)` : "";
+  };
+  const stop = (): void => {
+    window.removeEventListener("scroll", place, true);
+    window.removeEventListener("resize", place);
+  };
+  window.addEventListener("scroll", place, true);
+  window.addEventListener("resize", place);
+  setTimeout(place); // 붙은 뒤 한 번
+}