fix(sw): square the multi step header process ends

- SWProcessHeader appearance="multi": the process base and both end
  covers meet the file name and the window area with right angles
  (border-radius 0, multi block only). default keeps the Strana top
  corners 6 / covers 5; step tabs, arrows, colors and sizes unchanged
- DESIGN_RULES §14 and Step Header spec §9.2 record the multi-only rule
- process-header-states.check.mjs: default 6 / 5 kept, multi 0 (17/17);
  build:sw and check:ai-docs pass, Storybook zoom shows square multi ends

WORKING_CONTEXT.md

@@ -1,5 +1,10 @@
 # Working Context
 
+## 2026-11-05 — Step Header 프로세스 영역 양 끝 직각
+
+- 사용자 결정: `SWProcessHeader appearance="multi"`만 프로세스 영역(파일명 옆·창 영역 옆) 위 모서리를 직각으로(`default`는 Strana 6px·덮개 5px 유지 — 처음 두 타입 모두로 들었다가 사용자 정정). `sw-process-header.css` multi 블록에 바탕 `::before`·양 끝 덮개 `border-radius: 0` 1줄. 단계 탭 캡슐·화살표·사다리꼴 면·색·높이 변경 없음. Header 최외곽은 원래 직각.
+- 문서: DESIGN_RULES §14 프로세스 바탕 행, Process 명세 §9.2. 회귀 검사 `process-header-states.check.mjs`에 default 6/5 유지·multi 0 검사 추가. 미Commit.
+
 ## 2026-11-05 — Header 스타일 적용 범위·빈 파일명 Hover·Step 활성화 규칙
 
 - 단일 기준: `docs/ai/AI_GUIDE.md` 5단계 "Header 전용 스타일의 적용 범위"(4개 패키지 사본 sync, sw 사본 LF 유지). 참조만: AI_GUIDE 6단계 5번, `packages/sw/ai/AI_USAGE.md` §3, `packages/ui/ai/AI_USAGE.md` §3.

docs/sw/sw-process-header-design-spec.md

@@ -251,7 +251,7 @@ Strana 비교 캡처는 `D:\Strana\_verification\header-rework-20261029\renders\
 ### 9.2 `default`와 공유한 것 / 다른 것
 
 - **사다리꼴 배치:** 시작·끝 그룹에만(§4 확정 규칙). 873:17421처럼 가운데 그룹이 켜지면 도형 없이 밝은 바탕만 보입니다(2026-11-03 수정 — 이전 구현은 켜진 가운데 그룹에도 발광 면을 그렸음).
-- **같은 구현(값 대조 일치):** 프로세스 바탕(ProcessBase gradient · DocBorder · 위 모서리 6), 비활성 덮개(`#004430` 90%, 꼭지·홈 모양 포함), 활성 발광 면·비활성 바깥 면(같은 경로), 화살표(선·채움·그늘 같은 값, Dim 25% / 50%), 홈 도형, 파일명 면 gradient, 창 이동 아이콘·줄무늬 색, 캡션 버튼 글리프, 선택·키보드·Callback.
+- **같은 구현(값 대조 일치):** 프로세스 바탕(ProcessBase gradient · DocBorder. 위 모서리는 2026-11-05부터 `multi`만 직각 — 사용자 결정, `default`는 6 유지), 비활성 덮개(`#004430` 90%, 꼭지·홈 모양 포함), 활성 발광 면·비활성 바깥 면(같은 경로), 화살표(선·채움·그늘 같은 값, Dim 25% / 50%), 홈 도형, 파일명 면 gradient, 창 이동 아이콘·줄무늬 색, 캡션 버튼 글리프, 선택·키보드·Callback.
 - **multi 전용 CSS:** 49px 면, 파일명 최대 189·단색 테두리(로고·파일명 글자는 SWHeader 기준으로 default와 공통), SW 기본 pill(41 · 40 × 37), 창 이동 위치, 그룹 내용(제목 위 · 탭 25), 탭 4상태, 발광 면 위치(왼쪽 50 / 반전 48).
 - **새로 만든 것:** 진행 완료 상태(`data-progress="done"`, multi만), `documentEmptyLabel`, `labelHidden`, `appearance`. 컴포넌트 DOM은 하나이며 multi는 탭의 층 9개 대신 면 하나만 그립니다.
 - **Figma 도구 아이콘 5개**(help · view-3d · controls · menu-list · exit-arrow)는 Story fixture(`src/sw/assets/process-header/tool-*.svg`, Figma 원본)에만 둡니다.

packages/sw/ai/DESIGN_RULES.md

@@ -227,7 +227,7 @@
 |---|---|---|
 | 배치 | 홈·파일명 글자 = SWHeader 그대로(두 타입 공통, 2026-11-03): 홈 12 + 로고(32 × 17 → 80) + 36, 파일명은 홈과 15 겹친 뒤 2 간격(x 65), padding 5 / 12, 14px 700·자간 0.06em·SW 외곽선, 화살표 없음(글자 로고 18px 700, 최소 58px 칸 → 홈 최소 106, 더 긴 글자는 글자 폭만큼 넓어짐) → 프로세스 → Layer 면(객체 면, 양옆 1) → 창 영역(파일명 면 + 테두리 1px) | SW 토큰 |
 | 로고 폭(Process 고유, 2026-11-05) | 공통 원칙은 §1 "로고 확장 공통 원칙". Process 고유: `logoText`만 최소 58px 칸(→ 홈 최소 106), 넓어진 홈만큼 파일명(최소 100)·가운데 영역이 flex 비율로 줄어듦. 로고 변경 시 `default`·`multi`를 각각 확인하고 단계 말줄임 정책은 그대로 둡니다 | SW 토큰 |
-| 프로세스 바탕 | 세로 `#0C5941 → #19BF8D 10.1% → #109069 18.27% → #0C5941`, 파일명 테두리 1px, 위 모서리 6 | `--hm-sw-process-base-background`, `-base-border-gradient` |
+| 프로세스 바탕 | 세로 `#0C5941 → #19BF8D 10.1% → #109069 18.27% → #0C5941`, 파일명 테두리 1px, 위 모서리 6. `multi`는 양 끝 직각(2026-11-05 — 단계 탭 모양과 별개) | `--hm-sw-process-base-background`, `-base-border-gradient` |
 | 비활성 덮개 | `rgba(0, 68, 48, .902)`: 비활성 그룹, 화살표 꼭지(앞 그룹 비활성)·홈(뒤 그룹 비활성), 비활성 바깥 그룹 쪽 남는 폭 | `--hm-sw-process-dim` |
 | 그룹 글자 | 번호 12px 500 `#69C2A6`, 이름 12px(최대 56, 줄바꿈) 활성 700 `#FFF` / 비활성 500 `#C3EBDF`, 위 10.67(한 줄)·8.67(두 줄), 그룹 좌우 20, 이름 뒤 12 | `--hm-sw-process-number-color`, `-group-color`, `-group-active-color` |
 | 활성 그룹 면 | 기운 변 도형, 3층 면(85·80·45%), 발광 `drop-shadow(0 0 30px rgba(88,181,153,.85))`, 가장자리 빛 3px Blur 5, 화살표 쪽 76px에 걸쳐 사라짐. 첫 그룹 왼쪽 40px 밖, 마지막 그룹 좌우 반전·44px 밖 | `--hm-sw-process-glow-*` |

packages/sw/src/theme/sw-process-header.css

@@ -529,6 +529,10 @@
   --hm-sw-process-shape-start: 50px;
   --hm-sw-process-shape-end: 48px;
 }
+/* Square ends (2026-11-05 user decision, `multi` only): the base and the end covers meet the file name and the window
+   area with right angles. `default` keeps the Strana top corners 6 (cover 5); the step tabs keep their own shapes. */
+.hm-sw-process-bar[data-appearance="multi"]::before,
+.hm-sw-process-bar[data-appearance="multi"] > .hm-sw-process-bar__rest { border-radius: 0; }
 .hm-sw-process-bar[data-appearance="multi"] .hm-sw-process-bar__group {
   flex-direction: column;
   align-items: flex-start;

packages/sw/tests/process-header-states.check.mjs

@@ -77,6 +77,14 @@ const GROUPS = [
   check("styles.css: the empty label keeps its color on hover (no :not(:hover) scope)",
     /\[data-document-empty\] \.hm-sw-header__document-button \.hm-sw-header__document-name ?\{ ?color: ?var\(--hm-sw-process-document-empty-color\)/.test(css)
     && !/\[data-document-empty\] \.hm-sw-header__document-button:not\(:hover\)/.test(css))
+  // 6. Process-area ends (2026-11-05): `multi` square (base and end covers radius 0), `default` keeps the Strana 6 / 5.
+  const block = selector => css.match(new RegExp(`(?:^|\\}|\\*/) ?${selector.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")} ?\\{([^}]*)\\}`))?.[1] ?? null
+  const base = block(".hm-sw-process-bar::before") ?? ""
+  check("styles.css: default keeps the process base top corners 6 and the end covers 5",
+    /border-radius: ?6px 6px 0 0/.test(base) && /border-top-left-radius: ?5px/.test(block('.hm-sw-process-bar__rest[data-side="start"]') ?? "")
+    && /border-top-right-radius: ?5px/.test(block('.hm-sw-process-bar__rest[data-side="end"]') ?? ""), { base })
+  check("styles.css: multi sets radius 0 on the process base and both end covers",
+    /\.hm-sw-process-bar\[data-appearance="?multi"?\]::before ?, ?\.hm-sw-process-bar\[data-appearance="?multi"?\] ?> ?\.hm-sw-process-bar__rest ?\{ ?border-radius: ?0 ?;? ?\}/.test(css))
 }
 
 const passed = results.filter(Boolean).length