/* 회원가입 3단계 (2026-08-19)
   약관동의 · 정보입력 · 가입완료 세 화면이 함께 읽는다.
   style.css 는 회원 스킨 전체(로그인·비밀번호찾기·회원정보수정)가 같이 읽어서
   손대지 않고 여기서 덧입힌다. */

.register, #register_form, #reg_result, .step, .btn_confirm_reg{
	font-family:'Manrope','Pretendard Variable','Pretendard','Noto Sans KR',sans-serif; }
.register{ max-width:860px; padding:60px 20px 90px; }

/* ── 단계 표시 ──
   예전에는 회색 상자 세 개에 현재만 흰 바탕 + 주황 글씨(#ff6427)였다.
   사이트에 없는 색이고, 무엇보다 좁은 화면에서는 통째로 감췄다(display:none).
   지금 몇 단계인지가 가입 흐름에서 가장 중요한 정보다. */
.step{ display:flex; gap:0; overflow:visible; margin:0 0 34px; counter-reset:st; }
.step div.step1{ flex:1 1 0; width:auto; float:none; margin:0; padding:0 8px 18px;
	position:relative; background:none; border:none; text-align:center;
	font-size:14px; font-weight:700; color:#b4bbc6; }
.step div.step1:after{ position:absolute; left:0; bottom:0; width:100%; height:3px;
	background:#e5e8ee; content:''; }
.step div.step1 b{ display:block; margin-bottom:6px; font-size:12px; letter-spacing:0.5px;
	color:#c2c8d2; }
.step div.step1.sel{ color:#203864; }
.step div.step1.sel b{ color:#b08d4a; }
.step div.step1.sel:after{ background:#203864; }

/* ── 1단계 : 약관 ── */
.squarebox{ border:1px solid #e5e8ee; border-radius:12px; padding:30px;
	margin-bottom:30px; box-shadow:0 6px 20px rgba(16,28,56,0.06); }
#fregister h2{ font-size:18px; font-weight:800; letter-spacing:-0.5px; color:#203864;
	padding:0 0 12px; }
#fregister textarea{ border:1px solid #e5e8ee; border-radius:8px; background:#f8fafc;
	padding:18px; height:170px; font-size:13.5px; line-height:1.75; color:#5a6474; }
#fregister_term{ border-bottom:1px solid #e5e8ee; padding-bottom:22px; }
#fregister_private table th{ background:#f8fafc; border-color:#e5e8ee; color:#5a6474;
	font-size:13.5px; font-weight:700; }
#fregister_private table td{ border-color:#e5e8ee; font-size:13.5px; color:#4a4a4a;
	line-height:1.6; }
.agreechkbox{ display:flex; align-items:center; gap:8px; justify-content:flex-end;
	margin-top:14px; font-size:14.5px; font-weight:700; color:#203864; }
.agreechkbox .fregister_agree{ display:flex; align-items:center; }

/* ── 2단계 : 정보입력 ── */
#register_form{ padding:34px 30px; border:1px solid #e5e8ee; border-radius:12px;
	box-shadow:0 6px 20px rgba(16,28,56,0.06); }
#register_form h2{ font-size:18px; font-weight:800; letter-spacing:-0.5px; color:#203864;
	padding:0 0 12px; margin-bottom:22px; border-bottom:1px solid #e5e8ee; }
.register_form_inner + .register_form_inner{ margin-top:34px; }

/* 항목 이름을 입력칸 위로 올린다.
   예전에는 왼쪽 150px 자리에 absolute 로 얹어 두어서, 이름이 길면 잘렸다. */
/* 항목 이름을 입력칸 위로.
   .cyform 으로 잡으면 '기타 개인설정' 블록만 빠진다. 그 블록에는 클래스가 없다.
   #register_form 아래 전체로 잡아 세 블록을 함께 맞춘다. */
#register_form ul li{ padding-left:0; margin-bottom:18px; font-size:15px; }
#register_form ul li > label{ position:static; display:block; width:auto; height:auto;
	line-height:1.4; margin-bottom:8px; font-size:14px; font-weight:700; color:#203864; }
/* 체크박스 줄의 label 은 네모만 담고 있어 위 규칙에서 뺀다 */
#register_form li.chk_box > label{ display:inline; width:auto; margin:0; }
#register_form input[type=text], #register_form input[type=password],
#register_form input[type=email]{ height:48px; padding:0 14px; border:1px solid #c9d0da;
	border-radius:6px; font-size:15px; color:#333; background:#fff;
	transition:border-color .15s; }
#register_form input[type=text]:focus, #register_form input[type=password]:focus{
	outline:none; border-color:#203864; }
#register_form input[readonly]{ background:#f4f6f9; color:#6b7480; }
/* 인증코드 칸.
   flex 로 짜면 안 된다. 인증코드 확인 줄(#codeChk_hp)은 평소 숨겨 뒀다가
   jQuery .show() 로 여는데, 그때 인라인으로 display:block 이 박혀 flex 가 무시된다.
   그래서 버튼을 절대 위치로 띄운다. 바깥 상자의 display 가 무엇이든 자리가 지켜진다. */
#register_form .inj{ position:relative; padding-right:140px; }
#register_form .inj input{ width:100%; }
#register_form .inj button{ position:absolute; right:0; top:0; width:130px; height:48px;
	margin:0; background:#203864; border:1px solid #203864; color:#fff; border-radius:6px;
	font-size:14px; font-weight:700; cursor:pointer; transition:background-color .2s; }
#register_form .inj button:hover{ background:#2f4f8f; }
#fregisterform #codeChk_hp, #fregisterform #codeChk_mail{ margin-top:8px; }
/* 확인 표시(빨간 X · 초록 체크)가 글자와 겹치지 않게 오른쪽 자리를 비운다 */
#fregisterform #codeChk_hp input, #fregisterform #codeChk_mail input{ padding-right:42px;
	background-size:22px auto !important; background-position:right 12px center !important; }
#fregisterform .cert_desc{ color:#5a6474; font-weight:500; }
/* ── 체크박스 ──
   네모(span)가 label 안에서 float:left 로 떠 있고 글자는 그 옆 .chk_li 가 흘러가는 구조다.
   구조는 그대로 두고 어긋난 것만 고친다.

   ① 선택했을 때만 margin-top:3px 이 붙어서 켤 때와 끌 때 위치가 달랐다. 양쪽을 같게 한다.
   ② 색이 파란색(#3a8afd)이었다. 사이트 색(#203864)으로 맞춘다. */
#register_form li.chk_box{ margin-bottom:13px; padding-left:0; line-height:20px; }
#register_form li.chk_box input[type="checkbox"] + label span{
	width:18px; height:18px; margin-top:1px; border:1px solid #c9d0da; border-radius:4px;
	background:#fff; transition:background-color .15s, border-color .15s; }
#register_form li.chk_box input[type="checkbox"]:checked + label span{
	margin-top:1px;
	background:url(./img/chk.png) no-repeat 50% 50% #203864; border-color:#203864; }
/* 네모와 글자가 붙어 보인다. style.css 의 padding-left:10px 을 조금 더 준다. */
#register_form li.chk_box .chk_li{ padding-left:9px; font-size:14.5px; color:#4a4a4a; }

.chk_li{ padding-left:0; font-size:14.5px; color:#4a4a4a; }

/* ── 자동등록방지 ──
   그림·입력칸·버튼이 서로 다른 높이(40px/40px/40px)로 붙어 있어 들쭉날쭉했다. */
#fregisterform .is_captcha_use{ margin-top:6px; }
#fregisterform .captcha{ margin-top:10px; }
#captcha{ display:flex; align-items:center; gap:6px; }
#captcha #captcha_img{ height:46px; border:1px solid #c9d0da; border-radius:6px; }
#captcha #captcha_key{ width:110px; height:46px; margin:0; border:1px solid #c9d0da;
	border-radius:6px; font-size:16px; }
#captcha #captcha_mp3, #captcha #captcha_reload{ width:46px; height:46px;
	border:1px solid #e5e8ee; border-radius:6px; background-color:#f8fafc; }
/* 안내 문구는 flex 항목이라 버튼 옆에 끼어 든다. 줄을 바꿔 아래로 내린다. */
#captcha{ flex-wrap:wrap; }
#captcha #captcha_info{ flex:1 1 100%; margin-top:8px; font-size:13px; color:#8b93a1;
	letter-spacing:0; }

/* ── 버튼 ── */
.register .btn_confirm{ display:flex; justify-content:center; gap:10px; margin-top:34px; }
.register .btn_confirm .btn_submit,
.register .btn_confirm .btn_close{ width:170px !important; min-width:0; height:52px !important;
	line-height:50px; border-radius:0; font-size:15.5px; font-weight:700; margin:0;
	cursor:pointer; transition:background-color .2s, border-color .2s, color .2s; }
.register .btn_confirm .btn_submit{ background:#203864; border:1px solid #203864; color:#fff; }
.register .btn_confirm .btn_submit:hover{ background:#2f4f8f; border-color:#2f4f8f; }
.register .btn_confirm .btn_close{ background:#fff; border:1px solid #c9d0da; color:#5a6474; }
.register .btn_confirm .btn_close:hover{ border-color:#203864; color:#203864; }

/* ── 3단계 : 완료 ── */
#reg_result{ padding:0; }
#reg_result .arbox{ border:1px solid #e5e8ee; border-radius:12px; padding:54px 30px;
	box-shadow:0 6px 20px rgba(16,28,56,0.06); }
#reg_result .reg_result_p{ font-size:24px; font-weight:800; letter-spacing:-0.5px;
	color:#203864; margin:0; }
#reg_result .reg_result_p i{ font-size:76px; color:#1f7a4d; margin-bottom:18px; }
#reg_result .reg_result_p b{ color:#203864; }
#reg_result .result_txt{ margin-top:26px; font-size:15px; line-height:1.8; color:#5a6474; }
#reg_result #result_email{ display:inline-block; margin:26px 0 0; padding:20px 26px;
	border:1px solid #e5e8ee; border-radius:8px; background:#f8fafc; text-align:left;
	line-height:2; }
#reg_result #result_email span{ width:90px; font-size:14px; color:#8b93a1; }
#reg_result #result_email strong{ color:#203864; font-size:15.5px; font-weight:700; }
#reg_result .result_txt b{ color:#203864; font-weight:800; }
/* 문의 안내는 한 단계 낮은 정보라 작게 둔다 */
#reg_result .result_help{ margin:22px 0 0; font-size:14px; line-height:1.7; color:#8b93a1;
	word-break:keep-all; }
.btn_confirm_reg{ margin:34px 0 0; }
.reg_btn_submit{ width:220px; height:52px; line-height:52px; border-radius:0;
	background:#203864; font-size:15.5px; transition:background-color .2s; }
.reg_btn_submit:hover{ background:#2f4f8f; }

@media all and (max-width:767px) {
	.register{ padding:44px 16px 70px; }
	/* 예전에는 이 폭에서 단계 표시를 감췄다. 줄여서 남긴다. */
	.step{ display:flex; margin-bottom:26px; }
	.step div.step1{ padding:0 4px 14px; font-size:12.5px; }
	.step div.step1 b{ font-size:11px; }
	.squarebox, #register_form{ padding:24px 20px; }
	/* 좁은 화면에서는 버튼을 아래로 내린다 */
	#register_form .inj{ padding-right:0; }
	#register_form .inj button{ position:static; width:100%; margin-top:8px; }
	.register .btn_confirm{ flex-direction:column; }
	.register .btn_confirm .btn_submit,
	.register .btn_confirm .btn_close{ width:100% !important; }
	#reg_result .arbox{ padding:40px 20px; }
	#reg_result .reg_result_p{ font-size:19px; }
	#reg_result .reg_result_p i{ font-size:60px; }
	#reg_result #result_email{ display:block; }
	.reg_btn_submit{ width:100%; }
}