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

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

#page-search-detail-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-detail-m-header table {
	width: 100%;
	max-width: 995px;
}

/* 語言切換(日/EN)+上一頁欄位全尺寸移除，保留原本實體以免影響 table 版面 */
#page-search-detail-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: 8px;
	right: 8px;
	z-index: 20;
	width: 36px;
	height: 30px;
	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;
}

#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-detail-m .site-content {
	box-sizing: border-box;
	padding: 0 8px;
}

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

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

/* 書目明細 2 欄：左側功能欄(actions)／右側主內容(detail)，改用 CSS Grid 取代原固定 140/840px table */
#page-search-detail-m .detail-grid {
	display: grid;
	grid-template-columns: 140px 1fr;
	gap: 16px;
	margin-top: 8px;
	box-sizing: border-box;
}
#page-search-detail-m .grid-actions { min-width: 0; }
#page-search-detail-m .grid-detail  { min-width: 0; }

/* 桌機預設：加值服務/書目管理折疊按鈕與關閉鈕隱藏、內容面板常顯（阅讀本文不列入此抽屬，仍縭簡單堆疊） */
#page-search-detail-m .grid-actions-toggle,
#page-search-detail-m .grid-actions-close {
	display: none;
}
#page-search-detail-m .grid-actions-panel {
	display: block;
}

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

@media (max-width: 768px) {
	#page-search-detail-m .search-bar {
		flex-wrap: wrap;
	}

	/* 單元選單列預留的空白尾欄，窄螢幕收起 */
	#page-search-detail-m .detail-section-title > tbody > tr > td:nth-child(3) {
		display: none;
	}

	/* header.jsp 為共用檔案不便修改，改用堆疊排版覆寫其固定寬度 table */
	#page-search-detail-m-header table,
	#page-search-detail-m-header table > tbody,
	#page-search-detail-m-header table tr,
	#page-search-detail-m-header table td {
		display: block;
		width: 100% !important;
	}
	#mobileNavToggle {
		display: block;
	}
	#page-search-detail-m-header > div > table > tbody > tr:first-child {
		display: none;
	}
	#page-search-detail-m-header > div > table > tbody > tr:nth-child(2) > td:nth-child(2),
	#page-search-detail-m-header > div > table > tbody > tr:nth-child(3) > td {
		display: none;
	}

	/* 書目明細改單欄堆疊，左側功能欄維持在主內容之前 */
	#page-search-detail-m .detail-grid {
		grid-template-columns: 1fr;
	}

	/* 加值服務/書目管理改為頁面側邊浮動標籤，點擊後從左側滑出面板；閱讀本文仍留在原位簡單堆疊，不進抽屜 */
	#page-search-detail-m .grid-actions-toggle {
		display: block;
		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-detail-m .grid-actions:has(.grid-actions-panel.open) .grid-actions-toggle {
		left: min(80%, 320px);
	}
	#page-search-detail-m .grid-actions-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-detail-m .grid-actions-panel.open {
		transform: translateX(0);
	}
	#page-search-detail-m .grid-actions-close {
		display: block;
		margin-left: auto;
		background: none;
		border: 0;
		font-size: 18px;
		line-height: 1;
		cursor: pointer;
	}

	/* 查詢歷史彈窗為共用元件(lightbox.css)，窄螢幕覆寫其寬度與位置避免溢出 */
	#page-search-detail-m .classShadowBox {
		left: 5%;
		width: 90%;
	}

	/* 本頁專屬彈窗(定義於檔案自身 <style>)：離站提示/書目錯誤修正表單，窄螢幕改用百分比寬度與置中位置 */
	#page-search-detail-m .loginbox {
		width: 90%;
		max-width: 400px;
		left: 5%;
	}
	#page-search-detail-m .modifybox {
		width: 90%;
		max-width: 750px;
		left: 5%;
	}

	/* 募款banner圖片原本 width=80%，手機版改滿版 */
	#page-search-detail-m .grid-detail img[src*="donatebanner2017.png"] {
		width: 100%;
	}
}

/* Align detail-page behavior with PLAN-RWD search/header specifications. */
#page-search-detail-m .detail-grid { grid-template-columns:140px minmax(0,1fr); }
#page-search-detail-m #mobileNavToggle { top:3px; right:2px; height:25px; }
#page-search-detail-m .search-bar-item:nth-child(2) { flex:1; }
#page-search-detail-m .search-bar-item:last-child { flex-shrink:0; }
#page-search-detail-m .grid-detail { overflow-wrap:anywhere; }
#page-search-detail-m .detail-metadata { width:100%; table-layout:fixed; }
#page-search-detail-m #shadowing { z-index:40; }
#page-search-detail-m .classShadowBox,
#page-search-detail-m #msgbox,
#page-search-detail-m #modifybox {
 position:fixed; left:50%; top:5vh; transform:translateX(-50%);
 width:calc(100% - 32px); min-width:0; max-width:750px;
 height:auto; max-height:90vh; max-height:90dvh; overflow:auto;
 box-sizing:border-box; z-index:41;
}
#page-search-detail-m #msgbox { max-width:400px; }
#page-search-detail-m #modifybox table { width:100%; table-layout:fixed; }
#page-search-detail-m #modifybox :is(input,textarea,select) { max-width:100%; box-sizing:border-box; }
#page-search-detail-m-footer { overflow-wrap:anywhere; }
@media (max-width:768px) {
 #page-search-detail-m { margin:0; }
 #page-search-detail-m-header {
  background-image:url(../images/head-rwd.gif); background-repeat:no-repeat;
  background-position:0 30px; background-size:100% auto;
 }
 #page-search-detail-m-header > div > table { height:auto; }
 #page-search-detail-m-header > div > table > tbody > tr:nth-child(4) { display:none; }
 #page-search-detail-m #mobileNav.open { display:block; }
 #page-search-detail-m .search-bar-links { margin-right:0 !important; }
 #page-search-detail-m #isAllowIndexedDBInfo { margin-left:0 !important; }
 #page-search-detail-m .search-bar { display:grid; grid-template-columns:minmax(0,1fr) 64px; gap:6px; }
 #page-search-detail-m .search-bar-item { display:contents; }
 #page-search-detail-m #q { grid-row:1; grid-column:1; }
 #page-search-detail-m #submit { grid-row:1; grid-column:2; }
 #page-search-detail-m #qf { grid-row:2; grid-column:1; }
 #page-search-detail-m .search-bar input[name=reset] { grid-row:2; grid-column:2; }
 #page-search-detail-m .search-bar :is(input,select) { width:100% !important; min-width:0; height:36px !important; font-size:16px; }
 #page-search-detail-m .detail-grid { grid-template-columns:minmax(0,1fr); }
 #page-search-detail-m .grid-actions-toggle { font-size:150%; }
 #page-search-detail-m .grid-actions-panel { visibility:hidden; }
 #page-search-detail-m .grid-actions-panel.open { visibility:visible; }
 #page-search-detail-m .detail-metadata th { width:90px; }
 #page-search-detail-m .detail-metadata :is(th,td) { padding:6px 4px; overflow-wrap:anywhere; }
 #page-search-detail-m #modifybox :is(th,td) { overflow-wrap:anywhere; }
}
@media (max-width:480px) {
 #page-search-detail-m .detail-metadata,
 #page-search-detail-m .detail-metadata > tbody,
 #page-search-detail-m .detail-metadata > tbody > tr,
 #page-search-detail-m .detail-metadata > tbody > tr > th,
 #page-search-detail-m .detail-metadata > tbody > tr > td { display:block; width:100%; box-sizing:border-box; text-align:left; }
 #page-search-detail-m .detail-metadata th { padding-top:12px; background:#f5f5ed; }
 #page-search-detail-m #modifybox table,
 #page-search-detail-m #modifybox tbody,
 #page-search-detail-m #modifybox tr,
 #page-search-detail-m #modifybox th,
 #page-search-detail-m #modifybox td { display:block; width:100%; box-sizing:border-box; }
}
@media (prefers-reduced-motion:reduce) {
 #page-search-detail-m .grid-actions-panel { transition:none; }
}