/* main. css 2025-04-09*/

:root{
  /* 텍스트크기 */
  --text_size12:12px;
  --text_size16:16px;
  --text-size20:20px;

  /* 폰트 */
  --text_style:"Noto Sans KR";
  --title_text_style:"Anton";

  /* 컬러 */
  --main_color1:#ED1C24;
  --main_color2:#fff;
  --sub_color1:#C6A86B;
  --sub_color2:#c0c0c0;
  --text_color:#333;
}

/* 폰트 */
/* 노토 산스 kr */
@import url('https://fonts.googleapis.com/css2?family=Anton&family=Noto+Sans+KR:wght@100..900&display=swap');

/* 나눔고딕 */
@import url('https://fonts.googleapis.com/css2?family=Anton&family=Nanum+Gothic&family=Noto+Sans+KR:wght@100..900&display=swap');

/* 안톤  */
@import url('https://fonts.googleapis.com/css2?family=Anton&display=swap');


/* showing_start */
#showing {
  width: 1200px;
  margin: 100px auto 100px; /* 상단 여백을 300px로 조정 (필요에 따라 조절) */
  text-align: center;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* "Now Showing" 제목은 슬라이드 트랙 위에 위치 */
#showing h2 {
  font-size: 30px; /* 변수 미정의 시 20px 적용 */
  color: #fff;
  font-weight: bold;
  font-family: var(--text_style, "Noto Sans KR"), sans-serif;
  margin-bottom: 50px;
}

/* 슬라이드 트랙(컨테이너): 너비 1200px, 높이 600px, 중앙 정렬 및 아래쪽 여백 확보 */
#showing .showing-track {
  width: 1200px;
  height: 600px;
  position: relative;
  overflow: visible;   /* 양옆 슬라이드가 겹쳐서 보이도록 */
}

/* 개별 슬라이드의 기본 스타일 */
#showing .slide {
  position: absolute;
  top: 50%;             /* 수직 중앙 (이미지의 중심 기준) */
  left: 50%;            /* 수평 중앙에서 시작 */
  transform-origin: center bottom;
  transition: all 0.6s ease;
  opacity: 0;
  z-index: 1;
}

/* 가운데(현재 선택된) 슬라이드 */
#showing .slide.center {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
  z-index: 5;
}

/* 왼쪽 첫번째 슬라이드 */
#showing .slide.left1 {
  transform: translate(-130%, -50%) scale(0.8);
  opacity: 1;
  z-index: 4;
}

/* 왼쪽 두번째 슬라이드 */
#showing .slide.left2 {
  transform: translate(-230%, -50%) scale(0.6);
  opacity: 1;
  z-index: 3;
}

/* 오른쪽 첫번째 슬라이드 */
#showing .slide.right1 {
  transform: translate(30%, -50%) scale(0.8);
  opacity: 1;
  z-index: 4;
}

/* 오른쪽 두번째 슬라이드 */
#showing .slide.right2 {
  transform: translate(130%, -50%) scale(0.6);
  opacity: 1;
  z-index: 3;
}

/* 각 슬라이드 내 이미지 크기 */
#showing .slide.center img {
  width: 400px;   /* 가운데 슬라이드 이미지: 400×570 */
  height: 570px;
}
#showing .slide.left1 img,
#showing .slide.right1 img {
  width: 317px;   /* 양쪽 첫번째: 317×451 */
  height: 451px;
}
#showing .slide.left2 img,
#showing .slide.right2 img {
  width: 230px;   /* 양쪽 두번째: 230×327 */
  height: 327px;
}

/* 하단 컨트롤바: 슬라이드 트랙 아래에 위치 */
#showing .slide-control {
  margin-top: 50px; /* 슬라이드 트랙과 컨트롤바 사이 간격 */
  display: flex;
  justify-content: center;
  gap: 10px;
}

/* 각 컨트롤바 (막대) 스타일 */
#showing .slide-control .bar {
  width: 50px;
  height: 5px;
  background: var(--sub_color2, #c0c0c0);
  cursor: pointer;
  border-radius: 2px;
  transition:0.3s;
}
#showing .slide-control .bar.active {
  background: var(--sub_color1, #C6A86B);
}
/* showing_end */


/* =========================================
  태블릿 환경 (min-width: 768px, max-width: 1023px)
   ========================================= */
  @media screen and (min-width: 768px) and (max-width: 1024px) {
    #showing {
      width: 100%;
      margin: 70px auto 100px; /* 다소 줄인 상단 여백 */
    }
    /* 슬라이드 트랙 너비를 화면 너비에 맞춤 */
    #showing .showing-track {
      width: 100%;
      height: 500px;
      overflow-x: hidden;
    }
    #showing .slide.center img {
      width: 320px;
      height: 457px;
    }
    #showing .slide.left1 img,
    #showing .slide.right1 img {
      width: 250px;
      height: 354px;
    }
    #showing .slide.left2 img,
    #showing .slide.right2 img {
      width: 180px;
      height: 256px;
    }
  }
  
  /* =========================================
    모바일 환경 (max-width: 767px)
     ========================================= */
  @media screen and (max-width: 767px) {
    #showing {
      width: 100%;
      margin: 200px auto 0;
      height: 500px;
    }
    /* 모바일에서는 슬라이드 트랙도 화면 너비에 꽉 차도록 */
    #showing .showing-track {
      width: 100%;
      height: 250px;
      overflow: hidden;
    }
    /* 이미지 크기는 더 작게 */
    #showing .slide.center img {
      width: 200px;
      height: 285px;
    }
    #showing .slide.left1 img,
    #showing .slide.right1 img {
      width: 150px;
      height: 228px;
    }
    /* 모바일에서는 3개 사진(중앙, 좌, 우) 중심으로 배치하도록 transform값 조정 */
    #showing .slide.center {
      transform: translate(-50%, -50%) scale(1);
    }
    #showing .slide.left1 {
      transform: translate(-150%, -60%) scale(0.8);
    }
    #showing .slide.left2 {
      display: none; /* 3개만 보이도록 숨김 */
    }
    #showing .slide.right1 {
      transform: translate(50%, -60%) scale(0.8);
    }
    #showing .slide.right2 {
      display: none;
    }
       /* 컨트롤 바 크기 조정 */
  #showing .slide-control .bar {
    width: 2.5rem; /* 40px ≒ 2.5rem */
    height: 0.5rem; /* 4px ≒ 0.25rem */
  }
  
  /* 모바일에서는 컨트롤바 3개만 보이도록 */
  #showing .slide-control .bar:nth-child(n+4) {
    display: none;
  }
  }