/* =========================
   Before/After 비교 컴포넌트 (Title 섹션)
   - 기존 클래스/ID와 충돌 방지 위해 ba- prefix 사용
   ========================= */


   
.ba-hero{
  --ba-pos: 50%;
  width: 100%;
  max-width: none;
  margin: 0 auto;
  aspect-ratio: 2.4 / 1;
  position: relative;
  overflow: hidden;
  background: #111;
  user-select: none;
}

.ba-stage{
  position:absolute;
  inset:0;
  touch-action: pan-y;
}

.ba-layer{
  position:absolute;
  inset:0;
  background-repeat:no-repeat;
  
  /* 가로 세로 모두 정가운데(50%)를 기준으로 잡습니다 */
  background-position: 50% 70%;
  
  background-size:cover;
}

.ba-before {
  z-index: 2;
  /* width를 바꾸지 않고 clip-path로 노출 영역 변경 (왼쪽이 보임) */
  clip-path: inset(0 calc(100% - var(--ba-pos)) 0 0);
}

.ba-after {
  z-index: 1;
}

.ba-divider{
  position:absolute;
  top:0; bottom:0;
  left: var(--ba-pos);
  width:2px;
  background: #03a9f4;
  transform: translateX(-1px);
  z-index:3;
  pointer-events:none;
}

.ba-range{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  opacity:0;
  cursor: ew-resize;
  z-index:10;
  touch-action:none;
  pointer-events: none;
}

.ba-handle{
  position:absolute;
  top:50%;
  left: var(--ba-pos);
  transform: translate(-50%, -50%);
  width:44px;
  height:44px;
  border-radius:50%;
  background:#03a9f4;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  z-index:11;
  pointer-events:none;
  box-shadow:0 5px 24px rgba(0,0,0,.35);
}

.ba-arrow{
  width:0; height:0;
  border-top:7px solid transparent;
  border-bottom:7px solid transparent;
}
.ba-l{ border-right:9px solid #fff; }
.ba-r{ border-left:9px solid #fff; }

.ba-label{
  position:absolute;
  top:50px;
  padding:10px 16px;
  background: #03a9f4;
  border-radius:10px;
  font-weight:800;
  z-index:12;
  white-space:nowrap;
  color:#fff;
}

.ba-left{ left:288px; }
.ba-right{ right:288px; }

@media (max-width: 1024px){
  .ba-left{ left:24px; }
  .ba-right{ right:24px; }

  .ba-label{
    font-size:14px;
    padding:8px 14px;
  }
}

@media (max-width: 480px){
  .ba-left{
    left:16px;
    right:auto;
  }
  .ba-right{
    right:16px;
    left:auto;
  }

  .ba-label{
    top:14px;
    font-size:12px;
    padding:6px 10px;
  }
}

.ba-tabs{
  position:absolute;
  left:0; right:0; bottom:0;
  padding:100px 18px 30px;
  display:flex;
  justify-content:center;
  gap:28px;
  background: linear-gradient(
    to top,
    rgba(0,0,0,.85) 0%,
    rgba(0,0,0,.65) 35%,
    rgba(0,0,0,.35) 65%,
    rgba(0,0,0,0) 100%
  );
  z-index:50;
  pointer-events:auto;
}

@media (max-width: 950px){
	.ba-tabs{
		padding:50px 18px 30px;
	}
}

@media (max-width: 620px){
	.ba-tabs{
		padding:30px 18px 30px;
	}
}


.ba-tab{
  background:none;
  border:0;
  color:#fff;
  font-weight:900;
  opacity:.7;
  cursor:pointer;
  padding:8px 0;
  font-size: 20px;
}

.ba-tab:hover{ opacity:1; }
.ba-tab.active{
  opacity:1;
  color:#03a9f4;
  border-bottom:3px solid #03a9f4;
}

@media screen and (max-width: 640px){
  .ba-hero{
    aspect-ratio: 16 / 9;
  }
  .ba-tabs{
    justify-content:flex-start;
    overflow:auto;
    gap:18px;
    scrollbar-width:none;
  }
  .ba-tabs::-webkit-scrollbar{ display:none; }
  .ba-tab{ font-size: 14px; }
}

/* =========================
   Intro-4 Video Slider Style (Updated)
   ========================= */

.slider-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    max-width: 1000px;
    width: 95%;
    margin: 0 auto;
    position: relative;
    padding-bottom: 20px;
}

.slider-window {
    flex: 1; /* 남은 공간을 모두 차지하며 너비가 유동적으로 변함 */
    position: relative;
    overflow: hidden;
    width: 100%;
}

.slider-item {
    display: none;
    width: 100%;
    animation: fadeIn 0.5s ease;
}

.slider-item.active {
    display: block;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* 비디오 래퍼: 비율 유지를 위함 */
.video-wrapper {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 비율 */
    height: 0;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.15);

    
    /* [수정] 둥근 모서리 밖으로 튀어나오는 현상 방지 코드 추가 */
    transform: translateZ(0); 
    -webkit-mask-image: -webkit-radial-gradient(white, black);
}

/* 실제 비디오 (iframe) */
.video-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.video-container iframe {
    width: 100%;
    height: 100%;
    border: none;
}

/* 커버 이미지 (클릭 전 노출) */
.video-cover {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    cursor: pointer;
    z-index: 2; /* 비디오보다 위에 위치 */
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s;
}

/* 커버 호버 시 약간 어둡게 처리 */
.video-cover:hover {
    background-blend-mode: multiply;
    background-color: rgba(0,0,0,0.2);
}


/* 네비게이션 버튼 */
.slider-nav {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 35px;
    color: #b4e5fc !important;
    padding: 10px;
    transition: all 0.3s ease;
    z-index: 10;
    /* 모바일에서 위치가 겹치지 않도록 기본적으로 static 배치 */
    position: static;
}

.slider-nav path {
    color: #b4e5fc !important;    
}

.slider-nav:hover {
    color: #03a9f4 !important;
    transform: scale(1.1);
}

.slider-nav:hover path {
    color: #03a9f4 !important;
    transform: scale(1.1);
}

/* 모바일 반응형 */
@media screen and (max-width: 640px) {
    .slider-wrapper {
        /* 버튼과 비디오 사이 간격 유지 */
        gap: 10px;
    }

    .slider-nav {
        /* 모바일용 버튼 스타일 조정 */
        font-size: 28px;
        padding: 5px;
        color: #b4e5fc;
    }
    
    /* 버튼 호버 효과 */
    .slider-nav:hover {
        color: #03a9f4;
        transform: none;
    }

    
}