Glassmorphism

# Glassmorphism — web 디자인 팩

## 이 스타일의 정체성
반투명 서리 낀 유리 표면이 컬러풀한 배경 위에 부유한다. 핵심은 `backdrop-filter: blur` — 패널 뒤 배경색이 흐릿하게 비쳐 깊이감을 만든다. 패널 가장자리에는 빛이 닿은 듯한 얇은 흰 하이라이트 보더. 깊이는 그림자가 아니라 레이어 겹침과 블러 강도 차이로 표현한다. "유리판을 여러 장 겹쳐 올린" 인상이 정답.

## 색
- 배경: 고정 그라디언트 — `linear-gradient(135deg, #6a5cff 0%, #ff7ac6 50%, #44d4ff 100%)` (보라-핑크-시안 3정점). 배경에만 그라디언트 허용.
- 유리 표면: `rgba(255,255,255,0.14)` ~ `rgba(255,255,255,0.22)` (불투명도 0.14~0.22 범위 고정)
- 유리 보더(하이라이트): `1px solid rgba(255,255,255,0.45)`
- 텍스트(유리 위): `#ffffff` (제목), `rgba(255,255,255,0.78)` (본문) — 대비 WCAG AA 확보를 위해 본문은 0.78 미만으로 낮추지 않는다.
- 강조: `#ffffff` 솔리드 버튼 1종. 강조색은 별도로 두지 않고 배경 그라디언트가 색을 담당.

## 타이포그래피
- 전체 폰트: `Inter, "SF Pro Text", system-ui, sans-serif` (Inter는 Google Fonts 공개 웹폰트)
- H1: `clamp(2.5rem, 5.5vw, 4.5rem)`, weight 600, letter-spacing `-0.02em`, line-height 1.1
- H2: `1.75rem`, weight 600
- 본문: `1.0625rem`, weight 400, line-height 1.65
- 라벨: `0.8125rem`, weight 500, letter-spacing `0.03em`
- 텍스트는 가볍고 깨끗하게 — 굵은 디스플레이 폰트 쓰지 않는다.

## 레이아웃 / 그리드
- 콘텐츠 최대 폭 `1080px`, 좌우 패딩 `24px`
- 중앙 정렬 레이아웃. 히어로·주요 패널을 화면 중앙에 부유.
- 브레이크포인트: `<768px` 1열, `>768px` 패널 다중
- 섹션 간격 `100px` (airy — 여백 넉넉히), 패널 내부 패딩 `32~40px`
- 유리 패널들을 의도적으로 살짝 겹쳐(`margin` 음수 또는 `transform`) 깊이 레이어를 만든다.

## 형태 / 질감
- radius `20px` — 크게 둥근 모서리(유리판 느낌).
- 유리 표면 공식: `background: rgba(255,255,255,0.16); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.45);`
- 그림자: 아주 부드럽고 넓게 — `box-shadow: 0 8px 32px rgba(31,38,135,0.2)`. 단, 그림자는 깊이의 보조일 뿐 주역은 블러.
- 블러 강도로 레이어 위계: 배경 가까운 패널 `blur(12px)`, 전면 패널 `blur(24px)`.
- 아이콘: 가는 선(1.5px stroke), 흰색.

## 모션
- subtle. 트랜지션 `300ms ease`.
- 호버 시 패널 불투명도를 `0.16 → 0.24`로 올리고 `translateY(-4px)`.
- 패널 등장 시 `blur`와 `opacity`가 함께 페이드인(`300ms`).
- 과한 모션 금지 — 유리는 천천히 떠오른다.

## 하지 말 것
- 배경 그라디언트를 보라-핑크 2색 디폴트로 만들지 말 것 — 위에 지정한 3정점(보라·핑크·시안)을 유지.
- 유리 표면 불투명도를 0.14 미만(너무 투명해 텍스트가 안 읽힘)이나 0.5 초과(유리감 상실)로 두지 말 것.
- `backdrop-filter`를 빼고 그냥 반투명 흰 박스만 쓰지 말 것 — 블러가 빠지면 글래스가 아니다.
- 본문 텍스트 불투명도를 0.78 미만으로 낮춰 대비를 깨지 말 것(접근성).
- 직각 모서리·하드 섀도 금지. 이모지·blob 일러스트 금지.
- 유리 패널을 화면에 10개씩 남발하지 말 것 — 겹침은 2~3겹까지.

## 적용 예
- **히어로**: 보라-핑크-시안 그라디언트 배경 중앙에 유리 패널 1장(`blur(24px)`, radius 20px, 흰 하이라이트 보더). 패널 안에 흰 H1 + 0.78 불투명 본문 + 흰 솔리드 버튼.
- **카드**: 반투명 유리 패널 3개를 약간 겹쳐 배치, 각각 다른 blur 강도. radius 20px, 1px 흰 하이라이트 보더, 0 8px 32px 부드러운 그림자. 호버 시 불투명도 상승 + 살짝 떠오름.
- **푸터**: 색 반전 없음 — 그라디언트 배경 위 가장 옅은 유리 패널(`blur(12px)`, 불투명도 0.10), 흰 텍스트.