:root{
  --h: 300;
  --maxw: 915px;
}

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

/* Header H8: background band */
.header-band{
  background:hsl(var(--h) 40% 24%);
  color:#fff;
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-block:16px;
}
.logo{
  font-weight:700;
  font-size:1.22rem;
  text-decoration:none;
  color:#fff;
}
header nav{display:flex;gap:18px;}
header nav a{
  text-decoration:none;
  font-size:.93rem;
  color:hsl(var(--h) 20% 88%);
  transition:color .2s;
}
header nav a:hover{color:#fff;}

/* Hero V3: diagonal split, different angle from V6 */
.hero{
  position:relative;
  overflow:hidden;
  background:hsl(var(--h) 35% 96%);
  padding-block:60px;
}
.hero-shape{
  position:absolute;
  inset:0;
  background:hsl(var(--h) 45% 88%);
  clip-path:polygon(60% 0, 100% 0, 100% 100%, 82% 100%);
}
.hero-shape::after{
  content:"";
  position:absolute;
  inset:0;
  background:hsl(var(--h) 50% 40%);
  clip-path:polygon(78% 0, 92% 0, 74% 100%, 60% 100%);
}
.hero-inner{position:relative;z-index:1;max-width:600px;}
.hero h1{
  font-size:2.1rem;
  margin:0 0 16px;
  color:hsl(var(--h) 45% 24%);
}
.hero .lead{
  font-size:1rem;
  color:hsl(var(--h) 20% 30%);
  margin:0;
}

/* Main */
main{padding-block:52px;}
main h2{
  font-size:1.28rem;
  margin:38px 0 12px;
  color:hsl(var(--h) 45% 28%);
}
main h2:first-child{margin-top:0;}
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 C4: quote style */
.cta{
  padding-block:44px 56px;
  text-align:center;
}
.cta-quote{
  margin:0 auto 20px;
  max-width:640px;
  border-left:4px solid hsl(var(--h) 50% 45%);
  padding:6px 0 6px 22px;
  text-align:left;
}
.cta-quote p{
  margin:0;
  font-size:1.08rem;
  font-style:italic;
  color:hsl(var(--h) 25% 22%);
}
.cta-link{
  display:inline-block;
  padding:11px 28px;
  background:hsl(var(--h) 48% 34%);
  color:#fff;
  border-radius:5px;
  text-decoration:none;
  font-weight:700;
  transition:background .2s;
}
.cta-link:hover{background:hsl(var(--h) 48% 26%);}

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

@media (max-width:1024px){
  .hero h1{font-size:1.85rem;}
}
@media (max-width:768px){
  main{padding-block:38px;}
  header nav{gap:12px;}
}
@media (max-width:480px){
  .hero{padding-block:42px;}
  .hero h1{font-size:1.45rem;}
  .header-inner{flex-direction:column;align-items:flex-start;gap:10px;}
}