/* Shared light palette, navigation and footer. */
:root {
  color-scheme: light;
  --bg-0: #fff;
  --bg-1: #f7faff;
  --surface: rgba(255,255,255,.92);
  --surface-2: #f3f7fd;
  --border: #e1e7f0;
  --border-2: #ccd8e8;
  --t1: #172033;
  --t2: #536177;
  --t3: #64748b;
  --accent: #075fd8;
  --accent-2: #1671ee;
  --accent-ink: #135bb8;
  --accent-bg: #edf5ff;
  --accent-line: #bfd6f5;
  --glow: rgba(76,141,255,.18);
  --ok: #159b72;
  --radius: 20px;
  --radius-sm: 14px;
  --ring: 0 0 0 3px rgba(76,141,255,.45);
  --ease: cubic-bezier(.22,.61,.36,1);
  --font: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;
  font-family: var(--font);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  min-width: 320px;
  background: var(--bg-0);
  color: var(--t1);
  font-size: 16px;
  line-height: 1.7;
  letter-spacing: -.01em;
  word-break: keep-all;
  overflow-wrap: anywhere;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Subtle blue grid on a white background. */
.bg { position: fixed; inset: 0; z-index: -2; overflow: hidden; background: var(--bg-0); }
.bg::before {
  content: "";
  position: absolute; inset: -20% -10% auto -10%;
  height: 120vh;
  background:
    radial-gradient(46% 38% at 78% 8%, rgba(76,141,255,.07), transparent 62%),
    radial-gradient(40% 36% at 12% 6%, rgba(76,141,255,.035), transparent 60%),
    radial-gradient(50% 40% at 50% 0%, rgba(38,196,255,.025), transparent 66%);
  filter: blur(6px);
}
.bg::after {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(58,101,160,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(58,101,160,.035) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(120% 80% at 50% 0%, #000 35%, transparent 78%);
  -webkit-mask-image: radial-gradient(120% 80% at 50% 0%, #000 35%, transparent 78%);
}

a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
svg { display: block; }
:focus-visible { outline: none; box-shadow: var(--ring); border-radius: 12px; }

.skip {
  position: absolute; left: 16px; top: -64px; z-index: 60;
  background: var(--accent); color: #fff;
  padding: 11px 15px; border-radius: 11px; font-weight: 800;
  transition: top .15s var(--ease);
}
.skip:focus { top: 14px; }

.wrap { width: min(100% - 40px, 760px); margin: 0 auto; }

/* ---------------- header ---------------- */
.hdr {
  position: sticky; top: 0; z-index: 30;
  transition: background .3s var(--ease), border-color .3s var(--ease), backdrop-filter .3s var(--ease);
  border-bottom: 1px solid transparent;
}
.hdr.scrolled {
  background: rgba(255,255,255,.94);
  backdrop-filter: saturate(160%) blur(16px);
  -webkit-backdrop-filter: saturate(160%) blur(16px);
  border-bottom-color: var(--border);
}
.hdr-in { display: flex; align-items: center; justify-content: space-between; gap: 14px; height: 80px; }
/* Preserve the supplied logo's aspect ratio on desktop and mobile. */
.logo { display: inline-flex; align-items: center; }
.hdr .logo { max-width: calc(100% - 108px); }
.logo img { display: block; width: 224px; max-width: 100%; height: auto; }
.footer .logo img { width: 190px; }

.hdr-cta {
  display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px;
  border-radius: 999px; font-size: 14px; font-weight: 800; letter-spacing: -.02em;
  color: #fff; background: linear-gradient(135deg, var(--accent-2), var(--accent));
  box-shadow: 0 8px 22px rgba(76,141,255,.18), inset 0 1px 0 rgba(255,255,255,.35);
  transition: transform .14s var(--ease), box-shadow .2s var(--ease), filter .2s var(--ease);
}
.hdr-cta:hover { filter: brightness(1.07); box-shadow: 0 10px 30px rgba(76,141,255,.25); }
.hdr-cta:active { transform: translateY(1px); }
.hdr-cta svg { width: 15px; height: 15px; }
.hdr-cta .full { display: none; }

/* footer */
.footer { margin-top: 92px; border-top: 1px solid var(--border); }
.footer-in { padding: 34px 0; display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.footer-mini { color: var(--t3); font-size: 12.5px; line-height: 1.7; text-align: right; }


@media (min-width: 720px) {
  .hdr-cta .full { display: inline; }
  .hdr-cta .short { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}