/* common */
input, textarea, select, button { box-sizing: border-box; outline: none; }

.form-25 { width: 24%; }
.form-100 { width: 100%; }

@media (max-width:640px) {
    button, input, textarea, select { width: 100%; }
}


/* input, textarea */
input, textarea { padding: 14px 0; background: var(--background-light); border: 1px solid var(--border-form); font-family: 'NotoSansKRRegular'; }
input:focus, textarea:focus { border: 1px solid var(--border-form); }
input:hover, textarea:hover { border: 1px solid var(--border-form); }
input::placeholder, textarea::placeholder { color: var(--form-placeholder); font-size: 11px; font-weight: normal; }


@media (max-width:640px) {
    input,
    textarea { }
}


/* select */
select { padding: 0; background: var(--background-light); border: 1px solid var(--border-form); }
select:focus { border: 1px solid var(--border-form); }
select:hover { border: 1px solid var(--border-form); }
select.invalid { border: 1px solid var(--border-form); }

@media (max-width:640px) {
    select { }
}


/* button */
.btn-solid { padding: 12px 40px; background: #d5dddc; border: 1px solid var(--form-border); font-size: 12px; -webkit-transition: border 300ms ease-out; -moz-transition: border 300ms ease-out; -o-transition: border 300ms ease-out; cursor: pointer; }
.btn-solid:hover { border: 1px solid var(--focus-dark); }

.btn-line { padding: 12px 40px; background: none; border: 1px solid var(--form-border); font-size: 12px; -webkit-transition: border 300ms ease-out; -moz-transition: border 300ms ease-out; -o-transition: border 300ms ease-out; color: var(--color-dark); cursor: pointer; }
.btn-line:hover { border: 1px solid var(--focus-dark); }

@media (max-width:640px) {
    .btn-solid { width: 100%; margin-bottom: 4px; }

    .btn-line { width: 100%; margin-bottom: 4px; }
}


/* form */
ul.form-input { width: 100%; margin: 0 auto 30px auto; border-top: 1px solid var(--form-border); }
ul.form-input li { width: 100%; border-bottom: 1px solid var(--form-border); display: flex; justify-content: space-between; align-items: center; }
ul.form-input li .label { flex-basis: 30%; font-size: 11px; }
ul.form-input li .input { flex-basis: 70%; }

ul.form-control { width: 100%; margin: 0 auto 30px auto; }
ul.form-control li { margin-bottom: 10px; }

@media (max-width:640px) {
    ul.form-input { width: 100%; margin: 0 auto 20px auto; padding: 0; box-sizing: border-box; }

    ul.form-control { width: 100%; margin: 0 auto; padding: 0; box-sizing: border-box; }
    ul.form-control li { margin-bottom: 4px; }
}

.form-search input[type="image"] { background: none; }

@media (max-width:640px) {
    .form-search { padding: 0 30px; box-sizing: border-box; }
}