/* ============================================================
   디자인 토큰 (Design Tokens)
   - "브랜드" 섹션: 새 업체/업종 제작 시 이 값들만 바꾸면 됩니다.
   - "시스템" 섹션: 까치 템플릿의 정체성이므로 특별한 이유가 없으면 유지하세요.
   - 컨셉: 대기업 계열 설비·엔지니어링 기업 홈페이지.
     직각에 가까운 UI(0~4px), 얇은 border, 절제된 딥블루 포인트,
     정교한 grid 정렬로 신뢰감을 만듭니다. 둥근 카드/그림자는 지양합니다.
   ============================================================ */
:root {
  /* ===== 브랜드 컬러 (업체마다 변경 가능) =====
     Deep Navy + Steel Blue 체계. 파란색은 로고/라벨/CTA 등
     "필요한 곳에만" 정확히 사용하고, hover에만 Accent Blue를 씁니다. */
  --color-primary: #1f2937;        /* Deep Navy — 헤드라인/본문 텍스트 */
  --color-brand: #174a7e;          /* Steel Blue — 로고, CTA, 라벨, 활성 메뉴 */
  --color-brand-light: #e9eff4;    /* Brand의 아주 옅은 버전 (배지 배경) */
  --color-accent: #2369a8;         /* Accent Blue — hover(밝아짐) 전용 */
  --color-nav: #59636e;            /* 비활성 메뉴 텍스트 */

  /* 레거시 alias — 과거 컴포넌트 호환용 (신규 사용 금지) */
  --color-primary-dark: #0f1620;
  --color-primary-light: var(--color-brand-light);
  --color-accent-dark: var(--color-brand);

  /* ===== 시스템 컬러 (템플릿 전체 유지 권장) =====
     웜 아이보리 배경 체계: 페이지 기본 배경은 살짝 따뜻한 오프화이트(--color-bg)로,
     카드·정보바 등 강조가 필요한 표면만 순백(--color-white)을 사용해 은은한 레이어를 만듭니다. */
  --color-dark: #12161f;
  --color-dark-2: #1a1f2b;
  --color-text: #1f2937;
  --color-text-secondary: #64748b;
  --color-text-light: #8a949e;
  --color-white: #ffffff;
  --color-bg: #f8f7f3;
  --color-bg-alt: #f2f1ec;
  --color-background: var(--color-bg);
  --color-border: #dce2e8;
  --color-border-dark: rgba(255, 255, 255, 0.14);
  --color-success: #2e7d32;
  --color-danger: #b3261e;

  /* ===== 타이포그래피 ===== */
  --font-base: "Pretendard", -apple-system, BlinkMacSystemFont, "Malgun Gothic", sans-serif;
  --fs-hero: clamp(2rem, 4.2vw, 3.4rem);
  --fs-h1: clamp(1.9rem, 4vw, 2.7rem);
  --fs-h2: clamp(1.6rem, 3vw, 2.2rem);
  --fs-h3: 1.2rem;
  --fs-lg: 1.125rem;
  --fs-base: 1rem;
  --fs-sm: 0.875rem;
  --fs-xs: 0.75rem;
  --lh-tight: 1.25;
  --lh-normal: 1.6;
  --lh-loose: 1.85;

  /* 작은 영문 카테고리 라벨 (eyebrow) */
  --fs-eyebrow: 0.8rem;
  --ls-eyebrow: 0.14em;

  /* ===== 간격 (4px 스케일, 여백을 넉넉히) ===== */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 56px;
  --space-8: 88px;
  --space-9: 120px;
  --section-py: clamp(72px, 11vw, 160px);
  --container-max: 1200px;
  --container-pad: 24px;

  /* ===== 모양 / 그림자 =====
     0~4px의 미세한 radius만 사용. pill/큰 라운드/과도한 그림자 금지. */
  --radius-xs: 0px;
  --radius-sm: 2px;
  --radius-md: 2px;
  --radius-lg: 0px;
  --radius-full: 2px;
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05);
  --shadow-md: 0 2px 6px rgba(15, 23, 42, 0.06);
  --shadow-lg: 0 4px 12px rgba(15, 23, 42, 0.08);
  --transition: 0.18s ease;

  /* ===== 헤더 ===== */
  --header-h: 80px;
  --header-h-mobile: 60px;
}