/* 劇場公演出演回数一覧：名前=左／回数=中央（列揃い）／初出演日=右端 の3カラム。 */
#main .ml-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 5.5em minmax(0, 1fr);
    align-items: center;
    gap: 8px;
}
#main .ml-card .ml-name { justify-self: start; }
/* 回数（中央カラム・右揃いで数字を整列） */
#main .ml-card > .ml-cells:not(.ml-firstcell) { justify-self: end; }
/* 初出演日（右端カラム・右揃い） */
#main .ml-card > .ml-firstcell { justify-self: end; }

/* 列見出し（各行に「初」等を繰り返さず、上に一度だけ表示）。カードと同じ3カラム・同じ左右padで整列 */
#main .tc-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 5.5em minmax(0, 1fr);
    gap: 8px; align-items: center;
    max-width: 600px; margin: 0 auto 6px; padding: 0 12px;
}
#main .tc-head .tc-h { font-size: .76em; font-weight: 800; color: #9aa1ab; }
#main .tc-head .tc-name { justify-self: start; }
#main .tc-head .tc-count { justify-self: end; }
#main .tc-head .tc-first { justify-self: end; }

#main .ml-first-val {
    color: #5b6b62; font-weight: 600; font-size: .85em;
    font-variant-numeric: tabular-nums;   /* 数字幅をそろえて日付列を整列 */
}

/* ===== 出演回数の推移グラフ（全線＝淡グレー／選択1名＝ピンク強調） ===== */
#main .tcg-section {
    margin: 34px 0 22px; padding: 22px 12px 0;   /* 左右に余白＝右端の数字やカードが画面端で切れないように */
    border-top: 2px solid #f0e2e9;   /* 上の表との区切り */
}
#main .tcg-title {
    font-size: 1.35em; font-weight: 800; color: #1f2937;
    letter-spacing: .01em; margin: 0 0 6px; line-height: 1.35;
}
#main .tcg-ctrl {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    margin-bottom: 10px; font-size: .9em;
}
#main .tcg-lead { font-size: .86em; color: #4b5563; margin: 0 0 8px; font-weight: 600; }
#main .tcg-pick { display: inline-flex; align-items: center; gap: 6px; }
#main .tcg-leg { width: 14px; height: 14px; border-radius: 4px; flex-shrink: 0; }
#main .tcg-leg1 { background: #e0568f; }
#main .tcg-leg2 { background: #f5811f; }
#main .tcg-ctrl select {
    font-size: 16px; padding: 6px 10px; border: 1px solid #dfe4ec;
    border-radius: 8px; background: #fff; max-width: 100%;
}
#main .tcg-chart {
    background: #fff; border: 1px solid #e6ebf1; border-radius: 12px;
    padding: 10px 8px 4px; margin-bottom: 12px; box-shadow: 0 1px 2px rgba(16,24,40,.05);
}
#main .tcg-cap { font-size: .82em; font-weight: 700; color: #5b6570; margin: 0 4px 6px; }
#main .tcg-svg { display: block; width: 100%; height: auto; }
#main .tcg-grid { stroke: #eef0f3; stroke-width: 1; }
#main .tcg-axis { stroke: #cfd5dd; stroke-width: 1; }
#main .tcg-ylab, #main .tcg-xlab { fill: #5b6570; font-size: 11px; font-weight: 600; }
#main .tcg-lines .tcg-line { fill: none; stroke: #9aa2ac; stroke-width: 1; opacity: .7; }
/* 選択ハイライト（1＝ピンク / 2＝オレンジ） */
#main .tcg-lines .tcg-hl1 { stroke: #e0568f; stroke-width: 2.6; opacity: 1; }
#main .tcg-lines .tcg-hl2 { stroke: #f5811f; stroke-width: 2.6; opacity: 1; }
/* マウスホバーで一時ハイライト（青。選択中の色と区別） */
#main .tcg-lines .tcg-hover { stroke: #2563eb; stroke-width: 2.6; opacity: 1; }
#main .tcg-note { font-size: .8em; color: #8a93a2; margin: 2px 0 0; line-height: 1.6; }

/* グラフ間の広告（折れ線②の下） */
#main .tcg-ad { margin: 26px 0 8px; text-align: center; }
#main .tcg-ad-label { font-size: .72em; color: #b0b6be; letter-spacing: .1em; margin-bottom: 4px; }

/* 横棒：1か月あたりの平均出演回数ランキング（現役全員・多い順） */
#main .tcg-hbars { display: flex; flex-direction: column; gap: 5px; margin: 8px 0 2px; }
#main .tcg-hbar-row { display: flex; align-items: center; gap: 8px; }
#main .tcg-hbar-name {
    width: 5.5em; flex-shrink: 0; text-align: right;
    font-weight: 700; color: #1f2937; font-size: .92em;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#main .tcg-hbar-track {
    flex: 1 1 auto; min-width: 0; height: 15px;
    background: #f1f3f6; border-radius: 2px; overflow: hidden;
}
#main .tcg-hbar-fill {
    display: block; height: 100%; border-radius: 2px;
    background: #c47d9a;   /* 彩度を落とした落ち着いたローズ（鮮やかすぎない） */
}
#main .tcg-hbar-val {
    width: 2.6em; flex-shrink: 0; text-align: right;
    font-weight: 800; color: #b1487c; font-size: .88em;
    font-variant-numeric: tabular-nums;
}
/* スマホは折れ線グラフの軸の数字を約2倍に（SVGはviewBox基準なのでunitで指定） */
@media (max-width: 600px) {
    #main .tcg-ylab, #main .tcg-xlab { font-size: 21px; }
}

/* 線ホバー時の名前ツールチップ（PC） */
#main .tcg-svg { touch-action: pan-y; }
.tcg-tip {
    position: fixed; z-index: 3000; pointer-events: none;
    background: #1f2937; color: #fff; font-size: 12px; font-weight: 700;
    padding: 4px 9px; border-radius: 7px; white-space: nowrap;
    box-shadow: 0 4px 12px rgba(0,0,0,.25); transform: translate(0,0);
}
.tcg-tip[hidden] { display: none; }
/* ホバー非対応（タッチ端末）では「PCは…」注記を隠す */
@media (hover: none) { #main .tcg-note-pc { display: none; } }