/*
Theme Name: Ironna List Register
Theme URI: https://list.brdg-h.com/
Author: いろんなリスト
Description: あらゆるリストを収録・採番・管理するための工業カタログ型テーマ。全記事に登録番号を自動付与し、収録件数を自動集計します。
Version: 1.2.0
Requires at least: 5.9
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ironna-list
Tags: blog, custom-menu
*/

/* ==========================================================
   0. TOKENS ─ 計器盤トークン
   ========================================================== */
:root {
  --paper:    #EEEFF1;   /* 台紙グレー */
  --panel:    #FAFAFB;   /* パネル白 */
  --ink:      #17191C;   /* インク黒 */
  --ink-2:    #5A5F66;   /* 補助インク */
  --hair:     #C6C9CE;   /* 罫線 */
  --hair-2:   #9AA0A8;   /* 強罫線 */
  --signal:   #E8500A;   /* 信号オレンジ(1色のみ) */
  --signal-bg:#FDEDE4;

  --mono: "IBM Plex Mono", "Courier New", monospace;
  --sans: "IBM Plex Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;

  --max: 1160px;
  --gutter: clamp(16px, 3vw, 32px);
}

/* ==========================================================
   1. RESET / BASE
   ========================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.85;
  font-feature-settings: "palt";
}
img, iframe, video, embed { max-width: 100%; height: auto; }
a { color: var(--ink); text-decoration: none; }
a:hover { color: var(--signal); }
:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.mono { font-family: var(--mono); letter-spacing: .02em; }
.screen-reader-text {
  position: absolute; clip: rect(1px,1px,1px,1px);
  width: 1px; height: 1px; overflow: hidden;
}

/* ==========================================================
   2. HEADER ─ 銘板
   ========================================================== */
.site-head {
  background: var(--panel);
  border-bottom: 2px solid var(--ink);
}
.head-meta {
  border-bottom: 1px solid var(--hair);
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-2);
  text-transform: uppercase;
}
.head-meta .wrap {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding-top: 6px;
  padding-bottom: 6px;
  flex-wrap: wrap;
}
.head-main .wrap {
  display: flex;
  align-items: stretch;
  gap: 0;
}
.brand {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 20px 28px 20px 0;
  border-right: 1px solid var(--hair);
}
.brand-title {
  margin: 0;
  font-size: clamp(24px, 4vw, 34px);
  font-weight: 700;
  letter-spacing: .06em;
  line-height: 1.1;
}
.brand-title a { color: var(--ink); }
.brand-sub {
  margin-top: 6px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-2);
  letter-spacing: .12em;
}
.head-counter {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 20px 0 20px 28px;
  margin-left: auto;
  text-align: right;
}
.head-counter .num {
  font-family: var(--mono);
  font-size: clamp(26px, 4vw, 38px);
  font-weight: 600;
  line-height: 1;
  color: var(--signal);
}
.head-counter .label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .18em;
  color: var(--ink-2);
  margin-top: 6px;
  text-transform: uppercase;
}

/* ナビ */
.site-nav { background: var(--ink); }
.site-nav ul {
  margin: 0; padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
}
.site-nav li { border-right: 1px solid #33363B; }
.site-nav a {
  display: block;
  padding: 10px 20px;
  color: #E7E8EA;
  font-size: 13px;
  letter-spacing: .08em;
}
.site-nav a:hover { background: var(--signal); color: #fff; }
@media (max-width: 720px) {
  .brand { border-right: 0; }
}

/* ==========================================================
   3. INDEX ─ 台帳(カタログ一覧)
   ========================================================== */
.ledger-bar {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin: 36px 0 12px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--ink);
}
.ledger-bar h1, .ledger-bar .ledger-title {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: .08em;
}
.ledger-bar .ledger-count {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-2);
}

.ledger { border-top: 1px solid var(--hair-2); }

.entry-row {
  display: grid;
  grid-template-columns: 118px 1fr 170px 130px;
  align-items: stretch;
  border-bottom: 1px solid var(--hair);
  background: var(--panel);
  transition: background .12s ease;
}
.entry-row:hover { background: #fff; }
.entry-row > * {
  padding: 16px 14px;
  border-right: 1px solid var(--hair);
  min-width: 0;
}
.entry-row > *:last-child { border-right: 0; }

.cell-no {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--signal);
  display: flex;
  align-items: center;
}
.cell-title { display: flex; flex-direction: column; justify-content: center; }
.cell-title .t {
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.5;
}
.cell-title .ex {
  margin-top: 4px;
  font-size: 12px;
  color: var(--ink-2);
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cell-cat {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
}
.cat-tag {
  display: inline-block;
  font-family: var(--mono);
  font-size: 10.5px;
  padding: 2px 8px;
  border: 1px solid var(--hair-2);
  color: var(--ink-2);
  background: var(--paper);
  white-space: nowrap;
}
a.cat-tag:hover { border-color: var(--signal); color: var(--signal); background: var(--signal-bg); }
.cell-data {
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-2);
  text-align: right;
  gap: 3px;
}
.cell-data .items { color: var(--ink); font-weight: 600; }
.cell-data .items b { color: var(--signal); font-size: 14px; font-weight: 600; }

@media (max-width: 780px) {
  .entry-row { grid-template-columns: 92px 1fr; }
  .entry-row > * { border-right: 0; padding: 12px 12px; }
  .cell-no { padding-bottom: 6px; }
  .cell-title { padding-bottom: 6px; }
  .cell-cat { grid-column: 1 / -1; padding-top: 0; padding-bottom: 4px; }
  .cell-data { grid-column: 1 / -1; flex-direction: row; justify-content: flex-start; gap: 16px; padding-top: 0; padding-bottom: 14px; text-align: left; }
}

/* ページネーション */
.pager { margin: 28px 0 56px; }
.pager .nav-links {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  font-family: var(--mono);
  font-size: 13px;
}
.pager .page-numbers {
  display: inline-block;
  min-width: 38px;
  text-align: center;
  padding: 8px 10px;
  border: 1px solid var(--hair-2);
  background: var(--panel);
}
.pager .page-numbers.current {
  background: var(--ink); color: #fff; border-color: var(--ink);
}
.pager a.page-numbers:hover { border-color: var(--signal); color: var(--signal); }

/* ==========================================================
   4. SINGLE ─ 仕様書(スペックシート)
   ========================================================== */
.sheet {
  background: var(--panel);
  border: 1px solid var(--hair-2);
  margin: 36px 0 56px;
}
.sheet-head {
  padding: 26px 30px 22px;
  border-bottom: 2px solid var(--ink);
}
.sheet-no {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--signal);
  letter-spacing: .06em;
}
.sheet-title {
  margin: 8px 0 0;
  font-size: clamp(22px, 3.4vw, 32px);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .02em;
}

/* 仕様表 */
.spec {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-bottom: 1px solid var(--hair-2);
  margin: 0;
}
.spec > div {
  padding: 12px 16px;
  border-right: 1px solid var(--hair);
}
.spec > div:last-child { border-right: 0; }
.spec dt {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .14em;
  color: var(--ink-2);
  text-transform: uppercase;
  margin: 0 0 4px;
}
.spec dd {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
}
.spec dd.mono { font-size: 12.5px; font-weight: 500; }
.spec dd .items-big { font-family: var(--mono); color: var(--signal); font-size: 18px; font-weight: 600; }
@media (max-width: 720px) {
  .spec { grid-template-columns: repeat(2, 1fr); }
  .spec > div { border-bottom: 1px solid var(--hair); }
  .spec > div:nth-child(2n) { border-right: 0; }
}

/* 本文 */
.sheet-body { padding: 30px; }
.sheet-body > :first-child { margin-top: 0; }
.sheet-body h2 {
  font-size: 19px;
  letter-spacing: .04em;
  border-left: 4px solid var(--signal);
  border-bottom: 1px solid var(--hair-2);
  padding: 4px 0 6px 12px;
  margin: 44px 0 18px;
}
.sheet-body h3 {
  font-size: 16px;
  margin: 32px 0 12px;
  padding-bottom: 4px;
  border-bottom: 1px dashed var(--hair-2);
}
.sheet-body p { margin: 0 0 1.4em; }
.sheet-body a { color: var(--signal); text-decoration: underline; text-underline-offset: 3px; }
.sheet-body table {
  border-collapse: collapse;
  width: 100%;
  font-size: 13.5px;
  margin: 0 0 1.6em;
}
.sheet-body th, .sheet-body td {
  border: 1px solid var(--hair-2);
  padding: 8px 12px;
  text-align: left;
}
.sheet-body th { background: var(--paper); font-family: var(--mono); font-size: 11px; letter-spacing: .08em; }
.sheet-body th.sortable { cursor: pointer; -webkit-user-select: none; user-select: none; white-space: nowrap; }
.sheet-body th.sortable::after { content: "↕"; margin-left: 6px; color: var(--hair-2); }
.sheet-body th.sortable:hover { color: var(--signal); }
.sheet-body th.sortable[data-sort="asc"]::after { content: "↑"; color: var(--signal); }
.sheet-body th.sortable[data-sort="desc"]::after { content: "↓"; color: var(--signal); }
.sheet-body blockquote {
  margin: 0 0 1.6em;
  padding: 14px 18px;
  border-left: 3px solid var(--hair-2);
  background: var(--paper);
  color: var(--ink-2);
}
.sheet-body figure { margin: 0 0 1.6em; }
.sheet-body iframe { border: 1px solid var(--hair-2); }

/* 番号付きリスト = 収録品目 */
.sheet-body ol {
  list-style: none;
  counter-reset: item;
  margin: 0 0 1.8em;
  padding: 0;
  border-top: 1px solid var(--hair-2);
}
.sheet-body ol > li {
  counter-increment: item;
  position: relative;
  padding: 12px 14px 12px 74px;
  border-bottom: 1px solid var(--hair);
  background: #fff;
}
.sheet-body ol > li:nth-child(even) { background: var(--panel); }
.sheet-body ol > li::before {
  content: counter(item, decimal-leading-zero);
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--signal);
  border-right: 1px solid var(--hair);
  background: var(--paper);
}
.sheet-body ul {
  margin: 0 0 1.8em;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--hair-2);
}
.sheet-body ul > li {
  padding: 10px 14px 10px 34px;
  border-bottom: 1px solid var(--hair);
  position: relative;
  background: #fff;
}
.sheet-body ul > li:nth-child(even) { background: var(--panel); }
.sheet-body ul > li::before {
  content: "";
  position: absolute;
  left: 14px; top: 1.05em;
  width: 8px; height: 8px;
  background: var(--signal);
}
.sheet-body li ol, .sheet-body li ul { margin: 10px 0 0; border-top: 1px solid var(--hair); }

/* 動画埋め込み(YouTube等)を16:9で整える */
.sheet-body .wp-block-embed__wrapper,
.sheet-body .video-container {
  position: relative;
  padding-top: 56.25%;
  margin: 0 0 4px;
  background: var(--ink);
}
.sheet-body .wp-block-embed__wrapper iframe,
.sheet-body .video-container iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
}
.sheet-body li > iframe { margin-top: 8px; }

/* ==========================================================
   4b. COMPACT ─ 索引・折りたたみ・サムネイルグリッド
   ========================================================== */

/* 収録索引 */
.sheet-body .list-toc {
  border: 1px solid var(--hair-2);
  background: var(--paper);
  margin: 0 0 26px;
}
.sheet-body .toc-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--hair-2);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .12em;
  color: var(--ink-2);
}
.toc-toggle {
  border: 1px solid var(--hair-2);
  background: var(--panel);
  font-family: var(--mono);
  font-size: 11px;
  padding: 4px 12px;
  cursor: pointer;
  color: var(--ink);
}
.toc-toggle:hover { border-color: var(--signal); color: var(--signal); }
.sheet-body .list-toc ol {
  margin: 0;
  border-top: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}
.sheet-body .list-toc ol > li {
  padding: 0;
  border-bottom: 0;
  background: transparent;
  counter-increment: none;
}
.sheet-body .list-toc ol > li::before { content: none; }
.sheet-body .list-toc a {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 8px 14px;
  font-size: 13px;
  text-decoration: none;
  color: var(--ink);
  border-bottom: 1px dashed var(--hair);
  border-right: 1px dashed var(--hair);
}
.sheet-body .list-toc a:hover { background: var(--signal-bg); color: var(--ink); }
.sheet-body .list-toc a .g-title {
  flex: 1;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* グループ折りたたみ */
.group-block {
  border: 1px solid var(--hair-2);
  background: var(--panel);
  margin: 0 0 8px;
}
.group-block > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 16px;
  -webkit-user-select: none;
  user-select: none;
}
.group-block > summary::-webkit-details-marker { display: none; }
.group-block > summary::after {
  content: "+";
  margin-left: auto;
  font-family: var(--mono);
  font-size: 15px;
  color: var(--ink-2);
}
.group-block[open] > summary::after { content: "−"; color: var(--signal); }
.group-block > summary:hover { background: var(--signal-bg); }
.group-block[open] > summary {
  border-bottom: 1px solid var(--hair);
  background: var(--paper);
}
.g-no {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--signal);
}
.group-block .g-title { font-weight: 700; font-size: 14.5px; line-height: 1.5; }
.g-count {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-2);
  white-space: nowrap;
}
.group-inner { padding: 16px; }
.group-inner > :first-child { margin-top: 0; }
.group-inner > :last-child { margin-bottom: 0; }

/* サムネイル(クリック再生) */
.yt-facade {
  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  padding: 0;
  border: 1px solid var(--hair-2);
  background: var(--ink);
  cursor: pointer;
  overflow: hidden;
}
.yt-facade img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .88;
  transition: opacity .12s ease;
}
.yt-facade:hover img { opacity: 1; }
.yt-facade .play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 46px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: #fff;
  background: rgba(23, 25, 28, .85);
  border: 1px solid #fff;
}
.yt-facade:hover .play { background: var(--signal); border-color: var(--signal); }
.yt-player {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--ink);
}
.yt-player iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* 動画・画像グリッド(リスト外) */
.video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
  margin: 0 0 1.6em;
}
.video-grid figure { margin: 0; }
.video-grid figcaption {
  font-size: 12px;
  color: var(--ink-2);
  font-family: var(--mono);
  padding-top: 4px;
}

/* 動画・画像グリッド(ol/ul) */
.sheet-body ol.media-grid,
.sheet-body ul.media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
  border-top: 0;
}
.sheet-body .media-grid > li,
.sheet-body .media-grid > li:nth-child(even) {
  border: 1px solid var(--hair);
  background: var(--panel);
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 12.5px;
  line-height: 1.6;
}
.sheet-body ol.media-grid > li { padding: 36px 10px 10px; }
.sheet-body ol.media-grid > li::before {
  left: 0; top: 0; right: 0; bottom: auto;
  width: auto; height: 26px;
  justify-content: flex-start;
  padding-left: 10px;
  border-right: 0;
  border-bottom: 1px solid var(--hair);
}
.sheet-body ul.media-grid > li { padding: 10px; }
.sheet-body ul.media-grid > li::before { display: none; }
.sheet-body .media-grid .yt-facade,
.sheet-body .media-grid .yt-player,
.sheet-body .media-grid figure { margin-top: auto; }
.sheet-body .media-grid p { margin: 0; }
@media (max-width: 600px) {
  .video-grid,
  .sheet-body ol.media-grid,
  .sheet-body ul.media-grid { grid-template-columns: repeat(2, 1fr); }
}

/* フッターメタ */
.sheet-foot {
  border-top: 2px solid var(--ink);
  padding: 16px 30px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-2);
}
.sheet-foot .tags a { margin-right: 8px; color: var(--ink-2); text-decoration: underline; text-underline-offset: 2px; }
.sheet-foot .tags a:hover { color: var(--signal); }

/* 前後ナビ */
.adjacent {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--hair-2);
  border: 1px solid var(--hair-2);
  margin: -32px 0 56px;
}
.adjacent a, .adjacent .empty {
  background: var(--panel);
  padding: 14px 18px;
  font-size: 13px;
  display: block;
}
.adjacent a:hover { background: var(--signal-bg); }
.adjacent .dir {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-2);
  letter-spacing: .14em;
  display: block;
  margin-bottom: 4px;
}
.adjacent .next { text-align: right; }
.adjacent .empty { background: var(--paper); }
@media (max-width: 600px) { .adjacent { grid-template-columns: 1fr; } }

/* コメント */
.comments-area { margin: 0 0 56px; }
.comments-area .comment-list { list-style: none; padding: 0; }
.comments-area .comment-body {
  background: var(--panel);
  border: 1px solid var(--hair);
  padding: 14px 18px;
  margin-bottom: 10px;
  font-size: 14px;
}

/* ==========================================================
   5. SEARCH / FORMS
   ========================================================== */
.searchform {
  display: flex;
  border: 1px solid var(--hair-2);
  background: var(--panel);
}
.searchform input[type="search"] {
  flex: 1;
  border: 0;
  background: transparent;
  padding: 10px 14px;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--ink);
  min-width: 0;
}
.searchform input[type="search"]:focus { outline: none; }
.searchform button {
  border: 0;
  background: var(--ink);
  color: #fff;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .1em;
  padding: 0 18px;
  cursor: pointer;
}
.searchform button:hover { background: var(--signal); }
.head-search { padding: 14px 0; border-top: 1px solid var(--hair); }

/* 404 / not found */
.notfound {
  margin: 48px 0 72px;
  background: var(--panel);
  border: 1px solid var(--hair-2);
  padding: 40px 30px;
  text-align: center;
}
.notfound .code {
  font-family: var(--mono);
  font-size: 56px;
  font-weight: 600;
  color: var(--signal);
  line-height: 1;
}
.notfound p { color: var(--ink-2); }
.notfound .searchform { max-width: 420px; margin: 20px auto 0; }

/* ==========================================================
   6. FOOTER ─ 奥付
   ========================================================== */
.site-foot {
  border-top: 2px solid var(--ink);
  background: var(--panel);
  margin-top: 24px;
}
.site-foot .wrap {
  padding-top: 22px;
  padding-bottom: 26px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-2);
}
.site-foot a { color: var(--ink-2); text-decoration: underline; text-underline-offset: 2px; }
.site-foot a:hover { color: var(--signal); }

/* WPコア対応クラス */
.alignleft { float: left; margin: 0 1.5em 1em 0; }
.alignright { float: right; margin: 0 0 1em 1.5em; }
.aligncenter { display: block; margin: 0 auto 1em; }
.wp-caption { max-width: 100%; }
.wp-caption-text { font-size: 12px; color: var(--ink-2); font-family: var(--mono); }
.sticky {}
.bypostauthor {}
.gallery-caption {}