/* 기본 레이아웃 */
.banner-accordion {
    position: relative; /* 진행 바를 절대 위치로 할 컨테이너 기준 */
    display: flex;
    width: 100%;
    height: 45rem;
      overflow: hidden;
}

/* 패널 공통 스타일 */
.banner-accordion .panel {
  position: relative;
  flex: 0 0 10%;           /* 기본 너비 10% */
  overflow: hidden;        /* 벗어나는 이미지 잘라내기 */
  cursor: pointer;
  transition: flex 0.8s ease;

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* 활성 패널만 70% 너비 */
.banner-accordion .panel.active {
  flex: 0 0 70%;
}

/* 각 패널별 배경 이미지 지정 */
.banner-accordion .panel:nth-child(1) { background-image: url('../assets/images/banner01.png'); }
.banner-accordion .panel:nth-child(2) { background-image: url('../assets/images/banner02.png'); }
.banner-accordion .panel:nth-child(3) { background-image: url('../assets/images/banner03.png'); }
.banner-accordion .panel:nth-child(4) { background-image: url('../assets/images/banner04.png'); }

/* ❶ 모든 콘텐츠 기본 숨김 */
.banner-accordion .panel-content {
  display: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: #fff;
  /* width 지정 없음, 필요 시 max-width 설정 가능 */
}

/* ❷ 활성 패널일 때만 콘텐츠 보이기 */
.banner-accordion .panel.active .panel-content {
  display: block;
}

/* 1·2번 활성 패널: 우측 정렬, 텍스트 우측 정렬 */
.banner-accordion .panel:nth-child(1).active .panel-content,
.banner-accordion .panel:nth-child(2).active .panel-content {
  right: 7%;
  left: auto;
  text-align: right;
}

/* 3·4번 활성 패널: 좌측 정렬, 텍스트 좌측 정렬 */
.banner-accordion .panel:nth-child(3).active .panel-content,
.banner-accordion .panel:nth-child(4).active .panel-content {
  left: 7%;
  right: auto;
  text-align: left;
}

/* h2, p 텍스트 색상 흰색 (안전장치) */
.banner-accordion .panel-content h2,
.banner-accordion .panel-content p, .banner-accordion .panel-content a  {
  color: #fff;
}

.banner-accordion .panel-content h2{font-size:32px; margin:0 !important;}

.banner-accordion .panel-content a{padding:8px 15px; border:2px solid #fff;  border-radius:3px;   font-weight:bold;   text-decoration: none;   } 
a:hover,
a:focus {
  text-decoration: none;
}

#panel01>.bar_{width:100%; height:40px; border-right:1px solid #fff; margin: 30px 0;}
#panel02>.bar_{width:100%; height:40px; border-right:1px solid #fff; margin: 30px 0;}
#panel03>.bar_{width:100%; height:40px; border-left:1px solid #fff; margin: 30px 0;}
#panel04>.bar_{width:100%; height:40px; border-left:1px solid #fff; margin: 30px 0;}

/* ─────────────────────────────────────────────
   배너 내부 진행 바 (Progress Bar)
───────────────────────────────────────────── */
.banner-progress{  position: absolute;
  bottom: 50px;        /* 배너 아래에서 띄울 높이 */
  left: 0;
  width: 100%;
  z-index: 9999;       /* 충분히 큰 값으로 설정 */
  pointer-events: none;/* 클릭 방해 방지 */}

.progress-bar { position: relative;
  z-index: 10000;      /* fill 위, 패널 위 */
  width: 53%;
  height: 6px;
  margin: 0 auto;
  background: rgba(255,255,255,0.3);
  border-radius: 3px;
  overflow: hidden;}

.progress-fill{ width: 0%;
  height: 100%;
  background: #fff;
  transition: width 0.4s ease;}



/* 모바일 레이아웃 */
@media (max-width: 768px) {
  /* 세로 스택, 높이 자동 */
  .banner-accordion {
    flex-direction: column;
    height: auto;
  }

  /* 패널 기본 collapsed 높이 */
  .banner-accordion .panel {
    flex: none;
    height: 60px;
    transition: height 0.4s ease;
  }

  /* 활성 패널은 내용 높이만큼 자동 확장 */
  .banner-accordion .panel.active {
    height: auto;
  }

  /* 콘텐츠 위치 변경 & 패딩 추가 */
  .banner-accordion .panel-content {
    position: static;
    transform: none;
    display: none;
    padding: 16px;
  }
  .banner-accordion .panel.active .panel-content {
    display: block;
  }

    .panel-content {
    margin: 5rem 0;
    }


  /* 배경 이미지는 cover 유지 */
  .banner-accordion .panel {
    background-size: cover;
    background-position: center;
  }

    .banner-accordion .panel:nth-child(1).active .panel-content,
    .banner-accordion .panel:nth-child(2).active .panel-content {
        left: 20%;
        right: auto;
        text-align: left;
    }

    .banner-accordion .panel:nth-child(3).active .panel-content,
    .banner-accordion .panel:nth-child(4).active .panel-content {
        left: 20%;
    }

    #panel01 > .bar_, #panel02 > .bar_ {
        border-right: 0 solid #fff;
        border-left: 1px solid #fff;
    }

    .banner-progress {
    display:none;}
}