:root {
    --ink: #12384d;
    --muted: #5e7282;
    --line: #dce8ef;
    --brand: #0f5e7a;
    --brand-2: #1e7e9f;
    --paper: #ffffff;
    --wash: #eef6fb;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: Georgia, 'Times New Roman', serif; color: var(--ink); background: linear-gradient(135deg, #f4f8fb, #e4eef5); }
a { color: var(--brand); }
.page-header { display: flex; justify-content: space-between; gap: 1rem; align-items: center; padding: 1rem clamp(1rem, 4vw, 3rem); background: #0f2b3d; color: #fff; flex-wrap: wrap; }
.brand { color: #fff; text-decoration: none; font-weight: 800; font-size: 1.15rem; letter-spacing: 0.02em; }
.page-header nav { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.page-header nav a { color: #e7f3f8; text-decoration: none; padding: 0.42rem 0.68rem; border-radius: 999px; background: rgba(255,255,255,0.09); font-family: Verdana, sans-serif; font-size: 0.84rem; }
.page-header nav a:hover, .page-header nav a:focus { background: #fff; color: #0f2b3d; outline: none; }
.content-page { max-width: 1040px; margin: 0 auto; padding: clamp(1.25rem, 4vw, 3rem); }
.hero, .article, .panel { background: rgba(255,255,255,0.92); border: 1px solid var(--line); border-radius: 28px; padding: clamp(1.25rem, 4vw, 2.5rem); box-shadow: 0 18px 45px rgba(15,43,61,0.08); margin-bottom: 1.4rem; }
h1 { font-size: clamp(2rem, 5vw, 3.3rem); line-height: 1.05; margin: 0 0 0.8rem; }
h2 { margin-top: 1.8rem; color: #0f5e7a; }
p, li { line-height: 1.75; font-size: 1.03rem; }
.lede { font-size: 1.2rem; color: #3e596b; }
.eyebrow { color: var(--brand); text-transform: uppercase; letter-spacing: 0.12em; font-family: Verdana, sans-serif; font-weight: 800; font-size: 0.78rem; }
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.guide-list { columns: 2; column-gap: 2rem; }
.guide-list li { break-inside: avoid; margin-bottom: 0.4rem; }
.diagram { margin: 1.5rem 0; padding: 1rem; background: var(--wash); border-radius: 22px; border: 1px solid var(--line); }
.diagram svg { display: block; width: 100%; height: auto; }
.diagram figcaption { color: var(--muted); font-size: 0.92rem; margin-top: 0.7rem; }
.notice { padding: 1rem; border-left: 5px solid var(--brand-2); background: #f5fbfe; border-radius: 12px; }
.page-footer { text-align: center; padding: 2rem 1rem; background: #0f2b3d; color: #dbeaf2; }
.page-footer a { color: #fff; margin: 0 0.45rem; }
@media (max-width: 760px) {
    .grid, .guide-list { columns: 1; grid-template-columns: 1fr; }
    .page-header { align-items: flex-start; }
}