html{background-color:#0e0c07}

/* ═══════════════════════════════════════
   TOKENS
═══════════════════════════════════════ */
:root {
  --gold: #B8965A;
  --gold-lt: #d4b07c;
  --gold-deep: #9a7d48;
  --gold-text: #7a6234; /* 淺底小字用深金：白底對比 >4.5:1（WCAG AA），深色底仍用 --gold */
  --gold-dim: rgba(184,150,90,.14);
  --gold-glow: rgba(184,150,90,.32);
  --ink: #1a1814;
  --ink2: #4a4540;
  --ink3: #9a9490;
  --line: rgba(26,24,20,.1);
  --line2: rgba(26,24,20,.06);
  --parchment: #f7f4ef;
  --parchment-warm: #f2ede4;
  --white: #ffffff;
  --obsidian: #111009;
  --charcoal: #1e1c18;

  --display: "Cormorant Garamond", "Noto Serif TC", serif;
  --serif: "Noto Serif TC", serif;
  --sans: "Noto Sans TC", sans-serif;
  --num: "Noto Serif TC", "Playfair Display", serif;

  --max: 1080px;
  --gutter: clamp(1.5rem, 5vw, 3.5rem);
  /* 全站區塊間距統一＝首頁區塊間距（.hx-* / #transaction-flow 用的值），sm/md/lg 一律相同 */
  --section-sm: clamp(40px, 5vw, 60px);
  --section-md: clamp(40px, 5vw, 60px);
  --section-lg: clamp(40px, 5vw, 60px);

  --ease-lux: cubic-bezier(.19, 1, .22, 1);
  --ease-soft: cubic-bezier(.4, 0, .2, 1);
}

/* ═══ RESET ═══ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}
.btn-primary:active, .btn-line-card:active, .btn-outline:active, .form-cta-btn:active,
.split-cell:active, .tool-card:active, .nav-cta:active {
  transform: scale(.96);
  transition: transform .12s var(--ease-soft);
}
body {
  font-family: var(--sans);
  color: var(--ink);
  background: var(--parchment);
  -webkit-font-smoothing: antialiased;
  line-height: 1.75;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
::selection { background: rgba(184,150,90,.25); color: var(--ink); }
::-moz-selection { background: rgba(184,150,90,.25); color: var(--ink); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}
button { cursor: pointer; border: none; background: none; font-family: inherit; }

/* 點擊後保持啟用狀態（直到跳窗關閉） */
.btn-primary.is-pressed, .btn-line-card.is-pressed {
  transform: translateY(-1px) scale(.99);
  background: linear-gradient(145deg, #d4b489 0%, #b8965a 45%, #9a7d48 100%);
  box-shadow: 0 4px 18px rgba(184,150,90,.45), inset 0 2px 6px rgba(0,0,0,.18);
}
.btn-outline.is-pressed { color: var(--obsidian); border-color: var(--gold); }
.btn-outline.is-pressed::before { transform: translateY(0); }
.nav-cta.is-pressed { color: #1a1814; }
.nav-cta.is-pressed::before { transform: translateX(0); }


/* ═══ SPA ═══ */
.page { display: none; overflow: hidden; }
.page.active { display: block; overflow: visible; }
.page.active { display: block; animation: reveal .45s cubic-bezier(.22,1,.36,1) both; }
@keyframes reveal {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

/* ═══════════════════════════════════════
   NAV
═══════════════════════════════════════ */
#nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 900;
  height: 72px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--gutter);
  background: linear-gradient(180deg, rgba(252,250,246,.97) 0%, rgba(243,237,228,.95) 100%);
  backdrop-filter: blur(24px) saturate(1.5);
  border-bottom: 1px solid rgba(184,150,90,.2);
  box-shadow:
    0 1px 0 rgba(255,255,255,.8) inset,
    0 -1px 0 rgba(184,150,90,.08) inset,
    0 8px 32px rgba(120,100,70,.13),
    0 2px 8px rgba(120,100,70,.06);
  transition: height .4s var(--ease-lux), background .5s var(--ease-lux), border-color .5s, box-shadow .5s;
}
#nav::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold) 30%, var(--gold-lt) 50%, var(--gold) 70%, transparent);
  opacity: .55;
}
#nav.scrolled {
  height: 60px;
  background: rgba(247,244,239,.97);
  border-bottom-color: rgba(184,150,90,.3);
  box-shadow: 0 8px 36px rgba(120,100,70,.12);
}

.nav-logo {
  display: flex; flex-direction: column; gap: 2px;
}
.nav-logo-main {
  font-family: var(--serif);
  font-size: .82rem; font-weight: 500;
  letter-spacing: .08em; color: var(--ink);
  white-space: nowrap;
  transition: color .5s var(--ease-lux);
}
.nav-logo-sub {
  font-size: .96rem; font-weight: 400;
  letter-spacing: .15em; color: var(--gold);
  text-transform: uppercase;
}

.nav-links {
  display: flex; gap: 2rem; list-style: none;
  position: absolute; left: 50%; transform: translateX(-50%);
}
.nav-links a {
  font-size: .9rem; font-weight: 400;
  letter-spacing: .08em; color: var(--ink2);
  text-transform: uppercase;
  padding-bottom: 4px;
  position: relative;
  transition: color .5s var(--ease-lux);
  transition: color .3s var(--ease-soft);
  cursor: pointer; white-space: nowrap;
}
.nav-links a::after {
  content: ""; position: absolute; left: 50%; bottom: 0;
  width: 0; height: 1px; background: var(--gold);
  transform: translateX(-50%);
  transition: width .35s var(--ease-lux);
}
html:not(.touch) .nav-links a:hover, .nav-links a.active { color: var(--gold); }
html:not(.touch) .nav-links a:hover::after, .nav-links a.active::after { width: 100%; }

.nav-right { display: flex; align-items: center; gap: 1rem; }
.nav-cta {
  font-size: .92rem; font-weight: 500; letter-spacing: .1em;
  color: var(--gold); border: 1px solid var(--gold);
  padding: .42rem 1.3rem; text-transform: uppercase;
  position: relative; overflow: hidden;
  transition: color .4s var(--ease-lux), box-shadow .4s var(--ease-lux), transform .4s var(--ease-lux);
  white-space: nowrap;
  z-index: 1;
}
.nav-cta::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(145deg, #cdaf85, #b8965a);
  transform: translateX(-101%);
  transition: transform .45s var(--ease-lux);
}
html:not(.touch) .nav-cta:hover {
  color: #1a1814;
  box-shadow: 0 6px 20px rgba(184,150,90,.32);
}
html:not(.touch) .nav-cta:hover::before { transform: translateX(0); }
.nav-cta:active { transform: scale(.96); transition: transform .12s var(--ease-soft); }

/* hamburger */
.hamburger {
  display: none; flex-direction: column; justify-content: center; gap: 5px;
  /* 觸控目標至少 44×44（線條仍是 32px 寬，靠 padding 撐出可點範圍，外觀不變）；
     負 margin 抵銷多出來的內距，避免把導覽列撐高 */
  width: 44px; height: 44px; padding: 0 6px; margin: -11px -6px;
  align-items: stretch; box-sizing: border-box; flex-shrink: 0;
  background: none; border: 0; cursor: pointer;
}
.hamburger span {
  display: block; height: 1px; background: var(--ink);
  transition: transform .3s, opacity .2s, width .2s, background .5s;
}
.hamburger.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; width: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* mobile drawer */
.drawer {
  display: none;
  position: fixed; top: 72px; right: 0; left: auto;
  width: 33.333vw; min-width: 240px; max-width: 360px;
  z-index: 850;
  background: rgba(247,244,239,.98);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--line);
  border-left: 1px solid var(--line);
  opacity: 0;
  transform: scaleY(0);
  transform-origin: top center;
  pointer-events: none;
  transition: opacity .2s ease, transform .55s cubic-bezier(0.16, 1, 0.3, 1);
}
.drawer.open {
  opacity: 1;
  transform: scaleY(1);
  pointer-events: auto;
}
.drawer ul { list-style: none; padding: .5rem 0 .8rem; }
.drawer ul li a {
  display: block; padding: .75rem var(--gutter);
  font-size: .9rem; font-weight: 300; letter-spacing: .1em;
  color: var(--ink2); text-transform: uppercase;
  border-left: 2px solid transparent;
  transition: color .2s, border-color .2s, background .2s;
  cursor: pointer;
  opacity: 0; transform: translateY(-6px);
  transition: color .2s, border-color .2s, background .2s, opacity .3s, transform .3s;
}
.drawer.open ul li a {
  opacity: 1; transform: translateY(0);
}
.drawer.open ul li:nth-child(1) a { transition-delay: .12s; }
.drawer.open ul li:nth-child(2) a { transition-delay: .18s; }
.drawer.open ul li:nth-child(3) a { transition-delay: .24s; }
.drawer.open ul li:nth-child(4) a { transition-delay: .30s; }
.drawer.open ul li:nth-child(5) a { transition-delay: .36s; }
.drawer.open ul li:nth-child(6) a { transition-delay: .42s; }
.drawer.open ul li:nth-child(7) a { transition-delay: .48s; }
.drawer.open ul li:nth-child(8) a { transition-delay: .54s; }
html:not(.touch) .drawer ul li a:hover, .drawer ul li a.active {
  color: var(--gold); border-left-color: var(--gold);
  background: var(--gold-dim);
}
.drawer-footer {
  padding: .8rem var(--gutter) .9rem;
  border-top: 1px solid var(--line2);
}
.drawer-footer a {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  background: #06C755; color: #fff;
  font-size: .92rem; letter-spacing: .08em;
  padding: .68rem; border-radius: 2px;
}

/* 選單增至 8 項後，1020px 以下改用抽屜選單（避免絕對置中的選單疊到 logo/CTA） */
@media (max-width: 1020px) {
  .nav-links { display: none; }
  .hamburger { display: flex; }
  .drawer { display: block; }
}

/* ═══════════════════════════════════════
   LAYOUT
═══════════════════════════════════════ */
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.sec-sm  { padding: var(--section-sm)  0; }
.sec-md  { padding: var(--section-md)  0; }
.sec-lg  { padding: var(--section-lg)  0; }

/* ═══ TYPOGRAPHY SYSTEM ═══ */
.eyebrow {
  font-size: .9rem; font-weight: 400;
  letter-spacing: .35em; color: var(--gold-text);
  text-transform: uppercase; display: block;
  margin-bottom: .9rem;
}
/* 深色底區塊維持亮金（深金在深底上看不清） */
.cta-band .eyebrow, section[style*="charcoal"] .eyebrow, section[style*="obsidian"] .eyebrow { color: var(--gold); }
.display-xl {
  font-family: var(--display);
  font-size: clamp(2.8rem, 6vw, 5.5rem);
  font-weight: 300; line-height: 1.08; letter-spacing: .02em;
  letter-spacing: -.01em; color: var(--ink);
}
.display-lg {
  font-family: var(--display);
  font-size: clamp(2.2rem, 4.5vw, 3.8rem);
  font-weight: 300; line-height: 1.12;
  color: var(--ink);
}
.display-md {
  font-family: var(--display);
  font-size: clamp(1.8rem, 3.2vw, 2.6rem);
  font-weight: 300; line-height: 1.25; letter-spacing: .02em;
  color: var(--ink);
}
.display-sm {
  font-family: var(--display);
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  font-weight: 400; line-height: 1.35; letter-spacing: .02em;
  color: var(--ink);
}
.gold { color: var(--gold); }
.italic { font-style: italic; }
.body-lg { font-size: 1rem; font-weight: 300; color: var(--ink2); line-height: 1.85; max-width: 40em; }
.body-md { font-size: 1rem; font-weight: 300; color: var(--ink2); line-height: 1.85; }
.body-sm { font-size: .88rem; font-weight: 300; color: var(--ink3); line-height: 1.8; }
.rule  { width: 40px; height: 2px; background: linear-gradient(90deg, var(--gold), transparent); margin: 1.4rem 0; }

/* ═══════════════════════════════════════
   HERO
═══════════════════════════════════════ */
/* ── HERO: 左照片 右文字 兩欄並排 ── */
#hero {
  margin-top: 72px;
  display: grid;
  grid-template-columns: 4fr 6fr 1.8fr;
  background: var(--obsidian);
  min-height: calc(100svh - 72px);
  overflow: hidden;
}
.hero-portrait {
  position: relative;
  overflow: hidden;
  background: var(--charcoal);
}
.hero-portrait::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 60% 65% at 62% 42%, transparent 0%, transparent 45%, rgba(17,16,9,.45) 100%);
  pointer-events: none; z-index: 1;
}
.hero-portrait img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: 68% 28%;
  display: block; opacity: .9;
  animation: kenburns 20s ease-out infinite alternate;
  transition: opacity .6s var(--ease-lux);
}
html:not(.touch) .hero-portrait:hover img { opacity: 1; }
@keyframes kenburns {
  from { transform: scale(1); }
  to   { transform: scale(1.06); }
}
.hero-portrait::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(to left,  rgba(17,16,9,.75)  0%, rgba(17,16,9,.3) 28%, transparent 48%),
    linear-gradient(to top,   rgba(17,16,9,.6)   0%, rgba(17,16,9,.3) 15%, transparent 38%),
    linear-gradient(to right, rgba(17,16,9,.6)   0%, transparent 25%),
    linear-gradient(to bottom,rgba(17,16,9,.5)   0%, transparent 20%);
  pointer-events: none;
}
.hero-nums {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  gap: 0;
  padding: 3rem 1.8rem;
  border-left: 1px solid rgba(184,150,90,.22);
  background: linear-gradient(180deg,
    rgba(184,150,90,.06) 0%,
    rgba(0,0,0,.18) 50%,
    rgba(184,150,90,.06) 100%);
  position: relative;
}
.hero-num-item {
  text-align: center;
  padding: 0;
  width: 100%;
  position: relative;
}
.hero-num-item + .hero-num-item::before {
  display: none;
}
.hero-num-item .val {
  font-family: 'Cormorant Garamond', serif;
  font-size: 2.6rem; font-weight: 300;
  font-style: italic;
  color: #e8c97a;
  line-height: 1;
  letter-spacing: .06em;
  text-shadow: 0 0 28px rgba(184,150,90,.35);
}
.hero-num-item .val--zh {
  font-family: 'Noto Serif TC', serif;
  font-size: 1.7rem; font-weight: 300;
  font-style: italic;
  letter-spacing: .08em;
  min-height: 2.6rem;
  display: flex; align-items: center; justify-content: center;
}
.hero-num-item .lbl {
  font-size: .65rem; letter-spacing: .2em;
  color: rgba(255,255,255,.65); margin-top: .45rem;
  text-transform: uppercase;
  font-weight: 300;
}
/* ─ hero content: 三段式佈局（頂・中・底） ─ */
.hero-content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;   /* 頂・中・底三錨點 */
  padding: clamp(2.5rem,5vh,4rem) clamp(2rem,4vw,3.5rem)
           clamp(2rem,4vh,3.5rem)  clamp(3rem,7vw,7rem);
  background: linear-gradient(to right, rgba(17,16,9,.6) 0%, var(--obsidian) 38%);
  position: relative; z-index: 1;
  min-height: calc(100svh - 72px);  /* 撐滿視窗高度 */
}

/* ── 頂部：品牌徽章 ── */
.hero-badge {
  display: inline-flex; align-items: center; gap: .7rem;
  margin-bottom: .9rem; width: fit-content;
}
.hero-badge-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--gold); flex-shrink: 0;
  position: relative;
}
.hero-badge-dot::after {
  content: ""; position: absolute; inset: -4px;
  border-radius: 50%; border: 1px solid var(--gold);
  animation: dotPulse 2.4s var(--ease-soft) infinite;
}
@keyframes dotPulse {
  0%   { transform: scale(.6); opacity: .8; }
  70%  { transform: scale(1.8); opacity: 0; }
  100% { opacity: 0; }
}
.hero-badge-text {
  font-size: .9rem; letter-spacing: .18em;
  color: rgba(210,185,145,.85);
  text-transform: uppercase; font-weight: 300;
}

/* ── 中段：主視覺文字（撐開整個中間空間） ── */
.hero-main {
  flex: 1;
  display: flex; flex-direction: column;
  justify-content: center;
  padding: clamp(2rem,5vh,4rem) 0;
}
.hero-name-row {
  display: flex; align-items: baseline; gap: 1.2rem;
  margin-bottom: clamp(2rem,4vh,3.5rem);
}
/* h1 = 姓名＋別名＋關鍵字副行（關鍵字必須在 h1 內，但視覺維持原本的姓名主體） */
.hero-h1 {
  margin: 0; display: flex; align-items: baseline;
  column-gap: .8rem; row-gap: 0; flex-wrap: wrap; font-weight: 400;
}
.hero-alias {
  font-size: 1.4rem; color: rgba(255,255,255,.7);
  letter-spacing: .1em; font-weight: 300; font-family: "Noto Serif TC", serif;
}
.hero-h1-kw {
  flex-basis: 100%; font-family: var(--sans);
  font-size: clamp(.84rem, 1.25vw, .98rem); font-weight: 300;
  letter-spacing: .14em; color: rgba(255,255,255,.6);
}
.hero-name {
  display: inline-block;
  font-family: "Noto Serif TC", serif;
  font-size: clamp(2rem, 3.2vw, 2.9rem);
  font-weight: 400; font-style: normal;
  color: var(--white);
  letter-spacing: .25em; line-height: 1.15;
  margin-bottom: .7rem;
  text-shadow: 0 2px 20px rgba(184,150,90,.2);
  position: relative;
}
.hero-title-en {
  font-size: .62rem; font-weight: 300;
  letter-spacing: .3em; color: rgba(255,255,255,.38);
  text-transform: uppercase;
  margin-bottom: clamp(2rem,4vh,3.5rem);
  display: flex; align-items: center; gap: .7rem;
  white-space: nowrap;
}
.hero-title-en::before {
  content: ""; display: block;
  width: 20px; height: 1px; background: var(--gold); opacity: .4; flex-shrink: 0;
}
.hero-tagline {
  font-family: var(--display);
  font-size: clamp(1rem, 1.8vw, 1.45rem);
  font-weight: 300; font-style: italic;
  color: rgba(255,255,255,.62);
  line-height: 1.75;
  border-left: 2px solid;
  border-image: linear-gradient(to bottom, var(--gold), transparent) 1;
  padding-left: 1.2rem;
  max-width: 420px;
}

/* ── 底部：聯絡 + 按鈕群組 ── */
.hero-footer {
  display: flex;
  flex-direction: column;
  gap: clamp(1rem,2.2vh,1.8rem);
}
/* 聯絡資訊已整合進按鈕卡 */
.hero-contacts { display: none; }   /* 隱藏舊的文字版，改由卡片按鈕呈現 */

/* 新：按鈕卡片組 — 標籤在上、按鈕在下，兩欄等寬 */
.hero-actions {
  display: flex;
  flex-direction: row;
  gap: 1.8rem;
  align-items: flex-end;
  width: 100%;
}
.btn-card {
  display: flex;
  flex-direction: column;
  gap: .32rem;
  flex: 1;
}
.btn-card-label {
  font-size: .9rem; letter-spacing: .1em;
  color: rgba(255,255,255,.6); font-weight: 300;
  padding-left: .1rem;
}
/* 電話按鈕 — 精緻金色 */
.btn-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  background: linear-gradient(145deg, #e6cda5 0%, #cdaf85 45%, #b8965a 100%);
  border: none;
  color: #1a1814;
  font-family: var(--serif);
  font-size: .92rem; font-weight: 500; letter-spacing: .08em;
  padding: 1rem 1.4rem;
  min-width: 160px;
  width: 100%;
  box-sizing: border-box;
  position: relative; overflow: hidden;
  box-shadow: 0 2px 12px rgba(184,150,90,.25), inset 0 1px 0 rgba(255,255,255,.4);
  transition: transform .45s var(--ease-lux), box-shadow .45s var(--ease-lux);
  cursor: pointer; text-decoration: none; white-space: nowrap;
}
/* 掃光 shimmer 已移除：精品品牌以克制的抬升與陰影表達互動，不用廉價光效 */
html:not(.touch) .btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(184,150,90,.26), inset 0 1px 0 rgba(255,255,255,.45);
}
.btn-primary:active { transform: translateY(-1px) scale(.99); transition: transform .12s var(--ease-soft); }
/* LINE 按鈕 — 精緻金色 */
.btn-line-card {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  background: linear-gradient(145deg, #e6cda5 0%, #cdaf85 45%, #b8965a 100%);
  border: none;
  color: #1a1814;
  font-family: var(--serif);
  font-size: .92rem; font-weight: 500; letter-spacing: .08em;
  padding: 1rem 1.4rem;
  min-width: 160px;
  width: 100%;
  box-sizing: border-box;
  position: relative; overflow: hidden;
  box-shadow: 0 2px 12px rgba(184,150,90,.25), inset 0 1px 0 rgba(255,255,255,.4);
  transition: transform .45s var(--ease-lux), box-shadow .45s var(--ease-lux);
  cursor: pointer; text-decoration: none; white-space: nowrap;
}
html:not(.touch) .btn-line-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(184,150,90,.26), inset 0 1px 0 rgba(255,255,255,.45);
}
.btn-line-card:active { transform: translateY(-1px) scale(.99); transition: transform .12s var(--ease-soft); }
/* 其他頁面沿用的舊 btn-outline */
.btn-outline {
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255,255,255,.3); color: rgba(255,255,255,.85);
  font-size: .9rem; letter-spacing: .08em;
  padding: .88rem 1.8rem; border-radius: 1px;
  position: relative; overflow: hidden;
  transition: color .4s var(--ease-lux), border-color .4s var(--ease-lux);
  text-transform: uppercase; flex-shrink: 0; z-index: 1; white-space: nowrap;
}
.btn-outline::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--gold);
  transform: translateY(101%);
  transition: transform .45s var(--ease-lux);
}
html:not(.touch) .btn-outline:hover { border-color: var(--gold); color: var(--obsidian); }
html:not(.touch) .btn-outline:hover::before { transform: translateY(0); }
.hero-company {
  display: flex; align-items: center; gap: .8rem;
  padding-top: clamp(.8rem,2vh,1.4rem);
  border-top: 1px solid rgba(255,255,255,.06);
}
.company-icon {
  width: 38px; height: 38px; flex-shrink: 0;
  border: 1px solid rgba(184,150,90,.3);
  display: flex; align-items: center; justify-content: center;
}
.company-icon svg { width: 18px; height: 18px; fill: var(--gold); }
.company-name {
  font-size: .9rem; font-weight: 300; letter-spacing: .05em;
  color: rgba(255,255,255,.5); line-height: 1.75;
}

/* Tablet portrait: keep the portrait's complete composition instead of
   squeezing it into the narrow desktop column. */
@media (min-width: 761px) and (max-width: 1180px) and (orientation: portrait) {
  #hero {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .hero-portrait {
    width: 100%;
    height: auto;
    aspect-ratio: 1300 / 1146;
  }
  .hero-portrait img {
    object-fit: cover;
    object-position: center center;
    animation: none;
  }
  .hero-portrait::after {
    background: linear-gradient(to bottom, transparent 84%, rgba(17,16,9,.5) 100%);
  }
  .hero-content {
    min-height: auto;
    padding: clamp(2.75rem, 6vw, 4.5rem) clamp(3rem, 8vw, 6rem);
    background: var(--obsidian);
    justify-content: flex-start;
    gap: clamp(2.25rem, 5vw, 3.75rem);
  }
  .hero-main { padding: 0; }
  .hero-nums {
    flex-direction: row;
    justify-content: space-evenly;
    gap: 1.5rem;
    padding: 2rem clamp(3rem, 8vw, 6rem);
    border-left: none;
    border-top: 1px solid rgba(184,150,90,.18);
  }
  .hero-num-item { flex: 1 1 0; }
}

@media (max-width: 760px) {
  #hero { grid-template-columns: 1fr; min-height: auto; }
  .hero-portrait { height: 100vw; min-height: 400px; max-height: 520px; }
  .hero-portrait img { object-position: center 22%; }
  .hero-portrait::after {
    background: linear-gradient(to bottom, transparent 88%, rgba(17,16,9,.4) 100%);
  }
  .hero-content {
    background: var(--obsidian);
    min-height: auto;
    padding: 2rem var(--gutter) 3rem;
    justify-content: flex-start; gap: 1.8rem;
  }
  .hero-main { padding: 0; }
  .hero-name-row { flex-wrap: wrap; gap: .5rem; }
  .hero-title-en { white-space: normal; font-size: .7rem; }
  .hero-contacts { grid-template-columns: 1fr 1fr; gap: .5rem 1.5rem; }
  .hero-actions { flex-wrap: nowrap; gap: .7rem; }
  .btn-card { min-width: 0; }
  .btn-card .btn-primary, .btn-card .btn-line-card {
    min-width: 0; padding: .8rem .6rem; font-size: .82rem;
    white-space: nowrap; gap: .35rem;
  }
  .btn-card .btn-primary svg, .btn-card .btn-line-card svg {
    width: 13px; height: 13px;
  }
  .hero-nums {
    flex-direction: row;
    justify-content: center;
    gap: 2rem;
    padding: 1.5rem var(--gutter);
    border-left: none;
    border-top: 1px solid rgba(184,150,90,.18);
  }
}


/* ═══ 超寬螢幕優化 (≥1600px) ═══ */
@media (min-width: 1600px) {
  #hero { grid-template-columns: 4fr 5.5fr 2fr; }
  .hero-content { padding-left: clamp(7rem, 9vw, 10rem); }
  .hero-num-item .val { font-size: 2.9rem; }
}

/* ═══ TICKER ═══ */
.ticker {
  overflow: hidden; padding: .6rem 0;
  background: var(--charcoal);
  border-top: 1px solid rgba(184,150,90,.1);
  border-bottom: 1px solid rgba(184,150,90,.1);
}
.ticker-track {
  display: flex; white-space: nowrap;
  animation: ticker-scroll 28s linear infinite;
}
html:not(.touch) .ticker-track:hover { animation-play-state: paused; }
.t-word { font-size: .9rem; letter-spacing: .2em; color: rgba(255,255,255,.65); text-transform: uppercase; padding: 0 2rem; flex-shrink: 0; }
.t-sep  { color: var(--gold); opacity: .7; font-size: .77rem; flex-shrink: 0; }
@keyframes ticker-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ═══ SERVICE SPLIT (home) ═══ */
.split { background: var(--white); border-bottom: 1px solid var(--line2); }
.split-grid { display: grid; grid-template-columns: 1fr 1fr; }
.split-cell {
  padding: clamp(2rem, 4vw, 3.2rem) clamp(2rem, 4vw, 3.5rem);
  border-right: 1px solid var(--line2);
  cursor: pointer; position: relative; overflow: hidden;
  transition: background .5s var(--ease-lux);
}
.split-cell:last-child { border-right: none; }
.split-cell::before {
  content: ""; position: absolute; bottom: 0; left: 0; right: 0;
  height: 2px; background: linear-gradient(90deg, var(--gold), var(--gold-lt));
  transform: scaleX(0); transform-origin: left;
  transition: transform .5s var(--ease-lux);
}
.split-cell::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 120%, rgba(184,150,90,.08), transparent 60%);
  opacity: 0; transition: opacity .5s var(--ease-lux);
  pointer-events: none;
}
html:not(.touch) .split-cell:hover { background: var(--parchment); }
html:not(.touch) .split-cell:hover::before { transform: scaleX(1); }
html:not(.touch) .split-cell:hover::after { opacity: 1; }
.split-cell > * { position: relative; z-index: 1; }
.split-index {
  font-family: var(--display);
  font-size: 5rem; font-weight: 300;
  color: var(--gold-dim); line-height: 1;
  margin-bottom: .5rem; user-select: none;
}
.split-cell h3 {
  font-family: var(--display);
  font-size: clamp(1.4rem, 2.5vw, 2rem);
  font-weight: 300; color: var(--ink);
  margin-bottom: 1.2rem;
  transition: transform .5s var(--ease-lux);
}
html:not(.touch) .split-cell:hover h3 { transform: translateX(6px); }
.split-list { list-style: none; margin-bottom: 1.8rem; }
.split-list li {
  font-size: .97rem; font-weight: 300; color: var(--ink2);
  padding: .5rem 0; border-bottom: 1px solid var(--line2);
  display: flex; align-items: center; gap: .6rem;
}
.split-list li::before {
  content: ""; width: 3px; height: 3px; border-radius: 50%;
  background: var(--gold); flex-shrink: 0;
}
.split-arrow {
  font-size: .9rem; letter-spacing: .14em; color: var(--gold);
  text-transform: uppercase; display: inline-flex;
  align-items: center; gap: .4rem;
}
.split-arrow span { transition: transform .4s var(--ease-lux); }
html:not(.touch) .split-cell:hover .split-arrow span { transform: translateX(6px); }
@media (max-width: 600px) {
  .split-grid { grid-template-columns: 1fr; }
  .split-cell { border-right: none; border-bottom: 1px solid var(--line2); }
}

/* ═══ ABOUT (home) ═══ */
.about-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(3rem, 6vw, 6rem); align-items: start;
}
@media (max-width: 700px) { .about-grid { grid-template-columns: 1fr; } }
.about-belief {
  margin: 1.6rem 0 0; padding: 1rem 0;
  font-family: var(--serif); font-style: normal; font-weight: 300;
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  line-height: 1.85; color: var(--ink);
}
.about-creds {
  display: flex; flex-wrap: wrap; gap: 2.5rem;
  margin-top: 1.8rem;
}
.about-cred { display: flex; flex-direction: column; gap: .25rem; }
.about-cred-label {
  font-size: .68rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--gold);
}
.about-cred-val {
  font-family: var(--serif); font-size: .95rem; color: var(--ink);
}

.about-tags { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 1.5rem; }
.tag {
  font-size: .9rem; letter-spacing: .07em; color: var(--ink2);
  border: 1px solid var(--line); padding: .18rem .7rem;
  border-radius: 100px; cursor: default;
  transition: border-color .2s, color .2s;
}
html:not(.touch) .tag:hover { border-color: var(--gold); color: var(--gold); }

.services-list { margin-top: 2rem; }
.svc-item {
  display: grid; grid-template-columns: 2.2rem 1fr;
  gap: .8rem; padding: 1.1rem .8rem;
  border-bottom: 1px solid var(--line2); align-items: start;
  margin: 0 -.8rem;
  transition: background .4s var(--ease-lux);
}
.svc-item:first-child { border-top: 1px solid var(--line2); }
html:not(.touch) .svc-item:hover { background: var(--gold-dim); }
.svc-n {
  font-family: var(--display); font-style: italic; font-size: 1.7rem; font-weight: 400;
  color: rgba(184,150,90,.42); padding-top: .1rem; line-height: 1;
  transition: color .4s var(--ease-lux);
}
html:not(.touch) .svc-item:hover .svc-n { color: var(--gold-deep); }
.svc-t {
  font-family: var(--serif); font-size: .9rem; font-weight: 500;
  color: var(--ink); margin-bottom: .2rem;
}
.svc-d { font-size: .97rem; font-weight: 300; color: var(--ink2); line-height: 1.75; }

/* ═══ STATS BAR ═══ */
.stats-bar {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  background: var(--white);
}
.stat-cell {
  padding: 2.2rem 1.5rem; text-align: center;
  border-right: 1px solid var(--line);
}
.stat-cell:last-child { border-right: none; }
.stat-val {
  font-family: var(--display); font-size: 2.8rem;
  font-weight: 300; color: var(--gold); line-height: 1;
}
.stat-lbl { font-size: .98rem; letter-spacing: .18em; color: var(--ink3); margin-top: .35rem; text-transform: uppercase; }

/* ═══ VOICE (testimonials) ═══ */
.voice-top {
  display: grid; grid-template-columns: 1.2fr 1fr;
  gap: clamp(3rem, 6vw, 6rem); align-items: center;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
@media (max-width: 700px) { .voice-top { grid-template-columns: 1fr; } }
.big-quote {
  font-family: var(--display);
  font-size: clamp(1.4rem, 3vw, 2.4rem);
  font-weight: 300; font-style: italic;
  line-height: 1.5; color: var(--ink);
  padding-left: 1.4rem;
  border-left: 2px solid var(--gold);
}
.big-quote em { color: var(--gold); font-style: normal; font-weight: 400; }
.quote-attr {
  font-size: .92rem; letter-spacing: .12em; color: var(--ink3);
  margin-top: .8rem; padding-left: 1.4rem;
}
.tcard-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); }
@media (max-width: 700px) { .tcard-row { grid-template-columns: 1fr; } }
.tcard {
  background: var(--white); padding: 1.8rem 1.6rem;
  position: relative; transition: background .2s;
}
html:not(.touch) .tcard:hover { background: rgba(184,150,90,.04); }
.tcard-q {
  font-family: var(--display); font-size: 2rem; font-weight: 300;
  color: var(--gold); opacity: .15; line-height: 1;
  margin-bottom: .4rem; user-select: none;
}
.tcard-text { font-size: .97rem; font-weight: 300; color: var(--ink2); line-height: 1.75; margin-bottom: .9rem; }
.tcard-by { font-size: .98rem; letter-spacing: .12em; color: var(--gold-text); }

/* ═══ DARK FEATURES (seller advantages) ═══ */
/* 核心優勢 — 統一系統 Shape B 編號格（與銷售流程的整列目錄刻意區隔：格狀 vs 列狀）*/
.adv-grid { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: clamp(1.6rem, 3vw, 3rem); row-gap: clamp(1.8rem, 3vw, 2.4rem); }
@media (max-width: 760px) { .adv-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 460px) { .adv-grid { grid-template-columns: 1fr; } }
.adv-item { border-top: 1px solid var(--line); padding-top: 1.4rem; }
.adv-num { display: block; font-family: var(--display); font-style: italic; font-weight: 400; font-size: 2rem; line-height: 1; color: rgba(184,150,90,.42); margin-bottom: .75rem; transition: color .45s var(--ease-lux); }
html:not(.touch) .adv-item:hover .adv-num { color: var(--gold-deep); }
.adv-item h3 { font-family: var(--serif); font-size: 1.08rem; font-weight: 500; letter-spacing: .03em; color: var(--ink); margin-bottom: .45rem; }
.adv-item p { font-size: .93rem; font-weight: 300; line-height: 1.85; color: var(--ink2); }

/* ═══ PROCESS LEDGER — 型錄目錄式流程（整列：斜體大序號｜標題｜說明，髮絲線分隔）═══ */
.steps-ledger { border-top: 1px solid var(--line); }
.sled-row {
  display: grid; grid-template-columns: clamp(64px, 7vw, 100px) minmax(140px, 220px) 1fr;
  align-items: baseline; gap: clamp(1rem, 2.5vw, 2.5rem);
  padding: clamp(1.4rem, 2.8vw, 2.1rem) .2rem;
  border-bottom: 1px solid var(--line);
  transition: background .45s var(--ease-lux), padding-left .45s var(--ease-lux);
}
html:not(.touch) .sled-row:hover { background: var(--gold-dim); padding-left: .8rem; }
.sled-num {
  font-family: var(--display); font-style: italic; font-weight: 400;
  font-size: clamp(2rem, 3.2vw, 3rem); line-height: 1;
  color: rgba(184,150,90,.4);
  transition: color .45s var(--ease-lux);
}
html:not(.touch) .sled-row:hover .sled-num { color: var(--gold-deep); }
.sled-title { font-family: var(--serif); font-size: clamp(1.05rem, 1.6vw, 1.3rem); font-weight: 500; color: var(--ink); margin: 0; letter-spacing: .04em; }
.sled-desc { font-size: .95rem; font-weight: 300; color: var(--ink2); line-height: 1.85; margin: 0; max-width: 34em; }
@media (max-width: 640px) {
  .sled-row { grid-template-columns: 56px 1fr; align-items: start; row-gap: .3rem; padding: 1.2rem .1rem; }
  .sled-num { grid-row: span 2; font-size: 1.9rem; }
  .sled-title, .sled-desc { grid-column: 2; }
  .sled-desc { font-size: .9rem; }
  html:not(.touch) .sled-row:hover { padding-left: .1rem; }
}

/* ═══ 買方安心圖示列 ═══ */
/* 買方安心 — 統一系統 Shape B（圖標版）：無圓框、髮絲頂線、圖標置於標題上方 */
.assure-list {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 2rem clamp(2rem, 5vw, 4rem);
  max-width: 880px; margin: 0 auto;
}
@media (max-width: 640px) { .assure-list { grid-template-columns: 1fr; gap: 1.6rem; } }
.assure-item { border-top: 1px solid var(--line); padding-top: 1.5rem; }
.assure-icon { margin-bottom: .9rem; }
.assure-icon svg { width: 24px; height: 24px; stroke: var(--gold); stroke-width: 1.3; transition: stroke .45s var(--ease-lux); }
html:not(.touch) .assure-item:hover .assure-icon svg { stroke: var(--gold-deep); }
.assure-item h4 {
  font-family: var(--serif); font-size: 1.02rem; font-weight: 500;
  color: var(--obsidian); margin-bottom: .35rem;
}
.assure-item p {
  font-size: .92rem; font-weight: 300; line-height: 1.8; color: var(--ink2);
}

/* ═══ 成交實績數字帶 ═══ */
.br-mobile { display: none; }
@media (max-width: 600px) { .br-mobile { display: inline; } }
.stats-band {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px; background: rgba(184,150,90,.15);
}
@media (max-width: 600px) { .stats-band { grid-template-columns: 1fr 1fr; gap: 1px; } }
.stats-band-item {
  background: var(--obsidian);
  text-align: center; padding: 1.5rem 1rem;
}
.stats-band-val {
  font-family: var(--display); font-size: clamp(2rem, 4vw, 2.8rem);
  font-weight: 300; color: var(--gold-lt); line-height: 1;
}
.stats-band-val span { font-size: .5em; margin-left: .1em; }
.stats-band-lbl {
  font-size: .72rem; letter-spacing: .18em;
  color: rgba(255,255,255,.5); margin-top: .6rem;
}

/* ═══ 社群連結 ═══ */
.listings-cta-glow {
  position: absolute; top: 50%; left: 50%;
  width: 70%; height: 200%;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse at center, var(--gold-glow), transparent 60%);
  opacity: .4; pointer-events: none;
}
.social-row {
  display: flex; gap: .8rem; margin-top: 1.6rem;
}
.social-link {
  width: 44px; height: 44px;
  border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  color: var(--ink2);
  transition: border-color .4s var(--ease-lux), color .4s var(--ease-lux), background .4s var(--ease-lux), transform .4s var(--ease-lux);
}
.social-link svg { width: 20px; height: 20px; }
.social-text {
  font-family: var(--serif); font-size: .85rem; font-weight: 500;
  letter-spacing: .04em;
}
html:not(.touch) .social-link:hover {
  border-color: var(--gold); color: var(--gold);
  background: var(--gold-dim);
  transform: translateY(-3px);
}

/* ═══ 賣方承諾 ═══ */
/* 我的承諾 — 統一系統 Shape B 編號格：無盒子、髮絲頂線、斜體序號 */
.promise-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  column-gap: clamp(1.6rem, 3vw, 2.8rem); row-gap: 2rem;
}
@media (max-width: 760px) { .promise-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 460px) { .promise-grid { grid-template-columns: 1fr; } }
.promise-item { border-top: 1px solid var(--line); padding-top: 1.5rem; }
.promise-num {
  font-family: var(--display); font-style: italic; font-size: 2rem; font-weight: 400;
  color: rgba(184,150,90,.42); display: block; margin-bottom: .8rem; line-height: 1;
  transition: color .45s var(--ease-lux);
}
html:not(.touch) .promise-item:hover .promise-num { color: var(--gold-deep); }
.promise-item h4 {
  font-family: var(--serif); font-size: 1.08rem; font-weight: 500; letter-spacing: .03em;
  color: var(--ink); margin-bottom: .45rem;
}
.promise-item p {
  font-size: .93rem; font-weight: 300; line-height: 1.85; color: var(--ink2);
}

/* ═══ WHY CHOOSE 差異化 ═══ */
.why-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
  margin-top: clamp(2.5rem, 5vw, 4rem);
}
@media (max-width: 700px) { .why-grid { grid-template-columns: 1fr; gap: 1.8rem; } }
.why-item { position: relative; }
.why-icon {
  width: 44px; height: 44px;
  border: 1px solid rgba(184,150,90,.35);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 1rem;
}
.why-icon svg { width: 20px; height: 20px; stroke: var(--gold); }
.why-item h4 {
  font-family: var(--serif); font-size: 1.05rem; font-weight: 500;
  color: var(--white); margin-bottom: .5rem; letter-spacing: .04em;
}
.why-item p {
  font-size: .92rem; font-weight: 300; line-height: 1.85;
  color: rgba(255,255,255,.5);
}

/* ═══ FAQ ═══ */
.faq-grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(2.5rem, 5vw, 4.5rem); }
@media (max-width: 720px) { .faq-grid { grid-template-columns: 1fr; } }
.faq-item { border-bottom: 1px solid var(--line2); padding: 1.3rem 0; break-inside: avoid; }
.faq-q { font-family: var(--serif); font-size: 1rem; font-weight: 500; color: var(--ink); margin-bottom: .4rem; }
.faq-a { font-size: .95rem; font-weight: 300; color: var(--ink2); line-height: 1.75; }

/* ═══ TAX TABLE ═══ */
/* .tax-table 已退役（稅表改為賣方 Q&A 內容） */
.tax-note { font-size: .96rem; color: var(--ink3); margin-top: .7rem; }

/* ═══ BLOG ═══ */

/* ── 懶人包主題與圖卡 ── */
.card-category-filter { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:.8rem; width:min(100%,680px); margin:0 auto .7rem; }
.filter-search-form { display:block; min-width:0; margin:0; }
.filter-search-form .filter-search-field { width:100%; }
.filter-select-field { display:flex; min-width:0; flex-direction:column; gap:.45rem; }
.filter-select-label { color:var(--ink3); font-family:var(--sans); font-size:.7rem; font-weight:400; letter-spacing:.14em; }
.filter-select-control {
  appearance:none; -webkit-appearance:none; display:block; width:100%; max-width:100%; min-width:0;
  min-height:48px; padding:.7rem 2.7rem .7rem 1rem; border:1px solid var(--line); border-radius:0;
  background-color:rgba(255,255,255,.7);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%237a6234' stroke-width='1.8'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-position:right 1rem center; background-repeat:no-repeat;
  color:var(--ink); font-family:var(--sans); font-size:.9rem; font-weight:400; text-overflow:ellipsis;
}
.filter-select-control:focus { outline:2px solid rgba(184,150,90,.42); outline-offset:2px; border-color:var(--gold); }
.filter-search-field { display:flex; min-width:0; flex-direction:column; gap:.45rem; }
.filter-search-wrap { position:relative; display:block; }
.filter-search-wrap svg { position:absolute; left:.95rem; top:50%; transform:translateY(-50%); color:var(--gold-text); pointer-events:none; }
.filter-search-control { display:block; width:100%; min-width:0; min-height:48px; padding:.72rem 5.1rem .72rem 2.8rem; border:1px solid var(--line); border-radius:0; background:rgba(255,255,255,.7); color:var(--ink); font-family:var(--sans); font-size:.9rem; outline:none; }
.filter-search-control:focus { outline:2px solid rgba(184,150,90,.42); outline-offset:2px; border-color:var(--gold); }
.filter-search-control::placeholder { color:var(--ink3); opacity:.78; }
.filter-search-submit { position:absolute; z-index:2; top:0; right:0; display:inline-flex; align-items:center; justify-content:center; min-width:68px; min-height:48px; padding:.65rem .85rem; border:1px solid var(--ink); background:var(--ink); color:#fff; font-family:var(--sans); font-size:.78rem; letter-spacing:.1em; cursor:pointer; transition:background .2s ease,border-color .2s ease; }
.filter-search-submit:hover { border-color:var(--gold-text); background:var(--gold-text); }
.filter-search-submit:focus-visible { outline:2px solid var(--gold); outline-offset:2px; }
.search-result-status { min-height:1.4rem; margin:0 auto 2rem; color:var(--ink3); font-family:var(--sans); font-size:.76rem; letter-spacing:.06em; text-align:center; }
.card-topics { min-height:12rem; }
.card-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:2.6rem 1.6rem; align-items:start; animation:card-grid-in .24s ease both; }
@keyframes card-grid-in { from { opacity:.35; transform:translateY(5px); } to { opacity:1; transform:none; } }
.kard { cursor:pointer; display:flex; min-width:0; flex-direction:column; color:inherit; text-decoration:none; transition:transform .4s var(--ease-lux); }
.kard:focus-visible { outline:2px solid var(--gold); outline-offset:5px; }
.kard-img {
  overflow:hidden; position:relative; aspect-ratio:1 / 1.36; border:1px solid var(--line); border-radius:3px;
  background:linear-gradient(100deg,var(--parchment-warm) 25%,var(--parchment) 50%,var(--parchment-warm) 75%);
  background-size:200% 100%; animation:lst-shimmer 1.7s ease-in-out infinite; transition:box-shadow .4s var(--ease-lux);
}
.kard-img.ld { animation:none; background:var(--parchment-warm); }
.kard-img img {
  position:absolute; inset:0; width:100%; height:100%; object-fit:contain; object-position:top center;
  display:block; opacity:0; transition:opacity .65s var(--ease-lux),transform 1.1s var(--ease-lux);
}
.kard-img img.ld { opacity:1; }
.kard-priority {
  position:absolute; z-index:2; top:.75rem; right:.75rem; display:inline-flex; align-items:center; justify-content:center;
  min-height:28px; padding:.32rem .72rem; border:1px solid rgba(255,255,255,.62); border-radius:999px;
  background:rgba(32,27,20,.86); color:#fff; box-shadow:0 4px 16px rgba(0,0,0,.18); backdrop-filter:blur(6px);
  font-family:var(--sans); font-size:.68rem; font-weight:500; letter-spacing:.14em;
}
.kard-body { display:flex; min-height:8.6rem; flex-direction:column; align-items:center; padding:1.25rem .1rem 0; text-align:center; }
.kard-title {
  flex:1; width:100%; margin:0; color:var(--ink); font-family:var(--display); font-size:1.28rem;
  font-weight:400; line-height:1.5; letter-spacing:.035em; text-align:center; text-wrap:balance; transition:color .4s var(--ease-lux);
}
.kard-meta {
  display:flex; width:100%; align-items:center; justify-content:center; flex-wrap:wrap; gap:.45rem .75rem; margin-top:1rem;
  padding-top:1rem; border-top:1px solid var(--line); color:var(--ink3);
  font-family:var(--sans); font-size:.72rem; font-weight:300; letter-spacing:.08em;
}
.kard-meta > span + span::before { content:'·'; margin-right:.75rem; color:var(--gold); }
.kard-read { color:var(--gold-text); white-space:nowrap; }
.kard-read span { display:inline-block; margin-left:.25rem; transition:transform .3s var(--ease-lux); }
.kard-skel { cursor:default; pointer-events:none; }
.kard-skel .sk-line { height:.8rem; border-radius:2px; margin-top:.75rem; background:linear-gradient(100deg,var(--parchment-warm) 25%,#fcfaf6 50%,var(--parchment-warm) 75%); background-size:200% 100%; animation:lst-shimmer 1.7s ease-in-out infinite; }
.kard-skel .sk-cat { width:30%; height:.55rem; }
.kard-skel .sk-title { width:75%; }
html:not(.touch) .kard:hover { transform:translateY(-3px); }
html:not(.touch) .kard:hover .kard-img { box-shadow:0 10px 30px rgba(20,18,16,.12); }
html:not(.touch) .kard:hover .kard-img img { transform:scale(1.025); }
html:not(.touch) .kard:hover .kard-title { color:var(--gold-deep); }
html:not(.touch) .kard:hover .kard-read span { transform:translateX(4px); }

/* 懶人包主題內頁 */
#blog.topic-open > .pg-hero { display:none; }
#blog.topic-open > .sec-md { min-height:calc(100vh - 72px); padding-top:calc(72px + clamp(2rem,4vw,3.5rem)); }
.card-topic-page { max-width:1080px; margin:0 auto; }
.card-topic-back {
  display:inline-flex; align-items:center; gap:.55rem; appearance:none; border:0; background:transparent;
  min-height:44px; padding:0; color:var(--gold); font-family:var(--sans); font-size:.82rem;
  letter-spacing:.14em; cursor:pointer; transition:color .3s var(--ease-lux);
}
.card-topic-back span { font-size:1.05rem; transition:transform .3s var(--ease-lux); }
html:not(.touch) .card-topic-back:hover { color:var(--gold-deep); }
html:not(.touch) .card-topic-back:hover span { transform:translateX(-4px); }
.card-topic-topbar { display:flex; align-items:center; justify-content:space-between; gap:1rem; min-height:44px; margin-bottom:clamp(1.2rem,2vw,1.8rem); }
.card-topic-topbar .card-topic-back { flex-shrink:0; }
.card-topic-page-head {
  max-width:760px; margin:clamp(.15rem,.5vw,.4rem) auto clamp(1.4rem,2.5vw,1.8rem);
  padding-bottom:clamp(2rem,4vw,3rem); text-align:center; border-bottom:1px solid var(--line);
}
.card-topic-priority {
  display:inline-flex; align-items:center; justify-content:center; margin:0 auto .85rem; padding:.32rem .78rem;
  border:1px solid rgba(184,150,90,.52); border-radius:999px; background:rgba(184,150,90,.1);
  color:var(--gold-text); font-family:var(--sans); font-size:.7rem; font-weight:500; letter-spacing:.16em;
}
.card-topic-priority[hidden] { display:none; }
.card-topic-page-head .tp-title {
  width:100%; max-width:none; margin:0 auto; text-align:center;
  color:var(--ink); font-family:var(--display); font-size:clamp(2rem,4vw,3rem);
  font-weight:300; line-height:1.25; letter-spacing:.02em; text-wrap:balance;
}
.card-topic-page-head .tp-title .tp-num { font-family:var(--serif); font-variant-numeric:lining-nums; letter-spacing:0; }
.card-topic-page-head > p:not(.tp-title) { max-width:650px; margin:1rem auto 0; color:var(--ink2); font-family:var(--sans); font-size:.95rem; line-height:1.85; font-weight:300; white-space:pre-line; }
.card-topic-page-meta { display:none; }
.card-topic-page-meta span + span::before { content:'·'; margin-right:1rem; color:var(--gold); }
.card-topic-page-actions { display:flex; justify-content:flex-end; }
.card-topic-page-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:2.6rem 1.6rem; align-items:start; }
.card-topic-page-item { margin:0; cursor:zoom-in; position:relative; }
.card-topic-page-hint {
  display:flex; align-items:center; justify-content:center; gap:.4rem; margin:0 0 clamp(1.6rem,3vw,2.2rem);
  color:var(--gold-text); font-family:var(--sans); font-size:.76rem; letter-spacing:.1em;
}
.card-topic-page-hint svg { flex-shrink:0; }
.card-topic-page-item img {
  display:block; width:100%; height:auto; border:1px solid var(--line); border-radius:3px;
  background:var(--white); transition:box-shadow .4s var(--ease-lux),transform .4s var(--ease-lux);
}
html:not(.touch) .card-topic-page-item:hover img { box-shadow:0 10px 30px rgba(20,18,16,.12); transform:translateY(-3px); }
.card-topic-page-item .card-zoom-hint {
  position:absolute; bottom:.9rem; right:.9rem; z-index:2; display:flex; align-items:center; gap:.4rem;
  background:rgba(255,255,255,.9); backdrop-filter:blur(10px); color:var(--ink); font-family:var(--sans);
  font-size:.7rem; letter-spacing:.1em; padding:.45rem .8rem; border-radius:1px; opacity:0;
  transition:opacity .4s var(--ease-lux); pointer-events:none;
}
html:not(.touch) .card-topic-page-item:hover .card-zoom-hint { opacity:1; }
.touch .card-topic-page-item .card-zoom-hint { opacity:1; } /* 觸控裝置沒有hover，改為常駐顯示提示 */
.card-topic-back-bottom { display:flex; margin:3rem auto 0; }
@media (max-width:900px) {
  .card-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:2.4rem 1.8rem; }
  .card-topic-page-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:2.4rem 1.8rem; }
}
@media (max-width:600px) {
  .card-category-filter { grid-template-columns:1fr; width:100%; }
  .search-result-status { margin-bottom:1.8rem; }
  .card-grid { grid-template-columns:1fr; gap:2.6rem; }
  .card-topic-page-grid { grid-template-columns:1fr; max-width:680px; margin:0 auto; }
  .kard-body { min-height:0; }
  #blog.topic-open > .sec-md { padding-top:calc(72px + 1.8rem); }
  .card-topic-page-head { margin:.3rem auto 2.8rem; padding-bottom:2rem; }
  .card-topic-page-grid { gap:1.8rem; }
}
@media (prefers-reduced-motion:reduce) {
  .card-grid { animation:none; }
  .kard, .kard-img, .kard-img img, .kard-read span { transition:none; }
}

/* 主題內頁的單張圖卡大圖燈箱 */
#card-lightbox { display:none; position:fixed; inset:0; z-index:2000; background:rgba(15,13,11,.95); overflow:hidden; }
#card-lightbox.on { display:block; }
#card-lb-stage { width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.6rem; padding:1.5rem clamp(1rem,7vw,7rem); box-sizing:border-box; }
#card-lightbox img { display:block; width:auto; height:auto; max-width:min(1100px,calc(100vw - 2rem)); max-height:calc(100vh - 4.8rem); max-height:calc(100dvh - 4.8rem); object-fit:contain; box-shadow:0 24px 70px rgba(0,0,0,.55); background:#fff; opacity:0; transform:scale(.985); transition:opacity .45s var(--ease-lux),transform .55s var(--ease-lux); flex-shrink:1; min-height:0; }
#card-lightbox img.ld { opacity:1; transform:none; }
#card-lb-stage::before { content:''; position:fixed; top:50%; left:50%; width:40px; height:40px; margin:-20px 0 0 -20px; border-radius:50%; border:2px solid rgba(255,255,255,.16); border-top-color:#e8c97a; animation:pl-spin .85s linear infinite; opacity:0; transition:opacity .3s var(--ease-lux); z-index:2001; pointer-events:none; }
#card-lightbox.loading #card-lb-stage::before { opacity:1; }
#card-lb-close { position:fixed; top:1.2rem; right:1.5rem; border:0; background:transparent; color:#fff; font-size:2.4rem; cursor:pointer; line-height:1; opacity:.85; z-index:2003; width:44px; height:44px; display:flex; align-items:center; justify-content:center; }
#card-lb-nav button { position:fixed; top:50%; transform:translateY(-50%); background:rgba(255,255,255,.12); color:#fff; border:none; width:48px; height:48px; border-radius:50%; line-height:1; padding:0; display:flex; align-items:center; justify-content:center; cursor:pointer; backdrop-filter:blur(8px); z-index:2002; }
#card-lb-nav button:first-child { left:1.5rem; }
#card-lb-nav button:last-child { right:1.5rem; }
#card-lb-nav button:disabled { opacity:.28; cursor:default; }
#card-lb-count { flex-shrink:0; margin:0; color:#fff; font-family:var(--sans); font-size:.78rem; letter-spacing:.06em; line-height:1; background:rgba(0,0,0,.38); backdrop-filter:blur(6px); padding:0 .9rem; border-radius:999px; pointer-events:none; }
/* 手機與平板：移除左右切換鍵，改用滑動切換 */
@media (max-width:1024px), (hover:none) and (pointer:coarse) {
  #card-lb-nav { display:none; }
}
/* 手機版另將張數移至畫面最下方 */
@media (max-width:600px) {
  #card-lightbox.on { display:flex; flex-direction:column; }
  #card-lb-stage { flex:1 1 auto; min-height:0; }
  #card-lightbox img { max-height:calc(100vh - 7rem); max-height:calc(100dvh - 7rem); }
  #card-lb-count { position:fixed; left:50%; bottom:calc(1.3rem + env(safe-area-inset-bottom,0px)); transform:translateX(-50%); padding:.5rem 1.15rem; font-size:.8rem; z-index:2002; }
}

.blog-empty { text-align: center; padding: clamp(3rem,8vw,6rem) 1rem; }
.blog-empty p { font-family: var(--serif); font-size: 1.05rem; color: var(--ink3); letter-spacing: .04em; }

/* ── 內頁返回連結／結尾聯繫區塊（文章頁、物件詳情頁共用） ── */
.art-back {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .82rem; letter-spacing: .14em; color: var(--gold);
  text-transform: uppercase; cursor: pointer; margin-bottom: 2rem;
  transition: gap .3s var(--ease-lux), color .3s;
}
.art-back span { transition: transform .3s var(--ease-lux); display: inline-block; }
html:not(.touch) .art-back:hover { color: var(--gold-deep); }
html:not(.touch) .art-back:hover span { transform: translateX(-4px); }
.art-body { font-family: var(--serif); color: var(--ink); line-height: 1.95; font-weight: 300; font-size: 1.06rem; }
.art-body > *:first-child { margin-top: 0; }
.art-body h1 { font-family: var(--display); font-weight: 400; font-size: clamp(1.7rem,3.2vw,2.4rem); line-height: 1.25; color: var(--ink); margin: 2.2rem 0 1rem; }
.art-body h2 { font-family: var(--serif); font-weight: 500; font-size: clamp(1.35rem,2.6vw,1.7rem); line-height: 1.35; color: var(--ink); margin: 2rem 0 .8rem; padding-left: .7rem; border-left: 3px solid var(--gold); }
.art-body h3 { font-family: var(--serif); font-weight: 600; font-size: 1.18rem; color: var(--ink); margin: 1.6rem 0 .6rem; }
.art-body h4 { font-size: .78rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); margin: 1.4rem 0 .5rem; }
.art-body p { margin: 1rem 0; }
.art-body ul, .art-body ol { margin: 1rem 0 1rem 1.4rem; }
.art-body li { margin: .5rem 0; line-height: 1.85; }
.art-body ul > li::marker { color: var(--gold); }
.art-body ol > li::marker { color: var(--gold); font-weight: 600; }
.art-body blockquote { margin: 1.6rem 0; padding: 1.1rem 1.5rem; border-left: 3px solid var(--gold); background: var(--parchment-warm); border-radius: 0 6px 6px 0; font-style: italic; color: var(--ink2); }
.art-body a { color: var(--gold-deep); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.art-body strong { font-weight: 600; color: var(--ink); }
.art-body em { font-style: italic; }
.art-body mark { background: linear-gradient(to bottom, transparent 55%, rgba(184,150,90,.28) 55%); padding: 0 2px; }
.art-body img { max-width: 100%; border-radius: 8px; margin: 1.4rem 0; box-shadow: 0 8px 28px rgba(26,24,20,.12); }
.art-body hr { border: none; height: 1px; background: var(--line); margin: 2.2rem 0; }
.art-body table { width: 100%; border-collapse: collapse; margin: 1.4rem 0; font-family: var(--sans); font-size: .92rem; }
.art-body th { background: var(--charcoal); color: var(--parchment); padding: .7rem 1rem; text-align: left; font-weight: 500; letter-spacing: .04em; }
.art-body td { padding: .65rem 1rem; border-bottom: 1px solid var(--line); color: var(--ink2); }
.art-body pre { background: var(--charcoal); color: #e8e2d4; padding: 1.1rem 1.3rem; border-radius: 8px; overflow-x: auto; font-family: ui-monospace, monospace; font-size: .85rem; line-height: 1.7; margin: 1.4rem 0; }
.art-body code { font-family: ui-monospace, monospace; font-size: .85em; background: var(--parchment-warm); color: var(--gold-deep); padding: .1em .4em; border-radius: 4px; }
.art-body pre code { background: none; color: inherit; padding: 0; }
.art-foot { margin-top: 3rem; text-align: center; }
.art-foot-txt { font-size: .95rem; color: var(--ink2); line-height: 1.8; font-weight: 300; }

/* ── 精選物件列表（品牌風格重新設計）── */
.lst-filter { display:grid; grid-template-columns:minmax(0,1.5fr) repeat(2,minmax(0,1fr)); gap:.8rem; width:min(100%,920px); margin:0 auto .7rem; }
.lst-filter .filter-search-form { grid-column:auto; }
@media (max-width:600px) {
  .lst-filter { grid-template-columns:repeat(2,minmax(0,1fr)); width:100%; gap:.7rem; }
  .lst-filter .filter-search-form { grid-column:1/-1; }
}
.lst-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:3rem 2.4rem; }
@media (max-width: 920px) { .lst-grid { grid-template-columns:repeat(2,1fr); gap:2.4rem 1.8rem; } }
@media (max-width: 600px) { .lst-grid { grid-template-columns:1fr; gap:2.6rem; } }
.lst-pagination { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:.5rem; margin-top:3.2rem; }
.lst-page-btn { min-width:40px; height:40px; padding:0 .8rem; border:1px solid var(--line); background:transparent; color:var(--ink2); font-family:var(--sans); font-size:.8rem; letter-spacing:.06em; cursor:pointer; transition:all .3s var(--ease-lux); }
.lst-page-btn.on { background:var(--ink); border-color:var(--ink); color:var(--parchment); }
.lst-page-btn:disabled { opacity:.35; cursor:default; }
html:not(.touch) .lst-page-btn:not(:disabled):hover { border-color:var(--gold); color:var(--gold-deep); }
.lst-page-info { font-family:var(--sans); font-size:.72rem; color:var(--ink3); letter-spacing:.1em; margin-left:.35rem; }
.lst-card { background:transparent; cursor:pointer; display:flex; flex-direction:column; color:inherit; text-decoration:none; transition:transform .4s var(--ease-lux); }
html:not(.touch) .lst-card:hover { transform:translateY(-3px); }
.lst-cover { aspect-ratio:4/3; background:var(--parchment-warm); position:relative; overflow:hidden; border-radius:3px; border:1px solid var(--line); }
.lst-cover img { width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ease-lux); }
html:not(.touch) .lst-card:hover .lst-cover img { transform:scale(1.045); }
html:not(.touch) .lst-card:hover .lst-cover { box-shadow:0 10px 30px rgba(20,18,16,.12); }
.lst-cover::after { content:''; position:absolute; inset:0; background:linear-gradient(to top, rgba(17,16,9,.34), transparent 52%); opacity:0; transition:opacity .6s var(--ease-lux); }
html:not(.touch) .lst-card:hover .lst-cover::after { opacity:1; }
.lst-cover-empty { width:100%; height:100%; display:flex; align-items:center; justify-content:center; color:var(--ink3); background:linear-gradient(135deg,var(--parchment-warm),var(--parchment)); }
.lst-status { position:absolute; top:1rem; left:1rem; z-index:2; font-size:.64rem; letter-spacing:.22em; padding:.42rem .9rem; font-family:var(--sans); font-weight:500; background:rgba(255,255,255,.9); color:var(--ink); backdrop-filter:blur(10px); border-radius:1px; }
.lst-status.議價中 { background:rgba(184,150,90,.95); color:#fff; }
/* 載入中骨架卡：保留版面結構與卡片節奏，避免空白等待感，比純文字更接近真實效果 */
.lst-skel { cursor:default; pointer-events:none; }
.lst-skel .lst-cover, .lst-skel .sk-line { background:linear-gradient(100deg, var(--parchment-warm) 25%, var(--parchment) 50%, var(--parchment-warm) 75%); background-size:200% 100%; animation:lst-shimmer 1.7s ease-in-out infinite; }
.lst-skel .sk-line { height:.85rem; border-radius:2px; margin-bottom:.8rem; }
.lst-skel .sk-cat { width:28%; height:.6rem; }
.lst-skel .sk-title { width:78%; height:1.05rem; }
.lst-skel .sk-addr { width:55%; }
.lst-skel .sk-price { width:38%; height:1.7rem; margin-top:.5rem; margin-bottom:0; }
@keyframes lst-shimmer { 0% { background-position:200% 0; } 100% { background-position:-200% 0; } }
/* 卡片內文：細線分隔的排版，留白更克制 */
.lst-body { padding:1.25rem .1rem 0; display:flex; flex-direction:column; flex:1; }
.lst-cat { font-size:.66rem; letter-spacing:.26em; text-transform:uppercase; color:var(--gold-text); margin-bottom:.6rem; font-family:var(--sans); }
.lst-title { font-family:var(--serif); font-size:1.16rem; font-weight:500; color:var(--ink); line-height:1.45; margin-bottom:.55rem; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; transition:color .4s var(--ease-lux); }
html:not(.touch) .lst-card:hover .lst-title { color:var(--gold-deep); }
.lst-addr { font-size:.8rem; color:var(--ink3); display:flex; align-items:center; gap:.4rem; margin-bottom:1.15rem; font-family:var(--sans); font-weight:300; }
.lst-addr svg { color:var(--gold); flex-shrink:0; }
/* 規格列：格局／坪數／屋齡，細字、低調，位在價格之上 */
.lst-specline { display:flex; align-items:baseline; flex-wrap:wrap; gap:.5rem .8rem; margin-bottom:.9rem; }
.lst-spec { font-size:.82rem; color:var(--ink2); font-family:var(--sans); font-weight:300; white-space:nowrap; }
.lst-spec b { color:var(--ink); font-weight:500; }
.lst-spec-sep { color:var(--line); }
/* 總價列：細線分隔於底部，數字為主視覺焦點 */
.lst-priceline { margin-top:auto; padding-top:1rem; border-top:1px solid var(--line); display:flex; align-items:baseline; gap:.5rem; }
.lst-price { display:flex; align-items:baseline; gap:.18rem; }
.lst-price-lbl { font-size:.66rem; letter-spacing:.18em; color:var(--ink3); font-family:var(--sans); margin-right:.2rem; align-self:center; }
.lst-price-num { font-family:var(--sans); font-size:1.9rem; font-weight:500; color:var(--gold-deep); letter-spacing:-.02em; line-height:1; font-variant-numeric:tabular-nums; }
.lst-price-unit { font-size:.95rem; color:var(--gold-deep); }
.lst-arrow { margin-left:auto; align-self:center; color:var(--ink3); transition:transform .4s var(--ease-lux), color .4s var(--ease-lux); }
html:not(.touch) .lst-card:hover .lst-arrow { color:var(--gold-deep); transform:translateX(4px); }

/* ── 物件詳情 ── */
/* 頂部返回列：清開固定導覽列，給照片牆呼吸空間 */
.ld-topbar { padding-top:calc(var(--nav-h, 80px) + 1.4rem); padding-bottom:1rem; background:var(--parchment); }
.ld-topbar .wrap { display:flex; align-items:center; justify-content:space-between; }
.ld-topbar .art-back { margin:0; }
.ld-topbar-actions { display:flex; align-items:center; justify-content:flex-end; gap:.6rem; flex-wrap:wrap; }
.ld-dl-btn,.share-link-btn { display:inline-flex; align-items:center; justify-content:center; gap:.45rem; min-height:44px; font-size:.78rem; letter-spacing:.14em; color:var(--ink2); font-family:var(--sans); cursor:pointer; border:1px solid var(--line); padding:.5rem 1.1rem; background:transparent; transition:all .35s var(--ease-lux); text-decoration:none; }
.share-link-btn[aria-busy="true"] { cursor:wait; opacity:.72; }
html:not(.touch) .ld-dl-btn:hover,html:not(.touch) .share-link-btn:hover { border-color:var(--gold); color:var(--gold-deep); background:rgba(184,150,90,.05); }
.ld-dl-btn svg { flex-shrink:0; }
@media (max-width:680px) {
  .ld-topbar .wrap { align-items:flex-start; gap:.8rem; flex-wrap:wrap; }
  .ld-topbar-actions { width:100%; }
  .ld-topbar-actions > * { flex:1; white-space:nowrap; }
}
/* 照片牆：主圖大圖在上、縮圖列在下，點縮圖切換主圖、點主圖開燈箱 */
.ld-photobar { background:var(--parchment); padding:0; }
.ld-photobar-inner { max-width:1080px; margin:0 auto; padding:0 clamp(1.2rem,4vw,2.5rem); }
.ld-stage { position:relative; width:100%; aspect-ratio:16/10; background:var(--parchment-warm); overflow:hidden; cursor:zoom-in; border-radius:3px; border:1px solid var(--line); box-shadow:0 2px 14px rgba(20,18,16,.08); }
.ld-stage img { width:100%; height:100%; object-fit:cover; display:block; opacity:0; transition:opacity .5s var(--ease-lux); }
.ld-stage img.on { opacity:1; }
.ld-stage::after { content:''; position:absolute; inset:0; background:linear-gradient(to top, rgba(17,16,9,.18), transparent 40%); opacity:0; transition:opacity .5s var(--ease-lux); pointer-events:none; }
html:not(.touch) .ld-stage:hover::after { opacity:1; }
.ld-stage-zoom { position:absolute; bottom:1rem; right:1rem; z-index:3; display:flex; align-items:center; gap:.4rem; background:rgba(255,255,255,.9); backdrop-filter:blur(10px); color:var(--ink); font-family:var(--sans); font-size:.72rem; letter-spacing:.1em; padding:.5rem .85rem; border-radius:1px; opacity:0; transition:opacity .4s var(--ease-lux); pointer-events:none; }
html:not(.touch) .ld-stage:hover .ld-stage-zoom { opacity:1; }
.ld-stage-count { position:absolute; top:1rem; right:1rem; z-index:3; background:rgba(20,18,16,.55); backdrop-filter:blur(8px); color:#fff; font-family:var(--sans); font-size:.72rem; letter-spacing:.08em; padding:.38rem .8rem; border-radius:1px; }
.ld-stage-ai { position:absolute; top:1rem; left:1rem; z-index:4; border:0; background:rgba(99,102,241,.92); color:#fff; font-family:var(--sans); font-size:.66rem; font-weight:700; letter-spacing:.08em; padding:.32rem .7rem; border-radius:1px; cursor:pointer; transition:background .25s var(--ease-lux), transform .25s var(--ease-lux); }
html:not(.touch) .ld-stage-ai:hover { background:rgba(99,102,241,1); transform:translateY(-1px); }
.ld-stage-tag { position:absolute; top:1rem; left:1rem; z-index:3; background:rgba(20,18,16,.62); backdrop-filter:blur(8px); color:#fff; font-family:var(--sans); font-size:.68rem; font-weight:500; letter-spacing:.1em; padding:.34rem .8rem; border-radius:1px; }
/* 縮圖列：左右箭頭控制（非卷軸），選中態以金線標示，hover 放大；兩側淡出遮罩提示可滑動 */
.ld-thumbrow { display:flex; align-items:center; gap:.5rem; margin-top:.9rem; }
.ld-thumb-nav { flex:0 0 auto; width:26px; height:44px; display:flex; align-items:center; justify-content:center; cursor:pointer; background:var(--white); border:1px solid var(--line); color:var(--ink2); border-radius:2px; transition:all .3s var(--ease-lux); }
html:not(.touch) .ld-thumb-nav:hover { background:var(--ink); color:var(--white); border-color:var(--ink); }
.ld-thumb-nav.disabled { opacity:.28; pointer-events:none; }
.ld-thumbs-viewport { flex:1; overflow:hidden; position:relative; }
.ld-thumbs-viewport::before, .ld-thumbs-viewport::after { content:''; position:absolute; top:0; bottom:0; width:1.4rem; z-index:2; pointer-events:none; }
.ld-thumbs-viewport::before { left:0; background:linear-gradient(to right, var(--parchment), transparent); opacity:1; transition:opacity .3s var(--ease-lux); }
.ld-thumbs-viewport::after { right:0; background:linear-gradient(to left, var(--parchment), transparent); opacity:1; transition:opacity .3s var(--ease-lux); }
.ld-thumbs-viewport.at-start::before { opacity:0; }
.ld-thumbs-viewport.at-end::after { opacity:0; }
.ld-thumbs { display:flex; gap:.45rem; transition:transform .5s var(--ease-lux); }
.ld-thumb { position:relative; flex:0 0 auto; width:58px; aspect-ratio:4/3; overflow:hidden; padding:0; border:0; cursor:pointer; background:var(--parchment-warm); border-radius:1px; opacity:.6; transition:opacity .35s var(--ease-lux), transform .35s var(--ease-lux); }
.ld-thumb img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s var(--ease-lux); }
html:not(.touch) .ld-thumb:hover { opacity:.95; transform:translateY(-2px); }
html:not(.touch) .ld-thumb:hover img { transform:scale(1.14); }
.ld-thumb.on { opacity:1; box-shadow:inset 0 0 0 2px var(--gold); }
.ld-thumb-ai::after { content:'AI'; position:absolute; bottom:.22rem; right:.22rem; background:rgba(99,102,241,.92); color:#fff; font-size:.5rem; font-weight:700; padding:.06rem .26rem; border-radius:4px; letter-spacing:.04em; z-index:2; }
/* 格局圖 / 地圖縮圖：左下角標籤，與物件照片區隔 */
.ld-thumb-tag { position:absolute; left:0; bottom:0; right:0; background:rgba(20,18,16,.66); color:#fff; font-family:var(--sans); font-size:.5rem; font-weight:500; letter-spacing:.08em; text-align:center; padding:.16rem 0; z-index:2; }
.ld-thumb.special { opacity:.78; }
.ld-thumb.special.on { opacity:1; }
@media(max-width:680px){ .ld-stage { aspect-ratio:4/3; } .ld-thumb { width:48px; } .ld-thumb-nav { width:32px; height:44px; } .ld-thumbs-viewport::before, .ld-thumbs-viewport::after { width:1rem; } }
.ld-detail-wrap { max-width:880px; }
.ld-hero-eyebrow { font-size:.72rem; letter-spacing:.28em; text-transform:uppercase; color:var(--gold-text); font-family:var(--sans); margin-bottom:.9rem; display:block; }
.ld-hero-title { font-family:var(--display); font-weight:400; color:var(--ink); line-height:1.18; margin-bottom:1.1rem; letter-spacing:0; white-space:normal; overflow:visible; text-overflow:clip; text-wrap:pretty; font-size:clamp(1.8rem,4.2vw,3rem); }
.ld-title-line { display:block; width:max-content; max-width:100%; white-space:nowrap; }
.ld-title-line + .ld-title-line { margin-top:.04em; }
.ld-hero-addr { display:flex; align-items:center; gap:.5rem; color:var(--ink2); font-size:.92rem; margin-bottom:.4rem; font-family:var(--sans); font-weight:300; }
.ld-hero-addr svg { color:var(--gold); flex-shrink:0; }
.ld-community-row { flex-wrap:wrap; }
.ld-market-link { display:inline-flex; align-items:center; width:max-content; margin-left:.55rem; color:var(--gold-text); font-family:var(--sans); font-size:.78rem; letter-spacing:.04em; line-height:1.5; white-space:nowrap; text-decoration:none; border-bottom:1px solid rgba(184,150,90,.45); padding-bottom:.08rem; transition:color .25s var(--ease-lux), border-color .25s var(--ease-lux); }
html:not(.touch) .ld-market-link:hover { color:var(--gold-deep); border-color:var(--gold-deep); }
.ld-hero-rule { width:48px; height:2px; background:linear-gradient(90deg,var(--gold),transparent); margin:1.8rem 0; }
/* 總價列：總價在左（含「總價」標籤），登記坪數＋單價靠右 */
.ld-price-row { display:flex; align-items:flex-end; justify-content:space-between; gap:1.5rem 2rem; margin:1.8rem 0 2.4rem; flex-wrap:wrap; }
.ld-price-main { display:flex; align-items:baseline; gap:.25rem; }
.ld-price-lbl { font-size:1.6rem; color:var(--gold-deep); font-family:var(--sans); font-weight:500; margin-right:.5rem; align-self:baseline; letter-spacing:.02em; }
.ld-price-main .num { font-family:var(--num); font-size:clamp(2.6rem,6vw,3.9rem); font-weight:600; color:var(--gold-deep); letter-spacing:0; line-height:1; }
/* 「萬」與數字同色、同字形、同基線 */
.ld-price-main .unit { font-size:1.6rem; color:var(--gold-deep); font-weight:500; font-family:var(--num); align-self:baseline; }
.ld-price-side { display:flex; gap:2.4rem; align-items:flex-end; padding-bottom:.4rem; }
/* 登記坪數 / 單價：標籤與數字同一列（標籤在前），數字與單位同色同字形 */
.ld-pr-item { display:flex; align-items:baseline; gap:.5rem; line-height:1.15; flex-shrink:0; white-space:nowrap; }
.ld-pr-lbl { font-size:.92rem; color:var(--ink2); letter-spacing:.04em; font-family:var(--sans); font-weight:400; text-transform:none; white-space:nowrap; }
.ld-pr-val { display:flex; align-items:baseline; gap:.16rem; white-space:nowrap; flex-wrap:nowrap; }
.ld-pr-num { font-family:var(--num); font-size:1.55rem; font-weight:600; color:var(--ink); letter-spacing:0; line-height:1; white-space:nowrap; }
.ld-pr-num.gold { color:var(--gold-deep); }
/* 單位（坪 / 萬/坪）與其數字同色同字形 */
.ld-pr-u { font-size:.92rem; color:var(--ink); font-weight:500; font-family:var(--num); white-space:nowrap; }
.ld-pr-u.gold { color:var(--gold-deep); }
/* 次要數據（建物價格、車位價格）：細線分隔，非格子 */
.ld-strip { display:flex; flex-wrap:wrap; gap:0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); margin-bottom:3rem; }
.ld-strip-item { flex:1; min-width:120px; padding:1.6rem 1rem; text-align:center; border-right:1px solid var(--line); }
.ld-strip-item:last-child { border-right:none; }
.ld-strip-val { font-family:var(--display); font-size:1.9rem; font-weight:300; color:var(--ink); }
.ld-strip-val.gold { color:var(--gold-deep); }
.ld-strip-val .u { font-size:.78rem; color:var(--ink3); margin-left:.2rem; }
.ld-strip-lbl { font-size:.68rem; color:var(--ink3); letter-spacing:.14em; text-transform:uppercase; margin-top:.5rem; font-family:var(--sans); }
/* 資料區塊：開放式，標題用 eyebrow + 細線，內容為兩欄 hairline 列表 */
.ld-section { margin-bottom:2.8rem; }
.ld-sec-head { display:flex; align-items:center; gap:1rem; margin-bottom:1.4rem; }
.ld-sec-head .lbl { font-size:.92rem; letter-spacing:.18em; text-transform:uppercase; color:var(--gold); font-family:var(--sans); font-weight:500; white-space:nowrap; }
.ld-sec-head .ln { flex:1; height:1px; background:var(--line); }
.ld-info-grid { display:grid; grid-template-columns:1fr 1fr; gap:0 2.5rem; }
.ld-row { display:flex; justify-content:space-between; align-items:baseline; padding:.85rem 0; border-bottom:1px solid var(--line); gap:1rem; }
.ld-row .k { font-size:.8rem; letter-spacing:.12em; color:var(--ink3); font-family:var(--sans); font-weight:300; white-space:nowrap; }
.ld-row .v { font-size:.95rem; color:var(--ink); font-family:var(--serif); font-weight:400; text-align:right; }
.ld-chips { display:flex; flex-wrap:wrap; gap:.5rem; padding:.3rem 0; }
.ld-chip { font-size:.82rem; padding:.4rem 1rem; background:var(--parchment-warm); color:var(--ink2); font-family:var(--sans); }
.ld-trans-row { display:flex; align-items:center; gap:.7rem; padding:.75rem 0; border-bottom:1px solid var(--line); font-size:.92rem; color:var(--ink2); font-family:var(--sans); font-weight:300; }
.ld-trans-row:last-child { border-bottom:none; }
.ld-trans-row .t-time { margin-left:auto; color:var(--gold-deep); font-size:.85rem; }
.ld-features { padding:0; margin-top:.4rem; font-family:var(--serif); font-size:1.02rem; line-height:1.95; color:var(--ink2); font-weight:300; }
.ld-features h1,.ld-features h2,.ld-features h3,.ld-features h4 { font-family:var(--display); color:var(--ink); margin:1.6rem 0 .6rem; line-height:1.3; font-weight:400; }
.ld-features h1:first-child,.ld-features h2:first-child,.ld-features h3:first-child { margin-top:0; }
.ld-features h1 { font-size:1.7rem; } .ld-features h2 { font-size:1.45rem; } .ld-features h3 { font-size:1.2rem; }
.ld-features p { margin:.7rem 0; }
.ld-features strong { font-weight:500; color:var(--ink); }
.ld-features em { font-style:italic; color:var(--ink); }
.ld-features ul,.ld-features ol { margin:.7rem 0 .7rem 1.5rem; }
.ld-features li { margin:.4rem 0; line-height:1.9; padding-left:.3rem; }
.ld-features li::marker { color:var(--gold); }
.ld-video{position:relative;width:100%;aspect-ratio:16/9;border-radius:10px;overflow:hidden;background:#000;}
.ld-broker{font-size:11.5px;line-height:1.6;color:var(--ink3);letter-spacing:.02em;white-space:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-top:1rem;border-top:1px solid var(--line2);}
.ld-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
.ld-video.thumb{cursor:pointer;}
.ld-video img{width:100%;height:100%;object-fit:cover;}
.ld-video .vplay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;}
.ld-video .vplay-btn{width:62px;height:62px;border-radius:50%;background:rgba(184,150,90,.92);display:flex;align-items:center;justify-content:center;box-shadow:0 4px 16px rgba(0,0,0,.3);}
.ld-section-label { font-size:.74rem; letter-spacing:.24em; text-transform:uppercase; color:var(--gold); margin:0 0 1.2rem; font-family:var(--sans); }
@media(max-width:680px){ .ld-info-grid{grid-template-columns:1fr;} .ld-price-side{gap:1.2rem;} .ld-pr-num{font-size:1.3rem;} .ld-pr-lbl,.ld-pr-u{font-size:.82rem;} }

/* 版面：頂部整列（案名/地址/社區 ｜ 總價/坪數/單價），其下照片 ｜ 物件特色，再下方資料兩欄 */
.ld-quad { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); column-gap:3rem; row-gap:0; align-items:start; }
.ld-quad > div { min-width:0; }
/* 頂部整列：左右兩格對齊底部，下方留一道細線與內容區隔 */
.ld-q-head { display:flex; flex-direction:column; justify-content:flex-start; padding-bottom:1.4rem; margin-bottom:1.8rem; border-bottom:1px solid var(--line); align-self:stretch; }
.ld-q-head .ld-hero-title { margin-bottom:1rem; }
.ld-q-head .ld-hero-addr:last-child { margin-bottom:0; }
.ld-q-head-r { align-items:stretch; }
.ld-q-head-l { padding-top:.4rem; }
.ld-q-head-r .ld-price-row { margin:0; width:100%; }
.ld-q-tr { padding-top:0; }
.ld-q-bl, .ld-q-br { margin-top:2.6rem; }
.ld-q-bl .ld-section:last-child, .ld-q-br .ld-section:last-child, .ld-q-tr .ld-section:last-child { margin-bottom:0; }
.ld-q-bl .ld-section:first-child, .ld-q-br .ld-section:first-child, .ld-q-tr .ld-section:first-child { margin-top:0; }
/* 資料兩欄區（左下/右下）改單欄 */
.ld-quad .ld-q-bl .ld-info-grid, .ld-quad .ld-q-br .ld-info-grid { grid-template-columns:1fr; }
@media(max-width:900px){
  /* 窄螢幕：堆疊成單欄，順序＝案名地址社區 → 照片 → 總價坪數單價 → 物件特色 → 坪數學區 → 基本資料周邊 */
  .ld-quad{ grid-template-columns:1fr; }
  .ld-q-head-l{ order:1; margin-bottom:1.2rem; padding-bottom:1rem; }
  .ld-q-tl{ order:2; margin-bottom:1.8rem; }
  .ld-q-head-r{ order:3; margin-bottom:1.4rem; padding-bottom:1.1rem; }
  .ld-q-tr{ order:4; }
  .ld-q-bl{ order:5; margin-top:2.2rem; }
  .ld-q-br{ order:6; margin-top:2.2rem; }
  .ld-quad .ld-q-bl .ld-info-grid, .ld-quad .ld-q-br .ld-info-grid { grid-template-columns:1fr 1fr; }
}
@media(max-width:680px){ .ld-quad .ld-q-bl .ld-info-grid, .ld-quad .ld-q-br .ld-info-grid { grid-template-columns:1fr; } .ld-market-link { margin-left:.35rem; font-size:.74rem; } }

/* 全寬列：學區（國小左/國中右）、周邊機能（一列兩項）。兩欄等寬，細線分隔列 */
.ld-fullrows { margin-top:2.8rem; }
.ld-fullrows .ld-section { margin-bottom:2.8rem; }
.ld-fullrows .ld-section:last-child { margin-bottom:0; }
.ld-pair-grid { display:grid; grid-template-columns:1fr 1fr; gap:0 3rem; }
.ld-pair-grid .ld-row { border-bottom:1px solid var(--line); }
.ld-pair-grid .ld-trans-row { border-bottom:1px solid var(--line); }
@media(max-width:680px){ .ld-pair-grid { grid-template-columns:1fr; gap:0; } }

/* 燈箱 */
#ld-lightbox { display:none; position:fixed; inset:0; z-index:2000; background:rgba(15,13,11,.94); align-items:center; justify-content:center; }
#ld-lightbox.on { display:flex; }
#ld-lightbox img { max-width:92vw; max-height:86vh; object-fit:contain; box-shadow:0 20px 60px rgba(0,0,0,.5); }
#ld-lb-close { position:absolute; top:.8rem; right:1rem; width:44px; height:44px; display:flex; align-items:center; justify-content:center; border:0; background:transparent; color:#fff; font-size:2.4rem; cursor:pointer; line-height:1; opacity:.8; }
/* 左右切換鈕移到畫面下方：避免與 AI 裝修對比拉 BAR（把手在垂直置中）撞在一起；84px 高於底部的原始屋況/AI 裝潢切換列 */
#ld-lb-nav button { position:fixed; bottom:calc(84px + env(safe-area-inset-bottom,0px)); background:rgba(255,255,255,.92); color:#1a1714; border:none; width:48px; height:48px; border-radius:50%; line-height:1; padding:0; display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:0 4px 16px rgba(0,0,0,.35); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); }
#ld-lb-nav button:hover { background:#fff; }
#ld-lb-nav button:first-child { left:1.5rem; } #ld-lb-nav button:last-child { right:1.5rem; }
#ld-lightbox.single #ld-lb-nav { display:none; }
/* AI 裝修 before/after slider */
#ld-ba-wrap { display:none; position:relative; max-width:92vw; max-height:84vh; cursor:col-resize; user-select:none; touch-action:none; line-height:0; }
#ld-lightbox.ba #ld-ba-wrap { display:inline-block; }
#ld-lightbox.ba #ld-lb-img { display:none; }
/* 原始照片＝定錨元素，決定 wrap 實際尺寸（用 #ld-lightbox #ld-ba-orig 提高特異性，避免被前面 #ld-lightbox img 的 86vh 覆寫掉，導致跟 wrap 的 84vh 兜不齊而多出空白／跑版） */
#ld-lightbox #ld-ba-orig { display:block; position:relative; max-width:92vw; max-height:84vh; width:auto; height:auto; pointer-events:none; }
/* AI 裝修圖＝貼合 orig 算出的同一尺寸框，用 cover 裁切而非 fill 拉伸，避免兩張比例不同時變形（同樣用雙層 ID 提高特異性，避免被 #ld-lightbox img 的 object-fit:contain 覆寫掉） */
#ld-lightbox #ld-ba-ai { position:absolute; top:0; right:0; bottom:0; left:0; width:100%; height:100%; object-fit:cover; pointer-events:none; }
/* 分享圖卡燈箱：手機/平板按「下載詳細頁」改為顯示圖卡、長按儲存（僅此燈箱開放長按，其餘保護不變） */
#sc-lightbox { display:none; position:fixed; inset:0; z-index:2200; background:rgba(15,13,11,.96); flex-direction:column; align-items:center; justify-content:center; gap:14px; padding:5vh 4vw; }
#sc-lightbox.on { display:flex; }
#sc-lightbox img { max-width:92vw; max-height:76vh; width:auto; height:auto; object-fit:contain; background:#fff; box-shadow:0 24px 70px rgba(0,0,0,.55); -webkit-user-drag:auto; user-select:auto; -webkit-user-select:auto; -webkit-touch-callout:default; }
#sc-lb-hint { color:#d9c9a5; font-size:.85rem; letter-spacing:.14em; font-family:'Noto Sans TC',sans-serif; }
#sc-lb-close { position:absolute; top:16px; right:16px; width:42px; height:42px; display:flex; align-items:center; justify-content:center; border:1px solid rgba(216,196,160,.35); border-radius:50%; background:rgba(0,0,0,.35); color:#e8dcc0; font-size:24px; line-height:1; cursor:pointer; }
/* 載入中淡入效果：兩張圖都「等雙圖都就緒(ld-ready)才一起淡入」——避免 AI 圖比原始/清空圖先載完就單獨冒出來（開圖閃 AI 的元兇）。特異性(2,2,0)蓋過定錨用的 #ld-lightbox #ld-ba-orig (2,0,0) 與 base (1,0,0) */
#ld-ba-orig, #ld-ba-ai { opacity:0; transition:opacity .3s; }
#ld-ba-wrap.ld-ready #ld-ba-orig.ld-loaded, #ld-ba-wrap.ld-ready #ld-ba-ai.ld-loaded { opacity:1 !important; }
#ld-ba-spin { position:absolute; top:50%; left:50%; width:34px; height:34px; margin:-17px 0 0 -17px; border:2.5px solid rgba(255,255,255,.18); border-top-color:var(--gold); border-radius:50%; animation:ld-spin .8s linear infinite; pointer-events:none; }
#ld-ba-wrap.ld-ready #ld-ba-spin { display:none; }
@keyframes ld-spin { to { transform:rotate(360deg); } }
#ld-ba-line { position:absolute; top:0; bottom:0; left:50%; width:2px; background:#fff; box-shadow:0 0 10px rgba(0,0,0,.6); pointer-events:none; }
/* 按鈕點擊切換原始屋況／AI 裝修時，加上短暫的滑動動畫；拖曳時不套用（保持即時跟手，避免卡頓感） */
#ld-ba-wrap.ld-ba-anim #ld-ba-orig { transition:clip-path .45s var(--ease-lux), opacity .3s; }
#ld-ba-wrap.ld-ba-anim #ld-ba-line { transition:left .45s var(--ease-lux); }
.ld-ba-handle { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:30px; height:30px; background:#fff; border-radius:50%; box-shadow:0 2px 10px rgba(0,0,0,.4); display:flex; align-items:center; justify-content:center; }
.ld-ba-toggle { position:absolute; bottom:-3.2rem; left:50%; transform:translateX(-50%); display:flex; background:rgba(20,18,16,0.55); -webkit-backdrop-filter:blur(16px) saturate(1.4); backdrop-filter:blur(16px) saturate(1.4); border:1px solid rgba(255,255,255,0.18); border-radius:30px; padding:4px; gap:2px; box-shadow:0 8px 32px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.12); }
.ld-ba-toggle button { position:relative; z-index:1; display:flex; align-items:center; gap:5px; background:none; border:none; color:rgba(255,255,255,.65); padding:7px 16px; border-radius:24px; font-size:.8rem; font-weight:600; letter-spacing:.3px; cursor:pointer; font-family:var(--sans); white-space:nowrap; transition:color .25s ease; }
.ld-ba-toggle button svg { width:13px; height:13px; opacity:.85; }
.ld-ba-toggle button.on { color:#1a1714; }
.ld-ba-slider { position:absolute; top:4px; bottom:4px; border-radius:24px; background:linear-gradient(135deg,#f4ead2 0%,#e8d4a8 50%,#d4b876 100%); box-shadow:0 2px 10px rgba(196,164,90,0.5), inset 0 1px 0 rgba(255,255,255,0.6); transition:left .32s cubic-bezier(0.34,1.3,0.5,1), width .32s cubic-bezier(0.34,1.3,0.5,1); z-index:0; }
#ld-ba-wrap.ld-ba-priming #ld-ba-orig,
#ld-ba-wrap.ld-ba-priming #ld-ba-line,
#ld-ba-wrap.ld-ba-priming .ld-ba-slider { transition:none !important; }
#ld-ba-wrap.ld-ba-priming .ld-ba-toggle { visibility:hidden; }
#ld-ba-wrap.ld-ba-priming #ld-ba-line { opacity:0; }
/* 卡片/格子上的 AI 標記 */
.ld-ph-ai::before { content:'AI'; position:absolute; bottom:.4rem; right:.4rem; z-index:2; background:rgba(99,102,241,.9); color:#fff; font-size:.62rem; font-weight:700; padding:.1rem .4rem; border-radius:6px; letter-spacing:.05em; }
.ld-ph { position:relative; }

/* ═══ TOOLS ═══ */
.tools-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1px; background: var(--line); }
@media (max-width: 560px) { .tools-grid { grid-template-columns: 1fr; } }
.tool-card {
  background: var(--white);
  padding: 2.4rem 1.8rem;
  display: flex; flex-direction: column;
  transition: background .5s var(--ease-lux);
  text-decoration: none; color: inherit;
  position: relative; overflow: hidden;
}
.tool-card::after {
  content: ""; position: absolute; bottom: 0; left: 0; right: 0;
  height: 2px; background: linear-gradient(90deg, var(--gold), var(--gold-lt));
  transform: scaleX(0); transform-origin: left;
  transition: transform .5s var(--ease-lux);
}
html:not(.touch) .tool-card:hover { background: var(--parchment); }
html:not(.touch) .tool-card:hover::after { transform: scaleX(1); }
.tool-card.placeholder { opacity: .45; border-style: dashed; }
.tool-icon {
  width: 46px; height: 46px; border: 1px solid rgba(184,150,90,.3);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 1.3rem; position: relative; overflow: hidden;
  transition: border-color .4s var(--ease-lux);
}
.tool-icon::before {
  content: ""; position: absolute; inset: 0; background: var(--gold);
  transform: scale(0); border-radius: 50%;
  transition: transform .45s var(--ease-lux);
}
html:not(.touch) .tool-card:hover .tool-icon { border-color: var(--gold); }
html:not(.touch) .tool-card:hover .tool-icon::before { transform: scale(1.6); }
.tool-icon svg { width: 20px; height: 20px; stroke: var(--gold); fill: none; stroke-width: 1.5; position: relative; z-index: 1; transition: stroke .4s var(--ease-lux); }
html:not(.touch) .tool-card:hover .tool-icon svg { stroke: var(--white); }
.tool-cat { font-size: .58rem; letter-spacing: .2em; color: var(--gold-text); text-transform: uppercase; margin-bottom: .35rem; }
.tool-title { font-family: var(--serif); font-size: .9rem; font-weight: 500; color: var(--ink); margin-bottom: .45rem; }
.tool-desc { font-size: .97rem; font-weight: 300; color: var(--ink2); line-height: 1.75; flex: 1; margin-bottom: 1.2rem; }
.tool-link { font-size: .9rem; letter-spacing: .1em; color: var(--gold); text-transform: uppercase; display: inline-flex; align-items: center; gap: .35rem; }
.tool-link::after { content: "→"; transition: transform .4s var(--ease-lux); }
html:not(.touch) .tool-card:hover .tool-link::after { transform: translateX(5px); }

/* ═══ CONTACT ═══ */
.contact-grid-2col { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 4vw, 3.5rem); align-items: stretch; }
@media (max-width: 680px) { .contact-grid-2col { grid-template-columns: 1fr; } }
.contact-map { display: flex; flex-direction: column; }
.contact-map .map-frame { flex: 1; margin-top: 0; }
.contact-map .map-frame iframe { height: 100%; min-height: 240px; }
.c-method {
  display: flex; gap: 1.2rem; align-items: flex-start;
  padding: 1.4rem; border: 1px solid var(--line2);
  background: var(--white); margin-bottom: .8rem;
  transition: border-color .2s; text-decoration: none; color: inherit;
}
html:not(.touch) .c-method:hover { border-color: var(--gold); }
.c-icon { width: 38px; height: 38px; border: 1px solid rgba(184,150,90,.25); flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.c-icon svg { width: 16px; height: 16px; stroke: var(--gold); fill: none; stroke-width: 1.5; }
.c-lbl { font-size: .98rem; letter-spacing: .18em; color: var(--gold); text-transform: uppercase; margin-bottom: .2rem; }
.c-val { font-family: var(--serif); font-size: .9rem; color: var(--ink); }
.c-note { font-size: .74rem; color: var(--ink3); font-weight: 300; margin-top: .1rem; }
.map-frame { margin-top: 1.6rem; overflow: hidden; border: 1px solid var(--line2); line-height: 0; }
.map-frame iframe { width: 100%; height: 240px; border: 0; display: block; filter: grayscale(20%); }
.map-link-block { display: block; text-decoration: none; position: relative; }
.map-static { position: relative; line-height: 0; }
.map-static svg { width: 100%; height: 240px; display: block; }
.map-open-hint {
  position: absolute; bottom: 10px; right: 10px;
  display: inline-flex; align-items: center; gap: .4rem;
  background: white; border: 1px solid var(--line2);
  padding: .4rem .8rem; font-size: .96rem;
  color: rgba(30,28,20,.6); letter-spacing: .04em;
  font-family: var(--sans);
}
html:not(.touch) .map-link-block:hover .map-open-hint { border-color: var(--gold); color: var(--gold); }
.btn-stack { display: flex; flex-direction: row; flex-wrap: wrap; gap: .8rem; }

.cta-panel-full {
  background: var(--obsidian);
  padding: clamp(2.2rem, 4vw, 3.2rem) clamp(2rem, 5vw, 3.6rem);
  margin-top: clamp(1.2rem, 2vw, 1.8rem);
  display: flex; align-items: center; justify-content: space-between;
  gap: clamp(2rem, 4vw, 3.5rem); flex-wrap: wrap;
}
.cta-panel-full .cta-text { flex: 1 1 380px; min-width: 280px; }
.cta-panel-full .eyebrow { margin-bottom: .5rem; }
.cta-panel-full h3 {
  font-family: var(--display); font-size: clamp(1.5rem, 2.4vw, 2rem);
  font-weight: 300; color: var(--white); line-height: 1.35; margin-bottom: .6rem;
}
.cta-panel-full h3 em { color: var(--gold); font-style: italic; }
.cta-panel-full p { font-size: .95rem; color: rgba(255,255,255,.3); line-height: 1.75; margin: 0; }
.cta-panel-full .btn-stack { flex-shrink: 0; }
.cta-panel-full .btn-stack a { flex: 1 1 0; width: auto; min-width: 150px; }
@media (max-width: 680px) {
  .cta-panel-full { flex-direction: column; align-items: flex-start; }
  .cta-panel-full .btn-stack { width: 100%; }
  .cta-panel-full .btn-stack a { flex: 1; }
}

/* ═══ PAGE HERO ═══ */
.pg-hero {
  margin-top: 72px;
  background: linear-gradient(135deg, #1a1810 0%, #111009 60%, #0e0d08 100%);
  padding: clamp(1rem, 2.5vw, 2rem) 0 clamp(.8rem, 2vw, 1.6rem);
  text-align: center;
}
.pg-hero .eyebrow { margin-bottom: .6rem; }
.pg-hero-title {
  font-family: var(--display);
  font-size: clamp(1.6rem, 4vw, 3.8rem);
  font-weight: 300; color: var(--white); line-height: 1.25;
  white-space: nowrap;
}
.pg-hero-title em { color: var(--gold); font-style: italic; }
.pg-hero-sub {
  font-size: clamp(.78rem, 1.4vw, 1rem);
  font-weight: 300; color: rgba(255,255,255,.4);
  margin-top: .7rem; white-space: nowrap;
}
@media (max-width: 760px) {
  .pg-hero-title { white-space: normal; font-size: clamp(1.6rem, 7vw, 2.4rem); }
  .pg-hero-sub { white-space: normal; font-size: .88rem; }
}

/* ═══ SECTION CTA ═══ */
.cta-band {
  background: var(--obsidian);
  padding: clamp(40px, 5vw, 60px) 0;
  text-align: left;
  position: relative;
  overflow: hidden;
}
.cta-band::before {
  content: ""; position: absolute;
  top: 50%; left: 50%;
  width: 90%; height: 180%;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse at center, var(--gold-glow), transparent 70%);
  opacity: .22; pointer-events: none;
}
.cta-band .wrap { position: relative; z-index: 1; }
.cta-band .eyebrow { margin-bottom: .6rem; }
.cta-band h2 {
  font-family: var(--display);
  font-size: clamp(1.4rem, 2.4vw, 2.1rem);
  font-weight: 300; color: var(--white); line-height: 1.25; margin-bottom: .6rem;
}
.cta-band h2 em { color: var(--gold); font-style: italic; }
.cta-band p { font-size: .98rem; font-weight: 300; color: rgba(255,255,255,.3); margin-bottom: 2.2rem; }
.btn-row { display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap; }
.btn-row-2 { flex-wrap: nowrap; }
.btn-row-2 .btn-primary, .btn-row-2 .btn-outline {
  min-width: 0; flex: 1; max-width: none; padding: .9rem 1rem;
}
.btn-row .btn-primary, .btn-row .btn-outline {
  min-width: 180px; flex: 1; max-width: 240px; padding: .95rem 2.2rem;
}

/* ═══ TRANSACTION FLOW ═══ */
/* ═══ 交易流程一覽 — 編輯式雙欄目錄（買方 slate／屋主 gold，髮絲線分列，無圓形無卡片）═══ */
#transaction-flow { background: var(--parchment); padding: clamp(40px,5vw,60px) 0 !important; }

.tf2-header { text-align: center; margin-bottom: clamp(1.8rem,3.5vw,2.6rem); }
.tf2-header-icon { display: block; margin-bottom: .4rem; }
.tf2-header-icon svg { display: none; }
.tf2-header-icon h2 {
  font-family: var(--display);
  font-size: clamp(1.7rem, 3.4vw, 2.5rem);
  font-weight: 300; color: var(--obsidian); margin: 0; letter-spacing: .02em;
}
.tf2-header p {
  font-size: .9rem; color: var(--ink3);
  letter-spacing: .04em; margin-top: .5rem; line-height: 1.72;
}
.tf2-divider { display: none; }
.tf2-cols {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.6rem,4vw,3.5rem);
}
/* 欄首：頂部色條＋標籤，無膠囊背景 */
.tf2-col-head {
  display: flex; align-items: center; gap: .55rem;
  padding: .9rem 0 .8rem; margin-bottom: .4rem;
  border-top: 2px solid; position: relative;
}
.tf2-col-head svg { width: 17px; height: 17px; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.tf2-col-head span {
  font-family: var(--serif); font-size: 1.05rem; font-weight: 500; letter-spacing: .1em;
}
.tf2-col-head--buyer  { border-color: #6b7f99; }
.tf2-col-head--buyer svg  { stroke: #6b7f99; }
.tf2-col-head--buyer span { color: #4f617a; }
.tf2-col-head--seller { border-color: var(--gold); }
.tf2-col-head--seller svg { stroke: var(--gold-deep); }
.tf2-col-head--seller span { color: var(--gold-deep); }
.tf2-col { position: relative; }
.tf2-col-line { display: none; }
.tf2-steps-wrap { position: relative; }

.tf2-step {
  display: grid; grid-template-columns: 2.4em 22px 1fr;
  align-items: center; gap: .7rem;
  padding: .9rem .1rem; border-bottom: 1px solid var(--line);
  transition: background .4s var(--ease-lux), padding-left .4s var(--ease-lux);
}
html:not(.touch) .tf2-step:hover { padding-left: .6rem; }
html:not(.touch) .tf2-col--buyer  .tf2-step:hover { background: rgba(107,127,153,.07); }
html:not(.touch) .tf2-col--seller .tf2-step:hover { background: var(--gold-dim); }
.tf2-num {
  font-family: var(--display); font-style: italic; font-weight: 400;
  font-size: 1.5rem; line-height: 1;
}
.tf2-col--buyer  .tf2-num { color: rgba(107,127,153,.55); }
.tf2-col--seller .tf2-num { color: rgba(184,150,90,.5); }
.tf2-icon-wrap { display: flex; align-items: center; justify-content: center; }
.tf2-col--buyer  .tf2-icon-wrap svg { stroke: #6b7f99; }
.tf2-col--seller .tf2-icon-wrap svg { stroke: var(--gold-deep); }
.tf2-icon-wrap svg { width: 20px; height: 20px; fill: none; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.tf2-info { min-width: 0; }
.tf2-name {
  font-family: var(--serif); font-size: 1rem; font-weight: 500;
  color: var(--obsidian); line-height: 1.35; letter-spacing: .02em;
}
.tf2-days { display: none; }
.tf2-connector { display: none; }
.tf2-complete { display: none; }

@media (max-width: 640px) {
  .tf2-cols { gap: 1.4rem; }
  .tf2-step { grid-template-columns: 2em 18px 1fr; gap: .5rem; padding: .75rem .05rem; }
  .tf2-num { font-size: 1.2rem; }
  .tf2-icon-wrap svg { width: 16px; height: 16px; }
  .tf2-name { font-size: .86rem; }
  .tf2-col-head span { font-size: .92rem; letter-spacing: .06em; }
  html:not(.touch) .tf2-step:hover { padding-left: .1rem; }
}
/* ═══ LISTINGS ═══ */
.listing-grid {
  display: flex; justify-content: center;
}
.listing-placeholder {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1.2rem; padding: 4rem 2rem;
  border: 1.5px dashed rgba(184,150,90,.3);
  border-radius: 4px; width: 100%; max-width: 420px;
  background: rgba(184,150,90,.03);
}
.listing-placeholder-icon svg {
  width: 48px; height: 48px; stroke: rgba(184,150,90,.4);
}
.listing-placeholder-text {
  text-align: center; font-size: .9rem;
  color: rgba(30,28,20,.4); line-height: 1.75;
}
.listing-placeholder-text span {
  font-size: .98rem; letter-spacing: .1em; color: rgba(30,28,20,.25);
}
.listings-feature-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center;
}
.listings-feature-tags {
  display: flex; flex-wrap: wrap; gap: .5rem;
}
.listings-tag {
  font-size: .96rem; letter-spacing: .08em;
  border: 1px solid rgba(184,150,90,.3);
  color: rgba(30,28,20,.5); padding: .3rem .8rem;
}
.listings-before-after {
  display: flex; align-items: center; gap: .8rem;
}
.listings-ba-card {
  flex: 1; display: flex; flex-direction: column; gap: .4rem;
}
.listings-ba-label {
  font-size: .77rem; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(30,28,20,.4); text-align: center;
}
.listings-ba-label--after { color: var(--gold); }
.listings-ba-img {
  border-radius: 3px; overflow: hidden;
  border: 1px solid rgba(30,28,20,.1);
}
.listings-ba-img svg { width: 100%; display: block; }
.listings-ba-arrow {
  font-size: 1.2rem; color: var(--gold); flex-shrink: 0;
}
@media (max-width: 760px) {
  .listings-feature-grid { grid-template-columns: 1fr; gap: 2rem; }
}

/* ═══ FORM CTA ═══ */
.form-cta-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  background: linear-gradient(145deg, #e6cda5 0%, #cdaf85 45%, #b8965a 100%);
  color: #1a1814;
  font-family: var(--serif); font-size: .95rem; font-weight: 500; letter-spacing: .08em;
  padding: 1.1rem 2.8rem; border: none;
  text-decoration: none;
  position: relative; overflow: hidden; z-index: 1;
  box-shadow: 0 2px 12px rgba(184,150,90,.25), inset 0 1px 0 rgba(255,255,255,.4);
  transition: transform .45s var(--ease-lux), box-shadow .45s var(--ease-lux);
  cursor: pointer;
}
.form-cta-btn svg { flex-shrink: 0; stroke: currentColor; }
.form-cta-btn::after {
  content: ""; position: absolute; top: 0; left: -75%;
  width: 50%; height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.6), transparent);
  transform: skewX(-20deg);
  transition: left .7s var(--ease-lux);
}
html:not(.touch) .form-cta-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 34px rgba(184,150,90,.42), inset 0 1px 0 rgba(255,255,255,.5);
}
html:not(.touch) .form-cta-btn:hover::after { left: 130%; }
.form-cta-btn.is-pressed {
  transform: translateY(-1px) scale(.99);
  background: linear-gradient(145deg, #d4b489 0%, #b8965a 45%, #9a7d48 100%);
  box-shadow: 0 4px 18px rgba(184,150,90,.45), inset 0 2px 6px rgba(0,0,0,.18);
}

/* ═══ FOOTER ═══ */
footer {
  background: #080806; padding: 1.4rem var(--gutter);
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: .8rem;
  border-top: 1px solid rgba(255,255,255,.04);
}
/* ═══ 全站頁尾（.site-footer 在所有 .page 之外，永遠可見／永遠在 DOM） ═══ */
.site-footer { display: block; padding: clamp(2rem,4vw,2.8rem) var(--gutter) clamp(1.4rem,2.5vw,1.8rem); }
.sf-wrap { max-width: var(--max); margin: 0 auto; }
.sf-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: .8rem 1.6rem; flex-wrap: wrap;
}
.sf-row-main {
  padding-bottom: clamp(.7rem,1.2vw,.85rem);
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.sf-row-legal { padding-top: clamp(.7rem,1.2vw,.85rem); }
.site-footer .social-row { margin-top: 0; }
.sf-row .social-row { margin-left: auto; }
.site-footer .social-link {
  border-color: rgba(255,255,255,.14); color: rgba(255,255,255,.55);
}
html:not(.touch) .site-footer .social-link:hover {
  border-color: var(--gold); color: var(--gold); background: rgba(184,150,90,.12);
}
@media (max-width: 640px) {
  .sf-row { flex-direction: column; align-items: flex-start; gap: .8rem; }
  .sf-row .social-row { margin-left: 0; }
}
.footer-l { font-family: var(--serif); font-size: .9rem; color: rgba(255,255,255,.55); }
.footer-r { font-size: .96rem; color: rgba(255,255,255,.4); letter-spacing: .06em; }
.brokerage { font-size: .78rem; line-height: 1.7; color: rgba(255,255,255,.42); }

/* ═══ SCROLL TO TOP ═══ */
#scroll-progress {
  position: fixed; top: 0; left: 0; z-index: 901;
  height: 2px; width: 0%;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold), var(--gold-lt));
  transition: width .1s linear;
  pointer-events: none;
}
#stt {
  position: fixed; bottom: 1.8rem; right: 1.8rem; z-index: 800;
  width: 46px; height: 46px; border-radius: 50%;
  background: linear-gradient(145deg, #e6cda5 0%, #cdaf85 45%, #b8965a 100%);
  border: 1px solid rgba(255,255,255,.35);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  box-shadow: 0 6px 24px rgba(184,150,90,.45), inset 0 1px 0 rgba(255,255,255,.4);
  transition: opacity .4s var(--ease-lux), transform .4s var(--ease-lux), box-shadow .4s var(--ease-lux);
  overflow: hidden;
}
#stt.visible { opacity: 1; pointer-events: auto; }
html:not(.touch) #stt:hover { transform: translateY(-4px); box-shadow: 0 12px 30px rgba(184,150,90,.55), inset 0 1px 0 rgba(255,255,255,.5); }
#stt svg { width: 14px; height: 14px; stroke: #1a1814; fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; transition: stroke .4s var(--ease-lux); }
html:not(.touch) #stt:hover svg { stroke: var(--obsidian); }

/* ═══ SCROLL REVEAL ═══ */
.sr { opacity: 0; transform: translateY(24px); transition: opacity .9s var(--ease-lux), transform .9s var(--ease-lux); }
.sr.in { opacity: 1; transform: none; }

/* 交易流程卡片浮動入場 */
.tf2-step {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .5s ease, transform .5s ease, box-shadow .2s;
}
.tf2-step.tf2-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ═══════════════════════════════════════
   開場內容入場編排
═══════════════════════════════════════ */
@keyframes hero-enter {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}
@keyframes soft-fade { from { opacity: 0; } to { opacity: 1; } }
body.is-ready #nav { animation: soft-fade 1s var(--ease-lux) both; }
body.is-ready #hero .hero-portrait { animation: soft-fade .8s var(--ease-lux) both; }
body.is-ready #hero .hero-main > *,
body.is-ready #hero .hero-footer > *,
body.is-ready #hero .hero-nums .hero-num-item {
  animation: hero-enter .85s var(--ease-lux) both;
}
body.is-ready #hero .hero-main > *:nth-child(1) { animation-delay: .06s; }
body.is-ready #hero .hero-main > *:nth-child(2) { animation-delay: .14s; }
body.is-ready #hero .hero-main > *:nth-child(3) { animation-delay: .22s; }
body.is-ready #hero .hero-main > *:nth-child(4) { animation-delay: .30s; }
body.is-ready #hero .hero-footer > *:nth-child(2) { animation-delay: .38s; }
body.is-ready #hero .hero-footer > *:nth-child(3) { animation-delay: .46s; }
body.is-ready #hero .hero-nums .hero-num-item:nth-child(1) { animation-delay: .42s; }
body.is-ready #hero .hero-nums .hero-num-item:nth-child(2) { animation-delay: .52s; }
body.is-ready #hero .hero-nums .hero-num-item:nth-child(3) { animation-delay: .62s; }

/* ═══════════════════════════════════════
   ☁ 介面細節優化：捲軸・進度條光暈
═══════════════════════════════════════ */
#scroll-progress { box-shadow: 0 0 10px rgba(184,150,90,.6); }
html { scrollbar-width: thin; scrollbar-color: rgba(184,150,90,.55) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--parchment-warm); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--gold-lt), var(--gold-deep));
  border-radius: 10px; border: 2px solid var(--parchment-warm);
}
html:not(.touch) ::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, var(--gold), var(--gold-deep));
}


  .hx-press{padding:clamp(40px,5vw,60px) 0;background:var(--white);border-bottom:1px solid var(--line)}
  .hx-offer{padding:clamp(40px,5vw,60px) 0;background:var(--parchment)}
  .hx-as{padding:clamp(40px,5vw,60px) 0;background:var(--white);border-top:1px solid var(--line)}
  .hx-press .wrap,.hx-offer .wrap,.hx-as .wrap{max-width:1080px;margin:0 auto;padding-left:clamp(22px,5vw,40px);padding-right:clamp(22px,5vw,40px)}
  .hx-pgrid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(30px,5vw,60px);align-items:center;margin-top:1.6rem}
  .hx-photo{aspect-ratio:5/4;border:1px solid var(--line);background:linear-gradient(160deg,#ece5d8,#e2d9c8);position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center}
  .hx-photo img{width:100%;height:100%;object-fit:cover;display:block}
  .hx-ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem}
  .hx-ph::after{content:"";position:absolute;inset:12px;border:1px solid rgba(184,150,90,.45)}
  .hx-ph svg{width:52px;height:52px;stroke:var(--gold);fill:none;stroke-width:1;opacity:.7;z-index:1}
  .hx-ph span{font-size:11px;letter-spacing:.13em;color:var(--ink3);z-index:1;padding:0 12px;text-align:center}
  .hx-mast{display:flex;align-items:center;gap:14px;margin-bottom:1.1rem;flex-wrap:wrap}
  .hx-mast b{font-family:var(--display);font-size:1.7rem;font-weight:500;color:var(--ink)}
  .hx-mast i{font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-deep);font-style:normal;padding-left:14px;border-left:1px solid var(--line)}
  .hx-ph3{font-family:var(--serif);font-size:clamp(1.2rem,2vw,1.55rem);font-weight:500;line-height:1.4;margin-bottom:1.1rem;color:var(--ink)}
  .hx-quote{padding-left:1.4rem;border-left:2px solid var(--gold);font-family:var(--serif);font-size:1.02rem;font-weight:300;line-height:1.9;color:var(--ink2);margin-bottom:1.3rem}
  .hx-link{display:inline-block;font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-deep);border-bottom:1px solid var(--gold);padding-bottom:3px}
  /* 我能提供什麼 — 上：標題文字（左）＋3D 格局模擬圖（右）；下：四格服務整排 */
  .hx-offer-top{display:flex;align-items:flex-start;justify-content:space-between;gap:clamp(28px,4vw,54px);margin-top:1.4rem}
  .hx-offer-intro{flex:0 0 auto;width:min(56%,620px);display:flex;flex-direction:column;justify-content:center}
  .hx-offer-intro .body-lg{margin-bottom:0}
  .hx-offer-visual{flex:0 0 auto;width:clamp(180px,20vw,260px);aspect-ratio:900/734;position:relative;overflow:hidden;border:1px solid var(--line);background:var(--obsidian);line-height:0}
  .hx-offer-visual img{width:100%;height:100%;object-fit:cover;display:block}   /* 寬高由 JS 依文字區塊高度＋原生比例算好一起設，維持比例不裁切 */
  .hx-offer-visual figcaption{position:absolute;left:0;bottom:0;padding:.5rem .9rem;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.82);background:linear-gradient(to top,rgba(17,16,9,.72),transparent)}
  .hx-caps{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:clamp(28px,4vw,48px)}
  .hx-svc{position:relative;overflow:hidden;background:var(--white);padding:clamp(22px,2.4vw,34px) clamp(18px,2vw,26px);display:flex;flex-direction:column;gap:.75rem;transition:background .45s var(--ease-lux)}
  html:not(.touch) .hx-svc:hover{background:var(--parchment-warm)}
  .hx-svc-num{position:absolute;top:clamp(6px,.8vw,12px);right:clamp(10px,1.2vw,16px);font-family:var(--display);font-style:italic;font-weight:400;font-size:clamp(3rem,4vw,4.2rem);line-height:.8;color:rgba(184,150,90,.13);pointer-events:none;user-select:none;transition:color .45s var(--ease-lux)}
  html:not(.touch) .hx-svc:hover .hx-svc-num{color:rgba(184,150,90,.22)}
  .hx-svc-head{display:flex;align-items:center;gap:.6rem;position:relative}
  .hx-svc-head svg{width:23px;height:23px;flex:0 0 auto;stroke:var(--gold);fill:none;stroke-width:1.15;stroke-linecap:round;stroke-linejoin:round}
  .hx-svc-head h3{font-family:var(--serif);font-size:clamp(1rem,1.3vw,1.14rem);font-weight:500;color:var(--ink);margin:0;letter-spacing:.02em}
  .hx-svc-lead{font-family:var(--serif);font-style:italic;font-size:.88rem;font-weight:300;color:var(--ink2);margin:0;line-height:1.7;position:relative}
  .hx-svc-list{list-style:none;margin:auto 0 0;padding:.85rem 0 0;border-top:1px solid var(--line2);display:grid;grid-template-columns:1fr;gap:.4rem;position:relative}
  .hx-svc-list li{display:flex;align-items:center;gap:.5rem;font-size:.82rem;font-weight:300;color:var(--ink2)}
  .hx-svc-list li::before{content:"";width:12px;height:1px;flex:0 0 auto;background:var(--gold)}
  @media(max-width:820px){.hx-offer-top{flex-direction:column;align-items:stretch;gap:22px}.hx-offer-intro{width:100%}.hx-offer-visual{width:100%!important;height:auto!important;aspect-ratio:900/734}.hx-caps{grid-template-columns:1fr 1fr}}
  @media(max-width:460px){.hx-caps{grid-template-columns:1fr}}
  .hx-asg{display:grid;grid-template-columns:44fr 56fr;gap:clamp(2rem,5vw,4.6rem);align-items:start}
  @media(max-width:820px){.hx-pgrid,.hx-caps,.hx-asg{grid-template-columns:1fr}.hx-asg{gap:2.4rem}}
  

/* ── 青年公園實價登錄頁（字級與對比為長輩調校；深棕灰不刺眼）── */
#yp-market .ypm-about { display:grid; grid-template-columns:minmax(240px,330px) 1fr; gap:clamp(2rem,5vw,4.5rem); align-items:stretch; }
#yp-market .ypm-about-l { display:flex; flex-direction:column; }
#yp-market .ypm-about-title { font-family:'Noto Serif TC',serif; font-weight:500; font-size:clamp(1.7rem,3vw,2.3rem); color:#2e2a22; margin:.5rem 0 1.2rem; line-height:1.35; }
#yp-market .ypm-about-title em { font-style:italic; color:#7a6234; }
#yp-market .ypm-about-facts { flex:1; display:flex; flex-direction:column; justify-content:space-evenly; gap:1rem; border-left:1px solid rgba(184,150,90,.4); padding:1rem 0 1rem 1.2rem; margin-top:.6rem; }
#yp-market .ypm-about-facts b { display:block; font-family:'Noto Sans TC',sans-serif; font-weight:700; font-size:1.35rem; color:#7a6234; line-height:1.3; }
#yp-market .ypm-about-facts span { font-size:.82rem; letter-spacing:.12em; color:#5c574a; }
#yp-market .ypm-feat { display:flex; gap:clamp(1rem,2.5vw,1.8rem); padding:1.7rem 0; border-top:1px solid rgba(184,150,90,.35); }
#yp-market .ypm-feat:first-child { border-top:0; padding-top:.3rem; }
#yp-market .ypm-feat:last-child { padding-bottom:.3rem; }
#yp-market .ypm-feat-no { font-family:'Cormorant Garamond','Noto Serif TC',serif; font-style:italic; font-weight:500; font-size:1.9rem; color:rgba(138,111,60,.5); line-height:1; min-width:2.9rem; padding-top:.15rem; }
#yp-market .ypm-feat-body h3 { font-family:'Noto Serif TC',serif; font-weight:500; font-size:1.16rem; color:#2e2a22; margin:0 0 .55rem; letter-spacing:.05em; }
#yp-market .ypm-feat-body p { font-size:1.02rem; line-height:2; color:#443f33; margin:0; max-width:68ch; text-align:justify; }
@media (max-width:520px){ #yp-market .ypm-feat { flex-direction:column; gap:.55rem; } #yp-market .ypm-feat-no { min-width:0; } }
@media (max-width:820px){ #yp-market .ypm-about { grid-template-columns:1fr; } #yp-market .ypm-about-facts { flex:none; gap:1.1rem; } }
#yp-market .ypm-search-sec { background:var(--parchment-warm,#f2ede3); }
#yp-market .ypm-searchbar { display:flex; align-items:center; gap:.9rem; max-width:620px; margin:1.8rem 0 1.3rem; border-bottom:1px solid rgba(184,150,90,.55); padding-bottom:.7rem; }
#yp-market .ypm-searchbar svg { color:#7a6234; flex-shrink:0; }
#yp-market .ypm-searchbar input { flex:1; min-width:0; border:0; outline:0; background:transparent; font-family:'Noto Serif TC',serif; font-size:1.1rem; color:#2e2a22; letter-spacing:.04em; }
#yp-market .ypm-searchbar input::placeholder { color:#8f8672; }
#yp-market .ypm-pick { display:flex; align-items:center; gap:.9rem; margin-bottom:.6rem; flex-wrap:wrap; }
#yp-market .ypm-pick-label { font-size:.8rem; letter-spacing:.16em; color:#5c574a; }
#yp-market .ypm-select-wrap { position:relative; }
#yp-market #ypm-select { -webkit-appearance:none; appearance:none; font-family:'Noto Serif TC',serif; font-size:1rem; letter-spacing:.05em; color:#2e2a22; background:transparent; border:1px solid rgba(122,98,52,.55); border-radius:0; padding:.55rem 2.6rem .55rem 1.1rem; min-width:min(240px,72vw); cursor:pointer; }
#yp-market .ypm-select-wrap::after { content:""; position:absolute; right:1rem; top:50%; width:8px; height:8px; border-right:1.5px solid #7a6234; border-bottom:1.5px solid #7a6234; transform:translateY(-70%) rotate(45deg); pointer-events:none; }
#yp-market #ypm-select:focus { outline:none; border-color:var(--gold,#B8965A); }
#yp-market .ypm-hint { padding:2.4rem 0 1.6rem; color:#4a463c; font-size:1.02rem; line-height:1.95; font-family:'Noto Serif TC',serif; }
#yp-market .ypm-hide { display:none; }
#yp-market .ypm-comm { margin:2.6rem 0 3.4rem; scroll-margin-top:90px; }
#yp-market .ypm-head { display:flex; flex-wrap:wrap; align-items:baseline; gap:.4rem 1rem; border-bottom:1px solid rgba(184,150,90,.4); padding-bottom:.7rem; margin-bottom:1rem; }
#yp-market .ypm-head h2 { font-family:'Noto Serif TC',serif; font-weight:500; font-size:1.45rem; color:#2e2a22; margin:0; }
#yp-market .ypm-head h2 .ypm-name { font-style:normal; color:#7a6234; margin-right:.3em; }
#yp-market .ypm-switches { display:flex; flex-wrap:wrap; gap:.7rem 1.6rem; align-items:center; }
#yp-market .ypm-addr { font-size:.92rem; color:#4a463c; letter-spacing:.04em; }
#yp-market .ypm-statsrow { display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:1rem; margin-bottom:1.3rem; }
#yp-market .ypm-stats { display:flex; flex-wrap:wrap; gap:1.1rem 2.6rem; }
#yp-market .ypm-stat b { display:block; font-family:'Noto Sans TC',sans-serif; font-weight:700; font-size:1.55rem; color:#7a6234; line-height:1.25; font-variant-numeric:tabular-nums; }
#yp-market .ypm-stat span { font-size:.84rem; letter-spacing:.1em; color:#5c574a; }
#yp-market .ypm-switch { display:inline-flex; align-items:center; gap:.55rem; cursor:pointer; font-size:.9rem; letter-spacing:.08em; color:#3b372c; user-select:none; -webkit-user-select:none; }
#yp-market .ypm-switch input { display:none; }
#yp-market .ypm-track { width:36px; height:20px; border-radius:20px; background:#b5ab97; position:relative; transition:background .25s; flex-shrink:0; }
#yp-market .ypm-track::after { content:""; position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:50%; background:#fff; transition:left .25s; box-shadow:0 1px 3px rgba(0,0,0,.25); }
#yp-market .ypm-switch input:checked + .ypm-track { background:var(--gold,#B8965A); }
#yp-market .ypm-switch input:checked + .ypm-track::after { left:18px; }
#yp-market .ypm-cards { display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; }
@media (max-width:680px){ #yp-market .ypm-cards { grid-template-columns:1fr; } }
#yp-market .ypm-card { background:#fff; border:1px solid rgba(17,16,9,.08); box-shadow:0 8px 24px rgba(17,16,9,.05); overflow:hidden; }
#yp-market .ypm-card.sp { background:#efece4; }
#yp-market .ypm-card.sp .ypm-card-unit, #yp-market .ypm-card.sp .ypm-price { color:#6e6a5e; }
#yp-market .ypm-card-spbn { background:rgba(17,16,9,.07); color:#55514a; font-size:.8rem; letter-spacing:.16em; text-align:center; padding:.35rem; }
#yp-market .ypm-card-top { display:flex; justify-content:space-between; align-items:baseline; padding:.9rem 1rem .3rem; }
#yp-market .ypm-card-date { font-family:'Noto Sans TC',sans-serif; font-size:.98rem; font-weight:500; color:#3b372c; letter-spacing:.04em; }
#yp-market .ypm-card-unit { font-family:'Noto Sans TC',sans-serif; font-weight:700; font-size:1.32rem; color:#7a6234; line-height:1; font-variant-numeric:tabular-nums; }
#yp-market .ypm-card-unit i { font-style:normal; font-weight:400; font-size:.78rem; color:#5c574a; margin-left:.3em; letter-spacing:.06em; }
#yp-market .ypm-card-addr { display:flex; gap:.45rem; align-items:center; padding:.2rem 1rem .8rem; font-size:.96rem; color:#3b372c; }
#yp-market .ypm-card-addr svg { color:#7a6234; flex-shrink:0; }
#yp-market .ypm-card-grid { display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid rgba(17,16,9,.07); }
#yp-market .ypm-card-grid > div { padding:.6rem .3rem .65rem; text-align:center; border-left:1px solid rgba(17,16,9,.07); min-width:0; }
#yp-market .ypm-card-grid > div:first-child { border-left:0; }
#yp-market .ypm-card-grid span { display:block; font-size:.78rem; letter-spacing:.06em; color:#5c574a; margin-bottom:.2rem; white-space:nowrap; }
#yp-market .ypm-card-grid b { font-size:1.02rem; font-weight:600; color:#33302a; font-variant-numeric:tabular-nums; white-space:nowrap; }
#yp-market .ypm-card-grid b.ypm-price { color:#7a6234; font-weight:700; }
#yp-market .ypm-card-note { padding:.5rem 1rem .6rem; font-size:.86rem; color:#4a463c; border-top:1px dashed rgba(184,150,90,.35); line-height:1.75; }
#yp-market .ypm-flag { color:#7a6234; cursor:help; font-size:.7em; vertical-align:super; margin-left:.25em; }
#yp-market .ypm-pager { display:flex; justify-content:center; align-items:center; gap:.3rem; margin-top:1.4rem; flex-wrap:wrap; }
#yp-market .ypm-pager button { font-family:'Noto Sans TC',sans-serif; font-size:.9rem; min-width:38px; height:38px; padding:0 .55rem; background:transparent; border:1px solid transparent; color:#7a6234; cursor:pointer; transition:background .25s,color .25s,border-color .25s; }
#yp-market .ypm-pg-num.on { border-color:rgba(122,98,52,.5); color:#5c4a26; font-weight:600; }
html:not(.touch) #yp-market .ypm-pager button:not([disabled]):hover { background:rgba(184,150,90,.12); }
#yp-market .ypm-pager button[disabled] { color:#c9c2af; cursor:default; }
#yp-market .ypm-pg-arrow { font-size:1.25rem; line-height:1; }
#yp-market .ypm-note { font-size:.88rem; color:#4a463c; line-height:1.9; margin-top:2.6rem; border-top:1px solid rgba(17,16,9,.08); padding-top:1.1rem; }


@media print {
  /* 只列印物件詳細頁內容 */
  body > *:not(#listing-detail) { display:none !important; }
  #listing-detail { display:block !important; }
  #listing-detail .ld-topbar,
  #listing-detail footer,
  #listing-detail .art-foot,
  #listing-detail .cta-band { display:none !important; }
  #listing-detail .page { display:block !important; padding:0 !important; }
  nav, .drawer, #card-lightbox, #ld-lightbox, #sc-lightbox { display:none !important; }
  .sec-md { background:white !important; padding:1.5rem !important; }
  .ld-stage { aspect-ratio:16/10; break-inside:avoid; }
  .ld-quad { grid-template-columns:1fr 1fr; }
  @page { margin:1.2cm; size:A4; }
}