@charset "utf-8";

#inc01{position:relative}
#inc01 .wrap{align-items:stretch;gap:28px;height:375px}

/* link-calculator */
#inc01 .links{flex:1;display:grid;grid-template-columns:repeat(4, 1fr);gap:18px;height:100%}
#inc01 .links a{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:25px;border-radius:16px;border:1px solid #ddd;font-size:18px;font-weight:600;color:var(--secondary);background:#fff;transition:all .15s}

/* login box */
#inc01 .login-box{width:305px;padding:35px;border-radius:16px;border:1px solid #ddd}
#inc01 .login-box > p{font-size:22px;font-weight:700;color:var(--secondary)}

/* login 전 */
#inc01 .login-out{display:flex;flex-direction:column}
#inc01 .login-out .desc{white-space:pre-line;margin:12px 0 20px}
#inc01 .login-out .btns{gap:8px}
#inc01 .login-box .btns a{flex:1;color:var(--secondary);font-weight:500;text-align:center}
#inc01 .login-box .btns a .icon{display:flex;position:relative;height:75px;margin-bottom:10px;border-radius:8px;background:var(--surface-gray);transition:all .15s}
#inc01 .login-box .btns a .icon span{font-variation-settings:'wght' 300;margin:auto;font-size:32px}
#inc01 .login-btn{display:block;width:100%;height:48px;margin-top:auto;border-radius:8px;font-size:16px;font-weight:600;color:#fff;line-height:48px;text-align:center;background:var(--primary);transition:all .15s}

/* login 후 */
#inc01 .login-in .mb{justify-content:space-between;height:40px;padding:0 16px;margin:12px 0 20px;border-radius:8px;border:1px solid var(--primary-50);font-weight:600;color:var(--primary);line-height:38px;background:var(--surface-gray);transition:all .15s}
#inc01 .login-in .btns{gap:8px;align-items:flex-start}
#inc01 .login-in .btns a.month p{position:absolute;left:0;bottom:-3px;padding:2px 8px 2px 5px;border-radius:0 20px 20px 0;font-size:10px;font-weight:400;color:#fff;background:var(--primary)}

@media(hover:hover){
#inc01 .links a:hover{ border-color:var(--primary-50);transform:translate(-2px,-2px);color:var(--primary);box-shadow:4px 4px 16px var(--primary-10)}
#inc01 .login-box .btns a:hover .icon{color:var(--primary)}
#inc01 .login-btn:hover{background:var(--primary-hover)}
#inc01 .login-in .mb:hover{color:#fff;background:var(--primary)}
}