/* 로그인 (2026-08-19)
   skin/member/basic/style.css 위에 덧입힌다.
   그 파일은 회원가입·비밀번호찾기·회원정보수정 등 회원 스킨 전체가 함께 읽어서
   손대면 다른 화면까지 바뀐다. 여기 규칙은 모두 #mb_login 아래에만 걸었다. */

#mb_login{ max-width:480px; margin:0 auto; padding:70px 20px 90px;
	font-family:'Manrope','Pretendard Variable','Pretendard','Noto Sans KR',sans-serif; }

/* ── 머리말 ──
   예전에는 왼쪽에 100x100 그림, 오른쪽에 안내문구를 표로 붙여 두었고
   좁은 화면에서는 그 문구를 통째로 감췄다(display:none).
   문구가 그림보다 중요하니 그림을 빼고 문구를 남긴다. */
#mb_login .subInfo{ display:block; margin-bottom:34px; text-align:left; font-size:14px; }
#mb_login .subInfo .leftTable{ display:none; }
#mb_login .subInfo .rightTable{ display:block; padding-left:0; }
#mb_login .subInfo h2{ display:block; font-size:28px; font-weight:800; letter-spacing:-0.5px;
	line-height:1.3; color:#203864; margin:0; }
#mb_login .subInfo h2:after{ content:''; display:block; width:54px; height:3px;
	background:#e6c88a; margin:16px 0 0; }
#mb_login .subInfo .rightTable p{ display:block !important; margin:20px 0 0;
	font-size:14.5px; line-height:1.75; color:#8b93a1; word-break:keep-all; }

/* ── 입력 ──
   항목 이름을 왼쪽 150px 칸에 두던 것을 입력칸 위로 올린다.
   좁은 화면에서 이름 칸을 감춰 버려(480px 이하) 무엇을 넣는 칸인지 알 수 없었다. */
#mb_login form[name=flogin] table,
#mb_login form[name=flogin] tbody,
#mb_login form[name=flogin] tr,
#mb_login form[name=flogin] th,
#mb_login form[name=flogin] td{ display:block; width:100%; }
#mb_login form[name=flogin] table{ font-size:16px; }
#mb_login form[name=flogin] th{ padding:0 0 8px !important; text-align:left;
	font-size:14px; font-weight:700; color:#203864; }
#mb_login form[name=flogin] td{ padding:0 0 18px; }
#mb_login form[name=flogin] td input{ height:50px; padding:0 14px; border:1px solid #c9d0da;
	border-bottom:1px solid #c9d0da; border-radius:6px; font-size:15px; color:#333;
	background:#fff; transition:border-color .15s; }
#mb_login form[name=flogin] td input:focus{ outline:none; border-color:#203864; }
#mb_login form[name=flogin] td input::placeholder{ color:#b4bbc6; }

/* ── 자동로그인 · 찾기 ── */
#mb_login .twoBox{ display:flex; align-items:center; justify-content:space-between;
	gap:12px; margin-top:6px; font-size:14px; }
#mb_login .twoBox .leftBox,
#mb_login .twoBox .rightBox{ display:block; }
#mb_login .twoBox .leftBox label{ color:#5a6474; }
#mb_login .twoBox .rightBox a{ color:#5a6474; border-bottom:1px solid #d5dae2;
	padding-bottom:2px; transition:color .2s, border-color .2s; }
#mb_login .twoBox .rightBox a:hover{ color:#203864; border-bottom-color:#203864; }

/* ── 버튼 ──
   검정 알약이었다. 사이트 어디에도 안 쓰는 모양이라 남색 버튼으로 맞췄다. */
#mb_login .twoBox2{ display:flex; gap:10px; margin-top:28px; }
#mb_login .twoBox2 .leftBox,
#mb_login .twoBox2 .rightBox{ display:block; flex:1 1 0; width:auto; padding:0; }
#mb_login .twoBox2 button[type=submit],
#mb_login .twoBox2 button[type=button]{ width:100%; height:52px; line-height:50px;
	border-radius:0; font-size:15.5px; font-weight:700; cursor:pointer;
	transition:background-color .2s, border-color .2s, color .2s; }
#mb_login .twoBox2 button[type=submit]{ background:#203864; border:1px solid #203864;
	color:#fff; }
#mb_login .twoBox2 button[type=submit]:hover{ background:#2f4f8f; border-color:#2f4f8f; }
#mb_login .twoBox2 button[type=button]{ background:#fff; border:1px solid #c9d0da;
	color:#5a6474; }
#mb_login .twoBox2 button[type=button]:hover{ border-color:#203864; color:#203864; }

/* ── 소셜 로그인 ── */
#mb_login #sns_login{ margin-top:36px; padding:30px 0 0; border:none;
	border-top:1px solid #e5e8ee; }
#mb_login #sns_login .sns-icon{ width:100% !important; float:none !important;
	margin:0 0 8px !important; }

/* ── 비회원 주문 · 주문조회 (쇼핑몰에서 넘어온 경우) ── */
#mb_login_notmb, #mb_login_od_wr{ margin:36px 0 0; padding:26px 24px;
	border:1px solid #e5e8ee; border-radius:10px; background:#f8fafc; }
#mb_login_notmb h2, #mb_login_od_wr h2{ font-size:18px; font-weight:800;
	letter-spacing:-0.5px; color:#203864; margin:0 0 10px; }
#mb_login_od_wr .frm_input{ height:48px; border:1px solid #c9d0da; border-radius:6px;
	padding:0 13px; }

@media all and (max-width:480px) {
	#mb_login{ padding:50px 20px 70px; }
	#mb_login .subInfo h2{ font-size:23px; }
	/* 예전에는 이 폭에서 항목 이름을 감췄다. 이제는 그대로 둔다. */
	#mb_login form[name=flogin] table th{ display:block; }
	#mb_login form[name=flogin] td input{ padding:0 14px; }
	#mb_login .twoBox2{ flex-direction:column; }
}