/* music-hub 前台共用樣式：嵌入寬度模式與替代畫面 */

.mh-root {
	box-sizing: border-box;
	position: relative;
}
.mh-root *,
.mh-root *::before,
.mh-root *::after { box-sizing: inherit; }

/* 隨主題內容寬（預設）：什麼都不做，交給主題的版面系統 */
.mh-root.mh-w-content { width: 100%; }

/* 置中方框：box-sizing 讓箱寬就是設定值 */
.mh-root.mh-w-box {
	max-width: var(--mh-maxw, 800px);
	margin-left: auto;
	margin-right: auto;
}

/* 滿版：**真正把內距頂掉的是 `alignfull`，這個 class 由 PHP 一起加上**
   （MH_Avatar_Select::render、SRG_Auth_Page / SRG_Login_Page / SRG_Register_Page）。
   區塊主題自己就有那條規則，而且寫得比我們能寫的更準：

     .has-global-padding > .alignfull {
         margin-left:  calc(var(--wp--style--root--padding-left)  * -1);
         margin-right: calc(var(--wp--style--root--padding-right) * -1);
     }

   它同時把元素排除在
   `.is-layout-constrained > :where(:not(.alignfull)…) { max-width: 645px;
   margin: auto !important }` 之外——那條就是內容被夾成內容寬的來源。

   **不要在這裡自己抄一份負邊界。** 兩個理由：①主題那條帶 `!important` 且特異度
   與單一 class 同級、又排在外掛樣式之後，自己寫必輸（2026-08-23 實測：加了
   `!important` 才勉強打平，但 margin 仍被算成 0）；②主題那條有 `.has-global-padding >`
   的前提，短代碼被塞進沒有全站內距的巢狀群組時它會自動不生效，手抄版沒有這個保險。

   這裡只留 `width: auto`：**不能是 `width: 100%`**。百分比是相對「父層內容區」算的，
   負邊界把盒子往外拉之後，100% 仍然只有內容區那麼寬——左邊貼齊了、右邊反而空一條。
   auto 會自己吃掉負邊界撐出來的空間。古典主題沒有 alignfull 樣式時退化為內容寬。 */
.mh-root.mh-w-full { width: auto; }

.mh-root .mh-loading {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 160px;
	color: #6b7280;
	font-size: 15px;
}

/* CSS 的 display:flex 會蓋掉 UA 的 [hidden]{display:none}，
   必須用 !important 補回來，否則「隱藏」的區塊照樣顯示。 */
.mh-root [hidden] { display: none !important; }

/* ---- 替代畫面（教師 / 需登入） ---- */
.mh-notice-card {
	max-width: 520px;
	margin: 24px auto;
	padding: 28px 24px;
	text-align: center;
	border: 1px solid #e5e7eb;
	border-radius: 10px;
	background: #fafafa;
}
.mh-notice-icon { font-size: 40px; line-height: 1; margin-bottom: 10px; }
.mh-notice-card h3 { margin: 0 0 8px; font-size: 18px; }
.mh-notice-card p { margin: 0 0 12px; color: #4b5563; line-height: 1.6; }

.mh-btn {
	display: inline-block;
	padding: 8px 18px;
	border-radius: 6px;
	background: #2271b1;
	color: #fff;
	text-decoration: none;
	font-weight: 600;
}
.mh-btn:hover,
.mh-btn:focus { background: #135e96; color: #fff; }

/* ---- 頁面背景音樂的喇叭鈕（mh-page-music.js 掛在 body 底下） ----
   浮動而非畫在內容裡：這幾頁的內容由 JS 重繪，分頁一切換就會被清空。
   位置避開右下角常見的「回到頂端」與客服泡泡，往上讓一段。 */
.mh-bgm-btn {
	position: fixed;
	right: 16px;
	bottom: 84px;
	z-index: 9990;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid rgba(var(--mh-ink-rgb, 28, 28, 23), .18);
	border-radius: 50%;
	background: var(--mh-paper, #fcf9f0);
	color: var(--mh-ink, #1c1c17);
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 2px 10px rgba(var(--mh-ink-rgb, 28, 28, 23), .22);
}
.mh-bgm-btn:hover { transform: scale(1.06); }
.mh-bgm-btn.off { opacity: .62; }
/* 觸控裝置的最小點擊區是 44px，上面已經滿足；縮小的只有留白。 */
@media (max-width: 480px) {
	.mh-bgm-btn { right: 10px; bottom: 68px; }
}
@media (prefers-reduced-motion: reduce) {
	.mh-bgm-btn:hover { transform: none; }
}