html, body {
    height: 100vh;
    /*background-image: url(img/background-pc.jpg?v=1);*/
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow-y: hidden;
}

* {
    font-family: Pretendard, sans-serif;
    letter-spacing: -1px;
    font-size: 1.1rem;
    line-height: 1.4;
}

.is-center-position {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

div.content {
    width: 100vw;
}

div.greeting {
    text-align: center;
    max-width: 1400px;
    width: 100%;
}

    div.greeting img.logo {
        display: inline-block;
        width: 100%;
        max-width: 19rem;
    }

    div.greeting p.sub-title {
        margin-top: 1rem;
        font-size: 1.4rem;
        font-weight: 700;
        letter-spacing: -1px;
    }

    div.greeting p.title {
        color: #fe9c00;
        font-size: 3rem;
        font-weight: 900;
        margin: 0.5rem 0;
    }

    div.greeting p.subtitle, div.greeting p.subtitle span {
        color: #6d6d6d;
        font-size: 1.25rem;
        font-weight: 400;
    }



    div.greeting div.badge {
        margin: 0.5rem 0;
        padding: 2rem 0;
        background-color: #f9f9f9;
        border-radius: 1rem;
        display: inline-flex;
        max-width: 1280px;
        width: 100%;
        align-items: center;
    }

        div.greeting div.badge div.logo {
            width: 550px;
            flex: 0 0 500px; /* grow=0, shrink=0, basis=500px → 고정 */
        }

        div.greeting div.badge div.notice {
            text-align: left;
            flex: 1 1 auto; /* 남은 공간 모두 사용 */
            min-width: 0; /* 긴 내용 overflow 방지*/
        }

            div.greeting div.badge div.notice span.dot {
                font-size: 0.8rem;
                margin-right: 0.5rem;
            }

.is-bold {
    font-weight: 600 !important;
}

.is-red {
    color: #f8496c !important;
}

.is-orange {
    color: #fe9c00 !important;
}



div.loading img {
    display: block;
    margin: 0 auto;
    width: 100%;
}

    div.loading img.logo {
        max-width: 16rem;
    }

    div.loading img.loading {
        max-width: 4rem;
    }

button.register {
    background-color: #fe9c00;
    font-size: 1.7rem;
    font-weight: 600;
    color: white;
    border: none;
    border-radius: 1rem;
    padding: 1rem 3.5rem;
    cursor: pointer;
    margin: 0.5rem 0;
}


.is-mobile-only {
    display: inline-block !important;
}

.is-desktop-only {
    display: none !important;
}


/* mobile scaling */
@media only screen and (max-width: 1024px) {

    div.content {
        width: 720px;
    }

    .is-mobile-only {
        display: inline-block !important;
    }

    .is-desktop-only {
        display: none !important;
    }



    div.greeting p.title {
        color: #fe9c00;
        font-size: 2.5rem;
        font-weight: 900;
        margin: 0.5rem 0;
    }

    div.greeting p.subtitle, div.greeting p.subtitle span {
        color: #6d6d6d;
        font-size: 1.1rem;
        font-weight: 400;
    }

    div.greeting div.badge {
        margin: 0.5rem 0;
        padding: 2rem 0;
        background-color: #f9f9f9;
        border-radius: 1rem;
        display: block;
        width: 100%;
        align-items: center;
    }

        div.greeting div.badge div.logo {
            width: 100%;
            flex: none;
        }

        div.greeting div.badge div.notice {
            text-align: left;
            padding-left: 4rem;
            width: 100%;
            flex: none;
        }

            div.greeting div.badge div.notice span.dot {
                font-size: 0.8rem;
                margin-right: 0.5rem;
            }



    button.register {
        font-size: 1.5rem;
        font-weight: 600;
        padding: 1rem 3rem;
        margin: 0.5rem 0;
    }
}

@media only screen and (max-width: 720px) {
    div.content {
        transform: translate(-50%, -50%) scale(calc(700/720.0));
    }
}


@media only screen and (max-width: 700px) {
    div.content {
        transform: translate(-50%, -50%) scale(calc(700/720.0));
    }
}

@media only screen and (max-width: 680px) {
    div.content {
        transform: translate(-50%, -50%) scale(calc(680/720.0));
    }
}

@media only screen and (max-width: 660px) {
    div.content {
        transform: translate(-50%, -50%) scale(calc(660/720.0));
    }
}

@media only screen and (max-width: 640px) {
    div.content {
        transform: translate(-50%, -50%) scale(calc(640/720.0));
    }
}

@media only screen and (max-width: 620px) {
    div.content {
        transform: translate(-50%, -50%) scale(calc(620/720.0));
    }
}

@media only screen and (max-width: 600px) {
    div.content {
        transform: translate(-50%, -50%) scale(calc(600/720.0));
    }
}

@media only screen and (max-width: 580px) {
    div.content {
        transform: translate(-50%, -50%) scale(calc(580/720.0));
    }
}

@media only screen and (max-width: 560px) {
    div.content {
        transform: translate(-50%, -50%) scale(calc(560/720.0));
    }
}

@media only screen and (max-width: 540px) {
    div.content {
        transform: translate(-50%, -50%) scale(calc(540/720.0));
    }
}

@media only screen and (max-width: 520px) {
    div.content {
        transform: translate(-50%, -50%) scale(calc(520/720.0));
    }
}

@media only screen and (max-width: 500px) {
    div.content {
        transform: translate(-50%, -50%) scale(calc(500/720.0));
    }
}

@media only screen and (max-width: 480px) {
    div.content {
        transform: translate(-50%, -50%) scale(calc(480/720.0));
    }
}

@media only screen and (max-width: 460px) {
    div.content {
        transform: translate(-50%, -50%) scale(calc(460/720.0));
    }
}

@media only screen and (max-width: 440px) {
    div.content {
        transform: translate(-50%, -50%) scale(calc(440/720.0));
    }
}

@media only screen and (max-width: 420px) {
    div.content {
        transform: translate(-50%, -50%) scale(calc(420/720.0));
    }
}

@media only screen and (max-width: 400px) {
    div.content {
        transform: translate(-50%, -50%) scale(calc(400/720.0));
    }
}

@media only screen and (max-width: 390px) {
    div.content {
        transform: translate(-50%, -50%) scale(calc(390/720.0));
    }
}

@media only screen and (max-width: 380px) {
    div.content {
        transform: translate(-50%, -50%) scale(calc(380/720.0));
    }
}

@media only screen and (max-width: 370px) {
    div.content {
        transform: translate(-50%, -50%) scale(calc(370/720.0));
    }
}

@media only screen and (max-width: 360px) {
    div.content {
        transform: translate(-50%, -50%) scale(calc(360/720.0));
    }
}

@media only screen and (max-width: 350px) {
    div.content {
        transform: translate(-50%, -50%) scale(calc(350/720.0));
    }
}

@media only screen and (max-width: 340px) {
    div.content {
        transform: translate(-50%, -50%) scale(calc(340/720.0));
    }
}

@media only screen and (max-width: 330px) {
    div.content {
        transform: translate(-50%, -50%) scale(calc(330/720.0));
    }
}

@media only screen and (max-width: 320px) {
    div.content {
        transform: translate(-50%, -50%) scale(calc(320/720.0));
    }
}

@media only screen and (max-width: 310px) {
    div.content {
        transform: translate(-50%, -50%) scale(calc(310/720.0));
    }
}

@media only screen and (max-width: 300px) {
    div.content {
        transform: translate(-50%, -50%) scale(calc(300/720.0));
    }
}

@media only screen and (max-width: 290px) {
    div.content {
        transform: translate(-50%, -50%) scale(calc(290/720.0));
    }
}

@media only screen and (max-width: 280px) {
    div.content {
        transform: translate(-50%, -50%) scale(calc(280/720.0));
    }
}

@media only screen and (max-width: 270px) {
    div.content {
        transform: translate(-50%, -50%) scale(calc(270/720.0));
    }
}

@media only screen and (max-width: 260px) {
    div.content {
        transform: translate(-50%, -50%) scale(calc(260/720.0));
    }
}

@media only screen and (max-width: 250px) {
    div.content {
        transform: translate(-50%, -50%) scale(calc(250/720.0));
    }
}

@media only screen and (max-width: 240px) {
    div.content {
        transform: translate(-50%, -50%) scale(calc(240/720.0));
    }
}

@media only screen and (max-width: 230px) {
    div.content {
        transform: translate(-50%, -50%) scale(calc(230/720.0));
    }
}

@media only screen and (max-width: 220px) {
    div.content {
        transform: translate(-50%, -50%) scale(calc(220/720.0));
    }
}

@media only screen and (max-width: 210px) {
    div.content {
        transform: translate(-50%, -50%) scale(calc(210/720.0));
    }
}

@media only screen and (max-width: 200px) {
    div.content {
        transform: translate(-50%, -50%) scale(calc(200/720.0));
    }
}

@media only screen and (max-width: 190px) {
    div.content {
        transform: translate(-50%, -50%) scale(calc(190/720.0));
    }
}

@media only screen and (max-width: 180px) {
    div.content {
        transform: translate(-50%, -50%) scale(calc(180/720.0));
    }
}

@media only screen and (max-width: 170px) {
    div.content {
        transform: translate(-50%, -50%) scale(calc(170/720.0));
    }
}

@media only screen and (max-width: 160px) {
    div.content {
        transform: translate(-50%, -50%) scale(calc(160/720.0));
    }
}