/* ==========================================================
   디자인 토큰 — 브랜드 컬러 교체 시 point 값만 수정
   ========================================================== */

/* 사이트 사용 글자 서브셋 (Pretendard 1파일, 굵기 500~800, layout 에서 preload)
   - 없는 글자는 다음 순서의 Pretendard Variable 분할 파일로 대체
   - 파일 교체 시 ?v= 값을 layout.php preload 와 함께 올림 */
@font-face {
    font-family: 'Pretendard AXO';
    font-style: normal;
    font-display: swap;
    font-weight: 500 800;
    src: url(../fonts/pretendard/PretendardAXO.woff2?v=6) format('woff2-variations'), url(../fonts/pretendard/PretendardAXO.woff2?v=6) format('woff2');
}
:root {
    /* 컬러 */
    --black: #1A1A1C;
    --white: #FFFFFF;
    --bg-gray: #F6F6F6;
    --bg-blue: #F2F7FF;
    --point: #3E55C4;
    --point-dark: #2F43A6;
    --point-sub: #FF5E10;
    --blue-2: #217AFF;
    --blue-3: #444FCE;
    --blue-soft: #D8DDF3;
    --text: #1A1A1C;
    --text-sub: #6F7380;
    --text-mute: #A2A2A2;
    --border: #ECECEC;
    --cool-gray: #5B6370;
    --placeholder: #E6EAF5;

    /* 타이포 (데스크톱 rem 기준) */
    --font: 'Pretendard AXO', 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
    --h1: 7.2rem;
    --h2: 5.2rem;
    --h3: 3rem;
    --h4: 2.4rem;
    --p-lg: 2rem;
    --p1: 17px;
    --p2: 15px;
    --caption: 13px;
    --ls-title: -0.02em;

    /* 간격 */
    --pd-section: 16rem;
    --pd-sm: 10rem;
    --container: 1240px;
    --gutter: 20px;

    /* 형태 */
    --r-sm: 10px;
    --r: 15px;
    --r-lg: 24px;

    /* 모션 */
    --ease: cubic-bezier(0.22, 1, 0.36, 1);
    --t: 0.3s ease-in-out;
    --t-in: 0.9s cubic-bezier(0.22, 1, 0.36, 1);

    --header-h: 76px;
}

/* 데스크톱: 뷰포트 비례 */
html { font-size: clamp(8.5px, 0.5208vw, 10px); }

/* 1240 이하 */
@media (max-width: 1240px) {
    html { font-size: 7.5px; }
    :root {
        --h1: 52px; --h2: 38px; --h3: 26px; --h4: 21px; --p-lg: 17px;
        --pd-section: 110px; --pd-sm: 72px; --header-h: 68px;
    }
}

/* 768 이하 */
@media (max-width: 768px) {
    html { font-size: 7px; }
    :root {
        --h1: 36px; --h2: 28px; --h3: 22px; --h4: 19px; --p-lg: 16px;
        --p1: 16px; --p2: 14px;
        --pd-section: 80px; --pd-sm: 56px; --gutter: 16px; --header-h: 60px;
    }
}