.zx-view button + button { border-left:3px solid var(--line); }
.zx-view button.on { background:var(--ink); color:var(--bg); }
.zx-hit { font-family:var(--mono); font-size:11.5px; font-weight:700; letter-spacing:.1em; color:var(--ink3);
  padding-bottom:var(--s4); }
.zx-hit:empty { display:none; }
/* 初期状態は「バーなし・カードも表も出る」。JSが .zx-on を付けて初めて
   切替UIが現れ、片方だけを表示する。JS無効でも中身は全て読める。 */
.zx-bar { display:none; }
.zx-on .zx-bar { display:flex; }
.zx-panel + .zx-panel { margin-top:var(--sp-block); }
.zx-on .zx-panel { display:none; margin-top:0; }
.zx-on .zx-panel.on { display:block; }

/* ---- カード ---- */
.zx-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(258px,1fr)); gap:var(--gap-card); }
.zx-card { position:relative; display:flex; flex-direction:column; gap:var(--s3); padding:var(--s4) var(--s4) var(--s3);
  text-decoration:none; color:inherit; background:var(--bg2);
  border:3px solid var(--line); border-radius:20px; box-shadow:6px 6px 0 var(--shadow); }
.zx-card:nth-child(4n+1){ transform:rotate(-.55deg); } .zx-card:nth-child(4n+3){ transform:rotate(.55deg); }
.zx-card.press:hover, .zx-card.press:active { transform:translate(3px,3px); }
.zx-card.press:active { transform:translate(6px,6px); }
.zx-card-top { display:flex; align-items:center; justify-content:space-between; gap:var(--s2); }
.zx-no { display:inline-flex; align-items:center; height:26px; padding:0 11px; background:var(--yellow); color:#20170C;
  font-family:var(--mono); font-size:11px; font-weight:700; letter-spacing:.06em; line-height:1;
  border:2.5px solid var(--line); border-radius:999px; }
.zx-flag { display:inline-flex; align-items:center; height:24px; padding:0 11px; font-size:10.5px; font-weight:900;
  letter-spacing:.04em; line-height:1; color:var(--ink2); background:var(--bg3);
  border:2px solid var(--line); border-radius:999px; white-space:nowrap; }
.zx-flag.on { background:var(--c-zkn); color:#20170C; }
.zx-name { font-size:19px; font-weight:900; line-height:var(--lh-tight); letter-spacing:-.02em;
  background:linear-gradient(transparent 66%, var(--yellow) 66%); align-self:flex-start; }
.zx-card:hover .zx-name { color:var(--c-zkn); }
.zx-co { font-size:12px; font-weight:700; line-height:1.5; color:var(--ink3); }
.zx-co .src { height:19px; padding:0 7px; margin-left:6px; font-size:9.5px; border-width:1.5px; vertical-align:1px; }
.zx-marks { display:flex; flex-wrap:wrap; gap:6px; }
.zx-code-mark { display:inline-flex; align-items:center; height:24px; padding:0 11px;
  font-size:10.5px; font-weight:900; line-height:1; color:#20170C; background:var(--yellow);
  border:2px solid var(--line); border-radius:999px; }
.zx-sib { align-self:flex-start; display:inline-flex; align-items:center; height:24px; padding:0 11px;
  font-size:10.5px; font-weight:900; line-height:1; color:#fff; background:var(--c-rep);
  border:2px solid var(--line); border-radius:999px; }
.zx-stats { display:flex; flex-direction:column; gap:0; margin-top:auto; padding-top:var(--s2); }
.zx-stats > div { display:flex; align-items:baseline; justify-content:space-between; gap:var(--s3);
  padding:7px 0; border-top:2px solid var(--bg3); }
.zx-stats dt { flex:none; font-size:11px; font-weight:800; letter-spacing:.02em; color:var(--ink3); }
.zx-stats dd { font-size:13.5px; font-weight:900; text-align:right; font-variant-numeric:tabular-nums;
  min-width:0; overflow-wrap:anywhere; }
.zx-stats dd.big { font-size:17px; color:var(--c-zkn); letter-spacing:-.01em; }
.zx-stats dd.off { font-weight:700; color:var(--ink3); }
.zx-stats .meas { color:var(--c-mth); }
/* 全件が「未計測」の期間が続くため、赤ベタだと画面が赤だらけになる。
   赤は実測値が出たとき（.meas との対比）に取っておき、ここは輪郭だけにする。 */
.zx-stats .pend { height:22px; padding:0 10px; font-size:10px; font-weight:900;
  background:var(--bg2); color:var(--c-why); border:1.5px solid var(--c-why); }
.zx-cov { display:flex; align-items:center; gap:var(--s3); padding-top:var(--s2); }
.zx-cov-bar { flex:1 1 auto; display:flex; height:9px; border:2px solid var(--line); border-radius:999px;
  background:var(--bg3); overflow:hidden; }
.zx-cov-bar i.p { background:var(--c-mth); } .zx-cov-bar i.s { background:var(--c-zkn); }
.zx-cov span { flex:none; font-family:var(--mono); font-size:10px; font-weight:700; letter-spacing:.04em; color:var(--ink3); }
.zx-cov b { font-size:12px; color:var(--ink); }
.zx-empty { padding:var(--s8) 0; text-align:center; font-size:15px; font-weight:800; color:var(--ink2); }

@media (max-width:600px){
  .zx-cover { border-radius:20px; }
  .zx-grid { grid-template-columns:minmax(0,1fr); }
  .zx-card { transform:none !important; }
  /* 3段になると画面の1/4を占めるので、スマホでは固定しない */
  .zx-bar { position:static; gap:var(--s2); border-bottom-width:2px; }
  .zx-search { flex:1 1 100%; }
}
@media (prefers-reduced-motion:reduce){
  .zx-card, .zx-stats-top li, .zx-sticker { transform:none !important; }
}

/* =========================================================
   図鑑 詳細ページ
   ========================================================= */
.zk-head { padding:var(--s8) 0 var(--s6); display:flex; flex-direction:column; gap:var(--s4); }
.zk-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; color:var(--ink3); }
.zk-crumb a { text-decoration:none; color:var(--c-zkn); }
.zk-head h1 { font-size:clamp(34px,6.4vw,64px); font-weight:900; line-height:var(--lh-tight); letter-spacing:-.03em;
  text-shadow:4px 4px 0 var(--yellow); }
.zk-aka { font-family:var(--mono); font-size:12px; color:var(--ink3); letter-spacing:.04em; }
.zk-tags { display:flex; flex-wrap:wrap; gap:var(--s2); }
.zk-tag { display:inline-flex; align-items:center; height:32px; padding:0 14px; font-size:12px; font-weight:800;
  line-height:1; text-decoration:none; color:var(--ink); background:var(--bg2);
  border:2.5px solid var(--line); border-radius:999px; box-shadow:2px 2px 0 var(--shadow); }
.zk-tag.on { background:var(--c-zkn); color:#fff; }
.zk-sum { font-size:16px; line-height:var(--lh-body); color:var(--ink2); max-width:62ch; }

.zk-cols { display:grid; grid-template-columns:minmax(0,1fr) 312px; gap:var(--sp-block); align-items:start; padding-bottom:var(--s9); }
@media (max-width:980px){ .zk-cols{ grid-template-columns:minmax(0,1fr); } }
/* 出典バッジ凡例 */
.legend { display:flex; flex-wrap:wrap; gap:var(--s3); padding-bottom:var(--s6); }
.legend span { display:inline-flex; align-items:center; gap:var(--s2); font-size:12.5px; font-weight:700; color:var(--ink2); }

/* 出典バッジ */
.src { display:inline-flex; align-items:center; height:22px; padding:0 9px; margin-left:8px;
  font-family:var(--mono); font-size:10px; font-weight:700; letter-spacing:.08em; line-height:1;
  border:2px solid var(--line); border-radius:999px; color:#fff; vertical-align:2px; }
.src-primary   { background:var(--c-mth); }
.src-secondary { background:var(--c-zkn); }
.src-measured  { background:var(--c-why); }
.src-unknown   { background:var(--bg3); color:var(--ink2); }

/* 諸元テーブル */
.zk-block { display:flex; flex-direction:column; gap:var(--s4); margin-bottom:var(--s8); }
.zk-block > h2 { display:inline-flex; align-items:center; align-self:flex-start; height:var(--h-eb); padding:0 18px;
  font-size:13px; font-weight:900; letter-spacing:.08em; line-height:1; color:#fff; background:var(--c-zkn);
  border:3px solid var(--line); border-radius:999px; box-shadow:4px 4px 0 var(--shadow); }
.zk-tbl { border:3px solid var(--line); border-radius:16px; overflow:hidden; box-shadow:5px 5px 0 var(--shadow); background:var(--bg2); }
.zk-tbl table { width:100%; font-size:14px; line-height:var(--lh-ui); }
.zk-tbl th { width:34%; text-align:left; padding:15px 18px; font-weight:900; color:var(--ink);
  background:var(--bg3); border-top:2px solid var(--line); white-space:nowrap; }
.zk-tbl td { padding:15px 18px; border-top:2px solid var(--bg3); color:var(--ink2); }
.zk-tbl tr:first-child th, .zk-tbl tr:first-child td { border-top:none; }
.zk-prose p { font-size:15px; line-height:var(--lh-body); color:var(--ink2); max-width:64ch; margin-bottom:var(--s4); }
.zk-prose p b { color:var(--ink); font-weight:900; }

/* 確認できなかったこと */
.gaps { border:4px dashed var(--c-why); border-radius:20px; background:var(--bg2); padding:var(--s6); display:flex; flex-direction:column; gap:var(--s4); }
.gaps h2 { display:inline-flex; align-items:center; align-self:flex-start; height:var(--h-eb); padding:0 18px;
  font-size:13px; font-weight:900; letter-spacing:.08em; line-height:1; color:#fff; background:var(--c-why);
  border:3px solid var(--line); border-radius:999px; }
.gaps ul { display:flex; flex-direction:column; gap:var(--s3); }
.gaps li { position:relative; padding-left:26px; font-size:14.5px; line-height:var(--lh-body); color:var(--ink); }
.gaps li::before { content:"?"; position:absolute; left:0; top:0; width:19px; height:19px; margin-top:5px;
  display:grid; place-items:center; border-radius:999px; background:var(--c-why); color:#fff;
  font-family:var(--mono); font-size:11px; font-weight:700; line-height:1; }

/* 右レール */
.zk-rail { position:sticky; top:var(--s5); display:flex; flex-direction:column; gap:var(--s5); }
/* スマホではレール（諸元・招待コード）を本文より前に出す。
   本文が2,000字を超えるため、後ろに置くと最下部まで届かない。 */
@media (max-width:980px){
  .zk-rail { position:static; order:-1; }
  .zk-cols { display:flex; flex-direction:column; }
}
.zk-card { padding:var(--s5); border-radius:18px; display:flex; flex-direction:column; gap:var(--s4); }
.zk-card > h2 { display:inline-flex; align-items:center; align-self:flex-start; height:28px; padding:0 13px;
  font-size:12px; font-weight:900; letter-spacing:.08em; line-height:1; color:#fff;
  background:var(--c-zkn); border:2.5px solid var(--line); border-radius:999px; }
.zk-card dl { display:grid; grid-template-columns:max-content minmax(0,1fr); gap:var(--s3) var(--s4); font-size:13.5px; line-height:var(--lh-ui); }
.zk-card dt { color:var(--ink3); font-weight:700; white-space:nowrap; }
.zk-card dd { text-align:right; font-weight:900; font-variant-numeric:tabular-nums; min-width:0; overflow-wrap:anywhere; }
.zk-card dd.off { color:var(--ink3); }
.zk-cta { border:3px solid var(--line); border-radius:18px; background:var(--c-zkn); color:#fff;
  box-shadow:6px 6px 0 var(--shadow); padding:var(--s5); display:flex; flex-direction:column; gap:var(--s3); }
.zk-cta b { font-size:17px; font-weight:900; }
.zk-cta p { font-size:13px; line-height:1.8; color:rgba(255,255,255,.92); }
.zk-cta .btn { width:100%; background:var(--bg2); color:var(--ink); box-shadow:4px 4px 0 rgba(0,0,0,.35); }
.zk-cta small { font-size:11px; line-height:1.7; color:rgba(255,255,255,.8); }
.zk-stamp { display:flex; justify-content:space-between; align-items:baseline; gap:var(--s3);
  border:3px solid var(--line); border-radius:14px; background:var(--bg2); padding:var(--s4) var(--s5); }
.zk-stamp span { font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; color:var(--ink3); }
.zk-stamp b { font-family:var(--mono); font-size:14px; font-variant-numeric:tabular-nums; }

/* 同一運営の他ブランド（§5.2） */
.sib { border:3px solid var(--c-rep); border-radius:18px; background:var(--bg2); padding:var(--s5); display:flex; flex-direction:column; gap:var(--s3); }
.sib h2 { font-size:15px; font-weight:900; color:var(--c-rep); }
.sib p { font-size:13.5px; line-height:var(--lh-body); color:var(--ink2); }
.sib ul { display:flex; flex-wrap:wrap; gap:var(--s2); }
.sib a { display:inline-flex; align-items:center; height:34px; padding:0 15px; font-size:13px; font-weight:900;
  line-height:1; text-decoration:none; color:#fff; background:var(--c-rep);
  border:2.5px solid var(--line); border-radius:999px; box-shadow:3px 3px 0 var(--shadow); }