/* 알파75 — Light Blue Theme (Pretendard-only, tabular-nums for data) */

:root {
  color-scheme: light;

  /* Brand Blues */
  --blue-deep:    #185FA5;
  --blue:         #378ADD;
  --blue-bright:  #3A94D8;
  --blue-sky:     #6AABDF;

  /* Surfaces */
  --white:        #FFFFFF;
  --tint:         #EAF2FB;
  --tint-soft:    #F5F9FE;

  /* Ink */
  --ink-900:      #0F172A;
  --ink-700:      #334155;
  --ink-600:      #475569;
  --ink-500:      #64748B;
  --ink-400:      #94A3B8;
  --ink-200:      #CBD5E1;
  --ink-100:      #E2E8F0;
  --ink-50:       #F8FAFC;

  /* Semantics */
  --success:      #10B981;
  --success-600:  #059669;
  --danger:       #EF4444;
  --danger-600:   #DC2626;

  /* Radii */
  --r-sm: 10px;
  --r-md: 12px;
  --r-lg: 14px;
  --r-xl: 18px;
  --r-2xl: 24px;

  /* Shadow */
  --sh-1: 0 1px 2px rgba(15,23,42,.04);
  --sh-2: 0 2px 8px rgba(15,23,42,.04), 0 1px 2px rgba(15,23,42,.03);
  --sh-3: 0 10px 28px -14px rgba(24,95,165,.28), 0 2px 6px rgba(15,23,42,.04);
  --sh-blue: 0 18px 48px -18px rgba(24,95,165,.35);

  /* Motion */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-sm: 200ms;
  --dur-md: 300ms;

  /* Gradient */
  --grad-brand: linear-gradient(135deg, #378ADD 0%, #185FA5 100%);
  --grad-brand-soft: linear-gradient(135deg, rgba(55,138,221,.12), rgba(24,95,165,.10));
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--white);
  color: var(--ink-900);
  font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01", "ss02";
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

p, h1, h2, h3, h4, li { word-break: keep-all; }

/* Tabular numerals for any numeric/data display */
.num, [data-count], .bento__value, .market__cagr-num, .market__bar-val,
.market__bar-year, .milestone__year, .donut-card__val, .kpi__value,
.phase__pct, .spark__val {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "ss01";
}

/* Container */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Section rhythm */
section { padding: 96px 0; }
section.tight { padding: 80px 0; }

/* Headings */
.h-section {
  font-size: clamp(32px, 4.2vw, 48px);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.03em;
  color: var(--ink-900);
  margin: 0;
}
.grad {
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Eyebrow (Pretendard replacement for mono) */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue-deep);
}
.eyebrow::before {
  content: "";
  width: 24px;
  height: 2px;
  border-radius: 2px;
  background: var(--grad-brand);
}

/* Chips */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--ink-50);
  color: var(--ink-600);
  border: 1px solid var(--ink-100);
}
.chip--brand { background: rgba(55,138,221,.10); color: var(--blue-deep); border-color: rgba(55,138,221,.20); }
.chip--green { background: rgba(16,185,129,.10); color: var(--success-600); border-color: rgba(16,185,129,.22); }
.chip--red   { background: rgba(239,68,68,.10); color: var(--danger-600); border-color: rgba(239,68,68,.22); }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 46px;
  padding: 0 20px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.005em;
  border: 1px solid transparent;
  transition: transform var(--dur-sm) var(--ease), box-shadow var(--dur-sm) var(--ease), background-color var(--dur-sm) var(--ease), border-color var(--dur-sm) var(--ease);
  cursor: pointer;
  white-space: nowrap;
}
.btn--grad {
  background: var(--grad-brand);
  color: white;
  box-shadow: 0 12px 28px -14px rgba(24,95,165,.55);
}
.btn--grad:hover { transform: translateY(-1px); box-shadow: 0 18px 36px -14px rgba(24,95,165,.6); }

.btn--outline {
  background: white;
  color: var(--ink-900);
  border-color: var(--ink-100);
}
.btn--outline:hover {
  background: var(--tint-soft);
  border-color: var(--blue-sky);
  transform: translateY(-1px);
}

.btn--ir {
  background: white;
  color: var(--blue-deep);
  border-color: var(--ink-100);
  box-shadow: var(--sh-2);
}
.btn--ir:hover {
  background: var(--tint);
  border-color: var(--blue-sky);
  transform: translateY(-1px);
  box-shadow: var(--sh-3);
}
.btn--ghost-dark {
  background: transparent;
  color: var(--blue-deep);
  border-color: var(--ink-100);
}
.btn--ghost-dark:hover { background: var(--tint-soft); border-color: var(--blue-sky); }

/* NAV */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255,255,255,.85);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid rgba(226,232,240,.7);
}
.nav__inner {
  display: flex;
  align-items: center;
  height: 88px;
}
.nav__logo { display: inline-flex; align-items: center; }
.nav__logo-img { height: 64px; width: auto; display: block; }
.nav__menu { display: flex; gap: 4px; }
.nav__link {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 14px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-600);
  border-radius: 999px;
  transition: color var(--dur-sm) var(--ease), background var(--dur-sm) var(--ease);
}
.nav__link:hover { color: var(--blue-deep); background: var(--tint-soft); }
.nav__link.active { color: var(--blue-deep); background: var(--tint); }

/* FOOTER */
.footer {
  background: var(--tint-soft);
  border-top: 1px solid var(--ink-100);
  padding: 56px 0 40px;
}
.footer__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}
.footer__logo-img { height: 56px; width: auto; display: block; }
.footer__nav { display: flex; gap: 32px; flex-wrap: wrap; justify-content: center; }
.footer__nav a {
  font-size: 14px;
  color: var(--ink-500);
  transition: color var(--dur-sm) var(--ease);
}
.footer__nav a:hover { color: var(--blue-deep); }
.footer__copy { font-size: 12px; color: var(--ink-400); letter-spacing: 0.04em; }
@media (max-width: 720px) {
  .footer__nav { gap: 18px; }
}

/* Reveal */
.reveal { opacity: 0; transform: translateY(12px); transition: opacity 600ms var(--ease), transform 600ms var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }
.reveal-d1 { transition-delay: 80ms; }
.reveal-d2 { transition-delay: 160ms; }
.reveal-d3 { transition-delay: 240ms; }

/* Animations */
@keyframes rotateSlow { from { transform: rotate(0deg);} to { transform: rotate(360deg);} }
@keyframes floatAtgc {
  0%   { transform: translateY(0) translateX(0); opacity: 0; }
  10%  { opacity: .35; }
  50%  { transform: translateY(-30px) translateX(10px); }
  90%  { opacity: .35; }
  100% { transform: translateY(-60px) translateX(0); opacity: 0; }
}

/* Background patterns */
.dot-bg {
  background-image: radial-gradient(rgba(24,95,165,.12) 1px, transparent 1px);
  background-size: 20px 20px;
}
.grid-bg {
  background-image:
    linear-gradient(rgba(24,95,165,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(24,95,165,.06) 1px, transparent 1px);
  background-size: 36px 36px;
}