/* ==========================================================================
   플래니지 컨설팅 — 반응형 보정 (mobile.css)
   본문 스타일이 모두 인라인이므로 !important 로 덮어씁니다.
   인라인 style 속성 문자열(브라우저 직렬화형)을 선택자로 사용합니다.
   ========================================================================== */

/* ---------- 태블릿 이하 (≤900px) ---------- */
@media (max-width: 900px) {

  html { scroll-padding-top: 96px; }
  body { overflow-wrap: break-word; }
  img, svg { max-width: 100%; }

  /* 1. 섹션 좌우 여백 */
  [style*="max-width: 1160px"] {
    padding-left: 22px !important;
    padding-right: 22px !important;
  }

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

  /* 3. 큰 간격 축소 */
  [style*="gap: 88px"], [style*="gap: 80px"], [style*="gap: 72px"] { gap: 32px !important; }
  [style*="gap: 56px"] { gap: 26px !important; }
  [style*="gap: 44px"] { gap: 26px !important; }
  [style*="gap: 40px"] { gap: 24px !important; }
  [style*="gap: 32px"] { gap: 18px !important; }
  [style*="gap: 30px"] { gap: 22px !important; }

  /* 라벨/값 2열 → 붙여서 세로로 */
  [style*="grid-template-columns: 96px 1fr"],
  [style*="grid-template-columns: 132px 1fr"],
  [style*="grid-template-columns: 220px 1fr"] { gap: 4px !important; }

  /* 가격 표 행 */
  [style*="grid-template-columns: 240px"] { gap: 6px !important; padding: 14px 0 !important; }

  /* 상담 사례 before/after 카드 (가운데 화살표) */
  [style*="grid-template-columns"][style*="88px minmax"] { gap: 10px !important; }
  [style*="font-size: 22px"][style*="justify-content: center"] {
    transform: rotate(90deg);
    padding: 4px 0 !important;
  }

  /* 4. 세로 여백 축소 */
  [style*="padding: 104px 40px 72px"] { padding-top: 44px !important; padding-bottom: 30px !important; }
  [style*="padding: 92px 40px"]       { padding-top: 54px !important; padding-bottom: 54px !important; }
  [style*="padding: 92px 40px 88px"]  { padding-bottom: 48px !important; }
  [style*="padding: 88px 40px"]       { padding-top: 54px !important; padding-bottom: 54px !important; }
  [style*="padding: 88px 40px 56px"]  { padding-bottom: 34px !important; }
  [style*="padding: 8px 40px 28px"]   { padding-top: 2px !important; padding-bottom: 22px !important; }
  [style*="padding: 56px 40px 30px"]  { padding-top: 40px !important; }
  [style*="padding: 0px 40px 40px"]   { padding-bottom: 24px !important; }
  [style*="padding: 0px 40px 96px"]   { padding-bottom: 56px !important; }
  [style*="padding: 0 40px 40px"]     { padding-bottom: 24px !important; }
  [style*="padding: 0 40px 96px"]     { padding-bottom: 56px !important; }

  /* 카드 내부 여백 */
  [style*="padding: 30px 32px"],
  [style*="padding: 30px 30px 28px"],
  [style*="padding: 30px 28px"],
  [style*="padding: 26px 24px"] { padding: 22px 20px !important; }
  [style*="padding: 36px"] { padding: 22px 18px !important; }

  /* 5. 타이포 스케일 */
  [style*="font-size: 54px"] { font-size: 40px !important; letter-spacing: -0.032em !important; }
  [style*="font-size: 44px"] { font-size: 32px !important; }
  [style*="font-size: 40px"] { font-size: 30px !important; }
  [style*="font-size: 33px"] { font-size: 26px !important; }
  [style*="font-size: 32px"] { font-size: 25px !important; }

  /* ch 기반 줄폭 제한 해제 (모바일에서는 화면폭이 이미 좁다) */
  [style*="max-width: 20ch"], [style*="max-width: 22ch"], [style*="max-width: 24ch"],
  [style*="max-width: 42ch"], [style*="max-width: 44ch"], [style*="max-width: 54ch"],
  [style*="max-width: 58ch"], [style*="max-width: 62ch"] { max-width: none !important; }

  /* 6. 히어로 — 지표 열이 세로로 내려오므로 왼쪽 선을 위쪽 선으로 */
  [style*="grid-template-columns: 1.4fr 1fr"] { align-items: start !important; }
  [style*="padding-left: 36px"] {
    border-left: 0 !important;
    border-top: 1px solid oklch(0.90 0 0) !important;
    padding-left: 0 !important;
    padding-top: 24px !important;
  }

  /* 7. 헤더 — 링크 줄을 가로 스크롤 스트립으로 */
  header > div { flex-wrap: wrap !important; row-gap: 10px !important; }
  [style*="padding: 18px 40px"] { padding: 12px 22px !important; }
  header nav {
    width: 100% !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    gap: 0 20px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px !important;
    scroll-padding-left: 22px;
  }
  header nav::-webkit-scrollbar { display: none; }
  /* 브랜드 옆 설명 문구는 줄이 넘치지 않도록 잘라냄 */
  header > div > div > span {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  header nav > * { flex: 0 0 auto !important; }
  /* 상담 문의 버튼은 스크롤해도 오른쪽에 고정 (KO/EN 은 끝까지 밀면 나옴) */
  header nav > *:last-child { margin-right: 104px !important; }
  header nav > a[href$="#contact"] {
    height: 34px !important;
    padding: 0 14px !important;
    font-size: 13px !important;
    position: sticky !important;
    right: 0;
    z-index: 3;
    box-shadow: 0 0 0 5px #fff;
  }

  /* 8. 로고 마퀴 — 라벨을 윗줄로 */
  [style*="flex: 1 1 420px"] { flex: 1 1 100% !important; }

  /* 9. 문의 섹션 (검은 카드) */
  [style*="padding: 0px 40px 72px"], [style*="padding: 0 40px 72px"] { padding: 0 14px 48px !important; }
  [style*="padding: 72px 64px"] { padding: 38px 20px !important; border-radius: 18px !important; }

  /* 10. 자료실 — 사이드바 고정 해제 */
  [style*="position: sticky"][style*="top: 100px"] { position: static !important; }

  /* 11. 푸터 하단 줄 */
  [style*="padding: 22px 40px 30px"] { flex-wrap: wrap !important; gap: 6px 18px !important; }
  [style*="padding: 28px 40px"] { flex-wrap: wrap !important; gap: 6px 18px !important; }

  /* 12. 버튼 줄 넘침 방지 (헤더 내비게이션은 제외 — 7번에서 스트립 처리) */
  [style*="display: flex"][style*="gap: 12px"]:not(nav) { flex-wrap: wrap !important; }

  /* 13. 가격 표: 세로로 쌓이므로 금액도 왼쪽 정렬 */
  [style*="grid-template-columns: 240px"] > [style*="text-align: right"] { text-align: left !important; }
}

/* ---------- 휴대폰 (≤560px) ---------- */
@media (max-width: 560px) {

  [style*="max-width: 1160px"] {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }
  [style*="padding: 18px 40px"] { padding: 11px 18px !important; }

  [style*="font-size: 54px"] { font-size: 31px !important; line-height: 1.22 !important; }
  [style*="font-size: 44px"] { font-size: 28px !important; }
  [style*="font-size: 40px"] { font-size: 25px !important; }
  [style*="font-size: 33px"] { font-size: 23px !important; }
  [style*="font-size: 32px"] { font-size: 22px !important; }

  [style*="padding: 104px 40px 72px"] { padding-top: 36px !important; }
  [style*="padding: 92px 40px"]       { padding-top: 46px !important; padding-bottom: 46px !important; }
  [style*="padding: 88px 40px"]       { padding-top: 46px !important; padding-bottom: 46px !important; }

  [style*="padding: 0px 40px 72px"], [style*="padding: 0 40px 72px"] { padding: 0 12px 40px !important; }
  [style*="padding: 72px 64px"] { padding: 32px 18px !important; }

  /* 히어로 버튼 2개를 가로 꽉 채우기 */
  [style*="height: 50px"] { flex: 1 1 auto !important; justify-content: center !important; padding: 0 18px !important; }

  #to-top { right: 14px !important; bottom: 14px !important; }

  /* 영문 페이지는 워드마크가 길어 설명 문구를 숨김 */
  html[lang="en"] header > div > div > span { display: none !important; }
}

/* ---------- 태블릿에서는 카드형 그리드를 2단으로 ---------- */
@media (min-width: 601px) and (max-width: 900px) {
  [style*="grid-template-columns: repeat(3, 1fr)"],
  [style*="grid-template-columns: repeat(4, 1fr)"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  [style*="grid-template-columns: repeat(auto-fit, minmax(140px, 1fr))"] {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important;
  }
}