/* The publication reader — the modal that opens when you click a published work.
 *
 * Moved out of discover.css (Kim, 2026-08-17) because the home page's community band now opens the
 * SAME reader instead of navigating away. One reader, one stylesheet, loaded by both surfaces. The
 * `.disc-` prefix is kept deliberately: renaming the class names would have meant touching every
 * selector on Discover for no gain, and the names are already unique to this component.
 *
 * Everything here styles content INSIDE `.rk-modal-body`; the panel itself belongs to the shared
 * modal in components.css.
 */

.disc-reader { padding: 4px 4px 8px; }
.disc-reader.is-loading { padding: 64px 0; text-align: center; color: var(--rk-ink-muted); }
.disc-reader-head { margin-block-end: 26px; text-align: center; }

.disc-reader-head h2 {
  margin: 0 0 4px;
  font-family: var(--rk-font-display);
  font-size: 24px;
  line-height: 1.2;
  color: var(--rk-ink);
}

.disc-reader-head p { margin: 0; font-size: 14px; color: var(--rk-ink-soft); }
.disc-reader-meta { margin-block-start: 6px !important; font-size: 12.5px; color: var(--rk-ink-muted) !important; }

/* One spread per row, image over text — the reading rhythm of the book itself. */
.disc-reader-pages { display: flex; flex-direction: column; gap: 26px; max-width: 720px; margin-inline: auto; }
.disc-rpage { margin: 0; }
.disc-rpage img { display: block; width: 100%; border-radius: var(--rk-radius); box-shadow: var(--rk-shadow-object); }

.disc-rpage figcaption {
  margin-block-start: 12px;
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--rk-ink);
  text-align: center;
  white-space: pre-line;
}

.disc-reader-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  max-width: 720px;
  margin: 30px auto 0;
  padding-block-start: 20px;
  border-block-start: 1px solid var(--rk-line);
}

.disc-like {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--rk-line);
  border-radius: 999px;
  background: var(--rk-surface);
  color: var(--rk-ink-soft);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.disc-like svg { width: 14px; height: 14px; stroke-width: 1.6; }
.disc-like:hover { border-color: var(--rk-emerald); color: var(--rk-emerald); }
.disc-like.is-liked { border-color: var(--rk-emerald); background: var(--rk-emerald-soft); color: var(--rk-emerald); }
.disc-like.is-liked svg { fill: currentColor; }
.disc-make { margin-inline-start: auto; }
.disc-like-hint { flex-basis: 100%; font-size: 12.5px; color: var(--rk-ink-muted); }

@media (max-width: 1180px) {
  .disc-reader-head h2 { font-size: 20px; }
  .disc-rpage figcaption { font-size: 15.5px; }
  .disc-make { margin-inline-start: 0; flex: 1 1 auto; justify-content: center; }
}