/* ==============================================
   CSS 변수 (디자인 토큰)
   ============================================== */
:root {
  /* 색상 */
  --color-blue-deep : #002572;
  --color-blue-main : #2f6bff;
  --color-teal      : #00D084;
  --color-lime      : #adfb50;
  --color-bg-light  : #ecf7ff;
  --color-text      : #111;
  --color-text-mid  : #333;
  --color-text-sub  : #666;
  --color-text-muted: #999;
  --color-white     : #fff;

  /* 그라디언트 */
  --grad-brand: linear-gradient(36deg, #2f6bff 3%, #00D084 89%);
  --grad-text : linear-gradient(10deg, #2f6bff 3%, #00D084 47%, #adfb50 90%);

  /* 타이포그래피 */
  --font-base    : 'Pretendard', -apple-system, sans-serif;
  --font-display : 'Paperlogy', 'Pretendard', sans-serif;

  /* 간격 */
  --spacing-xs : 0.5rem;   /*  8px */
  --spacing-sm : 1rem;     /* 16px */
  --spacing-md : 1.875rem; /* 30px */
  --spacing-lg : 3.125rem; /* 50px */
  --spacing-xl : 6.25rem;  /* 100px */

  /* 섹션 공통 좌우 패딩 — 구축사례 기준, 반응형에서 미디어쿼리로 재정의 */
  --section-px: 50px;

  /* 전환 */
  --transition: 300ms ease;
}