/* 신도오에이렌탈 영상 히어로 20260930 (대기 미리보기 film-hero-20260930).
   홈 첫 화면 = 15초 브랜드 영상(홈 중간 영상 칸은 이 버전에서 뺐다) · 임대안내 첫 화면 = 30초 진행 과정 영상. 두 곳 같은 방식.
   PC 16:9 / 휴대폰 4:5 영상을 따로 쓰고, 화면 방향(가로 화면·세로 화면)으로 고른다. */
.film-hero{position:relative;z-index:1;isolation:isolate}
.film-hero-stage{position:relative;overflow:hidden}
.film-hero-poster,.film-hero-poster img,.film-hero-video{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover}
.film-hero-video{opacity:0;transition:opacity .4s ease}
.film-hero.is-playing .film-hero-video{opacity:1}
.film-hero-toggle{position:absolute;left:20px;bottom:20px;z-index:4;width:44px;height:44px;padding:0;border-radius:50%;
  border:1px solid rgba(255,255,255,.34);background:rgba(3,11,32,.5);color:#fff;display:grid;place-items:center;cursor:pointer;opacity:.78;transition:opacity .2s ease}
.film-hero-toggle:hover,.film-hero-toggle:focus-visible{opacity:1}
.film-hero-toggle:focus-visible{outline:3px solid #7cc7ff;outline-offset:2px}
.film-hero-toggle svg{width:18px;height:18px;display:block}
.film-hero-toggle[hidden]{display:none}

/* 첫 화면(상단 메뉴 아래 남은 높이)을 꽉 채우되 영상은 자르지 않는다.
   - 영상 칸(stage): 가로 꽉 참, 높이 = min(영상 비율대로의 높이, 첫 화면 남은 높이).
   - 영상 틀(frame): 영상 비율 그대로 칸의 가로·세로 중 먼저 닿는 쪽에 맞춘다 → 잘림 0.
   - 칸이 영상보다 납작하면 남는 양옆은 영상 가장자리 색(--fh-bg, 영상에서 실측)으로 잇고, 그때만 틀 가장자리를 3% 흐려 붙인다.
   - --fh-top = 칸 위쪽까지 높이(미리보기 띠·머리 메뉴·세로 화면 제목 줄), --fh-bottom = 화면 아래 고정 메뉴 높이(휴대폰 하단 줄)
     — 스크립트가 재서 넣는다. */
.film-hero--home{--fh-bg:#040f25;--fh-bg-top:#040f25}
.film-hero--process{--fh-bg:linear-gradient(180deg,#f4f8fe 25%,#dfedfa 75%) left/50.5% 100% no-repeat,linear-gradient(180deg,#e8f1fd 25%,#e6eefa 75%) right/50.5% 100% no-repeat,#e8f1fc;--fh-bg-top:linear-gradient(90deg,#f4f8fe,#e8f1fd)}
.film-hero--fit{background:var(--fh-bg-top,var(--fh-bg))}
/* 세로 화면 제목 줄 배경은 영상 위쪽 가장자리 색을 좌→우로 잇는다(양옆 칸 색은 반씩 나뉘어 있어 줄에 그대로 쓰면 가운데 경계가 보인다). */
.film-hero--fit .film-hero-stage{--fh-top:88px;container-type:size;display:grid;place-items:center;background:var(--fh-bg);
  width:100%;margin-inline:auto;aspect-ratio:16/9;max-height:calc(100vh - var(--fh-top) - var(--fh-bottom,0px));max-height:calc(100svh - var(--fh-top) - var(--fh-bottom,0px))}
/* width:100% 를 꼭 둔다 — 폭이 auto 면 max-height 가 비율을 타고 폭까지 줄여 칸이 왼쪽으로 쏠린다(09-30 검수에서 발견). */
.film-hero--fit .film-hero-frame{position:relative;width:min(100cqw,calc(100cqh * 16 / 9));aspect-ratio:16/9}
@container (min-aspect-ratio: 181/100){
  .film-hero--fit .film-hero-frame{-webkit-mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent);mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent)}
}
.film-hero-top{position:absolute;left:0;right:0;top:0;z-index:3;padding-top:22px;pointer-events:none}
.film-hero-h1{display:inline-flex;align-items:center;gap:8px;margin:0;padding:7px 14px 7px 12px;border-radius:999px;
  background:rgba(3,11,32,.56);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);color:#fff;font-size:15px;line-height:1.4;font-weight:800;letter-spacing:0;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.film-hero-h1:before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:#5aa9ff}
/* 일시정지 단추는 왼쪽 아래(제목과 같은 세로줄). 오른쪽 아래는 사이트 고정 「채팅 상담」·빠른 메뉴 자리라 겹친다. */
.film-hero--fit .film-hero-toggle{left:max(36px,calc((100% - 1180px)/2))}
@media(min-width:1500px){.film-hero--fit .film-hero-toggle{left:calc((100% - 1240px)/2)}}
.film-hero--process .film-hero-toggle{border-color:rgba(255,255,255,.5);background:rgba(15,42,74,.62)}
/* 세로 화면(휴대폰·세로 태블릿)은 4:5 영상. 4:5 영상은 위쪽에 글자가 있어 제목은 영상 위에 겹치지 않고 바로 위 줄에 둔다. */
@media(orientation:portrait){
  .film-hero--fit .film-hero-stage{aspect-ratio:4/5}
  .film-hero--fit .film-hero-frame{width:min(100cqw,calc(100cqh * 4 / 5));aspect-ratio:4/5}
  @container (min-aspect-ratio: 81/100){
    .film-hero--fit .film-hero-frame{-webkit-mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent);mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent)}
  }
  .film-hero--fit .film-hero-top{position:static;padding:12px 0 11px}
  .film-hero--fit .film-hero-h1{padding:0;background:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;font-size:14px}
  .film-hero--process .film-hero-h1{color:#0f2a4a}
}
@media(max-width:699px){
  .film-hero-h1{font-size:14px;padding:6px 12px 6px 10px}
  /* 휴대폰: 진행 과정 영상 아래 연락처 줄(가로 17~83%)을 피해 왼쪽 끝에 작게 */
  .film-hero-toggle,.film-hero--fit .film-hero-toggle{left:10px;bottom:10px;width:38px;height:38px}
}
@media(prefers-reduced-motion:reduce){.film-hero-video{transition:none}}