@tailwind base;
@tailwind components;
@tailwind utilities;

/* Flash Message Animations */
@keyframes slide-in {
  0% {
    transform: translateY(-30px) scale(0.9) rotateX(10deg);
    opacity: 0;
    filter: blur(10px);
  }
  60% {
    transform: translateY(5px) scale(1.02) rotateX(-2deg);
    opacity: 0.9;
    filter: blur(2px);
  }
  100% {
    transform: translateY(0) scale(1) rotateX(0deg);
    opacity: 1;
    filter: blur(0);
  }
}

@keyframes fade-out {
  0% {
    transform: translateY(0) scale(1) rotateX(0deg);
    opacity: 1;
    filter: blur(0);
  }
  100% {
    transform: translateY(-30px) scale(0.9) rotateX(10deg);
    opacity: 0;
    filter: blur(10px);
  }
}

@keyframes icon-pulse {
  0%, 100% {
    transform: scale(1) rotate(0deg);
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4);
  }
  50% {
    transform: scale(1.08) rotate(5deg);
    box-shadow: 0 0 20px 5px rgba(255, 255, 255, 0.2);
  }
}

@keyframes icon-glow {
  0%, 100% {
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.3));
  }
  50% {
    filter: drop-shadow(0 0 16px rgba(255, 255, 255, 0.5));
  }
}

@keyframes shimmer {
  0% {
    background-position: -1000px 0;
  }
  100% {
    background-position: 1000px 0;
  }
}

@keyframes progress-glow {
  0%, 100% {
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
  }
  50% {
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.6);
  }
}

.animate-slide-in {
  animation: slide-in 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
  transform-style: preserve-3d;
  perspective: 1000px;
}

.animate-fade-out {
  animation: fade-out 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  transform-style: preserve-3d;
  perspective: 1000px;
}

/* Flash Message Container Styles */
.flash-message {
  position: relative;
  overflow: hidden;
  margin-bottom: 1rem;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid;
  box-shadow: 
    0 20px 25px -5px rgba(0, 0, 0, 0.1),
    0 10px 10px -5px rgba(0, 0, 0, 0.04),
    0 0 0 1px rgba(255, 255, 255, 0.1) inset,
    0 0 40px rgba(0, 0, 0, 0.05);
  border-radius: 1rem;
  padding: 1.25rem 1.5rem;
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
  min-width: 340px;
  max-width: 520px;
  background: rgba(255, 255, 255, 0.85);
  border-color: rgba(255, 255, 255, 0.3);
  transform: translateZ(0);
  will-change: transform, opacity;
  cursor: default;
}

.flash-message:hover {
  transform: translateY(-2px) translateZ(0);
  box-shadow: 
    0 25px 30px -5px rgba(0, 0, 0, 0.15),
    0 15px 15px -5px rgba(0, 0, 0, 0.06),
    0 0 0 1px rgba(255, 255, 255, 0.15) inset,
    0 0 50px rgba(0, 0, 0, 0.08);
}

.dark .flash-message {
  background: rgba(26, 38, 50, 0.85);
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 
    0 20px 25px -5px rgba(0, 0, 0, 0.3),
    0 10px 10px -5px rgba(0, 0, 0, 0.2),
    0 0 0 1px rgba(255, 255, 255, 0.05) inset,
    0 0 40px rgba(0, 0, 0, 0.4);
}

.dark .flash-message:hover {
  box-shadow: 
    0 25px 30px -5px rgba(0, 0, 0, 0.4),
    0 15px 15px -5px rgba(0, 0, 0, 0.25),
    0 0 0 1px rgba(255, 255, 255, 0.08) inset,
    0 0 50px rgba(0, 0, 0, 0.5);
}

.flash-message::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.08;
  background: 
    linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, transparent 50%),
    radial-gradient(circle at 20% 50%, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
  pointer-events: none;
  z-index: 0;
}

.flash-message::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.2),
    transparent
  );
  animation: shimmer 3s infinite;
  pointer-events: none;
  z-index: 1;
}

/* Flash Message Types - 테마 색상 적용 */
.flash-success {
  color: rgb(21, 128, 61);
  border-color: rgba(34, 197, 94, 0.3);
  background: 
    linear-gradient(135deg, rgba(240, 253, 244, 0.9) 0%, rgba(209, 250, 229, 0.9) 50%, rgba(204, 251, 241, 0.9) 100%),
    radial-gradient(circle at 0% 0%, rgba(34, 197, 94, 0.1) 0%, transparent 50%);
  box-shadow: 
    0 20px 25px -5px rgba(0, 0, 0, 0.1),
    0 10px 10px -5px rgba(0, 0, 0, 0.04),
    0 0 0 1px rgba(34, 197, 94, 0.2) inset,
    0 0 30px rgba(34, 197, 94, 0.15);
}

.dark .flash-success {
  color: rgb(134, 239, 172);
  border-color: rgba(34, 197, 94, 0.4);
  background: 
    linear-gradient(135deg, rgba(20, 83, 45, 0.3) 0%, rgba(6, 78, 59, 0.25) 50%, rgba(19, 78, 74, 0.3) 100%),
    radial-gradient(circle at 0% 0%, rgba(34, 197, 94, 0.2) 0%, transparent 50%);
  box-shadow: 
    0 20px 25px -5px rgba(0, 0, 0, 0.3),
    0 10px 10px -5px rgba(0, 0, 0, 0.2),
    0 0 0 1px rgba(34, 197, 94, 0.3) inset,
    0 0 40px rgba(34, 197, 94, 0.2);
}

.flash-success::before {
  background: 
    linear-gradient(135deg, rgba(34, 197, 94, 0.15) 0%, rgba(20, 184, 166, 0.1) 50%, transparent 100%),
    radial-gradient(circle at 80% 20%, rgba(34, 197, 94, 0.1) 0%, transparent 50%);
}

.flash-error {
  color: rgb(185, 28, 28);
  border-color: rgba(239, 68, 68, 0.3);
  background: 
    linear-gradient(135deg, rgba(254, 242, 242, 0.9) 0%, rgba(255, 228, 230, 0.9) 50%, rgba(253, 244, 255, 0.9) 100%),
    radial-gradient(circle at 0% 0%, rgba(239, 68, 68, 0.1) 0%, transparent 50%);
  box-shadow: 
    0 20px 25px -5px rgba(0, 0, 0, 0.1),
    0 10px 10px -5px rgba(0, 0, 0, 0.04),
    0 0 0 1px rgba(239, 68, 68, 0.2) inset,
    0 0 30px rgba(239, 68, 68, 0.15);
}

.dark .flash-error {
  color: rgb(252, 165, 165);
  border-color: rgba(239, 68, 68, 0.4);
  background: 
    linear-gradient(135deg, rgba(127, 29, 29, 0.3) 0%, rgba(159, 18, 57, 0.25) 50%, rgba(157, 23, 77, 0.3) 100%),
    radial-gradient(circle at 0% 0%, rgba(239, 68, 68, 0.2) 0%, transparent 50%);
  box-shadow: 
    0 20px 25px -5px rgba(0, 0, 0, 0.3),
    0 10px 10px -5px rgba(0, 0, 0, 0.2),
    0 0 0 1px rgba(239, 68, 68, 0.3) inset,
    0 0 40px rgba(239, 68, 68, 0.2);
}

.flash-error::before {
  background: 
    linear-gradient(135deg, rgba(239, 68, 68, 0.15) 0%, rgba(244, 63, 94, 0.1) 50%, transparent 100%),
    radial-gradient(circle at 80% 20%, rgba(239, 68, 68, 0.1) 0%, transparent 50%);
}

.flash-warning {
  color: rgb(180, 83, 9);
  border-color: rgba(245, 158, 11, 0.3);
  background: 
    linear-gradient(135deg, rgba(255, 251, 235, 0.9) 0%, rgba(254, 249, 195, 0.9) 50%, rgba(255, 237, 213, 0.9) 100%),
    radial-gradient(circle at 0% 0%, rgba(245, 158, 11, 0.1) 0%, transparent 50%);
  box-shadow: 
    0 20px 25px -5px rgba(0, 0, 0, 0.1),
    0 10px 10px -5px rgba(0, 0, 0, 0.04),
    0 0 0 1px rgba(245, 158, 11, 0.2) inset,
    0 0 30px rgba(245, 158, 11, 0.15);
}

.dark .flash-warning {
  color: rgb(251, 191, 36);
  border-color: rgba(245, 158, 11, 0.4);
  background: 
    linear-gradient(135deg, rgba(120, 53, 15, 0.3) 0%, rgba(113, 63, 18, 0.25) 50%, rgba(154, 52, 18, 0.3) 100%),
    radial-gradient(circle at 0% 0%, rgba(245, 158, 11, 0.2) 0%, transparent 50%);
  box-shadow: 
    0 20px 25px -5px rgba(0, 0, 0, 0.3),
    0 10px 10px -5px rgba(0, 0, 0, 0.2),
    0 0 0 1px rgba(245, 158, 11, 0.3) inset,
    0 0 40px rgba(245, 158, 11, 0.2);
}

.flash-warning::before {
  background: 
    linear-gradient(135deg, rgba(245, 158, 11, 0.15) 0%, rgba(251, 191, 36, 0.1) 50%, transparent 100%),
    radial-gradient(circle at 80% 20%, rgba(245, 158, 11, 0.1) 0%, transparent 50%);
}

.flash-info {
  color: #308ce8;
  border-color: rgba(48, 140, 232, 0.3);
  background: 
    linear-gradient(135deg, rgba(239, 246, 255, 0.9) 0%, rgba(224, 242, 254, 0.9) 50%, rgba(48, 140, 232, 0.08) 100%),
    radial-gradient(circle at 0% 0%, rgba(48, 140, 232, 0.1) 0%, transparent 50%);
  box-shadow: 
    0 20px 25px -5px rgba(0, 0, 0, 0.1),
    0 10px 10px -5px rgba(0, 0, 0, 0.04),
    0 0 0 1px rgba(48, 140, 232, 0.2) inset,
    0 0 30px rgba(48, 140, 232, 0.15);
}

.dark .flash-info {
  color: #60a5fa;
  border-color: rgba(48, 140, 232, 0.4);
  background: 
    linear-gradient(135deg, rgba(48, 140, 232, 0.15) 0%, rgba(22, 78, 99, 0.2) 50%, rgba(30, 58, 138, 0.25) 100%),
    radial-gradient(circle at 0% 0%, rgba(48, 140, 232, 0.2) 0%, transparent 50%);
  box-shadow: 
    0 20px 25px -5px rgba(0, 0, 0, 0.3),
    0 10px 10px -5px rgba(0, 0, 0, 0.2),
    0 0 0 1px rgba(48, 140, 232, 0.3) inset,
    0 0 40px rgba(48, 140, 232, 0.2);
}

.flash-info::before {
  background: 
    linear-gradient(135deg, rgba(48, 140, 232, 0.2) 0%, rgba(48, 140, 232, 0.12) 50%, transparent 100%),
    radial-gradient(circle at 80% 20%, rgba(48, 140, 232, 0.1) 0%, transparent 50%);
}

.flash-warning::before {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.1) 0%, rgba(251, 191, 36, 0.05) 100%);
}

.flash-default {
  color: rgb(55, 65, 81);
  border-color: rgba(229, 231, 235, 0.5);
  background: 
    linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(249, 250, 251, 0.9) 50%, rgba(243, 244, 246, 0.9) 100%),
    radial-gradient(circle at 0% 0%, rgba(107, 114, 128, 0.05) 0%, transparent 50%);
  box-shadow: 
    0 20px 25px -5px rgba(0, 0, 0, 0.1),
    0 10px 10px -5px rgba(0, 0, 0, 0.04),
    0 0 0 1px rgba(107, 114, 128, 0.1) inset,
    0 0 30px rgba(107, 114, 128, 0.1);
}

.dark .flash-default {
  color: rgb(209, 213, 219);
  border-color: rgba(42, 59, 77, 0.5);
  background: 
    linear-gradient(135deg, rgba(26, 38, 50, 0.9) 0%, rgba(30, 41, 59, 0.9) 50%, rgba(15, 23, 42, 0.9) 100%),
    radial-gradient(circle at 0% 0%, rgba(107, 114, 128, 0.1) 0%, transparent 50%);
  box-shadow: 
    0 20px 25px -5px rgba(0, 0, 0, 0.3),
    0 10px 10px -5px rgba(0, 0, 0, 0.2),
    0 0 0 1px rgba(107, 114, 128, 0.2) inset,
    0 0 40px rgba(107, 114, 128, 0.15);
}

.flash-default::before {
  background: 
    linear-gradient(135deg, rgba(107, 114, 128, 0.1) 0%, rgba(71, 85, 105, 0.08) 50%, transparent 100%),
    radial-gradient(circle at 80% 20%, rgba(107, 114, 128, 0.05) 0%, transparent 50%);
}

/* Flash Icon Wrapper */
.flash-icon-wrapper {
  flex-shrink: 0;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: visible;
  z-index: 2;
  transform: translateZ(0);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.flash-message:hover .flash-icon-wrapper {
  transform: scale(1.05) translateZ(0);
}

.flash-success .flash-icon-wrapper {
  background: linear-gradient(135deg, #22c55e 0%, #10b981 50%, #059669 100%);
  box-shadow: 
    0 10px 25px -5px rgba(34, 197, 94, 0.4),
    0 0 0 1px rgba(255, 255, 255, 0.2) inset,
    0 0 30px rgba(34, 197, 94, 0.3);
  animation: icon-pulse 2.5s ease-in-out infinite;
}

.dark .flash-success .flash-icon-wrapper {
  background: linear-gradient(135deg, #16a34a 0%, #059669 50%, #047857 100%);
  box-shadow: 
    0 10px 25px -5px rgba(34, 197, 94, 0.5),
    0 0 0 1px rgba(255, 255, 255, 0.1) inset,
    0 0 40px rgba(34, 197, 94, 0.4);
}

.flash-error .flash-icon-wrapper {
  background: linear-gradient(135deg, #ef4444 0%, #f43f5e 50%, #e11d48 100%);
  box-shadow: 
    0 10px 25px -5px rgba(239, 68, 68, 0.4),
    0 0 0 1px rgba(255, 255, 255, 0.2) inset,
    0 0 30px rgba(239, 68, 68, 0.3);
}

.dark .flash-error .flash-icon-wrapper {
  background: linear-gradient(135deg, #dc2626 0%, #e11d48 50%, #be123c 100%);
  box-shadow: 
    0 10px 25px -5px rgba(239, 68, 68, 0.5),
    0 0 0 1px rgba(255, 255, 255, 0.1) inset,
    0 0 40px rgba(239, 68, 68, 0.4);
}

.flash-warning .flash-icon-wrapper {
  background: linear-gradient(135deg, #f59e0b 0%, #eab308 50%, #f97316 100%);
  box-shadow: 
    0 10px 25px -5px rgba(245, 158, 11, 0.4),
    0 0 0 1px rgba(255, 255, 255, 0.2) inset,
    0 0 30px rgba(245, 158, 11, 0.3);
  animation: icon-pulse 2.5s ease-in-out infinite;
}

.dark .flash-warning .flash-icon-wrapper {
  background: linear-gradient(135deg, #d97706 0%, #ca8a04 50%, #ea580c 100%);
  box-shadow: 
    0 10px 25px -5px rgba(245, 158, 11, 0.5),
    0 0 0 1px rgba(255, 255, 255, 0.1) inset,
    0 0 40px rgba(245, 158, 11, 0.4);
}

.flash-info .flash-icon-wrapper {
  background: linear-gradient(135deg, #308ce8 0%, #2563eb 50%, #1d4ed8 100%);
  box-shadow: 
    0 10px 25px -5px rgba(48, 140, 232, 0.4),
    0 0 0 1px rgba(255, 255, 255, 0.2) inset,
    0 0 30px rgba(48, 140, 232, 0.3);
  animation: icon-pulse 2.5s ease-in-out infinite;
}

.dark .flash-info .flash-icon-wrapper {
  background: linear-gradient(135deg, #308ce8 0%, #3b82f6 50%, #2563eb 100%);
  box-shadow: 
    0 10px 25px -5px rgba(48, 140, 232, 0.5),
    0 0 0 1px rgba(255, 255, 255, 0.1) inset,
    0 0 40px rgba(48, 140, 232, 0.4);
}

.flash-default .flash-icon-wrapper {
  background: linear-gradient(135deg, #6b7280 0%, #475569 50%, #334155 100%);
  box-shadow: 
    0 10px 25px -5px rgba(107, 114, 128, 0.4),
    0 0 0 1px rgba(255, 255, 255, 0.2) inset,
    0 0 30px rgba(107, 114, 128, 0.3);
}

.dark .flash-default .flash-icon-wrapper {
  background: linear-gradient(135deg, #4b5563 0%, #334155 50%, #1e293b 100%);
  box-shadow: 
    0 10px 25px -5px rgba(107, 114, 128, 0.5),
    0 0 0 1px rgba(255, 255, 255, 0.1) inset,
    0 0 40px rgba(107, 114, 128, 0.4);
}

.flash-icon {
  color: white;
  font-size: 1.75rem;
  position: relative;
  z-index: 10;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
  animation: icon-glow 2s ease-in-out infinite;
  font-variation-settings: 'FILL' 1, 'wght' 500;
}

/* Flash Content */
.flash-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  position: relative;
  z-index: 2;
  padding-bottom: 0.75rem;
}

.flash-text {
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.6;
  padding-right: 0.5rem;
  letter-spacing: -0.01em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

/* Flash Progress Bar */
.flash-progress-wrapper {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: rgba(0, 0, 0, 0.08);
  overflow: hidden;
  border-radius: 0 0 1rem 1rem;
  margin-top: 0.5rem;
}

.dark .flash-progress-wrapper {
  background: rgba(255, 255, 255, 0.08);
}

.flash-progress-bar {
  height: 100%;
  transition: width 0.1s linear;
  border-radius: 0 0 1rem 1rem;
  position: relative;
  overflow: hidden;
}

.flash-progress-bar::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.4),
    transparent
  );
  animation: shimmer 1.5s infinite;
}

.flash-success .flash-progress-bar {
  background: linear-gradient(90deg, #22c55e 0%, #10b981 50%, #059669 100%);
  box-shadow: 0 0 10px rgba(34, 197, 94, 0.5), 0 0 20px rgba(34, 197, 94, 0.3);
  animation: progress-glow 2s ease-in-out infinite;
}

.flash-error .flash-progress-bar {
  background: linear-gradient(90deg, #ef4444 0%, #f43f5e 50%, #e11d48 100%);
  box-shadow: 0 0 10px rgba(239, 68, 68, 0.5), 0 0 20px rgba(239, 68, 68, 0.3);
  animation: progress-glow 2s ease-in-out infinite;
}

.flash-warning .flash-progress-bar {
  background: linear-gradient(90deg, #f59e0b 0%, #eab308 50%, #f97316 100%);
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.5), 0 0 20px rgba(245, 158, 11, 0.3);
  animation: progress-glow 2s ease-in-out infinite;
}

.flash-info .flash-progress-bar {
  background: linear-gradient(90deg, #308ce8 0%, #2563eb 50%, #1d4ed8 100%);
  box-shadow: 0 0 10px rgba(48, 140, 232, 0.5), 0 0 20px rgba(48, 140, 232, 0.3);
  animation: progress-glow 2s ease-in-out infinite;
}

.flash-default .flash-progress-bar {
  background: linear-gradient(90deg, #6b7280 0%, #475569 50%, #334155 100%);
  box-shadow: 0 0 10px rgba(107, 114, 128, 0.5), 0 0 20px rgba(107, 114, 128, 0.3);
}

/* Flash Close Button */
.flash-close-button {
  flex-shrink: 0;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.625rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: currentColor;
  opacity: 0.6;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid transparent;
  position: relative;
  z-index: 2;
  cursor: pointer;
}

.flash-close-button:hover {
  opacity: 1;
  background: rgba(0, 0, 0, 0.08);
  border-color: rgba(0, 0, 0, 0.1);
  transform: scale(1.1) rotate(90deg);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.flash-close-button:active {
  transform: scale(0.95) rotate(90deg);
}

.dark .flash-close-button {
  background: rgba(255, 255, 255, 0.05);
}

.dark .flash-close-button:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.flash-close-button .material-symbols-outlined {
  font-size: 1.25rem;
  font-variation-settings: 'FILL' 0, 'wght' 400;
  transition: all 0.3s;
}