/* 紙の聖書のページを、そのまま画面に。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(260px,1fr));gap:2px 24px}
.books .sec{grid-column:1/-1;margin:18px 0 4px;font-size:13px;letter-spacing:.14em;color:var(--sub)}
.books a{display:flex;justify-content:space-between;align-items:baseline;padding:16px 6px;border-bottom:1px solid var(--rule);font-family:"Shippori Mincho",serif;font-size:20px;min-height:56px}
.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}}

/* ---- 教会 ---- */
.church-entry{margin:24px 16px 8px}
.church-entry a{display:block;padding:16px 18px;border:1px solid var(--rule);border-radius:14px;color:var(--ink);text-decoration:none;background:var(--card,transparent)}
.church-entry small{display:block;color:var(--ai);margin-top:4px;font-size:.85em}
.ch-body{padding:12px 16px 40px;max-width:720px;margin:0 auto;font-family:"BIZ UDPGothic",system-ui,sans-serif}
.ch-search{display:flex;gap:8px}
.ch-search input{flex:1;font-size:17px;padding:12px 14px;border:1px solid var(--rule);border-radius:12px;background:transparent;color:var(--ink)}
.ch-search button,.ch-filters button,.c-btn{font-size:15px;padding:10px 14px;border:1px solid var(--rule);border-radius:12px;background:transparent;color:var(--ink);cursor:pointer}
.ch-filters{display:flex;gap:6px;flex-wrap:wrap;margin:10px 0}
.ch-filters button.on,.c-btn.primary{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.ch-list{display:flex;flex-direction:column;gap:6px}
.ch-list .pref{margin:18px 0 6px;font-size:14px;color:var(--ai);letter-spacing:.1em}
.ch-list a{display:block;padding:12px 14px;border:1px solid var(--rule);border-radius:12px;color:var(--ink);text-decoration:none}
.ch-list a b{display:block;font-size:17px}
.ch-list a small{color:var(--ai);font-size:.85em}
.ch-list .more{text-align:center;color:var(--ai);padding:12px}
.c-card{border:1px solid var(--rule);border-radius:14px;padding:16px 18px;margin:12px 0}
.c-card h3{margin:0 0 8px;font-size:15px;color:var(--ai);letter-spacing:.1em;font-weight:500}
.c-card p{margin:6px 0;line-height:1.7}
.c-card .big{font-size:19px;font-family:"Shippori Mincho",serif}
.c-card a{color:var(--ink)}
.c-meta{color:var(--ai);font-size:.9em}
.c-form label{display:block;margin:10px 0 4px;font-size:14px;color:var(--ai)}
.c-form input,.c-form textarea,.c-form select{width:100%;box-sizing:border-box;font-size:16px;padding:10px 12px;border:1px solid var(--rule);border-radius:10px;background:transparent;color:var(--ink)}
.c-form textarea{min-height:90px}
.c-row{display:flex;gap:8px}
.c-row>*{flex:1}
.c-msg{color:var(--ai);margin:8px 0}
.note{font-size:.7em;color:var(--sub);margin:0 .3em}

/* ---- タブ ---- */
.tabs{position:fixed;left:0;right:0;bottom:0;display:flex;justify-content:space-around;padding:6px 0 calc(6px + env(safe-area-inset-bottom));background:var(--paper);border-top:1px solid var(--rule);z-index:5}
.tabs a{flex:1;text-align:center;font-size:12px;color:var(--sub);text-decoration:none;padding:4px 0}
.tabs a .ico{display:block;font-size:20px;line-height:1.2}
.tabs a.on{color:var(--ink)}
body.has-tabs #home,body.has-tabs .ch-body{padding-bottom:84px}
.settings-list .c-card{padding:8px 18px}
.settings-list .row{display:flex;align-items:center;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--rule)}
.settings-list .row:last-child{border-bottom:0}
.settings-list .seg{display:flex;gap:6px}
.settings-list .seg button{padding:6px 12px;border:1px solid var(--rule);border-radius:999px;font-size:14px}
.settings-list .seg button.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.settings-list input[type=range]{width:160px}
.settings-list .about{color:var(--sub);font-size:.85em;line-height:1.7}