/* 요금 화면 — 테마를 따른다(밝게 · 어둡게). 색은 토큰만 */
.pr{background:var(--paper);color:var(--text)}
.pr a:not(.btn){color:var(--accent)}
.pr-muted{color:var(--muted)}
.pr-center{text-align:center}
.pr-h2{font-size:clamp(22px,2vw,28px);font-weight:900}

.pr-hero{position:relative;overflow:hidden;padding:96px 0 72px}
.pr-hero-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:75% 30%;opacity:var(--art-op)}
.pr-hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,var(--veil) 20%,var(--veil-soft) 58%,transparent),linear-gradient(0deg,var(--paper) 0%,transparent 40%)}
.pr-hero-in{position:relative;display:flex;flex-direction:column;gap:20px}
.pr-badge{align-self:flex-start;font-size:13px;padding:7px 14px;border-radius:var(--r-pill);border:1px solid var(--line);background:var(--glass)}
.pr-title{font-size:clamp(38px,5.4vw,64px);font-weight:900;line-height:1.12;letter-spacing:-2px}
.pr-grad{background:linear-gradient(90deg,var(--grad-a),var(--grad-b) 45%,var(--grad-c));-webkit-background-clip:text;background-clip:text;color:transparent}
.pr-lede{font-size:clamp(16px,1.4vw,19px);line-height:1.7;color:var(--muted)}
.pr-trust{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.pr-trust li{display:flex;align-items:center;gap:8px;font-size:14px;padding:10px 14px;border-radius:var(--r);background:var(--glass);border:1px solid var(--line)}
.pr-trust li::before{content:"";width:8px;height:8px;border-radius:4px;background:var(--emo-calm-bar)}
.pr-trust li{color:var(--text)}

.pr-calc{padding-bottom:56px}
.pr-calc-in{border-radius:var(--r-xl);padding:28px;border:1px solid var(--line);display:grid;gap:28px;align-items:center;grid-template-columns:minmax(0,1fr);
  background:linear-gradient(135deg,var(--emo-surprised-glow),var(--glass) 55%,var(--emo-angry-glow))}
@media (min-width:1024px){.pr-calc-in{grid-template-columns:minmax(0,3fr) minmax(0,2fr)}}
.pr-calc-left{display:flex;flex-direction:column;gap:14px}
.pr-range{width:100%;accent-color:var(--grad-b);min-height:44px}
.pr-scale{display:flex;justify-content:space-between;font-size:12px;color:var(--faint)}
.pr-calc-right{border-radius:var(--r-lg);padding:22px;background:var(--veil);border:1px solid var(--line);display:flex;flex-direction:column;gap:8px}
.pr-calc-pack{font-size:clamp(22px,2.2vw,30px);font-weight:900}

/* 상품(설계 165 §3-2) — S 는 옆으로 미는 카드 한 줄(추천 상품이 먼저 보이게 pricing.js 가 그 카드로 민다) · M 2열 · L+ 4열 */
.pr-packs{display:grid;gap:12px;grid-auto-flow:column;grid-auto-columns:82%;overflow-x:auto;scroll-snap-type:x mandatory;
  overscroll-behavior-x:contain;scrollbar-width:none;padding-top:10px;padding-bottom:40px;align-items:stretch}
.pr-packs::-webkit-scrollbar{display:none}
.pr-pack{scroll-snap-align:center}
@media (min-width:640px){.pr-packs{grid-auto-flow:row;grid-auto-columns:auto;overflow:visible;gap:16px;grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1024px){.pr-packs{grid-template-columns:repeat(4,minmax(0,1fr))}}
.pr-pack{position:relative;border-radius:22px;border:1px solid var(--line)}
.pr-pack.is-hot{border:none;transform:translateY(-8px)}
.pr-pack.is-hot::before{content:"";position:absolute;inset:-2px;border-radius:24px;background:linear-gradient(135deg,var(--grad-a),var(--grad-b),var(--grad-c));animation:vsPulse 4s ease-in-out infinite}
.pr-pack-in{position:relative;border-radius:22px;overflow:hidden;background:var(--card);display:flex;flex-direction:column;height:100%}
.pr-pack-art{position:relative;height:170px;overflow:hidden}
.pr-pack-art img{width:100%;height:100%;object-fit:cover;object-position:50% 20%}
.pr-pack-art::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,var(--card) 4%,transparent 60%)}
.pr-pack-flag{position:absolute;z-index:1;top:12px;right:12px;font-size:12px;font-weight:700;padding:5px 10px;border-radius:var(--r-pill);background:var(--text);color:var(--paper)}
.pr-pack-body{padding:0 22px 22px;display:flex;flex-direction:column;gap:12px;flex:1}
.pr-pack-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.pr-pack-head h3{font-size:20px}
.pr-price{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.pr-price b{font-size:clamp(28px,2.4vw,36px);font-weight:900;letter-spacing:-1px;white-space:nowrap}
.pr-credits{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:16px}
.pr-bonus{font-size:12px;padding:3px 8px;border-radius:var(--r-pill);background:var(--ok-bg);color:var(--ok)}
.pr-sep{height:1px;background:var(--line)}
.pr-can{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px;font-size:13px;flex:1}
.pr-can li{display:flex;gap:8px}
.pr-can li::before{content:"●";color:var(--grad-b)}
.pr-btn{background:var(--card);color:var(--text);border-color:var(--line-strong)}
.pr-btn:hover{background:var(--hover);color:var(--text)}
.pr-btn-hot{background:linear-gradient(90deg,var(--hot-a),var(--hot-b));color:var(--on-hot);border:none;font-weight:700}
.pr-btn-hot:hover{background:linear-gradient(90deg,var(--hot-a),var(--hot-b));color:var(--on-hot);filter:brightness(1.08)}

.pr-free{padding-bottom:48px}
.pr-free-in{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center;padding:18px 22px;border-radius:var(--r-lg);border:1px dashed var(--line)}
.pr-free-in .pr-muted{flex:1 1 auto;min-width:0}

/* 혜택 6장 — S1 · M2 · L3 · XL3 · 2XL6(.fit) */
.pr-perks{--fit-gap:14px;padding-bottom:56px}
.pr-perk{border-radius:var(--r-lg);padding:20px;background:var(--glass);border:1px solid var(--line);display:flex;flex-direction:column;gap:8px}
.pr-perk-no{width:36px;height:36px;border-radius:var(--r);display:flex;align-items:center;justify-content:center;font-weight:900;
  background:linear-gradient(135deg,var(--emo-surprised-glow),var(--emo-sad-glow))}

.pr-biz{padding-bottom:56px}
.pr-biz-in{border-radius:var(--r-xl);padding:28px;background:var(--card);border:1px solid var(--line);display:flex;flex-wrap:wrap;gap:24px;align-items:center}
.pr-faces{display:flex;padding-left:12px}
.pr-faces img{width:56px;height:56px;border-radius:28px;object-fit:cover;object-position:50% 20%;border:2px solid var(--card);margin-left:-12px}
.pr-biz-text{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:6px}

.pr-faq{display:flex;flex-direction:column;gap:10px;padding-bottom:72px}
.pr-q{border-radius:var(--r-lg);padding:4px 20px;background:var(--glass);border:1px solid var(--line)}
.pr-q summary{display:flex;align-items:center;min-height:var(--tap);cursor:pointer;font-weight:700;font-size:15px}
.pr-q p{margin-top:10px;font-size:14px;color:var(--muted);line-height:1.8}
.pr-legal{margin-top:16px;line-height:1.8}