🎲 확률 시뮬레이터 플레이그라운드 - 주사위/동전/뽑기 확률 실험실

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

## Step 1: 프로젝트 골격 생성 및 DB 초기화

### 파일 생성: `app/modules/probability/index.php`

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

// SQLite DB 초기화
$dbDir = G5_DATA_PATH.'/modules';
if (!is_dir($dbDir)) {
    @mkdir($dbDir, 0707, true);
}
$dbPath = $dbDir.'/probability.sqlite';
$db = new PDO('sqlite:'.$dbPath);
$db->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

// 테이블 생성 (첫 접근 시)
$db->exec("
    CREATE TABLE IF NOT EXISTS experiments (
        id INTEGER PRIMARY KEY AUTOINCREMENT,
        name TEXT NOT NULL,
        type TEXT NOT NULL,
        config TEXT NOT NULL,
        result TEXT NOT NULL,
        created_at DATETIME DEFAULT CURRENT_TIMESTAMP
    )
");

require_once(G5_THEME_PATH.'/modern/_head.inc.php');
include_once('./head.sub.php');
?>
<style>
.prob-hero {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 48px 24px;
    border-radius: var(--m-radius-lg);
    text-align: center;
    margin-bottom: 32px;
}
.prob-hero h1 {
    font-size: 2.5rem;
    font-weight: 800;
    margin-bottom: 12px;
}
.prob-hero p {
    font-size: 1.1rem;
    opacity: 0.9;
}
.experiment-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin-bottom: 32px;
}
.exp-card {
    background: var(--m-surface);
    border-radius: var(--m-radius-lg);
    padding: 24px;
    box-shadow: var(--m-shadow);
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}
.exp-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}
.exp-card h3 {
    font-size: 1.4rem;
    margin-bottom: 8px;
    color: var(--m-text);
}
.exp-card p {
    color: var(--m-text-muted);
    font-size: 0.95rem;
}
.exp-icon {
    font-size: 3rem;
    margin-bottom: 12px;
}
</style>
<div class="m-shell">
    <?php require G5_THEME_PATH.'/modern/_nav.inc.php'; ?>
    <main class="m-container" style="padding: 32px 20px 48px;">
        <div class="prob-hero">
            <h1>🎲 확률 시뮬레이터</h1>
            <p>주사위, 동전, 카드, 가챠 — 확률의 세계를 실험하세요</p>
        </div>

        <div class="experiment-grid">
            <div class="exp-card" onclick="location.href='/probability/coin'">
                <div class="exp-icon">🪙</div>
                <h3>동전 던지기</h3>
                <p>앞면과 뒷면의 확률 분포를 확인하세요</p>
            </div>
            <div class="exp-card" onclick="location.href='/probability/dice'">
                <div class="exp-icon">🎲</div>
                <h3>주사위 굴리기</h3>
                <p>6면체부터 20면체까지 다양한 주사위 시뮬레이션</p>
            </div>
            <div class="exp-card" onclick="location.href='/probability/card'">
                <div class="exp-icon">🃏</div>
                <h3>카드 뽑기</h3>
                <p>52장 덱에서 특정 카드가 나올 확률 실험</p>
            </div>
            <div class="exp-card" onclick="location.href='/probability/gacha'">
                <div class="exp-icon">🎁</div>
                <h3>가챠 시뮬레이터</h3>
                <p>SSR/SR/R 등급별 확률 설정 및 뽑기 시뮬레이션</p>
            </div>
        </div>

        <div style="background: var(--m-surface); padding: 24px; border-radius: var(--m-radius-lg); box-shadow: var(--m-shadow);">
            <h2 style="margin-bottom: 16px; color: var(--m-text);">📊 최근 실험 기록</h2>
            <?php
            $stmt = $db->query("SELECT * FROM experiments ORDER BY created_at DESC LIMIT 10");
            $experiments = $stmt->fetchAll(PDO::FETCH_ASSOC);
            if (empty($experiments)) {
                echo '<p style="color: var(--m-text-muted);">아직 실험 기록이 없습니다. 위에서 실험을 시작하세요!</p>';
            } else {
                echo '<ul style="list-style: none; padding: 0;">';
                foreach ($experiments as $exp) {
                    $typeEmoji = [
                        'coin' => '🪙',
                        'dice' => '🎲',
                        'card' => '🃏',
                        'gacha' => '🎁'
                    ];
                    $emoji = $typeEmoji[$exp['type']] ?? '🔬';
                    echo '<li style="padding: 12px; border-bottom: 1px solid rgba(0,0,0,0.1); color: var(--m-text);">';
                    echo $emoji.' '.htmlspecialchars($exp['name']).' — '.date('Y-m-d H:i', strtotime($exp['created_at']));
                    echo '</li>';
                }
                echo '</ul>';
            }
            ?>
        </div>
    </main>
    <?php require G5_THEME_PATH.'/modern/_footer.inc.php'; ?>
</div>
<?php include_once('./tail.sub.php'); ?>
```

이 파일을 생성하면 `/probability` URL로 접근 시 메인 페이지가 나타납니다. 4가지 실험 타입 카드가 그리드로 배치되고, 하단에 최근 실험 기록이 표시됩니다.

## Step 2: 동전 던지기 시뮬레이터 구현

### 파일 생성: `app/modules/probability/coin/index.php`

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

$dbDir = G5_DATA_PATH.'/modules';
if (!is_dir($dbDir)) {
    @mkdir($dbDir, 0707, true);
}
$dbPath = $dbDir.'/probability.sqlite';
$db = new PDO('sqlite:'.$dbPath);
$db->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

// AJAX 시뮬레이션 요청 처리
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['action']) && $_POST['action'] === 'simulate') {
    header('Content-Type: application/json');
    $trials = (int)$_POST['trials'];
    if ($trials < 10 || $trials > 100000) {
        echo json_encode(['error' => '시행 횟수는 10~100,000 사이여야 합니다.']);
        exit;
    }

    $heads = 0;
    $tails = 0;
    for ($i = 0; $i < $trials; $i++) {
        if (rand(0, 1) === 0) {
            $heads++;
        } else {
            $tails++;
        }
    }

    $result = [
        'heads' => $heads,
        'tails' => $tails,
        'headsPercent' => round(($heads / $trials) * 100, 2),
        'tailsPercent' => round(($tails / $trials) * 100, 2),
        'trials' => $trials
    ];

    // DB에 저장
    $name = '동전 던지기 '.$trials.'회';
    $config = json_encode(['trials' => $trials]);
    $resultJson = json_encode($result);
    $stmt = $db->prepare("INSERT INTO experiments (name, type, config, result) VALUES (?, ?, ?, ?)");
    $stmt->execute([$name, 'coin', $config, $resultJson]);

    echo json_encode($result);
    exit;
}

require_once(G5_THEME_PATH.'/modern/_head.inc.php');
include_once('./head.sub.php');
?>
<style>
.coin-container {
    background: var(--m-surface);
    padding: 32px;
    border-radius: var(--m-radius-lg);
    box-shadow: var(--m-shadow);
    margin-bottom: 24px;
}
.coin-form {
    display: flex;
    gap: 12px;
    margin-bottom: 24px;
    align-items: center;
}
.coin-form input {
    flex: 1;
    padding: 12px;
    border: 1px solid rgba(0,0,0,0.2);
    border-radius: 8px;
    font-size: 1rem;
}
.coin-form button {
    padding: 12px 32px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s;
}
.coin-form button:hover {
    transform: scale(1.05);
}
.coin-form button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
#result-section {
    display: none;
}
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}
.stat-card {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    color: white;
    padding: 20px;
    border-radius: 12px;
    text-align: center;
}
.stat-card h3 {
    font-size: 2rem;
    margin-bottom: 8px;
}
.stat-card p {
    font-size: 0.9rem;
    opacity: 0.9;
}
</style>
<div class="m-shell">
    <?php require G5_THEME_PATH.'/modern/_nav.inc.php'; ?>
    <main class="m-container" style="padding: 32px 20px 48px;">
        <h1 style="margin-bottom: 24px; color: var(--m-text);">🪙 동전 던지기 시뮬레이터</h1>

        <div class="coin-container">
            <form class="coin-form" id="coin-form">
                <input type="number" id="trials" name="trials" placeholder="시행 횟수 (10~100,000)" min="10" max="100000" value="1000" required>
                <button type="submit" id="simulate-btn">시뮬레이션 시작</button>
            </form>
            <p style="color: var(--m-text-muted); font-size: 0.9rem;">💡 시행 횟수가 많을수록 이론적 확률(50%/50%)에 가까워집니다.</p>
        </div>

        <div id="result-section">
            <div class="stats-grid">
                <div class="stat-card">
                    <h3 id="heads-count">0</h3>
                    <p>앞면 (<span id="heads-percent">0</span>%)</p>
                </div>
                <div class="stat-card" style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);">
                    <h3 id="tails-count">0</h3>
                    <p>뒷면 (<span id="tails-percent">0</span>%)</p>
                </div>
            </div>

            <div style="background: var(--m-surface); padding: 24px; border-radius: var(--m-radius-lg); box-shadow: var(--m-shadow);">
                <canvas id="coin-chart"></canvas>
            </div>
        </div>
    </main>
    <?php require G5_THEME_PATH.'/modern/_footer.inc.php'; ?>
</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
const form = document.getElementById('coin-form');
const btn = document.getElementById('simulate-btn');
const resultSection = document.getElementById('result-section');
let chart = null;

form.addEventListener('submit', async (e) => {
    e.preventDefault();
    const trials = document.getElementById('trials').value;
    if (trials < 10 || trials > 100000) {
        alert('시행 횟수는 10~100,000 사이여야 합니다.');
        return;
    }

    btn.disabled = true;
    btn.textContent = '시뮬레이션 중...';

    const formData = new FormData();
    formData.append('action', 'simulate');
    formData.append('trials', trials);

    const res = await fetch('/probability/coin', {
        method: 'POST',
        body: formData
    });
    const data = await res.json();

    if (data.error) {
        alert(data.error);
        btn.disabled = false;
        btn.textContent = '시뮬레이션 시작';
        return;
    }

    // 결과 표시
    document.getElementById('heads-count').textContent = data.heads.toLocaleString();
    document.getElementById('tails-count').textContent = data.tails.toLocaleString();
    document.getElementById('heads-percent').textContent = data.headsPercent;
    document.getElementById('tails-percent').textContent = data.tailsPercent;

    // 차트 렌더링
    if (chart) chart.destroy();
    const ctx = document.getElementById('coin-chart').getContext('2d');
    chart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: ['앞면', '뒷면'],
            datasets: [{
                label: '결과',
                data: [data.heads, data.tails],
                backgroundColor: ['#f093fb', '#4facfe']
            }, {
                label: '이론값 (50%)',
                data: [data.trials / 2, data.trials / 2],
                backgroundColor: ['rgba(0,0,0,0.2)', 'rgba(0,0,0,0.2)'],
                borderColor: ['#000', '#000'],
                borderWidth: 2,
                type: 'line'
            }]
        },
        options: {
            responsive: true,
            plugins: {
                legend: { display: true }
            }
        }
    });

    resultSection.style.display = 'block';
    btn.disabled = false;
    btn.textContent = '시뮬레이션 시작';
});
</script>
<?php include_once('./tail.sub.php'); ?>
```

이 파일을 생성하면 `/probability/coin` URL로 동전 던지기 시뮬레이터에 접근할 수 있습니다.

## Step 3: 주사위 굴리기 시뮬레이터 구현

### 파일 생성: `app/modules/probability/dice/index.php`

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

$dbDir = G5_DATA_PATH.'/modules';
if (!is_dir($dbDir)) {
    @mkdir($dbDir, 0707, true);
}
$dbPath = $dbDir.'/probability.sqlite';
$db = new PDO('sqlite:'.$dbPath);
$db->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['action']) && $_POST['action'] === 'simulate') {
    header('Content-Type: application/json');
    $trials = (int)$_POST['trials'];
    $sides = (int)$_POST['sides'];
    if ($trials < 10 || $trials > 100000) {
        echo json_encode(['error' => '시행 횟수는 10~100,000 사이여야 합니다.']);
        exit;
    }
    if (!in_array($sides, [4, 6, 8, 10, 12, 20])) {
        echo json_encode(['error' => '지원하지 않는 주사위 면 수입니다.']);
        exit;
    }

    $counts = array_fill(1, $sides, 0);
    for ($i = 0; $i < $trials; $i++) {
        $roll = rand(1, $sides);
        $counts[$roll]++;
    }

    $percents = [];
    foreach ($counts as $face => $count) {
        $percents[$face] = round(($count / $trials) * 100, 2);
    }

    $result = [
        'counts' => $counts,
        'percents' => $percents,
        'trials' => $trials,
        'sides' => $sides,
        'theoreticalPercent' => round(100 / $sides, 2)
    ];

    $name = $sides.'면 주사위 '.$trials.'회';
    $config = json_encode(['trials' => $trials, 'sides' => $sides]);
    $resultJson = json_encode($result);
    $stmt = $db->prepare("INSERT INTO experiments (name, type, config, result) VALUES (?, ?, ?, ?)");
    $stmt->execute([$name, 'dice', $config, $resultJson]);

    echo json_encode($result);
    exit;
}

require_once(G5_THEME_PATH.'/modern/_head.inc.php');
include_once('./head.sub.php');
?>
<style>
.dice-container {
    background: var(--m-surface);
    padding: 32px;
    border-radius: var(--m-radius-lg);
    box-shadow: var(--m-shadow);
    margin-bottom: 24px;
}
.dice-form {
    display: flex;
    gap: 12px;
    margin-bottom: 24px;
    align-items: center;
}
.dice-form select,
.dice-form input {
    flex: 1;
    padding: 12px;
    border: 1px solid rgba(0,0,0,0.2);
    border-radius: 8px;
    font-size: 1rem;
}
.dice-form button {
    padding: 12px 32px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
}
#result-section {
    display: none;
}
.theory-note {
    background: rgba(102, 126, 234, 0.1);
    padding: 16px;
    border-radius: 8px;
    margin-top: 16px;
    color: var(--m-text);
}
</style>
<div class="m-shell">
    <?php require G5_THEME_PATH.'/modern/_nav.inc.php'; ?>
    <main class="m-container" style="padding: 32px 20px 48px;">
        <h1 style="margin-bottom: 24px; color: var(--m-text);">🎲 주사위 굴리기 시뮬레이터</h1>

        <div class="dice-container">
            <form class="dice-form" id="dice-form">
                <select id="sides" name="sides" required>
                    <option value="4">4면체 (D4)</option>
                    <option value="6" selected>6면체 (D6)</option>
                    <option value="8">8면체 (D8)</option>
                    <option value="10">10면체 (D10)</option>
                    <option value="12">12면체 (D12)</option>
                    <option value="20">20면체 (D20)</option>
                </select>
                <input type="number" id="trials" name="trials" placeholder="시행 횟수" min="10" max="100000" value="6000" required>
                <button type="submit" id="simulate-btn">굴리기</button>
            </form>
        </div>

        <div id="result-section">
            <div style="background: var(--m-surface); padding: 24px; border-radius: var(--m-radius-lg); box-shadow: var(--m-shadow); margin-bottom: 24px;">
                <canvas id="dice-chart"></canvas>
            </div>
            <div class="theory-note">
                <strong>📊 이론적 확률:</strong> 각 면이 나올 확률은 <span id="theory-percent"></span>% 입니다.
            </div>
        </div>
    </main>
    <?php require G5_THEME_PATH.'/modern/_footer.inc.php'; ?>
</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
const form = document.getElementById('dice-form');
const btn = document.getElementById('simulate-btn');
const resultSection = document.getElementById('result-section');
let chart = null;

form.addEventListener('submit', async (e) => {
    e.preventDefault();
    const trials = document.getElementById('trials').value;
    const sides = document.getElementById('sides').value;

    btn.disabled = true;
    btn.textContent = '시뮬레이션 중...';

    const formData = new FormData();
    formData.append('action', 'simulate');
    formData.append('trials', trials);
    formData.append('sides', sides);

    const res = await fetch('/probability/dice', {
        method: 'POST',
        body: formData
    });
    const data = await res.json();

    if (data.error) {
        alert(data.error);
        btn.disabled = false;
        btn.textContent = '굴리기';
        return;
    }

    // 차트 렌더링
    const labels = Object.keys(data.counts);
    const counts = Object.values(data.counts);
    const theoreticalLine = Array(labels.length).fill(data.trials / data.sides);

    if (chart) chart.destroy();
    const ctx = document.getElementById('dice-chart').getContext('2d');
    chart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: labels.map(l => `면 ${l}`),
            datasets: [{
                label: '실제 결과',
                data: counts,
                backgroundColor: 'rgba(102, 126, 234, 0.7)'
            }, {
                label: '이론값',
                data: theoreticalLine,
                type: 'line',
                borderColor: '#f5576c',
                borderWidth: 2,
                fill: false
            }]
        },
        options: {
            responsive: true,
            plugins: {
                legend: { display: true }
            }
        }
    });

    document.getElementById('theory-percent').textContent = data.theoreticalPercent;
    resultSection.style.display = 'block';
    btn.disabled = false;
    btn.textContent = '굴리기';
});
</script>
<?php include_once('./tail.sub.php'); ?>
```

## Step 4: 카드 뽑기 시뮬레이터 구현

### 파일 생성: `app/modules/probability/card/index.php`

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

$dbDir = G5_DATA_PATH.'/modules';
if (!is_dir($dbDir)) {
    @mkdir($dbDir, 0707, true);
}
$dbPath = $dbDir.'/probability.sqlite';
$db = new PDO('sqlite:'.$dbPath);
$db->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['action']) && $_POST['action'] === 'simulate') {
    header('Content-Type: application/json');
    $trials = (int)$_POST['trials'];
    $targetSuit = $_POST['suit'] ?? 'any';
    $targetRank = $_POST['rank'] ?? 'any';

    if ($trials < 10 || $trials > 100000) {
        echo json_encode(['error' => '시행 횟수는 10~100,000 사이여야 합니다.']);
        exit;
    }

    $suits = ['♠', '♥', '♦', '♣'];
    $ranks = ['A', '2', '3', '4', '5', '6', '7', '8', '9', '10', 'J', 'Q', 'K'];
    $deck = [];
    foreach ($suits as $suit) {
        foreach ($ranks as $rank) {
            $deck[] = $suit.$rank;
        }
    }

    $matchCount = 0;
    $suitCounts = array_fill_keys($suits, 0);
    $rankCounts = array_fill_keys($ranks, 0);

    for ($i = 0; $i < $trials; $i++) {
        $card = $deck[array_rand($deck)];
        $suit = mb_substr($card, 0, 1);
        $rank = mb_substr($card, 1);

        $suitCounts[$suit]++;
        $rankCounts[$rank]++;

        $suitMatch = ($targetSuit === 'any' || $suit === $targetSuit);
        $rankMatch = ($targetRank === 'any' || $rank === $targetRank);
        if ($suitMatch && $rankMatch) {
            $matchCount++;
        }
    }

    $theoreticalProb = 1;
    if ($targetSuit !== 'any') $theoreticalProb *= 0.25;
    if ($targetRank !== 'any') $theoreticalProb *= (1/13);

    $result = [
        'matchCount' => $matchCount,
        'matchPercent' => round(($matchCount / $trials) * 100, 2),
        'theoreticalPercent' => round($theoreticalProb * 100, 2),
        'suitCounts' => $suitCounts,
        'rankCounts' => $rankCounts,
        'trials' => $trials
    ];

    $name = '카드 뽑기 '.$trials.'회';
    $config = json_encode(['trials' => $trials, 'suit' => $targetSuit, 'rank' => $targetRank]);
    $resultJson = json_encode($result);
    $stmt = $db->prepare("INSERT INTO experiments (name, type, config, result) VALUES (?, ?, ?, ?)");
    $stmt->execute([$name, 'card', $config, $resultJson]);

    echo json_encode($result);
    exit;
}

require_once(G5_THEME_PATH.'/modern/_head.inc.php');
include_once('./head.sub.php');
?>
<style>
.card-container {
    background: var(--m-surface);
    padding: 32px;
    border-radius: var(--m-radius-lg);
    box-shadow: var(--m-shadow);
    margin-bottom: 24px;
}
.card-form {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
    margin-bottom: 24px;
}
.card-form select,
.card-form input {
    padding: 12px;
    border: 1px solid rgba(0,0,0,0.2);
    border-radius: 8px;
    font-size: 1rem;
}
.card-form button {
    padding: 12px 32px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    grid-column: span 2;
}
#result-section {
    display: none;
}
.match-stat {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    color: white;
    padding: 32px;
    border-radius: var(--m-radius-lg);
    text-align: center;
    margin-bottom: 24px;
}
.match-stat h2 {
    font-size: 3rem;
    margin-bottom: 8px;
}
</style>
<div class="m-shell">
    <?php require G5_THEME_PATH.'/modern/_nav.inc.php'; ?>
    <main class="m-container" style="padding: 32px 20px 48px;">
        <h1 style="margin-bottom: 24px; color: var(--m-text);">🃏 카드 뽑기 시뮬레이터</h1>

        <div class="card-container">
            <form class="card-form" id="card-form">
                <select id="suit" name="suit">
                    <option value="any">모든 무늬</option>
                    <option value="♠">♠ 스페이드</option>
                    <option value="♥">♥ 하트</option>
                    <option value="♦">♦ 다이아몬드</option>
                    <option value="♣">♣ 클로버</option>
                </select>
                <select id="rank" name="rank">
                    <option value="any">모든 숫자</option>
                    <option value="A">A</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="4">4</option>
                    <option value="5">5</option>
                    <option value="6">6</option>
                    <option value="7">7</option>
                    <option value="8">8</option>
                    <option value="9">9</option>
                    <option value="10">10</option>
                    <option value="J">J</option>
                    <option value="Q">Q</option>
                    <option value="K">K</option>
                </select>
                <input type="number" id="trials" name="trials" placeholder="시행 횟수" min="10" max="100000" value="5200" required>
                <button type="submit" id="simulate-btn">뽑기 시작</button>
            </form>
            <p style="color: var(--m-text-muted); font-size: 0.9rem;">💡 특정 무늬나 숫자를 선택하면 해당 조건에 맞는 카드가 나올 확률을 확인할 수 있습니다.</p>
        </div>

        <div id="result-section">
            <div class="match-stat">
                <h2 id="match-count">0</h2>
                <p>조건 일치 (<span id="match-percent">0</span>%)</p>
                <small>이론적 확률: <span id="theory-percent">0</span>%</small>
            </div>

            <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 24px;">
                <div style="background: var(--m-surface); padding: 24px; border-radius: var(--m-radius-lg); box-shadow: var(--m-shadow);">
                    <h3 style="margin-bottom: 16px; color: var(--m-text);">무늬별 분포</h3>
                    <canvas id="suit-chart"></canvas>
                </div>
                <div style="background: var(--m-surface); padding: 24px; border-radius: var(--m-radius-lg); box-shadow: var(--m-shadow);">
                    <h3 style="margin-bottom: 16px; color: var(--m-text);">숫자별 분포</h3>
                    <canvas id="rank-chart"></canvas>
                </div>
            </div>
        </div>
    </main>
    <?php require G5_THEME_PATH.'/modern/_footer.inc.php'; ?>
</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
const form = document.getElementById('card-form');
const btn = document.getElementById('simulate-btn');
const resultSection = document.getElementById('result-section');
let suitChart = null;
let rankChart = null;

form.addEventListener('submit', async (e) => {
    e.preventDefault();
    btn.disabled = true;
    btn.textContent = '시뮬레이션 중...';

    const formData = new FormData(form);
    formData.append('action', 'simulate');

    const res = await fetch('/probability/card', {
        method: 'POST',
        body: formData
    });
    const data = await res.json();

    if (data.error) {
        alert(data.error);
        btn.disabled = false;
        btn.textContent = '뽑기 시작';
        return;
    }

    document.getElementById('match-count').textContent = data.matchCount.toLocaleString();
    document.getElementById('match-percent').textContent = data.matchPercent;
    document.getElementById('theory-percent').textContent = data.theoreticalPercent;

    // 무늬 차트
    if (suitChart) suitChart.destroy();
    const suitCtx = document.getElementById('suit-chart').getContext('2d');
    suitChart = new Chart(suitCtx, {
        type: 'pie',
        data: {
            labels: Object.keys(data.suitCounts),
            datasets: [{
                data: Object.values(data.suitCounts),
                backgroundColor: ['#000', '#f5576c', '#f093fb', '#4facfe']
            }]
        },
        options: { responsive: true }
    });

    // 숫자 차트
    if (rankChart) rankChart.destroy();
    const rankCtx = document.getElementById('rank-chart').getContext('2d');
    rankChart = new Chart(rankCtx, {
        type: 'bar',
        data: {
            labels: Object.keys(data.rankCounts),
            datasets: [{
                label: '빈도',
                data: Object.values(data.rankCounts),
                backgroundColor: 'rgba(102, 126, 234, 0.7)'
            }]
        },
        options: { responsive: true }
    });

    resultSection.style.display = 'block';
    btn.disabled = false;
    btn.textContent = '뽑기 시작';
});
</script>
<?php include_once('./tail.sub.php'); ?>
```

## Step 5: 가챠 시뮬레이터 구현

### 파일 생성: `app/modules/probability/gacha/index.php`

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

$dbDir = G5_DATA_PATH.'/modules';
if (!is_dir($dbDir)) {
    @mkdir($dbDir, 0707, true);
}
$dbPath = $dbDir.'/probability.sqlite';
$db = new PDO('sqlite:'.$dbPath);
$db->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['action']) && $_POST['action'] === 'simulate') {
    header('Content-Type: application/json');
    $trials = (int)$_POST['trials'];
    $ssrRate = (float)$_POST['ssr_rate'];
    $srRate = (float)$_POST['sr_rate'];
    $rRate = (float)$_POST['r_rate'];

    if ($trials < 10 || $trials > 100000) {
        echo json_encode(['error' => '시행 횟수는 10~100,000 사이여야 합니다.']);
        exit;
    }
    if (abs(($ssrRate + $srRate + $rRate) - 100) > 0.01) {
        echo json_encode(['error' => '확률 합계는 100%여야 합니다.']);
        exit;
    }

    $ssrCount = 0;
    $srCount = 0;
    $rCount = 0;

    for ($i = 0; $i < $trials; $i++) {
        $rand = mt_rand() / mt_getrandmax() * 100;
        if ($rand < $ssrRate) {
            $ssrCount++;
        } elseif ($rand < $ssrRate + $srRate) {
            $srCount++;
        } else {
            $rCount++;
        }
    }

    $result = [
        'ssr' => $ssrCount,
        'sr' => $srCount,
        'r' => $rCount,
        'ssrPercent' => round(($ssrCount / $trials) * 100, 2),
        'srPercent' => round(($srCount / $trials) * 100, 2),
        'rPercent' => round(($rCount / $trials) * 100, 2),
        'trials' => $trials,
        'rates' => ['ssr' => $ssrRate, 'sr' => $srRate, 'r' => $rRate]
    ];

    $name = '가챠 '.$trials.'회';
    $config = json_encode(['trials' => $trials, 'ssr_rate' => $ssrRate, 'sr_rate' => $srRate, 'r_rate' => $rRate]);
    $resultJson = json_encode($result);
    $stmt = $db->prepare("INSERT INTO experiments (name, type, config, result) VALUES (?, ?, ?, ?)");
    $stmt->execute([$name, 'gacha', $config, $resultJson]);

    echo json_encode($result);
    exit;
}

require_once(G5_THEME_PATH.'/modern/_head.inc.php');
include_once('./head.sub.php');
?>
<style>
.gacha-container {
    background: var(--m-surface);
    padding: 32px;
    border-radius: var(--m-radius-lg);
    box-shadow: var(--m-shadow);
    margin-bottom: 24px;
}
.gacha-form {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
    margin-bottom: 24px;
}
.gacha-form input {
    padding: 12px;
    border: 1px solid rgba(0,0,0,0.2);
    border-radius: 8px;
    font-size: 1rem;
}
.gacha-form button {
    padding: 12px 32px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    grid-column: span 2;
}
#result-section {
    display: none;
}
.rarity-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}
.rarity-card {
    padding: 24px;
    border-radius: var(--m-radius-lg);
    color: white;
    text-align: center;
}
.rarity-card.ssr {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}
.rarity-card.sr {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}
.rarity-card.r {
    background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
}
.rarity-card h3 {
    font-size: 2rem;
    margin-bottom: 8px;
}
</style>
<div class="m-shell">
    <?php require G5_THEME_PATH.'/modern/_nav.inc.php'; ?>
    <main class="m-container" style="padding: 32px 20px 48px;">
        <h1 style="margin-bottom: 24px; color: var(--m-text);">🎁 가챠 시뮬레이터</h1>

        <div class="gacha-container">
            <form class="gacha-form" id="gacha-form">
                <input type="number" id="ssr_rate" name="ssr_rate" placeholder="SSR 확률 (%)" step="0.01" value="0.5" required>
                <input type="number" id="sr_rate" name="sr_rate" placeholder="SR 확률 (%)" step="0.01" value="5" required>
                <input type="number" id="r_rate" name="r_rate" placeholder="R 확률 (%)" step="0.01" value="94.5" required>
                <input type="number" id="trials" name="trials" placeholder="시행 횟수" min="10" max="100000" value="10000" required>
                <button type="submit" id="simulate-btn">가챠 돌리기</button>
            </form>
            <p style="color: var(--m-text-muted); font-size: 0.9rem;">💡 확률 합계는 100%여야 합니다. 예: SSR 0.5% + SR 5% + R 94.5% = 100%</p>
        </div>

        <div id="result-section">
            <div class="rarity-grid">
                <div class="rarity-card ssr">
                    <h3 id="ssr-count">0</h3>
                    <p>SSR (<span id="ssr-percent">0</span>%)</p>
                    <small>이론: <span id="ssr-theory">0</span>%</small>
                </div>
                <div class="rarity-card sr">
                    <h3 id="sr-count">0</h3>
                    <p>SR (<span id="sr-percent">0</span>%)</p>
                    <small>이론: <span id="sr-theory">0</span>%</small>
                </div>
                <div class="rarity-card r">
                    <h3 id="r-count">0</h3>
                    <p>R (<span id="r-percent">0</span>%)</p>
                    <small>이론: <span id="r-theory">0</span>%</small>
                </div>
            </div>

            <div style="background: var(--m-surface); padding: 24px; border-radius: var(--m-radius-lg); box-shadow: var(--m-shadow);">
                <h3 style="margin-bottom: 16px; color: var(--m-text);">등급별 분포</h3>
                <canvas id="gacha-chart"></canvas>
            </div>
        </div>
    </main>
    <?php require G5_THEME_PATH.'/modern/_footer.inc.php'; ?>
</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
const form = document.getElementById('gacha-form');
const btn = document.getElementById('simulate-btn');
const resultSection = document.getElementById('result-section');
let chart = null;

form.addEventListener('submit', async (e) => {
    e.preventDefault();
    btn.disabled = true;
    btn.textContent = '시뮬레이션 중...';

    const formData = new FormData(form);
    formData.append('action', 'simulate');

    const res = await fetch('/probability/gacha', {
        method: 'POST',
        body: formData
    });
    const data = await res.json();

    if (data.error) {
        alert(data.error);
        btn.disabled = false;
        btn.textContent = '가챠 돌리기';
        return;
    }

    document.getElementById('ssr-count').textContent = data.ssr.toLocaleString();
    document.getElementById('sr-count').textContent = data.sr.toLocaleString();
    document.getElementById('r-count').textContent = data.r.toLocaleString();
    document.getElementById('ssr-percent').textContent = data.ssrPercent;
    document.getElementById('sr-percent').textContent = data.srPercent;
    document.getElementById('r-percent').textContent = data.rPercent;
    document.getElementById('ssr-theory').textContent = data.rates.ssr;
    document.getElementById('sr-theory').textContent = data.rates.sr;
    document.getElementById('r-theory').textContent = data.rates.r;

    if (chart) chart.destroy();
    const ctx = document.getElementById('gacha-chart').getContext('2d');
    chart = new Chart(ctx, {
        type: 'doughnut',
        data: {
            labels: ['SSR', 'SR', 'R'],
            datasets: [{
                data: [data.ssr, data.sr, data.r],
                backgroundColor: ['#f093fb', '#4facfe', '#43e97b']
            }]
        },
        options: { responsive: true }
    });

    resultSection.style.display = 'block';
    btn.disabled = false;
    btn.textContent = '가챠 돌리기';
});
</script>
<?php include_once('./tail.sub.php'); ?>
```

## Step 6: 실험 히스토리 및 북마크 페이지 구현

### 파일 생성: `app/modules/probability/history/index.php`

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

$dbDir = G5_DATA_PATH.'/modules';
if (!is_dir($dbDir)) {
    @mkdir($dbDir, 0707, true);
}
$dbPath = $dbDir.'/probability.sqlite';
$db = new PDO('sqlite:'.$dbPath);
$db->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

// 실험 삭제 처리
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['action']) && $_POST['action'] === 'delete') {
    $id = (int)$_POST['id'];
    $stmt = $db->prepare("DELETE FROM experiments WHERE id = ?");
    $stmt->execute([$id]);
    header('Location: /probability/history');
    exit;
}

// 실험 목록 가져오기
$stmt = $db->query("SELECT * FROM experiments ORDER BY created_at DESC LIMIT 50");
$experiments = $stmt->fetchAll(PDO::FETCH_ASSOC);

require_once(G5_THEME_PATH.'/modern/_head.inc.php');
include_once('./head.sub.php');
?>
<style>
.history-container {
    background: var(--m-surface);
    padding: 32px;
    border-radius: var(--m-radius-lg);
    box-shadow: var(--m-shadow);
}
.experiment-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid rgba(0,0,0,0.1);
}
.experiment-item:last-child {
    border-bottom: none;
}
.exp-info h3 {
    margin-bottom: 8px;
    color: var(--m-text);
}
.exp-info p {
    color: var(--m-text-muted);
    font-size: 0.9rem;
}
.exp-actions {
    display: flex;
    gap: 8px;
}
.btn-view {
    padding: 8px 16px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    text-decoration: none;
    font-size: 0.9rem;
}
.btn-delete {
    padding: 8px 16px;
    background: #f5576c;
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.9rem;
}
.empty-state {
    text-align: center;
    padding: 64px 20px;
    color: var(--m-text-muted);
}
.empty-state h2 {
    font-size: 2rem;
    margin-bottom: 16px;
}
</style>
<div class="m-shell">
    <?php require G5_THEME_PATH.'/modern/_nav.inc.php'; ?>
    <main class="m-container" style="padding: 32px 20px 48px;">
        <h1 style="margin-bottom: 24px; color: var(--m-text);">📊 실험 히스토리</h1>

        <div class="history-container">
            <?php if (empty($experiments)): ?>
                <div class="empty-state">
                    <h2>🔬</h2>
                    <p>아직 실험 기록이 없습니다.</p>
                    <p><a href="/probability" style="color: #667eea;">메인 페이지에서 실험을 시작하세요</a></p>
                </div>
            <?php else: ?>
                <?php foreach ($experiments as $exp): ?>
                    <?php
                    $typeEmoji = [
                        'coin' => '🪙',
                        'dice' => '🎲',
                        'card' => '🃏',
                        'gacha' => '🎁'
                    ];
                    $emoji = $typeEmoji[$exp['type']] ?? '🔬';
                    $result = json_decode($exp['result'], true);
                    ?>
                    <div class="experiment-item">
                        <div class="exp-info">
                            <h3><?php echo $emoji.' '.htmlspecialchars($exp['name']); ?></h3>
                            <p><?php echo date('Y-m-d H:i', strtotime($exp['created_at'])); ?></p>
                        </div>
                        <div class="exp-actions">
                            <button class="btn-view" onclick="viewResult(<?php echo $exp['id']; ?>)">결과 보기</button>
                            <form method="post" style="display: inline;" onsubmit="return confirm('정말 삭제하시겠습니까?');">
                                <input type="hidden" name="action" value="delete">
                                <input type="hidden" name="id" value="<?php echo $exp['id']; ?>">
                                <button type="submit" class="btn-delete">삭제</button>
                            </form>
                        </div>
                    </div>
                <?php endforeach; ?>
            <?php endif; ?>
        </div>
    </main>
    <?php require G5_THEME_PATH.'/modern/_footer.inc.php'; ?>
</div>
<script>
function viewResult(id) {
    // 결과 상세 모달 구현 (보너스)
    alert('실험 ID: ' + id + ' 결과 보기 기능은 보너스로 구현 예정입니다.');
}
</script>
<?php include_once('./tail.sub.php'); ?>
```

이 페이지는 과거 실험 기록을 최근 50개까지 표시하고, 각 실험을 삭제할 수 있는 기능을 제공합니다.

## Step 7: 비교 모드 구현 (2개 실험 결과 나란히 비교)

### 파일 생성: `app/modules/probability/compare/index.php`

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

$dbDir = G5_DATA_PATH.'/modules';
if (!is_dir($dbDir)) {
    @mkdir($dbDir, 0707, true);
}
$dbPath = $dbDir.'/probability.sqlite';
$db = new PDO('sqlite:'.$dbPath);
$db->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

// 실험 목록 가져오기
$stmt = $db->query("SELECT id, name, type, result FROM experiments ORDER BY created_at DESC");
$experiments = $stmt->fetchAll(PDO::FETCH_ASSOC);

$exp1 = null;
$exp2 = null;

if (isset($_GET['id1']) && isset($_GET['id2'])) {
    $id1 = (int)$_GET['id1'];
    $id2 = (int)$_GET['id2'];
    $stmt = $db->prepare("SELECT * FROM experiments WHERE id = ?");
    $stmt->execute([$id1]);
    $exp1 = $stmt->fetch(PDO::FETCH_ASSOC);
    $stmt->execute([$id2]);
    $exp2 = $stmt->fetch(PDO::FETCH_ASSOC);
}

require_once(G5_THEME_PATH.'/modern/_head.inc.php');
include_once('./head.sub.php');
?>
<style>
.compare-selector {
    background: var(--m-surface);
    padding: 32px;
    border-radius: var(--m-radius-lg);
    box-shadow: var(--m-shadow);
    margin-bottom: 24px;
}
.compare-form {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 12px;
    align-items: center;
}
.compare-form select {
    padding: 12px;
    border: 1px solid rgba(0,0,0,0.2);
    border-radius: 8px;
    font-size: 1rem;
}
.compare-form button {
    padding: 12px 32px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
}
.compare-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}
.compare-card {
    background: var(--m-surface);
    padding: 24px;
    border-radius: var(--m-radius-lg);
    box-shadow: var(--m-shadow);
}
.compare-card h2 {
    margin-bottom: 16px;
    color: var(--m-text);
}
</style>
<div class="m-shell">
    <?php require G5_THEME_PATH.'/modern/_nav.inc.php'; ?>
    <main class="m-container" style="padding: 32px 20px 48px;">
        <h1 style="margin-bottom: 24px; color: var(--m-text);">🔀 실험 비교 모드</h1>

        <div class="compare-selector">
            <form class="compare-form" method="get">
                <select name="id1" required>
                    <option value="">실험 1 선택</option>
                    <?php foreach ($experiments as $exp): ?>
                        <option value="<?php echo $exp['id']; ?>" <?php echo (isset($_GET['id1']) && $_GET['id1'] == $exp['id']) ? 'selected' : ''; ?>>
                            <?php echo htmlspecialchars($exp['name']); ?>
                        </option>
                    <?php endforeach; ?>
                </select>
                <select name="id2" required>
                    <option value="">실험 2 선택</option>
                    <?php foreach ($experiments as $exp): ?>
                        <option value="<?php echo $exp['id']; ?>" <?php echo (isset($_GET['id2']) && $_GET['id2'] == $exp['id']) ? 'selected' : ''; ?>>
                            <?php echo htmlspecialchars($exp['name']); ?>
                        </option>
                    <?php endforeach; ?>
                </select>
                <button type="submit">비교하기</button>
            </form>
        </div>

        <?php if ($exp1 && $exp2): ?>
            <div class="compare-grid">
                <div class="compare-card">
                    <h2><?php echo htmlspecialchars($exp1['name']); ?></h2>
                    <canvas id="chart1"></canvas>
                </div>
                <div class="compare-card">
                    <h2><?php echo htmlspecialchars($exp2['name']); ?></h2>
                    <canvas id="chart2"></canvas>
                </div>
            </div>
            <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
            <script>
            const result1 = <?php echo $exp1['result']; ?>;
            const result2 = <?php echo $exp2['result']; ?>;
            const type1 = '<?php echo $exp1['type']; ?>';
            const type2 = '<?php echo $exp2['type']; ?>';

            function renderChart(canvasId, result, type) {
                const ctx = document.getElementById(canvasId).getContext('2d');
                if (type === 'coin') {
                    new Chart(ctx, {
                        type: 'bar',
                        data: {
                            labels: ['앞면', '뒷면'],
                            datasets: [{
                                label: '결과',
                                data: [result.heads, result.tails],
                                backgroundColor: ['#f093fb', '#4facfe']
                            }]
                        },
                        options: { responsive: true }
                    });
                } else if (type === 'dice') {
                    const labels = Object.keys(result.counts).map(l => `면 ${l}`);
                    const counts = Object.values(result.counts);
                    new Chart(ctx, {
                        type: 'bar',
                        data: {
                            labels: labels,
                            datasets: [{
                                label: '결과',
                                data: counts,
                                backgroundColor: 'rgba(102, 126, 234, 0.7)'
                            }]
                        },
                        options: { responsive: true }
                    });
                } else if (type === 'gacha') {
                    new Chart(ctx, {
                        type: 'doughnut',
                        data: {
                            labels: ['SSR', 'SR', 'R'],
                            datasets: [{
                                data: [result.ssr, result.sr, result.r],
                                backgroundColor: ['#f093fb', '#4facfe', '#43e97b']
                            }]
                        },
                        options: { responsive: true }
                    });
                }
            }

            renderChart('chart1', result1, type1);
            renderChart('chart2', result2, type2);
            </script>
        <?php elseif (isset($_GET['id1']) || isset($_GET['id2'])): ?>
            <p style="text-align: center; color: var(--m-text-muted); padding: 48px;">두 실험을 모두 선택해주세요.</p>
        <?php else: ?>
            <p style="text-align: center; color: var(--m-text-muted); padding: 48px;">위에서 비교할 실험 2개를 선택하세요.</p>
        <?php endif; ?>
    </main>
    <?php require G5_THEME_PATH.'/modern/_footer.inc.php'; ?>
</div>
<?php include_once('./tail.sub.php'); ?>
```

이 페이지는 히스토리에 저장된 실험 중 2개를 선택하여 결과를 나란히 비교할 수 있는 기능을 제공합니다.

## Step 8: 메인 페이지 네비게이션 링크 추가 및 최종 마무리

### 파일 수정: `app/modules/probability/index.php`

메인 페이지 하단에 '실험 히스토리'와 '비교 모드' 링크를 추가합니다. 기존 `<main>` 태그 안에서 최근 실험 기록 섹션 아래에 다음 코드를 추가하세요:

```php
<!-- 기존 최근 실험 기록 섹션 아래에 추가 -->
<div style="display: flex; gap: 16px; margin-top: 24px;">
    <a href="/probability/history" style="flex: 1; padding: 20px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; text-align: center; border-radius: var(--m-radius-lg); text-decoration: none; font-weight: 600; box-shadow: var(--m-shadow);">
        📊 전체 히스토리 보기
    </a>
    <a href="/probability/compare" style="flex: 1; padding: 20px; background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); color: white; text-align: center; border-radius: var(--m-radius-lg); text-decoration: none; font-weight: 600; box-shadow: var(--m-shadow);">
        🔀 실험 비교하기
    </a>
</div>
```

또한, 각 실험 페이지(`coin`, `dice`, `card`, `gacha`)의 `<main>` 태그 시작 직후에 '← 메인으로 돌아가기' 링크를 추가하세요:

```php
<a href="/probability" style="display: inline-block; margin-bottom: 16px; color: #667eea; text-decoration: none; font-weight: 600;">← 메인으로 돌아가기</a>
```

### 최종 테스트 체크리스트

1. `/probability` 메인 페이지에서 4가지 실험 카드가 잘 보이는지 확인
2. 각 실험 페이지에서 시뮬레이션이 정상 작동하는지 확인
3. 실험 결과가 DB에 저장되고 메인 페이지에 표시되는지 확인
4. `/probability/history`에서 과거 실험 목록이 보이고 삭제가 되는지 확인
5. `/probability/compare`에서 2개 실험을 선택하여 비교 차트가 나타나는지 확인
6. 다크모드 전환 시 색상이 자연스럽게 바뀌는지 확인 (modern shell 토큰 덕분에 자동 대응)
7. 시행 횟수를 10~100,000 범위 밖으로 입력 시 에러 메시지가 뜨는지 확인

모든 체크리스트를 통과하면 프로젝트 완성! 🎉