/* Local-only static archive. Native details/summary handles reply toggles. */
:root { color-scheme:dark; --bg:#0B0B0D; --card:#17171B; --text:#F2F2F3; --muted:#A8A8B0; --red:#C63849; --line:#333339; --replies:#131316; --number:#D65360; --number-hover:#E87883; }
* { box-sizing:border-box; }
html { scroll-padding-top:24px; }
body { margin:0; background:var(--bg); color:var(--text); font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif; font-size:16px; line-height:1.9; overflow-wrap:anywhere; }
a { color:var(--text); text-decoration:none; }
a:hover,a:focus-visible { color:#fff; text-decoration:none; }
a:focus-visible,summary:focus-visible { outline:2px solid var(--muted); outline-offset:5px; }
.wrap { width:min(calc(100% - 48px),880px); margin-inline:auto; }
.site-header { padding:52px 0 0; margin-bottom:24px; }
h1 { font-size:clamp(28px,5vw,38px); line-height:1.45; margin:0 0 16px; font-weight:700; }
h1::before { content:""; display:inline-block; width:5px; height:.85em; background:var(--red); margin-right:16px; }
.site-header h1 { margin:0; }
.archive-notice { display:flex; align-items:flex-start; gap:12px; background:#1B1B20; border-radius:8px; padding:20px 24px; margin:0 0 32px; }
.notice-icon { flex:0 0 20px; color:#D65360; font-size:20px; line-height:1.3; }
.archive-notice h2 { color:var(--text); font-size:16px; font-weight:600; line-height:1.6; margin:0; }
.archive-notice p { color:#C8C8CF; font-size:14px; line-height:1.9; margin:6px 0 0; }
.page-heading { display:flex; flex-wrap:wrap; justify-content:space-between; gap:4px 20px; align-items:baseline; margin-bottom:24px; }
.page-heading h2 { font-size:17px; margin:0; }
.page-heading p { margin:0; font-size:13px; color:var(--muted); }
.thread { min-width:0; background:var(--card); border:1px solid var(--line); border-radius:8px; margin:0 0 36px; padding:30px; }
.post { min-width:0; scroll-margin-top:24px; }
.post-title { color:var(--text); font-size:24px; font-weight:700; line-height:1.55; margin:0 0 14px; padding-left:16px; border-left:3px solid var(--red); }
.post-header { display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 20px; margin-bottom:22px; }
.author { color:var(--text); font-weight:700; font-size:16px; }
.post-meta { display:flex; flex-wrap:wrap; gap:4px 14px; font-size:12px; color:var(--muted); }
.post-id { color:var(--number); text-decoration:none; border-bottom:0; }
.reply-to { color:var(--number); font-size:12px; margin:0 0 12px; }
.reply-to a { color:var(--number); }
.post-id:hover,.post-id:focus-visible,.reply-to a:hover,.reply-to a:focus-visible { color:var(--number-hover); }
.body { white-space:pre-wrap; overflow-wrap:anywhere; margin:0; line-height:1.95; }
.attachments { display:flex; flex-wrap:wrap; gap:12px; margin-top:22px; }
.attachments figure { margin:0; }
.image-link { display:block; width:120px; height:90px; border-radius:3px; }
.image-link img { display:block; width:120px; height:90px; aspect-ratio:4/3; object-fit:cover; border-radius:3px; }
.image-help { color:var(--muted); font-size:12px; margin:8px 0 0; }
.replies { display:grid; margin-top:26px; border-top:1px solid var(--line); }
/* summary is first in HTML for native semantics, last visually when open. */
.replies > summary { grid-row:2; display:flex; justify-content:center; align-items:center; min-height:48px; padding:10px 16px; margin-top:18px; border:1px solid var(--line); border-radius:4px; cursor:pointer; list-style:none; color:var(--text); font-size:14px; text-decoration:none; }
.replies > summary::-webkit-details-marker { display:none; }
.replies > summary::marker { content:""; }
.replies > summary:hover { color:#fff; border-color:var(--muted); }
.replies::details-content { grid-row:1; min-width:0; }
.when-open { display:none; }
.replies[open] > summary .when-open { display:inline; }
.replies[open] > summary .when-closed { display:none; }
.reply-list { grid-row:1; min-width:0; background:var(--replies); border-radius:4px; margin-top:22px; padding:0 22px; }
.reply { padding:24px 0; border:0; background:transparent; }
.reply + .reply { border-top:1px solid var(--line); }
.reply .post-title { border:0; padding:0; font-size:17px; margin-bottom:8px; }
.reply .post-header { margin-bottom:12px; }
.pagination { border-top:1px solid var(--line); padding:28px 0 0; margin-top:12px; }
.page-numbers { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; padding:0; margin:0 0 16px; list-style:none; }
.page-numbers a,.page-numbers span { display:grid; place-items:center; min-width:44px; min-height:44px; padding:5px 12px; border:1px solid var(--line); border-radius:4px; text-decoration:none; font-size:14px; }
.page-numbers [aria-current] { background:var(--red); border-color:var(--red); color:#fff; font-weight:700; }
.page-directions { display:flex; justify-content:center; flex-wrap:wrap; gap:8px 16px; }
.page-directions a,.disabled { display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:4px 12px; font-size:14px; }
.disabled { color:var(--muted); }
.site-footer { color:var(--muted); text-align:center; font-size:12px; padding:32px 0 48px; }
.skip { position:absolute; left:16px; top:-100px; background:var(--card); padding:10px 16px; z-index:1; }
.skip:focus { top:12px; }
@media (max-width:600px) {
  .wrap { width:calc(100% - 28px); }
  .site-header { padding-top:30px; margin-bottom:22px; }
  .archive-notice { padding:18px; gap:10px; margin-bottom:26px; border-radius:6px; }
  .thread { padding:22px 18px; margin-bottom:28px; border-radius:6px; }
  .post-title { font-size:21px; padding-left:12px; }
  .post-header { display:block; margin-bottom:18px; }
  .post-meta { margin-top:4px; gap:4px 12px; }
  .body { font-size:15px; }
  .image-link,.image-link img { width:96px; height:72px; }
  .attachments { gap:10px; }
  .reply-list { padding:0 14px; }
  .reply { padding:20px 0; }
  .replies > summary { min-height:48px; padding-inline:8px; }
  .page-directions { gap:4px; }
}