refactor: 홈·팩 상세 섹션 덜어내기 (목적별 재편)

홈 (448→307줄):
- Evidence(DEMO 가짜 수치), Toolkit(상세와 중복), Process 3단계(상세와 중복) 삭제
- 남은 섹션: Hero → Before/After → Other Products + Final CTA

팩 상세 (438→393줄):
- Final CTA 섹션 삭제 (Sticky CTA와 역할 중복)
- Samples 섹션 컴팩트 링크 바로 축약 (Hero 프리뷰와 역할 중복)
- Pricing features 각 티어 4개로 축소 (시선 분산 감소)

app/page.tsx

@@ -11,15 +11,6 @@ import { trackCTAClick } from '../lib/gtag';
    참조: Downloads/stitch_ai_mv/ai_music_creator_landing_page
 ═══════════════════════════════════════════════════ */
 
-const TOOLKIT = [
-  { accent: 'var(--kx-primary)', icon: '🎛', title: 'Suno 프롬프트 레시피', desc: '원하는 장르와 감성을 완벽하게 구현하는 검증된 프롬프트 조합 모음.' },
-  { accent: 'var(--kx-secondary)', icon: '✍', title: '작사 치트키 템플릿', desc: '주제만 넣으면 감성적인 가사를 뽑아내는 AI 라이팅 가이드.' },
-  { accent: '#ff86c3', icon: '🎬', title: '뮤직비디오 워크플로우', desc: '음악 비트에 맞춰 자동으로 영상을 생성·편집하는 원스톱 프로세스.' },
-  { accent: '#c284ff', icon: '⚖', title: '저작권 세이프 가이드', desc: 'AI 생성물의 상업적 이용과 저작권 등록을 위한 체크리스트.' },
-  { accent: 'var(--kx-secondary-dim)', icon: '📄', title: 'PDF 기획 템플릿', desc: '채널 브랜딩부터 콘텐츠 기획까지 한번에 끝내는 실행 가이드북.' },
-  { accent: '#ffffff', icon: '📦', title: '성공 사례 샘플 프로젝트', desc: '조회수 100만 이상을 기록한 프로젝트의 실제 파일 구조 분석.' },
-];
-
 const BEFORE = [
   '작곡 공부에만 최소 6개월 소요',
   '영상 편집 프로그램 학습의 높은 장벽',
@@ -192,65 +183,7 @@ export default function Home() {
         </div>
       </section>
 
-      {/* 2. Evidence */}
+      {/* 2. Before / After */}
-      <section id="evidence" className="py-24 px-6" style={{ background: 'var(--kx-surface-low)' }}>
-        <div className="max-w-7xl mx-auto">
-          <div className="text-center mb-12">
-            <span
-              className="kx-label inline-block px-3 py-1 mb-3 rounded-full"
-              style={{
-                background: 'rgba(255,200,80,0.12)',
-                border: '1px solid rgba(255,200,80,0.35)',
-                color: '#ffcd5c',
-              }}
-            >
-              DEMO · 예시 이미지
-            </span>
-            <h2 className="kx-display text-3xl md:text-4xl font-bold" style={{ color: 'var(--kx-on-surface)' }}>
-              이런 결과를 목표로 만듭니다
-            </h2>
-            <p className="mt-3 text-sm" style={{ color: 'var(--kx-on-variant)' }}>
-              아래 수치는 실제 실적이 아닌 기대 결과 예시입니다. 실샘플은 런칭 후 순차 공개.
-            </p>
-          </div>
-          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
-            {[
-              { hue: 'from-violet-600 to-fuchsia-500', views: '조회수 1.2M', comments: '댓글 4.5K' },
-              { hue: 'from-sky-600 to-cyan-500', views: '조회수 850K', comments: '댓글 2.1K' },
-              { hue: 'from-pink-600 to-rose-500', views: '조회수 2.4M', comments: '댓글 12K' },
-            ].map((c, i) => (
-              <div
-                key={i}
-                className="overflow-hidden rounded-xl hover:-translate-y-2 transition-transform"
-                style={{ background: 'var(--kx-surface-mid)' }}
-              >
-                <div className={`h-48 bg-gradient-to-br ${c.hue} relative`}>
-                  <div className="absolute inset-0 bg-black/30" />
-                  <svg className="absolute inset-0 w-full h-full opacity-50" preserveAspectRatio="none" viewBox="0 0 400 200">
-                    {[...Array(30)].map((_, j) => (
-                      <rect
-                        key={j}
-                        x={j * 14 + 8}
-                        y={Number((100 - Math.abs(Math.sin((j + i * 5) * 0.5) * 60)).toFixed(3))}
-                        width="6"
-                        height={Number((Math.abs(Math.sin((j + i * 5) * 0.5) * 120) + 10).toFixed(3))}
-                        fill="white"
-                        opacity={0.4}
-                      />
-                    ))}
-                  </svg>
-                </div>
-                <div className="p-4 flex items-center gap-4 text-sm" style={{ color: 'var(--kx-on-variant)' }}>
-                  <span>👁 {c.views}</span>
-                  <span>💬 {c.comments}</span>
-                </div>
-              </div>
-            ))}
-          </div>
-        </div>
-      </section>
-
-      {/* 3. Before / After */}
       <section className="py-24 px-6" style={{ background: 'var(--kx-surface)' }}>
         <div className="max-w-7xl mx-auto">
           <h2 className="kx-display text-3xl md:text-4xl font-bold text-center mb-16" style={{ color: 'var(--kx-on-surface)' }}>
@@ -289,81 +222,7 @@ export default function Home() {
         </div>
       </section>
 
-      {/* 4. Toolkit */}
+      {/* 3. Other Products + CTA */}
-      <section className="py-24 px-6" style={{ background: 'var(--kx-surface-low)' }}>
-        <div className="max-w-7xl mx-auto">
-          <div className="mb-16">
-            <span className="kx-label">TOOLKIT</span>
-            <h2 className="kx-display text-3xl md:text-4xl font-bold mt-2 mb-3" style={{ color: 'var(--kx-on-surface)' }}>
-              The Toolkit Assets
-            </h2>
-            <p className="text-base" style={{ color: 'var(--kx-on-variant)' }}>
-              성공적인 AI 뮤직 크리에이터를 위한 모든 필수 자산.
-            </p>
-          </div>
-          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5">
-            {TOOLKIT.map((t) => (
-              <div
-                key={t.title}
-                className="p-6 transition-all hover:-translate-y-1"
-                style={{
-                  background: 'var(--kx-surface-high)',
-                  borderTop: `2px solid ${t.accent}`,
-                  borderRadius: '0.75rem 0.75rem 0.125rem 0.125rem',
-                }}
-              >
-                <div
-                  className="w-12 h-12 rounded-lg flex items-center justify-center mb-4 text-2xl"
-                  style={{ background: `${t.accent}1a` }}
-                >
-                  {t.icon}
-                </div>
-                <h4 className="kx-display text-lg font-bold mb-2" style={{ color: 'var(--kx-on-surface)' }}>{t.title}</h4>
-                <p className="text-sm leading-relaxed" style={{ color: 'var(--kx-on-variant)' }}>{t.desc}</p>
-              </div>
-            ))}
-          </div>
-        </div>
-      </section>
-
-      {/* 5. Process 3-step */}
-      <section className="py-24 px-6" style={{ background: 'var(--kx-surface)' }}>
-        <div className="max-w-7xl mx-auto">
-          <h2 className="kx-display text-3xl md:text-4xl font-bold text-center mb-16" style={{ color: 'var(--kx-on-surface)' }}>
-            딱 3단계면 충분합니다
-          </h2>
-          <div className="flex flex-col md:flex-row items-center justify-between gap-10 relative">
-            <div className="hidden md:block absolute top-10 left-[10%] right-[10%] h-0.5 -z-0"
-              style={{ background: 'linear-gradient(90deg, rgba(204,151,255,0.3), rgba(83,221,252,0.3), rgba(255,134,195,0.3))' }}
-            />
-            {[
-              { step: '01', title: '프롬프트 입력', desc: '아이디어를 한 줄로 설명하세요', icon: '⌨', color: 'var(--kx-primary)' },
-              { step: '02', title: 'AI 음악 생성', desc: '30초 만에 완성되는 고퀄리티 음원', icon: '🎵', color: 'var(--kx-secondary)' },
-              { step: '03', title: '뮤직비디오 렌더링', desc: '유튜브 쇼츠, 릴스 즉시 업로드', icon: '🎥', color: '#ff86c3' },
-            ].map((s) => (
-              <div key={s.step} className="flex flex-col items-center gap-4 text-center relative z-10">
-                <div
-                  className="w-20 h-20 rounded-full flex items-center justify-center text-3xl"
-                  style={{
-                    background: 'var(--kx-surface-mid)',
-                    border: `3px solid ${s.color}`,
-                    boxShadow: `0 0 24px 0 ${s.color}55`,
-                  }}
-                >
-                  {s.icon}
-                </div>
-                <div>
-                  <span className="kx-label" style={{ color: s.color }}>Step {s.step}</span>
-                  <h4 className="kx-display text-xl font-bold mt-2" style={{ color: 'var(--kx-on-surface)' }}>{s.title}</h4>
-                  <p className="text-sm mt-2" style={{ color: 'var(--kx-on-variant)' }}>{s.desc}</p>
-                </div>
-              </div>
-            ))}
-          </div>
-        </div>
-      </section>
-
-      {/* 6. Other Products + CTA */}
       <section className="py-24 px-6" style={{ background: 'var(--kx-surface-low)' }}>
         <div className="max-w-7xl mx-auto">
           <div className="text-center mb-12">

app/services/music/page.tsx

@@ -14,7 +14,6 @@ const TIERS: Record<Tier, { name: string; price: string; priceNum: string; desc:
     desc: '첫 AI 음악을 위한 필수 구성',
     features: [
       'Suno 프롬프트 조합법 20종',
-      '기본 가사 최적화 템플릿',
       '구조 템플릿 PDF 40p',
       '저작권 가이드 기본판',
       '12개월 무료 업데이트',
@@ -28,11 +27,9 @@ const TIERS: Record<Tier, { name: string; price: string; priceNum: string; desc:
     highlight: true,
     features: [
       '입문 전체 포함',
-      '고급 편집법 (Stems 분리 · 마스터링 프롬프트)',
+      'MV 워크플로우 (Runway · Luma · Pika)',
-      'MV 비디오 생성 워크플로우 (Runway/Luma/Pika)',
+      '샘플 프로젝트 1개 (.prj · 영상)',
-      '샘플 프로젝트 1개 (.prj · 영상 포함)',
+      '1:1 Q&A 1회 + 유튜브 SEO 템플릿',
-      '이메일/페이지 1:1 Q&A 1회 (30일 이내)',
-      '유튜브 SEO 템플릿',
     ],
   },
   master: {
@@ -42,10 +39,9 @@ const TIERS: Record<Tier, { name: string; price: string; priceNum: string; desc:
     desc: '여러 장르·포맷을 커버하는 마스터피스',
     features: [
       '프로 전체 포함',
-      '샘플 프로젝트 다수 (장르별 3종)',
+      '샘플 프로젝트 장르별 3종',
-      '우선 업데이트 · 베타 기능 선공개',
+      '저작권 심화판 + 상업 이용 체크리스트',
-      '저작권 가이드 심화판 + 상업 이용 체크리스트',
+      '우선 업데이트 · 제작 레시피 영상',
-      '제작 레시피 영상 가이드',
     ],
   },
 };
@@ -317,38 +313,19 @@ export default function MusicServicePage() {
         </div>
       </section>
 
-      {/* SAMPLES */}
+      {/* SAMPLES — 컴팩트 링크 */}
-      <section id="samples" className="px-6 py-20 lg:px-14 bg-[#0b0530]">
+      <section id="samples" className="px-6 py-12 lg:px-14 bg-[#0b0530] border-t border-white/5">
-        <div className="max-w-5xl mx-auto">
+        <div className="max-w-6xl mx-auto flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
-          <p className="font-mono text-xs text-violet-300/70 tracking-widest uppercase mb-2">
+          <div>
-            Most Popular Sample
+            <p className="font-mono text-xs text-violet-300/70 tracking-widest uppercase mb-1">Samples</p>
-          </p>
+            <h2 className="text-xl md:text-2xl font-extrabold">이 팩으로 만든 실제 쇼츠들</h2>
-          <h2 className="text-2xl md:text-3xl font-extrabold mb-3">
-            이 쇼츠, 이 팩으로 만들었어요.
-          </h2>
-          <p className="text-slate-400 mb-10">가장 인기 있는 결과물 1개. 전체 샘플은 별도 페이지에서.</p>
-
-          <div className="max-w-sm mx-auto mb-8">
-            <div className="aspect-[9/16] rounded-2xl border border-violet-400/30 bg-gradient-to-br from-violet-900/50 to-slate-900 flex items-center justify-center relative overflow-hidden group cursor-pointer shadow-2xl shadow-violet-900/40">
-              <div className="absolute inset-0 bg-gradient-to-br from-violet-500/15 to-cyan-500/15 group-hover:from-violet-500/30 group-hover:to-cyan-500/30 transition-all" />
-              <div className="relative text-center p-6">
-                <div className="text-6xl mb-4">🎬</div>
-                <p className="text-xs text-violet-300/80 font-mono tracking-widest">FEATURED</p>
-                <p className="text-base text-slate-100 mt-2 font-semibold">TOP 샘플 (준비 중)</p>
-                <p className="text-xs text-slate-400 mt-1">유튜브 쇼츠 임베드 예정</p>
-              </div>
-            </div>
-          </div>
-
-          <div className="text-center">
-            <a
-              href="/services/music/samples"
-              className="inline-flex items-center gap-2 px-6 py-3 rounded-full border border-violet-400/40 bg-violet-500/10 hover:bg-violet-500/20 text-sm font-semibold text-violet-200 transition"
-            >
-              전체 샘플 갤러리 보기
-              <span aria-hidden>→</span>
-            </a>
           </div>
+          <Link
+            href="/services/music/samples"
+            className="inline-flex items-center gap-2 px-6 py-3 rounded-xl border border-violet-400/40 bg-violet-500/10 hover:bg-violet-500/20 text-sm font-semibold text-violet-200 transition whitespace-nowrap"
+          >
+            전체 샘플 갤러리 →
+          </Link>
         </div>
       </section>
 
@@ -381,28 +358,6 @@ export default function MusicServicePage() {
         </div>
       </section>
 
-      {/* FINAL CTA */}
-      <section className="px-6 py-20 lg:px-14 bg-gradient-to-br from-violet-900 via-slate-950 to-[#0b0530]">
-        <div className="max-w-3xl mx-auto text-center">
-          <h2 className="text-3xl md:text-5xl font-extrabold text-white mb-4 leading-tight" style={{ wordBreak: 'keep-all' }}>
-            오늘 밤,
-            <br />
-            <span className="bg-gradient-to-r from-violet-300 via-pink-200 to-cyan-300 bg-clip-text text-transparent">
-              첫 쇼츠를 업로드하세요.
-            </span>
-          </h2>
-          <p className="text-slate-400 text-lg mb-10">
-            ₩39,000부터 · 12개월 무료 업데이트 · 즉시 다운로드
-          </p>
-          <a
-            href="#pricing"
-            className="inline-flex items-center gap-2 bg-violet-600 hover:bg-violet-500 text-white px-12 py-5 rounded-xl font-extrabold text-base transition-colors shadow-[0_0_60px_rgba(139,92,246,0.5)]"
-          >
-            팩 선택하기 →
-          </a>
-        </div>
-      </section>
-
       {/* Sticky 바텀 CTA */}
       <div
         className="fixed bottom-0 inset-x-0 z-40 border-t border-white/10 backdrop-blur-md"