/* 클리피씨 지면 전용 — 공통 CSS 로 덮이지 않는 값만 여기 둔다 */

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

.fg14c-sec--def    { padding: 170px 0 152px; }
.fg14c-sec--cmp    { padding: 140px 0 140px; }
.fg14c-sec--target { padding: 130px 0 145px; }
.fg14c-sec--pd     { padding: 140px 0 174px; }
.fg14c-sec--sys    { padding: 170px 0 170px; }
.fg14c-sec--shoot  { padding: 170px 0 170px; }
.fg14c-sec--why    { padding: 170px 0 277px; }

/* 섹션 머리 다음 덩이까지의 사이 */
.fg14c-gap60 { margin-top: 60px; }
.fg14c-gap50 { margin-top: 50px; }
.fg14c-gap30 { margin-top: 30px; }
.fg14c-gap70 { margin-top: 70px; }
.fg14c-gap90 { margin-top: 90px; }

/* ── 폭을 꽉 채우는 띠 그림 ──────────────── */
.fg14c-band { width: 100%; display: block; object-fit: cover; object-position: 50% 50%; background: #ffffff; }
.fg14c-band--def { height: 250px; }
.fg14c-band--cmp { height: 500px; }

/* 시안이 «고정 높이»로 잡아 둔 글상자 — 글이 그 높이보다 짧아도 상자는 그대로다 */
.fg14c-lead--h60 { height: 60px; }

/* ── 테두리만 있는 설명 상자 ─────────────── */
.fg14c-boxrow { display: flex; gap: 14px; }
.fg14c-boxcol { display: flex; flex-direction: column; gap: 14px; }
.fg14c-box { flex: 1 1 0; min-width: 0; padding: 30px; border: 1px solid #e4e4e4; display: flex; flex-direction: column; }
.fg14c-box--fill { background: #ffffff; }
.fg14c-box__t { margin: 0; font-size: 18px; line-height: 30px; font-weight: 600; letter-spacing: -0.255px; color: #0a0a0a; }

/* ── 사진 세 장 나란히 ───────────────────── */
.fg14c-trio { display: flex; gap: 13px; }
.fg14c-trio__img { flex: 1 1 0; min-width: 0; height: 345px; display: block; object-fit: cover; object-position: 50% 50%; background: #ffffff; }

/* ── 장비 2단 ────────────────────────────── */
.fg14c-duo { display: flex; gap: 28px; }
.fg14c-duo--mid { align-items: center; }
.fg14c-duo__col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 36px; }
.fg14c-duo__img { width: 100%; height: 470px; display: block; object-fit: cover; object-position: 50% 50%;
  border: 1px solid #dedede; background: #ffffff; }
.fg14c-devbody { display: flex; flex-direction: column; gap: 10px; height: 154px; }
.fg14c-dev__name { margin: 0; width: 310px; font-size: 24px; line-height: 30px; font-weight: 600; letter-spacing: -0.255px; color: #0a0a0a; }
.fg14c-dev__texts { display: flex; flex-direction: column; gap: 0; }
.fg14c-dev__sub { margin: 0; font-size: 18px; line-height: 30px; font-weight: 600; letter-spacing: -0.255px; color: #0a0a0a; }
.fg14c-dev__desc { margin: 0; font-size: 16px; line-height: 28px; font-weight: 400; letter-spacing: 0; color: #6b6b6b; word-break: normal; }
.fg14c-dev__desc--narrow { width: 351px; }

/* 특징 알약 — 시안 글자에 앞뒤 공백이 있어 폭이 정해진다. 그대로 살린다 */
.fg14c-chips { display: flex; flex-wrap: wrap; align-content: center; align-items: center; gap: 10px; height: 102px; }
.fg14c-chip { display: flex; align-items: center; justify-content: center; padding: 10px 16px;
  background: #ffffff; border: 1px solid #e4e4e4; }
.fg14c-chip--tight { padding: 10px 14px; }
.fg14c-chip__t { white-space: pre; font-size: 14px; line-height: 24px; font-weight: 400; letter-spacing: 0; color: #0a0a0a; }

/* ── 카드 네 장을 가로로 밀어 본다 ───────── */
.fg14c-railwrap { margin-top: 60px; padding-left: max(20px, calc((100% - 1200px) / 2)); padding-right: 20px;
  overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; }
.fg14c-rail { display: flex; align-items: flex-start; gap: 20px; width: 1200px; }
.fg14c-rail__card { flex: 0 0 590px; display: flex; flex-direction: column; gap: 22px; }
.fg14c-rail__img { width: 590px; height: 300px; display: block; object-fit: cover; object-position: 50% 50%; background: #ffffff; }
.fg14c-rail__text { display: flex; flex-direction: column; gap: 0; }
.fg14c-rail__title { margin: 0; font-size: 18px; line-height: 30px; font-weight: 600; letter-spacing: -0.255px; color: #0a0a0a; }
.fg14c-rail__desc { margin: 0; font-size: 16px; line-height: 28px; font-weight: 400; letter-spacing: 0; color: #6b6b6b; word-break: normal; }
.fg14c-rail__desc--h84 { height: 84px; }
.fg14c-railwrap::-webkit-scrollbar { height: 6px; }
.fg14c-railwrap::-webkit-scrollbar-thumb { background: #cfcfcf; border-radius: 999px; }

/* ── 좁은 화면 ───────────────────────────────
   첫 화면은 사진이 주인공이다. 아래 덩이는 한 줄로 세우고 가로로 넘치지 않게 한다 */
@media (max-width: 1023px) {
  .fg14c-sec--def,
  .fg14c-sec--cmp,
  .fg14c-sec--target,
  .fg14c-sec--pd,
  .fg14c-sec--sys,
  .fg14c-sec--shoot,
  .fg14c-sec--why { padding: 56px 0; }

  .fg14c-gap60, .fg14c-gap70, .fg14c-gap90 { margin-top: 28px; }
  .fg14c-gap50 { margin-top: 24px; }
  .fg14c-gap30 { margin-top: 18px; }

  .fg14c-band--def { height: 160px; }
  .fg14c-band--cmp { height: 220px; }

  .fg14c-boxrow { flex-direction: column; gap: 10px; }
  .fg14c-boxcol { gap: 10px; }
  .fg14c-box { padding: 18px; }
  .fg14c-box__t { font-size: 15px; line-height: 24px; }

  .fg14c-trio { flex-direction: column; gap: 10px; }
  .fg14c-trio__img { height: 220px; }

  .fg14c-duo { flex-direction: column; gap: 32px; }
  .fg14c-duo__img { height: 240px; }
  .fg14c-devbody { height: auto; gap: 8px; }
  .fg14c-dev__name { width: auto; font-size: 20px; line-height: 28px; }
  .fg14c-dev__sub { font-size: 16px; line-height: 26px; }
  .fg14c-dev__desc { font-size: 14px; line-height: 24px; }
  .fg14c-dev__desc--narrow { width: auto; }
  .fg14c-chips { height: auto; }
  .fg14c-chip__t { font-size: 13px; line-height: 20px; }

  .fg14c-railwrap { margin-top: 28px; }
  .fg14c-rail { width: auto; gap: 14px; }
  .fg14c-rail__card { flex: 0 0 260px; gap: 14px; }
  .fg14c-rail__img { width: 260px; height: 160px; }
  .fg14c-rail__title { font-size: 15px; line-height: 24px; }
  .fg14c-rail__desc { font-size: 13px; line-height: 22px; }
}