# 스타일 유틸리티

PDS에서 제공하는 스타일 관련 유틸리티 함수입니다.

---

## getZIndex

레이어별 z-index 값을 반환합니다. z-index 값을 하드코딩하지 마세요.

```tsx
import { getZIndex } from '@croquiscom/pds';
const CustomOverlay = styled.div`
  z-index: ${getZIndex('modal')};
`;
```

**사용 가능한 레이어:**

```tsx
getZIndex('drawer')
getZIndex('modal')
getZIndex('bottomSheet')
getZIndex('dropdown')
getZIndex('picker')
getZIndex('notification')
getZIndex('toast')
getZIndex('popover')
getZIndex('tooltip')
```

---

## safeArea

모바일 기기의 안전 영역(노치, 홈 인디케이터) 처리용 함수입니다.

```tsx
import { safeAreaInsetTop, safeAreaInsetBottom } from '@croquiscom/pds';
const Container = styled.div`
  padding-top: ${safeAreaInsetTop()};
  padding-bottom: ${safeAreaInsetBottom()};
`;
```

---

## buildCSSWithLength

숫자를 CSS 길이 값으로 변환합니다. 숫자는 `'px'`로, 문자열은 그대로 반환합니다.

```tsx
import { buildCSSWithLength } from '@croquiscom/pds';
buildCSSWithLength(16)      // "16px"
buildCSSWithLength('1rem')  // "1rem"
```