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/FramePlaceholderPanel.tsx

@@ -139,15 +139,15 @@ export const FramePlaceholderPanel: FC = () => {
 	if (!visible) return null;
 
 	return (
-		<section className="cad-frame-tokens controls">
-			<header className="cad-frame-tokens__header">
-				<span>
-					{folded ? '자리표 놓기' : '자리표 놓기 — 누르면 화면 가운데에 서고, 끌어서 자리를 잡습니다'}
-				</span>
+		<section className="ui-float-panel cad-frame-tokens controls">
+			<header className="ui-float-panel__head cad-frame-tokens__header">
+				<span className="ui-float-panel__title">자리표 놓기</span>
 				<button
 					type="button"
-					className="cad-frame-tokens__fold"
+					className="ui-icon-btn ui-icon-btn--ghost"
+					data-size="24"
 					aria-expanded={!folded}
+					aria-label={folded ? '자리표 패널 펴기' : '자리표 패널 접기'}
 					title={folded ? '자리표 패널 펴기' : '자리표 패널 접기'}
 					onClick={() => setFolded(!folded)}
 				>
@@ -155,58 +155,71 @@ export const FramePlaceholderPanel: FC = () => {
 				</button>
 			</header>
 			{!folded && (
-				<>
-			<div className="cad-frame-tokens__group">
-				<span className="cad-frame-tokens__title">글자</span>
-				{TEXT_TOKENS.map((token) => (
-					<button
-						key={token}
-						type="button"
-						className="cad-frame-tokens__button"
-						onClick={() => addTextPlaceholder(token)}
-					>
-						{token}
-					</button>
-				))}
-			</div>
-			<div className="cad-frame-tokens__group">
-				<span className="cad-frame-tokens__title">그림 (칸에 비율 그대로 들어감)</span>
-				{IMAGE_TOKENS.map((token) => (
-					<button
-						key={token}
-						type="button"
-						className="cad-frame-tokens__button"
-						onClick={() => void addImagePlaceholder(token)}
-					>
-						{token}
-					</button>
-				))}
-			</div>
-			{picked && (
-				<div className="cad-frame-tokens__group">
-					<span className="cad-frame-tokens__title">고른 자리표 칸 크기 (mm)</span>
-					<label className="cad-frame-tokens__size">
-						가로
-						<input
-							type="number"
-							min={1}
-							value={size.width}
-							onChange={(event) => applySize(Number(event.target.value), size.height)}
-						/>
-					</label>
-					<label className="cad-frame-tokens__size">
-						세로
-						<input
-							type="number"
-							min={1}
-							value={size.height}
-							onChange={(event) => applySize(size.width, Number(event.target.value))}
-						/>
-					</label>
+				<div className="ui-float-panel__body cad-frame-tokens__body">
+					<p className="ui-text ui-text--muted">
+						누르면 화면 가운데에 서고, 끌어서 자리를 잡습니다
+					</p>
+					<div className="cad-frame-tokens__group">
+						<span className="ui-text ui-text--muted cad-frame-tokens__title">글자</span>
+						{TEXT_TOKENS.map((token) => (
+							<button
+								key={token}
+								type="button"
+								className="ui-btn ui-btn--ghost"
+								data-size="22"
+								onClick={() => addTextPlaceholder(token)}
+							>
+								{token}
+							</button>
+						))}
+					</div>
+					<div className="cad-frame-tokens__group">
+						<span className="ui-text ui-text--muted cad-frame-tokens__title">
+							그림 (칸에 비율 그대로 들어감)
+						</span>
+						{IMAGE_TOKENS.map((token) => (
+							<button
+								key={token}
+								type="button"
+								className="ui-btn ui-btn--ghost"
+								data-size="22"
+								onClick={() => void addImagePlaceholder(token)}
+							>
+								{token}
+							</button>
+						))}
+					</div>
+					{picked && (
+						<div className="cad-frame-tokens__group">
+							<span className="ui-text ui-text--muted cad-frame-tokens__title">
+								고른 자리표 칸 크기 (mm)
+							</span>
+							<label className="ui-text ui-text--muted cad-frame-tokens__size">
+								가로
+								<input
+									type="number"
+									className="ui-input"
+									data-size="24"
+									min={1}
+									value={size.width}
+									onChange={(event) => applySize(Number(event.target.value), size.height)}
+								/>
+							</label>
+							<label className="ui-text ui-text--muted cad-frame-tokens__size">
+								세로
+								<input
+									type="number"
+									className="ui-input"
+									data-size="24"
+									min={1}
+									value={size.height}
+									onChange={(event) => applySize(size.width, Number(event.target.value))}
+								/>
+							</label>
+						</div>
+					)}
 				</div>
 			)}
-				</>
-			)}
 		</section>
 	);
 };