/*
 * 115年推廣達人召集令 － 套版補充樣式
 *
 * 設計師提供的 global*.css / index*.css 一律不修改，
 * 套版所需的調整全部集中在這一支，之後設計稿更新才不會互相覆蓋。
 *
 * 內容只有兩類：
 *   1. 把設計稿的靜態 div 換成 a / input / button 之後，抹平瀏覽器預設樣式
 *   2. 設計稿沒有畫到的狀態（錯誤訊息、空清單、縮圖）
 */

/* ===== 連結：沿用設計稿 class，但不要底線與藍字 ===== */
a.btn-upload,
a.btn-upload2,
a.sitemenu,
a.sitemenu3,
a.wrapper,
a.frame4,
a.frame6,
a.frame7,
a.frame16,
a.frame17,
a.frame27,
a.frame28 {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

/* 目前所在頁的選單項目：設計稿給了綠底，文字要白的才看得清楚。
   .sitemenu 在首頁、.sitemenu3 在其餘頁，兩者是同一個東西。 */
a.sitemenu,
a.sitemenu3,
a.sitemenu .div2,
a.sitemenu .b,
a.sitemenu3 .div2,
a.sitemenu3 .b {
    color: var(--color-white);
}

.ev-link {
    text-decoration: none;
    color: inherit;
}

/* 手機版頁首選單的開關鈕（漢堡圖示）。
 * 桌機一律隱藏 —— 選單本來就整列攤開，多一顆按鈕只是干擾；
 * ≤768px 的媒體查詢才 display:flex。 */
.ev-nav-toggle {
    display: none;
    box-sizing: border-box;
    width: 44px;            /* 44px 是可點區域的實務下限，再小手指按不準 */
    height: 44px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 0;
    border: 1px solid var(--color-forestgreen-200, #2a8527);
    border-radius: var(--br-8, 8px);
    background: #fff;
    cursor: pointer;
}
.ev-nav-toggle span {
    display: block;
    width: 22px;
    height: 2px;
    border-radius: 2px;
    background: var(--color-forestgreen-200, #2a8527);
}

/* ===== 表單元素：填滿設計稿的外框，不自帶邊框背景 ===== */
.ev-input {
    flex: 1;
    width: 100%;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    font: inherit;
    color: inherit;
    padding: 0;
}

.ev-input::placeholder {
    color: #9aa0a6;
}

/* 檔案選擇：設計稿是「選擇檔案… ／ 未選擇任何檔案」兩塊，
   實際用原生 input file，只把它塞進同一個外框 */
.ev-file {
    flex: 1;
    font: inherit;
    color: inherit;
}

/* 僅供檢視（審核中／已通過）：欄位加了 disabled，但設計稿沒有停用狀態，
 * 不補樣式的話外觀與可編輯時一模一樣，使用者要點下去才發現打不了字。
 * 這裡把輸入框外框改灰底、文字轉灰，讓「不能改」在視覺上先成立。 */
.ev-locked .frame8,
.ev-locked .frame11,
.ev-locked .frame21 {
    background-color: #f2f2f2;
}

.ev-locked .ev-input,
.ev-locked .ev-file {
    color: #6b6b6b;
    cursor: not-allowed;
}

/* WebKit 會對 disabled 欄位再疊一層淡化，字會糊到看不清楚，
 * 這裡把顏色鎖回上面指定的灰。 */
.ev-locked .ev-input:disabled,
.ev-locked .ev-file:disabled {
    opacity: 1;
    -webkit-text-fill-color: #6b6b6b;
}

/* 送出／取消：button 沿用設計稿外觀 */
button.frame27,
button.frame28 {
    border: 0;
    font: inherit;
    cursor: pointer;
}

/* 主要按鈕是深綠底，文字必須是白的。
   不能寫 color:inherit —— 那會去繼承外層的深色，把 .frame28 自己的白色蓋掉；
   button 也有瀏覽器預設的 buttontext 顏色要壓過去，所以連內層的 b 一起指定。 */
button.frame28,
a.frame28,
button.frame28 .div2,
a.frame28 .div2 {
    color: var(--color-white);
}

/* ===== 設計稿未涵蓋的狀態 ===== */
.ev-msg {
    align-self: stretch;
    border-radius: 8px;
    padding: 12px 16px;
    margin: 8px 0;
    font-size: 15px;
    line-height: 1.6;
}

.ev-msg.info    { background: #e8f5e9; color: #1b5e20; }
.ev-msg.success { background: #e8f5e9; color: #1b5e20; }
.ev-msg.warning { background: #fff8e1; color: #8d6e00; }
.ev-msg.error   { background: #fdecea; color: #b3261e; }

.ev-empty {
    padding: 24px 0;
    text-align: center;
    color: #777;
}

/* 問卷填寫完成提示（eForm 導回時帶 Fill=Y）改用 alert 顯示，
 * 版面上不再有對應元素，樣式已移除。 */

/* 已上傳檔案清單（設計稿未提供） */
.ev-files {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 8px 0 16px;
    padding: 0;
    list-style: none;
}

.ev-files li {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 140px;
    font-size: 13px;
    word-break: break-all;
}

.ev-files img {
    display: block;
    width: 140px;
    height: 105px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid #ddd;
}

/* 刪除鈕：設計稿未提供。
 * 做成整格寬的實體按鈕，而不是縮圖角落的小 ✕ 或一行紅字連結——
 * 縮圖只有 140px 寬，小目標在手機上難以點中，
 * 也讓使用者一眼看不出哪裡可以刪除。 */
.ev-files .ev-del-btn {
    display: block;
    box-sizing: border-box;
    width: 100%;
    padding: 6px 4px;
    border: 1px solid #b3261e;
    border-radius: 8px;
    background: #fff;
    color: #b3261e;
    font: inherit;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

.ev-files .ev-del-btn:hover,
.ev-files .ev-del-btn:focus {
    background: #b3261e;
    color: #fff;
}

/* 登入流程三頁沿用首頁版面，僅需一個置中的窄卡片 */
.ev-card {
    box-sizing: border-box;
    width: 100%;
    max-width: 520px;
    margin: 0 auto;
    padding: 32px;
    border-radius: 12px;
    background: #fff;
}

.ev-field {
    margin-bottom: 20px;
}

.ev-field label {
    display: block;
    margin-bottom: 8px;
    font-weight: 700;
}

.ev-field .req {
    color: #b3261e;
}

/* 登入流程的說明文字。
 * .info-bullets 在設計稿是給「注意事項」小字用的（13px 灰字），
 * 登入頁拿它裝主要說明就顯得太小，這裡只在登入相關頁面放大，
 * 上傳頁真正的注意事項維持原本字級。 */
.ev-page-form .info-bullets {
    font-size: var(--fs-15);
    color: var(--color-darkolivegreen);
}

/* 我的上傳紀錄：整張表字級偏小，逐層放大。
 * 設計稿是 14px 起跳，狀態標籤 12px、不通過原因與操作按鈕 13px。
 *
 * 這裡刻意寫死 px 而不用 --fs-* 變數：my_list 載入的是 global3.css，
 * 裡面只定義了 12/13/14/20/32，寫 var(--fs-16) 會取不到值、整條宣告失效。
 *
 * 欄寬是設計稿寫死的固定值，放大字級只影響行高與換行，不會撐破版面。 */
.ev-page-list .main-container {
    font-size: 16px;
}

.ev-page-list .frame4,
.ev-page-list .frame14 {           /* 審核狀態標籤 */
    font-size: 14px;
}

.ev-page-list .div19,
.ev-page-list .div29,              /* 不通過原因 */
.ev-page-list .frame6,
.ev-page-list .frame16 {           /* 操作按鈕 */
    font-size: 15px;
}

/* 推廣紀錄上傳頁：表單區字級偏小。
 * 使用者資料卡繼承 .main-container 的 18px 尚可，但表單本體是 15px、
 * 輸入框 14px、簽到表說明與注意事項 13px，填寫時很吃力。
 *
 * 同樣寫死 px：global2.css 沒有 --fs-17，用 var() 取不到值會讓整條宣告失效。 */
.ev-page-upload .form-card {
    font-size: 17px;
}

.ev-page-upload .frame8,
.ev-page-upload .frame11 {         /* 輸入框（日期、時間、場合、人數） */
    font-size: 16px;
}

.ev-page-upload .div23,            /* 簽到表說明 */
.ev-page-upload .info-bullets {    /* 注意事項 */
    font-size: 15px;
}

/* 簽到表改必填後標題要放紅色星號，但設計稿的 .frame23 沒設 gap
 * （原本只有標題一個元素），星號會黏在字上。 */
.ev-page-upload .frame23 {
    gap: var(--gap-4);
}

.ev-page-upload .ev-files li {     /* 已上傳檔案清單 */
    font-size: 14px;
}

/* 使用者資料卡的累計統計原本是一整段單行文字，改成分行條列後
 * 三行會擠在一起，這裡把行距拉開。 */
.ev-page-upload .div11 {
    line-height: 1.8;
}

/* 獎品寄送說明：附註性質，與上方統計拉開距離並降一級字。
 * 用紅字提醒，色碼沿用頁面其他警示文字（.ev-msg.error、刪除鈕）。 */
.ev-page-upload .ev-gift-note {
    margin-top: 10px;
    font-size: 15px;
    color: #b3261e;
}

.ev-box {
    height: 44px;
    border-radius: 8px;
    background: #fff;
    border: 1px solid #d0d0d0;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    padding: 0 12px;
}


/* ===== 首頁文字公告輪播 =====
 *
 * 設計稿的 .div7 是 position:absolute 且寫死 left:458px / width:420px，
 * 多則公告會全部疊在同一個位置糊成一團。這裡改為置中定位
 * （458 + 420/2 ≈ 1400 的中央，與設計稿視覺一致），一次只顯示一則、淡入淡出。
 *
 * 框（.frame-div）的尺寸不因內容而變 —— 那是版面的一部分，
 * 不能因為公告長就把它撐開。所以公告一律 white-space:nowrap 不折行，
 * 裝不下時改用跑馬燈由右往左捲，框的尺寸與位置完全不受內容長度影響。
 *
 * 位置則是疊在 bg-main-top.png 上：那張圖是公告的圓角外框
 * （上緣一條綠帶、中間留白），文字本來就該落在它中間的白區裡。
 * 圖在 index1.css 是 [src*="bg-main-top"] 的 absolute 定位 ——
 * top:1rem、水平置中、固定 100px 高，寬度上限 90vw。
 *
 * 這裡用 transform 把框搬上去對齊，而不是把它也改成 absolute：
 * 改 absolute 的話它會退出排版流，原本佔的 76px 消失，
 * 底下所有內容跟著上移 76px，反而爬到圖上面去。
 * transform 不影響排版流，圖以下的版面一律維持原樣。
 */
.ev-page-index .frame-div {
    align-self: center;         /* 與圖一樣水平置中，不再撐滿整個內容區 */
    width: min(600px, 82vw);    /* 圖寬的 92%，兩端讓開圓角 */
    transform: translateY(-64px);
    overflow: hidden;           /* 跑馬燈跑出框外的部分要裁掉 */

    /* 圖的寬度會縮但高度固定，白區在窄螢幕反而更擠；
       上限 20px 是設計稿字級，容器夠寬時圖不再放大，字級也就停在這裡。 */
    font-size: clamp(13px, 1.45vw, 20px);
}

.ev-page-index .frame-div .ev-notice {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: auto;
    max-width: 90%;
    height: auto;
    text-align: center;
    white-space: nowrap;        /* 不折行：裝不下交給跑馬燈，框才不會被撐高 */
    opacity: 0;
    visibility: hidden;
    transition: opacity .4s ease;
}

.ev-page-index .frame-div .ev-notice.is-on {
    opacity: 1;
    visibility: visible;
}

/* 裝不下的那一則才捲動：起訖位置與時間由 event.js 依實際文字寬度算好、
 * 寫進 CSS 變數，所以不論公告多長，捲動速度都是固定的每秒 50px。
 * 寫死 duration 的話，長公告會跑得比短公告快，長的反而更難讀。 */
.ev-page-index .frame-div .ev-notice.is-marquee {
    left: 0;
    max-width: none;
    text-align: left;
    transform: translateY(-50%) translateX(var(--ev-mq-start, 100%));
}

/* 只有正在顯示的那一則會跑 —— 否則被隱藏的公告也在背景空轉，
 * 輪回來時會從半途接續，看起來像漏字。 */
.ev-page-index .frame-div .ev-notice.is-marquee.is-on {
    animation: ev-marquee var(--ev-mq-dur, 15s) linear infinite;
}

@keyframes ev-marquee {
    from { transform: translateY(-50%) translateX(var(--ev-mq-start, 100%)); }
    to   { transform: translateY(-50%) translateX(var(--ev-mq-end, -100%)); }
}


/* ============================================================
 * RWD
 *
 * 設計稿是 1400px 固定寬、完全沒有 media query，這裡全部用覆寫補上，
 * 不動 global*.css / index*.css，設計稿更新時不會衝突。
 *
 * 每頁 body 掛 ev-page-* 讓選擇器有作用域 —— 三頁的 class 名稱重複
 * （div15、div19…），不限定範圍會誤傷其他頁。
 * ============================================================ */

/* 圖片一律不撐破容器：設計稿的 topbanner 等圖是照 1400px 出的 */
img {
    max-width: 100%;
    height: auto;
}

/* ===== ≤1440px：固定寬容器改為滿版 ===== */
@media (max-width: 1440px) {
    .frame-parent,
    .group-parent,
    .vector-group,
    .div6,
    .logo-parent {
        width: 100%;
        max-width: 1400px;
        box-sizing: border-box;
    }

    .frame-parent,
    .vector-group {
        padding-left: 16px;
        padding-right: 16px;
    }
}

/* ===== ≤1024px：兩欄改單欄 ===== */
@media (max-width: 1024px) {
    /* 首頁：測驗／召集令兩張卡 */
    .ev-page-index .activities {
        flex-direction: column;
    }

    /* 上傳頁：日期／時間、照片／簽到表
       align-items 一起改 stretch —— 設計稿橫排時是 flex-start，
       直排之後那會讓每一欄縮成內容寬，裡面的檔案選擇框反而撐出容器外。 */
    .ev-page-upload .frame5,
    .ev-page-upload .frame-div,
    .ev-page-form .frame5 {
        flex-direction: column;
        align-items: stretch;
    }

    /* flex 子項的 min-width 預設是 auto，不放開的話「不小於內容寬」，
       檔案選擇框（原生 input file 有固有寬度）就會頂破版面 */
    .ev-page-upload .frame6,
    .ev-page-upload .frame22,
    .ev-page-upload .frame20,
    .ev-page-upload .frame21,
    .ev-page-upload .ev-file {
        min-width: 0;
    }

    .ev-page-upload .frame21 {
        box-sizing: border-box;
        width: 100%;
    }

    /* 設計稿寫死的欄寬放掉 */
    .div7,
    .frame4 {
        width: auto;
        max-width: 100%;
    }
}

/* ===== ≤768px：手機 ===== */
@media (max-width: 768px) {
    /* 頁首：選單收進右上角的漢堡圖示，點開才展開成一整列。
       設計稿給 .frame-group 的 flex-shrink:0 會讓它一直維持 720px 的
       max-content 寬度，放著不管會被外層 .div 的 overflow:hidden 切掉
       —— 手機上「推廣達人召集令」整個看不到。所以除了預設收起，
       也把 flex-shrink 與 min-width 一起放開，展開後才不會再溢出。 */
    .ev-nav-toggle {
        display: flex;
    }
    .frame-parent {
        flex-wrap: wrap;
    }
    .frame-group {
        display: none;          /* 預設收起，event.js 加上 is-open 才展開 */
        flex-basis: 100%;       /* 展開時自成一列，不跟 logo 擠在同一行 */
        box-sizing: border-box;
        flex-direction: column;
        align-items: stretch;
        flex-shrink: 1;
        min-width: 0;
        gap: 8px;
        margin-top: 12px;
        padding: 8px;
        border-radius: var(--br-8, 8px);
        background: rgba(255, 255, 255, .95);
        box-shadow: 0 4px 12px rgba(0, 0, 0, .08);
    }
    .frame-group.is-open {
        display: flex;
    }

    /* 包裝層在設計稿是 column + flex-start，展開後要讓每一項撐滿才好點 */
    .frame-group > div {
        width: 100%;
        align-items: stretch;
    }
    .frame-group a {
        justify-content: center;
        padding: 10px 16px;
        border-radius: var(--br-8, 8px);
    }
    /* 非當前頁的項目在設計稿沒有底色，展開後給淡底才看得出是可點的 */
    .frame-group a.wrapper {
        background: #f2f7f2;
    }

    /* 活動時間：設計稿是「圖示＋標題」與日期並排，手機一行擠不下，
       改成上下兩排（兩者本來就置中，直排後仍維持置中） */
    .ev-page-index .group {
        flex-direction: column;
        gap: 4px;
    }

    /* 首頁獎項三欄改直排；分隔線在直排時沒有意義 */
    .ev-page-index .frame20 {
        flex-direction: column;
    }
    .ev-page-index .frame-item {
        display: none;
    }

    /* ---- 上傳頁：使用者資料卡 ----
       設計稿是「姓名／單位／手機／Email 四欄橫排 ＋ 右側按鈕」，
       手機一行放不下；Email 又是沒有空白可斷的長字串，
       撐開之後整張卡連同右側按鈕一起被推出視窗外。 */
    .ev-page-upload .user-summary-card {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
    }

    .ev-page-upload .frame3 {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    .ev-page-upload .frame2 {
        min-width: 0;
    }

    .ev-page-upload .email1234yahoocomtw {
        overflow-wrap: anywhere;   /* Email 沒有空白可斷，只能允許任意位置斷行 */
    }

    .ev-page-upload .frame4 {      /* 「查看已上傳的紀錄」改成整列按鈕 */
        justify-content: center;
    }

    /* 按鈕列改直排、各自撐滿 */
    .frame26 {
        flex-direction: column;
        gap: 12px;
    }
    .frame26 > * {
        width: 100%;
        box-sizing: border-box;
        justify-content: center;
    }

    /* ---- 我的上傳紀錄：表格改成卡片 ---- */
    .ev-page-list .frame2 {          /* 表頭在卡片模式沒有用 */
        display: none;
    }

    .ev-page-list .frame3 {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        padding: 16px;
    }

    /* 每個欄位自己帶標籤，取代被隱藏的表頭 */
    .ev-page-list .frame3 > div::before {
        display: block;
        margin-bottom: 2px;
        font-size: 13px;
        font-weight: 700;
        opacity: .7;
    }
    .ev-page-list .div15::before { content: "推廣日期"; }
    .ev-page-list .div16::before { content: "推廣場合"; }
    .ev-page-list .div17::before { content: "推廣人數"; }
    .ev-page-list .div18::before { content: "審核時間"; }
    .ev-page-list .div19::before,
    .ev-page-list .div29::before { content: "不通過原因"; }
    .ev-page-list .frame4::before,
    .ev-page-list .frame14::before { content: "審核狀態"; }

    .ev-page-list .frame3 > div {
        width: auto;
        text-align: left;
    }

    /* 操作按鈕撐滿好點 */
    .ev-page-list .frame6,
    .ev-page-list .frame16 {
        width: 100%;
    }
    .ev-page-list .frame7,
    .ev-page-list .frame17 {
        width: 100%;
        box-sizing: border-box;
        justify-content: center;
    }

    /* ---- 首頁得獎名單：兩欄維持，但縮字避免撐破 ---- */
    .ev-page-index .winner-table {
        font-size: 14px;
    }

    /* 已上傳檔案縮圖在手機排兩欄 */
    .ev-files li {
        width: calc(50% - 6px);
    }
    .ev-files img {
        width: 100%;
        height: auto;
        aspect-ratio: 4 / 3;
    }
}

/* ===== ≤480px：小螢幕再收一次 ===== */
@media (max-width: 480px) {
    .ev-page-index .winner-table {
        font-size: 13px;
    }

    .ev-files li {
        width: 100%;
    }
}