/* =========================================
   1. 全域設定
   ========================================= */
:root {
    --main-width: 90%; 
    --max-app-width: 480px;
}

body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100vh; 
    height: calc(var(--vh, 1vh) * 100); /* Mobile Viewport Fix */
    overflow: hidden;
    font-family: "Microsoft JhengHei", sans-serif;
    
    /* 背景設定 */
    background: url("./Image/UI/LoginPageBackground.png") no-repeat center center fixed;
    background-size: cover;
    
    display: flex;
    justify-content: center;
    align-items: center;
}

/* =========================================
   2. 主版面容器
   ========================================= */
.AppContainer {
    width: var(--main-width);
    max-width: var(--max-app-width);
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    /* 確保內容不會被劉海遮到 */
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
    box-sizing: border-box;
}

.LogoArea {
    width: 100%;
    display: flex;
    justify-content: center;
    flex-grow: 1;
    align-items: center;
}

#LoginPageDecoration {
    width: 100%;
    height: 65vh; 
    background: url("./Image/UI/LoginPageDecoration.png") no-repeat center center;
    background-size: contain;
}

/* =========================================
   3. 按鈕區域
   ========================================= */
.LoginButtonArea {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    margin-bottom: 10vh;
}

.LoginButton {
    /* 1. 基本尺寸與背景 */
    width: 90%;
    max-width: 450px;
    /* 2. 高度自適應：根據「視窗高度」動態調整 */
    /* 公式：clamp(最小高度, 寬度百分比, 最大高度) */
    height: clamp(80px, 12vh, 110px);
    /*height: 100px;*/
    /* 3. 字體自適應 */
    /* 讓按鈕內的文字也隨螢幕大小微幅變動 */
    gap: clamp(4px, 1vh, 8px);
    border: none;
    outline: none;
    cursor: pointer;
    color: white;
    font-weight: bold;
    background-size: 100% 100% !important;
    background-repeat: no-repeat !important;
    background-color: transparent !important;
    /* 2. 核心：Flexbox 上下置中佈局 */
    display: flex;
    flex-direction: column; /* 讓兩行文字垂直排列 */
    justify-content: center; /* 垂直置中：分配上下剩餘空間，讓文字在中央 */
    align-items: center; /* 水平置中 */
    /* 3. 精確微調 */
    line-height: 1.1; /* 縮小行高，避免 span 帶有額外的上下空白 */
    gap: 5px; /* 「主標題」與「副標題」之間的固定距離 */
    /* 4. 視覺平衡修正 */
    padding-top: 0px;
    padding-bottom: 3px;
}

/* 文字的大小也改為自適應 */
.BtnText-Large {
    /*font-size: 1.5rem;*/
    font-size: clamp(1.2rem, 4vw, 1.6rem);
    display: block;
}

.BtnText-Small {
    /*font-size: 0.85rem;*/
    font-size: clamp(0.75rem, 2.5vw, 0.9rem);
    display: block;
}

.Btn-Green { background-image: url("./Image/UI/Button_Green.png"); }
.Btn-Purple { background-image: url("./Image/UI/Button_Purple.png"); }

#FbButton.Hidden { display: none; }

/* =========================================
   4. 彈出視窗 (Modal / Panel)
   ========================================= */
.ModalPanel, .CommonMask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 50;
    display: none; /* 預設隱藏 */
    justify-content: center;
    align-items: center;
}

/* 機構登入面板內容 */
.PanelContent {
    width: 90%;
    max-width: 400px;
    background: url("./Image/UI/Frame_Login.png") no-repeat center center;
    background-size: 100% 100%;
    padding: 40px 20px;
    box-sizing: border-box;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    aspect-ratio: 1 / 0.9;
}

.CloseBtn, .HintFrameCloseButton {
    position: absolute;
    top: -5px;
    right: -5px;
    width: 50px;
    height: 50px;
    background-image: url("./Image/UI/Button_Close_Blue.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    cursor: pointer;
}
/* 提示框的關閉按鈕樣式微調 */
.HintFrameCloseButton {
    background-image: url('./Image/UI/Button_Close.png'); 
    top: 5px; right: 5px;
}

.InputGroup { width: 75%; margin-bottom: 15px; margin-top: 5px;}
.InputLabel { color: white; font-weight: bold; margin-bottom: 5px; font-size: 1.1rem; }

.UserLoingTextBox {
    width: 100%; height: 40px;
    background: url("./Image/UI/Frame_Login_Type.png") no-repeat center center;
    background-size: 100% 100%;
    border: none; padding: 0 10px; color: white; font-size: 1rem; box-sizing: border-box;
}

.ActionBtn {
    width: 80%; height: 70px; margin-top: 10px;
    background: url('./Image/UI/Button_Login.png') no-repeat center center;
    background-size: contain;
    border: none; color: white; font-weight: bold; font-size: 1.2rem; cursor: pointer;
	padding-bottom: 5%;
}

/* =========================================
   5. 通用提示框 (Common Hint Frame)
   ========================================= */
.CommonHintFrame {
    width: 85%;
    max-width: 380px;
    height: clamp(180px, 20vh, 300px);
    /*aspect-ratio: 1.7 / 1;*/
    background: url('./Image/UI/Frame_Text_Normal.png') no-repeat center center;
    background-size: 100% 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* 提示文字 */
#HintContent {
    font-size: 1.2rem;
    font-weight: bold;
    color: saddlebrown;
    text-align: center;
    margin-bottom: 15px;
    padding: 0 20px;
}

/* Loading 動畫圖示 */
#HintLoadingIcon {
    width: 50px; height: 50px; margin: 10px auto;
    background: url("./Image/UI/Waiting.gif") no-repeat center center;
    background-size: contain;
}

/* 提示框內的按鈕區容器 */
#commonHintFrameButtonArea {
    display: flex; gap: 20px;
    justify-content: center; width: 100%;
}

/* 提示框內的按鈕樣式 */
.HintActionBtn {
    width: 100px; height: 45px;
    border: none; color: white; font-weight: bold; cursor: pointer;
    font-size: 1rem;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-color : transparent;
    display: flex; justify-content: center; align-items: center;
}

/* =========================================
   6. 動畫關鍵影格 (保留 JS 呼叫用)
   ========================================= */
@keyframes ZoomIn {
    0% { transform: scale(0); }
    100% { transform: scale(1); }
}

@keyframes SlideTop {
    0% { opacity: 1; transform: translateY(0); }
    100% { opacity: 0; transform: translateY(-250px); }
}

@keyframes BounceIn {
    0% { opacity: 0; transform: translateY(-250px); }
    38% { opacity: 1; transform: translateY(0); }
    55% { transform: translateY(-65px); }
    72% { transform: translateY(0); }
    81% { transform: translateY(-28px); }
    90% { transform: translateY(0); }
    95% { transform: translateY(-8px); }
    100% { transform: translateY(0); }
}

/* =========================================
   寬版螢幕 / 電腦版 / 橫向平板 特別設定
   (當螢幕寬度大於 768px 時生效)
   ========================================= */
@media screen and (min-width: 768px) {
    :root {
        --max-app-width: 800px;
    }

    .LoginButtonArea {
        flex-direction: row;
        justify-content: center;
        gap: 20px;
    }

    .LoginButton {
        width: 45%;
        max-width: 280px;
        height: 100px;
    }

    #LoginPageDecoration {
        height: 75vh;
    }

    /* --- 彈出視窗 電腦版優化 --- */
    .PanelContent {
        width: 400px; /* 固定合適寬度 */
        /*height: auto;*/ /* 高度隨內容增長 */
        height: 85vh; /* 限制高度不超出螢幕 */
        min-height: 150px;
        max-height: 400px;
        aspect-ratio: auto; /* 解除原本的比例限制 */
        padding: 40px 30px;
    }

    .InputLabel {
        font-size: 1.2rem;
    }

    .UserLoingTextBox {
        height: 45px;
        font-size: 1.1rem;
    }
}

/* =========================================
   通用手機橫向模式 (支援 Android & iOS)
   條件：橫向 (landscape) 且 螢幕高度小於 500px
   ========================================= */
@media screen and (orientation: landscape) and (max-height: 500px) {

    body {
        /* 允許捲動，防止內容被工具列擋死 */
        overflow-y: auto !important;
        height: auto !important;
        min-height: 100vh;
    }

    .AppContainer {
        height: auto;
        min-height: 100vh;
        justify-content: flex-start; /* 改為從頂部排列，避免垂直置中導致頭尾不見 */
        padding: 10px 5%;
        gap: 5px;
    }

/*    .AppContainer {
        width: 100%;
        max-width: none;
        padding: 0 5%;
        justify-content: center;
        gap: 5px;
    }*/

    #LoginPageDecoration {
        height: 50vh;
        margin-top: 0px;
    }

    .LoginButtonArea {
        flex-direction: row;
        width: 100%;
        justify-content: center;
        gap: 15px;
        margin-bottom: 2vh;
    }

    .LoginButton {
        width: 42%;
        max-width: 220px;
        min-width: 130px;
        height: 70px;
        gap: 2px;
        /*padding-top: 5px;*/ /* 視覺位置微調 */
    }

    .BtnText-Large {
        font-size: clamp(1.1rem, 2.8vw, 1.4rem);
    }

    .BtnText-Small {
        font-size: clamp(0.55rem, 1.8vw, 0.8rem);
    }

    /* --- 彈出視窗 手機橫向極限優化 --- */
    .PanelContent {
        width: 90%;
        max-width: 500px;
        height: 75vh; /* 限制高度不超出螢幕 */
        aspect-ratio: auto; /* 強制解除 1/0.9 的比例 */
        padding: 15px 40px;
        display: flex;
        flex-direction: row; /* 內容改橫排 */
        flex-wrap: wrap; /* 自動換行 */
        justify-content: space-around;
        align-items: center;
        overflow-y: auto; /* 萬一內容太多可滾動 */
    }

    /* 橫向時，縮減輸入框組的垂直佔比 */
    .InputGroup {
        width: 45%; /* 帳號密碼並排顯示 */
        margin-bottom: 5px;
        margin-top: 5px;
    }

    .InputLabel {
        font-size: 0.9rem;
        margin-bottom: 2px;
    }

    .UserLoingTextBox {
        height: 32px;
        font-size: 0.9rem;
    }

    /* 橫向時，縮減登入按鈕大小 */
    .ActionBtn {
        width: 40%;
        height: 50px;
        padding-bottom: 3%;
        font-size: 1rem;
    }

    /* 關閉按鈕稍微縮小，以免擋到內容 */
    .CloseBtn, .HintFrameCloseButton {
        width: 35px;
        height: 35px;
        top: 5px;
        right: 5px;
    }
}

/* =========================================
   寬版螢幕 / 電腦版 / 橫向平板 特別設定
   (當螢幕寬度大於 768px 時生效)
   ========================================= */
/*@media screen and (min-width: 768px) {*/

    /* 1. 放寬主容器的最大寬度 */
    /* 因為按鈕要並排，如果容器還是維持手機寬度(480px)會太擠 */
    /*:root {
        --max-app-width: 800px;
    }*/

    /* 2. 按鈕區域改為「橫向」排列 */
    /*.LoginButtonArea {
        flex-direction: row;*/ /* 關鍵：變成橫排 */
        /*justify-content: center;*/ /* 置中對齊 */
        /*gap: 20px;*/ /* 增加按鈕之間的距離 */
    /*}*/

    /* 3. 調整按鈕寬度 */
    /* 手機版是寬度 90% (佔滿一行)，電腦版改成約 45% (兩人平分) */
    /*.LoginButton {
        width: 45%;
    }*/

    /* 微調：讓背景圖的裝飾區在電腦版稍微大一點 */
    /*#LoginPageDecoration {
        height: 75vh;
    }
}*/

/* =========================================
   通用手機橫向模式 (支援 Android & iOS)
   條件：橫向 (landscape) 且 螢幕高度小於 500px (確保是手機)
   ========================================= */
/*@media screen and (orientation: landscape) and (max-height: 500px) {*/

    /* 1. 主容器：最大化利用寬度 */
    /*.AppContainer {
        width: 100%;*/ /* 填滿寬度 */
        /*max-width: none;*/ /* 解除原本的手機寬度限制 */
        /*padding: 0 5%;*/ /* 左右留一點緩衝，避免太貼邊 */
        /*justify-content: center;
        gap: 5px;*/ /* 盡量縮小元件間距 */
    /*}*/

    /* 2. Logo 區域：極限縮小 */
    /*.LogoArea {
        flex-grow: 0;*/ /* 禁止它佔據多餘空間 */
    /*}

    #LoginPageDecoration {*/
        /* 使用 vh (視窗高度) 來控制，確保不會蓋到按鈕 */
        /*height: 65vh;
        margin-top: 0px;
    }*/

    /* 3. 按鈕區域：橫向排列且充滿彈性 */
    /*.LoginButtonArea {
        flex-direction: row;
        width: 100%;*/ /* 區域填滿橫寬 */
        /*justify-content: center;
        gap: 15px;*/ /* 按鈕之間的間距 */
        /*margin-bottom: 2vh;
    }*/

    /* 4. 按鈕本體：自適應縮放 (關鍵修改) */
    /*.LoginButton {*/
        /* 使用百分比：每個按鈕佔 42% 寬度 (42+42+gap 剛好填滿) */
        /*width: 42%;*/
        /* 限制最大與最小寬度，避免在超長螢幕變太長，或小螢幕變太擠 */
        /*max-width: 220px;
        min-width: 130px;
        height: 70px;*/ /* 固定高度，確保手指好點擊 */
        /*gap: 2px;
    }*/

    /* 5. 文字自適應：稍微縮小以防換行 */
    /*.BtnText-Large {
        font-size: clamp(1.1rem, 3vw, 1.4rem);
    }

    .BtnText-Small {
        font-size: clamp(0.55rem, 2.1vw, 0.8rem);
    }
}*/