@charset "utf-8";
/* =========================================================
   MAIN1 HERO  (2026-07 신규)
   - 기존 CSS 파일 미수정. 이 파일만 제거하면 원상복구.
   - main.css / media.css 이후에 로드되어야 함.
   - 팔레트: #004655 딥틸 / #8ec43e 라임 / #d4bd9d 샌드
   ========================================================= */

/* =========================================================
   HERO 배경 슬라이더 (Swiper 11 patallax)
   - 힐스테이트 안양 펠루스 기법 참고:
     배경을 확대해 두고 슬라이드 전환 시 반대 방향으로 밀어 패럴랙스
   - 기존 Vimeo iframe 자리를 대체. z-index 0 (overlay=4, inner=7 아래)
   ========================================================= */
#video01 .hero-swiper{
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
#video01 .hero-swiper .swiper-wrapper,
#video01 .hero-swiper .swiper-slide{
  height: 100%;
}
#video01 .hero-swiper .swiper-slide{
  overflow: hidden;
  background: #00232b;          /* 이미지 로딩 전 바탕 */
}

/* 1번 슬라이드 = 브랜드 영상.
   Vimeo iframe 은 16:9 고정이라, 슬라이드를 꽉 채우려면
   화면비에 따라 넘치는 쪽을 잘라내야 한다(cover 흉내). */
#video01 .hero-video{
  position: absolute;
  inset: 0;
  overflow: hidden;
}
/* 영상 로드 전 자리를 채우는 포스터 (LCP 대상) */
#video01 .hero-video__poster{
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: opacity .8s ease;
}
/* 영상이 실제로 재생되기 시작하면 포스터를 걷어낸다 */
#video01 .hero-video.is-playing .hero-video__poster{
  opacity: 0;
}

#video01 .hero-video iframe{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100vw;
  height: 56.25vw;        /* 16:9 */
  min-width: 177.78vh;    /* 세로가 길 때 가로 부족분 보정 */
  min-height: 100%;
  border: 0;
  pointer-events: none;   /* 슬라이드 스와이프가 iframe에 먹히지 않도록 */
}

/* 실제로 움직이는 배경 레이어 */
#video01 .hero-slide-bg{
  position: absolute;
  inset: -2%;                   /* 패럴랙스로 밀려도 가장자리 안 비도록 여유 */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  will-change: transform;
  backface-visibility: hidden;
}

/* =========================================================
   히어로 조감도 건물 네온
   main2 '미래 이안에' 와 동일 기법:
   같은 사진을 겹쳐 놓고 대비를 크게 올려 가장 밝은 픽셀(외벽·창)만 통과,
   건물 위치에 마스크를 씌워 그 부분만 발광시킨다.
   마스크 중심 47% / 42% = birdview 이미지 안 타워군 위치
   ========================================================= */
/* ⚠ .hero-slide-bg 는 position:absolute + inset:-2% 로 배치된다.
   여기에 position:relative 를 주면 inset 이 무효화되어 요소가 찌그러지고
   배경 이미지가 사라진다. absolute 자체가 ::after 의 기준점이 되므로
   position 은 건드리지 않는다. */
#video01 .hero-slide-bg--neon::after{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: inherit;      /* 부모와 같은 사진 */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  /* main2 '미래 이안에' 와 동일 수치 (slides-motion.css 참조) */
  filter: brightness(1.35) contrast(3.4) saturate(1.15);
  mix-blend-mode: screen;
  opacity: 0;
  /* 기본값 = birdview 조감도 기준 (타워군 47% / 42%).
     건물이 크게 잡히므로 반경만 그에 맞게 넓힘 */
  -webkit-mask-image: radial-gradient(26% 34% at 47% 42%,
      #000 0%, rgba(0,0,0,.88) 46%, rgba(0,0,0,.38) 72%, transparent 94%);
          mask-image: radial-gradient(26% 34% at 47% 42%,
      #000 0%, rgba(0,0,0,.88) 46%, rgba(0,0,0,.38) 72%, transparent 94%);
}

/* 주변광 헤일로 — main2 미래 슬라이드와 동일하게 2겹 구성 */
#video01 .hero-slide-bg--neon::before{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 2.4s ease-out .6s;
  background:
    radial-gradient(28% 32% at 47% 42%,
      rgba(168, 234, 255, .20) 0%,
      rgba(140, 214, 246, .10) 54%,
      rgba(140, 214, 246, 0)   84%),
    radial-gradient(64% 68% at 47% 44%,
      rgba(130, 200, 240, .11) 0%,
      rgba(120, 190, 235, .05) 46%,
      rgba(120, 190, 235, 0)   88%);
}
#video01 .swiper-slide-active .hero-slide-bg--neon::before{ opacity: 1; }

/* 원경(slider_3)은 건물이 작아 헤일로도 좁게 */
#video01 .hero-slide-bg--neon-far::before{
  background:
    radial-gradient(20% 24% at 58.5% 35%,
      rgba(168, 234, 255, .20) 0%,
      rgba(140, 214, 246, .10) 54%,
      rgba(140, 214, 246, 0)   84%),
    radial-gradient(42% 46% at 58.5% 37%,
      rgba(130, 200, 240, .11) 0%,
      rgba(120, 190, 235, .05) 46%,
      rgba(120, 190, 235, 0)   88%);
}

/* slider_3(원경) 은 건물 위치가 달라 마스크 좌표를 따로 준다 (58.5% / 35%) */
#video01 .hero-slide-bg--neon-far::after{
  -webkit-mask-image: radial-gradient(17% 23% at 58.5% 35%,
      #000 0%, rgba(0,0,0,.88) 46%, rgba(0,0,0,.36) 72%, transparent 94%);
          mask-image: radial-gradient(17% 23% at 58.5% 35%,
      #000 0%, rgba(0,0,0,.88) 46%, rgba(0,0,0,.36) 72%, transparent 94%);
}
/* 해당 슬라이드가 활성일 때만 켜진다 */
/* 타이밍·세기 모두 main2 미래 슬라이드와 동일 */
#video01 .swiper-slide-active .hero-slide-bg--neon::after{
  animation: heroNeonOn 2.6s ease-out .5s forwards,
             heroNeonBreathe 7s ease-in-out 3.4s infinite;
}
@keyframes heroNeonOn{
  from{ opacity: 0;   }
  to  { opacity: .64; }
}
@keyframes heroNeonBreathe{
  0%,100%{ opacity: .64; }
  50%    { opacity: .50; }
}

/* 활성 슬라이드에 아주 느린 켄번스 — 정지 화면처럼 보이지 않게 */
#video01 .hero-swiper .swiper-slide-active .hero-slide-bg{
  animation: heroKenBurns 9s ease-out forwards;
}
@keyframes heroKenBurns{
  from{ transform: scale(1);    }
  to  { transform: scale(1.07); }
}

/* 하단 진행 인디케이터 */
/* 진행바 — 좌측 정렬 레이아웃에 맞춰 우측 하단으로 */
#video01 .hero-progress{
  position: absolute;
  right: clamp(24px, 7vw, 132px);
  bottom: 12%;
  z-index: 7;
  display: flex;
  gap: 10px;
  opacity: 0;
  animation: heroFadeUp .9s ease 1.35s forwards;
}
#video01 .hero-progress button{
  width: 34px;
  height: 3px;
  padding: 0;
  border: 0;
  border-radius: 2px;
  background: rgba(255,255,255,.28);
  cursor: pointer;
  overflow: hidden;
  position: relative;
  transition: background-color .3s ease;
}
#video01 .hero-progress button::after{
  content: "";
  position: absolute;
  inset: 0;
  transform: scaleX(0);
  transform-origin: left;
  background: #8ec43e;
}
#video01 .hero-progress button.is-active::after{
  animation: heroBarFill 6s linear forwards;
}
@keyframes heroBarFill{
  from{ transform: scaleX(0); }
  to  { transform: scaleX(1); }
}

/* 영상 위 가독성 오버레이 */
#video01 .hero-overlay{
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background:
    linear-gradient(to top,
      rgba(0,26,32,.78) 0%,
      rgba(0,26,32,.34) 38%,
      rgba(0,26,32,.10) 62%,
      rgba(0,26,32,.42) 100%),
    radial-gradient(120% 80% at 50% 100%,
      rgba(0,70,85,.42) 0%,
      rgba(0,70,85,0) 60%);
}

/* =========================================================
   좌측 정렬 에디토리얼 레이아웃
   카피와 CTA 가 같은 왼쪽 기준선에 정렬된다.
   ========================================================= */
#video01 .hero-caps,
#video01 .hero-inner{
  position: absolute;
  left: clamp(24px, 7vw, 132px);
  z-index: 7;
  color: #fff;
}

/* 슬라이드별 카피 — grid 로 겹쳐 쌓아 높이를 자동 확보 */
#video01 .hero-caps{
  bottom: 27%;
  width: min(720px, 78vw);
  display: grid;
}
#video01 .hero-cap{
  grid-area: 1 / 1;              /* 전부 같은 칸에 겹침 */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .7s ease, visibility .7s;
}
#video01 .hero-cap.is-active{
  opacity: 1;
  visibility: visible;
}

/* 내부 요소는 활성화될 때 순차로 올라온다 */
#video01 .hero-cap__eyebrow,
#video01 .hero-cap__title,
#video01 .hero-cap__sub{
  transform: translateY(22px);
  opacity: 0;
  transition: transform .85s cubic-bezier(.22,.61,.36,1),
              opacity .85s ease;
}
#video01 .hero-cap.is-active .hero-cap__eyebrow{ transform:none; opacity:1; transition-delay:.10s; }
#video01 .hero-cap.is-active .hero-cap__title  { transform:none; opacity:1; transition-delay:.24s; }
#video01 .hero-cap.is-active .hero-cap__sub    { transform:none; opacity:1; transition-delay:.40s; }

/* 영문 아이브로우 */
#video01 .hero-cap__eyebrow{
  margin: 0 0 16px;
  font-family: 'Pretendard', 'SUIT', sans-serif;
  font-size: clamp(12px, .95vw, 13px);
  font-weight: 600;
  letter-spacing: .4em;
  text-indent: .4em;
  color: #a6d75e;
  display: flex;
  align-items: center;
  gap: 14px;
}
#video01 .hero-cap__eyebrow::after{
  content: "";
  flex: 0 0 54px;
  height: 1px;
  background: linear-gradient(90deg, #8ec43e, transparent);
}

/* 타이틀 */
#video01 .hero-cap__title{
  margin: 0;
  font-family: 'Nanum Myeongjo', serif;
  font-weight: 400;
  font-size: clamp(32px, 5vw, 76px);
  line-height: 1.18;
  letter-spacing: .02em;
  text-shadow: 0 2px 28px rgba(0,0,0,.5);
}
#video01 .hero-cap__title span{
  display: block;
  font-weight: 700;
}
#video01 .hero-cap__title em{
  display: block;
  font-style: normal;
  color: rgba(255,255,255,.86);
}

/* 서브 카피 */
#video01 .hero-cap__sub{
  margin: 20px 0 0;
  font-family: 'Pretendard', 'SUIT', sans-serif;
  font-size: clamp(13px, 1.25vw, 17px);
  font-weight: 300;
  letter-spacing: .01em;
  line-height: 1.7;
  color: rgba(255,255,255,.88);
}

/* CTA — 슬라이드와 무관하게 고정 노출 */
#video01 .hero-inner{
  bottom: 12%;
}
#video01 .hero-cta{
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: flex-start;
  opacity: 0;
  animation: heroFadeUp .9s ease 1.1s forwards;
}
#video01 .hero-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-width: 178px;
  padding: 16px 32px;
  border-radius: 999px;
  font-family: 'Pretendard', 'SUIT', sans-serif;
  font-size: clamp(14px, 1.15vw, 16px);
  font-weight: 700;
  letter-spacing: .02em;
  text-decoration: none;
  transition: transform .25s ease, box-shadow .25s ease,
              background-color .25s ease, color .25s ease;
}
#video01 .hero-btn--primary{
  background: #8ec43e;
  color: #00323d;
  box-shadow: 0 10px 30px rgba(142,196,62,.34);
}
#video01 .hero-btn--primary:hover{
  background: #a6d75e;
  transform: translateY(-3px);
  box-shadow: 0 16px 38px rgba(142,196,62,.46);
}
#video01 .hero-btn--ghost{
  background: rgba(255,255,255,.07);
  color: #fff;
  border: 1px solid rgba(255,255,255,.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
#video01 .hero-btn--ghost:hover{
  background: #fff;
  color: #004655;
  transform: translateY(-3px);
}
#video01 .hero-btn .ico{
  width: 17px;
  height: auto;
  display: block;
}
#video01 .hero-btn--ghost:hover .ico{
  filter: brightness(0) saturate(100%) invert(18%) sepia(31%)
          saturate(2246%) hue-rotate(158deg) brightness(94%) contrast(101%);
}

/* 스크롤 유도 */
#video01 .hero-scroll{
  position: absolute;
  left: 50%;
  bottom: 30px;
  transform: translateX(-50%);
  z-index: 7;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  background: none;
  border: 0;
  padding: 6px;
  cursor: pointer;
  font-family: 'Pretendard', 'SUIT', sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .3em;
  text-indent: .3em;
  color: rgba(255,255,255,.72);
  opacity: 0;
  animation: heroFadeUp .9s ease 1.5s forwards;
}
#video01 .hero-scroll .bar{
  display: block;
  width: 1px;
  height: 42px;
  background: linear-gradient(to bottom, rgba(255,255,255,.7), transparent);
  animation: heroScrollBar 1.9s ease-in-out infinite;
}
#video01 .hero-scroll:hover{ color:#fff; }

@keyframes heroFadeUp{
  from{ opacity:0; transform: translateY(18px); }
  to  { opacity:1; transform: translateY(0); }
}
@keyframes heroScrollBar{
  0%,100%{ transform: scaleY(.35); transform-origin: top; opacity:.45; }
  50%    { transform: scaleY(1);   transform-origin: top; opacity:1; }
}

/* ---------- 태블릿 ---------- */
@media (max-width: 1200px){
  #video01 .hero-caps{ bottom: 26%; width: 84vw; }
  #video01 .hero-inner{ bottom: 12%; }
  #video01 .hero-btn{ min-width: 158px; padding: 14px 26px; }
}

/* ---------- 모바일 ---------- */
@media (max-width: 768px){
  #video01 .hero-caps,
  #video01 .hero-inner{
    left: 20px;
    right: 20px;
    width: auto;
  }
  #video01 .hero-caps{ bottom: 30%; }
  #video01 .hero-inner{ bottom: 11%; }

  #video01 .hero-cap__eyebrow{
    margin-bottom: 12px;
    letter-spacing: .3em;
    text-indent: .3em;
    gap: 10px;
  }
  #video01 .hero-cap__eyebrow::after{ flex-basis: 34px; }

  #video01 .hero-cap__title{
    font-size: clamp(26px, 8vw, 38px);
    line-height: 1.26;
  }
  #video01 .hero-cap__sub{
    margin-top: 14px;
    font-size: 13px;
    line-height: 1.62;
  }

  #video01 .hero-cta{ gap: 10px; }
  #video01 .hero-btn{
    flex: 1 1 0;
    min-width: 0;
    padding: 14px 12px;
    font-size: 14px;
  }
  #video01 .hero-scroll{ display: none; }
  /* 진행바는 CTA 와 겹치지 않게 위로 */
  #video01 .hero-progress{
    right: 20px;
    bottom: auto;
    top: calc(100% - 22%);
  }
}

/* ---------- 접근성: 모션 최소화 선호 ---------- */
@media (prefers-reduced-motion: reduce){
  #video01 .hero-cta,
  #video01 .hero-scroll,
  #video01 .hero-progress{
    opacity: 1;
    animation: none;
  }
  /* 스크롤 표시 막대의 무한 깜빡임 — 반복 모션이라 정지 */
  #video01 .hero-scroll .bar{ animation: none; }

  /* 2026-07-20 변경 — main2(slides-motion.css) 와 기준을 통일한다.
     그쪽은 이미 "느린 이동은 어지럼 유발 수준이 아니고 사이트 정체성상
     필수 요소"라는 이유로 모션 최소화에서도 재생하도록 결정돼 있었는데,
     히어로만 더 엄격한 기준으로 막혀 있어 일관성이 없었다.

     이 설정의 취지는 급격한 이동·회전·깜빡임 억제다. 여기 두 연출은
     그 범주가 아니므로 재생한다:
       · 카피 등장  translateY(22px) / 0.85s  — 이동폭 작음
       · 켄번스 확대            9s            — 매우 느림

     ※ 진짜 유발 요인인 '스크롤 하이재킹'(Lenis 부드러운 스크롤)은
        smooth-scroll.js 에서 계속 이 설정을 존중한다. 그건 풀지 말 것. */

  /* 진행바 채움은 남겨둔다(위치 이동 없음 · 전환 타이밍 안내 역할) */
}