:root{
  --bg-50: oklch(0.97 0.022 162);
  --bg-100: oklch(0.93 0.033 162);
  --bg-200: oklch(0.88 0.05 160);
  --primary-400: oklch(0.9 0.18 92);
  --primary-500: oklch(0.86 0.19 90);
  --fg-950: oklch(0.09 0.012 80);
  --fg-900: oklch(0.14 0.015 80);
  --fg-700: oklch(0.26 0.018 80);
  --fg-500: oklch(0.45 0.016 80);
  --fg-300: oklch(0.72 0.012 80);
  --accent-900: oklch(0.16 0.08 260);
  --accent-700: oklch(0.26 0.12 260);
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:"Noto Sans KR", system-ui, sans-serif;
  background:var(--bg-50);
  color:var(--fg-950);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:"Black Han Sans","Noto Sans KR",sans-serif; font-weight:400;}
a{color:inherit; text-decoration:none;}
.wrap{max-width:860px; margin:0 auto; padding:0 20px;}

nav.top{position:sticky; top:0; z-index:50; background:var(--fg-950); }
nav.top .inner{max-width:1180px; margin:0 auto; padding:14px 20px; display:flex; align-items:center; justify-content:space-between;}
nav.top .brand{display:flex; align-items:center; gap:10px; color:var(--bg-50); font-size:16px;}
nav.top .brand .mark{width:30px; height:30px; border-radius:9px; background:var(--primary-500); color:var(--fg-950); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:14px;}
nav.top .cta{background:var(--primary-500); color:var(--fg-950); font-weight:700; font-size:13px; padding:9px 16px; border-radius:999px;}

.breadcrumb{font-size:12.5px; color:var(--fg-500); padding:20px 0 0; display:flex; flex-wrap:wrap; gap:6px;}
.breadcrumb a:hover{color:var(--accent-700);}
.breadcrumb .sep{color:var(--bg-200);}

.hero{padding:18px 0 36px;}
.hero .eyebrow{font-size:12.5px; font-weight:700; color:var(--accent-700); letter-spacing:0.04em; margin-bottom:10px;}
.hero h1{font-size:28px; line-height:1.4; color:var(--fg-950); margin-bottom:14px;}
.hero p{font-size:14.5px; color:var(--fg-700); max-width:640px;}

.fact-box{background:var(--bg-100); border:1px solid var(--bg-200); border-radius:16px; padding:18px 22px; margin:14px 0 6px; font-size:13.5px; color:var(--fg-700);}
.fact-box b{color:var(--fg-950);}

.section{padding:26px 0; border-top:1px solid var(--bg-200);}
.section h2{font-size:18px; margin-bottom:10px; color:var(--fg-950);}
.section p{font-size:14.5px; color:var(--fg-700); margin-bottom:8px;}

.cta-box{background:var(--fg-950); color:#fff; padding:28px 24px; border-radius:20px; margin:10px 0; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px;}
.cta-box p{font-size:14px; color:var(--bg-100); margin:0;}
.cta-box .btns{display:flex; gap:10px; flex-wrap:wrap;}
.btn-gold{background:var(--primary-500); color:var(--fg-950); font-weight:700; font-size:13.5px; padding:11px 18px; border-radius:999px; border:none;}
.btn-outline{background:transparent; color:#fff; font-weight:600; font-size:13.5px; padding:11px 18px; border-radius:999px; border:1px solid rgba(255,255,255,0.35);}

.related-grid{display:grid; grid-template-columns:1fr 1fr; gap:6px 20px; margin-top:8px;}
.related-grid a{font-size:13.5px; color:var(--fg-700); padding:5px 0; border-bottom:1px dotted var(--bg-200);}
.related-grid a:hover{color:var(--accent-700);}
.related-group h3{font-size:12.5px; color:var(--accent-700); letter-spacing:0.03em; margin-bottom:8px; font-weight:700;}

footer{background:var(--accent-900); color:#c8cee0; padding:36px 0 22px; margin-top:16px;}
footer .wrap{max-width:1180px;}
footer .flogo{font-family:"Black Han Sans","Noto Sans KR",sans-serif; font-size:16px; color:#fff; margin-bottom:12px;}
footer .fbottom{border-top:1px solid var(--accent-700); padding-top:16px; margin-top:16px; font-size:12px; display:flex; flex-wrap:wrap; justify-content:space-between; gap:6px;}
footer .fbottom a{color:var(--primary-400);}

@media (max-width:640px){
  .hero h1{font-size:23px;}
  .cta-box{flex-direction:column; align-items:flex-start;}
  .related-grid{grid-template-columns:1fr;}
  footer .fbottom{flex-direction:column;}
}