@charset "utf-8";

:root {
    --font-main: 'Pretendard', sans-serif;
    --font-en: 'Outfit', sans-serif;
    --font-sub: 'OneStoreMobileGothicBody', sans-serif;
    --font-accent: 'ONE-Mobile-Title', sans-serif;

    /* 주요 색상 - semantic  */
    --color-primary-0: #E0F4F4;
    --color-primary-0-rgb: 224, 244, 244;

    --color-primary-10: #B2E3E3;
    --color-primary-20: #80D1D1;

    --color-primary: #4DBFBE;
    --color-primary-rgb: 77, 191, 190;

    --color-primary-40: #26B1AF;
    --color-primary-40-rgb: 38, 177, 175;

    --color-primary-50: #00A3A1;
    --color-primary-60: #009592;
    --color-primary-70: #00837F;
    --color-primary-80: #00726D;
    --color-primary-90: #00534C;
    --color-primary-100: #003C36;

    --gradient-bg-top: #008BA2;
    --gradient-bg-bottom: #00A386;
    --gnb-item-color: #223A58;
    --gnb-item-color-rgb: 34, 58, 88;

    --color-accent: #FF9800;
    --color-accent-rgb: 255, 152, 0;

    --color-text: #1f1f1f;
    --color-text-rgb: 31, 31, 31;

    --color-text-secondary: #606368;
    --color-text-secondary-rgb: 96, 99, 104;
    --color-text-tertiary: #B0B1B4;
    --color-text-tertiary-rgb: 176, 177, 180;

    --color-border: #E0E0E0;
    --color-border-light: #EEEEEE; 

    --color-w: #ffffff;
    --color-w-rgb: 255, 255, 255;

    --gray-bg-100: #F8F8FB;
    --gray-bg-200: #F5F5F5;
    --gray-bg-400: #E9EBF1;

    --accent-mint: #4DBFBE;

    --accent-blue: #4A90E2;
    --accent-blue-rgb: 74, 144, 226;

    --accent-orange: #F5A623;
    --accent-purple: #8E6BE8;
    --accent-pnik: #E92F7F;
    --accent-green: #71BF44;
    --accent-plum: #BC4CCF;

    --accent-tangerine: #FF7043;
    --accent-azure: #4F88DB;

    /* Typography */
    --fs-10: 0.625rem;
    --fs-11: 0.6875rem;
    --fs-12: 0.75rem;
    --fs-13: 0.813rem;
    --fs-14: 0.875rem;
    --fs-15: 0.938rem;
    --fs-16: 1rem;
    --fs-17: 1.063rem;
    --fs-18: 1.125rem;
    --fs-19: 1.188rem;
    --fs-20: 1.25rem;
    --fs-22: 1.375rem;
    --fs-24: 1.5rem;
    --fs-26: 1.625rem;
    --fs-28: 1.75rem;
    --fs-30: 1.875rem;
    --fs-32: 2rem;
    --fs-36: 2.25rem;
    --fs-40: 2.5rem;
    --fs-44: 2.75rem;
    --fs-48: 3rem;
    --fs-50: 3.125rem;
    --fs-56: 3.5rem;
    --fs-60: 3.75rem;
    --fs-64: 4rem;
    --fs-72: 4.5rem;
    --fs-80: 5rem;
    --fs-86: 5.375rem;
    --fs-96: 6rem;
    --fs-100: 6.25rem;
    --fs-112: 7rem;

    /* Line Height */
    --lh-tight: 1.25;
    --lh-normal: 1.5;
    --lh-loose: 1.8;

    /* Letter Spacing */
    --ls-tight: -0.02em;
    --ls-normal: 0em;
    --ls-wide: 0.02em;

    /* Font Weight */
    --fw-light: 300;
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semiBold: 600;

    /* Z-Index */
    --z-base-line: -1;
    --z-contents: 1;
    --z-hero-nav: 99;
    --z-header: 100;
    --z-dropdown: 200;
    --z-modal: 1000;
    --z-toast: 1100;

    /* Latout - semantic */
    --icon-color: #909296;
    --icon-color-grb: 144, 146, 150;
    --header-height: 6.25rem;
    --area-padding: 2.5rem; /* px -> rem 환산 (40px) */

    --text-body: var(--fs-16);
    --text-gnb: var(--fw-regular) var(--fs-17) / var(--lh-normal) var(--font-en);

    --main-title: var(--fw-medium) var(--fs-80) / var(--lh-normal) var(--font-en);
    --main-title-small: var(--fw-regular) var(--fs-24) / var(--lh-normal) var(--font-en);

    --main-text-s: var(--fs-14);
    --main-text-m: var(--fs-18);
    --main-text-l: var(--fs-28);

    --news-badge-press: 79, 136, 219;
    --news-badge-internal: var(--color-primary-rgb);
    --news-date: #909296;
    --news-headline: var(--fw-medium) var(--fs-28) / var(--lh-normal) var(--font-main);
    --news-desc: var(--fw-regular) var(--fs-18) / var(--lh-normal) var(--font-main);

    --section-label: var(--fw-semiBold) var(--fs-20) / var(--lh-normal) var(--font-en);
    --section-title: var(--fw-semiBold) var(--fs-44) / var(--lh-tight) var(--font-main);

    --section-body: var(--fs-18);

    --main-slogan: 100 var(--fs-80) / var(--lh-tight) var(--font-en);

    --tab-active: var(--color-primary);
    --tab-text: var(--fs-17);
    --tab-min-width: 10rem;

    --sub-nav-height: 3.75rem;
    --sub-nav-padding: 0 5rem;
    --sub-nav-font: var(--fw-regular) var(--fs-17) / var(--lh-tight) var(--font-main);

    --sub-title: var(--fw-medium) var(--fs-64) / var(--lh-tight) var(--font-en);
    --sub-title-span: var(--fw-medium) var(--fs-16) / var(--lh-tight) var(--font-main);

    --breadcrumb-text: var(--fw-medium) var(--fs-17) / var(--lh-tight) var(--font-main);

    --box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.15);

    --acc-icon-color: #BEE8E7;
    --acc-icon-size: 6rem;

    --effects-bg: #F7FCFC;
}

/* 노트북 구간(1025px~1500px, main.css·layout_re.css의 "노트북 대응" 미디어쿼리와 동일 범위)
   폰트 15% 축소 - --fs-* 스케일은 그대로 두고 Latout 섹션의 합성 토큰만 85% 값으로 재정의 */
@media (min-width: 1025px) and (max-width: 1500px) {
    :root {
        --text-body: 0.85rem;
        --text-gnb: var(--fw-regular) 0.9036rem / var(--lh-normal) var(--font-en);

        --main-title: var(--fw-medium) 4.25rem / var(--lh-normal) var(--font-en);
        --main-title-small: var(--fw-regular) 1.275rem / var(--lh-normal) var(--font-en);

        --main-text-s: 0.7438rem;
        --main-text-m: 0.9563rem;
        --main-text-l: 1.4875rem;

        --news-headline: var(--fw-medium) 1.4875rem / var(--lh-normal) var(--font-main);
        --news-desc: var(--fw-regular) 0.9563rem / var(--lh-normal) var(--font-main);

        --section-label: var(--fw-semiBold) 1.0625rem / var(--lh-normal) var(--font-en);
        --section-title: var(--fw-semiBold) 2.3375rem / var(--lh-tight) var(--font-main);

        --section-body: 0.9563rem;

        --main-slogan: 100 var(--fs-60) / var(--lh-tight) var(--font-en);

        --tab-text: 0.9036rem;

        --sub-nav-font: var(--fw-regular) 0.9563rem / var(--lh-tight) var(--font-main);

        --sub-title: var(--fw-medium) var(--fs-50) / var(--lh-tight) var(--font-en);
        --sub-title-span: var(--fw-medium) var(--fs-13) / var(--lh-tight) var(--font-main);

        --breadcrumb-text: var(--fw-medium) 0.9036rem / var(--lh-tight) var(--font-main);
    }
}

/* 모바일(~1024px) 대응 - 서브 히어로 관련 폰트 토큰 축소
   (main.css/layout_re.css의 다른 모바일 반응형과 동일한 1024px 기준) */
@media (max-width: 1024px) {
    :root {
        --sub-nav-font: var(--fw-regular) var(--fs-14) / var(--lh-tight) var(--font-main);

        --sub-title: var(--fw-medium) 3rem / var(--lh-tight) var(--font-en);
        --sub-title-span: var(--fw-medium) var(--fs-14) / var(--lh-tight) var(--font-main);

        --breadcrumb-text: var(--fw-medium) var(--fs-14) / var(--lh-tight) var(--font-main);
    }
}