/* 시공분야 6장 — 폰에서 히어로가 첫 화면에 딱 들어가게 (2026-09-21 사용자).
   본문·CSS 는 워프에서 그대로 뜬 것이라 건드리지 않고, 폰 폭에서만 바깥에서 덮어쓴다(그래서 !important).
   여섯 장의 접두어가 다 다르다(pfw·prw·phw·prc·ppc·plb) → 끝말로 고른다: …-hero__eyebrow · __desc · __actions · __phone · 사진(figure).
   히어로의 class 는 'prw-hero prw-full' 처럼 뒤에 다른 클래스가 붙는다 → :is([class$="-hero"],[class*="-hero "]).
   방식: 히어로 = 화면 높이(단색 헤더 페이지는 헤더만큼 뺌), 글은 촘촘히, 사진이 남는 공간을 채운다. */
@media (max-width: 767px) {
  body[data-page-type="service"] main :is([class$="-hero"],[class*="-hero "]) {
    display: flex !important; flex-direction: column !important; overflow: hidden;
    min-height: 100svh !important; height: auto !important; padding-top: 0 !important; padding-bottom: 0 !important;
  }
  body[data-page-type="service"][data-header="solid"] main :is([class$="-hero"],[class*="-hero "]) { min-height: calc(100svh - var(--pz-header-h)) !important; }

  /* 안쪽 묶음들: 세로로 쌓고 남는 높이를 사진에 준다 */
  body[data-page-type="service"] main :is([class$="-hero"],[class*="-hero "]) > [class*="-hero__inner"],
  body[data-page-type="service"] main :is([class$="-hero"],[class*="-hero "]) > [class*="-hero__grid"],
  body[data-page-type="service"] main :is([class$="-hero"],[class*="-hero "]) > [class*="-hero__top"] {
    display: flex !important; flex-direction: column !important; gap: 0 !important;
    padding-top: 18px !important; padding-bottom: 0 !important; min-height: 0 !important;
  }
  body[data-page-type="service"] main :is([class$="-hero"],[class*="-hero "]) > [class*="-hero__inner"],
  body[data-page-type="service"] main :is([class$="-hero"],[class*="-hero "]) > [class*="-hero__grid"] { flex: 1 1 auto !important; }
  body[data-page-type="service"][data-header="hero"] main :is([class$="-hero"],[class*="-hero "]) > [class*="-hero__inner"],
  body[data-page-type="service"][data-header="hero"] main :is([class$="-hero"],[class*="-hero "]) > [class*="-hero__grid"],
  body[data-page-type="service"][data-header="hero"] main :is([class$="-hero"],[class*="-hero "]) > [class*="-hero__top"] { padding-top: calc(var(--pz-header-h) + 12px) !important; }
  body[data-page-type="service"] main [class$="-hero__copy"] { padding-top: 0 !important; padding-bottom: 0 !important; min-height: 0 !important; height: auto !important; justify-content: flex-start !important; flex: 0 0 auto !important; }

  body[data-page-type="service"] main [class$="-hero__eyebrow"] { margin: 0 0 8px !important; font-size: 13px !important; }   /* 작은 머리글 표준 13px — 더 줄이지 않는다 */
  body[data-page-type="service"] main :is([class$="-hero"],[class*="-hero "]) h1 { margin: 0 0 10px !important; font-size: clamp(27px, 8vw, 36px) !important; line-height: 1.2 !important; }
  body[data-page-type="service"] main [class$="-hero__desc"] { margin: 0 0 12px !important; font-size: 14px !important; line-height: 1.55 !important; }
  body[data-page-type="service"] main [class$="-hero__actions"] { display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px !important; margin: 0 !important; }
  body[data-page-type="service"] main [class$="-hero__actions"] > a { width: auto !important; min-width: 0 !important; min-height: 46px !important; padding: 0 8px !important; font-size: 14.5px !important; }
  body[data-page-type="service"] main [class$="-hero__phone"] { margin: 10px 0 0 !important; font-size: 22px !important; }
  body[data-page-type="service"] main [class$="-hero__meta"] { margin-top: 10px !important; padding-bottom: 18px; }

  body[data-page-type="service"] main :is([class$="-hero"],[class*="-hero "]) figure {
    flex: 1 1 150px !important; min-height: 150px !important; height: auto !important; max-height: none !important;
    margin: 14px 0 0 !important; overflow: hidden; position: relative; aspect-ratio: auto !important;
    width: 100% !important; max-width: none !important; align-self: stretch !important;   /* 지붕형에서 폭이 2px 로 쪼그라들었다 */
  }
  body[data-page-type="service"] main :is([class$="-hero"],[class*="-hero "]) figure img { width: 100% !important; height: 100% !important; min-height: 0 !important; max-height: none !important; object-fit: cover !important; position: absolute; inset: 0; }
  body[data-page-type="service"] main :is([class$="-hero"],[class*="-hero "]) figure figcaption { position: absolute !important; left: 0; right: 0; bottom: 0; padding: 8px 12px !important; font-size: 12px !important; }
  body[data-page-type="service"] main :is([class$="-hero"],[class*="-hero "]) figure figcaption strong { font-size: 13.5px !important; }
  /* 난간공사: 사진이 글 위에 있다 → 글 아래로 */
  body[data-page-type="service"] main .ppc-hero__grid > figure { order: 2; }
  /* 대형건물: 사진 위에 카드가 얹힌 구조. 안쪽 묶음이 660px 로 고정돼 있다 → 히어로 높이에 맞춘다 */
  body[data-page-type="service"] main .plb-hero > .plb-hero-inner { min-height: 0 !important; height: auto !important; flex: 1 1 auto; padding-top: 16px !important; padding-bottom: 68px !important; display: flex !important; align-items: center; }
  /* 사진은 카드 뒤에 깔지 않고 맨 위에 따로 — 지붕면이 다 보이게(2026-10-07 사용자, 평택 공장 사진) */
  body[data-page-type="service"] main .plb-hero > .plb-hero-image { position: static !important; order: -1; flex: 0 0 auto !important; width: 100% !important; height: auto !important; min-height: 0 !important; aspect-ratio: 16 / 9; }
  body[data-page-type="service"] main .plb-hero::after { display: none !important; }
  /* 바닥형 스틸방수: 히어로에 사진이 없다 → 촘촘히 줄일 이유가 없다(아래가 텅 빈다, 2026-09-21 사용자).
     글·버튼을 넉넉한 크기로 되돌리고 화면 높이 안에서 세로 가운데에 놓는다. 버튼은 한 줄에 하나씩. */
  body[data-page-type="service"] main .pfw-hero > .pfw-hero__inner { justify-content: center !important; padding-bottom: 28px !important; }
  body[data-page-type="service"] main .pfw-hero .pfw-hero__eyebrow { margin-bottom: 16px !important; font-size: 13px !important; }
  body[data-page-type="service"] main .pfw-hero h1 { margin-bottom: 16px !important; font-size: clamp(32px, 9.6vw, 44px) !important; line-height: 1.22 !important; }
  body[data-page-type="service"] main .pfw-hero .pfw-hero__desc { margin-bottom: 24px !important; font-size: 16px !important; line-height: 1.7 !important; }
  body[data-page-type="service"] main .pfw-hero .pfw-hero__actions { grid-template-columns: 1fr; gap: 10px !important; }
  body[data-page-type="service"] main .pfw-hero .pfw-hero__actions > a { min-height: 52px !important; font-size: 16px !important; }
  body[data-page-type="service"] main .pfw-hero .pfw-hero__phone { margin-top: 22px !important; font-size: 30px !important; }
  body[data-page-type="service"] main .pfw-hero .pfw-hero__meta { margin-top: 22px !important; padding-bottom: 0; }
  /* 대형건물: 히어로 아래 적용 범위 띠(공장·창고 / 상가·업무시설 / 교회·공공건물 / 전국 시공 상담, 128px 중 52px 가 히어로에 겹침)의
     **둘째 줄까지 첫 화면에** 보이게 히어로를 그만큼 줄인다 (2026-09-21 사용자) */
  body[data-page-type="service"][data-header="solid"] main .plb-hero { min-height: calc(100svh - var(--pz-header-h) - 84px) !important; }
  body[data-page-type="service"] main .plb-hero .plb-hero-card { padding: 22px 20px !important; }

  /* 지붕형 스틸방수: 바닥형처럼 글·버튼을 넉넉하게. 사진이 있어 버튼은 한 줄에 둘, 사진은 남는 높이(최소 140px) */
  body[data-page-type="service"] main .prw-hero .prw-hero__eyebrow { margin-bottom: 14px !important; font-size: 13px !important; }
  body[data-page-type="service"] main .prw-hero h1 { margin-bottom: 14px !important; font-size: clamp(31px, 9.2vw, 42px) !important; line-height: 1.22 !important; }
  body[data-page-type="service"] main .prw-hero .prw-hero__desc { margin-bottom: 20px !important; font-size: 15.5px !important; line-height: 1.65 !important; }
  body[data-page-type="service"] main .prw-hero .prw-hero__actions > a { min-height: 52px !important; font-size: 15.5px !important; }
  body[data-page-type="service"] main .prw-hero .prw-hero__phone { margin-top: 18px !important; font-size: 28px !important; }
  body[data-page-type="service"] main .prw-hero figure { flex-basis: 140px !important; min-height: 140px !important; margin-top: 18px !important; }
}