/* 案B専用。旧プレビューのスタイルには影響しません。 */
.viewer-gate {
  height: 100dvh;
  overflow: auto;
  display: grid;
  place-items: center;
  padding: 24px;
}
.viewer-card {
  width: min(100%, 400px);
  padding: 34px 26px;
  background: var(--paper);
  box-shadow: 0 12px 36px #544a3820;
}
.viewer-card h1 {
  font-size: 28px;
  font-weight: 400;
  line-height: 1.8;
}
#viewer-error {
  color: #a65b49;
  font-size: 12px;
  line-height: 1.8;
}
:root {
  --page-ratio: 0.54;
  --card-ratio: 0.65;
}
body.wide-reader {
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
}
.wide-reader #reader {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding-top: max(10px, env(safe-area-inset-top));
  padding-bottom: max(12px, env(safe-area-inset-bottom));
}
.wide-reader .chapter,
.wide-reader .hint,
.wide-reader footer > span {
  display: none;
}
.wide-reader #stage {
  flex: 1;
  min-height: 0;
  height: auto;
  padding: 6px 12px;
}
.wide-reader .book-nav {
  flex: none;
  height: 48px;
  margin: 8px 0 0;
  gap: 28px;
}
.wide-reader .book-nav > button {
  height: 34px;
  width: 34px;
}
.wide-reader footer {
  position: fixed;
  bottom: max(17px, env(safe-area-inset-bottom));
  right: 12px;
  margin: 0;
  padding: 0;
  z-index: 1;
}
.wide-reader footer button {
  font-size: 8px;
  letter-spacing: 0;
  color: #a39b8b;
  padding: 5px;
}
.wide-reader .page {
  box-shadow:
    5px 9px 20px #544a3827,
    2px 2px 0 #d6d0c1,
    4px 4px 0 #f6f2e9;
}
.wide-reader .cover {
  box-shadow:
    inset 8px 0 9px -8px #5c514d,
    7px 12px 25px #544a3833,
    3px 3px 0 #bdb5a6,
    5px 5px 0 #e6dfd1;
}
.submission-page #reader,
.submission-page footer {
  display: none;
}
.submission-page .submission-intro {
  max-width: 440px;
  margin: 15dvh auto;
  padding: 30px;
  text-align: center;
}
.submission-intro h1 {
  font-size: 30px;
  font-weight: 400;
  line-height: 1.9;
}
.submission-page #auth::backdrop,
.submission-page #editor::backdrop {
  background: #e8e5dcdd;
}
@media (orientation: landscape) {
  .wide-reader #reader {
    padding-top: max(6px, env(safe-area-inset-top));
    padding-bottom: max(5px, env(safe-area-inset-bottom));
  }
  .wide-reader .book-nav {
    height: 34px;
    margin-top: 3px;
    gap: 20px;
  }
  .wide-reader .book-nav > button {
    width: 28px;
    height: 28px;
  }
  .wide-reader #dots {
    margin-top: 5px;
  }
  .wide-reader footer {
    bottom: 10px;
  }
}

/* ボタン化したチェキも通常の台紙と同じ上揃えにする。 */
button.polaroid {
  appearance: none;
  align-content: start;
}
/* 全画面共通の台紙座標。親の幅に依存するpaddingを使用しない。 */
.polaroid {
  padding: 0;
  border: 0;
  min-height: 0;
  height: auto;
  aspect-ratio: var(--card-ratio);
}
.polaroid .photo-area {
  position: absolute;
  left: 5%;
  top: 4%;
  width: 90%;
  height: calc(var(--photo-share) - 6%);
}
.preview-column .message {
  pointer-events: none;
}
.preview-column.text-mode .message {
  pointer-events: auto;
}
.preview-column .photo-area {
  cursor: ns-resize;
}