/* ─────────────────────────────────────────────────────────────
   문성전자 — 일시불 구매 (purchase-onetime)
   설계: docs/02-design/features/purchase-onetime.design.md · 시안: docs/design/buy-toggle-draft.html
   모드 클래스(.mode-sub / .mode-buy)는 js/ms-buy.js 가 `.vi_txt_bx` 에 붙인다.
   게이트가 꺼져 있으면 토글 자체가 렌더되지 않으므로 이 파일의 규칙도 아무것도 걸리지 않는다.
   ───────────────────────────────────────────────────────────── */

/* 모드 전환 — DOM 은 그대로 두고 표시만 바꾼다 */
.vi_txt_bx.mode-sub .only-buy{display:none !important}
.vi_txt_bx.mode-buy .only-sub{display:none !important}

/* ───────── 구매 방식 토글 (닷컴 순서: 일시불 → 구독) ───────── */
.ms-buy-toggle{display:grid;grid-template-columns:1fr 1fr;margin:18px 0 0;border-bottom:2px solid #e6e9f2;
  font-family:'Samsung One Korean','Malgun Gothic','맑은 고딕',sans-serif}
.ms-buy-toggle button{background:none;border:0;border-bottom:3px solid transparent;margin-bottom:-2px;
  padding:12px 8px 13px;cursor:pointer;text-align:left;display:block;transition:border-color .15s,color .15s}
.ms-buy-toggle .lb{display:block;font-size:13.5px;font-weight:700;color:#5d6680;margin-bottom:3px}
.ms-buy-toggle .amt{display:block;font-family:'Samsung Sharp Sans','Samsung One Korean',sans-serif;
  font-size:20px;font-weight:700;color:#a8b0c2;letter-spacing:-.4px;line-height:1.15}
.ms-buy-toggle .amt small{font-family:'Samsung One Korean',sans-serif;font-size:13px}
.ms-buy-toggle button.on{border-bottom-color:#1a6ad0}
.ms-buy-toggle button.on .lb{color:#1428a0}
.ms-buy-toggle button.on .amt{color:#1a6ad0}
.ms-buy-toggle button:hover .amt{color:#1428a0}

/* ───────── 금액 박스 일시불 행 ───────── */
.ms-quote .ms-pay-row.ship{border-bottom:0;padding-top:9px}
.ms-quote .ms-pay-row.ship .k{font-weight:400;font-size:12.5px;color:var(--mq-mute)}
/* 일시불 최대 혜택가는 '월' 접두사를 붙이지 않는다 (구독 금액에만 붙는 규칙이라 여기서 끈다) */
.ms-quote .ms-pay .ms-pay-row.hl.only-buy .v:before{content:none !important}

/* 구독 전용 혜택 제외 안내 (2026-10-01) — 최대 혜택가 바로 아래 */
.ms-quote .ms-pay-row.nosub{display:block;border-bottom:0;padding:10px 12px;margin:2px 0 4px;background:#fff6e5;border-radius:10px}
.ms-quote .ms-pay-row.nosub .k{display:block;font-weight:400;font-size:13px;line-height:1.5;color:#7a4b00;word-break:keep-all}
.ms-quote .ms-pay-row.nosub .k:before{content:'!';display:inline-block;width:16px;height:16px;margin-right:6px;border-radius:50%;
  background:#c77700;color:#fff;font-size:11px;font-weight:700;line-height:16px;text-align:center;vertical-align:1px}

/* 상품명 아래 구독 조건 칩(약정·케어·선납·카드)은 일시불에선 의미가 없다 (2026-10-01) */
.vi_txt_bx.mode-buy .ms-quote #msChips{display:none !important}

/* 선납 안내 박스는 구독 전용. sop-view-option.js 가 className 을 통째로 덮어써 only-sub 가 지워지므로 여기서 막는다 */
.vi_txt_bx.mode-buy .ms-quote .prepay{display:none !important}

/* ───────── 색상 select · 수량 ───────── */
.ms-quote .ms-buy-sel{width:100%;height:46px;border:1.5px solid var(--mq-line);border-radius:12px;padding:0 12px;
  font:inherit;font-size:14px;font-weight:700;color:var(--mq-ink);background:#fff}
.ms-quote .ms-buy-qty{display:inline-flex;align-items:center;border:1.5px solid var(--mq-line);border-radius:12px;overflow:hidden}
.ms-quote .ms-buy-qty button{width:42px;height:44px;background:#fff;border:0;font-size:18px;color:var(--mq-ink);cursor:pointer;line-height:1}
.ms-quote .ms-buy-qty button:hover{background:var(--mq-g50)}
.ms-quote .ms-buy-qty input{width:56px;height:44px;border:0;border-left:1px solid var(--mq-line);border-right:1px solid var(--mq-line);
  text-align:center;font:inherit;font-size:15px;font-weight:700;color:var(--mq-ink);background:#fff}

/* ───────── 일시불 CTA ─────────
   css/sop-view-option.css 의 `.sop-cta a.go{color:#fff !important}` 가 먼저 걸리므로
   구독의 '전화상담' 버튼(.go.call)과 똑같이 !important 로 맞선다. 안 그러면 흰 배경에 흰 글씨가 된다. */
.sop-cta.sop-cta2 a.go.cart{background:#fff;color:#0f1c6e !important;border:2px solid #0f1c6e;padding:13px 8px}
.sop-cta.sop-cta2 a.go.cart:hover{background:#f3f5fb}

@media (max-width:640px){
  .ms-buy-toggle .amt{font-size:18px}
  .ms-buy-toggle{margin-left:16px;margin-right:16px}
}