/* 메인 슬라이드 배너(kmBanner) 전용 스타일 — km_banner_slider.php 파셜과 함께 동작.
   어느 페이지(km-home/km-main-v3)에서도 독립 동작하도록 분리(.kmBannerSlider 네임스페이스). */
.kmBannerSlider{ position:relative; overflow:hidden; background:#0B1220; }
.kmBannerSlider .track{ display:flex; transition: transform .55s cubic-bezier(.22,.61,.36,1); will-change:transform; }
.kmBannerSlider .slide{ flex:0 0 100%; min-height:480px; position:relative; overflow:hidden; color:#fff; }
.kmBannerSlider .slide .sBg{ position:absolute; inset:0; z-index:0; background-size:cover; background-position:center; }
.kmBannerSlider .slide .sOverlay{ position:absolute; inset:0; z-index:1; }
.kmBannerSlider .slide .sIn{
  position:relative; z-index:2; max-width:1240px; margin:0 auto;
  padding:120px 24px; min-height:480px;
  display:flex; flex-direction:column; align-items:flex-start; justify-content:center;
}
.kmBannerSlider .slide.alignCenter .sIn{ align-items:center; text-align:center; }
.kmBannerSlider .slide .lead{ max-width:640px; display:flex; flex-direction:column; align-items:flex-start; }
.kmBannerSlider .slide.alignCenter .lead{ align-items:center; }
.kmBannerSlider .sEyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:13px; font-weight:800; letter-spacing:.18em; text-transform:uppercase;
  padding:6px 12px; border-radius:999px; background:rgba(255,255,255,.12); color:#fff;
  backdrop-filter:blur(8px);
}
.kmBannerSlider .sTitle{
  font-size:clamp(28px,4.5vw,56px); line-height:1.06; letter-spacing:-.035em;
  font-weight:800; margin:18px 0 18px; color:#fff;
}
.kmBannerSlider .sTitle .hl{
  background:var(--hlGrad, linear-gradient(90deg,#FFD66E,#FFBA38));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.kmBannerSlider .sLead{ color:rgba(255,255,255,.85); font-size:17px; max-width:560px; margin:0; line-height:1.55; }
.kmBannerSlider .sCtas{ display:flex; gap:10px; margin-top:28px; flex-wrap:wrap; }
.kmBannerSlider .btn{
  display:inline-flex; align-items:center; justify-content:center;
  font-weight:700; font-size:15px; padding:14px 22px; border-radius:14px;
  border:1px solid transparent; transition:transform .08s ease,box-shadow .2s ease,background .15s ease;
}
.kmBannerSlider .btn:active{ transform:translateY(1px); }
.kmBannerSlider .btn-accent{ background:#F8C740; color:#6B4E00; }
.kmBannerSlider .btn-accent:hover{ background:#FBD96B; }
.kmBannerSlider .btn-ghost{ background:#fff; color:#0B1220; border-color:#E7EAEE; }
.kmBannerSlider .btn-ghost.km-onHero{ background:transparent; border-color:rgba(255,255,255,.28); color:#fff; }
.kmBannerSlider .btn-ghost.km-onHero:hover{ background:rgba(255,255,255,.12); }
.kmBannerSlider .btn-lg{ padding:18px 28px; font-size:16px; border-radius:16px; }

/* 배경 프리셋 */
.kmBannerSlider .slide.bg-navy  { background:linear-gradient(180deg,#0B1832,#0B1220); --hlGrad:linear-gradient(90deg,#FFD66E,#FFBA38); }
.kmBannerSlider .slide.bg-navy   .sOverlay{ background:radial-gradient(60% 60% at 90% 0%,rgba(248,199,64,.18),transparent 60%),radial-gradient(50% 50% at 0% 100%,rgba(63,108,219,.22),transparent 60%); }
.kmBannerSlider .slide.bg-amber { background:linear-gradient(135deg,#3D2A00 0%,#6B4E00 60%,#0B1220 100%); --hlGrad:linear-gradient(90deg,#fff,#FFE0A6); }
.kmBannerSlider .slide.bg-amber  .sOverlay{ background:radial-gradient(50% 50% at 90% 100%,rgba(248,199,64,.32),transparent 60%); }
.kmBannerSlider .slide.bg-deep  { background:linear-gradient(135deg,#03132E,#0E2A5E 60%,var(--km-primary)); --hlGrad:linear-gradient(90deg,#FFD66E,#fff); }
.kmBannerSlider .slide.bg-deep   .sOverlay{ background:radial-gradient(50% 50% at 100% 0%,rgba(255,255,255,.18),transparent 60%); }
.kmBannerSlider .slide.bg-violet{ background:linear-gradient(135deg,#1A1233,#3D31C7 55%,#5A4BFF); --hlGrad:linear-gradient(90deg,#A9F5DA,#fff); }
.kmBannerSlider .slide.bg-violet .sOverlay{ background:radial-gradient(60% 60% at 0% 100%,rgba(169,245,218,.22),transparent 60%); }
.kmBannerSlider .slide.bg-mint  { background:linear-gradient(135deg,#064E45,#0D8A77 50%,#16B79E); --hlGrad:linear-gradient(90deg,#fff,#D7F8F0); }
.kmBannerSlider .slide.bg-mint   .sOverlay{ background:radial-gradient(50% 50% at 100% 100%,rgba(255,255,255,.2),transparent 60%); }
.kmBannerSlider .slide.bg-pink  { background:linear-gradient(135deg,#3A0F2A,#B91C7B 50%,#EC4899); --hlGrad:linear-gradient(90deg,#FFE2EF,#fff); }
.kmBannerSlider .slide.bg-custom{ background:#0B1220; }
.kmBannerSlider .slide.bg-custom .sOverlay{ background:linear-gradient(90deg,rgba(11,18,32,.65),rgba(11,18,32,.25) 60%,transparent); }

/* 좌우 네비/도트 */
.kmBannerSlider .nav-prev,.kmBannerSlider .nav-next{
  position:absolute; top:50%; transform:translateY(-50%); z-index:6;
  width:48px; height:48px; border-radius:50%;
  background:rgba(255,255,255,.14); color:#fff; border:1px solid rgba(255,255,255,.24);
  display:grid; place-items:center; cursor:pointer; transition:.2s; backdrop-filter:blur(10px);
}
.kmBannerSlider .nav-prev:hover,.kmBannerSlider .nav-next:hover{ background:rgba(255,255,255,.28); transform:translateY(-50%) scale(1.05); }
.kmBannerSlider .nav-prev{ left:24px; } .kmBannerSlider .nav-next{ right:24px; }
@media(max-width:960px){ .kmBannerSlider .nav-prev,.kmBannerSlider .nav-next{ display:none; } }

.kmBannerSlider .dots{
  position:absolute; left:50%; bottom:24px; transform:translateX(-50%); z-index:6;
  display:flex; gap:8px; align-items:center;
  background:rgba(11,18,32,.45); padding:8px 14px; border-radius:999px; backdrop-filter:blur(10px);
}
.kmBannerSlider .dots button{
  width:8px; height:8px; border-radius:50%; border:none; background:rgba(255,255,255,.5);
  padding:0; transition:.2s; cursor:pointer;
}
.kmBannerSlider .dots button.on{ background:#fff; width:22px; border-radius:6px; }
.kmBannerSlider .dots .pp{
  width:22px; height:22px; border-radius:50%; background:rgba(255,255,255,.16); color:#fff;
  font-size:10px; display:grid; place-items:center; margin-left:6px;
}
.kmBannerSlider .dots .ix{ color:#fff; font-size:12px; font-weight:700; margin-left:8px; letter-spacing:.05em; }
.kmBannerSlider .dots .ix b{ font-weight:900; }
@media(max-width:600px){ .kmBannerSlider .dots .ix{ display:none; } }

@media(max-width:960px){
  .kmBannerSlider .slide{ min-height:auto; }
  .kmBannerSlider .slide .sIn{ padding:64px 20px 80px; min-height:auto; }
  .kmBannerSlider .sLead{ font-size:15px; }
}