/* ============================================================
   HONGSAMCHEONHA — Mobile / Responsive Layer
   ------------------------------------------------------------
   kr / en / cn 공용. common.css 다음에 로드된다.
   ※ 이 파일은 "모바일 대응"만 담당한다.
      - 데스크탑(1025px 이상) 화면에는 어떤 영향도 주지 않는다.
      - 이미지 / 문구 / 색상 / UI 구성은 그대로 두고
        폭·열수·글자크기·겹침만 보정한다.
      - 본문 HTML이 인라인 style 로 작성되어 있어
        모바일 구간에서는 !important 로 덮어쓴다.
============================================================ */


/* ============================================================
   1. 태블릿 (~1024px) : 열 수만 줄인다
============================================================ */
@media (max-width: 1024px) {
  .cert-grid    { grid-template-columns: repeat(3, 1fr) !important; gap: 24px !important; }
  .cert-wrap    { max-width: 100% !important; padding-left: 24px !important; padding-right: 24px !important; }
  .search-grid  { grid-template-columns: repeat(3, 1fr) !important; }
  .detail-top   { gap: 32px !important; margin-bottom: 48px !important; }
}


/* ============================================================
   2. 헤더 : 980px 이하에서 햄버거로 전환
   ------------------------------------------------------------
   common.css 는 980px 에서 .gnb 를 숨기는데
   햄버거는 768px 에서야 나타나서 769~980px 구간에
   메뉴가 통째로 사라지는 문제가 있었다.
============================================================ */
@media (max-width: 980px) {
  #gnb-desktop          { display: none !important; }
  #header-tools-desktop { display: none !important; }
  #hamburger            { display: flex !important; }
  .site-header .wrap    { justify-content: space-between !important; gap: 12px !important; }
}

@media (max-width: 768px) {
  .site-header .brand img { height: 26px !important; margin-left: 8px !important; }
  #hamburger              { margin-right: 8px !important; }

  /* 모바일 메뉴 : 헤더(72px) 아래 전체화면 */
  #mobile-menu { top: 72px !important; padding-bottom: 40px !important; }
  #mobile-menu a { -webkit-tap-highlight-color: transparent; }

  /* 모바일 메뉴 안 검색창 */
  .m-search { display: flex !important; }
}

/* 모바일 메뉴 검색창은 데스크탑에서 숨긴다 */
.m-search { display: none; }


/* ============================================================
   3. 모바일 공통 (~768px)
============================================================ */
@media (max-width: 768px) {

  /* ---- 가로 스크롤 방지 ---- */
  html, body { overflow-x: hidden; }
  img, iframe, table { max-width: 100%; }

  /* ---- 서브페이지 상단 여백(고정 헤더 72px 가림 방지) ---- */
  .page-body { padding-top: 72px !important; }

  /* ---- 서브페이지 타이틀 배너 ---- */
  /* 배너 이미지가 가로로 긴 형태라 모바일에서 높이가 60px 까지 줄어
     제목/브레드크럼이 배너 밖으로 삐져나오던 문제 → 최소 높이 확보 */
  .intro-title                { min-height: 130px !important; }
  .intro-title > img          { height: 130px !important; max-height: 130px !important; object-fit: cover !important; }
  .intro-title h1             { font-size: 24px !important; }
  .intro-title h1 + div,
  .intro-title div[style*="border-radius:999px"] { padding: 5px 14px !important; }
  .intro-title span           { font-size: 12px !important; }
  /* 배너 안 요소 간격 */
  .intro-title div[style*="justify-content:center"] { gap: 8px !important; }

  /* 인라인 스타일로 잡힌 큰 제목들 축소 */
  h1[style*="font-size:46px"] { font-size: 24px !important; }
  h1[style*="font-size:36px"] { font-size: 24px !important; }
  h1[style*="font-size:28px"] { font-size: 22px !important; }
  h2[style*="font-size:42px"] { font-size: 22px !important; }
  h2[style*="font-size:32px"] { font-size: 22px !important; line-height: 1.4 !important; }
  h2[style*="font-size:22px"] { font-size: 18px !important; }
  h3[style*="font-size:26px"] { font-size: 19px !important; }

  /* 좌우 여백이 40px 로 박혀있는 본문 컨테이너 */
  .page-narrow { padding-left: 16px !important; padding-right: 16px !important; max-width: 100% !important; }


  /* ==========================================================
     3-1. 메인(index)
  ========================================================== */

  /* 히어로 문구가 화면 밖으로 나가던 문제 */
  .hero-copy-box {
    left: 5% !important;
    right: 5% !important;
    bottom: 8% !important;
  }
  .hero-copy-box p {
    font-size: 16px !important;
    line-height: 1.35 !important;
    margin-bottom: 10px !important;
  }
  .hero-copy-box a {
    padding: 7px 18px !important;
    font-size: 12px !important;
    line-height: 18px !important;
  }
  /* 히어로 좌우 화살표 */
  .hero-section > button { width: 32px !important; height: 32px !important; font-size: 18px !important; }

  /* 가운데 정렬로 잡힌 섹션 헤드는 모바일에서도 가운데 유지 */
  .section-head[style*="align-items:center"] { align-items: center !important; text-align: center !important; }

  /* 대표상품 : 5개를 가로 스크롤로 */
  .featured {
    display: grid !important;
    grid-auto-flow: column !important;
    grid-auto-columns: 46% !important;
    grid-template-columns: none !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }
  .featured::-webkit-scrollbar { display: none; }
  .featured .feat-card { min-width: 0 !important; max-width: none !important; scroll-snap-align: start; }
  .feat-card .name { font-size: 14px !important; }
  /* line-height:0.3 때문에 두 줄일 때 글자가 겹치던 문제 */
  .feat-card .tags span { line-height: 1.5 !important; font-size: 11px !important; }

  /* 3x3 상품 그리드 */
  .pgrid .name  { font-size: 14px !important; line-height: 1.4 !important; }
  .pgrid .price { font-size: 11px !important; line-height: 1.4 !important; }
  /* WITHGIN 원형 마크 글자가 원 밖으로 넘치던 문제 */
  .pcard.brandmark .ring { font-size: 18px !important; letter-spacing: .12em !important; }

  /* 리뷰 슬라이드 */
  .review-card p { font-size: 13px !important; }

  /* 만족도 */
  .satis .label { font-size: 18px !important; }


  /* ==========================================================
     3-2. 제품 / 카테고리 목록
  ========================================================== */

  /* 카테고리 탭 : 6개가 세로로 쪼개지던 문제 → 가로 스크롤 */
  #cat-filter {
    justify-content: flex-start !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-bottom: 24px !important;
  }
  #cat-filter::-webkit-scrollbar { display: none; }
  #cat-filter a {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    padding: 12px 12px !important;
    font-size: 14px !important;
  }
  #cat-filter span { flex: 0 0 auto !important; }

  /* 3열 → 2열 */
  .prod-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .prod-grid p[style*="font-size:16px"] { font-size: 14px !important; line-height: 1.4 !important; }
  .prod-grid p[style*="font-size:13px"] { font-size: 11px !important; line-height: 1.5 !important; }


  /* ==========================================================
     3-3. 상품 상세
  ========================================================== */
  .detail-page > .wrap { padding: 24px 16px !important; }
  .detail-top {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    margin-bottom: 40px !important;
  }
  .detail-top h1 { font-size: 19px !important; }
  .detail-thumbs img { width: 60px !important; }
  .detail-actions a { padding: 12px 6px !important; font-size: 12px !important; }
  .detail-tabs button { padding: 14px 16px !important; font-size: 13px !important; flex: 1 1 auto; }
  .detail-table td { padding: 12px 10px !important; font-size: 12px !important; }
  .detail-table td:first-child { width: 88px !important; }


  /* ==========================================================
     3-4. 인증
  ========================================================== */
  .cert-wrap { max-width: 100% !important; padding-left: 16px !important; padding-right: 16px !important; }
  .cert-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important;
  }
  .cert-grid > div { min-width: 0 !important; }
  .cert-grid p[style*="font-size:16px"] { font-size: 12px !important; }
  .cert-grid p[style*="font-size:20px"] { font-size: 15px !important; line-height: 1.4 !important; }


  /* ==========================================================
     3-5. 생산현장 / 소개
  ========================================================== */
  .fac-intro { padding-left: 20px !important; padding-right: 20px !important; padding-bottom: 32px !important; }
  .fac-intro p  { font-size: 15px !important; }
  .factory-grid h3 { font-size: 19px !important; }
  .factory-grid p  { font-size: 14px !important; }
  .factory-grid > div > div { padding: 32px 20px !important; }
  .strengths-grid p { font-size: 14px !important; line-height: 1.7 !important; }
  .values-text p    { font-size: 14px !important; }


  /* ==========================================================
     3-6. FAQ
  ========================================================== */
  div[onclick^="toggleFaq"] { padding: 16px 0 !important; gap: 10px !important; }
  div[onclick^="toggleFaq"] > div { gap: 10px !important; margin-right: 10px !important; }
  div[onclick^="toggleFaq"] span { font-size: 15px !important; line-height: 1.5 !important; }
  div[id^="faq-body-"] { padding-left: 12px !important; }
  div[id^="faq-body-"] p { font-size: 14px !important; }


  /* ==========================================================
     3-7. 상담문의
  ========================================================== */
  .form-row { grid-template-columns: 1fr !important; }
  /* 문의 내역 : 제목이 길면 날짜와 겹치지 않게 줄바꿈 */
  div[onclick^="toggleBoard"] > div { flex-wrap: wrap !important; gap: 6px 10px !important; }
  /* iOS 자동 확대 방지 (16px 미만 입력창에서 확대됨) */
  input[type="text"], input[type="email"], textarea, select { font-size: 16px !important; }


  /* ==========================================================
     3-8. 검색
  ========================================================== */
  .search-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
  .search-grid p[style*="font-size:16px"] { font-size: 14px !important; line-height: 1.4 !important; }
  .search-grid p[style*="font-size:13px"] { font-size: 11px !important; line-height: 1.5 !important; }


  /* ==========================================================
     3-9. 푸터
  ========================================================== */
  .foot-main-grid  { padding-left: 16px !important; padding-right: 16px !important; }
  .foot-main-grid p            { font-size: 13px !important; line-height: 1.7 !important; }
  .foot-main-grid h5           { font-size: 16px !important; }
  .foot-main-grid p[style*="font-size:22px"] { font-size: 20px !important; }
  .foot-bottom-row {
    flex-direction: column !important;
    align-items: center !important;
    gap: 14px !important;
    text-align: center !important;
  }
  /* WITH GIN 흐르는 문구 : 420px 라서 모바일에서 글자 한 개만 보이던 문제 */
  .marquee-wrap { height: 70px !important; }
  .marquee-wrap > div { font-size: 90px !important; }
}


/* ============================================================
   4. 소형 단말 (~430px)
============================================================ */
@media (max-width: 430px) {
  .featured    { grid-auto-columns: 56% !important; }
  .cert-grid   { gap: 14px !important; }
  .detail-actions a { padding: 12px 4px !important; font-size: 11px !important; }
  .marquee-wrap { height: 56px !important; }
  .marquee-wrap > div { font-size: 72px !important; }
}