/* 크로스 랜딩 — 프론트 스타일 */

html body.cross-landing-body{
	margin:0;
	padding:0 0 var(--cl-bar-h, 120px);
	background:var(--cl-page-bg, #fff);
	color:#222;
	font-family:"Pretendard", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", "맑은 고딕", sans-serif;
	-webkit-text-size-adjust:100%;
	word-break:keep-all;
}
.cl-page, .cl-page *,
.cl-bar, .cl-bar *,
.cl-modal, .cl-modal *{ box-sizing:border-box; }

/* 관리자 미리보기 안내 */
.cl-preview-notice{
	padding:8px 12px; background:#fe7a2f; color:#fff;
	font-size:13px; line-height:1.5; text-align:center;
}

/* ───────── 이미지 영역 ───────── */
.cl-page{ display:block; width:100%; margin:0; padding:0; }
.cl-images{ max-width:var(--cl-max-width, 1000px); margin:0 auto; }
.cl-images .cl-image{
	display:block; width:100%; max-width:100%; height:auto;
	margin:0; padding:0; border:0;
}
.cl-empty{ padding:160px 20px; color:#999; font-size:15px; line-height:1.7; text-align:center; }

/* ───────── 하단 고정 신청폼 ───────── */
.cl-bar{
	position:fixed; left:0; right:0; bottom:0; z-index:100000;
	padding:14px 20px calc(14px + env(safe-area-inset-bottom, 0px));
	background:var(--cl-bar-bg, #150230);
	color:var(--cl-bar-text, #fff);
	box-shadow:0 -4px 18px rgba(0,0,0,.18);
}
.cl-bar .cl-form{ max-width:1200px; margin:0 auto; }
.cl-bar .cl-bar-title{
	margin:0 0 10px; color:inherit;
	font-size:16px; font-weight:700; line-height:1.4; text-align:center;
}
.cl-bar .cl-form-row{ display:flex; align-items:center; gap:14px; }

.cl-bar .cl-inputs{ display:flex; flex:1 1 auto; gap:8px; min-width:0; }
.cl-bar .cl-input{
	flex:1 1 0; min-width:0; width:100%; height:50px; margin:0; padding:0 16px;
	border:0; border-radius:6px; outline:none; box-shadow:none;
	background:var(--cl-input-bg, #fff); color:var(--cl-input-text, #222);
	font-family:inherit; font-size:16px; line-height:normal;
	-webkit-appearance:none; appearance:none;
}
.cl-bar .cl-input::placeholder{ color:var(--cl-input-text, #222); opacity:.45; }
.cl-bar .cl-input:focus{ box-shadow:0 0 0 2px var(--cl-btn-bg, #ff2f6d); }

.cl-bar .cl-agrees{
	display:flex; flex:0 0 auto; flex-direction:column; gap:7px;
	color:var(--cl-agree-text, #fff); font-size:14px; line-height:1.3;
}
.cl-bar .cl-agree{ display:flex; align-items:center; gap:4px; white-space:nowrap; }
.cl-bar .cl-check{ display:inline-flex; align-items:center; gap:6px; margin:0; color:inherit; cursor:pointer; }
.cl-bar .cl-check input{
	flex:0 0 auto; width:18px; height:18px; margin:0;
	accent-color:var(--cl-btn-bg, #ff2f6d); cursor:pointer;
}
.cl-bar .cl-privacy-open{
	margin:0; padding:0; border:0; background:none; color:var(--cl-privacy-link, #fff);
	font:inherit; text-decoration:underline; text-underline-offset:2px;
	cursor:pointer;
}
.cl-bar .cl-privacy-open:hover{ opacity:.8; }

.cl-bar .cl-submit{
	flex:0 0 auto; height:50px; margin:0; padding:0 30px;
	border:0; border-radius:6px;
	background:var(--cl-btn-bg, #ff2f6d); color:var(--cl-btn-text, #fff);
	font-family:inherit; font-size:17px; font-weight:700; line-height:1; white-space:nowrap;
	cursor:pointer; transition:filter .15s;
}
.cl-bar .cl-submit:hover{ filter:brightness(1.08); }
.cl-bar .cl-submit:disabled{ opacity:.6; cursor:wait; }

/* 허니팟(스팸 방지) — 화면에 보이지 않음 */
.cl-bar .cl-hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* ───────── 모달(개인정보 안내 / 신청완료) ───────── */
.cl-modal{
	position:fixed; top:0; right:0; bottom:0; left:0; z-index:100010;
	display:flex; align-items:center; justify-content:center; padding:20px;
}
.cl-modal[hidden]{ display:none; }
.cl-modal .cl-modal-dim{ position:absolute; top:0; right:0; bottom:0; left:0; background:rgba(0,0,0,.6); }
.cl-modal .cl-modal-box{
	position:relative; display:flex; flex-direction:column;
	width:100%; max-width:460px; max-height:calc(100vh - 40px);
	padding:30px 24px 20px; border-radius:14px;
	background:#fff; color:#222; box-shadow:0 12px 40px rgba(0,0,0,.3);
	animation:clPop .22s ease-out;
}
.cl-modal .cl-modal-x{
	position:absolute; top:10px; right:10px; width:38px; height:38px; padding:8px;
	border:0; background:none; color:#888; cursor:pointer; line-height:0;
}
.cl-modal .cl-modal-x:hover{ color:#222; }
.cl-modal .cl-modal-title{
	margin:0 36px 14px 0; color:#111;
	font-size:19px; font-weight:700; line-height:1.4;
}
.cl-modal .cl-modal-body{ overflow-y:auto; color:#555; font-size:14px; line-height:1.75; }
.cl-modal .cl-modal-body p{ margin:0 0 10px; }
.cl-modal .cl-modal-body p:last-child{ margin-bottom:0; }
.cl-modal .cl-modal-btn{
	flex:0 0 auto; height:48px; margin:20px 0 0; padding:0;
	border:0; border-radius:8px;
	background:var(--cl-btn-bg, #ff2f6d); color:var(--cl-btn-text, #fff);
	font-family:inherit; font-size:16px; font-weight:700; cursor:pointer;
}

/* 신청완료 팝업 — 기본 설정의 '신청완료 팝업' 색상 사용 (체크 아이콘은 버튼 색을 따름) */
.cl-success .cl-modal-box{ padding-top:36px; text-align:center; }
.cl-success .cl-modal-title{ margin-right:0; color:var(--cl-success-text, #000); }
.cl-success .cl-modal-body{ color:var(--cl-success-text, #000); }
.cl-success .cl-modal-btn{
	background:var(--cl-success-btn-bg, #000); color:var(--cl-success-btn-text, #fff);
}
.cl-success .cl-success-icon{
	display:flex; align-items:center; justify-content:center;
	width:66px; height:66px; margin:0 auto 16px; border-radius:50%;
	background:var(--cl-success-btn-bg, #000); color:var(--cl-success-btn-text, #fff);
}

body.cl-modal-open{ overflow:hidden; }

@keyframes clPop{
	from{ opacity:0; transform:translateY(14px); }
	to{ opacity:1; transform:none; }
}

/* ───────── 모바일 ───────── */
@media (max-width:768px){
	.cl-bar{ padding:10px 12px calc(10px + env(safe-area-inset-bottom, 0px)); }
	.cl-bar .cl-bar-title{ margin-bottom:8px; font-size:14px; }
	.cl-bar .cl-form-row{ flex-wrap:wrap; gap:8px; }
	.cl-bar .cl-inputs{ flex:1 1 100%; gap:6px; }
	/* 16px 미만이면 iOS 에서 입력 시 화면이 확대되므로 16px 유지 */
	.cl-bar .cl-input{ height:44px; padding:0 12px; }
	.cl-bar .cl-agrees{ flex:1 1 auto; min-width:0; gap:6px; font-size:12.5px; }
	.cl-bar .cl-check input{ width:16px; height:16px; }
	.cl-bar .cl-submit{ align-self:stretch; height:auto; min-height:44px; padding:0 16px; font-size:15px; }
}
@media (max-width:360px){
	.cl-bar .cl-agree{ white-space:normal; }
	.cl-bar .cl-submit{ padding:0 12px; font-size:14px; }
}