/* m-site.css v13.1 (2026-09-21: 결합표 팝업 스크롤 한 겹) · v13.0 (2026-09-20: 확대창 사진 상자 종이색 제거) · v12.3 (2026-09-20: 공통지원금 표 머리글 3사 브랜드 색 복구) · v12.1 (2026-09-20: 홈 밖 페이지 공용 .m-foot) · v12.0 (홈 01·02·03 숫자 인라인·가운데) · v11.9 (홈 01·02·03 한 줄 반응형) · v11.8 (2026-09-19: 탭 하이라이트 제거) · v11.7 (2026-09-19: 팝업 잠금 중 헤더 유지) · v11.6 (2026-09-19: 단말기 정보 목록 터치 스크롤) · v11.5 (2026-09-18) — 모바일 완성 복사본 스킨. PC 개편(코덱스) 디자인 언어를 «실제 화면 위에» 씌운다.
   · 범위: html:not(.pcs-on) = 마우스 없는 기기(폰·폴드·태블릿). PC 껍데기(html.pcs-on)에는 한 줄도 안 닿는다.
   · 실서비스 무변경 — 시안 앱(kr.co.moplan.nativeapp)·시안 서버(/sian-m-site/) 전용. 계산 코드는 그대로, 겉모습만.
   · 다크모드: 기존 body.dark-mode 를 그대로 받아 토큰만 바꾼다. */

html:not(.pcs-on) {
  --mp-bg: #fbfaf7; --mp-paper: #ffffff; --mp-ink: #25251f; --mp-muted: #66655f; --mp-line: #deddd5;
  --mp-hero: #f1eee5; --mp-stage: #e7e2d7; --mp-accent: #b44220; --mp-on-accent: #ffffff; --mp-soft: #f6e6da; --mp-dark: #2b302b;
  --gutter: 18px; --radius: 10px;
  /* 기존 토큰을 새 톤으로 (파랑 #1a73e8 → 벽돌색, 회청 바탕 → 크림) */
  --primary: #b44220; --primary-hover: #9a3719; --primary-light: #f6e6da; --background: #fbfaf7; --card-bg: #ffffff;
  --text-main: #25251f; --text-muted: #66655f; --border-color: #deddd5;
  --shadow-sm: none; --shadow-md: 0 1px 2px rgba(37, 37, 31, .04); --shadow-lg: 0 10px 24px rgba(37, 37, 31, .08);
}
html:not(.pcs-on) body.dark-mode {
  --mp-bg: #181b19; --mp-paper: #222623; --mp-ink: #f1eee5; --mp-muted: #b4b8af; --mp-line: #3e443e;
  --mp-hero: #252c26; --mp-stage: #353e33; --mp-accent: #e9dcc0; --mp-on-accent: #1e1b14; --mp-soft: #33301f; --mp-dark: #111713;
  --primary: #e9dcc0; --primary-hover: #d9c9a5; --primary-light: #33301f; --background: #181b19; --card-bg: #222623;
  --text-main: #f1eee5; --text-muted: #b4b8af; --border-color: #3e443e;
}
html:not(.pcs-on) body { background: var(--mp-bg) !important; color: var(--mp-ink); word-break: keep-all; }
html:not(.pcs-on) body.dark-mode { background: var(--mp-bg) !important; color: var(--mp-ink) !important; }

/* ═══ 상단 바(p82-nav) ═══ */
html:not(.pcs-on) .p82nav { background: rgba(251, 250, 247, .92) !important; backdrop-filter: saturate(1.2) blur(8px); border-bottom: 1px solid var(--mp-line) !important; box-shadow: none !important; }
html:not(.pcs-on) body.dark-mode .p82nav { background: rgba(24, 27, 25, .92) !important; }
html:not(.pcs-on) .p82n-ico { border: 1px solid var(--mp-line) !important; background: var(--mp-paper) !important; color: var(--mp-ink) !important; border-radius: 50% !important; }
html:not(.pcs-on) .p82n-link { color: var(--mp-ink) !important; }
html:not(.pcs-on) .p82n-drop, html:not(.pcs-on) .p82n-sheet { background: var(--mp-paper) !important; color: var(--mp-ink) !important; border-color: var(--mp-line) !important; }
html:not(.pcs-on) .p82n-sheet a, html:not(.pcs-on) .p82n-drop a, html:not(.pcs-on) .p82n-tile { color: var(--mp-ink) !important; background: var(--mp-bg) !important; border: 1px solid var(--mp-line) !important; border-radius: 10px !important; }
html:not(.pcs-on) .p82n-new, html:not(.pcs-on) .p82n-badge, html:not(.pcs-on) .p82n-dot { background: var(--mp-accent) !important; }

/* ═══ 하단 5탭 ═══ */
html:not(.pcs-on) .p82n-tabs { background: var(--mp-paper) !important; border-top: 1px solid var(--mp-line) !important; box-shadow: none !important; }
html:not(.pcs-on) .p82n-tab { color: var(--mp-muted) !important; font-size: 10.5px !important; }
/* 불 켜는 클래스는 p82-nav.js 가 붙이는 p82n-cur(현재 페이지)·p82n-act(눌러서 시트 연 탭) 두 가지뿐.
   (09-18 사장님: 「누른 탭에 불이 안 들어오고 생활 계산만 고정으로 켜져 있다」 — .on/.active 로 잘못 잡았던 것 교정)
   시트가 열린 동안(p82n-sheeting)엔 현재 페이지 탭 불은 잠시 끄고 누른 탭만 켠다(p82-nav.css 규칙과 동일). */
html:not(.pcs-on) .p82n-tab.p82n-cur, html:not(.pcs-on) .p82n-tab.p82n-act { color: var(--mp-accent) !important; font-weight: 700 !important; }
html:not(.pcs-on) .p82n-tabs.p82n-sheeting .p82n-tab.p82n-cur:not(.p82n-act) { color: var(--mp-muted) !important; }
html:not(.pcs-on) .p82n-tab .p82n-ti { filter: grayscale(1); opacity: .6; }
html:not(.pcs-on) .p82n-tab.p82n-cur .p82n-ti, html:not(.pcs-on) .p82n-tab.p82n-act .p82n-ti { filter: none; opacity: 1; }
html:not(.pcs-on) .p82n-tabs.p82n-sheeting .p82n-tab.p82n-cur:not(.p82n-act) .p82n-ti { filter: grayscale(1); opacity: .6; transform: none; }
/* 가운데 「생활 계산」 — 원형 돌출은 유지하되 평소엔 다른 탭처럼 회색(무대색 원 + 회색 글자),
   눌러서 시트가 열렸을 때(p82n-act)만 강조색으로 불이 들어온다(08-29 확정 「선택될 때만」과 같은 규칙) */
html:not(.pcs-on) .p82n-tab[data-g="life"] .p82n-ti { background: var(--mp-stage) !important; color: var(--mp-muted) !important; box-shadow: none !important; filter: grayscale(1) !important; opacity: 1 !important; transition: .15s; }
html:not(.pcs-on) .p82n-tab[data-g="life"] { color: var(--mp-muted) !important; }
html:not(.pcs-on) .p82n-tab[data-g="life"].p82n-act .p82n-ti { background: var(--mp-accent) !important; color: var(--mp-on-accent) !important; box-shadow: 0 8px 18px #b4422044 !important; filter: none !important; }
html:not(.pcs-on) .p82n-tab[data-g="life"].p82n-act { color: var(--mp-accent) !important; }

/* ═══ 홈(index.html 모바일) ═══ */
html.pcs-on .mhome { display: none !important; }
html:not(.pcs-on) .mhome { padding-bottom: 20px; font-size: 15px; line-height: 1.5; }
html:not(.pcs-on) .mhome a { color: inherit; text-decoration: none; }
html:not(.pcs-on) .mhome button { font: inherit; color: inherit; }
html:not(.pcs-on) .mhome img { display: block; max-width: 100%; }
html:not(.pcs-on) .mhome .m-slides { margin: 14px var(--gutter) 0; }
html:not(.pcs-on) .mhome .m-track { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding-bottom: 2px; }
html:not(.pcs-on) .mhome .m-track::-webkit-scrollbar { display: none; }
html:not(.pcs-on) .mhome .m-slide { flex: 0 0 100%; scroll-snap-align: start; position: relative; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: var(--mp-stage); border: 1px solid var(--mp-line); display: block; }
html:not(.pcs-on) .mhome .m-slide img.bg { width: 100%; height: 100%; object-fit: cover; }
html:not(.pcs-on) .mhome .m-slide.illu { background: #e9e4d8; }
html:not(.pcs-on) .mhome .m-slide.illu img.bg { object-fit: contain; }
html:not(.pcs-on) .mhome .m-slide.photo::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 60%; background: linear-gradient(transparent, rgba(0, 0, 0, .62)); }
html:not(.pcs-on) .mhome .m-slide .cap { position: absolute; left: 14px; right: 14px; bottom: 12px; z-index: 1; color: #fff; text-shadow: 0 1px 8px rgba(0, 0, 0, .35); }
html:not(.pcs-on) .mhome .m-slide .cap small { display: block; font-size: 11px; font-weight: 700; letter-spacing: .4px; opacity: .9; }
html:not(.pcs-on) .mhome .m-slide .cap b { display: block; font-size: 17px; font-weight: 700; letter-spacing: -.4px; line-height: 1.3; }
html:not(.pcs-on) .mhome .m-slide.stage .stage-top { position: absolute; left: 14px; right: 14px; top: 10px; display: flex; justify-content: space-between; font-size: 10.5px; font-weight: 700; letter-spacing: .6px; color: var(--mp-muted); }
html:not(.pcs-on) .mhome .m-slide.stage .shots { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding-top: 12px; }
html:not(.pcs-on) .mhome .m-slide.stage .shots img { height: 62%; width: auto; object-fit: contain; filter: drop-shadow(0 14px 10px #11130f26); }
html:not(.pcs-on) .mhome .m-slide.stage .shots img.slab { transform: rotate(-8deg); margin-right: -10px; }
html:not(.pcs-on) .mhome .m-slide.stage .shots img.fold { transform: rotate(7deg); margin-top: 18px; }
html:not(.pcs-on) .mhome .m-slide.stage .note { position: absolute; right: 12px; bottom: 10px; background: var(--mp-paper); border: 1px solid var(--mp-line); padding: 8px 12px; border-radius: 4px 4px 14px 4px; }
html:not(.pcs-on) .mhome .m-slide.stage .note small { display: block; font-size: 10px; color: var(--mp-muted); }
html:not(.pcs-on) .mhome .m-slide.stage .note strong { display: block; font-size: 12.5px; font-weight: 700; letter-spacing: -.3px; }
html:not(.pcs-on) .mhome .m-slide.stage .note strong b { color: var(--mp-accent); font-size: 18px; margin-right: 4px; }
html:not(.pcs-on) .mhome .m-dots { display: flex; justify-content: center; gap: 6px; margin-top: 10px; }
html:not(.pcs-on) .mhome .m-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--mp-line); transition: width .2s, background .2s; }
html:not(.pcs-on) .mhome .m-dots i.on { width: 18px; border-radius: 3px; background: var(--mp-accent); }
html:not(.pcs-on) .mhome .m-hero { background: var(--mp-hero); padding: 20px var(--gutter) 18px; margin-top: 14px; }
html:not(.pcs-on) .mhome .m-eyebrow { display: inline-block; font-size: 11.5px; font-weight: 700; letter-spacing: .5px; color: var(--mp-accent); margin-bottom: 8px; }
html:not(.pcs-on) .mhome .m-hero h1 { margin: 0 0 8px; font-size: 26px; line-height: 1.28; letter-spacing: -1px; font-weight: 600; color: var(--mp-ink); }
html:not(.pcs-on) .mhome .m-hero h1 .em { color: var(--mp-accent); }
html:not(.pcs-on) .mhome .m-lead { margin: 0 0 16px; font-size: 13.5px; color: var(--mp-muted); line-height: 1.6; }
html:not(.pcs-on) .mhome .m-primary { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 50px; padding: 12px 18px; border: 0; border-radius: 8px; background: var(--mp-accent); color: var(--mp-on-accent) !important; font-size: 15.5px; font-weight: 700; }
html:not(.pcs-on) .mhome .m-video { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 13px; color: var(--mp-ink); background: transparent; border: 0; padding: 0; }
html:not(.pcs-on) .mhome .m-video .play { width: 22px; height: 22px; border-radius: 50%; background: var(--mp-accent); color: #fff; font-size: 9px; display: grid; place-items: center; }
html:not(.pcs-on) .mhome .m-video u { text-underline-offset: 3px; }
html:not(.pcs-on) .mhome .m-notice { display: flex; align-items: center; gap: 8px; margin: 14px var(--gutter) 0; padding: 10px 12px; background: var(--mp-paper); border: 1px solid var(--mp-line); border-radius: var(--radius); font-size: 12.5px; }
html:not(.pcs-on) .mhome .m-notice .tag { flex: none; font-size: 10.5px; font-weight: 800; color: var(--mp-accent); background: var(--mp-soft); border-radius: 999px; padding: 2px 8px; }
html:not(.pcs-on) .mhome .m-notice .txt { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--mp-ink); }
html:not(.pcs-on) .mhome .m-notice .date, html:not(.pcs-on) .mhome .m-notice .go { flex: none; font-size: 11px; color: var(--mp-muted); }
html:not(.pcs-on) .mhome .m-proof { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin: 18px var(--gutter) 0; }
html:not(.pcs-on) .mhome .m-proof div { background: var(--mp-paper); border: 1px solid var(--mp-line); border-radius: var(--radius); padding: 10px 10px 9px; font-size: 12px; line-height: 1.35; }
html:not(.pcs-on) .mhome .m-proof span { display: inline; font-size: 10.5px; font-weight: 800; color: var(--mp-accent); margin: 0 4px 0 0; }   /* v12.0 숫자를 글자 바로 옆에(사장님 09-20) */
html:not(.pcs-on) .mhome .m-sec { padding: 26px var(--gutter) 0; }
html:not(.pcs-on) .mhome .m-sec-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 12px; }
html:not(.pcs-on) .mhome .m-sec-head h2 { margin: 0; font-size: 19px; font-weight: 600; letter-spacing: -.6px; color: var(--mp-ink); }
html:not(.pcs-on) .mhome .m-sec-head p { margin: 4px 0 0; font-size: 12.5px; color: var(--mp-muted); }
html:not(.pcs-on) .mhome .m-sec-head a { font-size: 12.5px; color: var(--mp-muted); white-space: nowrap; }
html:not(.pcs-on) .mhome .m-paths { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
html:not(.pcs-on) .mhome .m-path { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; padding: 12px 10px 11px; background: var(--mp-paper); border: 1px solid var(--mp-line); border-radius: var(--radius); }
html:not(.pcs-on) .mhome .m-path .ic { width: 34px; height: 34px; border-radius: 8px; background: var(--mp-hero); display: grid; place-items: center; font-size: 17px; margin-bottom: 4px; }
html:not(.pcs-on) .mhome .m-path strong { font-size: 14px; font-weight: 600; letter-spacing: -.3px; }
html:not(.pcs-on) .mhome .m-path small { font-size: 10.5px; color: var(--mp-muted); }
html:not(.pcs-on) .mhome .m-path.dark { background: var(--mp-dark); color: #f1eee5; border-color: var(--mp-dark); }
html:not(.pcs-on) .mhome .m-path.dark .ic { background: #3b433b; }
html:not(.pcs-on) .mhome .m-path.dark small { color: #c9cdc4; }
html:not(.pcs-on) .mhome .m-path.dark .live-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 800; color: #f2a37a; }
html:not(.pcs-on) .mhome .m-path.dark .live-badge i { width: 6px; height: 6px; border-radius: 50%; background: #2ea043; }
html:not(.pcs-on) .mhome .m-path.dark .live-badge.off { color: #c9cdc4; }
html:not(.pcs-on) .mhome .m-path.dark .live-badge.off i { background: #8a918a; }
html:not(.pcs-on) .mhome .m-guides { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter) 4px; }
html:not(.pcs-on) .mhome .m-guides::-webkit-scrollbar { display: none; }
html:not(.pcs-on) .mhome .m-guide { flex: 0 0 74%; scroll-snap-align: start; background: var(--mp-paper); border: 1px solid var(--mp-line); border-radius: var(--radius); padding: 14px; }
html:not(.pcs-on) .mhome .m-guide small { font-size: 11px; color: var(--mp-accent); font-weight: 700; }
html:not(.pcs-on) .mhome .m-guide strong { display: block; margin: 5px 0 6px; font-size: 15px; font-weight: 600; letter-spacing: -.4px; line-height: 1.35; }
html:not(.pcs-on) .mhome .m-guide p { margin: 0; font-size: 12.5px; color: var(--mp-muted); line-height: 1.5; }
html:not(.pcs-on) .mhome .m-foot { margin: 30px var(--gutter) 0; padding-top: 16px; border-top: 1px solid var(--mp-line); font-size: 11.5px; color: var(--mp-muted); line-height: 1.7; }
html:not(.pcs-on) .mhome .m-foot a { margin-right: 10px; }
@media (max-width: 359px) { html:not(.pcs-on) .mhome { --gutter: 14px; } html:not(.pcs-on) .mhome .m-hero h1 { font-size: 24px; } }
@media (min-width: 600px) {
  html:not(.pcs-on) .mhome { --gutter: 28px; }
  html:not(.pcs-on) .mhome .m-hero h1 { font-size: 30px; }
  html:not(.pcs-on) .mhome .m-lead { max-width: 520px; }
  html:not(.pcs-on) .mhome .m-primary { width: auto; min-width: 250px; }
  html:not(.pcs-on) .mhome .m-paths { grid-template-columns: repeat(4, 1fr); gap: 12px; }
  html:not(.pcs-on) .mhome .m-guide { flex-basis: 46%; }
}
@media (min-width: 760px) {
  html:not(.pcs-on) .mhome .m-hero, html:not(.pcs-on) .mhome .m-slides, html:not(.pcs-on) .mhome .m-notice, html:not(.pcs-on) .mhome .m-proof, html:not(.pcs-on) .mhome .m-sec, html:not(.pcs-on) .mhome .m-foot { max-width: 860px; margin-left: auto; margin-right: auto; }
  html:not(.pcs-on) .mhome .m-guide { flex-basis: 31%; }
}

/* ═══ 공통 화면(계산기·인터넷·단말기·시세표·공지·가이드) — 껍데기 톤 ═══ */
html:not(.pcs-on) .container { background: transparent !important; box-shadow: none !important; }
html:not(.pcs-on) .content-wrapper, html:not(.pcs-on) .section, html:not(.pcs-on) .card, html:not(.pcs-on) .result-section, html:not(.pcs-on) .calc-card,
html:not(.pcs-on) .result-card, html:not(.pcs-on) .summary-card, html:not(.pcs-on) .post-card, html:not(.pcs-on) .notice-card, html:not(.pcs-on) .guide-card {
  background: var(--mp-paper); border-color: var(--mp-line); border-radius: var(--radius); box-shadow: none;
}
html:not(.pcs-on) body.dark-mode .container, html:not(.pcs-on) body.dark-mode .section, html:not(.pcs-on) body.dark-mode .card, html:not(.pcs-on) body.dark-mode .result-section {
  background: var(--mp-paper) !important; color: var(--mp-ink) !important; border-color: var(--mp-line) !important;
}
html:not(.pcs-on) h1, html:not(.pcs-on) h2, html:not(.pcs-on) h3 { letter-spacing: -.5px; }
html:not(.pcs-on) .hero-title, html:not(.pcs-on) .hero-section h1 { color: var(--mp-ink); }
html:not(.pcs-on) .grad-text, html:not(.pcs-on) .hero-title__tail { background: none !important; -webkit-text-fill-color: var(--mp-accent) !important; color: var(--mp-accent) !important; }
/* 허브(어떤 계산이 필요하세요) 카드 */
html:not(.pcs-on) .choice-card { background: var(--mp-paper) !important; border: 1px solid var(--mp-line) !important; border-radius: var(--radius) !important; box-shadow: none !important; }
html:not(.pcs-on) .choice-card:first-child { background: var(--mp-dark) !important; border-color: var(--mp-dark) !important; color: #f1eee5 !important; }
html:not(.pcs-on) .choice-card:first-child .card-info strong { color: #f1eee5 !important; }
html:not(.pcs-on) .choice-card:first-child .card-info span { color: #c9cdc4 !important; }
html:not(.pcs-on) .choice-card .card-info strong { color: var(--mp-ink); font-weight: 600; letter-spacing: -.3px; }
html:not(.pcs-on) .choice-card .card-info span { color: var(--mp-muted); }
/* 통신사·납부·약정 버튼 */
html:not(.pcs-on) .payment-button, html:not(.pcs-on) .carrier-button, html:not(.pcs-on) .discount-type-buttons button, html:not(.pcs-on) .pcs-btn {
  border: 1px solid var(--mp-line) !important; border-radius: 8px !important; background: var(--mp-paper) !important; color: var(--mp-muted) !important; box-shadow: none !important; font-weight: 600 !important;
}
html:not(.pcs-on) .payment-button.active, html:not(.pcs-on) .carrier-button.active, html:not(.pcs-on) .discount-type-buttons button.active, html:not(.pcs-on) .pcs-btn.active {
  border-color: var(--mp-accent) !important; background: var(--mp-soft) !important; color: var(--mp-accent) !important; box-shadow: inset 0 0 0 1px var(--mp-accent) !important;
}
html:not(.pcs-on) .payment-method-options { background: transparent !important; border: 0 !important; }
/* 입력칸 */
html:not(.pcs-on) .number-input, html:not(.pcs-on) input[type="text"], html:not(.pcs-on) input[type="number"], html:not(.pcs-on) select, html:not(.pcs-on) .date-input {
  border: 1px solid var(--mp-line) !important; border-radius: 8px !important; background: var(--mp-paper) !important; color: var(--mp-ink) !important; box-shadow: none !important;
}
html:not(.pcs-on) .number-input:focus, html:not(.pcs-on) input:focus { border-color: var(--mp-accent) !important; box-shadow: 0 0 0 3px #b4422022 !important; outline: none; }
html:not(.pcs-on) .input-group label, html:not(.pcs-on) .input-label { color: var(--mp-muted); }
/* 요금제 선택 버튼·단계 알약·조건 상자 */
html:not(.pcs-on) .plan-list-btn, html:not(.pcs-on) .keep-trigger, html:not(.pcs-on) .discount-type-select-trigger {
  border: 1px solid var(--mp-line) !important; border-radius: 8px !important; background: var(--mp-bg) !important; color: var(--mp-ink) !important; box-shadow: none !important;
}
html:not(.pcs-on) .ppb-amt, html:not(.pcs-on) .plan-step, html:not(.pcs-on) .subsidy-chip, html:not(.pcs-on) .dc-chip { color: var(--mp-accent) !important; }
html:not(.pcs-on) .plan-step { background: var(--mp-soft) !important; }
/* 계산·주요 버튼 */
html:not(.pcs-on) .calc-button, html:not(.pcs-on) #mainCalcButton, html:not(.pcs-on) .btn-primary, html:not(.pcs-on) button.primary, html:not(.pcs-on) .cta-button, html:not(.pcs-on) .m-primary-btn {
  background: var(--mp-accent) !important; color: var(--mp-on-accent) !important; border: 0 !important; border-radius: 8px !important; box-shadow: none !important; font-weight: 700 !important;
}
html:not(.pcs-on) .prorate-button { border: 1px solid var(--mp-line) !important; background: var(--mp-paper) !important; color: var(--mp-ink) !important; border-radius: 8px !important; box-shadow: none !important; }
html:not(.pcs-on) .prorate-button.active { background: var(--mp-soft) !important; color: var(--mp-accent) !important; border-color: var(--mp-accent) !important; }
/* 결과: 결론·총액·기간 배지·할인 줄 */
html:not(.pcs-on) .result-section, html:not(.pcs-on) #result { background: transparent !important; }
html:not(.pcs-on) .result-total, html:not(.pcs-on) .total-amount, html:not(.pcs-on) .result-summary strong { color: var(--mp-ink); }
html:not(.pcs-on) .mi-period-badge, html:not(.pcs-on) .badge { background: var(--mp-hero) !important; color: var(--mp-muted) !important; border: 1px solid var(--mp-line) !important; border-radius: 999px !important; }
html:not(.pcs-on) .mi-ln.win > span, html:not(.pcs-on) .mi-ln.win > b, html:not(.pcs-on) .discount-line { color: #1f6f3f !important; }
html:not(.pcs-on) body.dark-mode .mi-ln.win > span, html:not(.pcs-on) body.dark-mode .mi-ln.win > b { color: #7fd39a !important; }
/* 링크·강조·툴팁 */
html:not(.pcs-on) a.link, html:not(.pcs-on) .text-primary, html:not(.pcs-on) .text-blue-600, html:not(.pcs-on) .text-blue-500 { color: var(--mp-accent) !important; }
html:not(.pcs-on) .bg-blue-600, html:not(.pcs-on) .bg-blue-500, html:not(.pcs-on) .bg-indigo-600 { background-color: var(--mp-accent) !important; }
html:not(.pcs-on) .tooltip-icon { background: var(--mp-hero) !important; color: var(--mp-muted) !important; border: 1px solid var(--mp-line) !important; }
/* 모달·바텀시트 */
html:not(.pcs-on) .modal-content, html:not(.pcs-on) .plan-picker-sheet, html:not(.pcs-on) .mnt2-modal, html:not(.pcs-on) .unlk-modal, html:not(.pcs-on) .sbsd-modal { background: var(--mp-paper) !important; color: var(--mp-ink) !important; border-radius: 14px !important; }
html:not(.pcs-on) .plan-picker-item { border: 1px solid var(--mp-line) !important; border-radius: 10px !important; background: var(--mp-paper) !important; }
html:not(.pcs-on) .pp-filter-chip.on, html:not(.pcs-on) .pp-filter-chip.active { background: var(--mp-accent) !important; color: var(--mp-on-accent) !important; border-color: var(--mp-accent) !important; }
html:not(.pcs-on) .close-bottom-sheet-btn { background: var(--mp-accent) !important; color: var(--mp-on-accent) !important; border-radius: 8px !important; }
/* 공지·시세표·가이드 목록 카드 */
html:not(.pcs-on) .post-item, html:not(.pcs-on) .notice-item, html:not(.pcs-on) article.card, html:not(.pcs-on) .tw-card { background: var(--mp-paper) !important; border: 1px solid var(--mp-line) !important; border-radius: var(--radius) !important; box-shadow: none !important; }
html:not(.pcs-on) .brand-heading { color: var(--mp-ink); }

/* ═══ 가로모드(폰을 눕힘: 높이 500px 이하) — 슬라이드를 납작하게, 히어로 여백을 줄여 첫 화면에 버튼까지 들어오게 ═══ */
@media (orientation: landscape) and (max-height: 500px) {
  html:not(.pcs-on) .mhome .m-slide { aspect-ratio: 21 / 9; }
  html:not(.pcs-on) .mhome .m-hero { padding: 14px var(--gutter) 12px; }
  html:not(.pcs-on) .mhome .m-hero h1 { font-size: 22px; }
  html:not(.pcs-on) .mhome .m-lead { margin-bottom: 10px; }
}
/* 폴드 내부·태블릿 가로(넓고 낮음): 슬라이드 최대 높이를 잡아 화면을 다 먹지 않게 */
@media (min-width: 600px) {
  html:not(.pcs-on) .mhome .m-slide { max-height: 360px; aspect-ratio: auto; height: min(56vw, 360px); }
}

/* 홈: 옛 상단 버튼 줄(다크 토글 하나)은 p82-nav 상단 바가 대신하므로 숨김 · 시세표 카드 안 LIVE 배지는 카드 안에 그대로 */
html:not(.pcs-on) .top-right-buttons { display: none !important; }
html:not(.pcs-on) .mhome .live-badge { position: static !important; margin: 0 !important; padding: 0 !important; background: transparent !important; box-shadow: none !important; }
html:not(.pcs-on) .mhome .live-badge i { animation: none !important; }
/* p82-nav 상단 바 아래 여백(고정 바 높이) — 홈은 슬라이드가 바로 붙으므로 살짝 띄운다 */
html:not(.pcs-on) body.has-p82nav .mhome, html:not(.pcs-on) .p82nav ~ .mhome { padding-top: 0; }

/* ═══ 계산기 페이지 잔여 파랑·보라 정리 ═══ */
html:not(.pcs-on) .grad-accent, html:not(.pcs-on) .grad-text { background: none !important; -webkit-background-clip: initial !important; -webkit-text-fill-color: var(--mp-accent) !important; color: var(--mp-accent) !important; }
html:not(.pcs-on) .help-video-banner, html:not(.pcs-on) .subsidy-banner, html:not(.pcs-on) button.sbn, html:not(.pcs-on) .sbn { background: var(--mp-paper) !important; border: 1px solid var(--mp-line) !important; color: var(--mp-ink) !important; border-radius: 8px !important; box-shadow: none !important; }
html:not(.pcs-on) .hvb-go, html:not(.pcs-on) .sbn-go, html:not(.pcs-on) .subsidy-date { color: var(--mp-accent) !important; }
html:not(.pcs-on) .additional-plan-box, html:not(.pcs-on) .plan-mid-box, html:not(.pcs-on) .plan-maintenance-row, html:not(.pcs-on) .plan-input-wrapper,
html:not(.pcs-on) .welfare-box, html:not(.pcs-on) .combo-box, html:not(.pcs-on) [class*="discount"] .input-group, html:not(.pcs-on) .lgu-special-discounts-row {
  background: var(--mp-hero) !important; border-color: var(--mp-line) !important; border-radius: 8px !important; box-shadow: none !important;
}
html:not(.pcs-on) .bg-blue-50, html:not(.pcs-on) .bg-indigo-50, html:not(.pcs-on) .bg-slate-50, html:not(.pcs-on) .bg-gray-50, html:not(.pcs-on) .bg-gray-100 { background-color: var(--mp-hero) !important; }
html:not(.pcs-on) .border-blue-200, html:not(.pcs-on) .border-blue-300, html:not(.pcs-on) .border-indigo-200 { border-color: var(--mp-line) !important; }
html:not(.pcs-on) .text-blue-700, html:not(.pcs-on) .text-blue-800, html:not(.pcs-on) .text-indigo-600, html:not(.pcs-on) .text-indigo-700 { color: var(--mp-accent) !important; }
html:not(.pcs-on) .plan-step { background: var(--mp-accent) !important; color: var(--mp-on-accent) !important; }
html:not(.pcs-on) .mi-period-badge.hot, html:not(.pcs-on) .badge-hot { background: var(--mp-soft) !important; color: var(--mp-accent) !important; }
html:not(.pcs-on) .result-section .section-title, html:not(.pcs-on) .result-header { color: var(--mp-ink) !important; }

/* ═══ 계산기 9종 — 입력 섹션·결과 카드를 시안 톤으로 (2026-09-18 v1.1) ═══ */
html:not(.pcs-on) .section { padding: 16px !important; border-radius: 10px !important; box-shadow: none !important; margin-bottom: 14px !important; }
html:not(.pcs-on) .section h3 { color: var(--mp-ink) !important; font-size: 16px !important; font-weight: 600 !important; letter-spacing: -.4px; border-bottom: 1px solid var(--mp-line) !important; padding-bottom: 10px !important; margin-bottom: 12px !important; }
html:not(.pcs-on) .section h3::before { background: var(--mp-accent) !important; }
html:not(.pcs-on) .ig-label-row, html:not(.pcs-on) .input-group > label, html:not(.pcs-on) .input-group .label { color: var(--mp-muted) !important; font-size: 12px !important; font-weight: 600 !important; }
html:not(.pcs-on) .header-info h1 { font-size: 24px !important; letter-spacing: -.8px; }
html:not(.pcs-on) .header-info p { color: var(--mp-muted) !important; }
html:not(.pcs-on) .btn-back-to-menu { border: 1px solid var(--mp-line) !important; background: var(--mp-paper) !important; color: var(--mp-ink) !important; border-radius: 8px !important; box-shadow: none !important; }
html:not(.pcs-on) .choice-grid { gap: 10px !important; }
html:not(.pcs-on) .choice-card { padding: 14px 12px !important; }
html:not(.pcs-on) .choice-card .card-icon { filter: saturate(.85); }

/* 결과 */
html:not(.pcs-on) #result-title { font-size: 20px !important; letter-spacing: -.6px; color: var(--mp-ink) !important; }
html:not(.pcs-on) .breakdown-card { background: var(--mp-paper) !important; border: 1px solid var(--mp-line) !important; border-radius: 10px !important; box-shadow: none !important; padding: 16px !important; }
html:not(.pcs-on) .breakdown-card.winner-card { border-color: var(--mp-accent) !important; box-shadow: inset 0 2px 0 var(--mp-accent) !important; }
html:not(.pcs-on) .winner-badge { background: var(--mp-accent) !important; color: var(--mp-on-accent) !important; border-radius: 999px !important; font-weight: 700 !important; box-shadow: none !important; }
html:not(.pcs-on) .breakdown-card h4 { color: var(--mp-ink) !important; font-size: 17px !important; font-weight: 600 !important; letter-spacing: -.4px; }
html:not(.pcs-on) .total-cost-section { background: var(--mp-hero) !important; border: 1px solid var(--mp-line) !important; border-radius: 10px !important; box-shadow: none !important; text-align: center; }
html:not(.pcs-on) .total-cost-section p { color: var(--mp-muted) !important; }
html:not(.pcs-on) .total-cost-section strong, html:not(.pcs-on) .total-cost-section strong span { color: var(--mp-ink) !important; font-size: 26px !important; font-weight: 600 !important; letter-spacing: -1px; font-variant-numeric: tabular-nums; }
html:not(.pcs-on) .device-price-section { background: transparent !important; border: 1px solid var(--mp-line) !important; border-radius: 8px !important; color: var(--mp-ink) !important; }
/* 기간 상자: 세로선·점 대신 줄 상자(PC 09-18 상자 틀) */
html:not(.pcs-on) .timeline-container { padding-left: 0 !important; margin-top: 12px !important; border: 1px solid var(--mp-line); border-radius: 10px; overflow: hidden; }
html:not(.pcs-on) .timeline-container::before { display: none !important; }
html:not(.pcs-on) .timeline-period { margin: 0 !important; padding: 12px 14px !important; border-bottom: 1px solid var(--mp-line) !important; }
html:not(.pcs-on) .timeline-period:last-child { border-bottom: 0 !important; }
html:not(.pcs-on) .timeline-header { border-bottom: 0 !important; margin-bottom: 2px !important; padding-bottom: 0 !important; }
html:not(.pcs-on) .timeline-header h5 { font-size: 13.5px !important; font-weight: 700 !important; color: var(--mp-ink) !important; }
html:not(.pcs-on) .timeline-header h5::before { display: none !important; }
html:not(.pcs-on) .timeline-badge { background: var(--mp-hero) !important; color: var(--mp-muted) !important; border: 1px solid var(--mp-line) !important; border-radius: 999px !important; font-size: 10.5px !important; }
html:not(.pcs-on) .timeline-badge-warn { background: #e5326e !important; color: #fff !important; border-color: transparent !important; font-weight: 700 !important; }   /* 2026-09-22 변화 딱지 핑크(사장님) */
html:not(.pcs-on).dark-mode .timeline-badge-warn, html:not(.pcs-on) body.dark-mode .timeline-badge-warn { background: #ff6b9a !important; color: #1e1b14 !important; }
html:not(.pcs-on) .timeline-period > p { margin: 4px 0 0 !important; }
html:not(.pcs-on) .timeline-period > p strong { font-size: 15px !important; color: var(--mp-ink) !important; }
html:not(.pcs-on) .timeline-period > p strong span { color: var(--mp-accent) !important; font-variant-numeric: tabular-nums; }
html:not(.pcs-on) .timeline-period > p[style] { color: var(--mp-muted) !important; font-size: 11.5px !important; }
html:not(.pcs-on) .timeline-period ul { margin: 6px 0 0 !important; padding: 8px 0 0 !important; border-top: 1px dashed var(--mp-line); list-style: none !important; }
html:not(.pcs-on) .timeline-period li { display: flex !important; justify-content: space-between; gap: 10px; font-size: 12.5px !important; color: var(--mp-muted) !important; padding: 2px 0 !important; }
html:not(.pcs-on) .timeline-period li > span:last-child { color: var(--mp-ink); font-weight: 500; font-variant-numeric: tabular-nums; }
html:not(.pcs-on) .timeline-period li.discount-item, html:not(.pcs-on) .timeline-period li.discount-item > span { color: #1f6f3f !important; }
html:not(.pcs-on) body.dark-mode .timeline-period li.discount-item, html:not(.pcs-on) body.dark-mode .timeline-period li.discount-item > span { color: #7fd39a !important; }
html:not(.pcs-on) .result-plan-name { color: var(--mp-accent) !important; text-decoration: underline; text-underline-offset: 3px; }
html:not(.pcs-on) .result-summary-section { background: var(--mp-hero) !important; border: 1px solid var(--mp-line) !important; border-radius: 10px !important; color: var(--mp-ink) !important; }
html:not(.pcs-on) .result-summary-section strong, html:not(.pcs-on) .left-column-total-label, html:not(.pcs-on) .right-column-total-label { color: var(--mp-ink) !important; }
html:not(.pcs-on) .info-box-red { background: var(--mp-soft) !important; color: var(--mp-accent) !important; border: 1px solid var(--mp-soft) !important; border-radius: 8px !important; }
html:not(.pcs-on) .choice-button { border: 1px solid var(--mp-line) !important; background: var(--mp-paper) !important; color: var(--mp-ink) !important; border-radius: 8px !important; }
html:not(.pcs-on) .choice-button.active { border-color: var(--mp-accent) !important; background: var(--mp-soft) !important; color: var(--mp-accent) !important; }
html:not(.pcs-on) .pen-seg button.active { background: var(--mp-accent) !important; color: var(--mp-on-accent) !important; }
html:not(.pcs-on) .result-table th { background: var(--mp-hero) !important; color: var(--mp-ink) !important; }
html:not(.pcs-on) .result-table td, html:not(.pcs-on) .result-table th { border-color: var(--mp-line) !important; }

/* ═══ 휴대폰 요금 계산 허브 — 9개 카드를 시안(hub.html)처럼: 묶음 제목 + 2열 카드 + 공통지원금 먹색 큰 카드 (m-calc.js 가 제목·설명을 끼움) ═══ */
html:not(.pcs-on) .choice-grid { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
html:not(.pcs-on) .m-group-h { grid-column: 1 / -1; margin: 8px 0 -2px; font-size: 13px; font-weight: 700; color: var(--mp-muted); }
html:not(.pcs-on) .choice-card { display: flex !important; flex-direction: column !important; align-items: flex-start !important; text-align: left !important; gap: 4px !important; min-height: 118px; padding: 13px 13px 11px !important; }
html:not(.pcs-on) .choice-card .card-icon { display: none !important; }
html:not(.pcs-on) .choice-card .card-info { display: flex; flex-direction: column; gap: 3px; width: 100%; }
html:not(.pcs-on) .choice-card .m-kicker { font-size: 11px; color: var(--mp-muted); }
html:not(.pcs-on) .choice-card .card-info strong { font-size: 15.5px !important; font-weight: 600 !important; letter-spacing: -.4px; line-height: 1.3; }
html:not(.pcs-on) .choice-card .card-info > span { display: none !important; }   /* 옛 한 줄 부제(단말기 할인)는 설명 줄로 대체 */
html:not(.pcs-on) .choice-card .m-desc { margin: 0; font-size: 11.5px; color: var(--mp-muted); }
html:not(.pcs-on) .choice-card::after { content: "↗"; margin-top: auto; align-self: flex-end; color: var(--mp-accent); font-weight: 700; }
html:not(.pcs-on) .choice-card.m-primary-card { grid-column: 1 / -1; min-height: 0; background: var(--mp-dark) !important; border-color: var(--mp-dark) !important; }
html:not(.pcs-on) .choice-card.m-primary-card .card-info strong { color: #f1eee5 !important; }
html:not(.pcs-on) .choice-card.m-primary-card .m-kicker, html:not(.pcs-on) .choice-card.m-primary-card .m-desc { color: #c9cdc4; }
html:not(.pcs-on) .choice-card.m-primary-card::after { color: #f2a37a; }
html:not(.pcs-on) body.dark-mode .choice-card.m-primary-card { background: #0f1411 !important; border-color: #2a302b !important; }
/* 계산기 머리: 가운데 큰 제목 → 왼쪽 정렬 페이지 머리 */
html:not(.pcs-on) .header-info { text-align: left !important; }
html:not(.pcs-on) .header-info h1 { font-size: 24px !important; font-weight: 600 !important; letter-spacing: -.8px; line-height: 1.3; }
html:not(.pcs-on) .header-info p { font-size: 13px !important; }
html:not(.pcs-on) .header-action-buttons { justify-content: flex-start !important; }
html:not(.pcs-on) .phone82-brand--landing, html:not(.pcs-on) .phone82-brand__bubble { display: none !important; }   /* 상단 바에 로고가 있으니 본문 로고는 숨김 */
@media (min-width: 600px) { html:not(.pcs-on) .choice-grid { grid-template-columns: repeat(3, 1fr) !important; } }

/* ═══ 허브 C안(상황 3갈래) — m-calc.js v1.1 이 .choice-card 를 세 상황 상자로 옮긴다. 폰: 아코디언 / ≥600: 가로 일렬 3열 전부 펼침 ═══ */
html:not(.pcs-on) .m-sits { display: flex; flex-direction: column; gap: 12px; }
html:not(.pcs-on) .m-sits-head { padding: 4px 2px 0; }
html:not(.pcs-on) .m-sits-head .kicker { display: block; font-size: 11.5px; font-weight: 700; color: var(--mp-accent); letter-spacing: .4px; margin-bottom: 4px; }
html:not(.pcs-on) .m-sits-head h2 { margin: 0 0 4px; font-size: 22px; font-weight: 600; letter-spacing: -.7px; color: var(--mp-ink); }
html:not(.pcs-on) .m-sits-head p { margin: 0; font-size: 12.5px; color: var(--mp-muted); }
html:not(.pcs-on) .m-sit { background: var(--mp-paper); border: 1px solid var(--mp-line); border-radius: 12px; overflow: hidden; }
html:not(.pcs-on) .m-sit.open { border-color: var(--mp-accent); box-shadow: inset 0 2px 0 var(--mp-accent); }
html:not(.pcs-on) .sit-head { display: grid; grid-template-columns: 74px 1fr 24px; align-items: center; gap: 12px; width: 100%; padding: 12px 14px 12px 12px; border: 0; background: transparent; text-align: left; font: inherit; color: inherit; cursor: pointer; }
html:not(.pcs-on) .sit-head.static { grid-template-columns: 1fr; cursor: default; }
html:not(.pcs-on) .sit-art { width: 74px; height: 74px; border-radius: 10px; background: var(--mp-hero); display: grid; place-items: center; font-size: 30px; overflow: hidden; position: relative; }
html:not(.pcs-on) .sit-art.buy img { position: absolute; height: 70%; width: auto; object-fit: contain; filter: drop-shadow(0 6px 6px #11130f22); }
html:not(.pcs-on) .sit-art.buy img:first-child { left: 12px; transform: rotate(-8deg); }
html:not(.pcs-on) .sit-art.buy img:last-child { right: 10px; transform: rotate(7deg); top: 16px; }
html:not(.pcs-on) .sit-art.use { background: #e8eef0; }
html:not(.pcs-on) .sit-art.fam { background: #efe7f5; }
html:not(.pcs-on) body.dark-mode .sit-art.use, html:not(.pcs-on) body.dark-mode .sit-art.fam { background: var(--mp-stage); }
html:not(.pcs-on) .sit-tx small { display: block; font-size: 11.5px; color: var(--mp-muted); }
html:not(.pcs-on) .sit-tx strong { display: block; font-size: 15.5px; font-weight: 600; letter-spacing: -.4px; line-height: 1.3; margin-top: 2px; color: var(--mp-ink); }
html:not(.pcs-on) .sit-chev { color: var(--mp-muted); font-size: 18px; transition: transform .2s; }
html:not(.pcs-on) .m-sit.open .sit-chev { transform: rotate(180deg); }
html:not(.pcs-on) .sit-body { display: none; padding: 12px 12px 12px; border-top: 1px solid var(--mp-line); grid-template-columns: 1fr 1fr; gap: 8px; }
html:not(.pcs-on) .m-sit.open .sit-body { display: grid; }
/* 상황 상자 안의 계산 카드(원래 .choice-card) */
html:not(.pcs-on) .sit-body .choice-card { min-height: 84px !important; padding: 11px 12px 9px !important; border-radius: 10px !important; background: var(--mp-bg) !important; margin: 0 !important; }
html:not(.pcs-on) .sit-body .choice-card .card-info strong { font-size: 14px !important; }
html:not(.pcs-on) .sit-body .choice-card .m-desc { font-size: 11px; color: var(--mp-muted); }
html:not(.pcs-on) .sit-body .choice-card.hot { grid-column: 1 / -1; min-height: 0 !important; background: var(--mp-dark) !important; border-color: var(--mp-dark) !important; flex-direction: row !important; align-items: center !important; }
html:not(.pcs-on) .sit-body .choice-card.hot .card-info { flex-direction: row; align-items: baseline; gap: 8px; }
html:not(.pcs-on) .sit-body .choice-card.hot .card-info strong { color: #f1eee5 !important; }
html:not(.pcs-on) .sit-body .choice-card.hot .m-desc { color: #c9cdc4; }
html:not(.pcs-on) .sit-body .choice-card.hot::after { margin: 0 0 0 auto; color: #f2a37a; }
html:not(.pcs-on) body.dark-mode .sit-body .choice-card.hot { background: #0f1411 !important; border-color: #2a302b !important; }
/* 넓은 화면(폴드 내부·태블릿): 세 상황을 가로 일렬로, 전부 펼친 채 (사장님 09-18 「폴드는 3×1 가로로」) */
@media (min-width: 600px) {
  html:not(.pcs-on) .m-sits { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; align-items: start; }
  html:not(.pcs-on) .m-sits-head { grid-column: 1 / -1; }
  html:not(.pcs-on) .m-sit { border-color: var(--mp-line) !important; box-shadow: none !important; }
  html:not(.pcs-on) .m-sit:first-child { border-color: var(--mp-accent) !important; box-shadow: inset 0 2px 0 var(--mp-accent) !important; }
  html:not(.pcs-on) .sit-head { grid-template-columns: 56px 1fr; cursor: default; pointer-events: none; }
  html:not(.pcs-on) .sit-art { width: 56px; height: 56px; font-size: 24px; }
  html:not(.pcs-on) .sit-chev { display: none; }
  html:not(.pcs-on) .sit-body { display: grid !important; grid-template-columns: 1fr; }
  html:not(.pcs-on) .sit-body .choice-card.hot { flex-direction: column !important; align-items: flex-start !important; }
  html:not(.pcs-on) .sit-body .choice-card.hot .card-info { flex-direction: column; }
  html:not(.pcs-on) .sit-body .choice-card.hot::after { margin: auto 0 0 0; align-self: flex-end; }
}
/* 원래 강조 카드(.highlight-card: 유지비·우리가족, 흰 글자+그라데이션)가 상황 상자 안에서 글자가 안 보이던 것 → 일반 카드와 같게 */
html:not(.pcs-on) .sit-body .choice-card.highlight-card { background: var(--mp-bg) !important; border: 1px solid var(--mp-line) !important; }
html:not(.pcs-on) .sit-body .choice-card.highlight-card .card-info strong { color: var(--mp-ink) !important; }
html:not(.pcs-on) .sit-body .choice-card.highlight-card .m-desc, html:not(.pcs-on) .sit-body .choice-card.highlight-card .m-kicker { color: var(--mp-muted) !important; }
/* 옛 A안 규칙(.choice-card:first-child 먹색)이 상황 상자 안 첫 카드(유지비·우리가족)에 흰 글자만 남겼던 것 → 첫 카드도 일반 카드(.hot 만 먹색) */
html:not(.pcs-on) .sit-body .choice-card:first-child:not(.hot) { background: var(--mp-bg) !important; border-color: var(--mp-line) !important; color: var(--mp-ink) !important; }
html:not(.pcs-on) .sit-body .choice-card:first-child:not(.hot) .card-info strong { color: var(--mp-ink) !important; }
html:not(.pcs-on) .sit-body .choice-card:first-child:not(.hot) .m-desc, html:not(.pcs-on) .sit-body .choice-card:first-child:not(.hot) .card-info span { color: var(--mp-muted) !important; }

/* ═══════════════════════════════════════════════════════════════════════════════
   v2.0 (2026-09-18 밤) — 시안 배치 전면 적용: 허브 마무리 · 계산 입력(머리글·01/02/03·바닥 고정 바) · 결과(결론 띠·출력 줄·두 열)
   · 인터넷(진입 카드·구분 알약·결과 두 열) · 단말기 정보(탭·검색·목록·지원금/자급제 상자). m-calc.js v2.0 · m-internet.js · m-devices.js 와 짝.
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ── 허브 마무리: 옛 「휴대폰 요금 계산기」 큰 제목·부제는 상황 머리(.m-sits-head)가 대신 ── */
html:not(.pcs-on) body.m-choice .header-info { display: none !important; }
html:not(.pcs-on) body.m-choice .header-action-buttons { display: none !important; }
html:not(.pcs-on) .m-sits-head .m-sb-chip {
  display: inline-flex !important; align-items: center; gap: 6px; margin-top: 10px; height: 34px; padding: 0 12px !important; width: auto !important;
  border: 1px solid var(--mp-soft) !important; border-radius: 999px !important; background: var(--mp-soft) !important; color: var(--mp-accent) !important; font-size: 12.5px !important; box-shadow: none !important;
}
html:not(.pcs-on) .m-sb-chip .sbn-emoji { font-size: 14px; }
html:not(.pcs-on) .m-sb-chip .sbn-text, html:not(.pcs-on) .m-sb-chip .sbn-text strong, html:not(.pcs-on) .m-sb-chip .subsidy-date { color: var(--mp-accent) !important; font-weight: 700 !important; font-size: 12.5px !important; }
html:not(.pcs-on) .m-sb-chip .sbn-go { font-size: 11.5px !important; font-weight: 600; opacity: .85; }
html:not(.pcs-on) .m-hub-foot { margin-top: 2px; }
html:not(.pcs-on) .m-hub-foot .m-video-link { display: flex !important; align-items: center; gap: 10px; width: 100% !important; margin: 0 !important; padding: 12px 14px !important; border-radius: 10px !important; text-align: left; }
html:not(.pcs-on) .m-hub-foot .m-video-link .hvb-text { flex: 1; font-size: 13px; color: var(--mp-ink); }
html:not(.pcs-on) .m-hub-foot .m-video-link .hvb-go { font-size: 12px; font-weight: 700; white-space: nowrap; }
@media (min-width: 600px) { html:not(.pcs-on) .m-hub-foot { grid-column: 1 / -1; } }

/* ── 계산 입력 화면: 머리글(작은 제목 + 두 줄 큰 제목) ── */
html:not(.pcs-on) body.m-calc .header-info { padding: 6px 0 2px; }
html:not(.pcs-on) body.m-calc .header-info h1 .m-kick { display: block; font-size: 11.5px; font-weight: 700; color: var(--mp-accent); letter-spacing: .4px; margin-bottom: 6px; }
html:not(.pcs-on) body.m-calc .header-info h1 { font-size: 24px !important; line-height: 1.3 !important; }
html:not(.pcs-on) body.m-calc .header-info h1 em, html:not(.pcs-on) body.m-calc .header-info h1 .grad-accent { font-style: normal; }
html:not(.pcs-on) body.m-calc .header-info p { margin-top: 6px !important; }
html:not(.pcs-on) .btn-back-to-menu { height: 34px !important; padding: 0 12px !important; border-radius: 999px !important; font-size: 12.5px !important; font-weight: 600 !important; }
/* 섹션 번호 01·02·03 (보이는 섹션만 셈: display:none 은 카운터를 올리지 않음) */
html:not(.pcs-on) body.m-calc .main-content { counter-reset: msec; }
html:not(.pcs-on) body.m-calc .main-content > .section { counter-increment: msec; }
html:not(.pcs-on) body.m-calc .main-content > .section > h3 { display: flex !important; align-items: baseline; gap: 8px; padding-left: 0 !important; }
html:not(.pcs-on) body.m-calc .main-content > .section > h3::before {
  content: counter(msec, decimal-leading-zero) !important; position: static !important; display: inline !important; width: auto !important; height: auto !important;
  background: none !important; border-radius: 0 !important; color: var(--mp-accent) !important; font-size: 11.5px !important; font-weight: 800 !important; letter-spacing: .3px; transform: none !important; margin: 0 !important;
}
html:not(.pcs-on) .calc-reset-card-btn { border: 1px solid var(--mp-line) !important; background: var(--mp-paper) !important; color: var(--mp-muted) !important; border-radius: 999px !important; box-shadow: none !important; font-size: 12px !important; font-weight: 600 !important; }
html:not(.pcs-on) #error-message:not(:empty) { margin: 10px 0; padding: 12px 14px; background: var(--mp-soft); color: var(--mp-accent); border-radius: 8px; font-size: 13px; font-weight: 600; }
html:not(.pcs-on) .m-flash { animation: m-flash 1.2s ease-out; }
@keyframes m-flash { 0%, 60% { box-shadow: 0 0 0 4px #b4422055 !important; } 100% { box-shadow: none; } }

/* ── 바닥 고정 바(하단 5탭 위에 얹힘): 일할 계산 토글 + 이 조건으로 계산하기 ── */
html:not(.pcs-on) .m-cta { position: fixed; left: 0; right: 0; bottom: calc(56px + env(safe-area-inset-bottom)); z-index: 89; padding: 10px var(--gutter) 10px; background: var(--mp-paper); border-top: 1px solid var(--mp-line); box-shadow: 0 -10px 30px #00000010; }
html:not(.pcs-on) .m-cta[hidden] { display: none !important; }
html:not(.pcs-on) .m-cta .row { display: flex; gap: 8px; align-items: stretch; max-width: 640px; margin: 0 auto; }
html:not(.pcs-on) .m-cta .pro-slot:empty { display: none; }
html:not(.pcs-on) .m-cta .prorate-button-group { margin: 0 !important; flex: 0 0 auto; }
html:not(.pcs-on) .m-cta .prorate-button { height: 48px !important; min-height: 0 !important; padding: 0 12px !important; font-size: 12.5px !important; font-weight: 700 !important; white-space: nowrap; border-radius: 8px !important; margin: 0 !important; }
html:not(.pcs-on) .m-cta .m-cta-hint { flex: 1; align-self: center; font-size: 11.5px; color: var(--mp-muted); }
html:not(.pcs-on) .m-cta .calc { flex: 1; height: 48px; border: 0; border-radius: 8px; background: var(--mp-accent); color: var(--mp-on-accent); font: inherit; font-size: 15px; font-weight: 700; }
html:not(.pcs-on) body.m-calc { padding-bottom: calc(136px + env(safe-area-inset-bottom)) !important; }
html:not(.pcs-on) #mainCalcButton.m-parked { display: none !important; }

/* ── 결과: 결론 띠 + 출력·공유·조건 수정 줄 ── */
html:not(.pcs-on) #result-title { font-size: 13px !important; font-weight: 700 !important; color: var(--mp-muted) !important; letter-spacing: .3px; margin: 0 0 2px !important; }
html:not(.pcs-on) #result .result-summary-text, html:not(.pcs-on) #result #winner { display: none !important; }
html:not(.pcs-on) #result #result-summary-section { margin: 0; }
html:not(.pcs-on) #result #support-info-display-1, html:not(.pcs-on) #result #support-info-display-2 { color: var(--mp-muted) !important; font-size: 12px !important; font-weight: 500 !important; text-align: left !important; margin: 8px 0 0 !important; }
html:not(.pcs-on) .m-verdict { margin: 8px 0 0; padding: 14px 16px; background: var(--mp-hero); border-left: 4px solid var(--mp-accent); border-radius: 6px; }
html:not(.pcs-on) .m-verdict h2 { margin: 0; font-size: 19px; font-weight: 500; line-height: 1.35; letter-spacing: -.6px; color: var(--mp-ink); }
html:not(.pcs-on) .m-verdict h2 strong { color: var(--mp-accent); font-weight: 700; }
html:not(.pcs-on) .m-verdict p { margin: 5px 0 0; font-size: 11.5px; color: var(--mp-muted); }
html:not(.pcs-on) .m-acts { display: flex; gap: 8px; margin: 12px 0 0; }
html:not(.pcs-on) .m-acts button { flex: 1; height: 44px; margin: 0 !important; border: 1px solid var(--mp-line) !important; border-radius: 8px !important; background: var(--mp-paper) !important; color: var(--mp-ink) !important; font: inherit; font-size: 13.5px !important; font-weight: 600 !important; box-shadow: none !important; }
html:not(.pcs-on) .m-acts button.edit { background: var(--mp-accent) !important; color: var(--mp-on-accent) !important; border-color: var(--mp-accent) !important; }
@media (max-width: 359px) { html:not(.pcs-on) .m-acts { flex-wrap: wrap; } html:not(.pcs-on) .m-acts button.edit { flex-basis: 100%; } }
html:not(.pcs-on) .result-slide-close { display: none !important; }
html:not(.pcs-on) #discount-breakdown { margin-top: 14px !important; gap: 12px !important; }
html:not(.pcs-on) #discount-breakdown .breakdown-card { flex-basis: auto !important; width: 100% !important; max-width: none !important; margin: 0 !important; }
/* 비교(카드 2장)는 좌우 두 열 — 열 폭이 좁으니 글자 한 단계 축소(시안 compare.html) */
html:not(.pcs-on) #discount-breakdown.m-two { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 8px !important; align-items: start; }
html:not(.pcs-on) #discount-breakdown.m-two .carrier-breakdown-column { min-width: 0; }
html:not(.pcs-on) #discount-breakdown.m-two .breakdown-card { min-width: 0; padding: 10px !important; border-radius: 10px !important; }
html:not(.pcs-on) #discount-breakdown.m-two .breakdown-card h4 { font-size: 13px !important; line-height: 1.3; margin: 0 0 8px !important; text-align: center; }
html:not(.pcs-on) #discount-breakdown.m-two .winner-badge { font-size: 9.5px !important; padding: 2px 8px !important; }
html:not(.pcs-on) #discount-breakdown.m-two .total-cost-section { padding: 10px 8px !important; margin: 0 0 8px !important; }
html:not(.pcs-on) #discount-breakdown.m-two .total-cost-section p { font-size: 10.5px !important; margin: 0 0 2px !important; }
html:not(.pcs-on) #discount-breakdown.m-two .total-cost-section strong, html:not(.pcs-on) #discount-breakdown.m-two .total-cost-section strong span { font-size: 17px !important; letter-spacing: -.6px; }
html:not(.pcs-on) #discount-breakdown.m-two .device-price-section { font-size: 11px !important; padding: 6px 8px !important; }
html:not(.pcs-on) #discount-breakdown.m-two .timeline-period { padding: 8px 9px !important; }
html:not(.pcs-on) #discount-breakdown.m-two .timeline-header h5 { font-size: 11.5px !important; }
html:not(.pcs-on) #discount-breakdown.m-two .timeline-badge { font-size: 9px !important; padding: 1px 6px !important; }
html:not(.pcs-on) #discount-breakdown.m-two .timeline-period > p strong { font-size: 13.5px !important; }
html:not(.pcs-on) #discount-breakdown.m-two .timeline-period > p[style] { font-size: 10.5px !important; }
html:not(.pcs-on) #discount-breakdown.m-two .timeline-period li { font-size: 10.5px !important; line-height: 1.45; }
html:not(.pcs-on) #discount-breakdown.m-two .timeline-period li > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html:not(.pcs-on) #discount-breakdown.m-two .compact-summary-list li { font-size: 11px !important; }
html:not(.pcs-on) #discount-breakdown.m-two .summary-total strong { font-size: 14px !important; }
@media (min-width: 600px) {
  html:not(.pcs-on) #discount-breakdown.m-two { gap: 14px !important; }
  html:not(.pcs-on) #discount-breakdown.m-two .breakdown-card { padding: 14px !important; }
  html:not(.pcs-on) #discount-breakdown.m-two .breakdown-card h4 { font-size: 15px !important; }
  html:not(.pcs-on) #discount-breakdown.m-two .total-cost-section strong, html:not(.pcs-on) #discount-breakdown.m-two .total-cost-section strong span { font-size: 22px !important; }
  html:not(.pcs-on) #discount-breakdown.m-two .timeline-period li { font-size: 12px !important; }
}
/* 인터넷 결과 카드(compact) */
html:not(.pcs-on) .breakdown-card.compact .compact-summary-list { list-style: none !important; padding: 0 !important; margin: 0 !important; }
html:not(.pcs-on) .breakdown-card.compact .compact-summary-list li { display: flex; justify-content: space-between; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--mp-line); font-size: 12.5px; color: var(--mp-muted); }
html:not(.pcs-on) .breakdown-card.compact .compact-summary-list li strong, html:not(.pcs-on) .breakdown-card.compact .compact-summary-list li span:last-child { color: var(--mp-ink); font-weight: 500; font-variant-numeric: tabular-nums; }
html:not(.pcs-on) .breakdown-card.compact .compact-summary-total hr { display: none; }
html:not(.pcs-on) .breakdown-card.compact .summary-total { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin: 10px 0 0; padding: 10px 12px; background: var(--mp-hero); border-radius: 8px; font-size: 12.5px; color: var(--mp-muted); }
html:not(.pcs-on) .breakdown-card.compact .summary-total strong { color: var(--mp-accent) !important; font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; }
html:not(.pcs-on) .breakdown-card.compact .mobile-discount-details { margin-top: 8px; }
html:not(.pcs-on) .breakdown-card.compact .mobile-discount-breakdown { list-style: none; padding: 4px 4px 0; margin: 0; font-size: 11px; color: var(--mp-muted); }
html:not(.pcs-on) .breakdown-card.compact .mobile-discount-note { font-size: 10.5px; color: var(--mp-muted); }
/* 월별 상세 펼침 · 안내 줄 · 표 */
html:not(.pcs-on) .monthly-detail-toggle-wrapper { text-align: left !important; margin-top: 12px !important; }
html:not(.pcs-on) .monthly-detail-toggle-button { display: flex !important; align-items: center; gap: 8px; width: 100%; padding: 13px 16px !important; margin: 0 !important; border: 1px solid var(--mp-line) !important; border-radius: var(--radius) !important; background: var(--mp-paper) !important; color: var(--mp-accent) !important; font-size: 14px !important; font-weight: 600 !important; box-shadow: none !important; text-align: left; }
html:not(.pcs-on) .monthly-detail-toggle-button .monthly-detail-toggle-icon { display: none !important; }
html:not(.pcs-on) .monthly-detail-toggle-button .monthly-detail-toggle-chevron { margin-left: auto; color: var(--mp-muted); }
html:not(.pcs-on) #proration-info { text-align: left !important; font-size: 11.5px !important; color: var(--mp-muted) !important; margin: 10px 0 0 !important; }
html:not(.pcs-on) .monthly-table-wrapper { border: 1px solid var(--mp-line); border-radius: var(--radius); overflow: hidden; margin-top: 12px !important; }
html:not(.pcs-on) .monthly-table th, html:not(.pcs-on) .monthly-table td { font-size: 11.5px !important; padding: 8px 6px !important; font-variant-numeric: tabular-nums; }
html:not(.pcs-on) #installation-fee-display:not(:empty) { margin-top: 12px !important; padding: 12px 14px; background: var(--mp-paper); border: 1px solid var(--mp-line); border-radius: var(--radius); font-size: 12.5px; color: var(--mp-muted); }
html:not(.pcs-on) #installation-fee-display strong { color: var(--mp-ink); }
html:not(.pcs-on) #bundle-warning-display { background: var(--mp-soft) !important; color: var(--mp-accent) !important; border: 1px solid var(--mp-soft) !important; border-radius: 8px !important; font-size: 12.5px !important; text-align: left !important; }

/* ── 인터넷: 진입 화면(카드 2장 = 상황 상자 없이 바로) · 단독/비교 구분 알약 · 통신사 큰 버튼 · 토글 줄 ── */
html:not(.pcs-on) #calculator-choice-wrapper .m-sits-head { margin-bottom: 12px; }
html:not(.pcs-on) .choice-grid .choice-card.hot { grid-column: 1 / -1; min-height: 0 !important; background: var(--mp-dark) !important; border-color: var(--mp-dark) !important; }
html:not(.pcs-on) .choice-grid .choice-card.hot .card-info strong { color: #f1eee5 !important; }
html:not(.pcs-on) .choice-grid .choice-card.hot .m-kicker, html:not(.pcs-on) .choice-grid .choice-card.hot .m-desc { color: #c9cdc4 !important; }
html:not(.pcs-on) .choice-grid .choice-card.hot::after { color: #f2a37a; }
html:not(.pcs-on) body.dark-mode .choice-grid .choice-card.hot { background: #0f1411 !important; border-color: #2a302b !important; }
html:not(.pcs-on) .choice-grid .choice-card .m-desc { display: block; }
html:not(.pcs-on) .choice-grid.centered { grid-template-columns: 1fr 1fr !important; }
html:not(.pcs-on) .view-mode-buttons { display: grid !important; grid-template-columns: 1fr 1fr; gap: 0 !important; margin: 0 0 14px !important; padding: 3px !important; border: 1px solid var(--mp-line); border-radius: 8px; background: var(--mp-bg); }
html:not(.pcs-on) .view-mode-buttons button { height: 42px !important; margin: 0 !important; border: 0 !important; border-radius: 6px !important; background: transparent !important; color: var(--mp-muted) !important; font-size: 14px !important; font-weight: 600 !important; box-shadow: none !important; }
html:not(.pcs-on) .view-mode-buttons button.active, html:not(.pcs-on) .view-mode-buttons button.on, html:not(.pcs-on) .view-mode-buttons button[aria-selected="true"] { background: var(--mp-paper) !important; color: var(--mp-ink) !important; box-shadow: inset 0 0 0 1px var(--mp-line) !important; }
html:not(.pcs-on) .carrier-buttons { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 8px !important; }
html:not(.pcs-on) .carrier-buttons button { height: 50px !important; margin: 0 !important; border: 1px solid var(--mp-line) !important; border-radius: 8px !important; background: var(--mp-paper) !important; color: var(--mp-muted) !important; font-size: 16px !important; font-weight: 800 !important; letter-spacing: -.4px; box-shadow: none !important; }
html:not(.pcs-on) .carrier-buttons button.active, html:not(.pcs-on) .carrier-buttons button.selected, html:not(.pcs-on) .carrier-buttons button.on, html:not(.pcs-on) .carrier-buttons button[aria-pressed="true"] { border-color: var(--mp-accent) !important; background: var(--mp-soft) !important; color: var(--mp-accent) !important; box-shadow: inset 0 0 0 1px var(--mp-accent) !important; }
html:not(.pcs-on) .carrier-label { display: flex !important; align-items: center; gap: 8px; }
html:not(.pcs-on) .wizard-calc-link.coverage { margin-left: auto !important; font-size: 11px !important; font-weight: 700 !important; color: var(--mp-accent) !important; background: var(--mp-soft) !important; border: 0 !important; border-radius: 999px !important; padding: 3px 9px !important; }
html:not(.pcs-on) .toggle-button { display: flex !important; align-items: center; justify-content: space-between; width: 100%; min-height: 46px; margin: 10px 0 0 !important; padding: 0 14px !important; border: 1px solid var(--mp-line) !important; border-radius: 8px !important; background: var(--mp-bg) !important; color: var(--mp-ink) !important; font-size: 13.5px !important; font-weight: 600 !important; text-align: left; box-shadow: none !important; }
html:not(.pcs-on) .toggle-button.active, html:not(.pcs-on) .toggle-button.on, html:not(.pcs-on) .toggle-button[aria-pressed="true"] { border-color: var(--mp-accent) !important; background: var(--mp-soft) !important; color: var(--mp-accent) !important; }
html:not(.pcs-on) .picker-trigger, html:not(.pcs-on) .radio-picker-trigger, html:not(.pcs-on) .select-trigger { border: 1px solid var(--mp-line) !important; border-radius: 8px !important; background: var(--mp-bg) !important; color: var(--mp-ink) !important; box-shadow: none !important; }

/* ── 단말기 정보: 페이지 머리 · 탭 · 검색/구분 알약 · 기기 목록 · 지원금/자급제 상자 ── */
html:not(.pcs-on) .m-page-head { padding: 10px 0 4px; }
html:not(.pcs-on) .m-page-head .kicker { display: block; font-size: 11.5px; font-weight: 700; color: var(--mp-accent); letter-spacing: .4px; margin-bottom: 6px; }
html:not(.pcs-on) .m-page-head h1 { margin: 0 0 6px; font-size: 24px; line-height: 1.3; letter-spacing: -.8px; font-weight: 600; color: var(--mp-ink); }
html:not(.pcs-on) .m-page-head p { margin: 0; font-size: 13px; color: var(--mp-muted); }
html:not(.pcs-on) #devices-root .dev-tabs { display: grid !important; grid-template-columns: repeat(3, 1fr); margin: 12px 0 0 !important; border-bottom: 1px solid var(--mp-line); }
html:not(.pcs-on) #devices-root .dev-tabs button { display: flex !important; flex-direction: column; align-items: center; gap: 2px; margin: 0 !important; padding: 10px 4px 9px !important; border: 0 !important; border-bottom: 2px solid transparent !important; border-radius: 0 !important; background: transparent !important; color: var(--mp-muted) !important; font: inherit; font-size: 13.5px !important; font-weight: 600 !important; letter-spacing: -.3px; box-shadow: none !important; }
html:not(.pcs-on) #devices-root .dev-tabs button small { font-size: 10px !important; font-weight: 400 !important; color: var(--mp-muted) !important; white-space: nowrap; }
html:not(.pcs-on) #devices-root .dev-tabs button.on { color: var(--mp-accent) !important; border-bottom-color: var(--mp-accent) !important; }
html:not(.pcs-on) #devices-root .dev-tabs button.on small { color: var(--mp-accent) !important; }
html:not(.pcs-on) #devices-root .dev-panel { padding-top: 12px; }
html:not(.pcs-on) #dev-mount .dev-tools { display: flex; flex-direction: column; gap: 10px; }
html:not(.pcs-on) #dev-mount .spb-searchwrap { margin: 0 !important; padding: 0 !important; }
html:not(.pcs-on) #dev-mount .spb-search, html:not(.pcs-on) .sbsd-searchwrap input, html:not(.pcs-on) .unlk-searchwrap input, html:not(.pcs-on) .unlk-search { height: 44px !important; padding: 0 14px !important; border: 1px solid var(--mp-line) !important; border-radius: 8px !important; background: var(--mp-paper) !important; color: var(--mp-ink) !important; font-size: 13.5px !important; box-shadow: none !important; }
html:not(.pcs-on) #dev-mount .spb-seg, html:not(.pcs-on) .sbsd-tabs, html:not(.pcs-on) .unlk-seg { display: flex !important; gap: 6px !important; overflow-x: auto; scrollbar-width: none; margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; flex-wrap: nowrap !important; }
html:not(.pcs-on) #dev-mount .spb-seg::-webkit-scrollbar, html:not(.pcs-on) .sbsd-tabs::-webkit-scrollbar, html:not(.pcs-on) .unlk-seg::-webkit-scrollbar { display: none; }
html:not(.pcs-on) #dev-mount .spb-seg button, html:not(.pcs-on) .sbsd-tab, html:not(.pcs-on) .unlk-seg button, html:not(.pcs-on) .cmp82-toggle { flex: none !important; height: 34px !important; padding: 0 13px !important; margin: 0 !important; border: 1px solid var(--mp-line) !important; border-radius: 999px !important; background: var(--mp-paper) !important; color: var(--mp-muted) !important; font-size: 12.5px !important; font-weight: 600 !important; box-shadow: none !important; }
html:not(.pcs-on) #dev-mount .spb-seg button.spb-on, html:not(.pcs-on) .sbsd-tab.sbsd-on, html:not(.pcs-on) .sbsd-tab.active, html:not(.pcs-on) .unlk-seg button.unlk-on, html:not(.pcs-on) .cmp82-toggle.on, html:not(.pcs-on) .cmp82-toggle.active { background: var(--mp-accent) !important; border-color: var(--mp-accent) !important; color: var(--mp-on-accent) !important; }
html:not(.pcs-on) #dev-mount .spb-body { padding: 4px 0 0 !important; overflow: visible !important; overscroll-behavior: auto !important; }   /* v11.6 페이지 안에 옮겨 온 목록은 스크롤 상자가 아니어야 한다 — overflow:auto+overscroll-behavior:contain 인 채로 두면 안드로이드 터치 스크롤이 이 상자에 걸려(넘치지 않는데도) 문서로 안 번져 화면이 안 내려갔다(사장님 09-19 앱 「단말기 정보 스크롤 안 됨」, 마우스 휠은 다른 경로라 PC 는 멀쩡) */
html:not(.pcs-on) .spb-series, html:not(.pcs-on) .sbsd-series, html:not(.pcs-on) .unlk-series { margin: 14px 0 6px !important; padding: 0 !important; font-size: 12px !important; font-weight: 700 !important; color: var(--mp-muted) !important; background: transparent !important; border: 0 !important; }
html:not(.pcs-on) .spb-card { display: grid !important; grid-template-columns: 56px 1fr auto; gap: 12px !important; align-items: center; padding: 12px 14px !important; margin: 0 0 10px !important; background: var(--mp-paper) !important; border: 1px solid var(--mp-line) !important; border-radius: var(--radius) !important; box-shadow: none !important; }
html:not(.pcs-on) .spb-thumb { width: 56px !important; height: 66px !important; padding: 5px; object-fit: contain; border-radius: 8px !important; background: var(--mp-hero) !important; border: 1px solid var(--mp-line) !important; }
html:not(.pcs-on) .spb-nm { font-size: 14.5px !important; font-weight: 600 !important; color: var(--mp-ink) !important; }
html:not(.pcs-on) .spb-nm small { display: block; font-size: 11.5px !important; color: var(--mp-muted) !important; margin-top: 2px; font-weight: 400; }
html:not(.pcs-on) .spb-go { font-size: 11.5px !important; font-weight: 700 !important; color: var(--mp-accent) !important; white-space: nowrap; }
html:not(.pcs-on) .spb-foot { font-size: 11.5px !important; color: var(--mp-muted) !important; padding: 12px 0 0 !important; border: 0 !important; background: transparent !important; }
/* 지원금·자급제 상자(팝업 상자를 페이지 안으로 옮긴 것) */
html:not(.pcs-on) .dev-inline.sbsd-modal, html:not(.pcs-on) .dev-inline.unlk-modal { max-width: none !important; max-height: none !important; border: 1px solid var(--mp-line) !important; border-radius: var(--radius) !important; background: var(--mp-paper) !important; box-shadow: none !important; color: var(--mp-ink) !important; }
html:not(.pcs-on) .dev-inline .sbsd-head, html:not(.pcs-on) .dev-inline .unlk-head { text-align: left !important; padding: 14px 16px 10px !important; border-bottom: 1px solid var(--mp-line) !important; background: transparent !important; }
html:not(.pcs-on) .dev-inline .sbsd-head h2, html:not(.pcs-on) .dev-inline .unlk-head h2 { font-size: 16px !important; font-weight: 600 !important; color: var(--mp-ink) !important; letter-spacing: -.4px; }
html:not(.pcs-on) .dev-inline .sbsd-date, html:not(.pcs-on) .dev-inline .sbsd-upd, html:not(.pcs-on) .dev-inline .unlk-upd { color: var(--mp-accent) !important; }
html:not(.pcs-on) .dev-inline .sbsd-sub, html:not(.pcs-on) .dev-inline .unlk-sub, html:not(.pcs-on) .dev-inline .sbsd-tmeta, html:not(.pcs-on) .dev-inline .unlk-hint { color: var(--mp-muted) !important; }
html:not(.pcs-on) .dev-inline .sbsd-close, html:not(.pcs-on) .dev-inline .unlk-close { display: none !important; }
html:not(.pcs-on) .dev-inline .sbsd-typeseg { width: auto !important; margin: 12px 16px 0 !important; border: 1px solid var(--mp-line) !important; border-radius: 8px !important; background: var(--mp-bg) !important; padding: 3px; }
html:not(.pcs-on) .dev-inline .sbsd-typeseg button { border: 0 !important; border-radius: 6px !important; background: transparent !important; color: var(--mp-muted) !important; font-size: 12.5px !important; padding: 9px 0 !important; }
html:not(.pcs-on) .dev-inline .sbsd-typeseg button.sbsd-on { background: var(--mp-paper) !important; color: var(--mp-ink) !important; box-shadow: inset 0 0 0 1px var(--mp-line) !important; }
html:not(.pcs-on) .dev-inline .sbsd-tabs, html:not(.pcs-on) .dev-inline .unlk-seg { padding: 12px 16px 0 !important; border-bottom: 0 !important; }
html:not(.pcs-on) .dev-inline .sbsd-searchwrap, html:not(.pcs-on) .dev-inline .unlk-searchwrap { margin: 12px 16px 0 !important; }
html:not(.pcs-on) .dev-inline .sbsd-body, html:not(.pcs-on) .dev-inline .unlk-body { padding: 8px 16px 14px !important; max-height: none !important; overflow: visible !important; }
html:not(.pcs-on) .dev-inline .sbsd-thead, html:not(.pcs-on) .dev-inline .unlk-thead { color: var(--mp-muted) !important; background: transparent !important; border: 0 !important; }
html:not(.pcs-on) .dev-inline .sbsd-thead span, html:not(.pcs-on) .dev-inline .unlk-thead span { color: var(--mp-muted) !important; }
html:not(.pcs-on) .dev-inline .sbsd-trow, html:not(.pcs-on) .dev-inline .unlk-row, html:not(.pcs-on) .dev-inline .unlk-gcard, html:not(.pcs-on) .dev-inline .unlk-caprow { background: var(--mp-bg) !important; border: 1px solid var(--mp-line) !important; border-radius: 10px !important; box-shadow: none !important; color: var(--mp-ink) !important; }
html:not(.pcs-on) .dev-inline .sbsd-tname, html:not(.pcs-on) .dev-inline .unlk-nm, html:not(.pcs-on) .dev-inline .unlk-gnm { color: var(--mp-ink) !important; }
html:not(.pcs-on) .dev-inline .sbsd-tamt, html:not(.pcs-on) .dev-inline .sbsd-tamt small { color: var(--mp-ink) !important; }
html:not(.pcs-on) .dev-inline .sbsd-amt, html:not(.pcs-on) .dev-inline .unlk-p, html:not(.pcs-on) .dev-inline .sbsd-fac { color: var(--mp-accent) !important; }
html:not(.pcs-on) .dev-inline .sbsd-amt.sbsd-none { color: var(--mp-line) !important; }
html:not(.pcs-on) .dev-inline .sbsd-new, html:not(.pcs-on) .dev-inline .unlk-diff { color: var(--mp-accent) !important; background: var(--mp-soft) !important; border-radius: 999px; }
html:not(.pcs-on) .dev-inline .sbsd-specbtn, html:not(.pcs-on) .dev-inline .sbsd-histbtn, html:not(.pcs-on) .dev-inline .unlk-gbtn, html:not(.pcs-on) .dev-inline .unlk-sortbtn { border: 1px solid var(--mp-line) !important; border-radius: 999px !important; background: var(--mp-paper) !important; color: var(--mp-accent) !important; font-weight: 700 !important; box-shadow: none !important; }
html:not(.pcs-on) .dev-inline .sbsd-lgnd, html:not(.pcs-on) .dev-inline .sbsd-foot, html:not(.pcs-on) .dev-inline .unlk-foot { color: var(--mp-muted) !important; background: transparent !important; border-color: var(--mp-line) !important; }
html:not(.pcs-on) .dev-inline .sbsd-load, html:not(.pcs-on) .dev-inline .unlk-empty, html:not(.pcs-on) .dev-inline .spb-empty { color: var(--mp-muted) !important; }
/* 허브 화면: 로고·제목이 다 숨은 빈 머리띠(.page-header 60px)까지 걷어 첫 화면을 위로 붙임 */
html:not(.pcs-on) body.m-choice .page-header { display: none !important; }
html:not(.pcs-on) body.m-choice #calculator-choice-wrapper { padding-top: 6px !important; }
html:not(.pcs-on) body.m-calc .page-header { padding: 12px 0 6px !important; }
/* v2.1 보정: 입력 머리 왼쪽 정렬 · 남은 파랑(결합/복지 상자, 지원금 알약, 펼침 화살표) · 비교 입력은 폰에서 위아래로 쌓고 A|B 붙박이 탭으로 오감(시안 compare-in) */
html:not(.pcs-on) body.m-calc .page-header, html:not(.pcs-on) body.m-calc .header-content, html:not(.pcs-on) body.m-calc .header-info { text-align: left !important; align-items: flex-start !important; }
html:not(.pcs-on) body.m-calc .header-action-buttons { justify-content: flex-start !important; margin-top: 10px; }
html:not(.pcs-on) .discount-type-group-highlight, html:not(.pcs-on) .input-group.discount-type-group-highlight { background: var(--mp-hero) !important; border-color: var(--mp-line) !important; box-shadow: none !important; }
html:not(.pcs-on) .subsidy-chip, html:not(.pcs-on) .subsidy-chip--inline { background: var(--mp-soft) !important; color: var(--mp-accent) !important; border: 0 !important; border-radius: 999px !important; font-weight: 700 !important; }
html:not(.pcs-on) .kt-chev { color: var(--mp-muted) !important; }
html:not(.pcs-on) .main-content b[style*="7c3aed"], html:not(.pcs-on) .main-content b[style*="124, 58, 237"] { color: var(--mp-accent) !important; }
html:not(.pcs-on) .m-ab { position: sticky; top: 56px; z-index: 15; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; width: 100%; flex: 0 0 100%; margin: 0 0 12px; padding: 4px; background: var(--mp-hero); border: 1px solid var(--mp-line); border-radius: 10px; }
html:not(.pcs-on) .m-ab[hidden] { display: none !important; }
html:not(.pcs-on) .m-ab button { display: grid; grid-template-columns: 22px 1fr; column-gap: 8px; align-items: center; height: 46px; padding: 0 10px; border: 0; border-radius: 7px; background: transparent; color: var(--mp-muted); font: inherit; font-size: 13.5px; font-weight: 600; text-align: left; line-height: 1.15; }
html:not(.pcs-on) .m-ab button i { font-style: normal; width: 22px; height: 22px; border-radius: 6px; background: var(--mp-line); color: var(--mp-ink); font-size: 11px; font-weight: 800; display: grid; place-items: center; }
html:not(.pcs-on) .m-ab button small { display: block; font-size: 10.5px; font-weight: 500; color: var(--mp-muted); margin-top: 1px; }
html:not(.pcs-on) .m-ab button.on { background: var(--mp-paper); color: var(--mp-ink); box-shadow: 0 1px 4px #00000012; }
html:not(.pcs-on) .m-ab button.on i { background: var(--mp-accent); color: var(--mp-on-accent); }
html:not(.pcs-on) body.m-calc .main-content > .section > h3[data-ab]::before { content: attr(data-ab) !important; display: inline-grid !important; place-items: center; width: 20px !important; height: 20px !important; border-radius: 6px !important; background: var(--mp-accent) !important; color: var(--mp-on-accent) !important; font-size: 11px !important; align-self: center; }
@media (max-width: 599px) {
  html:not(.pcs-on) body.m-ab-on #main-calculator-content-wrapper { flex-direction: column !important; flex-wrap: nowrap !important; }
  html:not(.pcs-on) body.m-ab-on #main-calculator-content-wrapper > .section { width: 100% !important; max-width: none !important; flex: 0 0 auto !important; margin-left: 0 !important; margin-right: 0 !important; scroll-margin-top: 124px; }
}
@media (min-width: 600px) { html:not(.pcs-on) .m-ab { display: none !important; } }
/* v2.3 — 시안 calc.html 그대로: 위 작은 머리(m-sub-top) · 진행 막대(m-steps) · 카드 3장(m-card 01/02/03, 03은 접힘) · 바닥 바 요약 줄(sum). m-calc.js v2.2 */
html:not(.pcs-on) body.m-calc #main-calculator-content-wrapper { overflow: visible !important; }   /* overflow:auto 가 A|B 붙박이를 가두고 56px 밀어 내리던 것 */
html:not(.pcs-on) .m-sub-top { display: flex; align-items: center; gap: 10px; min-height: 44px; margin: 0 0 8px; }
html:not(.pcs-on) .m-sub-top[hidden] { display: none !important; }
html:not(.pcs-on) .m-sub-top .back { width: 36px !important; height: 36px !important; padding: 0 !important; border-radius: 50% !important; border: 1px solid var(--mp-line) !important; background: var(--mp-paper) !important; color: var(--mp-ink) !important; font-size: 20px !important; line-height: 1 !important; display: grid !important; place-items: center; flex: none; margin: 0 !important; }
html:not(.pcs-on) .m-sub-top .t { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
html:not(.pcs-on) .m-sub-top .t b { font-size: 15.5px; font-weight: 600; letter-spacing: -.3px; color: var(--mp-ink); }
html:not(.pcs-on) .m-sub-top .crumb { font-size: 11px; color: var(--mp-muted); }
html:not(.pcs-on) .m-sub-top .right { margin-left: auto; display: flex; gap: 6px; }
html:not(.pcs-on) .m-sub-top .calc-reset-card-btn { position: static !important; height: 32px !important; padding: 0 12px !important; margin: 0 !important; }
html:not(.pcs-on) .m-hide { display: none !important; }
html:not(.pcs-on) body.m-calc .header-action-buttons { display: none !important; }   /* 뒤로·일할 버튼은 각각 작은 머리·바닥 바로 옮겨졌다 */
html:not(.pcs-on) .m-steps { display: flex; gap: 6px; padding: 12px 0 0; }
html:not(.pcs-on) .m-steps[hidden] { display: none !important; }
html:not(.pcs-on) .m-steps span { flex: 1; height: 4px; border-radius: 2px; background: var(--mp-line); transition: background .2s; }
html:not(.pcs-on) .m-steps span.on { background: var(--mp-accent); }
html:not(.pcs-on) body.m-calc .page-header { margin-bottom: 0 !important; }
/* 단독 모드: 섹션 껍데기는 투명, 카드 3장이 곧 화면 */
html:not(.pcs-on) body.m-calc:not(.m-ab-on) #main-calculator-content-wrapper > .section { background: transparent !important; border: 0 !important; padding: 0 !important; margin: 0 !important; box-shadow: none !important; }
html:not(.pcs-on) body.m-calc:not(.m-ab-on) #main-calculator-content-wrapper > .section > h3 { display: none !important; }
html:not(.pcs-on) .m-card { margin: 14px 0 0; padding: 16px; background: var(--mp-paper); border: 1px solid var(--mp-line); border-radius: var(--radius); }
html:not(.pcs-on) .m-card .m-ch { display: flex; align-items: baseline; gap: 8px; margin: 0 0 4px; font-size: 16px; font-weight: 600; letter-spacing: -.4px; color: var(--mp-ink); }
html:not(.pcs-on) .m-card .m-ch i { font-style: normal; font-size: 11.5px; font-weight: 800; color: var(--mp-accent); }
html:not(.pcs-on) .m-card .help { margin: 0 0 12px; font-size: 12px; color: var(--mp-muted); }
html:not(.pcs-on) .m-card .body > .input-group:first-child, html:not(.pcs-on) .m-card .body > .device-payment-row:first-child { margin-top: 0 !important; }
html:not(.pcs-on) .m-card .body:empty { display: none; }
html:not(.pcs-on) .m-card .m-dbox { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; margin: 0; border: 1px solid var(--mp-line); border-radius: 8px; background: var(--mp-bg); font: inherit; text-align: left; color: var(--mp-ink); }
html:not(.pcs-on) .m-card .m-dbox .ic { font-size: 20px; }
html:not(.pcs-on) .m-card .m-dbox .tx { flex: 1; min-width: 0; }
html:not(.pcs-on) .m-card .m-dbox .tx strong { display: block; font-size: 14.5px; font-weight: 600; }
html:not(.pcs-on) .m-card .m-dbox .tx span { display: block; font-size: 12px; color: var(--mp-muted); margin-top: 2px; }
html:not(.pcs-on) .m-card .m-dbox .go { color: var(--mp-accent); font-weight: 700; font-size: 12.5px; white-space: nowrap; }
html:not(.pcs-on) .m-c3 .body { display: none; margin-top: 12px; }
html:not(.pcs-on) .m-c3.open .body { display: block; }
html:not(.pcs-on) .m-c3.open .m-dbox { border-color: var(--mp-accent); }
/* 비교 모드(A|B): 섹션이 곧 한 쪽. 카드는 테두리 없이 구분선만 */
html:not(.pcs-on) body.m-ab-on .m-card { margin: 12px 0 0; padding: 12px 0 0; border: 0; border-top: 1px dashed var(--mp-line); border-radius: 0; background: transparent; }
html:not(.pcs-on) body.m-ab-on .m-c1 { border-top: 0; padding-top: 0; margin-top: 4px; }
html:not(.pcs-on) body.m-ab-on .m-card .m-ch { font-size: 13.5px; }
html:not(.pcs-on) body.m-ab-on .m-card .help { display: none; }
/* 바닥 바 요약 줄 · 좁은 폰에서 버튼 글자 안 접히게 */
html:not(.pcs-on) .m-cta .sum { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 auto 8px; max-width: 640px; font-size: 11.5px; color: var(--mp-muted); }
html:not(.pcs-on) .m-cta .sum[hidden] { display: none !important; }
html:not(.pcs-on) .m-cta .sum b { color: var(--mp-ink); font-weight: 600; }
html:not(.pcs-on) .m-cta .calc { white-space: nowrap; font-size: 14.5px; }
html:not(.pcs-on) .m-cta .prorate-button { padding: 0 10px !important; font-size: 12px !important; }
html:not(.pcs-on) body.m-calc { padding-bottom: calc(160px + env(safe-area-inset-bottom)) !important; }
/* v2.4 보정: 머리 여백(h1 위 40px) · 12/24개월 토글 파랑 · 강조 b 보라 · 좁은 폰(≤400)에서 구매가/납부 방식 줄 세로로 */
html:not(.pcs-on) body.m-calc .header-info h1 { margin-top: 0 !important; }
html:not(.pcs-on) body.m-calc .header-info { padding-top: 4px !important; }
html:not(.pcs-on) #storeContractDurationGroup .payment-button.active, html:not(.pcs-on) #storeContractDurationGroup-b .payment-button.active, html:not(.pcs-on) #seonyakDurationGroupStore .payment-button.active,
html:not(.pcs-on) .section [id*="Duration"] .payment-button.active, html:not(.pcs-on) .section .payment-button.active { background: var(--mp-soft) !important; color: var(--mp-accent) !important; border-color: var(--mp-accent) !important; box-shadow: inset 0 0 0 1px var(--mp-accent) !important; }
html:not(.pcs-on) .main-content b[style], html:not(.pcs-on) .main-content strong[style*="color"] { color: var(--mp-accent) !important; }
@media (max-width: 400px) {
  html:not(.pcs-on) .device-payment-row { flex-wrap: wrap !important; }
  html:not(.pcs-on) .device-payment-row > .input-group { flex: 1 1 100% !important; width: 100% !important; max-width: none !important; }
}
/* v2.5: 진행 막대가 header-content(가운데 정렬 flex) 안에서 폭 0 이던 것 */
html:not(.pcs-on) .m-steps { width: 100%; align-self: stretch; }
html:not(.pcs-on) .m-card .body > .device-payment-row { margin-bottom: 0 !important; }
/* ═══ 구매하는 단말기(m-device.js) — 시안 calc.html 의 .m-device · .m-pricebox · 바텀시트 ═══ */
html:not(.pcs-on) .m-devfield { margin: 4px 0 12px; }
html:not(.pcs-on) .m-devfield .m-label { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--mp-muted); margin: 0 0 8px; }
html:not(.pcs-on) .m-devfield .m-label .right { margin-left: auto; font-size: 11px; color: var(--mp-accent); font-weight: 700; background: var(--mp-soft); border-radius: 999px; padding: 3px 9px; }
html:not(.pcs-on) .m-device { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; border: 1px solid var(--mp-line); border-radius: 8px; background: var(--mp-bg); font: inherit; text-align: left; color: var(--mp-ink); }
html:not(.pcs-on) .m-device.set { border-color: var(--mp-accent); background: var(--mp-paper); }
html:not(.pcs-on) .m-device .thumb { width: 44px; height: 54px; flex: none; border-radius: 6px; background: var(--mp-paper); border: 1px solid var(--mp-line); display: grid; place-items: center; overflow: hidden; font-size: 20px; }
html:not(.pcs-on) .m-device .thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }
html:not(.pcs-on) .m-device .tx { flex: 1; min-width: 0; }
html:not(.pcs-on) .m-device .tx strong { display: block; font-size: 15px; font-weight: 600; letter-spacing: -.3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html:not(.pcs-on) .m-device:not(.set) .tx strong { font-size: 14px; font-weight: 500; color: var(--mp-muted); }
html:not(.pcs-on) .m-device .tx span { display: block; font-size: 12px; color: var(--mp-muted); margin-top: 2px; }
html:not(.pcs-on) .m-device .go { font-size: 12.5px; color: var(--mp-accent); font-weight: 700; white-space: nowrap; }
html:not(.pcs-on) .m-pricebox { margin: 0 0 8px; padding: 10px 12px; border: 1px solid var(--mp-line); border-radius: 8px; background: var(--mp-hero); font-size: 12.5px; }
html:not(.pcs-on) .m-pricebox[hidden] { display: none !important; }
html:not(.pcs-on) .m-pricebox .row { display: flex; justify-content: space-between; gap: 8px; padding: 2px 0; color: var(--mp-muted); }
html:not(.pcs-on) .m-pricebox .row b { color: var(--mp-ink); font-weight: 600; font-variant-numeric: tabular-nums; }
html:not(.pcs-on) .m-pricebox .row b.dim { color: var(--mp-muted); font-weight: 500; }
html:not(.pcs-on) .m-pricebox .cut { display: flex; align-items: center; gap: 8px; margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--mp-line); color: #1f6f3f; font-weight: 700; }
html:not(.pcs-on) .m-pricebox .cut b { margin-left: auto; font-variant-numeric: tabular-nums; }
html:not(.pcs-on) .m-pricebox .cut em { font-style: normal; font-size: 11px; background: #e6f4ea; border-radius: 999px; padding: 2px 8px; }
html:not(.pcs-on) body.dark-mode .m-pricebox .cut { color: #7fd39a; }
html:not(.pcs-on) body.dark-mode .m-pricebox .cut em { background: #23362a; }
html:not(.pcs-on) .m-pricebox .cut.bad { color: var(--mp-accent); }
html:not(.pcs-on) .m-pricebox .cut.bad em { background: var(--mp-soft); color: var(--mp-accent); }
/* 바텀시트 */
html:not(.pcs-on) .m-devsheet { position: fixed; inset: 0; z-index: 1200; }
html:not(.pcs-on) .m-devsheet[hidden] { display: none !important; }
html:not(.pcs-on) .m-devsheet .dim { position: absolute; inset: 0; background: #11130f66; }
html:not(.pcs-on) .m-devsheet .panel { position: absolute; left: 0; right: 0; bottom: 0; max-height: 88vh; display: flex; flex-direction: column; background: var(--mp-paper); color: var(--mp-ink); border-radius: 16px 16px 0 0; box-shadow: 0 -12px 40px #00000033; animation: m-up .22s ease-out; }
@keyframes m-up { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
/* 09-20 사장님 「태블릿 가로에서 단말기 고르면 옆으로 슥 갔다가 돌아온다」 — 가운데 정렬을 transform:translateX(-50%) 로 했는데
   등장 애니메이션(m-up)이 transform 을 translateY 로 덮어서 0.22초 동안 오른쪽으로 밀렸다가 끝나면 제자리로 튀었다.
   v10.5 의 다른 애니메이션처럼 transform 은 애니메이션에 맡기고, 가운데는 margin 으로 잡는다. */
@media (min-width: 600px) { html:not(.pcs-on) .m-devsheet .panel { left: 0; right: 0; margin: 0 auto; width: 560px; transform: none; border-radius: 16px; bottom: 24px; } }
html:not(.pcs-on) .m-devsheet .head { display: flex; align-items: center; gap: 8px; padding: 14px 14px 10px; border-bottom: 1px solid var(--mp-line); }
html:not(.pcs-on) .m-devsheet .head .t { flex: 1; min-width: 0; line-height: 1.2; }
html:not(.pcs-on) .m-devsheet .head b { display: block; font-size: 16px; font-weight: 600; }
html:not(.pcs-on) .m-devsheet .head .sub { display: block; font-size: 11.5px; color: var(--mp-muted); margin-top: 2px; }
html:not(.pcs-on) .m-devsheet .head .x, html:not(.pcs-on) .m-devsheet .head .back { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--mp-line); background: var(--mp-paper); color: var(--mp-ink); font: inherit; font-size: 20px; line-height: 1; display: grid; place-items: center; }
html:not(.pcs-on) .m-devsheet .head .back[hidden] { display: none; }
html:not(.pcs-on) .m-devsheet .tools { padding: 10px 14px 0; }
html:not(.pcs-on) .m-devsheet .tools[hidden] { display: none; }
html:not(.pcs-on) .m-devsheet .q { width: 100%; height: 42px; padding: 0 12px; border: 1px solid var(--mp-line) !important; border-radius: 8px !important; background: var(--mp-bg) !important; color: var(--mp-ink) !important; font: inherit; font-size: 13.5px; }
html:not(.pcs-on) .m-devsheet .chips { display: flex; gap: 6px; margin-top: 8px; overflow-x: auto; scrollbar-width: none; }
html:not(.pcs-on) .m-devsheet .chips button { flex: none; height: 32px; padding: 0 12px; border: 1px solid var(--mp-line); border-radius: 999px; background: var(--mp-paper); color: var(--mp-muted); font: inherit; font-size: 12.5px; font-weight: 600; }
html:not(.pcs-on) .m-devsheet .chips button.on { background: var(--mp-accent); border-color: var(--mp-accent); color: var(--mp-on-accent); }
html:not(.pcs-on) .m-devsheet .list { overflow-y: auto; padding: 10px 14px calc(14px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 8px; }
html:not(.pcs-on) .m-devsheet .dev, html:not(.pcs-on) .m-devsheet .cap { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border: 1px solid var(--mp-line); border-radius: 10px; background: var(--mp-bg); font: inherit; text-align: left; color: var(--mp-ink); }
html:not(.pcs-on) .m-devsheet .dev .thumb { width: 48px; height: 56px; flex: none; border-radius: 8px; background: var(--mp-paper); border: 1px solid var(--mp-line); display: grid; place-items: center; overflow: hidden; font-size: 20px; }
html:not(.pcs-on) .m-devsheet .dev .thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }
html:not(.pcs-on) .m-devsheet .dev .tx { flex: 1; min-width: 0; }
html:not(.pcs-on) .m-devsheet .dev strong { display: block; font-size: 14.5px; font-weight: 600; }
html:not(.pcs-on) .m-devsheet .dev strong .new { font-style: normal; font-size: 9.5px; font-weight: 800; color: var(--mp-accent); background: var(--mp-soft); border-radius: 999px; padding: 1px 6px; margin-left: 4px; vertical-align: 2px; }
html:not(.pcs-on) .m-devsheet .dev small { display: block; font-size: 11.5px; color: var(--mp-muted); margin-top: 2px; }
html:not(.pcs-on) .m-devsheet .dev .go { color: var(--mp-muted); font-size: 18px; }
html:not(.pcs-on) .m-devsheet .cap { min-height: 52px; }
html:not(.pcs-on) .m-devsheet .cap b { font-size: 15px; font-weight: 700; }
html:not(.pcs-on) .m-devsheet .cap span { margin-left: auto; color: var(--mp-accent); font-weight: 700; font-variant-numeric: tabular-nums; }
html:not(.pcs-on) .m-devsheet .pick-head { display: flex; align-items: center; gap: 12px; padding: 4px 2px 8px; }
html:not(.pcs-on) .m-devsheet .pick-head img, html:not(.pcs-on) .m-devsheet .pick-head .ph { width: 64px; height: 76px; object-fit: contain; border-radius: 8px; background: var(--mp-hero); border: 1px solid var(--mp-line); display: grid; place-items: center; font-size: 26px; }
html:not(.pcs-on) .m-devsheet .pick-head strong { display: block; font-size: 16px; font-weight: 600; }
html:not(.pcs-on) .m-devsheet .pick-head small { display: block; font-size: 11.5px; color: var(--mp-muted); margin-top: 2px; }
/* v12.2 (2026-09-20) 시트 2단계: 색상 칩·고른 색 이름·상세 스펙 펼침(m-device 1.8, PC device-pick 2단계와 같게) */
html:not(.pcs-on) .m-devsheet .pick-head .shot { width: 88px; height: 104px; transition: opacity .15s; }
html:not(.pcs-on) .m-devsheet .pick-head .cname { display: block; font-style: normal; font-size: 12.5px; font-weight: 700; color: var(--mp-accent); margin-top: 6px; }
html:not(.pcs-on) .m-devsheet .colors { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 2px 4px; }
html:not(.pcs-on) .m-devsheet .color { width: 32px; height: 32px; padding: 3px; border: 1.5px solid var(--mp-line); border-radius: 50%; background: var(--mp-paper); display: flex; }
html:not(.pcs-on) .m-devsheet .color span { flex: 1; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(37, 37, 31, .12); }
html:not(.pcs-on) .m-devsheet .color.on { border-color: var(--mp-accent); border-width: 2px; padding: 2px; }
html:not(.pcs-on) .m-devsheet .spec-title { margin: 10px 2px 0; font-size: 12.5px; font-weight: 700; color: var(--mp-muted); }
html:not(.pcs-on) .m-devsheet .spec { margin: 0; padding: 0 2px; }
html:not(.pcs-on) .m-devsheet .spec > div { display: flex; align-items: baseline; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--mp-line); }
html:not(.pcs-on) .m-devsheet .spec dt { flex: none; width: 96px; font-size: 12.5px; color: var(--mp-muted); display: flex; align-items: center; gap: 6px; }
html:not(.pcs-on) .m-devsheet .spec dt i { font-style: normal; font-size: 13px; }
html:not(.pcs-on) .m-devsheet .spec dd { margin: 0 0 0 auto; text-align: right; font-size: 13px; font-weight: 500; color: var(--mp-ink); word-break: keep-all; }
html:not(.pcs-on) .m-devsheet .spec dd small { display: block; font-size: 11px; font-weight: 400; color: var(--mp-muted); margin-top: 2px; }
html:not(.pcs-on) .m-devsheet .src { margin: 2px 2px 0; font-size: 11px; color: var(--mp-muted); line-height: 1.5; }
html:not(.pcs-on) .m-devsheet .nospec { margin: 10px 2px 0; font-size: 12.5px; color: var(--mp-muted); }
html:not(.pcs-on) .m-devsheet .note { margin: 8px 0; font-size: 12.5px; color: var(--mp-muted); text-align: center; }
html:not(.pcs-on) body.m-sheet-open { overflow: hidden; }
/* v2.7: 요금제 선택 시트(#planPickerModal)·위저드 배지 파랑 → 벽돌색 */
html:not(.pcs-on) #planPickerModal h3, html:not(.pcs-on) #planPickerModal .plan-picker-price, html:not(.pcs-on) #planPickerModal b { color: var(--mp-accent) !important; }
html:not(.pcs-on) #planPickerModal h3 { border-color: var(--mp-line) !important; }
html:not(.pcs-on) .pp-wizard-bar { background: var(--mp-hero) !important; border-color: var(--mp-line) !important; color: var(--mp-ink) !important; }
html:not(.pcs-on) .ppw-badge, html:not(.pcs-on) [class*="ppw-"] .ppw-badge, html:not(.pcs-on) .ppw-anchor, html:not(.pcs-on) .ppw-dot, html:not(.pcs-on) .ppw-num { background: var(--mp-accent) !important; color: var(--mp-on-accent) !important; border-color: var(--mp-accent) !important; }
html:not(.pcs-on) .ppw-steps span.on, html:not(.pcs-on) .ppw-steps .on, html:not(.pcs-on) .ppw-step.on { background: var(--mp-accent) !important; color: var(--mp-on-accent) !important; }
html:not(.pcs-on) .pp-filter-chip.pp-age-calc-btn { color: var(--mp-accent) !important; border-color: var(--mp-soft) !important; background: var(--mp-soft) !important; }
html:not(.pcs-on) #planPickerModal .plan-picker-item { border-color: var(--mp-line) !important; }
html:not(.pcs-on) #planPickerModal .plan-picker-item.selected, html:not(.pcs-on) #planPickerModal .plan-picker-item.active { border-color: var(--mp-accent) !important; background: var(--mp-soft) !important; }
html:not(.pcs-on) .plan-step, html:not(.pcs-on) .plan-step.ps-first, html:not(.pcs-on) .plan-step.ps-next { background: var(--mp-accent) !important; color: #fff !important; }
/* v2.8: 선택 화면 위 빈 82px(.container flex-row 잔여) 제거 · 인터넷 단독 결과의 간단 표는 결론 띠가 대신 */
html:not(.pcs-on) body.m-choice .container { display: block !important; padding-top: 0 !important; }
html:not(.pcs-on) #simple-result-table-container { display: none !important; }
/* v2.9: 인터넷 결과 설치비 상자(인라인 파랑) */
html:not(.pcs-on) #installation-fee-display [style*="color"], html:not(.pcs-on) #installation-fee-display h4, html:not(.pcs-on) #installation-fee-display strong { color: var(--mp-ink) !important; }
html:not(.pcs-on) #installation-fee-display [style*="border"], html:not(.pcs-on) #installation-fee-display > div { border-color: var(--mp-line) !important; background: var(--mp-paper) !important; border-radius: 10px !important; }
html:not(.pcs-on) #installation-fee-display { display: grid; gap: 10px; }
/* 설치 기기(와이파이·셋톱 모델) — 2026-09-22 */
html:not(.pcs-on) #inet-devices-display { display: grid; gap: 10px; margin-top: 12px; }
html:not(.pcs-on) #inet-devices-display .idv-group { padding: 12px 14px; background: var(--mp-paper); border: 1px solid var(--mp-line); border-radius: var(--radius, 12px); }
html:not(.pcs-on) #inet-devices-display .idv-title { margin: 0 0 8px; font-size: 13px; font-weight: 700; color: var(--mp-ink); }
html:not(.pcs-on) #inet-devices-display .idv-list { display: grid; gap: 8px; }
html:not(.pcs-on) #inet-devices-display .idv-item { display: flex; align-items: center; gap: 12px; }
html:not(.pcs-on) #inet-devices-display .idv-thumb { flex: none; width: 52px; height: 52px; border-radius: 10px; background: #fff; border: 1px solid var(--mp-line); display: flex; align-items: center; justify-content: center; overflow: hidden; }
html:not(.pcs-on) #inet-devices-display .idv-thumb img { width: 100%; height: 100%; object-fit: contain; }
html:not(.pcs-on) #inet-devices-display .idv-thumb-empty { font-size: 22px; }
html:not(.pcs-on) #inet-devices-display .idv-txt { min-width: 0; }
html:not(.pcs-on) #inet-devices-display .idv-txt small { display: block; font-size: 11px; color: var(--mp-muted); }
html:not(.pcs-on) #inet-devices-display .idv-txt b { display: block; font-size: 14px; color: var(--mp-ink); word-break: keep-all; }
html:not(.pcs-on) #inet-devices-display .idv-txt span { display: block; font-size: 12px; color: var(--mp-accent); font-weight: 600; }
/* ═══ v3.0 글자 자동 줄바꿈·크기 축소(사장님 09-18 「텍스트 자동줄바꿈이랑 텍스트 크기 줄이고」) — 좁은 폰(≤360)에서 단어 단위 줄바꿈, 큰 글자는 화면 폭에 비례해 축소 ═══ */
html:not(.pcs-on) body { word-break: keep-all; overflow-wrap: anywhere; }
html:not(.pcs-on) .m-page-head h1, html:not(.pcs-on) body.m-calc .header-info h1, html:not(.pcs-on) .mhome .m-hero h1 { font-size: clamp(19px, 6.2vw, 24px) !important; }
html:not(.pcs-on) .m-sits-head h2 { font-size: clamp(18px, 5.8vw, 22px); }
html:not(.pcs-on) .sit-tx strong { font-size: clamp(13.5px, 4.1vw, 15.5px); }
html:not(.pcs-on) .m-page-head p, html:not(.pcs-on) body.m-calc .header-info p, html:not(.pcs-on) .m-sits-head p { font-size: clamp(11.5px, 3.4vw, 13px) !important; }
html:not(.pcs-on) .m-card .m-ch { font-size: clamp(14px, 4.2vw, 16px); }
html:not(.pcs-on) .m-card .help { font-size: clamp(11px, 3.1vw, 12px); }
html:not(.pcs-on) .m-verdict h2 { font-size: clamp(16px, 5vw, 19px); }
html:not(.pcs-on) .m-verdict p { font-size: clamp(10.5px, 3vw, 11.5px); }
html:not(.pcs-on) .total-cost-section strong, html:not(.pcs-on) .total-cost-section strong span { font-size: clamp(20px, 6.6vw, 26px) !important; }
html:not(.pcs-on) .m-cta .calc { font-size: clamp(13px, 3.8vw, 14.5px); padding: 0 10px; }
html:not(.pcs-on) .m-cta .prorate-button { font-size: clamp(11px, 3.1vw, 12px) !important; }
html:not(.pcs-on) .m-cta .sum { font-size: clamp(10.5px, 2.9vw, 11.5px); }
html:not(.pcs-on) .m-acts button { font-size: clamp(12px, 3.4vw, 13.5px) !important; padding: 0 6px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html:not(.pcs-on) .m-label .right, html:not(.pcs-on) .m-devfield .m-label .right { white-space: nowrap; max-width: 58%; overflow: hidden; text-overflow: ellipsis; }
html:not(.pcs-on) .choice-card .card-info strong { font-size: clamp(13.5px, 3.9vw, 15.5px) !important; }
html:not(.pcs-on) .sit-body .choice-card .card-info strong { font-size: clamp(12.5px, 3.6vw, 14px) !important; }
html:not(.pcs-on) .choice-card .m-desc { font-size: clamp(10.5px, 2.9vw, 11.5px); }
html:not(.pcs-on) .carrier-buttons button, html:not(.pcs-on) .m-sub-top .t b { font-size: clamp(14px, 4vw, 16px) !important; }
html:not(.pcs-on) .section h3, html:not(.pcs-on) .breakdown-card h4 { font-size: clamp(14px, 4.2vw, 16px) !important; }
html:not(.pcs-on) .payment-button, html:not(.pcs-on) .discount-type-buttons button, html:not(.pcs-on) .toggle-button, html:not(.pcs-on) .plan-list-btn, html:not(.pcs-on) .view-mode-buttons button { font-size: clamp(12px, 3.5vw, 14px) !important; white-space: normal; line-height: 1.25; }
html:not(.pcs-on) .ig-label-row, html:not(.pcs-on) .input-group > label, html:not(.pcs-on) .input-group .label { font-size: clamp(11px, 3.1vw, 12px) !important; line-height: 1.35; }
html:not(.pcs-on) .timeline-period li, html:not(.pcs-on) .compact-summary-list li { font-size: clamp(11px, 3.2vw, 12.5px) !important; }
html:not(.pcs-on) .monthly-table th, html:not(.pcs-on) .monthly-table td { font-size: clamp(10px, 2.9vw, 11.5px) !important; }
html:not(.pcs-on) .m-device .tx strong, html:not(.pcs-on) .m-devsheet .dev strong, html:not(.pcs-on) .spb-nm { font-size: clamp(13px, 3.8vw, 15px) !important; }
html:not(.pcs-on) .m-pricebox { font-size: clamp(11.5px, 3.2vw, 12.5px); }
@media (max-width: 359px) {
  html:not(.pcs-on) .m-cta .row { gap: 6px; }
  html:not(.pcs-on) .m-cta .prorate-button { padding: 0 8px !important; }
  html:not(.pcs-on) .m-hub-foot .m-video-link .hvb-text { font-size: 12px; }
  html:not(.pcs-on) .m-sub-top .crumb { display: none; }
}
/* 단말기 정보: 좌우 여백·상단 바 아래 여백 */
html:not(.pcs-on) #devices-root { padding: 10px 16px 0 !important; }
/* v3.1: 요금제 칸 안내 펄스(.guide-pulse ::before 「1」 파랑 그라데이션 · ::after 고리) → 벽돌색 */
html:not(.pcs-on) .guide-pulse::before { background: var(--mp-accent) !important; background-image: none !important; color: var(--mp-on-accent) !important; box-shadow: 0 2px 6px #b4422044 !important; }
html:not(.pcs-on) .guide-pulse::after { border-color: var(--mp-accent) !important; box-shadow: 0 0 0 3px #b4422022 !important; }
html:not(.pcs-on) .pmr-wrap.guide-pulse, html:not(.pcs-on) .plan-input-wrapper.guide-pulse { border-color: var(--mp-accent) !important; box-shadow: none !important; }
/* v3.2: 인터넷 — 선택 화면 없이 바로 입력(m-internet.js v2.0), 카드 3장은 phone 과 같은 규칙(섹션에 data-m-cards 표식) · 홈 뒤로 링크 */
html:not(.pcs-on) #calculator-choice-wrapper:has(#choice-single-mode) { display: none !important; }
html:not(.pcs-on) body.m-calc:not(.m-ab-on) .main-content > .section[data-m-cards] { background: transparent !important; border: 0 !important; padding: 0 !important; margin: 0 !important; box-shadow: none !important; }
html:not(.pcs-on) body.m-calc:not(.m-ab-on) .main-content > .section[data-m-cards] > h3 { display: none !important; }
html:not(.pcs-on) body.m-calc .main-content > .section[data-m-cards] > h3::before { content: none !important; }
html:not(.pcs-on) body.m-ab-on .main-content > .section[data-m-cards] > h3::before { content: attr(data-ab) !important; }
html:not(.pcs-on) body.m-calc .main-content { counter-reset: none; }
html:not(.pcs-on) .m-sub-top a.back { text-decoration: none; }
html:not(.pcs-on) body.m-calc .view-mode-buttons { margin: 0 0 12px !important; }
html:not(.pcs-on) .m-card .body > .input-group:first-child, html:not(.pcs-on) .m-card .body > .bundle-options:first-child { margin-top: 0 !important; }
html:not(.pcs-on) .m-card .body > .toggle-button-group { margin-top: 10px; }
/* ═══ v3.3 나머지 화면(사장님 09-18 「그 외 것들 전체적으로 손보라」): 유지비·위약금·요금제 목록·시세표 게시판·공지·가이드 목록 ═══ */
/* 유지비 계산기: 카드 3장(m-calc cardifyMnt), 제목 h2 는 페이지 머리가 대신, 계산 버튼은 바닥 바로 */
html:not(.pcs-on) #maintenance-calculator-wrapper { padding: 0 !important; }
html:not(.pcs-on) #maintenance-calculator-wrapper .mnt-title { display: none !important; }
html:not(.pcs-on) .mnt-main-btn.m-parked { display: none !important; }
html:not(.pcs-on) .mnt-highlight-box, html:not(.pcs-on) .mnt-highlight-box-red { background: var(--mp-hero) !important; border: 1px solid var(--mp-line) !important; border-radius: 8px !important; box-shadow: none !important; }
html:not(.pcs-on) .mnt-label-red, html:not(.pcs-on) .mnt-highlight-box-red label { color: var(--mp-accent) !important; }
html:not(.pcs-on) .m-mnt .body > .input-group { margin-top: 12px !important; }
html:not(.pcs-on) .m-mnt .body > .input-group:first-child { margin-top: 0 !important; }
html:not(.pcs-on) #maintenance-result-area { margin-top: 14px; }
html:not(.pcs-on) #maintenance-result-area > div { background: var(--mp-paper); border: 1px solid var(--mp-line); border-radius: var(--radius); }
/* 위약금: 진입 2버튼 → 카드 2장 */
html:not(.pcs-on) #penalty-choice-wrapper { padding: 0 !important; background: transparent !important; }
html:not(.pcs-on) #penalty-choice-wrapper h2 { font-size: clamp(18px, 5.8vw, 22px) !important; font-weight: 600 !important; letter-spacing: -.7px; text-align: left !important; color: var(--mp-ink) !important; margin: 4px 0 4px !important; }
html:not(.pcs-on) #penalty-choice-wrapper > p { text-align: left !important; font-size: 12.5px !important; color: var(--mp-muted) !important; margin: 0 0 14px !important; }
html:not(.pcs-on) .choice-buttons-container { display: grid !important; grid-template-columns: 1fr !important; gap: 10px !important; }
html:not(.pcs-on) .choice-buttons-container .choice-button { display: flex !important; align-items: center; justify-content: space-between; min-height: 64px; padding: 14px 16px !important; font-size: 15px !important; font-weight: 600 !important; text-align: left; border-radius: 12px !important; }
html:not(.pcs-on) .choice-buttons-container .choice-button::after { content: "↗"; color: var(--mp-accent); font-weight: 700; }
html:not(.pcs-on) .choice-buttons-container .choice-button:first-child { background: var(--mp-dark) !important; color: #f1eee5 !important; border-color: var(--mp-dark) !important; }
html:not(.pcs-on) .choice-buttons-container .choice-button:first-child::after { color: #f2a37a; }
@media (min-width: 600px) { html:not(.pcs-on) .choice-buttons-container { grid-template-columns: 1fr 1fr !important; } }
/* 요금제 목록: 검색·칩·행 */
html:not(.pcs-on) #plan-list-view-wrapper > h2 { font-size: clamp(18px, 5.8vw, 22px) !important; font-weight: 600 !important; letter-spacing: -.7px; text-align: left !important; color: var(--mp-ink) !important; margin: 4px 0 10px !important; }
html:not(.pcs-on) .pfl-filterbox { background: transparent !important; border: 0 !important; padding: 0 !important; box-shadow: none !important; }
html:not(.pcs-on) .psearch { height: 44px; border: 1px solid var(--mp-line) !important; border-radius: 8px !important; background: var(--mp-paper) !important; box-shadow: none !important; }
html:not(.pcs-on) .psearch input { background: transparent !important; border: 0 !important; color: var(--mp-ink) !important; }
html:not(.pcs-on) .psearch-scope-chip { background: var(--mp-soft) !important; color: var(--mp-accent) !important; border-radius: 999px !important; }
html:not(.pcs-on) .pfl-row { display: grid !important; grid-template-columns: 44px 1fr; align-items: center; gap: 6px; padding: 6px 0 0; font-size: 11.5px; }
html:not(.pcs-on) .pfl-label { color: var(--mp-muted) !important; font-size: 11.5px !important; }
html:not(.pcs-on) .pfl-chips { display: flex !important; gap: 6px !important; overflow-x: auto; scrollbar-width: none; flex-wrap: nowrap !important; }
html:not(.pcs-on) .pfl-chips::-webkit-scrollbar { display: none; }
html:not(.pcs-on) .pfl-chip { flex: none !important; height: 30px !important; padding: 0 11px !important; border: 1px solid var(--mp-line) !important; border-radius: 999px !important; background: var(--mp-paper) !important; color: var(--mp-muted) !important; font-size: 12px !important; font-weight: 600 !important; box-shadow: none !important; }
html:not(.pcs-on) .pfl-chip.active { background: var(--mp-accent) !important; border-color: var(--mp-accent) !important; color: var(--mp-on-accent) !important; }
html:not(.pcs-on) #plan-list-view-wrapper .carrier-buttons { grid-template-columns: repeat(4, 1fr) !important; }
html:not(.pcs-on) #plan-list-view-wrapper .carrier-buttons button { height: 40px !important; font-size: 13px !important; }
/* 시세표 게시판(community): 머리·배너·필터·카드 행형 */
html:not(.pcs-on) body.m-board .brand-heading { display: none !important; }
html:not(.pcs-on) body.m-board .container { padding: 8px 16px 0 !important; }
html:not(.pcs-on) .m-board-head { display: flex; align-items: flex-end; gap: 10px; margin: 6px 0 12px; }
html:not(.pcs-on) .m-board-head .t { flex: 1; min-width: 0; }
html:not(.pcs-on) .m-board-head .kicker { display: block; font-size: 11.5px; font-weight: 700; color: var(--mp-accent); letter-spacing: .4px; margin-bottom: 4px; }
html:not(.pcs-on) .m-board-head h2 { margin: 0 !important; font-size: clamp(18px, 5.8vw, 22px) !important; font-weight: 600 !important; letter-spacing: -.7px; color: var(--mp-ink) !important; }
html:not(.pcs-on) .m-board-head p { margin: 4px 0 0; font-size: 12px; color: var(--mp-muted); }
html:not(.pcs-on) .board-write-btn { height: 38px !important; padding: 0 14px !important; border-radius: 999px !important; background: var(--mp-accent) !important; color: var(--mp-on-accent) !important; border: 0 !important; font-size: 13px !important; font-weight: 700 !important; box-shadow: none !important; white-space: nowrap; }
html:not(.pcs-on) .board-notify-btn { height: 34px !important; padding: 0 10px !important; border-radius: 999px !important; border: 1px solid var(--mp-line) !important; background: var(--mp-paper) !important; color: var(--mp-ink) !important; font-size: 12px !important; }
html:not(.pcs-on) body.m-board .top-banner-row { display: flex !important; flex-direction: column; gap: 8px; margin: 0 0 12px !important; }
html:not(.pcs-on) body.m-board .top-banner-row > button { width: 100% !important; margin: 0 !important; display: flex; align-items: center; gap: 10px; padding: 11px 14px !important; border-radius: 10px !important; text-align: left; }
html:not(.pcs-on) body.m-board .top-banner-row .hvb-text, html:not(.pcs-on) body.m-board .top-banner-row .sbn-text { flex: 1; font-size: 13px; }
html:not(.pcs-on) #trend-section { gap: 8px !important; margin-bottom: 12px !important; }
html:not(.pcs-on) #trend-section > div { background: var(--mp-dark) !important; border-radius: 10px !important; box-shadow: none !important; color: #f1eee5 !important; }
html:not(.pcs-on) #trend-section .deadline-card { background: var(--mp-paper) !important; border: 1px solid var(--mp-line) !important; border-radius: 10px !important; color: var(--mp-ink) !important; }
html:not(.pcs-on) #trend-section .deadline-card .dc-go { color: var(--mp-accent) !important; }
html:not(.pcs-on) body.m-board .m-filterbox { background: transparent !important; padding: 0 !important; margin-bottom: 12px !important; }
html:not(.pcs-on) body.m-board #search-input { height: 42px !important; padding-left: 36px !important; border: 1px solid var(--mp-line) !important; border-radius: 8px !important; background: var(--mp-paper) !important; color: var(--mp-ink) !important; font-size: 13.5px !important; box-shadow: none !important; }
html:not(.pcs-on) body.m-board .search-grow i { top: 13px !important; color: var(--mp-muted) !important; }
html:not(.pcs-on) .sort-seg { display: flex; padding: 3px; border: 1px solid var(--mp-line) !important; border-radius: 8px !important; background: var(--mp-bg) !important; }
html:not(.pcs-on) .sort-seg button { height: 34px !important; padding: 0 10px !important; border: 0 !important; border-radius: 6px !important; background: transparent !important; color: var(--mp-muted) !important; font-size: 12px !important; font-weight: 600 !important; }
html:not(.pcs-on) .sort-seg button.on { background: var(--mp-paper) !important; color: var(--mp-ink) !important; box-shadow: inset 0 0 0 1px var(--mp-line) !important; }
html:not(.pcs-on) body.m-board select { height: 36px !important; padding: 0 10px !important; font-size: 12.5px !important; border: 1px solid var(--mp-line) !important; border-radius: 999px !important; background: var(--mp-paper) !important; color: var(--mp-ink) !important; }
html:not(.pcs-on) #post-list-container { display: flex !important; flex-direction: column; gap: 10px !important; }
html:not(.pcs-on) .post-card { display: grid !important; grid-template-columns: 84px 1fr; column-gap: 12px; align-content: start; padding: 12px 14px !important; margin: 0 !important; background: var(--mp-paper) !important; border: 1px solid var(--mp-line) !important; border-left-width: 1px !important; border-radius: var(--radius) !important; box-shadow: none !important; }
html:not(.pcs-on) .post-card > div { display: contents; }
html:not(.pcs-on) .post-card .aspect-square { grid-column: 1; grid-row: 1 / span 6; width: 84px !important; height: 96px !important; aspect-ratio: auto !important; margin: 0 !important; border-radius: 8px !important; overflow: hidden; background: var(--mp-hero); border: 1px solid var(--mp-line); }
html:not(.pcs-on) .post-card > div > *:not(.aspect-square) { grid-column: 2; }
html:not(.pcs-on) .post-card h3 { font-size: clamp(13.5px, 3.9vw, 15px) !important; font-weight: 600 !important; color: var(--mp-ink) !important; letter-spacing: -.3px; line-height: 1.3; }
html:not(.pcs-on) .post-card span[class*="text-[7px]"], html:not(.pcs-on) .post-card span[class*="text-[8px]"] { font-size: 10.5px !important; padding: 2px 7px !important; border-radius: 999px !important; }
html:not(.pcs-on) .post-card p[class*="text-[9px]"] { font-size: 11.5px !important; color: var(--mp-muted) !important; white-space: normal !important; }
html:not(.pcs-on) .post-card span[class*="text-[6px]"] { font-size: 10.5px !important; color: var(--mp-muted) !important; }
html:not(.pcs-on) .post-card .border-t { border-color: var(--mp-line) !important; }
html:not(.pcs-on) .post-card .text-indigo-500, html:not(.pcs-on) .post-card .text-indigo-600, html:not(.pcs-on) .post-card .bg-indigo-100, html:not(.pcs-on) .post-card .bg-blue-100 { color: var(--mp-accent) !important; background: var(--mp-soft) !important; }
html:not(.pcs-on) .board-dtguide { display: flex !important; align-items: center; gap: 12px; margin: 14px 0 0 !important; padding: 12px 14px !important; background: var(--mp-hero) !important; border: 1px solid var(--mp-line) !important; border-radius: var(--radius) !important; color: var(--mp-ink) !important; }
@media (min-width: 600px) { html:not(.pcs-on) #post-list-container { display: grid !important; grid-template-columns: 1fr 1fr; } }
/* 공지사항 */
html:not(.pcs-on) body.m-notice .brand-heading { display: none !important; }
html:not(.pcs-on) body.m-notice .container { padding: 8px 16px 0 !important; }
html:not(.pcs-on) #notice-list-container > * { background: var(--mp-paper) !important; border: 1px solid var(--mp-line) !important; border-radius: var(--radius) !important; box-shadow: none !important; margin: 0 0 10px !important; padding: 14px !important; }
html:not(.pcs-on) #notice-list-container h3, html:not(.pcs-on) #notice-list-container .notice-title { font-size: clamp(13.5px, 3.9vw, 15px) !important; font-weight: 600 !important; color: var(--mp-ink) !important; letter-spacing: -.3px; }
html:not(.pcs-on) #notice-list-container p, html:not(.pcs-on) #notice-list-container .notice-date { font-size: 12px !important; color: var(--mp-muted) !important; }
html:not(.pcs-on) #notice-list-container .bg-blue-100, html:not(.pcs-on) #notice-list-container .bg-indigo-100, html:not(.pcs-on) #notice-list-container .text-blue-600, html:not(.pcs-on) #notice-list-container .text-indigo-600, html:not(.pcs-on) #notice-list-container .bg-red-100 { background: var(--mp-soft) !important; color: var(--mp-accent) !important; }
html:not(.pcs-on) #pagination-container button { border: 1px solid var(--mp-line) !important; border-radius: 8px !important; background: var(--mp-paper) !important; color: var(--mp-ink) !important; }
html:not(.pcs-on) #pagination-container button.active, html:not(.pcs-on) #pagination-container .bg-blue-500, html:not(.pcs-on) #pagination-container .bg-blue-600 { background: var(--mp-accent) !important; color: var(--mp-on-accent) !important; border-color: var(--mp-accent) !important; }
/* 가이드 목록(guide/index.html): 페이지 머리 + 번호 행 카드(시안 guide.html) */
html:not(.pcs-on) .g-head { padding: 10px 0 4px !important; text-align: left !important; }
html:not(.pcs-on) .g-crumb { font-size: 11.5px !important; font-weight: 700 !important; color: var(--mp-accent) !important; letter-spacing: .4px; }
html:not(.pcs-on) .g-head h1 { font-size: clamp(19px, 6.2vw, 24px) !important; font-weight: 600 !important; letter-spacing: -.8px; line-height: 1.3; color: var(--mp-ink) !important; margin: 6px 0 !important; }
html:not(.pcs-on) .g-head h1 em { font-style: normal; color: var(--mp-accent); }
html:not(.pcs-on) .g-meta { font-size: 12.5px !important; color: var(--mp-muted) !important; }
html:not(.pcs-on) .g-body h2.sec { font-size: 15px !important; font-weight: 700 !important; color: var(--mp-ink) !important; margin: 18px 0 8px !important; padding: 0 !important; border: 0 !important; }
html:not(.pcs-on) .hub-cards { display: flex !important; flex-direction: column; gap: 8px !important; }
html:not(.pcs-on) .hub-card { display: grid !important; grid-template-columns: 30px 1fr 16px; align-items: center; column-gap: 12px; padding: 12px 14px !important; background: var(--mp-paper) !important; border: 1px solid var(--mp-line) !important; border-radius: var(--radius) !important; box-shadow: none !important; text-decoration: none; }
html:not(.pcs-on) .hub-card .ico { grid-column: 1; grid-row: 1 / span 2; width: 30px; height: 30px; display: grid; place-items: center; font-size: 18px; }
html:not(.pcs-on) .hub-card b { grid-column: 2; font-size: clamp(13.5px, 3.9vw, 15px) !important; font-weight: 600 !important; color: var(--mp-ink) !important; letter-spacing: -.3px; line-height: 1.3; }
html:not(.pcs-on) .hub-card > span:not(.go) { grid-column: 2; font-size: 11.5px !important; color: var(--mp-muted) !important; margin-top: 2px; }
html:not(.pcs-on) .hub-card br { display: none; }
html:not(.pcs-on) .hub-card .go { grid-column: 3; grid-row: 1 / span 2; font-size: 0 !important; }
html:not(.pcs-on) .hub-card .go::after { content: "›"; font-size: 18px; color: var(--mp-muted); }
@media (min-width: 600px) { html:not(.pcs-on) .hub-cards { display: grid !important; grid-template-columns: 1fr 1fr; } }
/* v3.4: 게시판 머리 왼쪽 정렬 · 자동완성 배경 */
html:not(.pcs-on) .m-board-head h2, html:not(.pcs-on) .m-board-head .t { text-align: left !important; }
html:not(.pcs-on) input:-webkit-autofill, html:not(.pcs-on) input:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 40px var(--mp-paper) inset !important; -webkit-text-fill-color: var(--mp-ink) !important; }
/* v3.5: 유지비 달력·개월 칩·고급 링크, 요금제 목록 개수·데이터 색·비교/정렬 버튼·표 머리 */
html:not(.pcs-on) .mnt-calendar-btn { background: var(--mp-accent) !important; color: var(--mp-on-accent) !important; border: 0 !important; border-radius: 8px !important; }
html:not(.pcs-on) .mnt-month-step-btn, html:not(.pcs-on) .mnt-schedule-advanced-link { background: var(--mp-paper) !important; color: var(--mp-accent) !important; border: 1px solid var(--mp-line) !important; border-radius: 8px !important; }
html:not(.pcs-on) .mnt-month-chip { border: 1px solid var(--mp-line) !important; background: var(--mp-paper) !important; color: var(--mp-muted) !important; border-radius: 999px !important; }
html:not(.pcs-on) .mnt-month-chip.active { background: var(--mp-soft) !important; color: var(--mp-accent) !important; border-color: var(--mp-accent) !important; }
html:not(.pcs-on) #plan-result-count, html:not(.pcs-on) .pfl-dt { color: var(--mp-accent) !important; }
html:not(.pcs-on) #plan-list-view-wrapper .cmp82-toggle, html:not(.pcs-on) #plan-list-view-wrapper [class*="sort"], html:not(.pcs-on) #plan-list-view-wrapper [id*="sort"] { background: var(--mp-paper) !important; background-image: none !important; color: var(--mp-accent) !important; border: 1px solid var(--mp-line) !important; border-radius: 999px !important; box-shadow: none !important; font-weight: 700 !important; }
html:not(.pcs-on) #plan-list-view-wrapper thead th, html:not(.pcs-on) #plan-list-view-wrapper .pfl-head, html:not(.pcs-on) #plan-list-view-wrapper [class*="thead"] { background: var(--mp-hero) !important; color: var(--mp-muted) !important; border-color: var(--mp-line) !important; }
html:not(.pcs-on) #plan-list-view-wrapper table, html:not(.pcs-on) #plan-list-view-wrapper .pfl-table { border: 1px solid var(--mp-line) !important; border-radius: 10px; overflow: hidden; background: var(--mp-paper) !important; }
html:not(.pcs-on) #plan-list-view-wrapper td, html:not(.pcs-on) #plan-list-view-wrapper th { border-color: var(--mp-line) !important; color: var(--mp-ink); }
/* v3.6 팝업 토큰 통일(다크모드 포함): 스펙 카드·날짜 계산기·요금제 시트 잔여 파랑 → 벽돌색, 팝업 상자는 종이색 */
/* ⚠.bottom-sheet-modal 의 첫 자식 .bottom-sheet-overlay 는 어둠막이라 종이색을 주면 요금제 선택창 뒤가 하얗게 된다(사장님 09-18 「뒷배경이 백색」) → 제외(v11.3) */
html:not(.pcs-on) .modal-content, html:not(.pcs-on) .modal-overlay > div:not(.dim), html:not(.pcs-on) .spc-card, html:not(.pcs-on) #spc-overlay > div, html:not(.pcs-on) .bottom-sheet-modal > div:not(.bottom-sheet-overlay), html:not(.pcs-on) .sheet, html:not(.pcs-on) .p82n-sheet, html:not(.pcs-on) .life-sheet { background: var(--mp-paper) !important; color: var(--mp-ink) !important; }
/* v13.0 (2026-09-20 밤) 확대창 #spz-overlay 는 .modal-overlay 클래스를 함께 달아 위 규칙이 사진 상자(.spz-box)까지 종이색으로 칠했다(라이트 흰 상자·다크 #222623) — 사장님 「모바일·앱은 여전히 투명이 아님」. PC 스킨엔 이 규칙이 없어 멀쩡했음 */
html:not(.pcs-on) #spz-overlay > .spz-box, html:not(.pcs-on) .spz-overlay > div { background: transparent !important; }
html:not(.pcs-on) #spc-overlay small, html:not(.pcs-on) .spc-cap, html:not(.pcs-on) .spc-cap span, html:not(.pcs-on) .spc-zoomhint, html:not(.pcs-on) .spc-cname, html:not(.pcs-on) .spc-src, html:not(.pcs-on) .spc-row .k, html:not(.pcs-on) .spc-k { color: var(--mp-muted) !important; }
html:not(.pcs-on) .spc-share, html:not(.pcs-on) .spc-close, html:not(.pcs-on) .spc-nav { color: var(--mp-accent) !important; border-color: var(--mp-line) !important; background: var(--mp-paper) !important; }
html:not(.pcs-on) .spc-ipq { background: var(--mp-soft) !important; color: var(--mp-accent) !important; }
html:not(.pcs-on) .spc-cchip.spc-on { box-shadow: 0 0 0 2px var(--mp-accent) !important; }
html:not(.pcs-on) .spc-hero, html:not(.pcs-on) .spc-stage { background: transparent !important; }   /* 09-20 기기 사진 뒤 상자 제거(사진은 원래 투명) */
html:not(.pcs-on) .dc-tab { background: var(--mp-bg) !important; color: var(--mp-muted) !important; border: 1px solid var(--mp-line) !important; }
html:not(.pcs-on) .dc-tab.active { background: var(--mp-accent) !important; color: var(--mp-on-accent) !important; border-color: var(--mp-accent) !important; }
html:not(.pcs-on) .today-btn, html:not(.pcs-on) .dc-chip { background: var(--mp-paper) !important; color: var(--mp-accent) !important; border: 1px solid var(--mp-line) !important; border-radius: 999px !important; }
html:not(.pcs-on) .dc-chip.on, html:not(.pcs-on) .today-btn.on { background: var(--mp-soft) !important; border-color: var(--mp-accent) !important; }
html:not(.pcs-on) .psearch-ico, html:not(.pcs-on) .pp-manual-chev { color: var(--mp-muted) !important; }
html:not(.pcs-on) .modal-overlay h2, html:not(.pcs-on) .modal h2, html:not(.pcs-on) .modal-content h2, html:not(.pcs-on) .modal-content h3 { color: var(--mp-ink) !important; }
html:not(.pcs-on) .modal-close-button, html:not(.pcs-on) .modal-close, html:not(.pcs-on) [class*="-close"]:not(.sit-chev) { color: var(--mp-muted) !important; }
/* v3.7 공지 팝업 링크·닫기, 생활 계산 시트 토큰 */
html:not(.pcs-on) #noticeModal a, html:not(.pcs-on) #helpModal a { color: var(--mp-accent) !important; }
html:not(.pcs-on) #noticeModal button, html:not(.pcs-on) #helpModal button { background: var(--mp-accent) !important; color: var(--mp-on-accent) !important; border: 0 !important; border-radius: 8px !important; }
html:not(.pcs-on) .p82n-sheet, html:not(.pcs-on) .p82n-life { background: var(--mp-paper) !important; color: var(--mp-ink) !important; }
html:not(.pcs-on) .p82n-sheet .p82n-tile, html:not(.pcs-on) .p82n-life-tile, html:not(.pcs-on) .p82n-sheet a, html:not(.pcs-on) .p82n-sheet button:not(.p82n-sheet-close) { background: var(--mp-bg) !important; border: 1px solid var(--mp-line) !important; border-radius: 10px !important; color: var(--mp-ink) !important; box-shadow: none !important; }
html:not(.pcs-on) .p82n-sheet h3, html:not(.pcs-on) .p82n-sheet .p82n-sheet-title { color: var(--mp-ink) !important; }
/* v3.8 가이드 머리 띠 배경(보라 그라데이션) 제거 · 공지 머리 왼쪽 여백 */
html:not(.pcs-on) .g-head, html:not(.pcs-on) .page, html:not(.pcs-on) .g-body { background: transparent !important; background-image: none !important; box-shadow: none !important; }
html:not(.pcs-on) .g-head { padding: 12px 0 6px !important; margin: 0 !important; }
html:not(.pcs-on) body.m-notice .container > h2 { font-size: clamp(18px, 5.8vw, 22px) !important; font-weight: 600 !important; letter-spacing: -.7px; }
/* v3.9 우리가족 요금 계산(family.html): 바탕·카드·머리(주황→먹색)·약정 토글·합계 줄 토큰 */
html:not(.pcs-on) .family-container { background: var(--mp-bg) !important; }
html:not(.pcs-on) .family-card { background: var(--mp-paper) !important; border: 1px solid var(--mp-line) !important; border-radius: 12px !important; box-shadow: none !important; }
html:not(.pcs-on) .family-card-header { background: var(--mp-dark) !important; color: #f1eee5 !important; border-radius: 12px 12px 0 0 !important; }
html:not(.pcs-on) .family-card.representative .family-card-header { background: var(--mp-accent) !important; color: var(--mp-on-accent) !important; }
html:not(.pcs-on) .rep-badge { background: #ffffff22 !important; color: inherit !important; border-radius: 999px !important; }
html:not(.pcs-on) .contract-btn { border: 1px solid var(--mp-line) !important; background: var(--mp-paper) !important; color: var(--mp-muted) !important; border-radius: 8px !important; }
html:not(.pcs-on) .contract-btn.active { background: var(--mp-soft) !important; color: var(--mp-accent) !important; border-color: var(--mp-accent) !important; box-shadow: inset 0 0 0 1px var(--mp-accent) !important; }
html:not(.pcs-on) .family-card .result-row { color: var(--mp-muted) !important; }
html:not(.pcs-on) .family-card .result-row span:last-child { color: var(--mp-ink) !important; }
html:not(.pcs-on) .family-card .result-row.total, html:not(.pcs-on) .family-card .result-row.total span { color: var(--mp-accent) !important; font-weight: 700 !important; }
html:not(.pcs-on) .family-footer { background: var(--mp-paper) !important; border-top: 1px solid var(--mp-line) !important; color: var(--mp-ink) !important; box-shadow: 0 -10px 30px #00000010 !important; }
html:not(.pcs-on) .family-footer .total-badge { background: var(--mp-hero) !important; color: var(--mp-muted) !important; border-radius: 999px !important; }
html:not(.pcs-on) .family-footer strong, html:not(.pcs-on) .family-footer .grand-total { color: var(--mp-accent) !important; }
html:not(.pcs-on) .fw-chev { color: var(--mp-muted) !important; }
html:not(.pcs-on) .family-card select, html:not(.pcs-on) .family-card input { border: 1px solid var(--mp-line) !important; border-radius: 8px !important; background: var(--mp-bg) !important; color: var(--mp-ink) !important; }
/* ═══ v4.0 (사장님 09-18 밤) 폴드 허브 가운데 정렬·경계선 통일 · 폰 허브는 눌러야 펼침 · 인터넷 머리 왼쪽·그라데이션·초기화를 바닥 바로 · 단말기 탭 3열 타일 · 공지 제목 축소 ═══ */
@media (min-width: 600px) {
  html:not(.pcs-on) .m-sits { align-items: stretch; }
  html:not(.pcs-on) .m-sit, html:not(.pcs-on) .m-sit:first-child { border: 1px solid var(--mp-line) !important; box-shadow: none !important; display: flex; flex-direction: column; }
  html:not(.pcs-on) .sit-head { min-height: 92px; align-items: center; border-bottom: 1px solid var(--mp-line); }
  html:not(.pcs-on) .sit-body { flex: 1; border-top: 0 !important; justify-items: stretch; align-content: start; padding: 12px !important; }
  html:not(.pcs-on) .sit-body .choice-card { align-items: center !important; text-align: center !important; }
  html:not(.pcs-on) .sit-body .choice-card .card-info { align-items: center; }
  html:not(.pcs-on) .sit-body .choice-card::after { align-self: center !important; margin-top: 6px !important; }
  html:not(.pcs-on) .sit-body .choice-card.hot::after { margin: 6px 0 0 !important; }
  html:not(.pcs-on) .sit-body .choice-card.hot .card-info { align-items: center; }
}
html:not(.pcs-on) .page-header .header-content, html:not(.pcs-on) .page-header .header-info, html:not(.pcs-on) body.m-calc .header-info h1, html:not(.pcs-on) body.m-calc .header-info p { text-align: left !important; align-items: flex-start !important; justify-content: flex-start !important; }
html:not(.pcs-on) .m-grad { font-style: normal; background: linear-gradient(92deg, #b44220 0%, #e2743f 55%, #f2a37a 100%); -webkit-background-clip: text; background-clip: text; color: transparent !important; -webkit-text-fill-color: transparent; }
html:not(.pcs-on) body.dark-mode .m-grad { background: linear-gradient(92deg, #e9dcc0 0%, #f3ead6 60%, #fff8ea 100%); -webkit-background-clip: text; background-clip: text; }
html:not(.pcs-on) .m-cta .m-cta-reset { flex: 0 0 auto; height: 48px !important; padding: 0 14px !important; border-radius: 8px !important; border: 1px solid var(--mp-line) !important; background: var(--mp-paper) !important; color: var(--mp-ink) !important; font-size: 13px !important; font-weight: 600 !important; }
html:not(.pcs-on) #devices-root .dev-tabs { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 12px 0 0 !important; border: 0 !important; }
html:not(.pcs-on) #devices-root .dev-tabs button { display: flex !important; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 64px; padding: 10px 6px !important; border: 1px solid var(--mp-line) !important; border-radius: 10px !important; background: var(--mp-paper) !important; color: var(--mp-ink) !important; font-size: 14px !important; font-weight: 600 !important; }
html:not(.pcs-on) #devices-root .dev-tabs button small { font-size: 10.5px !important; color: var(--mp-muted) !important; white-space: normal; text-align: center; line-height: 1.25; }
html:not(.pcs-on) #devices-root .dev-tabs button.on { border-color: var(--mp-accent) !important; background: var(--mp-soft) !important; color: var(--mp-accent) !important; box-shadow: inset 0 0 0 1px var(--mp-accent) !important; }
html:not(.pcs-on) #devices-root .dev-tabs button.on small { color: var(--mp-accent) !important; }
html:not(.pcs-on) body.m-notice .container > h2, html:not(.pcs-on) body.m-notice .m-board-head h2 { font-size: 17px !important; }
html:not(.pcs-on) #notice-list-container h3, html:not(.pcs-on) #notice-list-container .notice-title, html:not(.pcs-on) #notice-list-container a > div:first-child, html:not(.pcs-on) #notice-list-container .font-bold { font-size: 13px !important; font-weight: 600 !important; line-height: 1.4; }
/* v4.1 설치 가능지역 팝업 토큰 */
html:not(.pcs-on) #coverageCheckModal > div, html:not(.pcs-on) #coverageCheckModal .cvc-box, html:not(.pcs-on) .cvc-modal { background: var(--mp-paper) !important; color: var(--mp-ink) !important; border-radius: 14px !important; }
html:not(.pcs-on) #coverageCheckModal h2 { color: var(--mp-ink) !important; }
html:not(.pcs-on) #coverageCheckModal .cvc-x { color: var(--mp-muted) !important; }
html:not(.pcs-on) #coverageCheckModal p, html:not(.pcs-on) #coverageCheckModal li { color: var(--mp-muted) !important; }
/* v4.2 셋톱 확대창·요금제 상세·시세 상세 팝업 토큰 */
html:not(.pcs-on) .settop-lb-card { background: var(--mp-paper) !important; color: var(--mp-ink) !important; border-radius: 14px !important; }
html:not(.pcs-on) .settop-lb-color, html:not(.pcs-on) .settop-lb-feat, html:not(.pcs-on) .settop-lb-spec dt, html:not(.pcs-on) .settop-lb-foot { color: var(--mp-muted) !important; }
html:not(.pcs-on) .settop-lb-fee, html:not(.pcs-on) .settop-lb-name { color: var(--mp-ink) !important; }
html:not(.pcs-on) .settop-lb-sw.on, html:not(.pcs-on) .settop-lb-sw.active { box-shadow: 0 0 0 2px var(--mp-accent) !important; }
html:not(.pcs-on) .settop-lb-x { color: var(--mp-muted) !important; background: var(--mp-paper) !important; }
html:not(.pcs-on) #planDetailModal .modal-content, html:not(.pcs-on) #planDetailModal > div { background: var(--mp-paper) !important; color: var(--mp-ink) !important; }
html:not(.pcs-on) #planDetailModal h2, html:not(.pcs-on) #planDetailModal h3 { color: var(--mp-ink) !important; }
html:not(.pcs-on) #planDetailModal .plan-detail-price, html:not(.pcs-on) #planDetailModal strong { color: var(--mp-accent) !important; }
html:not(.pcs-on) #planDetailModal mark { background: var(--mp-soft) !important; color: var(--mp-accent) !important; }
html:not(.pcs-on) #detail-modal .bg-white, html:not(.pcs-on) #detail-modal .dark\:bg-gray-800, html:not(.pcs-on) #detail-modal > div > div { background: var(--mp-paper) !important; color: var(--mp-ink) !important; }
html:not(.pcs-on) #detail-modal .text-indigo-600, html:not(.pcs-on) #detail-modal .text-blue-600, html:not(.pcs-on) #detail-modal .bg-indigo-600, html:not(.pcs-on) #detail-modal .bg-blue-600, html:not(.pcs-on) #detail-modal .bg-indigo-500 { background-color: var(--mp-accent) !important; color: var(--mp-on-accent) !important; }
html:not(.pcs-on) #detail-modal .bg-indigo-100, html:not(.pcs-on) #detail-modal .bg-blue-100, html:not(.pcs-on) #detail-modal .bg-indigo-50 { background-color: var(--mp-soft) !important; color: var(--mp-accent) !important; }
html:not(.pcs-on) #detail-modal .text-gray-500, html:not(.pcs-on) #detail-modal .text-gray-400 { color: var(--mp-muted) !important; }
/* v4.3 실제 id 로 보정: 시세 상세 #post-detail-card · 요금제 상세 .bottom-sheet-content */
html:not(.pcs-on) #post-detail-card { background: var(--mp-paper) !important; color: var(--mp-ink) !important; }
html:not(.pcs-on) #post-detail-card .bg-white, html:not(.pcs-on) #post-detail-card .bg-gray-50, html:not(.pcs-on) #post-detail-card .bg-gray-100 { background-color: var(--mp-hero) !important; }
html:not(.pcs-on) #post-detail-card .text-indigo-600, html:not(.pcs-on) #post-detail-card .text-blue-600, html:not(.pcs-on) #post-detail-card .text-indigo-500 { color: var(--mp-accent) !important; }
html:not(.pcs-on) #post-detail-card .bg-indigo-600, html:not(.pcs-on) #post-detail-card .bg-blue-600, html:not(.pcs-on) #post-detail-card .bg-indigo-500, html:not(.pcs-on) #post-detail-card .bg-yellow-400 { background-color: var(--mp-accent) !important; color: var(--mp-on-accent) !important; border-color: var(--mp-accent) !important; }
html:not(.pcs-on) #post-detail-card .bg-indigo-100, html:not(.pcs-on) #post-detail-card .bg-blue-100, html:not(.pcs-on) #post-detail-card .bg-indigo-50, html:not(.pcs-on) #post-detail-card .bg-blue-50 { background-color: var(--mp-soft) !important; color: var(--mp-accent) !important; }
html:not(.pcs-on) #post-detail-card .text-gray-500, html:not(.pcs-on) #post-detail-card .text-gray-400, html:not(.pcs-on) #post-detail-card .text-gray-600 { color: var(--mp-muted) !important; }
html:not(.pcs-on) #post-detail-card .border-gray-100, html:not(.pcs-on) #post-detail-card .border-gray-200, html:not(.pcs-on) #post-detail-card .border-gray-700 { border-color: var(--mp-line) !important; }
html:not(.pcs-on) .bottom-sheet-content { background: var(--mp-paper) !important; color: var(--mp-ink) !important; border-radius: 16px 16px 0 0 !important; }
html:not(.pcs-on) .bottom-sheet-handle-bar .handle { background: var(--mp-line) !important; }
html:not(.pcs-on) #detailPlanName { color: var(--mp-ink) !important; font-size: clamp(16px, 4.6vw, 18px) !important; font-weight: 600 !important; }
html:not(.pcs-on) .detail-price { color: var(--mp-accent) !important; font-weight: 700 !important; }
html:not(.pcs-on) .detail-description { color: var(--mp-ink) !important; }
html:not(.pcs-on) .detail-description mark { background: var(--mp-soft) !important; color: var(--mp-accent) !important; }
/* v4.4 인터넷 바닥 바: 초기화 | 결과 보기 반반(사장님 「결과보기랑 같이 나누라고 모바일처럼」) */
html:not(.pcs-on) .m-cta .row:has(.m-cta-reset) { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
html:not(.pcs-on) .m-cta .row:has(.m-cta-reset) > * { width: 100%; height: 48px !important; }
html:not(.pcs-on) .m-cta .m-cta-reset { font-size: 14px !important; font-weight: 700 !important; border: 1px solid var(--mp-accent) !important; color: var(--mp-accent) !important; background: var(--mp-soft) !important; }
html:not(.pcs-on) .m-cta .m-cta-reset { position: static !important; width: 100% !important; min-width: 0 !important; max-width: none !important; margin: 0 !important; box-sizing: border-box !important; }
/* v4.6 인터넷 비교 = 휴대폰 비교와 동일(사장님): 폰에서는 A·B 섹션 위아래로, A|B 붙박이 탭, 카드는 구분선만 */
@media (max-width: 599px) {
  html:not(.pcs-on) body.m-ab-on .main-content { flex-direction: column !important; flex-wrap: nowrap !important; }   /* ⚠display:flex !important 를 주면 숨긴 유지비 wrapper(.main-content)까지 켜진다 */
  html:not(.pcs-on) body.m-ab-on .main-content > .section { width: 100% !important; max-width: none !important; flex: 0 0 auto !important; margin-left: 0 !important; margin-right: 0 !important; scroll-margin-top: 124px; }
}
html:not(.pcs-on) body.m-ab-on .main-content { overflow: visible !important; }
html:not(.pcs-on) body.m-ab-on .main-content > .section { background: var(--mp-paper) !important; border: 1px solid var(--mp-line) !important; border-radius: 12px !important; padding: 14px !important; }
html:not(.pcs-on) body.m-ab-on .main-content > .section > h3 { display: flex !important; align-items: center; gap: 8px; font-size: 15px !important; margin: 0 0 6px !important; padding-bottom: 10px !important; border-bottom: 1px solid var(--mp-line) !important; }
html:not(.pcs-on) body.m-ab-on .main-content > .section:first-of-type, html:not(.pcs-on) body.m-ab-on .main-content > .section[data-ab-first] { border-color: var(--mp-accent) !important; box-shadow: inset 0 2px 0 var(--mp-accent) !important; }
html:not(.pcs-on) body.m-ab-on .main-content > .section:has(> h3[data-ab="A"]) { border-color: var(--mp-accent) !important; box-shadow: inset 0 2px 0 var(--mp-accent) !important; }
html:not(.pcs-on) .m-cta .m-cta-reset { white-space: nowrap; font-size: clamp(12px, 3.6vw, 14px) !important; }
/* v4.9 작은 머리 제거 → 머리글이 맨 위로 · 바닥 바 버튼 균등 분할(휴대폰 3개: 일할 | 입력값 초기화 | 계산 · 인터넷 2개) */
html:not(.pcs-on) .m-sub-top { display: none !important; }
html:not(.pcs-on) body.m-calc .page-header { padding: 10px 0 6px !important; }
html:not(.pcs-on) .m-cta .row { display: grid !important; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; }
html:not(.pcs-on) .m-cta .row > [hidden], html:not(.pcs-on) .m-cta .row > .m-hide, html:not(.pcs-on) .m-cta .pro-slot:empty { display: none !important; }
html:not(.pcs-on) .m-cta .pro-slot, html:not(.pcs-on) .m-cta .prorate-button-group, html:not(.pcs-on) .m-cta .prorate-button { width: 100% !important; min-width: 0 !important; }
html:not(.pcs-on) .m-cta .prorate-button { height: 48px !important; padding: 0 6px !important; font-size: clamp(11px, 3.3vw, 12.5px) !important; white-space: normal !important; line-height: 1.2; }
html:not(.pcs-on) .m-cta .m-cta-reset { height: 48px !important; padding: 0 6px !important; font-size: clamp(11.5px, 3.4vw, 13.5px) !important; white-space: normal !important; line-height: 1.2; }
html:not(.pcs-on) .m-cta .calc { height: 48px; padding: 0 8px; white-space: normal; line-height: 1.2; font-size: clamp(12.5px, 3.6vw, 14.5px); }
html:not(.pcs-on) .m-cta .m-cta-reset::before { display: none !important; content: none !important; }
/* v5.1 허브 9카드: 글자 가운데, 화살표는 글자 옆(폰·폴드 공통, 사장님 09-18) · 계산기 머리 문구 그라데이션 강조 */
html:not(.pcs-on) .sit-body .choice-card, html:not(.pcs-on) .choice-grid .choice-card { flex-direction: row !important; align-items: center !important; justify-content: center !important; text-align: center !important; gap: 8px !important; min-height: 76px !important; padding: 12px 12px !important; }
html:not(.pcs-on) .sit-body .choice-card .card-info, html:not(.pcs-on) .choice-grid .choice-card .card-info { width: auto !important; align-items: center; text-align: center; }
html:not(.pcs-on) .sit-body .choice-card::after, html:not(.pcs-on) .choice-grid .choice-card::after { margin: 0 !important; align-self: center !important; }
html:not(.pcs-on) .sit-body .choice-card.hot { flex-direction: row !important; justify-content: center !important; }
html:not(.pcs-on) .sit-body .choice-card.hot .card-info { flex-direction: column !important; align-items: center; gap: 2px; }
html:not(.pcs-on) .sit-body .choice-card.hot::after { margin: 0 !important; }
@media (min-width: 600px) { html:not(.pcs-on) .sit-body .choice-card.hot { flex-direction: row !important; } html:not(.pcs-on) .sit-body .choice-card::after, html:not(.pcs-on) .sit-body .choice-card.hot::after { margin: 0 !important; align-self: center !important; } }
html:not(.pcs-on) body.m-calc .header-info h1 em { font-style: normal; }
/* v5.2 허브 카드 화살표는 우측 하단 모서리(사장님 09-18), 글자는 가운데 유지 */
html:not(.pcs-on) .sit-body .choice-card, html:not(.pcs-on) .choice-grid .choice-card { position: relative !important; padding: 12px 22px 14px !important; }
html:not(.pcs-on) .sit-body .choice-card::after, html:not(.pcs-on) .choice-grid .choice-card::after, html:not(.pcs-on) .sit-body .choice-card.hot::after { position: absolute !important; right: 9px !important; bottom: 6px !important; margin: 0 !important; align-self: auto !important; font-size: 13px; line-height: 1; }
@media (min-width: 600px) { html:not(.pcs-on) .sit-body .choice-card::after, html:not(.pcs-on) .sit-body .choice-card.hot::after { position: absolute !important; right: 9px !important; bottom: 6px !important; margin: 0 !important; } }
/* v5.3 폴드·태블릿 상황 머리: 짧은 문구(.sm)로 바꾸고 머리 높이·구분선을 세 상자 동일하게 */
html:not(.pcs-on) .sit-tx .sm { display: none; }
@media (min-width: 600px) {
  html:not(.pcs-on) .sit-tx .lg { display: none; }
  html:not(.pcs-on) .sit-tx .sm { display: inline; }
  html:not(.pcs-on) .sit-head { min-height: 84px !important; height: 84px; padding: 0 14px !important; grid-template-columns: 52px 1fr; gap: 12px; box-sizing: border-box; }
  html:not(.pcs-on) .sit-art { width: 52px !important; height: 52px !important; font-size: 22px; }
  html:not(.pcs-on) .sit-tx small { font-size: 11.5px; white-space: nowrap; }
  html:not(.pcs-on) .sit-tx strong { font-size: clamp(13px, 2.1vw, 15px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
  html:not(.pcs-on) .m-sit { border-radius: 12px !important; }
  html:not(.pcs-on) .sit-body { padding: 12px !important; gap: 10px !important; }
  html:not(.pcs-on) .sit-body .choice-card { min-height: 84px !important; }
}
@media (min-width: 600px) { html:not(.pcs-on) .sit-tx strong { white-space: normal !important; display: -webkit-box !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: clip; font-size: clamp(12.5px, 2vw, 14.5px); line-height: 1.25; } }
/* v5.5 폴드 상황 머리 제목은 무조건 한 줄(사장님 「2줄이 나오면 안 됨」) */
@media (min-width: 600px) { html:not(.pcs-on) .sit-tx strong { display: block !important; white-space: nowrap !important; -webkit-line-clamp: unset; overflow: hidden; text-overflow: ellipsis; font-size: clamp(12px, 1.9vw, 14px) !important; } }
/* v5.6 화면 전환 등장 애니메이션(옛 모양 비침 대신 살짝 올라오며 나타남) */
@keyframes m-enter { from { opacity: 0; } to { opacity: 1; } }   /* v10.5 transform 금지: 애니메이션이 남긴 transform 이 안쪽 position:fixed 팝업의 기준이 되어 스크롤한 만큼 위로 밀렸다(출력 선택 팝업 안 보임·팝업이 맨 위로) */
html:not(.pcs-on) .m-enter { animation: m-enter .24s ease-out both; }
html:not(.pcs-on) .m-cta { transition: transform .22s ease-out, opacity .22s ease-out; }
html:not(.pcs-on) .m-cta[hidden] { display: block !important; transform: translateY(110%); opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { html:not(.pcs-on) .m-enter { animation: none; } }
/* v5.7 단말기 칸 글자 반응형(… 말줄임 대신 줄바꿈·폰 폭에 맞춰 축소, 사장님 09-18) */
html:not(.pcs-on) .m-device .tx strong { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; font-size: clamp(12.5px, 3.6vw, 14.5px) !important; line-height: 1.3; }
html:not(.pcs-on) .m-device:not(.set) .tx strong { font-size: clamp(12px, 3.4vw, 13.5px) !important; }
html:not(.pcs-on) .m-device .tx span { font-size: clamp(10.5px, 3vw, 12px) !important; white-space: normal; }
html:not(.pcs-on) .m-device .go { font-size: clamp(11px, 3.2vw, 12.5px) !important; }
html:not(.pcs-on) .m-device .thumb { width: clamp(36px, 11vw, 44px) !important; height: clamp(44px, 13.5vw, 54px) !important; }
html:not(.pcs-on) .m-devfield .m-label .right, html:not(.pcs-on) .m-label .right { max-width: none !important; white-space: normal !important; overflow: visible !important; text-overflow: clip !important; font-size: clamp(9.5px, 2.8vw, 11px) !important; line-height: 1.2; text-align: right; }
html:not(.pcs-on) .m-devfield .m-label { align-items: flex-start; }
/* v5.8 상황 2·3의 카드 4개(유지비·요금제 목록·우리가족·위약금)는 공통지원금 카드처럼 한 줄 가로 카드로(사장님 09-18) */
@media (max-width: 599px) {
  html:not(.pcs-on) .m-sit:nth-of-type(2) .sit-body .choice-card, html:not(.pcs-on) .m-sit:nth-of-type(3) .sit-body .choice-card { grid-column: 1 / -1 !important; min-height: 0 !important; padding: 13px 22px 13px 14px !important; }
  html:not(.pcs-on) .m-sit:nth-of-type(2) .sit-body .choice-card .card-info, html:not(.pcs-on) .m-sit:nth-of-type(3) .sit-body .choice-card .card-info { flex-direction: row !important; align-items: baseline !important; gap: 8px !important; }
  html:not(.pcs-on) .m-sit:nth-of-type(2) .sit-body .choice-card::after, html:not(.pcs-on) .m-sit:nth-of-type(3) .sit-body .choice-card::after { bottom: 50% !important; transform: translateY(50%); right: 10px !important; }
}
@media (min-width: 600px) { html:not(.pcs-on) .sit-body .choice-card.hot { min-height: 84px !important; } }
/* v6.0 상황 2·3 카드 4개 = 공통지원금 카드와 크기·배치 동일(제목 위·설명 아래 가운데, 같은 높이·여백) */
@media (max-width: 599px) {
  html:not(.pcs-on) .sit-body .choice-card.hot, html:not(.pcs-on) .m-sit:nth-of-type(2) .sit-body .choice-card, html:not(.pcs-on) .m-sit:nth-of-type(3) .sit-body .choice-card { grid-column: 1 / -1 !important; min-height: 66px !important; height: 66px; padding: 10px 22px !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; box-sizing: border-box; }
  html:not(.pcs-on) .sit-body .choice-card.hot .card-info, html:not(.pcs-on) .m-sit:nth-of-type(2) .sit-body .choice-card .card-info, html:not(.pcs-on) .m-sit:nth-of-type(3) .sit-body .choice-card .card-info { flex-direction: column !important; align-items: center !important; gap: 2px !important; }
  html:not(.pcs-on) .sit-body .choice-card.hot::after, html:not(.pcs-on) .m-sit:nth-of-type(2) .sit-body .choice-card::after, html:not(.pcs-on) .m-sit:nth-of-type(3) .sit-body .choice-card::after { bottom: 6px !important; right: 9px !important; transform: none !important; }
}
/* v6.1 폴드 공통지원금 카드도 정중앙(가로·세로) */
@media (min-width: 600px) {
  html:not(.pcs-on) .sit-body .choice-card.hot { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; text-align: center !important; padding: 12px 22px 14px !important; }
  html:not(.pcs-on) .sit-body .choice-card.hot .card-info { flex-direction: column !important; align-items: center !important; justify-content: center !important; width: auto !important; }
}
/* v6.2 홈 히어로 강조 그라데이션(사장님 09-18 「홈 멘트도 바꾸고 강조는 그라데이션」) */
html:not(.pcs-on) .mhome .m-hero h1 .em.m-grad { background: linear-gradient(92deg, #b44220 0%, #e2743f 55%, #f2a37a 100%); -webkit-background-clip: text; background-clip: text; color: transparent !important; -webkit-text-fill-color: transparent; }
html:not(.pcs-on) body.dark-mode .mhome .m-hero h1 .em.m-grad { background: linear-gradient(92deg, #e9dcc0 0%, #f3ead6 60%, #fff8ea 100%); -webkit-background-clip: text; background-clip: text; }
html:not(.pcs-on) .mhome .m-hero h1 { font-size: clamp(22px, 6.6vw, 27px) !important; line-height: 1.25; letter-spacing: -.9px; }
/* v6.3 홈 히어로: 작은 제목과 큰 제목 붙이기, 큰 제목 한 줄 */
html:not(.pcs-on) .mhome .m-eyebrow { margin-bottom: 4px !important; display: block; }
html:not(.pcs-on) .mhome .m-hero h1 { margin: 0 0 8px !important; padding: 0 !important; font-size: clamp(22px, 7vw, 30px) !important; line-height: 1.2; white-space: nowrap; }
html:not(.pcs-on) .mhome .m-lead { margin: 0 0 14px !important; }
@media (max-width: 359px) { html:not(.pcs-on) .mhome .m-hero h1 { font-size: 21px !important; } }
/* v6.4 홈 시세표 카드: 평소엔 다른 카드와 같은 원색, 누를 때만 먹색으로(사장님 09-18) */
html:not(.pcs-on) .mhome .m-path.dark { background: var(--mp-paper); color: var(--mp-ink); border-color: var(--mp-line); }
html:not(.pcs-on) .mhome .m-path.dark .ic { background: var(--mp-hero); }
html:not(.pcs-on) .mhome .m-path.dark small { color: var(--mp-muted); }
html:not(.pcs-on) .mhome .m-path.dark .live-badge { color: var(--mp-accent); }
html:not(.pcs-on) .mhome .m-path { transition: background .12s, color .12s, border-color .12s, transform .12s; -webkit-tap-highlight-color: transparent; }
html:not(.pcs-on) .mhome .m-path:active, html:not(.pcs-on) .mhome .m-path.is-press { background: var(--mp-dark) !important; color: #f1eee5 !important; border-color: var(--mp-dark) !important; transform: scale(.98); }
html:not(.pcs-on) .mhome .m-path:active .ic, html:not(.pcs-on) .mhome .m-path.is-press .ic { background: #3b433b; }
html:not(.pcs-on) .mhome .m-path:active small, html:not(.pcs-on) .mhome .m-path.is-press small { color: #c9cdc4; }
html:not(.pcs-on) .mhome .m-path:active .live-badge, html:not(.pcs-on) .mhome .m-path.is-press .live-badge { color: #f2a37a; }
/* v6.5 가이드 줄 자동 흐름: 스냅 끄기(프로그램 스크롤과 싸움) */
html:not(.pcs-on) .mhome .m-guides.auto { scroll-snap-type: none; scroll-behavior: auto; }
/* v6.6 계산기 페이지 진입: 스크립트가 머리글·카드를 다 그리기 전엔 본문을 감췄다가 부드럽게 공개(옛 「인터넷 요금 계산기」 제목이 비치던 것). 스크립트가 못 돌아도 0.9초 뒤엔 무조건 보임 */
html:not(.pcs-on) body:not(.m-ready) > .container { opacity: 0; animation: m-reveal .3s ease .9s forwards; }
html:not(.pcs-on) body.m-ready > .container { animation: m-reveal .28s ease-out backwards; }   /* (09-20 밤) both → backwards: 채움이 남는 동안 .container 가 쌓임 문맥이 돼 안의 팝업(z 1000)이 하단 바(z 89) 밑에 깔렸다. 끝난 뒤엔 효과를 걷어 정상 쌓임으로 */
@keyframes m-reveal { from { opacity: 0; } to { opacity: 1; } }   /* v10.5 transform 금지(위와 같은 이유, .container 안 팝업 전부) */
/* v6.7 ⚠버그: 03 카드 접힘 규칙(.m-c3 .body{display:none})이 인터넷 카드 03(결합·사은품, 펼치기 상자 없음)까지 숨겨 결합 유형·사은품·위저드가 사라졌던 것 — 접힘은 .m-dbox 가 있는 카드만 */
html:not(.pcs-on) .m-c3:not(:has(> .m-dbox)) .body { display: block !important; margin-top: 0; }
/* v6.8 인터넷 결합 위저드(#bundle-wizard-modal) 토큰 */
html:not(.pcs-on) #bundle-wizard-modal .bw-sheet, html:not(.pcs-on) #bundle-wizard-modal .bw-card, html:not(.pcs-on) #bundle-wizard-modal .bw-panel, html:not(.pcs-on) #bundle-wizard-modal .bw-backdrop > div { background: var(--mp-paper) !important; color: var(--mp-ink) !important; }
html:not(.pcs-on) .bw-opt { background: var(--mp-bg) !important; border: 1px solid var(--mp-line) !important; color: var(--mp-ink) !important; border-radius: 10px !important; }
html:not(.pcs-on) .bw-opt.sel { background: var(--mp-soft) !important; border-color: var(--mp-accent) !important; box-shadow: inset 0 0 0 1px var(--mp-accent) !important; }
html:not(.pcs-on) .bw-opt small { color: var(--mp-muted) !important; }
html:not(.pcs-on) .bw-opt.sel small, html:not(.pcs-on) .bw-opt.sel strong, html:not(.pcs-on) .bw-opt.sel b { color: var(--mp-accent) !important; }
html:not(.pcs-on) .bw-arrow, html:not(.pcs-on) .bw-x { color: var(--mp-muted) !important; }
html:not(.pcs-on) .bw-steps span.on, html:not(.pcs-on) .bw-step.on, html:not(.pcs-on) .bw-prog .on { background: var(--mp-accent) !important; }
html:not(.pcs-on) #bundle-wizard-modal h2, html:not(.pcs-on) #bundle-wizard-modal h3 { color: var(--mp-ink) !important; }
html:not(.pcs-on) #bundle-wizard-modal .bw-next, html:not(.pcs-on) #bundle-wizard-modal .bw-done, html:not(.pcs-on) #bundle-wizard-modal button.primary { background: var(--mp-accent) !important; color: var(--mp-on-accent) !important; border: 0 !important; }
/* v6.9 결합 위저드 완료 화면: .bw-done 은 상자(주황 채움 X), 확인 버튼·다시 선택 링크·진행 점 토큰 */
html:not(.pcs-on) #bundle-wizard-modal .bw-done { background: var(--mp-hero) !important; color: var(--mp-ink) !important; border: 1px solid var(--mp-line) !important; border-radius: 12px !important; }
html:not(.pcs-on) #bundle-wizard-modal .bw-ok { background: var(--mp-accent) !important; color: var(--mp-on-accent) !important; }
html:not(.pcs-on) #bundle-wizard-modal .bw-sum { color: var(--mp-ink) !important; }
html:not(.pcs-on) #bundle-wizard-modal .bw-note { color: var(--mp-muted) !important; }
html:not(.pcs-on) #bundle-wizard-modal .bw-apply { background: var(--mp-accent) !important; color: var(--mp-on-accent) !important; border: 0 !important; border-radius: 8px !important; }
html:not(.pcs-on) #bundle-wizard-modal .bw-restart { background: transparent !important; color: var(--mp-accent) !important; }
html:not(.pcs-on) #bundle-wizard-modal .bw-prog i, html:not(.pcs-on) #bundle-wizard-modal .bw-steps i { background: var(--mp-line) !important; }
html:not(.pcs-on) #bundle-wizard-modal .bw-prog i.on, html:not(.pcs-on) #bundle-wizard-modal .bw-steps i.on, html:not(.pcs-on) #bundle-wizard-modal i.on { background: var(--mp-accent) !important; }
/* v7.0 설치 가능지역 팝업: 통신사 링크는 원래 브랜드색 유지(교정 제외), 단계 칩·팁 상자만 토큰 */
html:not(.pcs-on) #coverageCheckModal .cvc-step, html:not(.pcs-on) #coverageCheckModal .cvc-tip { background: var(--mp-hero) !important; color: var(--mp-ink) !important; border-color: var(--mp-line) !important; }
html:not(.pcs-on) #coverageCheckModal .cvc-step.on, html:not(.pcs-on) #coverageCheckModal .cvc-step.active { background: var(--mp-soft) !important; color: var(--mp-accent) !important; }
/* v7.1 지원금·자급제 팝업(모달 상태)도 인라인(dev-inline)과 같은 토큰: 히스토리·알림·스펙 버튼, 유형 세그먼트, 탭 */
html:not(.pcs-on) .sbsd-modal .sbsd-histbtn, html:not(.pcs-on) .sbsd-modal .sbsd-specbtn, html:not(.pcs-on) .sbsd-modal .sbsd-alertbtn, html:not(.pcs-on) .unlk-modal .unlk-gbtn, html:not(.pcs-on) .unlk-modal .unlk-sortbtn { border: 1px solid var(--mp-line) !important; border-radius: 999px !important; background: var(--mp-paper) !important; color: var(--mp-accent) !important; font-weight: 700 !important; box-shadow: none !important; }
html:not(.pcs-on) .sbsd-modal .sbsd-typeseg { border: 1px solid var(--mp-line) !important; border-radius: 8px !important; background: var(--mp-bg) !important; padding: 3px; }
html:not(.pcs-on) .sbsd-modal .sbsd-typeseg button { border: 0 !important; border-radius: 6px !important; background: transparent !important; color: var(--mp-muted) !important; }
html:not(.pcs-on) .sbsd-modal .sbsd-typeseg button.sbsd-on { background: var(--mp-paper) !important; color: var(--mp-ink) !important; box-shadow: inset 0 0 0 1px var(--mp-line) !important; }
html:not(.pcs-on) .sbsd-modal .sbsd-tab.sbsd-on, html:not(.pcs-on) .sbsd-modal .sbsd-tab.active { background: var(--mp-accent) !important; border-color: var(--mp-accent) !important; color: var(--mp-on-accent) !important; }
/* v7.2 공통지원금 표 통신사 색: SKT 남보라 · KT 청록 · U+ 마젠타(다크는 밝은 톤) — 교정 스크립트에서 제외 */
html:not(.pcs-on) .sbsd-body thead th:nth-child(2), html:not(.pcs-on) .sbsd-thead span:nth-child(2), html:not(.pcs-on) .sbsd-trow .sbsd-tamt:nth-child(2) [data-v], html:not(.pcs-on) .sbsd-body tbody td:nth-child(2) .sbsd-amt:not(.sbsd-none) { color: #3617CE !important; }
html:not(.pcs-on) .sbsd-body thead th:nth-child(3), html:not(.pcs-on) .sbsd-thead span:nth-child(3), html:not(.pcs-on) .sbsd-trow .sbsd-tamt:nth-child(3) [data-v], html:not(.pcs-on) .sbsd-body tbody td:nth-child(3) .sbsd-amt:not(.sbsd-none) { color: #00807B !important; }
html:not(.pcs-on) .sbsd-body thead th:nth-child(4), html:not(.pcs-on) .sbsd-thead span:nth-child(4), html:not(.pcs-on) .sbsd-trow .sbsd-tamt:nth-child(4) [data-v], html:not(.pcs-on) .sbsd-body tbody td:nth-child(4) .sbsd-amt:not(.sbsd-none) { color: #E6007E !important; }
html:not(.pcs-on) body.dark-mode .sbsd-body thead th:nth-child(2), html:not(.pcs-on) body.dark-mode .sbsd-thead span:nth-child(2), html:not(.pcs-on) body.dark-mode .sbsd-trow .sbsd-tamt:nth-child(2) [data-v], html:not(.pcs-on) body.dark-mode .sbsd-body tbody td:nth-child(2) .sbsd-amt:not(.sbsd-none) { color: #a394ff !important; }
html:not(.pcs-on) body.dark-mode .sbsd-body thead th:nth-child(3), html:not(.pcs-on) body.dark-mode .sbsd-thead span:nth-child(3), html:not(.pcs-on) body.dark-mode .sbsd-trow .sbsd-tamt:nth-child(3) [data-v], html:not(.pcs-on) body.dark-mode .sbsd-body tbody td:nth-child(3) .sbsd-amt:not(.sbsd-none) { color: #34d1c4 !important; }
html:not(.pcs-on) body.dark-mode .sbsd-body thead th:nth-child(4), html:not(.pcs-on) body.dark-mode .sbsd-thead span:nth-child(4), html:not(.pcs-on) body.dark-mode .sbsd-trow .sbsd-tamt:nth-child(4) [data-v], html:not(.pcs-on) body.dark-mode .sbsd-body tbody td:nth-child(4) .sbsd-amt:not(.sbsd-none) { color: #ff5fb8 !important; }
/* v7.3 공통지원금·자급제 팝업: 머리+필터+목록이 한 덩어리로 스크롤(목록만 따로 작은 창에서 굴러 「분리돼 보이던」 것), 표 머리만 붙박이 */
html:not(.pcs-on) .sbsd-overlay .sbsd-modal:not(.dev-inline), html:not(.pcs-on) .unlk-overlay .unlk-modal:not(.dev-inline) { display: block !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch; max-height: calc(92 * var(--dvhz, 1dvh)) !important; }
html:not(.pcs-on) .sbsd-modal:not(.dev-inline) .sbsd-body, html:not(.pcs-on) .unlk-modal:not(.dev-inline) .unlk-body { overflow: visible !important; max-height: none !important; flex: none !important; height: auto !important; }
html:not(.pcs-on) .sbsd-modal:not(.dev-inline) .sbsd-head, html:not(.pcs-on) .sbsd-modal:not(.dev-inline) .sbsd-typeseg, html:not(.pcs-on) .sbsd-modal:not(.dev-inline) .sbsd-tabs, html:not(.pcs-on) .sbsd-modal:not(.dev-inline) .sbsd-searchwrap, html:not(.pcs-on) .unlk-modal:not(.dev-inline) .unlk-head, html:not(.pcs-on) .unlk-modal:not(.dev-inline) .unlk-seg, html:not(.pcs-on) .unlk-modal:not(.dev-inline) .unlk-searchwrap { position: static !important; flex: none !important; }
html:not(.pcs-on) .sbsd-modal:not(.dev-inline) .sbsd-thead, html:not(.pcs-on) .unlk-modal:not(.dev-inline) .unlk-thead { position: sticky !important; top: 0; z-index: 3; background: var(--mp-paper) !important; padding-top: 8px !important; padding-bottom: 6px !important; }
html:not(.pcs-on) .sbsd-modal:not(.dev-inline) .sbsd-series, html:not(.pcs-on) .unlk-modal:not(.dev-inline) .unlk-series { position: static !important; }
html:not(.pcs-on) .sbsd-modal:not(.dev-inline) .sbsd-head { padding: 14px 44px 8px 16px !important; text-align: left !important; }
html:not(.pcs-on) .sbsd-modal:not(.dev-inline) .sbsd-head h2 { font-size: 16px !important; }
html:not(.pcs-on) .sbsd-modal:not(.dev-inline) .sbsd-sub { font-size: 11.5px !important; }
html:not(.pcs-on) .sbsd-modal:not(.dev-inline) .sbsd-tabs { padding: 10px 16px 6px !important; }
/* v7.4 공통지원금 팝업(모달 상태) 바탕·행 토큰 + 폰에서 기기 이름 칸 넓히기(60px 고정이라 「갤럭시/S25/울트라」로 쪼개지던 것) */
html:not(.pcs-on) .sbsd-modal:not(.dev-inline) { background: var(--mp-paper) !important; color: var(--mp-ink) !important; }
html:not(.pcs-on) .sbsd-modal:not(.dev-inline) .sbsd-thead { background: var(--mp-paper) !important; }
html:not(.pcs-on) .sbsd-modal:not(.dev-inline) .sbsd-trow { background: var(--mp-bg) !important; border: 1px solid var(--mp-line) !important; border-radius: 10px !important; }
html:not(.pcs-on) .sbsd-modal:not(.dev-inline) .sbsd-tgrid { gap: 6px !important; }
html:not(.pcs-on) .sbsd-modal:not(.dev-inline) .sbsd-tname, html:not(.pcs-on) .sbsd-modal:not(.dev-inline) .sbsd-tamt { color: var(--mp-ink) !important; }
html:not(.pcs-on) .sbsd-modal:not(.dev-inline) .sbsd-tamt small, html:not(.pcs-on) .sbsd-modal:not(.dev-inline) .sbsd-tmeta { color: var(--mp-muted) !important; }
html:not(.pcs-on) .sbsd-trow, html:not(.pcs-on) .sbsd-thead { grid-template-columns: minmax(0, 1.7fr) minmax(58px, 1fr) minmax(58px, 1fr) minmax(58px, 1fr) !important; gap: 4px !important; }
html:not(.pcs-on) .sbsd-trow .sbsd-tname { font-size: clamp(11px, 3.2vw, 12.5px) !important; line-height: 1.25; }
html:not(.pcs-on) .sbsd-trow .sbsd-tamt { font-size: clamp(10.5px, 3vw, 12px) !important; }
@media (max-width: 380px) { html:not(.pcs-on) .sbsd-trow, html:not(.pcs-on) .sbsd-thead { grid-template-columns: minmax(0, 1.5fr) minmax(52px, 1fr) minmax(52px, 1fr) minmax(52px, 1fr) !important; } html:not(.pcs-on) .sbsd-trow .sbsd-tamt { font-size: 10px !important; } }
/* v7.5 공통지원금·자급제 팝업: 위 블록(제목·버튼·필터·검색·칩·표 머리) 고정, 목록만 스크롤(사장님 「고정을 시켜놔야」) — v7.3 단일 스크롤 취소 */
html:not(.pcs-on) .sbsd-overlay .sbsd-modal:not(.dev-inline), html:not(.pcs-on) .unlk-overlay .unlk-modal:not(.dev-inline) { display: flex !important; flex-direction: column !important; overflow: hidden !important; max-height: calc(92 * var(--dvhz, 1dvh)) !important; }
html:not(.pcs-on) .sbsd-modal:not(.dev-inline) .sbsd-body, html:not(.pcs-on) .unlk-modal:not(.dev-inline) .unlk-body { overflow-y: auto !important; flex: 1 1 auto !important; min-height: 160px; padding-top: 0 !important; }
html:not(.pcs-on) .sbsd-modal:not(.dev-inline) .sbsd-thead, html:not(.pcs-on) .unlk-modal:not(.dev-inline) .unlk-thead { position: sticky !important; top: 0; z-index: 3; background: var(--mp-paper) !important; margin: 0 !important; padding: 8px 10px 6px !important; border-bottom: 1px solid var(--mp-line); }
html:not(.pcs-on) .sbsd-modal:not(.dev-inline) .sbsd-tabs { position: static !important; margin: 0 !important; padding: 8px 16px 8px !important; border-bottom: 1px solid var(--mp-line) !important; overflow-x: auto; flex-wrap: nowrap !important; }
html:not(.pcs-on) .sbsd-modal:not(.dev-inline) .sbsd-searchwrap { margin: 8px 16px 0 !important; }
html:not(.pcs-on) .sbsd-modal:not(.dev-inline) .sbsd-typeseg { margin: 8px 16px 0 !important; }
html:not(.pcs-on) .sbsd-modal:not(.dev-inline) .sbsd-typeseg button { padding: 7px 0 !important; font-size: 12px !important; }
html:not(.pcs-on) .sbsd-modal:not(.dev-inline) .sbsd-head { padding: 12px 44px 6px 16px !important; }
html:not(.pcs-on) .sbsd-modal:not(.dev-inline) .sbsd-head h2 { font-size: 15px !important; }
html:not(.pcs-on) .sbsd-modal:not(.dev-inline) .sbsd-sub { font-size: 11px !important; line-height: 1.4 !important; }
html:not(.pcs-on) .sbsd-modal:not(.dev-inline) .sbsd-histbtn, html:not(.pcs-on) .sbsd-modal:not(.dev-inline) .sbsd-specbtn, html:not(.pcs-on) .sbsd-modal:not(.dev-inline) .sbsd-alertbtn { padding: 4px 10px !important; font-size: 11.5px !important; }
html:not(.pcs-on) .sbsd-modal:not(.dev-inline) .sbsd-series { position: static !important; margin: 10px 0 4px !important; }
/* v7.6 공통지원금 팝업 표(table 형): 머리 붙박이·종이색, 행 구분 남색 띠 제거, 펼친 행은 hero */
html:not(.pcs-on) .sbsd-modal:not(.dev-inline) .sbsd-body table { border-collapse: separate !important; border-spacing: 0 !important; background: transparent !important; }
html:not(.pcs-on) .sbsd-modal:not(.dev-inline) .sbsd-body thead th { position: sticky !important; top: 0; z-index: 3; background: var(--mp-paper) !important; color: var(--mp-muted) !important; border-bottom: 1px solid var(--mp-line) !important; padding: 8px 6px !important; font-size: 11px !important; }
html:not(.pcs-on) .sbsd-modal:not(.dev-inline) .sbsd-body tbody tr, html:not(.pcs-on) .sbsd-modal:not(.dev-inline) .sbsd-body tbody td { background: var(--mp-paper) !important; border-color: var(--mp-line) !important; }
html:not(.pcs-on) .sbsd-modal:not(.dev-inline) .sbsd-body tbody td { border-bottom: 1px solid var(--mp-line) !important; padding: 9px 6px !important; color: var(--mp-ink) !important; }
html:not(.pcs-on) .sbsd-modal:not(.dev-inline) .sbsd-body tbody tr.sbsd-open td, html:not(.pcs-on) .sbsd-modal:not(.dev-inline) .sbsd-body tbody tr.open td, html:not(.pcs-on) .sbsd-modal:not(.dev-inline) .sbsd-body tbody tr[aria-expanded="true"] td, html:not(.pcs-on) .sbsd-modal:not(.dev-inline) .sbsd-body tbody tr.sbsd-detail td { background: var(--mp-hero) !important; }
html:not(.pcs-on) .sbsd-modal:not(.dev-inline) .sbsd-body tbody td small, html:not(.pcs-on) .sbsd-modal:not(.dev-inline) .sbsd-fac { color: var(--mp-muted) !important; }
html:not(.pcs-on) .sbsd-modal:not(.dev-inline) .sbsd-body td:first-child { font-size: clamp(11px, 3.2vw, 12.5px) !important; line-height: 1.25; }
html:not(.pcs-on) .sbsd-modal:not(.dev-inline) .sbsd-body td .sbsd-amt { font-size: clamp(10.5px, 3vw, 12px) !important; }
html:not(.pcs-on) .sbsd-modal:not(.dev-inline) .sbsd-body { padding: 0 12px 12px !important; }
html:not(.pcs-on) .sbsd-modal:not(.dev-inline) .sbsd-body .sbsd-series, html:not(.pcs-on) .sbsd-modal:not(.dev-inline) .sbsd-body h4 { background: transparent !important; color: var(--mp-muted) !important; }
/* v7.7 공통지원금 표: 폰에서 기기 이름이 한 글자씩 쪼개지던 것 — 열 폭 고정(이름 40% · 통신사 20%×3), 낱말 단위 줄바꿈, 좁으면 썸네일 숨김 */
html:not(.pcs-on) .sbsd-modal:not(.dev-inline) .sbsd-body table { table-layout: fixed !important; width: 100% !important; }
html:not(.pcs-on) .sbsd-modal:not(.dev-inline) .sbsd-body thead th:first-child, html:not(.pcs-on) .sbsd-modal:not(.dev-inline) .sbsd-body tbody td:first-child { width: 40% !important; word-break: keep-all !important; overflow-wrap: anywhere; }
html:not(.pcs-on) .sbsd-modal:not(.dev-inline) .sbsd-body thead th:nth-child(n+2), html:not(.pcs-on) .sbsd-modal:not(.dev-inline) .sbsd-body tbody td:nth-child(n+2) { width: 20% !important; padding-left: 2px !important; padding-right: 2px !important; }
html:not(.pcs-on) .sbsd-modal:not(.dev-inline) .sbsd-body td .sbsd-amt { white-space: nowrap; letter-spacing: -.2px; }
@media (max-width: 420px) {
  html:not(.pcs-on) .sbsd-modal:not(.dev-inline) .sbsd-body .sbsd-thumbfrm, html:not(.pcs-on) .sbsd-modal:not(.dev-inline) .sbsd-body td:first-child img { display: none !important; }
  html:not(.pcs-on) .sbsd-modal:not(.dev-inline) .sbsd-body td .sbsd-amt { font-size: 10.5px !important; }
  html:not(.pcs-on) .sbsd-modal:not(.dev-inline) .sbsd-body thead th:first-child, html:not(.pcs-on) .sbsd-modal:not(.dev-inline) .sbsd-body tbody td:first-child { width: 37% !important; }
  html:not(.pcs-on) .sbsd-modal:not(.dev-inline) .sbsd-body thead th:nth-child(n+2), html:not(.pcs-on) .sbsd-modal:not(.dev-inline) .sbsd-body tbody td:nth-child(n+2) { width: 21% !important; }
}
/* v7.8 표는 5열(이름·SKT·KT·U+·펼침 ▾) — 이름 40% · 통신사 17%×3 · 펼침 9% */
html:not(.pcs-on) .sbsd-modal:not(.dev-inline) .sbsd-body thead th:nth-child(n+2), html:not(.pcs-on) .sbsd-modal:not(.dev-inline) .sbsd-body tbody td:nth-child(n+2) { width: 17% !important; }
html:not(.pcs-on) .sbsd-modal:not(.dev-inline) .sbsd-body thead th:nth-child(5), html:not(.pcs-on) .sbsd-modal:not(.dev-inline) .sbsd-body tbody td:nth-child(5) { width: 9% !important; padding: 0 !important; }
html:not(.pcs-on) .sbsd-modal:not(.dev-inline) .sbsd-body thead th:first-child, html:not(.pcs-on) .sbsd-modal:not(.dev-inline) .sbsd-body tbody td:first-child { width: 40% !important; }
@media (max-width: 420px) { html:not(.pcs-on) .sbsd-modal:not(.dev-inline) .sbsd-body thead th:nth-child(n+2), html:not(.pcs-on) .sbsd-modal:not(.dev-inline) .sbsd-body tbody td:nth-child(n+2) { width: 18% !important; } html:not(.pcs-on) .sbsd-modal:not(.dev-inline) .sbsd-body thead th:nth-child(5), html:not(.pcs-on) .sbsd-modal:not(.dev-inline) .sbsd-body tbody td:nth-child(5) { width: 7% !important; } html:not(.pcs-on) .sbsd-modal:not(.dev-inline) .sbsd-body thead th:first-child, html:not(.pcs-on) .sbsd-modal:not(.dev-inline) .sbsd-body tbody td:first-child { width: 39% !important; } }
/* v7.9 폰 폭에서 금액 3열이 붙어 보이던 것: 이름 33% · 금액 20%×3 · ▾ 7%, 금액 10px·자간 축소, 「스펙」 배지는 이름 아래 인라인 */
@media (max-width: 420px) {
  html:not(.pcs-on) .sbsd-modal:not(.dev-inline) .sbsd-body thead th:first-child, html:not(.pcs-on) .sbsd-modal:not(.dev-inline) .sbsd-body tbody td:first-child { width: 33% !important; padding-left: 4px !important; padding-right: 2px !important; }
  html:not(.pcs-on) .sbsd-modal:not(.dev-inline) .sbsd-body thead th:nth-child(n+2), html:not(.pcs-on) .sbsd-modal:not(.dev-inline) .sbsd-body tbody td:nth-child(n+2) { width: 20% !important; padding-left: 1px !important; padding-right: 1px !important; text-align: center !important; }
  html:not(.pcs-on) .sbsd-modal:not(.dev-inline) .sbsd-body thead th:nth-child(5), html:not(.pcs-on) .sbsd-modal:not(.dev-inline) .sbsd-body tbody td:nth-child(5) { width: 7% !important; }
  html:not(.pcs-on) .sbsd-modal:not(.dev-inline) .sbsd-body td .sbsd-amt { font-size: 10px !important; letter-spacing: -.4px !important; }
  html:not(.pcs-on) .sbsd-modal:not(.dev-inline) .sbsd-body thead th { font-size: 10px !important; letter-spacing: -.2px; }
  html:not(.pcs-on) .sbsd-modal:not(.dev-inline) .sbsd-body td:first-child .sbsd-specbtn { position: static !important; display: inline-block !important; margin: 2px 0 0 !important; padding: 1px 6px !important; font-size: 9.5px !important; transform: none !important; }
  html:not(.pcs-on) .sbsd-modal:not(.dev-inline) .sbsd-body td:first-child { font-size: 11.5px !important; }
}
/* v8.0 공통지원금 표 「스펙」 태그: 폰에서는 썸네일 자체를 숨기고(태그 포함) 이름만, 넓은 폭은 태그 색만 토큰 */
html:not(.pcs-on) .sbsd-spectag { background: var(--mp-accent) !important; color: var(--mp-on-accent) !important; }
@media (max-width: 420px) { html:not(.pcs-on) .sbsd-modal:not(.dev-inline) .sbsd-body .sbsd-specthumb { display: none !important; } html:not(.pcs-on) .sbsd-modal:not(.dev-inline) .sbsd-body .sbsd-cell { gap: 0 !important; } html:not(.pcs-on) .sbsd-modal:not(.dev-inline) .sbsd-body td:nth-child(n+2):nth-child(-n+4) { padding-left: 3px !important; padding-right: 3px !important; } }
/* v8.1 폰에서도 모델 사진 표시(폴드처럼) — 작은 썸네일 28×34, 이름 38% · 금액 18%×3 · 펼침 8% */
@media (max-width: 420px) {
  html:not(.pcs-on) .sbsd-modal:not(.dev-inline) .sbsd-body .sbsd-specthumb { display: block !important; width: 28px; height: 34px; flex: none; }
  html:not(.pcs-on) .sbsd-modal:not(.dev-inline) .sbsd-body .sbsd-thumbfrm, html:not(.pcs-on) .sbsd-modal:not(.dev-inline) .sbsd-body td:first-child img { display: block !important; width: 28px !important; height: 34px !important; object-fit: contain; border-radius: 6px; background: var(--mp-hero) !important; }
  html:not(.pcs-on) .sbsd-modal:not(.dev-inline) .sbsd-body .sbsd-spectag { display: none !important; }
  html:not(.pcs-on) .sbsd-modal:not(.dev-inline) .sbsd-body .sbsd-cell { gap: 5px !important; align-items: center; }
  html:not(.pcs-on) .sbsd-modal:not(.dev-inline) .sbsd-body thead th:first-child, html:not(.pcs-on) .sbsd-modal:not(.dev-inline) .sbsd-body tbody td:first-child { width: 38% !important; }
  html:not(.pcs-on) .sbsd-modal:not(.dev-inline) .sbsd-body thead th:nth-child(n+2), html:not(.pcs-on) .sbsd-modal:not(.dev-inline) .sbsd-body tbody td:nth-child(n+2) { width: 18% !important; }
  html:not(.pcs-on) .sbsd-modal:not(.dev-inline) .sbsd-body thead th:nth-child(5), html:not(.pcs-on) .sbsd-modal:not(.dev-inline) .sbsd-body tbody td:nth-child(5) { width: 8% !important; }
  html:not(.pcs-on) .sbsd-modal:not(.dev-inline) .sbsd-body td .sbsd-amt { font-size: 9.5px !important; letter-spacing: -.5px !important; }
  html:not(.pcs-on) .sbsd-modal:not(.dev-inline) .sbsd-body .sbsd-name { font-size: 11px !important; line-height: 1.2; }
  html:not(.pcs-on) .sbsd-modal:not(.dev-inline) .sbsd-body .sbsd-rel { font-size: 9.5px !important; }
}
/* v8.2 공통지원금 시리즈 알약 줄: 한 줄로 잘리지 않게 줄바꿈(가로 스크롤로 잘려 「벗어나 보이던」 것) */
html:not(.pcs-on) .sbsd-modal:not(.dev-inline) .sbsd-tabs { flex-wrap: wrap !important; overflow: visible !important; gap: 6px !important; padding: 8px 16px 8px !important; }
html:not(.pcs-on) .sbsd-modal:not(.dev-inline) .sbsd-tab { flex: none !important; height: 30px !important; padding: 0 11px !important; font-size: 12px !important; }
html:not(.pcs-on) .sbsd-modal:not(.dev-inline) .sbsd-typeseg { width: auto !important; max-width: none !important; }
/* v8.3 알약·필터 반응형: 폰 폭에 맞춰 크기 축소(줄 수 줄임), 폴드는 원래 크기 */
html:not(.pcs-on) .sbsd-modal:not(.dev-inline) .sbsd-tab { height: clamp(26px, 7.6vw, 30px) !important; padding: 0 clamp(7px, 2.4vw, 11px) !important; font-size: clamp(10.5px, 3.1vw, 12px) !important; }
html:not(.pcs-on) .sbsd-modal:not(.dev-inline) .sbsd-tabs { gap: clamp(4px, 1.4vw, 6px) !important; padding: clamp(6px, 2vw, 8px) 16px !important; }
html:not(.pcs-on) .sbsd-modal:not(.dev-inline) .sbsd-typeseg button { font-size: clamp(11px, 3.2vw, 12.5px) !important; padding: clamp(6px, 1.8vw, 8px) 0 !important; }
html:not(.pcs-on) .sbsd-modal:not(.dev-inline) .sbsd-searchwrap input, html:not(.pcs-on) .sbsd-modal:not(.dev-inline) .sbsd-sortbtn { height: clamp(34px, 10vw, 40px) !important; font-size: clamp(11.5px, 3.3vw, 13px) !important; }
/* v8.4 폰 썸네일: 원래 틀(30×30, contain)로 되돌려 잘림 없이 + 「스펙」 태그 다시 표시(작게) */
@media (max-width: 420px) {
  html:not(.pcs-on) .sbsd-modal:not(.dev-inline) .sbsd-body .sbsd-specthumb { width: auto; height: auto; }
  html:not(.pcs-on) .sbsd-modal:not(.dev-inline) .sbsd-body .sbsd-thumbfrm { display: block !important; width: 30px !important; height: 30px !important; padding: 2px !important; box-sizing: border-box; overflow: hidden; border-radius: 8px; background: var(--mp-hero) !important; border: 1px solid var(--mp-line) !important; }
  html:not(.pcs-on) .sbsd-modal:not(.dev-inline) .sbsd-body td:first-child img { display: block !important; width: 100% !important; height: 100% !important; object-fit: contain !important; border-radius: 0; background: transparent !important; }
  html:not(.pcs-on) .sbsd-modal:not(.dev-inline) .sbsd-body .sbsd-spectag { display: block !important; font-size: 8px !important; padding: 0 4px !important; line-height: 13px !important; bottom: -4px !important; }
}
/* v8.5 팝업 열림 중 뒤 화면 스크롤 잠금(body 고정) */
html:not(.pcs-on) body.m-lock { overflow: clip !important; overscroll-behavior: none; }   /* v11.7 hidden 은 body 를 새 스크롤 상자로 만들어 sticky 헤더가 body 기준으로 붙어 화면 밖으로 나갔다(사장님 09-19 「단말기 정보 열리면 헤더 사라짐」) → clip 은 스크롤 상자를 안 만든다. 실제 잠금은 아래 html:has(body.m-lock) overflow:hidden 이 맡음 */   /* v10.2 position:fixed 고정은 앱에서 맨 위로 튀어 overflow 만(스크롤 위치 보존) */
html:not(.pcs-on) .modal-overlay, html:not(.pcs-on) .bottom-sheet-modal, html:not(.pcs-on) .m-devsheet .list, html:not(.pcs-on) .sbsd-body, html:not(.pcs-on) .unlk-body, html:not(.pcs-on) .spb-body { overscroll-behavior: contain; }
/* v8.6 폴드·태블릿에서도 기기 구매가 칸은 한 줄 가득(납부 방식은 아래로) — 사장님 「폴드 펼친 데서 구매가 박스가 절반」 */
html:not(.pcs-on) .device-payment-row { flex-wrap: wrap !important; }
html:not(.pcs-on) .device-payment-row > .input-group { flex: 1 1 100% !important; width: 100% !important; max-width: none !important; }
/* v8.7 가이드 목록 머리 「제대로 알고」 그라데이션(사장님 09-18) */
html:not(.pcs-on) .g-head h1 em { font-style: normal; background: linear-gradient(92deg, #b44220 0%, #e2743f 55%, #f2a37a 100%); -webkit-background-clip: text; background-clip: text; color: transparent !important; -webkit-text-fill-color: transparent; }
html:not(.pcs-on) body.dark-mode .g-head h1 em, html:not(.pcs-on) html.dark .g-head h1 em { background: linear-gradient(92deg, #e9dcc0 0%, #f3ead6 60%, #fff8ea 100%); -webkit-background-clip: text; background-clip: text; }
/* v8.8 가이드 본문: 대제목 em 그라데이션(v8.7) + 소제목(h2.sec)·「결론부터」 제목·강조(b/strong)·FAQ 물음 그라데이션/토큰 (사장님 09-18) */
html:not(.pcs-on) .g-body h2.sec { font-size: clamp(16px, 4.8vw, 19px) !important; font-weight: 700 !important; letter-spacing: -.5px; margin: 22px 0 8px !important; padding: 0 0 0 12px !important; border: 0 !important; position: relative; background: linear-gradient(92deg, #b44220 0%, #e2743f 60%, #f2a37a 100%); -webkit-background-clip: text; background-clip: text; color: transparent !important; -webkit-text-fill-color: transparent; }
html:not(.pcs-on) .g-body h2.sec::before { content: ""; position: absolute; left: 0; top: 4px; bottom: 4px; width: 4px; border-radius: 2px; background: linear-gradient(180deg, #b44220, #f2a37a); }
html:not(.pcs-on) body.dark-mode .g-body h2.sec { background: linear-gradient(92deg, #e9dcc0 0%, #f3ead6 60%, #fff8ea 100%); -webkit-background-clip: text; background-clip: text; }
html:not(.pcs-on) .g-body .tldr { background: var(--mp-hero) !important; border: 1px solid var(--mp-line) !important; border-left: 4px solid var(--mp-accent) !important; border-radius: 10px !important; }
html:not(.pcs-on) .g-body .tldr .t { background: linear-gradient(92deg, #b44220, #e2743f); -webkit-background-clip: text; background-clip: text; color: transparent !important; -webkit-text-fill-color: transparent; font-weight: 800 !important; }
html:not(.pcs-on) body.dark-mode .g-body .tldr .t { background: linear-gradient(92deg, #e9dcc0, #fff8ea); -webkit-background-clip: text; background-clip: text; }
html:not(.pcs-on) .g-body .tx b, html:not(.pcs-on) .g-body .tx strong, html:not(.pcs-on) .g-body .tldr strong, html:not(.pcs-on) .g-body li strong { color: var(--mp-accent) !important; font-weight: 700; }
html:not(.pcs-on) .g-body .faq summary, html:not(.pcs-on) .g-body .faq .q, html:not(.pcs-on) .g-body details summary { color: var(--mp-ink) !important; font-weight: 600 !important; }
html:not(.pcs-on) .g-body .faq summary::marker, html:not(.pcs-on) .g-body details summary::marker { color: var(--mp-accent); }
html:not(.pcs-on) .g-body .ex-note, html:not(.pcs-on) .g-body .rel { background: var(--mp-hero) !important; border: 1px solid var(--mp-line) !important; border-radius: 10px !important; }
html:not(.pcs-on) .g-body .rel a, html:not(.pcs-on) .g-body .tx a { color: var(--mp-accent) !important; }
html:not(.pcs-on) .g-body .g-table-wrap th { background: var(--mp-hero) !important; color: var(--mp-ink) !important; }
html:not(.pcs-on) .g-body .g-table-wrap td, html:not(.pcs-on) .g-body .g-table-wrap th { border-color: var(--mp-line) !important; }
html:not(.pcs-on) .g-crumb { background: linear-gradient(92deg, #b44220, #e2743f); -webkit-background-clip: text; background-clip: text; color: transparent !important; -webkit-text-fill-color: transparent; }
html:not(.pcs-on) body.dark-mode .g-crumb { background: linear-gradient(92deg, #e9dcc0, #fff8ea); -webkit-background-clip: text; background-clip: text; }
/* v8.9 홈 01·02·03 띠: 글자 폭에 맞춰 축소·세 칸 같은 높이 */
html:not(.pcs-on) .mhome .m-proof { align-items: stretch; }
html:not(.pcs-on) .mhome .m-proof > div { padding: 9px 6px 8px; font-size: 12px; line-height: 1.3; letter-spacing: -.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; word-break: keep-all; }   /* v11.9 사장님 09-19 「글자 줄이고 한 줄로, 반응형」 — 폰 폭 단계별로 글자를 줄여 항상 한 줄 */
@media (max-width: 479px) { html:not(.pcs-on) .mhome .m-proof > div { font-size: 11px; } }
@media (max-width: 429px) { html:not(.pcs-on) .mhome .m-proof > div { font-size: 10px; padding: 8px 4px 7px; } }
@media (max-width: 389px) { html:not(.pcs-on) .mhome .m-proof > div { font-size: 9px; letter-spacing: -.03em; } }
@media (max-width: 359px) { html:not(.pcs-on) .mhome .m-proof > div { font-size: 8.5px; } }
@media (max-width: 339px) { html:not(.pcs-on) .mhome .m-proof > div { font-size: 7.8px; } }
html:not(.pcs-on) .mhome .m-proof > div { text-align: center; }   /* v12.0 가운데 정렬 */
html:not(.pcs-on) .mhome .m-proof > div span { font-size: .85em; margin: 0 3px 0 0; }
/* v9.0 허브 상자 안 카드 = 머리(sit-head)와 같은 폭(사장님 09-18 「모든 도형 사이즈를 헤드 사이즈로」): 안쪽 여백·좌우 테두리 없이 위아래 구분선만 */
html:not(.pcs-on) .sit-body { padding: 0 !important; gap: 0 !important; }
html:not(.pcs-on) .sit-body .choice-card, html:not(.pcs-on) .sit-body .choice-card.hot, html:not(.pcs-on) .sit-body .choice-card.highlight-card, html:not(.pcs-on) .sit-body .choice-card:first-child:not(.hot) { border-left: 0 !important; border-right: 0 !important; border-top: 0 !important; border-bottom: 1px solid var(--mp-line) !important; border-radius: 0 !important; margin: 0 !important; width: 100% !important; }
html:not(.pcs-on) .sit-body .choice-card:last-child { border-bottom: 0 !important; }
html:not(.pcs-on) .sit-body .choice-card.hot { border-bottom-color: var(--mp-dark) !important; }
@media (max-width: 599px) { html:not(.pcs-on) .sit-body { grid-template-columns: 1fr 1fr !important; } html:not(.pcs-on) .sit-body .choice-card:not(.hot):nth-child(even) { border-left: 1px solid var(--mp-line) !important; } html:not(.pcs-on) .m-sit:nth-of-type(2) .sit-body .choice-card, html:not(.pcs-on) .m-sit:nth-of-type(3) .sit-body .choice-card { border-left: 0 !important; } }
html:not(.pcs-on) .m-sit { overflow: hidden; }
/* v9.1 구분선은 1px 틈(배경 선색)으로 — 마지막 줄 아래엔 선 안 남음 */
html:not(.pcs-on) .sit-body { gap: 1px !important; background: var(--mp-line); padding: 0 !important; border-top: 1px solid var(--mp-line); }
html:not(.pcs-on) .sit-body .choice-card, html:not(.pcs-on) .sit-body .choice-card.hot, html:not(.pcs-on) .sit-body .choice-card.highlight-card, html:not(.pcs-on) .sit-body .choice-card:first-child:not(.hot) { border: 0 !important; border-radius: 0 !important; }
html:not(.pcs-on) .sit-body .choice-card:not(.hot) { background: var(--mp-paper) !important; }
html:not(.pcs-on) .m-sit.open .sit-head, html:not(.pcs-on) .sit-head { border-bottom: 0 !important; }
@media (min-width: 600px) { html:not(.pcs-on) .sit-body { border-top: 1px solid var(--mp-line) !important; } }
/* v9.2 상자 안 빈 자리가 선색으로 차던 것 → 바탕은 종이색, 구분선은 카드 그림자로 */
html:not(.pcs-on) .sit-body { background: var(--mp-paper) !important; gap: 0 !important; }
html:not(.pcs-on) .sit-body .choice-card:not(.hot) { box-shadow: 0 1px 0 var(--mp-line) !important; }
@media (max-width: 599px) { html:not(.pcs-on) .m-sit:nth-of-type(1) .sit-body .choice-card:not(.hot):nth-child(even) { box-shadow: inset 1px 0 0 var(--mp-line), 0 1px 0 var(--mp-line) !important; } }
html:not(.pcs-on) .sit-body .choice-card.hot { box-shadow: none !important; }
/* v9.3 태블릿 가로(≥1024, 하단 5탭이 상단 메뉴로 바뀌어 사라짐): 바닥 바를 화면 맨 아래에 붙이고 본문 여백도 그만큼만 */
@media (min-width: 1024px) {
  html:not(.pcs-on) .m-cta { bottom: 0 !important; }
  html:not(.pcs-on) body.m-calc { padding-bottom: calc(110px + env(safe-area-inset-bottom)) !important; }
  html:not(.pcs-on) .m-cta .row, html:not(.pcs-on) .m-cta .sum { max-width: 1100px; }
}
/* v9.4 태블릿 가로(≥1024): 계산기 카드·허브·머리글 폭 = 상단 메뉴 안쪽 폭(1100) */
@media (min-width: 1024px) {
  html:not(.pcs-on) body.m-calc #calculator-choice-wrapper, html:not(.pcs-on) body.m-choice #calculator-choice-wrapper, html:not(.pcs-on) .main-content, html:not(.pcs-on) body.m-calc .page-header, html:not(.pcs-on) #result { max-width: none !important; width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; margin-right: 0 !important; box-sizing: border-box; }
  html:not(.pcs-on) body > .container { padding-left: 0 !important; padding-right: 0 !important; }
}
/* v9.5 태블릿 가로(≥1024) 홈: 본문 폭을 상단 메뉴의 로고~우측 아이콘 폭(1100 안쪽 여백 20 → 1060)에 맞춤(사장님 09-18 「패드에서 메인화면 전체를 헤더 로고 위주로」) */
@media (min-width: 1024px) {
  html:not(.pcs-on) .mhome .m-hero, html:not(.pcs-on) .mhome .m-slides, html:not(.pcs-on) .mhome .m-notice, html:not(.pcs-on) .mhome .m-proof, html:not(.pcs-on) .mhome .m-sec, html:not(.pcs-on) .mhome .m-foot { max-width: 1060px; margin-left: auto; margin-right: auto; }
}
/* v9.6 공지사항 제목 정리(사장님 09-18 「공지사항 제목 부분 개선」): 머리 = 킥커 + 「모플랜 새 소식」 그라데이션 + 설명, 목록 = 태그 알약 + 먹색 제목(두 줄까지) + 날짜, 오른쪽 ›  */
html:not(.pcs-on) #notice-list-container a.notice-link-item { display: grid !important; grid-template-columns: minmax(0, 1fr) 18px; align-items: center; column-gap: 6px; padding: 13px 12px 13px 14px !important; }
html:not(.pcs-on) #notice-list-container a.notice-link-item > .text-left { min-width: 0; }
html:not(.pcs-on) #notice-list-container .m-ntag { display: inline-block; margin: 0 0 6px; padding: 2px 8px; border-radius: 999px; font-size: 10.5px; font-weight: 800; letter-spacing: .2px; line-height: 1.5; background: var(--mp-hero); color: var(--mp-muted); }
html:not(.pcs-on) #notice-list-container .m-ntag.update { background: var(--mp-soft); color: var(--mp-accent); }
html:not(.pcs-on) #notice-list-container .m-ntag.warn { background: #fde8e6; color: #b3261e; }
html:not(.pcs-on) body.dark-mode #notice-list-container .m-ntag.warn { background: #4a2a28; color: #ff9b93; }
html:not(.pcs-on) #notice-list-container h2.m-nt, html:not(.pcs-on) #notice-list-container a > div:first-child h2.m-nt { font-size: clamp(13.5px, 3.8vw, 15px) !important; font-weight: 600 !important; line-height: 1.4 !important; letter-spacing: -.3px; color: var(--mp-ink) !important; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: keep-all; }
html:not(.pcs-on) #notice-list-container a.notice-link-item p { margin: 5px 0 0 !important; font-size: 11.5px !important; color: var(--mp-muted) !important; }
html:not(.pcs-on) #notice-list-container .m-nchev { font-size: 20px; line-height: 1; color: var(--mp-line); text-align: right; }
html:not(.pcs-on) #notice-list-container a.notice-link-item:active { background: var(--mp-hero) !important; }
html:not(.pcs-on) body.m-notice .m-board-head { margin: 10px 0 14px !important; }
html:not(.pcs-on) body.m-notice .m-board-head h2 { font-size: clamp(19px, 5.6vw, 22px) !important; letter-spacing: -.6px; }
html:not(.pcs-on) body.m-notice .m-board-head .kicker { letter-spacing: .6px; }
@media (min-width: 600px) { html:not(.pcs-on) #notice-list-container a.notice-link-item { padding: 15px 14px 15px 18px !important; } }
/* v9.7 시세 게시물 카드 개선(사장님 09-18 「게시물도 좀 개선 필요」): 시안 board.html 의 가로 행(썸네일 96 · 메타 알약 · 지역 제목 · 본문 한 줄 · 바닥 시각/사진 수)로.
   + 「데이터 옮기기」 띠 다크모드(흰 글자 고정이던 것 → 토큰) + 토스트가 헤더를 덮던 것 → 헤더 아래로 + 검색창 자동완성(이메일) 차단은 community.html 속성 */
html.pcs-on .m-snip, html.pcs-on .m-pics { display: none !important; }
html:not(.pcs-on) .post-card { grid-template-columns: 96px minmax(0, 1fr) !important; column-gap: 12px !important; padding: 12px 12px 12px 12px !important; align-items: start; }
html:not(.pcs-on) .post-card .aspect-square { grid-row: 1 / span 8 !important; width: 96px !important; height: 96px !important; border-radius: 10px !important; }
html:not(.pcs-on) .post-card .aspect-square img { width: 100%; height: 100%; object-fit: cover; }
html:not(.pcs-on) .post-card > div > .flex.justify-between { order: 2; margin: 0 0 2px !important; align-items: center !important; }
html:not(.pcs-on) .post-card > div > .flex.justify-between > span { display: none !important; }   /* 카메라 아이콘은 「사진 N장」으로 대체 */
html:not(.pcs-on) .post-card h3 { font-size: clamp(14px, 4vw, 15.5px) !important; line-height: 1.35 !important; white-space: normal !important; overflow: visible !important; text-overflow: clip !important; }
html:not(.pcs-on) .post-card > div > .mb-1:not(.flex) { order: 1; margin: 0 0 6px !important; display: flex; gap: 4px; flex-wrap: wrap; }
html:not(.pcs-on) .post-card span[class*="text-[7px]"] { font-size: 10.5px !important; font-weight: 800 !important; padding: 2px 8px !important; line-height: 1.5 !important; margin: 0 !important; }
html:not(.pcs-on) .post-card .bg-emerald-100 { background: #e3f1e8 !important; color: #2f7d4f !important; }
html:not(.pcs-on) body.dark-mode .post-card .bg-emerald-100 { background: #1f3a2a !important; color: #7fd39d !important; }
html:not(.pcs-on) .post-card .bg-purple-100 { background: var(--mp-soft) !important; color: var(--mp-accent) !important; }
html:not(.pcs-on) .post-card .bg-amber-100 { background: var(--mp-hero) !important; color: var(--mp-muted) !important; }
html:not(.pcs-on) .post-card p[class*="text-[9px]"] { order: 3; margin: 0 !important; font-size: 12px !important; white-space: nowrap !important; overflow: hidden; text-overflow: ellipsis; }
html:not(.pcs-on) .post-card .m-snip { order: 4; margin: 5px 0 0 !important; font-size: 12.5px; line-height: 1.45; color: var(--mp-ink); opacity: .85; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: keep-all; }
html:not(.pcs-on) .post-card > div > .mt-auto { order: 5; margin: 8px 0 0 !important; padding: 0 !important; border: 0 !important; display: flex !important; flex-direction: row !important; align-items: center !important; gap: 8px !important; flex-wrap: wrap; }
html:not(.pcs-on) .post-card .m-pics { font-size: 10.5px; font-weight: 700; color: var(--mp-muted); background: var(--mp-hero); padding: 2px 7px; border-radius: 6px; line-height: 1.5; }
html:not(.pcs-on) .post-card span[class*="text-[6px]"] { font-size: 11px !important; line-height: 1.5 !important; }
html:not(.pcs-on) .post-card span.text-indigo-400 { color: var(--mp-accent) !important; }
html:not(.pcs-on) .post-card:active { background: var(--mp-hero) !important; }
html:not(.pcs-on) .post-card .dday-badge { font-size: 10px !important; padding: 2px 6px !important; border-radius: 6px !important; }
/* 데이터 옮기기 띠: 라이트·다크 모두 토큰 */
html:not(.pcs-on) .board-dtguide { background: var(--mp-hero) !important; border: 1px solid var(--mp-line) !important; }
html:not(.pcs-on) .board-dtguide .t { color: var(--mp-ink) !important; }
html:not(.pcs-on) .board-dtguide .s { color: var(--mp-muted) !important; }
html:not(.pcs-on) .board-dtguide .btn { background: var(--mp-accent) !important; color: var(--mp-on-accent) !important; }
html:not(.pcs-on) .board-dtguide .em { filter: none; }
/* 토스트: 헤더(56px) 아래 */
html:not(.pcs-on) #toast-container { top: calc(62px + env(safe-area-inset-top, 0px)) !important; right: 12px !important; left: 12px !important; align-items: stretch; }
/* v9.8 토스트는 제목을 덮지 않게 하단 탭 위로 · 검색창 크롬 자동완성 파란 배경 제거 */
html:not(.pcs-on) #toast-container { top: auto !important; bottom: calc(78px + env(safe-area-inset-bottom, 0px)) !important; }
@media (min-width: 1024px) { html:not(.pcs-on) #toast-container { bottom: 20px !important; left: auto !important; right: 20px !important; } }
html:not(.pcs-on) body.m-board #search-input:-webkit-autofill, html:not(.pcs-on) body.m-board #search-input:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 100px var(--mp-paper) inset !important; -webkit-text-fill-color: var(--mp-ink) !important; }
/* v9.9 검색창 다크모드(사장님 09-18 「검색 부분도 다크모드」): 크롬 비밀번호 관리자가 숨은 관리자 로그인 칸의 「아이디」로 검색창을 골라 이메일을 채우고 파란 배경을 씌우던 것.
   근본 해결은 community.html 의 admin-email/password 에 autocomplete 지정, 여기서는 자동완성 배경을 종이색으로 덮는다 */
html:not(.pcs-on) body.m-board #search-input:-webkit-autofill, html:not(.pcs-on) body.m-board #search-input:-webkit-autofill:hover, html:not(.pcs-on) body.m-board #search-input:-webkit-autofill:focus { transition: background-color 9999s ease-in-out 0s !important; -webkit-box-shadow: 0 0 0 1000px var(--mp-paper) inset !important; box-shadow: 0 0 0 1000px var(--mp-paper) inset !important; -webkit-text-fill-color: var(--mp-ink) !important; caret-color: var(--mp-ink); }
html:not(.pcs-on) body.m-board #search-input { background-color: var(--mp-paper) !important; color: var(--mp-ink) !important; }
html:not(.pcs-on) body.m-board #search-input::placeholder { color: var(--mp-muted) !important; }
/* v10.0 휴대폰 계산기: 결과는 「이 조건으로 계산하기」를 눌러야 보인다(사장님 09-18). 입력이 마지막 계산 때와 다르면 m-calc.js 가 body.m-wait 를 켠다 */
html:not(.pcs-on) body.m-calc.m-wait #result, html:not(.pcs-on) body.m-calc.m-wait #error-message:empty { display: none !important; }
html:not(.pcs-on) body.m-calc.m-wait .m-cta .calc { box-shadow: 0 0 0 3px var(--mp-soft); }
/* v10.1 인터넷 계산기도 버튼식(사장님 09-18 「인터넷도 똑같이 버튼식으로」): m-internet.js 3.1 이 body.m-wait 를 켜면 결과 숨김 */
html:not(.pcs-on) body.m-wait #result { display: none !important; }
html:not(.pcs-on) body.m-wait .m-cta .calc { box-shadow: 0 0 0 3px var(--mp-soft); }
html:not(.pcs-on) .m-cta .m-cta-hint:empty { display: none; }
/* v10.2 잠금은 뷰포트(html)에도 걸어 손가락 스크롤을 확실히 막는다(자리 이동 없음) */
html:not(.pcs-on):has(body.m-lock) { overflow: hidden !important; }
/* v10.3 다크모드 강조색 살구(#f2a37a) → 크림·아이보리(#e9dcc0, 사장님 09-18 시안 4번 선택): 토큰·다크 그라데이션 교체, 강조 카드 위 화살표는 글자색으로 */
html:not(.pcs-on) body.dark-mode .choice-card.m-primary-card::after, html:not(.pcs-on) body.dark-mode .sit-body .choice-card.hot::after, html:not(.pcs-on) body.dark-mode .choice-grid .choice-card.hot::after, html:not(.pcs-on) body.dark-mode .choice-buttons-container .choice-button:first-child::after { color: var(--mp-on-accent) !important; opacity: .7; }
html:not(.pcs-on) body.dark-mode .mhome .m-path:active .live-badge, html:not(.pcs-on) body.dark-mode .mhome .m-path.is-press .live-badge { color: var(--mp-accent) !important; }
/* v10.4 허브 버튼 도형(사장님 09-18): 제목 앞 둥근 배지 + 이모지. 강조(hot) 카드는 어두운 바탕이라 밝은 배지 */
html:not(.pcs-on) .choice-card .card-info strong .m-ico { display: inline-grid; place-items: center; width: 24px; height: 24px; margin-right: 7px; border-radius: 8px; background: var(--mp-soft); color: var(--mp-accent); font-size: 12.5px; font-weight: 800; font-style: normal; vertical-align: -6px; letter-spacing: 0; }
html:not(.pcs-on) .sit-body .choice-card.hot .card-info strong .m-ico { background: rgba(255,255,255,.14); color: #f1eee5; }
html:not(.pcs-on) body.dark-mode .sit-body .choice-card.hot .card-info strong .m-ico { background: rgba(0,0,0,.14); color: var(--mp-on-accent); }
/* v10.6 PC(html.pcs-on)에서는 모바일 상단 바·하단 탭을 숨긴다 — 홈(index)은 복사본이 p82-nav 를 새로 실었는데 PC 홈엔 showroom-bridge 의 숨김 규칙이 없어 PC 헤더와 겹쳤다 */
html.pcs-on nav.p82nav, html.pcs-on .p82n-tabs, html.pcs-on .p82n-sheet, html.pcs-on .p82n-dim { display: none !important; }
/* v10.7 폰(≤599) 허브 첫 상황의 4버튼(선택약정·공통 vs 선약·매장 vs 자급제·통신사 비교)을 점선 도형으로(사장님 09-18 「점선이라도 그려서 도형으로」). 강조(hot) 카드·다른 상황 칸은 그대로 */
@media (max-width: 599px) {
  html:not(.pcs-on) .m-sit:nth-of-type(1) .sit-body { gap: 8px !important; padding: 10px !important; }
  html:not(.pcs-on) .m-sit:nth-of-type(1) .sit-body .choice-card.hot { grid-column: 1 / -1; margin: -10px -10px 2px !important; width: auto !important; }
  html:not(.pcs-on) .m-sit:nth-of-type(1) .sit-body .choice-card:not(.hot), html:not(.pcs-on) .m-sit:nth-of-type(1) .sit-body .choice-card:not(.hot):nth-child(even) { border: 1.5px dashed var(--mp-line) !important; border-left: 1.5px dashed var(--mp-line) !important; border-radius: 12px !important; box-shadow: none !important; background: var(--mp-bg) !important; }
  html:not(.pcs-on) .m-sit:nth-of-type(1) .sit-body .choice-card:not(.hot):active { background: var(--mp-hero) !important; border-style: solid !important; }
}
/* v10.7b 점선 도형 안에서는 아이콘을 제목 위 가운데로(제목이 두 줄로 접혀도 가운데 정렬 유지) */
@media (max-width: 599px) {
  html:not(.pcs-on) .m-sit:nth-of-type(1) .sit-body .choice-card:not(.hot) .card-info strong .m-ico { display: grid; margin: 0 auto 6px; width: 28px; height: 28px; border-radius: 9px; font-size: 14px; vertical-align: 0; }
  html:not(.pcs-on) .m-sit:nth-of-type(1) .sit-body .choice-card:not(.hot) .card-info strong { display: block; text-align: center; line-height: 1.25; }
}
/* v10.8 허브 버튼 아이콘 제거(사장님 09-18 「아이콘 굳이 필요한가, 아이콘 때문에 두 줄」) — 점선 도형만 남김 */
html:not(.pcs-on) .choice-card .card-info strong .m-ico { display: none !important; }
/* v10.9 자급제 카드 「기기값 확인」 줄: 자급제 가격 | 카드 할부 계산기 두 알약 나란히, 안내 문단은 숨김(사장님 09-18) */
html:not(.pcs-on) #unlocked-installment-note.m-hide-note { display: none !important; }
html:not(.pcs-on) .m-unl-row { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
html:not(.pcs-on) .m-unl-row > .plan-list-btn { margin: 0 !important; min-width: 0; }
html:not(.pcs-on) .m-unl-row > .plan-list-btn .ppb-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* v11.0 키보드 열린 동안 바닥 바 숨김(m-popfix 2.0 이 body.m-kb 토글) — 입력 끝나고 키보드 내리면 다시 보인다 */
html:not(.pcs-on) body.m-kb .m-cta { display: none !important; }
/* v13.1 (2026-09-21) 결합표 팝업(#combinationInfoModal): 창(overflow auto)·상자(.modal-content 85vh auto)·표(.combination-content 70vh auto) 세 겹이 다 굴러 폰에서 스크롤이 중간에 멎고 가로↔세로 돌리면 풀리던 것(사장님 「심각한 문제」).
   공통지원금 팝업(v7.5)과 같은 꼴로 — 상자는 dvh 기준 한 덩어리(주소창 오르내림 추적), 굴러가는 건 표 한 겹만 */
html:not(.pcs-on) #combinationInfoModal { overflow: hidden !important; padding: calc(4 * var(--dvhz, 1dvh)) 12px !important; box-sizing: border-box; }
html:not(.pcs-on) #combinationInfoModal .modal-content { display: flex !important; flex-direction: column !important; margin: 0 auto !important; width: 100% !important; max-height: calc(92 * var(--dvhz, 1dvh)) !important; overflow: hidden !important; overscroll-behavior: auto !important; }
html:not(.pcs-on) #combinationInfoModal .modal-header, html:not(.pcs-on) #combinationInfoModal .combination-tabs { flex: none; }
html:not(.pcs-on) #combinationInfoModal .combination-content { flex: 1 1 auto !important; min-height: 0 !important; max-height: none !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
html:not(.pcs-on) body.m-kb.m-calc { padding-bottom: 24px !important; }
/* v11.1 자급제 칸에서 기종을 고르면 이름 옆 「자급제」 알약(PC 의 [자급제] 표기와 같은 뜻: 자급제가는 통신사 출고가와 다를 수 있음) */
html:not(.pcs-on) .m-device .tx strong .m-unl-tag { display: inline-block; margin-left: 5px; padding: 1px 7px; border-radius: 999px; font-size: 10.5px; font-weight: 800; line-height: 1.5; letter-spacing: 0; background: var(--mp-soft); color: var(--mp-accent); vertical-align: 2px; }
/* v11.4 시세 게시물 카드 한 줄 2개(B안, 사장님 09-18 「b안으로 하고」): 정사각 사진을 위에 꽉 채우고 아래에 알약 → 지역명 한 줄 → 주소 한 줄 → 게재 시각.
   본문 요약(.m-snip)은 자리가 없어 목록에서 빼고 팝업에서 본다. 「오늘 마감」은 사진 왼쪽 위(원래 자리), 「사진 N장」은 사진 오른쪽 위로 올린다. 600px 이상(폴드 펼침·태블릿)은 3개. PC 무변경 */
html:not(.pcs-on) #post-list-container { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; }
@media (min-width: 600px) { html:not(.pcs-on) #post-list-container { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } }
html:not(.pcs-on) .post-card { display: flex !important; flex-direction: column; padding: 0 !important; overflow: hidden; min-width: 0; }
html:not(.pcs-on) .post-card > div { display: flex !important; flex-direction: column; min-width: 0; height: 100%; position: relative; }
html:not(.pcs-on) .post-card .aspect-square { order: 0; width: 100% !important; height: auto !important; aspect-ratio: 1 / 1 !important; margin: 0 !important; border: 0 !important; border-bottom: 1px solid var(--mp-line) !important; border-radius: 0 !important; }
html:not(.pcs-on) .post-card .aspect-square .drop-shadow { font-size: 11.5px !important; }
html:not(.pcs-on) .post-card .aspect-square .absolute.inset-x-0 { padding-left: 8px !important; padding-right: 8px !important; }
html:not(.pcs-on) .post-card > div > *:not(.aspect-square) { margin-left: 10px !important; margin-right: 10px !important; }
html:not(.pcs-on) .post-card > div > .mb-1:not(.flex) { order: 1; margin: 9px 10px 4px !important; }   /* v11.5 알약·지역명도 주소·시각과 같은 10px 들여쓰기(v9.7 의 margin:0 이 위 공통 규칙을 이겨 왼쪽에 붙어 있던 것, 사장님 09-18 밤 문제점.jpg) */
html:not(.pcs-on) .post-card > div > .flex.justify-between { order: 2; margin: 0 10px 2px !important; }
html:not(.pcs-on) .post-card h3 { font-size: 14px !important; line-height: 1.3 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
html:not(.pcs-on) .post-card p[class*="text-[9px]"] { order: 3; font-size: 11px !important; }
html:not(.pcs-on) .post-card .m-snip { display: none !important; }
html:not(.pcs-on) .post-card > div > .mt-auto { order: 5; margin: 6px 10px 10px !important; gap: 6px !important; }
html:not(.pcs-on) .post-card span[class*="text-[6px]"] { font-size: 10.5px !important; }
html:not(.pcs-on) .post-card .m-pics { position: absolute; top: 6px; right: 6px; z-index: 10; margin: 0 !important; background: rgba(0, 0, 0, .55) !important; color: #fff !important; font-size: 9.5px !important; padding: 2px 6px !important; border-radius: 999px !important; }
html:not(.pcs-on) .post-card .dday-badge { top: 6px !important; left: 6px !important; padding: 2px 6px !important; border-radius: 999px !important; }
/* v11.4 시세 팝업 위 3버튼(카톡·지도·공유) 줄바꿈 수정(사장님 09-18 「지도 버튼 지/도 줄바꿈 버그」):
   팝업은 폰에서도 사진이 왼쪽 절반이라 버튼 하나가 50px 인데, style-responsive.css 의 오래된 모바일 공통 규칙(.bg-indigo-600 좌우 12px)이 글자 자리를 26px 로 줄여 「지도」가 두 줄로 꺾였다 → 이 3버튼만 좌우 여백을 줄이고 줄바꿈 금지 */
html:not(.pcs-on) #post-detail-card .grid-cols-3 > a, html:not(.pcs-on) #post-detail-card .grid-cols-3 > button { padding: 11px 3px !important; white-space: nowrap !important; font-size: 12px !important; gap: 4px !important; min-width: 0; }
/* v11.4 보강: 세로로 긴 시세표 사진이 정사각 칸을 밀어 늘리던 것(flex 세로 배치의 min-height:auto) → 칸은 정사각 고정, 사진은 절대 배치로 칸 안에서만(윗부분 기준 잘라 매장 머리글이 보이게) */
html:not(.pcs-on) .post-card .aspect-square { min-height: 0; overflow: hidden; }
html:not(.pcs-on) .post-card .aspect-square img { position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important; object-fit: cover; object-position: top center; }
html:not(.pcs-on) .post-card p[class*="text-[9px]"] { white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
html:not(.pcs-on) .post-card { align-items: stretch !important; }   /* v9.7 의 align-items:start 가 세로 flex 에서 안쪽 상자를 사진 폭(265px)으로 키우던 것 */
html:not(.pcs-on) .post-card > div { width: 100%; }

/* v11.8 (2026-09-19) 안드로이드 탭 하이라이트 제거 — 사장님 「스펙보기에서 모델 누르면 파란색이 1초쯤 나오고 스펙이 나옴」.
   phone.html 은 style-responsive.css 가 꺼 주지만 devices.html 처럼 공용 CSS 를 안 싣는 페이지엔 WebView 기본 파란 하이라이트가 남아,
   스펙 카드가 열리는 동안(카드 조립·색 교정) 누른 카드 위에 파란 막이 보였다. 모바일 전 페이지에 한 번에 끈다. */
html:not(.pcs-on) *, html:not(.pcs-on) *::before, html:not(.pcs-on) *::after { -webkit-tap-highlight-color: transparent; }

/* v12.1 (2026-09-20) 홈 밖 페이지(요금제 목록·단말기 정보)에도 같은 모바일 푸터(.m-foot) + 접속자 줄 — 사장님 「푸터가 없고 접속자 수도 안 보임」.
   홈은 .mhome .m-foot 규칙이 따로 있고, 여기는 .mhome 밖 공용. PC 껍데기(html.pcs-on)는 셸 푸터가 따로 있어 숨긴다(접속자 줄은 codex-page 가 셸 푸터로 옮김). */
html:not(.pcs-on) .container > .m-foot { margin: 30px 0 0; padding-top: 16px; border-top: 1px solid var(--mp-line); font-size: 11.5px; color: var(--mp-muted); line-height: 1.7; }
html:not(.pcs-on) .container > .m-foot a { margin-right: 10px; color: inherit; }
html.pcs-on .container > .m-foot { display: none; }

/* ═══ 공통지원금 표 머리글의 통신사 이름은 3사 브랜드 색으로 (2026-09-20 사장님 「SK·KT·LG는 글 색상 다르게 해야 함」) ═══
   위쪽 sticky 머리글 규칙(.sbsd-modal:not(.dev-inline) .sbsd-body thead th → --mp-muted !important)이
   선택자가 더 구체적이라 라이트 모드에서 브랜드 색을 회색으로 덮고 있었다(금액은 멀쩡한데 머리글만 회색).
   다크는 body.dark-mode 덕에 이미 이겨서 정상이었다. 여기서 같은 구체도로 다시 못 박는다. */
html:not(.pcs-on) .sbsd-modal:not(.dev-inline) .sbsd-body thead th:nth-child(2) { color: #3617CE !important; }
html:not(.pcs-on) .sbsd-modal:not(.dev-inline) .sbsd-body thead th:nth-child(3) { color: #00807B !important; }
html:not(.pcs-on) .sbsd-modal:not(.dev-inline) .sbsd-body thead th:nth-child(4) { color: #E6007E !important; }
html:not(.pcs-on) body.dark-mode .sbsd-modal:not(.dev-inline) .sbsd-body thead th:nth-child(2) { color: #a394ff !important; }
html:not(.pcs-on) body.dark-mode .sbsd-modal:not(.dev-inline) .sbsd-body thead th:nth-child(3) { color: #34d1c4 !important; }
html:not(.pcs-on) body.dark-mode .sbsd-modal:not(.dev-inline) .sbsd-body thead th:nth-child(4) { color: #ff5fb8 !important; }

/* ═══ 폰을 눕혔을 때: 아래 버튼 바를 바닥에 붙인다 (2026-09-20 사장님 「가로모드하면 도형이 이상」) ═══
   하단 탭바(.p82n-tabs)는 max-width:767px 에서만 나온다. 가로로 눕히면 폭이 768 이상이 돼 탭바가 사라지는데,
   .m-cta 는 여전히 탭바 자리 56px 를 비워 둬서 바가 화면 중간쯤에 떠 보이고 그 아래로 본문이 비쳤다.
   탭바가 없는 조건(넓은 폭·폰 가로)에서는 그 여백을 없애고 본문 아래 여백도 바 높이에 맞춘다. */
@media (min-width: 768px) {
  html:not(.pcs-on) .m-cta { bottom: env(safe-area-inset-bottom) !important; }
  html:not(.pcs-on) body.m-calc { padding-bottom: calc(96px + env(safe-area-inset-bottom)) !important; }
}
@media (max-width: 1023px) and (max-height: 540px) and (min-aspect-ratio: 1/1) {
  html:not(.pcs-on) .m-cta { bottom: env(safe-area-inset-bottom) !important; }
  html:not(.pcs-on) body.m-calc { padding-bottom: calc(96px + env(safe-area-inset-bottom)) !important; }
  /* 눕히면 세로가 짧다 — 바를 한 줄로 낮춘다 */
  html:not(.pcs-on) .m-cta { padding-top: 7px; padding-bottom: 7px; }
  html:not(.pcs-on) .m-cta .calc, html:not(.pcs-on) .m-cta .prorate-button { height: 42px !important; }
}