/* 讀文章：篇單、全文四模式（漢羅 ruby／台羅／白話字／對照）、詞彙表、音檔掣。 */
#read-root { font-size: 1.12rem; }
.rd-hidden { display: none !important; }

/* ---- 首頁：冊 → 類 → 篇 ---- */
.rd-book { margin-top: 1.6rem; }
.rd-book-title { font-size: 1.35rem; margin: 0 0 0.6rem; }
.rd-cat-title { font-size: 1.1rem; opacity: 0.8; margin: 1.1rem 0 0.4rem; border-left: 0.35rem solid #0b6f55; padding-left: 0.5rem; }
.rd-arts { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: 0.8rem; }
.rd-art-btn { display: block; padding: 0.9rem 1rem; border: 2px solid var(--border, #d0d7de); border-radius: 1rem; text-decoration: none; color: inherit; min-height: 4.6rem; }
.rd-art-btn:hover, .rd-art-btn:focus-visible { border-color: #0b6f55; }
.rd-art-btn.is-read { background: #e6f4ea; }
.rd-art-title { display: block; font-size: 1.15rem; font-weight: 700; }
.rd-art-meta { display: block; font-size: 0.9rem; opacity: 0.75; margin-top: 0.25rem; }
.rd-read-mark { float: right; margin-left: 0.5rem; font-size: 0.85rem; color: #2f9e44; font-weight: 700; }

/* ---- 文章頁 ---- */
.rd-top { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; margin-bottom: 0.4rem; }
.rd-back { font-size: 1rem; }
.rd-cat { display: inline-block; background: #0b6f55; color: #fff; border-radius: 0.7rem; padding: 0.1rem 0.7rem; font-size: 0.95rem; }
.rd-title { font-size: 1.8rem; margin: 0.2rem 0; }
.rd-author { opacity: 0.75; margin: 0 0 0.8rem; }

.rd-audio-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin: 0.6rem 0 1rem; }
.rd-audio-row audio { flex: 1 1 16rem; min-width: 14rem; height: 2.6rem; }
.rd-speed { font: inherit; cursor: pointer; border-radius: 0.8rem; border: 2px solid #0b6f55; background: #fff; color: #0b6f55; padding: 0.35rem 0.9rem; min-height: 2.6rem; }
.rd-speed[aria-pressed="true"] { background: #0b6f55; color: #fff; }

.rd-modes { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.6rem 0 1rem; }
.rd-mode { font: inherit; cursor: pointer; border-radius: 0.8rem; border: 2px solid var(--border, #d0d7de); background: #fff; color: inherit; padding: 0.4rem 1rem; min-height: 2.6rem; }
.rd-mode[aria-pressed="true"] { border-color: #0b6f55; background: #0b6f55; color: #fff; }

.rd-roman-note { font-size: 0.95rem; opacity: 0.85; background: #fff6e5; border: 1px solid #e9d8a6; border-radius: 0.7rem; padding: 0.5rem 0.8rem; margin: 0 0 1rem; }
.rd-body { max-width: 46rem; }
.rd-para { margin: 0 0 1.1rem; line-height: 2; font-size: 1.25rem; }
.rd-para ruby rt { font-size: 0.72em; color: #0b6f55; font-family: "Iansui", "PingFang TC", sans-serif; letter-spacing: 0.02em; }
.rd-para.is-roman { line-height: 1.9; font-size: 1.15rem; }
.rd-para .rd-align-han { display: block; }
.rd-para .rd-align-roman { display: block; opacity: 0.85; font-size: 1.05rem; margin-top: -0.4rem; }

.rd-actions { display: flex; flex-wrap: wrap; gap: 0.7rem; margin: 1.4rem 0; }
.rd-btn { font: inherit; cursor: pointer; border-radius: 0.9rem; border: 2px solid #0b6f55; padding: 0.5rem 1.1rem; min-height: 2.8rem; text-decoration: none; display: inline-flex; align-items: center; }
.rd-btn.primary { background: #0b6f55; color: #fff; }
.rd-btn:not(.primary) { background: #fff; color: #0b6f55; }
.rd-btn:hover { filter: brightness(1.05); }
.rd-mark { border-style: dashed; }
.rd-mark[aria-pressed="true"] { background: #e6f4ea; border-style: solid; }

.rd-vocab-wrap { overflow-x: auto; margin: 0.6rem 0 1.4rem; }
.rd-vocab { border-collapse: collapse; font-size: 1.05rem; min-width: 24rem; }
.rd-vocab th, .rd-vocab td { border: 1px solid var(--border, #d0d7de); padding: 0.4rem 0.7rem; text-align: left; vertical-align: top; }
.rd-vocab th { background: #f0f5f3; }
.rd-vocab td.rd-v-han { font-size: 1.2rem; white-space: nowrap; }
.rd-play { font: inherit; cursor: pointer; border-radius: 0.7rem; border: 1.5px solid #0b6f55; background: #fff; color: #0b6f55; min-width: 2.6rem; min-height: 2.4rem; }
.rd-play.is-playing { background: #0b6f55; color: #fff; }

.rd-grammar, .rd-notes { margin: 0.4rem 0 1.4rem; }
.rd-grammar-item { border: 1px solid var(--border, #d0d7de); border-radius: 0.9rem; padding: 0.8rem 1rem; margin-bottom: 0.8rem; }
.rd-grammar-head { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; font-size: 1.2rem; }
.rd-grammar-head .rd-tl { color: #0b6f55; }
.rd-grammar-text { margin: 0.4rem 0 0; line-height: 1.8; }
.rd-notes li { margin-bottom: 0.3rem; line-height: 1.7; }
.rd-source { opacity: 0.8; font-size: 0.95rem; }

.rd-prevnext { display: flex; flex-wrap: wrap; gap: 0.7rem; justify-content: space-between; margin: 1.2rem 0 0; }
.rd-prevnext a { color: #0b6f55; }

.read-credits { margin-top: 2rem; line-height: 1.8; }
@media (max-width: 34rem) {
  .rd-para { font-size: 1.15rem; }
  .rd-para.is-roman { font-size: 1.05rem; }
}