/* =====================================================================
 * custom.css - 프론트 반응형 오버라이드 (common.css 이후 로드)
 * 원본 common.css 는 수정하지 않고 여기서만 보정한다.
 * 기존 사이트는 1200px 고정 디자인이라 @media 쿼리가 전혀 없어,
 * 모바일 대응이 별도 도메인(m.dktester.co.kr)에 의존했다.
 * 이 파일에서 전체 페이지를 반응형으로 만든다.
 *
 * 브레이크포인트
 *   > 1200px : 원본 데스크톱 레이아웃 유지
 *   ≤ 1200px : 고정폭 영역을 유동폭으로
 *   ≤ 900px  : 태블릿/모바일 - 햄버거 메뉴, 컬럼 세로 적층
 *   ≤ 600px  : 모바일 - 제품 2열, 요소 축소
 *   ≤ 420px  : 소형 모바일 - 제품 1열
 * ===================================================================== */

/* ---------------------------------------------------------------------
 * [데스크톱 버그 수정] 상단 네비 "홍보자료실" 줄바꿈
 *  nav 고정폭(692px)이 메뉴 4개+공백 합보다 약 2px 작아 줄바꿈 발생.
 *  inline-block 사이 공백 제거 + 한 줄 유지.
 * ------------------------------------------------------------------- */
header nav > ul { font-size: 0; white-space: nowrap; }
header nav > ul > li { vertical-align: top; }

/* 햄버거 버튼 / 모바일 검색은 기본(데스크톱)에서 숨김 */
.m_menu_btn { display: none; }
.m_search { display: none; }

/* 언어 전환 버튼 (데스크톱: 검색창 위쪽 우측) */
#header .lang_switch {
  position: absolute; right: 0; top: 12px; z-index: 30;
  font-size: 12px; line-height: 18px; color: #444;
  border: 1px solid #ccc; border-radius: 12px; padding: 2px 12px; background: #fff;
}
#header .lang_switch:hover { background: #f4f4f4; }
@media screen and (max-width: 900px) {
  /* 모바일: 햄버거(우측 20px) 왼쪽에 배치 */
  #header .lang_switch { right: 66px; top: 22px; }
}

/* =====================================================================
 * ≤ 1200px : 고정폭 → 유동폭
 * ===================================================================== */
@media screen and (max-width: 1200px) {
  #wrap { min-width: 0; }
  #visual { min-width: 0; }

  header,
  #container,
  footer,
  .main .contents,
  .history .inner {
    width: auto;
    max-width: 1200px;
    margin: 0 auto;
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
  }

  /* contents 폭을 유동으로 (aside 250 + 나머지) */
  #contents { width: auto; }
}

/* =====================================================================
 * ≤ 900px : 햄버거 메뉴 + 컬럼 세로 적층
 * ===================================================================== */
@media screen and (max-width: 900px) {
  /* ----- 헤더 ----- */
  header { position: relative; padding-top: 0; padding-bottom: 0; }
  header .logo { padding: 18px 0; }

  /* 햄버거 버튼 */
  .m_menu_btn {
    display: block;
    position: absolute;
    right: 20px;
    top: 22px;
    width: 34px;
    height: 30px;
    padding: 0;
    z-index: 320;
    cursor: pointer;
  }
  .m_menu_btn span {
    display: block;
    width: 100%;
    height: 3px;
    margin: 6px 0;
    background: #444;
    border-radius: 2px;
    transition: 0.25s;
  }
  #header.m_open .m_menu_btn span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
  #header.m_open .m_menu_btn span:nth-child(2) { opacity: 0; }
  #header.m_open .m_menu_btn span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

  /* 데스크톱 검색창 숨김 → 검색은 햄버거 메뉴 안(.m_search)으로 이동 */
  header .search { display: none; }
  #header .m_search {
    display: flex;
    gap: 8px;
    padding: 14px 20px;
    border-bottom: 1px solid #eee;
    background: #fafafa;
  }
  #header .m_search .site-search-input {
    flex: 1 1 auto;
    height: 40px;
    padding: 0 12px;
    font-size: 15px;
    box-sizing: border-box;
    border: 1px solid #ccc;
    border-radius: 4px;
  }
  #header .m_search .site-search-btn {
    flex: 0 0 auto;
    height: 40px;
    line-height: 40px;
    padding: 0 18px;
    font-size: 15px;
    color: #fff;
    white-space: nowrap;
    background: #3e97ce;
    border-radius: 4px;
  }

  /* ----- 네비: 펼침 패널 ----- */
  header nav {
    display: none;
    width: 100%;
    margin: 0;
    border-left: none;
    position: absolute;
    left: 0;
    top: 100%;
    background: #fff;
    border-top: 1px solid #ddd;
    box-shadow: 0 8px 16px rgba(0,0,0,0.12);
    z-index: 300;
    max-height: 80vh;
    overflow-y: auto;
  }
  #header.m_open nav { display: block; }

  header nav > ul { font-size: 14px; white-space: normal; }
  header nav > ul > li {
    display: block;
    width: 100%;
    margin-left: 0;
    border-right: none;
    border-bottom: 1px solid #eee;
  }
  header nav > ul > li > p {
    width: 100%;
    height: auto;
    text-align: left;
    padding: 14px 20px;
    box-sizing: border-box;
  }
  header nav > ul > li > p a {
    height: auto;
    line-height: 1.4;
    font-size: 16px;
    font-weight: 600;
    color: #222;
  }
  header nav > ul > li > p a:hover:after,
  header nav > ul > li > p.active a:after { display: none; }

  /* 2depth 는 항상 펼쳐서 표시 (hover 불가한 터치 대응) */
  header nav .nav_2dep {
    display: block !important;
    position: static !important;
    opacity: 1 !important;
    height: auto !important;
    left: auto !important;
    top: auto !important;
    padding: 0 20px 12px;
    text-align: left;
  }
  header nav .nav_2dep span { display: block; }
  header nav .nav_2dep a {
    color: #555 !important;
    font-size: 14px;
    line-height: 32px;
  }
  #header .nav_2dep_bg { display: none !important; }
  #header:before, #header:after { display: none; }

  /* ----- 비주얼 ----- */
  #visual { height: 130px; }
  .main #visual { height: 240px; }
  #visual .visual_title { padding-top: 40px; font-size: 24px; }

  /* ----- container: aside + contents 세로 적층 ----- */
  aside { float: none; width: 100%; }
  aside ul { display: flex; flex-wrap: wrap; }
  aside li { width: auto !important; flex: 1 1 auto; }
  #contents { float: none; width: 100%; padding: 24px 0 80px; }

  /* ----- 메인 ----- */
  .main .contents .title {
    width: 100%; float: none; padding: 0 0 20px 0; text-align: center;
  }
  .main .contents .title i { margin-right: 0; padding-right: 0; border-bottom: none; }
  .main .contents .list { float: none; }
  .main .contents .list ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
  .main .contents .list li { float: none; margin-right: 0 !important; width: 45%; }
  .main .contents .list li a img { width: 100%; height: auto; }

  /* ----- 회사소개: 연혁 탭 세로 적층 ----- */
  .history #container { padding: 20px 0 60px; background-size: cover; }
  .history .tab_btn_list {
    width: 100%; float: none; padding-bottom: 0; background: none;
  }
  .history .tab_btn_list li { height: 44px; }
  .history .tab_contents { width: 100%; float: none; margin-left: 0; }

  /* ----- 제품 그리드 3열 ----- */
  .product #contents li { width: 32%; margin: 0 2% 15px 0; }
  .product #contents li:nth-child(5n+5) { margin-right: 2%; }
  .product #contents li:nth-child(3n+3) { margin-right: 0; }

  /* ----- 제품 상세: 이미지/텍스트 세로 ----- */
  .product_view #contents .img { float: none !important; }
  .product_view #contents .img img { width: 100% !important; height: auto !important; max-width: 350px; }
  .product_view .txt { padding-top: 24px; }

  /* ----- 페이징 살짝 축소 ----- */
  .paginate_ui a, .paginate_ui strong { width: 24px; height: 24px; line-height: 24px; }
}

/* =====================================================================
 * ≤ 600px : 제품 2열 + 축소
 * ===================================================================== */
@media screen and (max-width: 600px) {
  header, #container, footer,
  .main .contents, .history .inner {
    padding-left: 14px; padding-right: 14px;
  }
  header .logo { width: 180px; height: auto; }
  header .logo img { height: auto; }

  #visual { height: 110px; }
  .main #visual { height: 180px; }
  #visual .visual_title { font-size: 20px; padding-top: 32px; }
  #visual .visual_sub_title { font-size: 13px; padding: 0 14px; }

  .greeting .inner { padding: 24px 0 80px; background-size: 90% auto; }
  .greeting .txt br { display: none; }  /* 좁은 화면에서 강제 개행 제거 */

  .main .contents .list li { width: 47%; }

  .product #contents li { width: 48%; margin: 0 4% 14px 0; }
  .product #contents li:nth-child(3n+3) { margin-right: 4%; }
  .product #contents li:nth-child(2n+2) { margin-right: 0; }
  .product #contents li a { height: auto; min-height: 200px; }

  aside ul { display: block; }
  aside li { width: 100% !important; }
}

/* =====================================================================
 * ≤ 420px : 제품 1열
 * ===================================================================== */
@media screen and (max-width: 420px) {
  .product #contents li,
  .product #contents li:nth-child(2n+2),
  .product #contents li:nth-child(3n+3) {
    width: 100%; margin-right: 0;
  }
  .main .contents .list li { width: 80%; }
  .history .tab_btn_list li a { font-size: 12px; }
}