/* archetype C - compact top-banner hero - songdo-dong-beranda-suri (deep navy/silver, thin futuristic font, 2x2 photo layout) */
.pg-sdd{
  --accent:hsl(220,50%,22%);
  --accent-light:hsl(220,40%,42%);
  --primary-dark:#ffffff;
  --bg-alt:hsl(220,25%,96%);
  --line:hsl(220,25%,86%);
  --accent-text:hsl(220,55%,26%);
  font-family:'Jost','Pretendard','Noto Sans KR',-apple-system,BlinkMacSystemFont,sans-serif;
  font-weight:300;
}
.pg-sdd h1,.pg-sdd h2,.pg-sdd h3{font-weight:300;letter-spacing:.01em}
.pg-sdd .sdd-hero-banner{position:relative;width:100%;aspect-ratio:21/9;overflow:hidden;background:var(--bg-alt)}
.pg-sdd .sdd-hero-banner img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.9)}
.pg-sdd .sdd-hero-banner-overlay{position:absolute;inset:0;background:linear-gradient(180deg,hsla(220,50%,10%,.1),hsla(220,50%,10%,.75))}
.pg-sdd .sdd-hero-body{background:var(--accent);padding:44px 20px 52px;text-align:center}
.pg-sdd .sdd-hero-body .breadcrumb{color:hsla(220,30%,80%,.8);font-size:.8rem;margin-bottom:14px;display:block;letter-spacing:.04em}
.pg-sdd .sdd-hero-body .breadcrumb a{color:hsla(220,30%,80%,.8)}
.pg-sdd .sdd-hero-body h1{color:#fff;font-size:clamp(1.9rem,4.2vw,2.8rem);margin:0 0 16px;letter-spacing:.04em}
.pg-sdd .sdd-hero-body p{color:hsla(220,30%,92%,.85);max-width:600px;margin:0 auto 26px;font-weight:400}
.pg-sdd .sdd-cta-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.pg-sdd .sdd-cta-row .btn-primary{background:transparent;color:#fff;border:1px solid hsla(0,0%,100%,.6);box-shadow:none;border-radius:2px;font-weight:400}
.pg-sdd .sdd-btn-outline{display:inline-flex;align-items:center;padding:14px 28px;border-radius:2px;border:1px solid hsla(0,0%,100%,.3);color:hsla(0,0%,100%,.9);font-weight:400;text-decoration:none}
.pg-sdd .sdd-btn-outline:hover{background:hsla(0,0%,100%,.08)}
.pg-sdd .section-eyebrow{color:var(--accent-text);font-weight:600;letter-spacing:.08em}
.pg-sdd .related-card .rc-tag{color:var(--accent-text)}
.pg-sdd .info-card{border-radius:2px;border:1px solid var(--line)}
.pg-sdd .info-icon{color:var(--accent);width:52px;height:52px;display:flex;align-items:center;justify-content:center;border:1px solid var(--line)}
.pg-sdd .ba-set{border-radius:2px}
.pg-sdd .related-card{border-radius:2px}
@media(max-width:700px){
  .pg-sdd .sdd-hero-body{padding:32px 16px 40px}
}