/* article-comic-viewer-v2-overrides.css
 * 元の article-comic-viewer.css より後に読み込んでください。
 */
.article-comic__launcher{
  position:relative;
  width:min(100%,520px);
  height:clamp(320px,60vh,680px);
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:0;
  padding:0;
  overflow:hidden;
  border:3px solid #d9e5ec;
  border-radius:14px;
  background:#eef3f6;
  color:inherit;
  text-align:center;
  box-shadow:0 6px 18px rgba(0,0,0,.10);
}
.article-comic__launcher:hover,
.article-comic__launcher:focus-visible{
  transform:translateY(-2px);
  border-color:#b8ccd8;
  background:#eef3f6;
  box-shadow:0 10px 24px rgba(94,124,142,.18);
  outline:3px solid rgba(184,204,216,.55);
  outline-offset:3px;
}
.article-comic__launcher-cover{
  position:absolute;
  inset:0;
  width:auto;
  height:auto;
  aspect-ratio:auto;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  border:0;
  border-radius:0;
  background:#eaf0f3;
  box-shadow:none;
}
.article-comic__launcher-cover img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
  filter:grayscale(.08) contrast(.76) brightness(1.12);
}
.article-comic__launcher-cover::after{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(232,238,242,.58);
  transition:background-color .15s ease;
}
.article-comic__launcher:hover .article-comic__launcher-cover::after,
.article-comic__launcher:focus-visible .article-comic__launcher-cover::after{
  background:rgba(224,234,240,.48);
}
.article-comic__launcher-text{
  position:relative;
  z-index:2;
  min-width:0;
  max-width:calc(100% - 40px);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  padding:18px 24px;
  border:1px solid rgba(255,255,255,.78);
  border-radius:999px;
  background:rgba(255,255,255,.88);
  color:#25333b;
  box-shadow:0 8px 24px rgba(42,65,78,.18);
  backdrop-filter:blur(5px);
}
.article-comic__launcher-label{
  font-size:clamp(1.15rem,2.5vw,1.55rem);
  font-weight:900;
  line-height:1.25;
}
.article-comic__launcher-label::before{
  content:"▶";
  display:inline-block;
  margin-right:.5em;
  color:#52758a;
  font-size:.82em;
}
.article-comic__launcher-meta{
  color:#52636d;
  font-size:.85rem;
  font-weight:700;
  line-height:1.4;
}
@media(max-width:767px){
  .article-comic__launcher{
    width:min(100%,420px);
    height:clamp(300px,58vh,560px);
  }
  .article-comic__launcher-text{
    max-width:calc(100% - 28px);
    padding:15px 19px;
  }
}


.article-comic-viewer__dialog {
  display: block;
  height: min(94vh, 960px);
}

/* タイトルバーを画像上部に重ねる */
.article-comic-viewer__topbar {
  position: absolute;
  top: 8px;
  left: 8px;
  right: 8px;
  z-index: 5;

  padding: 0;
  background: transparent;
  border-bottom: 0;
  pointer-events: none;
}

/* タイトル */
.article-comic-viewer__title {
  max-width: 55%;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(25, 25, 25, .55);
  color: #fff;
  font-size: .78rem;
  backdrop-filter: blur(5px);
  pointer-events: auto;
}

/* ページ数 */
.article-comic-viewer__counter {
  margin-left: auto;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(25, 25, 25, .55);
  color: #fff;
  font-size: .78rem;
  backdrop-filter: blur(5px);
  pointer-events: auto;
}

/* 閉じるボタン */
.article-comic-viewer__close {
  width: 36px;
  height: 36px;
  background: rgba(25, 25, 25, .55);
  border-color: rgba(255, 255, 255, .28);
  font-size: 20px;
  pointer-events: auto;
}

/* 画像表示領域をほぼ全面に */
.article-comic-viewer__stage {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 10px 48px;
}

/* 下部ナビも画像上に重ねる */
.article-comic-viewer__footer {
  position: absolute;
  left: 50%;
  bottom: 10px;
  z-index: 5;
  transform: translateX(-50%);

  width: auto;
  padding: 5px;
  gap: 5px;
  border: 0;
  border-radius: 999px;
  background: rgba(25, 25, 25, .48);
  backdrop-filter: blur(5px);
}

/* 最初へ・最後へ */
.article-comic-viewer__button {
  min-height: 34px;
  padding: 6px 11px;
  border-color: rgba(255, 255, 255, .24);
  background: rgba(255, 255, 255, .10);
  font-size: .76rem;
}

/* 左右ナビを小さな丸ボタンに */
.article-comic-viewer__nav {
  width: 38px;
  min-width: 38px;
  height: 38px;
  min-height: 38px;
  padding: 0;
  overflow: hidden;

  border-radius: 50%;
  background: rgba(25, 25, 25, .48);
  border-color: rgba(255, 255, 255, .25);
  color: transparent;
  font-size: 0;

  backdrop-filter: blur(5px);
}

/* 矢印を疑似要素で表示 */
.article-comic-viewer__nav::after {
  display: block;
  color: #fff;
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
}

/* 右開きなので、左側が「次へ」 */
.article-comic-viewer__nav.is-next::after {
  content: "‹";
}

/* 右側が「前へ」 */
.article-comic-viewer__nav.is-prev::after {
  content: "›";
}

.article-comic-viewer__nav.is-next {
  left: 6px;
}

.article-comic-viewer__nav.is-prev {
  right: 6px;
}

/* ホバー時のみ少し強調 */
.article-comic-viewer__nav:hover,
.article-comic-viewer__nav:focus-visible {
  background: rgba(75, 103, 120, .78);
}

/* スマホ */
@media (max-width: 767px) {
  .article-comic-viewer__stage {
    padding: 8px 38px;
  }

  .article-comic-viewer__topbar {
    top: 6px;
    left: 6px;
    right: 6px;
  }

  .article-comic-viewer__title {
    max-width: 45%;
    font-size: .7rem;
  }

  .article-comic-viewer__counter {
    font-size: .7rem;
  }

  .article-comic-viewer__close {
    width: 34px;
    height: 34px;
  }

  .article-comic-viewer__nav {
    width: 34px;
    min-width: 34px;
    height: 42px;
    min-height: 42px;
    border-radius: 999px;
  }

  .article-comic-viewer__nav::after {
    font-size: 20px;
  }

  .article-comic-viewer__nav.is-next {
    left: 3px;
  }

  .article-comic-viewer__nav.is-prev {
    right: 3px;
  }

  .article-comic-viewer__footer {
    bottom: 7px;
  }

  .article-comic-viewer__button {
    min-height: 32px;
    padding: 5px 9px;
    font-size: .7rem;
  }
}