/* ================================================================
   회원가입 / 로그인 공통 UI  —  2026-05-03 리팩토링
   ================================================================ */

/* ── 공용 토큰 ── */
:root {
	--su-navy: #0b2a4a;
	--su-navy-light: #1a4670;
	--su-blue: #2563eb;
	--su-blue-light: #dbeafe;
	--su-gray: #6b7280;
	--su-line: #e2e5ea;
	--su-soft: #f7f8fb;
	--su-radius: 8px;
	--su-radius-sm: 6px;
	--su-shadow: 0 2px 12px rgba(11,42,74,.06);
	--su-shadow-hover: 0 4px 20px rgba(11,42,74,.10);
	--su-input-h: 44px;
	--su-transition: .18s ease;
}


/* ================================================================
   ██  PERSONAL SIGN-UP
   ================================================================ */

/* ── 레이아웃 ──
 * 일반회원(개인회원) 가입 페이지 전용 컬러 오버라이드:
 *   부드러운 보라(Violet) 톤을 wrap 안에서만 적용해
 *   companySignUp 등 다른 가입 페이지의 네이비 톤은 영향 받지 않음.
 *   CSS 변수의 자식 상속을 이용해 기존 셀렉터(var(--su-navy) 등)는 그대로 둔다.
 */
.personalSignUp-wrap {
	--su-navy: #7c3aed;             /* 메인 보라 (Tailwind violet-600) */
	--su-navy-light: #a78bfa;        /* 더 밝은 보라 (violet-400) */
	--su-blue: #7c3aed;              /* 포커스/링크 액센트도 동일 톤 */
	--su-blue-light: #ede9fe;        /* 연한 보라 배경 (violet-100) */
	--su-soft: #faf5ff;              /* soft 배경: 매우 연한 보라 (violet-50) */
	--su-shadow: 0 2px 12px rgba(124,58,237,.10);
	--su-shadow-hover: 0 4px 20px rgba(124,58,237,.18);
	--psu-navy: var(--su-navy);
	--psu-gray: var(--su-gray);
	--psu-line: var(--su-line);
	--psu-soft: var(--su-soft);
	max-width: 520px;
	width: 100%;
	margin: 0 auto 48px;
}

/* ── 페이지 헤더 (첫 섹션 위에 자동 삽입) ── */
.personalSignUp-wrap::before {
	content: "일반회원 가입";
	display: block;
	padding: 28px 24px 22px;
	margin: 0 0 24px;
	background: linear-gradient(135deg, var(--su-navy) 0%, var(--su-navy-light) 100%);
	color: #fff;
	font-size: 20px;
	font-weight: 800;
	letter-spacing: -.3px;
	border-radius: var(--su-radius) var(--su-radius) 0 0;
}

/* ── 섹션 카드 ── */
.personalSignUp-section {
	background: #fff;
	border: 1px solid var(--su-line);
	border-radius: var(--su-radius);
	padding: 24px 22px 18px;
	margin-bottom: 20px;
	box-shadow: var(--su-shadow);
	transition: box-shadow var(--su-transition);
}
.personalSignUp-section:hover {
	box-shadow: var(--su-shadow-hover);
}

/* ── 섹션 타이틀 ── */
.personalSignUp-title {
	font-size: 15px;
	font-weight: 700;
	margin: 0 0 14px;
	padding: 8px 14px;
	color: var(--su-navy) !important;
	background: var(--su-soft);
	border-left: 4px solid var(--su-navy);
	border-radius: 0 var(--su-radius-sm) var(--su-radius-sm) 0;
}

.personalSignUp-section .form-group {
	margin-bottom: 12px !important;
}

/* ── 약관 ── */
.personalSignUp-termsBox {
	border-top: 2px solid var(--su-navy);
	border-bottom: 1px solid var(--su-line);
	padding: 8px 0;
	margin-bottom: 6px;
	background: #fff;
}

.personalSignUp-agree-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 12px;
	cursor: pointer;
	border: 1px solid transparent;
	border-radius: var(--su-radius-sm);
	user-select: none;
	transition: background var(--su-transition), border-color var(--su-transition);
}
.personalSignUp-agree-item:hover {
	background: #f8fafc;
	border-color: #e2e8f0;
}
.personalSignUp-agree-all {
	background: var(--su-soft);
	border-radius: var(--su-radius-sm);
}
.personalSignUp-agree-line {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 4px 0;
}
/* 동의 체크박스 — 커스텀 디자인
 *   · 미체크: 흰 배경 + 회색 보더
 *   · 체크:   그린 배경 + 흰색(#fefefe) V 마크
 *   accent-color 만으로는 V 색을 제어할 수 없어 appearance:none 으로 자가 그림. */
.personalSignUp-agree-check {
	-webkit-appearance: none;
	   -moz-appearance: none;
	        appearance: none;
	width: 18px;
	height: 18px;
	margin: 0;
	border: 1.5px solid var(--su-line);
	border-radius: 4px;
	background: #fff;
	cursor: pointer;
	position: relative;
	flex: 0 0 18px;
	transition: background var(--su-transition), border-color var(--su-transition);
}
.personalSignUp-agree-check:checked {
	background: var(--su-navy);
	border-color: var(--su-navy);
}
.personalSignUp-agree-check:checked::after {
	content: '';
	position: absolute;
	left: 5px;
	top: 1px;
	width: 5px;
	height: 10px;
	border: solid #fefefe;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}
.personalSignUp-agree-check:focus-visible {
	outline: 2px solid var(--su-blue-light);
	outline-offset: 2px;
}
.personalSignUp-agree-text {
	font-size: 14px;
	color: #666;
	line-height: 1.3;
}
.personalSignUp-agree-item.is-checked .personalSignUp-agree-text {
	color: #111;
	font-weight: 700;
}
.personalSignUp-agree-hint {
	font-weight: 400;
	color: #9aa3af;
}
.personalSignUp-more {
	font-size: 12px;
	color: #9aa3af;
	text-decoration: none;
	white-space: nowrap;
}
.personalSignUp-more:hover {
	color: var(--su-blue);
	text-decoration: underline;
}

/* ── 라벨 ── */
.personalSignUp-label {
	display: block;
	margin: 12px 0 4px;
	line-height: 1.4;
	font-size: 13px;
	color: #222;
	font-weight: 600;
}
.personalSignUp-label.required::after {
	content: "";
	display: inline-block;
	width: 6px;
	height: 6px;
	background: #dc2626;
	border-radius: 50%;
	margin-left: 4px;
	vertical-align: super;
}

/* ── 인풋 ── */
.personalSignUp-input {
	height: var(--su-input-h);
	border-radius: var(--su-radius-sm) !important;
	border: 1px solid var(--su-line) !important;
	box-shadow: none;
	font-size: 14px;
	transition: border-color var(--su-transition), box-shadow var(--su-transition);
}
.personalSignUp-input:focus {
	border-color: var(--su-blue) !important;
	/* 보라 톤(#7c3aed) 의 18% 알파 — 포커스 링 */
	box-shadow: 0 0 0 3px rgba(124,58,237,.18) !important;
	outline: 0;
}

/* ── 버튼 ── */
.personalSignUp-wrap .btn-primary.personalSignUp-btn {
	background: linear-gradient(135deg, var(--su-navy) 0%, var(--su-navy-light) 100%);
	border: none;
	color: #fff;
	border-radius: var(--su-radius-sm);
	font-weight: 600;
	transition: opacity var(--su-transition), box-shadow var(--su-transition);
}
.personalSignUp-wrap .btn-primary.personalSignUp-btn:hover {
	opacity: .9;
	box-shadow: 0 4px 14px rgba(11,42,74,.2);
}

/* 제출 CTA 강조 */
.personalSignUp-submit.personalSignUp-btn {
	height: 50px !important;
	font-size: 16px !important;
	letter-spacing: .3px;
	margin-top: 8px;
}

/* ── 플렉스 유틸 ── */
.personalSignUp-flex { display: flex; }
.personalSignUp-gap10 { gap: 10px; }
.personalSignUp-alignEnd { align-items: flex-end; }
.personalSignUp-flexItem { flex: 1 1 0; }
.personalSignUp-btnWrap { flex: 0 0 auto; }
.personalSignUp-eqBtn {
	height: var(--su-input-h);
	line-height: calc(var(--su-input-h) - 2px);
	padding: 0 16px;
	border-radius: var(--su-radius-sm);
}

/* ── 인라인 그룹 (연락처/이메일) ── */
.personalSignUp-inline {
	display: flex;
	align-items: center;
	gap: 8px;
}
.personalSignUp-inline > .form-control {
	flex: 1 1 0;
	min-width: 0;
}
.personalSignUp-sep {
	position: relative;
	width: 20px;
	height: var(--su-input-h);
	flex: 0 0 20px;
}
.personalSignUp-sep:before {
	content: "";
	position: absolute;
	left: 2px;
	right: 2px;
	top: 50%;
	height: 2px;
	background: #b0b8c4;
	transform: translateY(-50%);
	border-radius: 1px;
}
.personalSignUp-atSep {
	flex: 0 0 auto;
	line-height: var(--su-input-h);
	font-weight: 700;
	color: #586174;
	width: 18px;
	text-align: center;
}

/* ── PW 메시지 ── */
.personalSignUp-pwMsg {
	display: block;
	margin-top: 6px;
	font-size: 12px;
}
.personalSignUp-input.is-valid  { border-color: #22c55e !important; }
.personalSignUp-input.is-invalid { border-color: #ef4444 !important; }
.personalSignUp-pwMsg.ok { color: #16a34a; }
.personalSignUp-pwMsg.ng { color: #dc2626; }

/* ── 아이디 검색 row 모바일 ── */
@media (max-width:767px) {
	.personalSignUp-wrap { padding: 0 10px; }
	.personalSignUp-wrap::before { border-radius: var(--su-radius) var(--su-radius) 0 0; margin: 0 -10px 24px; }
	.personalSignUp-section { padding: 18px 16px 14px; }
	.personalSignUp-idrowFlex { flex-wrap: wrap; }
	.personalSignUp-idrowFlex .personalSignUp-flexItem { flex: 1 1 100%; }
	.personalSignUp-idrowFlex .personalSignUp-btnWrap { width: 100%; }
	.personalSignUp-idrowFlex .personalSignUp-eqBtn { width: 100%; }
}


/* ================================================================
   ██  COMPANY (BUSINESS) SIGN-UP
   ================================================================ */

.companySignUp-wrap {
	--csu-navy: var(--su-navy);
	--csu-gray: var(--su-gray);
	--csu-line: var(--su-line);
	--csu-soft: var(--su-soft);
	max-width: 520px;
	width: 100%;
	margin: 0 auto 48px;
}

/* ── 페이지 헤더 ── */
.companySignUp-wrap::before {
	content: "비즈니스회원 가입";
	display: block;
	padding: 28px 24px 22px;
	margin: 0 0 8px;
	background: linear-gradient(135deg, #0c4a6e 0%, #075985 100%);
	color: #fff;
	font-size: 20px;
	font-weight: 800;
	letter-spacing: -.3px;
	border-radius: var(--su-radius) var(--su-radius) 0 0;
}

/* ── 스텝퍼 ── */
.companySignUp-stepper {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: flex-start;
	margin: 0 0 22px;
	padding: 20px 0 10px;
	background: #fff;
	border: 1px solid var(--su-line);
	border-radius: var(--su-radius);
	box-shadow: var(--su-shadow);
}
.companySignUp-stepper:before {
	content: "";
	position: absolute;
	left: 25%;
	right: 25%;
	top: 36px;
	height: 3px;
	background: #e2e8f0;
	z-index: 0;
	border-radius: 2px;
}
.companySignUp-step {
	position: relative;
	z-index: 1;
	text-align: center;
	width: 40%;
}
.companySignUp-stepCircle {
	margin: 0 auto 6px;
	width: 52px;
	height: 28px;
	border-radius: 999px;
	background: #e5e7eb;
	color: #9aa3af;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	font-weight: 700;
	transition: background var(--su-transition), color var(--su-transition), box-shadow var(--su-transition);
}
.companySignUp-stepCircle span { font-size: 13px; }
.companySignUp-stepCircle small { font-size: 10px; letter-spacing: .5px; }
.companySignUp-stepLabel {
	font-size: 13px;
	color: var(--su-gray);
	transition: color var(--su-transition);
}

/* 활성 스텝 */
.companySignUp-active .companySignUp-stepCircle {
	background: var(--su-navy);
	color: #fff;
	box-shadow: 0 3px 10px rgba(11,42,74,.25);
}
.companySignUp-active .companySignUp-stepLabel {
	color: var(--su-navy);
	font-weight: 700;
}

/* ── 섹션 카드 ── */
.companySignUp-section {
	background: #fff;
	border: 1px solid var(--su-line);
	border-radius: var(--su-radius);
	padding: 24px 22px 18px;
	margin-bottom: 20px;
	box-shadow: var(--su-shadow);
	transition: box-shadow var(--su-transition);
}
.companySignUp-section:hover {
	box-shadow: var(--su-shadow-hover);
}
.companySignUp-section .form-group {
	margin-bottom: 12px !important;
}

/* ── 섹션 타이틀 ── */
.companySignUp-title {
	font-size: 15px;
	font-weight: 700;
	margin: 0 0 14px;
	padding: 8px 14px;
	color: var(--su-navy);
	background: var(--su-soft);
	border-left: 4px solid var(--su-navy);
	border-radius: 0 var(--su-radius-sm) var(--su-radius-sm) 0;
}

/* ── 디바이더 타이틀 (세금계산서 등) ── */
.companySignUp-dividerTitle {
	font-weight: 700;
	font-size: 15px;
	margin: 0;
	padding: 8px 14px;
	color: var(--su-navy);
	background: var(--su-soft);
	border-left: 4px solid #075985;
	border-radius: 0 var(--su-radius-sm) var(--su-radius-sm) 0;
}
.companySignUp-divider {
	height: 0;
	margin: 0 0 14px;
}

/* ── 약관 ── */
.companySignUp-termsBox {
	border-top: 2px solid var(--su-navy);
	border-bottom: 1px solid var(--su-line);
	padding: 8px 0;
	margin-bottom: 6px;
}
.companySignUp-agree-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 12px;
	cursor: pointer;
	border: 1px solid transparent;
	border-radius: var(--su-radius-sm);
	user-select: none;
	transition: background var(--su-transition), border-color var(--su-transition);
}
.companySignUp-agree-item:hover {
	background: #f8fafc;
	border-color: #e2e8f0;
}
.companySignUp-agree-all {
	background: var(--su-soft);
}
.companySignUp-agree-line {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 4px 0;
}
.companySignUp-agree-check {
	width: 18px;
	height: 18px;
	margin: 0;
	accent-color: var(--su-navy);
	cursor: pointer;
}
.companySignUp-agree-text {
	font-size: 14px;
	color: #666;
	line-height: 1.3;
}
.companySignUp-agree-item.is-checked .companySignUp-agree-text {
	color: #111;
	font-weight: 700;
}
.companySignUp-agree-hint {
	font-weight: 400;
	color: #9aa3af;
}
.companySignUp-more {
	font-size: 12px;
	color: #9aa3af;
	text-decoration: none;
	white-space: nowrap;
}
.companySignUp-more:hover {
	color: var(--su-blue);
	text-decoration: underline;
}

/* ── 라벨 ── */
.companySignUp-label {
	display: block;
	margin: 12px 0 4px;
	line-height: 1.4;
	font-size: 13px;
	color: #222;
	font-weight: 600;
}
.companySignUp-label.required::after {
	content: "";
	display: inline-block;
	width: 6px;
	height: 6px;
	background: #dc2626;
	border-radius: 50%;
	margin-left: 4px;
	vertical-align: super;
}

/* ── 인풋 ── */
.companySignUp-input {
	height: var(--su-input-h);
	border-radius: var(--su-radius-sm) !important;
	border: 1px solid var(--su-line) !important;
	box-shadow: none;
	font-size: 14px;
	transition: border-color var(--su-transition), box-shadow var(--su-transition);
}
.companySignUp-input:focus {
	border-color: var(--su-blue) !important;
	box-shadow: 0 0 0 3px rgba(37,99,235,.12) !important;
	outline: 0;
}

/* ── 버튼 ── */
.companySignUp-btn {
	border-radius: var(--su-radius-sm);
}
.companySignUp-wrap .btn-primary.companySignUp-btn {
	background: linear-gradient(135deg, var(--su-navy) 0%, var(--su-navy-light) 100%);
	border: none;
	color: #fff;
	font-weight: 600;
	transition: opacity var(--su-transition), box-shadow var(--su-transition);
}
.companySignUp-wrap .btn-primary.companySignUp-btn:hover {
	opacity: .9;
	box-shadow: 0 4px 14px rgba(11,42,74,.2);
}
.companySignUp-eqBtn {
	height: var(--su-input-h);
	line-height: calc(var(--su-input-h) - 2px);
	padding: 0 16px;
}

/* 다음단계 / 가입완료 CTA */
.companySignUp-next,
#companySignUp-submitBtn {
	height: 50px !important;
	font-size: 16px !important;
	letter-spacing: .3px;
}

/* ── 플렉스 유틸 ── */
.companySignUp-flex { display: flex; }
.companySignUp-gap10 { gap: 10px; }
.companySignUp-alignEnd { align-items: flex-end; }
.companySignUp-flexItem { flex: 1 1 0; }
.companySignUp-btnWrap { flex: 0 0 auto; }

/* ── 인라인 그룹 ── */
.companySignUp-inline {
	display: flex;
	align-items: center;
	gap: 8px;
}
.companySignUp-inline > .form-control {
	flex: 1 1 0;
	min-width: 0;
}
.companySignUp-sep {
	position: relative;
	width: 20px;
	height: var(--su-input-h);
	flex: 0 0 20px;
}
.companySignUp-sep:before {
	content: "";
	position: absolute;
	left: 2px;
	right: 2px;
	top: 50%;
	height: 2px;
	background: #b0b8c4;
	transform: translateY(-50%);
	border-radius: 1px;
}
.companySignUp-atSep {
	flex: 0 0 auto;
	line-height: var(--su-input-h);
	font-weight: 700;
	color: #586174;
	width: 18px;
	text-align: center;
}

/* ── PW 메시지 ── */
.companySignUp-pwMsg { display: block; margin-top: 6px; font-size: 12px; }
.companySignUp-input.is-valid  { border-color: #22c55e !important; }
.companySignUp-input.is-invalid { border-color: #ef4444 !important; }
.companySignUp-pwMsg.ok { color: #16a34a; }
.companySignUp-pwMsg.ng { color: #dc2626; }

/* ── 파일 업로드 ── */
.companySignUp-fileRow {
	display: flex;
	align-items: center;
	gap: 10px;
}
.companySignUp-file { display: none !important; }
.companySignUp-filePreview {
	flex: 1 1 0;
	min-height: 40px;
	align-items: center;
	gap: 10px;
	color: var(--su-gray);
	position: relative;
}
.companySignUp-filePreview .thumb {
	width: 150px;
	height: 150px;
	border: 1px solid var(--su-line);
	border-radius: var(--su-radius-sm);
	object-fit: cover;
	display: block;
	margin-top: 16px;
	margin-bottom: 16px;
}
.companySignUp-filePreview .fileTag {
	display: inline-block;
	padding: 5px 10px;
	background: var(--su-soft);
	border-radius: var(--su-radius-sm);
	color: #374151;
	font-size: 12px;
	margin-top: 8px;
}
.companySignUp-filePreview .remove {
	margin-left: auto;
	cursor: pointer;
	font-weight: 700;
	color: #555;
	font-size: 18px;
	line-height: 1;
	position: absolute;
	top: 16px;
	left: 160px;
}

/* ── 반응형 ── */
@media (max-width:767px) {
	.companySignUp-wrap { padding: 0 10px; }
	.companySignUp-wrap::before { border-radius: var(--su-radius) var(--su-radius) 0 0; margin: 0 -10px 8px; }
	.companySignUp-section { padding: 18px 16px 14px; }
	.companySignUp-stepper { margin: 0 -10px 22px; border-radius: 0; }
}

/* ── .mb-3 유틸 (기존 유지) ── */
.mb-3 { margin-bottom: 3rem !important; }


/* ================================================================
   ██  SELLER APPLY (입점몰 신청)
   — companySignUp- 클래스를 재사용하되 페이지 헤더만 다르게
   ================================================================ */

/* 입점몰 신청 폼의 wrap에는 ::before 를 덮어쓴다 */
#seller-apply-form .companySignUp-wrap::before {
	content: "입점몰 판매자 입점신청";
	background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
}

/* 입점몰 신청 폼에서 기존 signIn-title/divider 을 섹션 헤더처럼 보이게 */
#seller-apply-form .signIn-title {
	font-size: 15px;
	font-weight: 700;
	padding: 8px 14px;
	margin: 0 0 14px;
	color: #5b21b6;
	background: #f5f3ff;
	border-left: 4px solid #7c3aed;
	border-radius: 0 var(--su-radius-sm) var(--su-radius-sm) 0;
}
#seller-apply-form .signIn-divider {
	height: 0;
	margin: 0;
}

/* 입점몰 신청의 섹션 타이틀 색상 변경 */
#seller-apply-form .companySignUp-title {
	color: #5b21b6;
	background: #f5f3ff;
	border-left-color: #7c3aed;
}

/* 입점몰 신청 버튼 색상 */
#seller-apply-form .btn-primary.companySignUp-btn,
#seller-apply-form .btn-primary {
	background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%) !important;
	border-color: #7c3aed !important;
}
#seller-apply-form .btn-primary.companySignUp-btn:hover,
#seller-apply-form .btn-primary:hover {
	opacity: .9;
	box-shadow: 0 4px 14px rgba(124,58,237,.2);
}

/* 입점몰 취소 버튼 (btn-default) — hover 시 글씨 사라지는 문제 방지 */
.companySignUp-btnRow .btn-default,
.companySignUp-btnRow a.btn-default {
	background: #fff !important;
	border: 1px solid #d1d5db !important;
	color: #374151 !important;
	font-weight: 600;
	transition: background var(--su-transition), color var(--su-transition), border-color var(--su-transition);
}
.companySignUp-btnRow .btn-default:hover,
.companySignUp-btnRow .btn-default:focus,
.companySignUp-btnRow .btn-default:active,
.companySignUp-btnRow a.btn-default:hover,
.companySignUp-btnRow a.btn-default:focus,
.companySignUp-btnRow a.btn-default:active {
	background: #f3f4f6 !important;
	border-color: #9ca3af !important;
	color: #111827 !important;
	text-decoration: none;
	box-shadow: 0 2px 6px rgba(0,0,0,.06);
}

/* 입점몰 alert 스타일 */
#seller-apply-form .alert-info {
	background: #f5f3ff;
	border-color: #ddd6fe;
	color: #5b21b6;
	border-radius: var(--su-radius-sm);
}

/* 입점몰 제출 영역 */
.companySignUp-btnRow {
	display: flex;
	justify-content: flex-end;
	gap: 10px;
	padding-top: 8px;
}
.companySignUp-btnRow .btn { min-width: 100px; }


/* ================================================================
   ██  SIGN IN (로그인)
   ================================================================ */
.signIn-wrap {
	--si-navy: var(--su-navy);
	--si-gray: var(--su-gray);
	--si-line: var(--su-line);
	max-width: 450px;
	width: 100%;
	margin: 0 auto 48px;
}

.signIn-title {
	font-size: 16px;
	font-weight: 700;
	margin: 0 0 6px;
	color: #000;
}
.signIn-divider {
	height: 2px;
	background: var(--su-navy);
	margin: 0 0 14px;
}
.signIn-label {
	display: block;
	margin: 10px 0 4px;
	font-size: 13px;
	color: #222;
	font-weight: 600;
}
.signIn-input {
	height: var(--su-input-h);
	border-radius: var(--su-radius-sm);
	border: 1px solid var(--su-line) !important;
	box-shadow: none;
	font-size: 14px;
	transition: border-color var(--su-transition), box-shadow var(--su-transition);
}
.signIn-input:focus {
	border-color: var(--su-blue) !important;
	box-shadow: 0 0 0 3px rgba(37,99,235,.12) !important;
	outline: 0;
}
.signIn-btn { border-radius: var(--su-radius-sm); }
.signIn-eqBtn {
	height: var(--su-input-h);
	min-height: var(--su-input-h);
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	padding-top: 0;
	padding-bottom: 0;
}
.signIn-wrap .btn-primary {
	background: linear-gradient(135deg, var(--su-navy) 0%, var(--su-navy-light) 100%);
	border: none;
	font-weight: 600;
	transition: opacity var(--su-transition), box-shadow var(--su-transition);
}
.signIn-wrap .btn-primary:hover {
	opacity: .9;
	box-shadow: 0 4px 14px rgba(11,42,74,.2);
}

/* 하단 3열 버튼 (로그인 버튼 너비와 동일) */
.signIn-auxBtns {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
	margin-top: 12px;
}
.signIn-btn-outline {
	border: 1px solid var(--su-line);
	background: #fff;
	color: #374151;
	height: 56px;
	line-height: 1.3;
	padding: 6px 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	white-space: normal;
	word-break: keep-all;
	border-radius: var(--su-radius-sm);
	transition: background var(--su-transition), border-color var(--su-transition);
}
.signIn-btn-outline:hover {
	background: #f8fafc;
	border-color: #cbd5e1;
}

@media (max-width:767px) {
	.signIn-wrap { padding: 0 10px; }
}


/* ================================================================
   ██  SIGN-UP SUCCESS
   ================================================================ */
.signUpSuccess-wrap {
	--sus-navy: var(--su-navy);
	--sus-line: var(--su-line);
	max-width: 520px;
	width: 100%;
	margin: 0 auto 48px;
	text-align: center;
	background: #fff;
	border: 1px solid var(--su-line);
	border-radius: var(--su-radius);
	padding: 40px 30px 36px;
	box-shadow: var(--su-shadow);
}

/* 체크마크 아이콘 */
.signUpSuccess-wrap::before {
	content: "✓";
	display: flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	margin: 0 auto 18px;
	background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
	color: #fff;
	font-size: 32px;
	font-weight: 700;
	border-radius: 50%;
	box-shadow: 0 4px 14px rgba(34,197,94,.25);
}

.signUpSuccess-title {
	font-size: 20px;
	font-weight: 800;
	margin: 0 0 6px;
	color: var(--su-navy);
}
.signUpSuccess-divider {
	height: 2px;
	background: linear-gradient(90deg, transparent, var(--su-navy), transparent);
	margin: 0 auto 18px;
	max-width: 200px;
}
.signUpSuccess-msg {
	margin: 10px 0 24px;
	color: #374151;
}
.signUpSuccess-msg .lead {
	font-size: 15px;
	margin-bottom: 8px;
}
.signUpSuccess-strong {
	font-weight: 700;
	margin: 4px 0 6px;
}
.signUpSuccess-actions {
	display: flex;
	gap: 10px;
	justify-content: center;
}
.signUpSuccess-btn {
	border-radius: var(--su-radius-sm);
	min-width: 130px;
}
.signUpSuccess-eqBtn {
	height: var(--su-input-h);
	min-height: var(--su-input-h);
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	padding: 0 20px;
	font-weight: 600;
}
.signUpSuccess-wrap .btn-primary {
	background: linear-gradient(135deg, var(--su-navy) 0%, var(--su-navy-light) 100%);
	border: none;
	transition: opacity var(--su-transition), box-shadow var(--su-transition);
}
.signUpSuccess-wrap .btn-primary:hover {
	opacity: .9;
	box-shadow: 0 4px 14px rgba(11,42,74,.2);
}

@media (max-width:767px) {
	.signUpSuccess-wrap { padding: 30px 20px 28px; margin-left: 10px; margin-right: 10px; }
}