feat: 둘러보기(데모)를 실제 화면 그대로 — 데모 모드 + API 더미 응답

- src/demo: demo.on 플래그 + DTO 형태 더미데이터 + mock API(읽기 더미/쓰기 차단)
- accountApi: Proxy 로 데모 시 읽기→더미, 쓰기→안내. 실제 뷰 그대로 렌더
- App: authed=인증||데모 → 실제 사이드바/셸 표시 + 데모 배너(로그인/나가기)
- 라우터: 데모 허용(가계부/고정/계좌/분류) 외 보호화면은 DemoLockedView(로그인 유도)
- 사이드바: 데모 시 잠금(🔒) 배지, 메뉴는 showMenu(인증||데모)
- 로그인/로그아웃 시 데모 자동 해제, 랜딩 '둘러보기'→enterDemo
- 기존 독립 DemoView 제거

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

src/views/DemoLockedView.vue

@@ -0,0 +1,66 @@
+<script setup>
+// 둘러보기(데모)에서 미지원(로그인 필요) 화면에 들어왔을 때 안내.
+import { useRoute } from 'vue-router'
+import { useUiStore } from '@/stores/ui'
+
+const route = useRoute()
+const ui = useUiStore()
+
+const LABELS = {
+  'account-stats': '통계',
+  'account-budget': '예산 설정',
+  'account-tags': '태그 관리',
+  board: '게시판',
+  'board-detail': '게시판',
+  settings: '설정',
+  users: '회원 관리',
+}
+const label = LABELS[route.query.from] || '이 기능'
+
+function goLogin() {
+  ui.openLogin('/account')
+}
+</script>
+
+<template>
+  <div class="locked">
+    <div class="lock-big">🔒</div>
+    <h2>{{ label }}는 로그인 후 이용할 수 있어요</h2>
+    <p class="desc">둘러보기에서는 가계부 내역 · 고정 지출 · 계좌 관리 · 분류 관리만 미리 볼 수 있습니다.<br />로그인하면 통계 · 예산 · 태그 · 게시판까지 모두 사용할 수 있어요.</p>
+    <button type="button" class="cta-btn" @click="goLogin">로그인 / 시작하기</button>
+  </div>
+</template>
+
+<style scoped>
+.locked {
+  text-align: center;
+  padding: 3rem 1rem;
+  border: 1px dashed var(--color-border);
+  border-radius: 12px;
+}
+.lock-big {
+  font-size: 2.4rem;
+}
+h2 {
+  margin-top: 0.6rem;
+  font-size: 1.15rem;
+}
+.desc {
+  margin: 0.6rem 0 1.3rem;
+  font-size: 0.9rem;
+  opacity: 0.7;
+  line-height: 1.6;
+}
+.cta-btn {
+  width: 100%;
+  max-width: 320px;
+  padding: 0.8rem 1rem;
+  border: 1px solid hsla(160, 100%, 37%, 1);
+  border-radius: 8px;
+  background: hsla(160, 100%, 37%, 1);
+  color: #fff;
+  font-size: 1rem;
+  font-weight: 600;
+  cursor: pointer;
+}
+</style>