/* PREDAQ 디자인 토큰 — 틸 시그니처 톤 (SR Corporate Carousel 레퍼런스 기반)
   틸 #00B7B1 단일 강조 + 쿨그레이 밴드 + 딥틸 다크 밴드.
   비비드 3색(퍼플·핑크·오렌지)에서 전환 — 한국 일반 대중 대상 신뢰감 우선.
   색·폰트·간격·모션값은 이 변수만 사용 */
:root {
   /* 색상 — 베이스 */
   --color-page: #FFFFFF;
   --color-band: #F0F3F7;
   /* 라이트 밴드 — 쿨그레이 */
   --color-bg: #FFFFFF;
   --color-ink: #16232B;
   /* 틸 기운 도는 차콜 */
   --color-ink-soft: #5A6B75;
   --color-line: #DFE5EA;

   /* 브랜드 — 틸 단일 강조
     시그니처 #00B7B1은 흰 배경에서 2.5:1이라 텍스트에 못 쓴다.
     장식(룰·아이콘·보더·게이지)은 primary, 텍스트·버튼 fill은 primary-strong. */
   --color-primary: #00B7B1;
   /* 장식 전용 — 시그니처 */
   --color-primary-strong: #00807C;
   /* 텍스트·버튼 (흰 배경 4.8:1, AA) */
   --color-primary-hover: #00615E;
   --color-primary-deep: #06514F;
   /* 다크 밴드·푸터 */
   --color-primary-soft: #E4F6F5;
   --color-primary-on-dark: #6FE0DB;
   /* 다크 배경 위 강조 */

   /* 보조 — 절제해서만 사용 */
   --color-navy: #1D4E5C;
   /* 틸의 어두운 이웃 (9.1:1) */
   --color-navy-soft: #E8EFF2;

   /* 포인트 3종 [확정 2026-07-26] — 구 코랄 #FF7A59 폐기.
     코랄의 문제는 색상(주황)이 아니라 **명도와 채도**였다. 같은 계열을 깊게 내리면 해결된다:
     #FFA247 은 흰 배경 대비 2.0:1 (마크로 보이지 않음), 클로드 오렌지 #D97757 은
     쿨그레이 밴드에서 2.8:1 로 미달 + 틸과의 색각이상 분리 ΔE 7.3(경고). 한 단계 깊은
     #C4633F 가 3개 배경 전부 통과하고 분리도 ΔE 11.0 이다 — dataviz 검증 스크립트 기준.
     한 화면에 셋을 함께 쓰지 않는다 — 섹션마다 하나만 고른다. */
   --color-accent: #C4633F;
   /* 딥 테라코타 — 주의를 끄는 자리(스티커·강조·대조) */
   --color-accent-text: #9E4423;
   /* 테라코타 텍스트 (5.7:1 이상) */
   --color-accent-soft: #FBEFEA;
   --color-alt: #96780F;
   /* 딥 골드 — 세 번째 계열이 필요할 때만 */
   --color-alt-text: #7A6109;
   --color-alt-soft: #F8F3E0;
   --color-alt2: #8578D6;
   /* 바이올렛 — 부가 분류·냉색 대비 */
   --color-alt2-text: #4F4494;
   /* 바이올렛 텍스트 (7.3:1 이상) */
   --color-alt2-soft: #F0EEFA;

   /* 스펙트럼 확장 2계열 [신설 2026-08-15] — 색상환의 빈 구간을 메운다.
     기존 5계열의 OKLCH 색상각: 틸 190° · 네이비 220° · 바이올렛 295° · 테라코타 45° · 골드 90°.
     비어 있던 90→190(녹색)과 295→45(자홍) 구간에 하나씩 넣었다.
     dataviz validate_palette.js 검증 (2026-08-15):
     · 딥 그린 #39864C — vs 틸 ΔE 16.4 · vs 테라코타 ΔE 21.1 (정상시야 하한 15 통과)
     · 딥 플럼 #94357A — vs 테라코타 ΔE 18.8 · vs 바이올렛 ΔE 18.8 · CVD ΔE 18.7
     후보였다 탈락한 색: 녹색 #2E8B57(틸과 14.9로 하한 미달)·#2F7D5F(채도 0.09로 회색화),
     로즈 #B44A6A(테라코타와 10.0)·#A82F62(13.6) — 눈이 아니라 검증기가 고른 결과다.
     ⚠️ 기존 골드↔테라코타 쌍은 그 자체로 ΔE 3.3(deutan)이라 나란히 놓으면 구분되지 않는다.
     "한 화면에 셋을 함께 쓰지 않는다"는 규칙이 이 때문에 있으며, 계열이 7로 늘어도 규칙은 그대로다. */
   --color-alt3: #39864C;
   /* 딥 그린 — 점검·완료·안정된 상태 */
   --color-alt3-text: #2C6B3C;
   /* 그린 텍스트 (5.8:1 이상) */
   --color-alt3-soft: #E9F4EC;
   --color-alt4: #94357A;
   /* 딥 플럼 — 전환·결정의 자리 */
   --color-alt4-text: #7A2A64;
   /* 플럼 텍스트 (8.1:1 이상) */
   --color-alt4-soft: #F8ECF5;

   /* 다크 밴드 위 포인트 [신설 2026-08-15] — 지금까지 어두운 면에서는 틸만 쓸 수 있었다.
     딥틸(#0E2A31)·네이비딥(#12333D)·틸배너(#06514F) 세 면 전부에서 3:1 이상 확보. */
   --color-accent-on-dark: #E8916B;
   --color-alt-on-dark: #D9B44A;
   --color-alt2-on-dark: #9E92E8;
   --color-alt3-on-dark: #8FD9A0;
   --color-alt4-on-dark: #E8B4DB;

   /* 차트 마크 색 — 텍스트에 쓰지 않는다 (텍스트는 위 *-text).
     브랜드 텍스트색(#00807C·#1D4E5C)은 채도가 낮아 마크로 쓰면 회색으로 읽힌다 —
     그래서 차트는 전용 슬롯을 쓴다. 순서 고정, 순환 금지. */
   --chart-1: #00908A;
   /* 틸 — PREDAQ·주 계열 */
   --chart-2: #e66b3f;
   /* 오렌지 — UI 포인트(--color-accent #C4633F)보다 의도적으로 밝고 채도가 높다.
      틸(C 0.102)보다 채도 60% 위라서 나란히 놓으면 먼저 읽힌다 = 강조 슬롯.
      ⚠️ 쿨그레이 밴드(#F0F3F7)에서는 대비 2.89:1 로 미달 — 그 밴드에는 이 색으로 막대를
      놓지 않는다. 옮겨야 하면 #D45E3D (채도 96% 유지, 전 밴드 통과). */
   --chart-3: #6558B5;
   /* 바이올렛 */
   --chart-4: #96780F;
   /* 딥 골드 */
   /* 순차 램프 — 부분-전체 차트의 "이야기 아닌" 조각들. 한 색상(네이비) 명도만 이동.
      쿨그레이 밴드(#F0F3F7)에서 8.2 / 5.1 / 3.4 / 2.2:1 — dataviz --ordinal 전 항목 PASS.
      구 --color-band·--color-navy-soft 는 배경 대비 1.0:1 이라 아예 보이지 않았다. */
   --ramp-1: #1D4E5C;
   --ramp-2: #3A6E7D;
   --ramp-3: #5C8B98;
   --ramp-4: #89AAB4;
   --chart-1-on-dark: #3ED9D0;
   /* 네이비 밴드(#17404D) 위 — 대비·CVD PASS */
   --chart-2-on-dark: #E8916B;
   --chart-3-on-dark: #9E92E8;
   --chart-4-on-dark: #D9B44A;

   /* 차트 규격 — 넓은 화면에서 막대가 비대해지는 것을 막는다 */
   --chart-maxw: 720px;
   /* 세로 막대 차트 폭 상한 */
   --chart-maxw-wide: 880px;
   /* 100% 누적 바 등 폭이 필요한 차트 */
   --chart-h: clamp(160px, 22vw, 220px);
   --chart-bar: 24px;
   /* 막대 최대 두께 — 슬롯을 채우지 않고 남는 폭은 여백 */
   --chart-gap: 2px;
   /* 맞닿는 마크 사이 서피스 갭 (보더 대신) */

   /* 상태 — 차트 계열로 재사용하지 않는다 */
   --color-ok: #17A98A;
   --color-error: #D64545;

   /* 그라디언트 — 색상환 이동 대신 명도 이동 */
   --grad-brand: linear-gradient(45deg, #00B7B1, #35D6CE, #0E8F9A, #35D6CE, #00B7B1);
   --grad-brand-strong: linear-gradient(45deg, #00807C, #0A9A93, #0A6E78, #0A9A93, #00807C);
   /* 버튼 채움 */
   --grad-em-text: linear-gradient(45deg, #00807C, #0A6E78, #00807C);
   /* 헤드라인 <em> — 가독성 확보 */
   --grad-dark: linear-gradient(135deg, #0E2A31 0%, #06514F 100%);
   --grad-banner: linear-gradient(120deg, #06514F 0%, #00B7B1 100%);

   /* 배경 변주 — 밴드 리듬 확장 (2026-07-26, 제작 메뉴에서 도입).
     기존 리듬(화이트→쿨그레이→딥틸→틸배너)에 그리드·워시·네이비를 더한다.
     색상환은 그대로 두고 명도·채도만 이동시킨다 (DESIGN.md A) */
   --color-navy-deep: #12333D;
   /* 네이비 다크 밴드 — 딥틸과 구분되는 두 번째 어두운 면 */
   --grad-navy: linear-gradient(135deg, #12333D 0%, #1D4E5C 100%);
   --color-wash: #F4FBFA;
   /* 아주 옅은 틸 워시 — 쿨그레이보다 따뜻한 밝은 면 */
   --bg-grid-line: rgba(29, 78, 92, 0.05);
   /* 설계도 그리드 */
   --bg-grid-size: 34px;
   --bg-dot: rgba(0, 183, 177, 0.16);
   /* 도트 패턴 */
   --bg-dot-size: 22px;

   /* 다크 밴드 위 텍스트 */
   --color-on-dark: #FFFFFF;
   --color-on-dark-soft: rgba(255, 255, 255, 0.72);
   --color-on-dark-line: rgba(255, 255, 255, 0.14);

   /* 타이포 */
   --font-sans: "Pretendard", "Apple SD Gothic Neo", "Noto Sans KR",
      -apple-system, "Segoe UI", sans-serif;
   --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", "Menlo", monospace;
   --fs-hero: clamp(2rem, 4.6vw, 3.5rem);
   --fs-h2: clamp(1.6rem, 3.3vw, 2.5rem);
   --fs-h3: 1.2rem;
   --fs-body: 1rem;
   --fs-small: 0.9rem;
   --fs-label: 0.78rem;
   --ls-tight: -0.02em;

   /* 간격·형태 — 라운드 축소(레퍼런스의 각진 카드) */
   --space-1: 0.5rem;
   --space-2: 1rem;
   --space-3: 1.75rem;
   --space-4: 3rem;
   --space-5: 6rem;
   --radius-s: 6px;
   --radius: 12px;
   --radius-lg: 16px;
   --maxw: 1280px;
   --rule: 3px;
   /* 카드 상단 강조 룰 두께 */

   /* 그림자 — 얕고 중성적으로 */
   --shadow-1: 0 1px 2px rgba(22, 35, 43, 0.04), 0 4px 12px rgba(22, 35, 43, 0.05);
   --shadow-2: 0 2px 4px rgba(22, 35, 43, 0.04), 0 10px 28px rgba(22, 35, 43, 0.08);
   --shadow-3: 0 6px 12px rgba(22, 35, 43, 0.05), 0 24px 56px rgba(22, 35, 43, 0.12);
   --glow-primary: 0 10px 30px -14px rgba(0, 183, 177, 0.45);
   --glow-navy: 0 10px 30px -14px rgba(29, 78, 92, 0.40);
   --glow-accent: 0 10px 30px -14px rgba(196, 99, 63, 0.42);
   --glow-alt: 0 10px 30px -14px rgba(150, 120, 15, 0.40);
   --glow-alt2: 0 10px 30px -14px rgba(133, 120, 214, 0.40);
   --glow-alt3: 0 10px 30px -14px rgba(57, 134, 76, 0.40);
   --glow-alt4: 0 10px 30px -14px rgba(148, 53, 122, 0.40);

   /* 이미지 위 처리 [신설 2026-08-15] — 사진을 그대로 얹으면 색이 브랜드에서 떨어져 나간다.
     아래 셋으로 톤을 사이트 쪽으로 당긴다: 틸 스크림 + 상단 페이드 + 미세 그레인. */
   --scrim-brand: linear-gradient(180deg, rgba(14, 42, 49, 0) 40%, rgba(14, 42, 49, 0.55) 100%);
   --scrim-teal: linear-gradient(135deg, rgba(0, 183, 177, 0.22) 0%, rgba(29, 78, 92, 0.30) 100%);
   --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.30'/%3E%3C/svg%3E");

   /* 모션 (DESIGN.md A1) */
   --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
   --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
   --dur-1: 160ms;
   --dur-2: 320ms;
   --dur-3: 640ms;
}