/* ============================================================
   상품 상세 옵션 패널 + 구매 방식 비교 (view_rental.skin)
   데이터: shop_items(플랜) · rt_card_cont(카드) · de_prepay_rule(선납)
   ============================================================ */
#sopOpt, .sop-cmp{
  --navy:#0f1c6e; --deep:#0a1240; --blue:#2189ff; --blue-soft:#eff6ff; --blue-line:#bfdbfe; --gold:#e8c37a;
  --g50:#f8fafc; --g100:#f3f4f6; --g200:#e5e7eb; --g400:#9ca3af; --g500:#6b7280; --g700:#374151; --g900:#111827;
  --kr:'Samsung One Korean','Malgun Gothic','맑은 고딕',sans-serif;
  font-family:var(--kr);line-height:1.5;color:var(--g900)}

/* ── 옵션 그룹 ── */
#sopOpt .og{margin-top:20px}
#sopOpt .og .lb{display:flex;align-items:baseline;gap:8px;font-size:14.5px;font-weight:800;color:var(--g700)}
#sopOpt .og .lb .hint{font-size:12px;font-weight:500;color:var(--g400)}
#sopOpt .og .btns{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:10px}
#sopOpt .og .btns.c2{grid-template-columns:repeat(2,1fr)}
#sopOpt .og .btns button{appearance:none;border:1.5px solid var(--g200);background:#fff;border-radius:12px;padding:12px 6px;font-family:var(--kr);font-size:15px;font-weight:700;color:var(--g700);cursor:pointer;transition:.12s;line-height:1.3}
#sopOpt .og .btns button small{display:block;font-size:12px;font-weight:500;color:var(--g400);margin-top:3px}
#sopOpt .og .btns button.on{border-color:var(--navy);background:var(--navy);color:#fff}
#sopOpt .og .btns button.on small{color:#aebcf5}
#sopOpt .og .btns button:disabled{background:var(--g50);color:var(--g400);cursor:not-allowed;border-style:dashed}
#sopOpt .og .btns button:not(.on):not(:disabled):hover{border-color:var(--navy)}
#sopOpt .og .note{margin-top:8px;font-size:11.5px;color:var(--g400)}
#sopOpt .og select.sopsel{width:100%;margin-top:10px;border:1.5px solid var(--g200);border-radius:12px;padding:12px;font-family:var(--kr);font-size:15px;font-weight:600;color:var(--g700);background:#fff;height:auto}

/* ── 색상 스와치 ── */
#sopOpt .swatches{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}
#sopOpt .swatches .sw{appearance:none;box-sizing:border-box;border:2px solid var(--g200);background:#fff;border-radius:50%;width:40px;height:40px;padding:0;margin:0;line-height:0;font-size:0;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:.12s}
#sopOpt .swatches .sw span{display:block;flex:none;width:30px;height:30px;border-radius:50%;border:1px solid rgba(0,0,0,.08);box-sizing:border-box}
#sopOpt .swatches .sw.on{border-color:var(--blue)}
#sopOpt .swatches .sw:not(.on):hover{border-color:var(--g400)}
#sopOpt .og .lb .hint#sopColorName{color:var(--g700);font-weight:700}

/* ── 카드 신청 링크 ── */
#sopOpt .cardapply{display:inline-block;margin-top:8px;font-size:12px;color:var(--g500);text-decoration:none !important}
#sopOpt .cardapply b{color:var(--navy);font-weight:800}
#sopOpt .cardapply:hover b{text-decoration:underline}

/* ── 선납 안내 문구 ── */
#sopOpt .og .note p{margin:2px 0;line-height:1.55}

/* ── 접이식 (상세 가격 구성 / 가입·유의사항) ── */
#sopOpt .fold{margin-top:12px;border:1px solid var(--g200);border-radius:12px;overflow:hidden}
#sopOpt .fold-hd{appearance:none;width:100%;border:0;background:var(--g50);font-family:var(--kr);font-size:13px;font-weight:800;color:var(--g700);padding:13px 16px;cursor:pointer;text-align:left;display:flex;justify-content:space-between;align-items:center}
#sopOpt .fold-hd i{font-style:normal;color:var(--g400);transition:.15s}
#sopOpt .fold-hd.open i{transform:rotate(180deg)}
#sopOpt .fold-bd{background:#fff}
#sopOpt table.dtbl{width:100%;border-collapse:collapse;font-size:13px}
#sopOpt table.dtbl th{width:42%;text-align:left;font-weight:600;color:var(--g500);padding:10px 16px;border-top:1px solid var(--g100);background:none}
#sopOpt table.dtbl td{text-align:right;font-weight:700;color:var(--g900);padding:10px 16px;border-top:1px solid var(--g100)}
#sopOpt table.dtbl td.bl{color:var(--blue)}
#sopOpt table.dtbl td.hl{color:var(--navy);font-weight:900}
#sopOpt ul.ntc{margin:0;padding:12px 16px 14px}
#sopOpt ul.ntc li{list-style:none;font-size:12px;color:var(--g500);line-height:1.6;padding:3px 0 3px 14px;position:relative}
#sopOpt ul.ntc li:before{content:'·';position:absolute;left:2px;color:var(--g400)}

/* ── 가격 요약 (옵션 상단 배치) ── */
#sopOpt .sum{margin-top:24px;border-top:2px solid var(--g900);padding-top:16px}
#sopOpt .sum.top{margin-top:12px;border-top:0;border-bottom:2px solid var(--g900);padding:14px 0 16px;margin-bottom:4px}
#sopOpt .sum .li{display:flex;justify-content:space-between;align-items:baseline;padding:5px 0;font-size:13.5px;color:var(--g500)}
#sopOpt .sum .li b{font-size:14px;color:var(--g700);font-weight:700}
#sopOpt .sum .li.minus b{color:var(--blue)}
#sopOpt .sum .li.main{padding:10px 0 4px}
#sopOpt .sum .li.main .t{font-size:14px;font-weight:800;color:var(--g900)}
#sopOpt .sum .li.main b{font-size:26px;font-weight:900;color:var(--g900)}
#sopOpt .sum .li.main b span{font-size:15px;font-weight:700}
#sopOpt .sum .li.total{border-top:1px solid var(--g100);margin-top:8px;padding-top:12px}
#sopOpt .sum .prepay{background:var(--blue-soft);border:1px solid var(--blue-line);border-radius:10px;padding:9px 13px;margin-top:10px;font-size:12px;color:var(--g700);display:none}
#sopOpt .sum .prepay b{color:var(--navy)}
#sopOpt .sum .prepay.show{display:block}

/* ── 신청 CTA ── */
.sop-cta{--navy:#0f1c6e;--deep:#0a1240;--g400:#9ca3af;font-family:'Samsung One Korean','Malgun Gothic','맑은 고딕',sans-serif;margin-top:18px}
.sop-cta a.go{display:block;width:100%;box-sizing:border-box;background:var(--navy);color:#fff !important;border-radius:12px;padding:16px;font-size:16px;font-weight:800;text-align:center;text-decoration:none !important;transition:.12s}
.sop-cta a.go:hover{background:var(--deep)}
.sop-cta .sub{text-align:center;font-size:11.5px;color:var(--g400);margin-top:8px}
/* 신청 버튼 2분할 — 전화상담(아웃라인) / 셀프구독(솔리드). 전화상담 = 936 미전송·삼성 엑셀 일괄등록 경로 */
.sop-cta.sop-cta2{display:flex;gap:10px}
.sop-cta.sop-cta2 a.go{flex:1 1 0;min-width:0;display:flex;align-items:center;justify-content:center;gap:7px;padding:15px 8px;font-size:15px}
.sop-cta.sop-cta2 a.go i{font-size:20px;line-height:1}
.sop-cta.sop-cta2 a.go.call{background:#fff;color:var(--navy) !important;border:2px solid var(--navy);padding:13px 8px}
.sop-cta.sop-cta2 a.go.call:hover{background:#f3f5fb}
.sop-cta-note{text-align:center;font-size:12px;color:#6b7280;margin:8px 0 0;line-height:1.5}
@media (max-width:480px){ .sop-cta.sop-cta2 a.go{font-size:14px;padding:14px 6px;gap:5px} .sop-cta.sop-cta2 a.go i{font-size:18px} }
@media (max-width:880px){ .sop-cta{padding:0 15px} .sop-cta-note{padding:0 15px} }

/* ── 구매 방식 비교 ── */
.sop-cmp{max-width:1060px;margin:64px auto 20px;padding:0 4px}
.sop-cmp .cmp-head{text-align:center}
.sop-cmp .cmp-head .tag{display:inline-block;font-size:12px;font-weight:800;color:var(--blue);background:var(--blue-soft);border:1px solid var(--blue-line);border-radius:9999px;padding:5px 14px;letter-spacing:.5px}
.sop-cmp .cmp-head h3{margin:14px 0 0;font-size:27px;font-weight:900;letter-spacing:-.8px}
.sop-cmp .cmp-head .desc{margin:8px 0 0;color:var(--g500);font-size:13.5px}
.sop-cmp .cmp{margin-top:32px;display:grid;grid-template-columns:1fr 1.15fr;gap:0;align-items:stretch;position:relative}
.sop-cmp .vs{position:absolute;left:calc(46.5% - 24px);top:84px;width:48px;height:48px;border-radius:50%;background:#fff;border:1px solid var(--g200);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:900;color:var(--g400);z-index:3;box-shadow:0 6px 16px rgba(17,24,39,.08)}
.sop-cmp .buy{background:#fff;border:1px solid var(--g200);border-radius:24px 0 0 24px;border-right:0;padding:34px 44px 34px 34px;align-self:center;margin:18px 0}
.sop-cmp .buy .cap{font-size:12px;font-weight:800;color:var(--g400);letter-spacing:1px}
.sop-cmp .buy h3{margin:10px 0 0;font-size:17px;font-weight:900;text-align:left;letter-spacing:0}
.sop-cmp .buy .pr{margin-top:16px;font-size:12.5px;color:var(--g500)}
.sop-cmp .buy .pr b{display:block;font-size:26px;font-weight:900;color:var(--g700);margin-top:2px}
.sop-cmp .buy .pr b span{font-size:14px;font-weight:700}
.sop-cmp .buy .desc{margin-top:12px;font-size:12.5px;color:var(--g500);line-height:1.65;text-align:left}
.sop-cmp .buy ul{margin:18px 0 0;border-top:1px solid var(--g100);padding:14px 0 0}
.sop-cmp .buy li{list-style:none;font-size:12.5px;color:var(--g500);padding:4px 0 4px 20px;position:relative;text-align:left}
.sop-cmp .buy li:before{content:'—';position:absolute;left:0;color:var(--g400)}
.sop-cmp .sub-card{background:radial-gradient(700px 300px at 85% -10%, #2a3fb8 0%, transparent 55%), linear-gradient(145deg,#101a54 0%,#0a1240 72%);border-radius:26px;padding:36px;color:#fff;position:relative;box-shadow:0 26px 60px rgba(10,18,64,.35);z-index:2;text-align:left}
.sop-cmp .sub-card .rec{position:absolute;top:-13px;left:36px;background:var(--gold);color:#3a2c07;font-size:12px;font-weight:900;border-radius:9999px;padding:6px 16px;letter-spacing:.5px;box-shadow:0 6px 14px rgba(232,195,122,.4)}
.sop-cmp .sub-card .cap{font-size:12px;font-weight:800;color:#8f9cd6;letter-spacing:1px}
.sop-cmp .sub-card h3{margin:10px 0 0;font-size:17px;font-weight:900;color:#fff;text-align:left;letter-spacing:0}
.sop-cmp .sub-card .pr{margin-top:16px;font-size:12.5px;color:#aebcf5}
.sop-cmp .sub-card .pr b{display:block;font-size:34px;font-weight:900;color:var(--gold);margin-top:2px;letter-spacing:-.5px}
.sop-cmp .sub-card .pr b span{font-size:16px;font-weight:700}
.sop-cmp .sub-card .cmp-save{margin-top:14px;display:flex;flex-wrap:wrap;align-items:baseline;gap:0 6px;background:var(--gold);color:#3a2c07;border:0;border-radius:16px;padding:12px 18px 14px;line-height:1.33;box-shadow:0 10px 24px rgba(232,195,122,.35)}   /* 2026-09-16 사용자 지시(문성·평강과 동일 구조): 절감액 강조 — 골드 판, 첫 줄 라벨 · 둘째 줄 큰 숫자 + 유리해요 */
.sop-cmp .sub-card .cmp-save .lb{width:100%;display:flex;align-items:center;gap:6px;font-size:12px;font-weight:800;color:rgba(58,44,7,.75);margin-bottom:4px}
.sop-cmp .sub-card .cmp-save .lb:before{content:'';width:14px;height:14px;flex:none;background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233a2c07' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v14M6 12l6 6 6-6'/%3E%3C/svg%3E")}
.sop-cmp .sub-card .cmp-save b{color:#3a2c07;font-weight:900;font-size:26px;line-height:1;letter-spacing:-.4px}
.sop-cmp .sub-card .cmp-save .sf{font-size:14px;font-weight:800;color:#3a2c07}
.sop-cmp .sub-card table.cmp-tbl{width:100%;border-collapse:collapse;margin-top:16px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:12px;overflow:hidden}
.sop-cmp .sub-card .cmp-tbl th{background:transparent;white-space:normal;text-align:left;font-weight:600;font-size:12.5px;color:#c7d4ff;padding:9px 14px;border-top:1px solid rgba(255,255,255,.08)}
.sop-cmp .sub-card .cmp-tbl th small{font-size:11px;color:#8f9cd6;font-weight:500}
.sop-cmp .sub-card .cmp-tbl td{background:transparent;text-align:right;font-weight:700;font-size:13px;color:#fff;padding:9px 14px;border-top:1px solid rgba(255,255,255,.08)}
.sop-cmp .sub-card .cmp-tbl tr:first-child th,.sop-cmp .sub-card .cmp-tbl tr:first-child td{border-top:0}
.sop-cmp .sub-card .cmp-tbl td.mi{color:#8fd3ff}
.sop-cmp .sub-card .cmp-tbl tr.tot th{font-weight:800;color:#fff;border-top:1px solid rgba(255,255,255,.25)}
.sop-cmp .sub-card .cmp-tbl tr.tot td{font-weight:900;font-size:15px;color:var(--gold);border-top:1px solid rgba(255,255,255,.25)}
.sop-cmp .sub-card .bene{margin-top:20px;border-top:1px solid rgba(255,255,255,.12);padding-top:16px}
.sop-cmp .sub-card .bt{font-size:12px;font-weight:800;color:#8f9cd6;letter-spacing:.5px}
.sop-cmp .sub-card .bene ul{margin:10px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:6px 14px;padding:0}
.sop-cmp .sub-card .bene li{list-style:none;font-size:12.5px;color:#e6ebff;padding-left:20px;position:relative;line-height:1.5}
.sop-cmp .sub-card .bene li:before{content:'✓';position:absolute;left:0;color:var(--gold);font-weight:900}
.sop-cmp .sub-card .care{margin-top:18px}
.sop-cmp .sub-card .care .tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.sop-cmp .sub-card .care .tg{font-size:11.5px;font-weight:600;color:#c7d4ff;border:1px solid rgba(255,255,255,.18);border-radius:9999px;padding:5px 12px}

@media (max-width:880px){
  #sopOpt .og .btns{grid-template-columns:repeat(2,1fr)}
  .sop-cmp .cmp{grid-template-columns:1fr}
  .sop-cmp .vs{display:none}
  .sop-cmp .buy{border-radius:20px;border-right:1px solid var(--g200);margin:0 0 14px;padding:26px}
  .sop-cmp .sub-card{padding:28px 24px}
  .sop-cmp .sub-card .bene ul{grid-template-columns:1fr}
  .sop-cmp .cmp-head h3{font-size:21px}
  .sop-cmp .sub-card .cmp-save{padding:10px 16px 12px}
  .sop-cmp .sub-card .cmp-save b{font-size:22px}
}