# 🎨 ITAM 시스템 디자인 가이드 (Design Guide)

본 문서는 ITAM(IT Asset Management System)의 시각적 일관성과 사용자 경험을 유지하기 위한 핵심 디자인 원칙을 정의합니다.

---

### 1. 디자인 철학 (Design Philosophy)
*   **Minimalist & Border-based**: 불필요한 박스(Card) 사용을 최소화하고, 정보의 구분은 간결한 라인(Border/Divider)을 활용하여 시각적 피로도를 낮춥니다.
*   **Professional Achromatic**: 무채색(Black, White, Grey)을 기본으로 하여 정돈된 업무 환경을 제공합니다.
*   **Green Accent**: 블루 대신 짙은 그린(`#1E5149`)을 포인트 컬러로 사용하여 차분한 전문성을 강조합니다.

### 2. 타이포그래피 (Typography)
*   **Font Family**: `Pretendard Variable`, `Pretendard` (전역 적용)
*   **Base Font Size**: 기본 텍스트 크기는 **16px**로 설정합니다.
*   **Letter Spacing**: `-0.02em` (약 -2%) 적용. 자간을 좁게 설정하여 밀도 있고 세련된 가독성을 확보합니다.
*   **Weights**: 400(Regular), 500(Medium), 600(SemiBold), 700(Bold), 800(ExtraBold), 900(Black).
*   **Standard Scale**:
    *   **XS (12px)**: 보조 텍스트, 작은 라벨
    *   **SM (14px)**: 일반 항목 라벨, 필터 텍스트
    *   **Base (16px)**: 메인 데이터 내용, 테이블 셀, 상세 정보 값
    *   **MD (19px)**: 섹션 제목, 강조 문구
    *   **LG (23px)**: 주요 페이지 타이틀
    *   **XL (29px)**: 핵심 통계 수치 (KPI)

### 3. 컬러 팔레트 (Color Palette)
*   **Point Color**: `#1E5149` (Deep Green) - 강조, 활성화 상태, 주요 액션 버튼.
*   **Text**: Main(`#111827` - Near Black), Muted(`#6B7280` - Grey).
*   **Border/Divider**: `#E5E7EB` (Light Grey) - 정보 구분을 위한 얇은 실선.
*   **Background**: `#FFFFFF` (White) / `#F9FAFB` (Off White).

### 4. 레이아웃 및 컴포넌트 규칙 (Layout Rules)
*   **Box-less Design**: 꼭 필요한 정보 묶음(데이터 그룹화 등)이 아니면 박스 형태의 테두리나 배경 사용을 지양합니다.
*   **Line-based Division**: 섹션 간의 구분은 1px 두께의 얇은 실선(Border)을 통해 명확히 합니다.
*   **Table**: 배경색이나 화려한 효과 없이 행(Row) 간의 얇은 구분선만 사용하여 데이터 본연에 집중하게 합니다.
*   **Input/Button**: 입력 필드와 버튼은 최소한의 보더와 포인트 컬러만 사용하여 정갈하게 표현합니다.
    *   **Standard Height**: 입력창 및 선택창은 전역 표준인 `38px`를 유지합니다.
*   **Modal (모달 공통 규칙)**:
    *   **Header**: 짙은 그린(`#1E5149`) 배경에 화이트 텍스트를 사용하며, 우측 상단에 명확한 'X' 닫기 버튼을 배치합니다.
    *   **Interaction**: 사용자의 오입력(실수로 바깥을 클릭하여 입력 내용이 날아가는 현상)을 방지하기 위해 **모달 바깥 영역(Overlay) 클릭 시 모달이 닫히지 않도록** 설정합니다. 닫기는 오직 'ESC' 키 또는 명시적인 'X' 및 '닫기' 버튼을 통해서만 가능합니다.
    *   **Layout**: 2열 그리드 시스템을 권장하며, 하단 우측에 액션 버튼(닫기, 저장 등)을 배치합니다.