/* 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-g-tit {display:flex; align-items:center; gap:8px; margin-bottom:14px; font-size:16px; font-weight:800;}
.mb-g-ico {flex:none; display:flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:50%; background:var(--b-soft); color:var(--b-deep);}
.mb-g-dl {display:grid; grid-template-columns:72px 1fr; gap:10px 8px; font-size:13.5px; line-height:1.55;}
.mb-g-dl dt {color:var(--b-mute);}
.mb-g-dl dd {color:var(--b-ink); word-break:break-all;}
.mb-g-dl dd strong {font-weight:700;}
.mb-g-dl dd em {font-weight:700; color:var(--b-deep);}
.mb-g-dl dd a {color:var(--b-ink); text-decoration:underline; text-underline-offset:2px;}
.mb-g .mb-dots {margin-top:12px; padding-top:12px; border-top:1px solid var(--b-line);}
.mb-g-tels {display:flex; flex-direction:column; gap:8px; margin-bottom:16px;}
.mb-g-tels.is-sub {margin:16px 0 0;}
.mb-g-tel {display:flex; align-items:center; justify-content:center; gap:6px; height:46px; border-radius:var(--m-r); background:var(--b-point); color:#fff; font-size:15px; font-weight:700; font-family:'Roboto','Noto Sans KR',sans-serif; letter-spacing:0;}
.mb-g-tels.is-sub .mb-g-tel {background:#fff; border:1px solid var(--m-line2); color:var(--b-ink); font-size:14px; font-family:var(--m-font); letter-spacing:-0.02em;}
.mb-g-note {margin:16px 16px 0; font-size:12px; color:#9aa5aa; text-align:center;}

/* BASIC css end */