feat: 토스페이먼츠 결제 fade-out → 카카오 채널/문의하기로 전환

결제 방식 변경:
- ai-kit: PaymentButton 2개 → KAKAO_CHANNEL_URL 있으면 카카오버튼,
  없으면 ContactModal로 폴백. 가격(19,900원/월) 표시 유지
- prompt: PaymentButton → 카카오버튼 or openModal() 호출로 교체
  문의 시 샘플 파일 미리 제공 안내 유지
- saju: AI 해석 hasPaid=true 고정 → 무료 제공으로 전환
  사주 페이지 결제 버튼 → '무료로 사주 분석하기' 링크
  SajuAISection PaymentButton → 비활성화 주석 처리

환경변수 추가 (선택):
- NEXT_PUBLIC_KAKAO_CHANNEL_URL: 카카오 채널 채팅 링크
- NEXT_PUBLIC_TOSS_ME_URL: toss.me 개인 송금 링크
- 토스페이먼츠 PG 키 주석 처리 (재활성화 시 해제 가능)

사주 hero AI 패턴 제거:
- radial gradient orb 3개, blur 배경 → diagonal pattern
- 그래디언트 텍스트 → amber-400 단색

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

app/services/ai-kit/page.tsx

@@ -1,7 +1,17 @@
 'use client';
 
+import { useState } from 'react';
 import Link from 'next/link';
-import PaymentButton from '../../components/PaymentButton';
+import ContactModal from '../../components/ContactModal';
+
+const KAKAO_CHANNEL_URL = process.env.NEXT_PUBLIC_KAKAO_CHANNEL_URL ?? null;
+
+const AI_KIT_CHECKLIST = [
+  '주로 반복하는 업무 종류 (일지, 이메일, 보고서 등)',
+  '현재 주로 사용하는 AI 도구 (ChatGPT / Claude / Gemini 등)',
+  '하루 또는 주 단위로 같은 작업을 몇 번이나 반복하는지',
+  '사용 목적 (개인 효율화 / 팀 도입 / 소상공인 업무 등)',
+];
 
 /* ──────────────────────────────────────────────────────────────
    Before / After 데이터 — 각 도구별 실제 시간 비교
@@ -153,10 +163,20 @@ const FAQ = [
 ];
 
 export default function AiKitPage() {
-  const totalMonthlySaving = 27; // 도구 합산 월 절약 시간(추정)
+  const totalMonthlySaving = 27;
+  const [modalOpen, setModalOpen] = useState(false);
 
   return (
     <div className="min-h-full bg-[#f0f4ff]">
+      <ContactModal
+        isOpen={modalOpen}
+        onClose={() => setModalOpen(false)}
+        service="AI 자동화 키트 — 월 19,900원"
+        checklist={AI_KIT_CHECKLIST}
+        accentColor="text-indigo-400"
+        headerFrom="#0a0f2e"
+        headerTo="#0f1a5c"
+      />
 
       {/* ─── Hero ─── */}
       <div className="relative overflow-hidden bg-[#0a0f2e] px-6 py-14 lg:px-12" style={{ backgroundImage: 'repeating-linear-gradient(135deg, rgba(255,255,255,0.015) 0px, rgba(255,255,255,0.015) 1px, transparent 1px, transparent 40px)' }}>
@@ -194,14 +214,30 @@ export default function AiKitPage() {
           </div>
 
           <div className="flex flex-col gap-3">
-            <PaymentButton
-              productId="ai_kit_monthly"
-              className="bg-blue-600 hover:bg-blue-500 text-white text-base font-bold px-8 py-4 rounded-xl transition-colors w-full max-w-xs"
-              returnUrl="/services/ai-kit"
+            {KAKAO_CHANNEL_URL ? (
+              <a
+                href={KAKAO_CHANNEL_URL}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="inline-flex items-center justify-center gap-2 bg-[#FEE500] hover:bg-[#F5DC00] text-[#3A1D1D] text-base font-bold px-8 py-4 rounded-xl transition-colors w-full max-w-xs"
+              >
+                <svg viewBox="0 0 24 24" className="w-5 h-5" 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={() => setModalOpen(true)}
+                className="bg-blue-600 hover:bg-blue-500 text-white text-base font-bold px-8 py-4 rounded-xl transition-colors w-full max-w-xs"
+              >
+                월 {totalMonthlySaving}시간 되찾기 — 문의하기 →
+              </button>
+            )}
+            <button
+              onClick={() => setModalOpen(true)}
+              className="text-indigo-300/60 hover:text-indigo-300 text-sm underline underline-offset-2 transition-colors"
             >
-              월 {totalMonthlySaving}시간 되찾기 →
-            </PaymentButton>
-            <p className="text-white/25 text-xs">로그인 후 즉시 이용 · 토스페이먼츠 카드 결제</p>
+              이메일로 문의하기
+            </button>
           </div>
         </div>
       </div>
@@ -475,14 +511,25 @@ export default function AiKitPage() {
             <br />언제든 해지 가능하니 한 달만 써보세요.
           </p>
           <div className="flex flex-col items-center gap-3">
-            <PaymentButton
-              productId="ai_kit_monthly"
-              className="bg-gradient-to-r from-indigo-500 to-cyan-500 text-white text-base font-extrabold px-8 py-4 rounded-xl hover:opacity-90 hover:scale-[1.02] transition-all shadow-lg shadow-indigo-500/25 w-full max-w-sm"
-              returnUrl="/services/ai-kit"
-            >
-              월 {totalMonthlySaving}시간 되찾기 — 19,900원 →
-            </PaymentButton>
-            <p className="text-white/25 text-xs">로그인 후 즉시 이용 · 카드 정기결제 · 언제든 해지</p>
+            {KAKAO_CHANNEL_URL ? (
+              <a
+                href={KAKAO_CHANNEL_URL}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="inline-flex items-center justify-center gap-2 bg-[#FEE500] hover:bg-[#F5DC00] text-[#3A1D1D] text-base font-bold px-8 py-4 rounded-xl transition-colors w-full max-w-sm"
+              >
+                <svg viewBox="0 0 24 24" className="w-5 h-5" 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>
+                카카오로 구독 문의 — 19,900원/월
+              </a>
+            ) : (
+              <button
+                onClick={() => setModalOpen(true)}
+                className="bg-indigo-600 hover:bg-indigo-500 text-white text-base font-bold px-8 py-4 rounded-xl transition-colors w-full max-w-sm"
+              >
+                월 {totalMonthlySaving}시간 되찾기 — 문의하기 →
+              </button>
+            )}
+            <p className="text-white/25 text-xs">카카오 또는 이메일 문의 · 월 19,900원 · 언제든 해지 가능</p>
           </div>
         </div>
       </div>

app/services/prompt/page.tsx

@@ -3,7 +3,7 @@
 import { useState } from 'react';
 import Link from 'next/link';
 import ContactModal from '../../components/ContactModal';
-import PaymentButton from '../../components/PaymentButton';
+const KAKAO_CHANNEL_URL = process.env.NEXT_PUBLIC_KAKAO_CHANNEL_URL ?? null;
 
 const CHECKLIST = [
   '주로 어떤 AI 도구를 사용하는지 (ChatGPT / Claude / Gemini)',
@@ -472,16 +472,28 @@ export default function PromptPage() {
                 </div>
                 {/* CTA */}
                 <div className="p-6">
-                  <PaymentButton
-                    productId={product.productId}
-                    className="w-full py-3.5 rounded-xl text-sm font-extrabold transition-all hover:opacity-90 hover:scale-[1.01]"
-                    style={{ background: product.accentColor, color: product.bgFrom }}
-                    returnUrl="/services/prompt"
-                  >
-                    지금 구매하기 →
-                  </PaymentButton>
+                  {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>
+                  )}
                   <p className="text-center text-xs mt-2" style={{ color: 'rgba(255,255,255,0.3)' }}>
-                    구매 문의 시 프롬프트 샘플 파일 미리 제공
+                    문의 시 프롬프트 샘플 파일 미리 제공
                   </p>
                 </div>
               </div>