/* ============================================
   아이돌 이상형 월드컵 — 공통 테마
   Y2K / 아이돌 앨범 감성
   ============================================ */

:root {
  /* Core palette — Y2K vivid */
  --bg: #fff5fb;
  --bg-grid: #ffe1f0;
  --ink: #1a0b1e;
  --ink-soft: #5c3a63;

  --pink: #ff3ea5;
  --hot-pink: #ff1177;
  --cyan: #00e0ff;
  --lime: #caff3f;
  --lavender: #b794ff;
  --yellow: #ffd93f;

  --chrome-1: #ffffff;
  --chrome-2: #e9d6ff;
  --chrome-3: #9e7bff;

  /* Shadows */
  --hard-shadow: 6px 6px 0 var(--ink);
  --hard-shadow-sm: 3px 3px 0 var(--ink);
  --glow-pink: 0 0 32px rgba(255, 62, 165, 0.55);
  --glow-cyan: 0 0 32px rgba(0, 224, 255, 0.55);

  /* Typography */
  --font-hangul: 'Pretendard', 'Apple SD Gothic Neo', system-ui, sans-serif;
  --font-display: 'Archivo Black', 'Pretendard', sans-serif;
  --font-mono: 'Space Mono', ui-monospace, monospace;

  /* Radii */
  --r-sm: 10px;
  --r-md: 18px;
  --r-lg: 28px;
  --r-pill: 999px;

  /* Motion */
  --ease-bounce: cubic-bezier(.34, 1.56, .64, 1);
  --ease-smooth: cubic-bezier(.4, 0, .2, 1);
  --anim-scale: 1; /* tweakable */
}

/* Fonts */
@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Space+Mono:wght@400;700&display=swap');
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css');

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-hangul);
  color: var(--ink);
  background: var(--bg);
  overflow-x: hidden;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

button { font-family: inherit; color: inherit; cursor: pointer; border: none; background: none; }

/* ============================================
   Backgrounds — checkered, grid, sparkle
   ============================================ */
.bg-checker {
  background-image:
    linear-gradient(45deg, var(--bg-grid) 25%, transparent 25%),
    linear-gradient(-45deg, var(--bg-grid) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, var(--bg-grid) 75%),
    linear-gradient(-45deg, transparent 75%, var(--bg-grid) 75%);
  background-size: 40px 40px;
  background-position: 0 0, 0 20px, 20px -20px, -20px 0;
}

.bg-dots {
  background-image: radial-gradient(var(--bg-grid) 2px, transparent 2px);
  background-size: 20px 20px;
}

/* Holographic gradient — used for headers, special CTAs */
.holo {
  background: linear-gradient(
    115deg,
    #ff6ec7 0%,
    #ffd93f 20%,
    #caff3f 40%,
    #00e0ff 60%,
    #b794ff 80%,
    #ff6ec7 100%
  );
  background-size: 200% 200%;
  animation: holo-shift 6s linear infinite;
}
@keyframes holo-shift {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

/* Chrome fill — glossy metallic for buttons */
.chrome-fill {
  background: linear-gradient(
    180deg,
    #ffffff 0%,
    #ffd2eb 30%,
    #ff8ec6 50%,
    #ffb4dc 70%,
    #ffffff 100%
  );
}

/* ============================================
   Sticker — hard-shadow, rotated, rounded
   ============================================ */
.sticker {
  background: white;
  border: 2.5px solid var(--ink);
  border-radius: var(--r-md);
  box-shadow: var(--hard-shadow);
  padding: 14px 18px;
  display: inline-block;
}

/* ============================================
   Primary Y2K button — glossy pill with hard shadow
   ============================================ */
.y2k-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 18px 28px;
  font-family: var(--font-display);
  font-size: 20px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ink);
  background: white;
  border: 3px solid var(--ink);
  border-radius: var(--r-pill);
  box-shadow: var(--hard-shadow);
  transition: transform 0.15s var(--ease-bounce), box-shadow 0.15s var(--ease-bounce);
  cursor: pointer;
  overflow: hidden;
}
.y2k-btn::before {
  content: '';
  position: absolute;
  inset: 3px 3px 50% 3px;
  border-radius: var(--r-pill);
  background: linear-gradient(180deg, rgba(255,255,255,0.9), rgba(255,255,255,0.1));
  pointer-events: none;
}
.y2k-btn > * { position: relative; z-index: 1; }
.y2k-btn:active {
  transform: translate(4px, 4px);
  box-shadow: 2px 2px 0 var(--ink);
}

.y2k-btn.pink { background: var(--pink); color: white; }
.y2k-btn.cyan { background: var(--cyan); }
.y2k-btn.lime { background: var(--lime); }
.y2k-btn.lavender { background: var(--lavender); color: white; }
.y2k-btn.chrome { background: linear-gradient(180deg, #fff 0%, #e9d6ff 40%, #9e7bff 50%, #e9d6ff 60%, #fff 100%); }

/* ============================================
   Marquee — scrolling strip
   ============================================ */
.marquee {
  overflow: hidden;
  white-space: nowrap;
  background: var(--ink);
  color: white;
  padding: 10px 0;
  border-top: 3px solid var(--ink);
  border-bottom: 3px solid var(--ink);
}
.marquee-track {
  display: inline-block;
  padding-left: 100%;
  animation: marquee 18s linear infinite;
  font-family: var(--font-display);
  font-size: 16px;
  letter-spacing: 0.05em;
}
@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}
.marquee-track span { margin: 0 24px; }
.marquee-track .star { color: var(--lime); }

/* ============================================
   Floating stars / sparkles
   ============================================ */
.sparkle {
  position: absolute;
  pointer-events: none;
  animation: sparkle-pop calc(2.2s / var(--anim-scale)) var(--ease-bounce) infinite;
}
@keyframes sparkle-pop {
  0%, 100% { transform: scale(0) rotate(0deg); opacity: 0; }
  50% { transform: scale(1) rotate(180deg); opacity: 1; }
}

/* ============================================
   Utility
   ============================================ */
.mobile-frame {
  max-width: 440px;
  margin: 0 auto;
  min-height: 100vh;
  position: relative;
  overflow: hidden;
}

.tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: var(--ink);
  color: white;
  border-radius: var(--r-pill);
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01s !important; transition-duration: 0.01s !important; }
}