🎰 오늘의 복권 시뮬레이터 - 당첨 확률 체험하기

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

이 단계에서는 복권 시뮬레이터 페이지의 기본 골격을 만듭니다.

**작업 내용:**

1. `app/modules/lottery-odds-simulator/index.php` 파일을 생성합니다.
2. modern shell 골격을 적용합니다:
   - `_common.php` 인클루드 (g5se 진입 컨텍스트)
   - `G5_THEME_PATH.'/modern/_head.inc.php'` 인클루드 (HTML head + 디자인 토큰 로드)
   - `./head.sub.php` 인클루드 (g5se 공통 헤더)
   - `<div class="m-shell">` 래퍼
   - `G5_THEME_PATH.'/modern/_nav.inc.php'` 인클루드 (상단 네비게이션)
   - `<main class="m-container" style="padding: 32px 20px 48px;">`로 본문 영역
   - `G5_THEME_PATH.'/modern/_footer.inc.php'` 인클루드 (하단 푸터)
   - `./tail.sub.php` 인클루드 (g5se 공통 꼬리)
3. 페이지 제목을 `<h1 style="font-size: 2rem; font-weight: 700; margin-bottom: 1rem; color: var(--m-text);">🎰 오늘의 복권 시뮬레이터</h1>`로 출력합니다.
4. 하단에 경고 문구를 넣습니다: `<p style="margin-top: 2rem; padding: 16px; background: var(--m-surface); border-left: 4px solid #f59e0b; color: var(--m-text-muted); font-size: 0.9rem;">⚠️ 이 시뮬레이터는 교육 목적입니다. 실제 복권 구매는 신중히 하세요.</p>`

**참고:**
- 라우트 등록 불필요 (폴더 기반 자동 라우팅)
- 상대경로 `./_common.php`, `./head.sub.php`, `./tail.sub.php`는 g5se 진입이 cwd를 `app/`로 잡아주므로 그대로 사용
- `G5_THEME_PATH`는 `_common.php` 인클루드 후 사용 가능 (현재 테마 경로)

**예상 출력:**
브라우저에서 `/lottery-odds-simulator` 접속 시 g5se 사이트 네비게이션/푸터와 함께 "🎰 오늘의 복권 시뮬레이터" 제목과 경고 문구가 표시됩니다.

복권 종류 선택 카드 UI를 만듭니다.

**작업 내용:**

1. `<main>` 안에 복권 선택 섹션을 추가합니다:
```html
<section style="margin-bottom: 2rem;">
    <h2 style="font-size: 1.5rem; font-weight: 600; margin-bottom: 1rem; color: var(--m-text);">복권 종류 선택</h2>
    <div id="lotteryCards" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem;">
        <!-- 카드는 JavaScript로 동적 생성 -->
    </div>
</section>
```

2. `<main>` 끝나기 전에 `<script>` 블록을 추가하여 복권 데이터를 정의하고 카드를 렌더링합니다:
```javascript
const lotteries = [
    { id: 'lotto', name: '로또 6/45', price: 1000, jackpot: '20억원', odds: 8145060, color: '#8b5cf6', emoji: '🎱' },
    { id: 'pension', name: '연금복권', price: 1000, jackpot: '월 700만원 (20년)', odds: 5000000, color: '#10b981', emoji: '💰' },
    { id: 'scratch', name: '스크래치', price: 2000, jackpot: '1억원', odds: 500000, color: '#f97316', emoji: '🎫' }
];

let selectedLottery = null;

function renderCards() {
    const container = document.getElementById('lotteryCards');
    container.innerHTML = lotteries.map(lot => `
        <div class="lottery-card" data-id="${lot.id}" style="
            background: var(--m-surface);
            border: 2px solid transparent;
            border-radius: var(--m-radius-lg);
            padding: 1.5rem;
            cursor: pointer;
            transition: all 0.3s;
            box-shadow: var(--m-shadow);
        ">
            <div style="font-size: 3rem; text-align: center; margin-bottom: 0.5rem;">${lot.emoji}</div>
            <h3 style="font-size: 1.25rem; font-weight: 600; margin-bottom: 0.5rem; color: var(--m-text);">${lot.name}</h3>
            <p style="color: var(--m-text-muted); font-size: 0.9rem; margin-bottom: 0.5rem;">가격: ${lot.price.toLocaleString()}원</p>
            <p style="color: var(--m-text-muted); font-size: 0.9rem; margin-bottom: 0.5rem;">1등: ${lot.jackpot}</p>
            <p style="color: var(--m-text-muted); font-size: 0.85rem;">확률: 1/${lot.odds.toLocaleString()}</p>
        </div>
    `).join('');

    // 카드 클릭 이벤트
    document.querySelectorAll('.lottery-card').forEach(card => {
        card.addEventListener('click', () => {
            selectedLottery = card.dataset.id;
            document.querySelectorAll('.lottery-card').forEach(c => c.style.borderColor = 'transparent');
            const lot = lotteries.find(l => l.id === selectedLottery);
            card.style.borderColor = lot.color;
            card.style.boxShadow = `0 0 20px ${lot.color}80`;
        });
    });
}

renderCards();
```

**예상 출력:**
페이지에 3개의 복권 카드(로또, 연금복권, 스크래치)가 그리드로 표시되고, 클릭 시 선택된 카드에 색상 테두리 glow 효과가 나타납니다.

시뮬레이션 실행 버튼과 결과 표시 영역을 추가합니다.

**작업 내용:**

1. 복권 선택 섹션 아래에 구매 버튼 섹션을 추가합니다:
```html
<section style="margin-bottom: 2rem;">
    <h2 style="font-size: 1.5rem; font-weight: 600; margin-bottom: 1rem; color: var(--m-text);">시뮬레이션 실행</h2>
    <div style="display: flex; gap: 0.5rem; flex-wrap: wrap;">
        <button onclick="buySim(1)" style="padding: 12px 24px; background: var(--m-primary); color: white; border: none; border-radius: var(--m-radius-lg); cursor: pointer; font-weight: 600;">1회 구매</button>
        <button onclick="buySim(10)" style="padding: 12px 24px; background: var(--m-primary); color: white; border: none; border-radius: var(--m-radius-lg); cursor: pointer; font-weight: 600;">10회 구매</button>
        <button onclick="buySim(100)" style="padding: 12px 24px; background: var(--m-primary); color: white; border: none; border-radius: var(--m-radius-lg); cursor: pointer; font-weight: 600;">100회 구매</button>
        <button onclick="buySim(1000)" style="padding: 12px 24px; background: var(--m-primary); color: white; border: none; border-radius: var(--m-radius-lg); cursor: pointer; font-weight: 600;">1000회 구매</button>
    </div>
</section>

<section style="margin-bottom: 2rem;">
    <h2 style="font-size: 1.5rem; font-weight: 600; margin-bottom: 1rem; color: var(--m-text);">결과</h2>
    <div id="resultArea" style="background: var(--m-surface); padding: 2rem; border-radius: var(--m-radius-lg); box-shadow: var(--m-shadow); min-height: 150px; text-align: center; color: var(--m-text-muted);">
        복권을 선택하고 구매 버튼을 눌러주세요.
    </div>
</section>
```

2. `<script>` 블록에 시뮬레이션 로직을 추가합니다:
```javascript
let stats = {
    totalBuys: 0,
    totalSpent: 0,
    wins: 0,
    totalWinnings: 0,
    history: []
};

function buySim(count) {
    if (!selectedLottery) {
        alert('복권 종류를 먼저 선택해주세요!');
        return;
    }

    const lot = lotteries.find(l => l.id === selectedLottery);
    const resultArea = document.getElementById('resultArea');
    resultArea.innerHTML = '<div style="font-size: 3rem;">🎰</div><p>추첨 중...</p>';

    setTimeout(() => {
        let winCount = 0;
        let winnings = 0;

        for (let i = 0; i < count; i++) {
            const rand = Math.random();
            if (rand < 1 / lot.odds) {
                winCount++;
                // 간단히 1등만 처리 (실제로는 2등/3등 확률도 추가 가능)
                const prize = lot.id === 'lotto' ? 2000000000 : lot.id === 'pension' ? 168000000 : 100000000;
                winnings += prize;
            }
        }

        stats.totalBuys += count;
        stats.totalSpent += lot.price * count;
        stats.wins += winCount;
        stats.totalWinnings += winnings;

        const profit = stats.totalWinnings - stats.totalSpent;
        const message = winCount > 0
            ? `<div style="font-size: 3rem;">🎉</div><h3 style="color: #f59e0b; font-size: 1.5rem; margin: 1rem 0;">축하합니다! ${winCount}회 당첨!</h3><p style="font-size: 1.25rem; font-weight: 600;">당첨금: ${winnings.toLocaleString()}원</p>`
            : `<div style="font-size: 3rem;">😢</div><p style="font-size: 1.25rem;">아쉽게도 ${count}회 모두 낙첨입니다.</p><button onclick="buySim(1)" style="margin-top: 1rem; padding: 8px 16px; background: var(--m-primary); color: white; border: none; border-radius: var(--m-radius-lg); cursor: pointer;">다시 도전!</button>`;

        resultArea.innerHTML = message + `<p style="margin-top: 1rem; color: var(--m-text-muted); font-size: 0.9rem;">순수익: ${profit >= 0 ? '+' : ''}${profit.toLocaleString()}원</p>`;

        // 히스토리 추가 (최근 5개만)
        stats.history.unshift({ count, winCount, winnings, profit });
        if (stats.history.length > 5) stats.history.pop();

        updateStats();
    }, 1000);
}

function updateStats() {
    // 다음 단계에서 구현
}
```

**예상 출력:**
구매 버튼 클릭 시 1초 후 결과가 표시됩니다. 당첨 시 축하 메시지와 당첨금, 낙첨 시 위로 메시지와 다시 도전 버튼이 나타납니다.

누적 통계 대시보드를 추가하고 리셋 기능을 구현합니다.

**작업 내용:**

1. 결과 섹션 아래에 통계 섹션을 추가합니다:
```html
<section style="margin-bottom: 2rem;">
    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem;">
        <h2 style="font-size: 1.5rem; font-weight: 600; color: var(--m-text);">누적 통계</h2>
        <button onclick="resetStats()" style="padding: 8px 16px; background: #ef4444; color: white; border: none; border-radius: var(--m-radius-lg); cursor: pointer; font-size: 0.9rem;">리셋</button>
    </div>
    <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem;">
        <div style="background: var(--m-surface); padding: 1.5rem; border-radius: var(--m-radius-lg); box-shadow: var(--m-shadow); text-align: center;">
            <p style="color: var(--m-text-muted); font-size: 0.9rem; margin-bottom: 0.5rem;">총 구매 횟수</p>
            <p id="statBuys" style="font-size: 2rem; font-weight: 700; color: var(--m-text);">0</p>
        </div>
        <div style="background: var(--m-surface); padding: 1.5rem; border-radius: var(--m-radius-lg); box-shadow: var(--m-shadow); text-align: center;">
            <p style="color: var(--m-text-muted); font-size: 0.9rem; margin-bottom: 0.5rem;">총 지출</p>
            <p id="statSpent" style="font-size: 2rem; font-weight: 700; color: var(--m-text);">0원</p>
        </div>
        <div style="background: var(--m-surface); padding: 1.5rem; border-radius: var(--m-radius-lg); box-shadow: var(--m-shadow); text-align: center;">
            <p style="color: var(--m-text-muted); font-size: 0.9rem; margin-bottom: 0.5rem;">당첨 횟수</p>
            <p id="statWins" style="font-size: 2rem; font-weight: 700; color: #10b981;">0</p>
        </div>
        <div style="background: var(--m-surface); padding: 1.5rem; border-radius: var(--m-radius-lg); box-shadow: var(--m-shadow); text-align: center;">
            <p style="color: var(--m-text-muted); font-size: 0.9rem; margin-bottom: 0.5rem;">총 당첨금</p>
            <p id="statWinnings" style="font-size: 2rem; font-weight: 700; color: #f59e0b;">0원</p>
        </div>
        <div style="background: var(--m-surface); padding: 1.5rem; border-radius: var(--m-radius-lg); box-shadow: var(--m-shadow); text-align: center; grid-column: span 2;">
            <p style="color: var(--m-text-muted); font-size: 0.9rem; margin-bottom: 0.5rem;">순수익</p>
            <p id="statProfit" style="font-size: 2rem; font-weight: 700;">0원</p>
        </div>
    </div>
</section>

<section>
    <h2 style="font-size: 1.5rem; font-weight: 600; margin-bottom: 1rem; color: var(--m-text);">최근 기록</h2>
    <div id="historyArea" style="background: var(--m-surface); padding: 1.5rem; border-radius: var(--m-radius-lg); box-shadow: var(--m-shadow); color: var(--m-text-muted);">
        아직 기록이 없습니다.
    </div>
</section>
```

2. `<script>` 블록에 통계 업데이트 및 리셋 함수를 구현합니다:
```javascript
function updateStats() {
    document.getElementById('statBuys').textContent = stats.totalBuys.toLocaleString();
    document.getElementById('statSpent').textContent = stats.totalSpent.toLocaleString() + '원';
    document.getElementById('statWins').textContent = stats.wins.toLocaleString();
    document.getElementById('statWinnings').textContent = stats.totalWinnings.toLocaleString() + '원';

    const profit = stats.totalWinnings - stats.totalSpent;
    const profitEl = document.getElementById('statProfit');
    profitEl.textContent = (profit >= 0 ? '+' : '') + profit.toLocaleString() + '원';
    profitEl.style.color = profit >= 0 ? '#10b981' : '#ef4444';

    // 히스토리 렌더링
    const historyArea = document.getElementById('historyArea');
    if (stats.history.length === 0) {
        historyArea.innerHTML = '<p style="color: var(--m-text-muted);">아직 기록이 없습니다.</p>';
    } else {
        historyArea.innerHTML = stats.history.map((h, i) => `
            <div style="padding: 12px; background: ${i % 2 === 0 ? 'var(--m-surface)' : 'transparent'}; border-radius: 8px; margin-bottom: 8px; display: flex; justify-content: space-between; align-items: center;">
                <span style="color: var(--m-text);">${h.count}회 구매</span>
                <span style="color: ${h.winCount > 0 ? '#10b981' : '#ef4444'}; font-weight: 600;">${h.winCount > 0 ? '당첨 ' + h.winCount + '회' : '낙첨'}</span>
                <span style="color: var(--m-text-muted);">${(h.profit >= 0 ? '+' : '') + h.profit.toLocaleString()}원</span>
            </div>
        `).join('');
    }

    // LocalStorage 저장
    localStorage.setItem('lotteryStats', JSON.stringify(stats));
}

function resetStats() {
    if (!confirm('통계를 초기화하시겠습니까?')) return;
    stats = { totalBuys: 0, totalSpent: 0, wins: 0, totalWinnings: 0, history: [] };
    updateStats();
    document.getElementById('resultArea').innerHTML = '<p style="color: var(--m-text-muted);">복권을 선택하고 구매 버튼을 눌러주세요.</p>';
}

// 페이지 로드 시 저장된 통계 복원
window.addEventListener('DOMContentLoaded', () => {
    const saved = localStorage.getItem('lotteryStats');
    if (saved) {
        stats = JSON.parse(saved);
        updateStats();
    }
});
```

**예상 출력:**
누적 통계 카드(총 구매 횟수, 지출, 당첨 횟수, 당첨금, 순수익)와 최근 5회 기록이 표시됩니다. 리셋 버튼 클릭 시 모든 통계가 초기화됩니다. LocalStorage에 저장되어 새로고침 후에도 통계가 유지됩니다.