/* カード画像のプレースホルダー（四角形） */
.card-visual {
    height: 160px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.6);
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
    margin-bottom: 1rem;
    font-size: 1.2rem;
    text-align: center;
    padding: 1rem;
}

/* ランクバッジの共通設定 */
.rank-badge {
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.5rem;
    display: inline-block;
}

/* ランクごとの色設定 */
.rank-standard { background-color: #95a5a6; color: white; }
.rank-gold     { background-color: #f1c40f; color: #444; }
.rank-platinum { background-color: #bdc3c7; color: #333; border: 1px solid #999; }
.rank-black    { 
    background-color: #000; 
    color: #fff; 
    border: 1px solid #444; 
    box-shadow: 0 0 8px rgba(0,0,0,0.4); 
}

/* ハッシュタグ */
.tag {
    background-color: #eef;
    color: #446;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.8rem;
    margin-right: 4px;
    display: inline-block;
    margin-bottom: 4px;
}

/* スペック表 */
.spec-table th { width: 35%; color: #555; }

/* --- 1. カード全体の高さを揃えて、ボタンを一番下に押し付ける --- */
article {
    display: flex;
    flex-direction: column;
    height: 100%; /* グリッドの中で高さを最大に伸ばす */
}

/* フッター（ボタン）を一番下に固定 */
article footer {
    margin-top: auto; 
}

/* --- 2. カード名が長すぎる場合に「...」で省略する（修正版） --- */
article h4 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2; /* ここで「最大何行まで表示するか」を決める！今回は2行 */
    overflow: hidden;
    margin-bottom: 0.5rem;
    /* height: 3rem;  ← これを消して、下の max-height に変える！ */
    max-height: 3.6em; /* line-height(1.5) × 2行分 + 少し余裕を持たせる */
    line-height: 1.5;  /* 行間を明示的に指定して計算を合わせる */
    
    /* 1行しかない時も高さを揃えたい場合は、これも追加 */
    min-height: 3.6em; /* 常に2行分のスペースを確保する */
    display: flex;     /* 上下中央寄せにするためのFlexbox */
    align-items: center; /* 上下中央寄せ */
}