/* codex-page.css — 코덱스 스킨을 「원본 계산기 블록」에 입히는 공통 규칙 (PC 769px 이상, body.pcs) · .pcs-skin 안에 옮겨 담긴 실서비스 요소(.section·.input-group·.calc-button·표·카드…)를 코덱스 토큰으로 다시 칠한다. · 사이트 원래 규칙(파랑·그라데이션·그림자·다크모드 회색)을 이기려고 !important를 넓게 쓴다 — 시안 전용. · 쓰는 곳: showroom.html(유지비·요금제 목록·위약금 도구 화면), family.html, internet.html(코덱스 껍데기 codex-page.js) */ @media (hover: hover) and (pointer: fine), (min-width: 600px) and (min-height: 600px) { body.pcs { margin: 0 !important; padding: 0 !important; background: var(--mp-bg, #fbfaf7) !important; } body.pcs.dark-mode { background: #181b19 !important; } body.pcs > nav.p82nav, body.pcs > footer.page-footer, body.pcs > .page-footer, body.pcs #pc-fixed-top-btn, body.pcs #orientation-overlay, body.pcs .help-video-banner, body.pcs .page-header, body.pcs .family-header .btn-dark-mode-toggle { display: none !important; } html.pcs-pre body > *:not(#moplan-showroom) { visibility: hidden !important; } html.pcs-pre body { background: #fbfaf7 !important; } html.pcs-pre.dark body { background: #181b19 !important; } #moplan-showroom .pcs-page { padding-bottom: 48px; } #moplan-showroom .pcs-skin { color: var(--mp-ink); font-size: 14px; } #moplan-showroom .pcs-skin * { box-shadow: none !important; text-shadow: none !important; } #moplan-showroom .pcs-skin h1, #moplan-showroom .pcs-skin h2, #moplan-showroom .pcs-skin h3, #moplan-showroom .pcs-skin h4, #moplan-showroom .pcs-skin h5 { color: var(--mp-ink) !important; background: none !important; -webkit-text-fill-color: currentColor !important; text-align: left !important; font-weight: 500 !important; letter-spacing: -.5px; margin: 0 0 12px !important; } #moplan-showroom .pcs-skin h2 { font-size: 22px !important; } #moplan-showroom .pcs-skin h3 { font-size: 17px !important; } #moplan-showroom .pcs-skin h4 { font-size: 15px !important; } #moplan-showroom .pcs-skin p, #moplan-showroom .pcs-skin li, #moplan-showroom .pcs-skin td, #moplan-showroom .pcs-skin th, #moplan-showroom .pcs-skin label, #moplan-showroom .pcs-skin span { color: inherit; } /* 카드·구역 */ #moplan-showroom .pcs-skin .container, #moplan-showroom .pcs-skin .family-container, #moplan-showroom .pcs-skin .content-wrapper, #moplan-showroom .pcs-skin .main-content { width: auto !important; max-width: none !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; } #moplan-showroom .pcs-skin .section, #moplan-showroom .pcs-skin .family-card, #moplan-showroom .pcs-skin .pfl-filterbox, #moplan-showroom .pcs-skin .pfl-list-wrap, #moplan-showroom .pcs-skin .result-section, #moplan-showroom .pcs-skin #penalty-standard-calculator, #moplan-showroom .pcs-skin #penalty-termination-calculator, #moplan-showroom .pcs-skin #penalty-calc-table-wrapper, #moplan-showroom .pcs-skin .premium-options-box, #moplan-showroom .pcs-skin .maintenance-card, #moplan-showroom .pcs-skin .family-summary, #moplan-showroom .pcs-skin #family-total-section, #moplan-showroom .pcs-skin .family-total-card { background: var(--mp-paper) !important; border: 1px solid var(--mp-line) !important; border-radius: 8px !important; padding: 24px !important; margin: 0 0 20px !important; color: var(--mp-ink) !important; } #moplan-showroom .pcs-skin .info-box, #moplan-showroom .pcs-skin .info-box-red, #moplan-showroom .pcs-skin .pen-caption, #moplan-showroom .pcs-skin .pfl-meta { background: var(--mp-hero) !important; border: 0 !important; border-radius: 6px !important; color: var(--mp-muted) !important; font-size: 12px; padding: 10px 14px !important; } #moplan-showroom .pcs-skin .input-group { margin: 0 0 16px !important; } #moplan-showroom .pcs-skin .input-group > label, #moplan-showroom .pcs-skin .option-label, #moplan-showroom .pcs-skin .pfl-row > label, #moplan-showroom .pcs-skin .pfl-row > span:first-child { font-size: 12px !important; color: var(--mp-muted) !important; font-weight: 500 !important; } /* 입력 칸 */ #moplan-showroom .pcs-skin input[type="text"], #moplan-showroom .pcs-skin input[type="number"], #moplan-showroom .pcs-skin input[type="search"], #moplan-showroom .pcs-skin select, #moplan-showroom .pcs-skin .number-input, #moplan-showroom .pcs-skin textarea { background: var(--mp-bg) !important; border: 1px solid var(--mp-line) !important; border-radius: 6px !important; color: var(--mp-ink) !important; font: inherit !important; font-size: 16px !important; min-height: 46px; padding: 0 14px !important; } #moplan-showroom .pcs-skin .psearch { background: var(--mp-bg) !important; border: 1px solid var(--mp-line) !important; border-radius: 6px !important; } /* 통신사 타일: 원색 로고 유지 */ #moplan-showroom .pcs-skin .carrier-buttons { display: flex; gap: 12px; } #moplan-showroom .pcs-skin .carrier-button { flex: 1; height: 60px; border: 1px solid var(--mp-line) !important; border-radius: 6px !important; background: #fff !important; display: flex; align-items: center; justify-content: center; color: var(--mp-ink) !important; } #moplan-showroom .pcs-skin .carrier-button img { max-height: 30px; width: auto; filter: none !important; opacity: 1 !important; } #moplan-showroom .pcs-skin .carrier-button.active { outline: 2px solid var(--mp-accent); outline-offset: -2px; background: var(--mp-soft) !important; border-color: transparent !important; } #moplan-showroom[data-theme="dark"] .pcs-skin .carrier-button { background: #d9d7d0 !important; border-color: #d9d7d0 !important; } #moplan-showroom[data-theme="dark"] .pcs-skin .carrier-button.active { background: #e9cbb4 !important; } /* 세그먼트 버튼 무리 */ #moplan-showroom .pcs-skin .payment-method-options, #moplan-showroom .pcs-skin .toggle-button-group, #moplan-showroom .pcs-skin .view-mode-buttons, #moplan-showroom .pcs-skin .pen-seg, #moplan-showroom .pcs-skin .discount-type-buttons, #moplan-showroom .pcs-skin .pp-filter-chips, #moplan-showroom .pcs-skin .pfl-row .pfl-btns, #moplan-showroom .pcs-skin .grid-2, #moplan-showroom .pcs-skin .grid-3 { display: flex; flex-wrap: wrap; gap: 5px; background: var(--mp-hero) !important; padding: 4px !important; border-radius: 6px !important; border: 0 !important; } #moplan-showroom .pcs-skin .payment-button, #moplan-showroom .pcs-skin .toggle-button, #moplan-showroom .pcs-skin .view-mode-buttons button, #moplan-showroom .pcs-skin .pen-seg button, #moplan-showroom .pcs-skin .discount-button, #moplan-showroom .pcs-skin .contract-btn, #moplan-showroom .pcs-skin .pp-filter-chip, #moplan-showroom .pcs-skin .pfl-row button, #moplan-showroom .pcs-skin .radio-option { flex: 1 1 auto; background: transparent !important; color: var(--mp-muted) !important; border: 0 !important; border-radius: 4px !important; font-size: 13px !important; font-weight: 600 !important; padding: 9px 12px !important; cursor: pointer; } #moplan-showroom .pcs-skin .payment-button.active, #moplan-showroom .pcs-skin .toggle-button.active, #moplan-showroom .pcs-skin .view-mode-buttons button.active, #moplan-showroom .pcs-skin .pen-seg button.active, #moplan-showroom .pcs-skin .discount-button.active, #moplan-showroom .pcs-skin .contract-btn.active, #moplan-showroom .pcs-skin .pp-filter-chip.active, #moplan-showroom .pcs-skin .pfl-row button.active, #moplan-showroom .pcs-skin .pfl-row button.on { background: var(--mp-paper) !important; color: var(--mp-ink) !important; } /* 주 버튼(계산하기) */ #moplan-showroom .pcs-skin .calc-button, #moplan-showroom .pcs-skin #calculate-internet-btn, #moplan-showroom .pcs-skin #calculateAllPenaltiesBtn, #moplan-showroom .pcs-skin #calculateTerminationPenaltyBtn, #moplan-showroom .pcs-skin .family-calc-btn, #moplan-showroom .pcs-skin #family-calc-button, #moplan-showroom .pcs-skin #maintenance-calc-btn { display: inline-flex !important; align-items: center; justify-content: center; gap: 10px; min-height: 54px; padding: 14px 23px !important; border-radius: 7px !important; background: var(--mp-accent) !important; color: var(--mp-on-accent) !important; font-size: 15px !important; font-weight: 700 !important; border: 0 !important; width: auto !important; min-width: 220px; margin: 8px 0 20px !important; } /* 보조 버튼 */ #moplan-showroom .pcs-skin .plan-list-btn, #moplan-showroom .pcs-skin .fw-trigger, #moplan-showroom .pcs-skin .keep-trigger, #moplan-showroom .pcs-skin .wizard-calc-link, #moplan-showroom .pcs-skin .choice-button, #moplan-showroom .pcs-skin .calc-reset-card-btn, #moplan-showroom .pcs-skin #add-plan-change-btn, #moplan-showroom .pcs-skin .pp-manual-apply { background: var(--mp-paper) !important; color: var(--mp-ink) !important; border: 1px solid var(--mp-line) !important; border-radius: 6px !important; font-size: 13px !important; padding: 10px 14px !important; } #moplan-showroom .pcs-skin .plan-list-btn .ppb-amt, #moplan-showroom .pcs-skin .fw-trigger.on, #moplan-showroom .pcs-skin .choice-button.active { color: var(--mp-accent) !important; border-color: var(--mp-accent) !important; } /* 선택 카드(인터넷 허브·위약금 선택) */ #moplan-showroom .pcs-skin .choice-grid { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; } #moplan-showroom .pcs-skin .choice-card { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 25px !important; min-height: 140px; border: 1px solid var(--mp-line) !important; border-radius: 8px !important; background: var(--mp-paper) !important; color: var(--mp-ink) !important; cursor: pointer; } #moplan-showroom .pcs-skin .choice-card:first-child { background: var(--mp-dark) !important; color: var(--mp-inverse) !important; border-color: var(--mp-dark) !important; } #moplan-showroom .pcs-skin .choice-card .card-icon { display: none !important; } #moplan-showroom .pcs-skin .choice-card .card-info h3, #moplan-showroom .pcs-skin .choice-card .card-info strong { font-size: 22px !important; color: inherit !important; } #moplan-showroom .pcs-skin .choice-card .card-info p { font-size: 12px; color: var(--mp-muted); } #moplan-showroom .pcs-skin .choice-buttons-container { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } /* 결과·표 */ #moplan-showroom .pcs-skin .winner { color: var(--mp-accent) !important; font-size: 20px !important; font-weight: 500 !important; text-align: left !important; background: var(--mp-hero) !important; padding: 20px 24px !important; border-radius: 8px !important; border-left: 3px solid var(--mp-accent) !important; } #moplan-showroom .pcs-skin table { width: 100%; border-collapse: collapse !important; font-size: 13px; } #moplan-showroom .pcs-skin th, #moplan-showroom .pcs-skin td { padding: 10px 8px !important; border: 0 !important; border-bottom: 1px solid var(--mp-line) !important; background: transparent !important; color: var(--mp-ink) !important; text-align: right; } #moplan-showroom .pcs-skin th { color: var(--mp-muted) !important; font-weight: 500 !important; } #moplan-showroom .pcs-skin th:first-child, #moplan-showroom .pcs-skin td:first-child { text-align: left; } #moplan-showroom .pcs-skin thead, #moplan-showroom .pcs-skin tr, #moplan-showroom .pcs-skin tbody { background: transparent !important; } #moplan-showroom .pcs-skin .breakdown-card { background: var(--mp-paper) !important; border: 1px solid var(--mp-line) !important; border-radius: 8px !important; } #moplan-showroom .pcs-skin .breakdown-card.winner-card { border-color: var(--mp-accent) !important; box-shadow: inset 0 2px 0 var(--mp-accent) !important; } #moplan-showroom .pcs-skin .timeline-badge { background: var(--mp-hero) !important; color: var(--mp-muted) !important; } #moplan-showroom .pcs-skin .timeline-header h5::before { background: var(--mp-accent) !important; box-shadow: 0 0 0 2px var(--mp-accent) !important; border-color: var(--mp-paper) !important; } #moplan-showroom .pcs-skin .timeline-container::before { background: var(--mp-line) !important; } #moplan-showroom .pcs-skin .total-cost-section strong, #moplan-showroom .pcs-skin .family-total-amount, #moplan-showroom .pcs-skin .total-badge { color: var(--mp-ink) !important; font-size: 28px !important; font-weight: 500 !important; letter-spacing: -1px; } #moplan-showroom .pcs-skin .action-buttons button { background: var(--mp-paper) !important; color: var(--mp-ink) !important; border: 1px solid var(--mp-line) !important; border-radius: 6px !important; font-size: 13px !important; padding: 8px 12px !important; } /* ⚠ 투명도로 흐리게 하면 안의 툴팁 상자까지 같이 날아간다 — 색으로만 흐리게 (사장님 09-15) */ #moplan-showroom .tooltip-icon { opacity: 1; color: var(--mp-muted); } #moplan-showroom .tooltip-icon:hover { color: var(--mp-accent); } #moplan-showroom .tooltip-text { opacity: 0; background: var(--mp-ink) !important; color: #fff !important; border: 0 !important; box-shadow: 0 10px 26px rgba(37,37,31,.28) !important; font-size: 12.5px !important; line-height: 1.6 !important; letter-spacing: -.2px; z-index: 200 !important; } #moplan-showroom .tooltip-text * { color: #fff !important; } #moplan-showroom .tooltip-icon:hover .tooltip-text { opacity: 1 !important; visibility: visible !important; } #moplan-showroom .pcs-skin .error-message { color: var(--mp-accent) !important; } /* 가족: 카드 나열 */ #moplan-showroom .pcs-skin .family-main-content { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 20px; align-items: start; } #moplan-showroom .pcs-skin .family-header { background: transparent !important; border: 0 !important; padding: 0 0 12px !important; color: var(--mp-ink) !important; } #moplan-showroom .pcs-skin .family-header h1 { font-size: 22px !important; } #moplan-showroom .pcs-skin .family-footer { color: var(--mp-muted) !important; background: transparent !important; border: 0 !important; font-size: 12px; } /* 요금제 목록 */ #moplan-showroom .pcs-skin .pfl-row { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--mp-line); } #moplan-showroom .pcs-skin .pfl-lhead { color: var(--mp-muted) !important; font-size: 12px !important; border-bottom: 1px solid var(--mp-line); padding: 8px 0; } #moplan-showroom .pcs-skin #pfl-list > * { border-bottom: 1px solid var(--mp-line) !important; background: transparent !important; border-radius: 0 !important; } #moplan-showroom .pcs-skin .pfl-vs-banner { background: var(--mp-soft) !important; color: var(--mp-accent) !important; border: 0 !important; border-radius: 6px !important; } } /* v0.2 보강: 머리글(h1) 사이트 규칙 덮기, 등장 애니메이션 끄기, 가족 하단 합계 바 고정 해제, 인터넷 허브 폭 */ @media (hover: hover) and (pointer: fine), (min-width: 600px) and (min-height: 600px) { #moplan-showroom #mi-page-view .mi-head h1 { font-size: 37px !important; line-height: 1.3 !important; letter-spacing: -1.4px !important; font-weight: 500 !important; color: var(--mp-ink) !important; text-align: left !important; background: none !important; -webkit-text-fill-color: currentColor !important; margin: 0 !important; } #moplan-showroom #mi-page-view .mi-head p { color: var(--mp-muted) !important; font-size: 14px !important; margin: 12px 0 0 !important; text-align: left !important; } #moplan-showroom #mi-page-view .mi-head .mp-eyebrow { margin-bottom: 12px; } #moplan-showroom .pcs-skin *, #moplan-showroom .pcs-skin *::before, #moplan-showroom .pcs-skin *::after { animation: none !important; transition: none !important; } #moplan-showroom .pcs-skin .choice-card, #moplan-showroom .pcs-skin .section, #moplan-showroom .pcs-skin .family-card { opacity: 1 !important; transform: none !important; visibility: visible !important; } /* ⚠바로 위에서 .pcs-skin 안 애니메이션을 전부 끄는데, 원본에는 «opacity:0 으로 시작해 등장 애니메이션으로만 켜지는» 요소가 있다. 애니메이션이 사라지면 영영 투명한 채로 남는다 — 유지비 결과의 요약 멘트·요약 격자가 통째로 안 보였다(사장님 09-16 「뭔가 안 되는데」). opacity 를 되돌리는 것은 «보이게» 하는 것뿐이고 계산·내용은 그대로다. */ #moplan-showroom .pcs-skin .mnt-animate-appear, #moplan-showroom .pcs-skin .mnt-summary-narrative-container, #moplan-showroom .pcs-skin .mnt-summary-grid { opacity: 1 !important; transform: none !important; } /* 유지비: 왼쪽 입력 / 오른쪽 결과 요약(따라다님) — 사장님 09-16 「결과값 옆으로」 */ #moplan-showroom .pcs-tool .mnt-ws { padding-bottom: 0; } #moplan-showroom .pcs-tool .mnt-ws > div > .mnt-side { position: sticky; top: 20px; } #moplan-showroom .mnt-side h2 { margin: 9px 0 16px; } #moplan-showroom .mnt-side .mnt-side-empty { margin: 0; font-size: 12px; line-height: 1.7; color: var(--mp-muted); } #moplan-showroom .mnt-side .mnt-side-empty b { color: var(--mp-ink); font-weight: 600; } /* 원본 요약 격자(가로 4칸)를 세로 목록으로 — 290px 칸에 맞춘다 */ #moplan-showroom .mnt-side .mnt-summary-grid { display: flex !important; flex-direction: column !important; gap: 0 !important; padding: 0 !important; background: transparent !important; } #moplan-showroom .mnt-side .summary-item { flex: none !important; display: flex !important; align-items: baseline; justify-content: space-between; gap: 12px; padding: 12px 0 !important; border: 0 !important; border-bottom: 1px solid var(--mp-line) !important; border-radius: 0 !important; background: transparent !important; text-align: left !important; } #moplan-showroom .mnt-side .summary-item span { margin: 0 !important; font-size: 12px !important; color: var(--mp-muted) !important; } #moplan-showroom .mnt-side .summary-item strong { font-size: 15px !important; font-weight: 600 !important; color: var(--mp-ink) !important; white-space: nowrap; } /* 실유지비(마지막 칸)는 크게 — 이 화면에서 제일 중요한 숫자 */ #moplan-showroom .mnt-side .summary-item.final { display: block !important; border-bottom: 0 !important; margin-top: 6px; padding: 16px 0 4px !important; } #moplan-showroom .mnt-side .summary-item.final span { display: block !important; margin-bottom: 6px !important; } #moplan-showroom .mnt-side .summary-item.final strong { display: block; font-size: 27px !important; letter-spacing: -1px; color: var(--mp-accent) !important; } #moplan-showroom .mnt-side .summary-item.penalty strong, #moplan-showroom .mnt-side .summary-item.payback strong { color: #c0392b !important; } #moplan-showroom[data-theme="dark"] .mnt-side .summary-item.penalty strong, #moplan-showroom[data-theme="dark"] .mnt-side .summary-item.payback strong { color: #ef8a7a !important; } #moplan-showroom .mnt-side .mnt-side-cta { margin-top: 18px; } #moplan-showroom .mnt-side .mnt-side-cta .mnt-main-btn { width: 100% !important; margin: 0 !important; min-height: 49px; } /* 왼쪽으로 내려간 원본 계산 버튼 자리·결과 카드 여백 정리 */ #moplan-showroom .pcs-tool .mnt-ws .maintenance-container { margin-bottom: 0 !important; } /* ── 위약금 계산기 개편(사장님 09-16 B안) — 남색 상자·표를 개편 토큰으로, 세그는 알약, 결과는 오른쪽 카드 ── */ #moplan-showroom .pcs-tool .pen-ws { padding-bottom: 0; } #moplan-showroom .pcs-tool .pen-ws > div > .pen-side { position: sticky; top: 20px; } #moplan-showroom .pcs-tool .pen-ws:not(.pen-solo) > div > .pen-side { margin-top: 47px; } /* 「← 다른 위약금 보기」(33px)+여백 14px 만큼 내려 왼쪽 카드 윗선과 맞춤(09-16) */ #moplan-showroom .pen-back { display: inline-flex; align-items: center; margin: 0 0 14px; padding: 7px 0; border: 0; background: transparent; color: var(--mp-muted); font: inherit; font-size: 13px; cursor: pointer; } #moplan-showroom .pen-back:hover { color: var(--mp-accent); } #moplan-showroom .pen-back[hidden] { display: none; } #moplan-showroom .pen-side h2 { margin: 9px 0 16px; } #moplan-showroom .pen-side .mnt-side-empty { margin: 0; font-size: 12px; line-height: 1.7; color: var(--mp-muted); } #moplan-showroom .pen-side .pen-side-cap { display: block; font-size: 11.5px; color: var(--mp-muted); } #moplan-showroom .pen-side .pen-side-big { display: block; margin: 3px 0 10px; font-size: 29px; font-weight: 700; letter-spacing: -1.2px; color: var(--mp-accent); } /* 표 모드 옆 카드: 개월차별 총 위약금 목록(09-16) */ #moplan-showroom .pen-side .pen-side-list { margin: 8px 0 12px; border: 1px solid var(--mp-line); border-radius: 8px; background: var(--mp-paper); overflow: hidden; } #moplan-showroom .pen-side .pen-side-mo { padding: 9px 12px !important; margin: 0 !important; border-bottom: 1px solid var(--mp-line); font-size: 13px; } #moplan-showroom .pen-side .pen-side-mo:last-child { border-bottom: 0; } #moplan-showroom .pen-side .pen-side-mo b { font-weight: 700; color: var(--mp-accent); letter-spacing: -.3px; } #moplan-showroom .pen-side .pen-side-mo { align-items: center; } #moplan-showroom .pen-side .pen-side-mo > span > small { display: block; margin-top: 2px; font-size: 11px; color: var(--mp-muted); } #moplan-showroom .pen-side .pen-side-mo em { font-style: normal; font-size: 11px; color: var(--mp-muted); } #moplan-showroom .pen-side .pen-side-conds .pen-side-row { font-size: 12px; } #moplan-showroom .pen-side .pen-side-row { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--mp-line); font-size: 12.5px; } #moplan-showroom .pen-side .pen-side-row:last-child { border-bottom: 0; } #moplan-showroom .pen-side .pen-side-row span:first-child { color: var(--mp-muted); } /* 중도해지 결과 머리를 그대로 옮겨 오므로, 카드 안에서 쓸 모양으로 다시 칠한다 */ #moplan-showroom .pen-side .term-total { background: transparent !important; border: 0 !important; padding: 0 !important; margin: 0 !important; text-align: left !important; } #moplan-showroom .pen-side .term-total * { color: var(--mp-ink) !important; } #moplan-showroom .pen-side .term-total strong, #moplan-showroom .pen-side .term-total b { color: var(--mp-accent) !important; } #moplan-showroom .pen-side .term-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px !important; padding: 0 !important; background: transparent !important; } #moplan-showroom .pen-side .term-chips > * { background: var(--mp-soft) !important; border: 1px solid var(--mp-line) !important; color: var(--mp-ink) !important; border-radius: 999px !important; font-size: 11.5px !important; padding: 5px 11px !important; } #moplan-showroom .pen-side .mnt-side-cta { margin-top: 18px; } #moplan-showroom .pen-side .mnt-side-cta .calc-button { display: flex !important; align-items: center; justify-content: center !important; text-align: center !important; width: 100% !important; margin: 0 !important; min-height: 49px; } #moplan-showroom .pen-side .mnt-side-cta .calc-button[hidden] { display: none !important; } /* 선택 화면에서는 오른쪽 칸을 접어 빈 자리가 안 남게 (사장님 09-16) */ #moplan-showroom .pcs-tool .pen-ws.pen-solo { grid-template-columns: minmax(0, 1fr) !important; } #moplan-showroom .pcs-tool .pen-ws.pen-solo > div:last-child { display: none !important; } /* 카드 안 버튼들 글자 가운데 (사장님 09-16 「버튼들은 중앙 배치」) */ #moplan-showroom #penalty-calculator-wrapper .calc-button, #moplan-showroom #penalty-calculator-wrapper #add-plan-change-btn { display: flex !important; align-items: center; justify-content: center !important; text-align: center !important; } /* ⚠원본 위약금 CSS는 폭 720px 카드를 전제로 max-width:720 + 좌우 여백 49px 을 박아 놨다. 개편 카드(868px)에 들어오니 «입력은 196px에서 시작, 결과는 147px에서 시작»처럼 블록마다 시작선이 달라져 도형이 뒤죽박죽이었다(사장님 09-16). 카드 안 블록은 전부 같은 시작선·전체 폭으로 편다. */ #moplan-showroom #penalty-calculator-wrapper .penalty-heading-row, #moplan-showroom #penalty-calculator-wrapper .pen-form-grid, #moplan-showroom #penalty-calculator-wrapper #penalty-input-sections, #moplan-showroom #penalty-calculator-wrapper #plan-history-container, #moplan-showroom #penalty-calculator-wrapper .plan-history-item, #moplan-showroom #penalty-calculator-wrapper .result-section, #moplan-showroom #penalty-calculator-wrapper #penalty-calc-table-wrapper, #moplan-showroom #penalty-calculator-wrapper #penalty-choice-wrapper > * { max-width: none !important; width: auto !important; margin-left: 0 !important; margin-right: 0 !important; } /* 입력 격자: 고정 350px 두 칸 → 카드 폭을 반반 */ #moplan-showroom #penalty-calculator-wrapper .pen-form-grid, #moplan-showroom #penalty-calculator-wrapper #penalty-input-sections { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; gap: 18px 22px !important; align-items: start; } /* 제목 줄: 원본이 grid 라 제목이 가운데로 밀렸다 → flex 로 왼쪽·오른쪽 */ #moplan-showroom #penalty-calculator-wrapper .penalty-heading-row { display: flex !important; align-items: center; justify-content: space-between !important; } /* 중도해지: 묻는 순서를 사장님이 정한 대로 (09-16) 1 초기 요금제 → 2 선택약정 여부 → 3 추가지원 여부 → 4 개통일 → 5 요금제 변경 여부 → 6 해지 예정일 원본 DOM 순서는 약정유형·추가지원금·개통일·해지예정일 다음에 요금제 이력이라 뒤죽박죽이었다. ⚠DOM 을 옮기면 「N번째 요금제」 번호 매김이 흔들릴 수 있으므로 CSS order 로만 자리를 바꾼다(계산 무관). */ #moplan-showroom #penalty-termination-calculator:not([style*="none"]) { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; gap: 14px 22px !important; align-items: start; } #moplan-showroom #penalty-termination-calculator > .pen-form-grid, #moplan-showroom #penalty-termination-calculator > #plan-history-container { display: contents !important; } /* 안의 칸들을 격자 칸으로 */ #moplan-showroom #penalty-termination-calculator .term-field { margin: 0 !important; grid-area: auto !important; } /* 원본 grid-template-areas 이름(term-contract…) 해제 */ #moplan-showroom #penalty-termination-calculator #plan-history-container > .plan-history-item { margin: 0 !important; } /* 배치(09-16 사장님 지시): 왼쪽 초기 요금제 상자 옆에 약정 유형·추가지원금을 위아래로 딱 맞추고, 개통일·해지일은 양옆 */ #moplan-showroom #penalty-termination-calculator > .penalty-heading-row { grid-column: 1 / -1; grid-row: 1; margin-bottom: 4px !important; } #moplan-showroom #penalty-termination-calculator #plan-history-container > .plan-history-item:first-child { grid-column: 1; grid-row: 2 / 4; align-self: stretch; display: flex; flex-direction: column; justify-content: space-between; } /* ① 초기 요금제 */ #moplan-showroom #penalty-termination-calculator #plan-history-container > .plan-history-item:first-child .input-group { margin-bottom: 0 !important; } #moplan-showroom #penalty-termination-calculator .term-field:nth-of-type(1) { grid-column: 2; grid-row: 2; padding-top: 15px; } /* 상자 안 제목과 같은 높이 */ /* ② 약정 유형 */ #moplan-showroom #penalty-termination-calculator .term-field:nth-of-type(2) { grid-column: 2; grid-row: 3; align-self: end; padding-bottom: 15px; } /* 상자 안 입력칸과 바닥 맞춤 */ /* ③ 추가지원금 */ #moplan-showroom #penalty-termination-calculator .term-field:nth-of-type(3) { grid-column: 1; grid-row: 4; } /* ④ 가입(개통)일 */ #moplan-showroom #penalty-termination-calculator .term-field:nth-of-type(4) { grid-column: 2; grid-row: 4; } /* ⑥ 해지 예정일 (개통일 옆) */ #moplan-showroom #penalty-termination-calculator #plan-history-container > .plan-history-item:not(:first-child) { order: 5; grid-column: 1 / -1; } /* ⑤ 추가한 변경 이력 */ #moplan-showroom #penalty-termination-calculator > #add-plan-change-btn { order: 6; grid-column: 1 / -1; margin: 0 !important; } /* ⑤ 변경 이력 추가 */ #moplan-showroom #penalty-termination-calculator > .result-section { order: 7; grid-column: 1 / -1; margin: 0 !important; } /* 라벨·알약 여백을 줄여 오른쪽 두 칸(약정·추가지원)이 왼쪽 상자 높이에 맞게 */ #moplan-showroom #penalty-termination-calculator .term-field > label { min-height: 0 !important; height: auto !important; line-height: 1.4 !important; margin: 0 0 6px !important; } #moplan-showroom #penalty-termination-calculator .term-field .payment-method-options { margin-bottom: 0 !important; } /* 다른 칸도 초기 요금제 정보처럼 상자 안에 (09-16 사장님) */ #moplan-showroom #penalty-termination-calculator .term-field { background: var(--mp-hero); border: 1px solid var(--mp-line); border-radius: 8px; padding: 15px; box-sizing: border-box; } /* 초기 요금제 상자 글꼴 키움(09-16 사장님: 여백이 비어 보이지 않게) */ #moplan-showroom #penalty-termination-calculator #plan-history-container > .plan-history-item:first-child h4 { font-size: 18px !important; font-weight: 600 !important; letter-spacing: -.3px; } #moplan-showroom #penalty-termination-calculator #plan-history-container > .plan-history-item:first-child label { font-size: 14px !important; margin-bottom: 8px !important; } #moplan-showroom #penalty-termination-calculator .term-field > label { font-size: 13.5px !important; } /* 오른쪽 약정 유형 + 추가지원금은 한 상자로 이어 붙여 왼쪽 상자와 짝을 맞춘다 */ #moplan-showroom #penalty-termination-calculator .term-field:nth-of-type(1) { border-bottom: 0; border-radius: 8px 8px 0 0; padding-bottom: 6px; } #moplan-showroom #penalty-termination-calculator .term-field:nth-of-type(2) { margin-top: -14px !important; border-top: 0; border-radius: 0 0 8px 8px; padding-top: 6px; } #moplan-showroom #penalty-termination-calculator .term-field > input, #moplan-showroom #penalty-termination-calculator .term-field .pen-date-trigger { max-width: none; width: 100%; box-sizing: border-box; } #moplan-showroom #penalty-calculator-wrapper .penalty-heading-row h2 { text-align: left !important; margin: 0 !important; font-size: 19px !important; font-weight: 600 !important; letter-spacing: -.4px; } /* 모드 세그: 폭 가득 → 왼쪽 알약 2개 */ #moplan-showroom #penalty-mode-seg { display: inline-flex !important; width: auto !important; gap: 6px; margin: 0 0 20px !important; padding: 4px !important; border-radius: 999px !important; background: var(--mp-hero) !important; border: 1px solid var(--mp-line) !important; } #moplan-showroom #penalty-mode-seg button { flex: none !important; min-height: 38px; padding: 0 20px !important; border: 0 !important; border-radius: 999px !important; background: transparent !important; color: var(--mp-ink) !important; font-size: 13.5px !important; } #moplan-showroom #penalty-mode-seg button.active { background: var(--mp-accent) !important; color: var(--mp-on-accent) !important; font-weight: 600 !important; } /* ⚠원본의 남색 상자들(요금제 이력·결과)이 개편 화면에 그대로 남아 있었다 (사장님 09-16 「엉망진창」) */ #moplan-showroom #penalty-calculator-wrapper .plan-history-item { background: var(--mp-hero) !important; border: 1px solid var(--mp-line) !important; border-radius: 8px !important; } #moplan-showroom #penalty-calculator-wrapper .plan-history-item h3, #moplan-showroom #penalty-calculator-wrapper .plan-history-item h4, #moplan-showroom #penalty-calculator-wrapper .plan-history-item label { color: var(--mp-ink) !important; } #moplan-showroom #termination-penalty-result { background: var(--mp-paper) !important; border: 1px solid var(--mp-line) !important; border-radius: 10px !important; } /* 날짜 선택: 글자 링크 → 누를 수 있어 보이는 상자 */ #moplan-showroom #penalty-calculator-wrapper .pen-date-trigger { display: flex !important; align-items: center; justify-content: flex-start !important; gap: 8px; width: 100%; min-height: 50px; padding: 10px 16px !important; border: 1px solid var(--mp-line) !important; border-radius: 8px !important; background: var(--mp-paper) !important; color: var(--mp-ink) !important; font-size: 14px !important; } #moplan-showroom #penalty-calculator-wrapper .pen-date-trigger:hover { border-color: var(--mp-accent) !important; } #moplan-showroom #add-plan-change-btn { width: 100% !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; min-height: 44px; border: 1px dashed var(--mp-line) !important; border-radius: 8px !important; background: transparent !important; color: var(--mp-accent) !important; font-size: 13px !important; } #moplan-showroom #add-plan-change-btn:hover { border-color: var(--mp-accent) !important; background: var(--mp-hero) !important; } /* 결과 표: 왼쪽 60%만 쓰던 것 → 전체 폭, 남색 칸 제거, 지금 구간만 강조 */ #moplan-showroom #penalty-calc-table-wrapper { width: 100% !important; max-width: none !important; } #moplan-showroom #penalty-calc-table-wrapper table { width: 100% !important; border-collapse: collapse; } #moplan-showroom #penalty-calc-table-wrapper th { text-align: left !important; padding: 0 10px 10px !important; font-size: 11.5px !important; font-weight: 500 !important; color: var(--mp-muted) !important; background: transparent !important; border-bottom: 1px solid var(--mp-line) !important; } #moplan-showroom #penalty-calc-table-wrapper td { padding: 11px 10px !important; background: transparent !important; color: var(--mp-ink) !important; border-bottom: 1px solid var(--mp-line) !important; } #moplan-showroom #penalty-calc-table-wrapper th:last-child, #moplan-showroom #penalty-calc-table-wrapper td:last-child { text-align: right !important; } #moplan-showroom #penalty-calc-table-wrapper td:last-child { font-weight: 600 !important; } #moplan-showroom #penalty-calc-table-wrapper tbody tr:last-child td { border-bottom: 0 !important; } #moplan-showroom #penalty-calc-table-wrapper tbody tr:first-child td { background: var(--mp-soft) !important; } #moplan-showroom #penalty-calc-table-wrapper tbody tr:first-child td:last-child { color: var(--mp-accent) !important; } /* 첫 선택 카드 2장: 한쪽만 검정 채움이라 짝이 안 맞던 것 → 같은 종이 카드로 */ #moplan-showroom #penalty-choice-wrapper .choice-buttons-container { display: grid !important; grid-template-columns: 1fr 1fr; gap: 16px; } #moplan-showroom #penalty-choice-wrapper .choice-button { background: var(--mp-paper) !important; border: 1px solid var(--mp-line) !important; border-radius: 10px !important; padding: 24px 26px !important; text-align: left !important; } #moplan-showroom #penalty-choice-wrapper .choice-button:hover { border-color: var(--mp-accent) !important; background: var(--mp-hero) !important; } #moplan-showroom .pcs-skin .choice-grid.centered { max-width: none !important; margin: 0 !important; } #moplan-showroom .pcs-skin .family-footer { position: static !important; grid-column: 1 / -1; background: var(--mp-hero) !important; border: 1px solid var(--mp-line) !important; border-radius: 8px !important; padding: 20px 24px !important; color: var(--mp-ink) !important; display: flex; align-items: center; justify-content: space-between; gap: 16px; } #moplan-showroom .pcs-skin .family-footer * { color: inherit !important; background: transparent !important; box-shadow: none !important; } #moplan-showroom .pcs-skin .family-footer strong, #moplan-showroom .pcs-skin .family-footer b { font-size: 26px !important; font-weight: 500 !important; letter-spacing: -1px; } } @media (hover: hover) and (pointer: fine), (min-width: 600px) and (min-height: 600px) { /* 가족 카드 머리띠(주황·파랑) → 종이색 + 아래 선, 대표 배지는 액센트 */ #moplan-showroom .pcs-skin .family-card { padding: 0 !important; overflow: hidden; } #moplan-showroom .pcs-skin .family-card > *:not(.family-card-header) { margin-left: 22px !important; margin-right: 22px !important; } #moplan-showroom .pcs-skin .family-card-header { background: var(--mp-hero) !important; color: var(--mp-ink) !important; border-bottom: 1px solid var(--mp-line) !important; padding: 14px 22px !important; margin: 0 0 16px !important; font-size: 15px !important; font-weight: 500 !important; } #moplan-showroom .pcs-skin .family-card-header * { color: inherit !important; } #moplan-showroom .pcs-skin .family-card-header .rep-badge, #moplan-showroom .pcs-skin .family-card-header span[class*="rep"] { background: var(--mp-soft) !important; color: var(--mp-accent) !important; border-radius: 999px; padding: 2px 8px; } #moplan-showroom .pcs-skin .result-row.total, #moplan-showroom .pcs-skin .family-card .result-row.total * { color: var(--mp-accent) !important; } #moplan-showroom .pcs-skin .family-card .result-row { color: var(--mp-ink) !important; } } @media (hover: hover) and (pointer: fine), (min-width: 600px) and (min-height: 600px) { /* 인터넷 허브 카드 2장: 세로 한 줄 → 가로 2열, 왼쪽 정렬 */ #moplan-showroom .pcs-skin .choice-grid, #moplan-showroom .pcs-skin .choice-grid.centered { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 16px !important; width: auto !important; max-width: none !important; margin: 0 0 24px !important; justify-content: stretch !important; } #moplan-showroom .pcs-skin .choice-card { text-align: left !important; width: auto !important; max-width: none !important; margin: 0 !important; min-height: 158px !important; justify-content: flex-start !important; } #moplan-showroom .pcs-skin .choice-card .card-info { text-align: left !important; } } @media (hover: hover) and (pointer: fine), (min-width: 600px) and (min-height: 600px) { #moplan-showroom .mp-inner-wrap { max-width: 1240px; } } @media (hover: hover) and (pointer: fine), (min-width: 600px) and (min-height: 600px) { /* 유지비: 5·6번 색 상자(연파랑·연분홍) → 종이/히어로 톤, 제목 파랑 → 잉크 */ #moplan-showroom .pcs-skin .mnt-highlight-box, #moplan-showroom .pcs-skin .mnt-highlight-box-red { background: var(--mp-hero) !important; border: 1px solid var(--mp-line) !important; border-radius: 8px !important; padding: 20px !important; } #moplan-showroom .pcs-skin .mnt-highlight-box-red { border-color: var(--mp-accent) !important; } #moplan-showroom .pcs-skin .mnt-title { color: var(--mp-ink) !important; font-size: 22px !important; font-weight: 500 !important; } #moplan-showroom .pcs-skin .mnt-plan-change-box, #moplan-showroom .pcs-skin .mnt-schedule-advanced-area { background: var(--mp-paper) !important; border: 1px solid var(--mp-line) !important; border-radius: 6px !important; } #moplan-showroom .pcs-skin .mnt-month-step-btn { background: var(--mp-paper) !important; color: var(--mp-ink) !important; border: 1px solid var(--mp-line) !important; border-radius: 6px !important; } #moplan-showroom .pcs-skin .mnt-month-quick-picks button { color: var(--mp-muted) !important; } #moplan-showroom .pcs-skin .mnt-month-quick-picks button.active, #moplan-showroom .pcs-skin .mnt-month-quick-picks button.on { color: var(--mp-accent) !important; } #moplan-showroom .pcs-skin .mnt-schedule-advanced-link, #moplan-showroom .pcs-skin a { color: var(--mp-accent) !important; } /* 위약금: 선택 버튼 2개 → 허브 카드 톤(파란 테두리·호버 들썩임 제거) */ #moplan-showroom .pcs-skin .choice-buttons-container { gap: 16px; } #moplan-showroom .pcs-skin .choice-button { max-width: none !important; align-items: flex-start !important; text-align: left !important; padding: 25px !important; min-height: 130px; border: 1px solid var(--mp-line) !important; border-radius: 8px !important; background: var(--mp-paper) !important; color: var(--mp-ink) !important; font-size: 15px !important; } #moplan-showroom .pcs-skin .choice-button:first-child { background: var(--mp-dark) !important; color: var(--mp-inverse) !important; border-color: var(--mp-dark) !important; } #moplan-showroom .pcs-skin .choice-button:hover { transform: none !important; background: var(--mp-hero) !important; color: var(--mp-ink) !important; border-color: var(--mp-accent) !important; } #moplan-showroom .pcs-skin .choice-button:first-child:hover { background: var(--mp-dark) !important; color: var(--mp-inverse) !important; } #moplan-showroom .pcs-skin .choice-button strong, #moplan-showroom .pcs-skin .choice-button b { font-size: 22px !important; font-weight: 500 !important; letter-spacing: -.7px; } #moplan-showroom .pcs-skin .choice-button span, #moplan-showroom .pcs-skin .choice-button small, #moplan-showroom .pcs-skin .choice-button p { font-size: 12px !important; color: var(--mp-muted) !important; margin-top: 8px; } #moplan-showroom .pcs-skin .choice-button:first-child span, #moplan-showroom .pcs-skin .choice-button:first-child small, #moplan-showroom .pcs-skin .choice-button:first-child p { color: #d6cab8 !important; } #moplan-showroom .pcs-skin #penalty-termination-calculator .section { max-width: none !important; margin: 0 0 20px !important; } #moplan-showroom .pcs-skin .penalty-heading-row { color: var(--mp-ink) !important; } #moplan-showroom .pcs-skin #penalty-choice-wrapper p { color: var(--mp-muted) !important; font-weight: 400 !important; font-size: 12px !important; } } @media (hover: hover) and (pointer: fine), (min-width: 600px) and (min-height: 600px) { /* 인터넷 허브 카드: id 붙은 사이트 규칙보다 세게 */ #moplan-showroom .pcs-skin #calculator-choice-wrapper, #moplan-showroom .pcs-skin #calculator-choice-wrapper .choice-grid, #moplan-showroom .pcs-skin #calculator-choice-wrapper .choice-grid.centered { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 16px !important; width: 100% !important; max-width: none !important; margin: 0 0 24px !important; padding: 0 !important; justify-content: stretch !important; justify-items: stretch !important; } #moplan-showroom .pcs-skin #calculator-choice-wrapper { display: block !important; } #moplan-showroom .pcs-skin #calculator-choice-wrapper .choice-card { width: 100% !important; min-width: 0 !important; max-width: none !important; flex: none !important; } } @media (hover: hover) and (pointer: fine), (min-width: 600px) and (min-height: 600px) { /* 가족 카드 하단 합계 상자·유지비 개통일자 상자: 사이트 파랑/남색 → 히어로 톤 */ #moplan-showroom .pcs-skin .family-card-result { background: var(--mp-hero) !important; border: 1px solid var(--mp-line) !important; border-radius: 6px !important; color: var(--mp-ink) !important; padding: 14px 16px !important; } #moplan-showroom .pcs-skin .family-card-result .result-row, #moplan-showroom .pcs-skin .family-card-result .result-row * { color: var(--mp-ink) !important; border-color: var(--mp-line) !important; } #moplan-showroom .pcs-skin .family-card-result .result-row.total, #moplan-showroom .pcs-skin .family-card-result .result-row.total * { color: var(--mp-accent) !important; } #moplan-showroom .pcs-skin .mnt-date-input-group { background: var(--mp-bg) !important; border: 1px solid var(--mp-line) !important; border-radius: 6px !important; color: var(--mp-ink) !important; } #moplan-showroom .pcs-skin .mnt-date-field { background: transparent !important; border: 0 !important; color: var(--mp-ink) !important; min-height: 0 !important; padding: 4px 0 !important; } #moplan-showroom .pcs-skin .mnt-date-input-group * { color: var(--mp-ink) !important; } } @media (hover: hover) and (pointer: fine), (min-width: 600px) and (min-height: 600px) { #moplan-showroom .pcs-skin .plan-input-wrapper, #moplan-showroom .pcs-skin .ppf { cursor: pointer; } #moplan-showroom .pcs-skin .plan-list-btn { width: 100% !important; text-align: center; } } @media (hover: hover) and (pointer: fine), (min-width: 600px) and (min-height: 600px) { /* 계산기 페이지 좌우 배치(인터넷): 오른쪽 「선택한 조건」 카드 고정, 계산 버튼 포함 */ #moplan-showroom .pcs-ws { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 24px; align-items: start; padding-bottom: 42px; } #moplan-showroom .pcs-ws > div:last-child { align-self: stretch; } #moplan-showroom .pcs-ws .pcs-sticky { position: sticky; top: 20px; } #moplan-showroom .pcs-ws .mi-summary[hidden] { display: none !important; } #moplan-showroom .pcs-ws .mi-summary dl { font-size: 12px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 13px 10px; margin: 20px 0; } #moplan-showroom .pcs-ws .mi-summary dt { color: var(--mp-muted); white-space: nowrap; } #moplan-showroom .pcs-ws .mi-summary dd { margin: 0; text-align: right; word-break: keep-all; } #moplan-showroom .pcs-ws .mi-summary .pcs-ws-btn { display: inline-flex !important; width: 100% !important; justify-content: space-between; align-items: center; gap: 12px; min-height: 49px !important; padding: 13px 18px !important; margin: 0 !important; border-radius: 7px !important; background: var(--mp-accent) !important; color: var(--mp-on-accent) !important; font-size: 14px !important; font-weight: 700 !important; border: 0 !important; min-width: 0 !important; } #moplan-showroom .pcs-ws .mi-summary .pcs-ws-btn::after { content: '→'; } #moplan-showroom .pcs-ws-art svg { width: 64px; height: 78px; flex: none; } #moplan-showroom .pcs-ws .pcs-skin .view-mode-buttons { max-width: 360px; margin-bottom: 16px !important; } #moplan-showroom .pcs-ws .pcs-skin #calculator-main-wrapper > .main-content { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; } #moplan-showroom .pcs-ws .pcs-skin #calculator-main-wrapper:not(.comparison-mode) > .main-content, #moplan-showroom .pcs-ws .pcs-skin #calculator-main-wrapper > .main-content:has(#carrier-2-section[style*="none"]) { grid-template-columns: 1fr; } #moplan-showroom .pcs-ws .pcs-skin .calc-reset-card-btn { grid-column: 1 / -1; justify-self: end; } } @media (hover: hover) and (pointer: fine), (min-width: 600px) and (min-height: 600px) { #moplan-showroom .pcs-ws #calculate-internet-btn, #moplan-showroom .pcs-ws .mi-summary .calc-button { width: 100% !important; min-width: 0 !important; margin: 0 !important; display: inline-flex !important; justify-content: space-between !important; } } @media (hover: hover) and (pointer: fine), (min-width: 600px) and (min-height: 600px) { /* 인터넷 결과(휴대폰 결과와 같은 톤) */ #moplan-showroom #pcs-result { padding-bottom: 48px; } #moplan-showroom #pcs-result[hidden] { display: none !important; } #moplan-showroom #pcs-result h1 { font-size: 37px !important; line-height: 1.3 !important; letter-spacing: -1.4px !important; font-weight: 500 !important; color: var(--mp-ink) !important; text-align: left !important; background: none !important; -webkit-text-fill-color: currentColor !important; margin: 0 !important; } #moplan-showroom #pcs-result .mi-head p, #moplan-showroom #pcs-result .mc-head p { color: var(--mp-muted) !important; font-size: 14px !important; margin: 12px 0 0 !important; text-align: left !important; } #moplan-showroom #pcs-result h2 { color: var(--mp-ink) !important; text-align: left !important; background: none !important; -webkit-text-fill-color: currentColor !important; font-weight: 500 !important; margin: 0 !important; } #moplan-showroom #pcs-result .mi-result-section h2, #moplan-showroom #pcs-result .mc-breakdown h2 { font-size: 22px !important; } #moplan-showroom #pcs-result .mc-card-head h2 { font-size: 24px !important; } #moplan-showroom #pcs-result .mc-verdict h2 { font-size: 28px !important; } #moplan-showroom #pcs-result .mc-verdict h2 strong, #moplan-showroom #pcs-result .mp-emphasis { color: var(--mp-accent) !important; } #moplan-showroom #pcs-result .mi-result-top p, #moplan-showroom #pcs-result .mi-result-top small { color: #d6cab8 !important; } #moplan-showroom #pcs-result .mi-result-top, #moplan-showroom #pcs-result .mi-result-top * { text-align: left; } #moplan-showroom #pcs-result .mi-result-equation strong { color: var(--mp-inverse) !important; } #moplan-showroom #pcs-result .pcs-res-extra { text-align: right; font-size: 13px !important; line-height: 1.5; font-weight: 400 !important; } #moplan-showroom #pcs-result .pcs-res-extra span { display: block; } #moplan-showroom #pcs-result .pcs-res-extra span::before { content: '− '; opacity: .7; } #moplan-showroom #pcs-result .pcs-res-extra span.add::before { content: '+ '; } /* 결과 화면 「조건 수정하기 / 홈으로」 — 맨 아래 글자 링크라 끝까지 내려야 보였다 → 오른쪽 카드(단독)·설치비 섹션(비교) 안으로 (사장님 09-15) */ /* 결과 머리글 오른쪽 한 줄: 홈으로(글자) · 출력 · 공유 · 조건 수정하기(액센트) — 휴대폰 비교 결과와 같은 톤 (사장님 09-15 「출력 공유 조건 수정도 위로」) */ #moplan-showroom #pcs-result .pcs-res-head { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px; } /* 출력·공유는 원본 .action-buttons 상자에 담겨 오는데 그 상자에 margin-top:16px 이 걸려 있어 네 버튼이 한 줄에 안 서고 두 개만 8px 내려가 있었다 (사장님 09-15 「도형 자체가 뒤죽박죽」) → 상자를 display: contents 로 없애 버튼 넷을 같은 flex 줄의 형제로 만든다. 굵기도 통일(테두리 500 / 채움 600). */ #moplan-showroom #pcs-result .pcs-res-head .pcs-res-acts { display: contents !important; } #moplan-showroom #pcs-result .pcs-res-head > a, #moplan-showroom #pcs-result .pcs-res-head button { margin: 0 !important; font-weight: 500 !important; } #moplan-showroom #pcs-result .pcs-res-head .pcs-edit { font-weight: 600 !important; } #moplan-showroom #pcs-result .pcs-res-head #printButton, #moplan-showroom #pcs-result .pcs-res-head #shareButton, #moplan-showroom #pcs-result .pcs-res-head button:not(.mp-primary) { min-height: 42px !important; padding: 11px 16px !important; border-radius: 8px !important; font-size: 13.5px !important; border: 1px solid var(--mp-line) !important; background: var(--mp-paper) !important; color: var(--mp-ink) !important; } #moplan-showroom #pcs-result .pcs-res-head #printButton:hover, #moplan-showroom #pcs-result .pcs-res-head #shareButton:hover { border-color: var(--mp-accent) !important; color: var(--mp-accent) !important; } #moplan-showroom #pcs-result .pcs-res-head .pcs-edit { min-height: 42px !important; margin: 0 !important; padding: 11px 20px !important; border-radius: 8px !important; font-size: 13.5px !important; font-weight: 600 !important; border: 1px solid var(--mp-accent) !important; background: var(--mp-accent) !important; color: var(--mp-on-accent) !important; } #moplan-showroom #pcs-result .pcs-res-head .pcs-edit:hover { filter: brightness(1.06); } /* 「홈으로」만 맨 글자 링크라 나머지 버튼과 안 맞았다 → 같은 테두리 버튼으로 (사장님 09-15) */ #moplan-showroom #pcs-result .pcs-res-head .mi-back-link { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 11px 16px; border: 1px solid var(--mp-line); border-radius: 8px; background: var(--mp-paper); color: var(--mp-ink); font-size: 13.5px; font-weight: 500; text-decoration: none; } #moplan-showroom #pcs-result .pcs-res-head .mi-back-link:hover { color: var(--mp-accent); } /* 머리글이 글 블록 + 버튼 줄 두 칸이 되도록 */ /* 버튼 줄이 아래쪽 끝에 붙어 제목과 따로 놀았다 → 글 블록 높이의 가운데에 세워 좌우 무게를 맞춘다 (사장님 09-15 「도형의 위치 좌우 비중 이런 걸 맞춰야지」) */ #moplan-showroom #pcs-result .mi-head, #moplan-showroom #pcs-result .mc-head { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; } #moplan-showroom #pcs-result .mi-head > div:first-child, #moplan-showroom #pcs-result .mc-head > div:first-child { flex: 1 1 420px; min-width: 0; } #moplan-showroom #pcs-result .pcs-res-head { flex: 0 0 auto; } /* 비교 결과: 설치비는 왼쪽 좁게, 월별 내역은 오른쪽 넓게 (사장님 09-15 「설치비와 월별 내역을 우측으로 나누고 월별 내역 텍스트를 좀 키우자」) */ /* 두 창을 같은 크기로 — 설치비 창이 좁아 월별 내역 창과 달라 보였다 (사장님 09-15 「창 도형을 동일하게」) */ #moplan-showroom #pcs-result .mc-bd-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 34px; align-items: start; } #moplan-showroom #pcs-result .mc-bd-2 .mc-bd-col h2 { margin: 0 0 12px; font-size: 20px; } #moplan-showroom #pcs-result .mc-bd-2 .pcs-res-inst { font-size: 13.5px; line-height: 1.75; word-break: keep-all; } #moplan-showroom #pcs-result .mc-bd-month .mc-monthly summary { font-size: 15px; font-weight: 600; } #moplan-showroom #pcs-result .mc-bd-month #pcs-res-month { overflow-x: auto; } #moplan-showroom #pcs-result .mc-bd-month #pcs-res-month table { font-size: 13px; width: 100%; } #moplan-showroom #pcs-result .mc-bd-month #pcs-res-month th, #moplan-showroom #pcs-result .mc-bd-month #pcs-res-month td { font-size: 13px !important; padding: 9px 8px !important; white-space: nowrap; } /* 두 칸 모두 도형을 준다 — 설치비는 톤 상자, 월별 내역은 테두리 카드 + 접기 띠(＋/－) (사장님 09-15 「월별 내역 부분도 도형을 내놓자」) */ #moplan-showroom #pcs-result .mc-bd-2 { gap: 0; } #moplan-showroom #pcs-result .mc-bd-2 .mc-bd-col { padding: 0 28px; } #moplan-showroom #pcs-result .mc-bd-2 .mc-bd-col:first-child { padding-left: 0; } #moplan-showroom #pcs-result .mc-bd-2 .mc-bd-month { border-left: 1px solid var(--mp-line); padding-right: 0; } /* 설치비도 월별 내역과 같은 도형 — 테두리 카드 + 톤 머리 띠 (사장님 09-15 「동일하게 해 줘야지」) */ #moplan-showroom #pcs-result .mc-bd-2 .inst-card { background: var(--mp-paper); border: 1px solid var(--mp-line); border-radius: 10px; overflow: hidden; margin: 0; padding: 0; } #moplan-showroom #pcs-result .mc-bd-2 .inst-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 16px; background: var(--mp-hero); font-size: 15px; font-weight: 600; color: var(--mp-ink); } #moplan-showroom #pcs-result .mc-bd-2 .inst-body { padding: 14px 16px 16px; font-size: 13.5px; line-height: 1.75; word-break: keep-all; } /* 창 테두리는 바깥 .mth-card 가 갖는다 — 접혀 있을 때 설치비 창과 높이를 맞추기 위해 (사장님 09-15 「둘이 창 높이가 안 맞잖아」) */ #moplan-showroom #pcs-result .mth-card { border: 1px solid var(--mp-line); border-radius: 10px; overflow: hidden; background: var(--mp-paper); display: flex; flex-direction: column; } #moplan-showroom #pcs-result .mc-monthly { border: 0; border-radius: 0; background: transparent; } /* details 에 남아 있던 margin-top 18px 때문에 월별 창의 머리 띠가 설치비보다 18px 내려와 있었다 (사장님 09-15 「좌측 설치비 창이랑 동일하게」) 머리 띠 높이도 52 vs 48 로 달라서 line-height·min-height 로 못 박는다. */ #moplan-showroom #pcs-result .mth-card .mc-monthly { margin: 0 !important; } #moplan-showroom #pcs-result .inst-head, #moplan-showroom #pcs-result .mth-card summary { min-height: 52px; line-height: 1.55; box-sizing: border-box; } #moplan-showroom #pcs-result .mth-hint { margin: 0; padding: 18px 16px; font-size: 13px; color: var(--mp-muted); } #moplan-showroom #pcs-result .mth-card:has(.mc-monthly[open]) .mth-hint { display: none; } /* 접혀 있을 때만 두 창 높이를 맞춘다(펼치면 표가 길어지므로 각자 높이) */ #moplan-showroom #pcs-result .mc-bd-2:not(:has(.mc-monthly[open])) { align-items: stretch; } #moplan-showroom #pcs-result .mc-bd-2:not(:has(.mc-monthly[open])) .mc-bd-col { display: flex; flex-direction: column; } #moplan-showroom #pcs-result .mc-bd-2:not(:has(.mc-monthly[open])) .inst-card, #moplan-showroom #pcs-result .mc-bd-2:not(:has(.mc-monthly[open])) .mth-card { flex: 1 1 auto; } #moplan-showroom #pcs-result .mc-monthly summary { padding: 13px 16px !important; background: var(--mp-hero); cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 12px; list-style: none; } #moplan-showroom #pcs-result .mc-monthly summary::-webkit-details-marker { display: none; } #moplan-showroom #pcs-result .mc-monthly summary::after { content: "＋"; font-size: 16px; color: var(--mp-accent); line-height: 1; } #moplan-showroom #pcs-result .mc-monthly[open] summary::after { content: "－"; } #moplan-showroom #pcs-result .mc-bd-month #pcs-res-month { padding: 6px 14px 14px; } #moplan-showroom #pcs-result .mc-bd-month #pcs-res-month tbody tr:nth-child(even) { background: color-mix(in srgb, var(--mp-hero) 45%, transparent); } #moplan-showroom #pcs-result .mc-bd-month #pcs-res-month th { background: transparent !important; border-bottom: 1px solid var(--mp-line) !important; } @media (max-width: 1100px) { #moplan-showroom #pcs-result .mc-bd-2 .mc-bd-col { padding: 0; } #moplan-showroom #pcs-result .mc-bd-2 .mc-bd-month { border-left: 0; border-top: 1px solid var(--mp-line); padding-top: 22px; margin-top: 22px; } } @media (max-width: 1100px) { #moplan-showroom #pcs-result .mc-bd-2 { grid-template-columns: 1fr; } } #moplan-showroom #pcs-result .pcs-res-list { margin-top: 14px; } #moplan-showroom #pcs-result .pcs-res-row { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--mp-line); font-size: 14px; color: var(--mp-ink); } #moplan-showroom #pcs-result .pcs-res-row.win { color: var(--mp-win, #1f6f3f); } #moplan-showroom #pcs-result .pcs-res-row span:first-child { word-break: keep-all; } #moplan-showroom #pcs-result .pcs-res-total { display: flex; justify-content: space-between; align-items: baseline; padding: 16px 0 0; font-size: 14px; color: var(--mp-muted); } #moplan-showroom #pcs-result .pcs-res-total strong { font-size: 26px; font-weight: 500; letter-spacing: -.8px; color: var(--mp-ink); } #moplan-showroom #pcs-result .pcs-res-inst { font-size: 12px; color: var(--mp-muted); line-height: 1.7; margin-top: 12px; } #moplan-showroom #pcs-result .mi-summary { position: static; } #moplan-showroom #pcs-result .mi-month-detail summary, #moplan-showroom #pcs-result .mc-monthly summary { list-style: none; cursor: pointer; font-size: 17px; display: flex; justify-content: space-between; } #moplan-showroom #pcs-result .mc-monthly { margin-top: 18px; } #moplan-showroom #pcs-result #monthly-table-wrapper { display: block !important; margin-top: 14px; } #moplan-showroom #pcs-result .monthly-table { width: 100%; border-collapse: collapse; font-size: 12px; } #moplan-showroom #pcs-result .monthly-table th, #moplan-showroom #pcs-result .monthly-table td { padding: 10px 6px !important; border: 0 !important; border-bottom: 1px solid var(--mp-line) !important; text-align: right; color: var(--mp-ink) !important; background: transparent !important; } #moplan-showroom #pcs-result .monthly-table th { color: var(--mp-muted) !important; font-weight: 500 !important; } #moplan-showroom #pcs-result .monthly-table th:first-child, #moplan-showroom #pcs-result .monthly-table td:first-child { text-align: left; } #moplan-showroom #pcs-result .monthly-table thead, #moplan-showroom #pcs-result .monthly-table tr, #moplan-showroom #pcs-result .monthly-table tbody { background: transparent !important; } #moplan-showroom #pcs-result .pcs-res-acts { position: static !important; display: flex; gap: 8px; margin: 16px 0 0 !important; } #moplan-showroom #pcs-result .pcs-res-acts button { background: var(--mp-paper) !important; color: var(--mp-ink) !important; border: 1px solid var(--mp-line) !important; border-radius: 6px !important; font-size: 13px !important; padding: 8px 12px !important; } #moplan-showroom .pcs-skin #result.pcs-res-hidden { display: none !important; } } @media (hover: hover) and (pointer: fine), (min-width: 600px) and (min-height: 600px) { #moplan-showroom .pcs-ws[hidden] { display: none !important; } #moplan-showroom #pcs-result .mi-breadcrumb button { padding: 0; color: var(--mp-muted); font-size: 12px; background: none; border: 0; cursor: pointer; } #moplan-showroom #pcs-result .mi-result-actions { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 8px 0 32px; } #moplan-showroom #pcs-result .mi-result-actions .mi-link { cursor: pointer; background: none; border: 0; border-bottom: 1px solid var(--mp-line); color: var(--mp-muted); font-size: 13px; padding: 4px 0; text-decoration: none; } } @media (hover: hover) and (pointer: fine), (min-width: 600px) and (min-height: 600px) { /* ── 실시간 시세(community) 스킨: 테일윈드 유틸 클래스 위에 토큰 덮어쓰기 ── */ #moplan-showroom .pcs-head-actions { display: flex; gap: 10px; align-items: center; } #moplan-showroom .pcs-head-actions .board-write-btn { display: inline-flex !important; align-items: center; gap: 8px; min-height: 54px; padding: 14px 23px !important; border-radius: 7px !important; background: var(--mp-accent) !important; color: var(--mp-on-accent) !important; font-size: 15px !important; font-weight: 700 !important; border: 0 !important; box-shadow: none !important; } #moplan-showroom .pcs-head-actions .board-notify-btn { display: inline-flex !important; align-items: center; gap: 6px; min-height: 54px; padding: 14px 18px !important; border-radius: 7px !important; background: var(--mp-paper) !important; color: var(--mp-ink) !important; border: 1px solid var(--mp-line) !important; font-size: 14px !important; box-shadow: none !important; } #moplan-showroom .pcs-board > .container > .flex.justify-between { display: none !important; } #moplan-showroom .pcs-board .top-banner-row { display: grid !important; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0 0 16px !important; } #moplan-showroom .pcs-board .help-video-banner { display: flex !important; } #moplan-showroom .pcs-board .help-video-banner, #moplan-showroom .pcs-board .subsidy-banner { background: var(--mp-paper) !important; border: 1px solid var(--mp-line) !important; border-radius: 8px !important; color: var(--mp-ink) !important; min-height: 52px; box-shadow: none !important; } #moplan-showroom .pcs-board .subsidy-banner .sbn-go, #moplan-showroom .pcs-board .help-video-banner .hvb-go { color: var(--mp-accent) !important; } #moplan-showroom .pcs-board .bg-gray-50 { background: var(--mp-hero) !important; border: 1px solid var(--mp-line) !important; border-radius: 8px !important; padding: 16px !important; margin-bottom: 20px !important; } #moplan-showroom .pcs-board input, #moplan-showroom .pcs-board select { background: var(--mp-paper) !important; border: 1px solid var(--mp-line) !important; border-radius: 6px !important; color: var(--mp-ink) !important; font-size: 14px !important; min-height: 44px !important; padding: 0 12px !important; box-shadow: none !important; } #moplan-showroom .pcs-board .sort-seg { display: flex; background: var(--mp-paper) !important; border: 1px solid var(--mp-line) !important; border-radius: 6px !important; padding: 3px !important; } #moplan-showroom .pcs-board .sort-seg button { background: transparent !important; color: var(--mp-muted) !important; border: 0 !important; border-radius: 4px !important; font-size: 13px !important; font-weight: 600 !important; padding: 8px 12px !important; } #moplan-showroom .pcs-board .sort-seg button.active, #moplan-showroom .pcs-board .sort-seg button[aria-pressed="true"] { background: var(--mp-soft) !important; color: var(--mp-accent) !important; } #moplan-showroom .pcs-board #post-list-container { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 20px !important; } #moplan-showroom .pcs-board .post-card { background: var(--mp-paper) !important; border: 1px solid var(--mp-line) !important; border-left-width: 1px !important; border-radius: 8px !important; box-shadow: none !important; overflow: hidden; } #moplan-showroom .pcs-board .post-card:hover { border-color: var(--mp-accent) !important; } #moplan-showroom .pcs-board .post-card *:not(img) { color: var(--mp-ink); } #moplan-showroom .pcs-board .post-card .text-gray-500, #moplan-showroom .pcs-board .post-card .text-gray-400 { color: var(--mp-muted) !important; } #moplan-showroom .pcs-board .post-card .rounded-full, #moplan-showroom .pcs-board .post-card .rounded { background: var(--mp-hero) !important; color: var(--mp-muted) !important; } #moplan-showroom .pcs-board .board-dtguide { background: var(--mp-dark) !important; color: var(--mp-inverse) !important; border-radius: 8px !important; margin-top: 28px !important; box-shadow: none !important; } #moplan-showroom .pcs-board .board-dtguide .s { color: #d6cab8 !important; } #moplan-showroom .pcs-board .board-dtguide .btn { background: var(--mp-accent) !important; color: var(--mp-on-accent) !important; border-radius: 6px !important; } #moplan-showroom .pcs-board #visitor-counter-slot, #moplan-showroom .pcs-board #visitor-counter-slot * { color: var(--mp-muted) !important; border-color: var(--mp-line) !important; } #moplan-showroom .pcs-board .text-white { color: #fff !important; } } @media (hover: hover) and (pointer: fine), (min-width: 600px) and (min-height: 600px) { #moplan-showroom .pcs-board .search-grow input { padding-left: 40px !important; } #moplan-showroom .pcs-board .search-grow .psearch-ico, #moplan-showroom .pcs-board .search-grow i { color: var(--mp-muted) !important; } #moplan-showroom .pcs-board #post-list-container button, #moplan-showroom .pcs-board #post-list-container .text-white { color: var(--mp-ink) !important; background: var(--mp-paper) !important; border: 1px solid var(--mp-line) !important; border-radius: 6px !important; padding: 8px 14px !important; } } @media (hover: hover) and (pointer: fine), (min-width: 600px) and (min-height: 600px) { /* ── 이용 가이드(guide/) 스킨 ── */ body.pcs .pcs-hidden, body.pcs > .g-top, body.pcs > .g-foot { display: none !important; } #moplan-showroom .pcs-guide .page { max-width: none !important; margin: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important; } #moplan-showroom .pcs-guide .g-head { display: none !important; } #moplan-showroom .pcs-guide .g-body { padding: 0 !important; } #moplan-showroom .pcs-guide .hub-cards { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 16px !important; padding: 4px 0 24px !important; } #moplan-showroom .pcs-guide .hub-card { display: flex; flex-direction: column; align-items: flex-start; min-height: 172px; padding: 25px !important; 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; text-decoration: none; } #moplan-showroom .pcs-guide .hub-card:hover { border-color: var(--mp-accent) !important; transform: none !important; } #moplan-showroom .pcs-guide .hub-card .ico { font-size: 22px; margin-bottom: 10px; } #moplan-showroom .pcs-guide .hub-card b { font-size: 19px; font-weight: 500 !important; letter-spacing: -.5px; color: var(--mp-ink) !important; line-height: 1.35; } #moplan-showroom .pcs-guide .hub-card span { font-size: 12px; color: var(--mp-muted) !important; margin-top: 8px; } #moplan-showroom .pcs-guide .hub-card .go { margin-top: auto; padding-top: 12px; color: var(--mp-accent) !important; font-size: 13px; } #moplan-showroom .pcs-guide .hub-card br { display: none; } #moplan-showroom .pcs-guide h2.sec { font-size: 22px !important; font-weight: 500 !important; letter-spacing: -.7px; color: var(--mp-ink) !important; border: 0 !important; padding: 26px 0 12px !important; margin: 0 !important; background: none !important; } #moplan-showroom .pcs-guide h2.sec::before { display: none !important; } #moplan-showroom .pcs-guide .cta { background: var(--mp-dark) !important; color: var(--mp-inverse) !important; border-radius: 8px !important; padding: 26px 30px !important; box-shadow: none !important; margin-top: 12px !important; } #moplan-showroom .pcs-guide .cta * { color: inherit; } #moplan-showroom .pcs-guide .cta a, #moplan-showroom .pcs-guide .cta .btn, #moplan-showroom .pcs-guide .cta button { background: var(--mp-accent) !important; color: var(--mp-on-accent) !important; border-radius: 7px !important; padding: 12px 20px !important; font-weight: 700; text-decoration: none; } #moplan-showroom .pcs-guide .tldr, #moplan-showroom .pcs-guide .ex-box, #moplan-showroom .pcs-guide .note, #moplan-showroom .pcs-guide .stb-hint, #moplan-showroom .pcs-guide .g-callout { background: var(--mp-hero) !important; border: 1px solid var(--mp-line) !important; border-left: 3px solid var(--mp-accent) !important; border-radius: 8px !important; color: var(--mp-ink) !important; box-shadow: none !important; } #moplan-showroom .pcs-guide .tldr b, #moplan-showroom .pcs-guide .tldr strong, #moplan-showroom .pcs-guide p.tx strong, #moplan-showroom .pcs-guide p.tx b, #moplan-showroom .pcs-guide em { color: var(--mp-accent) !important; background: none !important; -webkit-text-fill-color: currentColor !important; } #moplan-showroom .pcs-guide p.tx, #moplan-showroom .pcs-guide li, #moplan-showroom .pcs-guide p { color: var(--mp-ink); font-size: 15px; line-height: 1.75; } #moplan-showroom .pcs-guide a { color: var(--mp-accent); } #moplan-showroom .pcs-guide table, #moplan-showroom .pcs-guide .cmp { border-collapse: collapse !important; width: 100%; border: 1px solid var(--mp-line) !important; border-radius: 8px; overflow: hidden; } #moplan-showroom .pcs-guide th, #moplan-showroom .pcs-guide td { border-color: var(--mp-line) !important; background: transparent !important; color: var(--mp-ink) !important; padding: 12px 14px !important; } /* 계산기 숫자표용 text-align:right(.pcs-skin td) 가 가이드 표까지 먹어 값이 죄다 오른쪽으로 쏠렸다 → 원본 .cmp 처럼 값은 가운데, 맨 왼쪽 라벨 칸은 왼쪽 (사장님 09-15 「이건 또 왜 우측에 쏠림?」) */ #moplan-showroom .pcs-guide th, #moplan-showroom .pcs-guide td { text-align: center; } #moplan-showroom .pcs-guide tr > *:first-child { text-align: left; } #moplan-showroom .pcs-guide th, #moplan-showroom .pcs-guide thead td { background: var(--mp-hero) !important; color: var(--mp-muted) !important; font-weight: 500 !important; } #moplan-showroom .pcs-guide .stb-grid > *, #moplan-showroom .pcs-guide .stb-card, #moplan-showroom .pcs-guide .rel > *, #moplan-showroom .pcs-guide .faq-item, #moplan-showroom .pcs-guide details { background: var(--mp-paper) !important; border: 1px solid var(--mp-line) !important; border-radius: 8px !important; color: var(--mp-ink) !important; box-shadow: none !important; } #moplan-showroom .pcs-guide .stb-grid > *:hover { border-color: var(--mp-accent) !important; transform: none !important; } /* 통신사 로고 배지는 브랜드색을 살린다 — 잉크색으로 눌러 놨더니 SK·KT·U+ 가 다 검정 사각형으로 보였다 (사장님 09-15 「로고에 색상을 넣어야지」) */ #moplan-showroom .pcs-guide .stb-grid.co-sk > *, #moplan-showroom .pcs-guide .stb-grid.co-kt > *, #moplan-showroom .pcs-guide .stb-grid.co-lg > * { border-top: 3px solid var(--co) !important; } #moplan-showroom .pcs-guide .stb-grid b, #moplan-showroom .pcs-guide .stb-grid .price, #moplan-showroom .pcs-guide .stb-grid strong { color: var(--mp-accent) !important; } #moplan-showroom .pcs-guide summary, #moplan-showroom .pcs-guide .faq-q { color: var(--mp-ink) !important; background: transparent !important; } #moplan-showroom .pcs-guide .g-foot, #moplan-showroom .pcs-guide .foot { color: var(--mp-muted) !important; } /* 다크에서 투명 PNG 뒤 흰 상자를 없애는 규칙인데 통신사 배지(.co-logo)의 브랜드색 바탕까지 지웠다 → 배지는 제외 (사장님 09-15) */ #moplan-showroom[data-theme="dark"] .pcs-guide img:not(.co-logo) { background: transparent; } } /* ── 단말기 정보: 공통지원금·자급제 판매가 목록 확대 — A안 「큰 목록(표 유지)」 (사장님 09-16 「모델들 너무 작다, 글자도 키워야」, 시안 settop-photos/dv-sian.js) PC 전용(이 파일 자체가 PC 갈래). 목록을 만드는 subsidy-modal.js·unlocked-price-modal.js 는 손대지 않고 devices.html 의 두 패널 안에서만 키운다. */ @media (hover: hover) and (pointer: fine), (min-width: 600px) and (min-height: 600px) { /* 공통지원금 표 */ #dev-panel-subsidy .sbsd-lgnd { font-size: 13.5px !important; } #dev-panel-subsidy .sbsd-series { font-size: 15px !important; line-height: 1.3 !important; padding: 10px 14px !important; border-radius: 8px !important; } #dev-panel-subsidy table th { font-size: 13.5px !important; padding: 10px 14px !important; } #dev-panel-subsidy tr.sbsd-dev td { padding: 14px !important; } #dev-panel-subsidy .sbsd-cell { gap: 18px !important; } #dev-panel-subsidy .sbsd-specthumb .sbsd-thumbfrm { width: 86px !important; height: 86px !important; border-radius: 14px !important; } #dev-panel-subsidy .sbsd-spectag { font-size: 11px !important; padding: 2px 7px !important; } #dev-panel-subsidy .sbsd-name { font-size: 19px !important; font-weight: 700 !important; letter-spacing: -.4px; } #dev-panel-subsidy .sbsd-rel { font-size: 14px !important; margin-top: 6px !important; } #dev-panel-subsidy .sbsd-cap { font-size: 13px !important; padding: 2px 8px; border-radius: 999px; background: var(--mp-hero); margin-right: 8px !important; } #dev-panel-subsidy .sbsd-fac { font-size: 14px !important; } #dev-panel-subsidy .sbsd-amt { font-size: 21px !important; font-weight: 800 !important; letter-spacing: -.5px; } #dev-panel-subsidy .sbsd-chev { font-size: 14px !important; } /* 자급제 판매가 카드 */ #dev-panel-unlocked .unlk-series { font-size: 15px !important; margin: 14px 2px 8px !important; } #dev-panel-unlocked .unlk-hint { font-size: 13.5px !important; } #dev-panel-unlocked .unlk-ghead { padding: 12px 14px !important; gap: 14px !important; } #dev-panel-unlocked .unlk-gthumb { width: 76px !important; height: 76px !important; border-radius: 12px !important; } #dev-panel-unlocked .unlk-gnm { font-size: 17px !important; font-weight: 700 !important; letter-spacing: -.3px; } #dev-panel-unlocked .unlk-gnm small { font-size: 12.5px !important; margin-top: 2px; } #dev-panel-unlocked .unlk-gbtn { font-size: 13px !important; padding: 8px 14px !important; } #dev-panel-unlocked .unlk-caprow { grid-template-columns: 96px 1fr 190px !important; padding: 12px 16px !important; gap: 12px !important; } #dev-panel-unlocked .unlk-capl { font-size: 15px !important; } #dev-panel-unlocked .unlk-row .unlk-p, #dev-panel-unlocked .unlk-caprow .unlk-p { font-size: 18px !important; } #dev-panel-unlocked .unlk-row .unlk-p small, #dev-panel-unlocked .unlk-caprow .unlk-p small { font-size: 11.5px !important; } #dev-panel-unlocked .unlk-row .unlk-fac, #dev-panel-unlocked .unlk-caprow .unlk-fac { font-size: 13.5px !important; } #dev-panel-unlocked .unlk-diff { font-size: 11.5px !important; } } /* 인터넷 계산기 「단독으로 계산하기 / 통신사 비교하기」 — 고른 쪽에만 색 (사장님 09-16 「선택된 것에 따라 색상 변경이 필요함」) PC 에서는 이 두 칸이 계산기 위에 계속 떠 있는 전환 스위치인데, 위쪽 .choice-card:first-child 규칙이 첫 칸을 늘 진하게 칠해 «그게 선택된 것»처럼 보였다. 그 규칙은 다른 화면도 쓰므로 여기서 id 로만 덮는다. */ @media (hover: hover) and (pointer: fine), (min-width: 600px) and (min-height: 600px) { #moplan-showroom .pcs-skin #choice-single-mode, #moplan-showroom .pcs-skin #choice-compare-mode { cursor: pointer; user-select: none; -webkit-user-select: none; background: var(--mp-paper) !important; color: var(--mp-ink) !important; border-color: var(--mp-line) !important; transition: border-color .15s, background .15s, box-shadow .15s; } #moplan-showroom .pcs-skin #choice-single-mode .card-info span, #moplan-showroom .pcs-skin #choice-compare-mode .card-info span, #moplan-showroom .pcs-skin #choice-single-mode .card-info p, #moplan-showroom .pcs-skin #choice-compare-mode .card-info p { color: var(--mp-muted) !important; } #moplan-showroom .pcs-skin #choice-single-mode:hover, #moplan-showroom .pcs-skin #choice-compare-mode:hover { border-color: var(--mp-accent) !important; } #moplan-showroom .pcs-skin #choice-single-mode.pcs-on, #moplan-showroom .pcs-skin #choice-compare-mode.pcs-on { background: var(--mp-soft) !important; border-color: var(--mp-accent) !important; box-shadow: inset 0 0 0 1px var(--mp-accent); } #moplan-showroom .pcs-skin #choice-single-mode.pcs-on .card-info strong, #moplan-showroom .pcs-skin #choice-compare-mode.pcs-on .card-info strong { color: var(--mp-accent) !important; } #moplan-showroom .pcs-skin #choice-single-mode.pcs-on .card-info span, #moplan-showroom .pcs-skin #choice-compare-mode.pcs-on .card-info span { color: var(--mp-ink) !important; } /* 색만으로 구분하지 않게 고른 칸엔 체크 */ #moplan-showroom .pcs-skin #choice-single-mode.pcs-on .card-info strong::before, #moplan-showroom .pcs-skin #choice-compare-mode.pcs-on .card-info strong::before { content: "\2713\00a0"; font-weight: 800; } } /* 헤더 드롭다운(요금 계산·생활 계산) */ @media (hover: hover) and (pointer: fine), (min-width: 600px) and (min-height: 600px) { #moplan-showroom .mp-dd-wrap { position: relative; display: inline-block; } #moplan-showroom .mp-dd-btn { font: inherit; color: var(--mp-ink); background: transparent; border: 0; cursor: pointer; padding: 0; } #moplan-showroom .mp-dd-wrap::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 14px; } /* 버튼→메뉴로 마우스 옮길 때 닫히지 않게 */ #moplan-showroom .mp-dd-menu { position: absolute; right: 0; top: calc(100% + 12px); min-width: 280px; background: var(--mp-paper); border: 1px solid var(--mp-line); border-radius: 10px; box-shadow: 0 18px 44px rgba(37, 37, 31, .14); padding: 8px; z-index: 60; display: flex; flex-direction: column; gap: 2px; animation: mpDdIn .18s ease-out; transform-origin: top; } @keyframes mpDdIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } } #moplan-showroom .mp-calc-wrap .mp-dd-menu { right: auto; left: -10px; } #moplan-showroom .mp-dd-menu[hidden] { display: none; } /* 이용 가이드 메뉴: 한 덩어리 12칸은 읽기 어려워 휴대폰 / 인터넷·TV / 도구 세 갈래 + 아래 띠 (사장님 09-15 「보기 편하게 개편」) */ #moplan-showroom .mp-dd-menu.mp-dd-guide { width: 720px; max-width: calc(var(--pcs-cw, 100vw) - 60px); padding: 0; display: block; } #moplan-showroom .mp-gd-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; padding: 14px 10px 10px; } #moplan-showroom .mp-gd-col { padding: 0 6px; } #moplan-showroom .mp-gd-col + .mp-gd-col { border-left: 1px solid var(--mp-line); } #moplan-showroom .mp-gd-h { margin: 0 0 6px; padding: 0 10px; font-size: 11px; letter-spacing: 1.4px; color: var(--mp-accent); font-weight: 600; } #moplan-showroom .mp-gd-col a, #moplan-showroom .mp-gd-col button { display: flex !important; flex-direction: row !important; align-items: center; gap: 9px; width: 100%; padding: 9px 10px !important; border: 0; border-radius: 7px; background: transparent; color: var(--mp-ink) !important; font: inherit; font-size: 13.5px !important; text-align: left; text-decoration: none; cursor: pointer; white-space: nowrap; } #moplan-showroom .mp-gd-col a:hover, #moplan-showroom .mp-gd-col button:hover { background: var(--mp-hero); color: var(--mp-accent) !important; } #moplan-showroom .mp-gd-col a::after, #moplan-showroom .mp-gd-col button::after { content: none !important; } #moplan-showroom .mp-gd-ic { flex: none; width: 18px; text-align: center; font-size: 14px; } #moplan-showroom .mp-gd-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px; border-top: 1px solid var(--mp-line); background: var(--mp-hero); border-radius: 0 0 9px 9px; } #moplan-showroom .mp-gd-foot a { display: inline-flex !important; flex-direction: row !important; align-items: center; gap: 8px; padding: 6px 8px !important; font-size: 13.5px !important; color: var(--mp-ink) !important; text-decoration: none; white-space: nowrap; } #moplan-showroom .mp-gd-foot a::after { content: none !important; } #moplan-showroom .mp-gd-foot a:hover { color: var(--mp-accent) !important; } #moplan-showroom .mp-gd-foot .mp-gd-all { font-weight: 600; color: var(--mp-accent) !important; } #moplan-showroom .mp-dd-label { display: block; padding: 8px 12px 6px; font-size: 11px; letter-spacing: 1.6px; color: var(--mp-accent); font-weight: 500; } #moplan-showroom .mp-dd-menu button, #moplan-showroom .mp-dd-menu a { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; width: 100%; text-align: left; padding: 11px 12px; border-radius: 7px; color: var(--mp-ink) !important; background: transparent; border: 0; cursor: pointer; white-space: nowrap; text-decoration: none; font: inherit; position: relative; } #moplan-showroom .mp-dd-menu strong { font-size: 15px !important; font-weight: 600 !important; letter-spacing: -.3px; color: var(--mp-ink) !important; } #moplan-showroom .mp-dd-menu small { font-size: 12px !important; color: var(--mp-muted) !important; } #moplan-showroom .mp-dd-menu button::after, #moplan-showroom .mp-dd-menu a::after { content: "↗"; position: absolute; right: 12px; top: 12px; font-size: 13px; color: var(--mp-muted); opacity: 0; transition: opacity .12s; } #moplan-showroom .mp-dd-menu button:hover, #moplan-showroom .mp-dd-menu a:hover { background: var(--mp-hero); } #moplan-showroom .mp-dd-menu button:hover::after, #moplan-showroom .mp-dd-menu a:hover::after { opacity: 1; color: var(--mp-accent); } /* 인터넷: 위에 큰 「단독으로 계산하기/통신사 비교하기」 카드가 있으니 폼 위 작은 「단독 계산|비교 계산」 토글은 중복 → 숨김 (사장님 09-15) */ #moplan-showroom .pcs-ws .view-mode-buttons { display: none !important; } /* 「선택한 조건」 카드의 계산·비교 버튼 글자 가운데 (사장님 09-15 「이 조건으로 계산하기도 중앙」) */ #moplan-showroom .mi-summary .mp-primary, #moplan-showroom .pcs-ws .mi-summary .pcs-ws-btn, #moplan-showroom #mi-cta-slot .mp-primary, #moplan-showroom #mc-cta-slot .mp-primary, #moplan-showroom .pcs-ws #calculate-internet-btn { justify-content: center !important; text-align: center !important; gap: 8px !important; } /* 인터넷 선택 카드 글자 가운데 (사장님 09-15) */ #moplan-showroom .pcs-skin .choice-card { align-items: center !important; justify-content: center !important; text-align: center !important; } #moplan-showroom .pcs-skin .choice-card .card-info { text-align: center !important; width: 100%; } /* 요금제 목록 필터 칩에 색·테두리 (사장님 09-15 「버튼들에 색상 좀」) — 원본이 border 0·투명이라 글자만 보이던 것 */ #moplan-showroom .pcs-skin .pfl-chips { display: flex !important; flex-wrap: wrap; gap: 8px !important; } #moplan-showroom .pcs-skin .pfl-chips .pfl-chip { display: inline-flex !important; align-items: center; justify-content: center; min-height: 38px; padding: 8px 18px !important; border: 1px solid var(--mp-line) !important; border-radius: 999px !important; background: var(--mp-paper) !important; color: var(--mp-ink) !important; font-size: 14px !important; font-weight: 500 !important; cursor: pointer; box-shadow: none !important; transition: border-color .12s, background .12s; } #moplan-showroom .pcs-skin .pfl-chips .pfl-chip:hover { border-color: var(--mp-accent) !important; color: var(--mp-accent) !important; } #moplan-showroom .pcs-skin .pfl-chips .pfl-chip.active, #moplan-showroom .pcs-skin .pfl-chips .pfl-chip.on { background: var(--mp-accent) !important; border-color: var(--mp-accent) !important; color: #fff !important; font-weight: 600 !important; } #moplan-showroom .pcs-skin #plan-carrier-buttons { display: flex !important; gap: 8px !important; } #moplan-showroom .pcs-skin #plan-carrier-buttons .carrier-button { min-width: 96px; min-height: 44px !important; padding: 6px 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: 14px !important; } #moplan-showroom .pcs-skin #plan-carrier-buttons .carrier-button.active { border: 2px solid var(--mp-accent) !important; background: var(--mp-soft) !important; } #moplan-showroom .pcs-skin .pfl-row { padding: 12px 0 !important; } /* 검색창: 스킨의 입력칸 padding 통일 규칙이 돋보기 자리(왼쪽 38px)를 없애 글자와 겹치던 것 (사장님 09-15) */ #moplan-showroom .pcs-skin .psearch { position: relative !important; } #moplan-showroom .pcs-skin .psearch input { padding-left: 44px !important; padding-right: 44px !important; } #moplan-showroom .pcs-skin .psearch .psearch-ico { position: absolute !important; left: 16px !important; top: 50% !important; transform: translateY(-50%) !important; color: var(--mp-muted) !important; pointer-events: none; } #moplan-showroom .pcs-skin .psearch .psearch-clear { position: absolute !important; right: 12px !important; top: 50% !important; transform: translateY(-50%) !important; background: var(--mp-hero) !important; color: var(--mp-ink) !important; } #moplan-showroom .pcs-skin .pfl-row > .pfl-label { min-width: 72px; } /* 우리가족: 카드는 기존처럼 한 줄로 옆으로(최대 5명 + 추가 카드), 인원이 늘면 카드 폭이 줄어 한 줄에 맞춘다 — 스킨의 3열 격자 때문에 4번째부터 아랫줄로 가던 것 (사장님 09-15) */ #moplan-showroom .pcs-skin .family-main-content { display: flex !important; flex-wrap: nowrap !important; align-items: flex-start; gap: 16px !important; grid-template-columns: none !important; overflow-x: auto; padding: 0 0 6px !important; } /* 원본 padding 15px 제거 → 카드 줄 양끝을 헤더(1240, 로고 기준)에 맞춤 (사장님 09-15 「5개까지 늘리면 헤더 기준으로」) */ #moplan-showroom .pcs-skin .family-main-content .family-card { flex: 1 1 0 !important; min-width: 0; max-width: 390px; } #moplan-showroom .pcs-skin .family-main-content[data-count="4"] .family-card, #moplan-showroom .pcs-skin .family-main-content[data-count="5"] .family-card { max-width: none; } #moplan-showroom .pcs-skin .family-main-content .add-family-card { flex: 0 0 150px !important; min-width: 150px; } #moplan-showroom .pcs-skin .family-main-content[data-count="5"] .add-family-card { display: none !important; } /* 09-15 밤 철회: 5명일 때 카드 줄을 화면 양끝까지 늘리던 규칙과 머리글 띠를 양끝으로 풀던 규칙을 뺐다 — 사장님 「5개 다 채워도 맨끝 가지 말고 헤드 로고 기준으로」. 카드도 글자도 헤더 로고와 같은 1240 세로선에 맞춘다(5장이 1240을 나눠 쓰는 건 바로 위 max-width:none 규칙이 처리). */ /* 가족 카드 통신사 선택 상자 조금 축소 — 스킨 공통 60px 타일을 가족 카드에선 46px로, 상자 여백·간격도 한 단계 (사장님 09-15 「통신사 선택 박스를 조금만 줄이자, 스크롤 없애기 위함」) */ #moplan-showroom .pcs-skin .family-card .carrier-buttons { padding: 3px !important; gap: 4px !important; margin-bottom: 8px !important; } #moplan-showroom .pcs-skin .family-card .carrier-button { height: 46px !important; min-height: 0 !important; } #moplan-showroom .pcs-skin .family-card .carrier-button img { max-height: 22px !important; } /* 5명(카드 229px)이면 약정 2버튼 「공통지원/무약정|요금할인」이 두 줄로 꺾임 → 4명부터 버튼 안쪽 여백·글자 줄여 한 줄 유지 */ #moplan-showroom .pcs-skin .family-main-content[data-count="4"] .contract-buttons, #moplan-showroom .pcs-skin .family-main-content[data-count="5"] .contract-buttons { flex-wrap: nowrap !important; gap: 4px !important; } #moplan-showroom .pcs-skin .family-main-content[data-count="4"] .contract-btn, #moplan-showroom .pcs-skin .family-main-content[data-count="5"] .contract-btn { flex: 1 1 0 !important; min-width: 0 !important; padding: 9px 4px !important; font-size: 12px !important; letter-spacing: -.3px; } #moplan-showroom .pcs-skin .family-main-content[data-count="4"] .family-card > *:not(.family-card-header), #moplan-showroom .pcs-skin .family-main-content[data-count="5"] .family-card > *:not(.family-card-header) { margin-left: 14px !important; margin-right: 14px !important; } /* 03 「할인과 추가 조건」: 결합할인·복지할인 고르는 줄이 테두리도 바탕도 없는 맨 글자라 눌러야 하는 자리로 안 보였다 (사장님 09-15 「결합할인 이런 부분도 도형이랑 색상이 필요함」) */ #moplan-showroom button.discount-type-select-trigger { display: flex !important; align-items: center; justify-content: space-between; gap: 12px; width: 100% !important; min-height: 46px; padding: 11px 16px !important; background: var(--mp-paper) !important; border: 1px solid var(--mp-line) !important; border-radius: 8px !important; color: var(--mp-ink) !important; cursor: pointer; transition: border-color .12s, background .12s; } #moplan-showroom button.discount-type-select-trigger:hover, #moplan-showroom button.discount-type-select-trigger:focus-visible { border-color: var(--mp-accent) !important; background: var(--mp-hero) !important; } #moplan-showroom .discount-type-select-label { font-size: 14px !important; font-weight: 500 !important; color: var(--mp-ink) !important; } #moplan-showroom .discount-type-select-chevron { font-size: 12px !important; color: var(--mp-accent) !important; } /* 「유지 기간 이후 결합 유형 변경」은 가운데 글자 한 줄이라 버튼인 줄 몰랐다 → 알약, 켜지면 액센트 */ #moplan-showroom .toggle-button-group { display: flex !important; justify-content: center; } #moplan-showroom .toggle-button-group .toggle-button { width: auto !important; min-height: 42px; padding: 10px 20px !important; border: 1px solid var(--mp-line) !important; border-radius: 999px !important; background: var(--mp-paper) !important; color: var(--mp-ink) !important; font-size: 13px !important; font-weight: 500 !important; cursor: pointer; } #moplan-showroom .toggle-button-group .toggle-button:hover { border-color: var(--mp-accent) !important; color: var(--mp-accent) !important; } #moplan-showroom .toggle-button-group .toggle-button[data-value="true"] { background: var(--mp-accent) !important; border-color: var(--mp-accent) !important; color: var(--mp-on-accent) !important; font-weight: 600 !important; } /* 03 안의 2지선다(미사용|사용, 미가입|가입, N|Y)는 고른 쪽이 흰 알약뿐이라 어느 쪽이 켜졌는지 흐렸다 */ #moplan-showroom .mi-details-body .payment-button.active { background: var(--mp-soft) !important; color: var(--mp-accent) !important; font-weight: 600 !important; box-shadow: none !important; } #moplan-showroom[data-theme="dark"] .mi-details-body .payment-button.active { background: var(--mp-accent) !important; color: var(--mp-on-accent) !important; } /* 인터넷: 옛 PC 2단 레이아웃을 개편 화면에선 끈다 (사장님 09-15 「단독에서 다 선택하면 자꾸 축소된다」) style-responsive.css가 `#calculator-main-wrapper:has(> #result[style*="block"])` 로 wrapper를 2단 grid(1.45fr | 360px)로 바꾸는데, 개편 화면은 결과를 별도 화면(#pcs-result)으로 보내고 원본 #result를 화면 밖으로 빼 두므로 오른쪽 칸이 빈 채 입력 폼만 926→531px로 줄어들었다. ⚠선택자 순서 주의 — 실제 DOM은 .pcs-skin(슬롯) 안에 .pcs-ws 가 들어 있다(.pcs-ws .pcs-skin 은 아무것도 안 잡힘) */ #moplan-showroom .pcs-skin .pcs-ws #calculator-main-wrapper { display: block !important; grid-template-columns: none !important; column-gap: 0 !important; max-width: none !important; } #moplan-showroom .pcs-skin .pcs-ws #calculator-main-wrapper > * { grid-column: auto !important; } /* 인터넷 원본 결과 상자는 PC에선 절대 안 보임(자동 계산이 채워도 숨김) — 결과 화면은 #pcs-result 가 원본 DOM을 읽어 그린다 */ #moplan-showroom .pcs-ws #result { position: absolute !important; left: -10000px !important; top: 0 !important; width: 900px !important; opacity: 0 !important; pointer-events: none !important; } } /* 공지사항 목록·상세(.pcs-notice) */ @media (hover: hover) and (pointer: fine), (min-width: 600px) and (min-height: 600px) { #moplan-showroom .pcs-notice .container { background: transparent !important; box-shadow: none !important; padding: 0 !important; max-width: none !important; margin: 0 !important; border: 0 !important; } #moplan-showroom .pcs-notice .brand-heading, #moplan-showroom .pcs-notice div[style*="border-top:1px solid rgba(138,148,166"] { display: none !important; } #moplan-showroom .pcs-notice h2.text-xl { font-size: 22px !important; font-weight: 500 !important; color: var(--mp-ink) !important; letter-spacing: -.6px; } #moplan-showroom .pcs-notice .notice-link-item { display: block; background: var(--mp-paper) !important; border: 1px solid var(--mp-line) !important; border-radius: 8px !important; padding: 20px 24px !important; box-shadow: none !important; margin-bottom: 12px !important; text-decoration: none; transition: border-color .15s; } #moplan-showroom .pcs-notice .notice-link-item:hover { border-color: var(--mp-accent) !important; background: var(--mp-paper) !important; transform: none !important; } #moplan-showroom .pcs-notice .notice-link-item h2 { color: var(--mp-ink) !important; font-size: 16px !important; font-weight: 600 !important; letter-spacing: -.3px; } #moplan-showroom .pcs-notice .notice-link-item p { color: var(--mp-muted) !important; font-size: 12px !important; } #moplan-showroom .pcs-notice #pagination-container button { background: var(--mp-paper) !important; color: var(--mp-ink) !important; border: 1px solid var(--mp-line) !important; border-radius: 6px !important; min-width: 36px; } #moplan-showroom .pcs-notice #pagination-container button.bg-indigo-600 { background: var(--mp-accent) !important; color: #fff !important; border-color: var(--mp-accent) !important; } #moplan-showroom .pcs-notice #pagination-container button.cursor-not-allowed { opacity: .45; } #moplan-showroom .pcs-notice .ntc-skel { background: var(--mp-paper) !important; border-color: var(--mp-line) !important; } #moplan-showroom .pcs-notice .notice-status, #moplan-showroom .pcs-notice #notice-sync-status, #moplan-showroom .pcs-notice #notice-detail-status { color: var(--mp-muted) !important; } #moplan-showroom .pcs-notice .container > div.rounded-lg { background: var(--mp-paper) !important; border: 1px solid var(--mp-line) !important; border-radius: 8px !important; box-shadow: none !important; padding: 32px 36px !important; color: var(--mp-ink) !important; max-width: 900px; } #moplan-showroom .pcs-notice #notice-title { color: var(--mp-ink) !important; font-size: 22px !important; font-weight: 600 !important; letter-spacing: -.5px; } #moplan-showroom .pcs-notice #notice-date, #moplan-showroom .pcs-notice .notice-meta { color: var(--mp-muted) !important; border-color: var(--mp-line) !important; } #moplan-showroom .pcs-notice .ql-editor { color: var(--mp-ink) !important; font-size: 16px !important; line-height: 1.8 !important; } #moplan-showroom .pcs-notice .ql-editor a { color: var(--mp-accent); } #moplan-showroom .pcs-notice .border-t, #moplan-showroom .pcs-notice .border-b { border-color: var(--mp-line) !important; } #moplan-showroom .pcs-notice a.bg-indigo-600 { background: var(--mp-accent) !important; color: #fff !important; border-radius: 7px !important; padding: 12px 22px !important; font-weight: 700; text-decoration: none; } #moplan-showroom .pcs-notice .notice-retry-button { background: var(--mp-paper) !important; color: var(--mp-ink) !important; border: 1px solid var(--mp-line) !important; } #moplan-showroom .pcs-notice #admin-actions button { border-radius: 6px; padding: 8px 14px; } }