@import url("./typography.css");
@import url("./foundation.css");
@import url("./button.css");
@import url("./icon.css");
@import url("./form.css");
@import url("./table.css");
@import url("./pagination.css");


:root {
    /* content */
    --breakpoint_sm: 360px;
    --breakpoint_md: 768px;
    --breakpoint_desktop: 1440px;

    --max-width__mobile: 320px;
    --max-width__tablet: 688px;
    --max-width__desktop: 1328px;

    /* color */
    --color_black: rgba(0, 0, 0, 0.85);
    --color_white: white;

    --gray_600: #242627;
    --gray_500: #54585A;
    --gray_400: #949494;
    --gray_300: #C3C3C3;
    --gray_200: #DBDBDB;
    --gray_100: #F5F6F8;

    --red_600: #DD6540;
    --red_100: #FCF0EC;

    --blue_900: #003964;
    --blue_800: #005696;
    --blue_700: #006EBE;
    --blue_600: #0080DE;
    --blue_500: #3399E5;
    --blue_400: #66B3EB;
    --blue_300: #99CCF2;
    --blue_200: #CCE6F8;
    --blue_100: #E5F2FC;

    --green_900: #436A00;
    --green_800: #639908;
    --green_700: #81B130;
    --green_600: #9BC555;
    --green_500: #AFD177;
    --green_400: #C3DC99;
    --green_300: #D7E8BB;
    --green_200: #EBF3DD;
    --green_100: #F5F9EE;

    --beige_200: #EDE9E6;
    --beige_100: #F6F3F0;

    --primary_600: var(--blue_600);
    --primary_100: var(--blue_100);

    --sub_600: var(--green_600);
    --sub_100: var(--green_100);

    --opposite_700: var(--red_700);
    --opposite_100: var(--red_100);

    --color_accent: var(--primary_600);
    --color_success: var(--green_700);
    --color_error: var(--red_600);

    --color_text_1: var(--color_black);
    --color_text_2: var(--gray_600);
    --color_text_3: var(--gray_500);
    --color_text_4: var(--gray_400);
    --color_text_5: var(--gray_300);

    --color_ground_1: var(--beige_200);
    --color_ground_2: var(--beige_100);
    --color_ground_3: white;

    --color_placeholder: var(--gray_400);
    --color_disabled: var(--gray_300);


    /* typography */
    --font-size_head_1: 34px;
    --font-size_head_2: 30px;
    --font-size_title_1: 26px;
    --font-size_title_2: 24px;
    --font-size_sub_1: 20px;
    --font-size_sub_2: 18px;
    --font-size_sub_3: 16px;
    --font-size_sub_4: 14px;
    --font-size_body_1: 16px;
    --font-size_body_2: 14px;
    --font-size_body_3: 13px;
    --font-size_detail: 12px;
    --font-size_button: 1rem;

    --font-weight_bold: 700;
    --font-weight_medium: 400;

    --line-height_sm: 1.4;
    --line-height_md: 1.5;
    --line-height_lg: 1.8;

    --letter-spacing_body: -0.015em;

    /* spacing / gap / margin */
    --spacing_1: 2px;
    --spacing_2: 4px;
    --spacing_3: 8px;
    --spacing_4: 12px;
    --spacing_5: 16px;
    --spacing_6: 20px;
    --spacing_7: 24px;
    --spacing_8: 32px;
    --spacing_9: 40px;
    --spacing_10: 48px;
    --spacing_11: 56px;
    --spacing_12: 64px;

    /* shape / border / shadow */
    --border_black_1: 1px solid var(--color_black);
    --border_black_2: 2px solid var(--color_black);
    --border_black_3: 3px solid var(--color_black);
    --border_dark_1: 1px solid var(--gray_600);
    --border_dark_2: 2px solid var(--gray_600);
    --border_dark_3: 3px solid var(--gray_600);
    --border_gray_1: 1px solid var(--gray_300);
    --border_gray_2: 2px solid var(--gray_300);
    --border_gray_3: 3px solid var(--gray_300);
    --border_light_1: 1px solid var(--gray_200);
    --border_light_2: 2px solid var(--gray_200);
    --border_light_3: 3px solid var(--gray_200);
    --border_beige_1: 1px solid var(--beige_200);
    --border_beige_2: 2px solid var(--beige_200);
    --border_beige_3: 3px solid var(--beige_200);
    --border_primary_1: 1px solid var(--primary_600);
    --border_primary_2: 2px solid var(--primary_600);
    --border_primary_3: 3px solid var(--primary_600);
    --border_blue_1: 1px solid var(--blue_700);
    --border_blue_2: 2px solid var(--blue_700);
    --border_blue_3: 3px solid var(--blue_700);

    --curved: 5px;
    --rounded: 24px;
    --circle: 50%;

    --shadow: 0 3px 6px var(--gray_500);
    --shadow_primary: 0 3px 6px var(--primary_500);
}



* {
    word-break: break-all;
    font-family: 'Pretendard Variable' !important;
}

html {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}

html::-webkit-scrollbar {
    display: none;
}

img {
    width: 100%;
}

hr {
    height: 1px;
    background-color: var(--gray_200);
}

.dim-layer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: black;
    opacity: 0.7;
    z-index: 9998;
}

.visible {
    visibility: visible !important;
}

.toast-message-wrapper {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    max-width: var(--max-width__mobile);
    width: 100%;
    height: auto;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    background-color: var(--color_black);
    border-radius: var(--curved);
    z-index: 9999;
    animation: fade_io 3s ease-out forwards;
}

.toast-message {
    color: var(--color_white);
    font-size: var(--font-size_body_2);
    font-weight: var(--font-weight_medium);
    line-height: var(--line-height_lg);
    word-break: keep-all;
}

@keyframes fade_io {
    0% {
        top: 0;
        opacity: 0;
    }

    4% {
        top: 3rem;
        opacity: 100%;
    }

    6% {
        top: calc(3rem + 10px);
    }

    8% {
        top: calc(3rem - 5px);
    }

    10% {
        top: 3rem;
    }

    90% {
        top: 3rem;
        opacity: 100%;
    }

    91% {
        top: calc(3rem + 10px);
        opacity: 100%;
    }

    100% {
        top: 0;
        opacity: 0;
    }
}

@media screen and (min-width:360px) {}

@media screen and (min-width:768px) {}

@media screen and (min-width:1440px) {}