body {
font-family: sans-serif;
}

#chart {
width: 1200px;
height: 600px;
margin: auto;
}

.controls {
text-align: center;
margin: 20px;
}

/* ===============================
   全体のベース改善
=============================== */
body {
font-family: "BIZ UDPGothic", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
background: #EEF2F7;
}

/* ===============================
   グラフ枠をカード化
=============================== */
#chart {
width: 900px;
height: 650px;
margin: 20px auto;
background: #FFFFFF;
border-radius: 12px;
box-shadow: 0 4px 12px rgba(0,0,0,0.08);
padding: 10px;
}

/* ===============================
   コントロールバー改善
=============================== */
.controls {
text-align: center;
margin: 20px auto;
padding: 12px 16px;
background: #F7F9FC;
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
display: inline-flex;
flex-wrap: wrap;
gap: 10px;
align-items: center;
justify-content: center;
}

/* ===============================
   セレクトボックス
=============================== */
select {
padding: 6px 10px;
border-radius: 8px;
border: 1px solid #ccc;
background: #fff;
font-size: 14px;
cursor: pointer;
}

/* ===============================
   ボタン
=============================== */
button {
padding: 6px 12px;
border: none;
border-radius: 8px;
background: #5A399C;
color: #fff;
font-size: 14px;
cursor: pointer;
transition: all 0.2s ease;
}

#playToggleBtn {
min-width: 70px;
text-align: center;
}

/* ホバー */
button:hover {
background: #7B5CC9;
}

/* 押したとき */
button:active {
transform: scale(0.95);
}

/* 無効状態 */
button:disabled {
background: #ccc;
cursor: not-allowed;
}

/* ===============================
   スライダー
=============================== */
input[type="range"] {
accent-color: #5A399C;
cursor: pointer;
}

/* ===============================
   年ラベル強調
=============================== */
#yearLabel {
display: inline-block;
width: 60px;
text-align: right;
font-variant-numeric: tabular-nums;
font-size: 20px;
font-weight: bold;
}

/* ===============================
   テキスト間隔調整
=============================== */
.controls span,
.controls label {
margin: 0 4px;
}