/* 定義全域變數：Thomas Dance 品牌配色 */
:root { --brand-orange: #d85d2b; --brand-blue: #001f3f; --soft-gray: #f8f9fa; 
	--prog-action: 100px; --primary-orange: #d85d2b; --deep-blue: #001f3f; 
	--bg-color: #f0f2f5; --text-main: #2c3e50; --card-bg: #ffffff; }
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", 
	Roboto, sans-serif; background-color: #f0f2f5; margin: 0; padding: 0; }
table { background: var(--card-bg); border-radius: 15px; padding: 6px; 
	margin-bottom: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); width: 96%; 
    	border-collapse: separate !important; border-spacing: 0; 
	overflow: hidden; border: none; margin: 0 auto; }
th, td { border: none !important; padding: 4px 12px; }
tr:last-child td { border-bottom: none; }
tr:nth-child(even) { background-color: var(--bg-color); }

/* app form專用皮膚-放在這邊比較優先(後面) div or span or  */
div.debug { display:flex; position:sticky; width:98%; top:0; margin: 0 auto; 
	min-height:72px; border-radius:8px; font-size:15px; } /* #e53e00 */
/* 1.top css */
.topouter { display: flex; position: sticky; top: 0; width: 100%;
	background: linear-gradient(135deg, var(--brand-blue) 0%, #003366 100%);
	color: white; min-height: 55px; align-items: center;
	box-shadow: 0 4px 12px rgba(0,0,0,0.15); z-index: 1000; }
.topleft { width: 25%; padding-left: 8px; }
.topleft a { color: white; text-decoration: none; font-size: 14px; }
.topmiddle { display: flex; width: 50%; flex-direction: column; 
	align-items: center; text-align: center; }
.topright { width: 25%; padding-right: 8px; align-items: center; text-align: right; justify-content:right; }
.top-main { font-size: 18px; font-weight: bold; letter-spacing: 1px; }
.top-sub { font-size: 12px; } /* opacity: 0.8; */
.topgolink { font-size:15px; color: white; }
.topgolink:hover { color:darkblue; font-weight:bold; background-color:#ffe8e0; } /* #ffc7b2 */ 
.redbold { color:red; font-weight:bold; }
.lineinterval { width:100%; height:8px; color:#F5F5F5; }

/* 輸入欄位名稱樣式 */
.input-label { display: block; font-size: 14px; font-weight: bold; color: #555;
	margin-bottom: 1px; }
.input-label span { font-size: 11px; color: #999; font-weight: normal;
	margin-left: 5px; }
.agree-text { font-size: 11px; font-weight: normal; text-align: center; width: 100%; } 

/* 輸入欄位欄位樣式 */
.form-control { width: 100%; border: none; border-bottom: 1px solid #eee;	
	padding: 4px 0px; font-size: 16px; outline: none; transition: all 0.3s; 
	box-sizing: border-box; padding-left: 4px; color: var(--brand-blue); }
.form-control:focus { border-bottom: 2px solid var(--brand-orange); 
	background: #fffcfb; }
.form-control[readonly] { background-color: transparent; color: var(--brand-blue);
	font-weight: bold; }
.form-control-readonly { width: 100%; border: none; border-bottom: 1px solid #eee;	
	padding: 4px 0px; font-size: 16px; outline: none; transition: all 0.3s; 
	box-sizing: border-box; padding-left: 4px; color: var(--brand-blue); 
	font-weight: bold; }

/* 備註說明區 */
.notice { display: block; background-color: #ffffff; border-radius: 12px; 	
	padding: 16px; width: 96%; margin: 15px auto; 
	box-sizing: border-box; border-left: 5px solid var(--brand-blue);
	box-shadow: 0 2px 10px rgba(0,0,0,0.05);
	line-height: 1.8; font-size: 16px; color: #666; }
.notice-title { font-weight: bold; color: var(--brand-blue); margin-bottom: 8px; 
	display: flex; align-items: center; }
.notice-title i { margin-right: 8px; }/* 底部按鈕區 */
.notice-card { background: linear-gradient(135deg, #002d5b 0%, #001f3f 100%);
	color: white; border-radius: 16px; padding: 18px;
	margin-bottom: 25px; box-shadow: 0 6px 15px rgba(0,31,63,0.2); }
.notice-card h3 { margin: 0 0 10px 0; font-size: 16px; color: #ffeb3b; }
.notice-card p { margin: 5px 0; font-size: 13px; line-height: 1.5; opacity: 0.9; }
.newline { white-space: pre-line; }

/* 底部動態結帳列 */
.bottomouter { display: flex; position: fixed; bottom: 0; left: 0; right: 0; 
	background-color: #f0f2f5; justify-content: center; align-items: center;
	border-top: 1px solid #eee; box-shadow: 0 -5px 15px rgba(0,0,0,0.05); 
	width: 100%; box-sizing: border-box; }
.btn-submit { background: var(--brand-blue); color: white;
	border: none; width: 60%; padding: 6px 0px; border-radius: 25px;
	font-size: 18px; font-weight: bold; box-sizing: border-box; }
.btn-submit:active { transform: scale(0.95); opacity: 0.9; }.newline { white-space: pre-line; }

/* 處理後訊息回覆格式 */
div.outer { display:flex; position:fixed; top:30%; width:100%; text-align:center; 
	justify-content:center; }
div.message { display:flex; width:180px; min-height:60px; background-color:#f0f0f0; 
	border:1px solid #d4d4d4; border-radius:8px; box-shadow: 2px 2px 2px gray;
 	text-align:center; justify-content:center; 	align-items:center; font-size:16px; 
	font-weight: bold; color:red; }
div.response { display:flex; width:180px; min-height:60px; background-color:#f0f0f0; 
	border:1px solid #d4d4d4; border-radius:8px; box-shadow: 2px 2px 2px gray;
 	text-align:center; justify-content:center; 	align-items:center; font-size:16px; 
	font-weight: bold; color:red; }

/* a:link { color:black; } */
a:hover { color:darkblue; font-weight:bold; background-color:#dce5f9; 
	cursor: pointer; }
a:active { color:#FFFF66; }
a:visited { color:black; font-weight:bold; }