/* ===== SMOOTH SCROLL ===== */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
}

/* ===== SCROLLBAR ===== */
::-webkit-scrollbar {
  width: 6px;
}
::-webkit-scrollbar-track {
  background: #F8FAFC;
}
::-webkit-scrollbar-thumb {
  background: #CBD5E1;
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: #94A3B8;
}

/* ===== HEADER STATES ===== */
#header {
  background: rgba(255, 255, 255, 0);
}
#header.scrolled {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

/* ===== ANIMATIONS ===== */
@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fade-in-up {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.animate-fade-in {
  animation: fade-in 0.8s ease-out both;
}
.animate-fade-in-up {
  animation: fade-in-up 0.8s ease-out both;
}

.delay-100 { animation-delay: 0.1s; }
.delay-200 { animation-delay: 0.2s; }
.delay-300 { animation-delay: 0.3s; }
.delay-400 { animation-delay: 0.4s; }
.delay-600 { animation-delay: 0.6s; }

/* ===== SCROLL REVEAL ===== */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal.delay-100 { transition-delay: 0.1s; }
.reveal.delay-200 { transition-delay: 0.2s; }
.reveal.delay-300 { transition-delay: 0.3s; }
.reveal.delay-400 { transition-delay: 0.4s; }

/* ===== MODAL LIST SCROLLBAR ===== */
#free-list::-webkit-scrollbar {
  width: 4px;
}
#free-list::-webkit-scrollbar-thumb {
  background: #CBD5E1;
  border-radius: 2px;
}

/* ===== SELECTION ===== */
::selection {
  background: rgba(8, 145, 178, 0.15);
  color: #0E7490;
}

/* ===== KAKAO FLOATING BUTTON ===== */
.kakao-float {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 90;
  width: 56px;
  height: 56px;
  background: #FEE500;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transition: transform 0.2s, box-shadow 0.2s;
  text-decoration: none;
}
.kakao-float:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}
.kakao-float svg {
  width: 28px;
  height: 28px;
  fill: #3C1E1E;
}