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>

ui_template/cad_host/cad_host.css

@@ -24,7 +24,7 @@
   padding: 10px 18px;
   border-radius: var(--radius-cards);
   background-color: var(--color-surface);
-  box-shadow: 0 2px 10px rgb(0 0 0 / 18%);
+  box-shadow: var(--shadow-lg);
   color: var(--color-text);
   font-size: 13px;
 }
@@ -38,10 +38,10 @@
   transform: translateX(-50%);
   max-width: 70%;
   padding: 8px 16px;
-  border: 1px solid var(--color-danger, #d33);
+  border: 1px solid var(--color-danger);
   border-radius: var(--radius-cards);
   background-color: var(--color-surface);
-  color: var(--color-danger, #d33);
+  color: var(--color-danger);
   font-size: 12px;
 }
 
@@ -96,11 +96,10 @@
   gap: var(--spacing-8);
 }
 
+/* 단추 = 단추 부품(단 24) · 여기는 넷이 폭을 나눔만 */
 .cad-frame-edit__buttons > button {
   flex: 1 1 0;
   min-width: 0;
-  padding: 4px 8px;
-  font-size: 0.78rem;
 }
 
 /* 작도 영역 숫자 칸 넷(169-1 · `cad_host_area.ts`) — 두 줄 두 칸 */

ui_template/cad_host/cad_host_frame_edit.ts

@@ -86,6 +86,7 @@ export function createFrameTemplateEditor<D extends CadHostDrawing>(
   const finishButton = createButton({
     label: "완료",
     variant: "filled",
+    size: 24,
     onClick: () => void finish(),
   });
   /**
@@ -95,6 +96,7 @@ export function createFrameTemplateEditor<D extends CadHostDrawing>(
   const resetButton = createButton({
     label: "기본 도각 복원",
     variant: "ghost",
+    size: 24,
     onClick: () => void resetToDefault(),
   });
   /**
@@ -111,12 +113,14 @@ export function createFrameTemplateEditor<D extends CadHostDrawing>(
   const importButton = createButton({
     label: "파일 불러오기",
     variant: "ghost",
+    size: 24,
     onClick: () => fileInput.click(),
   });
 
   const cancelButton = createButton({
     label: "취소",
     variant: "ghost",
+    size: 24,
     onClick: () => leave(),
   });
   const bannerButtons = document.createElement("div");

ui_template/cad_host/cad_host_tabs.css

@@ -1,4 +1,5 @@
-/* ui_template/cad_host/cad_host_tabs — CAD 를 감싸는 공용 탭 줄(82-1 · M02 구조물 도면 · B07). */
+/* ui_template/cad_host/cad_host_tabs — CAD 를 감싸는 공용 탭 줄(82-1 · M02 구조물 도면 · B07).
+   문서 탭 = 꼴 그대로 · 공통 값 · 크기 단만(탭 24 · × 18 · + 20 · 553-6). */
 
 .cad-tabs {
   display: flex;
@@ -18,8 +19,10 @@
   flex: 0 0 auto;
   align-items: center;
   gap: 4px;
+  box-sizing: border-box;
   max-width: 220px;
-  padding: 4px 8px;
+  height: 24px;
+  padding: 0 8px;
   border: 1px solid var(--color-border);
   border-bottom: none;
   border-radius: 6px 6px 0 0;
@@ -68,7 +71,12 @@
 
 .cad-tabs__x,
 .cad-tabs__add {
-  padding: 0 4px;
+  display: inline-grid;
+  flex: none;
+  place-items: center;
+  width: 18px;
+  height: 18px;
+  padding: 0;
   border: none;
   border-radius: 4px;
   background: transparent;
@@ -80,12 +88,14 @@
 
 .cad-tabs__x:hover,
 .cad-tabs__add:hover {
-  background: var(--color-surface-raised);
+  background: var(--color-hover);
   color: var(--color-text);
 }
 
 .cad-tabs__add {
   align-self: center;
+  width: 20px;
+  height: 20px;
   margin-left: 2px;
   font-size: 16px;
 }