/**
 * 멤버십 플랜 공유 테마 스타일
 *
 * .membership-{plan}: 배지 스타일 (MembershipBadge, PaymentDetails, SubscriptionSuccess)
 * .plan-card.{plan}-plan: 카드 스타일 (SettingsBilling)
 * @keyframes: 공통 애니메이션
 * .dark-only: 다크모드
 */

/* ===== Membership Badge 플랜별 색상 ===== */

/* Free 등급 - 기본 회색 */
.membership-free {
  color: #6c757d;
  background: linear-gradient(135deg, #f8f9fa, #e9ecef);
  border: 1px solid #dee2e6;
}

.membership-free:hover {
  box-shadow: 0 4px 12px rgba(108, 117, 125, 0.2);
}

/* Go 등급 - 녹색 그라데이션 (무료 + 실전 운용) */
.membership-go {
  color: #ffffff;
  background: linear-gradient(135deg, #28a745, #20c997);
  border: 1px solid #28a745;
  animation: goPulse 2.5s ease-in-out infinite;
}

.membership-go:hover {
  box-shadow: 0 4px 16px rgba(40, 167, 69, 0.4);
  background: linear-gradient(135deg, #20c997, #28a745);
}

/* Plus 등급 - 파란색 그라데이션 */
.membership-plus {
  color: #ffffff;
  background: linear-gradient(135deg, #007bff, #0056b3);
  border: 1px solid #0056b3;
}

.membership-plus:hover {
  box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3);
  background: linear-gradient(135deg, #0056b3, #004085);
}

/* Pro 등급 - 보라색 그라데이션 + 약간의 반짝임 */
.membership-pro {
  color: #ffffff;
  background: linear-gradient(135deg, #6f42c1, #5a32a3);
  border: 1px solid #5a32a3;
  position: relative;
}

.membership-pro::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    45deg,
    transparent,
    rgba(255, 255, 255, 0.1),
    transparent
  );
  transform: rotate(45deg);
  transition: all 0.6s ease;
  opacity: 0;
}

.membership-pro:hover {
  box-shadow: 0 4px 12px rgba(111, 66, 193, 0.4);
  background: linear-gradient(135deg, #5a32a3, #4c2a8a);
}

.membership-pro:hover::before {
  opacity: 1;
  animation: shimmer 1.5s ease-in-out;
}

/* Ultra 등급 - 금색 그라데이션 + 강한 반짝임 */
.membership-ultra {
  color: #ffffff;
  background: linear-gradient(135deg, #ffd700, #ffb347, #ff6b35);
  border: 1px solid #ffd700;
  position: relative;
  overflow: hidden;
  animation: ultraGlow 2s ease-in-out infinite alternate;
}

.membership-ultra::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    45deg,
    transparent,
    rgba(255, 255, 255, 0.3),
    transparent
  );
  transform: rotate(45deg);
  animation: ultraShimmer 2s ease-in-out infinite;
}

.membership-ultra::after {
  content: "\2728";
  position: absolute;
  top: -5px;
  right: -5px;
  font-size: 0.7rem;
  animation: sparkle 1.5s ease-in-out infinite;
}

.membership-ultra:hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 6px 20px rgba(255, 215, 0, 0.5);
  background: linear-gradient(135deg, #ffb347, #ff6b35, #ffd700);
}

/* Admin 등급 - 검은색/빨간색 그라데이션 + 강력한 글로우 효과 */
.membership-admin {
  color: #ffffff;
  background: linear-gradient(135deg, #1a1a1a, #2d1b1b, #1a1a1a);
  border: 2px solid #ff0000;
  position: relative;
  overflow: hidden;
  animation: adminPulse 2s ease-in-out infinite;
  box-shadow: 0 0 20px rgba(255, 0, 0, 0.5), 0 0 40px rgba(255, 0, 0, 0.3);
}

.membership-admin::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    45deg,
    transparent,
    rgba(255, 0, 0, 0.2),
    transparent,
    rgba(255, 255, 255, 0.1),
    transparent
  );
  transform: rotate(45deg);
  animation: adminShimmer 3s ease-in-out infinite;
}

.membership-admin::after {
  content: "\26A1";
  position: absolute;
  top: -8px;
  right: -8px;
  font-size: 0.8rem;
  animation: adminSpark 1.5s ease-in-out infinite;
  filter: drop-shadow(0 0 4px rgba(255, 0, 0, 0.8));
}

.membership-admin:hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 0 30px rgba(255, 0, 0, 0.7), 0 0 60px rgba(255, 0, 0, 0.4),
    0 8px 24px rgba(0, 0, 0, 0.3);
  background: linear-gradient(135deg, #2d1b1b, #1a1a1a, #2d1b1b);
  border-color: #ff3333;
}

/* ===== 다크 모드 - Membership Badge ===== */

.dark-only .membership-free {
  color: #adb5bd;
  background: linear-gradient(135deg, #343a40, #495057);
  border-color: #495057;
}

.dark-only .membership-go {
  background: linear-gradient(135deg, #1e7b34, #17a2b8);
  border-color: #1e7b34;
  box-shadow: 0 2px 8px rgba(40, 167, 69, 0.4);
}

.dark-only .membership-plus {
  background: linear-gradient(135deg, #0d6efd, #0a58ca);
  border-color: #0a58ca;
}

.dark-only .membership-pro {
  background: linear-gradient(135deg, #6f42c1, #5a32a3);
  border-color: #5a32a3;
}

.dark-only .membership-ultra {
  background: linear-gradient(135deg, #ffd700, #ffb347, #ff6b35);
  border-color: #ffd700;
}

.dark-only .membership-admin {
  background: linear-gradient(135deg, #0a0a0a, #1a0f0f, #0a0a0a);
  border-color: #ff3333;
  box-shadow: 0 0 25px rgba(255, 0, 0, 0.6), 0 0 50px rgba(255, 0, 0, 0.4);
}

/* ===== Plan Card 플랜별 색상 (SettingsBilling) ===== */

.plan-card.free-plan {
  background: linear-gradient(135deg, #f8f9fa, #e9ecef);
  border-color: #dee2e6 !important;
  color: #6c757d;
}

.plan-card.go-plan {
  background: linear-gradient(135deg, #28a745, #20c997);
  border-color: #28a745 !important;
  color: #ffffff;
  animation: goPulse 2.5s ease-in-out infinite;
}

.plan-card.go-plan:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(40, 167, 69, 0.4);
  background: linear-gradient(135deg, #20c997, #28a745);
}

.plan-card.plus-plan {
  background: linear-gradient(135deg, #007bff, #0056b3);
  border-color: #0056b3 !important;
  color: #ffffff;
}

.plan-card.pro-plan {
  background: linear-gradient(135deg, #6f42c1, #5a32a3);
  border-color: #5a32a3 !important;
  color: #ffffff;
  position: relative;
}

.plan-card.pro-plan::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    45deg,
    transparent,
    rgba(255, 255, 255, 0.1),
    transparent
  );
  transform: rotate(45deg);
  transition: all 0.6s ease;
  opacity: 0;
}

.plan-card.pro-plan:hover::before {
  opacity: 1;
  animation: shimmer 1.5s ease-in-out;
}

.plan-card.ultra-plan {
  background: linear-gradient(135deg, #ffd700, #ffb347, #ff6b35);
  border-color: #ffd700 !important;
  color: #ffffff;
  position: relative;
  animation: ultraGlow 2s ease-in-out infinite alternate;
}

.plan-card.ultra-plan::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    45deg,
    transparent,
    rgba(255, 255, 255, 0.3),
    transparent
  );
  transform: rotate(45deg);
  animation: ultraShimmer 2s ease-in-out infinite;
}

.plan-card.ultra-plan::after {
  content: "\2728";
  position: absolute;
  top: -5px;
  right: -5px;
  font-size: 0.7rem;
  animation: sparkle 1.5s ease-in-out infinite;
}

.plan-card.ultra-plan:hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 6px 20px rgba(255, 215, 0, 0.5);
  background: linear-gradient(135deg, #ffb347, #ff6b35, #ffd700);
}

.plan-card.admin-plan {
  color: #ffffff;
  background: linear-gradient(135deg, #1a1a1a, #2d1b1b, #1a1a1a);
  border: 2px solid #ff0000 !important;
  position: relative;
  animation: adminPulse 2s ease-in-out infinite;
  box-shadow: 0 0 20px rgba(255, 0, 0, 0.5), 0 0 40px rgba(255, 0, 0, 0.3);
}

.plan-card.admin-plan::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    45deg,
    transparent,
    rgba(255, 0, 0, 0.2),
    transparent,
    rgba(255, 255, 255, 0.1),
    transparent
  );
  transform: rotate(45deg);
  animation: adminShimmer 3s ease-in-out infinite;
}

.plan-card.admin-plan::after {
  content: "\26A1";
  position: absolute;
  top: -5px;
  right: -5px;
  font-size: 0.7rem;
  animation: adminSpark 1.5s ease-in-out infinite;
  filter: drop-shadow(0 0 4px rgba(255, 0, 0, 0.8));
}

.plan-card.admin-plan:hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 0 30px rgba(255, 0, 0, 0.7), 0 0 60px rgba(255, 0, 0, 0.4),
    0 8px 24px rgba(0, 0, 0, 0.3);
  background: linear-gradient(135deg, #2d1b1b, #1a1a1a, #2d1b1b);
  border-color: #ff3333;
}

/* ===== 다크 모드 - Plan Card ===== */

.dark-only .plan-card.free-plan {
  background: linear-gradient(135deg, #495057, #343a40);
  border-color: #6c757d !important;
  color: #adb5bd;
}

.dark-only .plan-card.go-plan {
  background: linear-gradient(135deg, #1e7b34, #17a2b8);
  border-color: #1e7b34 !important;
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(40, 167, 69, 0.4);
}

.dark-only .plan-card.plus-plan {
  background: linear-gradient(135deg, #0056b3, #004085);
  border-color: #004085 !important;
  color: #ffffff;
}

.dark-only .plan-card.pro-plan {
  background: linear-gradient(135deg, #5a32a3, #4c2a8a);
  border-color: #4c2a8a !important;
  color: #ffffff;
}

.dark-only .plan-card.ultra-plan {
  background: linear-gradient(135deg, #ffb347, #ff6b35, #ffd700);
  border-color: #ffd700 !important;
  color: #ffffff;
}

.dark-only .plan-card.admin-plan {
  background: linear-gradient(135deg, #0a0a0a, #1a0f0f, #0a0a0a);
  border-color: #ff3333 !important;
  box-shadow: 0 0 25px rgba(255, 0, 0, 0.6), 0 0 50px rgba(255, 0, 0, 0.4);
}

/* ===== 공통 애니메이션 키프레임 ===== */

@keyframes goPulse {
  0%,
  100% {
    box-shadow: 0 2px 8px rgba(40, 167, 69, 0.3);
  }
  50% {
    box-shadow: 0 2px 12px rgba(40, 167, 69, 0.5);
  }
}

@keyframes shimmer {
  0% {
    transform: translateX(-100%) translateY(-100%) rotate(45deg);
  }
  100% {
    transform: translateX(100%) translateY(100%) rotate(45deg);
  }
}

@keyframes ultraShimmer {
  0% {
    transform: translateX(-100%) translateY(-100%) rotate(45deg);
  }
  50% {
    transform: translateX(0%) translateY(0%) rotate(45deg);
  }
  100% {
    transform: translateX(100%) translateY(100%) rotate(45deg);
  }
}

@keyframes ultraGlow {
  0% {
    box-shadow: 0 2px 8px rgba(255, 215, 0, 0.3);
  }
  100% {
    box-shadow: 0 2px 8px rgba(255, 215, 0, 0.6);
  }
}

@keyframes sparkle {
  0%,
  100% {
    opacity: 0.5;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.2);
  }
}

@keyframes adminPulse {
  0%,
  100% {
    box-shadow: 0 0 20px rgba(255, 0, 0, 0.5), 0 0 40px rgba(255, 0, 0, 0.3);
  }
  50% {
    box-shadow: 0 0 30px rgba(255, 0, 0, 0.7), 0 0 60px rgba(255, 0, 0, 0.5);
  }
}

@keyframes adminShimmer {
  0% {
    transform: translateX(-100%) translateY(-100%) rotate(45deg);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translateX(100%) translateY(100%) rotate(45deg);
    opacity: 0;
  }
}

@keyframes adminSpark {
  0%,
  100% {
    opacity: 0.6;
    transform: scale(1) rotate(0deg);
  }
  25% {
    opacity: 1;
    transform: scale(1.3) rotate(90deg);
  }
  50% {
    opacity: 0.8;
    transform: scale(1.1) rotate(180deg);
  }
  75% {
    opacity: 1;
    transform: scale(1.3) rotate(270deg);
  }
}