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

@@ -1,3 +1,5 @@
+/* 작업 화면 틀(552-4) — 왼쪽 패널 = 흰 판 + 1 px 선 · 그림자 없음(대시보드 메뉴 꼴) · 위 머리 줄 없음 · ☰ 서랍 그대로
+   자리 · 폭 · 열고 닫기는 그대로 · 겉(색 · 선 · 둥글기)만 공통 값 · 손잡이 = 강조색 테두리(2026-08-04 사용자 지시) */
 .ui-workflow-overlay {
   pointer-events: none;
 }
@@ -28,14 +30,9 @@
   border-top: 0;
   border-bottom: 0;
   border-left: 0;
-  /* 크기 조절은 안 되지만 조절 패널들과 같은 강조색 가장자리(2026-08-04 사용자 지시)
-     — 리사이저 상시 표시선과 같은 색·기조로 경계가 구분되게 한다. */
-  border-right-color: color-mix(
-    in srgb,
-    var(--panel-handle-border, var(--color-border)) 75%,
-    transparent
-  );
+  border-right-color: var(--color-border);
   border-radius: 0;
+  box-shadow: none;
   transition: transform var(--transition-base);
 }
 
@@ -142,6 +139,7 @@
   white-space: nowrap;
 }
 
+/* 진행 판 접기 [−][+] — 아이콘 단추 32 꼴 */
 .ui-workflow-overlay__toggle {
   flex: 0 0 auto;
   width: var(--spacing-32);
@@ -149,10 +147,15 @@
   border: 1px solid var(--color-border);
   border-radius: var(--radius-buttons);
   background: var(--color-canvas);
-  color: var(--color-text);
+  color: var(--color-text-secondary);
   cursor: pointer;
 }
 
+.ui-workflow-overlay__toggle:is(:hover, [data-state="hover"]) {
+  background: var(--color-hover);
+  color: var(--color-text);
+}
+
 .ui-workflow-overlay__handle {
   position: absolute;
   /* 배경과 같은 무채색 테두리는 손잡이가 묻혀 안 보였다(2026-08-04 사용자 지시).
@@ -501,29 +504,7 @@
   overflow: auto;
 }
 
-.ui-sidebar-row {
-  display: flex;
-  justify-content: space-between;
-  gap: var(--spacing-8);
-  padding: var(--spacing-4) var(--spacing-8);
-  border: 0;
-  border-radius: var(--radius-buttons);
-  background: transparent;
-  color: var(--color-text-body);
-  font: inherit;
-  font-size: var(--text-body-sm);
-  text-align: left;
-  cursor: pointer;
-}
-
-.ui-sidebar-row:hover {
-  background: var(--color-paper);
-}
-
-.ui-sidebar-row.is-active {
-  background: var(--color-mist-violet);
-  color: var(--color-accent);
-}
+/* 목록 줄 `.ui-sidebar-row` = `ui_template_list_row.css`(목록 줄 부품) */
 
 /* 기기 대응(PLAN_기기대응 2-3) — 폭 840 미만(data-size compact · medium)만.
    좌측 패널 = 서랍(본문 위에 겹침 · 덮개를 누르면 닫힘). */
@@ -538,7 +519,7 @@ html:is([data-size="compact"], [data-size="medium"])
   position: fixed;
   inset: var(--app-header-h) 0 0 0;
   z-index: calc(var(--z-dropdown) - 1);
-  background: rgba(38, 17, 74, 0.35);
+  background: var(--color-scrim);
   pointer-events: auto;
 }