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>