/* === Bonaparfait Design Tokens v2 — A+B Hybrid ===
   A (Clinical-Trust): Navy blue · IBM Plex Sans · clean grid · hero 2-col
   B (Warm-Story): Terracotta accent · Cormorant Garamond serif · material texture
   A = Structure / B = Sensation — Inki G2 결재 2026-08-23
*/

:root {
  /* ── Palette ── */
  --color-primary:      #1A6BC5;   /* Navy — A trust/authority */
  --color-secondary:    #F7F9FC;   /* Ice white — A clinical */
  --color-accent:       #C4614A;   /* Terracotta — B warmth */
  --color-accent-deep:  #A34F3C;   /* Deep terracotta (hover) */
  --color-accent-blue:  #1A6BC5;   /* Mid blue — A CTA link */
  --color-surface:      #FFFFFF;   /* Pure white — cards */
  --color-cream:        #FAF8F5;   /* Warm cream — B subtle bg */
  --color-muted:        #637080;   /* Slate — body secondary */
  --color-border:       #DDE4EE;   /* Cool border — A */
  --color-border-warm:  #E8DED5;   /* Warm border — B sections */
  --color-success:      #3A7D5F;
  --color-error:        #B05050;

  /* ── Semantic ── */
  --bg-page:       var(--color-secondary);
  --bg-card:       var(--color-surface);
  --bg-warm:       var(--color-cream);
  --bg-navy:       var(--color-primary);
  --bg-subtle:     #EEF3F9;
  --bg-surface:    var(--color-surface);
  --bg-muted:      #ECF0F5;

  --text-primary:    #0E1D2E;    /* Deep navy */
  --text-secondary:  var(--color-muted);
  --text-muted:      #8FA0B0;
  --text-on-dark:    #F7F9FC;
  --text-on-accent:  #FFFFFF;

  --link:            var(--color-accent-blue);
  --link-hover:      var(--color-primary);

  --cta-bg:          var(--color-primary);
  --cta-text:        #F7F9FC;
  --cta-hover-bg:    var(--color-accent);

  --border-default:  var(--color-border);
  --border-warm:     var(--color-border-warm);

  /* ── Typography ── */
  /* A: IBM Plex Sans (clinical, legible, authoritative) */
  /* B: Cormorant Garamond (refined, serif, story) */
  --font-body:    'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Cormorant Garamond', 'Libre Baskerville', Georgia, serif;
  --font-accent:  'Cormorant Garamond', Georgia, serif;
  --font-mono:    'IBM Plex Mono', 'Courier New', monospace;

  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.375rem;
  --text-2xl:  1.75rem;
  --text-3xl:  2.25rem;
  --text-4xl:  3rem;
  --text-5xl:  4.5rem;

  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;

  --leading-tight:   1.15;
  --leading-snug:    1.35;
  --leading-normal:  1.60;
  --leading-relaxed: 1.78;

  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.06em;
  --tracking-button: 0.08em;

  /* ── Spacing ── */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.5rem;
  --space-6:  2rem;
  --space-7:  3rem;
  --space-8:  4rem;
  --space-9:  6rem;
  --space-10: 8rem;

  /* ── Layout ── */
  --container-max:  1280px;
  --gutter-mobile:  20px;
  --gutter-tablet:  32px;
  --gutter-desktop: 48px;

  /* ── Radius ── */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   20px;
  --radius-pill: 999px;

  /* ── Shadow ── */
  --shadow-card:  0 1px 4px rgba(26,107,197,0.07), 0 2px 12px rgba(26,107,197,0.05);
  --shadow-hover: 0 8px 32px rgba(26,107,197,0.14);
  --shadow-warm:  0 8px 32px rgba(196,97,74,0.14);
  --shadow-modal: 0 24px 64px rgba(14,29,46,0.22);

  /* ── Motion ── */
  --easing:        cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 160ms;
  --duration-base: 240ms;
  --duration-slow: 400ms;
}

/* ── Dark theme ── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg-page:      #0C1824;
    --bg-card:      #132033;
    --bg-warm:      #1A2030;
    --bg-subtle:    #162235;
    --bg-muted:     #1E2D40;
    --text-primary: #E8EFF7;
    --text-secondary:#8FA4BC;
    --text-muted:   #5C7590;
    --color-border: #243450;
    --color-border-warm: #2A3045;
    --color-muted:  #8FA4BC;
  }
}
:root[data-theme="dark"] {
  --bg-page:      #0C1824;
  --bg-card:      #132033;
  --bg-warm:      #1A2030;
  --bg-subtle:    #162235;
  --bg-muted:     #1E2D40;
  --text-primary: #E8EFF7;
  --text-secondary:#8FA4BC;
  --text-muted:   #5C7590;
  --color-border: #243450;
  --color-border-warm: #2A3045;
  --color-muted:  #8FA4BC;
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-font-smoothing: antialiased; }
body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text-primary);
  background: var(--bg-page);
}
img, video { max-width: 100%; display: block; }

/* ── Typography helpers ── */
.font-display { font-family: var(--font-display); font-weight: 400; letter-spacing: var(--tracking-tight); }
.font-display-italic { font-family: var(--font-display); font-weight: 400; font-style: italic; }
.text-eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-xs); font-weight: 600;
  text-transform: uppercase; letter-spacing: var(--tracking-wide);
  color: var(--color-accent);
}
.section-title {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 400; font-style: italic;
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-snug);
  text-align: center;
  margin-bottom: var(--space-6);
}

/* ── Container ── */
.container { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--gutter-mobile); }
@media (min-width: 768px)  { .container { padding: 0 var(--gutter-tablet); } }
@media (min-width: 1024px) { .container { padding: 0 var(--gutter-desktop); } }

/* ── Nav ── */
.nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(247,249,252,0.96);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-4) var(--gutter-desktop);
  display: flex; justify-content: space-between; align-items: center;
  gap: var(--space-6);
}
.nav-logo {
  font-family: var(--font-display); font-size: var(--text-xl);
  font-weight: 400; font-style: italic;
  letter-spacing: var(--tracking-tight); color: var(--color-primary);
  text-decoration: none;
}
.nav-links { display: flex; gap: var(--space-6); }
.nav-links a {
  font-size: var(--text-xs); font-weight: 600;
  text-transform: uppercase; letter-spacing: var(--tracking-button);
  color: var(--text-primary); text-decoration: none;
  transition: color var(--duration-base);
}
.nav-links a:hover { color: var(--color-accent); }
.locale-toggle { display: flex; gap: var(--space-2); font-size: var(--text-xs); color: var(--text-secondary); }
.locale-toggle .active { color: var(--text-primary); font-weight: 600; }
@media (max-width: 767px) {
  .nav { padding: var(--space-4) var(--gutter-mobile); }
  .nav-links { display: none; }
}

/* ── Buttons ── */
.btn {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: 12px 28px; border-radius: var(--radius-md); border: 2px solid transparent;
  cursor: pointer; font: inherit;
  font-size: var(--text-sm); font-weight: 600;
  letter-spacing: var(--tracking-button); text-transform: uppercase;
  transition: all var(--duration-base) var(--easing);
  text-decoration: none; white-space: nowrap;
}
.btn-primary   { background: var(--cta-bg); color: var(--cta-text); border-color: var(--cta-bg); }
.btn-primary:hover { background: var(--cta-hover-bg); border-color: var(--cta-hover-bg); transform: translateY(-2px); box-shadow: var(--shadow-warm); }
.btn-secondary { background: transparent; color: var(--text-primary); border-color: var(--text-primary); }
.btn-secondary:hover { background: var(--text-primary); color: var(--bg-page); }
.btn-outline-light { background: transparent; color: var(--text-on-dark); border-color: rgba(247,249,252,0.45); }
.btn-outline-light:hover { background: rgba(247,249,252,0.12); }

/* ── Card ── */
.card {
  background: var(--bg-card); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); padding: var(--space-5);
  transition: all var(--duration-base) var(--easing);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); }

/* ── Form base ── */
.form-group { margin-bottom: var(--space-4); }
.form-group label { display: block; font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--text-secondary); margin-bottom: var(--space-2); }
.form-group input,
.form-group textarea,
.form-group select {
  width: 100%; padding: 12px 16px;
  background: var(--bg-card); border: 1px solid var(--color-border); color: var(--text-primary);
  border-radius: var(--radius-md); font: inherit; font-size: var(--text-sm);
  transition: border-color var(--duration-base);
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  outline: none; border-color: var(--color-accent-blue);
  box-shadow: 0 0 0 3px rgba(26,107,197,0.12);
}

/* ── Pill ── */
.pill { display: inline-block; padding: 3px 12px; border-radius: var(--radius-pill); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.pill-blue    { background: rgba(26,107,197,0.10); color: var(--color-primary); }
.pill-warm    { background: rgba(196,97,74,0.12); color: var(--color-accent); }
.pill-muted   { background: rgba(99,112,128,0.12); color: var(--text-secondary); }

/* ── Footer ── */
.footer { background: var(--color-primary); color: var(--text-on-dark); padding: var(--space-8) var(--gutter-desktop) var(--space-6); }
.footer a { color: rgba(247,249,252,0.55); text-decoration: none; transition: color var(--duration-base); }
.footer a:hover { color: var(--color-accent); }

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}