/* 共用 */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet"');

*{ box-sizing: border-box; }

html, body {
    margin: 0;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    font-family: "Noto Sans TC", "Noto Sans", "Microsoft JhengHei", sans-serif;
    font-weight: 400;
    font-size: 20px;
    position: relative;
     -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    height:100%;
}

body {
    margin: 0;
    background-color: #66BEE2; /* 你的天空藍底色 */
    font-family: sans-serif;
    position: relative;
    z-index: 0;
    min-height: 100vh;
    padding-bottom: 180px;   /* 預留草地高度,避免內容被蓋住 */
    padding-bottom: 12vw;
    overflow-x: hidden;            /* 防止草地溢出造成橫向捲軸 */
}

/* 用偽元素放草地,滿版橫跨 */
body::after {
    content: "";
    position: fixed;               /* 或 absolute,看你要不要捲動時跟著 */
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 180px;                 /* 依圖片實際比例調整 */
    background-image: url('../img/background.png');
    background-repeat: no-repeat;
    background-position: bottom center;
    background-size: 100% 100%;       /* 配合 aspect-ratio,圖片會完整填滿且不變形 */
    pointer-events: none;          /* 不擋住下方文字的點擊 */
    z-index: 1;                    /* 在背景之上,內容之下 */
}

/* 基本頁面 */
.container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 97%;
    margin: auto;
    height: 100vh;
    position: relative;
    z-index: 2;
}

.background_image {
    position: fixed;
    bottom: 0;
    width: 50%;
}

.header {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 90%;
    max-width: 1200px;
    background-color: #fff;
    border-radius: 0px 0px 60px 60px;
    padding: 5px 0px;
}

.menu {
    display: flex;
    align-items: center;
}

.logo {
    width: 35px;
    margin-right: 45px;
}

.logo img {
    width: 100%;
}

.menu-list {
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    font-size: 16px;
    font-weight: 600;
    color: #000;
    padding: 0 25px;
}

.menu-list:hover {
    color: #009944;
}

.menu-list.active {
    color: #009944;
}

.menu-icon {
    width: 24px;
    margin-right: 5px;
}

.menu-divider {
    height: 35px;
    border-left: 1px solid #E663A5;
    margin: 0 10px;
}

/* 首頁 */
.home-left {
    width: 100%;
    display: flex;
    justify-content: center; /* 人物圖水平置中 */
    margin-bottom: 30px;
    margin-top: 20px;
    position: relative;
}

/* 主視覺左方雲朵 */
.home-cloud {
    position: absolute;
    left: -6%;                /* 靠左貼齊 */
    top: 16%;                /* 約在人物中段高度 */
    width: 45%;              /* 隨主視覺縮放 */
    max-width: 360px;
    height: auto;
    z-index: 0;              /* 在人物之下 */
    pointer-events: none;
    opacity: 0.9;
}

.home-people {
    max-width: 700px;        /* 視主視覺大小調整 */
    width: 100%;
    z-index: 1;
    position: relative;
}

.home-people img {
    width: 100%;
    height: auto;
    display: block;
}

.home-right {
    width: 100%;
    max-width: 900px;        /* 文字框寬度,依設計調整 */
    margin: 0 auto;
    position: relative;
}

/* 外層:白色圓角框、不捲動 */
.event-info {
    background: #fff;
    border-radius: 30px;
    /* max-width: 900px; */
    width: 900px;
    margin: 0 auto;
    padding: 30px 30px 30px 30px;   /* 外層留白:左右就是捲軸與圓角的「距離」 */
    box-sizing: border-box;
    height: 48vh;
    max-height: 700px;
    overflow: hidden;                /* 外層不捲,確保圓角不會被捲軸破壞 */
    overflow-x: hidden;          /* 水平不要捲軸 */
    display: flex;
    flex-direction: column;
    margin-top: -36px;
    min-height: 0;          /* 關鍵!讓 flex 子元素尊重 max-height */
    overflow-y: auto;
    overflow-x: hidden;
}

/* 美化捲軸,讓它離邊緣有距離 */
.event-info::-webkit-scrollbar {
    width: 8px;
}

.event-info::-webkit-scrollbar-track {
    background: transparent;
    margin: 30px 0;                 /* 上下留白,捲軸不要貼到圓角 */
}

.event-info::-webkit-scrollbar-thumb {
    background: #c4c4c4;
    border-radius: 999px;
    /* 用透明邊框 + background-clip 製造「往內縮」的效果 */
    border: 2px solid transparent;
    background-clip: padding-box;
}

.event-info::-webkit-scrollbar-thumb:hover {
    background: #999;
    background-clip: padding-box;
    border: 2px solid transparent;
}

.event-info h2 {
    text-align: center;      /* 標題置中 */
    font-size: 24px;
    text-align: center;
    margin-top: 0px;
    margin-bottom: 10px;
    padding: 0 15px;
}

.card-title {
    text-align: center;
    margin-bottom: 30px;
}

.card-title img {
    max-width: 350px;            /* 視 index_title.png 實際大小調整 */
    width: 80%;
    height: auto;
}

/* === 內容列表 === */
.info-list {
    position: relative;
    padding-left: 20px;
}

/* 每一行(標籤 + 內容) */
.info-row {
    display: flex;
    align-items: flex-start;
    gap: 30px;
    margin-bottom: 24px;
}

/* 左側藍色膠囊標籤 */
.info-label {
    flex-shrink: 0;
    width: 170px;                /* 固定寬度,讓所有標籤對齊 */
    background: #2a6db0;         /* 深藍色 */
    color: #fff;
    text-align: center;
    padding: 10px 16px;
    border-radius: 999px;        /* 膠囊形狀 */
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 2px;
}

/* 右側內容 */
.info-content {
    flex: 1;
    font-size: 18px;
    line-height: 1.8;
    color: #222;
    font-weight: 700;            /* 從截圖看內文是粗體 */
    padding-top: 8px;            /* 微調讓內容與標籤垂直對齊 */
}

.info-content ol {
    margin: 0;
    padding-left: 24px;
}

.info-content li {
    margin-bottom: 16px;
}

.info-content li:last-child {
    margin-bottom: 0;
}

/* === 按鈕區 === */
.card-action {
    text-align: center;
    margin-top: 30px;
}

.btn-join {
    display: inline-block;
    background: #f08a3e;         /* 橘色 */
    color: #fff;
    text-decoration: none;
    font-size: 28px;
    font-weight: 900;
    padding: 16px 80px;
    border-radius: 999px;        /* 膠囊形狀 */
    letter-spacing: 4px;
    box-shadow: 0 4px 0 rgba(0,0,0,0.1);
    transition: transform 0.15s ease;
}

.btn-join:hover {
    transform: translateY(-2px);
}

.btn-join:active {
    transform: translateY(1px);
}

.event-container {
    width: 40%;
    min-width: 300px;
    margin-top: 25px;
}

.event-container img {
    width: 100%;
}

/* ===== 拿掉所有 ol/li 預設樣式 ===== */
.notice_ol ol {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* ===== 共用 li 樣式：讓編號和文字並排對齊 ===== */
.notice_ol li {
    display: flex;               /* ⭐ 關鍵：編號和文字並排 */
    gap: 4px;
    align-items: flex-start;
    margin-bottom: 8px;
}

.notice_ol li::before {
    flex-shrink: 0;              /* ⭐ 編號不被壓縮 */
}

/* ===== 第 1 層：(一) (二) (三) ===== */
.notice_ol > ol {
    counter-reset: level1;
}
.notice_ol > ol > li {
    counter-increment: level1;
}
.notice_ol > ol > li::before {
    content: "(" counter(level1, cjk-ideographic) ")";
    min-width: 2em;            /* ⭐ 固定寬度，文字才會對齊 */
}

/* ===== 第 2 層：1. 2. 3. ===== */
.notice_ol ol ol {
    counter-reset: level2;
    margin-top: 8px;
    margin-left: 1em;            /* ⭐ 往右縮排 */
    width: 98%;                 /* 讓子清單佔滿 flex 剩餘空間 */
}
.notice_ol ol ol > li {
    counter-increment: level2;
}
.notice_ol ol ol > li::before {
    content: counter(level2) ".";
    min-width: 1em;
}

/* ===== 第 3 層：(1) (2) (3) ===== */
.notice_ol ol ol ol {
    counter-reset: level3;
    margin-top: 6px;
    margin-left: 0.1em;
}
.notice_ol ol ol ol > li {
    counter-increment: level3;
}
.notice_ol ol ol ol > li::before {
    content: "(" counter(level3) ")";
    min-width: 0.1em;
}

/* 第 4 層:a. b. c.(可改) */
.notice_ol ol ol ol ol {
  counter-reset: level4;
  margin-top: 4px;
  margin-left: 1em;
  width: calc(100% - 1em);
}
.notice_ol ol ol ol ol > li { counter-increment: level4; }
.notice_ol ol ol ol ol > li::before {
  content: counter(level4, lower-alpha) ".";
  min-width: 1.8em;
}

.event-text {
    max-height: none;
    padding: 0 20px;
    overflow: auto;
    font-size: 14px;
}

.event-text-p {
    font-size: 14px;
}
.event-text p {
    margin: 0;
}

.prize-title {
    width: 95%;
    padding: 10px 0;
}

/* 共用樣式 */
.bird {
   position: absolute;
    width: 15%;                  /* 跟著對話框等比縮放 */
    height: auto;
    pointer-events: none;
    z-index: 2;
}

.event-info-wrapper {
    position: relative;          /* 定位基準 */
    width: 100%;
}

/* 左邊小鳥 */
.bird-left {
    left: 0;                     /* 錨點在對話框左邊緣 */
    bottom: -8%;
    transform: translateX(-60%); /* 自己往左移動一半寬度,中線就對齊邊緣 */
    width: 20%;   
}

/* 右邊小鳥 */
.bird-right {
    right: 0;                    /* 錨點在對話框右邊緣 */
    bottom: -5%;
    transform: translateX(75%);  /* 自己往右移動一半寬度,中線就對齊邊緣 */
    width: 25%;                  /* 右邊兩隻疊在一起,稍微大一點 */
}

/* 轉盤左邊小鳥 */
.bird-left_1 {
    left: 0%;                     /* 錨點在對話框左邊緣 */
    bottom: -8%;
    transform: translateX(-60%); /* 自己往左移動一半寬度,中線就對齊邊緣 */
    width: 20%;   
}

/* 轉盤右邊小鳥 */
.bird-right_1 {
    right: 0%;                    /* 錨點在對話框右邊緣 */
    bottom: -5%;
    transform: translateX(75%);  /* 自己往右移動一半寬度,中線就對齊邊緣 */
    width: 25%;                  /* 右邊兩隻疊在一起,稍微大一點 */
}



.footer {
    width: 90%;
    display: flex;
    align-items: center;
    position: fixed;
    bottom: -15px;
    position: relative;
    z-index: 3;
}

.post-logo {
    width: 56px;
    margin: 10px 10px 20px 10px;
}

.post-logo img {
    width: 100%;
}

.footer-bottom {
    width: 100%;
}

.post-logo-text {
    height: 38px;
    background-color: #269352;
    display: flex;
    align-items: center;
}

.post-logo-text img {
    height: 60%;
    margin-left: 5px;
}

.footer-text {
    font-size: 12px;
    display: flex;
    color: #fff;
}

.footer-text p {
    margin-right: 10px;
    margin-top: 0px;
}

.post-logo-color {
    width: 75px;
    position: absolute;
    right: 0px;
    bottom: 15px;
}

.post-logo-color img {
    width: 100%;
}

/* 個人資料登錄 */
.draw-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 500px;
    margin: 0 auto;
}

.list-title {
    margin-bottom: 5px;
    display: block;
    font-size: 14px;
}

.draw-input {
    width: 100%;
    height: 44px !important; /* 強制：統一輸入框高度，與 .win-input 一致 */
    padding: 0 10px;
    font-size: 14px;
    border: 1px solid #ccc;
    box-sizing: border-box;
    margin-bottom: 5px;
}

.verification-wrapper {
    display: flex;
    align-items: stretch;     /* 子元素同步拉伸：input 多高、CAPTCHA 也多高 */
    gap: 20px;
    width: 100%;
    /* 不指定 height — 由 input 自然撐起；user.jsp (~40px) / win.html (44px) 各用各的 */
}
.verification-wrapper > .code-input {
    flex: 1;                  /* 填滿 wrapper 內 CAPTCHA 之外的剩餘空間 */
    width: auto;              /* 覆寫 .code-input 預設的 width: 50% */
    min-width: 0;             /* 解除 flex item 預設的 min-width: auto，避免 input overflow wrapper */
    margin: 0;
    margin-bottom: 0;         /* 覆寫 .draw-input 的 margin-bottom: 5px */
}

.code-input {
    width: 50%;
    box-sizing: border-box;
}

.verification-code {
    width: 50%;
    background-color: #009944;
    border: 1px solid #ccc;
    color: #fff;
    text-align: center;
    padding: 10px 10px;
    font-size: 14px;
    text-align: left;
}

/* 圖片版驗證碼（CAPTCHA）— 覆蓋上方 div 樣式 */
img.verification-code {
    width: 110px;
    align-self: stretch;     /* 跟 input 同高（user.jsp 用 .draw-input、win.html 用 .win-input）*/
    height: auto;
    min-height: 100%;        /* 確保 stretch 生效 */
    object-fit: contain;     /* PNG 不變形，置中顯示 */
    background-color: #f5f5f5;
    border: 1px solid #ccc;
    padding: 0;
    cursor: pointer;
    flex-shrink: 0;
    box-sizing: border-box;
}

/* 驗證碼底下的「點此更換」提示 */
.captcha-hint {
    font-size: 12px;
    color: #666;
    margin-top: 6px;
    margin-bottom: 8px;
}
.captcha-hint a {
    color: #009944;
    text-decoration: underline;
    cursor: pointer;
    font-weight: 600;
}
.captcha-hint a:hover {
    color: #00723a;
}

/* win.html 內 hint 在 .win-form-row（橫排 flex）內，需強制換行對齊 input */
.win-form-row {
    flex-wrap: wrap;
}
/* .verification-wrapper 預設 width: 100% 會把 label 擠出 row，這裡改 flex: 1 */
.win-form-row > .verification-wrapper {
    width: auto;
    flex: 1;
}
.win-form-row > .captcha-hint {
    flex-basis: 100%;
    margin-left: 180px;       /* 對齊 input：label 160px + gap 20px */
    margin-top: 0;
}
@media (max-width: 768px) {
    /* 手機版：column 排版時，verification-wrapper 改回 100% 寬，hint 不縮排 */
    .win-form-row > .verification-wrapper {
        width: 100%;
        flex: none;
    }
    .win-form-row > .captcha-hint {
        margin-left: 0;
    }
}



.draw-btn {
    margin-top: 20px;
    padding: 12px;
    font-size: 16px;
    background-color: #009944;
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    width: 50%;
    margin: 20px auto 0 auto;
    display: block;
}

.draw-btn:hover {
    background-color: #D12A46;
}

/* 外層卡片：負責整體置中 */
.link {
    display: flex;
    justify-content: center;  /* 讓 inner 在卡片中央 */
    background: #fff;
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    padding: 30px 0;
}

/* 內層：負責讓圖片靠左排列 */
.link-inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;  /* 關鍵：所有圖左邊對齊 */
    gap: 12px;
}

.link-inner a {
    display: block;
}

.link-inner a img {
    display: block;
    height: 48px;
    width: auto;
    object-fit: contain;
}

.error-message {
    color: #D12A46;
    font-size: 12px;
    margin-bottom: 4px;
}

/* 判斷彈窗 */
.popup {
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 3;
}

.popup-content {
    background: #fff;
    width: 90%;
    max-width: 1000px;
    border-radius: 30px;
    padding: 30px 24px;
    max-height: 90vh;
    position: relative;
    box-sizing: border-box;
    z-index: 3;
}

.popup-title {
    font-size: 24px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 20px;
}

.popup-text {
    font-size: 14px;
    line-height: 1.6;
    height: 50vh;
    overflow-x: hidden;
    overflow-y: auto;
    border: 1px solid #ccc;
    padding: 12px;
    border-radius: 6px;
    margin-bottom: 16px;
    background-color: #fafafa;
}

.checkbox-area {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.checkbox-area input[type="checkbox"] {
    margin-top: 3px;
    width: 18px;
    height: 18px;
}

.checkbox-area input.error {
    outline: 2px solid red;
    border-radius: 2px;
}

.checkbox-area label {
    font-size: 14px;
    line-height: 1.4;
}

.warning-text {
    text-align: center;
    font-size: 13px;
    margin-bottom: 16px;
}

.warning-text.error {
    color: red;
}

.confirm-button {
    background-color: #009944;
    margin: 16px auto 0 auto;
    display: block;
    align-self: center;
    padding: 12px 40px;
    color: white;
    font-size: 16px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
}

.close-btn {
    width: 36px;
    height: 36px;
    position: absolute;
    top: 12px;
    right: 16px;
    cursor: pointer;
    border: none;
    background: transparent;
    padding: 0;
    font-size: 32px;
    font-weight: 400;
    line-height: 1;
    color: #888;
    display: flex;
    align-items: center;
    justify-content: center;
}

.close-btn:hover {
    color: #333;
}

.close-btn img {
    width: 100%;
}

.popup-content2 {
    background-color: white;
    padding: 40px 30px;
    border-radius: 10px;
    text-align: center;
    width: 300px;
}

.popup-content2 h2 {
    margin-top: 0;
    font-size: 24px;
}

.popup-content2 p {
    margin-top: 0;
    font-size: 16px;
}

.popup-content2 button {
    background-color: #009944;
    margin: 16px auto 0 auto;
    display: block;
    align-self: center;
    padding: 12px 60px;
    color: white;
    font-size: 16px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
}

ul.flex-list {
    list-style: none;
    padding: 0;
}

ul.flex-list li {
    display: flex;
    align-items: flex-start;
    margin-bottom: 1em;
}

ul.flex-list li::before {
    content: "•";
    margin-right: 0.5em;
    line-height: 1.5;
}

/* 抽獎次數彈窗內容容器 */
.popup-content-count {
    background: #fff;
    border-radius: 20px;
    padding: 30px 40px;
    max-width: 400px;
    width: 90%;
    text-align: center;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

/* 文字樣式 */
.popup-content-count .count-text {
    font-size: 20px;
    font-weight: 700;
    color: #000;
    margin: 5px 0;
    line-height: 1.4;
}

/* 紅色數字（5、4） */
.popup-content-count .count-number {
    color: #e60012;
    font-size: 36px;
    font-weight: 900;
    margin: 0 8px;
    vertical-align: middle;
}

/* 前往抽獎按鈕 */
.popup-content-count .count-btn {
    background: #009944;
    color: #fff;
    font-size: 22px;
    font-weight: 700;
    border: none;
    border-radius: 50px;
    padding: 16px 60px;
    margin-top: 30px;
    cursor: pointer;
    transition: background 0.3s ease;
}

.popup-content-count .count-btn:hover {
    background: #007a36;
}

.lottery-wrapper {
    position: relative;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 30px 20px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 2;
}

/* 左上「郵保抽抽樂」標題圖 (絕對定位於左側) */
.lottery-title-img {
    position: absolute;
    top: 20px;
    left: -3%;
    width: 500px;
    max-width: 33%;
    z-index: 3;
    pointer-events: none;
}

.lottery-title-img img {
    width: 100%;
    height: auto;
    display: block;
}

.wheel-stage {
    position: relative;
    width: 100%;
    max-width: 480px;        /* 轉盤直徑(桌機) */
    aspect-ratio: 1 / 1.25;  /* 高度 = 轉盤直徑 * 1.25(預留底座空間) */
    margin: 20px auto 0;
}

.wheel-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 80%;             /* 占舞台高度 80%(因為舞台預留 25% 給底座) */
    transform: rotate(0deg);
    transform-origin: 50% 50%;
    will-change: transform;
    filter: drop-shadow(0 6px 12px rgba(0,0,0,0.18));
    user-select: none;
    -webkit-user-drag: none;
}

.wheel-pointer-img {
    position: absolute;
    top: -1%;                /* 指針頂端略高於 wheel-stage 頂端 */
    left: 50%;
    width: 10.5%;            /* 占舞台寬度 (13.16% * 0.8 ≈ 10.5%) */
    transform: translateX(-50%);
    z-index: 3;
    pointer-events: none;
    filter: drop-shadow(0 2px 3px rgba(0,0,0,0.2));
    user-select: none;
    -webkit-user-drag: none;
}

.wheel-base-img {
    position: absolute;
    top: 78.4%;
    left: 50%;
    width: 43.6%;
    transform: translateX(-50%);
    z-index: 1;              /* 在 wheel(z=auto=2) 之下 */
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
}

.wheel-img {
    z-index: 2;
}

/* 開始抽獎按鈕區 */
.lottery-action {
    margin-top: 30px;
    text-align: center;
}

.btn-lottery {
    display: inline-block;
    background: #f5a623;
    color: #fff;
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-size: 28px;
    font-weight: 900;
    padding: 18px 90px;
    border-radius: 999px;
    letter-spacing: 6px;
    box-shadow: 0 5px 0 #c47e15, 0 8px 12px rgba(0,0,0,0.15);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.btn-lottery:hover {
    transform: translateY(-2px);
    box-shadow: 0 7px 0 #c47e15, 0 10px 14px rgba(0,0,0,0.2);
}

.btn-lottery:active {
    transform: translateY(3px);
    box-shadow: 0 2px 0 #c47e15, 0 4px 6px rgba(0,0,0,0.15);
}

.btn-lottery.disabled,
.btn-lottery:disabled {
    background: #b8b8b8;
    box-shadow: 0 5px 0 #888;
    cursor: not-allowed;
    transform: none;
}

/* === 中獎結果頁 === */

.lottery-result-wrapper {
    position: relative;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 50px 20px 0;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    z-index: 2;
}

.result-card {
    background: #fff;
    border-radius: 30px;
    max-width: 900px;
    margin: 0 auto;
    padding: 20px 70px;
    box-sizing: border-box;
    margin-top: -36px;        
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    animation: result-fade-in 0.5s ease-out;
}

/* 中獎時:兩個按鈕分兩行,垂直排列 */
.result-card.event-info .result-actions-win {
    display: flex;
    flex-direction: column;     /* 直向 */
    gap: 16px;
    margin: 0 80px;
}

.event-info-wrapper{
    width: 100% !important;
    max-width: 900px;
}


/* 領獎確認書:靠左 */
.result-actions-win .btn-result-download {
    align-self: flex-start;
}

/* 回首頁:置中、加寬 */
.result-actions-win .btn-result-primary {
    align-self: center;
    min-width: 280px;
}

@keyframes result-fade-in {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* 結果頁：API 載入完成前隱藏 footer，避免下半部先閃現 */
body.page-result-loading .footer {
    visibility: hidden;
}

body.page-result-loading .home-left,
body.page-result-loading .bird-left,
body.page-result-loading .bird-right {
    visibility: hidden;
}

body.page-result-loading .event-info-wrapper {
    min-height: 520px;
}

.result-loading-state {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 480px;
    width: 100%;
    color: #009944;
    font-size: 1.25rem;
    font-weight: 700;
}

body.page-result-ready .content-container {
    animation: result-fade-in 0.35s ease-out;
}

.result-icon {
    font-size: 80px;
    line-height: 1;
    margin-bottom: 10px;
    animation: result-bounce 1s ease-in-out infinite alternate;
}

@keyframes result-bounce {
    from { transform: translateY(0); }
    to { transform: translateY(-10px); }
}

.result-title {
    font-size: 42px;
    font-weight: 900;
    color: #E96A4A;
    letter-spacing: 8px;
    margin: 10px 0 8px;
}

.result-subtitle {
    font-size: 18px;
    color: #666;
    margin: 0 0 30px;
    letter-spacing: 2px;
}

.result-prize-box {
    background: linear-gradient(135deg, #fff8e1 0%, #ffe8a8 100%);
    border: 3px dashed #f5a623;
    border-radius: 20px;
    padding: 25px 20px;
    margin: 0 0 30px;
}

.result-prize-label {
    font-size: 16px;
    color: #8a6500;
    margin-bottom: 8px;
    letter-spacing: 2px;
}

.result-prize-name {
    font-size: 28px;
    font-weight: 900;
    color: #d97706;
    letter-spacing: 2px;
}

.result-note {
    font-size: 16px;
    color: #555;
    line-height: 1.8;
    margin: 0 0 30px;
}

.result-actions {
    display: flex;
    gap: 15px;
    justify-content: center;
    flex-wrap: wrap;
}

.btn-result {
    display: inline-block;
    text-decoration: none;
    font-size: 18px;
    font-weight: 700;
    padding: 14px 40px;
    border-radius: 999px;
    letter-spacing: 3px;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.btn-result-primary {
    background: #f5a623;
    color: #fff;
    box-shadow: 0 4px 0 #c47e15;
}

.btn-result-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 0 #c47e15;
}

.btn-result-primary:active {
    transform: translateY(2px);
    box-shadow: 0 2px 0 #c47e15;
}

.btn-result-secondary {
    background: #fff;
    color: #666;
    border: 2px solid #ccc;
    padding: 12px 38px;        /* 補回 border 寬度 */
    box-shadow: 0 4px 0 #ddd;
}

.btn-result-secondary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 0 #ddd;
}

.btn-result-secondary:active {
    transform: translateY(2px);
    box-shadow: 0 2px 0 #ddd;
}

@keyframes result-fade-in {
    from { opacity: 0; transform: translateY(15px); }
    to { opacity: 1; transform: translateY(0); }
}

/* === 中獎卡片(.result-card-win)內容 === */

/* 標題:獎項名稱 */
.result-win-title {
    font-size: 20px;
    font-weight: bold;
    color: #222;
    text-align: center;
    margin: 10px 0 30px;
    letter-spacing: 1px;
}

/* 視覺區:左禮物盒 + 右獎項徽章圖 */
.result-visual {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin: 0 auto 20px;
    max-width: 600px;
}

.result-giftbox {
    width: 80px;
    max-width: 18%;
    height: auto;
    flex-shrink: 0;
    animation: giftbox-bounce 1.2s ease-in-out infinite alternate;
}

@keyframes giftbox-bounce {
    from { transform: translateY(0) rotate(-3deg); }
    to { transform: translateY(-6px) rotate(3deg); }
}

/* 獎項徽章圖 */
.result-prize-img {
    width: 300px;
    max-width: 50%;
    height: auto;
    flex-shrink: 0;
}

/* 中獎須知 分隔線 */
.result-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 20px 0;
    color: #8FA32B;        /* 黃綠色,跟官方畫面一致 */
}

.result-divider::before,
.result-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #8FA32B;
    max-width: 200px;
}

.result-divider-text {
    padding: 0 20px;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 4px;
    color: #8FA32B;
}

/* 中獎須知內文 */
.result-notice {
    color: #333;
    font-size: 16px;
    line-height: 1.8;
    margin: 0 80px 30px;
}

.result-notice-address {
    margin: 0 0 16px;
    font-weight: 500;
}

.result-notice-list {
    margin: 0 0 12px;
    padding-left: 28px;
}

.result-notice-list li {
    margin-bottom: 4px;
}

.result-notice-tel {
    margin: 8px 0 0;
    color: #666;
}

/* === 動作按鈕區(中獎與未中獎共用) === */
.result-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
    margin-top: 30px;
}

.result-actions-win {
    /* 中獎時:領獎確認書按鈕靠左,回首頁按鈕居中 */
    justify-content: space-around;
}

/* 通用按鈕基底 */
.btn-result {
    display: inline-block;
    text-decoration: none;
    font-family: inherit;
    font-size: 18px;
    font-weight: 700;
    padding: 14px 50px;
    border-radius: 6px;
    letter-spacing: 2px;
    cursor: pointer;
    border: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
    text-align: center;
    line-height: 1.4;
}

/* 主按鈕(回首頁):綠色實心 */
.btn-result-primary {
    background: #2E9D3F;
    color: #fff;
    min-width: 240px;
    box-shadow: 0 3px 0 rgba(0,0,0,0.15);
}

.btn-result-primary:hover {
    background: #28893a;
    transform: translateY(-2px);
    box-shadow: 0 5px 0 rgba(0,0,0,0.15);
}

.btn-result-primary:active {
    transform: translateY(1px);
    box-shadow: 0 2px 0 rgba(0,0,0,0.15);
}

/* 領獎確認書下載按鈕:橘色外框 */
.btn-result-download {
    background: #fff;
    color: #f5a623;
    border: 2px solid #f5a623;
    padding: 12px 30px;
    font-size: 16px;
    letter-spacing: 2px;
    min-width: auto;
}

.btn-result-download:hover {
    background: #fff8eb;
    transform: translateY(-2px);
}

.btn-result-download:active {
    transform: translateY(1px);
}

.btn-result-download .download-icon {
    margin-left: 6px;
    font-size: 14px;
}

/* === 未中獎卡片(.result-card-no-prize)內容 === */

.result-card-no-prize {
    text-align: center;
    padding: 40px 60px 20px;
}

.result-no-prize-title {
    font-size: 22px;
    font-weight: 900;
    color: #222;
    margin: 0 0 30px;
    letter-spacing: 2px;
}

.result-no-prize-img {
    display: block;
    max-width: 320px;
    width: 36%;
    height: auto;
    margin: 0 auto 30px;
    animation: mailbox-wiggle 2s ease-in-out infinite;
}

@keyframes mailbox-wiggle {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(-2deg); }
    75% { transform: rotate(2deg); }
}

.result-card-no-prize .result-actions {
    margin-top: 0;
}

/* === 結果頁操作列：剩餘次數 + 繼續抽獎 + 下次再抽 並排 === */
.result-action-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px 14px;
    margin: 12px 0 8px;
    padding: 0 8px;
}

.result-remain-hint {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: #222;
    white-space: nowrap;
    line-height: 1.4;
}

.result-remain-hint strong {
    color: #e60012;
    font-size: 1.25em;
    margin: 0 2px;
}

/* 下次再抽：次要按鈕（灰綠外框） */
.btn-result-later {
    background: #fff;
    color: #2E9D3F;
    border: 2px solid #2E9D3F;
    box-shadow: none;
    min-width: 120px;
    padding: 12px 28px;
}

.btn-result-later:hover {
    background: #f0faf3;
    transform: translateY(-2px);
}

.btn-result-later:active {
    transform: translateY(1px);
}

.result-action-bar .btn-result {
    min-width: 120px;
    padding: 12px 28px;
    font-size: 16px;
    letter-spacing: 1px;
}

.result-download-row {
    text-align: center;
    margin: 8px 0 4px;
}

/* 結果頁：壓縮上方主視覺，讓操作列盡量落在第一視窗 */
body.page-result-ready .home-left {
    margin-top: 8px;
    margin-bottom: 0;
}

body.page-result-ready .home-people {
    max-width: 420px;
}

body.page-result-ready .result-card.event-info {
    height: auto;
    max-height: none;
    overflow: visible;
    margin-top: -20px;
    padding: 18px 40px 24px;
}

body.page-result-ready .result-card-no-prize {
    padding: 20px 40px 24px;
}

body.page-result-ready .result-no-prize-title {
    margin: 0 0 12px;
}

body.page-result-ready .result-no-prize-img {
    width: 28%;
    max-width: 220px;
    margin: 0 auto 8px;
}

body.page-result-ready .result-win-title {
    margin: 4px 0 12px;
}

body.page-result-ready .result-visual {
    margin: 0 auto 4px;
}

body.page-result-ready .result-giftbox {
    width: 56px;
}

body.page-result-ready .result-prize-img {
    width: 200px;
    max-width: 42%;
}

body.page-result-ready .result-notice {
    margin: 8px 40px 0;
    font-size: 14px;
}

body.page-result-ready .result-divider {
    margin: 12px 0 8px;
}

/* 中獎查詢 */
.win-form {
    display: flex;
    flex-direction: column;
    gap: 28px;
    max-width: 560px;
    margin: 30px auto 0;
    padding: 0 10px;
}

.win-form-row {
    display: flex;
    align-items: center;
    gap: 20px;
}

.win-label {
    flex-shrink: 0;
    width: 160px;
    font-size: 18px;
    font-weight: 700;
    color: #222;
    text-align: right;
}

.win-label .required {
    color: #009944;
    margin-right: 4px;
    font-weight: 700;
}

.win-input {
    flex: 1;
    height: 44px !important;  /* 強制：避免被某些 flex stretch 邏輯覆寫 */
    padding: 0 14px;
    font-size: 16px;
    font-family: inherit;
    border: 1px solid #c4c4c4;
    border-radius: 4px;
    background: #f5f5f5;
    outline: none;
    transition: border-color 0.2s, background 0.2s;
}

.win-input:focus {
    border-color: #009944;
    background: #fff;
}

.win-input::placeholder {
    color: #b0b0b0;
}

/* 按鈕區 */
.win-form-action {
    text-align: center;
    /* 拿掉 margin-top — .win-form 已有 gap: 28px 統一控制間距 */
}

.btn-submit,
.btn-back {
    display: inline-block;
    background: #009944;
    color: #fff;
    border: none;
    text-decoration: none;
    font-family: inherit;
    font-size: 18px;
    font-weight: 700;
    padding: 14px 40px;
    border-radius: 6px;
    letter-spacing: 2px;
    cursor: pointer;
    transition: transform 0.15s ease, background 0.2s;
}

.btn-submit:hover,
.btn-back:hover {
    background: #007a36;
    transform: translateY(-1px);
}

.btn-submit:active,
.btn-back:active {
    transform: translateY(1px);
}

.btn-back {
    background: #888;
}

.btn-back:hover {
    background: #666;
}

/* ===== 查詢結果 ===== */
.win-result-info {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 560px;
    margin: 20px auto 30px;
    padding: 0 10px;
}

.win-result-row {
    display: flex;
    align-items: center;
    gap: 20px;
}

.win-result-label {
    flex-shrink: 0;
    width: 100px;
    font-size: 18px;
    font-weight: 700;
    color: #222;
    text-align: center;
}

.win-result-value {
    flex: 1;
    height: 44px;
    line-height: 44px;
    padding: 0 20px;
    font-size: 16px;
    background: #ececec;
    border-radius: 4px;
    color: #222;
    text-align: center;
}

/* ===== 中獎表格 ===== */
.win-table-wrapper {
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
    overflow-x: auto;
    padding: 0 10px;
}

.win-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 15px;
}

.win-table thead th {
    background: #a4c739;
    color: #fff;
    font-weight: 700;
    padding: 12px 8px;
    text-align: center;
    border: none;
}

.win-table tbody td {
    padding: 12px 8px;
    text-align: center;
    color: #222;
    background: #fff;
    border-bottom: 1px solid #eee;
}

.win-table tbody tr:nth-child(even) td {
    background: #f5f5f5;
}

/* 中獎查詢：領獎確認書下載區 */
.win-claim-section {
    width: 100%;
    max-width: 720px;
    margin: 20px auto 0;
    padding: 0 10px;
    text-align: left;
}

.win-claim-section .result-notice-address {
    margin-bottom: 16px;
}

.win-claim-section .btn-result-download {
    display: inline-flex;
}



/* RWD */
html {
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
}

@media (max-width: 1366px) {
    .event-info {
        max-width: 95%;
        z-index: -1;
        padding: 20px 5px;
    }

    .header{
        width: 98%;
    }
}

@media (min-width: 1020px) and (max-width: 1100px) {
    .event-info {
        max-width: 90%;
        padding: 30px 30px;
        height: 44vh;
    }

    .home-left {
        max-width: 85%;
        margin: 10px auto 20px;
    }

    .home-people {
        max-width: 100%;
        padding: 0;
        top: 0%;
        left: 0%;
    }

    .home-people img {
        width: 100%;
        margin: 0 auto;
        max-width: 600px;
    }

    /* 左邊小鳥 */
    .bird-left {
        left: 2%;                     
        bottom: -8%;
        transform: translateX(-50%); /* 自己往左移動一半寬度,中線就對齊邊緣 */
        width: 18%;   
    }

    /* 右邊小鳥 */
    .bird-right {
        right: 4%;                    /* 錨點在對話框右邊緣 */
        bottom: -5%;
        transform: translateX(75%);  /* 自己往右移動一半寬度,中線就對齊邊緣 */
        width: 15%;                  /* 右邊兩隻疊在一起,稍微大一點 */
    }
}

@media (max-width: 768px) {
    /* 手機：避免 100vh 把內容裁切、避免橫向溢出 */
    .container {
        height: auto;
        min-height: 100vh;
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
        padding-bottom: 20px;
    }

    .home-cloud {
        width: 35%;
        left: 0;
        top: 40%;
        max-width: 200px;
    }

    .prize-title{
        content: url('../img/mb/gift.png');
        width: 100%;
        min-width: unset;
    }

    /* 取消桌機固定 900px，改滿版寬度（Galaxy S9+ 等機型必備） */
    .event-info {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        max-height: 60vh;
        overflow-y: auto;
        overflow-x: hidden;
        min-height: 0;
        padding: 24px 18px;
        display: block;
        border-radius: 24px;
    }

    .event-info-wrapper {
        width: 100% !important;
        max-width: 100%;
        padding: 0 16px;           /* 白框與螢幕邊界留白 */
        box-sizing: border-box;
    }

    /* 頂部選單：左 logo、右回首頁都要看得到 */
    .header {
        width: 96%;
        max-width: 100%;
        padding: 8px 8px 10px 18px; /* 左側加大，logo 往右一點 */
        box-sizing: border-box;
        overflow: visible;
        justify-content: flex-start;
        gap: 4px;                   /* logo 與選單之間小間距即可 */
    }

    .logo {
        width: auto;
        height: 38px;              /* 放大 logo，手機版更明顯 */
        min-width: 68px;
        margin-right: 0;
        margin-left: 4px;          /* logo 再往右微調 */
        flex-shrink: 0;
    }

    .logo img {
        height: 100%;
        width: auto;
        max-width: none;
        object-fit: contain;
        display: block;
    }

    .menu {
        flex: 1;
        min-width: 0;
        justify-content: space-evenly; /* 五個選項均勻展開，善用左側空間 */
        gap: 0;
    }

    .menu-list {
        flex: 0 1 auto;            /* 不要再均分撐開，避免文字貼分隔線 */
        min-width: 0;
        flex-direction: column;
        padding: 0 3px;
        font-size: 11px;
        letter-spacing: 0;
        white-space: nowrap;
    }

    .menu-list:last-child {
        flex-shrink: 0;            /* 回首頁不要被擠掉 */
    }

    .menu-icon {
        width: 18px;
        margin-right: 0;
        margin-bottom: 2px;
    }

    .menu-divider {
        height: 28px;
        margin: 0 4px;             /* 選項與中間線拉開一點距離 */
        flex-shrink: 0;
    }
    
    /* 如果父層是 flex,確保不擴展 */
    .home-right {
        display: block;
        min-height: 0;
        width: 100%;
        max-width: 100%;
    }

    /* 主視覺不可用固定 min-width 撐破螢幕 */
    .home-people {
        min-width: 0 !important;
        max-width: 100%;
        width: 85%;
    }

    .home-people img {
        max-width: 100%;
        height: auto;
    }

    /* transform 只能寫一次，否則後面會覆寫前面 */
    .bird-left {
        left: 2%;
        bottom: -4%;
        width: 14%;
        transform: translateX(0);
    }

    .bird-right {
        right: 2%;
        bottom: -4%;
        width: 16%;
        transform: translateX(0);
    }

    /* win.html 專屬:小鳥往內收,避免卡到畫面邊緣 */
    .win-page .bird-left {
        left: 5%;
        transform: translateX(0);
        width: 17%;
        bottom: -10%;
    }

    .win-page .bird-right {
        right: 5%;
        transform: translateX(0);
        width: 20%;
        bottom: -10%;
    }

    /* fixed footer 會蓋住內容；手機改回文件流 */
    .footer {
        position: relative;
        bottom: 0;
        width: 100%;
        margin-top: 24px;
    }

    .result-card.event-info .result-actions-win {
        margin: 0 12px;
    }

    /* 行動版：剩餘次數單獨一行，兩個按鈕下一行並排 */
    .result-action-bar {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 10px;
    }

    .result-action-bar .result-remain-hint {
        flex: 0 0 100%;
        width: 100%;
        text-align: center;
        white-space: normal;
        margin: 0;
    }

    .result-action-bar .btn-result,
    .result-action-bar .btn-result-later {
        flex: 1 1 calc(50% - 8px);
        min-width: 0;
        max-width: none;
        text-align: center;
        box-sizing: border-box;
    }

    /* 注意事項 */
    .notice_info {
        padding:10px 8px;
    }

    /* 投保抽好禮 */
    .popup-content-count {
        padding: 40px 30px;
    }
    
    .popup-content-count .count-text {
        font-size: 20px;
    }
    
    .popup-content-count .count-number {
        font-size: 40px;
    }
    
    .popup-content-count .count-btn {
        font-size: 18px;
        padding: 14px 40px;
    }

    /* 抽獎轉盤頁：行動版縮小轉盤，按鈕盡量落在第一視窗 */
    .lottery-wrapper {
        padding: 12px 10px 0;
    }

    .lottery-title-img {
        position: relative;
        top: auto;
        left: auto;
        width: 160px;
        max-width: 45%;
        margin: 0 auto 0;
    }

    .wheel-stage {
        max-width: 260px;
        margin: 8px auto 0;
    }

    .lottery-action {
        margin-top: 12px;
    }

    .btn-lottery {
        font-size: 20px;
        padding: 12px 48px;
        letter-spacing: 3px;
    }

    .result-card {
        padding: 40px 30px;
    }

    .result-title {
        font-size: 36px;
        letter-spacing: 6px;
    }

    .result-prize-name {
        font-size: 24px;
    }

    .result-card {
        max-width: 95%;
        padding: 40px 30px;
    }

    .result-win-title,
    .result-no-prize-title {
        font-size: 20px;
    }

    .result-visual {
        gap: 10px;
    }

    .result-giftbox {
        width: 90px;
    }

    .result-prize-img {
        width: 240px;
    }

    .result-divider::before,
    .result-divider::after {
        max-width: 100px;
    }

    .result-card.event-info {
        padding: 25px 20px;
    }

    .result-card.event-info.result-card-no-prize {
        padding: 25px 20px;
    }

    /* 中獎查詢 */
    .win-section {
        width: 80% !important;
    }

    /* 相關連結 */
    .link {
        width: 92%;
        padding: 30px 0;
        border-radius: 24px;
    }
    
    .link-inner {
        gap: 16px;
    }
    
    .link-inner a img {
        height: 34px;
    }

    .win-form-row,
    .win-result-row {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    .win-label,
    .win-result-label {
        width: auto;
        text-align: left;
        font-size: 16px;
    }

    .win-input,
    .win-result-value {
        width: 100%;
        flex: 0 0 auto !important;     /* 解除 flex 主軸壓縮，讓 height: 44px 生效 */
        height: 44px !important;
        box-sizing: border-box;
    }
    .draw-input {
        flex: 0 0 auto !important;
        height: 44px !important;
        box-sizing: border-box;
    }
    /* 但 .verification-wrapper（row flex）內的 input 必須回到 flex:1 才能填滿剩餘空間 */
    .verification-wrapper > .code-input {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        width: auto !important;
    }

    .win-table {
        font-size: 13px;
    }

    .win-table thead th,
    .win-table tbody td {
        padding: 10px 4px;
    }

    .btn-submit,
    .btn-back {
        font-size: 16px;
        padding: 12px 30px;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .logo {
        margin-right: 10px;
    }

    .menu-list {
        flex-direction: column;
        padding: 0px 10px;
    }

    .content-container {
        flex-direction: column;
        align-items: center;
    }

    .home-left {
        flex: none;
        max-width: 85%;
        margin: 10px auto 20px;
    }

    .home-right {
        width: 100%;
        max-width: 85%;
        flex-direction: column;
        gap: 20px;
        margin: 0 auto;
    }

    .home-people {
        max-width: 100%;
        padding: 0;
        top: 0%;
        left: 0%;
    }

    .home-people img {
        width: 100%;
        margin: 0 auto;
    }

    .event-container {
        margin: 0px auto;
        min-width: 280px;
    }

    .event-container img {
        width: 100%;
    }

    .prize-container {
        max-width: 90%;
        min-width: 100px;
        padding: 10px 0;
        margin: 0px auto 10px;
    }

    .prize_1 {
        content: url('../img/mb/gift_1.png');
        width: 100%;
        min-width: unset;
    }

    .prize_2 {
        content: url('../img/mb/gift_2.png');
        width: 100%;
        min-width: unset;
    }

    .event-info {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        padding: 20px;
        /* height: 50vh; */
        border-radius: 30px;
        margin-bottom: 0;
        display: flex;
        flex-direction: column;
    }

    .link {
        width: 50%;
    }

    .footer {
        width: 100%;
        bottom: -8px;
    }

    .footer-text {
        font-size: 12px;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }

    .footer-text p {
        margin: 0px;
        flex: 1 1 45%;
    }

    /* 左邊小鳥 */
    .bird-left {
        left: 0;                     /* 錨點在對話框左邊緣 */
        bottom: -8%;
        transform: translateX(-60%); /* 自己往左移動一半寬度,中線就對齊邊緣 */
        width: 18%;   
    }

    /* 右邊小鳥 */
    .bird-right {
        right: 2%;                    /* 錨點在對話框右邊緣 */
        bottom: -5%;
        transform: translateX(75%);  /* 自己往右移動一半寬度,中線就對齊邊緣 */
        width: 17%;                  /* 右邊兩隻疊在一起,稍微大一點 */
    }

    /* 左邊小鳥 */
    .bird-left_1 {
        left: 10%;                     /* 錨點在對話框左邊緣 */
        bottom: 10%;
        transform: translateX(-0%); /* 自己往左移動一半寬度,中線就對齊邊緣 */
        width: 20%;   
    }

    /* 右邊小鳥 */
    .bird-right_1 {
        right: 5%;                    /* 錨點在對話框右邊緣 */
        bottom: 10%;
        transform: translateX(0%);  /* 自己往右移動一半寬度,中線就對齊邊緣 */
        width: 25%;                  /* 右邊兩隻疊在一起,稍微大一點 */
    }
    
}

@media (min-width: 541px) and (max-width: 767px) {
    .header {
        width: 100%;
    }

    .logo {
        margin-right: 5px;
    }

    .menu-list {
        flex-direction: column;
        padding: 0px 4px;
        font-size: 14px;
    }

    .content-container {
        flex-direction: column;
        justify-content: center;
    }

    .home-left {
        max-width: 100%;
        margin-bottom: 0px;
        margin-top: 20px;
        /* z-index: 2; */
    }

    .home-people {
        width: 90%;
        min-width: 0;            /* 不可用 400px，平板直向也會撐破 */
        max-width: 100%;
        padding: 0;
        margin: 0 0 5px;
        top: 0%;
        left: 0%;
    }

    .home-right {
        max-width: 100%;
        gap: 20px;
    }

    .event-container {
        display: none;
    }

    .event-info {
        width: 100%;
        max-width: 92%;
        height: auto;
        max-height: 50vh;
        min-height: unset;
        padding: 20px;
        border-radius: 30px;
        margin-bottom: 0;
        display: flex;
        flex-direction: column;
        margin-top: 36px;
    }

    .event-text {
        padding: 0 10px;
    }

    .event-info h2 {
        font-size: 24px;
        text-align: center;
        padding: 0 10px;
        margin-top: 0px;
        margin-bottom: 10px;
    }

    .prize-container {
        max-width: 70%;
        min-width: 100px;
        padding: 0;
        margin: 0 auto 10px;
    }

    .prize-container img {
        /* content: url('../img/mb/gift.png'); */
        width: 100%;
        min-width: unset;
    }

    .footer {
        width: 100%;
        bottom: 0px;
        position: relative;
    }

    body::after {
        height: 100px;           /* 手機草地高度縮小，減少蓋住內容 */
    }

    .post-logo {
        width: 28px;
        margin: -40px 2px 0px 0px;
    }

    .footer-bottom {
        width: 100%;
    }

    .post-logo-text {
        height: 17px;
    }

    .footer-text {
        font-size: 12px;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
    }

    .footer-text p {
        margin: 0px;
    }

    .footer-text p:nth-child(1),
    .footer-text p:nth-child(2) {
        flex: 1 1 35%;
    }

    .footer-text p:nth-child(3),
    .footer-text p:nth-child(4) {
        flex: 1 1 45%;
    }

    .post-logo-color {
        width: 30px;
        right: 0px;
        bottom: 35px;
    }

    .link {
        width: 75%;
    }
}


@media (max-width: 540px) {
    body {
        padding-bottom: 80px;   /* 草地 + footer 預留，避免內容被蓋 */
    }

    .header {
        width: 100%;
        max-width: 100%;
        border-radius: 0px 0px 40px 40px;
        padding: 8px 8px 10px 18px; /* 左側加大，logo 往右一點 */
        box-sizing: border-box;
        overflow: visible;
        justify-content: flex-start;
        gap: 4px;
    }

    .menu {
        flex: 1;
        min-width: 0;
        justify-content: space-evenly;
        gap: 0;
    }

    .menu-list {
        flex: 0 1 auto;
        min-width: 0;
        flex-direction: column;
        padding: 0 3px;
        font-size: 11px;
        letter-spacing: 0;
        white-space: nowrap;
    }

    .menu-list:last-child {
        flex-shrink: 0;
    }

    .menu-icon {
        width: 18px;
        margin-right: 0;
        margin-bottom: 2px;
    }

    .logo {
        width: auto;
        height: 40px;              /* 放大 logo，手機版更明顯 */
        min-width: 72px;
        margin-right: 0;
        margin-left: 4px;
        flex-shrink: 0;
    }

    .logo img {
        height: 100%;
        width: auto;
        max-width: none;
        object-fit: contain;
        display: block;
    }

    .menu-divider {
        height: 28px;
        margin: 0 4px;
        flex-shrink: 0;
    }

    .content-container {
        flex-direction: column;
        justify-content: flex-start;
        height: auto;            /* 拿掉 75vh，避免 Galaxy 等機型裁切 */
        width: 100%;
        max-width: 100%;
    }

    .home-left {
        flex: none;
        max-width: 100%;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 0px;
        overflow: hidden;
    }

    .home-right {
        margin-top: -18px;
    }

    /* Galaxy S9+ ≈360px：不可設 min-width > 螢幕寬 */
    .home-people {
        width: 78%;
        min-width: 0;
        max-width: 320px;
        padding: 0;
        margin: 0 auto;
        top: 0%;
        left: 0%;
    }
    
    .home-people img {
        width: 100%;
        min-width: unset;
        max-width: 100%;
        height: auto;
    }

    .home-right {
        max-width: 100%;
        gap: 20px;
        width: 100%;
        padding: 0 16px;           /* 下方白框區塊左右留白 */
        box-sizing: border-box;
    }

    .event-container {
        display: none;
    }

    .event-info {
        width: 100%;
        max-width: 100%;
        height: auto;
        max-height: 52vh;
        margin-bottom: 0;
        margin-top: 15px;
        padding: 20px 16px;
        box-sizing: border-box;
        border-radius: 22px;
    }

    .event-text {
        padding: 0 10px;
    }

    .event-info h2 {
        font-size: 20px;
    }

    .event-text p {
        font-size: 14px;
    }

    .flex-list {
        font-size: 14px;
    }

    .prize-container {
        max-width: 100%;
        margin: 0 auto 10px;
        padding: 10px 0;
    }

    .prize-container img {
        width: 100%;
        min-width: unset;
    }

    .content-card {
        padding: 24px 20px;
        border-radius: 20px;
    }

    .title-main { font-size: 32px; }
    .title-sub  { font-size: 22px; }

    /* 隱藏中間的紅色分隔線 */
    .info-list::before {
        display: none;
    }

    .info-list {
        padding-left: 0;
    }

    /* 標籤改成行內顯示在內容上方 */
    .info-row {
        flex-direction: column;
        gap: 10px;
    }

    .info-label {
        width: auto;
        align-self: flex-start;  /* 靠左對齊 */
        padding: 6px 20px;
        font-size: 16px;
    }

    .info-content {
        font-size: 16px;
        padding-top: 0;
    }

    .btn-join {
        font-size: 22px;
        padding: 14px 50px;
    }

    .draw-btn {
        width: 80%;
    }

    .footer {
        width: 100%;
        bottom: 0px;
        position: relative;
    }

    body::after {
        height: 100px;           /* 手機草地高度縮小，減少蓋住內容 */
    }

    .post-logo {
        width: 28px;
        margin: -20px 2px 0px 0px;
    }

    .footer-bottom {
        width: 100%;
    }

    .post-logo-text {
        height: 17px;
    }

    .footer-text {
        font-size: 8px;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
        padding-bottom: 5px;
    }

    .footer-text p {
        margin: 0px;
    }

    .footer-text p:nth-child(1),
    .footer-text p:nth-child(2) {
        flex: 1 1 30%;
    }

    .footer-text p:nth-child(3),
    .footer-text p:nth-child(4) {
        flex: 1 1 45%;
    }

    .post-logo-color {
        width: 30px;
        right: 0px;
        bottom: 10px;
    }

    .close-btn {
        width: 24px;
        height: 24px;
    }

    .lottery-wrapper {
        padding: 10px 8px 0;
    }

    .lottery-title-img {
        width: 140px;
        max-width: 40%;
    }

    .wheel-stage {
        max-width: 220px;
        margin: 6px auto 0;
    }

    .lottery-action {
        margin-top: 10px;
    }

    .btn-lottery {
        font-size: 18px;
        padding: 12px 40px;
        letter-spacing: 3px;
    }

    .lottery-result-wrapper {
        padding: 30px 15px 0;
    }

    .result-card {
        padding: 30px 20px;
        border-radius: 20px;
    }

    .result-icon {
        font-size: 60px;
    }

    .result-title {
        font-size: 30px;
        letter-spacing: 4px;
    }

    .result-subtitle {
        font-size: 16px;
    }

    .result-prize-name {
        font-size: 22px;
    }

    .result-note {
        font-size: 14px;
    }

    .result-actions {
        flex-direction: column;
    }

    /* 結果頁操作列：第1行剩餘次數，第2行兩個按鈕並排 */
    .result-action-bar {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 10px;
        margin: 8px 0 6px;
    }

    .result-remain-hint {
        flex: 0 0 100%;
        width: 100%;
        font-size: 14px;
        text-align: center;
        white-space: normal;
        margin: 0 0 2px;
    }

    .result-action-bar .btn-result,
    .result-action-bar .btn-result-later {
        flex: 1 1 calc(50% - 8px);
        min-width: 0;
        max-width: none;
        padding: 10px 12px;
        font-size: 15px;
        box-sizing: border-box;
        text-align: center;
    }

    body.page-result-ready .home-people {
        max-width: 240px;
        width: 55%;
    }

    body.page-result-ready .result-card.event-info {
        padding: 14px 14px 18px;
        margin-top: -10px;
    }

    body.page-result-ready .result-no-prize-img {
        width: 40%;
        max-width: 160px;
        margin-bottom: 4px;
    }

    body.page-result-ready .result-prize-img {
        width: 140px;
        max-width: 45%;
    }

    body.page-result-ready .result-giftbox {
        width: 40px;
    }

    body.page-result-ready .result-notice {
        margin: 6px 8px 0;
        font-size: 13px;
    }

    .btn-result {
        font-size: 16px;
        padding: 12px 30px;
    }

    .result-card {
        padding: 30px 20px;
        border-radius: 24px;
    }

    .result-win-title {
        font-size: 18px;
        margin-bottom: 20px;
        letter-spacing: 0;
    }

    .result-no-prize-title {
        font-size: 20px;
    }

    .result-visual {
        gap: 6px;
    }

    .result-giftbox {
        width: 60px;
    }

    .result-prize-img {
        width: 180px;
    }

    .result-divider-text {
        font-size: 16px;
        padding: 0 12px;
    }

    .result-divider::before,
    .result-divider::after {
        max-width: 60px;
    }

    .result-notice {
        font-size: 14px;
    }

    .result-notice-list {
        padding-left: 20px;
    }

    .result-actions-win {
        flex-direction: column-reverse;
    }

    .btn-result {
        font-size: 16px;
        padding: 12px 30px;
        width: 100%;
        max-width: 280px;
    }

    .btn-result-primary {
        min-width: auto;
    }

    .btn-result-download {
        padding: 10px;
        font-size: 14px;
        margin-bottom: 10px;
    }

    .result-card-no-prize {
        padding: 40px 20px 30px;
    }

    .result-no-prize-img {
        width: 60%;
        max-width: 240px;
    }

    .result-card.event-info {
        padding: 20px 16px;
    }

    .result-card.event-info.result-card-no-prize {
        padding: 20px 16px;
    }

    .result-card.event-info .result-actions-win .btn-result-primary {
        min-width: 0;
        width: 100%;
        max-width: 280px;
    }

    .result-notice{
        margin: 0 20px 30px;
    }

    /* 相關連結 */
    .link {
        width: 100%;
        padding: 24px 0;
        border-radius: 20px;
    }
    
    .link-inner {
        gap: 14px;
    }
    
    .link-inner a img {
        height: 40px;
    }

    /* 中獎查詢 */
    .win-form,
    .win-result-info {
        margin-top: 15px;
        gap: 16px;
    }

    .win-table {
        font-size: 12px;
    }

    /* 左邊小鳥 */
    .bird-left_1 {
        left: 6%;                     /* 錨點在對話框左邊緣 */
        bottom: 10%;
        transform: translateX(-0%); /* 自己往左移動一半寬度,中線就對齊邊緣 */
        width: 25%;   
    }

    /* 右邊小鳥 */
    .bird-right_1 {
        right: 2%;                    /* 錨點在對話框右邊緣 */
        bottom: 10%;
        transform: translateX(0%);  /* 自己往右移動一半寬度,中線就對齊邊緣 */
        width: 28%;                  /* 右邊兩隻疊在一起,稍微大一點 */
    }
}

@media (max-width: 420px) {
    
    .event-info {
        height: auto;
        max-height: 50vh;
        padding: 18px 12px;
    }

    .home-right {
        margin-top: -5px;
        padding: 0 6px;
    }
    .home-people {
        width: 82%;
        min-width: 0;
        max-width: 300px;
        margin: 16px auto 0;
        top: 0%;
        left: 0%;
    }

    .link {
        width: 92%;
        max-width: 100%;
    }

    .link-inner a img {
        height: 35px;
        max-width: 100%;
    }

    .btn-join {
        font-size: 18px;
        padding: 12px 36px;
        letter-spacing: 2px;
    }

    .wheel-stage {
        max-width: 200px;
    }

    .lottery-title-img {
        width: 120px;
    }

    .btn-lottery {
        font-size: 16px;
        padding: 10px 36px;
        letter-spacing: 2px;
    }
}

@media (max-width: 375px) {

    .home-people {
        width: 80%;
        min-width: 0;
        max-width: 280px;
        padding: 8px 0 0;
        margin: 0 auto;
        top: 0;
        left: 0;
    }
    .home-left {
        margin-top: 8px;
    }

    .home-right {
        margin-top: -8px;
    }

    .event-info {
        height: auto;
        max-height: 48vh;
        border-radius: 20px;
        padding: 16px 14px;
    }

    .event-text {
        padding: 0 4px;
    }

    .event-info h2 {
        font-size: 18px;
        padding: 0 2px;
    }

    .link {
        width: 92%;
    }

    .link-inner a img {
        height: 30px;
    }

    .link-inner {
        gap: 8px;
    }

    .menu-list {
        font-size: 10px;
        padding: 0 2px;
    }

    .menu-icon {
        width: 16px;
    }

    .menu-divider {
        margin: 0 3px;
    }

    .logo {
        height: 36px;
        min-width: 64px;
        margin-right: 0;
        margin-left: 4px;
    }

}

@media (max-width: 360px) {
    /* Galaxy S9+ 等 360 寬裝置專用微調 */
    .header {
        padding: 8px 6px 10px 16px; /* logo 往右一點 */
        gap: 3px;
    }

    .menu {
        justify-content: space-evenly;
    }

    .menu-list {
        font-size: 10px;
        padding: 0 2px;
    }

    .menu-divider {
        margin: 0 3px;
    }

    .logo {
        height: 36px;
        min-width: 64px;
        margin-right: 0;
        margin-left: 4px;
    }

    .home-right {
        padding: 0 14px;
    }

    .event-info-wrapper {
        padding: 0 14px;
    }

    .home-people {
        width: 76%;
        max-width: 260px;
        min-width: 0;
    }

    .event-info {
        padding: 14px 12px;
        max-height: 46vh;
    }

    .link {
        width: 94%;
    }

    .info-label {
        font-size: 14px;
        padding: 5px 14px;
    }

    .info-content {
        font-size: 14px;
    }
}

@media (max-width: 344px) {

    .home-people {
        min-width: 0;
        max-width: 240px;
        width: 74%;
        margin: 0 auto;
        top: 0%;
        left: 0%;
    }

    .event-info {
        height: auto;
        max-height: 55vh;
    }
}