.step h3 { font-size:17.5px; font-weight:900; line-height:var(--lh-tight); }
.step p { font-size:14px; line-height:var(--lh-body); color:var(--ink2); }
.step p b { color:var(--c-mth); font-weight:900; }

/* ---- source stickers ---- */
.stick { display:flex; flex-wrap:wrap; gap:var(--s3); }
.sbadge { display:flex; align-items:center; gap:var(--s3); min-height:58px; padding:0 24px 0 14px;
  border:3px solid var(--line); border-radius:999px; background:var(--bg2); box-shadow:4px 4px 0 var(--shadow); }
.sbadge:nth-child(odd){ transform:rotate(-1deg); } .sbadge:nth-child(even){ transform:rotate(1deg); }
.sbadge i { flex:none; font-style:normal; font-size:12px; font-weight:900; letter-spacing:.06em; line-height:1;
  color:#fff; padding:7px 14px; border-radius:999px; border:2.5px solid var(--line); }
.sbadge span { font-size:13.5px; font-weight:700; line-height:var(--lh-ui); color:var(--ink2); }
.i-p{background:var(--c-mth);} .i-s{background:var(--c-zkn);} .i-m{background:var(--c-why);}.i-u{background:var(--bg3); color:var(--ink2)!important;}

/* ---- ledger（図鑑一覧テーブル） ---- */
.ledger { border:3px solid var(--line); border-radius:18px; overflow:hidden; box-shadow:6px 6px 0 var(--shadow); background:var(--bg2); }
.ledger-scroll { overflow-x:auto; }
.ledger table { width:100%; font-size:14px; line-height:var(--lh-ui); }
.ledger thead { background:var(--c-zkn); }
.ledger thead th { color:#fff; font-size:11.5px; font-weight:900; letter-spacing:.08em; text-align:left; height:52px; padding:0 18px; white-space:nowrap; }
.ledger tbody td { height:62px; padding:14px 18px; border-top:2px solid var(--bg3); vertical-align:middle; color:var(--ink2); }
.ledger tbody tr:nth-child(even){ background:var(--bg3); }
.no { font-family:var(--mono); font-size:12px; color:var(--ink3); font-variant-numeric:tabular-nums; }
.ledger td.no { white-space:nowrap; }
.nm { font-weight:900; color:var(--ink); white-space:nowrap; }
.nm a { text-decoration:none; border-bottom:3px solid var(--yellow); }
.nm a:hover { color:var(--c-zkn); }
.rate { font-weight:900; font-variant-numeric:tabular-nums; white-space:nowrap; color:var(--ink); }
.pend { display:inline-flex; align-items:center; height:28px; padding:0 13px; font-size:11.5px; font-weight:900;
  line-height:1; color:#fff; background:var(--c-why); border:2px solid var(--line); border-radius:999px; white-space:nowrap; }
.nd { color:var(--ink3); font-weight:700; }
.ledger td.note { white-space:normal; max-width:26ch; font-weight:700; font-size:13px; }
.more { display:flex; justify-content:space-between; align-items:center; gap:var(--s4); flex-wrap:wrap; }
.more p { font-size:13.5px; font-weight:700; color:var(--ink3); }

/* ---- posts（記事カード） ---- */
.posts { display:grid; grid-template-columns:repeat(auto-fit,minmax(268px,1fr)); gap:var(--gap-card); }
.post { padding:var(--s5); border-radius:20px; display:flex; flex-direction:column; gap:var(--s3); text-decoration:none; color:inherit; }
.post:nth-child(odd){ transform:rotate(.6deg); } .post:nth-child(even){ transform:rotate(-.6deg); }
/* 記事カードのサムネイル。アイキャッチがある記事だけ出す。
   カードの角丸に合わせて上側だけ丸め、下に黒線を引いて枠と揃える。 */
.post.has-thumb { padding-top:0; overflow:hidden; }
.post-thumb { margin:0 calc(var(--s5) * -1) var(--s3); border-bottom:3px solid var(--line); background:var(--bg3); }
.post-thumb img { display:block; width:100%; aspect-ratio:1200/630; object-fit:cover; }
@media (max-width:600px){ .post-thumb { margin-left:calc(var(--s5) * -1); margin-right:calc(var(--s5) * -1); } }
.post .kind { display:inline-flex; align-items:center; align-self:flex-start; height:28px; padding:0 14px;
  font-size:11.5px; font-weight:900; letter-spacing:.06em; line-height:1; color:#fff;
  background:var(--c-rep); border:2.5px solid var(--line); border-radius:999px; }
.post h3 { font-size:18px; font-weight:900; line-height:var(--lh-tight); }
.post p { font-size:14px; line-height:var(--lh-body); color:var(--ink2); }
.post .soon { margin-top:auto; padding-top:var(--s3); font-family:var(--mono); font-size:11.5px; font-weight:700; letter-spacing:.08em; color:var(--ink3); }

/* ---- empty state ---- */
.rep { padding:clamp(40px,5.5vw,64px) var(--s6); border-radius:22px; text-align:center; background:var(--bg3);
  border:4px dashed var(--line); display:flex; flex-direction:column; gap:var(--s4); align-items:center; }
.rep .pill { display:inline-flex; align-items:center; height:var(--h-eb); padding:0 22px; font-size:13px;
  font-weight:900; line-height:1; background:var(--c-rep); color:#fff; border:3px solid var(--line);
  border-radius:999px; box-shadow:4px 4px 0 var(--shadow); }
.rep b { font-size:clamp(24px,3.8vw,36px); font-weight:900; letter-spacing:-.025em; line-height:var(--lh-tight); }
.rep p { font-size:15px; line-height:var(--lh-body); color:var(--ink2); max-width:52ch; }

/* ---- rules ---- */
.rules { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:0 var(--s8); }
.rules > div { padding:var(--s5) 0; border-top:3px solid var(--line); display:flex; flex-direction:column; gap:var(--s3); }
.rules h3 { font-size:17.5px; font-weight:900; line-height:var(--lh-tight); display:flex; align-items:center; gap:var(--s3); }
.rules h3 s { flex:none; text-decoration:none; display:inline-flex; align-items:center; justify-content:center;
  width:30px; height:30px; border-radius:999px; background:var(--ink); color:var(--bg);
  font-family:var(--mono); font-size:12px; font-weight:700; }
.rules p { font-size:14.5px; line-height:var(--lh-body); color:var(--ink2); }

/* ---- disclaimer（ここだけ明朝・装飾なし） ---- */
.disc { border:3px solid var(--line); border-radius:4px; background:var(--bg2); padding:var(--s6);
  box-shadow:6px 6px 0 var(--shadow); display:flex; flex-direction:column; gap:var(--s3); }
.disc h3 { font-family:var(--serif); font-size:18px; font-weight:600; letter-spacing:.04em; line-height:var(--lh-tight); }
.disc p { font-family:var(--serif); font-size:14.5px; line-height:2.05; color:var(--ink2); max-width:70ch; letter-spacing:.01em; }

/* =========================================================
   図鑑 一覧（/zukan/）
   表紙 → 操作バー → カード／表。並べ替えは置かない（掲載順を守るため）。
   ========================================================= */
[hidden] { display:none !important; }
.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* ---- 表紙 ---- */
.zx-cover { position:relative; margin:var(--s6) 0 var(--s8); border:3px solid var(--line); border-radius:26px;
  background:var(--c-zkn); box-shadow:8px 8px 0 var(--shadow); overflow:hidden; color:#20170C; }
.zx-cover-in { position:relative; z-index:1; padding:clamp(30px,4.6vw,52px) clamp(24px,4vw,54px) clamp(46px,5vw,60px);
  display:flex; flex-direction:column; align-items:flex-start; gap:var(--s4);
  background-image:radial-gradient(rgba(32,23,12,.13) 1.6px, transparent 1.6px); background-size:15px 15px; }
.zx-cover-zig { position:absolute; left:0; right:0; bottom:0; z-index:2;
  background:
    linear-gradient(135deg, #20170C 25%, transparent 25%) -12px 0/24px 12px repeat-x,
    linear-gradient(225deg, #20170C 25%, transparent 25%) -12px 0/24px 12px repeat-x; }
.zx-crumb { display:flex; align-items:baseline; gap:var(--s3); flex-wrap:wrap;
  font-family:var(--mono); font-size:11.5px; font-weight:700; letter-spacing:.12em; }
.zx-crumb a { text-decoration:none; border-bottom:2px solid rgba(32,23,12,.4); }
.zx-sticker { display:inline-flex; align-items:center; height:var(--h-eb); padding:0 18px;
  font-size:12.5px; font-weight:900; letter-spacing:.1em; line-height:1; color:#20170C; background:var(--yellow);
  border:3px solid #20170C; border-radius:999px; box-shadow:4px 4px 0 #20170C; transform:rotate(-1.6deg); }
.zx-cover h1 { font-size:clamp(34px,6.6vw,68px); font-weight:900; line-height:1.14; letter-spacing:-.035em; }
.zx-count { display:inline-block; font-size:1.42em; line-height:.9; letter-spacing:-.05em; color:var(--yellow);
  font-variant-numeric:tabular-nums; -webkit-text-stroke:3px #20170C; paint-order:stroke fill;
  text-shadow:6px 6px 0 #20170C; padding-right:.08em; }
.zx-lead { font-size:15.5px; line-height:var(--lh-body); max-width:58ch; color:rgba(32,23,12,.86); }
.zx-lead b { font-weight:900; color:#20170C; }

.zx-meter { display:flex; align-items:center; gap:var(--s4); flex-wrap:wrap; width:100%; max-width:520px; margin-top:var(--s2); }
.zx-meter-bar { flex:1 1 240px; height:22px; border:3px solid #20170C; border-radius:999px;
  background:rgba(32,23,12,.22); overflow:hidden; }
.zx-meter-bar i { display:block; height:100%; background:#20170C;
  background-image:repeating-linear-gradient(45deg, rgba(255,255,255,.3) 0 7px, transparent 7px 14px); }
.zx-meter span { font-size:12.5px; font-weight:800; letter-spacing:.02em; white-space:nowrap; }
.zx-meter b { font-size:16px; font-weight:900; font-variant-numeric:tabular-nums; }

.zx-stats-top { display:flex; flex-wrap:wrap; gap:var(--s3); margin-top:var(--s3); }
.zx-stats-top li { display:flex; flex-direction:column; gap:2px; min-width:104px; padding:10px 16px;
  background:var(--bg2); border:3px solid #20170C; border-radius:14px; box-shadow:3px 3px 0 #20170C; color:var(--ink); }
.zx-stats-top li:nth-child(odd){ transform:rotate(-.8deg); } .zx-stats-top li:nth-child(even){ transform:rotate(.8deg); }
.zx-stats-top b { font-size:19px; font-weight:900; line-height:1.15; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.zx-stats-top span { font-size:11px; font-weight:800; letter-spacing:.04em; color:var(--ink3); }

/* ---- 操作バー ---- */
/* 端まで背景を塗るため .wrap のパディング分だけ外へ逃がす。
   100vw を使うと横スクロールが出るのでこの方法をとる。 */
.zx-bar { position:sticky; top:0; z-index:20; flex-wrap:wrap; align-items:center; gap:var(--s3);
  padding:var(--s3) 24px; margin:0 -24px var(--s4); background:var(--bg);
  border-bottom:3px solid var(--line); }
@media (max-width:600px){ .zx-bar { padding-left:18px; padding-right:18px; margin-left:-18px; margin-right:-18px; } }
.zx-search { flex:1 1 240px; display:flex; min-width:0; }
.zx-search input { width:100%; height:var(--h-chip); padding:0 18px; font:inherit; font-size:14px; font-weight:700;
  color:var(--ink); background:var(--bg2); border:3px solid var(--line); border-radius:999px;
  box-shadow:3px 3px 0 var(--shadow); -webkit-appearance:none; appearance:none; }
.zx-search input::placeholder { color:var(--ink3); font-weight:700; }
.zx-search input:focus { outline:none; background:var(--yellow); color:#20170C; }
.zx-chips { display:flex; flex-wrap:wrap; gap:var(--s2); }
.zx-chip, .zx-view button { font:inherit; cursor:pointer; }
.zx-chip { display:inline-flex; align-items:center; gap:7px; height:var(--h-chip); padding:0 15px;
  font-size:12.5px; font-weight:900; line-height:1; color:var(--ink); background:var(--bg2);
  border:3px solid var(--line); border-radius:999px; box-shadow:3px 3px 0 var(--shadow);
  transition:transform .1s ease, box-shadow .1s ease; }
.zx-chip:hover { transform:translate(2px,2px); box-shadow:1px 1px 0 var(--shadow); }
.zx-chip i { font-style:normal; font-family:var(--mono); font-size:10.5px; font-weight:700;
  padding:3px 7px; border-radius:999px; background:var(--bg3); color:var(--ink2); }
.zx-chip.on { background:var(--c-zkn); color:#20170C; }
.zx-chip.on i { background:rgba(32,23,12,.18); color:#20170C; }
.zx-view { display:inline-flex; border:3px solid var(--line); border-radius:999px; background:var(--bg2);
  box-shadow:3px 3px 0 var(--shadow); overflow:hidden; }
.zx-view button { height:32px; padding:0 16px; font-size:12.5px; font-weight:900; line-height:1;
  color:var(--ink2); background:none; border:none; }