/* kimchee.io — 휴대폰 공통 안전망 (2026-10-01, Sean: 모든 언어에서 모바일이 잘 보이게)
   어느 언어든 긴 단어(스페인어·베트남어·인도네시아어), 고정폭 이미지, 줄바꿈 안 되는 버튼 때문에
   화면이 옆으로 넘쳐 가로 스크롤이 생기던 것을 막는다. 모든 페이지 <head> 마지막에 링크. */
@media (max-width: 640px) {
  html, body { max-width: 100%; }
  /* overflow-wrap 은 상속된다 — 칸보다 긴 단어·URL·코드는 칸 안에서 줄바꿈 */
  body { overflow-wrap: anywhere; }
  img, video, iframe, canvas { max-width: 100%; }
  img { height: auto; }
  /* 긴 글자는 칸 안에서 줄바꿈 (그리드·플렉스 칸이 글자 길이만큼 늘어나지 않게) */
  h1, h2, h3, h4, h5, p, li, dd, dt, td, th, label, blockquote, figcaption,
  .btn, a.btn, button, .eyebrow, .sec, .desc, .d, .feat, .card, .step { overflow-wrap: anywhere; word-break: normal; }
  /* 그리드·플렉스 칸: 내용이 넓어도 화면 폭 안으로 줄어들게 */
  [class*="grid"] > *, [class*="row"] > *, [class*="list"] > *, .split > *, .g2 > *, .g3 > *, .g4 > *,
  .frow > *, .fgrid > *, .steps > *, .stats > *, .hero-in > *, .fg-in > * { min-width: 0; }
  /* 긴 버튼 문구는 줄바꿈 허용 */
  .btn, a.btn, .btn-lg, .su-cta, .sf-btn, .cta, .hero-cta a { white-space: normal; text-align: center; }
  pre, code { white-space: pre-wrap; overflow-wrap: anywhere; }
  /* 기능 이름 줄(아이콘 + 이름 + 영문 라벨)은 좁으면 다음 줄로 */
  .fname { flex-wrap: wrap; max-width: 100%; }
  .fname > * { min-width: 0; }
  /* 히어로 제목의 강조 줄(.hl)은 PC에선 한 줄 유지, 휴대폰에선 길면 줄바꿈 (일본어·중국어 제목이 잘리던 것) */
  h1.hero .hl, h1 .hl, h2 .hl { white-space: normal; }
  /* 일본어·중국어 히어로 제목은 휴대폰에서 조금 작게 — 한 줄이 어색하게 끊기지 않게 */
  html[lang="ja"] h1.hero, html[lang="zh"] h1.hero, html[lang="tw"] h1.hero { font-size: clamp(24px, 7.4vw, 36px); }
  /* 한국어 제목은 낱말 중간(됩/니다)에서 끊기지 않게 */
  html[lang="ko"] h1.hero { font-size: clamp(28px, 8.6vw, 36px); word-break: keep-all; }
  /* 언어 선택 <select> 가 상단 바를 밀어내지 않게 */
  select.langsel { max-width: 132px; }
}