feat: 카카오 애드핏 광고 — 웹 안내 하단 + 앱 하단내비 위 (유료 제외)

- AdBanner 컴포넌트(애드핏 DAN-n0I5XRBOwAdSFbEX, 728x90), 유료 회원에겐 미표시
- 웹 안내 페이지 하단 배치
- 앱 셸 하단 내비 바로 위 고정 배치(본문 하단 여백 보정)

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

src/App.vue

@@ -4,6 +4,7 @@ import { RouterView, useRoute, useRouter } from 'vue-router'
 import AppHeader from '@/components/layout/AppHeader.vue'
 import AppSidebar from '@/components/layout/AppSidebar.vue'
 import AppBottomNav from '@/components/layout/AppBottomNav.vue'
+import AdBanner from '@/components/AdBanner.vue'
 import LoginModal from '@/components/LoginModal.vue'
 import SignupModal from '@/components/SignupModal.vue'
 import WebOnlyNotice from '@/components/WebOnlyNotice.vue'
@@ -20,6 +21,8 @@ const router = useRouter()
 
 // 로그인 또는 둘러보기(데모) 상태면 사이드바/전체 셸 표시
 const authed = computed(() => auth.isAuthenticated || demo.on)
+// 광고: 유료(PREMIUM) 회원에게는 표시하지 않음
+const showAds = computed(() => !auth.isPremium)
 
 function leaveDemo() {
   exitDemo()
@@ -63,7 +66,7 @@ watch(() => route.fullPath, () => ui.closeSidebar())
 
   <!-- 앱(Capacitor): 전체 기능 -->
   <template v-else>
-    <div class="layout" :class="{ 'sidebar-open': ui.sidebarOpen, 'no-sidebar': !authed }">
+    <div class="layout" :class="{ 'sidebar-open': ui.sidebarOpen, 'no-sidebar': !authed, 'has-ad': showAds }">
       <AppHeader class="layout-top" />
       <!-- 로그인/둘러보기 전에는 메뉴가 없어 사이드바를 숨김(빈 칸 제거·중앙 정렬) -->
       <template v-if="authed">
@@ -80,6 +83,8 @@ watch(() => route.fullPath, () => ui.closeSidebar())
         </div>
         <RouterView />
       </main>
+      <!-- 하단 내비 위 광고 (유료 회원 제외) -->
+      <AdBanner v-if="showAds" class="app-ad" />
       <AppBottomNav class="layout-bottom" />
     </div>
 
@@ -157,6 +162,21 @@ watch(() => route.fullPath, () => ui.closeSidebar())
   grid-area: bottom;
 }
 
+/* 하단 내비(56px) 바로 위 고정 광고 */
+.app-ad {
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: calc(56px + env(safe-area-inset-bottom, 0));
+  z-index: 999;
+  background: var(--color-background);
+  border-top: 1px solid var(--color-border);
+}
+/* 광고가 있을 땐 본문 하단 여백을 광고 높이만큼 더 확보 */
+.layout.has-ad .layout-body {
+  padding-bottom: calc(56px + 96px + env(safe-area-inset-bottom, 0) + 1rem);
+}
+
 /* 로그인 전: 사이드바 없이 단일 컬럼 — 콘텐츠가 창 중앙에 오도록 */
 .layout.no-sidebar {
   grid-template-columns: 1fr;