@charset "utf-8";
/* ============================================================================
   member_qc.css v1.0.0 (2026-09-06) — 회원 흐름(가입·찾기·약관·바우처) 규격 정돈
   ----------------------------------------------------------------------------
   왜 새 파일인가
     이 화면들의 버튼·입력·회색은 전부 공용 style_v2.css(PC 1265~1470 / 모바일
     1167~1425)에 얹혀 있는데, 그 파일은 전 사이트가 공유해 수정 금지다.
     그래서 회원 흐름 전용 시트를 새로 만들고, 회원 화면만 include 하는
     공용 조각(certifyConfComm·guestComm·agreeComm·joinStep3Comm·joinVoucherComm·
     joinEndComm·errorChkComm·addressComm)에서만 로드한다 → 다른 화면 영향 0.
     로드 순서상 style_v2.css 뒤라 같은 특정성이면 이 파일이 이긴다.

   FEEDBACK_GUIDE 기준(§0 토큰 · §4 인라인 오류)
     · 버튼   높이 48 · 라운드 12 · 15px/700   (주요 = 딥그린 채움 / 보조 = 테두리)
     · 입력   높이 48 · 라운드 10 · 포커스 = 초록 2px 링(전 입력 공통 1규칙)
     · 회색   #5F6B62 하한 (금지 예시 #828284 · #858585 · #9CA09F · #707070)
     · 경고   #D8352A · 글자 13.5px 이상(최소 12.5px)
     · 필수 * #D8352A (배경 없이 글자만)

   ⚠ 손대지 않는 것
     · PC 로그인 화면 = 09-05 login_v2.css 규격이 우선(.login_wrap 선택자 미사용)
     · 마이두레 화면 = 이 파일이 로드되지 않는다(회원 흐름 조각에서만 로드)
     · 마크업·동작·검증 로직 무접촉. 값만 덮는다.
   ============================================================================ */

/* ── 1. 주 버튼 / 보조 버튼 ───────────────────────────────────────────────
   기존 : PC 높이 50~54 · 라운드 6 · 18px/500 / 모바일 높이 49 · 초록 17px·흰 13px
   변경 : 높이 48 · 라운드 12 · 15px/700 (PC·모바일 동일) */
.form_wrap .btn_green,
.join_wrap .btn_green,
.find_wrap .btn_green,
.my_wrap .btn_green{
	height:48px; line-height:48px; border-radius:12px;
	font-size:15px; font-weight:700; letter-spacing:-.02em;
}
.form_wrap .btn_white,
.join_wrap .btn_white,
.find_wrap .btn_white,
.my_wrap .btn_white{
	height:48px; line-height:46px; border-radius:12px;
	font-size:15px; font-weight:700; letter-spacing:-.02em;
	color:#5F6B62; border:1px solid #DFE5DC;
}
.form_wrap .btn_white:hover,
.join_wrap .btn_white:hover,
.find_wrap .btn_white:hover,
.my_wrap .btn_white:hover{ background-color:#EAF1E8; border-color:#3D6041; color:#1D271E; }

/* ── 2. 입력칸 : 라운드 10 · 높이 48 ─────────────────────────────────────
   PC 54/50 · 모바일 43 → 48 로 통일. 모바일 글자 13px → 15px(시니어 하한). */
.form_wrap .def_input,
.form_wrap .def_input_btn,
.form_wrap .def_input_btn2,
.form_wrap .input_disabled,
.my_wrap .def_input,
.my_wrap .def_input2,
.my_wrap .input_disabled{
	height:48px; border-radius:10px;
}
.my_wrap .def_input,
.my_wrap .def_input2,
.my_wrap .input_disabled{ font-size:15px; }
.my_wrap .def_input2{ line-height:46px; }
.form_wrap .def_input_btn2{ line-height:48px; }

/* ── 3. 포커스 표시 : 초록 2px 링(전 입력 공통 1규칙) ─────────────────────
   기존 두 style_v2 어디에도 :focus 규칙이 없어 포커스 표시가 전무했다. */
.form_wrap input:focus,
.form_wrap select:focus,
.form_wrap textarea:focus,
.join_wrap input:focus,
.join_wrap select:focus,
.join_wrap textarea:focus,
.find_wrap input:focus,
.find_wrap select:focus,
.find_wrap textarea:focus,
.my_wrap input:focus,
.my_wrap select:focus,
.my_wrap textarea:focus{
	border-color:#3D6041;
	outline:2px solid #3D6041;
	outline-offset:1px;
}
/* 체크박스·라디오는 화면 밖으로 밀어 둔 opacity:0 입력이라 라벨에 링을 준다 */
.form_wrap .check_wrap input:focus-visible + label,
.join_wrap .check_wrap input:focus-visible + label,
.my_wrap .check_wrap input:focus-visible + label{
	outline:2px solid #3D6041; outline-offset:2px; border-radius:4px;
}
/* 래퍼 밖(주소수정 화면의 우편번호 입력 등)까지 한 규칙으로 덮는다.
   이 시트는 회원 화면에서만 로드되므로 다른 화면에 새지 않는다. */
.def_input:focus, .def_input2:focus, .def_input_btn:focus, .def_input_btn2:focus,
input[type=text]:focus, input[type=password]:focus, input[type=tel]:focus,
input[type=email]:focus, input[type=number]:focus, input[type=search]:focus,
select:focus, textarea:focus{
	border-color:#3D6041; outline:2px solid #3D6041; outline-offset:1px;
}

/* ── 4. 경고 문구 : 11px → 13.5px · 경고색 #D8352A ─────────────────────────
   ⚠ display:none 은 기본 숨김. 보이기/숨기기는 기존 JS 가 인라인 display 로
     토글하므로(guestComm passChk 등) 동작은 그대로다. 모바일 find_id·
     find_pw_step2 의 인라인 style(11px·#D62A16)을 걷어내며 이 규칙이 그 자리를
     대신한다. */
.form_wrap .warn,
.join_wrap .warn,
.find_wrap .warn,
.my_wrap .warn,
.join_step4_wrap .warn,
.make_id_wrap .warn,
/* ↓ 아래 3클래스 선택자들은 style_v2 의 원본과 특정도를 맞춘 것(같으면 뒤가 이김) */
.form_wrap .input_box .warn,
.find_wrap .input_box .warn,
.my_wrap .input_box .warn,
.find_id_wrap .txt_box .warn,
.join_step4_wrap .input_wrap .warn,
.join_step4_wrap .agg_wrap .warn,
.make_id_wrap .input_wrap .warn{
	display:none; font-size:13.5px; color:#D8352A; letter-spacing:-.02em;
}

/* ── 4-b. 안내 리드문(주소수정 등) : 금지 회색 #888 자리 ───────────────────── */
.mqc_lead{ display:inline-block; font-size:17px; font-weight:700; color:#1D271E; letter-spacing:-.02em; }

/* ── 5. 필수 표시 * : 옛 순빨강 #FE0605 → 경고색 #D8352A(글자만) ─────────── */
.form_wrap .form_tt .icon,
.join_step4_wrap .agg_list_wrap .s_tt .icon,
.make_id_wrap .input_wrap .icon,
.my_wrap .input_wrap .icon{
	color:#D8352A; background:none; font-weight:400;
}

/* ── 6. 회색 하한 : #828284 · #858585 · #9CA09F · #707070 → #5F6B62 ─────── */
.form_wrap .txt_list_box,
.join_wrap .txt_list_box,
.find_wrap .txt_list_box,
.my_wrap .txt_list_box,
.join_wrap .title_wrap .location,
.join_step4_wrap .agg_wrap .btn_detail,
.join_step4_wrap .agg_wrap .txt_g,
.my_wrap .check_wrap,
.find_id_wrap .con_box th{
	color:#5F6B62;
}
.form_wrap .check_wrap input[type=checkbox]:not(old) + label:before,
.my_wrap .check_wrap input[type=checkbox]:not(old) + label:before{
	border-color:#5F6B62;
}

/* ── 7. 아이디 복사 버튼(모바일) : 11px → 13px · 터치 높이 확보 ───────────── */
.find_id_wrap .con_box .copy{
	height:30px; line-height:28px; font-size:13px; border-radius:8px;
	border-color:#DFE5DC; color:#1D271E;
}

/* ── 8. 빈 상태(§4) : 문장 2줄 + 다음 행동 버튼 1개 ───────────────────────
   아이디 찾기 0건 등에서 쓰는 공용 블록. 아이콘 없음. */
.mqc_empty{ padding:56px 0 40px; text-align:center; }
.mqc_empty .mqc_e_tt{ display:block; font-size:17px; font-weight:700; color:#1D271E; letter-spacing:-.02em; }
.mqc_empty .mqc_e_sub{ display:block; margin-top:8px; font-size:15px; font-weight:500; color:#5F6B62; letter-spacing:-.02em; }
.mqc_empty .mqc_e_btns{ margin:24px auto 0; max-width:340px; }
.mqc_empty .mqc_e_btns .btn_green,
.mqc_empty .mqc_e_btns .btn_white{ display:block; width:100%; }
.mqc_empty .mqc_e_btns .btn_white{ margin-top:10px; }

/* ── 9. 안내만 있고 나갈 길이 없던 화면의 버튼 줄 ─────────────────────────── */
.mqc_exit{ margin:20px auto 0; max-width:340px; }
.mqc_exit .btn_green,
.mqc_exit .btn_white{ display:block; width:100%; }
.mqc_exit .btn_white{ margin-top:10px; }