/* 見微知相 網站樣式（web-1 視覺二版）。規格見 docs/web/設計契約.md：色票五個值；直角、無漸層、無陰影；分隔線只有頁首底線；字距只留店名；字級 44/28/16/13（手機 32/22/16/13）；行高 1.8／1.3；間距刻度 8/16/32/64/128/192；墨綠只給唯一主要動作；手機優先。 */
:root {
  --bg: #F5F2EA;
  --block: #D9D7D1;
  --ink: #222220;
  --muted: #67645C;
  --accent: #2E4A3B;
  --line: #BDBBB4;
  --serif: "Noto Serif TC", "Source Han Serif TC", "Songti TC", "STSong", "PMingLiU", "Noto Serif CJK TC", serif;
  --sans: "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", "Heiti TC", sans-serif;
  color-scheme: light;
}
* { box-sizing: border-box; }
html { background: var(--bg); }
body { margin: 0; color: var(--ink); background: var(--bg); font: 16px/1.8 var(--sans); -webkit-text-size-adjust: 100%; }
a { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
a:hover { color: var(--accent); }
h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.3; margin: 0; }
h1 { font-size: 32px; }
h2 { font-size: 22px; }
h3 { font-size: 16px; }
p { margin: 0 0 16px; }
.muted { color: var(--muted); }
.wrap { max-width: 960px; margin: 0 auto; padding: 0 16px; }

/* 頁首：站名左、導覽右 */
.site-header { border-bottom: 1px solid var(--line); }
.site-header .wrap { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 32px; padding-top: 16px; padding-bottom: 16px; }
.brand { font-family: var(--serif); font-size: 16px; letter-spacing: 0.42em; text-decoration: none; }
.nav { display: flex; gap: 16px; font-size: 16px; }
.nav a { text-decoration: none; color: var(--muted); }
.nav a.on, .nav a:hover { color: var(--ink); }

/* 首頁：左上定位句一行，主視覺命盤（手機滿 .wrap 寬；桌機 640px 貼 .wrap 右緣，不裁格、不貼視窗） */
.hero { padding: 32px 0 0; }
.hero .lead { font-family: var(--serif); font-size: 22px; line-height: 1.3; margin: 0; }
.hero .lead span { display: block; }
.hero-art { width: 100%; max-width: 640px; margin: 32px 0 0; }
.hero-art .zw-chart { max-width: none; margin: 0; }

/* 首頁 399 一整段：名稱、一句說明、價格、唯一實心按鈕；899 只一行附註 */
.offer { padding: 64px 0 0; }
.offer h2 { font-size: 32px; margin: 0 0 16px; }
.offer h2 a { text-decoration: none; }
.offer .desc { max-width: 32em; margin: 0 0 32px; }
.offer .price { font-family: var(--serif); font-size: 22px; line-height: 1.3; margin: 0 0 32px; }
.offer .act { margin: 0 0 32px; }
.offer .addon { margin: 0; }

/* 三個入口：無箭頭的文字連結（手機與 899 附註、彼此間距都是 32） */
.entries .wrap { display: flex; flex-wrap: wrap; gap: 32px; padding-top: 32px; padding-bottom: 0; }

/* 內頁：標題 44、價格 28；章節＝側標＋內文（手機側標橫排 13 灰字在上；桌機直排在左欄） */
.page { padding-top: 32px; }
.page-title { font-size: 32px; margin: 0 0 16px; }
.page-sub { color: var(--muted); margin: 0 0 32px; }
.price-tag { font-family: var(--serif); font-size: 22px; line-height: 1.3; margin: 0 0 32px; }
.sec { padding: 32px 0 0; }
.sec > h2 { font-family: var(--sans); font-weight: 400; font-size: 13px; color: var(--muted); margin: 0 0 8px; }
.sec ol, .sec ul { margin: 0 0 16px; padding-left: 32px; }
.sec li { margin: 0 0 8px; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; padding: 64px 0 0; }
.actions.stack { flex-direction: column; align-items: flex-start; gap: 16px; }
.actions + .note { margin-top: 32px; }
/* 「我的命書」：POST 動作（重寄、登出）用長得像連結的按鈕；每張單的動作列 */
.linkbtn { background: none; border: 0; padding: 0; margin: 0; font: inherit; color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; cursor: pointer; }
.linkbtn:hover { color: var(--accent); }
form.inline { display: inline; margin: 0; }
.acts { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; margin: 16px 0 0; }
.order h3 { margin: 0 0 8px; }
.btn { display: inline-block; border: 1px solid var(--ink); border-radius: 0; padding: 16px 32px; text-decoration: none; color: var(--ink); background: transparent; font: inherit; line-height: 1.3; cursor: pointer; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primary:hover { background: var(--ink); border-color: var(--ink); color: #fff; }
.btn:hover { color: var(--accent); border-color: var(--accent); }
.note { color: var(--muted); font-size: 13px; }
.disclaimer { color: var(--muted); font-size: 13px; margin: 32px 0 0; }

/* 常見問題 */
.faq dt { font-family: var(--serif); font-weight: 600; line-height: 1.3; }
.faq dd { margin: 8px 0 32px; }

/* 聯絡 */
.contact dl { display: grid; grid-template-columns: 8em 1fr; gap: 8px 16px; margin: 0 0 32px; }
.contact dt { color: var(--muted); }
.contact dd { margin: 0; }

/* 法律文件（同意書／隱私權／服務條款原文） */
.legal p { margin: 0 0 8px; }
.legal .ch1 { font-family: var(--serif); font-size: 22px; line-height: 1.3; margin: 0 0 16px; }
.legal .ch2 { font-family: var(--serif); font-size: 16px; line-height: 1.3; margin: 32px 0 8px; }
.legal .cli { padding-left: 16px; text-indent: -16px; }
.legal a { word-break: break-all; }

/* 範例頁與命書本文 */
.zw-chart { max-width: 640px; margin: 0 0 16px; }
.zw-chart svg { display: block; width: 100%; height: auto; border-radius: 0; }
.toc { font-size: 13px; color: var(--muted); margin: 0; padding-left: 32px; }
.toc li { margin: 0 0 8px; }
.bnote { color: var(--muted); font-size: 13px; margin: 0 0 32px; }
.section { padding: 0; }
.section h2 { margin: 0 0 16px; }
.section h2 small { font-size: 13px; color: var(--muted); font-weight: 400; margin-left: 8px; }
.section p { white-space: pre-wrap; }
.section p.opening { color: var(--muted); }
.section p.action { border-left: 1px solid var(--ink); padding-left: 16px; }
.section p.lead { font-family: var(--serif); }

/* 命書閱讀頁：開頭、寫在最後、899 部分標題 */
.intro, .outro { font-family: var(--serif); margin: 32px 0; white-space: pre-wrap; }
h2.part { margin: 64px 0 16px; }
.part-title { margin: 64px 0 8px; }
.yearly { margin-top: 32px; }

/* 表單（下單流程） */
form { margin: 0; }
.field { margin: 0 0 16px; }
.field label, .field .lbl { display: block; font-size: 13px; color: var(--muted); margin: 0 0 8px; }
input[type=text], input[type=email], input[type=date], input[type=tel], select { width: 100%; font: inherit; color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: 0; padding: 8px 16px; }
input:focus, select:focus { outline: 1px solid var(--accent); outline-offset: 0; border-color: var(--accent); }
.choices { display: flex; flex-wrap: wrap; gap: 8px 32px; }
.choices label { display: inline-flex; align-items: center; gap: 8px; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.check { display: flex; align-items: baseline; gap: 8px; margin: 16px 0; }
.check input { width: 20px; height: 20px; flex: none; accent-color: var(--ink); }
.msg { border: 1px solid var(--ink); padding: 16px; margin: 0 0 32px; }
details.consent { margin: 0 0 32px; }
details.consent summary { padding: 16px 0; cursor: pointer; }
details.consent .legal { padding: 0 0 16px; }
.kv { display: grid; grid-template-columns: 7em 1fr; gap: 8px 16px; margin: 0 0 32px; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; }
.steps { display: flex; gap: 16px; font-size: 13px; color: var(--muted); margin: 0 0 32px; }
.steps .on { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }

/* 頁尾：兩欄（左 公司名、店名；右 聯絡方式、政策頁），無上線，靠間距分段 */
.site-footer { margin-top: 64px; }
.site-footer .wrap { display: grid; grid-template-columns: 1fr; gap: 32px; padding-top: 32px; padding-bottom: 64px; font-size: 13px; color: var(--muted); }
.site-footer span { display: block; }
.site-footer a { color: var(--muted); }

/* 桌機 */
@media (min-width: 900px) {
  .site-header .wrap { padding-top: 32px; padding-bottom: 32px; }
  .nav { gap: 32px; }
  .hero { padding-top: 64px; }
  .hero .lead { font-size: 28px; }
  .hero .lead span { display: inline; }
  .hero-art { margin: 32px 0 0 auto; }
  .entries .wrap { padding-top: 64px; }
  .offer { padding-top: 128px; }
  .offer h2 { font-size: 44px; }
  .offer .price { font-size: 28px; }
  .page { padding-top: 64px; }
  .page-title { font-size: 44px; }
  .price-tag { font-size: 28px; }
  .sec { display: grid; grid-template-columns: 64px 1fr; }
  .sec > h2 { writing-mode: vertical-rl; margin: 0; justify-self: start; }
  .sec > :not(h2) { grid-column: 2; }
  .sec ~ .actions, .sec ~ .disclaimer, .sec ~ .note { padding-left: 64px; }
  .legal .ch1 { font-size: 28px; }
  .site-footer { margin-top: 128px; }
  .site-footer .wrap { grid-template-columns: 1fr 1fr; padding-top: 64px; padding-bottom: 128px; }
}