/**
 * 미세현미경 수술 페이지 — page-templates/template-micro.php · sections/micro/
 */

#micro-page {
  --micro-num: #a5b4d1;
  --micro-intro-w: min(500px, 42%);
  --micro-proc-w: 320px;
}


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

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

#micro-page .sec-apex .sec-hd,
#micro-page .sec-repl .sec-hd {
  gap: var(--one-gap-xl);
  padding-bottom: var(--one-space-r);
}


/* ============================
   intro01 — 소개 밴드
============================ */

#micro-page .sec-intro01 {
  overflow: hidden;
  background-color: var(--sub-color01);
  background-image: url(../images/micro/01.jpg);
  background-position: center bottom;
}

#micro-page .sec-intro01 .con-inner {
  display: flex;
  align-items: center;
  min-height: 452px;
  padding: var(--one-space-s) 0;
}

/* 이미지 왼쪽 7% 는 투명 — 글 폭은 이미지가 실제로 보이는 곳까지 */
#micro-page .intro-txt {
  position: relative;
  z-index: 1;
  max-width: calc(100% - var(--micro-intro-w) * 0.93);
  font-size: var(--one-p-tit);
  line-height: 1.7;
}

/* absolute 라 transform 애니메이션을 붙이지 않는다 */
#micro-page .sec-intro01 .intro-img {
  position: absolute;
  right: max(-33px, (100% - 100vw) / 2);
  bottom: 16px;
  width: var(--micro-intro-w);
}


/* ============================
   intro02 — x25 확대 효과
============================ */

#micro-page .sec-intro02 {
  background-color: var(--gray-color03);
  background-image: url(../images/micro/03.jpg);
}

#micro-page .sec-intro02 .con-inner {
  padding-bottom: var(--one-space-xl);
}

#micro-page .sec-intro02 .zoom-img {
  width: 895px;
  max-width: 100%;
}

#micro-page .zoom-txt {
  margin-top: calc(var(--one-gap-xl) * 2);
  text-wrap: balance;
}


/* ============================
   proc-lst — 사진 + STEP 박스
============================ */

#micro-page .proc-lst {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--one-gap-lg);
}

#micro-page .proc-item {
  display: flex;
  flex-direction: column;
}

#micro-page .proc-item .proc-img {
  display: block;
  width: 100%;
}

#micro-page .proc-box {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--one-gap-r);
  padding: var(--one-gap-xl) var(--one-gap-r);
  background-color: var(--sub-color02);
}

#micro-page .proc-desc {
  text-wrap: balance;
}


/* ============================
   apex — 치근단 절제술
============================ */

#micro-page .sec-apex .con-inner {
  padding-bottom: calc(var(--one-space-lg) * 1.5);
}


/* ============================
   repl — 치아 재식술
============================ */

#micro-page .sec-repl {
  background: var(--sub-color02) url(../images/micro/14.jpg) no-repeat right bottom / cover;
}

#micro-page .sec-repl .con-inner {
  padding-bottom: calc(var(--one-space-lg) * 1.5);
}

/* 6칸 그리드에 2칸씩 — 첫 줄 2개를 반 칸 밀어 위 2 · 아래 3 으로 엇갈린다 */
#micro-page .sec-repl .proc-lst {
  grid-template-columns: repeat(6, 1fr);
  column-gap: calc(var(--one-gap-xl) + var(--one-gap-lg));
  row-gap: var(--one-space-s);
  max-width: 958px;
  margin: 0 auto;
}

#micro-page .sec-repl .proc-item {
  grid-column: span 2;
}

#micro-page .sec-repl .proc-item:nth-child(1) {
  grid-column: 2 / span 2;
}

#micro-page .sec-repl .proc-item:nth-child(2) {
  grid-column: 4 / span 2;
}

#micro-page .sec-repl .proc-box {
  gap: var(--one-gap-sm);
  padding-top: var(--one-gap-lg);
  padding-bottom: var(--one-gap-lg);
  background-color: var(--white-color);
}


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

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

  #micro-page .sec-intro01 .con-inner {
    flex-direction: column;
    gap: var(--one-gap-xl);
    min-height: 0;
    padding: var(--one-space-r) 0 var(--one-gap-xl);
    text-align: center;
  }

  #micro-page .intro-txt {
    max-width: none;
  }

  #micro-page .sec-intro01 .intro-img {
    position: static;
    width: 400px;
    max-width: 80%;
  }

  #micro-page .proc-lst,
  #micro-page .sec-repl .proc-lst {
    grid-template-columns: repeat(2, minmax(0, var(--micro-proc-w)));
    justify-content: center;
    gap: var(--one-gap-lg);
  }

  #micro-page .sec-repl .proc-item,
  #micro-page .sec-repl .proc-item:nth-child(1),
  #micro-page .sec-repl .proc-item:nth-child(2) {
    grid-column: auto;
  }

  /* 홀수 개일 때 마지막 카드는 가운데 */
  #micro-page .sec-repl .proc-item:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc((100% - var(--one-gap-lg)) / 2);
  }

}


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

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

  #micro-page .proc-box {
    padding: var(--one-gap-lg) var(--one-gap-sm);
  }

}