/* ============================================================
   KONIVO — Stripe-inspired Design System
   Based on DESIGN-stripe.md (version: alpha)
   Tokens: primary #533afd, ink #0d253d, canvas #fff, canvas-soft #f6f9fc
   Font: Inter 300 (Sohne substitute via Google Fonts)
   ============================================================ */

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

/* ── CSS Variables (DESIGN-stripe.md 기준) ── */
:root {
  /* Brand & Accent */
  --clr-primary:        #533afd;   /* Stripe 시그니처 인디고 CTA */
  --clr-primary-deep:   #4434d4;   /* 그라디언트 미드스톱, 프레스 대안 */
  --clr-primary-press:  #2e2b8c;   /* 프레스 상태 */
  --clr-primary-soft:   #665efd;   /* 제품 UI 악센트 */
  --clr-primary-sub:    #b9b9f9;   /* 소프트 태그 배경 */
  --clr-dark-900:       #1c1e54;   /* 피처드 플랜 + 대시보드 크롬 */
  --clr-ruby:           #ea2261;   /* 그라디언트 악센트, 차트 강조 */
  --clr-magenta:        #f96bee;   /* 그라디언트 메시 핑크 스톱 */
  --clr-lemon:          #9b6829;   /* 셔벗 웜 스톱 */
  --clr-shadow-blue:    #003770;   /* 쉐도우 기준 */

  /* Surface */
  --clr-canvas:         #ffffff;
  --clr-canvas-soft:    #f6f9fc;
  --clr-canvas-cream:   #f5e9d4;
  --clr-hairline:       #e3e8ee;
  --clr-hairline-input: #a8c3de;

  /* Text */
  --clr-ink:            #0d253d;   /* 딥 네이비, 기본 텍스트 */
  --clr-ink-2:          #273951;   /* 세컨더리 텍스트 */
  --clr-ink-mute:       #64748d;   /* 헬퍼 텍스트, 캡션 */
  --clr-ink-mute-2:     #61718a;   /* 네비 텍스트 */
  --clr-on-primary:     #ffffff;

  /* Border Radius (DESIGN-stripe.md) */
  --r-xs:   4px;
  --r-sm:   6px;
  --r-md:   8px;
  --r-lg:   12px;
  --r-xl:   16px;
  --r-pill: 9999px;

  /* Spacing (DESIGN-stripe.md) */
  --sp-xxs: 2px;
  --sp-xs:  4px;
  --sp-sm:  8px;
  --sp-md:  12px;
  --sp-lg:  16px;
  --sp-xl:  24px;
  --sp-xxl: 32px;
  --sp-huge: 64px;

  /* Elevation (shadow-blue 기준) */
  --shadow-1: 0 1px 3px rgba(0,55,112,0.08);
  --shadow-2: 0 8px 24px rgba(0,55,112,0.08), 0 2px 6px rgba(0,55,112,0.04);
  --shadow-3: 0 16px 48px rgba(0,55,112,0.10), 0 4px 12px rgba(0,55,112,0.05);

  /* Legacy compat — old pages used these names */
  --bg:           var(--clr-canvas);
  --bg2:          var(--clr-canvas-soft);
  --surface:      var(--clr-canvas);
  --border:       var(--clr-hairline);
  --border2:      var(--clr-hairline-input);
  --accent:       var(--clr-primary-deep);
  --accent2:      var(--clr-primary);
  --accent-light: var(--clr-primary-sub);
  --accent-mid:   #d4d1fe;
  --point:        var(--clr-ruby);
  --point-light:  #fde8ef;
  --text:         var(--clr-ink);
  --text2:        var(--clr-ink-2);
  --muted:        var(--clr-ink-mute);
  --muted2:       var(--clr-ink-mute-2);
  --success:      #10b981;
}

/* ── Base Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  font-feature-settings: "ss01";   /* Stripe 글로벌 ss01 */
}

body {
  font-family: 'Noto Sans KR', 'Inter', 'SF Pro Display', system-ui, -apple-system, sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--clr-ink);
  background: var(--clr-canvas);
  font-feature-settings: "ss01";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Typography Scale — Stripe 실제 weight 적용 ── */
.t-display-xxl {
  font-size: clamp(36px, 5vw, 56px);
  font-weight: 700;
  line-height: 1.03;
  letter-spacing: -1.4px;
  font-feature-settings: "ss01";
}
.t-display-xl {
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.96px;
  font-feature-settings: "ss01";
}
.t-display-lg {
  font-size: clamp(24px, 3vw, 36px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.64px;
  font-feature-settings: "ss01";
}
.t-display-md {
  font-size: 26px;
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.52px;
  font-feature-settings: "ss01";
}
.t-heading-lg  { font-size: 22px; font-weight: 600; line-height: 1.2;  letter-spacing: -0.44px; }
.t-heading-md  { font-size: 20px; font-weight: 600; line-height: 1.3;  letter-spacing: -0.4px; }
.t-heading-sm  { font-size: 18px; font-weight: 600; line-height: 1.4;  letter-spacing: -0.18px; }
.t-body-lg     { font-size: 16px; font-weight: 400; line-height: 1.65; letter-spacing: 0; }
.t-body-md     { font-size: 15px; font-weight: 400; line-height: 1.65; letter-spacing: 0; }
.t-body-tabular{ font-size: 14px; font-weight: 400; line-height: 1.5;  letter-spacing: -0.28px; font-feature-settings: "tnum"; }
.t-button-md   { font-size: 15px; font-weight: 500; line-height: 1.0;  letter-spacing: 0; }
.t-button-sm   { font-size: 13px; font-weight: 500; line-height: 1.0;  letter-spacing: 0; }
.t-caption     { font-size: 13px; font-weight: 400; line-height: 1.5;  letter-spacing: -0.26px; font-feature-settings: "tnum"; }
.t-micro       { font-size: 11px; font-weight: 400; line-height: 1.4;  letter-spacing: 0; }
.t-micro-cap   { font-size: 10px; font-weight: 600; line-height: 1.15; letter-spacing: 0.08px; text-transform: uppercase; }

/* numeric cells */
.tnum { font-feature-settings: "tnum"; letter-spacing: -0.42px; }

/* ── Gradient Mesh ── */
/* Stripe 시그니처: cream→sherbet→lavender→indigo→ruby 대기압 그라디언트 */
.mesh-hero {
  position: relative;
  overflow: hidden;
  background: var(--clr-canvas);
}
.mesh-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 8%  -8%,  rgba(245,233,212,0.85) 0%, transparent 55%),
    radial-gradient(ellipse 60% 50% at 28% -5%,  rgba(255,190,140,0.70) 0%, transparent 50%),
    radial-gradient(ellipse 70% 55% at 55% -15%, rgba(199,191,253,0.75) 0%, transparent 55%),
    radial-gradient(ellipse 65% 55% at 77%  0%,  rgba(83,58,253,0.55)  0%, transparent 50%),
    radial-gradient(ellipse 50% 40% at 96% -5%,  rgba(234,34,97,0.45)  0%, transparent 45%),
    radial-gradient(ellipse 40% 35% at 88% 22%,  rgba(249,107,238,0.30) 0%, transparent 45%);
  z-index: 0;
  pointer-events: none;
}
.mesh-hero > * { position: relative; z-index: 1; }

/* ── Buttons ── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: inherit;
  font-size: 16px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
  font-feature-settings: "ss01";
  padding: 8px 20px;         /* DESIGN-stripe: 8px 16px base, 우리는 20px으로 약간 여유 */
  border-radius: var(--r-pill);
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s, color 0.15s, box-shadow 0.15s, transform 0.1s;
  white-space: nowrap;
}

/* button-primary-pill: background #533afd, text #fff, pill */
.btn-primary {
  background: var(--clr-primary);
  color: var(--clr-on-primary);
  box-shadow: 0 2px 8px rgba(83,58,253,0.28);
}
.btn-primary:hover  { background: var(--clr-primary-deep); box-shadow: 0 4px 16px rgba(83,58,253,0.36); }
.btn-primary:active { background: var(--clr-primary-press); transform: translateY(1px); }

/* button-secondary: canvas bg, primary text, 1px primary border */
.btn-secondary {
  background: var(--clr-canvas);
  color: var(--clr-primary);
  border: 1px solid var(--clr-primary);
}
.btn-secondary:hover { background: #f0edff; }

/* button-on-dark: brand-dark-900 bg, white text */
.btn-dark {
  background: var(--clr-dark-900);
  color: var(--clr-on-primary);
}
.btn-dark:hover { background: #252862; }

.btn-sm {
  font-size: 14px;
  padding: 6px 14px;
}

.btn-lg {
  font-size: 17px;
  padding: 11px 26px;
}

/* ── Pill Tags (pill-tag-soft) ── */
.pill-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.1px;
  text-transform: uppercase;
  font-feature-settings: "ss01";
  background: var(--clr-primary-sub);   /* #b9b9f9 */
  color: var(--clr-primary-deep);        /* #4434d4 */
  padding: 4px 8px;
  border-radius: var(--r-pill);
}

/* ── Cards ── */
/* card-feature-light: canvas, hairline border, lg radius, shadow-1 */
.card {
  background: var(--clr-canvas);
  border: 1px solid var(--clr-hairline);
  border-radius: var(--r-lg);
  padding: var(--sp-xxl);
  box-shadow: var(--shadow-1);
}

/* card-cream-band: warm interlude */
.card-cream {
  background: var(--clr-canvas-cream);
  border: none;
  border-radius: var(--r-lg);
  padding: var(--sp-xxl);
}

/* card-pricing-featured: brand-dark-900 fill, xl radius */
.card-dark {
  background: var(--clr-dark-900);
  border: none;
  border-radius: var(--r-lg);
  padding: var(--sp-xxl);
  color: var(--clr-on-primary);
  box-shadow: var(--shadow-2);
}

/* canvas-soft surface */
.card-soft {
  background: var(--clr-canvas-soft);
  border: 1px solid var(--clr-hairline);
  border-radius: var(--r-lg);
  padding: var(--sp-xxl);
}

/* card-dashboard-mockup: tnum, shadow-2, xl radius */
.card-mockup {
  background: var(--clr-canvas);
  border: 1px solid var(--clr-hairline);
  border-radius: var(--r-xl);
  padding: var(--sp-xl);
  box-shadow: var(--shadow-2);
  font-feature-settings: "tnum";
  letter-spacing: -0.42px;
}

/* ── Forms ── */
.form-input {
  background: var(--clr-canvas);
  color: var(--clr-ink);
  font-family: inherit;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.4;
  padding: 8px 12px;                       /* DESIGN-stripe: 8px 12px */
  border: 1px solid var(--clr-hairline-input);  /* #a8c3de */
  border-radius: var(--r-sm);               /* 6px */
  outline: none;
  width: 100%;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.form-input:focus {
  border-color: var(--clr-primary);
  box-shadow: 0 0 0 3px rgba(83,58,253,0.12);
}
.form-input::placeholder { color: var(--clr-ink-mute); }

.form-label {
  display: block;
  font-size: 13px;
  font-weight: 400;
  color: var(--clr-ink-2);
  margin-bottom: 6px;
  letter-spacing: -0.13px;
}
.form-group { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }

select.form-input { cursor: pointer; }
textarea.form-input { resize: vertical; min-height: 100px; }

/* ── Layout & Containers ── */
.container     { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.container-sm  { max-width: 720px;  margin: 0 auto; padding: 0 24px; }
.container-xs  { max-width: 560px;  margin: 0 auto; padding: 0 24px; }

/* DESIGN-stripe: section-padding 64–96px marketing, 32–48px dashboard */
.section    { padding: 96px 24px; }
.section-sm { padding: 64px 24px; }
.section-soft  { background: var(--clr-canvas-soft); }
.section-cream { background: var(--clr-canvas-cream); }
.section-dark  { background: var(--clr-dark-900); color: var(--clr-on-primary); }

/* ── Section Header ── */
.section-header { text-align: center; margin-bottom: 56px; }

/* pill-tag-soft eyebrow */
.section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.1px;
  text-transform: uppercase;
  color: var(--clr-primary-deep);      /* #4434d4 */
  background: var(--clr-primary-sub);  /* #b9b9f9 */
  border-radius: var(--r-pill);
  padding: 4px 10px;
  margin-bottom: 16px;
}

.section-title {
  font-size: clamp(26px, 3.5vw, 40px);
  font-weight: 700;
  color: var(--clr-ink);               /* #0d253d */
  letter-spacing: -0.84px;
  line-height: 1.08;
  margin-bottom: 16px;
}
.section-title em   { font-style: normal; color: var(--clr-primary); }  /* #533afd */
.section-title strong { font-style: normal; font-weight: 700; color: var(--clr-primary); }

.section-sub {
  font-size: 16px;
  font-weight: 400;
  color: var(--clr-ink-mute);          /* #64748d */
  line-height: 1.65;
  max-width: 560px;
  margin: 0 auto;
}

/* ── Divider ── */
.divider { height: 1px; background: var(--clr-hairline); }

/* ── Fade animation ── */
.fade-in { opacity: 0; transform: translateY(20px); transition: opacity .6s ease, transform .6s ease; }
.fade-in.visible { opacity: 1; transform: translateY(0); }

/* ── Links ── */
a.link { color: var(--clr-primary); text-decoration: none; font-weight: 400; }
a.link:hover { text-decoration: underline; }

/* ── Footer (footer-light) ── */
.footer {
  background: var(--clr-canvas);
  border-top: 1px solid var(--clr-hairline);
  padding: var(--sp-huge) var(--sp-xl);   /* 64px 24px — DESIGN-stripe */
  color: var(--clr-ink-mute);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: -0.39px;
  font-feature-settings: "tnum";
}
.footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 48px;
  flex-wrap: wrap;
}
.footer-brand p { font-size: 13px; color: var(--clr-ink-mute); margin-top: 10px; max-width: 260px; line-height: 1.6; }
.footer-cols { display: flex; gap: 56px; }
.footer-col h5 {
  font-size: 10px; font-weight: 400; letter-spacing: 0.1px;
  text-transform: uppercase; color: var(--clr-ink-2);
  margin-bottom: 14px;
}
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 9px; }
.footer-col ul li a { font-size: 13px; color: var(--clr-ink-mute); text-decoration: none; transition: color .15s; }
.footer-col ul li a:hover { color: var(--clr-primary); }
.footer-bottom {
  max-width: 1200px; margin: 28px auto 0;
  padding-top: 20px; border-top: 1px solid var(--clr-hairline);
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 10px;
}
.footer-bottom p { font-size: 12px; color: var(--clr-ink-mute); }

/* ── Logo ── */
.logo {
  font-size: 17px;
  font-weight: 400;
  letter-spacing: -0.3px;
  color: var(--clr-ink);
  text-decoration: none;
}
.logo em { font-style: normal; color: var(--clr-primary); font-weight: 400; }

/* ── Responsive ── */
@media (max-width: 900px) {
  .section    { padding: 72px 20px; }
  .section-sm { padding: 48px 20px; }
  .footer-inner { flex-direction: column; gap: 28px; }
  .footer-cols  { gap: 28px; flex-wrap: wrap; }
}
@media (max-width: 600px) {
  .section { padding: 56px 16px; }
  .container { padding: 0 16px; }
  .t-display-xxl { font-size: 32px; letter-spacing: -0.8px; }
}