Separator

시각적 구분선. Mobile Divider는 deprecated alias — Separator로 통일.

Mobile

시각적 명세는 web과 동일. 다만 모바일은 hairline 단위가 다르므로 두께 정의 시 주의:

• 두께: 기본 1px. RN에서는 StyleSheet.hairlineWidth (보통 0.5px on @2x/@3x 디스플레이)로 더 세련된 표현 가능 — 단, design system 일관성을 위해 1px 고정 권장. hairline은 별도 variant로만 채택
• 색상: stone-100 (= DesignColors.warmGray[100])
• inset: List/Card 내부 separator는 좌측 padding을 콘텐츠 시작 지점에 맞추는 inset 패턴 사용 — Item Mobile의 행 구분과 일관
• 비-인터랙티브 시각 요소이므로 터치 타겟 고려 불필요

Preview

Variants

• horizontal (default)
• vertical
• inset — 좌측 여백 (리스트 아이템 간 구분용)

Sizes

Size prop 미지원. Separator는 1px 고정. size prop 없음. orientation horizontal/vertical만

Token Mapping

Usage

<Separator />                          // horizontal
<Separator orientation="vertical" />  // vertical
<Separator inset />                    // inset (left indented)

Do / Don't

• Do: 구조적 경계용으로만 사용
• Don't: 카드 테두리 대체 용도 금지
• Don't: 장식적 용도로 남용 금지