/* ============================================================================
 * Kkachi Design System — Combined Stylesheet
 * All tokens (fonts, colors, typography, spacing, effects) + landing page CSS
 * ========================================================================== */

/* --- Google Fonts --------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Noto+Sans+KR:wght@400;500;700&display=swap');

/* --- Design Tokens -------------------------------------------------------- */
:root {
  /* Brand / accent */
  --color-accent: #2B5CF0;
  --color-accent-hover: #1E45D1;
  --color-accent-soft: #EDF1FE;

  /* Practice / Go */
  --color-go: #07C281;
  --color-go-hover: #05A36C;
  --color-go-soft: #E2FAF1;

  /* Persimmon coral */
  --color-coral: #FF5A2C;
  --color-coral-hover: #E8410F;
  --color-coral-ink: #B5350A;
  --color-coral-bg: #FFEDE5;
  --color-coral-border: #FFD0BC;

  /* Marigold */
  --color-marigold: #FFA600;
  --color-marigold-ink: #A85A07;
  --color-marigold-bg: #FFF3DC;

  /* Surfaces */
  --color-background: #FCF6EC;
  --color-surface: #FFFFFF;
  --color-surface-sunken: #F6F0E4;

  /* Ink (text) */
  --color-ink: #16181D;
  --color-ink-light: #5C5F66;
  --color-ink-muted: #9A9DA5;

  /* Lines */
  --color-border: #E5E7EB;
  --color-border-strong: #D1D5DB;

  /* Feedback */
  --color-success: #22C55E;
  --color-success-ink: #15803D;
  --color-success-bg: #F0FDF4;
  --color-success-border: #BBF7D0;
  --color-error: #EF4444;
  --color-error-ink: #B91C1C;
  --color-error-bg: #FEF2F2;
  --color-error-border: #FECACA;

  /* Level tags */
  --color-level-1: #2B5CF0;
  --color-level-1-ink: #1E45D1;
  --color-level-1-bg: #EDF1FE;
  --color-level-1-border: #D7E0FD;
  --color-level-2: #7C4DFF;
  --color-level-2-ink: #5B21B6;
  --color-level-2-bg: #F3EEFF;
  --color-level-2-border: #E4D8FF;
  --color-level-3: #FF5A2C;
  --color-level-3-ink: #B5350A;
  --color-level-3-bg: #FFEDE5;
  --color-level-3-border: #FFD0BC;

  /* Reward */
  --color-reward: #FFA600;
  --color-reward-bg: #FFF3DC;
  --color-heart: #FB3B3B;

  /* Mascot */
  --mascot-blue: #2F5BE0;
  --mascot-blue-facet: #3F6BEC;
  --mascot-blue-deep: #16307A;
  --mascot-blue-mid: #25409A;
  --mascot-belly: #FFFFFF;
  --mascot-beak: #FBA823;
  --mascot-beak-deep: #E8551E;
  --mascot-foot: #F2871C;
  --mascot-cheek: #F4856B;
  --mascot-eye: #16181D;
  --mascot-spark: #FCB823;
  --mascot-spark-coral: #F4856B;

  /* Korean Runner (dark game theme) */
  --runner-navy: #1E293B;
  --runner-sky: #6FB1E8;
  --runner-accent: #4FA3F0;
  --runner-prompt-bg: #2F3E4D;
  --runner-prompt-border: #FACC15;
  --runner-prompt-text: #FACC15;
  --runner-obstacle: #64748B;

  /* Neutral ramp */
  --gray-50: #F9FAFB;
  --gray-100: #F3F4F6;
  --gray-200: #E5E7EB;
  --gray-300: #D1D5DB;
  --gray-400: #9CA3AF;
  --gray-500: #6B7280;
  --gray-600: #4B5563;
  --gray-700: #374151;
  --gray-800: #1F2937;
  --gray-900: #111827;

  /* Semantic aliases */
  --text-primary: var(--color-ink);
  --text-secondary: var(--color-ink-light);
  --text-muted: var(--color-ink-muted);
  --text-on-accent: #FFFFFF;
  --action-primary: var(--color-accent);
  --action-practice: var(--color-go);
  --surface-page: var(--color-background);
  --surface-card: var(--color-surface);
  --border-default: var(--color-border);
  --focus-ring: var(--color-accent);

  /* Typography */
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-korean: 'Noto Sans KR', 'Inter', sans-serif;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-lg: 18px;
  --text-xl: 20px;
  --text-2xl: 24px;
  --text-3xl: 30px;
  --text-4xl: 36px;
  --leading-tight: 1.15;
  --leading-snug: 1.3;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;
  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.05em;

  /* Spacing */
  --space-0: 0px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* Radii */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgba(0,0,0,0.05);
  --shadow-card: 0 4px 6px -1px rgba(0,0,0,0.05), 0 2px 4px -1px rgba(0,0,0,0.03);
  --shadow-elevated: 0 10px 15px -3px rgba(0,0,0,0.08), 0 4px 6px -2px rgba(0,0,0,0.04);
  --shadow-lg: 0 10px 25px -5px rgba(0,0,0,0.12);
  --shadow-chunky: 0 8px 0 -2px rgba(22,24,29,0.04), 0 14px 24px -8px rgba(176,90,30,0.18);
  --shadow-pop-accent: 0 8px 18px -6px rgba(43,92,240,0.45);
  --shadow-pop-go: 0 8px 18px -6px rgba(7,194,129,0.42);

  /* Motion */
  --dur-fast: 150ms;
  --dur-base: 200ms;
  --dur-slide: 300ms;
  --dur-flip: 500ms;
  --ease-out: ease-out;
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-sheet: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-pop: cubic-bezier(0.34, 1.56, 0.64, 1);
  --press-scale: 0.96;
  --lift-hover: -4px;
  --backdrop: rgba(0,0,0,0.4);
  --backdrop-blur: 4px;

  /* Containers */
  --container-app: 512px;
  --container-browse: 1024px;
}

/* --- Keyframes ------------------------------------------------------------ */
@keyframes hs-slide-up { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes hs-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes hs-pulse-slow { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
@keyframes hs-ping { 75%, 100% { transform: scale(2); opacity: 0; } }
@keyframes hs-pop-in { 0% { transform: scale(0.8); opacity: 0; } 60% { transform: scale(1.05); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
@keyframes hs-enter { 0% { transform: scale(0.7); } 60% { transform: scale(1.06); } 100% { transform: scale(1); } }
@keyframes hs-wiggle { 0%, 100% { transform: rotate(0deg); } 25% { transform: rotate(-6deg); } 75% { transform: rotate(6deg); } }
@keyframes hs-spin { to { transform: rotate(360deg); } }

/* ============================================================================
 * Landing Page Styles
 * ========================================================================== */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--color-background);
  color: var(--text-primary);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
::selection { background: var(--color-accent); color: #fff; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p { margin: 0; }

.lp-container { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 24px; }

/* ---- Nav ---- */
.lp-nav {
  position: sticky; top: 0; z-index: 100;
  background: color-mix(in srgb, var(--color-background) 86%, transparent);
  backdrop-filter: saturate(1.2) blur(12px);
  -webkit-backdrop-filter: saturate(1.2) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s, background .2s;
}
.lp-nav.scrolled { border-bottom-color: var(--color-border); }
.lp-nav-inner { display: flex; align-items: center; justify-content: space-between; height: 68px; }
.lp-nav-links { display: flex; align-items: center; gap: 30px; }
.lp-nav-links a { font-size: 15px; font-weight: 500; color: var(--text-secondary); transition: color .15s; }
.lp-nav-links a:hover { color: var(--text-primary); }
@media (max-width: 860px) { .lp-nav-links { display: none; } }

/* ---- Section rhythm ---- */
.lp-section { padding: 96px 0; }
.lp-section-sm { padding: 72px 0; }
@media (max-width: 720px) { .lp-section { padding: 64px 0; } .lp-section-sm { padding: 48px 0; } }

.lp-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--color-accent);
}
.lp-h2 {
  font-size: clamp(30px, 4.4vw, 46px); font-weight: 700; letter-spacing: -0.025em;
  line-height: 1.08; text-wrap: balance;
}
.lp-lead { font-size: clamp(17px, 1.6vw, 20px); line-height: 1.6; color: var(--text-secondary); text-wrap: pretty; }
.ko { font-family: var(--font-korean); }

/* ---- Hero ---- */
.lp-hero { position: relative; padding: 56px 0 40px; overflow: hidden; }
.lp-hero-wash {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(680px 460px at 88% -8%, var(--color-accent-soft), transparent 62%),
    radial-gradient(620px 520px at -6% 108%, var(--color-coral-bg), transparent 60%);
}
.lp-hero-grid {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 40px; align-items: center;
}
@media (max-width: 940px) {
  .lp-hero-grid { grid-template-columns: 1fr; gap: 8px; text-align: center; }
  .lp-hero-phones { order: 2; margin-top: 28px; }
  .lp-hero-copy { order: 1; align-items: center; }
  .lp-cta-row, .lp-trust { justify-content: center; }
}
.lp-hero-copy { display: flex; flex-direction: column; align-items: flex-start; }
.lp-h1 {
  font-size: clamp(40px, 6vw, 68px); font-weight: 700; letter-spacing: -0.03em;
  line-height: 1.02; margin: 18px 0 0; text-wrap: balance;
}
.lp-h1 .accent { color: var(--color-accent); }
.lp-cta-row { display: flex; align-items: center; gap: 14px; margin-top: 30px; flex-wrap: wrap; }
.lp-trust { display: flex; align-items: center; gap: 8px 18px; margin-top: 22px; flex-wrap: wrap; color: var(--text-muted); font-size: 14px; }
.lp-trust .dot { width: 4px; height: 4px; border-radius: 50%; background: var(--color-border-strong); }
.lp-trust .item { display: inline-flex; align-items: center; gap: 7px; }

.lp-hero-phones { position: relative; display: flex; justify-content: center; align-items: center; min-height: 600px; }

/* ---- Generic CTA / link button ---- */
.lp-textlink { display: inline-flex; align-items: center; gap: 6px; font-size: 16px; font-weight: 600; color: var(--color-accent); }
.lp-textlink:hover { color: var(--color-accent-hover); }

/* ---- Mode cards ---- */
.lp-modes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 48px; }
@media (max-width: 820px) { .lp-modes { grid-template-columns: 1fr; gap: 16px; } }
.lp-mode-icon {
  width: 52px; height: 52px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 18px;
}

/* ---- Split feature rows ---- */
.lp-split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.lp-split.rev .lp-split-media { order: 2; }
@media (max-width: 900px) { .lp-split { grid-template-columns: 1fr; gap: 32px; } .lp-split.rev .lp-split-media { order: 0; } }
.lp-split-media { display: flex; justify-content: center; }

/* ---- Decks ---- */
.lp-levels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 44px; }
@media (max-width: 820px) { .lp-levels { grid-template-columns: 1fr; gap: 16px; } }

/* ---- Game (dark) ---- */
.lp-game { background: var(--runner-navy); color: #fff; border-radius: 32px; overflow: hidden; position: relative; }
.lp-game-wash { position: absolute; inset: 0; background: radial-gradient(560px 360px at 82% 12%, rgba(79,163,240,0.25), transparent 60%); pointer-events: none; }

/* ---- Pricing ---- */
.lp-pricing { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 44px; align-items: stretch; }
@media (max-width: 760px) { .lp-pricing { grid-template-columns: 1fr; gap: 18px; } }
.lp-price-card { display: flex; flex-direction: column; height: 100%; }
.lp-feat { display: flex; align-items: flex-start; gap: 11px; padding: 9px 0; font-size: 15.5px; line-height: 1.4; }

/* ---- Footer ---- */
.lp-footer { background: var(--color-ink); color: #fff; padding: 64px 0 40px; }
.lp-footer a { color: rgba(255,255,255,0.72); font-size: 14.5px; transition: color .15s; }
.lp-footer a:hover { color: #fff; }

/* ---- Entrance animations ---- */
.reveal { opacity: 1; }
.lp-hero-copy { animation: lp-reveal .7s var(--ease-out) both; }
.lp-hero-phones { animation: lp-reveal .8s .12s var(--ease-out) both; }
@keyframes lp-reveal { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }

/* ---- Mascot animation ---- */
.lp-hero-mascot {
  position: absolute;
  bottom: 0;
  left: 50%;
  margin-left: -80px;
  width: 160px;
  height: 160px;
  z-index: 3;
  filter: drop-shadow(0 8px 16px rgba(22,24,29,0.25));
  opacity: 0;
  transform: scale(0.3);
  pointer-events: none;
}

/* SVG group transform origins */
.mascot-ear-feathers { transform-origin: 140px 66px; }
.mascot-tail { transform-origin: 150px 196px; }
.mascot-face { transform-origin: 138px 165px; }
.mascot-eyes-idle { transform-origin: 138px 147px; }
.mascot-wings-idle { transform-origin: 140px 170px; }
.mascot-wings-cheer { transform-origin: 140px 140px; }
.mascot-sparkles > * { transform-box: fill-box; transform-origin: center; }

/* Cheer-only elements hidden by default */
.mascot-wings-cheer,
.mascot-eyes-cheer,
.mascot-mouth-cheer,
.mascot-sparkles { opacity: 0; }

/* --- Entrance keyframes --- */
@keyframes mascot-enter {
  0% { opacity: 0; transform: scale(0.3); }
  50% { opacity: 1; transform: scale(1.12); }
  70% { transform: scale(0.95); }
  85% { transform: scale(1.05); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes mascot-ears-spring {
  0% { transform: scaleY(0.3) translateY(8px); }
  40% { transform: scaleY(1.3) translateY(-4px); }
  70% { transform: scaleY(0.9) translateY(1px); }
  100% { transform: scaleY(1) translateY(0); }
}

/* --- Idle loop keyframes (irrational duration ratios for organic feel) --- */
@keyframes mascot-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
@keyframes mascot-blink {
  0%, 38%, 42%, 100% { transform: scaleY(1); }
  40% { transform: scaleY(0.1); }
}
@keyframes mascot-tail-wag {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(8deg); }
  75% { transform: rotate(-8deg); }
}
@keyframes mascot-wing-flutter {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06) rotate(-3deg); }
}
@keyframes mascot-foot-tap {
  0%, 40%, 100% { transform: translateY(0); }
  20% { transform: translateY(-6px); }
}
@keyframes mascot-face-tilt {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(2deg); }
  75% { transform: rotate(-2deg); }
}
@keyframes mascot-cheek-pulse {
  0%, 100% { opacity: 0.8; }
  50% { opacity: 1; }
}

/* --- Celebration keyframes --- */
@keyframes mascot-cheer-bounce {
  0% { transform: translateY(0) scaleX(1) scaleY(1); }
  15% { transform: translateY(4px) scaleX(1.08) scaleY(0.92); }
  40% { transform: translateY(-18px) scaleX(0.94) scaleY(1.08); }
  60% { transform: translateY(2px) scaleX(1.04) scaleY(0.96); }
  80% { transform: translateY(-6px) scaleX(0.98) scaleY(1.02); }
  100% { transform: translateY(0) scaleX(1) scaleY(1); }
}
@keyframes mascot-wing-cheer {
  0% { transform: scale(0.3); opacity: 0; }
  30% { transform: scale(1.1); opacity: 1; }
  45% { transform: scaleX(1.15); }
  55% { transform: scaleX(0.95); }
  65% { transform: scaleX(1.1); }
  75% { transform: scaleX(0.98); }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes mascot-sparkle-pop {
  0% { transform: scale(0) rotate(-30deg); opacity: 0; }
  50% { transform: scale(1.3) rotate(10deg); opacity: 1; }
  100% { transform: scale(0) rotate(30deg); opacity: 0; }
}

/* --- Entered state: entrance + idle loops --- */
.lp-hero-mascot.mascot--entered {
  animation: mascot-enter 0.7s var(--ease-pop) forwards;
}
.mascot--entered .mascot-root { animation: mascot-bob 3s ease-in-out 0.8s infinite; }
.mascot--entered .mascot-ear-feathers { animation: mascot-ears-spring 0.5s var(--ease-pop) 0.3s both; }
.mascot--entered .mascot-eyes-idle { animation: mascot-blink 4s ease-in-out 1s infinite; }
.mascot--entered .mascot-tail { animation: mascot-tail-wag 2.5s ease-in-out infinite; }
.mascot--entered .mascot-wings-idle { animation: mascot-wing-flutter 2s ease-in-out infinite; }
.mascot--entered .mascot-foot-left { animation: mascot-foot-tap 3s ease-in-out infinite; }
.mascot--entered .mascot-foot-right { animation: mascot-foot-tap 3s ease-in-out 1.5s infinite; }
.mascot--entered .mascot-face { animation: mascot-face-tilt 4.5s ease-in-out infinite; }
.mascot--entered .mascot-cheeks { animation: mascot-cheek-pulse 3s ease-in-out infinite; }

/* --- Cheer state (layered on entered) --- */
.mascot--cheer .mascot-root { animation: mascot-cheer-bounce 1.2s var(--ease-pop); }
.mascot--cheer .mascot-wings-idle { opacity: 0; }
.mascot--cheer .mascot-wings-cheer { opacity: 1; animation: mascot-wing-cheer 1s var(--ease-pop) forwards; }
.mascot--cheer .mascot-eyes-idle { opacity: 0; }
.mascot--cheer .mascot-eyes-cheer { opacity: 1; }
.mascot--cheer .mascot-mouth-cheer { opacity: 1; }
.mascot--cheer .mascot-sparkles { opacity: 1; }
.mascot--cheer .mascot-sparkles > :nth-child(1) { animation: mascot-sparkle-pop 0.8s var(--ease-pop) both; }
.mascot--cheer .mascot-sparkles > :nth-child(2) { animation: mascot-sparkle-pop 0.8s var(--ease-pop) 0.1s both; }
.mascot--cheer .mascot-sparkles > :nth-child(3) { animation: mascot-sparkle-pop 0.8s var(--ease-pop) 0.15s both; }
.mascot--cheer .mascot-sparkles > :nth-child(4) { animation: mascot-sparkle-pop 0.8s var(--ease-pop) 0.2s both; }
.mascot--cheer .mascot-sparkles > :nth-child(5) { animation: mascot-sparkle-pop 0.8s var(--ease-pop) 0.25s both; }

/* Confetti pseudo-particles */
.lp-hero-mascot.mascot--cheer::before,
.lp-hero-mascot.mascot--cheer::after {
  content: '';
  position: absolute;
  width: 6px; height: 6px;
  border-radius: 50%;
  top: 15%; left: 50%;
  pointer-events: none;
  animation: mascot-sparkle-pop 1s ease-out forwards;
}
.lp-hero-mascot.mascot--cheer::before {
  box-shadow:
    -30px -10px 0 0 var(--mascot-spark),
    20px -20px 0 0 var(--mascot-spark-coral),
    -40px 10px 0 0 var(--color-accent),
    35px -5px 0 0 var(--mascot-spark),
    -10px -30px 0 0 var(--color-go);
}
.lp-hero-mascot.mascot--cheer::after {
  box-shadow:
    -25px -25px 0 0 var(--mascot-spark-coral),
    30px -15px 0 0 var(--mascot-spark),
    -15px -5px 0 0 var(--color-go),
    40px -25px 0 0 var(--color-accent),
    15px 5px 0 0 var(--mascot-spark-coral);
  animation-delay: 0.15s;
}

/* --- Mascot responsive --- */
@media (max-width: 940px) {
  .lp-hero-mascot {
    position: relative;
    bottom: auto;
    left: auto;
    margin: -20px auto 0;
    width: 120px;
    height: 120px;
  }
}
@media (max-width: 480px) {
  .lp-hero-mascot { width: 100px; height: 100px; }
  .lp-hero-mascot::before,
  .lp-hero-mascot::after { display: none; }
}

/* ---- Runner game demo keyframes ---- */
@keyframes runBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes runMic { 0% { transform: scaleY(0.4); } 100% { transform: scaleY(1.4); } }
@keyframes runPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }

/* ---- Scroll reveal ---- */
.lp-reveal-target { opacity: 0; transform: translateY(24px); transition: opacity 0.6s var(--ease-standard), transform 0.6s var(--ease-standard); }
.lp-reveal-target.visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .lp-hero-copy, .lp-hero-phones { animation: none; }
  .lp-reveal-target { opacity: 1; transform: none; }
  .lp-hero-mascot { opacity: 1 !important; transform: scale(1) !important; }
  * { animation: none !important; }
}