/* ===========================================================
   센터 페이지 상단 사진 슬라이드 (hero-slides)
   - assets/slider.js 의 data-kyp-* 훅을 그대로 사용합니다.
   - 공간 사진은 cover, 장비 제품컷은 data-fit="contain" 으로 처리.
   =========================================================== */

.hero-slides{
  position:relative;
  aspect-ratio:4/3;
  overflow:hidden;
  border-radius:14px;
  background:#0E1A20;
  isolation:isolate;
  outline:none;
}
.hero-slides:focus-visible{
  box-shadow:0 0 0 4px rgba(0,162,164,.28);
}

.hero-slides__view{position:absolute;inset:0}

.hero-slides__slide{
  position:absolute;
  inset:0;
  margin:0;
  opacity:0;
  visibility:hidden;
  transition:opacity 800ms ease, visibility 800ms;
}
.hero-slides__slide.is-active{opacity:1;visibility:visible;z-index:1}

.hero-slides__slide img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  transform:scale(1.02);
  transition:transform 8s cubic-bezier(.2,.7,.25,1);
}
.hero-slides__slide.is-active img{transform:scale(1.07)}

/* 제조사 제품 이미지(흰 배경) 슬라이드 */
.hero-slides__slide[data-fit="contain"]{
  background:#fff;
  box-shadow:inset 0 0 0 1px rgba(22,32,42,.12);
}
.hero-slides__slide[data-fit="contain"] img,
.hero-slides__slide[data-fit="contain"].is-active img{
  object-fit:contain;
  padding:9% 9% 13%;
  transform:none;
  transition:none;
}

.hero-slides__slide figcaption{
  position:absolute;
  left:12px;
  bottom:12px;
  z-index:2;
  max-width:calc(100% - 130px);
  padding:6px 12px;
  font-size:12.5px;
  line-height:1.35;
  font-weight:600;
  color:#fff;
  background:rgba(13,26,32,.62);
  border-radius:999px;
  backdrop-filter:blur(6px);
}
.hero-slides__slide figcaption small{
  display:block;
  font-size:11px;
  font-weight:500;
  opacity:.78;
}

.hero-slides__arrow{
  position:absolute;
  z-index:3;
  top:50%;
  display:grid;
  width:34px;
  height:34px;
  padding:0;
  color:#16202A;
  background:rgba(255,255,255,.84);
  border:0;
  border-radius:50%;
  box-shadow:0 6px 18px rgba(20,37,44,.16);
  opacity:0;
  place-items:center;
  cursor:pointer;
  transform:translateY(-50%);
  transition:opacity .18s ease, background .18s ease;
}
.hero-slides:hover .hero-slides__arrow,
.hero-slides:focus-within .hero-slides__arrow{opacity:1}
.hero-slides__arrow:hover{background:#fff}
.hero-slides__arrow--prev{left:10px}
.hero-slides__arrow--next{right:10px}
.hero-slides__arrow svg{
  width:56%;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}
@media (hover:none){.hero-slides__arrow{opacity:.92}}

.hero-slides__bar{
  position:absolute;
  z-index:4;
  right:12px;
  bottom:12px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:6px 7px 6px 11px;
  background:rgba(255,255,255,.82);
  border-radius:999px;
  box-shadow:0 6px 18px rgba(20,37,44,.14);
  backdrop-filter:blur(7px);
}
.hero-slides__dots{display:flex;align-items:center;gap:6px}
.hero-slides__dots button{
  width:7px;
  height:7px;
  padding:0;
  background:rgba(22,32,42,.26);
  border:0;
  border-radius:999px;
  cursor:pointer;
  transition:width .22s ease, background .22s ease;
}
.hero-slides__dots button.is-active{width:20px;background:#00A2A4}

.hero-slides__toggle{
  display:grid;
  width:24px;
  height:24px;
  padding:5px;
  color:#31404A;
  background:rgba(22,32,42,.07);
  border:0;
  border-radius:50%;
  place-items:center;
  cursor:pointer;
}
.hero-slides__toggle svg{
  width:100%;
  height:100%;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.hero-slides__toggle .kyp-icon-play,
.hero-slides__toggle.is-paused .kyp-icon-pause{display:none}
.hero-slides__toggle.is-paused .kyp-icon-play{display:block}

.hero-slides__status{
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  white-space:nowrap;
}

@media (max-width:680px){
  .hero-slides__slide figcaption{
    left:10px;
    bottom:10px;
    max-width:calc(100% - 118px);
    padding:5px 10px;
    font-size:11.5px;
  }
  .hero-slides__arrow{width:30px;height:30px}
  .hero-slides__bar{right:10px;bottom:10px}
}

@media (prefers-reduced-motion:reduce){
  .hero-slides__slide{transition-duration:160ms}
  .hero-slides__slide img,
  .hero-slides__slide.is-active img{transform:none;transition:none}
}