/* archetype C - compact top-banner hero - guwol-dong-beranda-suri (teal, bold gothic, 2x2 photo layout) */
.pg-gwd{
  --accent:hsl(180,45%,30%);
  --accent-light:hsl(180,45%,42%);
  --primary-dark:#ffffff;
  --bg-alt:hsl(180,20%,96%);
  --line:hsl(180,30%,86%);
  --accent-text:hsl(180,55%,22%);
  font-family:'Pretendard','Noto Sans KR',-apple-system,BlinkMacSystemFont,sans-serif;
}
.pg-gwd h1,.pg-gwd h2,.pg-gwd h3{font-weight:900;letter-spacing:-.03em}
.pg-gwd .gwd-hero-banner{position:relative;width:100%;aspect-ratio:21/9;overflow:hidden;background:var(--bg-alt)}
.pg-gwd .gwd-hero-banner img{width:100%;height:100%;object-fit:cover;display:block}
.pg-gwd .gwd-hero-banner-overlay{position:absolute;inset:0;background:linear-gradient(180deg,hsla(180,45%,12%,.15),hsla(180,45%,12%,.55))}
.pg-gwd .gwd-hero-body{background:var(--accent);padding:44px 20px 52px;text-align:center}
.pg-gwd .gwd-hero-body .breadcrumb{color:rgba(255,255,255,.7);font-size:.85rem;margin-bottom:14px;display:block}
.pg-gwd .gwd-hero-body .breadcrumb a{color:rgba(255,255,255,.7)}
.pg-gwd .gwd-hero-body h1{color:#fff;font-size:clamp(1.9rem,4.2vw,2.7rem);margin:0 0 16px}
.pg-gwd .gwd-hero-body p{color:rgba(255,255,255,.88);max-width:600px;margin:0 auto 26px}
.pg-gwd .gwd-cta-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.pg-gwd .gwd-cta-row .btn-primary{background:#fff;color:var(--accent-text);box-shadow:0 10px 26px rgba(0,0,0,.2);border-radius:6px}
.pg-gwd .gwd-btn-outline{display:inline-flex;align-items:center;padding:14px 28px;border-radius:6px;border:1.5px solid rgba(255,255,255,.6);color:#fff;font-weight:700;text-decoration:none}
.pg-gwd .gwd-btn-outline:hover{background:rgba(255,255,255,.12)}
.pg-gwd .section-eyebrow{color:var(--accent-text);font-weight:800}
.pg-gwd .related-card .rc-tag{color:var(--accent-text)}
.pg-gwd .info-card{border-radius:10px;border:1px solid var(--line)}
.pg-gwd .info-icon{color:var(--accent);width:52px;height:52px;display:flex;align-items:center;justify-content:center;border-radius:10px;background:var(--bg-alt)}
.pg-gwd .ba-set{border-radius:10px}
.pg-gwd .related-card{border-radius:8px}
@media(max-width:700px){
  .pg-gwd .gwd-hero-body{padding:32px 16px 40px}
}