/* =========================================================
   khan-motion.css — 브랜드 로고 + 인터랙션/모션 레이어
   khan.css 이후에 로드된다. 모든 모션은 prefers-reduced-motion 에서 해제.
   ========================================================= */
:root{
  --mo-out:cubic-bezier(.22,1,.36,1);
  --mo-spring:cubic-bezier(.34,1.56,.64,1);
}

/* ---------- 1. 정식 이미지 로고 ---------- */
.kh-logo{display:inline-block;width:160px;max-width:100%;line-height:0;vertical-align:middle}
.kh-logo-image{display:block;width:100%;height:auto;max-width:100%}
.kh-header-logo{display:inline-flex;align-items:center;flex:0 1 160px;min-width:0;min-height:44px}
.kh-header-logo>.kh-logo{width:100%}
.kh-logo--mobile{width:160px}
.kh-logo--footer{width:184px}
@media(min-width:1024px){.kh-header-logo{flex-basis:168px}}
@media(max-width:359px){.kh-header-logo{flex-basis:148px}.kh-header-inner{gap:12px}}

/* ---------- 2. 스크롤 진행 바 ---------- */
.kh-scrollbar{position:fixed;top:0;left:0;right:0;height:3px;z-index:120;pointer-events:none;background:transparent}
.kh-scrollbar i{display:block;height:100%;width:100%;transform:scaleX(0);transform-origin:0 50%;
  background:linear-gradient(90deg,var(--brand),var(--brand-light) 60%,#C1A8FF);transition:transform .08s linear}

/* ---------- 3. 스크롤 등장(스태거) ---------- */
/* 2026-10-03 .kh-rv.kh-rv 로 특이성을 올림: .bcard / .fc / .kh-card 의 hover transition(transform·box-shadow·border-color만)이 .kh-rv 의
   opacity·transform transition 을 덮어써서 카드가 페이드 없이 즉시 켜지던 문제. 등장이 끝나면(JS, transitionend) .kh-rv-done 으로 원래 hover transition 복귀. */
.kh-rv.kh-rv{opacity:0;transform:translateY(16px);
  transition:opacity .62s var(--mo-out) var(--d,0s),transform .62s var(--mo-out) var(--d,0s)}
.kh-rv.kh-rv.is-in{opacity:1;transform:none}
.kh-rv.kh-rv.is-in.kh-rv-done{transition:transform .24s var(--mo-out),box-shadow .24s var(--mo-out),border-color .2s ease,background-color .2s ease,color .2s ease}
.kh-rv.kh-rv--scale{transform:translateY(12px) scale(.975)}
.kh-rv.kh-rv--left{transform:translateX(-18px)}
.kh-rv.kh-rv--left.is-in{transform:none}

/* ---------- 4. 히어로 배경 모션 ---------- */
.hero{position:relative;isolation:isolate}
@keyframes kh-drift{0%,100%{transform:none}33%{transform:translate3d(26px,18px,0) scale(1.06)}66%{transform:translate3d(-20px,10px,0) scale(.96)}}
.hero-art img{animation:kh-float 6.5s ease-in-out infinite;will-change:transform}
@keyframes kh-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
.hero h1 em{position:relative;display:inline-block}
.hero h1 em:after{content:'';position:absolute;left:0;right:0;bottom:.06em;height:.28em;border-radius:3px;
  background:linear-gradient(90deg,rgba(var(--brand-rgb),.16),rgba(149,108,249,.26));transform:scaleX(0);transform-origin:0 50%;
  animation:kh-underline .9s var(--mo-out) .5s forwards;z-index:-1}
@keyframes kh-underline{to{transform:scaleX(1)}}
.hot a{animation:kh-pop .5s var(--mo-out) both}
.hot a:nth-of-type(1){animation-delay:.30s}
.hot a:nth-of-type(2){animation-delay:.38s}
.hot a:nth-of-type(3){animation-delay:.46s}
.hot a:nth-of-type(4){animation-delay:.54s}
.hot a:nth-of-type(5){animation-delay:.62s}
@keyframes kh-pop{from{opacity:0;transform:translateY(7px) scale(.96)}to{opacity:1;transform:none}}
.search{transition:box-shadow .3s var(--mo-out),transform .3s var(--mo-out)}
.search:focus-within{box-shadow:0 10px 30px rgba(var(--brand-rgb),.16);transform:translateY(-1px)}

/* ---------- 6. 카테고리 아이콘 미세 모션 ---------- */
.cat img{transition:transform .28s var(--mo-out)}
.cat:hover img{transform:translateY(-3px) scale(1.06)}
.cat span{transition:color .18s ease}
.cat:hover span{color:var(--blue)}
.cat.all i{transition:transform .35s var(--mo-spring),color .2s ease}
.cat.all:hover i{transform:rotate(90deg) scale(1.05);color:var(--blue)}

/* ---------- 7. 숫자 카운트업 ---------- */
.big4 dd{font-variant-numeric:tabular-nums}
[data-count]{display:inline-block}
.big4 div{transition:transform .25s var(--mo-out)}
.big4 div:hover{transform:translateY(-2px)}

/* ---------- 8. 지역 랭킹 리스트 ---------- */
.tlist a{transition:background .18s ease,transform .18s var(--mo-out)}
.tlist a:hover{transform:translateX(3px)}
.tlist .rk{transition:background .2s ease,color .2s ease,transform .3s var(--mo-spring)}
.tlist a:hover .rk{transform:scale(1.12);background:var(--blue);color:#fff}

/* ---------- 9. 배너/기획전 ---------- */
.pb{position:relative;overflow:hidden;transition:transform .32s var(--mo-out),box-shadow .32s var(--mo-out)}
.pb img{transition:transform .5s var(--mo-out)}
.pb:hover{transform:translateY(-3px);box-shadow:0 14px 32px rgba(16,24,40,.10)}
.pb:hover img{transform:translateY(-4px) scale(1.05) rotate(1.5deg)}
.pb:after{content:'';position:absolute;top:0;bottom:0;left:-60%;width:38%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-14deg);opacity:0}
.pb:hover:after{animation:kh-shine .85s var(--mo-out) forwards}
@keyframes kh-shine{from{left:-60%;opacity:.9}to{left:120%;opacity:0}}
.pb-link svg{transition:transform .25s var(--mo-out)}
.pb:hover .pb-link svg{transform:translateX(4px)}
.fc{transition:transform .28s var(--mo-out),border-color .2s ease,box-shadow .28s var(--mo-out)}
.fc img{transition:transform .4s var(--mo-spring);animation:kh-float 6s ease-in-out infinite}
.fc:nth-child(2) img{animation-delay:-1.2s}
.fc:nth-child(3) img{animation-delay:-2.4s}
.fc:hover{transform:translateY(-3px);border-color:var(--brand-line);box-shadow:0 10px 24px rgba(16,24,40,.08)}
.fc:hover img{transform:scale(1.1) rotate(-4deg)}

/* ---------- 10. 카드 ---------- */
.kh-card{transition:transform .24s var(--mo-out),border-color .2s ease,box-shadow .24s var(--mo-out)}
@media(hover:hover){.kh-card:hover{transform:translateY(-4px);border-color:var(--brand-line);box-shadow:0 12px 26px rgba(16,24,40,.10)}}
.kh-card__title{transition:color .18s ease}
.kh-card:hover .kh-card__title{color:var(--blue)}
.kh-card__fav{transition:transform .3s var(--mo-spring),color .18s ease}
.kh-card__fav:hover{transform:scale(1.15)}
.kh-card__fav[aria-pressed=true] svg{animation:kh-heart .42s var(--mo-spring)}
@keyframes kh-heart{0%{transform:scale(.7)}55%{transform:scale(1.25)}100%{transform:scale(1)}}
.tab{transition:background .18s ease,color .18s ease,border-color .18s ease,transform .18s var(--mo-out)}
.tab:hover{transform:translateY(-1px)}
.tab.on{animation:kh-tabon .32s var(--mo-spring)}
@keyframes kh-tabon{0%{transform:scale(.94)}60%{transform:scale(1.04)}100%{transform:scale(1)}}

/* ---------- 11. 랭킹(지금 많이 보는) ---------- */
.rank-grid a,.rank-row{transition:background .18s ease,transform .2s var(--mo-out)}
.rank-grid a:hover{transform:translateX(3px)}

/* ---------- 12. 진행 절차 ---------- */
.step{position:relative}
.step .no,.step b:first-child{transition:transform .3s var(--mo-spring)}
.step:hover .no{transform:scale(1.1)}

/* ---------- 13. FAQ / CTA ---------- */
.faq summary{transition:background .18s ease,color .18s ease}
.faq summary:hover{color:var(--blue)}
.faq details[open] summary svg{transform:rotate(180deg)}
.cta{position:relative;overflow:hidden}
.cta-in{position:relative;z-index:1}
.cta:before{content:'';position:absolute;width:520px;height:520px;right:-140px;top:-190px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.14),transparent 65%);animation:kh-drift 19s ease-in-out infinite}
.cta:after{content:'';position:absolute;width:420px;height:420px;left:-120px;bottom:-200px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.10),transparent 65%);animation:kh-drift 23s ease-in-out infinite reverse}
.btn-fill,.kh-btn--primary{position:relative;overflow:hidden}
.btn-fill:after,.kh-btn--primary:after{content:'';position:absolute;top:0;bottom:0;left:-70%;width:40%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-16deg);opacity:0}
.btn-fill:hover:after,.kh-btn--primary:hover:after{animation:kh-shine .8s var(--mo-out) forwards}
.btn:hover,.kh-btn:hover,.kh-hd-btn:hover{transform:translateY(-1px)}
.btn:active,.kh-btn:active{transform:translateY(0) scale(.985)}

/* ---------- 14. 헤더 ---------- */
.kh-header{transition:box-shadow .25s ease,background .25s ease}
.kh-header.is-stuck{box-shadow:0 4px 18px rgba(16,24,40,.07);background:#fff}
.kh-gnb a,.kh-gnb-toggle{position:relative}
.kh-gnb>ul>li>a:after,.kh-gnb-toggle:after{content:'';position:absolute;left:0;right:0;bottom:-6px;height:2px;border-radius:2px;
  background:var(--blue);transform:scaleX(0);transform-origin:0 50%;transition:transform .28s var(--mo-out)}
.kh-gnb>ul>li>a:hover:after,.kh-gnb-toggle:hover:after,.kh-gnb>ul>li.on>a:after{transform:scaleX(1)}
.kh-hd-tel svg{transition:transform .4s var(--mo-spring)}
.kh-hd-tel:hover svg{transform:rotate(-14deg) scale(1.12)}
.kh-top-btn{transition:transform .3s var(--mo-spring),opacity .25s ease}
.kh-top-btn:hover{transform:translateY(-3px)}

/* ---------- 15. 모션 최소화 옵션 ---------- */
@media(prefers-reduced-motion:reduce){
  .kh-rv,.hot a{opacity:1!important;transform:none!important}
  *,*:before,*:after{animation:none!important}
}

/* ---------- 16. 절차 단계 아이콘 ---------- */
.step-ico{display:block;width:46px;height:46px;margin-bottom:12px;color:var(--blue);
  background:linear-gradient(140deg,var(--brand-soft),var(--brand-wash));border-radius:13px;padding:9px;
  transition:transform .35s var(--mo-spring),background .25s ease}
.step-ico svg{width:100%;height:100%;display:block}
.step-ico svg *{stroke-dasharray:140;stroke-dashoffset:140;animation:kh-draw 1.1s var(--mo-out) forwards}
.step:nth-child(2) .step-ico svg *{animation-delay:.1s}
.step:nth-child(3) .step-ico svg *{animation-delay:.2s}
.step:nth-child(4) .step-ico svg *{animation-delay:.3s}
.step:nth-child(5) .step-ico svg *{animation-delay:.4s}
@keyframes kh-draw{to{stroke-dashoffset:0}}
.step:hover .step-ico{transform:translateY(-4px) rotate(-3deg);background:linear-gradient(140deg,#EDE5FF,var(--brand-wash))}
.step .step-ico{animation:kh-float 6.4s ease-in-out infinite}
.step:nth-child(even) .step-ico{animation-delay:-1.6s}
@media(prefers-reduced-motion:reduce){.step-ico svg *{stroke-dashoffset:0!important}}
.step.kh-rv .step-ico svg *{animation-play-state:paused}
.step.kh-rv.is-in .step-ico svg *{animation-play-state:running}

/* ---------- 17. CTA 캐릭터 ---------- */
.cta-art{display:none}
@media(min-width:1100px){
  .cta-in{position:relative;padding-right:210px}
  .cta-art{display:block;position:absolute;right:16px;bottom:50%;transform:translateY(50%);
    width:156px;height:156px;object-fit:cover;border-radius:50%;background:#fff;padding:6px;
    box-shadow:0 14px 30px rgba(36,19,72,.28);pointer-events:none;animation:kh-float-c 5.6s ease-in-out infinite}
  @keyframes kh-float-c{0%,100%{transform:translateY(50%)}50%{transform:translateY(calc(50% - 8px))}}
}
/* ---------- 18. 매수 의뢰 배지 ---------- */
.bcard-top b{display:inline-flex;align-items:center;gap:6px}
.kh-dot{width:6px;height:6px;border-radius:50%;background:var(--blue);flex:none;animation:kh-ping 2.2s ease-out infinite}
.bcard{transition:transform .24s var(--mo-out),box-shadow .24s var(--mo-out),border-color .2s ease}
.bcard:hover{transform:translateY(-3px);border-color:var(--brand-line);box-shadow:0 10px 24px rgba(16,24,40,.09)}
/* 티커 라벨이 흐르는 텍스트에 겹치지 않도록 */

/* ---------- 19. 모바일 보정 ---------- */
@media(max-width:639px){
  .kh-home-cards .kh-card__title,.kh-cards-grid .kh-card__title{min-height:0}
  .cta-art{display:none}
}