# 상품 상세 페이지 VVIP 가격 카드 - CSS 주입 디자인 명세

> 이 문서는 `07-schoolmusic-product-style.js` 가 스쿨뮤직 상품 상세 페이지에 자동 주입하는 디자인을 정리한 명세입니다.
> JS 파일 문제 발생 시 이 명세대로 재구현하시면 됩니다.

---

## 1. 개요

대상 페이지:
- PC: `/Shop/index.php3?var=Good&Good_no=*`
- 모바일: `/mobile/product_view.php?Good_no=*`

주입되는 요소 3종 + 사이트 전체 디자인 보강.

기존 PHP 마크업은 건드리지 않고, **빈 `<tr><td colspan="2"></td></tr>` 영역에만 새 요소를 삽입**합니다.

---

## 2. 시각 참고

동봉된 `07-CSS 적용 이미지.png` 참조 - 적용 결과 미리보기.

---

## 3. 주입되는 요소 3종

### 3-1. VVIP 회원 가격 카드 (PC)

**위치:** 가격 표시 행 아래 빈 `<td colspan="2">` 안

**마크업:**
```html
<div class="sm-mem-row">
  <div class="sm-mem-info">
    <span class="sm-mem-label">VVIP 회원 특별가</span>
    <strong class="sm-mem-price">329,000원</strong>
    <span class="sm-mem-save">절약 29,000원</span>
  </div>
  <a class="sm-mem-arrow" href="/school/membership-v2.html">멤버십 가입 ></a>
</div>
```

**스타일 핵심:**
- 배경: `linear-gradient(135deg, #fff5f6 0%, #ffe9ec 100%)` (핑크 그라데이션)
- 둥근 모서리: `border-radius: 12px`
- 좌측: **기타 피크 모양 엠블럼** (SVG, 다크 그라데이션 + 골드 테두리 + 골드 italic Georgia "S") + 라벨 + 가격(큰 글씨) + 절약 금액
- 우측: 빨간 라운드 CTA 버튼 (`#ec0d2e`)

### 3-2. VVIP 회원 가격 카드 (모바일)

**마크업:**
```html
<div class="sm-mobile-mem-card">
  <div class="sm-mobile-mem-head">
    <div class="sm-mobile-mem-emblem">S</div>
    <div class="sm-mobile-mem-copy">
      <span class="sm-mobile-mem-copy-label">VVIP 회원 특별가</span>
    </div>
  </div>
  <div class="sm-mobile-mem-price-row">
    <strong class="sm-mobile-mem-price">329,000원</strong>
    <span class="sm-mobile-mem-save">절약 29,000원</span>
  </div>
  <p class="sm-mobile-mem-note">월 2,400원으로 1년 멤버십 가입</p>
</div>
```

**스타일 핵심:**
- 좌측: **기타 피크 모양 엠블럼** (34x39px SVG, PC와 동일 디자인 - 다크 그라데이션 + 골드 테두리 + 골드 italic "S")
- 가격은 세로 배치 (모바일 좁은 폭)
- 하단: 월 환산 가격 안내 (작은 글씨)

### 3-3. Npay 이벤트 강조 박스

**자동 추출:** 페이지의 `<img src="...npay_icon3.png">` 옆에 있는 TD 텍스트를 자동으로 가져옴

**마크업:**
```html
<div class="sm-benefit-host">
  <span class="sm-mobile-card-event">Npay 이벤트</span>
  <span class="sm-mobile-card-text">5.13~05-31 신한·우리·농협카드 6만원↑ 결제 시 6%즉시할인</span>
</div>
```

**스타일 핵심:**
- 배경: `#f4faf6` (연한 그린)
- 테두리: `#d8e9df`
- 배지(Npay 이벤트): 그린 (`#03c75a`)
- 추출 실패하면 박스 자체가 생성되지 않음

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

**마크업:**
```html
<div class="sm-mobile-benefit-host">
  <span class="sm-mobile-card-label">스쿨뮤직 혜택</span>
  <span class="sm-mobile-card-text">일반카드결제시 12개월 무이자 가능</span>
</div>
```

**스타일 핵심:**
- 배경: `#fff5f6` (연한 핑크)
- 테두리: `#f4c5c9`
- 배지: 빨강 (`#ec0d2e`)

---

## 4. 색상 토큰 (CSS Variables)

```css
:root {
  --c-ink:        #15171d;    /* 본문 텍스트 */
  --c-ink-2:      #2c2f37;
  --c-muted:      #8e9099;    /* 부가 텍스트 */
  --c-faint:      #c8cad0;
  --c-line:       #ebebec;    /* 구분선 */
  --c-line-soft:  #f3f4f6;
  --c-red:        #ec0d2e;    /* VVIP 빨강 (메인 강조) */
  --c-red-deep:   #b80020;
  --c-red-strong: #c41020;
  --c-red-bg:     #fff5f6;    /* VVIP 카드 배경 */
  --c-red-bg-2:   #ffe9ec;
  --c-red-border: #f4c5c9;
  --c-npay:       #03c75a;    /* Npay 그린 */
  --c-npay-deep:  #027a3a;
  --c-npay-bg:    #f4faf6;
  --c-npay-border:#d8e9df;
}
```

---

## 5. 사이트 전체 디자인 보강

VVIP 가격 카드 외에 페이지 전반 정리도 함께 적용:

| 대상 | 적용 내용 |
|---|---|
| 검색창 `#keyword` | 빨간 테두리(3px), 둥근 모서리, 높이 46px |
| 검색 버튼 주변 셀 | 우측 둥근 모서리 |
| 메인 썸네일 `#thumbnail_large_area` | 둥근 모서리(14px), 그림자 |
| 보조 썸네일 `#dis_pic img[width="100"]` | 둥근 모서리, 호버 시 살짝 떠오름 |
| 가격 텍스트 `#reset_formated_price_area` | SUIT Variable 폰트 + weight 920 |
| 수량 input `#quantitys`, `#quantitys2` | 둥근 모서리, 깔끔한 스타일 |
| NaverPay 버튼 `#btnNaverRequest` | 모서리 정리만 (onclick 핸들러 절대 안 건드림) |
| 전체 텍스트 (body, table, tr, td, ...) | Pretendard 폰트로 통일 (`!important`) |

---

## 6. 폰트 (외부 CDN)

```css
@import url('https://cdn.jsdelivr.net/npm/pretendard@1.3.9/dist/web/variable/pretendardvariable.min.css');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@500;700;800;900&display=swap');
@import url('https://cdn.jsdelivr.net/gh/sun-typeface/SUIT@2/fonts/variable/woff2/SUIT-Variable.css');
```

| 폰트 | 용도 |
|---|---|
| Pretendard Variable | 본문 전체 |
| Noto Sans KR | 한글 fallback |
| SUIT Variable | 가격 강조 (weight 920) |

CDN 차단 정책이 있는 경우 자체 호스팅 후 `@font-face` 로 교체.

---


---

## 6-1. 엠블럼 SVG (기타 피크)

VVIP 가격 카드 좌측에 표시되는 스쿨뮤직 엠블럼은 **기타 피크 모양 SVG**입니다.

**SVG 코드:**
```svg
<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="#2a2c33"/>
      <stop offset="1" stop-color="#14161a"/>
    </linearGradient>
  </defs>
  <path d="M20 2.5C30 2.5 37 9 37 19C37 31 26 43.5 20 43.5C14 43.5 3 31 3 19C3 9 10 2.5 20 2.5Z"
        fill="url(#b)" stroke="#e7c876" stroke-width="0.9"/>
</svg>
```

**스타일:**
- 형태: 기타 피크 (위쪽 둥글고 아래쪽 뾰족한 실루엣)
- 채우기: 다크 그라데이션 (`#2a2c33` -> `#14161a`)
- 테두리: 골드 (`#e7c876`)
- 내부 'S': Georgia italic 700, 골드 (`#e7c876`), padding-bottom 으로 약간 위로 정렬
- 그림자: `drop-shadow(0 6px 12px rgba(20,22,26,.22))`

**CSS에서 사용 방식:**
- `background-image` 로 데이터 URI(SVG) 임베드
- `::before` 가상 요소로 'S' 텍스트 오버레이
- HTML 내부는 빈 div (`aria-hidden="true"`)

## 7. 한글 라벨 목록 (재구현 시 동일하게 작성)

| 위치 | 텍스트 |
|---|---|
| VVIP 가격 카드 라벨 | "VVIP 회원 특별가" |
| 가격 표시 | "{가격}원" (예: "329,000원") |
| 절약 표시 | "절약 {금액}원" (예: "절약 29,000원") |
| CTA 버튼 | "멤버십 가입 >" |
| 모바일 월 환산 | "월 {월회비}원으로 1년 멤버십 가입" |
| Npay 배지 | "Npay 이벤트" |
| 스쿨뮤직 혜택 배지 | "스쿨뮤직 혜택" |
| 스쿨뮤직 혜택 본문 | "일반카드결제시 12개월 무이자 가능" |
| 적용 제외 라벨 | "VVIP 특별가 적용 제외 상품" (작은 회색 라벨) |
| 적용 제외 hover 안내 | "브랜드 정책(NPP/MAP) 또는 위탁/중고/전시품 등으로 VVIP 특별가 적용 대상에서 제외되는 상품입니다." (title 속성) |

---

## 8. JS 동작 흐름 (재구현 참고)

```
페이지 로드
   |
   v
1. NaverPay HOST 알림 함수 무력화 (window.alert override)
   |
   v
2. CSS 전체를 <style id="sm-membership-demo-styles"> 로 <head> 에 주입
   |
   v
3. body에 data-vvip-excluded="true" 있는지 체크
   |
   +-- 있음 --> 빈 td 찾아서 "적용 제외" 안내 박스 삽입 -> 종료
   |
   +-- 없음 --> 다음 단계
   |
   v
4. 페이지에서 npay_icon3.png 가 들어있는 <img> 찾기
   - 옆 텍스트(같은 행의 TD) 추출
   - 추출 텍스트가 있으면 Npay 이벤트 박스 생성
   |
   v
5. 빈 <tr><td colspan="2"></td></tr> 찾기 (가격 행 아래)
   |
   v
6. 위 영역에 다음 순서로 마크업 삽입:
   - Npay 이벤트 박스 (위 4에서 추출한 텍스트가 있을 때만)
   - VVIP 가격 카드
   - 스쿨뮤직 혜택 박스
   |
   v
7. 가격 표시 요소(#reset_formated_price_area)에 SUIT Variable 폰트 inline 적용
```

---

## 9. 인코딩 정책 (중요)

| 항목 | 인코딩 |
|---|---|
| JS 파일 (`07-schoolmusic-product-style.js`) | **UTF-8 + BOM** |
| 호스트 페이지 (스쿨뮤직 상품 상세) | EUC-KR |

**핵심: JS 파일 맨 앞에 UTF-8 BOM(`EF BB BF`)이 들어 있습니다.**

- 이 JS는 EUC-KR 페이지에 주입되는데, 브라우저는 외부 스크립트를 기본적으로 **호스트 페이지 인코딩(EUC-KR)** 으로 디코딩합니다.
- `<script charset="UTF-8">` 속성은 최신 브라우저에서 무시되므로 한글이 깨집니다.
- **BOM은 브라우저 인코딩 판별에서 최우선** 이라, 호스트 페이지 인코딩·charset 속성·서버 Content-Type 헤더를 모두 무시하고 무조건 UTF-8로 디코딩합니다. → 한글 안 깨짐.

**주의사항**
- 파일을 편집기로 다시 저장할 때 **BOM을 유지**해야 합니다. (VS Code: "UTF-8 with BOM" 선택)
- BOM이 사라지면 한글이 다시 깨집니다.
- 서버/프록시는 파일 바이트를 그대로 전달해야 합니다 (BOM 바이트 보존).

> 검증 완료: EUC-KR 페이지 + charset 속성 없는 `<script src>` 최악 조건에서도 BOM 덕분에 한글 정상 출력 확인.

## 10. 적용 제외 상품 (선택)

브랜드 NPP/MAP 정책, 위탁/중고/전시품 등은 VVIP 가격 적용 대상이 아닙니다.

이런 상품은 PHP 렌더링 시 body 태그에 속성 추가:
```html
<body data-vvip-excluded="true">
```

`07-schoolmusic-product-style.js` 가 자동으로 큰 가격 카드 대신 **작은 라벨**을 표시합니다.

**마크업:**
```html
<div class="sm-excluded-label" title="브랜드 정책(NPP/MAP) 또는 위탁/중고/전시품 등으로 VVIP 특별가 적용 대상에서 제외되는 상품입니다.">
  <span aria-hidden="true">ⓘ</span>
  <span>VVIP 특별가 적용 제외 상품</span>
</div>
```

**스타일 핵심:**
- 작은 회색 텍스트 (12px, `#8e9099`)
- 아이콘(ⓘ) + 라벨 한 줄
- `cursor: help` + `title` 속성으로 hover 시 풀 안내 노출
- 큰 박스 대신 한 줄로 표시 - 페이지가 깔끔하고 negative 톤 최소화

**디자인 의도:**
- VVIP 회원에게 "왜 이건 회원가 없지?" 의문 해소
- 큰 안내 박스의 부담스러움 회피
- 약관 정책과 일관 (네이버/쿠팡 등 한국 마켓 패턴)

---

## 11. 동봉 자료

- `07-CSS 적용 이미지.png` - 실제 운영 페이지 적용 결과 스크린샷
- **`07-CSS주입-디자인-미리보기.html`** - 5가지 요소를 정적 마크업으로 시각화한 미리보기 페이지 (브라우저에서 바로 열어 확인 가능)
- `07-schoolmusic-product-style.js` - 현재 사용 중인 구현 파일

JS 파일이 정상이면 위 파일을 그대로 사용하시면 됩니다. 문제가 있어 재구현이 필요한 경우 본 명세 + 스크린샷을 참고해 동일 디자인으로 만들어 주세요.

---

**문의:** 본 명세에서 누락되거나 모호한 부분이 있다면 운영팀(1566-5150, 평일 10:00~18:00, 점심시간 13:00~14:00 제외)으로 연락 부탁드립니다.
