/* ============================================
   Apple HIG — DataBridge 공통 스타일 시스템
   Clarity · Deference · Depth
   ============================================ */

/* ── 1. 기본 리셋 & 기반 ── */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

/* ── 2. 타이포그래피 스케일 (HIG: 명확한 위계) ── */
:root {
  --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 */
  --text-7xl:   4.5rem;    /* 72px */

  /* 8px 그리드 토큰 */
  --space-1:  8px;
  --space-2:  16px;
  --space-3:  24px;
  --space-4:  32px;
  --space-5:  40px;
  --space-6:  48px;
  --space-8:  64px;
  --space-10: 80px;
  --space-12: 96px;

  /* 컬러 토큰 */
  --color-bg:       #ffffff;
  --color-surface:  #f9fafb;
  --color-border:   #e5e7eb;
  --color-text:     #0a0a0a;
  --color-muted:    #6b7280;
  --color-subtle:   #9ca3af;

  /* corner-radius (HIG: 일관성) */
  --radius-sm:   6px;
  --radius-md:   12px;
  --radius-lg:   16px;   /* 카드 기본 */
  --radius-xl:   20px;
  --radius-full: 9999px; /* 버튼 pill */
}

/* ── 3. 포커스 링 (HIG: 접근성 · Clarity) ── */
:focus-visible {
  outline: 3px solid #0a0a0a;
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* 버튼 pill 포커스 */
a.rounded-full:focus-visible,
button.rounded-full:focus-visible {
  border-radius: var(--radius-full);
}

/* ── 4. 버튼 터치 타겟 44px (HIG: 최소 44×44pt) ── */
button,
[role="button"],
a[class*="px-"] {
  min-height: 44px;
}

/* ── 5. 인터랙티브 상태 (HIG: 즉각적인 피드백) ── */
a,
button {
  -webkit-tap-highlight-color: transparent;
  transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* 버튼 프레스 효과 */
a[class*="bg-neutral-900"]:active,
button[class*="bg-neutral-900"]:active {
  transform: scale(0.97);
  opacity: 0.85;
}

/* 카드 hover lift */
.card-lift {
  transition: transform 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              box-shadow 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              border-color 0.25s ease;
}
.card-lift:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px -4px rgba(0, 0, 0, 0.08);
}

/* ── 6. 스크롤 애니메이션 (HIG: Depth · 맥락 전달) ── */
[data-animate] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

[data-animate].is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* 딜레이 유틸리티 */
[data-delay="1"] { transition-delay: 0.08s; }
[data-delay="2"] { transition-delay: 0.16s; }
[data-delay="3"] { transition-delay: 0.24s; }
[data-delay="4"] { transition-delay: 0.32s; }
[data-delay="5"] { transition-delay: 0.40s; }

/* ── 7. prefers-reduced-motion (HIG: 접근성 필수) ── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  [data-animate] {
    opacity: 1;
    transform: none;
    transition: none;
  }
  html { scroll-behavior: auto; }
}

/* ── 8. 네비게이션 (HIG: 위치 파악 · 배려) ── */
.nav-blur {
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  background-color: rgba(255, 255, 255, 0.82);
}

/* 현재 페이지 nav 링크 언더라인 */
nav a[aria-current="page"] {
  color: #0a0a0a;
  font-weight: 600;
}

/* ── 9. 섹션 구분 (HIG: 시각적 계층) ── */
.section-label {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-subtle);
}

/* ── 10. 폼 스타일 (HIG: 레이블 항상 visible, 즉각 피드백) ── */
.hig-input {
  width: 100%;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  font-size: var(--text-sm);
  background: white;
  color: var(--color-text);
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
  line-height: 1.5;
  min-height: 44px;
}

.hig-input:hover {
  border-color: #9ca3af;
}

.hig-input:focus {
  outline: none;
  border-color: #0a0a0a;
  box-shadow: 0 0 0 3px rgba(10, 10, 10, 0.06);
}

.hig-input::placeholder {
  color: var(--color-subtle);
}

.hig-label {
  display: block;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text);
  margin-bottom: 8px;
}

/* ── 11. 통계 숫자 강조 ── */
.stat-number {
  font-size: var(--text-4xl);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
}

/* ── 12. 스크롤바 (macOS/iOS 스타일) ── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #9ca3af; }


/* ── 13. 모바일 타이포 보정 (UX readability) ── */
.mobile-no-break br { display: inline; }

@media (max-width: 768px) {
  h1 {
    line-height: 1.22 !important;
    letter-spacing: -0.02em !important;
  }
  h1[class*="text-5xl"],
  h1[class*="text-6xl"],
  h1[class*="text-[3.2rem]"],
  h1[class*="text-[3.6rem]"] {
    font-size: clamp(1.75rem, 7.2vw, 2.2rem) !important;
  }
  h2 {
    line-height: 1.28 !important;
    letter-spacing: -0.015em !important;
  }
  p {
    line-height: 1.65;
  }
  .mobile-no-break br {
    display: inline;
  }
}


/* ── 14. 타이포 위계 정리 (전 페이지 공통) ── */
.hero-subtitle,
section p[class*="text-base md:text-lg"] {
  font-weight: 400;
}
section h1 + p,
section h2 + p {
  margin-top: 0.25rem;
}

.hard-break{display:block !important;}


/* Poppins heading weight */
h1, h2, h3 { font-weight: 700; }

/* Global title scale (keep hierarchy, but slightly smaller than before) */
h1 {
  font-size: 2rem !important;
  line-height: 1.22 !important;
  letter-spacing: -0.025em !important;
}
h2 {
  font-size: 1.6rem !important;
  line-height: 1.26 !important;
  letter-spacing: -0.02em !important;
}
h3 {
  font-size: 1.2rem !important;
  line-height: 1.32 !important;
  letter-spacing: -0.015em !important;
}
@media (min-width: 768px) {
  h1 { font-size: 2.3rem !important; }
  h2 { font-size: 1.9rem !important; }
  h3 { font-size: 1.35rem !important; }
}

/* Global compact spacing */
@media (max-width: 768px) {
  section[class*="py-28"] { padding-top: 3.5rem !important; padding-bottom: 3.5rem !important; }
  section[class*="py-24"] { padding-top: 3rem !important; padding-bottom: 3rem !important; }
  section[class*="py-20"] { padding-top: 2.25rem !important; padding-bottom: 2.25rem !important; }
  section[class*="py-16"] { padding-top: 1.75rem !important; padding-bottom: 1.75rem !important; }
  section[class*="pt-44"] { padding-top: 6rem !important; }
  section[class*="pt-40"] { padding-top: 5.5rem !important; }
  section[class*="pt-36"] { padding-top: 5rem !important; }
  h1 { margin-bottom: 1rem !important; }
  h2 { margin-bottom: .75rem !important; }
  p { margin-bottom: .6rem; }
}