@charset "utf-8";

/* ===================================================================
   個人資料保護表格 - WCAG 2.1 Level AA
   符合無障礙規範和響應式版面
   =================================================================== */

/* h2 標題樣式 */
h2 {
	color: #94a5ba;
	text-shadow: 2px 2px 0 #FFF,
	             -2px 2px 0 #FFF,
	             2px -2px 0 #FFF,
	             -2px -2px 0 #FFF,
	             1px 1px 0 #FFF,
	             -1px -1px 0 #FFF,
	             1px -1px 0 #FFF,
	             -1px 1px 0 #FFF;
}

.pdp-table {
	border-collapse: separate; /* 改為 separate 以支援 border-spacing */
	border: 5px solid #FFF; /* 白色5px外框 */
	border-radius: 5px; /* 5度圓角 */
	border-spacing: 2px; /* 行列間距為2px */
	color: #333;
	background: #FFF; /* 背景設為白色，讓border-spacing的間隙顯示為白色 */
	font-size: 1.0em;
	line-height: 140%;
	margin: 20px auto;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	font-family: "微軟正黑體", "新細明體", sans-serif;
	overflow: hidden; /* 確保圓角不被內容覆蓋 */
	table-layout: fixed; /* 固定表格佈局以控制欄位寬度 */
}

/* 設定第一欄寬度為 90% */
.pdp-table th:first-child,
.pdp-table td:first-child {
	width: 83%;
}

/* 設定第二欄寬度為 10% */
.pdp-table th:last-child,
.pdp-table td:last-child {
	width: 17%;
}

.pdp-table th {
	border: none; /* 移除單獨邊框 */
	padding: 12px 15px; /* 增加欄位間距 */
	text-align: center;
	background-color: #8599b1; /* 標題列背景顏色 */
	color: #fff;
	font-weight: bold;
}

.pdp-table thead tr:first-child th:first-child {
	border-top-left-radius: 4px; /* 表頭左上圓角 */
}

.pdp-table thead tr:first-child th:last-child {
	border-top-right-radius: 4px; /* 表頭右上圓角 */
}

.pdp-table td {
	border: none; /* 移除單獨邊框 */
	padding: 12px 15px; /* 增加列與欄的間距 */
	vertical-align: top;
}

/* 單數列（奇數列）背景色 */
.pdp-table tbody tr:nth-child(odd) td {
	background-color: #efefef;
}

/* 雙數列（偶數列）背景色 */
.pdp-table tbody tr:nth-child(even) td {
	background-color: #fff;
}

/* 最後一列的圓角處理 */
.pdp-table tbody tr:last-child td:first-child {
	border-bottom-left-radius: 4px;
}

.pdp-table tbody tr:last-child td:last-child {
	border-bottom-right-radius: 4px;
}

/* 連結樣式 */
.pdp-table a {
	color: #0066cc;
	text-decoration: underline;
	font-weight: normal;
}

.pdp-table a:hover,
.pdp-table a:focus {
	color: #FF4B27;
	text-decoration: none;
	outline: 2px solid #000;
	outline-offset: 2px;
}

.pdp-table a:visited {
	color: #551a8b;
}

/* ===================================================================
   響應式設計 - WCAG 2.1 Level AA 成功準則 1.4.10
   =================================================================== */

/* 平板和小螢幕 (768px 以下) */
@media (max-width: 768px) {
	.pdp-table {
		width: -moz-calc(100% - 4px);
		width: -webkit-calc(100% - 4px);
		width: calc(100% - 4px);
		font-size: 0.95em;
		margin: 15px auto;
	}

	.pdp-table th,
	.pdp-table td {
		padding: 10px 12px;
		font-size: 0.95em;
	}
}

/* 手機螢幕 (480px 以下) */
@media (max-width: 480px) {
	.pdp-table {
		font-size: 0.8em;
		margin: 10px auto;
	}

	.pdp-table th,
	.pdp-table td {
		padding: 8px 10px;
		font-size: 0.9em;
	}
}

/* 極小螢幕 (320px) */
@media (max-width: 320px) {
	.pdp-table {
		font-size: 0.75em;
	}

	.pdp-table th,
	.pdp-table td {
		padding: 6px 8px;
	}
}