refactor(B06): 줌 · 조정창 단추 · 머리 알약 · 알림 칩 · 접이 넷 · 띠 알림 · 빈 상태를 부품으로 (PLAN 553-2)

- 줌 [+ − ⤢] = 아이콘 단추 22 · 상세 [칸에 넣기] = 단추 22 · [여럿] = 켜기 칩 22 · 사이 금 지움
- 구조물 조정창 십자 · 9키 · 단 수 [－][＋] = 아이콘 단추(선) 22 · ✕ = 고스트 · 옵션 연동 · 경사 = 켜기 칩 24(유입 · 유출 칸 꼴은 그대로)
- 카드 머리 단면유형 = 배지(정보) 20 · 구조물 = 배지(강조) 20
- 알림 칩 = 단추(고스트) 20(색만 경고 / 정보) · 측점 목록 날 단추 = 단추(고스트) 20
- 날 details 넷(변수 위치 안내 · 상세값 · 다른 프로젝트 불러오기 · 횡단 조정) = 접이 구역(ui-collapsible) · 가이드 장면 선택자 `details.` 뗌
- 측점 없는 구조물 줄 · 표준 미반영 알림 = 띠 알림(경고) — 날 색 #fff8e6 · #e0b872 · #7a5a12 · #8a6a22 · 폴백 #d98324 지움
- 빈 그림 자리 = 빈 상태 · 선 치수 글 옛 보라 이름 → --color-accent
- 흉내 DOM 시험 · 서버 Node 묶음이 끄는 파일이라 부품 함수 대신 클래스 · data-size 계약 + 부품 CSS 직접 실음(묶음 셋 빌드 정상)
- 시험 넷 기대 고침 — 108(닫기 클래스) · 179-1(줌 사이 금 규칙 없음) · 196-1(칩 클래스) · 207-1(칩 반경 = 부품)
- 그대로 둔 것 — 수량 산출표(b06-detail__qtable · B07 산출서 병합 칸 · 세로선 = 부품 표에 없는 꼴) · 조정창 고르기 · 암 절토 칸(작은 단 없음) · 조정창 · ⋯ · 측점 목록 떠 있는 판

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

B06_Section/B06_Section_UI_Cross_Card_Chrome.ts

@@ -16,6 +16,7 @@ import {
   stationLabel,
   structureDisplayName,
 } from "./B06_Section_UI_Section_Common";
+import "@ui/ui_template_badge.css"; // 알약 = 부품 배지 클래스(553-2)
 
 /**
  * 성토사면 경사길이 표기 칸 — 성토측이 없으면 null.
@@ -96,7 +97,10 @@ export function appendCardHeader(
 
   // 단면유형 pill(자동 판정, 읽기 전용) — 구조물 pill과 동일 표기, 좌측 배치(E-3).
   const modePill = document.createElement("span");
-  modePill.className = "b06-cross-card__mode";
+  // 부품 배지(알약 · 정보) 20(553-2) — 클래스 · data-size 계약(흉내 DOM 시험이 @ui 를 안 풂)
+  modePill.className =
+    "ui-badge ui-badge--pill ui-badge--info ui-tag ui-tag--info b06-cross-card__mode";
+  modePill.setAttribute("data-size", "20");
   modePill.textContent = sectionModeLabel(section.design?.section_mode);
   modePill.title = L("B06_Design_Mode_Legend");
 
@@ -121,7 +125,9 @@ export function appendCardHeader(
   const structureName = section.structure;
   if (structureName) {
     const structure = document.createElement("span");
-    structure.className = "b06-cross-card__structure";
+    structure.className =
+      "ui-badge ui-badge--pill ui-badge--accent ui-tag ui-tag--accent b06-cross-card__structure"; // 배지 20
+    structure.setAttribute("data-size", "20");
     // 배수관은 관종·관경(`파형강관 D1200`)이 아니라 표시 이름 하나로 적는다
     // (2026-09-03 사용자 지시). 관종·관경은 툴팁에 남긴다.
     structure.textContent = structureDisplayName(structureName);