/* 奇天烈倶楽部 — サブカル辞典の部屋（/culture だけで読む。tools/build-culture.mjs が <link> する）
 *
 * 辞典を「資料室」として組む。色は style.css の墨と紙だけで、朱は印にしか使わない。
 *   書架       … 分類を背表紙にして、棚ごとに板の上へ立てる。触れると少し手前に引き出される
 *   引き出し   … 部立てと五十音を、目録箱の引き出しの札にする
 *   目録カード … 見出し語を一枚ずつのカードにする。見出し語のページは、机に出した一枚
 */

/* ================================================================== *
 * 書架
 * ================================================================== */
.cx-room-sec { margin: var(--sp-7) 0 var(--sp-8); }
.cx-room-sec .section-head,
.cx-others .section-head { margin-bottom: var(--sp-5); }

/* 枠と棚板は墨。段の間の隙間から枠の色が見えるので、棚が縦横に仕切られて見える */
.cx-case {
  --board: var(--ink);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 21rem), 1fr));
  gap: 7px 6px;
  padding: 6px;
  background: var(--board);
  box-shadow: 0 10px 18px -12px rgba(28, 26, 23, 0.45);
}
html.is-night .cx-case { --board: #3a352c; box-shadow: none; }

.cx-case-shelf {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: var(--sp-3) clamp(12px, 2vw, 20px) 0;
  background:
    linear-gradient(rgba(28, 26, 23, 0.1), transparent 22px),
    var(--paper-deep);
}
html.is-night .cx-case-shelf { background: linear-gradient(rgba(0, 0, 0, 0.35), transparent 22px), var(--paper-deep); }
.cx-case-t {
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--ink-mute);
}
.cx-case-t small { margin-left: 10px; font-family: var(--latin); font-size: var(--fs-sm); letter-spacing: 0.04em; }

.cx-books {
  list-style: none;
  margin: 0;
  margin-top: auto;
  padding: var(--sp-4) 0 0;
  display: flex;
  align-items: flex-end;
  gap: 3px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.cx-books::-webkit-scrollbar { display: none; }
.cx-books li { flex: 0 0 auto; display: flex; }

/* 背表紙 */
.cx-book {
  --link-rule: transparent;
  --face: var(--paper-hi);
  --letter: var(--ink);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  width: var(--w);
  height: var(--h);
  padding: 1.5em 0 0.7em;
  font-size: 0.95rem;
  color: var(--letter);
  background: var(--face);
  border: 1px solid var(--ink);
  border-bottom: 0;
  text-decoration: none;
  transition: transform 0.25s ease;
}
/* 背の上下に刷った二本の罫 */
.cx-book::before,
.cx-book::after {
  content: "";
  position: absolute;
  left: 3px;
  right: 3px;
  height: 3px;
  border-top: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  opacity: 0.55;
}
.cx-book::before { top: 0.55em; }
.cx-book::after { bottom: 2.3em; }
.cx-book.is-dark { --face: var(--ink); --letter: var(--paper); }
.cx-book.is-cloth {
  --face: var(--paper-deep);
  background-image: repeating-linear-gradient(90deg, transparent 0 2px, var(--rule) 2px 3px);
}
.cx-book-t {
  writing-mode: vertical-rl;
  text-orientation: upright;
  font-weight: 600;
  letter-spacing: 0.1em;
  line-height: 1;
}
.cx-book-n {
  font-family: var(--latin);
  font-size: 0.8rem;
  line-height: 1;
  letter-spacing: 0;
  opacity: 0.8;
}
.cx-book:hover,
.cx-book:focus-visible { transform: translateY(-9px); }
.cx-book:focus-visible { outline: 2px solid var(--shu); outline-offset: 2px; }
/* いま読んでいる分類は、引き出したままにして朱の圏点を打つ */
.cx-book[aria-current="page"] { transform: translateY(-14px); }
.cx-book[aria-current="page"] .cx-book-n::before {
  content: "";
  display: block;
  width: 5px;
  height: 5px;
  margin: 0 auto 7px;
  border-radius: 50%;
  background: var(--shu);
}

/* ================================================================== *
 * 引き出し（部立て・五十音）
 * ================================================================== */
.cx-toc ol { border-bottom: 0; gap: 6px; }
.cx-toc a {
  position: relative;
  padding: var(--sp-3) var(--sp-3) 20px;
  background: var(--paper-hi);
  border: 1px solid var(--rule-strong);
  box-shadow: inset 0 0 0 4px var(--paper-hi), inset 0 0 0 5px var(--rule);
}
/* 引き手 */
.cx-toc a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 7px;
  width: 22px;
  height: 5px;
  margin-left: -11px;
  border: 1px solid var(--rule-strong);
  border-top: 0;
  border-radius: 0 0 6px 6px;
}
.cx-toc a:hover { border-color: var(--ink); }

/* 目録箱。引き出しを一つの箱に隙間なく並べる */
.cx-kana { padding: var(--sp-2) 0; border-bottom: 0; }
.cx-kana ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(2.6em, 1fr));
  gap: 4px;
  padding: 4px;
  background: var(--paper-deep);
  border: 1px solid var(--rule-strong);
  box-shadow: 0 6px 10px -8px rgba(28, 26, 23, 0.4);
}
.cx-kana a, .cx-kana span {
  position: relative;
  min-width: 0;
  padding: 6px var(--sp-1) 13px;
  border: 1px solid var(--rule-strong);
  background: var(--paper-hi);
}
.cx-kana a::after,
.cx-kana span::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 4px;
  width: 12px;
  height: 4px;
  margin-left: -6px;
  border: 1px solid var(--rule-strong);
  border-top: 0;
  border-radius: 0 0 4px 4px;
}
.cx-kana a:hover { border-color: var(--ink); }

.cx-cards-head { margin: var(--sp-7) 0 0; }
.cx-cards-head + .cx-tools { border-top: 0; }

/* ================================================================== *
 * 目録カード（分類のページの見出し語）
 * ================================================================== */
.cx-list { padding-top: var(--sp-3); }
.cx-item {
  position: relative;
  margin-bottom: var(--sp-3);
  padding: 22px var(--sp-5) 26px;
  background: var(--paper-hi);
  border: 1px solid var(--rule);
  border-top: 3px double var(--rule-strong);
}
.cx-item:target { background-color: var(--paper-hi); box-shadow: inset 3px 0 0 var(--shu); }
.cx-d1, .cx-d2, .cx-d3, .cx-d4 { border-left: 1px solid var(--rule); padding-left: var(--sp-5); }
.cx-d1::before, .cx-d2::before, .cx-d3::before, .cx-d4::before {
  content: "";
  position: absolute;
  left: -1em;
  top: -13px;
  bottom: 50%;
  width: calc(1em - 1px);
  border-left: 1px solid var(--rule-strong);
  border-bottom: 1px solid var(--rule-strong);
}

/* ================================================================== *
 * 机に出した一枚（見出し語のページ）
 * ================================================================== */
.cx-art {
  position: relative;
  padding: var(--sp-6) clamp(20px, 4vw, var(--sp-7)) var(--sp-7);
  background: var(--paper-hi);
  border: 1px solid var(--rule-strong);
  box-shadow: 5px 6px 0 -1px var(--paper-deep), 5px 6px 0 0 var(--rule);
}
/* 目録カードの綴じ穴 */
.cx-art::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 14px;
  width: 12px;
  height: 12px;
  margin-left: -6px;
  border-radius: 50%;
  background: var(--paper);
  box-shadow: inset 1px 1px 2px var(--rule-strong);
}
.cx-art .cx-meta { margin-top: 0; border-top: 0; }
html.is-night .cx-fig { background: var(--paper-deep); }

@media (max-width: 720px) {
  .cx-case { padding: 4px; gap: 5px; }
  .cx-case-shelf { padding: var(--sp-3) 10px 0; }
  .cx-books { gap: 2px; }
  .cx-book { font-size: 0.82rem; }
  .cx-item { padding: 18px var(--sp-4) 22px; }
  .cx-d1, .cx-d2, .cx-d3, .cx-d4 { padding-left: var(--sp-4); }
  .cx-d1::before, .cx-d2::before, .cx-d3::before, .cx-d4::before { left: -0.5em; width: calc(0.5em - 1px); }
  .cx-kana a, .cx-kana span { padding: 5px 2px 12px; }
}