@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap');

body {
    font-family: 'Poppins', sans-serif;
    background: #ececec;
    display: flex;
    justify-content: center;
    align-items: flex-start; /* ← 중앙 대신 위쪽 정렬로 변경 */
    min-height: 100vh;       /* ← 최소 높이만 지정 (고정 높이 제거) */
    margin: 0;
    overflow-y: auto;         /* ← 내용이 넘치면 스크롤 허용 */
}

.form-box {
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    padding: 40px;
    width: 500px;
    margin: 40px 0;           /* 화면 상단/하단 여백 추가 */
}

.container {
    width: 100%;
    display: flex;
    justify-content: center;
}

label {
    display: block;
    margin-top: 10px;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="date"] {
    width: 90%;
    padding: 8px;
    margin-top: 5px;
    border: 1.5px solid #007bff;
    border-radius: 5px;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="date"]:focus {
    border-color: #0056b3;
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}

input[type="submit"] {
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
    padding: 10px;
    width: 100%;
    cursor: pointer;
}

a {
    color: gray;
}
a:hover,
a:visited,
a:active {
    color: gray;
}

@media only screen and (max-width: 768px) {
    .form-box {
        width: 90%;          /* 모바일에서는 화면 폭에 맞게 */
        padding: 20px;
        margin: 20px 0;
    }
}