@charset "utf-8";

/* ============================================================
   impl.css — 임플란트 구역 (#impl-page)

   원페이지의 한 구역이다 — 래퍼는 #main-page 와 형제. 중첩하면 스코프가 겹친다
   마크업 : sections/impl/   ·   동작 : assets/js/index.js (슬라이드는 ui.js)

   토큰(#impl-page { … })은 index.css 와 같은 묶음을 그대로 둔다 —
   쓰지 않는 변수가 남아도 무해하고, 나눌 때 빠뜨리는 쪽이 위험하다
   ============================================================ */

#impl-page {
  /* 골드 포인트 — 컬러칩에 없는 색이라 페이지 토큰으로 둔다 (teeth · tmj · tour 도 같은 값) */
  --one-pt: #dbba39;
  --one-pt2 : #d8bc37;
  --one-cgray:  #b6b9bf;
  --one-space-lg: 82px;          /* 섹션 상하 여백이 아니다 — 그건 ui.css 가 --one-space-xl 로 덮는다. 리스트 줄 간격 등에만 남아 있는 값 */

  /* 01 비주얼 */
  --one-vis-ratio: 1920 / 860;
  --one-vis-min: 480px;
  --one-vis-lead: 1.6;           /* 설명 줄간격 */
  --one-vis-dot: 12px;           /* 페이지네이션 점 지름 */
  --one-vis-dot-gap: 12px;       /* 점 사이 간격 */
  --one-vis-dot-btm: 40px;       /* 점을 아래에서 띄우는 거리 */

  /* 02 진료과목 */
  --one-trt-col: 5;
  --one-trt-ratio: 385 / 549;    /* 크롭 원본 비율 */
  --one-trt-top: 58%;            /* 카드 제목 시작 위치 — 카드 폭 기준 (비율 고정이라 높이에 비례). 58% = 높이의 약 40% */
  --one-trt-hover: rgba(0, 0, 0, 0.2);   /* hover 시 덧입히는 색 — 끝 숫자가 진하기 */

  /* 03 ~ 06 */
  --one-guide-col: 4;
  --one-trgt-col: 4;
  --one-slide-dot: 10px;         /* 슬라이드 점 지름 */
  --one-slide-dot-gap: 10px;     /* 점 사이 간격 */
  --one-proc-num: 80px;          /* 프로세스 단계 숫자 */
  --one-band-brown: #7d6549;     /* 추천 대상 밴드 */
  --one-band-dark: #655847;      /* 장비 밴드 */
  --one-eqp-lead: 1.9;           /* 장비 설명 줄간격 — 시안이 본문보다 넓다 */
  --one-slide-img-w: 553px;      /* 프로세스 · 장비 슬라이드 사진 열 — 크롭 원본 폭. 늘리면 흐려진다 */
  --one-trgt-icon: 150px;        /* 추천 대상 아이콘 지름 — 크롭 원본 184 보다 작게 */
  --one-slide-ext: 100px;        /* 슬라이드 글 열을 왼쪽으로 넓히는 폭 (PC 전용) */
  --one-slide-btn: 70px;         /* 화살표를 콘텐츠 바깥으로 내보내는 거리 */
  --one-slide-arw: 18px;         /* 화살표 한 변 길이 */
  --one-slide-nav-pt: 40px;      /* 점 줄 위 여백 — 화살표 세로 중심 계산에도 쓴다 */
  --one-ink: #111;               /* 재료 목록 글자 — 본문색(#222)보다 한 단계 진한 검정 */
  --one-ins-w: 40%;              /* 건강보험 — 글 열 폭 (나머지는 사진 자리) */
  --one-ins-top: var(--one-space-xl);   /* 건강보험 — 글 위 여백. 다른 섹션과 같은 토큰 (PC 120 · 태블릿 100 · 모바일 15vw) */
  --one-ins-btm: 132px;          /* 건강보험 — 글 아래 여백. 키울수록 사진이 더 보이고 글은 위로 붙는다 */
  /* 건강보험 — 번호 크기. 글자 눈높이(약 0.72em)가 라벨 + 값 두 줄 높이와 같아지게 역산한다 */
  --one-ins-txt-h: calc(var(--one-caption) * var(--one-lh-r) + var(--one-gap-xs) + var(--one-body) * var(--one-lh-r));
  --one-ins-num: calc(var(--one-ins-txt-h) / 0.72);
}

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

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

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

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

/* ============================
   공통 — 슬라이드 (04 · 05 · 06)
   시안은 텍스트 좌 · 이미지 우. 점은 아래 가운데 한 줄, 화살표는 콘텐츠 양옆 바깥.
   .slide-body 를 contents 로 풀어 글 · 사진 · 점을 그리드에 직접 앉힌다
============================ */

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

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

/* 글 열만 왼쪽으로 --one-slide-ext 만큼 넓힌다 — row 를 빼고 사진과 점 줄은 그만큼 되돌린다 */
#impl-page .slide-row {
  position: relative;   /* 화살표 기준 */
  margin-left: calc(var(--one-slide-ext) * -1);
}

#impl-page .slide-vis {
  order: 2;
  border-radius: 0;
  /* 100% 면 margin 만큼 오른쪽으로 삐져나와 > 를 덮는다.
     auto 는 안 된다 — Swiper 의 margin-right:auto 가 살아나 폭이 0 으로 접힌다 */
  width: calc(100% - var(--one-slide-ext));
  margin-left: var(--one-slide-ext);
}

#impl-page .slide-nav {
  display: flex;   /* ui.css 가 모바일에서 none 으로 숨긴다 — 점은 보여야 한다 */
  order: 3;
  grid-column: 1 / -1;
  justify-content: center;
  padding-top: var(--one-slide-nav-pt);
  padding-left: var(--one-slide-ext);   /* 넓어진 그리드가 아니라 콘텐츠 가운데에 맞춘다 */
}

/* 화살표 — 글 · 사진 행의 세로 중심. row 높이에서 점 줄(그리드 gap + 위 여백 + 점)을 뺀 절반 */
#impl-page .slide-btn {
  position: absolute;
  z-index: 2;   /* .swiper(z-index:1) 위 */
  top: calc((100% - var(--one-gap-xl) - var(--one-slide-nav-pt) - var(--one-slide-dot)) / 2);
  transform: translateY(-50%);
}

/* row 왼끝이 곧 글 왼끝이다 — ext 만큼 넓어진 열 안에서 글이 시작한다 */
#impl-page .slide-prev {
  left: calc(var(--one-slide-btn) * -1);
}

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

/* 가는 선 하나 — ui.css 의 굵은 화살표(9px · 2px)를 시안대로 크고 얇게 */
#impl-page .slide-btn::before {
  width: var(--one-slide-arw);
  height: var(--one-slide-arw);
  border-width: 1px;
  border-color: var(--gray-color01);
}

/* 갈색 밴드 위에서는 흰 화살표 */
#impl-page .sec-eqp .slide-btn::before {
  border-color: var(--white-color);
}

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

#impl-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;
}

#impl-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;
}

/* 갈색 밴드 위에서는 흰 점 */
#impl-page .sec-eqp .slide-pg .swiper-pagination-bullet {
  background-color: var(--white-color);
}

/* ============================
   03 임플란트 인트로
============================ */

#impl-page .sec-impl .impl-sub {
  padding-top: var(--one-gap-sm);
  color: var(--sub-color12);
  font-weight: 500;
  font-size: 23px;
}
#impl-page .sec-impl .impl-txt {
  color: var(--sub-color12);
  font-weight: 500;
  margin: -10px;
}

#impl-page .sec-impl .impl-txt-u {
  margin-bottom: 5px !important;
}

#impl-page .impl-lead {
  padding-bottom: var(--one-gap-lg);
  color: var(--sub-color12);
}

#impl-page .impl-quote {
  color: var(--sub-color12);
  font-size: 23px;
  font-weight: 500;
  padding: -10px;
}

#impl-page .impl-desc {
  padding-top: var(--one-gap-xl);
  color: var(--one-txt-desc);
}

#impl-page .impl-img {
  padding-top: var(--one-space-r);
}

#impl-page .impl-img img {
  width: auto;
  max-width: 100%;
  margin-bottom: -40px;
}

/* ============================
   03 왜 3D 정밀분석 가이드일까요
============================ */

#impl-page .sec-guide {
  background-color: #f9f8f4;
}

#impl-page .sec-guide .hd3 {
  color: var(--sub-color14);
}

#impl-page .guide-lst {
  display: grid;
  grid-template-columns: repeat(var(--one-guide-col), 1fr);
  gap: var(--one-gap-lg);
}

#impl-page .guide-item {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 1em;
  text-align: center;
}

/* 제목이 1줄인 칸도 2줄 칸과 금색 띠 높이를 맞춘다 */
#impl-page .guide-tit {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(2.6em + var(--one-gap-lg) * 2);
  padding: var(--one-gap-lg) var(--one-gap-r);
  background-color: var(--one-pt2);
  font-size: var(--one-p-tit);
}

#impl-page .guide-body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--one-space-sl) var(--one-gap-r);
  background-color: var(--white-color);
}

#impl-page .guide-icon {
  width: auto;
  max-width: 100%;
  margin-bottom: var(--one-space-s);
}

#impl-page .guide-desc {
  font-size: var(--one-body);
  color: var(--sub-color04);
}

/* ============================
   04 가이드 임플란트 프로세스
============================ */

#impl-page .sec-proc {
  --one-slide-nav-pt: 0px;   /* 점 줄 위 여백은 그리드 gap 만 */
}

/* 시안은 [숫자 | 제목 + 설명] — 숫자를 왼쪽에 절대배치하고 글은 그 폭만큼 들여서 왼쪽 정렬 */
#impl-page .sec-proc .slide-cont .swiper-slide {
  position: relative;
  padding-left: calc(var(--one-proc-num) * 1.6);   /* 숫자 두 자리 폭(1.0) + 간격(0.6) */
}

/* 숫자 윗선을 제목 글자 윗선에 맞춘다 — line-height:1 이라 줄상자 = 글자, top 은 제목 줄상자의 위 반여백 */
#impl-page .proc-num {
  position: absolute;
  top: calc(var(--one-hd3) * (var(--one-lh-lg) - 1) / 2);
  left: 0;
  font-family: var(--one-num-ft);
  font-size: var(--one-proc-num);
  line-height: 1 !important;
  color: var(--one-num-cap);   /* 큰 숫자는 은은하게 — gray03 은 배경용이라 글자로 쓰면 안 보인다 */
}

/* ============================
   04 이런 분들께 추천합니다
============================ */

#impl-page .sec-trgt {
  background-color: var(--one-band-brown);
}

#impl-page .proc-txt-intro {
  letter-spacing: 0.01em;
}

#impl-page .trgt-lst {
  display: grid;
  grid-template-columns: repeat(var(--one-trgt-col), 1fr);
  gap: var(--one-gap-xl);
}

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

/* 원 배경은 크롭 PNG 에 들어 있다 */
#impl-page .trgt-icon {
  width: var(--one-trgt-icon);
  max-width: 100%;
  margin-bottom: var(--one-gap-lg);
}

/* 아이콘을 줄인 만큼 글도 한 단계 작게 */
#impl-page .trgt-desc {
  font-size: var(--one-body);
}

#impl-page .sec-proc .sec-trgt .hd3 {
  font-size: var(--one-hd4);
}

#impl-page .txt-wrap .cp-txt {
  font-size: var(--one-body);
  margin-bottom: -5px;
}


/* ============================
   05 임플란트 재료
============================ */

#impl-page .sec-matr .matr-sub {
  padding-top: var(--one-gap-sm);
  color: var(--sub-color06);
}

#impl-page .matr-img {
  padding-bottom: var(--one-space-r);
}

#impl-page .matr-img img {
  width: auto;
  max-width: 100%;
}

#impl-page .matr-lead {
  color: var(--sub-color06);
}

#impl-page .matr-desc {
  padding-top: var(--one-gap-lg);
}

#impl-page .sec-brand {
  background-color: #f8f8f8;
}

#impl-page .brand-lst {
  padding-top: var(--one-gap-lg);
  color: var(--one-ink);
}

#impl-page .txt-uc {
  letter-spacing: 0.4em;
  margin-top: 20px;
}

#impl-page .brand-cap {
  font-style: italic;
  letter-spacing: -0.05em;
  color: var(--gray-color08);
}

#impl-page .brand-tit {
  font-size: var(--one-hd3);
}

/* ============================
   06 최첨단 진료 장비
============================ */

#impl-page .sec-eqp {
  --one-slide-ext: 0px;   /* 글 열 확장을 끈다 — 점을 중심으로 글 왼끝 · 사진 오른끝이 대칭이어야 한다 */
  --one-slide-nav-pt: 50px;
  background-color: var(--one-band-dark);
}

/* 사진 열은 원본 폭으로 고정 — 글 열이 1fr 1fr 보다 넓어져 br 줄바꿈이 유지된다 */
#impl-page .sec-proc .slide-row,
#impl-page .sec-eqp .slide-row {
  grid-template-columns: minmax(0, 1fr) min(calc(var(--one-slide-img-w) + var(--one-slide-ext)), 50%);   /* 사진 열은 ext 를 margin 으로 되돌리므로 그만큼 더 준다 */
}

/* 캡션 — 제목과 붙지 않게 자간을 준다 */
#impl-page .eqp-cap {
  padding-bottom: var(--one-gap-sm);
  letter-spacing: 0.1em;
  font-style: italic;
}

/* 갈색 밴드 위 — ui.css 의 회색 기본값과 좁은 줄간격을 덮는다 */
#impl-page .sec-eqp .slide-desc {
  padding-top: var(--one-gap-lg);
  color: var(--white-color);
  line-height: var(--one-eqp-lead);
}

#impl-page .sec-eqp .hd3 {
  margin: 18px 0px;
}

/* ============================
   06 건강보험 혜택 임플란트
============================ */

#impl-page .sec-ins {
  overflow: hidden;
}

/* 위아래를 따로 잡는다 — 아래를 키우면 사진 자리가 넓어지고 글은 위로 붙는다 */
#impl-page .sec-ins .con-inner {
  padding-top: var(--one-ins-top);
  padding-bottom: var(--one-ins-btm);
}

/* 이 섹션만 제목과 목록 사이를 넓힌다 — 위의 #impl-page .sec-hd 를 덮는다 */
#impl-page .sec-ins .sec-hd {
  margin-bottom: var(--one-space-s);
}

#impl-page .ins-bg {
  position: absolute;
  inset: 0;
  background-image: url(../images/impl/sec04-bg.png);
  background-position: right bottom;
}

/* 우측 사진(노부부)에 글과 구분선이 닿지 않도록 좁힌다 */
#impl-page .ins-lst {
  max-width: var(--one-ins-w);
}

#impl-page .ins-item {
  display: flex;
  gap: var(--one-gap-r);
  padding: var(--one-gap-lg) 0;
  align-items: center;
}

#impl-page .ins-item + .ins-item {
  border-top: 1px solid var(--gray-color03);
}

/* 번호 글자가 라벨 + 값 두 줄 높이를 차지한다 — 크기는 --one-ins-num 이 글 높이에서 역산.
   줄상자를 글자 높이(0.72)로 눌러 위아래 여백이 안 남게 하고 flex 가운데로 글과 맞춘다 */
#impl-page .ins-num {
  flex: 0 0 auto;
  min-width: 1.3em;   /* 자릿수와 상관없이 글 시작선을 고정 */
  color: var(--one-num-color2);
  font-family: var(--one-num-ft);
  font-size: var(--one-ins-num);
  line-height: 0.72 !important;
}

#impl-page .ins-txt {
  flex: 1;
}

#impl-page .ins-label {
  padding-bottom: var(--one-gap-xs);
}

#impl-page .ins-value {
  color: var(--sub-color04);
}

#impl-page .slide-body .slidepg {
  margin-top: 40px;
}

#impl-page .end-div-int {
  letter-spacing: 0.01em;
  font-size: var(--one-body) !important;
}

#impl-page .impl-mac {
  font-size: var(--one-hd3);
}

#impl-page .font-thirtyper {
  font-size: 1.4em;
  display: inline-block;
  margin-top: -0.4em;
}



/* ============================
   PC 만 (1601px 이상) — 02 진료과목 카드
   시안 : 제목 40px · 항목 22px · 항목 간격 14px · 제목→항목 36px · 제목이 카드 높이 31% 지점
============================ */

@media all and (min-width: 1601px) {
  #impl-page {
    --one-trt-top: 45%;   /* 카드 폭 기준 = 높이의 31% */
  }
}

/* ============================
   반응형 — 노트북 (max-width: 1600px)
   콘텐츠(1200) 바깥 여백이 좁아 화살표가 화면 밖으로 나간다 —
   글 열 확장을 끄고 화살표 거리 · 글과 사진 사이를 줄여 안으로 들인다
============================ */

@media all and (max-width: 1600px) {
  #impl-page {
    --one-slide-ext: 0px;
    --one-slide-btn: 40px;
  }

  #impl-page .slide-row {
    column-gap: var(--one-gap-lg);
  }
}

/* ============================
   반응형 — 노트북만 (1025 ~ 1600px)
   화살표가 글 · 사진에 바짝 붙는다 — 글 · 사진을 안쪽으로 들이고 그 사이 간격은 줄인다.
   태블릿(1024 이하)은 1열이라 해당 없음
============================ */

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

  #impl-page .slide-row {
    padding-inline: var(--one-slide-inset);
    column-gap: var(--one-gap-r);
  }

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

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

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

@media all and (max-width: 1024px) {
  #impl-page {
    --one-vis-ratio: 16 / 9;
    --one-vis-min: 460px;
    --one-trt-col: 3;
    --one-guide-col: 2;
    --one-trgt-col: 2;
    --one-proc-num: 64px;
    --one-slide-ext: 0px;   /* 1열로 접히면 글 열 확장이 필요 없다 — 0 으로 두면 calc 가 깨진다 */
    --one-slide-btn: 32px;  /* 섹션 좌우 패딩(48px) 안에 들어온다 */
  }

  /* 1열로 접히면 글 · 사진 · 점이 세로로 쌓인다 — 화살표를 사진 줄(2행)에 붙여 사진 세로 중심에.
     버튼이 .slide-nav 안에 있어 그리드 아이템이 아니다 — nav 를 contents 로 풀어야 grid-row 가 먹는다.
     점(.slide-pg)은 nav 가 갖던 위치 · 여백을 그대로 물려받는다 */
  #impl-page .slide-nav {
    display: contents;
  }

  #impl-page .slide-pg {
    order: 3;
    justify-self: center;
    padding-top: var(--one-slide-nav-pt);
  }

  #impl-page .slide-btn {
    grid-row: 2 / 3;
    grid-column: 1 / -1;
    align-self: center;   /* top 퍼센트 대신 그리드 영역 안 정렬 — 사진 높이와 무관하게 정중앙 */
    top: auto;
    bottom: auto;
    transform: none;
  }

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

  #impl-page .ins-lst {
    max-width: 55%;
  }

  /* 06 건강보험 — 사진이 글 뒤에 깔려 안 읽힌다. 태블릿에서는 사진을 뺀다 */
  #impl-page .ins-bg {
    display: none;
  }
}

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

@media all and (max-width: 639px) {
  #impl-page {
    --one-vis-ratio: 4 / 5;
    --one-vis-min: 400px;
    --one-vis-lead: 1.5;
    --one-vis-top: 26vw;   /* 글 시작 위치 — 모바일 헤더(16vw)보다 아래. 그보다 올리면 헤더 뒤로 들어간다 */
    --one-vis-scrim: rgba(255, 255, 255, 0.9);   /* 글 뒤 흰 막 — 끝 숫자가 진하기 */
    --one-vis-scrim-end: 52%;                    /* 막이 사라지는 높이 — 사진 윗선을 부드럽게 덮는다 */
    --one-vis-dot: 10px;
    --one-vis-dot-gap: 8px;
    --one-vis-dot-btm: 20px;
    --one-trt-col: 1;
    --one-trt-ratio: 3 / 2;
    --one-guide-col: 1;
    --one-trgt-col: 2;
    --one-proc-num: 48px;
  }
  /* 화살표는 자리가 없다 — 점으로만 넘긴다 */
  #impl-page .slide-btn {
    display: none;
  }

  /* 04 프로세스 — 숫자를 흐름 안으로 되돌려 숫자 → 제목 → 설명 세로 가운데 */
  #impl-page .sec-proc .slide-cont .swiper-slide {
    padding-left: 0;
    text-align: center;
  }

  #impl-page .proc-num {
    position: static;
    padding-bottom: var(--one-gap-r);
  }

  /* 부제가 두 줄로 접힌다 — 본문 크기로 한 줄에 */
  #impl-page .matr-sub {
    font-size: var(--one-body);
  }

  #impl-page .ins-lst {
    max-width: none;
  }

  #impl-page .ins-txt {
    text-align: center;
  }

  #impl-page .sec-ins .con-inner {
    padding-bottom: 70px;
  }

  #impl-page .ins-bg {
    background-position: center bottom;
    background-size: 130% auto;
    background-image: none;
  }

}