@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.css');
@import url('https://fonts.googleapis.com/css2?family=Gaegu:wght@400;700&family=Gowun+Dodum&family=Jua&display=swap');

:root {
  /* Brand */
  --kh-red: #E63946;
  --kh-red-deep: #C42836;
  --kh-red-soft: #FBDCDF;
  --kh-red-wash: #FFF4F5;

  --kh-ink: #1D2533;        /* 로고의 다크 그레이 */
  --kh-ink-2: #33425A;
  --kh-ink-3: #5B6579;
  --kh-ink-4: #8B94A6;

  --kh-yellow: #FFB703;
  --kh-yellow-soft: #FFE6A8;
  --kh-yellow-wash: #FFF7E0;

  --kh-cream: #FFF8F0;
  --kh-cream-2: #FDF1E3;
  --kh-paper: #FFFCF7;

  --kh-mint: #B8E6D5;
  --kh-sky: #CDE7F5;
  --kh-peach: #FFD9C2;
  --kh-lav: #E2DAF5;

  --line: #EAE3D8;
  --line-2: #F4ECDE;

  /* Type */
  --font-sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-display: "Jua", "Pretendard Variable", sans-serif;
  --font-hand: "Gaegu", "Gowun Dodum", sans-serif;
  --font-soft: "Gowun Dodum", "Pretendard Variable", sans-serif;

  /* Radius & shadow */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 32px;
  --r-pill: 999px;

  --shadow-sm: 0 2px 6px rgba(29, 37, 51, 0.06);
  --shadow-md: 0 10px 30px rgba(29, 37, 51, 0.08);
  --shadow-lg: 0 24px 60px rgba(29, 37, 51, 0.12);
  --shadow-red: 0 10px 24px rgba(230, 57, 70, 0.22);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  color: var(--kh-ink);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "ss02", "cv11";
}

/* Utility */
.kh-container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }

.kh-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 52px; padding: 0 28px; border-radius: var(--r-pill);
  font-family: var(--font-sans); font-weight: 700; font-size: 16px;
  border: none; cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.16s ease, background 0.16s ease;
  white-space: nowrap;
}
.kh-btn-primary {
  background: var(--kh-red); color: #fff;
  box-shadow: var(--shadow-red);
}
.kh-btn-primary:hover { background: var(--kh-red-deep); transform: translateY(-1px); }
.kh-btn-ghost {
  background: #fff; color: var(--kh-ink);
  border: 1.5px solid var(--line);
}

.kh-btn-primary img {max-width:25px;}
.kh-btn-ghost:hover { border-color: var(--kh-ink); transform: translateY(-1px); }
.kh-btn-yellow {
  background: var(--kh-yellow); color: var(--kh-ink);
  box-shadow: 0 8px 20px rgba(255, 183, 3, 0.3);
}
.kh-btn-yellow:hover { background: #E6A500; transform: translateY(-1px); }
e
.kh-btn-sm { height: 40px; padding: 0 18px; font-size: 14px; }
.kh-btn-lg { height: 60px; padding: 0 36px; font-size: 18px; }

/* Eyebrow / tags */
.kh-eyebrow {    width: 110px;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px; border-radius: var(--r-pill);
  background: var(--kh-red-wash); color: var(--kh-red);
  font-size: 13px; font-weight: 700; letter-spacing: 0.02em;}
.kh-eyebrow img {max-width:20px;}
.kh-h1 {
  font-family: var(--font-sans);
  font-size: clamp(32px, 4.2vw, 56px);
  font-weight: 800; line-height: 1.25; letter-spacing: -0.02em;
  color: var(--kh-ink); margin: 0;
}22
.kh-h2 {
  font-size: clamp(28px, 3.2vw, 44px);}