/* 자동 생성 파일 — 원본 redesign/pricing/pricing.css · 반영 redesign/_tools/release.js. 여기서 직접 고치지 말 것 */
/* 요금 페이지 D안(결정 53) — D3 디자인 시스템(../d3/d.css 토큰·헤더·푸터·버튼)을 쓰고 이 페이지 구간만 여기서(.pd-*).
   구간 바탕: 계산기(흰) → 플랜 카드(회) → 포함 내용(흰) → 추가 비용(회) → FAQ(흰) → 마지막 CTA(회).
   검정 면은 "계산 결과 플랜 카드" 하나뿐(문장 안 건수 칸은 입력 칸). 나란히 놓인 카드는 subgrid로 같은 항목 같은 가로선 */
.vd .d-nav-links a.is-on { color: var(--ink); font-weight: 600; }
.pd section { scroll-margin-top: 68px; }
.pd .pd-ey { font-size: var(--t-ey); font-weight: 600; color: var(--brand-deep); line-height: 1.4; }
.pd .pd-h2 { margin: 10px 0 var(--head-gap); }
.pd .pd-h2 .ln { display: block; }

/* ── 1. 문장형 계산기 ── */
.pd .pd-calc { padding: 64px 0 var(--sec-y); background: var(--surface); text-align: center; }
.pd .pd-calc .pd-ey { margin-bottom: 18px; }
.pd .pd-sent { max-width: 1000px; margin: 0 auto; font-size: 40px; font-weight: 700; line-height: 1.7; letter-spacing: -0.025em; color: var(--ink-3); }
.pd .pd-sent .ln { display: block; white-space: nowrap; }
.pd .pd-mbr { display: none; }   /* 좁은 화면에서만 줄바꿈 — 고르는 범위와 상관없이 늘 4줄 */
.pd .pd-ch { position: relative; display: inline-flex; align-items: center; margin: 0 6px; border-radius: 16px; vertical-align: baseline; color: var(--ink); }
.pd .pd-ch--n { justify-content: center; width: auto; min-width: 4.4em; padding: 0 14px 2px; background: var(--ink); color: #fff; cursor: text; font-variant-numeric: tabular-nums; }   /* 건수 칸 — 세 자리까지는 폭 그대로(4.4em), 네 자리부터(1,000 · 직접 입력 99,999) 글자만큼 넓어짐(사용자 요청 2026-10-07) */
.pd .pd-ch--n:focus-within { box-shadow: 0 0 0 3px rgba(29, 45, 92, .35); }
.pd .pd-ch--n input { field-sizing: content; width: auto; max-width: none; min-width: 1ch; padding: 0; border: 0; background: transparent; color: #fff; font: inherit; font-weight: 800; letter-spacing: -0.02em; text-align: center; outline: 0; font-variant-numeric: tabular-nums; }   /* 칸 폭은 고정, 숫자는 내용 폭으로 가운데 */
.pd .pd-ch--n .u { flex: none; margin-left: 2px; }
.pd .pd-ch--s { background: var(--bg); box-shadow: inset 0 0 0 1px var(--line, #e3e5ea); transition: background .2s; }
.pd .pd-ch--s:hover { background: var(--face); }
/* 범위 칸 = 직접 만든 드롭다운(문장 <p> 안이라 목록도 span — ul은 p 밖으로 밀려남)(브라우저 기본 목록은 모양을 바꿀 수 없어 글자가 깨져 보였음 — 2026-10-07). 값은 숨긴 select에 그대로 담음 */
.pd .pd-dd-native { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.pd .pd-dd { display: grid; padding: 2px 48px 4px 18px; border: 0; border-radius: inherit; background: transparent; color: inherit; font: inherit; font-weight: 700; letter-spacing: inherit; line-height: 1.35; text-align: left; cursor: pointer; }
.pd .pd-dd-v { grid-area: 1 / 1; white-space: nowrap; }
.pd .pd-dd-v:not(.is-on) { display: none; }   /* 칸 폭 = 지금 고른 선택지 글자 폭, 문장은 가운데 정렬로 다시 맞춤("AI 응대만"일 때 빈 가로 여백 없음 — 사용자 요청 2026-10-07) */
.pd .pd-dd:focus-visible { outline: 2px solid var(--ai); outline-offset: 3px; }
.pd .pd-dd-list { position: absolute; top: calc(100% + 8px); left: 0; z-index: 30; display: grid; gap: 4px; min-width: 100%; margin: 0; padding: 8px; list-style: none; border-radius: 18px; background: var(--surface); box-shadow: 0 24px 48px -16px rgba(22, 24, 29, .28), 0 0 0 1px rgba(22, 24, 29, .06); letter-spacing: -0.01em; text-align: left; }
.pd .pd-dd-list[hidden] { display: none; }
.pd .pd-dd-o { position: relative; display: grid; gap: 2px; padding: 12px 44px 12px 16px; border-radius: 12px; cursor: pointer; white-space: nowrap; }
.pd .pd-dd-o b { display: block; font-size: var(--t-body); font-weight: 700; line-height: 1.35; color: var(--ink); }
.pd .pd-dd-o small { display: block; font-size: var(--t-cap); font-weight: 500; line-height: 1.4; color: var(--t-cap-c); }
.pd .pd-dd-o:hover, .pd .pd-dd-o.is-active { background: var(--bg); }
.pd .pd-dd-o[aria-selected="true"]::after { content: ""; position: absolute; right: 18px; top: 50%; width: 6px; height: 11px; margin-top: -8px; border-right: 2.5px solid var(--ink); border-bottom: 2.5px solid var(--ink); transform: rotate(45deg); }
.pd .pd-ch--s::after { content: ""; position: absolute; top: 50%; right: 20px; width: 9px; height: 9px; margin-top: -7px; border-right: 2.5px solid currentColor; border-bottom: 2.5px solid currentColor; transform: rotate(45deg); opacity: .45; pointer-events: none; }
/* 결과 — 줄마다 높이 고정(숫자가 바뀌어도 ±1px) */
.pd .pd-ans { max-width: 920px; margin: 44px auto 0;   /* 칩 줄 아래 여백 56 → 44(사용자 요청 2026-10-07) */ }
.pd .pd-ans-k { font-weight: 500; color: var(--ink-3); }   /* "이 조건이면" — 플랜 줄 앞에 같은 줄로 */
.pd .pd-ans-plan { margin-top: 0; font-size: 19px; white-space: nowrap; }
.pd .pd-ans-plan b { font-size: 21px; font-weight: 700; color: var(--ink); }   /* 플랜 이름만 2px 크게(19 → 21) */
.pd .pd-ans-plan span { font-weight: 500; color: var(--ink-3); }
.pd .pd-ans-price { height: 88px; margin-top: 4px; font-size: 72px; font-weight: 800; line-height: 88px; letter-spacing: -0.04em; color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.pd .pd-ans-sub { min-height: 26px; margin-top: 6px; font-size: var(--t-sub); line-height: 26px; color: var(--ink-3); white-space: nowrap; }   /* 별도 비용 줄 15px #575c66 */
.pd .pd-extra { display: inline-flex; align-items: center; height: 24px; margin-left: 4px; padding: 0 10px; border-radius: 999px; background: var(--face); font-size: var(--t-cap); font-weight: 600; line-height: 1; color: var(--ink-2); white-space: nowrap; vertical-align: 1px; }   /* 별도 비용 배지(v24 모양 되살림, 사용자 요청 2026-10-07) — 글처럼 안 보이게 회색 면 */
.pd .pd-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 32px; text-align: left; }
.pd .pd-f { display: grid; grid-template-rows: auto auto auto; align-content: center; gap: 3px; min-width: 0; min-height: 108px; padding: 16px 18px; border-radius: var(--r2); background: var(--bg); }
.pd .pd-f-k { font-size: var(--t-lab); font-weight: 600; line-height: 1.5; color: var(--ink-2); white-space: nowrap; }   /* 칸 제목 = ink-2 14/600 — 잉크는 너무 까매서 살짝 회색빛(2026-10-07) */
.pd .pd-f-v { font-size: 19px; font-weight: 700; line-height: 1.45; color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.pd .pd-f-s { font-size: var(--t-cap); line-height: 1.5; color: var(--t-cap-c); white-space: nowrap; }   /* 한 줄 값 — 자리가 모자라면 칸 수를 줄인다(980px 이하 1칸) */
.pd .pd-f--ai .pd-f-v { color: var(--ai); }
.pd .pd-f--hu .pd-f-v { color: var(--brand-deep); }
/* 건수 칩(결정 63 — 슬라이더 대신): 문장 바로 아래 가운데, 간격 24 · 칩 사이 8. 기본 옅은 회색 면, 선택 = 잉크 면 흰 글자. 글자는 한 줄 */
.pd .pd-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 24px; }
.pd .pd-chip { padding: 9px 16px; border: 0; border-radius: 999px; background: var(--face); font: inherit; font-size: var(--t-sub); font-weight: 600; line-height: 1.3; color: var(--ink-2); white-space: nowrap; cursor: pointer; transition: background .15s, color .15s; }
.pd .pd-chip:hover { background: var(--bg-2); color: var(--ink); }
.pd .pd-chip[aria-pressed="true"] { background: var(--ink); color: #fff; }
.pd .pd-chip:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
@media (max-width: 480px) { .pd .pd-chips { gap: 6px; } .pd .pd-chip { padding: 8px 10px; font-size: var(--t-sub); } }   /* 390에서 다섯 칩 한 줄 — 그래도 넘치면(360) 두 줄 */

/* 제공량 띠(결정 63) — 위 줄(제공량 · 사용/남음) → 막대 44px(칸 사이 3px). 칸 안 글자가 안 들어갈 때만 막대 아래 글자 줄이 생김(평소엔 빈 줄 없음 — 사용자 요청 2026-10-07) */
.pd .pd-strip { display: grid; grid-template-rows: 20px 44px; row-gap: 8px; min-height: 100px; margin-top: 12px; padding: 14px 18px; border-radius: 14px; background: var(--bg); text-align: left; }
.pd .pd-strip-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; }
.pd .pd-strip-k { flex: none; font-size: var(--t-lab); font-weight: 600; color: var(--ink-2); }   /* 위 칸 제목과 같은 모양 */
.pd .pd-strip-v { flex: none; font-size: 13.5px; color: var(--ink-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.pd .pd-meter { display: flex; gap: 3px; height: 44px; border-radius: 12px; overflow: hidden; }
.pd .pd-mseg { position: relative; display: flex; align-items: center; flex: 0 1 0; min-width: 6px; overflow: hidden; }
.pd .pd-mseg[hidden] { display: none; }
.pd .pd-mseg--ai { background: var(--ai); }
.pd .pd-mseg--hu { background: var(--brand); }
.pd .pd-mseg--rest { background: #e1e4e9; }
.pd .pd-mseg em { padding: 0 14px; font-size: 13.5px; font-weight: 600; font-style: normal; color: #fff; white-space: nowrap; }
.pd .pd-mseg.is-out em { visibility: hidden; }   /* 칸이 좁으면 막대 아래로 */
.pd .pd-mbelow { display: none; position: relative; height: 20px; margin: 0; font-size: 13.5px; font-weight: 600; white-space: nowrap; }
.pd .pd-strip.has-below { grid-template-rows: 20px 44px 20px; }
.pd .pd-strip.has-below .pd-mbelow { display: block; }
.pd .pd-mbelow span { position: absolute; top: 0; }
.pd .pd-mbelow [data-below="ai"] { color: var(--ai); }
.pd .pd-mbelow [data-below="hu"] { color: var(--brand-deep); }
.pd .pd-mbelow.is-joined [data-below="ai"] { color: var(--ink-2); }
.pd .pd-strip-note { display: none; font-size: var(--t-cap); color: var(--t-cap-c); text-wrap: balance; }
.pd .pd-strip.is-note { display: flex; align-items: center; }   /* Custom: 막대 대신 안내 한 줄, 띠 높이는 그대로(결정 65 · 63 — 이어링은 이제 AI 칸만 있는 막대) */
.pd .pd-strip.is-note > :not(.pd-strip-note) { display: none; }
.pd .pd-strip.is-note .pd-strip-note { display: block; }
.pd .pd-strip-v b { font-weight: 700; color: var(--ink); }
.pd .pd-strip-v em { font-style: normal; font-weight: 600; color: var(--brand-deep); }
.pd .pd-foot { margin-top: 22px; font-size: var(--t-cap); color: var(--t-cap-c); }

/* ── 2. 플랜 카드 5장 — subgrid 7줄(배지 · 등급 · 설명 · 가격 · 회색 줄 · 상자 · 아래 표시) ── */
.pd .pd-plans { padding: var(--sec-y) 0; background: var(--bg); }
.pd .pd-cards { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); grid-template-rows: repeat(7, auto); column-gap: 12px; row-gap: 0; }
.pd .pd-card { grid-row: span 7; display: grid; grid-template-rows: subgrid; row-gap: 0; min-width: 0; padding: 20px 18px 16px; border-radius: var(--r3); background: var(--surface); color: var(--ink); cursor: pointer; box-shadow: 0 0 0 1px rgba(22, 24, 29, .05); transition: transform .3s ease, box-shadow .3s ease, background .3s ease, color .3s ease; }
.pd .pd-card:hover:not(.is-on) { box-shadow: 0 0 0 1px rgba(22, 24, 29, .08), 0 10px 26px rgba(22, 24, 29, .08); }
.pd .pd-card:focus-visible { outline: 2px solid var(--ai); outline-offset: 3px; }
.pd .pd-card-top { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-height: 24px; }
.pd .pd-pill { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 999px; font-size: var(--t-cap); font-weight: 600; white-space: nowrap; }
.pd .pd-pill--ai { background: var(--ai-soft); color: var(--ai); }
.pd .pd-pill--talk { background: var(--face); color: var(--ink-2); }
.pd .pd-card-tag { visibility: hidden; display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 999px; background: var(--brand); color: #fff; font-size: var(--t-cap); font-weight: 600; white-space: nowrap; }
.pd .pd-card-n { margin-top: 14px; font-size: var(--t-h3); font-weight: 700; letter-spacing: -0.015em; line-height: 1.35; }
.pd .pd-card-d { margin-top: 6px; font-size: var(--t-sub); line-height: 1.5; color: var(--ink-3); }
.pd .pd-card-price { margin-top: 12px; font-size: 23px; font-weight: 800; letter-spacing: -0.02em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pd .pd-card-sub { margin-top: 2px; font-size: var(--t-cap); line-height: 1.45; color: var(--t-cap-c); }
.pd .pd-card-stat { display: grid; align-content: start; gap: 2px; margin-top: 14px; padding: 14px 14px 12px; border-radius: 14px; background: var(--bg); }
.pd .pd-card-stat span { font-size: var(--t-lab); color: var(--ink-3); font-weight: 600; }
.pd .pd-card-stat b { font-size: 19px; font-weight: 700; letter-spacing: -0.01em; white-space: nowrap; }
.pd .pd-card-stat small { font-size: var(--t-cap); color: var(--t-cap-c); white-space: nowrap; }
.pd .pd-card-pick { display: grid; margin-top: 14px; padding: 9px 0; border-radius: 999px; background: var(--bg); text-align: center; font-size: var(--t-sub); font-weight: 600; color: var(--ink-3); }
.pd .pd-card-pick span { grid-area: 1 / 1; }
.pd .pd-pick-b { visibility: hidden; }
/* 계산 결과 플랜 — 페이지의 유일한 검정 면, 살짝 떠오름 */
.pd .pd-card.is-on { background: var(--ink); color: #fff; box-shadow: 0 22px 50px rgba(22, 24, 29, .22); transform: translateY(-6px); }
.pd .pd-card.is-on .pd-card-tag { visibility: visible; }
.pd .pd-card.is-on .pd-pill { background: #2a2d35; color: #e3e5ea; }
.pd .pd-card.is-on .pd-card-d, .pd .pd-card.is-on .pd-card-sub, .pd .pd-card.is-on .pd-card-stat span { color: #b9bcc4; }
.pd .pd-card.is-on .pd-card-stat { background: #2a2d35; }
.pd .pd-card.is-on .pd-card-stat small { color: #9a9ea8; }
.pd .pd-card.is-on .pd-card-pick { background: transparent; color: #9a9ea8; }
.pd .pd-card.is-on .pd-pick-a { visibility: hidden; }
.pd .pd-card.is-on .pd-pick-b { visibility: visible; }
.pd .pd-note { margin-top: 18px; font-size: var(--t-cap); color: var(--t-cap-c); }

/* ── 3. 포함 내용(결정 75) — 항목 칸 250 + 플랜 5열. 묶음 머리(이어링 1열 · 이어톡 4열 합침) → 플랜 이름 → 공통 기능(5열 합친 회색 판) → 상담원 CS 대행 → 판매채널.
   줄 사이 1px #e3e5ea · 줄 안 위아래 18px. 추천 열 = 뒤에 깔린 잉크 카드(.pd-it-card, 이름 줄부터 마지막 줄까지 위아래 14px 솟음 — 위치·이동은 pricing.js). 900px 이하는 플랜별 카드 ── */
.pd .pd-incl { padding: var(--sec-y) 0; background: var(--surface); }
.pd .pd-it { position: relative; display: grid; grid-template-columns: 250px repeat(5, minmax(0, 1fr)); padding-bottom: 16px; }
.pd .pd-it-r { display: contents; }
.pd .pd-it-r > * { position: relative; z-index: 1; min-width: 0; }
.pd .pd-it-card { position: absolute; left: 0; top: 0; z-index: 0; width: 0; height: 0; border-radius: 20px; background: var(--ink); box-shadow: 0 20px 44px rgba(22, 24, 29, .22); pointer-events: none; }
.pd .pd-it-g { padding: 0 4px 18px; }
.pd .pd-it-g > span { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 12px; border-radius: 12px; font-size: var(--t-sub); font-weight: 700; text-align: center; }
.pd .pd-it-g--ring > span { background: var(--ai-soft); color: var(--ai); }
.pd .pd-it-g--talk { grid-column: span 4; }
.pd .pd-it-g--talk > span { background: var(--ink); color: #fff; }
.pd .pd-it-n { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; padding: 18px 6px; box-shadow: inset 0 -1px 0 #e3e5ea; text-align: center; }
.pd .pd-it-k--name { box-shadow: inset 0 -1px 0 #e3e5ea; }
.pd .pd-it-n b { font-size: var(--t-body); font-weight: 700; line-height: 1.35; white-space: nowrap; }
.pd .pd-it-tag { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 999px; background: var(--brand); color: #fff; font-size: var(--t-cap); font-weight: 600; white-space: nowrap; }
.pd .pd-it-n .pd-it-tag { visibility: hidden; }   /* 다섯 칸 모두 꼬리표 높이를 두어 플랜 이름 높이가 같음 — 추천 열만 보임 */
.pd .pd-it-n.is-rec .pd-it-tag { visibility: visible; }
.pd .pd-it-k { display: flex; flex-direction: column; justify-content: center; padding: 18px 16px 18px 0; }
.pd .pd-it-k b { font-size: var(--t-body); font-weight: 700; line-height: 1.4; color: var(--ink); }
.pd .pd-it-k small { margin-top: 5px; font-size: var(--t-sub); line-height: 1.5; color: var(--ink-3); }
.pd .pd-it-k .nb-p { display: inline-block; }
.pd .pd-it-k:not(.pd-it-k--name):not(.pd-it-k--common) { box-shadow: inset 0 1px 0 #e3e5ea; }
.pd .pd-it-cw { grid-column: 2 / -1; padding: 18px 0; }
.pd .pd-it-common { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 20px; margin: 0; padding: 20px 24px; list-style: none; border-radius: 16px; background: rgba(245, 246, 248, .95); }   /* 추천 열 카드 위를 지나가도 판이 그대로 보이게 95% */
.pd .pd-it-common li { display: flex; align-items: center; gap: 10px; min-width: 0; font-size: var(--t-sub); line-height: 1.45; color: var(--ink); }
.pd .pd-it-common i { flex: none; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--ai); color: #fff; }
.pd .pd-it-common i svg { width: 12px; height: 12px; }
.pd .pd-it-c { display: flex; align-items: center; justify-content: center; padding: 18px 6px; box-shadow: inset 0 1px 0 #e3e5ea; font-size: var(--t-sub); text-align: center; }
.pd .pd-it-c b { font-weight: 600; white-space: nowrap; }
.pd .pd-it-yes { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--brand); color: #fff; }
.pd .pd-it-yes svg { width: 17px; height: 17px; }
.pd .pd-it-no { font-size: 20px; line-height: 24px; color: #c3c7cf; }   /* 해당 없음 — X 대신 조용한 줄표 */
.pd .pd-it .is-rec { color: #fff; }
.pd .pd-it-n.is-rec { box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .12); }
.pd .pd-it-c.is-rec { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12); }
.pd .pd-it .is-rec .pd-it-yes, .pd .pd-im.is-rec .pd-it-yes { background: #fff; color: var(--brand); }
.pd .pd-it .is-rec .pd-it-no, .pd .pd-im.is-rec .pd-it-no { color: rgba(255, 255, 255, .4); }
/* 좁은 화면 카드 */
.pd .pd-ims { display: none; }
.pd .pd-cdots { display: none; }
.pd .pd-im { padding: 22px 22px 24px; border-radius: 20px; background: var(--bg); }
.pd .pd-im.is-rec { background: var(--ink); color: #fff; box-shadow: 0 20px 44px rgba(22, 24, 29, .22); }
.pd .pd-im-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pd .pd-im.is-rec .pd-pill { background: #2a2d35; color: #e3e5ea; }
.pd .pd-im-n { margin-top: 10px; font-size: var(--t-h3); font-weight: 700; line-height: 1.35; letter-spacing: -0.015em; }
.pd .pd-im-rows { margin: 14px 0 0; }
.pd .pd-im-rows > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 54px; padding: 10px 0; box-shadow: inset 0 1px 0 #e3e5ea; }
.pd .pd-im.is-rec .pd-im-rows > div { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12); }
.pd .pd-im-rows dt { font-size: var(--t-sub); font-weight: 600; }
.pd .pd-im-rows dd { flex: none; margin: 0; font-size: var(--t-sub); }
.pd .pd-im-rows dd b { font-weight: 600; }
.pd .pd-im .pd-it-yes { width: 28px; height: 28px; }
.pd .pd-im-ck { margin: 8px 0 10px; font-size: var(--t-lab); font-weight: 600; color: var(--ink-3); }
.pd .pd-im.is-rec .pd-im-ck { color: #8d929c; }
.pd .pd-im .pd-it-common { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; padding: 16px; background: #fff; }
.pd .pd-im.is-rec .pd-it-common { background: #22252c; }
.pd .pd-im .pd-it-common li { font-size: var(--t-sub); color: inherit; }
.pd .pd-im.is-rec .pd-it-common i { background: #fff; color: var(--ai); }
.pd .pd-im-none { font-size: var(--t-sub); font-weight: 500; color: var(--ink-3); }
.pd .pd-im.is-rec .pd-im-none { color: #8d929c; }
/* 공통 기능 2열 — "교환·반품 접수(AI)"는 맨 아래 한 줄 전체로(두 줄로 꺾이지 않게) */
.pd .pd-im .pd-it-common li:nth-child(2) { order: 99; grid-column: 1 / -1; }
.pd .pd-im .pd-it-common li span { white-space: nowrap; }
/* 2026-10-12: PC도 표 대신 3카드(AI · Standard·Plus·Pro · Custom) — 모바일과 같은 구성 */
.pd .pd-it { display: none; }
.pd .pd-ims { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; }
.pd .pd-im { padding: 28px 28px 30px; }
@media (max-width: 900px) {
  .pd .pd-ims { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .pd .pd-im { padding: 22px 22px 24px; }
}

/* ── 4. 상황 카드 4장 — subgrid 7줄(질문 · 이어링 라벨·값·작은 글 · 이어톡 라벨(가로선)·값·작은 글) ── */
.pd .pd-cost { padding: var(--sec-y) 0; background: var(--bg); }
.pd .pd-sit { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: auto; column-gap: 12px; row-gap: 0; }
.pd .pd-st { grid-row: span 7; display: grid; grid-template-rows: subgrid; row-gap: 0; min-width: 0; padding: 22px 22px 20px; border-radius: var(--r3); background: var(--surface); box-shadow: 0 0 0 1px rgba(22, 24, 29, .05); }
.pd .pd-sq { padding-bottom: 8px; font-size: var(--t-h3); font-weight: 700; letter-spacing: -0.015em; line-height: 1.35; }   /* 카드 질문 = 카드 제목 19/700, 첫 플랜 라벨까지 20px(8 + 라벨 위 12) */
.pd .pd-sl { padding-top: 12px; font-size: var(--t-lab); font-weight: 600; }
.pd .pd-sl--ring { color: var(--ai); }
.pd .pd-sl--talk { margin-top: 12px; color: var(--brand-deep); box-shadow: inset 0 1px 0 #e6e8ec; }   /* 이어링 ↔ 이어톡 구분 가로선(구조선) */
.pd .pd-sv { font-size: 24px; font-weight: 700; line-height: 1.4; letter-spacing: -0.02em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pd .pd-sv--off { color: var(--ink-3); }
.pd .pd-sv--one { overflow: hidden; }
.pd .pd-sv--one.is-tight { font-size: 22px; line-height: 1.53; }   /* 태그 칸이 24px에서 넘칠 때만(한 줄 유지) */
.pd .pd-one { white-space: nowrap; }
.pd .pd-one + .pd-one { margin-left: 10px; }
.pd .pd-who { display: inline-block; margin-right: 6px; padding: 1px 7px; border-radius: 6px; font-size: var(--t-cap); font-weight: 600; letter-spacing: 0; vertical-align: 3px; }
.pd .pd-sv--one .pd-who { margin-right: 5px; padding: 1px 6px; font-size: var(--t-cap); vertical-align: 2px; font-weight: 600; }
.pd .pd-who--ai { background: var(--ai-soft); color: var(--ai); }
.pd .pd-who--hu { background: var(--brand); color: #fff; }
.pd .pd-ss { min-height: 19px; font-size: var(--t-cap); color: var(--t-cap-c); }
/* 조건 세 줄 = 카드 아래 12px 흰 띠 하나(radius 20, 20/24), 3칸 가로 · 900 이하 세로 3줄 */
.pd .pd-terms { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 28px; margin: 12px 0 0; padding: 20px 24px; border-radius: 20px; background: var(--surface); box-shadow: 0 0 0 1px rgba(22, 24, 29, .05); }
.pd .pd-terms > div { display: grid; gap: 4px; min-width: 0; }
.pd .pd-terms dd { margin: 0; font-size: var(--t-sub); line-height: 1.55; color: var(--ink-2); text-wrap: pretty; }
.pd .pd-tk { font-size: var(--t-lab); font-weight: 600; color: var(--ink-3); }
@media (max-width: 900px) { .pd .pd-terms { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 18px 20px; } }
.pd .pd-tk--ring { color: var(--ai); }
.pd .pd-tk--talk { color: var(--brand-deep); }

/* ── 5. FAQ ── */
.pd .pd-faq { padding: var(--sec-y) 0; background: var(--surface); }
.pd .pd-faq-grid { display: grid; grid-template-columns: minmax(0, .6fr) minmax(0, 1.6fr); gap: 56px; align-items: start; }   /* 답 칸을 넓혀 결제 안내 두 문장이 한 줄에(사용자 요청) */
.pd .pd-faq-list { display: grid; gap: 8px; }
.pd .pd-faq details { border-radius: 16px; background: var(--bg); }
.pd .pd-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 24px; font-size: var(--t-body); font-weight: 600; cursor: pointer; list-style: none; }
.pd .pd-faq summary::-webkit-details-marker { display: none; }
.pd .pd-faq summary::after { content: ""; flex: none; width: 9px; height: 9px; border-right: 2px solid var(--ink-3); border-bottom: 2px solid var(--ink-3); transform: rotate(45deg) translate(-2px, -2px); }
.pd .pd-faq details[open] summary::after { transform: rotate(225deg); }
.pd .pd-faq summary:focus-visible { outline: 2px solid var(--ai); outline-offset: 2px; border-radius: 16px; }
.pd .pd-a { display: grid; gap: 10px; padding: 0 24px 22px; font-size: var(--t-body); line-height: 1.7; color: var(--ink-2); text-wrap: pretty; }
.pd .pd-a p { text-wrap: pretty; }
.pd .pd-pl2 { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; }
.pd .pd-pl2 .k { padding-top: 1px; font-size: var(--t-lab); font-weight: 600; color: var(--ink-3); }
.pd .pd-pl2 .k--ring { color: var(--ai); }
.pd .pd-pl2 .k--talk { color: var(--brand-deep); }
.pd .pd-pl2 .v { min-width: 0; text-wrap: pretty; }
.pd .pd-a b { font-weight: 600; color: var(--ink); }

/* ── 6. 마지막 CTA(회) ── */
/* 마지막 CTA(결정 76) — 잉크 구간, 1192 안 왼쪽 1fr / 오른쪽 600 · 간격 56 · 세로 가운데 · 위아래 104. 오른쪽 카드는 흰색으로 띄움 */
.pd .pd-cta { padding: 104px 0; background: var(--ink); color: #fff; }
.pd .pd-cta-grid { display: grid; grid-template-columns: minmax(0, 1fr) 600px; gap: 56px; align-items: center; max-width: 1192px; margin-inline: auto; }
.pd .pd-cta-ey { font-size: var(--t-ey); font-weight: 600; color: var(--on-ink-brand); line-height: 1.4; }
.pd .pd-cta-h { margin-top: 14px; font-size: var(--t-h2); font-weight: 700; line-height: 1.22; letter-spacing: -0.02em; color: #fff; }
.pd .pd-cta-g { color: #fff; background: linear-gradient(100deg, #fff 10%, #ffc2da 95%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; white-space: nowrap; }
.pd .pd-cta-sum { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; margin-top: 26px; }
.pd .pd-cta-sum b { font-size: 18px; font-weight: 700; line-height: 1.5; color: #e3e5ea; }
.pd .pd-cta-edit { font-size: var(--t-sub); font-weight: 500; color: #c4c8d0; text-decoration: underline; text-underline-offset: 4px; white-space: nowrap; }
.pd .pd-cta-edit:hover { color: #fff; }
.pd .pd-cta-lead { margin-top: 14px; font-size: var(--t-lead); line-height: 1.6; color: var(--t-lead-c-ink); }
.pd .pd-cta-steps { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 6px; margin: 26px 0 0; padding: 0; list-style: none; }
.pd .pd-cta-step { padding: 7px 13px; border-radius: 999px; background: #22252c; font-size: var(--t-lab); font-weight: 600; line-height: 1.4; color: #8d929c; white-space: nowrap; transition: background .25s, color .25s; }
.pd .pd-cta-step.is-on { background: #fff; color: var(--ink); }
.pd .pd-cta-sep { font-size: 15px; color: #5a5e68; }
.pd .pd-cta .pd-prep { color: var(--ink); box-shadow: 0 24px 60px rgba(0, 0, 0, .35); }
@media (max-width: 1240px) { .pd .pd-cta-grid { grid-template-columns: minmax(0, 1fr) 480px; gap: 40px; } .pd .pd-cta-h { font-size: var(--t-h2); } }
@media (max-width: 1060px) { .pd .pd-cta-grid { grid-template-columns: minmax(0, 1fr) 440px; } .pd .pd-cta-h { font-size: var(--t-h2); } }
@media (max-width: 900px) { .pd .pd-cta-sum { flex-direction: column; align-items: flex-start; gap: 6px; } .pd .pd-cta-sum b { min-height: 3em; }   /* 요약 두 줄 자리 고정 — 플랜이 바뀌어도 아래가 밀리지 않게 */ .pd .pd-cta { padding: 72px 0; } .pd .pd-cta-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; } .pd .pd-cta-h { font-size: var(--t-h2); } }
@media (prefers-reduced-motion: reduce) { .pd .pd-cta-step { transition: none; } }
.pd .pd-prep { display: flex; flex-direction: column; padding: 30px 30px 28px; border-radius: 24px; background: var(--surface); box-shadow: 0 22px 50px rgba(22, 24, 29, .07); }
.pd .pd-prep-k { font-size: var(--t-lab); font-weight: 600; color: var(--ink-3); }
.pd .pd-prep-h { margin-top: 6px; font-size: var(--t-h3); font-weight: 700; line-height: 1.35; letter-spacing: -0.015em; }
.pd .pd-prep-list { display: grid; gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; }
.pd .pd-prep-list li { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 14px; background: var(--bg); font-size: var(--t-sub); }
.pd .pd-prep-list li i { flex: none; align-self: flex-start; width: 8px; height: 8px; margin-top: 8px; border-radius: 50%; background: var(--brand); }
.pd .pd-prep[data-mode="ring"] .pd-prep-list li i { background: var(--ai); }   /* 점 색: 이어톡 브랜드 · 이어링 남색 */
.pd .pd-prep-list b { display: block; font-weight: 600; }
.pd .pd-prep-list small { display: block; margin-top: 1px; font-size: var(--t-cap); color: var(--t-cap-c); }
.pd .pd-prep-go { display: grid; gap: 10px; margin-top: auto; padding-top: 22px; }
.pd .pd-prep-go .d-btn { width: 100%; }
.pd .pd-prep-alt { font-size: var(--t-cap); color: var(--t-cap-c); text-align: center; }
.pd .pd-prep-alt:empty { display: none; }
@media (min-width: 901px) { .pd .pd-prep-alt:empty { display: block; visibility: hidden; } .pd .pd-prep-alt:empty::before { content: "\00a0"; } }   /* 결정 76: 왼쪽이 카드 세로 가운데라 — 이어톡일 때도 이 줄 자리를 두어 카드 높이 같게(왼쪽이 출렁이지 않게) */
.pd .pd-prep-alt a { color: var(--ink); font-weight: 600; text-underline-offset: 3px; }

@media (prefers-reduced-motion: reduce) { .pd .pd-card { transition: none; } }

/* ── 반응형 — 한 줄로 지정한 값은 줄바꿈하지 않고, 자리가 모자라면 칸 수를 줄인다 ── */
@media (max-width: 1240px) {
  .pd .pd-sit { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 12px; }
}
@media (max-width: 1180px) {
  .pd .pd-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 12px; }
}
@media (max-width: 980px) {
  .pd .pd-facts { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .pd .pd-f { min-height: 96px; }
  .pd .pd-sent { font-size: 32px; }
  .pd .pd-sent .ln { white-space: normal; }
  .pd .pd-ans-price { height: 70px; font-size: 56px; line-height: 70px; }
  .pd .pd-faq-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
}
@media (max-width: 760px) {
  .pd .pd-calc { padding: 40px 0 var(--sec-y); }   /* 결정 78: 서비스 소개와 같은 첫 라벨 위치 */
  .pd .pd-sent { font-size: 23px; line-height: 1.9; }
  .pd .pd-sent .ln { display: block; white-space: nowrap; }
  .pd .pd-mbr { display: inline; }
  .pd .pd-sent:has(option[value="earring"]:checked) .pd-mbr2 { display: none; }   /* AI 응대만: 짧아서 "맡기고 싶어요"까지 한 줄(3줄) */
  .pd .pd-ch { margin: 0 3px; border-radius: 12px; }
  .pd .pd-ch--n { padding: 0 9px 1px; }
  .pd .pd-dd { padding: 1px 32px 3px 12px; }
  .pd .pd-dd-o b { font-size: var(--t-body); }
  .pd .pd-dd-o small { font-size: var(--t-cap); }
  .pd .pd-dd-list { left: 50%; transform: translateX(-50%); }   /* 좁은 폭: 칸 가운데 기준으로 펼침(화면 밖으로 안 나가게) */
  .pd .pd-ch--s::after { right: 13px; width: 7px; height: 7px; margin-top: -6px; }
  .pd .pd-ans { margin-top: 32px; }
  .pd .pd-ans-plan b { font-size: 18px; }
  .pd .pd-ans-plan { font-size: 16px; white-space: nowrap; }   /* 권장 월 문의를 빼서 모바일도 한 줄 */
  .pd .pd-ans-price { height: 56px; font-size: 42px; line-height: 56px; }
  .pd .pd-ans-sub { white-space: normal; min-height: 52px; line-height: 26px; }   /* 두 줄 자리 고정 */
  .pd .pd-facts { grid-template-columns: minmax(0, 1fr); gap: 8px; margin-top: 22px; }
  .pd .pd-f { min-height: 96px; padding: 14px 16px; }
  /* 문의 수별 카드: 한 장씩 옆으로 넘김(옆 카드가 살짝 보여 넘길 수 있다는 걸 알림) */
  .pd .pd-cards { grid-template-columns: none; grid-template-rows: none; grid-auto-flow: column; grid-auto-columns: 84%; column-gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 calc(-1 * var(--gutter, 20px)); padding: 10px var(--gutter, 20px) 18px; scroll-padding: 0 var(--gutter, 20px); }
  .pd .pd-cards::-webkit-scrollbar { display: none; }
  .pd .pd-card { grid-row: auto; grid-template-rows: none; scroll-snap-align: center; }
  .pd .pd-card.is-on { transform: none; }
  .pd .pd-cdots { display: flex; justify-content: center; gap: 8px; margin-top: 4px; }
  .pd .pd-cdots i { width: 7px; height: 7px; border-radius: 99px; background: #c9ccd3; cursor: pointer; transition: width .25s, background .25s; }
  .pd .pd-cdots i.on { width: 22px; background: var(--ink); }
  .pd .pd-card-d { min-height: 0; }
  .pd .pd-sit { grid-template-columns: minmax(0, 1fr); }
  .pd .pd-faq summary { padding: 18px 18px; font-size: var(--t-body); }
  .pd .pd-a { padding: 0 18px 18px; }
  .pd .pd-pl2 { grid-template-columns: minmax(0, 1fr); gap: 2px; }   /* 모바일: 라벨 위 · 내용 아래 */
  .pd .pd-prep { padding: 22px 18px; }
}

/* 마지막 CTA 3단계 체크(결정 64) — 항목 오른쪽 체크 원: 빈 원(옅은 테두리) → 역할 색 면 + 흰 체크(--k), 채울 때 살짝 튐(--pop). 크기 고정 */
.pd .pd-prep-t { flex: 1; min-width: 0; }
.pd .pd-prep-ck { --k: 0; --pop: 1; position: relative; flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px #c9ccd3; transform: scale(var(--pop)); }
.pd .pd-prep-ck::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--brand); opacity: var(--k); }
.pd .pd-prep[data-mode="ring"] .pd-prep-ck::before { background: var(--ai); }
.pd .pd-prep-ck svg { position: relative; width: 14px; height: 14px; color: #fff; stroke-width: 2.6; opacity: var(--k); }
/* FAQ 결제 안내 두 문장 한 줄(사용자 요청): 답 칸이 좁아지는 1279px 이하는 FAQ를 한 칸(제목 위 · 목록 아래)으로, 980px 이하는 답 안쪽 여백 20px.
   모바일(760px 이하)은 폭이 모자라 문장이 자연스럽게 줄바꿈(잘림 없음) */
@media (max-width: 1279px) { .pd .pd-faq-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; } }
@media (min-width: 761px) and (max-width: 980px) { .pd .pd-a { padding-left: 20px; padding-right: 20px; } }
/* FAQ 7 — ONE WMS 고객사 안내(흰 상자 + 로고) */
.pd .pd-wms { display: flex; align-items: center; gap: 16px; padding: 14px 18px; border-radius: 12px; background: var(--surface); }
.pd .pd-wms img { flex: none; width: 91px; height: auto; }
.pd .pd-wms p { display: grid; gap: 2px; min-width: 0; line-height: 1.5; }
.pd .pd-wms b { font-size: var(--t-body); font-weight: 700; color: var(--ink); }
.pd .pd-wms span { font-size: var(--t-sub); color: var(--ink-2); }
@media (max-width: 760px) { .pd .pd-wms { flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px 16px; } }
/* 계산 결과가 위에서부터 차례로 펼쳐짐(--rv 0 → 1, pricing.js가 ETTimeline 경과로 넣음). 크기·자리는 그대로, 투명도·세로 이동만 */
.pd .pd-ans [data-rv] { opacity: var(--rv, 1); transform: translateY(calc((1 - var(--rv, 1)) * 14px)); }

/* ── 결과 보기 토글 · 직접 운영과 비교(결정 77) ── */
.pd .pd-seg { position: relative; display: inline-flex; margin-top: 28px; padding: 4px; border-radius: 999px; background: var(--bg); }
.pd .pd-seg.is-off { visibility: hidden; }   /* AI 응대만 · Custom: 토글 숨김(자리는 두어 결과가 위아래로 움직이지 않음) */
.pd .pd-seg-knob { position: absolute; left: 0; top: 4px; bottom: 4px; width: 0; border-radius: 999px; background: #fff; box-shadow: 0 2px 10px rgba(22, 24, 29, .1); }
.pd .pd-seg button { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 20px; border: 0; border-radius: 999px; background: transparent; font-size: var(--t-body); font-weight: 600; color: var(--ink-3); white-space: nowrap; transition: color .2s; }
.pd .pd-seg button.is-on { color: var(--ink); }
.pd .pd-seg-pill { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 999px; background: var(--brand); font-size: var(--t-cap); font-weight: 600; color: #fff; font-variant-numeric: tabular-nums; }
.pd .pd-seg.is-cmp .pd-seg-pill { background: var(--ink); }
.pd .pd-seg-pill[hidden] { display: none; }
.pd .pd-view { margin-top: 28px; overflow: hidden; }
.pd .pd-view .pd-ans { margin-top: 0; }
.pd .pd-track { display: grid; grid-template-columns: 100% 100%; }
.pd .pd-pane { min-width: 0; }
.pd .pd-cmp { max-width: 920px; margin: 0 auto; padding: 48px; border-radius: 26px; background: radial-gradient(60% 70% at 50% 0%, rgba(59, 74, 107, .6), transparent 70%), var(--ink); color: #fff; text-align: center; }
.pd .pd-cmp-vs { display: flex; align-items: center; justify-content: center; gap: 18px; font-size: 30px; font-weight: 700; line-height: 1.3; letter-spacing: -0.015em; }
.pd .pd-cmp-was { --st: 1; position: relative; color: #8d929c; white-space: nowrap; }
.pd .pd-cmp-was::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 3px; margin-top: -1px; border-radius: 2px; background: var(--brand); transform: scaleX(var(--st)); transform-origin: left center; }   /* 탭이 열리면 왼쪽에서 오른쪽으로 0.7초 */
.pd .pd-cmp-arw { display: grid; color: #8d929c; }
.pd .pd-cmp-arw svg { width: 26px; height: 26px; }
.pd .pd-cmp-now { color: #fff; white-space: nowrap; }
.pd .pd-cmp-mid { display: grid; margin-top: 18px; }
.pd .pd-cmp-mid > * { grid-area: 1 / 1; align-self: center; }
.pd .pd-cmp-big { display: flex; align-items: baseline; justify-content: center; gap: 6px; font-weight: 800; line-height: 1.16; letter-spacing: -0.035em; }
.pd .pd-cmp-big b, .pd .pd-cmp-big span { background: linear-gradient(100deg, #fff 10%, #ffc2da 95%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: #fff; }
.pd .pd-cmp-big b { font-size: 96px; font-weight: 800; font-variant-numeric: tabular-nums; }
.pd .pd-cmp-big span { font-size: 36px; font-weight: 700; letter-spacing: -0.01em; }
.pd .pd-cmp-none { font-size: 30px; font-weight: 700; color: #fff; visibility: hidden; }
.pd .pd-cmp.is-none .pd-cmp-big { visibility: hidden; }
.pd .pd-cmp.is-none .pd-cmp-none { visibility: visible; }
.pd .pd-cmp-yr { min-height: 1.65em; margin-top: 10px; font-size: 17px; line-height: 1.65; color: #b9bec8; }
.pd .pd-cmp-yr b { font-weight: 700; color: #fff; }
.pd .pd-cmp-fine { margin-top: 6px; font-size: var(--t-cap); line-height: 1.6; color: #8d929c; }
.pd .pd-cmp-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 22px; }
.pd .pd-cmp-chips span { padding: 7px 14px; border-radius: 999px; background: #22252c; font-size: var(--t-sub); font-weight: 600; color: #e3e5ea; white-space: nowrap; }
.pd .pd-cmp-base { max-width: 920px; margin: 16px auto 0; font-size: var(--t-cap); line-height: 1.7; color: var(--t-cap-c); text-align: center; }
.pd .pd-cmp-in input { field-sizing: content; min-width: 2.4em; padding: 0 3px; border: 0; border-bottom: 1.5px solid var(--ink-3); border-radius: 0; background: transparent; font: inherit; font-weight: 700; color: var(--ink); text-align: center; }
.pd .pd-cmp-in input:focus { outline: none; border-bottom-color: var(--ink); background: var(--bg); }
@media (max-width: 760px) {
  .pd .pd-seg { margin-top: 22px; }
  .pd .pd-seg button { padding: 0 14px; font-size: var(--t-body); }
  .pd .pd-view { margin-top: 22px; }
  .pd .pd-cmp { padding: 32px 20px; border-radius: 22px; }
  .pd .pd-cmp-vs { flex-direction: column; gap: 4px; font-size: 26px; }
  .pd .pd-cmp-arw { transform: rotate(90deg); }   /* 두 금액을 위아래로 — 화살표는 아래 방향 */
  .pd .pd-cmp-big b { font-size: 64px; }
  .pd .pd-cmp-big span { font-size: 26px; }
  .pd .pd-cmp-none { font-size: 24px; }
  .pd .pd-cmp-yr { font-size: 16px; }
  .pd .pd-cmp-fine { font-size: var(--t-cap); }
  .pd .pd-cmp-chips span { font-size: var(--t-sub); }
}
@media (max-width: 380px) { .pd .pd-seg button { padding: 0 11px; } .pd .pd-seg button { gap: 6px; } }
@media (prefers-reduced-motion: reduce) { .pd .pd-seg button { transition: none; } }

.pd .pd-strip[hidden] { display: none; }   /* Custom: 띠 없음 */

/* ── 결정 83: 계산기 결과 개편 ── */
/* 예상치 안내 — 칩과 34 · 토글과 12 */
.pd .pd-est { margin: 34px auto 0; font-size: var(--t-cap); line-height: 1.6; color: var(--t-cap-c); text-align: center; }
.pd .pd-est.is-off { visibility: hidden; }
.pd .pd-seg { margin-top: 12px; }
/* 이어링 더하기 식 [한 달 문의] = [AI가 끝낸 문의] + [직접 고용 상담원에게 넘긴 문의] */
.pd .pd-op, .pd .pd-of { display: none; }
.pd .pd-facts.is-eq { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr); column-gap: 10px; }
.pd .pd-facts.is-eq .pd-op { display: grid; place-items: center; font-size: 22px; font-weight: 500; color: #9a9fa8; }
.pd .pd-f--all { background: var(--ink); }
.pd .pd-f--all .pd-f-k, .pd .pd-f--all .pd-f-s { color: rgba(255, 255, 255, .72); }
.pd .pd-f--all .pd-f-v { color: #fff; }
/* 이어링 제공량 띠 한 줄 */
.pd .pd-use { display: none; }
.pd .pd-strip.is-use { display: block; min-height: 0; padding: 14px 18px; border-radius: 14px; background: var(--ai-soft); }
.pd .pd-strip.is-use > :not(.pd-use) { display: none; }
.pd .pd-strip.is-use .pd-use { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; margin: 0; font-size: 14.5px; font-weight: 600; line-height: 1.6; color: var(--ai); }
/* 비교 — 위 두 칸 */
.pd .pd-cmp-vs { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: stretch; gap: 14px; font-size: inherit; }
.pd .pd-cmp-box { display: grid; align-content: center; gap: 4px; min-width: 0; padding: 18px 20px; border-radius: 16px; background: #22252c; text-align: center; }
.pd .pd-cmp-cap { font-size: var(--t-lab); font-weight: 600; line-height: 1.5; color: #8d929c; }
.pd .pd-cmp-amt { font-size: 30px; font-weight: 700; line-height: 1.3; letter-spacing: -0.015em; }
.pd .pd-cmp-sub { font-size: var(--t-lab); line-height: 1.5; color: #8d929c; font-weight: 600; }
.pd .pd-cmp-arw { align-self: center; }
.pd .pd-cmp:not(.is-save) .pd-cmp-was::after { display: none; }   /* 취소선은 절감이 있을 때만 */
/* 가운데 — 세 상태를 같은 칸에 겹침 */
.pd .pd-cmp-mid { display: grid; margin-top: 26px; }
.pd .pd-cmp-mid > * { grid-area: 1 / 1; align-self: center; visibility: hidden; }
.pd .pd-cmp.is-save .pd-cmp-save, .pd .pd-cmp.is-none .pd-cmp-none, .pd .pd-cmp.is-same .pd-cmp-same { visibility: visible; }
.pd .pd-cmp-big { display: flex; align-items: baseline; justify-content: center; gap: 4px; line-height: 1.15; }
.pd .pd-cmp-big b { font-size: 64px; font-weight: 800; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.pd .pd-cmp-big span { font-size: 24px; font-weight: 700; }
.pd .pd-cmp-yr { min-height: 0; margin-top: 8px; font-size: 17px; line-height: 1.65; color: #b9bec8; }
.pd .pd-cmp-none-t { font-size: var(--t-h3); font-weight: 700; color: #fff; line-height: 1.35; letter-spacing: -0.015em; }
.pd .pd-cmp-sk { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: var(--t-body); color: #b9bec8; }
.pd .pd-cmp-tag { padding: 2px 7px; border-radius: 6px; background: rgba(255, 255, 255, .1); font-size: var(--t-cap); font-weight: 600; color: #e3e5ea; }
.pd .pd-cmp-flow { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 8px; }
.pd .pd-cmp-from { position: relative; font-size: 32px; font-weight: 700; color: #8d929c; }
.pd .pd-cmp-from::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 3px; margin-top: -1px; border-radius: 2px; background: var(--brand); }
.pd .pd-cmp-arw2 { display: grid; color: #8d929c; }
.pd .pd-cmp-arw2 svg { width: 24px; height: 24px; }
.pd .pd-cmp-to { font-size: 56px; font-weight: 800; line-height: 1.15; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; background: linear-gradient(100deg, #fff 10%, #ffc2da 95%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: #fff; }
.pd .pd-cmp-pct { margin-top: 6px; font-size: 17px; font-weight: 700; color: #fff; }
.pd .pd-cmp-note { margin-top: 4px; font-size: var(--t-sub); line-height: 1.6; color: #8d929c; }
@media (max-width: 760px) {
  .pd .pd-est .ln { display: block; }   /* 좁은 화면: 두 문장을 두 줄로 — 줄 끝 "·"는 숨김 */
  .pd .pd-est-sep { display: none; }
  .pd .pd-facts.is-eq { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); row-gap: 6px; }
  .pd .pd-facts.is-eq [data-f="0"] { grid-column: 1 / -1; }
  .pd .pd-facts.is-eq .pd-op--eq { display: none; }
  .pd .pd-facts.is-eq .pd-f-k { white-space: normal; text-wrap: balance; }   /* 두 칸 나란히라 이름이 길면 두 줄 */
  .pd .pd-facts.is-eq .pd-of { display: block; grid-column: 1 / -1; font-size: 12.5px; font-weight: 600; color: var(--ink-3); text-align: center; }
  .pd .pd-cmp-vs { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .pd .pd-cmp-arw { justify-self: center; transform: rotate(90deg); }
  .pd .pd-cmp-amt { font-size: 24px; }
  .pd .pd-cmp-big b { font-size: 48px; }
  .pd .pd-cmp-big span { font-size: 20px; }
  .pd .pd-cmp-yr { font-size: 15.5px; }
  .pd .pd-cmp-from { font-size: 26px; }
  .pd .pd-cmp-to { font-size: 44px; }
  .pd .pd-cmp-none-t { font-size: var(--t-h3); }
  .pd .pd-strip.is-use .pd-use { font-size: 13.5px; }
}

/* Custom = 안내 줄 · 토글 · 월 요금 아래 줄 자리를 아예 없애고 결과를 위로(사용자 요청 2026-10-07 — 이전엔 자리만 남겨 빈 칸) */
.pd .pd-est.is-off, .pd .pd-seg.is-off { display: none; }
.pd .pd-ans-sub:empty { display: none; }
.pd .pd-pane[hidden] { display: none; }
/* 결정 103(2026-10-08) — 마지막 CTA 섹션 위아래 여백만 104 → 64(901px 이상). 모바일(900 이하 72)과 나머지는 그대로 */
@media (min-width: 901px) { .pd #start.pd-cta { padding-top: 64px; padding-bottom: 64px; } }

/* 모바일 글자 한 단계 더 작게(2026-10-12) — 폰에서 꽉 차 읽기 버겁다는 의견. 토큰(type.css)을 안 쓰는 고정 크기만 여기서 줄임 */
@media (max-width: 600px) {
  html body.pd .pd-a p, html body.pd .pd-a .pd-pl2 .v, html body.pd .pd-faq-1l { font-size: 13.5px; }
  html body.pd .pd-faq-list details summary { font-size: 14px; }
  html body.pd .pd-sit .pd-st .pd-sq { font-size: 15px; }
  html body.pd .pd-sit .pd-st .pd-sv, html body.pd .pd-st .pd-sv .pd-one { font-size: 21px; }
  html body.pd .pd-cards .pd-card .pd-card-price { font-size: 21px; }
  html body.pd .pd-card .pd-card-stat b, html body.pd .pd-facts .pd-f .pd-f-v { font-size: 17px; }
  html body.pd .pd-ims .pd-im .pd-im-n, html body.pd .pd-cards .pd-card .pd-card-n { font-size: 16px; }
  html body.pd .pd-cta-l .pd-cta-sum b, html body.pd .pd-ans .pd-ans-plan b { font-size: 16px; }
  html body.pd .pd-cta-grid .pd-prep .pd-prep-h { font-size: 16px; }

  html body.pd .pd-wms p b, html body.pd .pd-seg button { font-size: 14px; }
  html body.pd .pd-pane .pd-ans .pd-ans-price { font-size: 36px; }
  html body.pd .pd-ans .pd-ans-plan .pd-ans-k { font-size: 14.5px; }
}

/* 포함 내용(2026-10-12 다시 짬) — 공통 기능은 한 번만. 세 플랜 카드(차이만)가 '공통 기능' 받침판 위에 서 있는 입체 구성:
   받침판 = 아래 두께(12px 띠) + 긴 그림자, 카드 = 받침판 윗면에 걸쳐 서고 발밑에 타원 그림자. 계산 결과가 든 카드는 잉크로 바뀌며 10px 솟음 */
.pd .pd-stk { position: relative; margin-top: var(--t-gap-body); padding-bottom: 14px; }
.pd .pd-stk-cards { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; padding: 0 36px; }
.pd .pd-stk-card { position: relative; display: flex; flex-direction: column; padding: 24px 24px 20px; border-radius: 22px; background: #fff; color: var(--ink); box-shadow: 0 0 0 1px #e4e6eb, 0 22px 40px -24px rgba(22, 24, 29, .38); transition: transform .45s cubic-bezier(.2, .8, .2, 1), background-color .35s, box-shadow .45s; }
.pd .pd-stk-card.is-rec { background: var(--ink); color: #fff; transform: translateY(-10px); box-shadow: 0 0 0 1px var(--ink), 0 34px 50px -24px rgba(22, 24, 29, .55); }
.pd .pd-stk-post { position: absolute; z-index: -1; left: 12%; right: 12%; bottom: -16px; height: 22px; border-radius: 50%; background: radial-gradient(closest-side, rgba(22, 24, 29, .22), transparent); transition: transform .45s cubic-bezier(.2, .8, .2, 1), opacity .45s; }
.pd .pd-stk-card.is-rec .pd-stk-post { transform: translateY(10px) scaleX(.9); opacity: .8; }   /* 솟은 만큼 그림자는 받침판에 남음 */
.pd .pd-stk-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 24px; }
.pd .pd-stk-card:not(.is-rec) .pd-it-tag { display: none; }
.pd .pd-stk-card.is-rec .pd-pill { background: #2a2d35; color: #e3e5ea; }
.pd .pd-stk-n { margin-top: 14px; font-size: 22px; font-weight: 700; letter-spacing: -0.015em; line-height: 1.3; }
.pd .pd-stk-d { margin-top: 4px; font-size: var(--t-sub); color: var(--ink-3); }
.pd .pd-stk-card.is-rec .pd-stk-d { color: #b9bec8; }
.pd .pd-stk-rows { margin-top: auto; padding-top: 18px; }
.pd .pd-stk-rows div { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 0; border-top: 1px solid #eceef2; font-size: var(--t-sub); }
.pd .pd-stk-rows div:last-child { padding-bottom: 2px; }
.pd .pd-stk-rows dt { color: var(--ink-2); }
.pd .pd-stk-rows dd { font-weight: 700; white-space: nowrap; }
.pd .pd-stk-yes { display: inline-flex; align-items: center; gap: 5px; color: var(--brand); }
.pd .pd-stk-yes svg { width: 15px; height: 15px; }
.pd .pd-stk-none { font-weight: 500; color: #80858f; }
.pd .pd-stk-card.is-rec .pd-stk-rows div { border-top-color: #2c2f37; }
.pd .pd-stk-card.is-rec .pd-stk-rows dt { color: #c9ccd3; }
.pd .pd-stk-card.is-rec .pd-stk-yes { color: #ff8fbb; }
.pd .pd-stk-card.is-rec .pd-stk-none { color: #9a9fa8; }
/* 받침판 */
.pd .pd-stk-base { position: relative; z-index: 1; margin-top: -30px; padding: 62px 36px 32px; border-radius: 26px; background: linear-gradient(180deg, #f7f8fa, #eceef2); box-shadow: inset 0 1px 0 #fff, 0 12px 0 #d9dce2, 0 44px 60px -30px rgba(22, 24, 29, .42); }
.pd .pd-stk-bh { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px 12px; margin-bottom: 20px; }
.pd .pd-stk-bk { display: inline-flex; align-items: center; gap: 8px; font-size: 18px; font-weight: 800; color: var(--ink); }
.pd .pd-stk-bi { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--ink); color: #fff; }
.pd .pd-stk-bi svg { width: 13px; height: 13px; }
.pd .pd-stk-bs { font-size: var(--t-sub); color: var(--ink-3); }
.pd .pd-stk-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 22px; }
.pd .pd-stk-list li { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 12px; background: #fff; box-shadow: 0 1px 2px rgba(22, 24, 29, .06); font-size: var(--t-sub); color: var(--ink); }
.pd .pd-stk-list i { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: var(--brand-soft); color: var(--brand); }
.pd .pd-stk-list i svg { width: 12px; height: 12px; }
@media (max-width: 1100px) { .pd .pd-stk-cards { gap: 14px; padding: 0 20px; } .pd .pd-stk-card { padding: 22px 18px 18px; } .pd .pd-stk-n { font-size: 19px; } .pd .pd-stk-base { padding: 58px 22px 26px; } .pd .pd-stk-list { gap: 10px 14px; } }
/* 좁은 화면: 카드 세 장 위아래로(차이만이라 짧음) → 맨 아래 받침판에 공통 기능 한 번. 공통 기능은 2열, 긴 '교환·반품 접수(AI)'는 맨 아래 한 줄 */
@media (max-width: 900px) {
  .pd .pd-stk-cards { grid-template-columns: 1fr; gap: 12px; padding: 0 10px; }
  .pd .pd-stk-card { padding: 18px 18px 14px; border-radius: 18px; }
  .pd .pd-stk-card.is-rec { transform: none; }
  .pd .pd-stk-card.is-rec .pd-stk-post { transform: none; }
  .pd .pd-stk-n { margin-top: 10px; font-size: 18px; }
  .pd .pd-stk-rows { padding-top: 12px; }
  .pd .pd-stk-rows div { padding: 10px 0; }
  .pd .pd-stk-base { margin-top: -22px; padding: 44px 14px 18px; border-radius: 20px; box-shadow: inset 0 1px 0 #fff, 0 9px 0 #d9dce2, 0 34px 44px -26px rgba(22, 24, 29, .4); }
  .pd .pd-stk-bh { margin-bottom: 14px; }
  .pd .pd-stk-bk { font-size: 16px; }
  .pd .pd-stk-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .pd .pd-stk-list li { gap: 8px; padding: 10px 10px; font-size: 13px; }
  .pd .pd-stk-list li:nth-child(2) { order: 99; grid-column: 1 / -1; }
  .pd .pd-stk-list i { width: 18px; height: 18px; }
}
/* 2026-10-12: PC = 받침판 입체 구성(.pd-stk), 900 이하 = 예전 플랜별 카드 3장(.pd-ims, 공통 기능 각 카드에) */
.pd .pd-ims { display: none; }
/* 2026-10-12(다시): 모바일도 받침판 구성 — 카드 3장은 이름 + 두 줄(상담원 CS 대행 · 판매채널)만, 공통 기능은 아래 판에 한 번 */
@media (max-width: 900px) { .pd .pd-stk-d { display: none; } .pd .pd-stk-n { margin-top: 8px; } .pd .pd-stk-rows { padding-top: 10px; } .pd .pd-stk-rows div { padding: 9px 0; } .pd .pd-stk-cards { gap: 10px; } }

/* 마무리 CTA A안(2026-10-12) — 다른 페이지 마무리처럼 눈에 띄게: 가운데 남색 빛(천천히 숨쉼) + 오른쪽 아래 옅은 분홍 빛, 계산 금액을 크게 */
.pd .pd-cta { position: relative; isolation: isolate; overflow: hidden; }
.pd .pd-cta::before { content: ""; position: absolute; z-index: -1; left: 32%; top: 50%; width: 1100px; height: 640px; transform: translate(-50%, -50%); background: radial-gradient(closest-side, rgba(46, 62, 118, .7), rgba(46, 62, 118, 0)); animation: pd-cta-br 8s ease-in-out infinite; pointer-events: none; will-change: opacity; }
.pd .pd-cta::after { content: ""; position: absolute; z-index: -1; right: -120px; bottom: -160px; width: 620px; height: 480px; background: radial-gradient(closest-side, rgba(200, 17, 90, .22), rgba(200, 17, 90, 0)); pointer-events: none; }
@keyframes pd-cta-br { 0%, 100% { opacity: .7; } 50% { opacity: 1; } }   /* 투명도만(크기 변화는 큰 그라데이션을 매 프레임 다시 그려 버벅일 수 있어서) */
.pd .pd-cta-price { margin-top: 26px; font-size: 52px; font-weight: 800; line-height: 1.1; letter-spacing: -0.03em; background: linear-gradient(100deg, #fff 0%, #ffc2da 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.pd .pd-cta-price + .pd-cta-sum { margin-top: 10px; }
.pd .pd-cta-price + .pd-cta-sum b { font-size: 16px; font-weight: 600; color: #c4c8d0; }
@media (max-width: 900px) { .pd .pd-cta-price { font-size: 40px; } .pd .pd-cta-price + .pd-cta-sum b { min-height: 0; } .pd .pd-cta::before { left: 50%; top: 30%; width: 700px; height: 520px; } }
@media (prefers-reduced-motion: reduce) { .pd .pd-cta::before { animation: none; } }
/* 모바일 계산 문장 크게 · 진하게(2026-10-12) — 23 · 회색이라 작고 흐려 보이던 것. 첫 화면에 추천 플랜까지 보이게 아래 간격은 조금 줄임 */
@media (max-width: 760px) {
  .pd .pd-sent { font-size: 26px; line-height: 1.75; color: var(--ink-2); }
  .pd .pd-chips { margin-top: 18px; }
  .pd .pd-est { margin-top: 14px; }
}
@media (max-width: 360px) { .pd .pd-sent { font-size: 23px; } }
@media (max-width: 380px) { .pd .pd-chips { gap: 5px; } .pd .pd-chip { padding: 7px 9px; font-size: 13.5px; } }   /* 360에서도 다섯 칩 한 줄 */
/* 모바일 계산 문장 · 마무리 제목 글자 하나로(2026-10-12) — 문장 26 · 고르는 칸 20 · 마무리 강조 20 · 제목 23으로 섞여 있던 것.
   문장 = 건수 칩 = 고르는 칸 = 23(섹션 제목 단계), 마무리 제목도 강조 글자까지 23(서비스 · 체험 마무리 제목과 같음) */
@media (max-width: 760px) {
  .pd .pd-sent, .pd .pd-sent .ln, .pd .pd-sent .pd-dd, .pd .pd-sent .pd-dd-v { font-size: 23px; }
  .pd .pd-sent .pd-dd { padding: 1px 30px 3px 12px; }
  .pd .pd-cta-h .pd-cta-g { font-size: inherit; }
}
@media (max-width: 360px) { .pd .pd-sent, .pd .pd-sent .ln, .pd .pd-sent .pd-dd, .pd .pd-sent .pd-dd-v { font-size: 21px; } }
@media (max-width: 900px) { .pd .pd-stk-n { font-size: 16px; } }   /* 모바일 카드 제목 16(다른 카드 제목과 같게) */