# 디자인 규칙 (Design Rules)

> **디자인 기준(Reference)**: `app/Views/bag/daily_inventory.php` (일일 봉투 수불 현황)  
> 새 화면·뷰는 이 파일과 **일관성 있게** 디자인한다.

---

## 1. 기준 뷰

| 항목 | 값 |
|------|-----|
| 기준 파일 | `app/Views/bag/daily_inventory.php` |
| 화면명 | 일일 봉투 수불 현황 |
| 기술 스택 | Tailwind CSS v3 (CDN), Noto Sans KR |

---

## 2. 레이아웃 구조

업무 화면은 아래 순서로 구성한다. (일일 봉투 수불과 동일한 구조 권장)

| 구역 | 클래스/역할 | 비고 |
|------|-------------|------|
| **상단 네비** | `header` | 배경 흰색, 하단 보더, h-12, 로고·메뉴·로그아웃(종료) |
| **타이틀 바** | `bg-title-bar` | 배경 `#2c3e50`, 흰색 글자, 화면 제목 표시 |
| **조건/버튼 패널** | `bg-control-panel` | 배경 `#f8f9fa`, 조회 조건·버튼 영역 |
| **본문** | `main` (`.main-content-area`) | 테이블 등 콘텐츠, `height: calc(100vh - 170px)`, overflow auto |
| **푸터** | `footer` | 배경 gray-200, 상태/버전/일시 등 |

- `body`: `flex flex-col h-screen`, 전체 높이 고정·스크롤은 본문만.

---

## 3. 색상 (Tailwind config)

`tailwind.config.theme.extend.colors` 에 아래를 정의하고 사용한다.

| 이름 | 값 | 용도 |
|------|-----|------|
| `system-header` | `#ffffff` | 상단 헤더 배경 |
| `title-bar` | `#2c3e50` | 타이틀 바 배경 |
| `control-panel` | `#f8f9fa` | 조건/버튼 패널 배경 |
| `btn-search` | `#1c4e80` | 조회 버튼 배경 |
| `btn-excel-border` | `#28a745` | 엑셀 버튼 테두리 |
| `btn-excel-text` | `#28a745` | 엑셀 버튼 글자 |
| `btn-print-border` | `#ced4da` | 인쇄 버튼 테두리 |
| `btn-print-text` | `#000000` | 인쇄 버튼 글자 |
| `btn-exit` | `#d9534f` | 종료 버튼 배경 |

- 링크/강조: `text-gray-600` + `hover:text-blue-600`, 선택 메뉴: `text-blue-700 font-bold border-b-2 border-blue-700`.

---

## 4. 폰트

- **fontFamily.sans**: `'"Malgun Gothic"', '"Noto Sans KR"', 'sans-serif'`
- **Google Fonts**: `<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700&display=swap" rel="stylesheet"/>`
- 필요 시 `fontSize.xxs` (`0.65rem`) 등 확장 정의.

---

## 5. 버튼 스타일

| 종류 | 클래스 예시 | 용도 |
|------|-------------|------|
| **조회** | `bg-btn-search text-white px-4 py-1.5 rounded-sm ... shadow hover:opacity-90` | 주 액션(조회·검색) |
| **엑셀** | `bg-white text-btn-excel-text border border-btn-excel-border ... hover:bg-green-50` | 보조(엑셀 저장 등) |
| **인쇄** | `bg-white text-black border border-btn-print-border ... hover:bg-gray-50` | 보조(인쇄) |
| **종료** | `bg-btn-exit text-white ... hover:bg-red-700` | 로그아웃·닫기 |

- 아이콘은 SVG, `w-4 h-4` 등으로 크기 통일.

---

## 6. 테이블

- **클래스**: `data-table` (커스텀 스타일 블록에서 정의)
- **스타일 요약**:
  - `th`/`td`: border `#ccc`, padding `4px 8px`, font-size `13px`
  - `th`: 배경 `#e9ecef`, 굵게, 가운데 정렬
  - 짝수 행: 배경 `#f9f9f9` (zebra)
  - 행 hover: 배경 `#e6f7ff`
- 정렬: `.text-left`, `.text-right`, `.text-center` 활용.

---

## 7. 상단 네비·로고

- **로고**: 파란 사각형(`#2563eb`) 위 흰 사각형 두 개 겹친 SVG (기준 뷰와 동일 형태 권장).
- **시스템명**: "쓰레기봉투 물류시스템", `base_url()` 링크.
- **메뉴**: `text-sm font-medium text-gray-600`, hover 시 `text-blue-600`, 현재 메뉴는 `text-blue-700 font-bold border-b-2 border-blue-700`.
- **종료(로그아웃)**: X 아이콘, `hover:text-red-600`, `base_url('logout')` 링크.

---

## 8. 플래시 메시지

- 성공: `bg-green-50 text-green-700 text-sm`, `rounded-lg`, `p-3`.
- 에러: 동일 구조로 `bg-red-50 text-red-700` 등으로 통일.

---

## 9. 일관성 원칙

- 새로 만드는 **업무 화면**(목록·조회·입력 폼 등)은 위 레이아웃·색상·버튼·테이블 규칙을 따르고, `daily_inventory.php`와 **시각적으로 어울리도록** 구성한다.
- **Auth(로그인/회원가입)** 등 단순 폼은 기존대로 카드형·Inter 폰트 등 유지해도 되며, 필요 시 본 규칙의 색·버튼만 참고해 통일감을 맞출 수 있다.