/* 생성기 블로그(스틸방수 · 지붕 계산기 글)의 머리 부분 — 사진 + 남색 오버레이 (2026-09-21 사용자: 연한 파랑이 밋밋하다).
   오버레이는 표준 진파랑 --pz-blue-deep(#2f5d8c = 47,93,140) — 처음엔 표준에 없는 남색(#0e2642·#143458)을 썼다가 고쳤다.
   본문 HTML 과 posco-seo 템플릿은 그대로. 여기서 .pbs-head 의 배경·글자색만 덮는다. 사진은 body 클래스로 고른다. */
body.gen-steel { --gen-photo: url('/wp-content/uploads/2026/08/스틸방수-시공-후-사진.jpg'); }   /* 스틸방수 완공 드론 컷 1600x900, 워터마크 없음 */
body.gen-roof  { --gen-photo: url('/wp-content/uploads/2024/07/지붕공사-홈페이지-아랫부분-scaled-e1721216403901.jpg'); }   /* 칼라강판 지붕 드론 컷 2150x1919, 워터마크 없음 */

.pbs .pbs-head {
  background:
    linear-gradient(90deg, rgba(47, 93, 140, .94) 0%, rgba(47, 93, 140, .80) 50%, rgba(47, 93, 140, .45) 100%),
    var(--gen-photo) center 45% / cover no-repeat, var(--pz-blue-deep);
  border-bottom: 0;
}
.pbs .pbs-head-inner { padding-top: 88px; padding-bottom: 72px; }
.pbs .pbs-head h1 { color: #fff !important; }
.pbs .pbs-head .pbs-eyebrow { color: #b9d6ef; font-weight: 700; letter-spacing: .06em; }
.pbs .pbs-head .pbs-eyebrow::before { background: #b9d6ef; }
.pbs .pbs-head .pbs-meta { color: rgba(255, 255, 255, .78); }
.pbs .pbs-head .pbs-meta .pbs-brand { color: #fff; }
.pbs .pbs-head .pbs-meta .pbs-dot { background: rgba(255, 255, 255, .5); }
.pbs .pbs-head-mascot { filter: drop-shadow(0 12px 24px rgba(0, 0, 0, .35)); }
@media (max-width: 760px) { .pbs .pbs-head-inner { padding-top: 56px; padding-bottom: 48px; } }

/* 스틸방수 글 두 표(누적비용·가격표): 폰에서 표 최소 폭 610px 때문에 '비용 범위'·'스틸방수 누적비용' 열이 화면 밖에 있었다
   → 폰에서는 최소 폭을 풀고 칸 여백·글자를 조금 줄여 세 열이 한 화면에 들어오게 (2026-09-28). 지붕 비용 글(gen-roof)은 그대로 */
@media (max-width: 760px) {
  body.gen-steel .pbs .pbs-table-wrap table { min-width: 0; }
  body.gen-steel .pbs .pbs-table-wrap th,
  body.gen-steel .pbs .pbs-table-wrap td { padding: 12px 9px; }
  body.gen-steel .pbs .pbs-table-wrap td { font-size: 14px; }
}