/*
 * 서비스 히어로 — 수식어를 h1 밖으로 뺀 뒤의 시각 pin.
 *
 * 국문 서비스 13페이지의 page_title은 `<i>수식어</i> 제목` 형태였고 통째로 <h1>
 * 안에 있었다(h1이 "제품의 가치를 완성하는 지능형 테크니컬 콘텐츠 개발"). YSK
 * 2026-07-27 요청으로 수식어를 h1 밖 형제 요소(.page-eyebrow)로 옮겼는데,
 * 요청은 **의미(제목 분류)에 대한 것이지 디자인 변경이 아니다** — 보이는 모습은
 * 이전과 같아야 한다.
 *
 * 그래서 래퍼를 flex로 묶지 않는다. 원래 배치는 h1 안의 **인라인 흐름**이었고,
 * flex는 두 가지를 바꾼다: ① 요소 사이의 공백 문자를 버려 수식어↔제목 간격이
 * 줄고(실측 9px, 옛 간격 = margin-right 0.5rem + 공백 글리프) ② 줄바꿈 단위가
 * 글자가 아니라 항목이 되어 좁은 화면에서 제목이 통째로 다음 줄로 내려간다.
 * 그대로 인라인으로 두면 둘 다 저절로 보존된다.
 *
 * 대신 h1을 인라인으로 만들면 세로 여백(margin: 1rem 0, index.css의 h1~h6 규칙)이
 * 죽으므로 그 몫을 래퍼가 진다. 래퍼의 아래 마진은 예전 h1처럼 .page-desc의 위
 * 마진과 병합되어 간격이 그대로 16px이 된다.
 *
 * 수치(1.1rem·400·inline-block·0.5rem)는 옛 규칙(public/index.css의
 * `.page-title h1 i` + wp-custom-css.css의 font-size 덮어쓰기)에서 그대로 가져왔다.
 * 그 두 규칙은 이제 매치되는 요소가 없어 죽지만, 회수 원본(wp-custom-css.css)은
 * 손대지 않는 게 규칙이라 남겨 둔다.
 *
 * 영문 페이지는 <i>가 없어 래퍼 자체가 출력되지 않는다(마크업 무변경).
 * 적용 = is_singular('services')에서만 enqueue.
 */

/* line-height는 수식어가 h1 안에 있을 때 물려받던 값(1.2, index.css의
 * `.h1,…,h1` 규칙)이다. 래퍼가 그대로 물려주지 않으면 수식어는 본문 행간(1.5)을
 * 받아 인라인 박스가 커지고, 그 반내이(half-leading)가 줄 상자를 1px 늘려
 * 히어로 아래 전체가 밀린다(992·390에서 실측). 래퍼의 strut도 같은 값이 된다. */
.page-title__head {
  margin: 1rem 0;
  line-height: 1.2;
}

/* 옛 간격 = <i>의 margin-right 0.5rem + `</i> 제목` 사이의 공백 글리프. 그 공백은
 * h1 안에 있었으니 제목 크기로 렌더됐다(@1920 잉크 실측 18px = 8px + 9px).
 * 요소 사이 공백을 마크업에서 없앴으므로 그 9px를 제목 자신의 em으로 되살린다
 * (9/50 = 0.18em = 이 서체의 공백 폭). 제목 크기가 반응형으로 바뀌어도 간격이
 * 같이 따라간다. 실측: 1920/992/390 × #899/#901 6종 중 5종 픽셀 완전 일치,
 * #901@390만 수식어가 1px 왼쪽(반올림) — 아래 레이아웃 이동은 0. */
.page-title__head h1 {
  display: inline;
  margin: 0 0 0 0.18em;
}

.page-eyebrow {
  display: inline-block;
  font-style: normal;
  font-weight: 400;
  font-size: 1.1rem;
  margin-right: 0.5rem;
}