/* ===== 페이지별 모바일 대응 (3단계) =====
   데스크톱(≥1280)에는 개입하지 않는다. */

/* ──────────── 3-1 index: 히어로 ────────────
   1024px 미만(모바일·태블릿)은 스크롤 확장 연출을 끄고(index.html 의
   init 가드와 같은 1023px 기준) 처음부터 정적 풀스크린으로 보여준다.
   축소 프레임·SCROLL TO EXPAND 힌트도 이 구간에서는 아예 없다. */
@media (max-width: 1023px) {
  /* 모바일은 확장 연출 없이 정적 풀스크린 — 래퍼를 200vh 로 둘 이유가 없다.
     한 화면 높이로 줄여 빈 스크롤 구간을 없앤다.

     ⚠ vh → svh → dvh 순서의 3단 폴백이어야 한다.
     dvh 만 쓰면 미지원 브라우저(구형 삼성 인터넷 등)에서 이 선언이 통째로
     버려져 .vhero 가 데스크톱용 200vh 로 남는다 — 히어로 아래에 한 화면
     분량의 검은 여백(레터박스)이 생겼던 원인이다. 같은 속성을 세 번 쓰면
     파싱 단계에서 지원되는 마지막 값이 이기므로 안전하다. */
  .vhero {
    height: 100vh !important;
    height: 100svh !important;
    height: 100dvh !important;
  }
  .vhero-sticky {
    position: static !important;
    height: 100vh !important;
    height: 100svh !important;
    height: 100dvh !important;
    min-height: 480px !important;
  }
  .vhero-stage {
    height: 100vh !important;
    height: 100svh !important;
    height: 100dvh !important;
    min-height: 480px !important;
  }
  /* JS 가 인라인 width/height 를 쓰지 않으므로 CSS 로 화면을 채운다 */
  .vhero-media {
    position: absolute !important;
    inset: 0 !important;
    top: 0 !important; left: 0 !important;
    transform: none !important;
    width: 100% !important; height: 100% !important;
    max-width: none !important; max-height: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }
  .vhero-media-shade { background: rgba(0, 0, 0, .45) !important; }
  .vhero-bg { display: none !important; }
  .vhero-word { font-size: clamp(34px, 12vw, 56px) !important; text-shadow: 0 10px 40px rgba(0,0,0,.7) !important; }
  .vhero-title { gap: 10px !important; padding: 0 18px; }
  .vhero-hint { display: none !important; }   /* 스크롤 연출이 없으므로 힌트도 뺀다 */

  /* 아래 텍스트 블록은 항상 보이게 (JS 가 on 클래스를 붙이지만 안전망) */
  .vhero-content { opacity: 1 !important; padding: 56px 22px 64px !important; }
  .vhero-heading { font-size: clamp(24px, 6.4vw, 32px) !important; }
  .vhero-desc { font-size: 15px !important; line-height: 1.8 !important; }
  .vhero-partner { font-size: 9.5px !important; letter-spacing: .26em !important; }
}

/* ──────────── 3-1b index: 히어로 밖 섹션 (≤768 모바일만) ──────────── */
@media (max-width: 769px) {
  /* 소재 4카드 — 이미지 위, 텍스트 아래 (페이지 자체 규칙 보강) */
  .mbanner { flex-direction: column !important; height: auto !important; }
  .mbanner-image { height: 210px !important; order: 1 !important; }
  .mbanner-panel { order: 2 !important; flex: none !important; width: 100% !important; padding: 26px 22px !important; }
  .mbanner-title { font-size: 26px !important; }
  .mbanner-chips { gap: 6px !important; }
  .mbanner-chip { font-size: 10.5px !important; }

  /* 다크 몽타주 — 히어로와 같은 이유로 vh 폴백을 앞세운다 */
  .story-montage-section {
    min-height: 78vh !important;
    min-height: 78svh !important;
    min-height: 78dvh !important;
  }
  .story-montage-text { left: 22px !important; right: 22px !important; bottom: 9% !important; }
  .story-montage-headline { font-size: clamp(22px, 6.2vw, 30px) !important; }
}

/* ──────────── 3-2 about ──────────── */
@media (max-width: 769px) {
  /* 숫자·통계형 4열 카드는 1열보다 2×2 가 읽기 좋다.
     1단계의 전역 1열 규칙을 이 경우에만 되돌린다. */
  [style*="repeat(4"] { grid-template-columns: 1fr 1fr !important; gap: 22px !important; }
}

/* ──────────── 3-3 showroom / 소재 4종 ────────────
   .pgrid 는 페이지 자체에 4→3(≤960)→2(≤640) 규칙이 이미 있다.
   768px 구간이 3열이라 카드가 좁아 2열로 당기고, 터치 타겟만 보완한다. */
@media (max-width: 1279px) {
  /* 정렬 셀렉트·페이지 버튼·컬러 스와치는 태블릿 가로에서도 터치 대상 */
  .pgbtn { width: 44px !important; height: 44px !important; }
  /* 컬러 스와치는 22px 원형이 디자인이다. 원은 그대로 두고 히트 영역만
     투명 가상요소로 44px 까지 넓힌다. */
  .swatch { position: relative !important; }
  .swatch::after {
    content: ''; position: absolute; left: 50%; top: 50%;
    transform: translate(-50%, -50%); width: 44px; height: 44px;
  }
  .swatch-wrap { min-height: 44px !important; display: inline-grid !important; place-items: center !important; }
  .style-pill { min-height: 44px !important; }
  /* 쇼룸 필터 바의 컨트롤은 종류가 많고 일부는 클래스가 없다.
     스와치(원형 디자인 유지)만 빼고 일괄로 44px 을 보장한다. */
  .filter-bar button:not(.swatch), .filter-bar select, .filter-bar input,
  .filter-sheet button:not(.swatch), .filter-sheet select, .filter-sheet input,
  select, .filter-search, .filter-open-btn, .filter-reset { min-height: 44px !important; }
}
@media (max-width: 769px) {
  .pgrid { grid-template-columns: repeat(2, 1fr) !important; gap: 28px 14px !important; }
  /* 카테고리 탭이 360px 에서 가로로 넘친다. 페이지를 밀지 않고
     탭 줄 안에서만 가로 스크롤되게 한다. */
  .ctab { min-height: 44px !important; padding: 12px 4px !important; white-space: nowrap; }
  /* 탭 줄 컨테이너에는 클래스가 없어 :has() 로 잡는다 */
  div:has(> .ctab), .filter-bar-group {
    overflow-x: auto !important; flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  div:has(> .ctab)::-webkit-scrollbar, .filter-bar-group::-webkit-scrollbar { display: none; }
  .filter-open-btn, .filter-reset, .filter-sheet-apply, .filter-sheet-close { min-height: 44px !important; }
  .filter-search { font-size: 16px !important; min-height: 44px !important; }
  /* 페이지 버튼이 9개라 360px 에서 폭이 29px 로 눌린다.
     줄을 가로 스크롤로 바꿔 각 버튼이 44px 을 지키게 한다. */
  div:has(> .pgbtn) {
    overflow-x: auto !important; flex-wrap: nowrap !important;
    justify-content: flex-start !important; scrollbar-width: none;
  }
  div:has(> .pgbtn)::-webkit-scrollbar { display: none; }
  .pgbtn { min-width: 44px !important; flex: 0 0 auto !important; }
}

/* ──────────── 3-4 제품 상세 ──────────── */
@media (max-width: 769px) {
  /* 상세정보 표: 라벨-값 2열 그리드를 세로 스택으로 */
  [style*="96px 1fr"], [style*="110px 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 4px !important;
  }
  /* 견적/카카오 버튼 풀와이드 스택 */
  .btn-gold, .btn-line { width: 100% !important; min-height: 52px !important; }
}
/* 브레드크럼 링크는 글자만 있어 세로 14px 이다. 태블릿 가로까지 44px 확보 */
@media (max-width: 1279px) {
  [style*="106px 4vw 0"] a { min-height: 44px; display: inline-flex; align-items: center; }
}

/* ──────────── 3-5 portfolio ──────────── */
/* 필터 탭·페이지네이션은 태블릿 가로에서도 터치라 ≤1279 부터 44px */
@media (max-width: 1279px) {
  .pf-tab { min-height: 44px !important; padding: 10px 16px !important; }
}
@media (max-width: 1025px) {
  .pf-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 769px) {
  .pf-grid { grid-template-columns: 1fr !important; gap: 20px !important; }
  .pf-card-img { height: 220px !important; }
  .pf-tab { min-height: 44px !important; padding: 10px 16px !important; }
  .pdetail-hero { height: 260px !important; }
  .pdetail-title { font-size: clamp(20px, 5.6vw, 28px) !important; }
  .pdetail-main-img { height: min(52vh, 380px) !important; }
  .pdetail-arrow { width: 44px !important; height: 44px !important; }
  .pdetail-viewer { padding: 0 14px !important; }
}

/* ──────────── 3-6 facility ──────────── */
@media (max-width: 769px) {
  /* 하단 CTA 버튼 풀와이드 */
  .ft-cta-row a, section[style*="130px 5vw"] a {
    display: block !important; width: 100% !important;
    text-align: center !important; min-height: 52px !important;
    line-height: 22px !important;
  }
  section[style*="130px 5vw"] [style*="display:flex"],
  section[style*="130px 5vw"] [style*="display: flex"] { flex-direction: column !important; }
}

/* ──────────── 3-7 contact ──────────── */
/* 연락처·이메일 링크는 태블릿 가로에서도 터치 대상이다 */
@media (max-width: 1279px) {
  .ct-info-value a { min-height: 44px; display: inline-flex; align-items: center; }
  /* 동의 체크박스는 18px 사각형이 디자인이다. 모양은 두고 히트 영역만 넓힌다 */
  .ct-agree input { position: relative; }
  .ct-agree input::after {
    content: ''; position: absolute; left: 50%; top: 50%;
    transform: translate(-50%, -50%); width: 44px; height: 44px;
  }
}
@media (max-width: 940px) {
  /* 폼이 먼저 오도록 순서를 바꾼다 (데스크톱은 좌 정보 / 우 폼) */
  .ct-body > div:nth-child(1) { order: 2 !important; }
  .ct-body > div:nth-child(2) { order: 1 !important; }
  .ct-body { display: flex !important; flex-direction: column !important; }
}
@media (max-width: 769px) {
  .ct-hero { padding-top: 110px !important; }
  .ct-form-wrap { padding: 28px 18px 26px !important; }
  .ct-input, .ct-select, .ct-textarea { font-size: 16px !important; }
  .ct-submit { width: 100% !important; min-height: 54px !important; }
  .ct-info-value { font-size: 18px !important; }
  .ct-info-value a { min-height: 44px; display: inline-flex; align-items: center; }
  /* 영업시간: 라벨과 값이 붙지 않게 최소 간격 확보 */
  .ct-hours { gap: 12px !important; font-size: 15px !important; }
}