/* RWD 樣式，僅透過 #page-search-m 前綴 scope，不影響其他頁面 */

#page-search-m .site-wrapper {
	max-width: 995px;
	width: 100%;
	margin: 0 auto;
	box-sizing: border-box;
	text-align: left;
}

#page-search-m-header {
	position: relative;
	background-image: url(../images/head.gif);
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

/* header.jsp 內層 table 原生固定 width=995，螢幕小於此值時改為流體 100% 避免橫向捲軸 */
#page-search-m-header table {
	width: 100%;
	max-width: 995px;
}

/* 語言切換(日/EN)+上一頁欄位全尺寸移除，保留原本實體以免影響 table 版面 */
#page-search-m-header > div > table > tbody > tr:nth-child(2) > td:nth-child(3) {
	visibility: hidden;
}

/* 手機版導覽選單：預設隱藏，僅於窄螢幕由 JS 組裝 topheader/facebook/日EN 連結後顯示 */
#mobileNavToggle {
	display: none;
	position: absolute;
	top: 3px;
	right: 2px;
	z-index: 20;
	width: 36px;
	height: 25px;
	background: #676767;
	border: 0;
	border-radius: 3px;
	cursor: pointer;
	padding: 0;
}
#mobileNavToggle span {
	display: block;
	width: 20px;
	height: 2px;
	background: #fff;
	margin: 4px auto;
}
#mobileNav {
	display: none;
}
@media (max-width: 768px) {
	#mobileNav.open {
		display: block;
	}
}
#mobileNav .mobile-nav-list {
	list-style: none;
	margin: 0;
	padding: 4px 8px;
	position: absolute;
	top: 42px;
	right: 8px;
	left: 8px;
	z-index: 20;
	background: #ffffff;
	border: 1px solid #cccccc;
	box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}
#mobileNav .mobile-nav-list li {
	padding: 8px 4px;
	border-bottom: 1px solid #e0e0e0;
	text-align: left;
}
#mobileNav .mobile-nav-list li:last-child {
	border-bottom: 0;
}
#mobileNav .mobile-nav-fb img {
	width: 20px;
	height: 20px;
}

#page-search-m .site-content {
	box-sizing: border-box;
	padding: 0 8px;
}

#page-search-m img {
	max-width: 100%;
	height: auto;
}

/* 搜尋列：桌機維持橫向排列，input#q(534px)等固定寬度改用 max-width:100% 讓其在窄螢幕自動縮小 */
#page-search-m .search-bar {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	width: 100%;
	box-sizing: border-box;
}
#page-search-m .search-bar-item {
	box-sizing: border-box;
	min-width: 0;
}
#page-search-m #isAllowIndexedDBInfo {
	max-width: 100%;
	margin-left: 0;
	box-sizing: border-box;
}
#page-search-m input[type="text"],
#page-search-m select,
#page-search-m input[type="submit"],
#page-search-m input[type="button"] {
	max-width: 100%;
	box-sizing: border-box;
}

/* 查詢結果 3 欄：篩選(filter)／清單(booklist)／預覽(preview)，改用 CSS Grid 取代原固定 200/455/265px table */
#page-search-m .results-grid {
	display: grid;
	grid-template-columns: 200px 1fr 265px;
	gap: 8px;
	margin-top: 8px;
	box-sizing: border-box;
}
#page-search-m .grid-filter   { min-width: 0; }
#page-search-m .grid-booklist { min-width: 0; }
#page-search-m .grid-preview  { min-width: 0; }

/* 桌機預設：篩選抽屜的折疊按鈕與關閉鈕隱藏、內容面板常顯 */
#page-search-m .grid-filter-toggle,
#page-search-m .grid-filter-close {
	display: none;
}
#page-search-m .grid-filter-panel {
	display: block;
}

#page-search-m-footer {
	background-image: url(../images/bg_footer.gif);
	padding: 20px;
	box-sizing: border-box;
	text-align: center;
}

@media (max-width: 768px) {
	/* 兩列搜尋：關鍵字＋查詢；欄位＋全文條件＋清除。 */
	#page-search-m #formFulltext {
		margin: 0;
	}
	#page-search-m .search-bar-links {
		margin: 0 0 4px !important;
		line-height: 24px;
		text-align: right;
	}
	#page-search-m .search-bar-links a {
		display: inline-block;
		white-space: nowrap;
	}
	#page-search-m #isAllowIndexedDBInfo {
		width: 100% !important;
		margin: 0 0 4px !important;
	}
	#page-search-m .search-bar {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 56px;
		grid-template-areas: "query query submit" "field fulltext reset";
		gap: 4px;
		align-items: stretch;
	}
	#page-search-m .search-bar-item {
		display: contents;
	}
	#page-search-m .search-bar input,
	#page-search-m .search-bar select {
		width: 100% !important;
		min-width: 0;
		height: 36px !important;
		margin: 0;
		padding: 4px;
		font-size: 16px;
		box-sizing: border-box;
	}
	#page-search-m .search-bar #q { grid-area: query; }
	#page-search-m .search-bar #qf { grid-area: field; }
	#page-search-m .search-bar #ft { grid-area: fulltext; }
	#page-search-m .search-bar #submit { grid-area: submit; }
	#page-search-m .search-bar input[name="reset"] { grid-area: reset; }

	/* 與首頁一致的行動版背景及自動高度。 */
	#page-search-m-header {
		background-image: url(../images/head-rwd.gif);
		background-repeat: no-repeat;
		background-position: 0px 30px;
		background-size: 100% auto;
	}
	#page-search-m-header > div > table {
		height: auto;
	}
	/* header.jsp 為共用檔案不便修改，改用堆疊排版覆寫其固定寬度 table */
	#page-search-m-header table,
	#page-search-m-header table > tbody,
	#page-search-m-header table tr,
	#page-search-m-header table td {
		display: block;
		width: 100% !important;
	}
	#mobileNavToggle {
		display: block;
	}
	#page-search-m-header > div > table > tbody > tr:first-child {
		display: none;
	}
	#page-search-m-header > div > table > tbody > tr:nth-child(2) > td:nth-child(2),
	#page-search-m-header > div > table > tbody > tr:nth-child(3) > td,
	#page-search-m-header > div > table > tbody > tr:nth-child(4) {
		display: none;
	}

}

@media (max-width: 768px) {
	/* 手機與平板使用篩選抽屜；wrapper 不佔用結果 grid 的空白列。 */
	#page-search-m .grid-filter {
		display: contents;
	}
	#page-search-m .grid-filter-toggle {
		display: block;
		font-size: 150%;
		position: fixed;
		top: 50%;
		left: 0;
		transform: translateY(-50%);
		writing-mode: vertical-rl;
		text-orientation: mixed;
		background: #676767;
		color: #fff;
		border: 0;
		padding: 12px 6px;
		border-radius: 0 6px 6px 0;
		box-shadow: 2px 0 6px rgba(0,0,0,0.3);
		z-index: 30;
		cursor: pointer;
	}
	#page-search-m .grid-filter:has(.grid-filter-panel.open) .grid-filter-toggle {
		left: min(80%, 320px);
	}
	#page-search-m .grid-filter-panel {
		display: block;
		position: fixed;
		top: 0;
		left: 0;
		width: min(80%, 320px);
		height: 100%;
		overflow-y: auto;
		background: #fff;
		box-shadow: 2px 0 10px rgba(0,0,0,0.3);
		transform: translateX(-100%);
		transition: transform 0.25s ease;
		z-index: 31;
		padding: 12px;
		box-sizing: border-box;
	}
	#page-search-m .grid-filter-panel.open {
		transform: translateX(0);
	}
	#page-search-m .grid-filter-close {
		display: block;
		margin-left: auto;
		background: none;
		border: 0;
		font-size: 18px;
		line-height: 1;
		cursor: pointer;
	}
	#page-search-m .results-grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 480px) {
	/* 手機螢幕塞不下第三欄書目預覽，點書名可直接進入完整詳情頁 */
	#page-search-m .grid-preview {
		display: none;
	}
}

/* 平板：無預覽時清單滿寬；觸發預覽才展開右欄。 */
@media (min-width: 481px) and (max-width: 768px) {
	#page-search-m .results-grid {
		grid-template-columns: minmax(0, 1fr) 0px;
		column-gap: 0;
		transition: grid-template-columns 0.25s ease, column-gap 0.25s ease;
	}
	#page-search-m .grid-booklist {
		grid-column: 1;
		grid-row: 1;
		width: 100%;
		text-align: left;
	}
	#page-search-m .grid-preview {
		grid-column: 2;
		grid-row: 1;
		height: 0;
		overflow: hidden;
		visibility: hidden;
		opacity: 0;
		transform: translateX(16px);
		transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
	}
	#page-search-m .results-grid.preview-open {
		grid-template-columns: minmax(0, 1fr) 265px;
		column-gap: 8px;
	}
	#page-search-m .results-grid.preview-open .grid-preview {
		height: auto;
		visibility: visible;
		opacity: 1;
		transform: translateX(0);
	}
}

@media (min-width: 481px) and (max-width: 768px) and (prefers-reduced-motion: reduce) {
	#page-search-m .results-grid,
	#page-search-m .grid-preview {
		transition: none;
	}
}

/* 所有共用遮罩的彈窗均在抽屜外：導覽20、抽屜31、遮罩40、彈窗41。 */
#page-search-m > #shadowing {
	z-index: 40;
}
#page-search-m > .classShadowBox,
#page-search-m > #modifybox,
#page-search-m > #msgbox {
	position: fixed;
	left: 50%;
	transform: translateX(-50%);
	min-width: 0;
	max-width: calc(100% - 32px);
	max-height: 80vh;
	max-height: 80dvh;
	box-sizing: border-box;
	overflow: auto;
	overscroll-behavior: contain;
	z-index: 41;
}
#page-search-m > .classShadowBox {
	width: 50%;
	max-width: min(800px, calc(100% - 32px));
}
#page-search-m > #modifybox {
	top: 10%;
	width: 750px;
}
#page-search-m > #msgbox {
	top: 10%;
	width: 400px;
	height: auto;
}
#page-search-m #modifybox textarea,
#page-search-m #modifybox input {
	max-width: 100%;
	box-sizing: border-box;
}
#page-search-m #modifybox table {
	table-layout: fixed;
	width: 100%;
	overflow-wrap: anywhere;
}

@media (max-width: 768px) {
	#page-search-m > .classShadowBox,
	#page-search-m > #modifybox,
	#page-search-m > #msgbox {
		top: 5%;
		width: calc(100% - 32px);
		max-height: 90vh;
		max-height: 90dvh;
		padding: 12px;
		overflow-wrap: anywhere;
	}
	#page-search-m .classShadowBoxHeader {
		top: auto;
		left: auto;
		height: auto;
		min-height: 30px;
		margin: 0 0 8px;
	}
	#page-search-m .classShadowBoxHeaderContent {
		top: auto;
		left: auto;
		width: 100%;
		min-width: 0;
		height: auto;
		max-height: 55vh;
		max-height: 55dvh;
		padding: 0;
		box-sizing: border-box;
		overflow: auto;
	}
	#page-search-m .classShadowBoxHeaderContent table {
		width: 100%;
		table-layout: fixed;
		overflow-wrap: anywhere;
	}
	#page-search-m > .classShadowBox > br {
		display: none;
	}
	#page-search-m > .classShadowBox > div:last-of-type {
		margin-bottom: 8px;
	}
}

/* 結果工具列維持由查詢 JS 控制顯示，僅重排內部為兩列。 */
@media (max-width: 480px) {
	#page-search-m #pagebox1 {
		padding: 6px;
		box-sizing: border-box;
	}
	#page-search-m #pagebox1 .pagebox-actions {
		display: grid !important;
		grid-template-columns: 24px auto minmax(0, 1fr);
		align-items: center;
		gap: 4px;
	}
	#page-search-m #pagebox1 #checkallbook1 {
		width: 20px;
		height: 20px;
		margin: 0;
	}
	#page-search-m #pagebox1 .filter-box-gray {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-height: 32px;
		margin: 0;
		padding: 2px 6px !important;
		box-sizing: border-box;
		white-space: nowrap;
	}
	#page-search-m #pagebox1 .pagebox-sort {
		min-width: 0;
		margin: 0 !important;
	}
	#page-search-m #pagebox1 #sortRule {
		width: 100%;
		min-width: 0;
		height: 32px !important;
		font-size: 14px;
		box-sizing: border-box;
	}
	#page-search-m #pagebox1 .pagebox-pagination {
		display: flex;
		float: none !important;
		margin: 6px 0 0 !important;
		align-items: center;
		gap: 6px;
	}
	#page-search-m #pagebox1 .pagebox-pagination > .filter-box-gray {
		flex: 0 0 32px;
	}
	#page-search-m #pagebox1 .pagebox-page-entry {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 4px;
		flex: 1 1 0;
		min-width: 0;
	}
	#page-search-m #pagebox1 #gopage1 {
		width: 44px;
		min-width: 0;
		height: 32px;
		margin: 0;
		font-size: 16px;
		text-align: center;
	}
	#page-search-m #pagebox1 #totalpages1 {
		min-width: 0;
		overflow-wrap: anywhere;
	}
}