/* book.css — 寫作／小說功能（編輯器與閱讀器）
   編輯器外框沿用網站深色介面，稿紙與閱讀頁使用暖白紙色，閱讀器另提供白底與夜間兩種背景。 */

/* ── 共用：內文排版 ─────────────────────────────── */
.bk-prose {
  --bk-serif: "Noto Serif TC", "Source Han Serif TC", "Songti TC", "PMingLiU", "MingLiU", serif;
  font-family: var(--bk-serif);
  line-height: 2;
  letter-spacing: .02em;
  overflow-wrap: anywhere;
}
.bk-prose p { margin: 0 0 .9em; text-indent: 2em; }
.bk-prose p.ta-center, .bk-prose h3.ta-center { text-align: center; text-indent: 0; }
.bk-prose h3 { margin: 1.8em 0 .7em; font-size: 1.22em; font-weight: 700; line-height: 1.5; letter-spacing: .04em; }
.bk-prose blockquote {
  margin: 1.2em 0; padding: .7em 1.1em; border-left: 3px solid var(--bk-accent, #c0873a);
  background: var(--bk-quote-bg, rgba(192, 135, 58, .08)); border-radius: 0 8px 8px 0;
}
.bk-prose blockquote p { text-indent: 0; margin-bottom: .4em; }
.bk-prose blockquote p:last-child { margin-bottom: 0; }
.bk-prose hr { border: 0; margin: 2.2em 0; text-align: center; height: auto; overflow: visible; }
.bk-prose hr::after { content: "＊　　＊　　＊"; color: var(--bk-muted, #9a8f7a); letter-spacing: .1em; font-size: .9em; }
.bk-prose figure { margin: 1.8em auto; text-align: center; position: relative; max-width: 100%; }
.bk-prose figure img {
  display: block; margin: 0 auto; max-width: 100%; max-height: 72vh; height: auto;
  border-radius: 8px; box-shadow: 0 6px 22px rgba(40, 30, 10, .16); background: var(--bk-img-bg, #ece5d6);
}
.bk-prose figure img:not([src]) { min-height: 160px; width: min(100%, 420px); }
.bk-prose figcaption { margin-top: .7em; font-size: .82em; line-height: 1.6; color: var(--bk-muted, #8a7f6a); text-indent: 0; }
.bk-prose figcaption:empty { display: none; }
.bk-prose figure.bk-img-missing img { opacity: .35; }
.bk-prose figure.bk-img-missing::after { content: "圖片暫時無法顯示"; display: block; margin-top: .4em; font-size: .8em; color: var(--bk-muted, #8a7f6a); }

.bk-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── 編輯器 ─────────────────────────────── */
.bk-editor { max-width: 1180px; margin: 0 auto; }
.bk-ed-top {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px;
  padding: 14px 0 18px; border-bottom: 1px solid var(--border, rgba(196, 214, 255, .17)); margin-bottom: 18px;
}
.bk-ed-heading { display: grid; gap: 2px; min-width: 0; flex: 1 1 220px; }
.bk-kicker { font-size: .72rem; letter-spacing: .16em; color: #e6b875; }
.bk-ed-booktitle { font-size: 1.15rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bk-ed-meta { display: grid; gap: 2px; font-size: .8rem; color: var(--muted, #9aa6ba); text-align: right; font-variant-numeric: tabular-nums; }
.bk-save-state[data-tone="dirty"] { color: #e6b875; }
.bk-save-state[data-tone="saving"] { color: #9ce8df; }
.bk-save-state[data-tone="saved"] { color: #8fd6a4; }
.bk-save-state[data-tone="error"] { color: #ff8f8f; font-weight: 700; }
.bk-ed-actions { display: flex; gap: 8px; }

.bk-ed-body { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 22px; align-items: start; }

.bk-toc {
  position: sticky; top: 16px; display: grid; gap: 10px; padding: 14px;
  border: 1px solid var(--border, rgba(196, 214, 255, .17)); border-radius: 14px; background: #121a28;
}
.bk-toc-head { display: flex; justify-content: space-between; align-items: baseline; font-size: .9rem; }
.bk-toc-head span { font-size: .78rem; color: var(--muted, #9aa6ba); }
.bk-toc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; max-height: 60vh; overflow: auto; }
.bk-toc-list li { position: relative; border-radius: 9px; }
.bk-toc-item {
  display: grid; grid-template-columns: 1.6em minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 8px; width: 100%;
  padding: 9px 10px; border: 1px solid transparent; border-radius: 9px; background: transparent; color: inherit; text-align: left; cursor: pointer; font: inherit;
}
.bk-toc-item:hover { background: rgba(255, 255, 255, .05); }
.bk-toc-list li.is-active .bk-toc-item { background: rgba(230, 184, 117, .12); border-color: rgba(230, 184, 117, .45); }
.bk-toc-no { grid-row: span 2; align-self: center; font: 700 .78rem ui-monospace, monospace; color: #e6b875; }
.bk-toc-name { font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-right: 70px; }
.bk-toc-count { font-size: .72rem; color: var(--muted, #9aa6ba); font-variant-numeric: tabular-nums; }
.bk-toc-tools { position: absolute; top: 6px; right: 6px; display: flex; gap: 2px; opacity: 0; transition: opacity .15s; }
.bk-toc-list li:hover .bk-toc-tools, .bk-toc-list li.is-active .bk-toc-tools, .bk-toc-tools:focus-within { opacity: 1; }
.bk-toc-tools button {
  width: 22px; height: 22px; padding: 0; border: 1px solid var(--border, rgba(196, 214, 255, .2)); border-radius: 6px;
  background: #0d1420; color: inherit; font-size: .72rem; cursor: pointer;
}
.bk-toc-tools button:disabled { opacity: .3; cursor: default; }
.bk-toc-tools button[data-bk="del"]:not(:disabled):hover { background: #5a1f24; border-color: #a54a52; }
.bk-add {
  width: 100%; padding: 9px; border: 1px dashed rgba(230, 184, 117, .55); border-radius: 9px;
  background: transparent; color: #e6b875; font: inherit; font-size: .88rem; cursor: pointer;
}
.bk-add:hover { background: rgba(230, 184, 117, .08); }

.bk-paper {
  --bk-accent: #b9782f; --bk-muted: #8a7f6a;
  background: #fbf8f1; color: #2d2a24; border-radius: 16px; padding: clamp(20px, 4.5vw, 56px);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .35); min-width: 0;
}
.bk-ch-title {
  width: 100%; margin: 0 0 16px; padding: 6px 0; border: 0; border-bottom: 1px dashed #d8cfbd; border-radius: 0;
  background: transparent; color: #221f1a; outline: none; font: 700 clamp(1.4rem, 3.4vw, 1.95rem)/1.4 "Noto Serif TC", "Source Han Serif TC", "PMingLiU", serif;
}
.bk-ch-title:focus { border-bottom-color: #b9782f; }
.bk-ch-title::placeholder { color: #b9ae98; }

.bk-toolbar {
  position: sticky; top: 8px; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px;
  margin: 0 0 22px; padding: 8px; border: 1px solid #e3dac8; border-radius: 12px; background: rgba(251, 248, 241, .95);
  backdrop-filter: blur(6px);
}
.bk-tool-group { display: inline-flex; gap: 2px; padding-right: 10px; border-right: 1px solid #e3dac8; }
.bk-tool {
  min-width: 36px; height: 34px; padding: 0 9px; border: 1px solid transparent; border-radius: 8px;
  background: transparent; color: #4a4336; font: inherit; font-size: .88rem; cursor: pointer;
}
.bk-tool:hover { background: #efe7d6; }
.bk-tool[aria-pressed="true"] { background: #2d2a24; color: #fbf8f1; }
.bk-tool:focus-visible, .bk-toc-item:focus-visible, .bk-toc-tools button:focus-visible, .bk-add:focus-visible { outline: 2px solid #e6b875; outline-offset: 2px; }
.bk-tool-image { margin-left: auto; background: #2d2a24; color: #fbf8f1; padding: 0 14px; }
.bk-tool-image:hover { background: #4a4336; }

.bk-content { position: relative; min-height: 58vh; outline: none; font-size: 1.16rem; color: #2d2a24; caret-color: #b9782f; }
.bk-content:has(> p:only-child > br:only-child)::before {
  content: attr(data-placeholder); position: absolute; top: 0; left: 2em; color: #b9ae98; pointer-events: none;
}
.bk-content.is-drop { outline: 2px dashed #b9782f; outline-offset: 10px; border-radius: 6px; }
.bk-content figure[contenteditable="false"] { user-select: none; padding: 6px; border-radius: 10px; }
.bk-content figure[contenteditable="false"]:hover { background: #f1eadb; }
.bk-content figcaption[contenteditable="true"] { display: block; min-height: 1.6em; outline: none; user-select: text; cursor: text; }
.bk-content figcaption[contenteditable="true"]:empty::before { content: attr(data-placeholder); color: #b9ae98; }
.bk-content figcaption[contenteditable="true"]:focus { background: #fff; border-radius: 6px; box-shadow: 0 0 0 1px #d8cfbd; }
.bk-fig-del {
  position: absolute; top: 12px; right: 12px; padding: 4px 10px; border: 0; border-radius: 999px;
  background: rgba(34, 30, 24, .78); color: #fff; font: .78rem/1.4 system-ui, sans-serif; cursor: pointer; opacity: 0; transition: opacity .15s;
}
.bk-content figure:hover .bk-fig-del, .bk-fig-del:focus-visible { opacity: 1; }
.bk-content figure.bk-uploading img { opacity: .45; filter: grayscale(.3); }
.bk-content figure.bk-uploading::before {
  content: attr(data-status); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1;
  padding: 6px 14px; border-radius: 999px; background: rgba(34, 30, 24, .82); color: #fff; font: .85rem system-ui, sans-serif;
}
.bk-ed-hint { margin: 28px 0 0; padding-top: 14px; border-top: 1px solid #ebe3d3; font-size: .8rem; color: #948a76; }

@media (max-width: 860px) {
  .bk-ed-body { grid-template-columns: 1fr; }
  .bk-toc { position: static; }
  .bk-toc-list { display: flex; overflow-x: auto; max-height: none; padding-bottom: 4px; }
  .bk-toc-list li { flex: 0 0 190px; display: flex; flex-direction: column; border: 1px solid transparent; }
  .bk-toc-list li.is-active { border-color: rgba(230, 184, 117, .45); background: rgba(230, 184, 117, .12); }
  .bk-toc-list li.is-active .bk-toc-item { background: transparent; border-color: transparent; }
  .bk-toc-name { padding-right: 0; }
  .bk-toc-tools { position: static; opacity: 1; padding: 0 10px 8px 36px; }
  .bk-ed-meta { text-align: left; order: 3; width: 100%; grid-auto-flow: column; justify-content: start; gap: 12px; }
  .bk-tool-group { border-right: 0; padding-right: 0; }
  .bk-tool-image { margin-left: 0; }
}

/* ── 閱讀器 ─────────────────────────────── */
.modal.bk-reader-modal {
  position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center;
  padding: clamp(0px, 2.5vw, 28px); background: rgba(3, 5, 10, .82);
}
.bk-reader {
  --r-bg: #f5efe2; --r-panel: #ece4d2; --r-fg: #332c20; --r-muted: #8a7d63; --r-line: #dccfb5; --r-accent: #a8641f; --r-btn: #fffaf0;
  --bk-accent: var(--r-accent); --bk-muted: var(--r-muted); --bk-quote-bg: rgba(168, 100, 31, .07); --bk-img-bg: var(--r-panel);
  display: grid; grid-template-rows: auto minmax(0, 1fr); width: min(1140px, 100%); height: 100%; max-height: 100%;
  background: var(--r-bg); color: var(--r-fg); border-radius: clamp(0px, 1.5vw, 16px); overflow: hidden;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .5); transition: background .25s, color .25s;
}
.bk-reader[data-theme="light"] { --r-bg: #ffffff; --r-panel: #f4f4f2; --r-fg: #222; --r-muted: #7b7b76; --r-line: #e4e4df; --r-accent: #b45f16; --r-btn: #fff; --bk-quote-bg: #f7f5f0; }
.bk-reader[data-theme="night"] { --r-bg: #16181d; --r-panel: #1e2128; --r-fg: #d4d6dc; --r-muted: #8a8f9c; --r-line: #2d313b; --r-accent: #e0a860; --r-btn: #23262e; --bk-quote-bg: rgba(224, 168, 96, .08); }

.bk-r-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 12px clamp(12px, 2.4vw, 22px);
  border-bottom: 1px solid var(--r-line); background: var(--r-panel);
}
.bk-r-titles { display: grid; gap: 1px; min-width: 0; flex: 1 1 200px; }
.bk-r-titles b { font: 700 1.05rem/1.4 "Noto Serif TC", "PMingLiU", serif; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bk-r-titles span { font-size: .78rem; color: var(--r-muted); }
.bk-r-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.bk-r-group { display: inline-flex; gap: 4px; }
.bk-r-btn {
  min-width: 36px; height: 34px; padding: 0 10px; border: 1px solid var(--r-line); border-radius: 9px;
  background: var(--r-btn); color: var(--r-fg); font: inherit; font-size: .85rem; cursor: pointer;
}
.bk-r-btn:hover { border-color: var(--r-accent); }
.bk-r-btn:focus-visible, .bk-r-toc-item:focus-visible, .bk-r-pagebtn:focus-visible { outline: 2px solid var(--r-accent); outline-offset: 2px; }
.bk-r-swatch { width: 34px; min-width: 34px; padding: 0; border-radius: 50%; }
.bk-r-swatch[data-bkr-theme="paper"] { background: #f5efe2; }
.bk-r-swatch[data-bkr-theme="light"] { background: #ffffff; }
.bk-r-swatch[data-bkr-theme="night"] { background: #16181d; }
.bk-r-swatch[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--r-bg), 0 0 0 4px var(--r-accent); }
.bk-r-like[aria-pressed="true"] { border-color: var(--r-accent); color: var(--r-accent); }
.bk-r-toc-toggle { display: none; }

.bk-r-body { display: grid; grid-template-columns: 260px minmax(0, 1fr); min-height: 0; position: relative; }
.bk-r-toc { overflow: auto; padding: 18px 14px; border-right: 1px solid var(--r-line); background: var(--r-panel); }
.bk-r-toc-head { margin: 0 6px 12px; font-size: .78rem; letter-spacing: .1em; color: var(--r-muted); }
.bk-r-toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.bk-r-toc-item {
  display: flex; gap: 10px; width: 100%; padding: 9px 10px; border: 0; border-radius: 8px;
  background: transparent; color: var(--r-fg); font: inherit; font-size: .9rem; text-align: left; cursor: pointer;
}
.bk-r-toc-item:hover { background: rgba(127, 127, 127, .1); }
.bk-r-toc-item.is-active { background: var(--r-bg); color: var(--r-accent); font-weight: 700; box-shadow: inset 3px 0 0 var(--r-accent); }
.bk-r-toc-no { flex: none; width: 1.8em; color: var(--r-muted); font-variant-numeric: tabular-nums; }
.bk-r-toc-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.bk-r-scroll { overflow: auto; overscroll-behavior: contain; scroll-behavior: auto; }
.bk-r-page {
  font-size: var(--bk-size, 19px); max-width: 34em; margin: 0 auto;
  padding: clamp(28px, 6vw, 64px) clamp(18px, 5vw, 44px) 40px; outline: none;
}
.bk-r-cover { margin: 0 0 2.4em; text-align: center; }
.bk-r-cover img { max-width: min(100%, 360px); max-height: 460px; border-radius: 10px; box-shadow: 0 14px 40px rgba(0, 0, 0, .25); }
.bk-r-chno { margin: 0 0 .4em; font-size: .72em; letter-spacing: .3em; color: var(--r-accent); text-align: center; }
.bk-r-chtitle {
  margin: 0 0 .5em; font: 700 1.55em/1.45 "Noto Serif TC", "Source Han Serif TC", "PMingLiU", serif;
  text-align: center; text-wrap: balance; color: var(--r-fg);
}
.bk-r-meta { margin: 0 0 2.4em; padding-bottom: 1.4em; border-bottom: 1px solid var(--r-line); font-size: .7em; color: var(--r-muted); text-align: center; font-variant-numeric: tabular-nums; }
.bk-r-content { color: var(--r-fg); }
.bk-r-pager {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px;
  margin-top: 3em; padding-top: 1.6em; border-top: 1px solid var(--r-line); font-size: 15px;
}
.bk-r-pagebtn {
  padding: 11px 16px; border: 1px solid var(--r-line); border-radius: 10px; background: var(--r-btn);
  color: var(--r-fg); font: inherit; cursor: pointer;
}
.bk-r-pagebtn:last-child { justify-self: end; }
.bk-r-pagebtn:not(:disabled):hover { border-color: var(--r-accent); color: var(--r-accent); }
.bk-r-pagebtn:disabled { opacity: .35; cursor: default; }
.bk-r-pos { font-size: .85em; color: var(--r-muted); font-variant-numeric: tabular-nums; }
.bk-r-end { margin: 1.6em 0 0; font-size: 14px; color: var(--r-muted); text-align: center; }
.bk-r-comments { max-width: 760px; margin: 0 auto; padding: 8px clamp(18px, 5vw, 44px) 48px; color: #2b2b2b; }
.bk-reader[data-theme="night"] .bk-r-comments { color: var(--r-fg); }

@media (max-width: 820px) {
  .bk-r-body { grid-template-columns: 1fr; }
  .bk-r-toggle, .bk-r-toc-toggle { display: inline-flex; align-items: center; }
  .bk-r-toc {
    position: absolute; inset: 0 auto 0 0; z-index: 3; width: min(82%, 300px); border-right: 1px solid var(--r-line);
    box-shadow: 12px 0 30px rgba(0, 0, 0, .25); transform: translateX(-102%); transition: transform .22s ease; visibility: hidden;
  }
  .bk-reader.toc-open .bk-r-toc { transform: none; visibility: visible; }
  .bk-r-titles { order: -1; flex-basis: 100%; }
  .bk-r-bar { gap: 8px; padding: 10px 12px; }
  .bk-r-tools { gap: 5px; flex: 1; justify-content: flex-end; }
  .bk-r-group { gap: 3px; }
  .bk-r-btn { min-width: 32px; height: 32px; padding: 0 7px; font-size: .8rem; }
  .bk-r-swatch { width: 28px; min-width: 28px; height: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  .bk-reader, .bk-r-toc, .bk-toc-tools { transition: none; }
}

/* ── 文章附加文件與 PDF 檢視 ─────────────────────────────── */
.bk-ed-doc-box {
  margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--border, rgba(196, 214, 255, .17));
  display: grid; gap: 8px; font-size: .85rem;
}
.bk-ed-doc-head { font-size: .82rem; color: #e6b875; }
.bk-ed-doc-btn {
  width: 100%; padding: 7px 10px; border: 1px dashed rgba(230, 184, 117, .4); border-radius: 8px;
  background: transparent; color: #e6b875; font-size: .8rem; cursor: pointer; text-align: center;
}
.bk-ed-doc-btn:hover { background: rgba(230, 184, 117, .08); }
.bk-ed-doc-item {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 6px 10px; border-radius: 8px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1);
}
.bk-ed-doc-name { font-size: .8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bk-ed-doc-actions { display: flex; gap: 4px; flex-shrink: 0; }

.bk-r-doc-tool {
  text-decoration: none; display: inline-flex; align-items: center; justify-content: center;
  font-weight: 500;
}
.bk-r-doc-tool:hover { text-decoration: none; }

.bk-pdf-view {
  display: flex; flex-direction: column; width: 100%; height: 100%; min-height: 70vh;
}
.bk-pdf-topbar {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px;
  padding: 10px 16px; background: var(--r-panel); border-bottom: 1px solid var(--r-line);
}
.bk-pdf-topbar b { font-size: .95rem; color: var(--r-fg); }
.bk-pdf-actions { display: flex; gap: 8px; }
.bk-pdf-actions .bk-r-btn { text-decoration: none; display: inline-flex; align-items: center; }
.bk-pdf-frame {
  width: 100%; flex: 1; min-height: 75vh; border: 0; background: #525659;
}

.bk-doc-page {
  max-width: 680px; margin: 40px auto; padding: 20px; text-align: center;
}
.bk-doc-card {
  display: flex; align-items: center; gap: 16px; padding: 18px 24px; margin: 28px auto 0;
  border: 1px solid var(--r-line); border-radius: 14px; background: var(--r-panel);
  text-align: left; max-width: 520px; box-shadow: 0 4px 16px rgba(0, 0, 0, .06);
}
.bk-doc-icon { font-size: 2.2rem; line-height: 1; flex-shrink: 0; }
.bk-doc-info { display: grid; gap: 3px; flex: 1; min-width: 0; }
.bk-doc-title { font-size: 1.05rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--r-fg); }
.bk-doc-desc { font-size: .8rem; color: var(--r-muted); }
.bk-doc-download-btn {
  text-decoration: none; white-space: nowrap; flex-shrink: 0;
}

.bk-doc-card-inline {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin: 0 auto 2.2em; padding: 10px 16px; border: 1px dashed var(--r-line); border-radius: 10px;
  background: var(--r-panel); max-width: 480px; font-size: .88rem;
}
.bk-doc-card-inline .bk-doc-icon { font-size: 1.4rem; }
.bk-doc-card-inline .bk-doc-info { display: grid; gap: 1px; flex: 1; min-width: 0; }
.bk-doc-card-inline b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--r-fg); }
.bk-doc-card-inline small { color: var(--r-muted); font-size: .75rem; }
.bk-doc-card-inline a, .bk-doc-card-inline button { text-decoration: none; }