/* ============================================================
   일산병원 <문안> INDEX 하단 메뉴 반응형 보정
   - 메인 슬라이드 / 서브페이지 CSS와 분리
   - PC 기본(1600px 이상), 모바일(767px 이하) 기존 디자인 유지
   ============================================================ */

/* 1101~1599px : PC 4열/3열 유지하면서 너비와 높이를 함께 축소 */
@media screen and (min-width: 1101px) and (max-width: 1599px) {

  /* style.css의 7.5rem 컨테이너 패딩을 메뉴 영역에서만 제거 */
  section.section1 > .container,
  section.section2 > .container,
  section.section3 > .container {
    box-sizing: border-box;
    width: 100% !important;
    max-width: 1520px !important;
    margin: 0 auto !important;
    padding: 0 20px !important;
  }

  /* 고정 1480px 대신 부모 폭 안에서 함께 줄어들게 */
  section.section1 .wrapper_menu,
  section.section2 .wrapper_menu,
  section.section3 .wrapper_menu {
    box-sizing: border-box;
    width: 100% !important;
    max-width: 1480px;
    min-width: 0;
    margin: 0 auto;
  }

  /* 메뉴 1, 3, 5 : 4개를 항상 한 줄에 배치 */
  section.section1 .health-zip-list,
  section.section3 .health-zip-list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: 24px;
    row-gap: 24px;
  }

  section.section1 .health-zip-swiper-wrap,
  section.section3 .health-zip-swiper-wrap,
  section.section1 .health-zip-section,
  section.section3 .health-zip-section {
    min-width: 0;
    width: 100%;
  }

  section.section1 .health-card,
  section.section3 .health-card {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    height: auto;
    aspect-ratio: 1 / 1;
  }

  section.section1 .health-card-img,
  section.section3 .health-card-img {
    width: 100%;
    height: 100%;
  }

  section.section1 .health-card-img img,
  section.section3 .health-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  section.section1 .health-card-text,
  section.section3 .health-card-text {
    padding: clamp(14px, 1.3vw, 21px) clamp(11px, 1.25vw, 20px)
             clamp(10px, 1vw, 15px);
    max-height: clamp(55px, 4.4vw, 70px);
  }

  section.section1 .health-card-title,
  section.section3 .health-card-title {
    font-size: clamp(23px, 2vw, 32px);
  }

  section.section1 .health-card-detail p,
  section.section3 .health-card-detail p {
    font-size: clamp(15px, 1.2vw, 19px);
  }

  section.section1 .health-card-footer .read-btn,
  section.section3 .health-card-footer .read-btn {
    font-size: clamp(14px, 1.06vw, 17px);
  }

  section.section1 .health-card:hover .health-card-text,
  section.section3 .health-card:hover .health-card-text {
    max-height: min(220px, 90%);
  }

  /* 메뉴 2 : 기존 인터뷰 카드 hover 확장 유지 */
  section.section2 .exp-cards,
  section.section2 .exp-card,
  section.section2 .exp-card-media {
    min-width: 0;
  }

  section.section2 .exp-cards {
    width: 100%;
    height: clamp(340px, 26vw, 390px);
  }

  section.section2 .exp-card-inner {
    padding: 18px 19px 20px;
  }

  section.section2 .exp-card-media .exp-media-title {
    font-size: clamp(24px, 2vw, 32px);
  }

  section.section2 .exp-card-title {
    font-size: clamp(20px, 1.6vw, 26px);
  }

  section.section2 .exp-card-text {
    font-size: clamp(14px, 1.05vw, 17px);
    line-height: 1.4;
  }

  section.section2 .exp-card-text1 {
    font-size: clamp(14px, 1.1vw, 18px);
    margin-bottom: 18px;
  }

  section.section2 .exp-card-link {
    font-size: clamp(14px, 1.08vw, 18px);
  }

  /* 메뉴 4 : 482px 고정 카드 3장을 같은 비율로 축소 */
  section.section4 .card-container {
    box-sizing: border-box;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 17px;
    width: calc(100% - 40px);
    max-width: 1480px;
    margin: 0 auto;
    padding: 0;
  }

  section.section4 .card-wrapper {
    min-width: 0;
    width: 100%;
    height: auto;
  }

  section.section4 .card {
    width: 100%;
    height: auto;
    aspect-ratio: 482 / 400;
  }

  section.section4 .card-image {
    height: 83%;
    object-fit: cover;
  }

  section.section4 .card-title-front {
    box-sizing: border-box;
    height: 17%;
    padding: 0;
    font-size: clamp(25px, 2vw, 32px);
  }

  section.section4 .card-back {
    padding: clamp(14px, 1.55vw, 25px);
  }

  section.section4 .back-badge {
    font-size: clamp(20px, 1.7vw, 27px);
    margin-bottom: 10px;
  }

  section.section4 .back-title {
    font-size: clamp(18px, 1.55vw, 25px);
  }

  section.section4 .back-content {
    font-size: clamp(13px, 1.1vw, 18px);
    line-height: 1.48;
    margin-bottom: 10px;
  }

  section.section4 .back-button {
    font-size: clamp(14px, 1.16vw, 19px);
    padding: 9px 14px;
  }
}

/* 768~1100px : 기존 태블릿 구간에도 1480px 고정 너비가 남지 않도록 보정 */
@media screen and (min-width: 768px) and (max-width: 1100px) {
  section.section1 > .container,
  section.section2 > .container,
  section.section3 > .container {
    box-sizing: border-box;
    width: 100% !important;
    max-width: none !important;
    margin: 0 auto !important;
    padding: 0 16px !important;
  }

  section.section1 .wrapper_menu,
  section.section2 .wrapper_menu,
  section.section3 .wrapper_menu {
    box-sizing: border-box;
    width: 100% !important;
    max-width: none;
    min-width: 0;
    margin: 0 auto;
  }

  section.section1 .health-zip-list,
  section.section3 .health-zip-list,
  section.section3.mb70 .health-zip-list {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px !important;
  }

  section.section1 .health-card,
  section.section3 .health-card {
    width: 100% !important;
    min-width: 0;
    height: auto;
    aspect-ratio: 1.3 / 1;
  }

  section.section1 .health-card-img,
  section.section3 .health-card-img {
    width: 100%;
    height: 100%;
  }

  section.section1 .health-card-img img,
  section.section3 .health-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

/* 768~991px : 인터뷰 카드가 세로 flex 안에서 50% 너비로 깨지는 것 방지 */
@media screen and (min-width: 768px) and (max-width: 991px) {
  section.section2 .exp-cards {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    height: auto;
    min-height: 0;
    gap: 16px;
  }

  section.section2 .exp-cards .exp-card,
  section.section2 .exp-cards:hover .exp-card {
    flex: 0 0 calc((100% - 16px) / 2) !important;
    width: calc((100% - 16px) / 2) !important;
    aspect-ratio: 1.3 / 1;
    margin: 0;
  }

  section.section2 .exp-card-media,
  section.section2 .exp-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

/* 992~1100px : 인터뷰 카드 호버 내용의 고정 폰트 때문에 높이를 넘지 않도록 */
@media screen and (min-width: 992px) and (max-width: 1100px) {
  section.section2 .exp-card,
  section.section2 .exp-card-media { min-width: 0; }
  section.section2 .exp-card-inner { padding: 18px 19px 20px; }
  section.section2 .exp-card-title { font-size: 20px; }
  section.section2 .exp-card-text { font-size: 14px; line-height: 1.4; }
  section.section2 .exp-card-text1 { font-size: 14px; margin-bottom: 18px; }
  section.section2 .exp-card-link { font-size: 14px; }
  section.section2 .exp-card-media .exp-media-title { font-size: 24px; }
}