# Premium PDF Component Catalog

PDF용 HTML을 생성할 때 이 문서에 정의된 컴포넌트를 우선 사용한다.

## 1. 전체 규칙

- HTML은 `pdf-studio/design-system.css`를 연결한다.
- JavaScript를 사용하지 않는다.
- 외부 CDN, 외부 이미지 URL, 외부 웹폰트를 사용하지 않는다.
- `<style>` 태그와 inline style을 사용하지 않는다.
- 새로운 CSS class를 임의로 만들지 않는다.
- 이 문서에 정의된 class만 조합하여 사용한다.
- 모든 내용을 카드 형태로 만들지 않는다.
- 일반 설명은 본문으로 작성하고 핵심 정보만 시각적으로 강조한다.
- 한 페이지에는 하나의 핵심 메시지를 중심으로 구성한다.
- 확인되지 않은 내용이나 수치를 임의로 만들지 않는다.

## 2. 문서 테마

`body`에 다음 중 하나를 적용한다.

### theme-navy

기업 보고서, 평가 보고서, 컨설팅 보고서, 고객사 전달 문서에 사용한다.

```html
<body class="theme-navy">
```

### theme-teal

기술, 데이터, AI, 시스템, 운영 보고서에 사용한다.

```html
<body class="theme-teal">
```

### theme-plum

전략, 기획, 조직, 브랜딩 문서에 사용한다.

```html
<body class="theme-plum">
```

별도 요청이 없으면 `theme-navy`를 사용한다.

## 3. 기본 섹션

일반적인 본문 섹션에 사용한다.

```html
<section class="report-section">
  <header class="section-header">
    <div class="section-kicker">OVERVIEW</div>
    <h2 class="section-title">문서 개요</h2>
    <p class="section-description">
      해당 섹션의 목적과 내용을 한두 문장으로 설명한다.
    </p>
  </header>

  <p>본문 내용을 작성한다.</p>
</section>
```

### 사용 기준

- `section-kicker`는 짧은 영문 분류명으로 작성한다.
- `section-title`은 핵심 내용을 나타내는 한국어 제목으로 작성한다.
- `section-description`은 최대 두 문장으로 제한한다.

## 4. 핵심 요약

문서 전체의 핵심 결론이나 현재 상태를 3~5문장으로 요약할 때 사용한다.

```html
<div class="executive-summary">
  <p>
    문서의 가장 중요한 결과나 결론을 설명한다.
  </p>
  <p>
    추가로 확인해야 할 과제나 시사점을 설명한다.
  </p>
</div>
```

### 사용 기준

- 표지 다음 첫 번째 본문 페이지에 우선 배치한다.
- 새로운 세부 정보를 과도하게 넣지 않는다.
- 핵심 결론과 근거를 구분한다.

## 5. 수치 카드

중요한 수치, 건수, 비율, 상태를 강조할 때 사용한다.

```html
<div class="metric-grid">
  <article class="metric-card">
    <span class="metric-label">전체 테스트</span>
    <strong class="metric-value">100건</strong>
    <p class="metric-description">
      기존 평가 데이터셋을 동일하게 적용했다.
    </p>
  </article>

  <article class="metric-card">
    <span class="metric-label">진행 상태</span>
    <strong class="metric-value">완료</strong>
    <p class="metric-description">
      초기 환경 구성과 기능 검증을 완료했다.
    </p>
  </article>

  <article class="metric-card">
    <span class="metric-label">주요 과제</span>
    <strong class="metric-value">3개</strong>
    <p class="metric-description">
      검색, 응답, 운영 기준을 추가로 보완한다.
    </p>
  </article>
</div>
```

### 사용 기준

- 카드 수는 2~4개로 제한한다.
- `metric-value`는 한 줄로 작성한다.
- 설명은 최대 두 문장으로 제한한다.
- 실제로 중요한 수치나 상태가 있을 때만 사용한다.

## 6. 정보 카드

서로 병렬적인 항목을 두 개 이상 설명할 때 사용한다.

```html
<div class="card-grid">
  <article class="info-card">
    <h3>현재 상태</h3>
    <p>현재까지 진행된 내용을 설명한다.</p>
  </article>

  <article class="info-card">
    <h3>개선 방향</h3>
    <p>앞으로 보완해야 할 내용을 설명한다.</p>
  </article>
</div>
```

### 사용 기준

- 서로 같은 수준의 정보에만 사용한다.
- 장문의 설명은 카드에 넣지 않는다.
- 항목 수가 하나라면 일반 본문이나 강조 박스를 사용한다.

## 7. 상태 배지

짧은 상태값을 표시할 때 사용한다.

```html
<span class="badge">검토 중</span>
<span class="badge success">완료</span>
<span class="badge warning">주의</span>
<span class="badge danger">위험</span>
```

### 사용 기준

- 문장 대신 사용하지 않는다.
- 완료, 검토, 주의, 위험 등 짧은 상태에만 사용한다.

## 8. 단계별 프로세스

3~5단계의 순차적인 업무 흐름이나 처리 절차에 사용한다.

```html
<div class="process-flow">
  <article class="process-step">
    <span class="process-number">STEP 01</span>
    <strong>문의 입력</strong>
    <p>사용자가 문의 내용을 입력한다.</p>
  </article>

  <article class="process-step">
    <span class="process-number">STEP 02</span>
    <strong>유형 판단</strong>
    <p>문의 의도와 처리 유형을 구분한다.</p>
  </article>

  <article class="process-step">
    <span class="process-number">STEP 03</span>
    <strong>정보 검색</strong>
    <p>관련 정책과 FAQ 자료를 검색한다.</p>
  </article>

  <article class="process-step">
    <span class="process-number">STEP 04</span>
    <strong>답변 생성</strong>
    <p>검색 결과에 근거한 답변을 생성한다.</p>
  </article>
</div>
```

### 사용 기준

- 순서가 실제로 중요할 때 사용한다.
- 단순 목록에는 사용하지 않는다.
- 각 단계 설명은 최대 두 문장으로 제한한다.

## 9. 일정 타임라인

주차별, 월별, 단계별 일정이나 추진 계획에 사용한다.

```html
<div class="timeline">
  <article class="timeline-item">
    <span class="timeline-period">1주차</span>
    <h3>현황 파악</h3>
    <p>현재 시스템과 업무 흐름을 확인한다.</p>
  </article>

  <article class="timeline-item">
    <span class="timeline-period">2주차</span>
    <h3>기준 설계</h3>
    <p>운영 기준과 적용 범위를 정의한다.</p>
  </article>

  <article class="timeline-item">
    <span class="timeline-period">3~4주차</span>
    <h3>실행 계획 확정</h3>
    <p>구축 순서와 운영 계획을 정리한다.</p>
  </article>
</div>
```

### 사용 기준

- 시간 순서나 단계가 명확한 경우에만 사용한다.
- 일정이 없는 문서에는 사용하지 않는다.

## 10. 주요 발견 박스

주요 발견, 해석, 시사점을 표시한다.

```html
<div class="insight-box">
  <span class="box-label">KEY FINDING</span>
  <strong>핵심 발견 제목</strong>
  <p>
    해당 발견이 의미하는 바와 근거를 설명한다.
  </p>
</div>
```

## 11. 위험 및 주의 박스

위험, 제약, 확인이 필요한 내용을 표시한다.

```html
<div class="risk-box">
  <span class="box-label">REVIEW POINT</span>
  <strong>확인이 필요한 항목</strong>
  <p>
    예상되는 위험이나 검토해야 할 내용을 설명한다.
  </p>
</div>
```

## 12. 후속 조치 박스

권고 사항이나 실행 항목을 표시한다.

```html
<div class="action-box">
  <span class="box-label">NEXT ACTION</span>
  <strong>후속 조치 제목</strong>
  <p>
    담당자가 진행해야 할 다음 행동을 설명한다.
  </p>
</div>
```

## 13. 좌우 비교 구성

두 가지 내용을 비교하거나 나란히 설명할 때 사용한다.

```html
<div class="two-column">
  <div class="insight-box">
    <span class="box-label">CURRENT</span>
    <strong>현재 상태</strong>
    <p>현재 상황을 설명한다.</p>
  </div>

  <div class="action-box">
    <span class="box-label">TARGET</span>
    <strong>목표 상태</strong>
    <p>개선 이후의 목표 상태를 설명한다.</p>
  </div>
</div>
```

### 사용 기준

- 두 영역의 내용량이 비슷할 때 사용한다.
- 한쪽 내용이 지나치게 길면 일반 세로 구성을 사용한다.

## 14. 표

비교나 상세 데이터를 정리할 때 사용한다.

```html
<table class="report-table">
  <thead>
    <tr>
      <th>구분</th>
      <th>현재 상태</th>
      <th>개선 방향</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>검색</td>
      <td>단일 키워드 중심</td>
      <td>복합 조건 검색 강화</td>
    </tr>
  </tbody>
</table>
```

### 사용 기준

- 가능하면 5열 이하로 작성한다.
- 셀 안에 긴 문단을 넣지 않는다.
- 표가 한 페이지를 지나치게 많이 차지하면 내용을 분리한다.

## 15. 결론 패널

문서 마지막의 핵심 결론에 한 번만 사용한다.

```html
<section class="conclusion-panel">
  <h2>결론</h2>
  <p>
    문서 전체에서 확인된 핵심 결과와 최종 판단을 설명한다.
  </p>
</section>
```

### 사용 기준

- 문서 마지막에 한 번만 사용한다.
- 새로운 세부 정보를 추가하지 않는다.
- 핵심 결론과 다음 방향을 짧게 정리한다.

## 16. 페이지 제어

새 페이지에서 시작해야 하는 섹션에는 다음 class를 사용한다.

```html
<section class="report-section page-break">
```

한 페이지에서 분리되면 안 되는 영역에는 다음 class를 사용한다.

```html
<div class="keep-together">
```

## 17. 문서 구성 권장 순서

일반적인 보고서는 다음 순서를 우선 검토한다.

1. 표지
2. 핵심 요약
3. 주요 수치 또는 현재 상태
4. 배경 및 목적
5. 진행 방식 또는 업무 흐름
6. 상세 결과
7. 주요 발견 및 위험
8. 개선 방향 또는 후속 조치
9. 결론

모든 문서에 동일한 구성을 강제로 적용하지 않는다.
문서 목적과 제공된 정보에 따라 필요한 요소만 선택한다.
