/* IW Sub Visual - 정적 배너형 v5.4.0 */

/* ▼▼ PC 비주얼 높이 (이 한 줄만 바꾸면 전체 적용) ▼▼ */
/*  100vh=화면꽉참 / 62vh=아래 타이틀·탭 보임 / 55vh=더 보임  */
:root{ --iwc-h: 62vh; }
/* ▲▲ 모바일(768px↓)은 별도 330px 고정 ▲▲ */

/* ===== PC: 스크롤 효과 제거하고 정적 배너로 고정 (단, 풀스크린 고정 미사용 시에만) ===== */
@media (min-width:769px){
  /* 스크롤 공간(160vh)·sticky 제거 → 딱 비주얼 높이만 차지 */
  .iwc-spacer:not(.iwc-fixed){
    height:var(--iwc-h,62vh) !important;
    position:relative !important;
    z-index:0;
    overflow:hidden;
  }
  .iwc-spacer:not(.iwc-fixed) .iwc-stage{
    position:relative !important;
    top:auto !important;
    height:var(--iwc-h,62vh) !important;
    transform:none !important;
    will-change:auto;
  }
  /* 이미지: 항상 풀폭 cover, 축소(settled) 효과 무시 */
  .iwc-spacer:not(.iwc-fixed) .iwc-img,
  .iwc-spacer:not(.iwc-fixed) .iwc-stage.iwc-settled .iwc-img{
    position:absolute !important;
    left:0 !important; top:0 !important;
    width:100% !important; height:var(--iwc-h,62vh) !important;
    border-radius:0 !important;
    transition:none !important;
    transform:none !important;
  }
  /* 어두운 오버레이 유지 (글자 가독성) */
  .iwc-spacer:not(.iwc-fixed) .iwc-shade,
  .iwc-spacer:not(.iwc-fixed) .iwc-stage.iwc-settled .iwc-shade{
    display:block !important;
    opacity:var(--iwc-ov,.3) !important;
  }
  /* 텍스트: 하단 고정, settled 위치이동 무시. 글자 항상 흰색 */
  .iwc-spacer:not(.iwc-fixed) .iwc-textrow,
  .iwc-spacer:not(.iwc-fixed) .iwc-stage.iwc-settled .iwc-textrow{
    position:absolute !important;
    bottom:60px !important; top:auto !important;
    transition:none !important;
  }
  .iwc-spacer:not(.iwc-fixed) .iwc-eng,
  .iwc-spacer:not(.iwc-fixed) .iwc-stage.iwc-settled .iwc-eng{ color:#fff !important; }
  .iwc-spacer:not(.iwc-fixed) .iwc-title,
  .iwc-spacer:not(.iwc-fixed) .iwc-stage.iwc-settled .iwc-title{ color:#fff !important; }
  .iwc-spacer:not(.iwc-fixed) .iwc-sub,
  .iwc-spacer:not(.iwc-fixed) .iwc-stage.iwc-settled .iwc-sub{ color:#fff !important; }
  /* 스크롤 인디케이터(마우스) 숨김 */
  .iwc-spacer:not(.iwc-fixed) .iwc-scroll{ display:none !important; }
}


.iwc-spacer{position:relative;height:160vh;}
.iwc-stage{position:sticky;top:0;height:var(--iwc-h,100vh);overflow:hidden;background:#fff;}

/* 배경 이미지: 처음 풀화면 → 스크롤 시 아래로 분리·축소·라운드 */
.iwc-img{
  position:absolute;left:0;top:0;width:100%;height:var(--iwc-h,100vh);
  background-size:cover;background-position:center;background-repeat:no-repeat;
  overflow:hidden;border-radius:0;
  will-change:width,height,top,left,border-radius;
  transition:width .6s cubic-bezier(.4,0,.2,1),height .6s cubic-bezier(.4,0,.2,1),top .6s cubic-bezier(.4,0,.2,1),left .6s cubic-bezier(.4,0,.2,1),border-radius .6s cubic-bezier(.4,0,.2,1);
  z-index:1;
}
.iwc-stage.iwc-settled .iwc-img{
  width:92%;height:64vh;top:calc(24vh + 50px);left:4%;border-radius:var(--iwc-radius,30px);
}
.iwc-ph{background:linear-gradient(120deg,#3a3a40,#8a8a92);}
.iwc-shade{position:absolute;inset:0;background:#000;opacity:var(--iwc-ov,.3);z-index:2;transition:opacity .4s;pointer-events:none;}
.iwc-stage.iwc-settled .iwc-shade{opacity:0;}

/* 텍스트: 좌(영문+제목 세로 스택) / 우(서브) */
.iwc-textrow{
  position:absolute;left:0;right:0;
  bottom:100px;
  display:flex;align-items:flex-end;justify-content:space-between;
  padding:0 4%;gap:24px;z-index:3;pointer-events:none;
  will-change:bottom;
  transition:bottom .6s cubic-bezier(.4,0,.2,1);
}
.iwc-stage.iwc-settled .iwc-textrow{bottom:78vh;}
.iwc-left{display:flex;flex-direction:column;align-items:flex-start;gap:4px;}
.iwc-right{flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-end;gap:16px;}
.iwc-eng{letter-spacing:-.5px;line-height:1.1;}
.iwc-title{letter-spacing:-1.5px;line-height:1.15;}
.iwc-sub{max-width:300px;text-align:right;font-weight:600;line-height:1.6;}

/* 우측 마우스형 스크롤 인디케이터 */
.iwc-scroll{display:flex;flex-direction:column;align-items:center;gap:7px;pointer-events:none;}
.iwc-scroll-label{font-size:11px;letter-spacing:2px;color:rgba(255,255,255,.85);transition:color .4s ease;}
.iwc-mouse{width:26px;height:42px;border:2px solid rgba(255,255,255,.85);border-radius:14px;position:relative;transition:border-color .4s ease;}
.iwc-mouse::after{content:"";position:absolute;left:50%;top:8px;width:3px;height:8px;margin-left:-1.5px;background:#fff;border-radius:2px;animation:iwc-mouse-dot 1.5s infinite;transition:background .4s ease;}
@keyframes iwc-mouse-dot{0%{transform:translateY(0);opacity:1}50%{transform:translateY(10px);opacity:.4}100%{transform:translateY(0);opacity:1}}
/* 분리(settled)되면 마우스 인디케이터 숨김 */
.iwc-stage.iwc-settled .iwc-scroll{opacity:0;transition:opacity .4s ease;}

.iwc-eng,.iwc-title,.iwc-sub{color:#fff;transition:color .4s ease;}
.iwc-stage.iwc-settled .iwc-eng{color:#bdbdbd;text-shadow:none;}
.iwc-stage.iwc-settled .iwc-title{color:#1a1a1a;text-shadow:none;}
.iwc-stage.iwc-settled .iwc-sub{color:#999;text-shadow:none;}

@media (prefers-reduced-motion: reduce){
  .iwc-spacer{height:100vh;}
  .iwc-mouse::after{animation:none;}
}

/* ===== 풀스크린 고정 + 덮기 효과 ===== */
/* 비주얼은 화면에 고정(z-index 0), 아래 흰배경 콘텐츠가 그 위로 덮임. 헤더는 z-index가 높아 안 덮임 */
.iwc-spacer.iwc-fixed{height:100vh;position:relative;z-index:0;}
.iwc-spacer.iwc-fixed .iwc-stage{
  position:fixed;left:0;top:0;width:100%;height:100vh;
  overflow:hidden;z-index:0;
  /* GPU 합성 레이어로 올려 스크롤 시 리페인트 방지 (부드럽게) */
  transform:translateZ(0);
  will-change:transform;
  backface-visibility:hidden;
}
.iwc-spacer.iwc-fixed .iwc-img{
  position:absolute;left:0;top:0;width:100%;height:100vh;
  border-radius:0;transition:none;
  transform:translateZ(0);
  backface-visibility:hidden;
}
.iwc-spacer.iwc-fixed .iwc-shade{display:block;opacity:var(--iwc-ov,.3);}
.iwc-spacer.iwc-fixed .iwc-textrow{
  position:absolute;left:0;right:0;bottom:100px;
  transition:none;padding:0 4%;align-items:flex-end;
}
.iwc-spacer.iwc-fixed .iwc-right{justify-content:flex-end;}
.iwc-spacer.iwc-fixed .iwc-scroll{display:none;}
.iwc-spacer.iwc-fixed .iwc-eng{color:#fff;}
.iwc-spacer.iwc-fixed .iwc-title{color:#fff;}
.iwc-spacer.iwc-fixed .iwc-sub{color:#fff;}

/* ===== 모바일: PC 효과 전부 제거하고 정적 배너로 ===== */
@media (max-width:768px){
  /* 효과형·고정형 공통: sticky/fixed 해제, 높이 250px 고정 */
  .iwc-spacer,
  .iwc-spacer.iwc-fixed{
    height:330px !important;
    position:relative !important;
    z-index:0;
    overflow:hidden;
  }
  .iwc-stage,
  .iwc-spacer.iwc-fixed .iwc-stage{
    position:relative !important;
    top:auto !important;
    height:330px !important;
    transform:none !important;
    will-change:auto;
    z-index:1 !important;
  }
  /* 이미지: 항상 풀폭·cover로 꽉 차게, 효과(settled) 무시 */
  .iwc-img,
  .iwc-stage.iwc-settled .iwc-img,
  .iwc-spacer.iwc-fixed .iwc-img{
    position:absolute !important;
    left:0 !important;top:0 !important;
    width:100% !important;height:330px !important;
    background-size:cover !important;
    background-repeat:no-repeat !important;
    border-radius:0 !important;transition:none !important;
    transform:none !important;
  }
  /* 어둡게(오버레이) 유지 — 글자 가독성 */
  .iwc-shade,
  .iwc-stage.iwc-settled .iwc-shade,
  .iwc-spacer.iwc-fixed .iwc-shade{
    display:block !important;opacity:var(--iwc-ov,.35) !important;
  }
  /* 텍스트: 하단 고정 위치로 통일, settled 무시 */
  .iwc-textrow,
  .iwc-stage.iwc-settled .iwc-textrow,
  .iwc-spacer.iwc-fixed .iwc-textrow{
    position:absolute !important;
    left:0;right:0;bottom:22px !important;top:auto !important;
    flex-direction:column;align-items:flex-start;
    justify-content:flex-end;gap:6px;padding:0 5%;
    transition:none !important;
  }
  .iwc-right{align-items:flex-start !important;}
  /* 글자색: 항상 흰색 + 모바일 적정 크기 */
  .iwc-eng,.iwc-stage.iwc-settled .iwc-eng,.iwc-spacer.iwc-fixed .iwc-eng{
    color:#fff !important;font-size:12px !important;letter-spacing:.5px;
  }
  .iwc-title,.iwc-stage.iwc-settled .iwc-title,.iwc-spacer.iwc-fixed .iwc-title{
    color:#fff !important;font-size:22px !important;line-height:1.25 !important;
  }
  .iwc-sub,.iwc-stage.iwc-settled .iwc-sub,.iwc-spacer.iwc-fixed .iwc-sub{
    color:#fff !important;text-align:left;max-width:100%;
    white-space:normal;word-break:keep-all;font-size:13px !important;line-height:1.5;
  }
  /* 스크롤 인디케이터 숨김 */
  .iwc-scroll{display:none !important;}
}

/* =========================================================
   문구 위치 정렬 (data-align) — 서브 비주얼
   textrow를 전체 영역에 깔고 flex로 9방향 배치.
   내부(left/right)를 세로 한 컬럼으로 재배열: 영문→제목→부제
   PC(769px↑)에서만 적용. 모바일은 기존 하단 고정 유지.
   ========================================================= */
@media (min-width:769px){
  .iwc-spacer[data-align] .iwc-textrow{
    top:0 !important;bottom:auto !important;left:0;right:0;height:100%;
    padding:6% 5% !important;gap:0;
    flex-direction:column;
    box-sizing:border-box;
  }
  /* fixed 모드에서도 정렬 적용되도록 */
  .iwc-spacer.iwc-fixed[data-align] .iwc-textrow{
    top:0;bottom:auto;height:100%;padding:6% 5%;flex-direction:column;
  }
  /* 내부 left/right를 한 흐름으로: 가로폭 전체 쓰고 정렬은 textrow가 담당 */
  .iwc-spacer[data-align] .iwc-left,
  .iwc-spacer[data-align] .iwc-right{
    width:100%;align-items:inherit;
  }
  .iwc-spacer[data-align] .iwc-right{justify-content:flex-start;margin-top:12px;}
  .iwc-spacer[data-align] .iwc-scroll{display:none;}
  /* 부제 고정 max-width/우측정렬 해제 → textrow 정렬을 따름 */
  .iwc-spacer[data-align] .iwc-sub{
    max-width:640px !important;text-align:inherit !important;
    white-space:normal;word-break:keep-all;
  }

  /* 세로 위치 */
  .iwc-spacer[data-align^="t"] .iwc-textrow{justify-content:flex-start;}
  .iwc-spacer[data-align^="c"] .iwc-textrow{justify-content:center;}
  .iwc-spacer[data-align^="b"] .iwc-textrow{justify-content:flex-end;}
  /* 가로 정렬 */
  .iwc-spacer[data-align$="l"] .iwc-textrow{align-items:flex-start;text-align:left;}
  .iwc-spacer[data-align$="c"] .iwc-textrow{align-items:center;text-align:center;}
  .iwc-spacer[data-align$="r"] .iwc-textrow{align-items:flex-end;text-align:right;}
  .iwc-spacer[data-align$="l"] .iwc-left,.iwc-spacer[data-align$="l"] .iwc-right{align-items:flex-start;}
  .iwc-spacer[data-align$="c"] .iwc-left,.iwc-spacer[data-align$="c"] .iwc-right{align-items:center;}
  .iwc-spacer[data-align$="r"] .iwc-left,.iwc-spacer[data-align$="r"] .iwc-right{align-items:flex-end;}
  /* 중앙/우측 정렬 시 부제 폭 중앙정렬 */
  .iwc-spacer[data-align$="c"] .iwc-sub{margin-left:auto;margin-right:auto;}
  .iwc-spacer[data-align$="r"] .iwc-sub{margin-left:auto;}
}