fix(ui): 아주 좁은 폭에서는 좌패널을 줄이지 말고 접은 채로 시작

⚠ 앞 커밋의 「본문에 320 을 남긴다」가 폭 500 에서 패널을 **180px 로 눌러** 목록
이름이 잘렸음(랩탑 보조 실측: 잘린 이름 2건). 폭을 반씩 나누면 **둘 다 못 쓰는
화면**이 됨.

- CSS ≤560 — 패널을 **안 줄임**(280px 유지). 본문 밀기는 이미 ≤860 에서 꺼져 있어
  패널이 **본문 위에 겹쳐** 뜨고, 읽을 때는 손잡이로 접음. 폭 500 에서 잘린 글자 0.
- TS — 정한 적이 없고 화면이 아주 좁으면(≤560) **접은 채로 시작**함. 펼친 채로 열면
  본문이 가려진 화면부터 보게 되기 때문임.
- ⚠ **사용자가 정한 적이 있으면 그 뜻이 이김** — 저장값이 있으면 그대로 따름.
- ⚠ **처음 앉힐 때는 저장하지 않음** — 좁아서 접은 것을 「사용자가 접었다」로 적으면
  넓은 화면으로 돌아와도 접힌 채로 남음.

실측
  정한 적 없음 + 500  → 접힘 true · 저장값 null (기록 안 남김)
  정한 적 없음 + 1400 → 접힘 false · 저장값 null
  「펼침」 정해 둠 + 500 → 접힘 false (사용자 뜻이 이김)
  잘린 글자 860·620·560·500 전부 0

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

ui_template/ui_template_overlay.css

@@ -81,6 +81,16 @@
   }
 }
 
+/* ⚠ 아주 좁은 폭(≤560)에서는 **줄이지 않는다** — 본문 320 을 남기려다 패널이 180px
+   까지 눌려 목록 이름이 잘렸다(2026-09-08 랩탑 보조 실측: 폭 500 에서 잘린 이름 2건).
+   폭을 반씩 나누면 **둘 다 못 쓰는 화면**이 되므로, 패널은 쓸 만한 폭을 지키고
+   **본문 위에 겹쳐** 뜬다(본문 밀기는 이미 ≤860 에서 꺼져 있다). 읽을 때는 손잡이로 접는다. */
+@media (max-width: 560px) {
+  .ui-workflow-overlay__panel--title {
+    width: min(var(--wf-left-panel-narrow-width), calc(100vw - var(--spacing-48)));
+  }
+}
+
 .ui-workflow-overlay__panel--progress .ui-workflow-overlay__header {
   cursor: move;
   touch-action: none;