/* 커스텀 채크박스, 라디오버튼 */
.my_checkbox, .my_radio {
    display: flex;
    align-items: center;
    justify-content: left;
    position: relative;
    gap: .1em;
}
.my_checkbox > input[type="checkbox"], .my_radio > input[type="radio"] {
    position: absolute;
    left: 0;
    top: 50%;
    display: inline-block;
    width: 0px;
    height: 1px;
}
.my_checkbox > img, .my_radio > img {
    width: auto;
    height: 1.1em;
}
.my_checkbox.disabled, .my_radio.disabled {
    pointer-events: none;
    opacity: 0.5;
    border-color: var(--bg-disabled);
}

/* 커스텀 select */
.my_select {
    display: block;
    width: 100%;
    height: auto;
    position: relative;
}
.my_select > select {
    -webkit-appearance: none; /* Chrome, Safari */
    -moz-appearance: none;    /* Firefox */
    appearance: none;         /* 표준 */
    padding-right: 2em;
}
.my_select > img {
    position: absolute;
    right: .5em;
    top: 50%;
    width: auto;
    height: 75%;
    transform: translateY(-50%);
    z-index: 1;
    cursor: pointer;
    pointer-events: none;
}
.my_select.my_radio.disabled {
    pointer-events: none;
    opacity: 0.5;
    border-color: var(--bg-disabled);
}
.my_select.my_radio.disabled + img {
    pointer-events: none;
    opacity: 0.5;
}

/* 날짜. 시간 입력 */
.my_date, .my_time {
    display: block;
    width: 100%;
    height: auto;
    position: relative;
    overflow: hidden;
}
.my_date:focus-within, .my_time:focus-within {
    outline: 2px solid var(--focused);
}
.my_date > input[type=date], .my_time > input[type=time] {
    display: block;
    width: 100%;
    height: auto;
    z-index: 1;
    -webkit-appearance: auto;
    appearance: auto;
}
.my_date > input[type=text], .my_time > input[type=text] {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: auto;
    z-index: 2;
    padding-right: 2em;
}
.my_date > a, .my_time > a {
    position: absolute;
    top: 50%;
    right: .5em;
    width: auto;
    height: 70%;
    transform: translateY(-50%);
    z-index: 3;
}
.my_date > a > img, .my_time > a > img {
    width: auto;
    height: 100%;
}
.my_date > a.safari, .my_time > a.safari {
    pointer-events: none;
}
.my_date > input[type=date].safari, .my_time > input[type=time].safari {
    text-align: left;

    -webkit-appearance: none;
    appearance: none;

    background-color: transparent;
    padding-left: 0;
    padding-right: 2em;     /* 아이콘 공간 */

    color: #000;
    height: 2.5em;
}

/* 토글뷰 패스워드 */
.my_password {
    display: block;
    width: 100%;
    height: auto;
    position: relative;
}
.my_password > input {
    display: block;
    padding-right: 2em;
}
.my_password a {
    position: absolute;
    right: .5em;
    top: 50%;
    width: auto;
    height: 75%;
    transform: translateY(-50%);
    z-index: 1;
}
.my_password a > img {
    width: auto;
    height: 100%;
}