/* -----------------------------------------------------------------------------
 * Various ページ共通のカードコンポーネント。
 * グリッド + カード枠 + 見出し + チップの「共通の見た目」だけをここに置く。
 * ページ固有の色・レイアウト（曲のリリース日列、SNSの色など）は各ページ側で上書きする。
 * 検索フィルタ/ハイライト用のフック class/id（composer-card 等）はページ側に残す。
 * --------------------------------------------------------------------------- */

#main .card-grid {
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
    grid-auto-flow:dense;
    align-items:start;
    gap:10px;
    margin-top:10px;
}

#main .card {
    display:flex; flex-direction:column; gap:8px;
    padding:12px 14px;
    background:#fff;
    border:1px solid #e2e8e4;
    border-radius:10px;
    box-shadow:0 1px 4px rgba(0,0,0,0.06);
    transition:box-shadow .2s, transform .2s;
}
#main .card:hover {
    transform:translateY(-2px);
    box-shadow:0 5px 14px rgba(0,0,0,0.12);
}

#main .card-head { display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
#main .card-title { font-weight:bold; font-size:1.0em; color:#1f2937; }

/* チップ（pill）の共通ベース。色はページ側で付ける。 */
#main .card-chips { display:flex; flex-wrap:wrap; gap:6px; }
#main .card-chip {
    display:inline-block;
    font-size:0.86em; font-weight:600;
    text-decoration:none; white-space:nowrap;
    color:#000000 !important;
    border:1px solid transparent; border-radius:6px;
    padding:3px 10px; line-height:1.5;
}

/* 検索ヒット0件メッセージの共通スタイル */
#main .card-noresult { display:none; color:#888; margin-top:12px; }

/* -------------------------------------------------------------------------
 * 加入期(grader)グループ + メンバー値チップ（身長/血液型/出身地などの値ページ）
 * ----------------------------------------------------------------------- */
#main .mg-wrap { margin-top:10px; }
#main .mg-group { margin-top:10px; }
#main .mg-group:first-child { margin-top:0; }
/* グループ見出しは補助情報として控えめに（小さく・淡く・整列を乱さない） */
#main .mg-head {
    margin:0 0 3px;
    display:flex; align-items:center; gap:6px;
    font-size:0.8em; font-weight:600; color:#6b7280;
    border-left:3px solid #aed7b0; padding-left:7px;
}
#main .mg-count {
    font-size:0.9em; font-weight:600; color:#8a9690;
    background:#eef5f0; border-radius:10px; padding:0 7px;
}
/* グループのカードは、メンバーチップを一定幅のグリッドでそろえて並べる
   （名前の長さによらず幅統一。漢字6文字＋値が収まる150px想定）。 */
#main .mg-card {
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
    gap:5px; padding:7px 10px;
}
#main .mg-chip {
    display:flex; align-items:baseline; justify-content:space-between; gap:6px;
    min-width:0; overflow:hidden; white-space:nowrap;
    background:#f6f8f7; border-color:#e2e8e4;
}
#main .mg-chip:hover { background:#eef3f0; border-color:#cfe0d6; }
#main .mg-name { font-weight:600; min-width:0; overflow:hidden; text-overflow:ellipsis; }
#main .mg-val { color:#2e7d32; font-weight:700; font-size:0.92em; flex-shrink:0; }

/* -------------------------------------------------------------------------
 * メンバー1行カード（フォロワー数ランキング風）。縦1列・最大幅で中央寄せ。
 * 名前(左・可変)＋値(右)。星座など値が複数のページでも1行に収める。
 * ----------------------------------------------------------------------- */
#main .ml-list {
    display:grid; grid-template-columns:minmax(0,1fr);
    gap:5px; max-width:600px; margin-left:auto; margin-right:auto;
}
#main .ml-card { flex-direction:row; align-items:center; gap:8px; padding:4px 12px; }
#main .ml-name {
    flex:1 1 auto; min-width:0;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
    font-weight:bold; font-size:0.95em;
}
#main .ml-cells {
    flex-shrink:0; display:flex; align-items:baseline; justify-content:flex-end;
    gap:10px; white-space:nowrap;
}
#main .ml-val { color:#1f2937; font-weight:600; font-size:0.92em; }
/* 加入期グループ内に1行カードを並べる場合（最大幅で中央寄せ、見出しは左） */
#main .mg-wrap-rows { max-width:600px; margin-left:auto; margin-right:auto; }
#main .mg-rows { display:grid; grid-template-columns:minmax(0,1fr); gap:3px; }

/* 星座ページ：誕生日・干支・星座を固定幅カラムで縦に整列させる */
#main .zd-card .ml-cells {
    display:grid; grid-template-columns:6em 1.8em 5.6em; gap:6px;
}
#main .zd-card .ml-cells .ml-val { text-align:left; overflow:hidden; }

/* センターページ：回数は名前のすぐ右、楽曲は小カード（チップ）で折り返す */
#main .ct-card { flex-direction:row; flex-wrap:wrap; align-items:baseline; gap:8px; }
#main .ct-card .ml-name { flex:0 1 auto; }
#main .ct-count { color:#2e7d32; font-weight:700; font-size:0.92em; }
#main .ct-songs { flex-basis:100%; margin-top:2px; }
#main .ct-songs .card-chip { background:#f6f8f7; border-color:#e2e8e4; font-size:0.82em; }