.modal { display: none; position: fixed; z-index: 9999; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; }   
.modal:after{ content:""; z-index: -2; position: fixed; left: 0; top: 0; width: 100%; height: 100%;  background-color: rgba(0,0,0,0.2);}
.modal-content { 
	background-color: #fefefe; padding: 50px 30px 30px; width: 600px; max-width: 90%; border-radius: 10px; position: relative; z-index: 9;
	-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; 
	box-shadow: 1px 1px 50px rgb(0 0 0 / 30%);
}
/* 修復：關閉按鈕的 × 符號改用 CSS 轉義序列 \00d7，避免 UTF-8 編碼問題導致顯示為 × */
/* Fix: use CSS escape \00d7 for the close button × symbol to avoid encoding issues */
.modal-content:before { content: "\00d7"; font-size: 30px; line-height: 1em; pointer-events: none; margin-bottom: 10px; position: absolute; top: 10px; right: 20px; }
.modal-content:hover:before { opacity: .7; }
.modal .modal-title{height: 38px; width: 100%; margin-left: -30px; margin-top: -50px;position: absolute;z-index: -2;}
.modal .close { position: absolute; width: 40px; height: 38px; top: 0; right: 0; z-index: -1; }
.buttons { text-align: right; padding-top: 20px; }
.modal button { width: 80px; text-align: center; background-color: #fadb00; color: #000; cursor: pointer; }
.modal > .shade{
	position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    z-index: -1;
}