/* ════════════════════════════════════════════════════
   모바일 가로 밀림 방지 — 전 페이지 공용

   증상: 휴대폰에서 화면이 좌우로 움직인다.
   원인 1 — common.css 에 `body{overflow-x:hidden}` 만 있었다.
            브라우저는 **html** 을 기준으로 화면을 패닝하므로 body 에만 걸면 그대로 밀린다.
            html 에 overflow:hidden 을 주면 스크롤 컨테이너가 생겨 position:sticky 가
            깨진다(이 사이트는 123개 페이지가 sticky 를 쓴다) → `clip` 을 쓴다.
            clip 은 스크롤 컨테이너를 만들지 않고, 모르는 브라우저는 선언을 무시해
            common.css 의 hidden 이 그대로 남는다.
   원인 2 — 격자가 모바일에서 접히지 않는다. 홈의 「수치로 보는 부산웨딩박람회」는
            375px 화면에서 칸이 **356px × 3열 = 1068px** 이었다(문서 폭 1148px).
            `1fr` 은 `minmax(auto,1fr)` 이라 칸이 내용의 최소폭보다 못 줄어들고,
            Chart.js 가 캔버스에 폭을 박아 두면 그 폭에 묶인다 → `min-width:0` 이 필요하다.
   원인 3 — 격자가 **인라인 style** 로 박혀 있으면 미디어쿼리로는 못 이긴다 → !important.

   ?v= 를 올리지 않으면 Cloudflare 가 7일 들고 있으므로 수정 시 반드시 갱신한다.
   ════════════════════════════════════════════════════ */

/* ── 1. 화면이 좌우로 밀리지 않게 ──
   !important 가 필요하다: 23개 페이지가 common.css 를 **body 안에서** 불러와
   이 파일보다 뒤에 오기 때문이다(홈은 1041번째 줄). */
html { max-width: 100% !important; overflow-x: clip !important; }
body { max-width: 100% !important; overflow-x: clip !important; }

/* ── 2. 모바일 (~768px) ── */
@media (max-width: 768px) {

  /* 2-1. 격자·플렉스 칸이 줄어들 수 있게.
     이게 없으면 아래 열 수 조정이 먹지 않는다(칸이 내용 최소폭에 묶인다). */
  [style*="grid-template-columns"] > *,
  [style*="display:grid"] > *,
  [style*="display:flex"] > *,
  [class*="grid"] > *,
  [class*="-row"] > *,
  [class*="row-"] > * { min-width: 0 !important; }

  /* 2-2. 넘칠 수 있는 덩치들 */
  canvas, img, svg, video, iframe, table, pre { max-width: 100% !important; }

  /* 2-3. 인라인으로 박힌 3·4열 → 들어가는 만큼만 */
  [style*="repeat(3,1fr)"], [style*="repeat(3, 1fr)"],
  [style*="repeat(4,1fr)"], [style*="repeat(4, 1fr)"],
  [style*="1fr 1fr 1fr"],
  [style*="1.5fr 1fr 1fr"],
  [style*="auto 1fr 1fr"] {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)) !important;
  }

  /* 2-4. 5·6·7열은 작은 타일이 많다 — 1열로 만들면 끝없이 길어진다 */
  [style*="repeat(5,1fr)"], [style*="repeat(5, 1fr)"],
  [style*="repeat(6,1fr)"], [style*="repeat(6, 1fr)"],
  [style*="repeat(7,1fr)"], [style*="repeat(7, 1fr)"] {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 96px), 1fr)) !important;
  }

  /* 2-5. 「본문 + 고정폭 사이드바」 형태는 반드시 세로로 */
  [style*="1fr 200px"], [style*="1fr 296px"], [style*="1fr 300px"],
  [style*="1fr 320px"], [style*="1fr 340px"], [style*="1fr 360px"],
  [style*="1fr 380px"], [style*="1fr 400px"], [style*="1fr 420px"],
  [style*="200px 1fr"], [style*="220px 1fr"], [style*="260px 1fr"],
  [style*="280px 1fr"],
  [style*="3fr 2fr"], [style*="2fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* 2-6. 클래스로 선언된 흔한 격자들 (페이지별 <style> 안) */
  .grid-2, .grid-3, .grid-4, .form-row-2, .form-row-3,
  .stat-row-3, .stat-row-4, .footer-grid { grid-template-columns: 1fr !important; }

  /* 2-7. 가로로 미는 흔한 범인들 */
  [style*="white-space:nowrap"], [style*="white-space: nowrap"] { max-width: 100%; }
  .tbl, .data-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* 2-8. 격자·플렉스 칸이 내용의 최소폭에 묶이는 것을 푼다.
     클래스 이름을 다 알 수 없어 넓게 걸지만 **특이성을 1로 낮게** 두었다 —
     그래서 .tbl{min-width:640px} 처럼 일부러 넣은 값은 그대로 살아 있다.
     (이게 없으면 .two-col·.main-layout 처럼 미디어쿼리로 1열이 됐는데도
      칸이 안 줄어 17~34px 씩 삐져 나간다.) */
  body * { min-width: 0; }

  /* 2-9. 머리글이 한 줄에 안 들어가면 두 줄로 흘린다.
     잘려서 못 누르는 것보다 낫다. :has() 로 **그 머리글만** 고른다 —
     나머지 100개 페이지의 머리글 높이는 건드리지 않는다. */
  .nav-inner:has(> .nav-right),
  .nav-inner:has(> .nav-cta-area) { flex-wrap: wrap; height: auto; padding: 10px 14px; }
  .nav-right, .nav-cta-area { flex-wrap: wrap; row-gap: 6px; }
  /* .nav-links 는 업체·플래너 포털 두 곳만 쓴다 (다른 페이지는 햄버거 메뉴) */
  .nav-links { flex-wrap: wrap; margin-left: 0 !important; row-gap: 4px; }
  .top-bar { flex-wrap: wrap; height: auto; row-gap: 8px; }
  .tb-right { flex-wrap: wrap; row-gap: 6px; }
}

/* ── 3. 작은 화면 (~480px) — 2열도 좁다 ── */
@media (max-width: 480px) {
  [style*="repeat(3,1fr)"], [style*="repeat(3, 1fr)"],
  [style*="repeat(4,1fr)"], [style*="repeat(4, 1fr)"],
  [style*="1fr 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
}