/* ─────────────────────────────────────────────────────────────
   문성전자 — 상세 옵션 패널 (견적서형, ms-quote)
   2026-09-16 삼성 피드백 5·6번: 글자 한 단계 확대(본문 14·보조 12·라벨 14), 금액 강조는 네이비→브랜드 블루
   시안: docs/design/option-quote-draft.html (2026-09-08 확정) · PC·모바일 공용
   js/sop-view-option.js 가 만드는 버튼(#sopPeriod button 등)을 그대로 스타일링. #sopPrepay 버튼·#sopCard 드롭다운은 숨기고 js/ms-quote.js 가 동기화
   ───────────────────────────────────────────────────────────── */
#sopOpt.ms-quote{--mq-navy:#0f1c6e;--mq-ink:#1b2440;--mq-mute:#5d6680;--mq-line:#e6e9f2;--mq-blue:#1a6ad0;--mq-blue-soft:#eaf3ff;--mq-g50:#f6f8fc;--mq-band:#e9ecf3;
  --mq-en:'Samsung Sharp Sans','Samsung One Korean',sans-serif;
  background:#fff;border:1px solid var(--mq-line);border-radius:24px;box-shadow:0 24px 60px rgba(15,28,110,.10);overflow:hidden;margin:14px 0 12px;line-height:1.5;color:var(--mq-ink);text-align:left}
#sopOpt.ms-quote *{box-sizing:border-box}
/* 카테고리 띠 기본색 (관리자 타일 색이 있으면 인라인 --mq-band 가 우선) */
#sopOpt.ms-quote .mq-head.fridge{--mq-band:#e3efff}#sopOpt.ms-quote .mq-head.kimchi{--mq-band:#e4f7ee}#sopOpt.ms-quote .mq-head.dish{--mq-band:#ffe9d6}#sopOpt.ms-quote .mq-head.induct{--mq-band:#ece8ff}
.ms-quote .mq-head{background:linear-gradient(180deg,var(--mq-band),#fff);padding:22px 24px 18px;border-bottom:1px dashed var(--mq-line)}
.ms-quote .mq-head .eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:var(--mq-en);font-size:11px;letter-spacing:.16em;color:var(--mq-blue);text-transform:uppercase}
.ms-quote .mq-head .eyebrow i{width:6px;height:6px;border-radius:50%;background:#2fbf8f}
.ms-quote .mq-head h2{margin:8px 0 0;font-size:18px;font-weight:700;letter-spacing:-.3px;line-height:1.35;color:var(--mq-ink);text-align:left}
.ms-quote .mq-head .sku{font-family:var(--mq-en);font-size:10.5px;color:#a0a7ba;letter-spacing:.04em;margin-top:2px}
.ms-quote .mq-head .big{margin-top:14px;display:flex;align-items:baseline;gap:8px}
.ms-quote .mq-head .big .l{font-size:14px;color:var(--mq-mute)}
.ms-quote .mq-head .big .v{font-family:var(--mq-en);font-size:42px;line-height:1;color:var(--mq-blue);letter-spacing:-.5px;margin-left:auto;font-weight:700}
.ms-quote .mq-head .big .v span{font-family:'Samsung One Korean',sans-serif;font-size:16px;font-weight:700;color:var(--mq-ink);margin-left:2px}
.ms-quote .mq-head .chips{margin-top:10px;display:flex;flex-wrap:wrap;gap:6px;min-height:22px}
.ms-quote .mq-head .chips span{font-size:12px;background:#fff;border:1px solid var(--mq-line);border-radius:6px;padding:2px 8px;color:var(--mq-mute)}
/* 점선 리더 */
.ms-quote .mq-lines{padding:14px 24px 6px}
.ms-quote .mq-line{display:flex;align-items:baseline;gap:8px;font-size:14px;padding:6px 0}
.ms-quote .mq-line .k{color:var(--mq-mute);white-space:nowrap}
.ms-quote .mq-line .k small{font-size:13px}
.ms-quote .mq-line .dots{flex:1;border-bottom:1px dotted #c9cfdd;transform:translateY(-4px)}
.ms-quote .mq-line .v{font-family:var(--mq-en);font-size:15px;color:var(--mq-ink);white-space:nowrap;font-weight:700}
.ms-quote .mq-line.minus .v{color:var(--mq-blue)}
.ms-quote .mq-line.total{border-top:1px solid var(--mq-line);margin-top:4px;padding-top:10px}
.ms-quote .mq-line.total .k{color:var(--mq-ink);font-weight:700}
.ms-quote .mq-line.total .v{font-size:17px;color:var(--mq-blue)}
.ms-quote .mq-line.hl .v{color:var(--mq-blue)}
/* 선납 안내 — 2026-09-21 현성 스타일: 연파랑 박스에 '오늘 납부 선납금 / 선납 후 월 구독료' 2줄 */
.ms-quote .prepay{display:none;margin:12px 0 0;background:#f2f7ff;border:1px solid #dbe6f7;border-radius:12px;padding:11px 14px}
.ms-quote .prepay .pr{display:flex;align-items:center;gap:10px;padding:3px 0;font-size:14px;font-weight:700;color:#2b5fd9}
.ms-quote .prepay .pr b{margin-left:auto;font-family:var(--mq-en);font-size:16px;color:#1d4ed8;white-space:nowrap}
.ms-quote .prepay .pr + .pr b{color:#16a34a}   /* 선납 후 월 구독료 = 초록 (현성과 동일) */
.ms-quote .prepay.show{display:block}
.ms-quote .prepay b{font-family:var(--mq-en)}
/* 옵션 */
.ms-quote .mq-opts{padding:14px 24px 0}
.ms-quote .og{padding:12px 0;border-top:1px solid var(--mq-line)}
.ms-quote .og:first-child{border-top:0}
.ms-quote .og .lb{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:700;color:var(--mq-ink);margin-bottom:9px}
.ms-quote .og .lb.sub{margin-top:8px;font-size:13px;color:var(--mq-mute)}
.ms-quote .og .lb .hint{font-weight:400;color:var(--mq-mute);font-size:12.5px}
.ms-quote .og .lb .val{margin-left:auto;font-weight:400;color:var(--mq-blue);font-size:13px}
.ms-quote .pills{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.ms-quote .pills.c2{grid-template-columns:repeat(2,1fr)}
.ms-quote .pills button{height:44px;border:1.5px solid var(--mq-line);border-radius:12px;background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;font:inherit;font-size:14px;font-weight:700;color:var(--mq-ink);transition:border-color .15s,background .15s,color .15s;line-height:1.15;padding:0 4px}
.ms-quote .pills button small{font-size:11px;color:var(--mq-mute);font-weight:400}
.ms-quote .pills button:hover{border-color:#b9d3ff}
.ms-quote .pills button.on{border-color:var(--mq-blue);background:var(--mq-blue-soft);color:var(--mq-navy)}
.ms-quote .pills button.on small{color:var(--mq-blue)}
.ms-quote .pills button:disabled{opacity:.35;cursor:default}
/* 색상 스와치 (JS: button.sw > span) */
.ms-quote .sw{display:flex;gap:8px}
.ms-quote .sw button{width:26px;height:26px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,.12);padding:0;background:none;cursor:pointer;overflow:hidden}
.ms-quote .sw button span{display:block;width:100%;height:100%;border-radius:50%}
.ms-quote .sw button.on{box-shadow:0 0 0 2px var(--mq-blue)}
/* 케어 토글 (JS 가 만든 버튼 2개) */
.ms-quote .toggle.c3{grid-template-columns:repeat(3,1fr)}   /* 구독케어 3종 (2026-09-30) */
.ms-quote .toggle{display:grid;grid-template-columns:1fr 1fr;background:var(--mq-g50);border:1px solid var(--mq-line);border-radius:12px;padding:3px;gap:0}
.ms-quote .toggle button{background:none;border:0;padding:10px 6px;font:inherit;font-size:14px;font-weight:700;color:var(--mq-mute);cursor:pointer;border-radius:10px;transition:background .2s,color .2s,box-shadow .2s;line-height:1.15;display:flex;flex-direction:column;align-items:center}
.ms-quote .toggle button small{font-size:11px;font-weight:400}
.ms-quote .toggle button.on{color:var(--mq-navy);background:#fff;box-shadow:0 2px 8px rgba(15,28,110,.12)}
.ms-quote .toggle button:disabled{opacity:.4;cursor:default}
/* 선납 박스(알약) 선택 — 2026-09-16 슬라이더에서 교체 (실제 #sopPrepay 버튼은 숨김, js/ms-quote.js 가 알약 생성·동기화) */
.ms-quote .hidden-btns{display:none !important}
/* 2026-09-21 삼성 피드백: 알약 부제 제거 — 비율만 남아 한 줄이라 높이를 줄인다 */
.ms-quote .pills.pre button{height:46px;font-size:15px}
.ms-quote .note{margin-top:10px;font-size:12.5px;color:var(--mq-mute)}
.ms-quote .note p{margin:2px 0}
/* 카드 칩 (실제 select 는 시각적으로 숨김) */
.ms-quote .visually-hidden,.ms-quote select.sopsel.visually-hidden{position:absolute !important;left:0 !important;top:0 !important;width:1px !important;height:1px !important;min-width:0 !important;margin:-1px !important;padding:0 !important;overflow:hidden !important;clip:rect(0 0 0 0);border:0 !important}   /* 솔루션 .sopsel width:100% 보다 우선 — 모바일 가로 넘침 방지 */
/* 상세 설명(카페24에서 가져온 860px 이미지·유튜브)이 모바일에서 잘리지 않도록 */
.vi_cbody img,.vi_cbody iframe,.vi_cbody video{max-width:100% !important;height:auto}
.vi_cbody iframe{aspect-ratio:16/9}
.ms-quote .cards{display:flex;flex-wrap:wrap;gap:6px}
.ms-quote .cards button{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 12px;border:1.5px solid var(--mq-line);border-radius:9999px;font:inherit;font-size:13px;font-weight:700;cursor:pointer;background:#fff;color:var(--mq-ink);transition:border-color .15s,background .15s}
.ms-quote .cards button i{width:16px;height:11px;border-radius:2px;display:inline-block;background:#9aa3b8}
.ms-quote .cards button small{font-weight:400;color:var(--mq-mute);font-size:12px}
.ms-quote .cards button.on{border-color:var(--mq-blue);background:var(--mq-blue-soft)}
.ms-quote .cards button.none{color:var(--mq-mute)}
/* 선택 카드의 실적 구간 */
.ms-quote .tiers{display:flex;flex-wrap:wrap;align-items:center;gap:5px;margin-top:8px;padding:8px 10px;background:var(--mq-g50);border-radius:12px}
.ms-quote .tiers .tl{font-size:12px;color:var(--mq-mute);margin-right:4px}
.ms-quote .tiers button{height:30px;padding:0 10px;border:1px solid var(--mq-line);border-radius:9999px;background:#fff;font:inherit;font-size:12.5px;font-weight:700;color:var(--mq-ink);cursor:pointer}
.ms-quote .tiers button small{font-weight:400;color:var(--mq-blue);font-size:12px}
.ms-quote .tiers button.on{border-color:var(--mq-blue);background:var(--mq-blue-soft);color:var(--mq-navy)}
.ms-quote .cardlink{display:block;margin-top:8px;font-size:12.5px;color:var(--mq-mute);text-decoration:none}
.ms-quote .cardlink b{color:var(--mq-blue)}
/* 폴드 */
.ms-quote .folds{padding:6px 24px 8px}
.ms-quote .fold{border-top:1px solid var(--mq-line)}
.ms-quote .fold-hd{width:100%;background:none;border:0;text-align:left;padding:12px 0;font:inherit;font-size:14px;font-weight:700;color:var(--mq-ink);display:flex;align-items:center;cursor:pointer}
.ms-quote .fold-hd i{margin-left:auto;font-style:normal;color:var(--mq-mute);transition:transform .2s}
.ms-quote .fold-hd.open i{transform:rotate(180deg)}
.ms-quote .fold-bd{padding:0 0 14px}
.ms-quote .receipt{background:var(--mq-g50);border-radius:14px;padding:12px 14px;font-size:13.5px}
.ms-quote .receipt .mq-line{padding:3px 0}
.ms-quote .receipt .mq-line .v{font-size:14px;font-weight:700}
.ms-quote .ntc{list-style:none;margin:0;padding:0;font-size:13px;color:var(--mq-mute);display:flex;flex-direction:column;gap:5px}
.ms-quote .ntc li:before{content:'·';margin-right:5px}
/* 숫자 굴림 */
.ms-quote .bump{animation:mq-bump .35s}
@keyframes mq-bump{0%{transform:translateY(6px);opacity:.3}100%{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.ms-quote .bump{animation:none}}

/* ───────── 구매 방식 비교 (사서 쓸까, 구독할까) — ms-cmpi ─────────
   2026-09-16 삼성 피드백 1번: 현성 틀(3열 표 카드 + 절감액 머리띠) + 우주 강조(AI 구독 열 브랜드 블루 배경·흰 글씨).
   PC 는 .ms-brief-band(왼쪽 AI 브리핑 | 오른쪽 비교 카드 = 옵션 열 폭 540px) 안에, 모바일은 옵션 아래 전체 폭. 시안 docs/design/brief-compare-draft.html */
/* 2026-09-18 재배치: 비교표는 오른쪽 옵션 열 안 신청 버튼 바로 위, AI 브리핑은 왼쪽 열 갤러리 아래 펼쳐보기. 아래 띠(.ms-brief-band)는 더 이상 쓰지 않는다 */
.ms-cmp-col{margin:18px 0 0}
.ms-cmp-hd{display:flex;align-items:center;gap:8px;margin:0 0 10px;font-family:'Samsung Sharp Sans','Samsung One Korean',sans-serif;font-size:11px;letter-spacing:.16em;color:#1a6ad0;text-transform:uppercase}
.ms-cmp-hd b{font-family:'Samsung One Korean','Malgun Gothic',sans-serif;letter-spacing:0;text-transform:none;font-size:15px;color:#1b2440}
#sopCmp.ms-cmpi{--mq-navy:#0f1c6e;--mq-navy2:#1428a0;--mq-ink:#1b2440;--mq-mute:#5d6680;--mq-blue:#1a6ad0;--mq-blue-soft:#eaf3ff;
  --mq-en:'Samsung Sharp Sans','Samsung One Korean',sans-serif;
  font-family:'Samsung One Korean','Malgun Gothic','맑은 고딕',sans-serif;line-height:1.5;color:var(--mq-ink);text-align:left;
  background:#fff;border:1px solid rgba(20,40,160,.16);border-radius:16px;overflow:hidden;box-shadow:0 12px 32px rgba(15,28,110,.08);margin:0;padding:0}
#sopCmp.ms-cmpi *{box-sizing:border-box}
/* 머리띠 */
.ms-cmpi .hd{background:linear-gradient(135deg,#2483ee 0%,#1428a0 100%);color:#fff;padding:14px 16px 13px}
.ms-cmpi .hd .kicker{font-family:var(--mq-en);font-size:12px;letter-spacing:.06em;font-weight:700;opacity:.95}
.ms-cmpi .hd .kicker .vs{opacity:.75}
.ms-cmpi .hd .kicker b{font-family:inherit;font-family:'Samsung One Korean',sans-serif;font-size:15px;letter-spacing:0;margin-left:4px}
.ms-cmpi .hd .row{display:flex;align-items:center;gap:10px;margin-top:8px}
.ms-cmpi .hd .pill{display:inline-flex;align-items:center;height:26px;padding:0 10px;border-radius:9999px;background:#fff;color:var(--mq-navy2);font-size:13px;font-weight:700;white-space:nowrap}
.ms-cmpi .hd .cnt{font-family:var(--mq-en);font-size:34px;line-height:1;font-weight:700;letter-spacing:-.5px;display:flex;align-items:baseline;gap:4px;color:#fff}
.ms-cmpi .hd .cnt b{font-weight:700}
.ms-cmpi .hd .cnt small{font-family:'Samsung One Korean',sans-serif;font-size:15px;font-weight:700}
.ms-cmpi .hd .zero{display:none;margin-top:8px;font-size:13px;font-weight:700}
.ms-cmpi.iszero .hd .row{display:none !important}
.ms-cmpi.iszero .hd .zero{display:block}
/* 3열 표 */
/* 2026-09-18 삼성 피드백 3번: 행 이름 칸과 일시불 열이 같은 회색 배경이라 한 덩어리로 보이던 문제 — 행 이름 칸을 흰색으로 떼고 열마다 세로 경계선, AI 구독 열은 1.2fr 로 넓힌다 */
.ms-cmpi .tb{display:grid;grid-template-columns:112px 1.2fr 1fr;background:#eef4ff}   /* 2026-09-28 평강 기준: 항목 | AI 구독 | 일시불 */
.ms-cmpi .c:not(.rh){border-left:1px solid #dde7f7}
.ms-cmpi .c.ai{border-left:1px solid var(--mq-navy2)}
.ms-cmpi .c{padding:9px 10px;border-bottom:1px solid #dde7f7;font-size:14px;font-weight:700;color:#334155;background:#fff;display:flex;flex-direction:column;justify-content:center;gap:2px;min-width:0}
.ms-cmpi .c strong{font-family:var(--mq-en);font-size:15.5px;font-weight:700;color:var(--mq-navy2);letter-spacing:-.2px}
.ms-cmpi .c .mut{font-size:12px;font-weight:400;color:#64748b;font-family:'Samsung One Korean',sans-serif}
.ms-cmpi .c.rh{background:#fff;color:#0f172a;font-size:13px}
.ms-cmpi .c.rh .tag{display:inline-block;margin-left:4px;padding:1px 6px;border-radius:9999px;background:var(--mq-blue-soft);color:var(--mq-navy2);font-size:9.5px;vertical-align:1px}
.ms-cmpi .c.th.rh{background:#fff;border-left:0}
.ms-cmpi .c.th{justify-content:center;align-items:center;text-align:center;font-size:13.5px;font-weight:700;padding:10px 8px;color:#0f172a;background:#f8fafc}
.ms-cmpi .c.th.ai{flex-direction:row;gap:6px}
.ms-cmpi .c.th.ai .rec{display:inline-flex;align-items:center;height:16px;padding:0 6px;border-radius:9999px;font-size:9px;font-weight:700}
/* AI 구독 열 강조 (우주식): 브랜드 블루 배경 + 흰 글씨 */
.ms-cmpi .c.ai{background:var(--mq-blue);color:#fff;border-bottom-color:rgba(255,255,255,.28)}
.ms-cmpi .c.ai strong{color:#fff}
.ms-cmpi .c.ai .mut{color:rgba(255,255,255,.78)}
.ms-cmpi .c.th.ai{background:var(--mq-navy2);color:#fff}
.ms-cmpi .c.th.ai .rec{background:#fff;color:var(--mq-navy2)}
/* 숨김 행: JS 가 AI 셀(display:none)을 숨기면 같은 행의 이름·일시불 셀도 숨김 (ms-quote.js 가 .off 동기화) */
.ms-cmpi .c.off{display:none}
/* 최종 체감가 행 */
.ms-cmpi .c.fin{padding:13px 10px}
.ms-cmpi .c.fin.rh{background:#fff;font-size:13px}
.ms-cmpi .c.fin.cash{background:#f8fafc}
.ms-cmpi .c.fin.cash strong{font-size:15px;color:#334155;text-decoration:line-through;text-decoration-thickness:1.5px;text-decoration-color:#9aa3b8}
.ms-cmpi .c.fin.ai{background:linear-gradient(135deg,#1a6ad0,#1428a0)}
.ms-cmpi .c.fin.ai strong{font-size:20px}
.ms-cmpi .c.fin.ai .zp{display:none;align-items:center;gap:6px}
.ms-cmpi .c.fin.ai .zp b{display:inline-flex;height:24px;padding:0 10px;border-radius:9999px;background:#fff;color:var(--mq-navy2);font-size:13px;font-weight:700;align-items:center}
.ms-cmpi.iszero .c.fin.ai strong{display:none}
.ms-cmpi.iszero .c.fin.ai .zp{display:flex}

/* 동시구독까지 반영한 줄(.fin2)이 따로 있으면 최종혜택가는 한 단계 낮춘다 (2026-09-28) */
.ms-cmpi .tb.has-opt .c.fin.ai{background:var(--mq-blue)}
.ms-cmpi .tb.has-opt .c.fin.ai strong{font-size:17px}
.ms-cmpi .tb.has-opt .c.fin.cash strong{text-decoration:none}
/* 최종 혜택포함 체감가 — 다품목 할인까지 반영한 마지막 줄 */
.ms-cmpi .c.fin2{padding:13px 10px}
.ms-cmpi .c.fin2.rh{background:#fff;font-size:13px}
.ms-cmpi .c.fin2.cash{background:#f8fafc}
.ms-cmpi .c.fin2.cash strong{font-size:15px;color:#334155;text-decoration:line-through;text-decoration-thickness:1.5px;text-decoration-color:#9aa3b8}
.ms-cmpi .c.fin2.ai{background:linear-gradient(135deg,#1a6ad0,#1428a0)}
.ms-cmpi .c.fin2.ai strong{font-size:20px;color:#fff}
.ms-cmpi .c.fin2.ai .mut{color:rgba(255,255,255,.78)}
.ms-cmpi .c.fin2.ai .zp{display:none;align-items:center;gap:6px}
.ms-cmpi .c.fin2.ai .zp b{display:inline-flex;height:24px;padding:0 10px;border-radius:9999px;background:#fff;color:var(--mq-navy2);font-size:13px;font-weight:700;align-items:center}
.ms-cmpi.iszero .c.fin2.ai strong{display:none}
.ms-cmpi.iszero .c.fin2.ai .zp{display:flex}
.ms-cmpi .ft{padding:8px 12px 10px;background:#f8fafc;font-size:11.5px;color:#64748b;line-height:1.45}
.ms-cmpi .ft b{color:#334155}
@media (max-width:1024px){.ms-cmp-col{margin:14px 0 0}.ms-cmp-hd{margin-top:14px}}
@media (max-width:640px){.ms-cmpi .tb{grid-template-columns:100px 1.15fr 1fr}.ms-cmpi .c{font-size:13px}.ms-cmpi .c strong{font-size:14.5px}.ms-cmpi .hd .cnt{font-size:28px}}

/* PC 2열: 왼쪽(갤러리 + AI 브리핑) | 오른쪽(금액 → 옵션 → 비교표 → 신청 → AI 상담원에게 물어보기)
   2026-09-18 재적용(사용자 지시): 오른쪽 열을 화면에 붙이고 열 안에서 스크롤 — 제목부터 AI 상담 버튼까지가 한 스크롤 영역이다.
   높이는 js/ms-quote.js 끝의 fit() 이 플로팅 상담바 높이를 빼고 다시 계산한다 */
@media (min-width:1025px){
  .vi_txt_bx{position:sticky;top:16px;align-self:flex-start;max-height:calc(100vh - 16px - 64px - 16px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#0f1c6e transparent;padding-right:10px}
  .vi_txt_bx::-webkit-scrollbar{width:6px}.vi_txt_bx::-webkit-scrollbar-track{background:transparent}.vi_txt_bx::-webkit-scrollbar-thumb{background:#0f1c6e;border-radius:3px}.vi_txt_bx::-webkit-scrollbar-thumb:hover{background:#142a8f}
  .vi_txt_bx .sop-cta .go{border-radius:14px;background:#0f1c6e;box-shadow:0 10px 24px rgba(15,28,110,.25)}
  .vi_txt_bx .sop-cta .go:hover{background:#142a8f}
}
@media (max-width:640px){
  #sopOpt.ms-quote{border-radius:18px;margin:10px 0}
  .ms-quote .mq-head{padding:18px 16px 14px}.ms-quote .mq-head .big .v{font-size:34px}
  .ms-quote .mq-lines,.ms-quote .mq-opts,.ms-quote .folds{padding-left:16px;padding-right:16px}
  .ms-quote .pills{gap:5px}.ms-quote .pills button{height:42px;font-size:13.5px}
}

/* ───────── 금액 소구 박스 (.ms-pay) — 2026-09-17 삼성 2차 피드백 2번 ─────────
   현성 순서: 월 납부 예상금액(제휴카드 미적용) → 제휴카드 적용가(강조) → 멤버십 포인트 → 상품권.
   값 요소는 기존 id 를 그대로 옮겨 왔다 (#dMonthly · #sopFinal) — js/sop-view-option.js 가 채운다.
   시안: docs/design/pay-box-draft.html */
.ms-quote .ms-pay{margin:16px 24px 0;border:1.5px solid #dbe6f7;border-radius:16px;background:#fff;padding:4px 16px;box-shadow:0 6px 20px rgba(15,28,110,.05)}
.ms-quote .ms-pay-row{display:flex;align-items:center;gap:10px;padding:11px 0;border-bottom:1px dashed #edf1f8}
.ms-quote .ms-pay-row:last-child{border-bottom:0}
.ms-quote .ms-pay-row .k{font-size:14px;font-weight:700;color:var(--mq-ink)}
.ms-quote .ms-pay-row .k i{width:14px;height:14px;border-radius:50%;border:1px solid #c3cbdb;color:#9aa3b8;font-style:normal;font-size:9.5px;font-weight:700;display:inline-grid;place-items:center;cursor:help;vertical-align:1px;margin-left:3px}
.ms-quote .ms-pay-row .v{margin-left:auto;text-align:right;font-family:var(--mq-en);font-size:17px;font-weight:700;color:var(--mq-ink);white-space:nowrap}
.ms-quote .ms-pay-row .v span{font-family:'Samsung One Korean',sans-serif;font-size:13px}
.ms-quote .ms-pay .sub{display:block;font-family:'Samsung One Korean',sans-serif;font-size:11.5px;font-weight:400;color:var(--mq-mute);margin-top:2px}
/* 금액 앞 '월' — sop-view-option.js 가 숫자만 넣으므로 CSS 로 붙인다. 플랜이 없을 때(.noplan)는 붙이지 않는다 */
.ms-quote .ms-pay:not(.noplan) #dMonthly:before,.ms-quote .ms-pay:not(.noplan) #sopFinal:before{content:'월 ';font-family:'Samsung One Korean',sans-serif;font-size:13px;font-weight:700;color:var(--mq-mute)}
/* 제휴카드 적용가 = 강조 행 */
.ms-quote .ms-pay-row.hl{border-bottom:2px solid #eef3fb;padding:13px 0}
.ms-quote .ms-pay-row.hl .k{font-size:15px}
.ms-quote .ms-pay-row.hl .v{font-size:30px;color:var(--mq-blue);letter-spacing:-.5px;line-height:1.05}
.ms-quote .ms-pay-row.hl .v span{font-size:15px;color:var(--mq-ink);margin-left:1px}
.ms-quote .ms-pay-row.hl .v:before{font-size:15px !important;color:var(--mq-blue) !important}
.ms-quote .ms-pay-row.pt .v{font-size:15px;color:#1428a0}
.ms-quote .ms-pay-row.gift .k{font-weight:400;color:#4b5563;font-size:13.5px}
.ms-quote .ms-pay-row.gift .v{font-size:15px}
/* 카드 미선택: 두 금액이 같아지므로 흐리게 + 안내 문구 */
.ms-quote .ms-pay .nocard{display:none}
.ms-quote .ms-pay.nocard .nocard{display:block}
.ms-quote .ms-pay.nocard .oncard{display:none}
.ms-quote .ms-pay.nocard .ms-pay-row.hl .v,.ms-quote .ms-pay.nocard .ms-pay-row.hl .v span{color:#9aa3b8}
/* 숨김 보존 — sop-view-option.js 가 값을 쓰는 요소들 (견적서 삭제 후에도 유지, 2026-09-18) */
.ms-quote .ms-keep{display:none !important}

/* ───────── 상세 2열 배치 (2026-09-18) ───────── */
.vi_info .ms-vi-left{flex:1 1 0%;min-width:0;margin-right:44px}
/* AI 브리핑 펼쳐보기 (삼성 피드백 1번) — 공통 sop.ai.php 는 그대로 두고 래퍼만 접는다 */
.ms-brief-fold{margin-top:22px;border:1px solid #e6e9f2;border-radius:16px;background:#fff;overflow:hidden}
.ms-brief-hd{width:100%;background:none;border:0;text-align:left;padding:15px 18px;font:700 14px 'Samsung One Korean','Malgun Gothic',sans-serif;color:#1b2440;display:flex;align-items:center;gap:8px;cursor:pointer}
.ms-brief-hd .dot{width:8px;height:8px;border-radius:50%;background:conic-gradient(from 210deg,#1428a0,#2189ff,#7dd3fc,#1428a0);flex:none}
.ms-brief-hd .eb{font-family:'Samsung Sharp Sans','Samsung One Korean',sans-serif;font-size:11px;letter-spacing:.14em;color:#1a6ad0;text-transform:uppercase}
.ms-brief-hd i{margin-left:auto;font-style:normal;color:#5d6680;transition:transform .2s}
.ms-brief-hd.open i{transform:rotate(180deg)}
.ms-brief-fold .ms-brief-wrap{margin:0;padding:0 18px 4px}
.ms-brief-fold .ms-brief-wrap .sab{margin:0 0 10px}

@media (max-width:1024px){
  .ms-quote .ms-pay{margin:14px 15px 0}
  .ms-brief-fold{margin:14px 15px 0}
}
@media (max-width:640px){
  .ms-quote .ms-pay{margin:12px 16px 0;padding:2px 14px}
  .ms-quote .ms-pay-row.hl .v{font-size:26px}
}

/* ── 2026-09-28 "평강 기준" 비교표 — 총 할인 소계·하위 세 줄·SOP 혜택·프로모션·다품목, 빈 칸 '—', 빨간 율 배지 (값은 js/ms-quote.js paintGuide) ── */
.ms-cmpi .c .pct{display:inline-block;margin-left:5px;padding:1px 5px;border-radius:3px;background:#c0392b;color:#fff;font-family:var(--mq-en);font-size:10.5px;font-weight:700;line-height:15px;vertical-align:1px;white-space:nowrap}
.ms-cmpi .c .pct:empty{display:none}
.ms-cmpi .c.rh .pre{display:none}   /* 공통 JS 가 쓰는 ' (5%)' — #msPreRateB 배지로 옮겨 보인다 */
.ms-cmpi .c .dash{font-family:var(--mq-en);font-size:15px;font-weight:700;color:#9aa3b8}
.ms-cmpi .c.ai .dash{color:rgba(255,255,255,.7)}
.ms-cmpi .c.ai > .v{display:flex;flex-direction:column;gap:2px}
.ms-cmpi .c.ai:not(.is-empty) > .v + .dash{display:none}
/* 총 할인 소계 */
.ms-cmpi .c.sum{background:#f3f7ff;border-top:1px solid #c9d8f5}
.ms-cmpi .c.sum.rh{font-weight:800;color:#0f172a}
.ms-cmpi .c.ai.sum{background:#1668dc;border-top-color:rgba(255,255,255,.35)}
.ms-cmpi .c.ai.sum strong{font-size:17px}
/* 하위 세 줄 */
.ms-cmpi .c.sub2{padding-top:7px;padding-bottom:7px;background:#fbfcff}
.ms-cmpi .c.sub2.rh{position:relative;padding-left:20px;font-size:12px;font-weight:600;color:#475569}
.ms-cmpi .c.sub2.rh:before{content:'';position:absolute;left:9px;top:17px;width:6px;height:1px;background:#b9c4dc}
.ms-cmpi .c.ai.sub2{background:#2a72d6}   /* 2026-09-29 스타일 검수 — #3a8cf2 위 흰 글자 3.4 → 4.6 (AI 열 #1a6ad0 보다 한 단계 밝게 구분은 유지) */
.ms-cmpi .c.sub2 strong{font-size:14px}
/* 선납 알약의 추천 배지 */
.ms-quote #msPrePills button .rec{display:inline-block;margin-left:4px;padding:0 4px;border-radius:3px;background:#c0392b;color:#fff;font-style:normal;font-size:9.5px;font-weight:700;line-height:14px;vertical-align:1px}
.ms-cmpi .c.rh{word-break:keep-all}   /* 항목명이 글자 중간에서 끊기지 않게 (2026-09-28) */
.ms-cmpi .c .pct{align-self:flex-start;margin-left:0;margin-top:2px}   /* 칸이 세로 flex 라 배지가 가로로 늘어나던 것 — 글자 아래 제 크기로 */
.ms-cmpi .c.sub2.rh:before{top:15px}
.ms-cmpi .hd .kicker,.ms-cmpi .hd .kicker b{color:#fff}   /* 순서를 AI 구독 먼저로 바꾼 뒤 b 가 다른 전역 규칙 색을 받아 어둡게 보이던 것 */

/* 구독혜택 문구 (2026-10-08 문성 요청, extend/ms.quote.php ms_subbenefit_lines) — 금액 없이 줄마다 한 항목. 비어 있으면 출력 자체가 없다 */
.ms-quote .ms-pay-row.sbn{display:block}
.ms-quote .ms-pay-row.sbn .k{display:block;margin-bottom:6px}
.ms-quote .ms-pay-row.sbn .sbl{margin:0;padding:0;list-style:none}
.ms-quote .ms-pay-row.sbn .sbl li{position:relative;margin:0;padding:0 0 0 20px;font-size:13.5px;line-height:1.55;color:#374151}
.ms-quote .ms-pay-row.sbn .sbl li+li{margin-top:2px}
.ms-quote .ms-pay-row.sbn .sbl li:before{content:'';display:block;position:absolute;left:3px;top:5px;width:10px;height:5px;border-left:2px solid var(--mq-blue);border-bottom:2px solid var(--mq-blue);transform:rotate(-45deg);background:none}
.ms-cmpi .c.ai.sbn{display:flex;flex-direction:column;justify-content:center;gap:3px}
.ms-cmpi .c.ai.sbn strong{font-size:13.5px;line-height:1.4;font-weight:600;word-break:keep-all}

/* ── 2026-10-20 문성(천동원) 요청 — 비교표 강조 A안 (시안 docs/design/compare-highlight-draft.html) ──
   ① 문성 부담 혜택(SOP 혜택·프로모션·구독혜택) = 금색 테두리 묶음 (.ms-own-grp > .own, 2026-10-27 머리띠 → 테두리)
   ② 최종 가격(최종혜택가 · − 다품목 · ＝ 최종 체감가) = 연파랑 머리띠 + 계산서 (.fg, 마지막 숫자만 크게)
   묶음을 감싸는 div 는 없다 — 머리띠 칸(.gh)이 3열을 가로지르고, 칸마다 클래스를 단다 (subgrid 없이도 3열 유지) */
.ms-cmpi{--mq-gold1:#e9c77a;--mq-gold2:#b8872f;--mq-gold-ink:#6b5a2e;--mq-ivory:#fbf7ec}
.ms-cmpi .c.gh{grid-column:1/-1;border-left:0}
.ms-cmpi .c.own{background:#fffcf4;border-bottom-color:#eadfc3}
.ms-cmpi .c.own:not(.rh){border-left-color:#efe4c6}
.ms-cmpi .c.rh.own{color:var(--mq-ink);padding-left:14px}
.ms-cmpi .c.ai.own{background:var(--mq-blue);border-left-color:var(--mq-navy2);border-bottom-color:rgba(255,255,255,.28)}
.ms-cmpi .c.ai.own strong{color:#fff;font-size:16px}
.ms-cmpi .c.ai.own .mut{color:rgba(255,255,255,.82) !important}
.ms-cmpi .c.ai.sbn.own strong{color:#fff;font-size:13.5px}
.ms-cmpi .c.ai.sbn.own strong:before{content:'';display:inline-block;width:9px;height:5px;margin:0 7px 3px 1px;border-left:2px solid #ffd77a;border-bottom:2px solid #ffd77a;transform:rotate(-45deg)}
/* 2026-10-27 문성(천동원) 요청 "단독 혜택 구간을 더 자연스럽게" (시안 docs/design/pin-cmp-1026/own1.css 1번 채택)
   머리띠('문성전자 단독 혜택')를 빼고 세 줄을 묶음(.ms-own-grp)으로 감싸 금색 실선 2px 로만 강조한다. AI 구독 열은 위아래와 같은 파랑.
   묶음 칸 틀은 표(.tb)를 그대로 물려받고(inherit — 폭 분기마다 같이 바뀐다), 테두리는 위에 덮는 ::after 라 칸 폭을 먹지 않는다 */
.ms-cmpi .ms-own-grp{grid-column:1/-1;display:grid;grid-template-columns:inherit;position:relative}
.ms-cmpi .ms-own-grp:after{content:'';position:absolute;inset:0;border:2px solid #c9a24f;pointer-events:none;z-index:3}
.ms-cmpi .ms-own-grp + .c.fg-hd{border-top:0}
@media (max-width:768px){.ms-cmpi .ms-own-grp > .c.rh{font-size:14px !important}}   /* 반응형 층 'div.tb > div.c.rh' 14px 를 묶음 안 칸에도 */

.ms-cmpi .c.fg-hd{display:block;padding:9px 12px;background:#eaf3ff;color:var(--mq-navy2);font-size:13.5px;font-weight:800;letter-spacing:-.2px;border-top:2px solid var(--mq-navy2);border-bottom:0}
.ms-cmpi .c.fg-hd small{margin-left:6px;font-size:12px;font-weight:600;color:#5d6680}
.ms-cmpi .c.fg{padding:13px 10px;border-bottom-style:dashed}
.ms-cmpi .c.fg.f2{border-bottom-style:solid}
.ms-cmpi .c.rh.fg{position:relative;padding-left:26px;font-size:13px;background:#fff}
.ms-cmpi .c.rh.fg.f2{font-size:14px;font-weight:800;color:#0f172a}
.ms-cmpi .c.rh.fg .op{position:absolute;left:9px;top:50%;transform:translateY(-50%);font-family:var(--mq-en);font-size:16px;font-weight:800;line-height:1;color:var(--mq-navy2)}
.ms-cmpi .tb .c.ai.fg{background:linear-gradient(180deg,#1a6ad0,#1428a0);border-bottom-color:rgba(255,255,255,.22)}
.ms-cmpi .tb .c.ai.fg.f0 strong{font-size:17px}
.ms-cmpi .tb .c.ai.fg.f1 strong{font-size:16px}
.ms-cmpi .tb .c.ai.fg.f2{background:var(--mq-navy);padding-top:15px;padding-bottom:15px}
.ms-cmpi .tb .c.ai.fg.f2 strong{font-size:25px;letter-spacing:-.5px}
.ms-cmpi .tb .c.fg:not(.rh):not(.ai){background:#f8fafc}
.ms-cmpi .tb .c.cash.fg strong{font-size:15px;color:#334155;text-decoration:none}
.ms-cmpi .tb .c.cash.fg.f2 strong{text-decoration:line-through;text-decoration-thickness:1.5px;text-decoration-color:#9aa3b8}
/* 768 이하는 반응형 층의 글자 일괄 규칙(div.c > strong 14px !important)이 덮으므로 !important 로 되돌린다 — 결론 숫자만 크게 */
@media (max-width:768px){.ms-cmpi .tb .c.ai.fg.f2 strong{font-size:21px !important}}

/* ── 2026-10-21 문성(천동원) 요청 — 금액 박스 '문성전자 단독 혜택' 아이보리 상자 (시안 docs/design/pay-benefit-draft.html A안)
   상품권(SOP 혜택·프로모션)·구독혜택 줄을 묶는다. 금색은 비교표 단독 혜택 묶음·상품 카드 0원 띠와 같은 아이보리 골드 */
.ms-quote .ms-pay-own{margin:6px 0 12px;padding:0 12px 2px;border:1px solid #e6d3a3;border-radius:12px;background:#fdfaf2}
.ms-quote .ms-pay-own .oh{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;padding:9px 0 8px;border-bottom:1px solid #efe4c6}
.ms-quote .ms-pay-own .oh b{display:inline-flex;align-items:center;gap:7px;font-size:15.5px;font-weight:800;color:#6b5a2e}
.ms-quote .ms-pay-own .oh b:before{content:'';width:8px;height:8px;border-radius:50%;background:linear-gradient(135deg,#e9c77a,#b8872f)}
.ms-quote .ms-pay-own .oh small{font-size:13px;font-weight:600;color:#8a6d2b}
.ms-quote .ms-pay-own .ms-pay-row{border-bottom:1px dashed #efe4c6}
.ms-quote .ms-pay-own .ms-pay-row:last-child{border-bottom:0}
/* 2026-10-21 2차 요청 — 금액은 줄 가운데, 글자 한 단계 크게. 768 이하는 반응형 층 div.ms-pay-row > span.k / b.v {14px !important} 를 이기려고 !important */
.ms-quote .ms-pay-own .ms-pay-row.gift .k,.ms-quote .ms-pay-own .ms-pay-row.sbn .k{font-size:16.5px !important;font-weight:700;color:var(--mq-ink)}
.ms-quote .ms-pay-own .ms-pay-row.gift .k .sub{font-size:15px;line-height:1.45;color:#374151;margin-top:3px;word-break:keep-all}
.ms-quote .ms-pay-own .ms-pay-row.gift .v{font-size:20px !important;align-self:center}
.ms-quote .ms-pay-own .ms-pay-row.gift .v span{font-size:15px}
.ms-quote .ms-pay-own .ms-pay-row.sbn .sbl li{word-break:keep-all;font-size:15.5px}
@media (max-width:768px){.ms-quote .ms-pay-own .ms-pay-row.gift .k,.ms-quote .ms-pay-own .ms-pay-row.sbn .k{font-size:16px !important}.ms-quote .ms-pay-own .ms-pay-row.gift .k .sub{font-size:14.5px}.ms-quote .ms-pay-own .ms-pay-row.gift .v{font-size:19px !important}.ms-quote .ms-pay-own .ms-pay-row.sbn .sbl li{font-size:15px}}
.ms-quote .ms-pay-own .ms-pay-row.sbn .sbl li:before{border-color:#b8872f}

/* ── 2026-10-21 문성(천동원) 3차 — 금액 박스 전체 글자 한 단계 크게 ("전반적으로 폰트가 작다")
   768 이하는 반응형 층 div.ms-pay-row > span.k / b.v {14px !important} 가 제휴카드 적용가까지 14px 로 눌러 놓아 !important 로 되돌린다.
   일시불 안내 줄(.nosub·.ship)과 단독 혜택 상자(.ms-pay-own, 위 규칙)는 제외 */
.ms-quote .ms-pay > .ms-pay-row:not(.nosub):not(.ship) > .k{font-size:16.5px !important}
.ms-quote .ms-pay > .ms-pay-row > .k .sub{font-size:13.5px}
.ms-quote .ms-pay > .ms-pay-row:not(.hl) > .v{font-size:21px !important}
.ms-quote .ms-pay > .ms-pay-row.pt > .v{font-size:18.5px !important}
.ms-quote .ms-pay > .ms-pay-row.pt > .v > #msPayPt{font-size:inherit !important}   /* 반응형 층 b.v > span#msPayPt 14px 고정 */
.ms-quote .ms-pay > .ms-pay-row.hl > .k{font-size:17.5px !important}
.ms-quote .ms-pay > .ms-pay-row.hl > .v{font-size:34px !important}
@media (max-width:768px){
  .ms-quote .ms-pay > .ms-pay-row:not(.nosub):not(.ship) > .k{font-size:16px !important}
  .ms-quote .ms-pay > .ms-pay-row:not(.hl) > .v{font-size:20px !important}
  #msPay > .ms-pay-row > b#dMonthly{font-size:20px !important}   /* 반응형 층 div.ms-pay-row > b#dMonthly 18px — 아이디로 지정돼 있어 아이디로 되돌린다 */
  .ms-quote .ms-pay > .ms-pay-row.pt > .v{font-size:17px !important}
  .ms-quote .ms-pay > .ms-pay-row.hl > .k{font-size:16.5px !important}
  .ms-quote .ms-pay > .ms-pay-row.hl > .v{font-size:30px !important}
}

/* ── 2026-10-22 금액 고정 (시안 docs/design/pay-sticky-draft.html B안) — 금액 상자 ①(#msPayFix 월 납부·제휴카드 적용가) / ②(#msPay 나머지)
   고정은 js/ms-quote.js 끝 '금액 고정' 이 position:fixed 로 띄운다(.is-fixed). 휴대폰도 두 줄 그대로(사용자 B안 선택) */
.ms-quote .ms-pay.ms-pay-rest{margin-top:10px}
.ms-quote .ms-pay.ms-pay-rest.is-empty{display:none}
.vi_txt_bx.mode-buy .ms-quote .ms-pay.ms-pay-rest{margin-top:16px}
.ms-quote .ms-pay-fix .ms-pay-row.hl{border-bottom:0}
.ms-quote .ms-pay-fix.is-fixed{position:fixed;z-index:60;margin:0 !important;box-shadow:0 12px 24px rgba(15,28,110,.16);transition:box-shadow .15s}

/* 2026-10-27 문성(천동원) 요청 "고정되어 보여질 때 배경색으로 구분" (시안 docs/design/pin-cmp-1026/pinA.css A안 채택) — 붙었을 때만 연한 파랑 바탕 + 파란 테두리 */
.ms-quote .ms-pay-fix.is-fixed{background:linear-gradient(180deg,#f2f7ff,#e6f0ff);border:1.5px solid #9cc0f2;border-bottom:3px solid #1a6ad0;box-shadow:0 10px 24px rgba(26,106,208,.22)}
.ms-quote .ms-pay-fix.is-fixed .ms-pay-row{border-bottom-color:#cfe0f7}