feat(ui-kit): 틀 부품 여섯 — 작업 화면 틀 겉 · 일반 화면 틀 · 공개 화면 틀 · 단계 줄 · 패널 머리 · 목록 줄 (PLAN 552-4)

- 작업 화면 틀(overlay): 왼쪽 패널 = 흰 판 + 1 px 선 · 그림자 없음 · 덮개 = --color-scrim · 손잡이 강조색 그대로 · 자리 · 폭 그대로
- 일반 화면 틀 createPageFrame(대시보드 세부 꼴) · 공개 화면 틀 createPublicFrame(A01 hero · section 꼴)
- 단계 줄 data-size 28 · 40 · 상태 = 공통 값 · 패널 머리 createPanelHead · 목록 줄 createListRow(옛 .ui-sidebar-row 겉 함께)
- 부품 모음: 떠 있는 판 · 서랍 · 도구줄 · 단계 줄 · 패널 머리 · 목록 줄 여섯 줄을 frame 묶음으로 옮김 · 견본 = ui_template_ui_kit_frames.ts
- 지킴 시험 test_552_4_frames.py · B02~B09 · D · E · M02 전후 자리 수치 같음

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

ui_template/ui_template_workflow_layout.ts

@@ -1,3 +1,13 @@
+/* =============================================================================
+ * ui_template_workflow_layout.ts
+ * 단계 줄 `steps`(552-4 틀) + 작업 화면 바탕(createWorkflowLayout · 왼쪽 패널 · 본문 = `ui_template_overlay.ts`).
+ *   꼴   = 가로 막대(알약) · compact(한 줄 28) · 세로 목록(40 · ☰ 서랍 · 맨 위 [대시보드] 줄) · 아이콘 + 이름
+ *   크기 = data-size 28(compact) · 40(세로) · 가로 막대 = 글 + 위아래 4
+ *   상태 = 마우스 · 지금(`is-active`) · 켜짐(`is-enabled`) · 막힘(disabled) · 단계 테두리(state-complete · in_progress · stale · failed)
+ *   쓰는 법 = createStepBar(["파일", "전처리", …], 2, { stages, routes, orientation: "vertical", homeButton: true })
+ *   대신하는 옛 변종 = B01 `.b01-pd-steps` · `.b01-home__step` · A02 `.a02-workflow-row` · B11 `.b11-status__flow`
+ * ========================================================================== */
+
 import "./ui_template_workflow_layout.css";
 import { ROUTES } from "@config/config_frontend";
 import { t } from "./ui_template_locale";
@@ -82,6 +92,7 @@ export function createStepBar(
     const home = document.createElement("button");
     home.type = "button";
     home.className = "ui-workflow-layout__step is-enabled ui-workflow-layout__step--home";
+    if (options.orientation === "vertical") home.dataset.size = "40";
     const icon = document.createElement("span");
     icon.className = "ui-workflow-layout__step-icon";
     icon.setAttribute("aria-hidden", "true");
@@ -98,6 +109,8 @@ export function createStepBar(
     const button = document.createElement("button");
     button.type = "button";
     button.className = "ui-workflow-layout__step";
+    if (options?.compact) button.dataset.size = "28";
+    else if (options?.orientation === "vertical") button.dataset.size = "40";
     if (index === activeStep) button.classList.add("is-active");
     const iconText = options?.icons?.[index];
     if (iconText) {