/* 奇人変人レトロ帖 — style.css（確定版：プリズムの光）
   白い地に、キラカードの光を細い虹の線として小さく効かせる。
   色は「黒に近い文字色」と「白〜ごく薄い灰色の地」が基本。色みは虹の線と状態のラベルだけ。
   書体：Zen Maru Gothic（見出し）／Zen Kaku Gothic New（本文）／Space Mono（日付・番号） */
@import url("https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=Zen+Kaku+Gothic+New:wght@400;500;700&family=Zen+Maru+Gothic:wght@500;700;900&display=swap");

:root{
  --bg:#fbfbfa;      /* 地 */
  --white:#ffffff;
  --soft:#f3f3f2;    /* 引用・表の頭（ごく薄い灰色） */
  --ink:#1c1d21;     /* 本文 */
  --sub:#5a5b60;     /* 日付・補足 */
  --line:#e2e2e0;    /* 罫線 */
  --ul:#9a9ba0;      /* リンクの下線 */
  --prism:linear-gradient(90deg,#f0a3b6,#f5c98a,#e6e07f,#98d9ad,#86cde6,#a3acef,#cfa3ea,#f0a3b6);
  --prism-c:conic-gradient(from 20deg,#f0a3b6,#f5c98a,#e6e07f,#98d9ad,#86cde6,#a3acef,#cfa3ea,#f0a3b6);
  --ok:#2b6b5a; --wait-bg:#fcf0d4; --wait:#6f4b00; --no:#5a5b60; --unk-bg:#f9e9ee; --unk:#7c2f4b;
  --maru:"Zen Maru Gothic","Hiragino Maru Gothic ProN",sans-serif;
  --sans:"Zen Kaku Gothic New","Hiragino Sans","Yu Gothic UI",sans-serif;
  --mono:"Space Mono",ui-monospace,Consolas,monospace;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.95}
a{color:var(--ink);text-decoration-color:var(--ul);text-underline-offset:.22em;text-decoration-thickness:1px}
a:hover{text-decoration-color:var(--ink);text-decoration-thickness:2px}
.wrap{max-width:760px;margin:0 auto;padding:0 20px}

/* ヘッダー：下に虹の細線 */
header{background:var(--white);position:relative}
header::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--prism)}
header .wrap{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 14px;padding:20px 20px 18px}
header .t{font-family:var(--maru);font-weight:900;font-size:21px;letter-spacing:.05em;color:var(--ink);text-decoration:none}
header .en{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--sub)}
header nav{margin-left:auto;display:flex;flex-wrap:wrap;gap:4px 20px;font-size:14px;font-weight:500}
header nav a{color:var(--ink);text-decoration:none}
header nav a:hover{text-decoration:underline;text-decoration-color:var(--ink)}

main{padding:40px 0 72px}
h1{font-family:var(--maru);font-size:28px;font-weight:900;line-height:1.5;margin:6px 0 10px;letter-spacing:.02em;text-wrap:pretty}
h1::after{content:"";display:block;width:56px;height:3px;margin-top:14px;background:var(--prism);border-radius:2px}
.meta{font-family:var(--mono);font-size:12.5px;color:var(--sub);line-height:1.8}
.meta .cat{display:inline-flex;align-items:center;gap:6px;font-family:var(--sans);font-weight:700;font-size:12px;color:var(--ink);
  border:1px solid var(--ink);border-radius:4px;padding:0 8px;margin-right:10px;line-height:1.7}
.meta .cat::before{content:"";width:7px;height:7px;transform:rotate(45deg);background:var(--prism-c)}
.lead{font-family:var(--sans);font-size:15px;color:var(--sub);max-width:34em;margin:0 0 28px}

/* カテゴリの切り替え：選ばれているものは虹の縁 */
.cats{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 26px;font-size:13px;font-weight:700}
.cats a{color:var(--ink);background:var(--white);border:1px solid var(--line);padding:4px 15px;border-radius:999px;text-decoration:none;line-height:1.6}
.cats a:hover{border-color:var(--ink)}
.cats a.on{color:var(--white);border:2px solid transparent;padding:3px 14px;
  background:linear-gradient(var(--ink),var(--ink)) padding-box,var(--prism) border-box}

/* 記事の一覧 */
.list{list-style:none;padding:0;margin:0;border-top:1px solid var(--line)}
.list li{padding:22px 0 24px;border-bottom:1px solid var(--line);
  background:var(--prism) 0 100%/0 2px no-repeat;transition:background-size .5s ease}
.list li:hover{background-size:100% 2px}
.list a.tt{display:block;margin-top:4px;font-family:var(--maru);font-size:19px;font-weight:700;line-height:1.6;color:var(--ink);text-decoration:none;text-wrap:pretty}
.list a.tt:hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.22em}
.list p{margin:6px 0 0;font-size:15px;color:var(--sub);line-height:1.85}

/* 下書きの帯 */
.draft{display:flex;align-items:center;gap:10px;font-size:13.5px;font-weight:700;color:var(--wait);
  background:var(--white);border:1px solid #d6b260;border-radius:6px;padding:7px 12px;margin:0 0 22px}
.draft::before{content:"DRAFT";font-family:var(--mono);font-size:11px;letter-spacing:.1em;background:var(--ink);color:var(--white);padding:0 7px;border-radius:3px}

/* 記事本文 */
article{margin-top:26px;counter-reset:h}
article p{margin:0 0 16px}
article h2{counter-increment:h;font-family:var(--maru);font-size:21px;font-weight:700;line-height:1.5;margin:48px 0 14px;padding-bottom:10px;
  background:var(--prism) 0 100%/48px 3px no-repeat;border-bottom:1px solid var(--line)}
article h2::before{content:counter(h,decimal-leading-zero);display:block;font-family:var(--mono);font-size:11px;font-weight:400;letter-spacing:.14em;color:var(--sub);margin-bottom:2px}
article img{display:block;max-width:100%;height:auto;margin:24px auto;border-radius:8px;border:1px solid var(--line)}
.nophoto{margin:24px 0;padding:46px 18px;text-align:center;font-family:var(--mono);font-size:13px;line-height:1.9;color:var(--sub);
  border:1px dashed #bdbdc0;border-radius:8px;
  background:repeating-linear-gradient(-45deg,#ececea 0 1px,transparent 1px 9px),var(--white)}
article blockquote{margin:20px 0;padding:14px 18px;border-radius:8px;font-family:var(--mono);font-size:13.5px;line-height:1.75;overflow-wrap:anywhere;
  background:var(--prism) 0 0/100% 2px no-repeat,var(--soft)}
article blockquote p{margin:0}
article ul{list-style:none;padding:0;margin:0 0 18px}
article ul li{position:relative;padding-left:1.5em;margin:4px 0}
article ul li::before{content:"";position:absolute;left:.2em;top:.75em;width:.48em;height:.48em;transform:rotate(45deg);background:var(--prism-c);outline:1px solid var(--ink)}

/* 表：はみ出したら表の中だけ横に動く */
article table{display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;border-collapse:collapse;
  margin:18px 0 22px;font-size:14px;line-height:1.7;border:1px solid var(--line);border-radius:10px;
  background:
   linear-gradient(90deg,var(--white) 30%,transparent) 0 0/32px 100% no-repeat local,
   linear-gradient(270deg,var(--white) 30%,transparent) 100% 0/32px 100% no-repeat local,
   radial-gradient(farthest-side at 0 50%,rgba(28,29,33,.18),transparent) 0 0/12px 100% no-repeat scroll,
   radial-gradient(farthest-side at 100% 50%,rgba(28,29,33,.18),transparent) 100% 0/12px 100% no-repeat scroll,var(--white)}
article th,article td{padding:10px 14px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
article tbody tr:last-child td{border-bottom:0}
article th{background:var(--soft);font-weight:700;font-size:12.5px;white-space:nowrap;border-bottom:2px solid var(--ink)}
article td:first-child{font-weight:700}
.rec td:first-child{min-width:7.5em}
.rec td:nth-child(2){min-width:14em}
.rec td:nth-child(3){min-width:13em}
article tr:has(.st.no) td,article tr:has(.st.unk) td{background:#f6f6f5}

/* 確認の状態（色と記号の両方で区別） */
.st{display:inline-flex;align-items:center;gap:.3em;font-size:12.5px;font-weight:700;line-height:1.5;white-space:nowrap;
  padding:1px 9px 1px 7px;border-radius:999px;border:1px solid;margin:0 .5em .2em 0;vertical-align:1px}
.st.ok{background:var(--ok);border-color:var(--ok);color:#fff}
.st.ok::before{content:"●"}
.st.wait{background:var(--wait-bg);border-color:#d6b260;color:var(--wait)}
.st.wait::before{content:"◐"}
.st.no{background:var(--white);border-style:dashed;border-color:#8b8c91;color:var(--no)}
.st.no::before{content:"○"}
.st.unk{background:var(--unk-bg);border-color:#d29aae;color:var(--unk)}
.st.unk::before{content:"？"}
.tally{display:flex;flex-wrap:wrap;gap:8px}
.tally .st{margin:0;font-size:13px}

/* 図鑑 */
.zk td{white-space:nowrap}
.zk td:first-child{font-family:var(--mono);font-weight:400;color:var(--sub)}
.zk tbody tr:hover td{background:var(--soft)}

/* 図鑑の写真一覧（build.py 追記：1枚ずつ。写真が無いものは「写真待ち」） */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px;margin:22px 0 10px}
.cards figure{margin:0;background:var(--white);border:1px solid var(--line);border-radius:8px;padding:6px 6px 8px}
.cards img{display:block;width:100%;height:auto;margin:0;border:0;border-radius:4px}
.cards .nophoto{margin:0;padding:52px 6px;font-size:11px}
.cards figcaption{font-size:12px;line-height:1.5;margin-top:6px;color:var(--ink)}
.cards figure.prism{border:2px solid transparent;background:linear-gradient(var(--white),var(--white)) padding-box,var(--prism-c) border-box}
@media (max-width:600px){.cards{grid-template-columns:repeat(2,1fr);gap:10px}}

/* はがす前 → はがした後 の組（記事の中で <div class="hp"> を使う） */
.hp{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:6px 12px;margin:26px 0;padding:14px 14px 16px;
  background:var(--white);border:1px solid var(--line);border-radius:14px}
.hp-head{grid-column:1/-1;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;padding-bottom:6px;margin-bottom:4px;border-bottom:1px solid var(--line)}
.hp-head b{font-family:var(--maru);font-size:17px}
.hp-head span{font-family:var(--mono);font-size:11.5px;color:var(--sub)}
.hp-b,.hp-a{text-align:center}
.hp-b p,.hp-a p{margin:0}
.hp img{margin:0 auto 8px;max-height:340px;width:auto;border-radius:8px}
.hp-b img{filter:saturate(.9)}
.hp-a img{border:2px solid transparent;background:linear-gradient(var(--white),var(--white)) padding-box,var(--prism-c) border-box}
.hp-arrow{font-size:22px;color:var(--sub)}
.hp-cap{font-size:12.5px;line-height:1.6;color:var(--sub)}
.hp-cap b{color:var(--ink);font-family:var(--maru);font-size:14px}
@media (max-width:600px){.hp{gap:4px 6px;padding:10px}.hp img{max-height:220px}.hp-cap{font-size:11.5px}.hp-cap b{font-size:12.5px}}

/* 図鑑の一覧：台紙を表紙にしたタイル（build.py 追記） */
.zk-series{font-family:var(--maru);font-size:18px;font-weight:900;margin:40px 0 14px;padding-bottom:8px;border-bottom:1px solid var(--line);
  background:var(--prism) 0 100%/48px 3px no-repeat}
.zk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:18px}
.zk-tile{display:block;text-decoration:none;color:var(--ink);background:var(--white);border:1px solid var(--line);border-radius:12px;overflow:hidden;
  transition:transform .25s ease,box-shadow .25s ease}
.zk-tile:hover{transform:translateY(-3px) rotate(-.4deg);box-shadow:0 10px 24px rgba(28,29,33,.14)}
.zk-img{display:block;aspect-ratio:3/4;background:var(--soft);overflow:hidden;position:relative}
.zk-img img{width:100%;height:100%;object-fit:cover;display:block;margin:0;border:0;border-radius:0}
.zk-img::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--prism)}
.zk-img .nophoto{margin:0;height:100%;border:0;border-radius:0;display:flex;align-items:center;justify-content:center}
.zk-cap{display:block;padding:10px 12px 12px}
.zk-cap b{display:block;font-family:var(--maru);font-size:15px;line-height:1.45;margin:2px 0}
.zk-year,.zk-n{font-family:var(--mono);font-size:11.5px;color:var(--sub)}
.zk-hero{margin:18px 0 6px}
.zk-hero img{display:block;max-width:100%;max-height:560px;width:auto;height:auto;margin:0 auto;border-radius:10px;border:1px solid var(--line)}
@media (max-width:600px){.zk-grid{grid-template-columns:repeat(2,1fr);gap:12px}.zk-cap b{font-size:13.5px}}

/* タグ・戻る */
.tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:34px;font-size:13px;color:var(--sub)}
.tags a{color:var(--ink);text-decoration:none;background:var(--soft);border-radius:999px;padding:2px 12px}
.tags a::before{content:"#";font-family:var(--mono);color:var(--sub);margin-right:2px}
.tags a:hover{background:var(--line)}
.tags span{color:var(--ink);background:var(--soft);border-radius:999px;padding:2px 12px}   /* build.py 追記：タグのページが無いあいだは文字だけで出す */
.tags span::before{content:"#";font-family:var(--mono);color:var(--sub);margin-right:2px}
.tags+p{margin:30px 0 0;font-size:14px}

/* フッター */
footer{position:relative;font-size:13px;color:var(--sub);background:var(--white)}
footer::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--prism)}
footer .wrap{display:flex;flex-wrap:wrap;gap:6px 20px;padding:24px 20px 32px}

/* 見本専用（structure.html の区切り。本番では使わない） */
.demo{font-family:var(--mono);font-size:13px;letter-spacing:.08em;background:var(--ink);color:var(--white);padding:10px 20px;margin:0}
.demo:not(:first-child){margin-top:64px}

/* スマホ */
@media (max-width:600px){
  body{font-size:16px;line-height:1.9}
  .wrap{padding:0 16px}
  header .wrap{padding:16px 16px 14px}
  header .t{font-size:19px}
  header nav{margin-left:0;width:100%;gap:2px 16px;font-size:13px}
  main{padding:28px 0 48px}
  h1{font-size:23px}
  .list a.tt{font-size:17.5px}
  article h2{font-size:19px;margin-top:40px}
  article th,article td{padding:8px 10px}
  .rec td:first-child{min-width:5em}
  .rec td:nth-child(2){min-width:9em}
  .rec td:nth-child(3){min-width:9.5em}
  .rec th:first-child,.rec td:first-child{position:sticky;left:0;z-index:1;background:var(--white);box-shadow:1px 0 0 var(--line)}
  .rec th:first-child{background:var(--soft)}
}

/* ───────── クラス名 → 部品の対応表 ─────────
 既存の名前（そのまま使用）
  header .wrap        ヘッダーの中身（下に虹の細線）
  .t                  ブログ名（丸ゴシック）
  .en                 英語名（等幅・大文字）
  header nav          ヘッダーのリンク
  main .wrap          本文の幅
  h1                  ページの題（下に短い虹の線）
  .meta               日付の行（等幅）
  .meta .cat          カテゴリのラベル（虹のひし形つき）
  .draft              下書きの帯（DRAFT の札つき）
  article             本文。h2 は番号＋短い虹の下線
  .nophoto            写真待ちの枠（細い斜線）
  .tags               タグ（# つきのピル。a でも素の文字でも可）
  .cats / .cats a.on  カテゴリの切り替え（ピル型）／選ばれているもの（虹の縁）
  .list               記事の一覧（触れると下線が虹に伸びる）
  .list a.tt / .list p 一覧の題／要約
  footer .wrap        フッター（上に虹の細線）
 追加した名前
  .lead               トップ・カテゴリの副題（.meta と併用）
  table.rec           記録の表（列の最小幅を指定）
  table.zk            図鑑の表
  .st.ok              確認済み（● 深緑の塗り）
  .st.wait            確認待ち（◐ 黄土）
  .st.no              未確認（○ 点線）
  .st.unk             分からない（？ 臙脂）
  .tally              図鑑の上の状態ごとの件数
  .demo               structure.html の見本の区切り（本番では不要）
 class が付かない表も article table の指定で同じ見た目になる。
 状態の色分けは、状態のセルに <span class="st ok">確認済み</span> などを付けると効く。
 「未確認」「分からない」を含む行は :has() で地色が付く（未対応ブラウザでは付かないだけ）。
 使わない色：藍・紺・紫（文字や地の色として）、生成り・クリームの地、純色の赤・緑・青だけの組み合わせ。
 使わない書体：明朝体。 */