:root {
  --paper: #f6f0e2;
  --paper-soft: #fffaf1;
  --card: #efede7;
  --ink: #262118;
  --muted: #756e62;
  --line: #ddd7c9;
  --gold: #c9a15d;
  --gold-soft: #f2dfb6;
  --gold-deep: #d3a24d;
  --lavender: #8d83c9;
  --navy: #17243b;
  --shadow: 0 18px 52px rgba(32, 24, 8, .13);
  --header-h: 74px;
  --stage-w: min(1320px, calc(100vw - 128px));
  --stage-h: min(760px, calc(100vh - var(--header-h) - 64px));
  --page-turn-duration: 560ms;
  --page-fade-duration: 320ms;
  --page-turn-perspective: 3200px;
  --page-turn-easing: cubic-bezier(.38, .04, .28, 1);
}

* { box-sizing: border-box; }

html,
body { min-height: 100%; }

body {
  margin: 0;
  background:
    radial-gradient(circle at 18% 8%, rgba(255, 255, 255, .86), transparent 30%),
    linear-gradient(135deg, #fffaf1 0%, #f6f0e2 44%, #e8dfce 100%);
  color: var(--ink);
  font-family: Pretendard, "Noto Sans KR", "Apple SD Gothic Neo", "Segoe UI", system-ui, sans-serif;
  overflow: hidden;
}

button,
input,
select {
  font: inherit;
}

.toolbar {
  position: fixed;
  z-index: 30;
  inset: 0 0 auto;
  min-height: var(--header-h);
  display: grid;
  grid-template-columns: 220px auto minmax(420px, 1fr) 96px;
  grid-template-areas:
    "brand nav controls counter";
  gap: 12px;
  align-items: center;
  padding: 10px 20px;
  background: rgba(250, 247, 238, .88);
  border-bottom: 1px solid rgba(216, 207, 188, .72);
  backdrop-filter: blur(16px);
}

.brand-mini {
  grid-area: brand;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

.brand-mini img {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  object-fit: cover;
  box-shadow: 0 5px 18px rgba(0, 0, 0, .08);
}

.brand-mini strong {
  display: block;
  color: var(--navy);
  font-size: 15px;
  letter-spacing: .02em;
}

.brand-mini small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.top-nav,
.toolbar-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.top-nav {
  grid-area: nav;
  display: flex;
  justify-content: center;
}

.toolbar-controls {
  grid-area: controls;
  justify-content: flex-start;
}

.top-nav button,
.toolbar button,
.toolbar select,
.toolbar input {
  height: 36px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fffaf1;
  color: var(--ink);
  padding: 0 14px;
  font-size: 13px;
  outline: none;
}

.top-nav button {
  height: 34px;
  padding-inline: 11px;
  font-size: 12px;
}

.top-nav button,
.toolbar button {
  cursor: pointer;
  flex: 0 0 auto;
  white-space: nowrap;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}

.top-nav button:hover,
.toolbar button:hover {
  background: #fff3d9;
  border-color: rgba(201, 161, 93, .7);
  transform: translateY(-1px);
}

.toolbar select {
  min-width: 220px;
  max-width: 360px;
  padding-right: 42px;
  appearance: none;
  background:
    linear-gradient(45deg, transparent 50%, var(--muted) 50%) calc(100% - 21px) 16px / 6px 6px no-repeat,
    linear-gradient(135deg, var(--muted) 50%, transparent 50%) calc(100% - 15px) 16px / 6px 6px no-repeat,
    #fffaf1;
  text-overflow: ellipsis;
}

.toolbar select option,
.toolbar select optgroup {
  padding-right: 42px;
}

.toolbar input {
  min-width: 120px;
  max-width: 360px;
  flex: 1;
  padding-right: 18px;
}

#copyBtn {
  position: relative;
  min-width: 118px;
  overflow: hidden;
  border-color: rgba(201, 161, 93, .52);
  background: linear-gradient(135deg, rgba(255, 250, 241, .98), rgba(255, 243, 217, .9));
  color: var(--navy);
  box-shadow: 0 8px 22px rgba(201, 161, 93, .14);
  animation: copyPulse 2.4s ease-in-out infinite;
}

#copyBtn::after {
  content: "";
  position: absolute;
  top: -40%;
  bottom: -40%;
  left: -45%;
  width: 38%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .82), transparent);
  transform: rotate(18deg);
  animation: copyShine 3s ease-in-out infinite;
}

#copyBtn:hover {
  background: linear-gradient(135deg, #fff6df, #fffaf1);
  box-shadow: 0 10px 28px rgba(201, 161, 93, .2);
}

#copyBtn.copied {
  background: linear-gradient(135deg, var(--navy), #263a59);
  border-color: rgba(23, 36, 59, .3);
  color: white;
  animation: copiedPop .48s ease;
}

@keyframes copyPulse {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-1px); }
}

@keyframes copyShine {
  0%, 55% { left: -45%; }
  75%, 100% { left: 120%; }
}

@keyframes copiedPop {
  0% { transform: scale(1); }
  45% { transform: scale(1.06); }
  100% { transform: scale(1); }
}

.counter {
  grid-area: counter;
  color: var(--muted);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

.book-shell {
  height: 100vh;
  padding-top: var(--header-h);
}

.swiper {
  width: 100%;
  height: calc(100vh - var(--header-h));
  position: relative;
  overflow: hidden;
  perspective: var(--page-turn-perspective);
  perspective-origin: 50% 48%;
}

.swiper-wrapper {
  height: 100%;
  display: flex;
  transition-property: transform;
  transition-timing-function: ease;
  transform-style: preserve-3d;
}

.swiper-slide {
  flex: 0 0 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 32px 64px;
}

/* Page turn. The right prompt panel is the leaf, hinged on its left edge.
   Its front is the prompt leaving the right page, its back is the image that
   ends up on the left page once the leaf lands. */
.page-turn-layer {
  position: absolute;
  inset: 0;
  z-index: 20;
  pointer-events: none;
  perspective: var(--page-turn-perspective);
  perspective-origin: 50% 50%;
  transform-style: preserve-3d;
}

.page-turn-underlay,
.page-turn-leaf {
  position: absolute;
  margin: 0;
}

.page-turn-underlay > * {
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
}

.page-turn-face > * {
  margin: 0 !important;
}

/* Holds the face that is still leaving, so the instant slide swap underneath
   never shows through before the leaf covers it. */
.page-turn-underlay {
  z-index: 1;
  animation: page_underlay_settle var(--page-turn-duration) var(--page-turn-easing) both;
}

.page-turn-leaf {
  z-index: 2;
  transform-style: preserve-3d;
  transform-origin: left center;
  will-change: transform;
  box-shadow: 0 20px 44px rgba(20, 28, 44, .24);
}

/* Segments are hinged to each other in a chain. Each one carries its own small
   rotation, so together they bow the page instead of turning it as one plate.
   No overflow here: the next segment sits outside this box and must not clip. */
.page-turn-seg {
  position: absolute;
  top: 0;
  height: 100%;
  transform-origin: left center;
  transform-style: preserve-3d;
}

.page-turn-seg[data-curl] {
  animation: page_curl_segment var(--page-turn-duration) ease-in-out both;
}

.page-turn-leaf.is-forward {
  animation: page_leaf_forward var(--page-turn-duration) var(--page-turn-easing) both;
}

.page-turn-leaf.is-backward {
  animation: page_leaf_backward var(--page-turn-duration) var(--page-turn-easing) both;
}

/* Overrun the right edge so the fold lines between segments never show a gap.
   The next segment paints over the overrun. */
.page-turn-face {
  position: absolute;
  inset: 0 -0.6px 0 0;
  overflow: hidden;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* Both faces need an explicit transform. Without one the front face is not
   backface culled and its mirrored text shows through late in the turn. */
.page-turn-face.is-front {
  transform: rotateY(0deg);
}

.page-turn-face.is-back {
  transform: rotateY(180deg);
}

/* Paper shading. Each segment carries its own gradient whose ends are set from
   that segment's bend, so the light follows the curve. Neighbouring ends are
   sampled to the same value, which keeps it continuous instead of banded. */
.page-turn-face::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 6;
  opacity: 0;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    rgba(24, 31, 46, var(--shade-from, .1)),
    rgba(24, 31, 46, var(--shade-to, .3))
  );
}

.page-turn-leaf.is-forward .page-turn-face.is-front::after,
.page-turn-leaf.is-backward .page-turn-face.is-back::after {
  animation: page_shade_rise var(--page-turn-duration) var(--page-turn-easing) both;
}

.page-turn-leaf.is-forward .page-turn-face.is-back::after,
.page-turn-leaf.is-backward .page-turn-face.is-front::after {
  animation: page_shade_fall var(--page-turn-duration) var(--page-turn-easing) both;
}

/* The landed leaf is narrower than the panel beneath it, so the face that ends
   the turn fades into the real slide instead of snapping to it. */
.page-turn-leaf.is-forward .page-turn-face.is-back > *,
.page-turn-leaf.is-backward .page-turn-face.is-front > * {
  animation: page_face_settle var(--page-turn-duration) var(--page-turn-easing) both;
}

/* Pure rotation. A translateZ lift here reads as the page popping toward the
   viewer, which is exactly the snap we are trying to remove. */
@keyframes page_leaf_forward {
  0% { transform: rotateY(0deg); }
  50% { transform: rotateY(-90deg); }
  100% { transform: rotateY(-180deg); }
}

@keyframes page_leaf_backward {
  0% { transform: rotateY(-180deg); }
  50% { transform: rotateY(-90deg); }
  100% { transform: rotateY(0deg); }
}

/* The bow builds as the page lifts, holds through the swing, then flattens so
   the segments are colinear again at both ends of the turn. */
@keyframes page_curl_segment {
  0% { transform: rotateY(0deg); }
  30%, 70% { transform: rotateY(var(--curl-angle, 0deg)); }
  100% { transform: rotateY(0deg); }
}

@keyframes page_shade_rise {
  0% { opacity: 0; }
  50%, 100% { opacity: .95; }
}

@keyframes page_shade_fall {
  0%, 50% { opacity: .95; }
  100% { opacity: 0; }
}

/* With mirrored pages the leaf lands exactly on the panel underneath, so these
   only need to cover the last frames rather than cross fade through the turn. */
@keyframes page_face_settle {
  0%, 94% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes page_underlay_settle {
  0%, 88% { opacity: 1; }
  97%, 100% { opacity: 0; }
}

/* The cover boundary cross fades: a copy of the outgoing stage dissolves over
   the slide that has already been swapped in underneath. */
/* Linear, not eased: an eased cross fade dumps most of the opacity in the first
   third and still reads as a cut. */
.page-turn-fade {
  position: absolute;
  z-index: 3;
  margin: 0;
  animation: page_fade_out var(--page-fade-duration) linear both;
}

.page-turn-fade > * {
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
}

@keyframes page_fade_out {
  from { opacity: 1; }
  to { opacity: 0; }
}

/* The incoming slide rises as the clone dissolves. It finishes early so the
   two never sit half transparent together and wash out to the background. */
.swiper.is_page_fade .swiper-slide-active {
  animation: page_fade_in var(--page-fade-duration) linear both;
}

@keyframes page_fade_in {
  0% { opacity: 0; }
  60%, 100% { opacity: 1; }
}

.slide-stage {
  width: var(--stage-w);
  height: var(--stage-h);
  position: relative;
  margin: auto;
}

/* The two pages must be mirror images about the gutter centre, otherwise the
   turning leaf cannot land on the opposite page. Keep the columns equal. */
.prompt-grid {
  height: 100%;
  display: grid;
  grid-template-columns: repeat(2, minmax(360px, 1fr));
  gap: 34px;
}

.visual-panel,
.prompt-panel {
  border: 1px solid rgba(222, 215, 202, .76);
  background: var(--paper-soft);
  border-radius: 8px;
  box-shadow: var(--shadow);
  overflow: hidden;
}

.visual-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  background: linear-gradient(135deg, #f2ead9, #fffaf1);
}

.visual-panel.has-img {
  padding: 18px;
  background: #fbfaf6;
}

.visual-panel img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  object-position: center;
  border-radius: 4px;
}

.visual-panel.contain img {
  object-fit: contain;
  padding: 0;
  background: transparent;
}

.placeholder {
  width: 80%;
  height: 78%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px dashed #d5cbb9;
  border-radius: 8px;
  background: rgba(255, 255, 255, .38);
  color: #9b927f;
  text-align: center;
}

.placeholder-no {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 72px;
  line-height: .9;
  color: var(--gold);
}

.placeholder strong {
  max-width: 80%;
  margin-top: 18px;
  color: #6c6255;
  font-size: 22px;
  line-height: 1.15;
}

.placeholder small {
  margin-top: 16px;
  font-size: 12px;
  letter-spacing: .08em;
  line-height: 1.5;
}

.appendix-slide .placeholder small {
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.7;
}

.prompt-panel {
  position: relative;
  display: grid;
  grid-template-rows: auto repeat(4, minmax(0, 1fr)) auto;
  gap: 14px;
  padding: 26px 26px 20px;
  background: rgba(239, 237, 231, .95);
}

.prompt-head {
  display: grid;
  grid-template-columns: 76px 1fr;
  gap: 18px;
  align-items: center;
}

.prompt-no {
  height: 76px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  border: 1px solid rgba(184, 136, 50, .44);
  background:
    radial-gradient(circle at 28% 18%, rgba(255, 255, 255, .78), transparent 34%),
    linear-gradient(145deg, #fff3d1 0%, var(--gold-soft) 42%, var(--gold-deep) 100%);
  color: var(--navy);
  box-shadow:
    0 14px 30px rgba(184, 136, 50, .18),
    inset 0 1px 0 rgba(255, 255, 255, .75),
    inset 0 -1px 0 rgba(132, 91, 25, .14);
  font-size: 28px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.prompt-title p,
.prompt-title span {
  display: block;
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

.prompt-title h2 {
  margin: 6px 0;
  color: var(--ink);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(24px, 2.4vw, 35px);
  font-weight: 500;
  line-height: 1.04;
}

.line-card {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 14px;
  align-items: center;
  min-height: 0;
  padding: 15px 16px;
  border: 1px solid rgba(222, 215, 202, .65);
  border-radius: 8px;
  background: #f8f5ed;
}

.line-card b {
  color: var(--gold);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 22px;
  text-align: center;
}

.line-card span {
  color: #373127;
  font-size: clamp(13px, 1.08vw, 16px);
  line-height: 1.5;
  word-break: keep-all;
}

.line-card strong {
  color: var(--navy);
}

.toc-rule {
  min-height: 0;
  padding-block: 12px;
  background: linear-gradient(135deg, rgba(255, 246, 224, .95), rgba(255, 250, 241, .9));
  border-color: rgba(201, 161, 93, .34);
}

.toc-rule b {
  color: #b9872f;
  font-family: inherit;
  font-size: 18px;
  font-weight: 800;
}

.toc-slide .prompt-panel {
  grid-template-rows: auto repeat(10, minmax(38px, 1fr)) auto;
  gap: 6px;
  padding: 18px 20px 16px;
}

.toc-collage {
  width: 84%;
  height: 84%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(5, minmax(0, 1fr));
  gap: 8px;
  padding: 8px;
  border: 1px solid rgba(201, 161, 93, .28);
  border-radius: 12px;
  background: rgba(255, 250, 241, .62);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .6);
}

.toc-collage-cell {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border-radius: 7px;
  background: #e9e0d1;
}

.toc-collage-cell img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  transform: scale(1.02);
}

.toc-collage-cell:nth-child(2) img,
.toc-collage-cell:nth-child(4) img {
  object-position: top center;
}

.toc-collage-cell:nth-child(3) img {
  object-position: center 22%;
}

.toc-collage-cell:nth-child(5) img {
  object-position: center 30%;
}

.toc-collage-cell::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(145deg, transparent 55%, rgba(23, 36, 59, .38));
  pointer-events: none;
}

.toc-collage-cell span {
  position: absolute;
  right: 7px;
  bottom: 5px;
  z-index: 1;
  color: #fffaf1;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-shadow: 0 1px 6px rgba(23, 36, 59, .5);
}

.toc-slide .prompt-head {
  grid-template-columns: 76px minmax(0, 1fr);
}

.toc-slide .prompt-title h2 {
  font-size: clamp(24px, 1.9vw, 30px);
}

.toc-slide .line-card {
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
  padding: 6px 10px;
}

.toc-slide .line-card span {
  font-size: clamp(10px, .82vw, 13px);
  line-height: 1.22;
}

.toc-slide .toc-rule {
  grid-template-columns: 32px 1fr;
  padding: 7px 10px;
}

.toc-slide .toc-rule b {
  font-size: 14px;
}

.toc-slide .toc-rule span {
  font-size: clamp(10px, .78vw, 12px);
  line-height: 1.22;
}

.toc-slide .slide-footer {
  min-height: 28px;
  align-items: center;
}

.slide-footer {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 12px;
  color: #aaa194;
  font-size: 12px;
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.tags span,
.cover-tags span {
  border: 1px solid rgba(201, 161, 93, .35);
  border-radius: 999px;
  background: rgba(255, 250, 241, .74);
  color: #76684f;
  padding: 7px 10px;
  font-size: 12px;
}

.page-no {
  white-space: nowrap;
}

/* The cover is a spread now, so it uses the same stage box as every other
   slide. A square cover sized stage would break the leaf geometry, which
   depends on both pages being mirror images of the same size. */

/* The opening spread is the jacket laid flat. Both halves keep the panel
   classes so the hinged leaf can turn them like any other page. */
.prompt-panel.cover-front {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 30px;
  background: var(--paper-soft);
}

.cover-front::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 15% 14%, rgba(255, 255, 255, .8), transparent 30%),
    linear-gradient(135deg, rgba(201, 161, 93, .08), transparent 45%, rgba(141, 131, 201, .07));
  pointer-events: none;
}

.visual-panel.cover-back {
  display: block;
  padding: 40px 38px;
  background: linear-gradient(150deg, #f4eee0 0%, #fffaf1 52%, #efe7d6 100%);
  text-align: left;
}

.cover-back-inner {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.cover-back-kicker {
  margin: 0 0 10px;
  color: var(--gold);
  font-size: 12px;
  letter-spacing: .24em;
  text-transform: uppercase;
}

.cover-back-title {
  margin: 0;
  color: var(--navy);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(28px, 2.6vw, 40px);
  font-weight: 500;
  line-height: 1.05;
}

.cover-back-sub {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 14px;
}

.cover-back-list {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
}

.cover-back-list li {
  border-left: 2px solid rgba(201, 161, 93, .5);
  padding-left: 14px;
}

.cover-back-list strong {
  display: block;
  color: var(--navy);
  font-size: 15px;
  letter-spacing: .01em;
}

.cover-back-list span {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}

.cover-back-mark {
  margin: 24px 0 0;
  padding-top: 16px;
  border-top: 1px solid rgba(201, 161, 93, .28);
  color: var(--gold);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
}

.cover-inner {
  position: relative;
  z-index: 1;
  max-width: 100%;
}

.cover-logo {
  position: relative;
  z-index: 1;
  width: 92px;
  height: 92px;
  border-radius: 22px;
  object-fit: cover;
  margin-bottom: 22px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .1);
}

.cover-kicker {
  position: relative;
  z-index: 1;
  margin: 0 0 12px;
  color: var(--gold);
  font-size: 15px;
  letter-spacing: .28em;
  text-transform: uppercase;
}

.cover-title {
  position: relative;
  z-index: 1;
  margin: 0;
  color: var(--navy);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(34px, 3.4vw, 56px);
  font-weight: 500;
  line-height: .98;
}

.cover-sub {
  position: relative;
  z-index: 1;
  margin: 18px 0 26px;
  color: var(--muted);
  font-size: 17px;
}

.cover-tags {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.brand-visual {
  flex-direction: column;
  gap: 22px;
  padding: 42px;
}

.brand-visual img {
  width: min(70%, 300px);
  height: auto;
  border-radius: 8px;
}

.brand-visual figcaption {
  color: var(--navy);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 28px;
}

.swiper-button-prev,
.swiper-button-next {
  position: fixed;
  z-index: 35;
  top: 50vh;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 250, 241, .72);
  border-radius: 50%;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .62), rgba(255, 250, 241, .24));
  box-shadow:
    0 16px 38px rgba(23, 36, 59, .12),
    inset 0 1px 0 rgba(255, 255, 255, .74),
    inset 0 -1px 0 rgba(201, 161, 93, .13);
  color: var(--navy) !important;
  cursor: pointer;
  backdrop-filter: blur(16px) saturate(1.28);
  transform: translateY(-50%);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.swiper-button-prev { left: 20px; }
.swiper-button-next { right: 20px; }

.swiper-button-prev:hover,
.swiper-button-next:hover {
  border-color: rgba(201, 161, 93, .54);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .78), rgba(246, 240, 226, .38));
  box-shadow:
    0 18px 46px rgba(23, 36, 59, .16),
    inset 0 1px 0 rgba(255, 255, 255, .82);
  transform: translateY(-50%) scale(1.03);
}

.swiper-button-prev svg,
.swiper-button-next svg {
  width: 23px;
  height: 23px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.25;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.swiper-button-prev::after,
.swiper-button-next::after {
  content: none !important;
  display: none !important;
}

.swiper-pagination {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 14px;
  z-index: 12;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 7px;
  pointer-events: none;
}

.swiper-pagination-bullet {
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: rgba(117, 110, 98, .28);
  opacity: 1;
  transition: width .2s ease, background .2s ease;
}

.swiper-pagination-bullet-active {
  width: 9px;
  background: var(--gold);
}

.copy-toast {
  position: fixed;
  z-index: 80;
  left: 50%;
  bottom: 28px;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--navy);
  color: white;
  font-size: 13px;
  opacity: 0;
  transform: translateX(-50%) translateY(20px);
  transition: .24s;
  pointer-events: none;
}

.copy-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.manual-copy-panel {
  position: fixed;
  z-index: 80;
  right: 18px;
  bottom: 18px;
  width: min(520px, calc(100vw - 36px));
  padding: 12px;
  border: 1px solid rgba(201, 161, 93, .45);
  border-radius: 14px;
  background: rgba(255, 250, 241, .98);
  box-shadow: 0 18px 48px rgba(31, 36, 56, .18);
}

.manual-copy-panel textarea {
  display: block;
  width: 100%;
  min-height: 180px;
  resize: vertical;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px;
  background: white;
  color: var(--ink);
  font: 13px/1.6 var(--font-sans);
}

.manual-copy-panel button {
  margin-top: 8px;
  height: 34px;
  border: 1px solid rgba(201, 161, 93, .5);
  border-radius: 999px;
  background: #fff3d9;
  color: var(--navy);
  padding: 0 14px;
  cursor: pointer;
}

.fallback-slider .swiper-slide[hidden] {
  display: none;
}

body.all-mode {
  overflow: auto;
}

.all-mode .toolbar {
  position: sticky;
  top: 0;
}

.all-mode .book-shell,
.all-mode .swiper,
.all-mode .swiper-wrapper {
  height: auto;
  overflow: visible;
}

.all-mode .swiper-wrapper {
  display: block;
  transform: none !important;
}

.all-mode .swiper-slide {
  height: auto;
  min-height: calc(100vh - var(--header-h));
  padding: 32px 64px;
  scroll-margin-top: var(--header-h);
  break-after: page;
  transform: none !important;
  opacity: 1 !important;
}

.all-mode .page-turn-layer,
.all-mode .swiper-slide-shadow,
.all-mode .slide-stage::before,
.all-mode .slide-stage::after {
  display: none !important;
}

.all-mode .slide-stage {
  width: var(--stage-w);
  height: var(--stage-h);
  min-height: 0;
}

.all-mode .swiper-button-prev,
.all-mode .swiper-button-next,
.all-mode .swiper-pagination {
  display: none;
}

@media (max-width: 1280px) {
  .toolbar {
    grid-template-columns: minmax(190px, 240px) minmax(0, 1fr) 104px;
    grid-template-areas:
      "brand controls counter";
  }

  .top-nav {
    display: none;
  }
}

@media (max-width: 1120px) {
  .toolbar {
    grid-template-columns: minmax(190px, 260px) 1fr 118px;
    grid-template-areas:
      "brand controls counter";
  }
}

@media (min-width: 901px) and (max-height: 780px) {
  .prompt-slide .prompt-panel {
    gap: 8px;
    padding: 18px 18px 14px;
  }

  .prompt-slide .prompt-head {
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 12px;
  }

  .prompt-slide .prompt-no {
    height: 64px;
    font-size: 24px;
  }

  .prompt-slide .prompt-title h2 {
    margin-block: 4px;
    font-size: clamp(20px, 2vw, 28px);
  }

  .prompt-slide .line-card {
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 10px;
    padding: 8px 10px;
  }

  .prompt-slide .line-card b {
    font-size: 20px;
  }

  .prompt-slide .line-card span {
    font-size: 12px;
    line-height: 1.32;
  }

  .prompt-slide .tags {
    flex-wrap: nowrap;
    gap: 4px;
  }

  .prompt-slide .tags span {
    padding: 4px 6px;
    font-size: 10px;
  }
}

@media (max-width: 900px) {
  body {
    overflow: auto;
  }

  .toolbar {
    position: sticky;
    min-height: 112px;
    grid-template-columns: 1fr;
    grid-template-areas:
      "controls"
      "counter";
    gap: 8px;
    padding: 8px 12px;
  }

  .brand-mini {
    display: none;
  }

  .top-nav {
    display: none;
  }

  .toolbar-controls {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    width: 100%;
    overflow: visible;
  }

  .toolbar select {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  .toolbar input {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  .toolbar button {
    width: 100%;
    padding-inline: 10px;
    font-size: 12px;
  }

  #copyBtn {
    min-width: 0;
  }

  .counter {
    text-align: left;
  }

  .book-shell {
    height: auto;
    padding-top: 0;
  }

  .swiper {
    width: 100% !important;
    height: auto;
    overflow: visible;
  }

  .swiper-wrapper {
    width: 100% !important;
    display: block;
    transform: none !important;
  }

  .swiper-slide {
    scroll-margin-top: 168px;
  }

  .swiper-slide {
    width: 100% !important;
    max-width: 100%;
    height: auto;
    min-height: calc(100vh - 112px);
    padding: 12px;
    overflow: hidden;
    transform: none !important;
    opacity: 1 !important;
  }

  .page-turn-layer,
  .swiper-slide-shadow,
  .swiper-slide::after,
  .slide-stage::before,
  .slide-stage::after {
    display: none !important;
  }

  .slide-stage {
    width: calc(100vw - 24px) !important;
    max-width: 100%;
    min-width: 0;
    height: auto;
    min-height: calc(100vh - 140px);
  }

  .prompt-grid {
    width: 100%;
    grid-template-columns: 1fr;
    gap: 14px;
    min-width: 0;
  }

  .visual-panel {
    min-height: 300px;
  }

  .toc-slide .visual-panel {
    min-height: 0;
    height: min(46vh, 360px);
  }

  .visual-panel,
  .prompt-panel {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  .prompt-panel {
    grid-template-rows: auto repeat(4, auto) auto;
    padding: 18px;
  }

  .toc-slide .prompt-panel {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px;
    overflow: visible;
  }

  .prompt-head {
    grid-template-columns: 62px 1fr;
  }

  .prompt-title h2 {
    font-size: clamp(22px, 6.4vw, 28px);
    line-height: 1.1;
    word-break: keep-all;
  }

  .prompt-no {
    height: 62px;
    font-size: 24px;
  }

  .line-card {
    min-height: auto;
  }

  .line-card span {
    font-size: 14px;
  }

  .toc-slide .line-card {
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 10px;
    padding: 8px 10px;
  }

  .toc-slide .line-card b {
    font-size: 18px;
  }

  .toc-slide .line-card span {
    font-size: 12px;
    line-height: 1.25;
    overflow-wrap: anywhere;
    word-break: normal;
  }

  .toc-slide .toc-rule {
    grid-template-columns: 24px minmax(0, 1fr);
  }

  .toc-slide .toc-rule span {
    font-size: 11px;
    line-height: 1.22;
  }

  .swiper-button-prev,
  .swiper-button-next,
  .swiper-pagination {
    display: none;
  }
}

@page {
  size: landscape;
  margin: 0;
}

@media (prefers-reduced-motion: reduce) {
  .swiper {
    perspective: none;
  }

  .page-turn-layer {
    display: none !important;
  }

  .swiper-wrapper,
  .swiper-slide {
    transition-duration: .01ms !important;
  }

  .swiper-slide {
    transform-origin: center !important;
    will-change: auto;
  }

  .swiper-slide-shadow,
  .swiper-slide::after,
  .slide-stage::before,
  .slide-stage::after {
    display: none !important;
  }
}

@media print {
  html,
  body {
    width: 100%;
    height: auto;
    overflow: visible;
    background: white;
  }

  .toolbar,
  .swiper-button-prev,
  .swiper-button-next,
  .swiper-pagination,
  .copy-toast {
    display: none !important;
  }

  .book-shell,
  .swiper,
  .swiper-wrapper {
    display: block !important;
    height: auto !important;
    padding: 0 !important;
    overflow: visible !important;
    transform: none !important;
  }

  .swiper-slide {
    display: flex !important;
    width: 100vw !important;
    height: 100vh !important;
    padding: 18mm !important;
    break-after: page;
    page-break-after: always;
    transform: none !important;
    opacity: 1 !important;
  }

  .page-turn-layer,
  .swiper-slide-shadow,
  .slide-stage::before,
  .slide-stage::after {
    display: none !important;
  }

  .swiper-slide:last-child {
    break-after: auto;
    page-break-after: auto;
  }

  .slide-stage {
    width: calc(100vw - 36mm) !important;
    height: calc(100vh - 36mm) !important;
    box-shadow: none !important;
  }

  .visual-panel,
  .prompt-panel {
    box-shadow: none !important;
  }
}