feat(ai-character): 시리즈 이미지 입력 순서 조정

src/shared/ui/__tests__/file-field.test.tsx

@@ -53,3 +53,16 @@ test("FileField gives same visible file buttons field-specific accessible names"
   expect(screen.getByRole("button", { name: "오디오 파일 파일 선택" })).toBeInTheDocument();
   expect(screen.getByRole("button", { name: "커버 이미지 파일 선택" })).toBeInTheDocument();
 });
+
+test("FileField visible container exposes the focus-within ring contract", () => {
+  // Given
+  const { container } = render(<FileField accept="image/png" acceptDescription="PNG" label="대표 이미지" onChange={vi.fn()} value={null} />);
+  const input = screen.getByLabelText("대표 이미지");
+
+  // When
+  input.focus();
+
+  // Then
+  expect(input).toHaveFocus();
+  expect(container.firstElementChild).toHaveClass("focus-within:ring-2", "focus-within:ring-ring", "focus-within:ring-offset-2");
+});

src/shared/ui/file-field.tsx

@@ -31,7 +31,7 @@ export function FileField({ accept, acceptDescription, description, error, label
   }
 
   return (
-    <div className="flex flex-col gap-2 rounded-lg border border-border bg-card p-4">
+    <div className="flex flex-col gap-2 rounded-lg border border-border bg-card p-4 focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2">
       <label className="text-sm font-semibold" htmlFor={inputId}>{label}</label>
       {description === undefined ? null : <p className="text-sm text-muted-foreground" id={descriptionId}>{description}</p>}
       <p className="text-sm text-muted-foreground" id={acceptId}>{acceptDescription}</p>