/* 2차 시안 이식 공통 레이어 — 퍼스널라미 · 디지털 임플란트
   치수는 시안 프레임(1920 폭) 값을 그대로 박는다. 근사 클래스를 쓰지 않는다. */

.fg2 { box-sizing: border-box; }
.fg2 *, .fg2 *::before, .fg2 *::after { box-sizing: border-box; }

.fg2__sec {
  position: relative;
  width: 100%;
  margin: 0;
  padding: 0;
}
.fg2__inner {
  width: 1200px;
  max-width: calc(100% - 40px);
  margin: 0 auto;
}

/* ── 히어로 ─────────────────────────────── */
.fg2-hero { background: #ffffff; }
.fg2-hero__head {
  padding: 100px 170px 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.fg2-hero__en {
  margin: 0;
  font-family: var(--dn-hero-display) !important;
  font-size: 80px;
  line-height: 76px;
  /* 시안값 400 — h1 전역 굵기 규칙이 덮지 않게 고정한다(두 지면이 같은 값이어야 한다). */
  font-weight: 400 !important;
  letter-spacing: 0;
  color: #000000;
  text-align: center;
}
.fg2-hero__lead {
  margin: 0;
  font-size: 30px;
  line-height: 36px;
  /* 이 줄이 h1 인 지면과 p 인 지면이 있어 공통 제목 규칙이 굵기를 갈랐다 — 시안 값으로 고정한다 */
  font-weight: 400 !important;
  letter-spacing: -1px;
  color: #222222;
  text-align: center;
}
/* 제목 뒤에 붙는 상담 버튼 줄은 전 지면 공통 셸이 넣는다.
   시안 머리 높이를 지키려고 아래 여백 안에 겹쳐 둔다.
   좁은 화면은 아래 여백이 좁아 흐름 그대로 둔다. */
@media (min-width: 1024px) {
  .fg2-hero__head { position: relative; }
  .fg2-hero__head > .dn-hero-cta {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 11px;
    margin: 0;
    text-align: center;
  }
}
/* 시안 프레임은 1920x600 이다 — 높이를 px 로 박으면 좁은 창에서 비율이 바뀌어
   사진이 확대되고 좌우가 잘린다. 비율로 고정해 어느 폭에서도 시안 구도를 지킨다. */
.fg2-hero__media {
  width: 100%;
  height: auto;
  aspect-ratio: 1920 / 600;
  display: block;
  object-fit: cover;
  object-position: 50% 50%;
  background: rgba(0, 0, 0, 0.10);
}

/* ── 섹션 머리(라벨 + 제목 + 리드) ───────── */
.fg2-head { display: flex; flex-direction: column; gap: 16px; }
.fg2-head__label {
  margin: 0;
  font-size: 12px;
  line-height: 14px;
  font-weight: 600;
  letter-spacing: 3px;
  color: #6b6b6b;
}
.fg2-head__body { display: flex; flex-direction: column; gap: 5px; }
.fg2-head__title {
  margin: 0;
  font-size: 40px;
  line-height: 52px;
  font-weight: 600;
  letter-spacing: -0.6px;
  color: #0a0a0a;
}
.fg2-head__lead {
  margin: 0;
  font-size: 18px;
  line-height: 30px;
  font-weight: 400;
  letter-spacing: -0.27px;
  color: #333333;
}
.fg2-head__lead--thin { font-weight: 300; }

/* ── 카드(이미지 + 제목 + 설명) ──────────── */
.fg2-cards { display: flex; gap: 20px; }
.fg2-card { display: flex; flex-direction: column; gap: 18px; flex: 1 1 0; min-width: 0; }
.fg2-card__media {
  width: 100%;
  height: 300px;
  display: block;
  object-fit: cover;
  object-position: 50% 50%;
  background: #ffffff;
}
.fg2-card__text { display: flex; flex-direction: column; gap: 0; }
.fg2-card__title {
  margin: 0;
  font-size: 18px;
  line-height: 30px;
  font-weight: 600;
  letter-spacing: -0.25px;
  color: #0a0a0a;
}
.fg2-card__desc {
  margin: 0;
  font-size: 16px;
  line-height: 28px;
  font-weight: 400;
  letter-spacing: 0;
  color: #6b6b6b;
  /* 시안은 어절을 붙들지 않고 줄을 채운다 — 줄 수를 맞추려면 같은 방식이어야 한다 */
  word-break: normal;
}

/* ── 노트 박스(패딩 30, 흰 바탕) ─────────── */
.fg2-notes { display: flex; gap: 20px; }
.fg2-notes--tight { gap: 14px; }
.fg2-note {
  flex: 1 1 0;
  min-width: 0;
  padding: 30px;
  background: #ffffff;
  display: flex;
  flex-direction: column;
  gap: 0;
}
/* 시안에서 이 묶음만 안쪽 여백이 31 이다 */
.fg2-note--plain { background: transparent; padding: 31px; }
.fg2-note__title {
  margin: 0;
  font-size: 18px;
  line-height: 30px;
  font-weight: 600;
  letter-spacing: -0.25px;
  color: #0a0a0a;
}
.fg2-note__desc {
  margin: 0;
  font-size: 16px;
  line-height: 28px;
  font-weight: 400;
  letter-spacing: 0;
  color: #6b6b6b;
}

/* ── 좌우 2단(이미지 + 설명) ─────────────── */
.fg2-split { display: flex; gap: 50px; align-items: flex-start; }
.fg2-split__media {
  width: 635px;
  height: 300px;
  flex: 0 0 635px;
  display: block;
  object-fit: cover;
  object-position: 50% 50%;
}
.fg2-split__body { width: 515px; flex: 0 0 515px; display: flex; flex-direction: column; gap: 6px; }
.fg2-split__heads { display: flex; flex-direction: column; gap: 0; }
.fg2-split__title {
  margin: 0;
  font-size: 24px;
  line-height: 40px;
  font-weight: 600;
  letter-spacing: -0.25px;
  color: #0a0a0a;
}
.fg2-split__sub {
  margin: 0;
  font-size: 18px;
  line-height: 30px;
  font-weight: 600;
  letter-spacing: -0.25px;
  color: #0a0a0a;
}
.fg2-split__desc {
  margin: 0;
  font-size: 16px;
  line-height: 28px;
  font-weight: 400;
  letter-spacing: 0;
  color: #6b6b6b;
}

/* 시안에서 카드 4장이 컨테이너 폭을 넘어 놓여 있다 — 가로로 밀어 본다 */
.fg2-rail {
  display: flex;
  /* 시안은 카드마다 높이가 다르다 — 늘려 맞추면 그 차이가 지워진다 */
  align-items: flex-start;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 4px;
}
.fg2-rail > * { flex: 0 0 590px; scroll-snap-align: start; }
/* 시안에서 이 줄의 카드만 사진과 글 사이가 22 다 */
.fg2-rail .fg2-card { gap: 22px; }
.fg2-rail::-webkit-scrollbar { height: 6px; }
.fg2-rail::-webkit-scrollbar-thumb { background: #cfcfcf; border-radius: 999px; }

.fg2-figure { margin: 0; }
.fg2-figure__media { width: 100%; height: 420px; display: block; object-fit: cover; object-position: 50% 42%;
  border-radius: 14px; }

/* ── 좁은 화면 ─────────────────────────────
   폰 첫 화면은 사진이 주인공이다. 글자는 작게 위아래로 몰고 가운데를 사진에 비운다.
   공통 타이포가 좁은 화면에서 줄높이와 그림 높이를 강제하므로 같은 세기로 적는다. */
@media (max-width: 1023px) {
  .fg2-hero__head { padding: 24px 20px 14px; gap: 6px; }
  .fg2-hero__en { font-size: 30px !important; line-height: 34px !important; }
  .fg2-hero__lead { font-size: 15px !important; line-height: 22px !important; letter-spacing: -0.3px; }
  /* 좁은 화면은 세로로 크게 잘린다 — 초점을 입가로 옮겨 치아가 화면 밖으로 밀리지 않게 한다 */
  .fg2-hero__media { height: 400px !important; border-radius: 200px 200px 0 0; object-position: 68% 50%; }
  /* 퍼스널라미 히어로는 물체 사진이라 가로 중심 크롭을 쓴다 */
  .fg2[data-fig-page="38:1762"] .fg2-hero__media { object-position: 50% 30.82%; }
  .fg2-head__title { font-size: 26px; line-height: 36px; }
  .fg2-head__lead { font-size: 16px; line-height: 27px !important; }
  .fg2-card__desc, .fg2-note__desc, .fg2-split__desc { line-height: 26px !important; }
  .fg2-cards { flex-direction: column; gap: 28px; }
  .fg2-notes, .fg2-notes--tight { flex-direction: column; gap: 14px; }
  .fg2-split { flex-direction: column; gap: 20px; }
  .fg2-split__media { width: 100%; flex: 0 0 auto; height: 240px !important; }
  .fg2-split__body { width: 100%; flex: 0 0 auto; }
  .fg2-split__title { font-size: 21px; line-height: 32px; }
  .fg2-split__sub { font-size: 16px; line-height: 26px !important; }
  .fg2-rail > * { flex: 0 0 264px; }
  .fg2-card__media { height: 200px !important; }
  .fg2-figure__media { height: 240px !important; }
  .fg2-split--flip { flex-direction: column-reverse; }
}

/* 셸 공통 타이포가 제목·문단에 여백을 얹는다 — 시안 치수를 지키려면 지워야 한다 */
.fg2 h1, .fg2 h2, .fg2 h3, .fg2 p, .fg2 figure { margin: 0 !important; }
/* 위 한 줄이 인라인 여백까지 눌러서, 시안에 있는 간격은 클래스로 되돌린다 */
.fg2 .fg2-figure--gap80 { margin-top: 80px !important; }
.fg2 img { max-width: 100%; }
/* 히어로 사진은 위쪽 두 모서리만 둥글다 */
.fg2-hero__media { border-radius: 400px 400px 0 0; }

/* ── 전체임플란트 전용 — 히어로 사진 위 20% 검정 덮개 ─── */
.fg2-hero__mediawrap { position: relative; overflow: hidden; border-radius: 400px 400px 0 0; }
.fg2-hero__mediawrap .fg2-hero__media { border-radius: 0; }
.fg2-hero__dim { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.2); pointer-events: none; }

/* 정의 섹션의 사진 — 위 간격이 70(라미네이트 계열은 80) */
.fg2 .fg2-figure--gap70 { margin-top: 70px !important; }
/* 침습 섹션의 사진 — 위 간격이 60 */
.fg2 .fg2-figure--gap60 { margin-top: 60px !important; }

/* POINT 카드 2행 — 1행 3장(gap16, 389 균등), 2행 2장(고정폭 389·가운데 정렬·gap20) */
.fg2-cards--row1 { gap: 16px; }
.fg2-cards--row2 { justify-content: center; gap: 20px; margin-top: 60px; }
.fg2-cards--row2 > .fg2-card { flex: 0 0 389px; }

/* 안내 문구 박스 — 사진 없이 굵은 문장만, 옅은 회색 배경. 텍스트는 hug(내용만큼만) */
.fg2-noticebox { display: flex; flex-direction: column; gap: 10px; flex: 1 1 0; min-width: 0; padding: 30px 28px; background: #f5f5f5; }
.fg2-noticebox p { margin: 0; font-size: 18px; line-height: 30px; font-weight: 600; letter-spacing: -0.25px; color: #0a0a0a; }
.fg2-noticebox p.fg2-noticebox__hug { width: fit-content; }
.fg2-noticebox-row { display: flex; gap: 14px; }

/* 3D 디지털 시스템 2단 — 사진 위 · 소제목 · 본문 · 칩 목록 */
.fg2-techgrid { display: flex; gap: 28px; }
.fg2-techcol { display: flex; flex-direction: column; gap: 36px; flex: 1 1 0; min-width: 0; }
.fg2-techcol__media { width: 100%; height: 470px; display: block; object-fit: cover; object-position: 50% 50%; }
.fg2-techcol__body { display: flex; flex-direction: column; gap: 10px; }
.fg2-techcol__eyebrow { margin: 0; font-size: 24px; line-height: 30px; font-weight: 600; letter-spacing: -0.25px; color: #0a0a0a; width: 310px; max-width: 100%; }
.fg2-techcol__detail { display: flex; flex-direction: column; gap: 0; }
.fg2-chiprow { display: flex; flex-wrap: wrap; gap: 10px; }
.fg2-chip { display: inline-flex; align-items: center; padding: 10px 16px; background: #ffffff; border: 1px solid #e4e4e4; font-size: 14px; line-height: 24px; font-weight: 400; letter-spacing: 0; color: #0a0a0a; white-space: nowrap; }

/* 퍼스널라미 히어로 크롭 — digitalimplant 와 같은 클래스를 쓰므로 이 지면 전용으로 좁힌다 */
.fg2[data-fig-page="38:1762"] .fg2-hero__media { object-position: 50% 30.82%; }

/* 디자인 타입 카드 — 원본에서 치아 근접 구간만 크롭한다(카드 라벨 노출 방지) */
.fg2-shape { width: 635px; max-width: 100%; margin: 93px 0 0; }
.fg2-shape__media {
  width: 100%;
  height: 300px;
  display: block;
  object-fit: cover;
  object-position: 79.83% 8.02%;
  border-radius: 8px;
}

@media (max-width: 1023px) {
  .fg2-hero__mediawrap { border-radius: 200px 200px 0 0; }
  .fg2-cards--row1, .fg2-cards--row2 { flex-direction: column; gap: 28px; margin-top: 0; }
  .fg2-cards--row2 > .fg2-card { flex: 1 1 auto; }
  .fg2-noticebox-row { flex-direction: column; gap: 14px; }
  .fg2-techgrid { flex-direction: column; gap: 40px; }
  .fg2-techcol__media { height: 220px !important; }
  .fg2-techcol__eyebrow { font-size: 20px; line-height: 26px; }
  .fg2-chip { font-size: 13px; padding: 8px 14px; }
}
@media (max-width:768px){
  .content_wrap:has(> .fg2 > .fg2-hero:first-child){padding-top:0!important}
}