feat(design): JSM 전문 토큰 체계 + Pretendard 도입, kx 토큰 재매핑

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

app/globals.css

@@ -36,19 +36,32 @@
   --card-bg: #ffffff;
   --border: #dbe8ff;
 
-  /* ─── Kinetic Ether Tokens (다크 테마 섹션 전용) ─── */
-  --kx-surface: #060e20;
-  --kx-surface-low: #091328;
-  --kx-surface-mid: #0f1930;
-  --kx-surface-high: #141f38;
-  --kx-surface-bright: #1f2b49;
-  --kx-on-surface: #dee5ff;
-  --kx-on-variant: #a3aac4;
-  --kx-primary: #cc97ff;
-  --kx-primary-dim: #9c48ea;
-  --kx-secondary: #53ddfc;
-  --kx-secondary-dim: #40ceed;
-  --kx-outline: rgba(64, 72, 93, 0.15);
+  /* === JSM Professional tokens (2026-06 renewal) === */
+  --jsm-bg: #f8fafc;            /* slate-50 본문 배경 */
+  --jsm-surface: #ffffff;       /* 카드 */
+  --jsm-surface-alt: #f1f5f9;   /* slate-100 섹션 교차 배경 */
+  --jsm-ink: #0f172a;           /* slate-900 본문 텍스트 */
+  --jsm-ink-soft: #475569;      /* slate-600 보조 텍스트 */
+  --jsm-ink-faint: #94a3b8;     /* slate-400 캡션 */
+  --jsm-line: #e2e8f0;          /* slate-200 보더 */
+  --jsm-navy: #0b1f3a;          /* 딥네이비 — 푸터/다크 섹션 */
+  --jsm-accent: #1d4ed8;        /* blue-700 포인트 (단일 포인트 컬러) */
+  --jsm-accent-hover: #1e40af;  /* blue-800 */
+  --jsm-accent-soft: #dbeafe;   /* blue-100 뱃지 배경 */
+
+  /* 기존 kx 변수 재매핑 (잔여 참조 호환용) */
+  --kx-surface: var(--jsm-bg);
+  --kx-surface-low: var(--jsm-surface-alt);
+  --kx-surface-mid: var(--jsm-surface);
+  --kx-surface-high: var(--jsm-surface);
+  --kx-surface-bright: var(--jsm-surface-alt);
+  --kx-on-surface: var(--jsm-ink);
+  --kx-on-variant: var(--jsm-ink-soft);
+  --kx-primary: var(--jsm-accent);
+  --kx-primary-dim: var(--jsm-accent-hover);
+  --kx-secondary: var(--jsm-accent);
+  --kx-secondary-dim: var(--jsm-accent-hover);
+  --kx-outline: var(--jsm-line);
 }
 
 @theme inline {
@@ -56,8 +69,8 @@
   --color-foreground: var(--foreground);
   --color-primary: var(--primary);
   --color-secondary: var(--secondary);
-  --font-sans: var(--font-jua), 'Jua', -apple-system, system-ui, sans-serif;
-  --font-mono: var(--font-jua), 'Jua', ui-monospace, monospace;
+  --font-sans: var(--font-pretendard, 'Pretendard Variable'), Pretendard, -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
+  --font-mono: var(--font-pretendard, 'Pretendard Variable'), Pretendard, ui-monospace, monospace;
 }
 
 * {
@@ -69,16 +82,16 @@ html {
 }
 
 body {
-  background: var(--background);
-  color: var(--foreground);
-  font-family: var(--font-jua), 'Jua', -apple-system, system-ui, sans-serif;
+  background: var(--jsm-bg);
+  color: var(--jsm-ink);
+  font-family: var(--font-pretendard, 'Pretendard Variable'), Pretendard, -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 
-/* font-mono utility → Jua 통일 */
+/* font-mono utility → Pretendard 통일 */
 .font-mono, code, pre, kbd, samp {
-  font-family: var(--font-jua), 'Jua', ui-monospace, monospace;
+  font-family: var(--font-pretendard, 'Pretendard Variable'), Pretendard, ui-monospace, monospace;
 }
 
 /* Dashboard layout */
@@ -86,7 +99,7 @@ body {
   display: flex;
   height: 100dvh;
   overflow: hidden;
-  background: var(--background);
+  background: var(--jsm-bg);
 }
 
 .main-content {
@@ -107,18 +120,19 @@ body {
 .kx-section {
   background: var(--kx-surface);
   color: var(--kx-on-surface);
-  font-family: var(--font-jua), 'Jua', system-ui, sans-serif;
+  font-family: var(--font-pretendard, 'Pretendard Variable'), Pretendard, system-ui, sans-serif;
 }
 .kx-section p, .kx-section li, .kx-section span:not(.kx-label) {
   color: var(--kx-on-variant);
 }
 .kx-display {
-  font-family: var(--font-jua), 'Jua', system-ui, sans-serif;
-  letter-spacing: -0.01em;
+  font-family: var(--font-pretendard, 'Pretendard Variable'), Pretendard, system-ui, sans-serif;
+  font-weight: 700;
+  letter-spacing: -0.02em;
   color: inherit;
 }
 .kx-label {
-  font-family: var(--font-jua), 'Jua', system-ui, sans-serif;
+  font-family: var(--font-pretendard, 'Pretendard Variable'), Pretendard, system-ui, sans-serif;
   font-size: 0.6875rem;
   font-weight: 700;
   letter-spacing: 0.08em;
@@ -147,15 +161,14 @@ body {
               0 0 80px 0 rgba(83, 221, 252, 0.08);
 }
 .kx-btn-primary {
-  background: linear-gradient(135deg, #cc97ff 0%, #c284ff 100%);
-  color: #0b0113;
+  background: var(--jsm-accent);
+  color: #ffffff;
   font-weight: 700;
-  box-shadow: 0 0 20px 0 rgba(168, 85, 247, 0.4);
-  transition: transform 0.15s ease, box-shadow 0.15s ease;
+  transition: background 0.15s ease, transform 0.15s ease;
 }
 .kx-btn-primary:hover {
+  background: var(--jsm-accent-hover);
   transform: translateY(-1px);
-  box-shadow: 0 0 28px 0 rgba(168, 85, 247, 0.55);
 }
 .kx-btn-ghost {
   color: var(--kx-secondary);
@@ -166,10 +179,8 @@ body {
   background: var(--kx-surface-bright);
 }
 .kx-gradient-text {
-  background: linear-gradient(135deg, #cc97ff 0%, #53ddfc 100%);
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  background-clip: text;
+  color: var(--jsm-ink);
+  -webkit-text-fill-color: var(--jsm-ink);
 }
 .kx-orb {
   position: absolute;

app/layout.tsx

@@ -1,17 +1,10 @@
 import type { Metadata } from "next";
 import Script from "next/script";
-import { Jua } from "next/font/google";
+import "pretendard/dist/web/variable/pretendardvariable-dynamic-subset.css";
 import "./globals.css";
 import DashboardShell from "./components/DashboardShell";
 import { GlassFilter } from "./components/LiquidGlass";
 
-const jua = Jua({
-  weight: "400",
-  subsets: ["latin"],
-  variable: "--font-jua",
-  display: "swap",
-});
-
 export const metadata: Metadata = {
   title: {
     default: "AI 음악·뮤비 팩 ₩39,000~ | 쟁승메이드",
@@ -133,7 +126,7 @@ export default function RootLayout({
   children: React.ReactNode;
 }) {
   return (
-    <html lang="ko" data-scroll-behavior="smooth" className={jua.variable}>
+    <html lang="ko" data-scroll-behavior="smooth">
       <head>
         <script
           type="application/ld+json"

package-lock.json

@@ -21,6 +21,7 @@
         "lunar-javascript": "^1.7.7",
         "next": "^16.2.6",
         "openai": "^6.21.0",
+        "pretendard": "^1.3.9",
         "react": "^19.2.6",
         "react-dom": "^19.2.6",
         "react-markdown": "^9.0.1",
@@ -7958,6 +7959,12 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/pretendard": {
+      "version": "1.3.9",
+      "resolved": "https://registry.npmjs.org/pretendard/-/pretendard-1.3.9.tgz",
+      "integrity": "sha512-PaQAADyLY5v4kYFwkpSJHbSSYIkiriY/1xXw75TKoZ9UQQqeU+tvP05yTdZAWibiIYoo8ZKtRv8PM7w0IaywSw==",
+      "license": "OFL-1.1"
+    },
     "node_modules/prop-types": {
       "version": "15.8.1",
       "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",

package.json

@@ -22,6 +22,7 @@
     "lunar-javascript": "^1.7.7",
     "next": "^16.2.6",
     "openai": "^6.21.0",
+    "pretendard": "^1.3.9",
     "react": "^19.2.6",
     "react-dom": "^19.2.6",
     "react-markdown": "^9.0.1",