/* ==========================================================================
   鑫來旺有限公司 ComeWinLine — 一頁式形象網站
   配色沿用麻將 APP 的「木質金漆」設計系統（WoodColors），
   但調整用色比例：金色僅作強調，內容區改暖米白以保留企業專業感。
   ========================================================================== */

:root {
	/* 木質底色 */
	--wood-deep: #150e08;
	--wood: #18100a;
	--wood-card: #2c1d11;
	--wood-card-lit: #4a2f1c;

	/* 金漆 */
	--gold-1: #e8c873;
	--gold-2: #d4af37;
	--gold-3: #b8902a;
	--gold-deep: #8a6a1c;
	--ink-gold: #3a2407;

	/* 米色文字（深底用） */
	--cream: #f4e8d0;
	--cream-dim: #cdbf9c;

	/* 淺色內容區 */
	--paper: #faf7f0;
	--paper-alt: #f2ecdf;
	--paper-pure: #fffdf8;
	--ink: #2a1d12;
	--ink-soft: #5b4a38;
	--ink-mute: #8d7c66;
	--line: #e3d9c6;
}

* {
	box-sizing: border-box;
}

body {
	font-family: "Noto Sans TC", "Microsoft JhengHei", -apple-system, "Segoe UI", sans-serif;
	font-weight: 400;
	color: var(--ink-soft);
	background: var(--paper);
	line-height: 1.9;
	letter-spacing: .02em;
	padding-top: 76px;
}

h1, h2, h3, h4, h5 {
	font-family: inherit;
	color: var(--ink);
	font-weight: 700;
	letter-spacing: .04em;
}

a {
	color: var(--gold-3);
	transition: color .25s ease, background-color .25s ease, border-color .25s ease, transform .25s ease;
}

a:hover {
	color: var(--gold-2);
	text-decoration: none;
}

/* ==========================================================================
   導覽列
   ========================================================================== */

.site-navbar {
	background: rgba(24, 16, 10, .96);
	padding: .85rem 0;
	border-bottom: 1px solid rgba(212, 175, 55, .22);
	transition: background .3s ease, padding .3s ease;
}

.site-navbar.is-scrolled {
	background: rgba(21, 14, 8, .985);
	padding: .5rem 0;
	box-shadow: 0 2px 20px rgba(0, 0, 0, .45);
}

.site-navbar .navbar-brand {
	display: flex;
	align-items: center;
	padding: 0;
}

.brand-logo-img {
	width: 46px;
	height: 46px;
	margin-right: .85rem;
	flex: 0 0 46px;
}

.brand-text {
	display: flex;
	flex-direction: column;
	line-height: 1.25;
}

.brand-text strong {
	color: var(--cream);
	font-size: 1.05rem;
	font-weight: 500;
	letter-spacing: .06em;
}

.brand-text small {
	color: var(--gold-2);
	font-size: .7rem;
	letter-spacing: .18em;
	text-transform: uppercase;
}

.site-navbar .nav-link {
	color: var(--cream-dim);
	font-size: .92rem;
	letter-spacing: .08em;
	padding: .5rem 1.1rem;
	position: relative;
}

.site-navbar .nav-link::after {
	content: "";
	position: absolute;
	left: 1.1rem;
	right: 1.1rem;
	bottom: .15rem;
	height: 2px;
	background: var(--gold-2);
	transform: scaleX(0);
	transition: transform .28s ease;
}

.site-navbar .nav-link:hover,
.site-navbar .nav-link.active,
.site-navbar .nav-item.active .nav-link {
	color: var(--cream);
}

.site-navbar .nav-link:hover::after,
.site-navbar .nav-link.active::after,
.site-navbar .nav-item.active .nav-link::after {
	transform: scaleX(1);
}

.navbar-toggler {
	border-color: rgba(212, 175, 55, .35);
	color: var(--gold-1);
}

/* ==========================================================================
   首頁 Hero
   圖片替換：加上 background-image: url(../img/home/hero.jpg);
   ========================================================================== */

.hero {
	position: relative;
	overflow: hidden;
	background: #150e08 url(../img/hero.jpg) no-repeat center center / cover;
	color: var(--cream);
	padding: 8rem 0 9rem;
	min-height: 34rem;
	display: flex;
	align-items: center;
}

/* 左側加深保證標題對比度，但留住酒紅絨布的顏色不要壓成全黑；
   底部淡出銜接下一區塊 */
.hero-deco {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		linear-gradient(90deg, rgba(12, 7, 4, .74) 0%, rgba(12, 7, 4, .6) 34%,
			rgba(12, 7, 4, .3) 58%, rgba(12, 7, 4, .08) 80%, transparent 100%),
		linear-gradient(180deg, rgba(12, 7, 4, .42) 0%, transparent 24%, transparent 76%,
			rgba(12, 7, 4, .45) 100%);
}

.hero-inner {
	position: relative;
	max-width: 46rem;
}

.hero-eyebrow {
	color: var(--gold-1);
	font-size: .8rem;
	letter-spacing: .3em;
	text-transform: uppercase;
	margin-bottom: 1.4rem;
}

.hero-title {
	color: var(--cream);
	font-size: 3rem;
	font-weight: 700;
	line-height: 1.4;
	margin-bottom: 1.6rem;
}

.hero-lead {
	color: rgba(244, 232, 208, .74);
	font-size: 1.05rem;
	font-weight: 300;
	margin-bottom: 2.4rem;
}

/* 平時是金框空心，hover 才上金漆 —— 企業站不需要一進門就閃 */
.btn-hero {
	display: inline-block;
	padding: .85rem 2.4rem;
	border: 1px solid var(--gold-3);
	border-radius: 2px;
	color: var(--gold-1);
	font-size: .92rem;
	letter-spacing: .16em;
	background: transparent;
}

.btn-hero:hover {
	background: linear-gradient(180deg, var(--gold-1), var(--gold-2) 55%, var(--gold-3));
	border-color: var(--gold-2);
	color: var(--ink-gold);
}

/* ==========================================================================
   通用區塊
   ========================================================================== */

.section {
	padding: 6.5rem 0;
}

.section-heading {
	margin-bottom: 3.5rem;
}

.section-heading h2 {
	font-size: 1.9rem;
	margin-bottom: .9rem;
	padding-bottom: 1rem;
	position: relative;
}

.section-heading h2::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 3rem;
	height: 3px;
	background: linear-gradient(90deg, var(--gold-2), var(--gold-deep));
}

.section-heading p {
	color: var(--ink-mute);
	font-size: .95rem;
	margin: 0;
}

/* ==========================================================================
   版本更新
   ========================================================================== */

.section-news {
	background: var(--paper-pure);
}

.news-panel {
	width: 100%;
	display: flex;
	flex-direction: column;
	padding: 2.4rem 2.4rem 1.6rem;
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: 4px;
}

.news-table {
	margin-bottom: auto;
}

.news-table td {
	border: 0;
	border-bottom: 1px solid var(--line);
	padding: .95rem .25rem;
	vertical-align: middle;
}

.news-table tr:last-child td {
	border-bottom: 0;
}

.news-item {
	display: flex;
	align-items: baseline;
	color: var(--ink-soft);
	font-size: .95rem;
}

.news-item:hover {
	color: var(--gold-3);
}

.news-item .ver {
	flex: 0 0 auto;
	margin-right: .9rem;
	padding: .1rem .55rem;
	border: 1px solid var(--line);
	border-radius: 2px;
	background: var(--paper-pure);
	color: var(--gold-deep);
	font-size: .78rem;
	letter-spacing: .06em;
	line-height: 1.7;
	transition: inherit;
}

.news-item:hover .ver {
	border-color: var(--gold-2);
	color: var(--gold-3);
}

.news-item .title {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.news-pagination {
	margin: 1.4rem 0 0;
	justify-content: flex-end;
}

.news-pagination .page-link {
	color: var(--ink-soft);
	background: var(--paper-pure);
	border-color: var(--line);
	border-radius: 2px;
	margin-left: .3rem;
	padding: .35rem .8rem;
	font-size: .88rem;
}

.news-pagination .page-item.active .page-link {
	background: linear-gradient(180deg, var(--gold-2), var(--gold-3));
	border-color: var(--gold-3);
	color: var(--ink-gold);
	font-weight: 500;
}

.news-pagination .page-item.disabled .page-link {
	color: #c9bda8;
	background: var(--paper-alt);
}

/* 產品截圖輪播 --------------------------------------------------------- */

.shot-panel {
	width: 100%;
	padding-left: 2.5rem;
}

.shot-carousel .item {
	padding: .25rem;
}

.shot-carousel img {
	width: 100%;
	border-radius: 4px;
}

/* 圖片替換：換成 <img> 後可刪掉 .shot-placeholder 與 .shot-1 ~ .shot-3 */
.shot-placeholder {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 21rem;
	border-radius: 4px;
	border: 1px solid rgba(212, 175, 55, .3);
	color: var(--cream);
	text-align: center;
}

.shot-placeholder .shot-label {
	color: var(--gold-1);
	font-size: .75rem;
	letter-spacing: .28em;
	text-transform: uppercase;
	opacity: .8;
	margin-bottom: .6rem;
}

.shot-placeholder .shot-caption {
	font-size: 1.15rem;
	font-weight: 500;
	letter-spacing: .1em;
}

.shot-1 { background: linear-gradient(160deg, #4a2f1c 0%, #2a190f 100%); }
.shot-2 { background: linear-gradient(160deg, #3a2417 0%, #1f1409 100%); }
.shot-3 { background: linear-gradient(160deg, #56381f 0%, #2c1d11 100%); }

.shot-carousel .owl-dots {
	margin-top: 1.4rem;
	text-align: center;
}

.shot-carousel .owl-dots .owl-dot span {
	width: 9px;
	height: 9px;
	margin: 0 5px;
	background: var(--line);
	transition: background .25s ease;
}

.shot-carousel .owl-dots .owl-dot.active span,
.shot-carousel .owl-dots .owl-dot:hover span {
	background: var(--gold-2);
}

/* ==========================================================================
   關於我們
   ========================================================================== */

.section-about {
	padding-bottom: 0;
	background: var(--paper);
}

.about-text p {
	margin-bottom: 1.4rem;
}

.about-motto {
	padding: 1.1rem 1.6rem;
	border-left: 3px solid var(--gold-2);
	background: var(--paper-pure);
	color: var(--ink);
	font-size: 1.05rem;
	font-weight: 500;
	letter-spacing: .08em;
}

.about-cards {
	margin-top: 5rem;
	padding: 3.5rem 0;
	background: var(--wood);
}

/* 卡片語言直接沿用 APP：木質漸層 + 金色細框 */
.info-card {
	display: block;
	padding: 1.8rem 1rem;
	border: 1px solid rgba(232, 200, 115, .22);
	border-radius: 4px;
	text-align: center;
	background: linear-gradient(160deg, var(--wood-card-lit), var(--wood-card));
}

.info-card:hover {
	border-color: var(--gold-2);
	transform: translateY(-4px);
}

.info-card h3 {
	color: var(--cream);
	font-size: 1.1rem;
	font-weight: 500;
	margin-bottom: .35rem;
}

.info-card:hover h3 {
	color: var(--gold-1);
}

.info-card span {
	display: block;
	color: var(--cream-dim);
	font-size: .72rem;
	letter-spacing: .2em;
	text-transform: uppercase;
	opacity: .7;
}

@media (max-width: 767.98px) {
	.about-cards .col-md-4 + .col-md-4 {
		margin-top: 1rem;
	}
}

/* ==========================================================================
   彈窗
   ========================================================================== */

.modal-content {
	border: 0;
	border-radius: 4px;
	background: var(--paper-pure);
}

.modal-header {
	align-items: center;
	padding: 1.3rem 1.8rem;
	border-bottom: 2px solid var(--gold-3);
	background: linear-gradient(160deg, var(--wood-card-lit), var(--wood-card));
}

.modal-title {
	color: var(--gold-1);
	font-size: 1.15rem;
	font-weight: 500;
	letter-spacing: .08em;
}

.modal-header .close {
	color: var(--cream);
	opacity: .6;
	text-shadow: none;
}

.modal-header .close:hover {
	color: var(--gold-1);
	opacity: 1;
}

.modal-body {
	padding: 1.9rem 1.8rem;
	font-size: .93rem;
}

.modal-body h6 {
	margin: 1.8rem 0 .7rem;
	color: var(--ink);
	font-size: .98rem;
	font-weight: 700;
	letter-spacing: .06em;
}

.modal-body h6:first-child {
	margin-top: 0;
}

.modal-body p {
	margin-bottom: .9rem;
}

.modal-body ul {
	margin-bottom: .9rem;
	padding-left: 1.3rem;
}

.modal-body .info-table {
	width: 100%;
	margin-bottom: 0;
}

.modal-body .info-table th,
.modal-body .info-table td {
	padding: .7rem .2rem;
	border-bottom: 1px solid var(--line);
	vertical-align: top;
}

.modal-body .info-table th {
	width: 8rem;
	color: var(--ink);
	font-weight: 500;
	white-space: nowrap;
}

.modal-body .info-table tr:last-child th,
.modal-body .info-table tr:last-child td {
	border-bottom: 0;
}

.modal-body .mail-link {
	font-size: 1.05rem;
	letter-spacing: .04em;
}

/* ==========================================================================
   頁尾
   ========================================================================== */

.site-footer {
	padding: 2.8rem 0;
	background: var(--wood-deep);
	border-top: 1px solid rgba(212, 175, 55, .18);
	color: var(--cream-dim);
	font-size: .86rem;
	letter-spacing: .08em;
}

.site-footer .footer-copy {
	color: rgba(205, 191, 156, .5);
	font-size: .78rem;
}

/* ==========================================================================
   響應式
   ========================================================================== */

@media (max-width: 991.98px) {
	body {
		padding-top: 68px;
	}

	.site-navbar .navbar-collapse {
		padding-top: .8rem;
	}

	.site-navbar .nav-link::after {
		display: none;
	}

	/* 窄螢幕：文字會直接壓在籌碼亮部上，構圖往右推並整體壓暗，
	   中段另加一層暗化壓住籌碼的金色高光 */
	.hero {
		padding: 5.5rem 0 6rem;
		min-height: 0;
		background-position: 78% center;
	}

	.hero-deco {
		background:
			linear-gradient(180deg, rgba(12, 7, 4, .9) 0%, rgba(12, 7, 4, .8) 30%,
				rgba(12, 7, 4, .8) 66%, rgba(12, 7, 4, .9) 100%),
			linear-gradient(90deg, rgba(12, 7, 4, .5) 0%, rgba(12, 7, 4, .3) 60%, transparent 100%);
	}

	.hero-title {
		font-size: 2.1rem;
	}

	.section {
		padding: 4.5rem 0;
	}

	.shot-panel {
		padding-left: 0;
		margin-top: 2.5rem;
	}
}

@media (max-width: 575.98px) {
	.hero-title {
		font-size: 1.7rem;
	}

	.hero-lead {
		font-size: .95rem;
	}

	.news-panel {
		padding: 1.6rem 1.4rem 1.2rem;
	}

	.shot-placeholder {
		height: 16rem;
	}
}