/* BUBA 공통 디자인 토큰 + 유틸 CSS */
:root {
  --buba-lavender: #B39DDB;
  --buba-deep: #7E57C2;
  --buba-royal: #311B57;
  --buba-parchment: #FBF8FF;
  --buba-cream: #F3E5F5;
  --buba-lilac: #EDE7F6;
  --buba-white: #FFFFFF;
  --buba-story: #37274A;
  --buba-muted: #9575CD;
  --buba-warm: #7B6B8A;
  --buba-light: #B0A3BF;
  --buba-border: #D1C4E9;
  --buba-gold: #FFD166;
  --buba-coral: #FF8A80;
  --buba-sage: #81C784;
  --buba-sky: #64B5F6;
  --buba-sunset: #FFB74D;
  --buba-rose: #F48FB1;
  --buba-magic: #CE93D8;

  --shadow-card: 0 4px 16px rgba(55,39,74,0.08), 0 2px 6px rgba(55,39,74,0.05);
  --shadow-elevated: 0 8px 32px rgba(55,39,74,0.12), 0 4px 12px rgba(55,39,74,0.06);
  --shadow-float: 0 16px 48px rgba(55,39,74,0.16), 0 4px 16px rgba(55,39,74,0.08);
  --shadow-magic: 0 4px 24px rgba(179,157,219,0.35);
  --shadow-gold: 0 4px 20px rgba(255,209,102,0.30);

  --font-display: 'Jua', 'Gaegu', 'Nunito', 'Noto Sans KR', sans-serif;
  --font-body: 'Nunito', 'Noto Sans KR', -apple-system, sans-serif;
  --font-hand: 'Gaegu', 'Jua', cursive;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  color: var(--buba-story);
  background: var(--buba-parchment);
  line-height: 1.65;
  word-break: keep-all;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, .display { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.3px; }

button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 28px; border-radius: 16px; font-size: 16px; font-weight: 600;
  transition: all 0.2s ease; line-height: 1;
}
.btn-primary {
  background: linear-gradient(135deg, #B39DDB, #7E57C2);
  color: #fff;
  box-shadow: var(--shadow-magic);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 6px 28px rgba(179,157,219,0.5); }
.btn-primary:active { transform: scale(0.97); }

.btn-secondary {
  background: rgba(179,157,219,0.12);
  color: var(--buba-deep);
  border: 1.5px solid var(--buba-border);
}
.btn-secondary:hover { background: rgba(179,157,219,0.2); border-color: var(--buba-lavender); }

.btn-gold {
  background: linear-gradient(135deg, #FFD166, #FFB74D);
  color: var(--buba-story);
  box-shadow: var(--shadow-gold);
  font-weight: 700;
}
.btn-ghost { padding: 10px 18px; color: var(--buba-deep); font-weight: 500; font-size: 15px; border-radius: 10px; }
.btn-ghost:hover { background: rgba(179,157,219,0.08); }

.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px; border-radius: 9999px;
  background: rgba(179,157,219,0.12); color: var(--buba-deep);
  font-size: 12px; font-weight: 600; letter-spacing: 0.3px;
}
.pill-gold { background: rgba(255,209,102,0.2); color: #8B6914; }
.pill-coral { background: rgba(255,138,128,0.15); color: #C62828; }

/* Cards */
.card {
  background: #fff; border: 1px solid rgba(209,196,233,0.4);
  border-radius: 20px; box-shadow: var(--shadow-card);
  transition: all 0.3s ease;
}
.card-hover:hover { transform: translateY(-6px) scale(1.01); box-shadow: var(--shadow-elevated); }

/* Inputs */
.input {
  width: 100%; padding: 14px 16px; border-radius: 12px;
  border: 1.5px solid var(--buba-border); background: #fff;
  color: var(--buba-story); font-family: inherit; font-size: 15px;
  transition: all 0.2s ease;
}
.input:focus { outline: none; border-color: var(--buba-lavender); box-shadow: 0 0 0 4px rgba(179,157,219,0.15); }
.input::placeholder { color: var(--buba-light); }

/* Background atmosphere */
.bg-parchment-atm {
  background:
    radial-gradient(circle at 15% 20%, rgba(225,190,231,0.35), transparent 40%),
    radial-gradient(circle at 85% 70%, rgba(209,196,233,0.35), transparent 45%),
    radial-gradient(circle at 50% 90%, rgba(255,209,102,0.10), transparent 35%),
    #FBF8FF;
}
.bg-cream { background: var(--buba-cream); }
.bg-royal { background: linear-gradient(145deg, #311B57, #4A2F75); color: #fff; }

/* Hand-drawn divider (for storybook feel) */
.wavy-divider {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12' preserveAspectRatio='none'%3E%3Cpath d='M0 6 Q 15 0 30 6 T 60 6 T 90 6 T 120 6' stroke='%23B39DDB' stroke-width='2' fill='none' opacity='0.5'/%3E%3C/svg%3E");
  background-repeat: repeat-x; background-size: 120px 12px;
  height: 12px; width: 100%;
}

/* Star shimmer */
@keyframes twinkle { 0%, 100% { opacity: 0.3; transform: scale(1); } 50% { opacity: 1; transform: scale(1.2); } }
.twinkle { animation: twinkle 2.5s ease-in-out infinite; }

@keyframes float-soft { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.float-soft { animation: float-soft 4s ease-in-out infinite; }

@keyframes shimmer-move {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.shimmer {
  background: linear-gradient(90deg, #EDE7F6 25%, #F3E5F5 50%, #EDE7F6 75%);
  background-size: 200% 100%;
  animation: shimmer-move 1.8s ease-in-out infinite;
}

@keyframes scroll-x {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Section label */
.eyebrow {
  font-family: var(--font-body); font-weight: 700; font-size: 12px;
  letter-spacing: 2px; text-transform: uppercase; color: var(--buba-deep);
}

/* Magic gold underline */
.gold-underline {
  background-image: linear-gradient(transparent 65%, rgba(255,209,102,0.45) 65%);
  padding: 0 3px;
}

/* Decorative star SVG helper */
.star-ico { width: 16px; height: 16px; fill: var(--buba-gold); }

/* Scrollbar hidden utility */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { scrollbar-width: none; }

/* Watercolor blob backgrounds (reusable) */
.blob-1 {
  position: absolute; width: 520px; height: 520px; border-radius: 50%;
  background: radial-gradient(circle, rgba(179,157,219,0.35), transparent 65%);
  filter: blur(40px); pointer-events: none;
}
.blob-2 {
  position: absolute; width: 420px; height: 420px; border-radius: 50%;
  background: radial-gradient(circle, rgba(244,143,177,0.28), transparent 65%);
  filter: blur(40px); pointer-events: none;
}
.blob-3 {
  position: absolute; width: 380px; height: 380px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,209,102,0.30), transparent 65%);
  filter: blur(45px); pointer-events: none;
}
.blob-4 {
  position: absolute; width: 460px; height: 460px; border-radius: 50%;
  background: radial-gradient(circle, rgba(129,199,132,0.22), transparent 65%);
  filter: blur(45px); pointer-events: none;
}

/* Storybook texture overlay */
.paper-texture {
  background-image:
    radial-gradient(circle at 25% 15%, rgba(179,157,219,0.06) 1px, transparent 1px),
    radial-gradient(circle at 75% 45%, rgba(179,157,219,0.05) 1px, transparent 1px),
    radial-gradient(circle at 50% 85%, rgba(179,157,219,0.04) 1px, transparent 1px);
  background-size: 40px 40px, 55px 55px, 35px 35px;
}