:root{
  --h: 74;
  --c-brand: hsl(var(--h) 62% 38%);
  --c-brand-dark: hsl(var(--h) 58% 24%);
  --c-brand-light: hsl(var(--h) 55% 92%);
  --c-accent: hsl(calc(var(--h) + 30) 65% 45%);
  --c-text: hsl(var(--h) 15% 18%);
  --c-sub: hsl(var(--h) 10% 40%);
  --c-line: hsl(var(--h) 20% 85%);
  --c-bg: hsl(var(--h) 30% 98%);
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:'IBM Plex Sans KR',-apple-system,BlinkMacSystemFont,"Malgun Gothic",sans-serif;
  color:var(--c-text);
  background:var(--c-bg);
  line-height:1.7;
}
.wrap{max-width:785px;margin-inline:auto;padding-inline:20px;}
a{color:inherit;text-decoration:none;}
h1,h2,h3{line-height:1.35;}

/* Header H6: underline-accented logo, inline nav */
.site-header{
  border-bottom:1px solid var(--c-line);
  background:#fff;
}
.head-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-block:16px;
}
.logo{
  font-weight:700;
  font-size:1.25rem;
  color:var(--c-brand-dark);
  border-bottom:3px solid var(--c-accent);
  padding-bottom:4px;
}
.site-header nav{display:flex;gap:20px;}
.site-header nav a{
  font-size:.95rem;
  color:var(--c-sub);
  padding-bottom:4px;
  border-bottom:2px solid transparent;
}
.site-header nav a:hover{
  color:var(--c-brand-dark);
  border-bottom-color:var(--c-brand);
}

/* Hero V1: text left, shape right */
.hero{
  background:linear-gradient(180deg,hsl(var(--h) 40% 95%),var(--c-bg));
  padding-block:56px;
}
.hero-inner{
  display:flex;
  align-items:center;
  gap:32px;
}
.hero-text{flex:1 1 60%;}
.hero h1{
  font-size:2.1rem;
  margin:0 0 16px;
  color:var(--c-brand-dark);
}
.hero .lead{
  font-size:1.02rem;
  color:var(--c-sub);
  margin:0;
}
.hero-shape{
  position:relative;
  flex:1 1 40%;
  height:200px;
  min-width:160px;
}
.hero-shape .s1{
  position:absolute;
  top:0;right:20px;
  width:120px;height:120px;
  background:hsl(var(--h) 55% 80%);
  border-radius:22px;
  transform:rotate(8deg);
}
.hero-shape .s2{
  position:absolute;
  bottom:10px;right:70px;
  width:90px;height:90px;
  background:var(--c-brand);
  border-radius:50%;
  opacity:.85;
}
.hero-shape .s3{
  position:absolute;
  bottom:0;right:0;
  width:60px;height:60px;
  background:var(--c-accent);
  border-radius:14px;
  transform:rotate(-14deg);
}

/* Main content */
main{padding-block:48px;}
.blk{margin-bottom:36px;}
.blk h2{
  font-size:1.3rem;
  color:var(--c-brand-dark);
  margin:0 0 12px;
  padding-left:12px;
  border-left:4px solid var(--c-brand);
}
.blk p{margin:0;color:var(--c-text);}

.faq h2{border-left-color:var(--c-accent);}
.faq-item{
  background:#fff;
  border:1px solid var(--c-line);
  border-radius:10px;
  padding:18px 20px;
  margin-bottom:14px;
}
.faq-item h3{
  font-size:1.02rem;
  margin:0 0 8px;
  color:var(--c-brand-dark);
}
.faq-item p{margin:0;color:var(--c-sub);font-size:.96rem;}

/* Image block */
.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:10px;}
@media (max-width:600px){.ph-row{gap:10px;}}

/* CTA C6: bottom band, tone distinct from a hypothetical C1 */
.cta{
  background:var(--c-brand-dark);
  padding-block:40px;
}
.cta-inner{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:18px;
}
.cta-text{
  color:#fff;
  font-size:1.08rem;
  margin:0;
}
.cta-btn{
  display:inline-block;
  background:var(--c-accent);
  color:#fff;
  font-weight:700;
  padding:12px 26px;
  border-radius:999px;
  white-space:nowrap;
}
.cta-btn:hover{background:hsl(calc(var(--h) + 30) 65% 38%);}

/* Footer F2: bordered box */
footer{padding:14px 20px;}
footer .wrap{
  border:1px solid var(--c-line);
  border-radius:12px;
  padding:22px 24px;
  background:#fff;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  gap:6px 20px;
}
footer p{
  margin:0;
  font-size:.88rem;
  color:var(--c-sub);
}

@media (max-width:1024px){
  .wrap{padding-inline:18px;}
}
@media (max-width:768px){
  .hero h1{font-size:1.8rem;}
}
@media (max-width:480px){
  .hero-inner{flex-direction:column;}
  .hero-shape{width:100%;height:140px;}
  .cta-inner{flex-direction:column;align-items:flex-start;}
}