/* ==========================================================================
   (주)투어수다 - 로그인 페이지 (skin/member/basic/login.skin.php)
   기존 그누보드 기본 스킨(.mbskin/#mb_login)의 박스 크기는 무력화하고,
   메인 사이트 로그인 팝업(css/gnb.css .suda-login-*)과 동일한 색상/버튼/입력창을 재사용한다.
   ========================================================================== */

#mb_login.mbskin{
    width: auto;
    max-width: 440px;
    margin: 0 auto;
    text-align: left;
}
#mb_login.mbskin .mbskin_box{ border: 0; background: none; }
#mb_login h1{
    position: absolute;
    font-size: 0;
    line-height: 0;
    overflow: hidden;
}

/* 관리자 로그인일 때만 노출되는 실제 보이는 타이틀(카드 위쪽) */
.suda-admin-login-title{
    margin: 0 auto 24px;
    text-align: center;
    font-size: 35px;
    font-weight: 700;
    color: var(--suda-gray-900, #111827);
}

.suda-member-card{
    background: #fff;
    border: 1px solid var(--suda-gray-200, #e5e7eb); /* SUDA CUSTOM (2026-10-24): 흰 배경에서 카드 구분 (gray-100 → 200) */
    border-radius: 24px;
    padding: 56px 48px;
    box-sizing: border-box;
    box-shadow: 0 4px 24px rgba(17,24,39,.06);
}
.suda-member-card + .suda-member-card{ margin-top: 24px; }

.suda-member-tabs{
    display: flex;
    gap: 8px;
    margin-bottom: 28px;
    border-bottom: 1px solid var(--suda-gray-100, #f3f4f6);
}
.suda-member-tab{
    flex: 1;
    text-align: center;
    padding: 0 0 14px;
    font-size: 16px;
    font-weight: 700;
    color: var(--suda-gray-400, #9ca3af);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    cursor: default;
}
a.suda-member-tab{ cursor: pointer; }
a.suda-member-tab:hover{ color: var(--suda-gray-700, #374151); }
.suda-member-tab.is-active{
    color: var(--suda-gray-900, #111827);
    border-bottom-color: var(--suda-blue, #4154ff);
}

#mb_login #login_fs .frm_input{ margin: 0; }

/* fieldset은 flex 컨테이너가 아니라서 gnb.css .suda-login-form의 flex gap이 적용되지 않는다.
   (모달 로그인은 form 바로 아래 .suda-login-field가 오지만, 이 페이지는 접근성을 위해
   fieldset으로 한 번 더 감싸져 있음) 그래서 여기서 명시적으로 간격을 지정한다. */
#mb_login #login_fs{ display: flex; flex-direction: column; padding: 0; }
#mb_login #login_fs .suda-login-field + .suda-login-field{ margin-top: 12px; }
#mb_login #login_fs .suda-login-submit{
    margin-top: 16px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 700;
}

.suda-member-login-info{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 16px;
    font-size: 13px;
}
.suda-member-login-info .login_if_lpl a{ color: var(--suda-gray-500, #6b7280); text-decoration: none; }
.suda-member-login-info .login_if_lpl a:hover{ color: var(--suda-blue, #4154ff); }
.suda-member-auto label{ font-size: 13px; color: var(--suda-gray-500, #6b7280); }

.suda-member-divider{
    position: relative;
    text-align: center;
    margin: 28px 0 20px;
}
.suda-member-divider::before{
    content: "";
    position: absolute;
    left: 0; right: 0; top: 50%;
    height: 1px;
    background: var(--suda-gray-100, #f3f4f6);
}
.suda-member-divider span{
    position: relative;
    display: inline-block;
    padding: 0 12px;
    background: #fff;
    font-size: 12px;
    color: var(--suda-gray-400, #9ca3af);
}

#mb_login #sns_login{
    margin: 0;
    border: 0;
    padding: 0;
}

#mb_login_notmb,
#mb_login_od_wr{
    max-width: 440px;
    margin: 24px auto 0;
}
#mb_login_notmb h2,
#mb_login_od_wr h2{
    font-size: 18px;
    font-weight: 700;
    color: var(--suda-gray-900, #111827);
    margin: 0 0 12px;
}
#mb_login_od_wr .frm_input{ margin-top: 10px; }
#mb_login_od_wr .btn_submit{ margin-top: 12px; height: auto; }

/* ---------- 반응형 (사이트 공통 1024/768/480 3단 기준, px÷breakpoint×100 vw 변환) ---------- */

@media screen and (max-width: 1024px){
    .suda-member-card{ padding: 5.47vw 4.69vw; border-radius: 2.34vw; }
    .suda-admin-login-title{ font-size: 3.42vw; margin: 0 auto 2.34vw; }
}

@media screen and (max-width: 768px){
    .suda-member-card{ padding: 7.29vw 6.25vw; border-radius: 3.13vw; }
    .suda-admin-login-title{ font-size: 4.56vw; margin: 0 auto 3.13vw; }
}

@media screen and (max-width: 480px){
    .suda-member-card{ padding: 11.67vw 10vw; border-radius: 5vw; }
    .suda-member-tab{ font-size: 15px; }
    .suda-admin-login-title{ font-size: 7.29vw; margin: 0 auto 5vw; }
}