/* 구독 · 결제: 구독 뱃지, 플랜 선택 모달, 약관 동의, 설정의 현재 등급 표시 (ledger.css에서 분리) */

/* ── 구독 뱃지 (로그인 배지 대칭, 왼쪽) ── */
.sub-badge {
  position: absolute;
  left: 14px;
  bottom: calc(var(--nav-h) + var(--nav-sb) + 10px);
  z-index: 90;
  display: flex;
  align-items: center;
  border-radius: 999px;
  background: rgba(245,158,11,0.14);
  border: 1px solid rgba(245,158,11,0.38);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0.9;
}
.sub-badge[hidden] { display: none; }
.sub-badge-main {
  padding: 6px 10px 6px 14px;
  background: none; border: none;
  color: #d97706; font-size: 12px; font-weight: 700;
  font-family: inherit; cursor: pointer;
}
@media (prefers-color-scheme: dark) {
  .sub-badge { background: rgba(245,158,11,0.18); border-color: rgba(245,158,11,0.42); }
  .sub-badge-main { color: #fbbf24; }
}
:root[data-theme="dark"] .sub-badge { background: rgba(245,158,11,0.18); border-color: rgba(245,158,11,0.42); }
:root[data-theme="dark"] .sub-badge-main { color: #fbbf24; }
:root[data-theme="light"] .sub-badge-main { color: #d97706; }
.sub-badge-x {
  padding: 6px 10px 6px 0;
  background: none; border: none;
  color: var(--text3); font-size: 15px; line-height: 1;
  font-family: inherit; cursor: pointer;
}

.login-icons { display: flex; justify-content: center; padding: 10px 0 6px; }
.login-icon-btn {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  background: none; border: none; color: var(--text2); font-family: inherit; cursor: pointer;
}
.login-icon-btn:active span { transform: scale(0.96); }
#login-logout[hidden] { display: none; }
.login-icon-btn span {
  width: 54px; height: 54px; border-radius: 50%;
  background: #fff; border: 1px solid var(--border2);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}
.login-icon-btn svg { display: block; }
.login-icon-btn small { font-size: 11px; font-weight: 600; }
.login-soon { text-align: center; font-size: 12px; font-weight: 700; color: var(--accent2); margin-top: 4px; }
.login-note { font-size: 12px; color: var(--text3); line-height: 1.6; padding: 6px 4px 8px; text-align: center; }
.ps-src-btn:disabled { opacity: 0.5; cursor: default; }

.comm-sheet.itin-sheet { z-index: 301; max-height: 80vh; overflow-y: auto; }
.sns-itin-btn { border: none; font-family: inherit; cursor: pointer; }
.itin-head {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
  padding: 6px 4px 12px; font-size: 14px; color: var(--text);
}
.itin-range { font-size: 11px; color: var(--text3); }
.itin-summary {
  margin: 0 4px 12px; padding: 10px 12px; border-radius: 12px;
  background: var(--accent-bg); color: var(--text); font-size: 13px; line-height: 1.6;
}
.itin-row {
  display: flex; gap: 10px; padding: 10px 4px;
  border-top: 1px solid var(--border2);
}
.itin-when {
  width: 56px; flex-shrink: 0; text-align: center;
  font-size: 10px; font-weight: 700; color: var(--text3);
  font-variant-numeric: tabular-nums;
}
.itin-main { flex: 1; min-width: 0; }
.itin-cat { font-size: 11px; font-weight: 700; color: var(--text3); }
.itin-detail { font-size: 14px; color: var(--text); margin-top: 2px; word-break: break-word; }
.itin-note { font-size: 12px; color: var(--text2); margin-top: 3px; line-height: 1.5; white-space: pre-wrap; }
.itin-photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 8px; }
.itin-photo { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; background: var(--surface); }
.plan-note {
  margin-top: 14px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--surface);
  font-size: 11px;
  line-height: 1.6;
  color: var(--text3);
}
.plan-note-title {
  width: 100%; padding: 0; border: none; background: transparent; font: inherit;
  font-weight: 700; color: var(--text2); cursor: pointer; text-align: left;
  display: flex; align-items: center; justify-content: space-between;
  -webkit-tap-highlight-color: transparent;
}
.plan-note-title::after { content: '▾'; font-size: 12px; color: var(--text3); transition: transform 0.2s; }
.plan-note-title[aria-expanded="true"]::after { transform: rotate(180deg); }
.plan-note-body[hidden] { display: none; }
.plan-note-body { margin-top: 6px; }
.plan-note-body > div { margin-top: 5px; }
.share-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  padding: 4px 4px 12px;
}

/* ── 구독 플랜 모달 ── */
.sub-modal { padding-bottom: 20px; }
.sub-modal-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 4px 16px 0 20px;
}
.sub-modal-title { font-size: 16px; font-weight: 700; color: var(--text); margin: 0 0 3px; }
.sub-modal-desc  { font-size: 12px; color: var(--text2); margin: 0 0 14px; }
.sub-modal-close {
  flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface); border: none;
  color: var(--text2); font-size: 14px;
  cursor: pointer; font-family: inherit;
  transition: background 0.12s; -webkit-tap-highlight-color: transparent;
}
.sub-modal-close:active { background: var(--bg2); }

.sub-modal-plans {
  display: flex; gap: 10px;
  padding: 0 16px 14px;
}
.sub-plan-card {
  flex: 1; display: flex; flex-direction: column;
  padding: 14px 12px 12px;
  background: var(--surface); border: 1.5px solid var(--border2);
  border-radius: 16px; cursor: pointer; font-family: inherit;
  text-align: left; transition: border-color 0.15s, transform 0.12s;
  -webkit-tap-highlight-color: transparent;
}
.sub-plan-card:active { transform: scale(0.97); }
.sub-plan-card--hi {
  border-color: rgba(124,58,237,0.45);
  background: linear-gradient(160deg, rgba(124,58,237,0.12) 0%, var(--surface) 60%);
}
.sub-plan-top {
  display: flex; align-items: baseline;
  justify-content: space-between; gap: 4px; margin-bottom: 10px;
}
.sub-plan-name {
  font-size: 15px; font-weight: 800; color: var(--text);
}
.sub-plan-card--hi .sub-plan-name { color: var(--accent2); }
.sub-plan-price {
  font-size: 15px; font-weight: 800; color: var(--text);
  white-space: nowrap;
}
.sub-plan-price small { font-size: 10px; font-weight: 600; color: var(--text2); }
.sub-plan-features {
  list-style: none; margin: 0 0 12px; padding: 0;
  flex: 1;
}
.sub-plan-features li {
  font-size: 11px; color: var(--text2); line-height: 1.7;
  padding-left: 10px; position: relative;
}
.sub-plan-features li::before {
  content: '·'; position: absolute; left: 0; color: var(--text3);
}
/* 선택된 플랜 강조 */
.sub-plan-card--selected {
  border-color: var(--accent2) !important;
  box-shadow: 0 0 0 2px rgba(124,58,237,0.18);
}

/* 결제 버튼 행 */
.sub-pay-row {
  display: flex; gap: 10px;
  padding: 0 16px 12px;
}
.sub-pay-btn {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 7px;
  padding: 13px 8px; border-radius: 14px;
  font-size: 14px; font-weight: 700; font-family: inherit;
  cursor: pointer; transition: opacity 0.15s, transform 0.12s;
  -webkit-tap-highlight-color: transparent;
}
.sub-pay-btn:active { transform: scale(0.97); opacity: 0.85; }
.sub-pay-btn--toss {
  background: #0064ff; color: #fff; border: none;
}
.sub-pay-btn--stripe {
  background: #635bff; color: #fff; border: none;
}
.sub-pay-logo { font-size: 16px; line-height: 1; }

/* 구독 모달: 약관 동의 단계 */
.sub-consent-sum {
  display: flex; align-items: center; justify-content: space-between;
  margin: 0 16px 12px; padding: 12px 14px; border-radius: 14px;
  background: var(--accent-bg); border: 1px solid rgba(124,58,237,0.3);
  font-size: 14px; color: var(--text);
}
.sub-consent-sum span { font-size: 12px; color: var(--text2); font-weight: 600; }
.sub-consent-list { margin: 0 16px 10px; border: 1px solid var(--border2); border-radius: 14px; overflow: hidden; }
.sub-consent-row {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; font-size: 13px; color: var(--text);
  border-top: 1px solid var(--border); cursor: pointer;
}
.sub-consent-row:first-child { border-top: none; }
.sub-consent-row input { width: 18px; height: 18px; accent-color: var(--accent); flex-shrink: 0; }
.sub-consent-row span { flex: 1; }
.sub-consent-row em { font-style: normal; font-weight: 700; color: var(--accent2); margin-right: 4px; }
.sub-consent-all { font-weight: 700; background: var(--surface); }
.sub-consent-view {
  border: none; background: transparent; color: var(--text3);
  font-size: 12px; text-decoration: underline; cursor: pointer; font-family: inherit;
}
.sub-consent-note { margin: 0 20px 14px; font-size: 11.5px; line-height: 1.6; color: var(--text3); }
.sub-consent-actions { display: flex; gap: 10px; padding: 0 16px 4px; }
.sub-consent-back, .sub-consent-go {
  padding: 13px 8px; border-radius: 14px; font-size: 14px; font-weight: 700;
  font-family: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.sub-consent-back { flex: 1; background: transparent; border: 1px solid var(--border2); color: var(--text2); }
.sub-consent-go { flex: 2; border: none; background: var(--accent); color: #fff; transition: opacity 0.15s; }
.sub-consent-go:disabled { opacity: 0.35; cursor: not-allowed; }

/* 데스크톱: 구독 모달도 센터 다이얼로그 */
@media (min-width: 600px) {
  html:not(.is-pwa) #sub-modal {
    bottom: auto; top: 50%;
    max-width: 480px;
    border-radius: 24px; border-bottom: 1px solid var(--border2);
    padding-bottom: 24px;
    transform: translateX(-50%) translateY(calc(-50% + 32px));
    opacity: 0;
    transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.22s, visibility 0s linear 0.28s;
  }
  html:not(.is-pwa) #sub-modal.open {
    transform: translateX(-50%) translateY(-50%); opacity: 1; transition-delay: 0s;
  }
  .sub-modal-plans { gap: 14px; padding: 0 20px 16px; }
  .sub-plan-card { padding: 18px 16px 14px; }
}

/* 설정: 현재 등급 표시 */
.acct-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.plan-chips { display: inline-flex; gap: 4px; }
.plan-chip {
  font-family: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent;
  padding: 2px 8px; border-radius: 999px;
  font-size: 10px; font-weight: 800; letter-spacing: 0.03em;
  color: var(--text3); background: var(--surface);
  border: 1px solid var(--border2); opacity: 0.55;
  transition: all 0.2s;
}
.plan-chip--on {
  opacity: 1; color: #fff;
  background: var(--accent); border-color: var(--accent);
  box-shadow: 0 0 8px var(--accent-glow), 0 0 2px var(--accent2);
}
.plan-chip--on[data-plan="proplus"] {
  background: linear-gradient(90deg, #f59e0b, #ef4444); border-color: transparent;
  box-shadow: 0 0 8px rgba(245,158,11,0.55);
}
.plan-chip--on[data-plan="free"] { background: var(--text3); border-color: var(--text3); box-shadow: none; }