/* S1-6 回ページ: 同じ view model をスマホと PC に配置する。 */
.viewer-episode {
  padding-bottom: 7rem;
}
.viewer-subscription {
  border: 1px solid var(--line, #e8eaee);
  border-radius: 22px;
  padding: 24px;
  align-self: start;
}
.viewer-subscription .btn {
  width: 100%;
}
.viewer-address,
.viewer-next {
  background: #f5f6f8;
  border-radius: 14px;
  padding: 12px 14px;
  overflow-wrap: anywhere;
}
.viewer-clear {
  min-height: 44px;
  border: 0;
  background: transparent;
  color: #1652f0;
  text-decoration: underline;
  cursor: pointer;
}
.viewer-bar {
  position: fixed;
  z-index: 10;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 12px 20px calc(12px + env(safe-area-inset-bottom));
  background: #fff;
  border-top: 1px solid #e8eaee;
  text-align: center;
}
.viewer-offer[hidden] {
  display: none;
}
.viewer-offer {
  position: fixed;
  z-index: 20;
  bottom: 0;
  left: 0;
  right: 0;
  max-height: 85dvh;
  overflow-y: auto;
  border-radius: 28px 28px 0 0;
  background: #fff;
  box-shadow: 0 -12px 60px #0003;
  padding: 28px max(20px, calc((100vw - 600px) / 2)) calc(24px + env(safe-area-inset-bottom));
  animation: viewer-enter 0.2s ease-out;
}
.viewer-offer .btn {
  display: block;
  width: 100%;
}
@keyframes viewer-enter {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}
@media (min-width: 900px) {
  .viewer-episode .ep-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 40px;
  }
}
@media (max-width: 899px) {
  .viewer-episode .ep-layout {
    display: flex;
    flex-direction: column;
    gap: 24px;
  }
  .viewer-subscription {
    width: 100%;
  }
}
@media (prefers-reduced-motion: reduce) {
  .viewer-offer {
    animation: none;
  }
}