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

@@ -27,7 +27,8 @@
 	--cad-text-dim: var(--color-text-secondary);
 	--cad-text-muted: var(--color-text-muted);
 	--cad-accent: var(--color-accent);
-	--cad-hover: var(--color-mist-violet);
+	/* 마우스 바탕 = 부품 상자와 같은 값 · 켜짐 바탕은 --color-accent-soft */
+	--cad-hover: var(--color-hover);
 	--cad-canvas: var(--draw-canvas);
 }
 
@@ -111,21 +112,12 @@ body > canvas[data-id="canvas"] {
 	flex: 1;
 	min-width: 0;
 }
+/* 접기 단추 = 아이콘 단추 부품(단 20) · 여기는 자리만 */
 .cad-ribbon-tabs__collapse {
-	width: 24px;
-	height: 20px;
 	align-self: center;
-	padding: 0;
-	border: 1px solid transparent;
-	border-radius: 4px;
-	background: transparent;
-	color: var(--cad-text-dim);
-	font-size: 11px;
 }
-.cad-ribbon-tabs__collapse:hover {
-	background: var(--cad-hover);
-}
-.cad-ribbon-tabs button {
+/* 리본 탭 = CAD 고유 꼴 그대로(토큰만) */
+.cad-ribbon-tabs > button:not(.ui-icon-btn) {
 	padding: 0 14px;
 	border: 1px solid transparent;
 	border-bottom: 0;
@@ -134,10 +126,10 @@ body > canvas[data-id="canvas"] {
 	color: var(--cad-text-dim);
 	font-size: 12px;
 }
-.cad-ribbon-tabs button:hover {
+.cad-ribbon-tabs > button:not(.ui-icon-btn):hover {
 	background: var(--cad-hover);
 }
-.cad-ribbon-tabs button[data-active="true"] {
+.cad-ribbon-tabs > button[data-active="true"] {
 	background: var(--cad-chrome);
 	border-color: var(--cad-line);
 	color: var(--color-text);
@@ -185,53 +177,25 @@ body > canvas[data-id="canvas"] {
 .cad-ribbon-group__label[data-expandable="true"]:hover {
 	color: var(--cad-accent);
 }
+/* 꼴 = 메뉴 부품(`ui-ctx-menu`) · 여기는 자리만 */
 .cad-ribbon-overflow {
 	/* 리본 패널 줄이 가로 스크롤 상자라 그 안에서는 잘린다 — 화면 좌표로 띄운다 */
 	position: fixed;
 	z-index: 20;
-	display: flex;
-	flex-direction: column;
 	min-width: 170px;
 	max-height: 72vh;
-	padding: 4px;
-	overflow-y: auto;
-	background: var(--cad-chrome-raised);
-	border: 1px solid var(--cad-line);
-	border-radius: 4px;
-	box-shadow: var(--shadow-lg);
 }
-.cad-ribbon-overflow button {
+.cad-ribbon-overflow > .ui-ctx-menu__item {
 	display: flex;
 	gap: 8px;
 	align-items: center;
-	padding: 5px 8px;
-	border: 0;
-	border-radius: 3px;
-	background: transparent;
-	font-size: 11px;
-	text-align: left;
-}
-.cad-ribbon-overflow button:hover {
-	background: var(--cad-hover);
 }
+/* ↶ ↷ = 아이콘 단추 부품(단 20) · 여기는 자리만 */
 .cad-quick-access {
 	display: flex;
 	gap: 2px;
 	align-self: center;
 }
-.cad-ribbon-tabs .cad-quick-access button {
-	width: 24px;
-	height: 20px;
-	padding: 0;
-	border: 1px solid transparent;
-	border-radius: 4px;
-	line-height: 1;
-	font-size: 13px;
-}
-.cad-quick-access button:hover {
-	border-color: var(--cad-line);
-	background: var(--cad-hover);
-}
 .cad-ribbon-props {
 	display: flex;
 	flex-direction: column;
@@ -252,15 +216,16 @@ body > canvas[data-id="canvas"] {
 	width: 52px;
 	text-align: left;
 }
+/* 리본 안 칸 = CAD 고유 꼴(토큰만) · 높이 = 크기 단 18 · 둥글기 4 */
 .cad-prop select,
 .cad-prop input[type="number"] {
-	height: 19px;
+	height: 18px;
 	min-width: 78px;
 	padding: 0 3px;
 	color: var(--cad-text);
 	background: var(--cad-chrome-sunken);
 	border: 1px solid var(--cad-line);
-	border-radius: 3px;
+	border-radius: 4px;
 	font-size: 11px;
 }
 .cad-prop input[type="number"] {
@@ -268,13 +233,13 @@ body > canvas[data-id="canvas"] {
 	width: 52px;
 }
 .cad-prop input[type="color"] {
-	height: 19px;
+	height: 18px;
 	width: 44px;
 	padding: 1px;
 	background: var(--cad-chrome-sunken);
 	/* 흰색을 골라도 스와치 자리가 보이게 테두리를 진하게 준다 (2026-09-01) */
 	border: 1px solid var(--cad-text-muted);
-	border-radius: 3px;
+	border-radius: 4px;
 	cursor: pointer;
 }
 /* 고른 것들 색이 다름(488) — 빈 견본(투명 · 점선 테두리) */
@@ -328,7 +293,7 @@ input[type="color"][data-mixed="true"]::-webkit-color-swatch { background: trans
 }
 .cad-tool[data-active="true"] {
 	border-color: var(--cad-accent);
-	background: var(--cad-hover);
+	background: var(--color-accent-soft);
 	box-shadow: inset 0 -2px var(--cad-accent);
 }
 .cad-tool:disabled {
@@ -373,23 +338,14 @@ input[type="color"][data-mixed="true"]::-webkit-color-swatch { background: trans
 	background: var(--cad-chrome-raised);
 	color: var(--cad-text-dim);
 }
+/* 꼴 = 탭 부품(`ui-tabs`) · 여기는 칸 둘이 폭을 나누는 배치만 */
 .cad-inspector-tabs {
 	display: grid;
 	grid-template-columns: 1fr 1fr;
-	height: 38px;
-	border-bottom: 1px solid var(--cad-line);
+	gap: 0;
 }
-.cad-inspector-tabs button {
-	border: 0;
-	border-bottom: 2px solid transparent;
-	background: var(--cad-chrome-sunken);
-	color: var(--cad-text-dim);
-	font-size: 12px;
-}
-.cad-inspector-tabs button[data-active="true"] {
-	border-bottom-color: var(--cad-accent);
-	background: var(--cad-chrome-raised);
-	color: var(--color-text);
+.cad-inspector-tabs > .ui-tabs__tab {
+	justify-content: center;
 }
 .cad-properties {
 	padding: 14px 12px;