feat(b09): 원가계산 화면 새 틀 — 설계내역서·일위대가·단가산출근거 탭(실무 서식 · 내역 → 호표 → 산근 들어가기)

- 틀 B09_Estimation_UI_Shell: 탭 줄과 등록만 · 탭마다 파일 하나(계약 _Shell_Types)
- 설계내역서: 실무 열(합계/노무/재료/경비 단가·금액) · 머리글 접기·레벨 고르개 · 줄 누르면 제 N 호표 · 단산 N 단추 · 미확정 빨간 테두리
- 일위대가·단가산출근거: 목록표(내역에 처음 쓰인 차례) + 본표 · 줄 누르면 하위 호표·산근·중기로 · 자취 눌러 되돌아감 · Q 식 글자 그대로
- 옛 탭 여섯(원가계산서·중기·관급사급·기초자료·설계서 구성·산출기초)은 옛 코드 그대로 이어 붙임 — 새 탭 파일이 서면 등록 한 줄씩 바꿈
- 본표 합계 줄 = 호표 성분 소계 원 미만 절사 값 · 비율 줄 금액도 0.1원 절사 표시
- 사전 ui_template_locale_b3 새 벌(b2 700줄 넘음)
- 검증: ORCA 검증 프로젝트 — 본체 122,848,989 · 지장목제거 865·15,460,837 · 제 9 호표 합계 1,708 = 산근 8호표 합계 1,708 · 옛 탭 여섯 다 뜸 · 접기 53→51·레벨1 11줄

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_016VBGFXB9AbJBwXP19z75Qq

B09_Estimation/B09_Estimation_UI_Page.ts

@@ -15,7 +15,6 @@
 
 import { ui_locales, currentLanguageIndex } from "@ui/ui_template_locale";
 import { createButton, createInputField, showToast } from "@ui/ui_template_elements";
-import { createWorkflowLayout } from "@ui/ui_template_workflow_layout";
 import { attachCollapsible } from "@ui/ui_template_collapsible";
 import {
   attachProvenance,
@@ -47,7 +46,6 @@ import {
   type PriceSourcesDto,
 } from "./B09_Estimation_UI_BaseData";
 import { API_BASE_URL, CURRENT_PROJECT_ID_KEY } from "@config/config_frontend";
-import { workflowSteps } from "../A00_Common/b_page_scaffold";
 import { goToWorkflowStage, WORKFLOW_STEP_ROUTES } from "../A00_Common/b_workflow_nav";
 
 function L(key: keyof typeof ui_locales): string {
@@ -900,7 +898,15 @@ async function confirmEstimationStage(projectId: string): Promise<void> {
  * 페이지 진입점
  * -------------------------------------------------------------------------- */
 
-export async function renderB09Estimation(root: HTMLElement): Promise<void> {
+/** 옛 화면을 새 틀(`B09_Estimation_UI_Shell`) 안에 이어 붙이는 자리 — 옛 탭 줄은 숨고 틀이 `select` 로 고름.
+ *  ⚠ 옛 탭을 새 탭 파일로 다 바꾸면 이 파일째 지움(PLAN 12장 · 브레인 판정). */
+export interface LegacyEstimation {
+  main: HTMLElement;
+  panel: HTMLElement;
+  select: (key: string) => void;
+}
+
+export function createLegacyEstimation(root: HTMLElement): LegacyEstimation {
   injectStyles();
   const projectId = localStorage.getItem(CURRENT_PROJECT_ID_KEY);
   const form: CostFormState = { ...INITIAL_FORM };
@@ -1546,16 +1552,22 @@ export async function renderB09Estimation(root: HTMLElement): Promise<void> {
   drawTabs();
   drawBody();
 
-  const layout = createWorkflowLayout({
-    title: L("B09_Estimation_Title"),
-    steps: workflowSteps(),
-    activeStep: 6,
-    leftPanel: panel.root,
-    mainContent: main,
-    routes: WORKFLOW_STEP_ROUTES,
-    onStepClick: (stepIndex) => {
-      if (projectId) goToWorkflowStage(projectId, WORKFLOW_STEP_ROUTES[stepIndex]);
+  return {
+    main,
+    panel: panel.root,
+    select: (key: string) => {
+      activeTab = key;
+      drawTabs();
+      drawBody();
+      // 관급·사급 표는 내역 응답에 실려 옴 — 옛 내역 탭을 안 거치므로 여기서 받음.
+      if (key === "supply" && !bill && projectId) {
+        void fetchBill(projectId)
+          .then((data) => {
+            bill = data;
+            drawBody();
+          })
+          .catch(() => showToast(L("B09_Estimation_Boq_Failed"), "error"));
+      }
     },
-  });
-  root.append(layout.root);
+  };
 }