@charset "utf-8";
/* ============================================================
   Straumann Campus — 로그인 재스킨 (login_redesign.css)
   회원가입(register_redesign.css)과 동일 토큰으로 통일:
     그린 #2D7663 · 차콜 #363A3A · 입력 48px · 라운드 11px · 카드 16px · Pretendard
   마크업/JS(name·id·flogin_submit·pw 보기)는 무변경, CSS만 오버레이.
   style.css(순서 0) 뒤(순서 1)로 로드. PC(.mbskin_box·#login_fs)와
   모바일(#login_frm·.mb_login_join) 구조를 한 파일로 모두 커버.
   ============================================================ */

/* ---- 페이지 베이스 ---------------------------------------- */
#mb_login.mbskin{
  width:100% !important; max-width:none !important; margin:0 !important;
  box-sizing:border-box; padding:48px 16px 40px !important;
  background:#F5F6F7; text-align:left !important;
  font-family:'Pretendard','Apple SD Gothic Neo',-apple-system,BlinkMacSystemFont,sans-serif;
  display:flex; flex-direction:column; align-items:center;
}
#mb_login form{ width:100%; max-width:420px; margin:0 auto; }

/* ---- 카드 (PC: .mbskin_box / 모바일: #login_frm) ----------- */
#mb_login .mbskin_box,
#mb_login #login_frm{
  width:100%; max-width:420px; box-sizing:border-box;
  background:#fff !important; border:1px solid #ECEEF1 !important;
  border-radius:16px !important; padding:34px 28px 26px !important;
  box-shadow:0 2px 8px rgba(16,24,40,.05); margin:0 auto;
}
#mb_login #login_frm{ padding:28px 24px 24px !important; }

/* 제목(사이트명) — 숨겨져 있던 h1 을 다시 보이게 (버튼에 "로그인"이 있으므로 부제 없음) */
#mb_login h1{
  position:static !important; overflow:visible !important;
  font-size:22px !important; line-height:1.3 !important; font-weight:800 !important;
  color:#15181D; text-align:center; letter-spacing:-.4px; margin:0 0 20px !important;
}

/* ---- 폼 / 필드셋 ------------------------------------------ */
#mb_login #login_fs{ border:none !important; padding:0 !important; margin:0 !important; }
#mb_login #login_fs legend{ position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }
#mb_login #login_fs label.title{
  display:block !important; font-size:13px !important; font-weight:600 !important;
  color:#454B53 !important; margin:0 0 6px !important; text-align:left !important;
}

/* ---- 입력 (PC·모바일 공통) -------------------------------- */
#mb_login input.frm_input{
  width:100% !important; height:48px !important; box-sizing:border-box !important;
  border:1px solid #D4D9D8 !important; border-radius:11px !important;
  padding:0 14px !important; margin:0 0 14px !important; font-size:15px !important;
  color:#21242A !important; background:#fff !important; outline:none;
  transition:border-color .15s, box-shadow .15s;
}
#mb_login input.frm_input:focus{
  border-color:#2D7663 !important; box-shadow:0 0 0 3px rgba(45,118,99,.13) !important;
}
#mb_login input::placeholder{ color:#9AA0A8 !important; }

/* 비밀번호 + 보기 아이콘 (PC) */
#mb_login #login_fs .pw_wrap{ position:relative; margin:0 0 18px !important; }
#mb_login #login_fs .pw_wrap input.frm_input{ margin:0 !important; padding-right:46px !important; }
#mb_login #login_fs .pw_wrap .pw_hidden{
  position:absolute; right:12px; top:50%; transform:translateY(-50%);
  cursor:pointer; display:flex; align-items:center; opacity:.5;
}
#mb_login #login_fs .pw_wrap .pw_hidden img{ width:20px; height:auto; }

/* ---- 자동로그인 체크박스 (모바일 노출 / PC 주석 해제 시) ----
   회원가입 수신토글과 동일: label>span 을 teal 박스로, 네이티브 input 숨김 */
#mb_login #login_info.chk_box,
#mb_login .login_if_auto.chk_box{
  display:flex !important; align-items:center; gap:9px; float:none !important;
  margin:2px 0 16px !important; font-size:13.5px; color:#454B53;
}
#mb_login .chk_box .selec_chk{ position:absolute !important; width:1px !important; height:1px !important; opacity:0 !important; }
#mb_login .chk_box label{ display:inline-flex !important; align-items:center; gap:8px; margin:0 !important; padding:0 !important; color:#454B53 !important; cursor:pointer; }
#mb_login .chk_box label span{
  display:block !important; float:none !important; width:20px !important; height:20px !important;
  box-sizing:border-box; border:1.5px solid #C5CBD3 !important; border-radius:6px !important;
  background:#fff !important; position:relative; transition:all .15s;
}
#mb_login .chk_box .selec_chk:checked + label span{ background:#2D7663 !important; border-color:#2D7663 !important; }
#mb_login .chk_box .selec_chk:checked + label span::after{
  content:""; position:absolute; left:6px; top:3px; width:5px; height:9px;
  border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg);
}

/* ---- 로그인 옵션 행 (아이디 저장 / 비밀번호 찾기) --------- */
#mb_login #login_fs .login_opts,
#mb_login #login_frm .login_opts{
  display:flex !important; align-items:center; justify-content:space-between;
  margin:0 2px 18px !important; font-size:13px;
}
#mb_login .login_opts .save_id{ position:static !important; float:none !important; margin:0 !important; }
#mb_login .login_opts .save_id label{
  display:inline-flex !important; align-items:center; gap:7px; margin:0 !important;
  color:#454B53 !important; font-weight:600 !important; cursor:pointer;
}
#mb_login .login_opts a.find_pw{ color:#6B7178 !important; font-weight:600 !important; text-decoration:none; white-space:nowrap; }
#mb_login .login_opts a.find_pw:hover{ text-decoration:underline; }

/* ---- 로그인 버튼 (회원가입 제출 버튼과 동일) -------------- */
#mb_login #login_fs .btn_submit,
#mb_login #login_frm .btn_submit{
  display:block !important; width:100% !important; float:none !important;
  height:auto !important; line-height:1 !important; margin:4px 0 0 !important;
  padding:16px 0 !important; border:none !important; border-radius:12px !important;
  background:#363A3A !important; color:#fff !important;
  font-size:16px !important; font-weight:700 !important;
  cursor:pointer; transition:background .15s;
}
#mb_login #login_fs .btn_submit:hover,
#mb_login #login_frm .btn_submit:hover{ background:#2D7663 !important; }

/* ---- 하단 링크 -------------------------------------------- */
/* PC: #login_info .login_if_lpl / 모바일: .mb_login_join */
#mb_login #login_info .login_if_lpl,
#mb_login .mb_login_join > div{
  float:none !important; display:flex !important; flex-direction:row !important;
  align-items:center; justify-content:center; gap:14px !important; font-size:13.5px;
}
#mb_login #login_info{ margin-top:16px !important; }
#mb_login .mb_login_join{ max-width:420px; margin:14px auto 0; text-align:center; }
#mb_login .mb_login_join h2{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }
#mb_login #login_info .login_if_lpl a,
#mb_login .mb_login_join a{
  color:#6B7178 !important; font-weight:600 !important; text-decoration:none;
}
#mb_login #login_info .login_if_lpl a.join,
#mb_login #login_info .login_if_lpl a:first-child,
#mb_login .mb_login_join a:last-child{ color:#2D7663 !important; font-weight:700 !important; }
#mb_login #login_info .login_if_lpl a:hover,
#mb_login .mb_login_join a:hover{ text-decoration:underline; }
#mb_login .login_if_lpl .lpl_q{ color:#8A9099 !important; font-weight:500 !important; }

/* ---- 소셜 로그인 ------------------------------------------ */
#mb_login #sns_login{
  border:none !important; padding:18px 0 0 !important; margin:0 !important; max-width:420px; width:100%;
}
#mb_login #sns_login .sns-icon{ border-radius:11px !important; }

/* ---- 브랜드 로고 푸터 (ONE ACCOUNT-OUR BRANDS, PC) --------- */
.subpage.mbskin .logo_wrap,
#mb_login .logo_wrap{
  width:100%; max-width:420px; box-sizing:border-box;
  background:#21242A !important; border-radius:16px !important;
  text-align:center; padding:22px 20px !important; margin:18px auto 0 !important;
}
.subpage.mbskin .logo_wrap p,
#mb_login .logo_wrap p{
  color:#C7CDD4 !important; font-size:11px !important; font-weight:700 !important;
  letter-spacing:2px; margin:0 0 16px !important;
}
.subpage.mbskin .logo_wrap .dfbox,
#mb_login .logo_wrap ul.dfbox{
  display:flex !important; align-items:center; justify-content:center;
  gap:26px !important; margin:0 !important; padding:0; list-style:none;
}
/* 로고는 흰색 워드마크(투명 PNG) → 차콜 푸터에서 원본 그대로 노출. filter 불필요 */
#mb_login .logo_wrap ul.dfbox img{ height:24px; width:auto; opacity:.95; }
#mb_login .logo_wrap ul.dfbox a{ display:inline-flex; align-items:center; }

/* ---- 비회원/주문조회(쇼핑몰) 카드 톤 통일 ------------------ */
#mb_login_notmb, #mb_login_od_wr{
  width:100%; max-width:420px; box-sizing:border-box;
  background:#fff; border:1px solid #ECEEF1; border-radius:16px;
  padding:24px 22px !important; margin:16px auto 0 !important;
}

/* ---- 모바일 미세 조정 ------------------------------------- */
@media (max-width:480px){
  #mb_login.mbskin{ padding:32px 14px 32px !important; }
  #mb_login .mbskin_box{ padding:28px 20px 22px !important; }
  #mb_login #login_frm{ padding:24px 18px 20px !important; }
}