1.스도쿠

HTML, CSS, JavaScript만 사용해서 단일 HTML 파일로 스도쿠 게임을 만들어줘.

1. 프로그램 개요
게임 이름은 "바이브 스도쿠"로 해줘. 영문 부제는 "Vibe Coding Sudoku"로 넣어줘.
9×9 스도쿠 퍼즐을 자동 생성하고, 플레이어가 빈 칸을 채워서 완성하는 게임이야.
난이도 선택, 메모 기능, 힌트, 되돌리기, 자동 메모, 오류 검사 등 풍부한 보조 기능을 넣어줘.
다크 모드 기반의 네온 느낌 UI로 만들어줘. 메인 색상은 민트/시안 계열(#00d4aa)로 해줘.
모바일과 데스크톱 모두 잘 보이게 반응형으로 만들어줘.
한국어로 모든 텍스트를 작성해줘.

2. 기능
2-1. 스도쿠 퍼즐 생성
게임 시작 시 9×9 완성 해답을 백트래킹 알고리즘으로 먼저 만들어줘.
해답에서 난이도별로 정해진 개수만큼 셀을 남기고 나머지를 비워서 퍼즐을 만들어줘.
남기는 힌트 셀 개수는 쉬움 42개, 보통 34개, 어려움 28개, 전문가 23개로 해줘.
비울 셀 위치는 전체 81칸 좌표를 랜덤 셔플한 뒤 앞에서부터 제거하는 방식으로 해줘.

2-2. 난이도 선택
상단에 쉬움(😊), 보통(🤔), 어려움(😈), 전문가(🔥) 네 개의 난이도 버튼을 만들어줘.
난이도를 누르면 해당 난이도로 즉시 새 게임이 시작되게 해줘.
현재 선택된 난이도 버튼은 민트색 테두리와 글로우 배경으로 활성 표시해줘.

2-3. 셀 선택 및 하이라이트
셀을 클릭하면 해당 셀이 선택되게 해줘.
선택된 셀은 민트색 글로우 배경으로 강조해줘.
선택된 셀과 같은 행, 같은 열, 같은 3×3 박스에 있는 셀들은 약한 흰색 하이라이트를 넣어줘.
선택된 셀에 적힌 숫자와 같은 숫자가 있는 다른 셀들도 살짝 더 밝게 강조해줘.

2-4. 숫자 입력
보드 아래에 1~9까지 숫자 패드를 가로로 나란히 배치해줘.
각 숫자 버튼 아래에 해당 숫자의 남은 배치 가능 개수를 작은 글씨로 표시해줘. (9개에서 이미 보드에 놓인 개수를 뺀 값)
9개 모두 배치된 숫자는 버튼을 흐리게 비활성화해줘.
숫자를 누르면 선택된 빈 셀에 입력되게 해줘. 원래 주어진 힌트 셀에는 입력 불가로 해줘.
정답과 일치하면 민트색으로 표시하고, 난이도별 점수(쉬움 5, 보통 10, 어려움 15, 전문가 25)를 더해줘.
오답이면 빨간색으로 표시하고 흔들리는 애니메이션을 주고, 실수 횟수를 1 늘려줘.

2-5. 실수 및 게임 오버
최대 실수 횟수는 3회로 해줘.
상단 정보 바에 하트 3개(❤️)로 남은 목숨을 표시해줘. 실수할 때마다 왼쪽부터 하트가 흐려지게 해줘.
3회 실수하면 게임 오버 모달을 띄워줘. 모달에 "😢 게임 오버", 소요 시간, 점수를 보여줘.

2-6. 메모 모드
액션 버튼 중 "✏️ 메모" 버튼을 누르면 메모 모드 ON/OFF가 토글되게 해줘.
메모 모드 활성화 시 버튼 색상을 파란색(#6ab7ff) 계열로 바꿔줘.
메모 모드에서 숫자를 누르면 해당 셀에 작은 숫자 노트가 3×3 그리드 형태로 표시되게 해줘. 같은 숫자를 다시 누르면 토글로 제거되게 해줘.
메모 숫자 색상은 연한 파란색(#6ab7ff)으로 해줘.

2-7. 자동 메모
"📝 자동메모" 버튼을 누르면 모든 빈 셀에 현재 보드 기준으로 가능한 후보 숫자를 자동으로 메모해줘.
행, 열, 3×3 박스에서 이미 쓰인 숫자를 제외한 나머지가 후보야.

2-8. 정답 입력 시 관련 메모 자동 제거
셀에 정답 숫자가 놓이면 같은 행, 열, 3×3 박스에 있는 다른 셀들의 메모에서 해당 숫자를 자동으로 제거해줘.

2-9. 힌트
"💡 힌트" 버튼을 만들어줘. 총 3회까지 사용 가능하고 버튼 옆에 남은 횟수를 표시해줘.
힌트를 누르면 현재 선택된 셀이 비어있으면 그 셀에, 아니면 랜덤 빈 셀에 정답을 채워줘.
힌트로 채운 셀은 팝업 애니메이션(scale 확대 후 축소)을 줘.
힌트 사용 시 점수를 10점 감점해줘 (0 이하로는 안 내려가게).

2-10. 지우기
"🧹 지우기" 버튼으로 선택된 셀의 입력값과 메모를 모두 지울 수 있게 해줘.
원래 주어진 힌트 셀은 지우기 불가로 해줘.

2-11. 되돌리기 (Undo)
"↩️ 되돌리기" 버튼으로 직전 동작을 취소할 수 있게 해줘.
숫자 입력, 메모 입력, 지우기 모두 되돌리기가 되게 Undo 스택을 관리해줘.

2-12. 보드 검사
"✅ 검사" 버튼을 누르면 현재까지 입력된 숫자 중 오답인 셀을 빨간색으로 하이라이트해줘.
오류가 없으면 "오류 없음" 토스트를, 있으면 "N개의 오류 발견" 토스트를 띄워줘.

2-13. 타이머
게임 시작과 동시에 타이머가 매초 올라가게 해줘.
상단 정보 바에 "⏱ MM:SS" 형태로 표시해줘.
게임 오버나 승리 시 타이머를 멈춰줘.

2-14. 점수
상단에 "⭐ 점수" 형태로 현재 점수를 표시해줘.
정답 입력 시 난이도별로 점수가 올라가고, 힌트 사용 시 감점되게 해줘.

2-15. 진행률 바
숫자 패드 위쪽에 가로 진행률 바를 넣어줘.
81칸 중 채워진 칸 비율로 퍼센트를 표시해줘. "N / 81"과 "N%" 을 바 아래에 양쪽으로 나눠서 보여줘.
바 색상은 민트에서 초록(#00e676)으로 그라데이션해줘.

2-16. 승리 처리
모든 셀이 정답으로 채워지면 승리 모달을 띄워줘.
모달에 "🎉 축하합니다!", 난이도, 소요 시간, 점수, 실수 횟수, 사용 힌트 수를 보여줘.
승리 시 컨페티(색종이 조각) 애니메이션을 화면 전체에 뿌려줘. 색상은 민트, 빨강, 파랑, 노랑, 보라, 초록, 흰색 섞어서 80개 정도 떨어지게 해줘.
승리 기록을 localStorage에 저장해줘.

2-17. 새 게임
"🔄 새 게임" 버튼을 누르면 현재 난이도로 새 퍼즐이 생성되게 해줘.
모든 상태(타이머, 점수, 실수, 힌트 등)가 초기화되게 해줘.

2-18. 키보드 단축키
1~9 키로 숫자 입력, 방향키로 셀 이동, Delete/Backspace로 지우기, N 키로 메모 토글, H 키로 힌트, Ctrl+Z로 되돌리기 기능을 넣어줘.
화면 하단에 단축키 안내를 작은 글씨로 보여줘. kbd 태그로 키 표시를 예쁘게 해줘.

3. 디자인
3-1. 전체 분위기
완전한 다크 모드야. 배경은 거의 검정(#0a0a0a)으로 하고 카드/표면 색상은 #141414, #1e1e1e, #2a2a2a 계열로 해줘.
메인 강조색은 민트(#00d4aa)로 하고, 오류는 핑크레드(#ff4466), 메모는 연한 파랑(#6ab7ff)으로 해줘.
전반적으로 네온 글로우 느낌을 주되 은은하게 해줘.

3-2. 폰트
구글 폰트 'Jua'를 임포트해서 전체에 적용해줘.

3-3. 배경 파티클
화면 뒤로 민트색 작은 원형 파티클이 아래에서 위로 천천히 떠오르는 애니메이션을 넣어줘.
20개 정도 만들고, 크기는 1~4px 랜덤, 속도와 딜레이도 랜덤으로 해줘.
투명도는 0.3 정도로 은은하게 해줘.

3-4. 스도쿠 보드
CSS Grid로 만들되, 3×3 박스 경계를 굵은 구분선으로 명확하게 표현해줘.
방법: 11열×11행 그리드를 사용해서 3칸 뒤마다 3px 두께의 구분선 행/열을 끼워넣는 방식으로 해줘. 구분선 색상은 민트색 반투명(rgba(0,212,170,0.45))으로 하고 약간의 글로우를 줘.
보드 전체 테두리는 3px 민트색 실선으로 하고, 둥근 모서리(12px)와 민트 글로우 box-shadow를 넣어줘.
각 셀은 정사각형(aspect-ratio: 1)이고, 셀 사이 구분은 아주 얇은 선(0.5px)으로 해줘.
보드 최대 너비는 480px로 해줘.

3-5. 셀 스타일
원래 주어진 숫자는 밝은 회색(#e0e0e0)으로 표시해줘.
유저가 입력한 숫자는 민트색으로 표시해줘.
오답 셀은 빨간색 글씨 + 빨간 배경 글로우 + 좌우 흔들리는 shake 애니메이션을 넣어줘.
선택된 셀은 민트 글로우 배경 + 안쪽 그림자를 넣어줘.
하이라이트된 동료 셀은 아주 약한 흰색 배경으로 해줘.

3-6. 숫자 패드
1~9 버튼을 가로 한 줄 9개로 배치해줘. 각 버튼은 정사각형에 둥근 모서리(12px)로 해줘.
hover 시 민트 테두리와 글로우 배경을 넣고, 클릭 시 살짝 축소(scale 0.93)되게 해줘.

3-7. 액션 버튼
메모, 지우기, 힌트, 되돌리기, 자동메모, 검사, 새 게임 총 7개 버튼을 가로로 배치하되 flex-wrap으로 줄바꿈 되게 해줘.
각 버튼에 이모지 아이콘과 한글 라벨을 넣어줘.
"새 게임" 버튼은 hover 시 빨간색 계열로 변하게 danger 스타일을 줘.

3-8. 모달
화면 중앙에 뜨는 모달로, 뒤 배경은 블러 처리된 반투명 검정 오버레이로 해줘.
모달 카드에 민트 테두리와 글로우를 넣고, 나타날 때 scale 확대 애니메이션을 줘.
"새 게임 시작" 버튼은 민트 그라데이션 배경에 둥근 pill 형태로 해줘.

3-9. 토스트 알림
화면 오른쪽 상단에 뜨는 토스트 메시지를 만들어줘.
오른쪽에서 슬라이드인 되고 2.5초 후 페이드아웃 되게 해줘.
성공(민트 테두리), 오류(빨간 테두리), 정보(파란 테두리) 세 종류로 해줘.

3-10. 반응형
420px 이하 모바일에서는 셀 폰트, 숫자패드, 헤더 등의 크기를 좀 줄여줘.

4. 기술
HTML, CSS, JavaScript만 사용해서 단일 .html 파일로 만들어줘.
외부 라이브러리 없이 순수 바닐라 JS로 구현해줘.
CSS 커스텀 속성(변수)을 :root에 정의해서 색상 관리를 해줘.
localStorage를 사용해서 게임 기록을 저장해줘.
더블클릭 방지(dblclick preventDefault)를 넣어줘.
모바일에서 탭 하이라이트 제거(-webkit-tap-highlight-color: transparent)하고 user-scalable=no 설정을 해줘.

5. 추가 조건
모든 텍스트와 UI 라벨은 한국어로 작성해줘.
페이지 타이틀은 "🎲 바이브 스도쿠"로 해줘.
하나의 HTML 파일 안에 CSS는 style 태그로, JS는 script 태그로 전부 포함해줘.
코드에 한글 주석을 적절히 넣어줘.
DOMContentLoaded 이벤트에서 파티클 생성과 새 게임을 시작하게 해줘.