:root {
    /* 기본 배경 색상 */
    --bg-main: #f8f9fa;
    --bg-footer: #2a2a2a;

    /* 푸터 텍스트 색상 */
    --footer-company-text: #cccccc;
    --footer-info-text: #dddddd;

    /* 기본 폰트 색상 */
    --font-primary: #222222;
    --font-discountPrice: #DF0000;
    --font-original-price: #767676;
    --font-required-star: #FF6764;
    --font-lightest: #9A9A9A;
    --font-light: #676767;

    /* 입력 필드 색상 */
    --input-bg: #FFFFFF;
    --input-border: #DDDDDD;
    --input-placeholder: #949494;
    --input-disabled-bg: #FAFAFA;

    /* 체크박스 색상 */
    --checkbox-bg: #FFFFFF;
    --checkbox-border: #BDBDBD;
    --checkbox-check: #666666;

    /* 디자인 요소 */
    --divider-line: #DDDDDD;

    /* 버튼 색상 - 클릭 유도용 (Primary) */
    --btn-primary-bg: #518DFC;
    --btn-primary-border: #518DFC;
    --btn-primary-text: #FFFFFF;

    /* 버튼 색상 - 클릭 비유도용 (Secondary) */
    --btn-secondary-bg: #FFFFFF;
    --btn-secondary-border: #518DFC;
    --btn-secondary-text: #518DFC;

    /* 수량 조절 */
    --quantity-control-bg: #F4F4F4;

    /* 표 관련 색상 */
    --table-border: #BDBDBD;
    --table-header-bg: #FAFAFA;
    --table-input-bg: #FFFFFF;

    /* 리뷰 평점 별표 */
    --star-rating: #FF6764;

    /* 기존 레이아웃 설정 */
    --radius: 8px;
    --shadow: 0 4px 12px rgba(0, 0, 0, .06);
    --gutter-max: 350px; /* 좌·우 여백의 최대값 */
    --gutter: clamp(24px, 18.23vw, var(--gutter-max));
    --gap: 20px;
    --arrow-gap: 65px;
    --card-w: 290px;
    --content-max: 1200px; /* 🎯 960px → 1200px로 확장 */
    --content-min: 90vw; /* 모바일에서 좌우 5% 여백 */
}