:root{
  --h: 46;
  --bg: hsl(var(--h) 30% 97%);
  --text: hsl(var(--h) 22% 17%);
  --muted: hsl(var(--h) 14% 42%);
  --brand: hsl(var(--h) 80% 45%);
  --brand-dark: hsl(var(--h) 70% 33%);
  --brand-light: hsl(var(--h) 88% 90%);
  --line: hsl(var(--h) 24% 84%);
}

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

/* Header H4: left vertical sidebar */
.layout{display:flex;min-height:100%;}
.side-header{
  width:200px;
  flex:0 0 200px;
  background:hsl(var(--h) 40% 20%);
  color:#fff;
  padding:28px 20px;
  position:sticky;
  top:0;
  align-self:flex-start;
  height:100vh;
}
.side-header .logo{font-weight:800;font-size:1.2rem;margin-bottom:30px;color:#fff;}
.side-header .gnb{display:flex;flex-direction:column;gap:16px;}
.side-header .gnb a{color:hsl(var(--h) 60% 88%);text-decoration:none;font-size:.95rem;}
.side-header .gnb a:hover{color:#fff;}
.content-col{flex:1;min-width:0;}

/* Hero V7: CSS pattern background */
.hero{position:relative;padding:64px 0;overflow:hidden;color:#fff;}
.hero-pattern{
  position:absolute;inset:0;
  background:
    repeating-linear-gradient(45deg, hsl(var(--h) 70% 45%) 0 14px, hsl(var(--h) 65% 40%) 14px 28px);
  z-index:0;
}
.hero-inner{position:relative;z-index:1;max-width:759px;margin-inline:auto;padding:0 20px;}
.hero h1{font-size:1.9rem;margin:0 0 14px;}
.hero .lead{margin:0;max-width:560px;opacity:.95;}

main{padding:54px 0 10px;}
.block{margin-bottom:42px;}
.block h2{font-size:1.22rem;color:var(--brand-dark);margin:0 0 12px;}
.block p{margin:0 0 10px;}

table{width:100%;border-collapse:collapse;margin:16px 0;font-size:.9rem;}
caption{text-align:left;font-weight:700;color:var(--brand-dark);margin-bottom:8px;}
th,td{border:1px solid var(--line);padding:10px 12px;text-align:left;vertical-align:top;}
th{background:var(--brand-light);color:var(--brand-dark);}
tbody tr:nth-child(even){background:hsl(var(--h) 20% 98%);}

.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 C4: blockquote style */
.cta{padding:48px 0;background:var(--bg);}
.cta-quote{
  margin:0;
  border-left:4px solid var(--brand);
  padding:10px 0 10px 22px;
}
.cta-quote p{margin:0 0 14px;font-size:1.08rem;font-style:italic;}
.cta-link{
  display:inline-block;
  color:var(--brand-dark);
  text-decoration:underline;
  font-weight:700;
}

/* Footer F4: banner strip, horizontal row */
footer{padding:14px 0;background:hsl(var(--h) 30% 93%);width:100%;}
footer .wrap{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){
  .side-header{width:170px;flex:0 0 170px;}
}
@media (max-width:768px){
  .layout{flex-direction:column;}
  .side-header{
    width:100%;flex:none;position:static;height:auto;
    padding:14px 16px;
  }
  .side-header .gnb{flex-direction:row;gap:16px;}
  .side-header .logo{margin-bottom:10px;}
  .hero h1{font-size:1.6rem;}
}
@media (max-width:480px){
  .side-header .gnb{gap:10px;flex-wrap:wrap;}
  .hero h1{font-size:1.4rem;}
  table{font-size:.82rem;}
}