/* ============================================
   송도경희탑한의원 Design System — Colors & Type
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;600;700;900&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,300;1,9..40,400&display=swap');

:root {
  /* ─── Brand Blue Scale ─── */
  --blue-950: #001a38;
  --blue-900: #002d5c;
  --blue-800: #003f80;
  --blue-700: #0050a0;   /* ← PRIMARY (Logo exact) */
  --blue-600: #1a66b5;
  --blue-500: #3380cc;
  --blue-400: #5599d9;
  --blue-300: #80b3e6;
  --blue-200: #b3d1f0;
  --blue-100: #dceaf8;
  --blue-50:  #edf4fc;

  /* ─── Neutral / Marble Scale ─── */
  --neutral-950: #141414;
  --neutral-900: #1e1e1e;
  --neutral-800: #303030;   /* ← Logo Charcoal */
  --neutral-700: #484848;
  --neutral-600: #606060;
  --neutral-500: #787878;
  --neutral-400: #949494;
  --neutral-300: #b8b8b8;
  --neutral-200: #d4d4d4;
  --neutral-150: #e4e4e4;
  --neutral-100: #f0f0f0;
  --neutral-75:  #f5f5f5;
  --neutral-50:  #fafafa;
  --neutral-25:  #fdfdfd;

  /* ─── Marble / Surface ─── */
  --marble-warm: #f8f7f5;
  --marble-cool: #f4f6f9;
  --marble-mid:  #edf0f4;
  --marble-deep: #e2e7ee;

  /* ─── Semantic ─── */
  --color-primary:       var(--blue-700);
  --color-primary-dark:  var(--blue-800);
  --color-primary-light: var(--blue-100);
  --color-primary-faint: var(--blue-50);

  --color-text-primary:   var(--neutral-800);
  --color-text-secondary: var(--neutral-600);
  --color-text-muted:     var(--neutral-400);
  --color-text-on-dark:   #ffffff;
  --color-text-on-blue:   #ffffff;

  --color-bg-page:    #ffffff;
  --color-bg-subtle:  var(--marble-warm);
  --color-bg-muted:   var(--marble-cool);
  --color-bg-accent:  var(--blue-50);
  --color-bg-dark:    var(--neutral-800);
  --color-bg-primary: var(--blue-700);

  --color-border:       var(--neutral-150);
  --color-border-light: var(--neutral-100);
  --color-border-blue:  var(--blue-200);

  --color-success: #2d7a4f;
  --color-warning: #b07c1a;
  --color-error:   #a02020;

  /* ─── Typography ─── */
  --font-ko:  'Noto Sans KR', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  --font-en:  'DM Sans', 'Helvetica Neue', Arial, sans-serif;
  --font-base: var(--font-ko);

  /* Type Scale */
  --text-xs:   0.75rem;   /* 12px */
  --text-sm:   0.875rem;  /* 14px */
  --text-base: 1rem;      /* 16px */
  --text-lg:   1.125rem;  /* 18px */
  --text-xl:   1.25rem;   /* 20px */
  --text-2xl:  1.5rem;    /* 24px */
  --text-3xl:  1.875rem;  /* 30px */
  --text-4xl:  2.25rem;   /* 36px */
  --text-5xl:  3rem;      /* 48px */
  --text-6xl:  3.75rem;   /* 60px */

  /* Line Heights */
  --leading-tight:  1.2;
  --leading-snug:   1.35;
  --leading-normal: 1.6;
  --leading-relaxed:1.8;

  /* Font Weights */
  --weight-light:   300;
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold:600;
  --weight-bold:    700;
  --weight-black:   900;

  /* ─── Spacing Scale ─── */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* ─── Border Radius ─── */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  24px;
  --radius-full: 9999px;

  /* ─── Shadows ─── */
  --shadow-xs:  0 1px 2px rgba(0,0,0,0.05);
  --shadow-sm:  0 2px 6px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md:  0 4px 16px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.04);
  --shadow-lg:  0 8px 32px rgba(0,0,0,0.10), 0 4px 8px rgba(0,0,0,0.04);
  --shadow-xl:  0 16px 48px rgba(0,0,0,0.12), 0 8px 16px rgba(0,0,0,0.06);
  --shadow-blue:0 4px 20px rgba(0,80,160,0.20);

  /* ─── Transitions ─── */
  --transition-fast:   150ms ease;
  --transition-normal: 250ms ease;
  --transition-slow:   400ms ease;

  /* ─── Layout ─── */
  --container-max: 1200px;
  --content-max:    800px;
  --card-radius:   var(--radius-xl);
}

/* ─── Page-by-page Scroll Snap (one section at a time) ─── */
html {
  scroll-snap-type: y mandatory;
  scroll-padding-top: 84px;
  scroll-behavior: smooth;
}
body > section {
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
/* Tall sections — relax snap-stop so users can read full content without being trapped */
body > section.about-section,
body > section.doctor-section,
body > section.spec-bg,
body > section#blog,
body > section.sns-section,
body > section.content-section,
body > section.page-cta {
  scroll-snap-stop: normal;
}
@media (max-width: 768px) {
  html { scroll-padding-top: 64px; scroll-snap-type: y proximity; }
}

/* ─── Semantic Type Styles ─── */
.h-display {
  font-family: var(--font-ko);
  font-size: var(--text-5xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: -0.02em;
  color: var(--color-text-primary);
}
.h1 {
  font-family: var(--font-ko);
  font-size: var(--text-4xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: -0.015em;
  color: var(--color-text-primary);
}
.h2 {
  font-family: var(--font-ko);
  font-size: var(--text-3xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  letter-spacing: -0.01em;
  color: var(--color-text-primary);
}
.h3 {
  font-family: var(--font-ko);
  font-size: var(--text-2xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  color: var(--color-text-primary);
}
.h4 {
  font-family: var(--font-ko);
  font-size: var(--text-xl);
  font-weight: var(--weight-medium);
  line-height: var(--leading-normal);
  color: var(--color-text-primary);
}
.body-lg {
  font-family: var(--font-ko);
  font-size: var(--text-lg);
  font-weight: var(--weight-regular);
  line-height: var(--leading-relaxed);
  color: var(--color-text-secondary);
}
.body {
  font-family: var(--font-ko);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-relaxed);
  color: var(--color-text-secondary);
}
.body-sm {
  font-family: var(--font-ko);
  font-size: var(--text-sm);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  color: var(--color-text-muted);
}
.label {
  font-family: var(--font-en);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-primary);
}