/*
 * ===================================================================
 * D3.jsグラフ 共通スタイル
 * /css/common-chart-styles.css
 *
 * このファイルは、すべてのグラフで共通して使用されるスタイルを定義します。
 * (外側コンテナ、タイトル、描画エリア、メッセージなど)
 * ===================================================================
 */

/*
 * -------------------------------------------------------------------
 * 1. グラフコンテナの基本レイアウト
 * -------------------------------------------------------------------
 */

/* 1-1. グラフ全体を囲む、最も外側のコンテナ (.chart-container-wrapper) */
.chart-container-wrapper {
    position: relative;
    background-color: #ffffff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    margin: 20px auto;
    width: 100%;
    box-sizing: border-box;
}

/* 1-2. D3.jsがSVGを挿入する、内側の描画エリア (.chart-area) */
.chart-area {
    width: 100%;
}

/* 1-3. SVG要素自体の共通スタイル */
.chart-area svg {
    display: block;
    width: 100%;
    height: auto;
    /* overflow: visible; を設定したい場合は個別CSSで上書きする */
}


/*
 * -------------------------------------------------------------------
 * 2. 共通コンポーネント
 * -------------------------------------------------------------------
 */

/* 2-1. グラフの共通HTMLタイトル (h3.chart-title) */
/*
 * WordPressの投稿本文エリア内でのみ適用されるように .entry-content を含め、
 * スタイルのスコープを限定し、テーマとの競合を避ける。
 */
.entry-content .chart-container-wrapper .chart-title {
    margin-top: 0;
    margin-bottom: 15px;
    padding: 0;
    border: none;
    background: none;
    font-size: 1.2em;
    font-weight: bold;
    color: #333;
    text-align: center;
}

/* 2-2. データロード中やエラー時に表示するメッセージ (.chart-message) */
.chart-area .chart-message {
    font-family: sans-serif;
    padding: 1rem;
    border-radius: 4px;
    text-align: center;
    min-height: 200px; /* 描画前のガタツキを防ぐために高さを確保 */
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    box-sizing: border-box;
}
.chart-area .chart-message.error {
    color: #721c24;
    background-color: #f8d7da;
    border: 1px solid #f5c6cb;
}
.chart-area .chart-message.warning {
    color: #856404;
    background-color: #fff3cd;
    border: 1px solid #ffeeba;
}