🎯 g5se 타로 운세 카드 뽑기 - 오늘의 메시지 & 해석

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

## 1단계: 프로젝트 폴더 생성 & modern shell 골격 적용

`app/modules/tarot-fortune/index.php` 파일을 생성하고, g5se modern shell 골격을 적용하세요.

**파일 경로:** `app/modules/tarot-fortune/index.php`

**요구사항:**
1. g5se 공통 파일 인클루드:
   - `_common.php` (상대경로 `./_common.php`)
   - modern shell 헤더: `G5_THEME_PATH.'/modern/_head.inc.php'`
   - `head.sub.php` (상대경로 `./head.sub.php`)

2. modern shell 구조:
   ```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 구조 추가:
   - 페이지 제목: `<h1>` 태그로 "🔮 오늘의 타로 운세" 표시
   - 안내 문구: "카드를 클릭하여 오늘의 메시지를 받아보세요" (작은 회색 텍스트)
   - 카드 컨테이너: `<div class="tarot-card-container">` 안에 카드 앞면/뒷면을 담을 구조 준비 (아직 빈 상태로 두고 다음 단계에서 채움)
   - "다시 뽑기" 버튼 (초기에는 숨김 상태)
   - 운세 메시지 영역 (`<div class="fortune-message">`, 초기 숨김)

4. 기본 CSS 스타일:
   - `<main>` 안에 `<style>` 블록 추가
   - 페이지 제목 중앙 정렬, 여백 설정
   - 카드 컨테이너 중앙 정렬 (`display: flex; justify-content: center;`)
   - 다크모드 대응을 위해 배경/텍스트 색상은 `var(--m-surface)`, `var(--m-text)` 사용

**출력 예시:**
- 페이지 제목 "🔮 오늘의 타로 운세"가 중앙 상단에 표시
- 안내 문구가 제목 아래 작게 표시
- 카드 컨테이너 영역이 중앙에 비어있음 (다음 단계에서 카드 추가)
- 페이지가 g5se의 nav/footer와 함께 렌더링되어 사이트 전체와 시각적 일관성 유지

이 단계를 완료하면 `/tarot-fortune` URL로 접속 시 빈 골격이 표시됩니다.

## 2단계: 타로 카드 데이터 정의 & 카드 덱 UI 구현

타로 카드 데이터를 PHP 배열로 정의하고, 카드 뒷면 이미지를 클릭 가능한 UI로 구현하세요.

**요구사항:**

1. **타로 카드 데이터 배열 (PHP):**
   - `app/modules/tarot-fortune/index.php` 파일 상단 (로직 영역, `_head.inc.php` 인클루드 전)에 타로 카드 데이터를 배열로 정의
   - 메이저 아르카나 22장 중 대표적인 5~7장 정도 샘플 데이터 작성 (예: The Fool, The Magician, The Lovers, The Tower, The Sun 등)
   - 각 카드는 다음 정보를 포함:
     ```php
     [
         'name' => '카드 이름 (한글)',
         'symbol' => '🃏', // 이모지 심볼
         'keyword' => '키워드 (예: 새로운 시작, 열정, 사랑)',
         'message' => '오늘의 운세 메시지 (2~3문장)',
         'color' => '#FF6B6B' // 카드별 고유 색상 (그라데이션용)
     ]
     ```
   - 배열 변수명: `$tarotCards`

2. **카드 덱 HTML 구조:**
   - `<div class="tarot-card-container">` 안에 카드를 추가
   - 카드는 앞면(`.card-front`)과 뒷면(`.card-back`)으로 구성된 flip 구조로 작성
   - 카드 뒷면에는 "🔮 타로" 텍스트와 장식 패턴 표시
   - 카드 앞면은 초기에 숨김 상태 (JavaScript로 flip 시 표시)
   - 카드 전체를 감싸는 `.card-wrapper`에 `cursor: pointer` 스타일 적용

3. **카드 스타일링 (CSS):**
   - 카드 크기: 가로 200px, 세로 300px (모바일에서는 vw 단위로 반응형 조정)
   - 카드에 둥근 모서리 (`border-radius: var(--m-radius-lg)`)
   - 카드에 그림자 효과 (`box-shadow: var(--m-shadow)`)
   - 카드 뒷면 배경: 보라색 계열 그라데이션 (예: `linear-gradient(135deg, #667eea 0%, #764ba2 100%)`)
   - 카드 뒷면 중앙에 "🔮 타로" 텍스트를 크게 표시 (흰색, 중앙 정렬)
   - 호버 시 카드가 살짝 위로 올라가는 효과 (`transform: translateY(-5px)`, `transition: 0.3s`)

4. **초기 상태:**
   - 페이지 로드 시 카드는 뒷면만 보이고, 앞면은 숨김 (`display: none` 또는 `rotateY(180deg)`)
   - "다시 뽑기" 버튼과 운세 메시지 영역은 숨김 상태 유지

**출력 예시:**
- 페이지 중앙에 보라색 그라데이션 카드 뒷면이 표시됨
- 카드에 마우스를 올리면 살짝 위로 올라가는 호버 효과
- 카드 뒷면 중앙에 "🔮 타로" 텍스트가 크게 표시
- 아직 클릭 이벤트는 없으므로 클릭해도 반응 없음 (다음 단계에서 추가)

이 단계를 완료하면 카드 뒷면이 시각적으로 표시되고, 타로 카드 데이터가 PHP 배열로 준비됩니다.

## 3단계: 카드 뽑기 JavaScript 구현 & 3D Flip 애니메이션

카드를 클릭하면 랜덤으로 타로 카드를 뽑아 3D flip 애니메이션으로 뒤집고, 카드 정보와 운세 메시지를 표시하세요.

**요구사항:**

1. **PHP에서 JavaScript로 데이터 전달:**
   - `<script>` 블록에서 PHP의 `$tarotCards` 배열을 JavaScript 변수로 변환
   - `const tarotCards = <?php echo json_encode($tarotCards); ?>;`로 JSON 인코딩하여 전달

2. **카드 뽑기 로직 (JavaScript):**
   - 카드 클릭 시 `tarotCards` 배열에서 랜덤으로 1장 선택
   - `Math.random()`과 `Math.floor()`를 사용하여 랜덤 인덱스 생성
   - 선택된 카드 데이터를 변수에 저장

3. **3D Flip 애니메이션:**
   - 카드 클릭 시 `.card-wrapper`에 `.flipped` 클래스 추가
   - CSS에서 `.flipped` 클래스가 추가되면 카드가 Y축 기준으로 180도 회전하도록 설정
   - `transform-style: preserve-3d` 및 `backface-visibility: hidden` 속성을 사용하여 3D 효과 구현
   - 애니메이션 지속 시간: 0.6초 (`transition: transform 0.6s`)

4. **카드 앞면 내용 업데이트:**
   - 카드가 뒤집히기 전에 앞면 내용을 선택된 카드 데이터로 업데이트
   - 카드 앞면에 표시할 내용:
     - 카드 이름 (`<h2>`)
     - 심볼 이모지 (큰 크기로)
     - 키워드 (`<p class="keyword">`)
   - 카드 앞면 배경색을 선택된 카드의 `color` 값으로 동적 설정 (그라데이션)

5. **운세 메시지 표시:**
   - 카드 flip 애니메이션 완료 후 (0.6초 후) 운세 메시지 영역을 페이드인으로 표시
   - 메시지 영역에 선택된 카드의 `message` 텍스트 삽입
   - 페이드인 효과: `opacity: 0`에서 `opacity: 1`로 전환 (CSS transition 사용)

6. **다시 뽑기 버튼 표시:**
   - 운세 메시지와 함께 "다시 뽑기" 버튼을 페이드인으로 표시
   - 버튼 클릭 시:
     - 카드를 다시 뒷면으로 뒤집음 (`.flipped` 클래스 제거)
     - 운세 메시지와 버튼을 숨김
     - 사용자가 다시 카드를 클릭할 수 있도록 준비

**출력 예시:**
- 카드 클릭 시 부드럽게 Y축으로 180도 회전하며 앞면이 나타남
- 카드 앞면에 선택된 타로 카드의 이름, 심볼, 키워드가 표시됨
- 카드 앞면 배경색이 카드별 고유 색상으로 변경됨
- 카드 아래에 운세 메시지가 페이드인으로 나타남
- "다시 뽑기" 버튼이 표시되며, 클릭 시 카드가 다시 뒷면으로 뒤집힘

이 단계를 완료하면 타로 카드 뽑기 핵심 기능이 완성됩니다.