/* ============================================================
   main-v2mock.css — 首頁八幕 mockup 樣張(批V2-2)專屬樣式
   ⚠️scoped 到 body.nx-skin--blueprint,只服務 main-v2mock.php;
   不動 site.css/tokens.css/main.css(共享佈景契約,勿波及 live main.php)。
   定案後由批V3 擇要併入 site.css。全部沿用 tokens 變數,不寫死色值。
   語言=藍圖:方角 / 2px 墨線 / 硬位移陰影 / mono 工序碼 / 橘紅 accent。
   ============================================================ */

/* ── 樣張標示帶(落版移除)── */
body.nx-skin--blueprint .nx-v2-flag {
	position: sticky; top: 0; z-index: 30;
	background: repeating-linear-gradient(-45deg, #1d2733 0 14px, #16202b 14px 28px);
	color: #ffd9cb; text-align: center;
	font-family: var(--f-mono); font-size: .74rem; letter-spacing: .06em;
	padding: .45rem 1rem; border-bottom: 2px solid var(--c-accent);
}

/* ── 共用:GAP / MOCK 標示(誠實標,不冒充實作)── */
body.nx-skin--blueprint .nx-v2-gap {
	display: flex; align-items: center; justify-content: center; text-align: center;
	width: 100%; height: 100%; min-height: 120px;
	font-family: var(--f-mono); font-size: .78rem; line-height: 1.7; letter-spacing: .04em;
	color: var(--c-text-soft);
	background:
		repeating-linear-gradient(45deg, transparent 0 10px, rgba(92,107,122,.05) 10px 20px),
		var(--c-bg);
	border: 1.5px dashed var(--c-line2);
}
body.nx-skin--blueprint .nx-v2-mock {
	font-family: var(--f-mono); font-size: .66rem; letter-spacing: .08em;
	color: var(--c-accent-ink); border: 1px solid var(--c-accent); border-radius: 999px;
	padding: .05rem .5rem; margin-left: auto; white-space: nowrap;
}
body.nx-skin--blueprint .nx-v2-gaptag {
	display: inline-block; font-family: var(--f-mono); font-size: .66rem; letter-spacing: .06em;
	color: var(--c-accent-ink); background: rgba(214,60,7,.08);
	border: 1px solid var(--c-accent); padding: .06rem .45rem; vertical-align: .1em;
}

/* ════════════════════════════════════════════════════════════
   幕2 問題對號:字卡版 A / 配圖版 B(兩版並陳,擇一落版)
   ════════════════════════════════════════════════════════════ */
body.nx-skin--blueprint .nx-v2-abwrap { margin-top: 1.8rem; }
body.nx-skin--blueprint .nx-v2-abwrap + .nx-v2-abwrap {
	margin-top: 2.6rem; padding-top: 2.2rem; border-top: 1px dashed var(--c-line2);
}
body.nx-skin--blueprint .nx-v2-ablabel {
	display: flex; align-items: center; gap: .5rem;
	font-family: var(--f-mono); font-size: .78rem; letter-spacing: .08em;
	color: var(--c-text-soft); margin-bottom: 1.2rem;
}
body.nx-skin--blueprint .nx-v2-ablabel b { color: var(--c-accent-ink); }

/* 版本 A：三卡點縱向堆疊,第一人稱大字 */
body.nx-skin--blueprint .nx-v2-problems--text { display: grid; gap: 1px; background: var(--c-line2); border: 1.5px solid var(--c-line2); }
body.nx-skin--blueprint .nx-v2-problems--text .nx-v2-problem {
	background: var(--c-card); padding: 1.6rem 1.7rem;
	display: grid; grid-template-columns: auto 1fr auto; align-items: baseline;
	gap: .4rem 1.4rem; transition: background .15s ease;
}
body.nx-skin--blueprint .nx-v2-problems--text .nx-v2-problem:hover { background: #fff6f1; }
body.nx-skin--blueprint .nx-v2-problem__idx {
	font-family: var(--f-mono); font-size: .82rem; font-weight: 700; letter-spacing: .06em;
	color: var(--c-accent-ink); white-space: nowrap;
}
body.nx-skin--blueprint .nx-v2-problem__say {
	font-size: 1.22rem; font-weight: 800; line-height: 1.75; color: var(--c-ink);
	margin: 0; text-wrap: pretty;
}
body.nx-skin--blueprint .nx-v2-problem__tag {
	grid-column: 2; font-family: var(--f-mono); font-size: .72rem; letter-spacing: .04em;
	color: var(--c-text-soft);
}
body.nx-skin--blueprint .nx-v2-problem__link {
	grid-column: 3; grid-row: 1 / span 2; align-self: center;
	font-size: .84rem; font-weight: 700; color: var(--c-accent-ink); text-decoration: none;
	white-space: nowrap;
}
body.nx-skin--blueprint .nx-v2-problem__link:hover { color: var(--c-accent); }

/* 版本 B：三卡點 3 欄,各配情境示意圖位 */
body.nx-skin--blueprint .nx-v2-problems--img { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.3rem; }
body.nx-skin--blueprint .nx-v2-problem--img {
	background: var(--c-card); border: 1.5px solid var(--c-line2);
	display: flex; flex-direction: column;
}
body.nx-skin--blueprint .nx-v2-problem--img:hover { border-color: var(--c-ink); box-shadow: var(--shadow-card-sm); }
body.nx-skin--blueprint .nx-v2-problem__pic { aspect-ratio: 16 / 10; overflow: hidden; }
body.nx-skin--blueprint .nx-v2-problem__pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
body.nx-skin--blueprint .nx-v2-problem--img .nx-v2-problem__idx { padding: 1rem 1.3rem 0; }
body.nx-skin--blueprint .nx-v2-problem--img .nx-v2-problem__say { font-size: 1.02rem; font-weight: 800; line-height: 1.7; padding: .5rem 1.3rem .2rem; }
body.nx-skin--blueprint .nx-v2-problem--img .nx-v2-problem__link { padding: .6rem 1.3rem 1.1rem; margin-top: auto; font-size: .84rem; font-weight: 700; color: var(--c-accent-ink); text-decoration: none; }
body.nx-skin--blueprint .nx-v2-problem--img .nx-v2-problem__link:hover { color: var(--c-accent); }

@media (max-width: 780px) {
	body.nx-skin--blueprint .nx-v2-problems--text .nx-v2-problem { grid-template-columns: 1fr; gap: .5rem; }
	body.nx-skin--blueprint .nx-v2-problem__say { font-size: 1.08rem; }
	body.nx-skin--blueprint .nx-v2-problem__link { grid-column: 1; grid-row: auto; }
	body.nx-skin--blueprint .nx-v2-problem__tag { grid-column: 1; }
	body.nx-skin--blueprint .nx-v2-problems--img { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════════════════════
   幕3 五步方法:藍圖線性 schematic(SVG 導軌 + 5 欄步驟,節點對齊 10/30/50/70/90%)
   ════════════════════════════════════════════════════════════ */
body.nx-skin--blueprint .nx-v2-flow { margin-top: 2rem; }
body.nx-skin--blueprint .nx-v2-flow__svg { display: block; width: 100%; height: 88px; }
body.nx-skin--blueprint .nx-v2-flow__steps {
	list-style: none; margin: 0; padding: 0;
	display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.2rem;
}
body.nx-skin--blueprint .nx-v2-flow__steps > li { text-align: center; padding: 0 .3rem; }
body.nx-skin--blueprint .nx-v2-flow__code {
	display: block; font-family: var(--f-mono); font-size: .72rem; letter-spacing: .08em;
	color: var(--c-text-soft); margin-bottom: .5rem;
}
body.nx-skin--blueprint .nx-v2-flow__steps h3 { font-size: 1rem; font-weight: 800; margin: 0 0 .5rem; }
body.nx-skin--blueprint .nx-v2-flow__steps p { font-size: .84rem; line-height: 1.85; color: var(--c-text-soft); margin: 0; }
body.nx-skin--blueprint .nx-v2-flow__steps > li.is-pivot .nx-v2-flow__code { color: var(--c-accent-ink); font-weight: 700; }
body.nx-skin--blueprint .nx-v2-flow__steps > li.is-pivot h3 { color: var(--c-accent-ink); }

@media (max-width: 820px) {
	/* 手機:隱藏水平導軌,步驟改縱向,以左側墨線+節點連成序列 */
	body.nx-skin--blueprint .nx-v2-flow__svg { display: none; }
	body.nx-skin--blueprint .nx-v2-flow__steps { grid-template-columns: 1fr; gap: 0; border-left: 2px solid var(--c-line2); margin-left: .5rem; }
	body.nx-skin--blueprint .nx-v2-flow__steps > li { text-align: left; padding: 1rem 0 1rem 1.4rem; position: relative; }
	body.nx-skin--blueprint .nx-v2-flow__steps > li::before {
		content: ""; position: absolute; left: -7px; top: 1.3rem;
		width: 11px; height: 11px; border-radius: 50%; background: var(--c-card); border: 2px solid var(--c-ink);
	}
	body.nx-skin--blueprint .nx-v2-flow__steps > li.is-pivot::before { background: var(--c-accent); border-color: var(--c-accent-ink); width: 14px; height: 14px; left: -8px; }
}

/* ════════════════════════════════════════════════════════════
   幕4 能力地圖:暗底虛空(呼應 hero)+ 中心核 + 四能力域 hub-and-spoke
   ════════════════════════════════════════════════════════════ */
body.nx-skin--blueprint .nx-sec--v2map {
	background:
		radial-gradient(ellipse 60% 80% at 50% 0%, rgba(255,88,33,.10), transparent 70%),
		linear-gradient(#141d27, #1d2733);
	border-top: 2px solid var(--c-ink); border-bottom: 2px solid var(--c-ink);
	overflow: hidden;
}
body.nx-skin--blueprint .nx-sec__head--ondark .nx-sec__title { color: #fff; }
body.nx-skin--blueprint .nx-sec__head--ondark .nx-sec__title::before { color: var(--c-accent); }
body.nx-skin--blueprint .nx-sec__head--ondark .nx-sec__sub { color: #b7c2cd; }

body.nx-skin--blueprint .nx-v2-map {
	position: relative; margin-top: 2.2rem;
	/* 題3(2026-07-15 業主回饋):圓框與下方矩形太近有壓迫感。實測 gap 只 2rem(32px),
	   但核心 ::before 虛線環往外 22px、::after「組合·COMPOSE」標籤往下 ~48px 溢出 →
	   標籤/環壓進矩形區。拉大 gap 讓標籤與環之下留真正呼吸空間。 */
	display: flex; flex-direction: column; align-items: center; gap: 6rem;
}
/* 中心核(帶軌道環,呼應 ∞ 恆運轉) */
body.nx-skin--blueprint .nx-v2-map__core {
	position: relative; z-index: 2;
	width: 148px; height: 148px; border-radius: 50%;
	display: flex; align-items: center; justify-content: center; text-align: center;
	background: radial-gradient(circle at 50% 40%, #26333f, #141d27);
	border: 2px solid var(--c-accent);
	color: #fff; font-weight: 900; font-size: 1rem; line-height: 1.5;
	box-shadow: 0 0 0 1px rgba(255,88,33,.25), 0 0 40px rgba(255,88,33,.18);
}
body.nx-skin--blueprint .nx-v2-map__core::before {
	content: ""; position: absolute; inset: -22px; border-radius: 50%;
	border: 1px dashed rgba(255,88,33,.4);
}
/* 題4b(2026-07-15 業主回饋):標籤原 -2.1rem 與虛線環(::before inset -22px)交疊。
   環底在 core 底下 22px;標籤下移至 -2.9rem(~46px)清開環,落在環與連線匯流排之間。 */
body.nx-skin--blueprint .nx-v2-map__core::after {
	content: "組合 · COMPOSE"; position: absolute; bottom: -2.9rem;
	font-family: var(--f-mono); font-size: .64rem; letter-spacing: .18em; color: rgba(255,88,33,.75);
	white-space: nowrap;
}
body.nx-skin--blueprint .nx-v2-domains {
	position: relative; z-index: 1; width: 100%;
	display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1rem;
}
body.nx-skin--blueprint .nx-v2-domain {
	background: rgba(255,255,255,.035); border: 1.5px solid #34424f;
	padding: 1.3rem 1.2rem; transition: border-color .16s ease, background .16s ease, transform .16s ease;
}
body.nx-skin--blueprint .nx-v2-domain:hover { border-color: var(--c-accent); background: rgba(255,88,33,.06); transform: translateY(-3px); }
body.nx-skin--blueprint .nx-v2-domain__code {
	display: block; font-family: var(--f-mono); font-size: .68rem; letter-spacing: .1em;
	color: var(--c-accent); margin-bottom: .55rem;
}
body.nx-skin--blueprint .nx-v2-domain h3 { font-size: 1.02rem; font-weight: 800; color: #fff; margin: 0 0 .8rem; line-height: 1.5; }
body.nx-skin--blueprint .nx-v2-domain__tags { display: flex; flex-wrap: wrap; gap: .4rem; }
body.nx-skin--blueprint .nx-v2-domain__tags span {
	font-family: var(--f-mono); font-size: .68rem; letter-spacing: .02em;
	color: #b7c2cd; border: 1px solid #3f4d5a; padding: .12rem .5rem;
}
@media (max-width: 860px) {
	body.nx-skin--blueprint .nx-v2-domains { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
	body.nx-skin--blueprint .nx-v2-domains { grid-template-columns: 1fr; }
}

/* ── 能力地圖藍圖連線(main-home-v2-map.js 注入 SVG;把「組合 COMPOSE」視覺化) ──
   圓核 → 4 條正交電路連線 → 4 能力域;捲入視野逐條 draw-in + 橘色能量脈衝流動。
   降級:reduced-motion / body.nx-fx-off(巧思關)→ 靜態連線不跑脈衝;≤860px 隱藏(避免跨列交叉)。 */
body.nx-skin--blueprint .nx-v2-wires {
	position: absolute; inset: 0; z-index: 0;
	width: 100%; height: 100%; pointer-events: none; overflow: visible;
}
body.nx-skin--blueprint .nx-v2-wire {
	fill: none; stroke: rgba(255, 88, 33, .34); stroke-width: 1.4;
	stroke-linejoin: round; stroke-linecap: round;
	stroke-dasharray: var(--len); stroke-dashoffset: var(--len);
}
/* 捲入視野 → 逐條畫出(--i 交錯) */
body.nx-skin--blueprint .nx-v2-map--wired .nx-v2-wire {
	transition: stroke-dashoffset .9s cubic-bezier(.4, 0, .2, 1);
	transition-delay: calc(var(--i) * .14s);
	stroke-dashoffset: 0;
}
/* 卡片頂接點(常態微亮;JS 隨機挑卡時加 is-ping 觸發放大閃光=「對話」回應) */
body.nx-skin--blueprint .nx-v2-wire-node {
	fill: var(--c-accent); opacity: 0;
	filter: drop-shadow(0 0 4px rgba(255, 88, 33, .8));
}
body.nx-skin--blueprint .nx-v2-map--wired .nx-v2-wire-node {
	transition: opacity .3s ease; transition-delay: calc(.9s + var(--i) * .14s); opacity: .55;
}
/* 卡片回應:JS 隨機點亮 → 邊框亮起 + 接點圓點放大閃光。
   題3c(2026-07-15 業主回饋):移除橫向流動脈衝(半長不短反扣分),只留圓點+框線亮起。 */
body.nx-skin--blueprint .nx-v2-domain.is-ping {
	border-color: var(--c-accent);
	box-shadow: 0 0 0 1px rgba(255, 88, 33, .5), 0 0 22px rgba(255, 88, 33, .22);
	animation: nx-v2-domain-ping .7s ease-out;
}
@keyframes nx-v2-domain-ping {
	0%   { box-shadow: 0 0 0 1px rgba(255, 88, 33, .8), 0 0 30px rgba(255, 88, 33, .38); }
	100% { box-shadow: 0 0 0 1px rgba(255, 88, 33, 0), 0 0 22px rgba(255, 88, 33, 0); }
}
body.nx-skin--blueprint .nx-v2-wire-node.is-ping {
	opacity: 1; animation: nx-v2-node-ping .7s ease-out;
}
@keyframes nx-v2-node-ping {
	0%   { r: 3; opacity: 1; }
	45%  { r: 6; opacity: 1; }
	100% { r: 3; opacity: .55; }
}
/* 降級:巧思關 或 減少動態 → 保留靜態連線,回應閃光停(JS 也會停編排) */
body.nx-fx-off .nx-v2-domain.is-ping, body.nx-fx-off .nx-v2-wire-node.is-ping { animation: none !important; }
@media (prefers-reduced-motion: reduce) {
	body.nx-skin--blueprint .nx-v2-map--wired .nx-v2-wire { transition: none; }
	body.nx-skin--blueprint .nx-v2-domain.is-ping, body.nx-skin--blueprint .nx-v2-wire-node.is-ping { animation: none !important; box-shadow: none; }
}
/* ≤860px(2 欄/1 欄)隱藏連線,避免跨列交叉 */
@media (max-width: 860px) {
	body.nx-skin--blueprint .nx-v2-wires { display: none; }
}

/* ════════════════════════════════════════════════════════════
   幕5 跨域案例×3:L2 圖文左右交錯,五層敘事 dl
   ════════════════════════════════════════════════════════════ */
body.nx-skin--blueprint .nx-v2-case {
	display: grid; grid-template-columns: 1.05fr .95fr; gap: 2.6rem; align-items: center;
	margin-top: 2.6rem; padding-top: 2.6rem;
}
body.nx-skin--blueprint .nx-v2-case:first-of-type { margin-top: 2rem; padding-top: 0; }
body.nx-skin--blueprint .nx-v2-case + .nx-v2-case { border-top: 1px dashed var(--c-line2); }
body.nx-skin--blueprint .nx-v2-case--rev .nx-v2-case__fig { order: 2; }

/* L2 裝置合成:自足 navy 面板,不再加墨框/cover-crop(會切到螢幕);保留硬陰影 */
body.nx-skin--blueprint .nx-v2-case__fig { margin: 0; }
body.nx-skin--blueprint .nx-v2-case__fig img {
	display: block; width: 100%; height: auto;
	box-shadow: var(--shadow-card); background: #1d2733;
}
body.nx-skin--blueprint .nx-v2-case__fig figcaption {
	display: flex; flex-wrap: wrap; gap: .5rem; align-items: center;
	margin-top: .7rem; font-family: var(--f-mono); font-size: .74rem; letter-spacing: .03em; color: var(--c-text-soft);
}
body.nx-skin--blueprint .nx-v2-case__code {
	display: block; font-family: var(--f-mono); font-size: .74rem; letter-spacing: .06em;
	color: var(--c-accent-ink); margin-bottom: .5rem;
}
body.nx-skin--blueprint .nx-v2-case__body h3 { font-size: 1.35rem; font-weight: 900; line-height: 1.5; margin: 0 0 1.1rem; }
body.nx-skin--blueprint .nx-v2-case__layers { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 0; }
body.nx-skin--blueprint .nx-v2-case__layers dt {
	font-family: var(--f-mono); font-size: .72rem; letter-spacing: .04em; color: var(--c-text-soft);
	padding: .65rem 1rem .65rem 0; border-top: 1px solid var(--c-line); white-space: nowrap; align-self: start;
}
body.nx-skin--blueprint .nx-v2-case__layers dd {
	margin: 0; padding: .65rem 0; border-top: 1px solid var(--c-line);
	font-size: .95rem; line-height: 1.8; color: var(--c-ink);
}
body.nx-skin--blueprint .nx-v2-case__layers dt:first-child,
body.nx-skin--blueprint .nx-v2-case__layers dt:first-child + dd { border-top: 0; }
body.nx-skin--blueprint .nx-v2-cap {
	display: inline-block; font-family: var(--f-mono); font-size: .72rem;
	color: var(--c-accent-ink); background: rgba(214,60,7,.07); border: 1px solid var(--c-line2);
	padding: .1rem .5rem; margin: 0 .35rem .35rem 0;
}
body.nx-skin--blueprint .nx-v2-note-inline { font-size: .78rem; color: var(--c-text-soft); }
@media (max-width: 820px) {
	body.nx-skin--blueprint .nx-v2-case { grid-template-columns: 1fr; gap: 1.3rem; }
	body.nx-skin--blueprint .nx-v2-case--rev .nx-v2-case__fig { order: 0; }
}

/* ════════════════════════════════════════════════════════════
   幕6 精選產品×3:規格面板(圖+規格 dl,含「何時不適合」)+ 解法庫入口
   ════════════════════════════════════════════════════════════ */
body.nx-skin--blueprint .nx-v2-prodgrid {
	display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; margin-top: 2rem;
}
body.nx-skin--blueprint .nx-v2-prod {
	background: var(--c-card); border: 2px solid var(--c-ink); box-shadow: var(--shadow-card);
	display: flex; flex-direction: column;
}
body.nx-skin--blueprint .nx-v2-prod__fig { position: relative; margin: 0; line-height: 0; border-bottom: 2px solid var(--c-ink); background: #1d2733; }
body.nx-skin--blueprint .nx-v2-prod__fig img { display: block; width: 100%; height: auto; }
body.nx-skin--blueprint .nx-v2-prod__fig .nx-v2-gaptag { position: absolute; right: .55rem; bottom: .55rem; background: rgba(255,255,255,.92); }
body.nx-skin--blueprint .nx-v2-prod__body { padding: 1.3rem 1.35rem 1.4rem; display: flex; flex-direction: column; }
body.nx-skin--blueprint .nx-v2-prod__code { font-family: var(--f-mono); font-size: .8rem; font-weight: 700; letter-spacing: .04em; color: var(--c-accent-ink); }
body.nx-skin--blueprint .nx-v2-prod__body h3 { font-size: 1.05rem; font-weight: 800; margin: .35rem 0 .9rem; line-height: 1.5; }
body.nx-skin--blueprint .nx-v2-prod__body dl { margin: 0; display: grid; }
body.nx-skin--blueprint .nx-v2-prod__body dt {
	font-family: var(--f-mono); font-size: .68rem; letter-spacing: .06em; color: var(--c-text-soft);
	margin-top: .85rem;
}
body.nx-skin--blueprint .nx-v2-prod__body dd { margin: .2rem 0 0; font-size: .86rem; line-height: 1.8; color: var(--c-ink); }
/* 「何時不適合」= 誠實欄,accent 左界標示這是刻意的自我設限 */
body.nx-skin--blueprint .nx-v2-prod__body dt:last-of-type { color: var(--c-accent-ink); }
body.nx-skin--blueprint .nx-v2-prod__body dd:last-of-type {
	color: var(--c-text-soft); border-left: 2px solid var(--c-accent); padding-left: .7rem; margin-top: .3rem;
}
@media (max-width: 820px) { body.nx-skin--blueprint .nx-v2-prodgrid { grid-template-columns: 1fr; } }

/* 解法庫入口:滿寬橫幅,與上方三面板異權重(避免第四排卡片感) */
body.nx-skin--blueprint .nx-v2-libentry {
	display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .4rem 1.4rem;
	margin-top: 1.4rem; padding: 1.2rem 1.5rem;
	background: var(--c-card); border: 1.5px solid var(--c-line2); text-decoration: none;
	transition: border-color .16s ease, box-shadow .16s ease;
}
body.nx-skin--blueprint .nx-v2-libentry:hover { border-color: var(--c-ink); box-shadow: var(--shadow-card-sm); }
body.nx-skin--blueprint .nx-v2-libentry__k { font-family: var(--f-mono); font-size: .74rem; letter-spacing: .1em; color: var(--c-accent-ink); font-weight: 700; white-space: nowrap; }
body.nx-skin--blueprint .nx-v2-libentry__t { font-size: .9rem; color: var(--c-text-soft); line-height: 1.7; }
body.nx-skin--blueprint .nx-v2-libentry__more { font-weight: 800; color: var(--c-ink); white-space: nowrap; }
body.nx-skin--blueprint .nx-v2-libentry:hover .nx-v2-libentry__more { color: var(--c-accent-ink); }
@media (max-width: 640px) {
	body.nx-skin--blueprint .nx-v2-libentry { grid-template-columns: 1fr; gap: .5rem; }
	body.nx-skin--blueprint .nx-v2-libentry__k { white-space: normal; }
}

/* ════════════════════════════════════════════════════════════
   幕7 人與原則:voice 面板 + 工作場景圖位(GAP)雙欄
   ════════════════════════════════════════════════════════════ */
body.nx-skin--blueprint .nx-v2-people { display: grid; grid-template-columns: 1.35fr 1fr; gap: 2rem; align-items: stretch; }
body.nx-skin--blueprint .nx-v2-people .nx-c-voice { margin: 0; height: 100%; }
body.nx-skin--blueprint .nx-v2-people__pic {
	margin: 0; border: 2px solid var(--c-ink); box-shadow: var(--shadow-card); background: var(--c-card);
	display: flex; min-height: 240px; overflow: hidden;
}
body.nx-skin--blueprint .nx-v2-people__pic img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
@media (max-width: 820px) {
	body.nx-skin--blueprint .nx-v2-people { grid-template-columns: 1fr; }
	body.nx-skin--blueprint .nx-v2-people__pic { min-height: 180px; }
}

/* ════════════════════════════════════════════════════════════
   幕8 費用+開口:顧問式開口區
   ════════════════════════════════════════════════════════════ */
body.nx-skin--blueprint .nx-v2-open {
	margin-top: 2rem; padding: 2rem 2.1rem;
	background: var(--c-ink); color: #fff;
	display: grid; grid-template-columns: 1.4fr auto; gap: 1.6rem 2.2rem; align-items: center;
}
body.nx-skin--blueprint .nx-v2-open__lead h3 { font-size: 1.2rem; font-weight: 900; line-height: 1.6; margin: 0 0 .6rem; color: #fff; }
body.nx-skin--blueprint .nx-v2-open__lead p { margin: 0; color: #c5cfd8; font-size: .92rem; line-height: 1.9; max-width: 42em; }
body.nx-skin--blueprint .nx-v2-open .nx-sec--cta { margin-top: 0; }
body.nx-skin--blueprint .nx-v2-open .nx-c-btn--outline { border-color: rgba(255,255,255,.55); color: #fff; background: transparent; }
body.nx-skin--blueprint .nx-v2-open .nx-c-btn--outline:hover { background: rgba(255,255,255,.1); box-shadow: none; }
@media (max-width: 780px) {
	body.nx-skin--blueprint .nx-v2-open { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════════════════════
   快速引導區(棒2 落版,自 main-quickguide-mock.css 併入;規劃稿 260716_01 §二)
   身分=hero 的「控制台/快捷工具帶」,不是第九幕。
   ⭐邊界感根因(棒1 實測):原底色 var(--c-bg)=#f5f7f9,而幕2 背景透明吃 body 也是 #f5f7f9
     → 兩塊「完全同色」=業主指出的「融合、不凸顯」。
   ⭐解法:白底 band——對上以 5px 橘條硬切暗 hero、對下靠 2px 墨線收邊 + 深墨卡片與幕2
     「淺灰底白卡」完全相反 → 上下都不會被看成同一區。
   ════════════════════════════════════════════════════════════ */
body.nx-skin--blueprint .nx-sec--guide {
	position: relative;
	background: var(--c-card);              /* 白底:與暗 hero、與 #f5f7f9 幕2 都不同 */
	border-bottom: 2px solid var(--c-ink);  /* 硬收邊:與幕2 切開 */
	padding: 2.4rem 0 2.6rem;
}
/* 頂部橘條:標記「這是特別的一條」,同時是 hero → 引導區的硬切線 */
body.nx-skin--blueprint .nx-sec--guide::before {
	content: ''; position: absolute; top: 0; left: 0; right: 0;
	height: 5px; background: var(--c-accent);
}

body.nx-skin--blueprint .nx-guide__head {
	display: flex; align-items: baseline; gap: .9rem; flex-wrap: wrap;
	margin-bottom: 1.5rem;
}
body.nx-skin--blueprint .nx-guide__eyebrow {
	margin: 0; flex: none;
	font-family: var(--f-mono); font-size: .78rem; font-weight: 700; letter-spacing: .1em;
	color: var(--c-accent-ink);
}
body.nx-skin--blueprint .nx-guide__eyebrow::before {
	content: ''; display: inline-block; vertical-align: .18em;
	width: 18px; height: 2px; margin-right: .55rem; background: var(--c-accent);
}
body.nx-skin--blueprint .nx-guide__lead {
	margin: 0; font-size: .95rem; line-height: 1.75; color: var(--c-text-soft);
}
body.nx-skin--blueprint .nx-guide__lead b { color: var(--c-ink); font-weight: 800; }

/* 卡片為整塊可點,語義用 <a> */
body.nx-skin--blueprint .nx-guide__card { text-decoration: none; display: flex; }
body.nx-skin--blueprint .nx-guide__code {
	position: relative;
	font-family: var(--f-mono); font-size: .7rem; letter-spacing: .08em;
	color: var(--c-accent);                 /* 橘:暗底上仍清楚 */
}

/* ── 動效「提示游標」(業主 2026-07-16 三次過眼定案=唯一動效)──
   語意=「系統在等你選一個」。一次只有一張卡帶游標(main-home-guide.js 每 ~2s 依序輪跳)。
   ⚠️用 ::after 方塊而非 ▌ 字元:免字型依賴、對齊可控。
   ⚠️只動 opacity → 不觸發 layout/paint 重排,成本近零;無 rAF。 */
body.nx-skin--blueprint .nx-guide__code::after {
	content: ''; display: inline-block;
	width: .5em; height: 1em; margin-left: .35em; vertical-align: -.16em;
	background: var(--c-accent);
	opacity: 0;
}
body.nx-skin--blueprint .nx-guide__card.is-cursor .nx-guide__code::after {
	animation: nx-guide-blink 1.05s steps(2, start) infinite;
}
@keyframes nx-guide-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

/* ── 提示游標 降級三閘(CSS 側保險:即使 JS 判斷失手,這裡也擋得住)──
   ①prefers-reduced-motion ②巧思開關關閉(body.nx-fx-off,nx-fx.js:46 切換)
   ③無 JS = 沒有 .is-cursor → 游標本來就 opacity:0,不需額外規則
   慣例沿用 site.css:52 既有 reduced-motion 區塊寫法 */
@media (prefers-reduced-motion: reduce) {
	body.nx-skin--blueprint .nx-guide__code::after { display: none; }
}
body.nx-skin--blueprint.nx-fx-off .nx-guide__code::after { display: none; }

body.nx-skin--blueprint .nx-guide__title {
	font-size: 1.3rem; font-weight: 900; line-height: 1.5;   /* 16.96px → 20.8px/900:業主要「字更強烈」 */
	color: var(--c-card);
	text-wrap: pretty;
}
body.nx-skin--blueprint .nx-guide__sub {
	font-size: .84rem; line-height: 1.8; color: #9fb0c0;      /* 暗底上的輔文字(對比 ≥4.5:1) */
	text-wrap: pretty;
}

/* ── 四卡入口:深墨卡 + 硬位移陰影(藍圖招牌)──
   ⚠️卡片刻意「深」:白 band 上的深墨卡=最高對比,進 hero 後第一眼就抓得住(業主要「強烈吸引」);
     同時與幕2「淺灰底 + 白卡」完全相反 → 兩區絕不混淆。 */
body.nx-skin--blueprint .nx-guide--cards {
	display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem;
}
body.nx-skin--blueprint .nx-guide--cards .nx-guide__card {
	position: relative;
	flex-direction: column; align-items: flex-start; gap: .4rem;
	background: var(--c-ink); border: 2px solid var(--c-ink);
	padding: 1.35rem 1.35rem 1.25rem;
	box-shadow: var(--shadow-card-sm);
	transition: transform .16s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease;
}
/* hover:抬起 + 橘框反轉(強回饋);整卡可點 → 鍵盤 focus 同款(可及性) */
body.nx-skin--blueprint .nx-guide--cards .nx-guide__card:hover,
body.nx-skin--blueprint .nx-guide--cards .nx-guide__card:focus-visible {
	transform: translate(-4px, -4px);
	box-shadow: 10px 10px 0 rgba(255, 88, 33, .28);
	border-color: var(--c-accent);
	outline: none;
}
body.nx-skin--blueprint .nx-guide--cards .nx-guide__title { margin-top: .1rem; }
body.nx-skin--blueprint .nx-guide--cards .nx-guide__sub { margin-bottom: 1rem; }
body.nx-skin--blueprint .nx-guide--cards .nx-guide__go {
	margin-top: auto;
	display: inline-flex; align-items: center; gap: .4rem;
	font-family: var(--f-mono); font-size: .8rem; font-weight: 700; letter-spacing: .06em;
	color: var(--c-accent);
}
body.nx-skin--blueprint .nx-guide--cards .nx-guide__go i {
	font-style: normal; transition: transform .16s ease;
}
body.nx-skin--blueprint .nx-guide--cards .nx-guide__card:hover .nx-guide__go i,
body.nx-skin--blueprint .nx-guide--cards .nx-guide__card:focus-visible .nx-guide__go i {
	transform: translateX(4px);
}

/* ── 引導區 RWD:規劃稿 §二「手機 2×2」── */
@media (max-width: 991px) {
	body.nx-skin--blueprint .nx-guide--cards { grid-template-columns: repeat(2, 1fr); }
	body.nx-skin--blueprint .nx-guide__title { font-size: 1.08rem; }
	body.nx-skin--blueprint .nx-guide__head { gap: .3rem; }
	body.nx-skin--blueprint .nx-guide__lead { font-size: .88rem; }
}
@media (max-width: 560px) {
	/* ⚠️2×2 是規劃稿裁示 → 窄機仍守 2 欄(不塌成 1 欄),縮字級與內距換空間 */
	body.nx-skin--blueprint .nx-sec--guide { padding: 1.9rem 0 2rem; }
	body.nx-skin--blueprint .nx-guide--cards { gap: .8rem; }
	body.nx-skin--blueprint .nx-guide--cards .nx-guide__card { padding: 1rem .95rem .9rem; }
	body.nx-skin--blueprint .nx-guide__title { font-size: .98rem; line-height: 1.5; }
	body.nx-skin--blueprint .nx-guide__sub { font-size: .74rem; line-height: 1.65; }
	body.nx-skin--blueprint .nx-guide__code { font-size: .62rem; }
	body.nx-skin--blueprint .nx-guide--cards .nx-guide__go { font-size: .72rem; }
}

/* ════════════════════════════════════════════════════════════
   白話翻譯句 nx-sec__plain(棒2;規劃稿 260716_01 §三面6)
   幕3/幕4 的 sub 講的是方法論,對「不是業內人」的真實客戶偏抽象
   → 補一句白話翻譯。橘色左框線=「這句是講給你聽的」;幕4 暗底需反白。
   ════════════════════════════════════════════════════════════ */
body.nx-skin--blueprint .nx-sec__plain {
	margin: .9rem 0 0;
	font-size: .95rem; line-height: 1.8; font-weight: 700;
	color: var(--c-ink);
	border-left: 3px solid var(--c-accent); padding-left: .8rem;
	text-wrap: pretty;
}
body.nx-skin--blueprint .nx-sec__head--ondark .nx-sec__plain { color: #fff; }
@media (max-width: 767px) {
	body.nx-skin--blueprint .nx-sec__plain { font-size: .88rem; }
}