diff --git a/frontend/src/app/chat/KnowledgePanel.tsx b/frontend/src/app/chat/KnowledgePanel.tsx
index 593747e..f2f8b49 100644
--- a/frontend/src/app/chat/KnowledgePanel.tsx
+++ b/frontend/src/app/chat/KnowledgePanel.tsx
@@ -180,7 +180,7 @@ export default function KnowledgePanel() {
       <div className="border-t border-line pt-4">
         <button
           onClick={rebuild}
-          className="btn-ghost flex w-full items-center justify-center gap-1.5 px-3 py-2 text-xs"
+          className="btn-ghost min-h-0 flex w-full items-center justify-center gap-1.5 px-3 py-2 text-xs"
         >
           <Sparkle size={14} />
           지식그래프 반영 (재빌드)
diff --git a/frontend/src/app/chat/page.tsx b/frontend/src/app/chat/page.tsx
index 5ee3d71..c48dbbc 100644
--- a/frontend/src/app/chat/page.tsx
+++ b/frontend/src/app/chat/page.tsx
@@ -124,7 +124,7 @@ function AssistantAnswer({ content }: { content: string }) {
         <button
           onClick={copyAnswer}
           aria-label="답변 복사"
-          className="btn-ghost gap-1.5 rounded-full px-3.5 py-1.5 text-xs sm:text-[13px] text-muted hover:text-fg"
+          className="btn-ghost min-h-0 gap-1.5 rounded-full px-3.5 py-1.5 text-xs sm:text-[13px] text-muted hover:text-fg"
         >
           {copied ? (
             <>
@@ -427,7 +427,7 @@ function ChatClient() {
         <button
           onClick={() => setMobileSidebarOpen((v) => !v)}
           aria-label="대화 목록 및 지식베이스 열기"
-          className="md:hidden btn-ghost flex items-center gap-1.5 rounded-full px-3 py-1 text-xs font-mono-spec shrink-0"
+          className="md:!hidden btn-ghost min-h-0 flex items-center gap-1.5 rounded-full px-3 py-1 text-xs font-mono-spec shrink-0"
         >
           <SidebarSimple size={15} />
           <span>{tab === "chats" ? "대화 목록" : "지식베이스"}</span>
@@ -446,7 +446,7 @@ function ChatClient() {
               <span className="font-display text-sm font-semibold text-fg">대화 및 지식베이스</span>
               <button
                 onClick={() => setMobileSidebarOpen(false)}
-                className="btn-ghost btn-icon h-7 w-7 shrink-0"
+                className="btn-ghost btn-icon min-h-0 h-7 w-7 shrink-0"
                 aria-label="사이드바 닫기"
               >
                 <X size={15} />
diff --git a/frontend/src/app/globals.css b/frontend/src/app/globals.css
index 34cb89c..d80bb5f 100644
--- a/frontend/src/app/globals.css
+++ b/frontend/src/app/globals.css
@@ -167,102 +167,104 @@ html.dark .glass {
   backdrop-filter: blur(12px);
 }
 
-/* 버튼 — pill 라운드, 최소 높이 46px.
-   .btn-accent 가 주 CTA(인디고 그라디언트 + 호버 글로우),
-   .btn-ghost 는 외곽선. 배지·탭도 pill. */
-.btn-accent,
-.btn-ghost {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 0.5rem;
-  min-height: 46px;
-  padding: 0.65rem 1.4rem;
-  border-radius: var(--r-pill);
-  font-size: 0.9375rem;
-  font-weight: 600;
-  letter-spacing: 0.01em;
-  /* press 피드백은 100~160ms — 눌렀다는 응답은 즉각적이어야 한다 */
-  transition:
-    background 0.15s var(--ease-soft),
-    border-color 0.15s ease,
-    box-shadow 0.2s var(--ease-soft),
-    color 0.15s ease,
-    opacity 0.15s ease,
-    transform 0.12s var(--ease-out);
-}
-/* 키보드 포커스 링 — 필드(.field:focus)와 같은 인디고 링으로 통일 */
-.btn-accent:focus-visible,
-.btn-ghost:focus-visible {
-  outline: none;
-  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
-}
+@layer components {
+  /* 버튼 — pill 라운드, 최소 높이 46px.
+     .btn-accent 가 주 CTA(인디고 그라디언트 + 호버 글로우),
+     .btn-ghost 는 외곽선. 배지/탭도 pill. */
+  .btn-accent,
+  .btn-ghost {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5rem;
+    min-height: 46px;
+    padding: 0.65rem 1.4rem;
+    border-radius: var(--r-pill);
+    font-size: 0.9375rem;
+    font-weight: 600;
+    letter-spacing: 0.01em;
+    /* press 피드백은 100~160ms — 눌렀다는 응답은 즉각적이어야 한다 */
+    transition:
+      background 0.15s var(--ease-soft),
+      border-color 0.15s ease,
+      box-shadow 0.2s var(--ease-soft),
+      color 0.15s ease,
+      opacity 0.15s ease,
+      transform 0.12s var(--ease-out);
+  }
+  /* 키보드 포커스 링 — 필드(.field:focus)와 같은 인디고 링으로 통일 */
+  .btn-accent:focus-visible,
+  .btn-ghost:focus-visible {
+    outline: none;
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
+  }
 
-.btn-accent {
-  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-soft) 100%);
-  color: #fff;
-  border: none;
-  box-shadow: 0 0 0 0 transparent;
-}
-/* 호버 이동은 포인팅 디바이스에서만 — 터치 탭에 false hover가 발생한다 */
-@media (hover: hover) and (pointer: fine) {
-  .btn-accent:hover:not(:disabled) {
-    box-shadow: 0 6px 24px -6px var(--glow);
-    transform: translateY(-1px);
+  .btn-accent {
+    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-soft) 100%);
+    color: #fff;
+    border: none;
+    box-shadow: 0 0 0 0 transparent;
+  }
+  /* 호버 이동은 포인팅 디바이스에서만 — 터치 탭에 false hover가 발생한다 */
+  @media (hover: hover) and (pointer: fine) {
+    .btn-accent:hover:not(:disabled) {
+      box-shadow: 0 6px 24px -6px var(--glow);
+      transform: translateY(-1px);
+    }
+  }
+  .btn-accent:active:not(:disabled),
+  .btn-ghost:active:not(:disabled) {
+    transform: scale(0.97); /* press 피드백 — 인터페이스가 입력을 듣고 있다는 확인 */
+  }
+  .btn-accent:disabled {
+    opacity: 0.35;
   }
-}
-.btn-accent:active:not(:disabled),
-.btn-ghost:active:not(:disabled) {
-  transform: scale(0.97); /* press 피드백 — 인터페이스가 입력을 듣고 있다는 확인 */
-}
-.btn-accent:disabled {
-  opacity: 0.35;
-}
 
-.btn-ghost {
-  background: transparent;
-  color: var(--fg);
-  border: 1px solid var(--line);
-}
-@media (hover: hover) and (pointer: fine) {
-  .btn-ghost:hover:not(:disabled) {
-    border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
-    background: var(--surface);
+  .btn-ghost {
+    background: transparent;
+    color: var(--fg);
+    border: 1px solid var(--line);
+  }
+  @media (hover: hover) and (pointer: fine) {
+    .btn-ghost:hover:not(:disabled) {
+      border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
+      background: var(--surface);
+    }
+  }
+  .btn-ghost:disabled {
+    opacity: 0.4;
   }
-}
-.btn-ghost:disabled {
-  opacity: 0.4;
-}
 
-/* 아이콘 정사각 버튼 — 라벨 없는 것들 전용. */
-.btn-icon {
-  min-height: 0;
-  padding: 0;
-  width: 40px;
-  height: 40px;
-  border-radius: var(--r-md);
-}
+  /* 아이콘 정사각 버튼 — 라벨 없는 것들 전용. */
+  .btn-icon {
+    min-height: 0;
+    padding: 0;
+    width: 40px;
+    height: 40px;
+    border-radius: var(--r-md);
+  }
 
-/* 입력 필드 — 인셋 표면 + 헤어라인, 포커스는 인디고 링. */
-.field {
-  background: var(--ink-2);
-  border: 1px solid var(--line);
-  border-radius: var(--r-sm);
-  min-height: 46px;
-  font-size: 0.95rem;
-  color: var(--fg);
-  font-family: var(--font-sans);
-  outline: none;
-  transition:
-    border-color 0.15s ease,
-    box-shadow 0.2s var(--ease-soft);
-}
-.field::placeholder {
-  color: var(--stone);
-}
-.field:focus {
-  border-color: var(--accent);
-  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
+  /* 입력 필드 — 인셋 표면 + 헤어라인, 포커스는 인디고 링. */
+  .field {
+    background: var(--ink-2);
+    border: 1px solid var(--line);
+    border-radius: var(--r-sm);
+    min-height: 46px;
+    font-size: 0.95rem;
+    color: var(--fg);
+    font-family: var(--font-sans);
+    outline: none;
+    transition:
+      border-color 0.15s ease,
+      box-shadow 0.2s var(--ease-soft);
+  }
+  .field::placeholder {
+    color: var(--stone);
+  }
+  .field:focus {
+    border-color: var(--accent);
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
+  }
 }
 
 /* 스켈레톤 시머 — 중립 표면 명도로 깜빡인다. */
@@ -458,21 +460,47 @@ html.dark .glass {
 .a11y-large-text .font-display {
   letter-spacing: -0.01em;
 }
-.a11y-large-text .btn-accent,
-.a11y-large-text .btn-ghost {
-  min-height: 48px;
-  font-size: 1rem;
+@layer components {
+  .a11y-large-text .btn-accent,
+  .a11y-large-text .btn-ghost {
+    min-height: 48px;
+    font-size: 1rem;
+  }
+  .a11y-large-text .field {
+    min-height: 48px;
+    font-size: 1rem;
+  }
+}
+
+/* 아이콘 버튼 규격 절대 보호 (정사각 아이콘 버튼 및 인라인 제어는 늘어나지 않음) */
+.btn-icon,
+.a11y-large-text .btn-icon,
+.a11y-large-text .btn-ghost.btn-icon,
+.a11y-large-text .btn-accent.btn-icon {
+  min-height: 0 !important;
+  padding: 0 !important;
+}
+
+/* 네비게이션 바 내부 요소 규격 고정 — a11y 큰 글씨 모드에서도 캡슐 알약 형태를 온전히 유지 */
+.a11y-large-text nav {
+  font-size: 13px;
 }
-/* 네비게이션 바 내부 버튼은 알약 캡슐 레이아웃을 유지하도록 컴팩트 타깃 보정 */
 .a11y-large-text nav .btn-ghost,
-.a11y-large-text nav .btn-icon {
-  min-height: 36px;
-  font-size: 0.875rem;
+.a11y-large-text nav .btn-accent {
+  min-height: 36px !important;
+  height: 36px !important;
+  padding: 0 0.65rem !important;
+  font-size: 12px !important;
 }
-.a11y-large-text .field {
-  min-height: 48px;
-  font-size: 1rem;
+.a11y-large-text nav .btn-icon,
+.a11y-large-text nav .btn-ghost.btn-icon,
+.a11y-large-text nav .btn-accent.btn-icon {
+  min-height: 38px !important;
+  height: 38px !important;
+  width: 38px !important;
+  padding: 0 !important;
 }
+
 /* 답변 말풍선은 줄간격과 글자 크기를 넓혀 시니어 가독성을 보강한다 */
 .a11y-large-text [data-chat-answer] {
   font-size: 1.1rem;
diff --git a/frontend/src/app/graph/page.tsx b/frontend/src/app/graph/page.tsx
index fbc24b0..2b15b5f 100644
--- a/frontend/src/app/graph/page.tsx
+++ b/frontend/src/app/graph/page.tsx
@@ -125,7 +125,7 @@ export default function GraphPage() {
           <button
             onClick={loadSnapshot}
             disabled={snapLoading}
-            className="btn-ghost px-4 py-2 text-sm font-semibold disabled:opacity-40"
+            className="btn-ghost min-h-0 px-4 py-2 text-sm font-semibold disabled:opacity-40"
           >
             {snapLoading ? "불러오는 중…" : snapshot ? "새로고침" : "스냅샷 불러오기"}
           </button>
diff --git a/frontend/src/app/login/page.tsx b/frontend/src/app/login/page.tsx
index fe0caa9..327af9e 100644
--- a/frontend/src/app/login/page.tsx
+++ b/frontend/src/app/login/page.tsx
@@ -96,7 +96,7 @@ export default function LoginPage() {
                 type="button"
                 onClick={() => setShowPassword((s) => !s)}
                 aria-label={showPassword ? "비밀번호 숨기기" : "비밀번호 표시"}
-                className="btn-ghost btn-icon absolute right-1.5 top-1/2 -translate-y-1/2 h-7 w-7 text-muted hover:text-fg"
+                className="btn-ghost btn-icon min-h-0 absolute right-1.5 top-1/2 -translate-y-1/2 h-7 w-7 text-muted hover:text-fg"
               >
                 {showPassword ? <EyeSlash size={16} /> : <Eye size={16} />}
               </button>
diff --git a/frontend/src/app/page.tsx b/frontend/src/app/page.tsx
index d64f6cd..80031d0 100644
--- a/frontend/src/app/page.tsx
+++ b/frontend/src/app/page.tsx
@@ -119,13 +119,13 @@ export default function HomePage() {
           <div className="shrink-0 flex items-center gap-2">
             <Link
               href="/security"
-              className="btn-ghost text-xs font-semibold px-3 py-1.5"
+              className="btn-ghost min-h-0 text-xs font-semibold px-3 py-1.5"
             >
               5겹 보안 체험
             </Link>
             <Link
               href="/chat"
-              className="btn-accent text-xs font-semibold px-3 py-1.5"
+              className="btn-accent min-h-0 text-xs font-semibold px-3 py-1.5"
             >
               챗봇 열기 →
             </Link>
diff --git a/frontend/src/app/simulator/page.tsx b/frontend/src/app/simulator/page.tsx
index ece3fb7..f822c10 100644
--- a/frontend/src/app/simulator/page.tsx
+++ b/frontend/src/app/simulator/page.tsx
@@ -207,16 +207,16 @@ export default function SimulatorPage() {
         <button
           type="button"
           onClick={() => applyPreset(20_000_000, 600_000, 40_000_000)}
-          className="btn-ghost text-xs px-3 py-1 rounded-full text-fg/90 hover:text-accent border-line/60"
+          className="btn-ghost min-h-0 text-xs px-3 py-1 rounded-full text-fg/90 hover:text-accent border-line/60"
         >
-          🐣 사회초년생 (자산 2천 · 월 60만 ➔ 계약금 4천만)
+          🐣 사회초년생 (자산 2천, 월 60만 ➔ 계약금 4천만)
         </button>
         <button
           type="button"
           onClick={() => applyPreset(50_000_000, 1_500_000, 100_000_000)}
-          className="btn-ghost text-xs px-3 py-1 rounded-full text-fg/90 hover:text-accent border-line/60"
+          className="btn-ghost min-h-0 text-xs px-3 py-1 rounded-full text-fg/90 hover:text-accent border-line/60"
         >
-          💍 신혼부부 (자산 5천 · 월 150만 ➔ 1억 목표)
+          💍 신혼부부 (자산 5천, 월 150만 ➔ 1억 목표)
         </button>
         <button
           type="button"
@@ -228,7 +228,7 @@ export default function SimulatorPage() {
             setMonthlySaving(300_000);
             toast("서울 85㎡ 예치금 프리셋이 적용되었습니다.", "info");
           }}
-          className="btn-ghost text-xs px-3 py-1 rounded-full text-fg/90 hover:text-accent border-line/60"
+          className="btn-ghost min-h-0 text-xs px-3 py-1 rounded-full text-fg/90 hover:text-accent border-line/60"
         >
           🏠 서울 85㎡ 청약 예치금 (300만)
         </button>
diff --git a/frontend/src/app/stocks/MemoryStatsCard.tsx b/frontend/src/app/stocks/MemoryStatsCard.tsx
index 55525f0..a8ab5b6 100644
--- a/frontend/src/app/stocks/MemoryStatsCard.tsx
+++ b/frontend/src/app/stocks/MemoryStatsCard.tsx
@@ -94,7 +94,7 @@ export default function MemoryStatsCard({
         <button
           onClick={validate}
           disabled={busy}
-          className="btn-ghost flex items-center gap-1.5 px-3 py-1.5 text-sm disabled:opacity-50"
+          className="btn-ghost min-h-0 flex items-center gap-1.5 px-3 py-1.5 text-sm disabled:opacity-50"
           title="7일 이상 지난 분석을 현재가와 비교해 적중 여부 채우기"
         >
           <ArrowsClockwise size={14} className={busy ? "animate-spin" : ""} />
diff --git a/frontend/src/app/stocks/WatchlistCard.tsx b/frontend/src/app/stocks/WatchlistCard.tsx
index 2d524d3..e61ee49 100644
--- a/frontend/src/app/stocks/WatchlistCard.tsx
+++ b/frontend/src/app/stocks/WatchlistCard.tsx
@@ -70,7 +70,7 @@ export default function WatchlistCard({
         <button
           onClick={() => mutate(() => addWatchlist(userUuid, symbol))}
           disabled={busy || !symbol || alreadyIn}
-          className="btn-ghost flex items-center gap-1.5 px-3 py-1.5 text-sm disabled:opacity-40"
+          className="btn-ghost min-h-0 flex items-center gap-1.5 px-3 py-1.5 text-sm disabled:opacity-40"
           title={alreadyIn ? "이미 관심종목에 있습니다" : `${symbol} 담기`}
         >
           <Plus size={14} />
diff --git a/frontend/src/app/stocks/page.tsx b/frontend/src/app/stocks/page.tsx
index 2c2fd5a..0d472a3 100644
--- a/frontend/src/app/stocks/page.tsx
+++ b/frontend/src/app/stocks/page.tsx
@@ -1017,7 +1017,7 @@ export default function StocksPage() {
                   <button
                     onClick={optimize}
                     disabled={gridBusy}
-                    className="btn-ghost flex items-center gap-1.5 px-4 py-2 text-sm disabled:opacity-50"
+                    className="btn-ghost min-h-0 flex items-center gap-1.5 px-4 py-2 text-sm disabled:opacity-50"
                   >
                     {gridBusy ? <Spinner className="h-3.5 w-3.5" /> : <Target size={14} />}
                     {gridBusy ? "탐색 중…" : "최적 파라미터 탐색"}
@@ -1115,7 +1115,7 @@ export default function StocksPage() {
                   </SectionLabel>
                   <button
                     onClick={consult}
-                    className="btn-ghost flex items-center gap-1.5 px-3 py-1.5 text-sm"
+                    className="btn-ghost min-h-0 flex items-center gap-1.5 px-3 py-1.5 text-sm"
                   >
                     <ChatCircleText size={14} /> 이 결과로 상담받기
                   </button>
@@ -1217,7 +1217,7 @@ export default function StocksPage() {
                   <button
                     onClick={() => analyze(m)}
                     disabled={reportBusy}
-                    className="btn-ghost flex items-center gap-1.5 px-3 py-1.5 text-sm disabled:opacity-50"
+                    className="btn-ghost min-h-0 flex items-center gap-1.5 px-3 py-1.5 text-sm disabled:opacity-50"
                   >
                     {reportBusy ? <Spinner className="h-3.5 w-3.5" /> : <Sparkle size={14} />}
                     {reportBusy ? "생성 중…" : report ? "다시 생성" : "리포트 생성"}
diff --git a/frontend/src/components/NavBar.tsx b/frontend/src/components/NavBar.tsx
index f54b7f3..bd853b7 100644
--- a/frontend/src/components/NavBar.tsx
+++ b/frontend/src/components/NavBar.tsx
@@ -153,7 +153,7 @@ export default function NavBar() {
 
   return (
     <header className="sticky top-2.5 z-50 px-3 sm:px-5 mb-2 sm:mb-3">
-      <nav className="mx-auto flex min-h-[54px] max-w-[1280px] 2xl:max-w-[1400px] w-full items-center justify-between gap-2.5 rounded-full border border-line bg-[color-mix(in_srgb,var(--ink-1)_90%,transparent)] px-3.5 sm:px-4 py-1.5 shadow-sm shadow-black/5 dark:shadow-md dark:shadow-black/50 backdrop-blur-xl transition-all">
+      <nav className="mx-auto flex min-h-[54px] max-w-[1280px] 2xl:max-w-[1440px] w-full items-center justify-between gap-2 rounded-full border border-line bg-[color-mix(in_srgb,var(--ink-1)_90%,transparent)] px-3.5 sm:px-4 py-1.5 shadow-sm shadow-black/5 dark:shadow-md dark:shadow-black/50 backdrop-blur-xl transition-all">
         {/* 좌측 브랜드 로고 */}
         <Link
           href="/"
@@ -166,7 +166,7 @@ export default function NavBar() {
             <span className="text-[15px] sm:text-[16px] font-extrabold tracking-tight text-fg group-hover:text-accent transition-colors">
               Midas Touch
             </span>
-            <span className="hidden items-center gap-1 rounded-full border border-positive/30 bg-positive/10 px-2 py-0.5 font-mono-spec text-[10px] font-bold text-positive md:inline-flex">
+            <span className="hidden items-center gap-1 rounded-full border border-positive/30 bg-positive/10 px-2 py-0.5 font-mono-spec text-[10px] font-bold text-positive 2xl:inline-flex">
               <span className="h-1.5 w-1.5 rounded-full bg-positive animate-pulse" />
               AI GUARD
             </span>
@@ -174,15 +174,15 @@ export default function NavBar() {
         </Link>
 
         {/* 데스크톱 메뉴 링크 (중앙) */}
-        <div className="hidden shrink-0 items-center gap-1 xl:flex">
+        <div className="hidden shrink-0 items-center gap-0.5 2xl:gap-1 xl:flex">
           {LINKS.map((l, i) => (
             <span key={l.href} className="flex items-center">
               {i > 0 && LINKS[i - 1].group !== l.group && (
-                <span aria-hidden className="mx-2 h-4 w-px bg-line/70" />
+                <span aria-hidden className="mx-1.5 2xl:mx-2 h-4 w-px bg-line/70" />
               )}
               <Link
                 href={l.href}
-                className={`whitespace-nowrap rounded-full px-3 py-1.5 text-[13px] font-semibold transition-all duration-150 ${
+                className={`whitespace-nowrap rounded-full px-2.5 2xl:px-3 py-1.5 text-[12.5px] 2xl:text-[13px] font-semibold transition-all duration-150 ${
                   isActive(l.href)
                     ? "!bg-accent !text-white !border-accent shadow-sm font-bold"
                     : "text-muted hover:text-fg hover:bg-surface/80 border border-transparent"
@@ -201,7 +201,7 @@ export default function NavBar() {
             onClick={() => setCommandOpen(true)}
             aria-label="빠른 실행 및 검색 (단축키 ⌘K)"
             title="빠른 검색 (⌘K)"
-            className="flex items-center gap-2 rounded-full border border-line bg-surface/60 hover:bg-surface hover:border-accent/40 px-3 py-1.5 text-xs text-muted hover:text-fg transition-all h-[38px]"
+            className="flex items-center gap-1.5 sm:gap-2 rounded-full border border-line bg-surface/60 hover:bg-surface hover:border-accent/40 px-2.5 sm:px-3 py-1.5 text-xs text-muted hover:text-fg transition-all h-[38px] shrink-0"
           >
             <MagnifyingGlass size={15} className="text-accent" weight="bold" />
             <span className="hidden sm:inline font-medium text-muted">검색</span>
@@ -212,7 +212,7 @@ export default function NavBar() {
 
           {/* 로그인 / 사용자 상태 */}
           {selected ? (
-            <div className="flex items-center gap-1">
+            <div className="flex items-center gap-1 shrink-0">
               <span
                 className="inline-flex items-center gap-1 sm:gap-1.5 rounded-full border border-accent/40 bg-accent/10 px-2 sm:px-2.5 py-1 text-xs font-semibold text-accent"
                 title={`로그인 계정: ${selected.label || selected.uuid}`}
@@ -223,7 +223,7 @@ export default function NavBar() {
               <button
                 onClick={logout}
                 title="로그아웃"
-                className="btn-ghost shrink-0 rounded-full px-1.5 sm:px-2 py-1 text-xs text-muted hover:text-negative h-[38px] flex items-center"
+                className="btn-ghost min-h-0 shrink-0 rounded-full px-2 py-1 text-xs text-muted hover:text-negative h-[38px] flex items-center"
               >
                 로그아웃
               </button>
@@ -232,7 +232,7 @@ export default function NavBar() {
             <Link
               href="/login"
               title="체험 계정 로그인"
-              className="btn-ghost shrink-0 gap-1 rounded-full px-2.5 sm:px-3 py-1.5 h-[38px] border border-line/70 hover:border-accent hover:text-accent text-xs font-semibold text-fg flex items-center transition-all"
+              className="btn-ghost min-h-0 shrink-0 gap-1 rounded-full px-2.5 sm:px-3 py-1.5 h-[38px] border border-line/70 hover:border-accent hover:text-accent text-xs font-semibold text-fg flex items-center transition-all"
             >
               <User size={15} weight="bold" />
               <span className="hidden sm:inline">로그인</span>
@@ -244,7 +244,7 @@ export default function NavBar() {
             onClick={toggle}
             aria-label="테마 전환"
             title={theme === "dark" ? "라이트 모드로 전환" : "다크 모드로 전환"}
-            className="btn-ghost btn-icon shrink-0 h-[38px] w-[38px] rounded-full border border-line/70 hover:border-line hover:bg-surface/80"
+            className="btn-ghost btn-icon min-h-0 shrink-0 h-[38px] w-[38px] rounded-full border border-line/70 hover:border-line hover:bg-surface/80"
           >
             {theme === "dark" ? <Moon size={16} /> : <Sun size={16} />}
           </button>
@@ -255,7 +255,7 @@ export default function NavBar() {
             aria-pressed={largeText}
             aria-label="큰 글씨 모드"
             title={largeText ? "큰 글씨 모드 끄기 (A11y)" : "큰 글씨 모드 켜기 (A11y)"}
-            className={`btn-ghost btn-icon shrink-0 h-[38px] w-[38px] rounded-full border border-line/70 hover:border-line hover:bg-surface/80 ${
+            className={`btn-ghost btn-icon min-h-0 shrink-0 h-[38px] w-[38px] rounded-full border border-line/70 hover:border-line hover:bg-surface/80 ${
               largeText ? "!border-accent/50 !bg-accent/15 !text-accent font-bold" : ""
             }`}
           >
@@ -268,7 +268,7 @@ export default function NavBar() {
             aria-label="전체 메뉴 열기"
             aria-expanded={open}
             title="전체 메뉴"
-            className={`btn-ghost btn-icon shrink-0 h-[38px] w-[38px] rounded-full border transition-all xl:hidden ${
+            className={`btn-ghost btn-icon min-h-0 shrink-0 h-[38px] w-[38px] rounded-full border transition-all xl:!hidden ${
               open
                 ? "!border-accent !bg-accent/20 !text-accent"
                 : "border-line/70 hover:border-line hover:bg-surface/80 text-fg"