---
name: 웹문서
description: SAM 프로젝트의 웹문서(PHP/HTML) 생성 시 적용되는 디자인 표준. 웹페이지, index.php, 보고서 페이지 생성 시 자동 활성화
allowed-tools: Read, Write, Edit, Glob
---

# 웹문서 스타일 가이드

이 스킬은 SAM 프로젝트의 웹문서(PHP/HTML) 생성 시 적용되는 디자인 표준입니다.

## 필수 적용 사항

### 1. 상단 홈 버튼 (필수)
모든 웹문서의 헤더에는 상위 index.php로 이동하는 홈 버튼을 포함해야 합니다:

```html
<a href="../index.php" class="flex items-center justify-center w-10 h-10 bg-slate-100 hover:bg-teal-100 rounded-lg transition-colors" title="홈으로">
    <span class="text-xl">🏠</span>
</a>
```

### 2. 디자인 철학 (Core Philosophy)

- **주제**: Professional Trust (신뢰 기반의 전문성)
- **분위기**: 깔끔함, 신뢰감, 데이터 중심적인 명확성
- **핵심 키워드**: Teal, Navy, White, Light Gray, Modern Typography

### 3. 색상 사양 (Color Palette)

#### 기본 색상 (Brand Colors)
- **Primary (Teal)**: `#0d9488` (Tailwind: `teal-600`) - 핵심 강조 색상, 활성화 상태
- **Secondary (Navy/Slate)**: `#1e293b` (Tailwind: `slate-800`) - 제목, 텍스트, 신뢰감을 주는 배경
- **Accent (Amber)**: `#f59e0b` (Tailwind: `amber-500`) - 차트의 추세선 등 보조 강조

#### 배경 및 테두리
- **Body Background**: `#f3f4f6` (Tailwind: `gray-100`)
- **Container Background**: `#ffffff` (White)
- **Border**: `#e2e8f0` (Tailwind: `slate-200`)

### 4. 타이포그래피 (Typography)

- **Font Family**: `'Noto Sans KR', sans-serif` (Google Fonts)
- **Heading Styles**:
  - Main Title: `text-2xl font-bold text-slate-800`
  - Sub Title: `text-lg font-bold text-slate-700`
- **Body Text**: `text-slate-600 leading-relaxed`

### 5. UI 컴포넌트 표준

#### 상단 네비게이션 (Sticky Header)
```html
<header class="bg-white shadow-sm sticky top-0 z-50">
    <div class="max-w-6xl mx-auto px-4">
        <div class="flex items-center justify-between py-4">
            <div class="flex items-center space-x-4">
                <a href="../index.php" class="flex items-center justify-center w-10 h-10 bg-slate-100 hover:bg-teal-100 rounded-lg transition-colors" title="홈으로">
                    <span class="text-xl">🏠</span>
                </a>
                <h1 class="text-xl font-bold text-slate-800">페이지 제목</h1>
            </div>
            <span class="text-sm text-slate-500">날짜</span>
        </div>
    </div>
</header>
```

#### 활성화된 탭
```css
.nav-active { border-bottom: 3px solid #0d9488; color: #0d9488; font-weight: 700; }
```

#### 정보 카드
- 사각 모서리 둥글게: `rounded-xl`
- 가벼운 그림자: `shadow-sm`
- 호버 효과: `hover:shadow-md transition-shadow`
- 왼쪽 테두리 강조: `border-l-4 border-teal-600`

#### 차트 (Chart.js)
- 스타일: `max-height: 400px`
- 색상: Teal(`rgba(13, 148, 136, 0.2)`) 또는 Blue(`rgba(59, 130, 246, 0.2)`)

### 6. 코딩 규칙

- **CSS Framework**: Tailwind CSS (CDN 방식)
```html
<script src="https://cdn.tailwindcss.com"></script>
```

- **폰트**:
```html
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700&display=swap" rel="stylesheet">
```

- **SVG 지양**: 유니코드 이모지(🏢, 📈, 💰) 사용

- **애니메이션**: fade-in 효과
```css
.fade-in {
    animation: fadeIn 0.5s ease-out forwards;
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
```

- **반응형**: 모바일 우선 + `md:` 접두사

- **커스텀 스크롤바**:
```css
.custom-scroll::-webkit-scrollbar { width: 6px; height: 6px; }
.custom-scroll::-webkit-scrollbar-track { background: #f1f5f9; border-radius: 10px; }
.custom-scroll::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; }
```

### 7. 기본 HTML 템플릿

```html
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>페이지 제목</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700&display=swap" rel="stylesheet">
    <style>
        * { font-family: 'Noto Sans KR', sans-serif; }
        .nav-active { border-bottom: 3px solid #0d9488; color: #0d9488; font-weight: 700; }
        .fade-in { animation: fadeIn 0.5s ease-out forwards; }
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .custom-scroll::-webkit-scrollbar { width: 6px; }
        .custom-scroll::-webkit-scrollbar-track { background: #f1f5f9; border-radius: 10px; }
        .custom-scroll::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; }
    </style>
</head>
<body class="bg-gray-100 min-h-screen">
    <header class="bg-white shadow-sm sticky top-0 z-50">
        <div class="max-w-6xl mx-auto px-4">
            <div class="flex items-center justify-between py-4">
                <div class="flex items-center space-x-4">
                    <a href="../index.php" class="flex items-center justify-center w-10 h-10 bg-slate-100 hover:bg-teal-100 rounded-lg transition-colors" title="홈으로">
                        <span class="text-xl">🏠</span>
                    </a>
                    <h1 class="text-xl font-bold text-slate-800">페이지 제목</h1>
                </div>
                <span class="text-sm text-slate-500">날짜</span>
            </div>
        </div>
    </header>

    <main class="max-w-6xl mx-auto px-4 py-8">
        <!-- 콘텐츠 -->
    </main>

    <footer class="bg-slate-800 text-white py-8 mt-12">
        <div class="max-w-6xl mx-auto px-4 text-center">
            <p class="text-xs text-slate-500">© SAM</p>
        </div>
    </footer>
</body>
</html>
```
