🎮 미니 게임 아케이드 - 브라우저 캐주얼 게임 모음

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

**Step 1: 프로젝트 기본 구조 및 게임 선택 화면 구현**

1. `app/modules/mini-game-arcade/index.php` 파일을 생성하고 modern shell 골격을 적용하세요.
2. 페이지 상단에 "🎮 미니 게임 아케이드" 제목을 표시하세요.
3. 3개의 게임 카드를 그리드 레이아웃(3열, 모바일에서는 1열)으로 배치하세요:
   - 게임 #1: 색상 카드 기억하기 (아이콘: 🎨, 브랜드 컬러: #FF6B6B)
   - 게임 #2: 숫자 순서 맞추기 (아이콘: 🔢, 브랜드 컬러: #4ECDC4)
   - 게임 #3: 반응속도 테스트 (아이콘: ⚡, 브랜드 컬러: #FFE66D)
4. 각 카드에는 아이콘, 제목, 간단한 설명(2줄), "플레이" 버튼, "내 최고 기록: -" 텍스트를 포함하세요.
5. 카드는 `var(--m-surface)` 배경, `var(--m-shadow)` 그림자, `var(--m-radius-lg)` 라운드 처리하세요.
6. 카드 호버 시 `transform: translateY(-4px)` 애니메이션과 그림자 강화 효과를 추가하세요.
7. "플레이" 버튼 클릭 시 해당 게임 영역이 표시되도록 JavaScript로 화면 전환 로직을 준비하세요 (아직 게임 로직은 구현하지 않음, `showGame(gameId)` 함수만 정의).
8. modern shell의 디자인 토큰을 활용하여 다크모드에서도 자연스럽게 보이도록 하세요.
9. 모바일 반응형을 위해 미디어 쿼리를 추가하세요 (`@media (max-width: 768px)`).

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;">
        <!-- 페이지 본문 -->
    </main>
    <?php require G5_THEME_PATH.'/modern/_footer.inc.php'; ?>
</div>
<?php include_once('./tail.sub.php'); ?>
```

이 단계에서는 게임 선택 화면만 완성하고, 게임 로직은 다음 단계에서 구현합니다.

**Step 2: 게임 #1 "색상 카드 기억하기" 구현**

1. 게임 선택 화면 아래에 게임 플레이 영역을 추가하세요 (기본적으로 `display: none`).
2. 게임 #1 영역에는 다음을 포함하세요:
   - 게임 제목 "🎨 색상 카드 기억하기"
   - 설명 텍스트: "2초 동안 표시되는 색상을 기억하고 순서대로 클릭하세요!"
   - 3x3 그리드 (9개의 카드)
   - "시작" 버튼
   - "뒤로 가기" 버튼 (게임 선택 화면으로 복귀)
3. JavaScript로 게임 로직을 구현하세요:
   - "시작" 버튼 클릭 시 9개의 랜덤 색상을 생성하여 카드에 표시 (2초간)
   - 2초 후 모든 카드를 회색(#CCCCCC)으로 뒤집기
   - 사용자가 카드를 클릭하면 원래 색상이 나타나고, 정답 여부를 체크
   - 정답이면 카드를 고정, 오답이면 다시 회색으로 (진동 애니메이션)
   - 9개 모두 맞추면 결과 모달 표시 (점수 = 정답 개수)
4. 색상 배열은 `['#FF6B6B', '#4ECDC4', '#FFE66D', '#95E1D3', '#F38181', '#AA96DA', '#FCBAD3', '#A8D8EA', '#FFAAA5']` 중 랜덤 선택하세요.
5. 카드 클릭 시 `transform: scale(0.95)` 애니메이션을 추가하세요.
6. 결과 모달에는 "점수: X/9", "닉네임 입력" 폼, "저장" 버튼을 포함하세요 (아직 DB 저장은 구현하지 않음).
7. 게임 플레이 중에는 "시작" 버튼을 비활성화하세요.

게임 로직 흐름:
1. 사용자가 "시작" 클릭
2. 9개 랜덤 색상 생성 및 2초간 표시
3. 카드 뒤집기 (회색)
4. 사용자 클릭 대기 → 정답 체크 → 9개 완료 시 결과 모달

이 단계에서는 게임 #1만 완성하고, 점수 저장 기능은 다음 단계에서 추가합니다.

**Step 3: 게임 #2 "숫자 순서 맞추기" 및 게임 #3 "반응속도 테스트" 구현**

### 게임 #2: 숫자 순서 맞추기

1. 게임 #2 영역을 추가하세요 (게임 #1과 동일한 구조).
2. 게임 제목 "🔢 숫자 순서 맞추기", 설명: "30초 안에 1부터 순서대로 최대한 많은 숫자를 클릭하세요!"
3. 게임 플레이 영역:
   - 타이머 표시 (남은 시간: 30초)
   - 숫자 버튼 10개가 랜덤 위치에 배치 (absolute position)
   - "시작" 버튼, "뒤로 가기" 버튼
4. JavaScript 로직:
   - "시작" 클릭 시 1~10 숫자 버튼이 랜덤 위치에 생성
   - 사용자는 1부터 순서대로 클릭해야 함 (잘못된 순서 클릭 시 무시)
   - 정답 클릭 시 버튼이 사라지고 다음 숫자가 활성화
   - 30초 타이머가 끝나면 게임 종료, 점수 = 클릭한 숫자 개수
   - 결과 모달 표시 (닉네임 입력 폼 포함)
5. 타이머는 `setInterval`로 1초마다 갱신하고, 0초가 되면 게임 종료
6. 숫자 버튼은 게임 영역(500px x 500px) 내 랜덤 위치에 배치 (겹치지 않도록 최소 간격 유지)

### 게임 #3: 반응속도 테스트

1. 게임 #3 영역을 추가하세요.
2. 게임 제목 "⚡ 반응속도 테스트", 설명: "화면이 초록색으로 변하면 최대한 빨리 클릭하세요!"
3. 게임 플레이 영역:
   - 큰 클릭 영역 (600px x 400px, 초기 배경: #FF6B6B 빨간색)
   - 안내 텍스트: "클릭해서 시작하세요"
   - 3회 측정 후 평균 반응 시간 표시
   - "시작" 버튼, "뒤로 가기" 버튼
4. JavaScript 로직:
   - 클릭 영역 클릭 시 랜덤 시간(2~5초) 후 배경이 초록색(#4ECDC4)으로 변경
   - 초록색으로 변하는 순간부터 클릭까지의 시간을 밀리초(ms)로 측정
   - 빨간색일 때 클릭하면 "부정 출발! 초록색이 될 때까지 기다리세요" 경고
   - 3회 측정 후 평균값 계산, 결과 모달 표시 (점수 = 평균 ms)
5. 각 측정 후 "다음 라운드" 버튼 표시, 클릭 시 다음 측정 시작

이 단계에서는 게임 #2, #3를 완성하고, 모든 게임의 결과 모달에 닉네임 입력 폼을 포함하세요 (아직 DB 저장은 구현하지 않음).

**Step 4: SQLite DB 연동 및 점수 저장 기능 구현**

1. 페이지 상단에 SQLite DB 연결 코드를 추가하세요:
   - DB 경로: `G5_DATA_PATH.'/modules/mini-game-arcade.sqlite'`
   - 디렉터리가 없으면 `@mkdir(G5_DATA_PATH.'/modules', 0707, true);`로 생성
   - `new PDO('sqlite:'.G5_DATA_PATH.'/modules/mini-game-arcade.sqlite')`로 연결
2. 첫 접근 시 3개의 테이블을 자동 생성하세요 (마이그레이션 불필요):
   ```sql
   CREATE TABLE IF NOT EXISTS scores_color (
       id INTEGER PRIMARY KEY AUTOINCREMENT,
       nickname TEXT NOT NULL,
       score INTEGER NOT NULL,
       played_at DATETIME DEFAULT CURRENT_TIMESTAMP
   );
   CREATE TABLE IF NOT EXISTS scores_number (
       id INTEGER PRIMARY KEY AUTOINCREMENT,
       nickname TEXT NOT NULL,
       score INTEGER NOT NULL,
       played_at DATETIME DEFAULT CURRENT_TIMESTAMP
   );
   CREATE TABLE IF NOT EXISTS scores_reaction (
       id INTEGER PRIMARY KEY AUTOINCREMENT,
       nickname TEXT NOT NULL,
       score INTEGER NOT NULL,
       played_at DATETIME DEFAULT CURRENT_TIMESTAMP
   );
   ```
3. AJAX 엔드포인트를 추가하세요 (같은 파일 내 상단에서 `$_POST` 체크):
   - `action=save_score`일 때:
     - `game_id` (color/number/reaction), `nickname`, `score`를 받음
     - 닉네임은 htmlspecialchars()로 이스케이프
     - prepared statement로 해당 테이블에 INSERT
     - 성공 시 `{"success": true, "message": "점수가 저장되었습니다!"}`를 JSON으로 반환
     - 실패 시 `{"success": false, "message": "저장 실패"}`
4. JavaScript에서 결과 모달의 "저장" 버튼 클릭 시:
   - `fetch('/mini-game-arcade', { method: 'POST', body: formData })`로 점수 전송
   - 성공 시 localStorage에 개인 최고 기록 저장 (`localStorage.setItem('best_score_color', score)`)
   - 성공 메시지 표시 후 게임 선택 화면으로 복귀
5. 페이지 로드 시 localStorage에서 개인 최고 기록을 읽어와 게임 카드에 표시하세요:
   ```javascript
   const bestScoreColor = localStorage.getItem('best_score_color') || '-';
   document.querySelector('#card-color .best-score').textContent = `내 최고 기록: ${bestScoreColor}`;
   ```

이 단계에서는 점수 저장 기능을 완성하고, 개인 최고 기록을 localStorage에 캐싱하여 게임 선택 화면에 표시합니다.

**Step 5: 랭킹 보드 구현 및 UI 완성**

1. 게임 선택 화면 하단에 랭킹 보드 섹션을 추가하세요:
   - 제목: "🏆 랭킹 보드"
   - 3개의 탭 버튼 (색상 기억, 숫자 순서, 반응속도)
   - 탭 클릭 시 해당 게임의 Top 10 랭킹 테이블 표시
2. 랭킹 테이블:
   - 컬럼: 순위, 닉네임, 점수, 날짜
   - 내 기록은 배경색 하이라이트 (`background: rgba(255, 107, 107, 0.1)` 등 게임별 브랜드 컬러)
   - 1위는 금메달 아이콘 🥇, 2위는 은메달 🥈, 3위는 동메달 🥉
3. PHP에서 랭킹 데이터를 조회하세요:
   ```php
   $stmt = $pdo->prepare("SELECT nickname, score, played_at FROM scores_color ORDER BY score DESC LIMIT 10");
   $stmt->execute();
   $rankingsColor = $stmt->fetchAll(PDO::FETCH_ASSOC);
   ```
   - 3개 게임 모두 동일하게 조회
   - 반응속도는 `ORDER BY score ASC` (낮을수록 좋음)
4. JavaScript로 랭킹 데이터를 JSON으로 받아 테이블을 동적 생성하세요:
   - 탭 클릭 시 해당 게임의 랭킹만 표시
   - localStorage의 닉네임과 일치하는 행은 하이라이트
5. 게임 카드에 "최근 1위" 정보를 추가하세요 (각 게임별 1위 닉네임과 점수):
   ```php
   $stmt = $pdo->prepare("SELECT nickname, score FROM scores_color ORDER BY score DESC LIMIT 1");
   $stmt->execute();
   $topPlayer = $stmt->fetch(PDO::FETCH_ASSOC);
   ```
6. 모바일 반응형 최종 점검:
   - 랭킹 테이블이 모바일에서 가로 스크롤 가능하도록 `overflow-x: auto` 적용
   - 게임 플레이 영역이 작은 화면에서도 잘 보이도록 크기 조정

이 단계에서는 랭킹 보드를 완성하고, 전체 UI를 다듬어 프로젝트를 마무리합니다.

**Step 6: 보너스 기능 추가 및 최종 완성**

### 선택 기능 1: 게임 플레이 통계 차트

1. 랭킹 보드 옆에 "📊 내 통계" 버튼을 추가하세요.
2. 버튼 클릭 시 모달을 열고, 사용자가 플레이한 게임별 점수 추이를 Chart.js 라인 차트로 표시하세요:
   - CDN: `<script src="https://cdn.jsdelivr.net/npm/chart.js@4"></script>`
   - X축: 플레이 일시, Y축: 점수
   - 3개 게임을 각각 다른 색상 라인으로 표시
3. PHP에서 사용자의 최근 10회 플레이 기록을 조회하세요 (닉네임 기준):
   ```php
   $stmt = $pdo->prepare("SELECT score, played_at FROM scores_color WHERE nickname = ? ORDER BY played_at DESC LIMIT 10");
   $stmt->execute([$nickname]);
   ```
4. JavaScript로 Chart.js 차트를 생성하세요:
   ```javascript
   const ctx = document.getElementById('statsChart').getContext('2d');
   new Chart(ctx, {
       type: 'line',
       data: { labels: dates, datasets: [{ label: '색상 기억', data: scoresColor, borderColor: '#FF6B6B' }] }
   });
   ```

### 선택 기능 2: 난이도 선택

1. 게임 시작 전 난이도 선택 버튼 추가 (쉬움/보통/어려움):
   - 쉬움: 색상 카드 2x2 (4개), 숫자 순서 40초, 반응속도 3~6초 대기
   - 보통: 기본 설정
   - 어려움: 색상 카드 4x4 (16개), 숫자 순서 20초, 반응속도 1~3초 대기
2. JavaScript에서 난이도에 따라 게임 설정을 동적으로 변경하세요.

### 선택 기능 3: 효과음 추가

1. Web Audio API로 간단한 효과음을 추가하세요:
   - 정답 클릭: 삑 소리 (주파수 800Hz, 100ms)
   - 오답 클릭: 부저 소리 (주파수 200Hz, 200ms)
   - 게임 종료: 팡파레 (여러 음계 조합)
2. 효과음 on/off 토글 버튼을 추가하세요 (localStorage에 설정 저장).

### 최종 점검

1. 모든 게임이 정상 작동하는지 테스트하세요.
2. 다크모드 전환 시 모든 요소가 자연스럽게 변하는지 확인하세요.
3. 모바일 화면에서 게임 플레이가 원활한지 확인하세요.
4. SQLite DB에 점수가 정상적으로 저장되고, 랭킹 보드에 표시되는지 확인하세요.
5. 코드 주석을 추가하여 유지보수를 쉽게 하세요.

이 단계에서는 보너스 기능을 추가하고, 전체 프로젝트를 최종 완성합니다.