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

   세로 밴드 (시안의 배경 rect 실측)
     히어로            64 ~ 504   (흰색, common .hero)
     BRIDGETEC VALUE  504 ~ 1022  (흰색)
     Financial       1022 ~ 2968  (#FAFBFC, rect 1920×1946 @0,1022)
     Public          2968 ~ 4366  (흰색)
     Enterprise      4366 ~ 5724  (#FAFBFC, rect 1920×1358 @0,4366.49)
     Telecom         5724 ~ 6226  (흰색)
     푸터            6226 ~

   섹션 머리 공통
     밴드 top → eyebrow 잉크   83
     eyebrow 잉크 → 제목 잉크  33
     제목 잉크 → 로고 그리드   110   (= 밴드 top + 226 이 첫 행 셀 상단)

   로고 그리드 (시안 clipPath rect 실측)
     셀 200×64, x 396 / 628 / 860 / 1092 / 1324  → 가로 간격 32
     행 상단 pitch = 136 + 20×(캡션 줄 수)        → 세로 간격 62
     캡션 15/20, 셀 바로 아래 10                  → 셀+캡션 높이 = 74 + 20n */

/* ── 섹션 라벨 : 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 / 본문 끝 942 → 1022 */
  text-align: center;
}

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

/* 19 / 400 / 자간 0 / 줄간격 30 — <br> 로 2줄 (잉크 889·919)
   시안 둘째 줄 잉크 폭이 1266px 이라 콘텐츠 폭 1152 를 넘어선다.
   좌우 -64 로 폭을 1280 까지 열어 시안과 같은 2줄로 떨어뜨린다. */
.ref-value__desc {
  margin: 32px -64px 0;
  font-size: 19px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 30px;
  color: var(--color-text-sub);
}
/* 위 -64 는 뷰포트가 1280 이상일 때만 성립한다. 그 아래로 내려가면
   문단이 화면 밖으로 나가 가로 스크롤이 생기므로 여백과 <br> 을 함께 해제한다.
   --container(1232) + 좌우 여백에 맞춘 경계라 3단계 브레이크포인트와는 별개다. */
@media (max-width: 1299px) {
  .ref-value__desc {
    margin-left: 0;
    margin-right: 0;
  }

  .ref-value__desc br { display: none; }
}

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

.ref-logos__inner {
  max-width: var(--container);
  margin: 0 auto;
  /* 마지막 캡션 줄 하단 → 밴드 끝 102 */
  padding: 83px var(--gutter-pc) 102px;
}

/* Public 만 밴드 상단 여백이 99 다 (시안 2968 → 첫 행 3210.49).
   나머지 세 섹션은 모두 83 이라 시안 자체의 불일치지만 좌표를 그대로 따른다. */
.ref-logos--public .ref-logos__inner {
  padding-top: 99px;
}

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

.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: 62px;
  margin-top: 77px; /* 제목 박스 하단 → 첫 행 상단 (밴드 top + 226) */
}

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

/* 캡션은 셀(200)보다 넓은 224 폭에서 줄바꿈된다.
   시안 109개 캡션의 줄 수를 그대로 재현하는 구간이 223~225 라 가운데 값을 썼다.
   (시안의 한 줄 최대 잉크 폭 222 / 줄바꿈이 강제되는 최소 폭 226) */
.ref-logos__name {
  display: block;
  margin: 10px -12px 0;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 20px;
  text-align: center;
  color: var(--color-text-sub);
}

/* Enterprise 6번째 행만 캡션이 2줄인데도 다음 행 pitch 가 156(=1줄 기준) 이다.
   시안의 다른 2줄 행은 전부 176 이라 이 행만 예외다. 해당 셀의 캡션 둘째 줄을
   행 높이에서 빼 좌표를 그대로 맞춘다. */
.ref-logos__item--flat .ref-logos__name {
  margin-bottom: -20px;
}

/* ── 반응형 : 모바일 시안이 없으므로 열만 줄이고 셀 크기는 유지한다 ──

   경계가 1023 이 아니라 1231 인 이유 :
   5열 그리드는 200×5 + 32×4 = 1128, 캡션이 셀 밖으로 나가는 좌우 12 를 더해 1152,
   여기에 거터 40×2 를 더하면 1232px 이 있어야 들어간다. PC 구간 하한인 1024 에서는
   184px 이 모자라 그리드가 넘치고 페이지에 가로 스크롤이 생긴다. 열 수를 줄이는 것
   말고는 막을 방법이 없어서(셀 안의 로고가 200px 고정) 3열 전환 시점을 1231 로 올린다.
   1440 PC 정합에는 영향이 없다. */
@media (max-width: 1231px) {
  .ref-value__inner {
    padding: 64px var(--gutter-pc);
  }

  .ref-logos__inner,
  .ref-logos--public .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);
    column-gap: 32px;
    row-gap: 48px;
    margin-top: 56px;
  }
  
  /* 3열에서는 행마다 캡션 줄 수가 달라지므로 예외 보정을 풀어 준다 */
  .ref-logos__item--flat .ref-logos__name {
    margin-bottom: 0;
  }
}

@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,
  .ref-logos--public .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: 32px;
    margin-top: 40px;
  }

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

  
  /* 캡션의 음수 여백은 2열 유동 폭에서는 옆 칸을 침범하므로 해제한다 */
  .ref-logos__name {
    margin-left: 0;
    margin-right: 0;
    font-size: 13px;
    line-height: 18px;
  }
}