/* 구독 관리 (subscribe.html)
   내 구독 상태·결제수단·결제 내역을 한 화면에서 관리한다. 카드 컨테이너는 tium.css .card 재사용,
   결제 내역 행(.pay-row …)·후원 밴드(.support-band)·이용권 배지(.plan-badge)도 tium.css 공용을 그대로 쓴다. */

.sub-stack { display: grid; gap: 16px; margin-top: 8px; }

/* 카드 공통 */
.sub-card { padding: 24px 28px; }
.sub-card-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.sub-card-head .sub-ico { flex: none; line-height: 0; }
.sub-card-title { font-size: 17px; font-weight: 700; color: var(--ink); letter-spacing: -0.01em; }
.sub-card-sub { font-size: 12.5px; color: var(--ink-3); margin-top: 2px; }

/* 1. 현재 구독 */
.sub-now-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sub-now-name { font-size: 16px; font-weight: 700; color: var(--ink); }
.sub-now-desc { font-size: 14px; line-height: 1.6; color: var(--ink-2); margin-top: 12px; }
.sub-now-note { font-size: 13px; color: var(--amber); margin-top: 8px; }
.sub-now-actions { margin-top: 18px; display: flex; gap: 10px; flex-wrap: wrap; }

/* 2. Plus 시작 */
.sub-start.is-emphasized { box-shadow: inset 0 0 0 2px var(--dot), var(--lift-1); }
.sub-benefits { list-style: none; display: grid; gap: 10px; margin: 2px 0; }
.sub-benefits li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: var(--ink-2); line-height: 1.5; }
.sub-benefits li .sub-benefit-ico { flex: none; line-height: 0; margin-top: 1px; }
.sub-price-line { font-size: 13.5px; color: var(--ink-2); margin: 16px 0 4px; line-height: 1.55; }
.sub-price-line strong { color: var(--dot-ink); font-weight: 700; }

/* 청약철회 제한 고지 — tium.css .info-note 재사용, 링크만 보강 */
.sub-card .info-note { margin: 14px 0; }
.sub-card .info-note a { color: var(--dot-ink); font-weight: 600; text-decoration: underline; }

/* 필수 동의 체크박스 — 네이티브 checkbox + accent-color(인라인 style 대체) */
.sub-agree { display: flex; align-items: flex-start; gap: 10px; margin: 14px 0 18px; cursor: pointer; font-size: 13.5px; color: var(--ink-2); line-height: 1.55; }
.sub-agree input { flex: none; width: 18px; height: 18px; margin-top: 1px; accent-color: var(--dot); cursor: pointer; }
.sub-agree a { color: var(--dot-ink); font-weight: 600; text-decoration: underline; }

.sub-caption { font-size: 12.5px; color: var(--ink-4); margin-top: 12px; line-height: 1.5; }

/* 3. 결제 수단 */
.sub-pay-method { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: var(--r-m); background: var(--well); }
.sub-pay-method .sub-pm-ico { flex: none; line-height: 0; }
.sub-pm-main { flex: 1; min-width: 0; }
.sub-pm-card { font-size: 14.5px; font-weight: 650; color: var(--ink); }
.sub-pm-date { font-size: 12px; color: var(--ink-3); margin-top: 2px; }
.sub-pm-empty { font-size: 14px; color: var(--ink-3); }
.sub-pay-body { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.sub-pay-body .sub-pay-method { flex: 1; min-width: 240px; }

/* 4. 결제 내역 (.pay-row 재사용) */
.sub-pays { display: grid; gap: 4px; }

/* 5. Pro 안내 */
.sub-pro .sub-benefits li { color: var(--ink-3); }

@media (max-width: 640px) {
  .sub-card { padding: 20px; }
  .sub-pay-body .btn { width: 100%; }
}