body {
    font-family: "微軟正黑體", "Microsoft JhengHei", system-ui, sans-serif;
    color: #1a1a1a;
    line-height: 1.6;
    display: flex;
    justify-content: center; /* 水平置中 */
    align-items: flex-start; /* 垂直置中 */
    min-height: 100vh; /* 使 body 至少佔據整個視窗高度 */
    margin: 0; /* 清除預設 margin */
    background-color: #f4f7fa;
    background-image: url("../Images/feedback_bg.png");
    background-position: right 30% top;
    background-repeat: no-repeat;
    background-size: 1280px auto;
}
@media(min-width: 768px) and (max-width:1280px) {
	body{
		background-size: 100% auto;
	}
}
@media (max-width: 767px) {
	body{
		background-size: 150% auto;
	}
}

.content {
    display: block;
    max-width: 800px; /* 設定最大寬度 */
    width: 100%;
    padding: 20px; /* 加入一些內邊距 */
}

.title_img {
    margin : 20px 0 0 0;
    padding: 20px; /* 調整背景與文字之間的間距 */
    background: rgba(255, 255, 255, 0.88);
    border-radius: 12px;
}
.title_img > h1{
	font-size: 3rem;
	color: #0B4E8A;
	font-weight: 600;
	margin: 0;
}
@media (max-width: 767px) {
	.title_img > h1{font-size: 1.75rem;}
}

/* 螢幕閱讀器專用文字（視覺上隱藏，仍可被輔助科技讀取） */
.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.hint {
    font-size: 1rem;
    color: #1a1a1a;
    display: flex;
    justify-content: flex-end;
    margin-top: 0;
}
.req {
    color: #c00000;
    font-weight: 700;
    margin-right: 2px;
}

.field-hint {
    font-size: 0.95rem;
    color: #1a1a1a;
    margin: 0 0 8px 0;
}

/* 錯誤摘要區塊 */
.error-summary {
    width: 100%;
    margin: 16px auto 0 auto;
    padding: 16px 20px;
    border: 2px solid #c00000;
    border-radius: 8px;
    background: #fdecea;
    color: #1a1a1a;
}
.error-summary h2 {
    margin: 0 0 8px 0;
    font-size: 1.15rem;
    color: #c00000;
}
.error-summary ul {
    margin: 0;
    padding-left: 1.25rem;
}
.error-summary li {
    margin: 4px 0;
}
.error-summary:focus {
    outline: 3px solid #c00000;
    outline-offset: 3px;
}

.subtitle {
    width: 90%;
    background-color: #0B4E8A;
    margin: 0 auto; /* 水平置中 */
}
.subtitle p {
    font-weight:bold;
    color: #ffffff;
    padding:4px 4px 4px 10px;
}


.input_container {
    margin: 16px auto 0 auto; /* 水平置中 */
    width: 100%; /* 設定寬度 */
	background-color: #FFF;
	border-radius: 12px;
	display: flex;
	flex-direction: column;
	box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
	border: 2px solid #0B4E8A;
	padding: 20px;
}
.input_container > .field-row {
    display: flex;
    flex-direction: row; /* 水平排列 */
    justify-content: space-between;
	padding: 12px 0;
	border-bottom: 1px solid #d0d0d0;
}
.input_container > .field-row > .input-label{
	width: 130px;
	flex-shrink: 0;
}
.input_container > .field-row > .input-full{
	flex-grow: 1;
}
.input-label {
    text-align: left;
    border-radius: 5px;
    margin-left: 3px;
    padding-right: 5px;
}
.input-label label {
    color: #0B4E8A;
    font-weight: bold;
}

.input-full {
    flex-grow: 1;
}

/* 表單控制項：尺寸、對比、外框 */
.input-full input[type="text"],
.input-full input[type="tel"],
.input-full input[type="email"],
.dropdownlist,
.large-textbox {
    width: 100%;
}
.input-full input[type="text"],
.input-full input[type="tel"],
.input-full input[type="email"],
.input-full textarea,
.dropdownlist,
.large-textbox,
.validate-input {
    font-size: 1rem;
    font-family: inherit;
    padding: 8px 10px;
    border: 1px solid #595959;
    border-radius: 6px;
    box-sizing: border-box;
    color: #1a1a1a;
    background-color: #ffffff;
}
.validate-input {
    width: 100%;
    max-width: 160px;
}
::placeholder {
    color: #595959;
    opacity: 1;
}

/* 驗證失敗欄位標示（顏色以外另有粗外框，不單靠顏色傳達） */
[aria-invalid="true"] {
    border: 2px solid #c00000 !important;
    background-color: #fff8f8 !important;
}

/* 欄位內的錯誤訊息（配合 aria-describedby，焦點移到欄位時報讀） */
.field-error {
    display: block;
    margin-top: 6px;
    color: #c00000;
    font-size: 0.95rem;
    font-weight: 700;
}
.field-error:empty {
    display: none;
}
.field-error::before {
    content: "⚠ ";
}

/* 錯誤摘要中的連結 */
.error-summary a {
    color: #c00000;
    font-weight: 700;
}

/* 明確可見的鍵盤焦點樣式 */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.btn:focus-visible {
    outline: 3px solid #0B4E8A;
    outline-offset: 2px;
}

.submit {
    text-align: center;
	margin: 20px 0;
}
.submit .btn {
    font-size: 1.1rem;
    padding: 8px 32px;
}

.validate-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

#imgValidate {
    width: 110px;
    height: 40px;
    border: 1px solid #595959;
}

@media (max-width: 767px) {
	.input_container > .field-row {
		display: flex;
		flex-direction: column;
		padding: 10px 0;
	}
	.input_container > .field-row > .input-label {
		width: auto;
		margin-bottom: 4px;
	}
	.validate-input {
		max-width: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
}