feat: 샘플 갤러리 별도 페이지 + 메인은 TOP 1개만

- /services/music/samples 신규: 6개 장르 샘플 갤러리 + 구매 CTA
- 음악 페이지 #samples 섹션: 가장 인기 1개(featured)만 노출 + 갤러리 링크
- TopNav/Hero 보조 CTA '샘플' → /services/music/samples 로 통일

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

app/components/TopNav.tsx

@@ -6,7 +6,7 @@ import { useState, useEffect } from 'react';
 
 const LINKS = [
   { href: '/', label: '홈' },
-  { href: '/services/music#samples', label: '샘플' },
+  { href: '/services/music/samples', label: '샘플' },
   { href: '/services/music#pricing', label: '가격' },
   { href: '/services/music', label: '팩 상세' },
 ];

app/page.tsx

@@ -82,7 +82,7 @@ export default function Home() {
               ₩39,000 팩 자세히 보기
             </Link>
             <Link
-              href="/services/music#samples"
+              href="/services/music/samples"
               className="px-8 py-4 rounded-full text-base font-bold inline-flex items-center justify-center"
               style={{
                 background: 'rgba(25,37,64,0.4)',

app/services/music/page.tsx

@@ -296,31 +296,34 @@ export default function MusicServicePage() {
       <section id="samples" className="px-6 py-20 lg:px-14 bg-[#0b0530]">
         <div className="max-w-5xl mx-auto">
           <p className="font-mono text-xs text-violet-300/70 tracking-widest uppercase mb-2">
-            Sample Showcase
+            Most Popular Sample
           </p>
           <h2 className="text-3xl md:text-4xl font-extrabold mb-3">
             이 쇼츠, 이 팩으로 만들었어요.
           </h2>
-          <p className="text-slate-400 mb-10">30분 만에 나온 결과물을 직접 들어보세요.</p>
+          <p className="text-slate-400 mb-10">가장 인기 있는 결과물 1개. 전체 샘플은 별도 페이지에서.</p>
 
-          <div className="grid sm:grid-cols-3 gap-4">
+          <div className="max-w-sm mx-auto mb-8">
-            {[1, 2, 3].map((i) => (
+            <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
+              <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" />
-                key={i}
-                className="aspect-[9/16] rounded-2xl border border-white/10 bg-gradient-to-br from-violet-900/40 to-slate-900 flex items-center justify-center relative overflow-hidden group cursor-pointer"
-              >
-                <div className="absolute inset-0 bg-gradient-to-br from-violet-500/10 to-cyan-500/10 group-hover:from-violet-500/20 group-hover:to-cyan-500/20 transition-all" />
               <div className="relative text-center p-6">
-                  <div className="text-5xl mb-3">🎬</div>
+                <div className="text-6xl mb-4">🎬</div>
-                  <p className="text-xs text-slate-400 font-mono">Sample {i}</p>
+                <p className="text-xs text-violet-300/80 font-mono tracking-widest">FEATURED</p>
-                  <p className="text-sm text-slate-200 mt-1">준비 중</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>
-          <p className="text-xs text-slate-500 mt-6 text-center">
+
-            유튜브 쇼츠 임베드로 교체 예정. 샘플 오디오는 구매 전 전체 듣기가 가능하도록 제공됩니다.
+          <div className="text-center">
-          </p>
+            <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>
         </div>
       </section>
 

app/services/music/samples/page.tsx

@@ -0,0 +1,102 @@
+import type { Metadata } from 'next';
+import Link from 'next/link';
+
+export const metadata: Metadata = {
+  title: 'AI 음악·뮤비 샘플 갤러리',
+  description: '쟁승메이드 AI 음악 팩으로 제작한 샘플 뮤직비디오 모음. 장르별 결과물을 직접 확인하세요.',
+};
+
+type Sample = {
+  id: string;
+  title: string;
+  genre: string;
+  duration: string;
+  views?: string;
+  featured?: boolean;
+  embedId?: string;
+};
+
+const SAMPLES: Sample[] = [
+  { id: 's1', title: 'K-POP 스타일 TOP 샘플', genre: 'K-POP', duration: '0:45', featured: true },
+  { id: 's2', title: 'Lo-fi 감성 MV', genre: 'Lo-fi', duration: '1:02' },
+  { id: 's3', title: '시티팝 무드 영상', genre: 'City Pop', duration: '0:58' },
+  { id: 's4', title: 'EDM 쇼츠 훅', genre: 'EDM', duration: '0:30' },
+  { id: 's5', title: '발라드 감성 컷', genre: 'Ballad', duration: '1:10' },
+  { id: 's6', title: '트랩 비트 쇼츠', genre: 'Trap', duration: '0:35' },
+];
+
+export default function MusicSamplesPage() {
+  return (
+    <div className="px-6 py-20 lg:px-14" style={{ background: 'var(--kx-surface)' }}>
+      <div className="max-w-6xl mx-auto">
+        <div className="text-center mb-12">
+          <span className="kx-label">SAMPLE GALLERY</span>
+          <h1 className="kx-display text-3xl md:text-5xl font-bold mt-3 mb-4" style={{ color: 'var(--kx-on-surface)' }}>
+            AI 음악·뮤비 샘플 모음
+          </h1>
+          <p className="max-w-2xl mx-auto text-sm md:text-base" style={{ color: 'var(--kx-on-variant)' }}>
+            팩 워크플로우로 제작된 결과물입니다. 장르별로 다양한 톤을 확인해보세요.
+            <br className="hidden md:block" />
+            <span className="text-xs" style={{ color: 'var(--kx-on-variant)' }}>
+              일부 샘플은 런칭 직후 순차 공개됩니다.
+            </span>
+          </p>
+        </div>
+
+        <div className="grid grid-cols-2 md:grid-cols-3 gap-4 md:gap-6">
+          {SAMPLES.map((s) => (
+            <div
+              key={s.id}
+              className={`group relative aspect-[9/16] rounded-2xl overflow-hidden border ${
+                s.featured ? 'border-violet-400/50 shadow-2xl shadow-violet-900/40' : 'border-white/10'
+              }`}
+              style={{ background: 'linear-gradient(135deg, #1a0840 0%, #061228 100%)' }}
+            >
+              <div className="absolute inset-0 bg-gradient-to-br from-violet-500/15 to-cyan-500/10 group-hover:from-violet-500/25 group-hover:to-cyan-500/20 transition-all" />
+
+              {s.featured && (
+                <span
+                  className="absolute top-3 left-3 z-10 text-[10px] px-2 py-1 rounded-full font-semibold tracking-widest"
+                  style={{ background: 'rgba(204,151,255,0.2)', color: 'var(--kx-primary)', border: '1px solid rgba(204,151,255,0.5)' }}
+                >
+                  TOP
+                </span>
+              )}
+
+              <div className="absolute inset-0 flex flex-col items-center justify-center text-center p-5">
+                <div className="text-5xl mb-3 opacity-80 group-hover:scale-110 transition-transform">🎬</div>
+                <p className="text-[10px] md:text-xs font-mono tracking-widest text-violet-300/80 mb-1">{s.genre.toUpperCase()}</p>
+                <p className="text-sm md:text-base font-semibold" style={{ color: 'var(--kx-on-surface)' }}>
+                  {s.title}
+                </p>
+                <p className="text-xs mt-1" style={{ color: 'var(--kx-on-variant)' }}>{s.duration}</p>
+                <p className="text-[10px] mt-3 opacity-60" style={{ color: 'var(--kx-on-variant)' }}>
+                  {s.embedId ? '영상 재생' : '영상 준비 중'}
+                </p>
+              </div>
+            </div>
+          ))}
+        </div>
+
+        <div
+          className="mt-16 text-center p-10 kx-glass"
+          style={{ border: '1px solid rgba(204,151,255,0.12)', borderRadius: '0.75rem 0.75rem 0.125rem 0.125rem' }}
+        >
+          <span className="kx-label">NEXT</span>
+          <h2 className="kx-display text-2xl md:text-3xl font-bold mt-2 mb-3" style={{ color: 'var(--kx-on-surface)' }}>
+            내 채널에도 이런 쇼츠 올리고 싶다면
+          </h2>
+          <p className="text-sm mb-6" style={{ color: 'var(--kx-on-variant)' }}>
+            동일 워크플로우 팩 ₩39,000부터.
+          </p>
+          <Link
+            href="/services/music#pricing"
+            className="kx-btn-primary px-8 py-3.5 rounded-full text-sm inline-flex"
+          >
+            팩 가격 보기
+          </Link>
+        </div>
+      </div>
+    </div>
+  );
+}