From efc6e45070b5f901965eb7a6c2549074cc11c0d1 Mon Sep 17 00:00:00 2001 From: Haewon Kam Date: Thu, 20 Aug 2026 15:01:29 +0900 Subject: [PATCH] =?UTF-8?q?fix:=20=EC=A7=84=EC=9E=85=20=ED=99=94=EB=A9=B4?= =?UTF-8?q?=20=EB=A1=9C=EA=B3=A0=EA=B0=80=20=ED=8F=BC=20=EC=97=B4=20?= =?UTF-8?q?=EB=B0=96=EC=9C=BC=EB=A1=9C=20=EB=84=98=EC=B9=98=EC=A7=80=20?= =?UTF-8?q?=EC=95=8A=EA=B2=8C=20=ED=95=9C=EB=8B=A4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 화면이 커질수록 로고를 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 --- src/styles/generation-flow.css | 30 +++++++++--------------------- 1 file changed, 9 insertions(+), 21 deletions(-) diff --git a/src/styles/generation-flow.css b/src/styles/generation-flow.css index cb5956a..ae327c1 100644 --- a/src/styles/generation-flow.css +++ b/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;