목차가 읽는 자리를 따라오는 문서

너는 이 저장소에서 작업하는 프론트엔드 엔지니어다. 아래 지시를 읽고 먼저 계획을 3줄로 말한 뒤 바로 파일을 만들어라. 질문은 정말 막힐 때 한 번만 해라.

# 작업: 목차가 읽는 자리를 따라오는 문서

## 언제 쓰는 작업인가
라이브러리나 사내 도구의 문서를 직접 만들어야 할 때 쓴다. 문서 생성기를 붙이기에는 문서가 몇 장 안 되고, 그렇다고 글만 세로로 늘어놓으면 아무도 원하는 곳을 못 찾는 경우다. 세 칸이 서로 독립이라 오른쪽 목차를 빼거나 왼쪽을 접는 메뉴로 바꿔도 나머지는 그대로 둔다.

## 준비물(이미 갖춰져 있다고 가정)
- 새 프로젝트다. Next.js 는 1번 뼈대가 깔려 있고, HTML 은 빈 index.html 에서 시작한다
- 문서 한 편의 본문이 있다. 제목, 한 줄 소개, 그리고 소제목 다섯 개 정도다
- 코드 예시가 세 개 있다. 터미널 명령, 실제 코드, 그리고 응답으로 받는 JSON 이다. 각각 언어 이름도 같이 정한다
- 왼쪽에 세울 문서 목록이 열 개쯤 있고 세 묶음으로 나뉜다
- highlight.js·Prism·Shiki 는 설치하지 않는다

## 건드릴 범위
문서 한 페이지다. 상단 줄, 왼쪽 문서 목록, 본문, 오른쪽 목차, 코드 블록, 주의·정보 상자, 앞뒤 문서 링크까지 만든다. 검색 기능과 문서 사이 이동, 마크다운 읽어 들이기는 만들지 않는다. 상단의 검색칸은 생김새만 둔다.

## 결과가 이렇게 보여야 한다
밝은 종이색(#FCFCFD) 위에 글이 놓이고 코드 블록만 어두운 판이라 눈이 먼저 그리로 간다. 강조색은 파랑 하나뿐이고, 주의 상자에만 따뜻한 노랑이 들어간다. 왼쪽 목록은 화면에 붙어 따라오고 지금 보고 있는 문서에만 왼쪽에 파란 선이 서 있다. 본문은 한 줄이 68글자를 넘지 않아서 다음 줄을 눈이 바로 찾는다. 오른쪽 목차는 읽는 자리가 바뀔 때마다 그 항목이 파래지고 왼쪽 선 위의 짧은 막대가 그 자리로 미끄러진다. 코드 블록 머리에는 언어 이름과 복사 단추가 있고, 누르면 단추 글자가 잠깐 바뀌었다 돌아온다.

## 구현 순서
1. 세 칸 뼈대를 먼저 깐다. 바깥은 max-width 1320px 에 좌우 여백 24px 이고, 안은 격자 228px / minmax(0, 1fr) / 200px 에 간격 40px, align-items start 다. 가운데를 그냥 1fr 로 두면 안 된다. 긴 코드 한 줄이 칸을 밀어내 페이지 전체가 가로로 늘어난다. minmax(0, 1fr) 이 그 칸은 더 이상 못 커진다고 알려 주는 값이다. 넓은 화면에서 바깥이 허전해 보여도 남는 너비를 본문에 주지 않는다. 한 줄이 길어지면 읽기가 나빠지고, 가운데 칸만 늘리면 본문과 오른쪽 목차 사이에 구멍이 생긴다. 늘릴 곳이 필요하면 양옆 목차 폭을 키운다.
2. 본문 폭을 68ch 로 묶는다. 한 줄이 이보다 길면 줄을 바꾸고 나서 다음 줄 첫 글자를 눈이 못 찾는다. 제목은 clamp(1.85rem, 3.4vw, 2.35rem) 에 자간 -0.035em, 소제목은 1.28rem, 본문은 16px 에 줄간격 1.65 다. 본문 안의 짧은 코드 조각은 13.5px 고정폭에 옅은 회색 배경과 1px 테두리를 준다.
3. 왼쪽 목록은 position sticky·top 58px(상단 줄 높이) 로 붙이고 max-height 를 calc(100vh - 58px) 에 overflow-y auto 로 둔다. 지금 보고 있는 문서에만 왼쪽에 2px 파란 선을 세우고 배경을 파랑 8% 로 깔고 aria-current page 를 단다. 나머지 항목에도 투명한 2px 선을 미리 둬야 현재 문서가 바뀔 때 글자가 좌우로 밀리지 않는다.
4. 앵커로 뛸 때 제목이 상단 줄 밑에 깔리지 않게 html 에 scroll-padding-top 을 calc(58px + 20px) 로 준다. 여기서 제목에 scroll-margin-top 을 또 주면 안 된다. 둘이 더해져 두 배로 밀리고 제목 위에 빈 화면이 반쯤 생긴다. 둘 중 하나만 쓴다. 제목마다 왼쪽 바깥에 # 링크를 하나 붙이고 평소에는 투명하게 두었다가 그 제목에 커서가 가면 보이게 한다.
5. 코드 블록은 머리줄과 본체로 나눈다. 머리줄에는 언어 이름을 10.5px 고정폭 대문자에 자간 0.14em 으로 적고 오른쪽에 복사 단추를 둔다. 본체는 pre 에 overflow-x auto, code 에 white-space pre 다. 페이지가 밝아도 코드 판은 #15171E 로 어둡게 둔다. 글이 아니라 코드라는 신호를 색이 먼저 준다.
6. 강조는 라이브러리를 부르지 않는다. 먼저 & 와 < 와 > 만 막는다. 따옴표까지 바꾸면 문자열을 찾는 규칙이 어긋나 아무것도 안 걸린다. 그다음 주석, 문자열, 키워드, 숫자 네 묶음을 하나의 정규식에 or 로 묶어 한 번에 훑고 걸린 묶음에 맞는 색을 입힌다. 넷을 따로 돌리면 문자열 안에 들어 있는 return 같은 낱말까지 키워드 색이 된다. 어두운 판 위에서 문자열 #9BD6A0, 주석 #6B7280 기울임, 키워드 #C79BF2, 숫자 #F0A868 이면 충분히 읽힌다.
7. 복사는 navigator.clipboard.writeText 를 쓰되 try 와 catch 로 감싼다. 보안 맥락이 아니거나 브라우저가 막으면 여기서 예외가 난다. 성공하면 단추 글자를 '복사했어요' 로 1.6초 동안 바꿨다가 되돌리고, 실패하면 '직접 끌어서 복사하세요' 로 바꿔 사람이 다음에 뭘 할지 알게 한다. 되돌리는 타이머는 매번 지우고 다시 건다. 연달아 누르면 앞 타이머가 글자를 먼저 되돌려 버린다.
8. 오른쪽 목차가 읽는 자리를 따라가게 한다. IntersectionObserver 에 rootMargin '0px 0px -70% 0px' 를 주면 관찰하는 띠가 화면 위 30% 로 접힌다. 제목이 그 띠에 들어오는 순간이 곧 그 절을 읽기 시작하는 순간이다. 들어온 제목을 Set 에 담고 그중 화면에서 가장 위에 있는 것을 켠다. 위로 거슬러 올라갈 때는 띠가 잠깐 비는데, 비면 아무것도 바꾸지 말고 직전 것을 그대로 둬야 표시가 깜빡이지 않는다. 표시 막대는 켜진 링크의 offsetTop 과 offsetHeight 를 그대로 받아 220ms 동안 미끄러진다.
9. 마지막 절은 따로 챙긴다. 마지막 제목 뒤에 한 화면만큼의 내용이 없으면 그 제목은 영영 띠에 닿지 못해 목차에서 켜지지 않는다. 더 내려갈 데가 없으면 마지막 절이 읽는 자리라고 못박되, 이 판단을 스크롤 쪽에 따로 두지 말고 고르는 함수 하나 안에서 띠보다 먼저 보게 한다. 따로 두면 관찰자 콜백이 프레임 끝에 스크롤 처리보다 늦게 돌면서 방금 켠 마지막 항목을 띠 안의 제목으로 덮어쓴다. 창 높이가 클수록 이 덮어쓰기가 잘 일어나 사람마다 다르게 보인다. 관찰자와 스크롤이 같은 함수를 부르게 하면 끝난다.
10. 상자와 접히는 모양을 마무리한다. 주의 상자는 배경 #FFF7E8 에 테두리를 같은 계열로, 정보 상자는 파랑 8% 배경에 파란 테두리로 둔다. 1120px 아래에서는 오른쪽 목차를 감추고 두 칸으로, 820px 아래에서는 한 칸으로 접으면서 왼쪽 목록을 가로로 넘겨 보는 알약 줄로 바꾼다. prefers-reduced-motion 이면 scroll-behavior 를 auto 로 되돌리고 모든 transition 을 끈다. 400px 과 1440px 에서 가로 스크롤이 없는지 보고 빌드를 통과시킨다.

## 기본값(필요하면 바꿔라)
- 목차가 넘어가는 자리: 화면 위 30%(rootMargin 아래 -70%) (바꿀 수 있는 범위: -50% ~ -80%(작을수록 화면 가운데에서 넘어간다))
- 본문 한 줄 폭: 68ch (바꿀 수 있는 범위: 58ch ~ 76ch)
- 복사했다고 알리는 시간: 1.6초 (바꿀 수 있는 범위: 1초 ~ 3초)
- 왼쪽 문서 목록 폭: 228px (바꿀 수 있는 범위: 190px ~ 280px(제목이 두 줄로 접히기 전까지))
- 표시 막대가 옮겨 가는 시간: 220ms (바꿀 수 있는 범위: 0 ~ 400ms(0 이면 툭툭 건너뛴다))

## 하지 말 것
- html 의 scroll-padding-top 과 제목의 scroll-margin-top 을 같이 주지 않는다. 두 값이 더해져 앵커로 뛰면 제목 위에 빈 화면이 반쯤 생긴다.
- 강조하기 전에 따옴표를 실체 참조로 바꾸지 않는다. 문자열을 찾는 규칙이 어긋나 코드가 통째로 회색이 된다.
- 주석·문자열·키워드를 각각 따로 훑지 않는다. 한 정규식에 묶어야 문자열 안의 낱말이 키워드로 칠해지지 않는다.
- clipboard 를 try 와 catch 없이 부르지 않는다. 막힌 환경에서 예외가 나면 그 뒤의 코드가 멈춘다.
- 가운데 칸에 minmax(0, 1fr) 대신 1fr 만 쓰지 않는다. 긴 코드 한 줄이 칸을 밀어 페이지가 가로로 늘어난다.
- 지금 읽는 자리를 관찰자와 스크롤 두 군데에서 각각 켜지 않는다. 관찰자 콜백이 프레임 끝에 더 늦게 돌아 스크롤 쪽 판단을 덮어쓴다. 고르는 함수를 하나만 두고 둘 다 그것을 부르게 한다.

## 출력 규칙 (HTML 단일 파일)
- 결과는 index.html 파일 하나로 저장한다. 외부 CDN 을 쓰지 않고 CSS·JS 를 파일 안에 넣는다.
- HTML 파일 하나로 완결한다. 별도 CSS·JS 파일을 만들지 않는다.
- 폰트는 시스템 폰트 스택을 기본으로 쓰고, 한글은 'Pretendard Variable', 'Apple SD Gothic Neo', 'Malgun Gothic' 순으로 폴백한다.
- 색·간격·둥글기는 :root 의 CSS 변수로 모아 두고, 본문에서는 변수만 참조한다.
- 1200px 데스크톱과 400px 모바일에서 가로 스크롤이 생기지 않아야 한다.
- 움직임은 prefers-reduced-motion 을 존중한다.

끝나면 만든 파일 목록과 브라우저에서 확인할 URL 을 한 줄씩 적어라.