:root{
  --h: 144;
  --maxw: 850px;
}

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

/* Header H3: utility bar + main nav */
.util-bar{
  background:hsl(var(--h) 40% 22%);
  color:hsl(var(--h) 20% 92%);
  font-size:.82rem;
}
.util-bar .wrap{padding-block:6px;}
.util-bar p{margin:0;}
.main-nav{
  background:#fff;
  border-bottom:1px solid hsl(var(--h) 20% 88%);
}
.main-nav .wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-block:14px;
}
.logo{
  font-weight:800;
  font-size:1.25rem;
  text-decoration:none;
  color:hsl(var(--h) 55% 30%);
}
.main-nav nav{display:flex;gap:18px;}
.main-nav nav a{text-decoration:none;font-size:.95rem;color:hsl(var(--h) 25% 25%);transition:color .2s;}
.main-nav nav a:hover{color:hsl(var(--h) 60% 40%);}

/* Hero V6: diagonal split via clip-path */
.hero{
  position:relative;
  overflow:hidden;
  background:hsl(var(--h) 45% 24%);
  color:#fff;
  padding-block:64px;
}
.hero-shape{
  position:absolute;
  inset:0;
  background:hsl(var(--h) 62% 36%);
  clip-path:polygon(0 0, 58% 0, 34% 100%, 0 100%);
}
.hero-shape::after{
  content:"";
  position:absolute;
  inset:0;
  background:hsl(var(--h) 75% 46%);
  clip-path:polygon(0 0, 22% 0, 10% 100%, 0 100%);
}
.hero-inner{position:relative;z-index:1;}
.hero h1{
  font-size:2.2rem;
  margin:0 0 16px;
}
.hero .lead{
  max-width:640px;
  font-size:1.02rem;
  color:hsl(var(--h) 25% 94%);
  margin:0;
}

/* Main */
main{padding-block:52px;}
main h2{
  font-size:1.35rem;
  margin:40px 0 14px;
  color:hsl(var(--h) 50% 26%);
  border-left:5px solid hsl(var(--h) 55% 45%);
  padding-left:12px;
}
main h2:first-child{margin-top:0;}
main p{margin:0 0 12px;font-size:.98rem;}

table{
  width:100%;
  border-collapse:collapse;
  margin:18px 0 28px;
  font-size:.92rem;
}
table caption{
  text-align:left;
  font-size:.85rem;
  color:hsl(var(--h) 20% 40%);
  margin-bottom:8px;
}
th,td{
  border:1px solid hsl(var(--h) 20% 85%);
  padding:10px 12px;
  text-align:left;
}
thead th{
  background:hsl(var(--h) 40% 92%);
  color:hsl(var(--h) 45% 25%);
}
tbody tr:nth-child(even){background:hsl(var(--h) 30% 97%);}

/* Figure */
.ph{margin:0 0 52px;}
.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 C5: line box (border only) */
.cta{padding-block:20px 60px;}
.cta-box{
  border:2px solid hsl(var(--h) 50% 40%);
  border-radius:6px;
  padding:28px 24px;
  text-align:center;
  background:transparent;
}
.cta-box p{margin:0 0 16px;font-size:1.02rem;}
.cta-link{
  display:inline-block;
  padding:10px 26px;
  border:2px solid hsl(var(--h) 50% 40%);
  border-radius:4px;
  text-decoration:none;
  font-weight:700;
  color:hsl(var(--h) 50% 32%);
  transition:background .2s,color .2s;
}
.cta-link:hover{
  background:hsl(var(--h) 50% 40%);
  color:#fff;
}

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

@media (max-width:1024px){
  .hero h1{font-size:1.9rem;}
}
@media (max-width:768px){
  main{padding-block:36px;}
  .main-nav nav{gap:12px;}
}
@media (max-width:480px){
  .hero{padding-block:44px;}
  .hero h1{font-size:1.5rem;}
  .main-nav .wrap{flex-direction:column;align-items:flex-start;gap:10px;}
}