/* IW Portfolio Hero - front styles v1.0.0 */

.iwp{
  position:relative;
  width:100%;
  height:100vh;
  min-height:560px;
  overflow:hidden;
  background:#fff;
  --iwp-shade:.40;
  --iwp-blue:#1d62c4;
  --iwp-ink:#0f1f38;
}
body.admin-bar .iwp{height:calc(100vh - 32px);}
@media(max-width:782px){body.admin-bar .iwp{height:calc(100vh - 46px);}}

/* ---- 좌상단 공통 라벨 ---- */
.iwp-global-eye{
  position:absolute;top:34px;left:48px;z-index:20;pointer-events:none;
}
.iwp-global-eye span{
  font-size:13px;font-weight:600;letter-spacing:3px;color:#fff;
  text-shadow:0 1px 10px rgba(0,0,0,.3);
}

/* ---- 그리드 ---- */
.iwp-grid{
  display:grid;
  grid-template-columns:repeat(var(--iwp-cols,3),1fr);
  width:100%;height:100%;
}

/* ---- 패널 ---- */
.iwp-panel{
  position:relative;display:block;height:100%;overflow:hidden;
  text-decoration:none;color:#fff;
  border-right:1px solid rgba(255,255,255,.14);
}
.iwp-panel:last-child{border-right:none;}

.iwp-bg{
  position:absolute;inset:0;
  background-size:cover;background-position:center center;background-repeat:no-repeat;
  transform:scale(1.04);
  transition:transform 1.1s cubic-bezier(.16,1,.3,1);
}
/* 이미지 미등록 placeholder */
.iwp-ph1 .iwp-bg{background-color:#1b3a64;}
.iwp-ph2 .iwp-bg{background-color:#16294a;}
.iwp-ph3 .iwp-bg{background-color:#21456f;}
.iwp-ph4 .iwp-bg{background-color:#1a3357;}
.iwp-ph5 .iwp-bg{background-color:#244a78;}
.iwp-bg[data-empty]::after{
  content:attr(data-empty);
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:78%;text-align:center;
  color:rgba(255,255,255,.5);font-size:13px;font-weight:500;line-height:1.6;
  border:1px dashed rgba(255,255,255,.4);padding:14px;border-radius:8px;
}

/* 하단 그라데이션 */
.iwp-shade{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(
    180deg,
    rgba(8,18,36,calc(var(--iwp-shade) * .18)) 0%,
    rgba(8,18,36,0) 28%,
    rgba(8,18,36,calc(var(--iwp-shade) * .55)) 64%,
    rgba(8,18,36,var(--iwp-shade)) 100%
  );
  transition:background .4s;
}

/* 번호 */
.iwp-num{
  position:absolute;top:30px;left:32px;z-index:4;
  font-size:14px;font-weight:600;letter-spacing:2px;
  color:rgba(255,255,255,.78);
}

/* 캡션 */
.iwp-cap{
  position:absolute;left:32px;right:32px;bottom:40px;z-index:4;
  display:flex;flex-direction:column;align-items:flex-start;gap:9px;
}
.iwp-eye{
  font-size:12px;font-weight:600;letter-spacing:2.5px;
  color:#9ec5ff;
}
.iwp-title{
  font-size:clamp(20px,1.8vw,28px);font-weight:600;line-height:1.32;
  color:#fff;word-break:keep-all;letter-spacing:-.5px;
  text-shadow:0 2px 18px rgba(0,0,0,.28);
}
.iwp-go{
  display:inline-flex;align-items:center;gap:7px;
  margin-top:4px;
  font-size:13.5px;font-weight:500;color:#fff;
  opacity:0;transform:translateY(8px);
  transition:opacity .35s ease, transform .35s ease;
}
.iwp-arr{font-style:normal;font-size:15px;transition:transform .3s ease;}

/* ---- 호버 (링크 패널만) ---- */
.iwp-panel.is-link{cursor:pointer;}
@media(hover:hover){
  .iwp-panel.is-link:hover .iwp-bg{transform:scale(1.10);}
  .iwp-panel.is-link:hover .iwp-go{opacity:1;transform:none;}
  .iwp-panel.is-link:hover .iwp-arr{transform:translateX(4px);}
  .iwp-panel.is-link:hover .iwp-shade{
    background:linear-gradient(
      180deg,
      rgba(8,18,36,calc(var(--iwp-shade) * .22)) 0%,
      rgba(13,44,92,.10) 30%,
      rgba(8,18,36,calc(var(--iwp-shade) * .62)) 62%,
      rgba(8,18,36,calc(var(--iwp-shade) + .12)) 100%
    );
  }
}

/* 키보드 포커스 */
.iwp-panel.is-link:focus-visible{outline:3px solid #9ec5ff;outline-offset:-3px;}

/* 진입 애니메이션 (JS가 .iwp-in 부여) */
.iwp-panel{opacity:0;transform:translateY(28px);}
.iwp .iwp-panel{transition:opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1);}
.iwp.iwp-in .iwp-panel{opacity:1;transform:none;}
.iwp.iwp-in .iwp-panel:nth-child(2){transition-delay:.12s;}
.iwp.iwp-in .iwp-panel:nth-child(3){transition-delay:.24s;}
.iwp.iwp-in .iwp-panel:nth-child(4){transition-delay:.36s;}
.iwp.iwp-in .iwp-panel:nth-child(5){transition-delay:.48s;}

/* ---- 스크롤 인디케이터 ---- */
.iwp-scroll{
  position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:20;
  display:flex;flex-direction:column;align-items:center;gap:9px;pointer-events:none;
}
.iwp-mouse{
  width:22px;height:34px;border:2px solid rgba(255,255,255,.7);border-radius:12px;
  position:relative;
}
.iwp-mouse::after{
  content:'';position:absolute;left:50%;top:7px;transform:translateX(-50%);
  width:3px;height:7px;border-radius:2px;background:rgba(255,255,255,.9);
  animation:iwpWheel 1.7s ease infinite;
}
.iwp-scrolltxt{font-size:10px;font-weight:600;letter-spacing:2px;color:rgba(255,255,255,.7);}
@keyframes iwpWheel{0%{opacity:0;top:7px;}40%{opacity:1;}80%{opacity:0;top:17px;}100%{opacity:0;}}

/* ---- 태블릿: 가로 유지하되 캡션 축소 ---- */
@media(max-width:1024px){
  .iwp-cap{left:22px;right:22px;bottom:30px;gap:7px;}
  .iwp-num{top:22px;left:22px;}
  .iwp-global-eye{top:24px;left:28px;}
}

/* ---- 모바일: 세로 스택 (각 패널 풀폭) ---- */
@media(max-width:768px){
  .iwp{height:auto;min-height:0;}
  body.admin-bar .iwp{height:auto;}
  .iwp-grid{
    grid-template-columns:1fr;
    grid-auto-rows:58vh;
    height:auto;
  }
  .iwp-panel{border-right:none;border-bottom:1px solid rgba(255,255,255,.14);}
  .iwp-panel:last-child{border-bottom:none;}
  .iwp-go{opacity:1;transform:none;}  /* 모바일은 항상 노출 */
  .iwp-title{font-size:clamp(21px,5.6vw,28px);}
  .iwp-scroll{display:none;}
  .iwp-global-eye{display:none;}
  /* 모바일 진입 애니메이션 지연 제거(스크롤 진입마다 어색함 방지) */
  .iwp.iwp-in .iwp-panel:nth-child(n){transition-delay:0s;}
}
@media(max-width:480px){
  .iwp-grid{grid-auto-rows:50vh;}
  .iwp-cap{left:20px;right:20px;bottom:26px;}
}

/* 모션 최소화 환경 */
@media(prefers-reduced-motion:reduce){
  .iwp-panel,.iwp-bg,.iwp-go,.iwp-arr{transition:none !important;}
  .iwp-panel{opacity:1 !important;transform:none !important;}
  .iwp-mouse::after{animation:none;}
}