🎯 오늘의 띠별 궁합 운세 - 동양 12띠 궁합 테스트

g5se가 설치된 디렉터리(루트에 `index.php`·`app/`이 있는 곳)에서 작업을 시작합니다. (g5se 설치는 https://github.com/gnuboard/g5se 참고)

**목표**: 띠별 궁합 운세 페이지의 기본 골격을 만들고, 12띠 카드 선택 UI를 구현합니다.

**작업 내용**:

1. `app/modules/zodiac-compat/` 폴더를 생성하고 그 안에 `index.php` 파일을 만듭니다.

2. `index.php`에 다음 내용을 작성합니다:
   - `_common.php` 인클루드 (g5se 진입 컨텍스트)
   - modern shell 골격 적용:
     ```php
     <?php
     include_once('./_common.php');
     
     require_once(G5_THEME_PATH.'/modern/_head.inc.php');
     include_once('./head.sub.php');
     ?>
     <div class="m-shell">
         <?php require G5_THEME_PATH.'/modern/_nav.inc.php'; ?>
         <main class="m-container" style="padding: 32px 20px 48px;">
             <!-- 페이지 본문 -->
         </main>
         <?php require G5_THEME_PATH.'/modern/_footer.inc.php'; ?>
     </div>
     <?php include_once('./tail.sub.php'); ?>
     ```

3. `<main>` 안에 다음 HTML 구조를 작성:
   - **헤더 섹션**: 페이지 제목 "🎯 오늘의 띠별 궁합 운세", 부제 "두 사람의 띠를 선택해보세요"
   - **선택 단계 표시**: "1단계: 내 띠 선택" 텍스트 (나중에 동적으로 변경될 영역)
   - **12띠 카드 그리드**: 4열 그리드로 12개의 카드 배치. 각 카드는 `<button>` 태그로 만들고, 다음 정보 포함:
     - 띠 이모지 (🐭쥐, 🐮소, 🐯호랑이, 🐰토끼, 🐲용, 🐍뱀, 🐴말, 🐑양, 🐵원숭이, 🐔닭, 🐶개, 🐷돼지)
     - 띠 이름 (한글)
     - `data-zodiac` 속성에 영문 띠 이름 저장 (예: `data-zodiac="rat"`)
   - **결과 화면 영역**: 초기에는 `display: none`으로 숨김. 나중에 JavaScript로 표시

4. CSS 스타일 작성 (`<style>` 블록을 `<main>` 안에 인라인으로 추가):
   - 헤더: 중앙 정렬, 큰 제목 폰트 크기, `color: var(--m-text)`
   - 카드 그리드: `display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;` (모바일은 2열로 반응형 조정)
   - 각 카드:
     - `background: var(--m-surface);`
     - `border: 2px solid transparent;`
     - `border-radius: var(--m-radius-lg);`
     - `box-shadow: var(--m-shadow);`
     - `padding: 20px;`
     - `cursor: pointer;`
     - 호버 시: `transform: scale(1.05); border-color: #ff6b6b;` (빨간 강조색)
     - 선택 시: `border-color: #ff6b6b; background: rgba(255, 107, 107, 0.1);`
   - 이모지: `font-size: 48px;`
   - 띠 이름: `color: var(--m-text); font-weight: 600;`

5. JavaScript 기본 구조 작성 (`<script>` 블록을 `</main>` 직전에 추가):
   - 변수 선언: `let myZodiac = null; let partnerZodiac = null; let step = 1;`
   - 카드 클릭 이벤트 리스너:
     - 클릭 시 `data-zodiac` 값을 가져와서 `step`에 따라 `myZodiac` 또는 `partnerZodiac`에 저장
     - 선택된 카드에 `selected` 클래스 추가 (CSS로 스타일 변경)
     - `step`이 1이면 "2단계: 상대방 띠 선택"으로 텍스트 변경하고 `step`을 2로 증가
     - `step`이 2이면 결과 화면으로 전환하는 함수 호출 (다음 단계에서 구현)

**예상 결과**: `/zodiac-compat` URL로 접속하면 12띠 카드가 4열 그리드로 표시되고, 카드 호버 시 확대 애니메이션이 작동합니다. 첫 번째 카드를 클릭하면 "2단계: 상대방 띠 선택" 안내가 나타나고, 두 번째 카드를 클릭하면 콘솔에 선택된 띠 정보가 출력됩니다 (아직 결과 화면은 없음).

**목표**: 띠 조합에 따른 궁합 점수 계산 로직을 구현하고, 결과 화면을 만듭니다.

**작업 내용**:

1. JavaScript에 궁합 데이터 객체 추가 (`<script>` 블록 최상단):
   ```javascript
   const compatibilityData = {
       // 키 형식: "띠1_띠2" (알파벳 순서로 정렬)
       "rat_dragon": { score: 95, message: "천생연분이에요! 서로를 완벽하게 이해하는 최고의 조합입니다. 🎉" },
       "rat_monkey": { score: 90, message: "환상의 케미! 함께 있으면 즐거운 시간이 가득합니다. 🌟" },
       "rat_horse": { score: 40, message: "상극 관계예요. 서로 다른 점을 인정하는 노력이 필요합니다. 💪" },
       // ... (모든 조합 66개 추가 — 12C2 = 66)
       // 점수 분포: 90~100점(최고 궁합) 10개, 70~89점(좋은 궁합) 20개, 50~69점(보통) 20개, 50점 미만(상극) 16개
   };
   ```
   ※ AI에게 "12띠의 전통적인 궁합 이론을 참고하여 66개 조합의 점수와 메시지를 생성해주세요. 같은 띠끼리는 75점 정도로 설정하고, 삼합(三合)·육합(六合) 관계는 90점 이상, 육충(六沖) 관계는 40점 이하로 해주세요."라고 요청

2. 궁합 점수 계산 함수 작성:
   ```javascript
   function getCompatibility(zodiac1, zodiac2) {
       // 알파벳 순서로 정렬하여 키 생성
       const key = [zodiac1, zodiac2].sort().join('_');
       return compatibilityData[key] || { score: 60, message: "평범한 궁합이에요. 노력하면 좋은 관계를 만들 수 있습니다." };
   }
   ```

3. 결과 화면 HTML 구조 추가 (`<main>` 안, 카드 그리드 아래):
   ```html
   <div id="result-screen" style="display: none;">
       <div class="result-header">
           <h2>궁합 결과</h2>
       </div>
       <div class="result-zodiacs">
           <div class="result-zodiac" id="my-zodiac-result">
               <div class="zodiac-emoji">🐭</div>
               <div class="zodiac-name">쥐띠</div>
           </div>
           <div class="result-heart">💕</div>
           <div class="result-zodiac" id="partner-zodiac-result">
               <div class="zodiac-emoji">🐲</div>
               <div class="zodiac-name">용띠</div>
           </div>
       </div>
       <div class="result-score">
           <div class="score-label">궁합 점수</div>
           <div class="score-value" id="score-value">95</div>
           <div class="score-bar">
               <div class="score-fill" id="score-fill" style="width: 95%;"></div>
           </div>
       </div>
       <div class="result-message" id="result-message">
           천생연분이에요! 서로를 완벽하게 이해하는 최고의 조합입니다. 🎉
       </div>
       <button id="retry-btn" class="retry-button">다시 하기</button>
   </div>
   ```

4. 결과 화면 CSS 추가:
   - `#result-screen`: `text-align: center; animation: fadeIn 0.5s;`
   - `.result-zodiacs`: 가로 배치 (`display: flex; justify-content: center; align-items: center; gap: 20px;`)
   - `.result-zodiac`: 세로 배치, 이모지 크기 `72px`, 이름 `font-size: 18px;`
   - `.result-heart`: `font-size: 48px;`
   - `.score-value`: `font-size: 64px; font-weight: bold; color: #ff6b6b;`
   - `.score-bar`: `width: 100%; max-width: 400px; height: 20px; background: var(--m-surface); border-radius: 10px; margin: 20px auto; overflow: hidden;`
   - `.score-fill`: `height: 100%; background: linear-gradient(90deg, #ff6b6b, #ff8787); transition: width 1s ease;`
   - `.retry-button`: `padding: 12px 32px; background: #ff6b6b; color: white; border: none; border-radius: var(--m-radius-lg); cursor: pointer; font-size: 16px;`
   - `@keyframes fadeIn`: `from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); }`

5. 결과 화면 표시 함수 작성:
   ```javascript
   function showResult() {
       const compat = getCompatibility(myZodiac, partnerZodiac);
       
       // 띠 정보 업데이트
       document.querySelector('#my-zodiac-result .zodiac-emoji').textContent = getZodiacEmoji(myZodiac);
       document.querySelector('#my-zodiac-result .zodiac-name').textContent = getZodiacName(myZodiac);
       document.querySelector('#partner-zodiac-result .zodiac-emoji').textContent = getZodiacEmoji(partnerZodiac);
       document.querySelector('#partner-zodiac-result .zodiac-name').textContent = getZodiacName(partnerZodiac);
       
       // 점수 및 메시지 업데이트
       document.getElementById('score-value').textContent = compat.score;
       document.getElementById('score-fill').style.width = compat.score + '%';
       document.getElementById('result-message').textContent = compat.message;
       
       // 화면 전환
       document.querySelector('.zodiac-cards').style.display = 'none';
       document.getElementById('result-screen').style.display = 'block';
   }
   
   // 헬퍼 함수
   function getZodiacEmoji(zodiac) {
       const emojis = { rat: '🐭', ox: '🐮', tiger: '🐯', rabbit: '🐰', dragon: '🐲', snake: '🐍', horse: '🐴', goat: '🐑', monkey: '🐵', rooster: '🐔', dog: '🐶', pig: '🐷' };
       return emojis[zodiac];
   }
   
   function getZodiacName(zodiac) {
       const names = { rat: '쥐띠', ox: '소띠', tiger: '호랑이띠', rabbit: '토끼띠', dragon: '용띠', snake: '뱀띠', horse: '말띠', goat: '양띠', monkey: '원숭이띠', rooster: '닭띠', dog: '개띠', pig: '돼지띠' };
       return names[zodiac];
   }
   ```

6. "다시 하기" 버튼 이벤트 추가:
   ```javascript
   document.getElementById('retry-btn').addEventListener('click', function() {
       myZodiac = null;
       partnerZodiac = null;
       step = 1;
       document.querySelectorAll('.zodiac-card').forEach(card => card.classList.remove('selected'));
       document.querySelector('.step-indicator').textContent = '1단계: 내 띠 선택';
       document.querySelector('.zodiac-cards').style.display = 'grid';
       document.getElementById('result-screen').style.display = 'none';
   });
   ```

**예상 결과**: 두 개의 띠를 선택하면 카드 그리드가 사라지고 결과 화면이 페이드인 애니메이션과 함께 나타납니다. 선택한 두 띠의 이모지와 이름, 궁합 점수(프로그레스 바로 시각화), 메시지가 표시됩니다. "다시 하기" 버튼을 클릭하면 초기 화면으로 돌아갑니다.

**목표**: SQLite 데이터베이스를 연동하여 조회된 띠 조합을 기록하고, 페이지 하단에 인기 조합 TOP 3를 표시합니다.

**작업 내용**:

1. PHP 코드 상단에 DB 연결 및 테이블 생성 로직 추가 (modern shell 인클루드 전):
   ```php
   <?php
   include_once('./_common.php');
   
   // SQLite DB 설정
   $db_dir = G5_DATA_PATH.'/modules';
   @mkdir($db_dir, 0707, true); // 디렉터리가 없으면 생성
   $db_path = $db_dir.'/zodiac_compatibility.sqlite';
   
   try {
       $pdo = new PDO('sqlite:'.$db_path);
       $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
       
       // 테이블 생성 (첫 접근 시 자동 생성)
       $pdo->exec("CREATE TABLE IF NOT EXISTS compatibility_logs (
           id INTEGER PRIMARY KEY AUTOINCREMENT,
           zodiac1 TEXT NOT NULL,
           zodiac2 TEXT NOT NULL,
           score INTEGER NOT NULL,
           created_at DATETIME DEFAULT CURRENT_TIMESTAMP
       )");
       
       // 인덱스 생성 (조회 성능 향상)
       $pdo->exec("CREATE INDEX IF NOT EXISTS idx_zodiacs ON compatibility_logs(zodiac1, zodiac2)");
   } catch (PDOException $e) {
       die('DB 연결 실패: ' . htmlspecialchars($e->getMessage()));
   }
   
   // AJAX 요청 처리
   if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['action'])) {
       header('Content-Type: application/json');
       
       if ($_POST['action'] === 'save_result') {
           $zodiac1 = $_POST['zodiac1'] ?? '';
           $zodiac2 = $_POST['zodiac2'] ?? '';
           $score = (int)($_POST['score'] ?? 0);
           
           // 알파벳 순서로 정렬
           $zodiacs = [$zodiac1, $zodiac2];
           sort($zodiacs);
           
           $stmt = $pdo->prepare("INSERT INTO compatibility_logs (zodiac1, zodiac2, score) VALUES (?, ?, ?)");
           $stmt->execute([$zodiacs[0], $zodiacs[1], $score]);
           
           echo json_encode(['success' => true]);
           exit;
       }
       
       if ($_POST['action'] === 'get_popular') {
           $stmt = $pdo->query("
               SELECT zodiac1, zodiac2, COUNT(*) as count, AVG(score) as avg_score
               FROM compatibility_logs
               GROUP BY zodiac1, zodiac2
               ORDER BY count DESC
               LIMIT 3
           ");
           $popular = $stmt->fetchAll(PDO::FETCH_ASSOC);
           
           echo json_encode($popular);
           exit;
       }
   }
   
   require_once(G5_THEME_PATH.'/modern/_head.inc.php');
   include_once('./head.sub.php');
   ?>
   ```

2. JavaScript에 결과 저장 함수 추가 (`showResult()` 함수 끝에):
   ```javascript
   function showResult() {
       const compat = getCompatibility(myZodiac, partnerZodiac);
       
       // ... (기존 코드)
       
       // DB에 결과 저장
       fetch(window.location.href, {
           method: 'POST',
           headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
           body: new URLSearchParams({
               action: 'save_result',
               zodiac1: myZodiac,
               zodiac2: partnerZodiac,
               score: compat.score
           })
       });
       
       // 화면 전환
       document.querySelector('.zodiac-cards').style.display = 'none';
       document.getElementById('result-screen').style.display = 'block';
   }
   ```

3. 인기 조합 섹션 HTML 추가 (`<main>` 끝, `#result-screen` 아래):
   ```html
   <div class="popular-section">
       <h3>🔥 인기 조합 TOP 3</h3>
       <div id="popular-list" class="popular-list">
           <div class="loading">데이터 로딩 중...</div>
       </div>
   </div>
   ```

4. 인기 조합 CSS 추가:
   - `.popular-section`: `margin-top: 60px; padding-top: 40px; border-top: 1px solid rgba(128,128,128,0.2);`
   - `.popular-list`: `display: grid; gap: 16px; margin-top: 20px;`
   - `.popular-item`: `background: var(--m-surface); border-radius: var(--m-radius-lg); padding: 20px; box-shadow: var(--m-shadow); display: flex; justify-content: space-between; align-items: center;`
   - `.popular-zodiacs`: `display: flex; gap: 12px; align-items: center; font-size: 24px;`
   - `.popular-stats`: `text-align: right; color: var(--m-text-muted); font-size: 14px;`

5. 인기 조합 로딩 함수 작성 (페이지 로드 시 실행):
   ```javascript
   function loadPopularCombinations() {
       fetch(window.location.href, {
           method: 'POST',
           headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
           body: new URLSearchParams({ action: 'get_popular' })
       })
       .then(res => res.json())
       .then(data => {
           const container = document.getElementById('popular-list');
           
           if (data.length === 0) {
               container.innerHTML = '<div class="no-data">아직 데이터가 없습니다. 첫 번째 조회자가 되어보세요!</div>';
               return;
           }
           
           container.innerHTML = data.map((item, index) => `
               <div class="popular-item">
                   <div class="popular-rank">${index + 1}위</div>
                   <div class="popular-zodiacs">
                       ${getZodiacEmoji(item.zodiac1)} × ${getZodiacEmoji(item.zodiac2)}
                       <span>${getZodiacName(item.zodiac1)} & ${getZodiacName(item.zodiac2)}</span>
                   </div>
                   <div class="popular-stats">
                       <div>조회수: ${item.count}회</div>
                       <div>평균 점수: ${Math.round(item.avg_score)}점</div>
                   </div>
               </div>
           `).join('');
       })
       .catch(err => {
           console.error('인기 조합 로딩 실패:', err);
           document.getElementById('popular-list').innerHTML = '<div class="error">데이터를 불러올 수 없습니다.</div>';
       });
   }
   
   // 페이지 로드 시 실행
   document.addEventListener('DOMContentLoaded', loadPopularCombinations);
   ```

6. "다시 하기" 버튼 클릭 시 인기 조합 새로고침 추가:
   ```javascript
   document.getElementById('retry-btn').addEventListener('click', function() {
       // ... (기존 코드)
       loadPopularCombinations(); // 추가
   });
   ```

**예상 결과**: 띠 조합을 조회할 때마다 SQLite DB에 기록이 저장되고, 페이지 하단에 가장 많이 조회된 조합 TOP 3가 실시간으로 표시됩니다. 인기 조합 섹션에는 순위, 띠 이모지, 조회수, 평균 점수가 표시됩니다. DB 파일은 `G5_DATA_PATH/modules/zodiac_compatibility.sqlite` 경로에 자동 생성됩니다.