/*
	全屏子頁面的共用基底
	（work.html 作品集、schedule.html 活動預定 都吃這支）
	色票與字體沿用首頁 Dimension 的設定
*/

/* ---------- 基礎 ---------- */

	*, *:before, *:after { box-sizing: border-box; }

	html {
		font-size: 16pt;
	}

	@media screen and (max-width: 1680px) { html { font-size: 12pt; } }
	@media screen and (max-width: 736px)  { html { font-size: 11pt; } }
	@media screen and (max-width: 360px)  { html { font-size: 10pt; } }

	body {
		margin: 0;
		height: 100vh;
		height: 100dvh;
		overflow: hidden;
		background-color: #1b1f22;
		color: #ffffff;
		font-family: "Manrope", "Noto Sans TC", "Noto Sans JP", "Helvetica Neue", Arial, sans-serif;
		font-weight: 300;
		font-size: 1rem;
		line-height: 1.65;
		-webkit-font-smoothing: antialiased;
	}

	/* 標題統一用明體，內文用黑體 */
	h1, h2, h3, h4, h5, h6 {
		font-family: "Noto Serif TC", "Noto Serif JP", Georgia, serif;
		font-weight: 300;
	}

	a { color: inherit; text-decoration: none; }

	img { max-width: 100%; }

	button {
		font: inherit;
		color: inherit;
		background: none;
		border: 0;
		cursor: pointer;
	}

/* ---------- 背景（與首頁同一組素材） ---------- */

	#bg {
		position: fixed;
		top: 0; left: 0;
		width: 100%; height: 100vh;
		z-index: 1;
		backface-visibility: hidden;
	}

		#bg:before, #bg:after {
			content: "";
			display: block;
			position: absolute;
			top: 0; left: 0;
			width: 100%; height: 100%;
		}

		#bg:before {
			background-image:
				linear-gradient(to top, rgba(19, 21, 25, 0.7), rgba(19, 21, 25, 0.7)),
				url("../../images/overlay.png");
			background-size: auto, 256px 256px;
			background-position: center, center;
			background-repeat: no-repeat, repeat;
			z-index: 2;
		}

		#bg:after {
			background-image: url("../../images/bg.jpg");
			background-position: center;
			background-size: cover;
			background-repeat: no-repeat;
			transform: scale(1.125);
			transition: transform 0.5s ease-in-out, filter 0.5s ease-in-out;
			z-index: 1;
		}

/* ---------- 頂部列 ---------- */

	#topbar {
		position: fixed;
		top: 0; left: 0;
		width: 100%;
		z-index: 20;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 1rem;
		padding: 1.5rem 2.5rem;
		background: linear-gradient(to bottom, rgba(19, 21, 25, 0.85), rgba(19, 21, 25, 0));
	}

		#topbar .brand {
			display: inline-flex;
			align-items: center;
			gap: 0.6rem;
			border-bottom: 0;
			opacity: 0.85;
			transition: opacity 0.2s ease-in-out;
		}

			#topbar .brand:hover { opacity: 1; }

			#topbar .brand-mark {
				width: 1.15rem;
				height: 1.15rem;
				flex: 0 0 auto;
			}

			#topbar .brand-name {
				font-family: "Noto Serif TC", "Noto Serif JP", Georgia, serif;
				font-size: 0.72rem;
				font-weight: 400;
				letter-spacing: 0.28rem;
				white-space: nowrap;
			}

		#topbar .title {
			margin: 0;
			font-size: 0.7rem;
			font-weight: 300;
			letter-spacing: 0.5rem;
			text-transform: uppercase;
			text-align: right;
			opacity: 0.75;
		}

/* ---------- 底部提示 ---------- */

	.scroll-hint {
		position: fixed;
		bottom: 1.5rem; left: 0;
		width: 100%;
		z-index: 15;
		text-align: center;
		font-size: 0.55rem;
		letter-spacing: 0.25rem;
		text-transform: uppercase;
		opacity: 0.45;
		pointer-events: none;
		transition: opacity 0.4s ease-in-out;
	}

		body.has-scrolled .scroll-hint { opacity: 0; }

	/* 提示文字依裝置切換 */
	.hint-touch { display: none; }

	@media (hover: none), screen and (max-width: 736px) {
		.hint-desktop { display: none; }
		.hint-touch   { display: inline; }
	}

/* ---------- 滑鼠移到左右邊緣自動捲動 ---------- */

	.scroll-zone {
		position: fixed;
		top: 0;
		width: 8vw;
		max-width: 8rem;
		height: 100vh;
		z-index: 10;
	}

		.scroll-zone.left  { left: 0; }
		.scroll-zone.right { right: 0; }

/* ---------- 手機／平板 ---------- */

	@media screen and (max-width: 980px) {

		#topbar { padding: 1.25rem 1.5rem; }

		.scroll-zone { display: none; }

	}

	@media screen and (max-width: 736px) {

		/* 窄螢幕縮小站名字級與間距，讓標誌＋站名跟右上角的按鈕擠得下 */
		#topbar .brand { gap: 0.4rem; }
		#topbar .brand-name { font-size: 0.6rem; letter-spacing: 0.18rem; }

		.scroll-hint { bottom: 1rem; }

	}

/* ---------- 關閉 JS 時 ---------- */

	body.no-js { overflow: auto; height: auto; }

/* ---------- 版權標示 ----------
	固定在畫面左下角，三種檢視（相簿牆／方格總覽／相簿內頁）和月曆都適用。
	z-index 15 是刻意的：壓在頂部列（20）之下，燈箱（100）和換頁色塊（9000）
	一出現就會自然蓋住它，不用另外寫隱藏規則。
*/

	.site-copyright {
		position: fixed;
		left: 2.5rem;
		/* 右邊也定位，文字才有整條寬度可以排成一行 */
		right: 2.5rem;
		bottom: 1.1rem;
		z-index: 15;
		margin: 0;
		font-size: 0.5rem;
		letter-spacing: 0.12rem;
		line-height: 1.7;
		opacity: 0.4;
		/* 純標示，不能擋到底下的捲軸或磚塊 */
		pointer-events: none;
	}

	@media screen and (max-width: 736px) {

		.site-copyright {
			left: 1.5rem;
			right: 1.5rem;
			bottom: 0.8rem;
			font-size: 0.45rem;
			letter-spacing: 0.08rem;
		}

	}