/* =========================================================
   創意出版社 Design System
   概念：一本可以逛的書。紙、墨、燙金、布面書衣。
   ========================================================= */
:root {
  /* 色彩 */
  --paper: #FBF8F2;      /* 內頁紙 */
  --paper-2: #F2ECE1;    /* 襯頁，區塊底色 */
  --ink: #2A2622;        /* 墨色，本文 */
  --ink-2: #5E574E;      /* 次要文字（對比 6.7:1） */
  --line: #E3DACB;       /* 細線 */
  --gold: #BA7517;       /* 品牌燙金：只用在大字與裝飾（對比 3.5:1） */
  --gold-ink: #8A5410;   /* 可讀的金：連結、按鈕（對比 5.9:1） */
  --cloth: #2F4A47;      /* 布面書衣：品書時間 */
  --cloth-ink: #F3EEE4;
  --cloth-gold: #E3B261;

  /* 字體 */
  --serif: "Noto Serif TC", "Songti TC", "PMingLiU", serif;
  --sans: -apple-system, BlinkMacSystemFont, "PingFang TC", "Microsoft JhengHei", "Noto Sans TC", sans-serif;

  /* 字級（行動版基準，桌機在下方放大） */
  --fs-xs: .8125rem;   /* 13 */
  --fs-s: .9375rem;    /* 15 */
  --fs-m: 1.0625rem;   /* 17 本文 */
  --fs-l: 1.25rem;     /* 20 */
  --fs-xl: 1.5rem;     /* 24 h3 */
  --fs-2xl: 1.875rem;  /* 30 h2 */
  --fs-3xl: 2.25rem;   /* 36 h1 */
  --fs-hero: clamp(2.5rem, 9vw, 3.875rem);

  /* 間距（4 的倍數） */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 72px; --s9: 112px;

  --wrap: 1120px;
  --narrow: 720px;
  --radius: 3px;         /* 按鈕、輸入框 */
  --radius-cover: 2px;   /* 書是長方形的實物 */
  --header-h: 60px;
}
@media (min-width: 960px) {
  :root { --fs-2xl: 2.125rem; --fs-3xl: 2.75rem; --header-h: 68px; }
}

/* ---------- 基礎 ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: var(--fs-m); line-height: 1.85; letter-spacing: .02em; }
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 700; line-height: 1.35; letter-spacing: .03em; margin: 0 0 var(--s4); }
h1 { font-size: var(--fs-3xl); }
h2, .h2 { font-size: var(--fs-2xl); }
h3, .h3 { font-size: var(--fs-xl); }
h4, .h4 { font-size: var(--fs-l); }
p { margin: 0 0 var(--s4); }
a { color: var(--gold-ink); text-underline-offset: .2em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--gold-ink); outline-offset: 3px; }
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--s5); }
.narrow { max-width: var(--narrow); }
.muted { color: var(--ink-2); }
.todo { color: #8A3B12; background: #FBEBDD; padding: var(--s2) var(--s3); font-size: var(--fs-s); }
.skip { position: absolute; left: -999px; top: 8px; background: var(--ink); color: var(--paper); padding: var(--s2) var(--s4); z-index: 100; }
.skip:focus { left: 8px; }
[hidden] { display: none !important; }

/* ---------- 按鈕 ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 var(--s5); border-radius: var(--radius); font: 500 var(--fs-s)/1.2 var(--sans); letter-spacing: .06em; text-decoration: none; cursor: pointer; border: 1px solid transparent; }
.btn-primary { background: var(--gold-ink); color: #fff; }
.btn-primary:hover { background: #6F430B; }
.btn-quiet { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-quiet:hover { background: var(--ink); color: var(--paper); }
.btn-light { background: var(--cloth-ink); color: var(--cloth); }
.btn-block { width: 100%; }
.link-btn { background: none; border: 0; padding: 0; font: inherit; color: var(--gold-ink); text-decoration: underline; text-underline-offset: .2em; cursor: pointer; }
.text-link { font-size: var(--fs-s); letter-spacing: .06em; }
.cta-row { display: flex; flex-wrap: wrap; gap: var(--s3); margin: var(--s4) 0; }

/* ---------- 頁首 ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(251, 248, 242, .96); border-bottom: 1px solid var(--line); }
@supports (backdrop-filter: blur(8px)) { .site-header { background: rgba(251, 248, 242, .85); backdrop-filter: blur(8px); } }
.header-inner { display: flex; align-items: center; gap: var(--s4); height: var(--header-h); }
.brand { font-family: var(--serif); font-weight: 700; font-size: 1.125rem; letter-spacing: .12em; color: var(--ink); text-decoration: none; margin: 0; }
.site-nav { margin-left: auto; }
.nav-toggle { background: none; border: 1px solid var(--line); border-radius: var(--radius); min-height: 40px; padding: 0 var(--s3); font: inherit; font-size: var(--fs-s); color: var(--ink); }
.nav-list { list-style: none; margin: 0; padding: 0; }
.nav-list a { color: var(--ink); text-decoration: none; font-size: var(--fs-s); letter-spacing: .06em; }
.nav-list a[aria-current="page"] { color: var(--gold-ink); text-decoration: underline; text-underline-offset: .5em; }
.header-order { min-height: 40px; padding: 0 var(--s4); }
@media (max-width: 959px) {
  .site-nav { order: 2; margin-left: 0; }
  .header-order { margin-left: auto; }
  .nav-list { display: none; position: absolute; left: 0; right: 0; top: var(--header-h); background: var(--paper); border-bottom: 1px solid var(--line); padding: var(--s2) var(--s5) var(--s4); }
  .nav-list.is-open { display: block; }
  .nav-list a { display: block; padding: var(--s3) 0; font-size: var(--fs-m); border-bottom: 1px solid var(--line); }
}
@media (min-width: 960px) {
  .nav-toggle { display: none; }
  .nav-list { display: flex; gap: var(--s5); }
}

/* ---------- 麵包屑 ---------- */
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s2); margin: 0; padding: var(--s4) 0 0; font-size: var(--fs-xs); color: var(--ink-2); }
.crumbs li + li::before { content: "／"; margin-right: var(--s2); color: var(--line); }
.crumbs a { color: var(--ink-2); }

/* ---------- 區塊 ---------- */
.section { padding: var(--s8) 0; }
.section + .section { padding-top: 0; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s4); flex-wrap: wrap; margin-bottom: var(--s5); }
.section-head h2, .section-head h3 { margin: 0; }
.section-lead { font-size: var(--fs-l); color: var(--ink-2); max-width: 36em; line-height: 1.75; }
.page-head { padding: var(--s7) var(--s5) var(--s5); }
.page-head .section-lead { margin-bottom: 0; }

/* ---------- 首頁 Hero：目次 ---------- */
.hero { padding: var(--s7) 0 var(--s8); }
.hero-title { font-size: var(--fs-hero); line-height: 1.2; letter-spacing: .06em; margin-bottom: var(--s5); }
.hero-sub { font-size: var(--fs-l); color: var(--ink-2); max-width: 26em; line-height: 1.75; margin-bottom: var(--s7); }
.hero-alt { margin-top: var(--s5); font-size: var(--fs-s); color: var(--ink-2); }
@media (min-width: 960px) {
  .hero { padding: var(--s8) 0 var(--s9); }
  .hero-inner { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto 1fr; column-gap: var(--s8); align-items: start; }
  .hero-title, .hero-sub { grid-column: 1; }
  .hero .toc { grid-column: 2; grid-row: 1 / span 3; margin-top: var(--s3); }
  .hero-alt { grid-column: 1; }
}

.toc-title { font-size: var(--fs-l); letter-spacing: .12em; padding-bottom: var(--s3); border-bottom: 2px solid var(--ink); margin-bottom: 0; }
.toc-list { list-style: none; margin: 0; padding: 0; }
.toc-list a { display: flex; align-items: baseline; gap: var(--s3); padding: var(--s4) 0; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; font-family: var(--serif); font-size: 1.125rem; line-height: 1.5; }
.toc-dots { flex: 1; min-width: 24px; border-bottom: 2px dotted var(--line); transform: translateY(-.3em); }
.toc-count { font-family: var(--sans); font-size: var(--fs-xs); color: var(--ink-2); white-space: nowrap; }
.toc-list a:hover .toc-text { text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: .3em; }
.toc-list a[aria-expanded="true"] { color: var(--gold-ink); }
.toc-list a[aria-expanded="true"] .toc-dots { border-color: var(--gold); }
.toc-result:not(:empty) { padding: var(--s5) 0 var(--s4); border-bottom: 2px solid var(--ink); }
.toc-result h3 { font-size: var(--fs-m); font-family: var(--sans); font-weight: 500; color: var(--ink-2); margin-bottom: var(--s4); }
.rec-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s4); }
.rec-list a { display: grid; grid-template-columns: 64px 1fr; gap: var(--s4); align-items: start; color: var(--ink); text-decoration: none; }
.rec-list strong { display: block; font-family: var(--serif); font-size: var(--fs-l); }
.rec-list span.rec-hook { color: var(--ink-2); font-size: var(--fs-s); line-height: 1.7; }
.rec-list a:hover strong { color: var(--gold-ink); }
@media (min-width: 960px) { .toc-list a { font-size: 1.3125rem; } }

/* ---------- 首頁開場：一條墨線，從翻開的書延伸成目次 ---------- */
.intro-book { display: block; width: 72px; height: auto; color: var(--ink); margin: 0 0 var(--s3); }
.intro-book .ln-gold { stroke: var(--gold); }
@media (min-width: 960px) { .intro-book { width: 96px; margin-bottom: var(--s4); } }
.toc-title { position: relative; }
/* 只有加上 .intro（JS 判斷要播放）時才有動畫；否則一律是完成畫面 */
.intro .intro-book .ln { stroke-dasharray: 1; stroke-dashoffset: 1; animation: ink-draw .5s ease-out forwards; }
.intro .intro-book .ln1 { animation-delay: .25s; animation-duration: .6s; }
.intro .intro-book .ln2 { animation-delay: .4s;  animation-duration: .6s; }
.intro .intro-book .ln3 { animation-delay: .7s;  animation-duration: .3s; }
.intro .intro-book .ln4 { animation-delay: .85s; animation-duration: .25s; }
.intro .intro-book .ln5 { animation-delay: .95s; animation-duration: .25s; }
.intro .intro-book .ln6 { animation-delay: 1.05s; animation-duration: .2s; }
.intro .intro-book .ln9 { animation-delay: 1.1s; animation-duration: .35s; }
.intro .intro-book .ln7 { animation-delay: 1.2s; animation-duration: .25s; }
.intro .intro-book .ln8 { animation-delay: 1.3s; animation-duration: .25s; }
.intro .hero .toc-title { border-bottom-color: transparent; }
.intro .hero .toc-title::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--ink); transform-origin: left; transform: scaleX(0); animation: ink-line .45s ease-out 1.35s forwards; }
.intro .hero .toc-list li { opacity: 0; animation: toc-in .35s ease-out forwards; }
.intro .hero .toc-list .toc-dots { transform-origin: left; transform: translateY(-.3em) scaleX(0); animation: toc-dots .5s ease-out forwards; }
.intro .hero .toc-list li:nth-child(1), .intro .hero .toc-list li:nth-child(1) .toc-dots { animation-delay: 1.6s; }
.intro .hero .toc-list li:nth-child(2), .intro .hero .toc-list li:nth-child(2) .toc-dots { animation-delay: 1.68s; }
.intro .hero .toc-list li:nth-child(3), .intro .hero .toc-list li:nth-child(3) .toc-dots { animation-delay: 1.76s; }
.intro .hero .toc-list li:nth-child(4), .intro .hero .toc-list li:nth-child(4) .toc-dots { animation-delay: 1.84s; }
.intro .hero .toc-list li:nth-child(5), .intro .hero .toc-list li:nth-child(5) .toc-dots { animation-delay: 1.92s; }
.intro .hero .toc-list li:nth-child(6), .intro .hero .toc-list li:nth-child(6) .toc-dots { animation-delay: 2s; }
.intro .hero .toc-list li:nth-child(7), .intro .hero .toc-list li:nth-child(7) .toc-dots { animation-delay: 2.08s; }
.intro .hero .toc-list li:nth-child(8), .intro .hero .toc-list li:nth-child(8) .toc-dots { animation-delay: 2.16s; }
@keyframes ink-draw { to { stroke-dashoffset: 0; } }
@keyframes ink-line { to { transform: scaleX(1); } }
@keyframes toc-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes toc-dots { to { transform: translateY(-.3em) scaleX(1); } }

/* ---------- 首頁回應區：讀者的話 → 你的那一本書 ---------- */
.hero-answer { margin-top: var(--s6); }
.answer-voice { margin: 0; display: grid; grid-template-columns: 96px 1fr; gap: var(--s5); align-items: start; }
.answer-voice .voice-cover { grid-row: 1 / span 2; }
.answer-voice .voice-cover .cover { width: 96px; }
.answer-voice blockquote { margin: 0; padding-left: var(--s4); border-left: 3px solid var(--gold); }
.answer-voice p { font-family: var(--serif); font-size: var(--fs-l); line-height: 1.7; margin: 0; }
.answer-voice figcaption { padding-left: calc(var(--s4) + 3px); font-size: var(--fs-s); color: var(--ink-2); line-height: 1.6; }
.answer-voice figcaption a { color: var(--ink-2); }
@media (min-width: 960px) {
  .answer-voice { grid-template-columns: 130px 1fr; gap: var(--s6); }
  .answer-voice .voice-cover .cover { width: 130px; }
  .answer-voice p { font-size: var(--fs-xl); }
}
.answer-card { animation: answer-in .35s ease-out; }
.answer-q { font-size: var(--fs-s); color: var(--ink-2); margin-bottom: var(--s4); }
.answer-main { display: grid; grid-template-columns: 120px 1fr; gap: var(--s5); align-items: start; }
.answer-cover .cover { width: 120px; }
.answer-title { font-family: var(--serif); font-weight: 700; font-size: var(--fs-xl); margin-bottom: var(--s2); }
.answer-title a { color: var(--ink); text-decoration: none; }
.answer-hook { color: var(--ink-2); line-height: 1.7; }
.answer-more { font-size: var(--fs-s); color: var(--ink-2); margin: var(--s5) 0 0; padding-top: var(--s4); border-top: 1px solid var(--line); }
.toc-result .answer-card { padding: var(--s2) 0; }
@keyframes answer-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (min-width: 960px) {
  .hero-inner { grid-template-rows: auto auto auto 1fr; }
  .hero .toc { grid-row: 1 / span 4; }
  .hero-answer { grid-column: 1; grid-row: 3; margin-top: var(--s4); max-width: 30em; min-height: 260px; }
  .answer-main { grid-template-columns: 150px 1fr; }
  .answer-cover .cover { width: 150px; }
  .hero-alt { grid-row: 4; }
}
.intro .hero-answer { opacity: 0; animation: photo-in .8s ease-out 1.9s forwards; }
@keyframes photo-in { to { opacity: 1; } }

/* ---------- 首頁書架：書背 ---------- */
.shelf { position: relative; margin-top: var(--s6); }
.shelf-row { display: flex; align-items: flex-end; gap: 3px; list-style: none; margin: 0; padding: 12px 0 0; border-bottom: 4px solid var(--ink); }
.shelf-row li { flex: 1 1 34px; min-width: 30px; }
.shelf-row a { display: flex; justify-content: center; align-items: center; width: 100%; white-space: nowrap; overflow: hidden; height: calc(146px + 28px * var(--hr)); padding: 12px 0 8px; background: var(--bg); color: var(--fg); writing-mode: vertical-rl; font-family: var(--serif); font-weight: 700; font-size: 14px; letter-spacing: .14em; line-height: 1; text-decoration: none; border-radius: 2px 2px 0 0; box-shadow: inset 0 0 0 1px rgba(42,38,34,.14), inset 4px 0 0 rgba(255,255,255,.16), inset -3px 0 0 rgba(0,0,0,.08); transition: transform .2s ease; }
.shelf-row a:hover, .shelf-row a:focus-visible { transform: translateY(-10px); }
.shelf-row a:focus-visible { outline-offset: 2px; }
.shelf-row .tcy { text-combine-upright: all; }
/* 手機：兩層合成一排，橫向滑動，右側淡出提示還有更多 */
@media (max-width: 959px) {
  .shelf { display: flex; overflow-x: auto; scrollbar-width: none; margin-right: calc(var(--s5) * -1); padding-right: var(--s5); }
  .shelf::-webkit-scrollbar { display: none; }
  .shelf-row { flex: none; padding-right: 3px; }
  .shelf-row li { width: 32px; flex: none; }
}
/* 電腦：左欄的兩層書架 */
@media (min-width: 960px) {
  .hero-inner { grid-template-rows: auto auto auto 1fr; }
  .hero .toc { grid-row: 1 / span 4; }
  .shelf { grid-column: 1; grid-row: 3; margin-top: var(--s4); }
  .shelf-row + .shelf-row { margin-top: var(--s4); }
  .shelf-row a { height: calc(150px + 30px * var(--hr)); font-size: 15px; padding-top: 14px; }
  .shelf-row li { max-width: 50px; }
  .hero-alt { grid-row: 4; }
}
.intro .shelf-row li { opacity: 0; transform: translateY(16px); animation: shelf-in .35s ease-out forwards; animation-delay: calc(1.75s + var(--i) * 45ms); }
@keyframes shelf-in { to { opacity: 1; transform: none; } }

/* ---------- 換個角度 ---------- */
.angles { background: var(--paper-2); padding: var(--s8) 0; }
.angle-list { list-style: none; margin: var(--s6) 0 0; padding: 0; display: grid; gap: var(--s6); }
.angle { border-top: 1px solid var(--ink); padding-top: var(--s4); }
.angle-label { display: block; font-size: var(--fs-xs); letter-spacing: .12em; color: var(--ink-2); margin-bottom: var(--s1); }
.angle-before { color: var(--ink-2); margin-bottom: var(--s4); }
.angle-before s { text-decoration-color: var(--gold); text-decoration-thickness: 2px; }
.angle-after { font-family: var(--serif); font-size: var(--fs-xl); line-height: 1.55; margin-bottom: var(--s4); }
.angle-book { font-size: var(--fs-s); }
@media (min-width: 960px) { .angle-list { grid-template-columns: repeat(3, 1fr); gap: var(--s7); } }

/* ---------- 書封與書目 ---------- */
.cover { position: relative; display: block; border-radius: var(--radius-cover); overflow: hidden; background: var(--paper-2); box-shadow: 0 1px 2px rgba(42, 38, 34, .16), 0 10px 22px -12px rgba(42, 38, 34, .45); aspect-ratio: 3 / 4; }
.cover img { width: 100%; height: 100%; object-fit: cover; }
.cover::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 7%; background: linear-gradient(90deg, rgba(0,0,0,.14), rgba(255,255,255,.08) 60%, transparent); pointer-events: none; }
.cover-s { width: 120px; flex-shrink: 0; }
.cover-xs { width: 48px; flex-shrink: 0; box-shadow: 0 1px 2px rgba(42,38,34,.2); }
.cover-l { width: min(260px, 70vw); }
.book-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s6) var(--s5); }
@media (min-width: 640px) { .book-list { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 960px) { .book-list { grid-template-columns: repeat(4, 1fr); gap: var(--s7) var(--s6); } .book-list.shelf { grid-template-columns: repeat(6, 1fr); gap: var(--s6) var(--s5); } }
.book-link { display: block; color: var(--ink); text-decoration: none; }
.book-link .cover { margin-bottom: var(--s4); }
.book-title { font-size: var(--fs-l); margin-bottom: var(--s2); }
.book-title .vol, .book-h1 .vol { font-family: var(--sans); font-weight: 400; font-size: .7em; color: var(--ink-2); margin-left: .4em; }
.book-hook { font-size: var(--fs-s); color: var(--ink-2); line-height: 1.7; margin: 0; }
.book-link:hover .book-title { text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: .3em; }

/* ---------- 作者預告、讀者的話 ---------- */
.portrait { border-radius: 50%; object-fit: cover; aspect-ratio: 1; width: 120px; }
.portrait-s { width: 72px; }
.portrait-l { width: 160px; }
.author-teaser-inner { display: grid; gap: var(--s5); }
.fact-line { font-size: var(--fs-s); color: var(--ink-2); }
@media (min-width: 640px) { .author-teaser-inner { grid-template-columns: 160px 1fr; gap: var(--s7); align-items: start; } .author-teaser .portrait { width: 160px; } }
.voices, .reviews { display: grid; gap: var(--s5); }
@media (min-width: 960px) { .voices { grid-template-columns: repeat(3, 1fr); gap: var(--s6); } }
.voice, .review { margin: 0; border-left: 2px solid var(--gold); padding-left: var(--s4); }
.voice blockquote, .review blockquote { margin: 0; }
.voice p { font-family: var(--serif); font-size: var(--fs-l); line-height: 1.7; }
.review p { margin-bottom: var(--s2); }
.voice figcaption, .review figcaption { font-size: var(--fs-s); color: var(--ink-2); }

/* ---------- 一本書之外／品書時間 ---------- */
.beyond { background: var(--cloth); color: var(--cloth-ink); padding: var(--s8) 0; }
.beyond a:not(.btn) { color: var(--cloth-gold); }
.beyond-grid { display: grid; gap: var(--s7); }
.beyond-meta { font-size: var(--fs-s); opacity: .85; }
.beyond-editorial { border-top: 1px solid rgba(243, 238, 228, .3); padding-top: var(--s5); }
@media (min-width: 960px) { .beyond-grid { grid-template-columns: 2fr 1fr; gap: var(--s8); } .beyond-editorial { border-top: 0; border-left: 1px solid rgba(243,238,228,.3); padding: 0 0 0 var(--s6); } }

/* ---------- 優惠 ---------- */
.offers { padding: var(--s8) 0; border-top: 1px solid var(--line); }
.offers-compact { padding: var(--s7) 0; }
.offer-list { list-style: none; margin: var(--s5) 0; padding: 0; display: grid; gap: var(--s3); }
.offer-list li { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "name price" "note price"; padding: var(--s4) var(--s5); border: 1px solid var(--line); background: #fff; border-radius: var(--radius); }
.offer-list .offer-best { border: 2px solid var(--gold); }
.offer-name { grid-area: name; font-family: var(--serif); font-weight: 700; font-size: var(--fs-l); }
.offer-price { grid-area: price; align-self: center; font-family: var(--serif); font-size: var(--fs-xl); color: var(--gold-ink); }
.offer-note { grid-area: note; font-size: var(--fs-s); color: var(--ink-2); }
.offer-foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s4); color: var(--ink-2); font-size: var(--fs-s); }
@media (min-width: 640px) { .offer-list { grid-template-columns: repeat(2, 1fr); max-width: 760px; } }

/* ---------- 電子報（Kit 表單） ---------- */
.newsletter { background: var(--paper-2); padding: var(--s8) 0; }
.newsletter .nl-row { display: grid; gap: var(--s3); }
@media (min-width: 640px) { .newsletter .nl-row { grid-template-columns: 1fr 1.4fr auto; } }
.newsletter input { min-height: 48px; padding: 0 var(--s4); border: 1px solid var(--ink-2); border-radius: var(--radius); font: inherit; background: #fff; }
.newsletter button { min-height: 48px; padding: 0 var(--s5); background: var(--ink); color: var(--paper); border: 0; border-radius: var(--radius); font: inherit; letter-spacing: .1em; cursor: pointer; }
.newsletter .nl-privacy, .newsletter .nl-powered { font-size: var(--fs-xs); color: var(--ink-2); margin-top: var(--s3); }
.newsletter .formkit-alert:empty { display: none; }

/* ---------- 書籍頁 ---------- */
.book-layout { display: grid; gap: var(--s6); padding-top: var(--s6); padding-bottom: var(--s7); }
.book-hero-cover { display: flex; justify-content: center; }
.book-topic { font-size: var(--fs-s); letter-spacing: .08em; margin-bottom: var(--s2); }
.book-h1 { margin-bottom: var(--s2); }
.book-byline { color: var(--ink-2); font-size: var(--fs-s); }
.book-lead { font-family: var(--serif); font-size: var(--fs-xl); line-height: 1.6; margin: var(--s5) 0; }
.edition-note { font-size: var(--fs-s); background: var(--paper-2); padding: var(--s2) var(--s3); display: inline-block; }
.book-buy { border-top: 1px solid var(--line); padding-top: var(--s5); margin-top: var(--s5); }
.price { font-family: var(--serif); font-size: var(--fs-l); margin-bottom: 0; }
.offer-inline { font-size: var(--fs-s); color: var(--ink-2); }
.store-label { font-size: var(--fs-s); color: var(--ink-2); margin-bottom: var(--s2); }
.store-links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); font-size: var(--fs-s); }
@media (min-width: 960px) {
  .book-layout { grid-template-columns: 300px minmax(0, 1fr); column-gap: var(--s8); padding-top: var(--s7); align-items: start; }
  .book-hero-cover { position: sticky; top: calc(var(--header-h) + 32px); justify-content: flex-start; }
  .book-hero-cover .cover-l { width: 100%; }
}
.book-main { max-width: var(--narrow); }
.book-hero { padding-bottom: var(--s6); }
.book-body > section { padding: var(--s6) 0; border-top: 1px solid var(--line); }
.book-body > section:first-child { border-top: 2px solid var(--ink); }
.related { margin-top: 0; }
.fit-list { list-style: none; margin: 0; padding: 0; }
.fit-list li { position: relative; padding: var(--s3) 0 var(--s3) var(--s6); font-size: var(--fs-l); line-height: 1.7; border-bottom: 1px dotted var(--line); }
.fit-list li::before { content: ""; position: absolute; left: 4px; top: 1.15em; width: 12px; height: 2px; background: var(--gold); }
.plain-list { margin: 0; padding-left: 1.2em; }
.plain-list li { margin-bottom: var(--s3); }
.prose { max-width: 36em; }
.award { font-size: var(--fs-s); border-left: 2px solid var(--gold); padding-left: var(--s3); }
.pull { margin: var(--s5) 0; padding: 0; }
.pull p { font-family: var(--serif); font-size: var(--fs-xl); line-height: 1.6; margin-bottom: var(--s2); }
.pull cite { font-style: normal; font-size: var(--fs-s); color: var(--ink-2); }
.volume { display: grid; grid-template-columns: 96px 1fr; gap: var(--s5); padding: var(--s5) 0; border-bottom: 1px dotted var(--line); }
.volume .cover-s { width: 96px; }
.volume h3 { font-size: var(--fs-l); }
.volume-actions { margin: var(--s4) 0 var(--s3); }
.volume .btn { min-height: 40px; }
.more-site { font-size: var(--fs-s); color: var(--ink-2); padding: var(--s5) 0; border-top: 1px solid var(--line); }
.author-card { display: grid; grid-template-columns: 72px 1fr; gap: var(--s4); padding: var(--s5); background: var(--paper-2); margin: var(--s5) 0 var(--s7); font-size: var(--fs-s); }
.author-card-name { font-family: var(--serif); font-weight: 700; font-size: var(--fs-l); margin-bottom: var(--s1); }
.related { background: var(--paper-2); padding-top: var(--s7) !important; }

.why-label { font-family: var(--serif); font-weight: 700; margin: var(--s4) 0 var(--s2); }
.verse { font-family: var(--serif); font-size: var(--fs-l); line-height: 1.9; padding-left: var(--s4); border-left: 2px solid var(--gold); }
.closing { font-family: var(--serif); font-size: var(--fs-xl); line-height: 1.6; margin-top: var(--s5); }

.club-note { font-size: var(--fs-s); background: var(--paper-2); border-left: 3px solid var(--cloth); padding: var(--s2) var(--s3); margin: 0 0 var(--s4); }
.session-list { list-style: none; margin: var(--s4) 0; padding: 0; }
.session-list li { display: flex; gap: var(--s4); align-items: center; padding: var(--s4) 0; border-bottom: 1px solid var(--line); }
.session-time { font-family: var(--serif); font-weight: 700; margin: 0; }
.session-book { margin: 0; color: var(--ink-2); }

/* 手機底部購買列 */
.sticky-buy { display: none; }
@media (max-width: 959px) {
  .sticky-buy { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; padding: var(--s2) var(--s4) calc(var(--s2) + env(safe-area-inset-bottom)); background: var(--paper); border-top: 1px solid var(--line); transform: translateY(110%); transition: transform .2s ease; }
  .sticky-buy.is-visible { transform: none; }
  .sticky-title { font-family: var(--serif); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .has-sticky { padding-bottom: 72px; }
}

/* ---------- 表單 ---------- */
.review-form, .stack-form { display: grid; gap: var(--s2); margin-top: var(--s5); }
.review-form { background: #fff; border: 1px solid var(--line); padding: var(--s5); border-radius: var(--radius); }
label { font-size: var(--fs-s); color: var(--ink-2); margin-top: var(--s2); }
input, textarea, select { width: 100%; min-height: 48px; padding: var(--s3); border: 1px solid #B9AE9C; border-radius: var(--radius); font: inherit; color: var(--ink); background: #fff; }
textarea { min-height: 120px; resize: vertical; }
input:focus, textarea:focus, select:focus { outline: 2px solid var(--gold-ink); outline-offset: 0; border-color: var(--gold-ink); }
.check { display: flex; align-items: center; gap: var(--s2); color: var(--ink); }
.check input { width: 20px; min-height: 20px; }
.form-note { font-size: var(--fs-s); color: var(--ink-2); }
.form-status { font-size: var(--fs-s); min-height: 1.5em; margin: 0; }
.form-status.is-error { color: #A12A12; }
.form-status.is-ok { color: #2F6B3A; }
.stack-form .btn, .review-form .btn { justify-self: start; margin-top: var(--s3); }
fieldset { border: 0; padding: 0; margin: 0 0 var(--s7); }
legend { font-family: var(--serif); font-weight: 700; padding: 0; margin-bottom: var(--s3); }
.hours-note { font-size: var(--fs-s); color: var(--ink-2); margin-top: var(--s3); }

/* ---------- 訂購 ---------- */
.order-grid { display: grid; gap: var(--s6); padding-bottom: var(--s8); }
.pick-list { list-style: none; margin: var(--s4) 0 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: var(--s2); }
@media (min-width: 640px) { .pick-list { grid-template-columns: repeat(2, 1fr); } }
.pick-item { display: flex; align-items: center; gap: var(--s3); padding: var(--s3); margin: 0; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; cursor: pointer; color: var(--ink); }
.pick-item input { width: 20px; min-height: 20px; flex-shrink: 0; accent-color: var(--gold-ink); }
.pick-item:has(input:checked) { border-color: var(--gold-ink); box-shadow: inset 0 0 0 1px var(--gold-ink); }
.pick-text { display: flex; flex-direction: column; line-height: 1.4; }
.pick-title { font-family: var(--serif); font-weight: 700; }
.pick-price { font-size: var(--fs-xs); color: var(--ink-2); }
.order-summary { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s5); align-self: start; }
.sum-items { list-style: none; margin: 0 0 var(--s4); padding: 0; font-size: var(--fs-s); }
.sum-items li { display: flex; justify-content: space-between; gap: var(--s3); padding: var(--s1) 0; }
.sum-lines { display: grid; grid-template-columns: 1fr auto; gap: var(--s2); margin: 0; padding-top: var(--s3); border-top: 1px solid var(--line); }
.sum-lines dd { margin: 0; text-align: right; }
.sum-total { font-family: var(--serif); font-weight: 700; font-size: var(--fs-l); padding-top: var(--s2); border-top: 1px solid var(--line); }
.bank-mini { margin: var(--s4) 0; padding: var(--s3) 0; border-top: 1px solid var(--line); }
.bank-mini .form-note { margin-bottom: var(--s2); }
.nudge:not(:empty) { margin: var(--s4) 0; padding: var(--s3); background: #FBF0DC; border-left: 3px solid var(--gold); font-size: var(--fs-s); }
@media (min-width: 960px) {
  .order-grid { grid-template-columns: 1fr 340px; gap: var(--s7); }
  .order-summary { position: sticky; top: calc(var(--header-h) + 24px); }
  .order-bar { display: none !important; }
}

/* ---------- 主題、作者、其他 ---------- */
.topic-jump ul { list-style: none; margin: 0 0 var(--s6); padding: 0; display: flex; flex-wrap: wrap; gap: var(--s2); }
.topic-jump a { display: inline-block; padding: var(--s2) var(--s4); border: 1px solid var(--line); border-radius: 999px; font-size: var(--fs-s); text-decoration: none; color: var(--ink); background: #fff; }
.topic-block { padding: var(--s6) 0; border-top: 1px solid var(--line); }
.q-static { border-top: 1px solid var(--line); padding-top: var(--s7); }
.q-block { padding: var(--s5) 0; }
.topic-index { padding-bottom: var(--s8); }
.topic-row { display: grid; gap: var(--s2); padding: var(--s5) 0; border-top: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.topic-row:last-child { border-bottom: 1px solid var(--line); }
.topic-voice { font-family: var(--serif); font-size: var(--fs-xl); line-height: 1.5; }
.topic-name { font-size: var(--fs-s); color: var(--gold-ink); letter-spacing: .08em; }
.topic-count { color: var(--ink-2); margin-left: var(--s3); }
.topic-row:hover .topic-voice { text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: .3em; }
@media (min-width: 960px) { .topic-row { grid-template-columns: 1fr 240px; align-items: baseline; } }
.topic-voice-lg { font-family: var(--serif); font-size: var(--fs-xl); color: var(--ink-2); margin-bottom: var(--s3); }
.start-here { background: var(--paper-2); padding: var(--s7) 0 !important; }
.start-grid { display: grid; gap: var(--s6); }
.start-title { font-family: var(--serif); font-size: var(--fs-2xl); margin-bottom: 0; }
.start-title a { color: var(--ink); text-decoration: none; }
@media (min-width: 640px) { .start-grid { grid-template-columns: 220px 1fr; align-items: start; } .start-grid .cover-l { width: 220px; } }
.stage { padding: var(--s5) 0; border-top: 1px dotted var(--line); }
.author-hero { display: grid; gap: var(--s5); padding-top: var(--s7); padding-bottom: var(--s6); }
.author-role { color: var(--ink-2); }
@media (min-width: 640px) { .author-hero { grid-template-columns: 160px 1fr; gap: var(--s7); align-items: center; } }
.prose-block { padding-bottom: var(--s8); }
.prose-block > section { padding: var(--s6) 0; border-top: 1px solid var(--line); }
.author-topic { padding: var(--s3) 0; }
.author-topic p { margin: 0; }
.record { border-top: 1px solid var(--line); padding: var(--s5) 0; }
.record summary { font-family: var(--serif); font-weight: 700; font-size: var(--fs-l); cursor: pointer; }
.record ul { margin-top: var(--s4); }
.notes { list-style: none; margin: 0 0 var(--s6); padding: 0; }
.note { padding: var(--s5) 0; border-top: 1px solid var(--line); }
.note p { font-family: var(--serif); font-size: var(--fs-l); line-height: 1.7; margin-bottom: var(--s2); }
.flow { padding-left: 1.4em; }
.flow li { margin-bottom: var(--s3); }
.flow strong { display: block; font-family: var(--serif); }
.club-box { background: var(--cloth); color: var(--cloth-ink); padding: var(--s6) var(--s5) !important; border: 0 !important; }
.club-box a:not(.btn) { color: var(--cloth-gold); }
.club-box .hours-note, .club-box .form-note { color: var(--cloth-ink); opacity: .85; }
.club-box .btn-quiet { color: var(--cloth-ink); border-color: var(--cloth-ink); }
.club-box .todo { color: var(--ink); }
.price-list { list-style: none; margin: var(--s4) 0; padding: 0; }
.price-list li { display: flex; justify-content: space-between; gap: var(--s4); padding: var(--s3) 0; border-bottom: 1px solid rgba(243,238,228,.25); }
.beliefs dt { font-family: var(--serif); font-weight: 700; margin-top: var(--s4); }
.beliefs dd { margin: 0; color: var(--ink-2); }
.contact-grid { display: grid; gap: var(--s7); padding-bottom: var(--s8); }
@media (min-width: 960px) { .contact-grid { grid-template-columns: 1fr 1fr; } }
.info-list { display: grid; grid-template-columns: 6em 1fr; gap: var(--s3) var(--s4); margin: 0; }
.info-list dt { color: var(--ink-2); font-size: var(--fs-s); padding-top: .15em; }
.info-list dd { margin: 0; }
.map { width: 100%; height: 240px; border: 0; margin-top: var(--s5); border-radius: var(--radius); }
.thanks { padding: var(--s7) var(--s5) var(--s8); }
.thanks section { padding: var(--s5) 0; border-top: 1px solid var(--line); }
.mail-step { background: #FBF0DC; border-left: 3px solid var(--gold); padding: var(--s4) var(--s5); margin-bottom: var(--s5); }

/* ---------- 頁尾 ---------- */
.site-footer { background: var(--ink); color: #D9D1C4; padding: var(--s7) 0 var(--s5); font-size: var(--fs-s); }
.site-footer a { color: #F0E6D6; }
.site-footer h2 { font-family: var(--sans); font-size: var(--fs-s); font-weight: 500; letter-spacing: .12em; color: #fff; margin-bottom: var(--s3); }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: var(--s2); }
.site-footer .brand { color: #fff; margin-bottom: var(--s3); }
.footer-grid { display: grid; gap: var(--s6); grid-template-columns: 1fr 1fr; }
.footer-brand { grid-column: 1 / -1; }
.footer-base { border-top: 1px solid rgba(255,255,255,.15); margin-top: var(--s6); padding-top: var(--s4); color: #A89F92; }
@media (min-width: 960px) { .footer-grid { grid-template-columns: 2fr 1fr 1fr 1.6fr; } .footer-brand { grid-column: auto; } }

/* ---------- 動態 ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* ---------- 週六品書陪伴時光（《追愛》） ---------- */
.top-banner { position: relative; display: flex; align-items: center; justify-content: center; gap: var(--s3); padding: var(--s2) var(--s7) var(--s2) var(--s4); background: linear-gradient(90deg, #EADBC8 0%, #DCC3A6 55%, #E7D3BC 100%); color: #3F2C1E; font-size: var(--fs-s); line-height: 1.6; text-align: center; }
.top-banner p { margin: 0; }
.top-banner a { color: #6B3F12; font-weight: 700; }
.banner-close { position: absolute; right: var(--s2); top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border: 0; background: transparent; font-size: 1.25rem; color: #3F2C1E; cursor: pointer; }
.cta-dual { display: grid; gap: var(--s2); margin: var(--s4) 0; justify-items: start; }
.cta-dual .form-note { margin: 0 0 var(--s2); }
.btn-tall { min-height: 56px; padding: var(--s3) var(--s5); line-height: 1.5; text-align: left; white-space: normal; }
.cal-menu { position: relative; }
.cal-menu summary { list-style: none; }
.cal-menu summary::-webkit-details-marker { display: none; }
.cal-pop { margin-top: var(--s2); padding: var(--s4); background: #fff; border: 1px solid var(--line); border-radius: var(--radius); display: grid; gap: var(--s2); max-width: 360px; color: var(--ink); }
.cal-pop a { color: var(--gold-ink); font-weight: 500; }
.cal-pop .form-note { margin: var(--s1) 0 0; font-size: var(--fs-xs); }
.book-body > section.weekend { background: linear-gradient(160deg, #F1E4D3 0%, #E6D2BA 100%); color: #3F2C1E; border-top: 0; padding: var(--s6) var(--s5); margin: var(--s5) calc(-1 * var(--s5)); border-radius: 4px; }
@media (min-width: 640px) { .book-body > section.weekend { margin-left: 0; margin-right: 0; padding: var(--s7) var(--s6); } }
.weekend h2 { font-size: var(--fs-xl); line-height: 1.55; }
.weekend-kicker { font-size: var(--fs-s); letter-spacing: .08em; color: #7A5230; margin-bottom: var(--s2); }
.weekend-sub { color: #5A4433; }
.weekend .btn-light { background: #3F2C1E; color: #F6EDE2; }
.countdown { margin: var(--s5) 0 var(--s2); padding: var(--s4) var(--s5); background: rgba(255,255,255,.55); border-left: 3px solid #A8743F; }
.countdown-label { margin: 0; font-size: var(--fs-s); color: #5A4433; }
.countdown-time { margin: var(--s1) 0 0; font-family: var(--serif); font-weight: 700; font-size: var(--fs-2xl); color: #3F2C1E; font-variant-numeric: tabular-nums; }
.countdown.is-live .countdown-time { color: #8A3B12; }
.weeks { margin-top: var(--s6); }
.week-tabs { display: flex; flex-wrap: wrap; gap: var(--s2); margin-bottom: var(--s3); }
.week-tabs button { min-height: 40px; padding: 0 var(--s4); border: 1px solid #A8743F; background: transparent; color: #3F2C1E; border-radius: 999px; font: inherit; font-size: var(--fs-s); cursor: pointer; }
.week-tabs button[aria-selected="true"] { background: #3F2C1E; border-color: #3F2C1E; color: #F6EDE2; }
.week-card { background: #FFFDF8 repeating-linear-gradient(transparent 0 31px, #EADFCF 31px 32px); padding: var(--s5) var(--s5) var(--s4) var(--s6); border-radius: 3px; box-shadow: 0 1px 2px rgba(63,44,30,.12), 0 8px 18px -12px rgba(63,44,30,.4); border-left: 3px double #D9A9A0; line-height: 32px; }
.week-no { margin: 0; font-size: var(--fs-xs); letter-spacing: .1em; color: #8A6A4E; line-height: 32px; }
.week-text { margin: 0; font-family: var(--serif); font-size: var(--fs-l); line-height: 32px; }
.question-box { margin-top: var(--s6); display: grid; gap: var(--s2); }
.question-box label { color: #3F2C1E; font-size: var(--fs-m); line-height: 1.7; }
.question-box textarea { border-color: #C9A985; }
.question-box .form-note { color: #5A4433; margin: 0; }
.question-box .btn { justify-self: start; }
.weekend-cal { margin-top: var(--s6); padding-top: var(--s5); border-top: 1px solid rgba(63,44,30,.18); }
.weekend-cal p { margin-bottom: var(--s2); }
.vip-note { background: #F1E4D3; border-left: 3px solid #A8743F; padding: var(--s4) var(--s5); }

/* =========================================================
   書籍頁互動模組（追愛、築夢者之書、離婚黑皮書）
   ========================================================= */
.lp-hero { padding: var(--s7) 0; border-bottom: 1px solid var(--line); }
.lp-tea { background: linear-gradient(135deg, #F4E9DC 0%, #EAD7C2 100%); }
.lp-dawn { background: linear-gradient(160deg, #FBF3E2 0%, #F3E2C4 55%, #EFD9B6 100%); }
.lp-morning { background: linear-gradient(180deg, #F3F1EC 0%, #E9EEEA 100%); }
.lp-hero-inner { display: grid; gap: var(--s6); align-items: center; }
@media (min-width: 960px) { .lp-hero-inner { grid-template-columns: 1.2fr 1fr; gap: var(--s8); } }
.lp-kicker { font-size: var(--fs-s); letter-spacing: .1em; color: var(--ink-2); margin-bottom: var(--s3); }
.lp-title { font-family: var(--serif); font-weight: 700; font-size: clamp(1.55rem, 5vw, 2.3rem); line-height: 1.4; letter-spacing: .04em; margin-bottom: var(--s4); }
.lp-sub { color: var(--ink-2); font-size: var(--fs-l); line-height: 1.75; max-width: 30em; }
.lp-motto { font-family: var(--serif); font-size: var(--fs-l); color: var(--gold-ink); }
.lp-hero-aside { position: relative; display: flex; justify-content: center; }
.lp-ring { width: min(280px, 70vw); fill: none; stroke: var(--gold); stroke-width: 1.2; opacity: .8; }
.lp-ring circle { stroke-dasharray: 3 7; transform-origin: 100px 100px; animation: ring-spin 60s linear infinite; }
.lp-ring .r2 { animation-duration: 45s; animation-direction: reverse; stroke: var(--gold-ink); }
.lp-ring .r3 { animation-duration: 30s; stroke-dasharray: 1 5; }
@keyframes ring-spin { to { transform: rotate(360deg); } }

/* 抽卡 */
.draw { width: 100%; max-width: 380px; text-align: center; }
.draw-title { font-family: var(--serif); font-weight: 700; font-size: var(--fs-l); margin-bottom: var(--s3); }
.draw-card { min-height: 220px; display: grid; place-items: center; padding: var(--s6) var(--s5); background: #FFFDF8; border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 1px 2px rgba(42,38,34,.08), 0 18px 34px -22px rgba(138,84,16,.55); margin-bottom: var(--s4); position: relative; }
.draw-card::before { content: ""; position: absolute; inset: 10px; border: 1px solid rgba(186,117,23,.35); border-radius: 4px; pointer-events: none; }
.draw-face p { margin: 0; }
.draw-front p { color: var(--ink-2); line-height: 1.8; }
.draw-label { font-size: var(--fs-xs); letter-spacing: .12em; color: var(--gold-ink); margin-bottom: var(--s2) !important; }
.draw-t { font-family: var(--serif); font-weight: 700; font-size: var(--fs-l); margin-bottom: var(--s2) !important; }
.draw-d { font-family: var(--serif); font-size: var(--fs-l); line-height: 1.75; }
.draw-card.is-flip { animation: card-flip .45s ease-in-out; }
@keyframes card-flip { 0% { transform: rotateY(0); } 50% { transform: rotateY(90deg); } 100% { transform: rotateY(0); } }
.lp-mod .draw { margin: 0 auto; }

/* 模組共通 */
.lp-mod { padding: var(--s6) 0; border-top: 1px solid var(--line); }
.lp-intro { color: var(--ink-2); }
.quiz-list { list-style: none; margin: var(--s4) 0 0; padding: 0; counter-reset: q; }
.quiz-q { padding: var(--s4) 0; border-bottom: 1px dotted var(--line); }
.quiz-q fieldset { margin: 0; }
.quiz-q legend { font-family: var(--serif); font-weight: 700; font-size: var(--fs-l); line-height: 1.6; margin-bottom: var(--s3); }
.quiz-opts { display: grid; gap: var(--s2); }
.quiz-opts-2 { grid-template-columns: 1fr 1fr; }
.quiz-opt { display: flex; gap: var(--s3); align-items: baseline; text-align: left; width: 100%; padding: var(--s3) var(--s4); background: #fff; border: 1px solid var(--line); border-radius: var(--radius); font: inherit; color: var(--ink); line-height: 1.6; cursor: pointer; }
.quiz-opts-2 .quiz-opt { justify-content: center; }
.quiz-opt:hover { border-color: var(--gold); }
.quiz-opt[aria-pressed="true"] { border-color: var(--gold-ink); box-shadow: inset 0 0 0 1px var(--gold-ink); background: #FFF8EC; }
.quiz-key { font-family: var(--serif); font-weight: 700; color: var(--gold-ink); }
.quiz-answer { margin-top: var(--s3); padding: var(--s4); background: var(--paper-2); border-left: 3px solid var(--gold); animation: answer-in .3s ease-out; }
.quiz-lead { font-weight: 700; margin-bottom: var(--s2); }
.quiz-text { margin-bottom: var(--s2); }
.quiz-ch { font-size: var(--fs-s); color: var(--gold-ink); margin: 0; }
.acc details { border-bottom: 1px solid var(--line); }
.acc summary { cursor: pointer; padding: var(--s4) var(--s6) var(--s4) 0; font-family: var(--serif); font-weight: 700; font-size: var(--fs-l); list-style: none; position: relative; }
.acc summary::-webkit-details-marker { display: none; }
.acc summary::after { content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font-family: var(--sans); color: var(--gold-ink); font-size: 1.3em; }
.acc details[open] summary::after { content: "−"; }
.acc details p { padding: 0 0 var(--s4); color: var(--ink-2); margin: 0; }
.lp-cards { list-style: none; margin: var(--s4) 0 0; padding: 0; display: grid; gap: var(--s3); }
@media (min-width: 640px) { .lp-cards { grid-template-columns: 1fr 1fr; } }
.lp-cards li { padding: var(--s5); background: #fff; border: 1px solid var(--line); border-radius: var(--radius); transition: border-color .2s, box-shadow .2s; }
.lp-cards li:hover { border-color: var(--gold); box-shadow: 0 10px 26px -18px rgba(186,117,23,.7); }
.lp-card-no { font-family: var(--serif); color: var(--gold); font-size: var(--fs-s); }
.lp-cards h3 { font-size: var(--fs-l); margin: var(--s1) 0 var(--s2); }
.lp-cards p { color: var(--ink-2); margin: 0; font-size: var(--fs-s); line-height: 1.8; }
.lp-tabs { display: flex; flex-wrap: wrap; gap: var(--s2); margin: var(--s4) 0; }
.lp-tabs [role="tab"], .stage-row [role="tab"] { font: inherit; cursor: pointer; border: 1px solid var(--line); background: #fff; color: var(--ink); border-radius: 999px; padding: var(--s2) var(--s4); }
.lp-tabs [aria-selected="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.lp-tabpanel { padding: var(--s4) var(--s5); background: var(--paper-2); border-radius: var(--radius); }
.lp-tab-name { font-family: var(--serif); font-weight: 700; margin-bottom: var(--s2); }
.lp-tabpanel p:last-child { margin-bottom: 0; }
.stage-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--s2); margin: var(--s4) 0; }
@media (min-width: 640px) { .stage-row { grid-template-columns: repeat(10, 1fr); } }
.stage-row [role="tab"] { border-radius: 50%; aspect-ratio: 1; padding: 0; display: grid; place-items: center; position: relative; }
.stage-no { position: absolute; top: 2px; right: 6px; font-size: 10px; color: var(--ink-2); }
.stage-c { font-family: var(--serif); font-weight: 700; font-size: var(--fs-l); }
.stage-row [aria-selected="true"] { background: var(--gold-ink); border-color: var(--gold-ink); color: #fff; }
.stage-row [aria-selected="true"] .stage-no { color: rgba(255,255,255,.8); }
.stage-panel { display: grid; grid-template-columns: auto 1fr; gap: var(--s5); align-items: center; }
.stage-big { font-family: var(--serif); font-weight: 700; font-size: 3.5rem; line-height: 1; color: var(--gold); margin: 0; }
.dc-label { display: block; }
.dc-input { margin-bottom: var(--s2); }
.dc-result { margin-top: var(--s4); padding: var(--s5); background: #FFF8EC; border: 1px solid var(--gold); border-radius: var(--radius); animation: answer-in .3s ease-out; }
.dc-dream { font-size: var(--fs-s); color: var(--ink-2); }
.dc-title { font-family: var(--serif); font-weight: 700; font-size: var(--fs-l); }
.dc-quote { margin: 0 0 var(--s3); font-family: var(--serif); font-size: var(--fs-xl); line-height: 1.6; color: var(--gold-ink); }
.pc-choose { display: grid; gap: var(--s2); margin: var(--s4) 0; }
.pc-q { display: flex; gap: var(--s3); align-items: baseline; padding: var(--s3) var(--s4); background: #fff; border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink); margin: 0; cursor: pointer; }
.pc-q input { width: auto; min-height: 0; }
.pc-q:has(input:checked) { border-color: var(--gold-ink); background: #FFF8EC; }
.pc-out { margin-top: var(--s4); }
.pc-out img { width: min(100%, 360px); border: 1px solid var(--line); box-shadow: 0 14px 30px -18px rgba(42,38,34,.45); }

/* 轉換區 */
.lp-cta { background: var(--cloth); color: var(--cloth-ink); padding: var(--s8) 0; text-align: center; }
.lp-cta h2 { color: var(--cloth-ink); font-size: clamp(1.5rem, 4.4vw, 2.25rem); line-height: 1.5; }
.lp-gains-t { color: var(--cloth-gold); font-size: var(--fs-s); letter-spacing: .1em; margin-top: var(--s5); }
.lp-gains { list-style: none; padding: 0; margin: 0 auto var(--s5); display: grid; gap: var(--s2); max-width: 26em; }
.lp-gains li::before { content: "＋ "; color: var(--cloth-gold); }
.lp-cta .cta-row { justify-content: center; }
.btn-quiet-light { background: transparent; color: var(--cloth-ink); border-color: var(--cloth-ink); }
@media (prefers-reduced-motion: reduce) { .lp-ring circle { animation: none; } }

/* 第二批：如何撒嬌、尋情歷險坊、如何愛你的父母 */
.lp-peach { background: linear-gradient(135deg, #FCEDE6 0%, #F6DCD2 100%); }
.lp-rose { background: linear-gradient(135deg, #FBEFEF 0%, #F2DDE0 100%); }
.lp-sun { background: linear-gradient(160deg, #FDF5E6 0%, #F7E3C3 100%); }
.rot { max-width: 380px; padding: var(--s6) var(--s5); background: #FFFDF8; border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 18px 34px -22px rgba(138,84,16,.55); text-align: center; }
.rot-label { font-size: var(--fs-xs); letter-spacing: .12em; color: var(--gold-ink); }
.rot-q { margin: 0; min-height: 6.5em; display: grid; place-items: center; }
.rot-q p { font-family: var(--serif); font-size: var(--fs-l); line-height: 1.75; margin: 0; animation: answer-in .4s ease-out; }
.rot-dots { display: flex; justify-content: center; gap: var(--s2); margin-top: var(--s3); }
.rot-dots button { width: 10px; height: 10px; padding: 0; border-radius: 50%; border: 1px solid var(--gold-ink); background: transparent; cursor: pointer; }
.rot-dots button[aria-pressed="true"] { background: var(--gold-ink); }
.cd, .moods { width: 100%; max-width: 400px; padding: var(--s5); background: #FFFDF8; border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 18px 34px -22px rgba(138,84,16,.55); }
.cd-prompt { color: var(--ink-2); font-size: var(--fs-s); line-height: 1.8; }
.cd-pick { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: end; }
.cd-pick label { display: grid; gap: 4px; margin: 0; flex: 1 1 100px; }
.cd-pick .btn { flex: 1 1 100%; }
.cd-out { margin-top: var(--s4); padding-top: var(--s4); border-top: 1px dashed var(--line); text-align: center; animation: answer-in .3s ease-out; }
.cd-label { font-size: var(--fs-s); color: var(--ink-2); margin-bottom: var(--s1); }
.cd-num { font-family: var(--serif); font-weight: 700; font-size: var(--fs-2xl); color: var(--gold-ink); margin-bottom: var(--s2); }
.cd-quote { font-size: var(--fs-s); margin: 0; }
.moods ul { list-style: none; margin: var(--s3) 0 0; padding: 0; display: grid; gap: var(--s2); }
.moods a { display: block; padding: var(--s3) var(--s4); background: #fff; border: 1px solid var(--line); border-radius: 999px; color: var(--ink); text-decoration: none; text-align: center; }
.moods a:hover { border-color: var(--gold-ink); color: var(--gold-ink); }
.flips { list-style: none; margin: var(--s4) 0 0; padding: 0; display: grid; gap: var(--s3); }
@media (min-width: 640px) { .flips { grid-template-columns: repeat(3, 1fr); } }
.flip { width: 100%; height: 100%; min-height: 200px; display: block; text-align: left; padding: var(--s5); font: inherit; color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: 6px; cursor: pointer; }
.flip:hover { border-color: var(--gold); }
.flip[aria-pressed="true"] { background: #FFF8EC; border-color: var(--gold-ink); }
.flip.is-flip { animation: card-flip .4s ease-in-out; }
.flip span { display: block; }
.flip-tag { font-size: var(--fs-xs); letter-spacing: .1em; color: var(--ink-2); margin-bottom: var(--s2); }
.flip-back .flip-tag { color: var(--gold-ink); }
.flip-front .flip-text { font-family: var(--serif); font-size: var(--fs-l); line-height: 1.6; }
.flip-hint { margin-top: var(--s3); font-size: var(--fs-xs); color: var(--gold-ink); }
.flip-back strong { font-family: var(--serif); font-size: var(--fs-l); display: block; margin-bottom: var(--s2); }
.flip-back .flip-text { font-size: var(--fs-s); line-height: 1.8; color: var(--ink-2); }
.tq-fix { margin: 0; padding-top: var(--s3); border-top: 1px dashed var(--line); }
.ck-field { padding: var(--s3) 0; }
.ck-label { font-weight: 700; margin-bottom: var(--s2); }
.ck-opts { display: flex; flex-wrap: wrap; gap: var(--s2); }
.ck-opts .quiz-opt { width: auto; padding: var(--s2) var(--s4); }
.ck-out ul { list-style: none; padding: 0; margin: 0 0 var(--s4); }
.ck-out li { display: flex; justify-content: space-between; gap: var(--s4); padding: var(--s2) 0; border-bottom: 1px dotted var(--line); }
.ck-out li span { color: var(--ink-2); }
.ck-note { font-size: var(--fs-s); }
.doc-video { aspect-ratio: 16/9; margin: var(--s4) 0; }
.doc-video iframe { width: 100%; height: 100%; border: 0; border-radius: var(--radius); }
.doc-wall { list-style: none; margin: var(--s4) 0 0; padding: 0; display: grid; gap: var(--s3); }
@media (min-width: 640px) { .doc-wall { grid-template-columns: 1fr 1fr; } }
.doc-wall li { padding: var(--s5); background: var(--ink); color: var(--paper); border-radius: 6px; }
.doc-wall blockquote { margin: 0; }
.doc-wall p { font-family: var(--serif); font-size: var(--fs-l); line-height: 1.6; margin-bottom: var(--s2); }
.doc-wall .doc-who { font-family: var(--sans); font-size: var(--fs-s); color: var(--cloth-gold); margin: 0; }
.stones { --p: 0; }
.stones-art { position: relative; height: 150px; margin: var(--s4) 0; border-radius: 8px; background: linear-gradient(180deg, #EFEBE5, #E7E1D8); overflow: hidden; }
.stone { position: absolute; left: var(--x); top: var(--y); width: calc(var(--r) * 2); height: calc(var(--r) * 1.5); transform: translate(-50%, -50%) scale(calc(1 - var(--p) * .85)); border-radius: 48% 52% 45% 55%; background: #8E877D; opacity: calc(1 - var(--p)); box-shadow: inset -4px -6px 0 rgba(0,0,0,.12); }
.glow { position: absolute; left: 50%; top: 55%; width: 260px; height: 260px; transform: translate(-50%, -50%) scale(calc(.2 + var(--p) * .8)); border-radius: 50%; background: radial-gradient(circle, rgba(255,214,140,.95) 0%, rgba(255,214,140,.35) 45%, transparent 70%); opacity: var(--p); }
.stones-line { color: var(--ink-2); }
.stones-after { font-family: var(--serif); font-size: var(--fs-l); color: var(--gold-ink); opacity: calc(.35 + var(--p) * .65); }
.lt-paper { padding: var(--s5); background: #FFFDF8; border: 1px solid var(--line); border-radius: 6px; background-image: repeating-linear-gradient(transparent 0 35px, #F0E7DA 35px 36px); }
.lt-to { display: flex; align-items: center; gap: var(--s2); font-family: var(--serif); font-size: var(--fs-l); color: var(--ink); }
.lt-to select { width: auto; min-height: 40px; }
.lt-starters { display: flex; flex-wrap: wrap; gap: var(--s2); margin-bottom: var(--s3); }
.lt-starter { font: inherit; font-size: var(--fs-s); padding: var(--s2) var(--s3); border: 1px dashed var(--gold); background: #fff; border-radius: 999px; color: var(--gold-ink); cursor: pointer; }
.lt-text { background: transparent; font-family: var(--serif); font-size: var(--fs-l); line-height: 36px; }

.doc-video { position: relative; background: #111; border-radius: 6px; overflow: hidden; box-shadow: 0 18px 36px -22px rgba(42,38,34,.6); }
.yt-cover { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: #111; cursor: pointer; }
.yt-cover img { width: 100%; height: 100%; object-fit: cover; opacity: .88; transition: opacity .2s; }
.yt-cover:hover img { opacity: 1; }
.yt-play { position: absolute; left: 50%; top: 50%; width: 76px; height: 54px; transform: translate(-50%, -50%); background: rgba(42,38,34,.82); border-radius: 14px; }
.yt-play::after { content: ""; position: absolute; left: 31px; top: 15px; border-style: solid; border-width: 12px 0 12px 20px; border-color: transparent transparent transparent #fff; }
.yt-cover:hover .yt-play, .yt-cover:focus-visible .yt-play { background: var(--gold-ink); }
.doc-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.doc-link { font-size: var(--fs-s); text-align: right; margin: var(--s2) 0 var(--s5); }
.doc-after { font-family: var(--serif); font-weight: 700; margin-bottom: 0; }

.all-intro { margin: var(--s3) 0 0; }
.topic-group { padding: var(--s6) 0 var(--s2); border-bottom: 1px solid var(--line); }
.topic-group:last-child { border-bottom: 0; }
.topic-group-h { display: flex; align-items: baseline; gap: var(--s3); font-size: var(--fs-xl); margin-bottom: var(--s5); }
.topic-group-h a { color: var(--ink); text-decoration: none; border-bottom: 2px solid var(--gold); }
.topic-group-h a:hover { color: var(--gold-ink); }
.topic-group-h a::after { content: " ›"; color: var(--gold-ink); }
.topic-group-h .topic-count { font-family: var(--sans); font-size: var(--fs-s); font-weight: 400; margin-left: 0; }

.doc-videos { display: grid; gap: var(--s5); margin: var(--s5) 0 var(--s6); }
@media (min-width: 640px) { .doc-videos { grid-template-columns: 1fr 1fr; } }
.doc-fig { margin: 0; }
.doc-fig .doc-video { aspect-ratio: 16 / 9; margin: 0 0 var(--s3); }
.doc-fig figcaption { font-size: var(--fs-s); color: var(--ink-2); line-height: 1.7; }
.doc-name { display: block; font-family: var(--serif); font-weight: 700; font-size: var(--fs-l); color: var(--ink); margin-bottom: 2px; }
.doc-fig figcaption a { white-space: nowrap; }

/* 第三批：世紀大媒婆、新娘訓練班、遊走刀鋒的外遇、有情人、陳顧問時間 */
.lp-harbor { background: linear-gradient(180deg, #F6EEDF 0%, #E4E9E6 100%); }
.lp-pearl { background: linear-gradient(135deg, #FDF8F6 0%, #F3E6E8 100%); }
.lp-dusk { background: linear-gradient(160deg, #F1ECE6 0%, #E2DAD6 100%); }
.lp-mist { background: linear-gradient(160deg, #EFF0EC 0%, #E3E6E0 100%); }
.tg { width: 100%; max-width: 420px; padding: var(--s5); background: #FFFDF8; border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 18px 34px -22px rgba(42,38,34,.45); transition: background .3s; }
.tg.is-b { background: #FFF6E6; }
.tg-switch { display: grid; grid-template-columns: 1fr 1fr; padding: 4px; background: var(--paper-2); border-radius: 999px; margin-bottom: var(--s4); }
.tg-switch button { font: inherit; font-size: var(--fs-s); padding: var(--s2) var(--s3); border: 0; border-radius: 999px; background: transparent; color: var(--ink-2); cursor: pointer; }
.tg-switch button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.tg-switch button[data-side="b"][aria-pressed="true"] { background: var(--gold-ink); }
.tg-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3); }
.tg-list li { line-height: 1.75; padding-left: var(--s4); border-left: 2px solid var(--line); animation: answer-in .3s ease-out; }
.tg-a li { color: var(--ink-2); text-decoration: line-through; text-decoration-color: rgba(186,117,23,.6); }
.tg-b li { border-left-color: var(--gold); font-family: var(--serif); }
.pick-opts { display: grid; gap: var(--s2); margin: var(--s4) 0; }
.score-num { font-size: var(--fs-s); color: var(--ink-2); }
.score-num strong { font-family: var(--serif); font-size: var(--fs-2xl); color: var(--gold-ink); }
.score-note { margin-top: var(--s3); }
.cmp-bar { display: grid; grid-template-columns: auto 1fr auto; gap: var(--s3); align-items: center; font-size: var(--fs-s); color: var(--ink-2); margin: var(--s4) 0; }
.cmp-bar input { min-height: 0; padding: 0; accent-color: var(--gold-ink); border: 0; }
.cmp-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3); }
.cmp-rows li { position: relative; display: grid; padding: var(--s4) var(--s5); background: #fff; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.cmp-a, .cmp-b { grid-area: 1 / 1; margin: 0; line-height: 1.75; transition: opacity .2s; }
.cmp-a { opacity: calc(1 - var(--c) * 1.6); color: var(--ink-2); }
.cmp-b { opacity: calc(var(--c) * 1.6 - .6); font-family: var(--serif); }
.is-after .cmp-rows li { border-color: var(--gold); background: #FFF8EC; }
.cmp-tag { display: block; font-family: var(--sans); font-size: var(--fs-xs); letter-spacing: .1em; color: var(--gold-ink); margin-bottom: var(--s1); }
.scene-q { font-family: var(--serif); font-size: var(--fs-l); }
.fit-boxes { display: grid; gap: var(--s2); margin: var(--s4) 0; }
.fit-box { align-items: flex-start; }
.lp-typing .caret { display: inline-block; width: 2px; height: 1em; margin-left: 3px; background: var(--gold-ink); vertical-align: -.1em; animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
/* 中段 CTA */
.lp-mini-cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s4); margin: var(--s5) 0 0; padding: var(--s4) var(--s5); background: var(--cloth); color: var(--cloth-ink); border-radius: 6px; animation: answer-in .35s ease-out; }
.lp-mini-cta[hidden] { display: none; }
.lp-mini-cta span { font-family: var(--serif); font-size: var(--fs-l); }
.lp-mini-cta .btn { margin-left: auto; background: var(--cloth-ink); color: var(--cloth); }
/* 結尾 CTA 補充 */
.lp-offer { color: var(--cloth-gold); font-size: var(--fs-s); margin: var(--s5) 0 0; }
.lp-stores { font-size: var(--fs-s); opacity: .9; margin: var(--s4) 0 0; }
.lp-stores a { color: var(--cloth-gold); }

/* 系列書整合 */
.lp-vol { display: inline-block; font-size: var(--fs-xs); letter-spacing: .1em; color: var(--paper); background: var(--gold-ink); padding: 2px var(--s3); border-radius: 999px; margin-bottom: var(--s3); }
.scene2-panel { display: grid; gap: var(--s3); }
.scene2 { padding: var(--s4) var(--s5); background: var(--paper-2); border-radius: 6px; border-left: 3px solid var(--gold); }
.scene2 p:last-child { margin-bottom: 0; }
.scene2-vol { font-size: var(--fs-xs); letter-spacing: .08em; color: var(--gold-ink); margin-bottom: var(--s2); }
.scene2-vol span { color: var(--ink-2); margin-left: var(--s3); letter-spacing: 0; }
.draw-src { font-size: var(--fs-s); color: var(--ink-2); margin-top: var(--s3) !important; }
.tl-items { list-style: none; margin: var(--s4) 0; padding: 0; display: grid; gap: var(--s2); }
.tl-item { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--s2) var(--s4); padding: var(--s3) var(--s4); background: #fff; border: 1px solid var(--line); border-radius: var(--radius); }
.tl-name { font-family: var(--serif); font-weight: 700; }
.tl-btns { display: flex; gap: var(--s2); }
.tl-btns .quiz-opt { width: auto; padding: var(--s1) var(--s3); font-size: var(--fs-s); }
.tl-item[data-to="a"] { border-color: var(--gold-ink); background: #FFF8EC; }
.tl-item[data-to="b"] { opacity: .7; }
.tl-add { display: flex; gap: var(--s2); }
.tl-add input { flex: 1; }
.tl-cols { display: grid; gap: var(--s4); }
@media (min-width: 640px) { .tl-cols { grid-template-columns: 1fr 1fr; } }
.tl-cols ul { margin: 0; padding-left: 1.2em; }
.tl-done { margin: var(--s4) 0 0; padding-top: var(--s3); border-top: 1px dashed var(--line); }
.stars { color: var(--gold); letter-spacing: 2px; }
.lp-quotes .rot { max-width: none; margin-top: var(--s3); }

/* 防垃圾訊息的陷阱欄位：畫面外，讀者看不到 */
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.pv-note { margin: var(--s2) 0; }
.pv-table { width: 100%; border-collapse: collapse; font-size: var(--fs-s); margin: var(--s4) 0; display: block; overflow-x: auto; }
.pv-table th, .pv-table td { text-align: left; vertical-align: top; padding: var(--s3); border-bottom: 1px solid var(--line); }
.pv-table th { background: var(--paper-2); white-space: nowrap; }
.privacy h2 { margin-top: var(--s2); }

/* 首頁：總編輯選書、書架下方的訂購入口 */
.editor-pick { max-width: var(--narrow); margin: 0 0 var(--s6); padding: var(--s4) 0 var(--s4) var(--s5); border-left: 2px solid var(--gold); }
.editor-pick-label { margin: 0 0 var(--s2); font-size: var(--fs-xs); letter-spacing: .14em; color: var(--gold-ink); }
.editor-pick-text { margin: 0 0 var(--s3); font-family: var(--serif); font-size: var(--fs-m); line-height: 1.85; color: var(--ink); }
.shelf-intro { max-width: var(--narrow); margin: 0 0 var(--s5); color: var(--ink-2); font-size: var(--fs-m); line-height: 1.85; }
.shelf-cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s4); margin: var(--s6) 0 0; color: var(--ink-2); font-size: var(--fs-s); }

/* 書籍頁新增互動模組的補充樣式 */
.lp-mod .rot { margin: var(--s4) auto 0; }
@media (min-width: 720px) { .flips.flips-4 { grid-template-columns: repeat(2, 1fr); } }
.lp-chapters { margin: var(--s3) 0 0; border-bottom: 1px solid var(--line); }
.lp-chapters summary { cursor: pointer; padding: var(--s3) 0; font-family: var(--serif); font-size: var(--fs-l); }
.lp-chapters ol, .lp-chapters ul { margin: 0 0 var(--s4); padding-left: var(--s5); }
.lp-chapters li { margin: 0 0 var(--s3); line-height: 1.8; }
.lp-chapters li strong { display: block; }
.lp-chapters li span { color: var(--ink-2); font-size: var(--fs-s); }

/* 章節／生活面向的摺疊選單：和其他書的摺疊問答一致（右側＋／−） */
.lp-chapters summary { list-style: none; position: relative; padding-right: var(--s6); }
.lp-chapters summary::-webkit-details-marker { display: none; }
.lp-chapters summary::after { content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font-family: var(--sans); color: var(--gold-ink); font-size: 1.3em; }
.lp-chapters[open] summary::after { content: "−"; }

/* =========================================================
   編輯部文章、首頁品牌主張、品書時間引言
   ========================================================= */
.article { padding: var(--s6) var(--s5) var(--s8); }
.article-head { padding-bottom: var(--s5); border-bottom: 2px solid var(--ink); margin-bottom: var(--s5); }
.article-kicker { font-size: var(--fs-xs); letter-spacing: .12em; color: var(--gold-ink); margin-bottom: var(--s3); }
.article h1 { font-size: clamp(1.6rem, 5.4vw, 2.5rem); line-height: 1.45; }
.article-lead { font-family: var(--serif); font-size: var(--fs-l); line-height: 1.85; color: var(--ink-2); margin: 0; }
.article > section { padding: var(--s5) 0; }
.article h2 { font-size: var(--fs-xl); }
.article p { line-height: 2; }
.article-table td:first-child { white-space: nowrap; font-weight: 700; }
.article-pull { margin: var(--s4) 0 var(--s5); padding: var(--s5) var(--s5); border-left: 3px solid var(--gold); background: var(--paper-2); }
.article-pull p { font-family: var(--serif); font-weight: 700; font-size: var(--fs-xl); line-height: 1.6; margin: 0; }
.article-ask { margin-top: var(--s4); padding: var(--s6) var(--s5) !important; background: #FFF8EC; border: 1px solid var(--gold); border-radius: 6px; }
.article-q { font-family: var(--serif); font-size: var(--fs-xl); line-height: 1.6; color: var(--gold-ink); }
.article-more { border-top: 1px solid var(--line); margin-top: var(--s6); }
.article-more .book-list { margin-top: var(--s4); }
@media (min-width: 640px) { .article-more .book-list { grid-template-columns: repeat(3, 1fr); } }
.article-club { margin-top: var(--s6); padding: var(--s6) var(--s5); background: var(--cloth); color: var(--cloth-ink); border-radius: 6px; }
.article-club h2 { color: var(--cloth-ink); }
.feature-article { padding: var(--s6) var(--s5); margin-bottom: var(--s6); background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--gold); border-radius: 6px; }
.feature-article h2 { font-size: var(--fs-xl); line-height: 1.5; margin-bottom: var(--s3); }
.feature-article h2 a { color: var(--ink); text-decoration: none; }
.feature-article h2 a:hover { color: var(--gold-ink); }
.notes-h { margin-bottom: 0; }
.claim { padding: var(--s8) 0; text-align: center; border-bottom: 1px solid var(--line); }
.claim-main { font-family: var(--serif); font-weight: 700; font-size: clamp(1.5rem, 5vw, 2.25rem); line-height: 1.55; margin-bottom: var(--s3); }
.claim-sub { color: var(--ink-2); font-size: var(--fs-l); margin-bottom: var(--s4); }
.beyond-q { font-family: var(--serif); font-size: var(--fs-l); color: var(--cloth-gold); margin-bottom: var(--s3); }
.club-q { margin: var(--s5) 0 var(--s3); padding-left: var(--s4); border-left: 3px solid var(--gold); }
.club-q p { font-family: var(--serif); font-size: var(--fs-xl); line-height: 1.6; margin: 0; }
.club-q-text { color: var(--ink-2); max-width: 36em; }

/* 為什麼要買這本書：書裡有什麼、品書時間、送禮、推薦組合 */
.inside-box { margin: var(--s4) 0; padding: var(--s4) var(--s5); background: #fff; border: 1px solid var(--line); border-left: 3px solid var(--gold); border-radius: var(--radius); }
.inside-t { font-size: var(--fs-xs); letter-spacing: .12em; color: var(--gold-ink); margin-bottom: var(--s2); }
.inside-box ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s1); }
.inside-box li { font-family: var(--serif); font-weight: 700; line-height: 1.7; padding-left: 1.1em; position: relative; }
.inside-box li::before { content: "✓"; position: absolute; left: 0; color: var(--gold-ink); font-family: var(--sans); }
.club-buy, .gift-line { font-size: var(--fs-s); color: var(--ink-2); margin: var(--s2) 0; }
.club-buy { color: var(--cloth); font-weight: 700; }
.session-buy { font-size: var(--fs-s); margin: 2px 0 0; }
.beyond-buy { font-size: var(--fs-s); opacity: .9; }
.beyond-buy a { color: var(--cloth-gold); }
.bundle-box { margin-top: var(--s5); padding: var(--s4) var(--s5); background: #FFF8EC; border: 1px solid var(--gold); border-radius: 6px; }
.bundle-t { font-size: var(--fs-xs); letter-spacing: .12em; color: var(--gold-ink); margin-bottom: var(--s1); }
.bundle-names { font-family: var(--serif); font-weight: 700; margin-bottom: var(--s1); }
.bundle-price { font-size: var(--fs-s); color: var(--ink-2); }
.bundle-price strong { font-family: var(--serif); font-size: var(--fs-l); color: var(--gold-ink); }
.gifts { padding-bottom: var(--s8); }
.gift-group { padding: var(--s6) 0; border-top: 1px solid var(--line); }
.gift-when { font-size: var(--fs-s); color: var(--ink-2); margin-bottom: var(--s5); }
.gift-tip { margin-top: var(--s6); padding: var(--s6) var(--s5); background: var(--paper-2); border-radius: 6px; text-align: center; }

/* 推薦卡：先被說中（你選了），再被帶往方向 */
.answer-q { margin-bottom: var(--s1); }
.answer-dir { font-family: var(--serif); font-weight: 700; font-size: var(--fs-l); color: var(--gold-ink); margin-bottom: var(--s4); line-height: 1.5; }
.answer-dir span { display: block; font-family: var(--sans); font-weight: 400; font-size: var(--fs-xs); letter-spacing: .12em; color: var(--ink-2); margin-bottom: 2px; }

/* 手機：首頁問題字級略縮，讓 16 字的問題維持一行 */
@media (max-width: 639px) { .toc-list a { font-size: 1rem; gap: var(--s2); } .toc-dots { min-width: 12px; } }

/* 品書時間頁（整合原報名頁） */
.club-page > section { padding: var(--s6) 0; border-top: 1px solid var(--line); }
.club-facts { display: grid; grid-template-columns: 4em 1fr; gap: var(--s2) var(--s4); margin: var(--s4) 0; }
.club-facts dt { color: var(--ink-2); font-size: var(--fs-s); padding-top: .15em; }
.club-facts dd { margin: 0; }
.vm-cover { background: linear-gradient(135deg, var(--cloth) 0%, #1F3331 100%); display: grid; place-items: center; }
.vm-title { position: absolute; left: var(--s4); bottom: var(--s3); font-family: var(--serif); font-weight: 700; color: var(--cloth-ink); font-size: var(--fs-l); text-align: left; }
.price-list small { font-size: var(--fs-xs); opacity: .85; }
.club-bank { margin: var(--s4) 0 var(--s3); }
.club-bank dt, .club-bank dd { color: var(--cloth-ink); }
.club-bank .link-btn { color: var(--cloth-gold); }
.club-box .form-note strong { color: var(--cloth-gold); }
.club-choice { margin: var(--s3) 0 0; padding: var(--s3) var(--s4); border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.club-choice legend { font-family: var(--sans); font-size: var(--fs-s); font-weight: 400; color: var(--ink-2); padding: 0 var(--s1); margin: 0; }
.club-choice .check { margin: var(--s2) 0; }
.club-choice input[type=radio] { width: 20px; min-height: 20px; accent-color: var(--gold-ink); }
.club-choice input[type=checkbox] { accent-color: var(--gold-ink); }

/* =========================================================
   公益送書計畫「讓好書走得更遠」
   ========================================================= */
.give-hero { padding: var(--s7) 0; background: linear-gradient(160deg, #EEF2EE 0%, #F7F1E6 100%); border-bottom: 1px solid var(--line); }
.give-hero-inner { display: grid; gap: var(--s6); align-items: center; }
@media (min-width: 960px) { .give-hero-inner { grid-template-columns: 1.3fr 1fr; gap: var(--s8); } }
.give-hero h1 { font-size: clamp(2rem, 7vw, 3.25rem); letter-spacing: .06em; margin-bottom: var(--s4); }
.give-sub { font-size: var(--fs-l); line-height: 1.85; color: var(--ink-2); max-width: 30em; }
.give-third a { color: var(--cloth); font-weight: 700; }
.give-status { font-size: var(--fs-s); color: var(--ink-2); margin-top: var(--s4); }
.give-status span, .tbd { display: inline-block; font-size: var(--fs-xs); letter-spacing: .08em; padding: 1px var(--s2); border-radius: 999px; background: var(--cloth); color: var(--cloth-ink); margin-right: var(--s2); vertical-align: .1em; }
.tbd { background: #F3E3C3; color: var(--gold-ink); margin: 0 2px; }
.give-covers { position: relative; height: 260px; max-width: 360px; margin: 0 auto; width: 100%; }
.give-cover { position: absolute; width: 150px; top: 20px; box-shadow: 0 18px 34px -18px rgba(42,38,34,.5); }
.give-c0 { left: 0; transform: rotate(-7deg); } .give-c1 { left: 105px; top: 0; z-index: 2; } .give-c2 { right: 0; transform: rotate(6deg); }
@media (max-width: 639px) { .give-covers { height: 200px; } .give-cover { width: 110px; } .give-c1 { left: calc(50% - 55px); } }
.give { padding-bottom: var(--s8); }
.give-sec { padding: var(--s7) 0; border-bottom: 1px solid var(--line); }
.give-sec > h2 { font-size: var(--fs-2xl); margin-bottom: var(--s4); }
.give-sec > p { max-width: 42em; line-height: 1.95; }
.give-why { display: grid; gap: var(--s4); margin-top: var(--s5); }
@media (min-width: 800px) { .give-why { grid-template-columns: repeat(3, 1fr); } }
.give-why > div { padding: var(--s5); background: #fff; border: 1px solid var(--line); border-radius: 6px; }
.give-why h3 { font-size: var(--fs-l); margin-bottom: var(--s2); }
.give-why p { color: var(--ink-2); margin: 0; line-height: 1.85; }
.give-principle { margin-top: var(--s5); padding-left: var(--s4); border-left: 3px solid var(--gold); font-family: var(--serif); font-weight: 700; font-size: var(--fs-l); }
.give-ways { display: grid; gap: var(--s4); margin-top: var(--s5); }
@media (min-width: 900px) { .give-ways { grid-template-columns: repeat(3, 1fr); } }
.give-way { display: flex; flex-direction: column; padding: var(--s5); background: #fff; border: 1px solid var(--line); border-top: 3px solid var(--cloth); border-radius: 6px; }
.give-way-tag { font-size: var(--fs-xs); letter-spacing: .1em; color: var(--cloth); margin-bottom: var(--s1); }
.give-way h3 { font-size: var(--fs-xl); margin-bottom: var(--s3); }
.give-way ol { margin: 0 0 var(--s5); padding-left: 1.3em; color: var(--ink-2); line-height: 1.85; flex: 1; }
.give-way .btn { align-self: flex-start; }
.give-books { margin-top: var(--s5); }
@media (min-width: 640px) { .give-books { grid-template-columns: repeat(3, 1fr); } }
.give-use { font-size: var(--fs-s); color: var(--ink-2); line-height: 1.7; margin: var(--s2) 0 0; padding-top: var(--s2); border-top: 1px dashed var(--line); }
.give-use span { display: block; font-size: var(--fs-xs); letter-spacing: .08em; color: var(--cloth); }
.give-form-sec .give-form { max-width: 36em; margin-top: var(--s4); padding: var(--s5); background: #fff; border: 1px solid var(--line); border-radius: 6px; }
.give-either { margin-top: calc(var(--s1) * -1); }
.give-empty { padding: var(--s6) var(--s5); border: 2px dashed var(--line); border-radius: 6px; text-align: center; color: var(--ink-2); }
.give-empty p:last-child { margin: 0; max-width: 36em; margin-inline: auto; }
.give-end { margin-top: var(--s7); padding: var(--s7) var(--s5); background: var(--cloth); color: var(--cloth-ink); border-radius: 8px; text-align: center; }
.give-end h2 { color: var(--cloth-ink); font-size: clamp(1.4rem, 4.4vw, 2rem); line-height: 1.55; }
.give-end p { max-width: 34em; margin-inline: auto; }
.give-end .cta-row { justify-content: center; }

/* ===== 首頁活絡化 第一步 ===== */
/* 標題逐行淡入（只在從外面進站時） */
.intro .ht-line { display: inline-block; opacity: 0; transform: translateY(8px); animation: ht-in .55s ease-out forwards; }
.intro .ht-line:nth-of-type(2) { animation-delay: .14s; }
@keyframes ht-in { to { opacity: 1; transform: none; } }
/* 「你最近在想什麼？」更醒目＋引導句 */
.hero .toc-title { font-size: var(--fs-xl); }
.toc-guide { font-size: var(--fs-s); color: var(--ink-2); margin: var(--s2) 0 0; }
/* 心境清單：懸停時整列微微浮起 */
/* 懸停底色用 ::before 畫在文字後方，左右多出一點空間，但分隔線維持原本的寬度 */
.toc-list a { position: relative; isolation: isolate; transition: color .2s ease, transform .2s ease; }
.toc-list a::before { content: ""; position: absolute; z-index: -1; inset: 3px calc(var(--s3) * -1); border-radius: 6px; background: transparent; transition: background-color .2s ease, box-shadow .2s ease; }
.toc-list a:hover, .toc-list a:focus-visible { transform: translateY(-1px); }
.toc-list a:hover::before, .toc-list a:focus-visible::before { background: #fff; box-shadow: 0 6px 18px -12px rgba(42,38,34,.45); }
.toc-list a[aria-expanded="true"]::before { background: #FFF8EC; box-shadow: inset 3px 0 0 var(--gold); }
.toc-list a:hover .toc-dots { border-color: var(--gold); }
/* 「3 本」改成圓角標籤 */
.toc-count { display: inline-block; padding: 2px 10px; border-radius: 999px; background: var(--paper-2); border: 1px solid var(--line); font-size: var(--fs-xs); line-height: 1.6; white-space: nowrap; transition: background-color .2s, border-color .2s, color .2s; }
.toc-list a:hover .toc-count, .toc-list a[aria-expanded="true"] .toc-count { background: var(--gold-ink); border-color: var(--gold-ink); color: #fff; }
/* 讀者的話：柔和切換＋控制鈕 */
.hero-answer { transition: opacity .28s ease; }
.hero-answer.is-fading { opacity: 0; }
.voice-ctrl { display: flex; align-items: center; gap: var(--s2); margin-top: var(--s4); font-size: var(--fs-xs); color: var(--ink-2); }
.voice-ctrl button { font: inherit; min-width: 32px; min-height: 32px; padding: 0 var(--s2); border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--ink-2); cursor: pointer; }
.voice-ctrl button:hover { border-color: var(--gold); color: var(--gold-ink); }
.voice-ctrl .voice-pause { margin-left: var(--s2); }
.voice-n { min-width: 4.5em; text-align: center; font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) { .toc-list a:hover { transform: none; } }

/* ===== 首頁活絡化 第二步：暖色亮點＋清單小圖標 =====
   暖色只用在：訂購按鈕、問題的數量標籤（懸停／選中）、選中問題的左側線、圖標懸停、輪播控制鈕
   換顏色只要改 --accent 這一行（磚紅 #B4513A／琥珀 #A65617／玫瑰 #B04A62） */
:root { --accent: #B4513A; --accent-ink: #FFFFFF; }
.header-order { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.header-order:hover, .header-order:focus-visible { background: color-mix(in srgb, var(--accent) 86%, #000); border-color: color-mix(in srgb, var(--accent) 86%, #000); color: var(--accent-ink); }
.toc-list a:hover .toc-count, .toc-list a[aria-expanded="true"] .toc-count { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.toc-list a[aria-expanded="true"]::before { box-shadow: inset 3px 0 0 var(--accent); }
.toc-list a:hover .toc-dots, .toc-list a[aria-expanded="true"] .toc-dots { border-color: var(--accent); }
.voice-ctrl button:hover { border-color: var(--accent); color: var(--accent); }
.toc-ico { flex: none; width: 24px; height: 24px; color: var(--ink-2); align-self: center; transition: color .2s ease, transform .2s ease; }
.toc-list a:hover .toc-ico, .toc-list a[aria-expanded="true"] .toc-ico { color: var(--accent); transform: scale(1.08); }
/* 手機：顯示較小的圖標，拿掉問題後面的虛線，讓 8 題都維持一行 */
@media (max-width: 639px) { .toc-ico { width: 16px; height: 16px; } .toc-dots { display: none; } .toc-count { margin-left: auto; } }

/* 特別窄的手機：數量標籤縮小一點 */
@media (max-width: 379px) { .toc-count { padding: 1px 6px; letter-spacing: 0; } .toc-dots { min-width: 6px; } .toc-list a { gap: 6px; } }

/* ===== 首頁強化：A 劃線、B 浮現、C 書封、D 作者 ===== */
/* B：捲動到時輕輕浮現 */
.motion-ok .reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }
.motion-ok .reveal.is-in { opacity: 1; transform: none; }
/* A：「原本以為」被一筆劃掉，接著「換個角度」浮現 */
.motion-ok .angle.strike-ready .angle-before s { text-decoration: none; background: linear-gradient(var(--accent), var(--accent)) no-repeat 0 58% / 0% 2px; transition: background-size .7s ease; transition-delay: calc(var(--i) * .25s + .2s); }
.motion-ok .angle.strike-ready.is-in .angle-before s { background-size: 100% 2px; }
.motion-ok .angle.strike-ready .angle-after, .motion-ok .angle.strike-ready .angle-book { opacity: 0; transform: translateY(8px); transition: opacity .6s ease, transform .6s ease; transition-delay: calc(var(--i) * .25s + .85s); }
.motion-ok .angle.strike-ready.is-in .angle-after, .motion-ok .angle.strike-ready.is-in .angle-book { opacity: 1; transform: none; }
/* C：書封懸停時，像一本書被拿起來 */
.book-link .cover { transition: transform .35s ease, box-shadow .35s ease; transform-origin: 30% 50%; }
.book-link:hover .cover, .book-link:focus-visible .cover { transform: perspective(900px) rotateY(-9deg) translateY(-4px); box-shadow: 0 2px 4px rgba(42,38,34,.18), 14px 22px 32px -16px rgba(42,38,34,.55); }
@media (prefers-reduced-motion: reduce) { .book-link:hover .cover { transform: none; } }
/* D：作者區塊更有份量 */
.author-feature { background: var(--paper-2); }
.author-feature .author-teaser-inner { align-items: center; }
.author-feature .portrait { width: 160px; height: 160px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 6px var(--paper), 0 0 0 7px var(--line), 0 18px 34px -18px rgba(42,38,34,.5); }
@media (min-width: 800px) { .author-feature .author-teaser-inner { grid-template-columns: 240px 1fr; gap: var(--s8); } .author-feature .portrait { width: 240px; height: 240px; } }
.author-kicker { font-size: var(--fs-xs); letter-spacing: .14em; color: var(--accent); margin-bottom: var(--s2); }
.author-facts { list-style: none; margin: var(--s5) 0; padding: 0; display: grid; gap: var(--s3); }
@media (min-width: 640px) { .author-facts { grid-template-columns: repeat(3, 1fr); } }
.author-facts li { padding: var(--s4); background: var(--paper); border: 1px solid var(--line); border-radius: 6px; }
.author-facts strong { display: block; font-family: var(--serif); font-size: var(--fs-xl); color: var(--ink); line-height: 1.3; margin-bottom: var(--s1); }
.author-facts span { font-size: var(--fs-s); color: var(--ink-2); line-height: 1.6; }

/* ===== 書籍頁強化（夢想與妄想）：作者故事、章節預覽、讀者心得、系列組合 ===== */
.author-story { padding: var(--s6) var(--s5) !important; background: var(--paper-2); border-radius: 8px; margin: var(--s5) 0; }
.story-kicker { font-size: var(--fs-xs); letter-spacing: .14em; color: var(--accent); margin-bottom: var(--s2); }
.author-story h2 { font-size: var(--fs-xl); line-height: 1.5; }
.story-quote { margin: var(--s4) 0 var(--s5); padding-left: var(--s4); border-left: 3px solid var(--accent); }
.story-quote p { font-family: var(--serif); font-size: var(--fs-l); line-height: 1.85; margin: 0; }
.story-saw-t { font-size: var(--fs-s); color: var(--ink-2); margin-bottom: var(--s2); }
.story-saw li { font-size: var(--fs-s); }
.ch-list { margin: var(--s3) 0 0; padding-left: 1.6em; display: grid; gap: var(--s3); }
.ch-list li { line-height: 1.75; color: var(--ink-2); }
.ch-list li::marker { font-family: var(--serif); font-weight: 700; color: var(--accent); }
.ch-list strong, .ch-list b { color: var(--ink); }
.ch-more { margin-top: var(--s3); }
.ed-inline { margin-top: var(--s5); padding: var(--s4) var(--s5); border-left: 3px solid var(--gold); background: #fff; border-radius: 0 6px 6px 0; }
.ed-inline-t { font-size: var(--fs-xs); letter-spacing: .12em; color: var(--gold-ink); margin-bottom: var(--s2); }
.ed-inline p:last-child { margin: 0; line-height: 1.9; }
.reviews-grid { display: grid; gap: var(--s4); }
@media (min-width: 640px) { .reviews-grid { grid-template-columns: 1fr 1fr; } }
.rv-share { margin-top: var(--s5); }
.rv-share summary { font-size: var(--fs-l); }
.series-box { margin: var(--s6) 0; padding: var(--s6) var(--s5) !important; background: #FFF8EC; border: 1px solid var(--gold); border-radius: 8px; }
.series-box h2 { font-size: var(--fs-xl); }
.series-path { list-style: none; margin: var(--s5) 0 var(--s4); padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s3); counter-reset: s; }
.series-path a { display: grid; gap: var(--s2); color: var(--ink); text-decoration: none; font-size: var(--fs-s); line-height: 1.5; }
.series-path .cover { width: 100%; max-width: 120px; }
.series-path strong { display: block; color: var(--accent); font-size: var(--fs-xs); letter-spacing: .06em; }
.series-path a:hover span:last-child { text-decoration: underline; }
.series-price { font-size: var(--fs-s); color: var(--ink-2); margin-bottom: var(--s3); }
.series-price strong { font-family: var(--serif); font-size: var(--fs-xl); color: var(--accent); }
.series-club { font-size: var(--fs-s); color: var(--ink-2); margin: var(--s4) 0 0; padding-top: var(--s3); border-top: 1px dashed var(--line); }
.mini-series { color: var(--cloth-gold); font-size: var(--fs-s); order: 3; flex-basis: 100%; }
.hero-mini-cover { display: none; }
@media (max-width: 959px) { .hero-mini-cover { display: block; width: 84px; float: right; margin: 0 0 var(--s3) var(--s4); } }