refactor(B02·B03): 페이지 자체 변종을 부품 상자 부품으로 — 파일 카드 · 띠 알림 · 진행 막대 · 켜기 · 패널 머리 · 단추 (PLAN 553-1)

- B03 파일 카드 = 카드 부품 · [선택] · [×] = 단추 · 아이콘 단추 · 진행 막대 · 오류 띠 = 부품
- B03 현황 · 이어올리기 · 예정노선 바뀜 = 띠 알림 · LAS 없이 설계 = 켜기 · 노선 · 지형 제목 = 패널 머리
- B03 · B02 죽은 CSS 걷음 · 날 색 → 공통 값 · 가이드 촬영 선택자 · 지킴 시험 test_553_1_pages

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

B03_FileInput/B03_FileInput_UI_Page_Flow.ts

@@ -8,6 +8,7 @@
  * ========================================================================== */
 
 import { CURRENT_PROJECT_ID_KEY, type RoutePath } from "@config/config_frontend";
+import { createBanner } from "@ui/ui_template_banner";
 import { createButton, showToast } from "@ui/ui_template_elements";
 import { currentLanguageIndex, ui_locales } from "@ui/ui_template_locale";
 import { navigateTo } from "../A00_Common/router";
@@ -81,16 +82,16 @@ export function createUploadFlow(ctx: UploadFlowContext): UploadFlowHandle {
       state.uploadSessionId = session.uploadSessionId;
       state.progressBytes = session.completedChunks * session.chunkSizeBytes;
       ctx.renderSlot(state.slot);
-      const text = document.createElement("span");
-      text.textContent = `${L("B03_File_Status_Detected")}: ${session.fileName}`;
       const resume = createButton({
         label: L("B03_File_Resume_Button"),
         variant: "ghost",
+        size: 24,
         onClick: () => void startChunkedUpload([state]),
       });
       const fresh = createButton({
         label: L("B03_File_New_Button"),
         variant: "ghost",
+        size: 24,
         onClick: () => {
           localStorage.removeItem(session.key);
           state.uploadSessionId = undefined;
@@ -100,7 +101,13 @@ export function createUploadFlow(ctx: UploadFlowContext): UploadFlowHandle {
           ctx.resumeBanner.classList.remove("is-visible");
         },
       });
-      ctx.resumeBanner.append(text, resume, fresh);
+      ctx.resumeBanner.append(
+        createBanner({
+          tone: "info",
+          text: `${L("B03_File_Status_Detected")}: ${session.fileName}`,
+          actions: [resume, fresh],
+        }),
+      );
       ctx.resumeBanner.classList.add("is-visible");
       break;
     }