/* 요금·결제 화면 (pr-*) — landing.css 위에 얹힘 */
.pr-hero { padding: 72px 0 28px; text-align: center; }
.pr-hero h1 { font-size: clamp(32px, 3.6vw, 48px); line-height: 1.15; letter-spacing: -.035em; font-weight: 800; margin: 0 0 18px; word-break: keep-all; }
.pr-lead { max-width: 820px; margin: 0 auto 30px; font-size: 17.5px; line-height: 1.75; color: var(--text-2); word-break: keep-all; }
.pr-toggles { display: flex; gap: 16px; align-items: center; justify-content: center; flex-wrap: wrap; }
.pr-seg { display: inline-flex; background: #EEF1F6; border-radius: 999px; padding: 4px; gap: 2px; }
.pr-seg button, .pr-seg a { appearance: none; border: 0; background: transparent; font: inherit; font-weight: 700; font-size: 14.5px; color: var(--text-2); padding: 8px 18px; border-radius: 999px; cursor: pointer; white-space: nowrap; }
.pr-seg .on { background: #fff; color: var(--text); box-shadow: var(--shadow-sm); }
.pr-seg em { font-style: normal; font-size: 11.5px; font-weight: 800; color: #1D7A43; background: #E7F6EC; border-radius: 999px; padding: 2px 8px; margin-left: 6px; }
.pr-seg.small button, .pr-seg.small a { padding: 7px 14px; font-size: 13.5px; }

.pr-plans { padding: 26px 0 60px; }
.pr-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.pr-card { position: relative; background: #fff; border: 1px solid var(--border); border-radius: 18px; padding: 26px 24px 24px; display: flex; flex-direction: column; gap: 12px; box-shadow: var(--shadow-sm); min-width: 0; }
.pr-card.hot { border-color: var(--primary); box-shadow: 0 12px 40px rgba(52,109,219,.14); }
.pr-card.current { outline: 2px solid #1D7A43; outline-offset: -1px; }
.pr-card h3 { margin: 0; font-size: 22px; letter-spacing: -.02em; }
.pr-tag { margin: -4px 0 0; color: var(--text-2); font-size: 14px; line-height: 1.55; min-height: 44px; word-break: keep-all; }
.pr-pop { position: absolute; top: -12px; left: 22px; font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #fff; background: var(--primary); border-radius: 999px; padding: 4px 11px; }
.pr-price { display: flex; flex-direction: column; gap: 2px; padding: 8px 0 4px; }
.pr-price b { font-size: 34px; letter-spacing: -.03em; line-height: 1.05; }
.pr-price span { font-size: 12.5px; color: var(--text-3); line-height: 1.5; min-height: 36px; }
.pr-card .btn.block { width: 100%; justify-content: center; }
.pr-card .btn.disabled { opacity: .55; pointer-events: none; }
/* Pro 카드 밑 「카드 없이 14일 무료 체험 →」 — 단추 아래 한 줄 링크(폼 단추도 같은 모양) */
.pr-trial-form { margin: 0; }
.pr-trial { display: block; width: 100%; margin-top: 8px; padding: 0; border: 0; background: none; font: inherit; font-size: 13.5px; font-weight: 600; color: var(--primary); text-align: center; text-decoration: none; cursor: pointer; word-break: keep-all; }
.pr-trial:hover { text-decoration: underline; }
.gate-trial form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pr-feats { list-style: none; margin: 8px 0 0; padding: 14px 0 0; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 8px; font-size: 14px; color: var(--text-2); line-height: 1.5; }
.pr-feats li { word-break: keep-all; }
.pr-feats li b { color: var(--text); }
.pr-feats li.off { opacity: .5; }
.pr-feats.small { font-size: 13px; }

.pr-calc { padding: 70px 0; background: #F7F8FA; }
.calc { max-width: 1040px; margin: 0 auto; }
.calc-form { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 22px; }
.calc-form label { display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; font-weight: 600; color: var(--text-2); background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; min-width: 0; }
.calc-form input[type=number] { font: inherit; font-size: 20px; font-weight: 800; border: 0; outline: 0; width: 100%; color: var(--text); background: transparent; }
.calc-form label.chk { flex-direction: row; align-items: center; gap: 10px; cursor: pointer; }
.calc-form label.chk input { width: 18px; height: 18px; accent-color: var(--primary); flex: none; }
.calc-form label.chk span { word-break: keep-all; line-height: 1.4; }
.calc-out { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.calc-card { background: #fff; border: 1px solid var(--border); border-radius: 16px; padding: 22px 24px; min-width: 0; }
/* 두 카드의 행(제목·항목·1년·월·메모)을 서브그리드로 맞춰 「1년」 총액이 수평으로 나란히 오게 한다 */
@supports (grid-template-rows: subgrid) {
  /* 요금 카드 5행(이름·설명·가격·단추·기능표)을 카드끼리 맞춘다 — Pro 카드만 단추 밑에 체험 링크가 있어도 기능표 시작 줄이 나란히 */
  .pr-card { display: grid; grid-template-rows: subgrid; grid-row: span 5; row-gap: 12px; align-content: start; }
  .pr-card .pr-cta { align-self: start; }
  .calc-card { display: grid; grid-template-rows: subgrid; grid-row: span 5; align-content: start; row-gap: 0; }
  .calc-out { grid-template-rows: auto minmax(52px, auto) auto auto auto; }
  .calc-card .calc-lines { align-self: start; }
}
.calc-card.us { border-color: var(--primary); background: linear-gradient(180deg, #F3F7FF, #fff); }
.calc-title { margin: 0 0 12px; font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.calc-card.us .calc-title { color: var(--primary); }
.calc-lines { display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: var(--text-2); min-height: 52px; }
.calc-lines div { display: flex; justify-content: space-between; gap: 12px; }
.calc-lines div span { min-width: 0; word-break: keep-all; }
.calc-lines div b { white-space: nowrap; color: var(--text); font-weight: 600; }
.calc-total { display: flex; justify-content: space-between; align-items: baseline; border-top: 1px solid var(--border); margin-top: 12px; padding-top: 12px; }
.calc-total span { font-size: 13px; color: var(--text-3); font-weight: 700; }
.calc-total b { font-size: 30px; letter-spacing: -.03em; white-space: nowrap; }
.calc-card.us .calc-total b { color: var(--primary); }
.calc-sub { display: flex; justify-content: space-between; font-size: 13.5px; color: var(--text-2); margin-top: 4px; }
.calc-why, .calc-save { margin: 12px 0 0; font-size: 13px; line-height: 1.6; color: var(--text-3); word-break: keep-all; }
.calc-save { color: #1D7A43; font-weight: 700; font-size: 14px; }
.pr-calc .cmp-note { margin-top: 18px; }

.pr-table { padding: 60px 0; }
.pr-cmp table.cmp { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 900px; }
.pr-cmp th, .pr-cmp td { padding: 11px 12px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; word-break: keep-all; }
.pr-cmp thead th { font-size: 12.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--text-3); background: #F7F8FA; position: sticky; top: 0; }
.pr-cmp thead th.us { color: var(--primary); }
.pr-cmp td.us { background: #F7FAFF; }
.pr-cmp tbody th { font-weight: 600; color: var(--text); background: #fff; position: sticky; left: 0; z-index: 1; box-shadow: 1px 0 0 var(--border); }
.pr-swipe { display: none; text-align: center; font-size: 12.5px; color: var(--text-3); margin: 8px 0 0; }
.pr-table .cmp-note { margin-top: 18px; }

.pr-trust { padding: 74px 0; background: #0F172A; color: #E7ECF6; }
.trust-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.trust-card { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: 14px; padding: 22px; min-width: 0; }
.trust-card h3 { margin: 0 0 8px; font-size: 17px; color: #fff; word-break: keep-all; }
.trust-card p { margin: 0; font-size: 14px; line-height: 1.7; color: #A8B4CC; word-break: keep-all; }

.pr-faq { padding: 60px 0 90px; }
.faq { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; }
.faq details { background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 0 18px; }
.faq summary { cursor: pointer; font-weight: 700; padding: 16px 0; list-style: none; word-break: keep-all; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; float: right; color: var(--text-3); font-weight: 800; }
.faq details[open] summary::after { content: '−'; }
.faq p { margin: 0 0 16px; color: var(--text-2); line-height: 1.75; word-break: keep-all; }

/* 결제 진행 */
.pr-checkout { padding: 56px 0 90px; }
.co-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(280px, .8fr); gap: 28px; max-width: 980px; margin: 0 auto; }
.co-main h1 { font-size: 30px; letter-spacing: -.03em; margin: 0 0 20px; }
.co-main label { display: block; font-size: 13px; font-weight: 700; color: var(--text-2); margin: 0 0 6px; }
.co-scope, .co-interval { margin-bottom: 18px; }
.co-main .btn.block { width: 100%; justify-content: center; margin-top: 10px; }
.co-agree { font-size: 12.5px; color: var(--text-3); line-height: 1.7; margin-top: 16px; word-break: keep-all; }
.co-agree a { text-decoration: underline; }
.co-side { background: #fff; border: 1px solid var(--border); border-radius: 16px; padding: 22px; align-self: start; position: sticky; top: 88px; }
.co-side h3 { margin: 0 0 14px; font-size: 16px; }
.co-row { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; padding: 7px 0; color: var(--text-2); }
.co-row b { color: var(--text); text-align: right; }
.co-row.total { border-top: 1px solid var(--border); margin-top: 6px; padding-top: 12px; }
.co-row.total b { font-size: 24px; letter-spacing: -.02em; }
.co-fine { font-size: 12px; color: var(--text-3); margin: 8px 0 0; }
.pr-note { font-size: 13.5px; color: var(--text-2); background: #F3F7FF; border-radius: 10px; padding: 10px 12px; line-height: 1.6; word-break: keep-all; }

/* 내 요금(대시보드) */
.pr-bill-head { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.pr-bill-head h2 { margin: 0 0 12px; }
.pr-bill-head .adm-card-sub { margin: 0 0 12px; }
.pr-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.pr-muted { color: var(--text-3); font-size: 13px; }
.pr-hist { margin-top: 14px; }
.pr-hist summary { cursor: pointer; font-size: 13.5px; font-weight: 700; color: var(--text-2); }
.pr-hist .toplist { margin-top: 10px; }
.badge.warn { background: #FEF3E2; color: #B45309; }

/* 게이트 배너·잠금 */
.gate-banner { display: flex; gap: 12px; align-items: center; justify-content: space-between; background: #FFF8E6; border: 1px solid #F4D79A; color: #7A4B00; border-radius: 12px; padding: 12px 14px; margin: 0 0 16px; font-size: 14px; line-height: 1.55; word-break: keep-all; }
.gate-banner .btn { flex: none; }
.gate-lock { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--primary); background: var(--primary-soft); border-radius: 999px; padding: 3px 10px; vertical-align: middle; }

@media (max-width: 1080px) {
  .pr-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trust-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .calc-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .pr-hero { padding: 44px 0 20px; }
  .pr-br { display: none; }
  .pr-grid, .trust-grid, .calc-out, .co-grid { grid-template-columns: minmax(0, 1fr); }
  .calc-form { grid-template-columns: minmax(0, 1fr); }
  .co-side { position: static; }
  .pr-swipe { display: block; }
  .pr-cmp tbody th { max-width: 140px; }
  .pr-bill-head { flex-direction: column; }
}
.pr-cancel { display: inline-block; position: relative; }
.pr-cancel summary { list-style: none; display: inline-flex; }
.pr-cancel summary::-webkit-details-marker { display: none; }
.pr-cancel-box { position: absolute; right: 0; top: calc(100% + 6px); width: 320px; z-index: 5; background: #fff; border: 1px solid var(--border); box-shadow: var(--shadow-md); }
.pr-cancel-box form { margin-top: 10px; text-align: right; }