/* =========================================================
   白狼之家 Wolf Voical — 論壇自訂樣式（2026-10-25）
   放在 static/wolf/wolf-forum.css，由 template/default/common/header.htm 載入。
   換背景：直接用新圖覆蓋 static/image/common/background.jpg（建議 1920x1080 以上的 JPG），
   不用改任何程式；瀏覽器若還顯示舊圖，按 Ctrl+F5 重新整理即可。
   ========================================================= */

/* ---- 背景：整頁固定，畫面置中 ---- */
body {
	background: #dcecf8 url(../image/common/background.jpg) center top / cover no-repeat fixed !important;
}

/* ---- 置中的白色內容區 ---- */
#toptb { background: rgba(255, 255, 255, .92); }
#hd { border-bottom: 0; }
#hd .wp, #wp, #ft {
	box-sizing: content-box;
	padding-left: 14px;
	padding-right: 14px;
	background: rgba(255, 255, 255, .95);
}
#hd .wp { border-radius: 10px 10px 0 0; margin-top: 10px; box-shadow: 0 -2px 12px rgba(30, 90, 150, .10); }
#wp { padding-top: 6px; padding-bottom: 10px; box-shadow: 0 6px 12px rgba(30, 90, 150, .10); }
#ft { border-top: 1px solid #E5EDF2; border-radius: 0 0 10px 10px; margin-bottom: 20px; padding-top: 10px; }

/* ---- logo：直接用去背原圖，不加底色、不加任何效果 ---- */
#hd .hdc { min-height: 0; }
#hd h2 { padding: 8px 20px 8px 0; }
#hd h2 a { display: inline-block; background: none; }
#hd h2 img.boardlogo { height: 84px; width: auto; display: block; }

/* ---- 原本的藍色導航列和搜尋列不顯示（2017 年版面圖上打叉的區域），改放在最上面那排小連結 ---- */
#nv, #scbar { display: none !important; }
#toptb { line-height: 30px; }
#toptb .wp { min-height: 30px; }
.wolf-tn { margin-left: 4px; }
.wolf-tn-i a { padding: 0 6px; color: #2B7ACD !important; font-weight: 700; }
.wolf-tn-i a span { display: none; }
.wolf-tn-i.a a { color: #E0301E !important; }
.wolf-ts { display: inline-block; vertical-align: middle; margin: 0 6px 0 0; line-height: 22px; }
.wolf-ts input { width: 130px; height: 20px; padding: 0 8px; border: 1px solid #C2D5E3; border-radius: 11px 0 0 11px; border-right: 0; font-size: 12px; vertical-align: middle; outline: none; }
.wolf-ts input:focus { border-color: #2B7ACD; }
.wolf-ts button { height: 22px; padding: 0 9px; border: 0; border-radius: 0 11px 11px 0; background: #2B7ACD; color: #fff; font-size: 12px; cursor: pointer; vertical-align: middle; }

/* ---- 寬度：寬版時約 1400px、置中、接近滿版 ---- */
.widthauto #toptb .wp, .widthauto #hd .wp, .widthauto #wp, .widthauto #ft { box-sizing: border-box; width: 98%; max-width: 1428px; margin-left: auto; margin-right: auto; }
.widthauto #hd .wp { margin-top: 10px; }
.widthauto #toptb .wp { padding-left: 14px; padding-right: 14px; }

/* ---- 首頁：左欄 + 右側欄 ---- */
#ct.ct2 > .mn { width: 930px; }
#ct.ct2 > .sd { width: 250px; overflow: visible; }
.widthauto #ct.ct2 { margin-right: 300px; }
.widthauto #ct.ct2 > .mn { width: 100%; }
.widthauto #ct.ct2 > .sd { width: 285px; margin-right: -300px; }
.widthauto #ct.ct2 #chart { margin-right: 0; }

/* ---- 頁首：logo 左、會員資訊右 ---- */
#hd .hdc { display: flex; align-items: center; gap: 14px; }
#hd .hdc > h2 { flex: none; float: none; }
#hd .hdc > #lsform, #hd .hdc > #um { flex: none; margin-left: auto; float: none; }

/* ---- 公告：整篇顯示在原本導航列的位置（內容是 DIY「公告」模塊 87），整篇一欄，太長時框內捲動 ---- */
.wolf-notice { margin: 0 0 10px; border: 1px solid #C2D5E3; border-radius: 8px; overflow: hidden; background: #fff; }
.wolf-notice-t { padding: 0 14px; line-height: 30px; background: linear-gradient(#3a8ad8, #2B7ACD); color: #fff; font-weight: 700; font-size: 14px; letter-spacing: 2px; }
.wolf-notice-c { padding: 8px 18px 10px; }
.wolf-notice-c .block, .wolf-notice-c .dxb_bc { margin: 0 !important; padding: 0 !important; }
/* 文字靠左、整個文字區塊在框裡置中（寬度跟最長的一行一樣，最寬不超過框） */
.wolf-notice-c .portal_block_summary { white-space: pre-line; font-size: 13px; line-height: 1.8; color: #333; text-align: left; width: -moz-fit-content; width: fit-content; max-width: 100%; margin: 0 auto; }
/* 整篇一欄；超過最大高度就在公告框裡出現捲軸，用滑鼠滾輪捲動 */
.wolf-notice-c { max-height: 300px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #9EC3E6 #F2F7FB; }
.wolf-notice-c::-webkit-scrollbar { width: 8px; }
.wolf-notice-c::-webkit-scrollbar-track { background: #F2F7FB; }
.wolf-notice-c::-webkit-scrollbar-thumb { background: #9EC3E6; border-radius: 4px; }
/* 原本放在版塊上方的同一個公告框改由頁首顯示，這裡不再重複 */
#frame7ZoEXx { display: none; }

/* ---- 統計列、四格 ---- */
#chart { margin-bottom: 8px; }
.fl.bm { border-radius: 8px; overflow: hidden; }

/* ---- 版塊兩欄 ---- */
.fl .bm { border-radius: 8px; overflow: hidden; }
.fl .bm_h { background: linear-gradient(#F5F9FC, #E8F1F8); }
.fl .bm_h h2 a { color: #2B7ACD; }
.fl_tb td.fl_g { padding: 12px 10px; border-bottom: 1px dashed #E5EDF2; vertical-align: top; }
.fl_tb td.fl_g .fl_icn_g { margin-right: 10px; }
.fl_tb td.fl_g dl { margin-left: 58px; }
.fl_tb td.fl_g dt a { font-size: 14px; font-weight: 700; color: #1d5f9f; }
.fl_tb td.fl_g + td.fl_g { border-left: 1px dashed #E5EDF2; }
/* 分區版塊數是奇數時，最後一格橫跨兩欄 */
.fl_tb td.fl_g_wide { background: #FAFCFE; }

/* ---- 右側欄 ---- */
.wolf-side .wolf-card { margin-bottom: 12px; border: 1px solid #C2D5E3; border-radius: 8px; overflow: hidden; background: #fff; }
.wolf-side .bm_h { height: 34px; line-height: 34px; padding: 0 12px; background: linear-gradient(#3a8ad8, #2B7ACD); border: 0; }
.wolf-side .bm_h h2 { color: #fff; font-size: 14px; }
.wolf-side .bm_c { padding: 12px; }

/* 個人資料卡（照「創作革命學園」樣式） */
.wolf-profile { font-size: 12px; }
.wolf-pf-h { padding: 0 10px; line-height: 30px; background: linear-gradient(#3a8ad8, #2B7ACD); color: #fff; font-weight: 700; font-size: 13px; }
.wolf-pf-h a { color: #fff; }
.wolf-pf-h span { color: #FFE38A; font-weight: 700; }
.wolf-pf-top { padding: 10px 10px 4px; }
.wolf-pf-avt { float: left; }
.wolf-pf-avt img { width: 96px; height: 96px; border: 2px solid #C2D5E3; border-radius: 6px; object-fit: cover; background: #F5F9FC; }
.wolf-pf-info { display: grid; grid-template-columns: 42px 1fr; margin: 0 0 0 108px; line-height: 17px; }
.wolf-pf-info dt { float: none; width: auto; margin: 0; padding: 0; color: #1d5f9f; font-weight: 700; }
.wolf-pf-info dd { float: none; margin: 0; padding: 0; min-height: 17px; color: #333; word-break: break-all; }
.wolf-pf-sec { padding: 4px 10px 6px; }
.wolf-pf-sec h3, .wolf-pf-albuminfo h3 { color: #1d5f9f; font-size: 13px; margin-bottom: 3px; }
.wolf-pf-bio { min-height: 48px; max-height: 120px; overflow-y: auto; line-height: 1.6; color: #444; word-break: break-all; }
.wolf-pf-site { word-break: break-all; }
.wolf-pf-box { margin: 4px 10px 6px; padding: 6px 8px; border: 1px solid #DCE6EE; border-radius: 6px; background: #F7FAFD; }
.wolf-stats { padding: 4px 0 6px; text-align: center; border-bottom: 1px solid #E5EDF2; }
.wolf-stats li { float: left; width: 33.33%; }
.wolf-stats li + li { border-left: 1px solid #E5EDF2; box-sizing: border-box; }
.wolf-stats a { display: block; text-decoration: none !important; }
.wolf-stats strong { display: block; font-size: 14px; color: #2B7ACD; }
.wolf-stats span { color: #666; }
.wolf-pf-group { margin-top: 6px; font-weight: 700; }
.wolf-pf-star { margin: 2px 0 4px; min-height: 16px; }
.wolf-pf-kv th { width: 60px; padding: 2px 0; color: #666; font-weight: 400; text-align: left; }
.wolf-pf-kv td { padding: 2px 0; color: #2B7ACD; }
.wolf-pf-kv td.wolf-ol { color: #E0301E; }
.wolf-pf-admin { margin-top: 4px; padding-top: 4px; border-top: 1px dashed #DCE6EE; }
.wolf-pf-admin a { margin-right: 7px; white-space: nowrap; }
.wolf-pf-album { padding: 4px 10px 8px; }
.wolf-pf-cover { float: left; display: block; width: 92px; height: 92px; border: 1px solid #C2D5E3; border-radius: 6px; overflow: hidden; background: #F5F9FC; text-align: center; text-decoration: none !important; }
.wolf-pf-cover img { width: 92px; height: 92px; object-fit: cover; }
.wolf-pf-cover span { display: block; padding-top: 30px; color: #1d5f9f; font-weight: 700; line-height: 16px; }
.wolf-pf-albuminfo { margin-left: 102px; line-height: 1.6; word-break: break-all; }
.wolf-profile .wolf-btns { margin: 0 10px 10px; display: flex; gap: 8px; justify-content: center; }
.wolf-guest .bm_c { text-align: center; }
.wolf-avatar-guest img { height: 64px; width: auto; }
.wolf-name { margin-top: 8px; font-size: 15px; font-weight: 700; color: #1d5f9f; }
.wolf-group { margin-top: 2px; color: #888; font-size: 12px; }

.wolf-btn {
	display: inline-block;
	padding: 0 14px;
	height: 30px;
	line-height: 30px;
	border-radius: 15px;
	background: #2B7ACD;
	color: #fff !important;
	font-weight: 700;
	text-decoration: none !important;
}
.wolf-btn:hover { background: #1f66b3; }
.wolf-btn-light { background: #EAF3FB; color: #2B7ACD !important; }
.wolf-btn-light:hover { background: #d9eaf8; }
.wolf-btn-block { display: block; text-align: center; margin-top: 8px; height: 34px; line-height: 34px; border-radius: 17px; }

.wolf-link { display: flex; align-items: center; gap: 10px; padding: 8px 6px; border-radius: 6px; text-decoration: none !important; color: #333 !important; }
.wolf-link:hover { background: #F2F7FB; }
.wolf-ico { flex: 0 0 32px; width: 32px; height: 32px; line-height: 32px; border-radius: 8px; text-align: center; color: #fff; font-weight: 700; font-size: 16px; font-family: Arial, sans-serif; }
.wolf-discord .wolf-ico { background: #5865F2; }
.wolf-qq .wolf-ico { background: #12B7F5; }
.wolf-fb .wolf-ico { background: #1877F2; }
.wolf-txt strong { display: block; font-size: 13px; }
.wolf-txt em { display: block; color: #888; font-size: 12px; font-style: normal; }
.wolf-discord { background: #F3F4FE; }
.wolf-qr { margin: 2px 0 6px; text-align: center; }
.wolf-qr img { width: 130px; height: 130px; border: 1px solid #EEF3F7; border-radius: 6px; }
.wolf-qr p { color: #888; font-size: 12px; }
.wolf-oekaki p { color: #555; line-height: 1.7; }

/* ---- 管理員看到的「應用更新提醒」框：往上移到右下角客服按鈕（tawk.to）上方，並疊在最上層，兩個都按得到 ---- */
#plugin_notice.focus { bottom: 100px; right: max(0px, calc((100% - 1228px) / 2)); z-index: 2147483647; border-radius: 6px; box-shadow: 0 2px 10px rgba(0, 0, 0, .18); }
/* 應用更新提醒框：寬版時右緣對齊內容區（98%、最寬 1428px 置中），不凸出內容區 */
.widthauto #plugin_notice.focus { right: max(1%, calc((100% - 1428px) / 2)); }