/* pcs-modals.css — PC 시안: 계산기 팝업(요금제 목록·지원금·유지기간·할부·결합/복지·내 요금제·도움말·생활 계산·출력/공유·자급제 가격)을
   코덱스 톤(아이보리·잉크·주황)으로 재도색. 팝업은 body 직속이라 #moplan-showroom 토큰을 못 받으므로 body.pcs에 토큰을 다시 둔다.
   원본 구조·동작은 그대로, 색·테두리·모서리만 바꾼다. (사장님 09-15 「각종 팝업들도 개편」) */
@media (hover: hover) and (pointer: fine), (min-width: 600px) and (min-height: 600px) {
  body.pcs { --pm-bg: #fbfaf7; --pm-paper: #fff; --pm-ink: #25251f; --pm-muted: #66655f; --pm-line: #deddd5; --pm-hero: #f1eee5; --pm-soft: #fbe9e2; --pm-accent: #b44220; --pm-on-accent: #fff; --pm-dim: rgba(37, 37, 31, .55); --pm-shadow: 0 18px 50px rgba(37, 37, 31, .18); }
  body.pcs.dark-mode { --pm-bg: #181b19; --pm-paper: #222623; --pm-ink: #f1eee5; --pm-muted: #b4b8af; --pm-line: #3e443e; --pm-hero: #252c26; --pm-soft: #3b3029; --pm-accent: #f2a37a; --pm-on-accent: #1d1410; --pm-dim: rgba(0, 0, 0, .62); --pm-shadow: 0 18px 50px rgba(0, 0, 0, .5); }

  /* ── 어둠막 ── */
  body.pcs .modal-overlay, body.pcs .modal, body.pcs .bottom-sheet-overlay, body.pcs #myPlanLookupModal, body.pcs .mnt2-ov, body.pcs .sbsd-overlay, body.pcs .unlk-overlay { background: var(--pm-dim) !important; }

  /* ── 팝업 상자 ── */
  body.pcs .modal-content, body.pcs .plan-picker-sheet, body.pcs .sbsd-modal, body.pcs .unlk-modal, body.pcs .mnt2-modal, body.pcs .mpl-box {
    background: var(--pm-paper) !important; color: var(--pm-ink) !important; border: 1px solid var(--pm-line) !important; border-radius: 12px !important; box-shadow: var(--pm-shadow) !important; }
  body.pcs .plan-picker-sheet { border-radius: 12px !important; }
  body.pcs .modal-content *, body.pcs .mnt2-modal *, body.pcs .mpl-box * { word-break: keep-all; }

  /* ── 제목·부제 ── */
  body.pcs .modal-content h2, body.pcs .modal-content h3, body.pcs #planPickerTitle, body.pcs .sbsd-modal h2, body.pcs .sbsd-head h2, body.pcs .mnt2-modal h3, body.pcs #myPlanLookupTitle, body.pcs .unlk-head h2, body.pcs .unlk-head h3, body.pcs .discount-type-modal-title, body.pcs .mpl-box h2 {
    color: var(--pm-ink) !important; font-weight: 600 !important; letter-spacing: -.5px; background: none !important; -webkit-text-fill-color: currentColor; }
  body.pcs .mnt2-desc, body.pcs .sbsd-sub, body.pcs .unlk-sub, body.pcs .mpl-sub, body.pcs .modal-content p { color: var(--pm-muted); }
  body.pcs .modal-close-button, body.pcs .close-button, body.pcs .plan-picker-close-x, body.pcs .mnt2-x, body.pcs .sbsd-close, body.pcs .unlk-close, body.pcs .mpl-x { color: var(--pm-muted) !important; background: transparent !important; border-color: var(--pm-line) !important; }
  body.pcs .plan-picker-close-x:hover, body.pcs .mnt2-x:hover, body.pcs .sbsd-close:hover, body.pcs .unlk-close:hover, body.pcs .mpl-x:hover { background: var(--pm-hero) !important; color: var(--pm-ink) !important; }

  /* ── 파란 글자 → 주황 잉크 ── */
  body.pcs #sbsd-head-date, body.pcs .sbsd-upd, body.pcs .sbsd-nb, body.pcs .sbsd-amt, body.pcs .sbsd-thead th, body.pcs .sbsd-modal th, body.pcs .sbsd-new.sbsd-pend,
  body.pcs .unlk-upd, body.pcs .unlk-p, body.pcs .unlk-diff.d-dn, body.pcs .plan-picker-price, body.pcs .pp-wizard-bar b, body.pcs .inst2-opt small, body.pcs .mnt2-opt small,
  body.pcs .std-key.op, body.pcs .choice-button strong, body.pcs .choice-button span, body.pcs .modal-content .mnt-label-red { color: var(--pm-accent) !important; }
  body.pcs .plan-picker-price { font-weight: 700; }

  /* ── 파란 채움 버튼·칩 → 주황 ── */
  body.pcs .pp-filter-chip.active, body.pcs .close-bottom-sheet-btn, body.pcs .ppw-badge, body.pcs .sbsd-on, body.pcs .sbsd-tab.sbsd-on, body.pcs .sbsd-spectag, body.pcs .mnt2-apply,
  body.pcs .discount-type-modal-option.active, body.pcs .modal-content .payment-button.active, body.pcs .dc-tab.active, body.pcs .std-key.equals, body.pcs .unlk-on, body.pcs .unlk-gbtn,
  body.pcs .pp-manual-apply, body.pcs .mnt-main-btn, body.pcs .modal-content .calc-button, body.pcs .modal-content button.primary, body.pcs .modal-content .btn-primary {
    background: var(--pm-accent) !important; border-color: var(--pm-accent) !important; color: var(--pm-on-accent) !important; box-shadow: none !important; }
  body.pcs .pp-filter-chip.pp-chip-online.active { background: var(--pm-ink) !important; border-color: var(--pm-ink) !important; color: var(--pm-paper) !important; }
  body.pcs .close-bottom-sheet-btn, body.pcs .mnt2-apply { border-radius: 8px !important; font-weight: 700; }

  /* ── 테두리형 선택·보조 버튼 ── */
  body.pcs .pp-filter-chip, body.pcs .sbsd-tab, body.pcs .sbsd-typeseg button, body.pcs .sbsd-capseg button, body.pcs .unlk-seg button, body.pcs .unlk-capseg button, body.pcs .sbsd-sortbtn, body.pcs .unlk-sortbtn,
  body.pcs .mnt2-opt, body.pcs .inst2-opt, body.pcs .inst2-lump, body.pcs .dc-chip, body.pcs .choice-button, body.pcs .sbsd-histbtn, body.pcs .dtm-table-btn, body.pcs .today-btn, body.pcs .discount-type-modal-option,
  body.pcs .modal-content .payment-button, body.pcs .dc-tab, body.pcs .std-key, body.pcs .pp-manual-toggle, body.pcs .mnt-month-chip, body.pcs .mnt-month-step-btn, body.pcs .mnt-schedule-advanced-link {
    background: var(--pm-paper) !important; color: var(--pm-ink) !important; border: 1px solid var(--pm-line) !important; box-shadow: none !important; }
  body.pcs .pp-filter-chip:hover, body.pcs .sbsd-tab:hover, body.pcs .mnt2-opt:hover, body.pcs .inst2-opt:hover, body.pcs .dc-chip:hover, body.pcs .choice-button:hover, body.pcs .discount-type-modal-option:hover, body.pcs .today-btn:hover { border-color: var(--pm-accent) !important; color: var(--pm-accent) !important; }
  body.pcs .mnt2-opt.on, body.pcs .inst2-opt.on, body.pcs .dc-chip.on, body.pcs .mnt-month-chip.active, body.pcs .sbsd-picking [data-v]:hover { background: var(--pm-soft) !important; border-color: var(--pm-accent) !important; color: var(--pm-accent) !important; }
  body.pcs .mnt2-opt.on small, body.pcs .inst2-opt.on small { color: var(--pm-accent) !important; }
  body.pcs .pp-filter-chip.active, body.pcs .sbsd-on, body.pcs .sbsd-tab.sbsd-on, body.pcs .unlk-on, body.pcs .discount-type-modal-option.active, body.pcs .modal-content .payment-button.active, body.pcs .dc-tab.active,
  /* ⚠ 위 기본 규칙이 「… .sbsd-typeseg button」처럼 요소까지 짚어 더 구체적이라, 선택 상태를 같은 모양으로 다시 써 주지 않으면 색이 안 먹는다 (사장님 09-15 「알약 선택 시 색깔이 없음」) */
  body.pcs .sbsd-typeseg button.sbsd-on, body.pcs .sbsd-capseg button.sbsd-on, body.pcs .unlk-seg button.unlk-on, body.pcs .unlk-capseg button.unlk-on { background: var(--pm-accent) !important; color: var(--pm-on-accent) !important; border-color: var(--pm-accent) !important; }
  body.pcs .inst2-lump, body.pcs .choice-button { border-radius: 8px !important; }
  body.pcs .sbsd-histbtn, body.pcs .sbsd-bellbtn, body.pcs .dtm-table-btn, body.pcs .pp-age-calc-btn, body.pcs .today-btn.dcp-pick { background: var(--pm-hero) !important; color: var(--pm-ink) !important; border: 1px solid var(--pm-line) !important; background-image: none !important; }
  body.pcs .discount-type-benefit-icon { color: var(--pm-muted) !important; }
  body.pcs .discount-type-modal-option.active .discount-type-benefit-icon { color: var(--pm-on-accent) !important; }

  /* ── 요금제 목록 팝업 ── */
  body.pcs .plan-picker-sticky-header { background: var(--pm-paper) !important; border-bottom: 1px solid var(--pm-line) !important; }
  body.pcs .pp-wizard-bar { background: var(--pm-hero) !important; border: 1px solid var(--pm-line) !important; border-radius: 8px !important; color: var(--pm-ink) !important; }
  body.pcs .pp-wizard-bar .ppw-title, body.pcs .pp-wizard-bar .ppw-sub { color: var(--pm-ink) !important; }
  body.pcs .pp-wizard-bar .ppw-dot { background: var(--pm-paper) !important; color: var(--pm-muted) !important; border: 1px solid var(--pm-line) !important; }
  body.pcs .pp-wizard-bar .ppw-dot.cur { background: var(--pm-ink) !important; color: var(--pm-paper) !important; border-color: var(--pm-ink) !important; }
  body.pcs .pp-wizard-bar .ppw-dot.done { background: var(--pm-accent) !important; color: var(--pm-on-accent) !important; border-color: var(--pm-accent) !important; }
  body.pcs .pp-psearch input, body.pcs .sbsd-search, body.pcs .unlk-search, body.pcs .modal-content input[type="text"], body.pcs .modal-content input[type="number"], body.pcs .mnt2-custom input, body.pcs .pp-manual-box input, body.pcs .modal-content select {
    background: var(--pm-paper) !important; color: var(--pm-ink) !important; border: 1px solid var(--pm-line) !important; border-radius: 8px !important; box-shadow: none !important; }
  body.pcs .pp-psearch input:focus, body.pcs .sbsd-search:focus, body.pcs .unlk-search:focus, body.pcs .modal-content input:focus { border-color: var(--pm-accent) !important; outline: none; }
  body.pcs .pp-manual { background: var(--pm-hero) !important; border: 1px dashed var(--pm-line) !important; border-radius: 8px !important; color: var(--pm-ink) !important; }
  body.pcs .pp-manual-toggle b, body.pcs .pp-manual-hint { color: var(--pm-accent) !important; }
  body.pcs .pp-filter-label { color: var(--pm-muted) !important; }
  body.pcs .plan-picker-info, body.pcs .plan-picker-carrier-info { color: var(--pm-muted) !important; }
  body.pcs .plan-picker-list { background: var(--pm-bg) !important; }
  body.pcs .plan-picker-item { background: var(--pm-paper) !important; border: 1px solid var(--pm-line) !important; border-radius: 8px !important; color: var(--pm-ink) !important; box-shadow: none !important; }
  body.pcs .plan-picker-item:hover, body.pcs .plan-picker-item:active { border-color: var(--pm-accent) !important; background: var(--pm-paper) !important; }
  body.pcs .plan-picker-item .plan-picker-name { color: var(--pm-ink) !important; }
  body.pcs .plan-picker-item .plan-picker-data, body.pcs .plan-picker-item .plan-picker-age, body.pcs .plan-picker-item .plan-picker-birth { color: var(--pm-muted) !important; }
  body.pcs .plan-picker-badge { background: var(--pm-hero) !important; color: var(--pm-muted) !important; border: 1px solid var(--pm-line) !important; }
  body.pcs .plan-picker-item.ppw-picked { background: var(--pm-soft) !important; border-color: var(--pm-accent) !important; box-shadow: none !important; }
  body.pcs .plan-picker-item.ppw-picked .plan-picker-price { color: var(--pm-accent) !important; }
  body.pcs .plan-picker-item.ppw-picked::after { background: var(--pm-accent) !important; color: var(--pm-on-accent) !important; }
  body.pcs .plan-picker-footer { background: var(--pm-paper) !important; border-top: 1px solid var(--pm-line) !important; }

  /* ── 지원금·자급제 가격 팝업 ── */
  body.pcs .sbsd-head, body.pcs .unlk-head { background: var(--pm-paper) !important; border-bottom: 1px solid var(--pm-line) !important; }
  body.pcs .sbsd-body, body.pcs .unlk-body { background: var(--pm-bg) !important; }
  body.pcs .sbsd-series, body.pcs .unlk-series { background: var(--pm-hero) !important; color: var(--pm-ink) !important; border-radius: 6px; }
  body.pcs .sbsd-thead, body.pcs .unlk-thead, body.pcs .sbsd-thead th, body.pcs .sbsd-modal th, body.pcs .sbsd-tgrid > * { background: var(--pm-hero) !important; color: var(--pm-muted) !important; border-color: var(--pm-line) !important; }
  body.pcs .sbsd-trow, body.pcs .sbsd-row, body.pcs .unlk-row { background: var(--pm-paper) !important; border-color: var(--pm-line) !important; color: var(--pm-ink) !important; }
  body.pcs .unlk-gcard { background: var(--pm-paper) !important; border: 1px solid var(--pm-line) !important; border-radius: 8px !important; box-shadow: none !important; }
  body.pcs .unlk-ghead { background: var(--pm-hero) !important; color: var(--pm-ink) !important; }
  body.pcs .sbsd-hint, body.pcs .unlk-hint { background: var(--pm-hero) !important; color: var(--pm-ink) !important; border: 1px solid var(--pm-line) !important; }
  body.pcs .sbsd-foot, body.pcs .unlk-foot { background: var(--pm-paper) !important; color: var(--pm-muted) !important; border-top: 1px solid var(--pm-line) !important; }
  body.pcs .sbsd-tabs, body.pcs .unlk-seg { border-color: var(--pm-line) !important; }
  body.pcs .sbsd-fac, body.pcs .unlk-fac, body.pcs .sbsd-tmeta, body.pcs .sbsd-dev small { color: var(--pm-muted) !important; }
  body.pcs .sbsd-specbtn { background: var(--pm-hero) !important; color: var(--pm-ink) !important; border: 1px solid var(--pm-line) !important; }

  /* ── 결합/복지/가족 선택 팝업 ── */
  body.pcs .discount-type-modal-option { border-radius: 8px !important; font-weight: 600; }
  body.pcs .card-header { background: var(--pm-hero) !important; color: var(--pm-ink) !important; border-color: var(--pm-line) !important; }
  body.pcs .card-body { background: var(--pm-paper) !important; color: var(--pm-ink) !important; border-color: var(--pm-line) !important; }
  body.pcs .modal-footer { border-top-color: var(--pm-line) !important; }

  /* ── 내 요금제 확인·팁 상자 ── */
  body.pcs .mpl-steps div { background: var(--pm-hero) !important; border: 1px solid var(--pm-line) !important; color: var(--pm-ink) !important; }
  body.pcs .mpl-steps b { color: var(--pm-accent) !important; }
  body.pcs .mpl-tip { background: var(--pm-hero) !important; color: var(--pm-ink) !important; border: 1px solid var(--pm-line) !important; }
  body.pcs .mpl-tip b { color: var(--pm-accent) !important; }

  /* ── 유지비·생활 계산(날짜·나이·계산기) ── */
  body.pcs .mnt-input-box, body.pcs .mnt-plan-change-box, body.pcs .mnt-highlight-box, body.pcs .mnt-result-card, body.pcs .mnt-summary-narrative-container { background: var(--pm-hero) !important; border: 1px solid var(--pm-line) !important; color: var(--pm-ink) !important; box-shadow: none !important; }
  body.pcs .mnt-highlight-box-red { background: var(--pm-soft) !important; border: 1px solid var(--pm-accent) !important; color: var(--pm-ink) !important; }
  body.pcs .std-key { border-radius: 8px !important; }
  body.pcs .std-key.equals { background: var(--pm-accent) !important; color: var(--pm-on-accent) !important; border-color: var(--pm-accent) !important; }
  body.pcs .dc-tab.active { border-radius: 8px !important; }
  body.pcs .modal-content .result-box, body.pcs .modal-content .result-card, body.pcs .modal-content .dc-result, body.pcs .modal-content .age-result { background: var(--pm-hero) !important; border: 1px solid var(--pm-line) !important; color: var(--pm-ink) !important; }
  body.pcs .modal-content .result-box strong, body.pcs .modal-content .dc-result b, body.pcs .modal-content .age-result b { color: var(--pm-accent) !important; }

  /* ── 다크 공통 보정 ── */
  body.pcs.dark-mode .modal-content, body.pcs.dark-mode .mnt2-modal, body.pcs.dark-mode .mpl-box, body.pcs.dark-mode .plan-picker-sheet { color: var(--pm-ink) !important; }
  body.pcs.dark-mode .modal-content label, body.pcs.dark-mode .modal-content td, body.pcs.dark-mode .modal-content th, body.pcs.dark-mode .modal-content li { color: var(--pm-ink); }
  body.pcs.dark-mode .modal-content table, body.pcs.dark-mode .modal-content td, body.pcs.dark-mode .modal-content th { border-color: var(--pm-line) !important; background: transparent !important; }
}

/* ── 기기 스펙 카드(.spc-*)·스펙 브라우저 팝업(.spb-*)·확대창(.spz-*) (사장님 09-15 「단말기 정보도 개편」) ── */
@media (hover: hover) and (pointer: fine), (min-width: 600px) and (min-height: 600px) {
  body.pcs .spc-overlay, body.pcs .spb-overlay { background: var(--pm-dim) !important; }
  body.pcs .spc-modal { background: var(--pm-paper) !important; color: var(--pm-ink) !important; border: 1px solid var(--pm-line) !important; border-radius: 12px !important; box-shadow: var(--pm-shadow) !important; max-width: 440px !important; }
  body.pcs .spc-head { background: var(--pm-paper) !important; border-bottom: 1px solid var(--pm-line) !important; }
  body.pcs .spc-head .spc-ttl { color: var(--pm-ink) !important; font-weight: 600 !important; letter-spacing: -.4px; }
  body.pcs .spc-head .spc-ttl small { color: var(--pm-muted) !important; }
  body.pcs .spc-close, body.pcs .spb-close { background: var(--pm-hero) !important; color: var(--pm-ink) !important; box-shadow: none !important; }
  body.pcs .spc-hbtns button, body.pcs .spc-share, body.pcs .spc-sb { background: var(--pm-hero) !important; color: var(--pm-ink) !important; border: 1px solid var(--pm-line) !important; box-shadow: none !important; border-radius: 8px !important; }
  body.pcs .spc-hero { background: var(--pm-hero) !important; }
  body.pcs .spc-hero .spc-cap, body.pcs .spc-hero .spc-zoomhint { color: var(--pm-muted) !important; }
  body.pcs .spc-nav { background: var(--pm-ink) !important; color: var(--pm-paper) !important; box-shadow: none !important; }
  body.pcs .spc-nav:hover { background: var(--pm-accent) !important; color: var(--pm-on-accent) !important; }
  body.pcs .spc-colorbar { background: var(--pm-paper) !important; border-color: var(--pm-line) !important; }
  body.pcs .spc-cchip { border-color: var(--pm-paper) !important; box-shadow: 0 0 0 1px var(--pm-line) !important; }
  body.pcs .spc-cchip.spc-on { box-shadow: 0 0 0 2px var(--pm-accent) !important; }
  body.pcs .spc-cname { color: var(--pm-muted) !important; }
  body.pcs .spc-row { border-bottom: 1px dashed var(--pm-line) !important; }
  body.pcs .spc-row .k { color: var(--pm-muted) !important; }
  body.pcs .spc-row .v { color: var(--pm-ink) !important; }
  body.pcs .spc-row .v small { color: var(--pm-muted) !important; }
  body.pcs .spc-row .v small.spc-ipsw, body.pcs .spc-ipbox .spc-ipw { color: var(--pm-accent) !important; }
  body.pcs .spc-ipq { background: var(--pm-soft) !important; color: var(--pm-accent) !important; }
  body.pcs .spc-ipq[aria-expanded="true"] { background: var(--pm-accent) !important; color: var(--pm-on-accent) !important; }
  body.pcs .spc-ipbox { background: var(--pm-hero) !important; border: 1px solid var(--pm-line) !important; border-left: 3px solid var(--pm-accent) !important; color: var(--pm-ink) !important; }
  body.pcs .spc-ipbox b { color: var(--pm-accent) !important; }
  body.pcs .spc-empty, body.pcs .spc-src { color: var(--pm-muted) !important; border-color: var(--pm-line) !important; }
  body.pcs .spc-sharebar { background: var(--pm-hero) !important; border-color: var(--pm-line) !important; }
  body.pcs .spc-sharebar button, body.pcs .spc-sb { color: var(--pm-ink) !important; }
  body.pcs .spc-sharebar #spc-sb-kakao { background: #fee500 !important; color: #191919 !important; border-color: #fee500 !important; }
  /* 스펙 브라우저가 팝업으로 뜰 때(다른 페이지) */
  body.pcs .spb-modal { background: var(--pm-paper) !important; border: 1px solid var(--pm-line) !important; border-radius: 12px !important; box-shadow: var(--pm-shadow) !important; }
  body.pcs .spb-head { border-bottom: 1px solid var(--pm-line) !important; }
  body.pcs .spb-head h2 { color: var(--pm-ink) !important; font-weight: 600 !important; }
  body.pcs .spb-head p, body.pcs .spb-series small, body.pcs .spb-nm small, body.pcs .spb-empty, body.pcs .spb-foot { color: var(--pm-muted) !important; }
  body.pcs .spb-seg, body.pcs .spb-seg button + button { border-color: var(--pm-line) !important; }
  body.pcs .spb-seg button { background: var(--pm-paper) !important; color: var(--pm-muted) !important; }
  body.pcs .spb-seg button.spb-on { background: var(--pm-ink) !important; color: var(--pm-paper) !important; }
  body.pcs .spb-search { background: var(--pm-paper) !important; border-color: var(--pm-line) !important; color: var(--pm-ink) !important; }
  body.pcs .spb-series { color: var(--pm-ink) !important; }
  body.pcs .spb-card { background: var(--pm-paper) !important; border-color: var(--pm-line) !important; }
  body.pcs .spb-card:hover { border-color: var(--pm-accent) !important; }
  body.pcs .spb-thumb { background: var(--pm-hero) !important; border-color: var(--pm-line) !important; }
  body.pcs .spb-nm { color: var(--pm-ink) !important; }
  body.pcs .spb-go { color: var(--pm-accent) !important; }
  body.pcs .spb-foot { border-color: var(--pm-line) !important; }
  body.pcs .cmp82-toggle { background: var(--pm-hero) !important; color: var(--pm-ink) !important; border: 1px solid var(--pm-line) !important; box-shadow: none !important; }
  body.pcs .cmp82-toggle.on, body.pcs .cmp82-toggle[aria-pressed="true"] { background: var(--pm-accent) !important; color: var(--pm-on-accent) !important; border-color: var(--pm-accent) !important; }
  body.pcs .spz-dot.on { box-shadow: 0 0 0 2px var(--pm-accent) !important; }
  body.pcs .spz-nav:hover { color: var(--pm-accent) !important; }
}