*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-bottom:85px}body{margin:0;color:#071c36;background:#ffce70;font-family:'Noto Sans KR','Malgun Gothic',sans-serif}img{display:block;height:auto;max-width:100%}a,button,input{touch-action:manipulation}button,a{cursor:pointer}a:focus-visible,button:focus-visible,input:focus-visible{outline:4px solid #002cac;outline-offset:3px}.sr-only{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0)}.native{width:728px;max-width:100%;margin:0 auto}.native>img{width:728px;max-width:100%}.image-map{position:relative}.hit{position:absolute;display:block;border-radius:2px}.hit:hover{background:#ffffff10}.buttons .youtube{left:1.9%;top:0;width:30.9%;height:93%}.buttons .instagram{left:33.5%;top:0;width:38.8%;height:93%}.buttons .participate{left:73.3%;top:9.2%;width:25%;height:83%}.video{position:relative}.video iframe{position:absolute;left:6.32%;top:15.71%;width:87.36%;height:73.06%;border:0;background:#000}.guide-youtube{left:5%;top:27%;width:47%;height:19%}.guide-video{left:53%;top:27%;width:42%;height:19%}.guide-instagram{left:5%;top:46%;width:45%;height:19%}.guide-entry{left:51%;top:46%;width:44%;height:19%}.bottom-buttons .hit{top:16%;height:75%}.gifts{width:760px;max-width:100%;margin:0 auto}.entry{border-top:2px solid #25384f;border-bottom:2px solid #25384f;background:#ff8764;padding:100px 20px 85px}.form-wrap{width:558px;max-width:100%;margin:0 auto}.form-title{text-align:center;margin:0 0 38px}.form-title strong{display:inline-block;border:2px solid #153854;background:#fa674d;color:#fff;font-size:32px;padding:5px 16px;font-weight:900;box-shadow:0 5px #0002}.form-title h2{display:table;transform:rotate(-3deg);margin:0 0 0 auto;background:#fff;border:2px solid #153854;padding:1px 20px;font-size:34px;box-shadow:0 5px #0002}.form-row{display:flex;border:2px solid #143557;margin:7px 0;min-height:58px;background:#fff;box-shadow:0 5px #0002}.form-row label{display:flex;align-items:center;justify-content:center;flex:0 0 160px;background:#ff7856;color:white;font-size:22px;font-weight:700}.form-row:nth-of-type(2) label{background:#00b499}.form-row:nth-of-type(3) label{background:#333}.form-row input{min-width:0;width:100%;border:0;padding:10px 22px;font:22px 'Noto Sans KR','Malgun Gothic',sans-serif}.form-row input::placeholder{color:#bbb}.form-note{margin:22px 18px 32px;font-size:17px;line-height:1.5;color:#25180f}.terms{height:185px;overflow:auto;background:#fff;border:2px solid #173b59;padding:20px 24px;color:#111;font-size:16px;line-height:1.5}.terms p{margin:0 0 18px}.agree{border:0;padding:10px 0;display:flex;align-items:center;justify-content:space-between;gap:6px;color:#25180f;font-size:16px}.agree label{white-space:nowrap;display:flex;align-items:center}.agree input{accent-color:#092e63;width:21px;height:21px}.form-actions{display:flex;gap:18px;margin:24px auto 0;width:470px;max-width:100%}.form-actions button{border:2px solid #173b59;flex:1;font-size:24px;font-weight:700;color:white;background:#ff5d37;padding:15px 5px;box-shadow:0 5px #0002}.form-actions button[type=reset]{background:#a8a8a8}#form-status{text-align:center}.notice{background:#eee}.sns{background:#333}footer{background:#262626}.floating{position:fixed;top:160px;left:calc(50% + 472px);width:190px;height:361px;z-index:9}.floating .youtube{left:1%;top:8%;width:98%;height:29%}.floating .instagram{left:1%;top:37%;width:98%;height:29%}.floating .participate{left:1%;top:66%;width:98%;height:33%}.mobile-nav{display:none}@media(max-width:1199px){.floating{left:auto;right:18px;width:160px;height:auto;aspect-ratio:190/361}.floating img{width:190px;max-width:100%}}@media(min-width:768px) and (max-width:1119px){.floating{display:none}}@media(max-width:767px){body{padding-bottom:72px}.native{width:728px}.entry{padding:55px 16px 45px}.form-title strong{font-size:23px}.form-title h2{font-size:26px}.form-row{min-height:49px}.form-row label{flex-basis:99px;font-size:17px}.form-row input{font-size:17px;padding:8px 10px}.form-note{font-size:13px;margin:20px 3px 24px}.terms{padding:14px;font-size:14px}.agree{flex-wrap:wrap;justify-content:flex-start;font-size:13px}.agree>span{width:100%;margin-bottom:3px}.agree label{margin-right:10px}.form-actions button{font-size:20px}.floating{display:none}.mobile-nav{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:20;height:72px;box-shadow:0 -2px 8px #0003}.mobile-nav>a,.mobile-nav>button{flex:1;border:1px solid #182646;text-align:center;display:flex;justify-content:center;align-items:center;background:#ff004c;color:#fff;text-decoration:none;font:700 15px/1.45 'Noto Sans KR','Malgun Gothic',sans-serif}.mobile-nav>.instagram{background:#ff4077}.mobile-nav>.participate{background:#0874cd}.mobile-nav>.kakaoShare{background:#ffda7a;color:#30200d}}

@media(max-width:1359px){.floating{display:none}}

html,body{overflow-x:clip}

html,body{overflow-x:hidden}

.notice{background:#ededed}.sns{background:#353535}.floating{height:356px}.floating img{width:190px;height:356px}.floating .youtube{top:8%;height:29%}.floating .instagram{top:37%;height:29%}.floating .participate{top:66%;height:33%}

body{background:#ffca6d}.entry{background:#ff8566}

/* 2026-11-04 히어로: PSD 조각을 1920 무대(1 PSD px = --u)에 올리고 등장/반복 애니메이션. 모바일은 가운데 728px이 화면 폭에 맞음. */
.hero{--u:1px;position:relative;height:calc(1092*var(--u));overflow:hidden;background:#ffca6d}
.hero-stage{position:absolute;top:0;left:calc(50% - 960*var(--u));width:calc(1920*var(--u));height:calc(1092*var(--u))}
.hero-bg{position:absolute;left:0;top:0;width:100%;max-width:none;height:auto}
.hp{position:absolute;left:calc(var(--x)*var(--u));top:calc(var(--y)*var(--u));width:calc(var(--w)*var(--u))}
.hp img{width:100%;max-width:none;height:auto}
.hp-buttons{z-index:2;filter:drop-shadow(0 calc(5*var(--u)) 0 #0002)}
.hp-logo{z-index:3}
.top-buttons .youtube{left:2.17%;top:9.2%;width:31.4%;height:81.6%}.top-buttons .instagram{left:33.42%;top:10.3%;width:39.1%;height:80.5%}.top-buttons .participate{left:73.07%;top:17.2%;width:24.76%;height:73.6%;overflow:hidden}
@media(max-width:767px){.hero{--u:min(1px,calc(100vw / 728))}}
.motion .hp{animation:var(--in,hp-fade) .9s cubic-bezier(.2,.8,.25,1.15) var(--d) both}
.motion .m-drop{--in:hp-drop}.motion .m-pop{--in:hp-pop}.motion .m-rise{--in:hp-rise}.motion .m-fade{--in:hp-fade}.motion .m-in-left{--in:hp-in-left}.motion .m-in-right{--in:hp-in-right}
@keyframes hp-fade{from{opacity:0;transform:translateY(calc(16*var(--u)))}}
@keyframes hp-drop{from{opacity:0;transform:translateY(calc(-40*var(--u)))}}
@keyframes hp-rise{from{opacity:0;transform:translateY(calc(110*var(--u)))}}
@keyframes hp-pop{0%{opacity:0;transform:scale(.2) rotate(-14deg)}60%{opacity:1;transform:scale(1.16) rotate(4deg)}100%{transform:none}}
@keyframes hp-in-left{from{opacity:0;transform:translateX(calc(-220*var(--u))) rotate(-8deg)}}
@keyframes hp-in-right{from{opacity:0;transform:translateX(calc(220*var(--u))) rotate(8deg)}}
.motion .m-pop img{animation:hp-wave 3.2s ease-in-out calc(var(--d) + 1.2s) infinite}
.motion .hp-copy-star img{animation:hp-twinkle 1.8s ease-in-out 1s infinite}
.motion .hp-copy-sub img{animation:hp-wiggle 2.8s ease-in-out 2s infinite;transform-origin:50% 80%}
.motion .hp-main-center img{animation:hp-sink 3.6s ease-in-out 1.6s infinite}
.motion .hp-main-left1 img{animation:hp-sink 2.6s ease-in-out 1.9s infinite}
.motion .hp-main-left2 img{animation:hp-bob 3s ease-in-out 1.7s infinite}
.motion .hp-main-right img{animation:hp-sink 2.8s ease-in-out 2.1s infinite}
.motion .hp-side-left img{animation:hp-sink 3.4s ease-in-out 1.5s infinite}
.motion .hp-side-right img{animation:hp-sink 3.4s ease-in-out 1.8s infinite}
.motion .hp-logo img{animation:none}
@keyframes hp-wave{0%,70%,100%{transform:none}80%{transform:translateY(calc(-12*var(--u))) rotate(-3deg)}90%{transform:translateY(calc(2*var(--u)))}}
@keyframes hp-twinkle{0%,100%{transform:scale(1) rotate(0)}50%{transform:scale(1.3) rotate(18deg);opacity:.75}}
@keyframes hp-wiggle{0%,60%,100%{transform:none}70%{transform:rotate(-2.5deg)}80%{transform:rotate(2deg)}90%{transform:rotate(-1deg)}}
@keyframes hp-sway{0%,100%{transform:rotate(-1.2deg)}50%{transform:rotate(1.2deg) translateY(calc(-6*var(--u)))}}
@keyframes hp-bob{0%,100%{transform:none}50%{transform:translateY(calc(-10*var(--u)))}}
@keyframes hp-peek{0%,100%{transform:rotate(0)}50%{transform:rotate(3deg)}}
@keyframes hp-peek-r{0%,100%{transform:rotate(0)}50%{transform:rotate(-3deg)}}
/* 이벤트 참여하기 버튼 반짝임 */
.top-participate:after,.bottom-participate:after,.float-participate:after{content:'';position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(100deg,#fff0,#fff7,#fff0);transform:skewX(-18deg);animation:hp-shine 3.2s ease-in-out 2s infinite;pointer-events:none}
.bottom-participate,.float-participate{overflow:hidden}
@keyframes hp-shine{0%,60%{left:-60%}100%{left:130%}}
/* 스크롤 등장 */
.motion .reveal{opacity:0;transform:translateY(40px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.8,.25,1)}
.motion .reveal.is-revealed{opacity:1;transform:none}
.motion .gifts.is-revealed{animation:hp-float 3.6s ease-in-out .8s infinite}
@keyframes hp-float{0%,100%{transform:none}50%{transform:translateY(-8px)}}
/* PC 플로팅: 고리에 매달린 듯 흔들림 */
.motion .floating{animation:hp-swing 4s ease-in-out infinite;transform-origin:50% 0}
@keyframes hp-swing{0%,100%{transform:rotate(-1.6deg)}50%{transform:rotate(1.6deg)}}
.motion.is-paused *,.motion.is-paused *:after{animation-play-state:paused!important}
@media(prefers-reduced-motion:reduce){.motion .hp,.motion .hp img,.motion .floating,.motion .gifts,.top-participate:after,.bottom-participate:after,.float-participate:after{animation:none!important}.motion .reveal{opacity:1;transform:none;transition:none}}
/* 2026-11-04 기본 글꼴 Noto Sans KR: 버튼·입력창도 같은 글꼴 */
button,input,textarea,select{font-family:inherit}
/* 2026-11-04 캐릭터는 PSD에서 액자 아래선(y=1018)에 맞춰 잘려 있음: 아래선에서 자르고, 잘린 쪽(아래)으로만 숨었다 올라오게 해 단면이 안 보이게 함 */
.hero-chars{position:absolute;left:0;top:0;width:100%;height:calc(1018*var(--u));overflow:hidden}
@keyframes hp-sink{0%,100%{transform:none}50%{transform:translateY(calc(12*var(--u)))}}

/* 메인 중복 참여 버튼 대신 PC/모바일 공통 일정 안내. 원본 PC 크기 유지. */
.hero{container-type:inline-size}
.hero-dates{position:absolute;left:calc(960*var(--u) - min(364*var(--u),50cqw));top:calc(938*var(--u));width:min(calc(728*var(--u)),100cqw);margin:0;z-index:3;border:calc(3*var(--u)) solid #102c65;background:#fff;box-shadow:0 calc(6*var(--u)) 0 #001d4d22;color:#102c65;font-size:calc(24*var(--u));line-height:1.3;letter-spacing:calc(-.7*var(--u))}
.hero-dates>div{display:flex;min-height:calc(65*var(--u));align-items:stretch}.hero-dates>div+div{border-top:calc(2*var(--u)) solid #102c65}.hero-dates dt{display:flex;align-items:center;justify-content:center;flex:0 0 calc(164*var(--u));background:#123b85;color:#fff;font-weight:900}.hero-dates>div+div dt{background:#ff4077}.hero-dates dd{display:flex;align-items:center;justify-content:center;flex:1;min-width:0;margin:0;padding:calc(8*var(--u)) calc(8*var(--u));font-weight:700;white-space:nowrap}.hero-dates .date-separator{padding:0 calc(5*var(--u));font-weight:400}