🎯 타로 카드 리딩 - 오늘의 운세 & 조언

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

**Step 1: 타로 카드 리딩 페이지 기본 골격 생성**

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

요구사항:
1. 파일 경로: `app/modules/tarot-card-reading/index.php`
2. modern shell 골격 포함:
   - `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;">`
   - 본문 영역
   - `<?php require G5_THEME_PATH.'/modern/_footer.inc.php'; ?>`
   - `</div>` (m-shell 닫기)
   - `<?php include_once('./tail.sub.php');`
3. 본문에는 다음 요소 포함:
   - 페이지 제목: `<h1>` 태그로 "🔮 타로 카드 리딩"
   - 안내 문구: "카드를 한 장 선택하면 오늘의 운세를 알려드립니다."
   - 카드 덱 영역: `<div id="card-deck">` (비어있음 — 다음 단계에서 JS로 채울 예정)
   - 결과 영역: `<div id="result" style="display:none;">` (초기에는 숨김)
4. 디자인 토큰 사용:
   - 본문 배경: `background: var(--m-surface);`
   - 텍스트: `color: var(--m-text);`
   - 안내 문구: `color: var(--m-text-muted);`
5. 기본 스타일:
   - 페이지 제목 중앙 정렬, 마진 적용
   - 안내 문구 중앙 정렬, 작은 폰트 사이즈
   - 카드 덱 영역은 flexbox로 카드를 가로로 나열할 준비 (다음 단계에서 구현)

이 단계가 완료되면 `/tarot-card-reading` URL로 접속 시 빈 페이지 골격이 보여야 합니다 (nav/footer 포함).

**Step 2: 타로 카드 22장 데이터 준비 및 카드 덱 렌더링**

메이저 아르카나 22장의 카드 데이터를 JavaScript 배열로 정의하고, 카드 덱을 화면에 렌더링하세요.

요구사항:
1. `app/modules/tarot-card-reading/index.php` 파일의 `</main>` 직전에 `<script>` 블록 추가
2. JavaScript 배열로 타로 카드 22장 정의:
   ```javascript
   const tarotCards = [
     { id: 0, name: '바보(The Fool)', keyword: '새로운 시작', message: '두려움 없이 새로운 도전을 시작하세요.' },
     { id: 1, name: '마법사(The Magician)', keyword: '창조', message: '당신의 재능을 발휘할 때입니다.' },
     { id: 2, name: '여사제(The High Priestess)', keyword: '직관', message: '내면의 목소리에 귀 기울이세요.' },
     // ... (총 22장, 나머지는 AI가 채워주세요: 여황제, 황제, 교황, 연인, 전차, 힘, 은둔자, 운명의 수레바퀴, 정의, 매달린 사람, 죽음, 절제, 악마, 탑, 별, 달, 태양, 심판, 세계)
   ];
   ```
3. 카드 덱 렌더링 함수 작성:
   - `renderCardDeck()` 함수 정의
   - `#card-deck` 요소에 카드 22장을 동적으로 생성
   - 각 카드는 `<div class="tarot-card">` 요소로 표현
   - 카드 뒷면 디자인: CSS로 표현 (보라색 그라데이션 배경 + 중앙에 "?" 아이콘)
   - 각 카드에 `data-card-id` 속성으로 카드 ID 저장
   - 카드 클릭 이벤트 리스너 등록 (다음 단계에서 구현)
4. CSS 스타일 추가 (`<style>` 블록을 `<main>` 앞에 추가):
   - `#card-deck`: `display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; margin: 32px 0;`
   - `.tarot-card`: `width: 80px; height: 120px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: var(--m-radius-lg); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 32px; color: white; box-shadow: var(--m-shadow); transition: transform 0.2s;`
   - `.tarot-card:hover`: `transform: translateY(-8px);`
5. 페이지 로드 시 `renderCardDeck()` 호출

이 단계가 완료되면 22장의 카드가 뒷면 상태로 화면에 나열되고, 마우스 오버 시 살짝 떠오르는 효과가 적용됩니다.

**Step 3: 카드 선택 및 뒤집기 애니메이션 구현**

사용자가 카드를 클릭하면 카드가 뒤집히면서 앞면(카드 이름)이 나타나고, 운세 결과가 표시되도록 구현하세요.

요구사항:
1. 카드 클릭 이벤트 핸들러 작성:
   - `handleCardClick(event)` 함수 정의
   - 클릭된 카드의 `data-card-id`를 가져와서 해당 카드 데이터 찾기
   - 카드 뒤집기 애니메이션 트리거
   - 결과 영역에 운세 메시지 표시
   - 한 번 카드를 선택하면 다른 카드 클릭 비활성화 (이미 뽑았음)
2. 카드 뒤집기 애니메이션:
   - CSS `transform: rotateY(180deg)` 사용
   - `.tarot-card.flipped` 클래스 추가 시 뒤집힘
   - 애니메이션 지속시간: 0.6s
   - 뒤집힌 후 카드 앞면에는 카드 이름 표시 (흰색 배경 + 검은색 텍스트)
3. CSS 스타일 추가:
   - `.tarot-card`: `transform-style: preserve-3d; transition: transform 0.6s;`
   - `.tarot-card.flipped`: `transform: rotateY(180deg);`
   - 카드 앞면/뒷면을 위한 `.card-front`, `.card-back` 요소 추가 (절대 위치, `backface-visibility: hidden;`)
   - `.card-front`: `transform: rotateY(180deg);` (초기 상태에서 뒤집혀 있음)
   - `.card-back`: 기존 보라색 그라데이션 유지
4. 결과 영역 표시:
   - `#result` 요소의 `display: none;`을 `display: block;`으로 변경
   - 결과 영역에 다음 정보 표시:
     - 선택한 카드 이름 (큰 제목)
     - 키워드 (작은 배지 형태)
     - 운세 메시지 (본문 텍스트)
     - "다시 뽑기" 버튼 (페이지 새로고침)
5. 결과 영역 스타일:
   - 중앙 정렬, 상단 마진
   - 카드 이름: 큰 폰트, 굵게
   - 키워드: 작은 배지 (`background: var(--m-primary); color: white; padding: 4px 12px; border-radius: 12px;`)
   - 메시지: 일반 텍스트, 줄간격 넓게
   - "다시 뽑기" 버튼: `background: var(--m-primary); color: white; padding: 12px 24px; border: none; border-radius: var(--m-radius-lg); cursor: pointer;`

이 단계가 완료되면 카드 클릭 시 뒤집히면서 운세 메시지가 나타나고, "다시 뽑기" 버튼으로 페이지를 새로고침할 수 있습니다.