:root{
  --h: 4;
  --bg: hsl(var(--h) 20% 97%);
  --text: hsl(var(--h) 25% 16%);
  --muted: hsl(var(--h) 12% 40%);
  --brand: hsl(var(--h) 72% 46%);
  --brand-dark: hsl(var(--h) 68% 34%);
  --brand-light: hsl(var(--h) 82% 93%);
  --line: hsl(var(--h) 20% 87%);
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:'Spoqa Han Sans Neo',-apple-system,BlinkMacSystemFont,"Malgun Gothic",sans-serif;
  color:var(--text);
  background:var(--bg);
  line-height:1.7;
}
.wrap{max-width:720px;margin-inline:auto;padding:0 20px;}
h1,h2{font-weight:700;}
a{color:var(--brand-dark);}

/* Header H1: logo left, nav right, single row */
.site-header{background:#fff;border-bottom:1px solid var(--line);}
.header-row{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;}
.logo{font-weight:700;font-size:1.15rem;color:var(--brand-dark);}
.gnb{display:flex;gap:20px;}
.gnb a{text-decoration:none;font-size:.95rem;color:var(--text);}
.gnb a:hover{color:var(--brand);}

/* Hero V4: card overlap on band boundary */
.hero{position:relative;}
.hero-band{
  height:200px;
  background:linear-gradient(135deg, hsl(var(--h) 70% 42%), hsl(var(--h) 55% 28%));
}
.hero-card{
  background:#fff;
  border-radius:14px;
  box-shadow:0 12px 30px hsla(var(--h),40%,20%,0.18);
  padding:34px 28px;
  margin-top:-110px;
  position:relative;
  z-index:2;
}
.hero-card h1{font-size:1.9rem;margin:0 0 14px;color:var(--brand-dark);}
.hero-card .lead{margin:0;color:var(--muted);font-size:1rem;}

main{padding:60px 0 20px;}
.block{margin-bottom:42px;}
.block h2{font-size:1.25rem;color:var(--brand-dark);margin:0 0 12px;padding-left:14px;border-left:4px solid var(--brand);}
.block p{margin:0;color:var(--text);}

.ph{margin:50px 0;}
.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:8px;}
@media (max-width:600px){.ph-row{gap:10px;}}

/* CTA C1: full-width band */
.cta{
  background:linear-gradient(120deg, hsl(var(--h) 65% 40%), hsl(var(--h) 60% 30%));
  color:#fff;
  padding:44px 0;
  text-align:center;
}
.cta p{margin:0 0 16px;font-size:1.1rem;}
.cta-link{
  display:inline-block;
  background:#fff;
  color:var(--brand-dark);
  padding:12px 28px;
  border-radius:30px;
  text-decoration:none;
  font-weight:700;
}
.cta-link:hover{background:var(--brand-light);}

/* Footer F1: simple text stack, no border */
footer{padding:30px 0;background:var(--bg);}
footer .wrap{text-align:center;}
footer p{margin:4px 0;font-size:.85rem;color:var(--muted);}

@media (max-width:1024px){
  .hero-card{padding:28px 22px;}
}
@media (max-width:768px){
  .header-row{flex-direction:row;padding:12px 16px;}
  .hero-band{height:170px;}
  .hero-card{margin-top:-90px;padding:24px 18px;}
  .hero-card h1{font-size:1.6rem;}
}
@media (max-width:480px){
  .gnb{gap:12px;}
  .hero-card{margin-top:-70px;}
  .hero-card h1{font-size:1.4rem;}
  .block h2{font-size:1.1rem;}
}