refactor(B08·B09): 자체 변종 → 부품 상자 — 탭 줄 · 분할 고르기 · 배지 칩 · 도구줄 · 떠 있는 판 · 보조 글 (PLAN 553-3)

- 위 · 보조 탭 줄 = 부품 탭(fillTabs · 밑줄 · 알약) · B09 좌측 스위치 = 분할 고르기
- 연결 칩 · 검사 탭 이름 · 끌기 태그 = 배지 · 이정표 도구 · 머리 줄 · 저장 줄 = 도구줄 · 구간 고침 · 행 고름 창 = 떠 있는 판
- 안내 · 빈 줄 · 상태 글 = 보조 글 · 운반 칸 = 카드 · 인쇄 미리보기 좌측 줄 = B09 dock 한 벌 · 쪽 체크 = 라디오 · 체크 부품
- 시험 흉내 틀 · 문구 맞춤

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

B09_Estimation/B09_Estimation_UI_Page.css

@@ -8,22 +8,17 @@
   padding: var(--spacing-16) var(--spacing-24); /* B08 본문과 같은 값 */
 }
 
-.b09-estimation .ui-general-block__empty,
-.b09-estimation__hint {
-  color: var(--color-text-secondary);
-}
-
-.b09-estimation__hint {
-  margin: 0 0 var(--spacing-8);
-  font-size: var(--text-caption);
-}
-
+/* 탭 줄 모양 = 부품 탭(밑줄 · 보조 알약) · 여기는 줄바꿈 · 아래 틈만(B08 과 같은 값) */
 .b09-estimation__tabs {
-  display: flex;
   flex-wrap: wrap;
-  gap: var(--spacing-8); /* B08 위 · 보조 탭 줄과 같은 값(181-1) */
+}
+
+.b09-estimation > .b09-estimation__tabs:first-child {
+  margin-bottom: var(--spacing-8);
+}
+
+.b09-estimation__tabs.ui-subtabs {
   padding-bottom: var(--spacing-8);
-  border-bottom: 1px solid var(--color-border);
 }
 
 /* ☰ 들여쓰기(7-2) */
@@ -59,12 +54,13 @@ html.is-bm-route .b09-estimation > .b09-estimation__tabs:first-child {
 }
 
 /* 202-1 안내 줄 = 표 · 카드 판 아래 · 203 줄 수 변수만큼 보임 · 넘치면 영역 안 스크롤 */
-.b09-estimation .ui-data-table + .ui-general-block__empty,
-.b09-estimation .ui-group-cards + .ui-general-block__empty {
+.b09-estimation .ui-data-table + .ui-text,
+.b09-estimation .ui-group-cards + .ui-text {
   margin: var(--spacing-8) 0 0;
 }
 
 .b09-estimation__line-hint {
+  display: block; /* 부품 보조 글은 flex — 줄 수 · 스크롤은 블록에서 */
   min-width: 0;
   max-height: calc(var(--b09-hint-lines) * 1lh);
   overflow-y: auto;
@@ -192,15 +188,11 @@ html.is-bm-route .b09-estimation > .b09-estimation__tabs:first-child {
 /* 연결 점검 목록 — 이름 · 탭(작게) · 알림 글 */
 .b09-check__head,
 .b09-check__note {
-  margin: var(--spacing-8) 0 0;
-  color: var(--color-text-secondary);
-  font-size: var(--text-caption);
+  margin-top: var(--spacing-8);
 }
 
 .b09-check__tab {
   flex: none;
-  color: var(--color-text-secondary);
-  font-size: var(--text-caption);
 }
 
 /* 줄 끌기(204-1) — 놓을 자리 · 레벨 미리 보기 선 · 못 놓는 자리 = 빨간 점선 */
@@ -232,15 +224,11 @@ html.is-bm-route .b09-estimation > .b09-estimation__tabs:first-child {
   background: var(--color-canvas);
 }
 
-.b09-estimation__drop-tag {
+.b09-estimation__drop > .b09-estimation__drop-tag.ui-badge {
   position: absolute;
   top: -11px;
-  padding: 1px var(--spacing-8);
-  border: 1px solid;
-  border-radius: var(--radius-pills);
+  border: 1px solid; /* 놓을 자리 색(--drop-c)을 따름 */
   background: var(--color-surface-raised);
-  font-size: var(--text-caption);
-  white-space: nowrap;
 }
 
 .b09-estimation [data-b09-table="bill"] tbody tr.is-drop-into td {
@@ -266,44 +254,43 @@ html.is-bm-route .b09-estimation > .b09-estimation__tabs:first-child {
 .b09-dock .b09-dock__row {
   display: flex;
   gap: var(--btn-group-gap);
+  min-width: 0;
 }
 
+/* 보기 · 행 누름 스위치 = 부품 분할 고르기 · 줄 폭을 나눠 가짐 */
+.b09-dock > .ui-segment {
+  display: flex;
+}
+
+.b09-dock > .ui-segment > .ui-segment__item {
+  flex: 1 1 0;
+  min-width: 0;
+}
+
+/* 줄 폭을 나눠 가짐 · 가로 넘침 없음(min-width 0 = 공용 단추 줄의 auto 보다 앞섬 · 글 줄임표) — 인쇄 미리보기 좌측 줄도 같은 규칙 */
 .b09-dock .b09-dock__row > .ui-btn:not(.ui-help-btn, .ui-step-nav-btn) {
   flex: 1 1 0;
-  min-width: auto;
+  min-width: 0;
   padding-inline: var(--spacing-4);
+  overflow: hidden;
+  text-overflow: ellipsis;
   white-space: nowrap;
 }
 
-/* 303-2 행 고름 팝업 — 누른 줄 곁 표 조각 창(겹쳐 쌓임 · 창 안 b09 표 꼴 그대로 · 빨강 테두리) */
+.b09-dock .b09-dock__row > .ui-btn[hidden] {
+  display: none;
+}
+
+/* 303-2 행 고름 팝업 — 누른 줄 곁 표 조각 창(겹쳐 쌓임) = 부품 떠 있는 판 · 여기는 자리 · 크기만 */
 .b09-estimation.b09-popup {
   position: fixed;
   z-index: var(--z-modal);
-  gap: var(--spacing-4);
   width: max-content;
   max-width: 90vw;
   max-height: 80vh;
-  padding: var(--spacing-8);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-lg);
-  background: var(--color-surface-raised);
-  box-shadow: var(--shadow-lg);
-}
-
-.b09-popup__head {
-  display: flex;
-  flex: none;
-  align-items: center;
-  gap: var(--spacing-4);
-}
-
-.b09-popup__title {
-  margin-right: auto;
-  font-weight: var(--font-weight-bold);
+  padding: 0;
 }
 
 .b09-popup .ui-data-table {
-  flex: 1 1 auto;
-  min-height: 0;
   max-height: none;
 }