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

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

1. 완성 모습

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. 넣을 위치 & 백엔드 값

5. 참고