# 그림자

그림자는 3단계이고 서비스가 바뀌어도 같다. 다크 모드에서는 투명도가 2배, 색은 검정이 된다. Android는 그림자 대신 고도(elevation)를 쓰고 다크에서는 0이다.

| 단계 | 아래로 이동 | 번짐 | 투명도 | Android 고도 | 용도 | 라이트 CSS | 다크 CSS | 앱에서 쓴 횟수 |
| --- | --- | --- | --- | --- | --- | --- | --- | --- |
| shadow(1) | 4px | 14px | 0.06 | 2 | 카드. `PrimaryButton`, `Panel`, `SettingsGroup`, `RangeSlider` 손잡이. | `0 4px 14px rgba(27, 42, 78, 0.06)` | `0 4px 14px rgba(0, 0, 0, 0.12)` | 9 |
| shadow(2) | 6px | 18px | 0.1 | 4 | 떠 있는 요소. 탭 바 가운데 버튼, `CircleButton`, 토스트. | `0 6px 18px rgba(27, 42, 78, 0.1)` | `0 6px 18px rgba(0, 0, 0, 0.2)` | 14 |
| shadow(3) | 8px | 22px | 0.16 | 8 | 겹쳐 뜨는 면. `dialog`의 중앙 대화상자, Calendar의 드래그 중인 일정. | `0 8px 22px rgba(27, 42, 78, 0.16)` | `0 8px 22px rgba(0, 0, 0, 0.32)` | 2 |

그림자 색: 라이트 `#1B2A4E`, 다크 `#000000`.