/* ===== cpk.css — Cpk専用の軽量スタイル ===== */
:root{
  --bg:#ffffff; --fg:#111827; --muted:#6b7280; --border:#e5e7eb;
  --card:#f9fafb; --accent:#111111; --ok:#047857; --warn:#b45309;
}
@media (prefers-color-scheme: dark){
  :root{ --bg:#0b0f17; --fg:#e6edf3; --muted:#94a3b8; --border:#253046; --card:#0f1622; --accent:#e6edf3; }
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; color:var(--fg); background:var(--bg);
  font:16px/1.7 system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans JP", "Yu Gothic UI","メイリオ",sans-serif;
}
a{color:inherit; text-decoration:none}
.container{max-width:900px; margin:0 auto; padding:24px}

/* Top nav */
.top-nav{position:sticky; top:0; background:var(--bg); border-bottom:1px solid var(--border); z-index:10}
.top-nav .nav-wrap{max-width:1000px; margin:0 auto; display:flex; gap:16px; align-items:center; padding:10px 16px}
.top-nav .brand{font-weight:700}
.top-nav .links{margin-left:auto; display:flex; gap:12px}
.top-nav .links a{padding:6px 10px; border-radius:8px}
.top-nav .links a:hover{background:var(--card)}

/* Headings & helpers */
h1{margin:.2rem 0 0}
.muted{color:var(--muted)}
.small{font-size:.9rem}

/* TOC */
.toc{border:1px solid var(--border); border-radius:12px; padding:12px 16px; margin:16px 0; background:var(--card)}
.toc strong{display:block}
.toc ol{margin:8px 0 0 18px}

/* Grid / inputs */
.grid{display:grid; gap:12px}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:780px){ .grid-4{grid-template-columns:1fr} }
label{display:block}
input[type="number"]{width:100%; padding:10px; border:1px solid var(--border); border-radius:8px; background:var(--bg); color:var(--fg)}
input::placeholder{color:color-mix(in srgb, var(--muted) 70%, transparent)}

/* Buttons */
.actions{margin-top:10px; display:flex; gap:10px; flex-wrap:wrap}
button{padding:10px 14px; border-radius:10px; border:1px solid var(--accent); background:var(--accent); color:#fff; font-weight:600; cursor:pointer}
button:hover{opacity:.95; transform:translateY(-1px)}
button.outline{background:transparent; color:var(--fg)}

/* Result */
.result{padding:12px; border:1px dashed var(--border); border-radius:8px; margin-top:8px; background:var(--card)}
.ok{color:var(--ok)} .warn{color:var(--warn)}

/* Focus */
:focus-visible{outline:3px solid rgba(96,165,250,.7); outline-offset:2px}

.figure{margin:12px 0}.figure svg{display:block;border:1px solid var(--border);border-radius:8px;background:var(--card)}.figure figcaption{margin-top:6px}