/* どどしおり☆ フロント（ライト／ダーク両対応：html.land-dark） */
:root{
  --dbm-key:#ff8a1f;
  --dbm-key2:#ffcf4a;
  --dbm-bg:#ffffff;
  --dbm-bg2:#f5f6fb;
  --dbm-line:#e3e6f0;
  --dbm-text:#252a3a;
  --dbm-dim:#7a8199;
  --dbm-read:#2fa36b;
  --dbm-read-bg:#e3f6ec;
  --dbm-mid-bg:#fff1e0;
  --dbm-shadow:0 8px 28px rgba(40,50,90,.16);
}
html.land-dark{
  --dbm-bg:#1d2131;
  --dbm-bg2:#262b3f;
  --dbm-line:#363d57;
  --dbm-text:#eef0f8;
  --dbm-dim:#9ba3bf;
  --dbm-read:#5fd49a;
  --dbm-read-bg:#1d3a2d;
  --dbm-mid-bg:#3d2e1c;
  --dbm-shadow:0 8px 28px rgba(0,0,0,.45);
}

/* ---------- 上部の読書バー ---------- */
.dbm-progress{position:fixed;left:0;right:0;top:0;height:3px;z-index:100000;pointer-events:none;background:transparent}
.dbm-progress i{display:block;height:100%;width:100%;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,var(--dbm-key),var(--dbm-key2));box-shadow:0 0 8px rgba(255,138,31,.45);border-radius:0 3px 3px 0;transition:transform .12s linear}
body.admin-bar .dbm-progress{top:32px}
@media (max-width:782px){body.admin-bar .dbm-progress{top:46px}}
@media (prefers-reduced-motion:reduce){.dbm-progress i{transition:none}}

/* ---------- 前回の続きから ---------- */
.dbm-chip{
  position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));z-index:99990;
  display:flex;align-items:center;gap:4px;max-width:calc(100vw - 24px);
  padding:5px;border-radius:99px;
  background:var(--dbm-bg);color:var(--dbm-text);border:1px solid var(--dbm-line);box-shadow:var(--dbm-shadow);
  transform:translate(-50%,24px);opacity:0;transition:transform .35s cubic-bezier(.2,.9,.3,1.2),opacity .25s;
  font-size:14px;line-height:1.3;box-sizing:border-box;
}
.dbm-chip.is-show{transform:translate(-50%,0);opacity:1}
.dbm-chip button{-webkit-appearance:none;appearance:none;font:inherit;margin:0;cursor:pointer;border:0;border-radius:99px;white-space:nowrap}
.dbm-chip-go{padding:9px 16px;background:linear-gradient(135deg,var(--dbm-key),#ffa53a);color:#fff;font-weight:800;box-shadow:0 2px 8px rgba(255,138,31,.35)}
.dbm-chip-go b{font-weight:800;margin-left:1px}
.dbm-chip-go:hover{filter:brightness(1.06)}
.dbm-chip-bm{background:var(--dbm-bg2);color:var(--dbm-text);box-shadow:none}
.dbm-chip-x{width:34px;height:34px;background:transparent;color:var(--dbm-dim);font-size:18px;line-height:1}
.dbm-chip-x:hover{background:var(--dbm-bg2)}
.dbm-chip button:focus-visible,.dbm-bm-btn:focus-visible,.dbm-toast button:focus-visible{outline:3px solid var(--dbm-key);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.dbm-chip{transition:none}}

/* ---------- 🔖 しおりボタン ---------- */
.dbm-bm-btn{
  -webkit-appearance:none;appearance:none;
  position:fixed;left:14px;bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:99980;
  display:flex;align-items:center;gap:6px;height:42px;padding:0 14px 0 11px;margin:0;
  border-radius:99px;border:1px solid var(--dbm-line);background:var(--dbm-bg);color:var(--dbm-text);
  box-shadow:0 4px 16px rgba(40,50,90,.14);font:inherit;font-size:13px;font-weight:700;cursor:pointer;
  opacity:0;transform:translateY(12px);pointer-events:none;transition:opacity .25s,transform .25s,background-color .2s;
}
.dbm-bm-btn.is-show{opacity:.92;transform:none;pointer-events:auto}
.dbm-bm-btn:hover{opacity:1}
.dbm-bm-btn span[aria-hidden]{font-size:18px;line-height:1;filter:grayscale(.6)}
.dbm-bm-btn.is-set{border-color:var(--dbm-key);background:var(--dbm-mid-bg)}
.dbm-bm-btn.is-set span[aria-hidden]{filter:none}
.dbm-flap span[aria-hidden]{animation:dbm-flap .5s cubic-bezier(.3,1.7,.5,1)}
@keyframes dbm-flap{0%{transform:translateY(0) rotate(0)}40%{transform:translateY(-6px) rotate(-14deg) scale(1.25)}100%{transform:none}}
/* スマホ：Cocoonのフッターボタンの上に */
@media (max-width:1023px){
  .mblt-footer-mobile-buttons .dbm-bm-btn{bottom:calc(66px + env(safe-area-inset-bottom,0px))}
  .mblt-footer-mobile-buttons .dbm-chip{bottom:calc(72px + env(safe-area-inset-bottom,0px))}
  .mblt-footer-mobile-buttons .dbm-toast{bottom:calc(124px + env(safe-area-inset-bottom,0px))}
}
@media (max-width:480px){
  .dbm-bm-btn{width:42px;padding:0;justify-content:center}
  .dbm-bm-lbl{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .dbm-chip{font-size:13px}
  .dbm-chip-go{padding:9px 12px}
}

/* ---------- お知らせ ---------- */
.dbm-toast{
  position:fixed;left:50%;bottom:calc(76px + env(safe-area-inset-bottom,0px));z-index:99995;
  transform:translate(-50%,16px);opacity:0;pointer-events:none;
  background:#262b3b;color:#fff;border-radius:12px;padding:10px 14px;font-size:14px;line-height:1.4;
  box-shadow:0 8px 24px rgba(0,0,0,.25);transition:opacity .2s,transform .25s;max-width:calc(100vw - 32px);box-sizing:border-box;
}
html.land-dark .dbm-toast{background:#eef0f8;color:#1d2131}
.dbm-toast.is-show{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.dbm-toast button{-webkit-appearance:none;appearance:none;margin:0 0 0 8px;padding:3px 10px;border:0;border-radius:99px;background:rgba(255,255,255,.18);color:inherit;font:inherit;font-size:12px;font-weight:700;cursor:pointer}
html.land-dark .dbm-toast button{background:rgba(0,0,0,.1)}

/* ---------- シリーズの次の話へ ---------- */
.dbm-series-slot:empty{display:none}
.dbm-series{
  margin:1.6em auto;max-width:640px;padding:14px 16px 12px;box-sizing:border-box;
  background:var(--dbm-bg);color:var(--dbm-text);border:1px solid var(--dbm-line);border-radius:18px;
  box-shadow:0 6px 22px rgba(40,50,90,.08);line-height:1.5;
}
.dbm-series *{box-sizing:border-box}
.dbm-sr-top{display:flex;justify-content:space-between;align-items:baseline;gap:8px;flex-wrap:wrap;font-size:14px}
.dbm-sr-name{font-weight:800}
.dbm-sr-pos{color:var(--dbm-dim);font-size:12px;font-weight:700;font-variant-numeric:tabular-nums}
.dbm-sr-meter{height:4px;border-radius:4px;background:var(--dbm-bg2);margin:8px 0 12px;overflow:hidden}
.dbm-sr-meter i{display:block;height:100%;background:linear-gradient(90deg,var(--dbm-key),var(--dbm-key2));border-radius:4px}
.dbm-next{
  position:relative;display:grid;grid-template-columns:1fr auto;grid-template-areas:"k b" "t b";align-items:center;gap:2px 10px;
  padding:12px 40px 12px 14px;border-radius:14px;text-decoration:none!important;color:var(--dbm-text)!important;
  background:linear-gradient(135deg,var(--dbm-mid-bg),var(--dbm-bg2));border:2px solid transparent;transition:border-color .2s,transform .15s;
}
.dbm-next:hover{border-color:var(--dbm-key);transform:translateY(-1px)}
.dbm-next:focus-visible{outline:3px solid var(--dbm-key);outline-offset:2px}
.dbm-next-k{grid-area:k;font-size:12px;font-weight:800;color:var(--dbm-key);letter-spacing:.04em}
.dbm-next-k small{margin-left:8px;color:var(--dbm-dim);font-weight:700}
.dbm-next-t{grid-area:t;font-size:16px;font-weight:800;line-height:1.4}
.dbm-next .dbm-badge{grid-area:b}
.dbm-next-arrow{position:absolute;right:14px;top:50%;transform:translateY(-50%);font-size:28px;line-height:1;color:var(--dbm-key);transition:transform .2s}
.dbm-next:hover .dbm-next-arrow{transform:translate(4px,-50%)}
.dbm-badge,.dbm-rb{display:inline-block;font-size:11px;font-weight:800;line-height:1.6;padding:0 8px;border-radius:99px;white-space:nowrap;vertical-align:middle}
.dbm-badge.is-new{background:var(--dbm-key);color:#fff}
.dbm-badge.is-read,.dbm-rb.is-read{background:var(--dbm-read-bg);color:var(--dbm-read)}
.dbm-badge.is-mid,.dbm-rb.is-mid{background:var(--dbm-mid-bg);color:var(--dbm-key)}
.dbm-rb{margin-left:6px;font-size:11px;letter-spacing:.02em}
.dbm-sr-end,.dbm-sr-note{margin:4px 0 0!important;padding:10px 12px!important;border-radius:12px;background:var(--dbm-bg2);font-weight:700;font-size:14px;text-align:center}
.dbm-sr-note{padding:6px 10px!important;background:transparent;color:var(--dbm-dim);font-size:12px;font-weight:600}
.dbm-sr-links{display:flex;justify-content:space-between;align-items:center;margin-top:10px;font-size:14px}
.dbm-sr-links a{color:var(--dbm-dim)!important;text-decoration:none!important;font-weight:700;padding:4px 6px;border-radius:8px}
.dbm-sr-links a:hover{color:var(--dbm-key)!important;background:var(--dbm-bg2)}

/* ---------- 読みかけ一覧 ---------- */
.dbm-continue{
  margin:1.5em 0;max-width:720px;padding:14px 14px 6px;box-sizing:border-box;
  background:var(--dbm-bg);color:var(--dbm-text);border:1px solid var(--dbm-line);border-radius:16px;
  box-shadow:0 6px 22px rgba(40,50,90,.08);line-height:1.5;
}
.dbm-continue *{box-sizing:border-box}
.dbm-cr-h{margin:0 0 8px!important;padding:0!important;font-weight:800;font-size:16px}
.dbm-cr-empty{margin:4px 0 10px!important;color:var(--dbm-dim);font-size:14px;text-align:center}
.dbm-cr-list{list-style:none!important;margin:0!important;padding:0!important}
.dbm-cr-row{display:flex;align-items:center;gap:12px;padding:10px 0!important;margin:0!important;border-top:1px solid var(--dbm-line);transition:opacity .25s,transform .25s}
.dbm-cr-row:first-child{border-top:0}
.dbm-cr-row::before,.dbm-cr-row::marker{content:none!important}
.dbm-cr-row.is-gone{opacity:0;transform:translateX(20px)}
.dbm-cr-link{flex:0 0 auto;display:block;line-height:0}
.dbm-cr-thumb{width:96px;height:54px;border-radius:10px;object-fit:cover;background:var(--dbm-bg2);display:block}
.dbm-cr-nothumb{display:flex;align-items:center;justify-content:center;font-size:24px;line-height:1}
.dbm-cr-main{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}
.dbm-cr-series{font-size:11px;font-weight:700;color:var(--dbm-dim)}
.dbm-cr-title{font-weight:800;color:var(--dbm-text)!important;text-decoration:none!important;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dbm-cr-title:hover{color:var(--dbm-key)!important}
.dbm-cr-prog{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--dbm-dim);font-variant-numeric:tabular-nums}
.dbm-cr-bar{flex:1 1 auto;max-width:220px;height:6px;border-radius:6px;background:var(--dbm-bg2);overflow:hidden}
.dbm-cr-bar i{display:block;height:100%;border-radius:6px;background:linear-gradient(90deg,var(--dbm-key),var(--dbm-key2))}
.dbm-cr-pct{font-weight:800;color:var(--dbm-key)}
.dbm-cr-bm{white-space:nowrap}
.dbm-cr-acts{flex:0 0 auto;display:flex;align-items:center;gap:4px}
.dbm-cr-go{display:inline-block;padding:7px 14px;border-radius:99px;background:linear-gradient(135deg,var(--dbm-key),#ffa53a);color:#fff!important;font-weight:800;font-size:13px;text-decoration:none!important;white-space:nowrap}
.dbm-cr-go:hover{filter:brightness(1.06)}
.dbm-cr-x{-webkit-appearance:none;appearance:none;width:30px;height:30px;margin:0;padding:0;border:0;border-radius:50%;background:transparent;color:var(--dbm-dim);font-size:16px;cursor:pointer}
.dbm-cr-x:hover{background:var(--dbm-bg2)}
@media (max-width:560px){
  .dbm-cr-row{flex-wrap:wrap;gap:8px 10px}
  .dbm-cr-thumb{width:72px;height:48px}
  .dbm-cr-main{flex-basis:calc(100% - 82px)}
  .dbm-cr-acts{flex-basis:100%;justify-content:flex-end}
  .dbm-cr-title{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
}