﻿body {
}

.fontexplanation {
    font-family: 微軟正黑體;
}

.inputbox {
    width: 180px;
}

.alerttext{
    color: red;
    font-size: 16px;
    margin-top: 5px;
}

/* 外層容器：平時填滿 90% */
.login-container {
    /*width: 100%;*/
    margin: 0 auto;
    display: flex;
    flex-direction: column; /* 垂直排列整體的 Top, Content, Bottom */
}
/* 上方圖片區域容器 */
.top-section {
    /*width: 100%;*/ /* 佔滿父層 login-container 的 90% */
    text-align: center; /* 確保內容居中 */
    margin-bottom: 10px; /* 與下方 A/B 區塊保持間距 */
    overflow: hidden; /* 防止圖片溢出 */
    background-color: #024438;
}
/* 上方圖片自適應 */
.responsive-img {
    /*width: 100%;*/
    height: auto;
    display: block;
}
/* 中間區域：預設橫向排列 */
.content-section {
    display: flex;
    flex-direction: row; /* 大螢幕：A 在左，B 在右 */
    width: 100%;
}

.content-a {
    flex: 0 0 40%;
    background-color: #f0f0f0; /* 方便辨識，可刪除 */
    padding: 15px;
}

.content-b {
    flex: 0 0 60%;
    /*background-color: #e0e0e0;*/ /* 方便辨識，可刪除 */
    padding: 15px;
}
/* 下方說明文字 */
.bottom-section {
    /*width: 100%;*/
    /*padding: 20px 0;*/
    text-align: center; /* 置中文字 */
    background-image: url('../image/bottom3.png');
}
.desktop-only {
    display: inline; /* 電腦版正常顯示 */
}
/* 行動裝置設定 (螢幕寬度小於 768px) */
@media (max-width: 768px) {
    .content-section {
        /* 關鍵：改為垂直排列，並反轉順序 (B變上方，A變下方) */
        flex-direction: column-reverse;
    }

    .content-a, .content-b {
        flex: 0 0 100%; /* 寬度填滿 */
        width: 95%;
        /*text-align: center;*/
    }

    .login-container {
        width: 95%; /* 手機端稍微加寬，善用空間 */
    }
    .inputbox {
        /*width: 100% !important;*/ /* 手機版撐滿容器 */
        padding: 15px; /* 增加高度，方便手指點擊 */
        font-size: 16px; /* 再次強調，不可小於 16px */
        margin-bottom: 15px; /* 增加輸入框之間的間距 */
        display: block;
    }
    .addbtn {
        width: 90%; /* 寬度填滿頁面 */
        padding: 15px 0; /* 增加上下高度，方便手指點擊 (Touch Target) */
        font-size: 18px; /* 稍微放大字體 */
        display: block; /* 確保寬度 100% 生效 */
        margin: 10px auto; /* 增加上下間距並水平置中 */
    }
    .fontbottom {       
        font-size: 15px;        
    }
    .desktop-only {
        display: none; /* 電腦版正常顯示 */
    }
}