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

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

---

### 1. 디자인 철학 (Design Philosophy)
*   **Minimalist & Stark**: Vercel 스타일의 극도로 간결하고 현대적인 디자인을 지향합니다.
*   **Achromatic Base**: 블랙(#171717)과 화이트를 기본으로 하며, 정보의 구분은 얇은 헤어라인(#ebebeb)을 사용합니다.
*   **Fluid & Responsive**: 고정된 픽셀 대신 화면 크기에 비례하여 UI 밀도가 변하는 유동적 스케일링 시스템을 적용합니다.

### 2. 반응형 스케일링 (Fluid Scaling System)
*   **Core Principle**: 모든 UI 요소는 `vmin`과 `vw` 단위를 조합한 `clamp()` 함수를 통해 화면 크기에 맞춰 동적으로 변화합니다.
*   **Typography Scale**:
    *   **XS**: `clamp(10px, 1.2vmin + 0.2vw, 15px)` - 보조 텍스트
    *   **SM**: `clamp(12px, 1.4vmin + 0.3vw, 18px)` - 필터, 일반 라벨
    *   **Base**: `clamp(14px, 1.6vmin + 0.4vw, 22px)` - 본문, 테이블 데이터
    *   **MD**: `clamp(18px, 2.5vmin + 0.5vw, 30px)` - 섹션 소제목
    *   **LG**: `clamp(24px, 4vmin + 0.6vw, 48px)` - 페이지 대제목
    *   **XL**: `clamp(32px, 6vmin + 0.8vw, 72px)` - 핵심 통계 지표
*   **Layout Units**:
    *   **Header Height**: `clamp(50px, 8vmin, 90px)`
    *   **Base Spacing**: `clamp(0.75rem, 3vmin, 3rem)`
    *   **Radius**: `clamp(6px, 1.5vmin, 16px)`

### 3. 컬러 팔레트 (Vercel Stark Palette)
*   **Primary**: `#171717` (Stark Black) - 텍스트, 주요 버튼, 강조 요소.
*   **Secondary**: `#888888` (Mute) - 보조 텍스트, 비활성 아이콘.
*   **Border**: `#ebebeb` (Hairline) - 정보 구분선.
*   **Background**: `#ffffff` (Canvas), `#fafafa` (Soft), `#f5f5f5` (Soft 2).
*   **Accents**: Blue(`#0070f3`), Orange(`#f5a623`), Danger(`#ee0000`).

### 4. 컴포넌트 및 레이아웃 규칙 (Component Rules)
*   **Header & Navigation**:
    *   상단 1열 통합 바 형태를 유지하며, GNB와 LNB를 동일 라인에 배치하여 공간을 효율적으로 사용합니다.
*   **Unified Filter Bar**:
    *   검색창과 필터는 상단 타이틀 바로 아래(기존 액션 버튼 라인)까지 올려서 배치합니다.
    *   **Action Group**: '자산 추가', '부품 마스터' 등의 주요 액션 버튼은 검색창과 같은 라인의 최우측에 정렬합니다.
*   **Dashboard**:
    *   **Single-Screen View**: 1920*1080(또는 1920*919) 해상도에서 스크롤 없이 한 화면에 핵심 정보가 모두 보이도록 최적화합니다.
    *   **Fixed Charts**: 차트 내부 숫자나 요소에 애니메이션(`animation: false`) 및 플로팅 레이블을 배제하여 정적인 안정성을 확보합니다.
*   **Footer**:
    *   화면 최하단에 위치하며, 텍스트는 **우측 정렬(Right-aligned)**합니다.
    *   상단에 1px 헤어라인 구분선을 가집니다.
*   **Security & UX**:
    *   **Text Selection**: 사용자의 실수에 의한 UI 드래그 방지를 위해 입력창(`input`, `textarea`)을 제외한 전체 영역의 텍스트 선택을 차단합니다.
    *   **View Toggle**: '서버' 탭 등 특정 탭에서만 '목록보기' 체크박스를 통해 뷰를 전환하며, 그 외 화면은 리스트 중심의 UI를 제공합니다.