/* ============================================================
   GEMuの読書会 ― 見た目

   ⚠️ **2026-09-06に、三度目の作り直し。**
      一度目：明朝体の読書ページ（私の思いつき）
      二度目：1999年ごろのCGIチャット（人工無能の資料をもらって）
      三度目：**いまのこれ。**配信者から次の2つを渡された
        ・park-labs.com/ja/about の「洗練された」作り
          → ほぼ黒の背景／細い罫／角丸のカード／
            小さな英字ラベル＋大きな見出し／数字のタイル
        ・配信画面（OBSの枠）の雰囲気
          → 深い紫と、赤紫寄りのネオン。夜の図書館。細い装飾枠

   ⚠️ 人工無能から引き継いだのは**中身のほう**である。見た目ではない。
        ・名前の色を、書く人が選ぶ
        ・参加者一覧がある
        ・つなぎっぱなしにしない（決まった間隔で読み直す）
      **並び順だけは、ふつうのチャットに戻した**（古いものが上、新しいものが下）。
      「洗練された」と、当時の「新しいものが上」は両立しなかった。

   ⚠️ 背景の絵を出したいときは `public/背景.jpg` を置く。
      無ければ、CSSのグラデーションだけで夜の図書館の色を出す。
   ============================================================ */

:root {
  /* 地の色。ほぼ黒だが、わずかに紫を含ませる */
  --地: #08060f;
  --地の奥: #05040a;
  --面: rgba(255, 255, 255, 0.028);
  --面の上: rgba(255, 255, 255, 0.05);
  --縁: rgba(178, 140, 255, 0.16);
  --縁の濃い: rgba(178, 140, 255, 0.34);

  /* ⚠️⚠️ **暗すぎた。**（2026-09-08に明るくした）
     地の色 #08060f に対して測ったコントラスト比：

       前                          あと
       --字         16.72 : 1      16.72 : 1（そのまま）
       --字の薄い     7.73 : 1  →   9.20 : 1
       --字のごく薄い  3.81 : 1  →   6.36 : 1  ⚠️ **本文の下限4.5を割っていた**

     ⚠️ `--字のごく薄い` は 11.5px の小さな札に使っている。
        **いちばん小さい字が、いちばん薄かった。**
     ⚠️ 書体が明朝で、画も細い。ゴシックより余裕を持たせること。
     ⚠️ 色を変えるときは、必ず比を測ってから決めること（4.5未満にしない）。 */
  --字: #ece8f6;
  --字の薄い: #b3abca;
  --字のごく薄い: #948cb0;

  --灯: #c77dff;          /* 紫のネオン */
  --灯の濃い: #9d4edd;
  --灯の淡い: #e0b3ff;
  --水: #6ee7f0;          /* 差しの水色 */

  --丸: 14px;
  --丸の小: 9px;

  /* ── 字 ──────────────────────────────────
     ⚠️ **一つの書体で通す。**（2026-09-06に統一）
        前は見出しが明朝、本文がゴシックで、ちぐはぐに見えていた。
        配信画面の題字と同じ明朝にそろえてある。読書会の場に合う。
     ⚠️ 読めなかったときのために、必ずOSの明朝へ落ちるようにしておくこと。
        Googleの書体が届かない場所でも、形が大きく崩れない。 */
  --字体: "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", "YuMincho",
    "MS PMincho", serif;

  /* 前の書き方で参照している場所が残っていても壊れないよう、同じものを指す */
  --明朝: var(--字体);
  --ゴシック: var(--字体);
}

* { box-sizing: border-box; }

/* ⚠️⚠️ **`hidden` を、CSSの `display` に負けないようにする。**
   `hidden` はブラウザ既定の `display:none` でしかないので、
   こちらで `display: block` や `grid` を書くと**そちらが勝ってしまう。**
   （2026-09-06、置いていないGEMuの絵が「壊れた画像」として出て気づいた。
     `.GEMuの札 img { display: block }` が `hidden` に勝っていた）
   `hidden` を付けている場所：GEMuの絵／考え中／数字たち／最新たち／新着の段／新着図書 */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--地);
  color: var(--字);
  font-family: var(--字体);
  font-size: 15px;
  line-height: 1.9;
  -webkit-font-smoothing: antialiased;
}

/* 入力欄とボタンは、放っておくとOSの書体になる。ここも同じ字にそろえる */
input, textarea, select, button { font-family: var(--字体); }

/* 夜の図書館の明かり。絵が無くても、色だけで雰囲気を出す */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(900px 520px at 18% -8%, rgba(157, 78, 221, 0.20), transparent 62%),
    radial-gradient(760px 480px at 88% 4%, rgba(110, 231, 240, 0.09), transparent 60%),
    radial-gradient(1100px 700px at 50% 108%, rgba(199, 125, 255, 0.13), transparent 66%),
    linear-gradient(180deg, var(--地) 0%, var(--地の奥) 100%);
}

/* public/背景.jpg を置いたときだけ、その上に薄く敷く（app.jsが付ける） */
body.背景あり::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background-image: var(--背景の絵);
  background-size: cover;
  background-position: center;
  opacity: 0.16;
  filter: saturate(1.1);
  pointer-events: none;
}

a { color: var(--灯の淡い); text-decoration: none; }
a:hover { color: #fff; }

::selection { background: rgba(157, 78, 221, 0.4); }

/* ── 幅 ─────────────────────────────────── */

.枠 { width: min(1120px, 100% - 40px); margin-inline: auto; }

/* ── 上の帯 ───────────────────────────────── */

.帯 {
  position: sticky;
  top: 0;
  z-index: 20;
  backdrop-filter: blur(14px);
  background: rgba(8, 6, 15, 0.72);
  border-bottom: 1px solid var(--縁);
}

.帯 .中 {
  display: flex;
  align-items: center;
  gap: 18px;
  height: 60px;
}

.銘 {
  font-family: var(--明朝);
  font-size: 17px;
  letter-spacing: 0.14em;
  color: var(--字);
  white-space: nowrap;
}
.銘 .粒 { color: var(--灯); margin-right: 8px; font-size: 11px; vertical-align: 2px; }

.帯 nav { display: flex; gap: 6px; margin-left: auto; flex-wrap: wrap; }

.帯 nav a {
  font-size: 12.5px;
  letter-spacing: 0.04em;
  color: var(--字の薄い);
  padding: 5px 13px;
  border-radius: 999px;
  border: 1px solid transparent;
}
.帯 nav a:hover { color: var(--字); background: var(--面); border-color: var(--縁); }
.帯 nav a.いま { color: var(--字); background: var(--面の上); border-color: var(--縁の濃い); }

/* ── 狭い画面：たたんでボタンで出す ─────────────────
   ⚠️ ボタンは public/帯.js が作る。HTMLには書いていない
      （帯はどのページにも同じものがあり、4か所を直すと必ず食い違うため）。 */

.たたむボタン {
  display: none;                 /* 広い画面では出さない */
  margin-left: auto;
  width: 40px; height: 40px;
  padding: 0;
  border-radius: var(--丸の小);
  background: var(--面);
  border: 1px solid var(--縁);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.たたむボタン .線 {
  display: block;
  width: 17px; height: 1.5px;
  background: var(--字の薄い);
  border-radius: 2px;
  transition: transform 0.18s, opacity 0.18s;
}
.たたむボタン:hover .線 { background: var(--字); }

@media (max-width: 699px) {
  .帯 .中 { position: relative; }
  .たたむボタン { display: flex; }

  /* ⚠️ 帯の外へ出さず、帯の**下に垂らす。**
     画面いっぱいに覆うと、閉じ方が分からなくなる */
  .帯 nav {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    margin: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 8px;
    background: rgba(10, 8, 18, 0.97);
    backdrop-filter: blur(14px);
    border: 1px solid var(--縁);
    border-radius: 0 0 var(--丸) var(--丸);
    /* たたんだ状態。⚠️ `display:none` にしない（開くとき動かせなくなる） */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 0.16s, transform 0.16s, visibility 0.16s;
  }
  .帯 nav a { padding: 11px 14px; border-radius: var(--丸の小); font-size: 14px; }

  .帯.開いている nav { opacity: 1; visibility: visible; transform: none; }

  /* 開いているあいだは、ボタンを「×」に見せる */
  .帯.開いている .たたむボタン .線:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
  .帯.開いている .たたむボタン .線:nth-child(2) { opacity: 0; }
  .帯.開いている .たたむボタン .線:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
}

/* ── 見出しのかたまり ──────────────────────────── */

.英字の札 {
  /* ⚠️ 10.5 → 11（2026-09-08）。字の大きさを整理したときに、いちばん下を持ち上げた */
  font-size: 11px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--灯);
  margin: 0 0 14px;
}

h1.大見出し {
  font-size: clamp(28px, 4.6vw, 46px);
  line-height: 1.35;
  font-weight: 700;
  letter-spacing: 0.01em;
  margin: 0 0 20px;
}

h1.大見出し .明朝 { font-family: var(--明朝); font-weight: 600; }

.導き {
  color: var(--字の薄い);
  font-size: 15px;
  max-width: 62ch;
  margin: 0;
}

.幕 { padding: 62px 0 10px; }
.節 { padding: 46px 0; }

h2.節見出し {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 0.06em;
  margin: 0 0 6px;
  display: flex;
  align-items: center;
  gap: 10px;
}
h2.節見出し::before {
  content: "◆";
  color: var(--灯);
  font-size: 10px;
}

.節の添え { color: var(--字のごく薄い); font-size: 13px; margin: 0 0 22px; }

/* ── 板（カード） ──────────────────────────── */

.板 {
  background: var(--面);
  border: 1px solid var(--縁);
  border-radius: var(--丸);
  padding: 22px;
}

/* ══════════════════════════════════════════════════════
   縁を、灯りが時計回りにめぐる
   ══════════════════════════════════════════════════════

   ⚠️ しくみ
     ① `@property` で角度を「アニメーションできる値」として登録する。
        これが無いと、円錐グラデーションの角度はぬるっと動かず、
        カクッと飛ぶ（ブラウザが角度を数として補間してくれないため）。
     ② 疑似要素いっぱいに円錐グラデーションを敷き、
        **中身をくり抜いて縁だけ残す**（mask を2枚重ねて exclude）。
     ③ 角度を 0→360deg へ回す。

   ⚠️ `@property` が使えないブラウザでは、疑似要素は光らない。
      **そのときも、板の `border` は残っているので枠は見える。**
      光り方が寂しくなるだけで、壊れない。

   ⚠️ 動きを減らす設定の人には回さない（いちばん下の指定で止まる）。 */

@property --めぐる角度 {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

@keyframes 縁をめぐる {
  to { --めぐる角度: 360deg; }
}

/* ⚠️ 課題図書の札は、めぐる灯りを付けない。
   枠も背景も持たない札なので、輪だけが宙に浮いて見える。
   （サムネイルの `.絵` が自分の枠を持っている） */
.板, .会話の板 { position: relative; }

.板::after,
.会話の板::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;                 /* 縁の太さ */
  background: conic-gradient(
    from var(--めぐる角度),
    transparent 0deg,
    transparent 232deg,
    rgba(199, 125, 255, 0.45) 280deg,
    var(--灯) 320deg,
    var(--水) 344deg,
    transparent 360deg
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
  animation: 縁をめぐる 7s linear infinite;
}

/* ⚠️ 全部が同時に回ると、点滅しているように見える。少しずつずらす */
.並び > *:nth-child(2)::after,
.数字たち > *:nth-child(2)::after,
.最新たち > *:nth-child(2)::after,
.新着の段 > *:nth-child(2)::after { animation-delay: -2.3s; }
.並び > *:nth-child(3)::after,
.最新たち > *:nth-child(3)::after { animation-delay: -4.6s; }

/* 会話の板は中身が長いので、めぐる灯りをすこし静かに */
.会話の板::after { animation-duration: 11s; opacity: 0.8; }

.並び {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

/* ── 幕の下：左に数字を2つ縦、右に「最新の…」 ────────── */

.幕の下 { display: grid; gap: 14px; }

/* ⚠️ 数字の欄は**狭く。**主役は右の「最新の…」のほう */
@media (min-width: 900px) {
  .幕の下 { grid-template-columns: 232px 1fr; align-items: stretch; }
}

.数字たち { display: grid; gap: 14px; align-content: start; }
.数字たち .板 { padding: 16px 18px; }
.数字たち .値 { font-size: 26px; }

@media (min-width: 900px) {
  .数字たち { grid-template-rows: auto auto; }
  .数字たち .板 { display: flex; flex-direction: column; justify-content: center; }
}

/* ── 最新の…：YouTube / note / X を横一列 ────────────── */

.最新たち {
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr;
}
@media (min-width: 620px) {
  .最新たち { grid-template-columns: repeat(3, 1fr); }
}

.最新の一つ {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  color: var(--字のごく薄い);
}

/* ⚠️ 何の欄かを、上に小さく出す。
   一度は消したが、**サムネイルや投稿文だけでは、どこのものか読み取れなかった。**
   （2026-09-06に戻した） */
.最新の一つ .項目名 {
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--字のごく薄い);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.最新の一つ .項目名 b {
  font-weight: 700;
  color: var(--灯);
  letter-spacing: 0.02em;
}
.最新の一つ.有り .項目名 { color: var(--字の薄い); }

.最新の一つ .なに {
  font-size: 13.5px;
  line-height: 1.7;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
}

/* ⚠️ Xは絵が無く、投稿の文だけ。**入る範囲でできるだけ出す。**
   （Xには、鍵なしで投稿を取ってくる口が無い。文は管理ページで貼る） */
.最新の一つ.文だけ .なに {
  -webkit-line-clamp: 9;
  line-clamp: 9;
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 13px;
}

/* サムネイル。16:9 に切り抜く（YouTubeの hqdefault は上下に余白があるため） */
.最新の一つ .絵 { display: block; }
.最新の一つ .絵 img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--丸の小);
  border: 1px solid var(--縁);
  background: rgba(0, 0, 0, 0.35);
}
.最新の一つ.有り:hover .絵 img { border-color: var(--縁の濃い); }

/* ⚠️ 貼っていないものは、押せないただの文字にする。
   リンクの色のまま押せないと、壊れているように見える */
.最新の一つ.有り { color: var(--字); }
.最新の一つ.有り:hover { color: #fff; }
.最新の一つ.有り:hover .なに { text-decoration: underline; }
/* ⚠️ 投稿の文に下線を引くと読みにくい。Xだけ引かない */
.最新の一つ.文だけ.有り:hover .なに { text-decoration: none; }
.最新の一つ:not(.有り) { cursor: default; }

/* ── 新着の段 ───────────────────────────── */

.新着の段 { display: grid; gap: 14px; }
@media (min-width: 760px) {
  .新着の段 { grid-template-columns: 1fr 1fr; }
}

.新着 {
  display: block;
  color: inherit;
  transition: border-color 0.18s, background 0.18s, transform 0.18s;
}
.新着[href]:hover {
  border-color: var(--縁の濃い);
  background: var(--面の上);
  transform: translateY(-2px);
  color: inherit;
}
/* ── New Book：絵と素性を横に並べる ─────────────────
   ⚠️ 狭い画面では縦に落とす。サムネイルは242px固定なので、
      札が狭いと素性を書く場所が数十pxしか残らない。 */
.新着 .本の素性 {
  display: grid;
  grid-template-columns: 242px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}
@media (max-width: 560px) {
  .新着 .本の素性 { grid-template-columns: 1fr; }
}

/* サムネイル。⚠️ 無い本があるので、JSが読めたときだけ hidden を外す。
   `[hidden]` は style.css の頭で `display:none !important` にしてある */
.新着 .絵 { display: block; margin-bottom: 0; }
.新着 .絵 img {
  display: block;
  /* ⚠️ 札いっぱいに広げない（2026-09-07）。
     主役は書名のほうで、絵は「どの本か」が分かれば足りる。
     ⚠️⚠️ **課題図書の列のサムネイルと、同じ大きさにそろえてある。**
        あちらは `.本の札` が 244px、枠が1pxずつで中身が 242px。
        片方だけ変えると、同じページに大小2種類の絵が並ぶ。
        ⚠️ 変えるときは、**必ず両方いっしょに。**
     ⚠️ 狭い画面では 242px も入らないので、width と両方で押さえる。 */
  width: 100%;
  max-width: 242px;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--丸の小);
  border: 1px solid var(--縁);
  background: rgba(0, 0, 0, 0.35);
}
.新着[href]:hover .絵 img { border-color: var(--縁の濃い); }

.新着 .中身 { display: flex; flex-direction: column; gap: 3px; }
.新着 .中身 .題 {
  font-size: 16px;
  line-height: 1.65;
  color: var(--字);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}
.新着 .中身 .添え { font-size: 12.5px; color: var(--字のごく薄い); }

/* New Book の中身。⚠️ **上から、大事な順に。**
   書名 → 著者 → 出版社と出版年 → 概要 → 公開日 */
.新着 .中身 .著者 { font-size: 12.5px; color: var(--字の薄い); }
.新着 .中身 .素性 { font-size: 12.5px; color: var(--字のごく薄い); }
.新着 .中身 .日 {
  font-size: 11.5px;
  color: var(--字のごく薄い);
  margin-top: 8px;
}

/* 概要。⚠️ 絵と素性の**下いっぱい**に出す */
.新着 .概要 {
  font-size: 13px;
  line-height: 1.9;
  color: var(--字の薄い);
  margin-top: 16px;
  /* ⚠️ 200字ならおよそ6行に収まる。長い概要で札が伸びないよう、ここで止める。
     ⚠️ 切ったときの「…」は `-webkit-line-clamp` が自分で付ける。
        ⚠️ 中身は消していないので、本のページでは全部読める。 */
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 6;
  line-clamp: 6;
  -webkit-box-orient: vertical;
}
.新着 .概要:empty { display: none; }

/* 数字のタイル */
.数字 .値 {
  font-size: 30px;
  font-weight: 700;
  line-height: 1.25;
  font-variant-numeric: tabular-nums;
}
.数字 .名 { font-size: 12.5px; color: var(--字のごく薄い); letter-spacing: 0.08em; }
.数字 .記号 { color: var(--灯); font-size: 13px; }

/* ── 課題図書：横に流れる列 ───────────────────── */

.列の頭 {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 18px;
}

.頭の右 { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.矢たち { display: flex; gap: 8px; flex: 0 0 auto; }

.矢 {
  width: 34px; height: 34px;
  padding: 0;
  line-height: 1;
  font-size: 20px;
  border-radius: 50%;
  background: var(--面);
  border: 1px solid var(--縁);
  color: var(--字の薄い);
}
.矢:hover:enabled { background: var(--面の上); border-color: var(--縁の濃い); color: #fff; filter: none; }

.列 {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  /* ⚠️ 吸い付き（scroll-snap）はやめた（2026-09-08）。
     ゆっくり流しつづける形にしたので、**毎こま吸い戻されて震える。** */
  scroll-padding-left: 2px;
  padding-bottom: 6px;
  /* ⚠️ 横の巻物は隠す。矢印と指で送るため、出ていると邪魔になる */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.列::-webkit-scrollbar { display: none; }
/* ⚠️ 輪にするために複製した札。**中身は本物と同じ。**
   読み上げとタブ送りからは外してある（トップ.js）。 */
.本の札.写し { pointer-events: auto; }
.列:focus-visible { outline: 1px solid var(--縁の濃い); outline-offset: 4px; }

.本の札 {
  flex: 0 0 auto;
  width: 244px;
  scroll-snap-align: start;
  display: block;
  color: inherit;
  transition: transform 0.18s;
}
.本の札:hover { color: inherit; transform: translateY(-3px); }

/* サムネイル。16:9 */
.本の札 .絵 {
  display: block;
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--丸の小);
  border: 1px solid var(--縁);
  background: rgba(0, 0, 0, 0.35);
  overflow: hidden;
}
.本の札 .絵 img { display: block; width: 100%; height: 100%; object-fit: cover; }
.本の札:hover .絵 { border-color: var(--縁の濃い); }

/* ⚠️ サムネイルが無い本もある。**そのときも札として成立させる。**
   `.絵がない` は、画像が出せなかったときに index.html が付ける */
.本の札 .絵 .代わり {
  display: none;
  position: absolute;
  inset: 0;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: var(--灯);
  background:
    radial-gradient(120% 120% at 50% 0%, rgba(157, 78, 221, 0.22), transparent 70%);
}
.本の札 .絵.絵がない .代わり { display: flex; }

.本の札 .名札 {
  display: block;
  margin-top: 10px;
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--字の薄い);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}
.本の札:hover .名札 { color: var(--字); }

/* ── 一覧へ ───────────────────────────────
   ⚠️ 列の見出しの右に置く。NetflixやPrime Videoで
      「すべて見る」が並びの頭に付いているのと同じ場所。 */
.一覧へ {
  font-size: 12.5px;
  letter-spacing: 0.04em;
  color: var(--字の薄い);
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid var(--縁);
  white-space: nowrap;
}
.一覧へ:hover {
  color: #fff;
  background: var(--面の上);
  border-color: var(--縁の濃い);
}

/* ── 課題図書一覧：探す欄 ───────────────────── */

.探す欄 {
  display: grid;
  gap: 16px 20px;
  align-items: end;
  grid-template-columns: 1fr;
}
@media (min-width: 760px) {
  .探す欄 { grid-template-columns: 1.6fr 1fr; }
}
@media (min-width: 1000px) {
  /* 探す／並び替え／公開日／出版年 を一列に */
  .探す欄 { grid-template-columns: 1.5fr 1fr 1.1fr 0.9fr; }
}

.探す段 { display: flex; flex-direction: column; gap: 6px; min-width: 0; }

.探す段 label {
  font-size: 12.5px;
  letter-spacing: 0.06em;
  color: var(--字のごく薄い);
}

.探す欄 input[type="search"],
.探す欄 input[type="date"],
.探す欄 input[type="number"],
.探す欄 select {
  font-family: inherit;
  font-size: 14px;
  color: var(--字);
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--縁);
  border-radius: var(--丸の小);
  padding: 8px 12px;
  min-width: 0;
  width: 100%;
}
.探す欄 input:focus, .探す欄 select:focus {
  outline: none;
  border-color: var(--灯の濃い);
  box-shadow: 0 0 0 3px rgba(157, 78, 221, 0.16);
}

.はんい { display: flex; align-items: center; gap: 6px; min-width: 0; }
.はんい .なみ { color: var(--字のごく薄い); flex: 0 0 auto; }

.探した結果 {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding-top: 4px;
  border-top: 1px solid var(--縁);
  font-size: 13px;
  color: var(--字の薄い);
}
.探した結果 button { padding: 6px 16px; font-size: 12.5px; }

/* ── 課題図書一覧のページ ────────────────────── */

.本の棚 { display: grid; gap: 16px; }
@media (min-width: 700px)  { .本の棚 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .本の棚 { grid-template-columns: 1fr 1fr 1fr; } }

.棚の一冊 {
  display: block;
  color: inherit;
  transition: transform 0.18s;
}
.棚の一冊:hover { color: inherit; transform: translateY(-3px); }

.棚の一冊 .絵 {
  display: block;
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--丸の小);
  border: 1px solid var(--縁);
  background: rgba(0, 0, 0, 0.35);
  overflow: hidden;
}
.棚の一冊 .絵 img { display: block; width: 100%; height: 100%; object-fit: cover; }
.棚の一冊:hover .絵 { border-color: var(--縁の濃い); }

/* サムネイルが無い本のための札（`.絵がない` は books.html が付ける） */
.棚の一冊 .絵 .代わり {
  display: none;
  position: absolute;
  inset: 0;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: var(--灯);
  background:
    radial-gradient(120% 120% at 50% 0%, rgba(157, 78, 221, 0.22), transparent 70%);
}
.棚の一冊 .絵.絵がない .代わり { display: flex; }

.棚の一冊 .中身 { display: flex; flex-direction: column; gap: 4px; margin-top: 11px; }
.棚の一冊 .題 { font-size: 15px; line-height: 1.6; color: var(--字); }
.棚の一冊 .添え { font-size: 12.5px; color: var(--字のごく薄い); }
.棚の一冊 .概要 {
  font-size: 13px;
  line-height: 1.75;
  color: var(--字の薄い);
  margin-top: 4px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
}
.棚の一冊 .日 { font-size: 12.5px; color: var(--字のごく薄い); margin-top: 4px; }

/* 小さな印（YouTube／note のあるなし） */
.印たち { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 10px; }
.印 {
  font-size: 11px;
  letter-spacing: 0.05em;
  padding: 2px 9px;
  border-radius: 999px;
  border: 1px solid var(--縁);
  color: var(--字の薄い);
}
.印.有り { border-color: var(--縁の濃い); color: var(--灯の淡い); }

/* ── 本のページ ───────────────────────────── */

.外への戸 { display: flex; gap: 10px; flex-wrap: wrap; margin: 0 0 8px; }
.外への戸 a, .外への戸 span {
  font-size: 13.5px;
  padding: 6px 15px;
  border-radius: 999px;
  border: 1px solid var(--縁);
  background: var(--面);
}
.外への戸 a:hover { border-color: var(--縁の濃い); background: var(--面の上); }
.外への戸 .無い { color: var(--字のごく薄い); }

/* 左に本、右にコメント。
   ⚠️ 見出しも左の板に入っているので、**チャットはいちばん上から始まる**
      （2026-09-07。前は上に見出しの帯があり、そのぶん下から始まっていた）。 */
.二枚 {
  display: grid;
  gap: 18px;
  align-items: start;
  padding: 30px 0 70px;
}
/* ⚠️⚠️ **狭い画面では、チャットを先に出す。**（2026-09-08）
   前は、書影・素性・YouTube・note・Rules を全部スクロールしないと
   チャットに届かなかった。375pxで測ったら **1,299px（1.6画面ぶん）下**、
   書き込み欄は **1,652px（2画面ぶん）下**にあった。
   このページの用は「GEMuと話すこと」なので、そこを先に出す。
   ⚠️ HTMLの並びは変えていない（読み上げの順と、広い画面の見た目のため）。 */
@media (max-width: 979px) {
  .二枚 { display: flex; flex-direction: column; }
  .二枚 > .会話の板 { order: 1; }
  .二枚 > .左の板 { order: 2; }
}

@media (min-width: 980px) {
  .二枚 { grid-template-columns: 300px 1fr; }
  /* ⚠️ 左は貼り付けない（sticky にしない）。
     書影・YouTube・note・Rules と縦に長くなったので、
     貼り付けると画面より高くなって、下のほうが読めなくなる。 */
}

/* ── 左の板：本の素性 ───────────────────────── */

.左の板 > .板 + .板 { margin-top: 14px; }

/* ⚠️⚠️ **書影の枠は、どの本でも同じ大きさ。**
   表紙の縦横比は本によってちがう（0.60〜0.70）。
   `contain` なので**潰れも切れもしない。**余った側に地の色が見える。
   ⚠️ `cover` にしないこと。切ると、題字や著者名が枠の外へ出る。 */
.書影 {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 240px;
  margin-bottom: 16px;
  padding: 10px;
  border-radius: var(--丸の小);
  border: 1px solid var(--縁);
  background: rgba(0, 0, 0, 0.35);
}
.書影 img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  border-radius: 2px;
}

.本の素性の板 h1 {
  font-family: var(--明朝);
  /* ⚠️ ページの主題なので、小さくしない。左は300pxだが26pxまでは収まる */
  font-size: clamp(21px, 2vw, 26px);
  font-weight: 600;
  line-height: 1.5;
  margin: 0 0 14px;
}

/* 著者・出版社・出版年。⚠️ 名前と中身を2列に */
dl.素性 {
  display: grid;
  grid-template-columns: 4.5em minmax(0, 1fr);
  gap: 6px 10px;
  margin: 0;
  font-size: 13px;
}
dl.素性 dt {
  color: var(--字のごく薄い);
  font-size: 12.5px;
  letter-spacing: 0.06em;
  padding-top: 2px;
}
dl.素性 dd { margin: 0; color: var(--字の薄い); font-size: 14px; line-height: 1.7; }

/* 概要。⚠️ **書名のすぐ下。**
   「何の本か」を読んでから素性（著者・出版社・出版年）に降りるほうが、
   目の動きが素直である。トップと一覧には出ていたのに、
   **本を選ぶこのページにだけ無かった**（2026-09-08に足した）。 */
.本の素性の板 .概要 {
  font-size: 14.5px;
  line-height: 1.95;
  color: var(--字の薄い);
  margin: 0 0 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--縁);
}
.本の素性の板 .概要:empty { display: none; }

.本の素性の板 .外への戸 { margin: 16px 0 0; }

/* ⚠️ 公開日は本の素性ではない。**線で切り離す。**
   出版年のすぐ下に数字の年が並ぶと、どちらの年か分からなくなる。 */
.読んだ日 {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 16px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--縁);
}
.読んだ日 .名 {
  font-size: 12.5px;
  letter-spacing: 0.06em;
  color: var(--字のごく薄い);
}
.読んだ日 .日 { font-size: 14px; color: var(--字の薄い); }

/* ── 左の板：YouTube と note ─────────────────
   ⚠️ トップページの「最新の…」と同じ見た目にしてある（`.最新の一つ`）。
      同じものが2か所で違う顔をしていると、別のものに見える。 */
/* ⚠️⚠️ **本のページでは、札を横並びにして詰める。**（2026-09-08）
   トップページと同じ縦積み（サムネイル270px幅）だと、
   1枚256px。YouTubeとnoteで512pxになり、
   **左の板だけが1,482px、チャットは604px**という開きになっていた。
   サムネイルは残したまま、小さくして横に置く。
   ⚠️ トップページの `.最新の一つ` は縦積みのまま。あちらは札が主役で、幅もある。 */
.本の外.最新の一つ {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 4px 12px;
  align-items: center;
}
.本の外.最新の一つ .項目名 { grid-column: 1 / -1; margin-bottom: 2px; }
.本の外.最新の一つ .絵 img { width: 112px; }
.本の外.最新の一つ .なに {
  font-size: 13.5px;
  line-height: 1.7;
  /* ⚠️ 長い題で札が伸びないよう、3行で止める */
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
}
/* 絵が無いときは、題を1列いっぱいに */
.本の外.最新の一つ .絵:empty + .なに { grid-column: 1 / -1; }

.本の外 { display: block; color: inherit; }
a.本の外:hover { border-color: var(--縁の濃い); background: var(--面の上); color: #fff; }
a.本の外:hover .なに { text-decoration: underline; }
.本の外 .絵:empty { display: none; }

/* ⚠️ リンクは貼ってあるが、**まだ読めない**とき（記事が非公開など）。
   押せる顔をさせない。押しても404では、貼っていないより悪い。 */
.本の外.まだ { cursor: default; }
.本の外.まだ:hover { border-color: var(--縁); background: var(--面); color: inherit; }
.本の外 .これから {
  display: inline-block;
  margin-top: 4px;
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: var(--灯の淡い);
  border: 1px solid var(--縁の濃い);
  border-radius: 999px;
  padding: 2px 11px;
}

/* ⚠️ `.GEMuの札` は 2026-09-07 に外した（配信者の判断）。
   `public/gemu.png` は残してある。戻すときは book.html に札を足すこと。 */

/* ── 会話 ───────────────────────────────── */

.会話の板 { padding: 0; overflow: hidden; }

.板の頭 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 18px;
  border-bottom: 1px solid var(--縁);
  font-size: 12.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--灯);
}
.板の頭 .右 {
  margin-left: auto;
  text-transform: none;
  letter-spacing: 0;
  font-size: 11.5px;
  color: var(--字のごく薄い);
}

.いる人 {
  padding: 9px 18px;
  border-bottom: 1px solid var(--縁);
  font-size: 12.5px;
  color: var(--字のごく薄い);
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: baseline;
}
.いる人 .名 { color: var(--字の薄い); }

/* ⚠️ 誰もいないときは、低くする。
   260pxの空白に2行だけでは、**いちばん最初に来た人が見るのが「空っぽ」**になる。
   代わりに、書き出しやすい呼び水を置いてある（app.js）。 */
.やり取り.空 { min-height: 0; }
/* ⚠️ 話が始まったら、**ある程度の高さを持たせる。**
   左の板（書影・概要・素性・YouTube・note・Rules）は縦に長いので、
   右が低いままだと、右half が空いて見える。 */
@media (min-width: 980px) {
  .やり取り:not(.空) { min-height: 460px; }
}
.空の誘い {
  text-align: center;
  padding: 26px 18px 30px;
}
.空の誘い .顔 {
  width: 54px; height: 54px;
  border-radius: 50%;
  border: 1px solid var(--縁の濃い);
  display: block;
  margin: 0 auto 14px;
}
.空の誘い .ひとこと {
  font-size: 15px;
  line-height: 1.9;
  color: var(--字);
  margin: 0 0 8px;
}
.空の誘い .そえ {
  font-size: 12.5px;
  line-height: 1.9;
  color: var(--字の薄い);
  margin: 0;
}

.やり取り {
  padding: 16px 18px;
  max-height: 58vh;
  min-height: 260px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--縁の濃い) transparent;
}
.やり取り::-webkit-scrollbar { width: 8px; }
.やり取り::-webkit-scrollbar-thumb {
  background: var(--縁の濃い); border-radius: 4px;
}

.一通 { margin-bottom: 16px; }
.一通:last-child { margin-bottom: 0; }

.一通 .名札 {
  font-size: 12.5px;
  letter-spacing: 0.03em;
  margin-bottom: 3px;
  display: flex;
  align-items: baseline;
  gap: 8px;
}
/* GEMuの顔。⚠️ **丸く出すのはここ。**元の絵は正方形のままで構わない
   （角に白が残っていても、丸く切られて見えない）。 */
.一通 .顔 {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--縁の濃い);
  background: var(--面);
}
/* ⚠️ 顔は22px。`baseline` で並べると名前が顔の底に沿って沈むので、
   GEMuの行だけ**真ん中で**そろえる。 */
.一通.GEMu .名札 { align-items: center; }

.一通 .時 { font-size: 11.5px; color: var(--字のごく薄い); }
.一通 .自分の印 {
  font-size: 10px;
  color: var(--字のごく薄い);
  border: 1px solid var(--縁);
  border-radius: 999px;
  padding: 0 7px;
}

.一通 .本文 {
  white-space: pre-wrap;
  word-break: break-word;
  /* ⚠️ ここが読書会の中身そのもの。**いちばん大きくてよい**（2026-09-08） */
  font-size: 15.5px;
  line-height: 1.9;
  padding: 11px 15px;
  border-radius: var(--丸の小);
  background: var(--面);
  border: 1px solid var(--縁);
}

.一通.GEMu .名札 { color: var(--灯); }
.一通.GEMu .本文 {
  background: linear-gradient(180deg,
    rgba(157, 78, 221, 0.13), rgba(157, 78, 221, 0.05));
  border-color: var(--縁の濃い);
}

.まだ何も { color: var(--字のごく薄い); font-size: 13.5px; padding: 40px 4px; text-align: center; }

.考え中 {
  font-size: 12.5px;
  color: var(--灯の淡い);
  padding: 10px 18px;
  border-top: 1px solid var(--縁);
}
.考え中 .粒 {
  display: inline-block;
  width: 6px; height: 6px;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--灯);
  animation: またたく 1.25s ease-in-out infinite;
}
@keyframes またたく { 0%,100% { opacity: 0.25; } 50% { opacity: 1; } }

/* ── 書く欄 ───────────────────────────────── */

.書く欄 { padding: 16px 18px 18px; border-top: 1px solid var(--縁); }

.名の段 { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 10px; }

.書く欄 label { font-size: 12.5px; color: var(--字のごく薄い); letter-spacing: 0.06em; }

.書く欄 input[type="text"],
.書く欄 input[type="password"],
.書く欄 textarea,
.書く欄 select {
  font-family: inherit;
  font-size: 15px;
  color: var(--字);
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--縁);
  border-radius: var(--丸の小);
  padding: 8px 12px;
}
.書く欄 input:focus, .書く欄 textarea:focus, .書く欄 select:focus {
  outline: none;
  border-color: var(--灯の濃い);
  box-shadow: 0 0 0 3px rgba(157, 78, 221, 0.16);
}
.書く欄 input[type="text"], .書く欄 input[type="password"] { width: 12em; }
.書く欄 select { width: 6.5em; }

/* 狭い画面では、名前の欄が折り返して「色」だけ次の行に落ちる。
   入力欄のほうを縮めて、一行に収める */
@media (max-width: 520px) {
  .名の段 { gap: 7px; }
  .書く欄 input[type="text"] { flex: 1 1 6em; width: auto; min-width: 0; }
  .書く欄 select { width: 5.4em; }
}
.書く欄 textarea {
  width: 100%;
  min-height: 4.6em;
  resize: vertical;
  line-height: 1.8;
}

.下の段 { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 10px; }

button {
  font-family: inherit;
  font-size: 13.5px;
  letter-spacing: 0.06em;
  padding: 9px 24px;
  border-radius: 999px;
  border: 1px solid var(--縁の濃い);
  background: linear-gradient(180deg, rgba(157, 78, 221, 0.32), rgba(157, 78, 221, 0.16));
  color: var(--字);
  cursor: pointer;
  transition: filter 0.16s, opacity 0.16s;
}
button:hover:enabled { filter: brightness(1.28); }
button:disabled { opacity: 0.42; cursor: default; }

button.控えめ {
  background: var(--面);
  border-color: var(--縁);
  color: var(--字の薄い);
  padding: 9px 17px;
}

.字数 { font-size: 12.5px; color: var(--字のごく薄い); font-variant-numeric: tabular-nums; }
.字数.超えた { color: #ff8fa3; }

.自動の断り { font-size: 12px; color: var(--字のごく薄い); margin-left: auto; }

/* ⚠️ 「発言は公開されます」は、書く欄のすぐそばに出すこと（引き継ぎメモ第6節#5） */
.公開の断り {
  font-size: 12.5px;
  line-height: 1.75;
  color: var(--字のごく薄い);
  margin: 12px 0 0;
  padding: 9px 12px;
  border-radius: var(--丸の小);
  border: 1px solid var(--縁);
  background: rgba(0, 0, 0, 0.22);
}
.公開の断り strong { color: var(--字の薄い); }

.報せ {
  font-size: 13px;
  margin: 10px 0 0;
  padding: 9px 12px;
  border-radius: var(--丸の小);
  border: 1px solid rgba(255, 143, 163, 0.35);
  background: rgba(255, 143, 163, 0.08);
  color: #ffc2cd;
}
.報せ:empty { display: none; }

/* ── 裾 ─────────────────────────────────── */

footer.裾 {
  border-top: 1px solid var(--縁);
  margin-top: 40px;
  padding: 26px 0 60px;
  font-size: 12px;
  color: var(--字のごく薄い);
}
footer.裾 a { color: var(--字の薄い); }

/* ── 動きを減らす設定の人には、動かさない ─────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }

  /* ⚠️ 縁をめぐる灯りは、**止めるのではなく消す。**
     止めるとどこかの角度で固まって、片側だけ光った歪な枠になる。
     消しても `border` は残るので、枠はちゃんと見える。 */
  .板::after, .会話の板::after { display: none; }
}

/* ── 管理ページ：課題図書の一覧 ─────────────────────
   ⚠️ **一冊ずつ畳んでおく。**
      千冊を全部フォームで開くと、入力欄が一万を超えて、画面が開かなくなる。
      行だけ並べ、押した一冊だけを開く。 */

.本を探す欄 { margin-top: 4px; }

.本の行 {
  border: 1px solid var(--縁);
  border-radius: var(--丸の小);
  background: var(--面);
  margin-bottom: 8px;
  overflow: hidden;
}
.本の行.開いている { border-color: var(--縁の濃い); background: var(--面の上); }

.行の頭 {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  padding: 9px 12px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--字);
  letter-spacing: normal;
}
.行の頭:hover:enabled { filter: none; background: rgba(157, 78, 221, 0.08); }

.行の絵 {
  flex: 0 0 auto;
  width: 56px; height: 32px;
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid var(--縁);
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
/* ⚠️ 「◆」は always 置いておき、画像をその上にかぶせる。
   サムネイルが無い本では admin.js が img を外すので、下の「◆」が出る。 */
.行の絵 { position: relative; }
.行の絵 img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.行の絵 .代わり { font-size: 11px; color: var(--縁の濃い); }

.行の中 { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }

.行の題 {
  font-size: 13.5px;
  line-height: 1.5;
  /* ⚠️ 長い書名で行が崩れないように、一行で切る */
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.行の題 .無題 { color: var(--字のごく薄い); }

.行の添え {
  font-size: 11px;
  color: var(--字のごく薄い);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.行の添え code { font-size: 11px; color: var(--灯の淡い); }

.行の印 { flex: 0 0 auto; display: flex; gap: 6px; align-items: center; }
.行の印 .印 { margin: 0; white-space: nowrap; }

.行のしるし {
  flex: 0 0 auto;
  font-size: 11px;
  color: var(--字のごく薄い);
  transition: transform 0.16s;
}
.本の行.開いている .行のしるし { transform: rotate(180deg); }

/* 狭い画面では、印と絵を落として題名だけにする */
@media (max-width: 620px) {
  .行の絵 { display: none; }
  .行の印 .印.任意 { display: none; }
}

.行の中身 { border-top: 1px solid var(--縁); }
.行の中身 .書く欄 { border-top: 0; }

/* 直したまま保存していないときの目印。⚠️ 閉じる前に気づけるように */
.本の行.直しかけ .行の題::after {
  content: '●';
  color: var(--灯);
  font-size: 9px;
  margin-left: 8px;
  vertical-align: 2px;
}

.めくり {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 14px;
  font-size: 12.5px;
  color: var(--字の薄い);
  font-variant-numeric: tabular-nums;
}
.めくり button { padding: 7px 16px; font-size: 12.5px; }

.まだ何も.小さめ { padding: 26px 0; font-size: 13px; }

/* ── トップページの看板（幕開きの絵） ─────────────────
   ⚠️ 題名は絵の中にある。**文字としては alt にだけ残っている。**
      消したり、alt を空にしたりしないこと。 */

.看板 { margin: 0; line-height: 0; }

.看板 img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--丸);
  border: 1px solid var(--縁);
  /* ⚠️ 縦横を属性で入れてあるので、届く前でも場所が確保される。
     入れないと、絵が来た瞬間に下の文が飛ぶ（レイアウトシフト） */
}

/* ⚠️ 狭い画面では、絵の中の一文が小さすぎて読めない。
   そこだけ、同じ一文を字で出す。広い画面では絵の中にあるので出さない。 */
.看板の言葉 { display: none; }

@media (max-width: 699px) {
  .看板の言葉 {
    display: block;
    margin: 18px 0 16px;
    font-size: 17px;
    line-height: 1.85;
    color: var(--字);
    letter-spacing: 0.02em;
  }
}