/* 整個跑馬燈區 ***/
.accessible-marquee-container {
    display: flex;
    align-items: center;
    background: #FFF;
    padding: 0;
    margin: 0;
    border-style: solid;
    border-width: 1px;
    border-color: #d9534f;
    border-color: #ccc;
}

/* 跑馬燈標題 */
.marquee-title {
    background: #d9534f;
    color: white;
    font-weight: bold;
    padding: .1em .8em;
    margin: 0 .2em 0 0;
    white-space: nowrap;
    /* 防止標題斷行 */
}

/* 按鈕區 */
.marquee-controls {
    display: flex;
    gap: .1em;
    margin-right: .5em;
}

/* 每個按鈕 */
.marquee-controls button {
    padding: .2em .8em;
    cursor: pointer;
    background: #0056b3;
    color: white;
    border: none;
    border-radius: 4px;
    white-space: nowrap;
    font-size: 80%;
}

.marquee-controls button:hover {
	background: #333;
}

.marquee-controls button:focus {
    outline: 5px solid #ffcc00;
    /* 明顯的鍵盤聚焦框 */
    outline-offset: -5px;
}

/* 資料列表區 */
.marquee-window {
    overflow: hidden;
    white-space: nowrap;
    flex-grow: 1;
    position: relative;
}

.marquee-content {
    display: inline-flex;
    list-style: none;
    margin: 0;
    padding: 0;
    will-change: transform;
    transition: none;
}

.marquee-content li {
    padding-right: 1em;
    /* 新聞之間的間距 */
}

.marquee-content li a {
    color: #175B96;
    text-decoration: none;
    font-size: 95%;
    display: block;
}

/*** 各項目前方加入 icon font ***/
.marquee-content li a:before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f0da";
    /* <i class="fas fa-caret-right"></i> */
    padding-right: .3em;
    color: #E74847;
}

.marquee-content li a:hover {
    color: #AC1616;
}

.marquee-content li a:focus {
    outline: 3px solid #0056b3;
    background: #fff8db;

}

/*** 日期欄位 ***/
.marquee-content li .date {
    display: inline-block;
    color: #AC1616;
    padding-right: .5em;
    font-size: 85%;
}

.marquee-content li em {
    color: #006100;
}



/* ==========================================================================
   2. RWD 手機版樣式 (微調斷點，以下以 768px 為例)
   ========================================================================== */
@media (max-width: 768px) {
    .accessible-marquee-container {
        flex-wrap: wrap;
        /* 關鍵：允許內容不夠時自動換行 */
        gap: 10px;
        /* 上下兩行分開時的間距 */
        padding: 12px;
    }

    /* 讓標題與按鈕在第一行並排，並且適度分配空間 */
    .marquee-title {
        margin-right: auto;
        /* 精髓：自動推開右側，讓按鈕靠最右邊對齊 */
    }

    .marquee-controls {
        margin-right: 0;
        /* 清除桌機版的右外距 */
    }

    /* 讓跑馬燈視窗在手機版強制換到第二行，並撐滿 100% 寬度 */
    .marquee-window {
        width: 100%;
        flex-basis: 100%;
        /* 強制換行的 Flexbox 技巧 */
        background: #ffffff;
        /* 手機版內容區可加白色底，讓文字更易讀 */
        padding: 6px 8px;
        border-radius: 4px;
        border: 1px solid #e0e0e0;
        box-sizing: border-box;
    }
}