/* Manga Viewer ─ ebook shortcode */

.mv-viewer {
  --mv-max-width: 300px;
  --mv-bg: #0f0e10;
  --mv-fg: #ffffff;
  --mv-fg-sub: rgba(255, 255, 255, 0.7);
  --mv-fg-mute: rgba(255, 255, 255, 0.4);
  --mv-nav-bg: rgba(20, 18, 22, 0.7);
  --mv-nav-bg-hover: rgba(40, 35, 45, 0.92);
  --mv-accent: #ec5b85;
  --mv-radius: 6px;
  --mv-transition: 0.32s cubic-bezier(0.2, 0.7, 0.2, 1);

  position: relative;
  box-sizing: border-box;
  max-width: var(--mv-max-width);
  margin: 1.4em auto;
  padding: 8px 8px 10px;
  background: var(--mv-bg);
  border-radius: 8px;
  color: var(--mv-fg);
  user-select: none;
  -webkit-user-select: none;
}
.mv-viewer *,
.mv-viewer *::before,
.mv-viewer *::after { box-sizing: border-box; }

.mv-frame {
  position: relative;
  display: flex;
  align-items: stretch;
  gap: 4px;
}

/* ─── ステージ（スワイプ領域） ─── */
.mv-stage {
  position: relative;
  flex: 1;
  /* 縦長 2:3 のフレーム比 */
  aspect-ratio: 2 / 3;
  overflow: hidden;
  background: #1a1820;
  border-radius: var(--mv-radius);
  outline: none;
  touch-action: pan-y;
}
.mv-stage:focus-visible {
  box-shadow: 0 0 0 3px rgba(236, 91, 133, 0.55);
}

/* track と slide は <ul>/<li> なので SWELL の .post_content li 等に上書きされないよう !important */
.mv-viewer .mv-track,
ul.mv-track {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
}
.mv-viewer .mv-slide,
li.mv-slide {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translateX(8%);
  transition: opacity var(--mv-transition), transform var(--mv-transition);
  pointer-events: none;
}
.mv-slide::before, .mv-slide::marker { content: none !important; }
.mv-slide.is-active {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
  z-index: 1;
}
.mv-slide.is-prev {
  transform: translateX(-8%);
}
.mv-slide img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  pointer-events: none;
  -webkit-user-drag: none;
}

/* ─── ナビ矢印 ─── */
.mv-nav {
  flex: 0 0 auto;
  align-self: stretch;
  width: 32px;
  background: var(--mv-nav-bg);
  color: var(--mv-fg);
  border: none;
  border-radius: var(--mv-radius);
  font-size: 22px;
  font-family: inherit;
  font-weight: 400;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--mv-transition), color var(--mv-transition), opacity var(--mv-transition);
  padding: 0 0 2px;
}
.mv-nav:hover:not([disabled]) {
  background: var(--mv-nav-bg-hover);
  color: var(--mv-accent);
}
.mv-nav[disabled] {
  opacity: 0.25;
  cursor: not-allowed;
}

/* ─── メタ（ページ数表示） ─── */
.mv-meta {
  margin-top: 10px;
  text-align: center;
  color: var(--mv-fg-sub);
  font-size: 11px;
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
}
.mv-counter-current {
  color: var(--mv-fg);
  font-weight: 600;
  font-size: 12px;
}

/* ─── ドット ─── */
.mv-dots {
  display: flex;
  gap: 5px;
  justify-content: center;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
  flex-wrap: wrap;
}
.mv-dots li { margin: 0; padding: 0; }
.mv-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  border: none;
  padding: 0;
  background: var(--mv-fg-mute);
  cursor: pointer;
  transition: background var(--mv-transition), width var(--mv-transition);
}
.mv-dot:hover { background: var(--mv-fg-sub); }
.mv-dot.is-active {
  background: var(--mv-accent);
  width: 14px;
  border-radius: 999px;
}

/* ─── 拡大/縮小トグルボタン ─── */
.mv-toggle {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  border: none;
  cursor: pointer;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-family: inherit;
  font-size: 14px;
  line-height: 1;
  transition: background var(--mv-transition), transform var(--mv-transition);
}
.mv-toggle:hover { background: rgba(0, 0, 0, 0.85); transform: scale(1.06); }
.mv-toggle .mv-icon-close { display: none; font-size: 13px; }
.mv-viewer.is-fullscreen .mv-toggle .mv-icon-expand { display: none; }
.mv-viewer.is-fullscreen .mv-toggle .mv-icon-close  { display: block; }
.mv-viewer.is-fullscreen .mv-toggle {
  top: 18px;
  right: 18px;
  width: 40px;
  height: 40px;
  font-size: 18px;
}

/* ─── フルスクリーン状態 (再書き: track を relative にしてサイズを明示) ─── */
.mv-viewer.is-fullscreen {
  position: fixed;
  inset: 0;
  z-index: 99999;
  max-width: none;
  margin: 0;
  border-radius: 0;
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  background: rgba(15, 14, 16, 0.96);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.mv-viewer.is-fullscreen .mv-frame {
  flex: 1 1 auto;
  min-height: 0;
  gap: 12px;
  display: flex;
  align-items: stretch;
}
.mv-viewer.is-fullscreen .mv-stage {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  aspect-ratio: auto;        /* 縦長比率を解除 */
  height: auto;
  max-height: none;
  align-self: stretch;
  position: relative;        /* track の containing block */
  background: transparent;
  border-radius: 6px;
  overflow: hidden;
}
/* track は stage 内を完全に占有 (relative にして高さ確保) */
.mv-viewer.is-fullscreen .mv-track {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
/* 各スライドは絶対配置で track 全体に重なる。表示は opacity で切替 */
.mv-viewer.is-fullscreen .mv-slide {
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  opacity: 0;
  transform: none;
  pointer-events: none;
  z-index: 0;
  transition: opacity 0.3s ease;
}
.mv-viewer.is-fullscreen .mv-slide.is-active {
  opacity: 1;
  transform: none;
  pointer-events: auto;
  z-index: 1;
}
.mv-viewer.is-fullscreen .mv-slide.is-prev {
  transform: none;       /* 横スライドアニメ廃止（全画面では opacity のみ）*/
}
.mv-viewer.is-fullscreen .mv-slide img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}
.mv-viewer.is-fullscreen .mv-nav {
  width: 52px;
  font-size: 32px;
  align-self: stretch;
}
.mv-viewer.is-fullscreen .mv-meta {
  flex: 0 0 auto;
  margin-top: 16px;
  font-size: 13px;
}
.mv-viewer.is-fullscreen .mv-counter-current { font-size: 14px; }
.mv-viewer.is-fullscreen .mv-dots {
  flex: 0 0 auto;
  margin-top: 12px;
  gap: 7px;
}
.mv-viewer.is-fullscreen .mv-dot { width: 8px; height: 8px; }
.mv-viewer.is-fullscreen .mv-dot.is-active { width: 22px; }

/* スクロールロック中の body */
body.mv-lock-scroll { overflow: hidden !important; }

/* ─── レスポンシブ ─── */
@media (max-width: 600px) {
  .mv-viewer { padding: 6px 6px 8px; border-radius: 6px; }
  .mv-nav { width: 26px; font-size: 18px; }
  .mv-stage { border-radius: 4px; }
  .mv-toggle { width: 26px; height: 26px; font-size: 12px; top: 4px; right: 4px; }
  .mv-viewer.is-fullscreen { padding: 48px 12px 16px; }
  .mv-viewer.is-fullscreen .mv-nav { width: 38px; font-size: 24px; }
}

/* ドラッグ中のなめらかさ抑制（指追従用） */
.mv-viewer.is-dragging .mv-slide {
  transition: none !important;
}