@charset "utf-8";
/* 폰 화면 3-2차 수정 — 767px 이하에서만 동작한다. 768px 이상은 이 파일이 비어 있는 것과 같다.
   세로 리듬 공통 규칙(m-rhythm.css) 뒤에 읽혀, 그 위에 구역별 마무리만 얹는다.
   옛 CSS·HTML 은 한 줄도 고치지 않는다. */

@media all and (max-width: 767px) {

  /* ── 1. 임플란트 배경 그림 — 가로세로를 칸에 억지로 늘리던 것을 비율대로 채운다 ──
     1920×1476 그림을 390×1600 칸에 100% 100% 로 늘리면 가로만 5배 눌려 형체가 사라진다.
     다른 지면은 원래 contain 으로 그림 전체를 보여 주는 칸이 있어 건드리지 않는다. */
  html body #digital [id^="section"] > div[style*="background-image"],
  html body #digital [id^="section"][style*="background-image"] {
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
  }

  /* ── 2. 구역을 잇는 세로 장식선 — 폰에서는 빈 칸에 홀로 남는다 ── */
  html body div[id] [id^="section"] > em[style*="position:absolute"],
  html body div[id] [id^="section"] > em[style*="position: absolute"] {
    display: none !important;
  }

  /* ── 3. 테두리 상자 — PC 고정 높이를 풀고 안쪽 여백을 한 벌로 맞춘다 ──
     높이를 박아 두어 글 몇 줄짜리 상자가 화면 절반을 먹던 구역만 고른다.
     폭은 건드리지 않는다(폭을 풀면 상자가 글 길이만큼 줄어든다). */
  html body :is(#ddc #section02, #ddc #section07, #mise #section06, #mise #section12, #smart #section09) :is(.box, .textBox) {
    height: auto !important;
    min-height: 0 !important;
    padding: 16px 14px !important;
  }
  html body :is(#ddc #section02, #ddc #section07, #mise #section06, #mise #section12, #smart #section09) .boxes {
    gap: 10px !important;
  }

  /* ── 3-1. 오른쪽 아이콘이 붙은 글 상자 — 높이 200px 를 글 높이로 줄이고 아이콘은 오른쪽 가운데에 둔다 ──
     아이콘 자리(오른쪽 96px)를 비워 두어 글과 겹치지 않는다. */
  html body :is(#child #section02, #mise #section14, #digital #section10) .box {
    height: auto !important;
    min-height: 96px !important;
    padding: 18px 104px 18px 20px !important;
  }
  html body :is(#child #section02, #mise #section14, #digital #section10) .box .position-absolute {
    top: 50% !important;
    bottom: auto !important;
    right: 16px !important;
    transform: translateY(-50%) !important;
  }

  /* ── 4. 사진 바로 아래 설명 — 사진에 붙인다 ──
     PC 값(39px)이 폰에서 사진과 제목을 떼어 놓아 한 덩이로 안 읽혔다. */
  html body div[id] [id^="section"] .boxes .box :is(h4, h5, h6) {
    margin-top: 10px !important;
    margin-bottom: 6px !important;
  }
  html body div[id] [id^="section"] .boxes .box img + :is(h4, h5, h6, p) {
    margin-top: 10px !important;
  }
  html body div[id] [id^="section"] .boxes .box > img:has(+ :is(h4, h5, h6)) {
    margin-bottom: 0 !important;
  }

  /* ── 5. 소아 — 성장기 교정이 필요한 경우 세 칸 ──
     아이콘과 글을 가로로 눕혀 한 칸을 240px 에서 두 줄 높이로 줄인다. */
  html body #child #section04 .container .boxes {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
  }
  html body #child #section04 .container .boxes .box {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    flex-direction: row !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 14px !important;
    padding: 14px 16px !important;
  }
  html body #child #section04 .container .boxes .box img {
    width: 34px !important;
    flex: 0 0 34px;
  }
  html body #child #section04 .container .boxes .box p {
    font-size: 15px !important;
    line-height: 1.5 !important;
    text-align: left !important;
    letter-spacing: -0.02em !important;
  }

  /* ── 6. 소아 — 두 교정장치 그림의 줄맞춤본 ──
     그림 안에서 설명 두 줄의 높이가 서로 47px 어긋나 있었다. 폰에서만 맞춘 판을 쓴다. */
  html body #child #section06 .container img[src*="childSect06Img"] {
    content: url("/img/childSect06Img-m.webp") !important;
  }

  /* ── 7. 상자 «안»의 고정 높이 칸 ──
     PC 에서 450px 로 박아 둔 사진 칸이 폰에서는 작은 사진 하나에 빈 회색 판으로 남는다. */
  html body div[id] [id^="section"] .boxes .box > div {
    height: auto !important;
    min-height: 0 !important;
  }

  /* ── 8. 13px 미만 글자 — 폰에서 읽히는 하한으로 올린다 ── */
  html body #wrap #section01 .swiper-slide > div h4,
  html body #wrap #section05 .container .m-doclist :is(em, span),
  html body :is(#smart, #child, #oneday, #mise, #digital) [id^="section"]:not(#_x):not(#_y) .overlay > a > p,
  html body #introduce2 #section01 #tab1 .container .media .swiper-slide span,
  html body #ddc [id^="section"]:not(#_x):not(#_y) .overlay p {
    font-size: 13px !important;
  }
}