/* ============================================================
   Yeyak — Global Design Tokens (colors_and_type.css)
   ============================================================
   이 파일이 사이트 전체의 "브랜드 매뉴얼" 역할을 합니다.
   모든 HTML 페이지가 이 파일을 불러서 색·폰트·간격을 통일합니다.
   
   변경 시 영향 범위: 사이트 전체
   --------------------------------------------------------- */


/* ============================================================
   1. 폰트 (Font Family)
   ------------------------------------------------------------
   Pretendard = 한글 + 영문 둘 다 잘 나오는 한국 오픈소스 폰트
   웹폰트(CDN)로 로드 → 별도 파일 다운로드 불필요
   ============================================================ */

@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.css');


/* ============================================================
   2. CSS 변수 정의 (:root = 사이트 전체에서 접근 가능)
   ============================================================ */

:root {

  /* ----------------------------------------------------------
     2-1. 폰트 변수
     ---------------------------------------------------------- */
  --font-body: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Inter', 
               system-ui, 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;
  --font-mono: 'SF Mono', Menlo, Monaco, Consolas, 'Courier New', monospace;


  /* ----------------------------------------------------------
     2-2. 메인 브랜드 컬러 (분홍 + 주황 두 시대 다 살림 — 옵션 Z)
     ---------------------------------------------------------- 
     index.html, about.html → 분홍(yk-pink) 시대
     concierge, workflow → 주황(yeyak-orange) 시대
     나중에 통일할 때 이 부분만 정리하면 됨
     ---------------------------------------------------------- */
  
  /* 옛날 분홍 시대 (메인 랜딩) */
  --yk-pink: #FF3465;
  --yk-pink-soft: #FFE4EB;
  --yk-teal: #2DD4D4;
  --yk-ink: #0A0A0A;

  /* 최근 주황 시대 (Product, Concierge, Workflow) */
  --yeyak-orange: #FF6A1F;
  --yeyak-orange-hover: #E55A0F;
  --yeyak-orange-soft: #FFE4D4;
  --yeyak-orange-deep: #993C1D;
  --yeyak-orange-bg: #FFF8F4;

  --yeyak-blue: #0050FF;
  --yeyak-blue-bg: #F4F8FF;
  --yeyak-blue-soft-strong: #BFD3FF;
  --yeyak-blue-deeper: #1B4FA0;


  /* ----------------------------------------------------------
     2-3. 텍스트 컬러 (글자 색)
     ---------------------------------------------------------- 
     fg = foreground = 글자 색
     본문 → muted, 보조 → subtle, 헤딩 → fg
     ---------------------------------------------------------- */
  --fg: #0A0A0A;          /* 가장 진한 검정 (헤딩) */
  --fg-muted: #5A5A6B;    /* 본문 회색 */
  --fg-subtle: #9A9AA8;   /* 가장 흐린 회색 (캡션) */


  /* ----------------------------------------------------------
     2-4. 배경 컬러
     ---------------------------------------------------------- */
  --bg-primary: #FFFFFF;     /* 메인 배경 (흰색) */
  --bg-secondary: #FAFAF9;   /* 부드러운 회백 */
  --bg-subtle: #F5F5F4;      /* 더 진한 회백 (섹션 구분용) */


  /* ----------------------------------------------------------
     2-5. 테두리 (Border)
     ---------------------------------------------------------- */
  --border: rgba(10, 10, 20, 0.08);         /* 기본 — 거의 안 보이는 회색 */
  --border-light: rgba(10, 10, 20, 0.06);   /* 더 흐림 */
  --border-strong: rgba(10, 10, 20, 0.16);  /* 진한 회색 */


  /* ----------------------------------------------------------
     2-6. 그레이 스케일 (회색 단계)
     ---------------------------------------------------------- */
  --gray-50: #FAFAFA;
  --gray-100: #F4F4F5;
  --gray-200: #E4E4E7;
  --gray-300: #D4D4D8;
  --gray-400: #A1A1AA;
  --gray-500: #71717A;
  --gray-600: #52525B;
  --gray-700: #3F3F46;
  --gray-800: #27272A;
  --gray-900: #18181B;


  /* ----------------------------------------------------------
     2-7. 그림자 (Shadow)
     ---------------------------------------------------------- */
  --shadow-sm: 0 1px 2px rgba(10, 10, 20, 0.04);
  --shadow-md: 0 4px 12px rgba(10, 10, 20, 0.06);
  --shadow-lg: 0 12px 40px rgba(10, 10, 20, 0.08);
  --shadow-nav: 0 1px 3px rgba(10, 10, 20, 0.04);


  /* ----------------------------------------------------------
     2-8. 라운드 (border-radius)
     ---------------------------------------------------------- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;
  --radius-card: 16px;


  /* ----------------------------------------------------------
     2-9. 간격 (Spacing)
     ---------------------------------------------------------- */
  --content-max: 1280px;
  --space-section: 96px;


  /* ----------------------------------------------------------
     2-10. 애니메이션 (Easing)
     ---------------------------------------------------------- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

}


/* ============================================================
   3. 기본 body 스타일
   ============================================================ */

* {
  box-sizing: border-box;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--fg);
  background: var(--bg-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-weight: 400;
  line-height: 1.5;
}

/* 링크 기본 색 — Yeyak 블루 */
a {
  color: var(--yeyak-blue);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* 헤딩 기본 */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-body);
  letter-spacing: -0.02em;
  color: var(--fg);
  margin: 0;
}