# VVIP 가격 카드 디자인 미리보기

스쿨뮤직 상품 상세 페이지에 `07-schoolmusic-product-style.js`가 자동 주입하는 요소들을 정적 마크업으로 미리 볼 수 있는 페이지입니다. JS 파일 재구현 시 이 디자인 그대로 만들어 주세요.

### 1. VVIP 가격 카드 (PC)

상품 상세 페이지 가격표 아래 빈 `<tr><td colspan="2">` 영역에 삽입됩니다.

20% 8,500원 6,800원
VVIP 회원 특별가 329,000원 절약 29,000원
멤버십 가입 >

### 2. Npay 이벤트 박스

페이지 내 `<img src="...npay_icon3.png">` 옆 텍스트를 자동 추출해서 상단 강조 박스로 표시.

Npay 이벤트 5.13~05-31 신한·우리·농협카드 6만원↑ 결제 시 6%즉시할인

### 3. 스쿨뮤직 혜택 박스

고정 문구. 모든 상품 상세에 동일하게 표시됩니다.

스쿨뮤직 혜택 일반카드결제시 12개월 무이자 가능

### 4. 모바일 VVIP 카드

모바일 페이지(`/mobile/product_view.php`)에서는 세로 카드 레이아웃으로 표시.

VVIP 회원 특별가
329,000원 절약 29,000원

월 2,400원으로 1년 멤버십 가입

### 5. 적용 제외 상품 안내 (작은 라벨)

`<body data-vvip-excluded="true">` 가 설정된 상품 상세 페이지에서는 VVIP 가격 카드 대신 작은 회색 라벨이 표시됩니다. 마우스를 올리면 풀 안내가 툴팁으로 노출됩니다.

20% 8,500원 6,800원
ⓘ VVIP 특별가 적용 제외 상품

### 색상 토큰

--c-red: #ec0d2e /* VVIP 빨강 */ --c-red-deep: #b80020 --c-red-bg: #fff5f6 /* VVIP 카드 배경 */ --c-red-bg-2: #ffe9ec --c-red-border: #f4c5c9 --c-npay: #03c75a /* Npay 그린 */ --c-npay-bg: #f4faf6 --c-npay-border:#d8e9df --c-gold: #f0c76b /* 제외 상품 안내 */ --c-gold-bg: rgba(240,199,107,.08) --c-gold-border:rgba(240,199,107,.32) --c-gold-ink: #8a6510