/* pricing.css — 요금제 화면(`/pricing`) 한 장이 쓴다.
 *
 * 로드 순서: tokens.css → base.css → **pages/pricing.css**
 * ⚠ 셸이 없다 (로그인 전에도 열려야 한다). `landing.css` 와 같은 처지.
 *
 * 공용: .num (base.css) · .ls-foot 계열 (base.css 의 법적 고지 푸터)
 *
 * ★ 색 리터럴을 쓰지 않는다 (금지 6). 전부 `var(--…)` 다.
 * ★ 초록·보라·파랑을 쓰지 않는다 (DESIGN-SYSTEM 5색 원칙).
 * ⚠ 레몬 배경 위 글자는 잉크다 — 흰 글자를 쓰지 않는다 (11장).
 */

.pr-body {
  background: var(--bg);
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

/* ══ 머리 ═════════════════════════════════════════════════════ */
.pr-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  max-width: 1000px;
  width: 100%;
  margin: 0 auto;
  padding: 18px 20px;
}
/* ⚠ 로고에 노란 글자가 있다 — **흰 패널 위에만** 올린다 (DESIGN-SYSTEM 4장) */
.pr-brand {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 12px;
  background: var(--white);
}
.pr-brand img { display: block; height: auto; }

.pr-login {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink);
  padding: 9px 16px;
  border-radius: 12px;
  background: var(--lemon);
  text-decoration: none;
}
.pr-login:hover { background: var(--amber); }

/* ══ 본문 ═════════════════════════════════════════════════════ */
.pr-main {
  flex: 1;
  max-width: 1000px;
  width: 100%;
  margin: 0 auto;
  padding: 8px 20px 56px;
}

.pr-hero { padding: 28px 0 8px; }
.pr-headline {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.35;
  color: var(--ink);
}
.pr-subhead {
  margin-top: 10px;
  font-size: 15px;
  color: var(--sub-strong);
  line-height: 1.7;
}

.pr-sec { margin-top: 36px; }
.pr-sec-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 14px;
}

/* 결제 준비 전 안내. ★ 겁주지 않는다 — 고장이 아니라 순서다 */
.pr-note {
  margin-bottom: 14px;
  padding: 12px 16px;
  border-radius: 14px;
  background: var(--lemon-soft);
  color: var(--deep-amber);
  font-size: 13.5px;
  line-height: 1.6;
}

/* ══ 플랜 카드 셋 ═════════════════════════════════════════════
   ⚠ `minmax(0, 1fr)` 이다. `1fr` 만 쓰면 긴 한도 문구가 칸을 밀어낸다
     (`test_grid_children_shrink.py` 가 지키는 규칙과 같은 것). */
.pr-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.pr-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--pad-card);
}
/* 무료 카드는 한 톤 낮춘다 — 파는 것은 유료 쪽이다 */
.pr-card-free { background: var(--icon-bg); }

.pr-plan-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--sub-strong);
}
.pr-price {
  margin-top: 8px;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.pr-per {
  margin-left: 4px;
  font-size: 14px;
  font-weight: 600;
  color: var(--sub);
}
.pr-tax {
  margin-top: 4px;
  font-size: 12.5px;
  color: var(--sub);
}

.pr-feat {
  margin-top: 18px;
  /* ⚠ 아래 여백이 필요하다. `.pr-cta` 가 `margin-top: auto` 라
       카드가 꽉 찬 경우(무료 안내가 없는 유료 카드) 붙어 버린다. */
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 13.5px;
  color: var(--sub-strong);
  line-height: 1.6;
}
.pr-feat li { position: relative; padding-left: 14px; }
/* ⚠ 체크 아이콘을 쓰지 않는다 — 「전부 포함」으로 읽힌다. 점 하나면 된다 */
.pr-feat li::before {
  content: "";
  position: absolute;
  left: 0; top: 9px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--amber);
}

.pr-free-note {
  margin-top: 14px;
  margin-bottom: 20px;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--sub);
}

/* ★ `margin-top: auto` — 카드마다 한도 줄 수가 달라도 **단추 높이가
     맞는다.** 카드가 flex column 이라 남는 공간을 여기서 다 먹는다. */
.pr-cta {
  display: block;
  margin-top: auto;
  text-align: center;
  padding: 12px 16px;
  border-radius: 14px;
  background: var(--lemon);
  color: var(--ink);            /* 레몬 위는 잉크다 (11장) */
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}
.pr-cta:hover { background: var(--amber); }
.pr-cta-soft {
  background: var(--white);
  border: 1px solid var(--line);
  color: var(--sub-strong);
}
.pr-cta-soft:hover { background: var(--white); border-color: var(--sub); }
/* 결제 키가 없을 때. ⚠ `<a>` 가 아니라 `<span>` 이라 hover 도 커서도 없다 —
     **누를 수 있는 것처럼 보이지 않게** 한다 (`billing.css` 의 `.act-blocked`
     와 같은 판단). */
.pr-cta-off { background: var(--icon-bg); color: var(--sub); cursor: default; }

/* ══ 결제 · 해지 · 환불 ═══════════════════════════════════════
   ⚠⚠ 토스 심사가 보는 자리다. 작게 접어 두지 않는다 — 본문과 같은 크기다. */
.pr-terms {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 8px var(--pad-card);
}
.pr-term-row {
  display: grid;
  grid-template-columns: 128px minmax(0, 1fr);
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}
.pr-term-row:last-child { border-bottom: 0; }
.pr-term-row dt {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink);
}
.pr-term-row dd {
  font-size: 13.5px;
  color: var(--sub-strong);
  line-height: 1.75;
}

.pr-more-line { margin-top: 16px; }
.pr-more {
  font-size: 14px;
  font-weight: 700;
  color: var(--deep-amber);
  text-decoration: none;
}
.pr-more:hover { text-decoration: underline; }

/* ══ 좁은 화면 ════════════════════════════════════════════════ */
@media (max-width: 780px) {
  .pr-grid { grid-template-columns: minmax(0, 1fr); }
  .pr-headline { font-size: 25px; }
  .pr-term-row { grid-template-columns: minmax(0, 1fr); gap: 6px; }
}