body.kshop-event-landing-page {
	background: #0c0c0c;
	overflow-x: clip;
	--rw-event-header-offset: 96px;
}

/* The gallery opens beneath the shared header, including the WP admin bar. */
body.admin-bar.kshop-event-landing-page {
	--rw-event-header-offset: 128px;
}

body.kshop-event-landing-page #page-container,
body.kshop-event-landing-page #et-main-area,
body.kshop-event-landing-page #main-content {
	background: #0c0c0c !important;
	overflow-x: clip;
}

/* Keep the store's global header and footer available on this landing page.
 * Only the content shell is made full width below the shared chrome. */

body.kshop-event-landing-page #main-content .container,
body.kshop-event-landing-page #left-area,
body.kshop-event-landing-page article.page,
body.kshop-event-landing-page .entry-content {
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

body.kshop-event-landing-page #main-content .container {
	padding-top: 0 !important;
}

body.kshop-event-landing-page #sidebar,
body.kshop-event-landing-page #main-content .container:before,
body.kshop-event-landing-page .entry-title,
body.kshop-event-landing-page .post-meta {
	display: none !important;
}

body.kshop-event-landing-page .et_pb_post {
	margin-bottom: 0;
}

body.kshop-event-landing-page .kshop-event-landing {
	min-height: 100vh;
}

/*
 * Gallery images are opened from inside the React landing root. Its utility
 * z-index values must still clear Divi's global header stacking context.
 * Keep the overlay viewport-bound and give the close affordance its own
 * layer so a tall image can never cover it.
 */
body.kshop-event-landing-page .kshop-event-landing [role='dialog'][aria-modal='true'] {
	position: fixed !important;
	inset: var(--rw-event-header-offset, 96px) 0 0 !important;
	z-index: 2147483647 !important;
	isolation: isolate;
	padding: max(1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left)) !important;
}

body.kshop-event-landing-page .kshop-event-landing [role='dialog'][aria-modal='true'] > button[aria-label='사진 크게 보기 닫기'] {
	position: fixed !important;
	top: calc(var(--rw-event-header-offset, 96px) + max(1rem, env(safe-area-inset-top))) !important;
	right: max(1rem, env(safe-area-inset-right)) !important;
	z-index: 2 !important;
	border-radius: 999px !important;
	background: rgba(12, 12, 12, 0.88) !important;
	border-color: rgba(255, 255, 255, 0.3) !important;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.42) !important;
}

body.kshop-event-landing-page .kshop-event-landing [role='dialog'][aria-modal='true'] > div {
	position: relative;
	z-index: 1;
	padding-top: max(3.75rem, calc(env(safe-area-inset-top) + 3rem));
	padding-bottom: max(1rem, env(safe-area-inset-bottom));
}

/*
 * Mobile Safari can repeatedly re-composite a sticky image while its browser
 * chrome changes during scrolling. The hero is intentionally a static poster
 * on mobile, so promote only that background to a stable compositing layer.
 */
@media (max-width: 767px) {
	body.kshop-event-landing-page .rw-event-landing section:has(.rw-hero-sequence__headline) {
		isolation: isolate;
		contain: paint;
	}

	body.kshop-event-landing-page .rw-event-landing section:has(.rw-hero-sequence__headline) > .sticky {
		height: 100svh !important;
		transform: translate3d(0, 0, 0);
		backface-visibility: hidden;
		-webkit-backface-visibility: hidden;
		will-change: transform;
	}

	body.kshop-event-landing-page .rw-event-landing section:has(.rw-hero-sequence__headline) > .sticky > img {
		transform: translate3d(0, 0, 0) scale(1.002);
		backface-visibility: hidden;
		-webkit-backface-visibility: hidden;
		will-change: transform;
	}
}

/*
 * The child theme intentionally applies its type system to every WordPress
 * element with !important. Keep that global rule from altering this bundled
 * application without leaking any event styles back into the store.
 */
body.kshop-event-landing-page #main-content .rw-event-landing .rw-font-en {
	font-family: "Roboto Flex", Arial, sans-serif !important;
}

body.kshop-event-landing-page #main-content .rw-event-landing .rw-font-ko {
	font-family: "Pretendard Variable", "Pretendard", "Noto Sans KR", sans-serif !important;
}

body.kshop-event-landing-page #main-content .rw-event-landing a {
	color: inherit;
	text-decoration: none;
}

/* Divi/child-theme form rules target email and tel inputs separately. */
body.kshop-event-landing-page #main-content .rw-event-landing input[type='email'],
body.kshop-event-landing-page #main-content .rw-event-landing input[type='tel'] {
	background-color: #0c0c0c !important;
	color: #ffffff !important;
	border-color: rgba(255, 255, 255, 0.1) !important;
	box-shadow: none !important;
}

body.kshop-event-landing-page #main-content .rw-event-landing input[type='email']:-webkit-autofill,
body.kshop-event-landing-page #main-content .rw-event-landing input[type='tel']:-webkit-autofill {
	-webkit-box-shadow: 0 0 0 1000px #0c0c0c inset !important;
	-webkit-text-fill-color: #ffffff !important;
	caret-color: #ffffff;
}

@media (max-width: 980px) {
	body.kshop-event-landing-page {
		--rw-event-header-offset: 72px;
	}

	body.admin-bar.kshop-event-landing-page {
		--rw-event-header-offset: 104px;
	}
}

@media (max-width: 600px) {
	body.kshop-event-landing-page {
		--rw-event-header-offset: 68px;
	}

	body.admin-bar.kshop-event-landing-page {
		--rw-event-header-offset: 114px;
	}
}