/* ==========================================================================
   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"], [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,
  [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;
  }
  /* +/- 아코디언 아이콘: 50px 박스 안에서 항상 가운데 정렬(justify-content:center)
     되어 있어서 박스 위치(right)를 옮겨도 실제 글자는 계속 안쪽(~25px)에 남아있었음.
     박스는 그대로 두고, 박스 내부에서 아이콘을 우측 끝에 붙여 좌측 텍스트 여백과 맞춤 */
  .menu-mobile .menu-item.menu-item-has-children > a::after {
    right: 20px !important;
    justify-content: flex-end !important;
    padding-right: 3px;
    box-sizing: border-box;
  }
}

/* --------------------------------------------------------------------
   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;
:root {
    --menu-mobile-gap: 30px; /* 이 값만 바꾸면 좌우 여백이 동시에 조정됨 */
  }
  .menu-mobile,
  .menu-mobile .sub-menu {
    width: calc(100% - (var(--menu-mobile-gap) * 2)) !important;
    max-width: calc(100% - (var(--menu-mobile-gap) * 2)) !important;
    margin-left: var(--menu-mobile-gap) !important;
    margin-right: var(--menu-mobile-gap) !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 20px 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;
  }
}

#vpkFloatPop .pop-quicklinks {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #eee;
}
#vpkFloatPop .pop-quicklinks a {
    display: block;
    box-sizing: border-box;
    width: 100%;
    text-align: center;
    padding: 8px 4px;
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.3;
    color: #3a4658;
    background: #f4f6f9;
    border-radius: 5px;
    text-decoration: none;
}
#vpkFloatPop .pop-quicklinks a:hover {
    background: #e8edf5;
}


/* --------------------------------------------------------------------
   3) 게시판 목록 테이블: 긴 영어 단어 때문에 가로스크롤이 강제되는 문제
   -------------------------------------------------------------------- */
/*
  원인: .basic_table_board에 table-layout 지정이 없어(기본값 auto), 제목에
        공백 없는 긴 영어 단어가 들어가면 그 단어 폭만큼 테이블 전체가
        넓어지며 가로스크롤이 발생함.
  조치: table-layout:fixed로 열 너비를 고정하고, 제목 칸에 줄바꿈을 허용해
        테이블이 화면 폭을 넘지 않고 자연스럽게 줄바꿈되도록 함.
*/
@media (max-width: 768px) {
  .basic_table_board {
    table-layout: fixed !important;
    width: 100% !important;
    min-width: 0 !important;
  }
  }
  .basic_table_board td.number,
  .basic_table_board th.number {
    width: 44px !important;
    padding-left: 4px !important;
    padding-right: 4px !important;
  }
  .basic_table_board td.subject,
  .basic_table_board th.subject {
    width: auto !important;
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    text-align: left !important;
  }
  .board-table-frame {
    overflow-x: auto;
    overflow-y: hidden;
    border-radius: 12px !important;
  }
}

/* --------------------------------------------------------------------
   4) 서브페이지 상단 배너(sub_business_top) 제목 글씨 키우기
   -------------------------------------------------------------------- */
@media (max-width: 768px) {
  html body .sub_business_top h1 {
    font-size: 40px !important;
  }
}
@media (max-width: 480px) {
  html body .sub_business_top h1 {
    font-size: 34px !important;
  }
}