/**
 * responsive.css
 * 광운대 국가인적자원개발센터 홈페이지 모바일 반응형 보정.
 * 기존 1200px/1920px 고정폭 레이아웃을 모바일에서 유동폭으로 조정한다.
 * 모든 서브페이지 + 메인페이지에 공통 적용.
 */

/* ===== 공통: 가로 스크롤 방지 + min-width 무효화 (핵심) ===== */
@media (max-width: 1280px) {
  html, body { overflow-x: hidden !important; max-width: 100% !important; }
  /* 레거시 body{min-width:1200px} 가 viewport를 무력화하므로 모바일에서 해제 */
  body { min-width: 0 !important; }
  #winw, #winw_s { min-width: 0 !important; }
}

/* ===== 태블릿 이하 (1024px) ===== */
@media (max-width: 1024px) {
  /* 헤더/콘텐츠/푸터 고정폭 → 유동폭 */
  #header0334 .header,
  .layout01 .layout-contents,
  .footer,
  .drop-wrap > div,
  #footer18 .footer { width: 100% !important; max-width: 100% !important; box-sizing: border-box; padding-left: 16px; padding-right: 16px; }

  .layout-contents { padding-top: 20px !important; }

  /* 메인 비주얼 슬라이더 풀폭 */
  .m_visual, .m_visualFix { width: 100% !important; left: 0 !important; margin-left: 0 !important; }
  .slider1 li img, .slider li img { width: 100% !important; height: auto !important; }

  /* 본문 표/이미지 유동화 */
  .layout-contents table { width: 100% !important; max-width: 100% !important; }
  .layout-contents img { max-width: 100% !important; height: auto !important; }
  .wrap06, .text_width, .text_width2 { width: 100% !important; }
}

/* ===== 모바일 (768px) : PC 네비 숨기고 햄버거 메뉴 ===== */
@media (max-width: 768px) {
  /* PC 가로 네비게이션 숨김 */
  .css_wrap, .gNavi { display: none !important; }

  /* 로고 영역 정리 */
  #header0334 .header { display: flex; align-items: center; justify-content: space-between; height: 64px; padding: 0 14px; }
  .logo { float: none !important; height: 64px !important; display: flex; align-items: center; }
  .logo .logoArea { max-width: 180px !important; }
  .logo img { max-height: 48px !important; }
  #header0334 .utilbar { display: none !important; }
  #header0334 #headerwarp { border-top: none; }

  /* 햄버거 버튼 (JS가 주입) */
  #mobileNavToggle {
    display: flex !important; flex-direction: column; justify-content: center; gap: 5px;
    width: 40px; height: 40px; border: none; background: none; cursor: pointer; padding: 8px;
    position: relative; z-index: 10001;
  }
  /* 헤더가 다른 요소에 가리지 않도록 */
  #header0334 .header { position: relative; z-index: 10001; background: #fff; }
  #mobileNavToggle span { display: block; height: 2px; width: 100%; background: #333; border-radius: 2px; transition: all .3s; }
  #mobileNavToggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  #mobileNavToggle.open span:nth-child(2) { opacity: 0; }
  #mobileNavToggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* 모바일 드로어 메뉴 */
  #mobileNavDrawer {
    position: fixed; top: 0; right: -320px; width: 280px; height: 100vh; background: #ffffff;
    box-shadow: -2px 0 12px rgba(0,0,0,0.15); z-index: 2147483000; overflow-y: auto;
    transition: right .3s ease; padding: 20px 0; opacity: 1;
  }
  #mobileNavDrawer.open { right: 0; }
  #mobileNavOverlay { position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 2147482000; display: none; }
  #mobileNavOverlay.open { display: block; }
  #mobileNavDrawer .mnav-close { position: absolute; top: 12px; right: 14px; font-size: 24px; background: none; border: none; cursor: pointer; color: #666; }
  #mobileNavDrawer .mnav-group { border-bottom: 1px solid #eee; }
  #mobileNavDrawer .mnav-title {
    padding: 16px 20px; font-size: 16px; font-weight: 700; color: #00255f; cursor: pointer;
    display: flex; justify-content: space-between; align-items: center;
  }
  #mobileNavDrawer .mnav-title .arr { font-size: 12px; transition: transform .2s; color: #999; }
  #mobileNavDrawer .mnav-group.open .mnav-title .arr { transform: rotate(180deg); }
  #mobileNavDrawer .mnav-sub { max-height: 0; overflow: hidden; transition: max-height .3s ease; background: #f7f9fc; }
  #mobileNavDrawer .mnav-group.open .mnav-sub { max-height: 500px; }
  #mobileNavDrawer .mnav-sub a {
    display: block; padding: 13px 28px; font-size: 14px; color: #444; text-decoration: none; border-top: 1px solid #eef;
  }
  #mobileNavDrawer .mnav-sub a:active { background: #e8eef7; }
  #mobileNavDrawer .mnav-util { padding: 16px 20px; display: flex; gap: 10px; }
  #mobileNavDrawer .mnav-util a {
    flex: 1; text-align: center; padding: 10px; border-radius: 6px; font-size: 13px; text-decoration: none;
    border: 1px solid #00255f; color: #00255f;
  }
  #mobileNavDrawer .mnav-util a.primary { background: #00255f; color: #fff; }

  /* 본문 폰트/여백 모바일 조정 */
  .layout-contents { padding-top: 16px !important; }
  .wrap06 h2.tit { font-size: 24px !important; }
  #location th, #location td { display: block; width: 100% !important; padding: 8px 10px !important; }
  #location th { background: #f7f9fc; }

  /* 푸터 */
  #footer18 .footer { padding: 20px 14px !important; }
  .foot-util { flex-wrap: wrap; justify-content: center !important; }

  /* 드롭다운 breadcrumb 모바일에서 숨김 */
  #layout01 .drop-wrap { display: none !important; }

  /* 표 가로 스크롤 허용 (게시판 등) */
  .board-table, .admin-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* CMS 고정폭 블록(인라인 width:1200px 포함) 유동화 */
  #kwhrd_30582, #kwhrd_30583,
  [style*="width:1200px"], [style*="width: 1200px"] { max-width: 100% !important; width: auto !important; }

  /* 중간 배너 등 이미지 반응형(height="Auto" 보정) */
  .fullBnr img, .banArea img, .layout-contents img { max-width: 100% !important; height: auto !important; }

  /* 표 글꼴 가독성(12px → 14px) */
  .pTable th, .pTable td, .gTable th, .gTable td, .sTable th, .sTable td,
  .listTable1 th, .listTable1 td, .listTable2 th, .listTable2 td,
  .tbl02, .stab { font-size: 14px !important; }

  /* 터치 타깃 최소 44px */
  #mobileNavToggle { width: 44px !important; height: 44px !important; }
  #mobileNavDrawer .mnav-util a { min-height: 44px; display: flex; align-items: center; justify-content: center; }
  #mobileNavDrawer .mnav-sub a { min-height: 44px; box-sizing: border-box; }
}

/* ===== 소형 모바일 (480px) ===== */
@media (max-width: 480px) {
  .logo .logoArea { max-width: 150px !important; }
  .wrap06 h2.tit { font-size: 20px !important; }
  .gallery-grid { grid-template-columns: 1fr !important; }
}

/* 햄버거 버튼/드로어/오버레이는 기본(데스크톱)에서 숨김 */
#mobileNavToggle { display: none; }
#mobileNavDrawer { position: fixed; top: 0; right: -320px; width: 280px; height: 100vh; background: #fff; z-index: 2147483000; overflow-y: auto; }
#mobileNavOverlay { display: none; }
@media (min-width: 769px) {
  #mobileNavDrawer { display: none !important; }
  #mobileNavOverlay { display: none !important; }
}