/* グラフ全体の枠 */
.gold-coin-chart {
    position: relative;
    width: 100% !important;
    height: auto !important; /* 高さは内部要素に任せる */
    margin-bottom: 30px !important;
    padding-bottom: 30px;
    display: block !important;
    background: #fff;
    border: 1px solid #eee; /* 枠線 */
    border-radius: 8px;    /* 角丸 */
    overflow: hidden;      /* 内部のタイトル背景を角丸に合わせる */
}

/* グラフ内部のタイトル装飾（履歴表とデザインを統一） */
.gold-chart-internal-title {
    font-size: 14px;
    font-weight: bold;
    color: #444;
    padding: 12px 15px;
    background: #f9f9f9; /* 薄いグレーの背景 */
    border-bottom: 1px solid #eee;
    display: flex;
    align-items: center;
}

/* タイトルの前にアイコンを付ける（任意） */
.gold-chart-internal-title::before {
    content: "📈";
    margin-right: 8px;
    font-size: 16px;
}

/* 2. キャンバス（グラフ本体）：!important で高さを縛るのをやめます */
canvas[data-gold-chart] {
    display: block;
    width: 100% !important;
    touch-action: none; 
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    height: 450px !important; 
}

/* 3. スマホ表示の調整 */
@media (max-width: 768px) {
    .gold-coin-chart {
        height: 300px !important; /* スマホでは少し低くして操作しやすくする */
    }
    canvas[data-gold-chart] {
        height: 100% !important;
    }
}

/* 外枠 */
.gold-history-wrapper {
    padding: 0 !important; /* タイトルを枠一杯に広げるため */
    overflow: hidden;
    border: 1px solid #eee;
    max-width: 450px;

}

/* タイトル */
.history-title {
    font-size: 15px;
    margin: 0 0 15px 0;
    padding-left: 10px;
    border-left: 4px solid #d4af37;
}

/* テーブル */
.gold-history-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    margin-bottom: 10px;
}

.gold-history-table th, 
.gold-history-table td {
    padding: 12px 8px;
    border-bottom: 1px solid #f0f0f0;
    text-align: center;
}

.gold-history-table th {
    background: #f9f9f9;
    font-weight: bold;
    color: #555;
}

/* 4行目以降を初期状態で【強制的に】隠す */
.gold-history-table tr.history-row-hidden {
    display: none !important;
}

/* ボタンが押されて展開された時のスタイル */
.gold-history-table tr.history-row-hidden.is-expanded {
    display: table-row !important;
}
/* セルごとの装飾 */
.time-cell { color: #888; }
.price-cell { font-weight: bold; color: #333; }

/* 前時比の色：上がったら赤、下がったら青 */
.price-up { color: #d63638; font-weight: bold; }   /* 赤 */
.price-down { color: #1e73be; font-weight: bold; } /* 青 */
.price-flat { color: #aaa; }

.diff-icon { font-size: 10px; margin-right: 3px; }

/* 展開ボタン */
.gold-history-expand-btn {
    display: block;
    width: 100%;
    padding: 10px;
    background: #f8f8f8;
    border: 1px solid #ddd;
    border-radius: 4px;
    color: #666;
    cursor: pointer;
    font-size: 13px;
    transition: background 0.2s;
    outline: none;
}

.gold-history-expand-btn:hover {
    background: #f0f0f0;
}
/* 履歴表の内部タイトルの装飾 */
.gold-history-internal-title {
    font-size: 14px;
    font-weight: bold;
    color: #444;
    padding: 10px 12px;
    background: #f9f9f9; /* ヘッダーのような背景 */
    border-radius: 5px 5px 0 0;
    border-bottom: 1px solid #eee;
    margin-bottom: 5px;
    display: flex;
    align-items: center;
}
/* アイコンなどを付けたい場合 */
.gold-history-internal-title::before {
    content: "📊";
    margin-right: 8px;
    font-size: 16px;
}