@charset "utf-8";
/* =========================================================================
   회원가입 리디자인 (피그마 2026.07.03 섹션 / 587:316 약관동의, 587:360 기본정보)
   [260811]
   - 마크업 골격과 JS 계약(id/name/onclick)은 건드리지 않고 스킨만 교체한다.
   - 적용 범위: .join_renew 가 붙은 페이지에서만 동작 (다른 로그인 계열 화면 무영향)
   디자인 토큰
     페이지 배경 #000  |  카드 #0E141C r10  |  입력창 bd#666 r5 h50
     라벨 마커 15x15 #11A0EE  |  라벨 17px  |  placeholder #888
     보조버튼 #11A0EE 10% + bd#11A0EE  |  주버튼 반투명 네이비 채움 + bd grad(#00B8FC→#5163FE)
     약관박스 grad(#0A2942 100%→15%) r20
   ========================================================================= */

/* ── 히어로 ────────────────────────────────────────────────────────────── */
.join_hero {
	position: relative;
	width: 100%;
	height: 380px;
	padding-top: 95px; /* [260820] 고정 헤더에 제목이 붙지 않게 상단 간격 확보 */
	box-sizing: border-box;
	/* [260820] 렌즈플레어 이미지 제거 — 상품 리스트 톤(블랙~딥네이비 저채도)으로 통일 */
	/* [260826] PPT s15: 시안 실측(좌상 #000611 → 하단 순블랙)에 맞춰 밝기를 낮추고,
	   하단이 본문 배경 #000 으로 수렴하게 해 히어로↔본문 단차를 없앤다.
	   시안에는 히어로 하단 경계선이 없으므로 border-bottom 도 두지 않는다. */
	background: #000 linear-gradient(180deg, #000611 0%, #000510 80%, #000000 100%) no-repeat;
	display: flex;
	align-items: center;
}
.join_hero_inner {
	width: 100%;
	max-width: 1300px;
	margin: 0 auto;
	padding: 0 20px;
	box-sizing: border-box;
}
.join_hero_tit {
	font-size: 50px;
	font-weight: 700;
	color: #fff;
	line-height: 1.2;
	letter-spacing: -0.5px;
}
.join_hero_desc {
	margin-top: 14px;
	font-size: 30px;
	font-weight: 400;
	color: #fff;
	line-height: 1.4;
	letter-spacing: -0.3px;
}

/* ── 본문 컨테이너 ─────────────────────────────────────────────────────── */
/* 기본 .programCon 은 1200px 고정폭이라 좌우로 body 배경(#1D1D1D)이 드러난다.
   시안은 화면 전체가 #000 이므로 풀와이드로 펼치고 안쪽 wrapper 로 중앙정렬한다. */
.join_renew .programCon,
.join_renew.programCon {
	background: #000 !important;
	width: 100%;
	max-width: none;
	/* 기본 .programCon 의 margin-top:120px 때문에 히어로와 본문 사이에
	   body 배경(회색) 띠가 생긴다 — 히어로가 그 역할을 하므로 제거 */
	margin: 0;
}
.join_renew .new_login_wrapper,
.join_renew .new_login_wrapper.wide {
	width: 100%;
	max-width: 1300px;
	margin: 0 auto;
	padding: 40px 20px 80px;
	box-sizing: border-box;
}
/* .login_tit01 은 페이지 제목과 섹션 제목("배송지 주소")에 함께 쓰이므로
   숨김은 .join_hide 가 붙은 것만 (히어로가 페이지 제목을 대신한다) */
.join_renew .login_tit01 {
	display: block;
	font-size: 30px;
	font-weight: 700;
	color: #fff;
	margin-bottom: 30px;
	text-align: left;
}
.join_renew .login_tit01.join_hide { display: none; }
/* 카드 안 섹션 제목("배송지 주소") */
.join_renew .login_tit01.join_sub_tit {
	font-size: 24px;
	margin: 0 0 24px;
}

/* ── 폼 카드 ───────────────────────────────────────────────────────────── */
.join_renew .login_form_wrapper {
	background: #0E141C;
	border-radius: 10px;
	padding: 40px;
	box-sizing: border-box;
}
.join_renew .login_form_wrapper + .login_form_wrapper { margin-top: 30px; }

/* 행 */
.join_renew .login_form_box01 {
	display: block;
	width: 100%;
	margin-bottom: 22px;
	background: none;
	border: none;
	padding: 0;
}
.join_renew .login_form_box01:last-child { margin-bottom: 0; }

/* 라벨 : 앞에 15x15 블루 마커 */
.join_renew .login_label_tit01 {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 17px;
	font-weight: 400;
	color: #fff;
	margin-bottom: 10px;
	width: auto;
	text-align: left;
}
.join_renew .login_label_tit01::before {
	content: "";
	flex: 0 0 auto;
	width: 15px;
	height: 15px;
	background: #11A0EE;
}
/* 필수(.key)가 아니어도 마커는 동일 — 시안 기준 */
.join_renew .login_label_tit01.key::after { content: none; }

/* 입력창 */
.join_renew .login_input_form_box01 {
	position: relative;
	background: #0E141C;
	border: 1px solid #16324B;
	border-radius: 5px;
	height: 50px;
	padding: 0 16px;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	width: 100%;
}
.join_renew .login_input_form_box01 input,
.join_renew .login_input_form_box01 select {
	width: 100%;
	height: 48px;
	background: transparent;
	border: none;
	outline: none;
	color: #fff;
	font-size: 17px;
	padding: 0;
	box-shadow: none;
}
.join_renew .login_input_form_box01 input::placeholder { color: #888888; }
.join_renew .login_input_form_box01:focus-within { border-color: #11A0EE; }

/* 비밀번호 보기 버튼 자리 확보 */
.join_renew .login_input_form_box01.pw { padding-right: 46px; }
.join_renew .pw_active_btn { right: 14px; }

/* 입력 + 우측 버튼 (아이디 중복확인 / 본인인증 / 우편번호검색) */
.join_renew .duplicate_flex_box {
	display: flex;
	gap: 10px;
	align-items: stretch;
	width: 100%;
}
.join_renew .duplicate_flex_box > .login_input_form_box01,
.join_renew .duplicate_flex_box > div:first-child { flex: 1 1 auto; min-width: 0; }

/* 보조 버튼 */
.join_renew .login_chk_btn01.type02 {
	flex: 0 0 auto;
	min-width: 230px;
	height: 50px;
	line-height: 48px;
	background: rgba(17, 160, 238, 0.10);
	border: 1px solid #11A0EE;
	border-radius: 5px;
	color: #11A0EE;
	font-size: 17px;
	font-weight: 500;
	text-align: center;
	padding: 0 20px;
	box-sizing: border-box;
	transition: background .2s;
}
.join_renew .login_chk_btn01.type02:hover { background: rgba(17, 160, 238, 0.20); }

/* 전화번호 3분할 / 이메일 분할 */
.join_renew .login_tel_flex_box01 {
	display: flex;
	gap: 10px;
	align-items: center;
	width: 100%;
}
.join_renew .login_tel_flex_box01 > * { flex: 1 1 0; min-width: 0; }
.join_renew .login_tel_flex_box01 .selectNum {
	height: 50px;
	background: #0E141C;
	border: 1px solid #16324B;
	border-radius: 5px;
	color: #fff;
	font-size: 17px;
	padding: 0 12px;
	box-sizing: border-box;
}
.join_renew select.selectNum option { background: #0E141C; color: #fff; }

/* 라디오 / 체크박스 */
.join_renew .login_form_box01 input[type="radio"],
.join_renew .login_form_box01 input[type="checkbox"] { accent-color: #11A0EE; }
.join_renew .login_form_box01 label,
.join_renew .chk_box01 label { color: #ddd; font-size: 16px; }

/* 하단 버튼 2분할 */
.join_renew .login_chk_btn_box01 {
	display: flex;
	gap: 20px;
	margin-top: 40px;
	width: 100%;
}
.join_renew .login_chk_btn_box01 > a,
.join_renew .login_chk_btn_box01 > .login_chk_btn01 {
	flex: 1 1 0;
	height: 50px;
	line-height: 50px;
	border-radius: 5px;
	font-size: 20px;
	font-weight: 700;
	text-align: center;
	box-sizing: border-box;
}
/* 이전(부) */
.join_renew .login_chk_btn_box01 > a.type_prev {
	background: transparent;
	border: 1px solid #666666;
	color: #fff;
}
/* 다음/확인(주) — [260820] 반투명 네이비 채움은 유지하고,
   [260826] PPT s15: 테두리를 시안 실측 그라데(#00B8FC→#5163FE)로 교체.
   radius 가 있어 border-image 는 모서리가 깨지므로 padding-box/border-box 2겹 배경 기법을 쓰고,
   채움이 반투명이라 테두리 그라데가 면으로 비치지 않도록 페이지 배경색(#000)을 아래에 깐다. */
.join_renew .login_chk_btn_box01 > a:not(.type_prev),
.join_renew .login_chk_btn01.type_next {
	background:
		linear-gradient(135deg, rgba(10, 41, 66, 0.85) 0%, rgba(10, 41, 67, 0.35) 100%) padding-box,
		linear-gradient(#000, #000) padding-box,
		linear-gradient(90deg, #00B8FC 0%, #5163FE 100%) border-box;
	border: 1px solid transparent;
	color: #fff;
	line-height: 48px;
}
.join_renew .login_chk_btn_box01 > a:not(.type_prev):hover,
.join_renew .login_chk_btn01.type_next:hover {
	background:
		linear-gradient(135deg, rgba(10, 41, 66, 0.95) 0%, rgba(10, 41, 67, 0.5) 100%) padding-box,
		linear-gradient(#000, #000) padding-box,
		linear-gradient(90deg, #38C6FF 0%, #7B88FF 100%) border-box;
}

/* 기본정보 화면의 하단 버튼줄(.login_submit_btn_box01)
   — 여기의 .type02 는 보조버튼이 아니라 "이전" 이므로 위 규칙을 되돌린다 */
.join_renew .login_submit_btn_box01 {
	display: flex;
	gap: 20px;
	margin-top: 40px;
	width: 100%;
}
.join_renew .login_submit_btn_box01 > a {
	flex: 1 1 0;
	min-width: 0;
	height: 50px;
	line-height: 50px;
	border-radius: 5px;
	font-size: 20px;
	font-weight: 700;
	text-align: center;
	padding: 0;
	box-sizing: border-box;
}
/* .type02 는 위에서 "보조버튼(230px 고정)"으로 잡혀 있어 특이도가 더 높다.
   버튼줄 안에서는 반드시 되돌려야 한 줄에 반반으로 놓인다. */
.join_renew .login_submit_btn_box01 > a.type02 {
	flex: 1 1 0;
	width: auto;
	min-width: 0;
	padding: 0;
	background: transparent;
	border: 1px solid #666666;
	color: #fff;
	font-size: 20px;
	line-height: 50px;
}
.join_renew .login_submit_btn_box01 > a.type02:hover { background: rgba(255, 255, 255, 0.06); }
/* [260826] PPT s15: 기본정보 화면의 다음(주) 버튼도 약관동의 화면과 같은 스킨
   (반투명 네이비 채움 + 그라데 테두리). 중복 선언을 이 블록 하나로 일원화한다. */
.join_renew .login_submit_btn_box01 > a:not(.type02) {
	background:
		linear-gradient(135deg, rgba(10, 41, 66, 0.85) 0%, rgba(10, 41, 67, 0.35) 100%) padding-box,
		linear-gradient(#000, #000) padding-box,
		linear-gradient(90deg, #00B8FC 0%, #5163FE 100%) border-box;
	border: 1px solid transparent;
	color: #fff;
	line-height: 48px;
}
.join_renew .login_submit_btn_box01 > a:not(.type02):hover {
	background:
		linear-gradient(135deg, rgba(10, 41, 66, 0.95) 0%, rgba(10, 41, 67, 0.5) 100%) padding-box,
		linear-gradient(#000, #000) padding-box,
		linear-gradient(90deg, #38C6FF 0%, #7B88FF 100%) border-box;
}

/* 캡차 이미지 영역 */
.join_renew .pro_flex_box {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 10px;
}
.join_renew .pro_flex_box .input_box { border-radius: 5px; }

/* 이메일 아이디 @ 도메인 + 셀렉트 (시안 587:360) */
.join_renew .email_split_box {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
}
.join_renew .email_split_box > .login_input_form_box01 { flex: 1 1 0; min-width: 0; }
.join_renew .email_split_box .email_at {
	flex: 0 0 auto;
	color: #fff;
	font-size: 17px;
}
.join_renew .email_split_box .email_sel {
	flex: 0 0 auto;
	width: 230px;
	height: 50px;
	background: #0E141C;
	border: 1px solid #16324B;
	border-radius: 5px;
	color: #fff;
	font-size: 17px;
	padding: 0 12px;
	box-sizing: border-box;
}
.join_renew .email_split_box .email_sel option { background: #0E141C; color: #fff; }

/* 방문경로 체크박스 줄은 게임장르와 동일 인라인 스타일 사용 */

/* 마케팅 및 광고 활용 동의 카드 */
.join_renew .join_marketing_card { }
.join_renew .join_marketing_row {
	display: flex;
	flex-wrap: wrap;
	gap: 14px 40px;
}
.join_renew .join_marketing_row .id_save_box {
	margin-top: 0;
	font-size: 16px;
}

/* ── 약관동의 화면 ─────────────────────────────────────────────────────── */
.join_renew .login_etc_wrapper { margin-bottom: 40px; }
.join_renew .login_etc_wrapper .login_label_tit01 {
	font-size: 20px;
	margin-bottom: 16px;
}
.join_renew .login_etc_wrapper .login_label_tit01::before { content: none; }
.join_renew .login_etc_box01 {
	background: linear-gradient(135deg, #0A2942 0%, rgba(10, 41, 67, 0.14) 100%); /* [260820] 상품 카드와 동일 스펙 통일 */
	/* [260826] PPT s15: 시안에는 테두리가 없고 그라데 면만으로 영역을 만든다 */
	border: none;
	border-radius: 10px;
	height: 270px;
	overflow-y: auto;
	padding: 30px;
	box-sizing: border-box;
	color: #cfd6de;
	font-size: 15px;
	line-height: 1.7;
}
.join_renew .login_etc_box01 .txt_box { color: #cfd6de; }
.join_renew .login_etc_box01::-webkit-scrollbar { width: 6px; }
.join_renew .login_etc_box01::-webkit-scrollbar-thumb { background: #24517B; border-radius: 3px; }
.join_renew .login_etc_box01::-webkit-scrollbar-track { background: transparent; }

.join_renew .id_save_box {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 18px;
	color: #fff;
	font-size: 16px;
	cursor: pointer;
}
.join_renew .id_save_box .id_save_btn {
	width: 25px;
	height: 25px;
	border: 1px solid #CCCCCC;
	border-radius: 5px;
	accent-color: #11A0EE;
	flex: 0 0 auto;
}

/* 약관동의 화면은 폼 카드 배경을 쓰지 않는다(시안: 배경 위에 바로 배치) */
.join_renew.join_agree .login_form_wrapper {
	background: none;
	padding: 0;
}

/* ── 반응형 ────────────────────────────────────────────────────────────── */
@media all and (max-width: 1024px) {
	.join_hero { height: 250px; padding-top: 70px; }
	.join_hero_tit { font-size: 32px; }
	.join_hero_desc { font-size: 18px; margin-top: 10px; }
	.join_renew .login_form_wrapper { padding: 24px 18px; }
	.join_renew .login_chk_btn01.type02 { min-width: 120px; font-size: 15px; }
}
@media all and (max-width: 640px) {
	.join_hero { height: 160px; }
	.join_hero_tit { font-size: 26px; }
	.join_hero_desc { font-size: 15px; }
	.join_renew .new_login_wrapper,
	.join_renew .new_login_wrapper.wide { padding: 24px 16px 60px; }
	.join_renew .duplicate_flex_box { flex-wrap: wrap; }
	.join_renew .duplicate_flex_box > .login_input_form_box01 { flex: 1 1 100%; }
	.join_renew .login_chk_btn01.type02 { flex: 1 1 100%; min-width: 0; }
	.join_renew .login_chk_btn_box01 { flex-direction: column; gap: 12px; }
	.join_renew .login_etc_box01 { height: 220px; padding: 20px; }
	.join_renew .login_tel_flex_box01 { flex-wrap: wrap; }
	/* [260826] 이메일 3분할이 모바일에서 붕괴(아이디·도메인 각 34px)하던 문제 —
	   230px 고정폭 셀렉트를 아래 줄로 내려 전체 폭을 쓰게 한다 */
	.join_renew .email_split_box { flex-wrap: wrap; }
	.join_renew .email_split_box > .login_input_form_box01 { flex: 1 1 0; min-width: 90px; }
	.join_renew .email_split_box .email_sel { flex: 1 1 100%; width: auto; order: 3; }
}

/* ══════════════════════════════════════════════════════════════════
   [260902] 기본정보 입력 — "선호하는 게임 종류" / "방문경로" 항목 아이콘
   시안 931:400 · 931:453 (Figma 7AG312PxRsRLQw3DpVVHtx)
   아이콘 원본은 시안에서 그대로 내려받은 SVG(/img/join/ico/*.svg)를 쓰고,
   색은 SVG 안의 fill 대신 CSS mask + background-color 로 입힌다
   (파일 하나로 상태별 색을 바꿀 수 있고, 시안의 #CCCCCC 톤을 유지).
   ══════════════════════════════════════════════════════════════════ */
/* 체크박스와 라벨은 .id_save_box 의 gap(10px)으로 벌어지고,
   아이콘과 글자는 시안대로 5px 로 묶는다 */
.join_renew .id_save_box .opt_lab {
	display: inline-flex;
	align-items: center;
	gap: 5px;
}
.join_renew .join_ico {
	display: inline-block;
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	background-color: #CCCCCC;
	-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
	-webkit-mask-position: center;  mask-position: center;
	-webkit-mask-size: contain;     mask-size: contain;
}
/* 선호하는 게임 종류 */
.join_renew .join_ico.ico_fps      { -webkit-mask-image: url(/img/join/ico/fps.svg);      mask-image: url(/img/join/ico/fps.svg); }
.join_renew .join_ico.ico_rpg      { -webkit-mask-image: url(/img/join/ico/rpg.svg);      mask-image: url(/img/join/ico/rpg.svg); }
.join_renew .join_ico.ico_aos      { -webkit-mask-image: url(/img/join/ico/aos.svg);      mask-image: url(/img/join/ico/aos.svg); }
.join_renew .join_ico.ico_sports   { -webkit-mask-image: url(/img/join/ico/sports.svg);   mask-image: url(/img/join/ico/sports.svg); }
.join_renew .join_ico.ico_strategy { -webkit-mask-image: url(/img/join/ico/strategy.svg); mask-image: url(/img/join/ico/strategy.svg); }
/* 방문경로 */
.join_renew .join_ico.ico_search   { -webkit-mask-image: url(/img/join/ico/search.svg);   mask-image: url(/img/join/ico/search.svg); }
.join_renew .join_ico.ico_ad       { -webkit-mask-image: url(/img/join/ico/ad.svg);       mask-image: url(/img/join/ico/ad.svg); }
.join_renew .join_ico.ico_compare  { -webkit-mask-image: url(/img/join/ico/compare.svg);  mask-image: url(/img/join/ico/compare.svg); }
.join_renew .join_ico.ico_store    { -webkit-mask-image: url(/img/join/ico/store.svg);    mask-image: url(/img/join/ico/store.svg); }


/* [260921] 본인인증 전 잠긴 필드(이름/휴대폰/생년월일/성별) — 잠금 표시 + 클릭 시 본인인증 팝업 */
.join_renew input.nice_locked { cursor: pointer; background-color: #0A1017 !important; color: #8A96A3; }
.join_renew input.nice_locked::placeholder { color: #11A0EE; opacity: 1; }
.join_renew label.nice_locked { cursor: pointer; opacity: .55; }