fix: 진입 화면 로고가 폼 열 밖으로 넘치지 않게 한다

화면이 커질수록 로고를 350 → 400 → 500 → 554px 로 키우고 있었는데,
정작 아래 폼 열은 375px 고정이라 데스크톱에서 로고만 좌우로 90px 씩
삐져나왔다. 로고가 탭·입력과 축이 맞지 않아 화면이 불안정해 보인다.

브레이크포인트 4단을 지우고 `width: min(100%, 280px)` 하나로 바꾼다.
열 폭과 상한을 동시에 걸어 어느 화면 폭에서도 열을 넘지 않는다 —
나중에 브레이크포인트를 손대도 다시 어긋나지 않는다.

로고 아래 여백도 16 → 20px 으로 올려 "묶음 사이" 간격 체계에 맞춘다.

측정: 1280px 화면 로고 280 / 열 375, 375px 화면 로고 280 / 열 343 — 양쪽 다 포함.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

src/styles/generation-flow.css

@@ -2582,33 +2582,21 @@
 }
 
 .url-input-logo {
-  margin-bottom: 1rem;
+  /* 로고 → 탭은 "묶음 사이" 간격 (generation-flow.css 상단 간격 체계 참조) */
+  margin-bottom: 20px;
 }
 
+/* 로고는 **아래 폼 열보다 넓어질 수 없다.**
+   이전에는 화면이 커질수록 350 → 400 → 500 → 554px 로 키웠는데, 정작 폼 열은
+   375px 로 고정이라 데스크톱에서 로고만 좌우로 90px 씩 삐져나왔다.
+   min() 으로 열 폭과 상한을 동시에 걸면 어느 폭에서도 넘지 않는다 —
+   브레이크포인트를 늘려도 다시 어긋날 일이 없다. */
 .url-input-logo img {
-  width: 350px;
-  max-width: 100%;
+  display: block;
+  width: min(100%, 280px);
   height: auto;
 }
 
-@media (min-width: 640px) {
-  .url-input-logo img {
-    width: 400px;
-  }
-}
-
-@media (min-width: 768px) {
-  .url-input-logo img {
-    width: 500px;
-  }
-}
-
-@media (min-width: 1024px) {
-  .url-input-logo img {
-    width: 554px;
-  }
-}
-
 .url-input-title {
   font-family: 'Pretendard', sans-serif;
   font-size: 40px;