/* ================== Pyeojin Gothic ================== */

	h2{margin-top:0!important;}
	@font-face {
		font-family: "Pyeojin";
		src: url("/wp-content/uploads/assets/fonts/PyeojinGothic-Light.woff") format("woff");
		font-weight: 300;
	}

	@font-face {
		font-family: "Pyeojin";
		src: url("/wp-content/uploads/assets/fonts/PyeojinGothic-Regular.woff") format("woff");
		font-weight: 400;
	}

	@font-face {
		font-family: "Pyeojin";
		src: url("/wp-content/uploads/assets/fonts/PyeojinGothic-Medium.woff") format("woff");
		font-weight: 500;
	}

	@font-face {
		font-family: "Pyeojin";
		src: url("/wp-content/uploads/assets/fonts/PyeojinGothic-Semibold.woff") format("woff");
		font-weight: 600;
	}

	@font-face {
		font-family: "Pyeojin";
		src: url("/wp-content/uploads/assets/fonts/PyeojinGothic-Bold.woff") format("woff");
		font-weight: 700;
	}

	@font-face {
		font-family: "Pyeojin";
		src: url("/wp-content/uploads/assets/fonts/PyeojinGothic-Extrabold.woff") format("woff");
		font-weight: 800;
	}

	@font-face {
		font-family: "Pyeojin";
		src: url("/wp-content/uploads/assets/fonts/PyeojinGothic-Black.woff") format("woff");
		font-weight: 900;
	}

	/* ================== Eoijtu ================== */

	@font-face {
		font-family: "Eojitu";
		src: url("/wp-content/uploads/assets/fonts/에이투지체-4Regular.otf") format("opentype");
		font-weight: 400;
	}

	@font-face {
		font-family: "Eojitu";
		src: url("/wp-content/uploads/assets/fonts/에이투지체-7Bold.otf") format("opentype");
		font-weight: 700;
	}

	@font-face {
		font-family: "Eojitu";
		src: url("/wp-content/uploads/assets/fonts/에이투지체-9Black.otf") format("opentype");
		font-weight: 900;
	}
	/* ================== LAYOUT ================== */

	html,
	body {
		margin: 0;
		height: 100%;
		background: #000;
		font-family: "Pyeojin", "Eojitu", sans-serif;
	}

	/* 전체 스크롤바 숨기기 */
html, body {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
  display: none;
}


	p {
		margin: 0;
		line-height: 1.5;
	}
	body {
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.en_font {
		font-family: "Eojitu";
	}

	#app {
		width: 100%;
		max-width: 400px;
		min-width: 350px;
		height: 100%;
		position: relative;
		overflow: hidden;
		background: #000;
	}

	section {
		position: absolute;
		inset: 0;
		display: none;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		text-align: center;
	}

	.active {
		display: flex;
	}

	/* ================== TYPO ================== */

	/* 가장 큰 타이틀 (커버) */
	.title-xl {
		font-size: 19px;
		font-weight: 700;
		letter-spacing: 2px;
		margin-bottom: 10px;
	}

	.complete > .title-xl {
		margin: 25px 0;
		font-size: 25px;
	}
	/* 섹션 타이틀 */
	.title-lg {
		font-size: 17px;
		font-weight: 600;
		margin-bottom: 12px;
	}

	/* 설명 */
	.desc {
		line-height: 1.5;
		font-size: 14px;
	}
	.desc span {
		display: block;
		margin-top: 5px;
		font-size: 12px;
	}

	/* 가이드 (← →) */
	.guide {
		font-size: 22px;
		margin-bottom: 4px;
	}

	/* 가이드 설명 */
	.guide-sub {
		font-size: 13px;
		opacity: 0.7;
	}
	.guide-sub img {
		max-width: 75px;
	}

	.bold-700 {
		font-weight: 700;
	}
	.bold-900 {
		font-weight: 900;
	}
	/* ================== FADE ================== */

	.main {
		display: none;
		opacity: 0;
		pointer-events: none;
		transition: opacity 0.6s ease;
	}

	.main.fade-in {
		opacity: 1;
		pointer-events: auto;
	}

	.loading {
		z-index: 2;
		opacity: 1;
		transition: opacity 0.6s ease;
	}

	.loading.fade-out {
		opacity: 0;
	}

	.loading.hide-text h2 {
		opacity: 0;
		transform: translateY(10px);
		transition: 0.4s ease;
	}

	/* ================== BG ================== */

	.bg,
	.bg1,
	.bg2,
	.bg3,
	.bg-guide {
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
	}
	.filter_bulr {
	}
	.bg {
		background-image: url(/wp-content/uploads/assets/bg-red.png);
	}
	.bg1 {
		background-image: url(/wp-content/uploads/assets/bg-red.png);
	}
	.bg-guide {
		background: none; /* 🔥 이거로 변경 */
		position: relative;
		overflow: hidden;
	}
	.bg-guide::after {
		content: "";
		position: absolute;
		inset: 0;
		background: rgba(0, 0, 0, 0.6);
		z-index: 1;
	}
	.bg-guide::before {
		content: "";
		position: absolute;
		inset: 0;
		background: url("/wp-content/uploads/assets/bg.png") center/cover no-repeat;

		filter: blur(2px);
		z-index: 0;
	}

	.bg2 {
		background-image: url(/wp-content/uploads/assets/bg.png);
	}

	.bg3-guide {
		background: none; /* 🔥 이거로 변경 */
		position: relative;
		overflow: hidden;
	}
	.bg3-guide::after {
		content: "";
		position: absolute;
		inset: 0;
		background: rgba(0, 0, 0, 0.6);
		z-index: 1;
	}
	.bg3-guide::before {
		content: "";
		position: absolute;
		inset: 0;
		background: url("/wp-content/uploads/assets/bg-red.png") center/cover no-repeat;

		filter: blur(2px);
		z-index: 0;
	}

	.complete {
		height: 100%;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;

		justify-content: flex-start;
		align-items: center;
	}
	.bg2::after {
		/*
		content: "";
		position: absolute;
		inset: 0;
		background: rgba(0, 0, 0, 0.5);
		z-index: 1;*/
	}
	/* cover 어둡기 */
	.bg1::before {
		content: "";
		position: absolute;
		inset: 0;
		background: rgba(0, 0, 0, 0.5);
		z-index: 1;
	}

	/* 로딩 어둡기 */
	.loading-on::before {
		content: "";
		position: absolute;
		inset: 0;
		background: rgba(0, 0, 0, 0.5);
		z-index: 1;
		transition: 0.5s;
	}

	.loading-on.fade-out::before {
		opacity: 0;
	}
	.bg-guide p {
		font-size: 15px;
		z-index: 2;
		margin: 15px;
	}
	/* frame */
	.bg2-frame {
		position: absolute;
		inset: 0;
		background: url("/wp-content/uploads/assets/bg-frame.png") center/cover no-repeat;
		opacity: 0;
		z-index: 2;
	}

	/* text */
	.bg2-text1 {
    position: absolute;
    inset: 0;
    background: url(/wp-content/uploads/assets/bg-text1.png) center / contain no-repeat;
    opacity: 0;
    z-index: 3;
    top: 17%;
    min-width: 230px;
    height: 100%;
    width: 55%;
    transform: translate(-50%, -50%);
    left: 50%;
}
	.bg2-text {
		position: absolute;
		inset: 0;
		background: url(/wp-content/uploads/assets/bg-text.png) center / contain no-repeat;
		opacity: 0;
		z-index: 3;
	    bottom: 0;
		min-width: 320px;
		height: 100%;
		width: 98%;
		transform: translate(52%, 29%);
		left: -50%;
	}

	/* 🔥 1단계: frame fade */
	.effect_bg2 .bg2-frame {
		animation: frameFade 0.5s ease forwards;
	}

	/* 🔥 2단계: text fade (frame 끝나고 시작) */
	.effect_bg2 .bg2-text, .effect_bg2 .bg2-text1 {
		animation: textFade 1s ease forwards;
		animation-delay: 1s;
	}

	/* 애니메이션 */
	@keyframes frameFade {
		from {
			opacity: 0;
		}
		to {
			opacity: 1;
		}
	}

	@keyframes textFade {
		from {
			opacity: 0;
		}
		to {
			opacity: 1;
		}
	}
	/* ================== DRIP ================== */

	.top-drip {
		position: absolute;
		top: -120px;
		left: 0;
		width: 100%;
		height: 260px;
		z-index: 2;

		background: url(/wp-content/uploads/assets/bg_top1-1.png) no-repeat top center;
		background-size: contain;

		opacity: 0;
	}

	/* 애니메이션 실행 */
	section.loading.loading-on .top-drip {
		animation: dripDown 1.6s ease-out forwards;
		animation-delay: 0.6s;
	}

	@keyframes dripDown {
		0% {
			transform: translateY(-50px);
			opacity: 0;
		}
		50% {
			opacity: 1;
		}
		100% {
			transform: translateY(120px);
			opacity: 1;
		}
	}

	/* ================== SWIPER ================== */

	/* 기본: 숨김 */
.progress-bar {
  display: none;
}

/* 👉 5번 이후 슬라이드에서만 보이게 */
.swiper-slide:nth-child(n+4).swiper-slide-active ~ .progress-bar {
  display: block;
}

	.swiper {
	}

	.swiper-slide {
		height: 100vh;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	/* 🔥 스크롤 필요 슬라이드 */
	.swiper-slide.scroll-slide {
		height: auto !important;
		overflow-y: auto;
		justify-content: flex-start; /* 🔥 중요 */
		padding: 50px 0 0px;
	}
	.scroll-slide {
		-webkit-overflow-scrolling: touch;
		-ms-overflow-style: none;
     scrollbar-width: none;
	}
.swiper-button-prev, .swiper-button-next {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    z-index: 9999;
    width: 30px;
    height: 30px;
    background: rgb(255 255 255 / 31%);
    border-radius: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: 0.2s;
}

/* 위치 */
.swiper-button-prev {
  left: 7px;
}

.swiper-button-next {
  right: 7px;
}

/* 기본 화살표 제거 */
.swiper-button-prev::after,
.swiper-button-next::after {
  display: none;
}

/* 👉 아이콘 직접 만들기 */
.swiper-button-prev::before,
.swiper-button-next::before {
  content: "";
  width: 7px;
  height: 7px;
  border-top: 2px solid #000;
  border-right: 2px solid #000;

  transform: rotate(45deg);
}

.swiper-button-prev::before{margin-right: 0px;}
 .swiper-button-next::before{margin-right: 3px;}



/* 방향 변경 */
.swiper-button-prev::before {
  transform: rotate(-135deg); /* < */
}

.swiper-button-next::before {
  transform: rotate(45deg); /* > */
}

/* 호버 느낌 */
.swiper-button-prev:hover,
.swiper-button-next:hover {
  background: rgba(190, 33, 54, 1);
}


	/* ================== COLOR ================== */

	.red {
		color: #be2136;
	}
	.beige {
		color: #f4eacf;
		z-index: 2;
	}

	/* ================== UI ================== */

	.btn {
		margin-top: 20px;
		padding: 19px 5px;
		width: 80%;
		border: 1px solid #be2136;
		color: #be2136;
		background: none;
		z-index: 10;
	}
	.btn-wrap {
		width: 100%;
		max-width: 250px;
		margin: 20px auto;
		display: flex;
		flex-direction: column;
		gap: 12px;
	}

	/* 공통 */
	.btn-fill {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 18px 14px;
		font-size: 14px;
		letter-spacing: 0.5px;
		text-decoration: none;
		border: 1px solid #be2136;
		transition: 0.25s ease;
		z-index: 10;
	}

	/* 🔥 메인 (강한 버튼) */
	.btn-fill.primary {
		background: #8b1021;
		color: #f4eacf;
	}

	/* 🔥 서브 (톤 낮춤) */
	.btn-fill.secondary {
		background: #8b1021;
		color: #f4eacf;
	}

	/* 🔥 hover */
	.btn-fill.primary:hover {
		background: #8b1021;
	}

	.btn-fill.secondary:hover {
		background: #be2136;
		color: #000;
	}
	.contact span {
		font-size: 14px;
	}
	input {
		z-index: 10;
		width: 80%;
		padding: 18px 14px;
		margin-top: 15px;
		border: 1px solid #f4eacf;
		background: transparent;
		color: #f4eacf;
		text-align: center;
	}

	input#agreeChk {
		width: auto;
	}
	.warn {
		margin: 20px auto 0px;
		font-size: 13px;
		text-align: left;
	}
	.warn h2 {
		font-size: 11px;
	}
	.wran-desc {
		font-size: 10px;
		letter-spacing: -2%;
	}
	.wran-desc p {
		line-height: 1.6;
	}
	input::placeholder {
		color: #f4eacf;
		opacity: 0.6;
	}

	/* 아이폰 대응 */
	input::-webkit-input-placeholder {
		color: #f4eacf;
		opacity: 0.6;
	}
	.seal {
		width: 200px;
		height: 200px;
		display: flex;
		align-items: center;
		justify-content: center;
		opacity: 0.8;
		letter-spacing: 1;
		background: url(/wp-content/uploads/assets/st.png) no-repeat center/contain;
		font-size: 16px;
	}
	.bg3-text-wrap {
		background: url(/wp-content/uploads/assets/frame1-1.png) no-repeat center / contain;
		background-size: 336px;
		aspect-ratio: 2 / 3.7;
		background-position: center;
		background-repeat: no-repeat;
		padding: 0 25px;
		width: 300px;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.bg3-1-text-wrap {
		background: url(/wp-content/uploads/assets/frame2.png) no-repeat center / contain;
		background-size: 336px;
		aspect-ratio: 2 / 3.5;
		background-position: center;
		background-repeat: no-repeat;
		padding: 0 25px;
		width: 300px;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}
	.bg3-2-text-wrap {
		background: url(/wp-content/uploads/assets/frame3.png) no-repeat center / contain;
		background-size: 336px;
		aspect-ratio: 2 / 5.8;
		background-position: center;
		background-repeat: no-repeat;
		padding: 0 25px;
		width: 300px;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}
	.bg3-3-text-wrap {
		background: url(/wp-content/uploads/assets/frame4.png) no-repeat center / contain;
		background-size: 340px;
		aspect-ratio: 2 / 2.9;
		background-position: center;
		background-repeat: no-repeat;
		padding: 0 25px;
		width: 300px;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}

	.bg3-2-text-wrap h3 {
		font-size: 17px;
	}

	.event-text {
		margin-top: 25px;
		width: 100%;
		max-width: 275px;
	}
	img.event-img {
		max-width: 90px;
	}
	.mark-top-logo {
		z-index: 2;
		margin: 15px;
	}
	.mark-top-logo img {
		width: 90%;
		max-width: 255px;
		margin: 0 auto;
	}
	.mark-footer-logo {
		z-index: 2;
		margin: 30px;
	}
	.mark-footer-logo img {
		max-width: 70px;
	}
	.mark-footer-logo.bt {
		position: absolute;
		bottom: 0;
		z-index: 2;
		margin: 30px;
	}
	.mark-footer-logo.bt img {
		max-width: 70px;
	}

	/* 기본 체크박스 숨김 */
	.check-wrap input {
		display: none;
	}

	/* 전체 라벨 */
	.check-wrap {
		display: flex;
		align-items: center;
		gap: 10px;
		cursor: pointer;
		z-index: 10;
	}

	/* 커스텀 박스 */
	.check-box {
		width: 13px;
		height: 13px;
		border: 1px solid #f4eacf;
		display: inline-block;
		position: relative;
		transition: 0.2s;
	}

	/* 체크 상태 */
	.check-wrap input:checked + .check-box {
		background: #8b1021;
		border-color: #be2136;
	}

	/* 체크 표시 */
	.check-box::after {
		content: "";
		position: absolute;
		top: 0px;
		left: 4px;
		width: 3px;
		height: 8px;
		border: solid #f4eacf;
		border-width: 0 2px 2px 0;
		transform: rotate(45deg);
		opacity: 0;
		transition: 0.2s;
	}

	/* 체크되면 표시 */
	.check-wrap input:checked + .check-box::after {
		opacity: 1;
	}

	/* 텍스트 */
	.check-text {
		font-size: 14px;
	}

	/* ================== MP4 ================== */
	.video-box {
		width: 100%;
		max-width: 320px;
		aspect-ratio: 9/16;
		position: relative;
		overflow: hidden;
		margin: 25px auto;
		z-index: 5;
		flex-shrink: 0;
	}

	.video-el {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: relative;
   }

   .video-cover{
    z-index: 101;
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;}
	/* 커버 */
	
	
	.date-list button

	/* 슬라이드 active 되면 */
	.bg3-active .video-cover {
		opacity: 0;
		pointer-events: none;
	}
	/* ================== DATE ================== */

	.date-wrap {
		margin-top: 20px;
		width: 100%;
        max-width:320px;
		z-index: 10;
		min-width: 284px;
		position: relative;
	}



	/* 🔥 슬라이드 active 될 때 시작 */
	.swiper-slide-active .date-wrap::after {
		opacity: 1;
		animation: scrollHint 1.2s ease-in-out 0.3s 5;
	}

	/* 🔥 스크롤 시 제거 */
	.date-wrap.hide-scroll::after {
		opacity: 0;
		animation: none;
		transition: 0.3s;
	}
		.date-list {
		overflow-y: auto;
		display: flex;
		flex-wrap: wrap;
		gap: 10px;

		-webkit-overflow-scrolling: touch;
		touch-action: pan-y;
		}

		.date-list button {
		width: calc(50% - 5px);
		padding: 16px;
		border: 1px solid #f4eacf;
		color: #f4eacf;
		background: transparent;
		}

	.date-list button.active {
		border: 1px solid #be2136;
		background: #8b1021;
		color: #f4eacf;
		justify-content: center;
	}

	/* ================== PROGRESS ================== */

	.progress-bar {
		z-index: 10;
		position: absolute;
		top: 57px;
		left: 50%;
		width: 83%;
		height: 3px;
		background: #111;
		transform: translate(-50%, -50%);
		border: 1px solid black;
	}

	.progress-bar span {
		display: block;
		height: 100%;
		width: 0;
		background: #be2136;
	}

	/* ================== MODAL ================== */

	.modal {
		position: fixed;
		inset: 0;
		display: none;
		justify-content: center;
		align-items: center;
		background: rgba(0, 0, 0, 0.95);
		z-index: 9999;
	}

	.modal-inner {
		border: 1px solid #be2136;
		padding: 20px;
		max-width: 280px;
	}
	.modal-inner > p {
		font-size: 18px;
		font-weight: 700;
		text-align: center;
		margin-bottom: 15px;
	}
	.modal-desc > p {
		font-size: 12px;
		line-height: 1.5;
		margin-bottom: 10px;
	}
	.modal-btns {
		display: flex;
		gap: 10px;
		margin-top: 20px;
	}

	.modal-btns button {
		flex: 1;
		padding: 15px 8px;
		border: 1px solid #be2136;
		color: #be2136;
		background: #8b10206e;
	}

	.modal-btns button:last-child {
		background: #be2136;
		color: #f4eacf;
	}

	/* ================== UTIL ================== */

	.hidden {
		display: none;
	}