From 7cd63a3868cd23a36fea4b74e6a2d26d82748a5d Mon Sep 17 00:00:00 2001
From: gahusb <bgg8988@gmail.com>
Date: Fri, 3 Jul 2026 13:09:27 +0900
Subject: [PATCH] =?UTF-8?q?feat(phase3a):=20=EC=9D=8C=EC=95=85=20=EB=9E=9C?=
 =?UTF-8?q?=EB=94=A9=C2=B7=EC=83=98=ED=94=8C=20=EB=9D=BC=EC=9D=B4=ED=8A=B8?=
 =?UTF-8?q?=20=EC=9E=AC=EC=8A=A4=ED=82=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

app/music/page.tsx·app/music/samples/page.tsx 순수 시각 변경(className/style만).
다크 히어로(bg-black/gradient)와 샘플 카드의 violet 그라데이션·블러 글래스
CTA 밴드를 --jsm-navy/accent/accent-soft/surface-alt/line/ink 토큰으로 치환해
사주·showcase 재스킨과 동일한 navy 밴드 무테두리 flat + 흰 CTA 관용구로 정렬.
영상 이모지는 인라인 SVG 아이콘으로 교체. 데이터·구조는 변경 없음.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 app/music/page.tsx         | 17 +++++++------
 app/music/samples/page.tsx | 49 ++++++++++++++++++++++----------------
 2 files changed, 36 insertions(+), 30 deletions(-)

diff --git a/app/music/page.tsx b/app/music/page.tsx
index 52171a2..edbf7da 100644
--- a/app/music/page.tsx
+++ b/app/music/page.tsx
@@ -28,15 +28,14 @@ const CARDS = [
 
 export default function MusicHub() {
   return (
-    <div className="min-h-screen bg-black text-white">
-      <section className="relative w-full min-h-[60vh] flex items-center justify-center px-6 border-b border-white/10">
-        <div className="absolute inset-0 bg-gradient-to-b from-[#060e20] to-black pointer-events-none" />
+    <div className="min-h-screen bg-[var(--jsm-bg)]">
+      <section className="relative w-full min-h-[60vh] flex items-center justify-center px-6 bg-[var(--jsm-navy)]">
         <div className="relative z-10 max-w-3xl mx-auto text-center">
-          <p className="font-mono text-[11px] tracking-widest uppercase text-white/50 mb-4">
+          <p className="font-mono text-[11px] tracking-widest uppercase text-[var(--jsm-accent-soft)] mb-4">
             Music
           </p>
           <h1
-            className="kx-display text-4xl md:text-6xl font-bold mb-5"
+            className="kx-display text-4xl md:text-6xl font-bold mb-5 text-white"
             style={{ wordBreak: 'keep-all', letterSpacing: '-0.02em' }}
           >
             AI 음악 제품
@@ -53,16 +52,16 @@ export default function MusicHub() {
             <Link
               key={c.key}
               href={c.href}
-              className="group rounded-2xl border border-white/15 bg-white/[0.02] p-7 hover:border-white/40 hover:bg-white/[0.05] transition flex flex-col"
+              className="rounded-2xl border border-[var(--jsm-line)] bg-[var(--jsm-surface)] p-7 transition-colors hover:border-[var(--jsm-accent)] hover:bg-[var(--jsm-surface-alt)] flex flex-col"
               style={{ textDecoration: 'none' }}
             >
-              <h2 className="kx-display text-xl md:text-2xl font-bold text-white mb-3">
+              <h2 className="kx-display text-xl md:text-2xl font-bold text-[var(--jsm-ink)] mb-3">
                 {c.label}
               </h2>
-              <p className="text-sm md:text-base text-white/60 leading-relaxed flex-1">
+              <p className="text-sm md:text-base text-[var(--jsm-ink-soft)] leading-relaxed flex-1">
                 {c.desc}
               </p>
-              <span aria-hidden="true" className="mt-4 text-white/40 text-xs">→</span>
+              <span aria-hidden="true" className="mt-4 text-[var(--jsm-ink-faint)] text-xs">→</span>
             </Link>
           ))}
         </div>
diff --git a/app/music/samples/page.tsx b/app/music/samples/page.tsx
index 16c9f45..fb1b2b2 100644
--- a/app/music/samples/page.tsx
+++ b/app/music/samples/page.tsx
@@ -27,17 +27,17 @@ const SAMPLES: Sample[] = [
 
 export default function MusicSamplesPage() {
   return (
-    <div className="px-6 py-20 lg:px-14" style={{ background: 'var(--kx-surface)' }}>
+    <div className="px-6 py-20 lg:px-14" style={{ background: 'var(--jsm-bg)' }}>
       <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)' }}>
+          <h1 className="kx-display text-3xl md:text-5xl font-bold mt-3 mb-4" style={{ color: 'var(--jsm-ink)' }}>
             AI 음악·뮤비 샘플 모음
           </h1>
-          <p className="max-w-2xl mx-auto text-sm md:text-base" style={{ color: 'var(--kx-on-variant)' }}>
+          <p className="max-w-2xl mx-auto text-sm md:text-base" style={{ color: 'var(--jsm-ink-soft)' }}>
             팩 워크플로우로 제작된 결과물입니다. 장르별로 다양한 톤을 확인해보세요.
             <br className="hidden md:block" />
-            <span className="text-xs" style={{ color: 'var(--kx-on-variant)' }}>
+            <span className="text-xs" style={{ color: 'var(--jsm-ink-soft)' }}>
               일부 샘플은 런칭 직후 순차 공개됩니다.
             </span>
           </p>
@@ -47,30 +47,36 @@ export default function MusicSamplesPage() {
           {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'
+              className={`relative aspect-[9/16] rounded-2xl overflow-hidden border ${
+                s.featured ? 'border-[var(--jsm-accent)] shadow-lg' : 'border-[var(--jsm-line)]'
               }`}
-              style={{ background: 'linear-gradient(135deg, #1a0840 0%, #061228 100%)' }}
+              style={{ background: 'var(--jsm-surface-alt)' }}
             >
-              <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)' }}
+                  style={{ background: 'var(--jsm-accent-soft)', color: 'var(--jsm-accent)', border: '1px solid var(--jsm-accent)' }}
                 >
                   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)' }}>
+                <svg
+                  className="w-10 h-10 mb-3 opacity-80"
+                  fill="none"
+                  stroke="var(--jsm-accent)"
+                  viewBox="0 0 24 24"
+                  aria-hidden="true"
+                >
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M15.75 10.5l4.72-2.72a.75.75 0 011.28.53v9.38a.75.75 0 01-1.28.53l-4.72-2.72M4.5 18.75h9a2.25 2.25 0 002.25-2.25v-9a2.25 2.25 0 00-2.25-2.25h-9A2.25 2.25 0 002.25 7.5v9a2.25 2.25 0 002.25 2.25z" />
+                </svg>
+                <p className="text-[10px] md:text-xs font-mono tracking-widest mb-1" style={{ color: 'var(--jsm-accent)' }}>{s.genre.toUpperCase()}</p>
+                <p className="text-sm md:text-base font-semibold" style={{ color: 'var(--jsm-ink)' }}>
                   {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)' }}>
+                <p className="text-xs mt-1" style={{ color: 'var(--jsm-ink-soft)' }}>{s.duration}</p>
+                <p className="text-[10px] mt-3 opacity-60" style={{ color: 'var(--jsm-ink-soft)' }}>
                   {s.embedId ? '영상 재생' : '영상 준비 중'}
                 </p>
               </div>
@@ -79,19 +85,20 @@ export default function MusicSamplesPage() {
         </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' }}
+          className="mt-16 text-center px-8 py-16 rounded-3xl"
+          style={{ background: 'var(--jsm-navy)' }}
         >
-          <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)' }}>
+          <span className="text-[var(--jsm-accent-soft)] text-xs font-bold uppercase tracking-widest">NEXT</span>
+          <h2 className="text-2xl md:text-3xl font-bold mt-3 mb-3 text-white">
             내 채널에도 이런 쇼츠 올리고 싶다면
           </h2>
-          <p className="text-sm mb-6" style={{ color: 'var(--kx-on-variant)' }}>
+          <p className="text-sm mb-6 text-white/70">
             동일 워크플로우 팩 ₩39,000부터.
           </p>
           <Link
             href="/music/packs#pricing"
-            className="kx-btn-primary px-8 py-3.5 rounded-full text-sm inline-flex"
+            className="inline-flex items-center justify-center gap-2 rounded-full bg-white px-8 py-3.5 text-sm font-semibold transition-transform duration-200 hover:translate-y-[-1px]"
+            style={{ color: 'var(--jsm-navy)' }}
           >
             팩 가격 보기
           </Link>