/* ==========================================================================
   Design Tokens
   참고: https://mondrian.ai/kr/ 의 /css/layout.css, /css/main.css, /font/font.css
   에서 추출한 값을 기반으로 정리했습니다. (출처 값은 주석에 원본 셀렉터 표기)
   ========================================================================== */

@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.8/dist/web/static/pretendard.css");
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap");

:root {
  /* ---------- Color : Brand ---------- */
  --color-primary: #2a4ff1;          /* .header .alert, .btn-circle, li.on > a */
  --color-primary-contrast: #ffffff;

  /* 몬드리안 3원색 포인트 (작은 점 em.blue / em.yellow / em.red) */
  --color-mondrian-blue: #4a88bf;
  --color-mondrian-yellow: #f5d625;
  --color-mondrian-red: #d50d0d;     /* 푸터 CTA 버튼 배경으로도 사용 */

  /* ---------- Color : Ink (텍스트/다크 서피스) ---------- */
  --color-black: #000000;
  --color-ink-900: #090909;          /* .footer 배경 */
  --color-ink-800: #1d1d1d;          /* 섹션 대제목 */
  --color-ink-700: #292929;          /* 본문 (se02 dd) */
  --color-ink-600: #2d2e30;          /* .basicbtn 기본 배경 */
  --color-ink-500: #2f3542;          /* 스크롤바 thumb */
  --color-line-dark: #29292b;        /* 푸터 구분선 */

  /* ---------- Color : Gray ---------- */
  --color-gray-700: #454545;         /* 카피라이트 */
  --color-gray-600: #5d5d5d;         /* top 버튼 */
  --color-gray-550: #686868;         /* circleHoverBtn 테두리 */
  --color-gray-500: #7b7b7b;
  --color-gray-450: #8c8c8c;         /* 메가메뉴 설명 */
  --color-gray-400: #8f8f91;         /* 푸터 보조 텍스트 */
  --color-gray-300: #ababab;         /* 다크 섹션 본문 */
  --color-gray-250: #c7c6c6;
  --color-gray-200: #e1e1e5;         /* 비활성 대형 인덱스 텍스트 */
  --color-gray-150: #e2e2e2;         /* 리스트 구분선, 칩 배경 */
  --color-gray-100: #e9e8e8;         /* 배경 대형 마퀴 텍스트 */
  --color-gray-50:  #f4f4f4;         /* 섹션 그라디언트 상단 */
  --color-white: #ffffff;

  /* ---------- Color : Semantic ---------- */
  --color-bg: var(--color-white);
  --color-bg-subtle: var(--color-gray-50);
  --color-bg-inverse: var(--color-ink-900);
  --color-text: var(--color-ink-800);
  --color-text-body: var(--color-ink-700);
  --color-text-muted: var(--color-gray-450);
  --color-text-faint: var(--color-gray-200);
  --color-text-inverse: var(--color-white);
  --color-text-inverse-muted: var(--color-gray-300);
  --color-border: var(--color-gray-150);
  --color-border-strong: var(--color-gray-550);
  --color-tile: rgba(15, 15, 15, 0.03); /* 로고 타일 배경 */
  --color-tile-border: #e1e1e1;

  /* ---------- Gradient ---------- */
  /* 히어로 픽셀 샘플링 값: 상단 #00061c → 하단 #004dbc~#0050c5 */
  --gradient-hero: radial-gradient(120% 90% at 50% 0%, #001434 0%, #00061c 45%, #00307a 78%, #0050c5 100%);
  --gradient-deep: linear-gradient(160deg, #00061c 0%, #001434 45%, #0047b3 100%);
  --gradient-section: linear-gradient(0deg, #ffffff, #f4f4f4); /* .se03 .gradient */
  /* 히어로 아래 은은한 파스텔 번짐 (#faedc8 등 샘플링) */
  --gradient-glow: radial-gradient(40% 60% at 15% 0%, rgba(42, 79, 241, .12), transparent 70%),
                   radial-gradient(40% 60% at 50% 0%, rgba(250, 237, 200, .7), transparent 70%),
                   radial-gradient(40% 60% at 85% 0%, rgba(255, 196, 196, .45), transparent 70%);

  /* ---------- Typography ---------- */
  --font-display: "Poppins", "Pretendard", sans-serif;  /* 영문 헤드라인, 내비, 버튼 */
  --font-body: "Pretendard", sans-serif;                /* 국문 본문 */

  --tracking-display: -0.025em;
  --tracking-body: -0.04em;

  --weight-extralight: 200;
  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* 1920 기준 고정 크기. 1440px 이하에서 한 단계 축소 (파일 하단 미디어 쿼리) */
  --text-hero:    83px;
  --text-display: 62px;
  --text-index:   64px;   /* 대형 인덱스 리스트 */
  --text-stat:    56px;   /* 숫자 지표 */
  --text-h2:      40px;
  --text-h3:      30px;
  --text-h4:      22px;
  --text-lead:    20px;
  --text-body-lg: 18px;
  --text-body:    17px;
  --text-sm:      0.9375rem;  /* 15px - 버튼 */
  --text-xs:      0.875rem;   /* 14px */
  --text-2xs:     0.8125rem;  /* 13px - 칩 */
  --text-3xs:     0.75rem;    /* 12px - 배지, 캡션 */

  --leading-tight: 1.25;      /* 83/104 */
  --leading-display: 1.34;    /* 62/83 */
  --leading-snug: 1.65;       /* 20/33, 22/36 */
  --leading-body: 1.75;       /* 17/29 ~ 18/32 */
  --leading-loose: 1.82;      /* 17/31 */

  /* ---------- Spacing (4px 기반) ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 30px;
  --space-8: 40px;
  --space-9: 50px;
  --space-10: 60px;
  --space-11: 80px;
  --space-12: 90px;
  --space-13: 110px;
  --space-14: 170px;

  /* 섹션 상하 여백 / 섹션 제목과 내용 사이 */
  --section-y: 110px;
  --section-head-gap: 50px;

  /* ---------- Layout (PC 전용, 최소 1280px) ---------- */
  --page-min: 1280px;      /* 이보다 좁으면 가로 스크롤 */
  --container: 1600px;     /* 기본 콘텐츠 최대 폭 */
  --container-wide: 1780px;/* 헤더·히어로 */
  --container-text: 860px; /* 긴 글 */
  --page-gutter: 80px;     /* 화면 좌우 최소 여백 */
  --grid-columns: 12;
  --grid-gap: 30px;
  --header-height: 80px;

  /* ---------- Radius ---------- */
  --radius-xs: 10px;
  --radius-sm: 12px;     /* 모바일 카드 */
  --radius-md: 19px;     /* 리스트 아이템, 배너 */
  --radius-lg: 23px;     /* 카드 */
  --radius-xl: 45px;     /* 대형 미디어 */
  --radius-pill: 50px;   /* 버튼, 칩 */
  --radius-round: 50%;
  --radius-scene: 20px;  /* 히어로 clip-path inset round */

  /* ---------- Motion ---------- */
  --duration-fast: 0.2s;   /* 호버 */
  --duration-base: 0.4s;   /* 패널, 메뉴 */
  --duration-slow: 0.6s;   /* 카드 확장 */
  --duration-reveal: 0.7s; /* 콘텐츠 페이드 */
  --ease-standard: cubic-bezier(0.45, 0, 0.55, 1);

  /* ---------- Elevation / Z ---------- */
  --z-header: 995;
  --z-overlay: 993;
  --shadow-glow: 0 0 10px rgba(255, 255, 255, 0.4);
}

/* 1280 ~ 1440px 구간: 타이포·여백 한 단계 축소 */
@media (max-width: 1440px) {
  :root {
    --text-hero:    64px;
    --text-display: 48px;
    --text-index:   50px;
    --text-stat:    44px;
    --text-h2:      34px;
    --text-h3:      26px;
    --text-h4:      20px;
    --text-lead:    18px;
    --text-body-lg: 17px;
    --text-body:    16px;
    --section-y: 80px;
    --section-head-gap: 40px;
    --page-gutter: 60px;
    --grid-gap: 24px;
  }
}