/* =========================
   共用基礎樣式
   ========================= */

.crb-readmore {
    margin: 1.5em 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans TC",
        sans-serif;
    line-height: 1.7;
}

/* 非對話泡泡的 padding / 圓角 */
.crb-readmore:not(.crb-style-speech-gray):not(.crb-style-speech-green) {
    padding: 16px 18px;
    border-radius: 6px;
}

.crb-readmore .crb-title {
    font-weight: 700;
    margin-bottom: 10px;
}

.crb-readmore .crb-content p {
    margin: 0 0 0.6em;
}

.crb-readmore .crb-content ul,
.crb-readmore .crb-content ol {
    margin: 0.3em 0 0.3em 1.6em;
}

.crb-readmore .crb-content {
    color: var(--crb-text, inherit);
}

/* =========================
   1. 藍色說明框
   ========================= */

.crb-style-blue-note {
    border: 2px solid var(--crb-border, #2f6db8);
    background: var(--crb-bg, #f5f9ff);
}

.crb-style-blue-note .crb-title {
    color: var(--crb-title, #2f6db8);
    font-size: 1.05rem;
    text-align: center;
}

/* =========================
   2. 黃色長話短說框
   ========================= */

.crb-style-yellow-note {
    border-left: 6px solid var(--crb-border, #f2b735);
    background: var(--crb-bg, #fff9e6);
    padding: 16px 18px 18px 20px;
}

.crb-style-yellow-note .crb-title {
    color: var(--crb-title, #d48c00);
    font-size: 1.05rem;
}

/* =========================
   3. 灰色注意事項框
   ========================= */

.crb-style-gray-note {
    background: var(--crb-bg, #f5f5f5);
    border-radius: 6px;
    border: 1px solid var(--crb-border, #dddddd);
}

.crb-style-gray-note .crb-title {
    color: var(--crb-title, #666666);
    font-size: 1rem;
}

/* =========================
   6. 卡片式延伸閱讀：一般（highlight / transparent-border）
   ========================= */

.crb-style-card-link {
    position: relative;
    border-radius: 6px;
    border: 1px solid #f4c170;
    background: #fffaf1;
    padding: 26px 18px 18px;
    margin: 2.5rem 0 2rem;
    box-sizing: border-box;
}

/* 整塊背景透明（非 transparent-noborder 模式） */
.crb-bg-transparent.crb-style-card-link {
    background: transparent !important;
}

/* 基本標題定位：掛在線上（highlight / transparent-border 用） */
.crb-style-card-link > .crb-title {
    position: absolute !important;
    top: 0 !important;
    left: 18px !important;
    transform: translateY(-50%) !important;
    display: inline-block !important;
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.2;
    box-sizing: border-box;
    margin: 0 !important;
}

/* 標題置中（highlight / transparent-border 用） */
.crb-style-card-link.crb-card-title-center > .crb-title {
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
}

/* 1) highlight：預設黃底＋外框 */
.crb-style-card-link.crb-card-title-style-highlight > .crb-title {
    padding: 4px 12px;
    background: #ffc14d;
    color: #ffffff !important;
    border-radius: 3px;
    border: 1px solid #f4c170;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);
}

/* 2) transparent-border：背景「視覺透明」＋外框
   → 背景用卡片色遮住外框線，看起來像透明，但不會被線切到文字 */
.crb-style-card-link.crb-card-title-style-transparent-border > .crb-title {
    padding: 2px 10px;
    background: var(--crb-bg, #fffaf1) !important; /* ★ 關鍵：用卡片背景色切開線 */
    color: var(--crb-title, #2f6db8) !important;
    border-radius: 3px;
    border: 1px solid #f4c170;
    box-shadow: none;
}

/* 內文區：從標題底下再拉開一點距離 */
.crb-style-card-link .crb-content {
    font-size: 0.9rem;
    color: var(--crb-text, #555555);
    margin-top: 6px;
}

/* 標題連結樣式（通用） */
.crb-style-card-link > .crb-title a {
    color: inherit;
    text-decoration: none;
}

.crb-style-card-link > .crb-title a:hover {
    text-decoration: underline;
}

/* =========================
   6-2. 卡片式延伸閱讀：transparent-noborder 新 DOM
   ========================= */

/* 外層 wrapper：吃主題背景，畫外框＋底色，裡面裝一條線和卡片內容 */
.crb-card-wrapper.crb-card-title-style-transparent-noborder {
    margin: 2.5rem 0 2rem;
    border: 1px solid #f4c170;
    border-radius: 6px;
    background: #fffaf1;
    padding: 14px 18px 18px;
    box-sizing: border-box;
}

/* 整塊背景透明時，只保留外框 */
.crb-card-wrapper.crb-card-title-style-transparent-noborder.crb-bg-transparent {
    background: transparent !important;
}

/* 上方那條線 + 標題（用 flex 做兩邊線，中間文字） */
.crb-card-wrapper.crb-card-title-style-transparent-noborder .crb-card-top {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

/* 左右延伸的線 */
.crb-card-wrapper.crb-card-title-style-transparent-noborder .crb-card-top::before,
.crb-card-wrapper.crb-card-title-style-transparent-noborder .crb-card-top::after {
    content: "";
    flex: 1;
    border-top: 1px solid #f4c170;
}

/* 標題本體：背景透明、無外框，但會佔一塊區域把線切開 */
.crb-card-wrapper.crb-card-title-style-transparent-noborder .crb-card-title {
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--crb-title, #2f6db8);
    padding: 0 4px;
    margin: 0;
    white-space: nowrap;
    background: transparent;
}

/* 置中：flex 預設就是置中 */
/* 左對齊：只留右邊的線 */
.crb-card-wrapper.crb-card-title-style-transparent-noborder.crb-card-title-align-left
    .crb-card-top {
    justify-content: flex-start;
}

.crb-card-wrapper.crb-card-title-style-transparent-noborder.crb-card-title-align-left
    .crb-card-top::before {
    content: none;
}

/* transparent-noborder 模式下的內層卡片內容：只作為內距容器，不再畫第二個框 */
.crb-card-wrapper.crb-card-title-style-transparent-noborder
    .crb-style-card-link {
    border: none;
    background: transparent;
    padding: 0;
    margin: 0;
}

/* 內文樣式沿用 crb-style-card-link .crb-content 即可 */

/* 標題連結（transparent-noborder） */
.crb-card-wrapper.crb-card-title-style-transparent-noborder
    .crb-card-title a {
    color: inherit;
    text-decoration: none;
}

.crb-card-wrapper.crb-card-title-style-transparent-noborder
    .crb-card-title a:hover {
    text-decoration: underline;
}

/* =========================
   對話泡泡樣式（小編 / 小韭菜）
   ========================= */

.crb-style-speech-gray,
.crb-style-speech-green {
    display: flex;
    align-items: flex-start;
    padding: 0;
    border: none;
    background: transparent;
    width: 100%;
}

/* 小編：整列靠左 */
.crb-speech-left {
    justify-content: flex-start;
}

/* 小韭菜：整列靠右（貼文章右側） */
.crb-speech-right {
    justify-content: flex-end;
}

/* 頭像區 */
.crb-avatar-wrap {
    width: 56px;
    text-align: center;
    font-size: 12px;
    color: #777777;
}

.crb-avatar-icon {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid var(--crb-border, #dcdcdc);
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    font-size: 18px;
}

.crb-avatar-name {
    margin-top: 4px;
}

/* 對話泡泡主體 */
.crb-bubble {
    position: relative;
    max-width: 80%;
    padding: 10px 14px;
    border-radius: 6px;
    border: 1px solid var(--crb-border, #dcdcdc);
    margin-top: 4px;
}

/* 左邊小編：頭像左、泡泡右 */
.crb-speech-left .crb-avatar-wrap {
    order: 0;
    margin-right: 8px;
}

.crb-speech-left .crb-bubble {
    order: 1;
}

/* 右邊小韭菜：泡泡左、頭像右，但整列靠右 */
.crb-speech-right .crb-avatar-wrap {
    order: 1;
    margin-left: 8px;
}

.crb-speech-right .crb-bubble {
    order: 0;
}

/* 灰 / 綠預設背景 */
.crb-style-speech-gray .crb-bubble {
    background: var(--crb-bg, #f5f5f5);
}

.crb-style-speech-green .crb-bubble {
    background: var(--crb-bg, #e6f9ec);
}

/* 對話箭頭 */
.crb-speech-left .crb-bubble::before,
.crb-speech-right .crb-bubble::before {
    content: "";
    position: absolute;
    top: 14px;
    border-style: solid;
}

.crb-speech-left .crb-bubble::before {
    left: -10px;
    border-width: 8px 10px 8px 0;
    border-color: transparent var(--crb-bg, #f5f5f5) transparent transparent;
}

.crb-speech-right .crb-bubble::before {
    right: -10px;
    border-width: 8px 0 8px 10px;
    border-color: transparent transparent
        transparent var(--crb-bg, #e6f9ec);
}

/* =========================
   H 標籤層級：字體由大到小
   ========================= */

.crb-readmore span.crb-title {
    font-size: 1rem;
}

.crb-readmore h4.crb-title {
    font-size: 1.05rem;
}

.crb-readmore h3.crb-title {
    font-size: 1.2rem;
}

.crb-readmore h2.crb-title {
    font-size: 1.4rem;
}