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_PlanImport.ts

@@ -8,6 +8,7 @@
  * ========================================================================== */
 
 import { API_BASE_URL, CURRENT_PROJECT_ID_KEY } from "@config/config_frontend";
+import { createBanner } from "@ui/ui_template_banner";
 import {
   createButton,
   el,
@@ -17,6 +18,7 @@ import {
   showToast,
 } from "@ui/ui_template_elements";
 import { t } from "@ui/ui_template_locale";
+import { createListRow } from "@ui/ui_template_list_row";
 import { openModal } from "@ui/ui_template_modal";
 
 interface AssignedRoute {
@@ -99,7 +101,7 @@ export function mountPlanImport(
   const projectId = localStorage.getItem(CURRENT_PROJECT_ID_KEY) ?? "";
   if (!projectId) return;
   const lasFree = (): boolean => localStorage.getItem(`b03_las_free_${projectId}`) === "1";
-  const banner = el("div", { className: "b03-file__overview-pending b03-file__plan-update" });
+  const banner = el("div", { className: "b03-file__plan-update" });
   banner.hidden = true;
   bannerHost.prepend(banner);
 
@@ -117,12 +119,17 @@ export function mountPlanImport(
     if (!source?.update_available || source.assignee_id === undefined) return;
     const assigneeId = source.assignee_id;
     banner.replaceChildren(
-      el("span", { text: `${t("D04_Update_Banner")} (${source.plan_name} ${source.year}) — ` }),
-      createButton({
-        label: t("D04_Update_Reimport"),
-        variant: "ghost",
-        size: "sm",
-        onClick: () => void done(assigneeId),
+      createBanner({
+        tone: "info",
+        text: `${t("D04_Update_Banner")} (${source.plan_name} ${source.year})`,
+        actions: [
+          createButton({
+            label: t("D04_Update_Reimport"),
+            variant: "ghost",
+            size: 24,
+            onClick: () => void done(assigneeId),
+          }),
+        ],
       }),
     );
   }
@@ -149,20 +156,17 @@ export function mountPlanImport(
             ? ` · ${t("D04_Linked")}: ${route.linked_project_name}`
             : "";
           body.append(
-            el("div", {
-              className: "b03-file__plan-pick",
-              children: [
-                el("span", { text: `${route.project_name} · ${route.year}${linked}` }),
-                createButton({
-                  label: t("D04_Import_Btn"),
-                  variant: "filled",
-                  size: "sm",
-                  onClick: () => {
-                    close();
-                    void done(route.assignee_id);
-                  },
-                }),
-              ],
+            createListRow({
+              label: `${route.project_name} · ${route.year}${linked}`,
+              trailing: createButton({
+                label: t("D04_Import_Btn"),
+                variant: "filled",
+                size: 24,
+                onClick: () => {
+                  close();
+                  void done(route.assignee_id);
+                },
+              }),
             }),
           );
         }