﻿/* 外層容器：自動填滿 Modal 寬度 */
.announcement-card {
    width: 100%; /* 重要：讓寬度自適應父層 */
    max-width: 100%; /* 確保不會超出邊界 */
    background-color: #fff;
    border: 2px solid #331a00;
    border-radius: 15px;
    overflow: hidden; /* 確保標題背景不會蓋掉圓角 */
    box-sizing: border-box; /* 讓 padding 和 border 不會撐開寬度 */
}

/* 標題區 */
.card-header {
    background-color: #40BF61;
    color: #ffffff;
    text-align: center;
    padding: 10px 0;
    font-weight: bold;
    letter-spacing: 5px; /* 模擬圖片中的字體間距 */
    border-bottom: 2px solid #331a00;
}

/* 內容區的外距 */
.card-body {
    padding: 12px;
}

/* 內層虛線框 */
.content-box {
    border: 2px dotted #000;
    border-radius: 10px;
    padding: 20px 15px; /* 上下 20px, 左右 15px (若覺得左邊還是太空，可縮小 15px) */
    font-size: 1.25rem; /* 文字放大一點更有警示感 */
    font-weight: bold;
    color: #000;
    line-height: 1.6;
    /* --- 修改重點在這邊 --- */
    display: flex;
    align-items: center; /* 保持垂直居中 (如果需要) */
    justify-content: flex-start; /* 水平靠左 (這是 Flexbox 的靠左) */
    text-align: left; /* 文字內容靠左對齊 (多行時生效) */
    /* ---------------------- */

    min-height: 80px;/* 設定最小高度，避免內容太少時太扁 */
    word-break: break-all; /*自動斷行*/
}