/* pc */
.edk_custom_select {
    font-family: "GmarketSans_Medium";
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: url('../img/icon_select_down.png') no-repeat calc(100% - 10px) 50% /20px auto;
    cursor: pointer;
    border-radius: 2px;
    padding: 16px;
    font-size: 16px;
    color: #222;
    border: 1px solid #E1E1E1;
    line-height: 1.3 !important;
}

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

.edk_custom_input {
    font-family: "GmarketSans_Medium";
    display: block;
    padding: 16px;
    font-size: 16px;
    color: #222;
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: 1px solid #E1E1E1;
    border-radius: 2px;
    background-color: #FFF;
    overflow: visible !important;
    line-height: 1.3 !important;
}

.edk_custom_input.error {
    background-color: #FFEEF0;
}

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

input::placeholder {
    color: #9E9E9E;
    overflow: visible !important;
}

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

/* .edk_custom_input::selection {
    background-color: #FFF;
} */

/* input:-webkit-autofill {
    -webkit-text-fill-color: #000;
    } */

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px #fff inset;
    transition: background-color 5000s ease-in-out 0s;
}

input:disabled:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 40rem #F8F8F8 inset;
}

/* 
input[type='date'] {
    padding: 15px;
} */

/* ==================================== input btn ==================================== */
.edk_input_btn {
    font-family: "GmarketSans_Bold";
    padding: 15px 0;
    font-size: 18px;
    font-weight: 700;
    display: block;
    color: #FFF;
    width: 100%;
    background-color: #BCBEC0;
    border-radius: 2px;
}

.edk_input_btn_border {
    font-family: "GmarketSans_Bold";
    padding: 14px 0;
    font-size: 18px;
    font-weight: 700;
    display: block;
    width: 100%;
    background-color: transparent;
    border-width: 1px;
    border-style: solid;
}

/* ==================================== 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"]::-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: 200px;
    height: 100%;
    cursor: pointer;
    background: transparent;
    z-index: 1;
}

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


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

.edk_custom_checkbox+label {
    display: inline-block;
    position: relative;
    font-family: "GmarketSans_Medium";

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

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

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

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

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

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

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


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

.edk_custom_radio+label {
    display: block;
    text-align: center;
    padding: 15px 0;
    color: #9E9E9E;
    border: 1px solid #9E9E9E;
    cursor: pointer;
    border-radius: 2px;
    font-size: 16px;
    font-family: "GmarketSans_Medium";
}

.edk_custom_radio:checked+label {
    background-color: #F1FCFE;
    border-color: var(--green-color);
    color: var(--green-color);
    font-family: "GmarketSans_Bold";
}

/* 
.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;

    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;

    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%;
    padding: 16px 42px 16px 16px;
}

.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);
}

.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 ==================================== */

/* ==================================== wrap ==================================== */
.edk_input_area {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px 0;
}

.edk_input_area .edk_input_title {
    display: block;
    font-family: "GmarketSans_Bold";
    font-size: 18px;
    color: #222;
    max-width: 156px;
    word-break: keep-all;
}

.edk_input_area .edk_input_title>.required_token {
    color: var(--error-color);
}

.edk_input_area .edk_input_wrap {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0 8px;
}

.edk_input_area .edk_input_wrap>.edk_custom_input {
    width: 100%;
}

/* radio label width 조절 */
.edk_input_area>.edk_input_wrap>.custom_label_half {
    width: calc((100% - 8px) / 2);
    padding: 15px 0;
}

.edk_input_area>.edk_input_wrap>.custom_label_quarter {
    width: calc((100% - 24px) / 4);
    padding: 15px 0;
}

.edk_input_area .edk_input_wrap>.btn_addinput {
    max-width: 52px;
    text-indent: -9999px;
    background: var(--error-color) url("/static/app_www/base/img/icon_plus_white.png") 50% 50% / 32px no-repeat;
}

/* ==================================== input 하단 messege ==================================== */
.edk_input_area>.edk_input_submessege {
    font-family: "GmarketSans_Medium";
    display: block;
    font-size: 14px;
    color: #9E9E9E;
    width: 100%;
}

.edk_input_area>.edk_input_submessege.no_visible {
    display: none;
}

.edk_input_area>.edk_input_submessege.error,
.edk_input_area>.edk_input_submessege.messege_error {
    color: var(--error-color);
}

.edk_input_area>.edk_input_submessege.messege_complete {
    color: var(--green-color);
}

/* ==================================== input 하단 messege  ==================================== */


.input_pw_wrap {
    position: relative;
}

.input_pw_wrap>input {
    padding: 16px 42px 16px 16px;
}

.input_pw_wrap .icon_password {
    position: absolute;
    width: 24px;
    height: 24px;
    overflow: hidden;
    bottom: 14px;
    right: 16px;
}

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

/* ==================================== wrap ==================================== */


/* tablet */
@media screen and (max-width: 1023px) {
    .edk_input_area {
        flex-wrap: wrap;
    }

    .edk_input_area .edk_input_title {
        max-width: 100%;
        margin-bottom: 8px;
        font-size: 16px;
    }

    .edk_input_area .edk_input_wrap {
        flex-wrap: wrap;
        max-width: 100%;
    }

    .edk_input_area .edk_input_wrap>input,
    .edk_input_area .edk_input_wrap>.edk_input_btn {
        max-width: 100%;
    }

    .edk_file_area .edk_custom_file_wrap {
        width: 100%;
    }
}

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