@charset "UTF-8";
/* =========================================================
   경북 동해안 해양레저 릴스 댓글 인증 이벤트
   - 모든 좌표/크기는 시안(1920px) 기준 px 숫자 그대로 씁니다.
   - --u : PC = 1px / 모바일 = 화면폭 ÷ 760  (시안 가운데 760px가 화면에 꽉 차게)
   - 요소 위치는 html 의 style="--x: ; --y: ; --w: " 숫자만 고치면 됩니다.
========================================================= */
:root {
	--u: 1px;

	--c-hero: #00d8ff;      /* 1단 하늘 */
	--c-sea: #0166ff;       /* 2단 바다 */
	--c-reels: #003d98;     /* 릴스 영상 */
	--c-notice: #131b4c;    /* 유의사항 */
	--c-sns: #1d1d1d;       /* SNS */
	--c-region: #74c6ff;    /* 릴스 지역명 */

	--c-label: #103a9c;     /* 팝업 라벨(성명 등) */
	--c-label-file: #ffd54a;/* 팝업 라벨(인증 이미지) */
	--c-scroll: #3e7ac4;
	--c-scroll-track: #d6ebff;

	--float-w: 170px;       /* PC 플로팅 가로 */
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
	font-family: "Pretendard", "Noto Sans KR", "Apple SD Gothic Neo", sans-serif;
	color: #222;
	background: #fff;
	word-break: keep-all;
	overflow-x: hidden;
}
img { max-width: 100%; height: auto; vertical-align: top; border: 0; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; }
html.modal-open, html.modal-open body { overflow: hidden; }
.container { overflow-x: hidden; }
.blind { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 3px solid #ffe14d; outline-offset: 2px; }

.preview_tag {
	position: fixed; left: 12px; top: 12px; z-index: 3000;
	padding: 6px 12px; border-radius: 30px;
	background: #ffe14d; color: #111; font-size: 12px; font-weight: 800;
	box-shadow: 0 4px 12px rgba(0,0,0,.25); pointer-events: none;
}

/* =========================================================
   스테이지 공통 (시안 1920 기준, 화면이 좁으면 양옆이 잘림)
========================================================= */
.stage_sec { position: relative; overflow: hidden; }
.stage {
	position: relative;
	left: 50%;
	width: calc(1920 * var(--u));
	height: calc(var(--h) * var(--u));
	margin-left: calc(-960 * var(--u));
	background-repeat: no-repeat;
	background-position: center top;
	background-size: 100% auto;
}
.stage .el {
	position: absolute;
	left: calc(var(--x) * var(--u));
	top: calc(var(--y) * var(--u));
	width: calc(var(--w) * var(--u));
	display: block;
}
.stage .el img { display: block; width: 100%; }

/* 1단 */
.sec_hero { background: var(--c-hero); }
.sec_hero .stage { background-image: url(../img/main_bg.jpg); }

/* 2단 (일정·경품 / 참여방법) */
.sec_info { background: var(--c-sea); }
.sec_info .stage { background-image: url(../img/sec2_bg.jpg); background-position: center calc(-1 * var(--u)); }  /* 배경 이미지가 시안 y 1249부터 잘려 있어 1px 올림 */
.sec_info .el_insta { z-index: 3; transition: transform .2s; }
.sec_info .el_insta:hover { transform: translateY(-3px); }

/* =========================================================
   1단 등장 (시간 순서)
   0.1 로고 → 0.4 타이틀 → 0.5 갈매기 → 1.0 손(바닷속→위) / 제트스키
   → 2.0 릴스 아이콘 → 2.2 서퍼(오른쪽 위 → 왼쪽 아래) → 2.8 다이버 → 플로팅
========================================================= */
.js .sec_hero .hs { opacity: 0; }
.sec_hero .el img { will-change: transform; }

.sec_hero.is-play .h_logo  { animation: gbFadeDown .8s .1s cubic-bezier(.2,.8,.2,1) both; }
.sec_hero.is-play .h_title { animation: gbPop .8s .4s cubic-bezier(.3,1.45,.5,1) both; }

/* 갈매기 : 왼쪽에서 날아 들어와 계속 활공 */
.sec_hero.is-play .h_gull1 { animation: gbFlyIn 1.3s .5s cubic-bezier(.2,.8,.2,1) both; }
.sec_hero.is-play .h_gull2 { animation: gbFlyIn 1.3s .75s cubic-bezier(.2,.8,.2,1) both; }
.sec_hero.is-play .h_gull1 img { animation: gbGlide 4.2s 1.8s ease-in-out infinite; }
.sec_hero.is-play .h_gull2 img { animation: gbGlide 3.6s 2.1s ease-in-out infinite reverse; }

/* 왼쪽 제트스키 + 수상스키 : 왼쪽에서 달려 들어와 출렁 */
.sec_hero.is-play .h_jet { animation: gbDriveL 1.4s 1s cubic-bezier(.2,.9,.3,1.1) both; }
.sec_hero.is-play .h_jet img { animation: gbJetBob 2.2s 2.4s ease-in-out infinite; transform-origin: 40% 80%; }

/* 손 + 폰 : 같은 이미지 2장
   .h_water = 이미지 아래 물결 부분만 제자리에 먼저 보임
   .h_phone = 물결선 위쪽만 보이게 잘라서, 손이 바닷속에서 위로 올라옴 */
.sec_hero.is-play .h_water {
	animation: gbFadeIn .5s .7s both, gbBob 3.4s 4s ease-in-out infinite;
	clip-path: inset(86.4% 0 0 0);            /* 물결 시작선(이미지 y 766) 아래만 */
}
.sec_hero.is-play .h_phone {
	animation: gbShow .01s 1s both, gbBob 3.4s 4s ease-in-out infinite;
	clip-path: inset(-20% -20% 13.2% -20%);   /* 물결선(이미지 y 770) 아래는 잘림 */
}
.sec_hero.is-play .h_phone img,
.sec_hero.is-play .h_front img { animation: gbHandUp 1.1s 1s cubic-bezier(.2,.85,.25,1.08) both; }

/* 서퍼보다 앞에 보이는 부분 (시안 레이어 순서 맞춤) */
.sec_hero .h_front { pointer-events: none; }
.sec_hero.is-play .h_front { animation: gbShow .01s 1s both, gbBob 3.4s 4s ease-in-out infinite; }
.sec_hero.is-play .h_rec    { clip-path: circle(calc(44 * var(--u)) at calc(374.5 * var(--u)) calc(656.5 * var(--u))); }  /* 녹화 버튼 */
.sec_hero.is-play .h_finger { clip-path: inset(18% 0 13.2% 70%); }   /* 오른쪽 손가락 + 폰 오른쪽 테두리 (손가락 왼쪽 끝까지 포함) */

/* 릴스 아이콘 말풍선 */
.sec_hero.is-play .h_icon { animation: gbShow .01s 2s both, gbBob 3.4s 4s ease-in-out infinite; }
.sec_hero.is-play .h_icon img { animation: gbIconPop .7s 2s cubic-bezier(.3,1.6,.5,1) both; transform-origin: 30% 90%; }

/* 서퍼 : 폰 화면 오른쪽 위 → 왼쪽 아래로 서핑해 들어오고, 마지막에 보드가 화면 밖으로 튀어나옴 */
.sec_hero.is-play .h_surfer { animation: gbSurfClip 1.3s 2.2s both, gbBob 3.4s 4s ease-in-out infinite; }
.sec_hero.is-play .h_surfer img { animation: gbSurfIn 1.3s 2.2s cubic-bezier(.25,.8,.3,1) both, gbRide 2.8s 3.6s ease-in-out infinite; }

/* 오른쪽 다이버 : 물속에서 다리가 쑥 + 계속 발차기 */
.sec_hero.is-play .h_diver { animation: gbShow .01s 2.8s both; clip-path: inset(-30% -30% 0 -30%); }
.sec_hero.is-play .h_diver img { animation: gbDiveUp .9s 2.8s cubic-bezier(.3,1.5,.5,1) both, gbKick 1.1s 3.7s ease-in-out infinite alternate; transform-origin: 50% 100%; }

@keyframes gbShow     { from { opacity: 0; } to { opacity: 1; } }
@keyframes gbFadeIn   { from { opacity: 0; } to { opacity: 1; } }
@keyframes gbFadeDown { from { opacity: 0; transform: translateY(-30px); } to { opacity: 1; transform: none; } }
@keyframes gbPop      { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
@keyframes gbBob      { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(calc(-12 * var(--u))); } }
@keyframes gbFlyIn {
	0%   { opacity: 0; transform: translate(calc(-420 * var(--u)), calc(120 * var(--u))) rotate(10deg) scale(.7); }
	60%  { opacity: 1; }
	100% { opacity: 1; transform: none; }
}
@keyframes gbGlide {
	0%, 100% { transform: translate(0, 0) rotate(0); }
	50%      { transform: translate(calc(14 * var(--u)), calc(-14 * var(--u))) rotate(-4deg); }
}
@keyframes gbDriveL {
	0%   { opacity: 0; transform: translateX(calc(-520 * var(--u))) rotate(-6deg); }
	60%  { opacity: 1; transform: translateX(calc(24 * var(--u))) rotate(2deg); }
	100% { opacity: 1; transform: none; }
}
@keyframes gbJetBob {
	0%, 100% { transform: translateY(0) rotate(0); }
	50%      { transform: translateY(calc(-8 * var(--u))) rotate(-1.5deg); }
}
@keyframes gbHandUp {
	0%   { transform: translateY(85%); }
	100% { transform: none; }
}
@keyframes gbIconPop {
	0%   { opacity: 0; transform: scale(0) rotate(-25deg); }
	100% { opacity: 1; transform: none; }
}
@keyframes gbSurfClip {
	0%      { opacity: 0; clip-path: inset(0 14.1% 0 22.2% round calc(30 * var(--u))); }  /* 폰 화면 안쪽만 보임 */
	10%, 82% { opacity: 1; clip-path: inset(0 14.1% 0 22.2% round calc(30 * var(--u))); }
	100%    { opacity: 1; clip-path: inset(-30% -30% -30% -30%); }
}
@keyframes gbSurfIn {
	0%   { transform: translate(60%, -55%) rotate(-14deg); }
	70%  { transform: translate(-4%, 3%) rotate(3deg); }
	85%  { transform: translate(1%, -1%) rotate(-1deg); }
	100% { transform: none; }
}
@keyframes gbRide {
	0%, 100% { transform: translate(0, 0) rotate(0); }
	50%      { transform: translate(calc(-6 * var(--u)), calc(5 * var(--u))) rotate(-1.2deg); }
}
@keyframes gbDiveUp {
	0%   { transform: translateY(100%); }
	100% { transform: none; }
}
@keyframes gbKick { from { transform: rotate(-4deg); } to { transform: rotate(4deg); } }

/* =========================================================
   2단 캐릭터 (스크롤해서 보일 때 등장)
========================================================= */
.js .fx { opacity: 0; }
.fx.is-visible { opacity: 1; animation: var(--fx) 1.2s var(--d, 0s) cubic-bezier(.2,.85,.3,1.05) both; }
.fx.is-visible img { animation: var(--loop) var(--loop-t, 3s) calc(var(--d, 0s) + 1.2s) ease-in-out infinite; }

.fx_drive_r { --fx: gbDriveR; --loop: gbJetBob; --loop-t: 2.2s; }
.fx_swim_l  { --fx: gbSwimL;  --loop: gbSwim;   --loop-t: 3.4s; }
.fx_swim_r  { --fx: gbSwimR;  --loop: gbSwim;   --loop-t: 3.8s; }
.fx_turtle  { --fx: gbSwimL;  --loop: gbFloat;  --loop-t: 3s; }
.fx_school  { --fx: gbFadeIn; --loop: gbSchool; --loop-t: 5s; }
.fx_fish_l  { --fx: gbFishInL; --loop: gbFishSwimL; --loop-t: 4.2s; }   /* 왼쪽 물고기 (오른쪽을 봄) */
.fx_fish_r  { --fx: gbFishInR; --loop: gbFishSwimR; --loop-t: 4.6s; }   /* 오른쪽 물고기 (왼쪽을 봄) */

@keyframes gbDriveR {
	0%   { opacity: 0; transform: translateX(calc(520 * var(--u))) rotate(6deg); }
	60%  { opacity: 1; transform: translateX(calc(-24 * var(--u))) rotate(-2deg); }
	100% { opacity: 1; transform: none; }
}
@keyframes gbSwimL {
	0%   { opacity: 0; transform: translate(calc(-360 * var(--u)), calc(60 * var(--u))) rotate(-8deg); }
	100% { opacity: 1; transform: none; }
}
@keyframes gbSwimR {
	0%   { opacity: 0; transform: translate(calc(360 * var(--u)), calc(60 * var(--u))) rotate(8deg); }
	100% { opacity: 1; transform: none; }
}
/* 물고기 : 머리 방향으로 헤엄쳐 들어와서, 회전 없이 앞뒤로 살랑살랑 */
@keyframes gbFishInL {
	0%   { opacity: 0; transform: translateX(calc(-140 * var(--u))); }
	100% { opacity: 1; transform: none; }
}
@keyframes gbFishInR {
	0%   { opacity: 0; transform: translateX(calc(140 * var(--u))); }
	100% { opacity: 1; transform: none; }
}
@keyframes gbFishSwimL {
	0%, 100% { transform: translate(0, 0); }
	30%      { transform: translate(calc(14 * var(--u)), calc(-4 * var(--u))); }
	60%      { transform: translate(calc(8 * var(--u)), calc(3 * var(--u))); }
}
@keyframes gbFishSwimR {
	0%, 100% { transform: translate(0, 0); }
	30%      { transform: translate(calc(-14 * var(--u)), calc(-4 * var(--u))); }
	60%      { transform: translate(calc(-8 * var(--u)), calc(3 * var(--u))); }
}
@keyframes gbSwim {
	0%, 100% { transform: translate(0, 0) rotate(0); }
	50%      { transform: translate(calc(10 * var(--u)), calc(-10 * var(--u))) rotate(1.5deg); }
}
@keyframes gbFloat {
	0%, 100% { transform: translateY(0) rotate(0); }
	50%      { transform: translateY(calc(-12 * var(--u))) rotate(-3deg); }
}
@keyframes gbSchool {
	0%, 100% { transform: translateX(0); }
	50%      { transform: translateX(calc(-30 * var(--u))); }
}


/* 스크롤 등장 */
.js .reveal {
	opacity: 0; transform: translateY(40px);
	transition: opacity .9s cubic-bezier(.2,.8,.2,1), transform .9s cubic-bezier(.2,.8,.2,1);
	transition-delay: var(--d, 0s);
}
.js .reveal.is-visible { opacity: 1; transform: none; }

/* =========================================================
   3단 릴스 영상 시청하기
========================================================= */
.sec_reels {
	position: relative; z-index: 2;
	background: var(--c-reels);
	padding-bottom: calc(85 * var(--u));
	text-align: center;
}
.reels_title { display: block; width: calc(632 * var(--u)); margin: 0 auto 0; position: relative; top: -50px; }  /* 제목 + 설명 통이미지 */
.reels_title img { display: block; }

.reels_list {
	display: flex; justify-content: center; gap: 17.5px;
	width: min(1560px, calc(100% - 80px));
	margin: 30px auto 0;
}
.reels_item { flex: 1 1 0; min-width: 0; }
.reels_item.is-clone { display: none; }   /* 모바일 자동 넘김용 복제본 */
.reels_link { display: block; color: #fff; }
.reels_thumb {
	position: relative; display: block;
	transition: transform .35s cubic-bezier(.2,.8,.2,1);
}
.reels_thumb > img { display: block; width: 100%; }   /* 썸네일 테두리 포함 이미지 298x526 */
.reels_thumb > .reels_play {
	position: absolute; left: 50%; top: 50%; width: 22.1%;
	transform: translate(-50%, -50%); transition: transform .3s;
}
@media (hover: hover) {   /* 마우스 있는 기기에서만 (모바일 터치 후 떠 있는 현상 방지) */
	.reels_link:hover .reels_thumb { transform: translateY(-6px); }
	.reels_link:hover .reels_play { transform: translate(-50%, -50%) scale(1.12); }
}
.reels_region { display: block; margin-top: 24px; font-size: 24px; font-weight: 600; line-height: 1.2; color: var(--c-region); }
.reels_name { display: block; margin-top: 6px; font-size: 21px; font-weight: 600; line-height: 1.3; letter-spacing: -.03em; color: #fff; }
.reels_region, .reels_name { max-height: 999px; -webkit-text-size-adjust: none; text-size-adjust: none; }   /* 모바일 브라우저가 일부 글자만 키우는 현상(폰트 부스팅) 방지 */

/* =========================================================
   4단 유의사항
========================================================= */
.sec_notice { background: var(--c-notice); padding: 70px 20px 92px; }
.notice_list { max-width: 690px; margin: 0 auto; }
.notice_list li {
	position: relative; padding-left: .7em;
	font-size: 18px; line-height: 1.45; letter-spacing: -.03em; color: rgba(255,255,255,.92);
}
.notice_list li::before { content: "-"; position: absolute; left: 0; top: 0; }
.notice_list li + li { margin-top: 8px; }

/* 5단 SNS */
.sec_sns { background: var(--c-sns); padding: 52px 20px 50px; }
.sns_map { width: 513px; max-width: 100%; margin: 0 auto; }
.sns_map img { display: block; width: 100%; }

/* 6단 푸터 */
.footer { background: #fff; padding: 52px 20px 60px; text-align: center; color: #111; font-size: 18px; line-height: 1.35; letter-spacing: -.02em; }
.footer_logo { display: block; width: 441px; margin: 0 auto; }

/* =========================================================
   플로팅
========================================================= */
.floating_pc {
	position: fixed; z-index: 900;
	top: 93px;
	right: max(16px, calc(50vw - 760px));   /* 1920 화면에서 시안 위치(오른쪽 200px) */
	width: min(var(--float-w), calc((100vh - 40px) * .4126));  /* 화면 높이가 낮으면 같이 줄어듦 (170/412) */
	opacity: 0; visibility: hidden; transform: translateX(40px);
	transition: transform .7s cubic-bezier(.2,.9,.25,1), opacity .5s, visibility .7s;
}
.floating_pc.is-show { opacity: 1; visibility: visible; transform: none; }
.floating_pc.is-show.is-away { opacity: 0; visibility: hidden; transform: translateX(40px); pointer-events: none; }  /* 릴스 영역에서 숨김 */
.floating_pc img { display: block; width: 100%; }
.floating_mo { display: none; }

@media (max-height: 760px) and (min-width: 1025px) {
	.floating_pc { top: 20px; }
}

/* =========================================================
   팝업 공통
========================================================= */
.b_popup {
	position: fixed; inset: 0; z-index: 2000;
	display: none; overflow-y: auto; -webkit-overflow-scrolling: touch;
	padding: 50px 20px; background: rgba(0, 5, 20, .82);
}
.b_popup.is-open { display: flex; animation: gbPopupIn .25s ease both; }
.b_popup_inner { position: relative; width: 100%; margin: auto; }
@keyframes gbPopupIn { from { opacity: 0; } to { opacity: 1; } }

/* =========================================================
   4-1단 이벤트 참여하기 (유의사항 아래 참여 폼)
========================================================= */
.sec_apply {
	position: relative; overflow: hidden;
	padding: 110px 20px 150px;
	background:
			radial-gradient(circle at 12% 22%, rgba(255,255,255,.10) 0 10px, transparent 11px),
			radial-gradient(circle at 15% 30%, rgba(255,255,255,.08) 0 5px, transparent 6px),
			radial-gradient(circle at 88% 18%, rgba(255,255,255,.10) 0 14px, transparent 15px),
			radial-gradient(circle at 84% 27%, rgba(255,255,255,.07) 0 6px, transparent 7px),
			radial-gradient(circle at 8% 70%, rgba(255,255,255,.07) 0 8px, transparent 9px),
			radial-gradient(circle at 92% 62%, rgba(255,255,255,.08) 0 9px, transparent 10px),
			linear-gradient(180deg, var(--c-reels) 0%, #0d47b8 30%, #0757d8 75%, #00a8ef 100%);   /* 위 = 릴스 배경색에서 시작 */
}
.sec_apply::after {   /* 아래 물결 → 유의사항 영역으로 이어짐 */
	content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 70px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 70' preserveAspectRatio='none'%3E%3Cpath d='M0 38 C180 8 360 8 540 34 C720 60 900 62 1080 36 C1260 10 1350 14 1440 28 L1440 70 L0 70 Z' fill='%23131b4c'/%3E%3C/svg%3E") center bottom / 100% 100% no-repeat;
	pointer-events: none;
}
.apply_card {
	position: relative; z-index: 1;
	max-width: 760px; margin: 0 auto; padding: 56px 64px 60px;
	background: #fff; border-radius: 28px;
	box-shadow: 0 0 0 6px rgba(255,255,255,.18), 0 24px 60px rgba(0, 20, 80, .45);
	color: #222;
}
.apply_head { margin-bottom: 36px; text-align: center; }
.apply_badge {
	display: inline-block; padding: 6px 16px; border-radius: 30px;
	background: #ffe14d; color: #0c2a7a;
	font-size: 14px; font-weight: 800; letter-spacing: .08em;
}
.apply_head h2 {
	margin-top: 14px;
	font-size: 38px; font-weight: 800; letter-spacing: -.04em; color: #0c2a7a;
}
.apply_head p { margin-top: 10px; font-size: 17px; color: #5b6478; letter-spacing: -.03em; }

.apply_fields { padding-bottom: 32px; border-bottom: 2px dashed #c9d3e6; }
.apply_form .form_group {
	display: grid; grid-template-columns: 175px minmax(0, 1fr);
	margin-top: 6px;
}
.apply_form .form_group:first-child { margin-top: 0; }
.apply_form .form_group.is-photo { margin-top: 10px; }
.apply_form .form_group:not(.is-photo) + .form_group.is-photo { margin-top: 30px; }  /* 기본정보 ↔ 인증이미지 간격 */

.apply_form .label {
	display: flex; align-items: center; justify-content: center;
	height: 52px; padding: 0 8px;
	background: var(--c-label); color: #fff;
	font-size: 17px; font-weight: 700; letter-spacing: -.03em; white-space: nowrap;
}
.apply_form .label.is-short .text { display: block; width: 4.4em; text-align: justify; text-align-last: justify; }
.apply_form .is-photo .label { background: var(--c-label-file); color: #111; }

.apply_form input[type="text"],
.apply_form input[type="tel"],
.apply_form input[type="password"] {
	display: block; width: 100%; height: 52px; padding: 0 16px;
	border: 1px solid #d9e1ee; border-left: 0; border-radius: 0; background: #f4f7fc; color: #111;
	font-size: 17px; font-family: inherit; outline: none;
}
.apply_form input:focus { background: #fff; box-shadow: inset 0 0 0 2px #3d6be0; }
.apply_form ::placeholder { color: #a5a5a5; }

/* 인증 이미지 */
.photo_input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.photo_box {
	display: flex; align-items: center; gap: 10px;
	height: 52px; padding: 0 10px 0 12px; background: #f4f7fc; color: #111;
	border: 1px solid #d9e1ee; border-left: 0;
}
.photo_input:focus-visible + .photo_box { box-shadow: inset 0 0 0 2px #7fa0ff; }
.photo_thumb { flex: 0 0 auto; width: 34px; height: 34px; object-fit: cover; border-radius: 3px; background: #eee; }
.photo_thumb[hidden] { display: none; }
.photo_name { flex: 1; min-width: 0; font-size: 15px; color: #444; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.photo_btn {
	flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
	min-width: 72px; height: 30px; padding: 0 10px;
	background: #000; color: #fff; font-size: 14px; font-weight: 500; cursor: pointer;
}
.photo_btn.is-remove { background: #5c5c5c; }
.photo_btn[hidden] { display: none; }
.photo_box.is-busy .photo_name { color: #999; }

/* 개인정보 동의 */
.term_zone { padding-top: 32px; }
.term_box {
	height: 196px; overflow-y: auto; padding: 22px 24px;
	background: #f4f7fc; border: 1px solid #d9e1ee; border-radius: 6px; color: #333; font-size: 14px; line-height: 1.6; text-align: left;
	scrollbar-color: var(--c-scroll) var(--c-scroll-track);
}
.term_box::-webkit-scrollbar { width: 14px; }
.term_box::-webkit-scrollbar-track { background: var(--c-scroll-track); }
.term_box::-webkit-scrollbar-thumb { background: var(--c-scroll); }
.term_box .t_head { margin-bottom: 14px; font-weight: 600; }
.term_box .t_sub { margin-top: 14px; font-weight: 600; }

.agree {
	display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 14px;
	margin-top: 20px; font-size: 16px; font-weight: 500; color: #222;
}
.agree label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.agree input[type="radio"] {
	-webkit-appearance: none; appearance: none; position: relative; flex: 0 0 auto;
	width: 17px; height: 17px; margin: 0; border: 2.5px solid #0c3289; border-radius: 50%; cursor: pointer;
}
.agree input[type="radio"]:checked::after { content: ""; position: absolute; inset: 2.5px; border-radius: 50%; background: #0c3289; }

.apply_btns { display: flex; justify-content: center; gap: 14px; margin-top: 34px; }
.apply_btns .image_btn { display: block; width: 236px; max-width: calc(50% - 7px); transition: transform .2s, opacity .2s; }
.apply_btns .image_btn:hover { transform: translateY(-3px); }
.apply_btns .image_btn img { display: block; width: 100%; }
.apply_btns .image_btn[disabled] { opacity: .6; cursor: wait; transform: none; }

/* =========================================================
   참여 완료 팝업 (통 이미지)
========================================================= */
.done_popup .b_popup_inner { max-width: 760px; cursor: pointer; }
.done_popup img { display: block; width: 100%; }
.done_popup.is-open .b_popup_inner { animation: gbPop .45s cubic-bezier(.3,1.4,.5,1) both; }

/* =========================================================
   참여 내역 수정
========================================================= */
.edit_open_btn {
	display: inline-block; margin-top: 16px; padding: 9px 18px; border-radius: 30px;
	background: #eef3fd; color: #4a5672; font-size: 15px; letter-spacing: -.03em;
	transition: background-color .2s, color .2s;
}
.edit_open_btn b { color: #0c2a7a; text-decoration: underline; text-underline-offset: 3px; }
.edit_open_btn:hover { background: #dfe8fb; }

.edit_notice {
	margin-bottom: 24px; padding: 14px 18px; border-radius: 8px;
	background: #fff8d6; border: 1px solid #f3dc7a;
	font-size: 15px; line-height: 1.6; color: #4a3f10; text-align: left; letter-spacing: -.03em;
}
.edit_notice strong {
	display: inline-block; margin-right: 8px; padding: 2px 10px; border-radius: 30px;
	background: #0c2a7a; color: #fff; font-size: 13px; vertical-align: 1px;
}
.photo_box.is-existing { background: #fffbe6; border-style: dashed; border-color: #e3c95a; }
.photo_box.is-existing .photo_name { color: #6b5a12; }

.edit_popup .b_popup_inner {
	max-width: 440px; padding: 44px 36px 40px;
	background: #fff; border-radius: 24px; text-align: center;
	box-shadow: 0 0 0 6px rgba(255,255,255,.18), 0 24px 60px rgba(0, 20, 80, .45);
}
.edit_popup h2 { margin-top: 12px; font-size: 28px; font-weight: 800; letter-spacing: -.04em; color: #0c2a7a; }
.edit_desc { margin: 8px 0 26px; font-size: 15px; color: #5b6478; }
.edit_close { position: absolute; right: 14px; top: 10px; width: 40px; height: 40px; font-size: 30px; line-height: 1; color: #8a93a6; }
.edit_row { display: grid; grid-template-columns: 96px minmax(0, 1fr); margin-top: 6px; }
.edit_row span {
	display: flex; align-items: center; justify-content: center; height: 48px;
	background: var(--c-label); color: #fff; font-size: 15px; font-weight: 700;
}
.edit_row input {
	width: 100%; height: 48px; padding: 0 14px; border: 1px solid #d9e1ee; border-left: 0;
	background: #f4f7fc; font-size: 16px; font-family: inherit; outline: none;
}
.edit_row input:focus { background: #fff; box-shadow: inset 0 0 0 2px #3d6be0; }
.edit_submit {
	display: block; width: 100%; height: 54px; margin-top: 22px; border-radius: 8px;
	background: #0c2a7a; color: #fff; font-size: 17px; font-weight: 700;
	transition: background-color .2s;
}
.edit_submit:hover { background: #0757d8; }

@media (max-width: 767px) {
	.edit_open_btn { margin-top: 12px; padding: 7px 14px; font-size: 12.5px; }
	.edit_notice { margin-bottom: 18px; padding: 11px 12px; font-size: 12.5px; }
	.edit_notice strong { font-size: 11px; }
	.edit_popup .b_popup_inner { padding: 34px 18px 26px; border-radius: 18px; }
	.edit_popup h2 { font-size: 22px; }
	.edit_desc { font-size: 13px; margin-bottom: 18px; }
	.edit_row { grid-template-columns: 78px minmax(0, 1fr); }
	.edit_row span { height: 44px; font-size: 13px; }
	.edit_row input { height: 44px; font-size: 15px; }
	.edit_submit { height: 48px; font-size: 15px; }
}

/* =========================================================
   태블릿 / 모바일
========================================================= */
@media (max-width: 1024px) {
	.floating_pc { display: none; }
	.floating_mo {
		display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 900;
		max-width: 750px; margin: 0 auto;
		padding-bottom: env(safe-area-inset-bottom, 0px); background: #fff;
		transform: translateY(110%); transition: transform .6s cubic-bezier(.2,.9,.25,1);
	}
	.floating_mo.is-show { transform: none; }
	.floating_mo img { display: block; width: 100%; }
	body { padding-bottom: var(--mo-float-h, 0px); }   /* 플로팅 높이만큼 (JS로 계산) */

	.reels_list { gap: 14px; width: calc(100% - 40px); }
	.reels_region { font-size: 18px; margin-top: 16px; }
	.reels_name { font-size: 16px; }
}

@media (max-width: 767px) {
	:root { --u: calc(100vw / 760); }

	/* 릴스 : 가로 스와이프 */
	.reels_list {
		justify-content: flex-start; gap: 12px;
		width: 100%; margin-top: calc(70 * var(--u)); padding: 0 6vw 6px;
		overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
		touch-action: pan-x pan-y;   /* 세로 스와이프는 페이지 스크롤로 */
		scrollbar-width: none;
	}
	.reels_list::-webkit-scrollbar { display: none; }
	.reels_item { flex: 0 0 40vw; scroll-snap-align: center; }
	.reels_item.is-clone { display: block; }
	.js .reels_list .reels_item.reveal { opacity: 1; transform: none; }   /* 가로로 가려진 카드가 아래로 밀려 세로 스크롤 생기는 것 방지 */
	.reels_region { margin-top: 12px; font-size: 15px; }
	.reels_name { margin-top: 4px; font-size: 13px; }

	.sec_notice { padding: 44px 6vw 52px; }
	.notice_list li { font-size: 13px; line-height: 1.55; }
	.notice_list li + li { margin-top: 5px; }
	.notice_list br { display: none; }

	.sec_sns { padding: 30px 20px; }
	.sns_map { width: 72vw; max-width: 340px; }

	.footer { padding: 36px 16px 40px; font-size: 11px; line-height: 1.6; letter-spacing: -.03em; }
	.footer_logo { width: 62vw; max-width: 300px; margin-bottom: 22px; }

	/* 팝업 */
	.b_popup { padding: 30px 14px; }
	.sec_apply { padding: 60px 14px 90px; }
	.sec_apply::after { height: 36px; }
	.apply_card { padding: 30px 16px 34px; border-radius: 18px; box-shadow: 0 0 0 4px rgba(255,255,255,.18), 0 14px 34px rgba(0, 20, 80, .45); }
	.apply_head { margin-bottom: 22px; }
	.apply_badge { padding: 4px 12px; font-size: 11px; }
	.apply_head h2 { margin-top: 10px; font-size: 25px; }
	.apply_head p { margin-top: 6px; font-size: 13px; }
	.apply_fields { padding-bottom: 22px; }
	.apply_form .form_group { grid-template-columns: 30% minmax(0, 1fr); margin-top: 5px; }
	.apply_form .form_group.is-photo { margin-top: 6px; }
	.apply_form .form_group:not(.is-photo) + .form_group.is-photo { margin-top: 18px; }
	.apply_form .label { height: 44px; padding: 0 4px; font-size: 13px; white-space: normal; text-align: center; line-height: 1.2; }
	.apply_form .label.is-short .text { width: 3.8em; }
	.apply_form .is-photo .label { font-size: 12px; letter-spacing: -.06em; white-space: nowrap; }
	.apply_form input[type="text"],
	.apply_form input[type="tel"],
	.apply_form input[type="password"] { height: 44px; padding: 0 10px; font-size: 15px; }
	.photo_box { height: 44px; padding: 0 6px 0 8px; gap: 6px; }
	.photo_thumb { width: 28px; height: 28px; }
	.photo_name { font-size: 12px; }
	.photo_btn { min-width: 56px; height: 26px; padding: 0 6px; font-size: 12px; }
	.term_zone { padding-top: 22px; }
	.term_box { height: 150px; padding: 14px; font-size: 12px; }
	.term_box::-webkit-scrollbar { width: 8px; }
	.agree {
		font-size: 12.5px;
		gap: 6px 10px;
		flex-direction: column;
	}

	.agree input[type="radio"] { width: 15px; height: 15px; border-width: 2px; }
	.agree input[type="radio"]:checked::after { inset: 2px; }
	.apply_btns { gap: 10px; margin-top: 24px; }
}

@media (prefers-reduced-motion: reduce) {
	.js .reveal { opacity: 1; transform: none; transition: none; }
	.js .sec_hero .hs, .js .fx { opacity: 1 !important; animation: none !important; }
	.sec_hero .el img, .fx img { animation: none !important; }
	.floating_pc, .floating_mo { transition: none; }
}