/* Read & Talk 日本語 landing 素版樣式
   token 與 web/src/index.css 同名同值（和紙書房調＋深淺雙模），之後由 Sean 換皮。
   零第三方資源：不 @import、不載字型。 */

:root {
  --surface: #f2f0eb;
  --surface-raised: #ffffff;
  --text-primary: #2a2622;
  --text-secondary: #6b645c;
  --accent: #8a7a5c;
  --accent-text: #6f6248;
  --text-on-accent: #ffffff;
  --border-subtle: #e3ded3;
  --shadow-card: 0 2px 12px rgba(0, 0, 0, 0.08);
  --radius-card: 16px;
  --radius-pill: 999px;
  --font-sans: system-ui, -apple-system, 'Hiragino Sans',
    'Hiragino Kaku Gothic ProN', 'Yu Gothic', 'PingFang TC',
    'Microsoft JhengHei', sans-serif;
  --font-scale: 1;
}

@media (prefers-color-scheme: dark) {
  :root {
    --surface: #201d19;
    --surface-raised: #2a2622;
    --text-primary: #ece7df;
    --text-secondary: #b3aa9c;
    --accent: #c9b083;
    --accent-text: #c9b083;
    --text-on-accent: #2a2622;
    --border-subtle: #45403a;
    --shadow-card: 0 2px 12px rgba(0, 0, 0, 0.4);
  }
}

/* 基礎 */
html {
  font-size: calc(18px * var(--font-scale, 1));
  line-height: 1.8;
}

body {
  margin: 0;
  padding-top: 4.5rem; /* 讓出右上角固定的字級鈕 */
  background: var(--surface);
  color: var(--text-primary);
  font-family: var(--font-sans);
  overflow-wrap: anywhere;
}

h1, h2, h3 { line-height: 1.4; }
h1 { font-size: 1.8rem; }
h2 { font-size: 1.45rem; }
h3 { font-size: 1.15rem; }

a { color: var(--accent-text); }
img { max-width: 100%; height: auto; display: block; }

:focus-visible {
  outline: 2px solid var(--accent-text);
  outline-offset: 2px;
}

/* 每個區塊：內文欄寬 ≤ 42rem、置中 */
.hero, .why, .story, .steps, .sample, .books, .faq, .cta, .site-footer {
  max-width: 42rem;
  margin-inline: auto;
  padding: 2rem 16px;
  box-sizing: border-box;
}

.hero-sub { font-size: 1.15rem; }
.hero-note, .books-intro, .steps-intro, .book-author, .sample-note,
.footnotes, figcaption, .site-footer {
  color: var(--text-secondary);
}
.footnotes { list-style: none; padding: 0; font-size: 0.85rem; }

/* 字級鈕：右上角固定、常駐 */
.font-scale {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 10;
  display: flex;
  gap: 0.5rem;
}
/* display:flex 會蓋掉 hidden 屬性，明確還原 */
.font-scale[hidden] { display: none; }

.font-scale-btn {
  min-width: 48px;
  min-height: 48px;
  padding: 0 12px;
  font: inherit;
  font-weight: 700;
  color: var(--accent-text);
  background: var(--surface-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-card);
  cursor: pointer;
}

/* CTA 按鈕：淺色用 --accent-text 底（--accent 在白上只有約 3.9:1） */
.button-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  min-width: 48px;
  padding: 0 28px;
  font-weight: 700;
  color: var(--text-on-accent);
  background: var(--accent-text);
  border-radius: var(--radius-pill);
  text-decoration: none;
}

.cta { text-align: center; }

/* 為什麼 / 書 */
.why-item, .book {
  margin-block: 1rem;
  padding: 1rem 1.25rem;
  background: var(--surface-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
}
.why-item h3, .book h3 { margin-top: 0; }
.why-item p, .book p { margin-block: 0.25rem; }

/* 四步：手機單欄，桌機左右並排、偶數對調 */
.step {
  margin-block: 2rem;
}
.step figure { margin: 0; }
.step img {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
}
/* 手機直式截圖：限寬置中，不要比桌機截圖還搶眼 */
.step img.shot-phone {
  max-width: min(100%, 18rem);
  margin-inline: auto;
}

@media (min-width: 900px) {
  .steps {
    max-width: 64rem; /* 圖文並排需要較寬；文字欄各自仍 ≤ 42rem */
  }
  .step {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto 1fr;
    column-gap: 2rem;
    align-items: start;
  }
  .step h3 { grid-column: 1; grid-row: 1; margin-bottom: 0; }
  .step p { grid-column: 1; grid-row: 2; }
  .step figure { grid-column: 2; grid-row: 1 / span 2; }
  .step:nth-of-type(even) h3,
  .step:nth-of-type(even) p { grid-column: 2; }
  .step:nth-of-type(even) figure { grid-column: 1; }
}

/* 範例對話 */
.sample-figure { margin: 0; }
.sample-text {
  margin: 0 0 1rem;
  padding-left: 1rem;
  border-left: 3px solid var(--border-subtle);
}
.sample-dialogue {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-block: 1rem;
}

/* 鐵則二：兩種泡泡只差對齊，顏色、邊框、裝飾完全相同 */
.bubble {
  max-width: 85%;
  margin: 0;
  padding: 0.75rem 1rem;
  background: var(--surface-raised);
  color: var(--text-primary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}
.turn { display: flex; flex-direction: column; gap: 0.25rem; max-width: 85%; }
.turn-user { align-self: flex-end; align-items: flex-end; }
.turn-character { align-self: flex-start; align-items: flex-start; }
.turn .bubble { max-width: 100%; }
/* 說話者標籤：兩邊同一種樣式，泡泡本身不動（鐵則二） */
.speaker {
  margin: 0;
  font-size: 0.85rem;
  color: var(--text-secondary);
}

/* FAQ */
.faq-item {
  border-bottom: 1px solid var(--border-subtle);
}
.faq-item summary {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding-block: 0.5rem;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
/* 展開提示：各瀏覽器一致，顏色沿用既有 token */
.faq-item summary::after {
  content: '＋';
  margin-left: auto;
  padding-left: 1rem;
  color: var(--text-secondary);
}
.faq-item[open] > summary::after { content: '－'; }
.faq-answer { padding-bottom: 1rem; }

.site-footer { font-size: 0.9rem; }
.site-footer a { display: inline-block; min-height: 48px; line-height: 48px; }