diff --git a/app/work/saju/components/SajuForm.tsx b/app/work/saju/components/SajuForm.tsx
index 7a76af1..b2c39c8 100644
--- a/app/work/saju/components/SajuForm.tsx
+++ b/app/work/saju/components/SajuForm.tsx
@@ -66,14 +66,14 @@ export default function SajuForm() {
     <form onSubmit={handleSubmit} className="space-y-6">
       {/* 생년월일 */}
       <div>
-        <label className="block text-left text-sm font-bold text-[#04102b] mb-3">
+        <label className="block text-left text-sm font-bold text-[var(--jsm-ink)] mb-3">
           생년월일
         </label>
         <div className="grid grid-cols-3 gap-3">
           <input
             type="number"
             placeholder="년 (예: 1990)"
-            className="px-4 py-3 border-2 border-[#dbe8ff] rounded-xl focus:border-[#1a56db] focus:outline-none transition bg-white text-[#04102b]"
+            className="px-4 py-3 border-2 border-[var(--jsm-line)] rounded-xl focus:border-[var(--jsm-accent)] focus:outline-none transition bg-white text-[var(--jsm-ink)]"
             min="1900"
             max="2100"
             value={year}
@@ -83,7 +83,7 @@ export default function SajuForm() {
           <input
             type="number"
             placeholder="월 (1-12)"
-            className="px-4 py-3 border-2 border-[#dbe8ff] rounded-xl focus:border-[#1a56db] focus:outline-none transition bg-white text-[#04102b]"
+            className="px-4 py-3 border-2 border-[var(--jsm-line)] rounded-xl focus:border-[var(--jsm-accent)] focus:outline-none transition bg-white text-[var(--jsm-ink)]"
             min="1"
             max="12"
             value={month}
@@ -93,7 +93,7 @@ export default function SajuForm() {
           <input
             type="number"
             placeholder="일 (1-31)"
-            className="px-4 py-3 border-2 border-[#dbe8ff] rounded-xl focus:border-[#1a56db] focus:outline-none transition bg-white text-[#04102b]"
+            className="px-4 py-3 border-2 border-[var(--jsm-line)] rounded-xl focus:border-[var(--jsm-accent)] focus:outline-none transition bg-white text-[var(--jsm-ink)]"
             min="1"
             max="31"
             value={day}
@@ -105,11 +105,11 @@ export default function SajuForm() {
 
       {/* 태어난 시간 */}
       <div>
-        <label className="block text-left text-sm font-bold text-[#04102b] mb-3">
+        <label className="block text-left text-sm font-bold text-[var(--jsm-ink)] mb-3">
           태어난 시간 (선택)
         </label>
         <select
-          className="w-full px-4 py-3 border-2 border-[#dbe8ff] rounded-xl focus:border-[#1a56db] focus:outline-none transition bg-white text-[#04102b]"
+          className="w-full px-4 py-3 border-2 border-[var(--jsm-line)] rounded-xl focus:border-[var(--jsm-accent)] focus:outline-none transition bg-white text-[var(--jsm-ink)]"
           value={hour}
           onChange={(e) => setHour(e.target.value)}
         >
@@ -131,7 +131,7 @@ export default function SajuForm() {
 
       {/* 양력/음력 선택 */}
       <div>
-        <label className="block text-left text-sm font-bold text-[#04102b] mb-3">
+        <label className="block text-left text-sm font-bold text-[var(--jsm-ink)] mb-3">
           생일 구분
         </label>
         <div className="grid grid-cols-2 gap-3">
@@ -140,8 +140,8 @@ export default function SajuForm() {
             onClick={() => setCalendarType('solar')}
             className={`px-6 py-3 rounded-xl font-bold transition ${
               calendarType === 'solar'
-                ? 'bg-[#1a56db] text-white shadow-lg'
-                : 'bg-white border-2 border-[#dbe8ff] text-[#04102b] hover:border-[#1a56db]'
+                ? 'bg-[var(--jsm-accent)] text-white shadow-lg'
+                : 'bg-white border-2 border-[var(--jsm-line)] text-[var(--jsm-ink)] hover:border-[var(--jsm-accent)]'
             }`}
           >
             양력
@@ -151,8 +151,8 @@ export default function SajuForm() {
             onClick={() => setCalendarType('lunar')}
             className={`px-6 py-3 rounded-xl font-bold transition ${
               calendarType === 'lunar'
-                ? 'bg-[#1a56db] text-white shadow-lg'
-                : 'bg-white border-2 border-[#dbe8ff] text-[#04102b] hover:border-[#1a56db]'
+                ? 'bg-[var(--jsm-accent)] text-white shadow-lg'
+                : 'bg-white border-2 border-[var(--jsm-line)] text-[var(--jsm-ink)] hover:border-[var(--jsm-accent)]'
             }`}
           >
             음력
@@ -165,7 +165,7 @@ export default function SajuForm() {
                 type="checkbox"
                 checked={isLeapMonth}
                 onChange={(e) => setIsLeapMonth(e.target.checked)}
-                className="w-4 h-4 text-[#1a56db] border-gray-300 rounded focus:ring-[#1a56db]"
+                className="w-4 h-4 text-[var(--jsm-accent)] border-gray-300 rounded focus:ring-[var(--jsm-accent)]"
               />
               <span>윤달</span>
             </label>
@@ -175,7 +175,7 @@ export default function SajuForm() {
 
       {/* 성별 선택 */}
       <div>
-        <label className="block text-left text-sm font-bold text-[#04102b] mb-3">
+        <label className="block text-left text-sm font-bold text-[var(--jsm-ink)] mb-3">
           성별
         </label>
         <div className="grid grid-cols-2 gap-3">
@@ -184,8 +184,8 @@ export default function SajuForm() {
             onClick={() => setGender('male')}
             className={`px-6 py-3 rounded-xl font-bold transition ${
               gender === 'male'
-                ? 'bg-[#1a56db] text-white shadow-lg'
-                : 'bg-white border-2 border-[#dbe8ff] text-[#04102b] hover:border-[#1a56db]'
+                ? 'bg-[var(--jsm-accent)] text-white shadow-lg'
+                : 'bg-white border-2 border-[var(--jsm-line)] text-[var(--jsm-ink)] hover:border-[var(--jsm-accent)]'
             }`}
           >
             남성
@@ -195,8 +195,8 @@ export default function SajuForm() {
             onClick={() => setGender('female')}
             className={`px-6 py-3 rounded-xl font-bold transition ${
               gender === 'female'
-                ? 'bg-[#1a56db] text-white shadow-lg'
-                : 'bg-white border-2 border-[#dbe8ff] text-[#04102b] hover:border-[#1a56db]'
+                ? 'bg-[var(--jsm-accent)] text-white shadow-lg'
+                : 'bg-white border-2 border-[var(--jsm-line)] text-[var(--jsm-ink)] hover:border-[var(--jsm-accent)]'
             }`}
           >
             여성
@@ -207,7 +207,7 @@ export default function SajuForm() {
       {/* 제출 버튼 */}
       <button
         type="submit"
-        className="w-full bg-gradient-to-r from-[#1a56db] to-[#7c3aed] hover:from-[#1e4fc2] hover:to-[#6d28d9] text-white py-4 rounded-xl text-lg font-bold transition shadow-lg hover:shadow-xl hover:scale-[1.02]"
+        className="w-full bg-[var(--jsm-accent)] hover:bg-[var(--jsm-accent-hover)] text-white py-4 rounded-xl text-lg font-bold transition shadow-lg hover:shadow-xl hover:scale-[1.02]"
       >
         내 사주 보기 →
       </button>
diff --git a/app/work/saju/input/page.tsx b/app/work/saju/input/page.tsx
index 5fb5ac0..5fb0c86 100644
--- a/app/work/saju/input/page.tsx
+++ b/app/work/saju/input/page.tsx
@@ -2,13 +2,12 @@ import SajuForm from '@/app/work/saju/components/SajuForm';
 
 export default function SajuInputPage() {
   return (
-    <div className="min-h-full bg-[#f0f5ff]">
+    <div className="min-h-full bg-[var(--jsm-bg)]">
       {/* Hero */}
-      <div className="relative overflow-hidden px-6 py-12"
-        style={{ background: '#04102b', backgroundImage: 'repeating-linear-gradient(135deg, rgba(255,255,255,0.012) 0px, rgba(255,255,255,0.012) 1px, transparent 1px, transparent 40px)' }}>
+      <div className="relative overflow-hidden px-6 py-12 bg-[var(--jsm-navy)]">
 
         <div className="relative max-w-xl mx-auto text-center">
-          <div className="inline-flex items-center gap-2 bg-violet-400/10 border border-violet-400/25 text-violet-300 text-xs font-semibold px-4 py-1.5 rounded-full mb-4 tracking-wide">
+          <div className="inline-flex items-center gap-2 bg-white/10 border border-white/20 text-[var(--jsm-accent-soft)] text-xs font-semibold px-4 py-1.5 rounded-full mb-4 tracking-wide">
             <span className="w-1.5 h-1.5 rounded-full bg-amber-400 animate-pulse" />
             AI 사주 분석 · 생년월일 입력
           </div>
@@ -24,10 +23,10 @@ export default function SajuInputPage() {
 
       {/* Form 영역 */}
       <div className="px-6 py-10 max-w-2xl mx-auto">
-        <div className="bg-white rounded-2xl border border-[#dbe8ff] p-8 shadow-lg">
+        <div className="bg-white rounded-2xl border border-[var(--jsm-line)] p-8 shadow-lg">
           <div className="flex items-center gap-2 mb-6">
-            <div className="w-1 h-5 bg-gradient-to-b from-[#1a56db] to-[#7c3aed] rounded-full" />
-            <h2 className="font-bold text-[#04102b] text-base">기본 정보 입력</h2>
+            <div className="w-1 h-5 bg-[var(--jsm-accent)] rounded-full" />
+            <h2 className="font-bold text-[var(--jsm-ink)] text-base">기본 정보 입력</h2>
           </div>
           <SajuForm />
         </div>