/* BASIC css start */
/* ============================================
   로그인 페이지 - 신규 디자인
   ============================================ */

/* 기존 loginWrap 레이아웃 초기화 */
#loginWrap { width: 100%; }
#loginWrap .mlog-sign,
#loginWrap .mlog,
#loginWrap .sign,
#loginWrap .frm-list { all: unset; display: block; }

/* 로그인 래퍼 */
.login-wrapper { padding: 60px 20px; }
.login-wrap {
    max-width: 440px;
    width: 100%;
    margin: 0 auto;
    padding-bottom: 60px;
}

/* 타이틀 */
.login-wrap .page-title-wrap { text-align: left; }
.login-wrap .page-title-wrap h2 {
    line-height: 1.35;
    font-size: 24px;
    font-weight: 700;
    color: #111;
    margin: 0;
}
.login-wrap .page-title-wrap p {
    padding-top: 8px;
    font-size: 14px;
    color: #666;
    margin: 0;
}

/* 입력폼 */
.login-wrap .login-form fieldset { border: 0; padding: 0; margin: 0; }
.login-wrap .login-form legend.blind {
    position: absolute; width: 1px; height: 1px;
    margin: -1px; padding: 0; overflow: hidden;
    clip: rect(0,0,0,0); border: 0;
}
.login-wrap .form-textfield {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 24px;
}
.login-wrap .form-textfield input,
.login-wrap .form-textfield .MS_login_id,
.login-wrap .form-textfield .MS_login_pw {
    width: 100%;
    height: 48px !important;
    line-height: 48px;
    padding: 0 14px;
    border: 1px solid #ddd;
    background: #fff;
    box-sizing: border-box;
    font-size: 14px;
}
.login-wrap .form-textfield input:focus { border-color: #111; outline: none; }


/* placeholder 스타일 통일 */
.login-wrap .form-textfield input::placeholder,
.login-wrap .form-textfield .MS_login_id::placeholder,
.login-wrap .form-textfield .MS_login_pw::placeholder {
    color: #aaa;
    font-size: 14px;
    opacity: 1;
}
.login-wrap .form-textfield input:-ms-input-placeholder {
    color: #aaa;
}
.login-wrap .form-textfield input::-ms-input-placeholder {
    color: #aaa;
}



/* 체크박스 줄 */
.login-wrap .form-check {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    padding-top: 14px;
    align-items: center;
}
.login-wrap .form-check .form-check-label {
    font-size: 14px;
    white-space: nowrap;
    color: #333;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}
.login-wrap .form-check input[type="checkbox"] {
    width: 16px; height: 16px;
    margin: 0;
    vertical-align: middle;
}

/* 로그인 버튼 */
.login-wrap .btn-login {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 24px 0 16px;
}
.login-wrap .btn-login .btn {
    display: block;
    width: 100%;
    height: 52px;
    line-height: 52px;
    text-align: center;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    box-sizing: border-box;
}
.login-wrap .btn-login .btn-primary {
    background: #111;
    color: #fff;
    border: 1px solid #111;
}
.login-wrap .btn-login .btn-primary:hover { background: #000; }

/* 회원가입 / ID·PW찾기 링크 */
.login-wrap .btn-link {
    display: flex;
    align-items: center;
    justify-content: center;
}
.login-wrap .btn-link a {
    position: relative;
    color: #333;
    padding: 0 20px;
    font-size: 14px;
    text-decoration: none;
}
.login-wrap .btn-link a:not(:last-child)::after {
    position: absolute;
    right: 0; top: 50%;
    transform: translateY(-50%);
    display: inline-block;
    width: 1px; height: 12px;
    background: #ddd;
    content: '';
}

/* ============================================
   SNS 로그인
   ============================================ */
.sns-wrap { padding-top: 50px; }
.sns-wrap .sns-title {
    position: relative;
    color: #888;
    font-size: 14px;
    text-align: center;
    margin: 0;
}
.sns-wrap .sns-title::before {
    display: block;
    height: 1px;
    background: #e5e5e5;
    content: '';
}
.sns-wrap .sns-title span {
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    padding: 0 14px;
    background: #fff;
}
.sns-wrap .sns-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: center;
    justify-content: center;
    padding: 36px 0 0;
    list-style: none;
    margin: 0;
}
.sns-wrap .sns-btns li {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}
.sns-wrap .sns-btns li a {
    display: block;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    font-size: 0;
    text-indent: -9999px;
    background-repeat: no-repeat;
    background-position: 50% 50%;
}
.sns-wrap .sns-btns li a.kakaotalk {
    background-image: url('//skin.makeshop.co.kr/skin/rw_shop/images/icons/ico_kakao.svg');
    background-color: #fee500;
}
.sns-wrap .sns-btns li a.naver {
    background-image: url('//skin.makeshop.co.kr/skin/rw_shop/images/icons/ico_naver.svg');
    background-color: #03cf5d;
}
.sns-wrap .sns-btns li a.facebook {
    background-image: url('//skin.makeshop.co.kr/skin/rw_shop/images/icons/ico_facebook.svg');
    background-color: #1877f2;
}
.sns-wrap .sns-btns li a.apple {
    background-image: url('//skin.makeshop.co.kr/skin/rw_shop/images/icons/ico_apple.svg');
    background-color: #121212;
}
.sns-wrap .sns-btns span {
    display: inline-block;
    width: 80px;
    height: 24px;
    font-size: 12px;
    color: #888;
    text-indent: 0;
}

/* ============================================
   반응형
   ============================================ */
@media (max-width: 767.98px) {
    .login-wrapper { padding: 30px 16px; }
    .login-wrap { padding-bottom: 40px; }
    .login-wrap .page-title-wrap h2 { font-size: 22px; }
    .login-wrap .form-check { gap: 8px 16px; }
    .login-wrap .form-check .form-check-label { font-size: 13px; }
}
/* BASIC css end */