/* ============================================================= *
 * 비즈니스 제휴 문의 모달 — Elementor 팝업 #4270 의 네이티브 대체.
 *
 * 값은 main.css 에 있던 `#elementor-popup-modal-4270` 리스킨 블록에서 그대로
 * 옮겼다(폭 640px, 라운드 24px, 서브틀 입력칸, 풀폭 노란 버튼, 모바일 2단계
 * 압축). 겉모습이 바뀌지 않는 것이 이 전환의 요건이라 수치를 임의로 다듬지 않았다.
 *
 * ⚠️ 모든 규칙이 `.corp-modal` 로 한 번 더 감싸져 있는 건 스타일이 아니라 특이도
 * 때문이다. Elementor 팝업이던 시절엔 `#elementor-popup-modal-4270` 이라는 ID 가
 * 특이도를 벌어줬지만, 네이티브 마크업은 클래스뿐이라 legacy parity layer 의
 * `.elementor-kit-2154 h2{font-size:36px}` 같은 (0,1,1) 규칙에 그냥 진다.
 * 실제로 한 겹일 때 제목이 25px → 36px 로 밀렸다(2026-08-23 실측).
 * kit CSS 가 계속 로드되는 동안 이 파일의 선택자는 ≥(0,2,0) 을 유지할 것.
 * ============================================================= */

.corp-modal {
	width: 640px;
	max-width: 92vw;
	max-height: 90vh;
	max-height: min(90vh, 90dvh);
	padding: 0;
	border: 0;
	border-radius: 24px;
	background: transparent;
	overflow: visible;
	color: var(--corp-ink);
	font-family: var(--corp-font);
}

.corp-modal::backdrop {
	background: rgba(20, 19, 15, 0.55);
	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px);
}

/* <dialog> 미지원 브라우저: inquiry.js 가 [open] + .is-fallback 을 붙인다. */
.corp-modal.is-fallback {
	position: fixed;
	inset: 0;
	z-index: 10000;
	display: grid;
	place-items: center;
	width: 100vw;
	max-width: 100vw;
	max-height: 100vh;
	background: rgba(20, 19, 15, 0.55);
	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px);
}

.corp-modal.is-fallback .corp-modal__card {
	width: 640px;
	max-width: 92vw;
}

html.corp-modal-open {
	overflow: hidden;
}

.corp-modal .corp-modal__card {
	position: relative;
	background: #fff;
	border-radius: 24px;
	box-shadow: 0 32px 90px rgba(20, 19, 15, 0.3);
	padding: 46px 42px 40px;
	max-height: 90vh;
	max-height: min(90vh, 90dvh);
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
}

/* ---- 닫기 버튼 ---- */

.corp-modal .corp-modal__close {
	position: absolute;
	top: 16px;
	right: 16px;
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--corp-subtle);
	color: var(--corp-ink);
	cursor: pointer;
	transition: background 0.15s ease;
}

.corp-modal .corp-modal__close:hover {
	background: var(--corp-accent-100);
}

.corp-modal .corp-modal__close:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px rgba(252, 209, 30, 0.55);
}

.corp-modal .corp-modal__close svg {
	width: 15px;
	height: 15px;
}

/* ---- 헤더 ---- */

.corp-modal .corp-modal__head {
	text-align: center;
	margin-bottom: 26px;
}

.corp-modal .corp-modal__eyebrow {
	display: block;
	margin-bottom: 10px;
	font-size: 11.5px;
	font-weight: 800;
	letter-spacing: 0.14em;
	color: var(--corp-accent-label);
}

.corp-modal .corp-modal__title {
	margin: 0;
	font-size: 25px;
	font-weight: 800;
	line-height: 1.3;
	letter-spacing: -0.01em;
	color: var(--corp-ink);
}

/* ---- 필드 ---- */

.corp-modal .corp-modal__field {
	margin-bottom: 14px;
}

.corp-modal .corp-modal__label {
	display: block;
	margin-bottom: 6px;
	font-size: 13px;
	font-weight: 700;
	color: var(--corp-body);
}

.corp-modal .corp-modal__req {
	color: var(--corp-accent-label);
}

.corp-modal .corp-modal__field input,
.corp-modal .corp-modal__field textarea {
	display: block;
	width: 100%;
	font-family: var(--corp-font);
	font-size: 14.5px;
	line-height: 1.5;
	color: var(--corp-ink);
	background: var(--corp-subtle);
	border: 1.5px solid #e9e4d7;
	border-radius: 12px;
	padding: 12px 15px;
	transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
	-webkit-appearance: none;
	appearance: none;
}

.corp-modal .corp-modal__field input::placeholder,
.corp-modal .corp-modal__field textarea::placeholder {
	color: #a49e90;
}

.corp-modal .corp-modal__field input:focus,
.corp-modal .corp-modal__field textarea:focus {
	background: #fff;
	border-color: var(--corp-accent);
	box-shadow: 0 0 0 3.5px rgba(252, 209, 30, 0.28);
	outline: none;
}

.corp-modal .corp-modal__field textarea {
	min-height: 110px;
	resize: vertical;
}

/* 허니팟 — 사람 눈에 안 보이게. */
.corp-modal .corp-modal__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ---- 동의 ---- */

.corp-modal .corp-modal__consent {
	margin-bottom: 6px;
}

.corp-modal .corp-modal__consent-title {
	margin: 0 0 6px;
	font-size: 13px;
	font-weight: 700;
	color: var(--corp-body);
	word-break: keep-all;
}

.corp-modal .corp-modal__consent-row {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-size: 12.5px;
	line-height: 1.55;
	color: var(--corp-body);
	cursor: pointer;
	word-break: keep-all;
}

.corp-modal .corp-modal__consent-row input[type="checkbox"] {
	flex: none;
	width: 16px;
	height: 16px;
	margin: 1px 0 0;
	accent-color: var(--corp-accent);
	cursor: pointer;
}

/* ---- 오류 ---- */

.corp-modal .corp-modal__error {
	margin: 12px 0 0;
	padding: 11px 14px;
	border-radius: 10px;
	background: #fdecec;
	color: #b3261e;
	font-size: 13.5px;
	line-height: 1.5;
}

/* ---- 제출 ---- */

.corp-modal .corp-modal__submit {
	display: block;
	width: 100%;
	margin-top: 6px;
	padding: 15px;
	border: 0;
	border-radius: 13px;
	font-family: var(--corp-font);
	font-size: 15.5px;
	font-weight: 800;
	line-height: 1.2;
	background: var(--corp-accent);
	color: var(--corp-accent-ink);
	cursor: pointer;
	transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.corp-modal .corp-modal__submit:hover {
	background: #f3c400;
	transform: translateY(-1px);
	box-shadow: 0 10px 24px rgba(252, 209, 30, 0.4);
}

.corp-modal .corp-modal__submit:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3.5px rgba(252, 209, 30, 0.55);
}

.corp-modal .corp-modal__submit.is-busy,
.corp-modal .corp-modal__submit:disabled {
	opacity: 0.6;
	cursor: default;
	transform: none;
	box-shadow: none;
}

.corp-modal .corp-modal__submit--ghost {
	background: var(--corp-subtle);
	color: var(--corp-ink);
	margin-top: 18px;
}

.corp-modal .corp-modal__submit--ghost:hover {
	background: var(--corp-accent-100);
	box-shadow: none;
}

/* ---- 완료 패널 ---- */

.corp-modal .corp-modal__done {
	text-align: center;
	padding: 10px 0 4px;
}

.corp-modal .corp-modal__done-mark {
	width: 60px;
	height: 60px;
	margin: 0 auto 18px;
	display: grid;
	place-items: center;
	border-radius: 999px;
	background: var(--corp-accent);
	color: var(--corp-accent-ink);
}

.corp-modal .corp-modal__done-mark svg {
	width: 30px;
	height: 30px;
}

.corp-modal .corp-modal__done-title {
	margin: 0 0 8px;
	font-size: 21px;
	font-weight: 800;
	color: var(--corp-ink);
}

.corp-modal .corp-modal__done-text {
	margin: 0;
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--corp-body);
}

/* ---- 모바일: 한 화면에 최대한 들어오도록 압축 (기존 팝업과 동일 브레이크포인트) ---- */

@media (max-width: 560px) {
	.corp-modal {
		width: 92vw;
	}

	.corp-modal .corp-modal__card {
		padding: 30px 22px 24px;
		border-radius: 20px;
	}

	.corp-modal .corp-modal__head {
		margin-bottom: 18px;
	}

	.corp-modal .corp-modal__title {
		font-size: 20px;
	}

	.corp-modal .corp-modal__field {
		margin-bottom: 8px;
	}

	.corp-modal .corp-modal__label {
		font-size: 12px;
		margin-bottom: 3px;
	}

	.corp-modal .corp-modal__field input,
	.corp-modal .corp-modal__field textarea {
		font-size: 14px;
		padding: 9px 12px;
		border-radius: 10px;
	}

	.corp-modal .corp-modal__field textarea {
		min-height: 64px;
	}

	.corp-modal .corp-modal__consent-title {
		font-size: 12px;
	}

	.corp-modal .corp-modal__consent-row {
		font-size: 11.5px;
		line-height: 1.45;
	}

	.corp-modal .corp-modal__submit {
		font-size: 14.5px;
		padding: 12px;
		margin-top: 2px;
		border-radius: 11px;
	}
}

/* 세로가 짧은 기기(구형·소형, 폰트 확대 설정)에서 한 단계 더 압축 */
@media (max-width: 560px) and (max-height: 680px) {
	.corp-modal .corp-modal__card {
		padding: 16px 14px 14px;
	}

	.corp-modal .corp-modal__title {
		font-size: 17.5px;
	}

	.corp-modal .corp-modal__eyebrow {
		margin-bottom: 3px;
	}

	.corp-modal .corp-modal__head {
		margin-bottom: 12px;
	}

	.corp-modal .corp-modal__field {
		margin-bottom: 5px;
	}

	.corp-modal .corp-modal__label {
		margin-bottom: 2px;
	}

	.corp-modal .corp-modal__field input,
	.corp-modal .corp-modal__field textarea {
		padding: 7px 12px;
	}

	/* textarea 높이는 rows 속성이 정하므로 min-height 가 아니라 height 로 눌러야 한다 */
	.corp-modal .corp-modal__field textarea {
		min-height: 0;
		height: 60px;
	}

	.corp-modal .corp-modal__submit {
		padding: 10px;
	}
}