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

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

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

src/components/AdBanner.vue

@@ -0,0 +1,49 @@
+<script setup>
+import { computed, onMounted, ref } from 'vue'
+import { useAuthStore } from '@/stores/auth'
+
+// 카카오 애드핏 배너. 유료(PREMIUM) 회원에게는 표시하지 않는다.
+const props = defineProps({
+  unit: { type: String, default: 'DAN-n0I5XRBOwAdSFbEX' },
+  width: { type: Number, default: 728 },
+  height: { type: Number, default: 90 },
+})
+
+const auth = useAuthStore()
+const showAd = computed(() => !auth.isPremium)
+
+const host = ref(null)
+const ADFIT_SRC = '//t1.kakaocdn.net/kas/static/ba.min.js'
+
+onMounted(() => {
+  if (!showAd.value || !host.value) return
+  // SPA 에서 동적 삽입 시 애드핏이 인식하도록 ins 를 직접 만들고 로더를 다시 실행한다.
+  const ins = document.createElement('ins')
+  ins.className = 'kakao_ad_area'
+  ins.style.display = 'none'
+  ins.setAttribute('data-ad-unit', props.unit)
+  ins.setAttribute('data-ad-width', String(props.width))
+  ins.setAttribute('data-ad-height', String(props.height))
+  host.value.appendChild(ins)
+
+  const s = document.createElement('script')
+  s.type = 'text/javascript'
+  s.src = ADFIT_SRC
+  s.async = true
+  host.value.appendChild(s)
+})
+</script>
+
+<template>
+  <div v-if="showAd" ref="host" class="ad-banner" :style="{ minHeight: height + 'px' }"></div>
+</template>
+
+<style scoped>
+.ad-banner {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  overflow: hidden; /* 좁은 화면에서 가로 넘침 방지 */
+}
+</style>

src/components/WebOnlyNotice.vue

@@ -1,4 +1,5 @@
 <script setup>
+import AdBanner from '@/components/AdBanner.vue'
 // PC·모바일 웹에서 노출되는 안내 페이지. 실제 이용은 앱(모바일) 또는 PC 데스크톱 클라이언트에서.
 // PC 설치파일은 서버 /download/ 경로(영속 디렉터리)에서 서빙 — nginx 설정 참고.
 const PC_DOWNLOAD_URL = '/download/DonDwaeji-Setup.exe'
@@ -38,6 +39,9 @@ const mobileReady = false
         <li><span class="f-icon">🎯</span><b>예산과 분석</b><span>예산 대비 지출·차트</span></li>
       </ul>
     </div>
+
+    <!-- 하단 광고 (유료 회원 제외) -->
+    <AdBanner class="web-ad" />
   </main>
 </template>
 
@@ -45,13 +49,18 @@ const mobileReady = false
 .web-only {
   min-height: 100vh;
   display: flex;
+  flex-direction: column;
   align-items: center;
   justify-content: center;
+  gap: 1.75rem;
   padding: 1.5rem;
   background:
     radial-gradient(120% 120% at 50% 0%, hsla(160, 100%, 37%, 0.12), transparent 60%),
     var(--color-background);
 }
+.web-ad {
+  margin-top: auto; /* 페이지 하단으로 */
+}
 .card {
   width: 100%;
   max-width: 420px;