/* 이미지 우선 상세페이지 공통 모듈 — 히어로 직후 현장사진 4장(.pf) + 모바일 공통 보정 + 컴팩트 관련서비스(.pf-related)
   모든 상세페이지(detail.css 계열 / np-XX.css 계열)에서 마지막에 로드한다. */

/* ---------- 현장사진 블록 ---------- */
.pf{padding:56px 24px;background:#fff;}
.pf--cream{background:var(--cream,#f6f5ef);}
.pf--dark{background:var(--dark,#0b1f16);color:#fff;}
.pf__inner{max-width:1200px;margin:0 auto;}
.pf__eyebrow{color:var(--green,#1f8a5c);font-weight:700;font-size:.8rem;letter-spacing:.12em;margin-bottom:8px;}
.pf--dark .pf__eyebrow{color:var(--green-light,#4fd18b);}
.pf__title{font-size:clamp(1.3rem,3vw,1.9rem);font-weight:800;letter-spacing:-.02em;line-height:1.35;margin:0 0 22px;}
.pf__grid{display:grid;gap:14px;grid-template-columns:repeat(2,1fr);}
.pf__grid figure{margin:0;min-width:0;}
.pf__grid img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius,14px);background:#e8e6dd;cursor:zoom-in;}
.pf__grid figcaption{margin-top:8px;font-size:.88rem;line-height:1.55;color:#555;}
.pf--dark .pf__grid figcaption{color:rgba(255,255,255,.75);}

/* 형태 A: 한 줄 4장(정사각) */
.pf--row4 .pf__grid{grid-template-columns:repeat(4,1fr);}
.pf--row4 .pf__grid img{aspect-ratio:1/1;}
/* 형태 B: 2×2 (기본) */
.pf--2x2 .pf__grid img{aspect-ratio:4/3;}
/* 대표사진 크게 + 보조 3장 */
.pf--feature .pf__grid{grid-template-columns:2fr 1fr;grid-template-rows:auto auto auto;}
.pf--feature .pf__grid figure:first-child{grid-row:1/4;}
.pf--feature .pf__grid figure:first-child img{height:100%;aspect-ratio:auto;min-height:420px;}
.pf--feature .pf__grid figure:not(:first-child) img{aspect-ratio:16/9;}
/* 캡션을 사진 위에 얹는 타입 */
.pf--overlay .pf__grid figure{position:relative;}
.pf--overlay .pf__grid figcaption{position:absolute;left:0;right:0;bottom:0;margin:0;padding:28px 12px 10px;color:#fff;border-radius:0 0 var(--radius,14px) var(--radius,14px);background:linear-gradient(transparent,rgba(0,0,0,.7));}

@media(max-width:900px){
  .pf--row4 .pf__grid{grid-template-columns:repeat(2,1fr);}
  .pf--feature .pf__grid{grid-template-columns:1fr 1fr;}
  .pf--feature .pf__grid figure:first-child{grid-column:1/3;grid-row:auto;}
  .pf--feature .pf__grid figure:first-child img{height:auto;min-height:0;aspect-ratio:16/10;}
}
/* 모바일: 사진이 작아지지 않도록 1열 */
@media(max-width:560px){
  .pf{padding:36px 20px;}
  .pf__grid,.pf--row4 .pf__grid,.pf--feature .pf__grid{grid-template-columns:1fr;gap:16px;}
  .pf--feature .pf__grid figure:first-child{grid-column:auto;}
  .pf__grid img,.pf--row4 .pf__grid img,.pf--feature .pf__grid figure:not(:first-child) img{aspect-ratio:4/3;}
}

/* ---------- 컴팩트 관련 서비스 ---------- */
.pf-related{padding:44px 24px;max-width:1200px;margin:0 auto;}
.pf-related h2{font-size:1.15rem;font-weight:800;margin:0 0 14px;}
.pf-related ul{list-style:none;margin:0;padding:0;display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));}
.pf-related a{display:block;padding:12px 16px;background:#fff;border:1px solid #e3e1d8;border-radius:10px;font-size:.95rem;font-weight:600;color:var(--text,#1b1f1c);text-decoration:none;line-height:1.4;}
.pf-related a small{display:block;font-weight:400;font-size:.8rem;color:#777;margin-top:2px;}
.pf-related a:hover{border-color:var(--green,#1f8a5c);color:var(--green,#1f8a5c);}
@media(max-width:560px){.pf-related{padding:32px 20px;}.pf-related ul{grid-template-columns:1fr;}.pf-related a{padding:14px 16px;}}

/* ---------- 모바일 공통 보정 (320~430px) ---------- */
@media(max-width:600px){
  .d-section{padding-left:20px;padding-right:20px;padding-top:56px;padding-bottom:56px;}
  .d-hero h1,.d-hero h1 *{font-size:clamp(1.6rem,7.4vw,2.2rem);line-height:1.25;word-break:keep-all;overflow-wrap:break-word;}
  .d-hero{min-height:46vh;}
  .d-hero__inner{padding:96px 20px 36px;}
  .d-body,.d-lead,.d-timeline__step p{font-size:1rem;line-height:1.8;}
  .d-cards{grid-template-columns:1fr;}
  .btn{min-height:46px;display:inline-flex;align-items:center;justify-content:center;}
  .d-final-cta{padding:80px 20px;}
}
/* 어떤 표도 화면을 뚫지 않도록: 래퍼가 없는 표는 블록 스크롤 */
@media(max-width:760px){
  main table,section table,article table{max-width:100%;}
  table:not(.d-compare):not([class*=dash]){display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;}
}

/* 히어로 직후 breadcrumb의 120px 상단 여백(고정 네비용) 제거 → 사진이 바로 보이게 */
.d-hero+.breadcrumb,[class*=hero]+.breadcrumb{padding-top:14px;padding-bottom:12px;}
@media(max-width:600px){.breadcrumb{padding-left:20px;padding-right:20px;}}
.pf__title,.d-title,.d-hero h1{word-break:keep-all;overflow-wrap:break-word;}
h1{word-break:keep-all;overflow-wrap:break-word;}