🎯 g5se 오늘의 타로 스프레드 해석기 - 3장 카드 리딩 & 운세 저장

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

## Step 1: 타로 스프레드 페이지 골격 생성

`app/modules/tarot-spread/index.php` 파일을 만들어주세요. 이 파일은 자동으로 `/tarot-spread` URL에 매핑됩니다.

### 파일 내용:

```php
<?php
include_once('./_common.php');

// 타로 카드 덱 데이터 (메이저 아르카나 22장)
$tarot_deck = [
    ['name' => 'The Fool', 'upright' => '새로운 시작, 순수함, 자유', 'reversed' => '무모함, 경솔함, 리스크'],
    ['name' => 'The Magician', 'upright' => '창조력, 의지, 기술', 'reversed' => '조작, 속임수, 재능 낭비'],
    ['name' => 'The High Priestess', 'upright' => '직관, 신비, 잠재의식', 'reversed' => '비밀, 단절, 침묵'],
    ['name' => 'The Empress', 'upright' => '풍요, 모성, 자연', 'reversed' => '의존, 질식, 공허함'],
    ['name' => 'The Emperor', 'upright' => '권위, 구조, 통제', 'reversed' => '독재, 경직, 미성숙'],
    ['name' => 'The Hierophant', 'upright' => '전통, 교육, 신념', 'reversed' => '반항, 자유사상, 비정통'],
    ['name' => 'The Lovers', 'upright' => '사랑, 조화, 선택', 'reversed' => '불균형, 갈등, 잘못된 선택'],
    ['name' => 'The Chariot', 'upright' => '의지, 승리, 결단', 'reversed' => '방향 상실, 좌절, 공격성'],
    ['name' => 'Strength', 'upright' => '용기, 인내, 자제력', 'reversed' => '자기 의심, 약함, 자제력 부족'],
    ['name' => 'The Hermit', 'upright' => '내면 탐구, 고독, 지혜', 'reversed' => '고립, 외로움, 철회'],
    ['name' => 'Wheel of Fortune', 'upright' => '운명, 변화, 순환', 'reversed' => '불운, 저항, 정체'],
    ['name' => 'Justice', 'upright' => '공정, 진실, 법', 'reversed' => '불공정, 거짓, 책임 회피'],
    ['name' => 'The Hanged Man', 'upright' => '희생, 새로운 관점, 대기', 'reversed' => '지연, 저항, 헛된 희생'],
    ['name' => 'Death', 'upright' => '종결, 변화, 재탄생', 'reversed' => '저항, 정체, 내면의 정화'],
    ['name' => 'Temperance', 'upright' => '균형, 절제, 치유', 'reversed' => '불균형, 과잉, 부조화'],
    ['name' => 'The Devil', 'upright' => '속박, 중독, 물질주의', 'reversed' => '해방, 자각, 탈출'],
    ['name' => 'The Tower', 'upright' => '파괴, 혼돈, 계시', 'reversed' => '재난 회피, 두려움, 지연된 변화'],
    ['name' => 'The Star', 'upright' => '희망, 영감, 평온', 'reversed' => '절망, 신뢰 상실, 단절'],
    ['name' => 'The Moon', 'upright' => '환상, 두려움, 잠재의식', 'reversed' => '혼란 해소, 진실, 불안 극복'],
    ['name' => 'The Sun', 'upright' => '기쁨, 성공, 활력', 'reversed' => '비관, 우울, 지연된 행복'],
    ['name' => 'Judgement', 'upright' => '각성, 결단, 재생', 'reversed' => '자기 의심, 후회, 판단 유보'],
    ['name' => 'The World', 'upright' => '완성, 성취, 여행', 'reversed' => '미완성, 지연, 부족함']
];

require_once(G5_THEME_PATH.'/modern/_head.inc.php');
include_once('./head.sub.php');
?>

<style>
.tarot-hero {
    text-align: center;
    padding: 48px 20px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-radius: var(--m-radius-lg);
    margin-bottom: 32px;
}
.tarot-hero h1 {
    font-size: 2rem;
    font-weight: 700;
    margin: 0 0 12px;
}
.tarot-hero p {
    font-size: 1.1rem;
    opacity: 0.95;
    margin: 0;
}
.draw-section {
    text-align: center;
    padding: 32px 20px;
    background: var(--m-surface);
    border-radius: var(--m-radius-lg);
    box-shadow: var(--m-shadow);
    margin-bottom: 32px;
}
.draw-btn {
    display: inline-block;
    padding: 16px 48px;
    font-size: 1.2rem;
    font-weight: 600;
    color: white;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    border-radius: var(--m-radius-lg);
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}
.draw-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(102, 126, 234, 0.4);
}
.info-box {
    background: var(--m-surface);
    padding: 24px;
    border-radius: var(--m-radius-lg);
    box-shadow: var(--m-shadow);
    margin-bottom: 32px;
}
.info-box h3 {
    color: var(--m-text);
    font-size: 1.3rem;
    font-weight: 600;
    margin: 0 0 16px;
}
.info-box ul {
    color: var(--m-text-muted);
    line-height: 1.8;
    margin: 0;
    padding-left: 20px;
}
</style>

<div class="m-shell">
    <?php require G5_THEME_PATH.'/modern/_nav.inc.php'; ?>
    
    <main class="m-container" style="padding: 32px 20px 48px; max-width: 800px; margin: 0 auto;">
        <div class="tarot-hero">
            <h1>🔮 오늘의 타로 스프레드</h1>
            <p>과거-현재-미래 3장 카드로 당신의 운세를 확인하세요</p>
        </div>

        <div class="draw-section">
            <form method="post" action="">
                <button type="submit" name="draw" class="draw-btn">🎴 카드 뽑기</button>
            </form>
        </div>

        <div class="info-box">
            <h3>📖 타로 리딩이란?</h3>
            <ul>
                <li><strong>과거 카드:</strong> 현재 상황의 원인이 된 과거 사건이나 영향</li>
                <li><strong>현재 카드:</strong> 지금 당신이 처한 상황과 에너지</li>
                <li><strong>미래 카드:</strong> 현재 흐름이 이어질 때 다가올 결과</li>
            </ul>
        </div>

        <div class="info-box">
            <h3>✨ 이용 방법</h3>
            <ul>
                <li>마음을 가라앉히고 질문이나 고민을 떠올려보세요</li>
                <li>"카드 뽑기" 버튼을 클릭하여 3장의 카드를 받습니다</li>
                <li>각 카드의 의미를 읽고 전체 해석을 확인하세요</li>
                <li>리딩 결과는 저장하여 나중에 다시 볼 수 있습니다</li>
            </ul>
        </div>
    </main>
    
    <?php require G5_THEME_PATH.'/modern/_footer.inc.php'; ?>
</div>

<?php include_once('./tail.sub.php'); ?>
```

### 주요 포인트:

1. **modern shell 골격 적용**: `_head.inc.php` → `m-shell` → `_nav.inc.php` → `m-container` → `_footer.inc.php` → `tail.sub.php` 순서로 사이트 전체 chrome 통일
2. **타로 덱 데이터**: 메이저 아르카나 22장 배열 (카드명, 정방향/역방향 키워드)
3. **히어로 섹션**: 그라디언트 배경으로 타로 분위기 연출
4. **카드 뽑기 버튼**: 폼 제출 방식 (다음 단계에서 POST 처리)
5. **안내 박스**: 타로 리딩 설명 & 이용 방법

파일을 저장하고 브라우저에서 `/tarot-spread`에 접속하여 페이지가 정상적으로 표시되는지 확인해주세요.

## Step 2: 카드 뽑기 로직 & 리딩 결과 표시

`app/modules/tarot-spread/index.php` 파일을 수정하여 카드 뽑기 POST 처리와 결과 화면을 추가해주세요.

### 수정 내용:

1. **POST 처리 로직** (파일 상단, `require_once` 전에 추가):

```php
<?php
include_once('./_common.php');

// 타로 카드 덱 데이터
$tarot_deck = [
    ['name' => 'The Fool', 'upright' => '새로운 시작, 순수함, 자유', 'reversed' => '무모함, 경솔함, 리스크'],
    ['name' => 'The Magician', 'upright' => '창조력, 의지, 기술', 'reversed' => '조작, 속임수, 재능 낭비'],
    ['name' => 'The High Priestess', 'upright' => '직관, 신비, 잠재의식', 'reversed' => '비밀, 단절, 침묵'],
    ['name' => 'The Empress', 'upright' => '풍요, 모성, 자연', 'reversed' => '의존, 질식, 공허함'],
    ['name' => 'The Emperor', 'upright' => '권위, 구조, 통제', 'reversed' => '독재, 경직, 미성숙'],
    ['name' => 'The Hierophant', 'upright' => '전통, 교육, 신념', 'reversed' => '반항, 자유사상, 비정통'],
    ['name' => 'The Lovers', 'upright' => '사랑, 조화, 선택', 'reversed' => '불균형, 갈등, 잘못된 선택'],
    ['name' => 'The Chariot', 'upright' => '의지, 승리, 결단', 'reversed' => '방향 상실, 좌절, 공격성'],
    ['name' => 'Strength', 'upright' => '용기, 인내, 자제력', 'reversed' => '자기 의심, 약함, 자제력 부족'],
    ['name' => 'The Hermit', 'upright' => '내면 탐구, 고독, 지혜', 'reversed' => '고립, 외로움, 철회'],
    ['name' => 'Wheel of Fortune', 'upright' => '운명, 변화, 순환', 'reversed' => '불운, 저항, 정체'],
    ['name' => 'Justice', 'upright' => '공정, 진실, 법', 'reversed' => '불공정, 거짓, 책임 회피'],
    ['name' => 'The Hanged Man', 'upright' => '희생, 새로운 관점, 대기', 'reversed' => '지연, 저항, 헛된 희생'],
    ['name' => 'Death', 'upright' => '종결, 변화, 재탄생', 'reversed' => '저항, 정체, 내면의 정화'],
    ['name' => 'Temperance', 'upright' => '균형, 절제, 치유', 'reversed' => '불균형, 과잉, 부조화'],
    ['name' => 'The Devil', 'upright' => '속박, 중독, 물질주의', 'reversed' => '해방, 자각, 탈출'],
    ['name' => 'The Tower', 'upright' => '파괴, 혼돈, 계시', 'reversed' => '재난 회피, 두려움, 지연된 변화'],
    ['name' => 'The Star', 'upright' => '희망, 영감, 평온', 'reversed' => '절망, 신뢰 상실, 단절'],
    ['name' => 'The Moon', 'upright' => '환상, 두려움, 잠재의식', 'reversed' => '혼란 해소, 진실, 불안 극복'],
    ['name' => 'The Sun', 'upright' => '기쁨, 성공, 활력', 'reversed' => '비관, 우울, 지연된 행복'],
    ['name' => 'Judgement', 'upright' => '각성, 결단, 재생', 'reversed' => '자기 의심, 후회, 판단 유보'],
    ['name' => 'The World', 'upright' => '완성, 성취, 여행', 'reversed' => '미완성, 지연, 부족함']
];

$spread = null;
$interpretation = '';

if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['draw'])) {
    // 카드 셔플 & 3장 뽑기
    $shuffled = $tarot_deck;
    shuffle($shuffled);
    $selected = array_slice($shuffled, 0, 3);
    
    // 각 카드마다 정방향/역방향 랜덤 결정
    $spread = [
        [
            'position' => '과거',
            'card' => $selected[0],
            'reversed' => rand(0, 1) === 1,
            'emoji' => '⏳'
        ],
        [
            'position' => '현재',
            'card' => $selected[1],
            'reversed' => rand(0, 1) === 1,
            'emoji' => '✨'
        ],
        [
            'position' => '미래',
            'card' => $selected[2],
            'reversed' => rand(0, 1) === 1,
            'emoji' => '🔮'
        ]
    ];
    
    // 종합 해석 생성 (간단한 템플릿)
    $past_msg = $spread[0]['reversed'] ? '어려움' : '긍정적 영향';
    $present_msg = $spread[1]['reversed'] ? '도전적인 상황' : '좋은 흐름';
    $future_msg = $spread[2]['reversed'] ? '주의가 필요한 시기' : '밝은 전망';
    
    $interpretation = "과거에는 {$past_msg}이 있었고, 현재는 {$present_msg}입니다. 이 흐름이 계속되면 미래에는 {$future_msg}이 예상됩니다. 각 카드의 메시지를 참고하여 현명한 선택을 하세요.";
}

require_once(G5_THEME_PATH.'/modern/_head.inc.php');
include_once('./head.sub.php');
?>
```

2. **스타일 추가** (기존 `<style>` 블록 하단에 추가):

```css
.spread-result {
    margin-bottom: 32px;
}
.cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-bottom: 32px;
}
.card-item {
    background: var(--m-surface);
    border-radius: var(--m-radius-lg);
    box-shadow: var(--m-shadow);
    padding: 24px;
    text-align: center;
    transition: transform 0.3s;
}
.card-item:hover {
    transform: translateY(-4px);
}
.card-position {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 1.1rem;
    font-weight: 600;
    color: #667eea;
    margin-bottom: 12px;
}
.card-name {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--m-text);
    margin: 12px 0;
}
.card-orientation {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 12px;
}
.card-orientation.upright {
    background: #d4edda;
    color: #155724;
}
.card-orientation.reversed {
    background: #f8d7da;
    color: #721c24;
}
.card-meaning {
    color: var(--m-text-muted);
    line-height: 1.6;
    font-size: 0.95rem;
}
.interpretation-box {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 32px;
    border-radius: var(--m-radius-lg);
    margin-bottom: 32px;
}
.interpretation-box h3 {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 0 16px;
}
.interpretation-box p {
    font-size: 1.1rem;
    line-height: 1.8;
    margin: 0;
}
.action-buttons {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}
.btn {
    padding: 12px 32px;
    font-size: 1rem;
    font-weight: 600;
    border-radius: var(--m-radius-lg);
    border: none;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}
.btn-primary {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}
.btn-secondary {
    background: var(--m-surface);
    color: var(--m-text);
    box-shadow: var(--m-shadow);
}
.btn:hover {
    transform: translateY(-2px);
}
```

3. **결과 화면 HTML** (`<main>` 태그 안, draw-section 아래에 추가):

```php
<?php if ($spread): ?>
<div class="spread-result">
    <div class="cards-grid">
        <?php foreach ($spread as $item): ?>
            <div class="card-item">
                <div class="card-position">
                    <span><?php echo $item['emoji']; ?></span>
                    <span><?php echo htmlspecialchars($item['position']); ?></span>
                </div>
                <div class="card-name"><?php echo htmlspecialchars($item['card']['name']); ?></div>
                <span class="card-orientation <?php echo $item['reversed'] ? 'reversed' : 'upright'; ?>">
                    <?php echo $item['reversed'] ? '역방향 ↓' : '정방향 ↑'; ?>
                </span>
                <div class="card-meaning">
                    <?php 
                    $meaning = $item['reversed'] ? $item['card']['reversed'] : $item['card']['upright'];
                    echo htmlspecialchars($meaning);
                    ?>
                </div>
            </div>
        <?php endforeach; ?>
    </div>
    
    <div class="interpretation-box">
        <h3>🔮 종합 해석</h3>
        <p><?php echo htmlspecialchars($interpretation); ?></p>
    </div>
    
    <div class="action-buttons">
        <form method="post" action="">
            <button type="submit" name="draw" class="btn btn-primary">🔄 다시 뽑기</button>
        </form>
        <button type="button" class="btn btn-secondary" onclick="alert('저장 기능은 다음 단계에서 구현됩니다!')">💾 결과 저장</button>
    </div>
</div>
<?php endif; ?>
```

### 주요 변경 사항:

1. **카드 뽑기 로직**: POST 요청 시 덱을 셔플하고 3장 선택, 각 카드마다 정역방향 랜덤 결정
2. **종합 해석**: 3장 카드의 정역방향 조합에 따라 간단한 메시지 생성
3. **그리드 레이아웃**: 카드 3장을 반응형 그리드로 표시 (모바일에서는 세로 스택)
4. **카드별 정보**: 위치(과거/현재/미래), 카드명, 정역방향, 키워드 표시
5. **액션 버튼**: 다시 뽑기 & 저장 버튼 (저장은 다음 단계에서 구현)

파일을 저장하고 "카드 뽑기" 버튼을 클릭하여 리딩 결과가 표시되는지 확인해주세요.

## Step 3: SQLite DB 설정 & 리딩 저장 기능

`app/modules/tarot-spread/index.php` 파일을 수정하여 리딩 결과를 SQLite DB에 저장하는 기능을 추가해주세요.

### 수정 내용:

1. **DB 연결 & 테이블 생성 함수** (파일 상단, 타로 덱 데이터 아래에 추가):

```php
// SQLite DB 연결 & 테이블 생성
function getTarotDB() {
    @mkdir(G5_DATA_PATH.'/modules', 0707, true);
    $db_path = G5_DATA_PATH.'/modules/tarot-spread.sqlite';
    $db = new PDO('sqlite:'.$db_path);
    $db->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
    
    // 리딩 기록 테이블
    $db->exec("
        CREATE TABLE IF NOT EXISTS readings (
            id INTEGER PRIMARY KEY AUTOINCREMENT,
            user_id TEXT NOT NULL,
            reading_date DATETIME DEFAULT CURRENT_TIMESTAMP,
            card1_name TEXT NOT NULL,
            card1_reversed INTEGER NOT NULL,
            card2_name TEXT NOT NULL,
            card2_reversed INTEGER NOT NULL,
            card3_name TEXT NOT NULL,
            card3_reversed INTEGER NOT NULL,
            interpretation TEXT NOT NULL
        )
    ");
    
    return $db;
}
```

2. **저장 처리 로직** (카드 뽑기 로직 아래, `require_once` 전에 추가):

```php
// 리딩 저장 처리
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['save_reading'])) {
    $db = getTarotDB();
    
    // 회원이면 회원 ID, 비회원이면 세션 ID
    $user_id = $is_member ? $member['mb_id'] : session_id();
    
    $stmt = $db->prepare("
        INSERT INTO readings (
            user_id, card1_name, card1_reversed, card2_name, card2_reversed,
            card3_name, card3_reversed, interpretation
        ) VALUES (?, ?, ?, ?, ?, ?, ?, ?)
    ");
    
    $stmt->execute([
        $user_id,
        $_POST['card1_name'],
        (int)$_POST['card1_reversed'],
        $_POST['card2_name'],
        (int)$_POST['card2_reversed'],
        $_POST['card3_name'],
        (int)$_POST['card3_reversed'],
        $_POST['interpretation']
    ]);
    
    // 저장 후 리다이렉트
    header('Location: /tarot-spread?saved=1');
    exit;
}

// 저장 성공 메시지
$saved_message = '';
if (isset($_GET['saved']) && $_GET['saved'] === '1') {
    $saved_message = '리딩 결과가 저장되었습니다!';
}
```

3. **저장 폼 수정** (결과 화면의 저장 버튼 부분을 다음과 같이 변경):

```php
<div class="action-buttons">
    <form method="post" action="" style="display: inline;">
        <button type="submit" name="draw" class="btn btn-primary">🔄 다시 뽑기</button>
    </form>
    <form method="post" action="" style="display: inline;">
        <input type="hidden" name="card1_name" value="<?php echo htmlspecialchars($spread[0]['card']['name']); ?>">
        <input type="hidden" name="card1_reversed" value="<?php echo $spread[0]['reversed'] ? '1' : '0'; ?>">
        <input type="hidden" name="card2_name" value="<?php echo htmlspecialchars($spread[1]['card']['name']); ?>">
        <input type="hidden" name="card2_reversed" value="<?php echo $spread[1]['reversed'] ? '1' : '0'; ?>">
        <input type="hidden" name="card3_name" value="<?php echo htmlspecialchars($spread[2]['card']['name']); ?>">
        <input type="hidden" name="card3_reversed" value="<?php echo $spread[2]['reversed'] ? '1' : '0'; ?>">
        <input type="hidden" name="interpretation" value="<?php echo htmlspecialchars($interpretation); ?>">
        <button type="submit" name="save_reading" class="btn btn-secondary">💾 결과 저장</button>
    </form>
</div>
```

4. **저장 성공 알림** (히어로 섹션 바로 아래에 추가):

```php
<?php if ($saved_message): ?>
<div style="background: #d4edda; color: #155724; padding: 16px 24px; border-radius: var(--m-radius-lg); margin-bottom: 24px; text-align: center; font-weight: 600;">
    ✅ <?php echo htmlspecialchars($saved_message); ?>
</div>
<?php endif; ?>
```

### 주요 변경 사항:

1. **SQLite DB 함수**: `G5_DATA_PATH/modules/tarot-spread.sqlite` 파일에 DB 생성, 첫 접근 시 테이블 자동 생성
2. **리딩 저장**: 카드 3장 정보(이름, 정역방향)와 종합 해석을 DB에 INSERT
3. **사용자 식별**: 회원은 `mb_id`, 비회원은 `session_id()`로 구분
4. **저장 후 리다이렉트**: PRG 패턴으로 중복 제출 방지
5. **성공 메시지**: URL 쿼리 파라미터로 저장 성공 알림 표시

파일을 저장하고 카드를 뽑은 뒤 "결과 저장" 버튼을 클릭하여 DB에 저장되는지 확인해주세요.

## Step 4: 과거 리딩 목록 페이지

`app/modules/tarot-spread/history/index.php` 파일을 새로 만들어 저장된 리딩 기록을 목록으로 보여주는 페이지를 구현해주세요.

### 파일 생성:

`app/modules/tarot-spread/history/index.php`:

```php
<?php
include_once('./_common.php');

// SQLite DB 연결 함수 (메인 페이지와 동일)
function getTarotDB() {
    @mkdir(G5_DATA_PATH.'/modules', 0707, true);
    $db_path = G5_DATA_PATH.'/modules/tarot-spread.sqlite';
    $db = new PDO('sqlite:'.$db_path);
    $db->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
    
    $db->exec("
        CREATE TABLE IF NOT EXISTS readings (
            id INTEGER PRIMARY KEY AUTOINCREMENT,
            user_id TEXT NOT NULL,
            reading_date DATETIME DEFAULT CURRENT_TIMESTAMP,
            card1_name TEXT NOT NULL,
            card1_reversed INTEGER NOT NULL,
            card2_name TEXT NOT NULL,
            card2_reversed INTEGER NOT NULL,
            card3_name TEXT NOT NULL,
            card3_reversed INTEGER NOT NULL,
            interpretation TEXT NOT NULL
        )
    ");
    
    return $db;
}

// 현재 사용자 ID
$user_id = $is_member ? $member['mb_id'] : session_id();

// 리딩 기록 조회 (최신순)
$db = getTarotDB();
$stmt = $db->prepare("SELECT * FROM readings WHERE user_id = ? ORDER BY reading_date DESC");
$stmt->execute([$user_id]);
$readings = $stmt->fetchAll(PDO::FETCH_ASSOC);

require_once(G5_THEME_PATH.'/modern/_head.inc.php');
include_once('./head.sub.php');
?>

<style>
.history-hero {
    text-align: center;
    padding: 48px 20px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-radius: var(--m-radius-lg);
    margin-bottom: 32px;
}
.history-hero h1 {
    font-size: 2rem;
    font-weight: 700;
    margin: 0 0 12px;
}
.history-hero p {
    font-size: 1.1rem;
    opacity: 0.95;
    margin: 0 0 16px;
}
.back-btn {
    display: inline-block;
    padding: 10px 24px;
    background: rgba(255, 255, 255, 0.2);
    color: white;
    border-radius: var(--m-radius-lg);
    text-decoration: none;
    font-weight: 600;
    transition: background 0.2s;
}
.back-btn:hover {
    background: rgba(255, 255, 255, 0.3);
}
.readings-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.reading-card {
    background: var(--m-surface);
    border-radius: var(--m-radius-lg);
    box-shadow: var(--m-shadow);
    padding: 24px;
    transition: transform 0.2s;
}
.reading-card:hover {
    transform: translateY(-2px);
}
.reading-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    flex-wrap: wrap;
    gap: 12px;
}
.reading-date {
    font-size: 0.95rem;
    color: var(--m-text-muted);
}
.reading-id {
    font-size: 0.85rem;
    color: var(--m-text-muted);
    background: rgba(102, 126, 234, 0.1);
    padding: 4px 12px;
    border-radius: 12px;
}
.cards-summary {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.card-badge {
    background: rgba(102, 126, 234, 0.1);
    padding: 8px 16px;
    border-radius: var(--m-radius-lg);
    font-size: 0.9rem;
}
.card-badge strong {
    color: #667eea;
    font-weight: 600;
}
.card-badge .orientation {
    font-size: 0.8rem;
    color: var(--m-text-muted);
    margin-left: 4px;
}
.interpretation-preview {
    color: var(--m-text-muted);
    line-height: 1.6;
    font-size: 0.95rem;
    margin-bottom: 16px;
}
.view-detail-btn {
    display: inline-block;
    padding: 8px 20px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-radius: var(--m-radius-lg);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    transition: transform 0.2s;
}
.view-detail-btn:hover {
    transform: translateY(-2px);
}
.empty-state {
    text-align: center;
    padding: 64px 20px;
    background: var(--m-surface);
    border-radius: var(--m-radius-lg);
    box-shadow: var(--m-shadow);
}
.empty-state .emoji {
    font-size: 4rem;
    margin-bottom: 16px;
}
.empty-state h3 {
    font-size: 1.5rem;
    color: var(--m-text);
    margin: 0 0 12px;
}
.empty-state p {
    color: var(--m-text-muted);
    margin: 0 0 24px;
}
.empty-state a {
    display: inline-block;
    padding: 12px 32px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-radius: var(--m-radius-lg);
    text-decoration: none;
    font-weight: 600;
}
</style>

<div class="m-shell">
    <?php require G5_THEME_PATH.'/modern/_nav.inc.php'; ?>
    
    <main class="m-container" style="padding: 32px 20px 48px; max-width: 900px; margin: 0 auto;">
        <div class="history-hero">
            <h1>📚 나의 타로 리딩 기록</h1>
            <p>저장된 리딩 결과를 다시 확인하세요</p>
            <a href="/tarot-spread" class="back-btn">← 새 리딩 하러 가기</a>
        </div>

        <?php if (count($readings) > 0): ?>
            <div class="readings-list">
                <?php foreach ($readings as $reading): ?>
                    <div class="reading-card">
                        <div class="reading-header">
                            <div class="reading-date">
                                🗓️ <?php echo date('Y년 m월 d일 H:i', strtotime($reading['reading_date'])); ?>
                            </div>
                            <div class="reading-id">#<?php echo $reading['id']; ?></div>
                        </div>
                        
                        <div class="cards-summary">
                            <div class="card-badge">
                                <strong>⏳ 과거:</strong> <?php echo htmlspecialchars($reading['card1_name']); ?>
                                <span class="orientation"><?php echo $reading['card1_reversed'] ? '(역방향)' : '(정방향)'; ?></span>
                            </div>
                            <div class="card-badge">
                                <strong>✨ 현재:</strong> <?php echo htmlspecialchars($reading['card2_name']); ?>
                                <span class="orientation"><?php echo $reading['card2_reversed'] ? '(역방향)' : '(정방향)'; ?></span>
                            </div>
                            <div class="card-badge">
                                <strong>🔮 미래:</strong> <?php echo htmlspecialchars($reading['card3_name']); ?>
                                <span class="orientation"><?php echo $reading['card3_reversed'] ? '(역방향)' : '(정방향)'; ?></span>
                            </div>
                        </div>
                        
                        <div class="interpretation-preview">
                            <?php 
                            $preview = mb_substr($reading['interpretation'], 0, 80, 'UTF-8');
                            if (mb_strlen($reading['interpretation'], 'UTF-8') > 80) {
                                $preview .= '...';
                            }
                            echo htmlspecialchars($preview);
                            ?>
                        </div>
                        
                        <a href="/tarot-spread/view?id=<?php echo $reading['id']; ?>" class="view-detail-btn">자세히 보기 →</a>
                    </div>
                <?php endforeach; ?>
            </div>
        <?php else: ?>
            <div class="empty-state">
                <div class="emoji">🔮</div>
                <h3>아직 저장된 리딩이 없어요</h3>
                <p>첫 타로 리딩을 해보시겠어요?</p>
                <a href="/tarot-spread">카드 뽑으러 가기 →</a>
            </div>
        <?php endif; ?>
    </main>
    
    <?php require G5_THEME_PATH.'/modern/_footer.inc.php'; ?>
</div>

<?php include_once('./tail.sub.php'); ?>
```

### 주요 기능:

1. **리딩 목록 조회**: 현재 사용자(회원/비회원)의 리딩 기록을 최신순으로 가져옴
2. **카드 요약**: 각 리딩마다 3장 카드의 이름과 정역방향을 배지 형태로 표시
3. **해석 미리보기**: 종합 해석의 첫 80자만 표시 (말줄임표)
4. **상세 보기 링크**: 각 리딩의 상세 페이지로 이동하는 버튼 (다음 단계에서 구현)
5. **빈 상태**: 저장된 리딩이 없을 때 안내 메시지와 새 리딩 링크

파일을 저장하고 `/tarot-spread/history`에 접속하여 목록이 표시되는지 확인해주세요.

## Step 5: 리딩 상세 보기 페이지 & 메인 페이지 링크 추가

### 1. 상세 보기 페이지 생성

`app/modules/tarot-spread/view/index.php` 파일을 만들어주세요:

```php
<?php
include_once('./_common.php');

// SQLite DB 연결 함수
function getTarotDB() {
    @mkdir(G5_DATA_PATH.'/modules', 0707, true);
    $db_path = G5_DATA_PATH.'/modules/tarot-spread.sqlite';
    $db = new PDO('sqlite:'.$db_path);
    $db->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
    
    $db->exec("
        CREATE TABLE IF NOT EXISTS readings (
            id INTEGER PRIMARY KEY AUTOINCREMENT,
            user_id TEXT NOT NULL,
            reading_date DATETIME DEFAULT CURRENT_TIMESTAMP,
            card1_name TEXT NOT NULL,
            card1_reversed INTEGER NOT NULL,
            card2_name TEXT NOT NULL,
            card2_reversed INTEGER NOT NULL,
            card3_name TEXT NOT NULL,
            card3_reversed INTEGER NOT NULL,
            interpretation TEXT NOT NULL
        )
    ");
    
    return $db;
}

// 타로 카드 덱 데이터 (키워드 조회용)
$tarot_deck = [
    'The Fool' => ['upright' => '새로운 시작, 순수함, 자유', 'reversed' => '무모함, 경솔함, 리스크'],
    'The Magician' => ['upright' => '창조력, 의지, 기술', 'reversed' => '조작, 속임수, 재능 낭비'],
    'The High Priestess' => ['upright' => '직관, 신비, 잠재의식', 'reversed' => '비밀, 단절, 침묵'],
    'The Empress' => ['upright' => '풍요, 모성, 자연', 'reversed' => '의존, 질식, 공허함'],
    'The Emperor' => ['upright' => '권위, 구조, 통제', 'reversed' => '독재, 경직, 미성숙'],
    'The Hierophant' => ['upright' => '전통, 교육, 신념', 'reversed' => '반항, 자유사상, 비정통'],
    'The Lovers' => ['upright' => '사랑, 조화, 선택', 'reversed' => '불균형, 갈등, 잘못된 선택'],
    'The Chariot' => ['upright' => '의지, 승리, 결단', 'reversed' => '방향 상실, 좌절, 공격성'],
    'Strength' => ['upright' => '용기, 인내, 자제력', 'reversed' => '자기 의심, 약함, 자제력 부족'],
    'The Hermit' => ['upright' => '내면 탐구, 고독, 지혜', 'reversed' => '고립, 외로움, 철회'],
    'Wheel of Fortune' => ['upright' => '운명, 변화, 순환', 'reversed' => '불운, 저항, 정체'],
    'Justice' => ['upright' => '공정, 진실, 법', 'reversed' => '불공정, 거짓, 책임 회피'],
    'The Hanged Man' => ['upright' => '희생, 새로운 관점, 대기', 'reversed' => '지연, 저항, 헛된 희생'],
    'Death' => ['upright' => '종결, 변화, 재탄생', 'reversed' => '저항, 정체, 내면의 정화'],
    'Temperance' => ['upright' => '균형, 절제, 치유', 'reversed' => '불균형, 과잉, 부조화'],
    'The Devil' => ['upright' => '속박, 중독, 물질주의', 'reversed' => '해방, 자각, 탈출'],
    'The Tower' => ['upright' => '파괴, 혼돈, 계시', 'reversed' => '재난 회피, 두려움, 지연된 변화'],
    'The Star' => ['upright' => '희망, 영감, 평온', 'reversed' => '절망, 신뢰 상실, 단절'],
    'The Moon' => ['upright' => '환상, 두려움, 잠재의식', 'reversed' => '혼란 해소, 진실, 불안 극복'],
    'The Sun' => ['upright' => '기쁨, 성공, 활력', 'reversed' => '비관, 우울, 지연된 행복'],
    'Judgement' => ['upright' => '각성, 결단, 재생', 'reversed' => '자기 의심, 후회, 판단 유보'],
    'The World' => ['upright' => '완성, 성취, 여행', 'reversed' => '미완성, 지연, 부족함']
];

// 현재 사용자 ID
$user_id = $is_member ? $member['mb_id'] : session_id();

// 리딩 ID 가져오기
$reading_id = isset($_GET['id']) ? (int)$_GET['id'] : 0;

if ($reading_id === 0) {
    die('잘못된 접근입니다.');
}

// 리딩 조회 (본인 것만)
$db = getTarotDB();
$stmt = $db->prepare("SELECT * FROM readings WHERE id = ? AND user_id = ?");
$stmt->execute([$reading_id, $user_id]);
$reading = $stmt->fetch(PDO::FETCH_ASSOC);

if (!$reading) {
    die('리딩을 찾을 수 없습니다.');
}

// 카드 정보 재구성
$cards = [
    [
        'position' => '과거',
        'emoji' => '⏳',
        'name' => $reading['card1_name'],
        'reversed' => (bool)$reading['card1_reversed'],
        'meaning' => isset($tarot_deck[$reading['card1_name']]) 
            ? ($reading['card1_reversed'] ? $tarot_deck[$reading['card1_name']]['reversed'] : $tarot_deck[$reading['card1_name']]['upright'])
            : ''
    ],
    [
        'position' => '현재',
        'emoji' => '✨',
        'name' => $reading['card2_name'],
        'reversed' => (bool)$reading['card2_reversed'],
        'meaning' => isset($tarot_deck[$reading['card2_name']]) 
            ? ($reading['card2_reversed'] ? $tarot_deck[$reading['card2_name']]['reversed'] : $tarot_deck[$reading['card2_name']]['upright'])
            : ''
    ],
    [
        'position' => '미래',
        'emoji' => '🔮',
        'name' => $reading['card3_name'],
        'reversed' => (bool)$reading['card3_reversed'],
        'meaning' => isset($tarot_deck[$reading['card3_name']]) 
            ? ($reading['card3_reversed'] ? $tarot_deck[$reading['card3_name']]['reversed'] : $tarot_deck[$reading['card3_name']]['upright'])
            : ''
    ]
];

require_once(G5_THEME_PATH.'/modern/_head.inc.php');
include_once('./head.sub.php');
?>

<style>
.detail-hero {
    text-align: center;
    padding: 48px 20px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-radius: var(--m-radius-lg);
    margin-bottom: 32px;
}
.detail-hero h1 {
    font-size: 2rem;
    font-weight: 700;
    margin: 0 0 12px;
}
.detail-hero .date {
    font-size: 1.1rem;
    opacity: 0.95;
    margin: 0 0 16px;
}
.back-link {
    display: inline-block;
    padding: 10px 24px;
    background: rgba(255, 255, 255, 0.2);
    color: white;
    border-radius: var(--m-radius-lg);
    text-decoration: none;
    font-weight: 600;
    transition: background 0.2s;
}
.back-link:hover {
    background: rgba(255, 255, 255, 0.3);
}
.cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-bottom: 32px;
}
.card-item {
    background: var(--m-surface);
    border-radius: var(--m-radius-lg);
    box-shadow: var(--m-shadow);
    padding: 24px;
    text-align: center;
}
.card-position {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 1.1rem;
    font-weight: 600;
    color: #667eea;
    margin-bottom: 12px;
}
.card-name {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--m-text);
    margin: 12px 0;
}
.card-orientation {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 12px;
}
.card-orientation.upright {
    background: #d4edda;
    color: #155724;
}
.card-orientation.reversed {
    background: #f8d7da;
    color: #721c24;
}
.card-meaning {
    color: var(--m-text-muted);
    line-height: 1.6;
    font-size: 0.95rem;
}
.interpretation-box {
    background: var(--m-surface);
    border-radius: var(--m-radius-lg);
    box-shadow: var(--m-shadow);
    padding: 32px;
    margin-bottom: 32px;
}
.interpretation-box h3 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--m-text);
    margin: 0 0 16px;
}
.interpretation-box p {
    font-size: 1.1rem;
    line-height: 1.8;
    color: var(--m-text);
    margin: 0;
}
</style>

<div class="m-shell">
    <?php require G5_THEME_PATH.'/modern/_nav.inc.php'; ?>
    
    <main class="m-container" style="padding: 32px 20px 48px; max-width: 900px; margin: 0 auto;">
        <div class="detail-hero">
            <h1>🔮 타로 리딩 상세보기</h1>
            <div class="date">
                🗓️ <?php echo date('Y년 m월 d일 H:i', strtotime($reading['reading_date'])); ?>
            </div>
            <a href="/tarot-spread/history" class="back-link">← 목록으로 돌아가기</a>
        </div>

        <div class="cards-grid">
            <?php foreach ($cards as $card): ?>
                <div class="card-item">
                    <div class="card-position">
                        <span><?php echo $card['emoji']; ?></span>
                        <span><?php echo htmlspecialchars($card['position']); ?></span>
                    </div>
                    <div class="card-name"><?php echo htmlspecialchars($card['name']); ?></div>
                    <span class="card-orientation <?php echo $card['reversed'] ? 'reversed' : 'upright'; ?>">
                        <?php echo $card['reversed'] ? '역방향 ↓' : '정방향 ↑'; ?>
                    </span>
                    <div class="card-meaning">
                        <?php echo htmlspecialchars($card['meaning']); ?>
                    </div>
                </div>
            <?php endforeach; ?>
        </div>
        
        <div class="interpretation-box">
            <h3>🔮 종합 해석</h3>
            <p><?php echo nl2br(htmlspecialchars($reading['interpretation'])); ?></p>
        </div>
    </main>
    
    <?php require G5_THEME_PATH.'/modern/_footer.inc.php'; ?>
</div>

<?php include_once('./tail.sub.php'); ?>
```

### 2. 메인 페이지에 기록 보기 링크 추가

`app/modules/tarot-spread/index.php`의 히어로 섹션 아래에 링크를 추가해주세요:

```php
<div class="tarot-hero">
    <h1>🔮 오늘의 타로 스프레드</h1>
    <p>과거-현재-미래 3장 카드로 당신의 운세를 확인하세요</p>
</div>

<!-- 이 부분 추가 -->
<div style="text-align: center; margin-bottom: 24px;">
    <a href="/tarot-spread/history" style="display: inline-block; padding: 12px 32px; background: var(--m-surface); color: var(--m-text); border-radius: var(--m-radius-lg); text-decoration: none; font-weight: 600; box-shadow: var(--m-shadow); transition: transform 0.2s;" onmouseover="this.style.transform='translateY(-2px)'" onmouseout="this.style.transform='translateY(0)'">
        📚 나의 리딩 기록 보기
    </a>
</div>
```

### 주요 기능:

1. **상세 보기 페이지**: URL 쿼리 파라미터로 리딩 ID를 받아 해당 리딩의 전체 정보 표시
2. **권한 확인**: 본인의 리딩만 볼 수 있도록 user_id 조건 추가
3. **카드 정보 재구성**: DB에서 가져온 카드 데이터를 배열로 재구성하여 표시
4. **전체 해석 표시**: 종합 해석을 줄바꿈 포함하여 전체 표시
5. **내비게이션**: 메인 페이지 ↔ 목록 ↔ 상세 페이지 간 이동 링크

파일을 저장하고 리딩 목록에서 "자세히 보기" 버튼을 클릭하여 상세 페이지가 표시되는지 확인해주세요.

## Step 6: 카드 뒤집기 애니메이션 & 최종 다듬기

`app/modules/tarot-spread/index.php` 파일을 수정하여 카드 뽑기 시 뒤집히는 애니메이션을 추가하고, 전체적인 UX를 개선해주세요.

### 수정 내용:

1. **스타일 블록에 애니메이션 추가** (기존 `<style>` 블록 하단에 추가):

```css
/* 카드 뒤집기 애니메이션 */
@keyframes flipCard {
    0% {
        transform: perspective(1000px) rotateY(0deg);
        opacity: 0;
    }
    50% {
        transform: perspective(1000px) rotateY(90deg);
        opacity: 0.5;
    }
    100% {
        transform: perspective(1000px) rotateY(0deg);
        opacity: 1;
    }
}

.card-item.animate {
    animation: flipCard 0.8s ease-out;
}

.card-item:nth-child(1).animate {
    animation-delay: 0s;
}

.card-item:nth-child(2).animate {
    animation-delay: 0.2s;
}

.card-item:nth-child(3).animate {
    animation-delay: 0.4s;
}

/* 카드 뒷면 효과 (선택적) */
.card-back {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: var(--m-radius-lg);
    padding: 80px 20px;
    text-align: center;
    color: white;
    font-size: 3rem;
    box-shadow: var(--m-shadow);
}

/* 로딩 상태 */
.loading-spinner {
    display: inline-block;
    width: 40px;
    height: 40px;
    border: 4px solid rgba(102, 126, 234, 0.2);
    border-radius: 50%;
    border-top-color: #667eea;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* 통계 박스 (보너스) */
.stats-box {
    background: var(--m-surface);
    border-radius: var(--m-radius-lg);
    box-shadow: var(--m-shadow);
    padding: 24px;
    margin-top: 32px;
}

.stats-box h3 {
    color: var(--m-text);
    font-size: 1.3rem;
    font-weight: 600;
    margin: 0 0 16px;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 16px;
}

.stat-item {
    text-align: center;
    padding: 16px;
    background: rgba(102, 126, 234, 0.05);
    border-radius: var(--m-radius-lg);
}

.stat-number {
    font-size: 2rem;
    font-weight: 700;
    color: #667eea;
    margin-bottom: 4px;
}

.stat-label {
    font-size: 0.9rem;
    color: var(--m-text-muted);
}
```

2. **카드 그리드에 애니메이션 클래스 추가** (결과 화면 HTML 수정):

```php
<div class="cards-grid">
    <?php foreach ($spread as $index => $item): ?>
        <div class="card-item animate">
            <!-- 기존 카드 내용 동일 -->
        </div>
    <?php endforeach; ?>
</div>
```

3. **통계 섹션 추가** (info-box 아래에 추가, 보너스):

```php
<?php
// 간단한 통계 조회
$db = getTarotDB();
$user_id = $is_member ? $member['mb_id'] : session_id();
$total_readings = $db->query("SELECT COUNT(*) FROM readings WHERE user_id = '{$user_id}'")->fetchColumn();
?>

<?php if ($total_readings > 0): ?>
<div class="stats-box">
    <h3>📊 나의 타로 통계</h3>
    <div class="stats-grid">
        <div class="stat-item">
            <div class="stat-number"><?php echo $total_readings; ?></div>
            <div class="stat-label">총 리딩 횟수</div>
        </div>
        <div class="stat-item">
            <div class="stat-number"><?php echo date('Y.m.d'); ?></div>
            <div class="stat-label">오늘 날짜</div>
        </div>
        <div class="stat-item">
            <div class="stat-number">22</div>
            <div class="stat-label">메이저 아르카나</div>
        </div>
    </div>
</div>
<?php endif; ?>
```

4. **카드 뽑기 버튼에 로딩 상태 추가** (선택적, JS 필요 시):

```php
<div class="draw-section">
    <form method="post" action="" id="drawForm">
        <button type="submit" name="draw" class="draw-btn" id="drawBtn">
            🎴 카드 뽑기
        </button>
    </form>
</div>

<script>
document.getElementById('drawForm')?.addEventListener('submit', function() {
    const btn = document.getElementById('drawBtn');
    btn.innerHTML = '<span class="loading-spinner"></span>';
    btn.disabled = true;
});
</script>
```

5. **README 작성** (프로젝트 루트에 `README.md` 생성):

```markdown
# 🔮 g5se 오늘의 타로 스프레드 해석기

과거-현재-미래 3장 카드 리딩 & 운세 저장 플랫폼

## ✨ 주요 기능

- 메이저 아르카나 22장 타로 덱
- 3장 스프레드 (과거-현재-미래) 자동 생성
- 정방향/역방향 랜덤 결정
- 카드별 키워드 & 종합 해석 제공
- 리딩 결과 SQLite DB 저장
- 과거 리딩 기록 목록 & 상세 보기
- 회원/비회원 모두 이용 가능
- 다크모드 자동 대응
- 반응형 디자인

## 🚀 설치 방법

1. g5se 설치 (https://github.com/gnuboard/g5se)
2. `app/modules/tarot-spread/` 폴더에 파일 복사
3. `/tarot-spread` 접속하여 카드 뽑기

## 📁 파일 구조

```
app/modules/tarot-spread/
├── index.php          # 메인 페이지 (카드 뽑기)
├── history/
│   └── index.php      # 리딩 기록 목록
└── view/
    └── index.php      # 리딩 상세 보기

data/modules/
└── tarot-spread.sqlite  # 리딩 기록 DB (자동 생성)
```

## 🎨 커스터마이징

- 타로 덱 데이터는 `$tarot_deck` 배열에서 수정 가능
- 종합 해석 로직은 카드 뽑기 섹션에서 커스터마이징
- 색상/레이아웃은 인라인 스타일 또는 별도 CSS 파일로 분리 가능

## 📝 라이선스

MIT License
```

### 주요 개선 사항:

1. **카드 뒤집기 애니메이션**: CSS `@keyframes`로 3장 카드가 순차적으로 뒤집히는 효과
2. **로딩 스피너**: 카드 뽑기 버튼 클릭 시 로딩 표시 (선택적)
3. **통계 섹션**: 총 리딩 횟수 등 간단한 통계 표시 (보너스)
4. **README 문서**: 프로젝트 설명 & 설치 방법 정리

파일을 저장하고 전체 플로우를 테스트해주세요:
1. 메인 페이지에서 카드 뽑기
2. 결과 저장
3. 리딩 기록 목록 확인
4. 상세 보기 페이지 확인
5. 다크모드 토글 테스트

모든 기능이 정상 작동하면 프로젝트 완성입니다! 🎉