/* =====================================================
   Card Components
   ===================================================== */
.card {
  background: var(--color-bg-primary);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  transition: var(--transition-shadow);
}

.card:hover {
  box-shadow: var(--shadow-lg);
}

.card__header {
  padding: var(--spacing-6);
  border-bottom: 1px solid var(--color-border-light);
}

.card__body {
  padding: var(--spacing-6);
}

.card__footer {
  padding: var(--spacing-6);
  border-top: 1px solid var(--color-border-light);
  background: var(--color-bg-secondary);
}

.card--elevated {
  box-shadow: var(--shadow-xl);
}

.card--bordered {
  border: 1px solid var(--color-border-light);
  box-shadow: var(--shadow-sm);
}

/* Plan Card - 葬儀プラン用のカード */
.plan-card {
  background: var(--color-bg-primary);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  transition: var(--transition-all);
  position: relative;
  /* アニメーション前の初期状態 */
  opacity: 0;
  transform: translateY(20px);
}

.plan-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-2xl);
}

.plan-card--featured {
  border: 2px solid var(--color-accent-400);
}

.plan-card--featured::before {
  content: 'おすすめ';
  position: absolute;
  top: var(--spacing-4);
  right: var(--spacing-4);
  background: var(--color-accent-500);
  color: var(--color-text-inverse);
  padding: var(--spacing-1) var(--spacing-3);
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  z-index: 10;
}