/*
  版面外殼：內容容器、頁首（含導覽列）、頁尾。

  導覽列刻意只有「一份」markup，用純 CSS 做響應式。設計稿是桌機一份、手機一份同時
  存在於 DOM 裡（只用 CSS 互相隱藏），那會產生兩個 <nav> landmark、兩個指向同處的
  logo 連結，而且設計稿裡那兩份「已經」漂移了（桌機版指向不存在的檔案、手機版才是對的）。

  收合行為採漸進增強：沒有 JS 時導覽連結一律展開可見，
  <html class="js"> 出現後才啟用漢堡鈕與收合狀態。設計稿在這點是壞的——
  關掉 JS，它的手機版完全沒有導覽列。
*/

.shell {
	width: 100%;
	max-width: var(--shell-max);
	margin-inline: auto;
	padding-inline: 16px;
}

/* ---- 主要內容 ---------------------------------------------------------- */

main {
	flex: 1 0 auto;
	padding: 32px 0 56px;
}

/* ---- 頁尾 -------------------------------------------------------------- */

.site-footer {
	flex-shrink: 0;
	margin-top: auto;
	padding: 28px 0;
	background: rgba(255, 255, 255, .55);
	border-top: 1px solid var(--line);
	color: var(--muted);
	font-size: var(--fs-sm);
	text-align: center;
}
.site-footer a { color: var(--orange-text); }
.footer-row {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px 24px;
	margin-bottom: 6px;
}
.footer-badges {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	gap: 16px;
	margin-top: 10px;
}
.footer-badges a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	text-decoration: none;
	font-weight: 600;
}
.footer-badges a:hover { text-decoration: underline; }
.footer-badges img { display: block; }
.copyright { margin-top: 10px; font-size: 13px; }