@charset "utf-8";

/* =========================================================
   MANSUP FACILITY — BRANCH SWIPER
   - facility.php 전용
   - 수원점 / 부산서면점 각 지점 갤러리
========================================================= */
.ms-facility-page .ms-facility-panorama{
  position:relative;
  width:100%;
  overflow:hidden;
  color:#fff;
  background:#06182e;
}
 
.ms-facility-page .ms-facility-gallery-head{
  position:absolute;
  z-index:12;
  left:7vw;
  top:clamp(28px,3vw,48px);
}

.ms-facility-page .ms-facility-branch-tabs{
  display:flex;
  border:1px solid rgba(255,255,255,.28);
  background:rgba(3,15,28,.42);
  backdrop-filter:blur(10px);
}

.ms-facility-page .ms-facility-branch-tab{
  display:flex;
  min-width:190px;
  min-height:66px;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  gap:5px;
  padding:0 22px;
  border:0;
  border-right:1px solid rgba(255,255,255,.2);
  color:rgba(255,255,255,.62);
  background:transparent;
  text-align:left;
  cursor:pointer;
  transition:background .25s ease,color .25s ease;
}
    
.ms-facility-page .ms-facility-branch-tab:last-child{border-right:0;}
.ms-facility-page .ms-facility-branch-tab:hover{color:#fff;background:rgba(255,255,255,.08);}
.ms-facility-page .ms-facility-branch-tab.is-active{color:#fff;background:#0878be;}
.ms-facility-page .ms-facility-branch-tab span{font-size:16px;font-weight:800;letter-spacing:-.025em;}
.ms-facility-page .ms-facility-branch-tab small{font-size:9px;font-weight:800;letter-spacing:.14em;opacity:.72;}

.ms-facility-page .ms-facility-gallery-stage,
.ms-facility-page .ms-facility-swiper-panel,
.ms-facility-page .ms-facility-swiper{
  width:100%;
}

.ms-facility-page .ms-facility-swiper-panel[hidden]{display:none!important;}

.ms-facility-page .ms-facility-swiper{
  position:relative;
  height:clamp(600px,46vw,820px);
  overflow:hidden;
}

.ms-facility-page .ms-facility-slide{
  position:relative;
  width:100%;
  height:100%;
  margin:0;
  overflow:hidden;
  background:#102b43;
}

.ms-facility-page .ms-facility-slide:after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    linear-gradient(90deg,rgba(3,13,25,.68) 0%,rgba(3,13,25,.22) 46%,rgba(3,13,25,.04) 74%,rgba(3,13,25,.02) 100%),
    linear-gradient(180deg,rgba(3,13,25,.05) 45%,rgba(3,13,25,.72) 100%);
}

.ms-facility-page .ms-facility-slide img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  transform:scale(1.001);
}

.ms-facility-page .swiper-slide-active .ms-facility-slide img{
  animation:msFacilityZoom 6.4s ease-out both;
}

@keyframes msFacilityZoom{
  from{transform:scale(1.001);}
  to{transform:scale(1.045);}
}

.ms-facility-page .ms-facility-panorama-caption{
  position:absolute;
  z-index:3;
  left:7vw;
  bottom:clamp(64px,6vw,105px);
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  width:min(720px,58vw);
  color:#fff;
}

.ms-facility-page .ms-facility-panorama-caption .branch{
  display:block;
  margin-bottom:16px;
  color:#79c8ef;
  font-size:10px;
  line-height:1;
  font-weight:900;
  letter-spacing:.18em;
}

.ms-facility-page .ms-facility-panorama-caption strong{
  display:block;
  color:#fff;
  font-size:clamp(34px,4vw,64px);
  line-height:1.08;
  font-weight:760;
  letter-spacing:-.06em;
  word-break:keep-all;
  text-shadow:0 4px 26px rgba(2,10,19,.22);
}

.ms-facility-page .ms-facility-panorama-caption p{
  max-width:650px;
  margin:18px 0 0;
  color:rgba(255,255,255,.74);
  font-size:clamp(15px,1.05vw,18px);
  line-height:1.75;
  word-break:keep-all;
}

.ms-facility-page .ms-facility-swiper-ui{
  position:absolute;
  z-index:11;
  right:7vw;
  bottom:clamp(64px,6vw,105px);
  display:flex;
  align-items:center;
  gap:20px;
}

.ms-facility-page .ms-facility-slide-count{
  display:flex;
  align-items:baseline;
  gap:7px;
  min-width:90px;
  color:#fff;
}

.ms-facility-page .ms-facility-slide-count strong{
  font-size:30px;
  line-height:1;
  font-weight:800;
  letter-spacing:-.05em;
}

.ms-facility-page .ms-facility-slide-count span{
  color:rgba(255,255,255,.58);
  font-size:13px;
  font-weight:700;
}

.ms-facility-page .ms-facility-swiper-nav{display:flex;}

.ms-facility-page .ms-facility-prev,
.ms-facility-page .ms-facility-next{
  display:grid;
  place-items:center;
  width:56px;
  height:56px;
  padding:0;
  border:1px solid rgba(255,255,255,.34);
  color:#fff;
  background:rgba(4,17,31,.38);
  font-size:21px;
  cursor:pointer;
  backdrop-filter:blur(8px);
  transition:background .22s ease,border-color .22s ease;
}

.ms-facility-page .ms-facility-next{border-left:0;}
.ms-facility-page .ms-facility-prev:hover,
.ms-facility-page .ms-facility-next:hover{background:#0878be;border-color:#0878be;}
.ms-facility-page .ms-facility-prev.swiper-button-disabled,
.ms-facility-page .ms-facility-next.swiper-button-disabled{opacity:.35;cursor:default;}

.ms-facility-page .ms-facility-swiper-progress.swiper-pagination-progressbar{
  position:absolute;
  z-index:10;
  left:7vw;
  right:7vw;
  top:auto;
  bottom:32px;
  width:auto;
  height:2px;
  background:rgba(255,255,255,.2);
}

.ms-facility-page .ms-facility-swiper-progress .swiper-pagination-progressbar-fill{
  background:#79c8ef;
}

/* Swiper CDN 로딩 실패 시에도 첫 번째 사진은 그대로 노출 */
.ms-facility-page .is-swiper-failed .ms-facility-swiper{height:auto;}
.ms-facility-page .is-swiper-failed .swiper-wrapper{display:block;}
.ms-facility-page .is-swiper-failed .swiper-slide{display:none;height:650px;}
.ms-facility-page .is-swiper-failed .swiper-slide:first-child{display:block;}

@media(max-width:1180px){
  .ms-facility-page .ms-facility-gallery-head{left:6vw;}
  .ms-facility-page .ms-facility-panorama-caption{left:6vw;width:min(690px,64vw);}
  .ms-facility-page .ms-facility-swiper-ui{right:6vw;}
  .ms-facility-page .ms-facility-swiper-progress.swiper-pagination-progressbar{left:6vw;right:6vw;}
}

@media(max-width:760px){
  .ms-facility-page .ms-facility-gallery-head{
    left:24px;
    right:24px;
    top:24px;
  }

  .ms-facility-page .ms-facility-branch-tabs{width:100%;}

  .ms-facility-page .ms-facility-branch-tab{
    min-width:0;
    min-height:60px;
    flex:1 1 50%;
    padding:0 15px;
  }

  .ms-facility-page .ms-facility-branch-tab span{font-size:14px;}
  .ms-facility-page .ms-facility-branch-tab small{font-size:8px;letter-spacing:.09em;}

  .ms-facility-page .ms-facility-swiper{height:620px;}
  .ms-facility-page .ms-facility-slide img{object-position:center;}

  .ms-facility-page .ms-facility-slide:after{
    background:linear-gradient(180deg,rgba(3,13,25,.05) 20%,rgba(3,13,25,.18) 48%,rgba(3,13,25,.92) 86%,rgba(3,13,25,.98) 100%);
  }

  .ms-facility-page .ms-facility-panorama-caption{
    left:24px;
    right:24px;
    bottom:118px;
    width:auto;
  }

  .ms-facility-page .ms-facility-panorama-caption .branch{margin-bottom:12px;}
  .ms-facility-page .ms-facility-panorama-caption strong{font-size:clamp(32px,10vw,46px);}
  .ms-facility-page .ms-facility-panorama-caption p{margin-top:13px;font-size:14px;line-height:1.65;}

  .ms-facility-page .ms-facility-swiper-ui{
    left:24px;
    right:24px;
    bottom:46px;
    justify-content:space-between;
  }

  .ms-facility-page .ms-facility-prev,
  .ms-facility-page .ms-facility-next{
    width:48px;
    height:48px;
  }

  .ms-facility-page .ms-facility-slide-count strong{font-size:26px;}

  .ms-facility-page .ms-facility-swiper-progress.swiper-pagination-progressbar{
    left:24px;
    right:24px;
    bottom:22px;
  }
}

@media(prefers-reduced-motion:reduce){
  .ms-facility-page .swiper-slide-active .ms-facility-slide img{animation:none;}
}

/* =========================================================
   FACILITY SWIPER — ABSOLUTE STAGE FIX
   - panorama 자체 높이를 기준으로 모든 Swiper 레이어를 absolute 고정
   - 부모/자식 높이 계산 오차 및 기존 공통 CSS의 padding/margin 영향 차단
   - 이미지 하단에 배경색이 남는 현상 방지
========================================================= */
.ms-facility-page .ms-facility-panorama{
  position:relative !important;
  width:100% !important;
  height:clamp(600px,46vw,820px) !important;
  min-height:0 !important;
  margin:0 !important;
  padding:0 !important;
  overflow:hidden !important;
  line-height:0;
  box-sizing:border-box;
}

.ms-facility-page .ms-facility-gallery-stage{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  min-height:0 !important;
  margin:0 !important;
  padding:0 !important;
  overflow:hidden !important;
  box-sizing:border-box;
}

.ms-facility-page .ms-facility-swiper-panel{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  min-height:0 !important;
  margin:0 !important;
  padding:0 !important;
  overflow:hidden !important;
  box-sizing:border-box;
}

.ms-facility-page .ms-facility-swiper-panel[hidden]{
  display:none !important;
}

.ms-facility-page .ms-facility-swiper{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  min-height:0 !important;
  margin:0 !important;
  padding:0 !important;
  overflow:hidden !important;
  box-sizing:border-box;
}

.ms-facility-page .ms-facility-swiper .swiper-wrapper{
  position:relative !important;
  width:100% !important;
  height:100% !important;
  min-height:0 !important;
  margin:0 !important;
  padding:0 !important;
  align-items:stretch !important;
  box-sizing:border-box;
}

.ms-facility-page .ms-facility-swiper .swiper-slide{
  position:relative !important;
  width:100% !important;
  height:100% !important;
  min-height:0 !important;
  margin:0 !important;
  padding:0 !important;
  overflow:hidden !important;
  box-sizing:border-box;
}

.ms-facility-page .ms-facility-slide{
  position:absolute !important;
  inset:0 !important;
  display:block !important;
  width:100% !important;
  height:100% !important;
  min-height:0 !important;
  margin:0 !important;
  padding:0 !important;
  overflow:hidden !important;
  box-sizing:border-box;
}

.ms-facility-page .ms-facility-slide img{
  position:absolute !important;
  inset:0 !important;
  display:block !important;
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  max-height:none !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  object-fit:cover !important;
  object-position:center !important;
  vertical-align:top !important;
}

/* 캡션은 line-height 초기화 영향 없이 기존 타이포 유지 */
.ms-facility-page .ms-facility-panorama-caption{
  line-height:normal;
}

/* Swiper 로딩 실패 시에도 panorama 높이 안에서 첫 이미지 꽉 채움 */
.ms-facility-page .is-swiper-failed .ms-facility-swiper{
  position:absolute !important;
  inset:0 !important;
  height:100% !important;
}
.ms-facility-page .is-swiper-failed .swiper-wrapper{
  display:block !important;
  height:100% !important;
}
.ms-facility-page .is-swiper-failed .swiper-slide{
  display:none !important;
  height:100% !important;
}
.ms-facility-page .is-swiper-failed .swiper-slide:first-child{
  display:block !important;
}

@media(max-width:760px){
  .ms-facility-page .ms-facility-panorama{
    height:620px !important;
  }
}