/* 整體 layout spacing */
.notice-main-row {
    margin-top: 25px;
    margin-bottom: 28px;
}

/* 左邊表單 panel（自家樣式，唔用 card） */
.notice-panel {
    background: #fafafa;
    border: 1px solid #e0e0e0;
    padding: 16px 20px 20px;
    border-radius: 4px;
}

.notice-panel-title {
    display: block;
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 10px;
}

/* section 標題 */
.section-title {
    margin-top: 16px;
    margin-bottom: 6px;
    font-weight: 600;
    font-size: 0.95rem;
    color: #555;
}

/* 介紹區 */
.notice-intro {
    margin-top: 10px;
    padding: 14px 18px;
    background: #f9f9f9;
    border-left: 4px solid #b0bec5;
    font-size: 0.95rem;
    line-height: 1.7;
}

/* 按鈕列 */
.btn-row {
    margin-top: 18px;
}
.btn-row .btn {
    margin-right: 8px;
    margin-bottom: 8px;
}

/* 預覽標題 */
.preview-heading {
    margin-top: 10px;
    margin-bottom: 12px;
    font-size: 1.35rem;
    font-weight: 700;
}

/* 預覽 container */
.template-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

/* 包住圖片 + download 掣嘅 wrapper */
.notice-template-wrap {
    width: 360px;
}

/* 單一預覽「圖片」本身 */
.notice-template {
    width: 100%;
    min-height: 580px;          /* 高啲，確保底部背景 + 邊線出晒 */
    padding: 24px 26px;
    background: #ffffff;
    border: 1px solid #e0e0e0;
    box-shadow: 0 2px 6px rgba(0,0,0,0.04);
    box-sizing: border-box;
    position: relative;         /* 比 PREVIEW 水印用 */
}

/* A/B/C 各自背景：用 contain 確保四邊邊框唔會被 cut 掉 */
.tmpl-a {
    background: url('/assets/notice/bgA.png') top center no-repeat;
    background-size: contain;
}

.tmpl-b {
    background: url('/assets/notice/bgB.png') top center no-repeat;
    background-size: contain;
}

.tmpl-c {
    background-color: #ffffff;
}

/* 字型：偏傳統（標楷體／仿宋／明體優先） */
.notice-title,
.tmpl-a,
.tmpl-b,
.tmpl-c {
    font-family:
        "DFKai-SB",
        "BiauKai",
        "FangSong",

        "MingLiU",
        "PMingLiU",
        "Songti TC",
        "PingFang TC",
        "Microsoft JhengHei",
        serif;
}

/* 標題（desktop 基準） */
.notice-title {
    text-align: center;
    font-size: 26px;
    font-weight: 800;
    letter-spacing: 4px;
    margin-bottom: 16px;
    color: #222;
}

/* 內容字型大小（desktop 基準） */
.tmpl-a,
.tmpl-b,
.tmpl-c {
    font-size: 15px;
    line-height: 1.9;
}

.tmpl-a p,
.tmpl-b p,
.tmpl-c p {
    margin: 0 0 8px 0;
}

/* 資料 table：label 對齊 */
.notice-table {
    width: 100%;
    border-collapse: collapse;
    margin: 4px 0 8px 0;
    font-size: 15px;
}
.notice-table td {
    padding: 1px 0;
}
.notice-table td:first-child {
    width: 70px;
    white-space: nowrap;
}

/* download 掣：喺圖片下面，唔入 html2canvas 範圍 */
.notice-download-btn {
    margin-top: 6px;
    text-align: center;
}
.notice-download-btn .btn {
    padding: 0 18px;
}

/* 手機優化（<=600px）*/
@media (max-width: 600px) {

    /* 整個 preview 區加左右 margin */
    .template-grid {
        padding: 0 12px;
    }

    .notice-template-wrap {
        width: 100%;
        margin: 0 0 14px;
    }

    .notice-template {
        padding: 38px 42px;   /* 左右多少少 padding，唔貼邊 */
        min-height: 540px;    /* 保持同 desktop 差唔多高度，唔好再加高 */
    }

    /* 手機：標題同內文全部縮細 & 收窄行距，減少高度 */
    .notice-title {
        font-size: 28px;
        letter-spacing: 5px;
        margin-bottom: 12px;
    }

    .tmpl-a,
    .tmpl-b,
    .tmpl-c {
        font-size: 14.5px !important;   /* 字體細啲，避免超出背景 */
        line-height: 1.8 !important;    /* 行距收窄 */
    }

    .tmpl-a p,
    .tmpl-b p,
    .tmpl-c p {
        margin: 0 0 6px 0;
    }

    .notice-table {
        font-size: 12.5px;
        margin: 2px 0 6px 0;
    }
    .notice-table td {
        padding: 0;
    }

    /* 再強制一次字型，用同一套傳統字型 */
    .notice-title,
    .tmpl-a,
    .tmpl-b,
    .tmpl-c {
        font-family:
            "DFKai-SB",
            "BiauKai",
            "FangSong",
            "MingLiU",
            "PMingLiU",
            "Songti TC",
            "PingFang TC",
            "Microsoft JhengHei",
            serif !important;
    }
}

/* PREVIEW 水印：右下角半透明 */
.notice-preview-watermark {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 64px;
    letter-spacing: 10px;
    color: rgba(0, 0, 0, 0.18);
    font-weight: 700;
    pointer-events: none;
    text-transform: uppercase;
}


/* ===== Background switching ===== */
.notice-template.bgA {
    background-image: url('/assets/notice/bgA.png');
    background-size: cover;
    background-repeat: no-repeat;
}
.notice-template.bgB {
    background-image: url('/assets/notice/bgB.png');
    background-size: cover;
    background-repeat: no-repeat;
}
.notice-template.bgC {
    background-image: url('/assets/notice/bgC.png');
    background-size: cover;
    background-repeat: no-repeat;
}
.notice-template.bgD {
    background-image: url('/assets/notice/bgD.png');
    background-size: cover;
    background-repeat: no-repeat;
}
.notice-template.plain {
    background: #ffffff;
}

/* 背景縮圖列 */
.bg-thumb-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 8px;
}

.bg-thumb-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    font-size: 0.8rem;
}

.bg-thumb-radio {
    margin-bottom: 4px;
}

.bg-thumb {
    width: 70px;
    height: 110px;
    border-radius: 4px;
    border: 1px solid #ddd;
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    background-color: #f5f5f5;
}

.bg-thumb.plain {
    background: #ffffff;
}

.bg-thumb.bgA {
    background-image: url('/assets/notice/bgA.png');
}

.bg-thumb.bgB {
    background-image: url('/assets/notice/bgB.png');
}

.bg-thumb.bgC {
    background-image: url('/assets/notice/bgC.png');
}

.bg-thumb.bgD {
    background-image: url('/assets/notice/bgD.png');
}

.bg-thumb-label {
    margin-top: 3px;
    color: #555;
}

/* 真正套用背景喺預覽卡上 */
.notice-template.plain {
    background: #ffffff;
}

.notice-template.bgA {
    background: #f7f4f0 url('/assets/notice/bgA.png') center top no-repeat;
    background-size: cover;
}

.notice-template.bgB {
    background: #f5f5f5 url('/assets/notice/bgB.png') center top no-repeat;
    background-size: cover;
}

.notice-template.bgC {
    background: #f4f2ed url('/assets/notice/bgC.png') center top no-repeat;
    background-size: cover;
}

.notice-template.bgD {
    background: #f8f4f0 url('/assets/notice/bgD.png') center top no-repeat;
    background-size: cover;
}
/* ===== notice preview bottom button (force visible) ===== */
.notice-template-wrap{
    position: relative;
    margin-bottom: 18px;
}

.notice-download-btn{
    display: block;
    text-align: center;
    margin-top: 10px;
    padding-bottom: 6px;
}

.notice-download-btn .btn{
    width: 100%;
    max-width: 320px;
    display: inline-block;
}
@media (max-width: 600px){

    .notice-template{
        min-height: 570px;   /* 原本 540 + 30 */
    }

}