:root {
    /* Break point */
    /* 
        Mobile 1: 360 x 640.
        Mobile 2: 375 x 667.
        Mobile 3: 360 x 720.
        iPhone X: 375 x 812.
        Pixel 2: 411 x 731.
        Tablet: 768 x 1024.
        Laptop: 1366 x 768.
        desktop 1: 1024 x 768.
        desktop 1: 1200 x 800.
        desktop 2: 1440 x 1080.
        High-res laptop or desktop: 1920 x 1080.
     */
    /* 서비스 특성에 맞게 변경해서 사용*/
    /* 
        The point color
        * brand(accent) color
            * primary color : main brand color - usable 60% ~ 70%;
            * action color : interaction element - Usually, It is complementary to the main brand color.
        * text color
            * text black : main text, title
            * text body : description, paragraph, sub text
        * background
        * border : touchable element
        * disbled : disabled element
    */

    --color_primary: rgba(0, 0, 0, 0.8);
    --color_primary_dark: rgba(0, 0, 0, 1);
    --color_primary_light: rgba(0, 0, 0, 0.5);
    --color_action: rgba(0, 255, 255, 1);
    --color_text_title: rgba(34, 34, 34, 1);
    --color_text_paragraph: rgba(102, 102, 102, 0.4);
    --color_text_placeholder: rgba(153, 153, 153, 0.2);
    --color_text_disabled: rgba(203, 203, 203, 0.6);
    --color_background: rgba(0, 0, 0, 0.03);
    --color_border: rgb(219, 219, 219, 1);

    /* 가급적 변경 금지 */
    /* 
        The achromatic color
        * black
        * white
        * gray
    */

    --color_black: rgba(13, 13, 13, 1);
    --color_white: rgba(245, 245, 245, 1);
    --color_gray: rgb(128, 128, 128, 1);
    --color_gray_dark: rgba(105, 105, 105, 1);
    --color_gray_light: rgba(204, 204, 204, 1);
    /*
    The four basic web colors 
        * 'danger' gives users an 'alert'
        * 'warning' is a light warning. The user may ignore this color.
        * 'info' is used for the purpose of providing information. It stands out.
        * grey : 'disabled' sign color
    */

    --color_danger: rgba(244, 67, 54, 1);
    --color_success: rgba(76, 175, 80, 1);
    --color_warning: rgba(255, 235, 59, 1);
    --color_info: rgba(33, 150, 243, 1);
    --color_disabled: rgba(153, 153, 153, 1);

    --border_1: 1px solid var(--color_border);
    --border_2: 2px solid var(--color_border);
    --border_3: 3px solid var(--color_border);
    --border_primary_1: 1px solid var(--color_primary);
    --border_primary_2: 2px solid var(--color_primary);
    --border_primary_3: 3px solid var(--color_primary);
    --border_danger_1: 1px solid var(--color_danger);
    --border_danger_2: 2px solid var(--color_danger);
    --border_danger_3: 3px solid var(--color_danger);
    --border_success_1: 1px solid var(--color_success);
    --border_success_2: 2px solid var(--color_success);
    --border_success_3: 3px solid var(--color_success);
    --border_warning_1: 1px solid var(--color_warning);
    --border_warning_2: 2px solid var(--color_warning);
    --border_warning_3: 3px solid var(--color_warning);


    --shadow: 0 3px 6px rgba(13, 13, 13, 0.16);
}

*:not(head, script) {
    box-sizing: border-box;
    color: inherit;
    font: inherit;
    background-color: transparent;
    padding: 0;
    margin: 0;
    border: none;
    outline: none;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}

html,
body {
    height: 100%;
}

body {
    width: 100%;
    line-height: 1.35;
    -webkit-text-size-adjust: none;
    overflow-y: auto;
}

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

.wrapper {
    display: flex;
    height: 100%;
    flex-direction: column;
}

main.container-main {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    margin: 56px 80px;
}

main {
    flex: 1;
}

main.scrollable {
    overflow-y: auto;
}

th,
td,
input,
select,
textarea,
button {
    line-height: 1.5;
}

a {
    text-decoration: none;
    cursor: pointer;
}

a:active,
a:hover {
    color: inherit;
}

button[type=disabled],
.disabled {
    cursor: not-allowed;
}

ul,
li {
    list-style: none;
}

input {
    border: 0;
    outline: 0;
    line-height: 1.5;
}

input[type=text],
input[type=password],
input[type=number],
input[type=email],
input[type=phone] {
    -webkit-appearance: none;
    cursor: text;
    line-height: inherit;
}

button,
input[type='button'],
input[type='submit'],
input[type='reset'],
input[type='file'] {
    cursor: pointer;
    -webkit-appearance: button;
}

input[type='search']::-webkit-search-cancel-button {
    -webkit-appearance: none
}

img,
video,
audio {
    display: inline-block;
    object-fit: contain;
    font-size: 0;
}

h2,
h3,
h4,
h5,
h6 {
    display: inline-block;
    line-height: 1.5;
}

h1 {
    display: block;
    line-height: 1.4;
    font-weight: bolder;
}

table {
    border-collapse: collapse;
    border-spacing: 0
}

hr {
    display: block;
    width: 100%;
    height: 1px;
    border: none;
    background-color: var(--color_border);
}

.show {
    display: inherit !important;
}

.silence {
    display: none !important;
}

.scroll-none {
    height: 100%;
    overflow: hidden !important;
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */
}

.scroll-none::-webkit-scrollbar {
    display: none;
}

.responsive-wearable {
    display: none !important;
}

.responsive-mobile {
    display: none !important;
}

.responsive-tablet {
    display: none !important;
}

.responsive-laptop {
    display: none !important;
}

.responsive-desktop {
    display: none !important;
}

/* wearable  */
@media all and (min-width: 280px) and (max-width: 359px) {
    .responsive-wearable {
        display: inherit !important;
    }
}

/* mobile  */
@media all and (min-width: 320px) {
    .responsive-mobile {
        display: inherit !important;
    }
}

/* mobile large & tablet */
@media all and (min-width: 768px) {
    .responsive-mobile {
        display: none !important;
    }

    .responsive-tablet {
        display: inherit !important;
    }
}

/* laptop */
@media all and (min-width: 1024px) {
    .responsive-laptop {
        display: inherit !important;
    }
}

/* desktop */
@media all and (min-width: 1440px) {
    .responsive-tablet {
        display: none !important;
    }

    .responsive-laptop {
        display: none !important;
    }

    .responsive-desktop {
        display: inherit !important;
    }
}