/* =====================================================================
   가독성 공통 규칙 (모든 페이지 공통, 각 페이지 스타일 뒤에 로드)
   - 한글은 어절(띄어쓰기) 단위로만 줄바꿈: "지원 / 금"처럼 단어 중간이 끊기지 않게
   - 제목은 줄 길이를 고르게(balance), 본문은 마지막 줄에 한 글자만 남지 않게(pretty)
   - 자간은 제목만 살짝 좁히고, 본문은 기본값에 가깝게 → 글자가 붙어 보이지 않게
   ===================================================================== */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  word-break: keep-all;
  overflow-wrap: break-word;   /* 너무 긴 URL·숫자 덩어리만 예외적으로 끊음 */
  line-break: strict;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, .sec-title, .gate-title, .modal-step-head h2 {
  text-wrap: balance;
  word-break: keep-all;
}
h1, h2, .sec-title { line-height: 1.3; letter-spacing: -0.025em; }
h3, h4 { line-height: 1.4; letter-spacing: -0.015em; }

p, li, dd, summary, .sec-lead, .gate-desc, .faq-a, .desc, .q-desc, label {
  text-wrap: pretty;
  word-break: keep-all;
}
p, li, .sec-lead, .faq-a { letter-spacing: -0.005em; }
p, .sec-lead { line-height: 1.7; }

/* 끊기면 뜻이 흐려지는 조각은 한 줄로 유지 */
a[href^="tel:"], .phone-hours, .price, .result-amount, .max-badge,
.btn, .pf-filter, .preset-btn, .gate-tag, .kbd, .new-badge {
  white-space: nowrap;
}

/* 메인 공사 선택 카드: 하단 배지가 두 줄로 꺾이거나 오른쪽 화살표 버튼 밑으로 들어가지 않게 */
/* 화살표 버튼을 오른쪽 위 모서리로 옮겨, 설명과 배지가 카드 폭 전체를 쓰게 한다 */
.gate-card { grid-template-columns: 1fr !important; padding: 28px 24px 24px !important; }
.gate-card > .gate-arrow { position: absolute !important; top: 20px; right: 20px; width: 44px !important; height: 44px !important; margin: 0 !important; }
.gate-card > .gate-arrow svg { width: 20px; height: 20px; }
.gate-card .gate-tag { margin-right: 52px; align-self: flex-start; }
.gate-card .gate-body > span[style*="border-radius:999px"] { white-space: nowrap; }
.gate-card .gate-desc { line-height: 1.55; }

/* ---------------- 모바일 ---------------- */
@media (max-width: 768px) {
  body { font-size: 15px; }
  h1, .hero h1 { line-height: 1.3 !important; letter-spacing: -0.025em !important; }
  h2, .sec-title { line-height: 1.32 !important; letter-spacing: -0.02em !important; }
  p, .sec-lead, li { font-size: max(14px, 1em); line-height: 1.68; }
  .sec-lead br, .gate-desc br { display: none; }   /* PC용 강제 줄바꿈이 모바일에서 어색하게 끊기지 않게 */
  .btn { white-space: normal; text-align: center; }  /* 좁은 화면에선 버튼 글자가 넘치지 않게 */
  small, .tiny, .q-agree, .dt { font-size: max(11.5px, 1em); }
  input, select, textarea { font-size: 16px !important; }   /* iOS 입력 시 화면 자동 확대 방지 */
  #surveyPopupModal .q-input { font-size: 16px !important; }
  /* 메인 공사 선택 카드 4개가 한 줄 인라인 그리드라 화면 밖으로 밀려나던 문제 */
  .gate-grid { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  .gate-card .gate-desc { font-size: 12.5px; line-height: 1.5; }
  .gate-card .gate-title { font-size: 22px; }
}
@media (max-width: 380px) {
  .gate-grid { grid-template-columns: 1fr !important; }
}