/* -----------------------------------------------------
   字體設定：優先使用思源黑體，其次為各作業系統無襯線字體
----------------------------------------------------- */
html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden; /* 阻止捲動條出現 */
    font-family: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
    font-size: 14px;
    background-color: #000;
    box-sizing: border-box;
}

/* 防止 Bootstrap 的元素增加多餘空間 */
*, *::before, *::after {
    box-sizing: inherit;
    margin: 0;
    padding: 0;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

/* -----------------------------------------------------
   按鈕與表單元件：獲得焦點時的高亮視覺效果
----------------------------------------------------- */
.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

/* -----------------------------------------------------
   背景圖：強制鋪滿可視區域
----------------------------------------------------- */
body {
    background-image: url('/fig/20250517104415.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 100vh;
    max-height: 100vh;
    overflow: hidden; /* 再次限制 body 高度 */
}

/* -----------------------------------------------------
   置中盒子樣式：min 350px，max 400px，寬度 100%
----------------------------------------------------- */
.center-box-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh; /* 完全填滿瀏覽器 */
}

.center-box {
    min-width: 350px;
    max-width: 400px;
    width: 100%;
    padding: 2rem;
    background-color: rgba(255, 255, 255, 0.80); /* 白色半透明 */
    backdrop-filter: blur(8px);
    border-radius: 1rem;
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
}