:root{
  --h: 272;
  --maxw: 889px;
}

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

/* Header H6: logo underline accent */
header{
  border-bottom:1px solid hsl(var(--h) 20% 90%);
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-block:16px;
}
.logo{
  font-weight:700;
  font-size:1.22rem;
  text-decoration:none;
  color:hsl(var(--h) 45% 32%);
  padding-bottom:4px;
  border-bottom:3px solid hsl(var(--h) 60% 50%);
}
header nav{display:flex;gap:18px;}
header nav a{
  text-decoration:none;
  font-size:.94rem;
  color:hsl(var(--h) 22% 28%);
  transition:color .2s;
}
header nav a:hover{color:hsl(var(--h) 55% 40%);}

/* Hero V1: left text / right shape */
.hero{
  background:hsl(var(--h) 32% 97%);
  padding-block:60px;
}
.hero-inner{
  display:flex;
  align-items:center;
  gap:36px;
}
.hero-text{flex:1 1 55%;}
.hero h1{
  font-size:2.05rem;
  margin:0 0 16px;
  color:hsl(var(--h) 45% 26%);
}
.hero .lead{
  max-width:520px;
  font-size:1rem;
  color:hsl(var(--h) 20% 30%);
  margin:0;
}
.hero-shape{
  position:relative;
  flex:1 1 40%;
  height:220px;
}
.hero-shape span{
  position:absolute;
  border-radius:50%;
}
.hero-shape span:nth-child(1){
  width:170px;height:170px;
  background:hsl(var(--h) 55% 55% / .28);
  top:0;right:20%;
}
.hero-shape span:nth-child(2){
  width:110px;height:110px;
  background:hsl(var(--h) 50% 45% / .4);
  bottom:10px;right:0;
}
.hero-shape span:nth-child(3){
  width:60px;height:60px;
  background:hsl(var(--h) 60% 40%);
  bottom:60px;right:45%;
}

/* Main */
main{padding-block:52px;}
main h2{
  font-size:1.32rem;
  margin:40px 0 12px;
  color:hsl(var(--h) 45% 28%);
}
main h2:first-child{margin-top:0;}
main p{margin:0 0 12px;font-size:.97rem;}

table{
  width:100%;
  border-collapse:collapse;
  margin:16px 0 26px;
  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% 86%);
  padding:10px 12px;
  text-align:left;
}
thead th{
  background:hsl(var(--h) 40% 92%);
  color:hsl(var(--h) 45% 26%);
}
tbody tr:nth-child(even){background:hsl(var(--h) 30% 97%);}

/* Figure */
.ph{margin:0 0 50px;}
.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 C2: card box */
.cta{padding-block:20px 56px;}
.cta-card{
  background:hsl(var(--h) 30% 96%);
  border-radius:10px;
  padding:30px 26px;
  text-align:center;
  box-shadow:0 4px 18px hsl(var(--h) 30% 60% / .18);
}
.cta-card p{margin:0 0 16px;font-size:1.02rem;color:hsl(var(--h) 22% 24%);}
.cta-link{
  display:inline-block;
  padding:11px 28px;
  background:hsl(var(--h) 48% 34%);
  color:#fff;
  border-radius:5px;
  text-decoration:none;
  font-weight:700;
  transition:background .2s;
}
.cta-link:hover{background:hsl(var(--h) 48% 26%);}

/* Footer F2: bordered box, horizontal row */
footer{padding-block:14px;}
footer .wrap{
  border:1px solid hsl(var(--h) 20% 84%);
  border-radius:8px;
  padding:18px 22px;
  font-size:.85rem;
  color:hsl(var(--h) 20% 30%);
  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.8rem;}
}
@media (max-width:768px){
  .hero-inner{flex-direction:column;}
  .hero-shape{width:100%;}
  main{padding-block:38px;}
}
@media (max-width:480px){
  .hero{padding-block:44px;}
  .hero h1{font-size:1.5rem;}
  .header-inner{flex-direction:column;align-items:flex-start;gap:10px;}
}