/* =========================================================
   PegCity · Responsive overrides + Korean word-break
   Applied globally, keeps design system tokens intact.
   ========================================================= */

html {
  word-break: keep-all;
  overflow-wrap: break-word;
}

h1, h2, h3, h4, h5, h6 {
  word-break: keep-all;
  overflow-wrap: break-word;
}

p, li, span, div, a, button {
  word-break: keep-all;
  overflow-wrap: break-word;
}

/* Selector that matches React inline styles (React emits kebab-case) */
@media (max-width: 900px) {
  [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }
  [style*="gap: 64"],
  [style*="gap: 80"],
  [style*="gap: 48"] {
    gap: 32px !important;
  }
  [style*="padding: 96px"],
  [style*="padding: 120px"] {
    padding-top: 56px !important;
    padding-bottom: 56px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  [style*="padding: 80px"],
  [style*="padding: 64px"] {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  [style*="padding: 56px"],
  [style*="padding: 40px"] {
    padding: 28px !important;
  }
  [style*="padding: 32px"] {
    padding: 20px !important;
  }

  /* Section horizontal padding */
  section {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* Nav mobile layout handled inside Nav.jsx via .pc-nav-* classes */

  /* Reduce big metric numbers */
  [style*="font-size: clamp(44px"],
  [style*="font-size: clamp(56px"],
  [style*="font-size: 128px"] {
    font-size: clamp(28px, 8vw, 44px) !important;
  }

  /* Flex horizontal rows should wrap */
  [style*="display: flex"][style*="flex-wrap: wrap"] {
    gap: 12px !important;
  }

  /* Remove oversized tables to horizontal scroll */
  table {
    display: block;
    overflow-x: auto;
  }

  /* Footer grid single column */
  footer > div:first-child {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
}

@media (max-width: 600px) {
  [style*="font-size: clamp(32px"],
  [style*="font-size: clamp(28px"] {
    font-size: clamp(24px, 6.5vw, 32px) !important;
  }
  [style*="font-size: clamp(40px"],
  [style*="font-size: clamp(36px"] {
    font-size: clamp(28px, 7.5vw, 38px) !important;
  }
  [style*="max-width: 1200"],
  [style*="max-width: 1440"] {
    max-width: 100% !important;
  }
}