:root{
  --h: 172;
  --maxw: 876px;
}

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

/* Header H5: two-tier stack (logo row + nav row) */
.logo-row{
  background:#fff;
  border-bottom:1px solid hsl(var(--h) 20% 90%);
}
.logo-row .wrap{padding-block:16px;}
.logo{
  font-weight:900;
  font-size:1.3rem;
  text-decoration:none;
  color:hsl(var(--h) 55% 28%);
}
.nav-row{
  background:hsl(var(--h) 40% 96%);
}
.nav-row .wrap{padding-block:10px;}
.nav-row nav{display:flex;gap:20px;}
.nav-row nav a{
  text-decoration:none;
  font-size:.92rem;
  color:hsl(var(--h) 30% 28%);
  transition:color .2s;
}
.nav-row nav a:hover{color:hsl(var(--h) 60% 38%);}

/* Hero V8: large decorative number */
.hero{
  position:relative;
  overflow:hidden;
  background:hsl(var(--h) 42% 25%);
  color:#fff;
  padding-block:64px;
}
.hero-num{
  position:absolute;
  right:4%;
  top:50%;
  transform:translateY(-50%);
  font-size:13rem;
  font-weight:900;
  color:hsl(var(--h) 45% 32%);
  line-height:1;
  user-select:none;
  z-index:0;
}
.hero-inner{position:relative;z-index:1;}
.hero h1{
  font-size:2.15rem;
  margin:0 0 16px;
  font-weight:900;
}
.hero .lead{
  max-width:600px;
  font-size:1rem;
  color:hsl(var(--h) 20% 94%);
  margin:0;
}

/* Main */
main{padding-block:50px;}
main h2{
  font-size:1.3rem;
  margin:38px 0 12px;
  color:hsl(var(--h) 48% 26%);
  font-weight:900;
}
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 C1: full-width band */
.cta{
  background:hsl(var(--h) 50% 32%);
  padding-block:40px;
  text-align:center;
}
.cta p{
  margin:0 0 18px;
  color:#fff;
  font-size:1.08rem;
}
.cta-link{
  display:inline-block;
  padding:12px 30px;
  background:#fff;
  color:hsl(var(--h) 50% 28%);
  border-radius:4px;
  text-decoration:none;
  font-weight:700;
  transition:opacity .2s;
}
.cta-link:hover{opacity:.85;}

/* Footer F1: horizontal row */
footer{
  background:hsl(var(--h) 25% 14%);
  color:hsl(var(--h) 15% 85%);
  padding-block:14px;
}
footer .wrap{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  gap:6px 20px;
  font-size:.85rem;
}
footer p{margin:0;}

@media (max-width:1024px){
  .hero h1{font-size:1.85rem;}
  .hero-num{font-size:10rem;}
}
@media (max-width:768px){
  main{padding-block:36px;}
  .nav-row nav{gap:12px;flex-wrap:wrap;}
}
@media (max-width:480px){
  .hero{padding-block:44px;}
  .hero h1{font-size:1.5rem;}
  .hero-num{font-size:6.5rem;opacity:.5;}
}