/* IW Main Hero - front styles v1.8.2 */

.iwh-spacer{height:105vh;position:relative;}
.iwh-stage{
  position:sticky;top:0;height:100vh;overflow:hidden;
  background:#fff;transition:background .5s ease;
}
.iwh-stage.iwh-settled{
  background:linear-gradient(180deg,#fafafa 0%,#fff 30%,#fff 70%,#fafafa 100%);
}

/* ----- 카드 공통 ----- */
.iwh-img{
  position:absolute;left:0;top:0;width:100%;height:100%;
  border-radius:0;overflow:hidden;
  will-change:left,top,width,height,border-radius,opacity;
}
/* 슬라이더 페이드: 1번만 초기 활성 */
.iwh-img{opacity:0;transition:opacity 1s ease;}
.iwh-img.iwh-active{opacity:1;}
/* 흩어지는 동안엔 GSAP이 opacity 제어 (CSS 페이드 차단) */
.iwh-stage.iwh-scatter .iwh-img{transition:none !important;}
/* 전환(흩어짐) 중: 풀스크린→축소 이동하는 활성 카드를 항상 맨 위로 */
.iwh-img{z-index:1;}
.iwh-stage.iwh-scatter .iwh-img.iwh-active{z-index:10;}
/* 안착 완료 후엔 모든 카드 동일 레벨(hover 등 정상 동작) */
.iwh-stage.iwh-settled .iwh-img{z-index:1;}
/* 화살표는 항상 클릭 가능 */
.iwh-nav{z-index:30;}
.iwh-nav button{pointer-events:auto;}

/* ----- 배경 이미지 레이어 ----- */
.iwh-bg{
  position:absolute;inset:0;
  background-size:cover;
  background-position:center center;
  background-repeat:no-repeat;
}
/* 패럴럭스 줌용 */
.iwh-bg,.iwh-video,.iwh-yt{
  transform-origin:center center;
  will-change:transform;
}
/* 플레이스홀더 그라데이션 — 이미지 등록시 background-image가 위에 덮이므로
   그라데이션이 비쳐나오지 않도록 이미지 있을 때는 ph 클래스 효과 무력화 */
.iwh-bg.iwh-ph1{background-color:#2b2350;}
.iwh-bg.iwh-ph2{background-color:#0e1a2e;}
.iwh-bg.iwh-ph3{background-color:#1a2b1e;}
.iwh-bg.iwh-ph4{background-color:#3d2c20;}
/* 이미지 미등록시에만 그라데이션 보이기 */
.iwh-bg.iwh-ph1:not([style]){background:linear-gradient(160deg,#2b2350 0%,#4a3a7a 45%,#8a6f9e 75%,#caa28c 100%);}
.iwh-bg.iwh-ph2:not([style]){background:linear-gradient(200deg,#0e1a2e 0%,#1f3a5c 50%,#5b7ea3 100%);}
.iwh-bg.iwh-ph3:not([style]){background:linear-gradient(180deg,#1a2b1e 0%,#34543b 55%,#7fa06a 100%);}
.iwh-bg.iwh-ph4:not([style]){background:linear-gradient(190deg,#3d2c20 0%,#7a5b3e 55%,#c9a87c 100%);}
/* 등록 안내 라벨 */
.iwh-bg[data-label]::after{
  content:attr(data-label);
  color:rgba(255,255,255,.45);font-size:14px;font-weight:600;letter-spacing:.5px;
  border:1px dashed rgba(255,255,255,.45);padding:8px 16px;border-radius:8px;
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
}

/* ----- 영상 슬롯 ----- */
.iwh-video{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;
}
.iwh-yt{
  position:absolute;inset:0;overflow:hidden;
  pointer-events:none;
}
/* 기본: 뷰포트 기준 커버 (JS가 카드 실측으로 재계산) */
.iwh-yt iframe{
  position:absolute;top:50%;left:50%;
  width:100vw;height:56.25vw;
  min-height:100vh;min-width:177.78vh;
  transform:translate(-50%,-50%);
  pointer-events:none;border:0;
}

/* ----- 오버레이/그라데이션 ----- */
.iwh-shade{
  position:absolute;inset:0;
  transition:opacity .4s;
}
/* 카드 하단 그라데이션 (정렬 완료시) */
.iwh-img::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:60%;z-index:3;
  background:linear-gradient(to top,rgba(0,0,0,.65),rgba(0,0,0,.04) 70%,transparent);
  opacity:0;transition:opacity .45s ease;pointer-events:none;
}
.iwh-stage.iwh-settled .iwh-img::after{opacity:1;}
/* scatter 상태에서 오버레이 숨김 */
.iwh-stage.iwh-scatter .iwh-shade{opacity:0;}

/* ----- 카드 호버 (정렬 완료 상태에서만) ----- */
.iwh-stage.iwh-settled .iwh-img{
  transition:transform .35s ease, box-shadow .35s ease !important;
  cursor:default;
}
.iwh-stage.iwh-settled .iwh-img[data-link]{cursor:pointer;}
.iwh-stage.iwh-settled .iwh-img:hover{
  transform:translateY(-8px) !important;
  box-shadow:0 22px 44px rgba(0,0,0,.2);
  z-index:6;
}

/* ----- 카드 번호 ----- */
.iwh-num{
  position:absolute;top:18px;left:24px;z-index:4;
  color:rgba(255,255,255,.6);font-size:14px;font-weight:700;letter-spacing:1px;
  opacity:0;transform:translateY(8px);
  transition:opacity .4s ease .1s, transform .4s ease .1s;
  pointer-events:none;
}
/* ----- 카드 제목 + 바로가기 ----- */
.iwh-label{
  position:absolute;left:24px;right:24px;bottom:18px;z-index:4;
  display:flex;flex-direction:column;align-items:flex-start;gap:7px;
  color:#fff !important;text-decoration:none !important;
  opacity:0;transform:translateY(12px);
  transition:opacity .45s ease .18s, transform .45s ease .18s;
  pointer-events:none;
}
.iwh-label-t{font-size:clamp(18px,1.5vw,25px);font-weight:800;letter-spacing:-.3px;}
.iwh-label-s{
  display:inline-flex;align-items:center;gap:6px;
  color:rgba(255,255,255,.82);font-size:14px;font-weight:500;
}
.iwh-label-s::after{content:'\2192';font-size:13px;transition:transform .25s;}
.iwh-stage.iwh-settled .iwh-img:hover .iwh-label-s::after{transform:translateX(4px);}
.iwh-stage.iwh-settled .iwh-num,
.iwh-stage.iwh-settled .iwh-label{opacity:1;transform:none;}
.iwh-stage.iwh-settled .iwh-label{pointer-events:auto;}

/* ----- 섹션 타이틀 (카드 위) ----- */
.iwh-sec-head{
  position:absolute;left:0;right:0;z-index:5;
  text-align:center;padding:0 24px;
  opacity:0;transform:translateY(16px);
  transition:opacity .5s ease .06s, transform .5s ease .06s;
  pointer-events:none;
}
.iwh-eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-size:14px;font-weight:700;letter-spacing:3px;color:#9c7c3c;
  margin-bottom:16px;text-transform:uppercase;
}
.iwh-eyebrow::before,.iwh-eyebrow::after{content:'';width:28px;height:1px;background:#d8c9a8;}
.iwh-sec-title{font-size:clamp(28px,3vw,44px);font-weight:800;letter-spacing:-1px;color:#111;line-height:1.3;}
.iwh-sec-desc{margin-top:12px;font-size:16px;color:#888;font-weight:500;}
.iwh-stage.iwh-settled .iwh-sec-head{opacity:1;transform:none;}

/* ----- 스크롤 안내 (카드 아래) ----- */
.iwh-sec-foot{
  position:absolute;left:0;right:0;z-index:5;
  display:flex;flex-direction:column;align-items:center;gap:10px;
  color:#bbb;font-size:13px;font-weight:600;letter-spacing:2px;
  opacity:0;transition:opacity .5s ease .3s;
  pointer-events:none;
}
.iwh-mouse{width:24px;height:38px;border:2px solid #ccc;border-radius:14px;position:relative;}
.iwh-mouse::after{
  content:'';position:absolute;left:50%;top:7px;width:4px;height:8px;
  margin-left:-2px;border-radius:4px;background:#ccc;
  animation:iwhWheel 1.6s ease infinite;
}
@keyframes iwhWheel{
  0%{transform:translateY(0);opacity:1;}
  70%{transform:translateY(10px);opacity:0;}
  100%{transform:translateY(0);opacity:0;}
}
.iwh-stage.iwh-settled .iwh-sec-foot{opacity:1;}

/* ----- 히어로 UI ----- */
.iwh-ui{position:absolute;inset:0;z-index:20;pointer-events:none;}
.iwh-stack{
  position:absolute;left:4.5%;right:4.5%;bottom:9%;
  display:flex;flex-direction:column;align-items:flex-start;gap:20px;
}
.iwh-copy{
  color:#fff;font-size:clamp(40px,8vw,150px);
  font-weight:600;letter-spacing:-2px;line-height:1.05;
}
.iwh-desc{
  color:#fff;font-size:clamp(15px,1.4vw,20px);
  line-height:1.6;opacity:.95;max-width:720px;
  text-shadow:0 1px 8px rgba(0,0,0,.25);
}
.iwh-btns{display:flex;gap:14px;pointer-events:auto;flex-wrap:wrap;}
.iwh-btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:clamp(8px,0.7vw,11px) clamp(18px,1.8vw,26px);border-radius:999px;
  font-size:clamp(13px,1vw,15px);font-weight:700;color:#fff !important;text-decoration:none !important;
}
.iwh-btn-purple{background:#2e0f87;}
.iwh-btn-gold{background:#9c7c3c;}
.iwh-arr{font-size:13px;}
.iwh-nav{position:absolute;right:4%;bottom:6%;display:flex;gap:10px;pointer-events:auto;}
.iwh-nav button{
  width:clamp(42px,3.4vw,50px);height:clamp(42px,3.4vw,50px);border-radius:50%;cursor:pointer;
  border:1px solid rgba(255,255,255,.5);
  background:rgba(255,255,255,.08);color:#fff;font-size:clamp(15px,1.3vw,18px);
  display:flex;align-items:center;justify-content:center;
  transition:background .25s, border-color .25s, transform .2s;
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
}
.iwh-nav button:hover{background:#fff;color:#1a1f2b;border-color:#fff;transform:translateY(-2px);}
.iwh-nav button:active{transform:translateY(0);}

/* ----- 반응형 ----- */
@media (max-width:768px){
  .iwh-spacer{height:auto;}
  .iwh-stage{position:relative;top:auto;height:72vh;}
  /* 유튜브: 세로 화면 커버 (stage 72vh 기준, 16:9 → 너비 128vh) */
  .iwh-yt iframe{
    width:128vh !important;height:72vh !important;
    min-width:128vh !important;min-height:72vh !important;
  }
  .iwh-stack{gap:12px;bottom:8%;}
  .iwh-copy{font-size:8.5vw !important;letter-spacing:-1px;white-space:normal;line-height:1.12;}
  .iwh-desc{font-size:13px !important;max-width:100%;margin-top:10px;}
  .iwh-btns{flex-direction:row;flex-wrap:wrap;align-items:flex-start;gap:8px;}
  .iwh-btn{padding:8px 18px;font-size:13px;}
  .iwh-num{top:10px;left:14px;font-size:12px;}
  .iwh-label{left:14px;right:14px;bottom:12px;gap:4px;}
  .iwh-label-t{font-size:16px;}
  .iwh-label-s{font-size:12px;}
  .iwh-eyebrow{font-size:12px;letter-spacing:2px;margin-bottom:10px;}
  .iwh-sec-title{font-size:22px;}
  .iwh-sec-desc{font-size:13px;margin-top:8px;}
  .iwh-mouse{width:20px;height:32px;}
}
@media (prefers-reduced-motion: reduce){
  .iwh-spacer{height:auto;}
  .iwh-stage{position:relative;top:auto;height:72vh;}
  .iwh-mouse::after{animation:none;}
}

/* =========================================================
   문구 위치 정렬 (data-align) — 타이틀+설명+버튼 덩어리(.iwh-stack)
   세로: top/middle/bottom  가로: left/center/right
   ========================================================= */
.iwh-stage[data-align] .iwh-stack{top:auto;bottom:auto;}
/* 세로 위치 */
.iwh-stage[data-align^="t"] .iwh-stack{top:12%;}
.iwh-stage[data-align^="c"] .iwh-stack{top:50%;transform:translateY(-50%);}
.iwh-stage[data-align^="b"] .iwh-stack{bottom:9%;}
/* 가로 정렬 (left / center / right) */
.iwh-stage[data-align$="l"] .iwh-stack{align-items:flex-start;text-align:left;}
.iwh-stage[data-align$="c"] .iwh-stack{align-items:center;text-align:center;}
.iwh-stage[data-align$="r"] .iwh-stack{align-items:flex-end;text-align:right;}
/* 가운데/오른쪽 정렬 시 버튼도 따라 정렬 */
.iwh-stage[data-align$="c"] .iwh-btns{justify-content:center;}
.iwh-stage[data-align$="r"] .iwh-btns{justify-content:flex-end;}
/* 정중앙(cc)은 설명 최대폭 중앙 제한 */
.iwh-stage[data-align="cc"] .iwh-desc,
.iwh-stage[data-align="tc"] .iwh-desc,
.iwh-stage[data-align="bc"] .iwh-desc{margin-left:auto;margin-right:auto;}

/* =========================================================
   등장 효과 (data-effect) — scroll 은 기본(JS/기존 그대로)
   fade / slide / zoom / split 은 스크롤 스택 대신 자동 슬라이더
   공통: spacer 높이 축소(스티키 스크롤 구간 제거)
   ========================================================= */
.iwh-stage[data-effect="fade"],
.iwh-stage[data-effect="slide"],
.iwh-stage[data-effect="zoom"],
.iwh-stage[data-effect="split"]{position:relative;top:auto;height:100vh;}
.iwh-spacer:has(.iwh-stage[data-effect="fade"]),
.iwh-spacer:has(.iwh-stage[data-effect="slide"]),
.iwh-spacer:has(.iwh-stage[data-effect="zoom"]),
.iwh-spacer:has(.iwh-stage[data-effect="split"]){height:auto;}

/* 비-스크롤 모드 공통: 슬라이드는 겹쳐 쌓고, 활성만 표시 */
.iwh-stage[data-effect]:not([data-effect="scroll"]) .iwh-img{
  position:absolute;inset:0;width:100%;height:100%;
  transform:none;border-radius:0;margin:0;
}
.iwh-stage[data-effect]:not([data-effect="scroll"]) .iwh-num,
.iwh-stage[data-effect]:not([data-effect="scroll"]) .iwh-label,
.iwh-stage[data-effect]:not([data-effect="scroll"]) .iwh-sec-head,
.iwh-stage[data-effect]:not([data-effect="scroll"]) .iwh-sec-foot{display:none;}

/* --- FADE --- */
.iwh-stage[data-effect="fade"] .iwh-img{opacity:0;transition:opacity .9s ease;z-index:1;}
.iwh-stage[data-effect="fade"] .iwh-img.iwh-on{opacity:1;z-index:2;}

/* --- SLIDE (가로) --- */
.iwh-stage[data-effect="slide"]{overflow:hidden;}
.iwh-stage[data-effect="slide"]:not([data-x]) .iwh-img{opacity:1;transform:translateX(100%);transition:transform .7s cubic-bezier(.7,0,.2,1);z-index:1;}
.iwh-stage[data-effect="slide"]:not([data-x]) .iwh-img.iwh-on{transform:translateX(0);z-index:2;}
.iwh-stage[data-effect="slide"]:not([data-x]) .iwh-img.iwh-prev{transform:translateX(-100%);z-index:1;}

/* --- ZOOM / 켄번스 --- */
.iwh-stage[data-effect="zoom"] .iwh-img{opacity:0;transition:opacity 1s ease;z-index:1;}
.iwh-stage[data-effect="zoom"] .iwh-img.iwh-on{opacity:1;z-index:2;}
.iwh-stage[data-effect="zoom"] .iwh-img .iwh-bg{transform:scale(1);transition:transform 7s linear;}
.iwh-stage[data-effect="zoom"] .iwh-img.iwh-on .iwh-bg{transform:scale(1.12);}

/* --- SPLIT (세로 커튼) --- */
.iwh-stage[data-effect="split"] .iwh-img{opacity:1;clip-path:inset(0 0 100% 0);transition:clip-path .8s cubic-bezier(.7,0,.2,1);z-index:1;}
.iwh-stage[data-effect="split"] .iwh-img.iwh-on{clip-path:inset(0 0 0 0);z-index:2;}

/* =========================================================
   스크롤다운 인디케이터 (세로 SCROLL + 화살표 흐름)
   ========================================================= */
.iwh-scroll{
  position:absolute;right:4%;top:50%;transform:translateY(-50%);z-index:30;
  display:flex;flex-direction:column;align-items:center;gap:12px;
  pointer-events:none;
}
.iwh-scroll-text{
  writing-mode:vertical-rl;text-orientation:upright;
  font-size:12px;font-weight:700;letter-spacing:3px;
  color:rgba(255,255,255,.85);
  font-family:'Pretendard',sans-serif;
}
.iwh-scroll-arrow{
  font-size:15px;line-height:1;color:rgba(255,255,255,.9);
  animation:iwhScrollDown 1.7s ease-in-out infinite;
}
@keyframes iwhScrollDown{
  0%   {transform:translateY(-3px);opacity:0;}
  35%  {opacity:1;}
  70%  {opacity:1;}
  100% {transform:translateY(7px);opacity:0;}
}
@media (max-width:1024px){
  .iwh-scroll{display:none;}
}

/* =========================================================
   프로그레스바형 슬라이드 인디케이터 (하단 가로선 + 번호)
   ========================================================= */
.iwh-progress{
  position:absolute;right:5.5%;bottom:10%;z-index:30;
  display:flex;align-items:center;gap:16px;pointer-events:auto;
  justify-content:flex-end;
}
/* 다음 슬라이드 썸네일 미리보기 */
.iwh-next{
  position:absolute;right:5.5%;bottom:15%;z-index:30;
  display:flex;flex-direction:column;align-items:flex-end;gap:7px;
  pointer-events:none;
}
.iwh-next-label{
  font-family:'Pretendard',sans-serif;font-size:10px;font-weight:700;
  letter-spacing:2px;color:rgba(255,255,255,.7);
}
.iwh-next-thumb{
  width:112px;height:64px;border-radius:8px;overflow:hidden;
  background-size:cover;background-position:center;
  border:1px solid rgba(255,255,255,.35);
  box-shadow:0 8px 24px rgba(0,0,0,.3);
  transition:background-image .4s ease, opacity .4s ease;
}
@media (max-width:1024px){
  .iwh-next{display:none;}
}
/* 슬라이드 번호 01 / 03 */
.iwh-prog-num{
  display:flex;align-items:baseline;gap:3px;
  font-family:'Pretendard',sans-serif;color:#fff;
  letter-spacing:1px;font-variant-numeric:tabular-nums;
}
.iwh-prog-num b{font-size:17px;font-weight:800;}
.iwh-prog-num i{font-size:13px;font-style:normal;opacity:.5;margin:0 1px;}
.iwh-prog-num span{font-size:13px;font-weight:500;opacity:.6;}
/* 바 묶음 */
.iwh-prog-bars{display:flex;gap:8px;align-items:center;width:min(240px, 26vw);}
.iwh-prog-item{
  flex:1;height:3px;border-radius:2px;padding:0;border:0;cursor:pointer;
  background:rgba(255,255,255,.28);position:relative;overflow:hidden;
  -webkit-appearance:none;appearance:none;
  transition:height .2s;
}
.iwh-prog-item:hover{height:5px;}
.iwh-prog-fill{
  position:absolute;left:0;top:0;height:100%;width:0;
  background:#fff;border-radius:2px;
}
.iwh-prog-item.done .iwh-prog-fill{width:100%;transition:none;}
.iwh-prog-item.active .iwh-prog-fill{
  width:100%;
  transition:width var(--iwh-dur, 6s) linear;
}
@media (max-width:1024px){
  .iwh-progress{right:5%;bottom:8%;gap:12px;}
  .iwh-prog-bars{width:130px;}
  .iwh-prog-num b{font-size:15px;}
}