/* そらいろ郵便局 資料館 — 紙のwiki + 郵便 + VHSドット絵
   palette: 紙=#f4efe3 / 墨=#33302a / 郵便赤=#a04432 / そらいろ=#6f9fc0 / 古紙影=#e3dcc9 / 消印灰=#8c8577 */
:root {
  --paper: #f4efe3;
  --paper-deep: #ece5d3;
  --ink: #33302a;
  --ink-soft: #5c564a;
  --post-red: #a04432;
  --sora: #6f9fc0;
  --sora-deep: #4d7ea3;
  --shadow: #e3dcc9;
  --stamp-line: #b9b09b;
  --kesiin: #8c8577;
  --warn: #8a6d2f;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

@font-face {
  font-family: 'DotGothic16';
  src: url('../fonts/DotGothic16.ttf') format('truetype');
  font-display: swap;
}

html { scroll-behavior: smooth; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: 'Hiragino Mincho ProN', 'Yu Mincho', 'YuMincho', serif;
  font-size: 16px;
  line-height: 1.95;
  min-height: 100dvh;
  /* 通常の日本語文(分かち書きでない)なので折返しは標準規則 */
  word-break: normal;
  overflow-wrap: break-word;
  /* 紙の質感: ごく薄い繊維ノイズ */
  background-image:
    radial-gradient(rgba(163, 148, 116, .06) 1px, transparent 1px),
    radial-gradient(rgba(163, 148, 116, .04) 1px, transparent 1px);
  background-size: 7px 7px, 11px 11px;
  background-position: 0 0, 3px 5px;
}

/* ---- header ---- */
.site-head {
  border-bottom: 3px double var(--stamp-line);
  background: linear-gradient(180deg, #f8f4ea, var(--paper));
  padding: 14px 16px 10px;
}
.site-head .inner { max-width: 860px; margin: 0 auto; }
.site-title {
  font-family: 'DotGothic16', monospace;
  font-size: clamp(21px, 5.4vw, 30px);
  letter-spacing: .04em;
  color: var(--ink);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.site-title .yu { color: var(--post-red); }
.site-sub {
  color: var(--ink-soft);
  font-size: 12.5px;
  margin-top: 2px;
  letter-spacing: .12em;
}

/* ---- nav ---- */
.site-nav {
  border-bottom: 1px solid var(--stamp-line);
  background: var(--paper-deep);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.site-nav .inner {
  max-width: 860px; margin: 0 auto;
  display: flex; gap: 2px; padding: 0 10px;
  white-space: nowrap;
}
.site-nav a {
  font-family: 'DotGothic16', monospace;
  font-size: 13.5px;
  color: var(--ink-soft);
  text-decoration: none;
  padding: 8px 10px 7px;
  border-bottom: 3px solid transparent;
}
.site-nav a[aria-current="page"] { color: var(--post-red); border-bottom-color: var(--post-red); }
.site-nav a:hover { color: var(--post-red); }

/* ---- layout ---- */
.wrap { max-width: 860px; margin: 0 auto; padding: 22px clamp(14px, 3vw, 28px) 60px; }

h1.page-title {
  font-family: 'DotGothic16', monospace;
  font-weight: normal;
  font-size: clamp(20px, 5vw, 27px);
  border-bottom: 2px solid var(--ink);
  padding-bottom: 6px;
  margin: 6px 0 18px;
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
}
h2.sec {
  font-family: 'DotGothic16', monospace;
  font-weight: normal;
  font-size: 18px;
  color: var(--ink);
  border-left: 5px solid var(--post-red);
  border-bottom: 1px solid var(--stamp-line);
  padding: 2px 0 2px 10px;
  margin: 30px 0 12px;
}
h3 { font-size: 15.5px; margin: 18px 0 6px; color: var(--ink); }

p { margin: 0 0 12px; }
a { color: var(--sora-deep); }
a:hover { color: var(--post-red); }

/* ---- 記事ボックス ---- */
.card {
  background: #faf7ef;
  border: 1px solid var(--stamp-line);
  box-shadow: 2px 3px 0 rgba(60, 50, 30, .08);
  padding: 14px 16px;
  margin-bottom: 16px;
}
.card.aside { background: var(--paper-deep); font-size: 14px; color: var(--ink-soft); }

/* 編集者の署名文化 */
.sig { text-align: right; font-size: 12.5px; color: var(--kesiin); margin-top: 6px; }
.sig::before { content: '―― '; }

/* ---- 更新履歴 / diff ---- */
.log-line { font-size: 14px; padding: 7px 4px; border-bottom: 1px dotted var(--stamp-line); display: flex; gap: 10px; }
.log-line time { color: var(--kesiin); font-family: 'DotGothic16', monospace; font-size: 12.5px; flex: none; padding-top: 2px; }
.log-line .del { color: var(--post-red); }
.diff-del { background: #f3ded8; color: #7c2f1f; text-decoration: line-through; padding: 1px 4px; }
.diff-add { background: #e2ead8; color: #3d5226; padding: 1px 4px; }

/* ---- 表 ---- */
table.w { width: 100%; border-collapse: collapse; font-size: 14px; }
table.w th {
  font-family: 'DotGothic16', monospace; font-weight: normal;
  background: var(--paper-deep); border: 1px solid var(--stamp-line);
  padding: 6px 8px; text-align: left; color: var(--ink-soft); white-space: nowrap;
}
table.w td { border: 1px solid var(--stamp-line); padding: 6px 8px; vertical-align: top; }
table.w tr.missing td { background: #f0e8dd; color: var(--kesiin); }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ---- VHSキャプチャ ---- */
.vhs {
  background: #16151c;
  padding: 10px 10px 8px;
  border: 1px solid #2c2a33;
  box-shadow: 3px 4px 0 rgba(60, 50, 30, .14);
  margin: 0 0 6px;
  position: relative;
}
.vhs img {
  display: block; width: 100%; height: auto;
  image-rendering: pixelated;
}
.vhs::after { /* 走査線 */
  content: ''; position: absolute; inset: 10px 10px 8px;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.16) 0 1px, transparent 1px 3px);
  pointer-events: none;
}
.vhs .tc {
  position: absolute; right: 16px; top: 14px;
  font-family: 'DotGothic16', monospace; font-size: 11px;
  color: rgba(240, 240, 220, .75); text-shadow: 1px 1px 0 #000;
  z-index: 2;
}
.cap { font-size: 13px; color: var(--ink-soft); margin-bottom: 18px; }

/* ---- BBS ---- */
.bbs-thread { border: 1px solid var(--stamp-line); background: #faf7ef; margin-bottom: 22px; }
.bbs-thread > h3 {
  font-family: 'DotGothic16', monospace; font-weight: normal; font-size: 15px;
  background: var(--paper-deep); margin: 0; padding: 8px 12px;
  border-bottom: 1px solid var(--stamp-line);
}
.post { padding: 10px 14px; border-bottom: 1px dotted var(--stamp-line); font-size: 14.5px; }
.post:last-child { border-bottom: 0; }
.post .meta { font-size: 12px; color: var(--kesiin); font-family: 'DotGothic16', monospace; margin-bottom: 3px; }
.post .meta b { color: var(--sora-deep); font-weight: normal; }
.post.deleted { color: var(--kesiin); font-size: 13px; background: #f0ebe0; }

/* ---- 検索室 ---- */
.search-desk {
  background: #efe9da;
  border: 2px solid var(--ink-soft);
  padding: 18px 16px;
  box-shadow: inset 0 0 0 4px var(--paper), inset 0 0 0 5px var(--stamp-line);
}
.search-row { display: flex; gap: 8px; }
.search-row input {
  flex: 1; min-width: 160px;
  font-family: 'DotGothic16', monospace; font-size: 17px;
  padding: 9px 10px;
  border: 2px solid var(--ink-soft); background: #fffdf6; color: var(--ink);
}
.search-row input:focus { outline: none; border-color: var(--post-red); }
button.pbtn {
  font-family: 'DotGothic16', monospace; font-size: 15px;
  background: var(--post-red); color: #fdf6ea;
  border: 2px solid #7c2f1f; border-radius: 0;
  padding: 8px 16px; cursor: pointer;
  box-shadow: 2px 2px 0 rgba(60, 30, 20, .3);
}
button.pbtn:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 rgba(60,30,20,.3); }
button.pbtn.ghost { background: var(--paper-deep); color: var(--ink-soft); border-color: var(--stamp-line); }
button.pbtn:disabled { opacity: .45; cursor: default; }

.hit {
  border: 1px solid var(--stamp-line); border-left: 5px solid var(--sora);
  background: #fffdf6; padding: 10px 14px; margin-top: 12px;
  font-size: 14.5px; white-space: pre-wrap;
}
.hit .src { font-family: 'DotGothic16', monospace; font-size: 12px; color: var(--kesiin); margin-bottom: 4px; }
.noresult { color: var(--kesiin); font-size: 14px; margin-top: 12px; }

/* ---- 切手 ---- */
.stamp-row { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.stamp-row svg { display: block; }
.margin-stamps {
  margin: 44px 0 0;
  padding-top: 10px;
  border-top: 1px dotted var(--stamp-line);
  display: flex; justify-content: flex-end;
  opacity: .82;
}
table.stamp-table td { text-align: center; padding: 4px 6px; }
table.stamp-table .unknown { color: var(--kesiin); font-family: 'DotGothic16', monospace; }

/* ---- 消印・ラベル ---- */
.keshiin {
  display: inline-block;
  font-family: 'DotGothic16', monospace; font-size: 11px;
  color: var(--kesiin);
  border: 2px solid var(--kesiin); border-radius: 50%;
  width: 58px; height: 58px;
  text-align: center; line-height: 1.25;
  padding-top: 12px;
  transform: rotate(-8deg);
  opacity: .75;
  flex: none;
  margin: 3px 4px 0 0; /* 回転ぶんの張り出し逃がし */
}
.tag {
  display: inline-block; font-family: 'DotGothic16', monospace; font-size: 11.5px;
  border: 1px solid var(--stamp-line); background: var(--paper-deep);
  color: var(--ink-soft); padding: 1px 7px; margin-right: 4px;
}
.tag.red { color: var(--post-red); border-color: var(--post-red); background: #f6ece7; }

/* ---- 黒塗り ---- */
.redact { background: var(--ink); color: var(--ink); padding: 0 3px; border-radius: 1px; }

/* ---- 管理人の注記 ---- */
.note-t {
  border-left: 4px solid var(--kesiin);
  background: #f0ece1;
  color: var(--ink-soft);
  font-size: 13.5px;
  padding: 8px 12px;
  margin: 14px 0;
}
.note-t .who { font-family: 'DotGothic16', monospace; font-size: 11.5px; color: var(--kesiin); display: block; }

/* ---- チャット(私書箱の奥) ---- */
.chat { background: #eef0ec; border: 1px solid var(--stamp-line); padding: 14px 12px; }
.chat .line { max-width: 86%; margin-bottom: 10px; padding: 8px 12px; font-size: 14.5px; }
.chat .them { background: #fffdf6; border: 1px solid var(--stamp-line); margin-right: auto; }
.chat .me { background: #dce8f0; border: 1px solid #b8cbd8; margin-left: auto; text-align: right; }
.chat .typing { color: var(--kesiin); font-size: 13px; }
.chat .typing::after { content: '…'; animation: tdots 1.4s infinite steps(3); }
@keyframes tdots { 0% { content: '.'; } 50% { content: '..'; } 100% { content: '...'; } }
.chat-choices { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }

/* ---- 調査ノート ---- */
#notebook-fab {
  position: fixed; right: 10px; bottom: 10px; z-index: 900;
  font-family: 'DotGothic16', monospace; font-size: 12.5px;
  background: var(--sora-deep); color: #f4efe3;
  border: 2px solid #38607e; padding: 7px 11px; cursor: pointer;
  box-shadow: 2px 2px 0 rgba(40, 50, 60, .35);
}
#notebook { position: fixed; inset: 0; background: rgba(40, 36, 28, .45); z-index: 950; display: none; }
#notebook.open { display: block; }
#notebook .book {
  position: absolute; right: 0; top: 0; bottom: 0;
  width: min(420px, 92vw);
  background: var(--paper); border-left: 3px double var(--stamp-line);
  overflow-y: auto; padding: 18px 16px 40px;
}
#notebook h2 { font-family: 'DotGothic16', monospace; font-weight: normal; font-size: 17px; border-bottom: 2px solid var(--ink); margin-bottom: 10px; }
.nb-card { border: 1px solid var(--stamp-line); background: #faf7ef; padding: 8px 12px; margin-bottom: 8px; font-size: 13.5px; }
.nb-card.q { color: var(--ink-soft); background: var(--paper-deep); }
.nb-card .k { font-family: 'DotGothic16', monospace; font-size: 12px; color: var(--sora-deep); display: block; }

/* ---- 照合(名簿) ---- */
.roster-grid { display: grid; gap: 10px; }
.roster-person { border: 1px solid var(--stamp-line); background: #faf7ef; padding: 10px 12px; }
.roster-person b { font-family: 'DotGothic16', monospace; font-weight: normal; }
.roster-selects { display: flex; gap: 8px; margin-top: 6px; flex-wrap: wrap; }
select.psel {
  font-family: 'DotGothic16', monospace; font-size: 14px;
  border: 2px solid var(--stamp-line); background: #fffdf6; color: var(--ink);
  padding: 6px 8px; border-radius: 0;
  flex: 1 1 140px; min-width: 0; max-width: 100%; width: 100%;
}
.roster-person.locked { border-color: var(--sora-deep); background: #eef3f6; }
.roster-person.locked select { pointer-events: none; opacity: .8; border-color: #b8cbd8; }

/* ---- 汎用 ---- */
.center { text-align: center; }
.small { font-size: 13px; }
.dim { color: var(--kesiin); }
.mono { font-family: 'DotGothic16', monospace; }
.hidden { display: none !important; }
.fade-in { animation: fadein 1.2s both; }
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
.shake { animation: shake .4s; }
@keyframes shake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }

footer.site-foot {
  border-top: 3px double var(--stamp-line);
  margin-top: 50px; padding: 16px;
  text-align: center; font-size: 12.5px; color: var(--kesiin);
}

/* ---- 最終回視聴室 / エピローグ(暗い紙) ---- */
body.night {
  background: #201f26; color: #d8d2c2;
  background-image: none;
}
body.night .wrap { max-width: 700px; }
body.night a { color: #9fc2da; }

/* 印刷: 資料は紙が正 */
@media print {
  .site-nav, #notebook-fab, .search-desk { display: none; }
}