/* Reset all elements */
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css");
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}


/* Document setup */

html {
    font-size: 100%; /* 16px */
    scroll-behavior: smooth;
    height: 100%;
    width: 100%;
    box-sizing: border-box;
}

body {
    position: relative;
    height: 100%;
    width: 100%;
    line-height: 1.5;
    text-rendering: optimizeSpeed;
   font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
    font-size: 1rem;
}


/* Remove list styles */

ul,
ol {
    list-style: none;
}


/* Make images easier to work with */

img,
picture,
video,
canvas,
svg {
    display: block;
    max-width: 100%;
}


/* Inherit fonts for inputs and buttons */

input,
button,
textarea,
select {
    font: inherit;
    color: inherit;
}


/* Remove all animations and transitions for people that prefer not to see them */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}


/* Set core body defaults */

body {
    box-sizing: border-box;
    text-rendering: optimizeSpeed;
    line-height: 1.5;
    font-size: 1.6rem;
}


/* Remove default margin */

body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
    margin: 0;
}


/* A elements that don't have a class get default styles */

a:not([class]) {
    text-decoration-skip-ink: auto;
}


/* Make forms easier to work with */

input,
button,
textarea,
select {
    font: inherit;
}


/* 반응형 타이포그래피 설정 */
:root {
    --font-size-sm: clamp(0.8rem, 0.17vw + 0.76rem, 0.89rem);
    --font-size-base: clamp(1rem, 0.34vw + 0.91rem, 1.19rem);
    --font-size-md: clamp(1.25rem, 0.61vw + 1.1rem, 1.58rem);
    --font-size-lg: clamp(1.56rem, 1vw + 1.31rem, 2.11rem);
    --font-size-xl: clamp(1.95rem, 1.56vw + 1.56rem, 2.81rem);
    --font-size-xxl: clamp(2.44rem, 2.38vw + 1.85rem, 3.75rem);
    --font-size-xxxl: clamp(3.05rem, 3.54vw + 2.17rem, 5rem);
}

/* 헤딩 태그들의 가변 폰트 사이즈 설정 */
h1 {
    font-size: var(--font-size-xxl);
    font-weight: 700;
    line-height: 1.1;
}

h2 {
    font-size: var(--font-size-xl);
    font-weight: 600;
    line-height: 1.2;
}

h3 {
    font-size: var(--font-size-lg);
    font-weight: 600;
    line-height: 1.3;
}

h4 {
    font-size: var(--font-size-md);
    font-weight: 600;
    line-height: 1.4;
}

/* 본문 텍스트 스타일 */
p {
    font-size: var(--font-size-base);
    line-height: 1.6;
}

/* 작은 텍스트 스타일 */
small {
    font-size: var(--font-size-sm);
}

/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */

@media (prefers-reduced-motion: reduce) {
    html:focus-within {
        scroll-behavior: auto;
    }
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}