/* ================================================================
   01. HERO — 홍보영상
   원본: kuber-main/blocks/01_홍보영상_블록.html 의 <style> 블록을 그대로 이관.
   수치·색상은 확정본이므로 임의 변경 금지.
   ================================================================ */

.ks-hero *{box-sizing:border-box;margin:0;padding:0}
.ks-hero{
  --ci:#7e3236;
  --white:#ffffff;
  position:relative;
  width:100%;
  min-height:620px;              /* 최소 높이 (구형 브라우저 폴백) */
  min-height:max(620px,100vh);   /* 풀스크린 */
  display:flex;align-items:stretch;
  overflow:hidden;background:#dfe4e8;
  font-family:"Inter","Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}

/* ---- 배경 영상 ---- */
.ks-hero__media{position:absolute;inset:0;overflow:hidden;background:#0d1116}
.ks-hero__media video,
.ks-hero__media img{
  width:100%;height:100%;object-fit:cover;object-position:center center;display:block;
}
.ks-hero__scrim{
  position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(6,8,11,.55) 0%,rgba(6,8,11,.34) 40%,rgba(6,8,11,.40) 65%,rgba(6,8,11,.72) 100%),
    linear-gradient(90deg,rgba(6,8,11,.62) 0%,rgba(6,8,11,.34) 50%,rgba(6,8,11,.20) 100%);
}

/* ---- 콘텐츠 ---- */
.ks-hero__inner{
  position:relative;z-index:2;flex:1 1 auto;width:100%;
  max-width:1560px;margin:0 auto;padding:0 32px;
  display:flex;flex-direction:column;justify-content:center;
}
.ks-hero__eyebrow{
  font-size:12px;font-weight:600;letter-spacing:.28em;text-transform:uppercase;
  color:rgba(255,255,255,.82);margin-bottom:26px;
  opacity:0;transform:translateY(30px);transition:opacity 1s ease,transform 1s ease;
}
.ks-hero__eyebrow::before{
  content:"";display:inline-block;width:34px;height:1px;background:var(--ci);
  vertical-align:middle;margin-right:14px;transform:translateY(-1px);
}
.ks-hero h1{
  font-size:clamp(36px,5.6vw,76px);font-weight:600;line-height:1.14;letter-spacing:-.02em;
  color:var(--white);
}
.ks-hero h1 span{
  display:block;
  opacity:0;transform:translateY(80px);
  transition:opacity 1.2s cubic-bezier(.22,.61,.36,1),transform 1.2s cubic-bezier(.22,.61,.36,1);
}
.ks-hero h1 span:nth-child(1){transition-delay:.3s}
.ks-hero h1 span:nth-child(2){transition-delay:.7s}
.ks-hero__desc{
  margin-top:30px;max-width:600px;
  font-size:16px;line-height:1.85;color:rgba(255,255,255,.76);
  opacity:0;transform:translateY(40px);
  transition:opacity 1.2s ease 1.05s,transform 1.2s ease 1.05s;
}

/* 진입 리빌 */
.ks-hero.is-in .ks-hero__eyebrow,
.ks-hero.is-in h1 span,
.ks-hero.is-in .ks-hero__desc{opacity:1;transform:none}

/* ---- SCROLL DOWN ---- */
.ks-hero__scroll{
  position:absolute;left:50%;bottom:38px;transform:translateX(-50%);
  z-index:3;display:flex;flex-direction:column;align-items:center;gap:12px;
  text-decoration:none;color:rgba(255,255,255,.9);
  font-size:10px;font-weight:500;letter-spacing:.3em;text-transform:uppercase;
}
.ks-hero__scroll i{
  display:block;width:1px;height:52px;background:rgba(255,255,255,.35);position:relative;overflow:hidden;
}
.ks-hero__scroll i::after{
  content:"";position:absolute;left:0;top:0;width:1px;height:18px;background:#fff;
  animation:ks-hero-scroll 1.9s cubic-bezier(.65,0,.35,1) infinite;
}
@keyframes ks-hero-scroll{
  0%{transform:translateY(-20px)}
  60%{transform:translateY(52px)}
  100%{transform:translateY(52px)}
}

/* ---- 반응형 ---- */
@media (max-width:1189px){
  .ks-hero{min-height:560px;min-height:max(560px,100vh)}
  .ks-hero__inner{padding:0 40px}
}
@media (max-width:767px){
  .ks-hero{min-height:480px;min-height:max(480px,100svh)}
  .ks-hero__inner{padding:0 24px}
  .ks-hero__eyebrow{margin-bottom:18px;font-size:11px;letter-spacing:.24em}
  .ks-hero h1{font-size:clamp(30px,8.4vw,44px);line-height:1.2}
  .ks-hero__desc{margin-top:22px;font-size:15px}
  .ks-hero__scroll{bottom:24px}
  .ks-hero__scroll i{height:38px}
  @keyframes ks-hero-scroll{0%{transform:translateY(-16px)}60%{transform:translateY(38px)}100%{transform:translateY(38px)}}
}

/* ---- 모션 최소화 설정 존중 ---- */
@media (prefers-reduced-motion:reduce){
  .ks-hero__scroll i::after{animation:none}
  .ks-hero__eyebrow,.ks-hero h1 span,.ks-hero__desc{opacity:1;transform:none;transition:none}
}