# CSS 및 디자인 가이드라인 (Tone and Manner)

이 문서는 `kodata.php` 파일에 적용된 디자인 철학과 스타일 표준을 정의합니다. 향후 프로젝트의 일관성을 유지하기 위한 지침으로 활용합니다.

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

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

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

### 기본 색상 (Brand Colors)

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

### 배경 및 테두리 (Backgrounds & Borders)

- **Body Background**: `#f3f4f6` (Tailwind: `gray-100`) - 부드러운 중립 톤의 연회색.
- **Container Background**: `#ffffff` (White) - 기본 카드 및 섹션 배경.
- **Border**: `#e2e8f0` (Tailwind: `slate-200`) - 최소한의 구분선.

## 3. 타이포그래피 (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`

## 4. UI 컴포넌트 표준 (UI Components)

### 상단 네비게이션 (Sticky Header)

- 하얀색 배경(`bg-white`)에 그림자(`shadow-sm`)를 적용하고 상단 고정(`sticky top-0`).
- 활성화된 탭(`nav-active`): 하단에 3px 두께의 Teal 테두리 적용.

### 정보 카드 (Information Cards)

- 사각 모서리 둥글게(`rounded-xl`), 가벼운 그림자(`shadow-sm`).
- 호버 시 효과: `hover:shadow-md transition-shadow`.
- 왼쪽 테두리 강조: 특정 카드는 `border-l-4 border-teal-600`으로 시각적 계층 부여.

### 차트 (Charts)

- **라이브러리**: Chart.js 사용.
- **스타일**: `max-height: 400px`로 제한하여 화면의 정체성을 유지.
- **색상**: Teal(`rgba(13, 148, 136, 0.2)`) 또는 Blue(`rgba(59, 130, 246, 0.2)`) 투명도 적용.

### 타임라인 (Timeline)

- 세로선: `border-l-2 border-slate-200`.
- 포인트: `bg-teal-600` 원형 포인트.

## 5. 코딩 규칙 (Coding Rules)

- **CSS Framework**: Tailwind CSS (CDN 방식 사용).
- **SVG 지양**: 최대한 유니코드 이모지(🏢, 📈, 💰)를 사용하여 가볍고 직관적인 UI 구성.
- **애니메이션**: `fade-in` 유틸리티를 통한 부드러운 섹션 전환 (`opacity` & `translateY`).
- **반응형**: 모바일 우선(Mobile-first) 접근 후 `md:` 접두사를 활용한 데스크탑 레이아웃 최적화.

## 6. 특이사항

- **스크롤바 커스텀**: `.custom-scroll` 클래스를 통해 슬림하고 둥근 형태의 스크롤바 디자인 적용.
- **인터랙션**: 데이터가 많은 경우 `hidden` 클래스와 JavaScript `switchTab` 함수를 사용하여 SPA(Single Page Application) 느낌의 탭 변환 구현.