/* =========================================================
   記事
   ========================================================= */
.art-head { padding:var(--s8) 0 var(--s6); display:flex; flex-direction:column; gap:var(--s4); }
.art-head h1 { font-size:clamp(30px,5.4vw,52px); font-weight:900; line-height:var(--lh-tight); letter-spacing:-.025em; text-wrap:balance; }
.art-meta { display:flex; flex-wrap:wrap; gap:var(--s3); align-items:center;
  font-family:var(--mono); font-size:12px; font-weight:700; letter-spacing:.08em; color:var(--ink3); }
.art-body { max-width:70ch; padding-bottom:var(--s9); }
.art-body p { font-size:16px; line-height:2; color:var(--ink2); margin-bottom:var(--s5); }
.art-body h2 { font-size:26px; font-weight:900; line-height:var(--lh-tight); margin:var(--s8) 0 var(--s4);
  padding-bottom:var(--s3); border-bottom:3px solid var(--line); }
.art-body h3 { font-size:20px; font-weight:900; line-height:var(--lh-tight); margin:var(--s6) 0 var(--s3); }
/* 対応TCGの一覧。確認できたものと、できなかったものを同じ面に出す。 */
.tcg-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(168px,1fr)); gap:var(--s3); margin:var(--s5) 0 var(--s7); }
.tcg-grid li { list-style:none; margin:0; padding:var(--s4); background:var(--bg2);
  border:3px solid var(--line); border-radius:14px; box-shadow:3px 3px 0 var(--shadow);
  display:flex; align-items:center; gap:var(--s3); }
.art-body ul.tcg-grid { margin-left:0; }
.tcg-grid .t-mark { flex:none; width:34px; height:34px; display:grid; place-items:center; border-radius:999px;
  border:3px solid var(--line); font-size:16px; font-weight:900; line-height:1; }
.tcg-grid .t-name { font-size:14.5px; font-weight:900; line-height:1.35; color:var(--ink); }
.tcg-grid .t-sub { display:block; margin-top:3px; font-size:11.5px; font-weight:700; color:var(--ink3); }
.tcg-grid li.on .t-mark { background:var(--c-src); color:#fff; }
.tcg-grid li.off { background:var(--bg3); }
.tcg-grid li.off .t-mark { background:var(--bg2); color:var(--ink3); }
.tcg-grid li.off .t-name { color:var(--ink2); }

/* 図鑑への導線。記事の中から全項目の一覧へ送る。 */
.zk-link { display:flex; align-items:center; gap:var(--s4); margin:var(--s6) 0 var(--s7);
  padding:var(--s5); background:var(--bg2); border:3px solid var(--line); border-radius:18px;
  box-shadow:6px 6px 0 var(--shadow); text-decoration:none; color:inherit;
  transition:transform .1s ease, box-shadow .1s ease; }
.art-body a.zk-link { color:inherit; border-bottom:none; }
.zk-link:hover { transform:translate(3px,3px); box-shadow:3px 3px 0 var(--shadow); }
.zk-link-ico { flex:none; width:56px; height:56px; display:grid; place-items:center; border-radius:14px;
  background:var(--c-zkn); color:#20170C; border:3px solid var(--line); font-size:22px; font-weight:900; }
.zk-link-tx { min-width:0; }
.zk-link-tx b { display:block; font-size:17px; font-weight:900; line-height:1.4; letter-spacing:-.01em; }
.zk-link-tx span { display:block; margin-top:4px; font-size:13.5px; font-weight:700; line-height:1.6; color:var(--ink2); }
.zk-link-arw { margin-left:auto; flex:none; font-size:22px; font-weight:900; color:var(--c-zkn); }
@media (max-width:600px){ .zk-link { gap:var(--s3); padding:var(--s4); } .zk-link-ico { width:44px; height:44px; font-size:18px; } .zk-link-arw { display:none; } }

/* FAQ。details/summary で開閉するのでJSは要らない。 */
.faq { display:flex; flex-direction:column; gap:var(--s3); margin:var(--s5) 0 var(--s7); }
.faq details { border:3px solid var(--line); border-radius:16px; background:var(--bg2);
  box-shadow:4px 4px 0 var(--shadow); overflow:hidden; }
.faq summary { list-style:none; cursor:pointer; display:flex; align-items:flex-start; gap:var(--s3);
  padding:var(--s4) var(--s5); font-size:16px; font-weight:900; line-height:1.55; color:var(--ink); }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::before { content:"Q"; flex:none; width:28px; height:28px; margin-top:1px; display:grid; place-items:center;
  border-radius:999px; background:var(--c-zkn); color:#20170C; border:2.5px solid var(--line);
  font-family:var(--mono); font-size:13px; font-weight:700; line-height:1; }
.faq summary::after { content:"＋"; margin-left:auto; flex:none; font-size:18px; font-weight:900; color:var(--ink3); line-height:1.5; }
.faq details[open] summary { background:var(--bg3); border-bottom:3px solid var(--line); }
.faq details[open] summary::after { content:"−"; }
.faq summary:hover { background:var(--bg3); }
.faq .faq-a { display:flex; align-items:flex-start; gap:var(--s3); padding:var(--s4) var(--s5); }
.faq .faq-a::before { content:"A"; flex:none; width:28px; height:28px; margin-top:1px; display:grid; place-items:center;
  border-radius:999px; background:var(--ink); color:var(--bg); border:2.5px solid var(--line);
  font-family:var(--mono); font-size:13px; font-weight:700; line-height:1; }
.art-body .faq .faq-a p { margin-bottom:var(--s3); font-size:15.5px; }
.art-body .faq .faq-a p:last-child { margin-bottom:0; }
@media (max-width:600px){ .faq summary, .faq .faq-a { padding:var(--s4) var(--s4); } .faq summary { font-size:15px; } }

/* 引けるカードの一覧。名前が長いので表ではなくカードで並べる。 */
.gacha { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:var(--s3); margin:var(--s5) 0 var(--s7); }
.gacha li { list-style:none; margin:0; padding:var(--s4); background:var(--bg2);
  border:3px solid var(--line); border-radius:14px; box-shadow:3px 3px 0 var(--shadow);
  display:flex; flex-direction:column; gap:6px; }
.art-body ul.gacha { margin-left:0; }
.gacha .g-price { align-self:flex-start; display:inline-flex; align-items:center; height:26px; padding:0 12px;
  background:var(--yellow); color:#20170C; border:2.5px solid var(--line); border-radius:999px;
  font-family:var(--mono); font-size:12.5px; font-weight:700; line-height:1; }
.gacha .g-name { font-size:14.5px; font-weight:900; line-height:1.5; color:var(--ink); }

/* 図鑑用のブロック（表・台帳・注記）を記事本文に置いたときの余白。
   これらは元々 .zk-block の gap で間隔を作っていて自前のマージンを持たないため、
   記事に置くと直後の本文とくっつく。オフセット影のぶんも見て下を厚めに取る。 */
.art-body .zk-tbl,
.art-body .ledger { margin:var(--s5) 0 var(--s7); }
.art-body .gaps,
.art-body .disc { margin:var(--s6) 0 var(--s7); }
.art-body .zk-tbl table { width:100%; }
.art-body h2 + .zk-tbl,
.art-body h2 + .ledger { margin-top:var(--s4); }

/* 記事内の招待CTA。チケットに見立てる。左右の丸い切り込みは擬似要素。 */
.art-cta { position:relative; margin:var(--s7) 0; padding:var(--s6) var(--s6) var(--s5);
  background:var(--c-zkn); border:4px solid var(--line); border-radius:22px;
  box-shadow:8px 8px 0 var(--shadow); overflow:hidden; color:#20170C;
  background-image:radial-gradient(rgba(32,23,12,.12) 1.5px, transparent 1.5px); background-size:14px 14px; }
.art-cta::before, .art-cta::after { content:""; position:absolute; top:50%; width:30px; height:30px;
  background:var(--bg); border:4px solid var(--line); border-radius:999px; transform:translateY(-50%); }
.art-cta::before { left:-19px; } .art-cta::after { right:-19px; }
.art-cta-kick { display:inline-flex; align-items:center; height:30px; padding:0 14px; margin-bottom:var(--s3);
  background:var(--yellow); color:#20170C; border:3px solid var(--line); border-radius:999px;
  font-size:12px; font-weight:900; letter-spacing:.08em; line-height:1; transform:rotate(-1.5deg); }
.art-cta-head { font-size:clamp(21px,3.2vw,28px); font-weight:900; line-height:1.3; letter-spacing:-.02em; margin-bottom:var(--s4); }
.art-cta-head b { color:#fff; text-shadow:3px 3px 0 var(--line); }
.art-code { display:flex; align-items:center; gap:var(--s3); flex-wrap:wrap; margin-bottom:var(--s4);
  background:#fff; border:3px solid var(--line); border-radius:14px; padding:var(--s3) var(--s4); }
.art-code-ttl { font-family:var(--mono); font-size:10.5px; font-weight:700; letter-spacing:.14em; color:var(--ink3); }
.art-code b { font-family:var(--mono); font-size:26px; font-weight:700; letter-spacing:.06em; color:var(--ink); }
.art-cta .zk-copy { margin-left:auto; height:38px; padding:0 18px; cursor:pointer;
  font:inherit; font-size:13px; font-weight:900; color:#fff; background:var(--ink);
  border:3px solid var(--line); border-radius:999px; }
.art-cta .zk-copy.is-done { background:var(--c-src); }
.art-body a.art-cta-btn, .art-cta-btn { color:#20170C; text-decoration:none; border-bottom:none; }
.art-cta-btn { display:flex; align-items:center; justify-content:center; gap:10px; width:100%;
  min-height:66px; padding:0 24px; text-decoration:none;
  font-size:clamp(17px,2.4vw,20px); font-weight:900; letter-spacing:.01em; line-height:1.3;
  color:#20170C; background:var(--yellow); border:4px solid var(--line); border-radius:999px;
  box-shadow:5px 5px 0 var(--shadow); transition:transform .1s ease, box-shadow .1s ease; }
.art-cta-btn:hover { transform:translate(3px,3px); box-shadow:2px 2px 0 var(--shadow); }
.art-cta-note { display:block; margin-top:var(--s3); font-size:11.5px; font-weight:700; color:rgba(32,23,12,.72); text-align:center; }
@media (max-width:600px){ .art-cta { padding:var(--s5) var(--s4) var(--s4); } .art-cta::before,.art-cta::after{ display:none; } }

/* 記事内の手順リストと要点リスト。ol は番号を丸バッジにする */
.art-body ol.zk-steps { list-style:none; margin-left:0; display:flex; flex-direction:column; gap:var(--s4); counter-reset:zs; }
.art-body ol.zk-steps li { list-style:none; position:relative; padding-left:52px; margin-bottom:0; counter-increment:zs; }
.art-body ol.zk-steps li::before { content:counter(zs); position:absolute; left:0; top:2px;
  width:36px; height:36px; display:grid; place-items:center; border-radius:999px;
  background:var(--c-rep); color:#fff; border:3px solid var(--line); box-shadow:2px 2px 0 var(--shadow);
  font-size:16px; font-weight:900; line-height:1; font-variant-numeric:tabular-nums; }
.art-body ul.zk-list { list-style:none; margin-left:0; display:flex; flex-direction:column; gap:var(--s2); }
.art-body ul.zk-list li { list-style:none; position:relative; padding-left:30px; margin-bottom:0; }
.art-body ul.zk-list li::before { content:"✓"; position:absolute; left:0; top:0; color:var(--c-src);
  font-size:17px; font-weight:900; line-height:1.95; }
.art-body code { font-family:var(--mono); font-size:.95em; font-weight:700; padding:2px 8px;
  background:var(--yellow); color:#20170C; border:2px solid var(--line); border-radius:6px; }
.art-body .zk-cta code { background:rgba(255,255,255,.9); border-color:rgba(0,0,0,.35); }
.art-body blockquote { margin:0 0 var(--s5); padding:var(--s4) var(--s5); background:var(--bg3);
  border-left:6px solid var(--line); border-radius:0 12px 12px 0; }
.art-body blockquote p { margin-bottom:0; font-size:15px; }
.art-body ul, .art-body ol { margin:0 0 var(--s5) 1.4em; }
.art-body li { list-style:disc; font-size:16px; line-height:1.95; color:var(--ink2); margin-bottom:var(--s2); }
.art-body a { color:var(--c-mth); font-weight:700; }

/* =========================================================
   footer
   ========================================================= */
.site-foot { background:var(--bg3); margin-top:var(--sp-section); position:relative; }.site-foot::before { content:""; position:absolute; top:0; left:0; right:0; height:12px;
  background:
    linear-gradient(135deg, var(--line) 25%, transparent 25%) -12px 0/24px 12px repeat-x,
    linear-gradient(225deg, var(--line) 25%, transparent 25%) -12px 0/24px 12px repeat-x; }
.foot-main { display:grid; grid-template-columns:minmax(0,1.35fr) repeat(3, minmax(0,1fr));
  gap:var(--s8) var(--s7); padding:calc(var(--s9) - var(--s3)) 0 var(--s9); }
@media (max-width:880px){ .foot-main{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s7) var(--s6); } }