# 파일-화면 매핑 가이드

## `/`
- 진입 파일: `index.html`
- 화면 역할: 시리즈 선택 홈 화면
- 사용자 행동:
- 언어 선택
- 시리즈 카드 클릭
- 연결 파일:
- `i18n/translations.<lang>.json`: 제목, 설명, 시리즈명
- `script/navigation.js`: 공통 네비게이션 오버레이
- `style/output.css`: 공통 스타일

## `/cardList.html?series=<seriesKey>`
- 진입 파일: `cardList.html`
- 화면 역할: 카드 검색, 필터링, 수량 선택, 키 카드 지정
- 사용자 행동:
- 검색어 입력
- 색상/타입/트리거 필터
- 카드 수량 조절
- 키 카드 지정
- 덱 결과 페이지 이동
- 연결 파일:
- `datas/<seriesKey>.js`: 현재 시리즈 카드 원본 데이터
- `images/<seriesKey>/`: 카드 이미지 원본
- `i18n/translations.<lang>.json`: 버튼/문구 번역
- `script/navigation.js`: 공통 네비게이션

## `/result.html`
- 진입 파일: `result.html`
- 화면 역할: 선택한 덱 미리보기 및 이미지 저장
- 사용자 행동:
- 덱 이름 입력
- 출력 스타일 선택
- 고화질 저장 토글
- PNG 다운로드
- 연결 파일:
- `localStorage.selectedCards` 또는 `cards` 쿼리스트링: 덱 데이터 소스
- `images/<seriesKey>/`: 결과 이미지 렌더링 대상
- `i18n/translations.<lang>.json`: 결과 화면 번역

## 공통 보조 파일
- `script/navigation.js`: 오버레이 메뉴 생성 및 이동 처리
- `i18n/i18n.js`: `data-i18n` 기반 공통 번역 적용
- `style/style.css`, `style/navigation.css`, `style/output.css`: 공통/페이지 스타일

## 초보자용 이해 포인트
- 이 프로젝트는 프레임워크 앱이 아니라 HTML 파일 3개가 직접 화면 역할을 나눠 갖는 구조다.
- 카드 정보는 `datas/`에, 실제 카드 이미지는 `images/`에 따로 있다.
- 화면에서 보이는 한 장의 카드는 "데이터 파일의 객체 1개 + 이미지 폴더의 파일 1개" 조합으로 만들어진다.