/* カード図鑑（実物の所持）。
   ★開封シミュレーターのコレクション（account.css の .cvm-*）とは別の見た目。
     同じ見た目にすると利用者が2つを混同する。 */

.cvbd-wrap { max-width: 1120px; margin: 0 auto; padding: 20px 16px 64px; color: #16202f; }
.cvbd-title { margin: 0 0 6px; font: 800 24px/1.3 system-ui, sans-serif; }
.cvbd-lead { margin: 0 0 20px; color: #4a5768; font: 600 13px/1.6 system-ui, sans-serif; }

.cvbd-login { padding: 20px; border: 1px solid #dcdcde; border-radius: 12px; background: #fff; }
.cvbd-login p { margin: 0 0 12px; font: 700 14px/1.6 system-ui, sans-serif; }

.cvbd-games { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.cvbd-game {
    /* ★カード裏面を左に置く。ゲームの見分けが一目でつく。
       ★中にリンクを2本置くので、タイル自体はリンクにしない。 */
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px;
    border: 1px solid #dcdcde;
    border-radius: 12px;
    background: #fff;
    color: inherit;
}
.cvbd-game-back { flex: 0 0 auto; width: 62px; }
.cvbd-game-back img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 5px;
    box-shadow: 0 2px 8px rgba(16, 24, 40, .18);
}
.cvbd-game-body { min-width: 0; }
.cvbd-game strong { display: block; font: 800 16px/1.3 system-ui, sans-serif; }

/* --- 見出し・戻り導線 --- */
.cvbd-back { margin: 0 0 10px; font: 700 13px/1 system-ui, sans-serif; }
.cvbd-back a { color: #2f6fd0; text-decoration: none; }
.cvbd-back a:hover { text-decoration: underline; }
.cvbd-h2 { margin: 0 0 14px; font: 800 19px/1.3 system-ui, sans-serif; }

/* --- マイカード：持っているカードだけを並べる（2026-08-29 作り直し） ---
   ★記事の「持ってる」で入ったカードだけが並ぶ。図鑑側でカードリストは持たない。
   ★金額は買取を大きく、販売を添える。売り先で基準が違うので両方出す。 */

.cvbd-game-buy {
    display: block;
    margin-top: 8px;
    font: 900 26px/1.1 system-ui, sans-serif;
    letter-spacing: -.01em;
}
.cvbd-game-buy small { margin-left: 5px; color: #6b7686; font: 700 11px/1 system-ui, sans-serif; letter-spacing: 0; }
.cvbd-game-sell { display: block; margin-top: 3px; color: #4a5768; font: 700 12px/1.4 system-ui, sans-serif; }
.cvbd-game-n { display: block; margin-top: 6px; color: #8a97a8; font: 700 11px/1 system-ui, sans-serif; }

.cvbd-empty {
    padding: 26px 22px;
    border: 1px dashed #c8d2e0;
    border-radius: 14px;
    background: #fbfcfe;
    text-align: center;
}
.cvbd-empty-t { margin: 0 0 6px; font: 800 16px/1.4 system-ui, sans-serif; }
.cvbd-empty p { margin: 0 0 4px; color: #4a5768; font: 600 13px/1.7 system-ui, sans-serif; }
.cvbd-empty p b { color: #16202f; }
.cvbd-empty-s { margin-top: 16px; color: #6b7686; font: 700 12px/1 system-ui, sans-serif; }
.cvbd-empty-games { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 10px; }
.cvbd-empty-go {
    /* ★どのカードゲームか、裏面で分かるようにする。文字だけだと読んで選ぶことになる。 */
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px 8px 8px;
    border: 1px solid #dcdcde;
    border-radius: 999px;
    background: #fff;
    color: #24303a;
    font: 800 13px/1 system-ui, sans-serif;
    text-decoration: none;
}
.cvbd-empty-go img {
    width: 26px;
    height: auto;
    border-radius: 3px;
    box-shadow: 0 1px 4px rgba(16, 24, 40, .2);
}
.cvbd-empty-go:hover { border-color: #2f6fd0; background: #f5f8fd; }

.cvbd-total {
    display: grid;
    gap: 4px;
    margin: 0 0 20px;
    padding: 18px 20px;
    border: 1px solid #dcdcde;
    border-radius: 14px;
    background: #fff;
}
.cvbd-total b { font: 900 clamp(28px, 6vw, 38px)/1.1 system-ui, sans-serif; letter-spacing: -.01em; }
.cvbd-total b small { margin-left: 6px; color: #6b7686; font: 700 12px/1 system-ui, sans-serif; letter-spacing: 0; }
.cvbd-total span { color: #4a5768; font: 700 12px/1.5 system-ui, sans-serif; }

.cvbd-group { margin: 0 0 22px; }
.cvbd-group-t {
    /* ★パックの絵を左に置く。名前だけだとどのパックか思い出せない。 */
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin: 0 0 10px;
    font: 800 15px/1.4 system-ui, sans-serif;
}
.cvbd-group-img { flex: 0 0 auto; width: 44px; }
.cvbd-group-img img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 4px;
    box-shadow: 0 1px 5px rgba(16, 24, 40, .16);
}
.cvbd-group-t b { font-weight: 800; }
.cvbd-group-t span { color: #6b7686; font: 700 12px/1 system-ui, sans-serif; }

.cvbd-owned { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.cvbd-owned-i {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 10px 12px;
    border: 1px solid #dcdcde;
    border-radius: 12px;
    background: #fff;
    color: inherit;
}
.cvbd-owned-i:hover { border-color: #2f6fd0; }
/* ★枚数の増減。自分の持ち物を自分の画面で直せるようにする。
     これが無いと、間違えて登録したときにカードの記事まで戻ることになる。 */
.cvbd-owned-step { margin-left: auto; flex: 0 0 auto; display: flex; align-items: center; gap: 6px; }
.cvbd-owned-step button {
    width: 30px; height: 30px;
    border: 1px solid #cfd8e6; border-radius: 8px;
    background: #f6f8fb; color: #2a3547;
    font: 800 15px/1 system-ui, sans-serif; cursor: pointer;
}
.cvbd-owned-step button:hover { background: #e8eef7; border-color: #2f6fd0; }
.cvbd-step-n { min-width: 1.4em; text-align: center; font: 800 14px/1 system-ui, sans-serif; }
.cvbd-owned-name { color: inherit; text-decoration: none; }
.cvbd-owned-name:hover { color: #2f6fd0; text-decoration: underline; }
.cvbd-owned-face { text-decoration: none; }
.cvbd-owned-face { flex: 0 0 auto; width: 46px; height: 64px; display: flex; align-items: center; justify-content: center; }
.cvbd-owned-face img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 3px; }
.cvbd-owned-body { min-width: 0; display: block; }
.cvbd-owned-name {
    display: block;
    font: 800 13px/1.4 system-ui, sans-serif;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cvbd-owned-num { display: block; margin-top: 1px; color: #8a97a8; font: 700 11px/1.3 ui-monospace, monospace; }
.cvbd-owned-buy { display: inline-block; margin-top: 5px; font: 900 17px/1 system-ui, sans-serif; }
.cvbd-owned-buy small { margin-left: 4px; color: #6b7686; font: 700 10px/1 system-ui, sans-serif; }
.cvbd-owned-sell { display: block; margin-top: 2px; color: #4a5768; font: 700 11px/1 system-ui, sans-serif; }
.cvbd-owned-wait { display: block; margin-top: 5px; color: #8a97a8; font: 700 11px/1.4 system-ui, sans-serif; }

/* --- パックを選ぶ帯 ---
   ★持っているパックが増えると横に長くなる。折り返さず、指で横に送れるようにする。
     折り返すと縦にどんどん伸びて、下の中身が見えなくなる。 */
.cvbd-tabs {
    display: flex;
    gap: 8px;
    margin: 0 0 18px;
    padding-bottom: 6px;
    overflow-x: auto;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
}
.cvbd-tab {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    max-width: 240px;
    padding: 7px 13px 7px 8px;
    border: 1px solid #dcdcde;
    border-radius: 999px;
    background: #fff;
    color: #24303a;
    font: 700 12px/1.3 system-ui, sans-serif;
    white-space: nowrap;
    cursor: pointer;
}
.cvbd-tab img { width: 20px; height: auto; border-radius: 3px; }
.cvbd-tab small { color: #8a97a8; font: 700 11px/1 ui-monospace, monospace; }
.cvbd-tab:hover { border-color: #2f6fd0; }
.cvbd-tab.is-on { border-color: #2f6fd0; background: #2f6fd0; color: #fff; }
.cvbd-tab.is-on small { color: rgba(255,255,255,.8); }

/* パックの続きを見る先。記事の一覧と、開封シミュレーター。 */
.cvbd-group-go { display: flex; flex-wrap: wrap; gap: 8px; margin: -4px 0 10px; }
.cvbd-group-go a {
    padding: 6px 12px;
    border: 1px solid #dcdcde;
    border-radius: 999px;
    background: #fff;
    color: #2f6fd0;
    font: 700 12px/1 system-ui, sans-serif;
    text-decoration: none;
}
.cvbd-group-go a:hover { border-color: #2f6fd0; background: #f5f8fd; }

/* --- 持っていないゲーム・パック ---
   ★並べること自体が入口になる（相場サイト／パック記事／開封シミュレーター）。
     持っている分と見分けがつくよう、薄くしてから金額の代わりに一言を置く。 */
.cvbd-game.is-empty { background: #fbfcfe; }
.cvbd-game.is-empty .cvbd-game-back img { opacity: .55; }
.cvbd-game-none { display: block; margin-top: 8px; color: #8a97a8; font: 700 12px/1.4 system-ui, sans-serif; }
.cvbd-game-go { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.cvbd-game-go a {
    padding: 6px 12px;
    border: 1px solid #dcdcde;
    border-radius: 999px;
    background: #fff;
    color: #2f6fd0;
    font: 700 12px/1.3 system-ui, sans-serif;
    text-decoration: none;
}
.cvbd-game-go a.is-main { border-color: #2f6fd0; background: #2f6fd0; color: #fff; }
.cvbd-game-go a:hover { border-color: #2f6fd0; background: #f5f8fd; }
.cvbd-game-go a.is-main:hover { background: #2860b8; color: #fff; }
.cvbd-tab.is-none { color: #6b7686; }
.cvbd-tab.is-none img { opacity: .6; }

/* --- そのゲームの全パック一覧（持っていないパックも並べる） ---
   ★266件あるので、探せる形にする。名前で絞る入力と、記号でまとめたタブ。
   ★1行1パック。絵の枠を固定するので、絵の有無で高さが変わらない。
     以前は絵の無いパックが大きな空箱になって縦に伸びていた（2026-08-29）。
   ★折りたたみの中は開くまで読み込まれないので、絵を付けても最初は重くならない。 */
.cvbd-packs {
    margin: 26px 0 0;
    padding: 14px 16px 16px;
    border: 1px solid #dcdcde;
    border-radius: 12px;
    background: #fff;
}
.cvbd-packs > summary { font: 800 14px/1.4 system-ui, sans-serif; cursor: pointer; }
.cvbd-packs-note { margin: 10px 0 12px; color: #6b7686; font: 600 12px/1.6 system-ui, sans-serif; }

.cvbd-px-find {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 14px;
    border: 1px solid #dcdcde;
    border-radius: 999px;
    background: #fbfcfe;
    font: 600 13px/1.4 system-ui, sans-serif;
    color: #16202f;
}
.cvbd-px-find:focus { outline: none; border-color: #2f6fd0; background: #fff; }

.cvbd-px-tabs {
    display: flex;
    gap: 6px;
    margin: 10px 0 12px;
    padding-bottom: 6px;
    overflow-x: auto;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
}
.cvbd-px-tab {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    border: 1px solid #dcdcde;
    border-radius: 999px;
    background: #fff;
    color: #24303a;
    font: 700 12px/1 system-ui, sans-serif;
    white-space: nowrap;
    cursor: pointer;
}
.cvbd-px-tab small { color: #8a97a8; font: 700 11px/1 ui-monospace, monospace; }
.cvbd-px-tab:hover { border-color: #2f6fd0; }
.cvbd-px-tab.is-on { border-color: #2f6fd0; background: #2f6fd0; color: #fff; }
.cvbd-px-tab.is-on small { color: rgba(255,255,255,.8); }

.cvbd-px-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 2px 16px; }
.cvbd-px {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 8px;
    border-radius: 8px;
    color: inherit;
    text-decoration: none;
}
.cvbd-px:hover { background: #f2f6fd; }
/* ★display を指定した要素は hidden 属性が効かない（UAの display:none に勝つため）。
     絞り込みで消えなくなるので、明示的に打ち消す。 */
.cvbd-px[hidden] { display: none; }
.cvbd-px-img { flex: 0 0 auto; width: 34px; height: 46px; display: flex; align-items: center; justify-content: center; }
.cvbd-px-img img { max-width: 100%; max-height: 100%; object-fit: contain; }
.cvbd-px-body { min-width: 0; }
.cvbd-px-body b { display: block; font: 700 13px/1.4 system-ui, sans-serif; }
.cvbd-px-body small { display: block; margin-top: 1px; color: #8a97a8; font: 700 11px/1 ui-monospace, monospace; }
.cvbd-px-mine {
    margin-left: auto;
    flex: 0 0 auto;
    padding: 3px 8px;
    border-radius: 999px;
    background: #e8f5ee;
    color: #1f7a4d;
    font: 700 10px/1.5 system-ui, sans-serif;
}
.cvbd-px.is-mine { background: #f6fbf8; }
.cvbd-px-empty { margin: 14px 0 0; color: #8a97a8; font: 700 13px/1 system-ui, sans-serif; }

/* --- 値動き ---
   ★金額だけでは毎日見る理由にならない。前と比べていくら動いたかを添える。
     上がった＝緑、下がった＝赤。買取が上がるのは持ち主にとって良いこと。 */
.cvbd-trend {
    justify-self: start;
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    margin-top: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    font: 800 12px/1.4 system-ui, sans-serif;
}
.cvbd-trend small { font: 700 11px/1 system-ui, sans-serif; opacity: .75; }
.cvbd-trend.is-up { background: #e8f5ee; color: #1f7a4d; }
.cvbd-trend.is-down { background: #fdeeee; color: #b3382f; }

.cvbd-movers { margin: 0 0 22px; }
.cvbd-movers-t { margin: 0 0 10px; font: 800 15px/1.4 system-ui, sans-serif; }
.cvbd-movers-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 8px; }
.cvbd-mover {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border: 1px solid #dcdcde;
    border-radius: 10px;
    background: #fff;
    color: inherit;
    text-decoration: none;
}
.cvbd-mover:hover { border-color: #2f6fd0; }
.cvbd-mover-face { flex: 0 0 auto; width: 30px; height: 42px; display: flex; align-items: center; justify-content: center; }
.cvbd-mover-face img { max-width: 100%; max-height: 100%; object-fit: contain; }
.cvbd-mover-body { min-width: 0; }
.cvbd-mover-body b { display: block; font: 700 13px/1.4 system-ui, sans-serif; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cvbd-mover-was { display: block; margin-top: 1px; color: #8a97a8; font: 700 11px/1 ui-monospace, monospace; }
.cvbd-mover-diff { margin-left: auto; flex: 0 0 auto; font: 800 14px/1 system-ui, sans-serif; }
.cvbd-mover-diff.is-up { color: #1f7a4d; }
.cvbd-mover-diff.is-down { color: #b3382f; }

/* --- カードを探す・並べ替える ---
   ★カードが増えると、パック別に並んでいても目当ての1枚が探せない。
     操作はパック一覧と同じ形に揃える（覚えることを増やさない）。 */
.cvbd-find { margin: 0 0 14px; }
.cvbd-sort { display: flex; gap: 6px; margin-top: 8px; overflow-x: auto; scrollbar-width: thin; }
.cvbd-sort-b {
    flex: 0 0 auto;
    padding: 6px 12px;
    border: 1px solid #dcdcde;
    border-radius: 999px;
    background: #fff;
    color: #24303a;
    font: 700 12px/1 system-ui, sans-serif;
    white-space: nowrap;
    cursor: pointer;
}
.cvbd-sort-b:hover { border-color: #2f6fd0; }
.cvbd-sort-b.is-on { border-color: #2f6fd0; background: #2f6fd0; color: #fff; }
/* ★display を指定した要素は hidden 属性が効かない（UAの display:none に勝つため）。
     絞り込みで消えなくなるので、明示的に打ち消す。 */
.cvbd-owned-i[hidden], .cvbd-owned-flat[hidden] { display: none; }
.cvbd-owned-flat { margin: 0 0 22px; }