:root {
  --bg:#FFFFFF; --surface:#FFFFFF; --surface-2:#F7F8FA;
  --ink:#14161A; --ink-2:#3B424E; --muted:#6B7280;
  --line:#E4E7EB;
  /* Boutik 藍：主要行動 */
  --brand:#3083BE;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px;
  --r-card:16px; --r-ctl:12px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  /* 固定底部條的高度，內容不被蓋住 */
  padding: 0 0 76px;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.7 -apple-system, "Segoe UI", "Noto Sans TC", "PingFang TC", sans-serif;
}
main { max-width: 720px; margin: 0 auto; padding: var(--s5) var(--s4); }
a { color: var(--brand); }
h1 { font-size: 26px; line-height: 1.35; margin: 0 0 var(--s3); }
h2 { font-size: 17px; margin: var(--s6) 0 var(--s3); }
.byline { display: flex; align-items: center; gap: var(--s2); margin: 0 0 var(--s5); color: var(--muted); font-size: 14px; }
.byline img { width: 32px; height: 32px; border-radius: 999px; object-fit: cover; background: var(--surface-2); }
/* 正文純文字：⛔ 不做自動連結（見 README「為什麼不自動連結」） */
.post-body { white-space: pre-wrap; word-break: break-word; margin: 0 0 var(--s5); }
figure { margin: 0 0 var(--s4); }
figure img { width: 100%; height: auto; border-radius: var(--r-card); background: var(--surface-2); display: block; }
figcaption { color: var(--muted); font-size: 13px; margin-top: var(--s2); }
.tag-row { display: flex; flex-wrap: wrap; gap: var(--s2); margin: 0 0 var(--s5); padding: 0; list-style: none; }
.tag-row li { background: var(--surface-2); border-radius: 999px; padding: 2px var(--s3); font-size: 13px; color: var(--ink-2); }
.card-list { display: grid; gap: var(--s3); padding: 0; margin: 0; list-style: none; }
.card {
  display: flex; gap: var(--s3); align-items: center;
  border: 1px solid var(--line); border-radius: var(--r-card);
  padding: var(--s3); text-decoration: none; color: inherit;
}
.card img { width: 72px; height: 72px; border-radius: var(--r-ctl); object-fit: cover; background: var(--surface-2); }
.card-title { font-weight: 600; }
.card-price { color: var(--ink-2); font-size: 14px; }
.card-off { color: var(--muted); font-size: 13px; }
/* 公開名片頁：頭貼大、品牌退次要（業主：名片的主角是人不是 Boutik） */
.profile .byline { margin-bottom: var(--s3); }
.profile .byline img { width: 64px; height: 64px; }
.handle { color: var(--muted); margin: calc(var(--s1) * -1) 0 var(--s3); }
/* 簡介最多三行，超過就收起來（⛔ 內容沒有被刪掉，只是不佔滿整頁） */
.profile-bio {
  white-space: pre-wrap; word-break: break-word; margin: 0 0 var(--s4);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.comment { border-top: 1px solid var(--line); padding: var(--s3) 0; }
.comment-head { display: flex; align-items: center; gap: var(--s2); color: var(--muted); font-size: 13px; }
.comment-head img { width: 24px; height: 24px; border-radius: 999px; object-fit: cover; background: var(--surface-2); }
.comment-body { white-space: pre-wrap; word-break: break-word; margin: var(--s1) 0 0; }
.empty { color: var(--muted); }
.cta {
  position: fixed; left: 0; right: 0; bottom: 0;
  display: flex; gap: var(--s2); justify-content: center; align-items: center;
  padding: var(--s3) var(--s4); background: rgba(255,255,255,0.96);
  border-top: 1px solid var(--line);
}
.cta a { display: inline-block; padding: 10px var(--s5); border-radius: 999px; text-decoration: none; font-weight: 600; }
.cta-open { background: var(--brand); color: #fff; }
.cta-store { border: 1px solid var(--line); color: var(--ink-2); }