@charset "utf-8";

/* ============================================================
   gen.css — 일반진료
   대응 마크업 : sections/gen/ · page-templates/template-gen.php
   ============================================================ */

#gen-page {
  --gen-num: #a7b8d2;           /* 진료 번호 */
  --gen-sub: #0f579f;           /* 진료 부제 */
  --gen-card: #ccdef4;          /* 사랑니 카드 배경 */
  --gen-faq-on: #69a0e1;        /* 열린 질문 */
  --gen-radius: 20px;
  --gen-card-radius: 40px;
  --gen-perio-img: 225px;
  --gen-scale-img: 902px;
  --gen-tmj-img: 503px;
  --gen-tmj-icon: 94px;         /* 아이콘 칸 높이 */
  --gen-case-icon: 117px;
  --gen-slide-w: 513px;
  --gen-white-img: 966px;
  --gen-proc-w: 515px;
  --gen-badge: 28px;
}


/* ============================
   공통 — 진료 헤더
============================ */

#gen-page .sec-hd {
  gap: var(--one-gap-lg);
}

#gen-page .trt-hd {
  gap: var(--one-gap-xl);
  padding-bottom: 0;
}

#gen-page .trt-num {
  margin-bottom: calc(var(--one-gap-sm) - var(--one-gap-xl));
  color: var(--gen-num);
}

#gen-page .trt-tit {
  margin-bottom: var(--one-gap-xl);
}

#gen-page .trt-sub {
  color: var(--gen-sub);
}

/* 헤더만 있는 섹션 — 아래 띠와 붙는다 */
#gen-page .sec-perio01 .con-inner,
#gen-page .sec-scale01 .con-inner,
#gen-page .sec-tmj01 .con-inner,
#gen-page .sec-molar01 .con-inner {
  padding-bottom: var(--one-space-r);
}


/* ============================
   perio02 — 잇몸병 단계 카드
============================ */

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

#gen-page .perio-lst {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--one-space-s) var(--one-gap-r);
  text-align: center;
}

#gen-page .perio-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

#gen-page .perio-item .perio-img {
  width: var(--gen-perio-img);
  max-width: 100%;
}

#gen-page .perio-tit {
  margin-top: var(--one-gap-xl);
}

/* 글은 칸 사이 여백까지 쓴다 */
#gen-page .perio-desc {
  margin: var(--one-gap-r) calc(var(--one-gap-r) / -2) 0;
}


/* ============================
   scale02 — 치태 · 치석 이미지
============================ */

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

#gen-page .sec-scale02 .scale-img {
  display: block;
  width: var(--gen-scale-img);
  max-width: 100%;
  margin: 0 auto;
}


/* ============================
   tmj02 — 증상 이미지 띠
============================ */

#gen-page .sec-tmj02 {
  background-color: var(--sub-color02);
  background-image: url(../images/gen/06.jpg);
  /* 폭이 줄면 얼굴을 오른쪽으로 밀어 가운데 이미지와 겹치지 않게 */
  background-position: max(100%, calc(50% - 180px)) center;
}

#gen-page .sec-tmj02 .con-inner {
  padding: calc(var(--one-space-r) - var(--one-gap-sm)) 0;
}

#gen-page .sec-tmj02 .tmj-img {
  display: block;
  width: var(--gen-tmj-img);
  max-width: 100%;
  margin: 0 auto;
}


/* ============================
   tmj03 — 치료 방법 · 치료 단계
============================ */

#gen-page .sec-tmj03 {
  background-color: var(--sub-color01);
}

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

#gen-page .sec-tmj03 .sec-hd {
  gap: var(--one-gap-xl);
}

#gen-page .tmj-lst {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--one-gap-sm);
}

#gen-page .tmj-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--one-gap-sm);
  padding: var(--one-gap-r) var(--one-gap-sm);
  background-color: var(--white-color);
  text-align: center;
}

/* 아이콘 크기가 달라도 칸 높이를 맞추고 가운데에 앉힌다 */
#gen-page .tmj-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--gen-tmj-icon);
}

#gen-page .tmj-icon img {
  width: auto;
  max-width: 100%;
}

/* 좁은 6열에서 한 단어 라벨이 칸을 넘지 않게 */
#gen-page .tmj-label {
  font-size: min(var(--one-p-tit), 2.4vw);
}

#gen-page .flow-lst {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin: var(--one-space-r) 0 0;
  padding: 0;
  list-style: none;
  text-align: center;
}

/* 칸마다 선을 그어 이어 붙인다 — 칸 사이 gap 이 생기면 선이 끊긴다 */
#gen-page .flow-arw {
  position: relative;
  display: block;
  height: var(--one-icon-s);
  margin: var(--one-gap-r) 0;
  background: linear-gradient(var(--white-color), var(--white-color)) no-repeat center / 100% 1px;
}

#gen-page .flow-arw::before,
#gen-page .flow-arw::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  border-top: 1.5px solid var(--white-color);
  border-right: 1.5px solid var(--white-color);
}

#gen-page .flow-arw::before {
  transform: translate(-125%, -50%) rotate(45deg);
}

#gen-page .flow-arw::after {
  transform: translate(-45%, -50%) rotate(45deg);
}

#gen-page .flow-txt {
  padding: 0 var(--one-gap-sm);
  text-wrap: balance;
}


/* ============================
   molar02 — 발치가 필요한 경우
============================ */

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

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

#gen-page .case-lst {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(var(--one-space-s) + var(--one-gap-r)) calc(var(--one-space-s) + var(--one-gap-xl));
}

#gen-page .case-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--one-gap-lg);
  padding: calc(var(--one-gap-xl) + var(--one-gap-xs)) var(--one-gap-r) var(--one-gap-lg);
  border-radius: var(--gen-card-radius);
  background-color: var(--gen-card);
  text-align: center;
}

#gen-page .case-item .case-icon {
  flex: 0 0 auto;
  width: var(--gen-case-icon);
  max-width: 100%;
}

/* 남는 높이의 가운데 — 글 줄 수가 달라도 카드 높이는 줄 단위로 맞는다 */
#gen-page .case-txt {
  margin: auto 0;
}


/* ============================
   molar03 — 맹출 상태별 슬라이드 (.slide-wrap)
============================ */

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

#gen-page .sec-molar03 .sec-hd {
  padding-bottom: var(--one-space-lg);
}

#gen-page .sec-molar03 .slide-vis {
  max-width: var(--gen-slide-w);
}

#gen-page .sec-molar03 .slide-body {
  gap: var(--one-gap-xl);
}

#gen-page .sec-molar03 .slide-desc {
  color: var(--one-txt-color);
}



/* ============================
   white01 — 전문가 치아미백
============================ */

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

/* 이미지 아래가 투명하게 빠져 있어 띠 아래에 바로 붙인다 */
#gen-page .sec-white01 .con-inner {
  padding: var(--one-space-xl) 0 0;
}

#gen-page .sec-white01 .trt-hd {
  padding-bottom: var(--one-space-xl);
}

#gen-page .sec-white01 .white-img {
  display: block;
  width: var(--gen-white-img);
  max-width: 100%;
  margin: 0 auto;
}


/* ============================
   white02 — 치아미백 과정
============================ */

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

#gen-page .sec-white02 .sec-hd {
  padding-bottom: var(--one-space-lg);
}

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

#gen-page .proc-item {
  justify-self: center;
  width: 100%;
  max-width: var(--gen-proc-w);
}

#gen-page .proc-item .proc-img {
  display: block;
}

#gen-page .proc-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: calc(var(--one-gap-xl) + var(--one-gap-xs)) 0 0 calc(var(--one-gap-xl) + var(--one-gap-xs));
}

#gen-page .proc-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--gen-badge);
  height: var(--gen-badge);
  border-radius: 50%;
  background-color: var(--sub-color01);
  color: var(--white-color);
  font-size: var(--one-caption);
  line-height: 1;
}

#gen-page .proc-tit {
  margin-top: var(--one-gap-r);
}

#gen-page .proc-desc {
  margin-top: var(--one-gap-sm);
}


/* ============================
   faq — 자주 묻는 Q&A (.faq-lst)
   질문 막대와 답변 카드가 따로 떨어진 형태로 덮는다
============================ */

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

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

#gen-page .sec-faq .sec-hd {
  padding-bottom: var(--one-space-lg);
}

#gen-page .sec-faq .faq-lst {
  --one-faq-w: 100%;
  gap: var(--one-gap-lg);
}

#gen-page .sec-faq .faq-item,
#gen-page .sec-faq .faq-item.is-open {
  border-radius: 0;
  background-color: transparent;
  color: inherit;
}

/* component.css 의 button:hover · :focus 가 배경을 지우므로 상태마다 다시 깐다 */
#gen-page .sec-faq .faq-q,
#gen-page .sec-faq .faq-q:hover,
#gen-page .sec-faq .faq-q:focus,
#gen-page .sec-faq .faq-q:active {
  gap: var(--one-gap-sm);
  padding: var(--one-gap-xl) calc(var(--one-gap-xl) + var(--one-gap-sm));
  border-radius: var(--gen-radius);
  background-color: var(--sub-color01);
  color: var(--white-color);
  transition: background-color var(--one-faq-open) ease;
}

#gen-page .sec-faq .faq-item.is-open .faq-q {
  background-color: var(--gen-faq-on);
}

#gen-page .sec-faq .faq-num {
  color: inherit;
  font-size: var(--one-p-tit);
}

#gen-page .sec-faq .faq-tit {
  font-weight: 700;
}

#gen-page .sec-faq .faq-btn {
  display: none;
}

#gen-page .sec-faq .faq-txt {
  border-radius: var(--gen-radius);
  background-color: var(--white-color);
}

#gen-page .sec-faq .faq-txt > * {
  padding: calc(var(--one-gap-xl) + var(--one-gap-xs)) calc(var(--one-gap-xl) + var(--one-gap-sm));
}


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

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

  #gen-page .perio-lst {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #gen-page .perio-desc {
    margin: var(--one-gap-r) 0 0;
  }

  /* 얼굴을 빼고 단색 쪽만 쓴다 */
  #gen-page .sec-tmj02 {
    background-position: left center;
  }

  #gen-page .tmj-lst {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  #gen-page .tmj-label {
    font-size: var(--one-p-tit);
  }

  #gen-page .case-lst {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--one-gap-lg);
  }

  #gen-page .sec-molar03 .slide-vis,
  #gen-page .sec-molar03 .slide-body {
    width: 100%;
    margin: 0 auto;
  }

  #gen-page .sec-molar03 .slide-body {
    max-width: var(--gen-slide-w);
  }

  #gen-page .proc-lst {
    gap: var(--one-space-r) var(--one-gap-xl);
  }
}


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

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

  #gen-page {
    --gen-radius: 12px;
    --gen-card-radius: 24px;
    --gen-case-icon: 18vw;
  }

  #gen-page .tmj-lst {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* 가로 선을 걷고 화살표를 아래로 돌려 세로 흐름으로 */
  #gen-page .flow-lst {
    grid-template-columns: 1fr;
    row-gap: var(--one-gap-sm);
  }

  #gen-page .flow-arw {
    margin: var(--one-gap-sm) 0;
    background: none;
  }

  #gen-page .flow-arw::before {
    transform: translate(-50%, -125%) rotate(135deg);
  }

  #gen-page .flow-arw::after {
    transform: translate(-50%, -45%) rotate(135deg);
  }

  /* 카드가 1열이 되면 아이콘 좌 · 글 우로 눕힌다 */
  #gen-page .case-lst {
    grid-template-columns: 1fr;
    gap: var(--one-gap-r);
  }

  #gen-page .case-item {
    flex-direction: row;
    padding: var(--one-gap-lg);
    text-align: left;
  }

  #gen-page .sec-molar03 .slide-row {
    gap: var(--one-gap-xl);
  }

  /* ui.css 가 모바일에서 숨긴다 — 이 슬라이드는 시안에 페이징이 있다 */
  #gen-page .sec-molar03 .slide-nav {
    display: flex;
    align-self: center;
  }

  #gen-page .proc-lst {
    grid-template-columns: 1fr;
  }

  #gen-page .proc-body {
    padding: var(--one-gap-lg) 0 0 var(--one-gap-sm);
  }

  #gen-page .sec-faq .faq-lst {
    gap: var(--one-gap-r);
  }

  #gen-page .sec-faq .faq-q,
  #gen-page .sec-faq .faq-q:hover,
  #gen-page .sec-faq .faq-q:focus,
  #gen-page .sec-faq .faq-q:active {
    padding: var(--one-gap-lg) var(--one-gap-r);
  }

  #gen-page .sec-faq .faq-txt > * {
    padding: var(--one-gap-lg) var(--one-gap-r);
  }
}