/*
* 회원가입 2단계(정보 입력) 리뉴얼 — signup_form.html
* 안전 규칙: 모든 선택자는 #fo_insert_member 안으로만 한정(다른 회원 화면·라이믹스 영향 없음).
* display:none / visibility / opacity 로 항목을 숨기지 않는다. 모양(색·간격·모서리·크기)만 바꾼다.
*/
/* 폼 카드 */
#fo_insert_member { max-width: 720px; margin: 0 auto; font-family: 'Nanum Gothic', sans-serif; color: #1e2b45; }
#fo_insert_member .reg-div-wrap-main { margin-top: 22px !important; }
#fo_insert_member .reg-div-wrap {
padding: 28px 32px 22px !important;
border: 1px solid #dbe4ec !important;
border-radius: 18px !important;
background: #fff !important;
box-shadow: 0 2px 10px rgba(30, 43, 69, .06) !important;
}
/* 진행 단계 (1단계와 같은 모양) */
#fo_insert_member .su-steps {
display: flex;
justify-content: center;
gap: 8px;
margin: 6px 0 0;
padding: 0;
list-style: none;
}
#fo_insert_member .su-steps li { display: flex; align-items: center; gap: 8px; color: #9aa6b5; font-size: 14px; font-weight: 700; }
#fo_insert_member .su-steps li + li::before { content: ""; width: 28px; height: 2px; margin-right: 2px; border-radius: 1px; background: #dbe4ec; }
#fo_insert_member .su-steps li.is-done + li::before { background: #38a8bd; }
#fo_insert_member .su-steps span {
display: inline-flex; align-items: center; justify-content: center;
width: 26px; height: 26px; border-radius: 50%;
background: #e6eef3; color: #6b7a90; font-size: 13px; font-weight: 800;
}
#fo_insert_member .su-steps .is-done { color: #38a8bd; }
#fo_insert_member .su-steps .is-done span { background: #eaf6f8; }
#fo_insert_member .su-steps .is-done svg { width: 15px; height: 15px; fill: none; stroke: #38a8bd; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
#fo_insert_member .su-steps .is-on { color: #1e2b45; }
#fo_insert_member .su-steps .is-on span { background: #38a8bd; color: #fff; box-shadow: 0 0 0 4px #eaf6f8; }
/* 항목 행 */
#fo_insert_member .control-group { margin-bottom: 16px !important; }
#fo_insert_member .control-label { color: #1e2b45 !important; font-size: 14px !important; font-weight: 800 !important; }
#fo_insert_member .control-label em { color: #e5484d !important; font-style: normal; }
#fo_insert_member .help-block,
#fo_insert_member .help-inline { margin-top: 6px !important; color: #8a97a8 !important; font-size: 12.5px !important; line-height: 1.5 !important; }
/* 입력칸 공통 */
#fo_insert_member input[type="text"],
#fo_insert_member input[type="password"],
#fo_insert_member input[type="email"],
#fo_insert_member input[type="tel"],
#fo_insert_member input[type="date"],
#fo_insert_member select,
#fo_insert_member textarea {
box-sizing: border-box !important;
height: 44px !important;
padding: 0 12px !important;
border: 1px solid #d3dde6 !important;
border-radius: 10px !important;
background-color: #fff !important;
color: #1e2b45 !important;
font-size: 15px !important;
line-height: 42px !important;
box-shadow: none !important;
transition: border-color .2s, box-shadow .2s;
}
#fo_insert_member textarea { height: auto !important; min-height: 88px; line-height: 1.5 !important; padding: 10px 12px !important; }
#fo_insert_member input:focus,
#fo_insert_member select:focus,
#fo_insert_member textarea:focus {
border-color: #38a8bd !important;
box-shadow: 0 0 0 3px rgba(56, 168, 189, .15) !important;
outline: none !important;
}
#fo_insert_member input::placeholder { color: #a7b2c0; }
/* 비활성·읽기전용(주소 자동입력, 면허번호): 입력 불가임이 보이게 연회색 유지 */
#fo_insert_member input[disabled],
#fo_insert_member input[readonly] { background-color: #f3f6f9 !important; color: #4a5a70 !important; }
#fo_insert_member input#license[readonly] { cursor: pointer; }
/* PC: 입력칸 폭 */
#fo_insert_member .controls > input[type="text"],
#fo_insert_member .controls > input[type="password"],
#fo_insert_member .controls > input[type="email"],
#fo_insert_member .controls > input[type="date"] { width: 300px !important; max-width: 100%; }
#fo_insert_member .controls > select { min-width: 110px; }
/* 휴대폰 3칸 (원래 inline width 33px) */
#fo_insert_member input.tel { width: 76px !important; margin-right: 4px !important; text-align: center !important; }
/* 휴대폰 3칸을 한 줄로 (인라인 공백 때문에 줄바꿈되던 문제) */
#fo_insert_member .controls:has(> input.tel) { display: flex; gap: 6px; }
#fo_insert_member .controls:has(> input.tel) > input.tel { margin: 0 !important; }
/* 주소(krzip) */
#fo_insert_member .krZip > div { margin-bottom: 8px; }
#fo_insert_member .krZip label { display: block; margin: 0 0 4px; color: #6b7a90; font-size: 12.5px; font-weight: 700; }
#fo_insert_member .krzip-postcode { width: 140px !important; }
#fo_insert_member .krzip-roadAddress,
#fo_insert_member .krzip-jibunAddress,
#fo_insert_member .krzip-detailAddress { width: 100% !important; max-width: 440px; margin-bottom: 6px !important; }
#fo_insert_member .krzip-extraAddress { width: 100% !important; max-width: 440px; }
/* 보조 버튼: 주소 검색, 생일 삭제 */
#fo_insert_member input.btn.krzip-search,
#fo_insert_member input.btn.dateRemover {
height: 44px !important;
margin-left: 6px !important;
padding: 0 16px !important;
border: 1px solid #38a8bd !important;
border-radius: 10px !important;
background: #fff !important;
background-image: none !important;
color: #2f8fa3 !important;
font-size: 14px !important;
font-weight: 800 !important;
text-shadow: none !important;
box-shadow: none !important;
vertical-align: middle;
cursor: pointer;
}
#fo_insert_member input.btn.krzip-search:hover,
#fo_insert_member input.btn.dateRemover:hover { background: #eaf6f8 !important; }
/* 면허인증 버튼 */
#fo_insert_member .open-lic-check-btn {
display: inline-flex !important;
align-items: center;
gap: 6px;
height: 44px;
margin-left: 6px !important;
padding: 0 16px !important;
border: 0 !important;
border-radius: 10px !important;
background: #38a8bd !important;
color: #fff !important;
font-size: 14px !important;
font-weight: 800 !important;
vertical-align: middle;
cursor: pointer;
transition: background .2s;
}
#fo_insert_member .open-lic-check-btn:hover { background: #2f8fa3 !important; }
/* identy_license.css 의 #licCheck img{position:absolute} 를 덮어 글자와 겹치지 않게 */
#fo_insert_member #licCheck img { position: static !important; width: 18px !important; height: 18px; filter: brightness(0) invert(1) !important; }
/* 약관 동의 */
#fo_insert_member .agreements-wrapper {
padding: 14px 16px;
border: 1px solid #dbe4ec;
border-radius: 14px;
background: #fff;
}
#fo_insert_member .agreements-wrapper > .agreement-div:first-child {
padding: 10px 12px;
border-radius: 10px;
background: #eaf6f8;
}
#fo_insert_member .agreement-all-text { color: #1e2b45; font-weight: 800; }
#fo_insert_member .agreement-span-text { color: #1e2b45; }
#fo_insert_member .agreement-required-div { color: #e5484d !important; }
#fo_insert_member .agreement-show {
padding: 4px 10px !important;
border: 1px solid #d3dde6 !important;
border-radius: 14px !important;
background: #f7f9fb !important;
color: #4a5a70 !important;
font-size: 12.5px !important;
font-weight: 700;
cursor: pointer;
}
#fo_insert_member .agreement-show:hover { border-color: #38a8bd !important; color: #2f8fa3 !important; }
#fo_insert_member .checkbox-wrapper-15 .cbx span:first-child { border-color: #b9c6d3; }
#fo_insert_member .checkbox-wrapper-15 .inp-cbx:checked + .cbx span:first-child { border-color: #38a8bd; background: #38a8bd; }
/* 등록 / 취소 */
#fo_insert_member .btnArea {
display: flex !important;
flex-direction: row-reverse;
gap: 10px;
margin-top: 22px !important;
padding-top: 18px !important;
border-top: 1px solid #e6eef3 !important;
}
#fo_insert_member .btnArea .btn {
float: none !important;
box-sizing: border-box !important;
margin: 0 !important;
height: 50px !important;
min-height: 0 !important;
border-radius: 12px !important;
font-size: 16px !important;
font-weight: 800 !important;
line-height: 50px !important;
text-shadow: none !important;
box-shadow: none !important;
background-image: none !important;
}
#fo_insert_member .btnArea input[type="submit"].btn {
flex: 1;
padding: 0 20px !important;
border: 0 !important;
background: #38a8bd !important;
color: #fff !important;
cursor: pointer;
}
#fo_insert_member .btnArea input[type="submit"].btn:hover { background: #2f8fa3 !important; }
#fo_insert_member .btnArea a.btn {
flex: none;
width: 120px;
padding: 0 !important;
border: 1px solid #d3dde6 !important;
background: #f3f6f9 !important;
color: #4a5a70 !important;
text-align: center;
text-decoration: none !important;
}
/* 모바일: 입력칸 전체 폭 */
@media (max-width: 768px) {
#fo_insert_member .reg-div-wrap { padding: 20px 16px 16px !important; border-radius: 16px !important; }
#fo_insert_member .su-steps { gap: 4px; }
#fo_insert_member .su-steps li { gap: 5px; font-size: 12px; }
#fo_insert_member .su-steps li + li::before { width: 14px; }
#fo_insert_member .controls > input[type="text"],
#fo_insert_member .controls > input[type="password"],
#fo_insert_member .controls > input[type="email"] { width: 100% !important; }
#fo_insert_member .controls > input[type="date"] { width: calc(100% - 78px) !important; }
#fo_insert_member input.tel { flex: 1; width: auto !important; min-width: 0; }
#fo_insert_member .krzip-postcode { width: calc(100% - 82px) !important; }
#fo_insert_member .krzip-roadAddress,
#fo_insert_member .krzip-jibunAddress,
#fo_insert_member .krzip-detailAddress,
#fo_insert_member .krzip-extraAddress { max-width: none; }
#fo_insert_member input#license { width: calc(100% - 118px) !important; }
#fo_insert_member .btnArea a.btn { width: 96px; }
/* 오픈 닉네임 '?' 버튼: new_member.js 가 휴대폰 UA 면 라벨 옆, 아니면(좁은 PC 창·데스크톱 모드) 입력칸 뒤에 넣는다.
new_member.css 의 .qst-div{left:-40px} 때문에 입력칸 뒤에 들어가면 카드 밖 왼쪽으로 밀려나던 문제 → 어느 경우든 라벨 옆에 오도록 */
#fo_insert_member .control-group { position: relative; }
#fo_insert_member .qst-div { left: 0 !important; }
#fo_insert_member .controls > .qst-div-wrap { position: absolute; top: 0; left: 114px; }
}
/* new_member.css 의 아주 구체적인 선택자(#fo_insert_member > div.reg-div-wrap-main.mgt-50 > … > input.btn.btn-inverse.pull-right,
padding 10px·margin-top 10px·height auto !important)를 이기기 위해 같은 경로 + html 로 한 단계 더 구체화 */
html #fo_insert_member > div.reg-div-wrap-main.mgt-50 > div > div.btnArea > input.btn.btn-inverse.pull-right {
height: 50px !important;
margin: 0 !important;
padding: 0 20px !important;
}