/**
 * SC-ICG House 設計 Token
 *
 * 白牌授權時，只需要覆寫這個檔案的「前台品牌」區塊即可換品牌，
 * 其餘元件樣式完全不動。這是設計規範第 7 節的核心要求。
 *
 * 分兩個區塊，作用域刻意分開：
 *
 * 1. 【後台工具】.sc-house-admin-wrap
 *    遵守 SC-ICG backend-design.md 的通用後台設計系統。
 *    所有 SC-ICG 外掛的後台長得一樣，這是跨專案的一致性，
 *    不隨品牌變動。
 *
 * 2. 【前台品牌】.sc-house-listing
 *    快找房屋的藍金識別，取自 sc-logo.svg 與站台 Blocksy 調色盤。
 *    白牌客戶換的是這一區。
 *
 * ⚠️ Token 一律定義在 wrapper class 上，不使用 :root。
 *    這是為了避免與客戶站其他外掛的變數名稱衝突
 *    （backend-design.md 6.2 節的強制要求）。
 *
 * @package SCICG\House\Core
 * @version 1.0.0
 */

/* =========================================================================
 * 1. 後台工具 Token（SC-ICG 通用後台設計系統）
 * ====================================================================== */

.sc-house-admin-wrap {
	/* ---- Core ---- */
	--primary-dark: #28333B;
	--accent-blue: #0A6EB1;
	--text-dark: #3E3A39;
	--text-body: #333333;
	--white: #FFFFFF;
	--danger: #C4392A;

	/* ---- Accent Blue 透明度階 ---- */
	--accent-blue-10: rgba(10, 110, 177, 0.10);
	--accent-blue-15: rgba(10, 110, 177, 0.15);
	--accent-blue-20: rgba(10, 110, 177, 0.20);
	--accent-blue-50: rgba(10, 110, 177, 0.50);
	--accent-blue-80: rgba(10, 110, 177, 0.80);

	/* ---- Danger 透明度階 ---- */
	--danger-10: rgba(196, 57, 42, 0.10);
	--danger-15: rgba(196, 57, 42, 0.15);
	--danger-20: rgba(196, 57, 42, 0.20);
	--danger-50: rgba(196, 57, 42, 0.50);
	--danger-80: rgba(196, 57, 42, 0.80);

	/* ---- Dark 透明度階 ---- */
	--dark-05: rgba(40, 51, 59, 0.05);
	--dark-08: rgba(40, 51, 59, 0.08);
	--dark-12: rgba(40, 51, 59, 0.12);
	--dark-20: rgba(40, 51, 59, 0.20);
	--dark-40: rgba(40, 51, 59, 0.40);
	--dark-60: rgba(40, 51, 59, 0.60);
	--dark-80: rgba(40, 51, 59, 0.80);

	/* ---- 語意色 ---- */
	--border: rgba(40, 51, 59, 0.10);
	--surface: #F7F8F9;
	--surface-hover: #F0F2F4;

	/* ---- 狀態色（僅用於 badge 與指示器）---- */
	--success-bg: rgba(16, 153, 96, 0.08);
	--success-text: #109960;
	--warning-bg: rgba(183, 129, 3, 0.08);
	--warning-text: #9A6D02;
	--warning-dot: #B78103;

	/* ---- 圓角 ---- */
	--radius-sm: 6px;
	--radius-md: 10px;
	--radius-lg: 14px;

	/* ---- 陰影 ---- */
	--shadow-sm: 0 1px 3px rgba(40, 51, 59, 0.06), 0 1px 2px rgba(40, 51, 59, 0.04);
	--shadow-md: 0 4px 16px rgba(40, 51, 59, 0.08), 0 1px 4px rgba(40, 51, 59, 0.04);
	--shadow-lg: 0 12px 40px rgba(40, 51, 59, 0.10), 0 2px 8px rgba(40, 51, 59, 0.04);

	/* ---- 過渡 ---- */
	--transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);

	/* ---- 字體 ---- */
	--font-sans: 'IBM Plex Sans', 'Noto Sans TC', -apple-system, BlinkMacSystemFont, sans-serif;
	--font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* =========================================================================
 * 2. 前台品牌 Token（快找房屋 · 藍金系）
 *
 * 取樣來源：
 *   sc-logo.svg 漸層 a  #00AEE0 → #0094BE
 *   sc-logo.svg 漸層 b  #1E3A5D → #26476D
 *   sc-logo.svg 圖形    #37BEF0
 *   Blocksy color4/5/6  #E89900 / #F6BC48 / #FFF4DC
 *
 * 白牌授權時覆寫這一區即可。
 * ====================================================================== */

.sc-house-listing {
	/* ---- 核心 ---- */
	--sc-ink: #14202E;         /* 主文字，帶藍近黑，比純黑柔和 */
	--sc-deep: #1E3A5D;        /* 快找深藍 · 導覽、頁尾、Spec Bar、深色區塊 */
	--sc-deep-2: #26476D;      /* 深藍次階 · 漸層終點、hover */
	--sc-water: #007A9E;       /* 汐藍 · 連結與次要文字（AA 4.91:1） */
	--sc-water-lt: #0094BE;    /* 汐藍亮階 · 圖表、大字、裝飾 */
	--sc-sky: #37BEF0;         /* 亮天藍 · 僅限圖示與裝飾 */
	--sc-salt: #F5F7F9;        /* 冷白 · 頁面底色（微冷，非米黃） */
	--sc-mist: #E8ECF0;        /* 霧藍灰 · 卡片與分區底 */
	--sc-line: #CBD5DF;        /* 界線 · 1px 分隔 */
	--sc-muted: #5A6B7D;       /* 次要文字（AA 5.10:1 on --sc-salt） */

	/* ---- 訊號（全案唯一高飽和色，極度克制）----
	 *
	 * 🔴 使用鐵律：金橘只在深藍底上出現，或當底色配深藍字。
	 *    絕不在白底上用金橘寫字（對比僅 2.34:1，不合格）。
	 *
	 *    #E89900 on #1E3A5D → 4.94:1  ✅ AA
	 *    #1E3A5D on #E89900 → 4.94:1  ✅ AA
	 *    #E89900 on #FFFFFF → 2.34:1  ❌ 不合格
	 *    #FFFFFF on #E89900 → 2.34:1  ❌ 不合格
	 */
	--sc-signal: #E89900;      /* 訊號金橘 · 價格、狀態標記 */
	--sc-signal-2: #F6BC48;    /* 淺金 · 已成交標記 */
	--sc-cream: #FFF4DC;       /* 米白 · 強調區塊底 */

	/* ---- 反白文字（用於深色底）---- */
	--sc-on-deep: #FFFFFF;
	--sc-on-deep-muted: rgba(255, 255, 255, 0.72);

	/* ---- 字體（設計規範 3-3 節）----
	 *
	 * 數據一律用等寬字，這是整套設計的簽名。
	 * 坪數、單價、距離需要「可比對」，等寬字讓數字與單位對齊，
	 * 讀起來像測量報告而不是傳單。
	 */
	--sc-font-serif: 'Noto Serif TC', 'Songti TC', serif;
	--sc-font-sans: 'Noto Sans TC', -apple-system, BlinkMacSystemFont, sans-serif;
	--sc-font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

	/* ---- 字級 ---- */
	--sc-text-hero: clamp(28px, 5vw, 44px);
	--sc-text-h2: clamp(22px, 3vw, 30px);
	--sc-text-h3: 18px;
	--sc-text-body: 16px;
	--sc-text-sm: 14px;
	--sc-text-xs: 12px;

	/* ---- 行高與字距 ---- */
	--sc-lh-title: 1.15;
	--sc-lh-body: 1.75;
	--sc-ls-title: -0.03em;

	/* ---- 間距 ---- */
	--sc-space-section: clamp(48px, 8vw, 96px);
	--sc-space-block: 32px;
	--sc-space-row: 16px;

	/* ---- 圓角（前台比後台更方，呼應製圖語言）---- */
	--sc-radius-sm: 3px;
	--sc-radius-md: 6px;

	/* ---- 版面 ---- */
	--sc-content-width: 1080px;
	--sc-reading-width: 34em;

	/* ---- 過渡 ---- */
	--sc-transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* =========================================================================
 * 3. 前台基礎樣式
 *
 * 前台不依賴佈景主題，因此需要自己的基礎樣式。
 * 但作用域仍嚴格限制在 .sc-house-listing 內，不外漏。
 * ====================================================================== */

.sc-house-listing {
	box-sizing: border-box;
	background: var(--sc-salt);
	color: var(--sc-ink);
	font-family: var(--sc-font-sans);
	font-size: var(--sc-text-body);
	line-height: var(--sc-lh-body);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.sc-house-listing *,
.sc-house-listing *::before,
.sc-house-listing *::after {
	box-sizing: inherit;
}

.sc-house-listing h1,
.sc-house-listing h2,
.sc-house-listing h3,
.sc-house-listing h4 {
	margin: 0;
	font-family: var(--sc-font-serif);
	font-weight: 700;
	line-height: var(--sc-lh-title);
	letter-spacing: var(--sc-ls-title);
	color: var(--sc-ink);
}

.sc-house-listing p {
	margin: 0 0 1em;
	max-width: var(--sc-reading-width);
}

.sc-house-listing a {
	color: var(--sc-water);
	text-decoration: none;
	transition: color var(--sc-transition);
}

.sc-house-listing a:hover {
	color: var(--sc-deep);
	text-decoration: underline;
}

.sc-house-listing a:focus-visible,
.sc-house-listing button:focus-visible {
	outline: 2px solid var(--sc-water);
	outline-offset: 2px;
}

.sc-house-listing img {
	max-width: 100%;
	height: auto;
	display: block;
}

/* 數據一律等寬。這個 class 是整套設計的簽名。 */
.sc-house-listing .sc-num {
	font-family: var(--sc-font-mono);
	font-weight: 500;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0;
}

/* 節次編號用說明書語彙（§01 標的），不是裝飾性的 01 / 02。 */
.sc-house-listing .sc-section-mark {
	font-family: var(--sc-font-mono);
	font-size: var(--sc-text-xs);
	font-weight: 500;
	color: var(--sc-muted);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* =========================================================================
 * 4. Spec Bar（設計簽名元件）
 *
 * 一條橫向資料帶，等寬字排列關鍵規格，在 hero 底部吸附滾動。
 *
 * 它同時是：網頁 sticky bar ＋ OG 分享圖主體 ＋ LINE 卡片
 *          ＋ DM 頁首 ＋ 現場立牌。一套設計，五種物料。
 *
 * 深藍底配金橘價格是刻意的功能決定，不只是美感：
 * 物件頁最主要的傳播情境是 LINE 縮圖，在 4 公分寬的卡片上，
 * 價格必須在 0.3 秒內被看見。這個組合的對比度是 4.94:1。
 * ====================================================================== */

.sc-house-listing .sc-spec-bar {
	position: sticky;
	top: 0;
	z-index: 20;
	display: flex;
	align-items: center;
	gap: 0;
	background: var(--sc-deep);
	color: var(--sc-on-deep);
	font-family: var(--sc-font-mono);
	font-size: var(--sc-text-sm);
	font-variant-numeric: tabular-nums;
	overflow-x: auto;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.sc-house-listing .sc-spec-bar::-webkit-scrollbar {
	display: none;
}

.sc-house-listing .sc-spec-bar__item {
	flex: 0 0 auto;
	padding: 14px 18px;
	white-space: nowrap;
	border-right: 1px solid rgba(255, 255, 255, 0.14);
}

.sc-house-listing .sc-spec-bar__label {
	display: block;
	font-size: 10px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--sc-on-deep-muted);
	margin-bottom: 2px;
}

.sc-house-listing .sc-spec-bar__value {
	font-weight: 500;
}

/* 價格：全條唯一的金橘。 */
.sc-house-listing .sc-spec-bar__item--price .sc-spec-bar__value {
	color: var(--sc-signal);
	font-size: 17px;
	font-weight: 700;
}

/* 合規資訊固定嵌在帶子右端，滿足經紀業條例第 21、22 條，
   同時完全不破壞版面。設計簽名與法規義務綁在同一個元件上。 */
.sc-house-listing .sc-spec-bar__compliance {
	flex: 1 1 auto;
	min-width: 0;
	padding: 14px 18px;
	font-size: 10px;
	line-height: 1.4;
	color: var(--sc-on-deep-muted);
	text-align: right;
	border-right: 0;
}

.sc-house-listing .sc-spec-bar__cta {
	flex: 0 0 auto;
	margin: 8px 12px 8px 0;
	padding: 10px 20px;
	background: var(--sc-signal);
	color: var(--sc-deep); /* 金橘底配深藍字，4.94:1。絕不用白字。 */
	font-family: var(--sc-font-sans);
	font-size: var(--sc-text-sm);
	font-weight: 700;
	border: 0;
	border-radius: var(--sc-radius-sm);
	cursor: pointer;
	transition: background var(--sc-transition);
}

@media (hover: hover) {
	.sc-house-listing .sc-spec-bar__cta:hover {
		background: var(--sc-signal-2);
	}
}

.sc-house-listing .sc-spec-bar__cta:active {
	transform: scale(0.97);
}

/* 載入時從下滑入定位。動態一律克制，只做這一個與節次淡入。 */
@media (prefers-reduced-motion: no-preference) {
	.sc-house-listing .sc-spec-bar {
		animation: sc-spec-bar-in 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) both;
	}
}

@keyframes sc-spec-bar-in {
	from {
		opacity: 0;
		transform: translateY(12px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* 狀態標記 */
.sc-house-listing .sc-badge {
	display: inline-block;
	padding: 3px 10px;
	font-family: var(--sc-font-mono);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.04em;
	border-radius: var(--sc-radius-sm);
}

.sc-house-listing .sc-badge--new {
	background: var(--sc-signal);
	color: var(--sc-deep);
}

.sc-house-listing .sc-badge--sold {
	background: var(--sc-signal-2);
	color: var(--sc-deep);
}

.sc-house-listing .sc-badge--exclusive {
	background: var(--sc-deep);
	color: var(--sc-on-deep);
}

/* =========================================================================
 * 5. 響應式
 * ====================================================================== */

@media (max-width: 782px) {
	.sc-house-listing .sc-spec-bar__item {
		padding: 10px 14px;
	}

	.sc-house-listing .sc-spec-bar__compliance {
		display: none; /* 手機上改由頁尾呈現合規聲明，避免擠壓規格帶。 */
	}

	.sc-house-listing .sc-spec-bar__cta {
		margin: 6px 10px 6px 0;
		padding: 10px 16px;
	}
}