From e769595c5da5fb0d1022cb8d4e68c4901f7867fa Mon Sep 17 00:00:00 2001
From: zenn <zenn.message@gmail.com>
Date: Mon, 11 May 2026 11:42:42 +0900
Subject: [PATCH] =?UTF-8?q?v0.0.56:=20lg=20=EA=B5=AC=EA=B0=84=20=ED=97=A4?=
 =?UTF-8?q?=EB=8D=94=20=EA=B0=84=EA=B2=A9=C2=B7=EA=B2=80=EC=83=89=EC=B0=BD?=
 =?UTF-8?q?=20=EB=B0=98=EC=9D=91=ED=98=95=20=ED=8F=AD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

약 1024~1280px에서 검색창 고정 폭과 lg:px-0 때문에 헤더 요소가 밀집되던 문제를 패딩·gap·max-w 조정으로 완화하고, 본문 그리드 패딩을 헤더와 맞췄다.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 components/site/SiteHeader.vue | 8 ++++----
 docs/history.md                | 6 ++++++
 docs/map.md                    | 6 +++---
 docs/spec.md                   | 4 ++--
 docs/update.md                 | 6 ++++++
 layouts/default.vue            | 2 +-
 layouts/post.vue               | 2 +-
 package.json                   | 2 +-
 8 files changed, 24 insertions(+), 12 deletions(-)

diff --git a/components/site/SiteHeader.vue b/components/site/SiteHeader.vue
index 76075bd..0c09baa 100644
--- a/components/site/SiteHeader.vue
+++ b/components/site/SiteHeader.vue
@@ -80,8 +80,8 @@ onBeforeUnmount(() => {
 
 <template>
   <header class="site-header sticky top-0 z-20 backdrop-blur">
-    <div class="site-header__inner mx-auto flex h-full max-w-[1294px] items-center justify-between gap-2 px-4 sm:gap-3 lg:px-0">
-      <NuxtLink class="site-header__brand flex min-w-0 flex-1 items-center gap-2 text-[15px] font-semibold tracking-normal sm:text-[18px]" to="/">
+    <div class="site-header__inner mx-auto flex h-full max-w-[1294px] items-center justify-between gap-3 px-4 sm:gap-4 lg:gap-5 lg:px-5 xl:gap-6 xl:px-6 2xl:px-0">
+      <NuxtLink class="site-header__brand flex min-w-0 shrink-1 items-center gap-2.5 text-[15px] font-semibold tracking-normal sm:gap-3 sm:text-[18px] lg:max-w-[min(240px,32vw)] xl:max-w-[min(320px,28vw)] 2xl:max-w-none 2xl:flex-1" to="/">
         <button
           class="site-header__menu-toggle group flex h-7 w-7 items-center justify-center rounded-full transition-transform"
           type="button"
@@ -114,12 +114,12 @@ onBeforeUnmount(() => {
         </button>
         <span class="min-w-0 truncate">{{ siteSettings.title }}</span>
       </NuxtLink>
-      <div class="site-header__search hidden h-9 w-[470px] items-center rounded-lg px-3 text-sm md:flex site-input">
+      <div class="site-header__search site-header__search--responsive hidden h-9 min-w-0 flex-1 basis-0 items-center rounded-lg px-3 text-sm md:flex md:max-w-[min(470px,42vw)] lg:max-w-[min(470px,30vw)] xl:max-w-[min(470px,36vw)] 2xl:w-[470px] 2xl:max-w-[470px] 2xl:basis-auto 2xl:flex-none site-input">
         <span class="site-header__search-icon mr-2 text-lg leading-none">⌕</span>
         <span class="site-header__search-text site-soft">Search</span>
         <span class="site-header__search-key ml-auto rounded-md px-2 text-xs site-soft site-input">/</span>
       </div>
-      <nav class="site-header__nav flex shrink-0 items-center gap-2 text-sm sm:gap-3">
+      <nav class="site-header__nav flex shrink-0 items-center gap-3 text-sm sm:gap-3.5">
         <NuxtLink class="site-header__buy site-accent-button shrink-0 rounded-lg px-3 py-1.5 text-xs font-semibold sm:px-4 sm:py-2 sm:text-sm" to="/pages/about">
           Subscribe
         </NuxtLink>
diff --git a/docs/history.md b/docs/history.md
index 75c282b..00fba9f 100644
--- a/docs/history.md
+++ b/docs/history.md
@@ -1,5 +1,11 @@
 # 의사결정 이력
 
+## 2026-05-11 v0.0.56
+
+### 헤더 좁은 데스크톱 폭에서의 밀집 완화
+
+`lg` 직후(약 1024~1280px)에서 검색창이 고정 470px이면 3단 그리드와 헤더 액션이 같은 뷰포트 안에서 경쟁해 아이콘과 버튼이 시각적으로 붙는다. 검색창은 `flex-1`과 구간별 `max-w`로 축소 가능하게 하고, 헤더·본문 그리드에 `lg`~`xl` 수평 패딩을 복구해 Thred형 3열을 유지하면서도 호흡을 확보했다.
+
 ## 2026-05-11 v0.0.55
 
 ### 공개 레이아웃 모바일 분기
diff --git a/docs/map.md b/docs/map.md
index fc2ae14..2fe01b5 100644
--- a/docs/map.md
+++ b/docs/map.md
@@ -6,8 +6,8 @@
 
 | 파일 | 화면 |
 |------|------|
-| layouts/default.vue | 메인·목록·태그 — 문서 스크롤 + 스티키 사이드(`lg+`), 모바일은 본문→우측 사이드·좌측 슬라이드 메뉴 |
-| layouts/post.vue | 개별 게시물 — `default`와 동일한 반응형 셸 |
+| layouts/default.vue | 메인·목록·태그 — 문서 스크롤 + 스티키 사이드(`lg+`), 모바일은 본문→우측 사이드·좌측 슬라이드 메뉴, `lg`~`xl` 그리드 좌우 패딩 |
+| layouts/post.vue | 개별 게시물 — `default`와 동일한 반응형 셸·그리드 패딩 |
 | layouts/admin.vue | 관리자 전체, 글 작성/수정 화면의 전체 화면 편집 모드와 문서 스크롤 잠금 |
 | layouts/page.vue | 고정 페이지 전체 화면 |
 
@@ -21,7 +21,7 @@
 
 | 파일 | 화면 위치 |
 |------|-----------|
-| components/site/SiteHeader.vue | 모든 공개 페이지 상단, 우측 사용자 아바타 드롭다운(Anonymous/Sign up/Sign in) |
+| components/site/SiteHeader.vue | 모든 공개 페이지 상단, 우측 사용자 아바타 드롭다운(Anonymous/Sign up/Sign in), `lg`~`xl` 헤더 여백·반응형 검색창 폭 |
 | components/site/LeftSidebar.vue | 왼쪽 사이드바, `lg+`는 `sticky`+고정 높이+내부 무스크롤바 스크롤, `lg` 미만은 고정 슬라이드 패널 |
 | components/site/RightSidebar.vue | 오른쪽 사이드바, `lg+`는 고정 열 높이·스티키, 모바일은 본문 아래 전체 너비 |
 | components/site/MainColumn.vue | 메인 화면 중앙 |
diff --git a/docs/spec.md b/docs/spec.md
index c14059d..6205c94 100644
--- a/docs/spec.md
+++ b/docs/spec.md
@@ -17,7 +17,7 @@
 
 | 요소 | 크기/속성 |
 |------|-----------|
-| Header | 높이 57px, `sticky top-0`, `shrink-0` |
+| Header | 높이 57px, `sticky top-0`, `shrink-0`. `lg`~`xl` 구간은 내부 `px-5`~`px-6`로 좌우 여백을 두고, 검색창은 뷰포트에 맞춰 `max-w`로 단계 축소한다(`2xl`에서 고정 470px). |
 | Shell | `min-height: 100vh`, `flex` 세로 컬럼 |
 | 그리드(데스크톱 `lg+`) | `items-start`, 본문(중앙) 높이에 맞춰 행이 늘어남 — **문서(`html`/`body`) 스크롤**로 긴 본문 처리(스크롤바는 브라우저 오른쪽) |
 | 그리드(모바일 `lg` 미만) | 단일 세로 흐름: **본문 → 오른쪽 사이드** 순. 왼쪽 사이드는 레이아웃 흐름에서 분리된 고정 슬라이드 패널로 표시 |
@@ -517,6 +517,6 @@ APP_PORT=43118
 
 ## 버전 관리
 
-- 현재 버전: v0.0.55
+- 현재 버전: v0.0.56
 - 첫 커밋 이후 변경사항을 커밋할 때마다 패치 버전 증가
 - 메이저/마이너 버전은 구조 변경 또는 기능 묶음 단위로 결정
diff --git a/docs/update.md b/docs/update.md
index 58d9a20..fb7241b 100644
--- a/docs/update.md
+++ b/docs/update.md
@@ -1,5 +1,11 @@
 # 업데이트 이력
 
+## v0.0.56
+
+- `lg`~`xl` 구간에서 헤더 내부 여백·열 간격을 키우고, 검색창을 고정 470px 대신 `max-w`+`flex-1`로 줄여 아이콘·버튼이 붙지 않게 보정.
+- 브랜드 영역에 상한 `max-width`를 두어 좁은 데스크톱에서 제목과 검색·우측 액션이 겹치지 않게 함.
+- 공개 레이아웃 그리드(`default`/`post`)에 `lg:px-5`·`xl:px-6`을 적용해 헤더와 본문 열 가장자리를 맞춤.
+
 ## v0.0.55
 
 - 모바일(`lg` 미만)에서 좌측 사이드바를 고정 슬라이드 패널+백드롭으로 표시하고, 닫기는 `closeMenu`/백드롭/Escape로 처리.
diff --git a/layouts/default.vue b/layouts/default.vue
index 58d083f..b109c48 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -45,7 +45,7 @@ onBeforeUnmount(() => {
       />
     </Transition>
     <div
-      class="public-layout__grid mx-auto flex w-full max-w-[1294px] flex-1 flex-col bg-[var(--site-bg)] px-4 lg:grid lg:grid-cols-[287px_minmax(0,720px)_287px] lg:items-start lg:px-0 lg:transition-[grid-template-columns,max-width] lg:duration-300 lg:ease-out"
+      class="public-layout__grid mx-auto flex w-full max-w-[1294px] flex-1 flex-col bg-[var(--site-bg)] px-4 lg:grid lg:grid-cols-[287px_minmax(0,720px)_287px] lg:items-start lg:px-5 lg:transition-[grid-template-columns,max-width] lg:duration-300 lg:ease-out xl:px-6 2xl:px-0"
       :class="menuOpen ? '' : 'lg:max-w-[1007px] lg:[grid-template-columns:0_minmax(0,720px)_287px]'"
     >
       <main
diff --git a/layouts/post.vue b/layouts/post.vue
index 4e92a79..6a55953 100644
--- a/layouts/post.vue
+++ b/layouts/post.vue
@@ -45,7 +45,7 @@ onBeforeUnmount(() => {
       />
     </Transition>
     <div
-      class="post-layout__grid mx-auto flex w-full max-w-[1294px] flex-1 flex-col bg-[var(--site-bg)] px-4 lg:grid lg:grid-cols-[287px_minmax(0,720px)_287px] lg:items-start lg:px-0 lg:transition-[grid-template-columns,max-width] lg:duration-300 lg:ease-out"
+      class="post-layout__grid mx-auto flex w-full max-w-[1294px] flex-1 flex-col bg-[var(--site-bg)] px-4 lg:grid lg:grid-cols-[287px_minmax(0,720px)_287px] lg:items-start lg:px-5 lg:transition-[grid-template-columns,max-width] lg:duration-300 lg:ease-out xl:px-6 2xl:px-0"
       :class="menuOpen ? '' : 'lg:max-w-[1007px] lg:[grid-template-columns:0_minmax(0,720px)_287px]'"
     >
       <main
diff --git a/package.json b/package.json
index 9879edc..e681a11 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "sori.studio",
-  "version": "0.0.55",
+  "version": "0.0.56",
   "private": true,
   "type": "module",
   "scripts": {