:root{
  --h: 314;
  --c-bg: hsl(var(--h) 40% 99%);
  --c-text: hsl(var(--h) 30% 15%);
  --c-sub: hsl(var(--h) 15% 40%);
  --c-primary: hsl(var(--h) 65% 42%);
  --c-primary-dark: hsl(var(--h) 70% 30%);
  --c-line: hsl(var(--h) 25% 82%);
  --c-card: hsl(var(--h) 45% 97%);
  --c-header-bg: hsl(var(--h) 30% 12%);
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:"Spoqa Han Sans Neo","Spoqa Han Sans",-apple-system,BlinkMacSystemFont,"Malgun Gothic",sans-serif;
  color:var(--c-text);
  background:var(--c-bg);
  line-height:1.7;
  word-break:keep-all;
}
a{color:inherit;text-decoration:none;}
.wrap{max-width:928px;margin-inline:auto;padding-inline:20px;}

/* header : H1 style = horizontal, right-aligned nav */
header{
  background:var(--c-header-bg);
  color:hsl(var(--h) 20% 95%);
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:nowrap;
  padding-block:16px;
}
.logo{
  font-size:1.15rem;
  font-weight:700;
  letter-spacing:-0.02em;
  color:hsl(var(--h) 60% 78%);
  flex-shrink:0;
}
header nav{
  display:flex;
  gap:22px;
  justify-content:flex-end;
  align-items:center;
}
header nav a{
  font-size:0.95rem;
  color:hsl(var(--h) 15% 88%);
  padding:6px 2px;
  border-bottom:1px solid transparent;
  transition:border-color .15s ease, color .15s ease;
}
header nav a:hover{
  color:hsl(var(--h) 70% 78%);
  border-bottom-color:hsl(var(--h) 70% 78%);
}

/* hero : V4 style = card overlap */
.hero{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 18% 20%, hsl(var(--h) 70% 55% / 0.55), transparent 55%),
    radial-gradient(circle at 82% 0%, hsl(var(--h) 55% 40% / 0.5), transparent 50%),
    linear-gradient(155deg, hsl(var(--h) 55% 24%) 0%, hsl(var(--h) 60% 14%) 60%, hsl(var(--h) 50% 10%) 100%);
  padding-top:64px;
  padding-bottom:0;
}
.hero-bg{
  position:absolute;
  inset:0;
  background:
    linear-gradient(120deg, transparent 55%, hsl(var(--h) 65% 60% / 0.18) 100%);
  pointer-events:none;
}
.hero-inner{
  position:relative;
  z-index:1;
}
.hero-card{
  background:var(--c-card);
  border-radius:18px;
  box-shadow:0 24px 48px hsl(var(--h) 40% 15% / 0.28);
  padding:44px 40px 48px;
  margin-bottom:-72px;
  transform:translateY(56px);
  border:1px solid hsl(var(--h) 30% 90%);
}
.hero h1{
  margin:0 0 18px;
  font-size:2rem;
  font-weight:700;
  letter-spacing:-0.02em;
  color:var(--c-text);
}
.hero .lead{
  margin:0;
  font-size:1.02rem;
  color:var(--c-sub);
  max-width:760px;
}

/* main */
main{
  padding-top:112px;
  padding-bottom:56px;
}
.block{
  margin-bottom:44px;
}
.block h2{
  font-size:1.3rem;
  font-weight:700;
  margin:0 0 14px;
  padding-left:14px;
  border-left:4px solid var(--c-primary);
  color:var(--c-text);
}
.block p{
  margin:0 0 12px;
  color:var(--c-text);
  font-size:0.98rem;
}

/* table */
.table-wrap{
  overflow-x:auto;
  margin-top:18px;
  border:1px solid var(--c-line);
  border-radius:10px;
}
table{
  width:100%;
  border-collapse:collapse;
  min-width:520px;
  background:hsl(var(--h) 40% 100%);
}
caption{
  caption-side:top;
  text-align:left;
  font-size:0.9rem;
  font-weight:700;
  color:var(--c-primary-dark);
  padding:12px 14px 8px;
}
th,td{
  padding:12px 14px;
  border-bottom:1px solid var(--c-line);
  text-align:left;
  font-size:0.9rem;
}
thead th{
  background:hsl(var(--h) 45% 94%);
  color:var(--c-text);
  font-weight:700;
  white-space:nowrap;
}
tbody tr:last-child td{
  border-bottom:none;
}
tbody tr:hover{
  background:hsl(var(--h) 40% 96%);
}

/* image block */
.ph{
  margin:40px 0 8px;
}
.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 : C5 style = line box */
.cta{
  padding-block:56px;
}
.cta-box{
  border:2px solid var(--c-primary);
  border-radius:14px;
  padding:36px 32px;
  text-align:center;
  background:hsl(var(--h) 55% 97%);
}
.cta-text{
  margin:0 0 18px;
  font-size:1.02rem;
  color:var(--c-text);
}
.cta-link{
  display:inline-block;
  padding:12px 28px;
  border:1.5px solid var(--c-primary-dark);
  border-radius:8px;
  font-weight:700;
  color:var(--c-primary-dark);
  transition:background .15s ease, color .15s ease;
}
.cta-link:hover{
  background:var(--c-primary-dark);
  color:hsl(var(--h) 30% 98%);
}

/* footer : F1 style = simple text stack */
footer{
  background:var(--c-header-bg);
  color:hsl(var(--h) 12% 78%);
  padding-block:14px;
}
footer .wrap{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  gap:6px 20px;
}
footer p{
  margin:0;
  font-size:0.85rem;
  line-height:1.6;
}

/* responsive */
@media (max-width:1024px){
  .wrap{padding-inline:18px;}
  .hero-card{padding:38px 32px 42px;}
}
@media (max-width:768px){
  main{padding-top:130px;}
  .hero h1{font-size:1.7rem;}
  .hero-card{margin-bottom:-60px;transform:translateY(44px);padding:32px 26px 36px;}
  .block h2{font-size:1.15rem;}
}
@media (max-width:480px){
  .header-inner{padding-block:12px;}
  header nav{gap:14px;}
  header nav a{font-size:0.85rem;}
  .hero{padding-top:44px;}
  .hero h1{font-size:1.4rem;}
  .hero-card{margin-bottom:-48px;transform:translateY(32px);padding:24px 20px 28px;border-radius:14px;}
  main{padding-top:112px;}
  .cta-box{padding:26px 20px;}
  .cta-link{width:100%;}
}