# A4 HTML 문서 레이아웃 가이드
> 이 가이드는 글벗 doc_template_analyzer가 HWPX에서 추출한 구조를 
> A4 규격 HTML template.html로 변환할 때 참조하는 레이아웃 규격입니다.
> 
> ★ 이 파일의 값은 코드에 하드코딩하지 않습니다.
> ★ doc_template_analyzer._build_css(), _build_full_html() 등에서 이 파일을 읽어 적용합니다.
> ★ 색상, 폰트 등 스타일은 HWPX에서 추출한 값을 우선 사용하고, 없으면 이 가이드의 기본값을 사용합니다.

---

## 1. 페이지 규격 (Page Dimensions)

```yaml
page:
  width: 210mm          # A4 가로
  height: 297mm         # A4 세로
  background: white
  boxSizing: border-box

margins:
  top: 20mm             # 상단 여백 (머릿말 + 본문 시작)
  bottom: 20mm          # 하단 여백 (꼬릿말 + 본문 끝)
  left: 20mm            # 좌측 여백
  right: 20mm           # 우측 여백

# 본문 가용 높이 = 297mm - 20mm(상) - 20mm(하) = 257mm ≈ 970px
bodyMaxHeight: 970px
```

## 2. HTML 골격 구조 (Page Structure)

각 페이지는 `.sheet` 클래스로 감싸며, 내부에 header/body/footer를 absolute로 배치합니다.

```html
<!-- 페이지 단위 -->
<div class="sheet">
    <!-- 머릿말: 상단 여백(20mm) 안, 위에서 10mm 지점 -->
    <div class="page-header">
        <!-- HWPX 머릿말 테이블 내용 -->
    </div>
    
    <!-- 본문: 상하좌우 20mm 안쪽 -->
    <div class="body-content">
        <!-- 섹션 제목, 표, 개조식 등 -->
    </div>
    
    <!-- 꼬릿말: 하단 여백(20mm) 안, 아래에서 10mm 지점 -->
    <div class="page-footer">
        <!-- HWPX 꼬릿말 테이블 내용 -->
    </div>
</div>
```

## 3. 핵심 CSS 레이아웃 (Layout CSS)

### 3.1 용지 (.sheet)
```css
.sheet {
    width: 210mm;
    height: 297mm;
    background: white;
    margin: 20px auto;          /* 화면 미리보기용 */
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    box-shadow: 0 0 15px rgba(0,0,0,0.1);
}
```

### 3.2 인쇄 대응
```css
@media print {
    .sheet { margin: 0; break-after: page; box-shadow: none; }
    body { background: white; }
}
```

### 3.3 머릿말 (.page-header)
```css
.page-header {
    position: absolute;
    top: 10mm;                  /* 상단 여백(20mm)의 중간 */
    left: 20mm;
    right: 20mm;
    font-size: 9pt;
    padding-bottom: 5px;
}
```
- 머릿말이 **테이블 형태**인 경우: `<table>` 사용, 테두리 없음
- HWPX에서 추출한 열 수와 셀 내용을 placeholder로 배치
- 다중행 셀은 `<br>`로 줄바꿈

### 3.4 꼬릿말 (.page-footer)
```css
.page-footer {
    position: absolute;
    bottom: 10mm;               /* 하단 여백(20mm)의 중간 */
    left: 20mm;
    right: 20mm;
    font-size: 9pt;
    color: #555;
    border-top: 1px solid #eee;
    padding-top: 5px;
}
```
- 꼬릿말이 **테이블 형태**인 경우: `<table>` 사용, 테두리 없음
- 2열 이상일 때 `display: flex; justify-content: space-between` 패턴도 가능
- 페이지 번호는 별도 `<span class="pg-num">` 으로

### 3.5 본문 영역 (.body-content)
```css
.body-content {
    position: absolute;
    top: 20mm;
    left: 20mm;
    right: 20mm;
    bottom: 20mm;               /* 또는 auto + JS 제어 */
}
```

## 4. 타이포그래피 기본값 (Typography Defaults)

> HWPX에서 폰트/크기를 추출했으면 그 값을 사용합니다.
> 추출 실패 시 아래 기본값을 적용합니다.

```yaml
typography:
  fontFamily: "'Noto Sans KR', sans-serif"
  fontImport: "https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700;900&display=swap"
  
  body:
    fontSize: 12pt
    lineHeight: 1.6
    textAlign: justify
    wordBreak: keep-all        # 한글 단어 중간 끊김 방지
  
  heading:
    h1: { fontSize: 20pt, fontWeight: 900 }
    h2: { fontSize: 18pt, fontWeight: 700 }
    h3: { fontSize: 14pt, fontWeight: 700 }
  
  headerFooter:
    fontSize: 9pt
  
  table:
    fontSize: 9.5pt
    thFontSize: 9pt
```

## 5. 표 스타일 기본값 (Table Defaults)

```yaml
table:
  width: "100%"
  borderCollapse: collapse
  tableLayout: fixed            # colgroup 비율 적용 시 fixed 필수
  borderTop: "2px solid"        # 상단 굵은 선 (색상은 HWPX 추출)
  
  th:
    fontWeight: 900
    textAlign: center
    verticalAlign: middle
    whiteSpace: nowrap           # 헤더 셀은 한 줄 유지
    wordBreak: keep-all
    padding: "6px 5px"
  
  td:
    textAlign: center
    verticalAlign: middle
    wordBreak: keep-all
    wordWrap: break-word
    padding: "6px 5px"
    border: "1px solid #ddd"
```

## 6. 머릿말/꼬릿말 테이블 (Header/Footer Table)

머릿말/꼬릿말이 HWPX에서 테이블로 구성된 경우:

```yaml
headerFooterTable:
  border: none                  # 테두리 없음
  width: "100%"
  fontSize: 9pt
  
  # 열 역할 패턴 (HWPX에서 추출)
  # 보통 3열: [소속정보 | 빈칸/로고 | 작성자/날짜]
  # 또는 2열: [제목 | 페이지번호]
  
  cellStyle:
    padding: "2px 5px"
    verticalAlign: middle
    border: none
```

## 7. 개조식 (Bullet Style)

```yaml
bulletList:
  marker: "·"                   # 한국 문서 기본 불릿
  className: "bullet-list"
  
  css: |
    .bullet-list {
        list-style: none;
        padding-left: 15px;
        margin: 5px 0;
    }
    .bullet-list li::before {
        content: "· ";
        font-weight: bold;
    }
    .bullet-list li {
        margin-bottom: 3px;
        line-height: 1.5;
    }
```

## 8. 색상 (Color Scheme)

> HWPX에서 추출한 색상을 CSS 변수로 주입합니다.
> 추출 실패 시 아래 기본값을 사용합니다.

```yaml
colors:
  # Navy 계열 (기본)
  primary: "#1a365d"
  accent: "#2c5282"
  lightBg: "#EBF4FF"
  
  # 문서별 오버라이드 (HWPX 추출값)
  # doc_template_analyzer가 HWPX의 글자색/배경색을 분석하여
  # 이 값을 덮어씁니다.
  
  css: |
    :root {
        --primary: #1a365d;
        --accent: #2c5282;
        --light-bg: #EBF4FF;
        --bg: #f5f5f5;
    }
```

## 9. 페이지 분할 규칙 (Page Break Rules)

```yaml
pageBreak:
  # H1(대제목)에서만 강제 페이지 분할
  h1Break: true
  
  # H2/H3이 페이지 하단에 홀로 남지 않도록
  orphanControl: true
  orphanMinSpace: 90px          # 이 공간 미만이면 다음 페이지로
  
  # 표/그림은 분할하지 않음
  atomicBlocks:
    - table
    - figure
    - ".highlight-box"
  
  # break-inside: avoid 적용 대상
  avoidBreakInside:
    - table
    - figure
    - ".atomic-block"
```

## 10. 배경 (Preview Background)

```yaml
preview:
  bodyBackground: "#525659"     # 회색 배경 위에 흰색 용지
  # 인쇄 시 배경 제거 (@media print)
```

---

## ★ 사용 방법 (How doc_template_analyzer uses this guide)

1. `doc_template_analyzer._build_full_html()` 호출 시:
   - 이 가이드 파일을 읽음
   - HWPX에서 추출한 스타일(색상, 폰트, 크기)이 있으면 오버라이드
   - 없으면 가이드 기본값 사용
   
2. CSS 생성 순서:
   ```
   가이드 기본값 → HWPX 추출 스타일 오버라이드 → CSS 변수로 통합
   ```

3. HTML 구조:
   ```
   가이드의 골격(.sheet > .page-header + .body-content + .page-footer)
   + HWPX에서 추출한 placeholder 배치
   = template.html
   ```

4. 색상 결정:
   ```
   HWPX headerTextColor → --primary
   HWPX headerBgColor → --light-bg  
   없으면 → 가이드 기본값(Navy 계열)
   ```