/* Logicare — mobile/responsive refinements.
   Loaded AFTER each page's inline <style>, so equal-specificity !important rules
   here win on small screens. Desktop layout is untouched. */

@media (max-width: 768px) {
  /* Korean-aware wrapping for ALL text (word-break inherits, so this cascades to
     every paragraph, card, button, label). Break on spaces only — no orphaned
     를/은/는, no words split mid-syllable. overflow-wrap still breaks absurdly
     long unbreakable strings (URLs etc.) so nothing overflows. */
  body, .lc-root { word-break: keep-all; overflow-wrap: break-word; }

  /* Drop desktop line-balancing breaks inside body paragraphs (they fall in odd
     spots on narrow screens). Heading and address <br> are left intact. */
  p br { display: none; }
  /* ...except paragraphs that use <br> for genuine field lines (label/value,
     notice/effective-date), where the break must survive on mobile. */
  p.lc-br-keep br { display: inline !important; }

  /* Fluid display typography (replaces oversized desktop sizes) */
  .lc-hero-title { font-size: clamp(28px, 8.4vw, 42px) !important; line-height: 1.18 !important; }
  section h2 { font-size: clamp(24px, 6.6vw, 32px) !important; line-height: 1.28 !important; }

  /* Trim the generous desktop section padding so there's less dead scrolling */
  section[style*="padding:118px 0"], section[style*="padding:108px 0"],
  section[style*="padding:104px 0"], section[style*="padding:100px 0"],
  section[style*="padding:96px 0"],  section[style*="padding:84px 0"] {
    padding-top: 60px !important; padding-bottom: 60px !important;
  }

  /* Narrower side gutters (40px → 22px) for content containers + header/footer */
  [style*="padding:0 40px"] { padding-left: 22px !important; padding-right: 22px !important; }

  /* Home hero: reclaim vertical space */
  .lc-hero-grid { padding: 116px 22px 80px !important; }

  /* Footer + the "why us" two-up grids collapse to a single column */
  .lc-net-grid { grid-template-columns: 1fr !important; gap: 32px !important; }

  /* Collapse two-up grids to a single column so cards are full-width and
     consistent down the page (contact form fields, the "WHY Logicare" 01-04
     stat cards, service feature pairs) — no more cramped half-width cards. */
  [style*="grid-template-columns:1fr 1fr"] { grid-template-columns: 1fr !important; }

  /* Client grids use five columns on desktop and two on phones so the ten
     customer entries stay evenly aligned and legible. */
  .lc-client-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 26px 14px !important; }

  /* 4-up content grids (e.g. the company clients name-boxes) → 2 per row so long
     names fit. The org chart (.lc-cap-grid) keeps its own single-column collapse. */
  [style*="grid-template-columns:repeat(4,1fr)"]:not(.lc-cap-grid) { grid-template-columns: repeat(2, 1fr) !important; }

  /* Form fields ≥16px so iOS doesn't auto-zoom on focus */
  input, select, textarea { font-size: 16px !important; }

  /* Comfortable tap targets for nav/list rows + buttons */
  .lc-news-row { padding-top: 22px !important; padding-bottom: 22px !important; }
}

@media (max-width: 430px) {
  .lc-hero-title { font-size: clamp(25px, 7.8vw, 34px) !important; }
  /* Stack the hero CTA buttons full-width for easy tapping */
  .lc-btn-primary, .lc-btn-ghost { justify-content: center; }
}