@charset "utf-8";
/* ==========================================================
   회원가입·아이디/비밀번호 찾기 스타일
   (www/member/write.jsp · write_step02.jsp · write_step02_two.jsp · idFind.jsp · pwFind.jsp)
   - board.css 의 로그인 공통 폼(.login_form_box01 · .login_input_form_box01 55px 회색 박스) 톤을 그대로 따르며
     면색 버튼 색상 + 회원가입에만 있는 항목(생년월일 3칸 · 성별 토글 버튼 · 그룹 구분선) 스타일만 추가
   - member.css(login.jsp 전용, 밑줄 입력창 톤) 는 여기 로드하지 않는다 — 회원가입 폼 전체 톤이 바뀌므로
   ========================================================== */

/* ---------- 면색 큰 버튼 (약관 "다음" · 정보입력/SNS가입 "확인") ----------
   기본 --color-primary01(검정) 대신 상품상세 바로구매(shop_item.css .buy_now_btn)·로그인 버튼과 동일 색상:
   브랜드 그린 → 호버 진한 그린. 테두리형(.type02: 중복확인·우편번호검색·이전) 은 그대로 */
.login_bg01 a.login_chk_btn01:not(.type02),
.login_bg01 .login_chk_btn01:not(.type02) {border-color:#1f4d36; background-color:#1f4d36; color:#fff; transition:background-color 0.25s, border-color 0.25s;}
.login_bg01 a.login_chk_btn01:not(.type02):hover,
.login_bg01 .login_chk_btn01:not(.type02):hover {border-color:#153526; background-color:#153526; color:#fff;}

/* ---------- 그룹 구분선 (기본정보 | 계정정보 | 주소) ---------- */
.join_form_divider01 {margin:40px 0; border:0; border-top:1px solid #eee;}

/* ---------- 생년월일 — 년/월/일 3칸 + 단위 ---------- */
.join_birth_flex_box01 {display:flex; align-items:center; gap:10px;}
.join_birth_flex_box01 .login_input_form_box01 {flex:0 1 140px; padding:0 12px;}
.join_birth_flex_box01 .login_input_form_box01 input {text-align:center;}
.join_birth_flex_box01 .unit {flex:0 0 auto; margin-right:10px; font-size:16px; font-weight:400; color:#666;}
.join_birth_flex_box01 .unit:last-of-type {margin-right:0;}

/* ---------- 성별 — 라디오 숨기고 label 을 사각 토글 버튼으로 ---------- */
.join_gender_box01 {display:flex; gap:10px;}
.join_gender_box01 input[type="radio"] {position:absolute; width:0; height:0; margin:0; border:0; opacity:0; pointer-events:none;}
.join_gender_box01 label {display:flex; align-items:center; justify-content:center; min-width:96px; height:55px; padding:0 24px; box-sizing:border-box; border:1px solid #ddd; border-radius:0; background:#fff; font-size:17px; font-weight:400; color:#666; cursor:pointer; transition:border-color 0.2s, color 0.2s, background 0.2s;}
.join_gender_box01 label:hover {border-color:#999; color:#333;}
.join_gender_box01 input[type="radio"]:checked + label {border-color:var(--color-primary01); color:var(--color-primary01); font-weight:600;}
.join_gender_box01 input[type="radio"]:focus-visible + label {outline:1px solid #aaa; outline-offset:2px;}

/* ---------- 반응형 ---------- */
@media all and (max-width:768px){
	.join_form_divider01 {margin:30px 0;}
	.join_birth_flex_box01 {gap:6px;}
	.join_birth_flex_box01 .login_input_form_box01 {flex:1 1 0; min-width:0; padding:0 8px;}
	.join_birth_flex_box01 .unit {margin-right:4px; font-size:14px;}
	.join_gender_box01 label {flex:1; min-width:0; padding:0 12px;}
}