﻿@charset "utf-8";
    /* ===== 內容區域文字樣式 ===== */
    .content-text {      
        font-size: var(--font-size-base);
        color: var(--text-color-primary);
        line-height: var(--line-height-base);
        font-weight: var(--font-weight-normal);
    }

    /* 段落樣式 */
    .content-text p {
        line-height: var(--line-height-base);
        margin-top: var(--margin-top-other);
        margin-bottom: var(--margin-bottom-base);
        font-weight: var(--font-weight-normal);
    }

    /* ===== 標題層級樣式 ===== */
    /* H1 標題 */
    .content-text h1,
    h1 {
        color: var(--text-color-heading);
        font-size: calc(var(--font-size-base) + var(--font-increment-h1));
        line-height: var(--line-height-heading);
        font-weight: var(--font-weight-bold);
        position: relative;
        display: block;
        margin-top: var(--margin-top-h1);
        margin-bottom: var(--margin-bottom-base);
    }

    /* H2 標題 */
    .content-text h2,
    h2 {
        color: var(--text-color-subheading);
        font-size: calc(var(--font-size-base) + var(--font-increment-h2));
        line-height: var(--line-height-heading);
        font-weight: var(--font-weight-bolder);
        position: relative;
        display: block;
        margin-top: var(--margin-top-other);
        margin-bottom: var(--margin-bottom-base);
    }

    /* H3 標題 */
    .content-text h3,
    h3 {
        color: var(--text-color-subheading);
        font-size: calc(var(--font-size-base) + var(--font-increment-h2) - 0.1rem);
        line-height: var(--line-height-heading);
        font-weight: var(--font-weight-bold);
        position: relative;
        display: block;
        margin-top: var(--margin-top-other);
        margin-bottom: var(--margin-bottom-base);
    }

    /* H4 標題 */
    .content-text h4,
    h4 {
        color: var(--text-color-subheading);
        font-size: calc(var(--font-size-base) + var(--font-increment-h2) - 0.2rem);
        line-height: var(--line-height-heading);
        font-weight: var(--font-weight-medium);
        position: relative;
        display: block;
        margin-top: var(--margin-top-other);
        margin-bottom: var(--margin-bottom-base);
    }

    /* H5 標題 */
    .content-text h5,
    h5 {
        color: var(--text-color-subheading);
        font-size: calc(var(--font-size-base) + var(--font-increment-h2) - 0.3rem);
        line-height: var(--line-height-heading);
        font-weight: var(--font-weight-normal);
        position: relative;
        display: block;
        margin-top: var(--margin-top-other);
        margin-bottom: var(--margin-bottom-base);
    }

    /* H6 標題 */
    .content-text h6,
    h6 {
        color: var(--text-color-secondary);
        font-size: calc(var(--font-size-base) + var(--font-increment-h2) - 0.4rem);
        line-height: var(--line-height-heading);
        font-weight: var(--font-weight-normal);
        position: relative;
        display: block;
        margin-top: var(--margin-top-other);
        margin-bottom: var(--margin-bottom-base);
    }

    /* ===== 強調文字樣式 ===== */
    /* 一般強調 */
    .content-text strong,
    strong {
        color: var(--text-color-strong);
        font-weight: var(--font-weight-bold);
    }

    /* 區塊強調 */
    .content-text strong.block,
    strong.block {
        color: var(--text-color-strong-block);
        font-size: calc(var(--font-size-base) + var(--font-increment-strong));
        font-weight: var(--font-weight-bolder);
        margin-top: var(--margin-top-other);
        margin-bottom: 0px;
        display: block;
    }

    /* ===== 特殊元素處理 ===== */
    /* BR 換行處理 */
    .content-text br {
        display: inline;
        font-weight: inherit;
    }

/* ===== 響應式設計 ===== */
/* 手機裝置 (600px以下) */
@media (max-width: 600px) {
    .content-text br {
        display: block;
        margin-bottom: var(--margin-bottom-mobile);
    }
    
    .content-text {
        font-size: var(--font-size-base);
    }
    
    .content-text h1,
    h1 {
        font-size: calc(var(--font-size-base) + var(--font-increment-h1));
    }
    
    .content-text h2,
    .content-text h3,
    .content-text h4,
    .content-text h5,
    .content-text h6,
    h2, h3, h4, h5, h6 {
        font-size: calc(var(--font-size-base) + var(--font-increment-h2));
    }
    
    .content-text strong.block,
    strong.block {
        font-size: calc(var(--font-size-base) + var(--font-increment-strong));
    }
    
    .main-content {
        padding: 20px 0;
    }
}