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

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

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

B03_FileInput/B03_FileInput_UI_TempPicker.ts

@@ -7,8 +7,11 @@
  * [업로드] 버튼을 눌렀을 때 일어난다(2026-08-08 사용자 지시).
  * ========================================================================== */
 
-import { createButton, showToast } from "@ui/ui_template_elements";
+import { createCard, createButton, setCardSelected, showToast } from "@ui/ui_template_elements";
+import { createEmpty } from "@ui/ui_template_empty";
 import { currentLanguageIndex, ui_locales } from "@ui/ui_template_locale";
+import { openModal as openDialog } from "@ui/ui_template_modal";
+import { createText } from "@ui/ui_template_text";
 import { fetchTempBatches, type TempBatchItem } from "../B01_Dashboard/B01_Dashboard_Api_Temp";
 import "./B03_FileInput_UI_Style_Temp.css";
 
@@ -71,76 +74,59 @@ export function createTempPicker(
       return;
     }
 
-    const backdrop = document.createElement("div");
-    backdrop.className = "b03-file__modal-backdrop";
-    const modal = document.createElement("div");
-    modal.className = "b03-file__modal b03-file__temp-modal ui-popup";
-    modal.setAttribute("role", "dialog");
-    modal.setAttribute("aria-modal", "true");
-
-    const title = document.createElement("h3");
-    title.textContent = L("B03_Temp_Modal_Title");
-    const list = document.createElement("div");
-    list.className = "b03-file__temp-list";
-
     let pending: TempBatchItem | null = selectedBatch;
 
-    if (batches.length === 0) {
-      const empty = document.createElement("p");
-      empty.className = "b03-file__temp-empty";
-      empty.textContent = L("B03_Temp_Modal_Empty");
-      list.append(empty);
-    }
-    for (const batch of batches) {
-      const option = document.createElement("button");
-      option.type = "button";
-      option.className = "b03-file__temp-option";
-      option.classList.toggle("is-selected", pending?.batch_id === batch.batch_id);
-      const name = document.createElement("strong");
-      name.textContent = batch.name;
-      const meta = document.createElement("span");
-      meta.textContent = `${batch.files.length}${L("B03_Temp_FileCount")} · ${formatBytes(
-        batch.total_size_bytes,
-      )}`;
-      const files = document.createElement("span");
-      files.className = "b03-file__temp-option-files";
-      files.textContent = batch.files.map((file) => file.file_type.toUpperCase()).join(", ");
-      option.append(name, meta, files);
-      option.addEventListener("click", () => {
-        pending = batch;
-        list
-          .querySelectorAll(".b03-file__temp-option")
-          .forEach((element) => element.classList.remove("is-selected"));
-        option.classList.add("is-selected");
-      });
-      list.append(option);
-    }
-
-    const actions = document.createElement("div");
-    actions.className = "b03-file__temp-modal-actions";
-    const close = (): void => backdrop.remove();
-    actions.append(
-      createButton({ label: L("Common_Btn_Cancel"), variant: "ghost", onClick: close }),
-      createButton({
-        label: L("Common_Btn_Confirm"),
-        variant: "filled",
-        onClick: () => {
-          if (!pending) {
-            showToast(L("B03_Temp_Select_Required"), "warning");
-            return;
-          }
-          applySelection(pending);
-          close();
-        },
-      }),
-    );
-
-    modal.append(title, list, actions);
-    backdrop.append(modal);
-    backdrop.addEventListener("click", (event) => {
-      if (event.target === backdrop) close();
+    openDialog({
+      title: L("B03_Temp_Modal_Title"),
+      closeLabel: L("Common_Btn_Cancel"),
+      width: "40rem",
+      dialogClass: "b03-file__temp-modal",
+      mount: (body, close, actions) => {
+        const list = document.createElement("div");
+        list.className = "b03-file__temp-list";
+        if (batches.length === 0) {
+          list.append(createEmpty({ text: L("B03_Temp_Modal_Empty"), small: true }));
+        }
+        for (const batch of batches) {
+          const files = batch.files.map((file) => file.file_type.toUpperCase()).join(", ");
+          const option = createCard({
+            title: batch.name,
+            pad: 12,
+            selected: pending?.batch_id === batch.batch_id,
+            body: [
+              createText(
+                `${batch.files.length}${L("B03_Temp_FileCount")} · ${formatBytes(
+                  batch.total_size_bytes,
+                )}`,
+              ),
+              createText(files),
+            ],
+            onSelect: () => {
+              pending = batch;
+              list
+                .querySelectorAll<HTMLElement>(".ui-card--select")
+                .forEach((card) => setCardSelected(card, card === option));
+            },
+          });
+          list.append(option);
+        }
+        body.append(list);
+        actions.append(
+          createButton({
+            label: L("Common_Btn_Confirm"),
+            variant: "filled",
+            onClick: () => {
+              if (!pending) {
+                showToast(L("B03_Temp_Select_Required"), "warning");
+                return;
+              }
+              applySelection(pending);
+              close();
+            },
+          }),
+        );
+      },
     });
-    document.body.append(backdrop);
   }
 
   return {