/* 10301(영문).css — Reference (영문)
   수치는 design/10301_Reference(영문).svg(1920×4957) 좌표 실측 기준.
   히어로·헤더·푸터는 common.css 를 그대로 쓴다.

   세로 밴드 (배경색 전환점 실측)
     히어로            64 ~ 504   (흰색, common .hero)
     BRIDGETEC VALUE  504 ~ 1022  (흰색)
     Financial       1022 ~ 2352  (#FAFBFC)
     Government      2352 ~ 3266  (흰색)
     Enterprise      3266 ~ 4284  (#FAFBFC)
     Enterprise(통신) 4284 ~ 4758  (흰색)
     푸터            4758 ~

   섹션 머리 공통 (4개 섹션 모두 동일)
     밴드 top → eyebrow 잉크   83
     eyebrow 잉크 → 제목 잉크  33
     제목 잉크 → 로고 그리드   110

   로고 그리드 (시안 clipPath rect 실측)
     셀 200×64, x 396 / 628 / 860 / 1092 / 1324  → 가로 간격 32
     행 pitch 104                                 → 세로 간격 40
     그리드 폭 200×5 + 32×4 = 1128, 콘텐츠 1152 안에서 가운데 정렬(좌우 12) */

/* ── 섹션 라벨 : Pretendard 아님. 등폭 폰트 (글자당 7.73px 실측) ──
   "/BRIDGETEC VALUE" 16자 = 124px, "/OUR CUSTOMERS" 14자 = 108px 로 확인 */
.ref-eyebrow {
  font-family: Consolas, "Courier New", monospace;
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
  text-align: center;
  color: var(--color-muted);
}

/* ══ BRIDGETEC VALUE ═════════════════════════════════════ */
.ref-value__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 83px var(--gutter-pc) 79px; /* 504 → eyebrow 잉크 587 / 본문 끝 940 → 1022 */
  text-align: center;
}

/* 아이콘 박스 200×200 @ (860,650). eyebrow 박스 하단 600 → 650 */
.ref-value__icon {
  display: block;
  margin: 50px auto 0;
}

/* 19 / 400 / 줄간격 30 — 2줄로 흐른다 (잉크 889·919)
   본문 desc 의 기본 자간은 +0.25 지만 여기서는 0 이다.
   영문은 한 줄에 130자가 넘게 들어가서 +0.25 를 주면 줄 폭이 34px 늘어나고,
   "Full line up" 의 up 이 둘째 줄로 밀려 시안과 줄바꿈 지점이 달라진다. */
.ref-value__desc {
  margin-top: 32px;
  font-size: 19px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 30px;
  color: var(--color-text-sub);
}

/* ══ OUR CUSTOMERS — 로고 그리드 ═══════════════════════════ */
.ref-logos--alt {
  background: var(--color-bg-alt);
}

.ref-logos__inner {
  max-width: var(--container);
  margin: 0 auto;
  /* 그리드 마지막 행 하단 → 밴드 끝 104. 라인박스 반올림 때문에 103 이 정확히 맞는다 */
  padding: 83px var(--gutter-pc) 103px;
}

/* 마지막 섹션만 아래 여백이 넓다 (4574 → 푸터 4758) */
.ref-logos--last .ref-logos__inner {
  padding-bottom: 184px;
}

.ref-logos__title {
  margin-top: 17px; /* eyebrow 잉크 하단 → 제목 잉크 상단 21 */
  font-size: 36px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.5px;
  text-align: center;
  color: var(--color-text);
}

.ref-logos__grid {
  display: grid;
  grid-template-columns: repeat(5, 200px);
  justify-content: center;
  column-gap: 32px;
  row-gap: 40px;
  margin-top: 77px; /* 제목 박스 하단 → 첫 행 상단 1248 */
}

/* 셀 이미지는 시안의 200×64 셀을 그대로 잘라낸 것이라 위치 보정이 필요 없다 */
.ref-logos__item img {
  display: block;
  width: 200px;
  height: 64px;
}

/* ── 반응형 : 모바일 시안이 없으므로 열만 줄이고 셀 크기는 유지한다 ── */
@media (max-width: 1023px) {
  .ref-value__inner {
    padding: 64px var(--gutter-pc);
  }

  .ref-logos__inner {
    padding: 64px var(--gutter-pc) 80px;
  }

  .ref-logos--last .ref-logos__inner {
    padding-bottom: 80px;
  }

  .ref-logos__grid {
    grid-template-columns: repeat(3, 200px);
    margin-top: 56px;
  }
}

@media (max-width: 767px) {
  .ref-value__inner {
    padding: 48px var(--gutter-mo);
  }

  .ref-value__icon {
    width: 140px;
    height: 140px;
    margin-top: 32px;
  }

  .ref-value__desc {
    margin-top: 24px;
    font-size: 16px;
    line-height: 26px;
  }

  .ref-logos__inner {
    padding: 48px var(--gutter-mo) 56px;
  }

  .ref-logos--last .ref-logos__inner {
    padding-bottom: 56px;
  }

  .ref-logos__title {
    font-size: 28px;
  }

  /* 2열 유동. 셀 비율(200:64)은 유지하므로 로고가 찌그러지지 않는다.
     minmax(0,1fr) 로 열의 최소폭을 0 으로 눌러야 한다. 그냥 1fr 이면 열의 최소폭이
     이미지 고유폭 200px 로 잡혀서 그리드가 416px 이 되고 페이지에 가로 스크롤이 생긴다. */
  .ref-logos__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 16px;
    row-gap: 24px;
    margin-top: 40px;
  }

  .ref-logos__item img {
    width: 100%;
    height: auto;
  }
}