/**
 * 보도블록시공(범표집수리) 커스텀 스타일
 * 각 페이지 인라인 <style>/style="" 로 레이아웃·카드·그리드가 이미 구현되어 있으므로,
 * 이 파일은 인라인으로 처리할 수 없는 상태값(모바일 메뉴 열림, 스크롤 동작, 포커스 접근성)만 보완한다.
 */

html { scroll-behavior: smooth; }

a, button { transition: opacity .15s ease, box-shadow .15s ease; }
a:hover, .site-header a:hover { opacity: .85; }

a:focus-visible, button:focus-visible {
  outline: 2px solid #C1622D;
  outline-offset: 2px;
}

/* 모바일 햄버거 메뉴 — header.php 크리티컬 CSS는 기본 숨김만 정의, 열림 상태는 여기서 처리 */
#mobileNav { flex-direction: column; }
#mobileNav.is-open { display: flex; }
#hamburgerBtn[aria-expanded="true"] svg path { stroke: #C1622D; }

/* 전화번호 마스킹(phone_span) — 클릭 시 base64 디코딩되어 텍스트만 드러남(링크 아님) */
.phone-mask { cursor: pointer; border-bottom: 1px dashed currentColor; }
.phone-mask.is-revealed { cursor: text; border-bottom: none; font-weight: 700; }

/* consult.php 전화/문자 카드 버튼 hover */
.phone-call-link:hover, .phone-sms-link:hover { box-shadow: 0 4px 14px rgba(0,0,0,.18); }

/* 플로팅 CTA 등장 트랜지션 */
#backToTop { transition: opacity .2s ease; }

/* 프리미엄 디테일 — 인라인에 없는 속성만 보강(레이아웃/색상은 각 페이지 그대로).
   색상은 config.php COLOR_ACCENT(#C1622D)/COLOR_PRIMARY(#3F3A35)와 동일값을 하드코딩(정적 css라 PHP 상수 참조 불가). */
#main-content h1, #main-content h2 { letter-spacing: -.3px; }

#main-content h2::after {
  content: ''; display: block; width: 32px; height: 3px; margin-top: 10px;
  background: #C1622D; border-radius: 2px;
}

/* border-radius:16px 카드/사진 전체에 얕은 그림자(overflow:hidden에도 안 잘리게 filter 사용) */
#main-content [style*="border-radius:16px"] {
  filter: drop-shadow(0 2px 8px rgba(63,58,53,.08));
  transition: opacity .15s ease, filter .2s ease, transform .2s ease;
}
#main-content a[style*="border-radius:16px"]:hover {
  filter: drop-shadow(0 8px 20px rgba(63,58,53,.16));
  transform: translateY(-3px);
}

/* 상담하기 pill 버튼 */
#main-content a[style*="border-radius:9999px"] {
  box-shadow: 0 6px 16px rgba(193,98,45,.28);
  letter-spacing: .2px;
  transition: opacity .15s ease, box-shadow .2s ease, transform .2s ease;
}
#main-content a[style*="border-radius:9999px"]:hover {
  box-shadow: 0 8px 22px rgba(193,98,45,.38);
  transform: translateY(-2px);
}

.faq-item { transition: border-color .2s ease; }
.faq-item:hover { border-color: #C1622D; }

/* 히어로 가독성 — 이미지(static)와 텍스트(absolute) 사이에 어두운 스크림을 깔아 대비 확보.
   ::before는 positioned라 static인 img보다 항상 나중에 페인트되고, 뒤이은 텍스트 div보다는 먼저 페인트됨(DOM 순서). */
#main-content > section:first-of-type::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.72) 0%, rgba(0,0,0,.4) 40%, rgba(0,0,0,0) 72%);
  pointer-events: none;
}