/*! ChewGumi Scroll Stability v2 · MedIT
    v1에서 html에 걸었던 overflow 설정이 스크롤을 막아 되돌림 */

/* 가로 넘침만 막는다. html에는 손대지 않는다 */
body{overflow-x:clip}

/* 스크롤바 자리를 고정해 가로 폭이 튀지 않게 한다 */
@supports(scrollbar-gutter:stable){
  html{scrollbar-gutter:stable}
}

/* 고정 헤더를 별도 레이어로 올려 다시 그리지 않게 한다 */
header{
  transform:translateZ(0);
  backface-visibility:hidden}
/* 그림자를 켜고 끄면 흔들리므로 투명도만 바꾼다 */
header::after{
  content:"";position:absolute;left:0;right:0;bottom:-14px;height:14px;
  pointer-events:none;opacity:0;transition:opacity .3s ease;
  background:linear-gradient(180deg,rgba(0,0,0,.055),transparent)}
header.stuck::after{opacity:1}
header.stuck{box-shadow:none !important}

/* 떠 있는 요소도 별도 레이어로 */
.m-nav,.kko-fab,.cgbot-fab,.cg-pwa,.cg-lite-bar{
  transform:translateZ(0);backface-visibility:hidden}

/* 등장 효과가 높이에 영향을 주지 않도록 */
.reveal{opacity:0;transform:translate3d(0,20px,0);transition:none}
.reveal.in{opacity:1;transform:none;
  transition:opacity .7s ease,transform .7s cubic-bezier(.32,.72,0,1)}

/* 이미지가 늦게 떠서 페이지가 밀리는 것 방지 */
img{max-width:100%}

/* 모바일 주소창 높이 변화 대응 */
@supports(height:100dvh){
  .popup-dim,.kko-pop,.bk-pop,.uf-pop,.join-dim{height:100dvh}
}

/* 터치 기기에서 스크롤 중 hover가 떨림을 만드는 것 방지 */
@media(hover:none){
  .card:hover,.comm-card:hover,.plan:hover,.perk:hover,.uf-card:hover{
    transform:none !important}
  .film:hover .film-poster{transform:none}
}