.chart-container-style {
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
    background-color: #ffffff;
}
.one-chart-container {
    height: 850px;
}
.two-chart-container {
    height: 950px;
}
.sub-chart-width {
    width: 600px;
    min-width: 400px;
}
.chart-width {
    width: 900px;
    min-width: 600px;
}
.ai-container {
    height: 90%;
    border: 1px solid #ddd;
}
.ai-response {
    overflow: auto; /* 當內容超出容器時，顯示滾動條 */
    word-wrap: break-word; /* 長字元強制換行 */
    white-space: normal; /* 允許自動換行 */
    max-height: 750px; /* 設定容器的最大高度 */
}
@media (max-width: 768px) { /* 在平板或更小的設備 */
    .ai-response {
        max-height: 600px; /* 減少高度 */
    }
}
@media (max-width: 576px) { /* 在手機尺寸 */
    .ai-response {
        max-height: 400px; /* 降低高度 */
    }
}
.chart-hint {
    color: #ffffff;
    letter-spacing: 0.5px;
    background-color: rgb(41, 105, 176, 0.7);
    border-radius: 4px;
}
.card-column-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #c8dff6;
    border-radius: 10px;
}
.card-column-title {
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 15px;
    text-align: center;
}
/* .card + .card {
    margin-top: 15px;
} */
.card {
width: 170px; /* 固定卡片寬度 */
margin: auto; /* 卡片置中並保持間距 */
}
.card-title {
white-space: nowrap; /* 禁止換行 */
overflow: hidden; /* 隱藏超出的文字 */
text-overflow: ellipsis; /* 使用省略號表示超出的部分 */
font-size: calc(1rem + 1vw); /* 根據螢幕大小自適應字體 */
}
.card-title.auto-scale {
font-size: 1rem; /* 起始字體大小 */
display: block; /* 保證標題為塊級元素 */
text-align: center; /* 標題文字置中 */
line-height: 1.2; /* 控制行高 */
width: 100%; /* 占據父容器寬度 */
transform-origin: left; /* 設置縮放基準點 */
}
.multipleSelect {
    max-width: 100%;
    width: 350px;
}

.vscomp-toggle-button {
    padding: 10px 30px 10px 10px;
    border-radius: 5px;
}

.collapsible-table {
    width: 100%;
    border-collapse: collapse;
}

.collapsible-table th, .collapsible-table td {
    border: 1px solid #ddd;
    padding: 8px;
}

.collapsible-header {
    cursor: pointer;
    background-color: #f2f2f2;
}

.prefecture-row.expanded + .district-row {
    display: table-row;
}

.district-row {
    display: none;
}