/* 使用 Google Fonts 來美化字體 */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;500&display=swap');

/* 基本樣式重設與頁面佈局 */
body {
    margin: 0;
    font-family: 'Noto Sans TC', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background-color: #f0f3f5;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding: 24px;
    box-sizing: border-box;
}

/* 主要卡片容器 */
.card {
    background-color: #ffffff;
    border-radius: 20px; /* 更圓潤的邊角 */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08), 0 4px 8px rgba(0, 0, 0, 0.06);
    overflow: hidden; /* 確保圖片的方角被圓角裁切 */
    max-width: 450px;
    width: 100%;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* 滑鼠懸停時的動態效果 */
.card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1), 0 8px 12px rgba(0, 0, 0, 0.08);
}

/* 圖片樣式 */
.card-image {
    width: 100%;
    height: auto;
    display: block; /* 移除圖片底部的預設空隙 */
}

/* 文字內容區塊 */
.card-content {
    padding: 28px 32px;
    /* 模仿您範例中淡淡的背景色 */
    background-color: #f8fbfb; 
}

/* 新增的 meta 資訊區塊 */
.card-meta {
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #eef2f5;
    font-size: 15px;
    color: #6B7280; /* 中性灰色 */
    display: none; /* 根據要求隱藏此區塊 */
}

.card-meta p {
    margin: 0 0 8px 0;
}

.card-meta p:last-child {
    margin-bottom: 0;
}

.card-meta strong {
    font-weight: 500;
    color: #4A5568; /* 稍深的灰色 */
}

/* 文字段落樣式 */
.card-text {
    margin: 0;
    color: #4A5568; /* 使用更柔和的深灰色 */
    font-size: 17px;
    font-weight: 400;
    line-height: 1.75; /* 增加行高以提高可讀性 */
}
.hidden-text {
    display: none;
}        

/* 分享區塊 */
.card-share {
    padding: 20px 32px;
    background-color: #ffffff;
    border-top: 1px solid #eef2f5; /* 使用更淡的分隔線 */
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap; /* 在小螢幕上換行 */
    gap: 12px; /* 按鈕之間的間距 */
}

/* 分享按鈕 */
.share-btn {
    display: inline-flex; /* 使用 flex 來置中圖示 */
    justify-content: center;
    align-items: center;
    text-decoration: none;
    width: 44px; /* 設定固定寬高 */
    height: 44px;
    border-radius: 50%; /* 圓形按鈕 */
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.share-btn:hover {
    opacity: 0.9;
    transform: scale(1.05);
}

/* <img> 圖示樣式 */
.share-btn img {
    width: 22px; /* 圖示大小 */
    height: 22px;
}

/* 各平台顏色 */
.share-btn.facebook { background-color: #1877F2; }
.share-btn.twitter  { background-color: #14171A; } /* X 的新黑色系 */
.share-btn.line     { background-color: #06C755; }
.share-btn.threads  { background-color: #F0F0F0; }
.share-btn.info     { background-color: #5E38D3; } /* 資訊按鈕的中性灰色 */

/* 頁尾主辦方資訊 */
.card-footer {
    padding: 12px 32px;
    background-color: #ffffff; /* 與分享區塊背景色一致 */
    text-align: center;
    font-size: 13px; /* 較小的字體 */
    color: #9ca3af; /* 淺灰色 */
    border-top: 1px solid #eef2f5; /* 與分享區塊上方的分隔線一致 */
}

.card-footer a {
    color: #6b7280; /* 比周圍文字稍深的灰色，但仍保持低調 */
    font-weight: 500;
    text-decoration: none;
    transition: color 0.2s ease;
}

.card-footer a:hover {
    color: #5E38D3; /* 滑鼠懸停時使用主題紫色，增加互動性 */
    text-decoration: underline;
}