@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Noto+Sans+KR:wght@400;500;600;700&display=swap');

:root {--brand:#e5bf28;--ink:#151713;--paper:#f7f6f1;--page:#e9e7df;--muted:#777b73;--line:#dedfd9;}
html,body {min-height:100%;}
body {margin:0;background:var(--page);font-family:'Inter','Noto Sans KR',sans-serif;font-size:16px;color:var(--ink);overflow-x:hidden;}
button,input {font:inherit;}

#ansol_login {position:relative;display:grid;box-sizing:border-box;min-height:100vh;min-height:100dvh;place-items:center;padding:32px;background:radial-gradient(circle at var(--pointer-x,50%) var(--pointer-y,50%),#f6f4ec 0,#e9e7df 48%,#dfddd5 100%);overflow:hidden;}
#login_visual {position:absolute;inset:0;pointer-events:none;}
#login_visual:before {position:absolute;top:-12%;left:-7%;width:38vw;min-width:420px;aspect-ratio:1;border:1px solid rgba(21,23,19,.06);border-radius:50%;content:"";}
#login_visual:after {position:absolute;right:-8%;bottom:-22%;width:46vw;min-width:480px;aspect-ratio:1;border:1px solid rgba(21,23,19,.055);border-radius:50%;content:"";}

#login_shell {position:relative;z-index:2;display:grid;box-sizing:border-box;width:min(1180px,100%);min-height:min(720px,calc(100dvh - 64px));grid-template-columns:56% 44%;border:1px solid rgba(21,23,19,.08);border-radius:32px;background:#fff;box-shadow:0 34px 100px rgba(31,32,27,.16);overflow:hidden;animation:shellIn .7s cubic-bezier(.2,.75,.2,1) both;}
#portal_intro {position:relative;display:flex;box-sizing:border-box;min-width:0;flex-direction:column;justify-content:space-between;padding:42px;background:var(--brand);overflow:hidden;}
#portal_intro:before {position:absolute;right:-120px;bottom:-170px;width:520px;height:520px;border:1px solid rgba(21,23,19,.14);border-radius:50%;box-shadow:0 0 0 74px rgba(21,23,19,.035),0 0 0 148px rgba(21,23,19,.025);content:"";}
#portal_intro:after {position:absolute;inset:0;background-image:radial-gradient(rgba(21,23,19,.2) .65px,transparent .65px);background-size:7px 7px;mask-image:linear-gradient(145deg,transparent 12%,#000 70%);content:"";opacity:.28;pointer-events:none;}
#login_brand {position:relative;z-index:3;display:flex;align-items:center;justify-content:space-between;}
#login_brand img {display:block;width:252px;max-width:62%;height:auto;}
#login_brand span {color:rgba(21,23,19,.6);font-size:10px;font-weight:700;letter-spacing:.14em;}
#portal_symbol {position:relative;z-index:2;width:clamp(220px,25vw,330px);aspect-ratio:1;margin:auto;overflow:hidden;transform:translate3d(calc(var(--move-x,0) * 8px),calc(var(--move-y,0) * 8px),0);transition:transform .45s cubic-bezier(.2,.8,.2,1);}
#portal_symbol img {display:block;width:auto;max-width:none;height:100%;}
#portal_footer {position:relative;z-index:3;display:flex;align-items:center;justify-content:space-between;color:rgba(21,23,19,.64);font-size:10px;font-weight:700;letter-spacing:.14em;}

#login_panel {display:flex;box-sizing:border-box;min-width:0;align-items:center;justify-content:center;padding:72px clamp(42px,5vw,78px);background:var(--paper);}
#login_card,#login_card form,#login_fs,.login_field {box-sizing:border-box;min-width:0;}
#login_card {width:min(100%,400px);}
#login_card > span {display:block;margin-bottom:14px;color:#8e7619;font-size:11px;font-weight:750;letter-spacing:.18em;}
#login_card h1 {margin:0;color:var(--ink);font-size:clamp(38px,3.2vw,50px);font-weight:650;line-height:1.13;letter-spacing:-.055em;word-break:keep-all;}
#login_card > p {margin:15px 0 38px;color:var(--muted);font-size:15px;line-height:1.65;}
#login_fs {display:grid;gap:13px;margin:0;padding:0;border:0;}
.login_field {position:relative;}
.login_field label {position:absolute;z-index:2;top:19px;left:17px;color:#7d8179;font-size:15px;pointer-events:none;transform-origin:left top;transition:transform .2s ease,color .2s ease,font-size .2s ease;}
.login_field input {box-sizing:border-box;width:100%;height:62px;padding:24px 50px 7px 17px;border:1px solid var(--line);border-radius:12px;outline:0;color:var(--ink);background:#fff;font-size:16px;transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease;}
.login_field input:focus {border-color:#998019;box-shadow:0 0 0 4px rgba(229,191,40,.16);transform:translateY(-1px);}
.login_field:focus-within label,.login_field.has-value label {color:#8e7416;font-size:11px;transform:translateY(-9px);}
#login_password_toggle {position:absolute;z-index:3;top:50%;right:12px;width:38px;height:38px;border:0;border-radius:9px;color:#757a71;background:transparent;font-size:0;cursor:pointer;transform:translateY(-50%);}
#login_password_toggle:before,#login_password_toggle:after {position:absolute;top:50%;left:50%;content:"";transform:translate(-50%,-50%);}
#login_password_toggle:before {width:18px;height:12px;border:1.5px solid currentColor;border-radius:50%;}
#login_password_toggle:after {width:5px;height:5px;border:1.5px solid currentColor;border-radius:50%;background:#fff;}
#login_password_toggle[aria-pressed="true"]:before {width:19px;height:1px;border:0;border-radius:0;background:currentColor;transform:translate(-50%,-50%) rotate(-42deg);}
#login_password_toggle[aria-pressed="true"]:after {display:none;}
#login_password_toggle:hover,#login_password_toggle:focus-visible {color:var(--ink);background:#f0f1ed;outline:0;}
#login_submit {position:relative;display:flex;width:100%;height:60px;align-items:center;justify-content:space-between;margin-top:4px;padding:0 16px 0 21px;border:0;border-radius:12px;color:#fff;background:var(--ink);font-size:15px;font-weight:700;cursor:pointer;overflow:hidden;transition:transform .22s ease,background .22s ease,box-shadow .22s ease;}
#login_submit i {position:relative;width:30px;height:30px;border-radius:50%;color:var(--ink);background:var(--brand);font-style:normal;line-height:28px;transition:transform .22s ease;}
#login_submit:hover {background:#272923;box-shadow:0 13px 28px rgba(21,23,19,.18);transform:translateY(-2px);}
#login_submit:hover i {transform:translateX(3px);}
#login_submit:focus-visible {outline:3px solid rgba(21,23,19,.2);outline-offset:3px;}
#login_submit:disabled {cursor:wait;opacity:.8;transform:none;}
#login_account {display:flex;box-sizing:border-box;min-height:62px;align-items:center;justify-content:space-between;padding:13px 17px;border:1px solid var(--line);border-radius:12px;background:#fff;}
#login_account span {color:var(--muted);font-size:13px;}
#login_account strong {max-width:65%;color:var(--ink);font-size:16px;font-weight:700;text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
#login_back {display:block;margin-top:20px;color:#777b73;font-size:13px;line-height:1.5;text-align:center;text-decoration:none;transition:color .2s ease;}
#login_back:hover,#login_back:focus-visible {color:var(--ink);outline:0;text-decoration:underline;text-underline-offset:4px;}
#login_help {margin:22px 0 0!important;color:#8a8e86!important;font-size:13px!important;line-height:1.5!important;text-align:center;}
#login_error_note {display:none;margin:0 0 14px!important;padding:11px 13px;border:1px solid #ead0d0;border-radius:10px;color:#a14242!important;background:#fff5f5;font-size:13px!important;}
#login_card #sns_login {margin:20px 0 0!important;padding:18px 0 0!important;border:0!important;border-top:1px solid var(--line)!important;background:transparent!important;}
#mb_login_notmb,#mb_login_od_wr {width:min(100% - 32px,560px);margin:30px auto;padding:24px;border-radius:16px;color:#222;background:#fff;}

@keyframes shellIn {from{opacity:0;transform:translateY(16px) scale(.985)}to{opacity:1;transform:none}}

@media (max-width:900px) {
    #ansol_login {display:block;padding:18px;background:linear-gradient(145deg,#f2f0e8 0,#e5e2d9 100%);overflow:auto;}
    #login_shell {display:flex;min-height:calc(100dvh - 36px);flex-direction:column;border-radius:26px;}
    #portal_intro {min-height:206px;padding:30px;}
    #login_brand img {width:220px;}
    #portal_symbol {position:absolute;right:24px;bottom:-66px;width:245px;margin:0;opacity:.72;}
    #portal_footer {margin-top:auto;}
    #login_panel {flex:1;padding:52px 32px 58px;}
}

@media (max-width:520px) {
    #ansol_login {padding:0;background:var(--paper);}
    #login_visual {display:none;}
    #login_shell {width:100%;min-height:100dvh;border:0;border-radius:0;box-shadow:none;animation:none;}
    #portal_intro {min-height:138px;padding:23px 22px 18px;justify-content:flex-start;}
    #portal_intro:before {right:-76px;bottom:-170px;width:270px;height:270px;box-shadow:0 0 0 38px rgba(21,23,19,.035),0 0 0 76px rgba(21,23,19,.025);}
    #portal_intro:after {background-size:8px 8px;opacity:.18;}
    #login_brand img {width:190px;max-width:70%;}
    #login_brand span {display:none;}
    #portal_symbol {right:-18px;bottom:-57px;width:150px;opacity:.6;}
    #portal_footer {margin-top:auto;font-size:9px;letter-spacing:.12em;}
    #portal_footer span:first-child {display:block;}
    #portal_footer span:last-child {display:none;}
    #login_panel {align-items:flex-start;padding:42px 22px 38px;background:#fff;}
    #login_card {width:100%;max-width:400px;}
    #login_card > span {margin-bottom:10px;font-size:10px;}
    #login_card h1 {font-size:34px;line-height:1.18;letter-spacing:-.045em;}
    #login_card > p {margin:12px 0 30px;font-size:15px;line-height:1.6;}
    #login_fs {gap:12px;}
    .login_field input {height:60px;}
    #login_submit {height:58px;margin-top:2px;}
    #login_help {margin-top:19px!important;}
    #login_back {margin-top:18px;}
}

@media (max-width:360px) {
    #portal_intro {min-height:126px;padding:20px 18px 16px;}
    #login_brand img {width:174px;}
    #portal_symbol {right:-22px;bottom:-51px;width:132px;}
    #login_panel {padding:34px 18px 30px;}
    #login_card h1 {font-size:31px;}
}

@media (prefers-reduced-motion:reduce) {
    #login_shell {animation:none!important;}
    #portal_symbol {transform:none!important;}
    *,*:before,*:after {transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important;}
}