/* 
    오직 element와 document 의
    스타일링만을 허용합니다.
*/

/* variables */
:root {
    --highlight-color-lighter: #9a2e3c;
    --highlight-color-darken: #6d3239;
    --bg-color-darken: #222222;
    --bg-color-ligher: #ef9700;
    --color-baemin: #5db6b3;

    --input-height: 40px;
    --header-height: 80px;
    --footer-height: 80px;
}

/* common */
* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;

    overflow-x: hidden;
}

body {
    width: 100vw;
    box-sizing: border-box;
    padding: 0;
    margin: 0;

    overflow-x: hidden;
}

section {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

select,
input,
textarea {
    font-size: 16px;
}

select,
input {
    height: var(--input-height);

    text-align: center;
    border: none;
    border-radius: 5px;
}
select::placeholder,
input::placeholder {
    text-align: center;
}
input[type='checkbox'] {
    margin-right: 10px;
}

textarea {
    height: var(--input-height);
    padding: 10px 5px;

    border: none;
    border-radius: 5px;
    box-sizing: border-box;
}

/* MOBILE */
@media screen and (max-width: 640px) {
    body {
        margin-bottom: 120px;
    }

    section {
        padding: 0px 20px;
    }
}
/* TABLET */
@media screen and (min-width: 640px) and (max-width: 1280px) {
    body {
        margin-bottom: 120px;
    }

    section {
        padding: 0px 50px;
    }
}
/* PC */
@media screen and (min-width: 1280px) {
    body {
        margin-bottom: calc(var(--footer-height));
    }
    section {
        padding: 0px 100px;
    }
}