JSP UI 폰트·레이아웃을 디자인 토큰으로 통일하고 반응형 개선

style: JSP UI 폰트 크기 및 레이아웃 개선

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