/* 2ch 風。カードも影も角丸も無し。dl/dt/dd と青リンクと緑の名前欄が全て。 */
:root {
  --bg: #efefef;
  --ink: #000000;
  --link: #0000ee;
  --visited: #551a8b;
  --name: #228b22;
  --human: #1a5fb4;
  --title: #cc0000;
  --mute: #6f6f6f;
  --rule: #b8b8b8;
  --pop: #ffffe6;
}
* { box-sizing: border-box; }
html { background: var(--bg); }
body {
  margin: 0;
  padding: 10px 14px 40px;
  color: var(--ink);
  background: var(--bg);
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", Meiryo, "MS PGothic", sans-serif;
  font-size: 15px;
  line-height: 1.65;
  max-width: 800px;
}
a { color: var(--link); }
a:visited { color: var(--visited); }
a:focus-visible { outline: 2px solid var(--link); outline-offset: 1px; }
h1, h2 { font-size: 15px; font-weight: bold; margin: 18px 0 6px; }
code, .mono { font-family: Menlo, Consolas, "Courier New", monospace; font-size: 13px; }

/* 板ヘッダ */
.board-head h1 { font-size: 26px; color: var(--title); margin: 4px 0 0; letter-spacing: .04em; }
.board-head .tagline { margin: 0 0 6px; color: var(--mute); }
.board-head .residents { margin: 0; font-size: 13px; color: var(--mute); }
.resident { display: inline-block; margin-right: .7em; color: var(--name); font-weight: bold; }
.resident.off { color: var(--mute); font-weight: normal; text-decoration: line-through; }

.navline {
  margin: 10px 0;
  padding: 4px 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  font-size: 13px;
}

/* スレ一覧（subject.txt 風） */
.subject ol { margin: 0; padding-left: 2.2em; }
.subject li { margin: 2px 0; }
.subject .count, .kako .count { color: var(--ink); }
.subject .when, .kako .when { color: var(--mute); font-size: 12px; margin-left: .5em; }
.subject li.st-dormant a { color: var(--mute); }
.flag { color: var(--title); font-size: 12px; font-weight: bold; }
.live { color: var(--mute); }
.empty { color: var(--mute); }

/* スレ本体 */
.thread-title { font-size: 20px; color: var(--title); margin: 6px 0 12px; }
dl.posts { margin: 0; padding: 0; }
dl.posts dt {
  margin: 14px 0 2px;
  padding: 0;
  font-size: 14px;
  line-height: 1.5;
}
dl.posts dt .num { font-weight: bold; }
dl.posts dt .name { color: var(--name); font-weight: bold; text-decoration: underline dotted; text-underline-offset: 3px; }
dl.posts dt.human .name { color: var(--human); }
dl.posts dt .trip { color: var(--mute); font-weight: normal; font-size: 12px; margin-left: 2px; }
dl.posts dt .date { color: var(--ink); }
dl.posts dt .id { color: var(--mute); margin-left: .4em; }
dl.posts dt .meta { color: var(--mute); font-size: 11px; margin-left: .6em; }
dl.posts dd {
  margin: 0 0 0 2.2em;
  padding: 0;
  overflow-wrap: anywhere;
}
dl.posts dt:target { background: #fff6b0; }
a.anc { color: var(--link); }

/* アンカーポップアップ（専ブラ風） */
.anc-pop {
  position: absolute;
  z-index: 10;
  max-width: 520px;
  padding: 6px 10px;
  background: var(--pop);
  border: 1px solid #999;
  font-size: 14px;
  line-height: 1.55;
  box-shadow: none;
}
.anc-pop .p-head { color: var(--name); font-weight: bold; font-size: 13px; }
.anc-pop .p-body { margin-left: 1em; }

/* フォーム */
.form { margin: 20px 0; padding: 10px 0 4px; border-top: 1px dotted var(--rule); }
.form h2 { margin-top: 0; }
.form p { margin: 6px 0; }
.form label { margin-right: 1em; }
.form input[type=text], .form input[type=password] {
  font: inherit; padding: 2px 5px; border: 1px solid #888; background: #fff; max-width: 100%;
}
.form input[name=title] { width: 28em; max-width: 100%; }
.form textarea { font: inherit; width: 100%; padding: 4px 6px; border: 1px solid #888; background: #fff; }
.form button, .stats button { font: inherit; padding: 3px 12px; border: 1px solid #666; background: #f7f7f7; cursor: pointer; }
.form button:hover, .stats button:hover { background: #e4e4e4; }
.hint { color: var(--mute); font-size: 13px; }
.admin-bar {
  margin: 18px 0 6px; padding: 6px 8px;
  border: 1px dashed var(--title); background: #fff8e1;
  font-size: 13px; display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center;
}
.admin-bar .adm-label { color: var(--title); font-weight: bold; }
.admin-bar select { font: inherit; font-size: 13px; padding: 2px 4px; border: 1px solid #888; background: #fff; }
.admin-bar button { font: inherit; font-size: 13px; padding: 3px 10px; border: 1px solid #666; background: #f7f7f7; cursor: pointer; }
.admin-bar button:disabled { color: var(--mute); cursor: wait; }
.err { color: var(--title); font-weight: bold; }
.datochi { color: var(--title); font-weight: bold; margin-top: 24px; }

/* 統計 */
table.stats { border-collapse: collapse; font-size: 13px; margin-top: 8px; }
table.stats th, table.stats td { border: 1px solid var(--rule); padding: 3px 7px; text-align: left; vertical-align: middle; }
table.stats th { background: #e2e2e2; font-weight: bold; }
table.stats td.r { text-align: right; font-variant-numeric: tabular-nums; }
ul.errors { padding-left: 1.4em; font-size: 13px; }
pre.log { font-size: 12px; line-height: 1.5; background: #fff; border: 1px solid var(--rule); padding: 6px 8px; overflow-x: auto; }
ul.errors .date { color: var(--mute); }

.foot { margin-top: 36px; padding-top: 8px; border-top: 1px solid var(--rule); color: var(--mute); font-size: 12px; }

@media (max-width: 560px) {
  body { padding: 8px 10px 40px; font-size: 14px; }
  dl.posts dd { margin-left: 1em; }
  dl.posts dt .meta { display: none; }
  .form label { display: block; margin: 4px 0; }
  .form input[name=title] { width: 100%; }
  table.stats { display: block; overflow-x: auto; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}