/* ─────────────────────────────────────────────────────────────
   FPCOM — Design Tokens (single source of truth)
   라이트 + 파스텔 민트/블루 + Stripe-esque 그라데이션
   ───────────────────────────────────────────────────────────── */

@import url("https://fonts.googleapis.com/css2?family=Pretendard:wght@400;500;600;700;800&family=Roboto:wght@400;500;700&family=Roboto+Mono:wght@400;500;700&family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0&display=swap");

:root {
  /* ── BRAND PALETTE — pastel mint + sky ─────── */
  --fp-mint-30:    #BFF3E2;
  --fp-mint-40:    #9FE9CF;
  --fp-mint-50:    #6EE7C7;   /* primary mint */
  --fp-mint-60:    #34D3A6;
  --fp-mint-70:    #14B886;
  --fp-mint-80:    #0E8A66;

  --fp-sky-30:     #DBEAFE;
  --fp-sky-40:     #BFDBFE;
  --fp-sky-50:     #93C5FD;   /* primary sky */
  --fp-sky-60:     #60A5FA;
  --fp-sky-70:     #3B82F6;
  --fp-sky-80:     #1D4ED8;

  --fp-violet-50:  #C4B5FD;
  --fp-violet-60:  #A78BFA;
  --fp-pink-50:    #FBCFE8;
  --fp-pink-60:    #F9A8D4;

  --fp-amber-50:   #FCD34D;
  --fp-amber-60:   #F59E0B;
  --fp-red-50:     #FCA5A5;
  --fp-red-60:     #F87171;

  /* legacy aliases (so existing components keep working) */
  --fp-green-30:   var(--fp-mint-30);
  --fp-green-40:   var(--fp-mint-40);
  --fp-green-50:   var(--fp-mint-50);
  --fp-green-60:   var(--fp-mint-60);
  --fp-green-70:   var(--fp-mint-40);
  --fp-green-80:   var(--fp-mint-30);
  --fp-green-90:   #E6FAF2;
  --fp-blue-30:    var(--fp-sky-30);
  --fp-blue-40:    var(--fp-sky-40);
  --fp-blue-50:    var(--fp-sky-50);
  --fp-blue-60:    var(--fp-sky-60);
  --fp-blue-70:    var(--fp-sky-40);
  --fp-blue-80:    var(--fp-sky-30);
  --fp-blue-90:    #EFF6FF;

  /* ── SEMANTIC ROLES ─────────────────────────── */
  --fp-primary:        var(--fp-mint-70);          /* solid CTA color (readable on white) */
  --fp-primary-hover:  var(--fp-mint-80);
  --fp-on-primary:     #FFFFFF;
  --fp-secondary:      var(--fp-sky-70);
  --fp-on-secondary:   #FFFFFF;

  /* gradient — Stripe-esque hero/accent */
  --fp-grad-hero:
    radial-gradient(900px 500px at 12% 0%,  rgba(110,231,199,.55), transparent 60%),
    radial-gradient(900px 500px at 88% 0%,  rgba(147,197,253,.55), transparent 60%),
    radial-gradient(700px 500px at 50% 100%, rgba(196,181,253,.40), transparent 60%);
  --fp-grad-brand: linear-gradient(135deg, #6EE7C7 0%, #93C5FD 55%, #C4B5FD 100%);
  --fp-grad-brand-soft: linear-gradient(135deg, #BFF3E2 0%, #DBEAFE 55%, #EDE9FE 100%);
  --fp-grad-text: linear-gradient(135deg, #14B886 0%, #3B82F6 55%, #A78BFA 100%);

  /* ── SURFACES (light, default) ───────────────── */
  --fp-bg:        #FAFBFD;   /* page bg — warm off-white */
  --fp-surface-1: #FFFFFF;   /* card bg */
  --fp-surface-2: #F4F6FA;   /* subtle panel */
  --fp-surface-3: #EAEEF5;   /* elevated panel / chip bg */
  --fp-surface-4: #DEE4EE;   /* highest contrast surface */
  --fp-line-1:    #E5EAF2;   /* hairline */
  --fp-line-2:    #CFD6E2;   /* divider */

  /* ── TEXT ───────────────────────────────────── */
  --fp-text-1:    #0F172A;   /* primary — slate 900 */
  --fp-text-2:    #334155;   /* secondary — slate 700 */
  --fp-text-3:    #64748B;   /* tertiary — slate 500 */
  --fp-text-4:    #94A3B8;   /* disabled */

  /* ── STATE TINTS (transparent overlays) ─────── */
  --fp-tint-green-08: color-mix(in oklab, var(--fp-mint-50) 14%, transparent);
  --fp-tint-green-14: color-mix(in oklab, var(--fp-mint-50) 24%, transparent);
  --fp-tint-green-22: color-mix(in oklab, var(--fp-mint-50) 36%, transparent);
  --fp-tint-green-40: color-mix(in oklab, var(--fp-mint-50) 55%, transparent);
  --fp-tint-blue-14:  color-mix(in oklab, var(--fp-sky-50) 24%, transparent);
  --fp-tint-blue-22:  color-mix(in oklab, var(--fp-sky-50) 36%, transparent);
  --fp-tint-blue-40:  color-mix(in oklab, var(--fp-sky-50) 55%, transparent);
  --fp-tint-amber-22: color-mix(in oklab, var(--fp-amber-50) 36%, transparent);
  --fp-tint-red-22:   color-mix(in oklab, var(--fp-red-50) 36%, transparent);

  /* ── SPACING (4dp grid) ──────────────────────── */
  --fp-space-1: 4px;
  --fp-space-2: 8px;
  --fp-space-3: 12px;
  --fp-space-4: 16px;
  --fp-space-5: 20px;
  --fp-space-6: 24px;
  --fp-space-7: 28px;
  --fp-space-8: 32px;
  --fp-space-10: 40px;
  --fp-space-12: 48px;
  --fp-space-14: 56px;
  --fp-space-16: 64px;
  --fp-space-20: 80px;
  --fp-space-24: 96px;
  --fp-space-32: 128px;

  /* ── RADIUS ──────────────────────────────────── */
  --fp-radius-xs: 4px;
  --fp-radius-sm: 6px;
  --fp-radius-md: 10px;
  --fp-radius-lg: 14px;
  --fp-radius-xl: 18px;
  --fp-radius-2xl: 24px;
  --fp-radius-full: 9999px;

  /* ── SHADOWS — softer, lighter for light theme ─ */
  --fp-elev-1: 0 1px 2px rgba(15,23,42,.05), 0 1px 2px rgba(15,23,42,.04);
  --fp-elev-2: 0 4px 12px rgba(15,23,42,.06), 0 1px 3px rgba(15,23,42,.04);
  --fp-elev-3: 0 16px 40px rgba(15,23,42,.10), 0 2px 6px rgba(15,23,42,.05);
  --fp-elev-4: 0 28px 60px -12px rgba(15,23,42,.18);

  /* ── TYPE FAMILIES ───────────────────────────── */
  --fp-font-sans: "Pretendard", "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fp-font-mono: "Roboto Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --fp-font-icon: "Material Symbols Outlined";

  /* ── TYPE SCALE ──────────────────────────────── */
  --fp-text-display-lg: 800 72px/1.04 var(--fp-font-sans);
  --fp-text-display-md: 800 56px/1.05 var(--fp-font-sans);
  --fp-text-display-sm: 700 44px/1.08 var(--fp-font-sans);
  --fp-text-h1:         700 40px/1.10 var(--fp-font-sans);
  --fp-text-h2:         700 32px/1.15 var(--fp-font-sans);
  --fp-text-h3:         600 24px/1.25 var(--fp-font-sans);
  --fp-text-h4:         600 18px/1.35 var(--fp-font-sans);
  --fp-text-body-lg:    400 17px/1.6  var(--fp-font-sans);
  --fp-text-body:       400 15px/1.6  var(--fp-font-sans);
  --fp-text-body-sm:    400 13px/1.55 var(--fp-font-sans);
  --fp-text-caption:    500 12px/1.4  var(--fp-font-sans);
  --fp-text-mono:       500 12px/1.5  var(--fp-font-mono);
  --fp-text-mono-sm:    500 11px/1.5  var(--fp-font-mono);

  /* ── MOTION ──────────────────────────────────── */
  --fp-easing:        cubic-bezier(0.2, 0, 0, 1);
  --fp-easing-decel:  cubic-bezier(0.05, 0.7, 0.1, 1);
  --fp-dur-1: 120ms;
  --fp-dur-2: 200ms;
  --fp-dur-3: 320ms;

  /* ── LAYOUT ──────────────────────────────────── */
  --fp-container-max: 1280px;
  --fp-container-pad: var(--fp-space-8);
  --fp-nav-h: 64px;
}

/* base */
html, body {
  background: var(--fp-bg);
  color: var(--fp-text-1);
  overflow-x: hidden;
}

/* ── AWWWARDS-STYLE AMBIENT — animated mesh + floating shapes + noise ───── */
.fp-ambient {
  position: fixed; inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
/* layer 1: huge animated mesh blobs */
.fp-ambient__mesh {
  position: absolute; inset: -20%;
  background:
    radial-gradient(520px 520px at var(--mx, 30%) var(--my, 25%),
      color-mix(in oklab, #6EE7C7 55%, transparent) 0%, transparent 60%),
    radial-gradient(640px 640px at calc(100% - var(--mx, 70%)) var(--my, 30%),
      color-mix(in oklab, #93C5FD 50%, transparent) 0%, transparent 60%),
    radial-gradient(580px 580px at 78% calc(100% - var(--my, 22%)),
      color-mix(in oklab, #C4B5FD 48%, transparent) 0%, transparent 60%),
    radial-gradient(460px 460px at 18% 88%,
      color-mix(in oklab, #FBCFE8 38%, transparent) 0%, transparent 60%);
  filter: blur(6px) saturate(120%);
  transition: background 700ms cubic-bezier(.2,.8,.2,1);
  animation: fpMeshDrift 24s ease-in-out infinite alternate;
}
@keyframes fpMeshDrift {
  0%   { transform: translate3d(0,0,0) scale(1); }
  50%  { transform: translate3d(3%,-2%,0) scale(1.06) rotate(2deg); }
  100% { transform: translate3d(-3%,2%,0) scale(.96) rotate(-2deg); }
}

/* layer 2: floating geometric shapes (rings/blobs) */
.fp-ambient__shape {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  will-change: transform;
}
.fp-ambient__shape--ring1 {
  top: 8%; left: 6%;
  width: 380px; height: 380px;
  border: 1px solid color-mix(in oklab, #14B886 40%, transparent);
  background: conic-gradient(from 120deg, transparent, color-mix(in oklab, #6EE7C7 30%, transparent), transparent 60%);
  filter: blur(.5px);
  animation: fpFloat1 18s ease-in-out infinite alternate, fpSpin 60s linear infinite;
}
.fp-ambient__shape--ring2 {
  top: 30%; right: 8%;
  width: 280px; height: 280px;
  border: 1.5px dashed color-mix(in oklab, #A78BFA 50%, transparent);
  animation: fpFloat2 22s ease-in-out infinite alternate, fpSpin 90s linear infinite reverse;
}
.fp-ambient__shape--ring3 {
  bottom: 10%; left: 38%;
  width: 220px; height: 220px;
  border: 1px solid color-mix(in oklab, #60A5FA 45%, transparent);
  background: radial-gradient(circle, transparent 70%, color-mix(in oklab, #93C5FD 18%, transparent) 71%);
  animation: fpFloat3 20s ease-in-out infinite alternate;
}
.fp-ambient__shape--blob {
  top: 55%; right: 22%;
  width: 320px; height: 320px;
  background: radial-gradient(circle at 35% 35%,
    color-mix(in oklab, #FCD34D 35%, transparent) 0%,
    color-mix(in oklab, #F9A8D4 25%, transparent) 50%,
    transparent 70%);
  filter: blur(20px);
  animation: fpFloat2 28s ease-in-out infinite alternate;
}
.fp-ambient__shape--orb {
  bottom: -8%; right: -5%;
  width: 520px; height: 520px;
  background: radial-gradient(circle,
    color-mix(in oklab, #C4B5FD 40%, transparent) 0%,
    color-mix(in oklab, #93C5FD 25%, transparent) 40%,
    transparent 70%);
  filter: blur(40px);
  animation: fpFloat1 32s ease-in-out infinite alternate;
}
.fp-ambient__shape--cross {
  top: 12%; left: 50%;
  width: 8px; height: 56px;
  border-radius: 0;
  background: color-mix(in oklab, #14B886 60%, transparent);
  box-shadow:
    24px 24px 0 0 color-mix(in oklab, #14B886 60%, transparent),
   -24px -24px 0 0 color-mix(in oklab, #14B886 60%, transparent);
  opacity: .35;
  animation: fpFloat3 14s ease-in-out infinite alternate, fpSpin 40s linear infinite;
}

@keyframes fpFloat1 {
  0%   { transform: translate(0,0) rotate(0); }
  100% { transform: translate(40px,-30px) rotate(15deg); }
}
@keyframes fpFloat2 {
  0%   { transform: translate(0,0) rotate(0); }
  100% { transform: translate(-50px,40px) rotate(-20deg); }
}
@keyframes fpFloat3 {
  0%   { transform: translate(0,0); }
  100% { transform: translate(30px,-50px); }
}
@keyframes fpSpin {
  to { transform: rotate(360deg); }
}

/* layer 3: spotlight that follows the cursor */
.fp-ambient__cursor {
  position: absolute;
  width: 600px; height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in oklab, #6EE7C7 22%, transparent) 0%, transparent 60%);
  filter: blur(40px);
  transform: translate(-50%, -50%);
  left: var(--cx, 50%); top: var(--cy, 30%);
  transition: left 200ms cubic-bezier(.2,.8,.2,1), top 200ms cubic-bezier(.2,.8,.2,1);
  mix-blend-mode: multiply;
}

/* layer 4: subtle noise overlay (SVG fractal noise) */
.fp-ambient__noise {
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .25 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  opacity: .35;
  mix-blend-mode: multiply;
}

/* layer 5: faint dot grid */
.fp-ambient__grid {
  position: absolute; inset: 0;
  background-image:
    radial-gradient(circle, color-mix(in oklab, #0F172A 7%, transparent) 1px, transparent 1.4px);
  background-size: 32px 32px;
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 40%, black 30%, transparent 90%);
          mask-image: radial-gradient(ellipse 90% 70% at 50% 40%, black 30%, transparent 90%);
  opacity: .5;
}

/* keep page content above ambient layers */
.fp-page, .fp-nav, main, footer { position: relative; z-index: 1; }