/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Jun 26 2026 | 05:41:43 */
@charset "utf-8";
/*
  page-tmj : 턱관절클리닉 (1depth 통합)
  약어 정의
  - tmj  : temporomandibular joint (턱관절치료)
  - phl  : perfect healing laser (퍼펙트 힐링 레이저)
  - irr  : irrigation (턱관절 세정술)
*/


/* ============================================================
   턱관절치료 (tmj)
============================================================ */

/* ── 섹션2 : 원인 아이콘 카드 ── */

.tmj-cause-card.icon-card {
  background: transparent;
  border-color: #fff;
}

.tmj-cause-card.icon-card .icon-card-txt {
  gap: 0;
}

.tmj-cause-card.icon-card .icon-card-icon {
  max-width: 124px;
}

.tmj-cause-card.icon-card .icon-card-txt .icon-card-sub {
  font-size: var(--one-p-tit);
}

.tmj-sec02.bg-cv {
  /* 배경 이미지 수동 추가 필요 (tmj-sec02-bg.jpg) */
  background-color: var(--main-color);
  background-image: url('/wp-content/uploads/2026/06/tmj-sec02-bg.jpg');
}


/* ── 섹션3 : 커스텀 step ── */

.tmj-sec03 {
  background-color: #f9f9f9;
}

.tmj-s03-hd {
  padding-bottom: var(--one-space-lg);
}

.tmj-step-list {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
}

.tmj-step-item {
  flex: 1;
}

.tmj-step-txt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--one-gap-sm);
}

.tmj-step-num {
  display: block;
  letter-spacing: 0;
  margin-bottom: var(--one-gap-xl);
}

/* 가로줄: height 1px 고정, 색상 main-color
   중앙에 tmj-step-arr.png 배치 (가상요소) */
.tmj-step-line {
  position: relative;
  width: 100%;
  height: 1px;
  background-color: var(--main-color);
  margin-bottom: var(--one-gap-sm);
}

.tmj-step-line::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 24px;
  height: 24px;
  background: url('/wp-content/uploads/2026/06/tmj-step-arr.png') no-repeat center / contain;
}

.tmj-step-title {
  display: block;
  word-break: keep-all;
  text-align: center;
}


/* ── 섹션4 : 증상 체크리스트 ── */

.tmj-sec04 .ck-icon-list-icon {
  color: var(--main-color);
}


/* ── 섹션5 : 전문의 ── */

.tmj-sec05.bg-cv {
  background-image: url('/wp-content/uploads/2026/06/sedation-s05-bg.jpg');
}

.tmj-sec05 .con-inner {
  padding: var(--one-space-r) 0;
}

.tmj-s05-inner {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--one-space-s);
}

.tmj-s05-img {
  flex: 0 0 40%;
  max-width: 243px;
}

.tmj-s05-txt {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--one-gap-r);
}

.tmj-s05-title-wrap {
  display: flex;
  align-items: flex-start;
  gap: var(--one-gap-sm);
}

.tmj-s05-icon {
  flex-shrink: 0;
  max-width: 2em;
  border-radius: 50%;
  background: #fff;
  padding: 0.1em;
  margin-top: 0.5em;
}

.tmj-s05-icon img {
  width: 100%;
  height: auto;
  display: block;
}


/* ============================================================
   퍼펙트 힐링 레이저 (phl)
============================================================ */

/* ── 섹션2 : 레이저 치료 과정 ── */

.phl-sec02 {
  background: linear-gradient(to bottom, #fff 50%, #f8f8f8 50%);
}

.phl-sec02.con-inner {
  padding-top: var(--one-gap-lg);
}

.phl-s02-hd {
  padding-bottom: var(--one-space-s);
}

/* 4열 step 카드 — 라운딩 박스 */
.phl-step-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--one-gap-lg);
}

.phl-step-item {
  display: flex;
  flex-direction: column;
  gap: var(--one-gap-lg);
  padding: var(--one-space-s) var(--one-gap-xl);
  border-radius: 8px;
  border: 1px solid var(--gray-color04);
  background-color: #fff;
}

.phl-step-txt {
  display: flex;
  flex-direction: column;
  gap: var(--one-gap-sm);
}

.phl-step-num {
  display: block;
  letter-spacing: 0.05em;
}

.phl-step-title {
  display: block;
  word-break: keep-all;
}


/* ── 섹션3 : 치료 효과 아이콘 카드 ── */

.phl-s03-hd {
  padding-bottom: var(--one-space-s);
}

.phl-sec03.bg-cv {
  /* 배경 이미지 수동 추가 필요 (phl-sec03-bg.jpg) */
  background-color: var(--main-color);
  background-image: url('/wp-content/uploads/2026/06/phl-sec03-bg.jpg');
}

.phl-effect-card.icon-card {
  background: #1321464d;
  border-color: #fff;
}


/* ============================================================
   턱관절 세정술 (irr)
============================================================ */

/* ── 섹션1+2 : benefit 원형 UI ── */

.irr-benefit-wrap {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: var(--one-space-s);
}

.circle-bd-ui.irr-benefit-item {
  max-width: 280px;
  border-color: var(--main-color);
}


/* ── 섹션3 : 추천 대상 ── */

.irr-sec03.bg-cv {
  /* 배경 이미지 수동 추가 필요 (irr-sec03-bg.jpg) */
  background-color: var(--main-color);
  background-image: url('/wp-content/uploads/2026/06/irr-sec03-bg.jpg');
}

/* 리스트 구분선 — 어두운 배경 위 */
.irr-list-item.ck-icon-list-item {
  border-bottom-color: rgba(255, 255, 255, 0.25);
}


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

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

  /* tmj — 원인 카드 아이콘 축소 */
  .tmj-cause-card.icon-card .icon-card-icon {
    max-width: 80px;
  }

  /* tmj — step hd 간격 축소 */
  .tmj-s03-hd {
    padding-bottom: var(--one-space-s);
  }

  /* phl — sec02 배경 분기점 유지 */
  .phl-sec02 {
    background: linear-gradient(to bottom, #fff 50%, #f8f8f8 50%);
  }

  /* phl — step 2열 */
  .phl-step-list {
    grid-template-columns: repeat(2, 1fr);
  }

  .phl-step-item {
    padding: var(--one-gap-xl) var(--one-gap-lg);
  }

  /* irr — benefit 원형 간격 축소 */
  .irr-benefit-wrap {
    gap: var(--one-gap-lg);
  }

  /* tmj — 전문의 */
  .tmj-s05-img {
    flex: 0 0 180px;
  }
}


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

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

  /* tmj — 원인 카드 아이콘 축소 */
  .tmj-cause-card.icon-card .icon-card-icon {
    max-width: 60px;
  }

  .tmj-cause-card.icon-card .icon-card-txt .icon-card-sub {
    font-size: var(--one-body);
  }

  /* tmj — step: 세로 나열 */
  .tmj-step-list {
    flex-direction: column;
    gap: var(--one-space-s);
  }

  .tmj-step-item {
    width: 100%;
  }

  .tmj-step-txt {
    align-items: center;
    gap: 0;
  }

  /* 모바일: 가로줄 숨김 */
  .tmj-step-line {
    display: none;
  }

  .tmj-step-title {
    text-align: left;
  }

  /* phl — step 1열 */
  .phl-sec02 {
    background: linear-gradient(to bottom, #fff 40%, #f8f8f8 40%);
  }

  .phl-step-list {
    grid-template-columns: 1fr;
  }

  .phl-step-item {
    padding: var(--one-gap-xl) var(--one-gap-r);
  }

  /* irr — benefit 원형 2열 wrap */
  .irr-benefit-wrap {
    flex-wrap: wrap;
    justify-content: center;
    gap: 0 var(--one-gap-sm);
  }

  .circle-bd-ui.irr-benefit-item {
    max-width: 170px;
  }

  /* tmj — 전문의 */
  .tmj-s05-inner {
    flex-direction: column;

  }

  .tmj-s05-title {
    flex-direction: column;
    text-align: left;
  }

  .tmj-s05-txt {
    justify-content: center;
    align-items: center;
    text-align: center;
  }

  .tmj-s05-icon {
    max-width: 1.7em;
    padding: 0.15em;

  }

  .tmj-s05-img {
    flex: none;
    width: 50%;
    margin: 0 auto;
  }
}