: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); }
/* 藍勾（帳號認證第 4 批）：系統控制的固定位置（第 6 批起名片貼在 @帳號 旁；只有名字的作者列在名字旁），跟著字級走（em），顏色＝Boutik 藍（與 App 的勾同一顆） */
.vbadge { display: inline-flex; vertical-align: -0.12em; margin-left: 0.25em; color: var(--brand); flex: 0 0 auto; }
.vbadge svg { width: 1em; height: 1em; display: block; }
.byline .vbadge { margin-left: 0; }
/* 正文純文字：⛔ 不做自動連結（見 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); }
/*
 * 「在 App 開啟」彈窗（open-app.ts）。結構照 Threads 分享頁：置中白卡、圓角、
 * icon、標題、副標、主按鈕、次按鈕、右上角關閉、背景變暗但內容仍看得見。
 * ⚠️ 沒有 [open] 的 <dialog> 由瀏覽器預設隱藏 ⇒ ⛔ 不要在這裡寫 display 讓它無條件出現。
 * 主按鈕是 Boutik 藍（主要行動例外，業主 2026-09-11 的分界線）。
 * 深色模式只作用在彈窗本身（全站目前沒有深色版，另案）。
 */
.oas {
  --oas-bg:#FFFFFF; --oas-ink:#14161A; --oas-muted:#6B7280; --oas-line:#E4E7EB; --oas-close-bg:#F2F3F5;
  border: 0; padding: 0; margin: auto;
  width: min(360px, calc(100% - 32px)); max-height: calc(100% - 32px); overflow: auto;
  border-radius: 24px; background: var(--oas-bg); color: var(--oas-ink);
  box-shadow: 0 16px 48px rgba(0,0,0,0.22);
}
.oas::backdrop { background: rgba(0,0,0,0.45); }
.oas-card { position: relative; padding: 36px 24px 20px; text-align: center; }
.oas-close {
  position: absolute; top: 10px; right: 10px; width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: 999px; background: var(--oas-close-bg); color: var(--oas-ink);
  cursor: pointer; padding: 0;
}
.oas-icon {
  display: block; width: 72px; height: 72px; margin: 0 auto var(--s4);
  border-radius: 18px; border: 1px solid var(--oas-line); background: #FFFFFF;
}
.oas-title { font-size: 20px; line-height: 1.35; font-weight: 700; margin: 0 0 var(--s2); }
.oas-desc { font-size: 15px; line-height: 1.6; color: var(--oas-muted); margin: 0 0 var(--s5); }
.oas-actions { display: grid; gap: 10px; }
.oas-open, .oas-store, .oas-web {
  display: flex; align-items: center; justify-content: center; min-height: 48px;
  border-radius: 14px; font: inherit; font-size: 16px; font-weight: 600; text-decoration: none;
}
.oas-open { background: var(--brand); color: #FFFFFF; }
.oas-store { border: 1px solid var(--oas-line); color: var(--oas-ink); }
.oas-web { border: 0; background: transparent; color: var(--oas-muted); font-weight: 500; cursor: pointer; min-height: 44px; }
.oas a:focus-visible, .oas button:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
/* 關閉後焦點回到標題（tabindex=-1，不在 Tab 順序裡）：VoiceOver 照讀，但不畫框 */
h1[tabindex="-1"]:focus { outline: none; }
@media (prefers-color-scheme: dark) {
  .oas { --oas-bg:#1C1D21; --oas-ink:#F2F3F5; --oas-muted:#A3A9B3; --oas-line:#34373E; --oas-close-bg:#2A2C31; }
  .oas::backdrop { background: rgba(0,0,0,0.6); }
}
/*
 * 條款公開網頁（legal.ts，2026-09-30 條款審查 S-1）。長文閱讀優先：字級不縮、段距放寬；
 * 條文⛔ 不用 pre-wrap（條文的換行是段落，不是排版），段內換行由 <br> 保留。
 * 列印樣式：只印條文本身（導覽與下載列不印），給「列印 → 儲存為 PDF」用。
 */
.legal { max-width: 760px; }
.legal-lead { color: var(--ink-2); }
.legal-list { list-style: none; padding: 0; margin: 0 0 var(--s5); }
.legal-row { border-bottom: 1px solid var(--line); padding: var(--s3) 0; }
.legal-row > a { font-weight: 600; font-size: 17px; text-decoration: none; }
.legal-meta { color: var(--muted); font-size: 14px; margin: var(--s1) 0 var(--s3); }
.legal-badge { display: inline-block; margin-left: var(--s2); padding: 0 var(--s2); border-radius: 999px; background: var(--surface-2); color: var(--ink-2); font-size: 12px; }
.legal-nav { border: 1px solid var(--line); border-radius: var(--r-card); padding: var(--s3) var(--s4); margin: 0 0 var(--s5); font-size: 14px; }
.legal-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s1) var(--s4); }
.legal-nav a { text-decoration: none; }
.legal-nav a.active { font-weight: 700; color: var(--ink); }
.legal-nav-title { margin: 0 0 var(--s2); font-weight: 600; }
.legal-nav-sub { margin: var(--s3) 0 var(--s1); color: var(--muted); font-size: 13px; }
.legal-notice { border-left: 4px solid var(--brand); background: var(--surface-2); padding: var(--s3) var(--s4); border-radius: var(--r-ctl); margin: 0 0 var(--s4); }
.legal-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); margin: 0 0 var(--s5); }
.legal-download { display: inline-block; padding: 8px var(--s4); border-radius: 999px; background: var(--brand); color: #FFFFFF; text-decoration: none; font-weight: 600; }
.legal-print { color: var(--muted); font-size: 13px; }
.legal-doc h2 { font-size: 18px; }
.legal-doc h3 { font-size: 16px; margin: var(--s5) 0 var(--s2); }
.legal-doc p, .legal-doc li { word-break: break-word; }
.legal-foot { color: var(--muted); font-size: 14px; }
@media print {
  body { padding: 0; }
  .legal-nav, .legal-actions, .cta { display: none; }
  .legal-notice { border: 1px solid #999; }
}

main.pf { max-width: 560px; padding: 0 0 var(--s5); }
.pf-head { position: relative; padding-bottom: 46px; }
.pf-cover {
  height: 210px; overflow: hidden;
  background: linear-gradient(135deg, var(--ink), var(--surface-2));
}
.pf-cover img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 0; }
.pf-avatar {
  position: absolute; left: 50%; bottom: 0;
  width: 92px; height: 92px;
  margin-left: -46px;
  border-radius: 999px; border: 4px solid #fff;
  object-fit: cover; background: var(--surface-2); display: block;
}
.pf-identity { padding: 0 24px; text-align: center; }
.pf-name {
  font-size: 20px; font-weight: 700; line-height: 1.3;
  color: var(--ink); margin: 0;
}
.pf-handle {
  font-size: 13px; color: var(--muted);
  margin: 6px 0 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pf-bio {
  font-size: 15px; line-height: 1.5; color: var(--ink-2);
  margin: 6px 0 0;
  white-space: pre-wrap; word-break: break-word;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.pf-links {
  list-style: none; margin: 12px 0 0; padding: 0;
  display: grid; gap: 8px; text-align: left;
}
.pf-link {
  display: block; text-decoration: none; color: inherit;
  padding: 10px 16px;
  border: 1px solid var(--line); border-radius: 14px;
}
.pf-link-label {
  display: block; font-size: 15px; font-weight: 600; color: var(--ink);
  line-height: 1.35; overflow-wrap: anywhere;
}
/* 真實網域：⛔ 不截斷（主要網域在最後面，截掉等於把答案藏起來）⇒ 太長就換行 */
.pf-link-host {
  display: block; font-size: 12px; color: var(--muted);
  line-height: 1.35; overflow-wrap: anywhere;
}
.pf-stats {
  display: flex; align-items: center;
  padding: 0 24px; margin: 20px 0 0;
}
.pf-stat {
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
}
.pf-stat-n {
  font-size: 20px; font-weight: 700; line-height: 1.2; color: var(--ink);
}
.pf-stat-l { font-size: 12px; line-height: 1.2; color: var(--muted); }
.pf-stat-sep { flex: 0 0 1px; width: 1px; height: 30px; background: var(--line); }
.pf-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  padding: 20px 16px 0;
  margin: 0; list-style: none;
}
.pf-cell a { display: block; text-decoration: none; color: inherit; }
.pf-thumb {
  display: block; position: relative; width: 100%; aspect-ratio: 3 / 4;
  border-radius: 16px; overflow: hidden; background: var(--surface-2);
}
.pf-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pf-thumb-text {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  padding: var(--s4); background: var(--surface-2);
}
.pf-thumb-text span {
  font-size: 17px; font-weight: 600; line-height: 1.45; color: var(--ink); text-align: center;
  word-break: break-word;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.pf-badge {
  position: absolute; top: 8px; left: 8px;
  display: inline-flex; align-items: center; gap: 3px;
  padding: 5px 10px;
  border-radius: 999px; background: rgba(0, 0, 0, 0.45); color: #fff;
  font-size: 11px; font-weight: 500; line-height: 1.2;
}
.pf-badge svg { width: 11px; height: 11px; display: block; }
.pf-play {
  position: absolute; right: 8px; bottom: 8px;
  width: 26px; height: 26px; border-radius: 999px;
  background: rgba(0, 0, 0, 0.45); color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.pf-play svg { width: 11px; height: 11px; display: block; }
.pf-cell-title {
  display: block; margin-top: 8px;
  font-size: 14px; font-weight: 600; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pf-more { margin: 0; padding: var(--s4) 16px 0; text-align: center; }
.pf-more a {
  display: inline-block; padding: 10px var(--s5); border-radius: 999px;
  border: 1px solid var(--line); color: var(--ink-2); text-decoration: none;
  font-weight: 600; font-size: 14px;
}
.pf-empty { margin: 20px 0 0; padding: 0 16px; text-align: center; color: var(--muted); }
/* 只給螢幕閱讀器的字（播放圖示那一顆沒有可讀的文字）。⛔ 不用 display:none——
   那會讓輔助技術也讀不到，等於沒寫 */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}