/* static/css/pricing.css — 요금제 카드 (원본 globals.css pricing 블록 이식, 라이트 전용) */

/* ── 키프레임 ── */
@keyframes pricing-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes pricing-bg-breathe {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes pricing-glow-pulse { 0%, 100% { opacity: 0.75; } 50% { opacity: 1; } }
@keyframes pricing-bar-shimmer {
  0%   { background-position: 0% 0; }
  50%  { background-position: 100% 0; }
  100% { background-position: 0% 0; }
}

/* ── 레이아웃 ── */
.pricing-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px; max-width: 940px; margin-inline: auto;
}
.plan-card { position: relative; display: flex; flex-direction: column; border-radius: 16px; overflow: hidden; }
.plan-card-plain {
  border: 1px solid var(--border); background: var(--surface); box-shadow: var(--shadow-sm);
}
.plan-card-body { display: flex; flex-direction: column; flex: 1; padding: 24px; }
.plan-name { font-size: 20px; font-weight: 800; color: var(--text-primary); }
.plan-summary { font-size: 12px; color: var(--text-secondary); margin-top: 2px; }
.plan-price { margin-top: 16px; display: flex; align-items: flex-end; gap: 6px; }
.price-amt { font-size: 2.4rem; font-weight: 800; line-height: 1; color: var(--text-primary); }
.price-unit { font-size: 14px; color: var(--text-secondary); padding-bottom: 2px; }
.price-note { font-size: 12px; color: var(--text-secondary); margin-top: 8px; }
.plan-sep { height: 1px; background: var(--border); margin: 20px 0; }
.plan-feats { list-style: none; padding: 0; margin: 0 0 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.plan-feat { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: var(--text-secondary); }
.plan-feat-bullet { flex-shrink: 0; width: 16px; height: 16px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-top: 2px; }
.plan-feat-bullet-on { background: var(--accent-soft); color: var(--accent); }
.plan-feat-bullet-off { background: var(--surface-2); color: var(--text-secondary); }
.plan-feat-label { font-weight: 600; color: var(--text-primary); }
.plan-cta { width: 100%; height: 48px; border-radius: 12px; font-size: 14px; font-weight: 700; border: none; cursor: pointer; transition: all 150ms ease; }
.plan-cta-free { border: 1px solid var(--border); background: transparent; color: var(--text-primary); }
.plan-cta-free:hover { background: var(--surface-2); }
.plan-cta-paid { background: var(--accent); color: #fff; }
.plan-cta-paid:hover { background: var(--accent-hover); }
.plan-cta:active:not(:disabled) { transform: scale(0.98); }
.plan-cta:disabled { cursor: default; }

/* ── Billing 토글 ── */
.pricing-toggle { display: inline-flex; padding: 4px; border-radius: 9999px; background: var(--surface-2); margin: 0 auto 28px; }
.pricing-toggle-btn { border: none; background: transparent; padding: 8px 18px; border-radius: 9999px; font-size: 13px; font-weight: 600; color: var(--text-secondary); cursor: pointer; transition: all 150ms ease; }
.pricing-toggle-btn.active { background: var(--surface); color: var(--accent); box-shadow: var(--shadow-sm); }

/* cycle 표시 전환 */
.pricing-grid[data-cycle="monthly"] .cycle-annual { display: none; }
.pricing-grid[data-cycle="annual"] .cycle-monthly { display: none; }

/* ── Starter 카드: 상단 shimmer 바 ── */
.pricing-starter-bar {
  height: 4px; width: 100%;
  background: linear-gradient(90deg, var(--accent) 0%, #a78bfa 50%, var(--accent) 100%);
  background-size: 200% 100%;
  animation: pricing-bar-shimmer 3s ease-in-out infinite;
}

/* ── Pro 카드: 회전 링 ── */
.pricing-pro-ring {
  position: absolute; inset: -50%; width: 200%; height: 200%;
  animation: pricing-spin 5s linear infinite; pointer-events: none;
  background: conic-gradient(from 0deg, #c4b5fd 0deg, #7c3aed 120deg, #a78bfa 240deg, #c4b5fd 360deg);
}
.pricing-pro-body { position: relative; z-index: 1; margin: 1.5px; border-radius: 15px; overflow: hidden; display: flex; flex-direction: column; flex: 1; }
.pricing-pro-bg {
  position: relative; display: flex; flex-direction: column; flex: 1; padding: 24px; overflow: hidden; border-radius: 15px;
  background-size: 300% 300%; animation: pricing-bg-breathe 10s ease-in-out infinite;
  background-image: linear-gradient(155deg, #faf9ff 0%, #ede9fe 30%, #f5f3ff 60%, #ddd6fe 85%, #faf9ff 100%);
}
.pricing-pro-badge {
  display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 900; letter-spacing: 0.12em;
  padding: 4px 10px; border-radius: 9999px;
  background: rgba(124, 58, 237, 0.10); border: 1px solid rgba(124, 58, 237, 0.28); color: #5b21b6;
}
.pricing-pro-name { color: #0f172a; }
.pricing-pro-desc { color: #64748b; }
.pricing-pro-price { color: #0f172a; }
.pricing-pro-price-unit { color: #64748b; }
.pricing-pro-sep { background: rgba(0, 0, 0, 0.08); }
.pricing-pro-feat-label { color: #0f172a; }
.pricing-pro-feat-val { color: #475569; }
.pricing-pro-bullet-on { background: rgba(59, 130, 246, 0.16); color: #3b82f6; }
.pricing-pro-bullet-off { background: rgba(15, 23, 42, 0.06); color: #94a3b8; }
.pricing-glow { position: absolute; border-radius: 50%; pointer-events: none; }
.pricing-glow-blue {
  top: 24px; right: 24px; width: 176px; height: 176px; filter: blur(30px);
  animation: pricing-glow-pulse 4s ease-in-out infinite;
  background: radial-gradient(circle, rgba(124, 58, 237, 0.18) 0%, transparent 70%);
}
.pricing-glow-purple {
  bottom: 24px; left: 24px; width: 128px; height: 128px; filter: blur(22px);
  animation: pricing-glow-pulse 4s ease-in-out infinite 2s;
  background: radial-gradient(circle, rgba(167, 139, 250, 0.16) 0%, transparent 70%);
}
.pricing-pro-cta {
  color: #fff; background: linear-gradient(135deg, #7c3aed 0%, #5b21b6 100%);
  box-shadow: 0 4px 20px rgba(124, 58, 237, 0.30);
}
.pricing-pro-content { position: relative; z-index: 1; display: flex; flex-direction: column; flex: 1; }

/* ── prefers-reduced-motion ── */
@media (prefers-reduced-motion: reduce) {
  .pricing-pro-ring, .pricing-pro-bg, .pricing-glow-blue, .pricing-glow-purple, .pricing-starter-bar {
    animation: none !important;
  }
  .pricing-pro-bg {
    background-image: linear-gradient(155deg, #faf9ff 0%, #ede9fe 50%, #f5f3ff 100%);
    background-size: 100% 100%;
  }
  .pricing-starter-bar { background: linear-gradient(90deg, var(--accent), #a78bfa); background-size: 100% 100%; }
}