:root {
    --invalid-color: #fc311e; /* Background color for the entire website, including individual sections */
    --subtle: #1B939F; /*   기존꺼 #6bbfbf */
    --hover: #38d3d8;
}




form {
    width: fit-content;
    border: 4px solid var(--subtle);
    padding: 16px;
    border-radius: 10px;
}

@media only screen and (max-width: 1000px) {
    form {
        border-style: none;
    }
}



body > main > div {
    top: 0 !important;
}

#starter-section {
    padding-top: 0;
}

.container {
    margin-bottom: 10px;
}

form div {
    width: 350px;
    margin-bottom: 20px;
}

.inputBox {
    position: relative;
    margin: 0 25px 25px 25px;
    font-size: 20px;
    color: darkgray;
    font-weight: normal;
}

form input[type="text"],
form input[type="password"],
form input[type="number"],
form input[type="email"] {
    width: 100%;
    box-sizing: border-box;
    border-radius: 10px;
    font-size: 18px;
    padding: 8px 8px 4px;
}

form button {
    padding: 8px 16px;
    background-color: var(--subtle);
    color: #fff;
    border: none;
    cursor: pointer;
}



form div input:focus {
    border-color: var(--hover);
    outline: none;
}

form div label {
    pointer-events: none;
    position: absolute;
    left: 10px;
    bottom: 5px;
    height: fit-content;
}

#roadAddressBox > div:nth-child(1) > label {
    pointer-events: none;
    position: absolute;
    left: 10px;
    bottom: 45px;
    height: fit-content;
}

.focused-label,
form div input[type='text']:focus:not(#roadAddress, #detailAddress) ~ label
, form div input[type='password']:focus ~ label
, form input[type="number"]:focus ~ label
, form input[type="email"]:focus ~ label {
    font-size: 14px;
    font-weight:normal;
    background-color:#fff;
    transition: all 0.2s;
    transform: translate(6px, -28px)
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    transition: background-color 5000s ease-in-out 0s;
    -webkit-transition: background-color 9999s ease-out;
    /*-webkit-box-shadow: 0 0 0px 1000px white inset !important;*/
    /*-webkit-text-fill-color: #fff !important;*/
}
/*https://velog.io/@docchi/input-%ED%83%9C%EA%B7%B8-%EC%9E%90%EB%8F%99%EC%99%84%EC%84%B1-%EC%8B%9C-%EB%B0%B0%EA%B2%BD%EC%83%89-%EB%B3%80%EA%B2%BD*/






.gender-selection {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    height: fit-content;
    padding: 0;
}

.gender-selection input[type="radio"] {
    appearance: none;
    width: 100%;
    height: 35px;
    border: 2px solid var(--subtle);
}

.gender-selection label {
    position: absolute;
    top: 3px;
    left: 0;
    align-items: center; /* 텍스트와 라디오 버튼이 수직 가운데 정렬 */
    /*padding-left: 30px; !* 라디오 버튼이 들어갈 공간 확보 *!*/
    height: 38px;
    width: 100%;
    text-align: center;
    color: #686868;
    font-weight: bold;
}


.gender-selection input[type="radio"]:focus,
.gender-selection input[type="radio"]:hover,
.gender-selection input[type="radio"]:checked {
    border-color: var(--hover);
    background-color: var(--subtle);
}

.gender-selection input[type="radio"]:focus + label,
.gender-selection input[type="radio"]:hover + label,
.gender-selection input[type="radio"]:checked + label {
    color: white !important;
}

.sex-box {
    width: 100%;
    margin: 0;
}

.gender-selection .error-msg {
    top: 35px;
}





input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: inner-spin-button !important;
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
}




#roadFullAddr {
    /*font-size: 14px;*/
    height: fit-content;
}

#roadAddressBox > div {
    border: 2px solid black;
    border-radius: 12px;
    /*outline: #6f42c1 solid 3px;*/
    width: 100%;
}

#roadAddressBox input:nth-child(1)
{
    border-width: 0 0 0 0;
    border-radius: 0;
    outline: none;
    width: 90%;
    background-color: transparent;
}

#roadFullAddr,
#detailAddress {
    border-width: 0;
    outline: none;
}

hr {
    margin: 0;
}

/*주소 찾기 버튼 */
.roadFullAddr {
    position: absolute;
    top: 3px;
    left: 310px;
    display: inline;
    width: 10%;
    border-style: none;
    background: url("../assets/img/material/address-icon.svg") no-repeat center;
    background-size: 90%;
    opacity: 0.6;

    aspect-ratio: 1/1;
    border-radius: 100%;
    /*outline: 3px solid var(--subtle);*/
}

.pwEye {
    position: absolute;
    top: 3px;
    left: 310px;
    display: inline;
    width: 10%;
    border-style: none;
    background: url("../assets/img/material/eye.svg") no-repeat center;
    background-size: 90%;
    opacity: 0.6;

    aspect-ratio: 1/1;
    border-radius: 100%;
    /*outline: 3px solid var(--subtle);*/
}

.roadFullAddr:hover,
.roadFullAddr:focus {
    /*border: 2px solid #4c91ff;*/
    /*outline: 3px solid #006363;*/
    background-color: var(--hover);

    opacity: 0.5;
}


.invalid-input,
.invalid-input::placeholder {
    /*background-color: #ffb9b9;*/
    border-color: var(--invalid-color) !important;
    color: var(--invalid-color);;
}

.error-msg {
    position: absolute;
    top: 40px;
    left: 5px;
    margin: 1px 0 0 0;
    border-style: none;
    padding: 0;
    color: var(--invalid-color);
    font-size: 12px;
}

#roadAddressBox > div.error-msg {
    position: absolute;
    top: 82px;
    left: 5px;
    margin: 1px 0 0 0;
    border-style: none;
    padding: 0;
    color: var(--invalid-color);
    font-size: 12px;
}


/*#roadAddressBox {*/
/*    margin: 45px 0 10px 25px ;*/
/*}*/


button[type="submit"] {
    width: 100%;
    border-radius: 10px
}

button[type="submit"]:hover {
    width: 100%;
    border-radius: 10px;
    outline: 2px solid var(--hover);
}


a {
    font-size: 14px;
    color: darkgray !important;
}

#starter-section > div:nth-child(2) > a:hover {
    text-decoration: underline;
}


#footer > div {
    padding-bottom: 0;
    padding-top: 0;
    margin-bottom: 0;
}

#footer {
    padding-bottom: 0;
}