:root{
  --h: 356;
  --bg: hsl(var(--h) 30% 98%);
  --ink: hsl(var(--h) 40% 14%);
  --ink-soft: hsl(var(--h) 15% 38%);
  --line: hsl(var(--h) 30% 88%);
  --brand: hsl(var(--h) 72% 42%);
  --brand-dark: hsl(var(--h) 70% 32%);
  --brand-pale: hsl(var(--h) 80% 96%);
  --card-bg: hsl(var(--h) 40% 99%);
  --sidebar-bg: hsl(var(--h) 45% 12%);
  --sidebar-ink: hsl(var(--h) 20% 92%);
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:"Pretendard", -apple-system, BlinkMacSystemFont, "Malgun Gothic", sans-serif;
  color:var(--ink);
  background:var(--bg);
  line-height:1.7;
  word-break:keep-all;
}
a{color:inherit;text-decoration:none;}
img{max-width:100%;}

.container{max-width:967px;margin-inline:auto;padding-inline:20px;}

/* ---------- Layout: sidebar header (H4) ---------- */
.layout{
  display:flex;
  min-height:100vh;
}

header.site-header{
  width:240px;
  flex-shrink:0;
  background:var(--sidebar-bg);
  color:var(--sidebar-ink);
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  padding:32px 22px;
  position:sticky;
  top:0;
  height:100vh;
}

header.site-header .logo{
  font-size:22px;
  font-weight:800;
  color:hsl(var(--h) 85% 72%);
  margin-bottom:36px;
  letter-spacing:-0.02em;
}

header.site-header nav{
  display:flex;
  flex-direction:column;
  gap:6px;
}

header.site-header nav a{
  display:block;
  padding:10px 12px;
  border-radius:8px;
  font-size:15px;
  color:var(--sidebar-ink);
  border-left:3px solid transparent;
  transition:background .15s ease, border-color .15s ease;
}

header.site-header nav a:hover{
  background:hsl(var(--h) 40% 20%);
  border-left-color:hsl(var(--h) 85% 62%);
}

.content{
  flex:1;
  min-width:0;
}

/* ---------- Hero (V7: CSS pattern background) ---------- */
.hero{
  position:relative;
  overflow:hidden;
  padding:72px 20px 64px;
  background-color:var(--brand-dark);
  background-image:
    repeating-linear-gradient(45deg, hsl(var(--h) 70% 46% / .55) 0 2px, transparent 2px 26px),
    repeating-linear-gradient(-45deg, hsl(var(--h) 70% 46% / .4) 0 2px, transparent 2px 26px),
    radial-gradient(circle at 20% 30%, hsl(var(--h) 90% 60% / .35) 0, transparent 55%),
    radial-gradient(circle at 80% 70%, hsl(var(--h) 90% 55% / .3) 0, transparent 50%);
  color:hsl(var(--h) 20% 98%);
}

.hero .container{position:relative;z-index:1;}

.hero h1{
  font-size:clamp(28px, 4.2vw, 42px);
  font-weight:800;
  margin:0 0 18px;
  letter-spacing:-0.02em;
}

.hero p{
  font-size:16px;
  max-width:640px;
  margin:0 0 8px;
  color:hsl(var(--h) 25% 94%);
}

/* ---------- Main content ---------- */
main{padding:56px 0 40px;}

main h2{
  font-size:23px;
  font-weight:800;
  margin:44px 0 14px;
  color:var(--ink);
  border-left:5px solid var(--brand);
  padding-left:12px;
}

main h2:first-of-type{margin-top:0;}

main h3{
  font-size:17px;
  font-weight:700;
  margin:22px 0 8px;
  color:var(--brand-dark);
}

main p{
  font-size:15.5px;
  color:var(--ink-soft);
  margin:0 0 14px;
}

main ul{
  margin:0 0 16px;
  padding-left:20px;
  color:var(--ink-soft);
}

main ul li{
  margin-bottom:8px;
  font-size:15.5px;
}

.check-item{
  background:var(--card-bg);
  border:1px solid var(--line);
  border-radius:12px;
  padding:18px 20px;
  margin-bottom:16px;
}

.check-item h3{
  margin-top:0;
  display:flex;
  align-items:center;
  gap:8px;
}

.check-item h3::before{
  content:"";
  display:inline-block;
  width:9px;
  height:9px;
  border-radius:2px;
  background:var(--brand);
  flex-shrink:0;
}

/* ---------- Figure / images ---------- */
.ph{margin:40px 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:10px;border:1px solid var(--line);}
@media (max-width:600px){.ph-row{gap:10px;}}

/* ---------- CTA (C2: card box) ---------- */
.cta-wrap{padding:0 0 56px;}
.cta-card{
  max-width:900px;
  margin-inline:auto;
  background:var(--brand-pale);
  border:1px solid hsl(var(--h) 60% 82%);
  border-radius:16px;
  padding:36px 32px;
  text-align:center;
}
.cta-card h2{
  border:none;
  padding:0;
  font-size:22px;
  margin:0 0 10px;
  color:var(--ink);
}
.cta-card p{
  margin:0 0 20px;
  color:var(--ink-soft);
  font-size:15.5px;
}
.cta-card .cta-btn{
  display:inline-block;
  background:var(--brand);
  color:hsl(var(--h) 20% 98%);
  font-weight:700;
  padding:13px 30px;
  border-radius:9px;
  font-size:15.5px;
  transition:background .15s ease, transform .15s ease;
}
.cta-card .cta-btn:hover{
  background:var(--brand-dark);
  transform:translateY(-1px);
}

/* ---------- Footer (F4: banner strip) ---------- */
footer{
  background:var(--sidebar-bg);
  color:hsl(var(--h) 15% 88%);
  padding:0;
}
footer .wrap{
  max-width:967px;
  margin-inline:auto;
  padding:14px 20px;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  gap:6px 22px;
}
footer p{
  margin:0;
  font-size:12.5px;
  padding:5px 0;
  color:hsl(var(--h) 12% 78%);
}

/* ---------- Responsive ---------- */
@media (max-width:1024px){
  header.site-header{width:200px;padding:26px 16px;}
}

@media (max-width:768px){
  .layout{flex-direction:column;}
  header.site-header{
    width:100%;
    height:auto;
    position:static;
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
    padding:14px 18px;
  }
  header.site-header .logo{margin-bottom:0;}
  header.site-header nav{flex-direction:row;gap:2px;}
  header.site-header nav a{font-size:13.5px;padding:8px 9px;border-left:none;border-bottom:3px solid transparent;}
  header.site-header nav a:hover{border-left-color:transparent;border-bottom-color:hsl(var(--h) 85% 62%);}
  .hero{padding:52px 16px 44px;}
  main{padding:40px 0 28px;}
  footer .wrap{gap:6px 14px;padding:12px 18px;}
  footer p{font-size:11.5px;}
}

@media (max-width:480px){
  header.site-header{flex-direction:column;align-items:flex-start;gap:10px;}
  header.site-header nav{flex-wrap:wrap;}
  .hero h1{font-size:26px;}
  .cta-card{padding:26px 18px;}
  footer .wrap{gap:4px 14px;padding:12px 18px;}
}