/* =========================================================
   아뜰리에치과 - 자연치아보존(preserve) 전용 스타일
   :root 변수·헤더·푸터는 style.css 재사용. 1920 데스크탑 전용.
   컬러/사이즈 값은 Figma 시안(자연치아보존 페이지 91:210)에서 MCP로 읽어 확정.
   클래스 접두어: ps-
   ========================================================= */

/* 헤더 활성 메뉴 (현재 페이지: 자연치아보존) */
.gnb__link.is-active {
  color: var(--color-point);
}

/* =========================================================
   섹션 1: 서브 비주얼 배너 (section.relative) - Figma 103:261
   1920×513, 헤더(80) 아래. 배경사진 + 텍스트 오버레이(시안 left779 top205).
   ========================================================= */
.ps-hero {
  position: relative;
  height: 513px;
  margin-top: var(--header-height);
  overflow: hidden;
}
.ps-hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ps-hero__inner {
  position: absolute;
  left: 779px;
  top: 205px;
  padding: 0 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}
.ps-hero__title {
  font-family: "Sorts Mill Goudy", serif;
  font-size: 60px;
  font-weight: 400;
  line-height: 60px;
  color: var(--color-white);
  white-space: nowrap;
}
.ps-hero__sub {
  font-family: "Pretendard", sans-serif;
  font-size: 20px;
  font-weight: 300;
  line-height: 28px;
  color: rgba(255, 255, 255, 0.8);
  white-space: nowrap;
}

/* =========================================================
   섹션 2: 인트로 (div.sub_visual_cont) - Figma 103:269
   중앙정렬 컬럼. inner 1296(px20 → 1256). 강조문 + 본문 3단락 + 대표이미지.
   ========================================================= */
.ps-intro {
  margin-top: 195px;        /* 시안: 히어로 하단(593)~인트로 상단(788) */
  overflow-x: clip;
}
.ps-intro__inner {
  width: 1296px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 45px;
}
.ps-intro__text {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 21.535px;
}
.ps-intro__lead {
  font-size: 27px;
  font-weight: 700;
  line-height: 45.9px;
  color: var(--color-text);   /* #3C3C3C */
}
.ps-intro__desc {
  display: flex;
  flex-direction: column;
  gap: 7.9px;
}
.ps-intro__desc p {
  font-size: 17px;
  font-weight: 400;
  line-height: 28.9px;
  color: var(--color-text);
}
.ps-intro__img {
  width: 100%;
  height: 540.08px;
  border-radius: 29.97px;
  overflow: hidden;
}
.ps-intro__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* =========================================================
   섹션 3: 대표적인 증상 (div.sub_im_adv) - Figma 108:2
   회색(#F2F2F2) 배경 풀블리드. 좌 제목(w487.86) / 우 CHECK 01~06.
   ========================================================= */
.ps-adv {
  margin-top: 249px;        /* 시안: 인트로 하단(1630.4)~섹션 상단(1879) */
  background: var(--color-grey-95);   /* 시안 Concrete #F2F2F2 */
  overflow-x: clip;
}
.ps-adv__inner {
  width: 1296px;
  margin: 0 auto;
  padding: 0 20px;
}
.ps-adv__cont {
  display: flex;
  align-items: flex-start;
  gap: 135.27px;            /* 시안: 좌 제목~우 리스트 gap 135.27 */
  padding: 171px 0 153px;
}
.ps-adv__head {
  flex-shrink: 0;
  width: 487.86px;
  display: flex;
  flex-direction: column;
  gap: 21.5px;              /* 시안: 제목 하단~설명 top 142.51 */
}
.ps-adv__tit {
  font-size: 43.2px;
  font-weight: 700;
  line-height: 60.48px;
  color: var(--color-text);
  white-space: nowrap;
}
.ps-adv__txt {
  font-size: 17px;
  font-weight: 400;
  line-height: 28.9px;
  color: var(--color-text);
  white-space: nowrap;
}
.ps-adv__list {
  flex: 1 0 0;
  min-width: 0;
  padding-left: 30px;
  display: flex;
  flex-direction: column;
  gap: 20.7px;
}
.ps-adv__box {
  display: flex;
  align-items: center;        /* 뱃지·문구 같은 라인 정렬 */
  padding: 23.4px 26.1px;
  background: var(--color-white);
  border-radius: 599.94px;
}
.ps-adv__check {
  flex-shrink: 0;
  margin-right: 13.5px;
  padding: 6.5px 7.8px;
  background: var(--color-point);   /* 시안 Sorrell Brown #D1BA9C */
  border-radius: 396px;
  font-size: 13px;
  font-weight: 700;
  line-height: 13px;
  color: var(--color-white);
  white-space: nowrap;
}
.ps-adv__box-txt {
  font-size: 17px;
  font-weight: 700;
  line-height: 28.9px;
  color: var(--color-text);
  white-space: nowrap;
}

/* =========================================================
   섹션 4: 신경 치료 과정 (div.white_process) - Figma 103:308
   inner 1296. 제목 + STEP 01~05 카드(#F7F7F7).
   ========================================================= */
.ps-process {
  margin-top: 249px;        /* 시안: 증상 섹션 하단(2762.3)~섹션 상단(3011) */
  overflow-x: clip;
}
.ps-process__inner {
  width: 1296px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  gap: 54px;                /* 시안: 제목~리스트 gap 54 */
}
.ps-process__tit {
  font-size: 34.2px;
  font-weight: 700;
  line-height: 58.14px;
  color: var(--color-text);
}
.ps-process__steps {
  display: flex;
  flex-direction: column;
  gap: 20.7px;
}
.ps-process__step {
  display: flex;
  align-items: flex-start;
  padding: 23.4px 26.1px;
  background: #f7f7f7;        /* 시안 Wild Sand #F7F7F7 */
  border-radius: 29.97px;
}
.ps-process__badge {
  flex-shrink: 0;
  margin-right: 13.5px;
  padding: 6.5px 7.8px;
  background: var(--color-point);   /* #D1BA9C */
  border-radius: 396px;
  font-size: 13px;
  font-weight: 700;
  line-height: 13px;
  color: var(--color-white);
  white-space: nowrap;
}
.ps-process__txt {
  display: flex;
  flex-direction: column;
  gap: 6.69px;
}
.ps-process__step-tit {
  font-size: 20px;
  font-weight: 700;
  line-height: 30px;
  color: var(--color-text);
}
.ps-process__step-desc {
  font-size: 17px;
  font-weight: 400;
  line-height: 28.9px;
  color: var(--color-text);
  white-space: nowrap;
}

/* =========================================================
   섹션 5: 신경 치료 후 관리 (div.sub_im_after) - Figma 103:354
   좌 sticky 패널(제목+이미지) / 우 박스 01~03. 스크롤 시 활성 전환(GSAP).
   ※ sticky 유지를 위해 이 섹션 조상에는 overflow-x:hidden 미적용.
   ========================================================= */
.ps-after {
  margin-top: 282px;        /* 시안: 과정 섹션 하단(3769.24)~섹션 상단(4051) */
}
.ps-after__inner {
  width: 1296px;
  margin: 0 auto;
  padding: 0 20px;
}
.ps-after__cont {
  display: flex;
  align-items: flex-start;
  gap: 75.37px;
}

/* 좌: sticky 패널 (시안 w565.19) */
.ps-after__sticky {
  flex-shrink: 0;
  width: 565.19px;
  position: sticky;
  top: 100px;               /* 고정 헤더(80) 아래로 안착 */
}
.ps-after__head {
  display: flex;
  flex-direction: column;
  gap: 21.545px;
}
.ps-after__tit {
  font-size: 43.2px;
  font-weight: 700;
  line-height: 60.48px;
  color: var(--color-text);
}
.ps-after__txt {
  font-size: 17px;
  font-weight: 400;
  line-height: 28.9px;
  color: var(--color-text);
}

/* 이미지 카드 (시안: pt53.28, h310.84, radius29.97) */
.ps-after__image {
  position: relative;
  margin-top: 53.28px;
  width: 100%;
  height: 310.84px;
  border-radius: 29.97px;
  overflow: hidden;
  background: var(--color-white);
}
.ps-after__pic {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.5s ease;
}
.ps-after__pic.is-active {
  opacity: 1;
}

/* 우: 박스 래퍼 (시안 w615.44, pt427.5 pb162, gap162) */
.ps-after__boxwrap {
  flex-shrink: 0;
  width: 615.44px;
  display: flex;
  flex-direction: column;
  gap: 162px;
  padding: 427.5px 0 162px;
}
.ps-after__box {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12.28px;
  opacity: 0.3;
  transition: opacity 0.4s ease;
}
.ps-after__box.is-active {
  opacity: 1;
}
.ps-after__box-tit {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10.8px;
  font-size: 23px;
  font-weight: 700;
  line-height: 32.2px;
  color: var(--color-text);
  white-space: nowrap;
}
.ps-after__num {
  flex-shrink: 0;
  width: 27.3px;
  height: 27.3px;
  border-radius: 13.65px;
  background: var(--color-black);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  line-height: 18.2px;
  color: var(--color-white);
}

/* 리스트 (시안 w573.14 우측정렬, li 간 gap8.5, 두 번째 줄 9px 들여쓰기, line25.5) */
.ps-after__list {
  width: 573.14px;
  display: flex;
  flex-direction: column;
  gap: 8.5px;
}
.ps-after__list li {
  padding-left: 9px;
  text-indent: -9px;        /* 첫 줄 불릿은 0, 이어지는 줄은 9px 들여쓰기 */
  font-size: 17px;
  font-weight: 400;
  line-height: 25.5px;
  color: var(--color-text);
}

/* 푸터: 관리 섹션 하단~푸터 간격 (시안 y기준) */
.footer {
  margin-top: 118px;         /* 시안: 콘텐츠 하단(5432.83)~푸터(5551) */
}

/* =========================================================
   모바일 반응형 (≤768px) — preserve (ps-)
   ========================================================= */
@media (max-width: 768px) {
  /* 히어로 */
  .ps-hero {
    height: 360px;
  }
  .ps-hero__inner {
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    justify-content: center;
    padding: 0 20px;
  }
  .ps-hero__title {
    font-size: 34px;
    line-height: 1.2;
    white-space: normal;
  }
  .ps-hero__sub {
    font-size: 15px;
    line-height: 1.5;
    white-space: normal;
  }

  /* 인트로 */
  .ps-intro {
    margin-top: 56px;
  }
  .ps-intro__inner {
    width: 100%;
    gap: 28px;
  }
  .ps-intro__lead {
    font-size: 21px;
    line-height: 1.5;
  }
  .ps-intro__desc p {
    font-size: 15px;
    line-height: 1.7;
  }
  .ps-intro__img {
    height: auto;
    aspect-ratio: 4 / 3;
  }

  /* 대표적인 증상 (좌우 → 세로) */
  .ps-adv {
    margin-top: 56px;
  }
  .ps-adv__inner {
    width: 100%;
  }
  .ps-adv__cont {
    flex-direction: column;
    gap: 32px;
    padding: 56px 0;
  }
  .ps-adv__head {
    width: 100%;
  }
  .ps-adv__tit {
    font-size: 26px;
    line-height: 1.35;
    white-space: normal;
  }
  .ps-adv__txt {
    font-size: 15px;
    line-height: 1.7;
    white-space: normal;
  }
  .ps-adv__list {
    padding-left: 0;
  }
  .ps-adv__box {
    padding: 16px 20px;
  }
  .ps-adv__box-txt {
    font-size: 15px;
    line-height: 1.5;
    white-space: normal;
  }

  /* 신경 치료 과정 (STEP) */
  .ps-process {
    margin-top: 56px;
  }
  .ps-process__inner {
    width: 100%;
    gap: 28px;
  }
  .ps-process__tit {
    font-size: 24px;
    line-height: 1.4;
  }
  .ps-process__step {
    padding: 16px 20px;
  }
  .ps-process__step-desc {
    font-size: 15px;
    line-height: 1.6;
    white-space: normal;
  }

  /* 신경 치료 후 관리 (sticky 해제, 세로 스택, 전체 노출) */
  .ps-after {
    margin-top: 56px;
  }
  .ps-after__inner {
    width: 100%;
  }
  .ps-after__cont {
    flex-direction: column;
    gap: 32px;
  }
  .ps-after__sticky {
    width: 100%;
    position: static;
    top: auto;
  }
  .ps-after__tit {
    font-size: 26px;
    line-height: 1.35;
  }
  .ps-after__txt {
    font-size: 15px;
    line-height: 1.7;
  }
  .ps-after__image {
    margin-top: 24px;
    height: auto;
    aspect-ratio: 16 / 10;
  }
  /* 모바일에선 첫 이미지 고정 (GSAP 스크롤 전환 무효화) */
  .ps-after__pic.is-active {
    opacity: 0;
  }
  .ps-after__pic:first-child {
    opacity: 1;
  }
  .ps-after__boxwrap {
    width: 100%;
    gap: 32px;
    padding: 0;
  }
  /* 비활성 박스도 모바일에선 항상 노출 + 좌측 정렬 */
  .ps-after__box {
    align-items: flex-start;
    opacity: 1;
  }
  .ps-after__box-tit {
    font-size: 20px;
    line-height: 1.4;
    white-space: normal;
  }
  .ps-after__list {
    width: 100%;
  }
  .ps-after__list li {
    font-size: 15px;
    line-height: 1.6;
  }

  /* 푸터 간격 축소 */
  .footer {
    margin-top: 56px;
  }
}