/* アイテム一覧（/items/）。攻略ハブの部品（guide-hubs.css の gh-）に足す分だけ。クラス名は it- 接頭辞だけを使う。
   章は罫線と余白で分け、カードで囲まない。角丸は8px以下。色は共通トークンだけ。390px幅で横にはみ出さない。 */
.it-page .gh-eyebrow .gh-state { margin-left: 6px; vertical-align: 1px; }
.item-category-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 20px; }
.item-category-card { min-width: 0; padding: 0 0 14px; border-bottom: 1px solid var(--line); }
.item-category-card h3 { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; margin: 0; font-size: 1.05rem; line-height: 1.45; }
.item-category-card p { margin: 7px 0 0; font-size: var(--text-body-sm, .9rem); line-height: 1.65; }
.item-category-card .item-category-examples { color: var(--muted); font-size: var(--text-sm, .82rem); }
.item-category-card .gh-cell-note { margin-left: 0; }
.card-illust { aspect-ratio: 3 / 2; width: 100%; object-fit: cover; display: block; margin-bottom: 10px; }
.it-facts { margin: 12px 0 0; padding: 0; list-style: none; }
.it-facts > li { padding: 10px 0; border-top: 1px solid var(--line); }
.it-facts > li > p { margin: 0 0 4px; line-height: 1.75; }
.it-src { display: block; margin: 6px 0 0; color: var(--muted); font-size: .8rem; line-height: 1.6; }
.it-src > span:first-child { margin-right: 8px; font-weight: 700; color: var(--ink); }
.it-src a { color: var(--accent-2); }
.it-label { margin: 10px 0 2px; color: var(--muted); font-size: .8rem; font-weight: 700; }
.it-text { margin: 4px 0 0; font-size: 1rem; line-height: 1.8; }
.it-name { margin: 10px 0 0; font-size: 1.1rem; font-weight: 800; }
.it-sources { margin: 12px 0 0; padding: 0; list-style: none; }
.it-sources > li { padding: 8px 0; border-top: 1px solid var(--line); }
.it-sources .gh-cell-note { margin-top: 2px; }
.it-keep-table th[scope="row"] { width: 9rem; white-space: nowrap; }
/* 表の文字は共通の文字の大きさ（styles.css の --text-table、14px）。guide-hubs.css の .92rem（14.72px）を上書きする */
.it-page .gh-table, .it-page .gh-table tbody th, .it-page .gh-table td { font-size: var(--text-table); }
/* 確認の札は文字の幅のまま（スマートフォンの縦並びの表で、格子の幅いっぱいに伸ばさない） */
.it-page .gh-table td > .gh-state { justify-self: start; align-self: start; width: auto; }
/* 入手の履歴（時期・催し・条件の表） */
.it-history-when { white-space: nowrap; }
@media (max-width: 720px) {
  .item-category-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 14px; }
  .it-page .it-keep-table { display: table; }
  .it-page .it-keep-table thead { position: static; width: auto; height: auto; overflow: visible; clip: auto; display: table-header-group; }
  .it-page .it-keep-table tbody { display: table-row-group; }
  .it-page .it-keep-table tr { display: table-row; padding: 0; border-bottom: 0; }
  .it-page .it-keep-table th, .it-page .it-keep-table td { display: table-cell; width: auto; padding: 8px 10px 8px 0; border-bottom: 1px solid var(--line); font-size: var(--text-table); }
  .it-page .it-keep-table th[scope="row"] { width: 7.2rem; }
  .it-page .it-keep-table td::before { content: none; }
}
@media (min-width: 721px) {
  .it-page .gh-table tbody th[scope="row"] { white-space: nowrap; padding-right: 16px; }
}
/* ページネーション（it-pager.js が 50件超の表に追加する） */
.it-pager {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 14px 0 4px;
}
.it-pager-label {
  flex: 1 1 auto;
  color: var(--muted);
  font-size: var(--text-sm);
}
.it-pager-btn {
  min-width: 108px;
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--paper, #fff);
  color: var(--ink);
  font-size: var(--text-sm);
  font-weight: 700;
  cursor: pointer;
}
.it-pager-btn:hover:not(:disabled) {
  border-color: var(--accent-2);
  color: var(--accent-2);
}
.it-pager-btn:disabled {
  opacity: 0.38;
  cursor: default;
}
/* 入口の「すべてのアイテム」: 分類ごとの折りたたみ（details）。JS なしでも開けば全件が読める */
.it-page .it-group {
  margin: 10px 0;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--paper, #fff);
}
.it-page .it-group > summary {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 8px 14px;
  cursor: pointer;
  list-style: none;
  color: var(--ink);
  font-weight: 700;
}
.it-page .it-group > summary::-webkit-details-marker { display: none; }
.it-page .it-group > summary::before {
  flex: 0 0 auto;
  content: "▸";
  color: var(--accent-2);
  font-size: .9rem;
}
.it-page .it-group[open] > summary::before { content: "▾"; }
.it-page .it-group > summary:focus-visible {
  outline: 2px solid var(--accent-2);
  outline-offset: -2px;
}
.it-page .it-group-count {
  margin-left: auto;
  color: var(--muted);
  font-size: var(--text-sm);
  font-weight: 400;
}
.it-page .it-group > .gh-table-wrap { margin: 0; padding: 0 14px 12px; }