/* www.oretsu.com 上「要被讀完」的頁面共用樣式：隱私權政策、服務條款、404。
   首頁的 CSS 全部內嵌是為了 LCP（少一支阻塞請求）；這幾頁本來就是低流量的長文，
   共用一支可快取的 CSS 比較划算。

   色票與書口必須跟 index.html 一致，改的時候兩邊都要動——這是刻意的重複：
   首頁不肯為了共用而多發一支請求。 */

:root {
  --ground: #ffffff;
  --rail: #f5f5f5;
  --ink: #0a0a0a;
  --sub: #737373;
  --faint: #a3a3a3;
  --rule: #e5e5e5;
  --rule-strong: #d4d4d4;
  --rail-w: 3.25rem;
  --font-ming:
    "GenYoMinTC", "Hiragino Mincho ProN", "Yu Mincho", "Songti TC",
    "Noto Serif TC", "PMingLiU", serif;
  --font-ui:
    system-ui, -apple-system, "Segoe UI", "PingFang TC", "Microsoft JhengHei",
    "Noto Sans TC", sans-serif;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --ground: #131217;
    --rail: #201f29;
    --ink: #efebe2;
    --sub: #9c98a6;
    --faint: #6b6875;
    --rule: rgb(239 235 226 / 11%);
    --rule-strong: rgb(239 235 226 / 22%);
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --ground: #131217;
  --rail: #201f29;
  --ink: #efebe2;
  --sub: #9c98a6;
  --faint: #6b6875;
  --rule: rgb(239 235 226 / 11%);
  --rule-strong: rgb(239 235 226 / 22%);
  color-scheme: dark;
}

:root[data-theme="epaper"] {
  --ground: #e4e6e3;
  --rail: #c6c9c4;
  --ink: #1a1c19;
  --sub: #50544f;
  --faint: #8e928d;
  --rule: #b4b7b2;
  --rule-strong: #8e928d;
  color-scheme: light;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 17px;
  line-height: 1.9;
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
  text-decoration-color: var(--rule-strong);
  text-underline-offset: 3px;
}

a:hover {
  text-decoration-color: var(--ink);
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

/* ── 書口（同 index.html） ─────────────────────────────────────────────── */
.v {
  writing-mode: vertical-rl;
  line-height: 1;
  letter-spacing: 0.22em;
  margin-bottom: -0.22em;
  white-space: nowrap;
}

.rail {
  position: fixed;
  inset-block: 0;
  right: 0;
  z-index: 20;
  width: var(--rail-w);
  display: flex;
  flex-direction: column;
  background: var(--rail);
  border-left: 1px solid var(--rule);
  overflow-y: auto;
  scrollbar-width: none;
}

.rail::-webkit-scrollbar {
  display: none;
}

.rail-brand {
  align-self: center;
  padding: 1rem 0 1.25rem;
  font-family: var(--font-ming);
  font-size: 0.8125rem;
  color: var(--sub);
  text-decoration: none;
}

.rail-brand:hover {
  color: var(--ink);
}

.rail-tabs {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.rail-tab {
  display: flex;
  justify-content: center;
  padding-block: 0.85rem;
  font-family: var(--font-ming);
  font-size: 0.9375rem;
  color: var(--sub);
  text-decoration: none;
  border: 1px solid transparent;
  border-right: 0;
}

.rail-tab:hover {
  color: var(--ink);
}

/* 不往左伸出，理由見 index.html 的 .rail-tab[aria-current]。 */
.rail-tab[aria-current="page"] {
  margin-left: -1px;
  background: var(--ground);
  color: var(--ink);
  border-color: var(--rule);
  border-left-color: var(--ground);
}

.rail-go {
  display: flex;
  justify-content: center;
  padding-block: 0.9rem;
  background: var(--ink);
  color: var(--ground);
  font-size: 0.875rem;
  text-decoration: none;
}

.rail-go:hover {
  opacity: 0.88;
}

.rail-themes {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  padding-block: 0.75rem;
  border-top: 1px solid var(--rule);
}

.theme-btn {
  width: 1.75rem;
  height: 1.75rem;
  display: grid;
  place-items: center;
  font-size: 0.75rem;
  color: var(--sub);
}

.theme-btn:hover {
  color: var(--ink);
}

.theme-btn[aria-pressed="true"] {
  background: var(--ink);
  color: var(--ground);
}

.topbar {
  display: none;
}

@media (max-width: 899px) {
  .rail {
    display: none;
  }

  .topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    height: 3.25rem;
    padding-inline: 16px;
    background: var(--rail);
    border-bottom: 1px solid var(--rule);
  }

  .topbar-brand {
    margin-right: auto;
    font-family: var(--font-ming);
    font-size: 1rem;
    letter-spacing: 0.08em;
    text-decoration: none;
  }

  .topbar .themes {
    display: flex;
    gap: 0.125rem;
  }

  .topbar-go {
    padding: 0.3rem 0.75rem;
    background: var(--ink);
    color: var(--ground);
    font-size: 0.875rem;
    text-decoration: none;
  }
}

@media (min-width: 900px) {
  body {
    padding-right: var(--rail-w);
  }
}

/* ── 文件 ─────────────────────────────────────────────────────────────── */
.doc {
  /* 中文長文一行 30 字上下最好讀，超過就要靠眼睛回掃找行首。 */
  max-width: 34em;
  margin-inline: auto;
  padding: clamp(3rem, 9vh, 6rem) clamp(16px, 6vw, 32px) 5rem;
}

h1 {
  margin: 0 0 1rem;
  font-family: var(--font-ming);
  font-size: clamp(2rem, 5vw, 2.75rem);
  font-weight: 500;
  letter-spacing: 0.06em;
  line-height: 1.4;
}

h2 {
  margin: 3.25rem 0 0.9rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--rule);
  font-family: var(--font-ming);
  font-size: 1.3125rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1.6;
}

.meta {
  margin: 0 0 2.25rem;
  font-size: 0.875rem;
  line-height: 1.8;
  color: var(--sub);
}

p {
  margin: 0 0 1.15em;
}

ul {
  margin: 0 0 1.15em;
  padding-inline-start: 1.35em;
}

li {
  margin-bottom: 0.55em;
}

li::marker {
  color: var(--faint);
}

strong {
  font-weight: 600;
}

/* 「三十秒摘要」：整份文件唯一框起來的區塊，因為它是唯一一段要讓人
   「不讀全文也能懂」的內容，框線在這裡是資訊，不是裝飾。 */
.summary {
  margin: 0 0 2.5rem;
  padding: 1.5rem 1.6rem 0.5rem;
  border: 1px solid var(--rule-strong);
  background: var(--rail);
}

.summary h2 {
  margin: 0 0 0.75rem;
  padding: 0;
  border: 0;
  font-size: 1.0625rem;
  color: var(--sub);
}

.summary ul {
  margin: 0;
}

.summary li {
  font-size: 0.9375rem;
  line-height: 1.8;
}

.doc-foot {
  margin-top: 3.5rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--rule);
  font-size: 0.875rem;
  color: var(--sub);
}

/* ── 404 ──────────────────────────────────────────────────────────────── */
.lost {
  min-height: calc(100svh - 3.25rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 3rem;
  max-width: 60rem;
  margin-inline: auto;
  padding: clamp(3rem, 10vh, 6rem) clamp(16px, 6vw, 48px);
}

.lost-title {
  writing-mode: vertical-rl;
  margin: 0;
  align-self: start;
  font-family: var(--font-ming);
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0.08em;
}

.lost p {
  color: var(--sub);
}

.lost-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.btn {
  display: inline-flex;
  align-items: center;
  min-height: 3rem;
  padding: 0 1.4rem;
  text-decoration: none;
  border: 1px solid var(--ink);
}

.btn-ink {
  background: var(--ink);
  color: var(--ground);
}

.btn-line:hover {
  background: var(--rail);
}

@media (max-width: 599px) {
  .lost {
    grid-template-columns: 1fr;
    align-items: start;
  }
  .lost-title {
    order: -1;
    justify-self: end;
  }
}