feat: 사이트 3구역 개편 + AI 상품 결제 연결 + SEO 업데이트

- 사이드바: AI상품/무료도구/외주의뢰 3그룹 구조로 개편 (ARIA 시맨틱)
- 홈페이지: AI 상품 중심 재작성 (히어로+상품카드+무료도구+외주축소)
- SEO: 메타데이터·OG태그·JSON-LD를 AI 상품 포지셔닝으로 변경
- 프롬프트 페이지: 프리미엄 상품 5개에 PortOne PaymentButton 연결
- AI 키트 페이지: 월 구독 CTA 2곳에 PaymentButton 연결
- 사주: 유료 전환 복원(4,900원) + PaymentButton 연결
- 코드 품질: 인라인 스타일→globals.css, emoji→SVG, 미사용 데이터 제거
- DB 마이그레이션 005: 전체 18개 상품 등록 SQL 추가

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

app/services/prompt/page.tsx

@@ -3,6 +3,7 @@
 import { useState, useEffect, useRef } from 'react';
 import Link from 'next/link';
 import ContactModal from '../../components/ContactModal';
+import PaymentButton from '../../components/PaymentButton';
 import { trackCTAClick } from '../../../lib/gtag';
 const KAKAO_CHANNEL_URL = process.env.NEXT_PUBLIC_KAKAO_CHANNEL_URL ?? null;
 
@@ -381,21 +382,6 @@ export default function PromptPage() {
   return (
     <div ref={containerRef} className="min-h-full bg-[#f0f5ff]">
       <style>{`
-        .reveal {
-          opacity: 0;
-          transform: translateY(1.5rem);
-          transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
-                      transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
-        }
-        .reveal.is-visible {
-          opacity: 1;
-          transform: translateY(0);
-        }
-        .reveal-d1 { transition-delay: 80ms; }
-        .reveal-d2 { transition-delay: 160ms; }
-        .reveal-d3 { transition-delay: 240ms; }
-        .reveal-d4 { transition-delay: 320ms; }
-        .reveal-d5 { transition-delay: 400ms; }
         .prompt-card {
           transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
                       box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1);
@@ -522,28 +508,15 @@ export default function PromptPage() {
                 </div>
                 {/* CTA */}
                 <div className="p-6">
-                  {KAKAO_CHANNEL_URL ? (
-                    <a
-                      href={KAKAO_CHANNEL_URL}
-                      target="_blank"
-                      rel="noopener noreferrer"
-                      className="flex items-center justify-center gap-2 w-full py-3.5 rounded-xl text-sm font-extrabold transition-all hover:opacity-90"
-                      style={{ background: '#FEE500', color: '#3A1D1D' }}
-                    >
-                      <svg viewBox="0 0 24 24" className="w-4 h-4" fill="currentColor"><path d="M12 3C6.477 3 2 6.477 2 10.5c0 2.438 1.418 4.6 3.584 5.977l-.916 3.41c-.086.32.283.573.56.38l4.014-2.674A11.29 11.29 0 0012 18c5.523 0 10-3.477 10-7.5S17.523 3 12 3z"/></svg>
-                      카카오로 구매 문의
-                    </a>
-                  ) : (
-                    <button
-                      onClick={() => openModal(`프롬프트 패키지 — ${product.title}`)}
-                      className="w-full py-3.5 rounded-xl text-sm font-extrabold transition-all hover:opacity-90"
-                      style={{ background: product.accentColor, color: product.bgFrom }}
-                    >
-                      구매 문의하기 →
-                    </button>
-                  )}
+                  <PaymentButton
+                    productId={product.productId}
+                    className="flex items-center justify-center gap-2 w-full py-3.5 rounded-xl text-sm font-extrabold transition-all hover:opacity-90"
+                    style={{ background: product.accentColor, color: product.bgFrom }}
+                  >
+                    지금 구매하기 →
+                  </PaymentButton>
                   <p className="text-center text-xs mt-2" style={{ color: 'rgba(255,255,255,0.3)' }}>
-                    문의 시 프롬프트 샘플 파일 미리 제공
+                    결제 즉시 다운로드 · 로그인 필요
                   </p>
                 </div>
               </div>