/* 0301.css — 고객 / 산업별 레퍼런스
   수치는 design/0301_산업별 레퍼런스.svg(1920×4957) 좌표 실측 기준.
   히어로·헤더·푸터는 common.css 를 그대로 쓴다.

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

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

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

   같은 시안의 영문판은 css/page/10301(영문).css 에 같은 값이 들어있다.
   시안이 바뀌면 두 파일을 함께 고칠 것. */

/* ── 섹션 라벨 : Pretendard 아님. 등폭 폰트 (글자당 7.73px 실측) ──
   "/BRIDGETEC VALUE" 16자 = 124px, "/TELECOMMUNICATION" 18자 = 138px 로 확인 */
.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 / +0.25 / 줄간격 30 — 시안에서 2줄로 흐른다 (잉크 889·919) */
.ref-value__desc {
  margin-top: 32px;
  font-size: 19px;
  font-weight: 400;
  letter-spacing: 0.25px;
  line-height: 30px;
  color: var(--color-text-sub);
}

/* ══ 고객사 로고 그리드 ═══════════════════════════════════ */
.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);
}

/* 열은 200px 를 최대로 두되 minmax(0,·) 로 줄어들 수 있게 한다.
   고정 200px 이면 그리드가 항상 1128px 이라, PC 규칙이 적용되는 최소폭(1024)부터
   콘텐츠 가용폭(1024-80=944)을 넘겨 1208px 미만 구간 전체에 가로 스크롤이 생긴다.
   1440 에서는 가용 1152 ≥ 1128 이므로 열이 그대로 200px 라 시안 1:1 은 영향 없다. */
.ref-logos__grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 200px));
  justify-content: center;
  column-gap: 32px;
  row-gap: 40px;
  margin-top: 77px; /* 제목 박스 하단 → 첫 행 상단 1248 */
}

/* 셀 이미지는 시안의 200×64 셀을 그대로 잘라낸 것이라 위치 보정이 필요 없다.
   열이 좁아지면 셀 비율(200:64)을 유지한 채 같이 줄어들고,
   열이 200 보다 넓어지는 모바일 2열에서는 200 에서 멈추고 가운데 정렬된다.
   (상한이 없으면 767px 에서 로고가 356px 로 커져 768px 구간과 크기가 튄다) */
.ref-logos__item img {
  display: block;
  width: 100%;
  max-width: 200px;
  height: auto;
  margin: 0 auto;
}

/* ── 반응형 : 모바일 시안이 없으므로 열만 줄이고 셀 크기는 유지한다 ── */
@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, minmax(0, 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;
  }
}