/**
 * ═══════════════════════════════════════════════════════════════════════════════
 * MBTI 部落格專用樣式（完整版 - 源自 WordPress「MBTI 文章用.css」）
 * ═══════════════════════════════════════════════════════════════════════════════
 *
 * 選擇器前綴已從 WP 的 body.mbti-blog .entry-content 改寫為 .prose-content.blog-content
 * （新站文章內文包在 <div class="prose-content blog-content"> 裡；雙 class 確保
 *   優先權高於 globals.css 的 .prose-content 基礎排版）
 *
 * 與 WP 原版的差異：
 * 1. 移除「隱藏內文 h1」規則——WP 由主題另外顯示標題，新站的標題就是內文 <h1>。
 * 2. 移除「隱藏 Astra 精選圖片」規則——新站無 Astra 主題，屬死選擇器。
 * ═══════════════════════════════════════════════════════════════════════════════
 */


/* ================================
   h2 標題樣式設定（柔駝米＋深橄欖邊）
   ================================ */
.prose-content.blog-content h2 {
    background-color: #F6F1EA;
    /* 柔米色 */
    border-left: 8px solid #908463;
    /* 橄欖灰 */
    color: #665C46;
    /* 深駝色 */
    padding: 0px 0px 0px 12px;
    margin-top: 32px;
    margin-bottom: 18px;
    font-weight: bold;
    border-radius: 6px 0 0 6px;
    letter-spacing: 1px;
}

.prose-content.blog-content h2+ul li,
.prose-content.blog-content h2+ol li {
    color: #8A7E63;
    /* 淡橄欖棕 */
}

/* ================================
   h3 標題樣式設定（岩石灰＋駝米）
   ================================ */
.prose-content.blog-content h3 {
    margin-top: 30px;
    margin-bottom: 12px;
    color: #786753;
    /* 岩石深灰棕 */
    font-weight: bold;
    letter-spacing: 0.5px;
}

.prose-content.blog-content h3+* {
    color: #6D5F4C;
    /* 灰駝中性色 */
}

.prose-content.blog-content h3+ul li,
.prose-content.blog-content h3+ol li {
    color: #A49785;
    /* 柔駝灰 */
}

/* ================================
   h3 特殊區塊（橄欖、杏、灰大地感）
   ================================ */
/* 推薦型：橄欖灰框＋杏米底 */
.prose-content.blog-content h3.recommend {
    border: 2px solid #A09A82;
    background-color: #F7F5EF;
    color: #908463;
    padding: 10px 18px;
    border-radius: 10px;
    margin-top: 24px;
    margin-bottom: 16px;
}

.prose-content.blog-content h3.recommend+* {
    color: #908463;
}

.prose-content.blog-content h3.recommend+ul li {
    color: #B4AA95;
}

/* 注意型：岩石灰虛線＋淡岩底 */
.prose-content.blog-content h3.alert {
    border: 3px dashed #887B65;
    background-color: #F4F2F0;
    color: #887B65;
    padding: 10px 18px;
    border-radius: 10px;
    margin-top: 24px;
    margin-bottom: 16px;
}

.prose-content.blog-content h3.alert+ul li {
    color: #BAAE97;
}

/* 情境型：苔蘚綠框＋奶駝底 */
.prose-content.blog-content h3.scenario {
    border: 2px solid #A1A893;
    background-color: #F7F8F2;
    color: #6D7855;
    padding: 10px 18px;
    border-radius: 10px;
    margin-top: 24px;
    margin-bottom: 16px;
}

.prose-content.blog-content h3.scenario+* {
    color: #6D7855;
}

.prose-content.blog-content h3.scenario+ul li {
    color: #9AA985;
}

/* ================================
   h4 標題：米棕＋橄欖，圓角大地風
   ================================ */
.prose-content.blog-content h4:not(.list):not(.type):not(.reason):not(.case):not(.tip) {
    display: inline-block;
    background-color: #EDE5D8;
    /* 米色 */
    color: #726448;
    /* 橄欖駝色 */
    font-size: 1.1rem;
    margin-top: 12px;
    margin-bottom: 8px;
    padding: 8px 22px;
    font-weight: 600;
    border-radius: 28px;
    border: none;
    position: relative;
    vertical-align: middle;
    box-shadow: 0 2px 8px 0 #f6f2eb;
}

.prose-content.blog-content h4:not(.list):not(.type):not(.reason):not(.case):not(.tip)+ul li,
.prose-content.blog-content h4:not(.list):not(.type):not(.reason):not(.case):not(.tip)+ol li {
    color: #998D77;
    /* 柔駝棕 */
}

/* h4.list：深灰橄欖底＋白字 */
.prose-content.blog-content h4.list {
    display: inline-block;
    background-color: #998D77;
    color: #FFF;
    padding: 8px 20px;
    border-radius: 28px;
    font-weight: 600;
    border: none;
    margin: 16px 0 8px 0;
    position: relative;
}

.prose-content.blog-content h4.list::before {
    content: '';
}

.prose-content.blog-content h4.list+ul li,
.prose-content.blog-content h4.list+ol li {
    color: #726448;
}

/* h4.type：苔蘚綠底＋白字 */
.prose-content.blog-content h4.type {
    display: inline-block;
    background-color: #A1A893;
    color: #FFF;
    padding: 8px 20px;
    border-radius: 28px;
    font-weight: 600;
    border: none;
    margin: 16px 0 8px 0;
    position: relative;
}

.prose-content.blog-content h4.type+ul li,
.prose-content.blog-content h4.type+ol li {
    color: #6D7855;
}

.prose-content.blog-content h4.type::before {
    content: '';
}

/* h4.reason：深棕字＋問號＋透明底線 */
.prose-content.blog-content h4.reason {
    color: #887B65;
    background: none;
    border: none;
    padding-left: 44px;
    font-weight: 600;
    position: relative;
    margin-top: 22px;
    margin-bottom: 6px;
    border-radius: 0;
    display: block;
    padding-top: 7px;
    padding-bottom: 8px;
}

.prose-content.blog-content h4.reason::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background-color: currentColor;
    opacity: 0.25;
}

.prose-content.blog-content h4.reason::before {
    content: '❓';
    color: #887B65;
    position: absolute;
    left: 12px;
    top: 4px;
}

.prose-content.blog-content h4.reason+ul li,
.prose-content.blog-content h4.reason+ol li {
    color: #887B65;
}

/* h4.case：橄欖綠＋筆＋透明底線 */
.prose-content.blog-content h4.case {
    color: #6D7855;
    background: none;
    border: none;
    padding-left: 44px;
    font-weight: 600;
    position: relative;
    margin-top: 30px;
    margin-bottom: 6px;
    border-radius: 0;
    display: block;
    padding-top: 7px;
    padding-bottom: 8px;
}

.prose-content.blog-content h4.case::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background-color: currentColor;
    opacity: 0.23;
}

.prose-content.blog-content h4.case::before {
    content: '🖊️';
    color: #6D7855;
    position: absolute;
    left: 12px;
    top: 4px;
}

.prose-content.blog-content h4.case+ul li,
.prose-content.blog-content h4.case+ol li {
    color: #6D7855;
}

/* h4.tip：焦糖字＋米杏底＋燈泡＋虛線 */
.prose-content.blog-content h4.tip {
    color: #AA8759;
    background-color: #F5E9D8;
    border: none;
    border-bottom: 2px dashed #C8B086;
    padding-left: 44px;
    font-weight: 600;
    position: relative;
    border-radius: 4px;
    margin-top: 22px;
    margin-bottom: 6px;
    display: block;
    padding-top: 10px;
    padding-bottom: 8px;
}

.prose-content.blog-content h4.tip::before {
    content: '💡';
    color: #AA8759;
    position: absolute;
    left: 12px;
    top: 2px;
}

.prose-content.blog-content h4.tip+ul li,
.prose-content.blog-content h4.tip+ol li {
    color: #AA8759;
}

/* 其餘 ul/ol li（如果不是標題下的列表） */
.prose-content.blog-content ul li,
.prose-content.blog-content ol li {
    color: #665C46;
    margin-bottom: 4px;
    line-height: 1.8;
}





/* 引言設置 */
.prose-content.blog-content blockquote {
    border-left: 6px solid #E2B924;
    /* 黃色主題 */
    background-color: #FCF7E3;
    /* 柔和米白底 */
    margin: 20px 0;
    padding: 10px 20px;
    box-shadow: 2px 2px 5px rgba(104, 97, 65, 0.09);
    /* 深灰陰影 */
    font-style: italic;
    color: #6B6351;
    /* 主要文字深灰 */
    font-size: 16px;
    font-weight: 550;
}

.prose-content.blog-content blockquote:before {
    content: "\201C";
    font-size: 3em;
    line-height: 0.1em;
    margin-right: 0.1em;
    vertical-align: -0.5em;
    color: #E2B924;
    /* 黃色引號 */
}

.prose-content.blog-content blockquote cite {
    display: block;
    text-align: right;
    color: #58544A;
    /* 深灰引言來源 */
    font-style: normal;
}



/* 重點摘要框的樣式定義 */
.prose-content.blog-content .focus {
    border: 2px solid #E2B924;
    /* 主黃 */
    border-radius: 10px;
    position: relative;
    padding: 30px 20px 10px 20px;
    margin-top: 30px;
    background-image: url('https://gift.ilookfor.cc/wp-content/uploads/2025/06/Gray-Minimal-Paper-Coming-Soon-Instagram-Post-13.png');
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: center;
    color: #58544A;
    /* 主要深灰文字 */
    margin-bottom: 30px;
}

.prose-content.blog-content .focus_title {
    position: absolute;
    top: -10px;
    left: 10px;
    background-color: #E2B924;
    /* 主黃 */
    color: #46403C;
    /* 深灰標題字 */
    padding: 0 15px;
    border-radius: 20px;
}

.prose-content.blog-content .focus ul,
.prose-content.blog-content .qa01 ul {
    list-style-type: none;
    padding: 0;
    margin: 0 0 0 0px;
}

.prose-content.blog-content .focus li {
    color: #6B6351;
    /* 深灰條列 */
    margin-top: 10px;
    margin-bottom: 10px;
}




/* === 表格外框滑動容器（手機版支援）=== */
.prose-content.blog-content .table-scroll-wrapper {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box;
    margin: 16px 0;
    text-align: left;
}

.prose-content.blog-content .table-scroll-wrapper table {
    margin-left: 0 !important;
    margin-right: 0 !important;
    float: left;
}

/* === 表格基礎樣式 === */
.prose-content.blog-content .formmmmm1 {
    width: 100%;
    border-collapse: separate;
    background-color: #FFFAF0;
    /* 表格主底色 */
    border-spacing: 3px 3px;
    table-layout: fixed;
    border: 1px solid #FFFAF0;
    /* 最外框線和底色一致 */
}

/* === 表頭樣式（黃底深灰字）=== */
.prose-content.blog-content .formmmmm1 th {
    background-color: #E2B924;
    color: #46403C;
    text-align: center;
    padding: 10px;
    border: none !important;
    white-space: normal;
    word-break: break-word;
    overflow-wrap: break-word;
}

/* === 表格左側欄位（第一欄）樣式（加深色）=== */
.prose-content.blog-content .formmmmm1 tbody td:first-child {
    background-color: #F9EAB0;
    color: #6B6351;
    border-radius: 6px;
    padding: 10px;
    border: none !important;
    position: relative;
    white-space: normal;
    word-break: break-word;
    overflow-wrap: break-word;
}

/* === 其他欄位樣式 === */
.prose-content.blog-content .formmmmm1 tbody td {
    background-color: transparent;
    color: #58544A;
    padding: 10px;
    border: none;
    position: relative;
    white-space: normal;
    word-break: break-word;
    overflow-wrap: break-word;
}

/* === 去除左側第一欄虛線 === */
.prose-content.blog-content .formmmmm1 tbody tr td:first-child::before,
.prose-content.blog-content .formmmmm1 tbody tr td:first-child::after {
    content: none !important;
    display: none !important;
}

/* === 中間欄位左側虛線／最右欄右側虛線／底部橫向虛線全部主黃 === */
.prose-content.blog-content .formmmmm1 tbody tr td:not(:first-child)::before {
    content: '';
    position: absolute;
    left: -3px;
    top: 0;
    height: 100%;
    border-left: 3px dashed #E2B924;
}

.prose-content.blog-content .formmmmm1 tbody tr td:last-child::before {
    content: '';
    position: absolute;
    right: 0px;
    top: 0;
    height: 100%;
    border-left: 3px dashed #E2B924;
}

.prose-content.blog-content .formmmmm1 tbody tr td:first-child+td::before {
    content: none !important;
    display: none !important;
}

.prose-content.blog-content .formmmmm1 tbody tr td::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -5px;
    width: 100%;
    border-bottom: 3px dashed #E2B924;
}

.prose-content.blog-content .formmmmm1 tbody tr:last-child td::after {
    content: none;
}

/* === 表格中的 ul / li 樣式 === */
.prose-content.blog-content .formmmmm1 td ul {
    list-style-type: disc;
    list-style-position: inside;
    padding-left: 18px;
    margin: 8px 0;
}

.prose-content.blog-content .formmmmm1 td li {
    font-size: 15px;
    font-weight: 500;
    color: #6B6351;
    line-height: 1.6;
    margin: 4px 0;
    padding-left: 0;
    white-space: normal;
    word-break: break-word;
    overflow-wrap: break-word;
}

/* === 手機小螢幕強化（自動橫滑＋欄寬優化）=== */
@media (max-width: 600px) {

    /* 滑動外框 */
    .prose-content.blog-content .table-scroll-wrapper {
        width: 100% !important;
        max-width: 100vw !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        left: 0 !important;
        right: 0 !important;
        position: relative !important;
        overflow-x: auto !important;
    }

    /* 4欄以下沒超長內容時，表格100%寬，不滑動 */
    .prose-content.blog-content .formmmmm1.no-scroll {
        min-width: 0 !important;
        width: 100% !important;
        table-layout: fixed !important;
    }

    /* 三欄且內容超長時，強制滑動，且每欄固定寬，內容不會直排亂掉 */
    .prose-content.blog-content .formmmmm1.force-scroll {
        min-width: 360px !important;
        /* 120px × 3欄 */
        width: auto !important;
        table-layout: fixed !important;
    }

    .prose-content.blog-content .formmmmm1.force-scroll th,
    .prose-content.blog-content .formmmmm1.force-scroll td {
        min-width: 120px !important;
        max-width: 240px !important;
        white-space: normal;
        word-break: break-word;
        box-sizing: border-box;
    }

    /* 一般表格欄寬（手機） */
    .prose-content.blog-content .formmmmm1 th,
    .prose-content.blog-content .formmmmm1 td {
        min-width: 100px;
        font-size: 15px;
        padding: 8px 4px;
        word-break: break-word;
        white-space: normal;
        box-sizing: border-box;
    }
}








/* QA樣式1：具有白色背景、淺米灰色邊框、圓角邊框、輕微陰影效果、適當的間距和親切字體的容器 */
.prose-content.blog-content .qa01 {
    background-color: #FFFFFF;
    /* 設置背景顏色為白色 */
    border: 1px solid #EFEFEF;
    /* 設置邊框顏色為淺米灰色 */
    border-radius: 10px;
    /* 邊框圓角設計 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    /* 添加輕微的陰影效果 */
    margin: 20px 0;
    /* 設置上下間距 */
    padding: 20px;
    /* 設置內部間距 */
    font-family: 'Arial', sans-serif;
    /* 字體使用Arial，更加親切 */
}

/* 標題H3樣式：使用特定顏色和底部間距 */
.prose-content.blog-content .qa01 h3 {
    color: #956757;
    /* 標題字體使用深裸色 */
    margin-bottom: 20px;
    /* 標題下的間距 */
}

/* 列表項目樣式：使用裸色段落文字和增加行高 */
.prose-content.blog-content .qa01 li {
    color: #B2A592;
    /* 列表文字使用淺裸色 */
    line-height: 1.6;
    /* 提升行高以增加可讀性 */
}

/* 段落文字樣式：包括顏色、行高和上邊距 */
.prose-content.blog-content .qa01 p {
    color: #60656C;
    /* 段落文字使用灰裸色 */
    line-height: 1.6;
    /* 行高設置以提升可讀性 */
    margin-top: 20px;
    /* 段落上的間距 */
}





/* === 大地色推薦對話框（氣泡樣式） === */
.prose-content.blog-content .arrow_box01 {
    position: relative;
    background: #E7DDCE;
    /* 柔米杏色背景 */
    border-radius: .5em;
    color: #5F523F;
    /* 深駝字 */
    padding: 22px 24px 54px 24px;
    margin-bottom: 32px;
    box-shadow: 0 2px 10px 0 #f3efe9;
    font-size: 17px;
    line-height: 1.8;
    font-weight: 500;
}

.prose-content.blog-content .arrow_box01:after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border: 22px solid transparent;
    border-top-color: #E7DDCE;
    /* 箭頭同框色 */
    border-bottom: 0;
    margin-left: -11px;
    margin-top: -1px;
}


/* =======================
   重點句螢光標記樣式
========================== */

/* 重點1（point1）：黃色底線螢光筆效果 */
.prose-content.blog-content .point1 {
    background-image: linear-gradient(180deg, transparent 60%, #F6EFA6 60%);
    display: inline;
    line-height: 1.2;
    padding: 0 0.2em;
    /* 左右留白，避免緊貼文字 */
}


/* .point2：橘粉色細緻小波浪底線 */
.prose-content.blog-content .point2 {
    font-weight: bold;
    background-image: url('https://demo.imatchs.com/wp-content/uploads/2025/05/underline-wave-tight-thin.svg');
    background-repeat: repeat-x;
    background-position: 0 100%;
    background-size: 80px 7px;
    /* 一個波浪循環寬80px，高度6px（線條粗細取決於SVG本身） */
    padding-bottom: 5px;
    /* 增加底線與文字的距離 */
}




/* === 通用對話框樣式 === */
.prose-content.blog-content .tone {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 24px 0;
    font-size: 16px;
    line-height: 1.6;
    max-width: 800px;
}

/* 頭像樣式 */
.prose-content.blog-content .tone::before {
    content: "";
    width: 80px;
    height: 80px;
    background-size: cover;
    background-position: center;
    border-radius: 8px;
    flex-shrink: 0;
}

/* 主要對話框樣式（防止斷行錯位） */
.prose-content.blog-content .tone p {
    all: unset;
    /* 清掉 p 預設樣式防止干擾 */
    display: inline-block;
    padding: 16px;
    border: 2px solid #bbb;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
    position: relative;
    font-weight: 600;
    line-height: 1.6;
    max-width: 100%;
    white-space: pre-line;
    /* 允許換行但防止空格錯位 */
    box-sizing: border-box;
    vertical-align: top;
}

/* 箭頭通用樣式 */
.prose-content.blog-content .tone p::before,
.prose-content.blog-content .tone p::after {
    content: "";
    position: absolute;
    top: 20px;
    border: 12px solid transparent;
}


/* === 各語氣風格（含方向、圖片、箭頭）=== */

/* 1. 吐槽風（圖左框右） */
.prose-content.blog-content .tone-吐槽 {
    flex-direction: row;
}

.prose-content.blog-content .tone-吐槽::before {
    background-image: url('https://lh3.googleusercontent.com/d/1Y2eibWdJmbWwQCrAR3OsufiOjp_p2egh');
}

.prose-content.blog-content .tone-吐槽 p::before {
    left: -24px;
    border-right-color: #bbb;
}

.prose-content.blog-content .tone-吐槽 p::after {
    left: -20px;
    border-right-color: #fff;
}

/* 2. 閨蜜風（圖左框右） */
.prose-content.blog-content .tone-閨蜜 {
    flex-direction: row;
}

.prose-content.blog-content .tone-閨蜜::before {
    background-image: url('https://lh3.googleusercontent.com/d/1GqMtEgcVtC10iam9Q6ubiXzdG4SLDHDL');
}

.prose-content.blog-content .tone-閨蜜 p::before {
    left: -24px;
    border-right-color: #bbb;
}

.prose-content.blog-content .tone-閨蜜 p::after {
    left: -20px;
    border-right-color: #fff;
}

/* 3. 療癒風（圖右框左） */
.prose-content.blog-content .tone-療癒 {
    flex-direction: row-reverse;
}

.prose-content.blog-content .tone-療癒::before {
    background-image: url('https://lh3.googleusercontent.com/d/1d1jmYlexU9CouCXvgAo4W_qskYq6oeuD');
}

.prose-content.blog-content .tone-療癒 p::before {
    right: -24px;
    border-left-color: #bbb;
}

.prose-content.blog-content .tone-療癒 p::after {
    right: -20px;
    border-left-color: #fff;
}

/* 4. 熱血風（圖左框右） */
.prose-content.blog-content .tone-熱血 {
    flex-direction: row;
}

.prose-content.blog-content .tone-熱血::before {
    background-image: url('https://lh3.googleusercontent.com/d/1AlcnyZmCf8cwFe4LaiKDEZUa7QttanXL');
}

.prose-content.blog-content .tone-熱血 p::before {
    left: -24px;
    border-right-color: #bbb;
}

.prose-content.blog-content .tone-熱血 p::after {
    left: -20px;
    border-right-color: #fff;
}

/* 5. 專業風（圖左框右） */
.prose-content.blog-content .tone-專業 {
    flex-direction: row;
}

.prose-content.blog-content .tone-專業::before {
    background-image: url('https://lh3.googleusercontent.com/d/1zq20yI6UEAK9lBqIubLjuaqq3H93Dtkr');
}

.prose-content.blog-content .tone-專業 p::before {
    left: -24px;
    border-right-color: #bbb;
}

.prose-content.blog-content .tone-專業 p::after {
    left: -20px;
    border-right-color: #fff;
}

/* 6. 感性風（圖左框右） */
.prose-content.blog-content .tone-感性 {
    flex-direction: row;
}

.prose-content.blog-content .tone-感性::before {
    background-image: url('https://lh3.googleusercontent.com/d/1omNKViGupr-BlgeGmuQuMMDNp8WMQgc1');
}

.prose-content.blog-content .tone-感性 p::before {
    left: -24px;
    border-right-color: #bbb;
}

.prose-content.blog-content .tone-感性 p::after {
    left: -20px;
    border-right-color: #fff;
}

/* 7. 小劇場風（圖左框右） */
.prose-content.blog-content .tone-小劇場 {
    flex-direction: row;
}

.prose-content.blog-content .tone-小劇場::before {
    background-image: url('https://lh3.googleusercontent.com/d/1ci5ztbT7-eRDLyLkNNkYAFBQ4OAI7hJj');
}

.prose-content.blog-content .tone-小劇場 p::before {
    left: -24px;
    border-right-color: #bbb;
}

.prose-content.blog-content .tone-小劇場 p::after {
    left: -20px;
    border-right-color: #fff;
}

/* 8. 超派風（圖右框左） */
.prose-content.blog-content .tone-超派 {
    flex-direction: row-reverse;
}

.prose-content.blog-content .tone-超派::before {
    background-image: url('https://lh3.googleusercontent.com/d/1WBHOKLgjsO0pP57tvHyxLG3bgeqgiEC3');
}

.prose-content.blog-content .tone-超派 p::before {
    right: -24px;
    border-left-color: #bbb;
}

.prose-content.blog-content .tone-超派 p::after {
    right: -20px;
    border-left-color: #fff;
}

/* 9. 溫柔叮嚀風（圖右框左） */
.prose-content.blog-content .tone-溫柔 {
    flex-direction: row-reverse;
}

.prose-content.blog-content .tone-溫柔::before {
    background-image: url('https://lh3.googleusercontent.com/d/1QUaN4JC581n3OjhefiOfjPOfMWNlSdfG');
}

.prose-content.blog-content .tone-溫柔 p::before {
    right: -24px;
    border-left-color: #bbb;
}

.prose-content.blog-content .tone-溫柔 p::after {
    right: -20px;
    border-left-color: #fff;
}

/* 10. 中肯風（圖右框左） */
.prose-content.blog-content .tone-中肯 {
    flex-direction: row-reverse;
}

.prose-content.blog-content .tone-中肯::before {
    background-image: url('https://lh3.googleusercontent.com/d/17nrS4CKwDO9YkFXpd_cWyKxGaoL0Ehp8');
}

.prose-content.blog-content .tone-中肯 p::before {
    right: -24px;
    border-left-color: #bbb;
}

.prose-content.blog-content .tone-中肯 p::after {
    right: -20px;
    border-left-color: #fff;
}

/* 11. 神隊友風（圖右框左） */
.prose-content.blog-content .tone-神隊友 {
    flex-direction: row-reverse;
}

.prose-content.blog-content .tone-神隊友::before {
    background-image: url('https://lh3.googleusercontent.com/d/1lyz_WXTcRnxbgQdNv1OBMsXRVtXrXTv9');
}

.prose-content.blog-content .tone-神隊友 p::before {
    right: -24px;
    border-left-color: #bbb;
}

.prose-content.blog-content .tone-神隊友 p::after {
    right: -20px;
    border-left-color: #fff;
}

/* 12. 好感提升風（圖左框右） */
.prose-content.blog-content .tone-好感 {
    flex-direction: row;
}

.prose-content.blog-content .tone-好感::before {
    background-image: url('https://lh3.googleusercontent.com/d/1OQ27EbK7o5luHTGPLsqyJ78ZRzk_-qSo');
}

.prose-content.blog-content .tone-好感 p::before {
    left: -24px;
    border-right-color: #bbb;
}

.prose-content.blog-content .tone-好感 p::after {
    left: -20px;
    border-right-color: #fff;
}

/* 13. 懶人風（圖左框右） */
.prose-content.blog-content .tone-懶人 {
    flex-direction: row;
}

.prose-content.blog-content .tone-懶人::before {
    background-image: url('https://lh3.googleusercontent.com/d/1G8JKsWPr15q7AKnADKKB4QXjl5jB7q4V');
}

.prose-content.blog-content .tone-懶人 p::before {
    left: -24px;
    border-right-color: #bbb;
}

.prose-content.blog-content .tone-懶人 p::after {
    left: -20px;
    border-right-color: #fff;
}

/* 14. 失落風（圖右框左） */
.prose-content.blog-content .tone-失落 {
    flex-direction: row-reverse;
}

.prose-content.blog-content .tone-失落::before {
    background-image: url('https://lh3.googleusercontent.com/d/1Cvb4yeUHnjQ2XDKTtgsuaOtmkBKTmlox');
}

.prose-content.blog-content .tone-失落 p::before {
    right: -24px;
    border-left-color: #bbb;
}

.prose-content.blog-content .tone-失落 p::after {
    right: -20px;
    border-left-color: #fff;
}





/* === tone- 語氣對話框（第一版，統一新版結構與響應式）=== */
.prose-content.blog-content .tone[class*="tone-"] {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    margin: 28px 0;
    font-size: 18px;
    line-height: 1.7;
    max-width: 950px;
    width: 100%;
    box-sizing: border-box;
}

/* 頭像新版（用 background-image 控制，見下方設定） */
.prose-content.blog-content .tone[class*="tone-"]::before {
    content: "";
    width: 108px;
    height: 108px;
    min-width: 80px;
    min-height: 80px;
    aspect-ratio: 1/1;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    border-radius: 10px;
    flex-shrink: 0;
    background-color: transparent !important;
    box-shadow: none;
    display: block;
}

/* 泡泡框新版（維持舊色） */
.prose-content.blog-content .tone[class*="tone-"] p {
    all: unset;
    display: inline-block;
    padding: 20px 26px;
    border: 2px solid #bbb;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
    position: relative;
    font-weight: 500;
    line-height: 1.6;
    max-width: 100%;
    white-space: pre-line;
    box-sizing: border-box;
    font-size: 1em;
    color: #888888;
    transition: border-color .2s;
}

/* 箭頭（新版距離收窄） */
.prose-content.blog-content .tone[class*="tone-"] p::before,
.prose-content.blog-content .tone[class*="tone-"] p::after {
    content: "";
    position: absolute;
    top: 28px;
    border: 11px solid transparent;
}

.prose-content.blog-content .tone[class*="tone-"] p::before {
    left: -20px;
    border-right-color: #bbb;
}

.prose-content.blog-content .tone[class*="tone-"] p::after {
    left: -17px;
    border-right-color: #fff;
}

/* === 各語氣方向設定（完全照你原本）=== */

/* 吐槽、閨蜜、熱血、專業、感性、小劇場、好感、懶人：圖左框右（row） */
.prose-content.blog-content .tone-吐槽,
.prose-content.blog-content .tone-閨蜜,
.prose-content.blog-content .tone-熱血,
.prose-content.blog-content .tone-專業,
.prose-content.blog-content .tone-感性,
.prose-content.blog-content .tone-小劇場,
.prose-content.blog-content .tone-好感,
.prose-content.blog-content .tone-懶人 {
    flex-direction: row;
}

/* 療癒、超派、溫柔、中肯、神隊友、失落：圖右框左（row-reverse） */
.prose-content.blog-content .tone-療癒,
.prose-content.blog-content .tone-超派,
.prose-content.blog-content .tone-溫柔,
.prose-content.blog-content .tone-中肯,
.prose-content.blog-content .tone-神隊友,
.prose-content.blog-content .tone-失落 {
    flex-direction: row-reverse;
}

/* === 各語氣頭像網址設定（新版統一背景圖設計）=== */
.prose-content.blog-content .tone-吐槽::before {
    background-image: url('https://lh3.googleusercontent.com/d/1Y2eibWdJmbWwQCrAR3OsufiOjp_p2egh');
}

.prose-content.blog-content .tone-閨蜜::before {
    background-image: url('https://lh3.googleusercontent.com/d/1GqMtEgcVtC10iam9Q6ubiXzdG4SLDHDL');
}

.prose-content.blog-content .tone-熱血::before {
    background-image: url('https://lh3.googleusercontent.com/d/1AlcnyZmCf8cwFe4LaiKDEZUa7QttanXL');
}

.prose-content.blog-content .tone-專業::before {
    background-image: url('https://lh3.googleusercontent.com/d/1zq20yI6UEAK9lBqIubLjuaqq3H93Dtkr');
}

.prose-content.blog-content .tone-感性::before {
    background-image: url('https://lh3.googleusercontent.com/d/1omNKViGupr-BlgeGmuQuMMDNp8WMQgc1');
}

.prose-content.blog-content .tone-小劇場::before {
    background-image: url('https://lh3.googleusercontent.com/d/1ci5ztbT7-eRDLyLkNNkYAFBQ4OAI7hJj');
}

.prose-content.blog-content .tone-好感::before {
    background-image: url('https://lh3.googleusercontent.com/d/1OQ27EbK7o5luHTGPLsqyJ78ZRzk_-qSo');
}

.prose-content.blog-content .tone-懶人::before {
    background-image: url('https://lh3.googleusercontent.com/d/1G8JKsWPr15q7AKnADKKB4QXjl5jB7q4V');
}

.prose-content.blog-content .tone-療癒::before {
    background-image: url('https://lh3.googleusercontent.com/d/1d1jmYlexU9CouCXvgAo4W_qskYq6oeuD');
}

.prose-content.blog-content .tone-超派::before {
    background-image: url('https://lh3.googleusercontent.com/d/1WBHOKLgjsO0pP57tvHyxLG3bgeqgiEC3');
}

.prose-content.blog-content .tone-溫柔::before {
    background-image: url('https://lh3.googleusercontent.com/d/1QUaN4JC581n3OjhefiOfjPOfMWNlSdfG');
}

.prose-content.blog-content .tone-中肯::before {
    background-image: url('https://lh3.googleusercontent.com/d/17nrS4CKwDO9YkFXpd_cWyKxGaoL0Ehp8');
}

.prose-content.blog-content .tone-神隊友::before {
    background-image: url('https://lh3.googleusercontent.com/d/1lyz_WXTcRnxbgQdNv1OBMsXRVtXrXTv9');
}

.prose-content.blog-content .tone-失落::before {
    background-image: url('https://lh3.googleusercontent.com/d/1Cvb4yeUHnjQ2XDKTtgsuaOtmkBKTmlox');
}

/* === 各語氣泡泡箭頭方位（根據方向分類）=== */
/* 框右（圖左框右）：箭頭左邊，灰線、白底 */
.prose-content.blog-content .tone-吐槽 p::before,
.prose-content.blog-content .tone-閨蜜 p::before,
.prose-content.blog-content .tone-熱血 p::before,
.prose-content.blog-content .tone-專業 p::before,
.prose-content.blog-content .tone-感性 p::before,
.prose-content.blog-content .tone-小劇場 p::before,
.prose-content.blog-content .tone-好感 p::before,
.prose-content.blog-content .tone-懶人 p::before {
    left: -23px !important;
    right: auto !important;
    border-right-color: #bbb !important;
    border-left-color: transparent !important;
}

.prose-content.blog-content .tone-吐槽 p::after,
.prose-content.blog-content .tone-閨蜜 p::after,
.prose-content.blog-content .tone-熱血 p::after,
.prose-content.blog-content .tone-專業 p::after,
.prose-content.blog-content .tone-感性 p::after,
.prose-content.blog-content .tone-小劇場 p::after,
.prose-content.blog-content .tone-好感 p::after,
.prose-content.blog-content .tone-懶人 p::after {
    left: -20px !important;
    right: auto !important;
    border-right-color: #fff !important;
    border-left-color: transparent !important;
}

/* 框左（圖右框左）：箭頭右邊 */
.prose-content.blog-content .tone-療癒 p::before,
.prose-content.blog-content .tone-超派 p::before,
.prose-content.blog-content .tone-溫柔 p::before,
.prose-content.blog-content .tone-中肯 p::before,
.prose-content.blog-content .tone-神隊友 p::before,
.prose-content.blog-content .tone-失落 p::before {
    left: auto !important;
    right: -23px !important;
    border-right-color: transparent !important;
    border-left-color: #bbb !important;
}

.prose-content.blog-content .tone-療癒 p::after,
.prose-content.blog-content .tone-超派 p::after,
.prose-content.blog-content .tone-溫柔 p::after,
.prose-content.blog-content .tone-中肯 p::after,
.prose-content.blog-content .tone-神隊友 p::after,
.prose-content.blog-content .tone-失落 p::after {
    left: auto !important;
    right: -20px !important;
    border-right-color: transparent !important;
    border-left-color: #fff !important;
}

/* === 響應式 === */
@media (max-width: 600px) {
    .prose-content.blog-content .tone[class*="tone-"] {
        font-size: 15px;
        max-width: 99vw;
        gap: 10px;
    }

    .prose-content.blog-content .tone[class*="tone-"]::before {
        width: 82px;
        height: 82px;
        min-width: 74px;
        min-height: 74px;
    }

    .prose-content.blog-content .tone[class*="tone-"] p {
        padding: 9px 11px !important;
        border-radius: 11px;
        font-size: 1em;
    }

    .prose-content.blog-content .tone[class*="tone-"] p::before,
    .prose-content.blog-content .tone[class*="tone-"] p::after {
        top: 16px;
        border-width: 10px;
    }

    /* 框右（圖左框右） */
    .prose-content.blog-content .tone-吐槽 p::before,
    .prose-content.blog-content .tone-閨蜜 p::before,
    .prose-content.blog-content .tone-熱血 p::before,
    .prose-content.blog-content .tone-專業 p::before,
    .prose-content.blog-content .tone-感性 p::before,
    .prose-content.blog-content .tone-小劇場 p::before,
    .prose-content.blog-content .tone-好感 p::before,
    .prose-content.blog-content .tone-懶人 p::before {
        left: -20px !important;
    }

    .prose-content.blog-content .tone-吐槽 p::after,
    .prose-content.blog-content .tone-閨蜜 p::after,
    .prose-content.blog-content .tone-熱血 p::after,
    .prose-content.blog-content .tone-專業 p::after,
    .prose-content.blog-content .tone-感性 p::after,
    .prose-content.blog-content .tone-小劇場 p::after,
    .prose-content.blog-content .tone-好感 p::after,
    .prose-content.blog-content .tone-懶人 p::after {
        left: -17px !important;
    }

    /* 框左（圖右框左） */
    .prose-content.blog-content .tone-療癒 p::before,
    .prose-content.blog-content .tone-超派 p::before,
    .prose-content.blog-content .tone-溫柔 p::before,
    .prose-content.blog-content .tone-中肯 p::before,
    .prose-content.blog-content .tone-神隊友 p::before,
    .prose-content.blog-content .tone-失落 p::before {
        right: -20px !important;
    }

    .prose-content.blog-content .tone-療癒 p::after,
    .prose-content.blog-content .tone-超派 p::after,
    .prose-content.blog-content .tone-溫柔 p::after,
    .prose-content.blog-content .tone-中肯 p::after,
    .prose-content.blog-content .tone-神隊友 p::after,
    .prose-content.blog-content .tone-失落 p::after {
        right: -17px !important;
    }
}



/* === tone2- 系列專用對話框樣式（最穩定版本）=== */
.prose-content.blog-content .tone[class*="tone2-"] {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    margin: 28px 0;
    font-size: 18px;
    line-height: 1.7;
    max-width: 950px;
    width: 100%;
    box-sizing: border-box;
}

/* 頭像樣式（PNG透明圖不裁切、等比縮放） */
.prose-content.blog-content .tone[class*="tone2-"]::before {
    content: "";
    width: 118px;
    height: 118px;
    min-width: 80px;
    min-height: 80px;
    aspect-ratio: 1 / 1;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    border-radius: 10px;
    flex-shrink: 0;
    background-color: transparent !important;
    box-shadow: none;
    display: block;
}

/* 泡泡框（含大圓角、陰影、莫蘭迪色系） */
.prose-content.blog-content .tone[class*="tone2-"] p {
    all: unset;
    display: inline-block;
    padding: 20px 26px;
    /* 這裡調整為更小的邊距！ */
    border: 2.5px solid #96AFC6;
    border-radius: 18px;
    background: #fafdff;
    box-shadow: 0 2px 12px rgba(148, 168, 198, 0.08);
    position: relative;
    font-weight: 600;
    line-height: 1.7;
    max-width: 100%;
    white-space: pre-line;
    box-sizing: border-box;
    font-size: 1em;
    color: #406080;
    transition: border-color .2s;
}

/* 箭頭預設（框左） */
.prose-content.blog-content .tone[class*="tone2-"] p::before,
.prose-content.blog-content .tone[class*="tone2-"] p::after {
    content: "";
    position: absolute;
    top: 32px;
    border: 13px solid transparent;
}

.prose-content.blog-content .tone[class*="tone2-"] p::before {
    left: -28px;
    border-right-color: #96AFC6;
}

.prose-content.blog-content .tone[class*="tone2-"] p::after {
    left: -25px;
    border-right-color: #fafdff;
}

/* ========== 框右：箭頭自動到右側（最穩定） ========== */
.prose-content.blog-content .tone2-吐槽,
.prose-content.blog-content .tone2-療癒,
.prose-content.blog-content .tone2-熱血,
.prose-content.blog-content .tone2-專業,
.prose-content.blog-content .tone2-感性,
.prose-content.blog-content .tone2-超派,
.prose-content.blog-content .tone2-溫柔,
.prose-content.blog-content .tone2-好感 {
    flex-direction: row-reverse !important;
}

.prose-content.blog-content .tone2-吐槽 p::before,
.prose-content.blog-content .tone2-療癒 p::before,
.prose-content.blog-content .tone2-熱血 p::before,
.prose-content.blog-content .tone2-專業 p::before,
.prose-content.blog-content .tone2-感性 p::before,
.prose-content.blog-content .tone2-超派 p::before,
.prose-content.blog-content .tone2-溫柔 p::before,
.prose-content.blog-content .tone2-好感 p::before {
    left: auto !important;
    right: -27px !important;
    border-right-color: transparent !important;
    border-left-color: #96AFC6 !important;
}

.prose-content.blog-content .tone2-吐槽 p::after,
.prose-content.blog-content .tone2-療癒 p::after,
.prose-content.blog-content .tone2-熱血 p::after,
.prose-content.blog-content .tone2-專業 p::after,
.prose-content.blog-content .tone2-感性 p::after,
.prose-content.blog-content .tone2-超派 p::after,
.prose-content.blog-content .tone2-溫柔 p::after,
.prose-content.blog-content .tone2-好感 p::after {
    left: auto !important;
    right: -24px !important;
    border-right-color: transparent !important;
    border-left-color: #fafdff !important;
}

/* ========== 框左：預設不動 ========== */

/* ========== 響應式調整 ========== */
@media (max-width: 600px) {
    .prose-content.blog-content .tone[class*="tone2-"] {
        font-size: 15px;
        max-width: 99vw;
        gap: 10px;
    }

    /* 手機：人像大一點 */
    .prose-content.blog-content .tone[class*="tone2-"]::before {
        width: 108px;
        height: 108px;
        min-width: 74px;
        min-height: 74px;
    }

    /* 泡泡框padding更小 */
    .prose-content.blog-content .tone[class*="tone2-"] p {
        padding: 9px 11px !important;
        /* 這裡減少2px（原本11 13） */
        border-radius: 11px;
        font-size: 1em;
    }

    .prose-content.blog-content .tone[class*="tone2-"] p::before,
    .prose-content.blog-content .tone[class*="tone2-"] p::after {
        top: 16px;
        border-width: 8px;
    }

    /* 框右箭頭距離縮小 */
    .prose-content.blog-content .tone2-吐槽 p::before,
    .prose-content.blog-content .tone2-療癒 p::before,
    .prose-content.blog-content .tone2-熱血 p::before,
    .prose-content.blog-content .tone2-專業 p::before,
    .prose-content.blog-content .tone2-感性 p::before,
    .prose-content.blog-content .tone2-超派 p::before,
    .prose-content.blog-content .tone2-溫柔 p::before,
    .prose-content.blog-content .tone2-好感 p::before {
        right: -17px !important;
    }

    .prose-content.blog-content .tone2-吐槽 p::after,
    .prose-content.blog-content .tone2-療癒 p::after,
    .prose-content.blog-content .tone2-熱血 p::after,
    .prose-content.blog-content .tone2-專業 p::after,
    .prose-content.blog-content .tone2-感性 p::after,
    .prose-content.blog-content .tone2-超派 p::after,
    .prose-content.blog-content .tone2-溫柔 p::after,
    .prose-content.blog-content .tone2-好感 p::after {
        right: -14px !important;
    }

    /* 框左箭頭距離縮小 */
    .prose-content.blog-content .tone2-懶人 p::before,
    .prose-content.blog-content .tone2-閨蜜 p::before,
    .prose-content.blog-content .tone2-小劇場 p::before,
    .prose-content.blog-content .tone2-神隊友 p::before,
    .prose-content.blog-content .tone2-失落 p::before,
    .prose-content.blog-content .tone2-中肯 p::before {
        left: -17px !important;
    }

    .prose-content.blog-content .tone2-懶人 p::after,
    .prose-content.blog-content .tone2-閨蜜 p::after,
    .prose-content.blog-content .tone2-小劇場 p::after,
    .prose-content.blog-content .tone2-神隊友 p::after,
    .prose-content.blog-content .tone2-失落 p::after,
    .prose-content.blog-content .tone2-中肯 p::after {
        left: -14px !important;
    }
}

/* ========== 14種角色圖設定 ========== */
.prose-content.blog-content .tone2-吐槽::before {
    background-image: url('https://lh3.googleusercontent.com/d/1KV0aUVQyUgIGqOLYyX1Ufnzj3olVE7D6');
}

.prose-content.blog-content .tone2-閨蜜::before {
    background-image: url('https://lh3.googleusercontent.com/d/1pSUHCdDIFKW3gBPxzjZvLFbC7AthORrx');
}

.prose-content.blog-content .tone2-療癒::before {
    background-image: url('https://lh3.googleusercontent.com/d/1WQQZ0IRAyuSDmEapC97W4fHfwN0Ma7dA');
}

.prose-content.blog-content .tone2-熱血::before {
    background-image: url('https://lh3.googleusercontent.com/d/1PMCj5A4S0uuuKLpK4d3v1x0AwAW8YTd-');
}

.prose-content.blog-content .tone2-好感::before {
    background-image: url('https://lh3.googleusercontent.com/d/1R13RBQYNDGjL8q0cKV4yRqmabjXyvCgZ');
}

.prose-content.blog-content .tone2-感性::before {
    background-image: url('https://lh3.googleusercontent.com/d/1SiXSrD0SofOC7DnWAg8wDCyMps0IAFLI');
}

.prose-content.blog-content .tone2-超派::before {
    background-image: url('https://lh3.googleusercontent.com/d/193Ion9y8Wo_0aONaDWLd6Ht7x10_0A0J');
}

.prose-content.blog-content .tone2-專業::before {
    background-image: url('https://lh3.googleusercontent.com/d/1nroxolGgi-wbKp4Md-tLSlunz9ZUrfp7');
}

.prose-content.blog-content .tone2-懶人::before {
    background-image: url('https://lh3.googleusercontent.com/d/1QWq2LgmiEhSu5gJ3T_tILuwfEhLPJYd1');
}

.prose-content.blog-content .tone2-溫柔::before {
    background-image: url('https://lh3.googleusercontent.com/d/1POCgxwFEy7LjEu89Rki0mVSEwg5y4_Gm');
}

.prose-content.blog-content .tone2-神隊友::before {
    background-image: url('https://lh3.googleusercontent.com/d/1uVsuNVuP03mrSX5l7GHixoG_78mTk7uQ');
}

.prose-content.blog-content .tone2-失落::before {
    background-image: url('https://lh3.googleusercontent.com/d/1SXkKkyu5x3J8Th53HhCJtoW6kkzvMBhC');
}

.prose-content.blog-content .tone2-中肯::before {
    background-image: url('https://lh3.googleusercontent.com/d/11EBeYIcQU44ATLBeZMGSHaTh-EJ6Rn_R');
}

.prose-content.blog-content .tone2-小劇場::before {
    background-image: url('https://lh3.googleusercontent.com/d/1t489E1BLXfKDSwGk9xpTC6RZ9PCuqpag');
}



/* === tone3- 系列專用對話框樣式（男生角色／咖啡色框）=== */
.prose-content.blog-content .tone[class*="tone3-"] {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    margin: 28px 0;
    font-size: 18px;
    line-height: 1.7;
    max-width: 950px;
    width: 100%;
    box-sizing: border-box;
}

/* 頭像樣式（PNG透明圖不裁切、等比縮放） */
.prose-content.blog-content .tone[class*="tone3-"]::before {
    content: "";
    width: 118px;
    height: 118px;
    min-width: 80px;
    min-height: 80px;
    aspect-ratio: 1 / 1;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    border-radius: 10px;
    flex-shrink: 0;
    background-color: transparent !important;
    box-shadow: none;
    display: block;
}

/* 泡泡框（莫蘭迪咖啡色系） */
.prose-content.blog-content .tone[class*="tone3-"] p {
    all: unset;
    display: inline-block;
    padding: 20px 26px;
    border: 2.5px solid #C1B0A3;
    border-radius: 18px;
    background: #F7F5F2;
    box-shadow: 0 2px 12px rgba(193, 176, 163, 0.11);
    position: relative;
    font-weight: 600;
    line-height: 1.7;
    max-width: 100%;
    white-space: pre-line;
    box-sizing: border-box;
    font-size: 1em;
    color: #655546;
    transition: border-color .2s;
}

/* 箭頭預設（框左） */
.prose-content.blog-content .tone[class*="tone3-"] p::before,
.prose-content.blog-content .tone[class*="tone3-"] p::after {
    content: "";
    position: absolute;
    top: 32px;
    border: 13px solid transparent;
}

.prose-content.blog-content .tone[class*="tone3-"] p::before {
    left: -28px;
    border-right-color: #C1B0A3;
}

.prose-content.blog-content .tone[class*="tone3-"] p::after {
    left: -25px;
    border-right-color: #F7F5F2;
}

/* ========== 框右：箭頭自動到右側 ========== */
.prose-content.blog-content .tone3-吐槽,
.prose-content.blog-content .tone3-療癒,
.prose-content.blog-content .tone3-熱血,
.prose-content.blog-content .tone3-專業,
.prose-content.blog-content .tone3-感性,
.prose-content.blog-content .tone3-超派,
.prose-content.blog-content .tone3-溫柔,
.prose-content.blog-content .tone3-好感 {
    flex-direction: row-reverse !important;
}

.prose-content.blog-content .tone3-吐槽 p::before,
.prose-content.blog-content .tone3-療癒 p::before,
.prose-content.blog-content .tone3-熱血 p::before,
.prose-content.blog-content .tone3-專業 p::before,
.prose-content.blog-content .tone3-感性 p::before,
.prose-content.blog-content .tone3-超派 p::before,
.prose-content.blog-content .tone3-溫柔 p::before,
.prose-content.blog-content .tone3-好感 p::before {
    left: auto !important;
    right: -27px !important;
    border-right-color: transparent !important;
    border-left-color: #C1B0A3 !important;
}

.prose-content.blog-content .tone3-吐槽 p::after,
.prose-content.blog-content .tone3-療癒 p::after,
.prose-content.blog-content .tone3-熱血 p::after,
.prose-content.blog-content .tone3-專業 p::after,
.prose-content.blog-content .tone3-感性 p::after,
.prose-content.blog-content .tone3-超派 p::after,
.prose-content.blog-content .tone3-溫柔 p::after,
.prose-content.blog-content .tone3-好感 p::after {
    left: auto !important;
    right: -24px !important;
    border-right-color: transparent !important;
    border-left-color: #F7F5F2 !important;
}

/* ========== 框左：預設不動 ========== */

/* ========== 響應式調整 ========== */
@media (max-width: 600px) {
    .prose-content.blog-content .tone[class*="tone3-"] {
        font-size: 15px;
        max-width: 99vw;
        gap: 10px;
    }

    .prose-content.blog-content .tone[class*="tone3-"]::before {
        width: 108px;
        height: 108px;
        min-width: 74px;
        min-height: 74px;
    }

    .prose-content.blog-content .tone[class*="tone3-"] p {
        padding: 9px 11px !important;
        border-radius: 11px;
        font-size: 1em;
    }

    .prose-content.blog-content .tone[class*="tone3-"] p::before,
    .prose-content.blog-content .tone[class*="tone3-"] p::after {
        top: 16px;
        border-width: 8px;
    }

    /* 框右箭頭距離縮小 */
    .prose-content.blog-content .tone3-吐槽 p::before,
    .prose-content.blog-content .tone3-療癒 p::before,
    .prose-content.blog-content .tone3-熱血 p::before,
    .prose-content.blog-content .tone3-專業 p::before,
    .prose-content.blog-content .tone3-感性 p::before,
    .prose-content.blog-content .tone3-超派 p::before,
    .prose-content.blog-content .tone3-溫柔 p::before,
    .prose-content.blog-content .tone3-好感 p::before {
        right: -17px !important;
    }

    .prose-content.blog-content .tone3-吐槽 p::after,
    .prose-content.blog-content .tone3-療癒 p::after,
    .prose-content.blog-content .tone3-熱血 p::after,
    .prose-content.blog-content .tone3-專業 p::after,
    .prose-content.blog-content .tone3-感性 p::after,
    .prose-content.blog-content .tone3-超派 p::after,
    .prose-content.blog-content .tone3-溫柔 p::after,
    .prose-content.blog-content .tone3-好感 p::after {
        right: -14px !important;
    }

    /* 框左箭頭距離縮小 */
    .prose-content.blog-content .tone3-懶人 p::before,
    .prose-content.blog-content .tone3-閨蜜 p::before,
    .prose-content.blog-content .tone3-小劇場 p::before,
    .prose-content.blog-content .tone3-神隊友 p::before,
    .prose-content.blog-content .tone3-失落 p::before,
    .prose-content.blog-content .tone3-中肯 p::before {
        left: -17px !important;
    }

    .prose-content.blog-content .tone3-懶人 p::after,
    .prose-content.blog-content .tone3-閨蜜 p::after,
    .prose-content.blog-content .tone3-小劇場 p::after,
    .prose-content.blog-content .tone3-神隊友 p::after,
    .prose-content.blog-content .tone3-失落 p::after,
    .prose-content.blog-content .tone3-中肯 p::after {
        left: -14px !important;
    }
}

/* ========== 14種角色圖設定（男生） ========== */
.prose-content.blog-content .tone3-懶人::before {
    background-image: url('https://lh3.googleusercontent.com/d/1kAktREYKckzQGkIYCYZ-w1K9pb8ICgTo');
}

.prose-content.blog-content .tone3-閨蜜::before {
    background-image: url('https://lh3.googleusercontent.com/d/1PGVljsY1jqEs2KjsKVKXhZyCoPTtJaAQ');
}

.prose-content.blog-content .tone3-小劇場::before {
    background-image: url('https://lh3.googleusercontent.com/d/1HQaIJwc7kUlq25IiktS7iGFMj7QnAZAV');
}

.prose-content.blog-content .tone3-神隊友::before {
    background-image: url('https://lh3.googleusercontent.com/d/10OqdFNVuz1-k3vznd5VoY8VkRu_pWpQz');
}

.prose-content.blog-content .tone3-失落::before {
    background-image: url('https://lh3.googleusercontent.com/d/1e5WezwY06LwrETCcOcqacBQItQ8FDh0-');
}

.prose-content.blog-content .tone3-中肯::before {
    background-image: url('https://lh3.googleusercontent.com/d/14IeRYg8KKP0mkXdP9jmFhbr91MK7bs4C');
}

.prose-content.blog-content .tone3-好感::before {
    background-image: url('https://lh3.googleusercontent.com/d/1Nkx_LekGA8nj54ZJETpRJeITiUYhqDlJ');
}

.prose-content.blog-content .tone3-吐槽::before {
    background-image: url('https://lh3.googleusercontent.com/d/11Hw0DnZr1nWWx5hiYcRlB4gbEFO0qWvz');
}

.prose-content.blog-content .tone3-療癒::before {
    background-image: url('https://lh3.googleusercontent.com/d/1kTK2Y8RfWwU0ZMSN0KG8EuS-M1xd6Wpt');
}

.prose-content.blog-content .tone3-熱血::before {
    background-image: url('https://lh3.googleusercontent.com/d/1WQN73_raNxKmyoR1fLUvqqa47ufyU3z6');
}

.prose-content.blog-content .tone3-專業::before {
    background-image: url('https://lh3.googleusercontent.com/d/1mwUFtr4xElzonrfQs3rXQxFOn25IBDR0');
}

.prose-content.blog-content .tone3-感性::before {
    background-image: url('https://lh3.googleusercontent.com/d/1F5bFa6gvKjQnvqcmAQ8QHVF2eIuFvRP0');
}

.prose-content.blog-content .tone3-超派::before {
    background-image: url('https://lh3.googleusercontent.com/d/14izELxSSW30xmB8YiaKYVLr7uNCe6GKr');
}

.prose-content.blog-content .tone3-溫柔::before {
    background-image: url('https://lh3.googleusercontent.com/d/1BM1i-GD5oC1Iaen7qfGWYaoj3r7znC7G');
}






/* === 精準限定文章段落中的清單樣式，避免干擾 TOC === */
.prose-content.blog-content>ul,
.prose-content.blog-content>ol {
    list-style-type: disc;
    list-style-position: outside;
    padding-left: 18px;
    margin: 20px 0;
    display: block;
}

/* 條列項目樣式（文章內用） */
.prose-content.blog-content>ul>li,
.prose-content.blog-content>ol>li {
    display: list-item;
    font-size: 16px;
    font-weight: 600;
    color: #888888;
    line-height: 1.6;
    margin: 6px 0;
    padding-left: 0;
    word-break: break-word;
    overflow-wrap: break-word;
}

/* 圓點顏色設定 */
.prose-content.blog-content>ul>li::marker,
.prose-content.blog-content>ol>li::marker {
    color: #888888;
}


/* === 勾勾/叉叉/箭頭/圈圈 marker 樣式（全都用這套！） === */
.prose-content.blog-content .marker-check {
    font-size: 0.9em;
    font-weight: bold;
    margin-right: 6px;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    pointer-events: none;
    display: inline;
    color: inherit;
}

/* 包裹符號與內容，對齊文字基線 */
.prose-content.blog-content .marker-check-wrap {
    display: inline-flex;
    align-items: baseline;
    gap: 0.25em;
}

/* === 勾勾/叉叉/箭頭/圈圈 marker 樣式（統一樣式，請勿刪改）=== */
.prose-content.blog-content .marker-check {
    font-size: 0.9em;
    /* 預設所有 marker 字型稍微縮小 */
    font-weight: bold;
    margin-right: 6px;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    pointer-events: none;
    display: inline;
    color: inherit;
}

/* 綠色勾勾 */
.prose-content.blog-content .marker-check.good {
    color: #4CAF50;
}

/* 紅色叉叉 */
.prose-content.blog-content .marker-check.bad {
    color: #E53935;
}

/* ➜ 箭頭（不指定色，跟外層） */
.prose-content.blog-content .marker-check.arrow {
    font-weight: bold;
    font-size: 1em;
}

/* ⭕ 紅圈圈 */
.prose-content.blog-content .marker-check.circle {
    color: #E53935;
    font-weight: bold;
    font-size: 1em;
}

/* ★ 星星符號（黃色） */
.prose-content.blog-content .marker-check.star {
    color: #FFB300;
    font-size: 1.05em;
}

/* ⚠️ 警告符號（橙色） */
.prose-content.blog-content .marker-check.warn {
    color: #FF9800;
    font-size: 1.05em;
}



/* === 只放大圓圈數字符號，不影響後方文字 ===
   用 em 單位可依主體字級自動放大縮小
   !important 為避免被 .marker-check 覆蓋
*/
.prose-content.blog-content .marker-check.circled-num {
    font-size: 1.2em !important;
    /* 將圓圈數字加大為原本 125% */
    line-height: 1;
    display: inline-flex;
    align-items: center;
    /* 垂直置中於單排文字 */
    vertical-align: middle;
    /* 避免因 baseline 偏移 */
}

/* === 包裹符號與內容，對齊文字基線 === */
.prose-content.blog-content .marker-check-wrap {
    display: inline-flex;
    align-items: baseline;
    gap: 0.25em;
}

/* === 隱藏原生 li 項目符號與縮排，只顯示客製化符號 === */
.prose-content.blog-content li[style*="list-style-type: none"] {
    list-style-type: none !important;
    padding-left: 0 !important;
}




/* ====== 共用外層區塊（所有自動插入短代碼的容器） ====== */
.prose-content.blog-content .auto-shortcode-block {
    margin: 12px 0;
    /* 全部自動插入區塊的上下間距，極簡清爽 */
    padding: 0;
    clear: both;
    width: 100%;
    box-sizing: border-box;
}

/* ====== 精選圖片樣式 ====== */
.prose-content.blog-content .featured-image-block {
    margin: 0px 0 12px 0;
    /* 上16px，下12px，更精簡 */
    text-align: center;
}

.prose-content.blog-content .featured-image-block img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
    display: block;
    margin: 0 auto;
}

/* ====== IRP分區塊 ====== */
.prose-content.blog-content .irp-block {
    margin: 8px 0;
}

/* ====== Link Whisper區塊 ====== */
.prose-content.blog-content .linkwhisper-block {
    margin: 12px 0;
}

/* ====== IRP inline區塊 ====== */
.prose-content.blog-content .irp-inline-block {
    margin: 8px 0;
}

/* ====== 消除內容本身多餘的上下 margin ====== */
.prose-content.blog-content .auto-shortcode-block>*:first-child {
    margin-top: 0 !important;
}

.prose-content.blog-content .auto-shortcode-block>*:last-child {
    margin-bottom: 0 !important;
}








/* 低調YouTube區塊 - 無底色無邊框 */
.prose-content.blog-content .low-key-video3 {
    max-width: 100%;
    margin: 36px auto 28px auto;
    padding: 0;
    background: transparent;
    border: none;
    box-shadow: none;
}

/* 保持原始YouTube寬高比例 */
.prose-content.blog-content .low-key-video3 .iframe-box3 {
    width: 100%;
    max-width: 560px;
    aspect-ratio: 16 / 9;
    /* 現代瀏覽器支援，讓影片永遠正常比例 */
    margin: 0 auto 12px auto;
    position: relative;
}

.prose-content.blog-content .low-key-video3 iframe {
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 8px;
    box-shadow: none;
    display: block;
}

/* 說明超連結樣式 */
.prose-content.blog-content .low-key-video3 .video-caption3 {
    text-align: left;
    margin-top: 0;
    margin-bottom: 0;
    font-size: 15px;
    font-weight: 700;
    color: #bdbdbd;
    letter-spacing: 0.5px;
}

.prose-content.blog-content .low-key-video3 .video-caption3 a {
    color: #bdbdbd;
    font-weight: 700;
    text-decoration: none;
    border: none;
    transition: none;
    cursor: pointer;
    /* 可隨意調整：font-family、font-size等 */
}









/* ========= 1. 圖文廣告樣式（aff-ad） ========= */
.prose-content.blog-content .aff-ad {
    background: #FFF9F3;
    /* 柔霧米色主底色 */
    border-radius: 12px;
    box-shadow: 0px 4px 12px rgba(180, 145, 98, 0.10);
    padding: 15px;
    margin: 24px 0;
    text-align: center;
    display: block;
    border: 1.5px solid #F2EADF;
}

.prose-content.blog-content .aff-ad-title {
    font-size: 18px;
    font-weight: bold;
    color: #B89A68;
    margin-bottom: 12px;
}

.prose-content.blog-content .aff-ad a img {
    width: 96%;
    height: auto;
    display: block;
    object-fit: cover;
    border-radius: 12px;
    box-shadow: 0px 2px 8px rgba(200, 170, 90, 0.12);
    transition: transform 0.2s, opacity 0.2s;
    margin: 14px auto 10px auto;
}

.prose-content.blog-content .aff-ad a:hover img {
    transform: scale(1.025);
    opacity: 0.88;
}

.prose-content.blog-content .aff-ad p {
    font-size: 16px;
    color: #775d37;
    margin: 12px 0;
}

.prose-content.blog-content .aff-ad a:last-of-type {
    display: inline-block;
    background: linear-gradient(135deg, #F1D7A2, #B89A68);
    color: #fff;
    text-decoration: none;
    padding: 10px 22px;
    font-size: 16px;
    font-weight: bold;
    border-radius: 7px;
    transition: background 0.2s;
    margin-top: 10px;
    box-shadow: 0 2px 8px #ead6b850;
}

.prose-content.blog-content .aff-ad a:last-of-type:hover {
    background: linear-gradient(135deg, #B89A68, #A28051);
}

/* ========= 2. info-block 標準文青 info 區塊 ========= */
.prose-content.blog-content .info-block {
    background: #fff;
    padding: 24px 16px;
    margin: 32px 0;
    border-top: 2px dashed #d8a94b;
    border-bottom: 2px dashed #d8a94b;
    box-shadow: 0 2px 10px #e7dfcc38;
    border-radius: 12px;
}

.prose-content.blog-content .info-title {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 12px;
    color: #8d7a4b;
    text-align: center;
}

.prose-content.blog-content .info-content {
    text-align: center;
}

.prose-content.blog-content .info-image {
    width: 100%;
    max-width: 500px;
    border-radius: 8px;
    margin: 12px auto;
    display: block;
    box-shadow: 0 1.5px 6px #f5e7be35;
}

.prose-content.blog-content .info-desc {
    font-size: 15px;
    color: #857140;
    margin: 14px auto;
    max-width: 600px;
}

.prose-content.blog-content .info-links {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    padding-left: 0;
    margin-top: 20px;
    list-style: none;
}

.prose-content.blog-content .info-links li {
    margin: 0;
}

.prose-content.blog-content .info-links a {
    display: inline-block;
    padding: 10px 16px;
    background-color: #f5e9c8;
    color: #5e4b45;
    font-size: 14px;
    font-weight: 500;
    border-radius: 6px;
    text-decoration: none;
    border: 1px solid #e3d1ac;
}

.prose-content.blog-content .info-links a:hover {
    background-color: #f0dfb6;
}

/* 響應式 info-block */
@media screen and (max-width: 768px) {

    .prose-content.blog-content .aff-ad-title,
    .prose-content.blog-content .info-title {
        font-size: 17px;
    }

    .prose-content.blog-content .aff-ad p,
    .prose-content.blog-content .info-desc {
        font-size: 14px;
    }

    .prose-content.blog-content .info-links {
        flex-direction: column;
        gap: 8px;
    }

    .prose-content.blog-content .info-links a {
        width: 100%;
        max-width: 300px;
        margin: 0 auto;
    }
}

/* ========= 2. info-block 標準文青 info 區塊（品牌/店家/住宿…）========= */
.prose-content.blog-content .info-block {
    background: #fff;
    padding: 24px 16px;
    margin: 32px 0;
    border-top: 2px dashed #d8a94b;
    border-bottom: 2px dashed #d8a94b;
}

.prose-content.blog-content .info-title {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 12px;
    color: #333;
    text-align: center;
}

.prose-content.blog-content .info-content {
    text-align: center;
}

.prose-content.blog-content .info-image {
    width: 100%;
    max-width: 500px;
    border-radius: 8px;
    margin: 12px auto;
    display: block;
}

.prose-content.blog-content .info-desc {
    font-size: 15px;
    color: #555;
    margin: 14px auto;
    max-width: 600px;
}

.prose-content.blog-content .info-links {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    padding-left: 0;
    margin-top: 20px;
    list-style: none;
}

.prose-content.blog-content .info-links li {
    margin: 0;
}

.prose-content.blog-content .info-links a {
    display: inline-block;
    padding: 10px 16px;
    background-color: #f5e9c8;
    color: #5e4b45;
    font-size: 14px;
    font-weight: 500;
    border-radius: 6px;
    text-decoration: none;
    border: 1px solid #e3d1ac;
    transition: none;
}

.prose-content.blog-content .info-links a:hover {
    background-color: #f0dfb6;
}

/* 響應式 info-block */
@media screen and (max-width: 768px) {

    .prose-content.blog-content .aff-ad-title,
    .prose-content.blog-content .info-title {
        font-size: 17px;
    }

    .prose-content.blog-content .aff-ad p,
    .prose-content.blog-content .info-desc {
        font-size: 14px;
    }

    .prose-content.blog-content .info-links {
        flex-direction: column;
        gap: 8px;
    }

    .prose-content.blog-content .info-links a {
        width: 100%;
        max-width: 300px;
        margin: 0 auto;
    }
}


/* ==== 商品卡片 3:4 固定比例樣式 ==== */
/* ================= 卡片全區塊樣式 ================== */
.prose-content.blog-content .card34 {
    width: 100%;
    max-width: 540px;
    background: #fff;
    border-radius: 0;
    /* 取消圓角 */
    box-shadow: 0 4px 32px rgba(0, 0, 0, 0.15);
    /* 陰影加深一點 */
    margin: 0 auto 32px auto;
    /* 下方多一點留白 */
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* ======= 上區：主圖（置中）＋描述（上下排列）======= */
.prose-content.blog-content .card34 .row-top.vertical {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 18px 0 8px 0;
    gap: 10px;
}

.prose-content.blog-content .card34 .row-top.vertical .mainimg {
    width: 94%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.prose-content.blog-content .card34 .row-top.vertical .imgwrap {
    width: 95%;
    aspect-ratio: 1/1;
    background: #f6f7f9;
    border-radius: 0;
    /* 無圓角 */
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.prose-content.blog-content .card34 .row-top.vertical .imgwrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.prose-content.blog-content .card34 .row-top.vertical .desc {
    width: 90%;
    font-size: 1.09rem;
    color: #987441;
    /* 深大地色 */
    text-align: left;
    line-height: 1.6;
    margin: 0 auto;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-all;
    min-height: 36px;
    padding: 0 4px;
}

/* ======= 分隔線 ======= */
.prose-content.blog-content .card34 .divider {
    width: 100%;
    height: 1.5px;
    background: #eaeaea;
    margin: 0;
    border-radius: 0;
    border: none;
}

/* ======= 中區／下區：左圖 50% + 右文（上下分） ======= */
.prose-content.blog-content .card34 .row-mid,
.prose-content.blog-content .card34 .row-bot {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    padding: 14px 22px;
    /* 左右內距加大 */
    border-top: 1.5px solid #eaeaea;
    background: #fff;
}

.prose-content.blog-content .card34 .row-mid .left,
.prose-content.blog-content .card34 .row-bot .left {
    width: 50%;
    min-width: 82px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-right: 14px;
    /* 左圖和右側文字拉開 */
}

.prose-content.blog-content .card34 .row-mid .imgwrap,
.prose-content.blog-content .card34 .row-bot .imgwrap {
    width: 100%;
    aspect-ratio: 1/1;
    background: #fff;
    border-radius: 0;
    overflow: hidden;
    position: relative;
    border: 5px solid #e8dcc2;
    /* 框加粗/更柔和 */
    display: flex;
    align-items: center;
    justify-content: center;
}

.prose-content.blog-content .card34 .row-mid .imgwrap img,
.prose-content.blog-content .card34 .row-bot .imgwrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ====== 右側：文字＋按鈕都上下左右置中 ====== */
.prose-content.blog-content .card34 .row-mid .right,
.prose-content.blog-content .card34 .row-bot .right {
    width: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.prose-content.blog-content .card34 .subdesc {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 1.03rem;
    color: #987441;
    /* 跟大地色線條一致 */
    font-weight: bold;
    /* 加粗 */
}

.prose-content.blog-content .card34 .subdesc>div {
    width: 100%;
    text-align: center;
    margin-bottom: 10px;
    color: #987441;
    /* 同上，保證全部字都大地色加粗 */
    font-weight: bold;
}

/* ====== 按鈕（小一點） ====== */
.prose-content.blog-content .card34 .btn {
    width: 75%;
    min-width: 88px;
    max-width: 210px;
    margin: 0 auto;
    font-size: 1.01rem;
    padding: 8px 0;
    border-radius: 0;
    text-align: center;
    font-weight: 700;
    display: block;
    text-decoration: none;
    transition: filter 0.18s;
}

.prose-content.blog-content .card34 .btn-orange {
    background: #ff6f00;
    color: #fff;
}

.prose-content.blog-content .card34 .btn-blue {
    background: #1a92ff;
    color: #fff;
}

.prose-content.blog-content .card34 .btn:hover {
    filter: brightness(0.92);
}

/* ====== 圖片來源標籤 ====== */
.prose-content.blog-content .card34 .imgsource {
    position: absolute;
    left: 10px;
    bottom: 8px;
    font-size: 12px;
    color: #fff;
    background: rgba(60, 60, 60, 0.45);
    padding: 2px 12px 2px 8px;
    border-radius: 8px;
    pointer-events: none;
}

/* ===== 響應式手機板調整 ===== */
@media (max-width: 650px) {
    .prose-content.blog-content .card34 {
        max-width: 100vw;
        border-radius: 0;
    }

    .prose-content.blog-content .card34 .row-top.vertical {
        padding: 11px 0 4px 0;
    }

    .prose-content.blog-content .card34 .row-mid,
    .prose-content.blog-content .card34 .row-bot {
        padding: 6px 10px;
    }

    .prose-content.blog-content .card34 .row-top.vertical .desc {
        font-size: 0.96rem;
    }

    .prose-content.blog-content .card34 .subdesc {
        font-size: 0.91rem;
    }

    .prose-content.blog-content .card34 .btn {
        font-size: 0.95rem;
        padding: 7px 0;
    }
}

/* momo 粉色按鈕 */
.prose-content.blog-content .card34 .btn-momo {
    background: #ff52a0;
    color: #fff;
}

/* 大地色分隔線，僅用於 card34 內部上下分隔 */
.prose-content.blog-content .card34 .pink-divider {
    width: 98%;
    height: 5px;
    background: #B89A68;
    border-radius: 0;
    margin: 0 auto;
    border: none;
}



/* === 課程 info 區塊專用 === */
.prose-content.blog-content .info-course-block {
    display: block;
    width: 100%;
    max-width: 600px;
    margin: 26px auto 28px auto;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 4px 14px #e6c7c744;
    text-decoration: none;
    transition: box-shadow .15s;
    padding: 18px 18px 22px 18px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.prose-content.blog-content .info-course-block:hover {
    box-shadow: 0 8px 20px #d87b8e22;
}

.prose-content.blog-content .info-course-title-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}

.prose-content.blog-content .info-course-tag {
    display: inline-block;
    font-size: 14px;
    padding: 0 12px;
    height: 26px;
    min-width: 38px;
    border-radius: 5px;
    background: #e54646;
    color: #fff;
    font-weight: 700;
    line-height: 26px;
    letter-spacing: 1.2px;
    margin-right: 3px;
}

.prose-content.blog-content .info-course-title {
    font-size: 20px;
    font-weight: bold;
    color: #1d1615;
    line-height: 1.3;
    letter-spacing: .5px;
    margin: 0 0 2px 0;
    flex: 1;
}

.prose-content.blog-content .info-course-img-wrap {
    width: 100%;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    margin-bottom: 12px;
}

.prose-content.blog-content .info-course-img {
    width: 100%;
    aspect-ratio: 16/9;
    display: block;
    object-fit: cover;
    border-radius: 12px;
    background: #f6f6f6;
}

.prose-content.blog-content .info-course-img-credit {
    position: absolute;
    left: 9px;
    bottom: 7px;
    font-size: 13px;
    color: #fff;
    background: rgba(30, 29, 37, 0.35);
    padding: 1px 10px 1px 7px;
    border-radius: 7px;
    pointer-events: none;
    line-height: 1.7;
}

.prose-content.blog-content .info-course-desc {
    font-size: 15px;
    color: #624E47;
    line-height: 1.6;
    margin: 10px 0 20px 0;
    min-height: 24px;
    letter-spacing: .1px;
}

.prose-content.blog-content .info-course-cta {
    margin: 0 auto;
    margin-top: 3px;
    display: block;
    width: 85%;
    min-width: 80px;
    max-width: 240px;
    background: linear-gradient(90deg, #fcd175, #ffd358 50%, #fbb865 100%);
    color: #9e440b;
    font-size: 17px;
    font-weight: bold;
    text-align: center;
    border-radius: 8px;
    padding: 10px 0 9px 0;
    box-shadow: 0 2px 8px #fdeaaa7c;
    letter-spacing: 2.3px;
    transition: filter 0.18s;
}

.prose-content.blog-content .info-course-block:hover .info-course-cta {
    filter: brightness(.95);
}

/* 響應式 */
@media (max-width: 700px) {
    .prose-content.blog-content .info-course-block {
        max-width: 99vw;
        padding: 10px 3vw 14px 3vw;
    }

    .prose-content.blog-content .info-course-title {
        font-size: 17px;
    }

    .prose-content.blog-content .info-course-cta {
        font-size: 15px;
        padding: 9px 0 8px 0;
    }

    .prose-content.blog-content .info-course-desc {
        font-size: 14px;
        margin-bottom: 10px;
    }

    .prose-content.blog-content .info-course-img-wrap {
        margin-bottom: 7px;
    }
}


/* 店家 */
.prose-content.blog-content .info-shop-block {
    background: #fff;
    padding: 10px 0px;
    border-radius: 4px;
    display: flex;
    align-items: center;
}

.prose-content.blog-content .info-shop-block {
    font-size: 17px;
    /* 整行都同樣大小 */
    color: #AE4635;
    /* 箭頭和字同色 */
}

.prose-content.blog-content .info-shop-block .shop-link {
    color: #AE4635;
    font-weight: bold;
    text-decoration: underline;
    transition: color 0.2s;
    margin-left: 6px;
    /* 讓箭頭和連結有間距 */
}

.prose-content.blog-content .info-shop-block .shop-link:hover {
    color: #205e98;
}


/* 品牌 */
.prose-content.blog-content .brand-row-2card {
    display: flex;
    flex-direction: row;
    gap: 15px;
    justify-content: center;
    width: 100%;
    margin: 32px 0 24px 0;
}

.prose-content.blog-content .brand-card {
    padding: 0;
    background: none;
    border: none;
    box-shadow: none;
    border-radius: 0;
    min-width: 220px;
    max-width: 420px;
    flex: 1 1 320px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    text-decoration: none;
    /* 取消底線 */
    color: inherit;
    /* 內容文字保持原色 */
    cursor: pointer;
    /* 滑鼠移上去是 pointer */
    transition: box-shadow 0.16s;
}

.prose-content.blog-content .brand-card:visited {
    color: inherit;
}

.prose-content.blog-content .brand-card:active,
.prose-content.blog-content .brand-card:focus,
.prose-content.blog-content .brand-img-wrap {
    width: 100%;
    aspect-ratio: 1/1;
    position: relative;
    margin-bottom: 10px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    border: 7px solid #c9ac96;
    box-sizing: border-box;
    background: #fff;
}

.prose-content.blog-content .brand-main-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.prose-content.blog-content .brand-cta {
    position: absolute;
    left: 20%;
    width: 65%;
    bottom: 50px;
    background: rgba(255, 148, 76, 0.80);
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    border-radius: 3px;
    padding: 8px 0;
    z-index: 4;
    transition: background 0.18s;
    box-shadow: 0 2px 8px 0 rgba(200, 160, 60, 0.05);
    display: block;
    pointer-events: none;
    /* 這行很重要！讓整個卡片都能點，按鈕只是裝飾 */
}

.prose-content.blog-content .brand-cta:hover {
    background: #e66600;
    color: #fff;
}

.prose-content.blog-content .img-credit {
    position: absolute;
    left: 10px;
    bottom: 8px;
    font-size: 12px;
    color: #fff;
    background: rgba(60, 60, 60, 0.45);
    padding: 3px 10px 2px 10px;
    border-radius: 3px;
    z-index: 3;
    pointer-events: none;
}

.prose-content.blog-content .brand-desc {
    font-size: 15px;
    color: #333;
    margin-top: 5px;
    text-align: center;
    margin-bottom: 0;
    padding: 0 8px;
}

/* —— 手機也維持橫排（兩卡壓縮在同一行） —— */
@media (max-width: 700px) {
    .prose-content.blog-content .brand-row-2card {
        gap: 8px;
    }

    .prose-content.blog-content .brand-card {
        min-width: 120px;
        max-width: 100%;
    }

    .prose-content.blog-content .brand-img-wrap {
        margin-bottom: 5px;
    }

    .prose-content.blog-content .brand-cta {
        font-size: 16px;
        padding: 7px 0;
    }

    .prose-content.blog-content .brand-desc {
        font-size: 15px;
    }
}

@media (max-width: 450px) {
    .prose-content.blog-content .brand-card {
        min-width: 90px;
    }

    .prose-content.blog-content .brand-cta {
        font-size: 14px;
        padding: 6px 0;
    }

    .prose-content.blog-content .brand-desc {
        font-size: 12px;
    }
}








/* 
  只針對「文章內容」區塊內，
  1. 開頭為 https://s.shopee.tw/ 的超連結
  2. 且這個連結「裡面沒有圖片」
  3. 且這個連結「沒有按鈕樣式 class」（常見有 .btn、.button，可再自行補充其他 class）
  → 加粗、底線、前後加空格（顏色會自動沿用 a 標籤原本的設定）
*/

.prose-content.blog-content a[href^="https://s.shopee.tw/"]:not(:has(img)):not(.btn):not(.button) {
    font-weight: bold;
    /* 文字加粗 */
    text-decoration: underline;
    /* 文字加底線 */
}

.prose-content.blog-content a[href^="https://s.shopee.tw/"]:not(:has(img)):not(.btn):not(.button)::before,
.prose-content.blog-content a[href^="https://s.shopee.tw/"]:not(:has(img)):not(.btn):not(.button)::after {
    content: " ";
    /* 文字前後加一個空格 */
}

/* ═══════════════════════════════════════════════════════════════
   內容目錄（ez-toc）：重現舊站 WP 外觀（依舊站 computed style 重建）
   內文匯入時保留了 ez-toc 的 HTML 標記，但外掛的 CSS/JS 沒有跟來。
   展開/收合由文章頁注入的輕量 JS 切換 .toc-collapsed；預設收合同舊站。
   ═══════════════════════════════════════════════════════════════ */
.prose-content.blog-content #ez-toc-container {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
    padding: 10px 20px 10px 14px;
    margin: 0 0 16px;
}

/* 標題列：標題在左、切換鈕在右，整列可點擊 */
.prose-content.blog-content .ez-toc-title-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
}

.prose-content.blog-content .ez-toc-title {
    color: #BE7C68;
    font-size: 1.2em;
    font-weight: 500;
    margin: 0;
}

/* 切換鈕：帶框小方鈕＋清單/箭頭 SVG（沿用匯入 HTML 內建圖示） */
.prose-content.blog-content a.ez-toc-toggle {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background: #fff;
    padding: 4px 7px;
    color: #444;
    text-decoration: none;
    line-height: 1;
}

.prose-content.blog-content a.ez-toc-toggle:hover {
    color: #444;
    background: #f5f3ef;
}

/* 圖示外層 span：兩個 SVG（清單＋箭頭）水平排列，不可上下疊 */
.prose-content.blog-content .ez-toc-js-icon-con,
.prose-content.blog-content .ez-toc-icon-toggle-span {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

.prose-content.blog-content .ez-toc-js-icon-con svg {
    width: 16px;
    height: 16px;
    vertical-align: middle;
}

.prose-content.blog-content .ez-toc-js-icon-con svg.arrow-unsorted-368013 {
    width: 10px;
    height: 10px;
}

/* 「Toggle」無障礙文字：僅供讀屏，不顯示 */
.prose-content.blog-content .eztoc-hide {
    display: none;
}

/* 收合狀態：藏清單、標題列不留下間距 */
.prose-content.blog-content #ez-toc-container.toc-collapsed nav {
    display: none;
}

.prose-content.blog-content #ez-toc-container:not(.toc-collapsed) .ez-toc-title-container {
    margin-bottom: 6px;
}

/* 目錄清單：無項目符號、無縮排底線，巢狀層再內縮 */
.prose-content.blog-content #ez-toc-container ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.prose-content.blog-content #ez-toc-container ul ul {
    margin-left: 1.4em;
}

.prose-content.blog-content #ez-toc-container li {
    margin: 0;
    padding: 0;
}

.prose-content.blog-content a.ez-toc-link {
    color: rgba(191, 125, 105, .55);
    font-size: .9em;
    font-weight: 500;
    text-decoration: none;
    line-height: 1.6;
    display: inline-block;
}

.prose-content.blog-content ul[class*="ez-toc-list-level"] ul a.ez-toc-link {
    font-size: .82em;
}

.prose-content.blog-content a.ez-toc-link:hover {
    color: #BE7C68;
    text-decoration: underline;
}

/* 保險：外掛預設收合 class 在無 JS 環境下必須維持展開 */
.prose-content.blog-content .eztoc-toggle-hide-by-default {
    display: block !important;
}

/* === 延伸閱讀（重現舊站 link-whisper 版位；樣式走站上大地色系）=== */
.prose-content.blog-content .related-reads {
    background: #F7F5EF;
    border: 1px solid #E2DCD0;
    border-left: 6px solid #BE7C68;
    border-radius: 8px;
    padding: 14px 18px;
    margin: 28px 0;
}

.prose-content.blog-content .related-reads-title {
    color: #BE7C68;
    font-weight: 700;
    margin: 0 0 8px;
    font-size: 1.05em;
}

.prose-content.blog-content .related-reads ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.prose-content.blog-content .related-reads li {
    margin: 6px 0;
    color: #8A7E63;
}

.prose-content.blog-content .related-reads li::before {
    content: '➜ ';
    color: #BE7C68;
}

.prose-content.blog-content .related-reads a {
    color: #8A7E63;
    text-decoration: none;
}

.prose-content.blog-content .related-reads a:hover {
    color: #BE7C68;
    text-decoration: underline;
}

/* Track A：中央 lazy aside 在商品資料回來前先保留版位，避免 CLS。 */
.blog-content aside.aff-ad-lazy,
.blog-content aside.info-block-lazy {
  display: block;
  min-height: 180px;
  margin: 1.5rem 0;
  contain: layout paint;
}