/* michael-map — style.css（v2）
 * 手寫實現 Michael 個人 UI/UX 規範 v1.0 視覺語言（純 CSS、零框架、零 CDN）。
 * v2：地區代表色、字級可調(--fs)、縣市 chip 固定高度修 bug + 0 張不變灰、
 *     母頁來源標、評分徽章、extras 展開。
 */

/* ── Design tokens（淺色為預設）──────────────────────────── */
:root {
  --fs: 1;                               /* 內容字級縮放（字級控件調整）*/

  --bg: #fdfdfc;
  --halo-top: rgba(99, 102, 241, 0.08);
  --halo-bottom: rgba(236, 72, 153, 0.04);

  --bar-bg: rgba(255, 255, 255, 0.42);
  --card-bg: rgba(255, 255, 255, 0.55);
  --card-bg-hover: rgba(255, 255, 255, 0.78);

  --hair: rgba(0, 0, 0, 0.08);
  --hair-strong: rgba(0, 0, 0, 0.12);
  --border-el: #d4d4d4;

  --t1: #171717;
  --t2: #404040;
  --t3: #737373;
  --t4: #a3a3a3;

  --accent: #2563eb;
  --accent-2: #3b82f6;
  --accent-soft: rgba(59, 130, 246, 0.12);
  --accent-ring: rgba(59, 130, 246, 0.30);

  --chip-bg: rgba(0, 0, 0, 0.045);
  --chip-tx: #525252;
  --go: #16a34a;
  --go-soft: rgba(22, 163, 74, 0.12);
  --pet: #d97706;
  --pet-soft: rgba(217, 119, 6, 0.12);
  --star: #f59e0b;

  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-hover: 0 8px 24px rgba(0, 0, 0, 0.10);
  --ease-apple: cubic-bezier(0.32, 0.72, 0, 1);

  /* 類別色塊（無圖封面）*/
  --tile-美食: linear-gradient(135deg, #fde4d0, #f7c8b0);
  --tile-旅遊: linear-gradient(135deg, #cfe9e2, #a9d7cf);
  --tile-住宿: linear-gradient(135deg, #d9e2f5, #b9c9ec);
  --tile-其他: linear-gradient(135deg, #e6e0f0, #cfc4e4);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #121212;
    --halo-top: rgba(99, 102, 241, 0.15);
    --halo-bottom: rgba(236, 72, 153, 0.08);
    --bar-bg: rgba(0, 0, 0, 0.22);
    --card-bg: rgba(255, 255, 255, 0.035);
    --card-bg-hover: rgba(255, 255, 255, 0.07);
    --hair: rgba(255, 255, 255, 0.06);
    --hair-strong: rgba(255, 255, 255, 0.10);
    --border-el: #404040;
    --t1: #f5f5f5;
    --t2: #d4d4d4;
    --t3: #a3a3a3;
    --t4: #525252;
    --accent: #60a5fa;
    --accent-2: #3b82f6;
    --accent-soft: rgba(59, 130, 246, 0.16);
    --chip-bg: rgba(255, 255, 255, 0.06);
    --chip-tx: #d4d4d4;
    --go: #4ade80;
    --go-soft: rgba(74, 222, 128, 0.14);
    --pet: #fbbf24;
    --pet-soft: rgba(251, 191, 36, 0.14);
    --star: #fbbf24;
    --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-hover: 0 8px 28px rgba(0, 0, 0, 0.5);
    --tile-美食: linear-gradient(135deg, #4a352b, #5c4033);
    --tile-旅遊: linear-gradient(135deg, #223d38, #2d4f48);
    --tile-住宿: linear-gradient(135deg, #263248, #30425c);
    --tile-其他: linear-gradient(135deg, #332d44, #423a56);
  }
}

:root[data-theme="dark"] {
  --bg: #121212;
  --halo-top: rgba(99, 102, 241, 0.15);
  --halo-bottom: rgba(236, 72, 153, 0.08);
  --bar-bg: rgba(0, 0, 0, 0.22);
  --card-bg: rgba(255, 255, 255, 0.035);
  --card-bg-hover: rgba(255, 255, 255, 0.07);
  --hair: rgba(255, 255, 255, 0.06);
  --hair-strong: rgba(255, 255, 255, 0.10);
  --border-el: #404040;
  --t1: #f5f5f5;
  --t2: #d4d4d4;
  --t3: #a3a3a3;
  --t4: #525252;
  --accent: #60a5fa;
  --accent-2: #3b82f6;
  --accent-soft: rgba(59, 130, 246, 0.16);
  --chip-bg: rgba(255, 255, 255, 0.06);
  --chip-tx: #d4d4d4;
  --go: #4ade80;
  --go-soft: rgba(74, 222, 128, 0.14);
  --pet: #fbbf24;
  --pet-soft: rgba(251, 191, 36, 0.14);
  --star: #fbbf24;
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-hover: 0 8px 28px rgba(0, 0, 0, 0.5);
  --tile-美食: linear-gradient(135deg, #4a352b, #5c4033);
  --tile-旅遊: linear-gradient(135deg, #223d38, #2d4f48);
  --tile-住宿: linear-gradient(135deg, #263248, #30425c);
  --tile-其他: linear-gradient(135deg, #332d44, #423a56);
}

/* ── Reset / base ─────────────────────────────────────────── */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }

body::before {
  content: "";
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(ellipse 80% 50% at 50% -10%, var(--halo-top), transparent 60%),
    radial-gradient(ellipse 80% 50% at 50% 110%, var(--halo-bottom), transparent 60%);
}

body {
  min-height: 100%;
  background: var(--bg);
  color: var(--t2);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI",
    "Microsoft JhengHei", "PingFang TC", "Noto Sans TC", sans-serif;
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  line-height: 1.55;
}

.tnum { font-variant-numeric: tabular-nums; }

/* ── 標題列（Layer 2）─────────────────────────────────────── */
.topbar {
  position: sticky; top: 0; z-index: 30;
  background: var(--bar-bg);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border-bottom: 1px solid var(--hair);
}
.topbar-inner {
  max-width: 1200px; margin: 0 auto; height: 56px; padding: 0 20px;
  display: flex; align-items: center; gap: 12px;
}
.brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.brand-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: linear-gradient(135deg, #60a5fa, #4f46e5);
  box-shadow: 0 0 8px rgba(99, 102, 241, 0.6); flex: none;
}
.brand-name {
  font-size: 15px; font-weight: 700; color: var(--t1);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.brand-count {
  font-size: 12px; font-weight: 600; color: var(--accent);
  background: var(--accent-soft); padding: 2px 8px; border-radius: 999px;
  font-variant-numeric: tabular-nums; flex: none;
}
.topbar-tools { margin-left: auto; display: flex; align-items: center; gap: 8px; flex: none; }
.fs-ctrl { display: inline-flex; gap: 2px; padding: 2px; background: var(--chip-bg); border-radius: 9px; }
.fs-ctrl button {
  border: none; background: transparent; cursor: pointer; color: var(--t3);
  border-radius: 6px; padding: 3px 7px; line-height: 1; transition: all 150ms ease;
  font-family: inherit;
}
.fs-ctrl #fs-dec { font-size: 12px; }
.fs-ctrl #fs-reset { font-size: 14px; font-weight: 600; }
.fs-ctrl #fs-inc { font-size: 16px; }
.fs-ctrl button:hover { color: var(--t1); background: var(--card-bg-hover); }
.fs-ctrl button:active { transform: scale(0.92); }
.theme-btn {
  flex: none; width: 36px; height: 36px; border-radius: 9px;
  border: 1px solid transparent; background: transparent; cursor: pointer;
  font-size: 17px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  transition: background 150ms ease, transform 150ms ease;
}
.theme-btn:hover { background: var(--chip-bg); }
.theme-btn:active { transform: scale(0.94); }

/* ── 版心 ─────────────────────────────────────────────────── */
.wrap { max-width: 1200px; margin: 0 auto; padding: 20px 20px 40px; }

/* ── 縣市分區入口（地區代表色，更顯眼）─────────────────────── */
.regions { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.region-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* 每個地區一個代表色 */
.region-北部 { --rc: #3b82f6; }
.region-中部 { --rc: #10b981; }
.region-南部 { --rc: #f59e0b; }
.region-花東 { --rc: #a855f7; }
.region-離島 { --rc: #06b6d4; }

.region-label {
  flex: none; min-width: 62px;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 700; color: var(--rc);
  padding: 4px 10px 4px 8px; border-radius: 8px;
  background: color-mix(in srgb, var(--rc) 12%, transparent);
  border-left: 3px solid var(--rc);
}
.county-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.county-chip {
  height: 30px; flex: none;
  font-size: calc(13px * var(--fs)); font-weight: 500; color: var(--t2);
  background: var(--card-bg); border: 1px solid var(--hair);
  border-radius: 999px; padding: 0 12px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  transition: all 150ms ease;
}
.county-chip:hover { border-color: var(--rc); color: var(--t1); background: var(--card-bg-hover); }
.county-chip .cc-num { font-size: 11px; color: var(--t4); font-variant-numeric: tabular-nums; }
.county-chip.active {
  background: var(--rc); border-color: transparent; color: #fff;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--rc) 40%, transparent);
}
.county-chip.active .cc-num { color: rgba(255, 255, 255, 0.85); }
/* 0 張：不變灰淡化，只是數字弱化、仍可點（點了顯示空狀態）*/
.county-chip.zero { color: var(--t3); }
.county-chip.zero .cc-num { opacity: 0.5; }

/* ── 篩選列 ───────────────────────────────────────────────── */
.filters {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
  padding: 12px 14px; margin-bottom: 8px;
  background: var(--bar-bg); border: 1px solid var(--hair); border-radius: 14px;
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
}
.filter-group { display: inline-flex; gap: 4px; padding: 3px; background: var(--chip-bg); border-radius: 10px; }
.seg-btn {
  font-size: calc(13px * var(--fs)); font-weight: 500; color: var(--t3);
  background: transparent; border: none; cursor: pointer;
  padding: 5px 11px; border-radius: 7px;
  transition: all 150ms ease; white-space: nowrap; font-family: inherit;
}
.seg-btn:hover { color: var(--t1); }
.seg-btn.active { background: var(--card-bg-hover); color: var(--accent); font-weight: 600; box-shadow: var(--shadow-card); }

.pet-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: calc(13px * var(--fs)); color: var(--t2); cursor: pointer; user-select: none;
}
.pet-toggle input { width: 15px; height: 15px; accent-color: var(--pet); cursor: pointer; }

.search-box {
  margin-left: auto; position: relative; display: inline-flex; align-items: center;
  min-width: 220px; flex: 1 1 220px; max-width: 340px;
}
.search-ico { position: absolute; left: 11px; font-size: 13px; opacity: 0.6; pointer-events: none; }
#search {
  width: 100%; height: 36px; padding: 0 32px;
  font-size: calc(14px * var(--fs)); color: var(--t1);
  background: var(--card-bg); border: 1px solid var(--border-el);
  border-radius: 10px; outline: none;
  transition: border-color 150ms ease, box-shadow 150ms ease; font-family: inherit;
}
#search::placeholder { color: var(--t4); }
#search:focus { border-color: var(--accent-2); box-shadow: 0 0 0 3px var(--accent-ring); }
.search-clear {
  position: absolute; right: 8px; width: 20px; height: 20px;
  border: none; border-radius: 50%; cursor: pointer;
  background: var(--chip-bg); color: var(--t3); font-size: 15px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
}
.search-clear:hover { color: var(--t1); }

/* ── 結果列 ───────────────────────────────────────────────── */
.result-bar { display: flex; align-items: center; gap: 10px; padding: 6px 4px 14px; min-height: 20px; }
.result-count { font-size: 12px; color: var(--t3); font-variant-numeric: tabular-nums; }
.reset-btn {
  font-size: 12px; color: var(--accent); background: transparent; border: none;
  cursor: pointer; padding: 2px 4px; text-decoration: underline; text-underline-offset: 2px;
}

/* ── 卡片牆 ───────────────────────────────────────────────── */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.card {
  background: var(--card-bg); border: 1px solid var(--hair);
  border-radius: 16px; overflow: hidden; box-shadow: var(--shadow-card); cursor: pointer;
  transition: transform 200ms var(--ease-apple), box-shadow 200ms ease,
    border-color 200ms ease, background 200ms ease;
  display: flex; flex-direction: column;
  animation: card-in 300ms ease both;
}
@keyframes card-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); border-color: var(--hair-strong); background: var(--card-bg-hover); }

.card-media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card-tile { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 44px; }
.card-tile.美食 { background: var(--tile-美食); }
.card-tile.旅遊 { background: var(--tile-旅遊); }
.card-tile.住宿 { background: var(--tile-住宿); }
.card-tile.其他 { background: var(--tile-其他); }
.card-imgcount {
  position: absolute; right: 8px; bottom: 8px; font-size: 11px; color: #fff;
  background: rgba(0, 0, 0, 0.5); padding: 2px 7px; border-radius: 999px;
  backdrop-filter: blur(4px); font-variant-numeric: tabular-nums;
}

.card-body { padding: 13px 14px 14px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.card-title { font-size: calc(15px * var(--fs)); font-weight: 700; color: var(--t1); line-height: 1.35; }
.badges { display: flex; flex-wrap: wrap; gap: 5px; }
.badge {
  font-size: calc(11px * var(--fs)); font-weight: 500; line-height: 1;
  padding: 4px 8px; border-radius: 999px; background: var(--chip-bg); color: var(--chip-tx);
  display: inline-flex; align-items: center; gap: 4px;
}
.badge.county { color: var(--accent); background: var(--accent-soft); }
.badge.status-去過 { color: var(--go); background: var(--go-soft); }
.badge.status-想去 { color: var(--accent); background: var(--accent-soft); }
.badge.pet { color: var(--pet); background: var(--pet-soft); }
.badge.rating { color: var(--star); background: color-mix(in srgb, var(--star) 14%, transparent); }

.card-summary { font-size: calc(13px * var(--fs)); color: var(--t3); line-height: 1.5; }

/* 母頁來源標 */
.card-source {
  font-size: calc(11px * var(--fs)); color: var(--t4);
  display: inline-flex; align-items: center; gap: 4px;
}

/* 展開區 */
.card-detail { display: none; flex-direction: column; gap: 10px; margin-top: 2px; }
.card.open .card-detail { display: flex; animation: detail-in 250ms ease both; }
@keyframes detail-in { from { opacity: 0; } to { opacity: 1; } }
.card.open { cursor: default; }

.detail-imgs { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 6px; }
.detail-imgs img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; }
.detail-extras { display: flex; flex-direction: column; gap: 4px; }
.extra-row { font-size: calc(12px * var(--fs)); color: var(--t2); line-height: 1.5; }
.extra-row .ek { color: var(--t4); margin-right: 5px; }
.detail-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.tag { font-size: calc(11px * var(--fs)); color: var(--t3); background: var(--chip-bg); padding: 3px 7px; border-radius: 6px; }

.maps { display: flex; flex-direction: column; gap: 6px; }
.map-btn {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: calc(13px * var(--fs)); font-weight: 500; color: #fff;
  text-decoration: none; padding: 8px 12px; border-radius: 10px;
  background: linear-gradient(to bottom, var(--accent-2), var(--accent));
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.15);
  transition: transform 200ms ease, box-shadow 200ms ease, filter 200ms ease;
}
.map-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px var(--accent-ring); filter: brightness(1.05); }
.map-btn:active { transform: scale(0.98); }
.map-btn .mb-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.map-btn.solo { align-self: flex-start; }

.card-toggle { font-size: calc(12px * var(--fs)); color: var(--t4); text-align: center; padding-top: 2px; user-select: none; }

/* ── 空狀態 ───────────────────────────────────────────────── */
.empty { text-align: center; padding: 60px 20px; color: var(--t3); }
.empty-ico { font-size: 44px; opacity: 0.5; margin-bottom: 10px; }
.empty-title { font-size: 16px; font-weight: 600; color: var(--t2); }
.empty-sub { font-size: 13px; color: var(--t4); margin-top: 4px; }

/* ── 頁尾 ─────────────────────────────────────────────────── */
.foot { text-align: center; padding: 24px; font-size: 11px; color: var(--t4); border-top: 1px solid var(--hair); }

/* ── RWD ──────────────────────────────────────────────────── */
@media (max-width: 560px) {
  .wrap { padding: 14px 14px 32px; }
  .topbar-inner { padding: 0 14px; gap: 8px; }
  .brand-name { font-size: 14px; }
  .cards { grid-template-columns: 1fr; gap: 13px; }
  .search-box { margin-left: 0; max-width: none; flex-basis: 100%; order: 3; }
  .filters { gap: 8px 10px; }
  .region-label { min-width: 54px; font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}