/* 피크닉 정적 퍼블 — 디자인 토큰. 색을 바꾸면 전 페이지에 반영됩니다. */
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");

:root {
  /* 글꼴 */
  --font-pretendard: "Pretendard Variable", "Pretendard", -apple-system, BlinkMacSystemFont,
    system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo",
    "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji",
    "Segoe UI Symbol", sans-serif;
  /* 색 — Red */
  --color-red-50: #ff8c70;
  --color-red-20: #fff4f0;
  --color-red-30: #ffebe5;
  --color-red-60: #ff7957;
  --color-red-primary: #ff3300;
  --color-red-number: #f23040; /* Principle 인재상 번호 */
  --color-red-point: #ee3341; /* Principle 핵심 가치 아이콘 빨간 칸 */
  /* 색 — Gray */
  --color-gray-50: #c1c1c1;
  --color-gray-500: oklch(55.1% 0.027 264.364);
  --color-gray-900: oklch(21% 0.034 264.665);
  --color-gray-08: #f8f8f8; /* Principle 핵심 가치 카드 */
  --color-gray-09: #f0f0f0; /* Principle 핵심 가치 카드 — 포커스(Figma) */
  --color-gray-10: #f5f5f5;
  --color-gray-17: #e5e5e5; /* Principle 핵심 가치 아이콘 — 꺼진 칸(모션 시작) */
  --color-gray-12: #ececec; /* Services 카테고리 이미지 테두리 */
  --color-gray-15: #f3f3f3; /* AI 상세 후기 카드 배경 */
  --color-gray-20: #ebe7e7;
  --color-gray-30: #d9d9d9;
  --color-gray-35: #d6d6d6; /* AI 상세 후기 카드 테두리 */
  --color-gray-40: #dcdcdc;
  --color-gray-45: #c7c7c7; /* DPX 순환도 원 테두리 */
  --color-gray-60: #8e8e8e;
  --color-gray-70: #81807e;
  --color-gray-75: #616369;
  --color-gray-80: #4e4e4e;
  --color-gray-85: #2b2b2b; /* DPX 실행 방식 카드 */
  --color-gray-90: #292929;
  --color-gray-95: #1e1e1e; /* Principle 핵심 가치 카드(다크) */
  --color-gray-32: #d3d3d3; /* Principle 인재상 카드 테두리 */
  --color-gray-black: #141516;
  --color-gray-white: #ffffff;
  /* 색 — AI 상세 헤더 (히어로 사진 윗부분과 이어지는 색) */
  --color-navy-header: #0e0e2d;
  --color-teal-header: #081a23;
  --color-navy-10: #0a0d2a; /* 퍼소드 히어로 바탕 그라데이션 */
  --color-navy-20: #1c1240;
  --color-teal-10: #06161c; /* VOC 히어로 바탕 그라데이션 */
  --color-teal-20: #0e2a3a;
  /* 색 — Dark (AI 상세 다크 화면) */
  --color-dark-10: #111214;
  --color-dark-20: #1e1f21;
  --color-dark-30: #2c2d30;
  --color-dark-40: #3a3b3e;
  /* 공통 헤더 높이 (모바일 64px, 데스크톱은 base.css에서 100px) */
  --site-header-height: 4rem;

  /* ── 아래는 내부용 기본값 — 수정하지 마세요 ── */
  --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
      "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
      "Courier New", monospace;
  --color-black: #000;
  --color-white: #fff;
  --spacing: 0.25rem;
  --text-xs: 0.75rem;
  --text-xs--line-height: calc(1 / 0.75);
  --text-sm: 0.875rem;
  --text-sm--line-height: calc(1.25 / 0.875);
  --text-base: 1rem;
  --text-base--line-height: calc(1.5 / 1);
  --text-lg: 1.125rem;
  --text-lg--line-height: calc(1.75 / 1.125);
  --text-xl: 1.25rem;
  --text-xl--line-height: calc(1.75 / 1.25);
  --text-2xl: 1.5rem;
  --text-2xl--line-height: calc(2 / 1.5);
  --text-3xl: 1.875rem;
  --text-3xl--line-height: calc(2.25 / 1.875);
  --text-4xl: 2.25rem;
  --text-4xl--line-height: calc(2.5 / 2.25);
  --text-5xl: 3rem;
  --text-5xl--line-height: 1;
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  --font-weight-black: 900;
  --tracking-tight: -0.025em;
  --tracking-normal: 0em;
  --leading-tight: 1.25;
  --leading-snug: 1.375;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;
  --radius-xs: 0.125rem;
  --radius-sm: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --radius-xl: 0.75rem;
  --radius-2xl: 1rem;
  --radius-3xl: 1.5rem;
  --radius-4xl: 2rem;
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --animate-spin: spin 1s linear infinite;
  --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  --default-transition-duration: 150ms;
  --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  --default-font-family: var(--font-sans);
  --default-mono-font-family: var(--font-mono);
  --animate-marquee: marquee 40s linear infinite;
  --animate-marquee-reverse: marquee 40s linear infinite reverse;
  --animate-marquee-up: marquee-up 30s linear infinite;
}