feat: 음력 변환, 대운 계산, 소셜 공유 기능 추가

- 음력 변환 기능 구현
  - lunar-calendar 라이브러리 추가
  - 음력-양력 변환 유틸리티 생성
  - 모든 입력 폼에 양력/음력 선택 및 윤달 옵션 추가
  - SajuForm, CompatibilityForm에 음력 지원

- 대운(大運) 계산 기능 구현
  - 10년 단위 대운 계산 알고리즘
  - 현재 대운 표시 및 해석
  - 사주팔자 결과 페이지에 대운 섹션 추가
  - 8개 대운 (80년치) 표시

- 소셜 공유 기능 구현
  - ShareButtons 컴포넌트 생성
  - 카카오톡, 페이스북, 트위터 공유
  - 네이티브 공유 API 지원
  - 링크 복사 기능
  - 모든 결과 페이지에 공유 버튼 추가

- 메타데이터 개선
  - 사이트 제목 및 설명 최적화
  - 한국어(ko) 설정
  - 카카오 SDK 추가

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

app/components/CompatibilityForm.tsx

@@ -2,6 +2,7 @@
 
 import { useState } from 'react';
 import { useRouter } from 'next/navigation';
+import { lunarToSolar } from '@/lib/lunar-utils';
 
 export default function CompatibilityForm() {
   const router = useRouter();
@@ -12,6 +13,8 @@ export default function CompatibilityForm() {
   const [day1, setDay1] = useState('');
   const [hour1, setHour1] = useState('');
   const [gender1, setGender1] = useState<'male' | 'female'>('male');
+  const [calendarType1, setCalendarType1] = useState<'solar' | 'lunar'>('solar');
+  const [isLeapMonth1, setIsLeapMonth1] = useState(false);
 
   // Person 2
   const [year2, setYear2] = useState('');
@@ -19,6 +22,8 @@ export default function CompatibilityForm() {
   const [day2, setDay2] = useState('');
   const [hour2, setHour2] = useState('');
   const [gender2, setGender2] = useState<'male' | 'female'>('female');
+  const [calendarType2, setCalendarType2] = useState<'solar' | 'lunar'>('solar');
+  const [isLeapMonth2, setIsLeapMonth2] = useState(false);
 
   const handleSubmit = (e: React.FormEvent) => {
     e.preventDefault();
@@ -33,15 +38,33 @@ export default function CompatibilityForm() {
       return;
     }
 
+    let finalYear1 = year1, finalMonth1 = month1, finalDay1 = day1;
+    let finalYear2 = year2, finalMonth2 = month2, finalDay2 = day2;
+
+    // 음력인 경우 양력으로 변환
+    if (calendarType1 === 'lunar') {
+      const solar = lunarToSolar(parseInt(year1), parseInt(month1), parseInt(day1), isLeapMonth1);
+      finalYear1 = solar.year.toString();
+      finalMonth1 = solar.month.toString();
+      finalDay1 = solar.day.toString();
+    }
+
+    if (calendarType2 === 'lunar') {
+      const solar = lunarToSolar(parseInt(year2), parseInt(month2), parseInt(day2), isLeapMonth2);
+      finalYear2 = solar.year.toString();
+      finalMonth2 = solar.month.toString();
+      finalDay2 = solar.day.toString();
+    }
+
     // URL 파라미터로 전달
     const params = new URLSearchParams({
-      year1,
-      month1,
-      day1,
+      year1: finalYear1,
+      month1: finalMonth1,
+      day1: finalDay1,
       gender1,
-      year2,
-      month2,
-      day2,
+      year2: finalYear2,
+      month2: finalMonth2,
+      day2: finalDay2,
       gender2,
     });
 
@@ -126,6 +149,50 @@ export default function CompatibilityForm() {
             </select>
           </div>
 
+          {/* 양력/음력 선택 */}
+          <div>
+            <label className="block text-left text-sm font-semibold text-gray-700 mb-2">
+              생일 구분
+            </label>
+            <div className="grid grid-cols-2 gap-3">
+              <button
+                type="button"
+                onClick={() => setCalendarType1('solar')}
+                className={`px-6 py-3 rounded-xl font-semibold transition ${
+                  calendarType1 === 'solar'
+                    ? 'bg-pink-600 text-white'
+                    : 'bg-white border-2 border-gray-200 text-gray-700 hover:border-pink-500 hover:text-pink-600'
+                }`}
+              >
+                양력
+              </button>
+              <button
+                type="button"
+                onClick={() => setCalendarType1('lunar')}
+                className={`px-6 py-3 rounded-xl font-semibold transition ${
+                  calendarType1 === 'lunar'
+                    ? 'bg-pink-600 text-white'
+                    : 'bg-white border-2 border-gray-200 text-gray-700 hover:border-pink-500 hover:text-pink-600'
+                }`}
+              >
+                음력
+              </button>
+            </div>
+            {calendarType1 === 'lunar' && (
+              <div className="mt-3">
+                <label className="flex items-center justify-center gap-2 text-sm text-gray-600 cursor-pointer">
+                  <input
+                    type="checkbox"
+                    checked={isLeapMonth1}
+                    onChange={(e) => setIsLeapMonth1(e.target.checked)}
+                    className="w-4 h-4 text-pink-600 border-gray-300 rounded focus:ring-pink-500"
+                  />
+                  <span>윤달</span>
+                </label>
+              </div>
+            )}
+          </div>
+
           {/* 성별 선택 */}
           <div>
             <label className="block text-left text-sm font-semibold text-gray-700 mb-2">
@@ -230,6 +297,50 @@ export default function CompatibilityForm() {
             </select>
           </div>
 
+          {/* 양력/음력 선택 */}
+          <div>
+            <label className="block text-left text-sm font-semibold text-gray-700 mb-2">
+              생일 구분
+            </label>
+            <div className="grid grid-cols-2 gap-3">
+              <button
+                type="button"
+                onClick={() => setCalendarType2('solar')}
+                className={`px-6 py-3 rounded-xl font-semibold transition ${
+                  calendarType2 === 'solar'
+                    ? 'bg-purple-600 text-white'
+                    : 'bg-white border-2 border-gray-200 text-gray-700 hover:border-purple-500 hover:text-purple-600'
+                }`}
+              >
+                양력
+              </button>
+              <button
+                type="button"
+                onClick={() => setCalendarType2('lunar')}
+                className={`px-6 py-3 rounded-xl font-semibold transition ${
+                  calendarType2 === 'lunar'
+                    ? 'bg-purple-600 text-white'
+                    : 'bg-white border-2 border-gray-200 text-gray-700 hover:border-purple-500 hover:text-purple-600'
+                }`}
+              >
+                음력
+              </button>
+            </div>
+            {calendarType2 === 'lunar' && (
+              <div className="mt-3">
+                <label className="flex items-center justify-center gap-2 text-sm text-gray-600 cursor-pointer">
+                  <input
+                    type="checkbox"
+                    checked={isLeapMonth2}
+                    onChange={(e) => setIsLeapMonth2(e.target.checked)}
+                    className="w-4 h-4 text-purple-600 border-gray-300 rounded focus:ring-purple-500"
+                  />
+                  <span>윤달</span>
+                </label>
+              </div>
+            )}
+          </div>
+
           {/* 성별 선택 */}
           <div>
             <label className="block text-left text-sm font-semibold text-gray-700 mb-2">