@charset "UTF-8";
/*
 * 本檔只放「設計稿 global.css 沒有、但系統必要」的樣式。
 * global.css 為設計師交付的共用樣式庫，請勿直接修改，避免下次改版覆蓋時衝突。
 */

/* ------------------------------------------------------------------
 * 頁面訊息區（取代舊版 JavaScript alert）
 * ---------------------------------------------------------------- */
.msg {
    /* max-width: 1200px; */
    margin: 16px auto;
    padding: 14px 20px;
    border-left: 6px solid;
    border-radius: 4px;
    font-size: 1em;
    line-height: 1.7;
}

.msg p {
    margin: 0;
}

.msg--info {
    border-color: #2d6849;
    background-color: #eef7f1;
    color: #1c4530;
}

.msg--success {
    border-color: #2d6849;
    background-color: #eff6f2;
    color: #2d6849;
}

.msg--warn {
    border-color: #d98200;
    background-color: #fdf5e8;
    color: #8a5300;
}

.msg--error {
    border-color: #c62828;
    background-color: #fdeded;
    color: #8e1a1a;
}

/* ------------------------------------------------------------------
 * 欄位層級錯誤訊息
 * ---------------------------------------------------------------- */
.field-error {
    display: block;
    margin-top: 6px;
    color: #c62828;
    font-size: .9em;
    line-height: 1.5;
}

.field-error[hidden] {
    display: none;
}

input[aria-invalid="true"],
textarea[aria-invalid="true"],
select[aria-invalid="true"] {
    border-color: #c62828 !important;
    background-color: #fdeded;
}

/* ------------------------------------------------------------------
 * 字數計數器
 * ---------------------------------------------------------------- */
.char-counter {
    display: block;
    margin-top: 4px;
    text-align: right;
    color: #666;
    font-size: .85em;
}

.char-counter.is-over {
    color: #c62828;
    font-weight: bold;
}

/* ------------------------------------------------------------------
 * 頁首公告（DB 參數驅動，逾期自動不顯示）
 * ---------------------------------------------------------------- */
.announcement {
    max-width: 1200px;
    margin: 16px auto;
    padding: 14px 20px;
    background-color: #fff8e1;
    border: 1px solid #f0d58c;
    border-radius: 4px;
    color: #8a5300;
    font-weight: bold;
    line-height: 1.7;
}

/* ------------------------------------------------------------------
 * 無障礙：鍵盤焦點與跳離連結
 * ---------------------------------------------------------------- */
.accesskey a:focus {
    outline: 3px dashed #38adeb;
    outline-offset: 2px;
}

.simple-text.accesskey {
    /* :::  定位點本身不佔版面，但必須保留給讀屏軟體 */
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
    white-space: nowrap;
}

.simple-text.accesskey a:focus {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
}

/* ------------------------------------------------------------------
 * 頁尾
 * ---------------------------------------------------------------- */
.footer {
    padding: 24px 20px;
    text-align: center;
    color: #666;
    font-size: .9em;
    line-height: 1.7;
}

@media screen and (max-width: 768px) {
    .msg,
    .announcement {
        margin: 12px 0px;
        padding: 12px 16px;
    }
}

/* ------------------------------------------------------------------
 * 按鈕列的高度統一
 *
 * .btn-border 裡同時會出現兩種元素：
 *     <a>                    純導覽（不同意、回上一頁、回案件查詢畫面…）
 *     <input type="submit">  asp:Button render 出來的（同意、確認、寄出…）
 *
 * 兩者在 global.css 吃到的 line-height 不一樣：
 *   .btn-border a 最後被設成 line-height: inherit，實際繼承 body 的 1.7 !important；
 *   而 input 是表單控制項，瀏覽器的預設計算方式又不同。
 * 結果就是同一列的兩顆按鈕高度對不齊。
 *
 * 這裡把兩者的盒模型強制統一，並用 min-height 保證等高
 * （44px 同時滿足 WCAG 的最小觸控目標尺寸）。
 *
 * 註：不改用 <button runat="server">，因為 WebForms 的 HtmlButton 會輸出
 *     onclick="__doPostBack(...)" 這種 inline script，與 CSP 目標衝突。
 * ---------------------------------------------------------------- */
.btn-border a,
.btn-border button,
.btn-border input[type="submit"],
.btn-border input[type="button"] {
    box-sizing: border-box;
    min-height: 44px;
    line-height: 1.8;
    font-size: .9em;
    vertical-align: middle;
}

/* input 無法使用 ::after，箭頭改以 background-image 呈現，其餘外觀比照 .btn-border a */
.btn-border input[type="submit"],
.btn-border input[type="button"] {
    position: relative;
    display: inline-block;
    margin: 3px;
    padding: 5px 50px !important;
    border: 3px solid #2d6849;
    border-radius: 50px;
    background-color: transparent;
    background-image: url(../images/svg/arrow_icon.svg);
    background-repeat: no-repeat;
    background-position: right 20px center;
    background-size: 12px;
    color: #2d6849;
    font-family: inherit;
    font-weight: bold;
    text-align: center;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    transition: 300ms;
}

.btn-border input[type="submit"]:hover,
.btn-border input[type="button"]:hover {
    transform: translateY(-5px);
    background-color: #2d6849;
    color: #ffffff;
    filter: none;
}

@media screen and (max-width: 768px) {
    .btn-border input[type="submit"],
    .btn-border input[type="button"] {
        padding: 5px 40px 5px 20px !important;
    }
}

/* 驗證碼圖片 */
.captcha-image {
    vertical-align: middle;
}

/* ------------------------------------------------------------------
 * 視覺上隱藏但保留在無障礙樹中（供讀屏軟體與鍵盤操作）。
 * 用於以自訂按鈕代為觸發的 file input 與其伴隨的送出鈕。
 * 不能用 display:none / visibility:hidden，否則鍵盤使用者無法操作。
 * ---------------------------------------------------------------- */
.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* 附件刪除鈕 */
.btn-del {
    min-width: 32px;
    padding: 2px 10px !important;
    border: 1px solid #c62828;
    border-radius: 4px;
    background: transparent;
    color: #c62828;
    cursor: pointer;
    width: 38px;
}

.btn-del:hover {
    background-color: #c62828;
    color: #ffffff;
}

/* ==================================================================
 * 站別樣式掛載點
 *
 * <body> 會依站別自動掛上下列 class（由 MasterPage/Site.master.cs 產生）：
 *     site site--www      中文站
 *     site site--en       英文站
 *     site site--kids     兒童站
 *     site site--report   回報假訊息
 *
 * 另外投書表單的每個步驟也各有一個 class，方便針對單一畫面調整：
 *     .step-agreement  使用說明／同意
 *     .step-verify     認證信箱
 *     .step-sent       確認信已寄出
 *     .step-form       填寫表單／確認內容
 *
 * 給設計師：四個站共用同一份 HTML 標記，請一律用下面這種方式覆寫，
 * 不需要（也請不要）為了套樣式去改標記結構或新增 class，
 * 否則四個站又會開始各走各的，這次重構就白做了。
 *
 *     .site--kids .btn-border a { ... }
 *     .site--en .form_box ul li label { ... }
 *     .site--kids .step-form .apply { ... }
 *
 * 關於英文站的兩種寫法：
 *   global.css 已經用 [lang="en"] 做過幾處英文專用調整，
 *   本檔新增的英文規則也跟著用 [lang="en"]，不另外發明一套。
 *   它與 .site--en 指向同一個站，兩者等價，挑一種用即可。
 *   但 .site--kids 與 .site--report 只能用 body class——
 *   它們的 lang 都是 zh-Hant，[lang] 分不出來。
 * ================================================================== */

/* 英文站：英文字較長，標籤與按鈕預留較寬的空間 */
.site--en {
    /* 待設計稿 */
}

/* 英文站：global.css 的清單編號是中文數字（一、二、三），英文站改用阿拉伯數字 */
[lang="en"] main .content .step_content .apply ul {
    list-style: decimal;
}

/* 兒童站 */
.site--kids {
    /* 待設計稿 */
}

/* 回報假訊息 */
.site--report {
    /* 待設計稿 */
}

/* ==================================================================
 * 雛型結構的補位規則
 *
 * 以下兩處我們的標記與雛型不同，但是「刻意」的：
 * 這裡補上對應選擇器，讓外觀與設計稿一致，設計師不需要改共用標記。
 * ================================================================== */

/*
 * 1) 步驟指示器
 *    雛型：<div class="step1"><a href="#">認證信箱</a></div>
 *    我們：<div class="step1"><span>認證信箱</span></div>
 *
 *    步驟指示器不是連結，用 <a href="#"> 會讓鍵盤與讀屏軟體把它當成可點擊目標，
 *    而點下去什麼也不會發生。改用 <span> 後，這裡補上 global.css 原本
 *    掛在 a 上的圖示與樣式。
 */
main .content .step ul li .step1 span,
main .content .step ul li .step2 span,
main .content .step ul li.active .step1 span,
main .content .step ul li.active .step2 span {
    display: block;
    text-indent: -9999px;
    overflow: hidden;
    background-repeat: no-repeat;
    background-position: center;
}

main .content .step ul li .step1 span {
    background-image: url(../images/svg/step01.svg);
}

main .content .step ul li .step2 span {
    background-image: url(../images/svg/step02.svg);
}

main .content .step ul li.active .step1 span,
main .content .step ul li.active .step2 span {
    filter: brightness(0) saturate(100%) invert(31%) sepia(31%) saturate(1165%) hue-rotate(104deg) brightness(95%) contrast(92%);
}

/*
 * 2) 認證信箱按鈕
 *    雛型：<div class="tab_bt"><ul><li><a>認證信箱</a></li></ul></div>
 *    我們：同樣結構，但按鈕是 asp:Button，render 成 <input type="submit">
 *
 *    global.css 只寫了 .tab_bt ul li a 與 .tab_bt ul li button，
 *    這裡把 input 補進同一組樣式，維持設計稿的綠底膠囊外觀。
 */
main .content .step_content .tab_bt ul li input[type="submit"] {
    display: block;
    border-radius: 50px;
    background-color: #2d6849;
    color: #ffffff;
    padding: 15px 30px;
    font-weight: bold;
    position: relative;
    transition: 300ms;
    border: #2d6849 solid 1px;
    font-family: inherit;
    font-size: inherit;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}

main .content .step_content .tab_bt ul li input[type="submit"]:hover {
    background-color: #eff6f2;
    color: #2d6849;
    border: #2d6849 solid 1px;
}


input[type="button"], button {
    cursor: pointer;
}
/* ------------------------------------------------------------------
 * 附件檔名在窄螢幕的折行
 *
 * 案件查詢結果的附件清單在 768px 以下會轉成卡片式排版，欄位寬度變窄，
 * 長檔名（尤其含中英數混合的公文檔名）會在任意位置斷開，例如
 * 「測試PDF.p / df」。這裡讓它以較合理的方式折行。
 * global.css 只對 .email 做了處理，檔名欄未涵蓋——因為設計稿沒有畫到查詢結果頁。
 * ---------------------------------------------------------------- */
.table > table tbody > tr td .in a.link,
.table > table tbody > tr td .in a.link:hover {
    display: inline-block;
    max-width: 100%;
    word-break: break-word;
    overflow-wrap: anywhere;
    line-height: 1.6;
}

@media screen and (max-width: 768px) {
    .table > table tbody > tr td .in {
        min-width: 0;          /* 讓 flex 子項能正確收縮，否則長字串會撐開容器 */
    }
}

/* ------------------------------------------------------------------
 * 頁首頁籤在窄螢幕的溢出
 *
 * global.css 在 768px 以下給 li 的是 flex: 0 0 50%，
 * 兩顆各佔一半、再加上 ul 的 gap: 10px，總寬已超出容器 10px；
 * 又因 flex 項目預設 min-width: auto，文字較長的按鈕（例如英文站的
 * "Resend Confirmation Mail"）會被內容撐大到 basis 以上，
 * 配合 justify-content: center 就從左右兩側被切掉。
 *
 * 改為兩顆等分「扣掉 gap 之後」的剩餘寬度，並允許收縮，
 * 文字自行折行，中英文與兒童站都不會再溢出。
 * ---------------------------------------------------------------- */
@media screen and (max-width: 768px) {
    header .tab ul {
        flex-wrap: wrap;       /* 極窄或字級放大時可再往下換行 */
    }

    header .tab ul li {
        flex: 1 1 0;
        min-width: 0;          /* 沒有這行，內容仍會把項目撐大 */
        display: flex;         /* 讓按鈕撐滿項目高度，兩顆才會等高 */
    }

    header .tab ul li a,
    header .tab ul li button {
        flex: 1;
        display: flex;
        flex-direction: column;   /* 維持設計稿的「圖示在上、文字在下」，
                                     用 row 會把文字擠成極窄一欄，單字被切成兩截 */
        align-items: center;
        justify-content: center;
    }

    header .tab ul li a,
    header .tab ul li button {
        padding-left: 15px;
        padding-right: 15px;
        overflow-wrap: break-word;   /* 不用 word-break，那會把正常單字也切開 */
    }
}

/* ------------------------------------------------------------------
 * 英文站頁籤字級
 *
 * 頁籤字級 1.6em 是照中文四個字（「案件查詢」）設計的；
 * 英文的 "Resend Confirmation Mail" 在 1360px 以下會被擠成三行，
 * 按鈕高度暴增到近 200px，並與左側標題貼在一起。
 *
 * 只針對英文站縮字級，中文與兒童站維持設計稿原樣。
 * 選擇器沿用 global.css 已有的 [lang="en"] 寫法，不另外發明一套。
 * ※ 英文設計稿到位後，這段應由設計師的樣式取代。
 * ---------------------------------------------------------------- */
@media screen and (max-width: 1360px) {
    header {
        gap: 16px;             /* 標題與頁籤之間至少留白，避免視覺上貼死 */
        align-items: center;
    }

    [lang="en"] header .tab ul li a,
    [lang="en"] header .tab ul li button {
        font-size: 1.05rem;
        line-height: 1.4;
        padding-top: 12px;
        padding-bottom: 12px;
    }
}


/* ------------------------------------------------------------------
 * 英文站的欄位標籤排列
 *
 * global.css 給標籤的是 flex: 0 0 150px，那是照中文四五個字算的；
 * 英文最長的 "Confirmation date:" 實測需要 220px，嚴重時每個標籤
 * 都折成兩行，右對齊之後更難讀。
 *
 * 單純把欄寬拉大會排掠掉值的空間（一列三欄），
 * 改成「標籤在上、值在下」——這也是英文表單的常見做法。
 * 中文與兒童站（lang="zh-Hant"）不受影響，維持設計稿原樣。
 * ---------------------------------------------------------------- */
[lang="en"] main .content .step_content .apply .form_box ul li .form {
    flex-wrap: wrap;
}

[lang="en"] main .content .step_content .apply .form_box ul li .form > label {
    flex: 0 0 100%;
    width: 100%;
    text-align: left;
    padding-left: 0;
    margin-bottom: 2px;
}

/* ------------------------------------------------------------------
 * 驗證碼區塊在窄螢幕的按鈕
 *
 * .v_box 是 flex + nowrap，裡面依序是輸入框、驗證碼圖、「重新產生」、
 * 「語音播放」。375px 時容器只剩約 289px，兩顆按鈕被壓到 47px，
 * 實測畫面上只看得到「重」「語」各一個字。
 *
 * 改為允許換行、按鈕不收縮並保持內容寬度，四個字完整顯示。
 * 換行後兩顆按鈕上下排列，在手機上反而比並排好點按。
 *
 * 用 !important 是因為 global.css 對應規則的選擇器很長
 * （main .content .step_content .material ul .verification .v_box button），
 * 這裡若跟著堆一樣長的選擇器，設計師日後要改反而更難讀。
 * 本檔只在「設計稿沒涵蓋到的情形」覆寫，不是常態做法。
 *
 * 四個頁面（投書、案件查詢、密碼查詢、補寄驗證信）共用 ucCaptcha，
 * 這一條同時修好全部。
 * ---------------------------------------------------------------- */
@media screen and (max-width: 768px) {
    .v_box {
        flex-wrap: wrap !important;
        gap: 8px;
    }

    .v_box button {
        flex: 0 0 auto !important;
        width: auto !important;
        min-width: 0 !important;
        white-space: nowrap !important;
        margin: 0 !important;
    }
}

/* ------------------------------------------------------------------
 * 案件查詢：處理情形（各機關回覆與制式回覆）
 *
 * 這幾個 class 是查詢結果頁自行新增的（雛型沒有畫到這一頁），
 * 原本完全沒有樣式，導致回覆內容直接黏在附件表格下方，
 * 看起來像表格的一部分。
 * ---------------------------------------------------------------- */
.form_box.reply {
    margin: 10px 0 18px;
    padding: 14px 18px;
    border: 1px solid #D8E5DC;
    border-radius: 6px;
    background-color: #FAFCFA;
}

.form_box.reply + .form_box.reply {
    margin-top: 14px;      /* 多筆回覆之間留白，看得出是不同機關 */
}

/* 回覆機關名稱 */
.form_box.reply .reply-dep {
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid #E4EDE7;
    color: #2D6849;
    font-weight: bold;
}

/* 回覆內文：後台輸入的多行文字，保留段落感 */
.form_box.reply .reply-body {
    line-height: 1.9;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* 回覆附件清單 */
.form_box.reply .reply-body .ok {
    margin-top: 10px;
    font-weight: bold;
}

/* 回傳日期 */
.form_box.reply .reply-date {
    margin-top: 10px;
    color: #666;
    font-size: 0.94em;
}

@media screen and (max-width: 768px) {
    .form_box.reply {
        padding: 12px 14px;
    }
}