/* 로고 옆 회사명에만 쓰는 글꼴.
   Gmarket Sans 에서 "미래웹 주식회사" 에 쓰는 글자와 로마자·숫자만 남겨
   한 벌에 4KB 남짓으로 줄인 것입니다. 본문에는 쓰지 않습니다 — 한글 전체를 담으면
   400KB 를 넘어 지금 쓰는 Noto Sans KR 보다 무거워집니다.

   원본 TTF 는 fonts/ 에 있고 저장소에 올리지 않습니다(.gitignore).
   글자가 바뀌면 그 원본으로 다시 뽑아야 합니다 — node tools/publish/brand-font.js */

/* 굵기 두 벌을 등록해 둡니다. 굵기를 바꾸려면 아래 .bt 의 font-weight 만
   500 이나 700 으로 고치면 됩니다.
   ⚠ 굵기는 파일이 정합니다. CSS 에만 500 이라 적고 파일이 Bold 뿐이면 글자는
      그대로 굵습니다. 그래서 두 벌을 둡니다.
   파일이 둘이어도 브라우저는 **실제로 쓰는 굵기만** 내려받습니다. */
@font-face {
  font-family: 'Gmarket Sans';
  src: url('/assets/gmarket-sans-brand-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;   /* 내려받는 동안 대체 글꼴로 먼저 보여 줍니다 */
}
@font-face {
  font-family: 'Gmarket Sans';
  src: url('/assets/gmarket-sans-brand-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* 굵기를 못 박습니다. 800 으로 두면 브라우저가 없는 굵기를 흉내 내 글자가
   뭉갭니다(가짜 볼드). 자간도 한글에 맞춰 좁힙니다 — 원래 값 .6px 은
   MIRAE WEB 같은 로마자 대문자를 벌려 놓으려던 것이라 한글에는 헐거워 보입니다. */
.brand .bt,
.fbrand .bt {
  font-family: 'Gmarket Sans', 'Noto Sans KR', system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.2px;
}

/* 크기는 원래 값의 1.2배입니다. 로마자 MIRAE WEB 에 맞춰 잡혀 있던 크기라
   한글로 바뀌면서 작아 보였습니다. 머리말 19 → 22.8.
   이 파일이 각 페이지의 <style> 뒤에 실려서 여기 값이 이깁니다. */
/* ⚠ 고정값으로 두면 좁은 화면에서 "미래웹 주식 / 회사" 로 꺾여 머리말이 두 배로
      높아집니다. 이 파일이 각 페이지 CSS 뒤에 실려서 페이지의 반응형 규칙까지
      덮어 버리기 때문에, 반응형은 여기서 책임져야 합니다.
      clamp 로 폭에 따라 줄이고 nowrap 으로 꺾이는 것을 막습니다. */
.brand .bt {
  font-size: clamp(15px, 4.4vw, 22.8px);
  white-space: nowrap;
}

/* 좁은 화면에서는 심볼을 줄이고 글자를 키웁니다.
   작은 화면일수록 읽어야 하는 것은 회사 이름이지 사각형 심볼이 아닙니다.
   심볼 42 → 34(80%), 그렇게 번 자리를 글자에 줍니다. */
@media (max-width: 620px) {
  .brand img { width: 34px !important; height: 34px !important; }
  .brand .bt { font-size: clamp(16px, 5.4vw, 21px); }
}
/* 꼬리말은 위 값의 0.9배(20.4 → 18.4). 로고 이미지는 건드리지 않습니다 —
   크기는 각 페이지 CSS 가 정하고 이 파일에는 img 규칙이 없습니다. */
.fbrand .bt {
  font-size: clamp(14px, 3.6vw, 18.4px);
  white-space: nowrap;
}

/* 영문 페이지 로고(MIRAE WEB)만 자간을 더 좁힙니다.
   px 가 아니라 em 을 씁니다 — 글자 크기가 clamp 로 폭에 따라 변하는데 px 로 박으면
   좁은 화면에서는 그 값이 상대적으로 커져 자간만 헐거워집니다. em 은 같이 줄어듭니다.
   -0.05em ≈ 22.8px 기준 -1.14px. 값을 더 조이려면 이 한 줄만 고치면 됩니다. */
html[lang="en"] .brand .bt { letter-spacing: -0.05em; }