@charset "utf-8";

.header {position: fixed; top: 0; left: 0; right: 0; z-index: 50;}
.main {padding-top: 57px;}

@media (min-width:1025px) {
	.main {padding-top: 77px;}
}

/* ----------------------------------------------------------------
					메인 비쥬얼
-----------------------------------------------------------------*/
.visual {position: relative; height: 580px; background: url(//img.enuri.info/images/event/2026/coupangeats/visual-bg_m.png) 50% 100% / 320px no-repeat #050a1e;}
.visual .container {padding: 0; height: 100%;}
.visual__title {position: absolute; top: 36px; left: 50%; transform: translateX(-50%); width: 320px; height: 250px; margin: 0; background: url(//img.enuri.info/images/event/2026/coupangeats/visual-title_m.png) 0 0 / 100% no-repeat;}

@media (min-width:1025px) {
	.visual {height: 540px; background: url(//img.enuri.info/images/event/2026/coupangeats/visual-bg.png) 50% 100% / cover no-repeat #050a1e;}
	.visual__title {top: 80px; left: 14px; transform: none; width: 554px; height: 362px; background-image: url(//img.enuri.info/images/event/2026/coupangeats/visual-title.png);}
}

/* ----------------------------------------------------------------
					미션 참여방법
-----------------------------------------------------------------*/
.mission {padding: 50px 0; background: linear-gradient(180deg, #1C94FA 0%, #0E56C2 45%, #002699 100%); overflow: hidden;}
.mission__title {width: 224px; height: 38px; margin: 0 auto; background: url(//img.enuri.info/images/event/2026/coupangeats/mission-title_m.png) 50% 0 / 100% no-repeat;}
.mission__sub {margin: 5px 0 23px; text-align: center; font-size: 20px; font-weight: 500; line-height: 1.3; color: #eee;}

/* 스와이퍼 */
.mission-swiper {overflow: visible;}
.mission-swiper .swiper-slide {width: 87%; height: auto;}
.mission-step {box-sizing: border-box; background: #fff; border-radius: 20px; padding: 22px 12px 14px; text-align: center;}
.mission-step__badge {display: inline-block; background: #17181A; color: #fff; font-size: 14px; font-weight: 700; line-height: 1; letter-spacing: 0.5px; padding: 7px 12px; border-radius: 25px;}
.mission-step__text {font-size: 22px; font-weight: 800; color: #111; line-height: 27px; margin-top: 8px;}
.mission-step__text em {display: block; color: #0068EB;}
.mission-step__img {display: block; width: 100%; height: auto; margin-top: 10px; border-radius: 12px;}

/* 페이지네이션 도트 */
.mission-swiper .swiper-pagination {position: static; margin-top: 17px; line-height: 0;}
.mission-swiper .swiper-pagination-bullet {width: 11px; height: 11px; margin: 0 4px; background: rgba(255, 255, 255, 0.5); opacity: 1;}
.mission-swiper .swiper-pagination-bullet-active {background: #FFC737;}

/* 미션 참여하기 버튼 */
.mission__button {display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; max-width: 476px; height: 75px; margin: 17px auto 0; border-radius: 15px; background: linear-gradient(90deg, #67F3FA 0%, #38C2FF 100%); font-size: 24px; font-weight: 700; color: #111;}
.mission__button i {width: 8px; height: 8px; border-top: 2px solid #111; border-right: 2px solid #111; transform: rotate(45deg);}

@media (min-width:1025px) {
	.mission {padding: 100px 0;}
	.mission__title {width: 432px; height: 73px; background-image: url(//img.enuri.info/images/event/2026/coupangeats/mission-title.png);}
	.mission__sub {margin: 14px 0 44px; font-size: 28px; line-height: 34px; letter-spacing: 0.56px;}

	.mission-swiper {max-width: 1000px; margin: 0 auto;}
	.mission-swiper .swiper-wrapper {display: flex; flex-wrap: wrap; justify-content: center; gap: 56px;}
	.mission-swiper .swiper-slide {width: calc((100% - 56px) / 2); height: auto;}
	.mission-swiper .swiper-pagination {display: none;}

	.mission-step {position: relative; padding: 24px 22px 22px; border-radius: 24px;}
	/* 연결 화살표 (arrow.png = →, 아래방향은 90도 회전) */
	.mission-step:nth-child(1)::after,
	.mission-step:nth-child(3)::after,
	.mission-step:nth-child(1)::before {content: ""; position: absolute; width: 30px; height: 30px; background: url(//img.enuri.info/images/event/2026/coupangeats/arrow.png) 50% 50% / contain no-repeat;}
	/* 가로 → : 열 사이(56px 갭 가운데) / 원본 ↙ → rotate(-135deg) */
	.mission-step:nth-child(1)::after,
	.mission-step:nth-child(3)::after {top: 50%; left: 100%; margin-left: 28px; transform: translate(-50%, -50%) rotate(-135deg);}
	/* 세로 : 행 사이(그리드 중앙) / 회전 없이 원본 그대로, 중앙배치 */
	.mission-step:nth-child(1)::before {top: 100%; left: 100%; margin: 28px 0 0 28px; transform: translate(-50%, -50%);}
	.mission-step__badge {font-size: 18px; padding: 10px 20px;}
	.mission-step__text {font-size: 30px; font-weight: 800; line-height: 38px; margin-top: 10px;}
	.mission-step__img {width: 418px; height: 400px; object-fit: cover; margin-top: 16px; border-radius: 16px;}

	.mission__button {height: 112px; margin: 56px auto 0; border-radius: 24px; font-size: 30px; gap: 12px;}
	.mission__button i {width: 12px; height: 12px;}
}

/* ----------------------------------------------------------------
					쿠팡이츠 쿠폰 받기
-----------------------------------------------------------------*/
.coupon {padding: 50px 0; background: #15161B; text-align: center;}
.coupon__title {width: 303px; height: 38px; margin: 0 auto; background: url(//img.enuri.info/images/event/2026/coupangeats/coupon-title_m.png) 50% 0 / 100% no-repeat;}
.coupon__sub {margin-top: 5px; font-size: 20px; font-weight: 500; line-height: 1.3; color: #ccc;}
.coupon__img {display: block; width: 320px; height: 213px; margin: 22px auto 0;}
.coupon__button {display: flex; align-items: center; justify-content: center; gap: 10px; max-width: 476px; height: 75px; margin: 24px auto 0; border-radius: 15px; background: #2279FC; font-size: 24px; font-weight: 700; color: #fff;}
.coupon__button i {width: 10px; height: 10px; border-top: 2px solid #fff; border-right: 2px solid #fff; transform: rotate(45deg);}
.coupon__noti {display: inline-block; margin-top: 16px; font-size: 15px; line-height: 20px; letter-spacing: 0.3px; color: #aaa; border-bottom: 1px solid #aaa;}

@media (min-width:1025px) {
	/* PC 쿠팡이츠 쿠폰 받기 */
	.coupon {padding: 100px 0;}
	.coupon__title {width: 566px; height: 71px; background-image: url(//img.enuri.info/images/event/2026/coupangeats/coupon-title.png);}
	.coupon__sub {margin-top: 12px; font-size: 28px; font-weight: 400; line-height: 34px; letter-spacing: 0.56px; color: #bbb;}
	.coupon__img {width: 436px; height: 270px; margin-top: 36px;}
	.coupon__button {height: 112px; margin-top: 58px; border-radius: 24px; font-size: 30px; gap: 12px;}
	.coupon__button i {width: 12px; height: 12px;}
	.coupon__noti {margin-top: 28px; font-size: 20px; line-height: 30px; letter-spacing: 0.4px;}
}