/* ==========================================================================
   responsive.css — 모바일/태블릿 대응 오버라이드 레이어
   main.css 뒤에 로드됨. 기존 클래스명·변수명 변경 없음 (추가 정의만).
   ========================================================================== */

/* 이미지 오버플로우 방지 (전 해상도 공통 안전장치) */
img {
  max-width: 100%;
  height: auto;
}

/* 한글 제목/본문 어절 단위 줄바꿈 — 좁은 화면에서 단어 중간 절단 방지 */
.hero__title,
.hero__desc,
.sec-title,
.sec-desc,
.svc-row__title,
.svc-row__desc,
.sol-card__title,
.infra-card p,
.why-card p,
.contact-bnr__title {
  word-break: keep-all;
}

/* 가로 스크롤 발생 방지 */
html,
body {
  overflow-x: hidden;
}

/* ── 태블릿 이하 (≤1024px) ─────────────────────────────── */
@media (max-width: 1024px) {
  .container {
    padding-left: 24px;
    padding-right: 24px;
  }
}

/* ── 모바일 (≤768px) ──────────────────────────────────── */
@media (max-width: 768px) {
  /* PC 전용 강제 줄바꿈 해제 — 텍스트가 컨테이너 폭에 맞춰 자연 줄바꿈 */
  .pc-br {
    display: none;
  }

  .container {
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* ==========================================================================
   [주의] 아래 항목은 main.css / common.css / common.js 확인 후 작업 필요:
   - #phone-scale-outer/inner transform 스케일링 해제 (common.js)
   - .hero, .sol-cards, .infra-cards, .infra-nodes, .svc-row, .why-cards,
     .logo-slide__track, .hero__stats 의 모바일 레이아웃 (grid/flex 재배치)
   - .gnb ↔ .header__toggle 모바일 메뉴 동작 (common.js + common.css)
   - <contact-bnr>, <site-footer> 커스텀 엘리먼트 내부 (common.js에서 렌더링)
   기존 main.css에 미디어쿼리가 이미 있다면 이 파일과 충돌 여부 검토 필요.
   ========================================================================== */