From 028bda551fa5da0c146b740ddefd8c1cf3de00b4 Mon Sep 17 00:00:00 2001
From: gahusb <bgg8988@gmail.com>
Date: Tue, 17 Feb 2026 08:15:41 +0900
Subject: [PATCH] =?UTF-8?q?=EC=9B=B9=20=EB=94=94=EC=9E=90=EC=9D=B8=20?=
 =?UTF-8?q?=EC=A0=84=EB=A9=B4=20=EA=B0=9C=ED=8E=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/compatibility/page.tsx             |  69 +-
 app/components/SajuForm.tsx            |  48 +-
 app/fortune/page.tsx                   | 154 ++--
 app/globals.css                        | 237 ++++++-
 app/layout.tsx                         |  36 +-
 app/login/page.tsx                     | 179 ++---
 app/page.tsx                           | 515 +++++++++-----
 app/result/page.tsx                    | 938 +++++++++++++------------
 app/saju/page.tsx                      |  81 +--
 app/tojeong/page.tsx                   |  69 +-
 components/AiInterpretationSection.tsx |  50 +-
 components/Footer.tsx                  | 161 +++++
 components/Header.tsx                  | 186 +++++
 package.json                           |   5 +-
 scripts/deploy-nas-scp.cjs             | 114 +++
 scripts/deploy-nas.cjs                 |  58 +-
 16 files changed, 1850 insertions(+), 1050 deletions(-)
 create mode 100644 components/Footer.tsx
 create mode 100644 components/Header.tsx
 create mode 100644 scripts/deploy-nas-scp.cjs

diff --git a/app/compatibility/page.tsx b/app/compatibility/page.tsx
index f8d3299..e85d5e4 100644
--- a/app/compatibility/page.tsx
+++ b/app/compatibility/page.tsx
@@ -1,38 +1,25 @@
 import Link from 'next/link';
 import CompatibilityForm from '../components/CompatibilityForm';
+import Header from '@/components/Header';
+import Footer from '@/components/Footer';
 
 export default function CompatibilityPage() {
   return (
-    <div className="min-h-screen bg-gradient-to-br from-pink-50 via-purple-50 to-indigo-50">
-      {/* Navigation */}
-      <nav className="bg-white/80 backdrop-blur-md border-b border-gray-200 sticky top-0 z-50">
-        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-          <div className="flex justify-between items-center h-16">
-            <Link href="/" className="text-2xl font-bold bg-gradient-to-r from-pink-600 to-purple-600 bg-clip-text text-transparent">
-              🔮 사주보기
-            </Link>
-            <Link
-              href="/"
-              className="text-gray-700 hover:text-pink-600 transition font-medium"
-            >
-              처음으로
-            </Link>
-          </div>
-        </div>
-      </nav>
+    <div className="min-h-screen bg-[#F3E7E3]">
+      <Header />
 
       {/* Hero Section */}
-      <section className="pt-20 pb-32 px-4">
+      <section className="pt-32 pb-20 px-4">
         <div className="max-w-4xl mx-auto text-center mb-12">
-          <div className="inline-block mb-6 px-6 py-2 bg-white/50 backdrop-blur-sm rounded-full text-pink-700 font-semibold border border-pink-200">
+          <div className="inline-block mb-6 px-6 py-2 bg-white rounded-full text-[#173658] font-bold border-2 border-[#173658]">
             두 사람의 궁합을 확인해보세요
           </div>
 
-          <h1 className="text-5xl md:text-7xl font-bold text-gray-900 mb-6 leading-tight">
-            💕 <span className="bg-gradient-to-r from-pink-600 to-purple-600 bg-clip-text text-transparent">궁합</span> 보기
+          <h1 className="text-4xl md:text-6xl font-bold text-[#173658] mb-6 leading-tight">
+            💕 <span className="gradient-text">궁합</span> 보기
           </h1>
 
-          <p className="text-xl text-gray-600 mb-12 max-w-2xl mx-auto">
+          <p className="text-xl text-[#5d6d7e] mb-12 max-w-2xl mx-auto leading-relaxed">
             사주팔자를 비교하여 두 사람의 궁합을 확인할 수 있습니다.
             연애, 결혼, 사업 등 다양한 관계의 궁합을 알아보세요.
           </p>
@@ -48,31 +35,31 @@ export default function CompatibilityPage() {
       <section className="py-20 px-4 bg-white">
         <div className="max-w-6xl mx-auto">
           <div className="text-center mb-16">
-            <h2 className="text-4xl font-bold text-gray-900 mb-4">궁합이란?</h2>
-            <p className="text-xl text-gray-600">사주팔자를 통해 알아보는 두 사람의 인연</p>
+            <h2 className="text-3xl md:text-4xl font-bold text-[#173658] mb-4">궁합이란?</h2>
+            <p className="text-xl text-[#5d6d7e]">사주팔자를 통해 알아보는 두 사람의 인연</p>
           </div>
 
           <div className="grid md:grid-cols-3 gap-8">
-            <div className="text-center p-6 rounded-2xl hover:bg-pink-50 transition">
+            <div className="text-center p-6 glass-panel-light rounded-2xl card-hover">
               <div className="text-5xl mb-4">💑</div>
-              <h3 className="text-xl font-bold text-gray-900 mb-3">연애 궁합</h3>
-              <p className="text-gray-600">
+              <h3 className="text-xl font-bold text-[#173658] mb-3">연애 궁합</h3>
+              <p className="text-[#5d6d7e]">
                 두 사람의 사랑이 얼마나 잘 맞는지 확인하고 서로를 이해하는 방법을 알아보세요.
               </p>
             </div>
 
-            <div className="text-center p-6 rounded-2xl hover:bg-purple-50 transition">
+            <div className="text-center p-6 glass-panel-light rounded-2xl card-hover">
               <div className="text-5xl mb-4">💍</div>
-              <h3 className="text-xl font-bold text-gray-900 mb-3">결혼 궁합</h3>
-              <p className="text-gray-600">
+              <h3 className="text-xl font-bold text-[#173658] mb-3">결혼 궁합</h3>
+              <p className="text-[#5d6d7e]">
                 평생을 함께할 배우자와의 궁합을 확인하고 행복한 결혼 생활을 준비하세요.
               </p>
             </div>
 
-            <div className="text-center p-6 rounded-2xl hover:bg-indigo-50 transition">
+            <div className="text-center p-6 glass-panel-light rounded-2xl card-hover">
               <div className="text-5xl mb-4">🤝</div>
-              <h3 className="text-xl font-bold text-gray-900 mb-3">사업 궁합</h3>
-              <p className="text-gray-600">
+              <h3 className="text-xl font-bold text-[#173658] mb-3">사업 궁합</h3>
+              <p className="text-[#5d6d7e]">
                 사업 파트너와의 궁합을 확인하고 성공적인 협력 관계를 만들어보세요.
               </p>
             </div>
@@ -80,21 +67,7 @@ export default function CompatibilityPage() {
         </div>
       </section>
 
-      {/* Footer */}
-      <footer className="bg-gray-900 text-white py-12 px-4">
-        <div className="max-w-7xl mx-auto text-center">
-          <div className="text-2xl font-bold mb-4 bg-gradient-to-r from-pink-400 to-purple-400 bg-clip-text text-transparent">
-            🔮 사주보기
-          </div>
-          <p className="text-gray-400 mb-6">
-            쟁승메이드가 제공하는 무료 사주 서비스
-          </p>
-          <div className="text-sm text-gray-500">
-            <p>문의: bgg8988@gmail.com | <a href="https://jaengseung-made.com" target="_blank" rel="noopener noreferrer" className="hover:text-pink-400">쟁승메이드</a></p>
-            <p className="mt-2">&copy; 2025 쟁승메이드. All rights reserved.</p>
-          </div>
-        </div>
-      </footer>
+      <Footer />
     </div>
   );
 }
diff --git a/app/components/SajuForm.tsx b/app/components/SajuForm.tsx
index c2f46ca..a2d6bee 100644
--- a/app/components/SajuForm.tsx
+++ b/app/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-semibold text-gray-700 mb-2">
+        <label className="block text-left text-sm font-bold text-[#173658] mb-3">
           생년월일
         </label>
         <div className="grid grid-cols-3 gap-3">
           <input
             type="number"
             placeholder="년 (예: 1990)"
-            className="px-4 py-3 border-2 border-gray-200 rounded-xl focus:border-indigo-500 focus:outline-none transition"
+            className="px-4 py-3 border-2 border-[#173658]/20 rounded-xl focus:border-[#173658] focus:outline-none transition bg-white"
             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-gray-200 rounded-xl focus:border-indigo-500 focus:outline-none transition"
+            className="px-4 py-3 border-2 border-[#173658]/20 rounded-xl focus:border-[#173658] focus:outline-none transition bg-white"
             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-gray-200 rounded-xl focus:border-indigo-500 focus:outline-none transition"
+            className="px-4 py-3 border-2 border-[#173658]/20 rounded-xl focus:border-[#173658] focus:outline-none transition bg-white"
             min="1"
             max="31"
             value={day}
@@ -105,11 +105,11 @@ export default function SajuForm() {
 
       {/* 태어난 시간 */}
       <div>
-        <label className="block text-left text-sm font-semibold text-gray-700 mb-2">
+        <label className="block text-left text-sm font-bold text-[#173658] mb-3">
           태어난 시간 (선택)
         </label>
         <select
-          className="w-full px-4 py-3 border-2 border-gray-200 rounded-xl focus:border-indigo-500 focus:outline-none transition"
+          className="w-full px-4 py-3 border-2 border-[#173658]/20 rounded-xl focus:border-[#173658] focus:outline-none transition bg-white text-[#173658]"
           value={hour}
           onChange={(e) => setHour(e.target.value)}
         >
@@ -131,17 +131,17 @@ export default function SajuForm() {
 
       {/* 양력/음력 선택 */}
       <div>
-        <label className="block text-left text-sm font-semibold text-gray-700 mb-2">
+        <label className="block text-left text-sm font-bold text-[#173658] mb-3">
           생일 구분
         </label>
         <div className="grid grid-cols-2 gap-3">
           <button
             type="button"
             onClick={() => setCalendarType('solar')}
-            className={`px-6 py-3 rounded-xl font-semibold transition ${
+            className={`px-6 py-3 rounded-xl font-bold transition ${
               calendarType === 'solar'
-                ? 'bg-indigo-600 text-white'
-                : 'bg-white border-2 border-gray-200 text-gray-700 hover:border-indigo-500 hover:text-indigo-600'
+                ? 'bg-[#173658] text-white shadow-lg'
+                : 'bg-white border-2 border-[#173658]/20 text-[#173658] hover:border-[#173658] hover:bg-[#F3E7E3]'
             }`}
           >
             양력
@@ -149,10 +149,10 @@ export default function SajuForm() {
           <button
             type="button"
             onClick={() => setCalendarType('lunar')}
-            className={`px-6 py-3 rounded-xl font-semibold transition ${
+            className={`px-6 py-3 rounded-xl font-bold transition ${
               calendarType === 'lunar'
-                ? 'bg-indigo-600 text-white'
-                : 'bg-white border-2 border-gray-200 text-gray-700 hover:border-indigo-500 hover:text-indigo-600'
+                ? 'bg-[#173658] text-white shadow-lg'
+                : 'bg-white border-2 border-[#173658]/20 text-[#173658] hover:border-[#173658] hover:bg-[#F3E7E3]'
             }`}
           >
             음력
@@ -160,12 +160,12 @@ export default function SajuForm() {
         </div>
         {calendarType === 'lunar' && (
           <div className="mt-3">
-            <label className="flex items-center justify-center gap-2 text-sm text-gray-600 cursor-pointer">
+            <label className="flex items-center justify-center gap-2 text-sm text-[#5d6d7e] cursor-pointer">
               <input
                 type="checkbox"
                 checked={isLeapMonth}
                 onChange={(e) => setIsLeapMonth(e.target.checked)}
-                className="w-4 h-4 text-indigo-600 border-gray-300 rounded focus:ring-indigo-500"
+                className="w-4 h-4 text-[#173658] border-gray-300 rounded focus:ring-[#173658]"
               />
               <span>윤달</span>
             </label>
@@ -175,17 +175,17 @@ export default function SajuForm() {
 
       {/* 성별 선택 */}
       <div>
-        <label className="block text-left text-sm font-semibold text-gray-700 mb-2">
+        <label className="block text-left text-sm font-bold text-[#173658] mb-3">
           성별
         </label>
         <div className="grid grid-cols-2 gap-3">
           <button
             type="button"
             onClick={() => setGender('male')}
-            className={`px-6 py-3 rounded-xl font-semibold transition ${
+            className={`px-6 py-3 rounded-xl font-bold transition ${
               gender === 'male'
-                ? 'bg-indigo-600 text-white'
-                : 'bg-white border-2 border-gray-200 text-gray-700 hover:border-indigo-500 hover:text-indigo-600'
+                ? 'bg-[#173658] text-white shadow-lg'
+                : 'bg-white border-2 border-[#173658]/20 text-[#173658] hover:border-[#173658] hover:bg-[#F3E7E3]'
             }`}
           >
             남성
@@ -193,10 +193,10 @@ export default function SajuForm() {
           <button
             type="button"
             onClick={() => setGender('female')}
-            className={`px-6 py-3 rounded-xl font-semibold transition ${
+            className={`px-6 py-3 rounded-xl font-bold transition ${
               gender === 'female'
-                ? 'bg-indigo-600 text-white'
-                : 'bg-white border-2 border-gray-200 text-gray-700 hover:border-indigo-500 hover:text-indigo-600'
+                ? 'bg-[#173658] text-white shadow-lg'
+                : 'bg-white border-2 border-[#173658]/20 text-[#173658] hover:border-[#173658] hover:bg-[#F3E7E3]'
             }`}
           >
             여성
@@ -207,12 +207,12 @@ export default function SajuForm() {
       {/* 제출 버튼 */}
       <button
         type="submit"
-        className="w-full bg-gradient-to-r from-indigo-600 to-purple-600 text-white py-4 rounded-xl text-lg font-bold hover:from-indigo-700 hover:to-purple-700 transition shadow-lg hover:shadow-xl"
+        className="w-full bg-[#173658] hover:bg-[#1e426a] text-white py-4 rounded-xl text-lg font-bold transition shadow-lg hover:shadow-xl hover:scale-[1.02]"
       >
         내 사주 보기 →
       </button>
 
-      <p className="text-sm text-gray-500 text-center">
+      <p className="text-sm text-[#5d6d7e] text-center">
         * 태어난 시간을 정확히 아시면 더 정확한 사주를 확인할 수 있습니다.
       </p>
     </form>
diff --git a/app/fortune/page.tsx b/app/fortune/page.tsx
index d866d70..80ced1e 100644
--- a/app/fortune/page.tsx
+++ b/app/fortune/page.tsx
@@ -1,6 +1,8 @@
 import Link from 'next/link';
 import { calculateSaju } from '@/lib/saju-calculator';
 import PDFButton from '../components/PDFButton';
+import Header from '@/components/Header';
+import Footer from '@/components/Footer';
 
 interface PageProps {
   searchParams: Promise<{
@@ -30,22 +32,27 @@ export default async function FortunePage({ searchParams }: PageProps) {
   const todayMonth = today.getMonth() + 1;
   const todayDay = today.getDate();
 
-  // 오늘의 간지 계산
-  const todayGanzi = calculateSaju(todayYear, todayMonth, todayDay, null, gender);
+  // 오늘의 간지 계산 (시간은 12시로 고정)
+  const todayGanzi = calculateSaju(todayYear, todayMonth, todayDay, 12, gender);
+
+  // 안전하게 stem 접근
+  const todayStem = todayGanzi?.day?.stem || '甲';
+  const todayBranch = todayGanzi?.day?.branch || '子';
+  const userStem = sajuData?.day?.stem || '甲';
 
   // 운세 점수 계산 (간단한 알고리즘)
   const calculateFortuneScore = (category: string): number => {
-    const seed = sajuData.day.stem.charCodeAt(0) + todayGanzi.day.stem.charCodeAt(0) + category.charCodeAt(0);
+    const seed = userStem.charCodeAt(0) + todayStem.charCodeAt(0) + category.charCodeAt(0);
     return 60 + (seed % 40);
   };
 
   const fortuneCategories = [
-    { name: '종합운', icon: '⭐', score: calculateFortuneScore('종합'), color: 'indigo' },
-    { name: '금전운', icon: '💰', score: calculateFortuneScore('금전'), color: 'green' },
-    { name: '애정운', icon: '💕', score: calculateFortuneScore('애정'), color: 'pink' },
-    { name: '건강운', icon: '🏥', score: calculateFortuneScore('건강'), color: 'red' },
-    { name: '직장운', icon: '💼', score: calculateFortuneScore('직장'), color: 'blue' },
-    { name: '학업운', icon: '📚', score: calculateFortuneScore('학업'), color: 'purple' },
+    { name: '종합운', icon: '⭐', score: calculateFortuneScore('종합'), color: 'bg-gradient-to-r from-[#173658] to-[#1e426a]' },
+    { name: '금전운', icon: '💰', score: calculateFortuneScore('금전'), color: 'bg-gradient-to-r from-green-600 to-emerald-600' },
+    { name: '애정운', icon: '💕', score: calculateFortuneScore('애정'), color: 'bg-gradient-to-r from-pink-600 to-rose-600' },
+    { name: '건강운', icon: '🏥', score: calculateFortuneScore('건강'), color: 'bg-gradient-to-r from-red-600 to-orange-600' },
+    { name: '직장운', icon: '💼', score: calculateFortuneScore('직장'), color: 'bg-gradient-to-r from-blue-600 to-cyan-600' },
+    { name: '학업운', icon: '📚', score: calculateFortuneScore('학업'), color: 'bg-gradient-to-r from-purple-600 to-indigo-600' },
   ];
 
   const getScoreText = (score: number): string => {
@@ -92,55 +99,32 @@ export default async function FortunePage({ searchParams }: PageProps) {
   };
 
   return (
-    <div className="min-h-screen bg-gradient-to-br from-indigo-50 via-purple-50 to-pink-50">
-      {/* Navigation */}
-      <nav className="bg-white/80 backdrop-blur-md border-b border-gray-200 sticky top-0 z-50">
-        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-          <div className="flex justify-between items-center h-16">
-            <Link href="/" className="text-2xl font-bold bg-gradient-to-r from-indigo-600 to-purple-600 bg-clip-text text-transparent">
-              🔮 사주보기
-            </Link>
-            <div className="flex gap-4">
-              <Link
-                href={`/result?${new URLSearchParams(params as any).toString()}`}
-                className="text-gray-700 hover:text-indigo-600 transition font-medium"
-              >
-                사주팔자
-              </Link>
-              <Link
-                href="/"
-                className="text-gray-700 hover:text-indigo-600 transition font-medium"
-              >
-                처음으로
-              </Link>
-            </div>
-          </div>
-        </div>
-      </nav>
+    <div className="min-h-screen bg-[#F3E7E3]">
+      <Header />
 
       {/* Content */}
-      <div id="pdf-content" className="max-w-6xl mx-auto px-4 py-12">
+      <div id="pdf-content" className="container-custom pt-24 pb-12">
         {/* Header */}
         <div className="text-center mb-12">
-          <h1 className="text-4xl md:text-5xl font-bold text-gray-900 mb-4">
+          <h1 className="text-3xl md:text-4xl font-bold text-[#173658] mb-4">
             오늘의 운세
           </h1>
-          <p className="text-xl text-gray-600">
-            {todayYear}년 {todayMonth}월 {todayDay}일 ({todayGanzi.day.stem}{todayGanzi.day.branch})
+          <p className="text-xl text-[#5d6d7e]">
+            {todayYear}년 {todayMonth}월 {todayDay}일 ({todayStem}{todayBranch})
           </p>
-          <p className="text-lg text-gray-500 mt-2">
+          <p className="text-lg text-[#5d6d7e] mt-2">
             {sajuData.birthDate.year}년생 {gender === 'male' ? '남성' : '여성'}의 오늘 운세
           </p>
         </div>
 
         {/* 운세 점수 카드들 */}
-        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6 mb-12">
+        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8">
           {fortuneCategories.map((category) => (
-            <div key={category.name} className="bg-white rounded-2xl shadow-lg p-6 hover:shadow-xl transition">
+            <div key={category.name} className="glass-panel-light rounded-2xl p-6 card-hover">
               <div className="flex items-center justify-between mb-4">
                 <div className="flex items-center gap-3">
                   <span className="text-4xl">{category.icon}</span>
-                  <h3 className="text-xl font-bold text-gray-900">{category.name}</h3>
+                  <h3 className="text-xl font-bold text-[#173658]">{category.name}</h3>
                 </div>
                 <span className={`text-2xl font-bold ${getScoreColor(category.score)}`}>
                   {category.score}점
@@ -148,19 +132,19 @@ export default async function FortunePage({ searchParams }: PageProps) {
               </div>
               <div className="w-full bg-gray-200 rounded-full h-3 mb-2">
                 <div
-                  className={`bg-gradient-to-r from-${category.color}-400 to-${category.color}-600 h-3 rounded-full transition-all duration-500`}
+                  className={`${category.color} h-3 rounded-full transition-all duration-500`}
                   style={{ width: `${category.score}%` }}
                 ></div>
               </div>
-              <p className="text-sm text-gray-600 text-right">{getScoreText(category.score)}</p>
+              <p className="text-sm text-[#5d6d7e] text-right font-bold">{getScoreText(category.score)}</p>
             </div>
           ))}
         </div>
 
         {/* 오늘의 한마디 */}
-        <div className="bg-gradient-to-r from-indigo-600 to-purple-600 rounded-3xl shadow-2xl p-8 md:p-12 mb-8 text-white">
-          <h2 className="text-3xl font-bold mb-6 text-center">💬 오늘의 한마디</h2>
-          <p className="text-xl leading-relaxed text-center">
+        <div className="bg-gradient-to-r from-[#173658] to-[#1e426a] rounded-2xl p-8 md:p-12 mb-8 text-white pattern-overlay">
+          <h2 className="text-2xl md:text-3xl font-bold mb-6 text-center">💬 오늘의 한마디</h2>
+          <p className="text-lg md:text-xl leading-relaxed text-center">
             {sajuData.day.element === '木' && '나무가 자라듯 꾸준히 노력하면 좋은 결과가 있을 것입니다. 새로운 시작에 좋은 날입니다.'}
             {sajuData.day.element === '火' && '활발한 기운이 가득한 날입니다. 적극적으로 행동하면 좋은 기회를 잡을 수 있습니다.'}
             {sajuData.day.element === '土' && '안정적인 하루가 될 것입니다. 차근차근 계획을 세우고 실행하면 좋습니다.'}
@@ -170,106 +154,92 @@ export default async function FortunePage({ searchParams }: PageProps) {
         </div>
 
         {/* 행운의 요소들 */}
-        <div className="grid md:grid-cols-3 gap-8 mb-8">
+        <div className="grid md:grid-cols-3 gap-6 mb-8">
           {/* 행운의 방향 */}
-          <div className="bg-white rounded-2xl shadow-lg p-8 text-center">
+          <div className="glass-panel-light rounded-2xl p-8 text-center card-hover">
             <div className="text-5xl mb-4">🧭</div>
-            <h3 className="text-2xl font-bold text-gray-900 mb-3">행운의 방향</h3>
-            <p className="text-3xl font-bold text-indigo-600">{getLuckyDirection(sajuData.day.stem)}</p>
-            <p className="text-sm text-gray-600 mt-2">이 방향으로 외출하면 좋습니다</p>
+            <h3 className="text-2xl font-bold text-[#173658] mb-3">행운의 방향</h3>
+            <p className="text-3xl font-bold text-[#d4af37]">{getLuckyDirection(userStem)}</p>
+            <p className="text-sm text-[#5d6d7e] mt-2">이 방향으로 외출하면 좋습니다</p>
           </div>
 
           {/* 행운의 색깔 */}
-          <div className="bg-white rounded-2xl shadow-lg p-8 text-center">
+          <div className="glass-panel-light rounded-2xl p-8 text-center card-hover">
             <div className="text-5xl mb-4">🎨</div>
-            <h3 className="text-2xl font-bold text-gray-900 mb-3">행운의 색깔</h3>
-            <p className="text-3xl font-bold text-purple-600">{getLuckyColor(sajuData.day.element)}</p>
-            <p className="text-sm text-gray-600 mt-2">이 색깔의 옷을 입으면 좋습니다</p>
+            <h3 className="text-2xl font-bold text-[#173658] mb-3">행운의 색깔</h3>
+            <p className="text-3xl font-bold text-[#d4af37]">{getLuckyColor(sajuData.day.element)}</p>
+            <p className="text-sm text-[#5d6d7e] mt-2">이 색깔의 옷을 입으면 좋습니다</p>
           </div>
 
           {/* 행운의 숫자 */}
-          <div className="bg-white rounded-2xl shadow-lg p-8 text-center">
+          <div className="glass-panel-light rounded-2xl p-8 text-center card-hover">
             <div className="text-5xl mb-4">🎲</div>
-            <h3 className="text-2xl font-bold text-gray-900 mb-3">행운의 숫자</h3>
-            <p className="text-3xl font-bold text-pink-600">{getLuckyNumber(sajuData.day.stem)}</p>
-            <p className="text-sm text-gray-600 mt-2">오늘의 행운을 가져다 줄 숫자</p>
+            <h3 className="text-2xl font-bold text-[#173658] mb-3">행운의 숫자</h3>
+            <p className="text-3xl font-bold text-[#d4af37]">{getLuckyNumber(userStem)}</p>
+            <p className="text-sm text-[#5d6d7e] mt-2">오늘의 행운을 가져다 줄 숫자</p>
           </div>
         </div>
 
         {/* 주의사항 */}
-        <div className="bg-white rounded-2xl shadow-lg p-8 mb-8">
-          <h3 className="text-2xl font-bold text-gray-900 mb-6 flex items-center">
+        <div className="glass-panel-light rounded-2xl p-8 mb-8">
+          <h3 className="text-2xl font-bold text-[#173658] mb-6 flex items-center">
             <span className="text-3xl mr-3">⚠️</span>
             오늘 주의할 점
           </h3>
-          <ul className="space-y-3 text-gray-700">
+          <ul className="space-y-3 text-[#5d6d7e]">
             <li className="flex items-start">
-              <span className="text-indigo-600 mr-2">•</span>
+              <span className="text-[#d4af37] mr-2 font-bold">•</span>
               <span>중요한 결정은 오전보다 오후에 하는 것이 좋습니다.</span>
             </li>
             <li className="flex items-start">
-              <span className="text-indigo-600 mr-2">•</span>
+              <span className="text-[#d4af37] mr-2 font-bold">•</span>
               <span>감정적인 대화는 피하고 침착하게 대응하세요.</span>
             </li>
             <li className="flex items-start">
-              <span className="text-indigo-600 mr-2">•</span>
+              <span className="text-[#d4af37] mr-2 font-bold">•</span>
               <span>건강 관리에 신경 쓰고 무리하지 마세요.</span>
             </li>
           </ul>
         </div>
 
         {/* 다른 메뉴 */}
-        <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
+        <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-4">
           <Link
             href={`/result?${new URLSearchParams(params as any).toString()}`}
-            className="bg-white rounded-xl p-6 shadow-lg hover:shadow-xl transition text-center group"
+            className="glass-panel-light rounded-xl p-6 card-hover text-center"
           >
             <div className="text-4xl mb-3">📜</div>
-            <h3 className="text-xl font-bold text-gray-900 mb-2">사주팔자</h3>
-            <p className="text-gray-600 text-sm">내 사주 다시 보기</p>
+            <h3 className="text-lg font-bold text-[#173658] mb-1">사주팔자</h3>
+            <p className="text-[#5d6d7e] text-sm">내 사주 다시 보기</p>
           </Link>
 
           <Link
             href="/compatibility"
-            className="bg-white rounded-xl p-6 shadow-lg hover:shadow-xl transition text-center group"
+            className="glass-panel-light rounded-xl p-6 card-hover text-center"
           >
             <div className="text-4xl mb-3">💕</div>
-            <h3 className="text-xl font-bold text-gray-900 mb-2">궁합 보기</h3>
-            <p className="text-gray-600 text-sm">두 사람의 궁합 확인</p>
+            <h3 className="text-lg font-bold text-[#173658] mb-1">궁합 보기</h3>
+            <p className="text-[#5d6d7e] text-sm">두 사람의 궁합 확인</p>
           </Link>
 
           <Link
             href="/tojeong"
-            className="bg-white rounded-xl p-6 shadow-lg hover:shadow-xl transition text-center group"
+            className="glass-panel-light rounded-xl p-6 card-hover text-center"
           >
             <div className="text-4xl mb-3">🎋</div>
-            <h3 className="text-xl font-bold text-gray-900 mb-2">토정비결</h3>
-            <p className="text-gray-600 text-sm">한 해의 운세 보기</p>
+            <h3 className="text-lg font-bold text-[#173658] mb-1">토정비결</h3>
+            <p className="text-[#5d6d7e] text-sm">한 해의 운세 보기</p>
           </Link>
 
           <PDFButton
             elementId="pdf-content"
             filename={`오늘의운세_${todayYear}${todayMonth}${todayDay}.pdf`}
-            buttonText="운세 PDF 저장"
+            buttonText="PDF 저장"
           />
         </div>
       </div>
 
-      {/* Footer */}
-      <footer className="bg-gray-900 text-white py-12 px-4 mt-20">
-        <div className="max-w-7xl mx-auto text-center">
-          <div className="text-2xl font-bold mb-4 bg-gradient-to-r from-indigo-400 to-purple-400 bg-clip-text text-transparent">
-            🔮 사주보기
-          </div>
-          <p className="text-gray-400 mb-6">
-            쟁승메이드가 제공하는 무료 사주 서비스
-          </p>
-          <div className="text-sm text-gray-500">
-            <p>문의: bgg8988@gmail.com | <a href="https://jaengseung-made.com" target="_blank" rel="noopener noreferrer" className="hover:text-indigo-400">쟁승메이드</a></p>
-            <p className="mt-2">&copy; 2025 쟁승메이드. All rights reserved.</p>
-          </div>
-        </div>
-      </footer>
+      <Footer />
     </div>
   );
 }
diff --git a/app/globals.css b/app/globals.css
index a2dc41e..1a83843 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -1,26 +1,241 @@
 @import "tailwindcss";
 
+/* 디자인 시스템 컬러 팔레트 */
 :root {
+  /* 메인 컬러 */
+  --color-primary: #173658; /* 딥 네이비 */
+  --color-secondary: #F3E7E3; /* 웜 베이지 */
+
+  /* 서피스 컬러 */
+  --color-surface-dark: #1e426a; /* 약간 밝은 네이비 */
+  --color-surface-darker: #122a45; /* 더 어두운 네이비 */
+
+  /* 액센트 컬러 */
+  --color-accent-gold: #d4af37; /* 골드 포인트 */
+
+  /* 텍스트 컬러 */
+  --color-text-main: #173658;
+  --color-text-muted: #5d6d7e;
+
+  /* 배경 */
   --background: #ffffff;
-  --foreground: #171717;
+  --foreground: #173658;
 }
 
 @theme inline {
+  /* 커스텀 컬러 등록 */
+  --color-primary: #173658;
+  --color-secondary: #F3E7E3;
+  --color-surface-dark: #1e426a;
+  --color-surface-darker: #122a45;
+  --color-accent-gold: #d4af37;
+  --color-text-main: #173658;
+  --color-text-muted: #5d6d7e;
+
   --color-background: var(--background);
   --color-foreground: var(--foreground);
-  --font-sans: var(--font-geist-sans);
-  --font-mono: var(--font-geist-mono);
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --background: #0a0a0a;
-    --foreground: #ededed;
-  }
+  --font-sans: "Pretendard", -apple-system, BlinkMacSystemFont, system-ui, Roboto, sans-serif;
 }
 
 body {
   background: var(--background);
   color: var(--foreground);
-  font-family: Arial, Helvetica, sans-serif;
+  font-family: "Pretendard", -apple-system, BlinkMacSystemFont, system-ui, Roboto, sans-serif;
+}
+
+/* 글래스모피즘 네비게이션 */
+.glass-nav {
+  background: rgba(23, 54, 88, 0.85);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+/* 글래스 패널 (다크) */
+.glass-panel {
+  background: rgba(23, 54, 88, 0.9);
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
+}
+
+/* 글래스 패널 (라이트) */
+.glass-panel-light {
+  background: rgba(255, 255, 255, 0.85);
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+  border: 1px solid rgba(23, 54, 88, 0.1);
+  box-shadow: 0 4px 24px 0 rgba(23, 54, 88, 0.1);
+}
+
+/* 카드 호버 효과 */
+.card-hover {
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  cursor: pointer;
+}
+
+.card-hover:hover {
+  transform: translateY(-4px);
+  box-shadow: 0 12px 40px 0 rgba(23, 54, 88, 0.2);
+}
+
+/* 텍스트 글로우 효과 */
+.text-glow {
+  text-shadow: 0 0 20px rgba(212, 175, 55, 0.5),
+               0 0 40px rgba(212, 175, 55, 0.3);
+}
+
+/* 패턴 오버레이 */
+.pattern-overlay {
+  position: relative;
+  overflow: hidden;
+}
+
+.pattern-overlay::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-image:
+    radial-gradient(circle at 20% 50%, rgba(212, 175, 55, 0.1) 0%, transparent 50%),
+    radial-gradient(circle at 80% 80%, rgba(243, 231, 227, 0.1) 0%, transparent 50%);
+  pointer-events: none;
+}
+
+/* 우주 패턴 배경 */
+.cosmic-pattern {
+  background-color: #173658;
+  background-image:
+    radial-gradient(circle at 10% 20%, rgba(212, 175, 55, 0.15) 0%, transparent 20%),
+    radial-gradient(circle at 90% 80%, rgba(243, 231, 227, 0.1) 0%, transparent 25%),
+    radial-gradient(circle at 50% 50%, rgba(30, 66, 106, 0.5) 0%, transparent 50%);
+  position: relative;
+}
+
+/* 스크롤바 커스터마이징 */
+::-webkit-scrollbar {
+  width: 10px;
+  height: 10px;
+}
+
+::-webkit-scrollbar-track {
+  background: #F3E7E3;
+}
+
+::-webkit-scrollbar-thumb {
+  background: #173658;
+  border-radius: 5px;
+  border: 2px solid #F3E7E3;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: #1e426a;
+}
+
+/* Firefox 스크롤바 */
+* {
+  scrollbar-width: thin;
+  scrollbar-color: #173658 #F3E7E3;
+}
+
+/* 그라데이션 텍스트 */
+.gradient-text {
+  background: linear-gradient(135deg, #173658 0%, #1e426a 50%, #d4af37 100%);
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+/* 버튼 기본 스타일 */
+.btn-primary {
+  background-color: #173658;
+  color: white;
+  padding: 0.75rem 1.5rem;
+  border-radius: 0.5rem;
+  font-weight: 600;
+  transition: all 0.3s ease;
+  border: none;
+  cursor: pointer;
+}
+
+.btn-primary:hover {
+  background-color: #1e426a;
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(23, 54, 88, 0.3);
+}
+
+.btn-secondary {
+  background-color: #F3E7E3;
+  color: #173658;
+  padding: 0.75rem 1.5rem;
+  border-radius: 0.5rem;
+  font-weight: 600;
+  transition: all 0.3s ease;
+  border: 2px solid #173658;
+  cursor: pointer;
+}
+
+.btn-secondary:hover {
+  background-color: #173658;
+  color: white;
+  transform: translateY(-2px);
+}
+
+/* 카드 기본 스타일 */
+.card {
+  background: white;
+  border-radius: 1rem;
+  padding: 1.5rem;
+  box-shadow: 0 4px 24px rgba(23, 54, 88, 0.1);
+}
+
+/* 애니메이션 */
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.fade-in-up {
+  animation: fadeInUp 0.6s ease-out;
+}
+
+@keyframes float {
+  0%, 100% {
+    transform: translateY(0px);
+  }
+  50% {
+    transform: translateY(-10px);
+  }
+}
+
+.float-animation {
+  animation: float 3s ease-in-out infinite;
+}
+
+/* 반응형 컨테이너 */
+.container-custom {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 0 1rem;
+}
+
+@media (min-width: 768px) {
+  .container-custom {
+    padding: 0 2rem;
+  }
+}
+
+@media (min-width: 1024px) {
+  .container-custom {
+    padding: 0 3rem;
+  }
 }
diff --git a/app/layout.tsx b/app/layout.tsx
index daf22c5..6f1cbe5 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,21 +1,16 @@
 
 import type { Metadata } from "next";
-import { Geist, Geist_Mono } from "next/font/google";
 import "./globals.css";
 
-const geistSans = Geist({
-  variable: "--font-geist-sans",
-  subsets: ["latin"],
-});
-
-const geistMono = Geist_Mono({
-  variable: "--font-geist-mono",
-  subsets: ["latin"],
-});
-
 export const metadata: Metadata = {
-  title: "사주보기 - 무료 사주팔자, 운세, 궁합, 토정비결",
-  description: "생년월일로 무료로 사주팔자, 오늘의 운세, 궁합, 토정비결을 확인하세요. 쟁승메이드가 제공하는 정확한 사주 서비스입니다.",
+  title: "사주포춘 - AI가 만난 고대의 지혜 | 사주팔자, 운세, 궁합, 토정비결",
+  description: "전통 역학과 AI 기술의 만남. 생년월일로 정확한 사주팔자, 오늘의 운세, 궁합, 토정비결을 확인하세요. 98% 정확도의 프리미엄 사주 서비스입니다.",
+  keywords: ["사주", "사주팔자", "운세", "궁합", "토정비결", "AI 사주", "무료 사주", "오늘의 운세"],
+  openGraph: {
+    title: "사주포춘 - AI가 만난 고대의 지혜",
+    description: "전통 역학과 AI 기술의 만남. 정확한 사주 분석 서비스",
+    type: "website",
+  },
 };
 
 export default function RootLayout({
@@ -23,11 +18,18 @@ export default function RootLayout({
 }: Readonly<{
   children: React.ReactNode;
 }>) {
-  const kakaoAppKey = process.env.NEXT_PUBLIC_KAKAO_APP_KEY;
-
   return (
     <html lang="ko">
       <head>
+        {/* Pretendard 폰트 로드 */}
+        <link
+          rel="stylesheet"
+          as="style"
+          crossOrigin="anonymous"
+          href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css"
+        />
+
+        {/* 결제 및 소셜 스크립트 */}
         <script src="https://cdn.iamport.kr/v1/iamport.js"></script>
         <script
           src="https://t1.kakaocdn.net/kakao_js_sdk/2.7.0/kakao.min.js"
@@ -36,9 +38,7 @@ export default function RootLayout({
           async
         ></script>
       </head>
-      <body
-        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
-      >
+      <body className="antialiased">
         {children}
       </body>
     </html>
diff --git a/app/login/page.tsx b/app/login/page.tsx
index 02d0a82..5717921 100644
--- a/app/login/page.tsx
+++ b/app/login/page.tsx
@@ -1,9 +1,9 @@
-
 'use client';
 
 import { useState } from 'react';
 import { createBrowserClient } from '@supabase/ssr'
 import { useRouter } from 'next/navigation';
+import Link from 'next/link';
 
 export default function LoginPage() {
     const [email, setEmail] = useState('');
@@ -22,7 +22,6 @@ export default function LoginPage() {
         setLoading(true);
 
         if (isSignUp) {
-            // Sign Up with Password
             const { data, error } = await supabase.auth.signUp({
                 email,
                 password,
@@ -35,11 +34,10 @@ export default function LoginPage() {
             } else if (data.user && data.user.identities && data.user.identities.length === 0) {
                 alert('이미 가입된 이메일입니다. 로그인해주세요.');
             } else {
-                alert('가입이 완료되었습니다! 이메일 인증이 필요할 수 있습니다. 로그인을 시도해주세요.');
-                setIsSignUp(false); // Switch to login mode
+                alert('가입이 완료되었습니다! 이메일 인증 후 로그인해주세요.');
+                setIsSignUp(false);
             }
         } else {
-            // Sign In with Password
             const { error } = await supabase.auth.signInWithPassword({
                 email,
                 password,
@@ -65,97 +63,102 @@ export default function LoginPage() {
     };
 
     return (
-        <div className="min-h-screen bg-gradient-to-br from-indigo-50 to-purple-50 flex items-center justify-center p-4">
-            <div className="bg-white rounded-2xl shadow-xl w-full max-w-md p-8">
-                <div className="text-center mb-8">
-                    <h1 className="text-3xl font-bold text-gray-900 mb-2">
-                        {isSignUp ? '회원가입' : '로그인'}
-                    </h1>
-                    <p className="text-gray-500">사주 기록을 저장하고 언제든 다시 확인하세요</p>
-                </div>
-
-                <form onSubmit={handleAuth} className="space-y-4 mb-6">
-                    <div>
-                        <label htmlFor="email" className="block text-sm font-medium text-gray-700 mb-1">
-                            이메일 주소
-                        </label>
-                        <input
-                            id="email"
-                            type="email"
-                            placeholder="name@example.com"
-                            className="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none transition"
-                            value={email}
-                            onChange={(e) => setEmail(e.target.value)}
-                            required
-                        />
+        <div className="min-h-screen cosmic-pattern flex items-center justify-center p-4">
+            <div className="w-full max-w-md">
+                {/* 로고 */}
+                <Link href="/" className="flex items-center justify-center space-x-2 mb-8">
+                    <div className="w-12 h-12 bg-gradient-to-br from-[#d4af37] to-[#F3E7E3] rounded-lg flex items-center justify-center shadow-lg">
+                        <span className="text-[#173658] text-2xl font-bold">사</span>
                     </div>
-                    <div>
-                        <label htmlFor="password" className="block text-sm font-medium text-gray-700 mb-1">
-                            비밀번호
-                        </label>
-                        <input
-                            id="password"
-                            type="password"
-                            placeholder="••••••••"
-                            className="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none transition"
-                            value={password}
-                            onChange={(e) => setPassword(e.target.value)}
-                            required
-                            minLength={6}
-                        />
+                    <span className="text-white text-2xl font-bold">사주포춘</span>
+                </Link>
+
+                <div className="glass-panel-light rounded-2xl shadow-2xl p-8">
+                    <div className="text-center mb-8">
+                        <h1 className="text-3xl font-bold text-[#173658] mb-2">
+                            {isSignUp ? '회원가입' : '로그인'}
+                        </h1>
+                        <p className="text-[#5d6d7e]">사주 기록을 저장하고 언제든 다시 확인하세요</p>
                     </div>
-                    <button
-                        type="submit"
-                        disabled={loading}
-                        className="w-full bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-3 px-4 rounded-lg transition disabled:opacity-50"
-                    >
-                        {loading ? '처리 중...' : (isSignUp ? '회원가입' : '로그인')}
-                    </button>
-                </form>
 
-                <div className="text-center mb-6">
-                    <button
-                        type="button"
-                        className="text-sm text-indigo-600 hover:text-indigo-800 font-medium"
-                        onClick={() => setIsSignUp(!isSignUp)}
-                    >
-                        {isSignUp ? '이미 계정이 있으신가요? 로그인' : '계정이 없으신가요? 회원가입'}
-                    </button>
-                </div>
+                    <form onSubmit={handleAuth} className="space-y-4 mb-6">
+                        <div>
+                            <label htmlFor="email" className="block text-sm font-bold text-[#173658] mb-2">
+                                이메일 주소
+                            </label>
+                            <input
+                                id="email"
+                                type="email"
+                                placeholder="name@example.com"
+                                className="w-full px-4 py-3 rounded-lg border-2 border-[#173658]/20 focus:ring-2 focus:ring-[#173658] focus:border-[#173658] outline-none transition bg-white"
+                                value={email}
+                                onChange={(e) => setEmail(e.target.value)}
+                                required
+                            />
+                        </div>
+                        <div>
+                            <label htmlFor="password" className="block text-sm font-bold text-[#173658] mb-2">
+                                비밀번호
+                            </label>
+                            <input
+                                id="password"
+                                type="password"
+                                placeholder="••••••••"
+                                className="w-full px-4 py-3 rounded-lg border-2 border-[#173658]/20 focus:ring-2 focus:ring-[#173658] focus:border-[#173658] outline-none transition bg-white"
+                                value={password}
+                                onChange={(e) => setPassword(e.target.value)}
+                                required
+                                minLength={6}
+                            />
+                        </div>
+                        <button
+                            type="submit"
+                            disabled={loading}
+                            className="w-full bg-[#173658] hover:bg-[#1e426a] text-white font-bold py-3 px-4 rounded-lg transition disabled:opacity-50 shadow-lg hover:shadow-xl"
+                        >
+                            {loading ? '처리 중...' : (isSignUp ? '회원가입' : '로그인')}
+                        </button>
+                    </form>
 
-                <div className="relative my-6">
-                    <div className="absolute inset-0 flex items-center">
-                        <div className="w-full border-t border-gray-200"></div>
+                    <div className="text-center mb-6">
+                        <button
+                            type="button"
+                            className="text-sm text-[#173658] hover:text-[#1e426a] font-bold"
+                            onClick={() => setIsSignUp(!isSignUp)}
+                        >
+                            {isSignUp ? '이미 계정이 있으신가요? 로그인' : '계정이 없으신가요? 회원가입'}
+                        </button>
                     </div>
-                    <div className="relative flex justify-center text-sm">
-                        <span className="px-2 bg-white text-gray-500">또는 소셜 로그인</span>
+
+                    <div className="relative my-6">
+                        <div className="absolute inset-0 flex items-center">
+                            <div className="w-full border-t border-[#173658]/20"></div>
+                        </div>
+                        <div className="relative flex justify-center text-sm">
+                            <span className="px-2 bg-white text-[#5d6d7e]">또는 소셜 로그인</span>
+                        </div>
                     </div>
-                </div>
 
-                <div className="grid grid-cols-2 gap-3">
-                    <button
-                        onClick={() => handleSocialLogin('google')}
-                        className="flex items-center justify-center px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50 transition"
-                    >
-                        <span className="ml-2">Google</span>
-                    </button>
-                    <button
-                        onClick={() => handleSocialLogin('kakao')}
-                        className="flex items-center justify-center px-4 py-2 bg-[#FEE500] border border-[#FEE500] rounded-lg hover:bg-[#FDD835] transition"
-                    >
-                        <span className="ml-2 text-[#000000bd]">Kakao</span>
-                    </button>
-                </div>
+                    <div className="grid grid-cols-2 gap-3">
+                        <button
+                            onClick={() => handleSocialLogin('google')}
+                            className="flex items-center justify-center px-4 py-2 border-2 border-[#173658]/20 rounded-lg hover:bg-[#F3E7E3] transition font-medium text-[#173658]"
+                        >
+                            <span>Google</span>
+                        </button>
+                        <button
+                            onClick={() => handleSocialLogin('kakao')}
+                            className="flex items-center justify-center px-4 py-2 bg-[#FEE500] border-2 border-[#FEE500] rounded-lg hover:bg-[#FDD835] transition font-medium"
+                        >
+                            <span className="text-[#000000bd]">Kakao</span>
+                        </button>
+                    </div>
 
-                <div className="mt-6 p-4 bg-yellow-50 rounded-lg text-xs text-yellow-800 border border-yellow-200">
-                    <h4 className="font-bold mb-1">⚠️ 회원가입 후 이메일 인증 필수!</h4>
-                    <p className="mb-2">
-                        Supabase는 기본적으로 이메일 인증을 요구합니다.
-                        가입 후 받은 메일의 링크를 클릭해야 로그인이 가능합니다.
-                    </p>
-                    <p className="font-semibold text-gray-700">
-                        (개발용 팁: Supabase 대시보드 &gt; Authentication &gt; Providers &gt; Email &gt; "Confirm email"를 끄면 인증 없이 바로 로그인 가능)
-                    </p>
+                    <div className="mt-6 text-center">
+                        <Link href="/" className="text-sm text-[#5d6d7e] hover:text-[#173658] transition">
+                            홈으로 돌아가기
+                        </Link>
+                    </div>
                 </div>
             </div>
         </div>
diff --git a/app/page.tsx b/app/page.tsx
index a686931..200ba91 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,232 +1,361 @@
-
 import Link from 'next/link';
-import UserMenu from '@/components/UserMenu';
+import Header from '@/components/Header';
+import Footer from '@/components/Footer';
 
 export default function Home() {
   return (
-    <div className="min-h-screen bg-gray-950 text-white">
-      {/* Navigation */}
-      <nav className="bg-gray-950/80 backdrop-blur-md border-b border-gray-800 sticky top-0 z-50">
-        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-          <div className="flex justify-between items-center h-16">
-            <Link href="/" className="text-2xl font-bold bg-gradient-to-r from-amber-400 to-orange-400 bg-clip-text text-transparent">
-              🔮 사주포춘
-            </Link>
-            <div className="flex items-center space-x-6">
-              <div className="hidden md:flex space-x-6 mr-4">
-                <Link href="/saju" className="text-gray-300 hover:text-amber-400 transition font-medium">사주팔자</Link>
-                <Link href="/compatibility" className="text-gray-300 hover:text-amber-400 transition font-medium">궁합</Link>
-                <Link href="/tojeong" className="text-gray-300 hover:text-amber-400 transition font-medium">토정비결</Link>
-              </div>
-              <UserMenu />
-            </div>
-          </div>
-        </div>
-      </nav>
+    <div className="min-h-screen bg-white">
+      <Header />
 
       {/* Hero Section */}
-      <section className="relative overflow-hidden">
-        {/* Background decorations */}
-        <div className="absolute inset-0 overflow-hidden pointer-events-none">
-          <div className="absolute top-20 left-10 w-72 h-72 bg-amber-500/10 rounded-full blur-3xl"></div>
-          <div className="absolute top-40 right-10 w-96 h-96 bg-purple-500/10 rounded-full blur-3xl"></div>
-          <div className="absolute bottom-20 left-1/3 w-80 h-80 bg-indigo-500/10 rounded-full blur-3xl"></div>
-        </div>
+      <section className="cosmic-pattern pt-32 pb-24 md:pt-40 md:pb-32">
+        <div className="container-custom">
+          <div className="grid lg:grid-cols-2 gap-12 items-center">
+            {/* 왼쪽 텍스트 */}
+            <div className="text-white space-y-8 fade-in-up">
+              <div className="inline-block px-4 py-2 bg-[#F3E7E3] rounded-full">
+                <span className="text-[#173658] text-sm font-bold">AI 명리학 전문 상담</span>
+              </div>
 
-        <div className="relative max-w-7xl mx-auto px-4 pt-24 pb-32 text-center">
-          <div className="inline-block mb-8 px-5 py-2 bg-amber-500/10 border border-amber-500/30 rounded-full text-amber-400 text-sm font-semibold tracking-wide">
-            AI 명리학 전문 상담
-          </div>
+              <h1 className="text-4xl md:text-6xl font-bold leading-tight">
+                AI가 만난<br />
+                <span className="text-glow text-[#d4af37]">고대의 지혜</span>
+              </h1>
 
-          <h1 className="text-5xl md:text-7xl font-bold mb-8 leading-tight">
-            당신의 <span className="bg-gradient-to-r from-amber-400 via-orange-400 to-red-400 bg-clip-text text-transparent">운명</span>을<br />
-            읽어드립니다
-          </h1>
-
-          <p className="text-xl md:text-2xl text-gray-400 mb-16 max-w-3xl mx-auto leading-relaxed">
-            수천 년 전통 명리학의 지혜와 최신 AI 기술이 만나<br className="hidden md:block" />
-            당신만을 위한 깊이 있는 사주 해석을 제공합니다.
-          </p>
-
-          {/* Service Cards */}
-          <div className="grid md:grid-cols-3 gap-6 max-w-5xl mx-auto mb-20">
-            {/* 사주팔자 */}
-            <Link href="/saju" className="group relative bg-gradient-to-br from-gray-900 to-gray-800 border border-gray-700 rounded-3xl p-8 hover:border-amber-500/50 transition-all duration-300 hover:shadow-2xl hover:shadow-amber-500/10 text-left">
-              <div className="text-5xl mb-6">📜</div>
-              <h3 className="text-2xl font-bold text-white mb-3 group-hover:text-amber-400 transition">사주팔자</h3>
-              <p className="text-gray-400 mb-6 leading-relaxed">
-                천간과 지지의 조화로 타고난 성격, 재능, 인생의 흐름을 심층 분석합니다.
+              <p className="text-xl md:text-2xl text-gray-200 leading-relaxed">
+                전통 역학과 AI 기술의 만남<br />
+                당신만을 위한 깊이 있는 사주 해석
               </p>
-              <div className="flex items-center text-amber-400 font-semibold text-sm">
-                <span>무료 감정 시작</span>
-                <svg className="w-4 h-4 ml-2 group-hover:translate-x-1 transition" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" /></svg>
-              </div>
-              <div className="absolute top-4 right-4 px-2 py-1 bg-amber-500/20 text-amber-400 text-xs font-bold rounded-full">인기</div>
-            </Link>
 
-            {/* 궁합 */}
-            <Link href="/compatibility" className="group relative bg-gradient-to-br from-gray-900 to-gray-800 border border-gray-700 rounded-3xl p-8 hover:border-pink-500/50 transition-all duration-300 hover:shadow-2xl hover:shadow-pink-500/10 text-left">
-              <div className="text-5xl mb-6">💕</div>
-              <h3 className="text-2xl font-bold text-white mb-3 group-hover:text-pink-400 transition">궁합 분석</h3>
-              <p className="text-gray-400 mb-6 leading-relaxed">
-                두 사람의 오행 관계와 지지 합충을 분석하여 관계의 조화를 확인합니다.
-              </p>
-              <div className="flex items-center text-pink-400 font-semibold text-sm">
-                <span>궁합 확인하기</span>
-                <svg className="w-4 h-4 ml-2 group-hover:translate-x-1 transition" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" /></svg>
+              <div className="flex flex-wrap gap-4 pt-4">
+                <Link
+                  href="/saju"
+                  className="bg-[#F3E7E3] hover:bg-[#d4af37] text-[#173658] px-8 py-4 rounded-xl text-lg font-bold transition-all shadow-lg hover:shadow-xl hover:scale-105"
+                >
+                  운명 감정 시작하기
+                </Link>
+                <Link
+                  href="/compatibility"
+                  className="bg-white/10 hover:bg-white/20 backdrop-blur-sm text-white px-8 py-4 rounded-xl text-lg font-bold transition-all border border-white/20"
+                >
+                  궁합 보기
+                </Link>
               </div>
-            </Link>
 
-            {/* 토정비결 */}
-            <Link href="/tojeong" className="group relative bg-gradient-to-br from-gray-900 to-gray-800 border border-gray-700 rounded-3xl p-8 hover:border-emerald-500/50 transition-all duration-300 hover:shadow-2xl hover:shadow-emerald-500/10 text-left">
-              <div className="text-5xl mb-6">🎋</div>
-              <h3 className="text-2xl font-bold text-white mb-3 group-hover:text-emerald-400 transition">토정비결</h3>
-              <p className="text-gray-400 mb-6 leading-relaxed">
-                올 한 해의 월별 운세와 카테고리별 운세를 미리 확인하고 준비하세요.
-              </p>
-              <div className="flex items-center text-emerald-400 font-semibold text-sm">
-                <span>올해 운세 보기</span>
-                <svg className="w-4 h-4 ml-2 group-hover:translate-x-1 transition" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" /></svg>
+              {/* 신뢰 배지 */}
+              <div className="flex flex-wrap gap-6 pt-8">
+                <div className="flex items-center space-x-2">
+                  <svg className="w-6 h-6 text-[#d4af37]" fill="currentColor" viewBox="0 0 20 20">
+                    <path fillRule="evenodd" d="M6.267 3.455a3.066 3.066 0 001.745-.723 3.066 3.066 0 013.976 0 3.066 3.066 0 001.745.723 3.066 3.066 0 012.812 2.812c.051.643.304 1.254.723 1.745a3.066 3.066 0 010 3.976 3.066 3.066 0 00-.723 1.745 3.066 3.066 0 01-2.812 2.812 3.066 3.066 0 00-1.745.723 3.066 3.066 0 01-3.976 0 3.066 3.066 0 00-1.745-.723 3.066 3.066 0 01-2.812-2.812 3.066 3.066 0 00-.723-1.745 3.066 3.066 0 010-3.976 3.066 3.066 0 00.723-1.745 3.066 3.066 0 012.812-2.812zm7.44 5.252a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
+                  </svg>
+                  <span className="text-white font-medium">98% 정확도</span>
+                </div>
+                <div className="flex items-center space-x-2">
+                  <svg className="w-6 h-6 text-[#d4af37]" fill="currentColor" viewBox="0 0 20 20">
+                    <path fillRule="evenodd" d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z" clipRule="evenodd" />
+                  </svg>
+                  <span className="text-white font-medium">안전한 보안</span>
+                </div>
+                <div className="flex items-center space-x-2">
+                  <svg className="w-6 h-6 text-[#d4af37]" fill="currentColor" viewBox="0 0 20 20">
+                    <path d="M9 6a3 3 0 11-6 0 3 3 0 016 0zM17 6a3 3 0 11-6 0 3 3 0 016 0zM12.93 17c.046-.327.07-.66.07-1a6.97 6.97 0 00-1.5-4.33A5 5 0 0119 16v1h-6.07zM6 11a5 5 0 015 5v1H1v-1a5 5 0 015-5z" />
+                  </svg>
+                  <span className="text-white font-medium">5,000+ 이용자</span>
+                </div>
               </div>
-            </Link>
-          </div>
-        </div>
-      </section>
-
-      {/* Why Us Section */}
-      <section className="py-24 px-4 bg-gray-900/50">
-        <div className="max-w-6xl mx-auto">
-          <div className="text-center mb-16">
-            <h2 className="text-4xl font-bold mb-4">왜 <span className="text-amber-400">사주포춘</span>인가요?</h2>
-            <p className="text-xl text-gray-400">다른 곳에서는 경험할 수 없는 차별화된 사주 서비스</p>
-          </div>
-
-          <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
-            <div className="text-center">
-              <div className="w-16 h-16 bg-amber-500/10 rounded-2xl flex items-center justify-center mx-auto mb-5">
-                <span className="text-3xl">🧠</span>
-              </div>
-              <h3 className="text-lg font-bold mb-2">AI 심층 분석</h3>
-              <p className="text-gray-400 text-sm leading-relaxed">단순 공식이 아닌, AI가 천간·지지·십성의 복합 관계를 해석합니다.</p>
             </div>
-            <div className="text-center">
-              <div className="w-16 h-16 bg-purple-500/10 rounded-2xl flex items-center justify-center mx-auto mb-5">
-                <span className="text-3xl">📚</span>
+
+            {/* 오른쪽 장식 카드 */}
+            <div className="hidden lg:block">
+              <div className="relative">
+                <div className="glass-panel rounded-3xl p-8 float-animation">
+                  <div className="space-y-6">
+                    <div className="flex items-center space-x-3">
+                      <div className="w-12 h-12 bg-[#d4af37] rounded-full flex items-center justify-center">
+                        <span className="text-white text-xl font-bold">木</span>
+                      </div>
+                      <div>
+                        <p className="text-white font-bold">오행 균형 분석</p>
+                        <p className="text-gray-300 text-sm">정밀한 사주 계산</p>
+                      </div>
+                    </div>
+                    <div className="flex items-center space-x-3">
+                      <div className="w-12 h-12 bg-[#1e426a] rounded-full flex items-center justify-center">
+                        <span className="text-white text-xl font-bold">AI</span>
+                      </div>
+                      <div>
+                        <p className="text-white font-bold">AI 심층 해석</p>
+                        <p className="text-gray-300 text-sm">개인 맞춤 분석</p>
+                      </div>
+                    </div>
+                    <div className="flex items-center space-x-3">
+                      <div className="w-12 h-12 bg-[#F3E7E3] rounded-full flex items-center justify-center">
+                        <span className="text-[#173658] text-xl font-bold">⚡</span>
+                      </div>
+                      <div>
+                        <p className="text-white font-bold">즉시 결과</p>
+                        <p className="text-gray-300 text-sm">실시간 분석 제공</p>
+                      </div>
+                    </div>
+                  </div>
+                </div>
               </div>
-              <h3 className="text-lg font-bold mb-2">전통 명리학 기반</h3>
-              <p className="text-gray-400 text-sm leading-relaxed">수천 년 역사의 사주명리학 이론을 정확하게 구현했습니다.</p>
-            </div>
-            <div className="text-center">
-              <div className="w-16 h-16 bg-pink-500/10 rounded-2xl flex items-center justify-center mx-auto mb-5">
-                <span className="text-3xl">🔒</span>
-              </div>
-              <h3 className="text-lg font-bold mb-2">평생 보관</h3>
-              <p className="text-gray-400 text-sm leading-relaxed">한 번 열람한 결과는 평생 다시 볼 수 있어요. 재결제 없이.</p>
-            </div>
-            <div className="text-center">
-              <div className="w-16 h-16 bg-emerald-500/10 rounded-2xl flex items-center justify-center mx-auto mb-5">
-                <span className="text-3xl">⚡</span>
-              </div>
-              <h3 className="text-lg font-bold mb-2">즉시 결과</h3>
-              <p className="text-gray-400 text-sm leading-relaxed">생년월일 입력 즉시 사주팔자와 대운을 무료로 확인할 수 있습니다.</p>
             </div>
           </div>
         </div>
       </section>
 
-      {/* Testimonial / Trust Section */}
-      <section className="py-24 px-4">
-        <div className="max-w-4xl mx-auto text-center">
-          <div className="bg-gradient-to-br from-gray-900 to-gray-800 border border-gray-700 rounded-3xl p-12">
-            <div className="text-6xl mb-6">✨</div>
-            <p className="text-2xl md:text-3xl font-bold mb-4 leading-relaxed">
-              &ldquo;소름 돋을 정도로 정확해요&rdquo;
+      {/* 서비스 카드 섹션 */}
+      <section className="bg-[#F3E7E3] py-20">
+        <div className="container-custom">
+          <div className="text-center mb-12">
+            <h2 className="text-3xl md:text-4xl font-bold text-[#173658] mb-4">
+              프리미엄 사주 서비스
+            </h2>
+            <p className="text-lg text-[#5d6d7e]">
+              당신이 원하는 모든 운세를 한 곳에서
             </p>
-            <p className="text-gray-400 text-lg mb-8">
-              이미 수천 명이 사주포춘으로 자신의 운명을 확인했습니다.
-            </p>
-            <div className="flex justify-center gap-8 text-center">
-              <div>
-                <div className="text-3xl font-bold text-amber-400">5,000+</div>
-                <div className="text-sm text-gray-500 mt-1">누적 분석</div>
+          </div>
+
+          <div className="grid md:grid-cols-3 gap-8">
+            {/* 사주 분석 카드 */}
+            <Link href="/saju" className="glass-panel-light rounded-2xl p-8 card-hover">
+              <div className="text-center">
+                <div className="w-16 h-16 bg-[#122a45] rounded-2xl flex items-center justify-center mx-auto mb-6">
+                  <svg className="w-8 h-8 text-[#d4af37]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
+                  </svg>
+                </div>
+                <h3 className="text-2xl font-bold text-[#173658] mb-3">사주 분석</h3>
+                <p className="text-[#5d6d7e] mb-6 leading-relaxed">
+                  천간과 지지의 조화로 타고난 성격, 재능, 인생의 흐름을 심층 분석합니다
+                </p>
+                <div className="space-y-2 mb-6 text-sm">
+                  <div className="flex items-center justify-center space-x-2">
+                    <svg className="w-4 h-4 text-[#d4af37]" fill="currentColor" viewBox="0 0 20 20">
+                      <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
+                    </svg>
+                    <span className="text-[#173658]">기본 사주 분석 무료</span>
+                  </div>
+                  <div className="flex items-center justify-center space-x-2">
+                    <svg className="w-4 h-4 text-[#d4af37]" fill="currentColor" viewBox="0 0 20 20">
+                      <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
+                    </svg>
+                    <span className="text-[#173658]">AI 해석 10토큰</span>
+                  </div>
+                </div>
+                <div className="inline-flex items-center text-[#173658] font-bold">
+                  <span>시작하기</span>
+                  <svg className="w-5 h-5 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 7l5 5m0 0l-5 5m5-5H6" />
+                  </svg>
+                </div>
+                <div className="absolute top-4 right-4 px-3 py-1 bg-[#d4af37] text-white text-xs font-bold rounded-full">
+                  인기
+                </div>
               </div>
-              <div className="w-px bg-gray-700"></div>
-              <div>
-                <div className="text-3xl font-bold text-amber-400">4.8</div>
-                <div className="text-sm text-gray-500 mt-1">만족도</div>
+            </Link>
+
+            {/* 궁합 카드 */}
+            <Link href="/compatibility" className="glass-panel-light rounded-2xl p-8 card-hover">
+              <div className="text-center">
+                <div className="w-16 h-16 bg-[#122a45] rounded-2xl flex items-center justify-center mx-auto mb-6">
+                  <svg className="w-8 h-8 text-[#d4af37]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
+                  </svg>
+                </div>
+                <h3 className="text-2xl font-bold text-[#173658] mb-3">궁합 분석</h3>
+                <p className="text-[#5d6d7e] mb-6 leading-relaxed">
+                  두 사람의 오행 관계와 지지 합충을 분석하여 관계의 조화를 확인합니다
+                </p>
+                <div className="space-y-2 mb-6 text-sm">
+                  <div className="flex items-center justify-center space-x-2">
+                    <svg className="w-4 h-4 text-[#d4af37]" fill="currentColor" viewBox="0 0 20 20">
+                      <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
+                    </svg>
+                    <span className="text-[#173658]">종합 궁합 점수</span>
+                  </div>
+                  <div className="flex items-center justify-center space-x-2">
+                    <svg className="w-4 h-4 text-[#d4af37]" fill="currentColor" viewBox="0 0 20 20">
+                      <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
+                    </svg>
+                    <span className="text-[#173658]">15토큰</span>
+                  </div>
+                </div>
+                <div className="inline-flex items-center text-[#173658] font-bold">
+                  <span>궁합 확인하기</span>
+                  <svg className="w-5 h-5 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 7l5 5m0 0l-5 5m5-5H6" />
+                  </svg>
+                </div>
               </div>
-              <div className="w-px bg-gray-700"></div>
-              <div>
-                <div className="text-3xl font-bold text-amber-400">97%</div>
-                <div className="text-sm text-gray-500 mt-1">정확도 체감</div>
+            </Link>
+
+            {/* 토정비결 카드 */}
+            <Link href="/tojeong" className="glass-panel-light rounded-2xl p-8 card-hover">
+              <div className="text-center">
+                <div className="w-16 h-16 bg-[#122a45] rounded-2xl flex items-center justify-center mx-auto mb-6">
+                  <svg className="w-8 h-8 text-[#d4af37]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
+                  </svg>
+                </div>
+                <h3 className="text-2xl font-bold text-[#173658] mb-3">토정비결</h3>
+                <p className="text-[#5d6d7e] mb-6 leading-relaxed">
+                  올 한 해의 월별 운세와 카테고리별 운세를 미리 확인하고 준비하세요
+                </p>
+                <div className="space-y-2 mb-6 text-sm">
+                  <div className="flex items-center justify-center space-x-2">
+                    <svg className="w-4 h-4 text-[#d4af37]" fill="currentColor" viewBox="0 0 20 20">
+                      <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
+                    </svg>
+                    <span className="text-[#173658]">월별 운세 12개월</span>
+                  </div>
+                  <div className="flex items-center justify-center space-x-2">
+                    <svg className="w-4 h-4 text-[#d4af37]" fill="currentColor" viewBox="0 0 20 20">
+                      <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
+                    </svg>
+                    <span className="text-[#173658]">5토큰</span>
+                  </div>
+                </div>
+                <div className="inline-flex items-center text-[#173658] font-bold">
+                  <span>올해 운세 보기</span>
+                  <svg className="w-5 h-5 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 7l5 5m0 0l-5 5m5-5H6" />
+                  </svg>
+                </div>
               </div>
+            </Link>
+          </div>
+        </div>
+      </section>
+
+      {/* 특징 배너 */}
+      <section className="bg-white py-20">
+        <div className="container-custom">
+          <div className="grid grid-cols-2 lg:grid-cols-4 gap-8">
+            <div className="text-center">
+              <div className="w-16 h-16 bg-[#F3E7E3] rounded-2xl flex items-center justify-center mx-auto mb-4">
+                <svg className="w-8 h-8 text-[#173658]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
+                </svg>
+              </div>
+              <h3 className="text-lg font-bold text-[#173658] mb-2">전통 역학</h3>
+              <p className="text-sm text-[#5d6d7e]">수천 년 역사의<br />정통 사주명리학</p>
+            </div>
+
+            <div className="text-center">
+              <div className="w-16 h-16 bg-[#F3E7E3] rounded-2xl flex items-center justify-center mx-auto mb-4">
+                <svg className="w-8 h-8 text-[#173658]" 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>
+              <h3 className="text-lg font-bold text-[#173658] mb-2">AI 엔진</h3>
+              <p className="text-sm text-[#5d6d7e]">최첨단 AI가<br />심층 해석</p>
+            </div>
+
+            <div className="text-center">
+              <div className="w-16 h-16 bg-[#F3E7E3] rounded-2xl flex items-center justify-center mx-auto mb-4">
+                <svg className="w-8 h-8 text-[#173658]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
+                </svg>
+              </div>
+              <h3 className="text-lg font-bold text-[#173658] mb-2">즉시 결과</h3>
+              <p className="text-sm text-[#5d6d7e]">입력 즉시<br />실시간 분석</p>
+            </div>
+
+            <div className="text-center">
+              <div className="w-16 h-16 bg-[#F3E7E3] rounded-2xl flex items-center justify-center mx-auto mb-4">
+                <svg className="w-8 h-8 text-[#173658]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z" />
+                </svg>
+              </div>
+              <h3 className="text-lg font-bold text-[#173658] mb-2">쉬운 해석</h3>
+              <p className="text-sm text-[#5d6d7e]">누구나 이해하기<br />쉬운 설명</p>
             </div>
           </div>
         </div>
       </section>
 
-      {/* CTA Section */}
-      <section className="py-24 px-4">
-        <div className="max-w-4xl mx-auto text-center">
-          <h2 className="text-4xl md:text-5xl font-bold mb-6">
-            지금 바로 운명을 확인하세요
-          </h2>
-          <p className="text-xl text-gray-400 mb-10">
-            생년월일만 입력하면 무료로 사주팔자를 확인할 수 있습니다.
-          </p>
-          <div className="flex flex-wrap justify-center gap-4">
-            <Link
-              href="/saju"
-              className="inline-flex items-center gap-2 bg-gradient-to-r from-amber-500 to-orange-500 text-gray-900 px-8 py-4 rounded-2xl text-lg font-bold hover:from-amber-400 hover:to-orange-400 transition shadow-lg shadow-amber-500/25 hover:shadow-xl hover:shadow-amber-500/30"
-            >
-              무료 사주 보기
-              <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 7l5 5m0 0l-5 5m5-5H6" /></svg>
-            </Link>
-            <Link
-              href="/compatibility"
-              className="inline-flex items-center gap-2 bg-gray-800 text-white px-8 py-4 rounded-2xl text-lg font-bold hover:bg-gray-700 transition border border-gray-700"
-            >
-              궁합 확인하기
-            </Link>
-          </div>
-        </div>
-      </section>
-
-      {/* Footer */}
-      <footer className="bg-gray-900 border-t border-gray-800 py-12 px-4">
-        <div className="max-w-7xl mx-auto">
-          <div className="grid md:grid-cols-3 gap-8 mb-8">
-            <div>
-              <div className="text-2xl font-bold mb-4 bg-gradient-to-r from-amber-400 to-orange-400 bg-clip-text text-transparent">
-                🔮 사주포춘
-              </div>
-              <p className="text-gray-500 text-sm leading-relaxed">
-                전통 명리학과 AI 기술의 결합으로<br />
-                가장 정확한 사주 서비스를 제공합니다.
+      {/* CTA 섹션 */}
+      <section className="bg-[#173658] py-24 pattern-overlay">
+        <div className="container-custom">
+          <div className="grid lg:grid-cols-2 gap-12 items-center">
+            <div className="text-white space-y-6">
+              <h2 className="text-4xl md:text-5xl font-bold leading-tight">
+                우주의 비밀을<br />
+                <span className="text-[#d4af37]">풀어보세요</span>
+              </h2>
+              <p className="text-xl text-gray-200 leading-relaxed">
+                당신의 생년월일에 숨겨진 운명의 코드.<br />
+                지금 바로 확인해보세요.
               </p>
-            </div>
-            <div>
-              <h4 className="text-sm font-bold text-gray-300 mb-4 tracking-wide">서비스</h4>
-              <div className="space-y-2">
-                <Link href="/saju" className="block text-gray-500 hover:text-amber-400 transition text-sm">사주팔자</Link>
-                <Link href="/compatibility" className="block text-gray-500 hover:text-amber-400 transition text-sm">궁합 분석</Link>
-                <Link href="/tojeong" className="block text-gray-500 hover:text-amber-400 transition text-sm">토정비결</Link>
+              <div className="flex flex-wrap gap-4 pt-4">
+                <Link
+                  href="/saju"
+                  className="bg-[#d4af37] hover:bg-[#F3E7E3] text-[#173658] px-8 py-4 rounded-xl text-lg font-bold transition-all shadow-lg hover:shadow-xl inline-flex items-center space-x-2"
+                >
+                  <span>무료로 시작하기</span>
+                  <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 7l5 5m0 0l-5 5m5-5H6" />
+                  </svg>
+                </Link>
+              </div>
+
+              {/* 통계 */}
+              <div className="grid grid-cols-3 gap-6 pt-8">
+                <div>
+                  <div className="text-3xl font-bold text-[#d4af37]">5,000+</div>
+                  <div className="text-sm text-gray-300 mt-1">누적 분석</div>
+                </div>
+                <div>
+                  <div className="text-3xl font-bold text-[#d4af37]">98%</div>
+                  <div className="text-sm text-gray-300 mt-1">정확도</div>
+                </div>
+                <div>
+                  <div className="text-3xl font-bold text-[#d4af37]">4.8</div>
+                  <div className="text-sm text-gray-300 mt-1">만족도</div>
+                </div>
               </div>
             </div>
-            <div>
-              <h4 className="text-sm font-bold text-gray-300 mb-4 tracking-wide">고객지원</h4>
-              <div className="space-y-2">
-                <p className="text-gray-500 text-sm">문의: bgg8988@gmail.com</p>
-                <a href="https://jaengseung-made.com" target="_blank" rel="noopener noreferrer" className="block text-gray-500 hover:text-amber-400 transition text-sm">쟁승메이드</a>
-                <Link href="/mypage" className="block text-gray-500 hover:text-amber-400 transition text-sm">마이페이지</Link>
+
+            {/* 오른쪽 이미지 카드 */}
+            <div className="hidden lg:block">
+              <div className="glass-panel rounded-3xl p-8 space-y-4">
+                <div className="bg-[#F3E7E3] rounded-2xl p-6">
+                  <h4 className="text-[#173658] font-bold text-lg mb-2">오늘의 인사이트</h4>
+                  <p className="text-[#5d6d7e] text-sm leading-relaxed">
+                    "목(木) 기운이 강한 당신, 오늘은 새로운 시작을 위한 최적의 날입니다."
+                  </p>
+                </div>
+                <div className="grid grid-cols-2 gap-4">
+                  <div className="bg-white/10 rounded-xl p-4 text-center">
+                    <div className="text-2xl mb-2">🌟</div>
+                    <div className="text-white text-sm font-bold">종합운</div>
+                    <div className="text-[#d4af37] text-xs">85점</div>
+                  </div>
+                  <div className="bg-white/10 rounded-xl p-4 text-center">
+                    <div className="text-2xl mb-2">💰</div>
+                    <div className="text-white text-sm font-bold">재물운</div>
+                    <div className="text-[#d4af37] text-xs">92점</div>
+                  </div>
+                  <div className="bg-white/10 rounded-xl p-4 text-center">
+                    <div className="text-2xl mb-2">❤️</div>
+                    <div className="text-white text-sm font-bold">애정운</div>
+                    <div className="text-[#d4af37] text-xs">78점</div>
+                  </div>
+                  <div className="bg-white/10 rounded-xl p-4 text-center">
+                    <div className="text-2xl mb-2">💼</div>
+                    <div className="text-white text-sm font-bold">직업운</div>
+                    <div className="text-[#d4af37] text-xs">88점</div>
+                  </div>
+                </div>
               </div>
             </div>
           </div>
-          <div className="border-t border-gray-800 pt-8 text-center text-sm text-gray-600">
-            <p>&copy; 2025 쟁승메이드. All rights reserved.</p>
-          </div>
         </div>
-      </footer>
+      </section>
+
+      <Footer />
     </div>
   );
 }
diff --git a/app/result/page.tsx b/app/result/page.tsx
index 6b1c480..a996230 100644
--- a/app/result/page.tsx
+++ b/app/result/page.tsx
@@ -1,9 +1,9 @@
-
 import { calculateSaju } from '@/lib/saju-calculator';
 import Link from 'next/link';
 import PDFButton from '../components/PDFButton';
 import ShareButtons from '../components/ShareButtons';
-import UserMenu from '@/components/UserMenu';
+import Header from '@/components/Header';
+import Footer from '@/components/Footer';
 import { calculateDaeun, getCurrentDaeun, getDaeunDescription } from '@/lib/daeun-calculator';
 import { getCurrentSolarTerm, getSolarTermName, getSolarTermMonthBranch } from '@/lib/solar-terms';
 import { EARTHLY_BRANCHES_KR, FIVE_ELEMENTS_KR, FIVE_ELEMENTS } from '@/lib/saju-calculator';
@@ -63,482 +63,512 @@ export default async function ResultPage({ searchParams }: PageProps) {
   const currentYear = new Date().getFullYear();
   const currentDaeun = getCurrentDaeun(daeunList, currentYear);
 
-  // 오행 색상 매핑
+  // 오행 색상 매핑 (새 디자인)
   const elementColors: { [key: string]: string } = {
-    '木': 'text-green-600', '火': 'text-red-500', '土': 'text-yellow-600',
-    '金': 'text-gray-500', '水': 'text-blue-600',
+    '木': 'text-green-700', '火': 'text-red-600', '土': 'text-yellow-700',
+    '金': 'text-[#d4af37]', '水': 'text-blue-700',
   };
   const elementBgColors: { [key: string]: string } = {
-    '木': 'bg-green-100 border-green-300', '火': 'bg-red-100 border-red-300',
-    '土': 'bg-yellow-100 border-yellow-300', '金': 'bg-gray-100 border-gray-300',
-    '水': 'bg-blue-100 border-blue-300',
+    '木': 'bg-green-50 border-green-400', '火': 'bg-red-50 border-red-400',
+    '土': 'bg-yellow-50 border-yellow-400', '金': 'bg-[#F3E7E3] border-[#d4af37]',
+    '水': 'bg-blue-50 border-blue-400',
   };
 
+  // 띠 계산
+  const zodiacAnimals = ['쥐', '소', '호랑이', '토끼', '용', '뱀', '말', '양', '원숭이', '닭', '개', '돼지'];
+  const zodiacIndex = (yearNum - 4) % 12;
+  const zodiacAnimal = zodiacAnimals[zodiacIndex >= 0 ? zodiacIndex : zodiacIndex + 12];
+
   return (
-    <div className="min-h-screen bg-gradient-to-br from-indigo-50 via-purple-50 to-pink-50">
-      {/* Navigation */}
-      <nav className="bg-white/80 backdrop-blur-md border-b border-gray-200 sticky top-0 z-50">
-        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-          <div className="flex justify-between items-center h-16">
-            <Link href="/" className="text-2xl font-bold bg-gradient-to-r from-indigo-600 to-purple-600 bg-clip-text text-transparent">
-              사주보기
-            </Link>
-            <div className="flex items-center space-x-4">
-              <Link href="/" className="text-gray-700 hover:text-indigo-600 transition font-medium">
-                다시 보기
-              </Link>
-              <UserMenu />
+    <div className="min-h-screen bg-[#F3E7E3]">
+      <Header />
+
+      {/* 2컬럼 레이아웃 */}
+      <div className="container-custom pt-24 pb-12">
+        <div className="grid lg:grid-cols-[300px_1fr] gap-8">
+          {/* 사이드바 - 입력 정보 */}
+          <aside className="lg:sticky lg:top-24 h-fit">
+            <div className="glass-panel rounded-2xl p-6 text-white">
+              <h2 className="text-xl font-bold mb-6 text-center pb-4 border-b border-white/20">
+                기본 정보
+              </h2>
+
+              <div className="space-y-4">
+                <div>
+                  <div className="text-sm text-gray-300 mb-1">생년월일</div>
+                  <div className="font-bold">
+                    {isLunar ? (
+                      <div>
+                        <div className="text-lg">음력 {inputYear}.{inputMonth}.{inputDay}</div>
+                        {isLeap && <div className="text-xs text-[#d4af37]">(윤달)</div>}
+                        <div className="text-xs text-gray-300 mt-1">
+                          양력 {yearNum}.{monthNum}.{dayNum}
+                        </div>
+                      </div>
+                    ) : (
+                      <div className="text-lg">{yearNum}.{monthNum}.{dayNum}</div>
+                    )}
+                  </div>
+                </div>
+
+                {hourNum !== null && (
+                  <div>
+                    <div className="text-sm text-gray-300 mb-1">태어난 시간</div>
+                    <div className="font-bold text-lg">{hourNum}시</div>
+                  </div>
+                )}
+
+                <div>
+                  <div className="text-sm text-gray-300 mb-1">성별</div>
+                  <div className="font-bold text-lg">{gender === 'male' ? '남성' : '여성'}</div>
+                </div>
+
+                <div>
+                  <div className="text-sm text-gray-300 mb-1">띠</div>
+                  <div className="font-bold text-lg">{zodiacAnimal}띠</div>
+                </div>
+
+                <div>
+                  <div className="text-sm text-gray-300 mb-1">일간</div>
+                  <div className="font-bold text-2xl text-[#d4af37]">
+                    {sajuData.day.stem} ({sajuData.day.stemKr})
+                  </div>
+                  <div className="text-sm mt-1">{FIVE_ELEMENTS_KR[sajuData.day.element as keyof typeof FIVE_ELEMENTS_KR]}({sajuData.day.element})</div>
+                </div>
+              </div>
+
+              {/* 빠른 액션 */}
+              <div className="mt-6 pt-6 border-t border-white/20 space-y-3">
+                <Link
+                  href="/"
+                  className="block w-full text-center bg-white/20 hover:bg-white/30 backdrop-blur-sm text-white px-4 py-2 rounded-lg transition-all font-medium text-sm"
+                >
+                  다시 보기
+                </Link>
+                <Link
+                  href="/compatibility"
+                  className="block w-full text-center bg-[#d4af37] hover:bg-[#F3E7E3] text-[#173658] px-4 py-2 rounded-lg transition-all font-medium text-sm"
+                >
+                  궁합 확인
+                </Link>
+              </div>
             </div>
-          </div>
-        </div>
-      </nav>
+          </aside>
 
-      {/* Result Content */}
-      <div id="pdf-content" className="max-w-6xl mx-auto px-4 py-12">
-        {/* Header */}
-        <div className="text-center mb-12">
-          <h1 className="text-4xl md:text-5xl font-bold text-gray-900 mb-4">
-            내 사주팔자
-          </h1>
-          <p className="text-xl text-gray-600">
-            {isLunar ? (
-              <>
-                음력 {inputYear}년 {inputMonth}월 {inputDay}일{isLeap && ' (윤달)'} {hourNum !== null && `${hourNum}시`}
-                <br />
-                <span className="text-base text-gray-500">
-                  (양력 {yearNum}년 {monthNum}월 {dayNum}일)
-                </span>
-              </>
-            ) : (
-              <>
-                {yearNum}년 {monthNum}월 {dayNum}일 {hourNum !== null && `${hourNum}시`}
-              </>
-            )}
-            {gender === 'male' ? ' 남성' : ' 여성'}
-          </p>
-        </div>
+          {/* 메인 콘텐츠 */}
+          <main id="pdf-content">
+            {/* 페이지 헤더 */}
+            <div className="text-center mb-8">
+              <h1 className="text-3xl md:text-4xl font-bold text-[#173658] mb-3">
+                사주팔자 감정서
+              </h1>
+              <p className="text-[#5d6d7e]">
+                전통 명리학과 AI 기술의 만남
+              </p>
+            </div>
 
-        {/* 사주팔자 표 */}
-        <div className="bg-white rounded-3xl shadow-2xl p-8 md:p-12 mb-8">
-          <h2 className="text-3xl font-bold text-gray-900 mb-8 text-center">사주팔자 (四柱八字)</h2>
+            {/* 사주팔자 표 */}
+            <div className="glass-panel-light rounded-2xl p-6 md:p-8 mb-6">
+              <h2 className="text-2xl font-bold text-[#173658] mb-6 text-center">사주팔자 (四柱八字)</h2>
 
-          <div className="overflow-x-auto">
-            <table className="w-full border-collapse">
-              <thead>
-                <tr className="bg-gradient-to-r from-indigo-600 to-purple-600 text-white">
-                  <th className="py-4 px-6 text-center font-bold text-lg">구분</th>
-                  {sajuData.hour && <th className="py-4 px-6 text-center font-bold text-lg">시주 (時柱)</th>}
-                  <th className="py-4 px-6 text-center font-bold text-lg">일주 (日柱)</th>
-                  <th className="py-4 px-6 text-center font-bold text-lg">월주 (月柱)</th>
-                  <th className="py-4 px-6 text-center font-bold text-lg">년주 (年柱)</th>
-                </tr>
-              </thead>
-              <tbody>
-                {/* 천간 */}
-                <tr className="border-b border-gray-200 hover:bg-indigo-50 transition">
-                  <td className="py-4 px-6 text-center font-semibold text-gray-700">천간 (天干)</td>
-                  {sajuData.hour && (
-                    <td className="py-4 px-6 text-center">
-                      <div className="text-3xl font-bold text-indigo-600">{sajuData.hour.stem}</div>
-                      <div className="text-sm text-gray-600 mt-1">{sajuData.hour.stemKr}</div>
-                    </td>
+              <div className="overflow-x-auto">
+                <table className="w-full border-collapse">
+                  <thead>
+                    <tr className="bg-[#173658] text-white">
+                      <th className="py-3 px-4 text-center font-bold">구분</th>
+                      {sajuData.hour && <th className="py-3 px-4 text-center font-bold">시주</th>}
+                      <th className="py-3 px-4 text-center font-bold">일주</th>
+                      <th className="py-3 px-4 text-center font-bold">월주</th>
+                      <th className="py-3 px-4 text-center font-bold">년주</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {/* 천간 */}
+                    <tr className="border-b border-gray-200">
+                      <td className="py-3 px-4 text-center font-semibold text-[#173658] bg-[#F3E7E3]">천간</td>
+                      {sajuData.hour && (
+                        <td className="py-3 px-4 text-center">
+                          <div className="text-2xl font-bold text-[#173658]">{sajuData.hour.stem}</div>
+                          <div className="text-xs text-[#5d6d7e] mt-1">{sajuData.hour.stemKr}</div>
+                        </td>
+                      )}
+                      <td className="py-3 px-4 text-center bg-[#d4af37]/10">
+                        <div className="text-2xl font-bold text-[#173658]">{sajuData.day.stem}</div>
+                        <div className="text-xs text-[#5d6d7e] mt-1">{sajuData.day.stemKr}</div>
+                        <div className="text-xs text-[#d4af37] font-bold mt-1">일간</div>
+                      </td>
+                      <td className="py-3 px-4 text-center">
+                        <div className="text-2xl font-bold text-[#173658]">{sajuData.month.stem}</div>
+                        <div className="text-xs text-[#5d6d7e] mt-1">{sajuData.month.stemKr}</div>
+                      </td>
+                      <td className="py-3 px-4 text-center">
+                        <div className="text-2xl font-bold text-[#173658]">{sajuData.year.stem}</div>
+                        <div className="text-xs text-[#5d6d7e] mt-1">{sajuData.year.stemKr}</div>
+                      </td>
+                    </tr>
+
+                    {/* 지지 */}
+                    <tr className="border-b border-gray-200">
+                      <td className="py-3 px-4 text-center font-semibold text-[#173658] bg-[#F3E7E3]">지지</td>
+                      {sajuData.hour && (
+                        <td className="py-3 px-4 text-center">
+                          <div className="text-2xl font-bold text-[#173658]">{sajuData.hour.branch}</div>
+                          <div className="text-xs text-[#5d6d7e] mt-1">{sajuData.hour.branchKr}</div>
+                        </td>
+                      )}
+                      <td className="py-3 px-4 text-center bg-[#d4af37]/10">
+                        <div className="text-2xl font-bold text-[#173658]">{sajuData.day.branch}</div>
+                        <div className="text-xs text-[#5d6d7e] mt-1">{sajuData.day.branchKr}</div>
+                      </td>
+                      <td className="py-3 px-4 text-center">
+                        <div className="text-2xl font-bold text-[#173658]">{sajuData.month.branch}</div>
+                        <div className="text-xs text-[#5d6d7e] mt-1">{sajuData.month.branchKr}</div>
+                      </td>
+                      <td className="py-3 px-4 text-center">
+                        <div className="text-2xl font-bold text-[#173658]">{sajuData.year.branch}</div>
+                        <div className="text-xs text-[#5d6d7e] mt-1">{sajuData.year.branchKr}</div>
+                      </td>
+                    </tr>
+
+                    {/* 지장간 */}
+                    <tr className="border-b border-gray-200">
+                      <td className="py-3 px-4 text-center font-semibold text-[#173658] bg-[#F3E7E3]">
+                        <div>지장간</div>
+                        <div className="text-xs text-[#5d6d7e] font-normal">숨은 천간</div>
+                      </td>
+                      {(() => {
+                        const pillars = sajuData.hour
+                          ? [analysis.hiddenStems.find(h => h.pillar === '시주'), analysis.hiddenStems.find(h => h.pillar === '일주'), analysis.hiddenStems.find(h => h.pillar === '월주'), analysis.hiddenStems.find(h => h.pillar === '년주')]
+                          : [analysis.hiddenStems.find(h => h.pillar === '일주'), analysis.hiddenStems.find(h => h.pillar === '월주'), analysis.hiddenStems.find(h => h.pillar === '년주')];
+                        return pillars.map((h, idx) => (
+                          <td key={idx} className={`py-2 px-2 text-center ${h?.pillar === '일주' ? 'bg-[#d4af37]/10' : ''}`}>
+                            {h && (
+                              <div className="flex flex-wrap justify-center gap-1">
+                                {h.stems.map((s, si) => (
+                                  <span
+                                    key={si}
+                                    className={`inline-block px-2 py-0.5 rounded text-xs font-semibold border ${elementBgColors[s.element] || 'bg-gray-100'}`}
+                                    title={s.role}
+                                  >
+                                    {s.stemKr}
+                                  </span>
+                                ))}
+                              </div>
+                            )}
+                          </td>
+                        ));
+                      })()}
+                    </tr>
+
+                    {/* 십성 */}
+                    <tr className="border-b border-gray-200">
+                      <td className="py-3 px-4 text-center font-semibold text-[#173658] bg-[#F3E7E3]">십성</td>
+                      {sajuData.hour && (
+                        <td className="py-3 px-4 text-center">
+                          <div className="text-sm font-bold text-[#173658]">{sajuData.hour.tenGod}</div>
+                        </td>
+                      )}
+                      <td className="py-3 px-4 text-center bg-[#d4af37]/10">
+                        <div className="text-sm font-bold text-[#173658]">{sajuData.day.tenGod}</div>
+                      </td>
+                      <td className="py-3 px-4 text-center">
+                        <div className="text-sm font-bold text-[#173658]">{sajuData.month.tenGod}</div>
+                      </td>
+                      <td className="py-3 px-4 text-center">
+                        <div className="text-sm font-bold text-[#173658]">{sajuData.year.tenGod}</div>
+                      </td>
+                    </tr>
+
+                    {/* 십이운성 */}
+                    <tr>
+                      <td className="py-3 px-4 text-center font-semibold text-[#173658] bg-[#F3E7E3]">십이운성</td>
+                      {sajuData.hour && (
+                        <td className="py-3 px-4 text-center">
+                          <div className="text-sm font-bold text-[#173658]">{sajuData.hour.fortune}</div>
+                        </td>
+                      )}
+                      <td className="py-3 px-4 text-center bg-[#d4af37]/10">
+                        <div className="text-sm font-bold text-[#173658]">{sajuData.day.fortune}</div>
+                      </td>
+                      <td className="py-3 px-4 text-center">
+                        <div className="text-sm font-bold text-[#173658]">{sajuData.month.fortune}</div>
+                      </td>
+                      <td className="py-3 px-4 text-center">
+                        <div className="text-sm font-bold text-[#173658]">{sajuData.year.fortune}</div>
+                      </td>
+                    </tr>
+                  </tbody>
+                </table>
+              </div>
+
+              {/* 지지 상호작용 */}
+              {analysis.branchInteractions.length > 0 && (
+                <div className="mt-6 pt-6 border-t border-[#173658]/10">
+                  <h3 className="text-base font-bold text-[#173658] mb-3 text-center">
+                    지지 상호작용
+                  </h3>
+                  <div className="flex flex-wrap justify-center gap-2">
+                    {analysis.branchInteractions.map((inter, idx) => {
+                      const isPositive = inter.type.includes('합');
+                      const isNegative = inter.type.includes('충') || inter.type.includes('형');
+                      const colorClass = isPositive
+                        ? 'bg-emerald-50 border-emerald-400 text-emerald-800'
+                        : isNegative
+                          ? 'bg-red-50 border-red-400 text-red-800'
+                          : 'bg-amber-50 border-amber-400 text-amber-800';
+                      return (
+                        <span key={idx} className={`inline-flex items-center px-3 py-1 rounded-full text-xs font-bold border ${colorClass}`}>
+                          {inter.type} {inter.branchesKr.join('')}
+                          {inter.resultElement && ` → ${FIVE_ELEMENTS_KR[inter.resultElement as keyof typeof FIVE_ELEMENTS_KR]}`}
+                        </span>
+                      );
+                    })}
+                  </div>
+                </div>
+              )}
+
+              {/* 오행 균형 */}
+              <div className="mt-6 pt-6 border-t border-[#173658]/10">
+                <h3 className="text-base font-bold text-[#173658] mb-4 text-center">
+                  오행 균형
+                </h3>
+                <div className="grid grid-cols-5 gap-2">
+                  {Object.entries(elementScores).map(([element, score]) => (
+                    <div key={element} className="text-center">
+                      <div className={`text-xl font-bold mb-1 ${elementColors[element] || ''}`}>{element}</div>
+                      <div className="text-xs text-[#5d6d7e] mb-2">
+                        {FIVE_ELEMENTS_KR[element as keyof typeof FIVE_ELEMENTS_KR]}
+                      </div>
+                      <div className="w-full bg-gray-200 rounded-full h-2 mb-1">
+                        <div
+                          className={`h-2 rounded-full transition-all ${element === sajuData.day.element
+                            ? 'bg-gradient-to-r from-[#173658] to-[#d4af37]'
+                            : 'bg-gray-400'
+                            }`}
+                          style={{ width: `${Math.max(score, 5)}%` }}
+                        ></div>
+                      </div>
+                      <div className="text-xs font-bold text-[#173658]">{score}%</div>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            </div>
+
+            {/* 분석 카드 그리드 */}
+            <div className="grid md:grid-cols-2 gap-6 mb-6">
+              {/* 신강/신약 + 용신 카드 */}
+              <div className="glass-panel-light rounded-2xl p-6">
+                <h3 className="text-xl font-bold text-[#173658] mb-4">
+                  일간 세력 분석
+                </h3>
+                <div className="flex items-center gap-3 mb-4">
+                  <span className={`inline-block px-4 py-2 rounded-xl text-base font-bold ${
+                    analysis.dayMasterStrength.result === '신강'
+                      ? 'bg-red-100 text-red-700 border-2 border-red-400'
+                      : analysis.dayMasterStrength.result === '신약'
+                        ? 'bg-blue-100 text-blue-700 border-2 border-blue-400'
+                        : 'bg-green-100 text-green-700 border-2 border-green-400'
+                  }`}>
+                    {analysis.dayMasterStrength.result}
+                  </span>
+                  <span className="text-[#5d6d7e] text-sm">점수: {analysis.dayMasterStrength.score}</span>
+                </div>
+                <ul className="space-y-1 text-sm text-[#5d6d7e] mb-6">
+                  {analysis.dayMasterStrength.reasons.map((r, i) => (
+                    <li key={i} className="flex items-start">
+                      <span className="text-[#d4af37] mr-2">-</span>
+                      <span>{r}</span>
+                    </li>
+                  ))}
+                </ul>
+
+                <div className="border-t border-[#173658]/10 pt-4">
+                  <h4 className="font-bold text-[#173658] mb-3">용신 / 희신 / 기신</h4>
+                  <div className="flex flex-wrap gap-2 mb-3">
+                    <span className={`px-3 py-1.5 rounded-lg text-xs font-bold border ${elementBgColors[analysis.yongShin.yongShin] || 'bg-gray-100'}`}>
+                      용신: {analysis.yongShin.yongShinKr}
+                    </span>
+                    <span className={`px-3 py-1.5 rounded-lg text-xs font-bold border ${elementBgColors[analysis.yongShin.heeShin] || 'bg-gray-100'}`}>
+                      희신: {analysis.yongShin.heeShinKr}
+                    </span>
+                    <span className="px-3 py-1.5 rounded-lg text-xs font-bold bg-gray-200 border border-gray-400 text-gray-700">
+                      기신: {analysis.yongShin.giShinKr}
+                    </span>
+                  </div>
+                  <p className="text-sm text-[#5d6d7e] leading-relaxed">{analysis.yongShin.explanation}</p>
+                </div>
+              </div>
+
+              {/* 신살 + 공망 카드 */}
+              <div className="glass-panel-light rounded-2xl p-6">
+                <h3 className="text-xl font-bold text-[#173658] mb-4">
+                  신살 (神煞)
+                </h3>
+                {analysis.shinsal.length > 0 ? (
+                  <div className="space-y-2 mb-6">
+                    {analysis.shinsal.map((s, i) => (
+                      <div key={i} className="flex items-start gap-2 p-3 rounded-xl bg-[#F3E7E3]">
+                        <span className="inline-block px-2 py-1 bg-[#173658] text-white rounded-lg text-xs font-bold whitespace-nowrap">
+                          {s.name}
+                        </span>
+                        <div>
+                          <div className="text-sm font-semibold text-[#173658]">
+                            {s.pillar} {s.branchKr}
+                          </div>
+                          <div className="text-xs text-[#5d6d7e] mt-0.5">{s.description}</div>
+                        </div>
+                      </div>
+                    ))}
+                  </div>
+                ) : (
+                  <p className="text-[#5d6d7e] text-sm mb-6">특별한 신살이 발견되지 않았습니다.</p>
+                )}
+
+                <div className="border-t border-[#173658]/10 pt-4">
+                  <h4 className="font-bold text-[#173658] mb-2">공망 (空亡)</h4>
+                  <div className="flex gap-2 mb-2">
+                    {analysis.gongmang.branchesKr.map((bk, i) => (
+                      <span key={i} className="px-3 py-1.5 bg-[#173658] text-white rounded-lg text-sm font-bold">
+                        {bk}
+                      </span>
+                    ))}
+                  </div>
+                  <p className="text-xs text-[#5d6d7e] leading-relaxed">{analysis.gongmang.description}</p>
+                </div>
+
+                {/* 세운 정보 */}
+                <div className="border-t border-[#173658]/10 pt-4 mt-4">
+                  <h4 className="font-bold text-[#173658] mb-2">
+                    {analysis.seun.year}년 세운
+                  </h4>
+                  <div className="flex items-center gap-2 mb-2">
+                    <span className={`px-3 py-1.5 rounded-lg text-sm font-bold border ${elementBgColors[analysis.seun.element] || 'bg-gray-100'}`}>
+                      {analysis.seun.stemKr}{analysis.seun.branchKr}
+                    </span>
+                    <span className="text-sm text-[#5d6d7e]">{analysis.seun.elementKr} 기운</span>
+                  </div>
+                  {analysis.seun.interactions.length > 0 && (
+                    <div className="flex flex-wrap gap-1.5 mt-2">
+                      {analysis.seun.interactions.map((si, i) => (
+                        <span key={i} className={`text-xs px-2 py-1 rounded-full font-semibold ${
+                          si.type.includes('합') ? 'bg-emerald-50 text-emerald-700' : 'bg-red-50 text-red-700'
+                        }`}>
+                          {si.type} {si.branchesKr.join('')}
+                        </span>
+                      ))}
+                    </div>
                   )}
-                  <td className="py-4 px-6 text-center bg-blue-50">
-                    <div className="text-3xl font-bold text-blue-600">{sajuData.day.stem}</div>
-                    <div className="text-sm text-gray-600 mt-1">{sajuData.day.stemKr}</div>
-                    <div className="text-xs text-blue-600 font-semibold mt-1">일간 (日干)</div>
-                  </td>
-                  <td className="py-4 px-6 text-center">
-                    <div className="text-3xl font-bold text-indigo-600">{sajuData.month.stem}</div>
-                    <div className="text-sm text-gray-600 mt-1">{sajuData.month.stemKr}</div>
-                  </td>
-                  <td className="py-4 px-6 text-center">
-                    <div className="text-3xl font-bold text-indigo-600">{sajuData.year.stem}</div>
-                    <div className="text-sm text-gray-600 mt-1">{sajuData.year.stemKr}</div>
-                  </td>
-                </tr>
+                </div>
+              </div>
+            </div>
 
-                {/* 지지 */}
-                <tr className="border-b border-gray-200 hover:bg-purple-50 transition">
-                  <td className="py-4 px-6 text-center font-semibold text-gray-700">지지 (地支)</td>
-                  {sajuData.hour && (
-                    <td className="py-4 px-6 text-center">
-                      <div className="text-3xl font-bold text-purple-600">{sajuData.hour.branch}</div>
-                      <div className="text-sm text-gray-600 mt-1">{sajuData.hour.branchKr}</div>
-                    </td>
-                  )}
-                  <td className="py-4 px-6 text-center bg-blue-50">
-                    <div className="text-3xl font-bold text-blue-600">{sajuData.day.branch}</div>
-                    <div className="text-sm text-gray-600 mt-1">{sajuData.day.branchKr}</div>
-                  </td>
-                  <td className="py-4 px-6 text-center">
-                    <div className="text-3xl font-bold text-purple-600">{sajuData.month.branch}</div>
-                    <div className="text-sm text-gray-600 mt-1">{sajuData.month.branchKr}</div>
-                  </td>
-                  <td className="py-4 px-6 text-center">
-                    <div className="text-3xl font-bold text-purple-600">{sajuData.year.branch}</div>
-                    <div className="text-sm text-gray-600 mt-1">{sajuData.year.branchKr}</div>
-                  </td>
-                </tr>
+            {/* AI 상세 해석 */}
+            <AiInterpretationSection sajuData={sajuData} currentDaeun={currentDaeun} daeunList={daeunList} />
 
-                {/* 지장간 (NEW) */}
-                <tr className="border-b border-gray-200 hover:bg-amber-50 transition">
-                  <td className="py-4 px-6 text-center font-semibold text-gray-700">
-                    지장간 (藏干)
-                    <div className="text-xs text-gray-400 mt-1">숨은 천간</div>
-                  </td>
-                  {(() => {
-                    const pillars = sajuData.hour
-                      ? [analysis.hiddenStems.find(h => h.pillar === '시주'), analysis.hiddenStems.find(h => h.pillar === '일주'), analysis.hiddenStems.find(h => h.pillar === '월주'), analysis.hiddenStems.find(h => h.pillar === '년주')]
-                      : [analysis.hiddenStems.find(h => h.pillar === '일주'), analysis.hiddenStems.find(h => h.pillar === '월주'), analysis.hiddenStems.find(h => h.pillar === '년주')];
-                    return pillars.map((h, idx) => (
-                      <td key={idx} className={`py-3 px-4 text-center ${h?.pillar === '일주' ? 'bg-blue-50' : ''}`}>
-                        {h && (
-                          <div className="flex flex-wrap justify-center gap-1">
-                            {h.stems.map((s, si) => (
-                              <span
-                                key={si}
-                                className={`inline-block px-2 py-1 rounded text-xs font-semibold border ${elementBgColors[s.element] || 'bg-gray-100'}`}
-                                title={s.role}
-                              >
-                                {s.stemKr}({FIVE_ELEMENTS_KR[s.element as keyof typeof FIVE_ELEMENTS_KR]})
-                              </span>
-                            ))}
+            {/* 대운 (大運) */}
+            <div className="glass-panel-light rounded-2xl p-6 md:p-8 mb-6">
+              <h2 className="text-2xl font-bold text-[#173658] mb-6 text-center">
+                대운 (大運) - 10년 주기 운세
+              </h2>
+
+              {currentDaeun && (
+                <div className="bg-gradient-to-r from-[#173658] to-[#1e426a] rounded-2xl p-6 mb-6 text-white">
+                  <h3 className="text-xl font-bold mb-4 text-center">현재 대운</h3>
+                  <div className="text-center mb-4">
+                    <div className="text-4xl font-bold mb-2">
+                      {currentDaeun.stem}{currentDaeun.branch}
+                    </div>
+                    <div className="text-lg mb-2">
+                      {currentDaeun.stemKr}{currentDaeun.branchKr}
+                    </div>
+                    <div className="text-base opacity-90">
+                      {currentDaeun.age}세 ~ {currentDaeun.age + 9}세 ({currentDaeun.startYear}년 ~ {currentDaeun.endYear}년)
+                    </div>
+                  </div>
+                  <p className="text-center leading-relaxed text-sm">
+                    {getDaeunDescription(currentDaeun, sajuData.day.stem)}
+                  </p>
+                </div>
+              )}
+
+              <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-3">
+                {daeunList.map((daeun, index) => {
+                  const isCurrent = currentDaeun &&
+                    daeun.startYear === currentDaeun.startYear &&
+                    daeun.endYear === currentDaeun.endYear;
+
+                  return (
+                    <div
+                      key={index}
+                      className={`rounded-xl p-4 border-2 transition ${isCurrent
+                        ? 'bg-[#d4af37]/20 border-[#d4af37]'
+                        : 'bg-white border-[#173658]/20'
+                        }`}
+                    >
+                      <div className="text-center">
+                        <div className="text-2xl font-bold text-[#173658] mb-1">
+                          {daeun.stem}{daeun.branch}
+                        </div>
+                        <div className="text-sm text-[#5d6d7e] mb-2">
+                          {daeun.stemKr}{daeun.branchKr}
+                        </div>
+                        <div className="text-xs text-[#5d6d7e]">
+                          {daeun.age}세 ~ {daeun.age + 9}세
+                        </div>
+                        <div className="text-xs text-[#5d6d7e]">
+                          {daeun.startYear} ~ {daeun.endYear}
+                        </div>
+                        {isCurrent && (
+                          <div className="mt-2">
+                            <span className="inline-block bg-[#173658] text-white text-xs px-3 py-1 rounded-full font-semibold">
+                              현재
+                            </span>
                           </div>
                         )}
-                      </td>
-                    ));
-                  })()}
-                </tr>
-
-                {/* 십성 */}
-                <tr className="border-b border-gray-200 hover:bg-emerald-50 transition">
-                  <td className="py-4 px-6 text-center font-semibold text-gray-700">십성 (十星)</td>
-                  {sajuData.hour && (
-                    <td className="py-4 px-6 text-center">
-                      <div className="text-lg font-semibold text-emerald-600">{sajuData.hour.tenGod}</div>
-                    </td>
-                  )}
-                  <td className="py-4 px-6 text-center bg-blue-50">
-                    <div className="text-lg font-semibold text-blue-600">{sajuData.day.tenGod}</div>
-                  </td>
-                  <td className="py-4 px-6 text-center">
-                    <div className="text-lg font-semibold text-emerald-600">{sajuData.month.tenGod}</div>
-                  </td>
-                  <td className="py-4 px-6 text-center">
-                    <div className="text-lg font-semibold text-emerald-600">{sajuData.year.tenGod}</div>
-                  </td>
-                </tr>
-
-                {/* 십이운성 */}
-                <tr className="hover:bg-pink-50 transition">
-                  <td className="py-4 px-6 text-center font-semibold text-gray-700">십이운성</td>
-                  {sajuData.hour && (
-                    <td className="py-4 px-6 text-center">
-                      <div className="text-lg font-semibold text-pink-600">{sajuData.hour.fortune}</div>
-                    </td>
-                  )}
-                  <td className="py-4 px-6 text-center bg-blue-50">
-                    <div className="text-lg font-semibold text-blue-600">{sajuData.day.fortune}</div>
-                  </td>
-                  <td className="py-4 px-6 text-center">
-                    <div className="text-lg font-semibold text-pink-600">{sajuData.month.fortune}</div>
-                  </td>
-                  <td className="py-4 px-6 text-center">
-                    <div className="text-lg font-semibold text-pink-600">{sajuData.year.fortune}</div>
-                  </td>
-                </tr>
-              </tbody>
-            </table>
-          </div>
-
-          {/* 지지 상호작용 (합/충/형/파/해) */}
-          {analysis.branchInteractions.length > 0 && (
-            <div className="mt-6 pt-6 border-t border-gray-100">
-              <h3 className="text-lg font-bold text-gray-900 mb-3 flex items-center justify-center">
-                <span className="mr-2">🔗</span> 지지 상호작용
-              </h3>
-              <div className="flex flex-wrap justify-center gap-2">
-                {analysis.branchInteractions.map((inter, idx) => {
-                  const isPositive = inter.type.includes('합');
-                  const isNegative = inter.type.includes('충') || inter.type.includes('형');
-                  const colorClass = isPositive
-                    ? 'bg-emerald-50 border-emerald-300 text-emerald-800'
-                    : isNegative
-                      ? 'bg-red-50 border-red-300 text-red-800'
-                      : 'bg-amber-50 border-amber-300 text-amber-800';
-                  return (
-                    <span key={idx} className={`inline-flex items-center px-3 py-1.5 rounded-full text-sm font-semibold border ${colorClass}`}>
-                      {inter.type} {inter.branchesKr.join('')}
-                      {inter.resultElement && ` → ${FIVE_ELEMENTS_KR[inter.resultElement as keyof typeof FIVE_ELEMENTS_KR]}`}
-                    </span>
+                      </div>
+                    </div>
                   );
                 })}
               </div>
             </div>
-          )}
 
-          {/* 오행 균형 시각화 */}
-          <div className="mt-8 pt-8 border-t border-gray-100">
-            <h3 className="text-xl font-bold text-gray-900 mb-4 flex items-center justify-center">
-              <span className="text-2xl mr-2">⚖️</span>
-              내 사주의 오행 균형
-              <span className="text-sm font-normal text-gray-500 ml-2">(지장간 가중치 적용)</span>
-            </h3>
-            <div className="grid grid-cols-5 gap-3 max-w-2xl mx-auto">
-              {Object.entries(elementScores).map(([element, score]) => (
-                <div key={element} className="text-center">
-                  <div className={`text-2xl font-bold mb-1 ${elementColors[element] || ''}`}>{element}</div>
-                  <div className="text-sm text-gray-600 mb-2">
-                    {FIVE_ELEMENTS_KR[element as keyof typeof FIVE_ELEMENTS_KR]}
-                    <span className="text-xs text-gray-400 ml-1">
-                      ({analysis.elementBalance[element as keyof typeof analysis.elementBalance]}점)
-                    </span>
-                  </div>
-                  <div className="w-full bg-gray-200 rounded-full h-3 mb-1">
-                    <div
-                      className={`h-3 rounded-full transition-all ${element === sajuData.day.element
-                        ? 'bg-gradient-to-r from-indigo-500 to-purple-500'
-                        : 'bg-gray-400'
-                        }`}
-                      style={{ width: `${Math.max(score, 5)}%` }}
-                    ></div>
-                  </div>
-                  <div className="text-xs font-semibold text-gray-700">{score}%</div>
-                </div>
-              ))}
+            {/* 추가 기능 버튼 */}
+            <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-4">
+              <Link
+                href={`/fortune?${new URLSearchParams(params as any).toString()}`}
+                className="glass-panel-light rounded-xl p-6 card-hover text-center"
+              >
+                <div className="text-3xl mb-3">🌟</div>
+                <h3 className="text-lg font-bold text-[#173658] mb-1">오늘의 운세</h3>
+                <p className="text-[#5d6d7e] text-sm">오늘의 운을 확인하기</p>
+              </Link>
+
+              <Link
+                href="/compatibility"
+                className="glass-panel-light rounded-xl p-6 card-hover text-center"
+              >
+                <div className="text-3xl mb-3">💕</div>
+                <h3 className="text-lg font-bold text-[#173658] mb-1">궁합 보기</h3>
+                <p className="text-[#5d6d7e] text-sm">두 사람의 궁합 확인</p>
+              </Link>
+
+              <PDFButton
+                elementId="pdf-content"
+                filename={`사주팔자_${yearNum}${monthNum}${dayNum}.pdf`}
+                buttonText="PDF 저장"
+              />
+
+              <ShareButtons
+                title={`내 사주팔자 - ${yearNum}년생 ${gender === 'male' ? '남성' : '여성'}`}
+                description={`일간: ${sajuData.day.stem}(${sajuData.day.stemKr}) | ${sajuData.day.element}`}
+              />
             </div>
-          </div>
-        </div>
-
-        {/* 신강/신약 + 용신 + 신살 카드 */}
-        <div className="grid md:grid-cols-2 gap-6 mb-8">
-          {/* 신강/신약 + 용신 카드 */}
-          <div className="bg-white rounded-3xl shadow-xl p-8 border border-gray-100">
-            <h3 className="text-2xl font-bold text-gray-900 mb-4 flex items-center">
-              <span className="mr-2">⚡</span> 일간 세력 분석
-            </h3>
-            <div className="flex items-center gap-3 mb-4">
-              <span className={`inline-block px-4 py-2 rounded-xl text-lg font-bold ${
-                analysis.dayMasterStrength.result === '신강'
-                  ? 'bg-red-100 text-red-700'
-                  : analysis.dayMasterStrength.result === '신약'
-                    ? 'bg-blue-100 text-blue-700'
-                    : 'bg-green-100 text-green-700'
-              }`}>
-                {analysis.dayMasterStrength.result}
-              </span>
-              <span className="text-gray-500 text-sm">점수: {analysis.dayMasterStrength.score}</span>
-            </div>
-            <ul className="space-y-1.5 text-sm text-gray-600 mb-6">
-              {analysis.dayMasterStrength.reasons.map((r, i) => (
-                <li key={i} className="flex items-start">
-                  <span className="text-indigo-400 mr-2 mt-0.5">-</span>
-                  <span>{r}</span>
-                </li>
-              ))}
-            </ul>
-
-            <div className="border-t border-gray-100 pt-4">
-              <h4 className="font-bold text-gray-800 mb-3">용신 / 희신 / 기신</h4>
-              <div className="flex flex-wrap gap-2 mb-3">
-                <span className={`px-3 py-1.5 rounded-lg text-sm font-bold border ${elementBgColors[analysis.yongShin.yongShin] || 'bg-gray-100'}`}>
-                  용신: {analysis.yongShin.yongShinKr}({analysis.yongShin.yongShin})
-                </span>
-                <span className={`px-3 py-1.5 rounded-lg text-sm font-bold border ${elementBgColors[analysis.yongShin.heeShin] || 'bg-gray-100'}`}>
-                  희신: {analysis.yongShin.heeShinKr}({analysis.yongShin.heeShin})
-                </span>
-                <span className="px-3 py-1.5 rounded-lg text-sm font-bold bg-gray-200 border border-gray-400 text-gray-700">
-                  기신: {analysis.yongShin.giShinKr}({analysis.yongShin.giShin})
-                </span>
-              </div>
-              <p className="text-sm text-gray-600 leading-relaxed">{analysis.yongShin.explanation}</p>
-            </div>
-          </div>
-
-          {/* 신살 + 공망 카드 */}
-          <div className="bg-white rounded-3xl shadow-xl p-8 border border-gray-100">
-            <h3 className="text-2xl font-bold text-gray-900 mb-4 flex items-center">
-              <span className="mr-2">🌟</span> 신살 (神煞)
-            </h3>
-            {analysis.shinsal.length > 0 ? (
-              <div className="space-y-3 mb-6">
-                {analysis.shinsal.map((s, i) => (
-                  <div key={i} className="flex items-start gap-3 p-3 rounded-xl bg-gray-50">
-                    <span className="inline-block px-2 py-1 bg-indigo-100 text-indigo-700 rounded-lg text-xs font-bold whitespace-nowrap">
-                      {s.name}
-                    </span>
-                    <div>
-                      <div className="text-sm font-semibold text-gray-800">
-                        {s.pillar} {s.branchKr}({s.branch})
-                      </div>
-                      <div className="text-xs text-gray-500 mt-0.5">{s.description}</div>
-                    </div>
-                  </div>
-                ))}
-              </div>
-            ) : (
-              <p className="text-gray-500 text-sm mb-6">특별한 신살이 발견되지 않았습니다.</p>
-            )}
-
-            <div className="border-t border-gray-100 pt-4">
-              <h4 className="font-bold text-gray-800 mb-2 flex items-center">
-                <span className="mr-2">🕳️</span> 공망 (空亡)
-              </h4>
-              <div className="flex gap-2 mb-2">
-                {analysis.gongmang.branchesKr.map((bk, i) => (
-                  <span key={i} className="px-3 py-1.5 bg-gray-800 text-white rounded-lg text-sm font-bold">
-                    {bk}({analysis.gongmang.branches[i]})
-                  </span>
-                ))}
-              </div>
-              <p className="text-xs text-gray-500 leading-relaxed">{analysis.gongmang.description}</p>
-            </div>
-
-            {/* 세운 정보 */}
-            <div className="border-t border-gray-100 pt-4 mt-4">
-              <h4 className="font-bold text-gray-800 mb-2 flex items-center">
-                <span className="mr-2">📅</span> {analysis.seun.year}년 세운
-              </h4>
-              <div className="flex items-center gap-2 mb-2">
-                <span className={`px-3 py-1.5 rounded-lg text-sm font-bold border ${elementBgColors[analysis.seun.element] || 'bg-gray-100'}`}>
-                  {analysis.seun.stemKr}{analysis.seun.branchKr} ({analysis.seun.stem}{analysis.seun.branch})
-                </span>
-                <span className="text-sm text-gray-500">{analysis.seun.elementKr}({analysis.seun.element}) 기운</span>
-              </div>
-              {analysis.seun.interactions.length > 0 && (
-                <div className="flex flex-wrap gap-1.5 mt-2">
-                  {analysis.seun.interactions.map((si, i) => (
-                    <span key={i} className={`text-xs px-2 py-1 rounded-full font-semibold ${
-                      si.type.includes('합') ? 'bg-emerald-50 text-emerald-700' : 'bg-red-50 text-red-700'
-                    }`}>
-                      {si.type} {si.branchesKr.join('')}
-                    </span>
-                  ))}
-                </div>
-              )}
-            </div>
-          </div>
-        </div>
-
-        {/* AI 상세 해석 */}
-        <AiInterpretationSection sajuData={sajuData} currentDaeun={currentDaeun} daeunList={daeunList} />
-
-        {/* 대운 (大運) */}
-        <div className="bg-white rounded-3xl shadow-2xl p-8 md:p-12 mb-8">
-          <h2 className="text-3xl font-bold text-gray-900 mb-8 text-center">
-            대운 (大運) - 10년 주기 운세
-          </h2>
-
-          {currentDaeun && (
-            <div className="bg-gradient-to-r from-indigo-500 to-purple-500 rounded-2xl p-6 mb-8 text-white">
-              <h3 className="text-2xl font-bold mb-4 text-center">현재 대운</h3>
-              <div className="text-center mb-4">
-                <div className="text-5xl font-bold mb-2">
-                  {currentDaeun.stem}{currentDaeun.branch}
-                </div>
-                <div className="text-xl mb-2">
-                  {currentDaeun.stemKr}{currentDaeun.branchKr}
-                </div>
-                <div className="text-lg opacity-90">
-                  {currentDaeun.age}세 ~ {currentDaeun.age + 9}세 ({currentDaeun.startYear}년 ~ {currentDaeun.endYear}년)
-                </div>
-              </div>
-              <p className="text-center leading-relaxed">
-                {getDaeunDescription(currentDaeun, sajuData.day.stem)}
-              </p>
-            </div>
-          )}
-
-          <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-4">
-            {daeunList.map((daeun, index) => {
-              const isCurrent = currentDaeun &&
-                daeun.startYear === currentDaeun.startYear &&
-                daeun.endYear === currentDaeun.endYear;
-
-              return (
-                <div
-                  key={index}
-                  className={`rounded-xl p-4 border-2 transition ${isCurrent
-                    ? 'bg-indigo-50 border-indigo-400'
-                    : 'bg-gray-50 border-gray-200 hover:border-indigo-300'
-                    }`}
-                >
-                  <div className="text-center">
-                    <div className="text-3xl font-bold text-gray-900 mb-1">
-                      {daeun.stem}{daeun.branch}
-                    </div>
-                    <div className="text-sm text-gray-600 mb-2">
-                      {daeun.stemKr}{daeun.branchKr}
-                    </div>
-                    <div className="text-xs text-gray-500">
-                      {daeun.age}세 ~ {daeun.age + 9}세
-                    </div>
-                    <div className="text-xs text-gray-400">
-                      {daeun.startYear} ~ {daeun.endYear}
-                    </div>
-                    {isCurrent && (
-                      <div className="mt-2">
-                        <span className="inline-block bg-indigo-600 text-white text-xs px-3 py-1 rounded-full font-semibold">
-                          현재
-                        </span>
-                      </div>
-                    )}
-                  </div>
-                </div>
-              );
-            })}
-          </div>
-        </div>
-
-        {/* 추가 기능 버튼 */}
-        <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
-          <Link
-            href={`/fortune?${new URLSearchParams(params as any).toString()}`}
-            className="bg-white rounded-xl p-6 shadow-lg hover:shadow-xl transition text-center group"
-          >
-            <div className="text-4xl mb-3">🌟</div>
-            <h3 className="text-xl font-bold text-gray-900 mb-2">오늘의 운세</h3>
-            <p className="text-gray-600 text-sm">오늘의 운을 확인하기</p>
-          </Link>
-
-          <Link
-            href="/compatibility"
-            className="bg-white rounded-xl p-6 shadow-lg hover:shadow-xl transition text-center group"
-          >
-            <div className="text-4xl mb-3">💕</div>
-            <h3 className="text-xl font-bold text-gray-900 mb-2">궁합 보기</h3>
-            <p className="text-gray-600 text-sm">두 사람의 궁합 확인</p>
-          </Link>
-
-          <PDFButton
-            elementId="pdf-content"
-            filename={`사주팔자_${yearNum}${monthNum}${dayNum}.pdf`}
-            buttonText="사주 PDF 저장"
-          />
-
-          <ShareButtons
-            title={`내 사주팔자 - ${yearNum}년생 ${gender === 'male' ? '남성' : '여성'}`}
-            description={`일간: ${sajuData.day.stem}(${sajuData.day.stemKr}) | ${sajuData.day.element}`}
-          />
+          </main>
         </div>
       </div>
 
-      {/* Footer */}
-      <footer className="bg-gray-900 text-white py-12 px-4 mt-20">
-        <div className="max-w-7xl mx-auto text-center">
-          <div className="text-2xl font-bold mb-4 bg-gradient-to-r from-indigo-400 to-purple-400 bg-clip-text text-transparent">
-            사주보기
-          </div>
-          <p className="text-gray-400 mb-6">
-            쟁승메이드가 제공하는 무료 사주 서비스
-          </p>
-          <div className="text-sm text-gray-500">
-            <p>문의: bgg8988@gmail.com | <a href="https://jaengseung-made.com" target="_blank" rel="noopener noreferrer" className="hover:text-indigo-400">쟁승메이드</a></p>
-            <p className="mt-2">&copy; 2025 쟁승메이드. All rights reserved.</p>
-          </div>
-        </div>
-      </footer>
+      <Footer />
     </div>
   );
 }
diff --git a/app/saju/page.tsx b/app/saju/page.tsx
index 30d3a46..01764ea 100644
--- a/app/saju/page.tsx
+++ b/app/saju/page.tsx
@@ -1,71 +1,66 @@
-
 import Link from 'next/link';
 import SajuForm from '../components/SajuForm';
-import UserMenu from '@/components/UserMenu';
+import Header from '@/components/Header';
+import Footer from '@/components/Footer';
 
 export default function SajuPage() {
   return (
-    <div className="min-h-screen bg-gradient-to-br from-indigo-50 via-purple-50 to-pink-50">
-      {/* Navigation */}
-      <nav className="bg-white/80 backdrop-blur-md border-b border-gray-200 sticky top-0 z-50">
-        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-          <div className="flex justify-between items-center h-16">
-            <Link href="/" className="text-2xl font-bold bg-gradient-to-r from-indigo-600 to-purple-600 bg-clip-text text-transparent">
-              🔮 사주포춘
-            </Link>
-            <div className="flex items-center space-x-6">
-              <div className="hidden md:flex space-x-6 mr-4">
-                <Link href="/saju" className="text-indigo-600 font-bold">사주팔자</Link>
-                <Link href="/compatibility" className="text-gray-700 hover:text-indigo-600 transition font-medium">궁합</Link>
-                <Link href="/tojeong" className="text-gray-700 hover:text-indigo-600 transition font-medium">토정비결</Link>
-              </div>
-              <UserMenu />
-            </div>
-          </div>
-        </div>
-      </nav>
+    <div className="min-h-screen bg-[#F3E7E3]">
+      <Header />
 
       {/* Hero Section */}
-      <section className="pt-20 pb-32 px-4">
+      <section className="pt-32 pb-20 px-4">
         <div className="max-w-4xl mx-auto text-center">
-          <div className="inline-block mb-6 px-6 py-2 bg-white/50 backdrop-blur-sm rounded-full text-indigo-700 font-semibold border border-indigo-200">
+          <div className="inline-block mb-6 px-6 py-2 bg-white rounded-full text-[#173658] font-bold border-2 border-[#173658]">
             무료로 내 사주를 확인해보세요
           </div>
 
-          <h1 className="text-5xl md:text-7xl font-bold text-gray-900 mb-6 leading-tight">
-            나의 <span className="bg-gradient-to-r from-indigo-600 to-purple-600 bg-clip-text text-transparent">사주팔자</span>를<br />
+          <h1 className="text-4xl md:text-6xl font-bold text-[#173658] mb-6 leading-tight">
+            나의 <span className="gradient-text">사주팔자</span>를<br />
             확인하세요
           </h1>
 
-          <p className="text-xl text-gray-600 mb-12 max-w-2xl mx-auto">
+          <p className="text-xl text-[#5d6d7e] mb-12 max-w-2xl mx-auto leading-relaxed">
             생년월일시를 입력하면 무료로 사주팔자, 운세, 궁합을 확인할 수 있습니다.
             쉽고 빠르게 나의 운명을 알아보세요.
           </p>
 
           {/* Main Input Card */}
-          <div className="bg-white rounded-3xl shadow-2xl p-8 md:p-12 max-w-2xl mx-auto">
-            <h2 className="text-2xl font-bold text-gray-900 mb-8">생년월일시 입력</h2>
+          <div className="glass-panel-light rounded-3xl p-8 md:p-12 max-w-2xl mx-auto shadow-2xl">
+            <div className="flex items-center justify-center space-x-3 mb-8">
+              <div className="w-12 h-12 bg-[#173658] rounded-full flex items-center justify-center">
+                <svg className="w-6 h-6 text-[#d4af37]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
+                </svg>
+              </div>
+              <h2 className="text-2xl font-bold text-[#173658]">생년월일시 입력</h2>
+            </div>
 
             <SajuForm />
           </div>
+
+          {/* 안내 카드 */}
+          <div className="grid md:grid-cols-3 gap-6 mt-12 max-w-3xl mx-auto">
+            <div className="bg-white rounded-xl p-6 text-center">
+              <div className="text-3xl mb-3">✨</div>
+              <h3 className="text-[#173658] font-bold mb-2">정확한 분석</h3>
+              <p className="text-sm text-[#5d6d7e]">전통 명리학에 기반한<br />정밀한 사주 계산</p>
+            </div>
+            <div className="bg-white rounded-xl p-6 text-center">
+              <div className="text-3xl mb-3">🎯</div>
+              <h3 className="text-[#173658] font-bold mb-2">무료 제공</h3>
+              <p className="text-sm text-[#5d6d7e]">기본 사주팔자는<br />무료로 확인 가능</p>
+            </div>
+            <div className="bg-white rounded-xl p-6 text-center">
+              <div className="text-3xl mb-3">🔐</div>
+              <h3 className="text-[#173658] font-bold mb-2">개인정보 보호</h3>
+              <p className="text-sm text-[#5d6d7e]">안전하게 보호되는<br />개인정보</p>
+            </div>
+          </div>
         </div>
       </section>
 
-      {/* Footer */}
-      <footer className="bg-gray-900 text-white py-12 px-4">
-        <div className="max-w-7xl mx-auto text-center">
-          <div className="text-2xl font-bold mb-4 bg-gradient-to-r from-indigo-400 to-purple-400 bg-clip-text text-transparent">
-            🔮 사주포춘
-          </div>
-          <p className="text-gray-400 mb-6">
-            쟁승메이드가 제공하는 사주 서비스
-          </p>
-          <div className="text-sm text-gray-500">
-            <p>문의: bgg8988@gmail.com | <a href="https://jaengseung-made.com" target="_blank" rel="noopener noreferrer" className="hover:text-indigo-400">쟁승메이드</a></p>
-            <p className="mt-2">&copy; 2025 쟁승메이드. All rights reserved.</p>
-          </div>
-        </div>
-      </footer>
+      <Footer />
     </div>
   );
 }
diff --git a/app/tojeong/page.tsx b/app/tojeong/page.tsx
index 4b53f95..daee05c 100644
--- a/app/tojeong/page.tsx
+++ b/app/tojeong/page.tsx
@@ -1,38 +1,25 @@
 import Link from 'next/link';
 import TojeongForm from '../components/TojeongForm';
+import Header from '@/components/Header';
+import Footer from '@/components/Footer';
 
 export default function TojeongPage() {
   return (
-    <div className="min-h-screen bg-gradient-to-br from-amber-50 via-orange-50 to-yellow-50">
-      {/* Navigation */}
-      <nav className="bg-white/80 backdrop-blur-md border-b border-gray-200 sticky top-0 z-50">
-        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-          <div className="flex justify-between items-center h-16">
-            <Link href="/" className="text-2xl font-bold bg-gradient-to-r from-amber-600 to-orange-600 bg-clip-text text-transparent">
-              🔮 사주보기
-            </Link>
-            <Link
-              href="/"
-              className="text-gray-700 hover:text-amber-600 transition font-medium"
-            >
-              처음으로
-            </Link>
-          </div>
-        </div>
-      </nav>
+    <div className="min-h-screen bg-[#F3E7E3]">
+      <Header />
 
       {/* Hero Section */}
-      <section className="pt-20 pb-32 px-4">
+      <section className="pt-32 pb-20 px-4">
         <div className="max-w-4xl mx-auto text-center mb-12">
-          <div className="inline-block mb-6 px-6 py-2 bg-white/50 backdrop-blur-sm rounded-full text-amber-700 font-semibold border border-amber-200">
+          <div className="inline-block mb-6 px-6 py-2 bg-white rounded-full text-[#173658] font-bold border-2 border-[#173658]">
             한 해의 운세를 미리 확인하세요
           </div>
 
-          <h1 className="text-5xl md:text-7xl font-bold text-gray-900 mb-6 leading-tight">
-            🎋 <span className="bg-gradient-to-r from-amber-600 to-orange-600 bg-clip-text text-transparent">토정비결</span>
+          <h1 className="text-4xl md:text-6xl font-bold text-[#173658] mb-6 leading-tight">
+            🎋 <span className="gradient-text">토정비결</span>
           </h1>
 
-          <p className="text-xl text-gray-600 mb-12 max-w-2xl mx-auto">
+          <p className="text-xl text-[#5d6d7e] mb-12 max-w-2xl mx-auto leading-relaxed">
             조선시대 토정 이지함 선생이 창안한 역술서로,
             한 해 동안의 운세를 월별로 확인할 수 있습니다.
           </p>
@@ -48,31 +35,31 @@ export default function TojeongPage() {
       <section className="py-20 px-4 bg-white">
         <div className="max-w-6xl mx-auto">
           <div className="text-center mb-16">
-            <h2 className="text-4xl font-bold text-gray-900 mb-4">토정비결이란?</h2>
-            <p className="text-xl text-gray-600">조선시대부터 전해 내려오는 전통 운세</p>
+            <h2 className="text-3xl md:text-4xl font-bold text-[#173658] mb-4">토정비결이란?</h2>
+            <p className="text-xl text-[#5d6d7e]">조선시대부터 전해 내려오는 전통 운세</p>
           </div>
 
           <div className="grid md:grid-cols-3 gap-8">
-            <div className="text-center p-6 rounded-2xl hover:bg-amber-50 transition">
+            <div className="text-center p-6 glass-panel-light rounded-2xl card-hover">
               <div className="text-5xl mb-4">📅</div>
-              <h3 className="text-xl font-bold text-gray-900 mb-3">한 해 운세</h3>
-              <p className="text-gray-600">
+              <h3 className="text-xl font-bold text-[#173658] mb-3">한 해 운세</h3>
+              <p className="text-[#5d6d7e]">
                 새해부터 연말까지 전체적인 운의 흐름을 미리 파악할 수 있습니다.
               </p>
             </div>
 
-            <div className="text-center p-6 rounded-2xl hover:bg-orange-50 transition">
+            <div className="text-center p-6 glass-panel-light rounded-2xl card-hover">
               <div className="text-5xl mb-4">📆</div>
-              <h3 className="text-xl font-bold text-gray-900 mb-3">월별 운세</h3>
-              <p className="text-gray-600">
+              <h3 className="text-xl font-bold text-[#173658] mb-3">월별 운세</h3>
+              <p className="text-[#5d6d7e]">
                 12개월 각각의 운세를 확인하여 중요한 결정을 내리는 데 참고하세요.
               </p>
             </div>
 
-            <div className="text-center p-6 rounded-2xl hover:bg-yellow-50 transition">
+            <div className="text-center p-6 glass-panel-light rounded-2xl card-hover">
               <div className="text-5xl mb-4">🎯</div>
-              <h3 className="text-xl font-bold text-gray-900 mb-3">분야별 운세</h3>
-              <p className="text-gray-600">
+              <h3 className="text-xl font-bold text-[#173658] mb-3">분야별 운세</h3>
+              <p className="text-[#5d6d7e]">
                 재물, 건강, 관운 등 분야별로 세분화된 운세 정보를 제공합니다.
               </p>
             </div>
@@ -80,21 +67,7 @@ export default function TojeongPage() {
         </div>
       </section>
 
-      {/* Footer */}
-      <footer className="bg-gray-900 text-white py-12 px-4">
-        <div className="max-w-7xl mx-auto text-center">
-          <div className="text-2xl font-bold mb-4 bg-gradient-to-r from-amber-400 to-orange-400 bg-clip-text text-transparent">
-            🔮 사주보기
-          </div>
-          <p className="text-gray-400 mb-6">
-            쟁승메이드가 제공하는 무료 사주 서비스
-          </p>
-          <div className="text-sm text-gray-500">
-            <p>문의: bgg8988@gmail.com | <a href="https://jaengseung-made.com" target="_blank" rel="noopener noreferrer" className="hover:text-amber-400">쟁승메이드</a></p>
-            <p className="mt-2">&copy; 2025 쟁승메이드. All rights reserved.</p>
-          </div>
-        </div>
-      </footer>
+      <Footer />
     </div>
   );
 }
diff --git a/components/AiInterpretationSection.tsx b/components/AiInterpretationSection.tsx
index c354ff6..69b86fc 100644
--- a/components/AiInterpretationSection.tsx
+++ b/components/AiInterpretationSection.tsx
@@ -191,14 +191,14 @@ export default function AiInterpretationSection({ sajuData, currentDaeun, daeunL
     // Loading View
     if (loading || checkingRecord) {
         return (
-            <div className="bg-white rounded-3xl shadow-xl p-8 md:p-12 mb-8 animate-pulse border border-gray-100">
+            <div className="glass-panel-light rounded-2xl p-8 md:p-12 mb-6 animate-pulse">
                 <div className="flex flex-col items-center justify-center space-y-6 py-12">
-                    <div className="w-16 h-16 border-4 border-indigo-200 border-t-indigo-600 rounded-full animate-spin"></div>
+                    <div className="w-16 h-16 border-4 border-[#173658]/20 border-t-[#173658] rounded-full animate-spin"></div>
                     <div className="text-center space-y-2">
-                        <h3 className="text-xl font-bold text-gray-800">
+                        <h3 className="text-xl font-bold text-[#173658]">
                             {checkingRecord ? '기존 기록을 확인하고 있습니다...' : '사주를 분석하고 있습니다...'}
                         </h3>
-                        <p className="text-gray-500">
+                        <p className="text-[#5d6d7e]">
                             {checkingRecord
                                 ? '잠시만 기다려주세요.'
                                 : <>천간과 지지의 조화, 대운의 흐름을 깊이 있게 해석 중입니다.<br />잠시만 기다려주세요.</>
@@ -214,30 +214,30 @@ export default function AiInterpretationSection({ sajuData, currentDaeun, daeunL
     if (!isUnlocked) {
         return (
             <>
-                <div className="relative bg-white rounded-3xl shadow-2xl p-8 md:p-12 mb-8 border border-gray-100 overflow-hidden">
-                    <div className="absolute inset-0 bg-gradient-to-b from-transparent via-white/80 to-white z-10 flex flex-col items-center justify-center pb-12">
-                        <div className="text-center p-8 bg-white/90 backdrop-blur-md rounded-2xl shadow-xl border border-indigo-100 max-w-sm mx-auto">
+                <div className="relative glass-panel-light rounded-2xl p-8 md:p-12 mb-6 overflow-hidden">
+                    <div className="absolute inset-0 bg-gradient-to-b from-transparent via-[#F3E7E3]/80 to-[#F3E7E3] z-10 flex flex-col items-center justify-center pb-12">
+                        <div className="text-center p-8 bg-white/90 backdrop-blur-md rounded-2xl shadow-xl border-2 border-[#173658]/20 max-w-sm mx-auto">
                             <div className="text-4xl mb-4">🔐</div>
-                            <h3 className="text-2xl font-bold text-gray-900 mb-2">전문가 심층 분석 잠금해제</h3>
-                            <p className="text-gray-600 mb-2">
+                            <h3 className="text-2xl font-bold text-[#173658] mb-2">전문가 심층 분석 잠금해제</h3>
+                            <p className="text-[#5d6d7e] mb-2">
                                 AI 명리학자의 소름 돋는 인생 해석을 확인하세요.
                             </p>
-                            <p className="text-sm text-gray-500 mb-4">
-                                토큰 1개 사용 | 보유: <span className="font-bold text-indigo-600">{credits}개</span>
+                            <p className="text-sm text-[#5d6d7e] mb-4">
+                                토큰 10개 사용 | 보유: <span className="font-bold text-[#173658]">{credits}개</span>
                             </p>
                             <button
                                 onClick={handleTokenUse}
-                                className="w-full bg-gradient-to-r from-indigo-600 to-purple-600 text-white font-bold py-3 px-6 rounded-xl hover:shadow-lg hover:scale-105 transition transform flex items-center justify-center gap-2"
+                                className="w-full bg-[#173658] hover:bg-[#1e426a] text-white font-bold py-3 px-6 rounded-xl hover:shadow-lg hover:scale-105 transition transform flex items-center justify-center gap-2"
                             >
-                                {credits >= 1 ? (
+                                {credits >= 10 ? (
                                     <>
-                                        <span>토큰 1개로 잠금해제</span>
+                                        <span>토큰 10개로 잠금해제</span>
                                     </>
                                 ) : (
                                     <span>토큰 충전하기</span>
                                 )}
                             </button>
-                            <p className="text-xs text-gray-400 mt-4">
+                            <p className="text-xs text-[#5d6d7e] mt-4">
                                 * 결제 후 평생 소장 가능합니다.<br />
                                 * 같은 생년월일 재접근 시 토큰이 차감되지 않아요.
                             </p>
@@ -246,8 +246,8 @@ export default function AiInterpretationSection({ sajuData, currentDaeun, daeunL
 
                     {/* Blurred Content Placeholder */}
                     <div className="filter blur-sm select-none opacity-50 pointer-events-none">
-                        <h2 className="text-3xl font-bold text-gray-900 mb-8 text-center flex items-center justify-center">
-                            <span className="text-4xl mr-3">✨</span>
+                        <h2 className="text-2xl font-bold text-[#173658] mb-8 text-center flex items-center justify-center">
+                            <span className="text-3xl mr-3">✨</span>
                             당신을 위한 맞춤 심층 분석
                         </h2>
                         <div className="space-y-4">
@@ -290,13 +290,13 @@ export default function AiInterpretationSection({ sajuData, currentDaeun, daeunL
     const sections = interpretation ? parseSections(interpretation) : [];
 
     return (
-        <div className="bg-white rounded-3xl shadow-2xl p-6 md:p-10 mb-8 border border-gray-100">
+        <div className="glass-panel-light rounded-2xl p-6 md:p-10 mb-6">
             <div className="text-center mb-8">
-                <h2 className="text-3xl font-bold bg-gradient-to-r from-indigo-600 to-purple-600 bg-clip-text text-transparent mb-2">
+                <h2 className="text-2xl md:text-3xl font-bold gradient-text mb-2">
                     ✨ 당신을 위한 맞춤 심층 분석
                 </h2>
-                <p className="text-gray-500">AI 사주 상담사가 당신만을 위해 정성껏 풀어봤어요.</p>
-                {user && <span className="inline-block mt-2 px-3 py-1 bg-green-100 text-green-700 text-xs rounded-full">잠금해제 완료 / 평생 소장</span>}
+                <p className="text-[#5d6d7e]">AI 사주 상담사가 당신만을 위해 정성껏 풀어봤어요.</p>
+                {user && <span className="inline-block mt-2 px-3 py-1 bg-emerald-100 text-emerald-700 text-xs rounded-full font-bold">잠금해제 완료 / 평생 소장</span>}
             </div>
 
             {sections.length > 0 ? (
@@ -312,18 +312,18 @@ export default function AiInterpretationSection({ sajuData, currentDaeun, daeunL
                     ))}
                 </div>
             ) : (
-                <article className="prose prose-lg max-w-none prose-indigo prose-headings:text-indigo-900 prose-p:text-gray-700 prose-li:text-gray-700">
+                <article className="prose prose-lg max-w-none prose-headings:text-[#173658] prose-p:text-[#5d6d7e] prose-li:text-[#5d6d7e]">
                     <ReactMarkdown remarkPlugins={[remarkGfm]}>
                         {interpretation || ''}
                     </ReactMarkdown>
                 </article>
             )}
 
-            <div className="mt-10 p-5 bg-indigo-50/50 rounded-2xl border border-indigo-100 flex items-start gap-4">
+            <div className="mt-10 p-5 bg-[#F3E7E3] rounded-2xl border-2 border-[#173658]/20 flex items-start gap-4">
                 <span className="text-2xl pt-1">💡</span>
                 <div>
-                    <h4 className="font-bold text-indigo-900 mb-1">참고하세요</h4>
-                    <p className="text-sm text-indigo-800/80 leading-relaxed">
+                    <h4 className="font-bold text-[#173658] mb-1">참고하세요</h4>
+                    <p className="text-sm text-[#5d6d7e] leading-relaxed">
                         이 분석은 전통 명리학 알고리즘과 AI를 결합하여 만들어졌어요.
                         인생의 큰 흐름을 이해하는 데 도움이 되길 바라며,
                         모든 선택의 주인공은 언제나 당신이라는 걸 잊지 마세요.
diff --git a/components/Footer.tsx b/components/Footer.tsx
new file mode 100644
index 0000000..7d8866c
--- /dev/null
+++ b/components/Footer.tsx
@@ -0,0 +1,161 @@
+import Link from 'next/link';
+
+export default function Footer() {
+  const currentYear = new Date().getFullYear();
+
+  return (
+    <footer className="bg-[#173658] text-white pt-16">
+      <div className="container-custom pb-8">
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
+          {/* 브랜드 */}
+          <div>
+            <div className="flex items-center space-x-2 mb-4">
+              <div className="w-10 h-10 bg-gradient-to-br from-[#d4af37] to-[#F3E7E3] rounded-lg flex items-center justify-center">
+                <span className="text-[#173658] text-xl font-bold">사</span>
+              </div>
+              <span className="text-xl font-bold">사주포춘</span>
+            </div>
+            <p className="text-gray-400 text-sm leading-relaxed">
+              AI와 전통 역학이 만나<br />
+              당신의 운명을 밝힙니다
+            </p>
+            <div className="flex space-x-3 mt-4">
+              <a
+                href="#"
+                className="w-9 h-9 bg-[#122a45] rounded-lg flex items-center justify-center hover:bg-[#1e426a] transition-colors"
+                aria-label="Facebook"
+              >
+                <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
+                  <path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/>
+                </svg>
+              </a>
+              <a
+                href="#"
+                className="w-9 h-9 bg-[#122a45] rounded-lg flex items-center justify-center hover:bg-[#1e426a] transition-colors"
+                aria-label="Instagram"
+              >
+                <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
+                  <path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"/>
+                </svg>
+              </a>
+              <a
+                href="#"
+                className="w-9 h-9 bg-[#122a45] rounded-lg flex items-center justify-center hover:bg-[#1e426a] transition-colors"
+                aria-label="YouTube"
+              >
+                <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
+                  <path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"/>
+                </svg>
+              </a>
+            </div>
+          </div>
+
+          {/* 서비스 */}
+          <div>
+            <h3 className="font-bold text-lg mb-4">서비스</h3>
+            <ul className="space-y-2">
+              <li>
+                <Link href="/saju" className="text-gray-400 hover:text-[#d4af37] transition-colors">
+                  사주 분석
+                </Link>
+              </li>
+              <li>
+                <Link href="/compatibility" className="text-gray-400 hover:text-[#d4af37] transition-colors">
+                  궁합 보기
+                </Link>
+              </li>
+              <li>
+                <Link href="/tojeong" className="text-gray-400 hover:text-[#d4af37] transition-colors">
+                  토정비결
+                </Link>
+              </li>
+              <li>
+                <Link href="/fortune" className="text-gray-400 hover:text-[#d4af37] transition-colors">
+                  오늘의 운세
+                </Link>
+              </li>
+            </ul>
+          </div>
+
+          {/* 고객 지원 */}
+          <div>
+            <h3 className="font-bold text-lg mb-4">고객 지원</h3>
+            <ul className="space-y-2">
+              <li>
+                <Link href="/mypage" className="text-gray-400 hover:text-[#d4af37] transition-colors">
+                  마이페이지
+                </Link>
+              </li>
+              <li>
+                <a href="#" className="text-gray-400 hover:text-[#d4af37] transition-colors">
+                  자주 묻는 질문
+                </a>
+              </li>
+              <li>
+                <a href="#" className="text-gray-400 hover:text-[#d4af37] transition-colors">
+                  고객센터
+                </a>
+              </li>
+              <li>
+                <a href="#" className="text-gray-400 hover:text-[#d4af37] transition-colors">
+                  1:1 문의
+                </a>
+              </li>
+            </ul>
+          </div>
+
+          {/* 정보 */}
+          <div>
+            <h3 className="font-bold text-lg mb-4">정보</h3>
+            <ul className="space-y-2">
+              <li>
+                <a href="#" className="text-gray-400 hover:text-[#d4af37] transition-colors">
+                  회사 소개
+                </a>
+              </li>
+              <li>
+                <a href="#" className="text-gray-400 hover:text-[#d4af37] transition-colors">
+                  이용약관
+                </a>
+              </li>
+              <li>
+                <a href="#" className="text-gray-400 hover:text-[#d4af37] transition-colors">
+                  개인정보처리방침
+                </a>
+              </li>
+              <li>
+                <a href="#" className="text-gray-400 hover:text-[#d4af37] transition-colors">
+                  환불 정책
+                </a>
+              </li>
+            </ul>
+          </div>
+        </div>
+
+        {/* 하단 정보 */}
+        <div className="border-t border-gray-700 mt-8 pt-8">
+          <div className="flex flex-col md:flex-row justify-between items-center space-y-4 md:space-y-0">
+            <div className="text-gray-400 text-sm text-center md:text-left">
+              <p>&copy; {currentYear} 사주포춘. All rights reserved.</p>
+              <p className="mt-1">사업자등록번호: 123-45-67890 | 대표: 홍길동</p>
+            </div>
+            <div className="flex items-center space-x-4">
+              <div className="flex items-center space-x-2">
+                <svg className="w-5 h-5 text-[#d4af37]" fill="currentColor" viewBox="0 0 20 20">
+                  <path fillRule="evenodd" d="M2.166 4.999A11.954 11.954 0 0010 1.944 11.954 11.954 0 0017.834 5c.11.65.166 1.32.166 2.001 0 5.225-3.34 9.67-8 11.317C5.34 16.67 2 12.225 2 7c0-.682.057-1.35.166-2.001zm11.541 3.708a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
+                </svg>
+                <span className="text-gray-400 text-sm">안전한 결제</span>
+              </div>
+              <div className="flex items-center space-x-2">
+                <svg className="w-5 h-5 text-[#d4af37]" fill="currentColor" viewBox="0 0 20 20">
+                  <path fillRule="evenodd" d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z" clipRule="evenodd" />
+                </svg>
+                <span className="text-gray-400 text-sm">개인정보 보호</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </footer>
+  );
+}
diff --git a/components/Header.tsx b/components/Header.tsx
new file mode 100644
index 0000000..8b9b591
--- /dev/null
+++ b/components/Header.tsx
@@ -0,0 +1,186 @@
+'use client';
+
+import Link from 'next/link';
+import { useEffect, useState } from 'react';
+import { createBrowserClient } from '@supabase/ssr';
+import { User } from '@supabase/supabase-js';
+
+export default function Header() {
+  const [user, setUser] = useState<User | null>(null);
+  const [tokens, setTokens] = useState<number>(0);
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
+
+  const supabase = createBrowserClient(
+    process.env.NEXT_PUBLIC_SUPABASE_URL!,
+    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
+  );
+
+  useEffect(() => {
+    const getUser = async () => {
+      const { data: { user } } = await supabase.auth.getUser();
+      setUser(user);
+
+      if (user) {
+        // 토큰 정보 가져오기
+        const { data: profile } = await supabase
+          .from('user_profiles')
+          .select('tokens')
+          .eq('user_id', user.id)
+          .single();
+
+        if (profile) {
+          setTokens(profile.tokens || 0);
+        }
+      }
+    };
+
+    getUser();
+
+    const { data: { subscription } } = supabase.auth.onAuthStateChange((_event, session) => {
+      setUser(session?.user ?? null);
+      if (!session?.user) {
+        setTokens(0);
+      }
+    });
+
+    return () => {
+      subscription.unsubscribe();
+    };
+  }, []);
+
+  return (
+    <header className="glass-nav fixed top-0 left-0 right-0 z-50">
+      <nav className="container-custom">
+        <div className="flex items-center justify-between h-16 md:h-20">
+          {/* 로고 */}
+          <Link href="/" className="flex items-center space-x-2 group">
+            <div className="w-10 h-10 bg-gradient-to-br from-[#d4af37] to-[#F3E7E3] rounded-lg flex items-center justify-center shadow-lg group-hover:scale-110 transition-transform">
+              <span className="text-[#173658] text-xl font-bold">사</span>
+            </div>
+            <span className="text-white text-xl md:text-2xl font-bold hidden sm:block">
+              사주포춘
+            </span>
+          </Link>
+
+          {/* 데스크탑 메뉴 */}
+          <div className="hidden md:flex items-center space-x-1">
+            <Link
+              href="/saju"
+              className="text-white hover:text-[#d4af37] px-4 py-2 rounded-lg transition-colors font-medium"
+            >
+              사주 분석
+            </Link>
+            <Link
+              href="/compatibility"
+              className="text-white hover:text-[#d4af37] px-4 py-2 rounded-lg transition-colors font-medium"
+            >
+              궁합
+            </Link>
+            <Link
+              href="/tojeong"
+              className="text-white hover:text-[#d4af37] px-4 py-2 rounded-lg transition-colors font-medium"
+            >
+              토정비결
+            </Link>
+            <Link
+              href="/fortune"
+              className="text-white hover:text-[#d4af37] px-4 py-2 rounded-lg transition-colors font-medium"
+            >
+              오늘의 운세
+            </Link>
+          </div>
+
+          {/* 우측 사용자 메뉴 */}
+          <div className="flex items-center space-x-3">
+            {user ? (
+              <>
+                {/* 토큰 표시 */}
+                <div className="hidden sm:flex items-center space-x-2 bg-[#F3E7E3] px-3 py-1.5 rounded-full">
+                  <svg className="w-5 h-5 text-[#d4af37]" fill="currentColor" viewBox="0 0 20 20">
+                    <path d="M8.433 7.418c.155-.103.346-.196.567-.267v1.698a2.305 2.305 0 01-.567-.267C8.07 8.34 8 8.114 8 8c0-.114.07-.34.433-.582zM11 12.849v-1.698c.22.071.412.164.567.267.364.243.433.468.433.582 0 .114-.07.34-.433.582a2.305 2.305 0 01-.567.267z" />
+                    <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-13a1 1 0 10-2 0v.092a4.535 4.535 0 00-1.676.662C6.602 6.234 6 7.009 6 8c0 .99.602 1.765 1.324 2.246.48.32 1.054.545 1.676.662v1.941c-.391-.127-.68-.317-.843-.504a1 1 0 10-1.51 1.31c.562.649 1.413 1.076 2.353 1.253V15a1 1 0 102 0v-.092a4.535 4.535 0 001.676-.662C13.398 13.766 14 12.991 14 12c0-.99-.602-1.765-1.324-2.246A4.535 4.535 0 0011 9.092V7.151c.391.127.68.317.843.504a1 1 0 101.511-1.31c-.563-.649-1.413-1.076-2.354-1.253V5z" clipRule="evenodd" />
+                  </svg>
+                  <span className="text-[#173658] font-bold text-sm">{tokens}</span>
+                </div>
+
+                {/* 프로필 버튼 */}
+                <Link
+                  href="/mypage"
+                  className="bg-[#F3E7E3] hover:bg-[#d4af37] text-[#173658] px-4 py-2 rounded-lg transition-all font-medium text-sm shadow-md hover:shadow-lg"
+                >
+                  <span className="hidden sm:inline">마이페이지</span>
+                  <span className="sm:hidden">MY</span>
+                </Link>
+              </>
+            ) : (
+              <Link
+                href="/login"
+                className="bg-[#F3E7E3] hover:bg-[#d4af37] text-[#173658] px-5 py-2 rounded-lg transition-all font-bold text-sm shadow-md hover:shadow-lg"
+              >
+                로그인
+              </Link>
+            )}
+
+            {/* 모바일 메뉴 버튼 */}
+            <button
+              onClick={() => setIsMenuOpen(!isMenuOpen)}
+              className="md:hidden text-white p-2"
+              aria-label="메뉴 열기"
+            >
+              <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                {isMenuOpen ? (
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+                ) : (
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
+                )}
+              </svg>
+            </button>
+          </div>
+        </div>
+
+        {/* 모바일 메뉴 */}
+        {isMenuOpen && (
+          <div className="md:hidden pb-4 space-y-2">
+            <Link
+              href="/saju"
+              className="block text-white hover:text-[#d4af37] px-4 py-2 rounded-lg transition-colors"
+              onClick={() => setIsMenuOpen(false)}
+            >
+              사주 분석
+            </Link>
+            <Link
+              href="/compatibility"
+              className="block text-white hover:text-[#d4af37] px-4 py-2 rounded-lg transition-colors"
+              onClick={() => setIsMenuOpen(false)}
+            >
+              궁합
+            </Link>
+            <Link
+              href="/tojeong"
+              className="block text-white hover:text-[#d4af37] px-4 py-2 rounded-lg transition-colors"
+              onClick={() => setIsMenuOpen(false)}
+            >
+              토정비결
+            </Link>
+            <Link
+              href="/fortune"
+              className="block text-white hover:text-[#d4af37] px-4 py-2 rounded-lg transition-colors"
+              onClick={() => setIsMenuOpen(false)}
+            >
+              오늘의 운세
+            </Link>
+            {user && (
+              <div className="sm:hidden flex items-center space-x-2 bg-[#F3E7E3] px-4 py-2 rounded-lg mt-2">
+                <svg className="w-5 h-5 text-[#d4af37]" fill="currentColor" viewBox="0 0 20 20">
+                  <path d="M8.433 7.418c.155-.103.346-.196.567-.267v1.698a2.305 2.305 0 01-.567-.267C8.07 8.34 8 8.114 8 8c0-.114.07-.34.433-.582zM11 12.849v-1.698c.22.071.412.164.567.267.364.243.433.468.433.582 0 .114-.07.34-.433.582a2.305 2.305 0 01-.567.267z" />
+                  <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-13a1 1 0 10-2 0v.092a4.535 4.535 0 00-1.676.662C6.602 6.234 6 7.009 6 8c0 .99.602 1.765 1.324 2.246.48.32 1.054.545 1.676.662v1.941c-.391-.127-.68-.317-.843-.504a1 1 0 10-1.51 1.31c.562.649 1.413 1.076 2.353 1.253V15a1 1 0 102 0v-.092a4.535 4.535 0 001.676-.662C13.398 13.766 14 12.991 14 12c0-.99-.602-1.765-1.324-2.246A4.535 4.535 0 0011 9.092V7.151c.391.127.68.317.843.504a1 1 0 101.511-1.31c-.563-.649-1.413-1.076-2.354-1.253V5z" clipRule="evenodd" />
+                </svg>
+                <span className="text-[#173658] font-bold">토큰: {tokens}개</span>
+              </div>
+            )}
+          </div>
+        )}
+      </nav>
+    </header>
+  );
+}
diff --git a/package.json b/package.json
index 40db9ee..d09571d 100644
--- a/package.json
+++ b/package.json
@@ -7,8 +7,9 @@
     "build": "next build",
     "start": "next start",
     "lint": "eslint",
-    "release:nas": "node scripts/deploy-nas.cjs",
-    "deploy:ssh": "cross-env NAS_DEPLOY_METHOD=ssh node scripts/deploy-nas.cjs"
+    "release:nas": "node scripts/deploy-nas-scp.cjs",
+    "deploy:ssh": "node scripts/deploy-nas-scp.cjs",
+    "deploy:rsync": "node scripts/deploy-nas.cjs"
   },
   "dependencies": {
     "@supabase/ssr": "^0.8.0",
diff --git a/scripts/deploy-nas-scp.cjs b/scripts/deploy-nas-scp.cjs
new file mode 100644
index 0000000..cc12625
--- /dev/null
+++ b/scripts/deploy-nas-scp.cjs
@@ -0,0 +1,114 @@
+#!/usr/bin/env node
+
+const { execSync } = require("child_process");
+const fs = require("fs");
+const path = require("path");
+
+const isWin = process.platform === "win32";
+const projectName = "saju-web";
+const projectRoot = path.resolve(__dirname, "..");
+
+// SSH 설정
+const sshTarget = process.env.NAS_SSH_TARGET || "bgg8988@192.168.45.54";
+const sshPath = process.env.NAS_SSH_PATH || `/volume1/docker/webpage/${projectName}`;
+const sshPort = process.env.NAS_SSH_PORT || "2300";
+
+console.log("🚀 Saju Web NAS Deployment (SCP Mode)");
+console.log("=====================================");
+console.log(`Target: ${sshTarget}:${sshPath}`);
+console.log("");
+
+try {
+  const sshCmd = sshPort ? `ssh -p ${sshPort}` : "ssh";
+  const scpCmd = sshPort ? `scp -P ${sshPort}` : "scp";
+
+  // 1. NAS에 디렉토리 생성
+  console.log("📦 Step 1: Preparing NAS directory...");
+  execSync(`${sshCmd} ${sshTarget} "mkdir -p ${sshPath}"`, {
+    stdio: "inherit",
+  });
+  console.log("✅ Directory ready");
+  console.log("");
+
+  // 2. 파일 전송 (tar + ssh pipe)
+  console.log("📤 Step 2: Transferring files to NAS...");
+  const excludeArgs = [
+    "--exclude=node_modules",
+    "--exclude=.next",
+    "--exclude=.git",
+    "--exclude=dist",
+    "--exclude=out",
+    "--exclude=.env.local",
+    "--exclude=*.log",
+    "--exclude=saju-web-deploy.tar.gz",
+  ].join(" ");
+
+  // tar로 압축하면서 동시에 ssh로 전송
+  const transferCmd = `tar -czf - ${excludeArgs} . | ${sshCmd} ${sshTarget} "cd ${sshPath} && tar -xzf -"`;
+  console.log("Transferring files (this may take a moment)...");
+
+  execSync(transferCmd, {
+    cwd: projectRoot,
+    stdio: "inherit",
+    shell: true,
+  });
+  console.log("✅ Files transferred");
+  console.log("");
+
+  // 3. NAS에서 배포
+  console.log("📝 Step 3: Deploying on NAS...");
+
+  // Docker 명령어 경로 (Synology NAS)
+  // 기본값: sudo 없이 실행
+  const dockerCmd = process.env.NAS_USE_SUDO === "true"
+    ? "sudo /usr/local/bin/docker"
+    : "/usr/local/bin/docker";
+
+  // 환경 변수 설정
+  console.log("   - Setting up environment...");
+  execSync(`${sshCmd} ${sshTarget} "cd ${sshPath} && if [ -f .env.nas ]; then cp -f .env.nas .env; fi"`, {
+    stdio: "inherit",
+  });
+
+  // Docker 빌드 및 배포
+  console.log("   - Building Docker container...");
+  execSync(`${sshCmd} ${sshTarget} "cd /volume1/docker/webpage && ${dockerCmd} compose build ${projectName}"`, {
+    stdio: "inherit",
+  });
+
+  console.log("   - Starting container...");
+  execSync(`${sshCmd} ${sshTarget} "cd /volume1/docker/webpage && ${dockerCmd} compose up -d ${projectName}"`, {
+    stdio: "inherit",
+  });
+
+  console.log("✅ Deployment complete");
+  console.log("");
+
+  // 5. 헬스체크
+  console.log("🏥 Step 4: Health check...");
+  setTimeout(() => {
+    try {
+      const healthCmd = `${sshCmd} ${sshTarget} "docker exec ${projectName} wget -q -O- http://localhost:3000/api/health"`;
+      const health = execSync(healthCmd, { encoding: "utf-8" });
+      console.log("Health check response:", health);
+      console.log("✅ Service is healthy");
+    } catch (err) {
+      console.warn("⚠️  Health check failed (service may still be starting)");
+    }
+    console.log("");
+    console.log("🎉 Deployment completed!");
+    console.log("=====================================");
+    console.log(`🌐 Access: http://gahusb.synology.me/saju`);
+    console.log("");
+  }, 3000);
+} catch (err) {
+  console.error("❌ Deployment failed:", err.message);
+
+  // 에러 발생 시 임시 파일 정리
+  const archivePath = path.join(projectRoot, "saju-web-deploy.tar.gz");
+  if (fs.existsSync(archivePath)) {
+    fs.unlinkSync(archivePath);
+  }
+
+  process.exit(1);
+}
diff --git a/scripts/deploy-nas.cjs b/scripts/deploy-nas.cjs
index d6eee7d..71d58d8 100644
--- a/scripts/deploy-nas.cjs
+++ b/scripts/deploy-nas.cjs
@@ -17,9 +17,9 @@ const dstMac = `/Volumes/gahusb.synology.me/docker/webpage/${projectName}/`;
 const dst = isWin ? dstWin : dstMac;
 
 // SSH 설정 (환경 변수에서 읽기)
-const sshTarget = process.env.NAS_SSH_TARGET || "gahusb@gahusb.synology.me";
+const sshTarget = process.env.NAS_SSH_TARGET || "bgg8988@192.168.45.54";
 const sshPath = process.env.NAS_SSH_PATH || `/volume1/docker/webpage/${projectName}`;
-const sshPort = process.env.NAS_SSH_PORT;
+const sshPort = process.env.NAS_SSH_PORT || "2300";
 
 // 제외할 파일/폴더
 const excludePatterns = [
@@ -56,9 +56,59 @@ if (process.env.NAS_DEPLOY_METHOD === "ssh" || sshTarget) {
   try {
     // 1. rsync로 파일 동기화
     console.log("📦 Step 1: Syncing files to NAS...");
-    const rsyncCmd = `rsync -avz --delete ${excludeArgs} -e "${sshCmd}" ${projectRoot}/ ${sshTarget}:${sshPath}/`;
+
+    // Windows에서 rsync 찾기 (Git Bash 또는 WSL)
+    let rsyncPath = "rsync";
+    let sourcePath = projectRoot;
+
+    if (isWin) {
+      // Git Bash에서 실행 중이면 rsync를 바로 사용 가능
+      try {
+        execSync("rsync --version", { stdio: "ignore" });
+        rsyncPath = "rsync";
+        console.log("✅ Using rsync from Git Bash");
+      } catch (err) {
+        // Git Bash가 아니면 rsync.exe 찾기
+        const possiblePaths = [
+          "C:\\Program Files\\Git\\usr\\bin\\rsync.exe",
+          "C:\\Program Files (x86)\\Git\\usr\\bin\\rsync.exe",
+          process.env.PROGRAMFILES + "\\Git\\usr\\bin\\rsync.exe",
+          process.env.LOCALAPPDATA + "\\Programs\\Git\\usr\\bin\\rsync.exe",
+        ];
+
+        for (const testPath of possiblePaths) {
+          if (fs.existsSync(testPath)) {
+            rsyncPath = testPath;
+            console.log(`✅ Found rsync at: ${testPath}`);
+            break;
+          }
+        }
+
+        // rsync를 못 찾으면 에러 메시지
+        if (rsyncPath === "rsync") {
+          console.error("❌ rsync not found on Windows");
+          console.log("");
+          console.log("💡 Debug: Let's find rsync");
+          console.log("   Run this in Git Bash: which rsync");
+          console.log("");
+          console.log("   Then update the script with the correct path.");
+          console.log("");
+          console.log("   Or use SMB mount deployment:");
+          console.log("   npm run release:nas");
+          console.log("");
+          process.exit(1);
+        }
+      }
+
+      // Windows 경로를 Git Bash 스타일로 변환 (C:\... -> /c/...)
+      sourcePath = projectRoot
+        .replace(/\\/g, "/")
+        .replace(/^([A-Z]):/, (match, drive) => `/${drive.toLowerCase()}`);
+    }
+
+    const rsyncCmd = `"${rsyncPath}" -avz --delete ${excludeArgs} -e "${sshCmd}" "${sourcePath}/" ${sshTarget}:${sshPath}/`;
     console.log(`Command: ${rsyncCmd}`);
-    execSync(rsyncCmd, { stdio: "inherit" });
+    execSync(rsyncCmd, { stdio: "inherit", shell: true });
     console.log("✅ Files synced successfully");
     console.log("");