@charset "utf-8";

@layer tokens, foundation, vendor, legacy-1, legacy-2, components, pages, utilities, a11y, animations;

@layer foundation {
    :where(*, *::before, *::after) {
        /* min-width: 0; */
        box-sizing: border-box;
    }
    :where(body, h1, h2, h3, h4, h5, h6, p, ul, ol, dl, dd, figure) {
        margin: 0;
    }
    :where(ul, ol) {
        padding: 0;
        list-style: none;
    }
    :where(input, textarea, select, button) {
        font: inherit;
        color: inherit;
    }
    :where(address, em) {
        font-style: normal;
    }
    :where(button, summary) {
        cursor: pointer;
    }
    :where(:disabled, [aria-disabled="true"], label:has(:disabled, [aria-disabled="true"])) {
        cursor: not-allowed;
    }
    ::selection {
        color: contrast-color(var(--color-primary-base, #3367d1));
        background: var(--color-primary-base, #3367d1);
    }
    html {
        container-type: inline-size;
        font-size: 6.25%;
        -webkit-text-size-adjust: 100%;
        scrollbar-gutter: stable;
        /*
        [CRITICAL] System Text Rendering Optimization & Cross-Browser Protection
        1. Purpose: Use rem as the primary unit while keeping its values intuitive and easy to calculate.
        2. Background: html font-size is set to 6.25% (1rem = 1px), allowing px values to be used directly as rem values.
        3. Issue: This sets the root font-size below Safari's 10px minimum font size, which can cause incorrect rem scaling on Apple devices.
        4. Note: Uses '100%' instead of 'none' to prevent browser scaling while preserving pinch-to-zoom accessibility.
        5. Warning: Do not remove or modify this rule, as it protects layout consistency on Apple devices.
        */
        /*
        [중요] 시스템 텍스트 렌더링 최적화 및 크로스 브라우징 방어
        1. 목적: rem을 기본 단위로 사용하면서 수치를 직관적으로 계산하고 사용할 수 있도록 합니다.
        2. 배경: html font-size를 6.25%(1rem = 1px)로 설정하여 px 수치를 별도 변환 없이 rem으로 사용할 수 있도록 합니다.
        3. 문제: 이 설정으로 루트 글자 크기가 Safari의 최소 글자 크기인 10px 미만이 되어 Apple 기기에서 rem 계산 문제가 발생할 수 있습니다.
        4. 주의: 'none' 대신 '100%'를 사용하여 브라우저의 강제 확대를 억제하면서 핀치 줌 접근성을 유지합니다.
        5. 경고: Apple 기기의 레이아웃 일관성을 위해 이 규칙을 삭제하거나 수정하지 마십시오.
        */
        scroll-padding-top: var(--header-height);
        @media(width > 900px){
            &:has(.jump){
                scroll-padding-top: calc(var(--header-height) + 59px);
            }
        }
        @media (prefers-reduced-motion: no-preference) {
            /* @view-transition  { navigation: auto; } */
            scroll-behavior: smooth;
        }
        @supports (interpolate-size: allow-keywords) {
            interpolate-size: allow-keywords;
        }
    }
    body {
        font-size: var(--font-size-body-3);
        line-height: var(--line-height-hangeul);
        font-family: var(--font-family-sans-serif);
        overflow-wrap: break-word;
        word-break: keep-all;
        color: var(--color-black);
        accent-color: var(--color-primary-500);
        caret-color: var(--color-primary-500);
    }
    table {
        border-collapse: collapse;
        border-spacing: 0;
    }
    a {
        color: inherit;
        text-decoration: none;
        &:hover{
            text-decoration: underline;
        }
    }
    button {
        padding: 0;
        background: none;
        border: 0;
    }
    textarea {
        resize: vertical;
    }
}