어드민 테이블·CSS 변수·모바일 스크롤 스냅으로 스타일 일관성 개선

- `table-wrapper` 클래스 변경: - JSP 전반에서 `table-wrapper`를 `admin-table-wrapper`로 변경하여 스타일 가이드 통일성 확보. - `colspan` 관련 템플릿 동적 처리 적용.

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