/* to embed a font */
@import url('./font.css');

/* document --------------------------- */
*, *::after, *::before {
    box-sizing: border-box;
}

html, body {
    position: relative;
    width: 100%;
    background-color: var(--black);
    margin: 0;
    padding: 0;
    border: 0;
    /* web font + system font */
    font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
    font-size: 62.5%; /* 1rem = 1rem */
    font-weight: 400;
    letter-spacing: -.02em;
    color: var(--white);
    /* smoothing font */
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    transition: color .6s, background-color .6s;
}

/* typography --------------------------- */
h1, h2, h3, h4, h5, h6 {
    clear: both;
    margin: 0;
    padding: 0;
}

b, strong {
    /* add the correct font weight in Chrome, Edge, and Safari */
    font-weight: 600;
}

/* list style --------------------------- */
ul, ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* embedded content --------------------------- */
img {
    /* remove the border on images inside links in IE 10 */
    border-style: none;
}

/* form --------------------------- */
button, input, textarea, select, option {
    /* web font + system font */
    font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
    /* Remove the inheritance of text transform in Edge, Firefox and IE. */
    text-transform: none;
    background-color: transparent;
    letter-spacing: -.02em;
    color: var(--white);
    font-weight: 400;
    /* Show the overflow in Edge and IE. */
    overflow: visible;
    cursor: pointer;
}

button:disabled, input:disabled {
    cursor: not-allowed;
}

button, [type='button'], [type='reset'], [type='submit'] {
    /* correct the inability to style clickable types in iOS and Safari */
    appearance: button;
    -moz-appearance: button;
    -webkit-appearance: button;
}

[type='checkbox'], [type='radio'] {
    /* remove the padding in IE 10 */
    padding: 0;
    margin: 0;
}

textarea {
    width: 100%;
    /* remove the default vertical scrollbar in IE 10+ */
    overflow: auto;
    resize: none;
}

/* link --------------------------- */
a {
    color: var(--white);
    text-decoration: none;
    /* remove the gray background on active links in IE 10 */
    background-color: transparent;
    cursor: pointer;
}

a:visited, a:hover, a:active {
    color: var(--white);
    text-decoration: none;
}

a:focus {
    color: var(--white);
    text-decoration: none;
}

/* misc --------------------------- */
[hidden] {
    /* add the correct display in IE 10 */
    display: none;
}

:focus {
    outline: none;
}

:root {
    --yellow: #F7FF13;
    --black: #000000;
    --white: #FFFFFF;

    --gray01: #1A1A1A;
    --gray02: #747474;
}

/* scroll */
::-webkit-scrollbar {width: 0; height: 0; background-color: transparent;}
::-webkit-scrollbar-thumb {background-color: transparent;}
::-webkit-scrollbar-track {background-color: transparent;}

/* align */
.position-center {position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}
.position-center-top {position: absolute; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%);}
.position-center-left {position: absolute; left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%);}

/* text overflow */
.ellipsis {overflow: hidden; text-overflow: ellipsis; white-space: nowrap;} /* 한 줄 말줄임, width 지정 필요 */
.ellipsis.double {overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;} /* 두 줄 말줄임 */

/* button */
button {min-width: 26.6rem; height: 6rem; display: flex; align-items: center; justify-content: center; column-gap: 1.2rem; font-size: 2rem; font-weight: 600; border: 1px solid var(--white); border-radius: 1.2rem; cursor: pointer;}

@media screen and (max-width: 1023px) {
    button {min-width: 21.4rem; height: 4.8rem; column-gap: .8rem; font-size: 1.6rem; border-radius: .8rem;}
    
}