@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");

/* =====================================================================
   Cosmic theme + refined typographic polish (site-wide)
   - Deep purple/navy night sky, starfield, soft nebula glows
   - Pretendard typography, glassy cards, smooth interactions
   The base markup is already dark (slate gradient + light text);
   this stylesheet turns it into a clean, celestial, modern surface.
   ===================================================================== */

/* --- Typography foundation --- */
body,
button,
input,
textarea,
select {
  font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
    system-ui, "Segoe UI", Roboto, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif !important;
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -0.011em;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  letter-spacing: -0.022em;
  word-break: keep-all;
}

h1 { line-height: 1.18; }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

::selection {
  background: rgba(139, 92, 246, 0.42);
  color: #fff;
}

/* --- Custom scrollbar --- */
html {
  scrollbar-color: #7c3aed rgba(12, 7, 34, 0.6);
  scrollbar-width: thin;
}
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: #0b0720; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #6d28d9, #7c3aed);
  border-radius: 999px;
  border: 3px solid #0b0720;
}
::-webkit-scrollbar-thumb:hover { background: #8b5cf6; }

/* --- Base canvas: deep cosmic gradient on the root background --- */
html {
  background:
    radial-gradient(ellipse at 50% -8%, rgba(124, 58, 237, .36), transparent 60%),
    radial-gradient(ellipse at 50% 120%, rgba(217, 70, 239, .18), transparent 60%),
    linear-gradient(180deg, #0c0722 0%, #140a32 48%, #0a0620 100%);
  background-attachment: fixed;
}

/* Body holds nebula glows; base stays transparent so the canvas shows.
   `:not(.text-slate-900)` opts out a handful of self-contained light
   test pages that ship their own pastel theme + dark text. */
body:not(.text-slate-900) {
  position: relative;
  min-height: 100vh;
  background:
    radial-gradient(circle at 14% 12%, rgba(139, 92, 246, .18), transparent 42%),
    radial-gradient(circle at 86% 8%, rgba(59, 130, 246, .14), transparent 44%),
    radial-gradient(circle at 50% 118%, rgba(192, 132, 252, .14), transparent 55%),
    transparent !important;
  color: #e8e4f7 !important;
}

/* --- Starfield: sits above the canvas, behind all page content --- */
body:not(.text-slate-900)::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    radial-gradient(1.4px 1.4px at 20% 28%, rgba(255, 255, 255, .9), transparent 100%),
    radial-gradient(1px 1px at 75% 16%, rgba(214, 200, 255, .8), transparent 100%),
    radial-gradient(1.5px 1.5px at 41% 68%, rgba(255, 255, 255, .85), transparent 100%),
    radial-gradient(1px 1px at 88% 58%, rgba(186, 230, 253, .75), transparent 100%),
    radial-gradient(1.2px 1.2px at 12% 78%, rgba(255, 255, 255, .75), transparent 100%),
    radial-gradient(1px 1px at 62% 38%, rgba(255, 255, 255, .65), transparent 100%),
    radial-gradient(1.4px 1.4px at 33% 12%, rgba(252, 211, 77, .7), transparent 100%),
    radial-gradient(1px 1px at 92% 86%, rgba(255, 255, 255, .65), transparent 100%),
    radial-gradient(1.3px 1.3px at 55% 90%, rgba(214, 200, 255, .75), transparent 100%),
    radial-gradient(1px 1px at 8% 45%, rgba(255, 255, 255, .6), transparent 100%),
    radial-gradient(1.4px 1.4px at 68% 72%, rgba(255, 255, 255, .8), transparent 100%),
    radial-gradient(1px 1px at 48% 22%, rgba(186, 230, 253, .65), transparent 100%);
  opacity: .8;
  animation: twinkle 7s ease-in-out infinite alternate;
}

@keyframes twinkle {
  from { opacity: .5; }
  to   { opacity: .9; }
}

@media (prefers-reduced-motion: reduce) {
  body:not(.text-slate-900)::before { animation: none; }
}

/* --- Glassy cards --- */
.bg-white\/5 {
  background: rgba(146, 109, 222, .07) !important;
}

.bg-white\/10 {
  background: rgba(146, 109, 222, .12) !important;
}

.border-white\/10,
.border-white\/15,
.border-white\/20,
.border-white\/30 {
  border-color: rgba(167, 139, 250, .18) !important;
}

/* Layered, soft depth instead of a single hard drop shadow */
.shadow-2xl {
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .05) inset,
    0 10px 30px rgba(8, 5, 28, .45),
    0 30px 70px rgba(91, 33, 182, .26) !important;
}

/* --- Hero / section headers: deep nebula panel with glow edge --- */
header.rounded-3xl,
header.rounded-2xl {
  background:
    linear-gradient(135deg, rgba(76, 29, 149, .5), rgba(30, 27, 75, .46) 52%, rgba(124, 58, 237, .38)) !important;
  border-color: rgba(167, 139, 250, .28) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .06) inset,
    0 24px 70px rgba(124, 58, 237, .26);
}

header .absolute {
  opacity: .5;
}

h1 {
  text-shadow: 0 1px 22px rgba(124, 58, 237, .3);
}

/* Refined gradient title for hero / section panels (home + ranking heroes) */
header.rounded-3xl h1,
header.rounded-2xl h1 {
  background: linear-gradient(180deg, #ffffff 0%, #cbb6ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  text-shadow: none;
}

/* --- Mystical accent palette (kept light for contrast on the dark sky) --- */
.text-indigo-100,
.text-indigo-200,
.text-indigo-50 {
  color: #c4b5fd !important;
}

.text-rose-100,
.text-rose-50 {
  color: #f0abfc !important;
}

.text-amber-100,
.text-amber-50,
.text-yellow-100,
.text-yellow-50 {
  color: #fcd34d !important;
}

.text-emerald-100,
.text-emerald-50,
.text-teal-100,
.text-teal-50 {
  color: #6ee7b7 !important;
}

.text-cyan-100,
.text-cyan-50 {
  color: #7dd3fc !important;
}

.text-purple-100,
.text-purple-50 {
  color: #d8b4fe !important;
}

/* --- Primary call-to-action: glowing gold (premium accent) --- */
.bg-rose-500\/80 {
  background: linear-gradient(135deg, #fcd34d 0%, #f59e0b 100%) !important;
  color: #2a1a04 !important;
  border-color: rgba(252, 211, 77, .55) !important;
  box-shadow: 0 10px 26px rgba(245, 158, 11, .3) !important;
}

.bg-rose-500\/80:hover {
  background: linear-gradient(135deg, #fde68a 0%, #fbbf24 100%) !important;
  color: #2a1a04 !important;
  border-color: rgba(253, 230, 138, .7) !important;
}

/* --- Cosmic highlight box (e.g. featured tool / promo) --- */
.bg-cyan-500\/10 {
  background: linear-gradient(135deg, rgba(56, 132, 255, .14), rgba(139, 92, 246, .14)) !important;
}

.bg-slate-950\/30,
.bg-slate-950\/50 {
  background: rgba(10, 6, 30, .42) !important;
}

/* --- Smooth interactions --- */
a,
button {
  border-color: rgba(167, 139, 250, .24) !important;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease,
    box-shadow .2s ease, transform .2s ease;
}

a:hover,
button:hover {
  background-color: rgba(139, 92, 246, .14) !important;
  border-color: rgba(196, 181, 253, .5) !important;
}

/* Keep the gold CTA from picking up the generic violet hover wash. */
.bg-rose-500\/80:hover {
  background-color: transparent;
}

/* Card elevation on hover for clickable cards (rounded + bordered anchors) */
a[class*="rounded-2xl"],
a[class*="rounded-3xl"],
a[class*="rounded-xl"] {
  transition: background-color .2s ease, border-color .2s ease, color .2s ease,
    box-shadow .25s ease, transform .25s ease;
}
a[class*="rounded-2xl"]:hover,
a[class*="rounded-3xl"]:hover,
a[class*="rounded-xl"]:hover {
  transform: translateY(-3px);
  box-shadow:
    0 12px 28px rgba(8, 5, 28, .4),
    0 22px 50px rgba(124, 58, 237, .22);
}

/* --- Form fields --- */
input,
textarea,
select {
  background: rgba(20, 12, 46, .6) !important;
  border-color: rgba(167, 139, 250, .3) !important;
  color: #ece9fa !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
}

input::placeholder,
textarea::placeholder {
  color: #9b93c4 !important;
}