🎯 g5se 온라인 빙고 게임 메이커 - 커스텀 빙고판 생성 & 실시간 플레이

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

빙고 게임 메이커 모듈의 메인 페이지를 만듭니다.

**작업 내용:**

1. `app/modules/bingo-game-maker/index.php` 파일 생성
2. 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>🎯 빙고 게임 메이커</h1>
        <p style="color: var(--m-text-muted); margin-bottom: 32px;">나만의 커스텀 빙고판을 만들고 친구들과 함께 플레이하세요!</p>
        
        <!-- 여기에 메뉴 버튼들 추가 -->
        <div style="display: grid; gap: 16px; max-width: 500px;">
            <a href="/bingo-game-maker/create" style="
                display: block;
                padding: 24px;
                background: var(--m-surface);
                border-radius: var(--m-radius-lg);
                box-shadow: var(--m-shadow);
                text-decoration: none;
                color: var(--m-text);
                transition: transform 0.2s;
            ">
                <div style="font-size: 32px; margin-bottom: 8px;">✨</div>
                <h3 style="margin: 0 0 8px 0;">새 빙고판 만들기</h3>
                <p style="margin: 0; color: var(--m-text-muted); font-size: 14px;">25개 항목을 입력하여 커스텀 빙고판 생성</p>
            </a>
            
            <a href="/bingo-game-maker/list" style="
                display: block;
                padding: 24px;
                background: var(--m-surface);
                border-radius: var(--m-radius-lg);
                box-shadow: var(--m-shadow);
                text-decoration: none;
                color: var(--m-text);
                transition: transform 0.2s;
            ">
                <div style="font-size: 32px; margin-bottom: 8px;">📋</div>
                <h3 style="margin: 0 0 8px 0;">내 빙고판 목록</h3>
                <p style="margin: 0; color: var(--m-text-muted); font-size: 14px;">만든 빙고판 관리 & 공유 링크 복사</p>
            </a>
        </div>
    </main>
    <?php require G5_THEME_PATH.'/modern/_footer.inc.php'; ?>
</div>
<?php include_once('./tail.sub.php'); ?>```

3. 카드 hover 효과 CSS 추가 (인라인 스타일에 추가):
```css
a:hover {
    transform: translateY(-4px);
}
```

**확인 사항:**
- `/bingo-game-maker` URL로 접속하여 메인 페이지 렌더링 확인
- modern shell의 nav/footer가 정상 표시되는지 확인
- 다크모드 토글 시 색상이 자동 전환되는지 확인
- 두 개의 메뉴 카드가 정상 표시되는지 확인

빙고판 생성 페이지를 만듭니다.

**작업 내용:**

1. `app/modules/bingo-game-maker/create/index.php` 파일 생성
2. 다음 기능 구현:

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

// POST 요청 처리 (빙고판 생성)
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $title = trim($_POST['title'] ?? '');
    $items = [];
    
    // 25개 항목 수집
    for ($i = 1; $i <= 25; $i++) {
        $item = trim($_POST["item_{$i}"] ?? '');
        if ($item === '') {
            die('모든 항목을 입력해주세요.');
        }
        $items[] = $item;
    }
    
    // 셔플 옵션 확인
    $shuffle = isset($_POST['shuffle']);
    if ($shuffle) {
        shuffle($items);
    }
    
    // 고유 ID 생성 (8자리 랜덤)
    $id = substr(str_shuffle('abcdefghijklmnopqrstuvwxyz0123456789'), 0, 8);
    
    // DB 저장
    @mkdir(G5_DATA_PATH.'/modules', 0707, true);
    $db = new PDO('sqlite:'.G5_DATA_PATH.'/modules/bingo-game-maker.sqlite');
    $db->exec("CREATE TABLE IF NOT EXISTS bingo_boards (
        id TEXT PRIMARY KEY,
        title TEXT NOT NULL,
        items TEXT NOT NULL,
        created_at TEXT NOT NULL,
        play_count INTEGER DEFAULT 0
    )");
    
    $stmt = $db->prepare("INSERT INTO bingo_boards (id, title, items, created_at) VALUES (?, ?, ?, ?)");
    $stmt->execute([$id, $title, json_encode($items, JSON_UNESCAPED_UNICODE), date('Y-m-d H:i:s')]);
    
    // 플레이 페이지로 리다이렉트
    header("Location: /bingo-game-maker/play/{$id}");
    exit;
}

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>✨ 새 빙고판 만들기</h1>
        <p style="color: var(--m-text-muted); margin-bottom: 32px;">25개 항목을 입력하여 나만의 빙고판을 만드세요!</p>
        
        <form method="POST" style="max-width: 700px;">
            <div style="margin-bottom: 24px;">
                <label style="display: block; margin-bottom: 8px; font-weight: 600;">빙고판 제목</label>
                <input type="text" name="title" required placeholder="예: 개발자 빙고" style="
                    width: 100%;
                    padding: 12px;
                    border: 1px solid #ddd;
                    border-radius: 8px;
                    font-size: 16px;
                    background: var(--m-surface);
                    color: var(--m-text);
                ">
            </div>
            
            <div style="margin-bottom: 24px;">
                <label style="display: block; margin-bottom: 12px; font-weight: 600;">빙고 항목 (25개)</label>
                <div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px;">
                    <?php for ($i = 1; $i <= 25; $i++): ?>
                    <input type="text" name="item_<?php echo $i; ?>" required placeholder="항목 <?php echo $i; ?>" style="
                        padding: 10px;
                        border: 1px solid #ddd;
                        border-radius: 6px;
                        font-size: 14px;
                        background: var(--m-surface);
                        color: var(--m-text);
                    ">
                    <?php endfor; ?>
                </div>
            </div>
            
            <div style="margin-bottom: 24px;">
                <label style="display: flex; align-items: center; gap: 8px; cursor: pointer;">
                    <input type="checkbox" name="shuffle" style="width: 18px; height: 18px;">
                    <span>항목 순서 랜덤 섞기</span>
                </label>
            </div>
            
            <button type="submit" style="
                padding: 14px 32px;
                background: #4F46E5;
                color: white;
                border: none;
                border-radius: 8px;
                font-size: 16px;
                font-weight: 600;
                cursor: pointer;
            ">빙고판 생성하기</button>
        </form>
    </main>
    <?php require G5_THEME_PATH.'/modern/_footer.inc.php'; ?>
</div>
<?php include_once('./tail.sub.php'); ?>```

**확인 사항:**
- `/bingo-game-maker/create` URL로 접속하여 폼 렌더링 확인
- 25개 입력 필드가 그리드 레이아웃으로 표시되는지 확인
- 폼 제출 시 DB에 저장되고 플레이 페이지로 리다이렉트되는지 확인

빙고 플레이 페이지를 만듭니다. 동적 segment를 활용하여 빙고판 ID를 받습니다.

**작업 내용:**

1. `app/modules/bingo-game-maker/play/[id]/index.php` 파일 생성
2. 다음 기능 구현:

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

// URL에서 빙고판 ID 가져오기 (g5se가 자동으로 $_GET['id']에 주입)
$id = $_GET['id'] ?? '';

if ($id === '') {
    die('잘못된 접근입니다.');
}

// DB에서 빙고판 조회
$db = new PDO('sqlite:'.G5_DATA_PATH.'/modules/bingo-game-maker.sqlite');
$stmt = $db->prepare("SELECT * FROM bingo_boards WHERE id = ?");
$stmt->execute([$id]);
$board = $stmt->fetch(PDO::FETCH_ASSOC);

if (!$board) {
    die('빙고판을 찾을 수 없습니다.');
}

// 플레이 횟수 증가
$db->prepare("UPDATE bingo_boards SET play_count = play_count + 1 WHERE id = ?")->execute([$id]);

$title = htmlspecialchars($board['title']);
$items = json_decode($board['items'], true);

require_once(G5_THEME_PATH.'/modern/_head.inc.php');
include_once('./head.sub.php');
?>
<style>
.bingo-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
    max-width: 600px;
    margin: 0 auto;
}

.bingo-cell {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--m-surface);
    border-radius: 8px;
    box-shadow: var(--m-shadow);
    cursor: pointer;
    font-size: 14px;
    text-align: center;
    padding: 8px;
    transition: all 0.3s;
    position: relative;
}

.bingo-cell:hover {
    transform: scale(1.05);
}

.bingo-cell.checked {
    background: #4F46E5;
    color: white;
}

.bingo-cell.checked::after {
    content: '✓';
    position: absolute;
    top: 4px;
    right: 8px;
    font-size: 20px;
}

@media (max-width: 600px) {
    .bingo-cell {
        font-size: 12px;
        padding: 4px;
    }
}
</style>

<div class="m-shell">
    <?php require G5_THEME_PATH.'/modern/_nav.inc.php'; ?>
    <main class="m-container" style="padding: 32px 20px 48px;">
        <div style="text-align: center; margin-bottom: 32px;">
            <h1><?php echo $title; ?></h1>
            <p style="color: var(--m-text-muted);">칸을 클릭하여 체크하세요!</p>
            <div id="bingoCount" style="font-size: 24px; font-weight: 700; color: #4F46E5; margin-top: 16px;">빙고: 0줄</div>
        </div>
        
        <div class="bingo-grid" id="bingoGrid">
            <?php foreach ($items as $index => $item): ?>
            <div class="bingo-cell" data-index="<?php echo $index; ?>"><?php echo htmlspecialchars($item); ?></div>
            <?php endforeach; ?>
        </div>
        
        <div style="text-align: center; margin-top: 32px;">
            <button id="resetBtn" style="
                padding: 12px 24px;
                background: var(--m-surface);
                color: var(--m-text);
                border: 1px solid #ddd;
                border-radius: 8px;
                cursor: pointer;
            ">초기화</button>
        </div>
    </main>
    <?php require G5_THEME_PATH.'/modern/_footer.inc.php'; ?>
</div>

<script>
const grid = document.getElementById('bingoGrid');
const cells = grid.querySelectorAll('.bingo-cell');
const bingoCount = document.getElementById('bingoCount');
const resetBtn = document.getElementById('resetBtn');

let checkedCells = new Set();

cells.forEach(cell => {
    cell.addEventListener('click', () => {
        const index = parseInt(cell.dataset.index);
        if (checkedCells.has(index)) {
            checkedCells.delete(index);
            cell.classList.remove('checked');
        } else {
            checkedCells.add(index);
            cell.classList.add('checked');
        }
        updateBingoCount();
    });
});

resetBtn.addEventListener('click', () => {
    checkedCells.clear();
    cells.forEach(cell => cell.classList.remove('checked'));
    updateBingoCount();
});

function updateBingoCount() {
    const lines = [];
    
    // 가로 체크
    for (let i = 0; i < 5; i++) {
        const row = [];
        for (let j = 0; j < 5; j++) {
            row.push(i * 5 + j);
        }
        if (row.every(idx => checkedCells.has(idx))) lines.push(row);
    }
    
    // 세로 체크
    for (let i = 0; i < 5; i++) {
        const col = [];
        for (let j = 0; j < 5; j++) {
            col.push(j * 5 + i);
        }
        if (col.every(idx => checkedCells.has(idx))) lines.push(col);
    }
    
    // 대각선 체크 (\)
    const diag1 = [0, 6, 12, 18, 24];
    if (diag1.every(idx => checkedCells.has(idx))) lines.push(diag1);
    
    // 대각선 체크 (/)
    const diag2 = [4, 8, 12, 16, 20];
    if (diag2.every(idx => checkedCells.has(idx))) lines.push(diag2);
    
    const count = lines.length;
    bingoCount.textContent = `빙고: ${count}줄`;
    
    if (count > 0 && count >= 5) {
        setTimeout(() => {
            alert(`🎉 축하합니다! ${count}줄 빙고 완성!`);
        }, 100);
    }
}
</script>

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

**확인 사항:**
- `/bingo-game-maker/play/{생성된ID}` URL로 접속하여 빙고판 렌더링 확인
- 5×5 그리드가 정상 표시되는지 확인
- 칸 클릭 시 체크 상태 토글이 작동하는지 확인
- 빙고 줄 수가 실시간으로 업데이트되는지 확인

내 빙고판 목록 페이지를 만듭니다.

**작업 내용:**

1. `app/modules/bingo-game-maker/list/index.php` 파일 생성
2. 다음 기능 구현:

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

// 삭제 요청 처리
if (isset($_GET['delete'])) {
    $id = $_GET['delete'];
    $db = new PDO('sqlite:'.G5_DATA_PATH.'/modules/bingo-game-maker.sqlite');
    $db->prepare("DELETE FROM bingo_boards WHERE id = ?")->execute([$id]);
    header('Location: /bingo-game-maker/list');
    exit;
}

// 빙고판 목록 조회
$db = new PDO('sqlite:'.G5_DATA_PATH.'/modules/bingo-game-maker.sqlite');
$stmt = $db->query("SELECT * FROM bingo_boards ORDER BY created_at DESC");
$boards = $stmt->fetchAll(PDO::FETCH_ASSOC);

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>📋 내 빙고판 목록</h1>
        <p style="color: var(--m-text-muted); margin-bottom: 32px;">만든 빙고판을 관리하고 공유하세요!</p>
        
        <?php if (count($boards) === 0): ?>
        <div style="text-align: center; padding: 48px; background: var(--m-surface); border-radius: var(--m-radius-lg);">
            <p style="color: var(--m-text-muted);">아직 만든 빙고판이 없습니다.</p>
            <a href="/bingo-game-maker/create" style="
                display: inline-block;
                margin-top: 16px;
                padding: 12px 24px;
                background: #4F46E5;
                color: white;
                text-decoration: none;
                border-radius: 8px;
            ">첫 빙고판 만들기</a>
        </div>
        <?php else: ?>
        <div style="display: grid; gap: 16px;">
            <?php foreach ($boards as $board): ?>
            <div style="
                padding: 20px;
                background: var(--m-surface);
                border-radius: var(--m-radius-lg);
                box-shadow: var(--m-shadow);
            ">
                <h3 style="margin: 0 0 8px 0;"><?php echo htmlspecialchars($board['title']); ?></h3>
                <p style="color: var(--m-text-muted); font-size: 14px; margin-bottom: 16px;">
                    생성: <?php echo date('Y-m-d H:i', strtotime($board['created_at'])); ?> | 
                    플레이 횟수: <?php echo $board['play_count']; ?>회
                </p>
                
                <div style="display: flex; gap: 8px; flex-wrap: wrap;">
                    <a href="/bingo-game-maker/play/<?php echo $board['id']; ?>" style="
                        padding: 8px 16px;
                        background: #4F46E5;
                        color: white;
                        text-decoration: none;
                        border-radius: 6px;
                        font-size: 14px;
                    ">플레이</a>
                    
                    <button onclick="copyUrl('<?php echo $board['id']; ?>')" style="
                        padding: 8px 16px;
                        background: var(--m-surface);
                        color: var(--m-text);
                        border: 1px solid #ddd;
                        border-radius: 6px;
                        font-size: 14px;
                        cursor: pointer;
                    ">URL 복사</button>
                    
                    <a href="?delete=<?php echo $board['id']; ?>" onclick="return confirm('정말 삭제하시겠습니까?')" style="
                        padding: 8px 16px;
                        background: #EF4444;
                        color: white;
                        text-decoration: none;
                        border-radius: 6px;
                        font-size: 14px;
                    ">삭제</a>
                </div>
            </div>
            <?php endforeach; ?>
        </div>
        <?php endif; ?>
    </main>
    <?php require G5_THEME_PATH.'/modern/_footer.inc.php'; ?>
</div>

<script>
function copyUrl(id) {
    const url = window.location.origin + '/bingo-game-maker/play/' + id;
    navigator.clipboard.writeText(url).then(() => {
        alert('URL이 클립보드에 복사되었습니다!');
    });
}
</script>

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

**확인 사항:**
- `/bingo-game-maker/list` URL로 접속하여 목록 렌더링 확인
- 빙고판이 없을 때 "첫 빙고판 만들기" 버튼이 표시되는지 확인
- 빙고판이 있을 때 제목/생성일/플레이 횟수가 표시되는지 확인
- URL 복사 버튼 클릭 시 클립보드에 복사되는지 확인
- 삭제 버튼 클릭 시 확인 대화상자가 뜨고 삭제되는지 확인

빙고 완성 시 축하 효과를 개선하고, 공유 기능을 추가합니다.

**작업 내용:**

1. `app/modules/bingo-game-maker/play/[id]/index.php` 파일 수정
2. 빙고 완성 시 모달 팝업 추가:

기존 `</style>` 태그 바로 위에 다음 CSS 추가:
```css
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 9999;
    align-items: center;
    justify-content: center;
}

.modal.show {
    display: flex;
}

.modal-content {
    background: var(--m-surface);
    padding: 40px;
    border-radius: 16px;
    text-align: center;
    max-width: 400px;
    animation: modalPop 0.3s ease-out;
}

@keyframes modalPop {
    from {
        transform: scale(0.8);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}
```

기존 `<script>` 태그 바로 위에 다음 HTML 추가:
```html
<div id="bingoModal" class="modal">
    <div class="modal-content">
        <div style="font-size: 64px; margin-bottom: 16px;">🎉</div>
        <h2 id="modalTitle" style="margin: 0 0 16px 0;">빙고!</h2>
        <p id="modalText" style="color: var(--m-text-muted);"></p>
        <button onclick="closeModal()" style="
            margin-top: 24px;
            padding: 12px 32px;
            background: #4F46E5;
            color: white;
            border: none;
            border-radius: 8px;
            cursor: pointer;
        ">계속하기</button>
    </div>
</div>
```

기존 `updateBingoCount()` 함수 마지막 부분을 다음으로 교체:
```javascript
const count = lines.length;
bingoCount.textContent = `빙고: ${count}줄`;

if (count > 0 && count >= 5) {
    setTimeout(() => {
        showModal(count);
    }, 100);
}
```

`</script>` 태그 바로 위에 다음 함수 추가:
```javascript
function showModal(count) {
    const modal = document.getElementById('bingoModal');
    const modalText = document.getElementById('modalText');
    modalText.textContent = `${count}줄 빙고를 완성했습니다!`;
    modal.classList.add('show');
}

function closeModal() {
    const modal = document.getElementById('bingoModal');
    modal.classList.remove('show');
}
```

3. 공유 버튼 추가 (초기화 버튼 옆에):

기존 초기화 버튼 아래에 다음 HTML 추가:
```html
<button id="shareBtn" style="
    margin-left: 8px;
    padding: 12px 24px;
    background: #4F46E5;
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
">공유하기</button>
```

기존 `</script>` 태그 바로 위에 다음 이벤트 리스너 추가:
```javascript
document.getElementById('shareBtn').addEventListener('click', () => {
    const url = window.location.href;
    if (navigator.share) {
        navigator.share({
            title: '<?php echo $title; ?>',
            text: '이 빙고 게임을 함께 플레이하세요!',
            url: url
        });
    } else {
        navigator.clipboard.writeText(url).then(() => {
            alert('URL이 클립보드에 복사되었습니다!');
        });
    }
});
```

**확인 사항:**
- 빙고 5줄 이상 완성 시 모달 팝업이 표시되는지 확인
- 모달의 애니메이션 효과가 부드럽게 작동하는지 확인
- 공유 버튼 클릭 시 Web Share API 또는 클립보드 복사가 작동하는지 확인

최종 개선: 반응형 디자인 강화 및 사용자 경험 개선

**작업 내용:**

1. 모바일 반응형 개선 - `app/modules/bingo-game-maker/play/[id]/index.php` 파일 수정

기존 `@media (max-width: 600px)` 블록을 다음으로 교체:
```css
@media (max-width: 600px) {
    .bingo-cell {
        font-size: 11px;
        padding: 4px;
    }
    
    .bingo-grid {
        gap: 4px;
    }
    
    h1 {
        font-size: 24px;
    }
    
    #bingoCount {
        font-size: 20px;
    }
}
```

2. 로딩 상태 추가 - `app/modules/bingo-game-maker/create/index.php` 파일 수정

기존 제출 버튼을 다음으로 교체:
```html
<button type="submit" id="submitBtn" style="
    padding: 14px 32px;
    background: #4F46E5;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
">빙고판 생성하기</button>
```

`</form>` 태그 바로 아래에 다음 스크립트 추가:
```html
<script>
document.querySelector('form').addEventListener('submit', function() {
    const btn = document.getElementById('submitBtn');
    btn.textContent = '생성 중...';
    btn.disabled = true;
    btn.style.opacity = '0.6';
});
</script>
```

3. 빈 항목 방지 개선 - 동일 파일에서 폼 제출 전 검증 추가

위 스크립트를 다음으로 교체:
```html
<script>
document.querySelector('form').addEventListener('submit', function(e) {
    const inputs = document.querySelectorAll('input[name^="item_"]');
    let emptyCount = 0;
    
    inputs.forEach(input => {
        if (input.value.trim() === '') {
            emptyCount++;
            input.style.borderColor = '#EF4444';
        } else {
            input.style.borderColor = '#ddd';
        }
    });
    
    if (emptyCount > 0) {
        e.preventDefault();
        alert(`${emptyCount}개의 항목이 비어있습니다. 모든 항목을 입력해주세요.`);
        return;
    }
    
    const btn = document.getElementById('submitBtn');
    btn.textContent = '생성 중...';
    btn.disabled = true;
    btn.style.opacity = '0.6';
});
</script>
```

4. 메인 페이지에 최근 생성된 빙고판 미리보기 추가 - `app/modules/bingo-game-maker/index.php` 파일 수정

기존 `<!-- 여기에 메뉴 버튼들 추가 -->` 주석 위에 다음 PHP 코드 추가:
```php
<?php
// 최근 빙고판 3개 조회
$db = new PDO('sqlite:'.G5_DATA_PATH.'/modules/bingo-game-maker.sqlite');
$db->exec("CREATE TABLE IF NOT EXISTS bingo_boards (
    id TEXT PRIMARY KEY,
    title TEXT NOT NULL,
    items TEXT NOT NULL,
    created_at TEXT NOT NULL,
    play_count INTEGER DEFAULT 0
)");
$stmt = $db->query("SELECT * FROM bingo_boards ORDER BY created_at DESC LIMIT 3");
$recentBoards = $stmt->fetchAll(PDO::FETCH_ASSOC);
?>

<?php if (count($recentBoards) > 0): ?>
<div style="margin-bottom: 32px;">
    <h2 style="margin-bottom: 16px;">🔥 최근 만들어진 빙고판</h2>
    <div style="display: grid; gap: 12px;">
        <?php foreach ($recentBoards as $board): ?>
        <a href="/bingo-game-maker/play/<?php echo $board['id']; ?>" style="
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 16px;
            background: var(--m-surface);
            border-radius: 8px;
            box-shadow: var(--m-shadow);
            text-decoration: none;
            color: var(--m-text);
        ">
            <div>
                <div style="font-weight: 600;"><?php echo htmlspecialchars($board['title']); ?></div>
                <div style="font-size: 12px; color: var(--m-text-muted);">플레이 <?php echo $board['play_count']; ?>회</div>
            </div>
            <div style="color: var(--m-text-muted);">→</div>
        </a>
        <?php endforeach; ?>
    </div>
</div>
<?php endif; ?>
```

**확인 사항:**
- 모바일 화면에서 빙고 그리드가 적절한 크기로 표시되는지 확인
- 빙고판 생성 시 빈 항목이 있으면 빨간 테두리와 경고 메시지가 표시되는지 확인
- 메인 페이지에 최근 만들어진 빙고판 3개가 표시되는지 확인
- 전체적인 사용자 경험이 부드럽게 작동하는지 확인