/**
 * 교정 / 심미보철 페이지 — page-templates/template-ortho.php · sections/ortho/
 */

#ortho-page {
  --ortho-num: #a5b4d1;
  --ortho-box: #ccdef4;
  --ortho-en : #bed6ee;
}


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

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

#ortho-page .sec-clear01 .sec-hd,
#ortho-page .sec-esth .sec-hd {
  padding-bottom: var(--one-space-r);
}

#ortho-page .ortho-lead {
  margin-bottom: var(--one-space-lg);
}


/* ============================
   clear01 — 투명교정 카드
============================ */

#ortho-page .sec-clear01 .con-inner {
  padding-bottom: var(--one-space-r);
}

#ortho-page .clear-lst {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: var(--one-space-xl);
  row-gap: var(--one-space-s);
}

#ortho-page .clear-item .clear-img {
  display: block;
  width: 100%;
  max-width: 541px;
}

#ortho-page .clear-body {
  display: flex;
  flex-direction: column;
  gap: var(--one-gap-r);
  padding: var(--one-gap-xl) var(--one-gap-r) 0;
}

#ortho-page .clear-desc {
  margin-top: var(--one-gap-r);
}


/* ============================
   clear02 — 투명교정 장점
============================ */

#ortho-page .sec-clear02 {
  background-color: var(--sub-color02);
}

/* 목록이 40em 아래로 줄면 줄바꿈되어 타이틀 아래로 내려간다 */
#ortho-page .merit-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--one-space-s);
}

#ortho-page .merit-wrap .sec-hd {
  flex: none;
  padding-bottom: 0;
}

#ortho-page .merit-wrap .sec-body {
  flex: 1 1 40em;
}

#ortho-page .merit-lst {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: calc(var(--one-gap-r) + var(--one-gap-xs)) var(--one-gap-r);
}

#ortho-page .merit-item {
  display: flex;
  align-items: center;
  padding: calc(var(--one-gap-r) + var(--one-gap-xs));
  border-radius: 10px;
  background-color: var(--ortho-box);
}


/* ============================
   esth — 심미보철 (이미지 + 체크 항목)
============================ */

#ortho-page .sec-esth .con-inner {
  padding: var(--one-space-xl) 0;
}

#ortho-page .esth-lst {
  display: flex;
  flex-direction: column;
  gap: calc(var(--one-space-r) + var(--one-gap-r));
}

#ortho-page .esth-item {
  display: grid;
  grid-template-columns: min(514px, 45%) 1fr;
  align-items: center;
  column-gap: min(var(--one-space-lg), 8%);
}

#ortho-page .esth-item .esth-img {
  display: block;
  width: 100%;
  max-width: 514px;
}

#ortho-page .esth-tit {
  --one-check-icon: var(--one-icon-l);
}

#ortho-page .esth-en {
  margin-left: var(--one-gap-sm);
  color: var(--ortho-en);
  font-style: italic;
  font-weight: 500;
}

#ortho-page .esth-desc {
  margin-top: var(--one-gap-r);
}


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

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

  #ortho-page .clear-lst {
    column-gap: var(--one-space-s);
  }

  #ortho-page .esth-item {
    grid-template-columns: 45% 1fr;
    column-gap: var(--one-space-s);
  }

}


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

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

  #ortho-page .clear-lst {
    grid-template-columns: 1fr;
    row-gap: var(--one-space-r);
  }

  #ortho-page .clear-body {
    padding: var(--one-gap-lg) 0 0;
  }

  #ortho-page .merit-lst {
    grid-template-columns: 1fr;
  }

  #ortho-page .esth-item {
    grid-template-columns: 1fr;
    row-gap: var(--one-gap-xl);
  }

}