feat: 사주 웹사이트 핵심 기능 구현

- 사주팔자 계산 라이브러리 구현 (천간, 지지, 십성, 십이운성)
- 사주 결과 페이지 구현 (사주팔자 표 및 해석)
- 오늘의 운세 페이지 구현 (일일 운세, 행운의 요소)
- 궁합 보기 기능 구현 (두 사람 입력 폼)
- 궁합 결과 페이지 구현 (종합 점수, 세부 분석)
- 페이지 간 네비게이션 연결

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

app/compatibility/page.tsx

@@ -0,0 +1,100 @@
+import Link from 'next/link';
+import CompatibilityForm from '../components/CompatibilityForm';
+
+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>
+
+      {/* Hero Section */}
+      <section className="pt-20 pb-32 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>
+
+          <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>
+
+          <p className="text-xl text-gray-600 mb-12 max-w-2xl mx-auto">
+            사주팔자를 비교하여 두 사람의 궁합을 확인할 수 있습니다.
+            연애, 결혼, 사업 등 다양한 관계의 궁합을 알아보세요.
+          </p>
+        </div>
+
+        {/* Input Form */}
+        <div className="max-w-6xl mx-auto">
+          <CompatibilityForm />
+        </div>
+      </section>
+
+      {/* 궁합 정보 */}
+      <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>
+          </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-5xl mb-4">💑</div>
+              <h3 className="text-xl font-bold text-gray-900 mb-3">연애 궁합</h3>
+              <p className="text-gray-600">
+                두 사람의 사랑이 얼마나 잘 맞는지 확인하고 서로를 이해하는 방법을 알아보세요.
+              </p>
+            </div>
+
+            <div className="text-center p-6 rounded-2xl hover:bg-purple-50 transition">
+              <div className="text-5xl mb-4">💍</div>
+              <h3 className="text-xl font-bold text-gray-900 mb-3">결혼 궁합</h3>
+              <p className="text-gray-600">
+                평생을 함께할 배우자와의 궁합을 확인하고 행복한 결혼 생활을 준비하세요.
+              </p>
+            </div>
+
+            <div className="text-center p-6 rounded-2xl hover:bg-indigo-50 transition">
+              <div className="text-5xl mb-4">🤝</div>
+              <h3 className="text-xl font-bold text-gray-900 mb-3">사업 궁합</h3>
+              <p className="text-gray-600">
+                사업 파트너와의 궁합을 확인하고 성공적인 협력 관계를 만들어보세요.
+              </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-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>
+    </div>
+  );
+}