Breakpoints · min-width

모바일 우선. 기본 스타일은 작은 화면을 향하고, min-width 미디어쿼리로 큰 레이아웃을 얹습니다. 값은 전부 4px 그리드 위에 있습니다.

--bp-sm480px

--bp-md768px

--bp-lg1024px

--bp-xl1280px

sm 큰 폰 · md 태블릿/분할뷰 · lg 소형 노트북 · xl 데스크톱. — 커스텀 속성은 @media 조건에 못 들어가므로, 토큰은 기준값이고 미디어쿼리엔 같은 리터럴을 미러링합니다.

Containers · max-width

--container-sm

--container-md

--container-lg

--container-xl

.ds-container — 가운데 정렬 + 너비 상한 + 거터(16→24→32px) 자동. 본문 읽기엔 --narrow(680px).

Grid · 1 → 2 → 4

.ds-grid--4 = 모바일 1열 → md 2열 → lg 4열. 내재형 .ds-grid--auto는 들어가는 만큼 자동 채움(브레이크포인트 불필요).

Touch vs pointer

인터랙티브 타깃 최소 44×44px(터치). 포인터 환경에선 더 촘촘해도 되지만, 같은 컴포넌트가 양쪽을 다 만족하도록 히트 영역을 키웁니다 — 아이콘 자체는 작아도 버튼 박스는 44px.

Mobile ↔ desktop — 같은 의도, 다른 그릇