:root {
  color-scheme: light;
  --paper: #fbfbfa;
  --paper-deep: #f6f6f2;
  --paper-edge: rgba(20, 20, 20, 0.045);
  --paper-breath: rgba(255, 255, 253, 0.76);
  --ink: #141414;
  --muted: #686862;
  --muted-strong: #4a4a45;
  --hairline: #d9d9d2;
  --hairline-soft: rgba(20, 20, 20, 0.09);
  --wash: #f2f2ee;
  --raised: #fffffd;
  --accent: #151515;
  --accent-soft: #e8e8e2;
  --green: #151515;
  --reader-ink: var(--ink);
  --reader-heading-ink: var(--muted-strong);
  --pressed-ink: rgba(20, 20, 20, 0.78);
  --focus: rgba(21, 21, 21, 0.55);
  --bar-bg: rgba(251, 251, 250, 0.88);
  --veil-bg: rgba(255, 255, 253, 0.84);
  --button-wash: rgba(20, 20, 20, 0.035);
  --shadow: rgba(0, 0, 0, 0.08);
  --chrome-shadow: rgba(0, 0, 0, 0.1);
  --highlight-bg: rgba(21, 21, 21, 0.06);
  --highlight-line: rgba(21, 21, 21, 0.34);
  --paper-glow: rgba(255, 255, 255, 0.76);
  --stage-border: rgba(20, 20, 20, 0.06);
  --stage-line: rgba(20, 20, 20, 0.12);
  --stage-shadow: rgba(12, 12, 12, 0.12);
  --ui-font: "Gyeonggi Batang Open Reader UI", "Gyeonggi Batang UI", "Gyeonggi Batang Open Reader", "Gyeonggi Batang", "경기천년바탕", Batang, serif;
  --body-font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans KR", sans-serif;
  --manuscript-font: "Noto Serif KR", Batang, "AppleMyungjo", serif;
  --reader-font-family: var(--manuscript-font);
  --reader-font-size: 18px;
  --reader-line-height: 1.9;
  --control-font-size: 14px;
  --control-small-font-size: 12px;
  --control-title-font-size: 21px;
  --control-line-height: 1.55;
  --reader-width-base: 660px;
  --reader-inline-padding: 36px;
  --reader-top-padding: 82px;
  --reader-bottom-padding: 132px;
  --reader-content-top-padding: var(--reader-top-padding);
  --reader-content-bottom-padding: var(--reader-bottom-padding);
  --reader-bottom-chrome-reserve: 164px;
  --reader-inner-top-padding: 46px;
  --reader-inner-bottom-padding: 60px;
  --reader-page-tail-reserve: 88px;
  --reader-terminal-bottom-reserve: 70px;
  --reader-terminal-paged-bottom-reserve: 82px;
  --reader-terminal-compact-bottom-reserve: 36px;
  --reader-locked-boundary-bottom-reserve: 96px;
  --reader-locked-boundary-compact-bottom-reserve: 46px;
  --reader-anchor-top-reserve: 112px;
  --reader-anchor-inline-reserve: 64px;
  --reader-effective-content-bottom-padding: max(var(--reader-content-bottom-padding, var(--reader-bottom-padding)), var(--reader-bottom-chrome-reserve, 164px));
  --reader-effective-inner-bottom-padding: max(var(--reader-inner-bottom-padding, 60px), var(--reader-page-tail-reserve, 88px));
  --reader-comfort-top-clearance: 146px;
  --reader-comfort-bottom-clearance: 164px;
  --reader-paged-safe-area-reserve: 0px;
  --reader-width: var(--reader-width-base);
  --reader-topbar-meta-width: 420px;
  --reader-page-gutter: 48px;
  --reader-page-width-active: var(--reader-width-base);
  --reader-page-gutter-active: var(--reader-page-gutter);
  --reader-spread-fold-active: 18px;
  --reader-page-edge-mask: 28px;
  --reader-page-edge-mask-soft: 14px;
  --reader-page-text-inset: 30px;
  --reader-scroll-text-inset: var(--reader-inline-padding);
  --paragraph-gap: 1.05em;
  --reader-measure: 34.5em;
  --reader-measure-active: var(--reader-measure);
  --reader-ko-measure: 32.5em;
  --reader-ko-measure-active: var(--reader-ko-measure);
  --reader-mobile-measure: 29rem;
  --reader-mobile-measure-active: var(--reader-mobile-measure);
  --reader-compact-measure: 27rem;
  --reader-compact-measure-active: var(--reader-compact-measure);
  --reader-paragraph-gap-active: var(--paragraph-gap);
  --reader-page-border: rgba(121, 95, 61, 0.12);
  --reader-page-rule: rgba(121, 95, 61, 0.1);
  --reader-page-sheen: rgba(255, 255, 255, 0.64);
  --reader-page-shadow: rgba(28, 24, 18, 0.1);
  --reader-paragraph-indent: 0em;
  --reader-first-paragraph-indent: 0em;
  --reader-paragraph-gap-adjust: 0em;
  --reader-paragraph-align: start;
  --reader-page-paragraph-align: justify;
  --reader-scene-snap: proximity;
  --reader-page-snap: none;
  --reader-scene-rule: rgba(121, 95, 61, 0.12);
  --reader-spread-column-rule: rgba(121, 95, 61, 0.16);
  --reader-tap-zone-side-inset: 20%;
  --reader-quiet-hint-width: 280px;
  --reader-viewport-width: 100vi;
  --reader-viewport-height: 100dvh;
  --reader-layout-viewport-height: 100dvh;
  --reader-app-height: var(--reader-viewport-height);
  --reader-drawer-height: var(--reader-viewport-height);
  --reader-drawer-reach-padding: max(180px, calc(env(safe-area-inset-bottom) + 144px));
}

html[data-theme="dark"] {
  color-scheme: dark;
  --paper: #0d0d0c;
  --paper-deep: #121210;
  --paper-edge: rgba(245, 244, 239, 0.05);
  --paper-breath: rgba(245, 244, 239, 0.035);
  --ink: #f5f4ef;
  --muted: #aaa79f;
  --muted-strong: #c7c3ba;
  --hairline: #2b2a27;
  --hairline-soft: rgba(245, 244, 239, 0.11);
  --wash: #1d1c1a;
  --raised: #141412;
  --accent: #f5f4ef;
  --accent-soft: #2a2925;
  --green: #d8d5ca;
  --reader-ink: #ded8cb;
  --reader-heading-ink: #bdb7ad;
  --pressed-ink: rgba(245, 244, 239, 0.84);
  --focus: rgba(245, 244, 239, 0.6);
  --bar-bg: rgba(13, 13, 12, 0.88);
  --veil-bg: rgba(18, 18, 16, 0.84);
  --button-wash: rgba(245, 244, 239, 0.06);
  --shadow: rgba(0, 0, 0, 0.46);
  --chrome-shadow: rgba(0, 0, 0, 0.54);
  --highlight-bg: rgba(245, 244, 239, 0.08);
  --highlight-line: rgba(245, 244, 239, 0.42);
  --paper-glow: rgba(245, 244, 239, 0.08);
  --stage-border: rgba(245, 244, 239, 0.08);
  --stage-line: rgba(245, 244, 239, 0.14);
  --stage-shadow: rgba(0, 0, 0, 0.34);
  --reader-page-border: rgba(245, 244, 239, 0.08);
  --reader-page-rule: rgba(245, 244, 239, 0.08);
  --reader-page-sheen: rgba(245, 244, 239, 0.04);
  --reader-page-shadow: rgba(0, 0, 0, 0.26);
  --reader-scene-rule: rgba(245, 244, 239, 0.12);
  --reader-spread-column-rule: rgba(245, 244, 239, 0.14);
}

html[data-reader-tap-layout="mobile"] {
  --reader-tap-zone-side-inset: 32%;
  --reader-quiet-hint-width: 196px;
}

html[data-mobile-viewport-guard="active"] {
  --reader-topbar-meta-width: 252px;
}

html[data-reader-viewport-shape^="compact"] {
  --reader-page-edge-mask: 0px;
  --reader-page-edge-mask-soft: 0px;
  --reader-page-text-inset: 30px;
}

html[data-reader-viewport-shape="compact-landscape"] {
  --reader-page-text-inset: 24px;
}

html[data-reader-device-class^="phone"] {
  --reader-drawer-reach-padding: max(236px, calc(env(safe-area-inset-bottom) + 206px));
}

html[data-reader-device-class="phone-compact"] {
  --reader-inline-padding: 18px;
  --reader-mobile-measure: 27rem;
  --reader-drawer-reach-padding: max(260px, calc(env(safe-area-inset-bottom) + 224px));
}

html[data-reader-device-class^="phone"][data-reader-screen-depth="short"] {
  --reader-top-padding: 34px;
  --reader-bottom-padding: 78px;
  --reader-drawer-reach-padding: max(288px, calc(env(safe-area-inset-bottom) + 246px));
}

html[data-reader-device-class^="phone"][data-reader-screen-depth="tall"] {
  --reader-drawer-reach-padding: max(304px, calc(env(safe-area-inset-bottom) + 248px));
}

html[data-reader-device-class^="phone"][data-reader-viewport-orientation="landscape"] {
  --reader-inline-padding: 28px;
  --reader-top-padding: 30px;
  --reader-bottom-padding: 62px;
  --reader-drawer-reach-padding: max(220px, calc(env(safe-area-inset-bottom) + 180px));
}

@font-face {
  font-family: "Gyeonggi Batang Open Reader UI";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("./fonts/GyeonggiBatang-OpenReader-Bold.woff2?fv=f861eeea8596") format("woff2");
}

@font-face {
  font-family: "Gyeonggi Batang UI";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("./fonts/GyeonggiBatang-Bold.woff2?fv=4e34088d33d7") format("woff2");
}

/* Same 경기천년바탕 Regular outlines, reduced only for transport to the glyphs
   used by the currently public novel/essay chapters and the reader shell. It is
   the first face in the manuscript stack; the complete face below remains the
   exact fallback for later/member/paid text. Source and modification terms:
   경기도, 공공누리 제1유형 — /fonts/LICENSE-GyeonggiBatang-KOGL-Type1.txt
   https://www.gg.go.kr/contents/contents.do?ciIdx=679&menuId=2457 */
@font-face {
  font-family: "Gyeonggi Batang Open Reader";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("./fonts/GyeonggiBatang-OpenReader.woff2?fv=fe00edf26d67") format("woff2");
}

/* House reading face: 경기천년바탕 Regular, self-hosted and <head>-preloaded so the
   public-reading subset above now owns the cold preload. This complete face is
   requested only when a later/member/paid passage needs a glyph outside that subset.
   On a truly cold cache the metric-matched system serif can still flash briefly;
   do not switch to font-display: optional and silently abandon the house face. */
@font-face {
  font-family: "Gyeonggi Batang";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("./fonts/GyeonggiBatang-Regular.woff2?fv=36174cda613c") format("woff2");
}

/* House BODY reading face: 나눔명조 full-syllable subsets, self-hosted (OFL,
   Naver/NHN). The subset is a Modified Version under the OFL, and NanumMyeongjo
   is a Reserved Font Name — so the modified files carry the house family name
   "Youilmui Myeongjo" (internal name records renamed to match; the OFL license
   text ships in fonts/LICENSE-NanumMyeongjo-OFL.txt). A reader's locally
   installed genuine "Nanum Myeongjo" remains the first fallback. The default
   reading profile resolves to this family, so Regular is <head>-preloaded like
   the Gyeonggi face above. */
@font-face {
  font-family: "Youilmui Myeongjo";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("./fonts/NanumMyeongjo-Regular.woff2?fv=9e87fd48a122") format("woff2");
}

@font-face {
  font-family: "Youilmui Myeongjo";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("./fonts/NanumMyeongjo-Bold.woff2?fv=050a93b84fa8") format("woff2");
}

/* Metric-matched local stand-in for the body face above. size-adjust narrows a
   full-width local serif (1.000em/glyph) to Youilmui Myeongjo's 0.9502em hangul
   advance (upm 1024: ascent 819, descent 205, line-gap 256, advance 973), so the
   pre-swap layout breaks lines where the house face will — the late swap of the
   491KB subset then lands without reflowing the chapter. Genuine local
   "Nanum Myeongjo" stays ahead of this in the stacks (identical metrics, no
   adjustment needed). */
@font-face {
  font-family: "Youilmui Myeongjo Fallback";
  src: local("Noto Serif KR"), local("Noto Serif CJK KR"), local("Batang"), local("바탕"), local("AppleMyungjo");
  size-adjust: 95.02%;
  ascent-override: 84.17%;
  descent-override: 21.07%;
  line-gap-override: 26.31%;
}

/* Same metric-matching for the restored DEFAULT body face, 경기천년바탕
   (upm 1000: ascent 929, descent 258, line-gap 90, dominant hangul advance
   910 = 0.910em — the narrower-than-full-width advance the old comment above
   already documented). Pre-swap lines break where Gyeonggi will. */
@font-face {
  font-family: "Gyeonggi Batang Fallback";
  src: local("Noto Serif KR"), local("Noto Serif CJK KR"), local("Batang"), local("바탕"), local("AppleMyungjo");
  size-adjust: 91%;
  ascent-override: 102.09%;
  descent-override: 28.35%;
  line-gap-override: 9.89%;
}

/* 리디바탕: RIDI's long-form e-book face (SIL OFL 1.1, self-hosted subset),
   offered in the reader font list. */
@font-face {
  font-family: "RIDI Batang";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("./fonts/RIDIBatang-Regular.woff2?fv=f9837a95b6c0") format("woff2");
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  min-height: 100%;
  width: 100%;
  overflow-x: hidden;
  scrollbar-width: none;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* Suppress the grey flash Mobile Safari/Chrome paint on every tap; the app's own
     :active/[aria-pressed] tokens carry press feedback, so the native overlay only
     muddies the quiet paper. */
  -webkit-tap-highlight-color: transparent;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
  background: transparent;
}

html {
  background: var(--paper-deep);
}

body {
  margin: 0;
  background:
    radial-gradient(circle at top center, var(--paper-glow), transparent 42%),
    linear-gradient(90deg, var(--paper-edge), transparent 18%, transparent 82%, var(--paper-edge)),
    linear-gradient(180deg, var(--paper-breath), transparent 34%),
    var(--paper);
  color: var(--reader-ink);
  font-family: var(--body-font);
  line-height: 1.5;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Text selection and caret follow the active reading profile so highlighting a
   sentence on the midnight/blackbook paper reads as part of the room, not a raw
   browser-blue intrusion. Both tokens are defined on :root, so every profile has
   a value; dark profiles override to their own accent. */
::selection {
  background-color: var(--accent-soft);
  color: var(--ink);
}
::-moz-selection {
  background-color: var(--accent-soft);
  color: var(--ink);
}
input,
textarea {
  caret-color: var(--ink);
}

button,
input,
textarea,
select {
  font: inherit;
  letter-spacing: 0;
}

button {
  cursor: pointer;
}

button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
.quiet-text-link:focus-visible,
.quiet-author-link:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.reader-app {
  height: 100vh;
  height: 100svh;
  height: 100dvh;
  height: var(--reader-app-height, 100dvh);
  min-height: 100vh;
  min-height: 100svh;
  min-height: 100dvh;
  min-height: var(--reader-app-height, 100dvh);
  background: transparent;
}

.reader-surface {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  --reader-profile-bar-border: var(--stage-border);
  --reader-profile-bar-bg:
    linear-gradient(180deg, var(--paper-glow), transparent),
    var(--bar-bg);
  --reader-profile-bar-shadow:
    0 18px 40px var(--chrome-shadow),
    inset 0 1px 0 var(--paper-glow);
  --reader-profile-secondary-opacity: 0.74;
  --reader-profile-compact-secondary-opacity: 0.68;
  --reader-profile-primary-letterspacing: 0;
  --reader-profile-primary-weight: 700;
  --reader-profile-progress-opacity: 0.18;
  --reader-profile-progress-visible-opacity: 0.92;
  --reader-profile-progress-fill: linear-gradient(90deg, var(--ink), var(--muted-strong));
  --reader-profile-afterglow-border: var(--stage-border);
  --reader-profile-afterglow-background:
    radial-gradient(circle at top center, var(--paper-glow), transparent 56%),
    linear-gradient(180deg, var(--paper-glow), transparent 128%),
    var(--raised);
  --reader-profile-afterglow-shadow:
    0 20px 44px rgba(20, 20, 20, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.58);
  --reader-profile-afterglow-width: min(44ch, 100%);
  --reader-profile-afterglow-detail-width: min(360px, 100%);
  --reader-profile-minimal-rule-left: max(24px, calc(50% - 88px));
  --reader-profile-minimal-rule-right: max(24px, calc(50% - 88px));
  --reader-profile-next-border: rgba(121, 95, 61, 0.26);
  --reader-profile-next-letterspacing: 0;
  --reader-profile-next-font-weight: 600;
  --reader-profile-next-color: var(--reader-heading-ink);
  --reader-profile-compact-topbar-meta-width: 252px;
  --reader-profile-compact-topbar-radius: 14px;
  --reader-profile-chapter-meta-border: var(--stage-border);
  --reader-profile-chapter-meta-background: linear-gradient(180deg, var(--paper-glow), transparent);
  --reader-profile-chapter-meta-shadow: inset 0 1px 0 var(--paper-glow);
  --reader-profile-chapter-meta-radius: 16px;
  --reader-profile-compact-chapter-meta-radius: 14px;
  --reader-profile-trace-chip-background: rgba(115, 93, 60, 0.08);
  --reader-profile-trace-chip-border: rgba(121, 95, 61, 0.12);
  --reader-profile-trace-chip-color: var(--muted-strong);
  --reader-profile-trace-chip-letterspacing: 0.01em;
  --reader-profile-trace-chip-radius: 999px;
  --reader-profile-trace-divider: rgba(121, 95, 61, 0.12);
  /* Trace-mode underline is the only cue that a sentence is pressable, so it
     must clear WCAG 1.4.11 (3:1) against the page. It renders only inside
     .reader-content.is-highlight-mode, never during ordinary reading. */
  --reader-profile-highlight-line: rgba(115, 93, 60, 0.7);
  --reader-profile-highlight-line-active: rgba(115, 93, 60, 0.82);
  --reader-profile-highlight-wash: rgba(115, 93, 60, 0.08);
  --reader-profile-sheet-border: rgba(108, 83, 52, 0.22);
  --reader-profile-sheet-background:
    radial-gradient(circle at top center, rgba(255, 255, 255, 0.74), transparent 52%),
    linear-gradient(180deg, rgba(250, 246, 239, 0.96), rgba(239, 232, 223, 0.96)),
    var(--raised);
  --reader-profile-sheet-shadow:
    0 24px 64px rgba(22, 18, 14, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.62);
  --reader-profile-sheet-rule: linear-gradient(90deg, transparent, rgba(121, 95, 61, 0.24), transparent);
  --reader-profile-quote-border: var(--accent);
  --reader-profile-compact-rail-max-width: 468px;
  --reader-profile-compact-rail-side-gap: 24px;
  --reader-profile-compact-rail-radius: 28px;
  --reader-profile-compact-rail-min-height: 66px;
  --reader-profile-compact-rail-min-height-narrow: 62px;
  --reader-profile-compact-handoff-progress-width: min(144px, calc(100% - 176px));
  --reader-profile-compact-handoff-progress-bottom: calc(8px + env(safe-area-inset-bottom));
  --reader-profile-compact-handoff-progress-opacity: 0.24;
  width: 100%;
  min-width: 0;
  height: 100vh;
  height: 100svh;
  height: 100dvh;
  height: var(--reader-app-height, 100dvh);
  min-height: 100vh;
  min-height: 100svh;
  min-height: 100dvh;
  min-height: var(--reader-app-height, 100dvh);
  max-height: var(--reader-app-height, 100dvh);
  overflow: hidden;
}

.reader-surface::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, var(--paper-edge), transparent 15%, transparent 85%, var(--paper-edge)),
    linear-gradient(180deg, transparent 0%, var(--paper-breath) 48%, transparent 100%);
  opacity: 0.72;
}

/* Dark theme with NO explicit reading profile: the default .reader-surface
   profile tokens above are warm-cream/brown literals that the base color tokens
   (--paper/--raised/--muted) can't reach, so on dark paper the sentence sheet
   painted an opaque cream panel, the chapter-end hairline vanished, and the
   highlight/trace affordances turned near-invisible warm-brown. The dark PROFILES
   (midnight/lantern/blackbook) already re-tune these — plain dark theme did not.
   Mirror midnight's surface tokens for this fallback. :not([data-reading-profile])
   keeps it clear of the tuned profiles regardless of source order. */
html[data-theme="dark"]:not([data-reading-profile]) .reader-surface {
  --reader-profile-trace-chip-background: rgba(161, 174, 213, 0.12);
  --reader-profile-trace-chip-border: rgba(215, 221, 239, 0.16);
  --reader-profile-trace-chip-color: rgba(233, 238, 252, 0.82);
  --reader-profile-trace-divider: rgba(215, 221, 239, 0.12);
  --reader-profile-highlight-line: rgba(176, 190, 230, 0.46);
  --reader-profile-highlight-line-active: rgba(215, 221, 239, 0.62);
  --reader-profile-highlight-wash: rgba(161, 174, 213, 0.1);
  --reader-profile-sheet-border: rgba(215, 221, 239, 0.12);
  --reader-profile-sheet-background:
    radial-gradient(circle at top center, rgba(161, 174, 213, 0.14), transparent 54%),
    linear-gradient(180deg, rgba(22, 24, 33, 0.96), rgba(10, 11, 16, 0.96)),
    rgba(9, 10, 14, 0.94);
  --reader-profile-sheet-shadow:
    0 24px 64px rgba(0, 0, 0, 0.44),
    inset 0 1px 0 rgba(231, 236, 251, 0.05);
  --reader-profile-sheet-rule: linear-gradient(90deg, transparent, rgba(215, 221, 239, 0.22), transparent);
}

html[data-reading-profile="manuscript"] {
  --paper: #fbf8ef;
  --paper-deep: #f3eee3;
  --paper-edge: rgba(91, 69, 39, 0.055);
  --paper-breath: rgba(255, 252, 246, 0.82);
  --veil-bg: rgba(255, 252, 246, 0.9);
  --ink: #282018;
  --reader-ink: #282018;
  --muted: #756a5c;
  --muted-strong: #514638;
  --reader-paragraph-indent: 0.42em;
  --reader-first-paragraph-indent: 0;
  --reader-paragraph-gap-adjust: 0.02em;
  --reader-scene-rule: rgba(137, 106, 64, 0.14);
  --reader-spread-column-rule: rgba(137, 106, 64, 0.16);
}

html[data-reading-profile="manuscript"] .reader-surface {
  --reader-profile-progress-fill: linear-gradient(90deg, rgba(55, 44, 28, 0.84), rgba(123, 99, 69, 0.9));
  --reader-profile-afterglow-width: min(50ch, 100%);
  --reader-profile-compact-topbar-meta-width: 258px;
  --reader-profile-compact-topbar-radius: 16px;
  --reader-profile-chapter-meta-border: rgba(128, 102, 68, 0.18);
  --reader-profile-chapter-meta-background: linear-gradient(180deg, rgba(255, 250, 242, 0.84), rgba(247, 239, 226, 0.58));
  --reader-profile-chapter-meta-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.64);
  --reader-profile-trace-chip-background: rgba(139, 110, 70, 0.08);
  --reader-profile-trace-chip-border: rgba(121, 95, 61, 0.16);
  --reader-profile-sheet-border: rgba(128, 102, 68, 0.2);
  --reader-profile-sheet-rule: linear-gradient(90deg, transparent, rgba(121, 95, 61, 0.28), transparent);
  --reader-profile-compact-rail-max-width: 476px;
  --reader-profile-compact-rail-side-gap: 22px;
  --reader-profile-compact-rail-radius: 30px;
  --reader-profile-compact-handoff-progress-width: min(152px, calc(100% - 172px));
  --reader-profile-compact-handoff-progress-opacity: 0.26;
}

html[data-reading-profile="lantern"] {
  color-scheme: dark;
  --paper: #17120f;
  --paper-deep: #0f0c0a;
  --paper-edge: rgba(255, 195, 123, 0.03);
  --paper-breath: rgba(255, 196, 132, 0.035);
  --veil-bg: rgba(25, 19, 15, 0.92);
  --ink: #eadcc9;
  --reader-ink: #eadcc9;
  --reader-heading-ink: #f4e9d6;
  --muted: #bca991;
  --muted-strong: #d6c4a9;
  --hairline: rgba(245, 228, 198, 0.13);
  --hairline-soft: rgba(245, 228, 198, 0.1);
  --accent: #f0d6ad;
  --accent-soft: rgba(220, 169, 101, 0.16);
  --reader-page-border: rgba(245, 228, 198, 0.1);
  --reader-page-rule: rgba(245, 228, 198, 0.08);
  --reader-page-shadow: rgba(0, 0, 0, 0.42);
  --reader-paragraph-indent: 0;
  --reader-first-paragraph-indent: 0;
  --reader-paragraph-gap-adjust: 0.08em;
  --reader-paragraph-align: start;
  --reader-scene-snap: proximity;
  --reader-scene-rule: rgba(255, 218, 170, 0.16);
  --focus: rgba(234, 220, 201, 0.6);
}

html[data-reading-profile="lantern"] .reader-surface {
  --reader-profile-bar-border: rgba(245, 228, 198, 0.12);
  --reader-profile-bar-bg:
    linear-gradient(180deg, rgba(255, 198, 132, 0.16), transparent 62%),
    rgba(17, 15, 13, 0.88);
  --reader-profile-bar-shadow:
    0 24px 48px rgba(0, 0, 0, 0.42),
    inset 0 1px 0 rgba(255, 247, 231, 0.06);
  --reader-profile-secondary-opacity: 0.58;
  --reader-profile-compact-secondary-opacity: 0.54;
  --reader-profile-primary-letterspacing: 0.04em;
  --reader-profile-progress-opacity: 0.22;
  --reader-profile-progress-visible-opacity: 0.86;
  --reader-profile-progress-fill: linear-gradient(90deg, rgba(255, 225, 181, 0.82), rgba(227, 175, 93, 0.92));
  --reader-profile-afterglow-border: rgba(245, 228, 198, 0.12);
  --reader-profile-afterglow-background:
    radial-gradient(circle at top center, rgba(255, 198, 132, 0.18), transparent 58%),
    linear-gradient(180deg, rgba(255, 248, 236, 0.04), transparent 128%),
    rgba(18, 15, 13, 0.84);
  --reader-profile-afterglow-shadow:
    0 26px 52px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 247, 231, 0.05);
  --reader-profile-afterglow-width: min(36ch, 100%);
  --reader-profile-afterglow-detail-width: min(320px, 100%);
  --reader-profile-next-border: rgba(255, 218, 170, 0.28);
  --reader-profile-next-letterspacing: 0;
  --reader-profile-next-font-weight: 700;
  --reader-profile-next-color: #f2dfc1;
  --reader-profile-compact-topbar-meta-width: 236px;
  --reader-profile-compact-topbar-radius: 18px;
  --reader-profile-chapter-meta-border: rgba(245, 228, 198, 0.12);
  --reader-profile-chapter-meta-background: linear-gradient(180deg, rgba(255, 206, 148, 0.12), rgba(23, 18, 14, 0.72));
  --reader-profile-chapter-meta-shadow: inset 0 1px 0 rgba(255, 247, 231, 0.05);
  --reader-profile-compact-chapter-meta-radius: 16px;
  --reader-profile-trace-chip-background: rgba(255, 208, 150, 0.1);
  --reader-profile-trace-chip-border: rgba(255, 218, 170, 0.18);
  --reader-profile-trace-chip-color: rgba(255, 241, 223, 0.82);
  --reader-profile-trace-chip-letterspacing: 0.04em;
  --reader-profile-trace-divider: rgba(255, 218, 170, 0.14);
  --reader-profile-highlight-line: rgba(255, 208, 150, 0.4);
  --reader-profile-highlight-line-active: rgba(255, 218, 170, 0.58);
  --reader-profile-highlight-wash: rgba(255, 208, 150, 0.1);
  --reader-profile-sheet-border: rgba(245, 228, 198, 0.12);
  --reader-profile-sheet-background:
    radial-gradient(circle at top center, rgba(255, 206, 148, 0.16), transparent 54%),
    linear-gradient(180deg, rgba(39, 28, 21, 0.96), rgba(19, 15, 12, 0.96)),
    rgba(14, 12, 10, 0.92);
  --reader-profile-sheet-shadow:
    0 24px 64px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 247, 231, 0.05);
  --reader-profile-sheet-rule: linear-gradient(90deg, transparent, rgba(255, 218, 170, 0.24), transparent);
  --reader-profile-quote-border: #d8ae73;
  --reader-profile-compact-rail-max-width: 454px;
  --reader-profile-compact-rail-side-gap: 30px;
  --reader-profile-compact-rail-radius: 32px;
  --reader-profile-compact-rail-min-height: 68px;
  --reader-profile-compact-rail-min-height-narrow: 64px;
  --reader-profile-compact-handoff-progress-width: min(128px, calc(100% - 196px));
  --reader-profile-compact-handoff-progress-bottom: calc(10px + env(safe-area-inset-bottom));
  --reader-profile-compact-handoff-progress-opacity: 0.2;
}

html[data-reading-profile="lantern"][data-reader-viewport-shape="compact-landscape"] {
  --reader-scene-snap: proximity;
}

html[data-reading-profile="spread"][data-reader-viewport-shape="compact-landscape"] {
  --reader-page-text-inset: 20px;
}

html[data-reading-profile="midnight"][data-reader-viewport-shape="compact-landscape"] {
  --reader-page-text-inset: 26px;
}

html[data-reading-profile="folio"] {
  --paper: #f7f7f3;
  --paper-deep: #eeeee7;
  --paper-edge: rgba(52, 58, 62, 0.045);
  --paper-breath: rgba(255, 255, 252, 0.8);
  --veil-bg: rgba(255, 255, 252, 0.92);
  --ink: #20201d;
  --reader-ink: #20201d;
  --muted: #696a63;
  --muted-strong: #494a44;
  --reader-paragraph-indent: 0.72em;
  --reader-first-paragraph-indent: 0;
  --reader-paragraph-gap-adjust: -0.02em;
  --reader-page-paragraph-align: justify;
  --reader-page-snap: none;
  --reader-scene-rule: rgba(126, 103, 71, 0.12);
  --reader-spread-column-rule: rgba(126, 103, 71, 0.14);
}

html[data-reading-profile="folio"] .reader-surface {
  --reader-profile-bar-bg:
    linear-gradient(180deg, rgba(146, 109, 58, 0.08), transparent 64%),
    rgba(250, 247, 240, 0.92);
  --reader-profile-secondary-opacity: 0.68;
  --reader-profile-primary-letterspacing: 0.06em;
  --reader-profile-progress-fill: linear-gradient(90deg, rgba(76, 60, 34, 0.84), rgba(126, 95, 53, 0.9));
  --reader-profile-afterglow-background:
    radial-gradient(circle at top center, rgba(190, 166, 120, 0.12), transparent 58%),
    linear-gradient(180deg, rgba(255, 252, 244, 0.88), transparent 132%),
    rgba(251, 248, 241, 0.96);
  --reader-profile-afterglow-width: min(42ch, 100%);
  --reader-profile-afterglow-detail-width: min(390px, 100%);
  --reader-profile-next-letterspacing: 0;
  --reader-profile-next-border: rgba(126, 103, 71, 0.26);
  --reader-profile-next-font-weight: 650;
  --reader-profile-compact-topbar-meta-width: 244px;
  --reader-profile-compact-topbar-radius: 15px;
  --reader-profile-chapter-meta-border: rgba(139, 108, 66, 0.16);
  --reader-profile-chapter-meta-background: linear-gradient(180deg, rgba(255, 252, 246, 0.92), rgba(245, 241, 233, 0.8));
  --reader-profile-chapter-meta-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.62);
  --reader-profile-trace-chip-background: rgba(108, 93, 68, 0.08);
  --reader-profile-trace-chip-border: rgba(128, 103, 71, 0.14);
  --reader-profile-trace-chip-letterspacing: 0.03em;
  --reader-profile-highlight-line: rgba(128, 103, 71, 0.7);
  --reader-profile-highlight-line-active: rgba(128, 103, 71, 0.82);
  --reader-profile-highlight-wash: rgba(128, 103, 71, 0.08);
  --reader-profile-sheet-border: rgba(139, 108, 66, 0.16);
  --reader-profile-sheet-rule: linear-gradient(90deg, transparent, rgba(139, 108, 66, 0.22), transparent);
  --reader-profile-quote-border: rgba(126, 95, 53, 0.82);
  --reader-profile-compact-rail-max-width: 462px;
  --reader-profile-compact-rail-side-gap: 26px;
  --reader-profile-compact-rail-radius: 30px;
  --reader-profile-compact-rail-min-height: 64px;
  --reader-profile-compact-rail-min-height-narrow: 60px;
  --reader-profile-compact-handoff-progress-width: min(138px, calc(100% - 186px));
  --reader-profile-compact-handoff-progress-opacity: 0.22;
}

html[data-reading-profile="spread"] {
  --paper: #f8f5ed;
  --paper-deep: #eee7dc;
  --paper-edge: rgba(116, 97, 70, 0.058);
  --paper-breath: rgba(255, 252, 244, 0.74);
  --veil-bg: rgba(255, 252, 245, 0.88);
  --ink: #2c281f;
  --reader-ink: #2c281f;
  --muted: #746b5d;
  --muted-strong: #514a3f;
  --reader-paragraph-indent: 0.56em;
  --reader-first-paragraph-indent: 0;
  --reader-paragraph-gap-adjust: 0.04em;
  --reader-page-snap: none;
  --reader-scene-rule: rgba(145, 125, 96, 0.14);
  --reader-spread-column-rule: rgba(145, 125, 96, 0.2);
}

html[data-reading-profile="spread"] .reader-surface {
  --reader-profile-bar-bg:
    linear-gradient(90deg, rgba(255, 255, 255, 0.22), transparent 18%, transparent 82%, rgba(255, 255, 255, 0.22)),
    linear-gradient(180deg, rgba(173, 156, 132, 0.08), transparent 68%),
    rgba(248, 246, 241, 0.88);
  --reader-profile-secondary-opacity: 0.62;
  --reader-profile-progress-fill: linear-gradient(90deg, rgba(78, 68, 52, 0.82), rgba(148, 124, 94, 0.88));
  --reader-profile-afterglow-width: min(50ch, 100%);
  --reader-profile-afterglow-detail-width: min(430px, 100%);
  --reader-profile-minimal-rule-left: max(24px, calc(50% - 112px));
  --reader-profile-minimal-rule-right: max(24px, calc(50% - 112px));
  --reader-profile-next-letterspacing: 0;
  --reader-profile-next-border: rgba(145, 125, 96, 0.26);
  --reader-profile-compact-topbar-meta-width: 266px;
  --reader-profile-compact-topbar-radius: 13px;
  --reader-profile-chapter-meta-border: rgba(155, 137, 106, 0.16);
  --reader-profile-chapter-meta-background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.35), transparent 18%, transparent 82%, rgba(255, 255, 255, 0.35)),
    linear-gradient(180deg, rgba(173, 156, 132, 0.08), rgba(248, 246, 241, 0.76));
  --reader-profile-chapter-meta-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.58);
  --reader-profile-compact-chapter-meta-radius: 12px;
  --reader-profile-trace-chip-background: rgba(145, 125, 96, 0.08);
  --reader-profile-trace-chip-border: rgba(145, 125, 96, 0.14);
  --reader-profile-trace-chip-letterspacing: 0.02em;
  --reader-profile-highlight-line: rgba(145, 125, 96, 0.7);
  --reader-profile-highlight-line-active: rgba(145, 125, 96, 0.82);
  --reader-profile-highlight-wash: rgba(145, 125, 96, 0.08);
  --reader-profile-sheet-border: rgba(155, 137, 106, 0.16);
  --reader-profile-sheet-rule: linear-gradient(90deg, transparent, rgba(155, 137, 106, 0.22), transparent);
  --reader-profile-quote-border: rgba(148, 124, 94, 0.84);
  --reader-profile-compact-rail-max-width: 484px;
  --reader-profile-compact-rail-side-gap: 18px;
  --reader-profile-compact-rail-radius: 24px;
  --reader-profile-compact-rail-min-height: 67px;
  --reader-profile-compact-rail-min-height-narrow: 63px;
  --reader-profile-compact-handoff-progress-width: min(162px, calc(100% - 168px));
  --reader-profile-compact-handoff-progress-opacity: 0.25;
}

html[data-reading-profile="margin"] {
  --paper: #f4f7ef;
  --paper-deep: #e9efe1;
  --paper-edge: rgba(79, 99, 68, 0.05);
  --paper-breath: rgba(253, 255, 248, 0.78);
  --veil-bg: rgba(253, 255, 248, 0.92);
  --ink: #293127;
  --reader-ink: #293127;
  --muted: #647059;
  --muted-strong: #46533f;
  --hairline: rgba(121, 132, 104, 0.18);
  --hairline-soft: rgba(121, 132, 104, 0.12);
  --reader-paragraph-indent: 0;
  --reader-first-paragraph-indent: 0;
  --reader-paragraph-gap-adjust: 0.16em;
  --reader-paragraph-align: start;
  --reader-scene-rule: rgba(121, 132, 104, 0.12);
  --reader-spread-column-rule: rgba(121, 132, 104, 0.16);
}

html[data-reading-profile="margin"] .reader-surface {
  --reader-profile-bar-bg:
    linear-gradient(180deg, rgba(255, 255, 255, 0.68), transparent 72%),
    rgba(250, 250, 247, 0.86);
  --reader-profile-bar-shadow:
    0 14px 28px rgba(20, 20, 20, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
  --reader-profile-secondary-opacity: 0.52;
  --reader-profile-compact-secondary-opacity: 0.48;
  --reader-profile-progress-opacity: 0.12;
  --reader-profile-progress-visible-opacity: 0.76;
  --reader-profile-progress-fill: linear-gradient(90deg, rgba(92, 92, 86, 0.62), rgba(146, 145, 134, 0.74));
  --reader-profile-afterglow-width: min(32ch, 100%);
  --reader-profile-afterglow-detail-width: min(300px, 100%);
  --reader-profile-next-letterspacing: 0;
  --reader-profile-next-border: rgba(121, 132, 104, 0.26);
  --reader-profile-compact-topbar-meta-width: 224px;
  --reader-profile-compact-topbar-radius: 18px;
  --reader-profile-chapter-meta-border: rgba(121, 126, 104, 0.14);
  --reader-profile-chapter-meta-background: linear-gradient(180deg, rgba(255, 255, 255, 0.76), rgba(244, 247, 239, 0.86));
  --reader-profile-chapter-meta-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.76);
  --reader-profile-compact-chapter-meta-radius: 18px;
  --reader-profile-trace-chip-background: rgba(121, 132, 104, 0.08);
  --reader-profile-trace-chip-border: rgba(121, 132, 104, 0.12);
  --reader-profile-trace-chip-color: rgba(83, 85, 77, 0.88);
  --reader-profile-highlight-line: rgba(121, 132, 104, 0.7);
  --reader-profile-highlight-line-active: rgba(121, 132, 104, 0.82);
  --reader-profile-highlight-wash: rgba(121, 132, 104, 0.08);
  --reader-profile-sheet-border: rgba(121, 126, 104, 0.14);
  --reader-profile-sheet-rule: linear-gradient(90deg, transparent, rgba(121, 132, 104, 0.18), transparent);
  --reader-profile-quote-border: rgba(121, 132, 104, 0.7);
  --reader-profile-compact-rail-max-width: 438px;
  --reader-profile-compact-rail-side-gap: 36px;
  --reader-profile-compact-rail-radius: 34px;
  --reader-profile-compact-rail-min-height: 60px;
  --reader-profile-compact-rail-min-height-narrow: 58px;
  --reader-profile-compact-handoff-progress-width: min(116px, calc(100% - 210px));
  --reader-profile-compact-handoff-progress-bottom: calc(7px + env(safe-area-inset-bottom));
  --reader-profile-compact-handoff-progress-opacity: 0.18;
}

html[data-reading-profile="midnight"] {
  color-scheme: dark;
  --paper: #0f1118;
  --paper-deep: #090a0f;
  --paper-edge: rgba(215, 221, 239, 0.026);
  --paper-breath: rgba(161, 174, 213, 0.035);
  --veil-bg: rgba(15, 17, 24, 0.94);
  --ink: #dfe5f4;
  --reader-ink: #dfe5f4;
  --reader-heading-ink: #ecf0fb;
  --muted: #9ca6bd;
  --muted-strong: #c2cadc;
  --hairline: rgba(215, 221, 239, 0.13);
  --hairline-soft: rgba(215, 221, 239, 0.1);
  --accent: #dfe8ff;
  --accent-soft: rgba(161, 174, 213, 0.16);
  --reader-page-border: rgba(215, 221, 239, 0.1);
  --reader-page-rule: rgba(215, 221, 239, 0.08);
  --reader-page-shadow: rgba(0, 0, 0, 0.42);
  --reader-paragraph-indent: 0.46em;
  --reader-first-paragraph-indent: 0;
  --reader-paragraph-gap-adjust: 0.03em;
  --reader-page-snap: none;
  --reader-scene-rule: rgba(215, 221, 239, 0.14);
  --reader-spread-column-rule: rgba(215, 221, 239, 0.16);
  --focus: rgba(223, 229, 244, 0.6);
}

html[data-reading-profile="midnight"] .reader-surface {
  --reader-profile-bar-border: rgba(215, 221, 239, 0.1);
  --reader-profile-bar-bg:
    linear-gradient(180deg, rgba(122, 128, 150, 0.1), transparent 60%),
    rgba(12, 13, 16, 0.92);
  --reader-profile-bar-shadow:
    0 22px 46px rgba(0, 0, 0, 0.44),
    inset 0 1px 0 rgba(231, 236, 251, 0.05);
  --reader-profile-secondary-opacity: 0.62;
  --reader-profile-compact-secondary-opacity: 0.58;
  --reader-profile-primary-letterspacing: 0.08em;
  --reader-profile-progress-opacity: 0.2;
  --reader-profile-progress-visible-opacity: 0.82;
  --reader-profile-progress-fill: linear-gradient(90deg, rgba(223, 232, 255, 0.78), rgba(154, 170, 212, 0.92));
  --reader-profile-afterglow-border: rgba(215, 221, 239, 0.1);
  --reader-profile-afterglow-background:
    radial-gradient(circle at top center, rgba(150, 160, 188, 0.12), transparent 58%),
    linear-gradient(180deg, rgba(236, 240, 255, 0.03), transparent 132%),
    rgba(13, 14, 18, 0.92);
  --reader-profile-afterglow-shadow:
    0 24px 48px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(231, 236, 251, 0.04);
  --reader-profile-afterglow-width: min(38ch, 100%);
  --reader-profile-afterglow-detail-width: min(320px, 100%);
  --reader-profile-next-border: rgba(215, 221, 239, 0.22);
  --reader-profile-next-letterspacing: 0;
  --reader-profile-next-color: #d7deef;
  --reader-profile-compact-topbar-meta-width: 238px;
  --reader-profile-compact-topbar-radius: 18px;
  --reader-profile-chapter-meta-border: rgba(215, 221, 239, 0.12);
  --reader-profile-chapter-meta-background: linear-gradient(180deg, rgba(132, 141, 168, 0.08), rgba(15, 16, 21, 0.84));
  --reader-profile-chapter-meta-shadow: inset 0 1px 0 rgba(231, 236, 251, 0.05);
  --reader-profile-compact-chapter-meta-radius: 16px;
  --reader-profile-trace-chip-background: rgba(161, 174, 213, 0.12);
  --reader-profile-trace-chip-border: rgba(215, 221, 239, 0.16);
  --reader-profile-trace-chip-color: rgba(233, 238, 252, 0.82);
  --reader-profile-trace-chip-letterspacing: 0.04em;
  --reader-profile-trace-divider: rgba(215, 221, 239, 0.12);
  --reader-profile-highlight-line: rgba(176, 190, 230, 0.46);
  --reader-profile-highlight-line-active: rgba(215, 221, 239, 0.62);
  --reader-profile-highlight-wash: rgba(161, 174, 213, 0.1);
  --reader-profile-sheet-border: rgba(215, 221, 239, 0.12);
  --reader-profile-sheet-background:
    radial-gradient(circle at top center, rgba(161, 174, 213, 0.14), transparent 54%),
    linear-gradient(180deg, rgba(22, 24, 33, 0.96), rgba(10, 11, 16, 0.96)),
    rgba(9, 10, 14, 0.94);
  --reader-profile-sheet-shadow:
    0 24px 64px rgba(0, 0, 0, 0.44),
    inset 0 1px 0 rgba(231, 236, 251, 0.05);
  --reader-profile-sheet-rule: linear-gradient(90deg, transparent, rgba(215, 221, 239, 0.22), transparent);
  --reader-profile-quote-border: rgba(176, 190, 230, 0.76);
  --reader-profile-compact-rail-max-width: 452px;
  --reader-profile-compact-rail-side-gap: 28px;
  --reader-profile-compact-rail-radius: 30px;
  --reader-profile-compact-rail-min-height: 68px;
  --reader-profile-compact-rail-min-height-narrow: 64px;
  --reader-profile-compact-handoff-progress-width: min(132px, calc(100% - 188px));
  --reader-profile-compact-handoff-progress-bottom: calc(9px + env(safe-area-inset-bottom));
  --reader-profile-compact-handoff-progress-opacity: 0.22;
}

html[data-reading-profile="blackbook"] {
  color-scheme: dark;
  --paper: #000;
  --paper-deep: #000;
  --paper-edge: rgba(255, 255, 255, 0);
  --paper-breath: rgba(255, 255, 255, 0);
  --paper-glow: rgba(255, 255, 255, 0);
  --veil-bg: #000;
  --raised: #050505;
  --wash: #080808;
  --ink: #f6f6f0;
  --reader-ink: #f2f2ec;
  --reader-heading-ink: #e8e8df;
  --muted: #a2a29a;
  --muted-strong: #d2d2ca;
  --hairline: rgba(255, 255, 255, 0.16);
  --hairline-soft: rgba(255, 255, 255, 0.09);
  --accent: #f6f6f0;
  --accent-soft: rgba(255, 255, 255, 0.12);
  --focus: rgba(255, 255, 255, 0.6);
  --bar-bg: rgba(0, 0, 0, 0.86);
  --button-wash: rgba(255, 255, 255, 0.07);
  --shadow: rgba(0, 0, 0, 0.72);
  --chrome-shadow: rgba(0, 0, 0, 0.72);
  --highlight-bg: rgba(255, 255, 255, 0.09);
  --highlight-line: rgba(255, 255, 255, 0.48);
  --stage-border: rgba(255, 255, 255, 0.1);
  --stage-line: rgba(255, 255, 255, 0.14);
  --reader-page-border: rgba(255, 255, 255, 0.1);
  --reader-page-rule: rgba(255, 255, 255, 0.08);
  --reader-page-sheen: rgba(255, 255, 255, 0);
  --reader-page-shadow: rgba(0, 0, 0, 0.78);
  --reader-page-edge-mask: 16px;
  --reader-page-edge-mask-soft: 0px;
  --reader-page-text-inset: 34px;
  --reader-paragraph-indent: 0.38em;
  --reader-first-paragraph-indent: 0;
  --reader-paragraph-gap-adjust: 0.04em;
  --reader-page-paragraph-align: start;
  --reader-page-snap: none;
  --reader-scene-rule: rgba(255, 255, 255, 0.12);
  --reader-spread-column-rule: rgba(255, 255, 255, 0.14);
}

html[data-reading-profile="blackbook"] body {
  background: #000;
}

html[data-reading-profile="blackbook"][data-reader-viewport-shape^="compact"] {
  --reader-page-text-inset: 20px;
}

html[data-reading-profile="blackbook"][data-reader-viewport-shape="compact-landscape"] {
  --reader-page-text-inset: 20px;
}

html[data-reading-profile="blackbook"] .reader-surface {
  --reader-profile-bar-border: rgba(255, 255, 255, 0.1);
  --reader-profile-bar-bg: rgba(0, 0, 0, 0.86);
  --reader-profile-bar-shadow:
    0 18px 44px rgba(0, 0, 0, 0.64),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  --reader-profile-secondary-opacity: 0.58;
  --reader-profile-compact-secondary-opacity: 0.52;
  --reader-profile-primary-letterspacing: 0;
  --reader-profile-primary-weight: 700;
  --reader-profile-progress-opacity: 0.18;
  --reader-profile-progress-visible-opacity: 0.76;
  --reader-profile-progress-fill: linear-gradient(90deg, rgba(255, 255, 255, 0.72), rgba(184, 184, 176, 0.92));
  --reader-profile-afterglow-border: rgba(255, 255, 255, 0.1);
  --reader-profile-afterglow-background: #050505;
  --reader-profile-afterglow-shadow:
    0 22px 52px rgba(0, 0, 0, 0.52),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  --reader-profile-afterglow-width: min(40ch, 100%);
  --reader-profile-afterglow-detail-width: min(340px, 100%);
  --reader-profile-next-border: rgba(255, 255, 255, 0.2);
  --reader-profile-next-letterspacing: 0;
  --reader-profile-next-color: #f2f2ec;
  --reader-profile-compact-topbar-meta-width: 246px;
  --reader-profile-compact-topbar-radius: 12px;
  --reader-profile-chapter-meta-border: rgba(255, 255, 255, 0.09);
  --reader-profile-chapter-meta-background: rgba(0, 0, 0, 0.76);
  --reader-profile-chapter-meta-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  --reader-profile-compact-chapter-meta-radius: 12px;
  --reader-profile-trace-chip-background: rgba(255, 255, 255, 0.08);
  --reader-profile-trace-chip-border: rgba(255, 255, 255, 0.12);
  --reader-profile-trace-chip-color: rgba(242, 242, 236, 0.78);
  --reader-profile-highlight-line: rgba(255, 255, 255, 0.36);
  --reader-profile-highlight-line-active: rgba(255, 255, 255, 0.52);
  --reader-profile-highlight-wash: rgba(255, 255, 255, 0.08);
  --reader-profile-sheet-border: rgba(255, 255, 255, 0.1);
  --reader-profile-sheet-background: #050505;
  --reader-profile-sheet-rule: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  --reader-profile-quote-border: rgba(255, 255, 255, 0.72);
  --reader-profile-compact-rail-max-width: 462px;
  --reader-profile-compact-rail-side-gap: 26px;
  --reader-profile-compact-rail-radius: 18px;
  --reader-profile-compact-rail-min-height: 66px;
  --reader-profile-compact-rail-min-height-narrow: 62px;
  --reader-profile-compact-handoff-progress-width: min(136px, calc(100% - 184px));
  --reader-profile-compact-handoff-progress-bottom: calc(8px + env(safe-area-inset-bottom));
  --reader-profile-compact-handoff-progress-opacity: 0.2;
}

html[data-reading-profile="blackbook"] .reader-surface::before {
  background: none;
  opacity: 0;
}

html[data-reading-profile="blackbook"] .reader-content {
  color: var(--reader-ink);
  background: #000;
  font-weight: 500;
  letter-spacing: 0;
}

html[data-reading-profile="lantern"] .reader-content,
html[data-reading-profile="midnight"] .reader-content,
html[data-theme="dark"] .reader-content {
  font-weight: 500;
}

html[data-reading-profile="blackbook"] .reader-content.is-page-mode .reader-content-inner {
  background: #000;
}

html[data-reading-profile="blackbook"] .reader-content h1,
html[data-reading-profile="blackbook"] .reader-content p {
  color: var(--reader-ink);
}

html[data-reading-profile="blackbook"] .reader-content h1 .reader-chapter-kicker,
html[data-reading-profile="blackbook"] .reader-content h1 .reader-chapter-subtitle {
  color: var(--muted);
}

html[data-reading-profile="blackbook"] .reader-content[data-content-locale="ko"] p:not([data-reading-lang]),
html[data-reading-profile="blackbook"] .reader-content[data-content-locale="ko"] p:not([data-reading-lang]) .sentence,
html[data-reading-profile="blackbook"] .reader-content p[lang="ko"],
html[data-reading-profile="blackbook"] .reader-content p[lang="ko"] .sentence {
  line-break: loose;
  word-break: keep-all;
}

.reader-bar {
  position: relative;
  z-index: 6;
  display: grid;
  align-items: center;
  width: min(1180px, calc(100% - 28px));
  min-width: 0;
  max-width: 100%;
  min-height: 64px;
  border: 1px solid var(--reader-profile-bar-border);
  background: var(--reader-profile-bar-bg);
  color: var(--muted);
  font-family: var(--ui-font);
  font-weight: 700;
  box-shadow: var(--reader-profile-bar-shadow);
  backdrop-filter: blur(18px) saturate(112%);
  -webkit-backdrop-filter: blur(18px) saturate(112%);
  transition: opacity 180ms ease, transform 180ms ease;
}

.reader-topbar {
  grid-template-columns: minmax(0, 1fr) minmax(0, var(--reader-topbar-meta-width)) minmax(0, 1fr);
  gap: 10px;
  justify-self: center;
  margin: max(8px, calc(env(safe-area-inset-top) * 0.45)) 14px 0;
  border-radius: 22px;
  padding: 14px 20px;
}

.reader-topbar .plain-button {
  min-height: 40px;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  border-radius: 12px;
  padding-left: 12px;
  padding-right: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.reader-topbar-actions {
  display: flex;
  justify-content: flex-end;
  justify-self: end;
  gap: 6px;
  min-width: 0;
  max-width: 100%;
}

.chapter-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  justify-self: center;
  align-items: center;
  justify-content: center;
  gap: 2px 8px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  padding: 10px 16px;
  border: 1px solid var(--reader-profile-chapter-meta-border);
  border-radius: var(--reader-profile-chapter-meta-radius);
  background: var(--reader-profile-chapter-meta-background);
  box-shadow: var(--reader-profile-chapter-meta-shadow);
}

.reader-bottombar {
  grid-template-columns: minmax(64px, 1fr) repeat(3, minmax(56px, 0.74fr)) minmax(64px, 1fr);
  gap: 6px;
  width: min(760px, calc(100% - 34px));
  justify-self: center;
  min-height: 58px;
  margin: 0 16px max(12px, calc(env(safe-area-inset-bottom) * 0.35 + 10px));
  border-radius: 999px;
  padding: 10px 14px;
}

.reader-bottombar .plain-button {
  min-height: 38px;
  padding: 5px 10px;
  border-radius: 999px;
  color: var(--muted);
  font-size: var(--control-small-font-size);
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.35;
  overflow-wrap: normal;
}

.reader-bottombar [data-action="previous"],
.reader-bottombar [data-action="next"] {
  color: var(--reader-heading-ink);
  font-weight: var(--reader-profile-primary-weight);
  letter-spacing: var(--reader-profile-primary-letterspacing);
}

.reader-bottombar[data-reader-handoff-stage="near"] [data-action="next"],
.reader-bottombar[data-reader-handoff-stage="approach"] [data-action="next"] {
  border-color: color-mix(in srgb, var(--accent) 28%, transparent);
  background: color-mix(in srgb, var(--button-wash) 72%, var(--accent-soft) 28%);
}

.reader-bottombar[data-reader-handoff-stage="approach"] [data-action="next"] {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 18%, transparent);
}

.reader-bottombar [data-action="contents"],
.reader-bottombar [data-action="settings"],
.reader-bottombar [data-action="highlight"] {
  /* The quiet hierarchy comes from the --muted label color vs the primary's
     near-black ink (13.6:1). The extra opacity multiply pushed --muted from
     ~5.3:1 down to ~3.2:1 — below WCAG AA 4.5:1 — on the persistent reader nav.
     Drop the multiply and let --muted (still clearly lighter than primary) carry
     the dim at an AA-legible contrast. */
  opacity: 1;
}

/* (hover opacity rule removed: the secondary labels now rest at opacity 1 for
   WCAG AA contrast, so the hover lift had nothing left to do) */

/* Specificity note: the previous form of this rule was
   `.reader-bottombar [data-action="highlight"][aria-pressed="true"]`, which a
   later `.reader-bottombar .plain-button` rule outranked — so the on-state
   carried no colour change at all and the toggle looked identical on and off.
   Matching the class here restores the intended cue and adds a shape mark, so
   the state does not rest on colour alone. */
.reader-bottombar .plain-button[data-action="highlight"][aria-pressed="true"] {
  position: relative;
  background: var(--button-wash);
  color: var(--ink);
  opacity: 1;
}

/* The state mark lives on a pseudo-element on purpose. box-shadow and color on
   the button itself are both reachable by other rules in this stylesheet, and
   the on-state had been losing that fight silently. Nothing else styles this
   pseudo-element, and currentColor keeps the mark at the label's own contrast
   (>= 7.9:1 on every profile), so the state never rests on colour alone. */
.reader-bottombar .plain-button[data-action="highlight"][aria-pressed="true"]::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 5px;
  width: 16px;
  height: 2px;
  transform: translateX(-50%);
  border-radius: 1px;
  background: currentColor;
}

html[data-mobile-viewport-guard="active"][data-reading-mode="scene"] .reader-bottombar:not(.is-content-next-handoff),
html[data-mobile-viewport-guard="active"][data-reading-mode="spread"] .reader-bottombar:not(.is-content-next-handoff) {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 3px 6px;
  width: min(var(--reader-profile-compact-rail-max-width), calc(100% - var(--reader-profile-compact-rail-side-gap)));
  min-height: var(--reader-profile-compact-rail-min-height);
  border-radius: var(--reader-profile-compact-rail-radius);
}

html[data-mobile-viewport-guard="active"][data-reading-mode="scene"] .reader-bottombar:not(.is-content-next-handoff) [data-action="contents"],
html[data-mobile-viewport-guard="active"][data-reading-mode="scene"] .reader-bottombar:not(.is-content-next-handoff) [data-action="settings"],
html[data-mobile-viewport-guard="active"][data-reading-mode="scene"] .reader-bottombar:not(.is-content-next-handoff) [data-action="highlight"],
html[data-mobile-viewport-guard="active"][data-reading-mode="spread"] .reader-bottombar:not(.is-content-next-handoff) [data-action="contents"],
html[data-mobile-viewport-guard="active"][data-reading-mode="spread"] .reader-bottombar:not(.is-content-next-handoff) [data-action="settings"],
html[data-mobile-viewport-guard="active"][data-reading-mode="spread"] .reader-bottombar:not(.is-content-next-handoff) [data-action="highlight"] {
  align-self: end;
  /* 44px touch guideline. The default scroll-mode bars already sit at 44px on
     phones; only these scene/spread rail buttons had shrunk to 32px, and they
     are the same three destinations a thumb reaches for mid-read. */
  min-height: 44px;
  padding: 2px 5px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0;
  /* Same AA fix as the base secondary labels: the compact opacity multiply (0.48–0.68)
     dropped these 10px scene/spread labels well under 4.5:1. Let --muted carry the dim. */
  opacity: 1;
}

html[data-mobile-viewport-guard="active"][data-reading-mode="scene"] .reader-bottombar:not(.is-content-next-handoff) [data-action="contents"],
html[data-mobile-viewport-guard="active"][data-reading-mode="spread"] .reader-bottombar:not(.is-content-next-handoff) [data-action="contents"] {
  grid-column: 2;
  grid-row: 1;
}

html[data-mobile-viewport-guard="active"][data-reading-mode="scene"] .reader-bottombar:not(.is-content-next-handoff) [data-action="settings"],
html[data-mobile-viewport-guard="active"][data-reading-mode="spread"] .reader-bottombar:not(.is-content-next-handoff) [data-action="settings"] {
  grid-column: 3;
  grid-row: 1;
}

html[data-mobile-viewport-guard="active"][data-reading-mode="scene"] .reader-bottombar:not(.is-content-next-handoff) [data-action="highlight"],
html[data-mobile-viewport-guard="active"][data-reading-mode="spread"] .reader-bottombar:not(.is-content-next-handoff) [data-action="highlight"] {
  grid-column: 4;
  grid-row: 1;
}

html[data-mobile-viewport-guard="active"][data-reading-mode="scene"] .reader-bottombar:not(.is-content-next-handoff) [data-action="previous"],
html[data-mobile-viewport-guard="active"][data-reading-mode="scene"] .reader-bottombar:not(.is-content-next-handoff) [data-action="next"],
html[data-mobile-viewport-guard="active"][data-reading-mode="spread"] .reader-bottombar:not(.is-content-next-handoff) [data-action="previous"],
html[data-mobile-viewport-guard="active"][data-reading-mode="spread"] .reader-bottombar:not(.is-content-next-handoff) [data-action="next"] {
  min-height: 34px;
  padding-left: 8px;
  padding-right: 8px;
}

html[data-mobile-viewport-guard="active"][data-reading-mode="scene"] .reader-bottombar:not(.is-content-next-handoff) [data-action="previous"],
html[data-mobile-viewport-guard="active"][data-reading-mode="spread"] .reader-bottombar:not(.is-content-next-handoff) [data-action="previous"] {
  grid-column: 1 / span 2;
  grid-row: 2;
}

html[data-mobile-viewport-guard="active"][data-reading-mode="scene"] .reader-bottombar:not(.is-content-next-handoff) [data-action="next"],
html[data-mobile-viewport-guard="active"][data-reading-mode="spread"] .reader-bottombar:not(.is-content-next-handoff) [data-action="next"] {
  grid-column: 4 / span 2;
  grid-row: 2;
}

.reading-progress {
  position: absolute;
  left: 50%;
  bottom: calc(12px + env(safe-area-inset-bottom));
  z-index: 7;
  width: min(420px, calc(100% - 96px));
  height: 4px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: var(--button-wash);
  box-shadow: inset 0 0 0 1px var(--stage-border);
  opacity: var(--reader-profile-progress-opacity);
  overflow: hidden;
  pointer-events: none;
  transition: opacity 180ms ease;
}

.reader-surface.is-chrome-visible .reading-progress {
  opacity: var(--reader-profile-progress-visible-opacity);
}

.reader-surface:not(.is-chrome-visible) .reading-progress {
  opacity: 0;
  transition-duration: 0ms;
}

.reading-progress:not(.has-started) {
  opacity: 0;
}

.reading-progress span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: var(--reader-profile-progress-fill);
  box-shadow: 0 0 18px rgba(20, 20, 20, 0.16);
  transition: width 140ms ease;
}

.reader-surface:not(.is-chrome-visible) .reader-bar {
  opacity: 0;
  pointer-events: none;
}

.reader-surface:not(.is-chrome-visible) .reader-topbar {
  transform: translateY(-12px);
}

.reader-surface:not(.is-chrome-visible) .reader-bottombar {
  transform: translateY(12px);
}

.chapter-label {
  grid-column: 1 / -1;
  justify-self: center;
  max-width: 100%;
  margin: 0;
  overflow: hidden;
  color: var(--muted-strong);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chapter-context-label,
.bookmark-status-label {
  margin: 0;
  overflow: hidden;
  min-width: 0;
  max-width: 100%;
  color: var(--muted);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.35;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bookmark-status-label {
  border-left: 1px solid var(--hairline-soft);
  padding-left: 8px;
  color: var(--muted-strong);
  font-size: 10px;
  opacity: 0.82;
}

.bookmark-status-label:empty {
  display: none;
}

.plain-button,
.solid-button,
.quiet-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--ink);
  font-family: var(--ui-font);
  font-size: var(--control-font-size);
  font-weight: 700;
  line-height: var(--control-line-height);
  padding: 8px 10px;
  text-decoration: none;
  overflow-wrap: anywhere;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease, opacity 160ms ease, box-shadow 160ms ease;
}

.plain-button {
  color: var(--muted);
}

/* Hover states are gated behind (hover: hover): on touch, tapping latches CSS
   :hover until the next tap elsewhere, so an ungated hover reads as a stuck
   "still selected" wash after every tap. Pointer devices keep the full hover;
   touch gets the :active press beat below instead. */
@media (hover: hover) {
  .plain-button:hover {
    border-color: transparent;
    background: var(--button-wash);
    color: var(--ink);
  }
}

/* Momentary press feedback the tap-highlight comment (~line 228) promises but
   which never existed as a selector: with the native tap flash suppressed and
   hover useless on touch, a tap otherwise fired no within-frame response. A
   subtle scale gives every momentary control a press beat; the reduced-motion
   block zeroes its transition so it snaps instantly for those users. */
.plain-button:active,
.solid-button:active,
.quiet-button:active,
.chapter-afterglow-next:active {
  transform: scale(0.97);
}

#accountButton {
  position: relative;
}

#accountButton.has-unread-dot::after {
  content: "";
  position: absolute;
  top: 11px;
  right: 11px;
  width: 4px;
  height: 4px;
  border-radius: 8px;
  background: currentColor;
  opacity: 0.36;
}

.solid-button {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--paper);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 10px 24px rgba(0, 0, 0, 0.08);
}

@media (hover: hover) {
  .solid-button:hover {
    background: var(--pressed-ink);
  }
}

.solid-button:disabled,
.solid-button[aria-disabled="true"] {
  cursor: default;
  border-color: var(--hairline);
  background: transparent;
  color: var(--muted);
  box-shadow: none;
  opacity: 0.72;
}

.solid-button[data-author-publish-gate-target="resave-needed"],
.quiet-button[data-author-publish-gate-target="resave-needed"] {
  outline: 2px solid color-mix(in srgb, var(--ink) 34%, transparent);
  outline-offset: 2px;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--paper) 22%, transparent), 0 0 0 2px color-mix(in srgb, var(--accent-soft) 82%, transparent);
}

.quiet-button {
  border-color: var(--hairline-soft);
  background: linear-gradient(180deg, transparent, var(--button-wash));
}

@media (hover: hover) {
  .quiet-button:hover {
    border-color: var(--hairline);
    background: var(--button-wash);
  }
}

.full-width-button {
  width: 100%;
}

.reader-content {
  position: relative;
  z-index: 2;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  scroll-padding-top: max(var(--reader-content-top-padding, var(--reader-top-padding)), var(--reader-anchor-top-reserve, 112px));
  scroll-padding-bottom: var(--reader-effective-content-bottom-padding);
  padding-top: max(var(--reader-content-top-padding, var(--reader-top-padding)), calc(env(safe-area-inset-top) + 28px));
  padding-right: max(var(--reader-scroll-text-inset, var(--reader-inline-padding)), env(safe-area-inset-right));
  padding-bottom: max(var(--reader-effective-content-bottom-padding), calc(env(safe-area-inset-bottom) + 24px));
  padding-left: max(var(--reader-scroll-text-inset, var(--reader-inline-padding)), env(safe-area-inset-left));
  color: var(--ink);
  font-family: var(--reader-font-family, var(--manuscript-font));
  font-size: var(--reader-font-size);
  line-height: var(--reader-line-height);
  overflow-wrap: break-word;
  overscroll-behavior: contain;
  scrollbar-gutter: auto;
  -webkit-overflow-scrolling: touch;
  font-kerning: normal;
  font-feature-settings: "kern";
  text-rendering: optimizeLegibility;
  text-spacing-trim: space-first;
  scrollbar-width: none;
  -webkit-user-select: none;
  user-select: none;
  touch-action: pan-y;
}

/* The scroll region is focused programmatically after entry and can remain the
   active element after a center tap. Suppress the browser's full-canvas default
   ring for that pointer/programmatic path, while preserving a deliberate inset
   cue when actions.js records real keyboard navigation. */
.reader-content:focus {
  outline: none;
}

.reader-content[data-reader-keyboard-focus="active"]:focus {
  outline: 2px solid var(--focus);
  outline-offset: -2px;
}

.reader-content::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
  background: transparent;
}

.reader-content::-webkit-scrollbar-thumb,
.reader-content::-webkit-scrollbar-track {
  background: transparent;
}

.reader-content,
.sentence-sheet,
.sentence-sheet *,
.drawer:not(.drawer-author-room) .highlight-summary,
.drawer:not(.drawer-author-room) .ranking-list,
.drawer:not(.drawer-author-room) .reader-sentence-trace-receipt,
.drawer:not(.drawer-author-room) .reader-support-temperature-receipt,
.drawer:not(.drawer-author-room) .support-primary {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

input,
textarea,
select,
[contenteditable="true"] {
  -webkit-user-select: text;
  user-select: text;
}

@media print {
  #readerSurface,
  #readerContent,
  #sentenceSheet,
  #drawer:not(.drawer-author-room) {
    display: none !important;
    visibility: hidden !important;
  }

  html[data-reader-print-guard="active"] body::before,
  body::before {
    content: "";
    display: block;
    min-height: 100vh;
    background: var(--paper);
  }
}

.reader-content-inner {
  position: relative;
  width: min(100%, calc(var(--reader-width) + 72px));
  max-width: 100%;
  min-width: 0;
  margin: 0 auto;
  padding: var(--reader-inner-top-padding, 46px) 32px var(--reader-effective-inner-bottom-padding);
  border: 1px solid var(--reader-page-border);
  border-radius: 20px;
  background:
    linear-gradient(180deg, var(--reader-page-sheen), transparent 36%),
    radial-gradient(circle at top center, var(--paper-glow), transparent 42%),
    linear-gradient(135deg, var(--paper-breath), transparent 30%),
    var(--veil-bg);
  box-shadow: 0 14px 42px var(--reader-page-shadow), inset 0 1px 0 var(--reader-page-sheen);
}

.reader-content-inner::before {
  content: "";
  position: absolute;
  inset: 18px;
  border: 1px solid var(--reader-page-rule);
  border-radius: 18px;
  opacity: 0.46;
  pointer-events: none;
}

.reader-boot-placeholder,
.reader-static-fallback {
  min-height: min(620px, calc(100dvh - 180px));
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 18px;
}

.reader-boot-placeholder > *,
.reader-static-fallback > * {
  position: relative;
  z-index: 1;
}

.reader-boot-placeholder-eyebrow,
.reader-static-fallback-eyebrow {
  margin: 0;
  color: var(--muted);
  font-family: var(--control-font);
  font-size: var(--control-small-font-size);
  letter-spacing: 0;
}

.reader-boot-placeholder-line {
  max-width: 34em;
  margin: 0;
  color: var(--ink);
  font-family: var(--ui-font);
  font-size: var(--control-title-font-size);
  line-height: 1.5;
}

.reader-boot-placeholder-rhythm {
  display: grid;
  gap: 12px;
  width: min(100%, var(--reader-measure-active, var(--reader-measure)));
  margin: 4px 0 0;
}

.reader-boot-placeholder-rhythm span {
  display: block;
  height: 1px;
  background: color-mix(in srgb, var(--ink) 18%, transparent);
}

.reader-boot-placeholder-rhythm span:nth-child(2) {
  width: 82%;
}

.reader-boot-placeholder-rhythm span:nth-child(3) {
  width: 56%;
}

.reader-static-fallback p {
  max-width: 34em;
  margin: 0;
}

.reader-static-fallback-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  max-width: 36em;
  font-family: var(--control-font);
  font-size: var(--control-small-font-size);
  line-height: 1.6;
}

.reader-static-fallback-links a {
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 4px;
  word-break: break-all;
}

.reader-static-fallback-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  max-width: 36em;
}

.reader-static-fallback-actions .plain-button,
.reader-static-fallback-actions .solid-button {
  min-height: 42px;
  white-space: normal;
  line-height: 1.45;
}

.reader-content-inner > h1,
.reader-content-inner > p,
.reader-content-inner > section {
  position: relative;
  z-index: 1;
  width: min(100%, var(--reader-width));
  margin-left: auto;
  margin-right: auto;
  scroll-margin-top: var(--reader-anchor-top-reserve, 112px);
  scroll-margin-inline: var(--reader-anchor-inline-reserve, 64px);
}

.reader-content-inner > p:not(.reader-notice) {
  width: min(100%, var(--reader-measure-active, var(--reader-measure)));
  /* Long-form prose: let the browser optimize the last lines so a paragraph
     never ends on a lone orphan word and the ragged edge reads evenly. Titles
     use text-wrap: balance (short, equalized); body prose wants pretty.
     Progressive enhancement — degrades to normal wrapping where unsupported,
     and composes with word-break: keep-all for Hangul. */
  text-wrap: pretty;
  /* Per-face tracking compensation set by the reading rail (JS): 나눔명조's
     default spacing runs loose/uneven for body prose (KCI 2015; 다음 -0.02em,
     리디북스 -0.03em converge on gentle negative tracking), so the rail sets
     -0.02em for that face and 0 for the rest. em so it scales with font size. */
  letter-spacing: var(--reader-body-letter-spacing, 0);
  /* Honor the author's intra-paragraph line breaks. The real manuscript uses
     deliberate enjambment (21 paragraphs carry \n — verse-like beats in
     c15/c50, list lines in c69) that default whitespace collapsing silently
     flattened into run-on prose. pre-line preserves those breaks while still
     collapsing ordinary spaces; wrapping (keep-all + text-wrap) is unaffected. */
  white-space: pre-line;
}

.reader-content[data-content-locale="ko"] .reader-content-inner > p:not(.reader-notice) {
  width: min(100%, var(--reader-ko-measure-active, var(--reader-ko-measure, 32.5em)));
}

html[data-reader-viewport-shape^="compact"] .reader-content[data-content-locale="ko"] .reader-content-inner > p:not(.reader-notice) {
  width: min(var(--reader-mobile-measure-active, var(--reader-mobile-measure)), 100%);
  max-width: 100%;
}

.reader-content h1 {
  position: relative;
  display: grid;
  gap: 10px;
  width: min(38ch, 100%);
  margin: 0 auto 2.15rem;
  padding-bottom: 0.9rem;
  color: var(--ink);
  font-family: var(--ui-font);
  font-size: 1.03em;
  font-weight: 700;
  line-height: 1.44;
  text-align: center;
  text-wrap: balance;
}

.reader-content h1 .reader-chapter-kicker {
  display: inline-flex;
  justify-self: center;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font-size: 0.58em;
  font-weight: 700;
  letter-spacing: 0;
}

.reader-content h1 .reader-chapter-kicker::before,
.reader-content h1 .reader-chapter-kicker::after {
  content: "";
  width: 18px;
  height: 1px;
  background: var(--hairline);
}

.reader-content h1 .reader-chapter-heading-label {
  display: block;
  color: var(--ink);
  font-size: 1.13em;
}

.reader-content h1 .reader-chapter-subtitle {
  display: block;
  color: var(--muted-strong);
  font-size: 0.68em;
  font-weight: 600;
  line-height: 1.65;
}

.reader-content h1::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: min(60px, 40%);
  height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, var(--hairline), transparent);
}

.reader-content-inner[data-reader-first-view-posture="body-first"] {
  /* first-paragraph-arrival-density-guard: keep the current first prose lines in proof, not in guesswork. */
  padding-top: clamp(24px, 4.3svh, 34px);
}

html[data-reader-viewport-shape="compact-narrow-short"] .reader-content-inner[data-reader-first-view-posture="body-first"] {
  /* opening-body-breath=asset-1018-compact-first-line */
  padding-top: clamp(4px, 1.4svh, 8px);
}

html[data-reader-viewport-shape="compact-narrow-short"][data-reading-mode="page"] .reader-content,
html[data-reader-viewport-shape="compact-narrow-short"][data-reading-mode="spread"] .reader-content {
  /* opening-body-breath=asset-1018-compact-first-line */
  line-height: 1.75;
}

html[data-reader-viewport-shape="compact-narrow-short"][data-reading-mode="page"] .reader-content.is-page-mode h1,
html[data-reader-viewport-shape="compact-narrow-short"][data-reading-mode="spread"] .reader-content.is-spread-mode h1 {
  gap: 0;
  margin-bottom: 0.18rem;
  padding-bottom: 0.08rem;
  font-size: 0.78em;
  line-height: 1.18;
}

html[data-reader-viewport-shape="compact-narrow-short"][data-reading-mode="page"] .reader-content.is-page-mode h1 .reader-chapter-subtitle,
html[data-reader-viewport-shape="compact-narrow-short"][data-reading-mode="spread"] .reader-content.is-spread-mode h1 .reader-chapter-subtitle {
  display: none;
}

html[data-reader-viewport-shape="compact-narrow-short"][data-reading-mode="page"] .reader-content.is-page-mode h1::after,
html[data-reader-viewport-shape="compact-narrow-short"][data-reading-mode="spread"] .reader-content.is-spread-mode h1::after {
  opacity: 0.24;
}

html[data-reader-viewport-shape="compact-narrow-short"][data-reading-mode="page"] .reader-content-inner > p:not(.reader-notice),
html[data-reader-viewport-shape="compact-narrow-short"][data-reading-mode="spread"] .reader-content-inner > p:not(.reader-notice) {
  /* 0.85 aligned with the ≤720 paged rules: the JS page signature already
     reduces --paragraph-gap, and the old 0.68 CSS multiplier stacked a second
     reduction to ~0.37 line-heights — below the 0.45 comfort floor. One gentle
     multiplier keeps paged density without crowding paragraphs toward merging. */
  margin-bottom: calc((var(--reader-paragraph-gap-active, var(--paragraph-gap)) * 0.85) + var(--reader-paragraph-gap-adjust, 0em));
}

.reader-content-inner[data-reader-first-view-posture="body-first"] > .reader-chapter-heading {
  margin-bottom: 1.34rem;
  padding-bottom: 0.54rem;
}

html[data-reader-viewport-shape="compact-narrow-short"] .reader-content-inner[data-reader-first-view-posture="body-first"] > .reader-chapter-heading {
  margin-bottom: 0.78rem;
  padding-bottom: 0.34rem;
}

.reader-content-inner[data-reader-first-view-posture="body-first"] .reader-chapter-kicker {
  opacity: 0.64;
}

.reader-content-inner[data-reader-first-view-posture="body-first"] > .reader-chapter-heading[data-reader-title-breath="asset-1018-first-title-breath"] {
  /* reader-title-breath=asset-1018-first-screen-low-title */
  gap: 4px;
  margin-bottom: 1.04rem;
  padding-bottom: 0.36rem;
  color: var(--reader-heading-ink);
  font-weight: 650;
}

.reader-content-inner[data-reader-first-view-posture="body-first"] > .reader-chapter-heading[data-reader-title-breath="asset-1018-first-title-breath"] .reader-chapter-kicker {
  opacity: 0.5;
  font-size: 0.5em;
}

.reader-content-inner[data-reader-first-view-posture="body-first"] > .reader-chapter-heading[data-reader-title-breath="asset-1018-first-title-breath"] .reader-chapter-kicker::before,
.reader-content-inner[data-reader-first-view-posture="body-first"] > .reader-chapter-heading[data-reader-title-breath="asset-1018-first-title-breath"] .reader-chapter-kicker::after {
  width: 0;
  opacity: 0;
}

.reader-content-inner[data-reader-first-view-posture="body-first"] > .reader-chapter-heading[data-reader-title-breath="asset-1018-first-title-breath"] .reader-chapter-heading-label {
  color: var(--reader-heading-ink);
  font-size: 0.96em;
  font-weight: 650;
}

.reader-content-inner[data-reader-first-view-posture="body-first"] > .reader-chapter-heading[data-reader-title-breath="asset-1018-first-title-breath"]::after {
  width: min(34px, 28%);
  opacity: 0.34;
}

html[data-reader-viewport-shape^="compact"] .reader-content-inner[data-reader-first-view-posture="body-first"] > .reader-chapter-heading[data-reader-title-breath="asset-1018-first-title-breath"],
html[data-mobile-viewport-guard="active"] .reader-content-inner[data-reader-first-view-posture="body-first"] > .reader-chapter-heading[data-reader-title-breath="asset-1018-first-title-breath"] {
  gap: 3px;
  margin-bottom: 0.58rem;
  padding-bottom: 0.24rem;
}

html[data-reader-viewport-shape^="compact"] .reader-content-inner[data-reader-first-view-posture="body-first"] > .reader-chapter-heading[data-reader-title-breath="asset-1018-first-title-breath"] .reader-chapter-kicker,
html[data-mobile-viewport-guard="active"] .reader-content-inner[data-reader-first-view-posture="body-first"] > .reader-chapter-heading[data-reader-title-breath="asset-1018-first-title-breath"] .reader-chapter-kicker {
  opacity: 0.44;
  font-size: 0.47em;
}

html[data-reader-viewport-shape^="compact"] .reader-content-inner[data-reader-first-view-posture="body-first"] > .reader-chapter-heading[data-reader-title-breath="asset-1018-first-title-breath"] .reader-chapter-heading-label,
html[data-mobile-viewport-guard="active"] .reader-content-inner[data-reader-first-view-posture="body-first"] > .reader-chapter-heading[data-reader-title-breath="asset-1018-first-title-breath"] .reader-chapter-heading-label {
  font-size: 0.92em;
}

html[data-reader-viewport-shape="compact-narrow-short"] .reader-content-inner[data-reader-first-view-posture="body-first"] > .reader-chapter-heading[data-reader-opening-body-breath="asset-1018-opening-body-breath"] {
  gap: 0;
  margin-bottom: 0.08rem;
  padding-bottom: 0;
}

html[data-reader-viewport-shape="compact-narrow-short"] .reader-content-inner[data-reader-first-view-posture="body-first"] > .reader-chapter-heading[data-reader-opening-body-breath="asset-1018-opening-body-breath"] .reader-chapter-kicker {
  opacity: 0.32;
  font-size: 0.35em;
}

html[data-reader-viewport-shape="compact-narrow-short"] .reader-content-inner[data-reader-first-view-posture="body-first"] > .reader-chapter-heading[data-reader-opening-body-breath="asset-1018-opening-body-breath"] .reader-chapter-heading-label {
  font-size: 0.78em;
}

.reader-content h1[lang="en"] {
  overflow-wrap: break-word;
  hyphens: auto;
  hyphenate-limit-chars: 8 3 3;
}

.reader-content h1[lang="ja"] {
  line-break: strict;
}

.reader-content p {
  margin-block: 0 calc(var(--reader-paragraph-gap-active, var(--paragraph-gap)) + var(--reader-paragraph-gap-adjust, 0em));
  min-width: 0;
  max-width: 100%;
  text-align: var(--reader-paragraph-align, start);
  word-break: normal;
  overflow-wrap: break-word;
  orphans: 2;
  widows: 2;
  text-wrap: pretty;
  hanging-punctuation: first last;
  letter-spacing: 0;
}

.reader-content-inner > p:not(.reader-notice) {
  text-indent: var(--reader-paragraph-indent, 0);
}

.reader-content h1 + p:not(.reader-notice),
.reader-content-inner > p:first-of-type:not(.reader-notice) {
  text-indent: var(--reader-first-paragraph-indent, 0);
}

.reader-content .sentence {
  max-width: 100%;
  overflow-wrap: inherit;
  word-break: inherit;
  line-break: inherit;
  scroll-margin-top: var(--reader-anchor-top-reserve, 112px);
  scroll-margin-inline: var(--reader-anchor-inline-reserve, 64px);
}

.reader-content p:last-child {
  margin-bottom: 0;
}

.reader-content[data-content-locale="en"],
.reader-content[data-content-locale="en"] p:not([data-reading-lang]) {
  overflow-wrap: break-word;
  hyphens: auto;
}

.reader-content[data-content-locale="en"] p:not([data-reading-lang]) .sentence {
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: auto;
}

.reader-content p[lang="en"] {
  overflow-wrap: break-word;
  hyphens: auto;
  hyphenate-limit-chars: 8 3 3;
}

.reader-content p[lang="en"] .sentence {
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: auto;
  hyphenate-limit-chars: 8 3 3;
}

.reader-content[data-content-locale="en"] p:not([data-reading-lang]),
.reader-content p[lang="en"] {
  font-optical-sizing: auto;
  font-variant-numeric: oldstyle-nums proportional-nums;
  font-feature-settings: "kern", "liga", "onum";
}

.reader-content[data-content-locale="ja"] p:not([data-reading-lang]),
.reader-content[data-content-locale="ja"] p:not([data-reading-lang]) .sentence {
  line-break: strict;
}

.reader-content p[lang="ja"],
.reader-content p[lang="ja"] .sentence {
  line-break: strict;
}

.reader-content[data-content-locale="ja"] p:not([data-reading-lang]) .sentence {
  overflow-wrap: break-word;
  word-break: normal;
}

.reader-content p[lang="ja"] .sentence {
  overflow-wrap: break-word;
  word-break: normal;
}

.reader-content[data-content-locale="ko"] p:not([data-reading-lang]),
.reader-content[data-content-locale="ko"] p:not([data-reading-lang]) .sentence,
.reader-content p[lang="ko"],
.reader-content p[lang="ko"] .sentence,
.reader-content h1[lang="ko"] {
  overflow-wrap: break-word;
  word-break: keep-all;
}

.reader-notice {
  margin-bottom: 1.6rem !important;
  padding: 14px 16px 14px 18px;
  border: 1px solid var(--stage-line);
  border-radius: 18px;
  background: linear-gradient(180deg, var(--paper-glow), transparent 120%);
  color: var(--muted-strong);
  font-family: var(--ui-font);
  font-size: 0.92em;
  font-weight: 700;
  box-shadow: 0 14px 28px rgba(20, 20, 20, 0.06);
}

.reader-notice.is-transient {
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 180ms ease, transform 180ms ease;
}

.reader-notice.is-transient.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.reader-notice-layer {
  position: absolute;
  top: max(var(--reader-top-padding), calc(env(safe-area-inset-top) + 18px));
  left: max(var(--reader-inline-padding), env(safe-area-inset-left));
  right: max(var(--reader-inline-padding), env(safe-area-inset-right));
  z-index: 5;
  display: flex;
  justify-content: center;
  pointer-events: none;
}

.reader-return-notice {
  width: fit-content;
  max-width: min(30rem, calc(100% - 16px), calc(var(--reader-width) - 40px));
  margin: 0;
  padding: 6px 10px 6px 12px;
  border: 0;
  border-left: 1px solid var(--hairline);
  border-radius: 0 8px 8px 0;
  background: rgba(255, 252, 247, 0.78);
  color: var(--muted);
  font-family: var(--ui-font);
  font-size: 0.79em;
  font-weight: 600;
  line-height: 1.45;
  text-wrap: pretty;
  font-kerning: normal;
  box-shadow: none;
  backdrop-filter: blur(6px) saturate(102%);
  -webkit-backdrop-filter: blur(6px) saturate(102%);
}

.reader-return-notice[data-notice-tone="manuscript"] {
  display: block;
  padding: 6px 10px 6px 12px;
  border-color: var(--hairline);
  border-radius: 0 8px 8px 0;
  background: rgba(255, 252, 246, 0.8);
  color: var(--muted-strong);
  box-shadow: none;
}

.reader-return-notice[lang="en"] {
  overflow-wrap: break-word;
  hyphens: auto;
}

.reader-return-notice[lang="ja"] {
  line-break: strict;
}

.reader-return-notice[lang="ko"] {
  overflow-wrap: break-word;
  word-break: keep-all;
}

.reader-return-notice.is-transient {
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 180ms ease, transform 180ms ease;
}

.reader-return-notice.is-transient.is-visible {
  opacity: 1;
  transform: translateY(0);
  /* 레이어는 통과 유지, 보이는 알림 자신만 탭을 받는다(마찰 대청소 조기 닫기). */
  pointer-events: auto;
}

.support-notice {
  position: relative;
  margin: 0 0 14px;
  padding: 8px 12px 8px 18px;
  border-left: 1px solid var(--hairline);
  border-radius: 0 14px 14px 0;
  background:
    linear-gradient(90deg, rgba(146, 112, 69, 0.08), transparent 42%),
    linear-gradient(180deg, rgba(255, 252, 247, 0.92), rgba(255, 255, 255, 0));
  color: var(--muted);
  font-family: var(--ui-font);
  font-size: 0.92em;
  font-weight: 700;
  line-height: 1.7;
  text-wrap: pretty;
  font-kerning: normal;
}

.support-notice::after {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 999px;
  background: rgba(120, 94, 58, 0.26);
}

.support-notice[lang="en"] {
  overflow-wrap: break-word;
  hyphens: auto;
}

.support-notice[lang="ja"] {
  line-break: strict;
}

.support-notice[lang="ko"] {
  overflow-wrap: break-word;
  word-break: keep-all;
}

.support-notice.author-workbench-notice[data-author-workbench-notice-next-action]:not([data-author-workbench-notice-next-action=""]) {
  display: grid;
  justify-items: start;
  gap: 6px;
}

.support-notice.author-workbench-notice[data-author-workbench-notice-dismissible="true"] {
  display: grid;
  justify-items: start;
  gap: 6px;
}

.support-notice[data-notice-tone="return"] {
  display: block;
  margin-bottom: 12px;
  padding: 9px 12px;
  border: 1px solid var(--hairline);
  border-left-color: var(--hairline);
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(255, 252, 246, 0.98), rgba(249, 244, 236, 0.9)),
    var(--paper);
  color: var(--muted-strong);
  font-size: 0.88em;
  line-height: 1.62;
  box-shadow: 0 8px 22px rgba(28, 24, 18, 0.07);
}

.support-notice[data-notice-tone="return"]::after {
  content: none;
}

.support-boundary-line {
  justify-self: start;
  margin: -2px 0 0;
  border-left: 1px solid var(--hairline);
  padding-left: 9px;
  color: var(--muted-strong);
  font-size: 12px;
  line-height: 1.45;
  text-wrap: balance;
}

.sentence-boundary-line {
  color: var(--muted);
}

.sentence-trace-context {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: -2px 0 0;
  color: var(--reader-profile-trace-chip-color);
  font-size: 12px;
  line-height: 1.5;
}

.sentence-trace-context small {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  border: 1px solid var(--reader-profile-trace-chip-border);
  border-radius: var(--reader-profile-trace-chip-radius);
  background: var(--reader-profile-trace-chip-background);
  color: var(--reader-profile-trace-chip-color);
  letter-spacing: var(--reader-profile-trace-chip-letterspacing);
  padding: 4px 9px;
  overflow-wrap: anywhere;
}

.support-notice.is-transient {
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 180ms ease, transform 180ms ease;
}

.support-notice.is-transient.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.sentence {
  display: inline;
  max-width: 100%;
  border-radius: 4px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  overflow-wrap: break-word;
  word-break: normal;
  white-space: normal;
  vertical-align: bottom;
  transition: background 180ms ease, box-shadow 180ms ease, text-decoration-color 180ms ease;
}

.reader-content[data-content-locale="ko"] p:not([data-reading-lang]) .sentence,
.reader-content p[lang="ko"] .sentence {
  overflow-wrap: break-word;
  word-break: keep-all;
}

.reader-content[data-content-locale="ja"] p:not([data-reading-lang]) .sentence,
.reader-content p[lang="ja"] .sentence {
  overflow-wrap: break-word;
  word-break: normal;
  line-break: strict;
}

.reader-content[data-content-locale="en"] p:not([data-reading-lang]) .sentence,
.reader-content p[lang="en"] .sentence {
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: auto;
}

.sentence.is-selected {
  background: var(--button-wash);
}

/* 문장의 숨 — 작가가 고른 한 문장이, 독자가 처음 그 자리에 닿을 때 한 번만
   숨을 쉰다. 말은 없다: 아이콘도 라벨도 배지도 붙이지 않는다. 본문 한가운데에
   설명이 끼어들면 그 순간 읽기가 멈춘다.

   숨은 밑줄을 쓰지 않는다. 밑줄은 `is-highlight-mode` 의 손잡이이고, 그 모드는
   독자가 스스로 켠 것이다 — 켜지 않은 독자의 본문에 같은 표시를 그리면 두 가지가
   같은 것으로 보인다.

   `.is-breathing` 이 붙어 있는 동안에만 눌린다. 클래스가 걷히면 손잡이도 함께
   걷히므로(app.js `extinguishSentenceBreath`), 다 읽은 회차에는 보이지 않는데
   눌리는 문장이 남지 않는다. */
@keyframes reader-sentence-breath {
  0% {
    background: transparent;
  }
  42% {
    background: var(--reader-profile-highlight-wash);
  }
  62% {
    background: var(--reader-profile-highlight-wash);
  }
  100% {
    background: transparent;
  }
}

/* 숨 자리 시작점 센티널 — 조판에 아무 흔적도 남기지 않는다. */
[data-sentence-breath-sentinel] {
  display: inline-block;
  width: 0;
  height: 1em;
  vertical-align: baseline;
  margin: 0;
  padding: 0;
  pointer-events: none;
}

.sentence.is-breathing {
  cursor: pointer;
  /* 2.6초 — app.js 의 readerSentenceBreathHoldMs 와 같은 창이다. 둘이 갈라지면
     숨이 끝난 뒤에도 손잡이가 남거나, 손잡이가 먼저 사라진 채 배경만 남는다. */
  animation: reader-sentence-breath 2.6s cubic-bezier(0.33, 0, 0.2, 1) 1;
}

.sentence.is-breathing:focus-visible {
  outline: 2px solid var(--reader-profile-highlight-line-active, var(--focus-ring, currentColor));
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  /* 전역 규칙이 모든 애니메이션을 0.01ms 로 접으므로, 그대로 두면 숨이 아예
     보이지 않고 그 회차의 초대가 조용히 사라진다. 움직임 대신 **머무름**으로
     바꾼다 — 같은 2.6초 동안 잔잔한 바탕이 서 있다가 클래스와 함께 걷힌다. */
  .sentence.is-breathing {
    animation: none !important;
    background: var(--reader-profile-highlight-wash);
  }
}

.reader-content.is-highlight-mode .sentence[data-sentence-selectable="1"] {
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: var(--reader-profile-highlight-line);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.16em;
}

.reader-content.is-highlight-mode .sentence[data-sentence-selectable="1"]:focus-visible {
  background: var(--reader-profile-highlight-wash);
  text-decoration-color: var(--reader-profile-highlight-line-active);
  outline: none;
}

@media (hover: hover) {
  .reader-content.is-highlight-mode .sentence[data-sentence-selectable="1"]:hover {
    background: var(--reader-profile-highlight-wash);
    text-decoration-color: var(--reader-profile-highlight-line-active);
    outline: none;
  }
}

/* Keyboard focus needs a cue distinct from hover: the highlight wash alone is an
   8–10% alpha and fails the 3:1 non-text focus-indicator ratio. Reuse the quiet
   is-return-focused vocabulary (inset underline in the focus color) so Tab travel
   is legible without a loud ring — and because it is a box-shadow, it stays visible
   on has-support sentences where the text-decoration is transparent. */
.reader-content.is-highlight-mode .sentence[data-sentence-selectable="1"]:focus-visible {
  box-shadow: inset 0 -2px 0 var(--focus);
}

.reader-content.is-highlight-mode .sentence.has-support[data-sentence-selectable="1"] {
  text-decoration-color: transparent;
}

.sentence.is-return-focused {
  background: linear-gradient(transparent 68%, var(--accent-soft) 68%);
  box-shadow: inset 0 -1px 0 var(--focus);
}

.sentence.is-return-supported {
  background: linear-gradient(transparent 68%, var(--highlight-bg) 68%);
  box-shadow: inset 0 -2px 0 var(--highlight-line);
}

.sentence.has-support.is-highlight-visible {
  background: linear-gradient(transparent 68%, var(--highlight-bg) 68%);
  box-shadow: inset 0 -1px 0 var(--highlight-line);
}

.sentence.has-support.is-top-highlight.is-highlight-visible {
  box-shadow: inset 0 -2px 0 var(--highlight-line);
}

.reader-content.is-page-mode {
  overflow-x: hidden;
  overflow-y: hidden;
  overflow-anchor: none;
  scrollbar-width: none;
  scroll-snap-type: none;
  scroll-behavior: auto;
  scroll-padding-inline: max(var(--reader-page-gutter-active), var(--reader-anchor-inline-reserve, 64px));
  padding-right: 0;
  padding-left: 0;
  touch-action: manipulation;
  -webkit-mask-image: none;
  mask-image: none;
}

.reader-content.is-page-mode[data-anchor-restore-lock="active"],
.reader-content.is-page-mode[data-focus-restore-lock="active"] {
  scroll-snap-type: none;
  scroll-behavior: auto;
}

.reader-content.is-scene-mode[data-focus-restore-lock="active"] {
  scroll-snap-type: none;
  scroll-behavior: auto;
}

.reader-content.is-page-mode::-webkit-scrollbar {
  display: none;
}

.reader-content.is-page-mode .reader-content-inner {
  --reader-page-width: var(--reader-viewport-width, 100vi);
  width: var(--reader-page-width);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  max-width: none;
  height: 100%;
  column-width: var(--reader-page-width);
  column-gap: var(--reader-page-gutter-active);
  column-fill: auto;
}

.reader-content.is-page-mode .reader-content-inner::before {
  display: none;
}

.reader-content.is-page-mode .reader-content-inner > h1,
.reader-content.is-page-mode .reader-content-inner > p,
.reader-content.is-page-mode .reader-content-inner > section {
  /* Chrome shoves a multicolumn block child to the LEFT column edge whether it is
     centered with margin:auto OR with padding — the column box mis-reports its width
     to both. transform is immune: translateX resolves against the child's OWN border
     box, not the buggy column box, so left:50% (half the column) + translateX(-50%)
     (half the child) lands it dead-center at any devicePixelRatio. Width is the text
     measure; the page-turn column (the viewport) is unchanged. */
  width: min(100%, var(--reader-page-width-active, 658px));
  box-sizing: border-box;
  margin-left: 0;
  margin-right: 0;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  padding-right: max(var(--reader-page-text-inset), calc(env(safe-area-inset-right) + 18px));
  padding-left: max(var(--reader-page-text-inset), calc(env(safe-area-inset-left) + 18px));
}

.reader-content.is-page-mode .reader-content-inner > p:not(.reader-notice) {
  text-align: var(--reader-page-paragraph-align, justify);
  text-align-last: start;
  text-justify: inter-character;
}

.reader-content.is-page-mode[data-content-locale="ko"] .reader-content-inner > p:not([data-reading-lang]),
.reader-content.is-page-mode .reader-content-inner > p[lang="ko"],
.reader-content.is-page-mode[data-content-locale="ko"] .reader-content-inner > p:not([data-reading-lang]) .sentence,
.reader-content.is-page-mode .reader-content-inner > p[lang="ko"] .sentence {
  line-break: loose;
  overflow-wrap: break-word;
  word-break: keep-all;
}

.reader-content.is-page-mode p,
.reader-content.is-page-mode h1 {
  break-inside: avoid;
}

.reader-content.is-page-mode .reader-content-inner > p:not(.reader-notice),
.reader-content.is-spread-mode .reader-content-inner > p:not(.reader-notice) {
  break-inside: auto;
  orphans: 4;
  widows: 4;
}

.reader-content.is-scene-mode {
  scroll-snap-type: none;
  scroll-padding-block: 56px;
  touch-action: pan-y;
}

.reader-content.is-scene-mode[data-scene-turn-transition="pending"] {
  scroll-snap-type: none;
}

.reader-content.is-scene-mode .reader-content-inner {
  width: min(100%, calc(var(--reader-width) + 72px));
  scroll-snap-align: start;
}

.reader-content.is-scene-mode .reader-content-inner > h1,
.reader-content.is-scene-mode .reader-content-inner > p,
.reader-content.is-scene-mode .reader-content-inner > section {
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.reader-content.is-scene-mode .reader-content-inner > p {
  width: min(43ch, 100%);
  padding-top: 14px;
  padding-bottom: 16px;
}

html[data-reader-viewport-shape="compact-landscape"] .reader-content.is-scene-mode {
  scroll-padding-block: 30px;
  scroll-snap-type: none;
}

html[data-reader-viewport-shape="compact-landscape"] .reader-content.is-scene-mode .reader-content-inner > p {
  padding-top: 4px;
  padding-bottom: 5px;
}

html[data-reader-viewport-shape="compact-landscape"] .reader-content.is-scene-mode .reader-content-inner > h1,
html[data-reader-viewport-shape="compact-landscape"] .reader-content.is-scene-mode .reader-content-inner > p,
html[data-reader-viewport-shape="compact-landscape"] .reader-content.is-scene-mode .reader-content-inner > section {
  scroll-snap-align: none;
  scroll-snap-stop: normal;
}

.reader-content.is-scene-mode .reader-content-inner > p + p {
  border-top: 1px solid var(--reader-scene-rule);
}

.reader-content.is-spread-mode {
  background:
    linear-gradient(90deg, var(--hairline-soft), transparent 12%, transparent 88%, var(--hairline-soft)),
    transparent;
}

.reader-content.is-spread-mode .reader-content-inner {
  --reader-page-width: var(--reader-viewport-width, 100vi);
  column-gap: calc(var(--reader-page-gutter-active) + var(--reader-spread-fold-active));
  column-rule: 1px solid var(--reader-spread-column-rule);
}

html[data-reader-viewport-shape="compact-landscape"] .reader-content.is-page-mode .reader-content-inner > p:not(.reader-notice),
html[data-reader-viewport-shape="compact-landscape"] .reader-content.is-spread-mode .reader-content-inner > p:not(.reader-notice) {
  break-inside: auto;
  orphans: 2;
  widows: 2;
}

.chapter-afterglow {
  position: relative;
  display: grid;
  gap: 14px;
  /* 본문 문단 간격(넉넉한 조판에서 ≈3rem)과 같으면 "다음 문단"처럼 붙어 읽힌다 —
     장의 끝은 문단 리듬보다 한 호흡 깊게 떨어진다(2026-07-30 소유자 신고). */
  margin-top: clamp(4.2rem, 9svh, 5.6rem);
  overflow: hidden;
  padding: 24px 24px 25px;
  border: 1px solid var(--reader-profile-afterglow-border);
  border-radius: 22px;
  background: var(--reader-profile-afterglow-background);
  box-shadow: var(--reader-profile-afterglow-shadow);
  break-inside: avoid;
}

.chapter-afterglow::before,
.highlight-summary::before {
  content: "";
  position: absolute;
  left: 20px;
  right: 20px;
  top: 0;
  height: 1px;
  background: var(--reader-profile-sheet-rule, linear-gradient(90deg, transparent, var(--hairline-soft), transparent));
  pointer-events: none;
}

.chapter-afterglow p {
  position: relative;
  z-index: 1;
  width: var(--reader-profile-afterglow-width);
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.chapter-afterglow-minimal {
  gap: 0;
  /* 헤어라인뿐인 변형은 본문 문단 리듬(≈2em)보다 확실히 깊게 떨어져야
     "다음 문단"이 아니라 "장의 끝 선반"으로 읽힌다 — 2026-07-30 소유자 신고. */
  margin-top: clamp(3.6rem, 11svh, 5.4rem);
  padding: 22px 0 10px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.chapter-afterglow-minimal::before {
  left: max(28px, var(--reader-profile-minimal-rule-left));
  right: max(28px, var(--reader-profile-minimal-rule-right));
}

.chapter-afterglow-eyebrow {
  margin-bottom: 0 !important;
  color: var(--muted);
  font-family: var(--ui-font);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0;
}

.chapter-afterglow-body {
  color: var(--muted-strong);
}

.chapter-afterglow-detail {
  font-size: 13px;
}

.chapter-afterglow-disclosure {
  width: var(--reader-profile-afterglow-detail-width);
  margin: 0 auto;
}

.chapter-afterglow-actions {
  display: grid;
  justify-items: center;
  gap: 8px;
  margin-top: 2px;
}

.chapter-afterglow-actions > * {
  width: min(300px, 100%);
}

.chapter-afterglow-mail {
  display: grid;
  justify-items: center;
  gap: 8px;
  margin-top: 8px;
}

.chapter-afterglow-mail-body {
  font-size: 13px;
}

.chapter-afterglow-mail-action {
  display: grid;
  justify-items: center;
  width: min(300px, 100%);
}

.chapter-afterglow-mail-action > .plain-button {
  width: min(300px, 100%);
}

.chapter-afterglow-mail-ready .chapter-afterglow-mail-body {
  opacity: 0.75;
}

.account-mail-preference {
  display: grid;
  gap: 4px;
  margin-top: 4px;
}

.account-mail-preference-title {
  font-weight: 600;
}

.account-mail-preference-toggle {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  cursor: pointer;
}

.account-mail-preference-toggle input {
  margin-top: 2px;
  flex: 0 0 auto;
}

.reader-receipt-list {
  display: grid;
  gap: 10px;
}

.reader-receipt-row {
  display: grid;
  gap: 2px;
}

.reader-receipt-name {
  font-weight: 600;
}

.reader-receipt-meta {
  font-size: 13px;
}

.reader-receipt-adjustment {
  font-size: 12px;
}

.reader-receipt-badge {
  font-size: 11px;
  color: var(--muted-strong);
}

.reader-receipt-note {
  font-size: 12px;
  margin-top: 14px;
}

.reader-static-fallback-contact {
  margin-top: 14px;
  font-size: 13px;
  opacity: 0.85;
}

.chapter-afterglow-membership-return {
  gap: 16px;
}

.next-chapter-handoff-teaser {
  display: grid;
  gap: 6px;
  width: min(42ch, 100%);
  margin: 0 auto;
  color: var(--muted-strong);
  text-align: left;
}

.next-chapter-handoff-teaser small {
  color: var(--muted);
  font-family: var(--ui-font);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0;
}

.chapter-afterglow .next-chapter-handoff-teaser p {
  width: 100%;
  margin: 0;
  color: var(--reader-ink);
  text-align: left;
}

.chapter-afterglow-membership-return [data-next-window-sentence-traces-chapter-end-memory-bridge="true"] {
  width: min(32ch, 100%);
  gap: 6px;
  margin-top: -2px;
  padding-top: 8px;
  border-top-color: color-mix(in srgb, var(--hairline-soft) 62%, transparent);
}

.chapter-afterglow-membership-return [data-next-window-sentence-traces-chapter-end-memory-bridge="true"] .next-window-sentence-trace-head {
  gap: 2px;
}

.chapter-afterglow-membership-return [data-next-window-sentence-traces-chapter-end-memory-bridge="true"] .next-window-sentence-trace-head strong {
  color: var(--muted-strong);
  font-size: 12px;
  font-weight: 560;
}

.chapter-afterglow-membership-return [data-next-window-sentence-traces-chapter-end-memory-bridge="true"] .next-window-sentence-trace-head p {
  color: var(--muted);
  font-size: 10.5px;
  line-height: 1.55;
}

.chapter-afterglow-membership-return [data-next-window-sentence-traces-chapter-end-memory-bridge="true"] .next-window-sentence-trace-summary {
  min-height: 28px;
}

.chapter-afterglow-membership-return [data-next-window-sentence-traces-chapter-end-memory-bridge="true"] .next-window-sentence-trace-item {
  grid-template-columns: minmax(0, 1fr);
  min-height: 0;
  padding: 6px 0;
  border-left-color: color-mix(in srgb, var(--hairline-soft) 68%, transparent);
}

.chapter-afterglow-membership-return [data-next-window-sentence-traces-chapter-end-memory-bridge="true"] .next-window-sentence-trace-rank {
  display: none;
}

.chapter-afterglow-membership-return [data-next-window-sentence-traces-chapter-end-memory-bridge="true"] .next-window-sentence-trace-teaser {
  color: var(--muted-strong);
  font-size: 12px;
  line-height: 1.62;
}

.chapter-afterglow-membership-return [data-next-window-sentence-traces-chapter-end-memory-bridge="true"] .next-window-sentence-trace-clue,
.chapter-afterglow-membership-return [data-next-window-sentence-traces-chapter-end-memory-bridge="true"] .next-window-sentence-trace-main small,
.chapter-afterglow-membership-return [data-next-window-sentence-traces-chapter-end-memory-bridge="true"] .next-window-sentence-trace-hidden-note {
  color: var(--muted);
  font-size: 10.5px;
}

.chapter-afterglow[data-reader-afterglow-scene="episode-end"] {
  --reader-terminal-action-shift-y: 0px;
  justify-items: center;
  align-content: center;
  gap: 14px;
  min-height: clamp(18rem, 54svh, 28rem);
  /* svh to match the block's own min-height and every paged/open sibling —
     legacy vh resolves against the LARGE viewport under a collapsing toolbar
     (iPad Safari), inflating the gap ~10-15% beyond the svh intent. */
  margin: clamp(4.75rem, 14svh, 8.75rem) auto 0;
  overflow: visible;
  padding: clamp(1.35rem, 4svh, 2.35rem) 0 clamp(2rem, 5svh, 3.4rem);
  padding-bottom: max(
    clamp(2rem, 5svh, 3.4rem),
    calc(env(safe-area-inset-bottom) + var(--reader-terminal-bottom-reserve, 70px))
  );
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  -webkit-column-break-inside: avoid;
  break-inside: avoid;
  page-break-inside: avoid;
  text-wrap: balance;
}

.reader-content.is-page-mode .chapter-afterglow[data-reader-afterglow-scene="episode-end"],
.reader-content.is-spread-mode .chapter-afterglow[data-reader-afterglow-scene="episode-end"] {
  --reader-terminal-action-shift-y: clamp(52px, 8.8svh, 74px);
  -webkit-column-break-inside: avoid;
  -webkit-column-break-before: always;
  break-before: column;
  break-inside: avoid-column;
  page-break-before: always;
  display: grid;
  align-content: center;
  min-height: clamp(17rem, 58svh, 30rem);
  margin-top: 0;
  padding-top: clamp(1.5rem, 5svh, 2.8rem);
  padding-bottom: max(
    3.4rem,
    calc(env(safe-area-inset-bottom) + var(--reader-terminal-paged-bottom-reserve, 82px))
  );
}

html[data-reader-viewport-shape="compact-landscape"] .reader-content.is-page-mode .chapter-afterglow[data-reader-afterglow-scene="episode-end"],
html[data-reader-viewport-shape="compact-landscape"] .reader-content.is-spread-mode .chapter-afterglow[data-reader-afterglow-scene="episode-end"] {
  --reader-terminal-action-shift-y: -42px;
  align-content: center;
  gap: 10px;
  min-height: clamp(8.4rem, 48svh, 11.5rem);
  margin-top: 0;
  padding-top: clamp(1.2rem, 7svh, 1.85rem);
  padding-bottom: max(
    1.35rem,
    calc(env(safe-area-inset-bottom) + var(--reader-terminal-compact-bottom-reserve, 36px))
  );
}

.chapter-afterglow[data-reader-afterglow-scene="episode-end"]::before {
  left: max(42px, calc(50% - 5.2rem));
  right: max(42px, calc(50% - 5.2rem));
  opacity: 0.34;
}

.chapter-afterglow[data-reader-afterglow-scene="episode-end"] .chapter-afterglow-eyebrow {
  color: var(--muted);
  font-weight: 650;
}

.chapter-afterglow[data-reader-afterglow-scene="episode-end"] .chapter-afterglow-body {
  max-width: min(18rem, 100%);
  color: color-mix(in srgb, var(--reader-heading-ink) 76%, var(--muted) 24%);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.78;
}

.chapter-afterglow[data-reader-afterglow-scene="episode-end"] .chapter-afterglow-detail {
  max-width: min(24rem, 100%);
  color: var(--muted);
  line-height: 1.7;
}

/* 회차 끝의 앱 초대 — 다음 회차 버튼 위에 한 줄, 두 손잡이. 광고가 아니라 안내라
   본문 톤(muted)을 따르고, 닫으면 기기에 기억돼 다시 안 뜬다. */
.chapter-afterglow-app-invite {
  width: min(22rem, 100%);
  margin: clamp(0.6rem, 1.8svh, 1rem) auto 0;
  text-align: center;
}

.chapter-afterglow-app-invite-body {
  font-size: 13px;
  margin: 0 0 6px;
}

.chapter-afterglow-app-invite-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.chapter-afterglow-app-invite-dismiss {
  font-size: 12px;
  opacity: 0.72;
}

.reading-keep-awake-row {
  margin-top: 6px;
}

.chapter-afterglow-open-actions {
  width: min(18rem, 100%);
  margin-top: clamp(0.62rem, 1.9svh, 1.05rem);
}

.chapter-afterglow[data-reader-afterglow-scene="episode-end"] .chapter-afterglow-actions > * {
  width: auto;
  max-width: 100%;
}

.reader-content.is-page-mode .chapter-afterglow[data-reader-afterglow-scene="episode-end"] .chapter-afterglow-open-actions,
.reader-content.is-spread-mode .chapter-afterglow[data-reader-afterglow-scene="episode-end"] .chapter-afterglow-open-actions {
  transform: translateY(var(--reader-terminal-action-shift-y));
  position: relative;
  z-index: 2;
}

.reader-content.is-scene-mode .chapter-afterglow[data-reader-afterglow-scene="episode-end"] {
  scroll-snap-align: center;
  scroll-snap-stop: always;
}

.chapter-afterglow-open[data-reader-afterglow-scene="episode-end"] {
  --reader-terminal-action-shift-y: 0px;
  align-content: start;
  gap: 0;
  min-height: 0;
  /* Let the final line breathe before the quiet "다음" — the old ~18px sat the next
     affordance right against the last sentence while ~80px of emptiness pooled below it.
     Give the chapter a comfortable rest above the handoff (~2.5-3.5 line-heights). */
  margin-top: clamp(3.2rem, 8.5svh, 4.75rem);
  padding-top: clamp(0.22rem, 0.9svh, 0.48rem);
  padding-bottom: max(
    clamp(4.25rem, 10svh, 6.5rem),
    calc(env(safe-area-inset-bottom) + 78px)
  );
  -webkit-column-break-inside: auto;
  break-inside: auto;
  page-break-inside: auto;
  scroll-snap-align: none;
  scroll-snap-stop: normal;
}

.reader-content.is-page-mode .chapter-afterglow-open[data-reader-afterglow-scene="episode-end"],
.reader-content.is-spread-mode .chapter-afterglow-open[data-reader-afterglow-scene="episode-end"] {
  --reader-terminal-action-shift-y: 0px;
  -webkit-column-break-before: auto;
  -webkit-column-span: none;
  break-before: auto;
  break-inside: auto;
  column-span: none;
  page-break-before: auto;
  page-break-inside: auto;
  align-content: start;
  min-height: 0;
  /* Same chapter-end breath as scroll (see the scroll -open fix above): the old
     clamp(0.75rem,2.2svh,1.3rem) block margin plus a negative actions pull sat
     the paged 다음 ~16px under the last line while the rest of the final page
     stayed empty — the exact crowding the scroll fix removed. The -open afterglow
     flows inline after the text in paged mode (break-before: auto), so it needs
     the same rest, and the actions inherit the base open-actions margin. */
  margin-top: clamp(3.2rem, 8.5svh, 4.75rem);
  padding-top: clamp(0.24rem, 0.9svh, 0.52rem);
  padding-bottom: max(
    4.6rem,
    calc(env(safe-area-inset-bottom) + 84px)
  );
}

.reader-content.is-page-mode .chapter-afterglow-open[data-reader-afterglow-scene="episode-end"] .chapter-afterglow-open-actions,
.reader-content.is-spread-mode .chapter-afterglow-open[data-reader-afterglow-scene="episode-end"] .chapter-afterglow-open-actions {
  transform: none;
}

@supports selector(.reader-content:has(.chapter-afterglow-open)) {
  .reader-content.is-spread-mode:has(.chapter-afterglow-open[data-reader-afterglow-scene="episode-end"]) .reader-content-inner {
    column-count: 1;
    column-width: var(--reader-viewport-width, 100vi);
    column-gap: 0;
    column-rule: 0;
  }
}

html[data-reader-viewport-shape="compact-narrow-short"] .reader-content.is-spread-mode .chapter-afterglow-open[data-reader-afterglow-scene="episode-end"] {
  -webkit-column-span: all;
  column-span: all;
  width: min(100%, calc(100vi - 48px));
  max-width: min(100%, calc(100vi - 48px));
  max-height: clamp(9rem, 30svh, 12rem);
  overflow: visible;
  transform: translateY(-240px);
}

html[data-reader-viewport-shape="compact-narrow-short"] .reader-content.is-spread-mode .chapter-afterglow-open[data-reader-afterglow-scene="episode-end"]::before {
  left: calc(50% - 4.5rem);
  right: calc(50% - 4.5rem);
}

html[data-reader-viewport-shape="compact-narrow-short"] .reader-content.is-spread-mode .chapter-afterglow-open[data-reader-afterglow-scene="episode-end"] .chapter-afterglow-open-actions {
  width: min(18rem, calc(100vi - 48px));
  margin-top: clamp(1.1rem, 4svh, 1.6rem);
  transform: none;
  -webkit-column-break-inside: avoid;
  break-inside: avoid;
  page-break-inside: avoid;
}

/* (the portrait-phone actions push-down repair was removed: the paged -open
   block now carries the same breath as scroll at every width, so the repair's
   job is done at the root) */

.reader-content.is-scene-mode .chapter-afterglow-open[data-reader-afterglow-scene="episode-end"] {
  scroll-snap-align: none;
  scroll-snap-stop: normal;
}

.reader-surface.is-content-next-handoff .reader-bottombar[data-reader-handoff-stage="ready"] {
  /* reader-terminal-breath=asset-1016-content-next-only */
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(8px);
}

.reader-surface.is-content-next-handoff .reader-bottombar[data-reader-handoff-stage="ready"] [data-action="contents"],
.reader-surface.is-content-next-handoff .reader-bottombar[data-reader-handoff-stage="ready"] [data-action="settings"],
.reader-surface.is-content-next-handoff .reader-bottombar[data-reader-handoff-stage="ready"] [data-action="highlight"],
.reader-surface.is-content-next-handoff .reader-bottombar[data-reader-handoff-stage="ready"] [data-action="previous"],
.reader-surface.is-content-next-handoff .reader-bottombar[data-reader-handoff-stage="ready"] [data-action="next"] {
  visibility: hidden;
  pointer-events: none;
}

.chapter-afterglow-next {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  max-width: 100%;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  /* 이음새 1-나(2026-09-02 소유자 확정): 깔때기 실측(1화 완주 167→2화 55)의
     자리. 단어도 위치도 그대로, 눈에 닿는 힘만 한 단계 — 14px·잉크 92%. */
  color: color-mix(in srgb, var(--reader-profile-next-color) 92%, var(--muted) 8%);
  font-family: var(--ui-font);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  box-shadow: none;
  touch-action: manipulation;
  transition: color 160ms ease;
}

.chapter-afterglow-open[data-reader-chapter-end-action-weight="thin-bookmark-action"] .chapter-afterglow-next {
  /* chapter-end-action=asset-2001-thin-next-bookmark · 크기는 이음새 1-나를 따른다 */
  padding: 0;
  background: transparent;
  box-shadow: none;
  font-size: 14px;
  font-weight: 400;
}

/* 이음새 2-나: 1화 끝 한 곳에만 두는 약속 한 줄 — 결제벽 오해를 막는 예외. */
.chapter-afterglow-guest-promise {
  margin: 6px 0 0;
  font-family: var(--ui-font);
  font-size: 11px;
  font-weight: 400;
  color: color-mix(in srgb, var(--reader-profile-next-color) 62%, var(--muted) 38%);
  text-align: center;
}

/* 이음새 5-나: 잔광 맨 아래의 공유 손잡이 — "다음"보다 두 단계 낮은 위계. */
.chapter-afterglow-share {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  margin-top: 14px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  font-family: var(--ui-font);
  font-size: 10.5px;
  font-weight: 400;
  color: color-mix(in srgb, var(--reader-profile-next-color) 62%, var(--muted) 38%);
  transition: color 160ms ease;
}
.chapter-afterglow-share:hover,
.chapter-afterglow-share:focus-visible {
  color: color-mix(in srgb, var(--reader-profile-next-color) 88%, var(--muted) 12%);
}

/* 이음새 3-나: 첫 숨의 출구 힌트 — 숨 뒤 절반에만 떠올랐다 사라진다. 의식은 그대로. */
.reader-first-breath-hint {
  margin: 18px 0 0;
  font-family: var(--ui-font);
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: currentColor;
  opacity: 0;
  animation: reader-first-breath-hint-rise 2350ms ease-in-out 2300ms both;
}
@keyframes reader-first-breath-hint-rise {
  0% { opacity: 0; }
  35% { opacity: 0.55; }
  75% { opacity: 0.55; }
  100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .reader-first-breath-hint { animation: none; opacity: 0; }
}

/* 이음새 4-나: 글자 크기 즉답 단추(가−/가+) — 슬라이더와 같은 파이프라인을 쓴다. */
.reading-detail-quick {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 2px 0 10px;
}
.reading-detail-quick-label {
  font-size: 0.82rem;
  color: var(--muted);
}
.reading-detail-quick button {
  min-width: 44px;
  min-height: 36px;
  padding: 0 10px;
  font-size: 0.95rem;
}

.chapter-afterglow-next span {
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: keep-all;
}

.chapter-afterglow-next::after {
  content: none;
  display: none;
}

/* The thin next-chapter action is borderless with no padding, so its box hugs
   the glyphs and the tap target collapses to the text width (~23px). Extend the
   hit area horizontally without adding layout width, so the thin look survives
   while the target clears 44px. */
.chapter-afterglow-next::before {
  content: "";
  position: absolute;
  inset: 0 -11px;
}

.chapter-afterglow-next:focus-visible {
  background: transparent;
  color: color-mix(in srgb, var(--reader-heading-ink) 88%, var(--muted) 12%);
}

@media (hover: hover) {
  .chapter-afterglow-next:hover {
    background: transparent;
    color: color-mix(in srgb, var(--reader-heading-ink) 88%, var(--muted) 12%);
  }
}

.chapter-afterglow-next:focus-visible {
  /* Match the app-standard control ring (3px solid var(--focus)) instead of a
     2px/34%-alpha muted mix — this is the primary continue CTA and was the
     faintest focus indicator in the reader, under the WCAG 2.4.11 bar. */
  outline: 3px solid var(--focus);
  outline-offset: 4px;
}

html[data-reading-profile="blackbook"] .chapter-afterglow-next {
  color: #f7f5ef;
}

.chapter-afterglow-next:disabled {
  cursor: progress;
  opacity: 0.72;
}

.chapter-afterglow-next:disabled::after {
  opacity: 0.38;
}

html[data-reader-viewport-shape="compact-narrow-short"] .reader-content.is-spread-mode .chapter-afterglow-open[data-reader-afterglow-scene="episode-end"] .chapter-afterglow-next {
  min-height: 44px;
  border: 0;
  background: transparent;
  box-shadow: none;
  text-decoration: none;
  white-space: nowrap;
  writing-mode: horizontal-tb;
  text-orientation: mixed;
}

.reader-journey-card {
  display: grid;
  gap: 10px;
  width: 100%;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--stage-border) 82%, var(--ink));
  border-radius: 8px;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  box-shadow: 0 12px 30px rgba(20, 20, 20, 0.05);
}

.reader-journey-head,
.reader-journey-steps {
  display: grid;
  gap: 8px;
}

.reader-journey-head {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  color: var(--muted);
  font-family: var(--ui-font);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0;
}

.reader-journey-head strong {
  color: var(--ink);
  font-size: 12px;
}

.reader-journey-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: baseline;
  gap: 3px 10px;
  cursor: pointer;
  list-style: none;
  color: var(--muted);
  font-family: var(--ui-font);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0;
}

.reader-journey-summary::-webkit-details-marker {
  display: none;
}

.reader-journey-summary::after {
  content: "";
  grid-column: 3;
  grid-row: 1;
  width: 0.48em;
  height: 0.48em;
  align-self: center;
  justify-self: end;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  color: var(--muted);
  opacity: 0.48;
  transform: translateY(-0.08em) rotate(45deg);
  transform-origin: center;
}

.reader-journey-disclosure[open] .reader-journey-summary::after {
  opacity: 0.38;
  transform: translateY(0.1em) rotate(-135deg);
}

.reader-journey-summary strong {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--ink);
  font-size: 12px;
  text-align: right;
}

.reader-journey-summary small {
  grid-column: 1 / -1;
  grid-row: 2;
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--muted);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.4;
}

.reader-journey-detail-stack {
  display: grid;
  gap: 10px;
  padding-top: 10px;
}

.reader-journey-disclosure:not([open]) .reader-journey-detail-stack {
  display: none;
}

.reader-journey-track {
  position: relative;
  height: 3px;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in srgb, var(--button-wash) 72%, transparent);
}

.reader-journey-track-fill,
.reader-journey-open-mark {
  display: block;
  position: absolute;
}

.reader-journey-track-fill {
  inset: 0 auto 0 0;
  width: var(--reader-journey-progress, 0%);
  height: 100%;
  border-radius: inherit;
  background: var(--reader-profile-progress-fill);
}

.reader-journey-open-mark {
  top: -2px;
  bottom: -2px;
  left: var(--reader-journey-open, 0%);
  width: 1px;
  transform: translateX(-50%);
  background: color-mix(in srgb, var(--ink) 48%, transparent);
}

.reader-journey-steps {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.reader-journey-step {
  display: grid;
  min-width: 0;
  gap: 3px;
  padding-left: 9px;
  border-left: 1px solid color-mix(in srgb, var(--stage-border) 72%, transparent);
}

.reader-journey-step small {
  color: var(--muted);
  font-family: var(--ui-font);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0;
}

.reader-journey-step strong {
  overflow-wrap: anywhere;
  color: var(--ink);
  font-size: 12px;
  line-height: 1.35;
}

.reader-journey-horizon {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  gap: 8px;
  margin: 0;
  padding-top: 2px;
  color: var(--muted);
  font-family: var(--ui-font);
  font-size: 11px;
  line-height: 1.35;
}

.reader-journey-horizon span {
  font-weight: 700;
}

.reader-journey-horizon strong {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--ink);
  font-size: 12px;
}

.reader-assurance-ledger {
  display: grid;
  gap: 9px;
  width: 100%;
  padding: 12px 13px;
  border: 1px solid color-mix(in srgb, var(--stage-border) 72%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--paper) 92%, transparent);
}

.reader-assurance-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: baseline;
  gap: 8px;
  color: var(--muted);
  cursor: pointer;
  font-family: var(--ui-font);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0;
  list-style: none;
}

.reader-assurance-head strong {
  min-width: 0;
  color: var(--ink);
  font-size: 12px;
  overflow-wrap: anywhere;
}

summary.reader-assurance-head::-webkit-details-marker {
  display: none;
}

summary.reader-assurance-head::after {
  content: "";
  width: 0.46em;
  height: 0.46em;
  align-self: center;
  justify-self: end;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  color: var(--muted);
  opacity: 0.48;
  transform: translateY(-0.08em) rotate(45deg);
  transform-origin: center;
}

.reader-assurance-ledger[open] .reader-assurance-head::after {
  opacity: 0.38;
  transform: translateY(0.1em) rotate(-135deg);
}

.reader-assurance-items {
  display: grid;
  gap: 0;
  margin: 0;
}

.reader-assurance-row {
  display: grid;
  grid-template-columns: minmax(58px, 0.32fr) minmax(0, 1fr);
  gap: 8px;
  padding: 7px 0;
  border-top: 1px solid color-mix(in srgb, var(--stage-border) 54%, transparent);
}

.reader-assurance-row:first-child {
  border-top: 0;
  padding-top: 0;
}

.reader-assurance-row:last-child {
  padding-bottom: 0;
}

.reader-assurance-row dt,
.reader-assurance-row dd {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
  line-height: 1.48;
}

.reader-assurance-row dt {
  color: var(--muted);
  font-family: var(--ui-font);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0;
}

.reader-assurance-row dd {
  color: var(--ink);
  font-size: 12px;
}

@media (max-width: 520px) {
  .reader-journey-head,
  .reader-journey-steps,
  .reader-journey-horizon,
  .reader-assurance-row {
    grid-template-columns: 1fr;
  }
}

.highlight-summary {
  position: relative;
  display: grid;
  gap: 14px;
  margin-top: 1.4rem;
  overflow: hidden;
  padding: 20px 24px 22px;
  border: 1px solid var(--stage-border);
  border-radius: 22px;
  background:
    radial-gradient(circle at top center, var(--paper-glow), transparent 52%),
    linear-gradient(180deg, var(--paper-glow), transparent 128%),
    var(--raised);
  box-shadow:
    0 18px 40px rgba(20, 20, 20, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.54);
}

/* The literal inset 0 1px 0 rgba(255,255,255,0.54) above paints a harsh 54%-white
   hairline across the top of this near-black card in dark theme (the drop shadow is
   already invisible there). Its sibling .chapter-afterglow tokenizes the shadow per
   dark profile; .highlight-summary was the one card omitted from that parity pass.
   Kill the light shadow in every dark context, matching the family precedent. */
html[data-theme="dark"] .highlight-summary {
  box-shadow: none;
}

.highlight-summary-eyebrow {
  position: relative;
  z-index: 1;
  color: var(--muted);
}

.highlight-trace-list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
}

.highlight-trace-item {
  display: grid;
  gap: 4px;
  border-top: 1px solid var(--reader-profile-trace-divider);
  padding-top: 10px;
  color: var(--ink);
}

.highlight-trace-button,
.quiet-trace-button {
  display: grid;
  width: 100%;
  gap: 4px;
  border: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.highlight-trace-button:focus-visible,
.quiet-trace-button:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: 4px;
}

.highlight-trace-item.is-archived .highlight-trace-mark {
  color: var(--muted);
}

.highlight-trace-item:first-child {
  border-top: 0;
  padding-top: 0;
}

.highlight-trace-mark {
  font-family: var(--ui-font);
  color: var(--reader-profile-trace-chip-color);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.03em;
}

.highlight-trace-item span {
  color: var(--muted-strong);
  line-height: 1.68;
  overflow-wrap: anywhere;
  text-wrap: pretty;
}

.highlight-trace-item small:not(.highlight-trace-mark) {
  color: var(--reader-profile-trace-chip-color);
  font-size: 11px;
  letter-spacing: 0.02em;
}

.locked-page {
  display: grid;
  align-content: center;
  gap: 16px;
  width: min(640px, 100%);
  /* svh keeps the access CTA inside the dynamic viewport on iOS Safari
     (100vh overshoots when the toolbar is expanded) */
  min-height: 58svh;
  margin: 0 auto max(2.4rem, calc(env(safe-area-inset-bottom) + var(--reader-locked-boundary-bottom-reserve, 96px)));
  padding: 28px 24px;
  border: 1px solid var(--stage-border);
  border-radius: 24px;
  background: linear-gradient(180deg, var(--paper-glow), transparent 120%);
  /* theme-aware shadow (light ~0.1 -> dark 0.26+) so the paywall/empty/error cards
     lift in dark like the reading frame, instead of a fixed near-black that vanishes */
  box-shadow: 0 22px 52px var(--reader-page-shadow);
  text-align: center;
  scroll-margin-top: max(24px, var(--reader-anchor-top-reserve, 64px));
  scroll-margin-bottom: max(96px, calc(env(safe-area-inset-bottom) + var(--reader-locked-boundary-bottom-reserve, 96px)));
  break-inside: avoid;
  page-break-inside: avoid;
}

.locked-page[data-reader-locked-boundary="access-gate"],
.locked-page[data-plaza-fellowship-locked-boundary-focus="access-gate-no-body"] {
  scroll-margin-bottom: max(112px, calc(env(safe-area-inset-bottom) + var(--reader-locked-boundary-bottom-reserve, 96px)));
}

/* The inter-chapter loading state is the same page about to hold the next chapter, not a paywall.
   Give it the reading page's top-aligned geometry and paper frame (mirroring .reader-content-inner)
   so the title stays at the top and the frame does not blink or bloom center-viewport before the
   body streams in — the one seam Kindle/Apple Books hold rock-steady.
   grant-propagation-waiting / body-unavailable / empty-work share the mirror: they directly
   succeed (or stand in for) the loading frame on the same chapter, and re-anchoring
   top->center or resizing the frame at the post-payment seam is the exact bloom this
   contract exists to prevent. The paywall access-gate keeps its own threshold composition. */
.locked-page[data-reader-locked-boundary="loading"],
.locked-page[data-reader-locked-boundary="grant-propagation-waiting"],
.locked-page[data-reader-locked-boundary="body-unavailable"],
.locked-page[data-reader-locked-boundary="empty-work"] {
  position: relative;
  align-content: start;
  width: min(100%, calc(var(--reader-width) + 72px));
  min-height: min(620px, calc(100dvh - 180px));
  padding: var(--reader-inner-top-padding, 46px) 32px var(--reader-effective-inner-bottom-padding);
  border-color: var(--reader-page-border);
  border-radius: 20px;
  background:
    linear-gradient(180deg, var(--reader-page-sheen), transparent 36%),
    radial-gradient(circle at top center, var(--paper-glow), transparent 42%),
    linear-gradient(135deg, var(--paper-breath), transparent 30%),
    var(--veil-bg);
  box-shadow: 0 14px 42px var(--reader-page-shadow), inset 0 1px 0 var(--reader-page-sheen);
}

.locked-page[data-reader-locked-boundary="loading"]::before,
.locked-page[data-reader-locked-boundary="grant-propagation-waiting"]::before,
.locked-page[data-reader-locked-boundary="body-unavailable"]::before,
.locked-page[data-reader-locked-boundary="empty-work"]::before {
  content: "";
  position: absolute;
  inset: 18px;
  /* Reset the base .locked-page::before eyebrow box (58x1px hairline, grid-centered) — a ::before
     has a single cascaded box, so without these the inset frame collapses. justify-self matters
     too: in a grid container it applies even to absolutely-positioned children, and the leaked
     `center` makes width:auto shrink to fit-content (0) instead of stretching between the insets. */
  width: auto;
  height: auto;
  background: none;
  justify-self: stretch;
  border: 1px solid var(--reader-page-rule);
  border-radius: 18px;
  opacity: 0.46;
  pointer-events: none;
}

/* In page/spread mode the reading surface is full-bleed and frameless
   (.reader-content-inner strips its border/radius/background there), so the
   same transient boundaries must not paint the scroll-mode paper card — that
   would blink card -> full-bleed the moment the body streams in. */
.reader-content.is-page-mode .locked-page[data-reader-locked-boundary="loading"],
.reader-content.is-spread-mode .locked-page[data-reader-locked-boundary="loading"],
.reader-content.is-page-mode .locked-page[data-reader-locked-boundary="grant-propagation-waiting"],
.reader-content.is-spread-mode .locked-page[data-reader-locked-boundary="grant-propagation-waiting"],
.reader-content.is-page-mode .locked-page[data-reader-locked-boundary="body-unavailable"],
.reader-content.is-spread-mode .locked-page[data-reader-locked-boundary="body-unavailable"],
.reader-content.is-page-mode .locked-page[data-reader-locked-boundary="empty-work"],
.reader-content.is-spread-mode .locked-page[data-reader-locked-boundary="empty-work"] {
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

.reader-content.is-page-mode .locked-page[data-reader-locked-boundary="loading"]::before,
.reader-content.is-spread-mode .locked-page[data-reader-locked-boundary="loading"]::before,
.reader-content.is-page-mode .locked-page[data-reader-locked-boundary="grant-propagation-waiting"]::before,
.reader-content.is-spread-mode .locked-page[data-reader-locked-boundary="grant-propagation-waiting"]::before,
.reader-content.is-page-mode .locked-page[data-reader-locked-boundary="body-unavailable"]::before,
.reader-content.is-spread-mode .locked-page[data-reader-locked-boundary="body-unavailable"]::before,
.reader-content.is-page-mode .locked-page[data-reader-locked-boundary="empty-work"]::before,
.reader-content.is-spread-mode .locked-page[data-reader-locked-boundary="empty-work"]::before {
  content: none;
}

.locked-page[data-reader-access-pass-dignity="asset-1015-quiet-threshold"],
.locked-page[data-reader-access-pass-dignity="asset-1045-book-threshold"] {
  gap: 8px;
  padding-block: 22px;
  border-radius: 8px;
  background:
    linear-gradient(180deg, transparent, color-mix(in srgb, var(--paper-glow) 62%, transparent) 120%),
    var(--paper);
  box-shadow: 0 14px 36px var(--reader-page-shadow);
}

.locked-page[data-reader-access-pass-dignity="asset-1015-quiet-threshold"][data-reader-locked-copy-deduped="true"],
.locked-page[data-reader-access-pass-dignity="asset-1045-book-threshold"][data-reader-locked-copy-deduped="true"] {
  gap: 7px;
}

.locked-page[data-reader-access-pass-dignity="asset-1015-quiet-threshold"][data-reader-locked-copy-deduped="true"] p.locked-policy-strip,
.locked-page[data-reader-access-pass-dignity="asset-1045-book-threshold"][data-reader-locked-copy-deduped="true"] p.locked-policy-strip {
  margin-top: -2px;
}

.locked-page[data-reader-access-pass-dignity="asset-1045-book-threshold"] .locked-actions {
  width: min(264px, 100%);
  gap: 8px;
  margin-top: 1px;
}

.locked-page[data-reader-access-pass-dignity="asset-1045-book-threshold"] .locked-actions .solid-button {
  min-height: 40px;
  border-color: color-mix(in srgb, var(--ink) 42%, var(--hairline));
  background: transparent;
  color: var(--ink);
  box-shadow: none;
}

@media (hover: hover) {
  .locked-page[data-reader-access-pass-dignity="asset-1045-book-threshold"] .locked-actions .solid-button:hover {
    border-color: color-mix(in srgb, var(--ink) 58%, var(--hairline));
    background: var(--button-wash);
    color: var(--ink);
  }
}

.locked-page[data-reader-access-pass-dignity="asset-1045-book-threshold"] .locked-actions .plain-button {
  min-height: 44px;
  color: var(--muted);
}

.locked-page[data-reader-access-pass-dignity="asset-1045-book-threshold"] .locked-manuscript-veil {
  min-height: clamp(72px, 12dvh, 118px);
  margin-top: 0;
  padding: 10px min(5%, 20px);
}

.locked-page::before {
  content: "";
  width: 58px;
  height: 1px;
  justify-self: center;
  background: var(--hairline);
}

.locked-page h1 {
  margin-bottom: 0;
  line-height: 1.5;
}

.locked-manuscript-veil {
  position: relative;
  display: grid;
  align-items: center;
  justify-self: center;
  width: min(42ch, 100%);
  min-height: clamp(118px, 22dvh, 198px);
  margin: 2px auto 0;
  padding: 22px min(6%, 28px);
  overflow: hidden;
  border-block: 1px solid rgba(121, 95, 61, 0.14);
  background:
    linear-gradient(180deg, transparent 0%, var(--paper-glow) 38%, transparent 100%),
    var(--paper);
  contain: paint;
  isolation: isolate;
  pointer-events: none;
}

.locked-manuscript-veil::before,
.locked-manuscript-veil::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.locked-manuscript-veil::before {
  background:
    linear-gradient(180deg, var(--paper) 0%, var(--paper-breath) 32%, var(--paper-glow) 78%, var(--paper) 100%),
    linear-gradient(90deg, var(--paper), transparent 18%, transparent 82%, var(--paper));
}

.locked-manuscript-veil::after {
  top: auto;
  height: 52%;
  background: linear-gradient(180deg, transparent, var(--paper-glow) 54%, var(--paper) 100%);
}

.locked-veil-sheet {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    repeating-linear-gradient(180deg, transparent 0 1.24em, rgba(121, 95, 61, 0.04) 1.24em 1.32em),
    linear-gradient(90deg, transparent, rgba(121, 95, 61, 0.055), transparent);
  opacity: 0.72;
}

.locked-veil-lines {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 0.76em;
  width: 100%;
}

.locked-veil-line {
  display: block;
  height: 0.64em;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(41, 35, 27, 0.32), rgba(41, 35, 27, 0.16) 58%, transparent);
  filter: blur(0.2px);
  opacity: 0.42;
}

.locked-veil-line-0 {
  width: 94%;
}

.locked-veil-line-1 {
  width: 78%;
}

.locked-veil-line-2 {
  width: 86%;
}

.locked-veil-line-3 {
  width: 62%;
}

.locked-veil-line-4 {
  width: 72%;
}

.locked-manuscript-veil[data-lock-gate="support"] {
  border-block-color: rgba(121, 95, 61, 0.19);
}

.locked-manuscript-veil[data-lock-gate="closed"] {
  opacity: 0.82;
}

html[data-theme="dark"] .locked-manuscript-veil {
  border-block-color: rgba(245, 244, 239, 0.1);
}

html[data-theme="dark"] .locked-veil-sheet {
  background:
    repeating-linear-gradient(180deg, transparent 0 1.24em, rgba(245, 244, 239, 0.032) 1.24em 1.32em),
    linear-gradient(90deg, transparent, rgba(245, 244, 239, 0.035), transparent);
}

html[data-theme="dark"] .locked-veil-line {
  background: linear-gradient(90deg, rgba(245, 244, 239, 0.28), rgba(245, 244, 239, 0.12) 58%, transparent);
  opacity: 0.34;
}

.locked-page p {
  color: var(--muted-strong);
  width: min(42ch, 100%);
  margin: 0 auto;
  line-height: 1.82;
}

.locked-primary-copy {
  color: var(--reader-ink);
}

/* This line is useful context, not manuscript prose. Keep it typographically quiet so the
   range, price, and single action remain the first mobile reading decision. */
.locked-page p.locked-access-note {
  width: min(34ch, 100%);
  color: var(--muted);
  font-family: var(--ui-font);
  font-size: 12.5px;
  line-height: 1.65;
  text-wrap: pretty;
}

.locked-page p.locked-policy-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 10px;
  width: min(38ch, 100%);
  margin-top: -4px;
  color: var(--muted);
  font-family: var(--ui-font);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.5;
}

.locked-policy-strip span {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  white-space: nowrap;
}

.locked-policy-strip span + span::before {
  content: "";
  width: 1px;
  height: 0.8em;
  background: var(--hairline-soft);
}

html[data-reader-viewport-shape^="compact"] .locked-page p.locked-policy-strip {
  gap: 5px 8px;
  font-size: 11px;
}

/* 받은 선물(수령자 정주행) — 이어읽기 드로어에서 결제 옵션보다 먼저 서는 블록.
   새 독자는 드로어부터 만나므로 선물이 첫눈에 들어와야 한다. */
.reading-gift-door {
  display: grid;
  gap: 10px;
  padding: 16px;
  margin-bottom: 16px;
  border: 1px solid var(--hairline-soft);
  border-radius: 14px;
}

.reading-gift-kicker {
  color: var(--muted-strong);
  font-family: var(--ui-font);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.45;
}

.reading-gift-lead {
  margin: 0;
  font-weight: 600;
}

.reading-gift-fact {
  margin: 0;
  color: var(--muted-strong);
  font-family: var(--ui-font);
  font-size: 12.5px;
}

/* 이름 확정 폼 — 안내·동의·버튼 사이 숨을 틔운다. */
.display-name-confirm {
  display: grid;
  gap: 14px;
}

.display-name-confirm > label {
  display: grid;
  gap: 8px;
}

.display-name-confirm-note {
  margin: 0;
}

/* 맡긴 사람 이름 줄 — 정책 스트립 바로 아래의 사람 캡션. 스트립(기계 사실)보다
   반 눈금 존재감을 주되 본문 크기로 새지 않게 잡는다. */
.locked-page p.locked-share-pack-entrustor {
  width: min(38ch, 100%);
  margin-top: -6px;
  color: var(--muted-strong);
  font-family: var(--ui-font);
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.6;
  text-align: center;
}

html[data-reader-viewport-shape^="compact"] .locked-page p.locked-share-pack-entrustor {
  font-size: 11px;
}

.locked-page[data-reader-access-pass-dignity="asset-1045-book-threshold"] p.locked-policy-strip[data-reader-threshold-policy-display="two-fact-bookmark-strip"] {
  width: min(28ch, 100%);
  gap: 5px 8px;
  margin-top: -6px;
  font-size: 11px;
  font-weight: 500;
}

.locked-page[data-reader-access-pass-dignity="asset-1045-book-threshold"] p.locked-policy-strip[data-reader-threshold-policy-display="two-fact-bookmark-strip"] span + span::before {
  width: 3px;
  height: 3px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--hairline-soft) 82%, transparent);
}

.locked-page p.locked-continuation-presence {
  display: grid;
  gap: 5px;
  width: min(38ch, 100%);
  margin-top: -2px;
  padding: 10px 0 0;
  border-top: 1px solid var(--hairline-soft);
  color: var(--muted);
  font-size: var(--control-small-font-size);
  line-height: var(--control-line-height);
}

.reader-support-presence-bridge,
.reader-membership-presence-bridge {
  display: grid;
  gap: 4px;
  width: min(38ch, 100%);
  margin: 0 auto;
  padding: 10px 0 0;
  border-top: 1px solid var(--hairline-soft);
  color: var(--muted);
  font-size: var(--control-small-font-size);
  line-height: var(--control-line-height);
}

.account-primary .reader-support-presence-bridge,
.account-primary .reader-membership-presence-bridge,
.support-primary .reader-support-presence-bridge {
  width: 100%;
  margin: -2px 0 2px;
}

.account-primary .reader-support-presence-bridge,
.account-primary .reader-membership-presence-bridge {
  margin-top: 0;
}

.next-window-sentence-traces {
  display: grid;
  gap: 12px;
  width: min(42ch, 100%);
  margin: 2px auto 0;
  padding: 14px 0 0;
  border-top: 1px solid var(--hairline-soft);
  color: var(--muted);
  text-align: left;
}

.locked-page .next-window-sentence-traces {
  justify-self: center;
  text-align: left;
}

.locked-page[data-reader-access-pass-dignity="asset-1045-book-threshold"] .next-window-sentence-traces {
  width: min(100%, 34ch);
  gap: 10px;
  margin-top: 0;
  padding-top: 10px;
  border-top-color: color-mix(in srgb, var(--hairline-soft) 72%, transparent);
}

.locked-page[data-reader-access-pass-dignity="asset-1045-book-threshold"] .next-window-sentence-trace-head {
  gap: 3px;
}

.locked-page[data-reader-access-pass-dignity="asset-1045-book-threshold"] .next-window-sentence-trace-head strong {
  color: var(--muted-strong);
  font-size: 12.5px;
  font-weight: 600;
}

.locked-page[data-reader-access-pass-dignity="asset-1045-book-threshold"] .next-window-sentence-trace-head p {
  color: var(--muted);
  font-size: 11px;
}

.locked-page[data-reader-access-pass-dignity="asset-1045-book-threshold"] .next-window-sentence-trace-list {
  gap: 6px;
}

.locked-page[data-reader-access-pass-dignity="asset-1045-book-threshold"] .next-window-sentence-trace-item {
  grid-template-columns: minmax(0, 1fr);
  min-height: 42px;
  padding: 7px 0;
  border-left-color: var(--hairline-soft);
}

.locked-page[data-reader-access-pass-dignity="asset-1045-book-threshold"] .next-window-sentence-trace-rank {
  display: none;
}

.locked-page[data-reader-access-pass-dignity="asset-1045-book-threshold"] .next-window-sentence-trace-teaser {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  color: var(--muted-strong);
  /* The quoted manuscript line is the only literary content on the threshold.
     It carries the emphasis tier, above the chips and notes around it. */
  font-size: 14px;
  line-height: 1.58;
  overflow-wrap: normal;
  text-wrap: pretty;
  word-break: keep-all;
}

.locked-page[data-reader-access-pass-dignity="asset-1045-book-threshold"] .next-window-sentence-trace-clue,
.locked-page[data-reader-access-pass-dignity="asset-1045-book-threshold"] .next-window-sentence-trace-main small,
.locked-page[data-reader-access-pass-dignity="asset-1045-book-threshold"] .next-window-sentence-trace-hidden-note {
  color: var(--muted);
  font-size: 11px;
  line-break: loose;
  overflow-wrap: normal;
  word-break: keep-all;
}

.account-primary .next-window-sentence-traces,
.support-primary .next-window-sentence-traces {
  width: 100%;
  margin: 2px 0;
}

.next-window-sentence-trace-head {
  display: grid;
  gap: 5px;
}

.next-window-sentence-trace-head .eyebrow {
  width: 100%;
  margin: 0;
  color: var(--muted);
  text-align: left;
}

.next-window-sentence-trace-head strong {
  color: var(--ink);
  font-size: 12.5px;
  line-height: 1.5;
  letter-spacing: 0;
}

.next-window-sentence-trace-head p,
.next-window-sentence-trace-empty {
  width: 100%;
  margin: 0;
  color: var(--muted-strong);
  font-size: 12px;
  line-height: 1.7;
}

.next-window-sentence-trace-folded-disclosure {
  display: grid;
  gap: 7px;
}

.next-window-sentence-trace-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 34px;
  cursor: pointer;
  list-style: none;
}

.next-window-sentence-trace-summary::-webkit-details-marker {
  display: none;
}

.next-window-sentence-trace-summary::after {
  content: "";
  width: 0.48em;
  height: 0.48em;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  color: var(--muted);
  opacity: 0.44;
  transform: translateY(-0.08em) rotate(45deg);
}

.next-window-sentence-trace-folded-disclosure[open] .next-window-sentence-trace-summary::after {
  opacity: 0.34;
  transform: translateY(0.1em) rotate(-135deg);
}

.next-window-sentence-trace-folded-body {
  display: grid;
  gap: 8px;
  padding-top: 4px;
}

.account-primary .next-window-sentence-traces-folded {
  margin: 0;
}

.account-primary .account-folded-memory-return {
  gap: 0;
  padding: 2px 0;
  border-top: 0;
}

.account-primary .account-folded-memory-return .next-window-sentence-trace-summary {
  min-height: 28px;
  padding: 1px 0 1px 10px;
  border-left: 1px solid var(--hairline-soft);
}

.account-primary .account-folded-memory-return[data-account-sentence-traces-folded-place-cue="return-place-only"] .next-window-sentence-trace-summary {
  min-height: 30px;
  padding-left: 9px;
}

.account-primary .next-window-sentence-traces-folded .next-window-sentence-trace-head {
  gap: 2px;
}

.account-primary .next-window-sentence-traces-folded .next-window-sentence-trace-head strong {
  color: var(--muted-strong);
  font-size: 12.5px;
}

.account-primary .account-folded-memory-return .next-window-sentence-trace-head strong {
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.55;
}

.account-primary .account-folded-memory-return[data-account-sentence-traces-folded-place-cue="return-place-only"] .next-window-sentence-trace-head strong {
  color: var(--muted-strong);
  font-size: 11.75px;
}

.account-primary .next-window-sentence-traces-folded .next-window-sentence-trace-head p {
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.55;
}

.next-window-sentence-trace-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.next-window-sentence-trace-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 9px;
  min-height: 52px;
  padding: 10px 0 10px 10px;
  border-left: 1px solid color-mix(in srgb, var(--accent) 36%, var(--hairline));
}

.next-window-sentence-trace-main {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.next-window-sentence-trace-main strong {
  color: var(--reader-ink);
  font-size: 12.5px;
  line-height: 1.45;
}

.next-window-sentence-trace-teaser {
  margin: 0;
  color: var(--reader-ink);
  font-size: 14px;
  line-height: 1.72;
  overflow-wrap: anywhere;
  text-wrap: pretty;
}

.next-window-sentence-trace-clue {
  color: var(--muted-strong);
  font-size: 11px;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.next-window-sentence-trace-dissolve {
  display: grid;
  gap: 4px;
  width: min(100%, 22ch);
  padding: 2px 0;
}

.next-window-sentence-trace-dissolve span {
  display: block;
  height: 5px;
  border-radius: 999px;
  background:
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--reader-ink) 16%, transparent),
      color-mix(in srgb, var(--reader-ink) 7%, transparent) 72%,
      transparent
    );
}

.next-window-sentence-trace-dissolve span:nth-child(2) {
  width: 76%;
  opacity: 0.72;
}

.next-window-sentence-trace-dissolve span:nth-child(3) {
  width: 58%;
  opacity: 0.48;
}

.next-window-sentence-trace-main small,
.next-window-sentence-trace-main em {
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.next-window-sentence-trace-main em {
  color: var(--muted-strong);
}

.next-window-sentence-trace-hidden-note {
  margin: -2px 0 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.6;
}

.locked-continuation-presence-kicker {
  color: var(--muted-strong);
  font-size: 11px;
  line-height: 1.45;
}

.locked-continuation-presence-count {
  color: var(--ink);
  /* Emphasis tier, matching the quoted manuscript line. */
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0;
}

.locked-continuation-presence[data-reader-support-presence-count="0"] .locked-continuation-presence-count {
  color: var(--muted-strong);
  font-weight: 500;
}

.locked-continuation-presence-copy {
  overflow-wrap: anywhere;
}

.locked-continuation-presence-next {
  color: var(--muted-strong);
  font-size: 11px;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.locked-actions {
  display: grid;
  gap: 10px;
  width: min(360px, 100%);
  margin: 0 auto;
}

.locked-actions > * {
  width: 100%;
}

.locked-support-action:not(.solid-button) {
  border-color: var(--hairline);
  background: transparent;
  box-shadow: none;
}

@media (hover: hover) {
  .locked-support-action:not(.solid-button):hover {
    background: linear-gradient(180deg, transparent, var(--button-wash));
  }
}

.locked-continuation-disclosure {
  width: min(360px, 100%);
  margin: -2px auto 0;
  text-align: left;
  border-top-color: var(--hairline);
}

.locked-continuation-disclosure summary {
  padding: 0 2px;
  min-height: 32px;
}

.locked-continuation-disclosure .quiet-disclosure-body {
  justify-items: center;
}

.locked-page p.locked-continuation-copy {
  width: 100%;
  color: var(--muted);
  font-size: var(--control-small-font-size);
  line-height: var(--control-line-height);
}

html[data-reading-mode="page"] .locked-manuscript-veil,
html[data-reading-mode="spread"] .locked-manuscript-veil {
  width: min(36ch, 100%);
  min-height: clamp(112px, 18dvh, 170px);
}

html[data-reader-viewport-shape="compact-landscape"] .locked-page {
  min-height: clamp(10rem, 54svh, 14rem);
  margin-bottom: max(2.8rem, calc(env(safe-area-inset-bottom) + var(--reader-locked-boundary-compact-bottom-reserve, 46px)));
  scroll-margin-top: max(24px, var(--reader-anchor-top-reserve, 42px));
  scroll-margin-bottom: max(68px, calc(env(safe-area-inset-bottom) + var(--reader-locked-boundary-compact-bottom-reserve, 46px)));
}

@media (max-width: 720px) {
  .locked-page {
    gap: 14px;
    width: min(42rem, 100%);
    min-height: 56svh;
    margin-bottom: max(3.25rem, calc(env(safe-area-inset-bottom) + var(--reader-locked-boundary-bottom-reserve, 96px)));
    padding: 24px 12px max(24px, calc(env(safe-area-inset-bottom) + 16px));
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .locked-page[data-reader-locked-boundary="access-gate"],
  .locked-page[data-plaza-fellowship-locked-boundary-focus="access-gate-no-body"] {
    scroll-margin-bottom: max(112px, calc(env(safe-area-inset-bottom) + var(--reader-locked-boundary-bottom-reserve, 96px)));
  }

  .locked-page[data-reader-access-pass-dignity="asset-1015-quiet-threshold"],
  .locked-page[data-reader-access-pass-dignity="asset-1045-book-threshold"] {
    gap: 13px;
    background: transparent;
    box-shadow: none;
  }

  .locked-page[data-reader-access-pass-dignity="asset-1045-book-threshold"] .locked-actions {
    width: min(252px, 100%);
  }

  .locked-page[data-reader-access-pass-dignity="asset-1045-book-threshold"] .locked-actions .solid-button {
    min-height: 38px;
    padding-block: 7px;
  }

  .locked-manuscript-veil {
    width: min(31ch, 100%);
    min-height: 124px;
    padding: 18px min(7%, 22px);
  }

  .locked-veil-lines {
    gap: 0.66em;
  }

  .locked-veil-line:nth-child(n+7) {
    display: none;
  }

  .next-window-sentence-traces {
    width: min(100%, 34ch);
    padding-top: 12px;
  }

  .next-window-sentence-trace-item {
    grid-template-columns: 22px minmax(0, 1fr);
    min-height: 48px;
    padding-left: 8px;
  }

  .next-window-sentence-trace-rank {
    width: 22px;
    height: 22px;
  }
}

/* On short portrait phones the generated, body-free veil is still a useful book cue, but it
   must never push the actual decision below the first viewport. Preserve DOM semantics and
   move only the decorative cue behind the primary action; everything after the action keeps
   its original relative order through the general-sibling rule. */
html[data-reader-viewport-shape="compact-narrow-short"]
  .locked-page[data-reader-locked-boundary="access-gate"][data-reader-access-pass-dignity="asset-1045-book-threshold"] {
  gap: 8px;
  padding-block: 12px;
}

html[data-reader-viewport-shape="compact-narrow-short"]
  .locked-page[data-reader-locked-boundary="access-gate"][data-reader-access-pass-dignity="asset-1045-book-threshold"]
  > .locked-actions {
  order: 1;
}

html[data-reader-viewport-shape="compact-narrow-short"]
  .locked-page[data-reader-locked-boundary="access-gate"][data-reader-access-pass-dignity="asset-1045-book-threshold"]
  > .locked-manuscript-veil {
  order: 2;
  min-height: 72px;
  padding-block: 8px;
}

html[data-reader-viewport-shape="compact-narrow-short"]
  .locked-page[data-reader-locked-boundary="access-gate"][data-reader-access-pass-dignity="asset-1045-book-threshold"]
  > .locked-actions ~ * {
  order: 3;
}

html[data-reader-viewport-shape="compact-narrow-short"]
  .locked-page[data-reader-locked-boundary="access-gate"][data-reader-access-pass-dignity="asset-1045-book-threshold"]
  .locked-veil-line:nth-child(n+4) {
  display: none;
}

.reader-tap-zone {
  position: absolute;
  inset: 18% var(--reader-tap-zone-side-inset) 20%;
  z-index: 1;
  border: 0;
  background: transparent;
}

.reader-surface.is-chrome-visible .reader-tap-zone,
.drawer.is-open ~ .sentence-sheet {
  pointer-events: none;
}

/* Pointer-only shortcut (aria-hidden, tabindex=-1); never paint a focus box over the manuscript. */
.reader-tap-zone:focus,
.reader-tap-zone:focus-visible {
  outline: none;
}

.quiet-hint {
  position: absolute;
  left: 50%;
  bottom: calc(24px + env(safe-area-inset-bottom));
  z-index: 5;
  width: min(var(--reader-quiet-hint-width), calc(100% - 48px));
  padding: 7px 12px;
  border: 1px solid var(--stage-border);
  border-radius: 999px;
  background: linear-gradient(180deg, var(--paper-glow), transparent 125%);
  transform: translateX(-50%);
  color: var(--muted);
  font-family: var(--ui-font);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
  text-wrap: balance;
  opacity: 0.38;
  pointer-events: none;
  transition: opacity 220ms ease;
}

.reader-surface.is-chrome-visible .quiet-hint,
.reader-surface.has-started .quiet-hint {
  opacity: 0;
}

@media (hover: hover) and (pointer: fine) {
  .quiet-hint {
    opacity: 0;
  }
}

.drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  height: 100vh;
  height: 100svh;
  height: 100dvh;
  height: var(--reader-drawer-height, 100dvh);
  max-height: 100svh;
  max-height: 100dvh;
  max-height: var(--reader-drawer-height, 100dvh);
  z-index: 20;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: min(456px, 100%);
  max-width: 100%;
  overflow: hidden;
  border-left: 1px solid var(--hairline-soft);
  background:
    linear-gradient(180deg, var(--raised), var(--paper-deep)),
    var(--raised);
  font-family: var(--ui-font);
  font-size: var(--control-font-size);
  font-weight: 600;
  line-height: 1.62;
  box-shadow: -22px 0 56px var(--chrome-shadow);
  transform: translateX(102%);
  visibility: hidden;
  transition:
    transform 220ms cubic-bezier(0.2, 0.72, 0.2, 1),
    visibility 0s linear 220ms;
}

.drawer.is-open {
  transform: translateX(0);
  visibility: visible;
  transition:
    transform 220ms cubic-bezier(0.2, 0.72, 0.2, 1),
    visibility 0s linear 0s;
}

.drawer.drawer-author-room {
  left: 0;
  width: 100%;
  max-width: none;
  border-left: 0;
  background:
    linear-gradient(180deg, rgba(251, 251, 250, 0.98), rgba(242, 238, 232, 0.96)),
    var(--raised);
  box-shadow: none;
  transform: translateY(101%);
  /* 작가실 서랍은 라이트 고정 표면이다 — 전역 다크 테마에서도 이 안의 토큰을 라이트로
     되돌려, 밝은 종이 위에 밝은 글자가 겹쳐 읽히지 않게 한다. */
  color-scheme: light;
  --paper: #fbfbfa;
  --paper-deep: #f6f6f2;
  --paper-edge: rgba(20, 20, 20, 0.045);
  --paper-breath: rgba(255, 255, 253, 0.76);
  --ink: #141414;
  --reader-ink: #141414;
  --reader-heading-ink: var(--muted-strong);
  --muted: #686862;
  --muted-strong: #4a4a45;
  --hairline: #d9d9d2;
  --hairline-soft: rgba(20, 20, 20, 0.09);
  --wash: #f2f2ee;
  --raised: #fffffd;
  --accent: #151515;
  --accent-soft: #e8e8e2;
  --green: #151515;
  --pressed-ink: rgba(20, 20, 20, 0.78);
  --focus: rgba(21, 21, 21, 0.55);
  --button-wash: rgba(20, 20, 20, 0.035);
  --shadow: rgba(0, 0, 0, 0.08);
  --chrome-shadow: rgba(0, 0, 0, 0.1);
  --highlight-bg: rgba(21, 21, 21, 0.06);
  --highlight-line: rgba(21, 21, 21, 0.34);
  --paper-glow: rgba(255, 255, 255, 0.76);
  --stage-border: rgba(20, 20, 20, 0.06);
  --stage-line: rgba(20, 20, 20, 0.12);
  --stage-shadow: rgba(12, 12, 12, 0.12);
  --bar-bg: rgba(251, 251, 250, 0.88);
  --veil-bg: rgba(255, 255, 253, 0.84);
}

.drawer.drawer-author-room.is-open {
  transform: translateY(0);
}

.drawer-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  min-width: 0;
  border-bottom: 1px solid var(--hairline-soft);
  padding: max(22px, env(safe-area-inset-top)) 22px 17px;
}

.drawer-header > div {
  min-width: 0;
}

.drawer-header h2 {
  margin: 0;
  color: var(--ink);
  font-size: var(--control-title-font-size);
  font-weight: 700;
  overflow-wrap: break-word;
  word-break: keep-all;
}

.drawer-header h2::after {
  content: "";
  display: block;
  width: 40px;
  height: 1px;
  margin-top: 10px;
  background: var(--hairline);
}

.eyebrow {
  margin: 0 0 6px;
  color: var(--muted-strong);
  font-family: var(--ui-font);
  font-size: 12px;
  font-weight: 700;
}

.drawer-body {
  display: grid;
  align-content: start;
  gap: 16px;
  min-width: 0;
  min-height: 0;
  max-height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable;
  scroll-padding-bottom: max(180px, calc(env(safe-area-inset-bottom) + 144px));
  scroll-padding-bottom: var(--reader-drawer-reach-padding);
  touch-action: pan-y;
  padding: 22px 22px max(180px, calc(env(safe-area-inset-bottom) + 144px));
  padding: 22px 22px var(--reader-drawer-reach-padding);
}

.drawer.drawer-author-room .drawer-header,
.drawer.drawer-author-room .drawer-body {
  width: min(1320px, calc(100% - 32px));
  margin-inline: auto;
}

.drawer.drawer-author-room .drawer-header {
  padding-right: 0;
  padding-left: 0;
}

.drawer.drawer-author-room .drawer-body {
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: start;
  gap: 22px 18px;
  padding-right: 0;
  padding-left: 0;
}

.drawer.drawer-author-room .drawer-section {
  grid-column: span 6;
  min-width: 0;
  max-width: 100%;
  border-bottom: 1px solid var(--hairline-soft);
  padding-bottom: 22px;
}

.drawer.drawer-author-room .author-room-doorway,
.drawer.drawer-author-room [data-drawer-section="author-operations-command-center"],
.drawer.drawer-author-room [data-drawer-section="author-solo-operating-loop"],
.drawer.drawer-author-room [data-drawer-section="author-solo-decision-rail"],
.drawer.drawer-author-room [data-drawer-section="author-solo-execution-runbook"],
.drawer.drawer-author-room [data-drawer-section="author-solo-live-operation-console"],
.drawer.drawer-author-room [data-drawer-section="author-solo-room-switchboard"],
.drawer.drawer-author-room [data-drawer-section="author-solo-operating-ledger"],
.drawer.drawer-author-room [data-drawer-section="author-solo-operating-queue"],
.drawer.drawer-author-room [data-drawer-section="author-solo-signal-triage"],
  .drawer.drawer-author-room [data-drawer-section="author-solo-room-runbook"],
  .drawer.drawer-author-room [data-drawer-section="author-solo-room-decision-drill"],
  .drawer.drawer-author-room [data-drawer-section="author-solo-room-evidence-closure"],
  .drawer.drawer-author-room [data-drawer-section="author-solo-room-action-preflight"],
  .drawer.drawer-author-room [data-drawer-section="author-solo-room-active-execution"],
  .drawer.drawer-author-room [data-drawer-section="author-solo-room-after-action"],
  .drawer.drawer-author-room [data-drawer-section="author-solo-room-continuity"],
  .drawer.drawer-author-room [data-drawer-section="author-solo-room-resume-decision"],
  .drawer.drawer-author-room [data-drawer-section="author-solo-room-decision-receipt"],
  .drawer.drawer-author-room [data-drawer-section="author-solo-operating-protocol"],
.drawer.drawer-author-room [data-drawer-section="author-command-deck"],
.drawer.drawer-author-room [data-drawer-section="author-room-workboard"],
.drawer.drawer-author-room [data-drawer-section="author-machine-room"],
.drawer.drawer-author-room .author-room-focus,
.drawer.drawer-author-room .author-control-room,
.drawer.drawer-author-room [data-drawer-section="promotion-room"],
.drawer.drawer-author-room [data-drawer-section="site-menu-room"],
.drawer.drawer-author-room [data-drawer-section="member-room"],
.drawer.drawer-author-room [data-drawer-section="payment-ledger-room"],
.drawer.drawer-author-room [data-drawer-section="reader-analytics-lab"],
.drawer.drawer-author-room [data-drawer-section="reader-analytics-progress"],
.drawer.drawer-author-room [data-drawer-section="current-chapter"],
.drawer.drawer-author-room [data-drawer-section="new-chapter"],
.drawer.drawer-author-room [data-drawer-section="author-command-stack"],
.drawer.drawer-author-room [data-drawer-section="revisions"] {
  grid-column: 1 / -1;
}

@media (hover: hover) {
}

@media (max-width: 720px) {
}

@media (max-width: 720px) {
  .drawer.drawer-author-room .author-operations-head,
  .drawer.drawer-author-room .author-operations-first-thirty-head {
    grid-template-columns: 1fr;
  }

  .drawer.drawer-author-room .author-operations-asset-strip {
    justify-content: flex-start;
    max-width: 100%;
  }

  .drawer.drawer-author-room .author-operations-first-thirty-items {
    grid-template-columns: 1fr;
  }

  .drawer.drawer-author-room .author-operations-first-thirty-boundary {
    grid-template-columns: 1fr;
  }

  .drawer.drawer-author-room .author-operations-first-thirty-item {
    min-height: 0;
  }

  .drawer.drawer-author-room .author-operations-first-thirty-foot {
    display: grid;
    grid-template-columns: 1fr;
    justify-items: start;
  }
}

@media (max-width: 760px) {
}

@media (max-width: 760px) {
}

@media (max-width: 920px) {
}

@media (max-width: 920px) {
}

@media (max-width: 560px) {
}

.drawer.drawer-author-room[data-author-room-active] .drawer-section[data-author-room] {
  display: none;
}

.drawer.drawer-author-room[data-author-room-active="home"] .drawer-section[data-author-room~="home"],
.drawer.drawer-author-room[data-author-room-active="studio"] .drawer-section[data-author-room~="studio"],
.drawer.drawer-author-room[data-author-room-active="strategy"] .drawer-section[data-author-room~="strategy"],
.drawer.drawer-author-room[data-author-room-active="promotion"] .drawer-section[data-author-room~="promotion"],
.drawer.drawer-author-room[data-author-room-active="manuscript"] .drawer-section[data-author-room~="manuscript"],
.drawer.drawer-author-room[data-author-room-active="site"] .drawer-section[data-author-room~="site"],
.drawer.drawer-author-room[data-author-room-active="members"] .drawer-section[data-author-room~="members"],
.drawer.drawer-author-room[data-author-room-active="payments"] .drawer-section[data-author-room~="payments"],
.drawer.drawer-author-room[data-author-room-active="operations"] .drawer-section[data-author-room~="operations"],
.drawer.drawer-author-room[data-author-room-active="machine"] .drawer-section[data-author-room~="machine"],
.drawer.drawer-author-room[data-author-room-active="launch"] .drawer-section[data-author-room~="launch"],
.drawer.drawer-author-room[data-author-room-active="security"] .drawer-section[data-author-room~="security"] {
  display: grid;
}

.drawer.drawer-author-room[data-author-writing-focus="active"] .drawer-section[data-author-room] {
  display: none;
}

.drawer.drawer-author-room[data-author-writing-focus="active"][data-author-writing-focus-target="current-chapter"] [data-drawer-section="current-chapter"],
.drawer.drawer-author-room[data-author-writing-focus="active"][data-author-writing-focus-target="new-chapter"] [data-drawer-section="new-chapter"] {
  display: grid;
  grid-column: 1 / -1;
}

.drawer.drawer-author-room[data-author-writing-focus="active"] .drawer-body {
  width: min(980px, calc(100% - 32px));
}

.drawer.drawer-author-room[data-author-writing-focus="active"] .author-draft-toolbar {
  position: sticky;
  top: 0;
  z-index: 4;
  background: color-mix(in srgb, var(--raised) 92%, var(--paper) 8%);
}

.drawer.drawer-author-room[data-author-writing-focus="active"] #authorChapterBodyInput,
.drawer.drawer-author-room[data-author-writing-focus="active"] #authorNewBodyInput {
  min-height: min(70vh, 760px);
}

.drawer.is-open,
.drawer.is-open .drawer-body,
.drawer.is-open .drawer-body section,
.drawer.is-open .drawer-body details,
.drawer.is-open .drawer-body button,
.drawer.is-open .drawer-body a,
.drawer.is-open .drawer-body summary,
.drawer.is-open .drawer-body label,
.drawer.is-open .drawer-body p,
.drawer.is-open .drawer-body small,
.drawer.is-open .drawer-body strong,
.drawer.is-open .drawer-body span,
.drawer.is-open .drawer-body dl,
.drawer.is-open .drawer-body dt,
.drawer.is-open .drawer-body dd,
.drawer.is-open .drawer-body div {
  touch-action: pan-y;
}

.drawer.is-open .drawer-body input,
.drawer.is-open .drawer-body textarea,
.drawer.is-open .drawer-body select {
  touch-action: auto;
}

.drawer-section {
  display: grid;
  gap: 12px;
  min-width: 0;
  border-bottom: 1px solid var(--hairline-soft);
  padding-bottom: 22px;
}

.drawer p,
.drawer small,
.drawer strong,
.drawer label,
.drawer summary,
.drawer h3,
.drawer button {
  max-width: 100%;
  min-width: 0;
  overflow-wrap: break-word;
  white-space: normal;
}

.drawer p,
.drawer small,
.drawer summary,
.drawer h3 {
  word-break: keep-all;
  line-break: loose;
}

.drawer.drawer-author-room .author-operations-first-thirty,
.drawer.drawer-author-room .author-operations-first-thirty * {
  min-width: 0;
  max-width: 100%;
}

.drawer.drawer-author-room .author-operations-first-thirty-item p,
.drawer.drawer-author-room .author-operations-first-thirty-item strong,
.drawer.drawer-author-room .author-operations-first-thirty-boundary-item p,
.drawer.drawer-author-room .author-operations-first-thirty-boundary-item strong,
.drawer.drawer-author-room .author-operations-first-thirty-boundary-item span,
.drawer.drawer-author-room .author-operations-first-thirty-foot small {
  overflow-wrap: break-word;
  word-break: keep-all;
  line-break: loose;
}

.drawer:not(.drawer-author-room) .quiet-disclosure-body,
.drawer:not(.drawer-author-room) .quiet-disclosure-body > *,
.drawer:not(.drawer-author-room) .operations-note,
.drawer:not(.drawer-author-room) .account-primary-copy,
.drawer:not(.drawer-author-room) .account-return-copy,
.drawer:not(.drawer-author-room) .account-local-bookmark-note,
.drawer:not(.drawer-author-room) .reader-assurance-ledger,
.drawer:not(.drawer-author-room) .reader-assurance-ledger > *,
.drawer:not(.drawer-author-room) .reader-shortcut-guide,
.drawer:not(.drawer-author-room) .support-opening,
.drawer:not(.drawer-author-room) .support-surface-note,
.drawer:not(.drawer-author-room) .support-review-facts dd,
.drawer:not(.drawer-author-room) .support-detail-note,
.drawer:not(.drawer-author-room) .support-detail-hint,
.drawer:not(.drawer-author-room) .support-privacy-note,
.drawer:not(.drawer-author-room) .reading-detail-note,
.drawer:not(.drawer-author-room) .support-service-period-note,
.drawer:not(.drawer-author-room) .support-payment-nature-note {
  max-width: 100%;
  min-width: 0;
  overflow-wrap: anywhere;
}

.drawer-section:last-child {
  border-bottom: 0;
}

.drawer-section h3 {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.42;
}

.compact-primary {
  gap: 11px;
}

.account-manuscript-stack,
.account-primary-stack {
  display: grid;
  gap: 10px;
}

/* Receipts moved to the foot of the account panel as a quiet, low-emphasis link — it should
   never read as a primary call to action (no full-width button, no bold weight). */
.account-receipts-entry {
  display: flex;
  justify-content: flex-start;
}

.account-receipts-link.quiet-button {
  min-height: 0;
  padding: 2px 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, var(--muted) 40%, transparent);
}

.account-receipts-link.quiet-button:hover,
.account-receipts-link.quiet-button:focus-visible {
  color: var(--ink);
  background: transparent;
  text-decoration-color: currentColor;
}

.account-entry-card,
.account-return-note,
.account-secondary-shell {
  position: relative;
  overflow: visible;
}

.drawer[data-drawer-kind="account"] .drawer-header h2 {
  font-size: 19px;
  line-height: 1.22;
}

.drawer[data-drawer-kind="account"] .drawer-header h2::after {
  width: 32px;
  margin-top: 8px;
}

.account-primary-copy {
  margin: 0;
  width: min(100%, 34ch);
}

.account-entry-card {
  display: grid;
  gap: 10px;
  border: 0;
  border-top: 1px solid var(--hairline-soft);
  border-radius: 0;
  background: transparent;
  padding: 10px 0 0;
  box-shadow: none;
}

.account-primary .reader-journey-card,
.account-primary .reader-presence-card,
.account-primary .reader-checkpoint-quiet {
  border: 0;
  border-top: 1px solid var(--hairline-soft);
  border-radius: 0;
  background: transparent;
  padding: 10px 0 0;
  box-shadow: none;
  overflow: visible;
}

.account-primary .reader-presence-card::before {
  content: none;
}

.account-primary .reader-presence-support {
  padding-top: 8px;
}

.account-entry-card .solid-button,
.account-entry-card .quiet-button {
  justify-self: stretch;
}

.account-entry-card .account-oauth-primary-button {
  justify-self: center;
  width: 220px;
  max-width: 100%;
  min-height: 34px;
  padding: 5px 14px;
  border-radius: 6px;
  font-size: var(--control-small-font-size);
  font-weight: 600;
  box-shadow: none;
}

.account-entry-line {
  margin: 0;
}

/* 브랜드 심볼을 단 로그인 버튼 (PD-2026-08-30, 후보 "나-안전").
   카카오 가이드는 심볼 없는 버튼을 금지하고 심볼의 형태·비율·색 변경도 금지한다.
   컨테이너 재구성은 허용하므로 심볼만 규정대로 두고 나머지는 이 공간의 잉크로 세운다.
   심볼은 칩 안에 넣어 원래 색을 그대로 지키면서도 화면이 노랗게 물들지 않게 한다. */
.oauth-provider-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
}

/* 심사가 남은 문에 붙는 한 줄. 버튼 바로 아래에서 낮게 말하고, 버튼 사이
   간격을 늘리지 않는다 — 이유를 말하는 것이지 경고를 세우는 것이 아니다. */
.oauth-provider-review-note {
  margin: 4px 0 0;
  font-family: var(--ui-font);
  font-size: 12px;
  line-height: 1.55;
  text-wrap: pretty;
}


.oauth-provider-label {
  display: inline-block;
}

.oauth-brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 19px;
  height: 19px;
  border-radius: 5px;
}

.oauth-brand-mark svg {
  width: 12px;
  height: 12px;
  display: block;
}

.oauth-brand-mark-kakao {
  background: #fee500;
}

.oauth-brand-mark-kakao svg {
  fill: #000000;
}

.oauth-brand-mark-naver {
  background: #03c75a;
}

.oauth-brand-mark-naver svg {
  fill: #ffffff;
}

.account-entry-card .account-oauth-primary-button .oauth-brand-mark {
  width: 17px;
  height: 17px;
  border-radius: 4px;
}

.account-entry-card .account-oauth-primary-button .oauth-brand-mark svg {
  width: 11px;
  height: 11px;
}

/* 되는 문이 화면에 함께 있으면 "다른 브라우저로 여세요"는 곁가지다. 막다른 길일 때만
   제목이 굵게 선다 — 그 두 상태를 같은 무게로 그리면 되는 문이 안 보인다. */
.oauth-browser-notice[data-oauth-browser-notice-role="secondary"] strong {
  font-size: 13px;
  font-weight: 600;
  color: var(--muted-strong, var(--muted));
}

.oauth-browser-notice[data-oauth-browser-notice-role="secondary"] {
  margin-top: 2px;
}

.account-return-note {
  display: block;
  border-left: 1px solid var(--hairline);
  padding: 2px 0 2px 10px;
}

.account-entitlement-summary {
  display: block;
  border-left: 1px solid var(--hairline-soft);
  padding: 2px 0 2px 10px;
}

.account-entitlement-summary small {
  display: block;
  max-width: min(34ch, 100%);
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.58;
  text-wrap: pretty;
}

.account-return-copy {
  margin: 0;
  max-width: min(34ch, 100%);
  color: var(--muted);
  font-size: 12px;
  line-height: 1.58;
  text-wrap: pretty;
}

.account-neutral-safe-line {
  border-left-color: var(--hairline-soft);
  opacity: 0.88;
}

.account-neutral-safe-line .account-return-copy {
  color: var(--muted);
  font-size: 11.5px;
}

.account-secondary-shell {
  display: grid;
  gap: 0;
  border: 0;
  border-top: 1px solid var(--hairline-soft);
  border-radius: 0;
  background: transparent;
  padding: 14px 0 0;
  box-shadow: none;
}

.account-secondary-shell::before {
  content: none;
}

.account-secondary-shell > * {
  position: relative;
  z-index: auto;
}

.account-secondary-shell .quiet-disclosure {
  gap: 8px;
  border-top: 1px solid var(--hairline-soft);
  padding: 12px 0;
}

.account-secondary-shell .quiet-disclosure:first-child {
  border-top: 0;
  padding-top: 0;
}

.account-secondary-shell .quiet-disclosure summary {
  color: var(--muted-strong);
  min-height: 34px;
  padding: 0 1px;
  font-size: 14px;
  line-height: 1.5;
}

.account-secondary-shell .quiet-disclosure-body {
  gap: 8px;
  padding-top: 1px;
  font-size: 13px;
  line-height: 1.64;
}

.account-secondary-shell .quiet-disclosure-body .muted {
  max-width: min(42ch, 100%);
  color: var(--muted);
  font-size: 13px;
  line-height: 1.68;
  text-wrap: pretty;
}

.account-tool-cluster {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--hairline-soft);
  padding-top: 0;
}

.account-tool-cluster:first-child {
  border-top: 0;
  padding-top: 0;
}

.account-tool-card {
  display: grid;
  gap: 8px;
  border: 0;
  border-top: 1px solid var(--hairline-soft);
  border-radius: 0;
  background: transparent;
  padding: 13px 2px 14px;
  box-shadow: none;
}

.account-tool-card:first-child {
  border-top: 0;
}

.account-tool-copy {
  display: grid;
  gap: 3px;
}

.account-tool-title {
  color: var(--muted-strong);
  font-size: 13px;
  line-height: 1.5;
}

.account-tool-note {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.62;
  text-wrap: pretty;
}

.account-tool-card .quiet-button,
.account-tool-card .solid-button {
  justify-self: stretch;
}

.account-secondary-shell .account-tool-card {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 5px 12px;
  padding: 11px 2px 12px;
}

.account-secondary-shell .account-tool-copy {
  grid-column: 1;
}

.account-secondary-shell .account-tool-card .compact-account-action {
  grid-column: 2;
  justify-self: end;
  align-self: center;
  width: auto;
  min-height: 38px;
  border-color: rgba(22, 22, 20, 0.12);
  padding: 5px 10px;
  font-size: 12px;
  line-height: 1.25;
  white-space: nowrap;
}

.account-secondary-shell .reader-shortcut-guide {
  grid-column: 1 / -1;
}

.account-local-bookmark-note {
  background: transparent;
}

.account-operations-shell .quiet-disclosure-body {
  gap: 9px;
  border-left: 1px solid rgba(117, 88, 51, 0.12);
  padding-left: 10px;
}

.account-operations-shell .operations-note {
  margin: 0;
  text-wrap: pretty;
}

.account-deletion-disclosure {
  margin-top: 2px;
}

.account-deletion-body {
  gap: 8px;
}

.account-deletion-confirm {
  display: grid;
  gap: 6px;
  color: var(--muted-strong);
  font-size: var(--control-small-font-size);
  line-height: var(--control-line-height);
}

.account-deletion-confirm input {
  width: 100%;
  min-height: 38px;
}

.account-deletion-button {
  color: var(--ink);
  border-color: rgba(79, 42, 42, 0.22);
}

.drawer-secondary {
  gap: 8px;
  padding-bottom: 14px;
}

.quiet-stack {
  display: grid;
  gap: 8px;
}

.quiet-disclosure {
  display: grid;
  gap: 8px;
  border-top: 1px solid var(--hairline-soft);
  padding-top: 10px;
}

.quiet-disclosure:first-child {
  border-top: 0;
  padding-top: 0;
}

.quiet-disclosure summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--muted-strong);
  cursor: pointer;
  font-size: var(--control-small-font-size);
  line-height: var(--control-line-height);
  list-style: none;
}

.quiet-disclosure summary::-webkit-details-marker {
  display: none;
}

.quiet-disclosure summary::after {
  content: "";
  flex: 0 0 auto;
  width: 0.48em;
  height: 0.48em;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  color: var(--muted);
  opacity: 0.46;
  transform: translateY(-0.08em) rotate(45deg);
  transform-origin: center;
}

.quiet-disclosure[open] summary::after {
  opacity: 0.38;
  transform: translateY(0.1em) rotate(-135deg);
}

.quiet-disclosure-body {
  display: grid;
  gap: 9px;
}

.quiet-disclosure:not([open]) > .quiet-disclosure-body {
  display: none;
}

.operations-disclosure .quiet-disclosure-body {
  gap: 7px;
}

.operations-note {
  font-size: var(--control-small-font-size);
  line-height: var(--control-line-height);
}

.quiet-link-row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px 11px;
}

.quiet-legal-links {
  gap: 5px 9px;
}

.quiet-text-link {
  color: var(--muted);
  font-size: var(--control-small-font-size);
  line-height: var(--control-line-height);
  text-decoration: none;
}

@media (hover: hover) {
  .quiet-text-link:hover {
    color: var(--ink);
    text-decoration: underline;
    text-underline-offset: 3px;
  }
}

.quiet-contact {
  font-size: var(--control-small-font-size);
}

.quiet-author-link {
  min-height: 0;
  border: 0;
  color: var(--muted);
  font-size: var(--control-small-font-size);
  padding: 0;
}

@media (hover: hover) {
  .quiet-author-link:hover {
    border-color: transparent;
    background: transparent;
  }
}

.reader-name-suggestion-shell {
  display: grid;
  gap: 8px;
}

.reader-name-suggestion-disclosure .quiet-disclosure-body {
  gap: 7px;
}

.reader-name-suggestion-disclosure:not([open]) > .quiet-disclosure-body {
  display: none;
}

.drawer-section.is-focused {
  border-color: var(--ink);
  background: linear-gradient(180deg, var(--button-wash), transparent 84%);
  transition: background 180ms ease, border-color 180ms ease;
}

.stat-list.is-focused {
  border: 1px solid var(--ink);
  border-radius: 8px;
  background: linear-gradient(180deg, var(--button-wash), transparent 84%);
  padding: 8px;
  transition: background 180ms ease, border-color 180ms ease;
}

.muted {
  margin: 0;
  color: var(--muted);
}

.button-row,
.amount-grid,
.settings-grid,
.work-list,
.chapter-list,
.stat-list,
.support-log {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.button-row {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.sentence-sheet .button-row {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.reader-name-suggestions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.reader-name-suggestions .quiet-button {
  min-height: 34px;
  padding: 6px 10px;
}

.reader-name-suggestion-label {
  font-size: var(--control-small-font-size);
}

.amount-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.free-support-primary {
  gap: 10px;
}

.reading-support-amounts {
  gap: 6px;
}

.reading-support-amounts .quiet-button {
  min-height: 34px;
  padding: 6px 10px;
  font-size: var(--control-small-font-size);
}

.reading-support-amounts .quiet-button[aria-pressed="true"] {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--paper);
}

.free-support-input-label {
  display: grid;
  gap: 6px;
}

.amount-option {
  width: 100%;
  min-height: 48px;
}

.amount-option.is-active {
  border-color: var(--ink);
  background: var(--paper);
}

.amount-readout {
  display: grid;
  gap: 8px;
  border-bottom: 1px solid rgba(117, 95, 66, 0.16);
  padding-bottom: 12px;
}

.amount-readout[data-support-kind="sentence"] {
  border-left: 0;
  border-bottom-color: rgba(117, 95, 66, 0.14);
  padding-left: 0;
}

.amount-readout-main {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
}

.conditional-support-field {
  display: grid;
  gap: 10px;
}

.conditional-support-field.is-collapsed {
  display: none;
}

.amount-readout strong {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.15;
}

.amount-readout small {
  color: var(--muted);
}

.support-primary {
  --control-font-size: 14px;
  gap: 14px;
  font-size: 14px;
  line-height: 1.5;
}

.support-opening {
  width: min(34ch, 100%);
  color: var(--muted-strong);
  font-size: 14px;
  line-height: 1.7;
  text-wrap: pretty;
}

.support-primary .muted,
.support-primary small,
.support-primary .support-surface-note,
.support-primary .quiet-disclosure-body {
  font-size: 13px;
  line-height: 1.55;
}

.support-ritual-card {
  display: grid;
  gap: 12px;
  padding: 16px 16px 17px;
  border: 1px solid var(--hairline-soft);
  border-radius: 18px;
  background: linear-gradient(180deg, var(--paper-glow), transparent), var(--raised);
  box-shadow: inset 0 1px 0 var(--paper-glow);
}

.support-ritual-card-reading {
  padding: 14px 0 15px;
  border-width: 1px 0;
  border-color: var(--hairline-soft);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.support-ritual-card-sentence {
  padding: 13px 0 14px;
  border-width: 1px 0;
  border-color: var(--hairline-soft);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.support-ritual-head,
.support-ritual-copy,
.support-quote-card,
.support-submit-row,
.support-detail-stack {
  display: grid;
}

.support-ritual-head {
  gap: 8px;
}

.support-ritual-copy {
  gap: 4px;
}

.support-ritual-kicker {
  color: var(--muted);
  font-family: var(--ui-font);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.45;
}

.support-ritual-copy strong {
  color: var(--ink);
  font-size: 15px;
  line-height: 1.45;
}

.support-ritual-note {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.62;
  text-wrap: pretty;
}

.support-ritual-period {
  display: block;
  margin-top: 2px;
}

.reading-access-pass-options {
  display: grid;
  gap: 0;
  margin-top: 4px;
  border-top: 1px solid var(--hairline-soft);
}

.reading-access-pass-option {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) max-content;
  gap: 8px 10px;
  align-items: center;
  min-width: 0;
  padding: 13px 0;
  border-bottom: 1px solid var(--hairline-soft);
  color: var(--muted-strong);
  cursor: pointer;
}

.reading-access-pass-option input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--ink);
}

.reading-access-pass-option-main {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.reading-access-pass-option-main strong,
.reading-access-pass-option-price {
  color: var(--ink);
  font-family: var(--ui-font);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.35;
}

/* 티어 위계: 고른 티어의 라벨을 살짝 크게(15px) 세워 시선이 선택을 따라간다.
   나머지는 13px로 잔잔히. 기본값 이어읽기가 처음 선택돼 있어 첫 화면은 이어읽기가 서 있고,
   정주행·나눔을 고르면 그게 커진다(어느 티어도 특별히 고정 강조하지 않음). */
.reading-access-pass-option.is-selected .reading-access-pass-option-main strong,
.reading-share-open-option.is-selected .reading-share-open-main strong {
  font-size: 15px;
}

.reading-access-pass-option-main small,
.reading-access-pass-option-period {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.reading-access-pass-option-period {
  grid-column: 2 / -1;
}

.reading-access-pass-option-mood,
.reading-share-open-mood {
  grid-column: 2 / -1;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
  text-wrap: pretty;
}

/* 정주행 옵션의 "지금 N명이 정주행으로 읽고 있어요" — 무드보다 살짝 또렷하게(사회적 증거). */
.reading-access-pass-option-presence {
  grid-column: 2 / -1;
  color: var(--muted-strong);
  font-family: var(--ui-font);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
  text-wrap: pretty;
}

.reading-access-pass-option.is-selected {
  color: var(--ink);
}

.reading-access-pass-option.is-held,
.reading-share-open-option.is-held {
  cursor: default;
  opacity: 0.58;
}

.reading-access-pass-option:focus-within {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

/* 나눔(10만)은 개인 선택 쌍과 같은 무게의 라디오가 아니라,
   헤어라인 아래에서 결이 다른 "함께 읽기" 카드로 분리된다. */
.reading-access-pass-choices {
  display: grid;
  gap: 0;
}

.reading-access-pass-options .reading-access-pass-option:last-child {
  border-bottom: none;
}

.reading-share-open {
  display: grid;
  gap: 10px;
  margin-top: 14px;
  padding-top: 16px;
  border-top: 1px solid var(--hairline-soft);
}

.reading-share-open-lead {
  margin: 0;
  color: var(--muted-strong);
  font-size: 12.5px;
  line-height: 1.6;
  text-wrap: pretty;
}

.reading-share-open-option {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) max-content;
  gap: 8px 12px;
  align-items: center;
  min-width: 0;
  padding: 13px 14px;
  border: 1px solid var(--hairline);
  border-radius: 14px;
  color: var(--muted-strong);
  cursor: pointer;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.reading-share-open-option input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--ink);
}

.reading-share-open-main {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.reading-share-open-main strong,
.reading-share-open-price {
  color: var(--ink);
  font-family: var(--ui-font);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.35;
}

.reading-share-open-main small,
.reading-share-open-period {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.reading-share-open-period {
  grid-column: 2 / -1;
}

.reading-share-open-option.is-selected {
  color: var(--ink);
  border-color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--hairline-soft);
}

.reading-share-open-option:focus-within {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.support-review-facts {
  display: grid;
  gap: 8px;
  margin: 0;
  padding-top: 12px;
  border-top: 1px solid var(--hairline-soft);
}

.support-review-facts div {
  display: grid;
  grid-template-columns: minmax(3.25rem, max-content) minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}

.support-review-facts dt {
  color: var(--muted);
  font-family: var(--ui-font);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.6;
}

.support-review-facts dd {
  margin: 0;
  max-width: min(42ch, 100%);
  color: var(--muted-strong);
  font-size: 12.5px;
  line-height: 1.65;
  text-wrap: pretty;
}

.support-quote-card {
  gap: 8px;
}

.support-quote-card .sentence-quote {
  max-height: min(8rem, 22vh);
}

.support-quote-card .sentence-trace-context {
  margin: 0;
}

.sentence-memory-flow-line {
  margin: 0;
  max-width: 38ch;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.65;
}

.support-primary .reader-checkpoint-quiet strong {
  font-size: 14px;
  line-height: 1.35;
}

.support-primary label {
  display: grid;
  gap: 6px;
}

.support-field-disclosure {
  display: grid;
  border: 0;
  border-top: 1px solid var(--hairline-soft);
  border-radius: 0;
  background: transparent;
  padding: 12px 0 0;
}

.support-field-disclosure .quiet-disclosure {
  gap: 10px;
  border-top: 0;
  padding-top: 0;
}

.support-field-disclosure .quiet-disclosure-body {
  gap: 10px;
}

.support-amount-disclosure {
  margin-top: 0;
}

.support-amount-controls {
  gap: 12px;
}

.support-amount-nudge {
  margin: 0;
}

.support-submit-row {
  gap: 8px;
}

.support-submit-row .solid-button {
  justify-self: start;
  width: min(260px, 100%);
}

.support-primary[data-support-kind="reading"] .support-submit-row {
  justify-items: center;
}

.support-primary[data-support-kind="reading"] .support-submit-row .solid-button {
  justify-self: center;
  width: 220px;
  max-width: 100%;
  min-height: 36px;
  padding: 6px 16px;
  border-color: var(--ink);
  background: transparent;
  color: var(--ink);
  box-shadow: none;
}

.support-primary[data-support-kind="reading"] .support-submit-row .solid-button:disabled,
.support-primary[data-support-kind="reading"] .support-submit-row .solid-button[aria-disabled="true"] {
  border-color: var(--hairline);
  color: var(--muted);
}

.reader-payment-methods {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  width: min(360px, 100%);
  margin: 12px auto 2px;
}

/* 카드 직접결제로는 안 되는 카드사를 조용히 간편결제로 넘겨주는 한 줄.
   경고 상자가 아니라 결제수단 그리드 아래 잔잔한 캡션 — 미니멀하게. */
.reader-payment-method-issuer-note {
  width: min(360px, 100%);
  margin: 4px auto 2px;
  color: var(--muted);
  font-size: 0.74rem;
  line-height: 1.4;
  text-align: center;
}

/* 카드를 골랐을 때만 안내를 보인다. 카카오페이·토스페이를 고르면 그 결제수단으로
   현대·삼성카드도 되니 안내가 사족이라 숨긴다. :has로 재렌더 없이 라이브 토글하고,
   :has 미지원 브라우저에서는 규칙이 통째로 무시돼 기존처럼 항상 보이는 쪽으로 degrade. */
.reader-payment-methods:not(:has(input[value="card"]:checked)) + .reader-payment-method-issuer-note {
  display: none;
}

/* 나눔권 결제 완료 — 스쳐가는 토스트가 아니라 닫기 전까지 머무는 전용 페이지.
   문 스무 개를 시각화해 '남에게 문을 맡겼다'는 보상감을 준다. */
.share-pack-celebration {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 18px;
  padding: 22px 12px 12px;
  max-width: 34rem;
  margin: 0 auto;
}

/* 문 글리프 시각화 대신, 이 나눔이 반영된 '내 문 맡김 온도'(도수·순위)를 축하의 중심에 둔다.
   온도 receipt는 노트 드로어와 공유하는 컴포넌트라, 축하 안에서는 가운데로 모아 세운다. */
.share-pack-celebration .reader-support-temperature-receipt {
  width: min(22rem, 100%);
  margin: 2px auto 0;
  text-align: center;
  align-items: center;
}

.share-pack-celebration-lead {
  font-size: 1.12rem;
  line-height: 1.75;
  color: var(--ink);
  margin: 0;
  max-width: 26rem;
}

.share-pack-celebration-mood {
  font-size: 0.98rem;
  line-height: 1.7;
  color: var(--muted-strong);
  margin: 0;
}

.share-pack-celebration-receipt {
  font-size: 0.8rem;
  line-height: 1.5;
  margin: 0;
}

.share-pack-celebration-close {
  margin-top: 8px;
  min-width: 12rem;
}

.reader-payment-methods label {
  position: relative;
  min-width: 0;
}

.reader-payment-methods input {
  position: absolute;
  inset: 0;
  opacity: 0;
}

.reader-payment-methods span {
  display: flex;
  align-items: center;
  justify-content: center;
  /* Purchase control: keep the tap target at the 44px guideline. */
  min-height: 44px;
  padding: 6px 8px;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  color: var(--muted-strong);
  font-size: 0.82rem;
  line-height: 1.15;
  text-align: center;
  background: var(--button-wash);
  transition: border-color 140ms ease, color 140ms ease, background 140ms ease;
}

.reader-payment-methods input:checked + span {
  border-color: var(--ink);
  color: var(--ink);
  background: var(--highlight-bg);
}

.reader-payment-methods input:focus-visible + span {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

/* Windows High Contrast / forced-colors: the selected payment method and reading profile are
   signalled only by custom border+background, which flatten to identical system colors here.
   Restore a system-visible cue (Highlight ring) so the current choice stays distinguishable. */
@media (forced-colors: active) {
  .reader-payment-methods input:checked + span {
    outline: 2px solid Highlight;
    outline-offset: 2px;
  }

  .reading-profile-card.quiet-button[aria-pressed="true"] {
    outline: 2px solid Highlight;
    outline-offset: -2px;
  }

  .reading-profile-card.quiet-button[aria-pressed="true"]::after {
    background: Highlight;
  }
}

.support-resume-bridge {
  position: relative;
  overflow: visible;
  border: 0;
  border-top: 1px solid var(--hairline-soft);
  border-radius: 0;
  background: transparent;
  padding: 12px 0 0;
  box-shadow: none;
}

.support-resume-bridge::before {
  content: none;
}

.support-resume-bridge[data-support-resume-drawer="sentenceSupport"] {
  background: transparent;
}

.support-resume-copy {
  display: grid;
  gap: 8px;
}

.support-resume-note {
  margin: 0;
  text-wrap: pretty;
}

.support-resume-copy .quiet-button {
  justify-self: start;
  width: min(260px, 100%);
}

.support-detail-stack {
  gap: 10px;
}

.support-detail-note,
.support-detail-hint,
.support-privacy-note,
.support-service-period-note,
.support-payment-nature-note {
  max-width: min(40ch, 100%);
}

.support-detail-note,
.support-service-period-note {
  color: var(--muted-strong);
}

.support-detail-hint {
  line-height: 1.6;
}

.support-privacy-note {
  color: var(--muted);
}

.support-secondary-shell {
  position: relative;
  overflow: visible;
  border-top: 1px solid var(--hairline-soft);
  border-radius: 0;
  background: transparent;
  padding: 16px 0 0;
  box-shadow: none;
}

.support-secondary-shell::before {
  content: none;
}

.support-secondary-shell > * {
  position: relative;
  z-index: auto;
}

.support-secondary-shell .account-operations-shell,
.support-secondary-shell .quiet-disclosure {
  border-top: 0;
  padding-top: 0;
}

.support-secondary-shell .quiet-disclosure summary {
  min-height: 36px;
  padding: 0;
}

.support-secondary-shell .quiet-disclosure-body {
  padding-top: 2px;
}

.support-level-seal {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  padding: 2px 8px;
  color: var(--muted-strong);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
}

.settings-grid {
  grid-template-columns: 1fr;
}

.settings-primary {
  gap: 11px;
}

.reading-atmosphere-card {
  display: grid;
  gap: 12px;
  padding: 16px 18px 18px;
  border: 1px solid var(--stage-border);
  border-radius: 18px;
  background:
    linear-gradient(180deg, var(--paper-glow), transparent 125%),
    var(--veil-bg);
  box-shadow: inset 0 1px 0 var(--paper-glow);
}

.reading-atmosphere-eyebrow {
  margin-bottom: 0;
}

.reading-atmosphere-copy {
  display: grid;
  gap: 5px;
}

.reading-atmosphere-copy strong {
  color: var(--ink);
  font-size: 15px;
  line-height: 1.4;
}

.reading-atmosphere-copy small,
.reading-atmosphere-measures {
  color: var(--muted);
  font-size: var(--control-small-font-size);
  line-height: 1.6;
}

.reading-atmosphere-values {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.reading-atmosphere-values span {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  border: 1px solid var(--stage-line);
  border-radius: 999px;
  padding: 0 10px;
  background: var(--paper-breath);
  color: var(--muted-strong);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}

.reading-profile-shell {
  display: grid;
  gap: 10px;
  padding: 14px 14px 15px;
  border: 1px solid var(--stage-border);
  border-radius: 18px;
  background:
    linear-gradient(180deg, var(--paper-glow), transparent 118%),
    var(--veil-bg);
  box-shadow: inset 0 1px 0 var(--paper-glow);
}

.reading-profile-copy {
  display: grid;
  gap: 4px;
}

.reading-profile-copy strong {
  color: var(--ink);
  font-size: 14px;
  line-height: 1.4;
}

.reading-profile-copy small {
  color: var(--muted);
  font-size: var(--control-small-font-size);
  line-height: 1.6;
}

.reading-profile-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  align-items: stretch;
  gap: 8px;
}

.reading-profile-card.quiet-button {
  --reading-profile-card-ink: #2f271d;
  --reading-profile-card-muted: rgba(65, 56, 43, 0.72);
  --reading-profile-card-muted-strong: rgba(58, 48, 35, 0.82);
  --reading-profile-card-active-border: rgba(48, 39, 27, 0.72);
  --reading-profile-card-dot: rgba(48, 39, 27, 0.88);
  --reading-profile-card-dot-ring: rgba(255, 255, 255, 0.58);
  position: relative;
  display: grid;
  grid-template-rows: auto auto minmax(3.4em, 1fr) auto;
  gap: 6px;
  align-content: start;
  min-width: 0;
  min-height: 136px;
  padding: 14px 13px 14px;
  border-color: rgba(121, 95, 61, 0.14);
  border-radius: 16px;
  overflow: hidden;
  color: var(--reading-profile-card-ink);
  text-align: left;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.42);
}

.reading-profile-card.quiet-button[aria-pressed="true"] {
  border-color: var(--reading-profile-card-active-border);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.62),
    0 0 0 1px rgba(121, 95, 61, 0.08);
}

.reading-profile-card.quiet-button[aria-pressed="true"]::after {
  content: "";
  position: absolute;
  top: 11px;
  right: 11px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--reading-profile-card-dot);
  box-shadow: 0 0 0 3px var(--reading-profile-card-dot-ring);
}

.reading-profile-card.quiet-button:focus-visible {
  outline: 2px solid var(--reading-profile-card-active-border);
  outline-offset: 3px;
}

.reading-profile-card-title {
  min-width: 0;
  color: var(--reading-profile-card-ink);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
  overflow-wrap: break-word;
  word-break: keep-all;
}

.reading-profile-card-meta {
  min-width: 0;
  color: var(--reading-profile-card-muted-strong);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: 0;
  text-transform: none;
  overflow-wrap: break-word;
  word-break: keep-all;
}

.reading-profile-card-body {
  display: -webkit-box;
  min-width: 0;
  min-height: calc(1.58em * 3);
  overflow: hidden;
  color: var(--reading-profile-card-muted);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.58;
  overflow-wrap: break-word;
  white-space: normal;
  word-break: keep-all;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
}

.reading-profile-card-measures {
  margin-top: auto;
  color: var(--reading-profile-card-muted-strong);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.4;
}

.reading-profile-card.quiet-button[data-reading-profile-theme="dark"] {
  --reading-profile-card-ink: rgba(255, 249, 241, 0.96);
  --reading-profile-card-muted: rgba(255, 241, 226, 0.72);
  --reading-profile-card-muted-strong: rgba(255, 241, 226, 0.82);
  --reading-profile-card-active-border: rgba(255, 238, 214, 0.74);
  --reading-profile-card-dot: rgba(255, 249, 241, 0.94);
  --reading-profile-card-dot-ring: rgba(0, 0, 0, 0.42);
  border-color: rgba(255, 244, 231, 0.12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.reading-profile-card.quiet-button[data-reading-profile-theme="dark"][aria-pressed="true"] {
  border-color: var(--reading-profile-card-active-border);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0 0 1px rgba(255, 233, 206, 0.08);
}

.reading-profile-card.quiet-button[data-reading-profile-theme="dark"][aria-pressed="true"]::after {
  background: var(--reading-profile-card-dot);
  box-shadow: 0 0 0 3px var(--reading-profile-card-dot-ring);
}

.reading-profile-card.quiet-button[data-reading-profile-theme="dark"] .reading-profile-card-title {
  color: var(--reading-profile-card-ink);
}

.reading-profile-card.quiet-button[data-reading-profile-theme="dark"] .reading-profile-card-meta,
.reading-profile-card.quiet-button[data-reading-profile-theme="dark"] small,
.reading-profile-card.quiet-button[data-reading-profile-theme="dark"] .reading-profile-card-measures {
  color: var(--reading-profile-card-muted-strong);
}

.reading-profile-card.quiet-button[data-reading-profile="manuscript"] {
  background:
    radial-gradient(circle at top right, rgba(208, 170, 100, 0.16), transparent 40%),
    linear-gradient(180deg, rgba(255, 252, 246, 0.96), rgba(248, 239, 222, 0.92));
}

.reading-profile-card.quiet-button[data-reading-profile="lantern"] {
  background:
    radial-gradient(circle at top left, rgba(247, 192, 113, 0.3), transparent 34%),
    linear-gradient(180deg, rgba(45, 31, 22, 0.98), rgba(17, 13, 11, 0.98));
}

.reading-profile-card.quiet-button[data-reading-profile="folio"] {
  background:
    radial-gradient(circle at top right, rgba(184, 197, 214, 0.18), transparent 44%),
    linear-gradient(180deg, rgba(252, 252, 250, 0.98), rgba(241, 239, 233, 0.94));
}

.reading-profile-card.quiet-button[data-reading-profile="spread"] {
  background:
    radial-gradient(circle at top left, rgba(172, 190, 219, 0.18), transparent 40%),
    linear-gradient(180deg, rgba(248, 251, 255, 0.98), rgba(233, 239, 247, 0.94));
}

.reading-profile-card.quiet-button[data-reading-profile="margin"] {
  background:
    radial-gradient(circle at top right, rgba(174, 196, 153, 0.22), transparent 42%),
    linear-gradient(180deg, rgba(249, 252, 246, 0.98), rgba(236, 244, 232, 0.94));
}

.reading-profile-card.quiet-button[data-reading-profile="midnight"] {
  background:
    radial-gradient(circle at top left, rgba(126, 142, 225, 0.22), transparent 36%),
    linear-gradient(180deg, rgba(24, 27, 46, 0.98), rgba(11, 13, 24, 0.98));
}

.reading-profile-card.quiet-button[data-reading-profile="blackbook"] {
  grid-column: 1 / -1;
  min-height: 116px;
  border-color: rgba(255, 255, 255, 0.18);
  background: linear-gradient(180deg, #050505, #000 58%, #000);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 14px 34px rgba(0, 0, 0, 0.18);
}

.reading-profile-grid[data-reading-profile-featured-first="true"] .reading-profile-card.quiet-button[data-reading-profile="margin"] {
  grid-row: 1;
}

.settings-primary .reading-profile-shell {
  gap: 12px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.settings-primary .reading-profile-grid {
  grid-template-columns: 1fr;
  grid-auto-rows: auto;
  gap: 0;
  border-top: 0;
}

.reader-settings-posture-family-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  min-height: 27px;
  border-top: 1px solid var(--hairline-soft);
  padding: 1px 0 5px;
  color: var(--ink);
  overflow: hidden;
}

.reader-settings-posture-family-row span,
.reader-settings-posture-family-row small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.reader-settings-posture-family-row span {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
}

.reader-settings-posture-family-row small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.3;
}

.settings-primary .reading-profile-card.quiet-button,
.settings-primary .reading-profile-card.quiet-button[data-reading-profile-theme="dark"] {
  --reading-profile-card-ink: var(--ink);
  --reading-profile-card-muted: var(--muted);
  --reading-profile-card-muted-strong: var(--muted);
  --reading-profile-card-active-border: var(--ink);
  --reading-profile-card-dot: var(--ink);
  --reading-profile-card-dot-ring: rgba(255, 255, 255, 0.66);
}

.settings-primary .reading-profile-card.quiet-button {
  grid-template-rows: auto;
  min-height: 44px;
  gap: 0;
  border: 0;
  border-top: 1px solid var(--hairline-soft);
  border-radius: 0;
  background: transparent;
  padding: 4px 0 5px;
  align-items: start;
  justify-content: stretch;
  justify-items: start;
  text-align: left;
  box-shadow: none;
}

.settings-primary .reading-profile-card.quiet-button[data-reading-profile] {
  background: transparent;
  box-shadow: none;
}

.settings-primary .reading-profile-card.quiet-button[aria-pressed="true"],
.settings-primary .reading-profile-card.quiet-button[data-reading-profile-theme="dark"][aria-pressed="true"] {
  border-top-color: var(--hairline-soft);
  box-shadow: none;
}

.settings-primary .reading-profile-card.quiet-button[aria-pressed="true"]::after {
  top: 6px;
  right: 9px;
  width: 6px;
  height: 6px;
}

.settings-primary .reading-profile-card.quiet-button[data-reading-profile="blackbook"] {
  grid-column: auto;
  min-height: 44px;
}

.settings-primary .reading-profile-card-title {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  max-width: calc(100% - 24px);
  font-size: 13px;
  line-height: 1.34;
}

.settings-primary .reader-settings-posture-current-mark {
  color: var(--muted);
  font-family: var(--ui-font);
  font-size: 10.5px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
}

.settings-primary .reading-profile-card-meta,
.settings-primary .reading-profile-card-body,
.settings-primary .reading-profile-card-measures {
  display: none;
}

.settings-essentials {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  min-width: 0;
}

.settings-essentials label:last-child {
  grid-column: 1 / -1;
}

.reading-surface-disclosure {
  margin-top: 0;
}

.reading-surface-disclosure:not([open]) > .quiet-disclosure-body {
  display: none;
}

.reading-surface-controls {
  gap: 9px;
}

.reading-detail-disclosure {
  margin-top: 1px;
}

.reading-detail-disclosure:not([open]) > .quiet-disclosure-body {
  display: none;
}

.reading-detail-controls {
  gap: 10px;
}

.reading-detail-control {
  gap: 6px;
}

.reading-detail-control-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

.reading-detail-control-label,
.reading-detail-control-value {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.reading-detail-control-label {
  color: var(--muted);
}

.reading-detail-control-value {
  color: var(--muted);
  font-size: 11px;
  font-weight: 500;
}

.bookshelf-primary {
  gap: 10px;
}

.work-list {
  gap: 14px;
}

.work-group {
  display: grid;
  gap: 8px;
}

.work-spine-list {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.work-item {
  display: grid;
  gap: 3px;
  width: 100%;
  min-height: 50px;
  border: 0;
  border-left: 1px solid var(--hairline);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font-family: var(--ui-font);
  font-weight: 700;
  padding: 8px 0 8px 12px;
  text-align: left;
  transition: background 160ms ease, border-color 160ms ease;
}

.work-item strong {
  font-size: 16px;
  line-height: 1.45;
}

.work-item small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.work-item.is-essay-note,
.work-item.is-outside-note,
.work-item.is-plaza-note {
  border-left-color: var(--hairline-soft);
}

.work-item.is-outside-note,
.work-item.is-plaza-note {
  min-height: 44px;
  color: var(--muted);
}

.work-item.is-outside-note strong,
.work-item.is-plaza-note strong {
  color: var(--ink);
  font-weight: 700;
}

/* 새 벽보가 붙은 동안만 공지 등이 조금 밝다. 배지 숫자도 빨간 점도 아니고,
   책등 선이 잉크색으로 서고 상태 줄이 또렷해지는 정도다 — 알림이 아니라 표식이다.
   선택자에 `.is-outside-note` 를 함께 짚는 이유는 특이도다: 공지는 `active:false` 라
   `.work-item.is-planned` 클래스를 함께 다는데 그 규칙이 같은 특이도로 뒤에 서서
   홑클래스를 이긴다(실측). 이 표식은 언제나 공지 등에만 붙으므로 정직한 선택자다. */
.work-item.is-outside-note.is-fresh-notice {
  border-left-color: var(--ink);
}

.work-item.is-outside-note.is-fresh-notice small {
  color: var(--muted-strong, var(--ink));
}

.work-item.is-active {
  border-left-color: var(--ink);
  background: linear-gradient(90deg, var(--button-wash), transparent 74%);
}

@media (hover: hover) {
  .work-item:hover,
  .chapter-list button:hover {
    background: var(--button-wash);
  }
}

.work-item.is-planned {
  border-left-color: var(--hairline-soft);
  color: var(--muted);
}

.chapter-list button,
.stat-item,
.support-item {
  display: grid;
  gap: 4px;
  width: 100%;
  min-width: 0;
  min-height: 48px;
  border: 1px solid var(--stage-border);
  border-radius: 14px;
  background:
    linear-gradient(180deg, var(--paper-glow), transparent),
    transparent;
  color: var(--ink);
  padding: 12px;
  text-align: left;
  box-shadow: inset 0 1px 0 var(--paper-glow);
  transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.chapter-list button.is-active {
  border-color: var(--ink);
}

.chapter-list button strong .chapter-ordinal {
  color: var(--muted-strong);
  font-variant-numeric: tabular-nums;
}

.chapter-list button strong .chapter-ordinal:not(:last-child) {
  margin-right: 0.5em;
}

.support-item.is-selected {
  border-color: var(--ink);
  background: var(--paper);
}

.support-item.is-unread {
  background: var(--paper);
}

.plaza-fellowship-primary {
  gap: 6px;
  padding-bottom: 18px;
}

.plaza-fellowship-primary[data-plaza-fellowship-memory-line-contract="trace-place-line-not-fellowship-feature-copy"] {
  gap: 5px;
}

.plaza-fellowship-intro-line {
  max-width: 31ch;
  color: var(--muted-strong);
}

.plaza-fellowship-primary[data-plaza-fellowship-intro-line-contract="single-trace-memory-line-not-feature-axis-catalog"] .plaza-fellowship-intro-line {
  font-size: 12.5px;
  line-height: 1.72;
}

.plaza-fellowship-memory-flow-line {
  margin-top: -2px;
  max-width: 38ch;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.65;
}

.plaza-fellowship-primary[data-plaza-fellowship-memory-line-contract="trace-place-line-not-fellowship-feature-copy"] .plaza-fellowship-memory-flow-line {
  max-width: 34ch;
  color: var(--muted-strong);
  font-size: 11.75px;
}

.drawer[data-drawer-kind="fellowship"] .drawer-section {
  border-bottom-color: color-mix(in srgb, var(--hairline-soft) 72%, transparent);
}

.drawer[data-drawer-kind="fellowship"] .plaza-fellowship-sentences,
.drawer[data-drawer-kind="fellowship"] .plaza-fellowship-temperature {
  gap: 8px;
}

.plaza-fellowship-item,
.plaza-fellowship-temperature-item {
  width: 100%;
  gap: 3px;
  border: 0;
  border-top: 1px solid color-mix(in srgb, var(--hairline-soft) 54%, transparent);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  min-height: 0;
  padding: 7px 0 0;
}

.plaza-fellowship-item-button {
  appearance: none;
  display: grid;
  justify-items: start;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
  min-height: 44px;
  touch-action: manipulation;
}

.plaza-fellowship-item-button:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.plaza-fellowship-item-button:disabled {
  cursor: default;
  opacity: 0.72;
}

.plaza-fellowship-axis {
  display: grid;
  gap: 5px;
}

.plaza-fellowship-axis + .plaza-fellowship-axis {
  padding-top: 8px;
  border-top: 1px solid color-mix(in srgb, var(--hairline-soft) 50%, transparent);
}

.plaza-fellowship-axis h4 {
  margin: 0;
  color: var(--muted);
  font-family: var(--ui-font);
  font-size: var(--control-small-font-size);
  font-weight: 600;
  line-height: var(--control-line-height);
}

.plaza-fellowship-rank-line {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  min-width: 0;
}

.plaza-fellowship-rank-line .quiet-rank-mark {
  display: inline-flex;
  width: 3px;
  height: 3px;
  flex: 0 0 3px;
  border-radius: 999px;
  background: currentColor;
  color: var(--muted);
  opacity: 0.36;
  font-size: 0;
  line-height: 0;
}

.plaza-fellowship-rank-line small {
  min-width: 0;
  overflow-wrap: anywhere;
}

.plaza-fellowship-open,
.plaza-fellowship-open-label {
  width: max-content;
  min-width: 0;
  min-height: 0;
  padding-inline: 0;
  color: var(--muted-strong);
  font-family: var(--ui-font);
  font-size: var(--control-small-font-size);
  font-weight: 600;
  line-height: var(--control-line-height);
}

.reader-shortcut-card {
  gap: 10px;
  background: transparent;
}

.reader-shortcut-card .account-tool-note {
  color: var(--muted);
  font-weight: 400;
}

.reader-tool-card .account-tool-note {
  color: var(--muted);
  font-weight: 400;
}

.account-secondary-shell .reader-shortcut-disclosure .compact-account-action,
.account-secondary-shell .reader-tool-disclosure .compact-account-action {
  justify-self: start;
  width: auto;
  min-height: 30px;
  border-color: rgba(22, 22, 20, 0.12);
  padding: 5px 10px;
  font-size: 12px;
  line-height: 1.25;
  white-space: nowrap;
}

.reader-tool-card {
  background: transparent;
}

.reader-shortcut-guide {
  display: grid;
  gap: 5px;
  border-top: 1px solid rgba(117, 88, 51, 0.12);
  padding-top: 9px;
}

.reader-shortcut-guide-line {
  color: var(--muted);
  font-family: var(--ui-font);
  font-size: var(--control-small-font-size);
  line-height: 1.65;
}

.highlight-anchor-note {
  display: grid;
  gap: 3px;
  border-left: 1px solid var(--hairline);
  padding: 2px 0 2px 10px;
  color: var(--muted);
  font-family: var(--ui-font);
  font-size: var(--control-small-font-size);
  line-height: var(--control-line-height);
}

.highlight-anchor-note strong {
  color: var(--muted-strong);
  font-size: 12px;
}

.highlight-anchor-note small {
  color: var(--muted);
}

.reader-inbox {
  gap: 14px;
}

.reader-inbox-shell {
  position: relative;
  display: grid;
  gap: 14px;
  border: 1px solid rgba(114, 88, 53, 0.14);
  border-radius: 24px;
  background:
    linear-gradient(180deg, rgba(255, 252, 247, 0.96), rgba(249, 244, 237, 0.82) 34%, rgba(255, 255, 255, 0.9)),
    var(--paper);
  padding: 18px 18px 16px;
  box-shadow: 0 18px 38px rgba(31, 24, 16, 0.08);
  overflow: hidden;
}

.reader-inbox-shell::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 78px;
  background:
    radial-gradient(circle at top right, rgba(181, 139, 88, 0.18), transparent 56%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.8), transparent);
  pointer-events: none;
}

.reader-inbox-shell > * {
  position: relative;
  z-index: 1;
}

.reader-inbox-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 10px;
}

.reader-inbox-header > div {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.reader-inbox-kicker {
  margin: 0;
  color: var(--muted);
}

.reader-inbox-stack {
  display: grid;
  gap: 12px;
}

.reader-inbox-read-all-button {
  width: fit-content;
  max-width: 100%;
  min-height: 34px;
  padding: 0 12px;
  justify-self: start;
  color: var(--muted);
}

@media (hover: hover) {
  .reader-inbox-read-all-button:hover {
    border-color: var(--hairline);
  }
}

.reader-inbox-group {
  display: grid;
  gap: 8px;
}

.reader-inbox-unread-tools {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 10px;
}

.reader-inbox-label,
.reader-inbox-history-label {
  margin: 0;
  color: var(--muted);
}

.reader-inbox-panel {
  display: grid;
  gap: 10px;
  border: 1px solid rgba(116, 88, 52, 0.12);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(248, 243, 235, 0.74)),
    var(--paper);
  padding: 12px 12px 13px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.reader-inbox-panel summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  color: var(--muted-strong);
  font-family: var(--ui-font);
  font-size: 13px;
  font-weight: 700;
  list-style: none;
}

.reader-inbox-panel summary::-webkit-details-marker {
  display: none;
}

.reader-inbox-panel summary::after {
  content: "펼치기";
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.reader-inbox-panel[open] summary::after {
  content: "접기";
}

.reader-inbox-panel:not([open]) > .reader-inbox-panel-body {
  display: none;
}

.reader-inbox-panel-body {
  display: grid;
  gap: 10px;
}

.reader-inbox-paper-head {
  display: grid;
  gap: 3px;
  border-left: 1px solid var(--hairline);
  padding-left: 12px;
}

.reader-inbox-paper-note {
  color: var(--muted);
  font-family: var(--ui-font);
  font-size: 12px;
  line-height: 1.55;
}

.reader-notification-preference-item {
  gap: 0;
  border-color: rgba(118, 88, 51, 0.12);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.7), rgba(246, 241, 234, 0.86)),
    var(--paper);
}

.reader-notification-preference-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 10px;
}

.reader-notification-preference-header > div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.reader-notification-preference-header .quiet-button {
  width: fit-content;
  max-width: 100%;
  min-height: 34px;
  padding: 0 12px;
  justify-self: start;
  white-space: nowrap;
}

.reader-notification-item {
  position: relative;
  gap: 10px;
  border-color: rgba(117, 88, 51, 0.14);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.76), rgba(247, 242, 234, 0.92)),
    var(--paper);
  padding: 14px 14px 13px;
  overflow: hidden;
}

.reader-notification-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 14px;
  bottom: 14px;
  width: 3px;
  border-radius: 999px;
  background: rgba(118, 90, 54, 0.18);
}

.reader-notification-context {
  font-family: var(--ui-font);
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}

.reader-notification-item.is-unread {
  background:
    linear-gradient(180deg, rgba(255, 251, 245, 0.98), rgba(246, 236, 223, 0.9)),
    var(--accent-soft);
}

.reader-notification-item.is-unread::before {
  background: rgba(124, 88, 34, 0.42);
}

.reader-notification-sheet {
  display: grid;
  gap: 7px;
  padding-left: 6px;
}

/* 소식 제목은 요약과 같은 한글 접기를 쓴다. 기본 word-break 로 두면 좁은 폭에서
   낱자 하나가 다음 줄에 홀로 남는다(360·320 에서 "…생각했습니 / 다"). */
.reader-notification-sheet > strong {
  line-break: loose;
  word-break: keep-all;
}

.reader-notification-sheet-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.reader-notification-mark {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  border: 1px solid var(--hairline-soft);
  border-radius: 999px;
  background: var(--wash);
  padding: 2px 9px;
  color: var(--muted-strong);
  font-family: var(--ui-font);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.03em;
}

.reader-notification-summary {
  line-height: 1.62;
}

/* 공지 본문은 문단을 가진다 — 한 덩어리로 붙으면 벽보가 읽히지 않는다. 문단 사이는
   빈 줄(한 줄 높이)이 아니라 우리가 정한 간격으로 벌린다: 카드 안에서 빈 줄은 너무
   크게 벌어져 세 문단짜리 공지가 화면을 다 먹는다. */
.reader-notification-paragraph {
  display: block;
}

.reader-notification-paragraph + .reader-notification-paragraph {
  /* 문단 사이는 **한 줄만큼** 벌린다. 0.62em 은 11.7px 활자에서 7.2px 라
     줄 높이(18.9px)의 절반도 안 됐고, 그래서 문단이 나뉘어 있는데도 눈에는
     한 덩어리로 읽혔다(소유자 지적, 2026-08-20). 줄 높이를 단위로 잡아야
     활자 크기가 바뀌어도 "한 줄 띄었다"가 유지된다. */
  margin-top: 1lh;
}

@supports not (margin-top: 1lh) {
  .reader-notification-paragraph + .reader-notification-paragraph {
    margin-top: 1.6em;
  }
}

/* 벽보에 적힌 주소는 눌리는 자리다. 다만 이 공간은 읽는 곳이라 링크를 파랗게 띄우지
   않는다 — 본문 색을 유지하고 밑줄로만 "여기는 문"이라고 말한다. 스토어 주소는 길어서
   카드 밖으로 새기 쉬우므로 어디서든 끊는다. */
.reader-notice-link {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  overflow-wrap: anywhere;
}

.reader-notice-link:hover,
.reader-notice-link:focus-visible {
  text-decoration-thickness: 2px;
}

.reader-notification-meta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  color: var(--muted);
  font-family: var(--ui-font);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.6;
}

.reader-notification-state {
  border-left: 1px solid rgba(116, 90, 57, 0.16);
  padding-left: 8px;
}

.reader-notification-actions {
  grid-template-columns: auto;
  gap: 0;
  justify-content: start;
  border-top: 1px solid rgba(116, 90, 57, 0.12);
  padding-top: 10px;
  padding-left: 6px;
}

.reader-notification-open {
  width: fit-content;
  max-width: 100%;
  min-height: 34px;
  padding: 0 12px;
  justify-self: start;
}

@media (max-width: 720px) {
  .reader-inbox-header,
  .reader-inbox-unread-tools,
  .reader-notification-preference-header,
  .author-attention-header {
    display: grid;
    grid-template-columns: 1fr;
  }

  .reader-inbox-read-all-button,
  .reader-notification-preference-header .quiet-button,
  .reader-notification-open {
    width: fit-content;
    white-space: normal;
  }

  .reader-inbox-shell {
    padding: 16px 15px 14px;
    border-radius: 20px;
  }

  .account-entry-card {
    padding: 10px 0 0;
    border-radius: 0;
  }

  .account-secondary-shell {
    padding: 14px 0 0;
    border-radius: 0;
  }

  .account-tool-cluster {
    gap: 0;
  }

  .account-tool-card {
    padding: 12px 1px 13px;
    border-radius: 0;
  }

  .account-secondary-shell .account-tool-card {
    gap: 4px 9px;
    padding: 10px 1px 11px;
  }

  .account-secondary-shell .account-tool-card .compact-account-action {
    min-height: 38px;
    padding: 4px 8px;
    font-size: 11.5px;
  }

  .account-operations-shell .quiet-disclosure-body {
    border-left: 0;
    border-top: 1px solid rgba(117, 88, 51, 0.12);
    padding-left: 0;
    padding-top: 8px;
  }

  .reader-inbox-panel {
    padding: 11px 11px 12px;
  }

  .reader-notification-item {
    padding: 13px 12px 12px;
  }

  .reader-notification-sheet {
    padding-left: 4px;
  }
}

.chapter-list small,
.stat-item small,
.support-item small {
  color: var(--muted);
}

.support-item button {
  justify-self: start;
}

.public-ranking-surface {
  gap: 8px;
}

.reader-sentence-trace-receipt,
.reader-support-temperature-receipt {
  display: grid;
  gap: 5px;
  padding: 10px 12px;
  border: 1px solid var(--hairline-soft);
  border-radius: 8px;
  background:
    linear-gradient(180deg, var(--paper-glow), transparent),
    var(--raised);
  color: var(--ink);
}

.reader-sentence-trace-receipt small,
.reader-support-temperature-receipt small {
  min-width: 0;
  color: var(--muted);
  font-size: var(--control-small-font-size);
  line-height: 1.5;
}

.reader-sentence-trace-receipt strong,
.reader-support-temperature-receipt strong {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--muted-strong);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.55;
}

.reader-support-temperature-distance {
  color: var(--muted-strong);
}

.quiet-ranking-list {
  display: grid;
  gap: 7px;
}

.quiet-ranking-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  gap: 2px 8px;
  border-top: 1px solid var(--hairline-soft);
  padding-top: 7px;
  color: var(--muted-strong);
}

.quiet-ranking-item:first-child {
  border-top: 0;
  padding-top: 0;
}

.quiet-rank-mark {
  grid-row: 1 / span 2;
  color: var(--muted);
  font-family: var(--ui-font);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.5;
}

.quiet-trace-item {
  min-height: auto;
  gap: 4px;
}

.quiet-trace-item .quiet-rank-mark {
  grid-row: auto;
}

.quiet-ranking-item strong {
  min-width: 0;
  color: var(--muted-strong);
  font-size: 14px;
  overflow-wrap: anywhere;
}

.quiet-ranking-item small {
  grid-column: 2;
  color: var(--muted);
  font-size: var(--control-small-font-size);
}

.ranking-support-level {
  justify-self: start;
  border: 1px solid var(--hairline-soft);
  border-radius: 8px;
  padding: 2px 7px;
  background: var(--raised);
  color: var(--muted-strong) !important;
  font-weight: 700;
}

.ranking-sentence-trace {
  color: var(--muted-strong) !important;
  overflow-wrap: anywhere;
}

.ranking-temperature {
  color: var(--ink) !important;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.reader-checkpoint {
  gap: 6px;
}

.reader-checkpoint strong,
.reader-checkpoint small {
  line-height: 1.6;
}

.reader-presence-card {
  position: relative;
  display: grid;
  gap: 12px;
  border: 1px solid rgba(116, 88, 53, 0.14);
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(255, 252, 247, 0.98), rgba(248, 243, 236, 0.88)),
    var(--paper);
  padding: 16px 18px 15px;
  box-shadow:
    0 14px 30px rgba(31, 24, 16, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.76);
  overflow: hidden;
}

.reader-presence-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 72px;
  background:
    radial-gradient(circle at top right, rgba(181, 139, 88, 0.18), transparent 58%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.84), transparent);
  pointer-events: none;
}

.reader-presence-card > * {
  position: relative;
  z-index: 1;
}

.reader-presence-head,
.reader-presence-support {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.reader-presence-support {
  padding-top: 10px;
  border-top: 1px solid var(--hairline-soft);
}

.reader-presence-label {
  color: var(--muted);
  font-family: var(--ui-font);
  font-size: 11px;
  font-weight: 700;
}

.reader-presence-name {
  color: var(--ink);
  font-size: 15px;
}

.reader-presence-note {
  color: var(--muted);
  font-size: var(--control-small-font-size);
  line-height: 1.6;
}

/* 교제 표면의 상설 "함께 읽기" 진입 — 온도·문장 흔적과 한 결의 조용한 카드. */
.plaza-fellowship-share {
  display: grid;
}

.reader-fellowship-share {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--hairline);
  border-radius: 16px;
  background: transparent;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transition: border-color 160ms ease;
}

.reader-fellowship-share:focus-visible {
  border-color: var(--ink);
}

@media (hover: hover) {
  .reader-fellowship-share:hover {
    border-color: var(--ink);
  }
}

.reader-fellowship-share:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.reader-fellowship-share-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.reader-fellowship-share-copy strong {
  color: var(--ink);
  font-family: var(--ui-font);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
}

.reader-fellowship-share-copy small {
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.5;
}

.reader-fellowship-share-cue {
  flex: none;
  width: 8px;
  height: 8px;
  margin-right: 2px;
  border-right: 1.5px solid var(--muted);
  border-bottom: 1.5px solid var(--muted);
  transform: rotate(-45deg);
}

.reader-checkpoint-quiet {
  display: grid;
  gap: 4px;
  border: 1px solid rgba(117, 88, 51, 0.12);
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.8), rgba(247, 242, 235, 0.86)),
    var(--paper);
  padding: 12px 14px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.68);
}

/* 어두운 독서 방(midnight/lantern/blackbook)과 다크 테마에서는 고정 크림 카드가
   검은 지면 위에 밝은 얼룩으로 뜨고 밝은 --ink 글자가 흐려진다.
   결제 경계의 조용한 체크포인트는 서랍의 어두운 표면에 그대로 앉힌다. */
html[data-theme="dark"] .support-primary .reader-checkpoint-quiet,
html[data-reading-profile="lantern"] .support-primary .reader-checkpoint-quiet,
html[data-reading-profile="midnight"] .support-primary .reader-checkpoint-quiet,
html[data-reading-profile="blackbook"] .support-primary .reader-checkpoint-quiet {
  background: transparent;
  border-color: var(--hairline-soft);
  box-shadow: none;
}

/* 같은 병을 앓던 형제 표면들 — 소식함·알림·발자국 카드·OAuth 안내도
   어두운 지면에서는 고정 크림 대신 지면에 그대로 앉힌다. */
html[data-theme="dark"] :is(.reader-inbox-shell, .reader-inbox-panel, .reader-notification-preference-item, .reader-notification-item, .reader-presence-card, .oauth-browser-notice),
html[data-reading-profile="lantern"] :is(.reader-inbox-shell, .reader-inbox-panel, .reader-notification-preference-item, .reader-notification-item, .reader-presence-card, .oauth-browser-notice),
html[data-reading-profile="midnight"] :is(.reader-inbox-shell, .reader-inbox-panel, .reader-notification-preference-item, .reader-notification-item, .reader-presence-card, .oauth-browser-notice),
html[data-reading-profile="blackbook"] :is(.reader-inbox-shell, .reader-inbox-panel, .reader-notification-preference-item, .reader-notification-item, .reader-presence-card, .oauth-browser-notice) {
  background: transparent;
  border-color: var(--hairline-soft);
  box-shadow: none;
}

html[data-theme="dark"] :is(.reader-inbox-shell, .reader-presence-card)::before,
html[data-reading-profile="lantern"] :is(.reader-inbox-shell, .reader-presence-card)::before,
html[data-reading-profile="midnight"] :is(.reader-inbox-shell, .reader-presence-card)::before,
html[data-reading-profile="blackbook"] :is(.reader-inbox-shell, .reader-presence-card)::before {
  background: none;
}

html[data-theme="dark"] .reader-notification-item::before,
html[data-reading-profile="lantern"] .reader-notification-item::before,
html[data-reading-profile="midnight"] .reader-notification-item::before,
html[data-reading-profile="blackbook"] .reader-notification-item::before {
  background: var(--hairline);
}

html[data-theme="dark"] .reader-notification-item.is-unread,
html[data-reading-profile="lantern"] .reader-notification-item.is-unread,
html[data-reading-profile="midnight"] .reader-notification-item.is-unread,
html[data-reading-profile="blackbook"] .reader-notification-item.is-unread {
  background: var(--wash);
}

html[data-theme="dark"] .reader-notification-item.is-unread::before,
html[data-reading-profile="lantern"] .reader-notification-item.is-unread::before,
html[data-reading-profile="midnight"] .reader-notification-item.is-unread::before,
html[data-reading-profile="blackbook"] .reader-notification-item.is-unread::before {
  background: var(--muted);
}

.reader-checkpoint-quiet strong {
  font-size: 13px;
}

.reader-checkpoint-quiet small {
  color: var(--muted);
}

.reader-checkpoint-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px 10px;
  align-items: center;
  cursor: pointer;
  list-style: none;
}

.reader-checkpoint-summary::-webkit-details-marker {
  display: none;
}

.reader-checkpoint-summary::after {
  content: "";
  grid-column: 2;
  grid-row: 1 / 4;
  width: 0.46em;
  height: 0.46em;
  align-self: center;
  justify-self: end;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  color: var(--muted);
  opacity: 0.48;
  transform: translateY(-0.08em) rotate(45deg);
  transform-origin: center;
}

.reader-checkpoint-quiet[open] .reader-checkpoint-summary::after {
  opacity: 0.38;
  transform: translateY(0.1em) rotate(-135deg);
}

.reader-checkpoint-label {
  color: var(--muted);
  font-family: var(--ui-font);
  font-size: 12px;
  line-height: 1.55;
}

.reader-checkpoint-detail-stack {
  display: grid;
  gap: 3px;
  border-top: 1px solid var(--hairline-soft);
  padding-top: 8px;
}

.reader-checkpoint-quiet:not([open]) .reader-checkpoint-detail-stack {
  display: none;
}

.oauth-browser-notice {
  display: grid;
  gap: 6px;
  padding: 11px 12px;
  border: 1px solid rgba(117, 88, 51, 0.12);
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255, 252, 247, 0.92), rgba(248, 243, 235, 0.82)),
    var(--paper);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.oauth-browser-notice strong {
  color: var(--ink);
  font-size: 14px;
}

.oauth-browser-notice p {
  margin: 0;
}

.account-entry-card .oauth-browser-notice {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.support-surface-note {
  font-size: 12px;
  line-height: 1.7;
}

.reader-reading-checkout-hold {
  display: grid;
  justify-items: start;
  gap: 8px;
}

label {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: var(--control-small-font-size);
  font-weight: 700;
}

.checkbox-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.checkbox-row input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: 0;
}

.checkbox-row input[type="checkbox"][aria-invalid="true"] {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

#readerNameInput[aria-invalid="true"] {
  border-color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--ink);
}

.reader-member-required,
.reader-consent-required,
.reader-member-submit {
  border-left: 2px solid var(--ink);
  background: var(--button-wash);
  color: var(--muted-strong);
  line-height: 1.55;
  padding: 8px 10px;
}

.reader-member-required[hidden],
.reader-consent-required[hidden],
.reader-member-submit[hidden] {
  display: none;
}

.reader-oauth-start-notice {
  margin: 0;
}

.reader-oauth-account-debug {
  display: grid;
  gap: 3px;
  padding: 8px 0 0;
  border-top: 1px solid rgba(20, 20, 20, 0.1);
  color: var(--muted);
  font-family: inherit;
  font-size: 11px;
  line-height: 1.55;
  letter-spacing: 0;
  overflow-wrap: anywhere;
}

.reader-oauth-account-debug strong {
  color: var(--muted-strong);
  font-size: 11px;
  font-weight: 600;
}

.reader-oauth-account-debug small {
  color: var(--muted);
  font-size: 10.5px;
}

input,
textarea,
select {
  width: 100%;
  border: 1px solid var(--hairline-soft);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.02);
  color: var(--ink);
  font-family: var(--ui-font);
  font-size: var(--control-font-size);
  font-weight: 700;
  line-height: var(--control-line-height);
  padding: 11px 12px;
}

/* 체크박스·라디오 글리프가 위 width:100%를 flex-basis로 물려받으면
   같은 줄의 설명문이 세로 한 글자 기둥으로 붕괴한다(계정 드로어 메일 토글 실사고). */
input[type="checkbox"],
input[type="radio"] {
  width: auto;
  padding: 0;
}

input[type="number"] {
  appearance: textfield;
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  margin: 0;
  -webkit-appearance: none;
}

input[type="range"] {
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
  /* 44px hit area to match every other reader control; the visible track and
     thumb keep their size — only the touchable box grows. */
  height: 44px;
  min-height: 44px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  padding: 0;
  direction: ltr;
}

input[type="range"]::-webkit-slider-runnable-track {
  height: 4px;
  border: 0;
  border-radius: 999px;
  background: var(--hairline);
}

input[type="range"]::-webkit-slider-thumb {
  width: 18px;
  height: 18px;
  margin-top: -7px;
  border: 1px solid var(--ink);
  border-radius: 50%;
  background: var(--paper);
  -webkit-appearance: none;
  box-shadow: 0 1px 4px rgba(20, 20, 20, 0.12);
}

input[type="range"]::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border: 1px solid var(--ink);
  border-radius: 50%;
  background: var(--paper);
  box-shadow: 0 1px 4px rgba(20, 20, 20, 0.12);
}

input[type="range"]::-moz-range-track {
  height: 4px;
  border: 0;
  border-radius: 999px;
  background: var(--hairline);
}

input:disabled,
textarea:disabled,
select:disabled {
  opacity: 0.56;
  cursor: not-allowed;
}

textarea {
  min-height: 130px;
  resize: vertical;
}

/* 문장 흔적 시트는 body 직속(.reader-surface 밖)이라, 프로필 팔레트가 .reader-surface
   스코프에 담아둔 sheet/quote/trace 토큰을 상속받지 못했다 — 어느 테마에서든 배경이
   투명하고 그림자가 사라진 채로 떴다(특히 기본 심야 필사에서 뒤 본문이 그대로 비침).
   .reader-surface 정의는 그대로 두고(하위 요소 회귀 없음), 시트가 실제로 쓰는 토큰만
   시트 자신에 테마/프로필별로 미러링한다. */
.sentence-sheet {
  --reader-profile-sheet-border: rgba(108, 83, 52, 0.22);
  --reader-profile-sheet-background:
    radial-gradient(circle at top center, rgba(255, 255, 255, 0.74), transparent 52%),
    linear-gradient(180deg, rgba(250, 246, 239, 0.96), rgba(239, 232, 223, 0.96)),
    var(--raised);
  --reader-profile-sheet-shadow:
    0 24px 64px rgba(22, 18, 14, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.62);
  --reader-profile-sheet-rule: linear-gradient(90deg, transparent, rgba(121, 95, 61, 0.24), transparent);
  --reader-profile-quote-border: var(--accent);
  --reader-profile-trace-divider: rgba(121, 95, 61, 0.12);
  --reader-profile-trace-chip-color: var(--muted-strong);
}

html[data-theme="dark"]:not([data-reading-profile]) .sentence-sheet {
  --reader-profile-sheet-border: rgba(215, 221, 239, 0.12);
  --reader-profile-sheet-background:
    radial-gradient(circle at top center, rgba(161, 174, 213, 0.14), transparent 54%),
    linear-gradient(180deg, rgba(22, 24, 33, 0.96), rgba(10, 11, 16, 0.96)),
    rgba(9, 10, 14, 0.94);
  --reader-profile-sheet-shadow:
    0 24px 64px rgba(0, 0, 0, 0.44),
    inset 0 1px 0 rgba(231, 236, 251, 0.05);
  --reader-profile-sheet-rule: linear-gradient(90deg, transparent, rgba(215, 221, 239, 0.22), transparent);
  --reader-profile-quote-border: var(--accent);
  --reader-profile-trace-divider: rgba(215, 221, 239, 0.12);
  --reader-profile-trace-chip-color: rgba(233, 238, 252, 0.82);
}

html[data-reading-profile="lantern"] .sentence-sheet {
  --reader-profile-sheet-border: rgba(245, 228, 198, 0.12);
  --reader-profile-sheet-background:
    radial-gradient(circle at top center, rgba(255, 206, 148, 0.16), transparent 54%),
    linear-gradient(180deg, rgba(39, 28, 21, 0.96), rgba(19, 15, 12, 0.96)),
    rgba(14, 12, 10, 0.92);
  --reader-profile-sheet-shadow:
    0 24px 64px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 247, 231, 0.05);
  --reader-profile-sheet-rule: linear-gradient(90deg, transparent, rgba(255, 218, 170, 0.24), transparent);
  --reader-profile-quote-border: #d8ae73;
  --reader-profile-trace-divider: rgba(255, 218, 170, 0.14);
  --reader-profile-trace-chip-color: rgba(255, 241, 223, 0.82);
}

html[data-reading-profile="midnight"] .sentence-sheet {
  --reader-profile-sheet-border: rgba(215, 221, 239, 0.12);
  --reader-profile-sheet-background:
    radial-gradient(circle at top center, rgba(161, 174, 213, 0.14), transparent 54%),
    linear-gradient(180deg, rgba(22, 24, 33, 0.96), rgba(10, 11, 16, 0.96)),
    rgba(9, 10, 14, 0.94);
  --reader-profile-sheet-shadow:
    0 24px 64px rgba(0, 0, 0, 0.44),
    inset 0 1px 0 rgba(231, 236, 251, 0.05);
  --reader-profile-sheet-rule: linear-gradient(90deg, transparent, rgba(215, 221, 239, 0.22), transparent);
  --reader-profile-quote-border: rgba(176, 190, 230, 0.76);
  --reader-profile-trace-divider: rgba(215, 221, 239, 0.12);
  --reader-profile-trace-chip-color: rgba(233, 238, 252, 0.82);
}

html[data-reading-profile="blackbook"] .sentence-sheet {
  --reader-profile-sheet-border: rgba(255, 255, 255, 0.1);
  --reader-profile-sheet-background: #050505;
  --reader-profile-sheet-shadow:
    0 24px 64px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  --reader-profile-sheet-rule: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  --reader-profile-quote-border: rgba(255, 255, 255, 0.72);
  --reader-profile-trace-divider: rgba(255, 255, 255, 0.1);
  --reader-profile-trace-chip-color: rgba(242, 242, 236, 0.78);
}

html[data-reading-profile="margin"] .sentence-sheet {
  /* margin(세이지 라이트)만 sheet 토큰을 세이지로 재정의한다 — 배경/그림자/구분선은
     base 라이트 미러를 그대로 쓰므로(margin은 그 셋을 안 건드림) 여기선 세이지 강조
     색만 얹어, 시트의 인용 좌측선·상단 룰·메타 글자가 세이지 지면과 어긋나지 않게.
     warm-brown 계열 manuscript/folio/spread는 base 라이트와 사실상 같아 생략. */
  --reader-profile-sheet-border: rgba(121, 126, 104, 0.14);
  --reader-profile-sheet-rule: linear-gradient(90deg, transparent, rgba(121, 132, 104, 0.18), transparent);
  --reader-profile-quote-border: rgba(121, 132, 104, 0.7);
  --reader-profile-trace-chip-color: rgba(83, 85, 77, 0.88);
}

.sentence-sheet {
  position: fixed;
  left: 50%;
  bottom: max(20px, env(safe-area-inset-bottom));
  z-index: 18;
  display: grid;
  grid-template-rows: minmax(0, auto) auto;
  gap: 16px;
  width: min(520px, calc(100% - 32px));
  max-height: min(420px, 58vh);
  overflow: auto;
  overscroll-behavior: contain;
  transform: translate(-50%, calc(100% + 28px));
  border: 1px solid var(--reader-profile-sheet-border);
  border-radius: 24px;
  background: var(--reader-profile-sheet-background);
  font-family: var(--ui-font);
  font-size: var(--control-font-size);
  font-weight: 600;
  line-height: var(--control-line-height);
  backdrop-filter: blur(18px) saturate(112%);
  -webkit-backdrop-filter: blur(18px) saturate(112%);
  box-shadow: var(--reader-profile-sheet-shadow);
  padding: 20px 20px 18px;
  visibility: hidden;
  transition:
    transform 220ms cubic-bezier(0.2, 0.72, 0.2, 1),
    visibility 0s linear 220ms;
}

.sentence-sheet::before {
  content: "";
  position: absolute;
  left: 20px;
  right: 20px;
  top: 0;
  height: 1px;
  background: var(--reader-profile-sheet-rule);
  pointer-events: none;
}

.sentence-sheet > div {
  position: relative;
  z-index: 1;
  min-width: 0;
  min-height: 0;
}

.sentence-sheet-meta {
  margin-top: 8px;
  border-top: 1px solid var(--reader-profile-trace-divider);
  padding-top: 8px;
  color: var(--reader-profile-trace-chip-color);
}

.sentence-sheet .sentence-trace-context {
  margin: 0;
}

.sentence-sheet.is-open {
  transform: translate(-50%, 0);
  visibility: visible;
  transition:
    transform 220ms cubic-bezier(0.2, 0.72, 0.2, 1),
    visibility 0s linear 0s;
}

.sentence-quote {
  margin: 0;
  border-left: 2px solid var(--reader-profile-quote-border);
  padding-left: 14px;
  padding-right: 0;
  max-height: min(9rem, 24vh);
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  color: var(--reader-ink);
  font-family: var(--reader-font-family, var(--body-font));
  font-weight: 400;
  line-height: 1.78;
  overflow-wrap: anywhere;
  text-wrap: pretty;
  font-kerning: normal;
}

.sentence-sheet .sentence-quote {
  max-height: min(7.25rem, 22vh);
}

.sentence-quote.is-long {
  border-left-color: var(--reader-profile-quote-border);
}

.sentence-quote:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

.sentence-quote[lang="en"] {
  overflow-wrap: break-word;
  hyphens: auto;
  hyphenate-limit-chars: 8 3 3;
}

.sentence-quote[lang="ja"] {
  overflow-wrap: break-word;
  word-break: normal;
  line-break: strict;
}

.sentence-quote[lang="ko"] {
  overflow-wrap: break-word;
  word-break: keep-all;
}

.toast {
  position: fixed;
  left: 50%;
  bottom: max(18px, env(safe-area-inset-bottom));
  z-index: 40;
  width: min(440px, calc(100% - 36px));
  min-height: 44px;
  transform: translate(-50%, 20px);
  border: 1px solid rgba(118, 89, 53, 0.16);
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255, 252, 247, 0.96), rgba(248, 243, 235, 0.92)),
    var(--raised);
  color: var(--ink);
  font-family: var(--ui-font);
  font-weight: 700;
  line-height: 1.55;
  opacity: 0;
  pointer-events: none;
  padding: 12px 16px 13px;
  text-align: left;
  text-wrap: pretty;
  font-kerning: normal;
  box-shadow: 0 18px 38px rgba(28, 24, 18, 0.2);
  transition: opacity 160ms ease, transform 160ms ease;
}

.toast::before {
  content: "";
  display: block;
  width: 52px;
  border-top: 1px solid rgba(118, 89, 53, 0.22);
  margin-bottom: 8px;
}

.toast[lang="en"] {
  overflow-wrap: break-word;
  hyphens: auto;
}

.toast[lang="ja"] {
  line-break: strict;
}

.toast[lang="ko"] {
  overflow-wrap: break-word;
  word-break: keep-all;
}

.toast.is-visible {
  transform: translate(-50%, 0);
  opacity: 1;
  /* 보이는 동안만 탭을 받는다(마찰 대청소 조기 닫기) — 숨은 토스트는 계속 통과. */
  pointer-events: auto;
}

/* lantern/blackbook과 순수 다크 테마에서도 고정 크림 공지가 검은 지면 위에
   밝은 얼룩으로 뜨지 않도록 토큰 지면에 앉힌다. midnight은 아래 전용 팔레트가 이긴다. */
html[data-theme="dark"] .toast {
  border-color: var(--hairline-soft);
  background: linear-gradient(180deg, var(--paper-glow), transparent), var(--raised);
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.42);
}

html[data-theme="dark"] .toast::before {
  border-top-color: var(--hairline-soft);
}

html[data-theme="dark"] .reader-return-notice,
html[data-theme="dark"] .reader-return-notice[data-notice-tone="manuscript"] {
  background: var(--veil-bg);
}

html[data-theme="dark"] .support-notice {
  background: linear-gradient(180deg, var(--paper-glow), transparent);
}

html[data-theme="dark"] .support-notice::after {
  background: var(--hairline);
}

html[data-theme="dark"] .support-notice[data-notice-tone="return"] {
  background: linear-gradient(180deg, var(--paper-glow), transparent), var(--paper);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.3);
}

html[data-reading-profile="midnight"] .reader-notice,
html[data-reading-profile="midnight"] .reader-return-notice,
html[data-reading-profile="midnight"] .reader-return-notice[data-notice-tone="manuscript"],
html[data-reading-profile="midnight"] .support-notice,
html[data-reading-profile="midnight"] .support-notice[data-notice-tone="return"],
html[data-reading-profile="midnight"] .toast {
  border-color: rgba(215, 221, 239, 0.18);
  background:
    linear-gradient(180deg, rgba(30, 34, 52, 0.96), rgba(13, 15, 24, 0.94)),
    #121522;
  color: #e8edf9;
  box-shadow:
    0 18px 42px rgba(0, 0, 0, 0.42),
    inset 0 1px 0 rgba(231, 236, 251, 0.06);
}

html[data-reading-profile="midnight"] .reader-return-notice,
html[data-reading-profile="midnight"] .reader-return-notice[data-notice-tone="manuscript"] {
  border: 0;
  border-left: 1px solid rgba(215, 221, 239, 0.18);
  background: rgba(18, 21, 34, 0.82);
  box-shadow: none;
}

html[data-reading-profile="midnight"] .reader-return-notice,
html[data-reading-profile="midnight"] .reader-return-notice[data-notice-tone="manuscript"],
html[data-reading-profile="midnight"] .support-notice,
html[data-reading-profile="midnight"] .support-notice[data-notice-tone="return"] {
  color: #d6deef;
}

html[data-reading-profile="midnight"] .support-notice::after {
  background: rgba(215, 221, 239, 0.34);
}

html[data-reading-profile="midnight"] .toast::before {
  border-top-color: rgba(215, 221, 239, 0.3);
}

.has-sentence-sheet-open .toast {
  bottom: calc(max(18px, env(safe-area-inset-bottom)) + min(230px, 38vh));
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

html[data-mobile-viewport-guard="active"] .reader-bottombar {
  grid-template-columns: minmax(58px, 1fr) repeat(3, minmax(48px, 0.76fr)) minmax(58px, 1fr);
  gap: 4px;
  min-height: 50px;
  padding: 7px 10px max(7px, env(safe-area-inset-bottom));
}

html[data-mobile-viewport-guard="active"] .reader-bottombar .plain-button {
  min-height: 44px;
  padding: 4px 3px;
  white-space: nowrap;
}

html[data-mobile-viewport-guard="active"] .reader-surface.is-content-next-handoff .reading-progress {
  width: var(--reader-profile-compact-handoff-progress-width);
  bottom: var(--reader-profile-compact-handoff-progress-bottom);
  opacity: var(--reader-profile-compact-handoff-progress-opacity);
}

html[data-mobile-viewport-guard="active"] .reader-surface:not(.is-chrome-visible) .reader-topbar,
html[data-mobile-viewport-guard="active"] .reader-surface:not(.is-chrome-visible) .reader-bottombar {
  height: 0;
  min-height: 0;
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: 0;
  border-width: 0;
  overflow: hidden;
  transform: none;
}

html[data-mobile-viewport-guard="active"] .reader-surface:not(.is-chrome-visible) .reader-content {
  padding-top: max(30px, calc(env(safe-area-inset-top) + 20px));
  padding-bottom: max(72px, calc(env(safe-area-inset-bottom) + 54px));
}

/* Mobile reader chrome is an overlay, including in scroll/scene modes. Keeping
   the content padding identical on both sides of a center-tap toggle prevents
   the restored sentence anchor from inheriting a deterministic vertical drift. */
html[data-mobile-viewport-guard="active"]:not([data-reading-mode="page"]):not([data-reading-mode="spread"]) .reader-surface:not(.is-chrome-visible) .reader-content {
  padding-top: max(var(--reader-content-top-padding, var(--reader-top-padding)), calc(env(safe-area-inset-top) + 28px));
  padding-bottom: max(var(--reader-effective-content-bottom-padding), calc(env(safe-area-inset-bottom) + 24px));
}

html[data-reader-viewport-shape^="compact"]:not([data-reader-viewport-shape="compact-landscape"]):not([data-reading-mode="page"]):not([data-reading-mode="spread"]) {
  --reader-scroll-text-inset: 30px;
}

html[data-mobile-viewport-guard="active"][data-reading-mode="page"] .reader-content.is-page-mode,
html[data-mobile-viewport-guard="active"][data-reading-mode="spread"] .reader-content.is-spread-mode,
html[data-mobile-viewport-guard="active"][data-reading-mode="page"] .reader-surface:not(.is-chrome-visible) .reader-content,
html[data-mobile-viewport-guard="active"][data-reading-mode="spread"] .reader-surface:not(.is-chrome-visible) .reader-content {
  padding-top: max(var(--reader-content-top-padding, var(--reader-top-padding)), calc(env(safe-area-inset-top) + 28px));
  padding-bottom: max(
    var(--reader-effective-content-bottom-padding),
    calc(env(safe-area-inset-bottom) + 54px + var(--reader-paged-safe-area-reserve, 0px))
  );
}

html[data-mobile-viewport-guard="active"][data-reading-mode="page"] .reader-topbar,
html[data-mobile-viewport-guard="active"][data-reading-mode="spread"] .reader-topbar {
  position: absolute;
  top: max(6px, calc(env(safe-area-inset-top) * 0.3));
  left: 50%;
  margin: 0;
  transform: translateX(-50%);
}

html[data-mobile-viewport-guard="active"][data-reading-mode="page"] .reader-bottombar,
html[data-mobile-viewport-guard="active"][data-reading-mode="spread"] .reader-bottombar {
  position: absolute;
  bottom: max(9px, calc(env(safe-area-inset-bottom) * 0.32 + 7px));
  left: 50%;
  margin: 0;
  transform: translateX(-50%);
}

html[data-mobile-viewport-guard="active"][data-reading-mode="page"] .reader-surface:not(.is-chrome-visible) .reader-topbar,
html[data-mobile-viewport-guard="active"][data-reading-mode="spread"] .reader-surface:not(.is-chrome-visible) .reader-topbar {
  transform: translate(-50%, -12px);
}

html[data-mobile-viewport-guard="active"][data-reading-mode="page"] .reader-surface:not(.is-chrome-visible) .reader-bottombar,
html[data-mobile-viewport-guard="active"][data-reading-mode="spread"] .reader-surface:not(.is-chrome-visible) .reader-bottombar {
  transform: translate(-50%, 12px);
}

html[data-mobile-viewport-guard="active"] .reader-topbar {
  grid-template-columns: minmax(0, 1fr) minmax(0, var(--reader-profile-compact-topbar-meta-width)) minmax(0, 1fr);
  border-radius: var(--reader-profile-compact-topbar-radius);
  padding-left: 12px;
  padding-right: 12px;
}

html[data-mobile-viewport-guard="active"] .reader-topbar .plain-button {
  min-height: 44px;
  padding-left: 9px;
  padding-right: 9px;
}

html[data-mobile-viewport-guard="active"] .chapter-meta {
  grid-template-columns: 1fr;
  gap: 1px;
  padding: 7px 10px 8px;
  border-radius: var(--reader-profile-compact-chapter-meta-radius);
}

html[data-mobile-viewport-guard="active"] .chapter-context-label,
html[data-mobile-viewport-guard="active"] .bookmark-status-label {
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}

html[data-mobile-viewport-guard="active"] .bookmark-status-label {
  border-left: 0;
  padding-left: 0;
  font-size: 10px;
  opacity: 0.74;
}

html[data-mobile-viewport-guard="active"] .drawer {
  height: 100svh;
  height: min(100svh, 100dvh);
  height: var(--reader-drawer-height, min(100svh, 100dvh));
  min-height: 0;
  max-height: 100svh;
  max-height: min(100svh, 100dvh);
  max-height: var(--reader-drawer-height, min(100svh, 100dvh));
  width: 100%;
  max-width: 100%;
  border-left: 0;
}

html[data-mobile-viewport-guard="active"] .reader-app,
html[data-mobile-viewport-guard="active"] .reader-surface {
  height: 100svh;
  height: min(100svh, 100dvh);
  height: var(--reader-app-height, min(100svh, 100dvh));
  min-height: 100svh;
  min-height: min(100svh, 100dvh);
  min-height: var(--reader-app-height, min(100svh, 100dvh));
  max-height: min(100svh, 100dvh);
  max-height: var(--reader-app-height, min(100svh, 100dvh));
}

html[data-mobile-viewport-guard="active"] .drawer-body {
  gap: 12px;
  scroll-padding-bottom: max(256px, calc(env(safe-area-inset-bottom) + 212px));
  scroll-padding-bottom: var(--reader-drawer-reach-padding);
  padding: 16px 16px max(256px, calc(env(safe-area-inset-bottom) + 212px));
  padding: 16px 16px var(--reader-drawer-reach-padding);
}

html[data-mobile-viewport-guard="active"] .reader-content-inner {
  width: 100%;
  padding: var(--reader-inner-top-padding, 18px) 0 var(--reader-effective-inner-bottom-padding);
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

html[data-mobile-viewport-guard="active"] .reader-content-inner::before {
  display: none;
}

html[data-reader-viewport-shape^="compact"] .reader-content h1,
html[data-mobile-viewport-guard="active"] .reader-content h1 {
  gap: 6px;
  width: min(34ch, 100%);
  margin-bottom: 0.72rem;
  padding-bottom: 0.42rem;
  font-size: 0.94em;
  line-height: 1.36;
}

html[data-reader-viewport-shape^="compact"] .reader-content h1 .reader-chapter-kicker,
html[data-mobile-viewport-guard="active"] .reader-content h1 .reader-chapter-kicker {
  gap: 6px;
  font-size: 0.5em;
  opacity: 0.74;
}

html[data-reader-viewport-shape^="compact"] .reader-content h1 .reader-chapter-kicker::before,
html[data-reader-viewport-shape^="compact"] .reader-content h1 .reader-chapter-kicker::after,
html[data-mobile-viewport-guard="active"] .reader-content h1 .reader-chapter-kicker::before,
html[data-mobile-viewport-guard="active"] .reader-content h1 .reader-chapter-kicker::after {
  width: 14px;
  opacity: 0.6;
}

html[data-reader-viewport-shape^="compact"] .reader-content h1 .reader-chapter-heading-label,
html[data-mobile-viewport-guard="active"] .reader-content h1 .reader-chapter-heading-label {
  font-size: 1em;
}

html[data-reader-viewport-shape^="compact"] .reader-content h1 .reader-chapter-subtitle,
html[data-mobile-viewport-guard="active"] .reader-content h1 .reader-chapter-subtitle {
  font-size: 0.58em;
  line-height: 1.45;
  opacity: 0.84;
}

html[data-reader-viewport-shape^="compact"] .reader-content h1::after,
html[data-mobile-viewport-guard="active"] .reader-content h1::after {
  width: min(48px, 34%);
  opacity: 0.58;
}

html[data-mobile-viewport-guard="active"] .reader-content-inner > p:not(.reader-notice) {
  width: min(var(--reader-mobile-measure-active, var(--reader-mobile-measure)), 100%);
  max-width: 100%;
}

html[data-mobile-viewport-guard="active"] .reader-content[data-content-locale="ko"] .reader-content-inner > p:not(.reader-notice) {
  width: min(var(--reader-mobile-measure-active, var(--reader-mobile-measure)), 100%);
  max-width: 100%;
}

html[data-mobile-viewport-guard="active"] .reader-content.is-page-mode .reader-content-inner > h1,
html[data-mobile-viewport-guard="active"] .reader-content.is-page-mode .reader-content-inner > p,
html[data-mobile-viewport-guard="active"] .reader-content.is-page-mode .reader-content-inner > section,
html[data-mobile-viewport-guard="active"] .reader-content.is-spread-mode .reader-content-inner > h1,
html[data-mobile-viewport-guard="active"] .reader-content.is-spread-mode .reader-content-inner > p,
html[data-mobile-viewport-guard="active"] .reader-content.is-spread-mode .reader-content-inner > section {
  width: min(100%, var(--reader-page-width-active));
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}

html[data-mobile-viewport-guard="active"] .reader-content p {
  margin-bottom: calc((var(--reader-paragraph-gap-active, var(--paragraph-gap)) * 1.04) + var(--reader-paragraph-gap-adjust, 0em));
}

html[data-mobile-viewport-guard="active"] .reader-content[data-content-locale="ko"] p:not([data-reading-lang]),
html[data-mobile-viewport-guard="active"] .reader-content[data-content-locale="ko"] p:not([data-reading-lang]) .sentence,
html[data-mobile-viewport-guard="active"] .reader-content p[lang="ko"],
html[data-mobile-viewport-guard="active"] .reader-content p[lang="ko"] .sentence {
  overflow-wrap: break-word;
  word-break: keep-all;
  line-break: loose;
}

@media (max-width: 720px) {
  body {
    background:
      linear-gradient(180deg, var(--paper), var(--paper-deep) 100%),
      var(--paper);
  }

  .reader-surface::before {
    opacity: 0.3;
    background:
      linear-gradient(90deg, var(--paper-edge), transparent 9%, transparent 91%, var(--paper-edge)),
      linear-gradient(180deg, transparent 0%, var(--paper-breath) 62%, transparent 100%);
  }

  :root {
    --reader-font-size: 17px;
    --reader-line-height: 1.9;
    --reader-width-base: 600px;
    --reader-inline-padding: 22px;
    --reader-top-padding: 50px;
    --reader-bottom-padding: 94px;
    --reader-page-gutter: 32px;
    --paragraph-gap: 1.08em;
  }

  .reader-topbar {
    grid-template-columns: minmax(44px, 0.72fr) minmax(108px, 1fr) minmax(44px, 0.72fr);
    gap: 4px;
    width: calc(100% - 36px);
    min-height: 38px;
    margin: max(6px, calc(env(safe-area-inset-top) * 0.3)) 18px 0;
    border-color: transparent;
    border-radius: 999px;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    padding: 3px 0;
  }

  .reader-topbar .plain-button {
    /* 44px touch floor (Apple HIG / WCAG 2.5.8 AAA) on the primary reader nav —
       the old 34px sat every constantly-tapped control under the comfortable
       target; the floating bars stretch to absorb the taller buttons. */
    min-height: 44px;
    border-color: transparent;
    border-radius: 999px;
    background: transparent;
    color: var(--muted);
    padding: 0 5px;
    font-size: 11px;
    line-height: 1.25;
  }

  html[data-mobile-viewport-guard="active"] .reader-topbar {
    grid-template-columns: minmax(44px, 0.72fr) minmax(108px, 1fr) minmax(44px, 0.72fr);
    gap: 4px;
    width: calc(100% - 36px);
    min-height: 38px;
    margin: max(6px, calc(env(safe-area-inset-top) * 0.3)) 18px 0;
    border-color: transparent;
    border-radius: 999px;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    padding: 3px 0;
  }

  html[data-mobile-viewport-guard="active"] .reader-topbar .plain-button {
    min-height: 44px;
    border-color: transparent;
    border-radius: 999px;
    background: transparent;
    color: var(--muted);
    padding: 0 5px;
    font-size: 11px;
    line-height: 1.25;
  }

  .chapter-meta {
    grid-template-columns: 1fr;
    gap: 1px;
    padding: 4px 6px 5px;
    border-color: transparent;
    border-radius: var(--reader-profile-compact-chapter-meta-radius);
    background: transparent;
    box-shadow: none;
  }

  html[data-mobile-viewport-guard="active"] .chapter-meta {
    padding: 4px 6px 5px;
    border-color: transparent;
    background: transparent;
    box-shadow: none;
  }

  html[data-mobile-viewport-guard="active"] .chapter-label {
    font-size: 11px;
    letter-spacing: 0.02em;
  }

  html[data-mobile-viewport-guard="active"] .chapter-context-label,
  html[data-mobile-viewport-guard="active"] .bookmark-status-label {
    font-size: 10px;
    line-height: 1.22;
  }

  .chapter-context-label,
  .bookmark-status-label {
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  .bookmark-status-label {
    border-left: 0;
    padding-left: 0;
    font-size: 10px;
    opacity: 0.74;
  }

  .reader-bottombar {
    width: calc(100% - 34px);
    grid-template-columns: minmax(58px, 1fr) repeat(3, minmax(48px, 0.76fr)) minmax(58px, 1fr);
    gap: 5px;
    min-height: 42px;
    margin: 0 17px max(9px, calc(env(safe-area-inset-bottom) * 0.32 + 7px));
    border-color: transparent;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    padding: 0 0 max(3px, env(safe-area-inset-bottom));
  }

  html[data-mobile-viewport-guard="active"] .reader-bottombar {
    width: calc(100% - 34px);
    min-height: 42px;
    margin: 0 17px max(9px, calc(env(safe-area-inset-bottom) * 0.32 + 7px));
    border-color: transparent;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    padding: 0 0 max(3px, env(safe-area-inset-bottom));
  }

  .reader-bottombar .plain-button {
    min-height: 44px;
    border-color: transparent;
    background: transparent;
    padding: 3px 2px;
    color: var(--muted);
    font-size: 11px;
    line-height: 1.25;
    white-space: nowrap;
  }

  html[data-mobile-viewport-guard="active"] .reader-bottombar .plain-button {
    min-height: 44px;
    border-color: transparent;
    background: transparent;
    padding: 3px 2px;
    color: var(--muted);
    font-size: 11px;
    line-height: 1.25;
  }

  .reader-bottombar [data-action="previous"],
  .reader-bottombar [data-action="next"],
  html[data-mobile-viewport-guard="active"] .reader-bottombar [data-action="previous"],
  html[data-mobile-viewport-guard="active"] .reader-bottombar [data-action="next"] {
    border-color: var(--hairline-soft);
    background: var(--button-wash);
    color: var(--ink);
    font-size: 12px;
    opacity: 0.9;
  }

  .reader-surface.is-content-next-handoff .reading-progress {
    width: var(--reader-profile-compact-handoff-progress-width);
    bottom: var(--reader-profile-compact-handoff-progress-bottom);
    opacity: var(--reader-profile-compact-handoff-progress-opacity);
  }

  .chapter-afterglow-minimal {
    margin-top: clamp(1.9rem, 7svh, 2.8rem);
    padding-top: 16px;
    padding-bottom: 8px;
  }

  .chapter-afterglow[data-reader-afterglow-scene="episode-end"] {
    --reader-terminal-action-shift-y: 0px;
    min-height: clamp(18rem, 58svh, 30rem);
    margin-top: clamp(4rem, 13svh, 6.8rem);
    padding-top: 18px;
    padding-bottom: max(
      2rem,
      calc(env(safe-area-inset-bottom) + var(--reader-terminal-bottom-reserve, 70px))
    );
  }

  .chapter-afterglow-open-actions {
    width: min(18rem, 100%);
    margin-top: clamp(0.58rem, 1.8svh, 0.95rem);
  }

  .chapter-afterglow-next {
    min-height: 44px;
    padding: 0.72rem 0.12rem 0.68rem;
    font-size: 12.5px;
  }

  .reader-content.is-page-mode .chapter-afterglow[data-reader-afterglow-scene="episode-end"],
  .reader-content.is-spread-mode .chapter-afterglow[data-reader-afterglow-scene="episode-end"] {
    --reader-terminal-action-shift-y: clamp(52px, 8.8svh, 74px);
  }

  .chapter-afterglow-open[data-reader-afterglow-scene="episode-end"] {
    --reader-terminal-action-shift-y: 0px;
    align-content: start;
    min-height: 0;
    /* Mobile mirror of the desktop breath fix (line ~2586): the old ~19px sat the
       handoff right under the last sentence while ~82px pooled below it — the exact
       crowded-above/empty-below imbalance. Phone reading is the dominant surface, so
       give the final line the same comfortable rest before the quiet "다음". */
    margin-top: clamp(2.6rem, 6.5svh, 3.75rem);
    padding-top: 5px;
    padding-bottom: max(4.45rem, calc(env(safe-area-inset-bottom) + 82px));
    -webkit-column-break-inside: auto;
    break-inside: auto;
    page-break-inside: auto;
  }

  .reader-content.is-page-mode .chapter-afterglow-open[data-reader-afterglow-scene="episode-end"],
  .reader-content.is-spread-mode .chapter-afterglow-open[data-reader-afterglow-scene="episode-end"] {
    --reader-terminal-action-shift-y: 0px;
    -webkit-column-break-before: auto;
    break-before: auto;
    break-inside: auto;
    page-break-before: auto;
    page-break-inside: auto;
    align-content: start;
    min-height: 0;
    /* mirror the mobile scroll breath (see the ≤720 scroll -open fix) */
    margin-top: clamp(2.6rem, 6.5svh, 3.75rem);
    padding-top: 5px;
    padding-bottom: max(4.65rem, calc(env(safe-area-inset-bottom) + 86px));
  }

  .reader-content.is-page-mode .chapter-afterglow-open[data-reader-afterglow-scene="episode-end"] .chapter-afterglow-open-actions,
  .reader-content.is-spread-mode .chapter-afterglow-open[data-reader-afterglow-scene="episode-end"] .chapter-afterglow-open-actions {
    transform: none;
  }

  html[data-reading-mode="scene"] .reader-bottombar:not(.is-content-next-handoff),
  html[data-reading-mode="spread"] .reader-bottombar:not(.is-content-next-handoff) {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 3px 5px;
    width: min(var(--reader-profile-compact-rail-max-width), calc(100% - var(--reader-profile-compact-rail-side-gap)));
    min-height: var(--reader-profile-compact-rail-min-height-narrow);
    border-radius: var(--reader-profile-compact-rail-radius);
    padding: 7px 10px max(7px, env(safe-area-inset-bottom));
  }

  html[data-reading-mode="scene"] .reader-bottombar:not(.is-content-next-handoff) [data-action="contents"],
  html[data-reading-mode="scene"] .reader-bottombar:not(.is-content-next-handoff) [data-action="settings"],
  html[data-reading-mode="scene"] .reader-bottombar:not(.is-content-next-handoff) [data-action="highlight"],
  html[data-reading-mode="spread"] .reader-bottombar:not(.is-content-next-handoff) [data-action="contents"],
  html[data-reading-mode="spread"] .reader-bottombar:not(.is-content-next-handoff) [data-action="settings"],
  html[data-reading-mode="spread"] .reader-bottombar:not(.is-content-next-handoff) [data-action="highlight"] {
    min-height: 32px;
    padding: 2px 5px;
    font-size: 10px;
  }

  html[data-reading-mode="scene"] .reader-bottombar:not(.is-content-next-handoff) [data-action="contents"],
  html[data-reading-mode="spread"] .reader-bottombar:not(.is-content-next-handoff) [data-action="contents"] {
    grid-column: 2;
    grid-row: 1;
  }

  html[data-reading-mode="scene"] .reader-bottombar:not(.is-content-next-handoff) [data-action="settings"],
  html[data-reading-mode="spread"] .reader-bottombar:not(.is-content-next-handoff) [data-action="settings"] {
    grid-column: 3;
    grid-row: 1;
  }

  html[data-reading-mode="scene"] .reader-bottombar:not(.is-content-next-handoff) [data-action="highlight"],
  html[data-reading-mode="spread"] .reader-bottombar:not(.is-content-next-handoff) [data-action="highlight"] {
    grid-column: 4;
    grid-row: 1;
  }

  html[data-reading-mode="scene"] .reader-bottombar:not(.is-content-next-handoff) [data-action="previous"],
  html[data-reading-mode="scene"] .reader-bottombar:not(.is-content-next-handoff) [data-action="next"],
  html[data-reading-mode="spread"] .reader-bottombar:not(.is-content-next-handoff) [data-action="previous"],
  html[data-reading-mode="spread"] .reader-bottombar:not(.is-content-next-handoff) [data-action="next"] {
    min-height: 44px;
    padding-left: 7px;
    padding-right: 7px;
  }

  html[data-reading-mode="scene"] .reader-bottombar:not(.is-content-next-handoff) [data-action="previous"],
  html[data-reading-mode="spread"] .reader-bottombar:not(.is-content-next-handoff) [data-action="previous"] {
    grid-column: 1 / span 2;
    grid-row: 2;
  }

  html[data-reading-mode="scene"] .reader-bottombar:not(.is-content-next-handoff) [data-action="next"],
  html[data-reading-mode="spread"] .reader-bottombar:not(.is-content-next-handoff) [data-action="next"] {
    grid-column: 4 / span 2;
    grid-row: 2;
  }

  .reader-tap-zone {
    inset: 16% var(--reader-tap-zone-side-inset) 24%;
  }

  .quiet-hint {
    opacity: 0;
  }

  .reading-progress {
    width: min(300px, calc(100% - 110px));
    height: 2px;
    bottom: calc(7px + env(safe-area-inset-bottom));
    box-shadow: none;
  }

  .reader-surface:not(.is-chrome-visible) .reader-topbar,
  .reader-surface:not(.is-chrome-visible) .reader-bottombar {
    height: 0;
    min-height: 0;
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
    border-width: 0;
    overflow: hidden;
    transform: none;
  }

  .reader-surface:not(.is-chrome-visible) .reader-content {
    padding-top: max(30px, calc(env(safe-area-inset-top) + 20px));
    padding-bottom: max(72px, calc(env(safe-area-inset-bottom) + 54px));
  }

  html:not([data-reading-mode="page"]):not([data-reading-mode="spread"]) .reader-surface:not(.is-chrome-visible) .reader-content {
    padding-top: max(var(--reader-content-top-padding, var(--reader-top-padding)), calc(env(safe-area-inset-top) + 28px));
    padding-bottom: max(var(--reader-effective-content-bottom-padding), calc(env(safe-area-inset-bottom) + 24px));
  }

  html[data-reading-mode="page"] .reader-content.is-page-mode,
  html[data-reading-mode="spread"] .reader-content.is-spread-mode,
  html[data-reading-mode="page"] .reader-surface:not(.is-chrome-visible) .reader-content,
  html[data-reading-mode="spread"] .reader-surface:not(.is-chrome-visible) .reader-content {
    padding-top: max(var(--reader-content-top-padding, var(--reader-top-padding)), calc(env(safe-area-inset-top) + 28px));
    padding-bottom: max(
      84px,
      min(var(--reader-effective-content-bottom-padding), 114px),
      calc(env(safe-area-inset-bottom) + 54px + var(--reader-paged-safe-area-reserve, 0px))
    );
  }

  .reader-content-inner {
    width: 100%;
    padding: var(--reader-inner-top-padding, 18px) 0 var(--reader-effective-inner-bottom-padding);
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .reader-content-inner::before {
    display: none;
  }

  .reader-content h1 {
    width: min(26ch, 100%);
    gap: 8px;
    margin-bottom: 1.68rem;
    padding-bottom: 0.92rem;
    font-size: 1em;
  }

  .reader-content h1 .reader-chapter-heading-label {
    font-size: 1.06em;
  }

  .reader-content h1 .reader-chapter-kicker {
    font-size: 0.52em;
  }

  .reader-content-inner > p:not(.reader-notice) {
    width: min(var(--reader-mobile-measure-active, var(--reader-mobile-measure)), 100%);
    max-width: 100%;
  }

  .reader-content[data-content-locale="ko"] p:not([data-reading-lang]),
  .reader-content[data-content-locale="ko"] p:not([data-reading-lang]) .sentence,
  .reader-content p[lang="ko"],
  .reader-content p[lang="ko"] .sentence {
    overflow-wrap: break-word;
    word-break: keep-all;
    line-break: loose;
  }

  .drawer {
    width: 100%;
    max-width: 100%;
    border-left: 0;
  }

  .drawer-header {
    padding: max(14px, env(safe-area-inset-top)) 16px 12px;
  }

  .drawer-header h2 {
    font-size: 19px;
  }

  .drawer-header h2::after {
    width: 32px;
    margin-top: 7px;
  }

  .drawer-body {
    gap: 12px;
    scroll-padding-bottom: max(256px, calc(env(safe-area-inset-bottom) + 212px));
    scroll-padding-bottom: var(--reader-drawer-reach-padding);
    padding: 16px 16px max(256px, calc(env(safe-area-inset-bottom) + 212px));
    padding: 16px 16px var(--reader-drawer-reach-padding);
  }

  .drawer:not(.drawer-author-room) .drawer-body {
    scrollbar-gutter: auto;
    scrollbar-width: none;
  }

  .drawer:not(.drawer-author-room) .drawer-body::-webkit-scrollbar {
    width: 0;
    height: 0;
  }

  .drawer.drawer-author-room .drawer-header,
  .drawer.drawer-author-room .drawer-body {
    width: calc(100% - 28px);
  }

  .drawer.drawer-author-room .drawer-body {
    grid-template-columns: 1fr;
    gap: 16px;
    padding-right: 0;
    padding-left: 0;
  }

  .drawer.drawer-author-room .drawer-section {
    grid-column: 1 / -1;
  }

  .drawer-section {
    gap: 10px;
    padding-bottom: 16px;
  }

  .chapter-list {
    gap: 0;
    border-top: 1px solid var(--hairline-soft);
  }

  .chapter-list button {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
    min-height: 50px;
    border: 0;
    border-bottom: 1px solid var(--hairline-soft);
    border-radius: 0;
    background: transparent;
    padding: 12px 2px 12px 12px;
    box-shadow: none;
  }

  .chapter-list button:hover {
    background: transparent;
  }

  .chapter-list button.is-active {
    border-color: var(--hairline-soft);
    background: linear-gradient(90deg, var(--button-wash), transparent 78%);
    box-shadow: inset 2px 0 0 var(--ink);
  }

  .chapter-list button strong {
    min-width: 0;
    font-size: 14px;
    line-height: 1.45;
  }

  .chapter-list button small {
    justify-self: end;
    color: var(--muted);
    font-size: 11px;
    line-height: 1.35;
    white-space: nowrap;
  }

  .reading-atmosphere-card {
    gap: 9px;
    padding: 8px 0 13px;
    border: 0;
    border-bottom: 1px solid var(--hairline-soft);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .reading-atmosphere-values span {
    min-height: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    padding: 0;
    color: var(--muted);
    font-size: 0.68rem;
  }

  .reading-atmosphere-measures,
  .reading-profile-card-measures {
    display: none;
  }

  .reading-profile-copy {
    gap: 3px;
  }

  .reading-profile-shell {
    gap: 12px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .settings-primary .reading-profile-grid {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
    gap: 0;
    border-top: 0;
  }

  .reading-profile-card.quiet-button,
  .reading-profile-card.quiet-button[data-reading-profile-theme="dark"] {
    --reading-profile-card-ink: var(--ink);
    --reading-profile-card-muted: var(--muted);
    --reading-profile-card-muted-strong: var(--muted);
    --reading-profile-card-active-border: var(--ink);
    --reading-profile-card-dot: var(--ink);
    --reading-profile-card-dot-ring: rgba(255, 255, 255, 0.66);
  }

  .reading-profile-card.quiet-button {
    grid-template-rows: auto auto;
    min-height: 44px;
    gap: 2px;
    border: 0;
    border-top: 1px solid var(--hairline-soft);
    border-radius: 0;
    background: transparent;
    padding: 4px 0 5px;
    align-items: start;
    justify-content: stretch;
    justify-items: start;
    text-align: left;
    box-shadow: none;
  }

  .reading-profile-card.quiet-button[data-reading-profile] {
    background: transparent;
    box-shadow: none;
  }

  .reading-profile-card.quiet-button[aria-pressed="true"] {
    border-top-color: var(--hairline-soft);
    box-shadow: none;
  }

  .reading-profile-card.quiet-button[data-reading-profile-theme="dark"][aria-pressed="true"] {
    border-top-color: var(--hairline-soft);
    box-shadow: none;
  }

  .reading-profile-card.quiet-button[aria-pressed="true"]::after {
    top: 6px;
    right: 9px;
    width: 6px;
    height: 6px;
  }

  .reading-profile-card.quiet-button[data-reading-profile="blackbook"] {
    min-height: 44px;
  }

  .reading-profile-card-title {
    font-size: 13px;
    line-height: 1.34;
  }

  .settings-primary .reading-profile-card-meta {
    display: none;
  }

  .reading-profile-card-meta {
    font-size: 9.5px;
    line-height: 1.38;
  }

  .reading-profile-card-body {
    display: none;
  }

  .compact-primary {
    gap: 9px;
  }

  .account-primary .reader-checkpoint-quiet {
    padding: 10px 0 0;
  }

  .support-primary .reader-checkpoint-quiet {
    padding: 10px 12px;
  }

  .amount-readout {
    gap: 4px;
    padding-bottom: 8px;
  }

  .support-primary {
    font-size: 14px;
  }

  .support-opening {
    width: min(100%, 32ch);
  }

  .support-ritual-card {
    padding: 14px 14px 15px;
    border-radius: 16px;
  }

  .support-ritual-card.support-ritual-card-reading {
    padding: 12px 0 13px;
    border-radius: 0;
  }

  .support-field-disclosure {
    padding: 10px 0 0;
    border-radius: 0;
  }

  .support-submit-row .solid-button {
    width: 100%;
  }

  .support-primary[data-support-kind="reading"] .support-submit-row .solid-button {
    width: 220px;
    max-width: 100%;
  }

  .support-resume-bridge {
    padding: 10px 0 0;
    border-radius: 0;
  }

  .support-resume-copy .quiet-button {
    width: 100%;
  }

  .support-secondary-shell {
    padding: 14px 0 0;
    border-radius: 0;
  }

  .support-notice[data-notice-tone="return"] {
    padding: 10px 12px;
  }

  .support-primary .muted,
  .support-primary small,
  .support-primary .support-surface-note,
  .support-primary .quiet-disclosure-body {
    font-size: 13px;
  }

  .amount-readout strong {
    font-size: 20px;
  }

  .support-level-seal,
  .amount-tone-seal {
    min-height: 22px;
    padding: 1px 7px;
  }

  .support-boundary-line {
    margin-top: -3px;
    padding-left: 8px;
    line-height: 1.35;
  }

  .sentence-support-primary .sentence-quote {
    max-height: min(6rem, 18vh);
  }

  .work-item {
    min-height: 58px;
  }
}

@media (max-width: 480px) and (max-height: 700px) {
  .reader-content.is-page-mode .chapter-afterglow-open[data-reader-afterglow-scene="episode-end"] .chapter-afterglow-open-actions,
  .reader-content.is-spread-mode .chapter-afterglow-open[data-reader-afterglow-scene="episode-end"] .chapter-afterglow-open-actions {
    transform: none;
  }
}

@media (max-width: 480px) {
  .drawer-header {
    padding-left: 14px;
    padding-right: 14px;
  }

  .drawer-body {
    gap: 11px;
    scroll-padding-bottom: max(272px, calc(env(safe-area-inset-bottom) + 228px));
    scroll-padding-bottom: var(--reader-drawer-reach-padding);
    padding: 14px 14px max(272px, calc(env(safe-area-inset-bottom) + 228px));
    padding: 14px 14px var(--reader-drawer-reach-padding);
  }

  .drawer-section {
    padding-bottom: 14px;
  }

  .drawer-header h2 {
    font-size: 18px;
  }

  .account-secondary-shell {
    padding-top: 12px;
  }

  .account-secondary-shell .quiet-disclosure {
    padding: 11px 0;
  }

  .account-secondary-shell .quiet-disclosure summary {
    min-height: 32px;
    font-size: 13px;
  }

  .account-secondary-shell .quiet-disclosure-body,
  .account-secondary-shell .quiet-disclosure-body .muted {
    font-size: 12.5px;
    line-height: 1.64;
  }

  .compact-primary {
    gap: 8px;
  }

  .support-opening {
    width: 100%;
  }

  .support-ritual-card {
    padding: 13px 13px 14px;
    border-radius: 15px;
  }

  .support-ritual-card.support-ritual-card-reading {
    padding: 12px 0 13px;
    border-radius: 0;
  }

  .support-field-disclosure {
    padding: 10px 0 0;
    border-radius: 0;
  }

  .amount-readout strong {
    font-size: 19px;
  }

  .sentence-support-primary .sentence-quote {
    max-height: min(5.6rem, 16vh);
  }

  :root {
    --reader-inline-padding: 22px;
    --reader-top-padding: 48px;
    --reader-bottom-padding: 92px;
    --reader-page-gutter: 28px;
  }

  .sentence-sheet {
    width: calc(100% - 24px);
    max-height: min(420px, 58vh);
    max-height: min(420px, calc(var(--reader-viewport-height, 100dvh) - 116px));
    gap: 12px;
    padding: 14px;
    border-radius: 18px;
  }

  .sentence-sheet .sentence-quote {
    max-height: min(6.5rem, 19vh);
  }

  .sentence-sheet .button-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .settings-primary .reading-profile-grid {
    grid-template-columns: 1fr;
  }

  .chapter-context-label,
  .bookmark-status-label {
    max-width: 140px;
  }

  .reader-content-inner {
    width: 100%;
    padding: var(--reader-inner-top-padding, 14px) 0 var(--reader-effective-inner-bottom-padding);
    border-radius: 0;
  }
}

@media (max-width: 380px) {
  :root {
    --reader-inline-padding: 18px;
    --reader-top-padding: 46px;
    --reader-bottom-padding: 88px;
    --reader-page-gutter: 24px;
    --reader-compact-measure: 25.5rem;
  }

  .reader-topbar,
  html[data-mobile-viewport-guard="active"] .reader-topbar {
    grid-template-columns: minmax(38px, 0.66fr) minmax(94px, 1fr) minmax(38px, 0.66fr);
    width: calc(100% - 24px);
    margin-left: 12px;
    margin-right: 12px;
  }

  .reader-topbar .plain-button,
  html[data-mobile-viewport-guard="active"] .reader-topbar .plain-button {
    min-height: 44px;
    font-size: 10px;
  }

  .chapter-context-label,
  .bookmark-status-label {
    max-width: 118px;
  }

  .reader-bottombar,
  html[data-mobile-viewport-guard="active"] .reader-bottombar {
    grid-template-columns: minmax(52px, 1fr) repeat(3, minmax(40px, 0.72fr)) minmax(52px, 1fr);
    gap: 3px;
    width: calc(100% - 22px);
    min-height: 40px;
    margin-left: 11px;
    margin-right: 11px;
  }

  .reader-bottombar .plain-button,
  html[data-mobile-viewport-guard="active"] .reader-bottombar .plain-button {
    min-height: 44px;
    font-size: 10px;
  }

  .reader-bottombar [data-action="previous"],
  .reader-bottombar [data-action="next"],
  html[data-mobile-viewport-guard="active"] .reader-bottombar [data-action="previous"],
  html[data-mobile-viewport-guard="active"] .reader-bottombar [data-action="next"] {
    font-size: 11px;
  }

  .reading-progress {
    width: min(240px, calc(100% - 88px));
  }

  .reader-content-inner {
    padding-top: var(--reader-inner-top-padding, 12px);
    padding-bottom: var(--reader-effective-inner-bottom-padding);
  }

  html[data-mobile-viewport-guard="active"] .reader-content-inner > p:not(.reader-notice),
  .reader-content-inner > p:not(.reader-notice) {
    width: min(var(--reader-compact-measure-active, var(--reader-compact-measure)), 100%);
  }

  .reader-content h1 {
    width: min(22ch, 100%);
    margin-bottom: 1.28rem;
    padding-bottom: 0.76rem;
  }
}

@media (max-width: 720px) and (max-height: 700px) and (orientation: portrait) {
  :root {
    --reader-top-padding: 34px;
    --reader-bottom-padding: 76px;
    --reader-page-gutter: 24px;
  }

  .reader-content-inner {
    padding-top: var(--reader-inner-top-padding, 6px);
    padding-bottom: var(--reader-effective-inner-bottom-padding);
  }

  html[data-reading-mode="page"] .reader-content.is-page-mode,
  html[data-reading-mode="spread"] .reader-content.is-spread-mode,
  html[data-reading-mode="page"] .reader-surface:not(.is-chrome-visible) .reader-content.is-page-mode,
  html[data-reading-mode="spread"] .reader-surface:not(.is-chrome-visible) .reader-content.is-spread-mode {
    padding-bottom: max(
      68px,
      calc(env(safe-area-inset-bottom) + 48px + var(--reader-paged-safe-area-reserve, 0px))
    );
  }

  .reader-content h1 {
    gap: 5px;
    width: min(20ch, 100%);
    margin-bottom: 0.74rem;
    padding-bottom: 0.44rem;
    font-size: 0.92em;
    line-height: 1.3;
  }

  html[data-reading-mode="page"] .reader-content.is-page-mode h1 .reader-chapter-kicker,
  html[data-reading-mode="spread"] .reader-content.is-spread-mode h1 .reader-chapter-kicker {
    display: none;
  }

  html[data-reading-mode="page"] .reader-content.is-page-mode h1 .reader-chapter-subtitle,
  html[data-reading-mode="spread"] .reader-content.is-spread-mode h1 .reader-chapter-subtitle {
    line-height: 1.28;
    opacity: 0.82;
  }

  html[data-reading-mode="page"] .reader-content.is-page-mode h1::after,
  html[data-reading-mode="spread"] .reader-content.is-spread-mode h1::after {
    width: min(36px, 30%);
    opacity: 0.46;
  }

  html[data-reading-mode="page"] .reader-content.is-page-mode p,
  html[data-reading-mode="spread"] .reader-content.is-spread-mode p {
    margin-bottom: calc((var(--reader-paragraph-gap-active, var(--paragraph-gap)) * 0.85) + var(--reader-paragraph-gap-adjust, 0em));
  }

  html[data-reader-viewport-shape="compact-narrow-short"][data-reading-mode="page"] .reader-content.is-page-mode,
  html[data-reader-viewport-shape="compact-narrow-short"][data-reading-mode="page"] .reader-surface:not(.is-chrome-visible) .reader-content.is-page-mode,
  html[data-reader-viewport-shape="compact-narrow-short"][data-reading-mode="spread"] .reader-content.is-spread-mode,
  html[data-reader-viewport-shape="compact-narrow-short"][data-reading-mode="spread"] .reader-surface:not(.is-chrome-visible) .reader-content.is-spread-mode {
    /* opening-body-breath=asset-1018-compact-first-line */
    /* first-page-tail-breath=asset-1019-bottom-line-clearance */
    /* human-eye-current-gallery=asset-1020-current-screens-first-turn-threshold */
    padding-bottom: max(
      72px,
      calc(env(safe-area-inset-bottom) + 60px + var(--reader-paged-safe-area-reserve, 0px))
    );
  }

  html[data-reader-viewport-shape="compact-narrow-short"][data-reading-mode="page"] .reader-content.is-page-mode .reader-content-inner > p:not(.reader-notice),
  html[data-reader-viewport-shape="compact-narrow-short"][data-reading-mode="spread"] .reader-content.is-spread-mode .reader-content-inner > p:not(.reader-notice) {
    /* opening-body-breath=asset-1018-compact-first-line */
    orphans: 2;
    widows: 2;
    margin-bottom: calc((var(--reader-paragraph-gap-active, var(--paragraph-gap)) * 0.85) + var(--reader-paragraph-gap-adjust, 0em));
  }

  .reader-content p {
    margin-bottom: calc((var(--reader-paragraph-gap-active, var(--paragraph-gap)) * 0.92) + var(--reader-paragraph-gap-adjust, 0em));
  }

  .reader-bottombar,
  html[data-mobile-viewport-guard="active"] .reader-bottombar {
    min-height: 38px;
  }

  .reading-progress {
    bottom: calc(5px + env(safe-area-inset-bottom));
  }
}

@media (max-width: 720px) and (min-height: 820px) and (orientation: portrait) {
  :root {
    --reader-top-padding: 50px;
    --reader-bottom-padding: 100px;
  }

  .reader-content-inner {
    padding-top: var(--reader-inner-top-padding, 18px);
    padding-bottom: var(--reader-effective-inner-bottom-padding);
  }

  .reader-content h1 {
    margin-bottom: 1.9rem;
    padding-bottom: 1rem;
  }

  .reading-progress {
    bottom: calc(9px + env(safe-area-inset-bottom));
  }

  .reader-content.is-page-mode .chapter-afterglow[data-reader-afterglow-scene="episode-end"],
  .reader-content.is-spread-mode .chapter-afterglow[data-reader-afterglow-scene="episode-end"] {
    --reader-terminal-action-shift-y: clamp(52px, 8.8svh, 74px);
  }
}

@media (max-height: 620px) and (orientation: landscape) {
  :root {
    --reader-inline-padding: 32px;
    --reader-top-padding: 44px;
    --reader-bottom-padding: 72px;
    --reader-page-gutter: 34px;
  }

  .reader-bar {
    min-height: 50px;
  }

  .reader-topbar {
    padding-top: max(6px, env(safe-area-inset-top));
    padding-bottom: 6px;
  }

  .reader-bottombar {
    min-height: 46px;
    padding-top: 5px;
    padding-bottom: max(5px, env(safe-area-inset-bottom));
  }

  .reader-surface:not(.is-chrome-visible) .reader-topbar,
  .reader-surface:not(.is-chrome-visible) .reader-bottombar {
    height: 0;
    min-height: 0;
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
    border-width: 0;
    overflow: hidden;
    transform: none;
  }

  .reader-surface:not(.is-chrome-visible) .reader-content {
    padding-top: max(16px, calc(env(safe-area-inset-top) + 12px));
    padding-bottom: max(58px, min(var(--reader-bottom-chrome-reserve, 80px), 66px), calc(env(safe-area-inset-bottom) + 28px));
  }

  html[data-reader-viewport-shape="compact-landscape"]:not([data-reading-mode="page"]):not([data-reading-mode="spread"]) .reader-surface:not(.is-chrome-visible) .reader-content {
    padding-bottom: max(58px, min(var(--reader-bottom-chrome-reserve, 80px), 66px), calc(env(safe-area-inset-bottom) + 28px));
  }

  html[data-reading-mode="page"] .reader-content.is-page-mode,
  html[data-reading-mode="spread"] .reader-content.is-spread-mode,
  html[data-reading-mode="page"] .reader-surface:not(.is-chrome-visible) .reader-content,
  html[data-reading-mode="spread"] .reader-surface:not(.is-chrome-visible) .reader-content {
    padding-top: max(var(--reader-content-top-padding, var(--reader-top-padding)), calc(env(safe-area-inset-top) + 28px));
    padding-bottom: max(
      96px,
      min(var(--reader-effective-content-bottom-padding), 124px),
      calc(env(safe-area-inset-bottom) + 42px + var(--reader-paged-safe-area-reserve, 0px))
    );
  }

  html[data-reader-viewport-shape="compact-landscape"][data-reading-mode="page"] .reader-content.is-page-mode,
  html[data-reader-viewport-shape="compact-landscape"][data-reading-mode="spread"] .reader-content.is-spread-mode,
  html[data-reader-viewport-shape="compact-landscape"][data-reading-mode="page"] .reader-surface:not(.is-chrome-visible) .reader-content,
  html[data-reader-viewport-shape="compact-landscape"][data-reading-mode="spread"] .reader-surface:not(.is-chrome-visible) .reader-content {
    padding-top: max(22px, calc(env(safe-area-inset-top) + 14px));
    padding-bottom: max(64px, calc(env(safe-area-inset-bottom) + 28px + var(--reader-paged-safe-area-reserve, 0px)));
  }

  .reader-bottombar .plain-button {
    /* short-landscape compromise: 42px matches the app's own compact-landscape
       afterglow-next floor while conceding 2px to the tight vertical budget */
    min-height: 42px;
    padding-top: 5px;
    padding-bottom: 5px;
  }

  .reader-content h1 {
    margin-bottom: 1.35rem;
  }

  html[data-reader-viewport-shape="compact-landscape"] .reader-content-inner {
    width: 100%;
    padding-top: var(--reader-inner-top-padding, 10px);
    padding-bottom: var(--reader-effective-inner-bottom-padding);
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  html[data-reader-viewport-shape="compact-landscape"] .reader-content-inner::before {
    display: none;
  }

  html[data-reader-viewport-shape="compact-landscape"] .reader-content-inner > p:not(.reader-notice) {
    width: min(31rem, 100%);
    max-width: 100%;
  }

  .chapter-afterglow-minimal {
    margin-top: 1.6rem;
    padding-top: 12px;
    padding-bottom: 2px;
  }

  .chapter-afterglow[data-reader-afterglow-scene="episode-end"] {
    --reader-terminal-action-shift-y: 0px;
    min-height: clamp(10rem, 48svh, 13rem);
    margin-top: clamp(0.65rem, 4svh, 1.25rem);
    margin-bottom: max(3.4rem, calc(env(safe-area-inset-bottom) + 2.8rem));
    padding-top: 14px;
    padding-bottom: 1.8rem;
  }

  .chapter-afterglow-open-actions {
    margin-top: clamp(-2rem, -6.5svh, -1.45rem);
  }

  .chapter-afterglow-next {
    min-height: 42px;
  }

  .reader-content.is-page-mode .chapter-afterglow[data-reader-afterglow-scene="episode-end"],
  .reader-content.is-spread-mode .chapter-afterglow[data-reader-afterglow-scene="episode-end"] {
    --reader-terminal-action-shift-y: -42px;
  }

  html[data-reader-viewport-shape="compact-landscape"] .chapter-afterglow-open[data-reader-afterglow-scene="episode-end"] {
    --reader-terminal-action-shift-y: 0px;
    align-content: start;
    min-height: 0;
    margin-top: clamp(0.58rem, 2.3svh, 0.92rem);
    margin-bottom: max(3.2rem, calc(env(safe-area-inset-bottom) + 2.6rem));
    padding-top: 4px;
    padding-bottom: max(2.6rem, calc(env(safe-area-inset-bottom) + 42px));
    -webkit-column-break-inside: auto;
    break-inside: auto;
    page-break-inside: auto;
  }

  html[data-reader-viewport-shape="compact-landscape"] .reader-content:not(.is-page-mode):not(.is-spread-mode) .chapter-afterglow-open[data-reader-afterglow-scene="episode-end"] .chapter-afterglow-open-actions {
    transform: translateY(-18px);
  }

  html[data-reader-viewport-shape="compact-landscape"] .reader-content.is-page-mode .chapter-afterglow-open[data-reader-afterglow-scene="episode-end"],
  html[data-reader-viewport-shape="compact-landscape"] .reader-content.is-spread-mode .chapter-afterglow-open[data-reader-afterglow-scene="episode-end"] {
    --reader-terminal-action-shift-y: 0px;
    -webkit-column-break-before: auto;
    -webkit-column-span: none;
    break-before: auto;
    break-inside: auto;
    column-span: none;
    page-break-before: auto;
    page-break-inside: auto;
    align-content: start;
    min-height: 0;
    padding-top: 4px;
    padding-bottom: max(2.6rem, calc(env(safe-area-inset-bottom) + 42px));
  }

  html[data-reader-viewport-shape="compact-landscape"] .reader-content.is-page-mode .chapter-afterglow-open[data-reader-afterglow-scene="episode-end"] .chapter-afterglow-open-actions,
  html[data-reader-viewport-shape="compact-landscape"] .reader-content.is-spread-mode .chapter-afterglow-open[data-reader-afterglow-scene="episode-end"] .chapter-afterglow-open-actions {
    transform: none;
  }

  .quiet-hint {
    bottom: calc(14px + env(safe-area-inset-bottom));
  }

  .drawer-body {
    scroll-padding-bottom: max(220px, calc(env(safe-area-inset-bottom) + 180px));
    scroll-padding-bottom: var(--reader-drawer-reach-padding);
    padding-bottom: var(--reader-drawer-reach-padding);
  }
}

@media (max-width: 720px) and (max-height: 480px) and (orientation: landscape) {
  :root {
    --reader-inline-padding: 28px;
    --reader-top-padding: 34px;
    --reader-bottom-padding: 58px;
    --reader-page-gutter: 24px;
  }

  .reader-topbar,
  html[data-mobile-viewport-guard="active"] .reader-topbar {
    min-height: 34px;
    padding-top: max(3px, env(safe-area-inset-top));
    padding-bottom: 3px;
  }

  .chapter-context-label,
  .bookmark-status-label {
    display: none;
  }

  .reader-bottombar,
  html[data-mobile-viewport-guard="active"] .reader-bottombar {
    min-height: 36px;
    padding-top: 2px;
    padding-bottom: max(2px, env(safe-area-inset-bottom));
  }

  .reader-bottombar .plain-button,
  html[data-mobile-viewport-guard="active"] .reader-bottombar .plain-button {
    min-height: 42px;
  }

  .reader-content-inner {
    padding-top: var(--reader-inner-top-padding, 6px);
    padding-bottom: var(--reader-effective-inner-bottom-padding);
  }

  .reader-content h1 {
    margin-bottom: 0.9rem;
    padding-bottom: 0.68rem;
  }

  html[data-reader-viewport-shape="compact-landscape"] .reader-content.is-page-mode h1,
  html[data-reader-viewport-shape="compact-landscape"] .reader-content.is-spread-mode h1 {
    margin-bottom: 0.22rem;
    padding-bottom: 0.12rem;
    line-height: 1.18;
  }

  html[data-reader-viewport-shape="compact-landscape"] .reader-content.is-page-mode h1 .reader-chapter-subtitle,
  html[data-reader-viewport-shape="compact-landscape"] .reader-content.is-spread-mode h1 .reader-chapter-subtitle {
    display: none;
  }

  .reading-progress {
    bottom: calc(4px + env(safe-area-inset-bottom));
  }

  .drawer-body,
  html[data-mobile-viewport-guard="active"] .drawer-body {
    scroll-padding-bottom: max(220px, calc(env(safe-area-inset-bottom) + 180px));
    scroll-padding-bottom: var(--reader-drawer-reach-padding);
    padding-bottom: var(--reader-drawer-reach-padding);
  }
}

html[data-reader-line-density="tight"] .reader-content {
  padding-top: max(min(var(--reader-content-top-padding, 34px), 34px), calc(env(safe-area-inset-top) + 16px));
  padding-bottom: max(min(var(--reader-content-bottom-padding, 58px), 64px), min(var(--reader-bottom-chrome-reserve, 86px), 92px), calc(env(safe-area-inset-bottom) + 42px));
}

html[data-reader-line-density="tight"] .reader-content:not(.is-page-mode) .reader-content-inner {
  padding-top: clamp(6px, 4svh, 32px);
  padding-bottom: clamp(18px, 5svh, 46px);
}

html[data-reader-line-density="tight"] .reader-content h1 {
  margin-bottom: 1.08rem;
  padding-bottom: 0.68rem;
}

html[data-reader-line-density="tight"][data-reader-viewport-orientation="landscape"] .reader-content h1 {
  margin-bottom: 0.86rem;
  padding-bottom: 0.54rem;
}

@media (min-width: 721px) {
  html[data-reading-mode="page"] .reader-surface:not(.is-chrome-visible) .reader-bar,
  html[data-reading-mode="spread"] .reader-surface:not(.is-chrome-visible) .reader-bar {
    height: auto;
    border-width: 1px;
    overflow: visible;
  }

  html[data-reading-mode="page"] .reader-surface:not(.is-chrome-visible) .reader-topbar,
  html[data-reading-mode="spread"] .reader-surface:not(.is-chrome-visible) .reader-topbar {
    min-height: 50px;
    margin: max(8px, calc(env(safe-area-inset-top) * 0.45)) 14px 0;
    padding-top: max(6px, env(safe-area-inset-top));
    padding-bottom: 6px;
    transform: translateY(-12px);
  }

  html[data-reading-mode="page"] .reader-surface:not(.is-chrome-visible) .reader-bottombar,
  html[data-reading-mode="spread"] .reader-surface:not(.is-chrome-visible) .reader-bottombar {
    min-height: 46px;
    margin: 0 16px max(12px, calc(env(safe-area-inset-bottom) * 0.35 + 10px));
    padding-top: 5px;
    padding-bottom: max(5px, env(safe-area-inset-bottom));
    transform: translateY(12px);
  }

  html[data-reading-mode="page"] .reader-surface:not(.is-chrome-visible) .reader-content,
  html[data-reading-mode="spread"] .reader-surface:not(.is-chrome-visible) .reader-content {
    padding-top: max(var(--reader-content-top-padding, var(--reader-top-padding)), calc(env(safe-area-inset-top) + 28px));
    padding-bottom: max(var(--reader-effective-content-bottom-padding), calc(env(safe-area-inset-bottom) + 24px));
  }

  html[data-reading-mode="page"] .reader-content.is-page-mode,
  html[data-reading-mode="page"] .reader-surface:not(.is-chrome-visible) .reader-content.is-page-mode {
    padding-top: max(56px, calc(env(safe-area-inset-top) + 28px));
    padding-bottom: max(96px, calc(env(safe-area-inset-bottom) + 32px));
  }
}

@media (min-width: 721px) and (max-height: 650px) {
  html[data-reading-mode="page"] .reader-content.is-page-mode {
    padding-top: max(56px, calc(env(safe-area-inset-top) + 28px));
    padding-bottom: max(84px, calc(env(safe-area-inset-bottom) + 24px + var(--reader-paged-safe-area-reserve, 0px)));
  }

  html[data-reading-mode="spread"] .reader-content.is-spread-mode {
    padding-top: max(28px, calc(env(safe-area-inset-top) + 18px));
    padding-bottom: max(84px, calc(env(safe-area-inset-bottom) + 24px + var(--reader-paged-safe-area-reserve, 0px)));
  }

  /* Overlay chrome must not change a paged column's usable height. Keep the hidden
     state at the exact same short-viewport padding as the visible state above. */
  html[data-reading-mode="page"] .reader-surface:not(.is-chrome-visible) .reader-content.is-page-mode {
    padding-top: max(56px, calc(env(safe-area-inset-top) + 28px));
    padding-bottom: max(84px, calc(env(safe-area-inset-bottom) + 24px + var(--reader-paged-safe-area-reserve, 0px)));
  }

  html[data-reading-mode="spread"] .reader-surface:not(.is-chrome-visible) .reader-content.is-spread-mode {
    padding-top: max(28px, calc(env(safe-area-inset-top) + 18px));
    padding-bottom: max(84px, calc(env(safe-area-inset-bottom) + 24px + var(--reader-paged-safe-area-reserve, 0px)));
  }

  html[data-reading-mode="page"] .reader-content.is-page-mode h1,
  html[data-reading-mode="spread"] .reader-content.is-spread-mode h1 {
    gap: 6px;
    margin-bottom: 0.56rem;
    padding-bottom: 0.38rem;
    font-size: 1em;
    line-height: 1.32;
  }

  html[data-reading-mode="page"] .reader-content.is-page-mode h1 .reader-chapter-kicker,
  html[data-reading-mode="spread"] .reader-content.is-spread-mode h1 .reader-chapter-kicker {
    gap: 6px;
    font-size: 0.52em;
  }

  html[data-reading-mode="page"] .reader-content.is-page-mode h1 .reader-chapter-kicker::before,
  html[data-reading-mode="page"] .reader-content.is-page-mode h1 .reader-chapter-kicker::after,
  html[data-reading-mode="spread"] .reader-content.is-spread-mode h1 .reader-chapter-kicker::before,
  html[data-reading-mode="spread"] .reader-content.is-spread-mode h1 .reader-chapter-kicker::after {
    width: 18px;
  }

  html[data-reading-mode="page"] .reader-content.is-page-mode h1 .reader-chapter-subtitle,
  html[data-reading-mode="spread"] .reader-content.is-spread-mode h1 .reader-chapter-subtitle {
    line-height: 1.34;
  }
}

html[data-reading-mode="page"] .reader-surface,
html[data-reading-mode="spread"] .reader-surface {
  grid-template-rows: minmax(0, 1fr);
}

html[data-reading-mode="page"] .reader-content.is-page-mode,
html[data-reading-mode="spread"] .reader-content.is-spread-mode {
  grid-row: 1 / -1;
  align-self: stretch;
  min-height: 0;
}

html[data-reading-mode="page"] .reader-topbar,
html[data-reading-mode="spread"] .reader-topbar {
  position: absolute;
  top: max(8px, calc(env(safe-area-inset-top) * 0.45));
  left: 50%;
  margin: 0;
  transform: translateX(-50%);
}

html[data-reading-mode="page"] .reader-bottombar,
html[data-reading-mode="spread"] .reader-bottombar {
  position: absolute;
  bottom: max(12px, calc(env(safe-area-inset-bottom) * 0.35 + 10px));
  left: 50%;
  margin: 0;
  transform: translateX(-50%);
}

html[data-reading-mode="page"] .reader-surface:not(.is-chrome-visible) .reader-topbar,
html[data-reading-mode="spread"] .reader-surface:not(.is-chrome-visible) .reader-topbar {
  transform: translate(-50%, -12px);
}

html[data-reading-mode="page"] .reader-surface:not(.is-chrome-visible) .reader-bottombar,
html[data-reading-mode="spread"] .reader-surface:not(.is-chrome-visible) .reader-bottombar {
  transform: translate(-50%, 12px);
}

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

@media (update: slow) {
  :root {
    --bar-bg: var(--paper);
    --shadow: transparent;
    --chrome-shadow: transparent;
    --button-wash: var(--wash);
  }

  .reader-content {
    scrollbar-width: none;
  }

  .reader-bar,
  .reading-progress span,
  .reader-notice.is-transient,
  .reader-return-notice.is-transient,
  .support-notice.is-transient,
  .sentence,
  .sentence-sheet,
  .drawer,
  .toast {
    transition: none !important;
  }
}

@media (prefers-contrast: more) {
  :root {
    --muted: #3f3f3b;
    --hairline: #9f9f98;
    --highlight-line: rgba(21, 21, 21, 0.62);
  }

  html[data-theme="dark"] {
    --muted: #d0cec6;
    --hairline: #77746c;
    --reader-ink: #f5f4ef;
    --reader-heading-ink: #d8d5ca;
    --highlight-line: rgba(245, 244, 239, 0.7);
  }
}

@media (min-width: 721px) and (max-width: 1100px) {
  :root {
    --reader-font-size: 18px;
    --reader-line-height: 1.9;
    --reader-width-base: 660px;
    --reader-inline-padding: 36px;
    --reader-page-gutter: 48px;
    --paragraph-gap: 1.05em;
  }

  .reader-content-inner {
    padding-top: 48px;
    padding-bottom: var(--reader-effective-inner-bottom-padding);
  }
}

@media (min-width: 721px) and (max-width: 1100px) and (min-height: 800px) {
  html[data-reader-device-class="tablet"][data-mobile-viewport-guard="active"] {
    --reader-inner-top-padding: 24px;
    --reader-inner-bottom-padding: 44px;
    --reader-page-tail-reserve: 68px;
    --reader-bottom-chrome-reserve: 128px;
  }

  html[data-reader-device-class="tablet"][data-mobile-viewport-guard="active"] .reader-content-inner {
    padding-top: var(--reader-inner-top-padding);
    padding-bottom: var(--reader-effective-inner-bottom-padding);
  }

  html[data-reader-device-class="tablet"][data-mobile-viewport-guard="active"][data-reading-mode="page"] .reader-content.is-page-mode,
  html[data-reader-device-class="tablet"][data-mobile-viewport-guard="active"][data-reading-mode="spread"] .reader-content.is-spread-mode,
  html[data-reader-device-class="tablet"][data-mobile-viewport-guard="active"][data-reading-mode="page"] .reader-surface:not(.is-chrome-visible) .reader-content.is-page-mode,
  html[data-reader-device-class="tablet"][data-mobile-viewport-guard="active"][data-reading-mode="spread"] .reader-surface:not(.is-chrome-visible) .reader-content.is-spread-mode {
    padding-top: max(42px, calc(env(safe-area-inset-top) + 22px));
    padding-bottom: max(78px, calc(env(safe-area-inset-bottom) + 28px + var(--reader-paged-safe-area-reserve, 0px)));
  }

  html[data-mobile-viewport-guard="active"][data-reader-viewport-shape="regular"] {
    --reader-inner-top-padding: 18px;
    --reader-inner-bottom-padding: 34px;
    --reader-page-tail-reserve: 56px;
    --reader-bottom-chrome-reserve: 116px;
  }

  html[data-mobile-viewport-guard="active"][data-reader-viewport-shape="regular"] .reader-content:not(.is-page-mode):not(.is-spread-mode) .reader-content-inner > p:not(.reader-notice),
  html[data-mobile-viewport-guard="active"][data-reader-viewport-shape="regular"] .reader-content[data-content-locale="ko"]:not(.is-page-mode):not(.is-spread-mode) .reader-content-inner > p:not(.reader-notice) {
    width: min(var(--reader-ko-measure-active, var(--reader-ko-measure, 32.5em)), calc(100% - 56px));
  }

  html[data-mobile-viewport-guard="active"][data-reader-viewport-shape="regular"][data-reading-mode="page"] .reader-content.is-page-mode,
  html[data-mobile-viewport-guard="active"][data-reader-viewport-shape="regular"][data-reading-mode="spread"] .reader-content.is-spread-mode,
  html[data-mobile-viewport-guard="active"][data-reader-viewport-shape="regular"][data-reading-mode="page"] .reader-surface:not(.is-chrome-visible) .reader-content.is-page-mode,
  html[data-mobile-viewport-guard="active"][data-reader-viewport-shape="regular"][data-reading-mode="spread"] .reader-surface:not(.is-chrome-visible) .reader-content.is-spread-mode {
    padding-top: max(34px, calc(env(safe-area-inset-top) + 18px));
    padding-bottom: max(64px, calc(env(safe-area-inset-bottom) + 20px + var(--reader-paged-safe-area-reserve, 0px)));
  }
}

@media (min-width: 721px) and (max-width: 820px) and (min-height: 800px) {
  html[data-reader-device-class="tablet"][data-mobile-viewport-guard="active"] {
    --reader-inner-top-padding: 14px;
    --reader-inner-bottom-padding: 30px;
    --reader-page-tail-reserve: 48px;
    --reader-bottom-chrome-reserve: 108px;
  }

  html[data-reader-device-class="tablet"][data-mobile-viewport-guard="active"] .reader-content:not(.is-page-mode):not(.is-spread-mode) .reader-content-inner > p:not(.reader-notice),
  html[data-reader-device-class="tablet"][data-mobile-viewport-guard="active"] .reader-content[data-content-locale="ko"]:not(.is-page-mode):not(.is-spread-mode) .reader-content-inner > p:not(.reader-notice) {
    width: min(var(--reader-ko-measure-active, var(--reader-ko-measure, 32.5em)), calc(100% - 56px));
  }

  html[data-reader-device-class="tablet"][data-mobile-viewport-guard="active"][data-reading-mode="page"] .reader-content.is-page-mode,
  html[data-reader-device-class="tablet"][data-mobile-viewport-guard="active"][data-reading-mode="spread"] .reader-content.is-spread-mode,
  html[data-reader-device-class="tablet"][data-mobile-viewport-guard="active"][data-reading-mode="page"] .reader-surface:not(.is-chrome-visible) .reader-content.is-page-mode,
  html[data-reader-device-class="tablet"][data-mobile-viewport-guard="active"][data-reading-mode="spread"] .reader-surface:not(.is-chrome-visible) .reader-content.is-spread-mode,
  html[data-mobile-viewport-guard="active"][data-reader-viewport-shape="regular"][data-reading-mode="page"] .reader-content.is-page-mode,
  html[data-mobile-viewport-guard="active"][data-reader-viewport-shape="regular"][data-reading-mode="spread"] .reader-content.is-spread-mode,
  html[data-mobile-viewport-guard="active"][data-reader-viewport-shape="regular"][data-reading-mode="page"] .reader-surface:not(.is-chrome-visible) .reader-content.is-page-mode,
  html[data-mobile-viewport-guard="active"][data-reader-viewport-shape="regular"][data-reading-mode="spread"] .reader-surface:not(.is-chrome-visible) .reader-content.is-spread-mode {
    padding-top: max(30px, calc(env(safe-area-inset-top) + 16px));
    padding-bottom: max(58px, calc(env(safe-area-inset-bottom) + 18px + var(--reader-paged-safe-area-reserve, 0px)));
  }
}

@media (min-width: 1101px) {
  :root {
    --reader-font-size: 19px;
    --reader-line-height: 1.96;
    --reader-width-base: 700px;
    --reader-inline-padding: 56px;
    --reader-page-gutter: 64px;
    --paragraph-gap: 1.08em;
  }

  .reader-content-inner {
    width: min(100%, calc(var(--reader-width) + 76px));
    padding: 54px 38px var(--reader-effective-inner-bottom-padding);
  }

  .reader-content[data-content-locale="ko"] .reader-content-inner > p:not(.reader-notice) {
    width: min(100%, var(--reader-ko-measure-active, 32em));
  }

  html[data-reading-mode="page"] .reader-content.is-page-mode,
  html[data-reading-mode="page"] .reader-surface:not(.is-chrome-visible) .reader-content.is-page-mode {
    padding-top: max(48px, calc(env(safe-area-inset-top) + 24px));
    padding-bottom: max(82px, calc(env(safe-area-inset-bottom) + 24px));
  }

  html[data-reading-mode="page"] .reader-content.is-page-mode .reader-content-inner,
  html[data-reading-mode="page"] .reader-surface:not(.is-chrome-visible) .reader-content.is-page-mode .reader-content-inner {
    padding-top: 38px;
  }
}

.reader-surface:not(.is-chrome-visible) .reading-progress,
html[data-mobile-viewport-guard="active"] .reader-surface:not(.is-chrome-visible) .reading-progress {
  opacity: 0;
  transition-duration: 0ms;
}

.reader-surface.is-chrome-visible.is-content-next-handoff .reading-progress,
html[data-mobile-viewport-guard="active"] .reader-surface.is-chrome-visible.is-content-next-handoff .reading-progress {
  width: var(--reader-profile-compact-handoff-progress-width);
  bottom: var(--reader-profile-compact-handoff-progress-bottom);
  opacity: var(--reader-profile-compact-handoff-progress-opacity);
}

.reader-debug-overlay {
  position: fixed;
  right: 10px;
  bottom: calc(10px + env(safe-area-inset-bottom));
  left: 10px;
  z-index: 9999;
  max-height: min(54vh, 520px);
  overflow: auto;
  padding: 10px;
  border: 1px solid rgba(246, 244, 234, 0.26);
  border-radius: 8px;
  background: rgba(16, 18, 18, 0.94);
  color: #f6f4ea;
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.28);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 11px;
  line-height: 1.45;
  letter-spacing: 0;
  -webkit-text-size-adjust: 100%;
}

.reader-debug-overlay summary {
  cursor: pointer;
  font-weight: 700;
  color: #fffaf0;
}

.reader-debug-grid {
  display: grid;
  grid-template-columns: minmax(72px, 0.34fr) minmax(0, 1fr);
  gap: 3px 8px;
  margin-top: 8px;
}

.reader-debug-label {
  color: #aeb8b3;
}

.reader-debug-value {
  min-width: 0;
  overflow-wrap: anywhere;
  color: #f6f4ea;
}

.reader-debug-events {
  display: grid;
  gap: 4px;
  margin: 10px 0 0;
  padding-left: 18px;
}

.reader-debug-events li {
  overflow-wrap: anywhere;
}

.reader-auth-debug-panel {
  position: fixed;
  left: 12px;
  bottom: calc(12px + env(safe-area-inset-bottom));
  z-index: 10000;
  width: 520px;
  max-width: calc(100% - 24px);
  max-height: min(72vh, 720px);
  overflow: auto;
  box-sizing: border-box;
  padding: 12px;
  border: 1px solid rgba(246, 244, 234, 0.28);
  border-radius: 8px;
  background: rgba(20, 17, 14, 0.96);
  color: #fffaf1;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.32);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 11px;
  line-height: 1.45;
  letter-spacing: 0;
  -webkit-text-size-adjust: 100%;
}

.reader-auth-debug-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: baseline;
  margin-bottom: 10px;
  border-bottom: 1px solid rgba(246, 244, 234, 0.18);
  padding-bottom: 8px;
}

.reader-auth-debug-head strong {
  font-size: 13px;
  color: #fffaf1;
}

.reader-auth-debug-head span {
  color: #c8bba8;
  font-size: 10px;
}

.reader-auth-debug-grid {
  display: grid;
  grid-template-columns: minmax(86px, 0.32fr) minmax(0, 1fr);
  gap: 4px 10px;
}

.reader-auth-debug-label {
  color: #c8bba8;
}

.reader-auth-debug-value {
  min-width: 0;
  overflow-wrap: anywhere;
  color: #fffaf1;
}

.reader-auth-debug-events {
  display: grid;
  gap: 4px;
  margin: 12px 0 0;
  padding-left: 18px;
  color: #f4ead9;
}

.reader-auth-debug-events li {
  overflow-wrap: anywhere;
}

@media (max-width: 760px) {
  .reader-auth-debug-panel {
    right: 8px;
    left: 8px;
    bottom: calc(8px + env(safe-area-inset-bottom));
    width: auto;
    max-height: 58vh;
  }
}

@media (max-width: 720px) {
}

/* ── 교제 축: 문장 흔적 캐릭터 픽커 (필수·미니멀·모노크롬) ── */
.sentence-character-picker {
  margin: 16px 0 6px;
}
.sentence-character-prompt {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 10px;
  font-family: var(--ui-font);
  font-size: 13px;
  letter-spacing: 0.01em;
  color: var(--muted-strong);
}
.sentence-character-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--ink);
  opacity: 0.5;
}
.sentence-character-chosen {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 10px;
  padding: 5px 6px 5px 13px;
  border: 0.5px solid var(--ink);
  border-radius: 999px;
  background: var(--ink);
}
.sentence-character-chosen-name {
  font-family: var(--ui-font);
  font-size: 13px;
  letter-spacing: 0.01em;
  color: var(--paper);
}
.sentence-character-clear {
  display: inline-grid;
  place-items: center;
  min-width: 44px;
  min-height: 44px;
  border: none;
  background: transparent;
  color: var(--paper);
  opacity: 0.66;
  font-size: 15px;
  line-height: 1;
  margin: -9px -4px -9px 0;
  padding: 0;
  cursor: pointer;
}
.sentence-character-clear:hover {
  opacity: 1;
}
.sentence-character-search {
  width: 100%;
  box-sizing: border-box;
  margin: 0 0 10px;
  padding: 9px 13px;
  font-family: var(--ui-font);
  font-size: 13px;
  color: var(--ink);
  background: var(--raised);
  border: 0.5px solid var(--hairline);
  border-radius: 10px;
  min-height: 44px;
}
.sentence-character-search::placeholder {
  color: var(--muted);
}
.sentence-character-search:focus {
  outline: none;
  border-color: var(--focus);
}
.sentence-character-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-height: 166px;
  overflow-y: auto;
  padding: 2px 1px;
  -webkit-overflow-scrolling: touch;
}
.sentence-character-chip {
  font-family: var(--ui-font);
  font-size: 12.5px;
  color: var(--muted-strong);
  padding: 6px 12px;
  background: transparent;
  border: 0.5px solid var(--hairline);
  border-radius: 999px;
  min-height: 44px;
  cursor: pointer;
  transition: border-color 0.14s ease, color 0.14s ease, background 0.14s ease;
}
.sentence-character-chip:hover {
  color: var(--ink);
  border-color: var(--muted);
  background: var(--button-wash);
}
.sentence-character-chip.is-chosen {
  color: var(--paper);
  background: var(--ink);
  border-color: var(--ink);
}
.sentence-character-empty,
.sentence-character-loading,
.sentence-character-error {
  font-size: 12.5px;
  padding: 6px 2px;
}

.sentence-character-retry {
  min-height: 44px;
  padding: 8px 14px;
  border: 0.5px solid var(--hairline);
  border-radius: 999px;
  background: transparent;
  color: var(--muted-strong);
  font-family: var(--ui-font);
  font-size: 12.5px;
  cursor: pointer;
}
.sentence-character-retry:hover {
  border-color: var(--muted);
  color: var(--ink);
}
.sentence-character-clear:focus-visible,
.sentence-character-search:focus-visible,
.sentence-character-chip:focus-visible,
.sentence-character-retry:focus-visible,
.character-rank-tab:focus-visible,
.character-rank-row.is-expandable:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* ── 교제 축: 최애 — 금빛은 교제 축에서만 (절제 속의 한 곳) ── */
:root {
  --choeae-gold: #6d5928;
  --choeae-gold-text: #59481f;
  --choeae-gold-soft: rgba(138, 118, 70, 0.11);
}
html[data-theme="dark"] {
  --choeae-gold: #c8b993;
  --choeae-gold-text: #d6c9a5;
  --choeae-gold-soft: rgba(200, 185, 147, 0.14);
}
.plaza-fellowship-characters .character-rank-tabs {
  display: inline-flex;
  gap: 16px;
  margin: 0 0 16px;
}
.character-rank-tab {
  font-family: var(--ui-font);
  font-size: 12.5px;
  letter-spacing: 0.02em;
  color: var(--muted);
  min-height: 44px;
  padding: 8px 2px 4px;
  background: transparent;
  border: none;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  cursor: pointer;
  transition: color 0.14s ease, border-color 0.14s ease;
}
.character-rank-tab.is-active {
  color: var(--choeae-gold);
  border-bottom-color: var(--choeae-gold);
}
.choeae-hero {
  position: relative;
  overflow: hidden;
  margin: 0 0 12px;
  padding: 18px 18px 16px;
  background: var(--raised);
  border: 0.5px solid var(--hairline);
  border-radius: 14px;
}
.choeae-hero-numeral {
  position: absolute;
  top: -12px;
  right: 8px;
  font-family: var(--ui-font);
  font-size: 84px;
  line-height: 1;
  color: var(--choeae-gold-soft);
  pointer-events: none;
}
.choeae-hero-eyebrow {
  position: relative;
  font-family: var(--ui-font);
  font-size: 11px;
  letter-spacing: 0.24em;
  color: var(--choeae-gold);
  margin: 0 0 10px;
}
.choeae-hero-name {
  position: relative;
  font-family: var(--ui-font);
  font-size: 28px;
  line-height: 1.15;
  letter-spacing: 0.01em;
  color: var(--ink);
  margin: 0 0 9px;
}
.choeae-hero-meta {
  position: relative;
  font-family: var(--ui-font);
  font-size: 12.5px;
  letter-spacing: 0.03em;
  color: var(--muted);
}
.choeae-hero-meta b {
  color: var(--muted-strong);
}
.choeae-hero-crown {
  position: relative;
  margin-top: 12px;
  padding-top: 11px;
  border-top: 0.5px solid var(--hairline-soft);
  font-family: var(--ui-font);
  font-size: 11.5px;
  color: var(--muted);
}
.choeae-hero-crown em {
  font-style: normal;
  color: var(--choeae-gold);
  margin-left: 6px;
}
.choeae-mine {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 14px;
  padding: 9px 14px;
  border: 0.5px solid var(--choeae-gold-soft);
  border-radius: 999px;
  background: var(--choeae-gold-soft);
  font-family: var(--ui-font);
}
/* 0표의 기다리는 자리 — 채워질 왕좌의 윤곽만 점선으로 미리 그린다. */
.choeae-empty {
  position: relative;
  padding: 16px 40px 15px 18px;
  border: 0.5px dashed var(--choeae-gold-soft);
  border-radius: 14px;
}
.choeae-empty-star {
  position: absolute;
  top: 13px;
  right: 15px;
  font-size: 13px;
  color: var(--choeae-gold-soft);
  pointer-events: none;
}
.choeae-empty-lead {
  margin: 0 0 5px;
  font-family: var(--ui-font);
  font-size: 13.5px;
  letter-spacing: 0.01em;
  color: var(--muted-strong);
}
.choeae-empty-invite {
  margin: 0;
  font-family: var(--ui-font);
  font-size: 12.5px;
  letter-spacing: 0.02em;
  line-height: 1.55;
  color: var(--muted);
}
.choeae-mine-star {
  color: var(--choeae-gold);
  font-size: 12px;
}
.choeae-mine-label {
  font-size: 12px;
  color: var(--muted-strong);
}
.choeae-mine-name {
  font-size: 13.5px;
  color: var(--ink);
}
.choeae-mine-status {
  font-size: 12px;
  color: var(--choeae-gold-text);
  margin-left: auto;
  white-space: nowrap;
}
.choeae-upcoming-tag {
  font-family: var(--ui-font);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--choeae-gold);
  border: 0.5px solid var(--choeae-gold-soft);
  border-radius: 999px;
  padding: 1px 8px;
  margin-left: 6px;
  vertical-align: 2px;
  white-space: nowrap;
}
.character-rank-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.character-rank-row {
  display: grid;
  grid-template-columns: 20px 1fr auto auto;
  align-items: baseline;
  gap: 12px;
  padding: 10px 2px;
  border-top: 0.5px solid var(--hairline-soft);
  width: 100%;
  min-height: 44px;
  box-sizing: border-box;
  color: inherit;
  background: transparent;
  text-align: left;
}
.character-rank-list > .character-rank-row:first-child,
.character-rank-list > .character-rank-entry:first-child .character-rank-row {
  border-top: none;
}
.character-rank-row.is-expandable {
  border-right: 0;
  border-bottom: 0;
  border-left: 0;
  font: inherit;
  cursor: pointer;
}
.character-rank-entry {
  list-style: none;
  margin: 0;
  padding: 0;
}
.character-rank-ordinal {
  font-family: var(--ui-font);
  font-size: 12px;
  color: var(--muted);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.character-rank-name {
  font-family: var(--ui-font);
  font-size: 15px;
  letter-spacing: 0.01em;
  color: var(--ink);
  min-width: 0;
  overflow-wrap: anywhere;
}
.character-rank-cue {
  color: var(--muted);
  font-size: 11px;
  margin-left: 6px;
  opacity: 0.7;
}
.character-rank-move {
  font-family: var(--ui-font);
  font-size: 11px;
  letter-spacing: 0.05em;
  font-variant-numeric: tabular-nums;
}
.character-rank-move.is-up,
.character-rank-move.is-new {
  color: var(--choeae-gold);
}
.character-rank-move.is-down {
  color: var(--muted);
}
.character-rank-move.is-steady {
  color: var(--muted);
  opacity: 0.55;
}
.character-rank-count {
  font-family: var(--ui-font);
  font-size: 12px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.character-rank-empty {
  font-size: 12.5px;
  padding: 6px 2px;
}
.character-rank-traces {
  padding: 2px 2px 12px 32px;
}
.character-rank-traces-scope {
  margin: 6px 0 0;
  font-family: var(--ui-font);
  font-size: 10.5px;
  color: var(--muted);
}
.character-rank-trace {
  padding: 8px 0 0;
}
.character-rank-trace-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 4px;
}
.character-rank-trace-reader {
  font-family: var(--ui-font);
  font-size: 12px;
  color: var(--muted-strong);
}
.character-rank-trace-chapter {
  font-family: var(--ui-font);
  font-size: 10.5px;
  color: var(--muted);
}
.character-rank-trace-message {
  margin: 0;
  font-family: var(--manuscript-font);
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--reader-ink);
}

/* ── 교제 축: 공개 문장 노트 (닉네임 + 글 + 캐릭터, 인용문 없음) ── */
.plaza-fellowship-public-notes .public-note-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.public-note-item {
  padding: 13px 2px;
  border-top: 0.5px solid var(--hairline-soft);
}
.public-note-item:first-child {
  border-top: none;
}
.public-note-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 6px;
}
.public-note-reader {
  font-family: var(--ui-font);
  font-size: 12.5px;
  letter-spacing: 0.01em;
  color: var(--muted-strong);
}
.public-note-meta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.public-note-character {
  font-family: var(--ui-font);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  color: var(--choeae-gold);
}
.public-note-chapter {
  font-family: var(--ui-font);
  font-size: 11px;
  color: var(--muted);
}
.public-note-message {
  margin: 0;
  font-family: var(--manuscript-font);
  font-size: 14px;
  line-height: 1.72;
  color: var(--reader-ink);
}

/* 신고: 흔적 옆에 낮게 서 있다가 눌러야 사유가 펴진다. 읽는 동안 존재를 주장하면 안 되지만,
   불쾌한 글을 만난 독자가 찾아 헤매서도 안 되는 자리. */
.public-note-report {
  position: relative;
  flex-shrink: 0;
  padding: 2px 0 2px 8px;
  border: none;
  background: none;
  font-family: var(--ui-font);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--muted);
  cursor: pointer;
  opacity: 0.72;
}
/* 글자는 작게 두되 손가락이 닿는 면은 넓힌다. 못 누르는 신고 버튼은 없는 신고 버튼이다.
   레이아웃(baseline 정렬된 머리줄)은 건드리지 않으려고 padding이 아니라 히트 영역으로 넓힌다. */
.public-note-report::after {
  content: "";
  position: absolute;
  inset: -9px -6px -9px -10px;
}
.public-note-report:hover,
.public-note-report:focus-visible {
  color: var(--muted-strong);
  opacity: 1;
}
.public-note-report[aria-expanded="true"] {
  color: var(--reader-ink);
  opacity: 1;
}
.public-note-report-panel {
  margin: 10px 0 2px;
  padding: 11px 12px 12px;
  border: 0.5px solid var(--hairline-soft);
  border-radius: 12px;
}
.public-note-report-panel[hidden] {
  display: none;
}
.public-note-report-prompt {
  margin: 0 0 9px;
  font-family: var(--ui-font);
  font-size: 12px;
  color: var(--muted-strong);
}
.public-note-report-reasons {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.public-note-report-reason {
  padding: 6px 11px;
  border: 0.5px solid var(--hairline-soft);
  border-radius: 999px;
  background: none;
  font-family: var(--ui-font);
  font-size: 12px;
  color: var(--reader-ink);
  cursor: pointer;
}
.public-note-report-reason:hover,
.public-note-report-reason:focus-visible {
  border-color: var(--muted);
}
.public-note-report-reason[disabled] {
  opacity: 0.5;
  cursor: default;
}
.public-note-report-foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 11px 0 0;
}
.public-note-block,
.public-note-report-cancel {
  padding: 4px 0;
  border: none;
  background: none;
  font-family: var(--ui-font);
  font-size: 11.5px;
  color: var(--muted);
  cursor: pointer;
}
.public-note-block {
  text-align: left;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 0.5px;
}
.public-note-block:hover,
.public-note-block:focus-visible {
  color: var(--reader-ink);
}
.public-note-block[disabled] {
  opacity: 0.5;
  cursor: default;
}

/* 계정 안쪽: 가려 둔 독자와 해제. 아무도 안 가렸으면 이 자리는 렌더되지 않는다. */
.blocked-reader-list {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
}
.blocked-reader-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 0;
  border-top: 0.5px solid var(--hairline-soft);
}
.blocked-reader-row:first-child {
  border-top: none;
}
.blocked-reader-name {
  font-family: var(--ui-font);
  font-size: 12.5px;
  color: var(--reader-ink);
  overflow-wrap: anywhere;
}
.blocked-reader-undo {
  flex-shrink: 0;
  font-size: 11.5px;
}

@media (max-width: 480px) {
  .choeae-mine {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr);
    align-items: center;
    border-radius: 14px;
  }

  .choeae-mine-name {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .choeae-mine-status {
    grid-column: 2 / -1;
    margin-left: 0;
    white-space: normal;
  }

  .character-rank-row {
    grid-template-columns: 20px minmax(0, 1fr) auto;
    gap: 8px;
  }

  .character-rank-move {
    display: none;
  }

  .choeae-upcoming-tag {
    display: inline-block;
    white-space: normal;
  }

  .public-note-head,
  .public-note-meta {
    flex-wrap: wrap;
  }

  .public-note-meta {
    justify-content: flex-start;
    flex-shrink: 1;
  }
}



/* 첫 숨 전용 서체 — 마루 부리(OFL) 서브셋, RFN 회피 자체 family. 내용해시 주소(2164 규약). */
@font-face {
  font-family: "Youilmui First Breath";
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("./fonts/FirstBreathBuri.woff2?fv=34b9050aa984") format("woff2");
}
/* ── 첫 숨(속표지) ─────────────────────────────────────────────
   첫 방문에만: 1화의 두 대목이 인쇄된 책의 반표제지처럼 잠시 머문 뒤
   본문 위로 디졸브된다. 움직임은 투명도 하나뿐이고, 서체·종이·먹은
   본문과 같은 세계를 쓴다. 상표·버튼·스피너는 없다. */
html[data-reader-first-breath-hold] .reader-app {
  opacity: 0;
}
html[data-reader-first-breath-hold="revealing"] .reader-app {
  opacity: 1;
  transition: opacity 1.8s cubic-bezier(0.33, 0, 0.2, 1);
}
/* 기본은 접힘이다. `hidden` 만으로는 못 접는다 — 클래스 선택자의 display 가 UA 의
   `[hidden] { display: none }` 을 이겨 불투명한 전면 종이가 상시 화면을 덮는다.
   덮는 것은 boot-guard 가 <head> 에서 첫 페인트 전에 거는 hold 속성만 허가한다.
   그래서 자격 없는 부팅(복귀 독자·쿼리 유입·app.js 사망)에서는 종이가 아예 서지
   않고, 속성 하나만 걷어도 화면이 풀린다. */
.reader-first-breath {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: none;
  background: var(--paper);
  cursor: default;
  opacity: 1;
}
html[data-reader-first-breath-hold] .reader-first-breath {
  display: block;
}
.reader-first-breath[data-reader-first-breath="dissolving"] {
  opacity: 0;
  transition: opacity 1.8s cubic-bezier(0.33, 0, 0.2, 1);
  pointer-events: none;
}
.reader-first-breath-lines {
  position: absolute;
  left: 50%;
  top: 40%;
  transform: translate(-50%, -50%);
  width: max-content;
  /* 한글에서 ch는 반폭이다 — 자폭 기준 em으로. 넷째 줄(24자)이 데스크톱에서 한 줄로 선다.
     오버레이가 inset:0 고정이라 100%가 곧 화면 폭 — 하우스 규칙대로 vw는 쓰지 않는다. */
  max-width: min(34em, calc(100% - 3.5rem));
  text-align: left;
  /* 소유자 확정(서체 오디션): 첫 숨은 마루 부리 서브셋 — 붓끝의 온기. app.js가
     이 서체의 도착과 글리프 커버리지를 확인한 뒤에만 글줄을 시작한다. */
  font-family: "Youilmui First Breath", "Gyeonggi Batang", var(--reader-font-family);
  font-size: 1.42rem;
  line-height: 2.05;
  color: var(--ink);
  word-break: keep-all;
}
.reader-first-breath-line {
  margin: 0;
  opacity: 0;
}
@media (max-width: 520px) {
  .reader-first-breath-lines {
    font-size: 1.21rem;
  }
}
.reader-first-breath-line.reader-first-breath-turn {
  margin-top: 1.55em;
}
.reader-first-breath[data-reader-first-breath="breathing"] .reader-first-breath-line,
.reader-first-breath[data-reader-first-breath="dissolving"] .reader-first-breath-line {
  opacity: 1;
  transition: opacity 1.45s cubic-bezier(0.33, 0, 0.2, 1);
}
.reader-first-breath[data-reader-first-breath="breathing"] .reader-first-breath-line:nth-child(1) { transition-delay: 0.12s; }
.reader-first-breath[data-reader-first-breath="breathing"] .reader-first-breath-line:nth-child(2) { transition-delay: 0.54s; }
.reader-first-breath[data-reader-first-breath="breathing"] .reader-first-breath-line:nth-child(3) { transition-delay: 0.96s; }
.reader-first-breath[data-reader-first-breath="breathing"] .reader-first-breath-line:nth-child(4) { transition-delay: 2.25s; }
@media (prefers-reduced-motion: reduce) {
  html[data-reader-first-breath-hold="revealing"] .reader-app {
    transition-duration: 0.4s;
  }
  .reader-first-breath[data-reader-first-breath="dissolving"] {
    transition-duration: 0.4s;
  }
  .reader-first-breath[data-reader-first-breath="breathing"] .reader-first-breath-line {
    transition-duration: 0.01s;
  }
  .reader-first-breath[data-reader-first-breath="breathing"] .reader-first-breath-line:nth-child(1),
  .reader-first-breath[data-reader-first-breath="breathing"] .reader-first-breath-line:nth-child(2),
  .reader-first-breath[data-reader-first-breath="breathing"] .reader-first-breath-line:nth-child(3),
  .reader-first-breath[data-reader-first-breath="breathing"] .reader-first-breath-line:nth-child(4) {
    transition-delay: 0.05s;
  }
}

/* 맡겨둔 자리 — 21화 벽에서 선물이 오는 순간(PD-2026-08-15-01).
   첫 숨과 같은 곡선·같은 호흡을 빌리되 상태 기계는 분리한다. 셀렉터를 재사용하면
   두 의식이 같은 속성을 놓고 다툰다. 이 화면에 결제 옵션은 없다 — 선물 옆에 가격표가
   있으면 선물이 값이 된다. */
.reader-entrusted-door {
  position: fixed;
  inset: 0;
  z-index: 61;
  background: var(--paper);
  opacity: 1;
}
/* `display: block` 을 쓰면 클래스 선택자가 UA 의 `[hidden] { display: none }` 을 이겨,
   접혀 있어야 할 전면 오버레이가 화면을 상시 덮고 모든 입력을 삼킨다 — 첫 숨은
   쓰지 않을 때 노드를 통째로 제거해 이 함정을 피한다. 이 의식은 다시 설 수 있어야
   해서 노드를 남기므로, 접힘을 명시적으로 못 박는다. */
.reader-entrusted-door[hidden] {
  display: none;
}
.reader-entrusted-door[data-reader-entrusted-door="dissolving"] {
  opacity: 0;
  transition: opacity 1.8s cubic-bezier(0.33, 0, 0.2, 1);
  pointer-events: none;
}
.reader-entrusted-door-lines {
  position: absolute;
  left: 50%;
  top: 40%;
  transform: translate(-50%, -50%);
  width: max-content;
  max-width: min(34em, calc(100% - 3.5rem));
  text-align: left;
  font-family: var(--reader-font-family);
  font-size: 1.32rem;
  line-height: 2.05;
  color: var(--ink);
  word-break: keep-all;
}
.reader-entrusted-door-line {
  margin: 0;
  opacity: 0;
}
.reader-entrusted-door-line.reader-entrusted-door-turn {
  margin-top: 1.5em;
}
@media (max-width: 520px) {
  .reader-entrusted-door-lines {
    font-size: 1.16rem;
  }
}
.reader-entrusted-door[data-reader-entrusted-door="breathing"] .reader-entrusted-door-line,
.reader-entrusted-door[data-reader-entrusted-door="dissolving"] .reader-entrusted-door-line {
  opacity: 1;
  transition: opacity 1.45s cubic-bezier(0.33, 0, 0.2, 1);
}
.reader-entrusted-door[data-reader-entrusted-door="breathing"] .reader-entrusted-door-line:nth-child(1) { transition-delay: 0.3s; }
.reader-entrusted-door[data-reader-entrusted-door="breathing"] .reader-entrusted-door-line:nth-child(2) { transition-delay: 1.3s; }
.reader-entrusted-door[data-reader-entrusted-door="breathing"] .reader-entrusted-door-line:nth-child(3) { transition-delay: 2.5s; }
/* 문을 여는 말은 버튼이지만 버튼처럼 굴지 않는다 — 이 화면에는 값이 없다. */
.reader-entrusted-door-open {
  display: block;
  margin: 2.4em 0 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 0.94rem;
  letter-spacing: 0.12em;
  color: var(--muted);
  opacity: 0;
  cursor: pointer;
}
.reader-entrusted-door[data-reader-entrusted-door="breathing"] .reader-entrusted-door-open,
.reader-entrusted-door[data-reader-entrusted-door="dissolving"] .reader-entrusted-door-open {
  opacity: 1;
  transition: opacity 1.45s cubic-bezier(0.33, 0, 0.2, 1);
  transition-delay: 3.9s;
}
.reader-entrusted-door[data-reader-entrusted-door="dissolving"] .reader-entrusted-door-open {
  transition-delay: 0s;
}
.reader-entrusted-door-open:focus-visible {
  outline: 1px solid var(--ink);
  outline-offset: 0.5em;
}
@media (prefers-reduced-motion: reduce) {
  .reader-entrusted-door[data-reader-entrusted-door="dissolving"] {
    transition-duration: 0.4s;
  }
  .reader-entrusted-door[data-reader-entrusted-door="breathing"] .reader-entrusted-door-line,
  .reader-entrusted-door[data-reader-entrusted-door="breathing"] .reader-entrusted-door-open {
    transition-duration: 0.01s;
    transition-delay: 0.05s;
  }
}