/* 요금제(/pricing) — 피그마 plus zero2 'min 1025px max 1920px - pricing'(1255:12114, 2026-10-15).
   v2 공통(site.css)·헤더(header.css — 밝은 변형 .header.light 포함) 위에 얹고, 랜딩과 같은 블록('첫 목소리는, 무료입니다' 카드·자주 묻는 질문·.h-section)은
   landing.css 를 그대로 쓴다. 여기는 이 페이지에만 있는 블록 — 2×2 요금 카드 · 멤버/뷰어 · 어두운 비교표 · 결제 안내 6칸.
   경계: 데스크톱 ≥1025 · 태블릿 521~1024 · 모바일 ≤520(site.css 와 같다). */

/* ---------- 히어로 + 요금 카드 ---------- */
.p-hero{padding:192px 0 160px}
.p-hero-head{text-align:center}
.p-hero-head h1{font-weight:300;font-size:clamp(40px,3.6vw,52px);line-height:1.5;color:#333}
.p-hero-head p{margin-top:24px;font-weight:300;font-size:clamp(18px,1.04vw,20px);line-height:1.6;color:#666}
.p-hero-head p b{font-weight:500;color:#333}

.plans{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px;margin-top:80px}
.plan{position:relative;display:flex;flex-direction:column;padding:32px;background:#fff;border:1px solid #ddd}
.plan.popular{border-color:#333}
.plan.muted{background:#f5f5f5;border-color:#f5f5f5}
.plan-head{display:flex;justify-content:space-between;gap:24px;align-items:flex-start}
.plan-tier{font-weight:500;font-size:14px;line-height:1.5;color:#00974b}
.plan-name{margin-top:2px;font-weight:400;font-size:20px;line-height:1.5;color:#333}
.plan-price{margin-top:8px;display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 6px;color:#333}
.plan-price .num{font-weight:700;font-size:40px;line-height:1.2;letter-spacing:-0.02em}
.plan-price .per{font-size:16px;font-weight:400}
.plan-price .vat{font-size:14px;font-weight:300;color:#999}
.plan-sub{margin-top:6px;font-size:14px;font-weight:300;color:#888}
.plan-sub b{font-weight:500;color:#555}
.plan-meter{flex:0 0 auto;display:flex;flex-direction:column;gap:6px;padding-top:24px;font-size:16px;font-weight:300;line-height:1.5;color:#333;list-style:none}
.plan-meter li{white-space:nowrap}
.plan-meter li::before{content:"";display:inline-block;width:4px;height:4px;margin-right:10px;border-radius:50%;background:#333;vertical-align:middle}
.plan-meter b{font-weight:600}
.plan-badge{position:absolute;top:32px;right:32px;font-weight:500;font-size:14px;color:#00974b}
.plan-feats{list-style:none;margin-top:24px;padding-top:24px;border-top:1px solid #e5e5e5;display:flex;flex-direction:column;gap:8px;font-size:16px;font-weight:300;line-height:1.5;color:#555}
.plan.muted .plan-feats{border-top-color:#ddd}
.plan-feats li{display:flex;align-items:flex-start;gap:10px}
.plan-feats svg{flex:none;width:16px;height:16px;margin-top:4px;fill:none;stroke:#999;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.plan-btn{margin-top:auto;width:100%;height:48px}
.plan-feats + .plan-btn{margin-top:32px}
.plan .plan-btn.btn-ghost{border-color:#a0a0a0}
.plan.muted .plan-btn.btn-ghost{background:#fff}

/* 멤버 / 뷰어 — 테두리 상자 하나를 둘로 */
.roles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:32px;border:1px solid #ddd}
.role{display:flex;align-items:center;gap:24px;padding:24px 32px}
.role + .role{border-left:1px solid #ddd}
.role-icon{flex:none;width:64px;height:64px;border-radius:50%;background:#f5f5f5;display:flex;align-items:center;justify-content:center}
.role-icon svg{width:36px;height:36px}
.role-icon svg [stroke="#00974B"]{stroke:#999}
.role-icon svg [fill="#00974B"]{fill:#999}
.role-txt{flex:1;min-width:0}
.role-txt h3{display:flex;align-items:center;justify-content:space-between;gap:12px;font-weight:500;font-size:20px;line-height:1.5;color:#333}
.role-txt h3 span{font-weight:500;font-size:14px;color:#00974b;white-space:nowrap}
.role-txt p{margin-top:4px;font-weight:300;font-size:15px;line-height:1.6;color:#666}

/* ---------- 플랜 비교 · 크레딧 (어두운 바탕) ---------- */
.p-compare{background:#282828;color:#fff;padding:160px 0}
.p-compare .head{text-align:center}
.p-compare h2{font-weight:200;font-size:clamp(40px,3.6vw,52px);line-height:1.5}
.p-compare .head p{margin-top:24px;font-weight:200;font-size:clamp(18px,1.04vw,20px);line-height:1.6;color:#ccc}
.p-compare .head p b{font-weight:500;color:#fff}
.cmp-scroll{margin-top:64px;overflow-x:auto}
.cmp{width:100%;min-width:760px;border-collapse:collapse;font-size:16px;line-height:1.5}
.cmp th,.cmp td{padding:18px 24px;text-align:center;border-bottom:1px solid rgba(255,255,255,.12)}
.cmp thead th{background:#1f1f1f;font-weight:500;font-size:20px;color:#fff;border-bottom:0}
.cmp th:first-child,.cmp td:first-child{text-align:left}
.cmp td{font-weight:300;color:#ccc}
.cmp td:first-child{font-weight:400;color:#fff;width:24%}
.cmp td small{display:block;margin-top:2px;font-size:13px;font-weight:300;color:#999}
.cmp .team{background:#363636}
.cmp thead .team{background:#363636}
.cmp td.team{color:#fff}

.credit-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:96px;margin-top:120px}
.credit-grid h3{text-align:center;font-weight:300;font-size:clamp(28px,1.9vw,36px);line-height:1.5}
.credit-grid h3 small{font-size:.6em;font-weight:500;color:#7ee2a8}
.credit-grid .lead{margin-top:16px;text-align:center;font-weight:200;font-size:18px;line-height:1.7;color:#ccc}
.mini{width:100%;margin-top:40px;border-collapse:collapse;font-size:16px;line-height:1.5}
.mini th,.mini td{padding:14px 8px;border-bottom:1px solid rgba(255,255,255,.12);text-align:center}
.mini th{font-weight:400;font-size:14px;color:#999}
.mini td{font-weight:300;color:#ccc}
.mini th:first-child,.mini td:first-child{text-align:left;color:#fff;font-weight:400}
.mini th:last-child,.mini td:last-child{text-align:right}
.mini td small{display:block;margin-top:2px;font-size:13px;font-weight:300;color:#999}
.mini .price{color:#fff;font-weight:400;white-space:nowrap}
.mini a{color:#fff;text-decoration:underline}

/* ---------- 결제 전에 확인해주세요 — 2 × 3 카드(왼쪽 그림 · 오른쪽 글) ---------- */
.p-notice{padding:160px 0;border-bottom:1px solid #a0a0a0;scroll-margin-top:24px}
.p-notice .sub{margin-top:24px;text-align:center;font-weight:300;font-size:clamp(18px,1.04vw,20px);line-height:1.6;color:#666}
.p-notice .sub b{font-weight:500;color:#333}
.notice-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px;margin-top:64px}
/* 그림은 시안(피그마)에서 잘라 온 정사각 PNG — 바탕 #f2f2f2 가 그림에 들어 있어 칸 바탕도 같은 색 */
.notice-card{display:grid;grid-template-columns:36% 1fr;gap:32px;align-items:center;padding:16px;border:1px solid #e5e5e5}
.notice-ill{aspect-ratio:1/1;background:#f2f2f2;overflow:hidden}
.notice-ill img{width:100%;height:100%;object-fit:cover}
.notice-card h3{font-weight:500;font-size:20px;line-height:1.5;color:#333}
.notice-card p{margin-top:8px;font-weight:300;font-size:15px;line-height:1.7;color:#666}
.notice-card p b{font-weight:500;color:#333}
.notice-card p a{color:#333;text-decoration:underline}

/* 요금제 FAQ 는 랜딩 FAQ(landing.css) 그대로, 문의 폼 위에 구분선만 */
.p-faq{border-bottom:0}

/* ---------- 태블릿 ≤1024 ---------- */
@media (max-width:1024px){
  .p-hero{padding:152px 0 120px}
  .plans{grid-template-columns:1fr;gap:24px;margin-top:56px}
  .roles{grid-template-columns:1fr}
  .role + .role{border-left:0;border-top:1px solid #ddd}
  .p-compare{padding:120px 0}
  .cmp-scroll{margin-top:48px}
  .credit-grid{grid-template-columns:1fr;gap:80px;margin-top:96px}
  .p-notice{padding:120px 0}
  .notice-grid{grid-template-columns:1fr;gap:24px;margin-top:48px}
}
/* ---------- 모바일 ≤520 ---------- */
@media (max-width:520px){
  .p-hero{padding:120px 0 60px}
  .p-hero-head h1{font-size:clamp(26px,8.2vw,32px)}
  .p-hero-head p{font-size:16px;margin-top:16px}
  .plans{margin-top:40px;gap:16px}
  .plan{padding:24px}
  .plan-head{flex-direction:column;gap:0}
  .plan-meter{padding-top:16px;font-size:15px}
  .plan-badge{top:24px;right:24px}
  .plan-price .num{font-size:32px}
  .plan-feats{font-size:15px}
  .role{padding:20px;gap:16px;align-items:flex-start}
  .role-icon{width:48px;height:48px}
  .role-icon svg{width:28px;height:28px}
  .role-txt h3{font-size:18px}
  .role-txt p{font-size:14px}
  .p-compare{padding:60px 0}
  .p-compare h2{font-size:clamp(26px,8.2vw,32px)}
  .p-compare .head p{font-size:16px;margin-top:16px}
  .cmp{font-size:14px}
  .cmp th,.cmp td{padding:14px 12px}
  .cmp thead th{font-size:16px}
  .credit-grid{gap:56px;margin-top:64px}
  .credit-grid h3{font-size:24px}
  .credit-grid .lead{font-size:15px}
  .mini{font-size:14px;margin-top:24px}
  .p-notice{padding:60px 0}
  .p-notice .sub{font-size:16px;margin-top:16px}
  .notice-grid{margin-top:32px;gap:16px}
  .notice-card{grid-template-columns:1fr;gap:16px}
  .notice-ill{aspect-ratio:auto;height:180px}
  .notice-ill img{object-fit:contain}
  .notice-card h3{font-size:18px}
  .notice-card p{font-size:14px}
}