/* ★ (2026-10-02) 요금제(PRICING) content 스킨 — 타이틀 → 월간/연간 토글 → 요금제 카드 → 하단 안내 3칸
   글자(라벨/타이틀/서브/요금제명/금액/안내 제목) = 설정 CSS 변수(크기·두께·컬러·자간). 모바일(≤640) = PC × --pr-mo */
.pr{--pr-ink:#0f172a;--pr-mute:#64748b;--pr-line:#e5e7eb;--pr-accent:var(--primary,#f0473e);--pr-radius:20px;--pr-card-bg:#f8fafc;--pr-card-min:240px;--pr-mo:.7;padding:clamp(40px,5vw,80px) 0 clamp(60px,7vw,110px)}
.pr *{box-sizing:border-box}
.pr-head{text-align:center;margin-bottom:clamp(28px,4vw,48px)}
.pr-eyebrow{text-transform:uppercase;margin-bottom:14px;font-size:var(--pr-label-size,12px);font-weight:var(--pr-label-weight,800);color:var(--pr-label-color,var(--pr-accent));letter-spacing:var(--pr-label-ls,2.2px)}
.pr-h{font-size:var(--pr-title-size,40px);font-weight:var(--pr-title-weight,800);line-height:var(--pr-title-lh,1.3);color:var(--pr-title-color,var(--pr-ink));margin:0;letter-spacing:var(--pr-title-ls,-0.8px);word-break:keep-all}
.pr-sub{font-size:var(--pr-sub-size,16px);font-weight:var(--pr-sub-weight,400);color:var(--pr-sub-color,var(--pr-mute));line-height:1.7;margin:16px auto 0;max-width:640px;word-break:keep-all;letter-spacing:var(--pr-sub-ls,0px)}
.pr-h .pr-em,.pr-sub .pr-em,.pr-desc .pr-em,.pr-info .pr-em{font-style:normal;color:var(--pr-em-color,var(--pr-accent));font-weight:var(--pr-em-weight,900);font-size:inherit;letter-spacing:inherit}
/* 이벤트 배지 */
.pr-event{display:inline-flex;align-items:center;gap:6px;margin-top:clamp(22px,3vw,34px);background:#fff1f0;background:color-mix(in srgb,var(--pr-accent) 9%,#fff);color:var(--pr-accent);border-radius:999px;padding:11px 22px;font-size:14px;font-weight:800;letter-spacing:-.2px}
/* 월간/연간 토글 — 흰 pill 안에 다크 활성 버튼 */
.pr-toggle{display:inline-flex;align-items:center;gap:4px;margin:clamp(18px,2.5vw,30px) auto 0;background:#fff;border:1px solid var(--pr-line);border-radius:999px;padding:5px;box-shadow:0 10px 30px -16px rgba(15,23,42,.3)}
.pr-toggle button{border:0;background:transparent;color:#475569;border-radius:999px;padding:11px 20px;font-size:14px;font-weight:800;cursor:pointer;display:inline-flex;align-items:center;gap:8px;transition:all .18s;line-height:1.2}
.pr-toggle button.on{background:var(--pr-ink);color:#fff}
.pr-toggle button em{font-style:normal;font-size:12px;font-weight:800;color:var(--pr-accent)}
.pr-toggle button.on em{color:#fecaca}

/* 카드 그리드 */
.pr-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(var(--pr-card-min,240px),1fr));gap:clamp(14px,1.6vw,22px);align-items:stretch}
.pr-card{position:relative;display:flex;flex-direction:column;background:var(--pr-card-bg,#f8fafc);border:1px solid transparent;border-radius:var(--pr-radius,20px);padding:clamp(22px,2.4vw,30px) clamp(20px,2vw,26px) clamp(20px,2vw,26px);transition:transform .22s,box-shadow .22s}
.pr-card:hover{transform:translateY(-3px);box-shadow:0 18px 40px -22px rgba(15,23,42,.35)}
.pr-card.is-pop:hover{box-shadow:0 24px 50px -22px rgba(240,71,62,.45);box-shadow:0 24px 50px -22px color-mix(in srgb,var(--pr-accent) 45%,transparent)}
.pr-card.is-pop{background:#fff;border-color:var(--pr-accent);box-shadow:0 18px 44px -20px rgba(240,71,62,.35);border-color:color-mix(in srgb,var(--pr-accent) 45%,#fff);box-shadow:0 18px 44px -20px color-mix(in srgb,var(--pr-accent) 35%,transparent)}
.pr-card.is-pop .pr-name{color:var(--pr-accent)}
.pr-card-hd{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:14px}
.pr-name{margin:0;font-size:var(--pr-name-size,20px);font-weight:var(--pr-name-weight,800);color:var(--pr-name-color,var(--pr-ink));letter-spacing:var(--pr-name-ls,-0.4px);line-height:1.25}
.pr-tag{flex:none;font-size:10.5px;font-weight:800;letter-spacing:.06em;border-radius:999px;padding:5px 10px;line-height:1;white-space:nowrap}
.pr-tag.pop{background:#fff1f0;background:color-mix(in srgb,var(--pr-accent) 10%,#fff);color:var(--pr-accent)}
.pr-tag.cur{background:var(--pr-ink);color:#fff}
.pr-tag.etc{background:#e2e8f0;color:#334155}
/* 금액 — 취소선 정가 › 금액 만원/월 */
.pr-price{display:flex;align-items:baseline;flex-wrap:wrap;gap:0 7px;line-height:1;margin-bottom:6px}
.pr-orig{font-size:calc(var(--pr-price-size,44px) * .5);font-weight:800;color:#b6bfcb;text-decoration:line-through;letter-spacing:-.5px}
.pr-arrow{font-style:normal;font-size:calc(var(--pr-price-size,44px) * .42);color:#b6bfcb;font-weight:700;position:relative;top:-2px}
.pr-amt{font-size:var(--pr-price-size,44px);font-weight:var(--pr-price-weight,800);color:var(--pr-price-color,var(--pr-ink));letter-spacing:var(--pr-price-ls,-1.5px);line-height:1}
.pr-amt--sm{font-size:calc(var(--pr-price-size,44px) * .62);letter-spacing:-.5px}
.pr-unit{font-size:15px;font-weight:700;color:var(--pr-ink);letter-spacing:-.2px}
.pr-ynote{font-size:12.5px;color:var(--pr-mute);margin:2px 0 0;min-height:1em}
.pr-desc{font-size:14px;color:#475569;line-height:1.7;margin:16px 0 0;word-break:keep-all;min-height:3.4em}
.pr-feats{list-style:none;margin:18px 0 22px;padding:0;display:flex;flex-direction:column;gap:11px;flex:1}
.pr-feats li{display:flex;align-items:flex-start;gap:8px;font-size:14px;color:var(--pr-ink);font-weight:600;line-height:1.45;letter-spacing:-.2px}
.pr-feats li i{flex:none;color:var(--pr-accent);font-size:16px;line-height:1.3}
.pr-feats li.hl{color:var(--pr-accent)}
/* 버튼 — 기본 흰 테두리 / 추천 카드 = 강조 그라데이션 */
.pr-btn{display:flex;align-items:center;justify-content:center;width:100%;border:1px solid #cbd5e1;background:#fff;color:var(--pr-ink);border-radius:12px;padding:15px 16px;font-size:15px;font-weight:800;cursor:pointer;text-decoration:none;transition:all .18s;letter-spacing:-.2px;line-height:1.2}
.pr-btn:hover{border-color:var(--pr-ink);background:var(--pr-ink);color:#fff}
.pr-btn:disabled{opacity:.6;cursor:default}
.pr-card.is-pop .pr-btn{border-color:transparent;background:var(--pr-accent);background:linear-gradient(135deg,var(--pr-accent) 0%,color-mix(in srgb,var(--pr-accent) 70%,#7c2d12) 100%);color:#fff;box-shadow:0 10px 24px -12px rgba(240,71,62,.7);box-shadow:0 10px 24px -12px color-mix(in srgb,var(--pr-accent) 70%,transparent)}   /* ★ 그림자도 강조 컬러 따라감 */
.pr-card.is-pop .pr-btn:hover{filter:brightness(1.06)}
.pr-card.is-cur .pr-btn{background:#fff;border-color:var(--pr-ink)}
.pr-card.is-special{background:#fff;border:1px dashed #cbd5e1}
.pr-empty{text-align:center;color:var(--pr-mute);background:var(--pr-card-bg,#f8fafc);border-radius:var(--pr-radius,20px);padding:48px 20px;font-size:15px;line-height:1.7}
.pr-empty small{font-size:12.5px;color:#94a3b8}

/* 하단 안내 3칸 */
.pr-info{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,40px);margin-top:clamp(36px,4.5vw,64px);padding-top:clamp(26px,3vw,40px);border-top:1px solid var(--pr-line)}
.pr-info-col h4{margin:0 0 10px;font-size:var(--pr-info-title-size,16px);font-weight:var(--pr-info-title-weight,800);color:var(--pr-info-title-color,var(--pr-accent));letter-spacing:var(--pr-info-title-ls,-0.3px);line-height:1.35}
.pr-info-col p{margin:0;font-size:14px;color:#475569;line-height:1.75;word-break:keep-all}

@media (max-width:1024px){
  .pr-info{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .pr-eyebrow{font-size:calc(var(--pr-label-size,12px) * var(--pr-mo))}
  .pr-h{font-size:calc(var(--pr-title-size,40px) * var(--pr-mo))}
  .pr-sub{font-size:calc(var(--pr-sub-size,16px) * var(--pr-mo))}
  .pr-info{grid-template-columns:1fr;gap:22px}
  .pr-grid{grid-template-columns:1fr}
  .pr-toggle button{padding:10px 14px;font-size:13px}
  .pr-desc{min-height:0}
}