fix(ui): 좌측 패널 아래 단추 묶음 한 양식 · [?] 정사각 · 줄바꿈 없음(54-20)

- 공용 규칙 한 곳(overlay.css) — 단추 사이 --btn-group-gap · 고르게 늘되 글보다 좁아지지 않음 · 줄바꿈 막음
- [?] 너비 = 높이(32px)
- B05·B06 전용 여백 규칙(design_dock.css) 지움 — 공용으로 옮김
- 치수 재기 ui_checks/54-20_좌측단추_치수.js
- 전: 높이 31.7·45.7(B04 [이 모델 확정] · B07 [현재 도면 확정] 두 줄) · 여백 8/16 섞임 · B06 [종단 보기] 글이 단추 꽉 참 · [?] 36×31.7
- 후: B02~B09 높이 31.7 하나 · 글 14px Inter 500 하나 · 줄바꿈·넘침 0 · 좁은 패널(280px)도 같음

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01W4uKaV4ZBhsJN4GHG7yRj4

A00_Common/design/design_dock.css

@@ -1,7 +0,0 @@
-/* 좌측 패널 아래 고정 영역의 단추 넷([초기화][저장][확정][보기 전환]) — 좁은 패널에서도 글자가
-   두 줄로 꺾이지 않게 안쪽 여백을 줄이고 줄바꿈을 막는다(계획서 24-2b). */
-.b05-route__dock .b05-route__actions .ui-btn,
-.b05-route__dock .b06-profile__actions .ui-btn {
-  padding-inline: var(--spacing-8);
-  white-space: nowrap;
-}

resources/tester/ui_checks/54-20_좌측단추_치수.js

@@ -0,0 +1,83 @@
+/* 54-20 — B02~B09 좌측 패널 아래 공통 단추 묶음([?] · [초기화] · [저장] · [확정] · [횡단 보기] …) 치수
+ * 시작 화면: 아무 B 화면(로그인 · 환경 배정 storage 프로젝트가 현재 프로젝트)
+ * 부르는 법: orca eval --expression "$(cat 이 파일)" · 1분 넘으면 끊기므로
+ *   `window.__btn5420 = ["b05-profile", …];` 를 앞에 붙여 나눠 부름
+ * 쓰는 것: 없음(주소 이동 · 재기만 · 끝나면 처음 주소로)
+ * 기대 수치:
+ *   - 줄마다 보이는 단추 h 하나 · fs 하나 · ff 하나 · 줄 안 gap 하나 · wrap = false · over = false
+ *   - [?] = 정사각(w = h)
+ *   - 좁은 패널(narrow = true 로 패널 폭을 최소로 줄여 다시 잼)에서도 wrap · over 없음
+ */
+(async () => {
+  const w = (ms) => new Promise((r) => setTimeout(r, ms));
+  const vis = (n) => n && n.offsetParent !== null;
+  const start = location.hash;
+  const routes = window.__btn5420 ?? [
+    "b02-proj-register",
+    "b03-file-input",
+    "b04-preprocess",
+    "b05-profile",
+    "b06-section",
+    "b07-design-detail",
+    "b08-quantity",
+    "b09-estimation",
+  ];
+  const measure = () => {
+    const help = [...document.querySelectorAll(".ui-help-btn")].find(vis);
+    const rows = help
+      ? [help.closest(".ui-sidebar-actions") ?? help.parentElement]
+      : [...document.querySelectorAll(".ui-sidebar-actions")].filter(vis);
+    return rows.map((row) => {
+      const btns = [...row.querySelectorAll("button")].filter(vis);
+      const rr = row.getBoundingClientRect();
+      return {
+        row: row.className,
+        rowW: Math.round(rr.width),
+        gap: getComputedStyle(help?.parentElement ?? row).gap,
+        btns: btns.map((b) => {
+          const s = getComputedStyle(b);
+          const r = b.getBoundingClientRect();
+          const text = document.createRange();
+          text.selectNodeContents(b);
+          return {
+            t: b.innerText.trim(),
+            cls: b.className,
+            h: +r.height.toFixed(1),
+            w: +r.width.toFixed(1),
+            fs: s.fontSize,
+            fw: s.fontWeight,
+            ff: s.fontFamily.split(",")[0],
+            pad: s.padding,
+            bd: s.borderWidth + " " + s.borderStyle,
+            rad: s.borderRadius,
+            top: +(r.top - rr.top).toFixed(1),
+            wrap: text.getBoundingClientRect().height > parseFloat(s.fontSize) * 1.6,
+            // 글이 단추 안쪽(여백 뺀 폭)을 넘거나 단추가 줄 밖으로 나감
+            over:
+              text.getBoundingClientRect().width >
+                b.clientWidth - parseFloat(s.paddingLeft) - parseFloat(s.paddingRight) + 0.5 ||
+              r.right > rr.right + 1,
+          };
+        }),
+      };
+    });
+  };
+  const out = [];
+  for (const route of routes) {
+    location.hash = `#/${route}`;
+    await w(4500);
+    const res = { page: route.slice(0, 3).toUpperCase(), rows: measure() };
+    const panel = document.querySelector(".ui-workflow-overlay__panel--title");
+    if (window.__btn5420narrow && panel) {
+      const was = panel.style.width;
+      panel.style.width = "var(--wf-left-panel-narrow-width)"; // 좁은 창(860px 아래) 폭
+      await w(400);
+      res.narrowW = Math.round(panel.getBoundingClientRect().width);
+      res.narrow = measure();
+      panel.style.width = was;
+    }
+    out.push(res);
+  }
+  location.hash = start;
+  return JSON.stringify(out);
+})();

ui_template/ui_template_help.css

@@ -2,9 +2,10 @@
 .ui-sidebar-actions .ui-help-btn,
 .ui-help-btn {
   flex: none;
-  width: auto;
-  min-width: 2.25rem;
-  padding-inline: var(--spacing-12);
+  /* 정사각 — 너비 = 높이(글 한 줄 · 위아래 여백 · 테두리) */
+  width: calc(1em + 2 * var(--spacing-8) + 2px);
+  min-width: 0;
+  padding-inline: 0;
 }
 
 .ui-help.ui-modal {

ui_template/ui_template_overlay.css

@@ -368,6 +368,21 @@
   min-width: 0;
 }
 
+/* 아래 단추 묶음(54-20) — B03~B09 한 양식 · 사이 = --btn-group-gap · 고르게 늘되 글보다 좁아지지
+   않음 · 좁은 패널(280px)에서도 한 줄. 단추 줄 = [data-help-row](없으면 묶음 자신) */
+.ui-sidebar-actions:not(:has([data-help-row])),
+.ui-sidebar-actions [data-help-row] {
+  gap: var(--btn-group-gap);
+}
+
+.ui-sidebar-actions > .ui-btn:not(.ui-help-btn),
+.ui-sidebar-actions [data-help-row] > .ui-btn:not(.ui-help-btn) {
+  flex: 1 1 0;
+  min-width: auto;
+  padding-inline: var(--spacing-4);
+  white-space: nowrap;
+}
+
 /* 사이드 패널 내부 컨테이너 공통 외곽선 — 기본 --color-border가 두 테마 모두 흐려
    안 보인다는 보고(2026-08-05). 본문 보조색을 섞어 어느 테마에서든 뚜렷하게.
    45%는 아직 흐리다는 재보고(2026-08-06)로 보조색 비중을 75%로 올렸다 — 테마 변수