@charset "utf-8";
/* ==========================================================
   회원 페이지 전용 스타일 (www/member/login.jsp)
   - board.css 의 로그인 공통 스타일(.new_login_wrapper 등) 을 사이트 톤으로 오버라이드
   - 마크업은 프로그램 로직(validation·SNS 로그인) 과 얽혀 있어 유지, CSS 만 덮는다
   - 톤: 세리프 영문 제목 + 얇은 본문(300/400) + 밑줄 입력창 + 다크 버튼 (메인·마이페이지와 통일)
   ========================================================== */

/* ---------- 컨테이너 ---------- */
.programCon.programCon_custom01.login_bg01 {padding:0;}
.login_bg01 .new_login_wrapper {max-width:460px; margin:96px auto 128px; padding:0; border-radius:0; background:transparent; font-family:'Pretendard', 'Noto Sans KR', sans-serif; color:#2b2926;}

/* ---------- 제목 — 영문 대제목(Poppins Light) + 다국어 소제목 ---------- */
.login_bg01 .login_tit_flex_box01 {display:block; margin-bottom:48px; text-align:center;}
.login_bg01 .login_tit01 {font-size:0; font-weight:400; color:#2b2926;}
.login_bg01 .login_tit01 .login_en {display:block; font-family:'Poppins', 'Pretendard', 'Noto Sans KR', sans-serif; font-size:40px; font-weight:300; font-style:normal; line-height:1; letter-spacing:0.02em; color:#2b2926;}
.login_bg01 .login_tit01 .login_ko {display:block; margin-top:12px; font-size:14px; font-weight:300; letter-spacing:0.02em; color:#8e8883;}

/* ---------- 입력 폼 — 배경 박스 없이 밑줄만 ---------- */
.login_bg01 .login_form_wrapper {margin-top:0;}
.login_bg01 .login_form_box01 + .login_form_box01 {margin-top:28px;}
.login_bg01 .login_label_tit01 {display:block; margin-bottom:4px; font-size:12px; font-weight:400; letter-spacing:0.06em; color:#8e8883;}
.login_bg01 .login_input_form_box01 {height:50px; padding:0; border-radius:0; border-bottom:1px solid #d9d5d0; background:transparent; transition:border-color 0.25s;}
.login_bg01 .login_input_form_box01:focus-within {border-bottom-color:#2b2926;}
.login_bg01 .login_input_form_box01 input {font-size:16px; font-weight:300; color:#2b2926; letter-spacing:-0.01em;}
.login_bg01 .login_input_form_box01 input::placeholder {color:#b5aea8; font-weight:300;}
/* 브라우저 자동완성 배경(회색) → 흰색 */
.login_bg01 input:-webkit-autofill,
.login_bg01 input:-webkit-autofill:hover,
.login_bg01 input:-webkit-autofill:focus {-webkit-text-fill-color:#2b2926; -webkit-box-shadow:0 0 0 1000px #fff inset;}
.login_bg01 .login_input_form_box01.pw .pw_active_btn {right:0; width:20px; height:14px; opacity:0.55;}
.login_bg01 .login_input_form_box01.pw input {font-size: 14px; padding-right: 30px;}

/* ---------- 아이디 저장 / 찾기 ---------- */
.login_bg01 .login_chk_wrapper01 {margin-top:18px; font-size:13px; color:#8e8883;}
.login_bg01 .id_save_box {gap:8px; font-size:13px; font-weight:300; color:#736d68;}
.login_bg01 .id_save_box input {width:18px !important; height:18px !important; background-color:#c9c4be;}
.login_bg01 .id_save_box input:checked {background-color:#2b2926;}
.login_bg01 .login_find_box01 a {font-size:13px; font-weight:300; color:#8e8883; transition:color 0.2s;}
.login_bg01 .login_find_box01 a:hover {color:#2b2926;}
.login_bg01 .login_find_box01 a + a {padding-left:10px; margin-left:10px;}
.login_bg01 .login_find_box01 a + a::after {width:1px; height:9px; border-radius:0; background:#d9d5d0;}

/* ---------- 로그인 버튼 — 각진 사각, 상품상세 바로구매(shop_item.css .buy_now_btn)와 동일 색상: 브랜드 그린 → 호버 진한 그린 ---------- */
.login_bg01 .login_chk_btn_box01 {margin-top:40px;}
.login_bg01 a.login_chk_btn01,
.login_bg01 .login_chk_btn01 {height:56px; border-radius:0; border:1px solid #1f4d36; background:#1f4d36; font-size:15px; font-weight:400; letter-spacing:0.08em; color:#fff; transition:background 0.25s, border-color 0.25s;}
.login_bg01 a.login_chk_btn01:hover,
.login_bg01 .login_chk_btn01:hover {background:#153526; border-color:#153526; color:#fff;}

/* ---------- SNS 로그인 — 작은 원형 아이콘 한 줄 ---------- */
.login_bg01 .login_social_wrapper {justify-content:center; gap:28px; margin:40px 0 32px; padding:0 0 32px; border-bottom:1px solid #ebe8e4;}
/* SNS 로그인을 하나도 안 쓰면(관리자 설정) 빈 영역·구분선을 통째로 숨김 */
.login_bg01 .login_social_wrapper:not(:has(.login_social_btn)) {display:none;}
.login_bg01 .login_social_wrapper .login_social_btn {flex:0 0 auto; gap:10px; padding:0; font-size:12px; font-weight:300; letter-spacing:0.02em; color:#8e8883; transition:color 0.2s;}
.login_bg01 .login_social_wrapper .login_social_btn:hover {color:#2b2926;}
.login_bg01 .login_social_wrapper .login_social_btn .img {width:48px; height:48px;}
.login_bg01 #apple_login .img {background:#fff; border-color:#e6e3df;}

/* ---------- 하단 회원가입 ---------- */
.login_bg01 .login_btm_wrapper {gap:12px; margin-top:32px;}
.login_bg01 .login_ment01 {font-size:14px; font-weight:300; color:#8e8883;}
.login_bg01 a.sign_up_ment {font-size:14px; font-weight:400; color:#2b2926; text-underline-offset:4px; text-decoration-color:#b5aea8; transition:text-decoration-color 0.2s;}
.login_bg01 a.sign_up_ment:hover {text-decoration-color:#2b2926;}

/* ---------- 반응형 ---------- */
@media all and (max-width:768px){
	.login_bg01 .new_login_wrapper {max-width:none; margin:56px auto 80px; padding:0 24px; box-sizing:border-box;}
	.login_bg01 .login_tit_flex_box01 {margin-bottom:36px;}
	.login_bg01 .login_tit01 .login_en {font-size:34px;}
	.login_bg01 .login_social_wrapper {gap:20px;}
}
@media all and (max-width:480px){
	.login_bg01 .new_login_wrapper {padding:0 16px;}
	.login_bg01 .login_tit01 .login_en {font-size:30px;}
	.login_bg01 .login_social_wrapper .login_social_btn .img {width:42px; height:42px;}
}