/* 지인 초대 event 랜딩 CSS — 정본 `pages/nelt/invitation.asp` 임베드 `<style>`(69~201행) **1:1 전사**.
 *
 * 🔴 2026-09-18 전면 재작성. 이전 판은 같은 블록을 옮긴다고 적어 놓고 **뒷부분을 통째로 빠뜨렸다**:
 *    `@keyframes` 6개 전부 · `.kakao` · `.dotted_line` · `.noti_box` 블록 7줄 ·
 *    `.step_swiper`/`.swiper-scrollbar` · `h2.thin`/`.btn_wrap.thin` · `font-family` 선언 5곳.
 *    - 키프레임이 없으니 `.item_balloon`·`.dotted_line`·`.kakao` 의 CSS animation 이 아무 일도 안 했다
 *      → 검수 혼합-11 "상단 이미지 모션 작동 안 됨". **GSAP 만 이식하면 절반만 고쳐진다**(모션이
 *      둘로 나뉘어 있다: 스크롤 진입은 GSAP, 말풍선/점선/카톡은 CSS animation).
 *    - `.nums`·`.counts strong` 의 `font-family:'Pretendard',sans-serif` 가 빠져서 상위 Paperlogy 를
 *      상속했다 → 검수 혼합-12 "css적용 안됨(폰트 색상)". **색상은 라이브와 동일했고 실제로는 폰트였다**
 *      (실측: 라이브 `Pretendard, sans-serif` / 이식본 `Paperlogy, 맑은 고딕, …`).
 *    ⚠ `'Pretendard'`(비-Variable)는 어느 시트에도 @font-face 가 없다 → 라이브에서도 `sans-serif`(시스템)로
 *      떨어진다. **그게 라이브의 실제 모습**이므로 그대로 옮긴다(Pretendard Variable 로 "고쳐" 두면 어긋난다).
 *
 * ⚠ 손으로 정규화하지 말 것. 이 파일은 정본 블록을 그대로 두고, 신스택 보정만 맨 끝 `보정` 절에 모은다.
 *   (재전사: `sed -n '69,201p' /Volumes/webroot$/m.netutor.co.kr/pages/nelt/invitation.asp`)
 * ⚠ `body.lock`·`header.f_header` 는 레거시 레이아웃용이라 신스택엔 걸리는 요소가 없다(무해). 정본 유지.
 */

body.lock{overflow:hidden;}
.ne-footer{margin-top:0;}
header.f_header{height:60px;position:absolute;}
.ne #content.event_wrap{position:relative;background:#EAEDF2;font-family:'Paperlogy','맑은 고딕',system-ui,-apple-system,sans-serif;}
.event_wrap .inner{width:100%;max-width:360px;margin:0 auto;padding:0 25px;box-sizing:border-box;}
.ico_nelt{display:inline-block;overflow:hidden;text-indent:-9999em;font-style:normal;}

/* ===== VISUAL (Hero) ===== */
.visual{position:relative;overflow:hidden;}
.visual .tit{position:relative;height:510px;}
.visual .tit > p{position:absolute;top:61px;left:0;right:0;margin:0;text-align:center;font-size:14px;font-weight:600;color:#323232;white-space:nowrap;}
.visual .tit > p strong{font-weight:800;color:#e96d0a;text-decoration:underline;text-underline-offset:2px;}

.visual h2{position:absolute;top:102px;left:0;right:0;height:133px;margin:0;padding:0;text-align:center;z-index:3;}
.visual h2 span{position:absolute;left:0;right:0;}
.visual h2 span:first-child{top:0;}
.visual h2 span:nth-child(2){top:37px;font-size:50px;font-weight:900;color:#001865;letter-spacing:-0.4px;line-height:normal;}
.visual h2 span:last-child{top:80px;}
.ico_nelt{display:inline-block;overflow:hidden;text-indent:-9999em;font-style:normal;}
.visual h2 .ico_nelt{width:148px;height:39px;background:url(https://pic.neungyule.com/netutor/renew/mo/membership/invitation/nelt_logo.svg) no-repeat center / contain;}
.visual h2 .ico_event{display:block;width:136px;height:53px;background:url(https://pic.neungyule.com/netutor/renew/mo/membership/invitation/visual_event.png) no-repeat center / 100% auto;overflow:hidden;text-indent:-9999em;font-size:0;margin:0 auto;}

/* ===== 캐릭터 영역 ===== */
.visual_box{position:absolute;top:230px;left:50%;margin-left:-180px;width:360px;height:280px;z-index:1;}
.visual_box::before{content:'';position:absolute;left:-69px;top:112px;width:497px;height:497px;background:url(https://pic.neungyule.com/netutor/renew/pc/membership/invitation/bg_ellipse.svg) no-repeat 0 0 / 100%;pointer-events:none;z-index:0;}
.item_human{position:absolute;left:50%;transform:translateX(-50%);top:78px;width:377px;height:207px;z-index:3;}

/* 말풍선 공통 */
.item_balloon{position:absolute;display:block;text-align:center;color:#fff;font-size:9px;font-weight:500;line-height:1.2;box-sizing:border-box;z-index:2;opacity:0;transform:translateY(12px);animation:balloon-fadein .5s ease-out both;}
.item_balloon strong{font-size:11px;font-weight:800;}
.item_balloon.orange{left:26px;top:39px;width:133px;height:47px;background:url(https://pic.neungyule.com/netutor/renew/pc/membership/invitation/balloon_orange.svg) no-repeat center / 100% 100%;padding:8px 10px 14px;animation:balloon-fadein .5s ease-out .3s both,label-float .8s linear .6s infinite alternate;}
.item_balloon.navy{left:214px;top:20px;width:122px;height:49px;background:url(https://pic.neungyule.com/netutor/renew/pc/membership/invitation/balloon_navy.svg) no-repeat center / 100% 100%;padding:8px 10px 15px;animation:balloon-fadein .5s ease-out .55s both,label-float .8s linear .6s infinite alternate;}
@keyframes balloon-fadein{to{opacity:1;transform:translateY(0);}}
@keyframes label-float{from{transform:translateY(0);}to{transform:translateY(-4px);}}
.kakao{position:absolute;left:165px;top:138px;width:37px;height:37px;background:#fee500 url(https://pic.neungyule.com/netutor/renew/pc/membership/invitation/ico_kakao.svg) no-repeat center / 54% auto;border-radius:7px;border:2px solid #e8ebf4;box-sizing:border-box;z-index:2;opacity:0;transform:scale(0);transform-origin:center;animation:kakao-pop .45s cubic-bezier(.34,1.56,.64,1) 1.8s forwards;}
.dotted_line{position:absolute;left:82px;top:155px;width:194px;height:4px;background:url(https://pic.neungyule.com/netutor/renew/mo/membership/invitation/line_dotted.png) no-repeat center / 100% auto;z-index:2;-webkit-mask-image:linear-gradient(to right,#000,#000),linear-gradient(to left,#000,#000);mask-image:linear-gradient(to right,#000,#000),linear-gradient(to left,#000,#000);-webkit-mask-size:0% 100%,0% 100%;mask-size:0% 100%,0% 100%;-webkit-mask-position:left center,right center;mask-position:left center,right center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;animation:dotline-reveal 1s ease-out .7s both;}
@keyframes dotline-reveal{from{-webkit-mask-size:0% 100%,0% 100%;mask-size:0% 100%,0% 100%;}to{-webkit-mask-size:50% 100%,50% 100%;mask-size:50% 100%,50% 100%;}}
@keyframes kakao-pop{to{opacity:1;transform:scale(1);}}

/* coupon (shared) */
.event_wrap .coupon em,.event_wrap .coupon strong,.event_wrap .coupon .date{position:absolute;left:0;right:0;}
.event_wrap .coupon em{top:11px;display:flex;align-items:center;justify-content:center;gap:1px;margin:0;font-size:9px;font-weight:700;font-style:normal;color:#fff;line-height:1;}
.event_wrap .coupon .ico_nelt{width:33px;height:9px;flex-shrink:0;}
.event_wrap .coupon.navy{background:url(https://pic.neungyule.com/netutor/renew/mo/membership/invitation/coupon_navy_mo.svg) no-repeat center / 100% 100%;}
.event_wrap .coupon.navy .ico_nelt{background:url(https://pic.neungyule.com/netutor/renew/mo/membership/invitation/coupon_nelt_navy_mo.svg) no-repeat center / contain;}
.event_wrap .coupon.orange{background:url(https://pic.neungyule.com/netutor/renew/mo/membership/invitation/coupon_orange_mo.svg) no-repeat center / 100% 100%;}
.event_wrap .coupon.orange .ico_nelt{background:url(https://pic.neungyule.com/netutor/renew/mo/membership/invitation/coupon_nelt_orange_mo.svg) no-repeat center / contain;}
.event_wrap .coupon strong{top:26px;margin:0;font-size:31px;font-weight:800;color:#fff;letter-spacing:1.3px;line-height:1;text-align:center;}
.event_wrap .coupon .date{top:65px;margin:0;font-size:7px;font-weight:500;color:rgba(255,255,255,.6);line-height:1;text-align:center;}

/* section2 + section3 */
.event_wrap .section2,.event_wrap .section3{background:#fcfcfe;padding:60px 0 50px;text-align:center;}
.event_wrap .section2 h2{margin:0 0 20px;padding:0;font-size:27px;font-weight:800;line-height:34px;color:#171717;}
.event_wrap .section2 h2 span{display:block;margin:0;}
.event_wrap .section2 h2 .ico_nelt{width:91px;height:24px;background:url(https://pic.neungyule.com/netutor/renew/mo/membership/invitation/nelt_logo.svg) no-repeat center / contain;vertical-align:middle;margin:0 2px;}
.event_wrap .section2 .sub_tit{font-size:12px;font-weight:600;line-height:14px;color:#323232;margin:0 0 50px;white-space:pre-line;}
.event_wrap .section2 .sub_tit strong{font-weight:800;position:relative;z-index:0;}
.event_wrap .section2 .sub_tit strong::after{content:'';position:absolute;left:0;right:0;bottom:-2px;height:7px;background:#fffb21;z-index:-1;}
.event_wrap .section2 .coupon_box{display:flex;justify-content:space-between;align-items:flex-start;gap:13px;}
.event_wrap .section2 .coupon_item{display:flex;flex-direction:column;align-items:center;gap:5px;flex:1;min-width:0;}
.event_wrap .section2 .coupon_item .label{display:flex;align-items:flex-start;justify-content:center;width:118px;min-height:24px;padding:4px 4px 0;box-sizing:border-box;background:url(https://pic.neungyule.com/netutor/renew/mo/membership/invitation/coupon_label_mo.svg) no-repeat center / 100% 100%;font-size:10px;font-weight:800;line-height:1;color:#fff;text-align:center;animation:label-fadein .5s ease-out both,label-float-mo 1.8s ease-in-out .5s infinite alternate;}
.event_wrap .section2 .coupon{position:relative;width:100%;max-width:149px;height:83px;margin:0 auto;}

/* section3 */
.event_wrap .section3 h2{display:flex;flex-direction:column;align-items:center;gap:5px;margin:0 0 30px;padding:0;}
.event_wrap .section3 h2 span:first-child{font-size:16px;font-weight:600;line-height:30px;color:#171717;}
.event_wrap .section3 h2 span:nth-child(2){font-size:30px;font-weight:900;line-height:30px;color:#171717;}
.event_wrap .section3 h2 span:nth-child(2) em{font-style:normal;color:#ff7100;}
.event_wrap .section3 h2 span:nth-child(2) em::after{content:' ';}
.event_wrap .section3 .inner > p{margin:0;font-size:12px;font-weight:600;line-height:20px;color:#303030;}
.event_wrap .section3 #cntInviteUser,.event_wrap .section3 #cntNeltCoupon{display:inline-flex;align-items:center;justify-content:center;min-width:21px;height:18px;padding:0 6px;background:#ececec;border-radius:2px;font-size:13px;font-weight:700;line-height:1;color:#000;box-sizing:border-box;vertical-align:1px;margin:0 2px;font-family:inherit;overflow:hidden;min-width:30px;}
.event_wrap .section3 #cntInviteUser .num,.event_wrap .section3 #cntNeltCoupon .num{display:block;}
.event_wrap .section3 .coupon_container{position:relative;height:126px;margin:20px auto 0;max-width:310px;}
.event_wrap .coupon_container .coupon{position:absolute;left:50%;transform:translateX(-50%);top:20px;width:149px;height:83px;margin:0;}
.event_wrap .section3 .ico_count{position:absolute;left:calc(50% + 54px);top:0;width:40px;height:40px;background:#323232;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:400;color:#fff;letter-spacing:1px;line-height:1;box-sizing:border-box;}
.event_wrap .section3 .ico_count strong{font-size:20px;font-weight:800;color:#fff;letter-spacing:1px;}

/* section4 */
.event_wrap .section4{background:#253772;padding:60px 0;text-align:center;}
.event_wrap .section4 h2{margin:0 0 40px;font-size:30px;font-weight:800;line-height:30px;color:#fff;}
.event_wrap .section4 .step_swiper{position:relative;overflow:hidden;padding-bottom:12px;}
.event_wrap .section4 .swiper-slide{height:258px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;}
.event_wrap .section4 .label{display:block;width:55px;height:20px;background:#fff;border-radius:15px;font-size:9px;font-weight:800;color:#323232;line-height:20px;text-align:center;flex-shrink:0;margin-bottom:20px;}
.event_wrap .section4 .desc{display:flex;flex-direction:column;align-items:center;gap:20px;width:100%;}
.event_wrap .section4 .desc p{margin:0;font-size:12px;font-weight:600;line-height:16px;color:#fff;text-align:center;letter-spacing:-0.01em;}
.event_wrap .section4 .desc strong{font-weight:700;color:#ffeb3b;}
.event_wrap .section4 .desc p > span:not(.sub){font-weight:300;}
.event_wrap .section4 .desc .sub{display:block;font-size:9px;font-weight:400;color:rgba(255,255,255,0.8);line-height:12px;margin-top:4px;}
.event_wrap .section4 .desc img{display:block;width:auto;height:auto;max-width:190px;max-height:160px;object-fit:contain;}
.event_wrap .section4 .swiper-scrollbar{left:50%;transform:translateX(-50%);width:273px;height:3px;background:rgba(255,255,255,0.2);border-radius:2px;bottom:1px;}
.event_wrap .section4 .swiper-scrollbar-drag{background:#fff;border-radius:2px;cursor:grab;}
.event_wrap .section4 .swiper-scrollbar-drag:active{cursor:grabbing;}

/* invite */
.event_wrap .invite{background:#f07b1e;padding:60px 0;text-align:center;}
.event_wrap .invite h2{margin:0 0 20px;padding:0;font-size:30px;font-weight:700;color:#fff;line-height:1;}
.event_wrap .invite .inner > p{margin:0 0 40px;font-size:13px;font-weight:600;color:#fff;line-height:1.08;}
.event_wrap .invite .code_box{display:flex;align-items:center;width:100%;height:60px;background:#fff;border:1px solid #bebebe;border-radius:10px;box-sizing:border-box;margin:0 0 10px;overflow:hidden;}
.event_wrap .invite .nums{flex:1;margin:0;font-family:'Pretendard',sans-serif;font-size:24px;font-weight:500;letter-spacing:5px;color:#000;text-align:center;text-indent:5px;}
.event_wrap .invite .btn_clip{display:flex;align-items:center;gap:4px;padding:0 15px 0 0;font-size:10px;font-weight:500;color:#e96d0a;text-decoration:none;white-space:nowrap;flex-shrink:0;}
.event_wrap .invite .btn_clip::before{content:'';display:inline-block;width:10px;height:10px;background:url(https://pic.neungyule.com/netutor/renew/mo/membership/invitation/ico_clip.svg) no-repeat center / contain;}
.event_wrap .invite .code_box + div{display:flex;gap:10px;margin:0 0 40px;}
.event_wrap .invite .item{flex:1;min-width:0;height:120px;background:#fff;border-radius:10px;display:flex;flex-direction:column;align-items:center;padding:20px 5px;box-sizing:border-box;}
.event_wrap .invite .label{display:block;font-size:12px;font-weight:400;color:#171717;line-height:1;margin:0 0 12px;}
.event_wrap .invite .counts{margin:0;font-size:12px;font-weight:400;color:#171717;line-height:1;text-align:center;}
.event_wrap .invite .counts strong{font-family:'Pretendard',sans-serif;font-size:40px;font-weight:800;color:#ff7100;line-height:1;vertical-align:-2px;}
.event_wrap .invite .sub_txt{margin:8px 0 0;font-size:9px;font-weight:400;color:#171717;line-height:1;text-align:center;}
.event_wrap .invite .sub_txt span{font-weight:600;color:#e96d0a;}
.event_wrap .invite .btn_wrap{margin:0 0 40px;}
.event_wrap .invite .btn_invite{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;height:48px;background:#ffe92b;border:1.5px solid #553218;border-radius:10px;box-shadow:0 1.5px 4px .5px rgba(0,0,0,.24),inset 0 0 0 1px rgba(255,255,255,.5);text-decoration:none;box-sizing:border-box;position:relative;overflow:hidden;}
.event_wrap .invite .btn_invite::before{content:'';display:block;width:15px;height:14px;background:url(https://pic.neungyule.com/netutor/renew/mo/membership/invitation/ico_kakao_btn.svg) no-repeat center / contain;flex-shrink:0;}
.event_wrap .invite .btn_invite span{font-family:'Pretendard',sans-serif;font-size:16px;font-weight:700;color:#000;line-height:1;}
.event_wrap .noti_box{text-align:left;}
.event_wrap .noti_box h3{margin:0 0 12px;padding:0;font-size:12px;font-weight:800;color:#fff;line-height:1;}
.event_wrap .noti_box ul{margin:0;padding:0;list-style:none;}
.event_wrap .noti_box li{position:relative;padding-left:10px;font-size:11px;color:#fff;line-height:16px;margin:0 0 4px;word-break:keep-all;}
.event_wrap .noti_box li::before{content:'';position:absolute;left:0;top:7px;width:2px;height:2px;background:#fff;border-radius:50%;}
.event_wrap .noti_box li:last-child{margin:0;}
.event_wrap .noti_box a{display:inline-flex;align-items:center;gap:2px;margin-top:6px;padding:4px 6px;background:rgba(255,255,255,.1);border:1px solid #fff;border-radius:2px;font-family:'Pretendard',sans-serif;font-size:11px;font-weight:700;color:#fff;text-decoration:none;line-height:1;}
.event_wrap .noti_box a::after{content:'';display:inline-block;width:5px;height:7px;background:url(https://pic.neungyule.com/netutor/renew/mo/membership/invitation/ico_chevron_right.svg) no-repeat center / contain;}

.event_wrap .invite h2.thin{margin:0 0 60px;font-size:18px;font-weight:400;line-height:24px;}
.event_wrap .invite .btn_wrap.thin{display:flex;flex-direction:column;gap:20px;}
.event_wrap .invite .btn_check{display:flex;align-items:center;justify-content:center;width:100%;height:48px;border:1.5px solid #525252;background:#fff;border-radius:10px;box-shadow:0 1.5px 4px .5px rgba(0,0,0,.24);text-decoration:none;box-sizing:border-box;}
.event_wrap .invite .btn_check span{font-family:'Pretendard',sans-serif;font-size:16px;font-weight:700;color:#000;line-height:1;}

/* keyframes */
@keyframes balloon-fadein{to{opacity:1;transform:translateY(0);}}
@keyframes label-float{from{transform:translateY(0);}to{transform:translateY(-4px);}}
@keyframes dotline-reveal{from{-webkit-mask-size:0% 100%,0% 100%;mask-size:0% 100%,0% 100%;}to{-webkit-mask-size:50% 100%,50% 100%;mask-size:50% 100%,50% 100%;}}
@keyframes kakao-pop{to{opacity:1;transform:scale(1);}}
@keyframes label-fadein{from{opacity:0;}to{opacity:1;}}
@keyframes label-float-mo{from{transform:translateY(0);}to{transform:translateY(-3px);}}

/* ===== 여기부터 신스택 보정(정본에 없음) =====
 * 원본의 `.btn_clip`·`.btn_invite` 는 `<a href="javascript:…">` 인데 이식본은 `<button>` 이다.
 * 버튼은 **폰트를 상속하지 않고** UA 기본 테두리/배경이 붙는다 → 그만큼만 되돌린다.
 * ⚠ `.btn_invite` 는 정본이 배경·테두리를 직접 주므로 여기서 리셋하면 노란 버튼이 사라진다. 손대지 않는다.
 */
.event_wrap .invite .btn_clip{font-family:inherit;border:0;background:none;cursor:pointer;}
.event_wrap .invite .btn_invite{cursor:pointer;}