/* =========================================================
   メンバーページ ヒーロー（試作）
   - 写真 + 名前 + ステータス + ペンライト色アクセント + 選抜回数ハイライト
   - 配色は各メンバーのペンライトカラーを CSS 変数で受け取る
     --accent1 / --accent2 : アクセント色（1〜2色）
     --accent-ink          : アクセント上に乗せる文字色（明色なら黒、暗色なら白）
   - すべて #main 配下にスコープ
   ========================================================= */
#main .mhero {
    position: relative;
    /* 上端を左右カラム（#sub1 / #side）の先頭ボックスに揃える（上マージンを付けない） */
    margin: 0 0 24px;
    border-radius: 18px;
    background: linear-gradient(180deg, #ffffff, #fafbfc);
    border: 1px solid #eceef1;
    box-shadow: 0 8px 28px rgba(20, 30, 60, .08);
    overflow: hidden;
    padding-bottom: 16px;
}

/* 上部アクセントバー */
#main .mhero::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 6px;
    background: linear-gradient(90deg, var(--accent1) 0 48%, var(--accent2, var(--accent1)) 52% 100%);
}

/* 写真・名前・ステータスを Grid で配置。
   既定（中間幅／スマホ）：写真＋名前を上段、ステータスは全幅で下段。
   広いPC（min-width:1000px）：写真が左で縦に伸び、その右に名前＋ステータスを回り込ませる。 */
#main .mhero-grid {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
        "photo headline"
        "stats stats";
    gap: 12px 20px;
    padding: 20px 22px 6px;
    align-items: center;
}

/* 写真なしメンバー：1カラム（名前→ステータス）。写真欄を作らない */
#main .mhero--nophoto .mhero-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
        "headline"
        "stats";
}

/* 写真（アクセント色のフレーム） */
#main .mhero-photo {
    grid-area: photo;
    padding: 4px;
    border-radius: 18px;
    background: linear-gradient(135deg, var(--accent1), var(--accent2, var(--accent1)));
    box-shadow: 0 6px 18px rgba(0, 0, 0, .16);
}
#main .mhero-photo img {
    display: block;
    width: 180px;
    height: 240px;
    object-fit: cover;
    border-radius: 14px;
}

/* 名前・タグ */
#main .mhero-headline { grid-area: headline; min-width: 0; }

#main .mhero-name {
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
}
#main h1.mhero-name-ja {
    margin: 0;
    padding: 0;
    font-size: 1.95em;
    font-weight: 800;
    letter-spacing: .02em;
    color: #1b2330;
    line-height: 1.1;
}
#main .mhero-name-en {
    font-size: .92em;
    font-weight: 600;
    color: #8a94a3;
    letter-spacing: .08em;
    text-transform: uppercase;
}

#main .mhero-tags {
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
    margin: 13px 0 0;
}
#main .mhero-tag {
    font-size: .8em;
    font-weight: 600;
    color: #43506a;
    background: #eef1f6;
    border-radius: 999px;
    padding: 4px 12px;
}
#main .mhero-tag--accent {
    color: #fff;
    background: #454e63;
}

/* ステータスのタイルグリッド */
#main .mhero-stats {
    grid-area: stats;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
    gap: 10px;
    margin-top: 4px;
}
#main .mhero-stat {
    background: linear-gradient(180deg, #f6f8fb, #eef1f6);
    border: 1px solid #dde2ea;
    border-radius: 11px;
    padding: 9px 12px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
}
#main .mhero-stat-label {
    display: block;
    font-size: .72em;
    color: #9099a7;
    font-weight: 600;
    letter-spacing: .04em;
    margin-bottom: 3px;
}
#main .mhero-stat-value {
    display: block;
    font-size: 1.0em;
    color: #222b3a;
    font-weight: 700;
}
#main .mhero-stat-value small { font-weight: 600; color: #6b7484; font-size: .82em; }
#main .mhero-age { white-space: nowrap; }
/* 生年月日は一番長いのでPC・スマホ共通で2列ぶんの幅（年齢の中途半端な改行を防ぐ） */
#main .mhero-stat--wide { grid-column: span 2; }

/* ペンライト・キャッチフレーズ共通の帯（左側のアクセント直線で統一） */
#main .mhero-block {
    background: linear-gradient(180deg, #f6f8fb, #eef1f6);
    border-left: 4px solid var(--accent1);
    border-radius: 0 10px 10px 0;
    padding: 11px 15px;
}
#main .mhero-block-label {
    display: block;
    font-size: .74em;
    font-weight: 700;
    color: #8a93a2;
    letter-spacing: .05em;
}

/* ペンライト（色を塗ったチップで目立たせる）※キャッチと同じ全幅ブロックで左端を揃える */
#main .mhero-penlight { margin: 14px 22px 0; }
#main .mhero-penlight .mhero-block-label { margin-bottom: 8px; }
#main .mhero-pl-chips { display: flex; gap: 8px; flex-wrap: wrap; }
#main .mhero-pl {
    display: inline-flex;
    align-items: center;
    font-size: .95em;
    font-weight: 700;
    color: var(--pl-ink, #2c3442);
    background: var(--pl, #fff);
    border-radius: 999px;
    padding: 5px 17px;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08), 0 2px 6px rgba(0, 0, 0, .12);
}
#main .mhero-pl--text {
    color: #3a4453;
    background: #eceef2;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06);
}
/* 白系チップ：地に埋もれないよう枠を強める */
#main .mhero-pl--light {
    box-shadow: inset 0 0 0 1px #c4cad3, 0 2px 6px rgba(0, 0, 0, .12);
}

/* ヒーロー内の情報帯（特筆事項・主な出演作品）。ペンライト/キャッチと左ラインを揃える */
#main .minfo-block { margin: 14px 22px 0; }
#main .mhero-block-body {
    margin: 6px 0 0;
    font-size: .95em;
    line-height: 1.7;
    color: #000;
}

/* キャッチフレーズ */
#main .mhero-catch { margin: 14px 22px 0; }
#main .mhero-catch p {
    margin: 6px 0 0;
    font-size: .95em;
    line-height: 1.7;
    color: #000;
}

/* =========================================================
   参加曲カード（曲名＋リリース日＋収録CD、表題曲は緑強調）
   PCは2列／スマホは1列。作曲家ページのカードと同系統。
   ========================================================= */
/* PCでも時系列を追いやすいよう1列。横幅は曲名（左）＋日付/CD（右）で活用 */
#main .msongs {
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
    margin-top: 8px;
}
#main .msong {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    background: linear-gradient(180deg, #f6f8fb, #eef1f6);
    border: 1px solid #dde2ea;
    border-left: 3px solid #b7bdc8;
    border-radius: 8px;
    padding: 8px 14px;
    text-decoration: none;
}
#main .msong:hover { background: #eef1f6; border-color: #dfe3ea; }
#main .msong-title {
    min-width: 0;
    color: #1f2937;
    font-weight: 700;
    line-height: 1.35;
    word-break: break-word;
}
#main .msong-note { color: #9099a7; font-weight: 600; font-size: .78em; margin-left: 4px; }
/* 日付・CDは固定幅にして全カードで縦に揃える */
#main .msong-meta {
    flex-shrink: 0;
    display: flex;
    gap: 14px;
    align-items: baseline;
    font-size: .82em;
    color: #333;
}
#main .msong-date { width: 86px; flex-shrink: 0; white-space: nowrap; font-weight: 600; }
#main .msong-cd { width: 210px; flex-shrink: 0; word-break: break-word; }
/* 表題曲（シングルA面）は緑で強調 */
#main .msong--aside {
    background: linear-gradient(180deg, #f0f9f2, #e9f4ec);
    border-color: #bfe0c6;
    border-left-color: #3aa760;
}
#main .msong--aside .msong-title { color: #1f6b34; }
#main .msong-legend { margin: 6px 0 0; font-size: .85em; color: #6b7280; }
#main .msong-legend .sw {
    display: inline-block;
    width: .95em; height: .95em;
    vertical-align: -2px;
    background: #e9f6ec;
    border: 1px solid #bfe0c6;
    border-left: 3px solid #3aa760;
    border-radius: 3px;
    margin-right: 4px;
}
@media (max-width: 600px) {
    /* スマホ：曲名の下にリリース日・CDを置く縦並び */
    #main .msong {
        flex-direction: column;
        align-items: stretch;
        gap: 3px;
    }
    #main .msong-meta { gap: 10px; }
    #main .msong-date, #main .msong-cd { width: auto; }
}

/* =========================================================
   SNS：プラットフォーム別ボタン（チップ）
   ========================================================= */
#main .msns-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
#main .msns {
    display: inline-flex;
    align-items: baseline;
    gap: 7px;
    background: #fff;
    border: 1px solid #e6e8ec;
    border-radius: 999px;
    padding: 8px 16px;
    text-decoration: none;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .05);
}
#main .msns:hover { border-color: #cfd4db; background: #fafbfc; }
#main .msns-platform { font-weight: 700; font-size: .9em; }
#main .msns-name { color: #7a828f; font-size: .82em; word-break: break-all; }
/* プラットフォームのブランド色 */
#main .msns--yt   .msns-platform { color: #ff0000; }
#main .msns--x    .msns-platform { color: #111111; }
#main .msns--ig   .msns-platform { color: #e1306c; }
#main .msns--tt   .msns-platform { color: #111111; }
#main .msns--sr   .msns-platform { color: #ff4f8b; }
#main .msns--n755 .msns-platform { color: #f6a800; }
#main .msns--fc   .msns-platform { color: #43506a; }

/* 広いPC：写真を左に置き、その右に名前＋ステータスを回り込ませる2カラム。
   （上段右の空白を埋める。ステータスは多列＝約2行で写真とほぼ同じ高さに収まる） */
@media (min-width: 1100px) {
    #main .mhero-grid {
        grid-template-areas:
            "photo headline"
            "photo stats";
        align-items: start;
    }
    /* 写真を少し大きく（3:4のまま＝追加クロップなし）＋縦中央寄せで写真下の余白を上下に分散 */
    #main .mhero-photo { align-self: center; }
    #main .mhero-photo img { width: 204px; height: 272px; }
}

@media (max-width: 600px) {
    /* スマホ：写真（左）＋名前（右）の横並びで左右の余白を作らない。ステータスは全幅。 */
    #main .mhero-grid { padding: 16px 16px 4px; gap: 12px 14px; }
    #main .mhero-photo img { width: 140px; height: 187px; }
    #main h1.mhero-name-ja { font-size: 1.5em; }
    #main .mhero-penlight,
    #main .mhero-catch,
    #main .minfo-block { margin: 14px 16px 0; }
}