/* Wisezone 홈페이지 — 반응형 보정 시트
 *
 * 본문 마크업이 전부 인라인 style 속성으로 되어 있어(디자인 캔버스 산출물),
 * 인라인 값을 부분 일치(attribute substring)로 겨냥해 덮어쓴다.
 * 인라인 스타일을 이기려면 !important 가 필요하다.
 * 원본 .dc.html 의 인라인 스타일은 건드리지 않으므로 캔버스 편집기 호환이 유지된다.
 *
 * 주의: 셀렉터는 브라우저가 직렬화한(CSSOM) 형태와 정확히 일치해야 한다.
 *   소스          grid-template-columns:repeat(3,minmax(0,1fr))
 *   직렬화 결과   grid-template-columns: repeat(3, minmax(0px, 1fr))
 * 콜론/쉼표 뒤 공백, 0 → 0px, .22em → 0.22em 로 바뀐다.
 *
 * 브레이크포인트
 *   ≤1080px  큰 태블릿 — 4·5·6열을 3열로
 *   ≤900px   태블릿 세로 — 전 그리드 2열 이하
 *   ≤760px   모바일 — 1열, 여백·타이포 축소
 *   ≤430px   소형 폰 — 추가 조정
 */

/* ============================================================
   0. 전 해상도 공통 — 히어로 두 행 사이 간격
   ============================================================ */

/* 히어로 header 는 `min-height:100vh; grid-template-rows:1fr auto` 다.
   콘텐츠가 100vh 를 넘으면 1fr 행이 콘텐츠 높이까지 줄어들어,
   CTA 버튼 행과 CES 배지 블록이 간격 0 으로 맞닿는다(≤820px 전 구간, 그리고
   1024×768 같은 낮은 뷰포트). 두 행 사이에 최소 간격을 준다.
   인라인에 gap 지정이 없으므로 !important 불필요. */
header[style*="grid-template-rows: 1fr auto"] { row-gap: 44px; }

/* ============================================================
   1. 큰 태블릿 (≤1080px)
   ============================================================ */
@media (max-width: 1080px) {

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

  /* 화살표(→) 구분자가 낀 파이프라인·비교 그리드 → 1열.
     1024px 에서 카드가 210px 까지 좁아져 본문이 끊기므로 여기서 미리 접는다. */
  [style*="grid-template-columns: minmax(0px, 1fr) 24px"],
  [style*="grid-template-columns: minmax(0px, 1fr) 40px"],
  [style*="grid-template-columns: minmax(0px, 1fr) 44px"],
  [style*="grid-template-columns: minmax(0px, 1fr) 56px"] {
    grid-template-columns: minmax(0px, 1fr) !important;
    gap: 16px !important;
  }

  /* 그리드 안에 중첩된 2열 그리드 → 1열.
     바깥 2열 × 안쪽 2열이 겹치면 열이 150px 대까지 줄어든다. */
  [style*="display: grid"] [style*="grid-template-columns: repeat(2, minmax(0px, 1fr))"] {
    grid-template-columns: minmax(0px, 1fr) !important;
  }

  /* 단계 다이어그램의 가로 연결선(1px): 열 수가 바뀌면 아무것도 잇지 못하고
     아이콘 옆에 잘린 선만 남는다 */
  [style*="position: absolute"][style*="height: 1px"][style*="right: 50%"],
  [style*="position: absolute"][style*="height: 1px"][style*="left: 50%"] {
    display: none !important;
  }

  /* 좌우 페이지 여백 40px → 28px */
  [style*="padding: 120px 40px"] { padding: 104px 28px !important; }
  [style*="padding: 130px 40px"] { padding: 110px 28px !important; }
  [style*="padding: 110px 40px"] { padding: 96px 28px 44px !important; }
  [style*="padding: 150px 40px"] { padding: 120px 28px !important; }
  [style*="padding: 160px 40px"] { padding: 130px 28px 60px !important; }
  [style*="padding: 200px 40px"] { padding: 160px 28px 88px !important; }
  [style*="padding: 0px 40px 120px"] { padding: 0 28px 104px !important; }
  [style*="padding: 0px 40px 110px"] { padding: 0 28px 96px !important; }
  [style*="padding: 0px 40px 40px"]  { padding: 0 28px 36px !important; }
  [style*="padding: 18px 40px"] { padding: 16px 28px !important; }
}

/* ============================================================
   2. 태블릿 세로 (≤900px)
   ============================================================ */
@media (max-width: 900px) {

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

  /* 비대칭 2열 본문 그리드 → 1열 */
  [style*="grid-template-columns: minmax(0px, 0.85fr)"],
  [style*="grid-template-columns: minmax(0px, 0.95fr)"],
  [style*="grid-template-columns: minmax(0px, 1.05fr)"],
  [style*="grid-template-columns: minmax(0px, 1.4fr)"],
  [style*="grid-template-columns: minmax(0px, 1fr) minmax"] {
    grid-template-columns: minmax(0px, 1fr) !important;
  }

  /* 위 규칙에 함께 걸리는 3열 롱핸드는 2열로 되돌린다 (순서 의존) */
  [style*="grid-template-columns: minmax(0px, 1fr) minmax(0px, 1fr) minmax(0px, 1fr)"] {
    grid-template-columns: repeat(2, minmax(0px, 1fr)) !important;
  }

  /* L1~L5 플랫폼 행 (64px 라벨 + 제목 + 설명): 3번째 트랙이 0px 로 뭉개진다 */
  [style*="grid-template-columns: 64px minmax(0px, 300px)"],
  [style*="grid-template-columns: 64px minmax(0px, 320px)"] {
    grid-template-columns: minmax(0px, 1fr) !important;
    gap: 10px !important;
    align-items: start !important;
  }

  /* 260px 고정 + 2열 → 1열 */
  [style*="grid-template-columns: minmax(0px, 260px)"] {
    grid-template-columns: minmax(0px, 1fr) !important;
    gap: 24px !important;
  }

  /* 과대 여백 축소 */
  [style*="gap: 72px"] { gap: 44px !important; }
  [style*="gap: 64px"] { gap: 40px !important; }
  [style*="gap: 48px"] { gap: 32px !important; }

  /* space-between 가로 행은 줄바꿈 허용 (세로 flex 는 제외) */
  [style*="justify-content: space-between"]:not([style*="flex-direction: column"]) {
    flex-wrap: wrap !important;
  }
}

/* ============================================================
   3. 모바일 (≤760px)
   ============================================================ */
@media (max-width: 760px) {

  /* --- 3-1. 모든 다중 열 그리드 → 1열 --- */
  [style*="grid-template-columns: repeat(2, minmax(0px, 1fr))"],
  [style*="grid-template-columns: repeat(3, minmax(0px, 1fr))"],
  [style*="grid-template-columns: repeat(4, minmax(0px, 1fr))"],
  [style*="grid-template-columns: repeat(5, minmax(0px, 1fr))"],
  [style*="grid-template-columns: repeat(6, minmax(0px, 1fr))"],
  [style*="grid-template-columns: minmax(0px, 1fr) minmax(0px, 1fr) minmax(0px, 1fr)"] {
    grid-template-columns: minmax(0px, 1fr) !important;
  }

  /* 예외: 짧은 라벨만 담긴 에이전트 칩 행은 2열 유지 */
  [style*="grid-template-columns: repeat(4, minmax(0px, 1fr)); gap: 12px"] {
    grid-template-columns: repeat(2, minmax(0px, 1fr)) !important;
  }

  /* --- 3-2. 카드 최소 높이 해제 (1열에서는 빈 공간만 만든다) --- */
  [style*="min-height: 180px"],
  [style*="min-height: 190px"],
  [style*="min-height: 200px"],
  [style*="min-height: 210px"],
  [style*="min-height: 220px"],
  [style*="min-height: 230px"],
  [style*="min-height: 250px"],
  [style*="min-height: 280px"] { min-height: 0 !important; }

  /* --- 3-3. 여백 --- */
  [style*="gap: 72px"] { gap: 32px !important; }
  [style*="gap: 64px"] { gap: 30px !important; }
  [style*="gap: 48px"] { gap: 26px !important; }
  [style*="gap: 44px"] { gap: 24px !important; }
  [style*="gap: 40px"] { gap: 22px !important; }
  [style*="gap: 32px"] { gap: 20px !important; }
  [style*="gap: 28px"] { gap: 18px !important; }

  /* 섹션 여백 */
  [style*="padding: 120px 40px"] { padding: 68px 20px !important; }
  [style*="padding: 130px 40px"] { padding: 70px 20px !important; }
  [style*="padding: 110px 40px"] { padding: 62px 20px 34px !important; }
  [style*="padding: 150px 40px"] { padding: 78px 20px !important; }
  [style*="padding: 160px 40px"] { padding: 104px 20px 44px !important; }
  [style*="padding: 200px 40px"] { padding: 116px 20px 56px !important; }
  [style*="padding: 0px 40px 120px"] { padding: 0 20px 68px !important; }
  [style*="padding: 0px 40px 110px"] { padding: 0 20px 62px !important; }
  [style*="padding: 0px 40px 40px"]  { padding: 0 20px 28px !important; }
  [style*="padding: 18px 40px"] { padding: 14px 20px !important; }

  /* 카드 내부 여백 (앞자리 값으로 묶어 축소) */
  [style*="padding: 56px"],
  [style*="padding: 52px"],
  [style*="padding: 48px"],
  [style*="padding: 46px"],
  [style*="padding: 44px"] { padding: 28px 22px !important; }

  [style*="padding: 40px"],
  [style*="padding: 38px"],
  [style*="padding: 36px"],
  [style*="padding: 34px"] { padding: 26px 20px !important; }

  [style*="padding: 32px"],
  [style*="padding: 30px"],
  [style*="padding: 28px"],
  [style*="padding: 26px"] { padding: 22px 18px !important; }

  /* --- 3-4. 타이포그래피 --- */
  h1[style*="font-size: clamp("] {
    font-size: clamp(30px, 8.2vw, 44px) !important;
    line-height: 1.08 !important;
    letter-spacing: -0.02em !important;
  }
  h2[style*="font-size: clamp("] {
    font-size: clamp(25px, 6.6vw, 34px) !important;
    line-height: 1.14 !important;
    letter-spacing: -0.018em !important;
  }
  h3[style*="font-size: clamp("] { font-size: clamp(20px, 5.2vw, 26px) !important; }

  [style*="font-size: 44px"] { font-size: 30px !important; }
  [style*="font-size: 38px"] { font-size: 27px !important; }
  [style*="font-size: 32px"] { font-size: 24px !important; }
  [style*="font-size: 30px"] { font-size: 23px !important; }
  [style*="font-size: 28px"] { font-size: 22px !important; }
  [style*="font-size: 26px"] { font-size: 21px !important; }
  [style*="font-size: 24px"] { font-size: 20px !important; }

  /* 좁은 ch 폭 제한은 모바일에서 조기 줄바꿈만 유발한다 */
  [style*="max-width: 15ch"],
  [style*="max-width: 20ch"],
  [style*="max-width: 22ch"],
  [style*="max-width: 24ch"],
  [style*="max-width: 26ch"],
  [style*="max-width: 46ch"],
  [style*="max-width: 52ch"] { max-width: 100% !important; }

  /* 넓은 자간의 모노 라벨은 좁은 폭에서 어색하게 끊긴다 */
  [style*="letter-spacing: 0.22em"] { letter-spacing: 0.14em !important; }
  [style*="letter-spacing: 0.2em"]  { letter-spacing: 0.13em !important; }
  [style*="letter-spacing: 0.18em"] { letter-spacing: 0.12em !important; }
  [style*="letter-spacing: 0.16em"] { letter-spacing: 0.11em !important; }

  /* 긴 단어(Commercialisation 등)가 카드 밖으로 삐져나오지 않게 */
  body { overflow-wrap: break-word; }

  /* nowrap 은 모바일에서 가로 넘침을 만든다 */
  [style*="white-space: nowrap"] { white-space: normal !important; }

  /* --- 3-5. 히어로 --- */
  /* CES 수상 배지: 로고 + 3줄 텍스트가 한 줄에 안 들어간다 */
  [style*="animation: 6s ease-in-out 0s infinite normal none running wzFloat"],
  [style*="animation: wzFloat"] {
    flex-wrap: wrap !important;
    gap: 14px !important;
    padding: 16px 18px !important;
  }
}

/* ============================================================
   4. 소형 폰 (≤430px)
   ============================================================ */
@media (max-width: 430px) {

  /* 에이전트 칩도 1열로 */
  [style*="grid-template-columns: repeat(4, minmax(0px, 1fr)); gap: 12px"] {
    grid-template-columns: minmax(0px, 1fr) !important;
  }

  /* 알약 버튼이 화면 폭을 넘지 않도록 (기본 content-box 라 box-sizing 필수) */
  a[style*="border-radius: 999px"][style*="padding: 15px 26px"],
  a[style*="border-radius: 999px"][style*="padding: 16px 28px"] {
    box-sizing: border-box !important;
    width: 100% !important;
    justify-content: center !important;
  }

  [style*="padding: 120px 40px"] { padding: 58px 16px !important; }
  [style*="padding: 130px 40px"] { padding: 60px 16px !important; }
  [style*="padding: 110px 40px"] { padding: 54px 16px 30px !important; }
  [style*="padding: 150px 40px"] { padding: 66px 16px !important; }
  [style*="padding: 160px 40px"] { padding: 96px 16px 40px !important; }
  [style*="padding: 200px 40px"] { padding: 104px 16px 48px !important; }
  [style*="padding: 0px 40px 120px"] { padding: 0 16px 58px !important; }
  [style*="padding: 0px 40px 110px"] { padding: 0 16px 54px !important; }
  [style*="padding: 0px 40px 40px"]  { padding: 0 16px 24px !important; }
  [style*="padding: 18px 40px"] { padding: 14px 16px !important; }
}