feat(b09): 탭 상세 안내 글 영역 = 줄 수 변수(--b09-hint-lines 기본 3)만큼 · 넘치면 영역 안 스크롤 · 탭 표 = 공용 fillViewport(창 끝 − 안내 글) · 설계내역서 레벨 안내 + 탭 안내 한 영역 · 공용 spaceBelow 형제 바깥 여백도 셈(페이지 스크롤 7px 없앰) (310 · 요구 203)

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01XWh5wNNycMkbwMpACz1rte

B09_Estimation/B09_Estimation_UI_Page.css

@@ -1,6 +1,7 @@
 /* B09 원가계산 — 탭 줄 · 안내 글. 색은 테마 변수만(밝음 · 어두움 같이). */
 
 .b09-estimation {
+  --b09-hint-lines: 3; /* 203 안내 글 영역 줄 수 — 이 값만 바꿈(높이 · 스크롤 · 표 칸 같이 맞음) */
   display: flex;
   flex-direction: column;
   gap: var(--spacing-8);
@@ -57,7 +58,7 @@ html.is-bm-route .b09-estimation > .b09-estimation__tabs:first-child {
   white-space: nowrap;
 }
 
-/* 202-1 안내 줄 = 표 · 카드 판 아래(묶음 탭은 한 줄 줄임표 · 전문 = 공용 호버) */
+/* 202-1 안내 줄 = 표 · 카드 판 아래 · 203 줄 수 변수만큼 보임 · 넘치면 영역 안 스크롤 */
 .b09-estimation .ui-data-table + .ui-general-block__empty,
 .b09-estimation .ui-group-cards + .ui-general-block__empty {
   margin: var(--spacing-8) 0 0;
@@ -65,9 +66,8 @@ html.is-bm-route .b09-estimation > .b09-estimation__tabs:first-child {
 
 .b09-estimation__line-hint {
   min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+  max-height: calc(var(--b09-hint-lines) * 1lh);
+  overflow-y: auto;
   font-size: var(--text-caption);
 }
 

B09_Estimation/B09_Estimation_UI_Shell.ts

@@ -183,6 +183,7 @@ export function renderB09Estimation(root: HTMLElement): void {
     const makeTable = (extra?: (index: number) => string | null): DataTable => {
       const made = createDataTable({
         ...tableOptionsOf(spec, tab),
+        fillViewport: true, // 203 표 칸 = 창 끝 − 안내 글 영역(팝업 · 인쇄는 그대로)
         rowClass: extra
           ? (i) => [spec.rowClass?.(i), extra(i)].filter(Boolean).join(" ") || null
           : spec.rowClass,
@@ -230,7 +231,7 @@ export function renderB09Estimation(root: HTMLElement): void {
         );
       return made;
     };
-    const hint = spec.hint ? lineHint(note(spec.hint)) : null; // 236-1 안내 글 = 한 줄
+    const hint = spec.hint ? lineHint(note(spec.hint)) : null; // 203 안내 글 = 줄 수 변수만큼 · 넘치면 스크롤
     // 171-3 묶음 탭(일위대가표 · 중기사용료 · 단가산출근거) = 묶음 카드 기본 · 좌측 하단 스위치로 표(304-1)
     if (isGroupTab(tab)) {
       return void panel.replaceChildren(
@@ -259,7 +260,10 @@ export function renderB09Estimation(root: HTMLElement): void {
     if (range) unpickOnRelease(table.root);
     const level = bill ? levelBar(table.root, bill, (i) => table.edit(i)) : null;
     if (level) bars.setTools(level.tools);
-    panel.replaceChildren(table.root, ...(level ? [level.guide] : []), ...(hint ? [hint] : []));
+    // 203 안내 글 영역 하나 — 설계내역서 레벨 안내 + 탭 안내 이어 붙임
+    if (level && hint) hint.textContent = `${level.guide.textContent} · ${hint.textContent}`;
+    const foot = hint ?? level?.guide;
+    panel.replaceChildren(table.root, ...(foot ? [foot] : []));
     if (at >= 0) requestAnimationFrame(() => table.focusRow(at, false)); // 스크롤만(표시 = 빨강)
   };
 

B09_Estimation/B09_Estimation_UI_Tabs_Groups.ts

@@ -228,7 +228,7 @@ function numberFormat(spec: TabTable, key: string): (v: number | null | undefine
 
 /* ── 그리기 ───────────────────────────────────────────────────────────── */
 
-/** 안내 글 = 한 줄(줄임표) · 잘렸을 때만 마우스 올리면 전문(공용 호버 185-3) */
+/** 안내 글 = 줄 수 변수(203 `--b09-hint-lines`)만큼 · 넘치면 영역 안 스크롤 · 가로로 잘렸을 때만 전문(공용 호버 185-3) */
 export function lineHint(hint: HTMLElement | null): HTMLElement | null {
   if (!hint || hint.classList.contains("b09-estimation__line-hint")) return hint;
   hint.classList.add("b09-estimation__line-hint");