/*Button Common Css*/
button.btn, a.btn {
    padding     : 8px 20px;
    font-size   : var(--font-16);
    line-height : var(--line-20);
    color       : var(--basic-black);
}

/*Button*/
button.btn.btn-xl, a.btn.btn-xl {
    padding     : 12px 24px;
    font-size   : var(--font-24);
    line-height : var(--line-28);
}

button.btn.btn-lg, a.btn.btn-lg {
    padding     : 8px 20px;
    font-size   : var(--font-20);
    line-height : var(--line-24);
}

button.btn.btn-md, a.btn.btn-md {
    padding     : 4px 12px;
    font-size   : var(--font-16);
    line-height : var(--line-20);
}

button.btn.btn-sm, a.btn.btn-sm {
    padding     : 4px 8px;
    font-size   : var(--font-14);
    line-height : var(--line-16);
}

/*Button Mobile Hover Status Change*/
@media (hover : none) {

}

/*반응형 CSS*/
@media (min-width : 576px) {
    button.btn.btn-sm, a.btn.btn-sm {
        padding     : 4px 8px;
        font-size   : var(--font-14);
        line-height : var(--line-16);
    }
}

@media (min-width : 768px) {
    button.btn.btn-md, a.btn.btn-md {
        padding     : 4px 12px;
        font-size   : var(--font-16);
        line-height : var(--line-20);
    }
}

@media (min-width : 992px) {
    button.btn.btn-lg, a.btn.btn-lg {
        padding     : 8px 20px;
        font-size   : var(--font-20);
        line-height : var(--line-24);
    }
}

@media (min-width : 1200px) {
    button.btn.btn-xl, a.btn.btn-xl {
        padding     : 12px 24px;
        font-size   : var(--font-24);
        line-height : var(--line-28);
    }
}

a.btn.btn-kakao,
button.btn.btn-kakao {
    background-color : #FEE500;
    color            : #303441 !important;
}

a.btn.btn-naver,
button.btn.btn-naver {
    background-color : #00C73C;
    color            : var(--basic-white) !important;
}


a.btn.btn-google,
button.btn.btn-google {
    background-color : transparent;
    color            : var(--basic-black) !important;
    border: 1px solid var(--basic-gray-light) !important;
}