/* ============================================================
   framer-responsive-fix.css
   ------------------------------------------------------------
   Framer 사이트를 정적으로 스크랩하면서 Framer 런타임 JS 가
   제거되어, 모바일 브레이크포인트용 DOM 이 아예 렌더링되지 않는다.
   남은 것은 "데스크톱 DOM + 반쪽짜리 모바일 CSS" 뿐이라
   1023px 이하에서 레이아웃이 깨진다.

   이 파일 + framer-responsive-fix.js 가 그 상태를 복구한다.
   반드시 각 페이지의 assets/css/style.css '뒤에' 로드할 것.

   [data-rwd-*] 속성은 JS 가 붙여 준다. CSS 선택자로는
   "flex-direction 이 row 인 요소" 나 "화면보다 넓은 텍스트" 를
   고를 수 없기 때문이다.
   ============================================================ */

@media (max-width: 1023.98px) {

  /* --- 0) 루트 캔버스: 360px 고정 → 뷰포트 폭 -------------- */
  [data-framer-root] {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* --- 1) 데스크톱 최소폭(1024px / 820px) 해제 -------------
     이게 남아 있으면 섹션이 절대 줄어들지 않는다. */
  [data-framer-root] [class*="framer-"] {
    min-width: 0 !important;
  }

  /* --- 2) 고정 px 폭(569 / 820 / 907 / 510 …) → 유동 ------ */
  [data-framer-root] [class*="framer-"] {
    max-width: 100% !important;
  }

  /* --- 3) 화면 밖으로 삐져나가는 텍스트만 줄바꿈 -----------
     Framer 는 텍스트에 white-space:pre 를 걸어 둔다.
     전부 풀어 버리면 짧은 태그 칩까지 두 줄로 쪼개지므로,
     JS 가 "실제로 화면보다 넓은" 것에만 표시를 남긴다.
     pre-wrap 은 원래 넣어둔 줄바꿈을 유지하면서 접어 준다.
     word-break:keep-all 은 한글을 어절 단위로 끊는다. */
  [data-framer-root] [data-rwd-textwrap] {
    white-space: pre-wrap !important;
    word-break: keep-all;
    overflow-wrap: break-word;
  }

  /* --- 4) 가로 flex → 줄바꿈 허용 --------------------------
     데스크톱에서 2~3단으로 놓인 카드가 모바일에서 세로로 쌓인다.
     세로 flex 에 wrap 을 걸면 높이 고정 컨테이너가 다단으로
     쪼개져 오히려 더 깨지므로, JS 가 row 인 것만 골라 표시한다. */
  [data-framer-root] [data-rwd-wrap] {
    flex-wrap: wrap !important;
  }

  /* --- 5) 이미지/미디어 넘침 방지 -------------------------- */
  [data-framer-root] img,
  [data-framer-root] video,
  [data-framer-root] svg {
    max-width: 100%;
  }

  /* --- 6) 최종 안전망: 가로 스크롤 차단 -------------------- */
  html, body {
    max-width: 100%;
    overflow-x: hidden;
  }

  /* ==========================================================
     페이지별 보정
     ========================================================== */

  /* ---------- 기업공통특화교육 (root: .framer-s1IhX) --------
     교육 유형 카드 3장은 모바일에서 가로 스크롤로 둔다.
       .framer-11au78n = overflow:auto 스크롤 뷰포트
       .framer-z69uqb  = 그 안의 트랙(907px)
     트랙에 데스크톱 중앙정렬용 inline transform 이 남아 있어
     화면 왼쪽으로 -453px 밀려 잘려 보인다 → 제거. */
  .framer-s1IhX .framer-11au78n {
    padding: 0 24px !important;
    height: auto !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
  }
  .framer-s1IhX .framer-z69uqb {
    max-width: none !important;
    flex-wrap: nowrap !important;
    transform: none !important;
  }
  .framer-s1IhX .framer-z69uqb > [class*="framer-"] {
    max-width: none !important;
    width: 260px !important;
  }

  /* 로고 티커(2510px)는 넘쳐야 정상 → 폭 제한 해제 */
  .framer-s1IhX .framer-y6lp60 {
    max-width: none !important;
  }
}