@charset "utf-8";
/* ==========================================================================
   상품 상세 — 팬텀 스타일 (좌: 썸네일+데모 / 우: 가격카드+CTA)
   ※ 영카트 폼 구조와 JS는 그대로 두고 레이아웃만 입힌다.
   ========================================================================== */

#container_title{display:none!important}
#sit{padding:34px 0 0}

/* ---------------------------------------------- 2단 레이아웃 */
#sit_ov_wrap{display:grid!important;grid-template-columns:minmax(0,1.05fr) minmax(340px,.95fr);
  gap:34px;align-items:start;margin-bottom:44px}
#sit_ov_wrap::after{display:none!important}   /* 기본 테마 clearfix 제거 */
@media (max-width:900px){#sit_ov_wrap{grid-template-columns:1fr;gap:24px}}

/* 좌: 이미지 */
#sit_pvi{margin:0;float:none!important;width:auto!important;align-self:start}
#sit_pvi_big{border:1px solid var(--bz-line);border-radius:16px;overflow:hidden;background:#fff}
#sit_pvi_big img{display:block;width:100%;height:auto}
#sit_pvi_thumb{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 0;padding:0;list-style:none}
#sit_pvi_thumb li{margin:0;float:none}
#sit_pvi_thumb img{width:72px;height:54px;object-fit:cover;border:1px solid var(--bz-line);
  border-radius:8px;cursor:pointer}

/* 데모 체험 버튼 — 폭 전체 */
.bz-demo-cta{display:flex!important;align-items:center;justify-content:center;gap:8px;
  width:100%;min-height:54px;margin-top:12px;border-radius:12px;
  background:var(--bz-ink);color:#fff!important;font-size:var(--fs-base);font-weight:800;
  text-decoration:none;transition:background .18s ease,transform .18s ease}
.bz-demo-cta::before{content:"▷";font-size:12px}
.bz-demo-cta:hover{background:#000;transform:translateY(-2px)}

/* 우: 정보 카드 */
#sit_ov{padding:26px;border:1px solid var(--bz-line);border-radius:16px;background:#fff;
  float:none!important;width:auto!important}
.bz-item-cat{margin:0 0 8px;font-size:12px;font-weight:800;color:var(--bz-teal-dark);letter-spacing:.03em}
#sit_title{margin:0 0 8px;font-size:var(--fs-2xl);font-weight:800;letter-spacing:-.03em;line-height:1.25}
#sit_desc{margin:0 0 14px;font-size:var(--fs-sm);color:var(--bz-muted);line-height:1.7}

/* 포함사항 뱃지 */
.bz-item-badges{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 14px;padding:0;list-style:none}
.bz-item-badges li{padding:5px 11px;border-radius:999px;font-size:11px;font-weight:700}
.bz-item-badges .b1{background:#EFF6FF;color:#1D4ED8}
.bz-item-badges .b2{background:#ECFDF5;color:#047857}
.bz-item-badges .b3{background:#F5F3FF;color:#6D28D9}

/* 상세 → 문의 (참조 전달) */
.bz-item-ask{margin:0 0 16px}
.bz-item-ask a{font-size:var(--fs-xs);font-weight:700;color:var(--bz-teal-dark);
  text-decoration:underline;text-underline-offset:3px}
.bz-item-ask a:hover{color:var(--bz-red)}

/* 가격 테이블 — 앵커링 강조 */
.sit_info{margin:0 0 18px}
.sit_ov_tbl{width:100%;border-collapse:collapse;font-size:var(--fs-sm)}
.sit_ov_tbl th{padding:9px 0;text-align:left;font-weight:600;color:var(--bz-muted);
  font-size:var(--fs-xs);white-space:nowrap;width:34%}
.sit_ov_tbl td{padding:9px 0;text-align:right;font-weight:700}
.sit_ov_tbl tr + tr{border-top:1px dashed var(--bz-line)}
#sit_tot_price{margin:14px 0 0;padding:16px 18px;border-radius:12px;background:var(--bz-soft);
  font-size:var(--fs-lg);font-weight:800;text-align:right}
#sit_tot_price strong{color:var(--bz-red)}

/* 옵션/수량 */
#sit_sel_option,.sit_option{margin:0 0 14px}
#sit_opt_added{margin:0 0 14px;padding:0;list-style:none}

/* CTA 버튼 — 실제 클래스는 .sit_btn_cart / .sit_btn_buy */
#sit_ov .sit_btn_cart,
#sit_ov .sit_btn_buy,
#sit_ov .btn_buy,
#sit_ov .btn_cart{display:inline-flex!important;align-items:center;justify-content:center;
  min-height:54px!important;padding:0 20px!important;border-radius:999px!important;
  font-size:var(--fs-sm)!important;font-weight:800!important;cursor:pointer;
  border:1px solid transparent!important;
  transition:transform .18s ease,background .18s ease,border-color .18s ease}

/* 바로구매 = 주 CTA (빨강) */
#sit_ov .sit_btn_buy,
#sit_ov .btn_buy{background:var(--bz-red)!important;color:#fff!important;
  box-shadow:0 6px 18px rgba(198,40,40,.22)}
#sit_ov .sit_btn_buy:hover,
#sit_ov .btn_buy:hover{background:var(--bz-red-dark)!important;transform:translateY(-2px)}

/* 장바구니 = 보조 */
#sit_ov .sit_btn_cart,
#sit_ov .btn_cart{background:#fff!important;color:var(--bz-ink)!important;
  border-color:var(--bz-line)!important}
#sit_ov .sit_btn_cart:hover,
#sit_ov .btn_cart:hover{border-color:var(--bz-ink)!important}

/* 찜 버튼 */
#sit_ov .sit_btn_wish{min-height:46px;border-radius:999px;border:1px solid var(--bz-line);
  background:#fff;color:var(--bz-muted)}
#sit_ov .sit_btn_wish:hover{border-color:var(--bz-red);color:var(--bz-red)}

/* 하단 고정 구매바(#sit_buy.fix)는 스크롤 중 구매를 잡아주는 장치라
   숨기지 않고 브랜드 색만 입힌다. */
#sit_buy .sit_btn_buy{background:var(--bz-red)!important;color:#fff!important;
  border-radius:999px!important;min-height:48px!important;font-weight:800!important}
#sit_buy .sit_btn_buy:hover{background:var(--bz-red-dark)!important}
#sit_buy .sit_btn_cart{background:#fff!important;color:var(--bz-ink)!important;
  border:1px solid var(--bz-line)!important;border-radius:999px!important;
  min-height:48px!important;font-weight:800!important}

/* ---------------------------------------------- 하단 탭 */
#sit_tab{margin-top:8px}
.tab_tit{display:flex;gap:4px;margin:0 0 20px;padding:0;list-style:none;
  border-bottom:1px solid var(--bz-line);flex-wrap:wrap}
.tab_tit li{margin:0}
.tab_tit button{min-height:46px;padding:0 20px;border:0;background:transparent;
  font-size:var(--fs-sm);font-weight:700;color:var(--bz-muted);cursor:pointer;
  border-bottom:2px solid transparent;transition:all .18s ease}
.tab_tit button:hover{color:var(--bz-ink)}
.tab_tit button.selected{color:var(--bz-ink);border-bottom-color:var(--bz-teal)}
.tab_con{margin:0;padding:0;list-style:none}
.contents_tit{font-size:var(--fs-lg);font-weight:800;margin:0 0 16px}

@media (max-width:560px){
  #sit_ov{padding:20px}
}

/* ── 정기결제 상품 상세설명 (2026-09-10) ─────────────────────────────
   it_explan 은 html_purifier 를 거치므로 <style>·<svg> 가 제거된다.
   그래서 스타일은 여기에 두고, 아이콘은 CSS 마스크 대신 배경 도형으로 그린다. */
.bzp{max-width:960px;margin:0 auto;color:#0f172a;font-size:15px;line-height:1.8;-webkit-font-smoothing:antialiased}
.bzp *{box-sizing:border-box}

.bzp-hero{background:linear-gradient(135deg,#16233f 0%,#24365c 100%);border-radius:24px;padding:44px 40px;color:#fff;margin-bottom:20px}
.bzp-hero .tag{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.14em;color:#8fb4ff;margin-bottom:14px}
.bzp-hero h2{margin:0 0 14px;font-size:30px;font-weight:800;letter-spacing:-.03em;color:#fff;line-height:1.35}
.bzp-hero p{margin:0;font-size:15.5px;line-height:1.85;color:#c7d4ea;max-width:660px}

.bzp-card{background:#fff;border:1px solid #e6eaf0;border-radius:24px;padding:34px 36px;margin-bottom:20px}
.bzp-card>h3{margin:0 0 6px;font-size:20px;font-weight:800;letter-spacing:-.02em;color:#0f172a;border:0;padding:0}
.bzp-card>.sub{margin:0 0 24px;font-size:14px;color:#7c8798}

.bzp-who{background:#f5f8ff;border:1px solid #dbe5fb;border-radius:20px;padding:24px 26px;margin-bottom:20px}
.bzp-who h4{margin:0 0 8px;font-size:15px;font-weight:800;color:#1a3fa0}
.bzp-who p{margin:0;font-size:14.5px;line-height:1.85;color:#3f5170}

.bzp-feat{display:grid;grid-template-columns:1fr;gap:12px;margin:0}
.bzp-feat .row{display:flex;gap:16px;align-items:flex-start;padding:18px 20px;background:#fafbfd;border:1px solid #edf0f5;border-radius:16px}
.bzp-feat .ic{flex:0 0 42px;width:42px;height:42px;border-radius:12px;background:#e8efff;position:relative}
.bzp-feat .tx{flex:1;min-width:0}
.bzp-feat .tt{display:block;font-weight:800;font-size:15px;color:#0f172a;margin-bottom:3px}
.bzp-feat .dd{display:block;font-size:14px;color:#5d6b80;line-height:1.75}

.bzp-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;text-align:center}
.bzp-grid .cell{padding:20px 8px;border-radius:16px;background:#fafbfd;border:1px solid #edf0f5}
.bzp-grid .ic{width:46px;height:46px;margin:0 auto 12px;border-radius:14px;background:#e8f7f0;position:relative}
.bzp-grid .n{display:block;font-weight:800;font-size:13.5px;color:#0f172a;margin-bottom:2px}
.bzp-grid .v{display:block;font-size:12px;color:#8a94a6}

/* 아이콘 — 순수 CSS 도형. purifier 가 건드리지 못한다. */
.bzp-ic{position:relative;display:block;width:100%;height:100%}
.bzp-ic::before,.bzp-ic::after{content:"";position:absolute;left:50%;top:50%}
.bzp-feat .bzp-ic::before,.bzp-feat .bzp-ic::after{border-color:#2456d6}
.bzp-grid .bzp-ic::before,.bzp-grid .bzp-ic::after{border-color:#0f9d6e}
/* 방패 */
.i-shield::before{width:16px;height:18px;margin:-9px 0 0 -8px;border:2px solid;border-radius:3px 3px 8px 8px}
.i-shield::after{width:7px;height:4px;margin:-3px 0 0 -3.5px;border-left:2px solid;border-bottom:2px solid;transform:rotate(-45deg)}
/* 지구 */
.i-globe::before{width:18px;height:18px;margin:-9px 0 0 -9px;border:2px solid;border-radius:50%}
.i-globe::after{width:8px;height:18px;margin:-9px 0 0 -4px;border:2px solid;border-radius:50%}
/* 서버 */
.i-server::before{width:18px;height:7px;margin:-9px 0 0 -9px;border:2px solid;border-radius:2px}
.i-server::after{width:18px;height:7px;margin:2px 0 0 -9px;border:2px solid;border-radius:2px}
/* 연필 */
.i-edit::before{width:14px;height:14px;margin:-8px 0 0 -9px;border:2px solid;border-radius:2px;border-top-color:transparent;border-right-color:transparent}
.i-edit::after{width:11px;height:0;margin:-1px 0 0 -2px;border-top:2px solid;transform:rotate(-45deg)}
/* 원+느낌표 */
.i-life::before{width:18px;height:18px;margin:-9px 0 0 -9px;border:2px solid;border-radius:50%}
.i-life::after{width:0;height:7px;margin:-5px 0 0 -1px;border-left:2px solid}
/* 차트 */
.i-chart::before{width:16px;height:14px;margin:-7px 0 0 -8px;border-left:2px solid;border-bottom:2px solid}
.i-chart::after{width:9px;height:0;margin:-3px 0 0 -2px;border-top:2px solid;transform:rotate(-38deg)}
/* 반짝 */
.i-sparkle::before{width:14px;height:14px;margin:-7px 0 0 -7px;border:2px solid;border-radius:3px;transform:rotate(45deg)}
.i-sparkle::after{width:5px;height:5px;margin:-2.5px 0 0 -2.5px;border:2px solid;border-radius:50%}
/* 영상 */
.i-video::before{width:14px;height:11px;margin:-5.5px 0 0 -9px;border:2px solid;border-radius:3px}
.i-video::after{width:0;height:0;margin:-4px 0 0 4px;border-top:4px solid transparent;border-bottom:4px solid transparent;border-left:6px solid}
/* 저장 */
.i-save::before{width:16px;height:16px;margin:-8px 0 0 -8px;border:2px solid;border-radius:3px}
.i-save::after{width:8px;height:5px;margin:0 0 0 -4px;border:2px solid;border-bottom:0}
/* 달력 */
.i-calendar::before{width:16px;height:14px;margin:-6px 0 0 -8px;border:2px solid;border-radius:3px}
.i-calendar::after{width:16px;height:0;margin:-2px 0 0 -8px;border-top:2px solid}

.bzp-split{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.bzp-box{border-radius:20px;padding:24px 26px}
.bzp-box h4{margin:0 0 12px;font-size:15px;font-weight:800}
.bzp-box ul{margin:0;padding-left:18px;font-size:14px;line-height:2}
.bzp-box.inc{background:#f2fbf7;border:1px solid #cdeade}
.bzp-box.inc h4{color:#0b7a56}
.bzp-box.inc ul{color:#2f5c4c}
.bzp-box.exc{background:#fdf7f3;border:1px solid #f2ddcd}
.bzp-box.exc h4{color:#9a5b23}
.bzp-box.exc ul{color:#6f5340}

.bzp-steps{counter-reset:s;display:grid;gap:12px;margin:0;padding:0;list-style:none}
.bzp-steps li{counter-increment:s;display:flex;gap:16px;align-items:flex-start;padding:18px 20px;background:#fafbfd;border:1px solid #edf0f5;border-radius:16px}
.bzp-steps li::before{content:counter(s);flex:0 0 30px;width:30px;height:30px;border-radius:50%;background:#16233f;color:#fff;font-weight:800;font-size:14px;display:flex;align-items:center;justify-content:center}
.bzp-steps .tt{display:block;font-weight:800;font-size:15px;margin-bottom:3px}
.bzp-steps .dd{display:block;font-size:14px;color:#5d6b80;line-height:1.75}

.bzp-honest{background:#16233f;border-radius:20px;padding:28px 30px;color:#c7d4ea;font-size:14.5px;line-height:1.9}
.bzp-honest b{color:#fff;display:block;margin-bottom:8px;font-size:16px;font-weight:800}
.bzp-honest em{color:#fff;font-style:normal;font-weight:700}

@media (max-width:820px){
 .bzp-hero{padding:32px 24px;border-radius:20px}
 .bzp-hero h2{font-size:23px}
 .bzp-card{padding:26px 22px;border-radius:20px}
 .bzp-grid{grid-template-columns:repeat(2,1fr)}
 .bzp-split{grid-template-columns:1fr}
}

/* 영카트 기본 스킨이 #sit_inf h2/h3/h4 를 font-size:0 으로 숨긴다(sound_only 용도).
   상세설명 안에서는 되살려야 하므로 #sit_inf 를 붙여 명시도를 높인다. */
#sit_inf .bzp-hero h2{font-size:30px;line-height:1.35;color:#fff;font-weight:800;margin:0 0 14px;letter-spacing:-.03em}
#sit_inf .bzp-card>h3{font-size:20px;line-height:1.4;color:#0f172a;font-weight:800;margin:0 0 6px;letter-spacing:-.02em;border:0;padding:0}
#sit_inf .bzp-who h4{font-size:15px;line-height:1.6;color:#1a3fa0;font-weight:800;margin:0 0 8px}
#sit_inf .bzp-box h4{font-size:15px;line-height:1.6;font-weight:800;margin:0 0 12px}
#sit_inf .bzp-box.inc h4{color:#0b7a56}
#sit_inf .bzp-box.exc h4{color:#9a5b23}
@media (max-width:820px){
 #sit_inf .bzp-hero h2{font-size:23px}
}

/* 영카트가 #sit_inf 헤딩을 height:0 / position:absolute 로도 숨긴다.
   글자만 되살리면 아래 문단과 겹치므로 박스 모델까지 원복한다. */
#sit_inf .bzp h2,
#sit_inf .bzp h3,
#sit_inf .bzp h4{
  position:static;height:auto;width:auto;overflow:visible;clip:auto;clip-path:none;
  visibility:visible;white-space:normal;text-indent:0;background:none
}