#userLogin {
    .main-overwrap {
        position: fixed;
        top: 0;
        width: 100%;
        height: 100vh;
        background: linear-gradient(180deg,
                rgba(233, 242, 255, 1) 0%,
                rgba(255, 255, 255, 1) 100%);
        padding: 1.6rem 1.6rem 2rem 1.6rem;
        padding-bottom: calc(env(safe-area-inset-bottom) + 2rem);
        z-index: 100;
        overflow-y: auto;
    }

    .top {
        position: relative;
        top: 10%;
        text-align: center;

        .logo-img {
            width: 10rem;
        }
    }

    .mid,
    .mid * {
        box-sizing: border-box;
    }

    .mid {
        position: relative;
        top: 20%;
        text-align: center;

        .join-sns-tooltip {
            justify-self: center;
        }

        .anchor-group {
            display: grid;
            gap: 2rem;
            justify-content: center;
        }

        .login-kakao-anchor {
            background: #ffe600;
            border-radius: 10px;
            padding: 1.25rem 4rem;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            width: 32rem;

            .icon-24-px-kakao {
                flex-shrink: 0;
                width: 24px;
                height: 24px;
                position: relative;
                overflow: hidden;
            }

            .icon-logo {
                width: 24px;
                height: 21.82px;
                position: absolute;
                left: 0px;
                top: 1px;
                overflow: visible;
                aspect-ratio: 24/21.82;
            }
        }

        .div {
            color: var(--gray-02h4, #353535);
            text-align: center;
            font-family: var(--button-button02-font-family,
                    "Pretendard-Bold",
                    sans-serif);
            font-size: var(--button-button02-font-size, 16px);
            line-height: var(--button-button02-line-height, 18px);
            font-weight: var(--button-button02-font-weight, 700);
            position: relative;
            width: 16rem;
        }

        .login-naver-anchor {
            background: #03cf5d;
            border-radius: 10px;
            padding: 1.25rem 4rem;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            width: 32rem;

            .icon-24-px-kakao2 {
                flex-shrink: 0;
                width: 24px;
                height: 24px;
                position: relative;
                overflow: visible;
            }

            .div2 {
                color: var(--default-white, #ffffff);
                text-align: center;
                font-family: var(--button-button02-font-family,
                        "Pretendard-Bold",
                        sans-serif);
                font-size: var(--button-button02-font-size, 16px);
                line-height: var(--button-button02-line-height, 18px);
                font-weight: var(--button-button02-font-weight, 700);
                position: relative;
                width: 16rem;
            }
        }

        .login-apple-anchor {
            background: var(--default-white, #ffffff);
            border-radius: 10px;
            border-style: solid;
            border-color: var(--gray-05captioninfodisable, #949494);
            border-width: 1px;
            padding: 1.25rem 4rem;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            width: 32rem;
            cursor: pointer;

            .icon-24-px-apple {
                flex-shrink: 0;
                width: 24px;
                height: 24px;
                position: relative;
                overflow: visible;
            }
        }

        .login-google-anchor {
            background: var(--default-white, #ffffff);
            border-radius: 10px;
            border-style: solid;
            border-color: var(--gray-05captioninfodisable, #949494);
            border-width: 1px;
            padding: 1.25rem 4rem;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            width: 32rem;
            cursor: pointer;
        }

        .login-email-anchor {
            margin-top: 2rem;
            color: var(--gray-04captionlable, #707070);
            font-family: var(--button-textbuttonunderm14-font-family,
                    "Pretendard-Medium",
                    sans-serif);
            font-size: var(--button-textbuttonunderm14-font-size, 14px);
            line-height: var(--button-textbuttonunderm14-line-height, 16px);
            font-weight: var(--button-textbuttonunderm14-font-weight, 500);
            text-decoration: underline;
            cursor: pointer;
        }
    }
}