/* ============================================================
   ticker.bullstory.io — 디자인 토큰 v2.0
   다크 프리미엄 테마 + 글래스모피즘

   기반: bullstory-shop shared.css 토큰 체계 계승
   테마: 다크 + 라이트 (시간대별 자동 전환)
   브랜드: accent #CE0000 (bullstory.io 일관성 유지)
   그리드: 8px 기반 spacing 정규화
   토큰 수: ~130개 (22 카테고리)
   ============================================================ */

:root {

  /* ────────────────────────────────────────────────
     1. Elevation Map — 배경색 계층 (Layer 0–4)
     순흑(#000) 대신 근흑(near-black)으로 깊이감 + 고급감
     ──────────────────────────────────────────────── */

  /* Layer 0 — 앱 전체 배경, Three.js 캔버스 뒤 */
  --bg-dark: #0a0a0f;

  /* Layer 1 — 네비게이션, 풋터, 사이드 패널 */
  --bg-dark-elevated: #12121a;

  /* Layer 2 — 카드, 패널 기본 배경 (글래스모피즘 base) */
  --bg-dark-card: rgba(255, 255, 255, 0.03);

  /* Layer 3 — 카드 hover 상태 */
  --bg-dark-card-hover: rgba(255, 255, 255, 0.06);

  /* Layer 1.5 — elevated 배경 hover (flat-card 등 불투명 hover) */
  --bg-dark-elevated-hover: #1c1c28;

  /* Layer 4 — 입력 필드 배경 (함몰/inset 느낌) */
  --bg-dark-input: rgba(255, 255, 255, 0.05);

  /* Layer 2.5 — 코드 블록, 테이블 헤더 등 미세한 강조 배경 */
  --bg-subtle: rgba(255, 255, 255, 0.04);

  /* 스크림 — 모달 배경 오버레이 */
  --bg-scrim: rgba(0, 0, 0, 0.6);

  /* ────────────────────────────────────────────────
     2. 브랜드 Accent (#CE0000 계열)
     bullstory.io와 동일 accent — 서브도메인 브랜드 일관성
     ──────────────────────────────────────────────── */

  --accent-color: #CE0000;
  --accent-deep: #9B0000;
  --accent-glow: rgba(206, 0, 0, 0.25);
  --accent-soft: rgba(206, 0, 0, 0.08);

  /* Accent 테두리 (featured 카드, 강조 요소) */
  --accent-border: rgba(206, 0, 0, 0.3);
  --accent-border-hover: rgba(206, 0, 0, 0.5);
  --accent-border-subtle: rgba(206, 0, 0, 0.15);

  /* 프리미엄 그래디언트 (CTA, 히어로 텍스트) */
  --gradient-premium: linear-gradient(135deg, #CE0000 0%, #FF4444 50%, #9B0000 100%);
  --gradient-text: linear-gradient(135deg, #CE0000 0%, #FF4444 40%, #FF6B6B 100%);
  /* WebGL 대체 배경 그래디언트 (Three.js 미지원/모바일) */
  --gradient-webgl-fallback: radial-gradient(ellipse at 30% 40%, rgba(206, 0, 0, 0.15) 0%, transparent 60%),
    radial-gradient(ellipse at 70% 60%, rgba(155, 0, 0, 0.1) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 50%, rgba(26, 16, 37, 0.3) 0%, transparent 70%);
  /* 골든아워 그래디언트 — 다크에서는 webgl-fallback 동일 */
  --gradient-golden-hour: var(--gradient-webgl-fallback);

  /* ────────────────────────────────────────────────
     3. 텍스트 색상
     순백(#fff) 대신 약간 회색빛 — 눈부심 방지
     ──────────────────────────────────────────────── */

  /* 기본 텍스트 — WCAG AAA 대비 16.2:1 on --bg-dark */
  --text-dark-primary: #e8e8ed;

  /* 보조 텍스트 */
  --text-dark-secondary: #8b8b96;

  /* 비활성/힌트 — 대비 4.98:1 on --bg-dark, WCAG AA 충족 */
  --text-dark-muted: #7f7f89;

  /* 3차 텍스트 — 대비 3.28:1 on --bg-dark (#0a0a0f), AA Large 충족 (3:1+) */
  --text-dark-tertiary: #62626e;

  /* 역방향 텍스트 (accent 배경 위) */
  --text-on-accent: #ffffff;

  /* ────────────────────────────────────────────────
     4. 상태 색상
     금융 데이터 시각화용 — 상승/보합/하락 직관
     ──────────────────────────────────────────────── */

  --color-success: #22c55e;
  --color-warning: #f59e0b;
  --color-danger: #ef4444;
  --color-info: #3b82f6;

  /* 상태 배경 (배지/칩용 반투명) */
  --color-success-soft: rgba(34, 197, 94, 0.12);
  --color-success-soft-hover: rgba(34, 197, 94, 0.2);
  --color-warning-soft: rgba(245, 158, 11, 0.12);
  --color-danger-soft: rgba(239, 68, 68, 0.12);
  --color-danger-soft-hover: rgba(239, 68, 68, 0.2);
  --color-info-soft: rgba(59, 130, 246, 0.12);
  --color-code: #a78bfa;

  /* 온톨로지 그래프 노드 색상 */
  --onto-competitor: #ffa726;                    /* 경쟁사 노드 (앰버) */
  --onto-competitor-soft: rgba(255, 167, 38, 0.12); /* 경쟁사 노드 배경 */
  --onto-supply: #66bb6a;                        /* 공급망 노드 (그린) */
  --onto-supply-soft: rgba(102, 187, 106, 0.12); /* 공급망 노드 배경 */
  --onto-peer: #42a5f5;                          /* 동종업 노드 (블루) */
  --onto-peer-soft: rgba(66, 165, 245, 0.12);   /* 동종업 노드 배경 */

  /* ────────────────────────────────────────────────
     5. 글래스모피즘 토큰 (--glass-*)
     다크 테마 전용 — 반투명 유리 효과
     성능 주의: 뷰포트당 backdrop-filter 요소 ≤ 5개
     히어로(Three.js) 영역에서는 사용 금지
     ──────────────────────────────────────────────── */

  /* 카드 기본 배경 — 미세한 백색 반투명 */
  --glass-bg: rgba(255, 255, 255, 0.03);

  /* 카드 hover 배경 */
  --glass-bg-hover: rgba(255, 255, 255, 0.06);

  /* 강조 글래스 (네비게이션 등) */
  --glass-bg-strong: rgba(10, 10, 15, 0.8);

  /* 글래스 테두리 — 미세한 빛 반사선 */
  --glass-border: 1px solid rgba(255, 255, 255, 0.06);

  /* 테두리 hover 강조 */
  --glass-border-hover: 1px solid rgba(255, 255, 255, 0.12);

  /* 테두리 focus 강조 */
  --glass-border-focus: 1px solid rgba(206, 0, 0, 0.4);

  /* 글래스 테두리 색상만 (stroke 등에서 사용) */
  --glass-border-color: rgba(255, 255, 255, 0.06);

  /* 글래스 상단 하이라이트 — 카드 상단 edge 빛줄기 */
  --glass-sheen: rgba(255, 255, 255, 0.06);

  /* backdrop-filter 조합 — blur 20px + 채도 180% */
  --glass-blur: 20px;
  --glass-saturation: 180%;

  /* 모바일/저사양 대응 — 성능 최적화된 글래스 */
  --glass-blur-sm: 12px;
  --glass-saturation-sm: 150%;

  /* 모달/다이얼로그 배경 블러 — 스크림 위 경량 글래스 */
  --glass-blur-backdrop: 8px;

  /* ────────────────────────────────────────────────
     6. 그림자 토큰 (Shadow / Elevation)
     다크 테마에서는 그림자 강도 상향 (배경이 어두우므로)
     ──────────────────────────────────────────────── */

  /* 카드 기본 */
  --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.3);

  /* 카드 hover */
  --shadow-card-hover: 0 8px 24px rgba(0, 0, 0, 0.4);

  /* 카드 pressed */
  --shadow-card-pressed: 0 1px 4px rgba(0, 0, 0, 0.4);

  /* 모달, 드롭다운 (최상위 레이어) */
  --shadow-elevated: 0 12px 40px rgba(0, 0, 0, 0.5);

  /* 플로팅 패널 (하단→상단 방향) */
  --shadow-floating: 0 -4px 24px rgba(0, 0, 0, 0.2);

  /* accent glow — CTA 버튼 */
  --shadow-glow-accent: 0 0 20px rgba(206, 0, 0, 0.3), 0 0 60px rgba(206, 0, 0, 0.1);

  /* accent glow hover — CTA 버튼 hover 강화 */
  --shadow-glow-accent-hover: 0 0 24px rgba(206, 0, 0, 0.4), 0 0 72px rgba(206, 0, 0, 0.15);

  /* accent glow 중간 — 피처 카드 아이콘 hover */
  --shadow-glow-accent-md: 0 0 24px rgba(206, 0, 0, 0.25), 0 0 48px rgba(206, 0, 0, 0.08);

  /* 히어로 텍스트 미세 glow */
  --shadow-glow-soft: 0 0 40px rgba(206, 0, 0, 0.08);

  /* 입력 필드 inset */
  --shadow-inset: inset 0 1px 3px rgba(0, 0, 0, 0.3);

  /* 포커스 링 — 접근성 (키보드 내비게이션 시 표시) */
  --shadow-focus: 0 0 0 3px rgba(206, 0, 0, 0.08);

  /* 에러 포커스 링 */
  --shadow-focus-error: 0 0 0 3px rgba(239, 68, 68, 0.08);

  /* 내비게이션 바 그림자 */
  --shadow-nav: 0 1px 8px rgba(0, 0, 0, 0.15);

  /* 에러 상태 테두리 */
  --color-danger-border: rgba(239, 68, 68, 0.5);

  /* ────────────────────────────────────────────────
     7. Spacing — 8px 그리드 정규화
     점프 규칙: 최대 ×2, 대부분 ×1.33~×1.5
     4 → 8 → 12 → 16 → 24 → 32 → 48 → 64 → 96 → 120
     ──────────────────────────────────────────────── */

  --space-3xs: 2px;    /* 배지 내부 미세 여백 */
  --space-2xs: 4px;    /* 아이콘-텍스트 간격 */
  --space-xs: 8px;     /* 최소 내부 여백 */
  --space-sm: 12px;    /* 카드 내부 요소 간격 */
  --space-md: 16px;    /* 기본 여백 */
  --space-lg: 24px;    /* 섹션 내 그룹 간격, 카드 padding */
  --space-xl: 32px;    /* 큰 카드 padding */
  --space-2xl: 48px;   /* 섹션 간 간격 */
  --space-3xl: 64px;   /* 큰 섹션 간격 */
  --space-4xl: 96px;   /* 히어로 여백 */
  --space-section: 120px; /* 페이지 섹션 구분 */

  /* ────────────────────────────────────────────────
     8. Border Radius
     ──────────────────────────────────────────────── */

  --radius-2xs: 6px;   /* 코드 인라인, 최소 곡률 */
  --radius-xs: 8px;    /* 인라인 배지, 작은 칩 */
  --radius-sm: 12px;   /* 카드 내부 요소, 버튼 */
  --radius-md: 16px;   /* 일반 카드 */
  --radius-lg: 24px;   /* 큰 패널, 모달, 히어로 카드 */
  --radius-xl: 32px;   /* 글래스 히어로 패널 — 프리미엄 곡면 */
  --radius-pill: 999px; /* 토글, 입력 필드, CTA 버튼 */
  --radius-full: 999px; /* 원형 아이콘, 아바타 — pill 별칭 */

  /* ────────────────────────────────────────────────
     9. Typography
     Pretendard Variable — bullstory.io와 동일 폰트 체계
     ──────────────────────────────────────────────── */

  --font-family: 'Pretendard Variable', 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;
  --font-mono: 'SF Mono', 'Fira Code', 'Consolas', monospace;

  /* Type Scale */
  --font-size-2xs: 10px;   /* 모바일 배지, 라벨 최소 크기 */
  --font-size-xs: 11px;
  --font-size-sm: 13px;
  --font-size-md: 15px;
  --font-size-base: 17px;
  --font-size-lg: 19px;
  --font-size-xl: 24px;
  --font-size-2xl: 32px;
  --font-size-3xl: 40px;
  --font-size-4xl: 56px;
  --font-size-display: 72px;

  /* Weights */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Letter Spacing */
  --letter-display: -0.04em;  /* Display 전용 — 72px 히어로 카피 */
  --letter-heading: -0.03em;  /* H1 전용 — 56px 대제목 */
  --letter-tight: -0.025em;   /* H2–H4 — 일반 제목 */
  --letter-normal: -0.015em;  /* Body — 본문 기본 */
  --letter-wide: 0.02em;      /* 배지, 태그 — uppercase 라벨 */
  --letter-wider: 0.05em;     /* 라이브러리 라벨 등 강조 uppercase */

  /* Line Height */
  --line-height-tight: 1.08;     /* 히어로 타이틀 */
  --line-height-snug: 1.4;       /* 카드 제목, 다단 레이아웃 */
  --line-height-normal: 1.47;    /* 제목 */
  --line-height-reading: 1.5;    /* 긴 본문, 리스트 항목 */
  --line-height-relaxed: 1.65;   /* 본문 — 보고서 가독성 최적화 */
  --line-height-loose: 1.7;      /* 넓은 줄간격 — 부연 설명, 캡션 */

  /* ────────────────────────────────────────────────
     10. 전환/모션
     트랜지션 숏핸드 + GSAP/CSS 이징 함수 + 지속시간
     ──────────────────────────────────────────────── */

  --transition-fast: 0.15s ease;
  --transition-smooth: 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --transition-spring: 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);

  /* 이징 함수 — GSAP 동기화용 */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-cubic: cubic-bezier(0.33, 1, 0.68, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth: cubic-bezier(0.25, 0.46, 0.45, 0.94);

  /* 지속시간 */
  --duration-fast: 150ms;
  --duration-normal: 300ms;
  --duration-slow: 500ms;

  /* ────────────────────────────────────────────────
     11. Z-Index Scale
     Three.js 캔버스 / 콘텐츠 / UI 레이어 분리
     ──────────────────────────────────────────────── */

  --z-canvas: 0;       /* Three.js 배경 캔버스 */
  --z-content: 1;      /* 메인 콘텐츠 */
  --z-sticky: 10;      /* sticky 요소 */
  --z-nav: 20;         /* 네비게이션 */
  --z-dropdown: 30;    /* 드롭다운, 자동완성 */
  --z-panel: 40;       /* 슬라이드 패널 (알림 등) */
  --z-panel-backdrop: 39; /* 슬라이드 패널 배경 스크림 */
  --z-modal: 50;       /* 모달 */
  --z-toast: 60;       /* 토스트 알림 */

  /* ────────────────────────────────────────────────
     12. 선(border) 토큰
     border 남용 금지 — 배경색 차이/그림자/여백으로 구분
     ──────────────────────────────────────────────── */

  --line-dark: rgba(255, 255, 255, 0.06);
  --line-dark-strong: rgba(255, 255, 255, 0.12);
  --line-width: 1px;

  /* ────────────────────────────────────────────────
     12-B. 스크롤바 토큰
     ──────────────────────────────────────────────── */

  --scrollbar-bg: rgba(255, 255, 255, 0.04);
  --scrollbar-thumb: rgba(255, 255, 255, 0.12);
  --scrollbar-thumb-hover: rgba(255, 255, 255, 0.2);

  /* ────────────────────────────────────────────────
     12-C. 유틸리티 토큰
     ──────────────────────────────────────────────── */

  --table-stripe: rgba(255, 255, 255, 0.02);
  --overlay-gradient: linear-gradient(to bottom, transparent, var(--bg-dark));

  /* ────────────────────────────────────────────────
     12-D. 인터랙티브 / 시머 토큰
     테마 전환 시 자동 반전 — 하드코딩 rgba 방지
     ──────────────────────────────────────────────── */

  /* 호버 배경 — 버튼, 칩, 도트 등 범용 */
  --bg-hover-subtle: rgba(255, 255, 255, 0.1);

  /* 스켈레톤 시머 그래디언트 */
  --skeleton-base: rgba(255, 255, 255, 0.03);
  --skeleton-highlight: rgba(255, 255, 255, 0.06);

  /* 시머 효과 하이라이트 (카드 sheen, 버튼 shimmer) */
  --shimmer-highlight: rgba(255, 255, 255, 0.12);

  /* 네비게이션 스크롤 배경 — 480px 이하 backdrop-filter 비활성 시 대체 */
  --nav-bg-scrolled: rgba(10, 10, 15, 0.95);

  /* 미세 호버 배경 (0.05~0.06 범위, nav/메뉴 등) */
  --bg-hover-micro: rgba(255, 255, 255, 0.06);

  /* CTA 글로우 (미세 장식) */
  --shadow-glow-cta-subtle: 0 0 60px rgba(206, 0, 0, 0.06);
  --shadow-glow-cta-subtle-hover: 0 0 80px rgba(206, 0, 0, 0.08);

  /* 시머 그래디언트 피크 (버튼 shimmer 중앙 하이라이트) */
  --shimmer-peak: rgba(255, 255, 255, 0.1);

  /* 히어로 글로우 그래디언트 (보고서 히어로 배경 장식) */
  --hero-glow-gradient: radial-gradient(circle, rgba(206, 0, 0, 0.12) 0%, rgba(206, 0, 0, 0.04) 50%, transparent 75%);

  /* 히어로 분리선 그래디언트 (보고서 히어로 하단) */
  --hero-line-gradient: linear-gradient(90deg, #CE0000 0%, #FF4444 30%, rgba(206, 0, 0, 0.15) 60%, transparent 100%);

  /* ────────────────────────────────────────────────
     13. 레이아웃
     ──────────────────────────────────────────────── */

  --page-max-width: 960px;
  --content-max-width: 720px;   /* 보고서/본문 콘텐츠 영역 */
  --container-narrow: 800px;    /* 좁은 컨테이너 (포트폴리오 등) */
  --hero-max-width: 680px;      /* 히어로 내부 최대 너비 */
  --modal-max-width: 480px;     /* 모달 패널 최대 너비 */
  --page-padding: 32px;
  --page-padding-mobile: 20px;
  --nav-height: 56px;

  /* 아이콘/요소 크기 */
  --icon-sm: 40px;              /* 모바일 축소 아이콘 */
  --icon-md: 48px;              /* 기본 아이콘, VS 배지 */
  --icon-lg: 64px;              /* 빈 상태 아이콘 */
  --min-input-width: 200px;     /* 입력 필드 최소 너비 */
  --min-label-width: 80px;      /* 라벨 최소 너비 */

  /* ────────────────────────────────────────────────
     접근성
     ──────────────────────────────────────────────── */

  --touch-target-min: 44px;
  --focus-ring-width: 3px;
  --focus-ring-offset: 2px;

  /* ────────────────────────────────────────────────
     14. 점수 시각화 (Score Tones)
     AI 분석 점수 시각화 — #0a0a0f 대비 4.5:1+ 보장
     ──────────────────────────────────────────────── */

  --score-tone-1: #ef5350;   /* 매우 낮음 — 대비 5.2:1 */
  --score-tone-2: #ffa726;   /* 낮음 — 대비 8.4:1 */
  --score-tone-3: #fdd835;   /* 보통 — 대비 12.1:1 */
  --score-tone-4: #66bb6a;   /* 높음 — 대비 7.8:1 */
  --score-tone-5: #42a5f5;   /* 매우 높음 — 대비 5.9:1 */

  /* ────────────────────────────────────────────────
     15. 링크 색상
     다크 배경 최적화 링크 — 보고서 본문 내 사용
     ──────────────────────────────────────────────── */

  --link-color: #64b5f6;
  --link-hover: #90caf9;
  --link-underline: rgba(100, 181, 246, 0.3);
  --link-underline-hover: rgba(144, 202, 249, 0.5);

  /* ────────────────────────────────────────────────
     16. 가격 전용 타이포
     ──────────────────────────────────────────────── */

  --font-size-price: 36px;

  /* ────────────────────────────────────────────────
     17. Surface Hierarchy — 표면 위계 (yeol.dev 3단계)
     Level 0 = 페이지 배경, Level 1 = 카드/패널, Level 2 = hover/interactive
     ──────────────────────────────────────────────── */

  /* Level 0: 페이지 배경 */
  --surface-level-0: var(--bg-dark);
  /* Level 1: 주요 카드·패널 */
  --surface-level-1-bg: var(--glass-bg);
  --surface-level-1-border: var(--glass-border-color);
  --surface-level-1-shadow: var(--shadow-card), 0 0 0 1px rgba(255, 255, 255, 0.04);
  /* Level 2: hover/interactive */
  --surface-level-2-bg: var(--glass-bg-hover);
  --surface-level-2-border: rgba(255, 255, 255, 0.10);
  --surface-level-2-shadow: var(--shadow-card-hover), 0 0 0 1px rgba(255, 255, 255, 0.06);

  /* ────────────────────────────────────────────────
     18. Accent 투명도 변형 (#CE0000 기반)
     미세 배경~강조 오버레이까지 8단계 투명도
     ──────────────────────────────────────────────── */

  --accent-02: rgba(206, 0, 0, 0.02);
  --accent-03: rgba(206, 0, 0, 0.03);
  --accent-06: rgba(206, 0, 0, 0.06);
  --accent-08: rgba(206, 0, 0, 0.08);
  --accent-15: rgba(206, 0, 0, 0.15);
  --accent-20: rgba(206, 0, 0, 0.20);
  --accent-30: rgba(206, 0, 0, 0.30);
  --accent-40: rgba(206, 0, 0, 0.40);

  /* ────────────────────────────────────────────────
     19. Surface 투명도 변형
     백색 반투명 — 다크 테마 미세 배경/구분선용
     ──────────────────────────────────────────────── */

  --surface-02: rgba(255, 255, 255, 0.02);
  --surface-04: rgba(255, 255, 255, 0.04);
  --surface-06: rgba(255, 255, 255, 0.06);
  --surface-08: rgba(255, 255, 255, 0.08);
  --surface-14: rgba(255, 255, 255, 0.14);
  --surface-25: rgba(255, 255, 255, 0.25);

  /* ────────────────────────────────────────────────
     20. Animation 토큰
     점수 공개, 카드 스태거, 유기적 등장 등
     ──────────────────────────────────────────────── */

  --anim-score-reveal: 600ms;
  --anim-organic-reveal: 400ms;
  --anim-blob-morph: 4s;
  --anim-organic-pulse: 2s;
  --anim-selection-ripple: 500ms;
  --stagger-delay-result: 80ms;
  --stagger-delay-card: 50ms;
  --stagger-delay-direction: 100ms;

  /* ────────────────────────────────────────────────
     21. Hero Typography
     Display 전용 line-height 토큰
     ──────────────────────────────────────────────── */

  --text-display-lh: var(--line-height-tight);

  /* ────────────────────────────────────────────────
     22. Premium Gradient — Hero Background
     페이지 히어로 섹션 장식 배경 그래디언트
     ──────────────────────────────────────────────── */

  --gradient-hero-bg: radial-gradient(ellipse 60% 40% at 50% -10%, var(--accent-06) 0%, transparent 60%),
    radial-gradient(ellipse 40% 50% at 80% 20%, var(--accent-03) 0%, transparent 50%);

  /* 다크 테마 color-scheme — 브라우저 UA 스타일(스크롤바, 폼) 자동 다크 적용 */
  color-scheme: dark;
}

/* ============================================================
   라이트 테마 — "아침 월스트리트" 콘셉트
   시간대별 자동 전환: 06:00~18:00 = light, 18:00~06:00 = dark
   data-theme="light" 속성으로 활성화
   ============================================================ */

:root[data-theme="light"] {

  /* ── 1. Elevation Map — 라이트 배경 계층 ── */
  --bg-dark: #fafaf8;
  --bg-dark-elevated: #f0f0ee;
  --bg-dark-card: rgba(255, 255, 255, 0.85);
  --bg-dark-card-hover: rgba(255, 255, 255, 0.95);
  --bg-dark-elevated-hover: #e8e8e6;
  --bg-dark-input: rgba(0, 0, 0, 0.03);
  --bg-subtle: rgba(0, 0, 0, 0.02);
  --bg-scrim: rgba(0, 0, 0, 0.4);

  /* 불투명 흰색 표면 — 테이블, 드롭다운 등 투명 불가 요소 */
  --bg-surface-solid: #ffffff;

  /* ── 2. Accent — 브랜드 유지 (WCAG AA 통과: 5.54:1 / 8.39:1) ── */
  --accent-soft: rgba(206, 0, 0, 0.06);
  --accent-glow: rgba(206, 0, 0, 0.12);
  --accent-border: rgba(206, 0, 0, 0.2);         /* 라이트 bg에서 alpha 보정 (0.3→0.2) */
  --accent-border-hover: rgba(206, 0, 0, 0.35);  /* 라이트 bg hover (0.5→0.35) */
  --accent-border-subtle: rgba(206, 0, 0, 0.1);  /* 라이트 bg subtle (0.15→0.1) */

  /* ── 3. 텍스트 — WCAG AA 대비 강화 v2 ── */
  --text-dark-primary: #1a1a1f;       /* 16.59:1 on #fafaf8 — AAA */
  --text-dark-secondary: #636368;     /* 5.72:1 on #fafaf8 — AA (Layer 1에서도 5.24:1 AA) */
  --text-dark-muted: #646470;         /* 5.17:1 on #fafaf8 — AA (기존 4.70→강화) */
  --text-dark-tertiary: #7a7a84;      /* 3.87:1 on #fafaf8 — AA Large */
  --text-on-accent: #ffffff;

  /* ── 4. 상태 색상 — 라이트 전용 WCAG AA 오버라이드 ── */
  --color-success: #15803d;           /* 4.80:1 on #fafaf8 — AA */
  --color-warning: #9a4500;           /* 6.23:1 / 5.71:1 / 5.31:1 — AA ALL layers */
  --color-danger: #c81e1e;            /* 5.09:1 on #fafaf8 — AA (기존 4.62→강화) */
  --color-info: #2563eb;              /* 4.95:1 on #fafaf8 — AA */
  --color-success-soft: rgba(21, 128, 61, 0.08);
  --color-success-soft-hover: rgba(21, 128, 61, 0.16);
  --color-warning-soft: rgba(154, 69, 0, 0.08);
  --color-danger-soft: rgba(220, 38, 38, 0.08);
  --color-danger-soft-hover: rgba(220, 38, 38, 0.16);
  --color-info-soft: rgba(37, 99, 235, 0.08);
  --color-code: #7c3aed;

  /* 온톨로지 그래프 노드 색상 — 라이트 모드 */
  --onto-competitor: #e65100;                    /* 경쟁사 노드 (앰버 다크) */
  --onto-competitor-soft: rgba(230, 81, 0, 0.10);
  --onto-supply: #2e7d32;                        /* 공급망 노드 (그린 다크) */
  --onto-supply-soft: rgba(46, 125, 50, 0.10);
  --onto-peer: #1565c0;                          /* 동종업 노드 (블루 다크) */
  --onto-peer-soft: rgba(21, 101, 192, 0.10);

  /* ── 5. 점수 시각화 — 라이트 전용 WCAG AA 오버라이드 ── */
  --score-tone-1: #c81e1e;            /* 5.09:1 on #fafaf8 — AA (기존 4.62→강화) */
  --score-tone-2: #a84800;            /* 5.71:1 on #fafaf8 — AA (Designer WCAG 보정) */
  --score-tone-3: #855c04;            /* 5.69:1 / 5.21:1 / 4.85:1 — AA ALL layers */
  --score-tone-4: #15803d;            /* 4.80:1 on #fafaf8 — AA */
  --score-tone-5: #2563eb;            /* 4.95:1 on #fafaf8 — AA */

  /* ── 6. 글래스모피즘 — 라이트 모드 ── */
  --glass-bg: rgba(255, 255, 255, 0.72);
  --glass-bg-hover: rgba(255, 255, 255, 0.85);
  --glass-bg-strong: rgba(255, 255, 255, 0.95);
  --glass-border: 1px solid rgba(0, 0, 0, 0.06);
  --glass-border-hover: 1px solid rgba(0, 0, 0, 0.12);
  --glass-border-focus: 1px solid rgba(206, 0, 0, 0.4);
  --glass-border-color: rgba(0, 0, 0, 0.06);
  --glass-sheen: rgba(255, 255, 255, 0.45);

  /* ── 7. 그림자 — 라이트 모드 (부드러운 다중 레이어) ── */
  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.04);
  --shadow-card-hover: 0 8px 30px rgba(0, 0, 0, 0.08);
  --shadow-card-pressed: 0 1px 4px rgba(0, 0, 0, 0.06);
  --shadow-elevated: 0 12px 40px rgba(0, 0, 0, 0.08);
  --shadow-floating: 0 -4px 24px rgba(0, 0, 0, 0.08);
  --shadow-glow-accent: 0 0 20px rgba(206, 0, 0, 0.15);
  --shadow-glow-accent-hover: 0 0 20px rgba(206, 0, 0, 0.2), 0 0 48px rgba(206, 0, 0, 0.06);
  --shadow-glow-accent-md: 0 0 16px rgba(206, 0, 0, 0.12), 0 0 32px rgba(206, 0, 0, 0.04);
  --shadow-glow-soft: 0 0 40px rgba(206, 0, 0, 0.04);
  --shadow-inset: inset 0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-focus: 0 0 0 3px rgba(206, 0, 0, 0.1);
  --shadow-focus-error: 0 0 0 3px rgba(220, 38, 38, 0.08);
  --shadow-nav: 0 1px 8px rgba(0, 0, 0, 0.06);
  --color-danger-border: rgba(220, 38, 38, 0.5);

  /* ── 8. 선(border) — 라이트 모드 ── */
  --line-dark: rgba(0, 0, 0, 0.06);
  --line-dark-strong: rgba(0, 0, 0, 0.12);

  /* ── 8-B. 스크롤바 — 라이트 모드 ── */
  --scrollbar-bg: rgba(0, 0, 0, 0.04);
  --scrollbar-thumb: rgba(0, 0, 0, 0.14);
  --scrollbar-thumb-hover: rgba(0, 0, 0, 0.22);
  --table-stripe: rgba(0, 0, 0, 0.02);
  --overlay-gradient: linear-gradient(to bottom, transparent, var(--bg-dark));

  /* ── 9-B. 인터랙티브 / 시머 토큰 — 라이트 모드 ── */
  --bg-hover-subtle: rgba(0, 0, 0, 0.1);
  --skeleton-base: rgba(0, 0, 0, 0.04);
  --skeleton-highlight: rgba(0, 0, 0, 0.08);
  --shimmer-highlight: rgba(0, 0, 0, 0.08);
  --nav-bg-scrolled: rgba(255, 255, 255, 0.95);
  --bg-hover-micro: rgba(0, 0, 0, 0.04);
  --shadow-glow-cta-subtle: 0 0 60px rgba(206, 0, 0, 0.03);
  --shadow-glow-cta-subtle-hover: 0 0 80px rgba(206, 0, 0, 0.04);
  --shimmer-peak: rgba(255, 255, 255, 0.35);
  --hero-glow-gradient: radial-gradient(circle, rgba(206, 0, 0, 0.06) 0%, rgba(206, 0, 0, 0.02) 50%, transparent 75%);
  --hero-line-gradient: linear-gradient(90deg, #CE0000 0%, #FF4444 30%, rgba(206, 0, 0, 0.08) 60%, transparent 100%);

  /* ── 10. WebGL 대체 배경 — 라이트 모드 ── */
  --gradient-webgl-fallback: radial-gradient(ellipse at 25% 30%, rgba(255, 183, 77, 0.12) 0%, transparent 55%),
    radial-gradient(ellipse at 70% 50%, rgba(206, 0, 0, 0.05) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 80%, rgba(255, 213, 128, 0.08) 0%, transparent 60%);

  /* 골든아워 그래디언트 — "아침 월스트리트" 따뜻한 황금빛 */
  --gradient-golden-hour:
    radial-gradient(ellipse at 20% 15%, rgba(255, 183, 77, 0.18) 0%, transparent 50%),
    radial-gradient(ellipse at 65% 30%, rgba(255, 152, 0, 0.10) 0%, transparent 55%),
    radial-gradient(ellipse at 40% 70%, rgba(255, 213, 143, 0.07) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 80%, rgba(206, 0, 0, 0.04) 0%, transparent 40%);

  /* ── 11. 프리미엄 그래디언트 — 라이트 모드 (톤 다운) ── */
  --gradient-premium: linear-gradient(135deg, #B00000 0%, #CE0000 50%, #9B0000 100%);
  --gradient-text: linear-gradient(135deg, #9B0000 0%, #CE0000 40%, #B00000 100%);

  /* ── 12. 링크 — WCAG AA 통과 확인됨 ── */
  --link-color: #2563eb;              /* 4.95:1 on #fafaf8 — AA */
  --link-hover: #1d4ed8;              /* 6.41:1 on #fafaf8 — AA */
  --link-underline: rgba(37, 99, 235, 0.3);
  --link-underline-hover: rgba(29, 78, 216, 0.5);

  /* ── 13. Surface Hierarchy — 라이트 모드 ── */
  --surface-level-0: var(--bg-dark);
  --surface-level-1-bg: var(--glass-bg);
  --surface-level-1-border: var(--glass-border-color);
  --surface-level-1-shadow: var(--shadow-card);
  --surface-level-2-bg: var(--glass-bg-hover);
  --surface-level-2-border: rgba(0, 0, 0, 0.10);
  --surface-level-2-shadow: var(--shadow-card-hover);

  /* ── 14. Surface 투명도 변형 — 라이트 모드 (흑색 반투명) ── */
  --surface-02: rgba(0, 0, 0, 0.02);
  --surface-04: rgba(0, 0, 0, 0.04);
  --surface-06: rgba(0, 0, 0, 0.06);
  --surface-08: rgba(0, 0, 0, 0.08);
  --surface-14: rgba(0, 0, 0, 0.14);
  --surface-25: rgba(0, 0, 0, 0.25);

  /* ── 15. Premium Gradient hero — 라이트 모드 (톤 다운) ── */
  --gradient-hero-bg: radial-gradient(ellipse 60% 40% at 50% -10%, rgba(206, 0, 0, 0.03) 0%, transparent 60%),
    radial-gradient(ellipse 40% 50% at 80% 20%, rgba(206, 0, 0, 0.02) 0%, transparent 50%);

  /* ── 16. color-scheme 선언 ── */
  color-scheme: light;
}

/* ============================================================
   테마 전환 트랜지션 — FOUC 방지용
   초기 로드 시에는 transition 없음, JS가 theme-transition 클래스 추가 후 활성
   ============================================================ */

html.theme-transition,
html.theme-transition *,
html.theme-transition *::before,
html.theme-transition *::after {
  transition:
    background-color 0.4s ease,
    color 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease !important;
}

/* ============================================================
   prefers-reduced-motion — 모션 비활성화 시 전환 최소화
   Three.js → 정적 CSS 그래디언트 대체용
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-fast: 0.01s linear;
    --transition-smooth: 0.01s linear;
    --transition-spring: 0.01s linear;
  }

  html.theme-transition,
  html.theme-transition *,
  html.theme-transition *::before,
  html.theme-transition *::after {
    transition: none !important;
  }
}