2.지뢰 찾기

HTML, CSS, JavaScript만 사용해서 단일 HTML 파일로 지뢰찾기 게임을 만들어줘. 모바일과 데스크톱 모두 지원하는 반응형으로 만들어줘.

1. 프로그램 개요
게임 이름은 "💣 바이브 지뢰찾기"이고, 부제는 "Vibe Coding Minesweeper"야. 클래식 지뢰찾기 규칙을 따르되, 어두운 네온 느낌의 세련된 UI로 만들어줘. 외부 라이브러리 없이 HTML, CSS, JS만 써서 하나의 HTML 파일로 만들어줘. 구글 폰트에서 'Jua' 폰트를 불러와서 전체 게임에 적용해줘.

2. 기능
2-1. 난이도 선택
화면 상단에 난이도 선택 버튼 3개를 가로로 배치해줘.

😊 초급 9×9 (지뢰 10개)
🤔 중급 16×16 (지뢰 40개)
😈 고급 16×30 (지뢰 99개) 선택된 버튼은 민트색 테두리와 발광 배경으로 활성화 표시해줘. 버튼 누르면 즉시 해당 난이도로 새 게임이 시작돼.
2-2. 첫 클릭 안전 보장
지뢰 배치는 첫 클릭 이후에 해줘. 첫 클릭한 셀과 그 주변 8칸에는 지뢰가 배치되지 않도록 해줘. 보드가 너무 작아서 안전 구역 확보가 안 되면 최소한 첫 클릭 셀만이라도 제외해줘.

2-3. 셀 열기 (파기)
클릭하면 셀이 열려. 빈 칸(주변 지뢰 0개)이면 BFS 방식으로 주변 빈 칸들을 자동으로 연쇄 오픈해줘. 숫자 칸은 주변 지뢰 개수를 1~8까지 각각 다른 색상으로 표시해줘. 지뢰를 밟으면 게임 오버야.

2-4. 깃발 / 물음표 모드
우클릭 또는 깃발 모드 버튼으로 깃발(🚩)을 꽂을 수 있어. 깃발 상태에서 다시 우클릭하면 물음표(❓)로 바뀌고, 한 번 더 누르면 원래 상태로 돌아와. 3단계 순환이야: 빈칸 → 깃발 → 물음표 → 빈칸.

2-5. 깃발 모드 토글
하단 액션 버튼 중 🚩 깃발 버튼을 누르면 깃발 모드가 ON/OFF 돼. 깃발 모드일 때는 셀 클릭이 깃발 꽂기로 동작해. 현재 모드가 "⛏ 파기"인지 "🚩 깃발"인지 보드 위에 배지로 표시해줘.

2-6. 주변 열기 (Chord)
이미 열린 숫자 셀을 클릭하거나 가운데 마우스 버튼(휠 클릭)을 누르면, 주변 깃발 수가 해당 숫자와 일치할 때 나머지 미공개 셀을 자동으로 열어줘.

2-7. 힌트 기능
힌트 버튼(💡)을 누르면 안전한 미공개 셀 하나를 랜덤으로 열어줘. 총 3회 제한이고, 사용할 때마다 점수 20점 차감해줘. 남은 힌트 횟수를 버튼 옆에 표시해줘. 첫 클릭 전에는 "먼저 칸을 하나 클릭하세요!" 토스트를 띄워줘.

2-8. 타이머
첫 클릭 시점부터 1초 단위로 타이머가 돌아가고, MM:SS 형식으로 표시해줘. 게임 종료(승리/패배) 시 타이머 멈춰줘.

2-9. 지뢰 카운터
전체 지뢰 수에서 깃발 꽂은 수를 뺀 나머지를 💣 옆에 표시해줘.

2-10. 점수 시스템
빈 칸 열면 1점, 숫자 칸 열면 (숫자 × 2)점을 줘. 힌트 사용 시 20점 감점(최소 0점). ⭐ 아이콘 옆에 실시간 표시해줘.

2-11. 진행률 바
열린 안전 셀 수 / 전체 안전 셀 수를 퍼센트와 프로그레스 바로 보여줘. 바는 민트에서 초록 그라데이션으로 채워지게 해줘.

2-12. 게임 오버 처리
지뢰 밟으면 모든 지뢰를 공개하고, 잘못 꽂은 깃발에는 ❌ 표시해줘. 밟은 지뢰 셀은 빨간 배경에 폭발 애니메이션(스케일 확대 후 복귀)을 넣어줘. 0.6초 뒤 모달 팝업으로 "💥 게임 오버" 표시하면서 난이도, 시간, 점수, 진행률 통계를 보여줘.

2-13. 승리 처리
모든 안전 셀을 열면 승리야. 남은 지뢰에 자동으로 깃발 꽂아줘. 컨페티(색종이) 애니메이션을 화면 전체에 뿌려줘. 모달로 "🎉 축하합니다!" 표시하면서 난이도, 시간, 점수, 힌트 사용 횟수를 보여줘.

2-14. 최고 기록 저장
난이도별로 최단 시간 기록을 localStorage에 저장해줘. 기존 기록보다 빠르면 갱신하고 "🏆 새로운 최고 기록!" 토스트를 띄워줘. "🏆 최고 기록 보기" details/summary 토글로 기록 카드를 보여줘.

2-15. 새 게임 버튼
🔄 새 게임 버튼 누르면 현재 난이도로 즉시 리셋해줘. 키보드 R키로도 가능하게 해줘.

2-16. 키보드 단축키 (데스크톱)
F: 깃발 모드 토글
H: 힌트
R: 새 게임 보드 아래에 단축키 안내 텍스트를 넣어줘. 터치 기기에서는 이 안내를 숨겨줘.
2-17. 토스트 알림
각종 이벤트(새 게임, 모드 전환, 힌트 사용, 기록 갱신 등)마다 화면 상단 중앙에 토스트 메시지를 띄워줘. 슬라이드인 후 2.5초 뒤 페이드아웃, 3초 후 DOM에서 제거해줘.

3. 디자인
3-1. 전체 테마
아주 어두운 배경(#0a0a0a)에 민트색(#00d4aa) 액센트를 쓰는 다크 네온 테마로 해줘. 표면 색상은 #141414, #1e1e1e, #2a2a2a 계열로 단계를 나눠줘.

3-2. 배경 파티클
화면 뒤에 작은 민트색 원형 파티클 15개가 아래에서 위로 천천히 떠오르는 애니메이션을 넣어줘. 크기 1~4px, 속도 10~25초, 투명도 0.3 정도로 은은하게 해줘. pointer-events: none으로 클릭 방해 안 되게 해줘.

3-3. 헤더
제목 "💣 바이브 지뢰찾기"는 흰색→민트색 그라데이션 텍스트로, background-clip: text 기법을 써줘. 글자 크기는 clamp로 반응형 처리해줘.

3-4. 보드 스타일
보드는 3px 민트색 테두리에 둥근 모서리(10px), 민트색 그림자(box-shadow glow) 효과를 넣어줘. 각 셀 사이 0.5px 테두리가 있고, 미공개 셀은 #1e1e1e, 공개된 셀은 살짝 더 어두운 배경으로 해줘. 마우스 오버 시 민트색 발광 배경 + 테두리 변경 효과를 넣고, 클릭(active) 시 scale(0.92)로 살짝 눌리는 느낌을 줘.

3-5. 셀 크기 자동 조절
화면 너비와 높이를 계산해서 셀 크기를 자동 조절해줘. 최소 22px, 최대 48px. 화면 리사이즈 시에도 다시 계산되게 해줘. CSS 변수(--cell-size)로 관리해줘.

3-6. 숫자 색상
1~8 각각 다른 색상으로 해줘. 1은 파란색(#6ab7ff), 2는 초록(#00e676), 3은 빨강(#ff4466), 4는 보라(#9c27b0), 5는 주황(#ff9800), 6은 시안(#00bcd4), 7은 핑크(#e040fb), 8은 회색(#888).

3-7. 애니메이션
셀 열릴 때 scale 0.5→1.08→1로 튀어나오는 revealPop 애니메이션(0.25초)을 넣어줘. 폭발 셀은 scale 1→1.3→0.9→1로 흔들리는 explode 애니메이션(0.5초)을 넣어줘.

3-8. 컨페티
승리 시 80개의 색종이 조각이 화면 위에서 아래로 떨어지는 애니메이션을 넣어줘. 색상은 민트, 빨강, 파랑, 노랑, 핑크, 초록, 흰색 랜덤. 원형과 사각형 랜덤. 2~4초에 걸쳐 떨어지면서 720도 회전하고, 5초 후 DOM에서 제거해줘.

3-9. 모달
반투명 어두운 오버레이(backdrop-filter: blur)에 중앙 카드형 모달을 띄워줘. 모달은 scale 0.85→1 팝업 애니메이션으로 등장하고, 민트색 테두리와 그림자 효과를 넣어줘. "새 게임 시작" 버튼은 민트 그라데이션 둥근 버튼으로 해줘.

3-10. 액션 버튼
보드 아래에 4개 버튼(깃발, 주변열기, 힌트, 새 게임)을 4열 그리드로 배치해줘. 각 버튼은 아이콘(이모지) + 텍스트 세로 배치. 어두운 배경에 테두리, 호버 시 민트색 발광. 깃발 모드 활성 시 노란색 테두리로 바뀌게 해줘. 새 게임 버튼은 호버 시 빨간색 계열로 표시해줘.

3-11. 반응형 처리
400px 이하: 셀 크기, 버튼 패딩 축소
375px 이하: 셀 더 축소, 헤더 패딩 줄이기
가로모드(max-height 500px): 헤더 최소화, 부제 숨김, 셀 크기 뷰포트 높이 기준으로 축소
전체 최대 너비 520px로 중앙 정렬
safe-area-inset-bottom 적용해서 노치 기기 대응해줘
4. 기술
4-1. 구조
단일 HTML 파일에 style 태그와 script 태그를 모두 포함해줘. 외부 파일 없이 구글 폰트 CDN만 사용해.

4-2. CSS
CSS 변수(:root)로 색상, 셀 크기 등을 관리해줘. clamp()로 폰트 사이즈 반응형 처리하고, CSS Grid로 보드를 구성해줘.

4-3. JavaScript 상태 관리
전역 변수로 게임 상태를 관리해줘. grid 배열은 2D로 각 셀마다 { mine, revealed, flagged, question, adjacentMines } 객체를 가져. 주요 상태 변수: difficulty, flagMode, gameStarted, gameOver, gameWon, firstClick, seconds, score, hintsLeft, flagsPlaced, cellsRevealed, totalSafeCells.

4-4. 렌더링 방식
상태가 변경될 때마다 renderBoard()를 호출해서 보드 전체를 다시 그리는 방식이야. 각 셀은 div 요소로 dataset에 row, col 저장하고, click/contextmenu/auxclick 이벤트를 바인딩해줘.

4-5. 빈 칸 전파
BFS(너비 우선 탐색) 알고리즘으로 빈 칸 자동 오픈을 구현해줘.

4-6. 이벤트 처리
contextmenu는 preventDefault로 기본 메뉴 차단하고 깃발로 사용해. 더블클릭도 preventDefault로 차단해줘. 터치 기기에서 -webkit-tap-highlight-color: transparent 적용해줘.

4-7. localStorage
최고 기록은 'mine_records' 키로 localStorage에 JSON 저장해줘. 난이도별로 time, score, date를 저장해.

5. 추가 조건
모든 텍스트는 한국어로 해줘.
이모지를 적극 활용해서 시각적으로 풍부하게 만들어줘.
user-select: none으로 셀 텍스트 선택 방지해줘.
윈도우 리사이즈 시 셀 크기 재계산해줘.
모바일에서 터치 조작이 자연스럽게 되도록 해줘.
meta viewport에 maximum-scale=1.0, user-scalable=no 넣어서 확대 방지해줘.
html overflow-y: auto, overflow-x: hidden으로 가로 스크롤 방지해줘.
DOMContentLoaded에서 파티클 생성과 새 게임 시작을 해줘.
새 게임 시작 시 "새 게임이 시작되었습니다! 첫 클릭은 안전합니다." 토스트를 띄워줘.