/* =========================================================
   사이트 움직임 (랜딩 · 과정 목록 · 과정 상세 · 필사 챌린지 공통)
   예전 사이트(v-before-zip-update)의 효과를 지금 화면에 맞게 되살렸어요.
   움직임 줄이기 설정을 켠 사람에게는 모두 꺼져요.
   ========================================================= */

/* 1. 상단 스크롤 진행 바 */
#m-progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:9999;pointer-events:none;
  background:linear-gradient(90deg,#3182F6 0%,#00B4D8 50%,#10B981 100%);box-shadow:0 1px 6px rgba(49,130,246,.4)}

/* 2. 스크롤하면 아래에서 떠오르기 (motion.js가 m-rv를 붙이고, 다 나타나면 떼요) */
.m-rv{opacity:0;transform:translateY(28px);transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1)!important}
.m-rv.m-in{opacity:1;transform:none}

/* 3. 히어로 말풍선 둥실 (폰은 고정) */
.float.f1{animation:m-float 4.5s ease-in-out infinite reverse}
@keyframes m-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

/* 4. 히어로 카드: 마우스를 따라오는 은은한 빛 */
.hero-card{position:relative}
.hero-card::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .4s;
  background:radial-gradient(520px circle at var(--mx,50%) var(--my,50%),rgba(49,130,246,.09),transparent 60%)}
.hero-card:hover::before{opacity:1}

/* 5. 강조 글자: 파란 그라데이션이 천천히 흘러요 */
.hero h1 .hl{background:linear-gradient(90deg,#1B64DA,#3182F6,#00B4D8,#3182F6,#1B64DA);background-size:200% auto;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:m-flow 6s linear infinite}
@keyframes m-flow{to{background-position:200% center}}

/* 6. 주요 버튼: 빛이 쓱 지나가요 */
.btn.pri,.end .btn,.card .more,.m-shine{position:relative;overflow:hidden;isolation:isolate}
.btn.pri::after,.end .btn::after,.card .more::after,.m-shine::after{content:"";position:absolute;top:-50%;left:-60%;width:35%;height:200%;z-index:-1;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.38),transparent);transform:rotate(25deg);animation:m-shine 5s ease-in-out infinite}
@keyframes m-shine{0%{left:-60%}22%,100%{left:140%}}
.btn:active,.btn-s:active,.course:active,.card:active{transform:scale(.97)!important}

/* 7. 카드: 떠오르며 파란 그림자 + 표지 사진 살짝 확대 */
.course,.card,.feat,.plan{transition:transform .35s cubic-bezier(.16,1,.3,1),box-shadow .35s cubic-bezier(.16,1,.3,1),border-color .2s}
.course:not(.soon):hover,.card:not(.soon):hover,.feat:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(49,130,246,.13)}
.course .cv,.card .cv{transition:transform .6s cubic-bezier(.16,1,.3,1)}
.course:not(.soon):hover .cv,.card:not(.soon):hover .cv{transform:scale(1.05)}
.course .cv .em,.card .cv .em,.feat .ic{transition:transform .3s cubic-bezier(.16,1,.3,1)}
.course:hover .cv .em,.card:hover .cv .em,.feat:hover .ic{transform:scale(1.14) rotate(4deg)}
.cv .rank{animation:m-bob 3s ease-in-out infinite alternate}
@keyframes m-bob{to{transform:translateY(-2px)}}

/* 8. 과정 표지 문장: 펜이 지나가며 손글씨처럼 써져요 (호버 · 모바일은 화면에 보일 때 한 번) */
.m-pen{position:relative;display:inline-block}
.m-write .m-pen{animation:m-reveal 1.4s cubic-bezier(.25,1,.5,1) both}
.m-pen::before{content:"✒️";font-family:Tossface,sans-serif;position:absolute;top:-14px;left:0;font-size:16px;opacity:0;pointer-events:none;z-index:2}
.m-write .m-pen::before{animation:m-glide 1.4s cubic-bezier(.25,1,.5,1) forwards,m-wobble .14s ease-in-out infinite alternate}
.m-pen::after{content:"";position:absolute;left:0;bottom:-3px;height:2px;width:0;border-radius:2px;background:linear-gradient(90deg,#FDE047,#F59E0B);box-shadow:0 0 10px rgba(253,224,71,.8)}
.cv:not(.img) .m-pen::after{background:linear-gradient(90deg,#3182F6,#00B4D8);box-shadow:none}
.m-write .m-pen::after{animation:m-line 1.4s cubic-bezier(.25,1,.5,1) forwards}
@keyframes m-reveal{from{clip-path:inset(-20px 100% -6px 0)}to{clip-path:inset(-20px 0 -6px 0)}}
@keyframes m-glide{0%{left:0;opacity:1}92%{left:96%;opacity:1}100%{left:100%;opacity:0}}
@keyframes m-wobble{from{margin-top:-2px;rotate:-18deg}to{margin-top:1px;rotate:-4deg}}
@keyframes m-line{to{width:100%}}

/* 9. 추천 이용권: 숨 쉬듯 빛나요 */
.plan.best{animation:m-glow 4s ease-in-out infinite alternate}
@keyframes m-glow{from{box-shadow:0 16px 36px rgba(49,130,246,.14)}to{box-shadow:0 22px 52px rgba(49,130,246,.3)}}

/* 10. 카카오톡 버튼 둥실 */
.kakao{animation:m-float 3.8s ease-in-out infinite}
.kakao:hover{animation:none;transform:scale(1.06)!important}

/* 11. 자주 묻는 질문: 펼칠 때 부드럽게 */
.faq details[open] p{animation:m-open .35s cubic-bezier(.16,1,.3,1)}
@keyframes m-open{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  .m-rv{opacity:1;transform:none}
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* 12. '왜 데일리 모이스트' 카드: 뻔한 문장이 타자로 쳐지고 → 줄이 그어진 뒤 → 아래 설명이 나와요 */
.feat q.m-type{display:inline-block;position:relative;text-decoration:none;min-height:1.5em}
.feat q.m-type::after{content:"";position:absolute;left:-2px;top:52%;height:1.5px;width:0;background:currentColor;transition:width .45s cubic-bezier(.65,0,.35,1)}
.feat q.m-type.m-strike::after{width:calc(100% + 4px)}
.feat q.m-type.m-typing::before{content:"";position:absolute;right:-4px;top:15%;width:1.5px;height:70%;background:var(--blue,#3182F6);animation:m-caret .7s steps(1) infinite}
@keyframes m-caret{50%{opacity:0}}
.feat.m-wait b,.feat.m-wait p{opacity:0;transform:translateY(10px)}
.feat b,.feat p{transition:opacity .55s cubic-bezier(.16,1,.3,1),transform .55s cubic-bezier(.16,1,.3,1)}
.feat p{transition-delay:.08s}

/* 13. 하루 미리보기: 색 구절 ↔ 구조 1·2·3이 짝지어 차례로 → 템플릿 빈칸 → 내 버전이 타이핑돼요 */
.day-card.m-day .src mark{background-color:transparent!important;-webkit-box-decoration-break:clone;box-decoration-break:clone;background-repeat:no-repeat!important;background-size:0% 100%!important;transition:background-size .7s cubic-bezier(.65,0,.35,1)}
.day-card.m-day .src mark.a{background-image:linear-gradient(var(--m1),var(--m1))!important}
.day-card.m-day .src mark.b{background-image:linear-gradient(var(--m2),var(--m2))!important}
.day-card.m-day .src mark.c{background-image:linear-gradient(var(--m3),var(--m3))!important}
.day-card.m-day .src mark.m-on{background-size:100% 100%!important}
.day-card.m-day .st div{opacity:0;transform:translateX(-14px);transition:opacity .5s,transform .5s cubic-bezier(.16,1,.3,1)}
.day-card.m-day .st div.m-on{opacity:1;transform:none}
.day-card.m-day .tpl em{display:inline-block;opacity:0;transform:scale(.7);transition:opacity .35s,transform .45s cubic-bezier(.34,1.56,.64,1)}
.day-card.m-day .tpl em.m-on{opacity:1;transform:none}
.day-card.m-day .mine{min-height:calc(1.85em + 40px)}
.day-card .mine.m-typing::after{content:"";display:inline-block;width:1.5px;height:1.1em;margin-left:2px;vertical-align:-3px;background:var(--blue,#3182F6);animation:m-caret .7s steps(1) infinite}