# 260210-23.18-hierarchical-numbering-fix-and-expansion

> **주제**: 계층형 번호 스타일 수정 및 5단계(1.1.1.1.1) 확장
> **Task ID**: TC-8-1

---

## 1. 개요
현재 3단계까지 지원되는 계층형 번호 체계를 5단계까지 확장하고, 시각적 오류(불필요한 마침표, 유령 점)를 수정함.

## 2. 변경 사항

### 2.1. 계층 확장 및 스타일 수정 (globals.css)
- **단계 확장**: CSS 카운터 설정을 최대 5단계 리스트까지 대응하도록 수정.
- **마지막 마침표 제거**: `content: counters(insu-ol, ".");`로 변경 (기존 `counters(..., ".") "."`에서 뒤의 마침표 제거).
- **여백 조정**: 5단계(`1.1.1.1.1`) 번호가 길어질 것을 대비해 왼쪽 패딩(`padding-left`)과 번호 영역 너비(`width`)를 유연하게 조정.
- **유령 점 제거**: 리스트의 `::before` 요소에 `content: none`이 적용되는 케이스가 없는지 확인하고, 번호가 부여되지 않은 공백 항목의 스타일 최적화.

### 2.2. TOC 파싱 로직 업데이트 (TableOfContents.tsx)
- 현재 3단계로 제한된 리스트 파싱(`if (level <= 3)`)을 **5단계(`if (level <= 5)`)**로 변경.
- 인덴트 깊이에 따른 `level` 계산 로직이 5단계까지 정확히 동작하도록 검증.

### 2.3. 렌더러 ID 부여 로직 업데이트 (page.tsx)
- `li` 컴포넌트의 뎁스 계산 로직이 5단계까지 지원되도록 확인.
- 각 단계별 고유 ID(`li-{depth}-{lineIndex}`) 생성을 통해 TOC 링크 연동 유지.

## 3. 진행 계획
- [ ] `globals.css` 수정: 계층 확장 및 점(.) 표기법 변경.
- [ ] `TableOfContents.tsx` 수정: 5단계 리스트 항목 수집.
- [ ] `page.tsx` 확인: 5단계 뎁스 ID 부여 로직 검증.