header{margin-bottom: 20px;}

/* **********************detail***************************** */
.movie-detail{
  padding: 0 var(--padding-x);
  width: 90%;
  margin: 0 auto;
  margin-bottom: 140px;
}

.movie-detail h1, h2{margin-bottom: 20px;}

.top-section{
  width: 100%;
  /* border: 1px solid red; */
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 40px;
  margin: 0 auto;
  margin-bottom: 30px;
}

.poster{
  width: 300px;
  height: 420px;
  object-fit: cover;
  border-radius: 15px;
}

.movie-info{flex: 1;}
.movie-info-top{margin-bottom: 50px;}
.movie-info p{
  margin-bottom: 20px;
  font-size: 20px;
  font-weight: 400;
}
.movie-info .rating-age.green{
  font-weight: 700;
  color: #00964b;
}
.movie-info .rating-age.yellow{
  font-weight: 700;
  color: #eabc00;
}
.movie-info .rating-age.orange{
  font-weight: 700;
  color: #dc7317;
}
.movie-info .rating-age.red{
  font-weight: 700;
  color: #d92c35;
}

.only.cgv{font-weight: 700; color: #ff0d01;}
.only.mega{font-weight: 700; color: #5c2d91;}
.only.lotte{font-weight: 700; color: #da291c;}

.description, .trailer{margin-bottom: 60px;}

.description{text-align: justify;}

.trailer .video iframe{width: 100%; border-radius: 15px;}
.trailer .video video{border-radius: 15px;}

.gallery{
  width: 100%;
  margin: 0 auto;
  position: relative;
}

/* 슬라이드 */
.gallery .swiper {
  width: 100%;
  height: 440px;
  border-radius: 15px;
}

.gallery .swiper-slide img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: pointer;
}

/* 모달 전체 배경 */
.modal{
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0; top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.8);
  justify-content: center;
  align-items: center;
}

.modal[style*="display: block"] {
  display: flex !important;
}

/* 모달 이미지 */
.modal-content {
  max-width: 90%;
  max-height: 85%;
  width: auto;
  height: auto;
  border-radius: 15px;
  object-fit: contain;
  background-color: #000;
  box-shadow: 0 0 30px rgba(0,0,0,0.5);
}

/* 닫기 버튼 */
.modal-close {
  position: absolute;
  top: 30px;
  right: 35px;
  color: #fff;
  font-size: 40px;
  font-weight: medium;
  cursor: pointer;
}

/*MEDIA QUERIES*/
@media screen and (max-width: 1400px){
  .movie-detail{margin-top: 120px;}
}

@media screen and (max-width: 1200px) {
  .top-section{gap: 30px;}

  .poster{width: 260px; height: 380px;}

  .movie-info p{font-size: 18px;}

  .movie-detail h1{font-size: 30px;}

  .trailer .video iframe{height: 500px;}
}

@media screen and (max-width: 992px){
  .top-section{
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
  }

  .poster{
    width: 100%;
    max-width: 380px;
    height: auto;
    margin: 0 auto 20px;
  }

  .movie-info{width: 100%;}

  .movie-info p{
    font-size: 17px;
    margin-bottom: 15px;
  }

  .trailer .video iframe{height: 420px;}

  .gallery .swiper{height: 360px;}
}

@media screen and (max-width: 768px){
  .movie-detail{padding: 0 20px;}

  .movie-detail h1{font-size: 26px;}

  .movie-info-top{margin-bottom: 30px;}

  .movie-info p{font-size: 16px;}

  .trailer .video iframe{height: 340px;}

  .gallery .swiper{height: 300px;}

  .modal-content{width: 500px;}

  .modal-close{
    right: 20px;
    font-size: 30px;
  }
}

@media screen and (max-width: 575px){
  .top-section {
    gap: 20px;
  }

  .poster {
    width: 90%;
    max-width: 320px;
  }

  .movie-info p {
    font-size: 15px;
  }

  .movie-detail h1 {
    font-size: 22px;
  }

  .description h2,
  .trailer h2,
  .gallery h2 {
    font-size: 18px;
    margin-bottom: 15px;
  }
  .description p{font-size: 14px;}

  .trailer .video iframe {
    width: 100%; height: auto;
  }

  .gallery .swiper {
    width: 100%; height: auto;
  }

  .swiper .swiper-button-next,
  .swiper .swiper-button-prev{
    font-size: 2px;
  }
}