/* =========================================================
   아뜰리에치과 - 임플란트(implant) 전용 스타일
   :root 변수·헤더·푸터는 style.css 재사용. 1920 데스크탑 전용.
   컬러/사이즈 값은 Figma 시안(임플란트 페이지)에서 MCP로 읽어 확정.
   ========================================================= */

/* 헤더 활성 메뉴 (현재 페이지: 임플란트) */
.gnb__link.is-active {
  color: var(--color-point);
}

/* =========================================================
   섹션 1: 서브 비주얼 배너 (section.relative) - Figma 91:95
   1920×513, 헤더(80) 바로 아래. 리셉션 배경사진 + 텍스트 오버레이.
   텍스트 블록은 시안 좌표(left760 / top205)에 절대 배치(가로 우측 치우침).
   ========================================================= */
.im-hero {
  position: relative;
  height: 513px;
  margin-top: var(--header-height);   /* 고정 헤더 높이(80px)만큼 아래로 */
  overflow: hidden;                    /* 1920 기준 배경 넘침 클립 */
}

.im-hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 텍스트 블록 (시안: left760 top205, px24, gap16, 항목 중앙정렬) */
.im-hero__inner {
  position: absolute;
  left: 760px;
  top: 205px;
  padding: 0 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}

/* 영문 제목 (시안 토큰 Noto Serif KR Light 60 → 프로젝트 관례 Sorts Mill Goudy) */
.im-hero__title {
  font-family: "Sorts Mill Goudy", serif;
  font-size: 60px;
  font-weight: 400;
  line-height: 60px;
  color: var(--color-white);
  white-space: nowrap;
}

/* 국문 부제 (시안 Pretendard Light 20 / line28 / White 80%) */
.im-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 92:1277
   중앙정렬 컬럼. inner 1296(px20 → 콘텐츠 1256). 텍스트블록 + 대표이미지.
   ========================================================= */
.im-intro {
  margin-top: 170px;        /* 시안: 히어로 하단(593)~인트로 상단(763) */
  overflow-x: clip;
}
.im-intro__inner {
  width: 1296px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 45px;                /* 시안: 텍스트블록~이미지 gap 45 */
}

/* 텍스트 블록 (시안: 강조문~본문 gap 21.535) */
.im-intro__text {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 21.535px;
}

/* 강조문 (시안 Pretendard Bold 27 / line45.9 / #3C3C3C) */
.im-intro__lead {
  font-size: 27px;
  font-weight: 700;
  line-height: 45.9px;
  color: var(--color-text);
}

/* 본문 4단락 (시안: 단락 간 gap 7.9) */
.im-intro__desc {
  display: flex;
  flex-direction: column;
  gap: 7.9px;
}
.im-intro__desc p {
  font-size: 17px;
  font-weight: 400;
  line-height: 28.9px;
  color: var(--color-text);
}

/* 대표 이미지 (시안 radius 29.97 / h540.08 / 1256폭 cover) */
.im-intro__img {
  width: 100%;
  height: 540.08px;
  border-radius: 29.97px;
  overflow: hidden;
}
.im-intro__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* =========================================================
   섹션 3: 대표적인 종류 갤러리 (div.sub_im_gall) - Figma 92:1293
   중앙정렬 컬럼. inner 1296(px20 → 1256). 제목 + 3컬럼 이미지 카드.
   ========================================================= */
.im-gall {
  margin-top: 207px;        /* 시안: 인트로 하단(1688.9)~갤러리 상단(1896) */
  overflow-x: clip;
}
.im-gall__inner {
  width: 1296px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 54px;                /* 시안: 제목~갤러리 gap 54 */
}

/* 제목 블록 (시안: 제목~부제 gap 22.09) */
.im-gall__head {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 22.09px;
}
.im-gall__tit {
  font-size: 43.2px;
  font-weight: 700;
  line-height: 60.48px;
  color: var(--color-text);   /* #3C3C3C */
}
.im-gall__txt {
  font-size: 17px;
  font-weight: 400;
  line-height: 28.9px;
  color: var(--color-text);   /* #3C3C3C */
}

/* 3컬럼 갤러리 (시안: gap 25.1, 균등 3열) */
.im-gall__list {
  width: 100%;
  display: flex;
  gap: 25.1px;
}
.im-gall__col {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16.19px;            /* 시안: 이미지~텍스트박스 gap 16.19 */
}

/* 이미지 카드 (시안: h482.28, radius 29.97, cover) */
.im-gall__img {
  position: relative;
  width: 100%;
  height: 482.28px;
  border-radius: 29.97px;
  overflow: hidden;
}
.im-gall__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* hover 오버레이 (브랜드 소렐 브라운 --color-point 85%, opacity 0 → hover 1) */
.im-gall__hover {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(209, 186, 156, 0.85);   /* color-mix 미지원 브라우저용 (#d1ba9c 85%) */
  background: color-mix(in srgb, var(--color-point) 85%, transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.im-gall__col:hover .im-gall__hover {
  opacity: 1;
}
.im-gall__plus {
  font-style: normal;
  font-size: 45px;
  font-weight: 300;
  line-height: 76.5px;
  color: var(--color-white);
}

/* 텍스트 박스 (제목 + more 버튼) */
.im-gall__txtbox {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
}
.im-gall__name {
  font-size: 23px;
  font-weight: 700;
  line-height: 39.1px;
  color: var(--color-text);   /* #3C3C3C */
}

/* more 버튼 (시안: 34.19 원형, orange 20%, 화살표 Meteorite #49257E) */
.im-gall__more {
  flex-shrink: 0;
  width: 34.19px;
  height: 34.19px;
  border: none;
  border-radius: 17.1px;
  background: rgba(195, 149, 105, 0.2);    /* 시안 Twine 20% */
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.im-gall__arrow {
  position: relative;
  width: 8px;
  height: 8px;
  border-top: 1.5px solid #49257e;         /* 시안 Meteorite #49257E */
  border-right: 1.5px solid #49257e;
  transform: translateX(-1px) rotate(45deg);
}

/* =========================================================
   섹션 4: 시스템의 장점 (div.sub_im_adv) - Figma 92:1368
   회색(#F2F2F2) 배경 풀블리드. inner 1296. 좌 제목+설명 / 우 CHECK 리스트.
   ========================================================= */
.im-adv {
  margin-top: 210.62px;     /* 시안: 갤러리 하단(2660.38)~섹션 상단(2871) */
  background: var(--color-grey-95);   /* 시안 Concrete #F2F2F2 */
  overflow-x: clip;
}
.im-adv__inner {
  width: 1296px;
  margin: 0 auto;
  padding: 0 20px;
}
.im-adv__cont {
  display: flex;
  align-items: flex-start;
  gap: 230.1px;             /* 시안: 좌 제목~우 리스트 gap 230.1 */
  padding: 171px 0 153px;   /* 시안 cont pt171 pb153 */
}

/* 좌: 제목 블록 (시안 w393.03) */
.im-adv__head {
  flex-shrink: 0;
  width: 393.03px;
  display: flex;
  flex-direction: column;
  gap: 21.49px;             /* 시안: 제목 하단~설명 top 142.45 */
}
.im-adv__tit {
  font-size: 43.2px;
  font-weight: 700;
  line-height: 60.48px;
  color: var(--color-text);   /* #3C3C3C */
  white-space: nowrap;
}
.im-adv__txt {
  font-size: 17px;
  font-weight: 400;
  line-height: 28.9px;
  color: var(--color-text);   /* #3C3C3C */
  white-space: nowrap;
}

/* 우: CHECK 리스트 (시안 wrapper pl30, 박스 간 gap20.7) */
.im-adv__list {
  flex: 1 0 0;
  min-width: 0;
  padding-left: 30px;
  display: flex;
  flex-direction: column;
  gap: 20.7px;
}

/* CHECK 박스 (시안: 흰 알약, px26.1 py23.4) */
.im-adv__box {
  display: flex;
  align-items: flex-start;
  padding: 23.4px 26.1px;
  background: var(--color-white);
  border-radius: 599.94px;
}
/* CHECK 뱃지 (시안: 포인트색 알약, Bold 13 white, pr13.5 간격) */
.im-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;
}
.im-adv__box-txt {
  font-size: 17px;
  font-weight: 700;
  line-height: 28.9px;
  color: var(--color-text);   /* #3C3C3C */
  white-space: nowrap;
}

/* =========================================================
   섹션 5: 어떤 사람이 하면 좋을까 (div.sub_im_tb) - Figma 92:1337
   흰 배경. inner 1296. 좌 제목(w426.55) / 우 번호리스트 01~05.
   ========================================================= */
.im-tb {
  margin-top: 276.4px;      /* 시안: 장점 섹션 하단(3464.6)~섹션 상단(3741) */
  overflow-x: clip;
}
.im-tb__inner {
  width: 1296px;
  margin: 0 auto;
  padding: 0 20px;
}
.im-tb__cont {
  display: flex;
  align-items: flex-start;
  gap: 226.58px;            /* 시안: 좌 제목~우 리스트 gap 226.58 */
}

/* 좌: 제목 (시안 w426.55) */
.im-tb__head {
  flex-shrink: 0;
  width: 426.55px;
}
.im-tb__tit {
  font-size: 43.2px;
  font-weight: 700;
  line-height: 60.48px;
  color: var(--color-text);   /* #3C3C3C */
  white-space: nowrap;
}

/* 우: 번호 리스트 (시안 박스 간 gap 20.7) */
.im-tb__list {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 20.7px;
}

/* 번호 박스 (시안: Twine 20% 알약, px26.1 py23.4) */
.im-tb__box {
  display: flex;
  align-items: center;        /* 번호·문구 같은 라인 정렬 */
  padding: 23.4px 26.1px;
  background: rgba(195, 149, 105, 0.2);   /* 시안 Twine 20% */
  border-radius: 599.94px;
}
/* 번호 (시안: 포인트색 Bold 20 / line34, 텍스트와 13px 간격) */
.im-tb__num {
  flex-shrink: 0;
  margin-right: 13px;
  font-size: 20px;
  font-weight: 700;
  line-height: 34px;
  color: var(--color-point);   /* 시안 Sorrell Brown #D1BA9C */
}
.im-tb__box-txt {
  font-size: 17px;
  font-weight: 500;            /* Medium */
  line-height: 28.9px;
  color: var(--color-text);   /* #3C3C3C */
  white-space: nowrap;
}

/* =========================================================
   섹션 6: 수술 후 관리 (div.sub_im_after) - Figma 92:1393
   좌 sticky 패널(제목+이미지) / 우 박스 01~07. 스크롤 시 활성 전환(GSAP).
   ※ sticky 유지를 위해 이 섹션 조상에는 overflow-x:hidden 미적용
     (1920 전용·1256 중앙정렬이라 가로 넘침 없음).
   ========================================================= */
.im-after {
  margin-top: 280.41px;     /* 시안: 섹션5 하단(4218.59)~섹션6 상단(4499) */
}
.im-after__inner {
  width: 1296px;
  margin: 0 auto;
  padding: 0 20px;
}
.im-after__cont {
  display: flex;
  align-items: flex-start;
  gap: 75.37px;             /* 시안: 좌 패널~우 박스 gap 75.37 */
}

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

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

/* 우: 박스 래퍼 (시안 w615.44, pt427.5 pb162, 박스 간 gap162) */
.im-after__boxwrap {
  flex-shrink: 0;
  width: 615.44px;
  display: flex;
  flex-direction: column;
  gap: 162px;
  padding: 427.5px 0 162px;
}

/* 박스 (시안: 비활성 opacity 0.3, 내용 우측정렬 items-end, 제목~리스트 gap 11.28) */
.im-after__box {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 11.28px;
  opacity: 0.3;
  transition: opacity 0.4s ease;
}
.im-after__box.is-active {
  opacity: 1;
}

/* 박스 제목 (번호 뱃지 + 텍스트, 시안 gap10.8) */
.im-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);   /* #3C3C3C */
  white-space: nowrap;
}
/* 번호 뱃지 (시안: 검정 원 27.3, 흰 Bold 13/line18.2) */
.im-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 간 gap7.5, line25.5 */
.im-after__list {
  width: 573.14px;
  display: flex;
  flex-direction: column;
  gap: 7.5px;
}
.im-after__list li {
  font-size: 17px;
  font-weight: 400;
  line-height: 25.5px;
  color: var(--color-text);   /* #3C3C3C */
}

/* 리스트(문단형, 05~07) — 시안 w573.14 우측정렬, line28.9 */
.im-after__desc {
  width: 573.14px;
}
.im-after__desc p {
  font-size: 17px;
  font-weight: 400;
  line-height: 28.9px;
  color: var(--color-text);   /* #3C3C3C */
  white-space: nowrap;
}

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

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

  /* 갤러리 (3열 → 세로 1열) */
  .im-gall {
    margin-top: 56px;
  }
  .im-gall__inner {
    width: 100%;
    gap: 32px;
  }
  .im-gall__tit {
    font-size: 26px;
    line-height: 1.35;
  }
  .im-gall__txt {
    font-size: 15px;
    line-height: 1.7;
  }
  .im-gall__list {
    flex-direction: column;
    gap: 28px;
  }
  .im-gall__img {
    height: auto;
    aspect-ratio: 3 / 4;
  }

  /* 시스템의 장점 (좌우 → 세로) */
  .im-adv {
    margin-top: 56px;
  }
  .im-adv__inner {
    width: 100%;
  }
  .im-adv__cont {
    flex-direction: column;
    gap: 32px;
    padding: 56px 0;
  }
  .im-adv__head {
    width: 100%;
  }
  .im-adv__tit {
    font-size: 26px;
    line-height: 1.35;
    white-space: normal;
  }
  .im-adv__txt {
    font-size: 15px;
    line-height: 1.7;
    white-space: normal;
  }
  .im-adv__list {
    padding-left: 0;
  }
  .im-adv__box {
    padding: 16px 20px;
  }
  .im-adv__box-txt {
    font-size: 15px;
    line-height: 1.5;
    white-space: normal;
  }

  /* 어떤 사람이 하면 좋을까 (좌우 → 세로) */
  .im-tb {
    margin-top: 56px;
  }
  .im-tb__inner {
    width: 100%;
  }
  .im-tb__cont {
    flex-direction: column;
    gap: 28px;
  }
  .im-tb__head {
    width: 100%;
  }
  .im-tb__tit {
    font-size: 26px;
    line-height: 1.35;
    white-space: normal;
  }
  .im-tb__box {
    padding: 16px 20px;
  }
  .im-tb__box-txt {
    font-size: 15px;
    line-height: 1.5;
    white-space: normal;
  }

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