@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.css');

:root {
    --login-bg:#f2f4f6;
    --login-card:#ffffff;
    --login-text:#191f28;
    --login-sub:#8b95a1;
    --login-line:#e5e8eb;
    --login-input:#f5f6f8;
    /*--login-primary:#fee500;
    --login-primary-active:#f5dc00;*/
    --login-primary:hsl(170, 76%, 45%);
    --login-primary-active:#2ecc70;
    --login-focus:#3182f6;
}

* {
    box-sizing:border-box;
    -webkit-tap-highlight-color:transparent;
}

html,
body,
#f {
    width:100%;
    min-height:100%;
    margin:0;
}

html,
body {
    background:var(--login-bg);
    font-family:'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Malgun Gothic', sans-serif;
    color:var(--login-text);
}

body {
    overflow-x:hidden;
}

button,
input,
a {
    font-family:inherit;
}

.blind {
    position:absolute !important;
    width:1px !important;
    height:1px !important;
    padding:0 !important;
    margin:-1px !important;
    overflow:hidden !important;
    clip:rect(0, 0, 0, 0) !important;
    white-space:nowrap !important;
    border:0 !important;
}

#block-div {
    position:relative;
    width:100%;
    min-height:100vh;
    min-height:100dvh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:40px 18px;
    overflow:hidden;
    isolation:isolate;
}

.login-bg {
    position:absolute;
    z-index:-1;
    border-radius:999px;
    pointer-events:none;
    filter:blur(1px);
}

.login-bg-one {
    width:240px;
    height:240px;
    top:-110px;
    right:-90px;
    background:rgba(254, 229, 0, 0.18);
}

.login-bg-two {
    width:280px;
    height:280px;
    left:-150px;
    bottom:-140px;
    background:rgba(49, 130, 246, 0.08);
}

#login-article {
    position:relative;
    z-index:1;
    width:100%;
    max-width:390px;
}

#login-card {
    width:100%;
    padding:42px 28px 30px;
    background:var(--login-card);
    border:1px solid rgba(229, 232, 235, 0.78);
    border-radius:26px;
    box-shadow:0 18px 50px rgba(25, 31, 40, 0.08);
}

.login-header {
    margin-bottom:30px;
}

.login-logo {
    margin:0 0 30px;
    padding:0;
    line-height:1;
}

.login-logo img {
    display:block;
    width:auto;
    height:29px;
    max-width:100%;
    object-fit:contain;
}

.login-heading {
    margin:0;
}

.greeting-title {
    margin:0 0 7px;
    color:var(--login-text);
    font-size:24px;
    font-weight:750;
    line-height:1.35;
    letter-spacing:-0.035em;
}

.greeting-sub {
    margin:0;
    color:var(--login-sub);
    font-size:15px;
    font-weight:400;
    line-height:1.55;
    letter-spacing:-0.02em;
}

#login-article fieldset {
    min-width:0;
    margin:0;
    padding:0;
    border:0;
}

.input-div {
    position:relative;
    width:100%;
    margin-bottom:12px;
}

.login-input {
    display:block;
    width:100%;
    height:58px;
    margin:0;
    padding:23px 16px 7px;
    border:1.5px solid transparent;
    border-radius:14px;
    outline:0;
    background:var(--login-input);
    color:var(--login-text);
    font-size:16px;
    font-weight:500;
    line-height:1.2;
    caret-color:var(--login-focus);
    transition:border-color .16s ease, background-color .16s ease, box-shadow .16s ease;
    -webkit-appearance:none;
    appearance:none;
}

.login-input::placeholder {
    color:transparent;
}

.login-input:hover {
    background:#f0f2f4;
}

.login-input:focus {
    border-color:var(--login-focus);
    background:#fff;
    box-shadow:0 0 0 3px rgba(49, 130, 246, 0.10);
}

.field-label {
    position:absolute;
    top:18px;
    left:16px;
    z-index:1;
    color:var(--login-sub);
    font-size:15px;
    font-weight:450;
    line-height:1;
    letter-spacing:-0.02em;
    pointer-events:none;
    transform-origin:left top;
    transition:top .16s ease, color .16s ease, font-size .16s ease;
}

.login-input:focus + .field-label,
.login-input:not(:placeholder-shown) + .field-label {
    top:9px;
    color:var(--login-focus);
    font-size:11px;
    font-weight:600;
}

.login-input:not(:focus):not(:placeholder-shown) + .field-label {
    color:var(--login-sub);
}

.action-area {
    margin-top:28px;
}

.login-btn {
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    min-height:54px;
    padding:14px 18px;
    border:0;
    border-radius:15px;
    text-align:center;
    text-decoration:none;
    font-size:16px;
    font-weight:750;
    line-height:1.2;
    letter-spacing:-0.025em;
    cursor:pointer;
    user-select:none;
    transition:transform .08s ease, background-color .15s ease, box-shadow .15s ease;
}

.login-btn.log {
    margin:0 0 10px;
    background:var(--login-primary);
    color:var(--login-text);
    box-shadow:0 8px 18px rgba(254, 229, 0, 0.20);
}

.login-btn.log:hover {
    background:var(--login-primary-active);
}

.login-btn.join {
    background:#f2f4f6;
    color:var(--login-text);
}

.login-btn.join:hover {
    background:#e9ecef;
}

.login-btn:active {
    transform:scale(.985);
}

.login-btn:focus-visible,
.login-btn2:focus-visible {
    outline:3px solid rgba(49, 130, 246, .25);
    outline-offset:3px;
}

.find-account {
    margin-top:20px;
    text-align:center;
}

.login-btn2 {
    display:inline-block;
    padding:6px 8px;
    color:var(--login-sub);
    font-size:13px;
    font-weight:500;
    line-height:1.4;
    letter-spacing:-0.015em;
    text-decoration:none;
}

.login-btn2:hover {
    color:#4e5968;
    text-decoration:underline;
    text-underline-offset:3px;
}

.login-copyright {
    margin:18px 0 0;
    color:#a3abb4;
    font-size:12px;
    font-weight:400;
    line-height:1.5;
    text-align:center;
    letter-spacing:-0.015em;
}

@media (max-width:480px) {
    #block-div {
        align-items:stretch;
        padding:0;
        background:#fff;
    }

    .login-bg {
        display:none;
    }

    #login-article {
        display:flex;
        flex-direction:column;
        justify-content:center;
        max-width:none;
        min-height:100vh;
        min-height:100dvh;
    }

    #login-card {
        padding:42px 24px 34px;
        border:0;
        border-radius:0;
        box-shadow:none;
    }

    .login-copyright {
        padding:0 24px 24px;
    }
}

@media (max-width:360px) {
    #login-card {
        padding-right:20px;
        padding-left:20px;
    }

    .greeting-title {
        font-size:22px;
    }
}

@media (max-height:650px) {
    #block-div {
        align-items:flex-start;
        padding-top:24px;
        padding-bottom:24px;
    }

    #login-card {
        padding-top:30px;
        padding-bottom:26px;
    }

    .login-logo {
        margin-bottom:22px;
    }

    .login-header {
        margin-bottom:24px;
    }
}