엘리베이션Elevation

xs → lg 4단계로 깊이감을 표현합니다. 각 그림자는 두 겹의 오프셋을 가져 종이 위에 물건이 놓인 듯한 자연스러움을 냅니다. 순흑 대신 rgba(15, 21, 35, …)를 사용해 화면 색과 어우러집니다.

z-index는 의미를 가진 8단계로만 관리합니다. 임의의 숫자 (z-[9999] 같은)를 넣지 말고 반드시 아래 토큰을 사용하세요 — 층위가 꼬이면 디버깅이 어렵습니다.

1. 그림자는 최후의 수단 — 구분을 만들 땐 공간(margin) → 색 대비 → 테두리 → 그림자 순. 그림자는 “떠 있어야 한다”는 메시지가 명확할 때만 씁니다.

2. 같은 층위는 같은 그림자 — 한 페이지의 모든 카드가 shadow-sm을 쓰면 그것이 “카드의 층위”입니다. 한 카드만 md를 쓰면 뭔가 다른 메시지를 담았다는 뜻이 됩니다.

3. 호버에서 한 단계만 올린다 — sm 카드는 호버 시 md까지. xs→lg처럼 두 단계 이상 점프시키면 시각적 점프가 과합니다.

4. 다크 모드에서는 그림자보다 테두리 — 어두운 배경에서는 그림자가 거의 보이지 않습니다. 대신 border를 한 단계 밝히는 전략을 씁니다.