refactor(B03): 파일 입력 화면 마무리 — 파일 놓기 칸 · 모달 · 확인창 · 고르는 카드 · 목록 줄 부품 (PLAN 553-1)

- 놓기 칸 = 파일 놓기 칸 부품(한 줄로 눕힘) · 임시 보관함 창 = 모달 + 고르는 카드 + 빈 상태 · 교체 확인 = 확인창
- 업로드 도중 window.confirm 둘 → 확인창 부품(글 그대로 · 단추 이름으로 선택 안내) · 예정노선 고름 줄 = 목록 줄
- 모달 CSS · 임시 목록 옛 CSS 걷음 · 가이드 촬영 선택자 · 지킴 시험

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

B03_FileInput/B03_FileInput_UI_Page.ts

@@ -6,6 +6,7 @@ import {
 } from "@config/config_frontend";
 import { currentLanguageIndex, ui_locales } from "@ui/ui_template_locale";
 import { createBanner } from "@ui/ui_template_banner";
+import { createDrop } from "@ui/ui_template_drop";
 import { createButton, createIconButton, createTag } from "@ui/ui_template_elements";
 import { createPanelHead } from "@ui/ui_template_panel_head";
 import { createProgressBar, type ProgressBarHandle } from "@ui/ui_template_progress";
@@ -84,19 +85,15 @@ export async function renderB03FileInput(root: HTMLElement): Promise<void> {
   const subtitle = createText(L("B03_File_Subtitle"), "muted", 14);
   subtitle.classList.add("b03-file__subtitle");
 
-  const fileInput = document.createElement("input");
-  fileInput.type = "file";
-  fileInput.multiple = true;
-  fileInput.accept = UPLOAD_ALLOWED_EXT.join(",");
-  fileInput.className = "b03-file__native-input";
-
-  const dropzone = document.createElement("div");
-  dropzone.className = "b03-file__dropzone";
-  dropzone.tabIndex = 0;
-  const dropzoneLabel = document.createElement("strong");
-  dropzoneLabel.textContent = L("B03_File_Select_Label");
   // 설명은 좌측 안내 패널 몫이다(2026-09-03 사용자 지시) — 여기는 자리 이름만 남긴다.
-  dropzone.append(dropzoneLabel, fileInput);
+  const drop = createDrop({
+    accept: UPLOAD_ALLOWED_EXT.join(","),
+    multiple: true,
+    text: L("B03_File_Select_Label"),
+    onFiles: (files) => onFileSelected(files),
+  });
+  const dropzone = drop.root;
+  dropzone.classList.add("b03-file__dropzone");
 
   const pageError = document.createElement("p");
   pageError.className = "ui-text ui-text--error b03-file__error";
@@ -530,29 +527,6 @@ export async function renderB03FileInput(root: HTMLElement): Promise<void> {
   const { detectPausedUploads, pollAnalysis, relockWhileInitialPipelineRuns, startChunkedUpload } =
     flow;
 
-  function onB03_File_Select_Change(): void {
-    onFileSelected(fileInput.files ? Array.from(fileInput.files) : []);
-    fileInput.value = "";
-  }
-
-  function onB03_File_Drop(event: DragEvent): void {
-    event.preventDefault();
-    dropzone.classList.remove("is-dragging");
-    onFileSelected(event.dataTransfer?.files ? Array.from(event.dataTransfer.files) : []);
-  }
-
-  fileInput.addEventListener("change", onB03_File_Select_Change);
-  dropzone.addEventListener("click", () => fileInput.click());
-  dropzone.addEventListener("keydown", (event) => {
-    if (event.key === "Enter" || event.key === " ") fileInput.click();
-  });
-  dropzone.addEventListener("dragover", (event) => {
-    event.preventDefault();
-    dropzone.classList.add("is-dragging");
-  });
-  dropzone.addEventListener("dragleave", () => dropzone.classList.remove("is-dragging"));
-  dropzone.addEventListener("drop", onB03_File_Drop);
-
   uploadButton = createButton({
     label: L("B03_File_Upload_Button"),
     variant: "filled",