/* 通用彈出框樣式 */
.modal-backdrop{
    position:fixed; inset:0; background:rgba(0,0,0,.45);
    display:flex; align-items:center; justify-content:center;
    z-index:1000;
}
.modal{
    width: min(520px, calc(100vw - 24px));
    background:#fff; color:var(--text);
    border:1px solid var(--border);
    border-radius:12px; box-shadow:0 10px 24px rgba(0,0,0,.18);
    overflow:hidden;
}
.modal-header{
    padding:14px 16px; border-bottom:1px solid var(--border);
    display:flex; align-items:center; justify-content:space-between;
}
.modal-title{ font-size:16px; font-weight:700; color:#111827; }
.modal-close{
    appearance:none; background:transparent; border:none;
    font-size:18px; line-height:1; cursor:pointer; color:#6b7280;
}
.modal-body{ padding:14px 16px; display:flex; flex-direction:column; gap:10px; }
.modal-footer{
    padding:12px 16px; border-top:1px solid var(--border);
    display:flex; gap:8px; justify-content:flex-end;
}
.modal .input, .modal select, .modal textarea{
    width:100%; padding:10px 12px;
    border:1px solid var(--border); border-radius:8px;
    font-size:14px; background:#fff; color:var(--text);
    outline:none;
}
.modal .input:focus, .modal select:focus, .modal textarea:focus{
    border-color:#9ca3af; box-shadow:0 0 0 3px rgba(37,99,235,.12);
}
.modal .form-row{ display:flex; flex-direction:column; gap:6px; }
.modal .form-label{ font-size:12px; color:#6b7280; }
.modal .btn{ padding:8px 12px; border-radius:8px; font-weight:600; cursor:pointer; }
.modal .btn.primary{ background:var(--primary); color:#fff; border:1px solid var(--primary); }
.modal .btn.secondary{ background:#eef2ff; color:#1e40af; border:1px solid #c7d2fe; }
.modal .btn.ghost{ background:transparent; color:#374151; border:1px solid var(--border); }

/* 唯讀欄位：灰底 + 禁止游標（仍可選取文字則保留 pointer-events） */
.modal .input[readonly],
.modal textarea[readonly]{
    background:#f3f4f6;
    color:#6b7280;
    border-color:#e5e7eb;
    cursor:not-allowed;
}

.modal-message{
    white-space: pre-wrap; /* 讓 \n 換行，且自動換行 */
}

@media (max-width:600px){
    :root{
        --nav-bottom-h: 120px; /* 依實際底部 NAV 高度調整 */
        --safe-bottom: env(safe-area-inset-bottom, 0px);
    }

    /* 黑幕覆蓋全螢幕（含 NAV） */
    .modal-backdrop{
        position: fixed; inset: 0;
        display: flex; align-items: flex-end; justify-content: center;
        padding: 0 8px 0; /* 底部距由 modal 控制 */
        background: rgba(0,0,0,.45);
        z-index: 9999; /* 蓋過 NAV */
    }

    /* Modal 本體貼在 NAV 上緣，不蓋到按鈕 */
    .modal{
        position: fixed;
        left: 50%; transform: translateX(-50%);
        bottom: calc(var(--nav-bottom-h) + var(--safe-bottom));
        width: min(520px, calc(100vw - 16px));
        max-height: calc(100vh - var(--nav-bottom-h) - var(--safe-bottom) - 12px);
        margin: 0;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
        box-shadow: 0 8px 24px rgba(0,0,0,.22);
        border-radius: 12px;
    }
}