feat: 사이드바 브랜드/헤더 타이틀 + 라이트·다크 테마 설정

1) 사이드바 상단에 돼지 로고 + '돈돼지 가계부'('메뉴' 텍스트 대체, 데스크톱/모바일 공통)
2) 헤더에서 돼지 로고 제거 → 현재 화면 타이틀 표시(라우트별)
3) 설정에 화면 테마(시스템/라이트/다크) 선택 추가
   - base.css: data-theme 기반 수동 다크 + 시스템 설정 폴백
   - theme.js 유틸 + ui 스토어 theme 상태, main.js 시작 시 적용(깜빡임 방지)

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

src/components/layout/AppHeader.vue

@@ -1,12 +1,39 @@
 <script setup>
-import { RouterLink, useRouter } from 'vue-router'
+import { computed } from 'vue'
+import { useRouter, useRoute } from 'vue-router'
 import { useAuthStore } from '@/stores/auth'
 import { useUiStore } from '@/stores/ui'
+import { boardLabel } from '@/constants/boards'
 import IconBtn from '@/components/ui/IconBtn.vue'
 
 const auth = useAuthStore()
 const ui = useUiStore()
 const router = useRouter()
+const route = useRoute()
+
+// 라우트별 헤더 타이틀(현재 화면 이름)
+const TITLES = {
+  home: '돈돼지 가계부',
+  'account-entries': '가계부 내역',
+  'account-stats': '통계',
+  'account-recurrings': '고정 지출',
+  'account-wallets': '계좌 관리',
+  'account-categories': '분류 관리',
+  'account-budget': '예산 설정',
+  'account-tags': '태그 관리',
+  users: '회원 관리',
+  'admin-tags': '태그 관리(관리자)',
+  'admin-default-categories': '기본 분류 설정',
+  settings: '설정',
+  'settings-account': '계정정보',
+  'settings-account-edit': '가입정보 변경',
+}
+const pageTitle = computed(() => {
+  const n = route.name
+  if (n === 'board' || n === 'board-detail') return boardLabel(route.params.category)
+  if (n === 'board-write' || n === 'board-edit') return route.params.id ? '글 수정' : '글쓰기'
+  return TITLES[n] || '돈돼지 가계부'
+})
 
 async function handleLogout() {
   await auth.logout()
@@ -22,10 +49,7 @@ async function handleLogout() {
           <path d="M3 12h18" /><path d="M3 6h18" /><path d="M3 18h18" />
         </svg>
       </button>
-      <RouterLink to="/" class="brand">
-        <img class="brand-mark" src="/logo-piggy.png" alt="" aria-hidden="true" />
-        <span class="brand-text">돈돼지 가계부</span>
-      </RouterLink>
+      <h1 class="page-title">{{ pageTitle }}</h1>
     </div>
 
     <div class="header-right">
@@ -66,27 +90,14 @@ async function handleLogout() {
   width: 22px;
   height: 22px;
 }
-.brand {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.45rem;
+.page-title {
   font-size: 1.2rem;
   font-weight: 700;
   color: var(--color-heading);
-}
-.brand:hover {
-  background: transparent;
-}
-.brand-mark {
-  height: 28px;
-  width: auto;
-  max-width: 38px;
-  object-fit: contain;
-  flex-shrink: 0;
-}
-.brand-text {
   letter-spacing: -0.01em;
   white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 .header-right {
   display: flex;