/* 文章頁讀者留言區在健康站這一側需要的樣式：留言標題不被全站標題樣式蓋掉、捷徑捲過去時避開頂端選單列、
   手機與平板左右對齊內文、「留言」捷徑按鈕與新功能泡泡。留言區本身的樣式由留言服務提供，這裡不重畫。 */

/* 留言區放在白色文章框（.article）裡、相關新聞正上方。health_content.css 的「.article h1, .article h2」
   （28px、行高 1.3、下內距 10px、下外距 5px、底部雙線；500px 以下 25px、380px 以下 24px）
   比留言服務的 .ltnc-title 具體，會讓標題變大並多一條雙線；分享列的「字體縮放」鈕還會替頁上所有 h2
   加上 lg_h1（.article h2.lg_h1：32px）。這裡用 id 拉回留言服務的值（.ltnc-title：20px／1.3／700、外距 0），兩邊要一起改。 */
#ltn-comments h2.ltnc-title {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 20px;
    line-height: 1.3;
    font-weight: 700;
}

/* 捲到留言區時，避開健康黏在頂端的綠色選單列（.healtHeader，sticky、高 50px），留言標題不被蓋住 */
#ltn-comments {
    scroll-margin-top: 60px;
}

/* 留言服務在 800px 以下自己左右退 20px（給外框沒有內距的站用）；健康的文章框本來就有左右內距，
   再退一次會比內文與相關新聞各縮進 20px。這裡歸零，讓留言區左右緣與內文、相關新聞切齊。 */
@media screen and (max-width: 800px) {
    #ltn-comments .ltnc {
        margin-left: 0;
        margin-right: 0;
    }
}

/* 「留言」捷徑按鈕：與新聞主站同一顆，尺寸跟著健康分享列的 35px 圖示（FB、X、LINE 各 35px、右距 5px）。
   兩字與泡泡都用 CSS 畫，不為這顆按鈕多下載圖檔。 */
.article .function .comment_shortcut {
    position: relative;
    display: inline-block;
    vertical-align: top;
    width: 35px;
    height: 35px;
    margin: 0 5px 0 0;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    font: inherit;
}

.article .function .comment_shortcut:hover {
    opacity: 0.8;
}

/* 底色沿用主站工具按鈕的灰；外形用圓形，配合健康分享列的圓形圖示 */
.article .function .comment_shortcut .btnIcon {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background: #979797;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 限寬一個字讓「留言」兩字折成上下兩列；35px 高的按鈕放 16px 兩個字剛好 */
.article .function .comment_shortcut .cmtLabel {
    width: 16px;
    color: #fff;
    font-size: 16px;
    font-weight: 500;
    line-height: 16px;
    letter-spacing: 0;
    text-align: center;
    word-break: break-all;
}

/* 新功能泡泡：掛在按鈕上方 3px、水平置中，與按鈕裡「留言」兩字的中線對齊，各寬度相同 */
.article .function .comment_shortcut .newBadge {
    height: 14px;
    padding: 0 4px;
    border-radius: 7px;
    background: #d8232a;
    color: #fff;
    font: 700 10px/14px Arial, sans-serif;
    letter-spacing: 0;
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin: 0 0 3px 0;
    white-space: nowrap;
}

.article .function .comment_shortcut .newBadge[hidden] {
    display: none;
}

/* 420px 以下健康分享圖示拿掉右距（health_content.css），按鈕跟著拿掉 */
@media screen and (max-width: 420px) {
    .article .function .comment_shortcut {
        margin-right: 0;
    }
}

/* 1139px 以下分享圖示靠右排（health_content.css 1139px 以下那段），「留言」排在整排最後、字體縮放鈕之後：
   按鈕浮到圖示那一行最右邊，其他圖示的順序不動；601～1139px 時間浮在同一行左邊，600px 以下時間獨佔上一行，
   按鈕都跟圖示同一行。浮動的按鈕前面沒有圖示之間那個空白字，左外距補一個空白字寬（0.28em），間距與其他圖示相同。
   1140px 以上字體縮放與列印浮在右邊，按鈕跟在 LINE 後面。 */
@media screen and (max-width: 1139px) {
    .article .function .comment_shortcut {
        float: right;
        margin-left: 0.28em;
    }
}

/* 601～1139px 時間寬度原本是「整行減 240px」，剩下的 240px 放 5 顆圖示剛好夠；多一顆按鈕要 6 顆，
   時間改成「整行減 280px」，6 顆仍在同一行。時間文字靠左、只有十幾個字，寬度變窄看不出來。
   600px 以下時間獨佔一行（寬 100%），不受影響。 */
@media screen and (min-width: 601px) and (max-width: 1139px) {
    .article .function .time {
        width: calc(100% - 280px);
    }
}

/* 601～1139px 按鈕上緣到標題底部雙線只有 10px（分享列上方內距 5px＋標題下外距 5px），
   泡泡掛在上方要 17px（高 14px、間距 3px），會壓到雙線。只在泡泡顯示時（打開泡泡的程式替分享列加上
   comment_badge_on）把分享列上方內距從 5px 加到 17px，泡泡離雙線 5px；泡泡過期後不加 class，分享列回到原本 5px。
   1140px 以上時間獨佔一行、600px 以下時間也獨佔一行，泡泡上方本來就有空間，不加。 */
@media screen and (min-width: 601px) and (max-width: 1139px) {
    .article .function.comment_badge_on {
        padding-top: 17px;
    }
}

/* 列印時不印留言區、分享列的留言捷徑（泡泡在按鈕內，一起消失）。
   本檔連結在文章內容裡、晚於 health_content.css，且按鈕顯示規則權重與其他規則相同、後出現者勝，
   所以列印隱藏要放在本檔最後，並用 !important 確保不被前面的顯示規則蓋過。 */
@media print {
    #ltn-comments,
    .article .function .comment_shortcut {
        display: none !important;
    }
}