/* =======================================================================
   KMV Viewer (dialog-only dim) — overlayは透明 / 枠だけ半透明
   ======================================================================= */

/* ===== Overlay：センタリングのみ。背景は透明 ===== */
.kmv-viewer-overlay{
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: transparent !important;          /* ← 画面全体は透過 */
  z-index: 2147483647;
  opacity: 1; visibility: visible; pointer-events: auto;
}

/* ===== Dialog（内側の黒枠。ここにTheme/半透明を適用） ===== */
.kmv-viewer-dialog{
  /* 好みのノブ */
  --dlg-w: 94vw;
  --dlg-h: 92dvh;
  --dlg-pad: 10px;
  --dlg-radius: 12px;
  --dlg-bg: rgba(16,16,16,.92);                /* ← 透ける黒はココに適用 */

  transform: none;
  width: min(var(--dlg-w), 1380px);
  height: min(var(--dlg-h), 920px);
  max-width: 100vw; max-height: 100dvh;
  position: relative; overflow: hidden;
  background: var(--dlg-bg);
  color: var(--cv-fg, #f0f0f0);
  border-radius: var(--dlg-radius);
  box-shadow: 0 12px 40px rgba(0,0,0,.40);
  padding: var(--dlg-pad) var(--dlg-pad) 0 var(--dlg-pad);

  /* 画像塊の上下/見開きギャップ（F12ノブ） */
  --cv-shift-y: 0px;
  --spread-gap: 0px;
}

/* ===== Theme：Dialogのみ配色を切替（Overlayは常に透明） ===== */
.kmv-viewer-dialog.light{
  --dlg-bg: rgba(247,247,247,.96);
  --cv-fg: #111;
  box-shadow: 0 12px 36px rgba(0,0,0,.16);
}
.kmv-viewer-dialog:not(.light){ --cv-fg:#f0f0f0; }

/* ===== 高さ伝播（縦Flex） ===== */
.kmv-viewer-dialog > .cv-mount{
  height: 100%; max-height: 100%; min-height: 0;
  display: flex; flex-direction: column; overflow: hidden;
}
.kmv-viewer-dialog .cv-embed{
  height: 100%; max-height: 100%; min-height: 0;
  display: flex; flex-direction: column; overflow: hidden; margin: 0;
  background: transparent; color: inherit;
}

/* ===== ステージ（下寄せ・フッター直上） ===== */
.kmv-viewer-dialog .cv-stage{
  height: auto; flex: 1 1 auto; min-height: 0; overflow: hidden;
  display: grid; align-content: end; justify-items: center;
  padding: 0; padding-bottom: var(--bottom-gap, 6px); margin: 0;
  background: transparent;
}

/* ===== 見開き（横並び・下寄せ・中央寄せ＋任意ギャップ） ===== */
.kmv-viewer-dialog .cv-spread{
  height: 100%; width: 100%; margin: 0;
  display: flex; align-items: flex-end; justify-content: center;
  gap: var(--spread-gap, 0px); flex-wrap: nowrap;
  transform: translateY(var(--cv-shift-y, 0px));
  will-change: transform;
}

/* ===== 画像（高さ主導＋幅にもズーム） ===== */
.kmv-viewer-dialog .cv-spread > .cv-img{
  height: auto;
  max-height: calc(100% * var(--cv-zoom, 1));
  width: auto;
  max-width:  calc(100% * var(--cv-zoom, 1));
  object-fit: contain; transform: none; margin: 0; background: transparent;
}

/* ===== フッターは最下段固定 ===== */
.kmv-viewer-dialog .cv-footer{
  position: static; top: auto; bottom: auto; transform: none;
  visibility: visible; opacity: 1; margin: 0;
}

/* ===== Topbar（中央ページ表示） ===== */
.kmv-viewer-dialog .cv-topbar{
  display: flex; align-items: center; gap: 8px;
  padding: 0 8px; height: 28px; color: inherit;
}
.kmv-viewer-dialog .cv-title{ margin-inline: auto; font-weight: 600; font-size: 14px; opacity: .9; }
.kmv-viewer-dialog .cv-tools{ margin-left: auto; }

/* ===== ナビ（左右端の中央）— 実装差異も拾う ===== */
.kmv-viewer-dialog .cv-nav,
.kmv-viewer-dialog .cv-btn.prev,
.kmv-viewer-dialog .cv-btn.next,
.kmv-viewer-dialog .cv-left,
.kmv-viewer-dialog .cv-right{
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; display: grid; place-items: center;
  border-radius: 999px; cursor: pointer; user-select: none;
  background: rgba(0,0,0,.35); color: #fff;
}
.kmv-viewer-dialog.light .cv-nav,
.kmv-viewer-dialog.light .cv-btn.prev,
.kmv-viewer-dialog.light .cv-btn.next,
.kmv-viewer-dialog.light .cv-left,
.kmv-viewer-dialog.light .cv-right{
  background: rgba(0,0,0,.22); color: #111;
}
.kmv-viewer-dialog .cv-nav.left,
.kmv-viewer-dialog .cv-btn.prev,
.kmv-viewer-dialog .cv-left{ left: 14px; }     /* 赤丸辺りに寄せる */
.kmv-viewer-dialog .cv-nav.right,
.kmv-viewer-dialog .cv-btn.next,
.kmv-viewer-dialog .cv-right{ right: 14px; }   /* 赤丸辺りに寄せる */
.kmv-viewer-dialog .cv-nav:hover,
.kmv-viewer-dialog .cv-btn.prev:hover,
.kmv-viewer-dialog .cv-btn.next:hover,
.kmv-viewer-dialog .cv-left:hover,
.kmv-viewer-dialog .cv-right:hover{ filter: brightness(1.15); }

/* ===== 旧CSSの強い指定を無効化（保険） ===== */
.kmv-viewer-dialog .cv-embed,
.kmv-viewer-dialog .cv-stage,
.kmv-viewer-dialog .cv-spread,
.kmv-viewer-dialog .cv-spread > .cv-img,
.kmv-viewer-dialog .cv-footer{
  will-change: auto !important;
}

/* ===== ホーム側の重なり事故を回避（保険） ===== */
.kmv-banner > img, .kmv-deco-fixed{ pointer-events: none; }
.kmv-comic-pills{ position: relative; z-index: 1000; pointer-events: auto; }
/* .kmv-sec-coverlink{ pointer-events: none; }  ← セクション全面リンク構成ならON */
/* === Theme 修正：overlay の .light を dialog にも波及させる === */
.kmv-viewer-overlay.light .kmv-viewer-dialog{
  --dlg-bg: rgba(247,247,247,.96);
  --cv-fg: #111;
  color: var(--cv-fg);
  box-shadow: 0 12px 36px rgba(0,0,0,.16);
}
/* ダーク（overlay に .light が無い時） */
.kmv-viewer-overlay:not(.light) .kmv-viewer-dialog{
  --dlg-bg: rgba(16,16,16,.92);
  --cv-fg: #f0f0f0;
  color: var(--cv-fg);
}

/* === 矢印を左右端の中央に“固定”する（強制上書き） === */
/* 親を基準要素に */
.kmv-viewer-dialog .cv-stage{ position:relative !important; }

/* 実装差異を全部拾うために広めにマッチ */
.kmv-viewer-dialog .cv-nav,
.kmv-viewer-dialog .cv-btn.prev,
.kmv-viewer-dialog .cv-btn.next,
.kmv-viewer-dialog .cv-left,
.kmv-viewer-dialog .cv-right{
  position:absolute !important;
  top:50% !important; transform:translateY(-50%) !important;
  width:44px !important; height:44px !important;
  display:grid !important; place-items:center !important;
  border-radius:999px !important; cursor:pointer !important;
  user-select:none !important;
  background:rgba(0,0,0,.35) !important; color:#fff !important;
  z-index:5 !important;
}
.kmv-viewer-dialog.light .cv-nav,
.kmv-viewer-dialog.light .cv-btn.prev,
.kmv-viewer-dialog.light .cv-btn.next,
.kmv-viewer-dialog.light .cv-left,
.kmv-viewer-dialog.light .cv-right{
  background:rgba(0,0,0,.22) !important; color:#111 !important;
}

/* それぞれの左右位置（どれで出てきても拾う） */
.kmv-viewer-dialog .cv-nav.left,
.kmv-viewer-dialog .cv-btn.prev,
.kmv-viewer-dialog .cv-left{ left:14px !important; }

.kmv-viewer-dialog .cv-nav.right,
.kmv-viewer-dialog .cv-btn.next,
.kmv-viewer-dialog .cv-right{ right:14px !important; }

/* もし中央に置かれる“センター領域”がある場合は無効化 */
.kmv-viewer-dialog .cv-center,
.kmv-viewer-dialog .cv-middle,
.kmv-viewer-dialog .cv-nav.center{
  display:none !important;
}
/* --- softer LIGHT theme (less glaring) --- */
.kmv-viewer-overlay.light{ --overlay-bg: rgba(255,255,255,.18); }    /* 透過強め：0.18 */
.kmv-viewer-dialog.light{
  --dlg-bg: rgba(245,245,245,.88);   /* 本体も薄く（0.88） */
  /* お好みで↓のガラス効果をONにすると柔らかくなります */
  backdrop-filter: blur(2px) saturate(110%);
}
/* ==== KMV pills: main row bottom-right, special lifted (banner-anchored) ==== */

/* 基本ノブ */
:root{
  --kmv-pill-h: 32px;
  --kmv-pill-pad-x: 10px;
  --kmv-pill-gap: 6px;
  --kmv-pill-right: 16px;
  --kmv-pill-bottom: 16px;
  --kmv-special-lift-steps: 5;   /* ピル5個分持ち上げ */
  --kmv-main-right-nudge: -16px; /* 1〜6話だけをさらに右へ（負で右、正で左） */
}

.kmv-banner{ position: relative; }
.kmv-banner .kmv-comic-pills{
  position: absolute;
  right: var(--kmv-pill-right);
  bottom: var(--kmv-pill-bottom);
  display: flex; gap: var(--kmv-pill-gap);
  z-index: 1000;
  overflow: visible; /* 特別編がはみ出しても見えるように */
}

/* ピルの見た目（そのまま） */
.kmv-banner .kmv-comic-pills .kmv-pill{
  height: var(--kmv-pill-h);
  padding: 0 var(--kmv-pill-pad-x);
  line-height: calc(var(--kmv-pill-h) - 2px);
  border-radius: 999px;
  background: rgba(0,0,0,.55);
  color: #fff;
  border: 1px solid rgba(255,255,255,.15);
  backdrop-filter: saturate(110%);
  font-weight: 600; cursor: pointer;
  transition: transform .15s ease, filter .15s ease, background .15s ease;
}
.kmv-banner .kmv-comic-pills .kmv-pill:hover{ filter: brightness(1.15); transform: translateY(-1px); }
.kmv-banner .kmv-comic-pills .kmv-pill:disabled{ opacity:.5; cursor: default; transform:none; }

/* ── 古い“持ち上げ”指定の無効化（position/top/transform をリセット） ── */
.kmv-banner .kmv-comic-pills .kmv-pill--special,
.kmv-banner .kmv-comic-pills .kmv-pill.kmv-pill-special,
.kmv-banner .kmv-comic-pills .kmv-pill[data-episode-id="comicsv1"]{
  position: static;
  top: auto; right: auto; bottom: auto; left: auto;
  transform: none;
}

/* ── 特別編を .kmv-banner 基準で絶対配置（上に持ち上げる） ── */
/* ※ いずれのマーカーでも拾う（JS付与/旧表記/data属性） */
.kmv-banner .kmv-pill--special,
.kmv-banner .kmv-pill.kmv-pill-special,
.kmv-banner .kmv-comic-pills .kmv-pill[data-episode-id="comicsv1"]{
  position: absolute !important;
  right: var(--kmv-pill-right);
  /* “下端 + ピル×段数”ぶん上に */
  bottom: calc(var(--kmv-pill-bottom) + var(--kmv-special-lift-steps) * (var(--kmv-pill-h) + var(--kmv-pill-gap)));
  z-index: 1001; /* メイン列より前に */
}

/* ── 1〜6話だけを右に微寄せ（特別編を完全除外） ── */
.kmv-banner .kmv-comic-pills .kmv-pill:not(.kmv-pill-special):not(.kmv-pill--special):not([data-episode-id="comicsv1"]){
  transform: translateX(var(--kmv-main-right-nudge));
}
.kmv-banner .kmv-comic-pills .kmv-pill:not(.kmv-pill-special):not(.kmv-pill--special):not([data-episode-id="comicsv1"]):hover{
  transform: translateX(var(--kmv-main-right-nudge)) translateY(-1px);
}
.kmv-banner .kmv-comic-pills .kmv-pill:not(.kmv-pill-special):not(.kmv-pill--special):not([data-episode-id="comicsv1"]):disabled{
  transform: translateX(var(--kmv-main-right-nudge));
}

/* スマホは lift をやや弱め（任意） */
@media (max-width: 640px){
  :root{ --kmv-pill-h: 30px; }
  .kmv-banner .kmv-pill--special,
  .kmv-banner .kmv-pill.kmv-pill-special,
  .kmv-banner .kmv-comic-pills .kmv-pill[data-episode-id="comicsv1"]{
    bottom: calc(var(--kmv-pill-bottom) + 3 * (var(--kmv-pill-h) + var(--kmv-pill-gap)));
  }
}
/* === Special pill vertical nudge (数値だけ触ればOK) === */
:root { --SPECIAL_Y: 17px; }  /* +で下げる / -で上げる（単位はpx） */

.kmv-banner .kmv-comic-pills .kmv-pill-special{
  /* 既存の「持ち上げ量」に、さらに上下微調整を合算 */
  transform: translateY(calc(
    -1 * var(--kmv-special-lift-steps) * (var(--kmv-pill-h) + var(--kmv-pill-gap))
    + var(--SPECIAL_Y)
  )) !important;
}
/* === SPECIAL: 位置はこの1ブロックだけで管理（Aに統一） === */
/* ノブ：数値だけ変えればOK（+で下げる / -で上げる） */
:root { --SPECIAL_Y: 88px; }

/* どの“特別編”マーカーでも拾う（class/data属性どちらでも） */
.kmv-banner .kmv-comic-pills .kmv-pill.kmv-pill-special,
.kmv-banner .kmv-comic-pills .kmv-pill.kmv-pill--special,
.kmv-banner .kmv-comic-pills .kmv-pill[data-episode-id="comicsv1"]{
  position: absolute !important;
  right: 0; bottom: 0;
  /* 基本の「5個分持ち上げ」＋ 追加の上下微調整（--SPECIAL_Y） */
  transform: translateY(calc(
    -1 * var(--kmv-special-lift-steps) * (var(--kmv-pill-h) + var(--kmv-pill-gap))
    + var(--SPECIAL_Y)
  )) !important;
  z-index: 3;
}

/* ⚠ 旧式の“relative + top”で持ち上げる系は無効化（競合回避） */
 /* .kmv-banner .kmv-comic-pills .kmv-pill--special,
    .kmv-banner .kmv-comic-pills [data-episode-id="comicsv1"]{
      position: relative;
      top: calc(-2.5 * (var(--pill-size) + var(--pill-gap)));
    } */