.card {
  flex: 1 1 200px;
  max-width: 200px;
  opacity: 0;
  transform: translateY(40px);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  will-change: transform, opacity;
  border: 2px solid transparent; /* 기본 border */
}

/* 섹션 패딩 */
#cards-section {
  padding-top: 140px !important;
  padding-bottom: 140px !important;
}

/* 초입장 애니메이션 상태 */
.card.animate {
  animation: slideUp 0.6s ease-out forwards;
}

/* 애니메이션 종료 후 상태 */
.card.entered {
  opacity: 1;
  transform: translateY(0);
}

/* 입장 애니메이션 */
@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* hover 효과 */
.card:hover,
a:hover .card {
  transform: translateY(-5px);
}

/* 🔹 네온 색상별 */
.neon-blue {
  border-color: rgba(88, 101, 242, 0.8); /* #5865F2 */
  box-shadow: 
    0 0 6px rgba(88, 101, 242, 0.5),
    0 0 12px rgba(88, 101, 242, 0.4);
}
.neon-blue:hover {
  box-shadow: 
    0 0 8px rgba(88, 101, 242, 0.7),
    0 0 16px rgba(88, 101, 242, 0.5);
}

/* 네온 핑크 */
.neon-pink {
  border-color: rgba(255, 0, 255, 0.6);
  box-shadow: 
    0 0 6px rgba(255, 0, 255, 0.4),
    0 0 12px rgba(255, 0, 255, 0.3);
}
.neon-pink:hover {
  box-shadow: 
    0 0 8px rgba(255, 0, 255, 0.6),
    0 0 16px rgba(255, 0, 255, 0.4);
}

/* 네온 그린 */
.neon-green {
  border-color: rgba(0, 150, 128, 0.6);
  box-shadow: 
    0 0 6px rgba(0, 255, 128, 0.4),
    0 0 12px rgba(0, 255, 128, 0.3);
}
.neon-green:hover {
  box-shadow: 
    0 0 8px rgba(0, 255, 128, 0.6),
    0 0 16px rgba(0, 255, 128, 0.4);
}

/* 네온 옐로우 */
.neon-kakao {
  border: 2px solid #cecece; /* 어두운 회색 얇은 선 */
  border-radius: 0.375rem; /* Bootstrap 기본값 */
  background-color: #fff;
  position: relative;
  transition: box-shadow 0.3s, transform 0.3s;
  box-shadow:
    0 0 6px rgba(255, 235, 0, 0.8),
    0 0 12px rgba(255, 200, 0, 0.6);
}