@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.8/dist/web/static/pretendard.css");

:root {
  --primary-color: #000;
  --accent-color: #FF385C;
}

body {
  font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  color: #1a1a1a;
}

/* Utilities */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
.safe-area-bottom { padding-bottom: env(safe-area-inset-bottom); }

/* Animations */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
.animate-fade-in { animation: fadeIn 0.5s ease-out forwards; }

@keyframes slideUp {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}
.animate-slide-up { animation: slideUp 0.3s ease-out forwards; }

/* Navbar */
.navbar-scrolled {
  background-color: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(12px);
  padding-top: 1rem;
  padding-bottom: 1rem;
  box-shadow: 0 1px 10px rgba(0,0,0,0.05);
}
.navbar-scrolled .nav-text { color: black !important; }
.navbar-scrolled .logo-text { color: black !important; }

/* Mobile Menu */
#mobile-menu {
  transition: transform 0.3s ease-in-out;
}
#mobile-menu.open {
  transform: translateX(0);
}

/* Article Card */
.article-card:hover .card-overlay {
  background: linear-gradient(to top, rgba(0,0,0,0.8), rgba(0,0,0,0.2), transparent);
}
.article-card:hover img {
  transform: scale(1.05);
}

/* Floating Banner */
.floating-banner {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 40;
  width: 280px;
  background: white;
  border-radius: 16px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.1);
  padding: 16px;
  transform: translateY(200%);
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.floating-banner.visible {
  transform: translateY(0);
}

/* Filter Tags */
.filter-btn.active {
  background-color: black;
  color: white;
  border-color: black;
}

/* Accordion */
.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
}
.accordion-content.open {
  max-height: 500px; /* Approximate max height */
}
.accordion-icon {
  transition: transform 0.3s ease;
}
.accordion-btn[aria-expanded="true"] .accordion-icon {
  transform: rotate(180deg);
}

/* Roulette */
.roulette-container {
  position: relative;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  border: 4px solid #333;
  overflow: hidden;
  transition: transform 3s cubic-bezier(0.25, 0.1, 0.25, 1);
}
.roulette-segment {
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 50%;
  background: conic-gradient(from 0deg, red, blue); /* Placeholder */
  transform-origin: 100% 100%;
}
.roulette-arrow {
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  width: 0; 
  height: 0; 
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-top: 30px solid #FF385C;
  z-index: 10;
}