🎯 g5se 오늘의 영어 문장 만들기 - 단어 카드 조합 게임

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

이제 `app/modules/sentence-builder/index.php` 파일을 생성하고, 다음 기능을 구현하세요:

1. **modern shell 골격 적용**:
   - `_common.php` 인클루드 (상대경로 `./_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;">`로 본문 영역
   - `<?php require G5_THEME_PATH.'/modern/_footer.inc.php'; ?>`
   - `<?php include_once('./tail.sub.php'); ?>`

2. **SQLite DB 초기화**:
   - `G5_DATA_PATH.'/modules'` 디렉터리가 없으면 `@mkdir(G5_DATA_PATH.'/modules', 0707, true);`로 생성
   - `new PDO('sqlite:'.G5_DATA_PATH.'/modules/sentence-builder.sqlite')`로 연결
   - 테이블 스키마 (첫 접속 시 자동 생성):
     ```sql
     CREATE TABLE IF NOT EXISTS sentences (
       id INTEGER PRIMARY KEY AUTOINCREMENT,
       answer TEXT NOT NULL,
       difficulty TEXT DEFAULT 'easy',
       created_at DATETIME DEFAULT CURRENT_TIMESTAMP
     )
     ```
   - 초기 샘플 데이터 3개 INSERT (이미 있으면 스킵):
     - "The cat is sleeping" (easy)
     - "She likes reading books" (easy)
     - "We are learning English" (easy)

3. **페이지 타이틀 & 설명**:
   - 헤더: "🎯 오늘의 영어 문장 만들기"
   - 부제: "단어 카드를 올바른 순서로 배열하여 문장을 완성하세요!"

4. **게임 영역 HTML 구조**:
   - 문제 번호 표시 영역 (`#problem-info`)
   - 단어 카드 풀 영역 (`#word-pool`) — 드래그 가능한 카드들이 들어갈 곳
   - 정답 조립 영역 (`#answer-zone`) — 드롭존으로 사용자가 카드를 배치하는 곳
   - 버튼 그룹:
     - "정답 확인" 버튼 (`#check-btn`)
     - "다시 도전" 버튼 (`#reset-btn`)
     - "다음 문제" 버튼 (`#next-btn`)
   - 피드백 메시지 영역 (`#feedback`) — 정답/오답 결과 표시

5. **스타일링 (인라인 `<style>` 블록)**:
   - 디자인 토큰 사용:
     - 배경: `background: var(--m-surface);`
     - 텍스트: `color: var(--m-text);`
     - 그림자: `box-shadow: var(--m-shadow);`
     - 라운드: `border-radius: var(--m-radius-lg);`
   - 단어 카드 스타일:
     - 인라인 블록, 패딩, 커서 포인터
     - 드래그 시 반투명 효과
   - 정답 조립 영역:
     - 최소 높이 80px, 점선 테두리
     - 카드가 없을 때 "여기에 단어를 드래그하세요" placeholder 표시
   - 버튼:
     - primary 색상 배경, 흰색 텍스트
     - hover 시 약간 어두워지는 효과

**출력**: modern shell이 적용된 페이지가 `/sentence-builder` URL로 접근 가능하고, DB 테이블이 자동 생성되며 샘플 데이터 3개가 삽입된 상태여야 합니다. 아직 JS 로직은 없으므로 카드는 정적으로만 표시됩니다.

이제 **랜덤 문제 출제 로직**과 **단어 카드 생성 JS**를 구현하세요:

1. **PHP 로직 (페이지 상단)**:
   - DB에서 `SELECT * FROM sentences ORDER BY RANDOM() LIMIT 1`로 랜덤 문장 1개 가져오기
   - 정답 문장을 공백 기준으로 `explode(' ', $answer)`하여 단어 배열 생성
   - 단어 배열을 `shuffle()`로 섞기 (무작위 순서)
   - 섞인 단어 배열을 JSON으로 인코딩하여 JS 변수에 전달:
     ```php
     <script>
     const shuffledWords = <?= json_encode($shuffled_words) ?>;
     const correctAnswer = <?= json_encode($answer) ?>;
     const problemId = <?= $problem['id'] ?>;
     </script>
     ```

2. **JS 로직 (인라인 `<script>` 블록)**:
   - 페이지 로드 시 `shuffledWords` 배열을 순회하며 각 단어를 `<div class="word-card" draggable="true">` 요소로 생성
   - 생성된 카드를 `#word-pool`에 append
   - 각 카드에 `data-word` 속성으로 단어 저장
   - 문제 정보 표시: `#problem-info`에 "문제 #${problemId}" 출력

3. **드래그 앤 드롭 이벤트 리스너**:
   - `dragstart`: 드래그 시작 시 카드 데이터를 `dataTransfer`에 저장
   - `dragover`: 드롭존 위에서 `preventDefault()`로 드롭 허용
   - `drop`: 드롭 시 카드를 `#answer-zone`으로 이동
   - 카드를 `#answer-zone`에서 다시 `#word-pool`로 되돌리기도 가능하도록 양방향 드래그 지원

4. **카드 배치 시각 피드백**:
   - 드래그 중인 카드는 `opacity: 0.5` 적용
   - 드롭존에 카드가 hover될 때 배경색 살짝 변경

**출력**: 페이지 로드 시 랜덤 문제가 출제되고, 단어 카드들이 섞인 순서로 표시됩니다. 카드를 드래그하여 정답 영역으로 이동할 수 있으며, 순서를 자유롭게 조정할 수 있습니다.

이제 **정답 확인 로직**과 **피드백 시스템**을 구현하세요:

1. **정답 확인 버튼 (`#check-btn`) 클릭 이벤트**:
   - `#answer-zone` 안의 모든 `.word-card` 요소를 순서대로 읽어서 배열로 만들기
   - 배열을 공백으로 join하여 사용자가 만든 문장 생성
   - `correctAnswer`와 비교:
     - 일치하면: `#feedback`에 "✅ 정답입니다!" 초록색 메시지 표시
     - 불일치하면: `#feedback`에 "❌ 다시 시도해보세요. 정답: {correctAnswer}" 빨간색 메시지 표시

2. **다시 도전 버튼 (`#reset-btn`) 클릭 이벤트**:
   - `#answer-zone`의 모든 카드를 다시 `#word-pool`로 이동
   - `#feedback` 메시지 초기화
   - 카드 순서를 다시 섞어서 재배치 (선택 사항)

3. **다음 문제 버튼 (`#next-btn`) 클릭 이벤트**:
   - 페이지를 새로고침하여 새로운 랜덤 문제 로드
   - 또는 AJAX로 새 문제 데이터를 가져와서 동적으로 교체 (고급 옵션)

4. **피드백 메시지 스타일**:
   - 정답 시: 초록색 배경, 굵은 글씨, 체크 아이콘
   - 오답 시: 빨간색 배경, 정답 힌트 표시
   - 애니메이션: fade-in 효과로 부드럽게 나타나기

**출력**: 사용자가 카드를 배열하고 "정답 확인" 버튼을 누르면 정답 여부가 판정되어 피드백 메시지가 표시됩니다. "다시 도전"으로 리셋하거나 "다음 문제"로 새 문제를 불러올 수 있습니다.