# VVIP 가격 카드 - 개발자 전달용

JS 없이 HTML 조각 + CSS만 상품 상세 템플릿에 넣으면 됩니다.
미리보기 -> 복사할 HTML -> 복사할 CSS -> 넣을 위치/값 순서로 보세요.

## 1. 완성 모습

685,000원
548,000원
VVIP 멤버십 혜택가 548,000원
혜택 금액 -137,000원

## 2. HTML (가격표 바로 아래에 삽입)

    <div class="sm-vc-row">
      <span class="sm-vc-emblem" aria-hidden="true"></span>
      <div class="sm-vc-info">
        <span class="sm-vc-label">VVIP 멤버십 혜택가</span>
        <span class="sm-vc-price">548,000원</span>       <!-- 판매가 -->
      </div>
      <span class="sm-vc-save">
        <span class="sm-vc-save-label">혜택 금액</span>
        <span class="sm-vc-save-num">-137,000원</span>  <!-- 정가-판매가 -->
      </span>
    </div>

## 3. CSS (스타일시트 또는 <style>에 추가)

글씨 크기는 주석 달린 font-size 숫자만 바꾸면 됩니다.

    .sm-vc-row { display:flex; align-items:center; gap:14px; padding:18px 20px; margin:10px 0;
      background:linear-gradient(135deg,#fff5f6 0%,#ffe9ec 100%); border:1.5px solid #f4c5c9;
      border-radius:14px; box-sizing:border-box; }

    .sm-vc-emblem { flex-shrink:0; position:relative; width:44px; height:50px;
      background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 46'><defs><linearGradient id='b' x1='0' y1='0' x2='0' y2='1'><stop offset='0' stop-color='%232a2c33'/><stop offset='1' stop-color='%2314161a'/></linearGradient></defs><path d='M 20 2.5 C 30 2.5, 37 9, 37 19 C 37 31, 26 43.5, 20 43.5 C 14 43.5, 3 31, 3 19 C 3 9, 10 2.5, 20 2.5 Z' fill='url(%23b)' stroke='%23e7c876' stroke-opacity='0.6' stroke-width='0.9'/></svg>") center / contain no-repeat;
      filter:drop-shadow(0 4px 10px rgba(20,22,26,.22)); }
    .sm-vc-emblem::before { content:"S"; position:absolute; inset:0; display:flex; align-items:center;
      justify-content:center; padding-bottom:5px; font-family:Georgia,serif; font-style:italic;
      font-size:21px; color:#e7c876; }

    .sm-vc-info { display:flex; flex-direction:column; gap:4px; min-width:0; }
    .sm-vc-label { color:#c41020; font-size:17px; font-weight:normal; letter-spacing:-0.2px; white-space:nowrap; }
    .sm-vc-price { color:#c41020; font-size:34px; font-weight:500; letter-spacing:-0.8px; line-height:1.05; }

    .sm-vc-save { margin-left:auto; flex-shrink:0; padding:10px 16px; border-radius:14px;
      background:#ec0d2e; color:#fff; text-align:center; white-space:nowrap; }
    .sm-vc-save-label { display:block; font-size:14px; font-weight:500; letter-spacing:-0.2px; }
    .sm-vc-save-num { display:block; margin-top:2px; font-size:18px; font-weight:600; letter-spacing:-0.3px; }

    @media (max-width:520px){
      .sm-vc-row{ padding:14px 14px; gap:10px; }
      .sm-vc-price{ font-size:28px; }
    }

## 4. 넣을 위치 & 백엔드 값

· 위치: 상품 상세 템플릿의 판매가격 표시 바로 아래.
· 값 (2곳만):
- sm-vc-price = 판매가 (예: 548,000원)
- sm-vc-save-num = 정가 - 판매가 (예: 685,000 - 548,000 = -137,000원)
정가(할인) 없는 상품이면 sm-vc-save 통째로 빼면 됨.
· 노출 조건: VVIP 회원 + 활성 멤버십일 때만. 적용 제외 상품(브랜드 NPP/MAP, 위탁/중고/전시품)은 미노출.
· 인코딩: 템플릿에 EUC-KR 그대로 작성 - 페이지와 같은 인코딩이라 한글 안 깨짐.
· 클래스명: sm-vc- 접두사라 기존 스타일과 충돌 없음.

## 5. 참고

같은 폴더의 07-vvip-card-only.js는 PHP를 못 고치는 상태에서 북마클릿으로 미리보기하기 위한 데모입니다. (페이지에서 판매가/정가를 자동으로 읽어 카드를 끼워넣음)
실제 적용은 위 HTML+CSS를 템플릿에 직접 넣는 것이 정석이며, 그러면 JS 의존성/인코딩 이슈가 전부 사라집니다.