/* ============================================================
   I PICK KOREA — Design Tokens
   ㈜아이픽코리아 기업 홈페이지
   ------------------------------------------------------------
   이 파일은 단일 진실 공급원(Single Source of Truth)입니다.
   여기 정의되지 않은 색상·간격·반경·전환값을 컴포넌트에서
   직접 하드코딩하지 마세요.
   ============================================================ */

/* ------------------------------------------------------------
   Pretendard Variable — 자체 호스팅 서브셋

   예전에는 jsdelivr 의 dynamic-subset 을 링크했다. "쓰는 글자만 받는다"고
   하지만 한글 음절이 유니코드상 넓게 흩어져 있어 한 페이지가 결국 청크
   19개를 건드렸고, 실측 504KB 로 서브페이지 전송량의 88% 였다.
   본문에 실제로 쓰이는 문자만 담아 118KB 가 됐다.

   함께 사라진 것 — 렌더차단 서드파티 스타일시트 1개와 preconnect 1개.
   첫 화면 경로에서 DNS·TLS 왕복이 한 벌 빠진다.

   ⚠ 디스크립터는 원본 CSS 와 글자 그대로 맞춰 두었다.
     font-weight 를 45 920 으로 적는 것도 원본이 그렇게 선언하기 때문이다
     (폰트의 fvar 축은 45-930 이지만, 원본과 다르게 적으면 브라우저가
      두께를 다르게 클램프해 렌더링이 바뀐다).
   ⚠ 파일은 tools/build-font-subset.mjs 가 만든다. 카피에 새 글자가 생기면
     `npm run build` 가 경고하니 그때 다시 돌릴 것.
   ⚠ Pretendard 는 SIL OFL 1.1 — /assets/fonts/OFL.txt 를 함께 배포한다.
   ------------------------------------------------------------ */
@font-face {
  font-family: "Pretendard Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 45 920;
  src: url("/assets/fonts/PretendardVariable.subset.woff2")
    format("woff2-variations");
}

/* ------------------------------------------------------------
   Inter — 자체 호스팅 서브셋

   예전에는 Google Fonts 를 링크했다. 전송량은 크지 않았지만(CSS 10KB +
   woff2 47KB) 대가가 둘 있었다.
     · 모든 방문자의 IP 가 구글로 전송된다 — 개인정보처리방침에 국외이전
       항목이 하나 늘고, 유럽에서는 판례까지 있다.
     · 서드파티 출처가 남아 CSP 를 'self' 로 좁힐 수 없다.
   자체 호스팅으로 옮기면서 둘 다 사라졌고 31KB 로 줄었다.

   ⚠ 가변폰트라 font-weight 를 범위로 선언한다. 예전 Google 링크는
     400·500·600·700 네 개의 정적 인스턴스를 받았는데, 가변 원본은
     그 지점들을 그대로 재현하도록 만들어져 있다(교체 시 실측으로 확인).
   ------------------------------------------------------------ */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("/assets/fonts/Inter.subset.woff2") format("woff2-variations");
}

:root {
  /* --------------------------------------------------------
     1. COLOR — 실제 로고 기반 네이비/청록 팔레트
     사용 비율 원칙: 화이트·그레이 70% / 네이비·청록 25% / accent 5% 이내
     -------------------------------------------------------- */

  /* Brand — Navy */
  --navy-900: #0a1e3c; /* 헤더, 푸터, 다크 섹션 배경 */
  --navy-700: #12356b; /* 주요 제목, 강조 텍스트 */

  /* Brand — Teal
     실제 로고(회사소개서 수록)에서 추출한 청록 계열입니다.
     최초 기획의 로얄블루(#1B6FD4)는 로고 색상과 계열이 달라 교체했습니다.
     대비: teal-500 위 흰 텍스트 5.68:1 / navy-900 위 teal-300 6.93:1 (둘 다 AA 충족) */
  --teal-500: #0f6e96; /* 브랜드 메인: 버튼, 링크, 액센트 */
  --teal-300: #4fb4d8; /* 보조 액센트, 아이콘, 다크 배경 위 링크 */
  --teal-050: #ecf5f9; /* 섹션 구분용 연한 배경 */

  /* Neutral */
  --white: #ffffff;
  --gray-100: #f4f6f8; /* 카드 배경 */
  --gray-300: #d8dee5; /* 보더, 구분선 */
  --gray-600: #5a6673; /* 본문 보조 텍스트 */
  --black-900: #111417; /* 본문 기본 텍스트 */

  /* Accent — 극도로 제한적 사용 (CTA 강조, 긴급 대응 배지 전용) */
  --accent: #e8433a;

  /* ----- 의미론적 별칭(Semantic aliases) -----
     컴포넌트에서는 원색 변수보다 아래 별칭을 우선 사용할 것.
     팔레트가 바뀌어도 컴포넌트를 수정할 필요가 없습니다. */
  --color-text: var(--black-900);
  --color-text-muted: var(--gray-600);
  --color-text-invert: var(--white);
  --color-heading: var(--navy-700);

  --color-bg: var(--white);
  --color-bg-subtle: var(--teal-050); /* 섹션 교차 배경 */
  --color-bg-card: var(--gray-100);
  --color-bg-dark: var(--navy-900);

  --color-border: var(--gray-300);
  --color-border-strong: var(--navy-700);
  --color-border-dark: rgba(255, 255, 255, 0.16); /* 다크 섹션 내부 구분선 */

  --color-link: var(--teal-500);
  --color-link-hover: var(--navy-700);
  --color-focus: var(--teal-500);

  /* 히어로 오버레이 — 유일하게 허용된 그라데이션 (navy-900 → navy-700) */
  --overlay-hero: linear-gradient(
    100deg,
    rgba(10, 30, 60, 0.92) 0%,
    rgba(10, 30, 60, 0.86) 45%,
    rgba(18, 53, 107, 0.72) 100%
  );
  /* 다크 섹션 위 이미지용 단색 오버레이 */
  --overlay-solid: rgba(10, 30, 60, 0.8);

  /* --------------------------------------------------------
     2. TYPOGRAPHY
     한글 Pretendard Variable / 영문 Inter
     -------------------------------------------------------- */
  --font-ko: "Pretendard Variable", Pretendard, -apple-system,
    BlinkMacSystemFont, system-ui, "Apple SD Gothic Neo", "Malgun Gothic",
    sans-serif;
  --font-en: "Inter", -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI",
    Arial, sans-serif;
  /* 기본 본문: 한글 페이지 기준. /en/ 문서는 html[lang="en"] 에서 재정의 */
  --font-body: var(--font-ko);
  /* eyebrow·수치·라벨 등 영문 전용 조판 */
  --font-mono-num: var(--font-en);

  /* Type scale */
  --fs-h1: clamp(2.2rem, 5vw, 3.5rem);
  --fs-h2: clamp(1.75rem, 3.5vw, 2.5rem);
  --fs-h3: 1.25rem;
  --fs-h4: 1.0625rem;
  --fs-body-lg: 1.125rem; /* 리드 문단 */
  --fs-body: 1rem;
  --fs-caption: 0.875rem;
  --fs-eyebrow: 0.75rem;

  /* Weight */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* Line height */
  --lh-tight: 1.2; /* h1, h2 */
  --lh-snug: 1.4; /* h3, h4 */
  --lh-body: 1.7; /* 본문 */

  /* Letter spacing — 한글 제목은 조여서 밀도감, 영문은 0 기준 */
  --ls-heading-ko: -0.02em;
  --ls-heading-en: 0em;
  --ls-body: 0em;
  --ls-eyebrow: 0.14em; /* 영문 eyebrow 라벨 */

  /* --------------------------------------------------------
     3. SPACING — 8px 기반 스케일. 이 외 수치 사용 금지.
     -------------------------------------------------------- */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 40px;
  --space-5: 64px;
  --space-6: 96px;

  /* 섹션 상하 여백 (모바일 64 → 데스크톱 96) */
  --section-y: var(--space-5);

  /* --------------------------------------------------------
     4. LAYOUT
     -------------------------------------------------------- */
  --container-max: 1200px;
  --container-pad: 16px; /* 모바일 */
  --grid-columns: 12;
  --grid-gap: var(--space-3); /* 24px */
  --measure: 68ch; /* 본문 최적 행 길이 */

  --header-h: 64px;
  --mobilebar-h: 60px; /* 모바일 하단 고정 CTA 바 */
  /* 상단 유틸리티 스트립. 900px 미만에서는 숨겨지므로 0.
     .site-header 가 통째로 sticky 라 이 높이도 앵커 오프셋에 포함돼야 한다. */
  --topbar-h: 0px;
  /* 헤더 전체 높이. 히어로를 이만큼 끌어올려 헤더가 그 위에 겹치게 한다.
     calc 이므로 --header-h / --topbar-h 가 브레이크포인트에서 바뀌면 따라간다.

     ⚠ --border-w 를 반드시 더할 것.
       .site-header 에는 border-bottom 1px 이 늘 붙어 있다(최상단에서는
       transparent 라 안 보일 뿐 자리는 차지한다). 이걸 빼먹으면 헤더는
       117px 인데 히어로는 116px 만 올라가서, 문서 맨 위에 1px 틈이 남고
       그 사이로 body 의 흰 배경이 가느다란 선으로 비친다.
       실제로 "상단에 미세한 흰색"으로 발견됐다. */
  --header-total-h: calc(
    var(--header-h) + var(--topbar-h) + var(--border-w)
  );

  /* --------------------------------------------------------
     5. SHAPE & LINE
     각진 형태 = 물류·해운의 신뢰감. pill(999px) 금지.
     -------------------------------------------------------- */
  --radius: 4px;
  --radius-sm: 2px;
  --border-w: 1px;
  --border: var(--border-w) solid var(--color-border);
  --border-dark: var(--border-w) solid var(--color-border-dark);

  /* 그림자는 최소화. 아래 세 가지 외 사용 금지. */
  --shadow-header: 0 1px 0 0 var(--gray-300); /* 스크롤 시 헤더 하단선 */
  --shadow-overlay: 0 8px 24px rgba(10, 30, 60, 0.12); /* 드롭다운·모바일바 전용 */
  /* 스크롤 후 헤더가 지면에서 살짝 떠 보이게. 아래로만 번지고 위로는 새지 않도록
     y 오프셋보다 blur 를 크게, spread 를 음수로 뒀다. 색은 navy-900 계열이다 —
     회색 그림자는 종이처럼 보이고, 이 사이트의 그림자는 전부 네이비를 깐다. */
  --shadow-header-lift: 0 10px 30px -14px rgba(10, 30, 60, 0.3);

  /* --------------------------------------------------------
     6. MOTION — transform 금지. color/border/background만 전환.
     -------------------------------------------------------- */
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --dur: 200ms;
  --transition: color var(--dur) var(--ease),
    background-color var(--dur) var(--ease),
    border-color var(--dur) var(--ease), opacity var(--dur) var(--ease);

  /* 헤더 상태 전환 전용.
     --ease 는 시작이 급해서(0.2,0,0,1) 짧은 hover 에는 좋지만, 헤더처럼
     넓은 면이 통째로 바뀔 때 쓰면 배경색이 튀듯 갈린다.
     easeOutCubic 은 초반이 완만해 색이 스며들듯 바뀐다. */
  --ease-soft: cubic-bezier(0.33, 1, 0.68, 1);
  --dur-header: 420ms;

  /* --------------------------------------------------------
     7. FOCUS — 접근성. 모든 인터랙티브 요소에 적용.
     -------------------------------------------------------- */
  --focus-ring: 2px solid var(--color-focus);
  --focus-offset: 2px;

  /* --------------------------------------------------------
     8. Z-INDEX
     -------------------------------------------------------- */
  --z-base: 1;
  --z-sticky: 100;
  --z-header: 200;
  --z-mobilebar: 300;
  --z-drawer: 400;
  --z-skiplink: 500;
}

/* ------------------------------------------------------------
   데스크톱 재정의 (≥768px)
   ------------------------------------------------------------ */
@media (min-width: 768px) {
  :root {
    --container-pad: 24px;
    --section-y: var(--space-6); /* 96px */
    --header-h: 80px;
  }
}

/* 상단 유틸리티 스트립이 나타나는 지점. components.css 의 .topbar 표시 조건과
   같은 900px 을 쓴다 — 둘이 어긋나면 앵커가 헤더 밑으로 들어간다. */
@media (min-width: 900px) {
  :root {
    --topbar-h: 36px;
  }
}

/* ------------------------------------------------------------
   언어별 조판
   영문 문서는 Inter를 본문 기본값으로, 제목 자간을 0으로.
   ------------------------------------------------------------ */
html[lang="en"] {
  --font-body: var(--font-en);
  --ls-heading: var(--ls-heading-en);
}
html[lang="ko"] {
  --font-body: var(--font-ko);
  --ls-heading: var(--ls-heading-ko);
}

/* ------------------------------------------------------------
   모션 최소화 선호 사용자 존중
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur: 1ms;
    --dur-header: 1ms;
  }
}