:root { color-scheme: light; --red:#bc323f; --ink:#27252a; --muted:#70696e; --pale:#fbf0ef; }
* { box-sizing:border-box; } html { scroll-behavior:auto; } article { scroll-margin-top:16px; } article:focus { outline:none; }
body { margin:0; background:#f7f3f1; color:var(--ink); font-family:system-ui,-apple-system,"Yu Gothic",Meiryo,sans-serif; line-height:1.7; }
.layout { display:grid; grid-template-columns:280px minmax(0,860px); gap:28px; max-width:1260px; margin:0 auto; padding:28px 20px 64px; }
aside { position:sticky; top:16px; align-self:start; max-height:calc(100vh - 32px); overflow:auto; background:#fff; border:1px solid #e8dedd; border-radius:14px; padding:18px; }
aside h1 { font-size:1.05rem; margin:0 0 12px; } .search { width:100%; padding:9px 10px; border:1px solid #d8c8c6; border-radius:8px; font:inherit; }
nav a { display:block; padding:6px 4px; color:var(--ink); text-decoration:none; font-size:.9rem; border-radius:5px; } nav a:hover,nav a:focus { background:var(--pale); color:var(--red); }
main { min-width:0; } article { background:#fff; border:1px solid #e8dedd; border-radius:16px; padding:36px clamp(20px,5vw,58px); margin-bottom:24px; box-shadow:0 2px 10px #4b2a2a0b; }
.section { color:var(--red); font-size:.82rem; font-weight:700; letter-spacing:.04em; } .updated { color:var(--muted); font-size:.78rem; margin:0 0 12px; } h2 { margin:.2rem 0 1rem; line-height:1.3; font-size:clamp(1.45rem,3vw,2rem); } h3 { color:var(--red); font-size:1.05rem; margin:1.25rem 0 .25rem; } p { margin:.55rem 0; } a { color:var(--red); }
.note { background:var(--pale); border-radius:10px; padding:12px 16px; margin-top:20px; } .toc,.index { background:#faf7f5; border-radius:10px; padding:10px 14px; margin:18px 0; } .toc a { display:flex; justify-content:space-between; padding:5px 0; }
table { border-collapse:collapse; width:100%; margin:16px 0; font-size:.9rem; } th { background:var(--red); color:#fff; text-align:left; } th,td { padding:9px 10px; vertical-align:top; border-bottom:1px solid #e8dedd; } tr:nth-child(even) td { background:#fcf6f4; }
.shot { margin:20px 0 26px; } .shot-stage { display:block; padding:0; position:relative; overflow:hidden; width:100%; background:#eee; border:1px solid #dcc; cursor:zoom-in; } .shot-stage:focus-visible { outline:3px solid #bc323f; outline-offset:3px; } .shot-stage img { position:absolute; max-width:none; } .shot-stage svg { position:absolute; inset:0; width:100%; height:100%; } .marks rect,.marks line,.marks path { fill:none; stroke:#bc323f; stroke-width:4; } .marks line { stroke-width:5; } .marks .badge { fill:#bc323f; stroke:#fff; stroke-width:3; } .marks .badge-text { fill:#fff; font:700 22px system-ui,sans-serif; text-anchor:middle; }
.shot-caption { color:var(--muted); font-size:.78rem; margin-top:5px; } dialog.zoom { width:min(96vw,1600px); max-width:none; max-height:94vh; padding:44px 18px 18px; border:0; border-radius:12px; background:#222; } dialog.zoom::backdrop { background:#000b; } .zoom-content { max-height:80vh; overflow:auto; } .zoom-content .shot-stage { cursor:default; margin:auto; min-width:900px; } .zoom-close { position:absolute; top:5px; right:10px; padding:4px 12px; font:inherit; color:white; background:none; border:1px solid #999; border-radius:5px; cursor:pointer; }
@media (max-width:760px) { .layout { display:block; padding:10px; } aside { position:static; max-height:none; margin-bottom:12px; } aside details { border:1px solid #e8dedd; border-radius:8px; padding:6px 10px; } aside details summary { cursor:pointer; color:var(--red); font-weight:700; } aside details nav { margin-top:6px; } article { padding:24px 18px; border-radius:12px; } table { display:block; overflow-x:auto; white-space:normal; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }
.result-count { display:block; font-size:.85rem; color:var(--muted); } summary { cursor:pointer; }
.num { display:inline-grid; place-items:center; min-width:1.6em; height:1.6em; border-radius:50%; background:var(--red); color:white; }