/* ============ MAECHULUTION — design tokens & base ============ */
@font-face {
  font-family: 'Pretendard';
  font-weight: 45 920;
  font-style: normal;
  font-display: swap;
  src: url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/woff2/PretendardVariable.woff2') format('woff2-variations');
}

:root {
  /* color — overridable by Tweaks */
  --blue: #00B7FF;
  --blue-600: #00A0E0;
  --blue-700: #0086C2;
  --blue-tint: #E9F8FF;
  --blue-tint-2: #D4F1FF;

  --bg: #FFFFFF;
  --bg-soft: #F5F7FA;
  --ink: #141619;
  --ink-soft: #3A3F45;
  --muted: #767C85;
  --line: #E7EBF0;
  --line-strong: #D7DDE5;

  /* type scale — multiplied by --type-scale from Tweaks */
  --type-scale: 1;
  --step-display: clamp(2.6rem, calc(1.4rem + 5.4vw), 6.4rem);
  --step-h-eng: clamp(2.8rem, calc(1rem + 8vw), 9rem);
  --step-h1: clamp(2rem, calc(1.2rem + 2.6vw), 3.4rem);
  --step-h2: clamp(1.6rem, calc(1.1rem + 1.6vw), 2.4rem);
  --step-num: clamp(3rem, calc(1.6rem + 5vw), 5.6rem);
  --step-body: clamp(1rem, calc(0.94rem + 0.3vw), 1.18rem);

  --maxw: 1240px;
  --gutter: clamp(1.25rem, 4vw, 4rem);
  --radius: 18px;
  --radius-sm: 12px;

  --shadow-1: 0 2px 8px rgba(20,30,50,.05);
  --shadow-2: 0 18px 50px -20px rgba(20,40,70,.22);
  --shadow-blue: 0 22px 60px -22px rgba(0,150,210,.55);

  --ease: cubic-bezier(.22,.61,.36,1);

  --reveal-dist: 26px;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 92px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  background: var(--bg);
  color: var(--ink);
  font-size: calc(var(--step-body) * var(--type-scale));
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  letter-spacing: -0.01em;
  overflow-x: hidden;
}

h1, h2, h3, h4, p { margin: 0; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
ul { margin: 0; padding: 0; list-style: none; }

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

section { position: relative; }

/* section vertical rhythm */
.sec { padding-block: clamp(5rem, 11vw, 10rem); }
.sec--tight { padding-block: clamp(3.5rem, 7vw, 6rem); }

/* eyebrow / kicker */
.kicker {
  display: inline-flex;
  align-items: center;
  gap: .55em;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--blue-700);
}
.kicker::before {
  content: "";
  width: 26px; height: 1px;
  background: var(--blue);
}
.kicker--plain::before { display: none; }

.eng-label {
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--muted);
}

/* buttons */
.btn {
  --b: var(--blue);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55em;
  font-family: inherit;
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  padding: 1.02em 1.85em;
  border-radius: 999px;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: transform .35s var(--ease), background .25s var(--ease),
              box-shadow .35s var(--ease), color .25s var(--ease), border-color .25s;
  will-change: transform;
}
.btn svg { width: 1.1em; height: 1.1em; }
.btn--primary {
  background: var(--blue);
  color: #fff;
  box-shadow: 0 12px 30px -12px rgba(0,150,210,.6);
}
.btn--primary:hover {
  background: var(--blue-700);
  transform: translateY(-3px);
  box-shadow: 0 20px 40px -14px rgba(0,150,210,.7);
}
.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line-strong);
}
.btn--ghost:hover {
  border-color: var(--blue);
  color: var(--blue-700);
  transform: translateY(-3px);
}
.btn--kakao {
  background: #FEE500;
  color: #191600;
  box-shadow: 0 12px 30px -12px rgba(180,160,0,.5);
}
.btn--kakao:hover { transform: translateY(-3px); box-shadow: 0 20px 40px -14px rgba(180,160,0,.55); }
.btn--on-blue {
  background: #fff;
  color: var(--blue-700);
}
.btn--on-blue:hover { transform: translateY(-3px); box-shadow: 0 20px 44px -16px rgba(0,0,0,.35); }
.btn--ghost-on-blue {
  background: transparent;
  color: #fff;
  border-color: rgba(255,255,255,.55);
}
.btn--ghost-on-blue:hover { border-color:#fff; background: rgba(255,255,255,.1); transform: translateY(-3px); }

/* reveal animation */
[data-reveal] {
  opacity: 0;
  transform: translateY(var(--reveal-dist));
  transition: opacity .9s var(--ease), transform .9s var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
}
[data-reveal].is-in { opacity: 1; transform: none; }

html.no-motion [data-reveal] { opacity: 1 !important; transform: none !important; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
}

/* utility */
.divider { height: 1px; background: var(--line); width: 100%; }