body{
    font-family: Arial;
    margin:0;
    padding:0;
    background:#f7f7f7;
}

/* 가운데 박스 */
.container{
    max-width:420px;
    margin:40px auto;
    background:white;
    padding:25px;
    border-radius:10px;
    box-shadow:0 2px 10px rgba(0,0,0,0.1);
}

h2{
    text-align:center;
    margin-bottom:20px;
}

/* input 스타일 */
input{
    width:100%;
    padding:10px;
    margin-top:5px;
    margin-bottom:12px;
    border:1px solid #ccc;
    border-radius:5px;
    box-sizing:border-box;
}

/* 버튼 */
button{
    width:100%;
    padding:12px;
    border:none;
    background:#ff385c;
    color:white;
    border-radius:6px;
    font-size:15px;
    cursor:pointer;
}

button:hover {
    background-color: #3f51b5;
}

/* ===== 오른쪽 고정 박스 ===== */
.side-box{
    position:fixed;
    top:10px;
    left:10px;
}

.side-link{
    text-decoration:none;
    background:#333;
    color:white;
    padding:8px 12px;
    border-radius:5px;
}

.side-link:hover {
    background: #eeeeee;
}

/* ========== 중복 여부 체크 ============= */
.id-check-box{
    display:flex;
    gap:8px;
}

.id-check-box input{
    flex:1;
}

.id-check-box button{
    width:110px;
}

/* =========== 모바일 =========== */
@media (max-width:1024px){
	.container{
        margin:20px auto;   /* 좌우 가운데 유지 */
        padding:20px;
        width:90%;          /* 화면에 맞게 */
        max-width:420px;
    }

    h2{
        font-size:20px;
    }
}