/* 2025/05/28追記 WeightChangeグラフ用　*/

/* グラフのラッパー要素のスタイル */
/* #chart-container のスタイルを .chart-container-wrapper に変更/移動 */
/* HTMLで <div class="chart-container-wrapper"> を使用している場合 */
.chart-container-wrapper {
    background-color: #ffffff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    margin: 20px auto;
    width: 100%;
    max-width: 1000px;
    /* --- ★ここが重要★ --- */
    /* 高さが明示的に設定されていないため、内容がない場合に0になる可能性があります。 */
    /* グラフの高さが確保されるように min-height を追加します。 */
    min-height: 400px; /* 例えば、グラフの高さ350px + margin.top/bottom + padding などを考慮して設定 */
    /* または固定の height: 400px; でも良いですが、レスポンシブには min-height が有利 */
}

/* もしHTMLで <div id="chart-container"> を使う場合は、以下のように変更なしでIDセレクターのままにしてください */
/*
#chart-container {
    background-color: #f2f2f2;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    margin: 20px auto;
    width: 100%;
    max-width: 1000px;
    min-height: 400px;
}
*/

/* --- グラフの線、軸、グリッドなどのスタイルはそのまま --- */
.line { fill: none; stroke: red; stroke-width: 2px; }
.axis path, .axis line { fill: none; stroke: grey; stroke-width: 1px; shape-rendering: crispEdges; }
.axis text { font-family: sans-serif; font-size: 10px; }
.grid .tick line { stroke: lightgrey; stroke-opacity: 0.7; shape-rendering: crispEdges; stroke-dasharray: 2, 2; }
.grid .domain { display: none; }
.data-label-bg { fill: red; rx: 3; ry: 3; }
.data-label { font-family: sans-serif; font-size: 10px; fill: white; text-anchor: middle; }
/* .target-line { stroke: #00BCD4; stroke-width: 1.5px; } ターゲットライン機能無効化のためコメントアウト */
.chart-title { font-size: 16px; font-weight: bold; text-anchor: middle; }
.axis-label { font-size: 12px; text-anchor: middle; }
.legend-text { font-size: 12px; }

/* もし .d3-weight-chart-area 自体に直接スタイルを適用したい場合は以下も検討 */
/*
.d3-weight-chart-area {
    width: 100%;
    height: 100%; // 親要素の高さに合わせる
    display: block; // 念のため
}
*/

/* リプレイボタンのスタイル */
.chart-container-wrapper .replay-button-container {
    text-align: center;
    margin-top: 15px;
}

.chart-container-wrapper .replay-button {
    padding: 8px 15px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    transition: background-color 0.2s ease; /* ホバーエフェクト用 */
}

.chart-container-wrapper .replay-button:hover {
    background-color: #0056b3; /* ホバー時の色 */
}

.chart-container-wrapper .replay-button:active {
    background-color: #004085; /* クリック時の色 */
}