모바일 카드 스크롤 스냅과 디자인 토큰 반응형 개선

feat: 스타일 업데이트 및 반응형 스크롤 스냅 기능 추가

CSS/SCSS 작업은 눈에 잘 안 보이지만 쌓이면 시스템 전체 일관성에 영향 줌. 이번엔 디자인 토큰 통일과 반응형 최적화가 메인이었음.

CSS 변수 통일 작업

컴포넌트마다 4px, 6px, 8px, 12px이 혼재해있었음. 디자인 시스템 기준을 잡고 CSS 변수로 통일함.

:root {
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --color-primary: var(--site-primary, #3b82f6);
}

반응형 스크롤 스냅

모바일에서 카드 슬라이드 UX 개선을 위해 scroll-snap 적용함.

.card-scroll-wrapper {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;

  .card-item {
    scroll-snap-align: start;
    flex: 0 0 calc(100% - 32px);

    @media (min-width: 768px) {
      flex: 0 0 calc(50% - 16px);
    }
  }
}