From abec100a73e1ab5a24324ac7d5e9ea12b63c8177 Mon Sep 17 00:00:00 2001
From: gahusb <bgg8988@gmail.com>
Date: Fri, 3 Jul 2026 11:18:43 +0900
Subject: [PATCH] =?UTF-8?q?feat(phase2.6):=20=EC=82=AC=EC=A3=BC=20?=
 =?UTF-8?q?=EB=9E=9C=EB=94=A9=20=EB=9D=BC=EC=9D=B4=ED=8A=B8=20=EC=9E=AC?=
 =?UTF-8?q?=EC=8A=A4=ED=82=A8=20=E2=80=94=20gradient/=EB=B3=B4=EB=9D=BC?=
 =?UTF-8?q?=E2=86=92--jsm,=20=ED=85=8D=EC=8A=A4=EC=B2=98=20=EC=A0=9C?=
 =?UTF-8?q?=EA=B1=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

app/work/saju/page.tsx 순수 시각 변경(className/style만). 히어로·MY RECORDS·
바로시작 CTA·PRICING 비교표·FAQ 전 구간의 #04102b/violet/gradient 하드코드를
--jsm-navy/ink/accent/accent-soft/line/surface-alt 토큰으로 치환하고
repeating-linear-gradient 텍스처와 다크 카드 테두리(#1a3a7a)를 제거해
result 페이지(Phase 2.5)와 동일한 navy 밴드 무테두리 flat 관용구로 정렬.
데이터 조회·상태·JSX 구조는 변경 없음.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 app/work/saju/page.tsx | 76 ++++++++++++++++++------------------------
 1 file changed, 32 insertions(+), 44 deletions(-)

diff --git a/app/work/saju/page.tsx b/app/work/saju/page.tsx
index be5f288..33bfd53 100644
--- a/app/work/saju/page.tsx
+++ b/app/work/saju/page.tsx
@@ -74,14 +74,14 @@ export default function SajuPage() {
   }, []);
 
   return (
-    <div className="min-h-full bg-[#f0f5ff]">
+    <div className="min-h-full bg-[var(--jsm-bg)]">
       {/* ─── Hero ─── */}
-      <div className="relative overflow-hidden bg-[#04102b] px-6 py-14 lg:px-12" style={{ backgroundImage: 'repeating-linear-gradient(135deg, rgba(255,255,255,0.015) 0px, rgba(255,255,255,0.015) 1px, transparent 1px, transparent 40px)' }}>
+      <div className="relative overflow-hidden bg-[var(--jsm-navy)] px-6 py-14 lg:px-12">
 
         <div className="relative max-w-3xl mx-auto">
           <div className="flex items-center gap-2 mb-5">
             <span className="w-1.5 h-1.5 rounded-full bg-amber-400 animate-pulse" />
-            <span className="text-violet-300/70 text-xs font-mono tracking-widest uppercase">전통 명리학 × AI 해석 · 무료</span>
+            <span className="text-[var(--jsm-accent-soft)] text-xs font-mono tracking-widest uppercase">전통 명리학 × AI 해석 · 무료</span>
           </div>
           <h1 className="text-4xl md:text-5xl font-extrabold text-white leading-tight mb-5 tracking-tight">
             AI가 분석하는<br />
@@ -97,7 +97,7 @@ export default function SajuPage() {
             <div className="flex flex-col sm:flex-row items-center justify-center gap-3">
               <Link
                 href="/work/saju/input"
-                className="inline-flex items-center gap-2 bg-[#1a56db] hover:bg-[#1e4fc2] text-white px-7 py-3.5 rounded-xl font-semibold text-base transition-all"
+                className="inline-flex items-center gap-2 bg-[var(--jsm-accent)] hover:bg-[var(--jsm-accent-hover)] text-white px-7 py-3.5 rounded-xl font-semibold text-base transition-all"
               >
                 <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                   <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
@@ -117,7 +117,7 @@ export default function SajuPage() {
           ) : (
             <Link
               href="/work/saju/input"
-              className="inline-flex items-center gap-2 bg-gradient-to-r from-[#1a56db] to-[#7c3aed] hover:from-[#1e4fc2] hover:to-[#6d28d9] text-white px-8 py-3.5 rounded-xl font-semibold text-base transition-all shadow-lg shadow-violet-900/40"
+              className="inline-flex items-center gap-2 bg-[var(--jsm-accent)] hover:bg-[var(--jsm-accent-hover)] text-white px-8 py-3.5 rounded-xl font-semibold text-base transition-all shadow-lg"
             >
               <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                 <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" />
@@ -135,19 +135,19 @@ export default function SajuPage() {
           {hasPaid && paidRecords.length > 0 && (
             <div id="past-records">
               <div className="text-center mb-6">
-                <p className="text-violet-600 text-xs font-bold uppercase tracking-widest mb-2">MY RECORDS</p>
-                <h2 className="text-2xl font-extrabold text-[#04102b]">이전 AI 사주 기록</h2>
+                <p className="text-[var(--jsm-accent)] text-xs font-bold uppercase tracking-widest mb-2">MY RECORDS</p>
+                <h2 className="text-2xl font-extrabold text-[var(--jsm-ink)]">이전 AI 사주 기록</h2>
                 <p className="text-slate-500 text-sm mt-1">결제한 사주 기록을 다시 확인하세요</p>
               </div>
               <div className="grid md:grid-cols-2 gap-4">
                 {paidRecords.map((rec) => (
-                  <div key={rec.id} className="bg-white rounded-2xl border border-[#dbe8ff] p-5 hover:border-violet-300 transition-colors">
+                  <div key={rec.id} className="bg-white rounded-2xl border border-[var(--jsm-line)] p-5 hover:border-[var(--jsm-accent-soft)] transition-colors">
                     <div className="flex items-start justify-between mb-3">
                       <div>
                         <div className="text-xs text-slate-400 mb-1">
                           {new Date(rec.created_at).toLocaleDateString('ko-KR', { year: 'numeric', month: 'long', day: 'numeric' })}
                         </div>
-                        <div className="font-bold text-[#04102b] text-base">
+                        <div className="font-bold text-[var(--jsm-ink)] text-base">
                           {rec.saju_data.birth_year ?? '?'}년{' '}
                           {rec.saju_data.birth_month ?? '?'}월{' '}
                           {rec.saju_data.birth_day ?? '?'}일생
@@ -168,7 +168,7 @@ export default function SajuPage() {
                     )}
                     <Link
                       href={buildResultUrl(rec)}
-                      className="block w-full text-center py-2 rounded-xl text-sm font-bold bg-[#04102b] hover:bg-[#0a1f5c] text-white border border-[#1a3a7a] transition"
+                      className="block w-full text-center py-2 rounded-xl text-sm font-bold bg-[var(--jsm-navy)] hover:opacity-90 text-white transition"
                     >
                       다시 보기 →
                     </Link>
@@ -179,18 +179,12 @@ export default function SajuPage() {
           )}
 
           {/* ─── 바로 시작하기 CTA ─── */}
-          <div
-            className="rounded-2xl border border-[#1a3a7a] p-8 text-center"
-            style={{
-              background: '#04102b',
-              backgroundImage: 'repeating-linear-gradient(135deg, rgba(255,255,255,0.015) 0px, rgba(255,255,255,0.015) 1px, transparent 1px, transparent 30px)',
-            }}
-          >
+          <div className="rounded-2xl p-8 text-center bg-[var(--jsm-navy)]">
             <h3 className="text-2xl font-extrabold text-white mb-2">지금 무료로 시작하세요</h3>
             <p className="text-blue-200/60 text-sm mb-6">회원가입 없이, 생년월일만 입력하면 바로 확인 가능합니다</p>
             <Link
               href="/work/saju/input"
-              className="inline-flex items-center gap-2 bg-amber-400 hover:bg-amber-300 text-[#04102b] px-8 py-3.5 rounded-xl font-bold text-base transition-all"
+              className="inline-flex items-center gap-2 bg-amber-400 hover:bg-amber-300 text-[var(--jsm-ink)] px-8 py-3.5 rounded-xl font-bold text-base transition-all"
             >
               사주 입력하러 가기 →
             </Link>
@@ -199,23 +193,23 @@ export default function SajuPage() {
           {/* ─── 무료 vs 유료 비교표 ─── */}
           <div>
             <div className="text-center mb-8">
-              <p className="text-[#1a56db] text-xs font-bold uppercase tracking-widest mb-2">PRICING</p>
-              <h2 className="text-2xl md:text-3xl font-extrabold text-[#04102b] tracking-tight">무엇을 분석해드리나요</h2>
+              <p className="text-[var(--jsm-accent)] text-xs font-bold uppercase tracking-widest mb-2">PRICING</p>
+              <h2 className="text-2xl md:text-3xl font-extrabold text-[var(--jsm-ink)] tracking-tight">무엇을 분석해드리나요</h2>
               <p className="text-slate-500 text-sm mt-2">기본 원국은 무료, AI 상세 해석은 1,000원</p>
             </div>
 
             <div className="grid md:grid-cols-2 gap-6">
               {/* 무료 */}
-              <div className="bg-white rounded-2xl border border-[#dbe8ff] p-6 shadow-sm">
+              <div className="bg-white rounded-2xl border border-[var(--jsm-line)] p-6 shadow-sm">
                 <div className="flex items-center gap-3 mb-5">
-                  <div className="w-10 h-10 rounded-xl bg-[#f0f5ff] border border-[#dbe8ff] flex items-center justify-center">
-                    <svg className="w-5 h-5 text-[#1a56db]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <div className="w-10 h-10 rounded-xl bg-[var(--jsm-surface-alt)] border border-[var(--jsm-line)] flex items-center justify-center">
+                    <svg className="w-5 h-5 text-[var(--jsm-accent)]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                       <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                     </svg>
                   </div>
                   <div>
                     <div className="text-xs font-bold text-slate-500 uppercase tracking-wide">FREE</div>
-                    <div className="text-lg font-extrabold text-[#04102b]">무료 기본 분석</div>
+                    <div className="text-lg font-extrabold text-[var(--jsm-ink)]">무료 기본 분석</div>
                   </div>
                 </div>
                 <ul className="space-y-3">
@@ -229,18 +223,18 @@ export default function SajuPage() {
                   ].map((item) => (
                     <li key={item} className="flex items-center gap-2.5 text-sm text-slate-700">
                       <div className="w-4 h-4 rounded-full bg-blue-100 border border-blue-200 flex items-center justify-center flex-shrink-0">
-                        <div className="w-1.5 h-1.5 rounded-full bg-[#1a56db]" />
+                        <div className="w-1.5 h-1.5 rounded-full bg-[var(--jsm-accent)]" />
                       </div>
                       {item}
                     </li>
                   ))}
                 </ul>
                 <div className="mt-6 pt-5 border-t border-slate-100">
-                  <div className="text-2xl font-extrabold text-[#04102b]">무료</div>
+                  <div className="text-2xl font-extrabold text-[var(--jsm-ink)]">무료</div>
                   <div className="text-xs text-slate-500 mt-1">회원가입 불필요</div>
                   <Link
                     href="/work/saju/input"
-                    className="mt-4 block w-full text-center py-2.5 rounded-xl text-sm font-bold bg-[#f0f5ff] border border-[#dbe8ff] text-[#1a56db] hover:bg-blue-50 transition"
+                    className="mt-4 block w-full text-center py-2.5 rounded-xl text-sm font-bold bg-[var(--jsm-surface-alt)] border border-[var(--jsm-line)] text-[var(--jsm-accent)] hover:bg-blue-50 transition"
                   >
                     무료로 시작하기
                   </Link>
@@ -248,24 +242,18 @@ export default function SajuPage() {
               </div>
 
               {/* AI 해석 (현재 무료) */}
-              <div
-                className="rounded-2xl border border-[#1a3a7a] p-6 shadow-lg relative overflow-hidden"
-                style={{
-                  background: '#04102b',
-                  backgroundImage: 'repeating-linear-gradient(135deg, rgba(255,255,255,0.015) 0px, rgba(255,255,255,0.015) 1px, transparent 1px, transparent 30px)',
-                }}
-              >
-                <div className="absolute top-4 right-4 bg-amber-400 text-[#04102b] text-xs font-bold px-2 py-0.5 rounded-lg">
+              <div className="rounded-2xl p-6 shadow-lg relative overflow-hidden bg-[var(--jsm-navy)]">
+                <div className="absolute top-4 right-4 bg-amber-400 text-[var(--jsm-ink)] text-xs font-bold px-2 py-0.5 rounded-lg">
                   1,000원
                 </div>
                 <div className="flex items-center gap-3 mb-5 relative">
-                  <div className="w-10 h-10 rounded-xl bg-violet-500/20 border border-violet-400/30 flex items-center justify-center">
+                  <div className="w-10 h-10 rounded-xl bg-white/10 border border-white/20 flex items-center justify-center">
                     <svg className="w-5 h-5 text-amber-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                       <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
                     </svg>
                   </div>
                   <div>
-                    <div className="text-xs font-bold text-violet-300 uppercase tracking-wide">AI PREMIUM</div>
+                    <div className="text-xs font-bold text-[var(--jsm-accent-soft)] uppercase tracking-wide">AI PREMIUM</div>
                     <div className="text-lg font-extrabold text-white">AI 상세 해석</div>
                   </div>
                 </div>
@@ -294,7 +282,7 @@ export default function SajuPage() {
                   <div className="text-xs text-blue-300/70 mt-1 mb-4">로그인 후 결제 · 12가지 항목 AI 해석</div>
                   <Link
                     href="/work/saju/input"
-                    className="block w-full text-center py-3 rounded-xl text-sm font-bold transition bg-amber-400 text-[#04102b] hover:bg-amber-300"
+                    className="block w-full text-center py-3 rounded-xl text-sm font-bold transition bg-amber-400 text-[var(--jsm-ink)] hover:bg-amber-300"
                   >
                     사주 분석 시작하기 →
                   </Link>
@@ -306,18 +294,18 @@ export default function SajuPage() {
           {/* ─── FAQ ─── */}
           <div>
             <div className="text-center mb-8">
-              <p className="text-[#1a56db] text-xs font-bold uppercase tracking-widest mb-2">FAQ</p>
-              <h2 className="text-2xl font-extrabold text-[#04102b]">자주 묻는 질문</h2>
+              <p className="text-[var(--jsm-accent)] text-xs font-bold uppercase tracking-widest mb-2">FAQ</p>
+              <h2 className="text-2xl font-extrabold text-[var(--jsm-ink)]">자주 묻는 질문</h2>
             </div>
             <div className="space-y-4">
               {faqItems.map((item, i) => (
-                <div key={i} className="bg-white rounded-2xl border border-[#dbe8ff] p-6">
+                <div key={i} className="bg-white rounded-2xl border border-[var(--jsm-line)] p-6">
                   <div className="flex items-start gap-3">
-                    <div className="w-6 h-6 rounded-full bg-[#f0f5ff] border border-[#dbe8ff] flex items-center justify-center flex-shrink-0 mt-0.5">
-                      <span className="text-[#1a56db] text-xs font-bold">Q</span>
+                    <div className="w-6 h-6 rounded-full bg-[var(--jsm-surface-alt)] border border-[var(--jsm-line)] flex items-center justify-center flex-shrink-0 mt-0.5">
+                      <span className="text-[var(--jsm-accent)] text-xs font-bold">Q</span>
                     </div>
                     <div>
-                      <p className="font-bold text-[#04102b] text-sm mb-2">{item.q}</p>
+                      <p className="font-bold text-[var(--jsm-ink)] text-sm mb-2">{item.q}</p>
                       <p className="text-slate-600 text-sm leading-relaxed">{item.a}</p>
                     </div>
                   </div>