/**
 * 임플란트 / 틀니 페이지 — page-templates/template-impl.php · sections/impl/
 */

#impl-page {
  --impl-num: #a5b4d1;
}


/* ============================
   공통 — 번호 + 타이틀 헤더
============================ */

#impl-page .tit-num {
  display: block;
  margin-bottom: var(--one-gap-sm);
  color: var(--impl-num);
}


/* ============================
   impl01 — 임플란트 소개 밴드
============================ */

#impl-page .sec-impl01 {
  background-color: var(--sub-color01);
  background-image: url(../images/impl/01.jpg);
}

#impl-page .sec-impl01 .con-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--one-space-s);
  padding: var(--one-space-r) 0;
}

#impl-page .sec-impl01 .sec-hd {
  padding-bottom: var(--one-gap-xl);
}

#impl-page .impl-txt p {
  text-wrap: balance;
}

#impl-page .impl-sub {
  margin-top: var(--one-gap-sm);
}

#impl-page .sec-impl01 .impl-img {
  flex: none;
  width: 397px;
  max-width: 40%;
}


/* ============================
   impl02 — 장점 (체크 소제목 + 알약 박스)
============================ */

#impl-page .sec-impl02 {
  background-color: var(--gray-color03);
}

#impl-page .merit-lst {
  display: flex;
  flex-direction: column;
  gap: calc(var(--one-gap-xl) * 2);
}

#impl-page .merit-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--one-gap-sm);
}

/* 내어쓰기 아이콘이 글 바로 앞에 붙도록 글 폭만큼만 차지한다 */
#impl-page .merit-tit {
  --one-check-icon: var(--one-icon-xl);
  display: inline-block;
  text-align: left;
}

/* em 기준 — 본문 크기를 따라 폭이 늘어난다 */
#impl-page .merit-desc {
  width: 100%;
  max-width: 44em;
  padding: var(--one-gap-r) var(--one-space-s);
  border-radius: 999px;
  background-color: var(--white-color);
  text-wrap: balance;
}


/* ============================
   dntr01 — 틀니치료 소개
============================ */

#impl-page .sec-dntr01 .con-inner {
  padding-bottom: var(--one-space-s);
}

#impl-page .sec-dntr01 .sec-hd {
  padding-bottom: var(--one-space-r);
}

#impl-page .dntr-desc {
  margin-top: var(--one-gap-xl);
  text-wrap: balance;
}

#impl-page .sec-dntr01 .dntr-img {
  display: block;
  width: 443px;
  max-width: 80%;
  margin: var(--one-gap-r) auto 0;
}


/* ============================
   dntr02 — 1:1 맞춤 제작 밴드
============================ */

#impl-page .sec-dntr02 {
  background-color: var(--sub-color02);
  background-image: url(../images/impl/04.jpg);
}

#impl-page .sec-dntr02 .con-inner {
  min-height: 350px;
}

/* 14.5em = 가장 긴 줄 폭 — 좁아지면 왼쪽으로 물러난다 */
#impl-page .dntr-band {
  margin-left: min(58%, 100% - 14.5em);
}


/* ============================
   반응형 — 태블릿 (max-width: 1024px)
============================ */

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

  #impl-page .sec-impl01 .con-inner {
    flex-direction: column;
    align-items: flex-start;
  }

  #impl-page .sec-impl01 .impl-img {
    align-self: center;
    max-width: 70%;
  }

  #impl-page .sec-dntr02 {
    background-position: 45% center;
  }

  #impl-page .sec-dntr02 .con-inner {
    min-height: 0;
  }

  #impl-page .dntr-band {
    margin-left: 50%;
  }

}


/* ============================
   반응형 — 모바일 (max-width: 639px)
============================ */

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

  #impl-page .merit-desc {
    padding: var(--one-gap-r) var(--one-gap-lg);
    border-radius: var(--one-gap-xl);
  }

  /* 사진 쪽을 피해 오른쪽 여백 부분에 글을 얹는다 */
  #impl-page .sec-dntr02 {
    background-position: right center;
  }

  #impl-page .dntr-band {
    margin-left: 0;
    text-align: center;
  }

}