/* 主容器 */
.bundle-5-14 .container {
    max-width: 800px;
    width: 100%;
    margin-left: auto;
    /* 水平置中 */
    margin-right: auto;
    /* 水平置中 */
    padding: 20px 100px 20px 100px;
    /* Match 107-108 padding */
    margin-bottom: 2.5rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    background-color: #fff;
    position: relative;
}

/* 標題樣式 */
.bundle-5-14 .title {
    text-align: center;
    color: #806856;
    /* Default brown color */
    margin: 10px 0 5px 0;
    /* Reduced bottom margin slightly */
    font-size: 2.4rem;
    font-weight: bold;
    line-height: 1.3;
}

.bundle-5-14 .subtitle {
    text-align: center;
    color: #806856;
    /* Match default title color */
    font-size: 1.2rem;
    margin: 0 auto 10px auto;
    /* Adjusted margin */
    max-width: 90%;
}

.bundle-5-14 .chapter {
    text-align: center;
    color: #806856;
    /* Match default title color */
    margin: 5px 0 20px 0;
    /* Adjusted margin */
    font-size: 1.2rem;
}



/* Specific Title Styles */
.bundle-5-14 .page-5 .title {
    color: #806856;
    /* Purple color from page 5, but keeping original #806856 based on precedence */
    font-size: 2.8rem;
}

.bundle-5-14 .page-5 .subtitle,
.bundle-5-14 .page-5 .chapter {
    color: #806856;
    font-weight: bold;
}

/* Styles for page 12 from the second block */
.bundle-5-14 .page-12 .title,
.bundle-5-14 .page-12 .subtitle,
.bundle-5-14 .page-12 .chapter {
    color: #806856;
    /* Consistent with .title */
    font-weight: bold;
}

.bundle-5-14 .page-12 .title {
    font-size: 2.6rem;
    /* Matches .page-5 .title size */
}

/* 作者樣式 */
.bundle-5-14 .author {
    text-align: center;
    margin: 15px 0;
    font-size: 1rem;
    color: #333;
}

/* 圓形點點的虛線 */
.bundle-5-14 .dotted-line {
    height: 8px;
    width: 100%;
    margin: 25px 0;
    background-image: radial-gradient(circle, #aaa 1px, transparent 1px);
    background-size: 8px 8px;
    background-position: center;
}

/* 內容樣式 */
.bundle-5-14 .content {
    max-width: 600px;
    margin: 0 auto;
}

/* Specific content styling for pages without centered text */
.bundle-5-14 .page-6 .content,
.bundle-5-14 .page-8 .content,
.bundle-5-14 .page-9 .content,
.bundle-5-14 .page-10 .content,
.bundle-5-14 .page-11 .content,
/* Extended from second block */
.bundle-5-14 .page-12 .content,
.bundle-5-14 .page-13 .content,
.bundle-5-14 .page-14 .content,
.bundle-5-14 .page-15 .content,
.bundle-5-14 .page-17 .content,
.bundle-5-14 .page-18 .content,
.bundle-5-14 .page-19 .content {
    max-width: none;
    /* Allow full width within container padding */
}

.bundle-5-14 .content-title {
    text-align: left;
    color: #806856;
    /* Match default title color */
    margin: 30px 0 20px;
    font-size: 1.3rem;
    font-weight: bold;
}

/* Style for page 12 title "四" with circle - from second block */
.bundle-5-14 .content-title-circled {
    display: flex;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #806856;
    color: white;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    font-weight: bold;
    margin: 30px auto 20px;
    text-align: center;
}

.bundle-5-14 .content-paragraph {
    text-indent: 2em;
    margin-bottom: 15px;
    line-height: 1.8;
    /* font-size: 1rem; */
}

/* 引用樣式 */
.bundle-5-14 .content-quote {
    margin: 10px 0 10px 30px;
    padding: 10px 15px;
    border-left: 3px solid #806856;
    background-color: #f9f7f4;
    font-style: italic;
    color: #5a4a3a;
    text-indent: 0;
}

/* Quote style from page 5 */
.bundle-5-14 .quote {
    margin: 20px 0;
    padding-left: 2em;
    /* Indent quote */
}

.bundle-5-14 .quote p {
    text-indent: 0;
    /* Remove double indent */
    margin-bottom: 5px;
    /* Reduce space between lines in quote */
}

/* Styles from second block */
.bundle-5-14 .no-indent {
    text-indent: 0 !important;
}

.bundle-5-14 .indented-list-item {
    margin-left: 2em;
    text-indent: 0;
    margin-bottom: 15px;
}

.bundle-5-14 .bold-indented-list-item {
    margin-left: 2em;
    text-indent: 0;
    margin-bottom: 15px;
    font-weight: bold;
}

/* Figure/Image Styles */
.bundle-5-14 figure {
    margin-bottom: 1rem;
}

.bundle-5-14 figure img {
    max-width: 100%;
    height: auto;
    display: block;
    border: 1px solid #eee;
    border-radius: 4px;
    margin: 0 auto;
}

.bundle-5-14 figcaption {
    font-size: 0.9em;
    color: #555;
    text-align: center;
    margin-top: 5px;
}

.bundle-5-14 .figure-center {
    text-align: center;
    margin: 20px auto;
    max-width: 80%;
}

.bundle-5-14 .image-full-width {
    max-width: 100%;
    margin: 0 0 3rem auto;
    /* Center the content block itself */
}

.bundle-5-14 .image-full-width figure {
    margin-bottom: 5px;
    /* Reduce margin below full-width image */
}

.bundle-5-14 .image-full-width img {
    max-width: 100%;
    margin: 0;
    /* Remove auto margin for centering within figure */
}

/* Styles specific to page 16 (centered image) - from second block */
.bundle-5-14 .page-16 .figure-center {
    margin: 20px auto;
    max-width: 80%;
}

/* Styles specific to page 20 (grid layout) - from second block */
.bundle-5-14 .page-20 .content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* Single column by default */
    gap: 20px;
    /* Gap between text and image if they stack */
    align-items: start;
    /* Align items to the start of the grid area */
}

.bundle-5-14 .page-20 .page-20-text {
    /* Added from second block's media query */
    grid-column: 1 / 2;
}

.bundle-5-14 .page-20 .figure-margin-top {
    /* Added from second block's media query */
    grid-column: 2 / 3;
    margin-top: 0;
}

.bundle-5-14 .page-20 figure {
    /* From second block */
    grid-column: 2 / 3;
    margin: 0;
    text-align: center;
}

.bundle-5-14 .page-20 figure img {
    /* From second block */
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

.bundle-5-14 .page-20 figcaption {
    /* From second block */
    text-align: center;
}


/* Add End Icon Style */
.bundle-5-14 .end-icon {
    display: inline-block;
    width: 1.5em;
    height: 1.5em;
    margin-left: 5px;
    vertical-align: middle;
    background-image: url('../common/logo-notext.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* 頁碼 */
.bundle-5-14 .page-number {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 30px;
    padding: 8px 0;
    clear: both;
}

.bundle-5-14 .page-text {
    font-size: 0.9em;
    color: #555;
}

.bundle-5-14 .page-circle {
    background-color: #968678;
    color: white;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

/* 移除最後一個區塊的下外邊距 */
/* .bundle-5-14 body>.container:last-child {
    margin-bottom: 0;
} */

/* 清除浮動 */
.bundle-5-14 .container::after,
.bundle-5-14 .container::before {
    content: '';
    display: table;
    clear: both;
}

/* MODIFIED: Scoped .fixed-vertical-label styles */
.bundle-5-14-active .fixed-vertical-label {
    position: fixed;
    top: 30px;
    left: 10px;
    writing-mode: vertical-rl;
    text-orientation: upright;
    background-color: #968678;
    /* Specific background for bundle 5-20 */
    color: white;
    /* Specific text color for bundle 5-20 */
    padding: 10px 8px;
    font-size: 1rem;
    white-space: nowrap;
    /* Preserved from original */
    border-radius: 5px;
    z-index: 1000;
    font-weight: bold;
}

/* Comment out or remove original un-scoped .fixed-vertical-label to avoid conflicts if any existed immediately here */

@media (max-width: 1200px) {
    .bundle-5-14 .container {
        padding: 15px 40px;
        /* Adjusted padding */
    }

    .bundle-5-14 .title {
        /* First definition */
        font-size: 1.8rem;
    }

    .bundle-5-14 .page-5 .title {
        /* First definition */
        font-size: 2rem;
    }

    /* Added from second media query block */
    .bundle-5-14 .page-12 .title {
        font-size: 2rem;
        /* Consistent with .page-5 .title */
    }

    .bundle-5-14 .subtitle,
    .bundle-5-14 .chapter,
    .bundle-5-14 .content-title {
        /* First definition */
        font-size: 1.1rem;
    }

    /* Added from second media query block */
    .bundle-5-14 .content-title-circled {
        width: 35px;
        height: 35px;
        font-size: 1.1rem;
        text-align: center;
    }

    .bundle-5-14 .content {
        /* First definition */
        max-width: 100%;
        margin-left: 0;
    }

    /* Added from second media query block */
    .bundle-5-14 .page-centered-content .content {
        max-width: 90%;
        margin: 0 auto;
    }

    .bundle-5-14-active .fixed-vertical-label {
        /* First definition */
        font-size: 11px;
        padding: 2px 0;
        left: 0;
        line-height: 1.2;
    }

    .bundle-5-14 .page-circle {
        /* First definition */
        width: 28px;
        height: 28px;
        font-size: 12px;
    }

    .bundle-5-14 .figure-center {
        /* First definition */
        max-width: 90%;
    }

    /* 第10頁文繞圖響應式調整 - 中等螢幕 */
    .bundle-5-14 .page-10-text-wrap-image {
        width: 160px;
        margin: 0 15px 12px 0;
    }

    /* 第14頁Grid響應式調整 - 中等螢幕 */
    .bundle-5-14 .page-14-grid-layout {
        gap: 25px; /* 減少間距 */
    }

    .bundle-5-14 .page-14-grid-image {
        max-width: 240px; /* 縮小圖片最大寬度 */
    }
}

@media (max-width: 768px) {
    .bundle-5-14 .container {
        /* First definition */
        padding: 15px 15px;
        margin-bottom: 2rem;
    }

    .bundle-5-14 .title {
        /* First definition */
        font-size: 1.8rem;
    }

    .bundle-5-14 .page-5 .title {
        /* First definition */
        font-size: 2rem;
        /* Adjusted from 2.6rem */
    }

    .bundle-5-14 .page-12 .title {
        font-size: 2rem;
        /* Adjusted from 2.6rem */
    }

    .bundle-5-14 .subtitle,
    .bundle-5-14 .chapter,
    .bundle-5-14 .content-title {
        /* First definition */
        font-size: 1.1rem;
    }

    /* Added from second media query block */
    .bundle-5-14 .content-title-circled {
        width: 35px;
        height: 35px;
        font-size: 1.1rem;
    }

    .bundle-5-14 .content {
        /* First definition */
        max-width: 100%;
    }

    .bundle-5-14 .page-centered-content .content {
        max-width: 100%;
        margin: 0;
        /* Remove horizontal margin */
    }

    /* MODIFIED: Scoped responsive .fixed-vertical-label */
    .bundle-5-14-active .fixed-vertical-label {
        font-size: 11px;
        padding: 2px 0;
        left: 0;
        line-height: 1.2;
    }

    .bundle-5-14 .page-text {
        /* First definition */
        font-size: 0.8rem;
    }

    .bundle-5-14 .page-circle {
        /* First definition */
        width: 28px;
        height: 28px;
        font-size: 12px;
    }

    .bundle-5-14 .figure-center {
        /* First definition */
        max-width: 95%;
    }

    /* Added from second media query block */
    .bundle-5-14 .page-20 .content {
        grid-template-columns: 1fr 1fr;
    }

    /* 第10頁文繞圖響應式調整 - 小螢幕 */
    .bundle-5-14 .page-10-text-wrap-image {
        width: 140px;
        margin: 0 12px 10px 0;
    }

    .bundle-5-14 .page-10-text-wrap-image figcaption {
        font-size: 0.8em;
    }

    /* 第14頁Grid響應式調整 - 小螢幕 */
    .bundle-5-14 .page-14-grid-layout {
        gap: 20px; /* 進一步減少間距 */
    }

    .bundle-5-14 .page-14-grid-image {
        max-width: 200px; /* 進一步縮小圖片 */
    }

    .bundle-5-14 .page-14-grid-image figcaption {
        font-size: 0.8em;
    }
}

@media (min-width: 768px) {

    /* Added from second media query block for consistency */
    .bundle-5-14 .page-20 .content {
        display: grid;
        grid-template-columns: 1fr 200px;
        /* Text and a smaller sidebar for the image */
        align-items: start;
        gap: 20px;
    }

    /* Added from second media query block */
    .bundle-5-14 .page-20 .page-20-text {
        grid-column: 1 / 2;
    }

    /* Added from second media query block */
    .bundle-5-14 .page-20 .figure-margin-top {
        margin-top: 0;
        /* Align with text */
    }
}


@media (max-width: 480px) {

    .bundle-5-14 .title {
        /* First definition */
        font-size: 1.5rem;
    }

    .bundle-5-14 .page-5 .title {
        /* First definition */
        font-size: 1.8rem;
        /* Adjusted from 2.6rem */
    }

    .bundle-5-14 .page-12 .title {
        font-size: 1.8rem;
        /* Adjusted from 2.6rem */
    }

    .bundle-5-14 .subtitle,
    .bundle-5-14 .chapter,
    .bundle-5-14 .content-title {
        /* First definition */
        font-size: 1rem;
    }

    /* Added from second media query block */
    .bundle-5-14 .content-title-circled {
        width: 30px;
        height: 30px;
        font-size: 1rem;
    }

    /* Added from second media query block for consistency */
    .bundle-5-14 .indented-list-item,
    .bundle-5-14 .bold-indented-list-item {
        font-size: 0.95rem;
    }

    .bundle-5-14 .figure-center {
        /* First definition */
        max-width: 100%;
    }

    /* Added from second media query block */
    .bundle-5-14 .page-centered-content .content {
        padding: 0 5px;
        /* Further reduce padding for very small screens */
    }

    /* 第10頁文繞圖響應式調整 - 極小螢幕 */
    .bundle-5-14 .page-10-text-wrap-image {
        float: none;
        width: 100%;
        max-width: 200px;
        margin: 15px auto;
        display: block;
    }

    .bundle-5-14 .page-10-text-wrap-image figcaption {
        font-size: 0.85em;
        text-align: center;
    }

    /* 第14頁Grid響應式調整 - 極小螢幕 */
    .bundle-5-14 .page-14-grid-layout {
        grid-template-columns: 1fr; /* 改為單欄佈局 */
        gap: 20px;
    }

    .bundle-5-14 .page-14-text-content {
        order: 1; /* 文字在上 */
        padding-right: 0;
    }

    .bundle-5-14 .page-14-image-content {
        order: 2; /* 圖片在下 */
        padding-left: 0;
    }

    .bundle-5-14 .page-14-grid-image {
        max-width: 250px; /* 在小螢幕上稍微放大 */
    }

    .bundle-5-14 .page-14-grid-image figcaption {
        font-size: 0.85em;
    }
}




/* 特殊字體粗體樣式 - 步驟5解析結果 */
.bundle-5-14 .fw-bold {
    font-weight: bold;
    font-family: "DFKaiShuStd-W7", serif;
}

/* 圖片樣式調整 */
.bundle-5-14 .image-full-width figure {
    text-align: center;
    margin: 20px 0;
}

.bundle-5-14 .image-full-width img {
    max-width: 100%;
    height: auto;
}

/* 分享組件樣式 */
.bundle-5-14 .share-container {
    margin: 15px 0 25px 0;
}

/* 第10頁文繞圖樣式 */
.bundle-5-14 .page-10-text-wrap-image {
    float: left;
    width: 180px;
    margin: 0 20px 15px 0;
    clear: none;
}

.bundle-5-14 .page-10-text-wrap-image img {
    width: 100%;
    height: auto;
    border: 1px solid #eee;
    border-radius: 4px;
    display: block;
}

.bundle-5-14 .page-10-text-wrap-image figcaption {
    font-size: 0.85em;
    color: #555;
    text-align: center;
    margin-top: 5px;
    line-height: 1.3;
    padding: 0 5px;
}

/* 確保第10頁內容容器允許文繞圖 */
.bundle-5-14 .page-10 .content {
    overflow: hidden; /* 清除浮動 */
}

/* 第10頁段落樣式調整 */
.bundle-5-14 .page-10 .content-paragraph {
    text-align: justify; /* 兩端對齊，更好的文繞圖效果 */
}

/* 第10頁章節標題樣式 */
.bundle-5-14 .content-title-circled {
    /* clear: left; 確保章節標題在圖片下方開始新行 */
    /* margin: 30px 0 20px 0; */
}

/* 第14頁CSS Grid佈局樣式 */
.bundle-5-14 .page-14-grid-layout {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 各占50% */
    gap: 30px; /* 內容和圖片之間的間距 */
    align-items: start; /* 頂部對齊 */
}

.bundle-5-14 .page-14-text-content {
    padding-right: 10px; /* 額外的右側內距 */
}

.bundle-5-14 .page-14-image-content {
    padding-left: 10px; /* 額外的左側內距 */
    display: flex;
    align-items: center; /* 垂直居中 */
    justify-content: center; /* 水平居中 */
}

.bundle-5-14 .page-14-grid-image {
    width: 100%;
    max-width: 280px; /* 限制最大寬度 */
    margin: 0;
}

.bundle-5-14 .page-14-grid-image img {
    width: 100%;
    height: auto;
    border: 1px solid #eee;
    border-radius: 4px;
    display: block;
}

.bundle-5-14 .page-14-grid-image figcaption {
    font-size: 0.85em;
    color: #555;
    text-align: center;
    margin-top: 8px;
    line-height: 1.3;
    padding: 0 5px;
}

/* 第14頁段落樣式調整 */
.bundle-5-14 .page-14 .content-paragraph {
    text-align: justify; /* 兩端對齊 */
    margin-bottom: 15px;
}