/* premium.css — /premium 소개 페이지와 잠긴 기능 카드(_premium_gate.html). 색은 전부 tokens.css. 390px 에서 가로 스크롤 없게. */
.premium-page { max-width: 760px; }
.premium-page h1 { font-size: 24px; line-height: 1.3; color: var(--text-strong); }
.pm-lead { margin-top: 6px; font-size: 14px; color: var(--text-primary); word-break: keep-all; }
.pm-me { margin-top: 10px; font-size: 13px; color: var(--text-secondary); }
.pm-me strong { color: var(--accent-text); }
.pm-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
.pm-card { padding: 14px 16px; border-radius: var(--radius-lg); background: var(--bg-card); border: 1px solid var(--border); }
.pm-card-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pm-card h2 { font-size: 15px; font-weight: 700; color: var(--text-strong); }
.pm-soon { margin-left: auto; padding: 1px 8px; border-radius: 999px; font-size: 11px; background: var(--bg-inset); color: var(--text-secondary); border: 1px solid var(--border); }
.pm-avail { margin-left: auto; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; background: var(--good-bg); color: var(--good); }
.pm-card-link { display: inline-flex; align-items: center; min-height: 32px; margin-top: 8px; font-size: 13px; font-weight: 600; color: var(--accent-text); text-decoration: none; }
.pm-card-link:hover { text-decoration: underline; }
.pm-card p { margin-top: 8px; font-size: 13px; color: var(--text-secondary); word-break: keep-all; }
.pm-card .pm-stat { font-weight: 600; color: var(--text-primary); }
.pm-note { margin-top: 16px; font-size: 12px; color: var(--text-muted); }

.pm-gate { max-width: 440px; margin: 32px auto; padding: 28px 24px; text-align: center; border-radius: var(--radius-lg); background: var(--bg-card); border: 1px solid var(--border); }
.pm-gate-icon { font-size: 32px; line-height: 1; }
.pm-gate h1 { margin-top: 10px; font-size: 20px; }
.pm-gate-desc { margin-top: 6px; font-size: 14px; color: var(--text-primary); word-break: keep-all; }
.pm-gate-invite { margin-top: 12px; font-size: 13px; color: var(--text-secondary); word-break: keep-all; }
.pm-gate-link { display: inline-flex; align-items: center; min-height: 36px; margin-top: 14px; padding: 0 14px; border-radius: 999px; font-size: 13px; font-weight: 600; background: var(--accent-soft); color: var(--accent-text); text-decoration: none; }
.pm-gate-link:hover { background: var(--bg-hover); }

@media (max-width: 600px) {
    .pm-grid { grid-template-columns: minmax(0, 1fr); }
    .pm-gate { margin: 16px auto; padding: 22px 16px; }
}