CSS 디자인 토큰 통일과 모바일 카드 스크롤 스냅 개선

fix: 아이디/비밀번호 찾기 페이지 버튼 CSS 셀렉터 scope 추가

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);
    }
  }
}