/* ============================================================================
   最新消息彈窗（#news_modal 的 .news-modal-body）內文樣式
   ----------------------------------------------------------------------------
   內文是後台 AdminConsole「大賽最新消息」存進 CONTEST_NEWS.news 的 HTML 片段，
   由 index.aspx 的 GetNews() 用 .html() 直接塞進 .news-modal-body。

   在這支檔案之前，那段 HTML 完全暴露在下列全域規則底下：
     SR-contest.css   img { width: 100% }                       ← 圖片一律撐滿，width/height 屬性無效
     SR-contest.css   a   { text-decoration:none; color:#2e3233 } ← 連結看起來跟內文一樣
     bootstrap 3.4.1  table{border-collapse:collapse} td,th{padding:0} ← 裸表格無框線、零內距
   結果就是編輯者只能靠 inline style 逐格對抗，內文變得極難維護。

   這裡把「內文區」的裸標籤行為收斂成可預期的樣子，讓消息可以用語意化 HTML 撰寫。
   .news-modal-body xxx 的 specificity 是 (0,1,1)，高於上述 (0,0,1) 的全域規則，所以會贏。

   ⚠️ 刻意不設 font-size：SR-contest.css 的 p/a/span 字級是隨 768/992/1400 斷點變動的
      響應式設定，media query 不會提高 specificity，在這裡寫死會把手機版字級一起蓋掉。

   載入順序必須在 SR-contest.css 之後（見 index.aspx 的 <link>）。
   ============================================================================ */

/* 圖片：依原始尺寸顯示，超過內容寬度才縮。內容區實際可用寬度為 900 - 15*2 = 870px。 */
.news-modal-body img {
    width: auto;
    max-width: 100%;
    height: auto;
}

/* 連結：要看得出來是連結。 */
.news-modal-body a {
    color: #0b6bcb;
    text-decoration: underline;
}

.news-modal-body a:hover,
.news-modal-body a:focus {
    color: #06509c;
    text-decoration: underline;
}

/* 段落與清單的基本間距。 */
.news-modal-body p {
    margin-bottom: .8em;
}

.news-modal-body ul,
.news-modal-body ol {
    padding-left: 1.6em;
    margin-bottom: 1em;
}

.news-modal-body li {
    margin-bottom: .3em;
}

/* 表格：bootstrap 只做了 border-collapse，框線與內距要自己補。 */
.news-modal-body table {
    width: 100%;
    border-collapse: collapse;
    margin: 1em 0;
}

.news-modal-body th,
.news-modal-body td {
    border: 1px solid #ddd;
    padding: 6px 10px;
    vertical-align: top;
}

.news-modal-body th {
    background: #f5f5f5;
    text-align: left;
}

/* 表格在窄螢幕會超出彈窗，讓內文區自己可以橫向捲動而不是撐破版面。 */
.news-modal-body {
    overflow-x: auto;
}