/* input 자동완성 배경색 없애기 + disable 상태 배경색 지정 */
input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 30px #fff inset;
    -webkit-text-fill-color: #000;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    transition: background-color 5000s ease-in-out 0s;
}

input:disabled:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 40rem #F8F8F8 inset;
    /* 컬러코드는 프로젝트 disabled 상태 백그라운드 컬러와 동일하게 */
}

/* pc */
.edk_custom_select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    /* background: url(/static/app_www/base/img/icon_select_down.png) no-repeat calc(100% - 10px) 50% /20px; */
    background: url(/static/app_www/base/img/icon_select_down.png) no-repeat center right 8px / 16px;
    cursor: pointer;

    padding: 12px 16px;
    font-size: 16px;
    color: #222;
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: 1px solid #9E9E9E;
    width: 100%;
}

.input_placeholder {
    color: #9E9E9E;
}

.edk_custom_select::-ms-expand {
    display: none;
}

.edk_custom_input {
    display: block;
    padding: 12px 16px;
    font-size: 16px;
    color: #222;
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: 1px solid #9E9E9E;
    width: 100%;
}

.edk_custom_input.input_border {
    border: 1px solid #9E9E9E;
}

.edk_custom_input.main_border {
    border: 1px solid var(--main-color);
    border-radius: inherit;

}

.edk_custom_input::placeholder {
    color: #9E9E9E;
}

.edk_custom_input.input_disabled {
    background-color: #F8F8F8;
}


/* ==================================== input btn ==================================== */
.edk_input_btn {
    padding: 13px 0;
    font-size: 16px;
    font-weight: 700;
    display: block;
    color: #FFF;
    width: 100%;
    background-color: #5E5E5E;
}

/* ==================================== input btn ==================================== */


/* ==================================== date ==================================== */
.edk_custom_input[type="date"],
.edk_custom_input[type="datetime-local"] {
    position: relative;
}

.edk_custom_input[type="date"]::-webkit-clear-button,
.edk_custom_input[type="datetime-local"]::-webkit-clear-button,
.edk_custom_input[type="date"]::-webkit-inner-spin-button,
.edk_custom_input[type="datetime-local"]::-webkit-inner-spin-button {
    display: none;
}

/* .edk_custom_input[type="date"]:after,
.edk_custom_input[type="datetime-local"]:after {
    position: absolute;
    top: 50%;
    right: 18px;
    content: '';
    width: 20px;
    height: 20px;
    background: url('../img/icon_calendar.png') center center / cover no-repeat;
    transform: translateY(-50%);
    z-index: 0;
} */

/* 클릭 범위 넓히기 */
.edk_custom_input[type="date"]::-webkit-calendar-picker-indicator,
.edk_custom_input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    position: absolute;
    right: -10px;
    top: 0;
    transform: translateX(-10px);
    padding-left: 3000px;
    height: 100%;
    cursor: pointer;
    background: transparent;
    z-index: 1;
}

/* ==================================== date ==================================== */


/* ==================================== checkbox ==================================== */
.edk_custom_checkbox {
    position: absolute;
    overflow: hidden;
    width: 0;
    height: 0;
}

.edk_custom_checkbox+label {
    display: inline-block;
    position: relative;

    /* 만드는 체크박스의 width(여기선 20px) + 간격(여기선 5px) = padding-left 값 */
    padding: 3px 0;
    padding-left: 36px;
    cursor: pointer;

    font-size: 16px;
    font-weight: 400;
    color: #222;
}

/* 바꿀 checkbox 체크하기 전 */
.edk_custom_checkbox+label:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 28px;
    height: 28px;

    /* 선택하기 전 checkbox 이미지 */
    background: url('../img/icon_checkbox_default.png') top left / cover no-repeat;
}

/* 바꿀 checkbox 체크 후 */
.edk_custom_checkbox:checked+label:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 28px;
    height: 28px;

    /* 선택 후 checkbox 이미지 */
    background: url('../img/icon_checkbox_check.png') top left / cover no-repeat;
}

/* 품절일 때 */
.edk_custom_checkbox+label.soldout_label:before {
    background-image: url("../img/icon_checkbox_disabled_gray.png");
}

/* ==================================== checkbox ==================================== */


/* ==================================== radio ==================================== */
.edk_custom_radio {
    position: absolute;
    width: 0;
    height: 0;
    padding: 0;
    margin: 0;
    border: 0;
    overflow: hidden;
}

.edk_custom_radio+label {
    display: inline-block;
    position: relative;
    padding-left: 24px;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;

    font-size: 16px;
    font-weight: 400;
    color: #222;
}

/* 바꿀 checkbox 체크하기 전 */
.edk_custom_radio+label:before {
    content: "";
    position: absolute;
    top: 4px;
    left: 0;
    width: 16px;
    height: 16px;

    /* 선택하기 전 checkbox 이미지 */
    background: url('../img/icon_radio_default.png') top left / cover no-repeat;
}

/* 바꿀 checkbox 체크 후 */
.edk_custom_radio:checked+label:after {
    content: "";
    position: absolute;
    top: 4px;
    left: 0;
    width: 16px;
    height: 16px;

    /* 선택 후 checkbox 이미지 */
    background: url('../img/icon_radio_check.png') top left / cover no-repeat;
}

/* ==================================== radio ==================================== */


/* ==================================== radio ==================================== */
.edk_search_area {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 50px;
}

.edk_search_area>* {
    height: 100%;
}

.edk_search_area>input {
    border: none;
    width: calc(100% - 78px);
}

.edk_search_area>button {
    max-width: 70px;
}

/* ==================================== radio ==================================== */


/* ==================================== file ==================================== */
.edk_file_area {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.edk_file_area .edk_custom_file_wrap {
    position: relative;
    width: calc(100% - 93px);
}

.edk_file_area .edk_custom_file_wrap .upload_name {
    display: inline-block;
    vertical-align: middle;
    width: 100%;
}

.edk_file_area .edk_custom_file_wrap .edk_custom_file_close {
    position: absolute;
    top: 50%;
    right: 16px;
    transform: translateY(-50%);
    max-width: 16px;
    cursor: pointer;
    display: none;
}

.edk_file_area .edk_custom_file_wrap .edk_custom_file_close.view-show {
    display: block;
}

.edk_file_area>button {
    display: inline-block;
    max-width: 85px;

}

.edk_file_area>input[type="file"] {
    position: absolute;
    width: 0;
    height: 0;
    padding: 0;
    overflow: hidden;
    border: 0;
}

/* ==================================== file ==================================== */


/* ==================================== find_addr (주소찾기) ==================================== */
.edk_find_addr>div {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.edk_find_addr>div>input {
    border: none;
    width: calc(100% - 110px);
    border-bottom: 1px solid #9E9E9E;
}

.edk_find_addr>div>button {
    max-width: 102px;
}

.edk_find_addr>input:not(:first-of-type) {
    display: none;
}

.edk_find_addr>input:first-of-type {
    width: 100%;
}

/* ==================================== find_addr (주소찾기) ==================================== */



/* ==================================== switch ==================================== */
.edk_custom_switch label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
}

.edk_custom_switch input[type="checkbox"] {
    appearance: none;
    position: relative;
    border-radius: 1.25em;
    border: max(2px, 0.1em) solid gray;
    width: 90px;
    height: 45px;
}

.edk_custom_switch input[type="checkbox"]::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    border-radius: 50%;
    transform: scale(0.8);
    background-color: gray;
    transition: all 250ms linear;
}

.edk_custom_switch input[type="checkbox"]::after {
    content: 'OFF';
    position: absolute;
    top: 50%;
    right: 3px;
    transform: translateY(-50%);
    font-size: 12px;
    transition: left 250ms linear;
}

.edk_custom_switch input[type="checkbox"]:checked {
    background-color: tomato;
    border-color: tomato;
}

.edk_custom_switch input[type="checkbox"]:checked::after {
    content: 'ON';
    left: 3px;
    right: 0;
    transition: all 250ms linear;
}

.edk_custom_switch input[type="checkbox"]:checked::before {
    background-color: white;
    left: 50%;
}

.edk_custom_switch input[type="checkbox"]:disabled {
    border-color: lightgray;
    opacity: 0.7;
    cursor: not-allowed;
}

.edk_custom_switch input[type="checkbox"]:disabled:before {
    background-color: lightgray;
}

.edk_custom_switch input[type="checkbox"]:disabled+span {
    opacity: 0.7;
    cursor: not-allowed;
}

.edk_custom_switch input[type="checkbox"]:focus-visible {
    outline-offset: max(2px, 0.1em);
    outline: max(2px, 0.1em) solid tomato;
}

.edk_custom_switch input[type="checkbox"]:enabled:hover {
    box-shadow: 0 0 0 max(4px, 0.2em) lightgray;
}

/* ==================================== switch ==================================== */


/* ==================================== input 영역 ==================================== */
.edk_input_wrap .input_title {
    display: block;
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 700;
    color: #222;
}

.input_title .required {
    color: var(--main-color);
}

/* messege */
.edk_input_wrap.input_verify_wrap span[class^="messege_"],
.edk_input_wrap.input_pw_wrap span[class^="messege_"] {
    position: absolute;
    bottom: -21px;
    font-size: 12px;
}

.edk_input_wrap .messege_complete {
    color: var(--main-color);
}

.edk_input_wrap .messege_error {
    color: var(--error-color);
}

/* input - email */
.edk_input_wrap.input_email_wrap .email_wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0 9px;
    margin-bottom: 8px;
}

.edk_input_wrap.input_email_wrap .email_wrap span {
    font-size: 16px;
    font-weight: 700;
    color: #222222;
}

.edk_input_wrap.input_email_wrap .email_wrap input {
    width: calc((100% - 34px) / 2);
}

.edk_input_wrap.input_email_wrap .select_wrap .edk_custom_select {
    width: 100%;
}

/* input - verify, input - new password check */
.edk_input_wrap.input_verify_wrap,
.edk_input_wrap.input_pw_wrap {
    position: relative;
}

.edk_input_wrap.input_verify_wrap .input_wrap {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}


.edk_input_wrap.input_verify_wrap .input_wrap button {
    max-width: 135px;
    margin-left: 16px;
}

.edk_input_wrap.input_verify_wrap .input_wrap input,
.edk_input_wrap.input_verify_wrap .input_wrap div {
    width: calc(100% - 151px);
}

.edk_input_wrap input.error {
    border-color: var(--error-color);
}

.edk_input_wrap input.complete {
    border-color: var(--success-color);
}

.edk_input_wrap.input_verify_wrap .edk_verify_btn {
    display: block;
    padding: 11px 0;
    width: 100%;
    border-radius: 5px;
    text-align: center;
    font-size: 18px;
    font-weight: 700;
}

/* input - select */


/* icon - password */
.edk_input_wrap.input_pw_wrap .icon_password {
    position: absolute;
    width: 22px;
    bottom: 3px;
    right: 16px;
}

.edk_input_wrap.input_pw_wrap .icon_password img {
    cursor: pointer;
    filter: invert(75%) sepia(19%) saturate(19%) hue-rotate(315deg) brightness(91%) contrast(81%)
}



/* ==================================== input 영역 ==================================== */




/* tablet */
@media screen and (max-width: 1023px) {}

/* mobile */
@media screen and (max-width: 767px) {

    .edk_input_wrap.input_verify_wrap .input_wrap input,
    .edk_input_wrap.input_verify_wrap .input_wrap div {
        width: calc(100% - 137px);
    }

    .edk_input_wrap.input_verify_wrap .input_wrap button {
        max-width: 121px;
    }
}