/* responsive.css — 아팩스시스템 홈페이지 반응형 보정
 *
 * 시안 마크업이 전부 인라인 style 이라 미디어쿼리에서 !important 로 덮는다.
 * 속성 선택자([style*="..."])는 시안의 인라인 style 문자열을 그대로 매칭한 것이라,
 * index.html 의 해당 style 값을 바꾸면 여기도 같이 맞춰야 한다.
 */

/* 가로 스크롤 방지 (긴 단어/URL 대비) */
html, body { max-width: 100%; overflow-x: hidden; }
img, video { max-width: 100%; }

/* 데스크톱에서는 햄버거 메뉴 숨김 — 메가메뉴가 그 역할을 한다 */
.apex-burger { display: none !important; }

/* ───────────────────────── 노트북 (≤1280px) ─────────────────────────
 * 메뉴 간격은 균일하게 유지한다. 드롭다운이 겹치지 않는 실측 최소 간격은
 * 63px 이므로(회사소개↔제품소개 구간이 가장 빡빡), 76px 아래로는 내리지 않는다.
 */
@media (max-width: 1280px) {
  [style*="max-width:1360px"] { padding-left: 24px !important; padding-right: 24px !important; }
  .apex-headbar { gap: 28px !important; }
  .apex-nav { gap: 76px !important; }
}

/* ───────────────────────── 태블릿 (≤1024px) ───────────────────────── */
@media (max-width: 1024px) {
  /* 여기서부터는 폭이 모자라므로 상단 메뉴를 접고 햄버거로 전환 */
  .apex-nav { display: none !important; }
  .apex-burger { display: flex !important; }
  .apex-headbar { gap: 16px !important; align-items: center !important; }
  .apex-logo { height: 74px !important; min-width: 0 !important; }
  .apex-logo img { height: 32px !important; }
  /* nav 가 숨으면 nav 의 margin-right:auto 가 사라져 우측 그룹이 뜨게 된다.
     직접 auto 를 줘서 항상 오른쪽 끝에 붙인다. */
  .apex-headright { height: 74px !important; margin-left: auto !important; gap: 14px !important; }
  .apex-burger { width: 24px !important; gap: 5px !important; align-self: center !important; }
  .apex-burger span { height: 2px !important; }

  /* 4열 → 2열, 3열 → 2열 */
  [style*="grid-template-columns:repeat(4, minmax(0,1fr))"] { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
  [style*="grid-template-columns:repeat(3, minmax(0,1fr))"] { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }

  /* 2단 레이아웃 → 1단 */
  [style*="grid-template-columns:1.05fr 1fr"],
  [style*="grid-template-columns:0.8fr 1fr"],
  [style*="grid-template-columns:1fr 0.9fr"],
  [style*="grid-template-columns:1fr 0.85fr"],
  [style*="grid-template-columns:1fr 0.55fr"] {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }

  /* 섹션 상하 여백 축소 */
  [style*="padding:112px 0 124px"], [style*="padding:116px 0"], [style*="padding:104px 0"],
  [style*="padding:96px 0"], [style*="padding:90px 0"], [style*="padding:74px 0"] {
    padding-top: 64px !important; padding-bottom: 64px !important;
  }
  [style*="padding:80px 0 110px"] { padding-top: 56px !important; padding-bottom: 72px !important; }
  [style*="padding:96px 0 110px"] { padding-top: 56px !important; padding-bottom: 72px !important; }
  [style*="padding:0 0 104px"] { padding-bottom: 64px !important; }
  [style*="padding:74px 0 78px"] { padding-top: 52px !important; padding-bottom: 54px !important; }

  /* 큰 글씨 축소 */
  [style*="font-size:60px"] { font-size: 40px !important; }
  [style*="font-size:58px"] { font-size: 42px !important; }
  [style*="font-size:52px"] { font-size: 36px !important; }
  [style*="font-size:46px"] { font-size: 32px !important; }
  [style*="font-size:40px"] { font-size: 29px !important; }
  [style*="font-size:38px"] { font-size: 28px !important; }
  [style*="font-size:32px"] { font-size: 25px !important; }

  /* 고정 높이 완화 */
  [style*="height:700px"] { height: 600px !important; }
  [style*="height:500px"] { height: 360px !important; }
  [style*="height:460px"] { height: 320px !important; }
  [style*="height:420px"] { height: 300px !important; }
  [style*="height:390px"] { height: 300px !important; }
  [style*="height:238px"] { height: 210px !important; }

}

/* ───────────────────────── 모바일 (≤680px) ───────────────────────── */
@media (max-width: 680px) {
  [style*="max-width:1360px"] { padding-left: 18px !important; padding-right: 18px !important; }

  /* 모든 다단 → 1단 */
  [style*="grid-template-columns:repeat(4, minmax(0,1fr))"],
  [style*="grid-template-columns:repeat(3, minmax(0,1fr))"],
  [style*="grid-template-columns:repeat(2, minmax(0,1fr))"],
  [style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* 도입 전/후 비교표: 좌 → 우 3칸을 위/아래로 쌓는다 */
  [style*="grid-template-columns:1fr 90px 1fr"] {
    grid-template-columns: 1fr !important;
  }
  /* 헤더 줄(도입 전 / VS / 도입 후)은 1단에서 아래 내용과 짝이 안 맞으므로 숨긴다.
     대신 각 행이 "회색 문구 → 굵은 문구" 로 읽히게 만든다. */
  [style*="grid-template-columns:1fr 90px 1fr"][style*="background:#42505f"] { display: none !important; }
  [style*="grid-template-columns:1fr 90px 1fr"] > div { text-align: left !important; }
  [style*="grid-template-columns:1fr 90px 1fr"] > div:nth-child(1) { padding: 16px 18px 2px !important; }
  [style*="grid-template-columns:1fr 90px 1fr"] > div:nth-child(2) { padding: 0 18px !important; font-size: 12px !important; line-height: 1.1 !important; }
  [style*="grid-template-columns:1fr 90px 1fr"] > div:nth-child(3) { padding: 2px 18px 16px !important; }

  /* 표 안 구분선이 사라지지 않도록 */
  [style*="border-top:1px solid #eaeef3"] { border-top: 1px solid #eaeef3 !important; }

  /* 제품 상단 배지: 1단으로 쌓으면 너무 길어져 2단으로 압축한다 */
  .apex-badges { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
  .apex-badge { padding: 18px 12px 18px 0 !important; }
  .apex-badge [style*="font-size:17px"] { font-size: 15px !important; margin-bottom: 6px !important; }
  .apex-badge [style*="font-size:14px"] { font-size: 12px !important; }

  /* EFFECT 숫자: 1단으로 쌓으면 세로로 너무 길어져 2단으로 압축한다 */
  .apex-stats { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
  .apex-stat { padding: 22px 12px 22px 0 !important; }
  .apex-stat [style*="font-size:58px"] { font-size: 33px !important; }
  .apex-stat [style*="font-size:19px"] { font-size: 13px !important; }
  .apex-stat [style*="font-size:15px"] { font-size: 13px !important; margin-bottom: 10px !important; }
  .apex-stat [style*="font-size:14px"] { font-size: 12px !important; margin-top: 8px !important; }

  /* 글씨 한 번 더 축소 */
  [style*="font-size:60px"] { font-size: 31px !important; line-height: 1.3 !important; }
  [style*="font-size:58px"] { font-size: 38px !important; }
  [style*="font-size:52px"] { font-size: 28px !important; line-height: 1.32 !important; }
  [style*="font-size:46px"] { font-size: 26px !important; }
  [style*="font-size:40px"] { font-size: 24px !important; line-height: 1.35 !important; }
  [style*="font-size:38px"] { font-size: 24px !important; }
  [style*="font-size:32px"] { font-size: 22px !important; }
  [style*="font-size:28px"] { font-size: 20px !important; }
  [style*="font-size:24px"] { font-size: 20px !important; }
  [style*="font-size:22px"] { font-size: 19px !important; }
  [style*="font-size:20px"] { font-size: 17px !important; }
  [style*="font-size:19px"] { font-size: 17px !important; }
  [style*="font-size:18px"] { font-size: 16px !important; }
  [style*="font-size:17px"] { font-size: 15.5px !important; }

  /* 히어로: 700px 고정은 풀되 화면의 78% 는 차지하게 해서 첫인상이 빈약해지지 않게 한다.
     섹션을 flex 로 만들어 내용을 세로 가운데 정렬한다(배경·점 표시는 절대배치라 영향 없음). */
  .apex-hero {
    height: auto !important;
    min-height: 78vh !important;
    display: flex !important;
    align-items: center !important;
  }
  .apex-heroinner { width: 100% !important; height: auto !important; padding-top: 44px !important; padding-bottom: 44px !important; }
  .apex-herodots { top: 18px !important; bottom: auto !important; right: 16px !important; transform: none !important; flex-direction: row !important; }
  /* 배경 사진이 보이도록 오버레이를 연하게 깔고,
     대신 제목·본문에 그림자를 넣어 가독성을 확보한다. */
  .apex-hero [style*="linear-gradient(90deg"] {
    background: linear-gradient(180deg, rgba(6,15,28,.42) 0%, rgba(6,15,28,.52) 55%, rgba(6,15,28,.70) 100%) !important;
  }
  .apex-heroinner h1   { text-shadow: 0 2px 16px rgba(0,0,0,.55), 0 1px 3px rgba(0,0,0,.45) !important; }
  .apex-heroinner p    { text-shadow: 0 1px 12px rgba(0,0,0,.5) !important; }
  .apex-heroinner span { text-shadow: 0 1px 10px rgba(0,0,0,.5) !important; }

  /* 히어로·제품 버튼: 가로를 꽉 채우지 않고 나란히 놓는다 */
  [style*="padding:17px 34px"],
  [style*="padding:16px 30px"] {
    flex: 0 0 auto !important;
    padding: 12px 20px !important;
    font-size: 14px !important;
    text-align: center !important;
  }
  /* 하단 전환 버튼과 접수 버튼은 입력 유도가 목적이라 가로로 둘다 */
  [style*="padding:20px 42px"] { width: 100% !important; text-align: center !important; padding: 15px 20px !important; font-size: 15px !important; }
  [style*="text-align:center; padding:22px"] { padding: 17px !important; font-size: 16px !important; }

  /* 카드/이미지 높이 */
  [style*="height:500px"] { height: 240px !important; }
  [style*="height:460px"] { height: 240px !important; }
  [style*="height:420px"] { height: 230px !important; }
  [style*="height:390px"] { height: 240px !important; }
  [style*="height:238px"] { height: 200px !important; }
  [style*="height:220px"] { height: 190px !important; }

  /* 여백 축소 */
  [style*="padding:112px 0 124px"], [style*="padding:116px 0"], [style*="padding:104px 0"],
  [style*="padding:96px 0"], [style*="padding:90px 0"], [style*="padding:74px 0"] {
    padding-top: 48px !important; padding-bottom: 48px !important;
  }
  [style*="padding:80px 0 110px"], [style*="padding:96px 0 110px"] { padding-top: 40px !important; padding-bottom: 56px !important; }
  [style*="padding:74px 0 78px"] { padding-top: 40px !important; padding-bottom: 42px !important; }
  [style*="padding:0 0 104px"] { padding-bottom: 48px !important; }
  [style*="padding:34px 28px 38px"] { padding: 26px 22px 28px !important; }
  [style*="padding:38px 34px"] { padding: 28px 22px !important; }
  [style*="padding:28px 30px 0"] { padding: 22px 22px 0 !important; }
  [style*="padding:26px 26px 30px"] { padding: 22px 20px 24px !important; }

  /* 푸터 */
  .apex-footgrid { grid-template-columns: repeat(2, minmax(0,1fr)) !important; gap: 26px !important; }
  .apex-foottop { gap: 30px !important; }
  .apex-footbottom { flex-direction: column !important; gap: 10px !important; }

  /* 상담 폼: 입력칸 터치 크기 확보, iOS 자동 확대 방지(16px) */
  input[type=text], input[type=tel], input[type=email], textarea, select {
    font-size: 16px !important;
    width: 100% !important;
  }

  /* 헤더 */
  .apex-headbar { padding-left: 18px !important; padding-right: 18px !important; }
  .apex-cta { padding: 10px 14px !important; font-size: 14px !important; }
}

/* 히어로 상단 영문 문구(APEX SYSTEM · TOTAL STORE SOLUTION)가
   좁은 화면에서 두 줄로 접히지 않도록 자간·크기를 줄인다. */
@media (max-width: 420px) {
  .apex-heroinner > div:first-child span {
    font-size: 11.5px !important;
    letter-spacing: 0.08em !important;
  }
}

/* 아주 좁은 화면 */
@media (max-width: 380px) {
  .apex-cta { display: none !important; }
  [style*="font-size:60px"] { font-size: 27px !important; }
  [style*="font-size:52px"] { font-size: 25px !important; }
}