/* 티음 — 이용권(구독) 가격 전용 스타일 */

/* 스크린리더 전용 (시각적으로 숨김) */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ---------- 히어로 ---------- */
.pricing-head { text-align: center; }
.pricing-head .page-title { margin-top: 12px; }
.pricing-head .page-desc { margin-left: auto; margin-right: auto; }

/* ---------- 플랜 카드 ---------- */
.plan-section { margin-top: 44px; }
.plan-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  align-items: stretch;
}
.plan-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--sheet);
  border-radius: var(--r-l);
  box-shadow: var(--lift-1);
  padding: 28px 26px;
}
.plan-featured {
  box-shadow: var(--lift-2), inset 0 0 0 2px var(--dot);
  padding-top: 36px;
}

/* 추천 리본 (헤더의 .plan-badge와 이름 충돌 방지 위해 .plan-ribbon으로 분리) */
.plan-ribbon {
  position: absolute;
  top: -13px; left: 50%; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 6px;
  height: 26px; padding: 0 15px;
  border-radius: var(--r-pill);
  background: var(--dot); color: #fff;
  font-size: 12px; font-weight: 700; letter-spacing: -0.01em;
  white-space: nowrap;
  box-shadow: var(--lift-1);
}
.plan-ribbon::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: #fff;
}

/* 헤더·가격 */
.plan-name {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 19px; font-weight: 750; letter-spacing: -0.02em;
}
.plan-product {
  margin-top: 4px; font-size: 12.5px; font-weight: 600;
  color: var(--ink-3); letter-spacing: -0.01em;
}
.plan-tag {
  margin-top: 8px; color: var(--ink-3); font-size: 13px; line-height: 1.5;
  min-height: 38px;
}
.plan-price {
  margin-top: 18px;
  display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap;
}
.plan-amount { font-size: 31px; font-weight: 800; letter-spacing: -0.03em; color: var(--ink); }
.plan-amount-tba { font-size: 22px; font-weight: 750; color: var(--ink-3); }
.plan-per { font-size: 14px; font-weight: 600; color: var(--ink-3); }
.plan-vat { margin-top: 5px; font-size: 12px; color: var(--ink-4); min-height: 16px; line-height: 1.5; }

/* 프로모션 배지 (Plus — 2026.12.31까지 무료) */
.plan-promo-badge {
  align-self: center;
  display: inline-flex; align-items: center;
  height: 22px; padding: 0 10px;
  border-radius: var(--r-pill);
  background: var(--dot-wash); color: var(--dot-ink);
  font-size: 11.5px; font-weight: 700; letter-spacing: -0.01em;
  white-space: nowrap;
}

/* 도입 준비 중 카드 (Pro) — 살짝 눌러 톤다운 */
.plan-upcoming .plan-amount-tba,
.plan-upcoming .plan-feats { opacity: 0.92; }

/* CTA 슬롯 보조 문구·링크 */
.plan-cta-note {
  margin-top: 8px; text-align: center;
  font-size: 12.5px; line-height: 1.5; color: var(--ink-4);
}
a.plan-cta-link {
  display: block; color: var(--dot-ink); font-weight: 650; text-decoration: none;
}
a.plan-cta-link:hover { text-decoration: underline; }

/* CTA 슬롯 */
.plan-cta { margin-top: 20px; min-height: 48px; }

/* 기능 리스트 */
.plan-feats {
  list-style: none; margin: 22px 0 0; padding: 22px 0 0;
  border-top: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 13px;
  flex: 1;
}
.feat {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 14px; line-height: 1.5; color: var(--ink-2);
}
.feat .feat-ico { flex: none; margin-top: 1px; line-height: 0; }
.feat-dash {
  flex: none; width: 18px; text-align: center;
  color: var(--ink-4); font-weight: 700;
}
.feat-muted { color: var(--ink-4); }
.plan-soon {
  display: inline-flex; align-items: center;
  margin-left: 6px; height: 20px; padding: 0 9px;
  border-radius: var(--r-pill);
  background: var(--amber-wash); color: var(--amber);
  font-size: 11px; font-weight: 650; letter-spacing: -0.01em;
  white-space: nowrap; vertical-align: 1px;
}

/* ---------- 매칭 수수료 0원 강조 ---------- */
.fee-note {
  margin-top: 26px;
  display: flex; align-items: center; gap: 16px;
  background: var(--dot-wash);
  border-radius: var(--r-l);
  padding: 22px 26px;
}
.fee-note .fee-ico { flex: none; line-height: 0; }
.fee-note p { font-size: 14.5px; line-height: 1.6; color: var(--ink-2); }
.fee-note p strong { color: var(--dot-ink); font-weight: 700; }

/* 후원 안내(.support-section/.support-band …)는 tium.css로 승격(2026-07-18, pricing·subscribe 2개 페이지 재사용) */

/* ---------- 이용권 코드 등록 ---------- */
.code-section { margin-top: 26px; }
.code-box {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  background: var(--sheet);
  border-radius: var(--r-l);
  box-shadow: var(--lift-1);
  padding: 24px 26px;
}
.code-copy { min-width: 0; }
.code-desc { margin-top: 6px; font-size: 13.5px; line-height: 1.55; color: var(--ink-3); }
.code-box .code-redeem { flex: none; width: 340px; max-width: 100%; }
@media (max-width: 640px) {
  .code-box { flex-direction: column; align-items: stretch; gap: 16px; padding: 22px 20px; }
  .code-box .code-redeem { width: auto; }
}

/* ---------- 비교표 ---------- */
.cmp-section { margin-top: 64px; }
.cmp-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--r-l);
  box-shadow: var(--lift-1);
  background: var(--sheet);
}
.cmp-table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-size: 14px;
}
.cmp-table th, .cmp-table td {
  padding: 15px 18px;
  border-bottom: 1px solid var(--line);
  text-align: center;
  vertical-align: middle;
}
.cmp-table thead th { border-bottom: 1px solid var(--line-strong); }
.cmp-table tbody tr:last-child td { border-bottom: 0; }
.cmp-table .cmp-row-head {
  text-align: left; font-weight: 600; color: var(--ink);
  white-space: nowrap;
}
.cmp-plan { font-size: 16px; font-weight: 750; letter-spacing: -0.02em; color: var(--ink); }
.cmp-plan-price { margin-top: 3px; font-size: 12px; font-weight: 500; color: var(--ink-3); }
.cmp-check { color: var(--dot); line-height: 0; }
.cmp-dash { color: var(--ink-4); font-weight: 700; }
.cmp-fee { font-weight: 750; color: var(--dot-ink); letter-spacing: -0.01em; }
.cmp-soon {
  display: inline-block; margin-left: 6px;
  font-size: 11px; font-weight: 650; color: var(--amber); white-space: nowrap;
}

/* 추천(Plus) 열 강조 · 준비 중(Pro) 열 톤다운 */
.cmp-table .col-hl { background: var(--dot-wash); }
.cmp-table thead .col-hl .cmp-plan { color: var(--dot-ink); }
.cmp-table .col-soon .cmp-plan { color: var(--ink-3); }
.cmp-table .col-soon .cmp-plan-price { color: var(--amber); }

/* 비교표 각주 */
.cmp-foot {
  margin-top: 14px;
  font-size: 12.5px; line-height: 1.6; color: var(--ink-4);
}

/* 법적 안내 링크 */
.legal-links {
  margin-top: 40px;
  display: flex; justify-content: center; align-items: center;
  flex-wrap: wrap; gap: 10px;
  font-size: 13px;
}
.legal-links a { color: var(--ink-3); text-decoration: none; }
.legal-links a:hover { text-decoration: underline; }
.legal-links span { color: var(--ink-4); }

/* ---------- FAQ ---------- */
.pricing-faq-section { margin-top: 64px; }
.pricing-faq { margin-top: 24px; }

/* ---------- 마무리 CTA ---------- */
.pricing-cta { margin-top: 64px; }

/* ---------- 반응형 ---------- */
@media (max-width: 900px) {
  .plan-grid { grid-template-columns: 1fr; gap: 18px; max-width: 480px; margin: 0 auto; }
  .plan-featured { order: -1; }
  .plan-tag { min-height: 0; }
}
@media (max-width: 640px) {
  .plan-section { margin-top: 32px; }
  .cmp-section, .pricing-faq-section, .pricing-cta { margin-top: 48px; }
  .fee-note { flex-direction: column; align-items: flex-start; gap: 12px; padding: 20px; }
}