/* 1023px 이하 — 메인 */
@media all and (max-width: 1023px) {

  /* ── 진료 안내 네 칸 ──────────────────────────────────────
     한 줄 고정 높이 안에 네 칸이 세로로 쌓여 아래 섹션 밑으로 파고든다.
     두 칸씩 두 줄로 놓고 높이를 칸이 정하게 한다. */
  html body #wrap #section03 .boxes {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 0 !important;
    width: 100% !important;
    height: auto !important;
  }
  html body #wrap #section03 .boxes .box {
    width: auto !important;
    height: clamp(210px, 58vw, 380px) !important;
    background-size: cover;
    background-position: center;
  }
  html body #wrap #section03 .boxes .box > a div {
    bottom: 14px;
    width: calc(100% - 24px);
    max-width: 195px;
    height: 44px;
    gap: 6px !important;
    flex-wrap: nowrap !important;
  }
  html body #wrap #section03 .boxes .box > a div p {
    font-size: 15px !important;
    line-height: 44px !important;
    margin: 0;
    white-space: nowrap;
  }
  html body #wrap #section03 .boxes .box > a div img {
    width: 8px !important;
    height: auto !important;
    flex: 0 0 auto;
  }
  html body #wrap #section03 {
    padding-bottom: 0 !important;
  }
  html body #wrap #section03 .container h1,
  html body #wrap #section03 .container p {
    word-break: keep-all;
  }

  /* ── 송도·디지털 장비 섹션 ─────────────────────────────────
     PC 의 좌우 두 칸과 오른쪽 여백 245px 가 남아 제목 칸이 40~110px 로 좁아져
     한 글자씩 내려앉는다. 한 줄로 쌓고 배경 사진을 칸에 맞춰 깐다. */
  html body #wrap #section04 {
    background-color: #1c2230;
    background-size: cover;
    background-position: 30% top;
  }
  html body #wrap #section04 > .container {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  html body #wrap #section04 .container > div:not(.swiper) {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    padding-right: 0 !important;
    gap: 16px !important;
  }
  html body #wrap #section04 .container > div:nth-of-type(1) {
    margin-bottom: 40px !important;
  }
  html body #wrap #section04 .container > div > div {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 auto !important;
    padding: 0 !important;
  }
  html body #wrap #section04 .container > div:nth-of-type(1) img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 754 / 460;
    object-fit: cover;
  }
  html body #wrap #section04 .container h1 {
    margin-bottom: 14px !important;
    padding-top: 0 !important;
    word-break: keep-all;
  }
  html body #wrap #section04 .container h1 span {
    font-size: inherit !important;
    line-height: inherit !important;
    letter-spacing: -0.03em;
  }
  html body #wrap #section04 .container h6 {
    word-break: keep-all;
    margin: 0 !important;
  }
  html body #wrap #section04 .container h6 br {
    display: none;
  }
  html body #wrap #section04 .container .img30 {
    height: auto !important;
  }
  html body #wrap #section04 .container .img30 img {
    width: 150px !important;
    height: auto !important;
  }
  html body #wrap #section04 .container .mySwiper2 {
    margin-top: 16px !important;
  }
  html body #wrap #section04 .container .tab {
    margin-top: 28px !important;
  }
  html body #wrap #section04 .container .tab .tab-wrapper {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    gap: 8px !important;
  }
  html body #wrap #section04 .container .tab .tab-wrapper > button {
    width: 100% !important;
    height: auto !important;
    min-height: 44px !important;
    padding: 10px 16px !important;
    font-size: 15px !important;
    line-height: 1.4 !important;
    white-space: normal !important;
    word-break: keep-all;
    flex: 0 0 auto !important;
  }

  /* ── 진료과목 ─────────────────────────────────────────────
     한 화면에 일곱 칸을 넣어 칸 폭이 40px 가 된다. 칸 수는 스크립트가 줄이고
     여기서는 높이와 여백만 맞춘다. */
  html body #wrap #section08 {
    padding: 56px 0 48px !important;
  }
  html body #wrap #section08 > div:first-child {
    margin-bottom: 28px !important;
    padding: 0 20px;
  }
  html body #wrap #section08 h6 {
    word-break: keep-all;
  }
  html body #wrap #section08 .mySwiper6 {
    padding-bottom: 24px !important;
  }
  html body #wrap #section08 .swiper-slide {
    height: clamp(220px, 62vw, 320px) !important;
  }
  html body #wrap #section08 .swiper-slide img {
    height: 100% !important;
    object-fit: cover;
  }
  html body #wrap #section08 .slide-overlay h5 {
    font-size: 17px !important;
    line-height: 1.4 !important;
    word-break: keep-all;
    text-align: center;
    padding: 0 8px;
  }
  html body #wrap #section08 .custom-line-pagination {
    width: calc(100% - 40px) !important;
    margin: 0 20px !important;
    height: 4px !important;
  }

  /* ── 둘러보기 ─────────────────────────────────────────────
     PC 의 위아래 여백과 고정 높이가 남아 사진 위아래가 비어 있다. */
  html body #wrap #section09 {
    padding: 56px 0 40px !important;
  }
  html body #wrap #section09 > div:first-child {
    margin-bottom: 24px !important;
    padding: 0 20px;
  }
  html body #wrap #section09 h6 {
    margin-bottom: 0 !important;
    word-break: keep-all;
  }
  html body #wrap #section09 .swiper-slide {
    aspect-ratio: 2 / 1;
  }
  html body #wrap #section09 .swiper-slide img {
    height: 100% !important;
    object-fit: cover;
  }
  html body #wrap #section09 .tour-tabs {
    margin-top: 16px !important;
  }

  /* 선택지 안내 상자 — 좁은 기둥을 풀고 세로로 쌓는다 */
  #wrap #section02 .container .box {
    width: auto !important;
    padding: 10px !important;
  }
  #wrap #section02 .container .box div {
    width: auto !important;
    height: auto !important;
    padding: 24px 16px !important;
    flex-direction: column !important;
    gap: 12px !important;
    text-align: center;
  }
  #wrap #section02 .container > h1,
  #wrap #section02 .container > h5 {
    word-break: keep-all;
  }
  #wrap #section02 .container .box div h2 {
    font-size: 24px !important;
    line-height: 1.45 !important;
    word-break: keep-all;
  }
  #wrap #section02 .container .box div p {
    font-size: 15px !important;
    line-height: 1.7 !important;
    word-break: keep-all;
  }
}