/* BASIC css start */
/* =========================================================
   회원 페이지 공통 (mb-) : 로그인·가입·찾기 페이지에 똑같이 들어갑니다
   ========================================================= */
.sr-only {position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}
.mb {padding-bottom:32px;}
.mb .h_title {padding-bottom:4px;}
.mb-sub {padding:0 16px; margin-bottom:20px; font-size:13.5px; line-height:1.6; color:var(--b-mute);}
.mb-wrap {padding:0 16px;}
.mb-card {margin:0 16px 12px; padding:18px 16px; border:1px solid var(--b-line); border-radius:14px; background:#fff;}
.mb-soft {margin:0 16px 12px; padding:16px; border-radius:14px; background:var(--b-soft);}
.mb-sec-tit {margin:26px 16px 10px; font-size:16px; font-weight:800; color:var(--b-ink);}
.mb-sec-tit small {margin-left:6px; font-size:12px; font-weight:400; color:var(--b-mute);}
.mb-help {margin-top:6px; font-size:12px; line-height:1.5; color:var(--b-mute);}
.mb-dots li {position:relative; padding-left:10px; font-size:12.5px; line-height:1.6; color:var(--b-mute);}
.mb-dots li:before {content:""; position:absolute; left:1px; top:.72em; width:3px; height:3px; border-radius:50%; background:currentColor;}
.mb-ico {flex:none; display:flex; align-items:center; justify-content:center; width:56px; height:56px; margin:0 auto 14px; border-radius:50%; background:var(--b-soft); color:var(--b-deep);}
.mb-btns {display:grid; grid-template-columns:1fr 1fr; gap:8px; padding:0 16px; margin-top:20px;}
.mb-btns a {margin:0;}
.mb-btns .is-wide {grid-column:1 / -1;}
.mb .btn_Red.is-big, .mb .btn_Black.is-big {height:52px; line-height:50px; font-size:16px;}

/* 진행 단계 */
.mb-steps {display:flex; margin:4px 16px 22px; padding:0; counter-reset:mbs;}
.mb-steps li {flex:1; position:relative; padding-top:30px; text-align:center; font-size:11.5px; color:#9aa5aa; counter-increment:mbs; list-style:none;}
.mb-steps li:before {content:counter(mbs); position:absolute; top:0; left:50%; z-index:2; width:22px; height:22px; margin-left:-11px; line-height:20px; border:1px solid var(--m-line2); border-radius:50%; background:#fff; font-size:11px; font-weight:700; color:#9aa5aa; box-sizing:border-box;}
.mb-steps li:after {content:""; position:absolute; top:11px; left:-50%; z-index:1; width:100%; height:1px; background:var(--m-line2);}
.mb-steps li:first-child:after {display:none;}
.mb-steps li.done:before {content:"\2713"; border-color:var(--b-point); background:var(--b-point); color:#fff;}
.mb-steps li.done:after, .mb-steps li.now:after {background:var(--b-point);}
.mb-steps li.now {color:var(--b-ink); font-weight:700;}
.mb-steps li.now:before {border-color:var(--b-ink); background:var(--b-ink); color:#fff;}

/* 비밀번호 보기 버튼 */
.mb-pw {position:relative; display:block;}
.mb-pw input {padding-right:48px !important;}
.mb-pw-eye {position:absolute; top:0; right:0; display:flex; align-items:center; justify-content:center; width:46px; height:44px; padding:0; border:0; background:none; color:#9aa5aa; cursor:pointer;}
.mb-pw-eye.is-on {color:var(--b-point);}

/* =========================================================
   로그인 (리뉴얼)
   ========================================================= */
.mb-login .member {margin-top:0;}
.mb-login .loginInput {margin-top:0;}
.mb-login .loginInput input {display:block; width:100% !important; height:52px; margin-bottom:8px; padding:0 14px; border-radius:var(--m-r);}
.mb-login .loginInput .mb-pw input {margin-bottom:8px;}
.mb-login .loginInput .mb-pw-eye {height:52px;}
.mb-login .loginCheck {display:flex; flex-wrap:wrap; gap:4px 16px; margin-top:2px;}
.mb-login .loginCheck label {display:inline-flex; align-items:center; gap:2px; font-size:13.5px; line-height:36px; color:var(--b-ink);}
.mb-login .loginMiddle .btn_Red {height:54px; line-height:52px; margin:16px 0 0; font-size:16px;}
.mb-login .mb-links {display:flex; justify-content:center; align-items:center; margin-top:14px; font-size:13.5px;}
.mb-login .mb-links a {padding:6px 12px; color:var(--b-mute);}
.mb-login .mb-links a + a {border-left:1px solid var(--b-line);}

/* 간편 로그인 (SNS) */
.mb-sns {margin:30px 16px 0;}
.mb-sns-tit {display:flex; align-items:center; gap:12px; margin-bottom:14px; font-size:12.5px; color:#9aa5aa; white-space:nowrap;}
.mb-sns-tit:before, .mb-sns-tit:after {content:""; flex:1; height:1px; background:var(--b-line);}
.mb-sns ul {display:flex; flex-direction:column; gap:8px;}
.mb-sns ul li, .sns-login.mb-sns ul li {position:static; height:auto; margin:0; padding:0; border:0; border-radius:0; line-height:inherit;}
.mb-sns ul li a, .sns-login.mb-sns ul li a {position:relative; display:flex; align-items:center; justify-content:center; gap:6px; height:50px; padding:0 48px; border:1px solid transparent; border-radius:var(--m-r); font-size:15px; font-weight:700; letter-spacing:-0.02em; box-sizing:border-box;}
.mb-sns ul li span, .sns-login.mb-sns ul li span {position:static; width:auto; height:auto; background:none;}
.mb-sns ul li a > span:not(.mb-sns-ico), .mb-sns ul li a > em {display:inline-block; padding:1px 7px; border-radius:9px; background:rgba(255,255,255,.9); color:var(--b-ink); font-size:10.5px; font-weight:700; line-height:16px;}
.mb-sns .mb-sns-ico, .sns-login.mb-sns ul li .mb-sns-ico {position:absolute; left:16px; top:50%; width:22px; height:22px; margin-top:-11px; background-repeat:no-repeat; background-position:center; background-size:contain;}
.mb-sns li.naver a {background:#03c75a; color:#fff;}
.mb-sns li.naver .mb-sns-ico {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M14.6 12.4 9.2 4.5H4.5v15h4.9v-7.9l5.4 7.9h4.7v-15h-4.9z'/%3E%3C/svg%3E"); width:16px; height:16px; margin-top:-8px; left:19px;}
.mb-sns li.kakaotalk a, .mb-sns li.kakao a {background:#fee500; color:rgba(0,0,0,.85);}
.mb-sns li.kakaotalk .mb-sns-ico, .mb-sns li.kakao .mb-sns-ico {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23191919' d='M12 3.5c-5 0-9 3.1-9 7 0 2.5 1.7 4.7 4.2 6l-1 3.7c-.1.3.3.6.6.4l4.4-2.9h.8c5 0 9-3.1 9-7s-4-7.2-9-7.2z'/%3E%3C/svg%3E");}
.mb-sns li.facebook a {background:#1877f2; color:#fff;}
.mb-sns li.facebook .mb-sns-ico {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M13.5 21v-7.5H16l.4-3h-2.9V8.6c0-.9.3-1.5 1.5-1.5h1.5V4.4c-.3 0-1.2-.1-2.2-.1-2.2 0-3.7 1.3-3.7 3.8v2.4H8.1v3h2.5V21h2.9z'/%3E%3C/svg%3E");}
.mb-sns li.apple a {background:#000; color:#fff;}
.mb-sns li.apple .mb-sns-ico {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M16.4 12.7c0-2.4 2-3.5 2-3.6-1.1-1.6-2.8-1.8-3.4-1.8-1.4-.2-2.8.9-3.5.9s-1.9-.8-3.1-.8c-1.6 0-3 .9-3.9 2.3-1.7 2.9-.4 7.2 1.2 9.6.8 1.2 1.7 2.4 3 2.4 1.2-.1 1.6-.8 3.1-.8s1.8.8 3.1.8 2.1-1.2 2.9-2.3c.9-1.3 1.3-2.6 1.3-2.7 0 0-2.6-1-2.7-4zM14.1 5.6c.6-.8 1.1-1.9 1-3-.9 0-2.1.6-2.7 1.4-.6.7-1.1 1.8-1 2.9 1 .1 2.1-.5 2.7-1.3z'/%3E%3C/svg%3E");}
.mb-sns li a:active {opacity:.85;}

/* 아래쪽 안내 카드 */
.mb-login .loginBottom {margin:28px 16px 0; padding:18px 16px; border-radius:14px; background:var(--b-soft);}
.mb-login .loginBottom h4 {margin-bottom:4px; font-size:15px; font-weight:800; color:var(--b-ink);}
.mb-login .loginBottom p {font-size:13px; line-height:1.55; color:var(--b-mute);}
.mb-login .loginBottom p strong {color:var(--b-deep);}
.mb-login .loginBottom .btn_Black, .mb-login .loginBottom .btn_White {margin-top:14px;}
.mb-login .loginBottom .btn_White + .btn_Black, .mb-login .loginBottom .btn_Black + .btn_White {margin-top:8px;}

/* BASIC css end */