From e11b1dc6df70fd0c05ebe347355961d0aea7727d Mon Sep 17 00:00:00 2001
From: zenn <zenn.message@gmail.com>
Date: Tue, 23 Jun 2026 11:43:26 +0900
Subject: [PATCH] =?UTF-8?q?v4.0.0:=20=ED=97=A4=EB=8D=94=20=EB=A1=9C?=
 =?UTF-8?q?=EA=B3=A0=20=ED=81=AC=EA=B8=B0=20brand.css=EB=A1=9C=20=ED=86=B5?=
 =?UTF-8?q?=EC=9D=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

페이지마다 흩어져 있던 로고 스타일을 brand.css 단일 정의(32px)로 모아 전 화면에서 동일하게 표시되도록 수정했다.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 admin.html           |  2 +-
 deckHistory.html     |  2 +-
 docs/convention.md   |  1 +
 docs/map.md          |  3 ++-
 docs/update.md       |  7 +++++++
 index.html           |  5 +++--
 login.html           |  2 +-
 preset.html          |  2 +-
 profile.html         |  2 +-
 signup.html          |  2 +-
 style/admin.css      | 12 ++----------
 style/app-shell.css  | 15 ++-------------
 style/auth-pages.css | 12 ++----------
 style/brand.css      | 25 +++++++++++++++++++++++++
 14 files changed, 50 insertions(+), 42 deletions(-)
 create mode 100644 style/brand.css

diff --git a/admin.html b/admin.html
index 7686b82..5bfbba6 100644
--- a/admin.html
+++ b/admin.html
@@ -12,7 +12,7 @@
         <nav class="admin-nav">
             <div class="admin-nav-inner">
                 <a href="/" class="admin-brand">
-                    <img src="/images/assets/uniare-h48.png" alt="UNIARE" class="app-brand-logo" />
+                    <img src="/images/assets/uniare-h48.png" alt="UNIARE" class="app-brand-logo" height="32" />
                     <span class="admin-brand-label">관리자</span>
                 </a>
                 <div id="auth-header-slot"></div>
diff --git a/deckHistory.html b/deckHistory.html
index f788033..fda23a0 100644
--- a/deckHistory.html
+++ b/deckHistory.html
@@ -14,7 +14,7 @@
         <nav class="app-nav">
             <div class="app-nav-inner">
                 <a href="/" class="app-brand">
-                    <img src="/images/assets/uniare-h48.png" alt="UNIARE" class="app-brand-logo" />
+                    <img src="/images/assets/uniare-h48.png" alt="UNIARE" class="app-brand-logo" height="32" />
                 </a>
                 <div id="auth-header-slot"></div>
             </div>
diff --git a/docs/convention.md b/docs/convention.md
index 44c0502..5589587 100644
--- a/docs/convention.md
+++ b/docs/convention.md
@@ -24,6 +24,7 @@
 
 ## CSS 규칙
 - 공통 UI는 가능한 한 Tailwind 유틸리티 클래스를 우선 사용한다.
+- **헤더 로고**는 `style/brand.css`의 `.app-brand-logo` + `--brand-logo-height`(32px)만 사용한다. 페이지마다 `h-8` 등 Tailwind로 크기를 주지 않는다.
 - `style/output.css`는 **빌드 산출물**이다. HTML 등에 새 Tailwind 클래스를 추가한 뒤 `npm run build:css`로 재생성한다.
 - `style/output.css`에 포함되지 않은 유틸리티 클래스는 적용되지 않으므로, 빌드 전까지는 페이지 특화 스타일을 인라인 `<style>` 또는 전용 CSS 파일(`style/auth-pages.css` 등)에 명시한다.
 - 페이지 특화 보정 스타일만 인라인 `<style>` 또는 전용 CSS 파일에 둔다.
diff --git a/docs/map.md b/docs/map.md
index 19df93f..901b293 100644
--- a/docs/map.md
+++ b/docs/map.md
@@ -55,7 +55,8 @@
 - `script/page-help.js`: 페이지 제목 `?` 툴팁
 - `script/page-i18n.js`: `data-i18n` / `data-i18n-html` / `data-i18n-placeholder`, `UaPageI18n.t()`
 - `script/deck-favorites.js`: 덱 즐겨찾기 (localStorage)
-- `script/deck-preview-hold.js`: 덱 썸네일 클릭·길게 눌러 확대 (내 덱·공개 덱)
+- `script/deck-preview-hold.js`: 덱 썸네일 길게 눌러 확대 (내 덱·공개 덱)
+- `style/brand.css`: 헤더 UNIARE 로고 크기 통일 (32px)
 - `script/api.js`: API 클라이언트 (`updateProfile`, `changePassword` 포함)
 - `script/auth-header.js`: 헤더 프로필 드롭다운 (i18n), 로그인 시 **썸네일 옆 닉네임** 표시 (`auth-profile-trigger`)
 - `script/image-utils.js`: 클라이언트 이미지 PNG 리사이즈 (`UaImageUtils.resizeImageToPng`)
diff --git a/docs/update.md b/docs/update.md
index 8d3b9bf..f819623 100644
--- a/docs/update.md
+++ b/docs/update.md
@@ -1,5 +1,12 @@
 # 업데이트 이력
 
+## 2026-06-22 / v4.0.0 — 헤더 로고 크기 통일
+
+### 수행 작업
+- `style/brand.css` 신설: `--brand-logo-height: 2rem`(32px), `.app-brand-logo` 단일 정의
+- `app-shell.css`, `auth-pages.css`, `admin.css`에서 중복 로고 스타일 제거 → `@import brand.css`
+- `index.html`: Tailwind `h-8` 제거 → `app-brand-logo` + `brand.css` 로드
+
 ## 2026-06-22 / v4.0.0 — 덱 카드 조회 수 제거
 
 ### 수행 작업
diff --git a/index.html b/index.html
index 6d7f4cb..c130071 100644
--- a/index.html
+++ b/index.html
@@ -5,6 +5,7 @@
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
         <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-4516420168710424" crossorigin="anonymous"></script>
         <link rel="stylesheet" href="./style/output.css" />
+        <link rel="stylesheet" href="./style/brand.css" />
         <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&family=Noto+Sans+KR:wght@400;700&display=swap" rel="stylesheet" />
 
         <script src="/script/navigation.js"></script>
@@ -58,8 +59,8 @@
     <body class="text-slate-900">
         <nav class="sticky top-0 z-50 bg-white/70 backdrop-blur-lg border-b border-slate-200">
             <div class="max-w-7xl mx-auto px-6 h-16 flex items-center justify-between">
-                <a href="/" class="inline-flex items-center">
-                    <img src="/images/assets/uniare-h48.png" alt="UNIARE" class="h-8 w-auto" />
+                <a href="/" class="app-brand">
+                    <img src="/images/assets/uniare-h48.png" alt="UNIARE" class="app-brand-logo" width="120" height="32" />
                 </a>
 
                 <div class="flex items-center gap-4">
diff --git a/login.html b/login.html
index e0370dc..d7fb36a 100644
--- a/login.html
+++ b/login.html
@@ -12,7 +12,7 @@
         <nav class="auth-nav">
             <div class="auth-nav-inner">
                 <a href="/" class="auth-brand">
-                    <img src="/images/assets/uniare-h48.png" alt="UNIARE" class="app-brand-logo" />
+                    <img src="/images/assets/uniare-h48.png" alt="UNIARE" class="app-brand-logo" height="32" />
                 </a>
             </div>
         </nav>
diff --git a/preset.html b/preset.html
index d8f490a..b6fb014 100644
--- a/preset.html
+++ b/preset.html
@@ -14,7 +14,7 @@
         <nav class="app-nav">
             <div class="app-nav-inner">
                 <a href="/" class="app-brand">
-                    <img src="/images/assets/uniare-h48.png" alt="UNIARE" class="app-brand-logo" />
+                    <img src="/images/assets/uniare-h48.png" alt="UNIARE" class="app-brand-logo" height="32" />
                 </a>
                 <div id="auth-header-slot"></div>
             </div>
diff --git a/profile.html b/profile.html
index b1ff5c1..d9c7852 100644
--- a/profile.html
+++ b/profile.html
@@ -14,7 +14,7 @@
         <nav class="app-nav">
             <div class="app-nav-inner">
                 <a href="/" class="app-brand">
-                    <img src="/images/assets/uniare-h48.png" alt="UNIARE" class="app-brand-logo" />
+                    <img src="/images/assets/uniare-h48.png" alt="UNIARE" class="app-brand-logo" height="32" />
                 </a>
                 <div id="auth-header-slot"></div>
             </div>
diff --git a/signup.html b/signup.html
index 040bd77..695462d 100644
--- a/signup.html
+++ b/signup.html
@@ -12,7 +12,7 @@
         <nav class="auth-nav">
             <div class="auth-nav-inner">
                 <a href="/" class="auth-brand">
-                    <img src="/images/assets/uniare-h48.png" alt="UNIARE" class="app-brand-logo" />
+                    <img src="/images/assets/uniare-h48.png" alt="UNIARE" class="app-brand-logo" height="32" />
                 </a>
             </div>
         </nav>
diff --git a/style/admin.css b/style/admin.css
index 0c5d3c6..e724c74 100644
--- a/style/admin.css
+++ b/style/admin.css
@@ -2,6 +2,8 @@
  * 관리자 페이지 (admin.html)
  */
 
+@import './brand.css';
+
 .admin-page {
     font-family: 'Inter', 'Noto Sans KR', sans-serif;
     min-height: 100vh;
@@ -29,18 +31,8 @@
 }
 
 .admin-brand {
-    display: inline-flex;
-    align-items: center;
     gap: 0.625rem;
-    text-decoration: none;
     letter-spacing: -0.025em;
-    line-height: 0;
-}
-
-.admin-brand .app-brand-logo {
-    height: 2rem;
-    width: auto;
-    display: block;
 }
 
 .admin-brand-label {
diff --git a/style/app-shell.css b/style/app-shell.css
index 6d892db..ec2c439 100644
--- a/style/app-shell.css
+++ b/style/app-shell.css
@@ -3,6 +3,8 @@
  * index.html, cardList.html 과 동일한 콘텐츠 최대 너비 기준
  */
 
+@import './brand.css';
+
 :root {
     --app-max-width: 80rem; /* 1280px — Tailwind max-w-7xl */
     --app-gutter: 1.5rem;
@@ -37,19 +39,6 @@
     gap: 1rem;
 }
 
-.app-brand {
-    display: inline-flex;
-    align-items: center;
-    text-decoration: none;
-    line-height: 0;
-}
-
-.app-brand-logo {
-    height: 2rem;
-    width: auto;
-    display: block;
-}
-
 .app-ad-top {
     max-width: var(--app-max-width);
     margin: 0 auto;
diff --git a/style/auth-pages.css b/style/auth-pages.css
index 2f4350f..140bab3 100644
--- a/style/auth-pages.css
+++ b/style/auth-pages.css
@@ -3,6 +3,8 @@
  * (Tailwind 빌드에 없는 max-w-* 유틸 대체)
  */
 
+@import './brand.css';
+
 .auth-page {
     font-family: 'Inter', 'Noto Sans KR', sans-serif;
     min-height: 100vh;
@@ -30,17 +32,7 @@
 }
 
 .auth-brand {
-    display: inline-flex;
-    align-items: center;
-    text-decoration: none;
     color: #1e293b;
-    line-height: 0;
-}
-
-.auth-brand .app-brand-logo {
-    height: 2rem;
-    width: auto;
-    display: block;
 }
 
 .auth-main {
diff --git a/style/brand.css b/style/brand.css
new file mode 100644
index 0000000..a62a06b
--- /dev/null
+++ b/style/brand.css
@@ -0,0 +1,25 @@
+/**
+ * UNIARE 헤더 로고 — 모든 페이지 공통 (32px)
+ */
+
+:root {
+    --brand-logo-height: 2rem;
+}
+
+.app-brand,
+.auth-brand,
+.admin-brand {
+    display: inline-flex;
+    align-items: center;
+    flex-shrink: 0;
+    text-decoration: none;
+    line-height: 0;
+}
+
+.app-brand-logo {
+    height: var(--brand-logo-height);
+    width: auto;
+    max-height: var(--brand-logo-height);
+    display: block;
+    object-fit: contain;
+}