:root{
  --h: 158;
  --maxw: 863px;
}

*{box-sizing:border-box;}
body{
  margin:0;
  font-family:"Pretendard",-apple-system,BlinkMacSystemFont,"Malgun Gothic",sans-serif;
  color:hsl(var(--h) 22% 15%);
  line-height:1.7;
  background:#fff;
}
.wrap{
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:20px;
}
a{color:inherit;}

/* Layout: left vertical sidebar (H4) */
.layout{
  display:grid;
  grid-template-columns:220px 1fr;
  min-height:100%;
}
.side-nav{
  background:hsl(var(--h) 38% 20%);
  color:hsl(var(--h) 20% 92%);
  padding:28px 20px;
  display:flex;
  flex-direction:column;
  gap:28px;
}
.side-nav .logo{
  font-weight:800;
  font-size:1.2rem;
  text-decoration:none;
  color:#fff;
}
.side-nav nav{
  display:flex;
  flex-direction:column;
  gap:14px;
}
.side-nav nav a{
  text-decoration:none;
  color:hsl(var(--h) 20% 88%);
  font-size:.95rem;
  transition:color .2s;
}
.side-nav nav a:hover{color:hsl(var(--h) 70% 65%);}

/* Hero V7: CSS pattern background */
.hero{
  position:relative;
  background:
    radial-gradient(hsl(var(--h) 50% 55% / .35) 2px, transparent 2px),
    hsl(var(--h) 40% 26%);
  background-size:22px 22px;
  color:#fff;
  padding-block:56px;
}
.hero h1{
  font-size:2.1rem;
  margin:0 0 16px;
}
.hero .lead{
  max-width:600px;
  font-size:1rem;
  color:hsl(var(--h) 20% 94%);
  margin:0;
}

/* Main */
main{padding-block:48px;}
main h2{
  font-size:1.28rem;
  margin:38px 0 12px;
  color:hsl(var(--h) 45% 24%);
}
main h2:first-child{margin-top:0;}
main h2::before{
  content:"";
  display:inline-block;
  width:10px;height:10px;
  background:hsl(var(--h) 55% 45%);
  margin-right:8px;
  border-radius:2px;
}
main p{margin:0 0 12px;font-size:.97rem;}

/* Figure */
.ph{margin:0 0 48px;}
.ph-row{display:flex;flex-wrap:nowrap;justify-content:center;align-items:flex-start;gap:16px;max-width:900px;margin-inline:auto;}
.ph-row img{flex:1 1 0;min-width:0;width:100%;height:auto;display:block;border-radius:4px;}
@media (max-width:600px){.ph-row{gap:10px;}}

/* CTA C6: bottom accent band */
.cta{
  background:hsl(var(--h) 55% 42%);
  border-top:6px solid hsl(var(--h) 65% 30%);
  padding-block:34px;
}
.cta-band{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:16px;
}
.cta-band p{
  margin:0;
  color:#fff;
  font-size:1.02rem;
  max-width:600px;
}
.cta-link{
  display:inline-block;
  padding:12px 28px;
  background:#fff;
  color:hsl(var(--h) 55% 30%);
  border-radius:4px;
  text-decoration:none;
  font-weight:700;
  transition:opacity .2s;
}
.cta-link:hover{opacity:.85;}

/* Footer F4: banner strip, horizontal row */
footer{
  background:hsl(var(--h) 30% 94%);
  border-top:3px solid hsl(var(--h) 55% 45%);
  padding-block:14px;
}
footer .wrap{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  gap:6px 20px;
  font-size:.82rem;
  color:hsl(var(--h) 25% 28%);
}
footer p{margin:0;}

@media (max-width:1024px){
  .hero h1{font-size:1.85rem;}
}
@media (max-width:768px){
  .layout{grid-template-columns:1fr;}
  .side-nav{
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
    padding:14px 20px;
  }
  .side-nav nav{flex-direction:row;gap:14px;}
}
@media (max-width:480px){
  .hero{padding-block:40px;}
  .hero h1{font-size:1.45rem;}
  .cta-band{flex-direction:column;align-items:flex-start;}
  .side-nav{flex-direction:column;align-items:flex-start;gap:14px;}
  .side-nav nav{flex-direction:column;}
}