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.css

@@ -4,6 +4,7 @@
   background: var(--color-bg);
 }
 
+/* 단계 줄(552-4) — 가로 막대 · compact(28) · 세로 목록(40 · ☰ 서랍) · 상태 = 마우스 · 고름(지금) · 막힘 · 단계 색 테두리 */
 .ui-workflow-layout__steps {
   display: flex;
   gap: var(--spacing-8);
@@ -41,7 +42,7 @@
   align-items: center;
   gap: var(--spacing-8);
   width: 100%;
-  min-height: var(--spacing-40);
+  min-height: 40px;
   border-radius: var(--radius-buttons);
   text-align: left;
   white-space: normal;
@@ -70,18 +71,20 @@
   border-bottom-right-radius: 0;
 }
 
-.ui-workflow-layout__step.is-enabled:hover {
-  background: var(--color-surface);
+.ui-workflow-layout__step.is-enabled:is(:hover, [data-state="hover"]) {
+  background: var(--color-hover);
+  color: var(--color-text);
 }
 
-.ui-workflow-layout__steps.is-compact .ui-workflow-layout__step {
+.ui-workflow-layout__steps.is-compact .ui-workflow-layout__step,
+.ui-workflow-layout__step[data-size="28"] {
   height: 28px;
   padding: 0 var(--spacing-12, var(--spacing-8));
   white-space: nowrap;
 }
 
 .ui-workflow-layout__step.is-active {
-  background: var(--color-mist-violet);
+  background: var(--color-accent-soft);
   color: var(--color-accent);
 }
 
@@ -99,7 +102,7 @@
 }
 
 .ui-workflow-layout__step.state-stale {
-  border-color: var(--color-muted);
+  border-color: var(--color-text-muted);
   opacity: 0.7;
 }