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