/* 紙の聖書のページを、そのまま画面に。chrome は消えて本文だけが残る */
:root{
  --paper:#FBFAF7; --ink:#1E222A; --sub:#6B6F76; --rule:#E4E1DA;
  --ai:#2B4C7E;        /* 藍：現在の節、操作 */
  --gilt:#A8893A;      /* 金：節番号（小口の金のように小さく） */
  --fs:22px;
}
:root[data-theme=night]{ --paper:#15171C; --ink:#E6E2D8; --sub:#8E929A; --rule:#2A2E36; --ai:#8FB0E6; --gilt:#C8A95A; }
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:"BIZ UDPGothic","Hiragino Sans",sans-serif;-webkit-text-size-adjust:100%;overscroll-behavior:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--ai);outline-offset:2px}
.screen{min-height:100%}
[hidden]{display:none!important}

/* ---- 一覧 ---- */
#home{max-width:680px;margin:0 auto;padding:max(24px,env(safe-area-inset-top)) 20px 40px}
.home-head{display:flex;align-items:baseline;justify-content:space-between;padding:20px 0 16px}
.home-head h1{font-family:"Shippori Mincho",serif;font-weight:500;font-size:30px;margin:0;letter-spacing:.08em}
.home-head h1 span{font-size:14px;color:var(--sub);margin-left:10px;letter-spacing:.1em}
.today{margin:0;color:var(--sub);font-size:13px}
.continue{margin:4px 0 24px}
.continue a{display:block;border:1px solid var(--rule);border-left:4px solid var(--ai);border-radius:8px;padding:14px 16px}
.continue small{display:block;color:var(--sub);font-size:12px;margin-bottom:2px}
.continue b{font-family:"Shippori Mincho",serif;font-weight:500;font-size:18px}
#home h2{font-size:14px;color:var(--sub);font-weight:400;letter-spacing:.1em;margin:12px 0 8px}
.books{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:2px 24px}
.books a{display:flex;justify-content:space-between;align-items:baseline;padding:12px 4px;border-bottom:1px solid var(--rule);font-family:"Shippori Mincho",serif;font-size:19px}
.books a small{font-family:"BIZ UDPGothic",sans-serif;font-size:12px;color:var(--sub)}
.books a.done small{color:var(--gilt)}
.home-foot{margin-top:36px;font-size:14px;color:var(--sub)}
.home-foot a{color:var(--ai)}

/* ---- 読書 ---- */
#reader{display:flex;flex-direction:column;height:100dvh}
.r-head{display:grid;grid-template-columns:44px 1fr 44px;align-items:center;height:calc(48px + env(safe-area-inset-top));padding-top:env(safe-area-inset-top);padding-inline:6px}
.r-head .back{font-size:30px;line-height:1;text-align:center;color:var(--sub)}
.r-head .title{text-align:center;font-size:14px;letter-spacing:.06em;color:var(--sub);padding:8px 0}
.iconbtn{font-size:14px;color:var(--sub);text-align:center}
.page{flex:1;min-height:0;position:relative}

/* 本文：縦書きは右から左へ、横スクロール。各「見開き」は画面幅のページ */
.text{font-family:"Shippori Mincho","Noto Serif CJK JP","Hiragino Mincho ProN",serif;font-size:var(--fs);line-height:1.95;letter-spacing:.02em;font-feature-settings:"palt" 0;text-align:justify;height:100%;padding:16px 24px}
.text[data-dir=v]{writing-mode:vertical-rl;overflow-x:auto;overflow-y:hidden;width:100%;height:100%;padding:20px 28px}
.text[data-dir=h]{writing-mode:horizontal-tb;overflow-y:auto;max-width:40em;margin:0 auto;padding:12px 24px 80px}
.text h2{font-size:1.1em;font-weight:500;margin:0 0 1em;letter-spacing:.12em}
.text[data-dir=v] h2{margin:0 0 0 1.2em}
.text p{margin:0 0 .6em;text-indent:0}
.text[data-dir=v] p{margin:0 0 0 .4em}
.vn{font-family:"BIZ UDPGothic",sans-serif;font-size:.5em;color:var(--gilt);vertical-align:.35em;margin:0 .35em 0 0;user-select:none;letter-spacing:0}
.text[data-dir=v] .vn{vertical-align:0;text-combine-upright:all;margin:0 0 .3em 0}
.v{border-radius:3px;transition:background .25s}
.v.now{background:color-mix(in srgb,var(--ai) 12%,transparent);box-shadow:0 0 0 3px color-mix(in srgb,var(--ai) 12%,transparent)}
ruby rt{font-family:"BIZ UDPGothic",sans-serif;font-size:.45em;color:var(--sub);letter-spacing:0}
.text:not(.ruby) rt{display:none}
/* 横向きの広い画面：見開き（2段組） */
@media (min-width:900px) and (orientation:landscape){
  .text[data-dir=v]{padding:28px 56px;font-size:calc(var(--fs) * 1.08)}
}

/* ---- 再生バー ---- */
.r-nav{display:grid;grid-template-columns:44px 1fr 44px;align-items:center;gap:6px;padding:8px 10px calc(10px + env(safe-area-inset-bottom));border-top:1px solid var(--rule)}
.r-nav>button{font-size:28px;color:var(--sub);text-align:center;height:44px}
.player{display:flex;align-items:center;gap:10px;background:color-mix(in srgb,var(--ink) 5%,transparent);border-radius:999px;padding:6px 14px 6px 6px;min-height:48px}
.player.none{opacity:.5}
#play{width:36px;height:36px;border-radius:50%;background:var(--ai);color:#fff;display:grid;place-items:center;flex:none}
.ico-play{width:0;height:0;border-style:solid;border-width:7px 0 7px 12px;border-color:transparent transparent transparent #fff;margin-left:3px}
#play.playing .ico-play{width:12px;height:14px;border:0;border-left:4px solid #fff;border-right:4px solid #fff;margin:0}
.bar{flex:1;height:4px;background:var(--rule);border-radius:2px;overflow:hidden}
.fill{height:100%;width:0;background:var(--ai)}
.time{font-size:12px;color:var(--sub);min-width:3.5em;text-align:right;font-variant-numeric:tabular-nums}
.rate{font-size:12px;color:var(--sub);border:1px solid var(--rule);border-radius:999px;padding:2px 8px}

/* ---- 設定シート ---- */
.sheet{position:fixed;inset:0;background:rgba(0,0,0,.35);display:flex;align-items:flex-end;z-index:10}
.sheet-body{background:var(--paper);width:100%;max-width:560px;margin:0 auto;border-radius:16px 16px 0 0;padding:20px 20px calc(24px + env(safe-area-inset-bottom))}
.sheet h3{margin:0 0 14px;font-size:15px;font-weight:700}
.seg{display:flex;border:1px solid var(--rule);border-radius:10px;overflow:hidden;margin-bottom:14px}
.seg button{flex:1;padding:12px;font-size:16px}
.seg button.on{background:var(--ai);color:#fff}
.row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 0;font-size:16px;border-bottom:1px solid var(--rule);margin-bottom:14px}
.row input[type=range]{flex:1;max-width:60%;accent-color:var(--ai)}
.row input[type=checkbox]{width:22px;height:22px;accent-color:var(--ai)}
.close{width:100%;padding:14px;border-radius:10px;background:color-mix(in srgb,var(--ink) 7%,transparent);font-size:16px;margin-top:6px}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}