@charset "utf-8";

.basic-outlogin label { line-height:12px; font-weight: normal; cursor: pointer; }
.basic-outlogin .profile .photo img { width:60px; height:60px; border-radius: 50%; border:0; }
.basic-outlogin .form-group { margin-bottom:10px; }


/* 로그인 전 화면 --------------------------------------------------- */
/* 커스텀 로그인 창 */
#illuwa_outlogin {
    font-size: 14px;
}
#illuwa_outlogin * {
    font-size: inherit;
}

#illuwa_outlogin .ik_input_box {
    display: grid; grid-template-columns: 2.2fr 1fr;
    gap:1em 1.3em; margin-bottom: 1.57em;
}
#illuwa_outlogin .ik_input_box input {
    padding: 1em; height: auto; line-height: 1;
    border-color: #dcdcdc;
    border-radius: 10px !important;
}

/* 자동로그인 */
.auto-login {
    place-self: center;
}
/* 기존의 라디오 버튼을 숨깁니다. */
.auto-login input {
    display: none;
}
.auto-login .auto-item {
    display: flex; align-items: center;
    gap:0.5em; color: #535353;
    margin-bottom: 0;
}
.auto-login .auto-item .circle {
    display: inline-block;
    position: relative;
    width: 1.71em;
    height: 1.71em;
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
}
.auto-login .auto-item .circle:before {
    content: '';
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform:translate(-50%,-50%);
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 1px solid var(--grid-item-border-color);
}
/* 선택된 라디오 버튼에 대한 라벨의 스타일을 정의합니다. */
.auto-login input:checked + .auto-item .circle:after {
    content: '';
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform:translate(-50%,-50%);
    width: calc(100% - 10px);
    height: calc(100% - 10px);
    border-radius: 50%;
    background-color: #b0b0b0;
}

/* 로그인 버튼 */
#illuwa_outlogin .ik_input_box .btn_item {
    font-size: 1.28em;
}
#illuwa_outlogin .ik_input_box .btn_item button {
    background: #626262; color: #fff;
    width: 100%; height: 100%; border-radius: 10px;
}

/* 아이디 찾기 ~ 회원가입 */
#illuwa_outlogin .link_box {
    text-align: center;
}
#illuwa_outlogin .link_box * {
    color: #626262;
}

/* 로그인 후 화면 --------------------------------------------------- */
#illuwa_outlogin .profile {
    display: flex; justify-content: space-between;
    padding-bottom: 1em;
}
#illuwa_outlogin .profile_box {
    display: flex; align-items: center;
    gap:1.2em; padding-left: 0.8em;
}
#illuwa_outlogin .profile_box .mb_nick {
    font-size: 1.14em; color: #313131; font-weight: bold;
    margin-bottom: 0.5em;
}
#illuwa_outlogin .profile_box .mb_name {
    font-size: 1.07em; color: #313131;
}
#illuwa_outlogin .logout {
    margin-top: 0.5em; margin-right: 0.5em;
}
#illuwa_outlogin .logout a {
    font-size: 1.07em; color: #313131;
    display: flex; align-items: center;
    border-bottom: 3px solid #c9c9c9;
    gap:0.3em; padding-bottom: 0.2em;
}
#illuwa_outlogin .logout svg { 
    width: 24px; color: #595657;
}

#illuwa_outlogin .user_interactions {
    border-top: 2px solid #aaa;
    border-bottom: 1px solid #dcdcdc;
    margin: 0 calc(var(--grid-item-padding) * -1);
    margin-bottom: 1.2em;
}
#illuwa_outlogin .user_interactions ul {
    display: flex; width: 100%;
    font-size: 1.07em; color: #535353;
}
#illuwa_outlogin .user_interactions ul > li {
    flex:1;
}
#illuwa_outlogin .user_interactions ul > li:not(:last-child) {
    border-right: 1px solid #dcdcdc;
}
#illuwa_outlogin .user_interactions ul > li > a {
    display: block; color: inherit; background: #f8f8f8;
    text-align: center; padding: 1em 0;
}

#illuwa_outlogin .login-line {
    display: flex; justify-content: end;
}
#illuwa_outlogin .login-line > ul {
    display: flex; gap:0.6em;
}
#illuwa_outlogin .login-line > ul > li > a {
    border: 1px solid #c9c9c9; border-radius: 2em;
    display: flex; align-items: center; gap:0.3em;
    min-width: 8em; justify-content: center;
    color: #535353; padding: 0.4em 0;
}
#illuwa_outlogin .login-line > ul > li.jeongbo_sujeong > a {
    border-color: transparent; background: #434343;
    color: #fff;
}

#illuwa_outlogin .login-line svg {
    width: 20px; 
}

@media (max-width:480px) {
    #illuwa_outlogin .profile_box {
        padding-left: 0;
    }
    #illuwa_outlogin .logout {
        margin-right: 0;
    }
    #illuwa_outlogin .login-line > ul {
        flex-wrap: wrap;
    }
}