지금부터 한국어 탐사보도 프로젝트 웹페이지를 만든다.
순수 HTML/CSS/JavaScript만 사용한다. React, Vue, Vite, Webpack 등 
프레임워크와 번들러는 사용하지 않는다.

## 0. 작업 환경 확인
원본 자료는 모두 현재 디렉토리의 `웹구성자료/` 폴더 안에 있다.
먼저 `웹구성자료/` 폴더 구조를 트리 형태로 출력해줘.

명령 예시:
- `ls -la 웹구성자료/`
- 또는 `find 웹구성자료 -type f | sort`

하위 폴더가 있다면 모두 펼쳐서 보여줄 것.

## 1. 자료 인벤토리
`웹구성자료/` 폴더 안의 모든 파일을 다음 기준으로 분류:

(a) 텍스트 파일 (.txt, .md, .docx 등)
    - 각 파일을 열어 소제목과 글자 수만 요약 출력
    - 본문 전체를 한꺼번에 출력하지 말 것 (컨텍스트 절약)

(b) 사진 파일 (.jpg, .jpeg, .png, .webp 등)
    - 파일명 목록만 나열
    - 파일명에서 추정되는 내용을 한 줄씩 메모

(c) 그래프·지도 HTML 파일 (.html)
    - 각 파일을 열어 어떤 라이브러리로 그려졌는지 식별
    - 가능성: Chart.js, D3.js, Plotly.js, ECharts, Leaflet, Highcharts, 
      ApexCharts, Mapbox GL JS, Vega-Lite, amCharts, Three.js, 
      Cytoscape.js, vis.js, Observable Plot 등
    - <script src="..."> 태그를 확인해 정확한 CDN URL과 버전 기록

(d) 기타 파일 (있다면 별도 분류)

위 결과를 표 형태로 정리해 보여준 뒤, 다음 단계 진행 여부를 사용자에게 물을 것.

## 2. 페이지 흐름 설계
- 본문 텍스트의 흐름을 파악해 섹션으로 분할
- 각 섹션 사이에 어떤 사진·그래프를 배치할지 개요 제시
- 표 형태로 "섹션명 → 본문 요지 → 삽입 시각자료" 출력
- 사용자 승인 후 코딩 시작

## 3. 산출 폴더 구조
프로젝트 루트(`웹구성자료/`와 같은 레벨)에 `export/` 폴더를 새로 만든다.

export/
├── index.html
├── index.css
├── index.js
└── assets/
    ├── photo_01.jpg
    ├── photo_02.jpg
    └── ...

규칙:
- `웹구성자료/` 안의 사진은 `export/assets/`로 복사 
  (원본 파일명 유지 또는 photo_01.jpg 식으로 일괄 변경 — 사용자에게 확인)
- `웹구성자료/` 안의 그래프 HTML은 코드 추출용으로만 참조, 
  `export/`에는 포함하지 않음
- `웹구성자료/` 폴더 자체는 절대 수정·삭제하지 말 것 (원본 보존)

## 4. 그래프/지도 처리 규칙
- 각 그래프 HTML에서 다음 4가지를 추출:
  (a) CDN 스크립트 <script src="..."> 및 <link rel="stylesheet">
  (b) 차트가 그려질 컨테이너 DOM (<div id>, <canvas>, <svg> 등)
  (c) 차트를 그리는 JavaScript 코드 본체
  (d) 차트 전용 CSS (있다면)
- iframe으로 통째 임베드 금지 — 반드시 코드 단위로 분해해 통합
- 각 시각화는 index.js 안에서 독립 함수로 분리
  (예: renderBarChart(), renderTimelineD3(), renderKoreaMap())
- 원본의 DOM ID, 클래스명, JS 변수명은 가급적 유지
- 원본이 쓴 라이브러리를 임의로 다른 라이브러리로 변환하지 말 것
  (D3 차트를 Chart.js로 다시 그리는 식의 변환 금지)
- 모든 라이브러리는 index.html에서 CDN으로 로드 (jsdelivr/unpkg 안정 버전)
- 원본 HTML이 명시한 버전을 우선 따를 것
- DOMContentLoaded 이후 초기화, window resize 이벤트 대응
- 동일 라이브러리의 메이저 버전 충돌 발견 시 최신 안정 버전으로 통일하고 
  콘솔에 안내 메시지 남길 것

## 5. 디자인 (탐사보도 톤)
- 색감: 검정 #111, 진회색 #333, 오프화이트 #F8F6F1 
  + 포인트 컬러 1개 (진한 적색 #8B1A1A 또는 머스타드 #C8932C 중 사용자에게 선택받기)
- 본문 서체: Noto Serif KR (Google Fonts CDN)
- 제목 서체: Noto Sans KR Bold/Black
- 본문: 줄간격 1.8, 폭 700~760px 중앙정렬
- 사진·그래프: 본문폭 확장(최대 1100px) 또는 풀블리드 허용
- 섹션 간 상하 여백 80px 이상
- Intersection Observer로 가벼운 fade-in만 (과한 애니메이션·패럴랙스 금지)
- 인용구: 큰따옴표 + 좌측 4px 컬러 바 강조
- 모바일 반응형 (768px 이하에서 폰트·여백 축소)

## 6. 콘텐츠 사용 원칙
- `웹구성자료/` 폴더 안의 자료만 사용
- 외부에서 새 텍스트·사진·그래프를 생성하거나 가져오지 말 것
- 모든 UI 텍스트(메뉴, 버튼, 캡션, 푸터)는 한국어
- 영어·라틴 문자 단어 사용 금지 (URL·고유명사·라이브러리명 예외)

## 7. 경로 규칙
- index.html 내 CSS/JS/이미지 참조는 모두 상대경로
  - ./index.css, ./index.js, ./assets/photo_01.jpg
- 외부 라이브러리는 절대경로 CDN URL
- GitHub Pages의 username.github.io/repo-name/ 하위 경로에서도 정상 동작해야 함

## 8. 검증 및 마무리
작업 완료 후:
- `export/` 폴더 트리를 출력
- 로컬 테스트 명령어 안내:
  `python3 -m http.server 8000 --directory export`
  또는 `npx serve export`
- 점검 항목 체크리스트 제공
  □ 콘솔 에러 없음
  □ 모든 차트·지도 정상 렌더링
  □ 모바일 화면에서 깨짐 없음
  □ 이미지 모두 로드됨
- GitHub Pages 배포 절차 안내
  (export/ 내용을 레포지토리 루트 또는 docs/ 폴더에 푸시하는 방법)

## 작업 진행 방식
- 0번부터 순서대로 진행하며, 각 단계 완료 시 사용자 확인을 받을 것
- 한 번에 모든 파일을 쏟아내지 말 것
- 파일 생성·수정 시 어떤 파일을 어떻게 바꾸는지 먼저 설명한 뒤 실행
- `웹구성자료/` 폴더는 읽기 전용으로 취급, 절대 수정하지 말 것

자, 0번 작업 환경 확인부터 시작.