/**
 * Rich archive UI — レアリティバッジ / パックシート / アクティブフィルタータグ /
 * グリッド⇔リスト切替 / Load More ボタン
 *
 * Card-item本体のスタイルは public/css/card-item.css 参照。
 */

/* ========== 共通ラッパー ========== */
.cardgame-rich-archive {
    --cg-accent: #3366cc;
    --cg-accent-bg: #eef3fb;
    --cg-border: #e0e0e0;
    --cg-text: #222;
    --cg-muted: #888;
}

/* ========== フィルタチップバー（共通コンポーネント） ==========
   .cg-chip-bar > [.cg-chip / .cg-chip.is-active / a.cg-chip]
   スマホは横スクロール、PC は折り返し。
*/
.cg-chip-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 4px 0 10px;
    margin: 6px 0 14px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}
.cg-chip-bar::-webkit-scrollbar { height: 6px; }
.cg-chip-bar::-webkit-scrollbar-thumb { background: #ccc; border-radius: 3px; }
@media (max-width: 600px) {
    .cg-chip-bar {
        flex-wrap: nowrap;
        padding-bottom: 12px;
    }
}

.cg-chip {
    display: inline-flex !important;
    align-items: center;
    gap: 7px;
    flex: 0 0 auto;
    padding: 8px 16px;
    background: #fff !important;
    border: 1.5px solid #d0d7de !important;
    border-radius: 999px !important;
    font-size: 12.5px;
    font-weight: 700;
    color: #444 !important;
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none !important;
    transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 1px 2px rgba(0,0,0,0.03) !important;
}
.cg-chip:hover {
    background: #f5f7fa !important;
    border-color: var(--cg-accent, #3366cc) !important;
    color: var(--cg-accent, #3366cc) !important;
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(51,102,204,0.15) !important;
}
.cg-chip.is-active {
    background: linear-gradient(135deg, var(--cg-accent, #3366cc) 0%, #2a4fa0 100%) !important;
    border-color: var(--cg-accent, #3366cc) !important;
    color: #fff !important;
    box-shadow: 0 2px 8px rgba(51,102,204,0.35) !important;
}
.cg-chip.is-active:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(51,102,204,0.45) !important;
}
.cg-chip-count {
    display: inline-block;
    padding: 2px 8px;
    background: rgba(0,0,0,0.07);
    border-radius: 10px;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.3;
    min-width: 22px;
    text-align: center;
    transition: all 0.18s;
}
.cg-chip:hover .cg-chip-count {
    background: rgba(51,102,204,0.12);
}
.cg-chip.is-active .cg-chip-count {
    background: rgba(255,255,255,0.25);
    color: #fff;
}

/* ========== ヒーロー統計カード（1ブロック統合型） ========== */
.cg-hero-block {
    margin: 12px 0 20px;
    padding: 18px 20px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    position: relative;
    overflow: hidden;
    transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s;
}
.cg-hero-block:hover {
    transform: translateY(-1px);
    border-color: #d0d7de;
    box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}
/* 上端: 4色グラデ（全statアクセント） */
.cg-hero-block::before {
    content: '';
    position: absolute;
    left: 0; right: 0; top: 0;
    height: 3px;
    background: linear-gradient(90deg, #3366cc 0%, #d32f2f 33%, #e67e00 66%, #4a5568 100%);
}
/* パックアーカイブ用: 左にパック画像を並べる */
.cg-hero-block--with-pack-image {
    display: flex;
    align-items: center;
    gap: 20px;
}
.cg-hero-block--with-pack-image .cg-hero-pack-image {
    flex: 0 0 auto;
}
.cg-hero-block--with-pack-image .cg-hero-pack-image .cg-pack-image {
    width: 160px;
}
.cg-hero-block--with-pack-image .cg-hero-main {
    flex: 1 1 auto;
    min-width: 0;
}
@media (max-width: 600px) {
    .cg-hero-block--with-pack-image {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }
    .cg-hero-block--with-pack-image .cg-hero-pack-image {
        align-self: center;
    }
    .cg-hero-block--with-pack-image .cg-hero-pack-image .cg-pack-image {
        width: 140px;
    }
}

/* 上段: H2（term 名 + 掲載数を 1 つの見出しに集約。SEO 用に "228枚" まで H2 内に含める） */
.cg-hero-head {
    padding: 0 0 14px;
    margin-bottom: 14px;
    border-bottom: 1px solid #f0f2f5;
}
.cg-hero-h2,
header.cg-hero-head h2.cg-hero-h2 {
    /* SWELL H2 デフォルトスタイル打ち消し。中身の text と count はフレックスで横並び */
    all: unset !important;
    display: flex !important;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px;
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    letter-spacing: 0 !important;
    flex-wrap: nowrap;
}
.cg-hero-h2::before,
.cg-hero-h2::after,
header.cg-hero-head h2.cg-hero-h2::before,
header.cg-hero-head h2.cg-hero-h2::after {
    display: none !important;
    content: none !important;
    background: none !important;
    border: none !important;
}
.cg-hero-h2-text {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 14px;
    font-weight: 600;
    color: #374151;
    line-height: 1.4;
    word-break: break-all;
    overflow-wrap: anywhere;
}
.cg-hero-h2 .cg-hero-count {
    flex: 0 0 auto;
    font-size: 30px;
    font-weight: 800;
    color: #111827;
    line-height: 1;
    letter-spacing: -0.02em;
    font-feature-settings: 'tnum' 1;
    white-space: nowrap;
}
.cg-hero-count-unit {
    font-size: 14px;
    font-weight: 700;
    color: #9ca3af;
    margin-left: 3px;
}

/* 下段: 3分割 詳細（最高/平均/更新） */
.cg-hero-details {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
}
.cg-hero-detail {
    text-align: center;
    padding: 0 8px;
    position: relative;
    min-width: 0;  /* 1行強制のため必須 */
}
.cg-hero-detail + .cg-hero-detail {
    border-left: 1px solid #f0f2f5;
}
/* H3 にラベル + 値を含める新構造。SWELL の H3 デフォルトを打ち消し、子の span でレイアウト */
.cg-hero-detail-heading,
.cg-hero-detail h3.cg-hero-detail-heading {
    all: unset !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
}
.cg-hero-detail h3.cg-hero-detail-heading::before,
.cg-hero-detail h3.cg-hero-detail-heading::after {
    display: none !important;
    content: none !important;
    background: none !important;
    border: none !important;
}
/* span でも h3 でも同じスタイルにする（最終更新は h3.cg-hero-detail-label のまま、
   最高/平均は span.cg-hero-detail-label として h3.cg-hero-detail-heading の中にいる）
   SWELL の h3 デフォルト装飾を打ち消すため h3 セレクタも明示。 */
.cg-hero-detail-label,
.cg-hero-detail h3.cg-hero-detail-label {
    all: unset !important;
    display: block !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    color: #6b7280 !important;
    letter-spacing: 0.04em !important;
    margin: 0 0 6px !important;
    padding: 0 !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
.cg-hero-detail h3.cg-hero-detail-label::before,
.cg-hero-detail h3.cg-hero-detail-label::after {
    display: none !important;
    content: none !important;
    background: none !important;
    border: none !important;
}
.cg-hero-detail-value {
    display: block;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.1;
    color: #111827;
    letter-spacing: -0.02em;
    white-space: nowrap;        /* 1行強制 */
    overflow: hidden;
    text-overflow: ellipsis;
    font-feature-settings: 'tnum' 1;
}
.cg-hero-detail-value--small {
    font-size: 14px;
    font-weight: 700;
    color: #374151;
}
/* 色別の数字強調 */
.cg-hero-detail--max .cg-hero-detail-value { color: #d32f2f; }
.cg-hero-detail--avg .cg-hero-detail-value { color: #e67e00; }

/* ============================================================
   pack_category アーカイブ: 2 行タブ UI + パック一覧グリッド + フローティング
   ============================================================ */
.cg-pcat-tabs-placeholder {
    margin: 16px 0 0;
}
.cg-pcat-tabs {
    display: flex;
    gap: 6px;
    padding: 6px;
    background: #f0f0f1;
    border-radius: 10px;
    border: 1px solid #c3c4c7;
    transition: box-shadow .2s ease, transform .2s ease;
}
/* 各タブを 2 行構成（上: カテゴリ名（小） / 下: ラベル（大）） */
.cg-pcat-tab {
    flex: 1 1 0;
    min-width: 0;
    padding: 8px 12px;
    background: #fff;
    border: 1px solid #c3c4c7;
    border-radius: 6px;
    cursor: pointer;
    color: #2c3338;
    transition: all .15s ease;
    line-height: 1.25;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    text-align: center;
}
.cg-pcat-tab:hover { background: #f6f7f7; border-color: #8c8f94; }
.cg-pcat-tab.active {
    background: #2271b1;
    color: #fff;
    border-color: #135e96;
    box-shadow: 0 2px 6px rgba(34,113,177,.25);
}
.cg-pcat-tab-header {
    font-size: 10px;
    font-weight: 500;
    color: #6b7280;
    letter-spacing: 0.02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
.cg-pcat-tab.active .cg-pcat-tab-header { color: rgba(255,255,255,.85); }
.cg-pcat-tab-label {
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
.cg-pcat-tab-count {
    margin-left: 2px;
    font-size: 11px;
    opacity: .8;
    font-weight: 500;
}

/* スクロール時のフローティング:
   PC: 画面下部に bar 風表示（マウス操作向け）
   SP (≤768px): 画面上部に sticky 配置（下フィルタバーと衝突しないため）
   - 下固定だと .cg-archive-filter-bar (画面下全幅) と重なって見えなくなる問題への対応 */
.cg-pcat-tabs--floating {
    position: fixed;
    left: 50%;
    bottom: 16px;
    transform: translateX(-50%);
    width: calc(100% - 24px);
    max-width: 720px;
    z-index: 9999;
    box-shadow: 0 10px 30px rgba(0,0,0,0.18);
    background: #ffffff;
}
@media (max-width: 768px) {
    /* SP: 画面上部に sticky（下フィルタバーと衝突しないため） */
    .cg-pcat-tabs--floating {
        position: fixed;
        top: 0;
        bottom: auto;
        left: 0;
        right: 0;
        transform: none;
        width: 100%;
        max-width: none;
        border-radius: 0;
        box-shadow: 0 4px 12px rgba(0,0,0,0.12);
        padding: 8px 12px;
    }
}
@media (max-width: 600px) {
    .cg-pcat-tab { padding: 6px 8px; }
    .cg-pcat-tab-label { font-size: 13px; }
    .cg-pcat-tab-header { font-size: 9px; }
}

.cg-pcat-panel {
    display: none;
    margin-top: 12px;
}
.cg-pcat-panel.active { display: block; }
.cg-pcat-empty { padding: 32px; text-align: center; color: #6b7280; }

/* 問題 4 対応: pack_category cards タブで rarity 別ブロック (cg-pack-section) と
   全件グリッド (cg-archive-all-cards) の間に明確な区切りを入れて役割の違いを視覚的に示す */
.cg-pcat-panel--cards .cg-pack-section + .cg-archive-all-cards,
.cg-pcat-panel--cards .cg-context-rarity-breakdown ~ .cg-archive-all-cards {
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid #e5e7eb;
}

/* pack_category 用 H2 / H3 - SWELL のデフォルト装飾打ち消しつつ左ボーダーで簡素な見出し */
.cg-pcat-section-h2,
.cg-pcat-panel h2.cg-pcat-section-h2 {
    all: unset !important;
    display: block !important;
    margin: 16px 0 12px !important;
    padding: 8px 0 8px 14px !important;
    font-size: 1.2rem !important;
    font-weight: 800 !important;
    color: #222 !important;
    line-height: 1.4 !important;
    border-left: 4px solid var(--cg-accent, #3366cc) !important;
    background: none !important;
    box-shadow: none !important;
}
.cg-pcat-section-h2::before,
.cg-pcat-section-h2::after,
.cg-pcat-panel h2.cg-pcat-section-h2::before,
.cg-pcat-panel h2.cg-pcat-section-h2::after {
    display: none !important;
    content: none !important;
    background: none !important;
    border: none !important;
}

/* パック一覧グリッド — カード一覧（.unified-card-grid）と同じ列幅戦略で並べる */
.cg-pcat-pack-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 20px;
}
@media (max-width: 767px) {
    .cg-pcat-pack-list {
        grid-template-columns: repeat(auto-fill, minmax(108px, 1fr));
        gap: 8px;
    }
}
@media (max-width: 360px) {
    .cg-pcat-pack-list {
        grid-template-columns: repeat(2, 1fr);
    }
}

.cg-pcat-pack-item { margin: 0; }
/* 11 件目以降は初期非表示。expanded class で展開 */
.cg-pcat-pack-item--extra { display: none; }
.cg-pcat-pack-list--expanded .cg-pcat-pack-item--extra { display: block; }

/* ============================================================
   全カードアーカイブ（/pokemon/cards/）
   パック一覧タブ = パックカテゴリタイル 7 枚固定
   ============================================================ */
.cg-all-pcat-tiles {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
}
.cg-all-pcat-tile-item { margin: 0; }
.cg-all-pcat-tile {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 14px 16px;
    background: #fff;
    border: 0.5px solid #e5e7eb;
    border-radius: 8px;
    text-decoration: none !important;
    color: #1f2937;
    transition: border-color .15s ease;
    line-height: 1.4;
}
.cg-all-pcat-tile:hover {
    border-color: #04384c;
    text-decoration: none !important;
}
.cg-all-pcat-tile-badge { display: inline-flex; }
.cg-all-pcat-tile-name {
    font-size: 14px;
    font-weight: 500;
    color: #1f2937;
}
.cg-all-pcat-tile-count {
    font-size: 12px;
    color: #6b7280;
}
@media (max-width: 600px) {
    .cg-all-pcat-tiles {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }
    .cg-all-pcat-tile {
        padding: 10px 12px;
        gap: 4px;
    }
    .cg-all-pcat-tile-name { font-size: 13px; }
    .cg-all-pcat-tile-count { font-size: 11px; }
}

.cg-pcat-pack-link {
    display: block;
    text-align: center;
    padding: 10px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    text-decoration: none;
    color: #1f2937;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
    height: 100%;
}
.cg-pcat-pack-link:hover {
    transform: translateY(-2px);
    border-color: #93c5fd;
    box-shadow: 0 6px 18px rgba(0,0,0,0.08);
    text-decoration: none;
}
.cg-pcat-pack-link--nolink {
    cursor: default;
    opacity: .6;
}
.cg-pcat-pack-link--nolink:hover { transform: none; box-shadow: none; }

/* もっと見る / 閉じる ボタン */
.cg-pcat-show-more-wrap {
    margin: 18px 0 4px;
    text-align: center;
}
.cg-pcat-show-more {
    background: #fff;
    color: #2271b1;
    border: 1px solid #2271b1;
    border-radius: 6px;
    padding: 8px 24px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}
.cg-pcat-show-more:hover { background: #2271b1; color: #fff; }
/* パック画像コンテナ: カテゴリごとにアスペクト比を切替.
   - 縦型 booster pack (expansion / reinforcement / high_class / concept / promo / other) = 11:20
   - 横/正方形 BOX (deck_box) = 1:1
   全カードで「同カテゴリ間は枠サイズが完全に揃う」状態を保つ。 */
.cg-pcat-pack-image {
    width: 100%;
    aspect-ratio: 11 / 20; /* デフォルト: 縦型 booster pack */
    margin: 0 auto 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f9fafb;
    border-radius: 4px;
    overflow: hidden;
    line-height: 0;
}
.cg-pcat-pack-image .cg-pack-image,
.cg-pcat-pack-image .cg-pack-image[data-category] {
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: auto !important; /* 親側で固定するため子の aspect-ratio は無効化 */
    background: transparent;
    display: block;
}
.cg-pcat-pack-image .cg-pack-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
}
/* BOX 系 (deck_box) は 1:1 画像を縦長枠内に収める = contain で上下に余白 */
.cg-pcat-pack-image[data-pack-cat="deck_box"] .cg-pack-image img {
    object-fit: contain !important;
}
/* 画像なしプレースホルダ: 11:20 で固定（実画像枠と同サイズ） */
.cg-pcat-pack-noimg {
    width: 100%;
    aspect-ratio: 11 / 20;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f3f4f6;
    color: #9ca3af;
    font-size: 12px;
    border-radius: 4px;
}
@media (max-width: 767px) {
    .cg-pcat-pack-name { font-size: 11px; line-height: 1.3; }
    .cg-pcat-pack-code { font-size: 10px; }
    .cg-pcat-pack-link { padding: 8px 6px; }
}
/* 各パック名は H3。SWELL の H3 デフォルト装飾を全打ち消し */
.cg-pcat-pack-name,
h3.cg-pcat-pack-name {
    all: unset !important;
    display: block !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
    color: #1f2937 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    word-break: break-all;
}
h3.cg-pcat-pack-name::before,
h3.cg-pcat-pack-name::after {
    display: none !important;
    content: none !important;
    background: none !important;
    border: none !important;
}
.cg-pcat-pack-code {
    margin-top: 4px;
    font-size: 11px;
    color: #9ca3af;
}
.cg-pcat-pack-code code {
    background: transparent;
    padding: 0;
    color: inherit;
}

/* リンク化されたパック分類バッジの装飾 */
.cg-hero-meta-h3-cat-link {
    display: inline-block;
    text-decoration: none;
    transition: opacity .15s ease;
}
.cg-hero-meta-h3-cat-link:hover { opacity: 0.8; text-decoration: none; }

/* hero 内のメタ領域（パック分類 H3 / 発売日 H3 / 公式 / description） */
.cg-hero-meta {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid #f0f2f5;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
/* H3 (パック分類 / 発売日) — SWELL H3 デフォルト完全打ち消し
   A3: 親セレクタ依存をやめ、要素タグ単独 (h3.cg-hero-meta-h3) に対して
       all: unset !important を保証する。SWELL の post_content h3::before
       下線・装飾はクラス単独セレクタでも上書きが効くよう ::before / ::after
       も h3 タグ単独セレクタ込みで再宣言する。*/
.cg-hero-meta-h3,
h3.cg-hero-meta-h3,
.cg-hero-main h3.cg-hero-meta-h3 {
    all: unset !important;
    display: flex !important;
    align-items: center;
    gap: 8px;
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
}
.cg-hero-meta-h3::before,
.cg-hero-meta-h3::after,
h3.cg-hero-meta-h3::before,
h3.cg-hero-meta-h3::after,
.cg-hero-main h3.cg-hero-meta-h3::before,
.cg-hero-main h3.cg-hero-meta-h3::after {
    display: none !important;
    content: none !important;
    background: none !important;
    border: none !important;
}
.cg-hero-meta-h3-label {
    color: #6b7280;
    font-weight: 600;
    flex: 0 0 auto;
}
.cg-hero-meta-h3-value {
    color: #1f2937;
    font-weight: 600;
}
.cg-hero-meta-row {
    display: flex;
    gap: 10px;
    font-size: 13px;
    line-height: 1.5;
}
.cg-hero-meta-row .cg-hero-meta-label {
    flex: 0 0 80px;
    color: #6b7280;
    font-weight: 600;
}
.cg-hero-meta-row .cg-hero-meta-value {
    color: #1f2937;
    font-weight: 500;
}
.cg-hero-meta-row .cg-hero-meta-value a {
    color: var(--cg-accent, #3366cc);
    text-decoration: none;
    font-weight: 600;
}
.cg-hero-meta-row .cg-hero-meta-value a:hover { text-decoration: underline; }
.cg-hero-meta-description {
    margin-top: 4px;
    padding: 10px 12px;
    background: #f9fafb;
    border-left: 3px solid var(--cg-accent, #3366cc);
    border-radius: 4px;
    font-size: 13px;
    line-height: 1.7;
    color: #444;
}

@media (max-width: 600px) {
    .cg-hero-block {
        padding: 14px 16px;
    }
    .cg-hero-head {
        padding-bottom: 12px;
        margin-bottom: 12px;
        gap: 10px;
    }
    .cg-hero-h2,
    header.cg-hero-head h2.cg-hero-h2 {
        font-size: 13px !important;
    }
    .cg-hero-count { font-size: 24px; }
    .cg-hero-count-unit { font-size: 12px; }
    .cg-hero-detail {
        padding: 0 6px;
    }
    .cg-hero-detail-label,
    .cg-hero-detail h3.cg-hero-detail-label {
        font-size: 10px !important;
        margin-bottom: 4px !important;
    }
    .cg-hero-detail-value { font-size: 16px; }
    .cg-hero-detail-value--small { font-size: 11px; }
}

/* ---- 絞込UI全体コンテナ ---- */
.cg-archive-filters {
    margin: 12px 0 18px;
    padding: 14px 16px;
    background: linear-gradient(180deg, #fafbfc 0%, #f5f7fa 100%);
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.02);
}
@media (max-width: 600px) {
    .cg-archive-filters {
        padding: 10px 12px;
        margin: 10px 0 14px;
    }
}

/* ---- アクティブフィルタ表示バー ---- */
.cg-active-filter-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 14px;
    margin: 0 0 10px;
    background: #fff7e6;
    border: 1px solid #ffd591;
    border-radius: 10px;
    font-size: 12px;
}
.cg-active-filter-label {
    font-weight: 700;
    color: #d46b08;
    margin-right: 4px;
}
.cg-active-filter-chip {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    padding: 5px 12px 5px 14px;
    background: #fff !important;
    border: 1.5px solid #ffa940 !important;
    border-radius: 999px !important;
    color: #d46b08 !important;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none !important;
    transition: all 0.15s;
}
.cg-active-filter-chip:hover {
    background: #ffe7ba !important;
    color: #873800 !important;
}
.cg-active-filter-x {
    display: inline-block;
    width: 16px;
    height: 16px;
    line-height: 14px;
    text-align: center;
    background: rgba(217,107,8,0.15);
    border-radius: 50%;
    font-size: 13px;
    font-weight: 700;
}

/* ---- 絞込みグループ ---- */
.cg-filter-group {
    margin: 0 0 14px;
}
.cg-filter-group:last-child { margin-bottom: 0; }
.cg-filter-group-label {
    display: block;
    font-size: 11px;
    font-weight: 800;
    color: #6b7280;
    margin: 0 0 8px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
.cg-filter-group-label::before {
    content: '▸';
    display: inline-block;
    margin-right: 4px;
    color: var(--cg-accent, #3366cc);
    transform: translateY(-1px);
}

/* ---- アコーディオン折りたたみ（PC のみ） ---- */
/* 「カード名検索」「パックドロップダウン」は折りたたみ対象外（操作頻度が高い） */
.cg-filter-group--collapsible .cg-filter-group-label {
    cursor: pointer;
    user-select: none;
    position: relative;
    padding-right: 18px;
    transition: color 0.15s;
}
.cg-filter-group--collapsible .cg-filter-group-label:hover {
    color: var(--cg-accent, #3366cc);
}
.cg-filter-group--collapsible .cg-filter-group-label::after {
    content: '▾';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    font-size: 12px;
    color: #9ca3af;
    transition: transform 0.2s ease;
}
.cg-filter-group--collapsed .cg-filter-group-label::after {
    transform: translateY(-50%) rotate(-90deg);
}
.cg-filter-group--collapsed .cg-chip-bar,
.cg-filter-group--collapsed > .cg-filter-dropdown {
    display: none;
}

/* プルダウン型（パック絞込み用） */
.cg-filter-dropdown {
    display: inline-block;
    min-width: 220px;
}
.cg-filter-dropdown select {
    width: 100%;
    padding: 8px 34px 8px 14px;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23555' stroke-width='1.5' fill='none'/%3E%3C/svg%3E") no-repeat right 12px center / 10px;
    border: 1.5px solid #d0d7de;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #222;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    transition: border-color 0.15s;
}
.cg-filter-dropdown select:hover {
    border-color: var(--cg-accent, #3366cc);
}
.cg-filter-dropdown select:focus {
    outline: none;
    border-color: var(--cg-accent, #3366cc);
    box-shadow: 0 0 0 3px rgba(51,102,204,0.15);
}

/* ========== アクティブフィルタータグ ========== */
.cg-active-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin: 16px 0;
}

.cg-active-filters .af-label {
    font-size: 12px;
    color: var(--cg-muted);
    font-weight: 500;
}

.cg-active-filters .af-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: var(--cg-accent-bg);
    border: 1px solid var(--cg-accent);
    border-radius: 18px;
    font-size: 13px;
    color: var(--cg-accent);
    font-weight: 600;
}

.cg-active-filters .af-tag-type {
    font-size: 10px;
    color: var(--cg-muted);
    margin-right: 2px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.cg-active-filters .af-tag-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--cg-accent);
    color: #fff;
    font-size: 11px;
    text-decoration: none;
    line-height: 1;
}

.cg-active-filters .af-tag-close:hover {
    background: #1e4799;
}

/* ========== セクションラベル ========== */
.cg-filter-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--cg-muted);
    margin: 16px 0 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ========== レアリティ絞り込み（プルダウン） ========== */
.cg-rarity-filter {
    margin-bottom: 12px;
}

.cg-rarity-select {
    min-width: 220px;
    max-width: 100%;
    padding: 10px 36px 10px 14px;
    background: #fff url('data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2712%27%20height%3D%278%27%20viewBox%3D%270%200%2012%208%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%3E%3Cpath%20d%3D%27M1%201l5%205%205-5%27%20stroke%3D%27%23333%27%20stroke-width%3D%271.5%27%20fill%3D%27none%27%2F%3E%3C%2Fsvg%3E') no-repeat right 12px center;
    background-size: 10px;
    border: 1.5px solid var(--cg-border);
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--cg-text);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    transition: border-color 0.2s;
}

.cg-rarity-select:hover,
.cg-rarity-select:focus {
    outline: none;
    border-color: var(--cg-accent);
}

/* ========== パック選択ボタン + シート ========== */
.cg-pack-filter-wrap {
    position: relative;
    margin-bottom: 16px;
}

.cg-pack-trigger {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px;
    background: #fff;
    border: 1.5px solid var(--cg-border);
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--cg-text);
    cursor: pointer;
    transition: all 0.2s;
    min-width: 220px;
}

.cg-pack-trigger:hover {
    border-color: var(--cg-accent);
}

.cg-pack-trigger.has-selection {
    border-color: var(--cg-accent);
    background: var(--cg-accent-bg);
    color: var(--cg-accent);
}

.cg-pack-trigger .pt-icon {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.cg-pack-trigger .pt-icon .pt-line {
    width: 14px;
    height: 2px;
    background: currentColor;
    border-radius: 1px;
}
.cg-pack-trigger .pt-icon .pt-line.mid {
    width: 10px;
    margin-left: 2px;
}

.cg-pack-trigger .pt-text {
    flex: 1;
    text-align: left;
}

.cg-pack-trigger .pt-arrow {
    font-size: 11px;
    color: var(--cg-muted);
    transition: transform 0.2s;
}

.cg-pack-trigger.open .pt-arrow {
    transform: rotate(180deg);
}

.cg-pack-sheet {
    display: none;
    margin-top: 8px;
    padding: 16px;
    background: #fff;
    border: 1px solid var(--cg-border);
    border-radius: 10px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
    max-width: 640px;
}

.cg-pack-sheet.open {
    display: block;
}

.cg-pack-sheet .pack-search-wrap {
    position: relative;
    margin-bottom: 12px;
}

.cg-pack-sheet .pack-search {
    width: 100%;
    padding: 10px 14px 10px 36px;
    border: 1px solid var(--cg-border);
    border-radius: 6px;
    font-size: 14px;
    background: #fafafa;
}

.cg-pack-sheet .pack-search:focus {
    outline: none;
    border-color: var(--cg-accent);
    background: #fff;
}

.cg-pack-sheet .pack-search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--cg-muted);
    font-size: 14px;
    pointer-events: none;
}

.cg-pack-sheet .pack-initials {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid #f0f0f0;
}

.cg-pack-sheet .pack-initial-btn {
    padding: 4px 10px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 4px;
    font-size: 12px;
    color: var(--cg-muted);
    cursor: pointer;
    transition: all 0.15s;
}

.cg-pack-sheet .pack-initial-btn:hover {
    background: #f5f5f5;
    color: var(--cg-text);
}

.cg-pack-sheet .pack-initial-btn.active {
    background: var(--cg-accent);
    color: #fff;
}

.cg-pack-sheet .pack-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 6px;
    max-height: 320px;
    overflow-y: auto;
}

.cg-pack-sheet .pack-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: #fafafa;
    border: 1px solid transparent;
    border-radius: 6px;
    font-size: 13px;
    color: var(--cg-text);
    text-decoration: none;
    transition: all 0.15s;
}

.cg-pack-sheet .pack-item:hover {
    background: var(--cg-accent-bg);
    border-color: var(--cg-accent);
    color: var(--cg-accent);
}

.cg-pack-sheet .pack-item.hidden {
    display: none;
}

.cg-pack-sheet .pack-item-count {
    font-size: 11px;
    color: var(--cg-muted);
    margin-left: 6px;
}

.cg-pack-sheet .pack-empty {
    padding: 20px;
    text-align: center;
    color: var(--cg-muted);
    font-size: 13px;
    display: none;
}

/* ========== ソート + ビュー切替行 ========== */
.cg-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.cg-toolbar .cg-sort-select {
    padding: 8px 36px 8px 14px;
    border: 1px solid var(--cg-border);
    border-radius: 6px;
    font-size: 13px;
    background: #fff url('data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2712%27%20height%3D%278%27%20viewBox%3D%270%200%2012%208%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%3E%3Cpath%20d%3D%27M1%201l5%205%205-5%27%20stroke%3D%27%23333%27%20stroke-width%3D%271.5%27%20fill%3D%27none%27%2F%3E%3C%2Fsvg%3E') no-repeat right 12px center;
    background-size: 10px;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
}

.cg-view-toggle {
    display: inline-flex;
    gap: 2px;
    border: 1px solid var(--cg-border);
    border-radius: 6px;
    padding: 2px;
    background: #f5f5f5;
}

.cg-view-toggle .vt-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 28px;
    background: transparent;
    border: 0;
    border-radius: 4px;
    cursor: pointer;
    color: var(--cg-muted);
    transition: all 0.15s;
}

.cg-view-toggle .vt-btn:hover {
    color: var(--cg-text);
}

.cg-view-toggle .vt-btn.active {
    background: #fff;
    color: var(--cg-accent);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

.cg-view-toggle .vt-btn svg {
    width: 14px;
    height: 14px;
}

/* ========== リスト表示 ========== */
.cardgame-rich-archive .cg-list-view {
    display: none;
    flex-direction: column;
    gap: 8px;
}

.cardgame-rich-archive.view-list .unified-card-grid {
    display: none;
}

.cardgame-rich-archive.view-list .cg-list-view {
    display: flex;
}

.cg-list-view .list-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px;
    background: #fff;
    border: 1px solid var(--cg-border);
    border-radius: 8px;
    text-decoration: none;
    color: inherit;
    transition: all 0.15s;
}

.cg-list-view .list-row:hover {
    border-color: var(--cg-accent);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    transform: translateX(2px);
}

.cg-list-view .list-row-img {
    flex: 0 0 64px;
    aspect-ratio: 3/4;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f5f5f5;
    border-radius: 6px;
    overflow: hidden;
}

.cg-list-view .list-row-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.cg-list-view .list-row-body {
    flex: 1;
    min-width: 0;
}

.cg-list-view .list-row-name {
    font-weight: 700;
    font-size: 14px;
    color: var(--cg-text);
    line-height: 1.3;
    margin-bottom: 4px;
    word-break: break-word;
}

.cg-list-view .list-row-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 11px;
    color: var(--cg-muted);
}

.cg-list-view .list-row-meta .rarity-chip {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    color: #fff;
    font-weight: 600;
}

.cg-list-view .list-row-prices {
    flex: 0 0 auto;
    text-align: right;
    font-size: 12px;
}

.cg-list-view .list-row-prices .buy {
    font-weight: 700;
    color: #d9534f;
    font-size: 14px;
}

.cg-list-view .list-row-prices .sell {
    color: #666;
}

.cg-list-view .list-row-arrow {
    flex: 0 0 auto;
    color: var(--cg-muted);
    font-size: 18px;
}

/* ========== Load More (モーダル内のみ使用。アーカイブ本体はページネーション一本化) ========== */
.cg-load-more-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 28px;
    background: #fff;
    border: 1.5px solid var(--cg-accent);
    border-radius: 24px;
    font-size: 14px;
    font-weight: 700;
    color: var(--cg-accent);
    cursor: pointer;
    transition: all 0.2s;
}

.cg-load-more-btn:hover {
    background: var(--cg-accent);
    color: #fff;
}

.cg-load-more-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.cg-load-more-btn.loading::after {
    content: '';
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: cg-spin 0.6s linear infinite;
}

@keyframes cg-spin {
    to { transform: rotate(360deg); }
}

/* モバイル調整 */
@media (max-width: 600px) {
    .cg-toolbar {
        gap: 8px;
    }
    .cg-pack-sheet {
        padding: 12px;
    }
    .cg-pack-sheet .pack-grid {
        grid-template-columns: 1fr;
        max-height: 280px;
    }
}

/* ============================================================
   パックアーカイブ専用セクション (SEO向け)
   TOPランキング表 / レアリティ別 / 関連パック
   ============================================================ */
.cg-pack-section {
    margin: 32px 0;
}

/* SWELL テーマのデフォルト H2 / H3 装飾を完全に上書き
   (SWELLは .post_content h2:where(...) で背景色+疑似要素ボーダーを追加するため、
    明示的に背景を透明化し ::before を無効化する必要がある) */
.cg-pack-section .cg-pack-h2 {
    font-size: 1.25rem !important;
    font-weight: 800 !important;
    color: #222 !important;
    background: transparent !important;
    background-color: transparent !important;
    margin: 0 0 16px !important;
    padding: 10px 0 10px 16px !important;
    border: none !important;
    border-left: 4px solid var(--cg-accent, #3366cc) !important;
    line-height: 1.4 !important;
    box-shadow: none !important;
}

.cg-pack-section .cg-pack-h2::before,
.cg-pack-section .cg-pack-h2::after {
    display: none !important;
    content: none !important;
    border: none !important;
    background: none !important;
}

.cg-pack-section .cg-pack-h3 {
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    color: #333 !important;
    background: transparent !important;
    background-color: transparent !important;
    margin: 24px 0 12px !important;
    padding: 6px 0 6px 12px !important;
    border: none !important;
    border-left: 3px solid #bbb !important;
    line-height: 1.4 !important;
}

.cg-pack-section .cg-pack-h3::before,
.cg-pack-section .cg-pack-h3::after {
    display: none !important;
    content: none !important;
    background: none !important;
}

/* ---- TOPランキング表 もっと見る/閉じるボタン ---- */
.cg-ranking-toggle-wrap {
    display: flex;
    justify-content: center;
    margin: 14px 0 6px;
}
.cg-ranking-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 24px;
    background: #fff;
    border: 1.5px solid var(--cg-accent, #3366cc);
    border-radius: 24px;
    font-size: 13px;
    font-weight: 700;
    color: var(--cg-accent, #3366cc);
    cursor: pointer;
    transition: all 0.18s ease;
}
.cg-ranking-toggle:hover {
    background: var(--cg-accent, #3366cc);
    color: #fff;
}
.cg-ranking-toggle-arrow {
    font-size: 10px;
    line-height: 1;
}
/* 展開アニメは JS で hidden 属性の外し/付けで制御 */
.cg-ranking-row--hidden[hidden] { display: none; }

/* ---- TOPランキング表 ---- */
.cg-ranking-table-wrap {
    overflow-x: auto;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    background: #fff;
}

/* SWELL の post_content table 系デフォルトを完全に上書き
   (cellボーダー・背景色・パディング等がテーマ側で設定されているため明示リセット) */
.cg-ranking-table-wrap table.cg-ranking-table,
table.cg-ranking-table {
    width: 100% !important;
    border-collapse: collapse !important;
    border: none !important;
    border-spacing: 0 !important;
    background: #fff !important;
    font-size: 14px !important;
    margin: 0 !important;
}

.cg-ranking-table thead {
    background: #f6f7f8 !important;
    border-bottom: 2px solid #e0e0e0 !important;
}

.cg-ranking-table thead tr {
    background: transparent !important;
    border: none !important;
}

.cg-ranking-table tbody tr {
    background: #fff !important;
    border: none !important;
}

.cg-ranking-table tbody tr:nth-child(even) {
    background: transparent !important;
}

.cg-ranking-table th {
    padding: 12px 10px !important;
    text-align: left !important;
    font-weight: 600 !important;
    font-size: 12px !important;
    color: #666 !important;
    background: transparent !important;
    border: none !important;
    white-space: nowrap !important;
    line-height: 1.4 !important;
}

.cg-ranking-table td {
    padding: 12px 10px !important;
    border: none !important;
    border-bottom: 1px solid #f0f0f0 !important;
    background: transparent !important;
    color: #333 !important;
    vertical-align: middle !important;
    line-height: 1.4 !important;
}

.cg-ranking-table tr:last-child td {
    border-bottom: none !important;
}

.cg-ranking-table .col-rank {
    width: 52px;
    text-align: center;
    font-weight: 700;
    font-size: 15px;
    color: #555;
}

.cg-ranking-table .rank-top-1 .col-rank {
    color: #d4af37;
    font-size: 20px;
}
.cg-ranking-table .rank-top-2 .col-rank {
    color: #8c8c8c;
    font-size: 18px;
}
.cg-ranking-table .rank-top-3 .col-rank {
    color: #b06b2d;
    font-size: 17px;
}

.cg-ranking-table .col-image {
    width: 64px;
}

.cg-ranking-table .cg-ranking-thumb {
    display: block;
    width: 56px;
    aspect-ratio: 3/4;
    background: #fafafa;
    border-radius: 4px;
    overflow: hidden;
}

.cg-ranking-table .cg-ranking-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.cg-ranking-table .cg-ranking-thumb .no-thumb {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #bbb;
}

.cg-ranking-table .col-name {
    min-width: 200px;
}

.cg-ranking-table .cg-ranking-name {
    color: #222;
    font-weight: 600;
    text-decoration: none;
    word-break: break-word;
}

.cg-ranking-table .cg-ranking-name:hover {
    color: var(--cg-accent, #3366cc);
}

.cg-ranking-table .col-rarity {
    width: 80px;
    text-align: center;
}

.cg-rarity-chip {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 12px;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
}

.cg-ranking-table .col-buy-max,
.cg-ranking-table .col-buy-avg {
    width: 100px;
    text-align: right;
    font-weight: 700;
}

/* line 627 の `.cg-ranking-table td { color:#333 !important; }` を打ち消すため !important を付与 */
.cg-ranking-table .col-buy-max { color: #d32f2f !important; }  /* 最高買取: 赤 */
.cg-ranking-table .col-buy-avg { color: #ff9800 !important; }  /* 平均買取: オレンジ */

/* 順位セルのメダル + 数字 */
.cg-ranking-table .col-rank .rank-medal {
    display: inline-block;
    margin-right: 3px;
    font-size: 1.2em;
    vertical-align: -2px;
}

/* 上位3位行の装飾（金銀銅グラデーション） */
.cg-ranking-table .rank-top-1 {
    background: linear-gradient(90deg, #fff7d6 0%, #fde58a 100%);
}
.cg-ranking-table .rank-top-2 {
    background: linear-gradient(90deg, #f5f5f5 0%, #d0d0d0 100%);
}
.cg-ranking-table .rank-top-3 {
    background: linear-gradient(90deg, #fff1e0 0%, #f2c099 100%);
}
.cg-ranking-table .rank-top-1 td,
.cg-ranking-table .rank-top-2 td,
.cg-ranking-table .rank-top-3 td {
    font-weight: 700;
}

/* レアリティ絞り込みUI（H2直下） */
.cg-rarity-filter {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 12px 0 20px;
    flex-wrap: wrap;
}
.cg-rarity-filter-label {
    font-size: 13px;
    font-weight: 600;
    color: #555;
}
.cg-rarity-filter-select {
    padding: 8px 12px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 14px;
    background: #fff;
    cursor: pointer;
    min-width: 180px;
}
.cg-rarity-filter-select:focus {
    outline: 2px solid #3366cc;
    outline-offset: 1px;
}

/* 全カード一覧セクション */
.cg-pack-all-cards {
    margin-top: 32px;
}
.cg-pack-all-cards .unified-card-grid {
    margin-top: 16px;
}
.cg-pack-all-cards-pagi {
    margin-top: 24px;
    text-align: center;
}
.cg-pack-all-cards-pagi .page-numbers {
    display: inline-block;
    padding: 6px 12px;
    margin: 0 2px;
    background: #f5f5f5;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    color: #333;
    text-decoration: none;
    transition: background 0.12s;
}
.cg-pack-all-cards-pagi .page-numbers:hover {
    background: #e0e0e0;
}
.cg-pack-all-cards-pagi .page-numbers.current {
    background: var(--cg-accent, #3366cc);
    color: #fff;
    border-color: var(--cg-accent, #3366cc);
}

/* 価格値の色分け（card-item 内） */
.card-prices .price-value--max-buy { color: #d32f2f; font-weight: 700; }
.card-prices .price-value--avg-buy { color: #ff9800; font-weight: 700; }
.card-prices .price-value--max-sell { color: #1976d2; font-weight: 700; }

/* ランキング表: カード名列を PC では1行、スマホでは2行に */
.cg-ranking-table .cg-ranking-name-main {
    display: inline;
    font-weight: 700;
}
.cg-ranking-table .cg-ranking-name-num {
    display: inline;
    margin-left: 6px;
    color: #888;
    font-size: 0.9em;
    font-weight: 500;
}

/* 価格セル: 折り返さない */
.cg-ranking-table .col-buy-max,
.cg-ranking-table .col-buy-avg {
    white-space: nowrap;
}

/* モバイル: レアリティ列を隠してスクロール抑制 */
@media (max-width: 600px) {
    .cg-ranking-table {
        font-size: 12px;
    }
    .cg-ranking-table th,
    .cg-ranking-table td {
        padding: 8px 6px;
    }
    .cg-ranking-table .col-image,
    .cg-ranking-table .cg-ranking-thumb {
        width: 48px;
    }
    .cg-ranking-table .col-rarity {
        display: none;
    }
    .cg-ranking-table .cg-ranking-name {
        font-size: 12px;
    }
    .cg-ranking-table .col-rank .rank-medal {
        font-size: 1em;
    }
    /* スマホ: カード名列は2行（名前 / 番号）に分離 */
    .cg-ranking-table .cg-ranking-name-main {
        display: block;
        line-height: 1.3;
    }
    .cg-ranking-table .cg-ranking-name-num {
        display: block;
        margin-left: 0;
        font-size: 10px;
        color: #888;
        margin-top: 2px;
    }
    /* スマホ: 価格列の幅を縮小しフォントも小さく */
    .cg-ranking-table .col-buy-max,
    .cg-ranking-table .col-buy-avg {
        width: auto;
        min-width: 62px;
        padding: 8px 4px;
        font-size: 11px;
    }
    /* col-name の min-width を縮小 */
    .cg-ranking-table .col-name {
        min-width: 0;
    }
}

/* ---- レアリティ別グループ ---- */
.cg-pack-rarity-breakdown .cg-rarity-group {
    margin-bottom: 24px;
}
/* （.cg-rarity-item ラッパーは撤廃。data-rarity は .unified-card-item 本体に付与する設計に統一） */

/* ---- セクション内レアリティドロップダウン (H2 直下、JS 即応 hide/show) ----
 *
 * PHP 側 (render_pack_rarity_breakdown / render_context_rarity_breakdown) が出力する
 * 単一グリッド構造に対し data-rarity 属性ベースで JS (initRarityBreakdownTabs) が
 * 個別カードを hide/show する.
 *
 * - ページワイドな ?cg_rarity= URL フィルタとは別物 (URL を変更しない UI 即応スイッチ)
 * - 共通の .cg-rarity-select (上で定義) を流用. ここでは breakdown 内での余白だけ調整.
 */
.cg-pack-rarity-breakdown .cg-rarity-filter {
    margin: 12px 0 16px;
}

/* ---- 関連パック ---- */
.cg-related-packs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 10px;
}

.cg-related-pack-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    color: #222;
    text-decoration: none;
    transition: all 0.15s;
}

.cg-related-pack-item:hover {
    border-color: var(--cg-accent, #3366cc);
    color: var(--cg-accent, #3366cc);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.cg-related-pack-name {
    font-size: 13px;
    font-weight: 600;
    word-break: break-word;
}

.cg-related-pack-count {
    font-size: 11px;
    color: #888;
    font-weight: 500;
    flex-shrink: 0;
    margin-left: 8px;
}

/* ============================================================
   v3.71+: 旧フロートボタン (.cg-fab) + 旧モーダル (.cg-modal) は完全削除.
   検索 UI は archive 共通シート (.cg-archive-filter-sheet) と
   インラインチップ (.cg-archive-filters) に統合された.
   関連 PHP / JS / DOM もすべて廃止済み.
   ============================================================ */

/* ============================================================
   pack_category バッジ（小バッジ、pill 形）
   - 7 種類: expansion / reinforcement / high_class / deck_box /
             concept / promo / other
   - サイズ 3 段階: small（既定） / medium / large
   - コントラストは WCAG AA を意識し、淡背景＋濃文字で控えめ
   ============================================================ */
.cg-pack-cat-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.02em;
    vertical-align: middle;
    white-space: nowrap;
    border: 1px solid currentColor;
}
.cg-pack-cat-badge.cg-pack-cat-size-small  { font-size: 10px; padding: 1px 6px; }
.cg-pack-cat-badge.cg-pack-cat-size-medium { font-size: 12px; padding: 3px 10px; }
.cg-pack-cat-badge.cg-pack-cat-size-large  { font-size: 14px; padding: 4px 12px; border-radius: 14px; }

.cg-pack-cat-expansion     { color: #2563eb; background: #eff6ff; border-color: #93c5fd; }
.cg-pack-cat-reinforcement { color: #0891b2; background: #ecfeff; border-color: #67e8f9; }
.cg-pack-cat-high_class    { color: #d97706; background: #fffbeb; border-color: #fcd34d; }
.cg-pack-cat-deck_box      { color: #16a34a; background: #f0fdf4; border-color: #86efac; }
.cg-pack-cat-concept       { color: #9333ea; background: #faf5ff; border-color: #d8b4fe; }
.cg-pack-cat-promo         { color: #dc2626; background: #fef2f2; border-color: #fca5a5; }
.cg-pack-cat-other         { color: #64748b; background: #f8fafc; border-color: #cbd5e1; }

/* カードグリッド内（card-item-renderer）でのバッジ余白調整
   親 card セルの幅を超えないように max-width / overflow を保険として付与（モバイルはみ出し防止） */
.unified-card-item .card-pack-cat {
    margin-top: 4px;
    line-height: 1;
    max-width: 100%;
    overflow: hidden;
}
.unified-card-item .card-pack-cat .cg-pack-cat-badge.cg-pack-cat-short {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* カード詳細 hero 内バッジ（pack 名と並べる） */
.cg-card-name-hero .cg-pack-cat-badge {
    margin-right: 6px;
}

/* ============================================================
   /cards/pack/ /cards/rarity/ /cards/character/ /cards/type/
   タクソノミー一覧ページ (templates/taxonomy-list.php)
   フラットデザイン、影・グラデ・transform 禁止
   ============================================================ */
.cg-tax-list {
    --cg-tx-main: #04384c;
    --cg-tx-bg: #fff;
    --cg-tx-soft: #f6f7f8;
    --cg-tx-border: #e5e7eb;
    --cg-tx-text: #1f2937;
    --cg-tx-muted: #6b7280;
    color: var(--cg-tx-text);
    font-weight: 400;
}
.cg-tax-list * { box-sizing: border-box; }

/* ヘッダー */
.cg-tax-list-header {
    margin: 0 0 24px;
    padding: 22px 22px 20px;
    background: var(--cg-tx-bg);
    border: 0.5px solid var(--cg-tx-border);
    border-radius: 12px;
}
.cg-tax-list-h1,
.cg-tax-list h1.cg-tax-list-h1 {
    all: unset !important;
    display: block !important;
    font-size: 22px !important;
    font-weight: 500 !important;
    margin: 0 0 6px !important;
    color: var(--cg-tx-text) !important;
    line-height: 1.35 !important;
}
.cg-tax-list-summary {
    margin: 0;
    color: var(--cg-tx-muted);
    font-size: 12px;
}
.cg-tax-list-summary strong { color: var(--cg-tx-main); font-weight: 500; }
.cg-tax-list-empty {
    margin: 24px 0;
    padding: 22px;
    background: var(--cg-tx-soft);
    border: 0.5px solid var(--cg-tx-border);
    border-radius: 8px;
    text-align: center;
    color: var(--cg-tx-muted);
    font-size: 13px;
}

/* パック専用: カテゴリタブ UI */
.cg-tax-pack-tabs {
    margin: 0 0 18px;
    padding: 6px;
    background: var(--cg-tx-soft);
    border: 0.5px solid var(--cg-tx-border);
    border-radius: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.cg-tax-pack-tab {
    flex: 1 1 auto;
    min-width: 0;
    padding: 8px 10px;
    background: #fff;
    border: 0.5px solid var(--cg-tx-border);
    border-radius: 6px;
    color: var(--cg-tx-text);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    text-align: center;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cg-tax-pack-tab:hover { border-color: var(--cg-tx-main); }
.cg-tax-pack-tab.active {
    background: var(--cg-tx-main);
    border-color: var(--cg-tx-main);
    color: #fff;
}
.cg-tax-pack-tab-count {
    font-size: 10px;
    font-weight: 400;
    margin-left: 2px;
    opacity: .9;
}

/* タブ別表示制御 */
.cg-tax-pack-tabs-body[data-active-tab="all"] .cg-tax-pack-section { display: block; }
.cg-tax-pack-tabs-body[data-active-tab="all"] .cg-pcat-pack-item--extra { display: none; }
.cg-tax-pack-tabs-body[data-active-tab="all"] .cg-tax-pack-section--expanded .cg-pcat-pack-item--extra { display: list-item; }
.cg-tax-pack-tabs-body:not([data-active-tab="all"]) .cg-tax-pack-section { display: none; }
.cg-tax-pack-tabs-body:not([data-active-tab="all"]) .cg-pcat-pack-item--extra { display: list-item; } /* 個別タブでは全件表示 */
.cg-tax-pack-tabs-body[data-active-tab="expansion"]     .cg-tax-pack-section[data-cat="expansion"]     { display: block; }
.cg-tax-pack-tabs-body[data-active-tab="reinforcement"] .cg-tax-pack-section[data-cat="reinforcement"] { display: block; }
.cg-tax-pack-tabs-body[data-active-tab="high_class"]    .cg-tax-pack-section[data-cat="high_class"]    { display: block; }
.cg-tax-pack-tabs-body[data-active-tab="deck_box"]      .cg-tax-pack-section[data-cat="deck_box"]      { display: block; }
.cg-tax-pack-tabs-body[data-active-tab="concept"]       .cg-tax-pack-section[data-cat="concept"]       { display: block; }
.cg-tax-pack-tabs-body[data-active-tab="promo"]         .cg-tax-pack-section[data-cat="promo"]         { display: block; }
.cg-tax-pack-tabs-body[data-active-tab="other"]         .cg-tax-pack-section[data-cat="other"]         { display: block; }

/* もっと見る */
.cg-tax-pack-show-more-wrap { margin: 12px 0 0; text-align: center; }
.cg-tax-pack-show-more {
    padding: 8px 18px;
    background: var(--cg-tx-bg);
    border: 0.5px solid var(--cg-tx-border);
    border-radius: 6px;
    color: var(--cg-tx-main);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
}
.cg-tax-pack-show-more:hover { border-color: var(--cg-tx-main); }
/* 個別タブでは「もっと見る」自体不要 */
.cg-tax-pack-tabs-body:not([data-active-tab="all"]) .cg-tax-pack-show-more-wrap { display: none; }

/* パック専用: カテゴリごとのセクション */
.cg-tax-pack-section { margin: 0 0 28px; }
.cg-tax-pack-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 14px;
    flex-wrap: wrap;
}
.cg-tax-pack-section-h2,
.cg-tax-list h2.cg-tax-pack-section-h2 {
    all: unset !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 18px !important;
    font-weight: 500 !important;
    color: var(--cg-tx-text) !important;
    line-height: 1.4 !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
}
.cg-tax-pack-section-h2::before,
.cg-tax-pack-section-h2::after {
    display: none !important;
    content: none !important;
}
.cg-tax-pack-section-link {
    font-size: 12px;
    color: var(--cg-tx-main);
    text-decoration: none;
    font-weight: 500;
}
.cg-tax-pack-section-link:hover { text-decoration: underline; }

/* レアリティ／キャラクター／カードタイプ用: フラットタイル */
.cg-tax-tile-list {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
}
.cg-tax-tile-item { margin: 0; }
.cg-tax-tile {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 12px 14px;
    background: var(--cg-tx-bg);
    border: 0.5px solid var(--cg-tx-border);
    border-radius: 8px;
    text-decoration: none !important;
    color: var(--cg-tx-text);
    transition: border-color .15s ease;
    font-size: 14px;
    font-weight: 500;
}
.cg-tax-tile:hover {
    border-color: var(--cg-tx-main);
    text-decoration: none !important;
}
.cg-tax-tile-name { flex: 1 1 auto; min-width: 0; }
.cg-tax-tile-count {
    flex: 0 0 auto;
    color: var(--cg-tx-muted);
    font-size: 12px;
    font-weight: 400;
}

@media (max-width: 600px) {
    .cg-tax-list-header { padding: 18px 16px 16px; }
    .cg-tax-list-h1 { font-size: 18px !important; }
    .cg-tax-tile-list { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .cg-tax-pack-section-head { flex-direction: column; align-items: flex-start; gap: 4px; }
    .cg-tax-pack-tabs {
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
    }
    .cg-tax-pack-tab {
        flex: 0 0 auto;
        font-size: 11px;
        padding: 7px 10px;
    }
}


/* =========================================================================
   Phase 3 B-3: モバイル用 ボトムバー + ボトムシート
   --------------------------------------------------------------------------
   - PC (>=769px): インラインチップ (.cg-archive-filters) を維持、ボトムバー非表示.
   - SP (<=768px): インラインチップ非表示、画面下に固定バー → タップでシート展開.
   - シート CSS は simulator.css の .cg-sim-sheet パターンを踏襲しつつ独立クラス名で.
   ========================================================================= */

/* PC: インラインチップ表示 / ボトムバー & シート 完全非表示 */
@media (min-width: 769px) {
    .cg-archive-filter-bar { display: none !important; }
    .cg-archive-filter-sheet { display: none !important; }
}

/* SP: インラインチップ非表示 → ボトムバー1本に集約 */
@media (max-width: 768px) {
    .cg-archive-filters { display: none; }
    /* アクティブフィルタバー (× チップで個別解除) は SP でも残す: PHP 側で active_count を
       バッジ表示するためバー自体には件数が反映されているが、シート閉じている間に
       「何が選ばれているか」を可視化したいので残置. */
}

/* ----- ボトムバー (画面下全幅) ----- */
.cg-archive-filter-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99998; /* シート (99999) より下、SWELL ヘッダー (~9999) より上 */
    height: calc(56px + env(safe-area-inset-bottom));
    padding: 0 18px;
    padding-bottom: max(0px, env(safe-area-inset-bottom));
    border: none;
    border-top: 0.5px solid #e5e7eb;
    background: #1f2937;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.08);
    transition: background 0.15s;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
    touch-action: manipulation;
}
.cg-archive-filter-bar:hover { background: #111827; }
.cg-archive-filter-bar:active { background: #0b1220; }
.cg-archive-filter-bar-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    color: #fff;
}
.cg-archive-filter-bar-text { line-height: 1; }
.cg-archive-filter-bar-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 7px;
    border-radius: 11px;
    background: #f59e0b;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
}

/* ボトムバー有効時、本文末尾に余白を確保 (バーが本文を隠さないように)
   バーが実在するときだけ余白を付けるため、:has(#cgArchiveFilterBar) でガード.
   :has 非対応ブラウザでは余白が付かないが、バー自体は半透明オーバーレイ風ではなく
   不透明背景のため最後数十 px のページ末尾だけ被る形になる (致命ではない). */
@media (max-width: 768px) {
    body:has(#cgArchiveFilterBar) {
        padding-bottom: calc(68px + env(safe-area-inset-bottom));
    }
}

/* ----- ボトムシート ----- */
.cg-archive-filter-sheet {
    position: fixed;
    inset: 0;
    z-index: 99999; /* SWELL 固定ヘッダー (~9999) / バー (99998) より上 */
    display: flex;
    align-items: flex-end;
    justify-content: center;
}
.cg-archive-filter-sheet[hidden] { display: none; }
.cg-archive-filter-sheet-overlay {
    position: absolute;
    inset: 0;
    background: rgba(31, 41, 55, 0.55);
}
.cg-archive-filter-sheet-panel {
    position: relative;
    width: 100%;
    max-width: 560px;
    max-height: calc(100vh - 60px);
    max-height: calc(100dvh - 60px);
    background: #fff;
    border-radius: 16px 16px 0 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: transform 0.18s ease;
}
.cg-archive-filter-sheet-panel.cg-archive-filter-sheet-panel--dragging { transition: none; }

.cg-archive-filter-sheet-handle {
    flex: 0 0 auto;
    padding: 8px 0 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: grab;
    touch-action: none;
}
.cg-archive-filter-sheet-handle span {
    display: block;
    width: 40px;
    height: 4px;
    background: #d1d5db;
    border-radius: 999px;
}
.cg-archive-filter-sheet-handle:active { cursor: grabbing; }

.cg-archive-filter-sheet-head {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 14px 12px;
    background: #fff;
    border-bottom: 0.5px solid #e5e7eb;
}
.cg-archive-filter-sheet-title,
.cg-archive-filter-sheet h2.cg-archive-filter-sheet-title {
    all: unset !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #111827 !important;
    line-height: 1.35 !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
}
.cg-archive-filter-sheet-title::before,
.cg-archive-filter-sheet-title::after {
    display: none !important; content: none !important; background: none !important; border: none !important;
}
.cg-archive-filter-sheet-close {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: #f3f4f6;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    color: #111827;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    -webkit-tap-highlight-color: rgba(0,0,0,0.1);
    touch-action: manipulation;
}
.cg-archive-filter-sheet-close:hover { background: #e5e7eb; }
.cg-archive-filter-sheet-close:active { background: #d1d5db; }

.cg-archive-filter-sheet-body {
    padding: 14px 16px 18px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    display: flex;
    flex-direction: column;
    gap: 18px;
    flex: 1 1 auto;
    min-height: 0;
}

/* シート内セクション */
.cg-afs-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.cg-afs-section-title {
    margin: 0 !important;
    padding: 0 !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #374151 !important;
    line-height: 1.3 !important;
    display: flex;
    align-items: center;
    gap: 8px;
    background: none !important;
    border: none !important;
}
.cg-afs-section-title::before, .cg-afs-section-title::after {
    display: none !important; content: none !important;
}
.cg-afs-section-hint {
    font-size: 11px;
    font-weight: 500;
    color: #6b7280;
    background: #f3f4f6;
    padding: 2px 8px;
    border-radius: 999px;
}

/* チップバー (rarity / form / cg_type 共通) */
.cg-afs-chip-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.cg-afs-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1.5px solid #d1d5db;
    border-radius: 999px;
    background: #fff;
    color: #374151;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.12s;
    -webkit-tap-highlight-color: rgba(0,0,0,0.05);
    touch-action: manipulation;
}
.cg-afs-chip:hover { background: #f9fafb; }
.cg-afs-chip.is-active {
    background: #1f2937;
    border-color: #1f2937;
    color: #fff;
}
.cg-afs-chip-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 16px;
    padding: 0 5px;
    border-radius: 999px;
    background: #f3f4f6;
    color: #6b7280;
    font-size: 10.5px;
    font-weight: 700;
    line-height: 1;
}
.cg-afs-chip.is-active .cg-afs-chip-count {
    background: rgba(255,255,255,0.2);
    color: #fff;
}

/* パックリスト (検索可能チェックボックスリスト) */
.cg-afs-pack-search {
    width: 100%;
    height: 40px;
    padding: 0 12px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    background: #fff;
    color: #111827;
    font-size: 13px;
    -webkit-appearance: none;
    appearance: none;
}
.cg-afs-pack-search:focus { outline: none; border-color: #3366cc; box-shadow: 0 0 0 3px rgba(51,102,204,0.15); }
.cg-afs-pack-selected {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    min-height: 0;
}
.cg-afs-pack-selected:empty { display: none; }
.cg-afs-pack-selected-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 6px 4px 12px;
    background: #1f2937;
    border-radius: 999px;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
}
.cg-afs-pack-selected-chip-x {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: rgba(255,255,255,0.2);
    color: #fff;
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
    border: none;
    padding: 0;
}
.cg-afs-pack-selected-chip-x:hover { background: rgba(255,255,255,0.35); }

.cg-afs-pack-list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 280px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #fff;
}
.cg-afs-pack-item {
    border-bottom: 0.5px solid #f3f4f6;
}
.cg-afs-pack-item:last-child { border-bottom: none; }
.cg-afs-pack-item[hidden] { display: none; }
.cg-afs-pack-label {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    cursor: pointer;
    transition: background 0.12s;
    user-select: none;
}
.cg-afs-pack-label:hover { background: #f9fafb; }
.cg-afs-pack-cb {
    width: 18px;
    height: 18px;
    margin: 0;
    flex: 0 0 auto;
    accent-color: #1f2937;
}
.cg-afs-pack-name {
    flex: 1 1 auto;
    font-size: 13px;
    color: #111827;
    line-height: 1.3;
    word-break: break-word;
}
.cg-afs-pack-count {
    flex: 0 0 auto;
    font-size: 11.5px;
    color: #6b7280;
    background: #f3f4f6;
    padding: 2px 8px;
    border-radius: 999px;
    font-weight: 600;
}
.cg-afs-pack-item.is-active .cg-afs-pack-name { font-weight: 700; }
.cg-afs-pack-empty {
    margin: 12px 0 0;
    padding: 12px;
    text-align: center;
    color: #6b7280;
    font-size: 12px;
    background: #f9fafb;
    border-radius: 8px;
}

/* v3.71+: ボトムシート内 カード名検索インプット (cg_q) */
.cg-afs-keyword-input {
    width: 100%;
    height: 42px;
    padding: 0 14px;
    border: 1.5px solid #d1d5db;
    border-radius: 8px;
    background: #fff;
    color: #111827;
    font-size: 14px;
    -webkit-appearance: none;
    appearance: none;
    box-sizing: border-box;
}
.cg-afs-keyword-input:focus {
    outline: none;
    border-color: #3366cc;
    box-shadow: 0 0 0 3px rgba(51, 102, 204, 0.15);
}

/* v3.71+: PC インラインチップ列内 カード名検索フォーム (cg_q) */
.cg-filter-group--search {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.cg-filter-search-form {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.cg-filter-search-input {
    height: 36px;
    padding: 0 12px;
    min-width: 180px;
    max-width: 320px;
    border: 1.5px solid #d1d5db;
    border-radius: 8px;
    background: #fff;
    color: #111827;
    font-size: 13px;
    -webkit-appearance: none;
    appearance: none;
    box-sizing: border-box;
}
.cg-filter-search-input:focus {
    outline: none;
    border-color: #3366cc;
    box-shadow: 0 0 0 3px rgba(51, 102, 204, 0.15);
}
.cg-filter-search-btn {
    height: 36px;
    padding: 0 14px;
    border: none;
    border-radius: 8px;
    background: #1f2937;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.12s;
}
.cg-filter-search-btn:hover { background: #111827; }
.cg-filter-search-btn:active { background: #0b1220; }
.cg-filter-search-clear {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #f3f4f6;
    color: #374151;
    text-decoration: none;
    font-size: 16px;
    line-height: 1;
}
.cg-filter-search-clear:hover { background: #e5e7eb; color: #111827; }

/* ソートセレクト */
.cg-afs-sort-select {
    width: 100%;
    height: 42px;
    padding: 0 36px 0 14px;
    border: 1.5px solid #d1d5db;
    border-radius: 8px;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23555' stroke-width='1.5' fill='none'/%3E%3C/svg%3E") no-repeat right 12px center / 10px;
    color: #111827;
    font-size: 14px;
    font-weight: 600;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
}
.cg-afs-sort-select:focus { outline: none; border-color: #3366cc; box-shadow: 0 0 0 3px rgba(51,102,204,0.15); }

/* フッター (リセット / 適用) */
.cg-archive-filter-sheet-foot {
    flex: 0 0 auto;
    display: flex;
    gap: 10px;
    padding: 12px 16px;
    padding-bottom: max(12px, env(safe-area-inset-bottom));
    border-top: 0.5px solid #e5e7eb;
    background: #fff;
}
.cg-afs-btn {
    flex: 1 1 auto;
    height: 46px;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.12s;
    -webkit-tap-highlight-color: rgba(0,0,0,0.1);
    touch-action: manipulation;
}
.cg-afs-btn--reset {
    flex: 0 0 38%;
    background: #f3f4f6;
    color: #374151;
}
.cg-afs-btn--reset:hover { background: #e5e7eb; }
.cg-afs-btn--apply {
    background: #1f2937;
    color: #fff;
}
.cg-afs-btn--apply:hover { background: #111827; }
.cg-afs-btn--apply:active { background: #0b1220; }

/* ============================================================
   共通 操作UI 着せ替え（トークン準拠・機能不変）— 2026-07-18
   トップページ再デザイン（ライト基調）のデザインシステム(:root --cg-*)を、
   共通のソート/絞り込みコントロールに適用する。動作・パラメータ・PHP は不変。
   トークンは public/css/homepage.css の :root で定義（サイト全体で参照可・ライト値）。
   → プルダウンは明るい白地、ピル選択=金。
   ============================================================ */

/* --- 並び替え/絞り込みプルダウン（明るい白地・金フォーカス） --- */
.cg-afs-sort-select,
.cg-toolbar .cg-sort-select,
.cg-rarity-filter-select {
    background-color: var(--cg-panel, #ffffff);
    /* 濃色の矢印アイコン（白地で視認できるように） */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236b7280' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
    border-color: var(--cg-line, #e7e2d8);
    color: var(--cg-ink, #23262b);
    color-scheme: light;
}
.cg-afs-sort-select:hover,
.cg-toolbar .cg-sort-select:hover,
.cg-rarity-filter-select:hover {
    border-color: var(--cg-gold, #e0a92e);
}
.cg-afs-sort-select:focus,
.cg-afs-sort-select:focus-visible,
.cg-toolbar .cg-sort-select:focus,
.cg-toolbar .cg-sort-select:focus-visible,
.cg-rarity-filter-select:focus,
.cg-rarity-filter-select:focus-visible {
    outline: none;
    border-color: var(--cg-gold, #e0a92e);
    box-shadow: 0 0 0 3px rgba(224, 169, 46, 0.20);
}

/* --- ビュー切替（明るい板・アクティブは金アクセント） --- */
.cg-view-toggle {
    background: var(--cg-panel2, #f6f2ea);
    border-color: var(--cg-line, #e7e2d8);
}
.cg-view-toggle .vt-btn { color: var(--cg-mut, #6b7280); }
.cg-view-toggle .vt-btn:hover { color: var(--cg-ink, #23262b); }
.cg-view-toggle .vt-btn.active {
    background: var(--cg-panel, #ffffff);
    color: var(--cg-gold-deep, #c48f1d);
    box-shadow: 0 1px 2px rgba(120, 96, 40, 0.18);
}

/* --- レア度ピル / チップ（選択=金グラデ・ホバー/フォーカス） --- */
.cg-archive-rarity-filter-links .cg-chip,
.cg-pcat-other-categories .cg-chip--pcat {
    transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
.cg-archive-rarity-filter-links .cg-chip:hover,
.cg-pcat-other-categories .cg-chip--pcat:hover {
    border-color: var(--cg-gold, #e0a92e) !important;
    transform: translateY(-1px);
}
.cg-archive-rarity-filter-links .cg-chip:focus-visible,
.cg-pcat-other-categories .cg-chip--pcat:focus-visible,
.cg-rarity-filter-select:focus-visible,
.cg-view-toggle .vt-btn:focus-visible {
    outline: 2px solid var(--cg-gold, #e0a92e);
    outline-offset: 2px;
}
/* 選択中（現在のフィルタ）は金グラデのピル */
.cg-archive-rarity-filter-links .cg-chip[aria-current],
.cg-archive-rarity-filter-links .cg-chip.is-active,
.cg-archive-rarity-filter-links .cg-chip.active,
.cg-pcat-other-categories .cg-chip--pcat[aria-current],
.cg-pcat-other-categories .cg-chip--pcat.is-active,
.cg-pcat-other-categories .cg-chip--pcat.active {
    background: linear-gradient(92deg, #ecbb4a, #dd9a25) !important;
    border-color: transparent !important;
    color: #3a2a06 !important;
    font-weight: 800;
}

/* --- 絞り込みチップの選択状態を金ピルに統一（ライトテーマの選択色は金）---
   既定の青グラデ (.cg-chip.is-active, 上部で定義) を、後勝ち + !important で上書き。
   機能・マークアップ・JS は不変（色のみ）。 */
.cg-chip.is-active,
.cg-chip.is-active:hover {
    background: linear-gradient(135deg, #ecbb4a 0%, #dd9a25 100%) !important;
    border-color: transparent !important;
    color: #3a2a06 !important;
    box-shadow: 0 2px 8px rgba(224, 169, 46, 0.35) !important;
}
.cg-chip.is-active .cg-chip-count {
    background: rgba(255, 255, 255, 0.4);
    color: #3a2a06;
}
/* モバイル・ボトムシートのチップ選択も金に統一 */
.cg-afs-chip.is-active {
    background: linear-gradient(135deg, #ecbb4a, #dd9a25);
    border-color: transparent;
    color: #3a2a06;
}
.cg-afs-chip.is-active .cg-afs-chip-count {
    background: rgba(255, 255, 255, 0.4);
    color: #3a2a06;
}


/* ============================================================
   ソート/絞り込みUI 着せ替え（正本の和紙/墨/ネオン/明朝に統一）
   正本: docs/superpowers/specs/assets/2026-07-18-homepage-design-AUTHORITATIVE.html
   ── セレクタ・パラメータ・JS は一切変更しない。見た目（色/枠/フォント）のみ ──
   ============================================================ */
.cardgame-rich-archive {
    /* アクセントをネオンピンクに（var(--cg-accent) 参照の全コントロールが追従） */
    --cg-accent: #ff2d6f;
    --cg-accent-bg: #fff0f5;
    --cg-border: rgba(21,21,28,.14);
    --cg-text: #15151c;
    --cg-muted: #6b6b74;
    --cg-sumi: #15151c;
    --cg-neon: #ff2d6f;
    --cg-num: "Oswald", "Zen Kaku Gothic New", sans-serif;
    --cg-disp: "Zen Antique", "Yu Mincho", serif;
}

/* 上端の4色グラデ帯 → ネオン→琥珀→墨の上質ライン */
.cardgame-rich-archive .cg-hero-block::before {
    background: linear-gradient(90deg, #ff2d6f 0%, #f0b429 52%, #15151c 100%) !important;
}
/* ヒーロー大数字・価格は数字書体(Oswald) */
.cardgame-rich-archive .cg-hero-h2 .cg-hero-count,
.cardgame-rich-archive .cg-hero-detail-value {
    font-family: var(--cg-num);
    font-feature-settings: "tnum" 1;
}
.cardgame-rich-archive .cg-hero-detail--max .cg-hero-detail-value { color: #ff2d6f; }
.cardgame-rich-archive .cg-hero-detail--avg .cg-hero-detail-value { color: #1b8f9e; }

/* レア度チップ: 枠は墨系、選択は墨ベタ、ホバーはネオン */
.cardgame-rich-archive .cg-chip {
    border-color: rgba(21,21,28,.18) !important;
    color: #15151c !important;
}
.cardgame-rich-archive .cg-chip:hover {
    background: #fff0f5 !important;
    border-color: #ff2d6f !important;
    color: #ff2d6f !important;
    box-shadow: 0 3px 8px rgba(255,45,111,.14) !important;
}
.cardgame-rich-archive .cg-chip.is-active {
    background: #15151c !important;
    border-color: #15151c !important;
    color: #fff !important;
    box-shadow: 0 2px 8px rgba(21,21,28,.28) !important;
}
.cardgame-rich-archive .cg-chip.is-active:hover {
    box-shadow: 0 4px 12px rgba(21,21,28,.35) !important;
}

/* pack_category タブ: 選択は墨ベタ */
.cardgame-rich-archive .cg-pcat-tab:hover { border-color: #ff2d6f; background: #fff0f5; }
.cardgame-rich-archive .cg-pcat-tab.active {
    background: #15151c;
    color: #fff;
    border-color: #15151c;
    box-shadow: 0 2px 6px rgba(21,21,28,.25);
}

/* アクティブ絞り込みチップ（旧オレンジ → ネオン） */
.cardgame-rich-archive .cg-active-filter-chip {
    border-color: #ff2d6f !important;
    color: #c40f4d !important;
}
.cardgame-rich-archive .cg-active-filter-chip:hover {
    background: #fff0f5 !important;
    color: #15151c !important;
}
.cardgame-rich-archive .cg-active-filter-x { background: rgba(255,45,111,.16); color: #c40f4d; }

/* プルダウン（絞り込み/ソート）: フォーカスはネオン */
.cardgame-rich-archive .cg-filter-dropdown select,
.cardgame-rich-archive .cg-afs-sort-select,
.cardgame-rich-archive .cg-toolbar .cg-sort-select {
    border-color: rgba(21,21,28,.2);
    color: #15151c;
}
.cardgame-rich-archive .cg-filter-dropdown select:hover,
.cardgame-rich-archive .cg-afs-sort-select:hover { border-color: #ff2d6f; }
.cardgame-rich-archive .cg-filter-dropdown select:focus,
.cardgame-rich-archive .cg-afs-sort-select:focus,
.cardgame-rich-archive .cg-toolbar .cg-sort-select:focus {
    outline: none;
    border-color: #ff2d6f !important;
    box-shadow: 0 0 0 3px rgba(255,45,111,.16) !important;
}

/* カード名検索: 入力フォーカスはネオン、ボタンはネオンベタ */
.cardgame-rich-archive .cg-filter-search-input:focus {
    border-color: #ff2d6f;
    box-shadow: 0 0 0 3px rgba(255,45,111,.16);
}
.cardgame-rich-archive .cg-filter-search-btn {
    background: #ff2d6f;
    letter-spacing: .08em;
}
.cardgame-rich-archive .cg-filter-search-btn:hover { background: #15151c; }
.cardgame-rich-archive .cg-filter-search-btn:active { background: #000; }

/* フィルターグループのラベル/三角: 墨系に */
.cardgame-rich-archive .cg-filter-group-label { color: #15151c; }