/* pub のスタイル */

:root {
  color-scheme: only light; /* ブラウザの自動ダークテーマを効かせない */
  --bg: #bbb;
  --panel: #ddd;
  --field: #ccc;
  --line: #aaa;
  --text: #111;
  --sub: #666;
  --link: #1d781d;
  --accent: #781d78;
  --danger: #b03030;
  --gap: 20px;
}

html { scrollbar-gutter: stable; } /* 拡大表示でスクロールバーが消えても横にずれないように */
html.zoom-open { overflow: hidden; } /* 拡大表示中は裏のページをスクロールさせない */

body {
  margin: 0 5px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text);
  font-family: "Noto Sans JP", sans-serif;
  font-size: 20px;
}

a { color: var(--link); text-decoration: none; }
a:hover { color: var(--accent); }

.wrap { box-sizing: border-box; width: 100%; max-width: 42em; margin: 0 auto; }
main.wrap { flex: 1; position: relative; }
.pad { padding: 0 var(--gap); }
.sub { color: var(--sub); }

/* 横並びのリンク */
.row { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--gap); }
.on { color: var(--accent); font-weight: bold; }

/* 上部バー: 左に管理メニュー (ログイン中のみ)、右にページの切り替え */
.topbar { display: flex; align-items: baseline; height: 30px; line-height: 24px; white-space: nowrap; }
.admin-menu { display: flex; gap: 0 var(--gap); font-size: 17px; }
.site-nav { margin-left: auto; font-size: 14px; }
.site-nav a + a::before { content: "|"; color: var(--text); margin: 0 4px; }
@media (max-width: 420px) { .admin-menu { column-gap: 12px; } }

/* 応答時間 (計測を最後まで含めるため HTML の末尾に置き、見た目は上部バーの右端の下に出す) */
.elapsed { position: absolute; top: 24px; right: var(--gap); margin: 0; font-size: 14px; line-height: 24px; }

/* サイトの見出し */
.site-name { font-size: 26px; }
.summary { margin: 5px 0 20px; }

/* 投稿 */
.entry {
  margin: 15px 0;
  padding: 0 var(--gap) 15px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 5px;
}
.entry.focus { border-color: var(--link); box-shadow: 0 0 0 1px var(--link); scroll-margin-top: 10px; } /* 外側に重ねて太く見せ、中身の幅は変えない */
.entry-title { margin: 10px 0 0; font-size: 1.5em; }
.entry-title.in-list { margin-bottom: 15px; }
.entry > time { display: block; margin-top: 10px; }
.entry > time a { color: var(--sub); }

.text { line-height: 32px; overflow-wrap: anywhere; }
.text p { white-space: pre-wrap; }
.text a:hover { text-decoration: underline; }
.text table { border-collapse: collapse; margin: 1em 0; }
.text thead { background: var(--field); }
.text th { font-weight: normal; }
.text th, .text td { border: 2px solid #888; padding: 0 6px; }
.text blockquote { margin: 1em 0 1em 1em; padding-left: .5em; border-left: 3px solid #000; }
.text code { padding: 0 3px; color: var(--accent); background: var(--field); border: 1px solid var(--bg); border-radius: 5px; font-family: monospace; }
.text pre { margin: 20px 0; padding: 5px 10px; overflow: auto; background: #282828; color: #f8f8f2; font: 13px/1.25 monospace; }
.text pre code { padding: 0; color: inherit; background: none; border: 0; }

/* 日時などと操作 */
.foot { display: flex; flex-wrap: wrap; align-items: baseline; gap: 5px var(--gap); margin-top: 15px; color: var(--sub); }
.foot a { color: #444; }
.foot a:hover { text-decoration: underline; }
.foot time a { color: #777; }
/* 枝分かれの切り替え */
.branch { display: inline-flex; gap: 8px; }
.branch span { color: #aaa; }
.tools { display: flex; gap: 14px; margin-left: auto; font-size: 15px; }
.tools a, .tools button { padding: 0; color: #777; background: none; border: 0; font: inherit; cursor: pointer; }
.tools a:hover, .tools button:hover { color: var(--link); text-decoration: none; }
.tools button.danger:hover { color: var(--danger); }
.tools form { display: contents; }
.tools .quiet { color: transparent; } /* 一覧では触れたときだけ見せる */
.tools .quiet:hover { color: #777; }

/* 添付ファイル */
.media { margin: 20px 0; display: grid; gap: 20px; justify-items: start; }
.media img, .media video { max-width: min(740px, 100%); }
.media img { max-height: 400px; }
img.zoomable { cursor: zoom-in; }

/* 画像の拡大表示 */
#zoom {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 10;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, .9);
  overscroll-behavior: contain;
}
#zoom img { max-width: 100%; max-height: 90%; object-fit: contain; }

/* リンクのプレビュー */
.embed { margin-top: 10px; padding: 0 8px 8px; background: #cdcdcd; border: 1px solid #000; }
.embed-site { color: var(--sub); font-size: 15px; line-height: 25px; }
.embed-body { display: flex; gap: 10px var(--gap); }
.embed-img { flex-shrink: 0; display: flex; align-items: center; align-self: flex-start; background: #888; }
.embed-img img { max-width: 200px; max-height: 100px; }
.embed-text { min-width: 0; overflow-wrap: anywhere; } /* 長い URL などで横にはみ出さないように */
.embed-text a:hover { text-decoration: underline; }
.embed-text small { display: block; font-size: 16px; line-height: 26px; }
@media (max-width: 600px) {
  .embed-body { flex-direction: column; } /* 狭い画面では画像を上に置く */
}

/* 一覧など */
.titles { margin: 30px 0; padding: 0 var(--gap); list-style: none; }
.pager { margin-bottom: 20px; }
.note { margin: 20px 0 -5px; }
.empty { padding: var(--gap); }

/* フォーム */
.form input, .form select, .form textarea { padding: 5px; background: var(--field); color: #333; border: 0; font: inherit; }
.form input:focus, .form select:focus, .form textarea:focus { outline: 1px solid var(--accent); }
.form input[type=text], .form input[type=file], .form textarea { box-sizing: border-box; width: 100%; }
.form textarea { font-size: 24px; }
.form input[type=submit] { padding: 5px 12px; background: var(--link); color: #fff; cursor: pointer; }
.form input[type=submit]:disabled { background: #1d681d; color: #ccc; }
.previews { display: flex; flex-wrap: wrap; gap: 5px; }
.previews img { max-width: 200px; max-height: 200px; object-fit: contain; }

.alert { color: var(--link); }

/* 上部バーの下の残りの領域の中央にフォームを置く */
main.center { display: grid; grid-template-rows: auto 1fr; }
main.center > form { place-self: center; }

footer { margin: 20px auto; }
footer a { color: transparent; } /* ログインへの入口は目立たせない */