/* ============================================
   CSS Variables
   실제 사용되는 변수만 정의
   ============================================ */

:root {
    /* ============================================
       Colors (색상)
       ============================================ */
    
    /* Primary Colors */
    --color-primary: #667eea;
    
    /* Background Colors */
    --color-bg-black: #000000;
    --color-bg-overlay: #000000A3;
    
    /* Text Colors */
    --color-text-white: #FFFFFF;
    --color-text-white-90: rgba(255, 255, 255, 0.9);
    --color-text-white-80: rgba(255, 255, 255, 0.80);
    --color-text-gray: #7F7F7F;
    --color-text-gray-light: #DEDEDE;
    --color-text-gray-medium: #dbdbdb;
    --color-text-gray-dark: #565656;
    --color-text-gray-494949: #494949;
    --color-text-cecece: #CECECE;
    --color-text-c9c9c9: #C9C9C9; /* 테이블 섹션 서브 문구용 회색 텍스트 */
    --color-text-gray-727272: #727272; /* 글래스 영역 서브 문구용 회색 텍스트 */
    --color-text-b0b0b0: #B0B0B0; /* 숲 섹션 텍스트 회색 */
    --color-text-1e1e1e: #1E1E1E;
    --color-text-00adee: #00ADEE;
    --color-text-414141: #414141; /* 흰색 섹션 텍스트 색상 */
    --color-text-555: #555555;
    --color-text-bcbcbc: #BCBCBC; /* About 페이지 라벨 색상 */
    --color-text-888888: #888888; /* About 페이지 서브타이틀 색상 */
    --color-text-c4c4c4: #C4C4C4; /* About 페이지 목록 구분선 색상 */
    
    /* Menu Item Colors */
    --color-menu-label: #d3d3d3;
    --color-first-menu-bg: rgba(233, 233, 233, 0.24);
    --color-first-menu-bg-hover: rgba(233, 233, 233, 0.30);
    --color-first-menu-border: rgba(255, 255, 255, 0.40);
    --color-first-menu-border-hover: rgba(255, 255, 255, 0.50);
    
    /* Propellant Section Colors */
    --color-propellant-card-bg: rgba(233, 233, 233, 0.32);
    --color-propellant-card-bg-active: #ffffff;
    --color-propellant-card-label: #d3d3d3;
    --color-propellant-card-label-active: #0070c0;
    --color-propellant-card-text: #ffffff;
    --color-propellant-card-text-active: #000000;
    --color-propellant-progress-bg: rgba(255, 255, 255, 0.4);
    --color-propellant-progress-bar: #ffffff;
    --color-propellant-family-bg: #ffffff;
    --color-propellant-family-bg-inactive: rgba(233, 233, 233, 0.24);
    --color-propellant-family-text: #565656;
    --color-propellant-family-text-inactive: var(--color-text-white);
    
    /* ============================================
       Typography Base (타이포그래피 기본)
       ============================================ */
    
    /* Font Families */
    --font-primary: 'Pretendard', sans-serif;
    --font-display: 'Pretendard', sans-serif;
    
    /* Font Sizes */
    --font-size-sm: 0.875rem;   /* 14px */
    --font-size-base: 1rem;     /* 16px */
    --font-size-lg: 1.125rem;   /* 18px */
    --font-size-xl: 1.25rem;    /* 20px */
    --font-size-2xl: 1.5rem;    /* 24px */
    --font-size-24: 24px;
    --font-size-28: 28px;
    --font-size-30: 30px;
    --font-size-32: 32px;
    --font-size-34: 34px;
    --font-size-38: 38px;
    --font-size-40: 40px;
    --font-size-48: 48px;       /* 흰색 섹션 텍스트 */
    --font-size-56: 56px;
    --font-size-64: 64px;
    --font-size-80: 80px;
    --font-size-90: 90px;
    
    /* Font Weights */
    --font-weight-light: 300;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;
    
    /* Line Heights */
    --line-height-24: 24px;
    --line-height-26: 26px;
    --line-height-28: 28px;
    --line-height-32: 32px;
    --line-height-36: 36px;
    --line-height-tight: 130%;
    --line-height-normal: 140%;
    --line-height-relaxed: 150%;
    --line-height-loose: 160%;
    --line-height-170: 170%;
    --line-height-180: 1.8;
    
    /* Letter Spacing */
    --letter-spacing-tight: -1.28px;
    --letter-spacing-normal: -0.84px;
    --letter-spacing-small: -0.8px;
    --letter-spacing-tiny: -0.08px;
    --letter-spacing-micro: -0.056px;
    --letter-spacing-02em: -0.02em;
    --letter-spacing-04em: -0.04em;
    --letter-spacing-04px: -0.4px;
    --letter-spacing-03px: -0.03px;
    --letter-spacing-04px-small: -0.04px;
    --letter-spacing-05px: -0.05px;
    --letter-spacing-015em: -0.015em;
    --letter-spacing-224px: -2.24px;
    --letter-spacing-36px: -3.6px;
    --letter-spacing-32px: -3.2px;
    --letter-spacing-16px: -1.6px;
    --letter-spacing-112px: -1.12px;
    --letter-spacing-192px: -1.92px; /* 흰색 섹션 텍스트 letter-spacing */
    --letter-spacing-02percent: -0.002em; /* -0.2% letter-spacing (24px 기준) */
    
    /* ============================================
       Typography Scale (타이포그래피 스케일)
       타입별로 그룹화하여 중복 제거
       ============================================ */
    
    /* Type A: 대형 제목 (56px, 64px) */
    --typo-a-family: var(--font-primary);
    --typo-a-weight: 700;
    --typo-a-height: var(--line-height-relaxed);
    --typo-a-spacing: var(--letter-spacing-normal);
    --typo-a-color: var(--color-text-white);
    
    /* Type B: 섹션 제목 (clamp, display font) */
    --typo-b-family: var(--font-display);
    --typo-b-size: clamp(3rem, 8vw, 6rem);
    --typo-b-weight: var(--font-weight-bold);
    --typo-b-color: var(--color-text-white);
    --typo-b-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
    
    /* Type C: 중간 제목 (24px, 28px, 40px) */
    --typo-c-family: var(--font-primary);
    --typo-c-weight-semibold: var(--font-weight-semibold);
    --typo-c-weight-bold: var(--font-weight-bold);
    --typo-c-height-relaxed: var(--line-height-relaxed);
    --typo-c-height-loose: var(--line-height-loose);
    --typo-c-color-white: var(--color-text-white);
    --typo-c-color-gray: var(--color-text-gray-light);
    
    /* Type D: 본문 (14px, 18px, 20px) */
    --typo-d-family: var(--font-primary);
    --typo-d-weight-medium: var(--font-weight-medium);
    --typo-d-weight-semibold: var(--font-weight-semibold);
    --typo-d-weight-bold: var(--font-weight-bold);
    --typo-d-weight-extrabold: var(--font-weight-extrabold);
    --typo-d-color-white: var(--color-text-white);
    --typo-d-color-gray: var(--color-text-gray);
    --typo-d-color-gray-medium: var(--color-text-gray-medium);
    --typo-d-color-gray-dark: var(--color-text-gray-dark);
    
    /* Type E: 대형 본문 (64px) - 고정 텍스트/숲 섹션 */
    --typo-e-family: var(--font-primary);
    --typo-e-size: var(--font-size-64);
    --typo-e-weight: var(--font-weight-semibold);
    --typo-e-color: var(--color-text-white);
    
    /* ============================================
       Spacing (간격)
       ============================================ */
    
    --spacing-xs: 0.5rem;   /* 8px */
    --spacing-sm: 1rem;     /* 16px */
    --spacing-md: 1.5rem;   /* 24px */
    --spacing-lg: 2rem;     /* 32px */
    --spacing-xl: 3rem;     /* 48px */
    --spacing-2xl: 5rem;    /* 80px */
    
    /* ============================================
       Layout (레이아웃)
       ============================================ */
    
    --container-padding: 1.5rem;
    --section-padding-x: 120px;        /* 섹션 좌우 패딩 */
    --section-padding-y: 120px;        /* 섹션 상하 패딩 */
    --section-content-width: calc(100% - 240px);  /* 섹션 컨텐츠 너비 (120px * 2) */
    
    /* ============================================
       Image Sizes (이미지 크기)
       ============================================ */
    
    --image-trophy-max-height: 685px;  /* 트로피 이미지 최대 높이 */
    --image-glass-height: 543px;       /* 글래스 이미지 높이 */
    --image-card-height: 244px;        /* 카드 이미지 높이 */
    --image-card-width: 300px;         /* 화이트 섹션 이미지 너비 */
    
    /* ============================================
       Component Sizes (컴포넌트 크기)
       ============================================ */
    
    --header-logo-width: 154px;
    --header-logo-height: 44px;
    --menu-item-width: 400px;
    --menu-item-height: 250px;
    --propellant-card-width: 383px;
    --propellant-card-width-last: 384px;
    --propellant-navigation-width: 40px;
    --propellant-family-button-width: 238px;
    
    /* ============================================
       Border Radius (모서리 둥글기)
       ============================================ */
    
    --radius-sm: 8px;
    --radius-md: 16px;
    --radius-full: 99px;
    
    /* ============================================
       Transitions (전환 효과)
       ============================================ */
    
    --transition-fast: 0.2s ease;
    --transition-base: 0.3s ease;
    --transition-slow: 0.5s ease;
    --transition-bg: 0.5s ease;
    --transition-fade: 0.8s ease;
    --transition-fade-fast: 0.1s ease-in-out;
    --transition-transform: 0.3s ease-out;
    --transition-content: 1.0s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    
    /* ============================================
       Scroll Progress Variables (스크롤 진행 변수)
       JS에서 동적으로 업데이트
       ============================================ */
    --hero-scroll-progress: 0;
    --hero-fade-progress: 0;
    --yacht-scroll-progress: 0;
    --yacht-fade-progress: 0;
    --forest-scroll-progress: 0;
    --forest-fade-progress: 0;
    --forest-bg-fixed-top: 0px;
    --forest-text-fixed-top: 0px;
    --forest-bg-unfixed-top: 0px;
    --forest-text-unfixed-top: 0px;
    --forest-text-step-1-opacity: 1;
    --forest-text-step-1-visibility: visible;
    --forest-text-step-2-opacity: 0;
    --forest-text-step-2-visibility: hidden;
    --white-scroll-progress: 0;
    --white-section-start-y: 0px;
    --white-image-opacity: 0;
    --white-image-translate-y: 150px;
    --propellant-scroll-progress: 0;
    --propellant-card-translate-y: 150px;
    --propellant-content-opacity: 0;
    --propellant-content-translate-y: 150px;
    --yacht-text-opacity: 0;
    --yacht-text-translate-y: 50px;
    --yacht-text-visibility: hidden;
    --letter-scroll-progress: 0;
    --letter-translate-y: 0px;
    --table-translate-y: 0px;
    --table-text-translate-y: 0px;
    --table-section-top: 0px;
    --forest-content-top: 0px;
    --propellant-progress: 0%;
    
    /* State Flags (상태 플래그 - CSS에서 조건부 스타일링에 사용) */
    --forest-is-expanded: 0;      /* 0: false, 1: true */
    --table-is-unfixed: 0;        /* 0: false, 1: true */
    
    /* Scroll Calculation Constants (고정 수치 - CSS 변수로 정의) */
    --expand-distance-ratio: 0.8;          /* window.innerHeight * 0.8 */
    --fade-progress-ratio: 0.7;            /* expandDistance * 0.7 */
    --forest-progress-multiplier: 1.45;    /* progress * 1.45 */
    --table-progress-threshold: 0.3;       /* tableProgress >= 0.3 */
    --table-remaining-ratio: 0.7;          /* 남은 70% 구간 */
    --top-offset-ratio: 0.5;               /* totalScroll * 0.5 */
    --forest-image-start-offset: 65;       /* 65vh */
    --forest-glass-min-height: 543px;      /* 글래스 영역 최소 높이 */
    --scroll-threshold: 0.25;              /* IntersectionObserver rootMargin */
    --forest-glass-image-width: 640px;     /* 숲 섹션 글래스 이미지 너비 */
    
    /* ============================================
       Z-index (레이어 순서)
       ============================================ */
    
    --z-header: 1000;
    
    /* ============================================
       Header Indicator (헤더 인디케이터)
       ============================================ */
    
    --header-indicator-left: 0px;
    --header-indicator-width: 0px;
}