/* 自定義容器，完全取代body的展示角色 — 不影響同一網頁其他畫面 */
.card-showcase {
    background: linear-gradient(145deg, #f5f7fa 0%, #e9edf2 100%);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding: 30px 20px;
}

/* ----- 主要卡片框框 ----- */
.profile-card {
    /*max-width: 880px;*/
    width: 100%;
    background: white;
    border-radius: 28px;
    box-shadow: 0 20px 35px -8px rgba(0, 0, 0, 0.12), 0 8px 16px -6px rgba(0, 0, 0, 0.02);
    padding: 24px 28px;
    /* 關鍵佈局：flex 排左(人像) + 中(名稱/介紹) + 右(日期) */
    /*display: flex;
    gap: 22px;*/
    transition: all 0.2s ease;
    border: 1px solid rgba(255,255,255,0.5);
    backdrop-filter: blur(2px);
    position: relative;
}

/* 左邊 —— 人像圖片區 */
    .card-avatar {
    flex-shrink: 0; /* 防止被壓縮 */
    display: flex;
    align-items: flex-start; /* 讓圖片頂部對齊卡片上緣，更乾淨 */
}

.avatar-img {
    width: 104px;
    height: 104px;
    object-fit: cover;
    border-radius: 20px;
    background: #d9e2ef; /* 圖片萬一沒載入時顯示柔和底色 */
    box-shadow: 0 10px 18px -6px rgba(0,0,0,0.08);
    border: 3px solid white;
    transition: transform 0.25s;
    display: block; /* 移除 inline 多餘間隙 */
}

    /* 簡單 hover 效果，增加互動感 */
    .avatar-img:hover {
        transform: scale(1.02);
    }

/* 中間區塊 — 人員名稱 + 人員介紹 （垂直排列） */
.card-info {
    flex: 1; /* 撐滿剩餘空間，把日期推到最右 */
    display: flex;
    flex-direction: column;
    justify-content: center; /* 垂直置中，但保留名稱靠上，介紹緊接在後 */
    padding-top: 4px; /* 微調視覺，跟人像頂部不要差太多 */
}

/* 人員名稱 — 位於中上 */
.person-name {
    font-size: 1.8rem;
    font-weight: 650;
    letter-spacing: -0.01em;
    line-height: 1.2;
    color: #1f2a44;
    margin-bottom: 10px;
    word-break: break-word;
}

/* 人員介紹 — 位於名稱下方 */
.person-bio {
    font-size: 1rem;
    line-height: 1.55;
    color: #3e4a5e;
    opacity: 0.86;
    font-weight: 400;
    max-width: 340px; /* 控制介紹寬度，閱讀更舒適 */
    word-break: break-word;
}

/* 右邊 — 日期區塊，完全靠右 */
.card-date {
    flex-shrink: 0; /* 不壓縮 */
    display: flex;
    align-items: flex-start; /* 日期內容與卡片頂部對齊 */
    justify-content: flex-end;
    min-width: 70px;
    margin-left: 6px; /* 跟介紹內容稍微拉開，視覺不擁擠 */
}

.date-badge {
    background: #f2f5f9;
    padding: 10px 16px;
    border-radius: 50px; /* 膠囊造型，更精緻 */
    font-size: 0.95rem;
    font-weight: 530;
    color: #1f3a5f;
    letter-spacing: 0.3px;
    border: 1px solid #eaeef4;
    box-shadow: 0 2px 6px rgba(0,0,0,0.02);
    white-space: nowrap; /* 日期保持單行，若長日期可改為正常換行 */
    display: flex;
    align-items: center;
    gap: 6px;
}

    /* 可選: 在日期前加個小圖標，更有辨識度 */
    .date-badge::before {
        content: "📅";
        font-size: 0.9rem;
        opacity: 0.8;
        margin-right: 4px;
    }

/* 簡單點綴：仿邊框光澤 */
.profile-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 28px;
    pointer-events: none;
    box-shadow: inset 0 1px 2px rgba(255,255,255,0.6);
}

/* 卡片之間的間距 */
.profile-card:not(:last-child) {
    margin-bottom: 20px;
}

/* 響應式：當寬度不足時，微調佈局讓所有內容清楚 */
@@media (max-width: 550px) {
    .profile-card {
        flex-wrap: wrap; /* 允許換行，但依然維持左圖、右上名稱等關係？ */
        padding: 22px;
    }

    .card-avatar {
        width: 100%;
        justify-content: center;
        margin-bottom: 10px;
    }

    .avatar-img {
        width: 90px;
        height: 90px;
    }

    .card-info {
        width: 70%; /* 給予主要資訊區塊彈性 */
        flex: 1 1 60%;
    }

    .person-name {
        font-size: 1.6rem;
    }

    .card-date {
        align-items: center; /* 垂直置中 */
        margin-left: 0;
    }

    .date-badge {
        white-space: normal; /* 允許日期換行 */
        text-align: right;
    }
}

/* 小手機，更極限壓縮 */
@@media (max-width: 420px) {
    .profile-card {
        flex-direction: column; /* 改為垂直，但依然保留左、中、右的視覺順序？ */
        align-items: stretch;
    }

    .card-avatar {
        justify-content: flex-start;
    }

    .card-info {
        width: 100%;
    }

    .card-date {
        justify-content: flex-start;
        margin-top: 8px;
    }

    .date-badge {
        white-space: nowrap;
    }
}