/* ベース設定（必要最小限） */
.cardgame-ranking-ui, .cardgame-ranking-ui *, .cardgame-ranking-ui *::before, .cardgame-ranking-ui *::after {
    box-sizing: border-box !important;
}

/* ラッパーの幅制御（SWELL対策） */
.cardgame-ranking-ui {
    width: min(100%, var(--article_size, 900px)) !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* セパレーター */
.cardgame-ranking-ui .ranking-separator { text-align:center !important; margin:40px 0 30px !important; position:relative !important; }
.cardgame-ranking-ui .ranking-separator::before { content:'' !important; position:absolute !important; top:50% !important; left:0 !important; right:0 !important; height:1px !important; background:linear-gradient(90deg, transparent, #ddd 20%, #ddd 80%, transparent) !important; }
.cardgame-ranking-ui .ranking-separator-text { background:#fff !important; padding:0 20px !important; display:inline-block !important; position:relative !important; color:#999 !important; font-size:12px !important; letter-spacing:2px !important; text-transform:uppercase !important; }

/* 比較表セクション - 参考UIから */
.cardgame-ranking-ui .comparison-section {
    background: white !important;
    border-radius: 8px !important;
    overflow: visible !important;
    margin-bottom: 30px !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1) !important;
    border: 1px solid #e0e0e0 !important;
}

.cardgame-ranking-ui .comparison-header {
    background: #fff !important;
    border-bottom: none !important;
    padding: 16px 20px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
}
.cardgame-ranking-ui .comparison-title {
    /* 完全非表示 */
    display: none !important;
}
.cardgame-ranking-ui .header-controls { display:flex !important; gap:12px !important; align-items:center !important; flex-wrap:wrap !important; }
.cardgame-ranking-ui .sort-dropdown { background:#fff !important; color:#333 !important; border:1px solid #ccc !important; padding:8px 16px !important; border-radius:4px !important; font-size:13px !important; cursor:pointer !important; min-width:140px !important; }
.cardgame-ranking-ui .sort-dropdown:focus { border-color:#ff6600 !important; }

/* ソートバー（タイトル下） */
.cardgame-ranking-ui .sort-bar { display:flex !important; align-items:center !important; gap:12px !important; padding:10px 20px !important; border-bottom:1px solid #eee !important; background:#fff !important; }
.cardgame-ranking-ui .sort-label { font-size:12px !important; color:#666 !important; }
.cardgame-ranking-ui .sort-selector select { padding:8px 12px !important; border:1px solid #ddd !important; border-radius:6px !important; font-size:14px !important; }

/* フィルターバー（階層型セレクター） */
.cardgame-ranking-ui .filter-bar { background:#f8f9fa !important; padding:16px 20px !important; border-bottom:1px solid #e0e0e0 !important; display:flex !important; align-items:center !important; gap:16px !important; }
.cardgame-ranking-ui .filter-label { font-size:13px !important; font-weight:500 !important; color:#666 !important; white-space:nowrap !important; }
.cardgame-ranking-ui .filter-elegant { position:relative !important; }
.cardgame-ranking-ui .filter-trigger { display:inline-flex !important; align-items:center !important; gap:8px !important; padding:8px 16px !important; background:#fff !important; border:2px solid #e0e0e0 !important; border-radius:24px !important; font-size:13px !important; font-weight:600 !important; color:#333 !important; cursor:pointer !important; transition:all .3s cubic-bezier(0.4,0,0.2,1) !important; user-select:none !important; }
.cardgame-ranking-ui .filter-trigger span { white-space: nowrap !important; }
.cardgame-ranking-ui .filter-trigger:hover { border-color:#ff6600 !important; transform:translateY(-1px) !important; box-shadow:0 4px 12px rgba(255,102,0,.15) !important; }
.cardgame-ranking-ui .filter-trigger.active { background:#ff6600 !important; color:#fff !important; border-color:#ff6600 !important; }
.cardgame-ranking-ui .filter-arrow { width:16px !important; height:16px !important; transition:transform .3s !important; }
.cardgame-ranking-ui .filter-trigger.active .filter-arrow { transform:rotate(180deg) !important; }
.cardgame-ranking-ui .filter-dropdown { position:absolute !important; top:calc(100% + 8px) !important; left:0 !important; background:#fff !important; border-radius:12px !important; padding:8px !important; box-shadow:0 10px 40px rgba(0,0,0,.15) !important; border:1px solid #e0e0e0 !important; opacity:0 !important; visibility:hidden !important; transform:translateY(-10px) !important; transition:all .3s cubic-bezier(0.4,0,0.2,1) !important; z-index:10000 !important; min-width:260px !important; }
.cardgame-ranking-ui .filter-dropdown { max-height: 60vh !important; overflow-y: auto !important; }
.cardgame-ranking-ui .filter-dropdown.show { opacity:1 !important; visibility:visible !important; transform:translateY(0) !important; }
.cardgame-ranking-ui .filter-option { display:flex !important; align-items:center !important; padding:10px 14px !important; border-radius:8px !important; font-size:14px !important; cursor:pointer !important; transition:all .2s !important; user-select:none !important; }
.cardgame-ranking-ui .filter-option:hover { background:#f8f9fa !important; }
.cardgame-ranking-ui .filter-option.selected { background:#fff5f0 !important; color:#ff6600 !important; font-weight:600 !important; }
.cardgame-ranking-ui .custom-checkbox { width:18px !important; height:18px !important; border:2px solid #ddd !important; border-radius:4px !important; margin-right:12px !important; position:relative !important; transition:all .2s !important; flex-shrink:0 !important; }
.cardgame-ranking-ui .filter-option.selected .custom-checkbox { background:#ff6600 !important; border-color:#ff6600 !important; }
.cardgame-ranking-ui .filter-option.selected .custom-checkbox::after { content:'✓' !important; position:absolute !important; top:50% !important; left:50% !important; transform:translate(-50%,-50%) !important; color:#fff !important; font-size:12px !important; font-weight:bold !important; }

/* レスポンシブ2段組レイアウト */
.cardgame-ranking-ui .table-container { background:#fff !important; }
.cardgame-ranking-ui .responsive-table { background:#fff !important; width:100% !important; }
.cardgame-ranking-ui .table-header { display:none !important; grid-template-columns: 60px 1fr 120px 100px !important; gap: 12px !important; padding: 12px 16px !important; font-size:12px !important; font-weight:600 !important; color:#666 !important; border-bottom:2px solid #e0e0e0 !important; }
.cardgame-ranking-ui .table-row { border-bottom:1px solid #f0f0f0 !important; padding:10px 16px !important; display:flex !important; align-items:center !important; gap:12px !important; transition:background .2s !important; flex-wrap:nowrap !important; }
.cardgame-ranking-ui .table-row:active { background:#fafafa !important; }
.cardgame-ranking-ui .row-main { display:flex !important; align-items:center !important; gap:8px !important; width:100% !important; }
.cardgame-ranking-ui .rank-badge { font-weight:700 !important; font-size:14px !important; color:#ffffff !important; min-width:24px !important; text-align:center !important; }
.cardgame-ranking-ui .rank-badge.top1 { color:#ff6600 !important; font-size:20px !important; font-weight:900 !important; }
.cardgame-ranking-ui .rank-badge.top2 { color:#ff8800 !important; font-size:18px !important; font-weight:900 !important; }
.cardgame-ranking-ui .rank-badge.top3 { color:#ffaa00 !important; font-size:17px !important; font-weight:900 !important; }
.cardgame-ranking-ui .responsive-table .card-thumb { width:40px !important; height:56px !important; object-fit:cover !important; border-radius:4px !important; border:1px solid #e0e0e0 !important; flex-shrink:0 !important; }
.cardgame-ranking-ui .responsive-table .card-info { flex:1 !important; min-width:0 !important; display:flex !important; flex-direction:column !important; gap:4px !important; }
.cardgame-ranking-ui .responsive-table .card-name { font-weight:600 !important; color:#333 !important; font-size:14px !important; overflow:hidden !important; text-overflow:ellipsis !important; white-space:nowrap !important; }
.cardgame-ranking-ui .responsive-table .card-number { font-size:12px !important; color:#888 !important; }
.cardgame-ranking-ui .price-value { font-weight:800 !important; color:#d32f2f !important; font-size:16px !important; }
.cardgame-ranking-ui .status-badge { margin-left:auto !important; }
.cardgame-ranking-ui .trend-badge { font-weight:600 !important; font-size:13px !important; padding:4px 10px !important; border-radius:14px !important; background:#f0f0f0 !important; color:#666 !important; }
.cardgame-ranking-ui .trend-badge.trend-up { color:#2e7d32 !important; background:#e8f5e9 !important; }
.cardgame-ranking-ui .trend-badge.trend-down { color:#c62828 !important; background:#ffebee !important; }
.cardgame-ranking-ui .trend-badge.trend-stable { color:#666 !important; background:#f0f0f0 !important; }
.cardgame-ranking-ui .trend-badge { padding:4px 8px !important; border-radius:4px !important; font-size:12px !important; font-weight:600 !important; }
.cardgame-ranking-ui .trend-badge.trend-up { background:#e8f5e9 !important; color:#2e7d32 !important; }
.cardgame-ranking-ui .trend-badge.trend-down { background:#ffebee !important; color:#c62828 !important; }
.cardgame-ranking-ui .trend-badge.trend-stable { background:#f3f4f6 !important; color:#6b7280 !important; }

/* 折りたたみテーブル行 */
.cardgame-ranking-ui .hidden-row { display:none !important; }
.cardgame-ranking-ui .comparison-section.expanded .hidden-row { display:flex !important; }
.cardgame-ranking-ui .comparison-section.expanded .expand-section { display:block !important; }
.cardgame-ranking-ui .expand-section { padding:16px !important; text-align:center !important; border-top:1px solid #e0e0e0 !important; background:#fafafa !important; }
.cardgame-ranking-ui .expand-btn { background:#fff !important; border:1px solid #ff6600 !important; color:#ff6600 !important; padding:8px 16px !important; border-radius:4px !important; font-weight:600 !important; cursor:pointer !important; }
.cardgame-ranking-ui .expand-btn:hover { background:#ff6600 !important; color:#fff !important; }

/* 見出しの折り返しを防止 */
.cardgame-ranking-ui .comparison-title { white-space: nowrap !important; }

.cardgame-ranking-ui .sort-selector { display:flex !important; gap:8px !important; align-items:center !important; }
.cardgame-ranking-ui .sort-dropdown { background:#fff !important; color:#333 !important; border:1px solid #ccc !important; padding:6px 12px !important; border-radius:4px !important; font-size:13px !important; outline:none !important; }
.cardgame-ranking-ui .sort-dropdown:focus { border-color:#ff6600 !important; }

/* ランク表示 - 価格.com風 */
.cardgame-ranking-ui .rank-cell {
    font-weight: 700 !important;
    text-align: center !important;
    width: 50px !important;
}

.cardgame-ranking-ui .rank-1 {
    color: #ff6600 !important;
    font-size: 20px !important;
    font-weight: 900 !important;
}

.cardgame-ranking-ui .rank-2 {
    color: #ff8800 !important;
    font-size: 18px !important;
}

.cardgame-ranking-ui .rank-3 {
    color: #ffaa00 !important;
    font-size: 17px !important;
}

/* カード表示の修正 */
.cardgame-ranking-ui .ranking-item {
    background: white !important;
    border-radius: 8px !important;
    margin-bottom: 20px !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
}

.cardgame-ranking-ui .ranking-item h3 {
    display: block !important;
    margin: 0 !important;
    padding: 12px 15px !important;
    font-size: 16px !important;
    line-height: 1.4 !important;
    font-weight: 600 !important;
    background: linear-gradient(to right, #f8f9fa, #fff) !important;
    border-bottom: 1px solid #e0e0e0 !important;
}

/* ランキングカード（ランキングカード表示デザイン準拠） */
.cardgame-ranking-ui .rank-badge { display:inline-flex !important; align-items:center !important; justify-content:center !important; min-width:32px !important; height:32px !important; padding:0 8px !important; background:#111827 !important; color:#ffffff !important; border-radius:999px !important; font-size:14px !important; font-weight:700 !important; }
.cardgame-ranking-ui .rank-badge.gold { background: linear-gradient(135deg,#FFD700,#FFA500) !important; color:#111827 !important; }
.cardgame-ranking-ui .rank-badge.silver { background: linear-gradient(135deg,#C0C0C0,#808080) !important; color:#111827 !important; }
.cardgame-ranking-ui .rank-badge.bronze { background: linear-gradient(135deg,#CD7F32,#8B4513) !important; color:#ffffff !important; }

.cardgame-ranking-ui .card-info { display:flex !important; gap:20px !important; padding:20px !important; }
.cardgame-ranking-ui .card-image { flex-shrink:0 !important; width:120px !important; height:160px !important; border-radius:8px !important; overflow:hidden !important; background:#f0f0f0 !important; border:1px solid #e0e0e0 !important; }
.cardgame-ranking-ui .card-image img { width:100% !important; height:100% !important; object-fit:cover !important; display:block !important; }
.cardgame-ranking-ui .card-details { flex:1 !important; display:flex !important; flex-direction:column !important; gap:12px !important; }
.cardgame-ranking-ui .price-info { display:flex !important; flex-wrap:wrap !important; gap:16px !important; padding:12px !important; background:#f8f9fa !important; border-radius:8px !important; }
.cardgame-ranking-ui .price-item { display:flex !important; flex-direction:column !important; gap:4px !important; }
.cardgame-ranking-ui .price-label { font-size:11px !important; color:#666 !important; letter-spacing:.5px !important; text-transform:uppercase !important; }
.cardgame-ranking-ui .price-value { font-size:20px !important; font-weight:700 !important; color:#d32f2f !important; }
.cardgame-ranking-ui .trend { display:inline-flex !important; align-items:center !important; gap:4px !important; padding:4px 8px !important; border-radius:4px !important; font-size:14px !important; font-weight:600 !important; }
.cardgame-ranking-ui .trend.up { background:#e8f5e9 !important; color:#2e7d32 !important; }
.cardgame-ranking-ui .trend.down { background:#ffebee !important; color:#c62828 !important; }
.cardgame-ranking-ui .trend.stable { background:#f3f4f6 !important; color:#6b7280 !important; }
.cardgame-ranking-ui .trend-arrow { font-size:12px !important; }
.cardgame-ranking-ui .card-actions { display:flex !important; gap:8px !important; margin-top:8px !important; }
.cardgame-ranking-ui .btn-detail { padding:8px 16px !important; background:#111827 !important; color:#fff !important; border:none !important; border-radius:6px !important; font-size:14px !important; font-weight:500 !important; text-decoration:none !important; display:inline-block !important; }
.cardgame-ranking-ui .btn-detail:hover { background:#1f2937 !important; }
.cardgame-ranking-ui .card-meta { display:flex !important; gap:16px !important; margin-top:8px !important; padding-top:8px !important; border-top:1px solid #e5e7eb !important; }
.cardgame-ranking-ui .meta-item { font-size:12px !important; color:#6b7280 !important; display:flex !important; align-items:center !important; gap:4px !important; }
.cardgame-ranking-ui .meta-icon { width:14px !important; height:14px !important; opacity:.6 !important; }

/* PC表示でヘッダー表示＆テーブル風に寄せる */
@media (min-width: 768px) {
  .cardgame-ranking-ui .table-header { display:grid !important; }
  .cardgame-ranking-ui .table-row { flex-direction:row !important; align-items:center !important; gap:12px !important; }
  .cardgame-ranking-ui .row-main { flex: 1 1 auto !important; }
  .cardgame-ranking-ui .row-sub { width: 260px !important; justify-content: flex-end !important; gap: 16px !important; padding-left: 0 !important; }
}

/* モバイル対応 */
@media (max-width: 768px) {
    .cardgame-ranking-ui .comparison-table {
        font-size: 12px !important;
    }
    .cardgame-ranking-ui .sort-selector select { width: auto !important; }
    /* 指標ボタンの縦並び（スマホ） */
    .cardgame-ranking-ui .metric-tabs { display:flex !important; flex-direction:column !important; gap:8px !important; }
    .cardgame-ranking-ui .metric-tab { width:100% !important; }
    
    /* ランキングカード（下段の詳細カード）でのみ縮小サムネ適用 */
    .cardgame-ranking-ui .ranking-wrapper .card-thumb {
        width: 30px !important;
        height: 42px !important;
    }

    .cardgame-ranking-ui .ranking-item h3 { font-size: 15px !important; padding: 12px 12px !important; }
    .cardgame-ranking-ui .card-info { flex-direction: column !important; padding: 16px !important; }
    .cardgame-ranking-ui .card-image { width: 100% !important; max-width:200px !important; height:auto !important; aspect-ratio:3/4 !important; margin: 0 auto !important; }
    .cardgame-ranking-ui .price-info { flex-direction: column !important; gap:12px !important; }
    /* 順位ヘッダーの縦書き防止 */
    .cardgame-ranking-ui .comparison-table th:first-child { white-space: nowrap !important; }
}

/* コントロールバー（並び替え+レア度） */
.cardgame-ranking-ui .controls-bar { display:flex !important; flex-direction:column !important; align-items:flex-start !important; gap:8px !important; }
.cardgame-ranking-ui .controls-sort { display:flex !important; align-items:center !important; gap:12px !important; width:100% !important; }
.cardgame-ranking-ui .controls-filter { display:flex !important; align-items:center !important; gap:12px !important; width:100% !important; }

/* 並び替えがボタン群の場合の均等配置（存在すれば適用） */
.cardgame-ranking-ui .controls-sort .sort-buttons { display:flex !important; width:100% !important; gap:8px !important; }
.cardgame-ranking-ui .controls-sort .sort-button,
.cardgame-ranking-ui .controls-sort .metric-tab { flex:1 1 0 !important; text-align:center !important; }
.cardgame-ranking-ui .sort-label { font-size:12px !important; color:#666 !important; }
.cardgame-ranking-ui .sort-selector select { padding:8px 12px !important; border:1px solid #ddd !important; border-radius:6px !important; font-size:14px !important; }

/* 参考.png 優先の強制横並びと整列 */
.cardgame-ranking-ui .responsive-table .row-main { display:flex !important; flex-direction:row !important; align-items:center !important; gap:8px !important; flex-wrap:nowrap !important; width:100% !important; }
.cardgame-ranking-ui .responsive-table .card-thumb { display:block !important; flex:0 0 auto !important; width:55px !important; height:77px !important; }
.cardgame-ranking-ui .responsive-table .row-main .card-info { display:flex !important; flex:1 1 auto !important; min-width:0 !important; flex-direction:column !important; gap:4px !important; }
.cardgame-ranking-ui .responsive-table .row-main .status-badge { margin-left:auto !important; }

/* ドロップダウンのアクション */
.cardgame-ranking-ui .filter-actions { display:flex !important; justify-content:flex-end !important; gap:8px !important; padding:8px !important; border-top:1px solid #eee !important; }
.cardgame-ranking-ui .filter-apply { background:#ff6600 !important; color:#fff !important; border:1px solid #ff6600 !important; border-radius:6px !important; padding:6px 12px !important; font-weight:600 !important; cursor:pointer !important; }

/* PC: 並列配置（タイトルの下にコントロール）、Mobile: 縦並び・幅いっぱい */
@media (min-width: 1024px) {
  .cardgame-ranking-ui .controls-bar { flex-direction: row !important; align-items: center !important; gap: 12px !important; width: 100% !important; }
  .cardgame-ranking-ui .controls-sort,
  .cardgame-ranking-ui .controls-filter { width: auto !important; flex: 1 1 0 !important; }
}

@media (max-width: 768px) {
  .cardgame-ranking-ui .controls-sort .sort-dropdown { width: 100% !important; }
  .cardgame-ranking-ui .controls-filter .filter-elegant { width: 100% !important; }
  .cardgame-ranking-ui .controls-filter .filter-trigger { width: 100% !important; justify-content: space-between !important; }
}

/* 読み込みオーバーレイ（表を消さずに上から覆う） */
.cardgame-ranking-ui .comparison-section { position: relative !important; }
.cardgame-ranking-ui .comparison-section.is-loading::after { content:'' !important; position:absolute !important; inset:0 !important; background:rgba(255,255,255,.6) !important; z-index:3 !important; }
.cardgame-ranking-ui .comparison-section.is-loading::before { content:'' !important; position:absolute !important; top:50% !important; left:50% !important; width:24px !important; height:24px !important; margin:-12px 0 0 -12px !important; border:3px solid #ddd !important; border-top-color:#ff6600 !important; border-radius:50% !important; animation:cgspin .8s linear infinite !important; z-index:4 !important; }
@keyframes cgspin { to { transform: rotate(360deg); } }
.cardgame-ranking-ui .filter-clear { padding:6px 10px !important; border:1px solid #ddd !important; background:#fff !important; border-radius:6px !important; font-size:12px !important; cursor:pointer !important; }
.cardgame-ranking-ui .filter-clear[disabled] { opacity:.5 !important; cursor:default !important; }
.cardgame-ranking-ui .rank-ui-list { min-height: 140px !important; }
.cardgame-ranking-ui .header-controls .filter-label { font-size:13px !important; color:#666 !important; white-space:nowrap !important; }
.cardgame-ranking-ui .responsive-table .card-thumb { width:55px !important; height:77px !important; object-fit:cover !important; border-radius:4px !important; border:1px solid #e0e0e0 !important; flex-shrink:0 !important; }
.cardgame-ranking-ui .responsive-table .card-details { display:flex !important; flex:1 1 auto !important; min-width:0 !important; flex-direction:column !important; gap:4px !important; }