🎰 g5se 랜덤 로또 시뮬레이터 - 확률의 세계 체험하기

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

다음 파일을 생성하세요:

**app/modules/lotto-sim/index.php**

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

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; max-width: 800px; margin: 0 auto;">
        <h1 style="font-size: 2rem; font-weight: 700; margin-bottom: 8px; color: var(--m-text);">🎰 로또 확률 시뮬레이터</h1>
        <p style="color: var(--m-text-muted); margin-bottom: 32px;">1등 당첨 확률 814만분의 1을 직접 체험해보세요!</p>

        <!-- 번호 선택 영역 -->
        <div style="background: var(--m-surface); padding: 24px; border-radius: var(--m-radius-lg); box-shadow: var(--m-shadow); margin-bottom: 24px;">
            <h2 style="font-size: 1.25rem; font-weight: 600; margin-bottom: 16px; color: var(--m-text);">내 번호 선택 (6개)</h2>
            <div id="number-grid" style="display: grid; grid-template-columns: repeat(9, 1fr); gap: 8px; margin-bottom: 16px;">
                <!-- 1~45 버튼 동적 생성 -->
            </div>
            <div style="display: flex; gap: 12px; flex-wrap: wrap;">
                <button id="auto-pick" style="padding: 10px 20px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; border: none; border-radius: 8px; font-weight: 600; cursor: pointer;">🎲 자동 번호</button>
                <button id="clear-pick" style="padding: 10px 20px; background: var(--m-surface); color: var(--m-text); border: 1px solid #ddd; border-radius: 8px; cursor: pointer;">초기화</button>
            </div>
            <div id="selected-numbers" style="margin-top: 16px; font-size: 1.5rem; font-weight: 700; color: #f59e0b; min-height: 40px;">
                <!-- 선택된 번호 표시 -->
            </div>
        </div>

        <!-- 추첨 실행 영역 -->
        <div style="background: var(--m-surface); padding: 24px; border-radius: var(--m-radius-lg); box-shadow: var(--m-shadow); margin-bottom: 24px;">
            <button id="draw-once" style="width: 100%; padding: 16px; background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); color: white; border: none; border-radius: 12px; font-size: 1.25rem; font-weight: 700; cursor: pointer; margin-bottom: 12px;">🎉 추첨 시작!</button>
            <button id="draw-100" style="width: 100%; padding: 12px; background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); color: white; border: none; border-radius: 12px; font-weight: 600; cursor: pointer;">⚡ 100번 연속 추첨</button>
        </div>

        <!-- 결과 표시 영역 -->
        <div id="result-area" style="background: var(--m-surface); padding: 24px; border-radius: var(--m-radius-lg); box-shadow: var(--m-shadow); margin-bottom: 24px; display: none;">
            <h2 style="font-size: 1.25rem; font-weight: 600; margin-bottom: 16px; color: var(--m-text);">당첨 번호</h2>
            <div id="winning-numbers" style="font-size: 1.5rem; font-weight: 700; margin-bottom: 16px;">
                <!-- 당첨 번호 + 보너스 -->
            </div>
            <div id="result-message" style="font-size: 1.75rem; font-weight: 700; text-align: center; padding: 20px; border-radius: 12px;">
                <!-- 등수 판정 메시지 -->
            </div>
        </div>

        <!-- 통계 영역 -->
        <div style="background: var(--m-surface); padding: 24px; border-radius: var(--m-radius-lg); box-shadow: var(--m-shadow);">
            <h2 style="font-size: 1.25rem; font-weight: 600; margin-bottom: 16px; color: var(--m-text);">📊 추첨 통계</h2>
            <div id="stats" style="font-size: 1rem; line-height: 1.8; color: var(--m-text);">
                총 추첨 횟수: <strong>0</strong>회<br>
                1등: <strong>0</strong>회<br>
                2등: <strong>0</strong>회<br>
                3등: <strong>0</strong>회<br>
                4등: <strong>0</strong>회<br>
                5등: <strong>0</strong>회<br>
                낙첨: <strong>0</strong>회
            </div>
            <button id="reset-stats" style="margin-top: 16px; padding: 10px 20px; background: #ef4444; color: white; border: none; border-radius: 8px; cursor: pointer;">통계 초기화</button>
        </div>
    </main>
    <?php require G5_THEME_PATH.'/modern/_footer.inc.php'; ?>
</div>

<script>
// 1~45 번호 버튼 생성
const grid = document.getElementById('number-grid');
for (let i = 1; i <= 45; i++) {
    const btn = document.createElement('button');
    btn.textContent = i;
    btn.dataset.num = i;
    btn.style.cssText = 'width: 100%; aspect-ratio: 1; border: 2px solid #ddd; border-radius: 50%; background: white; font-size: 1rem; font-weight: 600; cursor: pointer; transition: all 0.2s;';
    btn.addEventListener('click', () => toggleNumber(i, btn));
    grid.appendChild(btn);
}

let selectedNumbers = [];

function toggleNumber(num, btn) {
    const idx = selectedNumbers.indexOf(num);
    if (idx > -1) {
        selectedNumbers.splice(idx, 1);
        btn.style.background = 'white';
        btn.style.borderColor = '#ddd';
        btn.style.color = '#000';
    } else {
        if (selectedNumbers.length >= 6) {
            alert('최대 6개까지 선택 가능합니다!');
            return;
        }
        selectedNumbers.push(num);
        btn.style.background = 'linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%)';
        btn.style.borderColor = '#f59e0b';
        btn.style.color = 'white';
    }
    updateSelectedDisplay();
}

function updateSelectedDisplay() {
    const display = document.getElementById('selected-numbers');
    if (selectedNumbers.length === 0) {
        display.textContent = '번호를 선택하세요';
        display.style.color = 'var(--m-text-muted)';
    } else {
        selectedNumbers.sort((a, b) => a - b);
        display.textContent = selectedNumbers.join(', ');
        display.style.color = '#f59e0b';
    }
}

// 자동 번호 생성
document.getElementById('auto-pick').addEventListener('click', () => {
    // 기존 선택 초기화
    document.querySelectorAll('#number-grid button').forEach(btn => {
        btn.style.background = 'white';
        btn.style.borderColor = '#ddd';
        btn.style.color = '#000';
    });
    selectedNumbers = [];
    
    // 6개 랜덤 선택
    while (selectedNumbers.length < 6) {
        const num = Math.floor(Math.random() * 45) + 1;
        if (!selectedNumbers.includes(num)) selectedNumbers.push(num);
    }
    selectedNumbers.sort((a, b) => a - b);
    
    // UI 업데이트
    selectedNumbers.forEach(num => {
        const btn = document.querySelector(`[data-num="${num}"]`);
        btn.style.background = 'linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%)';
        btn.style.borderColor = '#f59e0b';
        btn.style.color = 'white';
    });
    updateSelectedDisplay();
});

// 선택 초기화
document.getElementById('clear-pick').addEventListener('click', () => {
    document.querySelectorAll('#number-grid button').forEach(btn => {
        btn.style.background = 'white';
        btn.style.borderColor = '#ddd';
        btn.style.color = '#000';
    });
    selectedNumbers = [];
    updateSelectedDisplay();
});

// 통계 (LocalStorage)
let stats = JSON.parse(localStorage.getItem('lotto-stats') || '{"total":0,"rank1":0,"rank2":0,"rank3":0,"rank4":0,"rank5":0,"lose":0}');

function saveStats() {
    localStorage.setItem('lotto-stats', JSON.stringify(stats));
    updateStatsDisplay();
}

function updateStatsDisplay() {
    document.getElementById('stats').innerHTML = `
        총 추첨 횟수: <strong>${stats.total}</strong>회<br>
        1등: <strong>${stats.rank1}</strong>회<br>
        2등: <strong>${stats.rank2}</strong>회<br>
        3등: <strong>${stats.rank3}</strong>회<br>
        4등: <strong>${stats.rank4}</strong>회<br>
        5등: <strong>${stats.rank5}</strong>회<br>
        낙첨: <strong>${stats.lose}</strong>회
    `;
}

updateStatsDisplay();

// 추첨 로직
function drawLotto() {
    if (selectedNumbers.length !== 6) {
        alert('6개의 번호를 선택하세요!');
        return null;
    }
    
    // 당첨 번호 생성
    const winning = [];
    while (winning.length < 6) {
        const num = Math.floor(Math.random() * 45) + 1;
        if (!winning.includes(num)) winning.push(num);
    }
    winning.sort((a, b) => a - b);
    
    // 보너스 번호
    let bonus;
    do {
        bonus = Math.floor(Math.random() * 45) + 1;
    } while (winning.includes(bonus));
    
    return { winning, bonus };
}

function checkRank(winning, bonus) {
    const matched = selectedNumbers.filter(n => winning.includes(n)).length;
    const hasBonus = selectedNumbers.includes(bonus);
    
    if (matched === 6) return 1;
    if (matched === 5 && hasBonus) return 2;
    if (matched === 5) return 3;
    if (matched === 4) return 4;
    if (matched === 3) return 5;
    return 0; // 낙첨
}

// 1회 추첨
document.getElementById('draw-once').addEventListener('click', () => {
    const result = drawLotto();
    if (!result) return;
    
    const { winning, bonus } = result;
    const rank = checkRank(winning, bonus);
    
    // 결과 표시
    document.getElementById('result-area').style.display = 'block';
    document.getElementById('winning-numbers').innerHTML = `
        ${winning.map(n => `<span style="display: inline-block; width: 40px; height: 40px; line-height: 40px; text-align: center; background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); color: white; border-radius: 50%; margin: 0 4px;">${n}</span>`).join('')}
        <span style="color: var(--m-text-muted); margin: 0 8px;">+</span>
        <span style="display: inline-block; width: 40px; height: 40px; line-height: 40px; text-align: center; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; border-radius: 50%;">${bonus}</span>
    `;
    
    const messages = {
        1: { text: '🎉 1등 당첨! 축하합니다!', bg: 'linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%)', color: 'white' },
        2: { text: '🎊 2등 당첨! 대박입니다!', bg: 'linear-gradient(135deg, #a78bfa 0%, #8b5cf6 100%)', color: 'white' },
        3: { text: '🎁 3등 당첨! 좋아요!', bg: 'linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%)', color: 'white' },
        4: { text: '👍 4등 당첨!', bg: 'linear-gradient(135deg, #34d399 0%, #10b981 100%)', color: 'white' },
        5: { text: '✨ 5등 당첨!', bg: 'linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%)', color: 'white' },
        0: { text: '😢 낙첨입니다...', bg: 'var(--m-surface)', color: 'var(--m-text-muted)' }
    };
    
    const msg = messages[rank];
    const resultMsg = document.getElementById('result-message');
    resultMsg.textContent = msg.text;
    resultMsg.style.background = msg.bg;
    resultMsg.style.color = msg.color;
    
    // 통계 업데이트
    stats.total++;
    if (rank === 1) stats.rank1++;
    else if (rank === 2) stats.rank2++;
    else if (rank === 3) stats.rank3++;
    else if (rank === 4) stats.rank4++;
    else if (rank === 5) stats.rank5++;
    else stats.lose++;
    saveStats();
});

// 100회 연속 추첨
document.getElementById('draw-100').addEventListener('click', () => {
    for (let i = 0; i < 100; i++) {
        const result = drawLotto();
        if (!result) return;
        const { winning, bonus } = result;
        const rank = checkRank(winning, bonus);
        
        stats.total++;
        if (rank === 1) stats.rank1++;
        else if (rank === 2) stats.rank2++;
        else if (rank === 3) stats.rank3++;
        else if (rank === 4) stats.rank4++;
        else if (rank === 5) stats.rank5++;
        else stats.lose++;
    }
    saveStats();
    alert('100회 추첨 완료! 통계를 확인하세요.');
});

// 통계 초기화
document.getElementById('reset-stats').addEventListener('click', () => {
    if (confirm('정말 통계를 초기화하시겠습니까?')) {
        stats = { total: 0, rank1: 0, rank2: 0, rank3: 0, rank4: 0, rank5: 0, lose: 0 };
        saveStats();
        document.getElementById('result-area').style.display = 'none';
    }
});
</script>

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

이 코드는 g5se modern shell 골격을 사용하여 로또 시뮬레이터의 기본 UI와 로직을 구현합니다. 1~45 번호 선택, 자동 번호 생성, 추첨 실행, 등수 판정, 통계 기록 기능이 모두 포함되어 있습니다.

현재 페이지에 다음 개선 사항을 추가하세요:

1. **번호 버튼 호버 효과**: 마우스 오버 시 살짝 확대되고 그림자가 생기는 transition 추가
2. **추첨 애니메이션**: '추첨 시작!' 버튼 클릭 시 당첨 번호가 즉시 나타나지 않고, 0.5초간 "추첨 중..." 메시지 표시 후 결과 노출 (setTimeout 사용)
3. **반응형 그리드 개선**: 모바일(화면 너비 480px 이하)에서는 번호 그리드를 7열로 축소 (미디어 쿼리 사용)
4. **당첨 확률 안내**: 페이지 상단에 "1등 확률: 1/8,145,060" 같은 확률 정보를 작은 텍스트로 추가
5. **최고 기록 표시**: LocalStorage에 "가장 적은 횟수로 1등 당첨" 기록을 저장하고, 통계 영역 하단에 "최단 1등 기록: X회" 표시 (1등 당첨 시 갱신)

**app/modules/lotto-sim/index.php** 파일을 수정하여 위 기능을 반영하세요. CSS는 `<style>` 블록을 `<main>` 안에 인라인으로 추가하거나 기존 인라인 스타일을 확장하세요.

마지막으로 다음 보너스 기능을 추가하세요:

1. **공유 기능**: 추첨 결과 하단에 "결과 공유하기" 버튼 추가. 클릭 시 클립보드에 "나는 로또 시뮬레이터에서 X번 만에 Y등 당첨! 총 Z회 추첨 중 1등 A회 🎰" 같은 텍스트 복사 (navigator.clipboard.writeText 사용)
2. **다크모드 확인**: modern shell의 다크모드 토글 버튼을 눌러봤을 때 배경/텍스트 색상이 자연스럽게 전환되는지 확인 (토큰 사용 덕분에 자동 대응)
3. **접근성 개선**: 번호 버튼에 `aria-label="숫자 {num} 선택"` 속성 추가, 추첨 버튼에 `aria-live="polite"` 영역 연결하여 스크린 리더 사용자도 결과를 들을 수 있게
4. **성능 최적화**: 100회 연속 추첨 시 UI가 멈추지 않도록 `requestAnimationFrame` 또는 `setTimeout(..., 0)` 패턴으로 비동기 처리 (필수는 아니지만 권장)

**app/modules/lotto-sim/index.php** 파일을 최종 수정하세요. 완성 후 `/lotto-sim`에 접속하여 모든 기능이 정상 동작하는지 테스트하세요.