/*=======================
        0.タブ画像
=======================*/
#tab1 {
    background-image: url("../img/chekertab1.webp");
    background-size: cover;
    background-position: center;
    color: white;
    text-shadow: 1px 1px 2px black;
}

#tab2 {
    background-image: url("../img/chekertab2.webp");
    background-size: cover;
    background-position: center;
    color: white;
    text-shadow: 1px 1px 2px black;
}

/*=======================
    1.ツイッターボタン
=======================*/
/*Xポストボタン*/
.summary-share {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: 100%;
    border-bottom: 4px solid #ddd;
}

.custom-tweet-button {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background-color: #000;
    color: #fff;
    padding: 0.3rem 0.4rem;
    border-radius: 20px;
    text-decoration: none;
    font-weight: bold;
    font-size: 13px;
    transition: background 0.2s;
}

.custom-tweet-button:hover {
    background-color: #333;
}

.tweet-icon {
    width: 16px;
    height: 16px;
}
/*=======================
    2.スマホ版所持率
=======================*/

.top-summary {
    display: none;
}
@media (max-width: 700px) {
    .top-summary {
        display: flex;
        flex-direction: column;
        position: sticky;
        top: 0;
        background: #fff;
        border-bottom: 2px solid #ccc;
        z-index: 2000;
        padding: 2px;
        font-size: clamp(14px, 3vw, 20px);
    }
}

/*所持率+ポストボタン*/
.summary-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.1rem;
    flex-wrap: wrap;
    gap: 0.1rem;
}


/*パック名選択*/
.summary-bar select {
    font-size: 0.6rem;
    padding: 0.2rem;
}

/* ジャンプボタン */
.jump-pack-btn {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: 13px;
    font-weight: 600;
    padding: 0.3rem 20px;
    border: none;
    border-radius: 6px;
    background: linear-gradient(135deg, #42a5f5, #1e88e5);
    color: #fff;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
    transition: transform 0.2s, background 0.2s;
}

.jump-pack-btn:hover {
    transform: translateY(-1px);
    background: linear-gradient(135deg, #64b5f6, #2196f3);
}

.jump-pack-btn::before {
    content: "📍";
    font-size: 13px;
}

.jump-pack-btn:active {
    transform: translateY(0);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
}



#mobile-pack-summary .pack-rate {
    font-size: clamp(14px, 2.6vw, 20px);
    text-align: right;
}

/* === モバイル上部：進捗バー === */
#mobile-pack-summary .pack-meters {
    margin-top: .2rem;
    display: grid;
    gap: .25rem;
}

#mobile-pack-summary .meter {
    display: grid;
    grid-template-columns: 64px 1fr auto;
    /* ラベル / バー / 値(%) */
    align-items: center;
    gap: .4rem;
}

#mobile-pack-summary .meter-label {
    font-size: clamp(12px, 2.6vw, 16px);
    white-space: nowrap;
    opacity: .9;
}

#mobile-pack-summary .meter-track {
    height: 8px;
    background: #eee;
    border-radius: 999px;
    overflow: hidden;
}

#mobile-pack-summary .meter-bar {
    display: block;
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, #4caf50, #81c784);
    /* 所持率 */
}

#mobile-pack-summary .meter-bar.-comp {
    background: linear-gradient(90deg, #2196f3, #64b5f6);
    /* コンプリート率 */
}

#mobile-pack-summary .meter-val {
    font-variant-numeric: tabular-nums;
    font-size: clamp(12px, 2.6vw, 16px);
    min-width: 3.5ch;
    text-align: right;
    opacity: .9;
}

/* 端末幅が極小のときは縦積みレイアウトに */
@media (max-width: 360px) {
    #mobile-pack-summary .meter {
        grid-template-columns: 56px 1fr;
        grid-template-areas:
            "label value"
            "bar   bar";
        gap: .25rem .4rem;
    }

    #mobile-pack-summary .meter-label {
        grid-area: label;
    }

    #mobile-pack-summary .meter-track {
        grid-area: bar;
    }

    #mobile-pack-summary .meter-val {
        grid-area: value;
        text-align: right;
    }
}

/* アニメーションを抑制したいユーザー配慮（今回は静的なので任意） */
@media (prefers-reduced-motion: reduce) {
    #mobile-pack-summary .meter-bar {
        transition: none;
    }
}
/*=======================
        3.PC版所持率
=======================*/
/*サイドバー*/
.page-wrapper {
    display: flex;
}
@media (max-width: 700px) {
.page-wrapper {
        flex-direction: column;
    }
}


/*所持率パネル*/
.summary-panel {
    width: 20%;
    flex-shrink: 0;
    padding-left: 0.2%;
    background: #fafafa;
    /* 少し明るいグレー */
    border-radius: 0 8px 8px 0;
    /* 左はピタッと */
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
    border-right: 12px solid #ccc;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    font-size: clamp(12px, 1.5vw, 30px);
}
@media (max-width: 700px) {
.summary-panel {
    display: none;
    width: 100%;
    height: auto;
    border-right: none;
    border-bottom: 2px solid #ccc;
    position: relative;
}
}

/*================全所持率ブロック==============*/
/*所持率+ポスト*/
#summary {
    display: flex;
    flex-direction: column;
    align-items: flex-start;/* 左寄せベース */
    margin-bottom: 0.5em;/*各パック所持率と空ける*/
    background: #fff;/* 白背景でカード風 */
    border-top: 4px solid #ddd;
    border-radius: 6px;
}

/*全カード見出し*/
.summary-panel h4 {
    margin: 0;
    font-weight: bold;
    font-size: clamp(0.9rem, 2vw, 1.1rem);
    color: #333;
}

/*全カード所持率コンプ率表記*/
.summary-rate {
    font-size: clamp(0.4rem, 1.6vw, 1.1rem);
    margin-top: 0.2em;
    align-self: flex-end;
    /* ← 右寄せにする */
    width: 100%;
    text-align: right;
}



/*============--各パック所持率ブロック=============*/
/*パック全体*/
#pack-summary-list {
    margin: 0.5em 0;
}
/*各パックブロック+ポストボタン*/
.pack-summary{
    margin-bottom: 0.3em;
    /* 必要なら間隔調整 */
    background: #fff;
}
/*パック名リンク*/
.pack-summary-link {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-decoration: none;
    color: #333;
    text-decoration: none;
    margin: 0.5em 0;
}
/*パック名（メイン）*/
.pack-summary-name {
    font-weight: bold;
    font-size: clamp(0.5rem, 1.7vw, 1.1rem);
    line-height: 1.4;
}
/*パック名（サブ）*/
.pack-summary-name small {
    display: block;
    font-size: 80%;
    margin-left: 0;
}



/*パック所持率コンプ率表記*/
.pack-summary-rate {
    font-size: clamp(0.5rem, 1.5vw, 1.1rem);
    margin-top: 0.2em;
    align-self: flex-end;
    width: 100%;
    text-align: right;
}



/*===============================
        5.メニュー
===============================*/
/*メニュ＋カード一覧*/
.card-content {
    flex: 1;
    padding: 0 0.4rem;
}

/*メニュー全体*/
.menu {
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-right: 0.5rem;
}
.menu-mobile{
    display: flex;
}
/*メニューボタン(PC)*/
.menu button{
    width: 100%;
    padding: 0.6rem 0;
    margin: 0.2rem ;
    font-size: 0.85rem;
    border: none;
    border-radius: 6px;
    background: linear-gradient(135deg, #4caf50, #81c784);
    color: #fff;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.3s, transform 0.2s;
    text-align: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
/*メニューボタン(モバイル)*/
.menu-mobile button {
    font-size: 0.6rem;
    width: 100%;
    padding: 8px 6px;
    margin: 0.1rem;
    border: none;
    border-radius: 6px;
    background: linear-gradient(135deg, #4caf50, #81c784);
    color: #fff;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.3s, transform 0.2s;
    text-align: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.menu button:hover,
.menu-mobile button:hover {
    background: linear-gradient(135deg, #388e3c, #66bb6a);
    transform: translateY(-2px);
}
.menu button:active ,
.menu-mobile button:active{
    transform: translateY(0);
    opacity: 0.9;
}
/*保存ボタン*/
#save-btn {
    position: relative;
}

/* 不足カードモーダル */
#missing-dialog {
    position: fixed;
    margin: 0;
    padding: .6rem .4rem;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .18);
    z-index: 4000;
    width: min(560px, 92vw);
}

#missing-dialog::backdrop {
    background: rgba(0, 0, 0, .2);
}
/*不足カードモーダル注意文*/
.missing-info{
    margin: 0;
    font-size: 20px;
}
#missing-body ul {
    margin: .2rem 0 0;
    padding-left: 1.1em;
    list-style: disc inside;
    padding-left: 1em;
}

#missing-body li {
    line-height: 1.5;
    position: relative;
    padding-left: 0.4em;
}
/*黒丸のみ色付け*/
#missing-body li::marker {
    color: currentColor;
}
/* テキストは黒 */
#missing-body li {
    color: #000;
    border: none;
    font-size: 17px;
}


/* 各種族色で上書き */
#missing-body li.race-ドラゴン::marker   { color: var(--race-dragon); }
#missing-body li.race-アンドロイド::marker { color: var(--race-android); }
#missing-body li.race-エレメンタル::marker { color: var(--race-elemental); }
#missing-body li.race-ルミナス::marker   { color: var(--race-luminous); }
#missing-body li.race-シェイド::marker   { color: var(--race-shade); }
#missing-body li.race-イノセント::marker { color: var(--race-innocent); }
#missing-body li.race-旧神::marker       { color: var(--race-accent); }

/*カードプレビュー判定サイズ調整*/
#missing-body .missing-name {
    display: inline-block;
    cursor: pointer;/* ←虫眼鏡アイコン */

}
/* 不足リスト用：カード画像プレビュー */
#card-preview-pop {
    position: fixed;
    z-index: 9999;
    display: none;
    background: #fff;
    border: 1px solid #e5e7eb;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .18);
    border-radius: 8px;
    padding: 6px;
    pointer-events: none;
    /* マウス操作を邪魔しない */
}

#card-preview-pop img {
    width: 180px;
    /* お好みで */
    height: auto;
    display: block;
    border-radius: 4px;
}

@media (max-width: 480px) {
    #card-preview-pop img {
        width: 140px;
    }
}


/*=======================
        6.カード一覧
=======================*/
/*各パックセクション*/
.pack-section {
    border: 6px solid #646464;
    padding: 0.5rem 1rem 1rem 1rem;
    margin: 1rem 0;
    border-radius: 12px;
    background: #fff;
}
@media (max-width: 700px) {
.pack-section {
    padding: 0.1rem 0.4rem 0.4rem 0.4rem;
}
}
/*パック名*/
.pack-section h3 {
    display: block;
    margin: 0.5rem 0;
    padding: 0.7em 1em;
    background: #f5f5f5;/* 明るめ背景 */
    background: linear-gradient(90deg, #f7f7f7, #e0e0e0);
    border-left: 8px solid #646464;
    border-radius: 4px;
    font-size: 1.1rem;
    font-weight: bold;
    color: #333;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
/*カードまとめてボタン枠*/
.race-controls {
    display: flex;
    gap: 0.2rem;
    padding: 0.2rem;
}
/*カードまとめてボタン*/
.race-controls button {
    flex: 1;/* ← 幅を均等に分ける */
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 14px;
    box-sizing: border-box;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    transition: 0.2s;
}
@media (max-width: 768px) {
    .race-controls button {
            font-size: 10px;
            padding: 8px 3px;
    }

}

/*カード+１*/
.pack-select-all-btn,.select-all-btn{
    background: linear-gradient(135deg, #e3f2fd, #bbdefb);
    color: #1e3a8a;
    border: 1px solid #90caf9;
    font-weight: 600;
}
/*選択解除*/
.pack-clear-all-btn,.clear-all-btn {
    background: linear-gradient(135deg, #ffebee, #ffcdd2);
    color: #b71c1c;
    border: 1px solid #ef9a9a;
    font-weight: 600;
}
/*不足カードボタン*/
.missing-pack-btn {
    background: linear-gradient(135deg, #f3e5f5, #e1bee7);
    color: #4a148c;
    border: 1px solid #ce93d8;
    font-weight: 600;
}

.race-controls button:hover {
    transform: translateY(-1px);
    opacity: 0.9;
}


/*種族小見出し*/
section h4 {
    display: block;
    margin: 0 0 0.3rem;
    padding: 0.7em 0.7em 0.6em;
    color: #fff;
    font-size: 0.8rem;
    font-weight: bold;
    line-height: 1.35;
    background-color: #646464;
}




/*カードリスト*/
.card-list {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}


/*種族枠※合併予定*/
.race-group {
    margin: 0.3rem auto;
    /* 中央寄せ */
    border: 2px solid #666;
    /* 枠線は種族ごとに上書きでもOK */
    border-radius: 6px;
    box-sizing: border-box;
    padding: 0.3rem;
}

/*種族背景色*/
.race-group.race-ドラゴン {
    background: rgba(255, 100, 100, 0.1);
}

.race-group.race-アンドロイド {
    background: rgba(100, 200, 255, 0.1);
}

.race-group.race-エレメンタル {
    background: rgba(100, 255, 150, 0.1);
}

.race-group.race-ルミナス {
    background: rgba(255, 250, 150, 0.1);
}

.race-group.race-シェイド {
    background: rgba(200, 150, 255, 0.1);
}

.race-group.race-イノセント {
    background: rgba(220, 220, 220, 0.1);
}

.race-group.race-旧神 {
    background:
        linear-gradient(90deg,
            rgba(255, 255, 255, 0.2),
            rgba(255, 215, 140, 0.3),
            rgba(180, 255, 255, 0.3),
            rgba(220, 180, 255, 0.3),
            rgba(255, 255, 255, 0.2));
}

/*========= 種族枠線 ==========*/
.race-ドラゴン {
    border: 6px solid rgb(200, 40, 40);
}

.race-アンドロイド {
    border: 6px solid rgb(40, 200, 200);
}

.race-エレメンタル {
    border: 6px solid rgb(40, 180, 90);
}

.race-ルミナス {
    border: 6px solid rgb(240, 200, 40);
}

.race-シェイド {
    border: 6px solid rgb(150, 100, 180);
}

.race-イノセント {
    border: 6px solid silver;
}

.race-旧神 {
    border: 6px solid;
    border-image: linear-gradient(90deg,
            rgba(255, 255, 255, 0.6),
            rgba(255, 215, 140, 0.8),
            rgba(180, 255, 255, 0.7),
            rgba(220, 180, 255, 0.7),
            rgba(255, 255, 255, 0.6)) 1;
}

/*カード*/
.card {
    width: calc(100% / 8 - 8px);
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
    transition: box-shadow .15s ease, transform .05s ease;
}
.card:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, .15);
}

.card-list .card:hover {
    box-shadow: 0 0 0 4px rgba(0, 0, 0, .08);
    transform: translateY(-1px);
}
@media (hover: none) {
    .card-list .card:hover {
        box-shadow: none;
        transform: none;
    }
}
/*カード画像（このページでは丸みをなくす）*/
.card img{
    border-radius: 0px;
}
/*スマホ用*/
@media (max-width: 1024px) {
    .card {
        width: calc(100% / 6 - 8px);
    }

    .owned-mark {
        min-width: 15px;
        width: 23%;
        font-size: 0.6em;
    }
}
@media (max-width: 560px) {

    .card {
        width: calc(100% / 5 - 8px);
    }
}


/* ======== レアリティ枠線 ======== */


    /* カード全体に枠線を付与（グラデ対応） */
    .card {
        border: 4px solid transparent;
    }
/* モバイル（～700px）では枠線を2pxに */
@media (max-width: 700px) {
    .card {
        border-width: 2px;
    }
    .owned-card-grid .card {
        border-width: 2px !important;
        border-image-slice: 1;
    }
}
    /* レアリティ別グラデ枠線 */
    .card.rarity-legend {
        border-image: linear-gradient(90deg, #91e4fb 0%, #ffffff 70%, #91e4fb 100%) 1;
    }

    .card.rarity-gold {
        border-image: linear-gradient(90deg, gold 0%, #fff5cc 70%, gold 100%) 1;
    }

    .card.rarity-silver {
        border-image: linear-gradient(90deg, silver 0%, #f0f0f0 70%, silver 100%) 1;
    }

    .card.rarity-bronze {
        border-image: linear-gradient(90deg, peru 0%, #ffd9b3 70%, peru 100%) 1;
    }

    /* 所持カード分析タブは既定で薄い枠があるため上書き */
    .owned-card-grid .card {
        border-width: 3px !important;
        border-color: transparent !important;
        /* border-image を優先 */
        border-image-slice: 1;
    }

.card.rarity-legend::before {
    background: linear-gradient(90deg, #91e4fb 0%, #ffffff 70%, #91e4fb 100%);
}

.card.rarity-gold::before {
    background: linear-gradient(90deg, gold 0%, #fff5cc 70%, gold 100%);
}

.card.rarity-silver::before {
    background: linear-gradient(90deg, silver 0%, #f0f0f0 70%, silver 100%);
}

.card.rarity-bronze::before {
    background: linear-gradient(90deg, peru 0%, #ffd9b3 70%, peru 100%);
}


/*=================
    7.カード分析
=====================*/
/*=======共通=======*/
/* 全体レイアウト */
.owned-container {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 3%;
    position: relative;
}
/*小見出し*/
.owned-aside h4,
.owned-mobile h4{
    display: block;
    margin: 0 0 0.3rem;
    padding: 0.7em 0.7em 0.6em;
    color: #fff;
    font-weight: bold;
    line-height: 1.35;
    background-color: #646464;
    font-size: clamp(6px, 1.3vw, 19px);
    padding: 0.6vw 6px;
}
/* 下部ページ送り */
.pagination-controls {
    text-align: center;
    font-size: 20px;
}
/*==========パソコン===========*/

/* 左右aside */
.owned-aside {
    width: 15%;
    background: #f7f7f7;
    padding: 5px;
    border-radius: 8px;
    font-size: clamp(10px, 1.4vw, 20px);
    max-height: 45vw;
    overflow-y: auto;
}

@media (max-width: 1024px) {
    .owned-aside {
        max-height: 120vw;
    }
}

@media (max-width: 700px) {
    .owned-aside {
        display: none;
    }
}



.owned-aside p {
    margin: 0.5vw 0;
}
/*=======モバイル=======*/
/*スマホ検索、所持内訳非表示*/
.owned-search-mobile,
.owned-summary-mobile {
    display: none;
}
@media (max-width: 700px) {
/*モバイル検索、所持内訳表示*/
    .owned-search-mobile,
    .owned-summary-mobile {
        display: block;
        width: 100%;
        padding: 3px;
        box-sizing: border-box;
    }

}


/*===========================
    8.カード分析ー所持枚数内訳ー
==============================*/
/*==========パソコン===========*/
/*所持率反映ボタン*/
#apply-to-checker {
    font-size: clamp(6px, 0.95vw, 15px);
    width: 100%;
    margin-bottom: 2px;
    padding: 1px;
}

/*PC種族リスト*/
#owned-race-summary li {
    font-size: clamp(10px, 1vw, 15px);
    margin: 0.5vw 5px 0.5vw 0;
    padding: 5px 0;
    border-radius: 6px;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
    border-width: 3px;
}
#owned-race-summary div {
    font-size: clamp(11px, 1.3vw, 18px);
}
#owned-race-summary p {
    margin: 2px 0;
}
#owned-race-summary ul{
    padding: 0;
    list-style: none;
}
/*=======モバイル=======*/
@media (max-width: 700px) {
/*モバイル所持枚数内訳*/
.owned-summary-mobile {
    overflow-x: auto;
    background: #f9f9f9;
    border-top: 2px solid #ccc;
    font-size: clamp(13px, 3.5vw, 25px);
}
/*モバイル内訳見出し*/
.owned-summary-mobile h4 {
    font-size: clamp(9px, 2.5vw, 18px);
}
/*モバイル所持枚数データ*/
.owned-summary-mobile .owned-total-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    margin: 2px 0;
}
.owned-summary-mobile .owned-total-row p {
    margin: 0;
    font-size: clamp(9px, 2.5vw, 18px);
}
/*モバイル所持率反映ボタン*/
#apply-to-checker-mobile {
    flex: 0 0 auto;
    font-size: clamp(9px, 2.5vw, 18px);
    padding: 5px;
}

/*モバイルレアリティ種族ブロック*/
.summary-scroll {
    display: flex;
    width: 100%;
}
/*モバイルレアリティ種族内訳枚数*/
.owned-summary-mobile .summary-card {
    flex: 1 0 auto;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
    padding: 0.1rem;
    text-align: center;
}
.owned-summary-mobile .summary-card span {
    font-weight: bold;
    margin-top: 0.2rem;
}

/*（変更予定）*/
/*種族ブロック*/
#owned-race-summary-mobile.summary-scroll {
    display: block;
}

/*種族別レアリティブロック*/
.race-row {
    display: flex;
    justify-content: space-between;
}
}


/*==============================
    9.カード分析ーフィルター検索ー
=================================*/
/*=======共通=======*/
.type-btn.selected{
    background-color: #333;
        color: white;
}


/*==========パソコン===========*/
/*PC検索枠調整*/
.owned-aside.right {
    overflow-x: hidden;
    /* 横スクロールを防ぐ */
    max-width: 100%;
    /* はみ出さないようにする */
}

/*PCキーワード検索*/
#keyword-input {
    font-size: clamp(9px, 0.9vw, 14px);
    width: 95%;
    height: 1vw;
}

/*PCフィルターボタン*/
#open-filter-modal {
    font-size: clamp(11px, 1vw, 15px);
    width: 100%;
}

/*PCタイプボタンレイアウト*/
#type-toggle button {
    display: block;
    /* ボタンを1列縦並びにする */
    width: 100%;
    /* 親要素に合わせて横幅を自動調整 */
    box-sizing: border-box;
    margin: 4px 0;
}

/*PCタイプボタン*/
.type-btn {
    font-size: clamp(11px, 1vw, 15px);
}

/*=======モバイル=======*/
@media (max-width: 700px) {

/* モバイル検索 */
.owned-search-mobile {
    display: block;
    background: #f9f9f9;
    border-bottom: 2px solid #ccc;
}
/*モバイル検索見出し*/
.owned-search-mobile h4 {
    margin-top: 5px;
    font-size: clamp(9px, 2.5vw, 18px);
}
/*モバイルキーワード検索*/
#keyword-input-mobile {
    width: 100%;
    font-size: 15px;
}

/*モバイルフィルター、タイプ一列並び*/
#open-filter-mobile {
    display: flex;
    flex-wrap: wrap;
    gap: 0.2rem;
    align-items: center;
}
/*モバイルフィルターボタン*/
#open-filter-modal-mobile {
    flex: 0 0 auto;
    font-size: clamp(7px, 2vw, 15px);
}
/*モバイルフィルターモーダル内*/
.modal-backdrop {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 900;
}
/*モバイルタイプ並び*/
#type-toggle-mobile .type-btn {
    flex: 1 1 auto;
    white-space: nowrap;
    padding: 1px;
    font-size: clamp(7px, 2vw, 15px);
}
/*モバイルタイプボタン*/
#type-toggle-mobile {
    display: flex;
    flex-wrap: wrap;
    /* はみ出す場合折り返し */
    gap: 0.2rem;
    flex: 1;
    /* 残りを全部使う */
}

}



/*==============================
    10.カード分析ーカード枚数一覧ー
=================================*/
/* 中央メイン */
.owned-main {
    position: relative;
    width: 100%;
}
@media (max-width: 1024px) {
    .owned-main {
        max-width: 65%;
        min-width: 400px;
    }
}
@media (max-width: 700px) {
    .owned-main {
        max-width: 80%;
        min-width: 200px;
    }
}
/* カードグリッド */
.owned-card-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}

/* カード */
.owned-card-grid .card {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    margin: 1px;
    padding: 2px;
    border-radius: 6px;
    text-align: center;
    box-sizing: border-box;
    min-width: 0;
    flex: 0 0 calc(25% - 2px);
}

/* PCカード画像*/
#owned-card-grid .card img {
    width: 50%;
    height: auto;
    cursor: pointer;
}

@media (max-width: 1024px) {
/*カード画像*/
#owned-card-grid .card img {
        width: 100%;
        height: auto;
}
/*カード*/
#owned-card-grid .card {
    display: block;
    flex-direction: column;
    /* 横並びを解除して縦に */
    align-items: center;
}

}


/*種族背景色*/
:root {
    --race-dragon: #e24545;
    --race-android: #2dbec0;
    --race-elemental: #2ab76a;
    --race-luminous: #e8c82b;
    --race-shade: #8b64b8;
    --race-innocent: #9aa0a6;
}
.owned-race-ドラゴン {
    background: rgba(255, 100, 100, 0.1);
    --race-accent: var(--race-dragon);
}
.owned-race-アンドロイド {
    background: rgba(100, 200, 255, 0.1);
    --race-accent: var(--race-android);
}
.owned-race-エレメンタル {
    background: rgba(100, 255, 150, 0.1);
    --race-accent: var(--race-elemental);
}
.owned-race-ルミナス {
    background: rgba(255, 250, 150, 0.2);
    --race-accent: var(--race-luminous);
}
.owned-race-シェイド {
    background: rgba(200, 150, 255, 0.2);
    --race-accent: var(--race-shade);
}
.owned-race-イノセント {
    background: rgba(220, 220, 220, 0.2);
    --race-accent: var(--race-innocent);
}
.owned-race-旧神 {
    background:
        linear-gradient(90deg,
            rgba(255, 255, 255, 0.2),
            rgba(255, 215, 140, 0.3),
            rgba(180, 255, 255, 0.3),
            rgba(220, 180, 255, 0.3),
            rgba(255, 255, 255, 0.2));
            --race-accent: #a78bfa;
}



/*カード情報*/
.owned-card-info {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    padding-left: 2px;
    gap: 2px;
    width: 50%;
    min-width: 0;
}
@media (max-width: 1024px) {
    .owned-card-info {
        width: 100%;
        margin-top: 3px;
        padding-left:0;
    }
}

/*カード名*/
.card-name {
    display: block;
    font-size: clamp(0.3rem, 1vw, 1rem);
    font-weight: bold;
    text-align: start;
    overflow: hidden;
    max-width: 100%;
    box-sizing: border-box;
    min-width: 0;
    height: 3vw;
    border-left: 4px solid var(--race-accent, transparent);
}
@media (max-width: 1024px) {
.card-name {
    font-size: clamp(5.5px, 1.4vw, 1rem);
    height: 4.2vw;
}
}
/*±ボタンレイアウト*/
.owned-card-controls {
    display: flex;
    align-items: center;
    gap: 0;
    height: auto;
}
/*±ボタン*/
.owned-card-controls button {
    flex: 1 1 auto;
    padding: 3px 0;
    font-size: clamp(10px, 1.2vw, 1rem);
}

/*枚数表示（PC版±ボタン中央）*/
.count-display {
    text-align: center;
    width: 20%;
    line-height: 20px;
    font-size: clamp(10px, 0.9vw, 1rem);
}

/*種族カテゴリ表示*/
.owned-card-meta{
    display: flex;
    flex-direction: column;
    gap: 3px;
    text-align: left;
    font-size: clamp(0.3rem, 0.7vw, 1rem);
}
.owned-card-meta br {
    display: none;
}
@media (max-width: 1024px) {
    .owned-card-meta{
font-size: clamp(5px, 1.3vw, 14px);
    }
}
/* 左右揃え設定 */
.owned-card-meta .meta-row {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: baseline;
}
/* ラベルは左寄せ固定 */
.owned-card-meta .meta-label {
    white-space: nowrap;
    opacity: 0.8;
}
/* 値は右寄せ */
.owned-card-meta .meta-value {
    justify-self: end;
    text-align: right;
    font-weight: 600;
}


/*カード効果文ダイアログ*/
#effect-dialog {
    position: fixed;
    margin: 0;
    padding: .4rem .6rem;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .18);
    z-index: 4000;
}
@media (max-width: 1024px) {
#effect-dialog{
    padding: .2rem .4rem;
}
}
/* showModal() に切り替えても背面が見えるように（保険） */
#effect-dialog::backdrop {
    background: transparent;
}
#effect-dialog header{
    display: flex;
    justify-content: space-between;
    align-items: center;

}
/*ダイアログカード名*/
#dlg-title{
    font-size: clamp(0.3rem, 1.5vw, 20px);
}
#effect-dialog header form {
    display: inline-flex;
    align-self: center;
    margin: 0;
    padding: 0;
}
/*閉じるボタン*/
.icon-btn {
    margin: auto 0;
    border: 1px solid #e5e7eb;
    background: #fff;
    border-radius: .5rem;
    padding: .25rem .5rem;
    line-height: 1;
    font-size: 18px;
}
/*カード効果文*/
#dlg-body{
    white-space: pre-wrap;
    line-height: 1.6;
    font-size: clamp(0.3rem, 1.2vw, 15px);
}
/* グリッド中央左右矢印 */
.grid-page-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: #333;
    color: #fff;
    padding: 30px 4px;
    cursor: pointer;
    border-radius: 4px;
    user-select: none;
}
.grid-page-arrow.left-arrow {
    left: -30px;
}
.grid-page-arrow.right-arrow {
    right: -30px;
}



/*==============================
    11.カード分析ーフィルターモーダルー
=================================*/

/* ===== フィルターモーダルの基本スタイル ===== */
#filter-modal {
    display: none;
    position: fixed;
    left: 50%;
    top: 10vh;
    transform: translateX(-50%);
    width: min(800px, 92vw);
    max-height: 80vh;
    overflow: auto;
    background: #fff;
    padding: 12px;
    border-radius: 8px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, .25);
    z-index: 1001;
}

#filter-modal h4 {
    display: block;
    margin: 0 0 0.3rem;
    padding: 0.7em 0.7em 0.6em;
    color: #fff;
    font-weight: bold;
    line-height: 1.35;
    background-color: #646464;
    font-size: clamp(15px, 4vw, 25px);
    padding: 0.6vw 6px;
}

#filter-modal .filter-group .filter-btn {
    font-size: clamp(11px, 3vw, 20px);
}
.filter-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-bottom: 0.2rem;
}

#filter-modal button.selected {
    background-color: #333;
    color: white;
}

/* 背景 */
#modal-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .5);
    z-index: 1000;
}















/*=======================
        .パック枠
=======================*/

.card-item {
    display: grid;
    grid-template-columns: 88px 1fr;
    gap: .75rem;
    align-items: start;
    padding: .75rem;
    border: 1px solid #e5e7eb;
    border-radius: .75rem;
    background: #fff
}

.card-item img {
    width: 88px;
    height: 124px;
    object-fit: cover;
    border-radius: .5rem
}

.meta {
    display: flex;
    flex-direction: column;
    gap: .5rem
}

.badges {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    font-size: .8rem
}

.badge {
    padding: .15rem .45rem;
    border-radius: 999px;
    background: #f3f4f6
}

.badge.rarity-legend {
    background: #fde68a
}

.badge.rarity-gold {
    background: #ffe08a
}

.badge.rarity-silver {
    background: #e5e7eb
}

.badge.rarity-bronze {
    background: #f5d0a9
}

.controls {
    display: flex;
    align-items: center;
    gap: .4rem
}

.count {
    min-width: 3.5rem;
    text-align: center;
    font-variant-numeric: tabular-nums
}

.step {
    width: 2rem;
    height: 2rem;
    display: grid;
    place-items: center
}

.preview {
    font-size: .85rem;
    color: #6b7280;
    display: -webkit-box;

    -webkit-box-orient: vertical;
    overflow: hidden
}