@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root{
  --bg:#E9F2FC;
  --panel:#FFFFFF;
  --ink:#152341;
  --muted:#6E7C99;
  --blue:#3D6FE0;
  --blue-dark:#2C54B8;
  --blue-soft:#DCE9FB;
  --pop-soft:#FFE4E9;
  --line:#D7E4F7;
}
*{box-sizing:border-box;}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:'Plus Jakarta Sans', sans-serif;
  line-height:1.6;
}
a{color:var(--blue-dark);}
.wrap{max-width:760px;margin:0 auto;padding:0 24px;}

header.site{padding:22px 0;}
.brand{display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:space-between; max-width:1040px; margin:0 auto; padding:0 24px;}
.brand-mark{
  font-weight:800; font-size:20px; color:var(--blue-dark);
  letter-spacing:-0.01em; background:var(--panel);
  padding:6px 14px; border-radius:999px; text-decoration:none;
}
.site-nav{display:flex; gap:4px; flex-wrap:wrap;}
.site-nav a{
  font-size:13px; font-weight:600; color:var(--muted); text-decoration:none;
  padding:6px 10px; border-radius:999px;
}
.site-nav a:hover, .site-nav a.active{background:var(--panel); color:var(--blue-dark);}

main.article{padding:36px 0 56px;}
main.article h1{
  font-weight:800; font-size:clamp(26px, 4vw, 36px); line-height:1.2;
  margin:0 0 8px; color:var(--ink); letter-spacing:-0.01em;
}
main.article .updated{font-size:13px; color:var(--muted); margin:0 0 32px;}
main.article h2{font-weight:700; font-size:19px; margin:32px 0 10px; color:var(--ink);}
main.article p{font-size:15px; color:#3A4A6B; margin:0 0 14px;}
main.article ul{font-size:15px; color:#3A4A6B; padding-left:20px;}
main.article li{margin-bottom:8px;}
main.article strong{color:var(--ink);}

.note-box{
  background:var(--blue-soft); border:1px solid var(--line); border-radius:16px;
  padding:16px 18px; margin:20px 0; font-size:14px; color:#2C3B5C;
}
.warn-box{
  background:var(--pop-soft); border:1px solid #FFD2DB; border-radius:16px;
  padding:16px 18px; margin:20px 0; font-size:14px; color:#7A3D48;
}

.btn-link{
  display:inline-block; margin-top:8px; padding:12px 20px; background:var(--blue);
  color:#FFFFFF !important; border-radius:999px; text-decoration:none; font-weight:700; font-size:14.5px;
}
.btn-link:hover{background:var(--blue-dark);}

footer{border-top:1px solid var(--line); padding:24px 0 40px; font-size:13px; color:var(--muted);}
footer .wrap{max-width:1040px;}