/* 설측교정 전용 레이어.
   공통 fg2 레이어 위에 얹고, 공통 파일은 건드리지 않는다. */

.fg14li {
  --fgli-line: #e4e4e4;
  --fgli-line-soft: #dedede;
  --fgli-ink: #0a0a0a;
  --fgli-muted: #6b6b6b;
  --fgli-body: #333333;
}

/* ── 섹션 바탕과 안쪽 여백 ───────────────── */
.fgli-sec { background: #ffffff; }
.fgli-sec--gray { background: #f5f5f5; }

.fgli-sec--define { padding: 170px 0 152px; }
.fgli-sec--compare { padding: 140px 0 140px; }
.fgli-sec--target { padding: 130px 0 151px; }
.fgli-sec--design { padding: 140px 0 174px; }
.fgli-sec--digital { padding: 170px 0 170px; }
.fgli-sec--shoot { padding: 170px 0 170px; }
.fgli-sec--why { padding: 170px 0 277px; }

/* ── 섹션 머리 아래 간격 ─────────────────── */
.fgli-gap50 { margin-top: 50px !important; }
.fgli-gap60 { margin-top: 60px !important; }
.fgli-gap70 { margin-top: 70px !important; }
.fgli-gap90 { margin-top: 90px !important; }

/* 셸 공통 제목 규칙이 굵기를 갈라서, 시안 값으로 고정한다 */
.fg14li .fg2-head__title,
.fg14li .fg2-techcol__eyebrow,
.fg14li .fg2-split__sub,
.fg14li .fg2-card__title { font-weight: 600 !important; }

/* ── 정의 섹션의 가로 띠 사진 ───────────── */
.fgli-band {
  display: block;
  width: 100%;
  height: 250px;
  object-fit: cover;
  object-position: 50% 50%;
  background: rgba(0, 0, 0, 0.06);
}

/* ── 비교 2단(사진 위 · 설명 칸 아래) ────── */
.fgli-compare { display: flex; gap: 26px; }
.fgli-compare__col { display: flex; flex-direction: column; gap: 0; flex: 1 1 0; min-width: 0; }
.fgli-compare__media {
  display: block;
  width: 100%;
  height: 500px;
  object-fit: cover;
  object-position: 50% 50%;
  background: rgba(0, 0, 0, 0.06);
}
.fgli-compare__cap {
  display: flex;
  flex-direction: column;
  padding: 30px;
  background: #ffffff;
  border: 1px solid var(--fgli-line);
}
.fgli-compare__cap p {
  margin: 0;
  font-size: 18px;
  line-height: 30px;
  font-weight: 600;
  letter-spacing: -0.255px;
  color: var(--fgli-ink);
}

/* ── 대상자 칸 3개 ──────────────────────── */
.fgli-targets { display: flex; gap: 14px; }
.fgli-target {
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  min-width: 0;
  padding: 30px;
  border: 1px solid var(--fgli-line);
}
.fgli-target p {
  margin: 0;
  font-size: 18px;
  line-height: 30px;
  font-weight: 600;
  letter-spacing: -0.255px;
  color: var(--fgli-ink);
}

/* ── 맞춤 설계 사진 3장 ─────────────────── */
.fgli-trio { display: flex; gap: 13px; }
.fgli-trio__media {
  display: block;
  flex: 1 1 0;
  min-width: 0;
  height: 345px;
  object-fit: cover;
  object-position: 50% 50%;
  background: rgba(0, 0, 0, 0.06);
}

/* ── 장비 2단 — 공통 fg2-tech* 위에 이 지면 값만 얹는다 ── */
.fg14li .fg2-techcol__media { border: 1px solid var(--fgli-line-soft); }
/* 시안에서 칩 줄은 높이가 고정이고 한 줄일 때 가운데에 놓인다 */
.fg14li .fgli-chiprow { height: 102px; align-content: center; }
/* 시안에서 이 칩만 좌우 여백이 14 다 */
.fg14li .fgli-chip--pad14 { padding-left: 14px; padding-right: 14px; }
/* 촬영 시스템 단은 설명 칸 높이가 고정이다 */
.fgli-shootcol .fg2-techcol__body { height: 154px; }
/* 시안에서 이 문단만 폭이 내용만큼이다 */
.fgli-hug { width: fit-content; max-width: 100%; }

/* ── 특별함 카드 줄 — 공통 fg2-rail 위에 이 지면 값만 얹는다 ──
   시안에서 카드 4장은 본문 폭을 넘어 놓이고 화면 오른쪽 끝에서 잘린다.
   그래서 줄 자체는 본문 폭을 지키고, 미는 칸만 오른쪽 끝까지 넓힌다. */
.fg14li .fgli-rail { width: 1200px; max-width: 100%; overflow: visible; padding-bottom: 0; }
.fgli-railclip { overflow-x: auto; overflow-y: hidden; }
.fgli-railclip::-webkit-scrollbar { height: 6px; }
.fgli-railclip::-webkit-scrollbar-thumb { background: #cfcfcf; border-radius: 999px; }
@media (min-width: 1240px) {
  .fgli-railclip { margin-right: calc((1200px - 100vw) / 2); }
}

/* ── 좁은 화면 ─────────────────────────────
   폰에서는 2단·3단을 세로로 풀고, 시안이 못 박은 높이를 놓아 준다. */
@media (max-width: 1023px) {
  .fgli-sec--define { padding: 48px 0 40px; }
  .fgli-sec--compare,
  .fgli-sec--target,
  .fgli-sec--design,
  .fgli-sec--digital,
  .fgli-sec--shoot,
  .fgli-sec--why { padding: 48px 0 48px; }

  .fgli-gap50, .fgli-gap60, .fgli-gap70, .fgli-gap90 { margin-top: 28px !important; }

  .fgli-band { height: 160px; }
  .fgli-compare { flex-direction: column; gap: 24px; }
  .fgli-compare__media { height: 260px; }
  .fgli-compare__cap { padding: 20px; }
  .fgli-targets { flex-direction: column; gap: 12px; }
  .fgli-target { padding: 20px; }
  .fgli-trio { flex-direction: column; gap: 12px; }
  .fgli-trio__media { height: 220px; }
  .fg14li .fgli-chiprow { height: auto; }
  .fgli-shootcol .fg2-techcol__body { height: auto; }
  .fgli-hug { width: auto; }
}