🎲 행운의 주사위 - 결정 장애 해결사

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

## Step 1: 프로젝트 기본 골격 생성

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

**요구사항:**
1. g5se modern shell 골격 적용 (아래 구조 필수)
2. 페이지 제목: "🎲 행운의 주사위 - 결정 장애 해결사"
3. 간단한 설명 문구와 "주사위 굴리기 시작" 버튼 배치
4. 다크모드 자동 대응을 위한 CSS 변수 사용 (`--m-surface`, `--m-text` 등)

**modern shell 골격 (반드시 이 구조를 따를 것):**

```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;">
        <!-- 페이지 본문 -->
        <h1 style="font-size: 2rem; font-weight: 700; margin-bottom: 12px;">🎲 행운의 주사위</h1>
        <p style="color: var(--m-text-muted); margin-bottom: 32px;">결정 장애가 있으신가요? 주사위가 대신 선택해드립니다!</p>
        
        <div style="background: var(--m-surface); padding: 24px; border-radius: var(--m-radius-lg); box-shadow: var(--m-shadow);">
            <p style="margin-bottom: 16px;">아래에 2~6개의 선택지를 입력하고 주사위를 굴려보세요.</p>
            <button id="startBtn" style="background: var(--m-primary); color: white; padding: 12px 24px; border: none; border-radius: 8px; font-size: 1rem; cursor: pointer;">
                시작하기
            </button>
        </div>
    </main>
    <?php require G5_THEME_PATH.'/modern/_footer.inc.php'; ?>
</div>
<?php include_once('./tail.sub.php'); ?>

## Step 2: 선택지 입력 폼 구현

`app/modules/lucky-dice/index.php`를 수정하여 다음 기능을 추가하세요.

**요구사항:**
1. 선택지 입력 필드 2개를 기본으로 표시 (최대 6개까지 추가 가능)
2. "+ 선택지 추가" 버튼 (최대 6개 제한)
3. 각 입력 필드 옆에 "삭제" 버튼 (최소 2개는 유지)
4. "주사위 굴리기" 버튼 (선택지 2개 미만이면 비활성화)
5. 빈 선택지가 있으면 경고 메시지 표시

**JavaScript 로직:**
- `addChoice()`: 선택지 입력 필드 추가 (최대 6개)
- `removeChoice(index)`: 선택지 삭제 (최소 2개 유지)
- `rollDice()`: 주사위 굴리기 (빈 선택지 검증)

**HTML 구조 예시:**
```html
<div id="choiceInputs">
    <div class="choice-item" style="display: flex; gap: 8px; margin-bottom: 12px;">
        <input type="text" class="choice-input" placeholder="선택지 1" style="flex: 1; padding: 10px; border: 1px solid var(--m-text-muted); border-radius: 6px; background: var(--m-surface); color: var(--m-text);">
        <button onclick="removeChoice(0)" style="padding: 10px 16px; background: #f44336; color: white; border: none; border-radius: 6px; cursor: pointer;">삭제</button>
    </div>
</div>
<button onclick="addChoice()" style="margin-top: 12px; padding: 10px 20px; background: var(--m-primary); color: white; border: none; border-radius: 6px; cursor: pointer;">+ 선택지 추가</button>
<button id="rollBtn" onclick="rollDice()" style="margin-top: 20px; width: 100%; padding: 16px; background: #4CAF50; color: white; border: none; border-radius: 8px; font-size: 1.1rem; font-weight: 700; cursor: pointer;">🎲 주사위 굴리기</button>
```

**JavaScript 함수 구현:**
```javascript
let choiceCount = 2;

function addChoice() {
    if (choiceCount >= 6) {
        alert('최대 6개까지만 추가할 수 있습니다.');
        return;
    }
    choiceCount++;
    const container = document.getElementById('choiceInputs');
    const div = document.createElement('div');
    div.className = 'choice-item';
    div.style.cssText = 'display: flex; gap: 8px; margin-bottom: 12px;';
    div.innerHTML = `
        <input type="text" class="choice-input" placeholder="선택지 ${choiceCount}" style="flex: 1; padding: 10px; border: 1px solid var(--m-text-muted); border-radius: 6px; background: var(--m-surface); color: var(--m-text);">
        <button onclick="removeChoice(${choiceCount - 1})" style="padding: 10px 16px; background: #f44336; color: white; border: none; border-radius: 6px; cursor: pointer;">삭제</button>
    `;
    container.appendChild(div);
}

function removeChoice(index) {
    if (choiceCount <= 2) {
        alert('최소 2개의 선택지는 필요합니다.');
        return;
    }
    const items = document.querySelectorAll('.choice-item');
    items[index].remove();
    choiceCount--;
}

function rollDice() {
    const inputs = document.querySelectorAll('.choice-input');
    const choices = Array.from(inputs).map(input => input.value.trim()).filter(v => v !== '');
    
    if (choices.length < 2) {
        alert('최소 2개의 선택지를 입력해주세요.');
        return;
    }
    
    // 다음 단계에서 주사위 애니메이션 구현 예정
    alert('선택지: ' + choices.join(', '));
}
```

## Step 3: 주사위 애니메이션 & 결과 표시

`app/modules/lucky-dice/index.php`를 수정하여 주사위 굴림 애니메이션과 결과 표시 기능을 추가하세요.

**요구사항:**
1. 주사위 굴림 버튼 클릭 시 3D 회전 애니메이션 (2초 동안)
2. 애니메이션 종료 후 랜덤으로 선택된 결과를 큰 카드로 표시
3. 결과 카드에 "🎉 당첨!" 문구와 선택된 항목 표시
4. "다시 굴리기" 버튼으로 재시도 가능
5. 최근 5개 결과 히스토리 리스트 표시

**CSS 애니메이션:**
```css
@keyframes diceRoll {
    0% { transform: rotate3d(1, 1, 1, 0deg); }
    25% { transform: rotate3d(1, 1, 1, 180deg) scale(1.2); }
    50% { transform: rotate3d(1, 1, 1, 360deg) scale(1); }
    75% { transform: rotate3d(1, 1, 1, 540deg) scale(1.2); }
    100% { transform: rotate3d(1, 1, 1, 720deg) scale(1); }
}

.dice-rolling {
    animation: diceRoll 2s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}
```

**JavaScript 로직 수정:**
```javascript
let history = [];

function rollDice() {
    const inputs = document.querySelectorAll('.choice-input');
    const choices = Array.from(inputs).map(input => input.value.trim()).filter(v => v !== '');
    
    if (choices.length < 2) {
        alert('최소 2개의 선택지를 입력해주세요.');
        return;
    }
    
    // 주사위 애니메이션 시작
    const diceElement = document.getElementById('diceAnimation');
    diceElement.classList.add('dice-rolling');
    document.getElementById('rollBtn').disabled = true;
    
    // 2초 후 결과 표시
    setTimeout(() => {
        diceElement.classList.remove('dice-rolling');
        document.getElementById('rollBtn').disabled = false;
        
        const winner = choices[Math.floor(Math.random() * choices.length)];
        showResult(winner);
        addToHistory(winner);
    }, 2000);
}

function showResult(winner) {
    const resultDiv = document.getElementById('result');
    resultDiv.innerHTML = `
        <div style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); padding: 32px; border-radius: var(--m-radius-lg); text-align: center; margin-top: 24px; color: white;">
            <div style="font-size: 3rem; margin-bottom: 8px;">🎉</div>
            <h2 style="font-size: 1.5rem; font-weight: 700; margin-bottom: 8px;">당첨!</h2>
            <p style="font-size: 2rem; font-weight: 700;">${winner}</p>
        </div>
    `;
    resultDiv.style.display = 'block';
}

function addToHistory(item) {
    history.unshift(item);
    if (history.length > 5) history.pop();
    
    const historyDiv = document.getElementById('history');
    historyDiv.innerHTML = '<h3 style="font-size: 1.2rem; font-weight: 700; margin-bottom: 12px;">최근 결과</h3>' +
        history.map((h, i) => `<div style="padding: 8px 12px; background: var(--m-surface); border-radius: 6px; margin-bottom: 8px;">${i + 1}. ${h}</div>`).join('');
    historyDiv.style.display = 'block';
}
```

**HTML 추가:**
```html
<div id="diceAnimation" style="width: 100px; height: 100px; margin: 24px auto; background: var(--m-primary); border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 3rem; color: white;">
    🎲
</div>
<div id="result" style="display: none;"></div>
<div id="history" style="display: none; margin-top: 24px;"></div>
```