/*!
 * SchoolMusic membership benefit area - DEMO INJECTOR (self-contained)
 *
 * Single file that, when loaded on the schoolmusic.co.kr product detail page,
 * applies the entire membership benefit design without requiring any HTML
 * template changes.
 *
 * Hosting:
 *   Lives in S:\school_html\ (= C:\webnews\school_html\ on server).
 *   Served via the proxy_server.ps1 /school/* router at:
 *     https://server.tayra-dace.ts.net/school/07-schoolmusic-product-style.js
 *
 * Usage:
 *   1. 상품 상세 PHP 푸터에 <script src="/school/07-schoolmusic-product-style.js"></script> 삽입 (배포용)
 *   2. 또는 다음 부크마클릿으로 테스트 (배포 없이 운영 페이지에 즉시 적용)
 *
 * Bookmarklet:
 *   javascript:(function(){var s=document.createElement('script');s.src='https://server.tayra-dace.ts.net/school/07-schoolmusic-product-style.js?'+Date.now();s.charset='UTF-8';document.head.appendChild(s);})();
 *
 * What it does:
 *   1. Suppresses NaverPay HOST init alert (no-op on production HTTPS).
 *   2. Injects all CSS as an inline <style> tag.
 *   3. Builds membership + card-event info rows inside the existing empty
 *      <tr><td colspan="2"></td></tr> below the price row.
 *   4. Leaves the official NaverPay button and its original event notice
 *      untouched - they stay in their original DOM positions.
 *
 * File encoding: UTF-8. Korean labels live in the CSS pseudo-content strings
 * embedded below. The host HTML page can be any encoding (EUC-KR / UTF-8) -
 * CSS in <style> tags is interpreted independently per browser spec.
 */
(function () {
  'use strict';

  /* ------------------------------------------------------------------
     1. HOST alert suppression (runs immediately on script load)
  ------------------------------------------------------------------ */
  var origAlert = window.alert;
  window.alert = function (msg) {
    if (typeof msg === 'string' && msg.indexOf('HOST') >= 0) return;
    return origAlert.apply(window, arguments);
  };

  /* ------------------------------------------------------------------
     2. CSS - full stylesheet embedded as string
  ------------------------------------------------------------------ */
  var CSS_TEXT = [
    "@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');",
    "",
    ":root {",
    "  --c-ink:        #15171d;",
    "  --c-ink-2:      #2c2f37;",
    "  --c-muted:      #8e9099;",
    "  --c-faint:      #c8cad0;",
    "  --c-line:       #ebebec;",
    "  --c-line-soft:  #f3f4f6;",
    "  --c-red:        #ec0d2e;",
    "  --c-red-deep:   #b80020;",
    "  --c-red-strong: #c41020;",
    "  --c-red-bg:     #fff5f6;",
    "  --c-red-bg-2:   #ffe9ec;",
    "  --c-red-border: #f4c5c9;",
    "  --c-npay:       #03c75a;",
    "  --c-npay-deep:  #027a3a;",
    "  --c-npay-bg:    #f4faf6;",
    "  --c-npay-border:#d8e9df;",
    "}",
    "",
    "body, table, tbody, thead, tfoot, tr, td, th,",
    "input, select, textarea, button,",
    "font, strike, s, span, div, a, p, b, em, i, label,",
    "h1, h2, h3, h4, h5, h6, ul, ol, li {",
    "  font-family:",
    "    \"Pretendard Variable\", Pretendard,",
    "    \"Noto Sans KR\", \"Apple SD Gothic Neo\",",
    "    \"Malgun Gothic\", \"맑은 고딕\",",
    "    -apple-system, BlinkMacSystemFont,",
    "    system-ui, sans-serif !important;",
    "}",
    "",
    "#keyword {",
    "  height: 46px !important;",
    "  border: 3px solid var(--c-red) !important;",
    "  border-right: 0 !important;",
    "  border-radius: 4px 0 0 4px !important;",
    "  padding: 0 14px !important;",
    "  font-size: 15px !important;",
    "  font-weight: 500 !important;",
    "  line-height: 40px !important;",
    "}",
    "td:has(> #keyword) + td { border-radius: 0 4px 4px 0 !important; overflow: hidden !important; }",
    "",
    "#thumbnail_large_area {",
    "  border-radius: 14px !important;",
    "  background: #fff !important;",
    "  box-shadow: 0 14px 32px rgba(16, 24, 40, .06) !important;",
    "}",
    "#dis_pic img[width=\"100\"] {",
    "  border-radius: 10px !important;",
    "  border: 1px solid var(--c-line) !important;",
    "  transition: transform .15s ease !important;",
    "}",
    "#dis_pic img[width=\"100\"]:hover { transform: translateY(-2px) !important; }",
    "",
    "td[style*=\"position:relative\"][style*=\"padding-left:10px\"] {",
    "  z-index: auto !important;",
    "  padding: 4px 0 8px 12px !important;",
    "}",
    "td[style*=\"position:relative\"][style*=\"padding-left:10px\"] > font {",
    "  color: var(--c-ink) !important;",
    "  font-size: 24px !important;",
    "  line-height: 1.35 !important;",
    "  font-weight: 800 !important;",
    "  letter-spacing: -0.4px !important;",
    "}",
    "td[style*=\"position:relative\"][style*=\"padding-left:10px\"] span {",
    "  display: inline-block !important;",
    "  margin-top: 6px !important;",
    "}",
    "",
    "table:has(> tbody > tr > td > font[color=\"#FE670E\"]):has(font[color=\"#393939\"]) {",
    "  border-collapse: separate !important;",
    "  border-spacing: 0 !important;",
    "  margin: 12px 0 0 !important;",
    "}",
    "table:has(> tbody > tr > td > font[color=\"#FE670E\"]):has(font[color=\"#393939\"]) > tbody > tr:first-child > td {",
    "  padding-top: 14px !important;",
    "  padding-bottom: 14px !important;",
    "  vertical-align: middle !important;",
    "  background: transparent !important;",
    "  border: 0 !important;",
    "}",
    "",
    "td[width=\"140\"][align=\"center\"]:has(> font[color=\"#FE670E\"]) { width: 78px !important; }",
    "td[width=\"140\"][align=\"center\"]:has(> font[color=\"#FE670E\"]) font {",
    "  color: var(--c-red) !important;",
    "  font-family: 'SUIT Variable', 'Pretendard Variable', Pretendard, 'Noto Sans KR', sans-serif !important;",
    "  font-size: 32px !important;",
    "  font-weight: 900 !important;",
    "  letter-spacing: -1.5px !important;",
    "  line-height: 1 !important;",
    "  font-feature-settings: \"tnum\" 1, \"lnum\" 1 !important;",
    "}",
    "td[width=\"140\"][align=\"center\"]:has(> font[color=\"#FE670E\"]) font[color=\"#ff6509\"] {",
    "  font-size: 22px !important;",
    "  font-weight: 800 !important;",
    "  letter-spacing: -0.5px !important;",
    "  vertical-align: baseline !important;",
    "  display: inline !important;",
    "}",
    "",
    "td[width=\"140\"][align=\"center\"]:has(> font[color=\"#FE670E\"]) + td {",
    "  padding: 0 0 0 8px !important;",
    "  background: transparent !important;",
    "  border: 0 !important;",
    "}",
    "td[width=\"140\"][align=\"center\"]:has(> font[color=\"#FE670E\"]) + td strike font {",
    "  color: var(--c-muted) !important;",
    "  font-size: 14px !important;",
    "  font-weight: 500 !important;",
    "  letter-spacing: -0.2px !important;",
    "}",
    "td[width=\"140\"][align=\"center\"]:has(> font[color=\"#FE670E\"]) + td font[color=\"#393939\"] {",
    "  color: var(--c-ink) !important;",
    "  font-family: 'SUIT Variable', 'Pretendard Variable', Pretendard, 'Noto Sans KR', sans-serif !important;",
    "  font-size: 36px !important;",
    "  font-weight: 900 !important;",
    "  letter-spacing: -1.4px !important;",
    "  line-height: 1.05 !important;",
    "  font-feature-settings: \"tnum\" 1, \"lnum\" 1 !important;",
    "}",
    "td[width=\"140\"][align=\"center\"]:has(> font[color=\"#FE670E\"]) + td font[color=\"#393939\"] span {",
    "  color: var(--c-ink) !important;",
    "}",
    "td[width=\"140\"][align=\"center\"]:has(> font[color=\"#FE670E\"]) + td::before,",
    "td[width=\"140\"][align=\"center\"]:has(> font[color=\"#FE670E\"]) + td::after { content: none !important; }",
    "",
    "/* Mobile site (/mobile/product_view.php) - DOM uses <font color=\"#ff6509\"> etc., no #FE670E wrapper. Match PC weight via Pretendard Variable axis 920. */",
    "font[color=\"#ff6509\"], font[color=\"#FF6509\"] {",
    "  font-family: 'SUIT Variable', 'Pretendard Variable', Pretendard, 'Noto Sans KR', sans-serif !important;",
    "  font-weight: 900 !important;",
    "  letter-spacing: -0.6px !important;",
    "  font-feature-settings: 'tnum' 1, 'lnum' 1 !important;",
    "}",
    "font[style*=\"font-weight:bold\"][style*=\"font-size:26px\"][style*=\"맑은 고딕\"], font[style*=\"font-weight:bold\"][style*=\"font-size:23px\"][style*=\"맑은 고딕\"] {",
    "  font-family: 'SUIT Variable', 'Pretendard Variable', Pretendard, 'Noto Sans KR', sans-serif !important;",
    "  font-weight: 900 !important;",
    "  letter-spacing: -0.8px !important;",
    "  font-feature-settings: 'tnum' 1, 'lnum' 1 !important;",
    "}",
    "font[style*=\"line-through\"][style*=\"맑은 고딕\"] {",
    "  font-family: 'SUIT Variable', 'Pretendard Variable', Pretendard, sans-serif !important;",
    "  font-weight: 500 !important;",
    "  color: var(--c-muted) !important;",
    "}",
    "#reset_formated_price_area {",
    "  font-family: 'SUIT Variable', 'Pretendard Variable', Pretendard, 'Noto Sans KR', sans-serif !important;",
    "  font-weight: 900 !important;",
    "  letter-spacing: -0.6px !important;",
    "  font-feature-settings: 'tnum' 1, 'lnum' 1 !important;",
    "}",
    "",
    ".sm-benefit-host {",
    "  padding: 12px 0 6px !important;",
    "  background: transparent !important;",
    "  border: 0 !important;",
    "}",
    "",
    ".sm-mem-row {",
    "  display: flex;",
    "  align-items: center;",
    "  gap: 14px;",
    "  padding: 16px 18px 16px 16px;",
    "  background: linear-gradient(135deg, var(--c-red-bg) 0%, var(--c-red-bg-2) 100%);",
    "  border: 1.5px solid var(--c-red-border);",
    "  border-radius: 14px;",
    "  margin-bottom: 10px;",
    "  position: relative;",
    "  font-feature-settings: \"tnum\" 1, \"lnum\" 1;",
    "}",
    "",
    "/* Premium membership emblem - guitar pick silhouette + gold serif M monogram. */",
    ".sm-mem-arrow {",
    "  flex-shrink: 0;",
    "  position: relative;",
    "  width: 40px;",
    "  height: 46px;",
    "  background:",
    "    url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 46' preserveAspectRatio='xMidYMid meet'><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><linearGradient id='hi' x1='0.3' y1='0.1' x2='0.7' y2='0.6'><stop offset='0' stop-color='%23ffffff' stop-opacity='0.10'/><stop offset='0.6' stop-color='%23ffffff' stop-opacity='0'/></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.55' stroke-width='0.9'/><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(%23hi)'/></svg>\")",
    "    center / contain no-repeat;",
    "  filter:",
    "    drop-shadow(0 1px 1px rgba(0,0,0,.18))",
    "    drop-shadow(0 6px 14px rgba(20,22,26,.25));",
    "}",
    ".sm-mem-arrow::before {",
    "  content: \"S\";",
    "  position: absolute;",
    "  inset: 0;",
    "  display: flex;",
    "  align-items: center;",
    "  justify-content: center;",
    "  padding-bottom: 6px;",
    "  font-family: 'Bodoni 72', 'Playfair Display', 'Noto Serif KR', 'Nanum Myeongjo', Georgia, 'Times New Roman', serif;",
    "  font-style: italic;",
    "  font-weight: 700;",
    "  font-size: 19px;",
    "  line-height: 1;",
    "  letter-spacing: 0;",
    "  background: linear-gradient(180deg, #f3d98e 0%, #d9b563 50%, #b08938 100%);",
    "  -webkit-background-clip: text;",
    "  background-clip: text;",
    "  -webkit-text-fill-color: transparent;",
    "  color: transparent;",
    "}",
    "",
    ".sm-mem-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }",
    ".sm-mem-label::before {",
    "  content: \"VVIP 멤버십 혜택가\";",
    "  color: var(--c-red-strong);",
    "  font-size: 12px;",
    "  font-weight: 700;",
    "  letter-spacing: -0.1px;",
    "  white-space: nowrap;",
    "}",
    ".sm-mem-price::before {",
    "  content: \"329,000원\";",
    "  color: var(--c-red-strong);",
    "  font-family: 'SUIT Variable', 'Pretendard Variable', Pretendard, 'Noto Sans KR', sans-serif;",
    "  font-size: 40px;",
    "  font-weight: 900;",
    "  letter-spacing: -1.2px;",
    "  line-height: 1;",
    "  font-feature-settings: \"tnum\" 1, \"lnum\" 1;",
    "}",
    "",
    ".sm-mem-save { margin-left: auto; flex-shrink: 0; }",
    "/* Narrow viewport: shrink chip + price to keep everything on one row */",
    "@media (max-width: 520px) {",
    "  .sm-mem-row { padding: 12px 12px 12px 12px; gap: 10px; }",
    "  .sm-mem-arrow { width: 36px; height: 42px; }",
    "  .sm-mem-price::before { font-size: 30px; letter-spacing: -1px; }",
    "  .sm-mem-save::before { padding: 7px 10px; font-size: 12px; }",
    "}",
    "@media (max-width: 380px) {",
    "  .sm-mem-row { flex-wrap: wrap; row-gap: 6px; }",
    "  .sm-mem-save { margin-left: 46px; }",
    "}",
    ".sm-mem-save::before {",
    "  content: \"혜택 금액 -29,000원\";",
    "  display: inline-block;",
    "  padding: 9px 15px;",
    "  background: var(--c-red);",
    "  color: #fff;",
    "  border-radius: 999px;",
    "  font-size: 13px;",
    "  font-weight: 800;",
    "  letter-spacing: -0.2px;",
    "  white-space: nowrap;",
    "  box-shadow: 0 6px 14px rgba(236, 13, 46, .26);",
    "  font-feature-settings: \"tnum\" 1, \"lnum\" 1;",
    "}",
    "",
    ".sm-npay-row {",
    "  display: flex;",
    "  align-items: center;",
    "  flex-wrap: wrap;",
    "  gap: 8px;",
    "  padding: 12px 16px;",
    "  background: var(--c-npay-bg);",
    "  border: 1px solid var(--c-npay-border);",
    "  border-radius: 12px;",
    "}",
    ".sm-npay-label::before {",
    "  content: \"Npay 이벤트\";",
    "  display: inline-block;",
    "  padding: 4px 9px;",
    "  background: var(--c-npay);",
    "  color: #fff;",
    "  border-radius: 4px;",
    "  font-size: 11px;",
    "  font-weight: 800;",
    "  letter-spacing: 0.3px;",
    "  white-space: nowrap;",
    "}",
    ".sm-npay-detail {",
    "  color: var(--c-ink-2);",
    "  font-size: 13px;",
    "  font-weight: 600;",
    "  letter-spacing: -0.1px;",
    "  line-height: 1.45;",
    "}",
    "",
    "/* 스쿨뮤직 자체 혜택 (Npay와 별개) */",
    ".sm-school-row {",
    "  display: flex;",
    "  align-items: center;",
    "  flex-wrap: wrap;",
    "  gap: 8px;",
    "  margin-top: 8px;",
    "  padding: 12px 16px;",
    "  background: var(--c-red-bg);",
    "  border: 1px solid var(--c-red-border);",
    "  border-radius: 12px;",
    "}",
    ".sm-school-label::before {",
    "  content: \"스쿨뮤직 혜택\";",
    "  display: inline-block;",
    "  padding: 4px 9px;",
    "  background: var(--c-red);",
    "  color: #fff;",
    "  border-radius: 4px;",
    "  font-size: 11px;",
    "  font-weight: 800;",
    "  letter-spacing: 0.3px;",
    "  white-space: nowrap;",
    "}",
    ".sm-school-detail::before {",
    "  content: \"일반카드결제시 12개월 무이자 혜택\";",
    "  color: var(--c-ink-2);",
    "  font-size: 13px;",
    "  font-weight: 600;",
    "  letter-spacing: -0.1px;",
    "  line-height: 1.45;",
    "}",
    "",
    "table[style*=\"border-top: 1px solid #eaeaea\"] {",
    "  border-top: 1px solid var(--c-line) !important;",
    "  margin: 18px 0 0 !important;",
    "}",
    "table[style*=\"border-top: 1px solid #eaeaea\"] + table td {",
    "  font-size: 14px !important;",
    "  line-height: 1.6 !important;",
    "  color: var(--c-ink-2) !important;",
    "}",
    "",
    "#btnNaverRequest {",
    "  height: 48px !important;",
    "  border: 0 !important;",
    "  border-radius: 10px 0 0 10px !important;",
    "  background: var(--c-ink) !important;",
    "  color: #2bd96d !important;",
    "  font-size: 16px !important;",
    "  font-weight: 800 !important;",
    "  letter-spacing: -0.2px !important;",
    "}",
    "input[onclick*=\"naver_link_report\"] {",
    "  height: 48px !important;",
    "  border-radius: 0 10px 10px 0 !important;",
    "  border: 1px solid var(--c-line) !important;",
    "  color: #00a840 !important;",
    "  background: #fff !important;",
    "  font-size: 16px !important;",
    "  font-weight: 800 !important;",
    "}",
    "",
    "#quantitys {",
    "  width: 40px !important;",
    "  height: 34px !important;",
    "  border: 1px solid var(--c-line) !important;",
    "  border-radius: 8px !important;",
    "  font-size: 15px !important;",
    "  font-weight: 700 !important;",
    "  text-align: center !important;",
    "}",
    "#reset_formated_price_area {",
    "  color: var(--c-ink) !important;",
    "  font-family: 'SUIT Variable', 'Pretendard Variable', Pretendard, 'Noto Sans KR', sans-serif !important;",
    "  font-size: 30px !important;",
    "  font-weight: 900 !important;",
    "  letter-spacing: -0.9px !important;",
    "  font-feature-settings: \"tnum\" 1, \"lnum\" 1 !important;",
    "}",
    "#reset_formated_price_area + font {",
    "  color: var(--c-ink) !important;",
    "  font-size: 22px !important;",
    "  font-weight: 800 !important;",
    "}",
    "",
    "td:has(> input[onclick*=\"cart_input\"])::before { content: none !important; }",
    "",
    "input[onclick*=\"cart_input\"] {",
    "  width: 100% !important;",
    "  height: 62px !important;",
    "  border: 1.5px solid var(--c-ink) !important;",
    "  border-radius: 12px !important;",
    "  background: #fff !important;",
    "  color: var(--c-ink) !important;",
    "  font-size: 19px !important;",
    "  font-weight: 800 !important;",
    "  letter-spacing: -0.4px !important;",
    "  cursor: pointer !important;",
    "  transition: background-color .12s ease, color .12s ease, transform .08s ease !important;",
    "}",
    "input[onclick*=\"cart_input\"]:hover { background: var(--c-ink) !important; color: #fff !important; }",
    "input[onclick*=\"cart_input\"]:active { transform: translateY(1px) !important; }",
    "",
    "input[onclick*=\"just_go_buy\"] {",
    "  width: 100% !important;",
    "  height: 62px !important;",
    "  border: 0 !important;",
    "  border-radius: 12px !important;",
    "  background: var(--c-red) !important;",
    "  color: #fff !important;",
    "  font-size: 21px !important;",
    "  font-weight: 900 !important;",
    "  letter-spacing: -0.5px !important;",
    "  cursor: pointer !important;",
    "  box-shadow: 0 10px 24px rgba(236, 13, 46, .28) !important;",
    "  transition: background-color .12s ease, box-shadow .12s ease, transform .08s ease !important;",
    "}",
    "input[onclick*=\"just_go_buy\"]:hover {",
    "  background: var(--c-red-deep) !important;",
    "  box-shadow: 0 14px 30px rgba(236, 13, 46, .38) !important;",
    "}",
    "input[onclick*=\"just_go_buy\"]:active {",
    "  transform: translateY(1px) !important;",
    "  box-shadow: 0 4px 12px rgba(236, 13, 46, .3) !important;",
    "}",
    "",
    "/* ===== Price-change email alarm - visible red outline + bell icon ===== */",
    "input[onclick*=\"show_price_change_notice_form\"] {",
    "  width: auto !important;",
    "  min-width: 290px !important;",
    "  height: 46px !important;",
    "  padding: 0 22px 0 46px !important;",
    "  border: 1.5px solid var(--c-red) !important;",
    "  border-radius: 10px !important;",
    "  background-color: var(--c-red-bg) !important;",
    "  background-image: url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ec0d2e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9'/><path d='M10.3 21a1.94 1.94 0 0 0 3.4 0'/></svg>\") !important;",
    "  background-repeat: no-repeat !important;",
    "  background-position: 16px center !important;",
    "  background-size: 18px 18px !important;",
    "  color: var(--c-red) !important;",
    "  font-size: 14.5px !important;",
    "  font-weight: 800 !important;",
    "  letter-spacing: -0.3px !important;",
    "  cursor: pointer !important;",
    "  transition: all .15s ease !important;",
    "  box-shadow: 0 4px 12px rgba(236,13,46,.10) !important;",
    "}",
    "input[onclick*=\"show_price_change_notice_form\"]:hover {",
    "  background-color: var(--c-red) !important;",
    "  color: #fff !important;",
    "  background-image: url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9'/><path d='M10.3 21a1.94 1.94 0 0 0 3.4 0'/></svg>\") !important;",
    "  box-shadow: 0 6px 18px rgba(236,13,46,.28) !important;",
    "  transform: translateY(-1px) !important;",
    "}",
    "input[onclick*=\"show_price_change_notice_form\"]:active {",
    "  transform: translateY(0) !important;",
    "  box-shadow: 0 2px 8px rgba(236,13,46,.20) !important;",
    "}",
    ""
  ].join("\n");


  CSS_TEXT += "\n" + [
    "",
    "/* Mobile product detail injection */",
    "@media (max-width: 768px) {",
    "  #quantitys2 { width: 36px !important; height: 28px !important; border: 1px solid var(--c-line) !important; border-radius: 7px !important; color: var(--c-ink) !important; font-size: 15px !important; font-weight: 800 !important; text-align: center !important; background: #fff !important; }",
    "  .sm-mobile-top-benefit { box-sizing: border-box; width: 350px; max-width: calc(100vw - 30px); margin: 12px auto 0; padding: 15px 15px 14px; background: linear-gradient(135deg, #fff5f6 0%, #ffffff 100%); border: 1.5px solid var(--c-red-border); border-radius: 13px; box-shadow: 0 10px 24px rgba(236,13,46,.10); text-align: left; font-family: Pretendard, -apple-system, BlinkMacSystemFont, 'Noto Sans KR', 'Malgun Gothic', sans-serif !important; }",
    "  .sm-mobile-top-head { display: flex; align-items: center; gap: 9px; }",
    "  .sm-mobile-top-emblem { position: relative; flex: 0 0 30px; width: 30px; height: 35px; 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='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(%23b)' stroke='%23e7c876' stroke-width='0.9'/></svg>\") center / contain no-repeat; filter: drop-shadow(0 5px 10px rgba(20,22,26,.20)); }",
    "  .sm-mobile-top-emblem::before { content: 'S'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding-bottom: 4px; font-family: Georgia, 'Times New Roman', serif; font-style: italic; font-weight: 700; font-size: 15px; line-height: 1; color: #e7c876; }",
    "  .sm-mobile-top-price-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; margin-top: 8px; }",
    "  .sm-mobile-top-label::before { content: 'VVIP 멤버십 혜택가'; display: block; color: var(--c-red-strong); font-size: 13px; font-weight: 900; letter-spacing: -0.1px; }",
    "  .sm-mobile-top-price::before { content: '329,000원'; display: inline-block; margin-top: 3px; color: var(--c-red-strong); font-family: 'SUIT Variable', 'Pretendard Variable', Pretendard, 'Noto Sans KR', sans-serif; font-size: 32px; font-weight: 900; letter-spacing: -1.6px; line-height: 1; font-feature-settings: 'tnum' 1, 'lnum' 1; }",
    "  .sm-mobile-top-save::before { content: '29,000원 절약'; display: inline-block; margin-left: 8px; padding: 8px 12px; border-radius: 999px; background: var(--c-red); color: #fff; font-family: 'SUIT Variable', 'Pretendard Variable', Pretendard, sans-serif; font-size: 14px; font-weight: 900; letter-spacing: -0.3px; vertical-align: 4px; white-space: nowrap; }",
    "  .sm-mobile-benefit-host { box-sizing: border-box; padding: 0 15px 12px; font-family: Pretendard, -apple-system, BlinkMacSystemFont, 'Noto Sans KR', 'Malgun Gothic', sans-serif !important; }",
    "  .sm-mobile-mem-card { box-sizing: border-box; padding: 15px 15px 14px; background: linear-gradient(135deg, var(--c-red-bg) 0%, #ffffff 100%); border: 1.5px solid var(--c-red-border); border-radius: 14px; box-shadow: 0 10px 24px rgba(236,13,46,.10); }",
    "  .sm-mobile-mem-head { display: flex; align-items: center; gap: 10px; min-width: 0; }",
    "  .sm-mobile-mem-emblem { position: relative; flex: 0 0 34px; width: 34px; height: 39px; 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='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(%23b)' stroke='%23e7c876' stroke-width='0.9'/></svg>\") center / contain no-repeat; filter: drop-shadow(0 6px 12px rgba(20,22,26,.22)); }",
    "  .sm-mobile-mem-emblem::before { content: 'S'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding-bottom: 5px; font-family: Georgia, 'Times New Roman', serif; font-style: italic; font-weight: 700; font-size: 16px; line-height: 1; color: #e7c876; }",
    "  .sm-mobile-mem-copy { min-width: 0; display: flex; flex-direction: column; gap: 2px; }",
    "  .sm-mobile-mem-title::before { content: 'VVIP 멤버십 혜택가'; color: var(--c-red-strong); font-size: 13px; font-weight: 900; letter-spacing: -0.2px; }",
    "  .sm-mobile-mem-sub::before { content: '멤버십 가입 시 상품별 특별가 적용'; color: #667085; font-size: 11px; font-weight: 700; letter-spacing: -0.1px; }",
    "  .sm-mobile-mem-price-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; flex-wrap: wrap; row-gap: 6px; }",
    "  .sm-mobile-mem-price::before { content: '329,000원'; color: var(--c-red-strong); font-family: 'SUIT Variable', 'Pretendard Variable', Pretendard, 'Noto Sans KR', sans-serif; font-size: 28px; font-weight: 900; letter-spacing: -1.4px; line-height: 1; font-feature-settings: 'tnum' 1, 'lnum' 1; white-space: nowrap; }",
    "  .sm-mobile-mem-save::before { content: '29,000원 절약'; display: inline-block; padding: 6px 11px; border-radius: 999px; background: var(--c-red); color: #fff; font-family: 'SUIT Variable', 'Pretendard Variable', Pretendard, sans-serif; font-size: 12px; font-weight: 900; letter-spacing: -0.3px; white-space: nowrap; box-shadow: 0 6px 14px rgba(236,13,46,.26); }",
    "  .sm-mobile-mem-note::before { content: '연 29,000원 멤버십 가입 시 적용'; display: block; margin-top: 8px; color: #667085; font-size: 11px; font-weight: 700; letter-spacing: -0.1px; }",
    "  .sm-mobile-card-event { display: flex; align-items: center; gap: 7px; margin-top: 8px; padding: 10px 12px; border: 1px solid var(--c-npay-border); border-radius: 12px; background: var(--c-npay-bg); flex-wrap: wrap; }",
    "  .sm-mobile-card-label::before { content: 'Npay 이벤트'; display: inline-block; padding: 4px 7px; border-radius: 4px; background: var(--c-npay); color: #fff; font-size: 10px; font-weight: 900; white-space: nowrap; }",
    "  .sm-mobile-card-text { color: var(--c-ink-2); font-size: 11px; font-weight: 700; line-height: 1.4; letter-spacing: -0.1px; }",
    "  .sm-mobile-school-event { display: flex; align-items: center; gap: 7px; margin-top: 6px; padding: 10px 12px; border: 1px solid var(--c-red-border); border-radius: 12px; background: var(--c-red-bg); flex-wrap: wrap; }",
    "  .sm-mobile-school-label::before { content: '스쿨뮤직 혜택'; display: inline-block; padding: 4px 7px; border-radius: 4px; background: var(--c-red); color: #fff; font-size: 10px; font-weight: 900; white-space: nowrap; }",
    "  .sm-mobile-school-text::before { content: '일반카드결제시 12개월 무이자 혜택'; color: var(--c-ink-2); font-size: 11px; font-weight: 700; line-height: 1.4; letter-spacing: -0.1px; }",
    "  input[onclick*='just_go_buy'], input[onclick*='cart_add'] { height: 46px !important; border-radius: 10px !important; font-size: 17px !important; font-weight: 900 !important; letter-spacing: -0.3px !important; }",
    "  input[onclick*='show_price_change_notice_form'] { width: 100% !important; min-width: 0 !important; height: 44px !important; padding: 0 16px 0 40px !important; font-size: 13.5px !important; border-radius: 9px !important; background-position: 14px center !important; background-size: 16px 16px !important; }",
    "  input[onclick*='cart_add'] { border: 1.5px solid var(--c-red) !important; background: #fff !important; color: var(--c-red) !important; }",
    "  input[onclick*='action_my_best'] { height: 46px !important; border-radius: 10px !important; border: 1.5px solid var(--c-line) !important; color: var(--c-ink) !important; background: #fff !important; font-size: 15px !important; font-weight: 900 !important; }",
    "}",
    "@media (max-width: 360px) { .sm-mobile-mem-price-row { align-items: flex-start; flex-direction: column; } .sm-mobile-top-save::before { display: block; width: max-content; margin: 7px 0 0; vertical-align: baseline; } }"
  ].join("\n");

  function injectCss() {
    if (document.getElementById('sm-membership-demo-styles')) return;
    var style = document.createElement('style');
    style.id = 'sm-membership-demo-styles';
    style.type = 'text/css';
    style.appendChild(document.createTextNode(CSS_TEXT));
    (document.head || document.documentElement).appendChild(style);
  }

  /* ------------------------------------------------------------------
     적용 제외 상품 분기 (백엔드가 <body data-vvip-excluded="true"> 설정 시)
  ------------------------------------------------------------------ */
  if (document.body && document.body.dataset.vvipExcluded === 'true') {
    // 제외 상품: VVIP 가격 카드 대신 안내 메시지만 표시
    document.addEventListener('DOMContentLoaded', function () {
      var rows = document.querySelectorAll('tr');
      for (var i = 0; i < rows.length; i++) {
        var cells = rows[i].querySelectorAll('td[colspan="2"]');
        if (cells.length && !cells[0].innerHTML.trim()) {
          cells[0].innerHTML = '<div class="sm-excluded-label" title="브랜드 정책(NPP/MAP) 또는 위탁/중고/전시품 등으로 VVIP 특별가 적용 대상에서 제외되는 상품입니다." style="display:inline-flex;align-items:center;gap:6px;padding:8px 14px;color:#8e9099;font-size:12px;line-height:1.4;cursor:help;"><span aria-hidden="true">ⓘ</span><span>VVIP 특별가 적용 제외 상품</span></div>';
          break;
        }
      }
    });
    return;  // 일반 가격 카드 주입 스킵
  }

  /* ------------------------------------------------------------------
     3. DOM scaffolding - populate the empty <tr><td colspan="2"></td></tr>
        row under the price row
  ------------------------------------------------------------------ */
  function buildBenefitArea() {
    var marker = document.querySelector('font[color="#FE670E"]');
    if (!marker) return null;

    var pricingTable = marker.closest ? marker.closest('table') : null;
    if (!pricingTable) {
      var p = marker.parentNode;
      while (p && p.tagName !== 'TABLE') p = p.parentNode;
      pricingTable = p;
    }
    if (!pricingTable) return null;

    var hostTd = pricingTable.querySelector('tr:nth-child(2) > td[colspan="2"]');
    if (!hostTd) return null;

    if (hostTd.querySelector('.sm-mem-row')) return hostTd;

    var emptyInner = hostTd.querySelector('table');
    if (emptyInner) emptyInner.style.display = 'none';

    var memRow = document.createElement('div');
    memRow.className = 'sm-mem-row';
    memRow.innerHTML =
      '<span class="sm-mem-arrow" aria-hidden="true"></span>' +
      '<div class="sm-mem-info">' +
        '<span class="sm-mem-label"></span>' +
        '<span class="sm-mem-price"></span>' +
      '</div>' +
      '<span class="sm-mem-save"></span>';
    hostTd.appendChild(memRow);

    var npayEventText = extractNpayEvent();
    if (npayEventText) {
      var npayRow = document.createElement('div');
      npayRow.className = 'sm-npay-row';
      npayRow.innerHTML =
        '<span class="sm-npay-label"></span>' +
        '<span class="sm-npay-detail"></span>';
      hostTd.appendChild(npayRow);
      npayRow.querySelector('.sm-npay-detail').textContent = npayEventText;
    }

    var schoolRow = document.createElement('div');
    schoolRow.className = 'sm-school-row';
    schoolRow.innerHTML =
      '<span class="sm-school-label"></span>' +
      '<span class="sm-school-detail"></span>';
    hostTd.appendChild(schoolRow);

    hostTd.classList.add('sm-benefit-host');

    return hostTd;
  }


  function buildMobileBenefitArea() {
    var total = document.getElementById('reset_formated_price_area');
    var quantity = document.getElementById('quantitys2');
    if (!total || !quantity) return null;

    var existing = document.querySelector('.sm-mobile-benefit-host');
    if (existing) return existing;

    var anchorTable = total.closest ? total.closest('table') : null;
    if (!anchorTable || !anchorTable.parentNode) return null;

    var host = document.createElement('div');
    host.className = 'sm-mobile-benefit-host';
    host.innerHTML =
      '<div class="sm-mobile-mem-card">' +
        '<div class="sm-mobile-mem-head">' +
          '<span class="sm-mobile-mem-emblem" aria-hidden="true"></span>' +
          '<div class="sm-mobile-mem-copy">' +
            '<strong class="sm-mobile-mem-title"></strong>' +
            '<span class="sm-mobile-mem-sub"></span>' +
          '</div>' +
        '</div>' +
        '<div class="sm-mobile-mem-price-row">' +
          '<span class="sm-mobile-mem-price"></span>' +
          '<span class="sm-mobile-mem-save"></span>' +
        '</div>' +
        '<div class="sm-mobile-mem-note"></div>' +
      '</div>' +
      '<div class="sm-mobile-card-event">' +
        '<span class="sm-mobile-card-label"></span>' +
        '<span class="sm-mobile-card-text"></span>' +
      '</div>' +
      '<div class="sm-mobile-school-event">' +
        '<span class="sm-mobile-school-label"></span>' +
        '<span class="sm-mobile-school-text"></span>' +
      '</div>';

    anchorTable.parentNode.insertBefore(host, anchorTable.nextSibling);

    var mobileNpayText = extractNpayEvent();
    var mobileCardEventEl = host.querySelector('.sm-mobile-card-event');
    if (mobileNpayText) {
      var cardTextEl = host.querySelector('.sm-mobile-card-text');
      if (cardTextEl) cardTextEl.textContent = mobileNpayText;
    } else if (mobileCardEventEl) {
      mobileCardEventEl.parentNode.removeChild(mobileCardEventEl);
    }

    var priceMarker = document.querySelector('font[color="#ff6509"], font[color="#FF6509"]');
    var priceHost = null;
    if (priceMarker && priceMarker.closest) {
      var node = priceMarker;
      while (node && node !== document.body) {
        if (node.tagName === 'TD' && /border-bottom/i.test(node.getAttribute('style') || '')) {
          priceHost = node;
          break;
        }
        node = node.parentNode;
      }
    }
    if (priceHost && !document.querySelector('.sm-mobile-top-benefit')) {
      var priceTable = priceHost.querySelector('table');
      var topBenefit = document.createElement('div');
      topBenefit.className = 'sm-mobile-top-benefit';
      topBenefit.innerHTML =
        '<div class="sm-mobile-top-head">' +
          '<span class="sm-mobile-top-emblem" aria-hidden="true"></span>' +
          '<span class="sm-mobile-top-label"></span>' +
        '</div>' +
        '<div class="sm-mobile-top-price-row">' +
          '<strong class="sm-mobile-top-price"></strong>' +
          '<span class="sm-mobile-top-save"></span>' +
        '</div>';
      if (priceTable && priceTable.parentNode === priceHost) {
        priceHost.insertBefore(topBenefit, priceTable.nextSibling);
      } else {
        priceHost.appendChild(topBenefit);
      }
    }

    return host;
  }

  /* ------------------------------------------------------------------
     Extract the live Npay event text from the host page.
     The schoolmusic detail page renders the official Npay event next to
     <img src=".../npay_icon3.png"> in a TD pair. We pull that copy and
     surface it inside our top Npay 이벤트 box. Returns the trimmed
     event description, or null if no Npay event is currently active.
  ------------------------------------------------------------------ */
  function extractNpayEvent() {
    var npayIcon = document.querySelector('img[src*="npay_icon"]');
    if (!npayIcon) return null;
    var iconCell = npayIcon;
    while (iconCell && iconCell.tagName !== 'TD') iconCell = iconCell.parentElement;
    if (!iconCell) return null;
    var textCell = iconCell.nextElementSibling;
    while (textCell && textCell.tagName !== 'TD') textCell = textCell.nextElementSibling;
    if (!textCell) return null;
    var text = (textCell.textContent || '').replace(/\s+/g, ' ').trim();
    if (!text || text.length < 4) return null;
    return text;
  }

  /* ------------------------------------------------------------------
     Force-apply SUIT Variable on price elements via inline !important.
     External CSS rules can lose specificity battles with the host
     page's own stylesheets - inline !important always wins. This keeps
     the heavy SUIT display font reliably applied to:
       - 21% / 37% discount badge (font[color="#ff6509"])
       - sale price (font[style*="font-size:26px"])
       - 원 char (font[style*="font-size:23px"])
       - strikethrough original price (font[style*="line-through"])
       - quantity-driven total (#reset_formated_price_area)
  ------------------------------------------------------------------ */
  function enforcePriceFont() {
    function apply(el, weight, color, ls) {
      if (!el) return;
      el.style.setProperty('font-family', "'SUIT Variable', 'Pretendard Variable', Pretendard, sans-serif", 'important');
      el.style.setProperty('font-weight', String(weight), 'important');
      el.style.setProperty('font-variation-settings', "'wght' " + weight, 'important');
      if (ls) el.style.setProperty('letter-spacing', ls, 'important');
      if (color) el.style.setProperty('color', color, 'important');
      el.style.setProperty('font-feature-settings', "'tnum' 1, 'lnum' 1", 'important');
    }
    document.querySelectorAll("font[color='#ff6509'], font[color='#FF6509']").forEach(function (el) {
      apply(el, 900, null, '-0.6px');
    });
    document.querySelectorAll("font[style*='line-through']").forEach(function (el) {
      apply(el, 500, '#9a9da6', '-0.2px');
    });
    document.querySelectorAll("font[style*='font-size:26px'], font[style*='font-size: 26px']").forEach(function (el) {
      var s = el.getAttribute('style') || '';
      if (s.indexOf('bold') >= 0) apply(el, 900, '#15171d', '-0.8px');
    });
    document.querySelectorAll("font[style*='font-size:23px'], font[style*='font-size: 23px']").forEach(function (el) {
      var s = el.getAttribute('style') || '';
      if (s.indexOf('bold') >= 0) apply(el, 900, '#15171d', '-0.5px');
    });
    apply(document.getElementById('reset_formated_price_area'), 900, null, '-0.6px');
  }

  function run() {
    injectCss();
    buildBenefitArea();
    buildMobileBenefitArea();
    enforcePriceFont();
  }

  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', run);
  } else {
    run();
  }
  window.addEventListener('load', function () {
    setTimeout(run, 50);
    setTimeout(run, 400);
  });
})();
