/* ============================================================
   월 보관 구독 미리보기 전용 스타일
   index-monthly.html 에서만 로드 (실서비스 페이지 영향 없음)
   ============================================================ */

/* 단일 구독 카드 그리드: 3열 카드 대신 1열 중앙 정렬 */
.monthly-sub-grid {
  grid-template-columns: 1fr !important;
  max-width: 560px;
  margin: 0 auto;
}

/* 구독 카드: 내부 요소 세로 정렬로 버튼을 하단에 고정 */
.monthly-sub-card {
  display: flex;
  flex-direction: column;
}
.monthly-sub-card .price-breakdown-list {
  flex: 1;
}
.monthly-sub-card .btn {
  margin-top: auto;
}
.monthly-sub-card .price-amount {
  font-size: 2.6rem;
}

/* 구독 정책 세부 고지 박스 */
.monthly-sub-notice {
  margin: 14px 0 18px;
  padding: 12px 14px;
  background: #FFF7ED;
  border: 1px solid #FED7AA;
  border-radius: 10px;
  color: #7C2D12;
  font-size: 0.8rem;
  line-height: 1.6;
}

/* 매월 결제 강조 배지 (가격 옆 대형 표기) */
.monthly-pay-emphasis {
  display: inline-block;
  margin-left: 12px;
  padding: 7px 16px;
  background: #E05D26;
  color: #fff;
  font-size: 1.15rem;
  font-weight: 800;
  border-radius: 999px;
  vertical-align: middle;
  letter-spacing: -0.01em;
  box-shadow: 0 2px 8px rgba(224, 93, 38, 0.35);
}

/* 미리보기 상단 안내 배너 */
.monthly-preview-ribbon {
  background: #1e2b37;
  color: #fff;
  text-align: center;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 7px 12px;
}
.monthly-preview-ribbon::before {
  content: "🔎 ";
}

@media (max-width: 560px) {
  .monthly-sub-card .price-amount {
    font-size: 2.1rem;
  }
  .monthly-pay-emphasis {
    margin-left: 8px;
    margin-top: 8px;
    padding: 6px 13px;
    font-size: 0.95rem;
  }
}