/* Nettoge Core — カード一覧（nettoge/card-grid）。
* サイトの見た目に合わせる: 角丸なし、1px の枠、アクセントはサイトのメインカラー（--color_main）、
* 見出しの帯は表の見出しと同じ薄い灰色。ダークは html[data-nettoge-theme="dark"]。 */
.ncg {
--ncg-accent: var(--color_main, #b72305);
--ncg-fg: var(--color_text, #1a1714);
--ncg-mut: #5f6368;
--ncg-bg: #fff;
--ncg-line: #acaeb1;
--ncg-line2: #d9dadc;
--ncg-band: #e1e2e4;
--ncg-bandfg: #1a1c1e;
--ncg-imgbg: #f1f2f3;
--ncg-common: #8f959e;
--ncg-uncommon: #2fb35e;
--ncg-rare: #1e8fe0;
--ncg-epic: #c93a9a;
--ncg-legendary: #e0a220;
--ncg-min: 250px;
color: var(--ncg-fg);
margin: 1.5em 0;
}
html[data-nettoge-theme="dark"] .ncg {
--ncg-accent: #e0532f;
--ncg-fg: #e6e3de;
--ncg-mut: #a3a8ae;
--ncg-bg: #1d2024;
--ncg-line: #4a4e55;
--ncg-line2: #33373d;
--ncg-band: #2a2d32;
--ncg-bandfg: #e6e3de;
--ncg-imgbg: #23262b;
}
/* ---------- 操作欄 ---------- */
.ncg__ctl { display: grid; gap: 6px; padding-block: 0 10px; margin-bottom: 12px; border-bottom: 1px solid var(--ncg-line2); }
.ncg__row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ncg__lab { font-size: 12px; color: var(--ncg-mut); min-width: 3.5em; }
.ncg__q, .ncg__sort { font: inherit; font-size: 14px; color: var(--ncg-fg); background: var(--ncg-bg); border: 1px solid var(--ncg-line); padding: 6px 10px; border-radius: 0; }
.ncg__q { flex: 1 1 220px; min-width: 0; }
.ncg__view { display: inline-flex; border: 1px solid var(--ncg-line); }
.ncg__view button, .ncg__chip { font: inherit; font-size: 13px; color: var(--ncg-fg); background: var(--ncg-bg); border: 0; padding: 5px 12px; cursor: pointer; border-radius: 0; }
.ncg__view button[aria-pressed="true"] { background: var(--ncg-accent); color: #fff; }
.ncg__chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; min-width: 0; }
.ncg__chip { flex: none; border: 1px solid var(--ncg-line); white-space: nowrap; }
.ncg__chip[aria-pressed="true"] { background: var(--ncg-accent); border-color: var(--ncg-accent); color: #fff; }
.ncg__chip:focus-visible, .ncg__view button:focus-visible, .ncg__btn:focus-visible, .ncg__table th:focus-visible { outline: 2px solid var(--ncg-accent); outline-offset: 1px; }
.ncg__empty { margin: 4px 0 0; font-size: 13px; color: var(--ncg-mut); }
/* 並べ替え・絞り込みの計算中（JS が .is-busy を付ける）: くるくると一覧を薄く */
.ncg__spin { display: none; inline-size: 18px; block-size: 18px; border: 2px solid var(--ncg-line2); border-top-color: var(--ncg-accent); border-radius: 50%; flex: none; }
.ncg.is-busy .ncg__spin { display: inline-block; animation: ncg-spin .7s linear infinite; }
.ncg.is-busy .ncg__cards, .ncg.is-busy .ncg__table { opacity: .55; pointer-events: none; }
@keyframes ncg-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ncg.is-busy .ncg__spin { animation-duration: 2s; } }
/* ---------- 系統ごとの区切り ---------- */
.ncg__group { margin: 18px 0 24px; }
/* 画面外のまとまりは描かない（2026-09-23 スマホの重さ対策）。中身は HTML にあるので検索エンジン・ページ内検索には見える。
描くまでの高さは枚数からの見積もり（Module.php が --ncg-n / --ncg-r2 / --ncg-r3 を渡す）。一度描いた後は実際の高さを覚える（auto） */
.ncg__group { content-visibility: auto; contain-intrinsic-size: auto calc(var(--ncg-r3, 2) * 480px + 40px); }
@media (max-width: 899px) { .ncg__group { contain-intrinsic-size: auto calc(var(--ncg-r2, 3) * 480px + 40px); } }
@media (max-width: 599px) { .ncg__group { contain-intrinsic-size: auto calc(var(--ncg-n, 5) * 520px + 40px); } }
/* カードは 1 枚ずつ画面外を描かない（まとめない一覧のトリンケット 74 枚・リサイクル素材 121 枚、まとめる武器一覧の最初の系統も）（2026-09-23 スマホの計測でレイアウト 2 秒超）。
開いたカードは詳細の高さが変わるので外す。auto で一度描いた高さを覚える */
.ncg__grid > .ncg__card:not(.is-open) { content-visibility: auto; contain-intrinsic-size: auto 380px; }
.ncg .ncg__group-h { font-size: 1.1em; margin: 0 0 10px; padding: 0 0 4px; border: 0; border-bottom: 2px solid var(--ncg-accent); background: none; }
.ncg .ncg__group-h::before, .ncg .ncg__group-h::after { display: none; }
.ncg__group-h small { font-size: 12px; color: var(--ncg-mut); font-weight: 400; }
.ncg__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--ncg-min)), 1fr)); gap: 12px; }
/* ---------- カード ---------- */
.ncg__card { --ncg-tone: var(--ncg-line); background: var(--ncg-bg); border: 1px solid var(--ncg-line); border-top: 3px solid var(--ncg-tone); min-width: 0; }
/* #weapon-kettle のようなリンクで来たとき、固定ヘッダーと追従見出しの下に止める */
.ncg__card { scroll-margin-top: 130px; }
.ncg__card.is-tone-common { --ncg-tone: var(--ncg-common); }
.ncg__card.is-tone-uncommon { --ncg-tone: var(--ncg-uncommon); }
.ncg__card.is-tone-rare { --ncg-tone: var(--ncg-rare); }
.ncg__card.is-tone-epic { --ncg-tone: var(--ncg-epic); }
.ncg__card.is-tone-legendary { --ncg-tone: var(--ncg-legendary); }
.ncg__head { box-sizing: border-box; display: block; width: 100%; }
.ncg__head[data-ncg-toggle] { cursor: pointer; }
.ncg__media { position: relative; display: block; aspect-ratio: 2 / 1; max-width: 100%; overflow: hidden;
background: radial-gradient(120% 90% at 0% 100%, color-mix(in srgb, var(--ncg-tone) 30%, transparent), transparent 62%), var(--ncg-imgbg); }
.ncg__media .ncg__img, .ncg__media img { width: 100%; height: 100%; object-fit: contain; display: block; padding: 6px 10px; box-sizing: border-box; margin: 0; }
/* SWELL の content.css「#body_wrap .post_content img { height:auto }」（ID の詳細度）に負けて、正方形の絵が 2:1 の枠からはみ出して切れた（2026-09-23）。
枠の中の絵だけ高さを枠に合わせる */
.ncg .ncg__media img { height: 100% !important; max-height: 100%; }
.ncg__badge { position: absolute; left: 0; top: 0; font-size: 11px; font-weight: 700; color: #fff; background: var(--ncg-tone); padding: 1px 7px; }
.ncg__body { display: block; padding: 10px 12px 12px; }
/* 名前は見出し（h3/h4）。テーマの見出しの飾り（線・帯・余白・番号）を消す。開閉のボタンはその中 */
.ncg.ncg .ncg__name { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; margin: 0; padding: 0; border: 0; background: none; box-shadow: none;
font-size: inherit; font-weight: inherit; line-height: inherit; color: inherit; letter-spacing: normal; text-align: left; }
.ncg.ncg .ncg__name::before, .ncg.ncg .ncg__name::after { content: none; display: none; }
.ncg__btn { all: unset; box-sizing: border-box; display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; cursor: pointer; color: inherit; }
.ncg__title { font-weight: 800; font-size: 17px; line-height: 1.4; }
.ncg__sub { font-size: 12px; color: var(--ncg-mut); }
.ncg__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 4px 0 8px; font-size: 13px; color: var(--ncg-mut); }
.ncg__meta img { width: 20px; height: 20px; margin: 0; vertical-align: middle; display: inline-block; }
.ncg-pips { display: inline-flex; gap: 2px; }
.ncg-pips i { width: 8px; height: 12px; background: var(--ncg-line2); display: inline-block; }
.ncg-pips i.on { background: var(--ncg-accent); }
.ncg__bar { display: grid; grid-template-columns: 4.8em minmax(0, 1fr) minmax(3em, auto); align-items: center; gap: 6px; font-size: 12px; margin: 2px 0; }
.ncg__bar-l { color: var(--ncg-mut); }
.ncg__bar-v { text-align: right; font-variant-numeric: tabular-nums; }
.ncg__bar-t { height: 6px; background: var(--ncg-line2); overflow: hidden; display: block; }
.ncg__bar-t i { display: block; height: 100%; }
.ncg__bar-t i.is-red { background: #d9483b; }
.ncg__bar-t i.is-amber { background: #e39a2d; }
.ncg__bar-t i.is-blue { background: #3a82d6; }
.ncg__bar-t i.is-green { background: #3aa45f; }
.ncg__bar-t i.is-violet { background: #8a5cc7; }
.ncg__bar-t i.is-gray { background: #8f959e; }
.ncg__summary { display: block; font-size: 13px; line-height: 1.7; margin: 8px 0 6px; }
.ncg__more { font-size: 12px; font-weight: 700; color: var(--ncg-accent); }
.ncg__more::after { content: "▼"; display: inline-block; margin-left: .3em; }
.ncg__card.is-open .ncg__more::after { transform: rotate(180deg); }
/* 開いたカード: 行いっぱいに広げ、上は「画像｜名前と棒」の 2 列 */
.ncg__card.is-open { grid-column: 1 / -1; }
.ncg__card.is-open .ncg__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; }
/* 開いたときは画像の枠を右の文の高さまで伸ばし、絵は枠の中に収める（2:1 のままだと画像の下が空いた。2026-09-23 依頼主） */
@media (min-width: 641px) {
.ncg__card.is-open .ncg__head > .ncg__media { aspect-ratio: auto; height: 100%; min-height: 180px; }
/* 絵の大きさで行の高さが決まらないよう、絵は枠いっぱいに重ねる（正方形の絵だと文の下が空いた） */
.ncg__card.is-open .ncg__head > .ncg__media img { position: absolute; inset: 0; }
}
.ncg__details { border-top: 1px solid var(--ncg-line2); padding: 14px 16px 16px; font-size: 15px; }
/* 閉じた詳細は hidden="until-found"（中身は描かないがページ内検索で見つかる）。サイトの [hidden]{display:none} に勝たせ、
枠と余白を消して高さ 0 にする（見た目は閉じたまま） */
.ncg .ncg__details[hidden="until-found"] { display: block; padding: 0; border: 0; }
.ncg__details > :first-child { margin-top: 0; }
.ncg__details > :last-child { margin-bottom: 0; }
/* ---------- 表で比べる ---------- */
.ncg__table { overflow-x: auto; }
.ncg__table table { border-collapse: collapse; width: 100%; font-size: 14px; background: var(--ncg-bg); margin: 0; }
.ncg__table th, .ncg__table td { padding: 6px 8px; border: 1px solid var(--ncg-line); text-align: left; white-space: nowrap; }
.ncg__table thead th { background: var(--ncg-band); color: var(--ncg-bandfg); font-weight: 700; }
.ncg__table thead th[data-sort] { cursor: pointer; }
.ncg__table thead th[aria-sort="ascending"]::after { content: " ▲"; }
.ncg__table thead th[aria-sort="descending"]::after { content: " ▼"; }
.ncg__table tbody th small { display: block; font-size: 11px; color: var(--ncg-mut); font-weight: 400; }
.ncg__table td[data-v] { font-variant-numeric: tabular-nums; }
/* 名前の欄の画像（2026-09-23 依頼主「表のとき画像も出ない」）。行の色はレア度 */
.ncg__table tbody tr { --ncg-tone: var(--ncg-line); }
.ncg__table tbody tr.is-tone-common { --ncg-tone: var(--ncg-common); }
.ncg__table tbody tr.is-tone-uncommon { --ncg-tone: var(--ncg-uncommon); }
.ncg__table tbody tr.is-tone-rare { --ncg-tone: var(--ncg-rare); }
.ncg__table tbody tr.is-tone-epic { --ncg-tone: var(--ncg-epic); }
.ncg__table tbody tr.is-tone-legendary { --ncg-tone: var(--ncg-legendary); }
.ncg__table tbody th { vertical-align: middle; }
.ncg__tname { display: block; white-space: normal; font-weight: 700; }
/* 名前の欄: 名前の下に、欄いっぱいの画像（2026-09-23 依頼主「表のなかいっぱい広げて、画像も大きく、名前は画像の上」）。色はレア度の淡い地と上の線 */
.ncg__table tbody th { width: 36%; min-width: 120px; white-space: normal; }
.ncg__thumb { display: flex; flex-direction: column; gap: 4px; width: 100%; }
.ncg .ncg__thumb img { order: 2; width: 100%; height: auto !important; max-width: none; aspect-ratio: 3 / 2; object-fit: contain; display: block; margin: 0;
padding: 6px; box-sizing: border-box; border-top: 3px solid var(--ncg-tone);
background: radial-gradient(110% 90% at 50% 100%, color-mix(in srgb, var(--ncg-tone) 38%, transparent), transparent 70%), var(--ncg-imgbg); }
.ncg__tlabel { order: 1; display: block; font-size: 14px; line-height: 1.35; font-weight: 700; white-space: normal; }
.ncg__table tbody th { padding: 6px; }
/* 表の各行の下に出すカードの詳細（frontend.js の buildTableDetails）。行と詳細を 1 組に見せる */
.ncg__table tbody tr.has-tdetail > th, .ncg__table tbody tr.has-tdetail > td { border-bottom: 0; }
.ncg__table .ncg__tdetail-row > td { padding: 0 10px 14px; white-space: normal; border-top: 0; background: var(--ncg-bg); }
.ncg__tdetail { position: sticky; left: 10px; max-width: min(100%, calc(100vw - 48px)); font-size: 14px; line-height: 1.6; }
.ncg__tdetail > :first-child { margin-top: 0; }
.ncg__tdetail .ncg-pills { margin-top: 0; }
/* 1 万以上の数は PC では「105,000」、スマホでは「10.5万」 */
.ncg-ns { display: none; }
/* 横に流れる表でも名前（画像）は左に残す */
.ncg__table thead th:first-child, .ncg__table tbody th { position: sticky; left: 0; z-index: 1; }
.ncg__table tbody th { background: var(--ncg-bg); }
@media (max-width: 640px) {
.ncg__table tbody th { width: 40%; min-width: 110px; }
.ncg__tlabel { font-size: 13px; }
.ncg__table th, .ncg__table td { padding: 5px 6px; }
.ncg__table table { font-size: 13px; }
.ncg-nl { display: none; }
.ncg-ns { display: inline; }
}
@media (max-width: 640px) {
.ncg__card.is-open .ncg__head { display: block; }
.ncg__details { padding: 12px; }
}
/* 動き（2026-09-23）。「動きを減らす」の端末では付けない。位置と大きさは transform / opacity だけで動かす（CLS を出さない） */
@media (prefers-reduced-motion: no-preference) {
.ncg__card { transition: border-color .15s, box-shadow .2s; }
.ncg__card:hover { box-shadow: 0 3px 12px rgba(0, 0, 0, .08); }
.ncg__media img { transition: transform .4s cubic-bezier(.2, .7, .2, 1); }
.ncg__head:hover .ncg__media img { transform: scale(1.04); }
.ncg__card.is-open .ncg__head:hover .ncg__media img { transform: none; }
.ncg__more::after { transition: transform .3s cubic-bezier(.2, .7, .2, 1); }
.ncg__chip, .ncg__view button { transition: background-color .15s, color .15s, border-color .15s; }
.ncg__chip:hover { border-color: var(--ncg-accent); }
/* 数値の棒: JS が .is-anim を付けた一覧だけ、カードが画面に入ったら（.is-in）左から伸ばす。JS 無しなら最初から伸びている */
.ncg.is-anim .ncg__bar-t i { transform-origin: left center; transform: scaleX(0); transition: transform .8s cubic-bezier(.2, .7, .2, 1); }
.ncg.is-anim .ncg__card.is-in .ncg__bar-t i { transform: none; }
.ncg.is-anim .ncg__bar:nth-child(2) .ncg__bar-t i { transition-delay: .08s; }
.ncg.is-anim .ncg__bar:nth-child(3) .ncg__bar-t i { transition-delay: .16s; }
.ncg.is-anim .ncg__bar:nth-child(4) .ncg__bar-t i { transition-delay: .24s; }
html[data-nettoge-theme="dark"] .ncg__card:hover { box-shadow: 0 3px 14px rgba(0, 0, 0, .35); }
}
/* ---------- 詳細の中で使える部品（ビルダーや記事から class で使う） ---------- */
/* 数値の札（仕様表の形）: 装填数20…
同じ幅のマス目に、ラベルを小さく上・値を太く下。2026-09-23 依頼主「読みづらい」で横並びの札から変えた */
.ncg-pills { display: grid; grid-template-columns: repeat(auto-fill, minmax(9em, 1fr)); margin: 0 0 12px; border-top: 1px solid var(--ncg-line2); border-left: 1px solid var(--ncg-line2); }
.ncg-pill { display: flex; flex-direction: column; gap: 1px; min-width: 0; padding: 6px 10px; border-right: 1px solid var(--ncg-line2); border-bottom: 1px solid var(--ncg-line2); font-size: 14px; font-weight: 700; line-height: 1.45; font-variant-numeric: tabular-nums; overflow-wrap: break-word; }
.ncg-pill b { font-size: 11px; font-weight: 400; letter-spacing: .04em; color: var(--ncg-mut); }
.ncg-pill.is-accent { font-weight: 400; }
/* 見出し付きの箇条書き（入手など）: */
.ncg-list { margin: 0 0 12px; padding: 6px 0 6px 12px; border-left: 3px solid var(--ncg-accent); }
.ncg-list__h { display: block; font-size: 11px; letter-spacing: .04em; color: var(--ncg-mut); margin-bottom: 2px; }
/* テーマの ul/li 余白（typography-nettoge.css。#body_wrap を含むセレクタもある）に勝つため、この部品の中だけ !important */
.ncg.ncg .ncg-list ul { margin: 0; padding: 0 0 0 1.2em; }
.ncg.ncg .ncg-list li { margin: 0 !important; padding-block: 0; font-size: 14px; line-height: 1.7; }
/* 節の箱（2026-09-23 依頼主が 10 案から「8 節ごと淡い地で包む」を選んだ）:
強み
…（is-bad / is-use / 無印＝灰）。
上に色の太線、中は同じ色の淡い地。見出しの文字もその色 */
.ncg-sec { --c: var(--ncg-mut); position: relative; }
.ncg-sec.is-good { --c: #2f9e57; }
.ncg-sec.is-bad { --c: #d23f31; }
.ncg-sec.is-use { --c: #2f78c9; }
html[data-nettoge-theme="dark"] .ncg-sec.is-good { --c: #4cc47a; }
html[data-nettoge-theme="dark"] .ncg-sec.is-bad { --c: #ef6a5c; }
html[data-nettoge-theme="dark"] .ncg-sec.is-use { --c: #5aa0ea; }
.ncg.ncg .ncg-sec { margin: 16px 0 0; padding: 10px 14px 12px; border: 0; border-top: 3px solid var(--c); background: color-mix(in srgb, var(--c) 8%, transparent); }
.ncg.ncg .ncg-sec:not(.is-good):not(.is-bad):not(.is-use) { background: color-mix(in srgb, var(--c) 6%, transparent); }
.ncg .ncg-sec > .wp-block-group__inner-container { padding: 0; margin: 0; max-width: none; }
.ncg .ncg-sec > :first-child, .ncg .ncg-sec > .wp-block-group__inner-container > :first-child { margin-top: 0; }
.ncg .ncg-sec > :last-child, .ncg .ncg-sec > .wp-block-group__inner-container > :last-child { margin-bottom: 0; }
/* テーマの h5 は明朝（headings-nettoge.css）。本文と同じ字形にする（2026-09-23 依頼主「フォントかえないで」） */
.ncg.ncg .ncg-sec .ncg-h { margin: 0 0 4px; padding: 0; border: 0; color: var(--c); font-family: inherit; font-size: 17px; font-weight: 800; letter-spacing: .04em; font-feature-settings: "palt"; }
.ncg .ncg-sec .ncg-tiers { margin-top: 6px; }
/* 強み・弱点・使い方の見出し: 強み
（is-bad / is-use）。箱の外で使うときの左線の型 */
.ncg .ncg-h, .ncg-h { font-size: 16px; margin: 16px 0 6px; padding: 0 0 0 8px; border: 0; border-left: 4px solid var(--ncg-mut, #5f6368); background: none; }
.ncg .ncg-h::before, .ncg .ncg-h::after { display: none; }
.ncg-h.is-good { border-left-color: #2fb35e; }
.ncg-h.is-bad { border-left-color: #d9483b; }
.ncg-h.is-use { border-left-color: #1e8fe0; }
/* 段階ごとのカード: */
.ncg-tiers { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 10px; margin: 0 0 8px; }
.ncg-tier { border: 1px solid var(--ncg-line, #acaeb1); min-width: 0; }
.ncg-tier__h { background: var(--ncg-band, #e1e2e4); color: var(--ncg-bandfg, #1a1c1e); font-weight: 700; padding: 4px 10px; border-bottom: 1px solid var(--ncg-line, #acaeb1); }
.ncg-tier dl { margin: 0; padding: 6px 10px 8px; display: grid; grid-template-columns: 5.6em 1fr; gap: 4px 8px; font-size: 13px; }
.ncg-tier dt { color: var(--ncg-mut, #5f6368); font-weight: 400; }
.ncg-tier dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.ncg-tier dd img { width: 22px; height: 22px; margin: 0 4px 0 0; vertical-align: middle; display: inline-block; }
.ncg-tier .arcwpn-mat { white-space: normal !important; }
.ncg-note { font-size: 12px; color: var(--ncg-mut, #5f6368); margin: 4px 0 0; }
/* 素材のアイコン（img.ntg-item-ic）の輪郭はテーマの wp-blocks-nettoge.css でサイト全体に付ける（2026-09-23） */