@font-face {
    font-family: "Pretendard";
    font-style: normal;
    font-weight: 45 920;
    font-display: swap;
    src: url("../../fonts/PretendardVariable.woff2") format("woff2-variations");
}

@font-face {
    font-family: "Paperlogy";
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url("../../fonts/Paperlogy-3Light.woff2") format("woff2");
}

@font-face {
    font-family: "Paperlogy";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../../fonts/Paperlogy-7Bold.woff2") format("woff2");
}

@font-face {
    font-family: "Paperlogy";
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url("../../fonts/Paperlogy-8ExtraBold.woff2") format("woff2");
}

:root {
    --font-sans: "Pretendard", "Noto Sans KR", "Malgun Gothic", Arial, sans-serif;
    --font-display: "Paperlogy", "Pretendard", "Noto Sans KR", "Malgun Gothic", Arial, sans-serif;

    --color-white: #ffffff;
    --color-ink: #2c2c2c;
    --color-muted: #777777;
    --color-ink-950: #111111;
    --color-ink-800: #242424;
    --color-ink-600: #666666;
    --color-surface: #ffffff;
    --color-surface-subtle: #f6f8fa;
    --color-brand: #25a72f;
    --color-brand-dark: #168a20;
    --color-border: #dfe5ea;
    --color-danger: #d92d20;

    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;

    --radius-sm: 0.25rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-full: 9999px;

    --shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.12);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.16);

    --page-gutter: 48px;
    --container-sm: 480px;
    --container-md: 768px;
    --container-lg: 1024px;
    --container-xl: 1280px;
    --container-2xl: 1440px;

    --z-dropdown: 100;
    --z-sticky: 200;
    --z-header: 500;
    --z-modal: 1100;
    --z-toast: 1200;

    --ease-standard: cubic-bezier(0.2, 0, 0, 1);
    --duration-fast: 120ms;
    --duration-base: 200ms;
    --duration-slow: 320ms;
}

@media (max-width: 1380px) {
    :root {
        --page-gutter: clamp(28px, calc(5.5556vw - 28.667px), 48px);
    }
}

@media (max-width: 1020px) {
    :root {
        --page-gutter: 28px;
    }
}

@media (max-width: 600px) {
    :root {
        --page-gutter: 22px;
    }
}