/* =========================================================
   입고관리 카카오톡 알림 정기구독 (PILLDOC-2285)
   Views/ReceivingManagement/Pricing · Subscribe · SubscribeResult · Subscription

   배치만 둡니다. 카드·버튼·표·체크는 components.css 의 pd- 컴포넌트입니다.
   클래스 이름에 pd- 를 쓰지 않습니다. pd- 는 시스템 것입니다.
   ========================================================= */

.page-rmplan {
  display: flex;
  flex-direction: column;
  gap: var(--pd-space-10);
  padding-block: var(--pd-space-6) var(--pd-space-12);
}

/* style.css 의 `section { padding: 80px 0 }` 이 화면 안까지 닿습니다
   (page-point.css 22줄과 같은 이유). 여백은 위 gap 하나가 정합니다. */
.page-rmplan section { padding-block: 0; }

.page-rmplan__head {
  display: flex;
  flex-direction: column;
  gap: var(--pd-space-2);
  margin-bottom: var(--pd-space-5);
}
.page-rmplan__desc {
  font-size: 14px;
  line-height: 1.6;
  color: var(--pd-text-secondary);
  word-break: keep-all;
}

/* --- 요금 머리: 설명과 가격 상자를 나란히 --- */

/* 설명이 남는 폭을 갖고 가격 상자는 폭을 잡아 둡니다.
   768px 아래에서는 가격 상자를 설명 아래로 내립니다(아래 미디어쿼리). */
.page-rmplan__hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 360px);
  gap: var(--pd-space-8);
  align-items: start;
}
.page-rmplan__lead {
  display: flex;
  flex-direction: column;
  gap: var(--pd-space-4);
}
.page-rmplan__lead p {
  font-size: 16px;
  line-height: 1.7;
  color: var(--pd-text-secondary);
  word-break: keep-all;
}

.page-rmplan__price-card { padding: var(--pd-space-6); }
.page-rmplan__price-card > * + * { margin-top: var(--pd-space-4); }

.page-rmplan__price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 2px var(--pd-space-2);
  font-size: 28px;
  font-weight: var(--pd-weight-bold);
  color: var(--pd-text);
}
.page-rmplan__price .t-unit { font-size: 16px; color: var(--pd-text-secondary); }
.page-rmplan__price-note { font-size: 13px; color: var(--pd-text-muted); }

/* --- 알림 4종 --- */

/* 네 개를 2x2 로. 넉 칸 한 줄은 칸이 좁아 설명이 네 줄로 접힙니다.
   640px 아래는 한 칸. */
.page-rmplan__alerts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--pd-space-4);
}
.page-rmplan__alert {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--pd-space-2) var(--pd-space-4);
  padding: var(--pd-space-5);
}
.page-rmplan__alert-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--pd-radius-md);
  background: var(--pd-accent-subtle);
  color: var(--pd-accent-on-subtle);
}
.page-rmplan__alert-title { font-size: 16px; font-weight: var(--pd-weight-semibold); color: var(--pd-text); }
.page-rmplan__alert-desc {
  grid-column: 2;
  font-size: 14px;
  line-height: 1.6;
  color: var(--pd-text-secondary);
  word-break: keep-all;
}

/* --- 비교표 --- */

.page-rmplan .pd-table :is(th, td).page-rmplan__col { text-align: center; width: 120px; }

/* --- 결제·해지 안내 --- */

/* 라벨-값 줄. 라벨을 왼쪽 열에 세웁니다. 640px 아래는 라벨을 위로. */
.page-rmplan__terms {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr);
  gap: var(--pd-space-4) var(--pd-space-6);
  padding: var(--pd-space-6);
}
.page-rmplan__terms dt { font-size: 14px; font-weight: var(--pd-weight-semibold); color: var(--pd-text); }
.page-rmplan__terms dd {
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--pd-text-secondary);
  word-break: keep-all;
}

.page-rmplan__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pd-space-2) var(--pd-space-5);
  font-size: 14px;
}

/* --- 신청 화면 --- */

/* 읽는 폭으로 좁힙니다. 신청은 한 줄로 읽어 내려가는 화면이라 넓을 이유가 없습니다. */
.page-rmplan--narrow { max-width: var(--pd-read-w); }

.page-rmplan__summary {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr);
  gap: var(--pd-space-3) var(--pd-space-6);
  margin: 0;
}
.page-rmplan__summary dt { font-size: 14px; color: var(--pd-text-secondary); }
.page-rmplan__summary dd { margin: 0; font-size: 14px; font-weight: var(--pd-weight-semibold); color: var(--pd-text); }

.page-rmplan__agrees {
  display: flex;
  flex-direction: column;
  gap: var(--pd-space-3);
}
/* 동의 문장이 길어 두 줄이 됩니다. 체크 상자를 첫 줄에 맞춥니다. */
.page-rmplan__agrees .pd-check { align-items: flex-start; line-height: 1.6; }
.page-rmplan__agrees .pd-check > span:last-child { word-break: keep-all; }

.page-rmplan__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pd-space-3);
}
.page-rmplan__actions > .pd-btn { min-width: 160px; }

/* --- 결과·관리 화면 --- */

.page-rmplan__result {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--pd-space-4);
  padding: var(--pd-space-10) var(--pd-space-6);
  text-align: center;
}
.page-rmplan__result-icon > .pd-icon { width: 48px; height: 48px; }
.page-rmplan__result-icon--ok { color: var(--pd-success); }
.page-rmplan__result-icon--fail { color: var(--pd-danger); }
.page-rmplan__result p { font-size: 16px; line-height: 1.7; color: var(--pd-text-secondary); word-break: keep-all; }
.page-rmplan__result .page-rmplan__actions { justify-content: center; }

.page-rmplan__status {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--pd-space-2) var(--pd-space-3);
}

/* --- 좁은 화면 --- */

@media (max-width: 768px) {
  .page-rmplan__hero { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 640px) {
  .page-rmplan__alerts { grid-template-columns: minmax(0, 1fr); }

  .page-rmplan__terms,
  .page-rmplan__summary { grid-template-columns: minmax(0, 1fr); gap: var(--pd-space-1); }
  .page-rmplan__terms dd,
  .page-rmplan__summary dd { margin-bottom: var(--pd-space-3); }

  .page-rmplan .pd-table :is(th, td).page-rmplan__col { width: 72px; }
  .page-rmplan__actions > .pd-btn { flex: 1 1 100%; }
}