diff --git a/ui_template/ui_template_overlay.css b/ui_template/ui_template_overlay.css
index c0e2062c..97a6daad 100644
--- a/ui_template/ui_template_overlay.css
+++ b/ui_template/ui_template_overlay.css
@@ -61,6 +61,27 @@
 
 /* 끌어 옮기기 (2026-09-04) — 헤더를 잡아 끈다. 자리를 옮기면 인라인 left/top이
    위 고정값을 덮어쓴다. 아래 공간이 모자라면 `is-flip-up`으로 헤더 위로 펼친다. */
+/* 좁은 폭 — 두 패널이 본문을 덮어 「넘침은 0 인데 못 읽는」 화면이 된다.
+   2026-09-08 실측(B08): 본문에 남는 폭이 860px 에서 348 · 760 에서 248 · 620 에서 108 ·
+   500 에서 **4px** 였다. 표는 자기 스크롤 안에서 잘리므로 넘침 수치로는 안 잡힌다.
+   ⇒ 폭에 따라 패널을 줄이고, 진행단계는 **아래로 내려** 본문 윗부분(탭·표 머리)을
+   가리지 않게 한다. 넓은 화면 배치는 그대로 둔다. */
+@media (max-width: 860px) {
+  /* ⚠ 「본문에 최소 이만큼은 남긴다」로 잡는다 — 패널을 비율(vw)로 줄이면 좁아질수록
+     본문도 같이 줄어 결국 못 읽는다. 남길 폭을 정하고 패널이 그만큼 물러나게 한다. */
+  .ui-workflow-overlay__panel--title {
+    width: min(var(--wf-left-panel-narrow-width), calc(100vw - var(--wf-min-content-width)));
+  }
+
+  .ui-workflow-overlay__panel--progress {
+    top: auto;
+    bottom: var(--spacing-16);
+    right: var(--spacing-8);
+    width: min(calc(var(--wf-left-panel-width) / 2), 22vw);
+    max-height: 40vh;
+  }
+}
+
 .ui-workflow-overlay__panel--progress .ui-workflow-overlay__header {
   cursor: move;
   touch-action: none;
diff --git a/ui_template/ui_template_theme.css b/ui_template/ui_template_theme.css
index 181d418e..6ff260f1 100644
--- a/ui_template/ui_template_theme.css
+++ b/ui_template/ui_template_theme.css
@@ -186,6 +186,11 @@
   /* 워크플로우 3단 레이아웃 (frontend.md §2) */
   --wf-header-height: 56px; /* 상단: 타이틀 + 진행 단계 */
   --wf-left-panel-width: 320px; /* 좌측: 입력 폼 (너비 고정) */
+  /* 좁은 폭에서 좌측 패널이 물러나며 **본문에 남겨 두는 최소 폭**(2026-09-08).
+     이 값이 없으면 패널이 화면을 거의 다 덮어 「넘침 0 인데 못 읽는」 화면이 된다. */
+  --wf-min-content-width: 320px;
+  /* 좁은 폭에서 쓰는 좌측 패널 폭 — 입력 칸이 아직 읽히는 선까지만 줄인다. */
+  --wf-left-panel-narrow-width: 280px;
 
   /* ---------------------------------------------------------------------------
    * 8. 상호작용 (Motion & Z-index)