styles.css

/* 1. 強制鎖定螢幕，不允許捲動 */
body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    overflow: hidden; /* 關鍵：禁止全局捲動 */
}

/* 2. 背景圖設定 */
body {
    background: url('https://i.pinimg.com/736x/b4/2e/50/b42e50d88af51df3efeccd8e105d6e55.jpg') no-repeat center center fixed;
    background-size: cover;
}

/* 3. 主容器佔滿全螢幕 (100% 可視高度) */
.app-container {
    display: flex;
    flex-direction: column;
    height: 100vh; /* 使用 100% 視窗高度 */
    height: -webkit-fill-available; /* 修正行動裝置瀏覽器工具欄遮擋問題 */
    width: 100vw;
}

/* 4. 如果內容太多，只讓中間區域內部捲動，外部不變 */
.content {
    flex: 1;
    overflow-y: auto; /* 只有這裡可以捲動，像聊天視窗一樣 */
    padding: 20px;
    /* 這裡處理左右的安全區域 */
    padding-left: calc(20px + env(safe-area-inset-left));
    padding-right: calc(20px + env(safe-area-inset-right));
}

/* 5. 頂部與底部依然保持 Safe Area */
.safe-header {
    padding-top: env(safe-area-inset-top);
    background: rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(10px);
}

.safe-footer {
    padding-bottom: env(safe-area-inset-bottom);
    background: rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(10px);
}