*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

.login-body {
    position: relative;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    --canvas-ratio: 1.6;
    --canvas-width: min(100vw, calc(100vh * var(--canvas-ratio)));
    --canvas-height: min(100vh, calc(100vw / var(--canvas-ratio)));
    font-family: Arial, sans-serif;
    /* 배경 이미지 */
    background-image: url("/Projects/Janggi/Resources/Loading/Loading_BG.webp");
    background-position: center center;
    background-repeat: no-repeat;
    /* PC에서는 이미지 전체 표시, 비율 유지 */
    background-size: contain;
}

/* 우측 로그인 영역 */

.login-wrap {

    position: absolute;

    right: max(10%, calc((100vw - var(--canvas-width)) / 2 + 16px));
    top: 50%;

    transform: translateY(-50%);

    width: min(380px, calc(var(--canvas-width) - 32px));
    max-height: calc(var(--canvas-height) - 32px);
    overflow: auto;

}

/* 검은 반투명 박스 */

.login-box {

    background: rgba(0, 0, 0, 0.65);

    backdrop-filter: blur(5px);

    padding: 40px;

    border-radius: 12px;

    color: white;

    box-shadow:
        0 0 30px rgba(0, 0, 0, .4);

}

.login-box h2 {

    margin-bottom: 25px;

    text-align: center;

}

.input-group {

    margin-bottom: 18px;

}

.input-group label {

    display: block;

    margin-bottom: 8px;

}

.input-group input {

    width: 100%;

    padding: 14px;

    border: none;

    border-radius: 6px;

    outline: none;

}

.button-area {

    display: flex;

    gap: 10px;

    margin-top: 20px;

}

.button-area button {

    flex: 1;

    padding: 14px;

    border: none;

    border-radius: 6px;

    cursor: pointer;

    font-size: 15px;

}

.login-btn {

    background: #3498db;
    color: white;

}

.close-btn {

    background: #444;
    color: white;

}

.signup {

    margin-top: 25px;

    text-align: center;

    opacity: .85;

    cursor: pointer;

}

.signup:hover {

    text-decoration: underline;

}

/* 모바일 대응 */

@media(max-width:768px) {

    .login-wrap {

        right: auto;

        left: 50%;

        transform:
            translate(-50%, -50%);

        width: min(90%, calc(var(--canvas-width) - 32px));

    }

}