/* 메인 히어로 모션: 무음 루프 영상 + 브랜드 필름 모달 (js/hero-motion.js)
   영상과 포스터 안에 아래쪽 그라데이션이 들어 있어서 슬라이드의 .ph-shade::after 와 사진 슬롯은 끕니다. */
.hero-motion{background:var(--ink-900)}
.hm-media{position:absolute;inset:0;z-index:0}
.hm-media img,.hm-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.hm-video{opacity:0;transition:opacity .3s var(--ease)}
.hero-motion.is-playing .hm-video{opacity:1}
.hero-motion .hero-slide{z-index:1;background:none;transition-duration:.4s}
.hero-motion .hero-slide.ph-shade::after{content:none}
.hero-motion.is-still .hero-dots{display:none}
/* 학습자 수 칩은 영상 왼쪽 위 결과물 카드와 겹치지 않게 위쪽 가장자리에 걸칩니다 */
.hero-motion ~ .hero-float{top:-22px}
.hs-play:focus-visible{outline:2px solid #fff;outline-offset:3px}

/* 브랜드 필름 모달: .modal 위에 영상 크기만 바꿉니다 */
.modal.modal-film{max-width:min(960px,calc((100vh - 120px) * 16 / 9));background:var(--ink-900);color:#fff;overflow:hidden}
.modal-film .modal-head{padding:14px 14px 12px 22px}
.modal-film .modal-head h3{font-size:15px;font-weight:700}
.modal-film .icon-btn{color:#fff}
.modal-film video{display:block;width:100%;aspect-ratio:16/9;background:#000}
@media (max-width:768px){
  .modal-backdrop.hm-film{padding:12px}
}