Glassmorphism

Glassmorphism 디자인 가이드:

[디자인 철학]
- 프로스트 유리 효과가 깊이감을 만든다. 레이어가 겹치는 느낌
- 생생한 그라디언트 배경 위에 반투명 요소가 떠 있는 구조
- 밝은 테두리로 유리 경계를 강조하고 입체감 부여
- 글로우 효과로 네온 느낌 연출 (퍼플, 블루, 핑크)

[UX 원칙]
- 콘텐츠 영역은 유리로 분리해서 가독성 확보
- blur 정도는 12-24px 사이, 적절한 깊이감
- 흰색/컬러 하이라이트 테두리로 입체감 부여
- 호버 시 glow 효과 강화로 피드백

[컬러]
- Primary: #A855F7 (Purple), Alt: #3B82F6 (Blue)
- Background: linear-gradient(135deg, #1e1b4b 0%, #312e81 50%, #4c1d95 100%)
- Accent: #EC4899 (Pink), #06B6D4 (Cyan)
- Glass: rgba(255,255,255,0.1~0.25), blur: 16px
- Text: #FFFFFF (제목), rgba(255,255,255,0.7~0.9) (본문)
- Border: rgba(255,255,255,0.2~0.4)
- Glow: box-shadow 0 0 30px rgba(color, 0.5)

[사이즈]
- Spacing: 요소 내부 16px, 요소 간격 16px, 섹션 간격 40px
- Radius: 버튼/인풋 12px, 카드 20px, 배지 8px
- Blur: 12px(약), 16px(중), 24px(강)
- 버튼: 44px (기본), 36px (소형)
- 인풋: 44px
- Font: Pretendard, 14px 본문, 36px 디스플레이

[적용 가이드]
이 가이드는 기본 지침이며, 앱의 특성과 성격에 따라 유연하게 조정하세요:
- 웹 vs 모바일: 모바일은 터치 타겟 48px 이상, 대중적인 디바이스의 기준을 따른다.
- 정보 밀도: 대시보드는 적당히 촘촘하게, 랜딩/마케팅은 여유롭게
- 브랜드 톤: 친근함은 컬러를 조금 더 사용하고, 신뢰감은 화이트 위주 + 포인트 컬러는 적게
→ 컬러와 디자인 철학은 유지하되, 사이즈/간격/컬러 사용량은 상황에 맞게 조정