반경
--radius 는 0.75rem 입니다. 카드는 16px(xl), 버튼·입력은 12px(lg) 가 됩니다.
1rem 은 카드가 20px 이 되어 과하게 둥글었습니다. 0.75rem 이면 카드 16px · 버튼 12px 로, 유리판의 모서리로 읽힙니다. 파생 값은 --radius-sm 부터 --radius-4xl 까지 ±4px 단위입니다. 버튼·입력 클래스 상수는 rounded-[var(--radius)] 를 직접 씁니다.
유리는 모서리에서 빛을 받는다
면 전체가 위에서 밝고 아래서 어두우면 그건 유리가 아니라 점토입니다.
위가 밝고 아래가 어두운 조합이 볼록한 입체로 읽히는 유일한 원인입니다. 그래서 blur 를 준 내부 그림자 대신 blur 0 의 1px 헤어라인을 씁니다. 번지지 않으므로 면이 부풀지 않고 모서리만 빛납니다. 아래쪽도 어둡게가 아니라 아주 옅게 밝게 둡니다 — 판의 아랫날입니다.
접지 그림자(0 1px 2px)는 큰 확산 그림자와 역할이 다릅니다. 확산 그림자만 있으면 카드가 공중에 뿌옇게 떠 있고, 접지 그림자가 있어야 놓여 있는 것으로 읽힙니다. 둘을 같이 쓰되 둘 다 얕게 유지합니다. 깊이는 엠보싱이 아니라 blur 에서 옵니다.
모서리·그림자 토큰
box-shadow 값입니다. 라이트·다크 판을 나란히 그렸습니다.
바깥 잉크 헤어라인. 흰 배경과의 경계를 만든다.
같은 헤어라인의 옅은 판. glass-secondary·glass-btn.
접지 그림자. 이게 있어야 '놓여 있는' 판으로 읽힌다.
확산 그림자. 팝오버가 쓴다.
윗날의 흰 헤어라인. blur 0 이라 면이 부풀지 않는다.
아랫날. 어둡게가 아니라 아주 옅게 밝게.
안쪽 1px 흰 선. 테두리를 한 겹 더 또렷하게.
눌린 상태의 안쪽 그림자. uyoo-pressed·glass-btn:active.
눌린 판의 아랫날 하이라이트.
그림자 클래스
유리 위에 얹어 쓰는 완성 클래스입니다.