🎲 확률 실험실 - 주사위/동전/카드 시뮬레이터

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

**Step 1: 프로젝트 골격 & modern shell 적용**

`app/modules/probability-lab/index.php` 파일을 생성하고 다음 내용을 작성하세요:

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

// DB 연결 (히스토리 저장용)
$db_dir = G5_DATA_PATH.'/modules';
if (!is_dir($db_dir)) {
    @mkdir($db_dir, 0707, true);
}
$db_path = $db_dir.'/probability-lab.sqlite';
$pdo = new PDO('sqlite:'.$db_path);
$pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

// 테이블 생성 (최초 1회)
$pdo->exec("
    CREATE TABLE IF NOT EXISTS experiments (
        id INTEGER PRIMARY KEY AUTOINCREMENT,
        mode TEXT NOT NULL,
        trials INTEGER NOT NULL,
        results TEXT NOT NULL,
        created_at DATETIME DEFAULT CURRENT_TIMESTAMP
    )
");

require_once(G5_THEME_PATH.'/modern/_head.inc.php');
include_once('./head.sub.php');
?>
<style>
.lab-header {
    text-align: center;
    margin-bottom: 32px;
}
.lab-header h1 {
    font-size: 2rem;
    font-weight: 700;
    color: var(--m-text);
    margin-bottom: 8px;
}
.lab-header p {
    color: var(--m-text-muted);
    font-size: 1rem;
}
.mode-selector {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 32px;
}
.mode-card {
    background: var(--m-surface);
    border: 2px solid transparent;
    border-radius: var(--m-radius-lg);
    padding: 24px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: var(--m-shadow);
}
.mode-card:hover {
    border-color: var(--m-primary);
    transform: translateY(-4px);
}
.mode-card.active {
    border-color: var(--m-primary);
    background: linear-gradient(135deg, rgba(79, 70, 229, 0.1), rgba(99, 102, 241, 0.05));
}
.mode-icon {
    font-size: 3rem;
    margin-bottom: 12px;
}
.mode-name {
    font-size: 1.1rem;
    font-weight: 600;
    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;">
        <div class="lab-header">
            <h1>🎲 확률 실험실</h1>
            <p>주사위, 동전, 카드 — 확률의 세계를 체험하세요</p>
        </div>

        <div class="mode-selector">
            <div class="mode-card active" data-mode="dice">
                <div class="mode-icon">🎲</div>
                <div class="mode-name">주사위</div>
            </div>
            <div class="mode-card" data-mode="coin">
                <div class="mode-icon">🪙</div>
                <div class="mode-name">동전</div>
            </div>
            <div class="mode-card" data-mode="card">
                <div class="mode-icon">🃏</div>
                <div class="mode-name">카드</div>
            </div>
        </div>

        <div style="text-align: center; color: var(--m-text-muted); padding: 40px;">
            실험 설정 UI는 Step 2에서 추가합니다.
        </div>
    </main>
    <?php require G5_THEME_PATH.'/modern/_footer.inc.php'; ?>
</div>
<?php include_once('./tail.sub.php'); ?>
```

이 단계에서는:
- modern shell 골격 적용
- SQLite DB 초기화 (experiments 테이블)
- 3가지 실험 모드 선택 카드 UI
- 디자인 토큰으로 다크모드 자동 대응

브라우저에서 `/probability-lab` 접속 시 모드 선택 카드 3개가 보여야 합니다.

**Step 2: 실험 설정 폼 & 실행 로직 추가**

`app/modules/probability-lab/index.php` 파일을 수정하여 실험 설정 UI와 백엔드 로직을 추가하세요.

**수정 내용:**

1. **AJAX 분기 처리** (파일 상단, `$pdo` 정의 직후에 추가):
```php
// AJAX 요청 처리
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['action'])) {
    header('Content-Type: application/json');
    
    if ($_POST['action'] === 'run_experiment') {
        $mode = $_POST['mode'] ?? 'dice';
        $trials = max(10, min(10000, intval($_POST['trials'] ?? 100)));
        
        $results = [];
        for ($i = 0; $i < $trials; $i++) {
            if ($mode === 'dice') {
                $results[] = rand(1, 6);
            } elseif ($mode === 'coin') {
                $results[] = rand(0, 1) === 0 ? 'heads' : 'tails';
            } else { // card
                $suits = ['♠', '♥', '♦', '♣'];
                $ranks = ['A', '2', '3', '4', '5', '6', '7', '8', '9', '10', 'J', 'Q', 'K'];
                $results[] = $ranks[rand(0, 12)] . $suits[rand(0, 3)];
            }
        }
        
        // DB 저장
        $stmt = $pdo->prepare("INSERT INTO experiments (mode, trials, results) VALUES (?, ?, ?)");
        $stmt->execute([$mode, $trials, json_encode($results)]);
        
        echo json_encode([
            'success' => true,
            'results' => $results,
            'id' => $pdo->lastInsertId()
        ]);
        exit;
    }
}
```

2. **실험 설정 UI 추가** (`<div class="mode-selector">` 다음에):
```php
<div class="experiment-control" style="background: var(--m-surface); padding: 24px; border-radius: var(--m-radius-lg); box-shadow: var(--m-shadow); margin-bottom: 32px;">
    <div style="margin-bottom: 16px;">
        <label style="display: block; margin-bottom: 8px; font-weight: 600; color: var(--m-text);">실험 횟수</label>
        <input type="number" id="trials" min="10" max="10000" value="100" style="width: 100%; padding: 12px; border: 1px solid var(--m-text-muted); border-radius: 8px; background: var(--m-surface); color: var(--m-text); font-size: 1rem;">
    </div>
    <button id="runBtn" style="width: 100%; padding: 16px; background: linear-gradient(135deg, #4f46e5, #6366f1); color: white; border: none; border-radius: 8px; font-size: 1.1rem; font-weight: 600; cursor: pointer; transition: all 0.2s;">🚀 실험 시작</button>
</div>

<div id="resultsContainer" style="display: none;"></div>
```

3. **JavaScript 추가** (`</main>` 직전에):
```php
<script>
let currentMode = 'dice';

// 모드 선택
document.querySelectorAll('.mode-card').forEach(card => {
    card.addEventListener('click', () => {
        document.querySelectorAll('.mode-card').forEach(c => c.classList.remove('active'));
        card.classList.add('active');
        currentMode = card.dataset.mode;
    });
});

// 실험 실행
document.getElementById('runBtn').addEventListener('click', async () => {
    const trials = document.getElementById('trials').value;
    const btn = document.getElementById('runBtn');
    
    btn.disabled = true;
    btn.textContent = '⏳ 실험 중...';
    
    const formData = new FormData();
    formData.append('action', 'run_experiment');
    formData.append('mode', currentMode);
    formData.append('trials', trials);
    
    const response = await fetch(window.location.href, {
        method: 'POST',
        body: formData
    });
    
    const data = await response.json();
    
    if (data.success) {
        displayResults(data.results);
    }
    
    btn.disabled = false;
    btn.textContent = '🚀 실험 시작';
});

function displayResults(results) {
    const container = document.getElementById('resultsContainer');
    container.style.display = 'block';
    container.innerHTML = '<div style="text-align: center; padding: 40px; color: var(--m-text);">결과 차트는 Step 3에서 추가합니다.<br>총 ' + results.length + '회 실험 완료</div>';
}
</script>
```

이 단계에서는:
- 실험 횟수 입력 폼
- "실험 시작" 버튼
- AJAX로 실험 실행 & 결과 저장
- 실험 결과 기초 표시

버튼 클릭 시 실험이 실행되고 "총 N회 실험 완료" 메시지가 나타나야 합니다.

**Step 3: 결과 시각화 차트 & 히스토리 로그**

`app/modules/probability-lab/index.php` 파일을 수정하여 실험 결과를 막대 그래프로 시각화하고 히스토리 로그를 표시하세요.

**수정 내용:**

1. **히스토리 조회 로직** (AJAX 분기 처리 부분에 추가):
```php
if ($_POST['action'] === 'get_history') {
    $stmt = $pdo->query("SELECT * FROM experiments ORDER BY created_at DESC LIMIT 20");
    $history = $stmt->fetchAll(PDO::FETCH_ASSOC);
    echo json_encode(['success' => true, 'history' => $history]);
    exit;
}

if ($_POST['action'] === 'clear_history') {
    $pdo->exec("DELETE FROM experiments");
    echo json_encode(['success' => true]);
    exit;
}
```

2. **히스토리 UI 추가** (`<div id="resultsContainer">` 다음에):
```php
<div id="historyContainer" style="background: var(--m-surface); padding: 24px; border-radius: var(--m-radius-lg); box-shadow: var(--m-shadow); margin-top: 32px;">
    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px;">
        <h3 style="margin: 0; color: var(--m-text);">📊 실험 히스토리</h3>
        <button id="clearHistoryBtn" style="padding: 8px 16px; background: #ef4444; color: white; border: none; border-radius: 6px; cursor: pointer; font-size: 0.9rem;">모두 지우기</button>
    </div>
    <div id="historyList" style="color: var(--m-text-muted); text-align: center; padding: 20px;">실험을 실행하면 히스토리가 표시됩니다.</div>
</div>
```

3. **JavaScript 수정** (기존 `displayResults` 함수를 다음으로 교체):
```php
<script>
// ... (기존 모드 선택, 실험 실행 코드 유지)

function displayResults(results) {
    const container = document.getElementById('resultsContainer');
    container.style.display = 'block';
    
    // 결과 집계
    const counts = {};
    results.forEach(r => {
        const key = String(r);
        counts[key] = (counts[key] || 0) + 1;
    });
    
    // 정렬 (주사위는 숫자 순, 나머지는 출현 빈도 순)
    let sortedKeys;
    if (currentMode === 'dice') {
        sortedKeys = Object.keys(counts).sort((a, b) => parseInt(a) - parseInt(b));
    } else {
        sortedKeys = Object.keys(counts).sort((a, b) => counts[b] - counts[a]);
    }
    
    // 차트 HTML 생성
    let html = '<div style="background: var(--m-surface); padding: 24px; border-radius: var(--m-radius-lg); box-shadow: var(--m-shadow);">';
    html += '<h3 style="margin: 0 0 16px 0; color: var(--m-text);">📈 실험 결과</h3>';
    html += '<div style="margin-bottom: 20px; color: var(--m-text-muted);">총 ' + results.length + '회 실험</div>';
    
    const maxCount = Math.max(...Object.values(counts));
    
    sortedKeys.forEach(key => {
        const count = counts[key];
        const percentage = ((count / results.length) * 100).toFixed(1);
        const barWidth = (count / maxCount) * 100;
        
        html += '<div style="margin-bottom: 12px;">';
        html += '<div style="display: flex; justify-content: space-between; margin-bottom: 4px; color: var(--m-text); font-size: 0.9rem;">';
        html += '<span>' + key + '</span>';
        html += '<span>' + count + '회 (' + percentage + '%)</span>';
        html += '</div>';
        html += '<div style="background: rgba(79, 70, 229, 0.1); border-radius: 4px; height: 24px; overflow: hidden;">';
        html += '<div style="background: linear-gradient(135deg, #4f46e5, #6366f1); width: ' + barWidth + '%; height: 100%; transition: width 0.5s;"></div>';
        html += '</div>';
        html += '</div>';
    });
    
    html += '</div>';
    container.innerHTML = html;
    
    // 히스토리 새로고침
    loadHistory();
}

async function loadHistory() {
    const formData = new FormData();
    formData.append('action', 'get_history');
    
    const response = await fetch(window.location.href, {
        method: 'POST',
        body: formData
    });
    
    const data = await response.json();
    
    if (data.success && data.history.length > 0) {
        let html = '';
        data.history.forEach(exp => {
            const date = new Date(exp.created_at);
            const modeIcon = exp.mode === 'dice' ? '🎲' : exp.mode === 'coin' ? '🪙' : '🃏';
            html += '<div style="padding: 12px; border-bottom: 1px solid rgba(128,128,128,0.1); color: var(--m-text); font-size: 0.9rem;">';
            html += modeIcon + ' ' + exp.mode + ' — ' + exp.trials + '회 실험 | ' + date.toLocaleString('ko-KR');
            html += '</div>';
        });
        document.getElementById('historyList').innerHTML = html;
    } else {
        document.getElementById('historyList').innerHTML = '<div style="text-align: center; padding: 20px; color: var(--m-text-muted);">실험 히스토리가 없습니다.</div>';
    }
}

// 히스토리 삭제
document.getElementById('clearHistoryBtn').addEventListener('click', async () => {
    if (!confirm('모든 히스토리를 삭제하시겠습니까?')) return;
    
    const formData = new FormData();
    formData.append('action', 'clear_history');
    
    await fetch(window.location.href, {
        method: 'POST',
        body: formData
    });
    
    loadHistory();
});

// 페이지 로드 시 히스토리 불러오기
loadHistory();
</script>
```

이 단계에서는:
- 결과를 집계하여 막대 그래프로 시각화
- 각 결과별 출현 횟수와 백분율 표시
- 실험 히스토리 최근 20개 표시
- "모두 지우기" 버튼으로 히스토리 삭제

실험 실행 후 막대 그래프와 히스토리 로그가 나타나야 합니다.