:root{
  --h: 18;
  --bg: hsl(var(--h) 25% 97%);
  --text: hsl(var(--h) 22% 17%);
  --muted: hsl(var(--h) 14% 42%);
  --brand: hsl(var(--h) 75% 45%);
  --brand-dark: hsl(var(--h) 70% 34%);
  --brand-light: hsl(var(--h) 85% 92%);
  --line: hsl(var(--h) 22% 84%);
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Malgun Gothic",sans-serif;
  color:var(--text);
  background:#fff;
  line-height:1.75;
}
.wrap{max-width:733px;margin-inline:auto;padding:0 20px;}
a{color:var(--brand-dark);}

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

/* Hero V5: thin top band, plain hero below */
.hero-strip{height:6px;background:linear-gradient(90deg, hsl(var(--h) 80% 50%), hsl(var(--h) 60% 40%));}
.hero{background:var(--bg);padding:56px 0;}
.hero h1{font-size:1.9rem;margin:0 0 14px;color:var(--brand-dark);}
.hero .lead{margin:0;color:var(--muted);max-width:600px;}

main{padding:50px 0 10px;}
.block{margin-bottom:40px;padding-bottom:8px;border-bottom:1px solid var(--line);}
.block:last-child{border-bottom:none;}
.block h2{font-size:1.2rem;color:var(--brand-dark);margin:0 0 14px;}
.block .tag{display:inline-block;font-size:.78rem;font-weight:700;color:#fff;background:var(--brand);padding:2px 10px;border-radius:12px;margin:10px 0 6px;}
.block p{margin:0 0 4px;}

.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 C2: card box with shadow, centered */
.cta{padding:50px 0;background:var(--bg);}
.cta-card{
  background:#fff;
  max-width:520px;
  margin:0 auto;
  padding:30px 26px;
  border-radius:12px;
  box-shadow:0 10px 26px hsla(var(--h),30%,20%,0.14);
  text-align:center;
}
.cta-card p{margin:0 0 16px;}
.cta-link{
  display:inline-block;
  background:var(--brand);
  color:#fff;
  padding:11px 26px;
  border-radius:8px;
  text-decoration:none;
  font-weight:700;
}
.cta-link:hover{background:var(--brand-dark);}

/* Footer F2: bordered box, horizontal row */
footer{padding:14px 0;}
.footer-box{
  border:1px solid var(--line);
  border-radius:10px;
  padding:14px 20px;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  gap:6px 20px;
}
footer p{margin:0;font-size:.85rem;color:var(--muted);}

@media (max-width:1024px){
  .hero{padding:44px 0;}
}
@media (max-width:768px){
  .header-row{padding:12px 16px;}
  .hero h1{font-size:1.6rem;}
}
@media (max-width:480px){
  .gnb.right{gap:10px;}
  .hero h1{font-size:1.4rem;}
  .block h2{font-size:1.05rem;}
}