body,h1, h2, h3, h4, h5, h6, p ,.sky-form .checkbox {font-family: '微軟正黑體' ,'Microsoft JhengHei', sans-serif,Helvetica, Arial !important;}

.right {
    float: right;
}
footer h2.right{font-size:1.3rem;}

.center {
    text-align: center;
}
.bt {
    margin: 20px 0;
}
.mg-lr {
    margin: 0 5px;
}
.mg0 {
    margin: 0px;
}
.menu {
    margin: 20px 0;
}
.menu .center{
    display: inline-block;
    margin: 0 30px;
}
.btn-primary {
    color: #fff;
    background-color: #1D5DA6;
    border-color: #1D5DA6;
    border-radius: 8px;
    margin: 5px;
    transition: all 0.2s ease-in-out;
}
.btn-primary:hover {
    color: #fff;
    background-color: #154A85;
    border-color: #2E75BE;
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(29,93,166,.25);
}
.btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active, .show>.btn-primary.dropdown-toggle {
    color: #fff;
    background-color: #1D5DA6;
    border-color: #8FC1E8;
}
.btn-primary:not(:disabled):not(.disabled):active:focus,.btn-primary:focus {
    box-shadow: 0 0 0 0.2rem rgba(29,93,166,.5);
    outline: 2px solid #143a63;
    outline-offset: 2px;
}
.page-img {
    max-width: 100%;
}
hr {
    margin: 40px 0;
}
.content-box {
    padding: 50px 40px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-top: 4px solid #1D5DA6;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(29,93,166,.08);
    margin: 30px auto;
}
.content-box h3 {
    color: #1D5DA6;
}

.custom-file-label::after {
    display: none;
}
footer {
    background: #1B3A6B;
    color: #ffffff;
    margin: 30px 0 0;
    padding: 16px 0;
}
/* 頁尾內容寬度對齊頁首（頁首為 max-width:1400px） */
footer > .container {
    max-width: 1400px;
}
/* ⚠️ 2026-08-19：position 由 fixed 改為 relative。
   fixed 的 footer 會固定貼在視窗底部，內容只要超過一頁就一定被壓在它下面——
   使用者回報「登入提示會壓到 footer」就是這個原因，
   而且螢幕愈小愈嚴重（他們的螢幕比開發機小）。
   改成 relative 之後 footer 跟著內容流排在後面，永遠不會蓋住東西；
   配合 .login-stage 的 min-height，在大螢幕上仍然落在接近底部的位置。
   原本手機版的 media query 就是把它改回 relative，等於現在兩邊一致。 */
.footer-loginAdmin {
    background: #1B3A6B;
    color: #ffffff;
    width: 100%;
    position: relative;
    /* flex 子項：不要被壓縮，也不要跟著撐大 */
    flex: none;
}
header {
    background: #ffffff;
    box-shadow: 0 2px 10px rgba(29,93,166,.08);
    position:-webkit-sticky;
    position:sticky;
    top:0;
    z-index: 999;
}
.navbar {
    padding: 0;
}
footer p {
    margin: 0;
}
table th {
    width: 25%;
}
thead {
    background: #1D5DA6;
    color: #ffffff;
}
.qa tbody, .qa th, .qa td {
    border:1px solid #999;
}
.qa ol, .qa ul {
    margin: 20px 0;
}
.table thead th {
    border: 1px solid #999;
}
/* =========================================================
   登入頁（業者登錄 hotel_login／機關登錄 user/index）
   ---------------------------------------------------------
   2026-08-18 改版：背景換成花蓮海岸的淺色插畫之後，
   原本「白字 + rgba(0,0,0,.2) 深色面板」在近乎純白的天空上
   幾乎看不見，所以整組反過來做成霧面白卡 + 深藍字。

   配色取自背景圖本身：遠山的深藍、海面的土耳其藍、天空的淡藍，
   主色維持專案既有的 #1D5DA6。
   ========================================================= */
:root {
    --lg-ink:     #123A63;   /* 標題：遠山的深藍 */
    --lg-body:    #435465;   /* 內文 */
    --lg-muted:   #6E8093;
    --lg-primary: #1D5DA6;   /* 專案主色 */
    --lg-sea:     #1E88B8;   /* 海面的土耳其藍 */
    --lg-line:    #DCE6EF;
    --lg-note:    #F1F8FC;   /* 說明區底：天空的淡藍 */
    --lg-warn:    #9A5518;
    --lg-warn-bg: #FDF4E9;
}

/* 桌機把內容靠右——兩張背景圖的右側都是留白的海與天，
   卡片放右邊才不會壓到左側的山景與海岸線。 */
/* ⚠️ 2026-08-19：原本是 min-height: calc(100vh - 190px)，用一個猜的 190px
   去扣 header ＋ footer 的高度。實際上兩者加起來不到 190px，
   於是「header ＋ 內容 ＋ footer」的總高小於 100vh，而 body 有 min-height:100vh，
   差額就露在 footer 下面 —— 看起來就是 footer 飄在半空中。
   改用 flex 的 sticky footer：內容區 flex:1 自動撐開，footer 永遠貼在最下面，
   不需要知道 header/footer 有多高。 */
.login-stage { flex: 1 0 auto; }
.login-col   { width: 100%; }

@media (min-width: 992px) {
    .login-stage {
        display: flex;
        align-items: center;
        justify-content: flex-end;
    }
    /* 2026-08-19 從 520px 加寬到 660px。
       窄卡片會把說明文字擠成三行，整張卡變得很高，
       在 1366×768 這種螢幕上會穿過下方的 footer。
       加寬之後說明變兩行，整體高度少掉一大截。 */
    .login-col { width: 660px; flex: none; }
}

.login-eyebrow {
    margin: 0 0 2px;
    color: var(--lg-primary);
    font-size: .92rem;
    font-weight: 700;
    letter-spacing: .18em;
}
.login-title {
    margin: 0 0 12px;
    color: var(--lg-ink);
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: -.01em;
    line-height: 1.3;
}

.form-signin {
    width: 100%;
    max-width: 660px;
    padding: 0;
    margin: 14px auto 24px;
}
.form-signin-box {
    position: relative;
    overflow: hidden;
    background: rgba(255,255,255,.94);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    padding: 20px 26px 18px;
    border: 1px solid rgba(255,255,255,.9);
    border-radius: 16px;
    box-shadow: 0 18px 46px rgba(18,58,99,.16);
}
/* 頂端一道海→藍的細條，呼應背景圖 */
.form-signin-box::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--lg-sea), var(--lg-primary));
}
.form-signin h2, .form-signin h3 {
    color: var(--lg-ink) !important;
}
.form-signin p, .form-signin label {
    color: var(--lg-body) !important;
}
.form-signin h2 {
    margin: 0 0 12px;
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: -.01em;
}
.form-signin p, .form-signin label {
    font-size: 1rem;
}
.form-signin label.h3 {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 4px;
    color: var(--lg-ink) !important;
}
.form-label-group {
    margin: 0 0 11px;
}
/* 輸入框也壓低一點，三個欄位加起來省下的高度很可觀 */
.form-signin .form-control {
    padding: .4rem .8rem;
}

/* ---- 登入說明：原本是兩段擠在一起的長文字，拆成「說明」與「提醒」兩列 ----
   ⚠️ 文字內容一字未改，只調整結構與樣式。 */
.login-note {
    margin: 0 0 14px;
    border: 1px solid var(--lg-line);
    border-radius: 10px;
    overflow: hidden;
}
.login-note__row {
    display: flex;
    gap: 10px;
    padding: 10px 14px;
    background: var(--lg-note);
}
.login-note__row + .login-note__row {
    border-top: 1px solid var(--lg-line);
}
.login-note__row.is-warn {
    background: var(--lg-warn-bg);
}
.login-note__icon {
    flex: none;
    width: 22px;
    height: 22px;
    margin-top: 2px;
    color: var(--lg-primary);
}
.login-note__row.is-warn .login-note__icon { color: var(--lg-warn); }
.login-note__body { min-width: 0; }
.login-note__body p {
    margin: 0;
    font-size: .95rem !important;
    line-height: 1.65;
    color: var(--lg-body) !important;
}
.login-note__body p + p { margin-top: 6px; }
.login-note__lead {
    font-weight: 700;
    color: var(--lg-ink) !important;
}
.login-note__row.is-warn .login-note__lead { color: var(--lg-warn) !important; }

/* 登入頁驗證碼（業者登錄 hotel_login／機關登錄 user/index）
   刻意不用民眾申請頁的 .apply-captcha：那組是淺色卡片，套進 .form-signin-box
   的深色半透明底會很突兀，欄位樣式也跟上方帳號／密碼對不齊。
   這裡沿用團體旅遊登入頁的版面：輸入框走一般 .form-label-group，圖片置中另起一列。 */
/* 圖片與「換一張」同一列（原本是直排，多佔一整行高度），
   說明文字用 flex 100% 自己換到下一列。 */
.login-captcha {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px 12px;
    margin: 2px 0 12px;
}
.login-captcha__hint { flex: 0 0 100%; }
.login-captcha img {
    display: block;
    max-width: none;
    background: #ffffff;
    border: 1px solid #555;
    border-radius: 4px;
    cursor: pointer;
}
/* img 無法以鍵盤操作，另以按鈕提供同等的更換功能（WCAG 2.1.1）。
   2026-08-18：卡片改成白底後，原本的白字白框在白卡上等於消失，改為深藍。 */
.login-captcha__refresh {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 16px;
    background: #ffffff;
    border: 1px solid var(--lg-primary);
    border-radius: 6px;
    color: var(--lg-primary);
    font-size: 0.9rem;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    transition: all .2s ease-in-out;
}
.login-captcha__refresh:hover {
    background: var(--lg-note);
}
/* 本檔約 206 行有全域 a:focus{outline:0}，新元件一律自己補回焦點樣式 */
.login-captcha__refresh:focus {
    outline: 2px solid var(--lg-primary);
    outline-offset: 2px;
}
.login-captcha__hint {
    color: var(--lg-muted);
    font-size: 0.9rem;
    text-align: center;
}

/* 背景圖是淺色的花蓮海岸插畫。疊一層由左透明漸變到右側淡白的遮罩，
   讓卡片那一側不管視窗怎麼裁切都維持足夠對比；左側的山海保持清楚。
   height 改 min-height：內容比一個視窗高時（手機）原本會被裁掉。 */
.login-bg {
    background:
        linear-gradient(100deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.55) 72%),
        url(../images/login.jpg) no-repeat center center fixed;
    /* flex 直排＋min-height:100vh：內容不足一頁時 footer 仍貼在視窗底部，
       內容超過一頁時 footer 跟著往下，兩種情況都不會飄。 */
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    position: relative;
    z-index: 1;
    background-size: cover;
}
.loginAdmin-bg {
    background:
        linear-gradient(100deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.55) 72%),
        url(../images/loginAdmin.jpg) no-repeat center center fixed;
    /* flex 直排＋min-height:100vh：內容不足一頁時 footer 仍貼在視窗底部，
       內容超過一頁時 footer 跟著往下，兩種情況都不會飄。 */
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    position: relative;
    z-index: 1;
    background-size: cover;
}
/* 手機沒有右側留白可用，整片壓淡一點就好。
   attachment 改 scroll：iOS Safari 的 background-attachment:fixed 會抖動甚至整片不顯示。 */
@media (max-width: 991px) {
    .login-bg {
        background:
            linear-gradient(rgba(255,255,255,.62), rgba(255,255,255,.62)),
            url(../images/login.jpg) no-repeat center center scroll;
        background-size: cover;
    }
    .loginAdmin-bg {
        background:
            linear-gradient(rgba(255,255,255,.62), rgba(255,255,255,.62)),
            url(../images/loginAdmin.jpg) no-repeat center center scroll;
        background-size: cover;
    }
}
.modal-body p {
    color: #000;
}
.navbar-light .navbar-nav .nav-link, .navbar-light .navbar-nav .active>.nav-link {
    font-size: 1.3rem;
    letter-spacing: 0px;
    margin: 0 4px;
}
.navbar-light .navbar-nav .nav-link {
    transition: all 0.3s ease-in-out;
	-webkit-trasition: all 0.3s ease-out;
	-o-transition: all 0.3s ease-out;
}
.navbar-light .navbar-nav .active>.nav-link,.navbar-light .navbar-nav .nav-link:hover {
    color: #1D5DA6;
}
.material-icons {
    top: 4px;
    position: relative;
}
.banner {
    position: relative;
    width: 100%;
    overflow: hidden;
}
.banner-bt {
    position: absolute;
    right: 15%;
    bottom: 60px;
    left: 15%;
    z-index: 10;
    padding-top: 20px;
    padding-bottom: 20px;
    color: #fff;
    text-align: center;
}


.bt-font {
    font-size: 1.7rem;font-weight: 300;
}
.mg-top5 {
    margin: 5px 0;
}
.mg-top20 {
    margin: 20px 0 0 0;
}

/*mark add*/
a:focus{ outline : 0;}
a.navbar-brand, .navbar-light .navbar-nav .nav-link{border:2px dashed transparent;}
.navbar-light .navbar-nav .nav-link:focus{border:2px dashed #1D5DA6; }
.qa_h4{width:100%; background-color: #1D5DA6; color:#fff; padding:10px 15px; font-weight: 700; font-size:1.4rem;}
h4.panel-title{font-size:1.2rem; padding:0.4rem 1rem; background-color: #f3f3f3;}
.panel-heading a { display: block; text-decoration-line:none; color:#1D5DA6; border:2px dashed transparent; padding:5px; font-weight:600;}
.panel-heading a:hover {color:#555;}
.panel-heading a:focus, .block-grid-v2-info h4 a:focus,a.navbar-brand:focus {border:2px dashed #1D5DA6; }
.panel-body {padding:1rem 2rem; line-height:1.8rem;}
.sm-margin-bottom-20{margin-bottom:20px;}
.sm-margin-bottom-20:hover .block-grid-v2-info.rounded-bottom{border-bottom:3px solid #1D5DA6;}
.block-grid-v2-info h4{ font-size:1.3rem; line-height:1.85rem;}
.block-grid-v2-info h4 a{color:#1D5DA6; text-decoration:none;}
.block-grid-v2-info h4 a:hover{color:#ccc;}
.block-grid-v2-info p{text-align: left;}

.count_r1{width:270px; height:270px; background-color: #f00; border-radius: 150px; margin:0 auto;
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#96ffdf+0,0fe0a8+100 */
background: #96ffdf; /* Old browsers */
background: -moz-linear-gradient(-45deg,  #96ffdf 0%, #0fe0a8 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(-45deg,  #96ffdf 0%,#0fe0a8 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg,  #96ffdf 0%,#0fe0a8 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#96ffdf', endColorstr='#0fe0a8',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

padding:1.5rem;text-align: center;
display: table;

}
.count_r1:after{width:240px; height:240px; background-color: #fff; content: ""; position: absolute; border-radius: 135px; opacity: 0.8; box-shadow: 2px 2px 6px;
top:50% ;left:50%;
transform: translateY(-50%) translateX(-50%);
}
.count_r1.purple{
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#fcecfc+0,fba6e1+50,ff7cd8+100 */
background: #fcecfc; /* Old browsers */
background: -moz-linear-gradient(-45deg,  #fcecfc 0%, #fba6e1 50%, #ff7cd8 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(-45deg,  #fcecfc 0%,#fba6e1 50%,#ff7cd8 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg,  #fcecfc 0%,#fba6e1 50%,#ff7cd8 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcecfc', endColorstr='#ff7cd8',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
.inner{    position: absolute;
    z-index: 2;
    transform: translateY(-55%) translateX(-50%);
    top: 50%;
    line-height: 2.2rem;
    font-size: 1.6rem;
    left: 50%; font-weight: 700; }
.first{font-size:1rem; border-top:1px dashed #000; margin-top:0.3rem; padding-top:0.3rem; font-weight: 300;}
span.num{ font-size:1.8rem;color:#0FE0A8; }
.count_r1.purple span.num{ color:#EF34A8; }
.first .num{font-size:1.6rem;font-weight: 300;}
.third .num{font-size:2rem;font-weight: 300;}
.second{font-size:1.4rem;font-weight: 300;}
.third{font-size:1.4rem;font-weight: 300;   }
.third .num{color:#DC3545 !important; font-weight: 700;}

/*mark end*/

@media (max-width:991px) {
    .content-box {
        padding: 30px 15px;
    }
    .menu .center {
        margin: 0 10px;
    }
    .bt {
        margin: 10px 0;
    }
    .banner-bt {
        bottom: -20px;
    }
    .bt-font {
        font-size: inherit;
    }
}

/* 註：原本這裡有重複的 .footer-loginAdmin{position:fixed}，排在 media query 之後會蓋掉手機版 relative 設定，已移除 */

/* 表單元件現代化 */
.form-control {
    border: 1px solid #d5dde5;
    border-radius: 8px;
    padding: 0.5rem 0.85rem;
    height: auto;
    transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}
.form-control:focus {
    border-color: #1D5DA6;
    box-shadow: 0 0 0 0.2rem rgba(29,93,166,.15);
}
select.form-control {
    height: auto;
    padding: 0.5rem 0.85rem;
}
input[type="file"].form-control {
    padding: 0.4rem 0.85rem;
    background-color: #f8fafc;
}
.content-box h4 {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1D5DA6;
    padding-bottom: 8px;
    margin-bottom: 20px;
    border-bottom: 2px solid #e2e8f0;
}
.content-box .mb-3 {
    margin-bottom: 1.25rem;
}
.content-box label {
    margin-bottom: 0.35rem;
    color: #334155;
}
.form-text {
    margin-top: 0.35rem;
    font-size: 0.875rem;
}

/* ===== 頁尾（首頁 / 錯誤頁 / 登入頁共用） ===== */
.footer-flex {
    gap: 14px 24px;
    padding: 10px 0;
}
.footer-logo-chip {
    display: inline-block;
    background: #ffffff;
    border-radius: 8px;
    padding: 7px 12px;
    line-height: 0;
}
.footer-copyright {
    color: rgba(255,255,255,.92);
    font-size: 0.95rem;
    line-height: 1.7;
    margin: 0;
}
.footer-links {
    gap: 0;
    align-items: center;
    flex-wrap: nowrap;
}
.footer-links .nav-item + .nav-item {
    border-left: 1px solid rgba(255,255,255,.35);
}
.footer-links a {
    display: inline-block;
    color: #ffffff;
    padding: 2px 14px;
    font-size: 0.95rem;
    white-space: nowrap;
    text-decoration: none;
    border: 2px dashed transparent;
}
.footer-links a:hover {
    color: #ffffff;
    text-decoration: underline;
}
.footer-links a:focus {
    border: 2px dashed #ffffff;
    text-decoration: underline;
}
@media (max-width: 768px) {
    .footer-flex {
        justify-content: center;
        text-align: center;
    }
    .footer-links {
        justify-content: center;
        flex-wrap: wrap;
    }
    .footer-links .nav-item + .nav-item {
        border-left: 0;
    }
    .footer-links a {
        padding: 4px 10px;
    }
}

/* ===== 首頁主視覺區（歡迎詞 / 名額公告 / 申請入口 / 服務資訊） ===== */
.banner-bt2 {
    padding: 2.6rem 0 2.2rem;
    text-align: center;
}
.hero-welcome {
    margin: 0 0 18px;
    font-size: 1.45rem;
    font-weight: 700;
    line-height: 1.6;
    color: #1D5DA6;
}

/* 名額公告：原為自動捲動跑馬燈，改為靜態膠囊條
   （WCAG 2.2.2「暫停、停止、隱藏」屬 A 級必要條件，自動移動且超過 5 秒的內容必須可暫停）
   寬度隨文字縮放，不再撐滿整列，避免與下方區塊形成多重寬度 */
.notice-bar {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    max-width: 100%;
    margin: 0 0 22px;
    padding: 11px 24px;
    border-radius: 999px;
    background: #eaf2fb;
    border: 1px solid #cfe0f5;
    color: #143a63;
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.6;
    text-align: left;
}
.notice-bar .notice-num {
    color: #C0392B;
    font-size: 1.35rem;
    padding: 0 2px;
}
.notice-bar svg {
    flex: 0 0 auto;
}
/* 額滿狀態：改用警示色 */
.notice-bar.is-full {
    background: #fdf2f2;
    border-color: #f0cccc;
    color: #8f2c20;
    border-radius: 12px;
}

/* 申請入口按鈕 */
.banner-bt2 .bt-font {
    padding: 12px 42px;
    font-size: 1.2rem;
}
.hero-cta {
    margin: 0 0 24px;
}

/* 服務資訊：不加外框，以細線與上方分隔，避免版面出現過多方塊 */
.hero-info {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px 28px;
    max-width: 980px;
    margin: 0 auto;
    padding-top: 20px;
    border-top: 1px solid #e2e8f0;
    color: #5b6b7d;
    font-size: 0.95rem;
    line-height: 1.8;
}
.hero-info-item {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}
.hero-info-item svg {
    flex: 0 0 auto;
    color: #1D5DA6;
}
.hero-info-item .info-label {
    font-weight: 700;
    color: #33475b;
}
.hero-info-item a {
    color: #1D5DA6;
    text-decoration: none;
    font-weight: 700;
}
.hero-info-item a:hover {
    text-decoration: underline;
}
/* 本檔案第 206 行有全域的 a:focus{outline:0}，新增連結必須自行補回焦點樣式，
   否則違反無障礙 2.4.7 焦點可見 */
.hero-info-item a:focus {
    border: 2px dashed #1D5DA6;
    text-decoration: underline;
}

@media (max-width: 768px) {
    .banner-bt2 {
        padding: 1.8rem 0 1.6rem;
    }
    .hero-welcome {
        font-size: 1.15rem;
    }
    .notice-bar {
        font-size: 1rem;
        padding: 10px 18px;
        border-radius: 12px;
    }
    .notice-bar .notice-num {
        font-size: 1.2rem;
    }
    .hero-info {
        flex-direction: column;
        gap: 6px;
        text-align: left;
    }
    .hero-info-item {
        align-items: flex-start;
    }
}

/* ===== 民眾申請頁（customer_apply） ===== */
.apply-wrap {
    max-width: 1140px;
    padding-bottom: 40px;
}
.apply-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    box-shadow: 0 6px 28px rgba(29,93,166,.08);
    padding: 40px 48px 34px;
    text-align: left;
}
.apply-card__title {
    margin: 0 0 4px;
    font-size: 1.7rem;
    font-weight: 800;
    color: #143a63;
}
.apply-card__lead {
    margin: 0 0 26px;
    color: #5b6b7d;
    font-size: 0.95rem;
}
.apply-section {
    margin-top: 30px;
    padding-top: 26px;
    border-top: 1px solid #eef2f6;
}
.apply-section:first-of-type {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}
.apply-section__title {
    margin: 0 0 16px;
    font-size: 1.1rem;
    font-weight: 800;
    color: #143a63;
}
.apply-section__sub {
    margin: 0 0 10px;
    font-size: 0.95rem;
    font-weight: 700;
    color: #33475b;
}
.apply-field {
    margin-bottom: 18px;
}
.apply-field > label {
    display: block;
    margin-bottom: 6px;
    font-weight: 700;
    color: #33475b;
}
.apply-field .form-control {
    height: auto;
    padding: 11px 14px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
}
.apply-hint {
    margin: 6px 0 0;
    font-size: 0.85rem;
    color: #7a8899;
}
.apply-req {
    color: #C0392B;
    font-weight: 700;
}
.apply-opt {
    color: #5b6b7d;
    font-weight: 400;
}

/* 唯讀（OCR 帶入）欄位 */
.apply-field--locked .form-control[readonly] {
    background: #f1f5f9;
    color: #33475b;
}
.apply-lock-note {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 18px;
    padding: 11px 16px;
    background: #f1f5f9;
    border-radius: 8px;
    color: #475569;
    font-size: 0.9rem;
}
.apply-lock-note svg { flex: 0 0 auto; color: #64748b; }

/* 證件上傳區 */
.apply-samples {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin-bottom: 18px;
}
.apply-sample {
    flex: 0 1 330px;
    text-align: center;
}
/* 兩張範例圖原始尺寸不同（394x253 與 350x200），以固定高度的等比容器統一視覺大小 */
.apply-sample img {
    display: block;
    width: 100%;
    height: 190px;
    object-fit: contain;
    background: #ffffff;
    padding: 8px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
}
.apply-sample figcaption {
    margin-top: 7px;
    font-size: 0.9rem;
    font-weight: 700;
    color: #1D5DA6;
}
/* 註：.btn-action / .btn-action-primary 原本只定義在後台 public/assets/css/custom.css，
   前台頁面未載入該檔，故在此補上前台版本 */
.btn-action,
.btn-action-primary {
    display: inline-block;
    padding: 11px 22px;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.4;
    text-align: center;
    white-space: nowrap;
    cursor: pointer;
    transition: all .2s ease-in-out;
}
.btn-action {
    background: #ffffff;
    border: 2px solid #1D5DA6;
    color: #1D5DA6;
}
.btn-action:hover {
    background: #eaf2fb;
    color: #143a63;
}
.btn-action-primary {
    background: #1D5DA6;
    border: 2px solid #1D5DA6;
    color: #ffffff;
}
.btn-action-primary:hover {
    background: #154A85;
    border-color: #154A85;
    color: #ffffff;
    box-shadow: 0 4px 10px rgba(29,93,166,.25);
}
.btn-action:focus,
.btn-action-primary:focus {
    outline: 2px solid #143a63;
    outline-offset: 2px;
}

.apply-drop {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 22px 24px;
    border: 2px dashed #b9cde5;
    border-radius: 12px;
    background: #fbfdff;
}
.apply-drop__icon {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 10px;
    background: #eaf2fb;
    color: #1D5DA6;
}
.apply-drop__body { flex: 1 1 auto; min-width: 0; }
.apply-drop__name {
    margin: 0;
    font-weight: 700;
    color: #143a63;
    word-break: break-all;
}
.apply-drop__desc {
    margin: 3px 0 0;
    font-size: 0.88rem;
    color: #5b6b7d;
}
.apply-badge {
    display: inline-block;
    margin-top: 8px;
    padding: 3px 12px;
    border-radius: 999px;
    background: #e3f3e8;
    color: #1d6b3a;
    font-size: 0.8rem;
    font-weight: 700;
}
.apply-drop.is-done { border-style: dashed; border-color: #a8d5b8; background: #fbfffc; }
.apply-drop.is-done .apply-drop__icon { background: #e3f3e8; color: #1d6b3a; }

/* 身分提示框 */
.apply-callout {
    display: flex;
    gap: 12px;
    margin: 4px 0 18px;
    padding: 16px 18px;
    border-radius: 10px;
    background: #eaf2fb;
    border: 1px solid #cfe0f5;
    color: #143a63;
}
.apply-callout svg { flex: 0 0 auto; margin-top: 2px; color: #1D5DA6; }
.apply-callout__title {
    margin: 0 0 4px;
    font-weight: 800;
}
.apply-callout__text {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.75;
    color: #33475b;
}
.apply-callout--warn { background: #fff8ea; border-color: #f0dcb4; }
.apply-callout--warn svg { color: #8a6412; }
.apply-callout--warn .apply-callout__title { color: #6b4d0c; }

/* 勾選項 */
.apply-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 12px;
    line-height: 1.7;
}
.apply-check input[type="checkbox"] {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin-top: 3px;
}
.apply-check label {
    margin: 0;
    color: #33475b;
}
.apply-declare {
    padding: 16px 18px;
    margin-bottom: 18px;
    border-radius: 10px;
    background: #fff8ea;
    border: 1px solid #f0dcb4;
}
.apply-declare .apply-check { margin-bottom: 0; }
.apply-declare label { font-size: 0.9rem; color: #4a3a12; }

/* 生日三格 */
.apply-birthday {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.apply-birthday .form-control { width: 92px; text-align: center; }
.apply-birthday .apply-birthday__unit { color: #33475b; font-weight: 700; }

/* 電子簽名（法定代理人）
   畫布高度寫死 180px：signature_pad 依 offsetWidth/offsetHeight 換算解析度，
   高度若交給內容撐開會是 0，簽名區會消失。 */
.sign-pad {
    position: relative;
    /* 手指簽名的筆畫比想像中大很多，180px 太擠。
       手機是民眾申請的主要裝置，且畫面窄、只能用手指，所以反而要更高。 */
    height: 240px;
    /* 原本是淺色虛線，在白底頁面上幾乎看不出簽名區在哪，改成實線並加深 */
    border: 2px solid #94a3b8;
    border-radius: 10px;
    background-color: #fff;
    box-shadow: inset 0 0 0 1px #fff, 0 1px 3px rgba(15, 23, 42, .08);
    overflow: hidden;
}
@media (max-width: 600px) {
    .sign-pad { height: 300px; }
}
/* 簽名基準線：仿紙本簽名欄，讓使用者知道要簽在哪裡。
   畫在 CSS 而不是畫布上，所以不會被匯出到簽名圖裡。 */
.sign-pad::after {
    content: '✕';
    position: absolute;
    left: 22px;
    right: 22px;
    bottom: 55px;
    z-index: 0;
    padding-bottom: 4px;
    border-bottom: 1px solid #cbd5e1;
    color: #cbd5e1;
    font-size: 1rem;
    line-height: 1;
    pointer-events: none;
}
.sign-pad__canvas {
    display: block;
    width: 100%;
    height: 100%;
    /* 疊在基準線之上，筆畫才不會被那條線蓋過去 */
    position: relative;
    z-index: 1;
    /* 觸控裝置上簽名時不要跟著捲動頁面 */
    touch-action: none;
    cursor: crosshair;
}
/* 提示文字疊在畫布上，pointer-events:none 才不會擋住筆畫 */
.sign-pad__placeholder {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    z-index: 2;
    margin: 0;
    transform: translateY(-50%);
    text-align: center;
    color: #94a3b8;
    pointer-events: none;
}
.sign-pad__actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 10px;
}
.sign-pad__hint {
    color: #64748b;
    font-size: 0.95rem;
}

/* 驗證碼 */
.apply-captcha {
    display: flex;
    align-items: flex-end;
    gap: 18px;
    flex-wrap: wrap;
    padding: 18px 20px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
}
.apply-captcha__input {
    flex: 1 1 260px;
    min-width: 0;
}
.apply-captcha__input > label {
    display: block;
    margin-bottom: 6px;
    font-weight: 700;
    color: #33475b;
}
.apply-captcha__input .form-control {
    height: auto;
    padding: 11px 14px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    letter-spacing: 3px;
}
.apply-captcha__media {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 12px;
}
.apply-captcha__media img {
    display: block;
    height: 48px;
    max-width: none;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    cursor: pointer;
}
.apply-captcha__refresh {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 16px;
    background: #ffffff;
    border: 2px solid #1D5DA6;
    border-radius: 8px;
    color: #1D5DA6;
    font-size: 0.9rem;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    transition: all .2s ease-in-out;
}
.apply-captcha__refresh:hover {
    background: #eaf2fb;
    color: #143a63;
}
.apply-captcha__refresh:focus {
    outline: 2px solid #143a63;
    outline-offset: 2px;
}
@media (max-width: 600px) {
    .apply-captcha { align-items: stretch; }
    .apply-captcha__media { justify-content: space-between; }
}

.apply-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 26px;
}
.apply-actions .btn { padding: 12px 46px; font-size: 1.1rem; }

/* 裁切彈窗 */
#cut_modal .modal-body { background: #f8fafc; }
#cut_modal .cut-stage,
#cut_modal .cut-preview {
    width: 100%;
    max-width: 400px;
    height: 250px;
    margin: 0 auto;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
}
#cut_modal .cut-caption {
    margin: 12px 0 6px;
    text-align: center;
    font-weight: 700;
    color: #1D5DA6;
}

@media (max-width: 768px) {
    .apply-card { padding: 22px 18px 20px; border-radius: 10px; }
    .apply-card__title { font-size: 1.35rem; }
    .apply-drop { flex-direction: column; align-items: flex-start; gap: 12px; }
    .apply-actions .btn { width: 100%; }
}

/* 檔案輸入以 .sr-only 隱藏、由 label 代為呈現，需把焦點狀態轉繪到 label 上，
   否則鍵盤使用者 Tab 到上傳欄位時看不到焦點（無障礙 2.4.7） */
#drop_btn {
    box-shadow: 0 2px 8px rgba(29,93,166,.25);
}
#pic_file:focus ~ .apply-drop #drop_btn {
    outline: 2px solid #143a63;
    outline-offset: 2px;
}

/* Parsley 會把錯誤清單插在欄位後面，若父層是 flex 容器就會變成 flex item 擠在同一行，
   造成生日、驗證碼、勾選項的版面被撐開。強制其獨佔一整列並排到最後。 */
.apply-card .parsley-errors-list {
    flex: 0 0 100%;
    width: 100%;
    order: 99;
    list-style: none;
    margin: 5px 0 0;
    padding: 0;
    font-size: 0.85rem;
    font-weight: 700;
    color: #C0392B;
}
.apply-card .parsley-errors-list:empty {
    margin: 0;
}
.apply-check {
    flex-wrap: wrap;
}
.apply-check .parsley-errors-list {
    padding-left: 28px;
}
/* 生日三格共用一個錯誤區塊（見 data-parsley-errors-container） */
.apply-birthday-errors .parsley-errors-list {
    margin-top: 0;
}
.apply-card .form-control.parsley-error {
    border-color: #C0392B;
}

/* ===== 參與業者列表（index/operator） ===== */
.hotel-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 14px 20px;
    margin-bottom: 20px;
    padding: 18px 20px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
}
.hotel-toolbar__group {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    flex: 1 1 300px;
    min-width: 0;
}
.hotel-toolbar__field {
    flex: 1 1 auto;
    min-width: 0;
}
.hotel-toolbar__field > label {
    display: block;
    margin-bottom: 6px;
    font-weight: 700;
    font-size: 0.92rem;
    color: #33475b;
}
.hotel-toolbar .form-control,
.hotel-toolbar .custom-select {
    height: auto;
    padding: 10px 14px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
}
.hotel-toolbar .btn-action-primary {
    flex: 0 0 auto;
    padding: 10px 24px;
}
.hotel-count {
    margin: 0 0 12px;
    color: #5b6b7d;
    font-size: 0.95rem;
}
.hotel-count strong {
    color: #1D5DA6;
}

.hotel-table {
    width: 100%;
    margin-bottom: 0;
}
.hotel-table thead th {
    background: #1D5DA6;
    color: #ffffff;
    border: 0;
    padding: 13px 14px;
    font-weight: 700;
    white-space: nowrap;
}
.hotel-table tbody td {
    padding: 13px 14px;
    vertical-align: middle;
    border-top: 1px solid #eef2f6;
    color: #33475b;
}
.hotel-table tbody tr:hover {
    background: #f6f9fd;
}
.hotel-table a {
    color: #1D5DA6;
    font-weight: 700;
    text-decoration: none;
}
.hotel-table a:hover {
    text-decoration: underline;
}
.hotel-table a:focus {
    border: 2px dashed #1D5DA6;
    text-decoration: underline;
}
.hotel-table .hotel-empty {
    padding: 34px 14px;
    text-align: center;
    color: #7a8899;
}

/* 手機版：表格改為卡片式堆疊。
   四欄硬塞進 375px 會讓中文字逐字換行成直排，完全無法閱讀，
   故隱藏表頭、每列變成一張卡片，欄位名稱改由 data-label 呈現。 */
@media (max-width: 767px) {
    .hotel-table,
    .hotel-table tbody,
    .hotel-table tr,
    .hotel-table td {
        display: block;
        width: 100%;
    }
    .hotel-table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0,0,0,0);
        white-space: nowrap;
    }
    .hotel-table tbody tr {
        margin-bottom: 14px;
        padding: 16px 18px;
        background: #ffffff;
        border: 1px solid #e2e8f0;
        border-left: 4px solid #1D5DA6;
        border-radius: 10px;
        box-shadow: 0 2px 10px rgba(29,93,166,.06);
    }
    .hotel-table tbody tr:hover {
        background: #ffffff;
    }
    .hotel-table tbody td {
        display: flex;
        gap: 10px;
        padding: 5px 0;
        border: 0;
        line-height: 1.7;
        word-break: break-word;
    }
    .hotel-table tbody td::before {
        content: attr(data-label);
        flex: 0 0 52px;
        font-weight: 700;
        color: #7a8899;
        font-size: 0.85rem;
        line-height: 1.9;
    }
    /* 旅宿名稱作為卡片標題，獨立一行放大 */
    .hotel-table tbody td.hotel-cell-name {
        display: block;
        margin-bottom: 6px;
        padding-bottom: 8px;
        border-bottom: 1px solid #eef2f6;
        font-size: 1.08rem;
        font-weight: 700;
        color: #143a63;
    }
    .hotel-table tbody td.hotel-cell-name::before {
        display: none;
    }
    /* 全站皆為花蓮縣，手機版隱藏縣市欄以節省空間 */
    .hotel-table tbody td.hotel-cell-city {
        display: none;
    }
    .hotel-table .hotel-empty {
        display: block;
    }
    .hotel-toolbar__group {
        flex: 1 1 100%;
    }
}

/* ===== Q & A（index/qa） ===== */
.qa-wrap {
    max-width: 1000px;
}
.qa-toolbar {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 18px;
}
.qa-group {
    margin-bottom: 34px;
}
.qa-group__title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 14px;
    padding-left: 12px;
    border-left: 4px solid #1D5DA6;
    font-size: 1.25rem;
    font-weight: 800;
    color: #143a63;
    text-align: left;
}
.qa-group__count {
    padding: 2px 10px;
    border-radius: 999px;
    background: #eaf2fb;
    color: #1D5DA6;
    font-size: 0.85rem;
    font-weight: 700;
}

/* 問答改用原生 details/summary：不需 JS、鍵盤可直接操作、關閉 JS 時仍可展開 */
.qa-item {
    margin-bottom: 10px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    overflow: hidden;
}
.qa-item[open] {
    border-color: #b9cde5;
    box-shadow: 0 3px 14px rgba(29,93,166,.08);
}
.qa-item__q {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 18px;
    cursor: pointer;
    list-style: none;
    font-weight: 700;
    color: #143a63;
    line-height: 1.7;
    text-align: left;
}
.qa-item__q::-webkit-details-marker { display: none; }
.qa-item__q:hover { background: #f6f9fd; }
.qa-item__q:focus {
    outline: 2px solid #143a63;
    outline-offset: -2px;
    background: #f6f9fd;
}
.qa-item[open] .qa-item__q {
    background: #f6f9fd;
    border-bottom: 1px solid #eef2f6;
}
.qa-item__no {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 26px;
    padding: 0 8px;
    border-radius: 6px;
    background: #1D5DA6;
    color: #ffffff;
    font-size: 0.85rem;
    font-weight: 700;
}
.qa-item__text {
    flex: 1 1 auto;
    min-width: 0;
    word-break: break-word;
}
.qa-item__arrow {
    flex: 0 0 auto;
    margin-top: 4px;
    color: #7a8899;
    transition: transform .2s ease-in-out;
}
.qa-item[open] .qa-item__arrow {
    transform: rotate(180deg);
    color: #1D5DA6;
}

.qa-item__a {
    padding: 18px 18px 20px 62px;
    color: #33475b;
    line-height: 1.9;
    text-align: left;
    word-break: break-word;
}
.qa-item__a > :last-child { margin-bottom: 0; }
.qa-item__a p { margin: 0 0 10px; }
.qa-item__a ul { margin: 0 0 10px; padding-left: 22px; }
.qa-item__a li { margin-bottom: 4px; }
/* 答案由後台編輯器貼入，可能殘留 Word 的絕對單位（pt/cm）造成手機版橫向溢出 */
.qa-item__a * {
    max-width: 100%;
    font-family: inherit !important;
    font-size: inherit !important;
    line-height: inherit !important;
    margin-left: 0 !important;
    text-indent: 0 !important;
}
.qa-item__a img {
    height: auto;
    border-radius: 8px;
}
.qa-empty-answer {
    color: #7a8899;
}
.qa-none {
    padding: 40px 18px;
    text-align: center;
    color: #7a8899;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
}

@media (max-width: 767px) {
    .qa-group__title { font-size: 1.1rem; }
    .qa-item__q { padding: 14px 14px; gap: 10px; }
    .qa-item__a { padding: 16px 14px 18px; }
    .qa-item__no { min-width: 28px; font-size: 0.8rem; }
}