/* ==========================================
   安全性要求：禁止使用 Inline Style
   維護性要求：樣式集中管理、BEM 規範
   ========================================== */

/* 基礎設定 */
html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    background-color: #f9f9f9;
    font-family: "微軟正黑體", Arial, sans-serif;
}

/* 隱藏文字 (Preheader) 樣式 */
.edm-preheader {
    display: none !important;
    font-size: 0px;
    color: #ffffff;
    line-height: 0px;
    max-height: 0px;
    max-width: 0px;
    opacity: 0;
    overflow: hidden;
    visibility: hidden;
    mso-hide: all;
}

/* 主表格容器 */
.edm-main-table {
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
    max-width: 600px; /* 標準 EDM 建議寬度 */
    margin: 0 auto;
    background-color: #ffffff;
    border: 0;
}

/* BEM: 元素 (Elements) - 單元格樣式 */
.edm-main-table__cell {
    padding: 0;
    margin: 0;
    vertical-align: top; /* 取代 valign="top" */
    text-align: center;   /* 取代 align="center" */
    line-height: 0;      /* 消除圖片下方間隙 */
}

/* 圖片通用樣式 - 取代 border="0" 與 width="100%" */
.edm-img {
    display: block;
    width: 100%;
    max-width: 600px;
    height: auto;
    border: none;
    outline: none;
    text-decoration: none;
    margin: 0 auto;
}

/* 連結區塊樣式 */
.edm-link {
    display: block;
    text-decoration: none;
    border: 0;
    outline: none;
}

/* ==========================================
   響應式調整
   ========================================== */
@media screen and (max-width: 600px) {
    .edm-main-table {
        width: 100% !important;
    }
    .edm-img {
        width: 100% !important;
    }
}