/*----------------------------------*\
  # Fluid Responsive — 隨螢幕自動適配
  疊加在既有樣式之上，修正固定寬高造成的破版
\*----------------------------------*/

html {
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

html,
body {
	max-width: 100%;
	overflow-x: hidden;
}

/* 流體字級：小螢幕 ~14px，一般 ~18px，大螢幕 ~20px */
body {
	font-size: clamp(14px, 0.35vw + 13px, 20px);
	line-height: 1.55;
}

img,
video,
iframe,
svg {
	max-width: 100%;
	height: auto;
}

/* 內頁主內容容器：隨螢幕收斂 */
.main {
	width: min(92%, 1180px);
	margin-inline: auto;
	padding-inline: clamp(12px, 2.5vw, 28px);
	box-sizing: border-box;
}

/* 頁標題：不再死鎖 430px */
.title {
	width: min(430px, calc(100% - 2rem));
	max-width: calc(100vw - 5.5rem);
	height: clamp(48px, 8vw, 90px);
	margin: clamp(0.8rem, 2vw, 1.5rem) auto;
}

.title div {
	font-size: clamp(0.95rem, 1.6vw + 0.4rem, 1.6em);
	white-space: normal;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	text-overflow: unset;
	line-height: 1.25;
}

/* Header / 首頁全螢幕改用動態視窗單位 */
.index #header,
.index #slider,
.index .wrapper {
	width: 100%;
	min-height: 100vh;
	min-height: 100dvh;
}

body:not(.index) #header {
	height: auto !important;
	min-height: 0 !important;
	overflow: visible !important;
}

/* 漢堡鈕隨螢幕縮放 */
.burg {
	top: clamp(10px, 3vw, 50px);
	left: clamp(10px, 3vw, 50px);
	width: clamp(46px, 5vw, 60px);
	height: clamp(46px, 5vw, 60px);
}

/* 側欄選單寬度：平板不再過窄 */
.offcanvas,
.panel {
	width: clamp(240px, 28vw, 360px);
	max-width: 92vw;
}

.offcanvas a img,
.panel a img {
	width: min(220px, 62%);
}

.offcanvas a,
.panel a {
	font-size: clamp(0.9rem, 1.1vw + 0.55rem, 1.05rem);
	padding: clamp(8px, 1.2vw, 12px) 10px;
}

/* 首頁 Logo */
.slide_logo {
	width: min(430px, 78vw);
	height: auto;
	aspect-ratio: 430 / 80;
	max-width: calc(100vw - 2rem);
	background-size: contain;
	background-repeat: no-repeat;
}

/*----------------------------------*\
  # 作品卡：改 CSS Grid，自動改欄數
\*----------------------------------*/
.proWrap {
	width: min(92%, 1280px) !important;
	margin: 0 auto clamp(1.5rem, 3vw, 2.5rem) !important;
	display: grid !important;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(0.75rem, 1.5vw, 1.1rem);
}

.proWrap::after,
.proWrap::before {
	display: none !important;
	content: none !important;
}

.proWrap li {
	float: none !important;
	display: block !important;
	width: auto !important;
	margin: 0 !important;
	min-width: 0;
}

.proWrap .imgWrap {
	width: 100%;
	height: auto !important;
	aspect-ratio: 16 / 10;
}

/*----------------------------------*\
  # 消息列表：自動 2→1 欄
\*----------------------------------*/
.newsWrap {
	width: min(92%, 1100px) !important;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(0.75rem, 1.5vw, 1.25rem);
}

.newsWrap li {
	float: none !important;
	width: auto !important;
	margin: 0 !important;
	display: flex;
	min-width: 0;
}

.newsWrap li .right {
	width: auto !important;
	flex: 1;
	min-width: 0;
}

.newsWrap h2 {
	overflow-wrap: anywhere;
	word-break: break-word;
}

/*----------------------------------*\
  # 聯絡／關於
\*----------------------------------*/
.contact {
	width: 100% !important;
	max-width: 100%;
	box-sizing: border-box;
}

.contact-item {
	box-sizing: border-box;
}

.map-rwd {
	width: 100% !important;
	max-width: 100%;
}

.map-rwd iframe {
	max-width: 100%;
}

.about {
	width: 100% !important;
	max-width: 100%;
	box-sizing: border-box;
}

.about .edit,
.about .edit * {
	max-width: 100%;
	overflow-wrap: anywhere;
	word-break: break-word;
}

.about .img_left {
	max-width: 100%;
	height: auto !important;
}

/*----------------------------------*\
  # Footer 自動換行
\*----------------------------------*/
footer .content {
	width: min(92%, 1200px) !important;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}

footer .boxA,
footer .boxB,
footer .boxC {
	float: none !important;
	display: flex;
	height: auto !important;
	min-height: 0;
	flex: 1 1 200px;
	width: auto !important;
	max-width: 100%;
}

footer .boxA p,
.copyright p {
	overflow-wrap: anywhere;
	word-break: break-word;
}

.copyright {
	line-height: 1.5 !important;
	padding: 0.85rem 1rem !important;
}

/* popup */
.popup_cnt,
.popup_cnt_snack,
.pop_cnt {
	width: min(92vw, 720px) !important;
	max-width: 92vw;
	box-sizing: border-box;
}

/* 影片列表 */
.vdSlider {
	width: min(94%, 1200px);
	margin-inline: auto;
}

/*----------------------------------*\
  # Breakpoints
\*----------------------------------*/

/* 大桌面以上維持舒適閱讀寬 */
@media (min-width: 1600px) {
	.main { width: min(88%, 1280px); }
}

/* 筆電／小平板橫向 */
@media (max-width: 1200px) {
	.proWrap {
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	}
	.offcanvas,
	.panel {
		width: min(46vw, 340px);
	}
}

/* 平板 */
@media (max-width: 1025px) {
	.main {
		width: 100% !important;
		padding-inline: clamp(12px, 3vw, 20px);
	}

	.title {
		width: calc(100vw - 5.5rem) !important;
		max-width: calc(100vw - 5.5rem) !important;
		margin: 1rem 0.75rem 0.75rem 4.4rem !important;
		height: clamp(46px, 12vw, 58px);
	}

	.offcanvas,
	.panel {
		width: 100vw !important;
		max-width: 100vw;
	}

	.proWrap {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		width: min(94%, 900px) !important;
	}

	.newsWrap {
		grid-template-columns: 1fr !important;
		width: min(94%, 720px) !important;
	}

	.contact-item {
		width: 100% !important;
		float: none !important;
		padding-right: 0 !important;
		margin-bottom: 1.25rem;
	}

	.cont_leftText p {
		width: 100% !important;
	}

	.about .img_left {
		float: none !important;
		width: 100% !important;
		max-height: none !important;
		margin-bottom: 1rem;
	}

	footer .boxB,
	footer .boxC {
		display: none !important;
	}

	footer .boxA {
		flex: 1 1 100%;
		justify-content: center;
		text-align: center;
	}

	footer .boxA p {
		text-align: center !important;
	}

	.sidenav {
		top: auto;
		bottom: 1rem;
		right: 0.35rem;
		font-size: clamp(1.2rem, 4vw, 1.5rem);
	}

	.home_project .left,
	.home_project .right {
		float: none !important;
		width: 100% !important;
		height: auto !important;
	}

	.home_project .right li {
		height: auto !important;
		min-height: 28vw;
	}
}

/* 手機 */
@media (max-width: 769px) {
	.proWrap {
		grid-template-columns: 1fr !important;
		width: min(92%, 480px) !important;
	}

	.proWrap .imgWrap {
		aspect-ratio: 16 / 11;
	}

	.burg {
		top: 10px;
		left: 10px;
	}

	.title {
		margin-left: 4rem !important;
	}

	.popup_cnt {
		width: 92vw !important;
		padding: 1.2rem 0.8rem !important;
	}

	.index #header,
	.index #slider {
		min-height: 100svh;
	}
}

/* 超窄螢幕 */
@media (max-width: 400px) {
	.title {
		width: calc(100vw - 4.6rem) !important;
		max-width: calc(100vw - 4.6rem) !important;
		margin-left: 3.6rem !important;
	}

	.title div {
		font-size: 0.88rem;
		-webkit-line-clamp: 2;
	}

	.burg {
		width: 44px;
		height: 44px;
	}
}

/* 橫向矮螢幕（手機橫放） */
@media (max-height: 480px) and (orientation: landscape) {
	.index #header,
	.index #slider {
		min-height: 100vh;
	}
	.slide_logo {
		width: min(280px, 50vw);
	}
	.burg {
		top: 8px;
		left: 8px;
		width: 42px;
		height: 42px;
	}
}

/* 列印 */
@media print {
	.burg,
	.sidenav,
	.panel,
	.offcanvas,
	.loading_wrap,
	.tech-scanline,
	.tech-cursor,
	.cd-top {
		display: none !important;
	}
	body::before,
	body::after {
		display: none !important;
	}
}