diff --git a/B08_Quantity/B08_Quantity_UI_ConversionFactors.ts b/B08_Quantity/B08_Quantity_UI_ConversionFactors.ts
index 1a2497c9..443f5b2c 100644
--- a/B08_Quantity/B08_Quantity_UI_ConversionFactors.ts
+++ b/B08_Quantity/B08_Quantity_UI_ConversionFactors.ts
@@ -157,9 +157,10 @@ export function renderConversionFactorFields(
   if (!entries.length) return null;
 
   const box = document.createElement("div");
-  box.className = "b08-quantity__factors";
+  // 제 제목을 제 안에 들고 있어 이 구획 자신이 공용 접기 컨테이너가 된다(B03~B07 과 같은 틀).
+  box.className = "b08-quantity__factors ui-collapsible";
   const title = document.createElement("div");
-  title.className = "b08-quantity__field";
+  title.className = "b08-quantity__field ui-collapsible__title";
   const titleName = document.createElement("span");
   titleName.textContent = L("B08_Quantity_Side_Factors");
   title.append(titleName);
diff --git a/B08_Quantity/B08_Quantity_UI_EarthworkGrid_Style.ts b/B08_Quantity/B08_Quantity_UI_EarthworkGrid_Style.ts
index 5102228d..5e2d567e 100644
--- a/B08_Quantity/B08_Quantity_UI_EarthworkGrid_Style.ts
+++ b/B08_Quantity/B08_Quantity_UI_EarthworkGrid_Style.ts
@@ -188,6 +188,33 @@ const CSS = `
 .b08-quantity__hint { margin: 0 0 6px; font-size: 11px; line-height: 1.4; color: var(--color-text-secondary); }
 /* 품셈 범위 밖을 고른 칸 — **막지 않고** 사유를 받는 자리라 경고 색만 준다. */
 .b08-quantity__hint--warn { color: var(--color-warning, #b45309); }
+/* 좌측 산출조건 패널 — B03~B07 과 같은 공통 틀을 쓴다(접히는 상자 ui-collapsible
+   + 공통 외곽선 ui-sidebar-section + 바닥 고정 액션 줄 ui-sidebar-actions).
+   ⚠ 테두리는 공용 .ui-sidebar-section(ui_template_overlay.css)이 전담한다 —
+   여기서 border 를 다시 선언하면 로드 순서상 공통 색을 덮어 흐려진다(B04 주석과 같은 까닭). */
+.b08-quantity__panel { display: flex; flex-direction: column; gap: 8px; }
+.b08-quantity__section {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  margin: 0;
+  padding: 10px 12px;
+  border-radius: var(--radius-cards);
+  background-color: var(--color-surface-raised);
+}
+.b08-quantity__section-title {
+  margin: 0 0 2px;
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--color-text-secondary);
+}
+/* 개발 전용 줄 — ⚠ 단추 묶음에 공용 ui-sidebar-actions 를 쓰면 공용 코드가 **이 줄**을
+   패널 바닥 액션으로 잘못 집어(첫 번째 것을 찾는다) 스크롤 영역이 이 줄 안에 갇히고
+   아래 칸들이 통째로 잘린다(2026-09-12 사용자 보고). 생김새만 같게 두고 클래스는 따로 쓴다. */
+.b08-quantity__dev { display: flex; flex-direction: column; gap: 4px; }
+.b08-quantity__dev-actions { display: flex; gap: 8px; }
+.b08-quantity__dev-actions > * { flex: 1 1 0; min-width: 0; }
+.b08-quantity__note { margin: 0; font-size: 11px; line-height: 1.4; color: var(--color-text-secondary); }
 /* 토량환산계수 구획 — 갈래마다 (값 · 안내 · 사유)가 한 덩어리로 붙는다. */
 .b08-quantity__factors { margin: 4px 0 10px; }
 .b08-quantity__factor { margin-bottom: 6px; }
diff --git a/B08_Quantity/B08_Quantity_UI_Page.ts b/B08_Quantity/B08_Quantity_UI_Page.ts
index e0bd7259..3e6b092a 100644
--- a/B08_Quantity/B08_Quantity_UI_Page.ts
+++ b/B08_Quantity/B08_Quantity_UI_Page.ts
@@ -11,6 +11,8 @@ import { ui_locales, currentLanguageIndex } from "@ui/ui_template_locale";
 import { createButton, showToast } from "@ui/ui_template_elements";
 import { API_BASE_URL, CURRENT_PROJECT_ID_KEY } from "@config/config_frontend";
 import { createWorkflowLayout } from "@ui/ui_template_workflow_layout";
+import { attachCollapsible } from "@ui/ui_template_collapsible";
+import { groupPanelSections } from "./B08_Quantity_UI_SidePanel_Sections";
 import { workflowSteps } from "../A00_Common/b_page_scaffold";
 import {
   fetchWorkflowState,
@@ -353,7 +355,10 @@ function devUnlockRow(projectId: string, reload: () => void): HTMLElement {
     onClick: () => call("DELETE", relock),
   });
   const buttons = document.createElement("div");
-  buttons.className = "b08-quantity__actions ui-sidebar-actions";
+  // ⚠ 공용 `ui-sidebar-actions` 를 쓰지 않는다 — 공용 코드가 **첫 번째** 그 클래스를
+  //   패널 바닥 액션 줄로 집어(`ui_template_overlay.ts` splitSidebarActions),
+  //   스크롤 영역이 이 줄 안에 갇히고 아래 칸들이 통째로 잘린다(2026-09-12).
+  buttons.className = "b08-quantity__dev-actions";
   buttons.append(unlock, relock);
   row.append(buttons);
   return row;
@@ -640,6 +645,8 @@ function buildQuantitySidePanel(
       },
     ),
   );
+  // ⚠ `?.` 이 빠지면 표를 못 받은 때(`table === null`) 여기서 터져 **페이지가 통째로
+  //   백지**가 된다 — 정작 보여야 할 「표를 못 불렀다」 안내까지 같이 사라진다(2026-09-12 실측).
   const placing = (
     table as unknown as {
       concrete_placing?: {
@@ -647,8 +654,8 @@ function buildQuantitySidePanel(
         is_default: boolean;
         price_hint?: { basis?: string; values?: Record<string, number> };
       };
-    }
-  ).concrete_placing;
+    } | null
+  )?.concrete_placing;
   if (placing) {
     // ⚠ 방식 이름을 **늘** 값 옆에 보인다 — 코드(`12-01-01`)만으로는 무엇을 쓰는지 모른다.
     const label = PLACING_LABELS[placing.method] ?? placing.method;
@@ -743,6 +750,10 @@ function buildQuantitySidePanel(
   // TODO(미결) — 설정의 초기값을 무엇으로 볼지 사용자 확인 뒤에 붙인다.
   actions.append(saveButton, confirmButton);
   panel.append(actions);
+
+  // 조건 칸을 B03~B07 공통 상자로 묶고 제목 클릭으로 접히게 한다.
+  groupPanelSections(panel);
+  attachCollapsible(panel);
   return panel;
 }
 
diff --git a/B08_Quantity/B08_Quantity_UI_SidePanel_Sections.ts b/B08_Quantity/B08_Quantity_UI_SidePanel_Sections.ts
new file mode 100644
index 00000000..d696cbb0
--- /dev/null
+++ b/B08_Quantity/B08_Quantity_UI_SidePanel_Sections.ts
@@ -0,0 +1,64 @@
+/* =============================================================================
+ * B08_Quantity_UI_SidePanel_Sections.ts
+ * 좌측 산출조건 패널을 **B03~B07 공통 상자**로 묶는 자리.
+ *
+ * 페이지 본문(`B08_Quantity_UI_Page.ts`)이 이미 700줄을 크게 넘어 새 코드를 그리로
+ * 보내지 않고 이 파일로 뀜다(CLAUDE.md 4장 700줄 제한).
+ * ========================================================================== */
+
+/**
+ * 다 쌓인 조건 칸을 「제목 + 그 뒤 칸들」 덩어리로 잘라 **B03~B07 공통 상자**에 담는다.
+ *
+ * 왜 다 쌓은 뒤에 한 번 묶나
+ *   칸을 쌓는 코드가 400줄에 흩어져 있어 append 를 하나하나 고치면 손댈 자리가 너무 많다.
+ *   제목은 `field(이름, "")` 이 낸 **값이 빈 줄**이고, 그것이 나올 때마다 새 상자가 열린다.
+ *   상자 겉모습·접기는 공용 클래스가 전담한다 — B04·B06 과 같은 틀이다.
+ *
+ * ⚠ 개발용 줄과 맨 아래 액션 줄은 **상자 밖에 남긴다.** 액션 줄은 공용 코드가 패널 바닥에
+ *   고정하는 줄이라 상자 안으로 들어가면 바닥에 안 붙는다.
+ * ⚠ 첫 제목보다 앞에 오는 것(산출법 한 줄 · 토량환산계수 구획)은 **제목 없는 상자**에 담는다 —
+ *   토량환산계수는 제 제목을 제 안에 이미 들고 있어 따로 붙이면 제목이 둘이 된다.
+ */
+export function groupPanelSections(panel: HTMLElement): void {
+  const isHeading = (node: Element): boolean => {
+    if (node.tagName !== "DIV" || !node.classList.contains("b08-quantity__field")) return false;
+    const value = node.querySelector(".b08-quantity__field-value");
+    return !value || !value.textContent;
+  };
+  const newSection = (title: string | null): HTMLElement => {
+    const section = document.createElement("section");
+    section.className = title
+      ? "b08-quantity__section ui-collapsible ui-sidebar-section"
+      : "b08-quantity__section ui-sidebar-section";
+    if (title) {
+      const heading = document.createElement("p");
+      heading.className = "b08-quantity__section-title ui-collapsible__title";
+      heading.textContent = title;
+      section.append(heading);
+    }
+    return section;
+  };
+
+  let box: HTMLElement | null = null;
+  for (const node of [...panel.children]) {
+    // 개발용 줄·바닥 액션 줄은 건너뛰고 상자도 끊는다.
+    if (
+      node.classList.contains("b08-quantity__dev") ||
+      node.classList.contains("ui-sidebar-actions")
+    ) {
+      box = null;
+      continue;
+    }
+    if (isHeading(node)) {
+      box = newSection(node.firstElementChild?.textContent ?? "");
+      panel.insertBefore(box, node);
+      node.remove();
+      continue;
+    }
+    if (!box) {
+      box = newSection(null);
+      panel.insertBefore(box, node);
+    }
+    box.append(node);
+  }
+}