🎲 주사위 게임 컬렉션 - 다양한 확률 게임 플레이그라운드

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

**Step 1: 프로젝트 폴더 구조 생성 & 메인 페이지 골격**

아래 폴더 구조를 생성하세요:

```
app/modules/games/
├── index.php              (메인 게임 컬렉션)
├── classic/
│   └── index.php
├── lucky7/
│   └── index.php
├── polyhedral/
│   └── index.php
├── custom/
│   └── index.php
├── battle/
│   └── index.php
├── accumulate/
│   └── index.php
├── stats/
│   └── index.php
└── myrecords/
    └── index.php
```

**app/modules/games/index.php** 파일을 생성하고 다음 내용을 작성하세요:

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

// SQLite DB 초기화
@mkdir(G5_DATA_PATH.'/modules', 0707, true);
$dbPath = G5_DATA_PATH.'/modules/games.sqlite';
$pdo = new PDO('sqlite:'.$dbPath);
$pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

// 테이블 생성
$pdo->exec("
CREATE TABLE IF NOT EXISTS play_records (
    id INTEGER PRIMARY KEY AUTOINCREMENT,
    game_type TEXT NOT NULL,
    mb_id TEXT,
    session_id TEXT,
    result_data TEXT NOT NULL,
    score INTEGER DEFAULT 0,
    created_at DATETIME DEFAULT CURRENT_TIMESTAMP
)
");
$pdo->exec("CREATE INDEX IF NOT EXISTS idx_game_type ON play_records(game_type)");
$pdo->exec("CREATE INDEX IF NOT EXISTS idx_mb_id ON play_records(mb_id)");
$pdo->exec("CREATE INDEX IF NOT EXISTS idx_created_at ON play_records(created_at DESC)");

// 전체 게임 통계 조회
$stmt = $pdo->query("
    SELECT game_type, COUNT(*) as play_count
    FROM play_records
    GROUP BY game_type
    ORDER BY play_count DESC
");
$gameStats = $stmt->fetchAll(PDO::FETCH_ASSOC);
$statsMap = [];
foreach ($gameStats as $row) {
    $statsMap[$row['game_type']] = $row['play_count'];
}

// 게임 목록 정의
$games = [
    ['id' => 'classic', 'name' => '클래식 주사위', 'desc' => '1~6 숫자가 나오는 기본 주사위', 'icon' => '🎲'],
    ['id' => 'lucky7', 'name' => '럭키세븐', 'desc' => '두 주사위 합이 7이면 대박!', 'icon' => '🍀'],
    ['id' => 'polyhedral', 'name' => '다면체 주사위', 'desc' => 'd4, d6, d8, d10, d12, d20 선택', 'icon' => '🔷'],
    ['id' => 'custom', 'name' => '커스텀 주사위', 'desc' => '원하는 면 개수 설정', 'icon' => '⚙️'],
    ['id' => 'battle', 'name' => '주사위 배틀', 'desc' => '2인 대결 모드', 'icon' => '⚔️'],
    ['id' => 'accumulate', 'name' => '누적 점수', 'desc' => '목표 점수 먼저 도달하기', 'icon' => '🎯'],
];

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;">
        <h1 style="font-size: 2rem; font-weight: 700; margin-bottom: 12px; color: var(--m-text);">🎲 주사위 게임 컬렉션</h1>
        <p style="color: var(--m-text-muted); margin-bottom: 32px;">다양한 주사위 게임을 즐기고 기록을 남겨보세요!</p>
        
        <div class="game-grid" style="display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px;">
            <?php foreach ($games as $game): ?>
            <a href="/games/<?php echo htmlspecialchars($game['id']); ?>" class="game-card" style="text-decoration: none;">
                <div style="background: var(--m-surface); border-radius: var(--m-radius-lg); box-shadow: var(--m-shadow); padding: 24px; transition: transform 0.2s, box-shadow 0.2s;">
                    <div style="font-size: 3rem; margin-bottom: 12px;"><?php echo $game['icon']; ?></div>
                    <h3 style="font-size: 1.25rem; font-weight: 600; color: var(--m-text); margin-bottom: 8px;"><?php echo htmlspecialchars($game['name']); ?></h3>
                    <p style="color: var(--m-text-muted); font-size: 0.9rem; margin-bottom: 12px;"><?php echo htmlspecialchars($game['desc']); ?></p>
                    <div style="display: flex; align-items: center; gap: 8px; color: var(--m-text-muted); font-size: 0.85rem;">
                        <span>▶️ 플레이 횟수:</span>
                        <strong style="color: var(--m-primary);"><?php echo isset($statsMap[$game['id']]) ? number_format($statsMap[$game['id']]) : 0; ?></strong>
                    </div>
                </div>
            </a>
            <?php endforeach; ?>
        </div>
        
        <div style="margin-top: 40px; text-align: center;">
            <a href="/games/stats" style="display: inline-block; background: var(--m-primary); color: white; padding: 12px 24px; border-radius: var(--m-radius-lg); text-decoration: none; font-weight: 600;">📊 전체 통계 보기</a>
            <?php if ($is_member): ?>
            <a href="/games/myrecords" style="display: inline-block; background: var(--m-surface); color: var(--m-text); padding: 12px 24px; border-radius: var(--m-radius-lg); text-decoration: none; font-weight: 600; margin-left: 12px; box-shadow: var(--m-shadow);">📝 내 기록 보기</a>
            <?php endif; ?>
        </div>
    </main>
    <?php require G5_THEME_PATH.'/modern/_footer.inc.php'; ?>
</div>
<style>
.game-card:hover > div {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}
</style>
<?php include_once('./tail.sub.php'); ?>
```

이제 `/games` URL로 접속하면 게임 컬렉션 메인 페이지가 표시됩니다.

**Step 2: 클래식 주사위 게임 페이지 구현**

**app/modules/games/classic/index.php** 파일을 생성하고 다음 내용을 작성하세요:

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

// SQLite 연결
$dbPath = G5_DATA_PATH.'/modules/games.sqlite';
$pdo = new PDO('sqlite:'.$dbPath);
$pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

// AJAX 요청 처리 (주사위 굴리기)
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['action']) && $_POST['action'] === 'roll') {
    header('Content-Type: application/json');
    
    $result = rand(1, 6);
    $mbId = $is_member ? $member['mb_id'] : null;
    $sessionId = session_id();
    
    $stmt = $pdo->prepare("
        INSERT INTO play_records (game_type, mb_id, session_id, result_data, score)
        VALUES ('classic', ?, ?, ?, ?)
    ");
    $stmt->execute([$mbId, $sessionId, json_encode(['dice' => $result]), $result]);
    
    echo json_encode(['success' => true, 'result' => $result, 'id' => $pdo->lastInsertId()]);
    exit;
}

// 최근 기록 10개 조회
$stmt = $pdo->prepare("
    SELECT result_data, created_at
    FROM play_records
    WHERE game_type = 'classic'
    ORDER BY created_at DESC
    LIMIT 10
");
$stmt->execute();
$recentRecords = $stmt->fetchAll(PDO::FETCH_ASSOC);

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;">
        <a href="/games" style="color: var(--m-text-muted); text-decoration: none; margin-bottom: 20px; display: inline-block;">← 게임 목록으로</a>
        
        <h1 style="font-size: 2rem; font-weight: 700; margin-bottom: 12px; color: var(--m-text);">🎲 클래식 주사위</h1>
        <p style="color: var(--m-text-muted); margin-bottom: 32px;">1부터 6까지 나오는 일반 주사위입니다.</p>
        
        <div style="max-width: 600px; margin: 0 auto;">
            <div id="diceContainer" style="text-align: center; margin-bottom: 32px;">
                <div id="dice" style="width: 120px; height: 120px; margin: 0 auto 24px; background: white; border-radius: 16px; box-shadow: 0 4px 12px rgba(0,0,0,0.2); display: flex; align-items: center; justify-content: center; font-size: 4rem; font-weight: 700; color: #333;">
                    ?
                </div>
                <button id="rollBtn" style="background: var(--m-primary); color: white; padding: 14px 32px; border: none; border-radius: var(--m-radius-lg); font-size: 1.1rem; font-weight: 600; cursor: pointer; transition: transform 0.1s;">
                    주사위 굴리기
                </button>
            </div>
            
            <div style="background: var(--m-surface); border-radius: var(--m-radius-lg); box-shadow: var(--m-shadow); padding: 20px;">
                <h3 style="font-size: 1.1rem; font-weight: 600; color: var(--m-text); margin-bottom: 16px;">📜 최근 기록</h3>
                <div id="recordList">
                    <?php if (empty($recentRecords)): ?>
                    <p style="color: var(--m-text-muted); text-align: center;">아직 기록이 없습니다.</p>
                    <?php else: ?>
                    <?php foreach ($recentRecords as $record): ?>
                    <?php $data = json_decode($record['result_data'], true); ?>
                    <div style="padding: 12px; border-bottom: 1px solid rgba(0,0,0,0.1); display: flex; justify-content: space-between; align-items: center;">
                        <span style="font-size: 1.5rem;">🎲 <?php echo htmlspecialchars($data['dice']); ?></span>
                        <span style="color: var(--m-text-muted); font-size: 0.85rem;"><?php echo date('m/d H:i', strtotime($record['created_at'])); ?></span>
                    </div>
                    <?php endforeach; ?>
                    <?php endif; ?>
                </div>
            </div>
        </div>
    </main>
    <?php require G5_THEME_PATH.'/modern/_footer.inc.php'; ?>
</div>
<style>
@keyframes roll {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(720deg); }
}
.rolling {
    animation: roll 0.6s ease-out;
}
#rollBtn:hover {
    transform: scale(1.05);
}
#rollBtn:active {
    transform: scale(0.95);
}
</style>
<script>
const dice = document.getElementById('dice');
const rollBtn = document.getElementById('rollBtn');
const recordList = document.getElementById('recordList');

rollBtn.addEventListener('click', async () => {
    rollBtn.disabled = true;
    dice.textContent = '?';
    dice.classList.add('rolling');
    
    const formData = new FormData();
    formData.append('action', 'roll');
    
    try {
        const res = await fetch('/games/classic', {
            method: 'POST',
            body: formData
        });
        const data = await res.json();
        
        setTimeout(() => {
            dice.classList.remove('rolling');
            dice.textContent = data.result;
            
            // 기록 추가
            const now = new Date();
            const timeStr = `${String(now.getMonth()+1).padStart(2,'0')}/${String(now.getDate()).padStart(2,'0')} ${String(now.getHours()).padStart(2,'0')}:${String(now.getMinutes()).padStart(2,'0')}`;
            const newRecord = `
                <div style="padding: 12px; border-bottom: 1px solid rgba(0,0,0,0.1); display: flex; justify-content: space-between; align-items: center;">
                    <span style="font-size: 1.5rem;">🎲 ${data.result}</span>
                    <span style="color: var(--m-text-muted); font-size: 0.85rem;">${timeStr}</span>
                </div>
            `;
            recordList.insertAdjacentHTML('afterbegin', newRecord);
            
            // 10개 넘으면 마지막 제거
            const records = recordList.querySelectorAll('div');
            if (records.length > 10) {
                records[records.length - 1].remove();
            }
            
            rollBtn.disabled = false;
        }, 600);
    } catch (err) {
        console.error(err);
        alert('오류가 발생했습니다.');
        rollBtn.disabled = false;
        dice.classList.remove('rolling');
    }
});
</script>
<?php include_once('./tail.sub.php'); ?>
```

이제 `/games/classic` URL로 접속하면 클래식 주사위 게임을 플레이할 수 있습니다.

**Step 3: 럭키세븐 게임 & 다면체 주사위 게임 구현**

**app/modules/games/lucky7/index.php** 파일을 생성하세요:

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

$dbPath = G5_DATA_PATH.'/modules/games.sqlite';
$pdo = new PDO('sqlite:'.$dbPath);
$pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['action']) && $_POST['action'] === 'roll') {
    header('Content-Type: application/json');
    
    $dice1 = rand(1, 6);
    $dice2 = rand(1, 6);
    $sum = $dice1 + $dice2;
    $isLucky = ($sum === 7);
    
    $mbId = $is_member ? $member['mb_id'] : null;
    $sessionId = session_id();
    
    $stmt = $pdo->prepare("
        INSERT INTO play_records (game_type, mb_id, session_id, result_data, score)
        VALUES ('lucky7', ?, ?, ?, ?)
    ");
    $stmt->execute([$mbId, $sessionId, json_encode(['dice1' => $dice1, 'dice2' => $dice2, 'sum' => $sum, 'lucky' => $isLucky]), $isLucky ? 100 : 0]);
    
    echo json_encode(['success' => true, 'dice1' => $dice1, 'dice2' => $dice2, 'sum' => $sum, 'lucky' => $isLucky]);
    exit;
}

$stmt = $pdo->query("SELECT result_data, created_at FROM play_records WHERE game_type = 'lucky7' ORDER BY created_at DESC LIMIT 10");
$recentRecords = $stmt->fetchAll(PDO::FETCH_ASSOC);

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;">
        <a href="/games" style="color: var(--m-text-muted); text-decoration: none; margin-bottom: 20px; display: inline-block;">← 게임 목록으로</a>
        
        <h1 style="font-size: 2rem; font-weight: 700; margin-bottom: 12px; color: var(--m-text);">🍀 럭키세븐</h1>
        <p style="color: var(--m-text-muted); margin-bottom: 32px;">두 주사위의 합이 7이면 대박! 🎰</p>
        
        <div style="max-width: 600px; margin: 0 auto;">
            <div style="text-align: center; margin-bottom: 32px;">
                <div style="display: flex; gap: 20px; justify-content: center; margin-bottom: 24px;">
                    <div id="dice1" class="dice-box">?</div>
                    <div id="dice2" class="dice-box">?</div>
                </div>
                <div id="sumDisplay" style="font-size: 2rem; font-weight: 700; color: var(--m-text); margin-bottom: 12px;">합계: -</div>
                <div id="resultMsg" style="font-size: 1.2rem; font-weight: 600; min-height: 30px;"></div>
                <button id="rollBtn" class="roll-button">주사위 굴리기</button>
            </div>
            
            <div style="background: var(--m-surface); border-radius: var(--m-radius-lg); box-shadow: var(--m-shadow); padding: 20px;">
                <h3 style="font-size: 1.1rem; font-weight: 600; color: var(--m-text); margin-bottom: 16px;">📜 최근 기록</h3>
                <div id="recordList">
                    <?php if (empty($recentRecords)): ?>
                    <p style="color: var(--m-text-muted); text-align: center;">아직 기록이 없습니다.</p>
                    <?php else: ?>
                    <?php foreach ($recentRecords as $record): ?>
                    <?php $data = json_decode($record['result_data'], true); ?>
                    <div style="padding: 12px; border-bottom: 1px solid rgba(0,0,0,0.1); display: flex; justify-content: space-between; align-items: center;">
                        <span><?php echo $data['dice1']; ?> + <?php echo $data['dice2']; ?> = <?php echo $data['sum']; ?> <?php echo $data['lucky'] ? '🍀 럭키!' : ''; ?></span>
                        <span style="color: var(--m-text-muted); font-size: 0.85rem;"><?php echo date('m/d H:i', strtotime($record['created_at'])); ?></span>
                    </div>
                    <?php endforeach; ?>
                    <?php endif; ?>
                </div>
            </div>
        </div>
    </main>
    <?php require G5_THEME_PATH.'/modern/_footer.inc.php'; ?>
</div>
<style>
.dice-box {
    width: 100px;
    height: 100px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    font-weight: 700;
    color: #333;
}
.roll-button {
    background: var(--m-primary);
    color: white;
    padding: 14px 32px;
    border: none;
    border-radius: var(--m-radius-lg);
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.1s;
    margin-top: 20px;
}
.roll-button:hover { transform: scale(1.05); }
.roll-button:active { transform: scale(0.95); }
@keyframes roll { 0% { transform: rotate(0deg); } 100% { transform: rotate(720deg); } }
.rolling { animation: roll 0.6s ease-out; }
</style>
<script>
const dice1 = document.getElementById('dice1');
const dice2 = document.getElementById('dice2');
const sumDisplay = document.getElementById('sumDisplay');
const resultMsg = document.getElementById('resultMsg');
const rollBtn = document.getElementById('rollBtn');
const recordList = document.getElementById('recordList');

rollBtn.addEventListener('click', async () => {
    rollBtn.disabled = true;
    dice1.textContent = '?';
    dice2.textContent = '?';
    sumDisplay.textContent = '합계: -';
    resultMsg.textContent = '';
    dice1.classList.add('rolling');
    dice2.classList.add('rolling');
    
    const formData = new FormData();
    formData.append('action', 'roll');
    
    try {
        const res = await fetch('/games/lucky7', { method: 'POST', body: formData });
        const data = await res.json();
        
        setTimeout(() => {
            dice1.classList.remove('rolling');
            dice2.classList.remove('rolling');
            dice1.textContent = data.dice1;
            dice2.textContent = data.dice2;
            sumDisplay.textContent = `합계: ${data.sum}`;
            
            if (data.lucky) {
                resultMsg.innerHTML = '🎉 <span style="color: #FFD700;">럭키 세븐! 대박!</span>';
            } else {
                resultMsg.innerHTML = '<span style="color: var(--m-text-muted);">다음 기회에...</span>';
            }
            
            const now = new Date();
            const timeStr = `${String(now.getMonth()+1).padStart(2,'0')}/${String(now.getDate()).padStart(2,'0')} ${String(now.getHours()).padStart(2,'0')}:${String(now.getMinutes()).padStart(2,'0')}`;
            const newRecord = `
                <div style="padding: 12px; border-bottom: 1px solid rgba(0,0,0,0.1); display: flex; justify-content: space-between; align-items: center;">
                    <span>${data.dice1} + ${data.dice2} = ${data.sum} ${data.lucky ? '🍀 럭키!' : ''}</span>
                    <span style="color: var(--m-text-muted); font-size: 0.85rem;">${timeStr}</span>
                </div>
            `;
            recordList.insertAdjacentHTML('afterbegin', newRecord);
            const records = recordList.querySelectorAll('div');
            if (records.length > 10) records[records.length - 1].remove();
            
            rollBtn.disabled = false;
        }, 600);
    } catch (err) {
        console.error(err);
        alert('오류가 발생했습니다.');
        rollBtn.disabled = false;
    }
});
</script>
<?php include_once('./tail.sub.php'); ?>
```

**app/modules/games/polyhedral/index.php** 파일도 생성하세요 (다면체 주사위 - d4, d6, d8, d10, d12, d20 선택 가능). 코드는 lucky7와 유사하되, 주사위 종류 선택 `<select>` 추가하고 `rand(1, $sides)` 방식으로 구현하세요.

**Step 4: 커스텀 주사위 & 주사위 배틀 게임 구현**

**app/modules/games/custom/index.php** 파일을 생성하세요:

사용자가 슬라이더로 주사위 면 개수(2~100)를 선택하고, 그 범위 내에서 랜덤 숫자가 나오도록 구현하세요. UI는 슬라이더 + 현재 값 표시 + 주사위 굴리기 버튼. 결과는 큰 숫자로 표시하고 기록에 "커스텀 d{sides}: {result}" 형태로 저장.

**app/modules/games/battle/index.php** 파일을 생성하세요:

2인 대결 모드입니다. 각 플레이어(Player 1, Player 2)가 주사위를 굴리고, 더 큰 숫자가 나온 쪽이 승리. UI는 두 개의 주사위 + "배틀 시작" 버튼. 결과는 "Player 1: 5 vs Player 2: 3 → Player 1 승리!" 형태로 표시하고, 승자 이름을 강조(색상 변경). 기록에는 `result_data`에 `{"p1": 5, "p2": 3, "winner": 1}` JSON 저장.

두 페이지 모두 modern shell + 디자인 토큰 + AJAX 패턴 유지하세요.

**Step 5: 누적 점수 게임 & 전체 통계 대시보드 구현**

**app/modules/games/accumulate/index.php** 파일을 생성하세요:

목표 점수(예: 50점)를 먼저 달성하는 게임입니다. 주사위를 굴릴 때마다 나온 숫자만큼 점수 누적. 현재 점수를 화면에 큰 숫자로 표시하고, 목표 도달 시 "🎉 목표 달성! {roll_count}번 만에 성공!" 메시지 표시. "리셋" 버튼으로 다시 시작. 기록에는 `{"rolls": 12, "final_score": 53}` 형태로 저장.

**app/modules/games/stats/index.php** 파일을 생성하세요:

전체 통계 대시보드입니다:

1. **게임별 플레이 횟수 파이 차트** (Chart.js 사용)
   - `SELECT game_type, COUNT(*) FROM play_records GROUP BY game_type`
   - 차트는 `<canvas id="gameChart"></canvas>`에 렌더링

2. **최근 100개 플레이 타임라인**
   - 게임 타입, 결과 요약, 시간 표시
   - 무한 스크롤 (선택: 100개 이후 더보기 버튼)

3. **주사위 눈 분포 히스토그램** (클래식 주사위 한정)
   - `SELECT result_data FROM play_records WHERE game_type='classic'`
   - JSON 파싱하여 1~6 각 숫자 출현 횟수 집계
   - 막대 그래프로 표시

Chart.js는 CDN으로 로드:
```html
<script src="https://cdn.jsdelivr.net/npm/chart.js@4"></script>
```

차트 생성 예시:
```javascript
const ctx = document.getElementById('gameChart').getContext('2d');
new Chart(ctx, {
    type: 'pie',
    data: {
        labels: ['클래식', '럭키세븐', '다면체', '커스텀', '배틀', '누적'],
        datasets: [{
            data: [120, 85, 60, 45, 30, 20],
            backgroundColor: ['#FF6384', '#36A2EB', '#FFCE56', '#4BC0C0', '#9966FF', '#FF9F40']
        }]
    }
});
```

실제 데이터는 PHP에서 JSON으로 출력하고 JS에서 파싱하여 사용하세요.

**Step 6: 개인 기록 페이지 & UX 인터랙션 강화**

**app/modules/games/myrecords/index.php** 파일을 생성하세요:

로그인한 회원만 접근 가능 (`if (!$is_member) { alert_close('로그인이 필요합니다.'); }`). 사용자의 게임별 통계를 표시:

1. **게임별 플레이 횟수 & 최고 점수**
   - `SELECT game_type, COUNT(*) as play_count, MAX(score) as max_score FROM play_records WHERE mb_id = ? GROUP BY game_type`

2. **전체 플레이 기록 테이블**
   - 게임 타입, 결과, 점수, 날짜 표시
   - 각 행에 "삭제" 버튼 (AJAX로 DELETE 요청)

3. **삭제 기능 구현**
   - POST action=delete, id={record_id}
   - `DELETE FROM play_records WHERE id = ? AND mb_id = ?` (본인 기록만 삭제 가능)
   - 삭제 후 해당 행 fade-out 애니메이션

**UX 인터랙션 강화:**

1. **주사위 굴리기 사운드 효과 (선택 사항)**
   - Web Audio API로 간단한 "탁" 소리 재생
   - 또는 `<audio>` 태그 + 무료 효과음 파일

2. **결과 모달 팝업**
   - 주사위 결과가 나오면 화면 중앙에 모달 표시
   - "다시 하기" / "기록 보기" 버튼
   - 모달 외부 클릭 시 닫기

3. **호버 시 카드 틸트 효과**
   - 메인 페이지 게임 카드에 마우스 올리면 3D 틸트
   - vanilla-tilt.js 또는 순수 CSS transform 사용

4. **무한 스크롤 (통계 페이지)**
   - Intersection Observer API로 스크롤 끝 감지
   - 추가 데이터 AJAX 로드

모든 페이지에 modern shell 적용 유지하고, 다크모드에서도 잘 보이도록 색상 토큰 사용하세요.

**Step 7: 최종 마무리 & 선택 기능 구현**

**최종 점검 사항:**

1. **모든 페이지 modern shell 적용 확인**
   - `_head.inc.php`, `m-shell`, `_nav.inc.php`, `m-container`, `_footer.inc.php` 포함 여부
   - 디자인 토큰 (`var(--m-surface)` 등) 사용 여부

2. **SQLite prepared statement 확인**
   - 모든 SQL 쿼리가 `->prepare()` + `->execute([])` 방식 사용
   - 사용자 입력이 직접 쿼리에 들어가지 않도록

3. **XSS 방지 확인**
   - 모든 사용자 데이터 출력 시 `htmlspecialchars()` 사용

4. **다크모드 테스트**
   - 사이트 상단 다크모드 토글 버튼 클릭 후 모든 게임 페이지 확인
   - 텍스트/배경이 잘 보이는지 검증

**선택 기능 구현 (보너스):**

1. **주사위 스킨 커스터마이징**
   - 설정 페이지 (`/games/settings`) 추가
   - 주사위 색상(빨강, 파랑, 초록 등) 선택
   - localStorage에 저장하고 모든 게임에 적용

2. **실시간 순위표**
   - `/games/leaderboard` 페이지 추가
   - 오늘의 최고 점수 TOP 10 (게임별)
   - 자동 새로고침 (30초마다)

3. **친구 초대 링크**
   - 배틀 게임에서 "친구 초대" 버튼
   - 고유 세션 ID 생성하여 URL에 포함 (`/games/battle?session=abc123`)
   - 같은 세션 ID로 접속한 사용자끼리 결과 공유

4. **도전 과제 시스템**
   - "첫 럭키세븐 달성", "누적 게임 100회 플레이" 등 뱃지
   - 달성 시 모달 팝업으로 축하
   - 내 기록 페이지에 뱃지 목록 표시

**배포 전 체크리스트:**

- [ ] 모든 게임 페이지 정상 작동
- [ ] AJAX 요청 에러 핸들링
- [ ] 모바일 반응형 확인 (미디어 쿼리)
- [ ] 로딩 스피너 추가 (AJAX 요청 중)
- [ ] 404 페이지 처리 (존재하지 않는 게임 경로)
- [ ] 성능 최적화 (쿼리 인덱스, 이미지 압축)

축하합니다! 🎉 그누보드5 SE 위에서 동작하는 완전한 주사위 게임 컬렉션 플랫폼이 완성되었습니다.