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/views/settings/SettingsView.vue

@@ -3,8 +3,15 @@ import { ref } from 'vue'
 import { RouterLink } from 'vue-router'
 import { Preferences } from '@capacitor/preferences'
 import { useDialog } from '@/composables/dialog'
+import { useUiStore } from '@/stores/ui'
 
 const dialog = useDialog()
+const ui = useUiStore()
+const THEMES = [
+  { value: 'system', label: '시스템' },
+  { value: 'light', label: '라이트' },
+  { value: 'dark', label: '다크' },
+]
 const appVersion = typeof __APP_VERSION__ !== 'undefined' ? __APP_VERSION__ : '-'
 const clearing = ref(false)
 
@@ -37,6 +44,25 @@ async function clearAppData() {
   <div class="settings">
     <h1 class="page-title">설정</h1>
 
+    <section class="card">
+      <div class="row">
+        <div class="row-main">
+          <span class="row-label">화면 테마</span>
+          <span class="row-sub">라이트 / 다크 모드 선택</span>
+        </div>
+        <div class="theme-seg">
+          <button
+            v-for="t in THEMES"
+            :key="t.value"
+            type="button"
+            class="seg-btn"
+            :class="{ active: ui.theme === t.value }"
+            @click="ui.setTheme(t.value)"
+          >{{ t.label }}</button>
+        </div>
+      </div>
+    </section>
+
     <section class="card">
       <RouterLink to="/settings/account" class="row row-link">
         <div class="row-main">
@@ -132,6 +158,30 @@ async function clearAppData() {
 .danger {
   color: #c0392b;
 }
+.theme-seg {
+  display: inline-flex;
+  border: 1px solid var(--color-border);
+  border-radius: 8px;
+  overflow: hidden;
+  flex-shrink: 0;
+}
+.seg-btn {
+  padding: 0.4rem 0.7rem;
+  border: 0;
+  border-left: 1px solid var(--color-border);
+  background: var(--color-background);
+  color: var(--color-text);
+  font-size: 0.85rem;
+  cursor: pointer;
+}
+.seg-btn:first-child {
+  border-left: 0;
+}
+.seg-btn.active {
+  background: hsla(160, 100%, 37%, 1);
+  color: #fff;
+  font-weight: 600;
+}
 .chevron {
   width: 18px;
   height: 18px;