@charset "utf-8";

@layer tokens {
    /* Color System / 색상 체계 */
    :root {
        /* Constant Color / 상수 색상 */
        --color-white: #ffffff;
        --color-black: #001514;

        /* Base Color / 기본 색상 */
        --color-primary-base: #0E3A63;
        --color-secondary-base: #4C90D6;

        /* Status Color / 상태 색상 */
        --color-success-base: #00a63e;
        --color-info-base: #0099e0;
        --color-warning-base: #e49e21;
        --color-error-base: #e7000b;

        /* Lightness Scale / 밝기 척도 */
        --lightness-100: 0.97;
        --lightness-200: 0.845;
        --lightness-300: 0.683;
        --lightness-400: 0.565;
        --lightness-500: 0.45;
        --lightness-600: 0.385;
        --lightness-700: 0.32;
        --lightness-800: 0.25;
        --lightness-900: 0.177;

        /* Chroma Scale / 채도 척도 */
        --chroma-100: 0.03;
        --chroma-200: 0.06;
        --chroma-300: 0.1;
        --chroma-400: 0.13;
        --chroma-500: 0.15;
        --chroma-600: 0.13;
        --chroma-700: 0.1;
        --chroma-800: 0.07;
        --chroma-900: 0.05;

        /* Neutral Palette / 무채색 계조 */
        --color-neutral-100: oklch(var(--lightness-100) 0 0);
        --color-neutral-200: oklch(var(--lightness-200) 0 0);
        --color-neutral-300: oklch(var(--lightness-300) 0 0);
        --color-neutral-400: oklch(var(--lightness-400) 0 0);
        --color-neutral-500: oklch(var(--lightness-500) 0 0);
        --color-neutral-600: oklch(var(--lightness-600) 0 0);
        --color-neutral-700: oklch(var(--lightness-700) 0 0);
        --color-neutral-800: oklch(var(--lightness-800) 0 0);
        --color-neutral-900: oklch(var(--lightness-900) 0 0);

        /* Primary Palette / 제1 색상 계조 */
        --color-primary-100: oklch(from var(--color-primary-base) var(--lightness-100) var(--chroma-100) h);
        --color-primary-200: oklch(from var(--color-primary-base) var(--lightness-200) var(--chroma-200) h);
        --color-primary-300: oklch(from var(--color-primary-base) var(--lightness-300) var(--chroma-300) h);
        --color-primary-400: oklch(from var(--color-primary-base) var(--lightness-400) var(--chroma-400) h);
        --color-primary-500: oklch(from var(--color-primary-base) var(--lightness-500) var(--chroma-500) h);
        --color-primary-600: oklch(from var(--color-primary-base) var(--lightness-600) var(--chroma-600) h);
        --color-primary-700: oklch(from var(--color-primary-base) var(--lightness-700) var(--chroma-700) h);
        --color-primary-800: oklch(from var(--color-primary-base) var(--lightness-800) var(--chroma-800) h);
        --color-primary-900: oklch(from var(--color-primary-base) var(--lightness-900) var(--chroma-900) h);

        /* Secondary Palette / 제2 색상 계조 */
        --color-secondary-100: oklch(from var(--color-secondary-base) var(--lightness-100) var(--chroma-100) h);
        --color-secondary-200: oklch(from var(--color-secondary-base) var(--lightness-200) var(--chroma-200) h);
        --color-secondary-300: oklch(from var(--color-secondary-base) var(--lightness-300) var(--chroma-300) h);
        --color-secondary-400: oklch(from var(--color-secondary-base) var(--lightness-400) var(--chroma-400) h);
        --color-secondary-500: oklch(from var(--color-secondary-base) var(--lightness-500) var(--chroma-500) h);
        --color-secondary-600: oklch(from var(--color-secondary-base) var(--lightness-600) var(--chroma-600) h);
        --color-secondary-700: oklch(from var(--color-secondary-base) var(--lightness-700) var(--chroma-700) h);
        --color-secondary-800: oklch(from var(--color-secondary-base) var(--lightness-800) var(--chroma-800) h);
        --color-secondary-900: oklch(from var(--color-secondary-base) var(--lightness-900) var(--chroma-900) h);

        /* Success Palette / 성공 계조 */
        --color-success-100: oklch(from var(--color-success-base) var(--lightness-100) var(--chroma-100) h);
        --color-success-200: oklch(from var(--color-success-base) var(--lightness-200) var(--chroma-200) h);
        --color-success-300: oklch(from var(--color-success-base) var(--lightness-300) var(--chroma-300) h);
        --color-success-400: oklch(from var(--color-success-base) var(--lightness-400) var(--chroma-400) h);
        --color-success-500: oklch(from var(--color-success-base) var(--lightness-500) var(--chroma-500) h);
        --color-success-600: oklch(from var(--color-success-base) var(--lightness-600) var(--chroma-600) h);
        --color-success-700: oklch(from var(--color-success-base) var(--lightness-700) var(--chroma-700) h);
        --color-success-800: oklch(from var(--color-success-base) var(--lightness-800) var(--chroma-800) h);
        --color-success-900: oklch(from var(--color-success-base) var(--lightness-900) var(--chroma-900) h);

        /* Info Palette / 정보 계조 */
        --color-info-100: oklch(from var(--color-info-base) var(--lightness-100) var(--chroma-100) h);
        --color-info-200: oklch(from var(--color-info-base) var(--lightness-200) var(--chroma-200) h);
        --color-info-300: oklch(from var(--color-info-base) var(--lightness-300) var(--chroma-300) h);
        --color-info-400: oklch(from var(--color-info-base) var(--lightness-400) var(--chroma-400) h);
        --color-info-500: oklch(from var(--color-info-base) var(--lightness-500) var(--chroma-500) h);
        --color-info-600: oklch(from var(--color-info-base) var(--lightness-600) var(--chroma-600) h);
        --color-info-700: oklch(from var(--color-info-base) var(--lightness-700) var(--chroma-700) h);
        --color-info-800: oklch(from var(--color-info-base) var(--lightness-800) var(--chroma-800) h);
        --color-info-900: oklch(from var(--color-info-base) var(--lightness-900) var(--chroma-900) h);

        /* Warning Palette / 경고 계조 */
        --color-warning-100: oklch(from var(--color-warning-base) var(--lightness-100) var(--chroma-100) h);
        --color-warning-200: oklch(from var(--color-warning-base) var(--lightness-200) var(--chroma-200) h);
        --color-warning-300: oklch(from var(--color-warning-base) var(--lightness-300) var(--chroma-300) h);
        --color-warning-400: oklch(from var(--color-warning-base) var(--lightness-400) var(--chroma-400) h);
        --color-warning-500: oklch(from var(--color-warning-base) var(--lightness-500) var(--chroma-500) h);
        --color-warning-600: oklch(from var(--color-warning-base) var(--lightness-600) var(--chroma-600) h);
        --color-warning-700: oklch(from var(--color-warning-base) var(--lightness-700) var(--chroma-700) h);
        --color-warning-800: oklch(from var(--color-warning-base) var(--lightness-800) var(--chroma-800) h);
        --color-warning-900: oklch(from var(--color-warning-base) var(--lightness-900) var(--chroma-900) h);

        /* Error Palette / 오류 계조 */
        --color-error-100: oklch(from var(--color-error-base) var(--lightness-100) var(--chroma-100) h);
        --color-error-200: oklch(from var(--color-error-base) var(--lightness-200) var(--chroma-200) h);
        --color-error-300: oklch(from var(--color-error-base) var(--lightness-300) var(--chroma-300) h);
        --color-error-400: oklch(from var(--color-error-base) var(--lightness-400) var(--chroma-400) h);
        --color-error-500: oklch(from var(--color-error-base) var(--lightness-500) var(--chroma-500) h);
        --color-error-600: oklch(from var(--color-error-base) var(--lightness-600) var(--chroma-600) h);
        --color-error-700: oklch(from var(--color-error-base) var(--lightness-700) var(--chroma-700) h);
        --color-error-800: oklch(from var(--color-error-base) var(--lightness-800) var(--chroma-800) h);
        --color-error-900: oklch(from var(--color-error-base) var(--lightness-900) var(--chroma-900) h);
    }

    /* Typography / 문자 체계 */
    :root {
        /* Font Family / 글꼴 모음 */
        --font-family-material-symbols: "Material Symbols Outlined";
        --font-family-phosphor: "Phosphor";
        --font-family-pretendard: "Pretendard Variable", "Pretendard", sans-serif;
        --font-family-gmarket: "GmarketSans", var(--font-family-pretendard);
        --font-family-poppins: "Poppins", var(--font-family-pretendard);
        --font-family-sans-serif: var(--font-family-pretendard);
        --font-family-serif: serif;

        /* Font Weight / 글꼴 굵기 */
        --font-weight-100: 100;
        --font-weight-200: 200;
        --font-weight-300: 300;
        --font-weight-400: 400;
        --font-weight-500: 500;
        --font-weight-600: 600;
        --font-weight-700: 700;
        --font-weight-800: 800;
        --font-weight-900: 900;

        /* Line Height / 행간 */
        --line-height-latin: 1.5;
        --line-height-hangeul: 1.5;

        /* Letter Spacing / 자간 */
        --letter-spacing-extra-tight: -0.1em;
        --letter-spacing-tight: -0.02em;
        --letter-spacing-normal: 0;
        --letter-spacing-wide: 0.05em;
        --letter-spacing-extra-wide: 0.1em;

        /* Font Size / 글자 크기 */
        /* Display Scale / 표제 척도 */
        --font-size-display-1-max: 64rem;
        --font-size-display-1-min: 44rem;
        --font-size-display-2-max: 44rem;
        --font-size-display-2-min: 32rem;
        --font-size-display-3-max: 36rem;
        --font-size-display-3-min: 28rem;

        /* Heading Scale / 제목 척도 */
        --font-size-heading-1-max: 60rem;
        --font-size-heading-1-min: 32rem;
        --font-size-heading-2-max: 50rem;
        --font-size-heading-2-min: 28rem;
        --font-size-heading-3-max: 26rem;
        --font-size-heading-3-min: 22rem;
        --font-size-heading-4-max: 20rem;
        --font-size-heading-4-min: 20rem;
        --font-size-heading-5-max: 18rem;
        --font-size-heading-5-min: 18rem;
        --font-size-heading-6-max: 16rem;
        --font-size-heading-6-min: 16rem;

        /* Body Scale / 본문 척도 */
        --font-size-body-1-max: 20rem;
        --font-size-body-1-min: 20rem;
        --font-size-body-2-max: 18rem;
        --font-size-body-2-min: 18rem;
        --font-size-body-3-max: 16rem;
        --font-size-body-3-min: 16rem;
        --font-size-body-4-max: 14rem;
        --font-size-body-4-min: 14rem;
        --font-size-body-5-max: 12rem;
        --font-size-body-5-min: 12rem;

        /* Responsive Reference / 반응형 참조 */
        @media (width >= 1280px) {
            /* Display Reference / 표제 참조 */
            --font-size-display-1: var(--font-size-display-1-max);
            --font-size-display-2: var(--font-size-display-2-max);
            --font-size-display-3: var(--font-size-display-3-max);

            /* Heading Reference / 제목 참조 */
            --font-size-heading-1: var(--font-size-heading-1-max);
            --font-size-heading-2: var(--font-size-heading-2-max);
            --font-size-heading-3: var(--font-size-heading-3-max);
            --font-size-heading-4: var(--font-size-heading-4-max);
            --font-size-heading-5: var(--font-size-heading-5-max);
            --font-size-heading-6: var(--font-size-heading-6-max);

            /* Body Reference / 본문 참조 */
            --font-size-body-1: var(--font-size-body-1-max);
            --font-size-body-2: var(--font-size-body-2-max);
            --font-size-body-3: var(--font-size-body-3-max);
            --font-size-body-4: var(--font-size-body-4-max);
            --font-size-body-5: var(--font-size-body-5-max);
        }
        @media (width < 1280px) {
            /* Display Reference / 표제 참조 */
            --font-size-display-1: var(--font-size-display-1-min);
            --font-size-display-2: var(--font-size-display-2-min);
            --font-size-display-3: var(--font-size-display-3-min);

            /* Heading Reference / 제목 참조 */
            --font-size-heading-1: var(--font-size-heading-1-min);
            --font-size-heading-2: var(--font-size-heading-2-min);
            --font-size-heading-3: var(--font-size-heading-3-min);
            --font-size-heading-4: var(--font-size-heading-4-min);
            --font-size-heading-5: var(--font-size-heading-5-min);
            --font-size-heading-6: var(--font-size-heading-6-min);

            /* Body Reference / 본문 참조 */
            --font-size-body-1: var(--font-size-body-1-min);
            --font-size-body-2: var(--font-size-body-2-min);
            --font-size-body-3: var(--font-size-body-3-min);
            --font-size-body-4: var(--font-size-body-4-min);
            --font-size-body-5: var(--font-size-body-5-min);
        }

        /* Display Font / 표제 글꼴 */
        --font-display-1: var(--font-weight-700) var(--font-size-display-1) / var(--line-height-hangeul) var(--font-family-sans-serif);
        --font-display-2: var(--font-weight-700) var(--font-size-display-2) / var(--line-height-hangeul) var(--font-family-sans-serif);
        --font-display-3: var(--font-weight-700) var(--font-size-display-3) / var(--line-height-hangeul) var(--font-family-sans-serif);

        /* Heading Font / 제목 글꼴 */
        --font-heading-1: var(--font-weight-700) var(--font-size-heading-1) / var(--line-height-hangeul) var(--font-family-sans-serif);
        --font-heading-2: var(--font-weight-700) var(--font-size-heading-2) / var(--line-height-hangeul) var(--font-family-sans-serif);
        --font-heading-3: var(--font-weight-700) var(--font-size-heading-3) / var(--line-height-hangeul) var(--font-family-sans-serif);
        --font-heading-4: var(--font-weight-700) var(--font-size-heading-4) / var(--line-height-hangeul) var(--font-family-sans-serif);
        --font-heading-5: var(--font-weight-700) var(--font-size-heading-5) / var(--line-height-hangeul) var(--font-family-sans-serif);
        --font-heading-6: var(--font-weight-700) var(--font-size-heading-6) / var(--line-height-hangeul) var(--font-family-sans-serif);

        /* Body Font / 본문 글꼴 */
        --font-body-1: var(--font-weight-400) var(--font-size-body-1) / var(--line-height-hangeul) var(--font-family-sans-serif);
        --font-body-2: var(--font-weight-400) var(--font-size-body-2) / var(--line-height-hangeul) var(--font-family-sans-serif);
        --font-body-3: var(--font-weight-400) var(--font-size-body-3) / var(--line-height-hangeul) var(--font-family-sans-serif);
        --font-body-4: var(--font-weight-400) var(--font-size-body-4) / var(--line-height-hangeul) var(--font-family-sans-serif);
        --font-body-5: var(--font-weight-400) var(--font-size-body-5) / var(--line-height-hangeul) var(--font-family-sans-serif);
        --font-body-1-bold: var(--font-weight-700) var(--font-size-body-1) / var(--line-height-hangeul) var(--font-family-sans-serif);
        --font-body-2-bold: var(--font-weight-700) var(--font-size-body-2) / var(--line-height-hangeul) var(--font-family-sans-serif);
        --font-body-3-bold: var(--font-weight-700) var(--font-size-body-3) / var(--line-height-hangeul) var(--font-family-sans-serif);
        --font-body-4-bold: var(--font-weight-700) var(--font-size-body-4) / var(--line-height-hangeul) var(--font-family-sans-serif);
        --font-body-5-bold: var(--font-weight-700) var(--font-size-body-5) / var(--line-height-hangeul) var(--font-family-sans-serif);
    }

    /* Spatial System / 공간 체계 */
    :root {
        /* Container / 컨테이너 */
        --container-width-narrow: 1133;
        --container-width-base: 1440;
        --container-width-wide: 1600;
        --container-viewport-ratio: 0.92;
        --container-margin: calc((100vw - min(var(--container-viewport-ratio) * 100vw, var(--container-width-base) * 1rem)) / 2);
        --container-margin-negative: calc(var(--container-margin) * -1);

        /* Grid / 그리드 */
        --grid-columns-sm: 4;
        --grid-columns-md: 12;
        --grid-columns-lg: 12;
        --grid-gap-sm: 16rem;
        --grid-gap-md: 16rem;
        --grid-gap-lg: 24rem;
        @media (width >= 1280px) {
            --grid-columns: var(--grid-columns-lg);
            --grid-gap: var(--grid-gap-lg);
        }
        @media (768px <= width < 1280px) {
            --grid-columns: var(--grid-columns-md);
            --grid-gap: var(--grid-gap-md);
        }
        @media (width < 768px) {
            --grid-columns: var(--grid-columns-sm);
            --grid-gap: var(--grid-gap-sm);
        }
    }

    /* Numeric Scale / 수치 척도 */
    :root {
        /* Numeric Base / 수치 기준 */
        --numeric-base: 8rem;

        /* Scale Step / 척도 단계 */
        --numeric-0: 0;
        --numeric-1: calc(var(--numeric-base) * 0.125);
        --numeric-2: calc(var(--numeric-base) * 0.25);
        --numeric-3: calc(var(--numeric-base) * 0.5);
        --numeric-4: calc(var(--numeric-base) * 0.75);
        --numeric-5: var(--numeric-base);
        --numeric-6: calc(var(--numeric-base) * 1.25);
        --numeric-7: calc(var(--numeric-base) * 1.5);
        --numeric-8: calc(var(--numeric-base) * 2);
        --numeric-9: calc(var(--numeric-base) * 2.5);
        --numeric-10: calc(var(--numeric-base) * 3);
        --numeric-11: calc(var(--numeric-base) * 3.5);
        --numeric-12: calc(var(--numeric-base) * 4);
        --numeric-13: calc(var(--numeric-base) * 4.5);
        --numeric-14: calc(var(--numeric-base) * 5);
        --numeric-15: calc(var(--numeric-base) * 5.5);
        --numeric-16: calc(var(--numeric-base) * 6);
        --numeric-17: calc(var(--numeric-base) * 7);
        --numeric-18: calc(var(--numeric-base) * 8);
        --numeric-19: calc(var(--numeric-base) * 9);
        --numeric-20: calc(var(--numeric-base) * 10);
        --numeric-21: calc(var(--numeric-base) * 12);
        --numeric-22: calc(var(--numeric-base) * 13);
        --numeric-23: calc(var(--numeric-base) * 14);
        --numeric-24: calc(var(--numeric-base) * 15);
        --numeric-25: calc(var(--numeric-base) * 16);
    }

    /* Shape / 형태 */
    :root {
        /* Radius / 모서리 곡률 */
        --radius-0: 0;
        --radius-1: 2px;
        --radius-2: 4px;
        --radius-3: 6px;
        --radius-4: 8px;
        --radius-5: 10px;
        --radius-6: 16px;
        --radius-full: 9999px;
        --radius-circle: 50%;

        /* Border Width / 테두리 두께 */
        --border-width-0: 0;
        --border-width-1: 1px;
        --border-width-2: 2px;
        --border-width-3: 3px;

        /* Shadow / 그림자 */
        --shadow-0: none;
        --shadow-1: 0 0 20rem oklch(0% 0 0 / 0.1);
        --shadow-2: 0 0 40rem oklch(0% 0 0 / 0.2);
        --shadow-3: 0 0 60rem oklch(0% 0 0 / 0.3);
    }

    /* Semantic Token / 의미 토큰 */
    :root {
        /* Space / 간격 */
        --space-1: var(--numeric-3);
        --space-2: var(--numeric-5);
        --space-3: var(--numeric-8);
        --space-4: var(--numeric-10);
        --space-5: var(--numeric-12);
        --space-6: var(--numeric-14);
        @media (width >= 1280px) {
            /* --space-heading-content: var(--numeric-16); */
            --space-heading-content: 160rem;
            --space-heading-content: 70rem;
            --space-section-block-1: var(--numeric-17);
            --space-section-block-2: 160rem;
            --space-section-block-3: 205rem 225rem;
        }
        @media (width < 1280px) {
            --space-heading-content: var(--numeric-15);
            --space-section-block-1: var(--numeric-17);
            --space-section-block-2: var(--numeric-20);
            --space-section-block-3: var(--numeric-21) var(--numeric-22);
        }

        /* Duration / 지속시간 */
        --duration-fast: 0.15s;
        --duration-base: 0.3s;
        --duration-slow: 0.5s;

        /* Border Color / 테두리 색상 */
        --color-border: var(--color-neutral-200);
        --color-border-hover: none;
        --color-border-active: none;
        --color-border-focus: none;
        --color-border-disabled: none;
        --color-border-strong: none;
        --color-border-subtle: none;

        /* Header / 헤더 */
        --site-menu-button-size: 50rem;
        --site-menu-icon-size: 50rem;
        --site-menu-bar-size: var(--numeric-2);
        @media(width>=1280px){
            --header-height: 100rem;
        }
        @media(width<1280px){
            --header-height: var(--numeric-17);
        }

        /* Swiper / 스와이퍼 */
        --swiper-pagination-bottom: 0;
        --swiper-pagination-color: var(--color-neutral-200);
        --swiper-pagination-bullet-size: 10rem;
        --swiper-pagination-bullet-inactive-opacity: 1;
        --swiper-pagination-bullet-border-radius: var(--radius-full);
        --swiper-pagination-bullet-horizontal-gap: 0;
        --swiper-pagination-bullet-inactive-color: oklch(from var(--swiper-pagination-color) l c h / 0.2);

        /* Etc / 기타 */
    }
}