/*
 * 홈 랜딩(React 번들) 모바일 보정.
 *
 * 번들 소스(transito-ui)가 배포 번들보다 구버전이라 리빌드가 불가능하다.
 * 번들 JS를 외과 패치하는 대신, 화면에 영향이 국한되는 CSS 오버라이드로 처리한다.
 * 번들을 재빌드해 클래스 조합이 바뀌면 이 파일의 규칙은 조용히 무효가 되므로,
 * 랜딩을 다시 빌드할 때는 여기 규칙을 소스에 흡수시킬 것.
 */

/*
 * WHAT WE DO 헤드라인.
 *
 * h2 가 flex-column 으로 세 줄을 강제하는데 폰트가 clamp(26px, 3.4vw, 40px) 라
 * 768px 이하에서는 항상 26px 로 고정된다. 390px 기기에서 각 줄의 자연 폭이
 * 365 / 392 / 393px 로 컨테이너(342px)를 모두 넘겨, 강제된 세 줄이 각각 한 번 더
 * 접히면서 '과', '상을', '니다.' 처럼 글자 몇 개만 남는 줄이 생겼다.
 *
 * 컨테이너에 맞게 모바일 폰트를 줄인다. 가장 긴 줄(393px @26px)이 들어가려면
 * 폰트 <= (뷰포트 - 좌우 여백 48px) / 393 * 26 이어야 하고, 렌더 편차를 감안해
 * 8% 여유를 둔 값이 calc(6.1vw - 2.9px) 다. 상한 26px 는 기존 값이라
 * 768px 경계에서 크기가 튀지 않는다.
 */
@media (max-width: 767px) {
    h2.word-break-keep-all.flex.flex-col {
        font-size: clamp(16px, calc(6.1vw - 2.9px), 26px) !important;
    }
}