refactor(cad): CAD 앱 겉 자체 변종을 부품 상자 부품으로 — 상태막대 켜기 칩 · 패널 탭 · 떠 있는 판 · 메뉴 · 아이콘 단추 · 확인창 (PLAN 553-6)

- 부품 상자 CSS · 단추 기본 꼴을 CAD iframe 에 실음(integration/ui-kit.ts) · 자리 · 폭은 cad-* 그대로
- 상태막대 = ui-toggle--chip 22 · 특성/레이어 = ui-tabs 36 · ↶↷ · 리본 접기 · 탐색 막대 = ui-icon-btn 20 · 32
- 빠른 특성 · 블록 라이브러리 · 자리표 = ui-float-panel · 리본 넘침 · 스냅 · 명령 자동완성 = ui-ctx-menu
- window.confirm · window.prompt → askConfirm · askText · 빈 안내 = ui-empty 작은 꼴
- 높이 단: 리본 칸 19→18 · 명령 칸 26→28 · 레이어 줄 40→42 · 문서 탭 25→24 · 도각 편집 단추 24
- 마우스 바탕 = --color-hover · 켜짐 = --color-accent-soft · 도면 그림 색(--draw-*) 안 건드림
- 안 쓰는 DropdownButton 지움(쓰는 곳 0 · grep)

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

B07_DesignDetail/openwebcad/src/components/StatusBar.tsx

@@ -1,4 +1,4 @@
-/** 상태막대 — AutoCAD 하단 제도 보조 토글 */
+/** 상태막대 — AutoCAD 하단 제도 보조 토글 · 켜기 칩 부품(`ui-toggle--chip` · 단 22) */
 import type { FC } from 'react';
 import {
 	getAngleStep,
@@ -27,7 +27,9 @@ export const StatusBar: FC<StatusBarProps> = ({ commandLineVisible, onToggleComm
 		<footer className="cad-statusbar controls">
 			<button
 				type="button"
-				data-active={snap}
+				className="ui-toggle ui-toggle--chip"
+				data-size="22"
+				aria-pressed={snap}
 				title="객체 스냅 (OSNAP)"
 				onClick={() => setSnapEnabled(!snap)}
 			>
@@ -35,7 +37,9 @@ export const StatusBar: FC<StatusBarProps> = ({ commandLineVisible, onToggleComm
 			</button>
 			<button
 				type="button"
-				data-active={ortho}
+				className="ui-toggle ui-toggle--chip"
+				data-size="22"
+				aria-pressed={ortho}
 				title="직교 모드 (F8) — 90° 간격 각도 가이드"
 				onClick={() => setAngleStep(ortho ? 0 : 90)}
 			>
@@ -43,7 +47,9 @@ export const StatusBar: FC<StatusBarProps> = ({ commandLineVisible, onToggleComm
 			</button>
 			<button
 				type="button"
-				data-active={polar}
+				className="ui-toggle ui-toggle--chip"
+				data-size="22"
+				aria-pressed={polar}
 				title="극좌표 추적 (F10) — 45° 간격 각도 가이드"
 				onClick={() => setAngleStep(polar ? 0 : 45)}
 			>
@@ -51,7 +57,9 @@ export const StatusBar: FC<StatusBarProps> = ({ commandLineVisible, onToggleComm
 			</button>
 			<button
 				type="button"
-				data-active={snapTracking}
+				className="ui-toggle ui-toggle--chip"
+				data-size="22"
+				aria-pressed={snapTracking}
 				title="객체 스냅 추적 — 스냅점에 잠시 머물면 그 점에서 정렬선이 뻗는다"
 				onClick={() => setSnapTrackingEnabled(!snapTracking)}
 			>
@@ -59,7 +67,9 @@ export const StatusBar: FC<StatusBarProps> = ({ commandLineVisible, onToggleComm
 			</button>
 			<button
 				type="button"
-				data-active={grid}
+				className="ui-toggle ui-toggle--chip"
+				data-size="22"
+				aria-pressed={grid}
 				title="그리드 표시"
 				onClick={() => setGridEnabled(!grid)}
 			>
@@ -67,7 +77,9 @@ export const StatusBar: FC<StatusBarProps> = ({ commandLineVisible, onToggleComm
 			</button>
 			<button
 				type="button"
-				data-active={commandLineVisible}
+				className="ui-toggle ui-toggle--chip"
+				data-size="22"
+				aria-pressed={commandLineVisible}
 				title="명령행 표시/숨기기"
 				onClick={onToggleCommandLine}
 			>