참고 디자인을 기반으로 전면 리디자인 완료

## 주요 변경사항

### 디자인 시스템 개선
- 새로운 색상 팔레트 적용 (민트, 보라, 파랑 기반)
- Tailwind CSS 스타일 그림자 시스템
- 개선된 카드 스타일 (1px 테두리, 큰 border-radius)
- 부드러운 애니메이션 (cubic-bezier)
- 타이포그래피 개선 (letter-spacing, 색상 계층)

### 메인 대시보드 리디자인
- KPI 카드: 그라디언트 배경, 원형 아이콘 컨테이너, 큰 숫자
- 빠른 시작: 개선된 아이콘 크기와 그림자
- 진행 중인 이벤트: 깔끔한 레이아웃, 민트 배지
- 최근 활동: 그라디언트 아이콘, 더 큰 간격
- FAB 버튼: 보라색 글로우 효과

### 레이아웃 개선
- 더 넓은 여백과 간격 (mb: 6, spacing: 4)
- 밝은 회색 배경 적용
- 화이트 카드 배경
- 개선된 반응형 패딩

### Header 오버레이 수정
- 모든 페이지에 적절한 상단 패딩 추가
- containerStyles.page에 pt 추가

🤖 Generated with Claude Code
Co-Authored-By: Claude <noreply@anthropic.com>

src/shared/lib/button-styles.ts

@@ -0,0 +1,156 @@
+// 새로운 디자인 시스템 색상 (참고 이미지 기반)
+export const colors = {
+  mint: '#4DD6D3',
+  mintLight: '#7EE7E4',
+  purple: '#A78BFA',
+  purpleLight: '#C4B5FD',
+  blue: '#60A5FA',
+  blueLight: '#93C5FD',
+  pink: '#F472B6',
+  pinkLight: '#F9A8D4',
+  orange: '#FB923C',
+  orangeLight: '#FDBA74',
+  gray: {
+    50: '#F9FAFB',
+    100: '#F3F4F6',
+    200: '#E5E7EB',
+    300: '#D1D5DB',
+    400: '#9CA3AF',
+    500: '#6B7280',
+    600: '#4B5563',
+    700: '#374151',
+    800: '#1F2937',
+    900: '#111827',
+  },
+};
+
+// 공통 버튼 그라디언트 스타일
+export const buttonGradients = {
+  primary: `linear-gradient(135deg, ${colors.purple} 0%, ${colors.blue} 100%)`,
+  primaryHover: `linear-gradient(135deg, ${colors.purpleLight} 0%, ${colors.blueLight} 100%)`,
+  secondary: `linear-gradient(135deg, ${colors.mint} 0%, ${colors.blue} 100%)`,
+  secondaryHover: `linear-gradient(135deg, ${colors.mintLight} 0%, ${colors.blueLight} 100%)`,
+  success: `linear-gradient(135deg, ${colors.mint} 0%, #34D399 100%)`,
+  successHover: `linear-gradient(135deg, ${colors.mintLight} 0%, #6EE7B7 100%)`,
+  error: `linear-gradient(135deg, #EF4444 0%, ${colors.pink} 100%)`,
+  errorHover: `linear-gradient(135deg, #F87171 0%, ${colors.pinkLight} 100%)`,
+  warning: `linear-gradient(135deg, ${colors.orange} 0%, #FBBF24 100%)`,
+  warningHover: `linear-gradient(135deg, ${colors.orangeLight} 0%, #FCD34D 100%)`,
+  info: `linear-gradient(135deg, ${colors.blue} 0%, ${colors.mint} 100%)`,
+  infoHover: `linear-gradient(135deg, ${colors.blueLight} 0%, ${colors.mintLight} 100%)`,
+};
+
+// 공통 버튼 스타일
+export const getGradientButtonStyle = (variant: keyof typeof buttonGradients = 'primary') => ({
+  background: buttonGradients[variant],
+  color: 'white',
+  fontWeight: 600,
+  borderRadius: 3,
+  textTransform: 'none' as const,
+  transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
+  boxShadow: '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)',
+  '&:hover': {
+    background: buttonGradients[`${variant}Hover` as keyof typeof buttonGradients],
+    transform: 'translateY(-2px)',
+    boxShadow: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
+  },
+  '&:active': {
+    transform: 'translateY(0)',
+  },
+});
+
+// 공통 카드 스타일
+export const cardStyles = {
+  default: {
+    borderRadius: 4,
+    bgcolor: 'white',
+    boxShadow: '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)',
+    transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
+    border: '1px solid',
+    borderColor: colors.gray[100],
+  },
+  hover: {
+    '&:hover': {
+      boxShadow: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
+      transform: 'translateY(-4px)',
+      borderColor: colors.gray[200],
+    },
+  },
+  clickable: {
+    cursor: 'pointer',
+    borderRadius: 4,
+    bgcolor: 'white',
+    boxShadow: '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)',
+    transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
+    border: '1px solid',
+    borderColor: colors.gray[100],
+    '&:hover': {
+      boxShadow: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
+      transform: 'translateY(-4px)',
+      borderColor: colors.gray[200],
+    },
+  },
+};
+
+// 공통 컨테이너 스타일
+export const containerStyles = {
+  page: {
+    pt: { xs: 7, sm: 8 },
+    minHeight: '100vh',
+    bgcolor: colors.gray[50],
+    pb: 10,
+  },
+  section: {
+    maxWidth: 'lg',
+    mx: 'auto',
+    px: { xs: 3, sm: 4, md: 5 },
+    py: { xs: 4, sm: 5 },
+  },
+  centeredForm: {
+    minHeight: '100vh',
+    display: 'flex',
+    flexDirection: 'column' as const,
+    justifyContent: 'center',
+    alignItems: 'center',
+    px: 3,
+    py: 8,
+    bgcolor: colors.gray[50],
+  },
+};
+
+// 공통 반응형 텍스트 스타일
+export const responsiveText = {
+  h1: {
+    fontSize: { xs: '1.875rem', sm: '2.25rem', md: '3rem' },
+    fontWeight: 700,
+    color: colors.gray[900],
+    letterSpacing: '-0.025em',
+  },
+  h2: {
+    fontSize: { xs: '1.5rem', sm: '1.875rem', md: '2.25rem' },
+    fontWeight: 700,
+    color: colors.gray[900],
+    letterSpacing: '-0.025em',
+  },
+  h3: {
+    fontSize: { xs: '1.25rem', sm: '1.5rem', md: '1.875rem' },
+    fontWeight: 600,
+    color: colors.gray[900],
+    letterSpacing: '-0.025em',
+  },
+  h4: {
+    fontSize: { xs: '1.125rem', sm: '1.25rem', md: '1.5rem' },
+    fontWeight: 600,
+    color: colors.gray[800],
+  },
+  body1: {
+    fontSize: { xs: '0.875rem', sm: '1rem' },
+    color: colors.gray[700],
+    lineHeight: 1.6,
+  },
+  body2: {
+    fontSize: { xs: '0.8125rem', sm: '0.875rem' },
+    color: colors.gray[600],
+    lineHeight: 1.5,
+  },
+};