/* 네비게이션 임플란트 지면 전용 레이어.
   공통 치수는 newn-figma-2nd.css 를 쓰고 이 파일은 이 지면에만 있는 것만 담는다. */

/* ── 섹션 바탕 ─────────────────────────── */
.fg14n-sec--white { background: #ffffff; }
.fg14n-sec--gray  { background: #f5f5f5; }

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

/* ── 정의 섹션 ─────────────────────────── */
.fg14n-def { padding: 170px 0; }
/* 공통 레이어가 figure 의 margin 을 0 으로 못 박는다 — 이 지면의 그림 간격만 되돌린다 */
.fg2 .fg14n-def__figure {
  margin: 60px 0 0 !important;
  border: 1px solid #e4e4e4;
  background: #ffffff;
}
.fg14n-def__media {
  display: block; width: 100%; height: 400px;
  object-fit: cover; object-position: 50% 50%;
  background: rgba(0, 0, 0, 0.06);
}
.fg14n-def__band {
  display: flex; align-items: center;
  min-height: 100px; padding: 20px 40px;
  background: #f6f6f6;
}
.fg14n-def__caption {
  flex: 1 1 0; min-width: 0;
  font-size: 18px; line-height: 30px; font-weight: 400;
  letter-spacing: -0.255px; color: #0a0a0a;
}

/* ── POINT 카드 넉 장 ───────────────────── */
.fg14n-point { padding: 130px 0 134px; }
.fg14n-point__row { display: flex; gap: 16px; align-items: center; margin-top: 62px; }
.fg14n-card { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.fg14n-card__media {
  display: block; width: 100%; height: 300px;
  object-fit: cover; object-position: 50% 50%;
  background: rgba(0, 0, 0, 0.06);
}
.fg14n-card__body { display: flex; flex-direction: column; }
.fg14n-card__title {
  font-size: 18px; line-height: 30px; font-weight: 600 !important;
  letter-spacing: -0.255px; color: #0a0a0a;
}
.fg14n-card__desc {
  font-size: 16px; line-height: 28px; font-weight: 400;
  letter-spacing: 0; color: #6b6b6b;
}

/* ── 설계 근거 섹션(사진 2장 + 설명 상자 2개) ── */
.fg14n-spec { padding: 140px 0 153px; }
.fg14n-spec__shots { display: flex; gap: 20px; align-items: center; margin-top: 80px; }
.fg14n-spec__shot {
  flex: 1 1 0; min-width: 0; display: block;
  width: 100%; height: 452px;
  object-fit: cover; object-position: 50% 50%;
  background: rgba(0, 0, 0, 0.06);
}
.fg14n-spec__notes { display: flex; gap: 20px; align-items: flex-start; margin-top: 20px; }
.fg14n-note {
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; gap: 4px;
  padding: 30px; background: #ffffff; border: 1px solid #e4e4e4;
}
.fg14n-note__label {
  font-size: 16px; line-height: 28px; font-weight: 400;
  letter-spacing: 0; color: #6b6b6b;
}
.fg14n-note__text {
  font-size: 18px; line-height: 30px; font-weight: 600 !important;
  letter-spacing: -0.255px; color: #0a0a0a;
}

/* ── 장비 2단 ──────────────────────────── */
.fg14n-sys { padding: 170px 0; }
.fg14n-sys__cols { display: flex; gap: 28px; align-items: center; margin-top: 90px; }
.fg14n-equip { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 36px; }
.fg14n-equip__media {
  display: block; width: 100%; height: 470px;
  object-fit: cover; object-position: 50% 50%;
  border: 1px solid #dedede; background: rgba(0, 0, 0, 0.06);
}
.fg14n-equip__body { display: flex; flex-direction: column; gap: 10px; }
.fg14n-equip__name {
  width: 310px; max-width: 100%;
  font-size: 24px; line-height: 30px; font-weight: 600 !important;
  letter-spacing: -0.255px; color: #0a0a0a;
}
.fg14n-equip__text { display: flex; flex-direction: column; }
.fg14n-equip__sub {
  font-size: 18px; line-height: 30px; font-weight: 600 !important;
  letter-spacing: -0.255px; color: #0a0a0a;
}
.fg14n-equip__desc {
  font-size: 16px; line-height: 28px; font-weight: 400;
  letter-spacing: 0; color: #6b6b6b;
}
.fg14n-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.fg14n-chip {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 10px 16px; background: #ffffff; border: 1px solid #e4e4e4;
}
.fg14n-chip--pad14 { padding: 10px 14px; }
.fg14n-chip > span {
  font-size: 14px; line-height: 24px; font-weight: 400;
  letter-spacing: 0; color: #0a0a0a; white-space: nowrap;
}

/* ── 설계 화면 섹션 ─────────────────────── */
.fg14n-studio { padding: 170px 0 168px; }
.fg14n-studio__media {
  display: block; width: 100%; height: 300px; margin-top: 70px;
  object-fit: cover; object-position: 50% 50%;
  background: rgba(0, 0, 0, 0.06);
}
.fg14n-studio__notes { display: flex; gap: 14px; align-items: flex-start; margin-top: 35px; }
.fg14n-studio__note {
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column;
  padding: 30px; border: 1px solid #e4e4e4;
}
.fg14n-studio__text {
  font-size: 18px; line-height: 30px; font-weight: 600 !important;
  letter-spacing: -0.255px; color: #0a0a0a;
}

/* ── 병원 소개 카드 줄(가로로 이어지는 줄) ──
   시안은 넉 장을 한 줄로 두고 화면 밖으로 흘려보낸다. 줄 자체 폭은 본문 폭 그대로 두고
   바깥 껍데기에서만 가로로 밀 수 있게 해 문서 전체가 가로로 밀리지 않게 한다. */
.fg14n-intro { padding: 170px 0 277px; }
.fg14n-intro__rail {
  margin-top: 60px;
  overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.fg14n-intro__rail::-webkit-scrollbar { display: none; }
.fg14n-intro__row {
  display: flex; gap: 20px; align-items: flex-start;
  width: 1200px; max-width: calc(100% - 40px); margin: 0 auto;
}
.fg14n-intro__card { flex: 0 0 590px; max-width: 590px; display: flex; flex-direction: column; gap: 22px; }
.fg14n-intro__media {
  display: block; width: 100%; height: 300px;
  object-fit: cover; object-position: 50% 50%;
  background: rgba(0, 0, 0, 0.06);
}

/* ── 좁은 화면 ───────────────────────────
   시안에 375 프레임이 없다. 첫 화면은 사진이 주인공이어야 하므로 글자를 줄이고
   여백을 걷는다. 카드 줄은 손가락으로 밀어 넘긴다. */
@media (max-width: 1023px) {
  .fg14n-def    { padding: 60px 0; }
  .fg14n-point  { padding: 56px 0; }
  .fg14n-spec   { padding: 56px 0; }
  .fg14n-sys    { padding: 56px 0; }
  .fg14n-studio { padding: 56px 0; }
  .fg14n-intro  { padding: 56px 0 64px; }

  .fg14n-head { gap: 10px; }
  .fg14n-head__title { font-size: 26px; line-height: 36px; letter-spacing: -0.4px; }
  .fg14n-head__lead  { font-size: 16px; line-height: 27px; }
  .fg14n-head__lead br, .fg14n-def__caption br, .fg14n-equip__desc br,
  .fg14n-card__desc br, .fg14n-intro__desc br { display: none; }

  .fg2 .fg14n-def__figure { margin-top: 28px !important; }
  .fg14n-def__media { height: 220px; }
  .fg14n-def__band { padding: 16px 20px; min-height: 0; }
  .fg14n-def__caption { font-size: 16px; line-height: 27px; }

  .fg14n-point__row, .fg14n-spec__shots, .fg14n-spec__notes,
  .fg14n-sys__cols, .fg14n-studio__notes { flex-direction: column; align-items: stretch; }
  .fg14n-point__row { gap: 32px; margin-top: 28px; }
  .fg14n-card__media, .fg14n-intro__media { height: 220px; }
  .fg14n-spec__shots { gap: 14px; margin-top: 28px; }
  .fg14n-spec__shot { height: 240px; }
  .fg14n-spec__notes, .fg14n-studio__notes { gap: 14px; }
  .fg14n-note, .fg14n-studio__note { padding: 20px; }
  .fg14n-sys__cols { gap: 40px; margin-top: 28px; }
  .fg14n-equip { gap: 20px; }
  .fg14n-equip__media { height: 240px; }
  .fg14n-equip__name { width: auto; font-size: 21px; }
  .fg14n-studio__media { height: 200px; margin-top: 28px; }
  .fg14n-studio__notes { margin-top: 20px; }

  .fg14n-intro__rail { margin-top: 28px; }
  .fg14n-intro__row { width: auto; max-width: none; margin: 0; padding: 0 16px; }
  .fg14n-intro__card { flex: 0 0 82vw; max-width: 82vw; gap: 14px; }
}