:root {
  color-scheme: light;
  --bg: #f5f4f0;
  --surface: #ffffff;
  --paper: #fffdfa;
  --reader: #ebe9e3;
  --ink: #111827;
  --muted: #62666f;
  --soft: #8a7f70;
  --line: #d8d1c4;
  --line-strong: #17233d;
  --navy: #061a3b;
  --red: #bd1218;
  --gold: #b9862e;
  --shadow: 0 8px 22px rgba(25, 34, 49, 0.12);
  --masthead-height: 132px;
  font-family:
    "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
}

* {
  box-sizing: border-box;
}

/* Stop mobile browsers from enlarging text on their own (font boosting),
   which pushes the page controls onto a second line. */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

[hidden] {
  display: none !important;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--ink);
}

button,
input {
  font: inherit;
}

button {
  cursor: pointer;
  touch-action: manipulation;
}

a {
  touch-action: manipulation;
}

.app-shell {
  /* A definite height, not just a minimum: with only min-height the shell grows
     to fit a zoomed page and pushes the toolbar off screen. */
  height: 100vh;
  /* dvh excludes the mobile browser toolbar; vh above is the fallback. */
  height: 100dvh;
  display: flex;
  flex-direction: column;
}

.masthead {
  min-height: var(--masthead-height);
  display: grid;
  align-content: center;
  gap: 8px;
  padding: 10px clamp(16px, 4vw, 48px) 12px;
  border-bottom: 3px double var(--line-strong);
  background: var(--surface);
  position: relative;
  z-index: 20;
  box-shadow: none;
}

.issue-panel-toggle {
  position: absolute;
  /* Sits just above the masthead's double rule rather than up in the corner. */
  bottom: 8px;
  left: 14px;
  z-index: 2;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  border: 1px solid var(--navy);
  border-radius: 4px;
  background: #fff;
  color: var(--navy);
  font-size: 0.78rem;
  font-weight: 800;
}

/* The panel toggle and the site links share the masthead's bottom-left corner. */
.masthead-start {
  position: absolute;
  bottom: 8px;
  left: 14px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 14px;
}

.masthead-start .issue-panel-toggle {
  position: static;
  flex: 0 0 auto;
}

.site-links {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

.site-link {
  flex: 0 1 32px;
  min-width: 24px;
  height: 32px;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  color: var(--navy);
  text-decoration: none;
  transition: background 0.16s ease;
}

.site-link:hover,
.site-link:focus-visible {
  background: #e8edf5;
}

.site-link svg {
  width: 20px;
  height: 20px;
  display: block;
}

/* KR / EN: the edition's homepage, written out rather than drawn. */
.site-link-text {
  flex: 0 0 auto;
  height: 24px;
  margin-left: 4px;
  padding: 0 9px;
  border: 1.5px solid var(--red);
  border-radius: 999px;
  /* The homepage's own colour: Manila Seoul Times red. */
  background: var(--red);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.04em;
}

.site-link-text:hover,
.site-link-text:focus-visible {
  border-color: #8f0d12;
  background: #8f0d12;
  color: #fff;
}

.issue-panel-toggle svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

.issue-panel-toggle[aria-expanded="true"] {
  background: var(--navy);
  color: #fff;
}

.language-toggle {
  position: absolute;
  bottom: 8px;
  right: 14px;
  z-index: 2;
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid var(--navy);
  border-radius: 4px;
  background: #fff;
  color: var(--navy);
  font-size: 0.78rem;
  font-weight: 800;
}

.language-toggle:hover {
  background: var(--navy);
  color: #fff;
}

.language-note {
  position: absolute;
  right: 14px;
  bottom: 46px;
  z-index: 3;
  margin: 0;
  max-width: min(320px, 70vw);
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #fffbe8;
  color: var(--ink);
  font-size: 0.78rem;
  box-shadow: var(--shadow);
}

.topline {
  width: min(100%, 1280px);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  color: var(--navy);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

.issue-meta {
  color: var(--red);
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
}

.brand {
  width: min(100%, 1280px);
  margin: 0 auto;
  color: inherit;
  text-decoration: none;
  display: flex;
  justify-content: center;
}

.brand-logo {
  display: block;
  width: clamp(280px, 34vw, 540px);
  max-width: 100%;
  max-height: 86px;
  object-fit: contain;
}

.reader-layout {
  flex: 1;
  display: grid;
  grid-template-columns: 0 minmax(0, 1fr);
  /* Named areas pin the reader to column two. Without them, hiding the panel
     drops it out of the grid and the reader auto-places into the 0px column. */
  grid-template-areas: "panel reader";
  height: calc(100dvh - var(--masthead-height));
  min-height: 0;
  overflow: hidden;
  border-top: 1px solid #fff;
}

.is-issue-panel-open .reader-layout {
  grid-template-columns: minmax(252px, 328px) minmax(0, 1fr);
}

.issue-panel {
  grid-area: panel;
  background: #fbfaf7;
  border-right: 1px solid var(--line);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-height: 0;
  overflow: auto;
}

.cover {
  display: block;
  width: 100%;
  aspect-ratio: 1512 / 2254;
  object-fit: cover;
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: 0 6px 16px rgba(25, 34, 49, 0.12);
}

.issue-copy {
  display: grid;
  gap: 8px;
  padding-top: 2px;
}

.eyebrow {
  margin: 0;
  color: var(--gold);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

h1,
h2,
p {
  margin-top: 0;
}

h1 {
  margin-bottom: 0;
  color: var(--navy);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.55rem;
  line-height: 1.25;
}

.issue-copy p:last-child {
  margin-bottom: 0;
  color: var(--muted);
  line-height: 1.65;
}

.panel-actions,
.issue-navigation,
.toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.issue-navigation {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.archive-panel {
  border: 1px solid var(--line);
  background: #fff;
}

.archive-heading {
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 10px 8px 14px;
  border-bottom: 1px solid var(--line);
  color: var(--navy);
}

.archive-close {
  width: 36px;
  height: 36px;
  border: 0;
  background: transparent;
  color: var(--navy);
  font-size: 1.5rem;
}

.archive-status {
  margin: 0;
  padding: 16px;
  color: var(--muted);
}

.archive-list {
  max-height: 280px;
  margin: 0;
  padding: 0;
  overflow: auto;
  list-style: none;
}

.archive-list a {
  display: grid;
  gap: 3px;
  min-height: 58px;
  padding: 10px 14px;
  border-bottom: 1px solid #ece7de;
  color: var(--navy);
  text-decoration: none;
}

.archive-list a:hover,
.archive-list a[aria-current="page"] {
  background: #f6f3ea;
}

.archive-list a[aria-current="page"] {
  border-left: 4px solid var(--red);
  padding-left: 10px;
}

.archive-list span {
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.35;
}

.soft-button,
.primary-button,
.icon-button {
  min-height: 44px;
  border-radius: 4px;
  font-weight: 800;
  transition:
    background 0.16s ease,
    border-color 0.16s ease,
    color 0.16s ease,
    transform 0.16s ease;
}

.soft-button,
.primary-button {
  border: 1px solid var(--navy);
  background: #fff;
  color: var(--navy);
  padding: 0 16px;
}

.soft-button {
  flex: 1;
  min-width: 118px;
}

.primary-button {
  min-width: 142px;
}

.icon-button {
  width: 44px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--navy);
  font-size: 1.45rem;
  display: inline-grid;
  place-items: center;
}

.soft-button:hover,
.primary-button:hover,
.icon-button:hover {
  background: #f6f3ea;
}

.icon-button:disabled,
.soft-button:disabled,
.primary-button:disabled {
  opacity: 0.46;
  cursor: not-allowed;
  transform: none;
}

.reader-stage {
  grid-area: reader;
  min-width: 0;
  min-height: 0;
  height: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--reader);
}

.reader-ad-grid {
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(96px, 168px) minmax(0, 1fr) minmax(96px, 168px);
  grid-template-areas: "left reader right";
  gap: 10px;
  overflow: hidden;
}

.reader-column {
  grid-area: reader;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.page-stage {
  position: relative;
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: flex;
}

/* Available at every zoom level; mobile immersive mode hides all controls. */
.edge-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 6;
  width: 44px;
  height: 64px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.88);
  color: var(--navy);
  font-size: 1.7rem;
  line-height: 1;
  box-shadow: 0 4px 14px rgba(25, 34, 49, 0.22);
}

.edge-nav-prev {
  left: 10px;
}

.edge-nav-next {
  right: 10px;
}

.edge-nav:disabled {
  opacity: 0.35;
  cursor: default;
}

.page-wrap.is-panning {
  cursor: grab;
}

.page-wrap.is-grabbing {
  cursor: grabbing;
  scroll-behavior: auto;
}

/* Immersive reading gives the page the masthead's height. The toolbar stays on
   desktop — it holds the only controls, and there is no tap to bring it back. */
.is-immersive .masthead {
  display: none;
}

@media (max-width: 900px) {
  .is-immersive .toolbar,
  .is-immersive .edge-nav {
    display: none;
  }
}

.ad-rail {
  min-width: 0;
  margin: 16px 0;
  padding: 7px;
  align-self: stretch;
  background: rgba(255, 255, 255, 0.58);
  border: 1px solid rgba(138, 127, 112, 0.28);
  overflow: hidden;
}

.ad-rail-left {
  grid-area: left;
}

.ad-rail-right {
  grid-area: right;
}

.ad-mobile-slot {
  display: none;
  grid-area: mobile;
}

.ad-label {
  display: block;
  margin-bottom: 5px;
  color: var(--soft);
  font-size: 0.62rem;
  text-align: center;
}

.direct-ad {
  display: block;
  width: 100%;
  height: calc(100% - 18px);
}

.direct-ad img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.responsive-ad-unit {
  display: block;
  width: 100%;
  min-height: 250px;
}

.toolbar {
  flex: 0 0 auto;
  position: relative;
  z-index: 15;
  justify-content: center;
  padding: 11px 14px;
  border-top: 1px solid var(--line);
  background: rgba(251, 250, 247, 0.94);
  backdrop-filter: blur(8px);
  box-shadow: 0 -6px 18px rgba(25, 34, 49, 0.08);
}

.page-jump {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #fbfaf7;
  color: var(--soft);
  font-weight: 800;
}

.page-jump input {
  width: 58px;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: var(--paper);
  color: var(--navy);
  padding: 6px 8px;
  text-align: center;
  font-weight: 900;
}

.toolbar-divider {
  width: 1px;
  height: 32px;
  background: var(--line);
}

.zoom-label {
  min-width: 52px;
  color: var(--muted);
  text-align: center;
  font-weight: 900;
}

.loading-state,
.error-state {
  min-height: 420px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 18px;
  text-align: center;
  padding: 36px;
  color: var(--muted);
}

.spinner {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 3px solid rgba(6, 26, 59, 0.18);
  border-top-color: var(--red);
  animation: spin 0.8s linear infinite;
}

.error-state h2 {
  margin-bottom: 0;
  color: var(--navy);
}

.page-wrap {
  --reader-zoom: 1;
  flex: 1;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 14px;
  position: relative;
  min-height: 0;
  padding: clamp(14px, 2.6vw, 30px);
  overflow: auto;
  perspective: 1800px;
  scroll-behavior: smooth;
}

.page-flip-layer {
  position: absolute;
  left: var(--flip-left, 0);
  top: var(--flip-top, 0);
  width: var(--flip-width, 0);
  height: var(--flip-height, 0);
  z-index: 8;
  display: none;
  pointer-events: none;
  perspective: 1800px;
}

.page-flip-layer.is-active {
  display: block;
}

.page-flip-sheet {
  position: absolute;
  inset: 0;
  border: 1px solid #d7d1c7;
  background: var(--paper);
  box-shadow: 0 12px 28px rgba(25, 34, 49, 0.24);
  transform-style: preserve-3d;
  will-change: transform, filter, clip-path;
}

.page-flip-layer.is-forward .page-flip-sheet {
  transform-origin: left bottom;
  animation: bookFlipForward 0.78s cubic-bezier(0.2, 0.66, 0.18, 1) both;
}

.page-flip-layer.is-backward .page-flip-sheet {
  transform-origin: right bottom;
  animation: bookFlipBackward 0.78s cubic-bezier(0.2, 0.66, 0.18, 1) both;
}

.page-flip-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: var(--paper);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.page-flip-back {
  transform: rotateY(180deg);
}

.page-flip-sheet::before,
.page-flip-sheet::after {
  content: "";
  position: absolute;
  z-index: 2;
  pointer-events: none;
  backface-visibility: hidden;
}

.page-flip-sheet::after {
  inset: 0;
  background: linear-gradient(90deg, rgba(255,255,255,.18), rgba(6,26,59,.2) 50%, rgba(255,255,255,.08));
  opacity: 0.42;
  mix-blend-mode: multiply;
}

.page-flip-sheet::before {
  right: 0;
  bottom: 0;
  width: 38%;
  height: 30%;
  opacity: 0;
  background: linear-gradient(135deg, transparent 18%, rgba(255,255,255,.94) 48%, rgba(92,79,61,.24) 51%, rgba(255,255,255,.12) 68%);
  clip-path: polygon(100% 0, 0 100%, 100% 100%);
  transform-origin: right bottom;
}

.page-flip-layer.is-forward .page-flip-sheet::before {
  animation: pageCornerLift 0.78s ease-out both;
}

.paper-page {
  flex: 0 0 auto;
  width: calc(var(--reader-page-width, 760px) * var(--reader-zoom));
  max-width: none;
  height: auto;
  background: var(--paper);
  border: 1px solid #d7d1c7;
  box-shadow: 0 8px 20px rgba(25, 34, 49, 0.14);
  transform-origin: center center;
  user-select: none;
}

.page-wrap:not(.is-spread) #rightPageImage {
  display: none;
}

/* Auto margins centre the page in leftover space but collapse to zero once it
   is larger than the box, so every edge stays reachable while panning. */
.page-wrap:not(.is-spread) .paper-page {
  margin: auto;
}

.page-wrap.is-spread #leftPageImage {
  margin-left: auto;
}

.page-wrap.is-spread #rightPageImage {
  margin-right: auto;
}

.fallback-frame {
  flex: 1;
  min-height: 78vh;
}

.fallback-frame iframe {
  display: block;
  width: 100%;
  min-height: 78vh;
  border: 0;
  background: #fff;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes bookFlipForward {
  0% { filter: brightness(1); clip-path: polygon(0 0,100% 0,100% 100%,0 100%); transform: translate3d(0,0,0) rotateY(0) rotateZ(0); }
  16% { filter: brightness(1.03) drop-shadow(-4px 8px 7px rgba(25,34,49,.14)); clip-path: polygon(0 0,100% 0,100% 78%,94% 91%,82% 100%,0 100%); transform: translate3d(-2px,-2px,12px) rotateY(-8deg) rotateZ(-.8deg); }
  44% { filter: brightness(.98) drop-shadow(-12px 12px 12px rgba(25,34,49,.22)); clip-path: polygon(0 0,100% 0,100% 94%,96% 100%,0 100%); transform: translate3d(-10px,-10px,30px) rotateY(-72deg) rotateZ(-2.8deg); }
  72% { filter: brightness(.96); clip-path: polygon(0 0,100% 0,100% 100%,0 100%); transform: translate3d(-12px,-5px,22px) rotateY(-132deg) rotateZ(-1.4deg); }
  100% { filter: brightness(.94); clip-path: polygon(0 0,100% 0,100% 100%,0 100%); transform: translate3d(-8px,0,0) rotateY(-179deg) rotateZ(0); }
}

@keyframes bookFlipBackward {
  0% { filter: brightness(1); transform: translate3d(0,0,0) rotateY(0) rotateZ(0); }
  18% { filter: brightness(1.02); transform: translate3d(2px,-2px,12px) rotateY(8deg) rotateZ(.8deg); }
  44% { filter: brightness(.98) drop-shadow(12px 12px 12px rgba(25,34,49,.22)); transform: translate3d(10px,-10px,30px) rotateY(72deg) rotateZ(2.8deg); }
  72% { filter: brightness(.96); transform: translate3d(12px,-5px,22px) rotateY(132deg) rotateZ(1.4deg); }
  100% { filter: brightness(.94); transform: translate3d(8px,0,0) rotateY(179deg) rotateZ(0); }
}

@keyframes pageCornerLift {
  0% { opacity: 0; transform: scale(.08); }
  12% { opacity: .92; transform: scale(.7); }
  34% { opacity: .72; transform: scale(1.18) translate(-8%,-5%); }
  55%, 100% { opacity: 0; transform: scale(1.35) translate(-14%,-8%); }
}

@media (max-width: 900px) {
  .reader-ad-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
    grid-template-areas:
      "reader"
      "mobile";
    gap: 0;
    overflow: auto;
  }

  .ad-rail-left,
  .ad-rail-right {
    display: none !important;
  }

  .ad-mobile-slot {
    display: block;
  }

  .reader-column {
    flex: 1 0 auto;
    min-height: 0;
  }

  .ad-rail {
    flex: 0 0 auto;
    width: min(970px, calc(100% - 20px));
    min-height: 62px;
    max-height: 110px;
    margin: 7px auto;
  }

  .direct-ad {
    height: auto;
  }

  .direct-ad img {
    max-height: 92px;
  }

  .responsive-ad-unit {
    min-height: 62px;
  }
}

@media (max-width: 900px) {
  :root {
    --masthead-height: 48px;
  }

  .masthead {
    padding: 0 10px;
  }

  .issue-panel-toggle {
    top: 50%;
    left: 10px;
    width: 44px;
    height: 38px;
    transform: translateY(-50%);
    padding: 0;
    justify-content: center;
  }

  .issue-panel-toggle span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
  }

  /* On a phone the toggle and links sit centred in the 48px bar, leaving
     room on the right for the language button. */
  .masthead-start {
    top: 50%;
    bottom: auto;
    left: 10px;
    right: 100px;
    gap: 8px;
    transform: translateY(-50%);
  }

  .masthead-start .issue-panel-toggle {
    transform: none;
  }

  .site-links {
    gap: 2px;
  }

  .site-link {
    flex-basis: 30px;
    height: 30px;
  }

  .site-link svg {
    width: 19px;
    height: 19px;
  }

  .site-link-text {
    flex-basis: auto;
    height: 24px;
  }

  /* Reading a page on a phone beats branding it: the bar keeps only the
     panel toggle so the newspaper gets the height back. */
  .topline,
  .brand {
    display: none;
  }

  /* A definite height here is what lets the reader shrink so the bottom ad
     always lands on screen, whatever height the masthead actually renders at. */
  .app-shell {
    height: 100vh;
    height: 100dvh;
  }

  .reader-layout {
    grid-template-columns: 1fr;
    grid-template-areas:
      "panel"
      "reader";
    /* Without explicit rows the spare height is split between both rows, so the
       empty panel row steals space above the newspaper. */
    grid-template-rows: auto minmax(0, 1fr);
    height: auto;
    min-height: 0;
    overflow: hidden;
  }

  .is-issue-panel-open .reader-layout {
    grid-template-columns: 1fr;
  }

  .issue-panel {
    border-right: 0;
    border-bottom: 1px solid var(--line);
    display: grid;
    grid-template-columns: 96px 1fr;
    align-items: center;
    padding: 14px;
    overflow: visible;
  }

  .reader-stage {
    min-height: 0;
    height: auto;
  }

  .cover {
    grid-row: span 2;
  }

  .panel-actions {
    grid-column: 2;
  }

  .issue-navigation {
    grid-column: 1 / -1;
  }

  .archive-panel {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    max-height: min(72vh, 620px);
    border-radius: 14px 14px 0 0;
    box-shadow: 0 -16px 40px rgba(6, 26, 59, 0.2);
    padding-bottom: env(safe-area-inset-bottom);
  }

  .archive-list {
    max-height: calc(min(72vh, 620px) - 54px);
  }

  .toolbar {
    justify-content: center;
    gap: 7px;
    padding: 10px max(10px, env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
  }

  .toolbar-divider {
    display: none;
  }

  .icon-button {
    width: 44px;
    min-height: 44px;
  }

  .page-jump {
    min-height: 44px;
    padding-inline: 8px;
  }

  .page-jump input {
    width: 54px;
  }

  .page-wrap {
    padding: 8px 10px;
    /* Centering a flex item wider than its box makes the left edge
       unreachable while scrolling; auto margins centre it safely. */
    justify-content: flex-start;
  }

  /* Multiply the fitted width instead of capping at it, or the viewport
     clamp swallows every zoom step on a phone. The wrapper scrolls. */
}

@media (max-width: 560px) {
  .issue-panel {
    grid-template-columns: 78px 1fr;
    gap: 12px;
  }

  .issue-copy {
    gap: 4px;
  }

  h1 {
    font-size: 1.18rem;
  }

  .issue-copy p:last-child,
  .eyebrow {
    font-size: 0.78rem;
  }

  .soft-button {
    min-width: 0;
    min-height: 44px;
    padding-inline: 10px;
    font-size: 0.9rem;
  }

  .zoom-label {
    min-width: 44px;
    font-size: 0.86rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

.admin-body {
  background: #f8fafc;
  color: #0f172a;
}

.admin-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.admin-header {
  min-height: 78px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 12px clamp(18px, 4vw, 48px);
  background: #ffffff;
  border-bottom: 1px solid #d7dde7;
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04);
}

.admin-brand {
  display: inline-flex;
  align-items: center;
  min-width: 0;
}

.admin-brand img {
  display: block;
  width: clamp(210px, 25vw, 340px);
  max-height: 54px;
  object-fit: contain;
}

.admin-header-actions,
.admin-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.admin-link-button,
.admin-primary-button,
.admin-secondary-button {
  min-height: 42px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #1e3a5f;
  padding: 0 16px;
  font-weight: 800;
  text-decoration: none;
  transition:
    background 0.18s ease,
    border-color 0.18s ease,
    color 0.18s ease,
    transform 0.18s ease;
}

.admin-link-button,
.admin-secondary-button {
  background: #ffffff;
  color: #1e3a5f;
}

.admin-primary-button {
  background: #1e3a5f;
  color: #ffffff;
}

.admin-link-button:hover,
.admin-secondary-button:hover {
  background: #eef4fb;
}

.admin-primary-button:hover {
  background: #163354;
}

.admin-danger-button {
  min-height: 42px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #b3261e;
  padding: 0 16px;
  font-weight: 800;
  background: #ffffff;
  color: #b3261e;
  cursor: pointer;
  transition:
    background 0.18s ease,
    color 0.18s ease;
}

.admin-danger-button:hover {
  background: #b3261e;
  color: #ffffff;
}

.admin-danger-button:disabled {
  opacity: 0.55;
  cursor: default;
}

.admin-primary-button:disabled,
.admin-secondary-button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.admin-link-button:focus-visible,
.admin-primary-button:focus-visible,
.admin-secondary-button:focus-visible,
.dropzone:focus-visible,
.admin-form input:focus,
.admin-form textarea:focus,
.admin-form select:focus {
  outline: 3px solid rgba(37, 99, 235, 0.28);
  outline-offset: 2px;
}

.admin-main {
  width: min(1160px, calc(100% - 32px));
  margin: 0 auto;
  padding: 34px 0 64px;
  display: grid;
  gap: 22px;
}

.admin-intro {
  display: grid;
  gap: 8px;
  max-width: 760px;
}

.admin-intro h1,
.admin-panel h2,
.publish-result h2 {
  margin: 0;
  color: #0f172a;
  font-family: Georgia, "Times New Roman", serif;
  letter-spacing: 0;
}

.admin-intro h1 {
  font-size: 3rem;
  line-height: 1.05;
}

.admin-intro p,
.admin-muted {
  margin: 0;
  color: #475569;
  line-height: 1.65;
}

.admin-kicker {
  margin: 0;
  color: #b9862e;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.admin-panel {
  background: #ffffff;
  border: 1px solid #d7dde7;
  border-radius: 8px;
  padding: clamp(18px, 2.5vw, 28px);
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.06);
  display: grid;
  gap: 20px;
}

.upload-panel {
  gap: 24px;
}

.upload-heading {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: flex-start;
}

.admin-account {
  margin: 0;
  color: #1e3a5f;
  font-size: 0.88rem;
  font-weight: 800;
}

.admin-form {
  display: grid;
  gap: 16px;
}

.admin-form.compact {
  max-width: 430px;
}

.admin-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.admin-form label {
  display: grid;
  gap: 7px;
  color: #25324a;
  font-weight: 800;
}

.admin-form input,
.admin-form textarea,
.admin-form select {
  width: 100%;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  background: #ffffff;
  color: #0f172a;
  padding: 11px 12px;
  font: inherit;
  line-height: 1.45;
}

.ad-admin-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.ad-editor {
  min-width: 0;
  margin: 0;
  padding: 18px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #f8fafc;
}

.ad-editor legend {
  padding: 0 8px;
  color: #0f172a;
  font-weight: 900;
}

.ad-mode-fields {
  display: grid;
  gap: 14px;
  margin-top: 16px;
}

.admin-file-note {
  margin: -5px 0 0;
  color: #64748b;
  font-size: 0.82rem;
}

.admin-issue-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.admin-issue-list li {
  min-height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 14px;
  border: 1px solid #d7dde7;
  border-radius: 6px;
  background: #fff;
}

.admin-issue-list li div {
  min-width: 0;
  flex: 1 1 auto;
  display: grid;
  gap: 4px;
}

.admin-issue-list .admin-danger-button {
  flex: 0 0 auto;
}

.admin-issue-list li span {
  color: #64748b;
  font-size: 0.84rem;
}

.admin-issue-list .admin-secondary-button {
  flex: 0 0 auto;
}

.admin-form textarea {
  min-height: 150px;
  resize: vertical;
}

.dropzone {
  min-height: 160px;
  place-items: center;
  text-align: center;
  border: 2px dashed #9fb0c7;
  background: #f7f9fc;
  border-radius: 8px;
  padding: 26px;
  transition:
    background 0.18s ease,
    border-color 0.18s ease;
}

.dropzone.is-dragging {
  background: #eaf3ff;
  border-color: #2563eb;
}

.dropzone-title {
  color: #0f172a;
  font-size: 1.1rem;
  font-weight: 900;
}

.dropzone-detail {
  color: #64748b;
  font-size: 0.95rem;
  font-weight: 600;
}

.admin-status {
  min-height: 22px;
  margin: 0;
  color: #bd1218;
  font-weight: 800;
}

.admin-code-row {
  display: grid;
  gap: 8px;
  padding: 14px;
  background: #f8fafc;
  border: 1px solid #d7dde7;
  border-radius: 6px;
}

.admin-code-row span {
  color: #64748b;
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.admin-code-row code {
  color: #0f172a;
  white-space: pre-wrap;
  word-break: break-word;
}

.progress-panel,
.publish-result {
  border: 1px solid #d7dde7;
  border-radius: 8px;
  background: #f8fafc;
  padding: 16px;
  display: grid;
  gap: 14px;
}

.progress-header {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  color: #1e3a5f;
}

.progress-track {
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: #e2e8f0;
}

.progress-track span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: #059669;
  transition: width 0.2s ease;
}

.progress-log {
  margin: 0;
  padding-left: 22px;
  color: #475569;
  line-height: 1.55;
}

.publish-result p {
  margin: 0;
}

#publishedUrl {
  color: #1e3a5f;
  font-weight: 800;
  word-break: break-all;
}

.share-image-fieldset {
  display: grid;
  gap: 0.75rem;
  margin: 0;
  padding: 1rem;
  border: 1px solid rgba(15, 23, 42, 0.16);
  border-radius: 12px;
}

.share-image-fieldset legend {
  padding: 0 0.35rem;
  font-weight: 700;
}

.share-image-picker,
.share-image-remove {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.share-image-preview {
  width: min(100%, 480px);
  max-height: 260px;
  object-fit: contain;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 10px;
  background: #f8fafc;
}

@media (max-width: 720px) {
  .admin-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .admin-header-actions,
  .admin-actions {
    width: 100%;
  }

  .admin-link-button,
  .admin-primary-button,
  .admin-secondary-button {
    flex: 1;
  }

  .admin-main {
    width: min(100% - 24px, 1160px);
    padding-top: 24px;
  }

  .admin-intro h1 {
    font-size: 2.3rem;
  }

  .admin-grid,
  .ad-admin-grid,
  .upload-heading {
    grid-template-columns: 1fr;
    display: grid;
  }

  .admin-issue-list li {
    align-items: stretch;
    flex-direction: column;
  }
}

/* Contract ads keep their order and natural image proportions. */
.ad-rail { min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.ad-stack { display: flex; flex-direction: column; gap: 12px; }
.ad-stack .direct-ad { height: auto; flex: 0 0 auto; }
.ad-stack .direct-ad img { height: auto; max-height: none; }
.ad-language-group { margin: 16px 0; }
.ad-language-group > summary { cursor: pointer; font-weight: 800; padding: 12px 0; }
.ad-creative { min-width: 0; border: 1px solid #cbd5e1; padding: 14px; margin: 12px 0; display: grid; gap: 12px; background: white; }
.ad-creative legend { font-size: .95rem; }
.ad-creative-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.ad-creative button, .ad-add { padding: 8px 12px; cursor: pointer; }
.ad-creative button:disabled, .ad-add:disabled { opacity: .45; cursor: default; }
.ad-preview { width: 100%; max-height: 150px; object-fit: contain; }
.ad-creative[hidden] { display: none; }
.ad-slide-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 8px; }
.ad-slide-tab { min-height: 40px; padding: 8px 12px; border: 1px solid #cbd5e1; border-radius: 6px; background: #fff; color: #334155; font-weight: 700; cursor: pointer; }
.ad-slide-tab[aria-selected="true"] { border-color: #183d67; background: #183d67; color: #fff; }
.ad-slide-tab:disabled { opacity: .45; cursor: default; }
@media (max-width: 900px) {
  /* The document scrolls through the reader, controls, and full ad list.
     Keep the reader itself bounded so zoom never enlarges its layout box. */
  .app-shell { height: auto; min-height: 100dvh; --mobile-top-ad-space: 0px; }
  .app-shell:has(#mobileTopAdBanner:not([hidden])) { --mobile-top-ad-space: calc(100vw / 5); }
  .reader-layout { flex: none; display: block; height: auto; overflow: visible; }
  .reader-stage { height: auto; overflow: visible; }
  .reader-ad-grid { display: flex; flex: none; flex-direction: column; overflow: visible; }
  /* The page gets the height left between the banners and, unless a tap hid
     them, the menu bar and page controls. */
  .reader-column {
    --mobile-header-space: var(--masthead-height);
    --mobile-ad-preview: 0px;
    flex: none;
    height: calc(100dvh - var(--mobile-top-ad-space) - var(--mobile-header-space) - var(--mobile-ad-preview) - 2px);
  }
  .is-immersive .reader-column { --mobile-header-space: 0px; }
  .reader-ad-grid:has(#mobileAdBanner:not([hidden])) .reader-column {
    --mobile-ad-preview: calc(100vw / 5 + env(safe-area-inset-bottom));
  }
  .mobile-ad-top { padding-bottom: 0; }
  .ad-mobile-slot { max-height: none; overflow: visible; overscroll-behavior: auto; }
}

/* Desktop controls stay on the left; the remaining width is the scrubber. */
.page-slider-control { display: none; }
.page-slider-preview { position: absolute; bottom: calc(100% + 12px); transform: translateX(-50%); padding: 6px; border: 1px solid var(--line); border-radius: 4px; background: var(--paper); color: var(--navy); box-shadow: 0 4px 18px #061a3b33; pointer-events: none; text-align: center; font-size: 12px; white-space: nowrap; }
.page-slider-preview-images { display: flex; gap: 3px; margin-bottom: 4px; }
.page-slider-preview-images img { display: block; width: 88px; height: 126px; object-fit: contain; background: #fff; }
@media (min-width: 901px) {
  .ad-rail { margin: 0; padding: 0; border: 0; background: transparent; }
  .ad-rail .ad-stack { gap: 0; }
  .toolbar { justify-content: flex-start; flex-wrap: nowrap; }
  .toolbar > .icon-button, .toolbar > .page-jump, .toolbar > .toolbar-divider,
  .toolbar > .zoom-label { flex-shrink: 0; }
  .page-slider-control { position: relative; display: flex; align-items: center; gap: 12px; flex: 1; min-width: 80px; margin-left: 12px; }
  #pageSlider { appearance: none; -webkit-appearance: none; min-width: 0; width: 100%; height: 44px; margin: 0; cursor: pointer; background: transparent; }
  #pageSlider::-webkit-slider-runnable-track { height: 4px; border-radius: 4px; background: linear-gradient(to right, var(--navy) var(--progress, 0%), var(--line) var(--progress, 0%)); }
  #pageSlider::-moz-range-track { height: 4px; border-radius: 4px; background: var(--line); }
  #pageSlider::-moz-range-progress { height: 4px; background: var(--navy); }
  #pageSlider::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; width: 18px; height: 18px; margin-top: -7px; border-radius: 50%; background: var(--paper); border: 2px solid var(--navy); box-shadow: 0 2px 5px #061a3b26; }
  #pageSlider::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--paper); border: 2px solid var(--navy); }
  #pageSlider:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; border-radius: 4px; }
  #pageSlider:disabled { opacity: .4; cursor: default; }
  #pageSliderOutput { color: var(--muted); font-size: .85rem; white-space: nowrap; min-width: 54px; text-align: right; font-variant-numeric: tabular-nums; }
}
@media (min-width: 901px) and (max-width: 1200px) {
  .toolbar { gap: 6px; padding-inline: 8px; }
  .page-slider-control { gap: 6px; margin-left: 4px; }
  #pageSliderOutput { display: none; }
}

.mobile-ad-banner { display: none; }
.admin-workspace { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: start; width: min(1440px, calc(100% - 32px)); margin: 0 auto; }
.admin-workspace:has(.admin-sidebar:not([hidden])) { grid-template-columns: 190px minmax(0, 1fr); }
.admin-workspace .admin-main { min-width: 0; width: 100%; }
.admin-sidebar { position: sticky; top: 24px; padding: 18px 12px; border: 1px solid #d5deeb; border-radius: 10px; background: #fff; }
.admin-sidebar label { display: grid; gap: 8px; color: #233b58; font-size: 13px; font-weight: 700; }
.admin-sidebar select { width: 100%; padding: 10px; border: 1px solid #cbd5e1; border-radius: 6px; background: #fff; }
.admin-sidebar nav { display: grid; gap: 6px; margin-top: 20px; }
.admin-sidebar button { min-height: 44px; text-align: left; border: 0; border-radius: 6px; padding: 12px; background: transparent; color: #334155; font-weight: 700; cursor: pointer; }
.admin-sidebar :focus-visible { outline: 3px solid #648fbb; outline-offset: 2px; }
.admin-sidebar button[aria-current="page"] { color: white; background: #183d67; }
.admin-sidebar button:disabled { opacity: .5; cursor: wait; }
.admin-workspace .ad-language-group > summary { display: none; }
.admin-workspace .admin-issue-list li { flex-wrap: wrap; }
.analytics-panel { gap: 22px; }
.analytics-heading { display: flex; justify-content: space-between; gap: 24px; align-items: end; }
.analytics-period-label { display: grid; gap: 7px; min-width: 140px; color: #233b58; font-size: 13px; font-weight: 700; }
.analytics-period-label select { padding: 10px; border: 1px solid #cbd5e1; border-radius: 6px; background: #fff; }
.analytics-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 22px; }
.analytics-summary article { display: grid; gap: 6px; padding: 18px; border: 1px solid #dbe4ef; border-radius: 10px; background: #f8fafc; }
.analytics-summary span { color: #52657a; font-size: 13px; font-weight: 700; }
.analytics-summary strong { color: #183d67; font-size: clamp(24px, 3vw, 36px); line-height: 1; }
.analytics-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.analytics-grid > section { min-width: 0; padding: 18px; border: 1px solid #dbe4ef; border-radius: 10px; background: #fff; }
.analytics-grid h3 { margin: 0 0 14px; color: #183d67; }
.analytics-wide { grid-column: 1 / -1; }
.analytics-table-wrap { overflow-x: auto; }
.analytics-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.analytics-table th, .analytics-table td { padding: 10px 8px; border-bottom: 1px solid #e5eaf0; text-align: left; }
.analytics-table th:not(:first-child), .analytics-table td:not(:first-child) { text-align: right; }
.analytics-chart { display: grid; gap: 9px; min-height: 80px; color: #64748b; font-size: 13px; }
.analytics-chart-row { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 8px; align-items: center; }
.analytics-chart-row time { font-variant-numeric: tabular-nums; }
.analytics-bars { display: grid; gap: 3px; }
.analytics-bar { position: relative; display: block; width: var(--analytics-width); min-height: 18px; border-radius: 3px; white-space: nowrap; }
.analytics-bar span { position: absolute; left: 6px; top: 50%; transform: translateY(-50%); color: #fff; font-size: 10px; font-weight: 700; }
.analytics-bar-views { background: #245d91; }
.analytics-bar-clicks { background: #d26835; }
@media (max-width: 760px) {
  .admin-workspace:has(.admin-sidebar:not([hidden])) { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .admin-sidebar { position: static; padding: 12px; }
  .admin-sidebar nav { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; margin-top: 10px; }
  .admin-sidebar button { text-align: center; padding: 10px 2px; font-size: 12px; }
  .analytics-heading { align-items: stretch; flex-direction: column; }
  .analytics-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .analytics-grid { grid-template-columns: minmax(0, 1fr); }
  .analytics-wide { grid-column: auto; }
}
/* Pinch measurements must use the final layout in the same event, including
   when the system reduced-motion rule applies a nonzero transition duration. */
.paper-page { transition: none !important; }
@media (max-width: 900px) {
  /* Touch events own image gestures so the browser does not zoom the UI. */
  .page-wrap { touch-action: none; scroll-behavior: auto; }
  /* One full-width 5:1 banner, the same height the old 3:1 + 2:1 pair used. */
  .mobile-ad-banner { display: block; width: 100%; padding-bottom: env(safe-area-inset-bottom); }
  .mobile-ad-banner .ad-mobile-slot { width: 100%; min-height: 0; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; overflow: visible; --ad-ratio: 5 / 1; }
  .mobile-ad-banner .responsive-ad-unit { aspect-ratio: var(--ad-ratio); min-height: 0; }
}

.ad-slider { position: relative; width: 100%; aspect-ratio: 5 / 1; overflow: hidden; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.ad-slider-track { display: flex; height: 100%; transition: transform 0.45s ease; will-change: transform; }
.ad-slider-track.no-transition { transition: none; }
.ad-slider-track > .direct-ad { flex: 0 0 100%; width: 100%; height: 100%; }
.ad-slider-track > .direct-ad img { width: 100%; height: 100%; max-height: none; object-fit: contain; -webkit-user-drag: none; }
/* PC rails: each slide is a stack of ads, so the slider takes the height of its
   tallest slide and the dots sit below it instead of over an ad. */
.ad-slider.is-stacked { aspect-ratio: auto; }
.ad-slider.is-stacked .ad-slider-track { height: auto; align-items: flex-start; }
.ad-slider.is-stacked .ad-slider-track > .ad-stack { flex: 0 0 100%; width: 100%; min-width: 0; }
.ad-slider.is-stacked .direct-ad img { -webkit-user-drag: none; }
.ad-slider.is-stacked .ad-slider-dots { position: static; justify-content: center; margin-top: 8px; transform: none; }
.ad-slider.is-stacked .ad-slider-dots span { background: #c8d0db; box-shadow: none; }
.ad-slider.is-stacked .ad-slider-dots span.is-active { background: var(--navy); }
.ad-slider-dots { position: absolute; left: 50%; bottom: 4px; display: flex; gap: 5px; transform: translateX(-50%); pointer-events: none; }
.ad-slider-dots span { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, 0.55); box-shadow: 0 0 2px rgba(0, 0, 0, 0.45); transition: background 0.2s; }
.ad-slider-dots span.is-active { background: #fff; }
@media (prefers-reduced-motion: reduce) {
  .ad-slider-track { transition: none; }
}

/* Phone controls stay on one line. At 412px they only just fit, so larger
   text (KakaoTalk's in-app text size, the phone's font size) used to push
   the last button down. Now every piece may shrink a little instead. */
@media (max-width: 900px) {
  .toolbar { flex-wrap: nowrap; gap: 6px; padding-inline: max(8px, env(safe-area-inset-left)); }
  .toolbar > * { flex: 0 1 auto; min-width: 0; }
  .toolbar > .icon-button { flex: 0 1 44px; width: 44px; min-width: 32px; }
  .toolbar > .page-jump { gap: 4px; padding-inline: 6px; white-space: nowrap; }
  .page-jump input { width: 46px; min-width: 32px; padding-inline: 4px; }
  /* The zoom percentage keeps its full width; the buttons give way first. */
  .toolbar > .zoom-label { flex-shrink: 0; min-width: 0; white-space: nowrap; }
}

/* Share menu: used where the phone's own share sheet is not available.
   A small window on a PC, a sheet rising from the bottom on a phone. */
.share-sheet {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(6, 26, 59, 0.45);
}
.share-sheet-card {
  width: min(420px, 100%);
  display: grid;
  gap: 14px;
  padding: 18px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 18px 50px rgba(6, 26, 59, 0.28);
}
.share-sheet-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--navy);
  font-size: 1.05rem;
}
.share-targets {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
  gap: 8px;
}
.share-target {
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 6px 0;
  border-radius: 8px;
  color: var(--ink);
  font-size: 0.8rem;
  font-weight: 700;
  text-decoration: none;
}
.share-target:hover,
.share-target:focus-visible {
  background: #f2f4f8;
}
.share-target-icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--navy);
}
.share-target-icon svg {
  width: 26px;
  height: 26px;
}
.share-copy {
  width: 100%;
}
.share-status {
  min-height: 1.2em;
  margin: 0;
  color: var(--navy);
  font-size: 0.85rem;
  text-align: center;
}
@media (max-width: 900px) {
  .share-sheet {
    align-items: end;
    padding: 0;
  }
  .share-sheet-card {
    width: 100%;
    border-radius: 16px 16px 0 0;
    padding-bottom: calc(18px + env(safe-area-inset-bottom));
  }
}
/* KakaoTalk, QR code and "More" are buttons laid out like the share links. */
button.share-target {
  border: 0;
  background: none;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--ink);
  cursor: pointer;
}
.share-target-label {
  max-width: 100%;
  overflow-wrap: anywhere;
  text-align: center;
}
.share-more {
  padding-top: 10px;
  border-top: 1px solid var(--line);
}
.share-qr {
  display: grid;
  justify-items: center;
  gap: 8px;
  margin: 0;
}
.share-qr img {
  width: 200px;
  height: 200px;
}
.share-qr figcaption {
  color: var(--muted);
  font-size: 0.85rem;
  text-align: center;
}
@media (max-width: 900px) {
  .share-sheet-card {
    max-height: 88dvh;
    overflow-y: auto;
  }
}
/* Phones: a thin page slider under the buttons, with the same page preview
   as on PC while dragging. The buttons stay on one line above it (a grid
   whose button columns may narrow, so larger text never wraps them). */
@media (max-width: 900px) {
  .toolbar {
    display: grid;
    grid-template-columns: minmax(28px, 44px) max-content minmax(28px, 44px) minmax(28px, 44px) max-content minmax(28px, 44px);
    justify-content: center;
    align-items: center;
    column-gap: 6px;
    row-gap: 0;
    padding-top: 8px;
  }
  .toolbar > .icon-button {
    width: 100%;
    min-width: 0;
  }

  .page-slider-control {
    position: relative;
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    min-width: 0;
    padding: 0 4px;
  }
  #pageSlider {
    flex: 1;
    width: 100%;
    min-width: 0;
    height: 30px;
    margin: 0;
    background: transparent;
    cursor: pointer;
    /* Dragging the slider must not scroll the page. */
    touch-action: none;
    appearance: none;
    -webkit-appearance: none;
  }
  #pageSlider::-webkit-slider-runnable-track { height: 4px; border-radius: 4px; background: linear-gradient(to right, var(--navy) var(--progress, 0%), var(--line) var(--progress, 0%)); }
  #pageSlider::-moz-range-track { height: 4px; border-radius: 4px; background: var(--line); }
  #pageSlider::-moz-range-progress { height: 4px; background: var(--navy); }
  #pageSlider::-webkit-slider-thumb { width: 20px; height: 20px; margin-top: -8px; border: 2px solid var(--navy); border-radius: 50%; background: var(--paper); box-shadow: 0 2px 5px #061a3b26; appearance: none; -webkit-appearance: none; }
  #pageSlider::-moz-range-thumb { width: 16px; height: 16px; border: 2px solid var(--navy); border-radius: 50%; background: var(--paper); }
  #pageSlider:disabled { opacity: 0.4; cursor: default; }
  /* The page number is already in the buttons above. */
  #pageSliderOutput { display: none; }
}

/* Small phones: tighter gaps so the button row still fits with large text. */
@media (max-width: 360px) {
  .toolbar {
    column-gap: 3px;
    padding-inline: 6px;
  }
}