/* ── 在台中找家 — 設計 Tokens ─────────────────────────────── */
:root {
  --bg:        #FAF6EF;
  --bg-2:      #F4ECDF;
  --surface:   #FFFFFF;
  --ink:       #2A1F14;
  --ink-2:     #6B5D4B;
  --ink-3:     #998A75;
  --ink-4:     #C3B59E;
  --border:    #E5D9C4;
  --border-2:  #EFE6D3;

  --gold:      #EDC23A;
  --gold-deep: #B8902A;
  --gold-soft: #FAEBA8;
  --gold-tint: #FDF5D8;

  --drop:      #B84A2C;
  --drop-soft: #F4DBD0;

  --shadow-1: 0 1px 2px rgba(42,31,20,.04), 0 1px 1px rgba(42,31,20,.03);
  --shadow-2: 0 4px 16px rgba(42,31,20,.06), 0 1px 4px rgba(42,31,20,.04);
  --shadow-3: 0 12px 40px rgba(42,31,20,.10), 0 4px 12px rgba(42,31,20,.06);

  --font-display: "Noto Serif TC", "Source Han Serif TC", "PingFang TC", serif;
  --font-body:    "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --radius-sm: 6px;
  --radius:    10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ── 圖片留空樣式（尚未匯入照片時） ─────────────────────── */
.placeholder {
  position: relative;
  background:
    repeating-linear-gradient(45deg,
      var(--bg-2) 0px, var(--bg-2) 10px,
      var(--border-2) 10px, var(--border-2) 11px);
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: var(--ink-3);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .05em;
}
.placeholder::after {
  content: attr(data-label);
  background: var(--bg);
  padding: 4px 8px;
  border-radius: 4px;
  border: 1px solid var(--border);
}

.prop-photo {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  border-radius: inherit;
}

/* 頭像留空 */
.avatar-ph {
  background: linear-gradient(135deg, var(--gold-tint), var(--bg-2));
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  color: var(--gold-deep);
  font-weight: 600;
}

/* utility */
.mono  { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.serif { font-family: var(--font-display); }

/* ── 進頁動畫 ──────────────────────────────────────────── */
@keyframes page-enter {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
.page-transition {
  animation: page-enter .7s cubic-bezier(.2, .8, .2, 1);
}
@keyframes pulse-dot { 0%, 100% { opacity: 1 } 50% { opacity: .3 } }
.pulse-dot { animation: pulse-dot 1.5s infinite; }

/* ── 響應式版面（class 由元件掛上，覆寫桌機 inline 樣式） ── */
.cards-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.cards-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }

@media (max-width: 1024px) {
  .cards-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .detail-grid { grid-template-columns: 1fr !important; }
  .footer-grid { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 720px) {
  .cards-grid, .cards-grid-2 { grid-template-columns: 1fr !important; }
  .two-col { grid-template-columns: 1fr !important; }
  .searchbar { flex-wrap: wrap; }
  .searchbar > div { flex: 1 1 40% !important; border-right: none !important; }
  .searchbar > button { flex: 1 1 100%; padding: 12px 0 !important; justify-content: center; }
  .gallery-grid { grid-template-columns: 1fr !important; height: auto !important; }
  .gallery-grid > div:last-child { display: none; }
  .specs-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .specs-grid > div { border-right: none !important; border-bottom: 1px solid var(--border); }
  .footer-grid { grid-template-columns: 1fr !important; }
  .topnav { flex-wrap: wrap; padding: 12px 16px !important; gap: 10px; }
  .topnav .nav-phone { display: none !important; }
  .hero-h1 { font-size: 40px !important; }
  section { padding-left: 20px !important; padding-right: 20px !important; }
}

/* file:// 提示 */
#file-protocol-hint {
  position: fixed; inset: 0; z-index: 9999;
  background: var(--bg);
  display: flex; align-items: center; justify-content: center;
  padding: 32px; text-align: center;
  font-size: 15px; line-height: 2; color: var(--ink);
}