/* ================================================================
   04. 제품소개
   원본: kuber-main/blocks/04_제품소개_블록.html 의 <style> 블록을 그대로 이관.
   수치·색상은 확정본이므로 임의 변경 금지.
   ================================================================ */

.ks-prod *{box-sizing:border-box;margin:0;padding:0}
.ks-prod{
  --ci:#7e3236;
  position:relative;width:100%;overflow:hidden;
  min-height:640px;               /* 최소 높이 */
  min-height:max(640px,100vh);    /* 풀스크린 */
  display:flex;flex-direction:column;
  background:#0d1116;color:#fff;
  font-family:"Inter","Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}

/* ---- 전체 배경 : 기본 1장 + 제품군 3장이 겹쳐 있고, 호버하면 교차 전환 ---- */
.ks-prod__bg{position:absolute;inset:0;z-index:0;overflow:hidden}
.ks-prod__bg img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  opacity:0;transform:scale(1.06);
  transition:opacity .85s ease,transform 2s cubic-bezier(.22,.61,.36,1),filter .85s ease;
  filter:saturate(.5) brightness(.5);
}
.ks-prod__bg img.is-base{opacity:1;transform:scale(1)}
.ks-prod__scrim{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(8,11,14,.62) 0%,rgba(8,11,14,.40) 45%,rgba(8,11,14,.74) 100%);
}
/* 호버한 영역의 사진으로 전체 배경 전환 */
.ks-prod[data-active] .ks-prod__bg img.is-base{opacity:0}
.ks-prod[data-active="1"] .ks-prod__bg img[data-bg="1"],
.ks-prod[data-active="2"] .ks-prod__bg img[data-bg="2"],
.ks-prod[data-active="3"] .ks-prod__bg img[data-bg="3"]{
  opacity:1;transform:scale(1);filter:saturate(.95) brightness(.66);
}

/* ---- 헤더 ---- */
.ks-prod__head{position:relative;z-index:3;width:100%;max-width:1560px;margin:0 auto;padding:96px 32px 34px}
.ks-prod__eyebrow{
  font-size:12px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:#e3b9bb;
  margin-bottom:18px;position:relative;padding-top:16px;
}
.ks-prod__eyebrow::before{content:"";position:absolute;left:0;top:0;width:40px;height:2px;background:var(--ci)}
.ks-prod h2{font-size:clamp(30px,4vw,52px);font-weight:700;letter-spacing:-.03em;line-height:1.05}
.ks-prod__sub{margin-top:12px;font-size:15px;line-height:1.7;color:rgba(255,255,255,.7)}

/* ---- 가로 3분할 영역 ---- */
.ks-prod__bands{position:relative;z-index:2;flex:1;display:flex;flex-direction:column;min-height:0}
.ks-prod__band{
  position:relative;flex:1;min-height:110px;overflow:hidden;
  display:flex;align-items:center;
  border-top:1px solid rgba(255,255,255,.16);
  text-decoration:none;color:#fff;
  background-color:transparent;
  transition:opacity .5s ease,background-color .4s ease;
}
.ks-prod__band:last-child{border-bottom:1px solid rgba(255,255,255,.16)}

/* 올린 영역은 옅은 흰색 톤이 깔려 어디에 올렸는지 바로 보입니다 */
.ks-prod__band:hover{background-color:rgba(255,255,255,.06)}
/* 하나에 올리면 나머지 영역의 글자는 가라앉음 */
.ks-prod__bands:hover .ks-prod__band{opacity:.42}
.ks-prod__bands .ks-prod__band:hover{opacity:1}

/* CI 좌측 바 */
.ks-prod__band::after{
  content:"";position:absolute;left:0;top:0;bottom:0;z-index:2;width:0;background:var(--ci);
  transition:width .5s cubic-bezier(.22,.61,.36,1);
}
.ks-prod__band:hover::after{width:5px}

/* ---- 영역 안 텍스트 ---- */
.ks-prod__row{
  position:relative;z-index:3;width:100%;max-width:1560px;margin:0 auto;padding:0 32px;
  display:flex;align-items:center;justify-content:space-between;gap:40px;
}
.ks-prod__left{display:flex;align-items:baseline;gap:26px;min-width:0}
.ks-prod__no{font-size:12px;font-weight:600;letter-spacing:.22em;color:rgba(255,255,255,.55)}
.ks-prod__name{
  font-size:clamp(24px,2.6vw,40px);font-weight:600;letter-spacing:-.02em;line-height:1.2;
  transition:transform .5s cubic-bezier(.22,.61,.36,1);
}
.ks-prod__band:hover .ks-prod__name{transform:translateX(10px)}
.ks-prod__right{display:flex;align-items:center;gap:28px;flex:0 0 auto}
.ks-prod__desc{
  font-size:14px;line-height:1.7;color:rgba(255,255,255,.78);max-width:360px;text-align:right;
  opacity:0;transform:translateX(14px);transition:opacity .5s ease,transform .5s ease;
}
.ks-prod__arrow{
  width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.35);
  display:flex;align-items:center;justify-content:center;flex:0 0 auto;
  transition:background .4s ease,border-color .4s ease,transform .4s ease;
}
.ks-prod__arrow::after{
  content:"";width:8px;height:8px;border-top:1.5px solid #fff;border-right:1.5px solid #fff;
  transform:translateX(-2px) rotate(45deg);
}
.ks-prod__band:hover .ks-prod__desc{opacity:1;transform:none}
.ks-prod__band:hover .ks-prod__arrow{background:var(--ci);border-color:var(--ci);transform:translateX(4px)}

/* ---- 리빌 ---- */
.ks-prod__head,.ks-prod__band{opacity:0;transform:translateY(30px);transition:opacity .9s ease,transform .9s ease}
.ks-prod.is-in .ks-prod__head,
.ks-prod.is-in .ks-prod__band{opacity:1;transform:none}
.ks-prod.is-in .ks-prod__band:nth-child(1){transition-delay:.10s}
.ks-prod.is-in .ks-prod__band:nth-child(2){transition-delay:.20s}
.ks-prod.is-in .ks-prod__band:nth-child(3){transition-delay:.30s}

/* ================= 세로 3분할 변형 : class 에 ks-prod--cols 추가 ================= */
.ks-prod--cols .ks-prod__bands{flex-direction:row}
.ks-prod--cols .ks-prod__band{border-top:0;border-left:1px solid rgba(255,255,255,.16);align-items:flex-end}
.ks-prod--cols .ks-prod__band:last-child{border-right:1px solid rgba(255,255,255,.16);border-bottom:0}
.ks-prod--cols .ks-prod__band::after{width:100%;height:0;top:auto;bottom:0}
.ks-prod--cols .ks-prod__band:hover::after{width:100%;height:5px}
.ks-prod--cols .ks-prod__row{flex-direction:column;align-items:flex-start;gap:16px;padding:0 28px 46px}
.ks-prod--cols .ks-prod__left{flex-direction:column;gap:10px;align-items:flex-start}
.ks-prod--cols .ks-prod__right{flex-direction:column;align-items:flex-start;gap:16px}
.ks-prod--cols .ks-prod__desc{text-align:left;max-width:none}
.ks-prod--cols .ks-prod__band:hover .ks-prod__name{transform:translateY(-4px)}

/* ---- 반응형 ---- */
@media (max-width:1189px){
  .ks-prod{min-height:580px;min-height:max(580px,100vh)}
  .ks-prod__head{padding:72px 40px 26px}
  .ks-prod__row{padding:0 40px}
  .ks-prod__desc{max-width:280px;font-size:13px}
}
@media (max-width:767px){
  .ks-prod{min-height:auto}
  .ks-prod__head{padding:64px 24px 22px}
  .ks-prod__bands{display:block}
  .ks-prod__band{min-height:210px;padding:26px 0}
  .ks-prod__row{padding:0 24px;flex-direction:column;align-items:flex-start;gap:12px}
  .ks-prod__left{gap:14px}
  .ks-prod__right{width:100%;justify-content:space-between;gap:16px}
  .ks-prod__desc{text-align:left;max-width:none;font-size:13px}
  /* 모바일은 호버가 없으므로 영역마다 자기 사진을 배경으로 깔아줍니다 */
  .ks-prod__band{background-image:var(--img);background-size:cover;background-position:center}
  .ks-prod__band::before{
    content:"";position:absolute;inset:0;z-index:1;
    background:linear-gradient(90deg,rgba(8,11,14,.80) 0%,rgba(8,11,14,.50) 60%,rgba(8,11,14,.35) 100%);
  }
  .ks-prod__band::after{width:4px}
  .ks-prod__desc{opacity:1;transform:none}
  .ks-prod__bands:hover .ks-prod__band{opacity:1}
  .ks-prod--cols .ks-prod__bands{flex-direction:column}
}

@media (prefers-reduced-motion:reduce){
  .ks-prod__head,.ks-prod__band{opacity:1;transform:none;transition:none}
  .ks-prod__band img{transition:none}
}