/* IWP Popup — 프론트 스타일 */

.iwp-popup-stage {
	position: fixed;
	inset: 0;
	z-index: 999990;
	pointer-events: none;
}

.iwp-popup {
	position: absolute;
	top: 80px;
	left: 20px;
	width: var(--iwp-w, 380px);
	min-width: 200px;
	max-width: calc(100vw - 24px);
	background: var(--iwp-bg, #fff);
	color: var(--iwp-fg, #222);
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 8px 30px rgba(0, 0, 0, .16);
	pointer-events: auto;
	opacity: 0;
	transform: translateY(8px);
	transition: opacity .25s ease, transform .25s ease;
}

.iwp-popup.is-ready { opacity: 1; transform: none; }
.iwp-popup.is-closed { display: none !important; }

.iwp-popup-inner {
	position: relative;
	height: var(--iwp-h, auto);
}

/* 세로를 직접 지정하면 내용이 넘칠 수 있으므로 안에서 스크롤되게 한다 */
.iwp-popup.is-fixed-h .iwp-popup-inner {
	overflow-y: auto;
	overscroll-behavior: contain;
}

/* 장식 일러스트 — 팝업 하단에 비율을 유지한 채 깔린다 */
.iwp-deco {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: auto;
	pointer-events: none;
}



/* 본문 -------------------------------------------------------------------- */

.iwp-body {
	position: relative;
	padding: var(--iwp-py, 26px) var(--iwp-px, 26px);
}

/* 일러스트는 폭의 28% 높이로 깔린다. 그만큼 + 여유를 본문 아래에 확보해
   버튼이나 글자가 그림 위에 겹치지 않게 한다.
   .iwp-body 의 padding 축약형보다 뒤에 와야 덮어쓸 수 있다. */
.iwp-body.iwp-has-deco { padding-bottom: 34%; }

/* 버튼이 있으면 조금 더 띄운다 — 버튼은 배경이 불투명해서 그림을 가린다 */
.iwp-body.iwp-has-deco:has(.iwp-btn) { padding-bottom: 38%; }

.iwp-center { text-align: center; }
.iwp-left   { text-align: left; }

.iwp-label {
	margin: 0;
	font-family: var(--iwp-fb);
	font-size: calc(var(--iwp-bs, 14px) - 1px);
	font-weight: 400;
	color: var(--iwp-sub);
}

.iwp-track { letter-spacing: 1.5px; }

.iwp-title {
	margin: 12px 0 0;
	font-family: var(--iwp-ft);
	font-size: var(--iwp-ts, 24px);
	font-weight: var(--iwp-tw, 500);
	line-height: 1.4;
	letter-spacing: -.02em;
	color: var(--iwp-fg);
	word-break: keep-all;
}

.iwp-title-lg {
	font-size: calc(var(--iwp-ts, 24px) * 1.35);
	line-height: 1.25;
	margin-top: 14px;
}

.iwp-rule {
	height: 1px;
	background: currentColor;
	opacity: .18;
	margin: 20px 0 0;
}

.iwp-text {
	margin: 16px 0 0;
	font-family: var(--iwp-fb);
	font-size: var(--iwp-bs, 14px);
	font-weight: 400;
	line-height: 1.85;
	color: var(--iwp-sub);
	word-break: keep-all;
}

/* 에디터로 넣은 내용은 p·li 로 감싸이는데, 워드프레스 관리자와 대부분의 테마가
   p 에 font-size 를 직접 지정한다. 상속은 어떤 규칙에도 지므로 자식에도 직접 넣는다. */
.iwp-text p,
.iwp-text li,
.iwp-text div,
.iwp-text blockquote {
	font-size: var(--iwp-bs, 14px);
	line-height: 1.85;
	color: inherit;
	font-family: inherit;
}

/* 에디터에서 부분 지정한 크기·색상은 그대로 살린다 */
.iwp-text span[style],
.iwp-text font { font-size: inherit; }

.iwp-text h3,
.iwp-text h4 {
	margin: 10px 0 4px;
	font-family: var(--iwp-ft);
	font-weight: var(--iwp-tw, 500);
	line-height: 1.4;
	color: var(--iwp-fg);
}

.iwp-text h3 { font-size: calc(var(--iwp-bs, 14px) * 1.45); }
.iwp-text h4 { font-size: calc(var(--iwp-bs, 14px) * 1.2); }

/* 엔터 한 번 = 한 줄만 내려감. 문단 사이 여백을 없애 <br> 처럼 보이게 한다.
   엔터를 두 번 치면 빈 문단이 생겨 한 줄이 비므로 의도대로 동작한다. */
.iwp-text p { margin: 0; }
.iwp-text p:empty { min-height: 1em; }
.iwp-text br { line-height: inherit; }
.iwp-text strong,
.iwp-text b { font-weight: 700; }
.iwp-text ul,
.iwp-text ol { margin: 0 0 8px; padding-left: 1.2em; }
.iwp-text a { color: inherit; text-decoration: underline; }

/* 다른 플러그인이 같은 이름의 클래스를 쓰는 경우가 있다.
   iw-main-hero 의 iw-phero.css 가 `.iwp-title` 에 text-shadow 를 걸어두는 바람에
   팝업 제목에까지 그림자가 묻어났다. popup.css 에 그 속성 선언이 없으면 막을 방법이 없다.
   그래서 팝업 안의 텍스트 요소는 .iwp-popup 로 감싸 특이도를 올리고,
   밖에서 들어올 수 있는 장식 효과는 명시적으로 꺼둔다. */
.iwp-popup .iwp-label,
.iwp-popup .iwp-title,
.iwp-popup .iwp-text,
.iwp-popup .iwp-text p,
.iwp-popup .iwp-text h3,
.iwp-popup .iwp-text h4,
.iwp-popup .iwp-btn {
	text-shadow: none;
	-webkit-text-stroke: 0;
	filter: none;
}

.iwp-btn {
	display: block;
	margin: 20px 0 0;
	padding: 13px 10px;
	border-radius: 10px;
	background: var(--iwp-accent);
	color: var(--iwp-on);
	font-family: var(--iwp-fb);
	font-size: var(--iwp-bs, 14px);
	font-weight: 500;
	text-align: center;
	text-decoration: none;
	transition: opacity .15s;
}

.iwp-btn:hover { opacity: .86; color: var(--iwp-on); }

/* 이미지 ------------------------------------------------------------------ */

/* 테마 CSS 가 img · picture 를 건드려도 깨지지 않도록 직접 지정한다 */
.iwp-popup picture { display: block; margin: 0; }

.iwp-popup img {
	max-width: 100%;
	border-radius: 0;
	box-shadow: none;
}

.iwp-img-top,
.iwp-img-full {
	display: block;
	width: 100%;
	height: auto;
	margin: 0;
}

.iwp-img-link { display: block; }

.iwp-ov-wrap {
	position: relative;
	min-height: var(--iwp-ovh, 220px);
}

/* 배경 이미지는 뒤에 깔고, 글자는 흐름 안에 둔다.
   글이 길어지면 잘리는 대신 팝업이 아래로 늘어난다. */
.iwp-img-bg {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.iwp-focus-center .iwp-img-bg { object-position: center; }
.iwp-focus-top    .iwp-img-bg { object-position: top; }
.iwp-focus-bottom .iwp-img-bg { object-position: bottom; }

.iwp-ov { position: absolute; inset: 0; pointer-events: none; }
.iwp-ov-bottom { top: auto; height: 48%; }
.iwp-ov-top    { bottom: auto; height: 42%; }
.iwp-ov-left   { right: auto; width: 50%; }

.iwp-ov-text {
	position: relative;
	display: flex;
	flex-direction: column;
	min-height: var(--iwp-ovh, 220px);
	padding: var(--iwp-py, 26px) var(--iwp-px, 26px);
	box-sizing: border-box;
}

.iwp-ov-text .iwp-title,
.iwp-ov-text .iwp-label,
.iwp-ov-text .iwp-text { color: inherit; }

.iwp-ov-text .iwp-btn { align-self: stretch; }

.iwp-pos-tl, .iwp-pos-tc, .iwp-pos-tr { justify-content: flex-start; }
.iwp-pos-ml, .iwp-pos-mc, .iwp-pos-mr { justify-content: center; }
.iwp-pos-bl, .iwp-pos-bc, .iwp-pos-br { justify-content: flex-end; }

.iwp-pos-tl, .iwp-pos-ml, .iwp-pos-bl { align-items: flex-start; text-align: left; }
.iwp-pos-tc, .iwp-pos-mc, .iwp-pos-bc { align-items: center; text-align: center; }
.iwp-pos-tr, .iwp-pos-mr, .iwp-pos-br { align-items: flex-end; text-align: right; }

/* 하단 바 ----------------------------------------------------------------- */

.iwp-popup-bar {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 10px 15px;
	background: rgba(20, 20, 18, .86);
	font-family: var(--iwp-fb);
	font-size: 13px;
	color: #fff;
}

.iwp-popup-hide {
	display: flex;
	align-items: center;
	gap: 6px;
	cursor: pointer;
	margin: 0;
	color: #fff;
}

.iwp-popup-hide input { margin: 0; }

/* 테마 · 엘리멘터 킷은 `.elementor-kit-3 button` 처럼 (클래스 + 요소) = 특이도 0,1,1 로
   버튼을 칠한다. 플러그인의 `.iwp-popup-close` 는 0,1,0 이라 무조건 진다.
   그래서 스테이지 안의 버튼은 선택자를 겹쳐 특이도를 올리고,
   레이아웃·표시 여부처럼 깨지면 치명적인 속성은 !important 로 못 박는다. */
.iwp-popup-stage button {
	-webkit-appearance: none;
	appearance: none;
	box-sizing: border-box;
	width: auto;
	min-width: 0;
	min-height: 0;
	max-width: none;
	height: auto;
	letter-spacing: normal;
	text-transform: none;
	text-shadow: none;
	line-height: 1.4;
	font-weight: 400;
	outline-offset: 2px;
}

.iwp-popup .iwp-popup-bar .iwp-popup-close {
	margin: 0 !important;
	padding: 2px 4px !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: none !important;
	box-shadow: none !important;
	color: #fff !important;
	font-family: inherit;
	font-size: 13px !important;
	cursor: pointer;
}

.iwp-popup .iwp-popup-bar .iwp-popup-close:hover,
.iwp-popup .iwp-popup-bar .iwp-popup-close:focus {
	background: none !important;
	color: #fff !important;
	opacity: .75;
}

.iwp-popup-stage .iwp-popup-closeall {
	position: absolute;
	top: 0;
	left: 0;
	display: none !important;
	margin: 0 !important;
	padding: 10px 20px !important;
	border: 0 !important;
	border-radius: 999px !important;
	background: #1c1c1a !important;
	color: #fff !important;
	font-family: inherit;
	font-size: 13px !important;
	cursor: pointer;
	pointer-events: auto;
	box-shadow: 0 4px 16px rgba(0, 0, 0, .22);
}

.iwp-popup-stage .iwp-popup-closeall.is-on { display: block !important; }

.iwp-popup-stage .iwp-popup-closeall:hover {
	background: #1c1c1a !important;
	color: #fff !important;
	opacity: .88;
}

.iwp-popup a:focus-visible,
.iwp-popup button:focus-visible,
.iwp-popup input:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

/* 디바이스별 노출 ---------------------------------------------------------- */

@media (min-width: 601px) {
	.iwp-dev-mobile { display: none !important; }
}

@media (max-width: 600px) {
	.iwp-popup {
		position: relative;
		left: auto !important;
		top: auto !important;
		width: calc(100vw - 24px) !important;
		margin: 0 auto 10px;
	}

	.iwp-popup-stage {
		inset: auto 0 0 0;
		max-height: 88vh;
		overflow-y: auto;
		padding: 12px 0;
	}

	.iwp-dev-pc { display: none !important; }

	/* 모바일에서도 팝업이 2개 이상일 때만 나와야 한다.
	   .is-on 없이 display:block 을 주면 팝업 하나짜리 화면에도 버튼이 남는다. */
	.iwp-popup-stage .iwp-popup-closeall.is-on {
		position: relative;
		top: auto;
		left: auto;
		display: block !important;
		margin: 0 auto !important;
	}

	.iwp-title { font-size: calc(var(--iwp-ts, 24px) * .9); }

	.iwp-body,
	.iwp-ov-text { padding: calc(var(--iwp-py, 26px) * .85) calc(var(--iwp-px, 26px) * .8); }
}

@media (prefers-reduced-motion: reduce) {
	.iwp-popup { transition: none; }
}