/* 좁은 화면 보정.
   각 페이지 <style> 뒤에 실려서 여기 값이 이깁니다.

   ── 왜 !important 인가 ──
   카드 격자는 `<div class="pgrid" style="grid-template-columns:repeat(3,1fr)">` 처럼
   **인라인 style** 로 열 수가 박혀 있습니다. 인라인은 스타일시트를 이기므로
   미디어쿼리로는 못 바꿉니다. 그래서 여기서만 !important 를 씁니다.
   인라인 style 을 걷어내는 것이 정석이지만, 그러면 20개 페이지의 본문을 다시
   손대야 합니다. 이 한 줄이 같은 일을 합니다. */

/* 3열 → 2열 → 1열 */
@media (max-width: 900px) {
  .pgrid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 620px) {
  .pgrid { grid-template-columns: 1fr !important; }
}

/* 로고 격자도 같은 이유로 좁은 화면에서 칸을 줄입니다. */
@media (max-width: 900px) {
  .logos div { flex: 0 0 calc(33.333% - 10px) !important; }
}
@media (max-width: 620px) {
  .logos div { flex: 0 0 calc(50% - 7px) !important; }
}

/* 가로로 넘치는 표는 표만 스크롤되게 둡니다. 페이지 전체가 옆으로 밀리면
   본문을 읽는 동안 계속 흔들립니다. */
@media (max-width: 760px) {
  table { display: block; overflow-x: auto; }
}

/* 좁은 화면의 펼친 메뉴 — 줄 전체가 눌려야 합니다.
   ⚠ 원래는 `<li>` 가 padding:12px 24px 를 갖고 그 안의 `<a>` 는 인라인이라
      글자 폭만 링크였습니다. 옆의 빈자리를 눌러도 아무 일이 없어 "메뉴가 안 먹는다"
      로 보이던 자리입니다. 여백을 li 에서 a 로 옮겨 줄 전체를 링크로 만듭니다.
   ⚠ `.menu.open li` 안에는 Solutions 의 하위 메뉴(.subbar)도 들어 있어, li 의 여백을
      0 으로 두고 자식 a 에만 주는 방식이라야 하위 메뉴가 무너지지 않습니다. */
@media (max-width: 900px) {
  .menu.open > li { padding: 0 !important; }
  .menu.open > li > a { display: block; padding: 12px 24px; }
  /* Solutions 는 펼침 표시가 붙은 인라인 플렉스라 block 대신 flex 로 폅니다 */
  .menu.open > li > a.drop { display: flex; }
}