@charset "utf-8";

/* ============================================================
   tmj.css — 턱관절 치료 (#tmj-page)

   마크업 : sections/tmj/
   ============================================================ */

#tmj-page {
  /* 골드 포인트 — 컬러칩에 없는 색이라 페이지 토큰으로 둔다 (teeth · tour 도 같은 값) */
  --one-pt: #d7ba35;
  --one-pt2: #d8bc35;
  --one-pt3: #d6bb35;
  --one-tit: #5f5449;      /* 제목 갈색 — 컬러칩에 없는 색이라 페이지 토큰으로 둔다 (teeth 와 같은 값) */
  --one-lead: #655848;     /* 리드 문장 갈색 — sub-color01(#9b8261)보다 진하다 */
  --one-cap-color: #f4e28f;
  --one-desc-color: #454545;
  --one-faq-bg: #9d8b74;    /* Q&A 질문 띠 — 시안의 흐린 갈색 */

  --one-space-lg: 82px;    /* 섹션 상하 여백이 아니다 — 그건 ui.css 가 --one-space-xl 로 덮는다. 리스트 줄 간격 등에만 남아 있는 값 */
  --one-band-h: 30vw;      /* 배경 밴드 높이 */
  --one-slide-btn: 60px;
  --one-slide-img-w: 553px;  /* 04 슬라이드 사진 열 — 크롭 원본 폭. 늘리면 흐려진다 */
  --one-step-col: 4;
  --one-intro-t: 0.7s;       /* 인트로 등장 시간 */
  --one-intro-delay: 0.15s;  /* 본문이 제목보다 늦게 */
  --one-intro-dist: 24px;    /* 이동 거리 */
}

/* 타이포 — common.css 기본값과 다른 부분만 이 페이지 안에서 덮는다 */
#tmj-page .txt-wrap .hd2 {
  font-size: var(--one-hd1);
}

#tmj-page .txt-wrap .cp-txt {
  font-size: var(--one-body);
  font-weight: 380;
}

#tmj-page .sec-hd .hd2 {
  font-size: var(--one-hd2);
}

#tmj-page .sec-hd .cp-txt {
  letter-spacing: normal;
  margin-bottom: 0;
}

#tmj-page .ft-b  { font-weight: 580 !important; }
#tmj-page .ft-lb { font-weight: 700 !important; }

/* common.css 의 margin-bottom:100px 이 과하다 — 제목과 본문을 붙인다 */
#tmj-page .sec-hd {
  margin-bottom: var(--one-gap-xl);
}

/* 설명 글 — ui.css 의 회색(#666)이 시안보다 흐리다. 진한 갈색으로 */
#tmj-page .slide-desc {
  color: var(--one-desc-color);
  font-size: var(--one-caption);
}

/* 제목 갈색 — Astra 가 h2·h3 에 자기 색을 뿌려서 시안과 달라진다 */
#tmj-page .tit-color {
  color: var(--one-tit);
}

#tmj-page .pt-color {
  color: var(--one-pt);
}

#tmj-page .pt-color4{
  color: var(--one-pt2);
}

#tmj-page .pt-color2 {
  color: var(--sub-color04);
}
#tmj-page .pt-color5{
  color: var(--one-lead);
}

#tmj-page  .pt-color3 {
  color: var(--one-cap-color);
}

/* 등장 애니메이션 이동 거리 — animation.css 기본 40px 는 스크롤이 무겁게 느껴진다 */
#tmj-page .anim-fade-up {
  transform: translateY(28px);
}


/* ============================
   01 인트로
============================ */

/* 로드 즉시 등장 — 제목은 위에서 내려오고 본문은 아래서 올라온다 (01-intro.php) */
#tmj-page .intro-down {
  animation: tmjIntroDown var(--one-intro-t) ease-out both;
}


#tmj-page .intro-up {
  animation: tmjIntroUp var(--one-intro-t) ease-out both;
  animation-delay: var(--one-intro-delay);
}

@keyframes tmjIntroDown {
  from { opacity: 0; transform: translateY(calc(var(--one-intro-dist) * -1)); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes tmjIntroUp {
  from { opacity: 0; transform: translateY(var(--one-intro-dist)); }
  to   { opacity: 1; transform: translateY(0); }
}

/* 캡션과 제목 사이만 좁힌다 — .sec-hd 의 gap 에서 음수 마진만큼 당긴다 */
#tmj-page .sec-intro .intro-cap {
  margin-bottom: calc(var(--one-gap-sm) * -1);
}

#tmj-page .sec-intro .intro-sub {
  font-weight: 500;
  color: var(--one-tit);
  font-size: var(--one-p-tit);
}

#tmj-page .sec-intro .intro-img {
  padding-bottom: var(--one-space-r);
}

#tmj-page .sec-intro .intro-img img {
  width: auto;
  max-width: 100%;
}

#tmj-page .sec-intro .intro-lead {
  color: var(--one-lead);
}

#tmj-page .sec-intro .intro-desc {
  padding-top: var(--one-gap-xl);
  font-weight: 330;
}


/* ============================
   02 턱관절 장애란 (배경 밴드)
============================ */

#tmj-page .sec-band {
  overflow: hidden;
}

#tmj-page .band-bg {
  position: absolute;
  inset: 0;
  background-image: url(../images/tmj/sec02-bg.png);
}

#tmj-page .sec-band .con-inner {
  min-height: var(--one-band-h);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

#tmj-page .band-title {
  padding-top: var(--one-gap-sm);

}

#tmj-page .band-desc {
  padding-top: var(--one-gap-xl);
}

#tmj-page .band-cap {
  font-style: italic;
  color: #f9f4de;
}

/* ============================
   03 검진이 필요한 증상
============================ */

#tmj-page .sec-sym {
  background-color: #f8f3ed;
}

/* 시안은 흰 라운드 카드 — 테두리형 기본값을 덮는다 */
#tmj-page .sec-sym .step-item {
  padding: var(--one-space-s) var(--one-gap-lg);
  border: 0;
  border-radius: 2.2em;
  background-color: var(--white-color);
}

#tmj-page .sec-sym .step-tit {
  padding-top: 0;
  order: -1;
}

/* 원 배경은 크롭 PNG 에 들어 있다 */
#tmj-page .sec-sym .step-item .step-img {
  width: 110px;
  margin: var(--one-gap-xl) 0;
}

#tmj-page .sec-sym .step-desc {
  padding-top: 0;
  font-size: var(--one-caption);
  color: var(--one-desc-color);
  font-weight: 500;
}

#tmj-page .sym-step {
  font-size: var(--one-body) !important;
}


/* ============================
   04 치료 방법 슬라이드
   시안은 텍스트가 좌 · 이미지가 우이고 화살표가 콘텐츠 바깥에 있다
============================ */

#tmj-page .slide-wrap {
  position: relative;
}

/* 사진 열은 원본 폭으로 고정 — 1fr 1fr 이면 사진이 열 폭까지 늘어나 흐려지고 글 열은 좁아진다 */
#tmj-page .slide-row {
  grid-template-columns: minmax(0, 1fr) min(var(--one-slide-img-w), 50%);
}

#tmj-page .slide-vis {
  order: 2;
  border-radius: 0;
}

#tmj-page .slide-body {
  order: 1;
}

#tmj-page .slide-nav {
  display: contents;
}

#tmj-page .slide-pg {
  display: none;
}

#tmj-page .slide-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

#tmj-page .slide-prev {
  left: calc(var(--one-slide-btn) * -1);
}

#tmj-page .slide-next {
  right: calc(var(--one-slide-btn) * -1);
}

/* 시안에 화살표가 있다 — 장이 1개뿐일 때 Swiper 가 붙이는 lock · disabled 를 되돌린다.
   장이 채워지면 그대로 동작한다 */
#tmj-page .slide-btn.swiper-button-lock {
  display: block;
}

#tmj-page .slide-btn.swiper-button-disabled {
  opacity: 1;
}

#tmj-page .slide-btn::before {
  width: 14px;                       /* 기본 9px — 크게 */
  height: 14px;
  border-width: 1px;                 /* 시안은 가는 선 */
  border-color: var(--gray-color01);  /* 시안처럼 연하게 */
}

/* 틀을 원본 규격으로 고정한다 — 장마다 원본 폭이 달라(544 vs 553) 그대로 두면 장을 넘길 때 높이가 튄다.
   cover 가 남는 쪽을 잘라 채운다 */
#tmj-page .slide-vis img {
  aspect-ratio: 553 / 322;
  height: auto;
  object-fit: cover;
}

/* 장별 확대는 04-trt.php 의 zoom 값으로 — loop 가 슬라이드 DOM 순서를 바꿔 nth-child 로는 못 잡는다 */
#tmj-page .slide-vis img {
  transform: scale(var(--one-sl-zoom, 1));
}

#tmj-page .trt-tit {
  font-size: var(--one-body);
}

/* 확대된 사진이 제 장 밖으로 삐져나와 옆 장에 겹쳐 보인다 — 장 단위로 자른다 */
#tmj-page .slide-vis .swiper-slide {
  overflow: hidden;
}

#tmj-page .slide-tit {
  color: var(--one-pt3);
}


/* ============================
   05 자주 묻는 Q&A
============================ */

#tmj-page .sec-qst {
  background-color: #e9e9e9;
}

/* 시안 — 질문 줄은 갈색 띠에 흰 글씨, 답은 흰 상자. 열려도 띠 색은 그대로다 */
#tmj-page .faq-item {
  overflow: hidden;
  border-radius: 0;
  background-color: var(--one-faq-bg);
  color: var(--white-color);
}

#tmj-page .faq-item.is-open {
  background-color: var(--one-faq-bg);
}

#tmj-page .faq-q {
  gap: var(--one-gap-r);
  padding: var(--one-gap-lg) var(--one-gap-xl);
}

#tmj-page .faq-num {
  color: inherit;
  font-size: var(--one-body);
}

#tmj-page .faq-tit {
  font-size: var(--one-body);
  font-weight: 600;
}

/* 화살표 — 테두리 두 변이 아니라 속이 찬 삼각형 */
#tmj-page .faq-btn::before {
  width: 0;
  height: 0;
  border: 0;
  border-left: calc(var(--one-faq-btn) / 2) solid transparent;
  border-right: calc(var(--one-faq-btn) / 2) solid transparent;
  border-top: calc(var(--one-faq-btn) * 0.7) solid currentColor;
  transform: translate(-50%, -50%);
}

#tmj-page .faq-item.is-open .faq-btn::before {
  transform: translate(-50%, -50%) rotate(180deg);
}

#tmj-page .faq-a {
  background-color: var(--white-color);
  color: var(--one-txt-color);
}

#tmj-page .faq-txt > p {
  padding: 0 var(--one-space-s);
  font-size: var(--one-body);
}

#tmj-page .faq-txt > p:first-child {
  padding-top: var(--one-gap-xl);
}

#tmj-page .faq-txt > p:last-child {
  padding-bottom: var(--one-gap-xl);
}


/* ============================
   반응형 — 노트북만 (1025 ~ 1600px)
   콘텐츠 바깥 여백이 좁아 화살표가 화면 모서리 · 퀵메뉴에 붙는다 —
   글 · 사진을 안쪽으로 들이고 화살표는 콘텐츠 가장자리 안쪽에 세운다
============================ */

@media all and (min-width: 1025px) and (max-width: 1600px) {
  #tmj-page {
    --one-slide-img-w: 440px;   /* 사진 열을 좁혀 글 열이 br 줄바꿈을 유지하게 */
    --one-slide-inset: 100px;   /* 글 · 사진을 안쪽으로 들이는 폭 — 그 안에 화살표가 선다 */
    --one-slide-arw-in: 30px;   /* 화살표를 콘텐츠 가장자리에서 안쪽으로 넣는 거리 */
  }

  #tmj-page .slide-row {
    padding-inline: var(--one-slide-inset);
  }

  #tmj-page .slide-prev {
    left: var(--one-slide-arw-in);
  }

  #tmj-page .slide-next {
    right: var(--one-slide-arw-in);
  }

  #tmj-page .trt-tit .view-pc {
    display: none !important;
  }
}


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

@media all and (max-width: 1024px) {
  #tmj-page {
    --one-band-h: 42vw;
    --one-slide-btn: 32px;
    --one-step-col: 2;
  }

  /* ui.css 가 1열로 접는 걸 #id 규칙이 되돌리지 않게 */
  #tmj-page .slide-row {
    grid-template-columns: 1fr;
  }

  /* 1열로 접히면 글 · 사진이 세로로 쌓인다 — 화살표를 사진 줄(2행)에 붙여 사진 세로 중심에.
     .slide-body 를 contents 로 풀어 버튼을 그리드 아이템으로 만들고, 행을 기준 상자로 쓰려면
     그리드(.slide-row)가 positioned 여야 한다 (.slide-wrap 이 기준이면 grid-row 가 무시된다) */
  #tmj-page .slide-body {
    display: contents;
  }

  #tmj-page .slide-row {
    position: relative;
  }

  #tmj-page .slide-btn {
    grid-row: 2;
    grid-column: 1;
    top: 50%;
  }
}


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

@media all and (max-width: 639px) {
  #tmj-page {
    --one-band-h: auto;
    --one-step-col: 1;
    --one-slide-dot: 10px;      /* 슬라이드 점 지름 */
    --one-slide-dot-gap: 10px;  /* 점 사이 간격 */
  } 

  /* 밴드 글 — 좁은 화면에서는 한 단계 작게 (25자/줄, 자동 줄바꿈) */

  #tmj-page .band-desc {
    font-size: 3.6vw;      /* 375px 기준 약 13.5px */
    line-height: 1.7;
  }

  #tmj-page .sec-sym .step-desc {
    font-size: 16px;
  }

  #tmj-page .sec-intro .intro-sub {
  font-weight: 600;
  color: var(--one-tit);
  font-size: var(--one-p-tit);
}


  #tmj-page .txt-wrap .cp-txt {
  font-size: var(--one-p-tit);
  font-weight: 380;
}

  /* 섹션 제목 — --one-hd3 는 모바일에서 6vw(≈22px)로 줄어 PC(29px)보다 작아진다.
     PC 의 hd3(32px) 느낌이 나게 폭 비례로 직접 준다 */
  #tmj-page .sec-hd .hd2 {
    font-size: 8.5vw;   /* 375px 기준 약 32px */
  }

  /* 화살표는 자리가 없다 — 대신 사진 아래 점(◦ ▬ ◦)으로 넘긴다.
     .slide-body 를 contents 로 풀어 글 · 사진 · 점을 그리드에 직접 앉힌다 */
  #tmj-page .slide-btn {
    display: none;
  }

  #tmj-page .slide-body {
    display: contents;
  }

  #tmj-page .slide-cont {
    order: 1;
    min-width: 0;
  }

  #tmj-page .slide-vis {
    order: 2;
  }

  #tmj-page .slide-nav {
    display: flex;
    order: 3;
    justify-content: center;
  }

  /* 점 — ui.js 가 넣는 숫자(1 2 3)를 font-size:0 으로 숨기고 동그라미만 남긴다 */
  #tmj-page .slide-pg {
    display: flex;
    gap: var(--one-slide-dot-gap);
  }

  #tmj-page .slide-pg .swiper-pagination-bullet {
    width: var(--one-slide-dot);
    height: var(--one-slide-dot);
    border-radius: 50%;
    background-color: var(--gray-color01);
    font-size: 0;
    opacity: 0.5;
    transition: width 0.3s ease, opacity 0.3s ease;
  }

  #tmj-page .slide-pg .swiper-pagination-bullet-active {
    width: calc(var(--one-slide-dot) * 2.6);   /* 켜진 점은 가로로 길게 */
    border-radius: 999px;                      /* em 은 안 된다 — font-size:0 이라 0 이 된다 */
    opacity: 1;
  }

  #tmj-page .sec-sym .step-item .step-img {
    width: 96px;
    margin: var(--one-gap-lg) 0;
  }
}