feat(phase3a): 음악 랜딩·샘플 라이트 재스킨

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

@@ -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>