/* ==========================================================================
   VPK 모바일 최적화 CSS
   적용 대상: plm.vpkcorp.com/_plm/ (Gnuboard 5.3 + bs4_v2.5 테마)
   기존 vpk-main.css, vpk-float-cta.css 뒤에 로드할 것 (같은 클래스를 덮어씀)
   PC 레이아웃(960px 초과)에는 영향 없음 — 아래 두 구간만 수정
   ========================================================================== */

/* --------------------------------------------------------------------
   0) 사이트 전역 버그 수정 — 우측 퀵메뉴(견적문의/컨설팅문의 등) 오버랩
   -------------------------------------------------------------------- */
/*
  원인: main.min.css의 .floating-menu(우측 고정 아이콘 목록)는
        max-width:480px 에서만 display:none 처리되는데,
        모바일 헤더(header-mobile, 햄버거 메뉴)는 부트스트랩 lg 기준인
        992px 미만에서 이미 전환됨.
        => 481px~991px 구간에서는 모바일 레이아웃인데 퀵메뉴만
           우측에 고정된 채로 남아 본문과 겹치는 문제가 발생.
  조치: 퀵메뉴 숨김 기준을 모바일 헤더 전환 기준(992px)에 맞춰 통일.
        (완전한 모바일 대응을 위해서는 이 5개 링크를 vpk-float-cta.css의
         모바일 팝업(vpkFloatPop) 안에 통합하는 것을 권장 — 별도 작업 필요)
*/
@media (max-width: 991px) {
  .floating-menu {
    display: none !important;
  }
}

/* --------------------------------------------------------------------
   0-1) 상세페이지(카티아/아바쿠스 등) 좌우 여백 불일치 수정
   -------------------------------------------------------------------- */
/*
  현상: CATIA 페이지(.cat-wrap)는 좌우 여백이 있는데 Tosca 등 다른 제품
        페이지(.prd-wrap 템플릿 — Abaqus 제외 대부분의 제품이 이 템플릿 사용)는
        영상/이미지가 화면 끝까지 붙어 보임.
  확인: .prd-wrap, .cat-wrap 모두 padding:0 32px 로 동일하게 정의돼 있음.
        다만 .prd-cols(2열 그리드)가 960px 이하에서 1열로 바뀌는 과정에서
        내부 영상(.prd-video) 쪽 그리드 트랙이 min-width:auto 기본값 때문에
        콘텐츠 최소 너비만큼 부모 폭을 밀어내면서 padding이 상쇄되는 것으로 보임
        (그리드 자식의 전형적인 오버플로 패턴).
  조치: 그리드 자식에 min-width:0을 강제하고, 영상/이미지가 항상 부모 폭
        안에 머물도록 max-width:100%를 명시. 더불어 여백 자체도 !important로
        한 번 더 고정해 다른 원인으로 상쇄되더라도 깨지지 않게 안전장치 추가.
*/
/*
  이 사이트는 제품/컨설팅 상세페이지마다 cat-, prd-, str- 등 접두사만 다르고
  구조(2단 그리드가 960px 이하에서 1단으로 바뀌는 패턴)는 동일한 템플릿을
  계속 재사용하고 있음. 이름을 일일이 나열하는 대신 클래스 이름 패턴
  자체([class$="-wrap"], [class$="-item"] 등)를 잡아서 앞으로 추가되는
  페이지(crash-, nvh-, thermal- 등)에도 자동으로 적용되게 함.
*/
@media (max-width: 960px) {
  [class*="-item"],
  [class*="-cols"],
  [class*="-split"],
  [class*="-feat"] {
    grid-template-columns: 1fr !important;
  }
  [class*="-item"] > *,
  [class*="-cols"] > *,
  [class*="-split"] > *,
  [class*="-feat"] > * {
    min-width: 0 !important;
  }
}
@media (max-width: 768px) {
  [class*="-wrap"] {
    padding-left: 20px !important;
    padding-right: 20px !important;
    box-sizing: border-box !important;
  }
  [class*="-video"],
  [class*="-img"] img,
  [class*="-item-img"] img,
  [class*="-wrap"] iframe {
    max-width: 100%;
  }
}
@media (max-width: 991px) {
  /* 모바일 헤더바(로고+햄버거) 자체에도 직접 여백을 강제 — 부모 컨테이너
     패딩과 별개로, 버튼이 flex 끝에 딱 붙어 시각적으로 붙어 보이는 것을 방지 */
  .header-mobile__bar .container-fluid,
  .header-nav-menu-mobile .container-fluid {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  .header-mobile__bar-inner {
    padding-right: 4px;
  }
}

/* --------------------------------------------------------------------
   0-2) 모바일 햄버거 메뉴: 하위 메뉴 박스가 화면 우측 밖으로 삐져나가는 현상
   -------------------------------------------------------------------- */
/*
  원인 후보: main.min.css의 .menu-item-has-children>.sub-menu{left:105%}
             (PC hover 시 옆으로 펼쳐지는 플라이아웃 메뉴용 규칙)가
             .menu-mobile .sub-menu{position:static} 규칙보다 CSS 소스상
             뒤에 위치해 있고, .menu-mobile .sub-menu 자체에도 min-width:100%가
             걸려있어 중첩된 하위 메뉴(제품소개 > CATIA 등)에서 폭 계산이
             꼬여 우측으로 삐져나갈 수 있음.
  조치: 모바일 구간에서 서브메뉴의 position/left/폭을 명시적으로 다시 고정하고,
        혹시 남는 가로 오버플로가 있어도 스크롤로 드러나지 않도록 body에
        안전장치로 overflow-x:hidden 적용.
*/
@media (max-width: 991px) {
  .header-nav-menu-mobile,
  .menu-mobile,
  .menu-mobile .menu-item,
  .menu-mobile .sub-menu,
  .menu-mobile .sub-menu .menu-item {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  .menu-mobile .sub-menu {
    position: static !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    min-width: 0 !important;
  }
  html,
  body {
    overflow-x: hidden;
  }
}

/* --------------------------------------------------------------------
   0-3) 게시판(새소식/자료실/TIP/FAQ/문의 등) 전체 여백 부족
   -------------------------------------------------------------------- */
/*
  원인: 게시판 목록/상세 페이지는 상세페이지(.prd-wrap/.cat-wrap, 32px)와 달리
        부트스트랩 기본 .container/.container-fluid를 그대로 써서
        좌우 여백이 15px에 불과함. bo_table 종류와 무관하게(bbs/board.php,
        write.php 등) 전 게시판이 같은 스킨 클래스를 공유하므로 한 번에 적용됨.
  조치: 모바일 구간에서 여백을 다른 페이지와 비슷한 수준(20px)으로 통일.
        히어로 배너 등 의도적으로 풀블리드인 .container-fluid-width는
        제외(선택자에 미포함).
*/
@media (max-width: 768px) {
  .container,
  .container-fluid {
    padding-left: 20px !important;
    padding-right: 20px !important;
    box-sizing: border-box;
  }
  .basic_table_board td.table_content,
  .view-content,
  .inquiry_view {
    max-width: 100%;
  }
}

/* --------------------------------------------------------------------
   1) 태블릿 · 모바일 공통 (~768px)
   -------------------------------------------------------------------- */
@media (max-width: 768px) {

  /* 히어로: 위아래 여백을 줄이고 스크롤 인디케이터 숨김 (첫 화면 정보 밀도 확보) */
  .vpkHero {
    padding: 76px 18px 56px;
  }
  .vpkHero__title {
    font-size: 26px;
    line-height: 1.35;
  }
  .vpkHero__lead {
    font-size: 14.5px;
    line-height: 1.6;
  }
  .vpkHero__scroll {
    display: none;
  }

  /* 히어로 CTA 버튼: 나란히 배치 대신 세로로 쌓고 전체 너비로 — 엄지 터치 기준 44px 이상 확보 */
  .vpkHero__cta {
    flex-direction: column;
    width: 100%;
    gap: 10px;
  }
  .vpkBtn {
    width: 100%;
    justify-content: center;
    min-height: 46px;
    padding: 13px 20px;
  }

  /* DESIGN / SIMULATE 분할 패널: hover로 넓어지는 효과는 모바일에 의미 없음 — 동일 높이 고정 */
  .vpkSplit__panel {
    flex-grow: 1 !important;
    padding: 28px 22px;
  }
  .vpkSplit__tit {
    font-size: 22px;
  }
  .vpkSplit__txt {
    font-size: 13.5px;
  }

  /* 섹션 공통 여백 축소 (96px → 56px) */
  .vpkProducts,
  .vpkInfo__inner,
  .vpkFaq,
  .vpkCta {
    padding-top: 56px;
    padding-bottom: 56px;
  }
  .vpkSectionTit {
    font-size: 24px;
  }
  .vpkSectionLead {
    font-size: 14px;
  }

  /* 솔루션 탭: 가로 스크롤로 전환 (중앙 정렬 + wrap 대신) */
  .vpkTabBar {
    justify-content: flex-start;
    overflow-x: auto;
    flex-wrap: nowrap;
    margin: 0 -18px 28px;
    padding: 0 18px 4px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .vpkTabBar::-webkit-scrollbar {
    display: none;
  }
  .vpkTabBtn {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  /* 솔루션 카드: 12개를 세로로 길게 나열하는 대신 가로 스크롤(스냅)로 전환 */
  .vpkCardGrid {
    display: flex;
    overflow-x: auto;
    gap: 12px;
    margin: 0 -18px;
    padding: 4px 18px 8px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .vpkCardGrid::-webkit-scrollbar {
    display: none;
  }
  .vpkCard {
    flex: 0 0 74%;
    scroll-snap-align: start;
  }

  /* 새소식 · 사업안내 카드: 3열 → 1열 (이미 vpk-main.css 960px에서 처리되지만 카드 내부 여백 조정) */
  .vpkInfo__notice,
  .vpkInfo__card {
    padding: 22px;
  }

  /* FAQ: 좌우 여백과 줄간격을 모바일에 맞게 축소 */
  .vpkFaqItem {
    padding: 20px 18px;
  }
  .vpkFaqItem h3 {
    font-size: 15px;
  }
  .vpkFaqItem p {
    font-size: 13.5px;
    line-height: 1.6;
  }

  /* 최종 CTA: 제목 크기 축소 */
  .vpkCta h2 {
    font-size: 22px;
  }
  .vpkCta p {
    font-size: 14px;
  }

  /* 하단 플로팅 버블 CTA와 겹치지 않도록 본문 마지막 섹션에 여백 확보 */
  .vpkCta {
    padding-bottom: 88px;
  }
}

/* --------------------------------------------------------------------
   2) 소형 화면 (~480px, 저가형 안드로이드 기기 폭 대응)
   -------------------------------------------------------------------- */
@media (max-width: 480px) {

  .vpkHero {
    padding: 64px 16px 48px;
  }
  .vpkHero__title {
    font-size: 22px;
  }
  .vpkEyebrow {
    font-size: 11px;
    letter-spacing: .1em;
  }

  .vpkSplit {
    flex-direction: column;
  }
  .vpkSplit__panel {
    min-height: 140px;
  }

  .vpkCard {
    flex-basis: 82%;
    padding: 18px 16px;
  }

  .vpkInfo__inner {
    padding: 40px 16px;
    gap: 14px;
  }

  .vpkFaq,
  .vpkProducts,
  .vpkCta {
    padding-left: 16px;
    padding-right: 16px;
  }
}