:root { color-scheme: light; font: 17px/1.65 system-ui, sans-serif; color: #192b3d; background: #f2f5f8; }
* { box-sizing: border-box; }
body { margin: 0; }
header, main, footer { max-width: 880px; margin: auto; padding: 24px; }
header { padding-bottom: 12px; }
.brand { color: #183b61; font-weight: 800; font-size: 1.3rem; text-decoration: none; }
nav { display: flex; gap: 10px 24px; flex-wrap: wrap; margin-top: 12px; }
main { background: white; border: 1px solid #d7e0e8; border-radius: 16px; padding: 32px; }
h1 { line-height: 1.2; font-size: clamp(1.8rem, 5vw, 2.5rem); margin: 0 0 16px; }
h2 { line-height: 1.3; margin-top: 32px; font-size: 1.3rem; }
p, ul, ol { margin: 16px 0; }
li + li { margin-top: 10px; }
a { color: #0d5289; overflow-wrap: anywhere; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
a:focus-visible { outline: 3px solid #bd7400; outline-offset: 4px; }
.date, footer { color: #526274; font-size: .9rem; }
.notice { background: #edf4fb; padding: 16px 20px; border-left: 4px solid #286293; border-radius: 6px; }
.button { display: inline-block; background: #174f7c; color: white; padding: 12px 20px; border-radius: 8px; font-weight: 650; text-decoration: none; }
.template { border: 1px solid #b9c9d6; border-radius: 8px; padding: 18px; white-space: pre-line; overflow-wrap: anywhere; }
@media (max-width: 600px) { header, footer { padding: 20px; } main { padding: 24px 20px; border-radius: 0; border-left: 0; border-right: 0; } }