body {
    font-size: 14px;
    font-family: "微軟正黑體", "Microsoft JhengHei", Arial, Calibri;
    color: #333;
    margin: 0;
}

main {
    margin: 0 auto;
    max-width: 1040px;
    border: 1px solid blue;
}

.logo-section {
    position: relative;
    width: 100%;
}

.logo-section img {
    width: 100%;
    display: block;
}

.overlay-text {
    position: absolute; /* 關鍵：脫離文件流，進行疊加 */
    bottom: 8px;
    right: 12px;    
    color: yellow;    
    font-weight: bold;        
}

.epw-table {
    width: 100%;
    border-collapse: collapse;    
}

    .epw-table .epw-title {
        width: 100%;
        text-align: center;
        background-color: lightyellow;
        border-bottom: 1px solid lightblue;
    }

    .epw-table td {
        height: 50px;
        border-bottom: 1px dashed lightblue;
        padding: 5px 10px;
    }

.epw-hdr {
    width: 30%;
    padding: 0 10px;
    text-align: right;
    border-right: 1px dashed lightblue;
}

/*.epw-input {
    width: 30%;   
}
*/
    .epw-input input {
        border: 1px solid #cae4ff;
    }

.epw-captcha {
    display: flex;
    align-items: center;
    gap: 2px;
}

    .epw-captcha img {
        width: 66px;
        height: 24px;
        border: 1px solid #cae4ff;
    }

    .epw-captcha button:not(.validation-close-btn) {
        width: 26px;
        height: 26px;
        border-radius: 4px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

.actions {
    padding: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

    .actions button {
        width: 100px;
        height: 32px;
        border: 1px none currentColor;
        color: white;
        background-color: grey;
        border-radius: 4px;
        transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
    }

        .actions button:hover {
            cursor: pointer;
            background-color: #5f5f5f;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
        }

@media (max-width: 768px) {
    .epw-table,
    .epw-table tbody,
    .epw-table tr,
    .epw-table td {
        display: block;
        width: 100%;
    }

        .epw-table td {
            height: auto;
            border-bottom: none;
            padding: 6px 10px;
        }

        .epw-table .epw-title td {
            text-align: left;
            border-bottom: 1px solid lightblue;
            padding: 10px;
        }

    .epw-hdr {
        text-align: left;
        border-right: none;
        padding-top: 12px;
        padding-bottom: 4px;
    }

    .epw-input {
        padding-top: 0;
        padding-bottom: 6px;
    }
}

.input-wrapper {
    position: relative;
    display: inline-block;
}

.input-wrapper .field-validation-error {
    display: block;
    position: absolute;
    left: calc(100% + 14px);
    top: 50%;
    transform: translateY(-50%);
    background: #ee0101;
    color: #fff;
    font-size: 11px;
    padding: 4px 24px 4px 10px;
    border-radius: 6px;
    border: 2px solid #ddd;
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.5);
    white-space: nowrap;
    z-index: 990;
}

.input-wrapper .field-validation-error::before {
    content: '';
    position: absolute;
    right: 100%;
    top: 50%;
    transform: translateY(-50%);
    border: 6px solid transparent;
    border-right-color: #ee0101;
}

.input-wrapper .field-validation-valid {
    display: none;
}

.validation-close-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 4px;
    width: 16px;
    height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 4px;
    color: #fff;
    font-size: 11px;
    font-weight: bold;
    cursor: pointer;
    line-height: 1;
    padding: 0;
    transition: background 0.2s ease, border-color 0.2s ease;
}

    .validation-close-btn:hover {
        background: rgba(255, 255, 255, 0.4);
        border-color: #fff;
    }