@charset "utf-8";

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
li{
    list-style: none;
}
a{
    text-decoration: none;
    color: inherit;
}

.form{
    max-width: 800px;
    width: calc(100% - 40px);
    margin: 50px auto;
    border: 1px solid #333;
    padding: 20px;
}
.form .box label{
    display: block;
}

.form .box input[type="text"],
.form .box input[type="password"]{
    width: 100%;
    height: 50px;
    padding: 0 20px;
    font-size: 20px;
}

.form .box input::placeholder{
    font-size: 14px;
    color: rgb(255, 117, 230);
}

.form .box input:focus{
    /* outline: 1px solid rgb(255, 117, 230);
    border: 0; */
    outline: none;
    border: 3px dashed rgb(255, 117, 230);
    box-shadow: 0 0 10px rgb(255, 117, 230);
    
}

.form .check ul{
    display: flex;
    gap: 12px;
}
.form .check ul li input{
    display: none; /* 체크박스 없애기 */
}
.form .check ul li input:checked + label{
    border: 1px solid rgb(255, 117, 230);
}
.form .check ul li label{
    height: 40px;
    padding: 0 20px;
    border: 1px solid #ccc;
    border-radius: 40px;
}