🎲 확률 체험 카지노 - 룰렛/슬롯/주사위 시뮬레이터

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

**1단계: 프로젝트 폴더 생성 & modern shell 골격 구성**

아래 파일을 생성해주세요:

**파일: `app/modules/probability-casino/index.php`**

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

// 페이지 메타 정보
$g5['title'] = '확률 체험 카지노';

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;">
        <div class="casino-header" style="text-align: center; margin-bottom: 40px;">
            <h1 style="font-size: 2.5rem; font-weight: 700; margin-bottom: 12px;">🎲 확률 체험 카지노</h1>
            <p style="color: var(--m-text-muted); font-size: 1.1rem;">행운의 여신이 내 편일까? 룰렛·슬롯·주사위로 확률의 세계를 탐험하세요!</p>
        </div>

        <!-- 칩 잔액 표시 -->
        <div class="chip-balance" style="background: var(--m-surface); padding: 20px; border-radius: var(--m-radius-lg); box-shadow: var(--m-shadow); margin-bottom: 32px; text-align: center;">
            <div style="font-size: 0.9rem; color: var(--m-text-muted); margin-bottom: 8px;">보유 칩</div>
            <div id="chipAmount" style="font-size: 2.5rem; font-weight: 700; color: #f59e0b;">1000</div>
            <button id="resetChips" style="margin-top: 12px; padding: 8px 20px; background: #ef4444; color: white; border: none; border-radius: 8px; cursor: pointer; font-weight: 600;">칩 리셋</button>
        </div>

        <!-- 게임 탭 -->
        <div class="game-tabs" style="display: flex; gap: 12px; margin-bottom: 32px; justify-content: center;">
            <button class="tab-btn active" data-game="roulette" style="padding: 12px 24px; background: var(--m-surface); border: 2px solid #3b82f6; border-radius: 12px; cursor: pointer; font-weight: 600; color: var(--m-text); transition: all 0.2s;">🎡 룰렛</button>
            <button class="tab-btn" data-game="slot" style="padding: 12px 24px; background: var(--m-surface); border: 2px solid transparent; border-radius: 12px; cursor: pointer; font-weight: 600; color: var(--m-text); transition: all 0.2s;">🎰 슬롯머신</button>
            <button class="tab-btn" data-game="dice" style="padding: 12px 24px; background: var(--m-surface); border: 2px solid transparent; border-radius: 12px; cursor: pointer; font-weight: 600; color: var(--m-text); transition: all 0.2s;">🎲 주사위</button>
        </div>

        <!-- 게임 영역 (다음 단계에서 구현) -->
        <div id="gameArea" style="background: var(--m-surface); padding: 32px; border-radius: var(--m-radius-lg); box-shadow: var(--m-shadow); min-height: 400px;">
            <p style="text-align: center; color: var(--m-text-muted);">게임을 선택하세요</p>
        </div>

        <!-- 플레이 히스토리 -->
        <div class="play-history" style="margin-top: 32px; background: var(--m-surface); padding: 24px; border-radius: var(--m-radius-lg); box-shadow: var(--m-shadow);">
            <h3 style="font-size: 1.3rem; font-weight: 700; margin-bottom: 16px;">📊 최근 플레이 기록</h3>
            <div id="historyList" style="color: var(--m-text-muted);">아직 플레이한 게임이 없습니다</div>
        </div>
    </main>
    <?php require G5_THEME_PATH.'/modern/_footer.inc.php'; ?>
</div>

<style>
.tab-btn.active {
    border-color: #3b82f6 !important;
    background: rgba(59, 130, 246, 0.1) !important;
}
.tab-btn:hover {
    background: rgba(59, 130, 246, 0.05) !important;
}
</style>

<script>
// sessionStorage에서 칩 불러오기
let chips = parseInt(sessionStorage.getItem('casinoChips')) || 1000;
document.getElementById('chipAmount').textContent = chips;

// 칩 리셋
document.getElementById('resetChips').addEventListener('click', () => {
    chips = 1000;
    sessionStorage.setItem('casinoChips', chips);
    document.getElementById('chipAmount').textContent = chips;
    alert('칩이 1000개로 리셋되었습니다!');
});

// 탭 전환
const tabs = document.querySelectorAll('.tab-btn');
tabs.forEach(tab => {
    tab.addEventListener('click', () => {
        tabs.forEach(t => t.classList.remove('active'));
        tab.classList.add('active');
        const game = tab.dataset.game;
        loadGame(game);
    });
});

function loadGame(game) {
    const area = document.getElementById('gameArea');
    area.innerHTML = `<p style="text-align: center; color: var(--m-text-muted);">${game} 게임 로딩 중...</p>`;
    // 다음 단계에서 게임별 UI 구현
}

// 히스토리 추가 함수
function addHistory(game, result, bet, win) {
    const history = JSON.parse(sessionStorage.getItem('casinoHistory') || '[]');
    history.unshift({ game, result, bet, win, time: new Date().toLocaleTimeString() });
    if (history.length > 10) history.pop();
    sessionStorage.setItem('casinoHistory', JSON.stringify(history));
    renderHistory();
}

function renderHistory() {
    const history = JSON.parse(sessionStorage.getItem('casinoHistory') || '[]');
    const list = document.getElementById('historyList');
    if (history.length === 0) {
        list.innerHTML = '<p style="color: var(--m-text-muted);">아직 플레이한 게임이 없습니다</p>';
        return;
    }
    list.innerHTML = history.map(h => `
        <div style="padding: 12px; margin-bottom: 8px; background: rgba(59, 130, 246, 0.05); border-radius: 8px; display: flex; justify-content: space-between; align-items: center;">
            <span>${h.time} | ${h.game}</span>
            <span style="font-weight: 600; color: ${h.win > 0 ? '#10b981' : '#ef4444'};">${h.result} (${h.win > 0 ? '+' : ''}${h.win} 칩)</span>
        </div>
    `).join('');
}

renderHistory();
</script>

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

이 파일은 `/probability-casino` URL로 자동 매핑됩니다 (폴더 기반 라우팅). modern shell로 사이트 nav/footer가 자동으로 붙고, 칩 잔액과 히스토리는 sessionStorage로 관리됩니다.

**2단계: 룰렛 게임 구현**

`app/modules/probability-casino/index.php`의 `loadGame()` 함수를 아래처럼 수정하고, 룰렛 게임 로직을 추가해주세요.

**수정할 부분: `<script>` 태그 안의 `loadGame()` 함수**

```javascript
function loadGame(game) {
    const area = document.getElementById('gameArea');
    if (game === 'roulette') {
        area.innerHTML = `
            <h2 style="text-align: center; font-size: 1.8rem; font-weight: 700; margin-bottom: 24px;">🎡 룰렛 게임</h2>
            <div style="text-align: center; margin-bottom: 24px;">
                <div id="rouletteWheel" style="width: 200px; height: 200px; margin: 0 auto; border-radius: 50%; background: conic-gradient(#ef4444 0deg 180deg, #1f2937 180deg 360deg); display: flex; align-items: center; justify-content: center; font-size: 3rem; font-weight: 700; color: white; box-shadow: 0 8px 24px rgba(0,0,0,0.3); transition: transform 2s cubic-bezier(0.25, 0.1, 0.25, 1);">?</div>
            </div>
            <div style="margin-bottom: 24px;">
                <label style="display: block; margin-bottom: 8px; font-weight: 600;">배팅 금액</label>
                <input type="number" id="rouletteBet" value="10" min="1" max="${chips}" style="width: 100%; padding: 12px; border: 2px solid var(--m-text-muted); border-radius: 8px; background: var(--m-surface); color: var(--m-text); font-size: 1rem;">
            </div>
            <div style="margin-bottom: 24px;">
                <label style="display: block; margin-bottom: 8px; font-weight: 600;">배팅 타입</label>
                <select id="rouletteBetType" style="width: 100%; padding: 12px; border: 2px solid var(--m-text-muted); border-radius: 8px; background: var(--m-surface); color: var(--m-text); font-size: 1rem;">
                    <option value="red">빨강 (확률 48.6%, 배당 2배)</option>
                    <option value="black">검정 (확률 48.6%, 배당 2배)</option>
                    <option value="even">짝수 (확률 48.6%, 배당 2배)</option>
                    <option value="odd">홀수 (확률 48.6%, 배당 2배)</option>
                    <option value="low">낮은 수(1-18) (확률 48.6%, 배당 2배)</option>
                    <option value="high">높은 수(19-36) (확률 48.6%, 배당 2배)</option>
                    <option value="zero">0번 (확률 2.7%, 배당 35배)</option>
                </select>
            </div>
            <button id="spinRoulette" style="width: 100%; padding: 16px; background: linear-gradient(135deg, #3b82f6, #8b5cf6); color: white; border: none; border-radius: 12px; font-size: 1.2rem; font-weight: 700; cursor: pointer; transition: transform 0.2s;">🎡 룰렛 돌리기</button>
            <div id="rouletteResult" style="margin-top: 24px; padding: 16px; border-radius: 8px; text-align: center; font-weight: 600; display: none;"></div>
        `;

        document.getElementById('spinRoulette').addEventListener('click', () => {
            const bet = parseInt(document.getElementById('rouletteBet').value);
            const betType = document.getElementById('rouletteBetType').value;
            if (bet > chips) {
                alert('칩이 부족합니다!');
                return;
            }
            chips -= bet;
            sessionStorage.setItem('casinoChips', chips);
            document.getElementById('chipAmount').textContent = chips;

            // 룰렛 회전 애니메이션
            const wheel = document.getElementById('rouletteWheel');
            wheel.style.transform = `rotate(${Math.random() * 3600 + 720}deg)`;

            setTimeout(() => {
                // 결과 계산 (0~36)
                const result = Math.floor(Math.random() * 37);
                const isRed = [1,3,5,7,9,12,14,16,18,19,21,23,25,27,30,32,34,36].includes(result);
                const isEven = result > 0 && result % 2 === 0;
                const isLow = result >= 1 && result <= 18;

                let win = 0;
                let match = false;
                if (betType === 'red' && isRed) { match = true; win = bet * 2; }
                else if (betType === 'black' && !isRed && result !== 0) { match = true; win = bet * 2; }
                else if (betType === 'even' && isEven) { match = true; win = bet * 2; }
                else if (betType === 'odd' && !isEven && result !== 0) { match = true; win = bet * 2; }
                else if (betType === 'low' && isLow) { match = true; win = bet * 2; }
                else if (betType === 'high' && result >= 19) { match = true; win = bet * 2; }
                else if (betType === 'zero' && result === 0) { match = true; win = bet * 35; }

                chips += win;
                sessionStorage.setItem('casinoChips', chips);
                document.getElementById('chipAmount').textContent = chips;

                wheel.textContent = result;
                wheel.style.background = result === 0 ? '#10b981' : (isRed ? '#ef4444' : '#1f2937');
                wheel.style.transform = 'rotate(0deg)';

                const resultDiv = document.getElementById('rouletteResult');
                resultDiv.style.display = 'block';
                if (match) {
                    resultDiv.style.background = 'rgba(16, 185, 129, 0.2)';
                    resultDiv.style.color = '#10b981';
                    resultDiv.innerHTML = `🎉 당첨! ${result}번 | +${win - bet} 칩`;
                } else {
                    resultDiv.style.background = 'rgba(239, 68, 68, 0.2)';
                    resultDiv.style.color = '#ef4444';
                    resultDiv.innerHTML = `😢 꽝! ${result}번 | -${bet} 칩`;
                }

                addHistory('룰렛', `${result}번`, bet, win - bet);
            }, 2000);
        });
    } else if (game === 'slot') {
        area.innerHTML = '<p style="text-align: center; color: var(--m-text-muted);">슬롯머신 준비 중...</p>';
    } else if (game === 'dice') {
        area.innerHTML = '<p style="text-align: center; color: var(--m-text-muted);">주사위 게임 준비 중...</p>';
    }
}

// 초기 로드 (룰렛)
loadGame('roulette');
```

룰렛 휠이 2초간 회전하고, 0~36 중 랜덤 결과가 나옵니다. 배팅 타입에 따라 당첨 여부와 배당금이 계산되며, 칩 잔액과 히스토리가 자동 업데이트됩니다.

**3단계: 슬롯머신 & 주사위 게임 구현**

`loadGame()` 함수에 슬롯머신과 주사위 게임 로직을 추가해주세요.

**수정할 부분: `loadGame()` 함수의 `else if (game === 'slot')` 및 `else if (game === 'dice')` 블록**

```javascript
} else if (game === 'slot') {
    area.innerHTML = `
        <h2 style="text-align: center; font-size: 1.8rem; font-weight: 700; margin-bottom: 24px;">🎰 슬롯머신</h2>
        <div style="display: flex; gap: 16px; justify-content: center; margin-bottom: 24px;">
            <div id="reel1" style="width: 100px; height: 120px; background: linear-gradient(135deg, #f59e0b, #eab308); border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 3rem; box-shadow: var(--m-shadow); transition: transform 0.5s;">🍒</div>
            <div id="reel2" style="width: 100px; height: 120px; background: linear-gradient(135deg, #f59e0b, #eab308); border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 3rem; box-shadow: var(--m-shadow); transition: transform 0.5s;">🍋</div>
            <div id="reel3" style="width: 100px; height: 120px; background: linear-gradient(135deg, #f59e0b, #eab308); border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 3rem; box-shadow: var(--m-shadow); transition: transform 0.5s;">🍊</div>
        </div>
        <div style="margin-bottom: 24px;">
            <label style="display: block; margin-bottom: 8px; font-weight: 600;">배팅 금액</label>
            <input type="number" id="slotBet" value="10" min="1" max="${chips}" style="width: 100%; padding: 12px; border: 2px solid var(--m-text-muted); border-radius: 8px; background: var(--m-surface); color: var(--m-text); font-size: 1rem;">
        </div>
        <button id="spinSlot" style="width: 100%; padding: 16px; background: linear-gradient(135deg, #f59e0b, #eab308); color: white; border: none; border-radius: 12px; font-size: 1.2rem; font-weight: 700; cursor: pointer;">🎰 릴 돌리기</button>
        <div id="slotResult" style="margin-top: 24px; padding: 16px; border-radius: 8px; text-align: center; font-weight: 600; display: none;"></div>
        <div style="margin-top: 16px; padding: 16px; background: rgba(59, 130, 246, 0.1); border-radius: 8px; font-size: 0.9rem; color: var(--m-text-muted);">
            <strong>배당표:</strong><br>
            🎰 777 (잭팟): 100배<br>
            🍒🍒🍒 / 🍋🍋🍋 / 🍊🍊🍊: 20배<br>
            같은 그림 2개: 3배
        </div>
    `;

    const symbols = ['🍒', '🍋', '🍊', '🎰'];
    document.getElementById('spinSlot').addEventListener('click', () => {
        const bet = parseInt(document.getElementById('slotBet').value);
        if (bet > chips) {
            alert('칩이 부족합니다!');
            return;
        }
        chips -= bet;
        sessionStorage.setItem('casinoChips', chips);
        document.getElementById('chipAmount').textContent = chips;

        // 릴 애니메이션
        const reels = [document.getElementById('reel1'), document.getElementById('reel2'), document.getElementById('reel3')];
        reels.forEach((reel, i) => {
            reel.style.transform = 'translateY(-50px)';
            setTimeout(() => {
                const result = symbols[Math.floor(Math.random() * symbols.length)];
                reel.textContent = result;
                reel.style.transform = 'translateY(0)';
            }, 300 * (i + 1));
        });

        setTimeout(() => {
            const r1 = reels[0].textContent;
            const r2 = reels[1].textContent;
            const r3 = reels[2].textContent;
            let win = 0;
            let msg = '';

            if (r1 === '🎰' && r2 === '🎰' && r3 === '🎰') {
                win = bet * 100;
                msg = '🎉 잭팟! 777';
            } else if (r1 === r2 && r2 === r3) {
                win = bet * 20;
                msg = '🎊 3개 일치!';
            } else if (r1 === r2 || r2 === r3 || r1 === r3) {
                win = bet * 3;
                msg = '✨ 2개 일치!';
            } else {
                msg = '😢 꽝!';
            }

            chips += win;
            sessionStorage.setItem('casinoChips', chips);
            document.getElementById('chipAmount').textContent = chips;

            const resultDiv = document.getElementById('slotResult');
            resultDiv.style.display = 'block';
            if (win > 0) {
                resultDiv.style.background = 'rgba(16, 185, 129, 0.2)';
                resultDiv.style.color = '#10b981';
                resultDiv.innerHTML = `${msg} | +${win - bet} 칩`;
            } else {
                resultDiv.style.background = 'rgba(239, 68, 68, 0.2)';
                resultDiv.style.color = '#ef4444';
                resultDiv.innerHTML = `${msg} | -${bet} 칩`;
            }

            addHistory('슬롯머신', `${r1}${r2}${r3}`, bet, win - bet);
        }, 1200);
    });
} else if (game === 'dice') {
    area.innerHTML = `
        <h2 style="text-align: center; font-size: 1.8rem; font-weight: 700; margin-bottom: 24px;">🎲 주사위 게임</h2>
        <div style="display: flex; gap: 16px; justify-content: center; margin-bottom: 24px;">
            <div id="dice1" style="width: 80px; height: 80px; background: white; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 2.5rem; box-shadow: var(--m-shadow); transition: transform 0.5s;">🎲</div>
            <div id="dice2" style="width: 80px; height: 80px; background: white; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 2.5rem; box-shadow: var(--m-shadow); transition: transform 0.5s;">🎲</div>
        </div>
        <div style="margin-bottom: 24px;">
            <label style="display: block; margin-bottom: 8px; font-weight: 600;">배팅 금액</label>
            <input type="number" id="diceBet" value="10" min="1" max="${chips}" style="width: 100%; padding: 12px; border: 2px solid var(--m-text-muted); border-radius: 8px; background: var(--m-surface); color: var(--m-text); font-size: 1rem;">
        </div>
        <div style="margin-bottom: 24px;">
            <label style="display: block; margin-bottom: 8px; font-weight: 600;">예측 합</label>
            <input type="number" id="diceGuess" value="7" min="2" max="12" style="width: 100%; padding: 12px; border: 2px solid var(--m-text-muted); border-radius: 8px; background: var(--m-surface); color: var(--m-text); font-size: 1rem;">
        </div>
        <button id="rollDice" style="width: 100%; padding: 16px; background: linear-gradient(135deg, #10b981, #14b8a6); color: white; border: none; border-radius: 12px; font-size: 1.2rem; font-weight: 700; cursor: pointer;">🎲 주사위 굴리기</button>
        <div id="diceResult" style="margin-top: 24px; padding: 16px; border-radius: 8px; text-align: center; font-weight: 600; display: none;"></div>
        <div style="margin-top: 16px; padding: 16px; background: rgba(59, 130, 246, 0.1); border-radius: 8px; font-size: 0.9rem; color: var(--m-text-muted);">
            <strong>배당표:</strong><br>
            합 맞추기: 5배<br>
            스네이크 아이즈(1+1): 30배<br>
            더블(같은 숫자 2개): 10배
        </div>
    `;

    document.getElementById('rollDice').addEventListener('click', () => {
        const bet = parseInt(document.getElementById('diceBet').value);
        const guess = parseInt(document.getElementById('diceGuess').value);
        if (bet > chips) {
            alert('칩이 부족합니다!');
            return;
        }
        chips -= bet;
        sessionStorage.setItem('casinoChips', chips);
        document.getElementById('chipAmount').textContent = chips;

        // 주사위 애니메이션
        const dice1El = document.getElementById('dice1');
        const dice2El = document.getElementById('dice2');
        dice1El.style.transform = 'rotate(360deg)';
        dice2El.style.transform = 'rotate(-360deg)';

        setTimeout(() => {
            const d1 = Math.floor(Math.random() * 6) + 1;
            const d2 = Math.floor(Math.random() * 6) + 1;
            const sum = d1 + d2;
            dice1El.textContent = d1;
            dice2El.textContent = d2;
            dice1El.style.transform = 'rotate(0deg)';
            dice2El.style.transform = 'rotate(0deg)';

            let win = 0;
            let msg = '';
            if (d1 === 1 && d2 === 1) {
                win = bet * 30;
                msg = '🐍 스네이크 아이즈!';
            } else if (d1 === d2) {
                win = bet * 10;
                msg = '🎉 더블!';
            } else if (sum === guess) {
                win = bet * 5;
                msg = '✅ 합 맞춤!';
            } else {
                msg = '😢 꽝!';
            }

            chips += win;
            sessionStorage.setItem('casinoChips', chips);
            document.getElementById('chipAmount').textContent = chips;

            const resultDiv = document.getElementById('diceResult');
            resultDiv.style.display = 'block';
            if (win > 0) {
                resultDiv.style.background = 'rgba(16, 185, 129, 0.2)';
                resultDiv.style.color = '#10b981';
                resultDiv.innerHTML = `${msg} ${d1}+${d2}=${sum} | +${win - bet} 칩`;
            } else {
                resultDiv.style.background = 'rgba(239, 68, 68, 0.2)';
                resultDiv.style.color = '#ef4444';
                resultDiv.innerHTML = `${msg} ${d1}+${d2}=${sum} | -${bet} 칩`;
            }

            addHistory('주사위', `${d1}+${d2}=${sum}`, bet, win - bet);
        }, 800);
    });
}
```

슬롯머신은 3개 릴이 순차적으로 멈추며 조합을 확인하고, 주사위는 2개가 회전하며 합을 계산합니다. 각 게임의 배당표가 화면에 표시되어 확률을 쉽게 이해할 수 있습니다.