fix(ui): 좁은 폭에서 두 오버레이가 본문을 덮던 것 — 본문에 남길 최소 폭을 정함

⚠ 「넘침은 0 인데 못 읽는」 자리였음. 표가 자기 스크롤 안에서 잘려 넘침 수치로는
안 잡히고, 실제로는 좌측 패널(320 고정)과 진행단계 패널(fixed)이 화면을 덮고 있었음.

실측(B08, 본문에 남는 폭)
  860px  348 → 388     760px  248 → 288
  620px  108 → 175     500px    4 → 194
  1400·1000 은 그대로 (넓은 화면 배치 안 건드림)

방법 — 패널을 비율(vw)로 줄이면 좁아질수록 본문도 같이 줄어 결국 못 읽음.
그래서 **본문에 남길 폭**(--wf-min-content-width: 320px)을 정하고 패널이 그만큼
물러나게 함. 좁은 폭 전용 패널 폭(--wf-left-panel-narrow-width: 280px)도 따로 둠.
진행단계 패널은 폭을 줄이고 아래로 내려 본문 윗부분(탭·표 머리)을 안 가리게 함.

확인 — B03·B05·B06·B07·B08·B09 를 1400·760 두 폭에서 훑음. 문서 넘침 전부 0,
넓은 폭 배치 변화 없음(좌측 320 유지).

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

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;

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)