/* ============================================================================
   visaskorea.COM — 모바일 가로 오버플로우 근본수정
   작성: 2026-08-30 (맥7 지시 / 보스 지적: 390px 에서 우측 콘텐츠 잘림)

   범위: @media (max-width:600px) 전용.
         601px 이상(데스크톱·태블릿) 렌더링에는 단 한 줄도 영향이 없다.

   선택자에 `html body` 접두사를 쓰는 이유:
     기존 페이지들이 <style> 안에서 `body p{word-break:keep-all!important}` 같은
     !important 규칙을 이미 쓰고 있다. 같은 !important 끼리는 명시도로 승부가
     갈리므로, 확실히 이기도록 명시도를 한 단계 올려둔다.

   각 규칙은 전부 Chrome 실측(390px, iPhone UA)으로 확인된 원인에만 대응한다.
   ========================================================================== */

@media (max-width: 600px) {

  /* ------------------------------------------------------------------
     [원인 1] 상단바 — 실측 120페이지 중 104페이지(87%)에서 오버플로우
     ------------------------------------------------------------------
     .vk-contact{white-space:nowrap}(전화번호+영업시간, 약 244px)
     + .vk-lang(KR/EN/CN/JP, 139px) + .vk-container 좌우패딩 48px
     = 431px  >  390px  →  "CN" 잘림, "JP" 화면 밖 이탈(탭 불가)

     한 줄 고정(height:38px, nowrap)을 풀어 두 줄로 접히게 한다.
     ------------------------------------------------------------------ */
  html body .vk-topbar-row {
    height: auto !important;
    min-height: 38px !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    column-gap: 14px !important;
    row-gap: 2px !important;
    padding: 5px 14px !important;
  }
  html body .vk-contact {
    white-space: normal !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 2px 12px !important;
    text-align: center !important;
  }
  html body .vk-lang {
    flex-wrap: wrap !important;
    justify-content: center !important;
  }
  /* 탭 타깃: 기존 33x23px → 약 44x38px */
  html body .vk-lang a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 44px !important;
    min-height: 38px !important;
    padding: 6px 10px !important;
  }
  /* 햄버거 버튼 42x42 → 44x44 */
  html body .vk-burger {
    min-width: 44px !important;
    min-height: 44px !important;
  }

  /* ------------------------------------------------------------------
     [원인 2] 일본어·중국어 줄바꿈 불가 — 실측 +242px ~ +401px
     ------------------------------------------------------------------
     페이지 head 인라인 스타일의 body{word-break:keep-all} 및
     기존 모바일 블록의 body p,body li{word-break:keep-all!important} 때문에
     발생. keep-all 은 "단어 내부에서 끊지 않음" 규칙이라 띄어쓰기가 있는
     한국어에는 알맞지만, 띄어쓰기가 없는 일본어·중국어에서는 문장 전체가
     하나의 단어로 취급되어 절대 접히지 않는다.
     실측 예) jp-blog-e7-salary-extension 의 <p> : clientWidth 302 / scrollWidth 747

     한국어(ko) 페이지의 keep-all 은 의도된 조판이므로 그대로 둔다.
     ------------------------------------------------------------------ */
  html:lang(ja) body,  html:lang(ja) body p,  html:lang(ja) body li,
  html:lang(ja) body td, html:lang(ja) body th, html:lang(ja) body div,
  html:lang(ja) body span, html:lang(ja) body a,
  html:lang(ja) body h1, html:lang(ja) body h2,
  html:lang(ja) body h3, html:lang(ja) body h4,
  html:lang(zh) body,  html:lang(zh) body p,  html:lang(zh) body li,
  html:lang(zh) body td, html:lang(zh) body th, html:lang(zh) body div,
  html:lang(zh) body span, html:lang(zh) body a,
  html:lang(zh) body h1, html:lang(zh) body h2,
  html:lang(zh) body h3, html:lang(zh) body h4 {
    word-break: normal !important;
    overflow-wrap: break-word !important;
    line-break: auto !important;
  }

  /* ------------------------------------------------------------------
     [원인 3] 원본 크기 이미지 — 실측 f-4-visa-extension-cn 에서 +2262px
              (2560px 원본이 축소 없이 그대로 배치)
     ------------------------------------------------------------------
     height:auto 는 본문 이미지에만 건다. 블로그 카드 썸네일
     (.vk-post-thumb img{height:100%;object-fit:cover})까지 풀어버리면
     카드 레이아웃이 깨지므로 대상에서 제외한다.
     ------------------------------------------------------------------ */
  html body img,
  html body video,
  html body iframe,
  html body embed,
  html body object {
    max-width: 100% !important;
  }
  html body figure img,
  html body article img,
  html body .vk-blog-content img,
  html body .blog-post-dtl img {
    height: auto !important;
  }

  /* ------------------------------------------------------------------
     [원인 4] 넓은 표 — 실측 최대 +115px
     잘라내지 않고 가로 스크롤로 전부 접근 가능하게 한다.
     ------------------------------------------------------------------ */
  html body table {
    display: block !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* ------------------------------------------------------------------
     [원인 5] 고정폭 폼 컨트롤 — 실측 input/textarea width 350px·390px,
              form width 425px (컨테이너 342px 초과)
     ------------------------------------------------------------------ */
  html body input,
  html body select,
  html body textarea,
  html body button,
  html body form {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* ------------------------------------------------------------------
     [원인 6] 인라인 style 로 박힌 고정 컬럼 그리드
     ------------------------------------------------------------------
     style 속성 안에 직접 들어있어 일반 미디어쿼리로는 잡히지 않는다.
     실측: 푸터 5열(+178px), 서비스 카드 3열(+33px).

     [style] 를 한 번 더 붙여 명시도를 (0,2,2) 로 올린 것은, 기존 블록의
     `body div[style*="grid-template-columns:repeat"]`(0,1,2) 와 동점이 되어
     소스 순서에 밀리는 것을 막기 위함이다.
     ------------------------------------------------------------------ */
  html body [style*="grid-template-columns:1.4fr 1fr 1fr 1fr 1fr"][style],
  html body [style*="grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr"][style] {
    grid-template-columns: 1fr 1fr !important;
    gap: 22px !important;
  }
  /* 본문 + 사이드바 2단. 모바일에서 사이드바가 82px 로 찌그러지면서
     내부 QR 그리드(셀 54px)가 밖으로 삐져나온다. 실측 +33px. */
  html body [style*="grid-template-columns:3fr 1fr"][style],
  html body [style*="grid-template-columns: 3fr 1fr"][style],
  html body [style*="grid-template-columns:2fr 1fr"][style],
  html body [style*="grid-template-columns: 2fr 1fr"][style],
  html body [style*="grid-template-columns:1fr 1.2fr"][style],
  html body [style*="grid-template-columns: 1fr 1.2fr"][style],
  html body [style*="grid-template-columns:repeat(3,1fr)"][style],
  html body [style*="grid-template-columns: repeat(3, 1fr)"][style],
  html body [style*="grid-template-columns:repeat(4,1fr)"][style],
  html body [style*="grid-template-columns: repeat(4, 1fr)"][style],
  html body [style*="grid-template-columns:repeat(5,1fr)"][style],
  html body [style*="grid-template-columns: repeat(5, 1fr)"][style] {
    grid-template-columns: 1fr !important;
  }

  /* ------------------------------------------------------------------
     [가독성] 본문 최소 12px 확보 (실측: 저작권 표기 등 일부 12px 미만)
     ------------------------------------------------------------------ */
  html body .vk-footer-bar {
    font-size: 12.5px !important;
  }
}