/*Reset.css
1. Bootstrap Component css를 초기화 하는 파일
*/
/*공통 적용*/
* {
    scrollbar-color : var(--brand-primary) var(--brand-primary-opacity);
    scrollbar-width : thin;
}

*::selection {
    color            : var(--brand-primary);
    background-color : var(--brand-primary-opacity);
}

*::-webkit-scrollbar {
    width            : 5px;
    height           : 8px;
    background-color : var(--brand-primary-opacity); /* 또는 트랙에 추가한다 */
    border-radius    : 5px;
    border           : none;
}

*::-webkit-scrollbar-thumb {
    border-radius : 5px;
    background    : var(--brand-primary);
    border        : none;
}

/*A*/
a {
    text-decoration : none;
    color           : var(--basic-black);
}

a:hover,
a:focus {
    text-decoration : none;
    color           : var(--basic-black);
}

/*Button*/
button {
    white-space : nowrap;
}

button.btn {
    white-space   : nowrap;
    border-radius : 0;
    outline       : none;
    border        : none;
    box-shadow    : none;
    font-size     : var(--font-14);
    line-height   : var(--line-16);
    padding       : 12px;
}

button.btn:focus,
button.btn:active {
    box-shadow : none;
}

button.btn.btn-block + button.btn.btn-block {
    margin-top : 16px;
}

/*Form*/
.form-control:disabled, .form-control[readonly] {
    background-color : var(--basic-white);
}

.form-group {
    position      : relative;
    margin-bottom : 0;
}

.form-group + .form-group {
    margin-top : 32px;
}

/*Input*/

input.form-control::placeholder {
    color       : var(--basic-gray-light);
    font-weight : 400;
}

input.form-control {
    border-color  : var(--basic-gray-medium-light);
    height        : auto;
    padding       : 20px;
    font-size     : var(--font-16);
    font-weight   : 500;
    line-height   : var(--line-20);
    color         : var(--basic-black);
    outline       : none;
    box-shadow    : none;
    border-radius : 0;
}

input.form-control:focus {
    border     : var(--border-1px) var(--brand-primary);
    color      : var(--basic-black);
    outline    : none;
    box-shadow : none;
}

/*Textarea*/
textarea {
    resize : none;
}

textarea.form-control::placeholder {
    color       : var(--basic-gray-light);
    font-weight : 500;
}

textarea.form-control {
    border-color  : var(--basic-gray-medium-light);
    height        : auto;
    padding       : 20px;
    font-size     : var(--font-16);
    font-weight   : 500;
    line-height   : var(--line-20);
    color         : var(--basic-black);
    outline       : none;
    box-shadow    : none;
    border-radius : 0;
}

textarea.form-control:focus {
    border     : var(--border-1px) var(--brand-primary);
    color      : var(--basic-black);
    outline    : none;
    box-shadow : none;
}

/*Card*/
.card {
    border : none;
}

.card .card-title {
    margin-bottom : 0;
    color         : var(--basic-black-medium);
}

.card .card-body {
    padding : 0 0 0 16px;
}

/*Divider*/
.divider {
    width            : 100%;
    background-color : var(--basic-gray-high-light);
    height           : 2px;
}

.divider.small {
    height : 1px;
}

/*Input*/
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance : none;
    margin             : 0;
}

/* Firefox */
input[type=number] {
    -moz-appearance : textfield;
}

/*Label*/
label {
    margin-bottom : 8px;
    font-size     : var(--font-14);
    line-height   : 1;
    color         : var(--basic-black);
    font-weight   : 500;
}

label {
    margin-bottom : 0;
    font-size     : var(--font-16);
    line-height   : var(--line-20);
    color         : var(--basic-black);
    font-weight   : 400;
    z-index       : 1;
}

label.essential {
    position : relative;
}

label.essential::before {
    position    : absolute;
    content     : '*';
    color       : var(--brand-primary);
    top         : 50%;
    transform   : translate(0, -50%);
    right       : -10px;
    font-size   : var(--font-14);
    line-height : 1;
}

/*A*/
a.c-brand-primary:hover {
    color : var(--brand-primary);
}

a.underline {
    text-decoration : underline;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .small {
    margin-bottom : 0;
}