/* 유일무이 — 상황 연출 시트(서식 3판 · PD-2026-10-02-03).

   왜 따로 있는가: 상황 연출(게시판 핀 · 기사 · 노트북 · 말풍선 · 손글씨 …)은 노션 대본이 선 회차에서만
   쓰인다(200화 중 59화, 공개 1~3화에는 없다). 독자 시트(styles.css)는 첫 페인트의 렌더 차단 경로라
   모든 첫 방문이 받는다 — 여기 두면 아무 연출도 없는 첫 화면이 그 무게를 진다. 그래서 갈랐다.

   규칙 하나: **연출이 선 회차의 첫 페인트는 이 시트보다 앞서지 않는다.** 산문을 그리는 네 자리
   (서버 공개 회차 HTML · reader-start · reader-entry · app)가 회차에 상황 표식이 있으면 이 시트가
   선 뒤에 그린다 — 서버는 head 의 렌더 차단 링크로, 스크립트는 링크의 load 를 기다려서. 2204 의 교훈
   (런타임에 붙인 시트가 산문보다 늦어 2.5초 동안 어긋나 보였다)을 이 시트가 되풀이하지 않게 하는 것이
   test_reader_situation_sheet_contract.py 다.

   이 시트는 styles.css 뒤에 붙으므로 캐스케이드 차례가 예전(styles.css 의 맨 끝)과 같다. */

/* ── 서식 3판 — 상황 연출(1판: 소유자 2026-10-02 「전부 추천으로」 · 차선 C 구상 §7) ──────────────────
   노션 콜아웃의 아이콘이 상황의 이름이고, 그 콜아웃과 바로 이어진 인용들이 한 덩이다. 화면은 문단을
   감싸지 않는다 — 문단마다 상황(data-prose-situation)과 덩이 자리(data-prose-group-role: start · mid ·
   end · solo, 서버 서빙 투영이 매긴다)를 달고, 같은 덩이의 문단들이 테두리와 바탕을 이어 하나의 사물
   (게시글 · 기사 · 노트북 창 · 전광판 · 노래방 화면 · 종이 한 장 · 연구소 단말)로 선다. 책갈피 · 흔적 ·
   숨 · 넘김이 기대는 평평한 문단 차례가 그대로이고, 넘김에서 덩이가 쪽을 넘으면 쪽 경계에서 나뉜다.
   글자는 한 자도 더하거나 빼지 않는다 — 꾸밈은 ::before · ::after 와 바탕뿐, 인라인 style 없이(CSP)
   정해진 이름만 쓴다. 크기는 em(독자의 글자 크기를 따른다), 색은 종이(--paper)와 잉크(--reader-ink)에
   섞어 읽기 자세마다 따라간다. 2판(댓글창 · 말풍선 · 손글씨 · 단자쿠 · 닿으면 움직이는 것)은 아직이다 —
   그 상황의 문단은 아래 공통 틀(맨 종이 덩이)로만 선다. */
:root {
  --prose-situation-sheet: color-mix(in srgb, var(--paper) 45%, #ffffff);
  --prose-situation-edge: color-mix(in srgb, var(--reader-ink, #141414) 15%, transparent);
  --prose-situation-muted: color-mix(in srgb, var(--reader-ink, #141414) 56%, transparent);
  --prose-situation-grid: color-mix(in srgb, var(--reader-ink, #141414) 8%, transparent);
  --prose-situation-bar: color-mix(in srgb, var(--reader-ink, #141414) 6%, var(--prose-situation-sheet));
  --prose-situation-shadow: 0 0.7em 1.2em -0.95em rgba(0, 0, 0, 0.38);
  --prose-screen-tv: #0b0a0f;
  --prose-screen-tv-ink: #fcf8ff;
  --prose-screen-tv-glow: rgba(255, 96, 210, 0.5);
  --prose-screen-karaoke: #10257f;
  --prose-screen-karaoke-deep: #06135a;
  --prose-screen-karaoke-edge: #0a1340;
  --prose-screen-karaoke-wipe: #ff9f1c;
  --prose-screen-karaoke-ink: #ffffff;
  --prose-screen-karaoke-gold: #ffe36e;
  --prose-stamp: #bf352e;
  --prose-pin: #c8423b;
  --prose-lab-font: "D2Coding", "Nanum Gothic Coding", ui-monospace, "SFMono-Regular", Menlo, Consolas, var(--body-font);
}

html[data-theme="dark"] {
  --prose-situation-sheet: color-mix(in srgb, var(--paper) 90%, #ffffff);
  --prose-situation-shadow: 0 0.7em 1.2em -0.95em rgba(0, 0, 0, 0.85);
  --prose-stamp: #e2645b;
  --prose-pin: #e0665e;
}

/* 덩이의 폭 — 본문 문단의 폭은 글자 크기(em)로 재는 한 줄 길이라, 글씨를 줄이거나 키운 줄(원문 자막 · 제목)만
   폭이 달라져 상자가 줄마다 들쭉날쭉해진다(넓은 화면에서 실측). 한 줄 길이를 본문 글자 크기에서 한 번 길이로
   굳혀(@property) 덩이 문단에 물려준다 — 어느 화면 모양의 폭 규칙이든 같은 값을 쓰므로 본문과 같은 폭이 된다.
   @property 를 모르는 브라우저는 예전처럼 글자 크기로 잰다. */
@property --situation-measure {
  syntax: "<length>";
  inherits: true;
  initial-value: 9999px;
}

#readerContent .reader-content-inner {
  --situation-measure: var(--reader-ko-measure-active, var(--reader-ko-measure, 32.5em));
}

#readerContent .reader-content-inner > p[data-prose-situation] {
  --reader-ko-measure-active: var(--situation-measure);
}

/* 공통 틀 — 맨 종이 덩이. 상황마다 아래에서 바탕 · 테두리 · 둥글기를 바꾼다. */
#readerContent .reader-content-inner > p[data-prose-situation] {
  --situation-bg: var(--prose-situation-sheet);
  --situation-border: 1px solid var(--prose-situation-edge);
  --situation-radius: 0.6em;
  position: relative;
  margin-inline: auto;
  padding: 0.14em 1.15em;
  border: 0;
  border-inline: var(--situation-border);
  border-radius: 0;
  background-color: var(--situation-bg);
  text-indent: 0;
  text-align: start;
}

#readerContent .reader-content-inner > p[data-prose-situation]::before {
  content: none;
}

/* 덩이 안 문단 사이에는 숨이 없다 — 한 사물이다. 처음과 끝에서만 닫는다. */
#readerContent .reader-content-inner > p[data-prose-group-role="start"]:not(:where([data-prose-situation="bed"])),
#readerContent .reader-content-inner > p[data-prose-group-role="mid"]:not(:where([data-prose-situation="bed"])) {
  margin-block-end: 0;
}

#readerContent .reader-content-inner > p[data-prose-group-role="start"],
#readerContent .reader-content-inner > p[data-prose-group-role="solo"] {
  padding-block-start: 0.85em;
  border-block-start: var(--situation-border);
  border-start-start-radius: var(--situation-radius);
  border-start-end-radius: var(--situation-radius);
}

/* 덩이의 시작만 다음 줄과 붙는다. 혼자 선 덩이(solo)에 걸면 덩이 밖의 다음 문단까지 끌어당겨, 넘김 쪽 끝에 선
   상황 줄이 통째로 다음 쪽으로 밀리고 빈 꼬리가 남는다(10/5 리추얼 — 1화 심장, 390x844 첫 쪽 10줄 · 빈 꼬리 255px). */
#readerContent .reader-content-inner > p[data-prose-group-role="start"] {
  break-after: avoid;
}

#readerContent .reader-content-inner > p[data-prose-group-role="end"],
#readerContent .reader-content-inner > p[data-prose-group-role="solo"] {
  padding-block-end: 0.85em;
  border-block-end: var(--situation-border);
  border-end-start-radius: var(--situation-radius);
  border-end-end-radius: var(--situation-radius);
}

#readerContent .reader-content-inner > p[data-prose-group-role="end"] {
  break-before: avoid;
}

/* 옅게 — 문서 덩이의 「항목:」(서빙 투영의 표식 dim). */
#readerContent .prose-dim {
  color: var(--prose-situation-muted);
}

/* 메아리 — 서술 밖에서 들리되 그 자리에 없는 목소리(회색 기울임, 매뉴얼 ⑩). 덩이가 아니라 글줄이다. */
#readerContent .prose-color[data-prose-color="gray"] em {
  color: color-mix(in srgb, var(--prose-gray) 82%, transparent);
  letter-spacing: 0.015em;
}

/* 📌 게시글 머리 — 둥근 카드만(핀 점은 걷었다 — 원칙 27 「점」, 차선 C 사전 b3629fcc · 형제님 10/5). */
#readerContent .reader-content-inner > p[data-prose-situation="pin"] {
  --situation-radius: 0.8em;
  font-family: var(--body-font);
  font-size: 0.93em;
}

/* 📰 기사 머리 — 제목은 굵은 명조와 아래 금, 본문 줄은 왼쪽 막대. */
#readerContent .reader-content-inner > p[data-prose-situation="news"] {
  --situation-radius: 0.35em;
  font-size: 0.95em;
}

#readerContent .reader-content-inner > p[data-prose-situation="news"]:is([data-prose-group-role="start"], [data-prose-group-role="solo"]) {
  font-family: var(--manuscript-font);
  font-size: 1.06em;
  font-weight: 800;
  line-height: 1.55;
}

#readerContent .reader-content-inner > p[data-prose-situation="news"] em {
  font-style: normal;
}

#readerContent .reader-content-inner > p[data-prose-situation="news"][data-prose-group-role="start"] {
  padding-block-end: 0.55em;
  box-shadow: inset 0 -1px 0 var(--prose-situation-edge);
}

#readerContent .reader-content-inner > p[data-prose-situation="news"]:is([data-prose-group-role="mid"], [data-prose-group-role="end"]) {
  padding-inline-start: 2.15em;
}

#readerContent .reader-content-inner > p[data-prose-situation="news"][data-prose-group-role="start"] + p[data-prose-situation="news"] {
  padding-block-start: 0.6em;
}

#readerContent .reader-content-inner > p[data-prose-situation="news"]:is([data-prose-group-role="mid"], [data-prose-group-role="end"])::before {
  content: "";
  position: absolute;
  inset-block: 0.35em;
  inset-inline-start: 1.15em;
  width: 3px;
  background-color: var(--prose-rule);
}

/* 💻 노트북 문서 — 창 머리띠(신호등 셋)와 깜빡이는 커서. 지면이 「커서만 깜빡인다」고 말할 때만 움직인다. */
#readerContent .reader-content-inner > p[data-prose-situation="laptop"] {
  --situation-radius: 0.75em;
  padding-inline: 1.35em;
  font-family: var(--body-font);
  font-size: 1.14em;
}

#readerContent .reader-content-inner > p[data-prose-situation="laptop"]:is([data-prose-group-role="start"], [data-prose-group-role="solo"]) {
  padding-block-start: 2.3em;
}

#readerContent .reader-content-inner > p[data-prose-situation="laptop"]:is([data-prose-group-role="start"], [data-prose-group-role="solo"])::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 1.45em;
  border-start-start-radius: var(--situation-radius);
  border-start-end-radius: var(--situation-radius);
  border-block-end: 1px solid var(--prose-situation-edge);
  background-color: var(--prose-situation-bar);
  background-image:
    radial-gradient(circle at 1.05em 50%, #ec6a5e 0 0.24em, transparent 0.26em),
    radial-gradient(circle at 1.75em 50%, #f2bd4c 0 0.24em, transparent 0.26em),
    radial-gradient(circle at 2.45em 50%, #5fc251 0 0.24em, transparent 0.26em);
}

#readerContent .reader-content-inner > p[data-prose-situation="laptop"]:is([data-prose-group-role="end"], [data-prose-group-role="solo"]) {
  padding-block-end: 2.2em;
}

#readerContent .reader-content-inner > p[data-prose-situation="laptop"]:is([data-prose-group-role="end"], [data-prose-group-role="solo"])::after {
  content: "";
  display: inline-block;
  width: 0.08em;
  height: 1.08em;
  margin-inline-start: 0.14em;
  vertical-align: -0.17em;
  background-color: currentColor;
  animation: prose-cursor-blink 1.06s steps(1) infinite;
}

@keyframes prose-cursor-blink {
  50% {
    opacity: 0;
  }
}

/* 📺 작중 화면(전광판) — 검은 화면 · 주사선 · 네온 글자. 첫 줄이 파트 이름이 아니면 제목이다. */
#readerContent .reader-content-inner > p[data-prose-situation="tv"] {
  --situation-bg: var(--prose-screen-tv);
  --situation-border: 1px solid #000;
  --situation-radius: 0.9em;
  padding-block: 0.2em;
  background-image: repeating-linear-gradient(to bottom, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 3px);
  color: var(--prose-screen-tv-ink);
  font-family: var(--body-font);
  font-weight: 700;
  text-align: center;
  text-shadow: 0 0 0.5em var(--prose-screen-tv-glow), 0 0 0.12em rgba(255, 255, 255, 0.55);
}

#readerContent .reader-content-inner > p[data-prose-situation="tv"] em {
  font-style: normal;
}

#readerContent .reader-content-inner > p[data-prose-situation="tv"]:is([data-prose-group-role="start"], [data-prose-group-role="solo"]):not([data-prose-part]) {
  padding-block-start: 1em;
  font-family: var(--manuscript-font);
  font-size: 1.3em;
  letter-spacing: 0.02em;
}

#readerContent .reader-content-inner > p[data-prose-situation="tv"]:is([data-prose-group-role="end"], [data-prose-group-role="solo"]) {
  padding-block-end: 1.05em;
}

html[data-theme="dark"] #readerContent .reader-content-inner > p[data-prose-situation="tv"] {
  --situation-border: 1px solid rgba(255, 255, 255, 0.14);
}

/* 🎬 예능 기획안 제목(movie) — 방송 자막 꼴. 상자 없이 가운데에, 첫 줄은 노란 글자 · 짙은 테두리 · 주황 그림자,
   다음 줄은 더 크게 흰 글자 · 파란 그림자, 두 줄이 서로 반대로 조금 기운다(카탈로그 4판 s14, 073화). */
#readerContent .reader-content-inner > p[data-prose-situation="movie"] {
  --situation-bg: transparent;
  --situation-border: 0 solid transparent;
  padding-inline: 0.4em;
  color: #ffe14d;
  font-family: var(--body-font);
  font-size: 1.45em;
  font-weight: 900;
  line-height: 1.3;
  text-align: center;
  -webkit-text-stroke: 0.07em #2a1b00;
  paint-order: stroke fill;
  text-shadow: 0.11em 0.11em 0 #ff7a1a;
  transform: rotate(-2deg);
}

#readerContent .reader-content-inner > p[data-prose-situation="movie"]:is([data-prose-group-role="mid"], [data-prose-group-role="end"]) {
  color: #ffffff;
  font-size: 1.8em;
  text-shadow: 0.09em 0.09em 0 #2b6a93;
  transform: rotate(1.5deg);
}

/* 파트 이름 — 작은 알약. 글자는 그대로이고 테두리만 두른다. */
#readerContent .reader-content-inner > p[data-prose-part] > .sentence {
  padding: 0.08em 0.85em;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: 0.74em;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

#readerContent .reader-content-inner > p[data-prose-situation="tv"][data-prose-part] {
  padding-block: 0.45em 0.3em;
  text-shadow: none;
}

/* 🎤 노래방 — 남색 화면(위아래가 짙다) · 머리의 마디 막대 · 원문은 위에 작게(금빛) · 부를 줄은 크게, 짙은 테두리.
   덩이의 첫 부를 줄은 부른 만큼 물든다(앞 62% 주황 — 카탈로그 4판 s22). 물들임은 글줄(문장 조각)에 입혀,
   줄이 접혀도 글자 길이의 62% 에서 갈린다. */
#readerContent .reader-content-inner > p[data-prose-situation="microphone"] {
  --situation-bg: var(--prose-screen-karaoke);
  --situation-border: 3px solid var(--prose-screen-karaoke-edge);
  --situation-radius: 0.65em;
  padding-block: 0.08em;
  box-shadow: inset 2px 0 0 rgba(255, 255, 255, 0.08), inset -2px 0 0 rgba(255, 255, 255, 0.08);
  color: var(--prose-screen-karaoke-ink);
  font-family: var(--body-font);
  font-size: 1.06em;
  font-weight: 900;
  letter-spacing: 0.02em;
  text-align: center;
  -webkit-text-stroke: 0.05em var(--prose-screen-karaoke-edge);
  paint-order: stroke fill;
  text-shadow: 0 0.11em 0 var(--prose-screen-karaoke-edge);
}

#readerContent .reader-content-inner > p[data-prose-situation="microphone"] em {
  font-style: normal;
}

#readerContent .reader-content-inner > p[data-prose-situation="microphone"]:is([data-prose-group-role="start"], [data-prose-group-role="solo"]) {
  padding-block-start: 1.75em;
  background-image: linear-gradient(to bottom, var(--prose-screen-karaoke-deep), transparent 2.6em);
  box-shadow: inset 2px 2px 0 rgba(255, 255, 255, 0.08), inset -2px 0 0 rgba(255, 255, 255, 0.08);
}

#readerContent .reader-content-inner > p[data-prose-situation="microphone"]:is([data-prose-group-role="start"], [data-prose-group-role="solo"])::before {
  content: "";
  position: absolute;
  top: 0.65em;
  inset-inline: 1.3em;
  height: 0.26em;
  border-radius: 999px;
  background-image: repeating-linear-gradient(to right, rgba(255, 255, 255, 0.24) 0 23%, transparent 23% 25.66%);
}

#readerContent .reader-content-inner > p[data-prose-situation="microphone"]:is([data-prose-group-role="end"], [data-prose-group-role="solo"]) {
  padding-block-end: 1.05em;
  background-image: linear-gradient(to top, var(--prose-screen-karaoke-deep), transparent 2.6em);
  box-shadow: inset 2px -2px 0 rgba(255, 255, 255, 0.08), inset -2px 0 0 rgba(255, 255, 255, 0.08);
}

#readerContent .reader-content-inner > p[data-prose-situation="microphone"][data-prose-group-role="solo"] {
  background-image: linear-gradient(to bottom, var(--prose-screen-karaoke-deep), transparent 2.6em, transparent calc(100% - 2.6em), var(--prose-screen-karaoke-deep));
}

#readerContent .reader-content-inner > p[data-prose-situation="microphone"][data-prose-sub] {
  padding-block-start: 0.6em;
  color: var(--prose-screen-karaoke-gold);
  font-size: 0.74em;
  font-weight: 700;
  letter-spacing: 0.02em;
  -webkit-text-stroke: 0;
  text-shadow: none;
}

#readerContent .reader-content-inner > p[data-prose-situation="microphone"][data-prose-part] {
  padding-block-end: 0.2em;
  color: var(--prose-screen-karaoke-gold);
  -webkit-text-stroke: 0;
  text-shadow: none;
}

#readerContent .reader-content-inner > p[data-prose-situation="microphone"][data-prose-group-role="start"]:not([data-prose-sub]):not([data-prose-part]) > .sentence,
#readerContent .reader-content-inner > p[data-prose-situation="microphone"][data-prose-group-role="start"]:is([data-prose-sub], [data-prose-part]) + p[data-prose-situation="microphone"]:not([data-prose-sub]):not([data-prose-part]) > .sentence,
#readerContent .reader-content-inner > p[data-prose-situation="microphone"][data-prose-group-role="start"][data-prose-part] + p[data-prose-situation="microphone"][data-prose-sub] + p[data-prose-situation="microphone"]:not([data-prose-sub]) > .sentence {
  background-image: linear-gradient(90deg, var(--prose-screen-karaoke-wipe) 0 62%, var(--prose-screen-karaoke-ink) 62%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-stroke: 0;
  text-shadow: none;
  filter: drop-shadow(0 0.1em 0 var(--prose-screen-karaoke-edge)) drop-shadow(0 0 1px var(--prose-screen-karaoke-edge));
}

/* 📄 문서 — 종이 한 장 · 보고서체 · 그림자. 항목은 옅게(서빙 투영의 dim). */
#readerContent .reader-content-inner > p[data-prose-situation="document"] {
  --situation-radius: 0.2em;
  padding-inline: 1.4em;
  font-family: var(--body-font);
  font-size: 0.9em;
  line-height: 1.8;
}

#readerContent .reader-content-inner > p[data-prose-situation="document"]:is([data-prose-group-role="start"], [data-prose-group-role="solo"]) {
  padding-block-start: 1.05em;
}

#readerContent .reader-content-inner > p[data-prose-situation="document"]:is([data-prose-group-role="end"], [data-prose-group-role="solo"]) {
  padding-block-end: 1.05em;
  box-shadow: var(--prose-situation-shadow);
}

/* 문서 안의 빨강은 도장 — 「대외비」 같은 낱말 하나(카탈로그 4판 s16). 글줄 표식 하나라 통째로 돌린다. */
#readerContent .reader-content-inner > p[data-prose-situation="document"] .prose-color[data-prose-color="red"] {
  display: inline-block;
  margin-inline: 0.12em;
  padding: 0 0.35em;
  border: 0.12em solid var(--prose-stamp);
  border-radius: 0.25em;
  color: var(--prose-stamp);
  font-weight: 800;
  line-height: 1.3;
  transform: rotate(-4deg);
}

/* 🧪 뇌내 연구소 단말 — 네모 모눈 · 고정폭 영문(한글은 고딕으로 — 고정폭 한글 대체 글꼴은 윈도에서 굴림체가
   되어 글자 사이가 벌어진다). 모눈 한 칸은 줄 높이의 절반이고 상자 안 문단은 위아래 여백을 칸에 맞춰, 문단마다
   무늬가 다시 시작해도 이음매가 없다. 기울임 줄은 연구원의 말(옅게). */
#readerContent .reader-content-inner > p[data-prose-situation="brain"] {
  --situation-radius: 0.6em;
  --lab-cell: 0.875em;
  padding-block: 0;
  background-image:
    linear-gradient(var(--prose-situation-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--prose-situation-grid) 1px, transparent 1px);
  background-size: var(--lab-cell) var(--lab-cell);
  font-family: var(--prose-lab-font);
  font-size: 0.88em;
  line-height: 1.75;
  letter-spacing: 0.01em;
}

#readerContent .reader-content-inner > p[data-prose-situation="brain"]:is([data-prose-group-role="start"], [data-prose-group-role="solo"]) {
  padding-block-start: var(--lab-cell);
}

#readerContent .reader-content-inner > p[data-prose-situation="brain"]:is([data-prose-group-role="end"], [data-prose-group-role="solo"]) {
  padding-block-end: var(--lab-cell);
}

#readerContent .reader-content-inner > p[data-prose-situation="brain"] em {
  color: var(--prose-situation-muted);
  font-style: normal;
}

/* 연구원의 말(기울임 줄)은 단말의 프롬프트 줄 — 앞에 「›」를 세운다(꾸밈이라 읽어 주지 않는다). */
#readerContent .reader-content-inner > p[data-prose-situation="brain"]:not([data-prose-stamp]):has(> .sentence > em)::before {
  content: "› ";
  content: "› " / "";
  color: var(--prose-situation-muted);
}

/* 결재 도장 — 서빙 투영이 stamp 로 매긴 줄(덩이 안에서 줄 전체가 빨강). 상자 안의 한 줄이고, 도장은 그 줄의
   글자에 찍는다. 「〈승인.〉」은 문장 조각 둘(〈승인. · 〉)이라 조각마다 테두리 반쪽을 두르고, 둘이 맞닿은 점을
   축으로 같은 각만큼 돌려 한 도장으로 선다. 조각이 셋 이상이면 한 축이 없으니 반듯하게 찍는다. */
#readerContent .reader-content-inner > p[data-prose-situation="brain"][data-prose-stamp] {
  padding-block-start: var(--lab-cell);
}

#readerContent .reader-content-inner > p[data-prose-situation="brain"][data-prose-stamp] > .sentence {
  display: inline-block;
  padding-block: 0.04em;
  border-block: 0.14em solid var(--prose-stamp);
  color: var(--prose-stamp);
  font-family: var(--manuscript-font);
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: 0.06em;
  opacity: 0.94;
  transform: rotate(-8deg);
}

#readerContent .reader-content-inner > p[data-prose-situation="brain"][data-prose-stamp] > .sentence:first-of-type {
  margin-inline-start: 0.2em;
  padding-inline-start: 0.5em;
  border-inline-start: 0.14em solid var(--prose-stamp);
  border-start-start-radius: 0.35em;
  border-end-start-radius: 0.35em;
  transform-origin: 100% 50%;
}

#readerContent .reader-content-inner > p[data-prose-situation="brain"][data-prose-stamp] > .sentence:last-of-type {
  padding-inline-end: 0.5em;
  border-inline-end: 0.14em solid var(--prose-stamp);
  border-start-end-radius: 0.35em;
  border-end-end-radius: 0.35em;
  transform-origin: 0 50%;
}

#readerContent .reader-content-inner > p[data-prose-situation="brain"][data-prose-stamp] > .sentence:only-of-type {
  transform-origin: 50% 50%;
}

#readerContent .reader-content-inner > p[data-prose-situation="brain"][data-prose-stamp] > .sentence:first-of-type:nth-last-of-type(n + 3),
#readerContent .reader-content-inner > p[data-prose-situation="brain"][data-prose-stamp] > .sentence:first-of-type:nth-last-of-type(n + 3) ~ .sentence {
  transform: none;
}

#readerContent .reader-content-inner > p[data-prose-situation="brain"][data-prose-stamp] .prose-color[data-prose-color="red"] {
  color: inherit;
}

@media (prefers-reduced-motion: reduce) {
  #readerContent .reader-content-inner > p[data-prose-situation="laptop"]::after {
    animation: none;
  }
}

/* ── 서식 3판 · 2판 — 댓글창 · 말풍선 · 반응 글 · 연락처 · 사진 메시지(카탈로그 4판 s1~s7) ─────────────
   인물은 댓글 이름 줄의 글자로만 정해진다(서버 서빙 투영이 who 를 단다 — 정화도 「최정화」). 색은 구상 §7-1
   팔레트다. 정화의 색은 연분홍이고(소유자 2026-10-07 — 연푸른 · 파랑 계열은 왁세의 색이라 정화에게 쓰지 않는다), 회색 요아비소도
   푸른 기운이 없다. 말풍선의 쪽을 노션 아이콘 색(파랑 = 정화 쪽)으로 읽는 것은 서빙 규칙일 뿐 화면의 색과 무관하다.
   웃음 기호(ㅋㅋ)는 그 사람의 색, 맨 앞 「 와 맨 끝 」는 옅게(서빙 표식). 덩이 폭 계약(--situation-measure)은
   그대로이고, 말풍선만 그 안에서 78% 를 넘지 않는다. */
:root {
  --prose-who-me: #e58cae;
  --prose-who-me-ink: #a8456d;
  --prose-who-yoabiso: #666a70;
  --prose-who-minori: #8a7a5c;
  --prose-who-speck: #b4560f;
  --prose-who-jangjeong: #a07a1a;
  --prose-who-black: #3a3836;
  --prose-who-janggu: #8a867e;
  --prose-who-other: #8a867e;
  --prose-me-wash: rgba(229, 140, 174, 0.12);
  --prose-bubble-me: #fde68a;
  --prose-bubble-me-ink: #2b2410;
  --prose-bubble-you: #ffffff;
  --prose-photo-stripe: color-mix(in srgb, var(--reader-ink, #141414) 8%, transparent);
}

html[data-theme="dark"] {
  --prose-who-me: #f2a5c4;
  --prose-who-me-ink: #f2a5c4;
  --prose-who-yoabiso: #a8abb0;
  --prose-who-minori: #c9a876;
  --prose-who-speck: #e8935a;
  --prose-who-jangjeong: #e2c15a;
  --prose-who-black: #cfc9bd;
  --prose-who-janggu: #a9a59e;
  --prose-who-other: #a9a59e;
  --prose-me-wash: rgba(242, 165, 196, 0.14);
  --prose-bubble-me: #5b4d1f;
  --prose-bubble-me-ink: #f3ead0;
  --prose-bubble-you: #1d1d1b;
}

#readerContent .reader-content-inner > p[data-prose-who] {
  --who: var(--prose-who-other);
}

#readerContent .reader-content-inner > p[data-prose-who="me"] {
  --who: var(--prose-who-me);
  --who-ink: var(--prose-who-me-ink);
}

#readerContent .reader-content-inner > p[data-prose-who="yoabiso"] {
  --who: var(--prose-who-yoabiso);
}

#readerContent .reader-content-inner > p[data-prose-who="minori"] {
  --who: var(--prose-who-minori);
}

#readerContent .reader-content-inner > p[data-prose-who="speck"] {
  --who: var(--prose-who-speck);
}

#readerContent .reader-content-inner > p[data-prose-who="jangjeong"] {
  --who: var(--prose-who-jangjeong);
}

#readerContent .reader-content-inner > p[data-prose-who="black"] {
  --who: var(--prose-who-black);
}

#readerContent .reader-content-inner > p[data-prose-who="janggu"] {
  --who: var(--prose-who-janggu);
}

#readerContent .prose-laugh {
  color: var(--who-ink, var(--who, var(--prose-who-other)));
  font-weight: 700;
}

/* 🗨️ 댓글창 — 상자 없이 댓글마다 아래 금. 이름 줄은 인물 색 동그라미와 작은 굵은 이름, 「」 줄은 이름 아래 칸.
   정화의 댓글은 그의 바탕(옅은 파랑 + 왼쪽 띠). 이어진 댓글들이 한 창이라 사이에 숨을 두지 않는다. */
#readerContent .reader-content-inner > p[data-prose-situation="comment"] {
  --situation-bg: transparent;
  --situation-border: 0 solid transparent;
  --situation-radius: 0.75em;
  margin-block-end: 0;
  padding: 0 0.5em 0 2.65em;
  font-family: var(--body-font);
  font-size: 0.92em;
  line-height: 1.75;
}

#readerContent .reader-content-inner > p[data-prose-situation="comment"][data-prose-head] {
  padding-block-start: 0.72em;
  color: var(--who-ink, var(--who));
  font-size: 0.8em;
  font-weight: 700;
  line-height: 1.5;
}

#readerContent .reader-content-inner > p[data-prose-situation="comment"][data-prose-head]::before {
  content: "";
  position: absolute;
  inset-inline-start: 0.62em;
  top: 0.78em;
  width: 1.95em;
  height: 1.95em;
  border-radius: 50%;
  background-color: var(--who);
}

#readerContent .reader-content-inner > p[data-prose-situation="comment"]:is([data-prose-group-role="end"], [data-prose-group-role="solo"]) {
  padding-block-end: 0.68em;
  box-shadow: inset 0 -1px 0 var(--prose-situation-edge);
}

#readerContent .reader-content-inner > p[data-prose-situation="comment"][data-prose-who="me"] {
  --situation-bg: var(--prose-me-wash);
  box-shadow: inset 3px 0 0 var(--prose-who-me);
}

#readerContent .reader-content-inner > p[data-prose-situation="comment"][data-prose-who="me"]:is([data-prose-group-role="start"], [data-prose-group-role="solo"]) {
  margin-block-start: 0.3em;
  border-start-start-radius: var(--situation-radius);
  border-start-end-radius: var(--situation-radius);
}

#readerContent .reader-content-inner > p[data-prose-situation="comment"][data-prose-who="me"]:is([data-prose-group-role="end"], [data-prose-group-role="solo"]) {
  margin-block-end: 0.3em;
  border-end-start-radius: var(--situation-radius);
  border-end-end-radius: var(--situation-radius);
}

#readerContent .reader-content-inner > p[data-prose-situation="comment"] + p:not([data-prose-situation="comment"]) {
  margin-block-start: 1.1em;
}

/* 💬 말풍선 — 상대는 왼쪽 흰 풍선, 정화는 오른쪽 노란 풍선. 한 메시지가 여러 줄(콜아웃 + 인용)이면 한 풍선의
   줄들이라 폭을 78% 로 맞춰 한 상자로 서고, 한 줄 메시지는 글자만큼만 넓다. 이어진 풍선 사이는 좁게. */
#readerContent .reader-content-inner > p:is([data-prose-situation="chat"], [data-prose-situation="camera"]) {
  --situation-bg: var(--prose-bubble-you);
  --situation-border: 1px solid var(--prose-situation-edge);
  --situation-radius: 1.15em;
  --bubble-gutter: calc((100% - min(100%, var(--situation-measure))) / 2);
  width: min(78%, calc(var(--situation-measure) * 0.78));
  margin-inline: var(--bubble-gutter) auto;
  padding: 0.06em 0.95em;
  font-family: var(--body-font);
  font-size: 0.94em;
  line-height: 1.6;
}

#readerContent .reader-content-inner > p:is([data-prose-situation="chat"], [data-prose-situation="camera"])[data-prose-group-role="solo"] {
  width: fit-content;
  max-width: min(78%, calc(var(--situation-measure) * 0.78));
}

#readerContent .reader-content-inner > p:is([data-prose-situation="chat"], [data-prose-situation="camera"]):is([data-prose-group-role="start"], [data-prose-group-role="solo"]) {
  padding-block-start: 0.5em;
}

#readerContent .reader-content-inner > p:is([data-prose-situation="chat"], [data-prose-situation="camera"]):is([data-prose-group-role="end"], [data-prose-group-role="solo"]) {
  margin-block-end: 0.42em;
  padding-block-end: 0.5em;
  border-end-start-radius: 0.3em;
}

#readerContent .reader-content-inner > p[data-prose-situation="chat"][data-prose-side="me"] {
  --situation-bg: var(--prose-bubble-me);
  --situation-border: 0 solid transparent;
  margin-inline: auto var(--bubble-gutter);
  color: var(--prose-bubble-me-ink);
}

#readerContent .reader-content-inner > p[data-prose-situation="chat"][data-prose-side="me"]:is([data-prose-group-role="end"], [data-prose-group-role="solo"]) {
  border-end-start-radius: var(--situation-radius);
  border-end-end-radius: 0.3em;
}

#readerContent .reader-content-inner > p:is([data-prose-situation="chat"], [data-prose-situation="camera"]) + p:not([data-prose-situation="chat"]):not([data-prose-situation="camera"]) {
  margin-block-start: 0.7em;
}

/* 📷 사진 메시지 — 풍선 안의 줄무늬 사진 자리, 콜아웃 글은 그 사진의 설명(작게 · 기울여). */
#readerContent .reader-content-inner > p[data-prose-situation="camera"] {
  padding: 0.45em 0.45em 0.5em;
  color: var(--prose-situation-muted);
  font-size: 0.82em;
  font-style: italic;
}

#readerContent .reader-content-inner > p[data-prose-situation="camera"]::before {
  content: "";
  display: block;
  width: min(15em, 100%);
  height: 9.9em;
  margin-block-end: 0.45em;
  border-radius: 0.9em;
  background-color: color-mix(in srgb, var(--reader-ink, #141414) 4%, transparent);
  background-image: repeating-linear-gradient(135deg, var(--prose-photo-stripe) 0 0.75em, transparent 0.75em 1.5em);
}

#readerContent .reader-content-inner > p[data-prose-situation="camera"][data-prose-side="me"] {
  margin-inline: auto var(--bubble-gutter);
}

/* 📣 반응 글(SNS) — 이름 없는 글들이 테두리 상자 안에 줄마다 회색 동그라미와 아래 금으로. */
#readerContent .reader-content-inner > p[data-prose-situation="megaphone"] {
  --situation-radius: 0.75em;
  --who: var(--prose-who-other);
  padding: 0.5em 0.9em 0.5em 2.75em;
  box-shadow: inset 0 -1px 0 var(--prose-situation-edge);
  font-family: var(--body-font);
  font-size: 0.86em;
  line-height: 1.6;
}

#readerContent .reader-content-inner > p[data-prose-situation="megaphone"]::before {
  content: "";
  position: absolute;
  inset-inline-start: 0.9em;
  top: 0.62em;
  width: 1.35em;
  height: 1.35em;
  border-radius: 50%;
  background-color: color-mix(in srgb, var(--reader-ink, #141414) 9%, transparent);
}

#readerContent .reader-content-inner > p[data-prose-situation="megaphone"]:is([data-prose-group-role="end"], [data-prose-group-role="solo"]) {
  box-shadow: none;
}

/* 🪪 연락처 — 가운데 카드: 동그란 사진 자리 · 이름 칸 하나([수장님]) · 비어 있는 칸들. */
#readerContent .reader-content-inner > p[data-prose-situation="card"] {
  --situation-radius: 1.6em;
  width: min(13.6em, 100%);
  margin-inline: auto;
  padding: 5.4em 1.1em 3.4em;
  font-family: var(--body-font);
  font-size: 1.12em;
  text-align: center;
}

#readerContent .reader-content-inner > p[data-prose-situation="card"]::before {
  content: "";
  position: absolute;
  top: 1.25em;
  inset-inline-start: calc(50% - 1.85em);
  width: 3.7em;
  height: 3.7em;
  border-radius: 50%;
  background-color: color-mix(in srgb, var(--reader-ink, #141414) 8%, transparent);
}

#readerContent .reader-content-inner > p[data-prose-situation="card"]::after {
  content: "";
  position: absolute;
  inset-inline: 1.5em;
  bottom: 1.15em;
  height: 1.6em;
  background-image:
    linear-gradient(color-mix(in srgb, var(--reader-ink, #141414) 8%, transparent), color-mix(in srgb, var(--reader-ink, #141414) 8%, transparent)),
    linear-gradient(color-mix(in srgb, var(--reader-ink, #141414) 8%, transparent), color-mix(in srgb, var(--reader-ink, #141414) 8%, transparent)),
    linear-gradient(color-mix(in srgb, var(--reader-ink, #141414) 8%, transparent), color-mix(in srgb, var(--reader-ink, #141414) 8%, transparent));
  background-repeat: no-repeat;
  background-size: 100% 0.32em, 75% 0.32em, 58% 0.32em;
  background-position: 0 0, 0 50%, 0 100%;
}

/* ── 2판 · 둘째 묶음 — 손글씨 · 단자쿠 · 아이 편지 · 메일 · 코팅 종이 · 게임 귓속말 · 찬송 슬라이드 · 녹음실 ·
   가사지 · 배달앱(카탈로그 4판 s10~s27). 별난 서체는 그 상황이 든 회차에서만 부른다(ensureSituationGoogleFonts)
   — 서체가 오기 전이나 막히면 아래 꼴 그대로 본문 서체로 선다. 사물의 격대로: 고급은 고급, 후진 건 후지게. */
:root {
  --prose-pen: #22406b;
  --prose-notebook-rule: color-mix(in srgb, var(--reader-ink, #141414) 16%, transparent);
  --prose-notebook-margin: rgba(184, 53, 47, 0.35);
  --prose-tanzaku: #f5efe1;
  --prose-tanzaku-ink: #2b2620;
  --prose-letter-ink: #3b3a37;
  --prose-mail-accent: #2b6a93;
  --prose-mail-row: color-mix(in srgb, var(--reader-ink, #141414) 4%, transparent);
  --prose-app-accent: #159a8c;
  --prose-app-pill-bg: rgba(21, 154, 140, 0.12);
  --prose-app-pill-ink: #11766b;
}

html[data-theme="dark"] {
  --prose-pen: #9cbbe8;
  --prose-tanzaku: #2a2620;
  --prose-tanzaku-ink: #efe6d4;
  --prose-letter-ink: #e6dfd2;
  --prose-mail-accent: #67b3e1;
  --prose-app-accent: #4fd1c2;
  --prose-app-pill-bg: rgba(79, 209, 194, 0.15);
  --prose-app-pill-ink: #7fe0d4;
}

/* ✍️ 공책 손글씨 — 볼펜 빛 · 줄 공책 · 왼쪽 빨간 여백 줄. 굵게는 손글씨에 없다. 취소선은 X(닿으면 그어진다 —
   스크립트가 없거나 움직임 줄이기면 그어진 채로 선다). */
#readerContent .reader-content-inner > p[data-prose-situation="pencil"] {
  --situation-bg: transparent;
  --situation-border: 0 solid transparent;
  --situation-radius: 0;
  padding: 0 0.3em 0 0.6em;
  border-inline-start: 2px solid var(--prose-notebook-margin);
  background-image: repeating-linear-gradient(to bottom, transparent 0 1.12em, var(--prose-notebook-rule) 1.12em 1.16em);
  color: var(--prose-pen);
  font-family: "Nanum Pen Script", var(--manuscript-font);
  font-size: 1.95em;
  line-height: 1.16;
}

#readerContent .reader-content-inner > p[data-prose-situation="pencil"] strong {
  font-weight: 400;
}

#readerContent .reader-content-inner > p[data-prose-situation="pencil"] s {
  position: relative;
  display: inline-block;
  text-decoration: none;
}

#readerContent .reader-content-inner > p[data-prose-situation="pencil"] s::before,
#readerContent .reader-content-inner > p[data-prose-situation="pencil"] s::after {
  content: "";
  position: absolute;
  inset-inline-start: -6%;
  top: 48%;
  width: 112%;
  height: 0.09em;
  border-radius: 0.05em;
  background-color: var(--prose-pen);
  transform: rotate(14deg);
  transition: transform 0.4s ease-out;
}

#readerContent .reader-content-inner > p[data-prose-situation="pencil"] s::after {
  transform: rotate(-14deg);
  transition-delay: 0.3s;
}

#readerContent .reader-content-inner > p[data-prose-situation="pencil"] s.is-reach-pending::before {
  transform: rotate(14deg) scaleX(0);
}

#readerContent .reader-content-inner > p[data-prose-situation="pencil"] s.is-reach-pending::after {
  transform: rotate(-14deg) scaleX(0);
}

/* 🪶 와카 단자쿠 — 세로쓰기 종이 띠. 줄마다 한 단이고, 첫 줄이 오른쪽에 선다(두 단이 가운데에 나란히). */
#readerContent .reader-content-inner > p[data-prose-situation="feather"] {
  --situation-bg: var(--prose-tanzaku);
  --situation-border: 1px solid rgba(120, 90, 40, 0.25);
  --situation-radius: 0.2em;
  float: right;
  width: auto;
  height: 22em;
  margin: 0 0 1.3em;
  padding: 1.2em 0.45em;
  writing-mode: vertical-rl;
  color: var(--prose-tanzaku-ink);
  font-family: var(--manuscript-font);
  font-size: 1.05em;
  letter-spacing: 0.18em;
  line-height: 2.1;
}

#readerContent .reader-content-inner > p[data-prose-situation="feather"]:is([data-prose-group-role="start"], [data-prose-group-role="solo"]) {
  margin-right: calc(50% - 2.9em);
}

#readerContent .reader-content-inner > p[data-prose-situation="feather"] + p:not([data-prose-situation="feather"]) {
  clear: both;
}

/* 🖍️ 아이 손편지 — 편지지 한 장, 아이 글씨(삐뚤빼뚤한 결은 서체가 맡는다). 편지지 색은 씨앗이라 칠하지 않는다. */
#readerContent .reader-content-inner > p[data-prose-situation="crayon"] {
  --situation-radius: 0.25em;
  padding: 0.04em 1.3em;
  color: var(--prose-letter-ink);
  font-family: "Gaegu", var(--body-font);
  font-size: 1.12em;
  line-height: 1.5;
}

#readerContent .reader-content-inner > p[data-prose-situation="crayon"]:is([data-prose-group-role="start"], [data-prose-group-role="solo"]) {
  padding-block-start: 1.1em;
}

#readerContent .reader-content-inner > p[data-prose-situation="crayon"]:is([data-prose-group-role="end"], [data-prose-group-role="solo"]) {
  padding-block-end: 0.8em;
}

/* ✉️ 메일 — 받은편지함의 제목 줄(파란 점) · 정중한 본문 종이(위 파란 띠) · 오른쪽의 옅은 서명. 정중할수록 서늘하게. */
#readerContent .reader-content-inner > p[data-prose-situation="mail"] {
  --situation-radius: 0.15em;
  padding: 0.27em 1.35em;
  font-family: var(--body-font);
  font-size: 0.88em;
  line-height: 1.85;
}

#readerContent .reader-content-inner > p[data-prose-situation="mail"]:is([data-prose-group-role="start"], [data-prose-group-role="solo"]) {
  padding-block-start: 1.2em;
  border-block-start: 3px solid var(--prose-mail-accent);
}

#readerContent .reader-content-inner > p[data-prose-situation="mail"]:is([data-prose-group-role="end"], [data-prose-group-role="solo"]) {
  padding-block-end: 0.9em;
}

#readerContent .reader-content-inner > p[data-prose-situation="mail"][data-prose-part] {
  --situation-bg: var(--prose-mail-row);
  --situation-radius: 0.65em;
  padding: 0.6em 0.9em 0.6em 2.1em;
  border-block-start: var(--situation-border);
  font-size: 0.9em;
  font-weight: 600;
}

#readerContent .reader-content-inner > p[data-prose-situation="mail"][data-prose-part]::before {
  content: "";
  position: absolute;
  inset-inline-start: 0.9em;
  top: calc(0.6em + (1.85em - 0.5em) / 2);
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  background-color: var(--prose-mail-accent);
}

#readerContent .reader-content-inner > p[data-prose-situation="mail"][data-prose-sig] {
  color: var(--prose-situation-muted);
  text-align: end;
}

/* 🏷️ 코팅 종이 팻말 — 굴림체 · 흰 코팅의 번들거림 · 조금 기운 종이. 후진 건 후지게. */
#readerContent .reader-content-inner > p[data-prose-situation="tag"] {
  --situation-bg: #fffdf6;
  --situation-border: 1px solid rgba(38, 35, 29, 0.18);
  --situation-radius: 0.35em;
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
  padding: 1em 1.2em;
  background-image: linear-gradient(115deg, rgba(255, 255, 255, 0.7) 0 18%, transparent 30% 100%);
  box-shadow: 0 0.6em 1em -0.8em rgba(0, 0, 0, 0.35);
  color: #26231d;
  font-family: Gulim, "굴림", Dotum, "돋움", "Nanum Gothic", var(--body-font);
  font-size: 1.02em;
  font-weight: 700;
  line-height: 1.6;
  text-align: center;
  transform: rotate(-0.8deg);
}

/* ⚔️ 게임 귓속말 — 반투명 검은 채팅창 · 탭 · 노란 글자. */
#readerContent .reader-content-inner > p[data-prose-situation="sword"] {
  --situation-bg: rgba(12, 14, 24, 0.88);
  --situation-border: 1px solid #3b4258;
  --situation-radius: 0.35em;
  padding: 0.25em 0.75em;
  color: #ffd84d;
  font-family: var(--prose-lab-font);
  font-size: 1.02em;
  font-weight: 700;
  text-shadow: 1px 1px 0 #000;
}

#readerContent .reader-content-inner > p[data-prose-situation="sword"]:is([data-prose-group-role="start"], [data-prose-group-role="solo"]) {
  padding-block-start: 1.05em;
}

#readerContent .reader-content-inner > p[data-prose-situation="sword"]:is([data-prose-group-role="start"], [data-prose-group-role="solo"])::before {
  content: "";
  position: absolute;
  top: 0.4em;
  inset-inline-start: 0.75em;
  width: 7.2em;
  height: 0.3em;
  background-image:
    linear-gradient(#5b6db8, #5b6db8),
    linear-gradient(#2a3044, #2a3044),
    linear-gradient(#2a3044, #2a3044);
  background-repeat: no-repeat;
  background-size: 2.1em 100%, 2.1em 100%, 2.1em 100%;
  background-position: 0 0, 2.5em 0, 5em 0;
}

#readerContent .reader-content-inner > p[data-prose-situation="sword"] .prose-dim {
  color: #bfa53a;
}

#readerContent .reader-content-inner > p[data-prose-situation="sword"] strong {
  font-weight: 700;
}

/* 🎹 싸구려 전자오르간 찬송 — 하늘색 바탕 · 구름 · 겹테 · 그림자 진 궁서풍 글자. 슬라이드 한 장이 덩이 하나. */
#readerContent .reader-content-inner > p[data-prose-situation="piano"] {
  --situation-bg: #dff1ff;
  --situation-border: 4px double #7f97b8;
  --situation-radius: 0.1em;
  padding: 0.1em 1em;
  color: #23236b;
  font-family: "Song Myung", var(--manuscript-font);
  font-size: 1.22em;
  line-height: 1.5;
  text-align: center;
  text-shadow: 2px 2px 0 #fff, 3px 3px 0 #9ab3d6;
}

#readerContent .reader-content-inner > p[data-prose-situation="piano"]:is([data-prose-group-role="start"], [data-prose-group-role="solo"]) {
  padding-block-start: 1.1em;
  background-image:
    radial-gradient(ellipse at 20% 1.4em, rgba(255, 255, 255, 0.9) 0 18%, transparent 19%),
    radial-gradient(ellipse at 78% 1em, rgba(255, 255, 255, 0.8) 0 13%, transparent 14%),
    linear-gradient(180deg, #9fd3ff 0%, #dff1ff 100%);
}

#readerContent .reader-content-inner > p[data-prose-situation="piano"]:is([data-prose-group-role="end"], [data-prose-group-role="solo"]) {
  padding-block-end: 1.1em;
}

#readerContent .reader-content-inner > p[data-prose-situation="piano"][data-prose-group-role="end"] {
  background-image: linear-gradient(180deg, #dff1ff 0%, #f4fbff 100%);
}

#readerContent .reader-content-inner > p[data-prose-situation="piano"][data-prose-group-role="solo"] {
  background-image:
    radial-gradient(ellipse at 20% 30%, rgba(255, 255, 255, 0.9) 0 18%, transparent 19%),
    radial-gradient(ellipse at 78% 22%, rgba(255, 255, 255, 0.8) 0 13%, transparent 14%),
    linear-gradient(180deg, #9fd3ff 0%, #dff1ff 70%, #f4fbff 100%);
}

#readerContent .reader-content-inner > p[data-prose-situation="piano"] em {
  font-style: normal;
}

/* 🎧 녹음실 가사지 — 부스의 종이 한 장, 머리에 빨간 녹음 점과 레벨 막대. 원문(가나)은 위에 작게, 파트는 옅은 알약. */
#readerContent .reader-content-inner > p[data-prose-situation="headphones"] {
  --situation-radius: 0.35em;
  padding: 0 1.1em;
  box-shadow: 0 0.6em 1.3em -1.1em rgba(0, 0, 0, 0.4);
  line-height: 1.7;
}

#readerContent .reader-content-inner > p[data-prose-situation="headphones"]:is([data-prose-group-role="start"], [data-prose-group-role="solo"]) {
  padding-block-start: 2em;
}

#readerContent .reader-content-inner > p[data-prose-situation="headphones"]:is([data-prose-group-role="start"], [data-prose-group-role="solo"])::before {
  content: "";
  position: absolute;
  top: 0.75em;
  inset-inline-start: 1.1em;
  width: 3.4em;
  height: 0.8em;
  background-image:
    radial-gradient(circle at 0.3em 50%, #d93025 0 0.28em, transparent 0.31em),
    linear-gradient(#3a8f5a, #3a8f5a), linear-gradient(#3a8f5a, #3a8f5a), linear-gradient(#3a8f5a, #3a8f5a),
    linear-gradient(#3a8f5a, #3a8f5a), linear-gradient(#3a8f5a, #3a8f5a);
  background-repeat: no-repeat;
  background-size: 0.62em 0.62em, 0.22em 40%, 0.22em 70%, 0.22em 100%, 0.22em 60%, 0.22em 30%;
  background-position: 0 50%, 1.05em 100%, 1.45em 100%, 1.85em 100%, 2.25em 100%, 2.65em 100%;
}

#readerContent .reader-content-inner > p[data-prose-situation="headphones"]:is([data-prose-group-role="end"], [data-prose-group-role="solo"]) {
  padding-block-end: 1em;
}

#readerContent .reader-content-inner > p:is([data-prose-situation="headphones"], [data-prose-situation="music"]) em {
  font-style: normal;
}

#readerContent .reader-content-inner > p:is([data-prose-situation="headphones"], [data-prose-situation="music"])[data-prose-sub] {
  padding-block-start: 0.65em;
  color: var(--prose-situation-muted);
  font-size: 0.78em;
  line-height: 1.5;
  letter-spacing: 0.02em;
}

#readerContent .reader-content-inner > p:is([data-prose-situation="headphones"], [data-prose-situation="music"])[data-prose-part] {
  color: var(--prose-situation-muted);
}

/* 🎵 가사지 — 오빠의 무대 가사(086). 상자 없이 왼쪽 굵은 줄 하나, 원문은 위에 작게. 고급. */
#readerContent .reader-content-inner > p[data-prose-situation="music"] {
  --situation-bg: transparent;
  --situation-border: 0 solid transparent;
  padding: 0 0 0 1.1em;
  border-inline-start: 2px solid var(--reader-ink, #141414);
  line-height: 1.7;
  text-align: start;
}

/* 📱 배달앱 가게 페이지 — 둥근 앱 카드 · 청록 가게 이름 · 굵은 메뉴 머리 · 값은 오른쪽 · [꼬리표]는 청록 알약 ·
   설명은 옅게. 키치. */
#readerContent .reader-content-inner > p[data-prose-situation="mobile"] {
  --situation-radius: 1em;
  padding: 0.12em 1em;
  font-family: var(--body-font);
  font-size: 0.86em;
  line-height: 1.6;
}

#readerContent .reader-content-inner > p[data-prose-situation="mobile"]:is([data-prose-group-role="start"], [data-prose-group-role="solo"]) {
  padding-block-start: 0.9em;
}

#readerContent .reader-content-inner > p[data-prose-situation="mobile"]:is([data-prose-group-role="end"], [data-prose-group-role="solo"]) {
  padding-block-end: 0.7em;
}

#readerContent .reader-content-inner > p[data-prose-situation="mobile"][data-prose-head] {
  color: var(--prose-app-accent);
  font-size: 1.55em;
  font-weight: 800;
  line-height: 1.35;
}

#readerContent .reader-content-inner > p:is([data-prose-situation="mobile"], [data-prose-situation="mail"])[data-prose-part] > .sentence {
  padding: 0;
  border: 0;
  border-radius: 0;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: normal;
  text-transform: none;
}

#readerContent .reader-content-inner > p[data-prose-situation="mobile"][data-prose-part] {
  padding-block: 0.9em 0.25em;
  box-shadow: inset 0 -2px 0 var(--reader-ink, #141414);
  font-size: 0.96em;
  font-weight: 800;
}

#readerContent .reader-content-inner > p[data-prose-situation="mobile"] em {
  color: var(--prose-situation-muted);
  font-size: 0.92em;
  font-style: normal;
}

#readerContent .reader-content-inner > p[data-prose-situation="mobile"] .prose-price {
  float: right;
  margin-inline-start: 0.6em;
  font-weight: 700;
  white-space: nowrap;
}

#readerContent .reader-content-inner > p[data-prose-situation="mobile"] .prose-pill {
  display: inline-block;
  margin-inline-end: 0.2em;
  padding: 0 0.4em;
  border-radius: 0.4em;
  background-color: var(--prose-app-pill-bg);
  color: var(--prose-app-pill-ink);
  font-size: 0.82em;
  line-height: 1.6;
}

/* 연구소의 다른 꼴 둘(2판) — 화이트보드(slideshow): 회색 테 · 흰 판 · 파란 마커 붓글씨 · 가운데. 칠판(school): 짙은 초록 판 ·
   분필빛 손글씨. 판은 어둠에서도 밝은 판 그대로(사물의 빛). */
#readerContent .reader-content-inner > p[data-prose-situation="slideshow"] {
  --situation-bg: #fdfdfb;
  --situation-border: 7px solid #c9ccd0;
  --situation-radius: 0.4em;
  padding: 0.1em 1em;
  box-shadow: 0 0.6em 1.3em -1em rgba(0, 0, 0, 0.4);
  color: #1f3f8a;
  font-family: "Nanum Brush Script", var(--body-font);
  font-size: 2.1em;
  line-height: 1.25;
  text-align: center;
}

#readerContent .reader-content-inner > p[data-prose-situation="slideshow"]:is([data-prose-group-role="start"], [data-prose-group-role="solo"]) {
  padding-block-start: 0.35em;
}

#readerContent .reader-content-inner > p[data-prose-situation="slideshow"]:is([data-prose-group-role="end"], [data-prose-group-role="solo"]) {
  padding-block-end: 0.35em;
}

#readerContent .reader-content-inner > p:is([data-prose-situation="slideshow"], [data-prose-situation="school"]) strong {
  font-weight: 400;
}

html[data-theme="dark"] #readerContent .reader-content-inner > p[data-prose-situation="slideshow"] {
  --situation-bg: #e9e9e4;
  --situation-border: 7px solid #6c7075;
}

#readerContent .reader-content-inner > p[data-prose-situation="school"] {
  --situation-bg: #2d3a33;
  --situation-border: 6px solid #6b4f32;
  --situation-radius: 0.3em;
  padding: 0.2em 1em;
  color: #f4f1e6;
  font-family: "Nanum Pen Script", var(--body-font);
  font-size: 1.6em;
  line-height: 1.3;
  text-align: center;
}

/* 📞 기본 문자 앱(phone) — 연한 회색 앱 바탕 위의 회색 풍선, 귀여운 척하는 서체. 후진 건 후지게(057). */
#readerContent .reader-content-inner > p[data-prose-situation="phone"] {
  --situation-bg: #e9e9eb;
  --situation-border: 0 solid transparent;
  --situation-radius: 1.15em;
  --bubble-gutter: calc((100% - min(100%, var(--situation-measure))) / 2);
  width: min(78%, calc(var(--situation-measure) * 0.78));
  margin-inline: var(--bubble-gutter) auto;
  padding: 0.04em 0.95em;
  color: #1a1a1a;
  font-family: "Gamja Flower", var(--body-font);
  font-size: 1.04em;
  line-height: 1.5;
}

#readerContent .reader-content-inner > p[data-prose-situation="phone"]:is([data-prose-group-role="start"], [data-prose-group-role="solo"]) {
  padding-block-start: 0.5em;
}

#readerContent .reader-content-inner > p[data-prose-situation="phone"]:is([data-prose-group-role="end"], [data-prose-group-role="solo"]) {
  padding-block-end: 0.5em;
  border-end-start-radius: 0.3em;
}

#readerContent .reader-content-inner > p[data-prose-situation="phone"][data-prose-side="me"] {
  --situation-bg: #34c759;
  margin-inline: auto var(--bubble-gutter);
  color: #ffffff;
}

html[data-theme="dark"] #readerContent .reader-content-inner > p[data-prose-situation="phone"] {
  --situation-bg: #2c2c2e;
  color: #f2f2f2;
}

/* 칠판 낱말(서술 줄 안의 조각 — 노션 파랑 바탕 표식): 짙은 초록 칩 · 분필빛 손글씨. 밑줄이 겹치면 「두 배나 큰」
   글씨(164). 글자는 그대로이고 칩만 두른다. */
#readerContent .prose-color[data-prose-color="blue_background"] {
  display: inline-block;
  padding: 0 0.35em;
  border-radius: 0.25em;
  background-color: #2d3a33;
  color: #f4f1e6;
  font-family: "Nanum Pen Script", var(--body-font);
  font-size: 1.25em;
  line-height: 1.25;
  vertical-align: -0.04em;
}

#readerContent .prose-color[data-prose-color="blue_background"] u {
  font-size: 2em;
  text-decoration: none;
}

/* 소리의 길이(006 큰 글자 줄 안의 밑줄 조각) — 소리만큼 벌어지며 옅어진다. */
#readerContent .reader-content-inner > p[data-prose-kind="h3"] u {
  color: color-mix(in srgb, currentColor 72%, transparent);
  letter-spacing: 0.32em;
  text-decoration: none;
}

/* 글자 실마리 변주 — 젖은 코팅 종이(물방울), 거꾸로 든 종이(닿으면 돈다), 입력 중(그 풍선 위에 점 셋). */
#readerContent .reader-content-inner > p[data-prose-situation="tag"][data-prose-variant="wet"] {
  background-image:
    radial-gradient(circle at 18% 30%, rgba(255, 255, 255, 0.95) 0 0.18em, transparent 0.24em),
    radial-gradient(circle at 76% 64%, rgba(255, 255, 255, 0.9) 0 0.15em, transparent 0.21em),
    radial-gradient(circle at 52% 18%, rgba(255, 255, 255, 0.85) 0 0.12em, transparent 0.18em),
    radial-gradient(circle at 34% 78%, rgba(255, 255, 255, 0.9) 0 0.2em, transparent 0.26em),
    linear-gradient(115deg, rgba(255, 255, 255, 0.75) 0 20%, transparent 32% 100%);
  box-shadow: 0 0.6em 1em -0.8em rgba(0, 0, 0, 0.35), inset 0 0 0 1px rgba(150, 190, 220, 0.35);
}

#readerContent .reader-content-inner > p[data-prose-situation="tag"][data-prose-variant="flip"] {
  transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) 0.5s;
}

#readerContent .reader-content-inner > p[data-prose-situation="tag"][data-prose-variant="flip"].is-reach-pending {
  transform: rotate(180deg);
}

#readerContent .reader-content-inner > p[data-prose-situation="chat"][data-prose-variant="typing"] {
  margin-block-start: 2.6em;
}

#readerContent .reader-content-inner > p[data-prose-situation="chat"][data-prose-variant="typing"]::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: -2.25em;
  width: 3.4em;
  height: 1.7em;
  border: 1px solid var(--prose-situation-edge);
  border-radius: 1em 1em 1em 0.3em;
  background-color: var(--prose-bubble-you);
  background-image:
    radial-gradient(circle at 0.95em 50%, var(--prose-situation-muted) 0 0.19em, transparent 0.22em),
    radial-gradient(circle at 1.7em 50%, var(--prose-situation-muted) 0 0.19em, transparent 0.22em),
    radial-gradient(circle at 2.45em 50%, var(--prose-situation-muted) 0 0.19em, transparent 0.22em);
  transition: opacity 0.4s ease-out;
}

#readerContent .reader-content-inner > p[data-prose-situation="chat"][data-prose-variant="typing"].is-reach-pending::before {
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  #readerContent .reader-content-inner > p[data-prose-situation="pencil"] s::before,
  #readerContent .reader-content-inner > p[data-prose-situation="pencil"] s::after,
  #readerContent .reader-content-inner > p[data-prose-situation="tag"][data-prose-variant="flip"],
  #readerContent .reader-content-inner > p[data-prose-situation="chat"][data-prose-variant="typing"]::before {
    transition: none;
  }
}

/* ── 서식 5판 — 세계: 어둠 · 다른 시대의 빛(소유자 10/2 13:42 「ㄱ」 · 차선 C 구상 §10-1) ──────────────────
   노션의 줄 전체 바탕이 그 줄의 성질이다(서버가 data-prose-line 으로 싣는다 — 글줄 표식이 아니다).
   어둠(gray_background) — 눈을 감음 · 암전 · 의식이 끊김: 어두운 종이에 밝은 글자. 이어진 어둠 줄은 한 어둠이고
   (자리 data-prose-line-role, 서빙 투영이 매긴다) 줄 사이 숨은 바탕 안에서 쉰다. 가장자리는 깃털처럼 번진다.
   다른 시대의 빛(brown_background) — 그 줄에서 종이가 물들기 시작해 화 끝까지 물든 채 간다. 문단을 감싸지 않고
   형제 선택자(~)로 잇는다 — 상황 덩이와 어둠 줄은 제 바탕을 지킨다. */
:root {
  --prose-night: #141210;
  --prose-night-ink: #ece5d6;
  --prose-era-wash: color-mix(in srgb, var(--paper) 86%, #c99a5b);
}

html[data-theme="dark"] {
  --prose-night: #000000;
  --prose-night-ink: #ddd6c8;
  --prose-era-wash: color-mix(in srgb, var(--paper) 86%, #b0824a);
}

#readerContent .reader-content-inner > p[data-prose-line="dark"] {
  --reader-ko-measure-active: var(--situation-measure);
  --prose-line-gap: calc(var(--reader-paragraph-gap-active, var(--paragraph-gap)) + var(--reader-paragraph-gap-adjust, 0em));
  position: relative;
  margin-inline: auto;
  padding-inline: 1.15em;
  background-color: var(--prose-night);
  color: var(--prose-night-ink);
  box-shadow: 0 0 1.3em 0.55em var(--prose-night);
  text-indent: 0;
}

/* 한 어둠 안의 줄 사이 숨 — 바깥 여백(종이가 비치는 틈) 대신 바탕 안의 여백으로. */
#readerContent .reader-content-inner > p[data-prose-line-role="start"],
#readerContent .reader-content-inner > p[data-prose-line-role="mid"] {
  margin-block-end: 0;
  padding-block-end: var(--prose-line-gap);
  break-after: avoid;
}

#readerContent .reader-content-inner > p[data-prose-line-role="start"],
#readerContent .reader-content-inner > p[data-prose-line-role="solo"] {
  margin-block-start: 1.5em;
  padding-block-start: 1.2em;
}

#readerContent .reader-content-inner > p[data-prose-line-role="end"],
#readerContent .reader-content-inner > p[data-prose-line-role="solo"] {
  margin-block-end: 1.7em;
  padding-block-end: 1.2em;
}

/* 어둠 안의 글줄 표식은 밝은 종이의 색을 쓰지 않는다 — 회색 메아리 · 옅게는 밤의 잉크에 섞는다. */
#readerContent .reader-content-inner > p[data-prose-line="dark"] :is(.prose-dim, .prose-color[data-prose-color="gray"]) {
  color: color-mix(in srgb, var(--prose-night-ink) 62%, transparent);
}

#readerContent .reader-content-inner > p[data-prose-line="era"] {
  background-image: linear-gradient(180deg, transparent 0%, var(--prose-era-wash) 100%);
  box-shadow: 0 0.95em 0 0 var(--prose-era-wash);
}

#readerContent .reader-content-inner > p[data-prose-line="era"] ~ p:not([data-prose-situation]):not([data-prose-line="dark"]) {
  background-color: var(--prose-era-wash);
  box-shadow: 0 0 0 0.95em var(--prose-era-wash);
}

/* ── 서식 5판 — 시대 자막 · 소리 · 몸 ─────────────────────────────────────────────────────────────
   상자가 아니라 글줄이 스스로 소리를 낸다 — 공통 틀(맨 종이 덩이)을 걷고 글자 꼴 · 크기 · 한 번의 움직임으로만.
   움직임은 줄이 화면에 들어올 때 한 번(닿으면 움직임 — ui.js armProseReach 가 is-reach-pending 을 걷는다),
   움직임 줄이기에서는 끝난 모양. */
#readerContent .reader-content-inner > p:is(
  [data-prose-situation="hourglass"],
  [data-prose-situation="walk"],
  [data-prose-situation="earthquake"],
  [data-prose-situation="hammer"],
  [data-prose-situation="hand"],
  [data-prose-situation="bell"],
  [data-prose-situation="heart"],
  [data-prose-situation="ear"],
  [data-prose-situation="activity"],
  [data-prose-situation="vinyl-record"],
  [data-prose-situation="wind"]
) {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

/* ⏳ 시대 자막 — 가운데 · 넓은 자간 · 천천히 떠오른다. */
#readerContent .reader-content-inner > p[data-prose-situation="hourglass"] {
  margin-block: 0;
  text-align: center;
  letter-spacing: 0.16em;
  font-size: 0.93em;
  line-height: 2.15;
  transition: opacity 2.4s ease;
}

#readerContent .reader-content-inner > p[data-prose-situation="hourglass"]:is([data-prose-group-role="start"], [data-prose-group-role="solo"]) {
  margin-block-start: 1.6em;
}

#readerContent .reader-content-inner > p[data-prose-situation="hourglass"]:is([data-prose-group-role="end"], [data-prose-group-role="solo"]) {
  margin-block-end: 2.1em;
}

#readerContent .reader-content-inner > p[data-prose-situation="hourglass"].is-reach-pending {
  opacity: 0.2;
}

/* 🚶 발소리 — 줄마다 커지며 다가온다(처음 · 가운데 · 끝). */
#readerContent .reader-content-inner > p[data-prose-situation="walk"] {
  font-family: var(--body-font);
  font-weight: 800;
  letter-spacing: 0.03em;
  margin-block: 0 0.2em;
  transform-origin: left center;
}

#readerContent .reader-content-inner > p[data-prose-situation="walk"]:is([data-prose-group-role="start"], [data-prose-group-role="solo"]) {
  font-size: 1.05em;
  opacity: 0.5;
}

#readerContent .reader-content-inner > p[data-prose-situation="walk"][data-prose-group-role="mid"] {
  font-size: 1.5em;
  opacity: 0.78;
}

#readerContent .reader-content-inner > p[data-prose-situation="walk"][data-prose-group-role="end"] {
  font-size: 2.15em;
  line-height: 1.3;
  margin-block-end: 0.6em;
}

#readerContent .reader-content-inner > p[data-prose-situation="walk"]:not(.is-reach-pending) {
  animation: prose-thud 0.3s ease-out 1;
}

@keyframes prose-thud {
  0% { transform: translateY(-3px); }
  45% { transform: translateY(4px); }
  100% { transform: translateY(0); }
}

/* 💓 심장 — 한 번, 되튐 없이 작게 부풀었다 가라앉는다(형제님 10/5 12:14 · 12:23 · 13:15 — 「띠잉하며 움직이는 거
   촌스럽다」 · 「띠용 하는 느낌만」 · 5화 「문장 서식 자체는 괜찮은데 그 띠용하는 효과는 … 저급에 촌스럽게」; 차선 C 경유).
   두 번째 박의 되튐까지 걷어 탄력감이 남지 않는다. */
#readerContent .reader-content-inner > p[data-prose-situation="heart"] {
  font-weight: 700;
  transform-origin: left center;
}

#readerContent .reader-content-inner > p[data-prose-situation="heart"]:not(.is-reach-pending) {
  animation: prose-beat 1.8s cubic-bezier(0.45, 0, 0.55, 1) 1;
}

/* 내려앉는 심장 — 두 박이 아니라 한 번 툭 가라앉았다 천천히 돌아온다(016:378 · 018:111). */
#readerContent .reader-content-inner > p[data-prose-situation="heart"][data-prose-variant="settle"]:not(.is-reach-pending) {
  animation: prose-settle 1.4s cubic-bezier(0.3, 0, 0.3, 1) 0.2s 1;
}

@keyframes prose-settle {
  0%, 100% { transform: none; }
  14% { transform: translateY(0.22em); }
  40% { transform: translateY(0.17em); }
}

@keyframes prose-beat {
  0%, 100% { transform: scale(1); }
  45% { transform: scale(1.016); }
}

/* 🔔 종 — 가늘고 길게 남는 울림: 글자 뒤로 머리카락 같은 선이 멀리 사라진다. */
#readerContent .reader-content-inner > p[data-prose-situation="bell"] {
  letter-spacing: 0.08em;
  font-weight: 300;
}

#readerContent .reader-content-inner > p[data-prose-situation="bell"]::after {
  content: "";
  display: inline-block;
  vertical-align: middle;
  width: min(12em, 40%);
  height: 1px;
  margin-inline-start: 0.6em;
  background: linear-gradient(90deg, var(--reader-ink, currentColor) 0%, transparent 100%);
  opacity: 0.5;
  transform-origin: left center;
  transition: transform 2.6s ease-out, opacity 2.6s ease-out;
}

#readerContent .reader-content-inner > p[data-prose-situation="bell"].is-reach-pending::after {
  transform: scaleX(0.1);
  opacity: 0.9;
}

/* 🌬 바람 — 한 박자씩 어긋나 흔들린다. */
#readerContent .reader-content-inner > p[data-prose-situation="wind"] {
  transform-origin: left bottom;
}

#readerContent .reader-content-inner > p[data-prose-situation="wind"]:not(.is-reach-pending) {
  animation: prose-sway 1.6s ease-in-out 2;
}

#readerContent .reader-content-inner > p[data-prose-situation="wind"][data-prose-group-role="mid"]:not(.is-reach-pending) {
  animation-delay: 0.22s;
}

#readerContent .reader-content-inner > p[data-prose-situation="wind"][data-prose-group-role="end"]:not(.is-reach-pending) {
  animation-delay: 0.44s;
}

@keyframes prose-sway {
  0%, 100% { transform: rotate(0deg) translateX(0); }
  30% { transform: rotate(-0.6deg) translateX(-0.12em); }
  70% { transform: rotate(0.5deg) translateX(0.1em); }
}

/* 💿 판 — 줄 끝에서 판이 돈다(형제님 10/5 05:55 「LP 돌아가는 건 뭔가 고급스럽고 아이콘 느낌보단 은근 괜찮아서 …
   오히려 더 고급스럽게」 — 원칙 27의 예외; 차선 C 사전 b3629fcc · 그림판 시제품). 판과 라벨만 돌고 반사 · 은빛 축은 제자리다:
   꾸밈 요소(서빙 투영이 덩이의 첫 줄 끝에 붙인 글자 없는 <i>) 안에서 ::before 가 판(돈다), ::after 가 반사(제자리)다.
   줄이 화면에 닿으면 스미듯 나타나고, 첫 바퀴는 천천히 붙은 뒤 1.8초에 한 바퀴씩 다섯 번 돌고 멈춘다.
   쉬는 모양은 여느 문단이다(본문 들여쓰기). */
#readerContent .reader-content-inner > p[data-prose-situation="vinyl-record"] {
  text-indent: var(--reader-paragraph-indent, 0);
}

#readerContent .reader-content-inner > p > .prose-deco[data-prose-deco="lp"] {
  display: inline-block;
  position: relative;
  width: 1.45em;
  height: 1.45em;
  margin-inline-start: 0.32em;
  vertical-align: -0.34em;
  text-indent: 0;
}

#readerContent .reader-content-inner > p > .prose-deco[data-prose-deco="lp"]::before,
#readerContent .reader-content-inner > p > .prose-deco[data-prose-deco="lp"]::after {
  content: "";
  position: absolute;
  inset: 0;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

#readerContent .reader-content-inner > p > .prose-deco[data-prose-deco="lp"]::before {
  background-image: url("/situations/vinyl.webp?av=74fd76dab067");
  border-radius: 50%;
  filter: drop-shadow(0 0.05em 0.1em rgba(0, 0, 0, 0.35));
}

#readerContent .reader-content-inner > p > .prose-deco[data-prose-deco="lp"]::after {
  background-image: url("/situations/vinyl_sheen.webp?av=ae19c8f067c3");
}

#readerContent .reader-content-inner > p.is-reach-pending > .prose-deco[data-prose-deco="lp"] {
  opacity: 0;
}

#readerContent .reader-content-inner > p:not(.is-reach-pending) > .prose-deco[data-prose-deco="lp"] {
  animation: prose-lp-in 0.9s ease 0.2s 1 both;
}

#readerContent .reader-content-inner > p:not(.is-reach-pending) > .prose-deco[data-prose-deco="lp"]::before {
  animation:
    prose-lp-up 2.4s cubic-bezier(0.45, 0, 0.75, 0.75) 0.5s 1,
    prose-lp-spin 1.8s linear 2.9s 5;
}

@keyframes prose-lp-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes prose-lp-up {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

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

/* 〰 흔들림 — 늘인 만큼 크게(data-prose-amp 1~4) 흔들리고, 다음 줄이 반 박자 늦게 따라 흔들린다. 튀는 떨림 없이 가로로
   한 번, 점점 잦아든다(형제님 10/5 12:14 · 12:23 — 「띠용 하는 느낌만 촌스럽다, 움직임이 미세하거나 느낌과 맞는 건
   좋았다」; 차선 C 경유). */
#readerContent .reader-content-inner > p[data-prose-situation="earthquake"] {
  --quake: 1;
  font-family: var(--body-font);
  font-weight: 800;
  letter-spacing: 0.04em;
}

#readerContent .reader-content-inner > p[data-prose-situation="earthquake"][data-prose-amp="2"] { --quake: 2; font-size: 1.18em; }
#readerContent .reader-content-inner > p[data-prose-situation="earthquake"][data-prose-amp="3"] { --quake: 3; font-size: 1.36em; }
#readerContent .reader-content-inner > p[data-prose-situation="earthquake"][data-prose-amp="4"] { --quake: 4; font-size: 1.58em; }

#readerContent .reader-content-inner > p[data-prose-situation="earthquake"]:not(.is-reach-pending) {
  animation: prose-quake 0.9s cubic-bezier(0.37, 0, 0.63, 1) 1;
}

#readerContent .reader-content-inner > p[data-prose-situation="earthquake"]:is([data-prose-group-role="end"], [data-prose-group-role="solo"]):not(.is-reach-pending) + p {
  --quake: 1;
  animation: prose-quake 0.9s cubic-bezier(0.37, 0, 0.63, 1) 0.25s 1;
}

@keyframes prose-quake {
  0%, 100% { transform: translateX(0); }
  15% { transform: translateX(calc(var(--quake) * -0.9px)); }
  35% { transform: translateX(calc(var(--quake) * 0.7px)); }
  55% { transform: translateX(calc(var(--quake) * -0.45px)); }
  75% { transform: translateX(calc(var(--quake) * 0.2px)); }
}

/* 🔨 망치 — 다가오며 커지는 낱자, 그리고 금. */
#readerContent .reader-content-inner > p[data-prose-situation="hammer"] {
  font-family: var(--body-font);
  font-weight: 900;
  font-size: 1.28em;
  letter-spacing: 0.02em;
  transform-origin: left center;
}

#readerContent .reader-content-inner > p[data-prose-situation="hammer"]::after {
  content: "";
  display: block;
  width: min(9em, 70%);
  height: 0.5em;
  margin-block-start: 0.1em;
  background: linear-gradient(135deg, transparent 45%, currentColor 46% 54%, transparent 55%) 0 0 / 0.9em 0.5em repeat-x;
  opacity: 0.35;
  transition: opacity 0.6s ease-out 0.35s;
}

#readerContent .reader-content-inner > p[data-prose-situation="hammer"].is-reach-pending::after {
  opacity: 0;
}

/* 튕김 없이 묵직하게 꽂힌다 — 작게 다가오다 끝에서 가속해 그 자리에서 멈춘다(넘치는 프레임 · 되튐 없음; 형제님 10/5
   13:15 「튕김만 빼고 묵직하게 꽂히는」, 차선 C 경유). */
#readerContent .reader-content-inner > p[data-prose-situation="hammer"]:not(.is-reach-pending) {
  animation: prose-approach 0.38s cubic-bezier(0.55, 0, 1, 0.45) 1;
}

@keyframes prose-approach {
  0% { transform: scale(0.86); opacity: 0.55; }
  100% { transform: scale(1); opacity: 1; }
}

/* 👏 박수 — 「짝!」은 터지고 「짝.」은 납작하다. */
#readerContent .reader-content-inner > p[data-prose-situation="hand"][data-prose-variant="burst"] {
  isolation: isolate;
  width: fit-content;
  padding: 0.12em 0.55em;
  font-family: var(--body-font);
  font-size: 1.6em;
  font-weight: 900;
}

#readerContent .reader-content-inner > p[data-prose-situation="hand"][data-prose-variant="burst"]::before {
  content: "";
  position: absolute;
  inset: -0.5em -0.3em;
  z-index: -1;
  opacity: 0.5;
  background: repeating-conic-gradient(currentColor 0deg 2.4deg, transparent 2.4deg 21deg);
  -webkit-mask: radial-gradient(closest-side, transparent 52%, #000 54%, #000 80%, transparent 82%);
  mask: radial-gradient(closest-side, transparent 52%, #000 54%, #000 80%, transparent 82%);
  transition: transform 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.3), opacity 0.35s ease-out;
}

#readerContent .reader-content-inner > p[data-prose-situation="hand"][data-prose-variant="burst"].is-reach-pending::before {
  transform: scale(0.4);
  opacity: 0;
}

#readerContent .reader-content-inner > p[data-prose-situation="hand"][data-prose-variant="flat"] {
  width: fit-content;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.3em;
  text-decoration-color: var(--prose-situation-edge);
}

/* 👂 귀 — 낱말의 꼴. 「찰칵」은 셔터: 뷰파인더의 네 모서리가 한 번 닫힌다. */
#readerContent .reader-content-inner > p[data-prose-situation="ear"] {
  font-weight: 700;
  letter-spacing: 0.06em;
}

#readerContent .reader-content-inner > p[data-prose-situation="ear"][data-prose-variant="shutter"] {
  width: fit-content;
  padding: 0.35em 0.9em;
  background:
    linear-gradient(currentColor, currentColor) 0 0 / 0.7em 2px no-repeat,
    linear-gradient(currentColor, currentColor) 0 0 / 2px 0.7em no-repeat,
    linear-gradient(currentColor, currentColor) 100% 0 / 0.7em 2px no-repeat,
    linear-gradient(currentColor, currentColor) 100% 0 / 2px 0.7em no-repeat,
    linear-gradient(currentColor, currentColor) 0 100% / 0.7em 2px no-repeat,
    linear-gradient(currentColor, currentColor) 0 100% / 2px 0.7em no-repeat,
    linear-gradient(currentColor, currentColor) 100% 100% / 0.7em 2px no-repeat,
    linear-gradient(currentColor, currentColor) 100% 100% / 2px 0.7em no-repeat;
  transition: padding 0.18s ease-in;
}

#readerContent .reader-content-inner > p[data-prose-situation="ear"][data-prose-variant="shutter"].is-reach-pending {
  padding: 0.7em 1.4em;
}

/* 🎵 가락 — 숨 없는 찬송: 이은 줄 아래 가는 물결, 끼어드는 웃음(하하 · 히이)은 떨린다. */
#readerContent .reader-content-inner > p[data-prose-situation="activity"] {
  font-style: italic;
  letter-spacing: 0.02em;
  text-decoration: underline wavy;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.42em;
  text-decoration-color: var(--prose-situation-edge);
}

#readerContent .reader-content-inner > p[data-prose-situation="activity"] .prose-laugh {
  display: inline-block;
}

#readerContent .reader-content-inner > p[data-prose-situation="activity"]:not(.is-reach-pending) .prose-laugh {
  animation: prose-tremble 0.11s steps(2) 8;
}

@keyframes prose-tremble {
  0% { transform: translate(0.04em, -0.03em) rotate(-1deg); }
  100% { transform: translate(-0.04em, 0.03em) rotate(1deg); }
}

/* ✉ 화지 편지(postcard · 168 · 169) — 섬유 결이 비치는 종이 한 장에 붓으로 쓴 줄. 〈 〉 는 옅게 둔다. */
#readerContent .reader-content-inner > p[data-prose-situation="postcard"] {
  --situation-bg: color-mix(in srgb, var(--paper) 72%, #e8d9b8);
  --situation-border: 1px solid color-mix(in srgb, var(--reader-ink, #141414) 10%, transparent);
  --situation-radius: 0.25em;
  background-image:
    radial-gradient(color-mix(in srgb, var(--reader-ink, #141414) 6%, transparent) 1px, transparent 1.6px),
    radial-gradient(color-mix(in srgb, var(--reader-ink, #141414) 5%, transparent) 0.8px, transparent 1.3px);
  background-size: 13px 17px, 19px 11px;
  background-position: 0 0, 7px 5px;
  font-family: "Nanum Brush Script", var(--manuscript-font);
  font-size: 1.12em;
  line-height: 1.7;
}

html[data-theme="dark"] #readerContent .reader-content-inner > p[data-prose-situation="postcard"] {
  --situation-bg: color-mix(in srgb, var(--paper) 82%, #6a5537);
}

/* ── 서식 6판 — 손안의 폰 · 빛 · 몸 · 문턱(소유자 10/2 13:54 「6판으로 간다」) ──────────────────────────────
   폰 알림은 아이콘 없이(원칙 27 · 형제님 10/4) 바로 뒤 받은 것(사진 · 상대의 말풍선)만 화면 위에서 내려와 앉는다 — 정화가 보낸 말은
   내려오지 않는다. 「진동한다」 줄은 한 번 떤다. 플래시는 화면이 한 번 하얘진다(한 번뿐 · 어두운 화면은 밝기만).
   휘청은 그 한 줄이 한 번 느리게 기운다. 스케치북은 굵은 외곽선의 종이 한 장, 망점은 여백에만. 장소 자막은 영화의 자막.
   몸의 효과(플래시 · 휘청 · 스케치북의 움직임)와 폰의 울림은 1인칭(1부)에서만 — 112화부터(이야기의 종이) 멈춘 꼴이다. */
#readerContent .reader-content-inner > p:is(
  [data-prose-situation="notification"],
  [data-prose-situation="flash"],
  [data-prose-situation="tornado"],
  [data-prose-situation="location"]
) {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

/* 📳 폰 알림 — 줄 앞의 폰 그림은 쓰지 않는다(원칙 27). 울림은 받은 것이 내려와 앉는 것과 「진동」의 떨림이 진다.
   쉬는 모양은 여느 문단이다(그림이 걷힌 자리에 들여쓰기가 빠진 줄만 남지 않게). */
#readerContent .reader-content-inner > p[data-prose-situation="notification"] {
  text-indent: var(--reader-paragraph-indent, 0);
}
#readerContent .reader-content-inner > p[data-prose-situation="notification"][data-prose-variant="buzz"]:not(.is-reach-pending) {
  animation: prose-buzz 0.07s linear 9;
}

@keyframes prose-buzz {
  0% { transform: translateX(-0.06em); }
  50% { transform: translateX(0.06em); }
  100% { transform: translateX(0); }
}

/* 받은 것이 내려와 앉는다 — 알림 바로 뒤의 사진 · 상대 말풍선만. */
#readerContent .reader-content-inner > p[data-prose-situation="notification"]:not(.is-reach-pending) + p:is(
  [data-prose-situation="camera"],
  [data-prose-situation="chat"][data-prose-side="you"],
  [data-prose-situation="phone"][data-prose-side="you"]
) {
  animation: prose-arrive 0.6s cubic-bezier(0.2, 0.8, 0.25, 1) 0.3s both;
}

@keyframes prose-arrive {
  0% { transform: translateY(-1.6em); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}

/* ⚡ 플래시 — 화면이 한 번 하얘진다. 한 번뿐이고, 어두운 화면에서는 밝기만 오른다. */
#readerContent .reader-content-inner > p[data-prose-situation="flash"]:not(.is-reach-pending)::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background: #ffffff;
  animation: prose-flash 0.75s ease-out 1 both;
}

html[data-theme="dark"] #readerContent .reader-content-inner > p[data-prose-situation="flash"]:not(.is-reach-pending)::after {
  background: rgba(255, 250, 236, 0.38);
}

@keyframes prose-flash {
  0% { opacity: 0; }
  12% { opacity: 0.92; }
  100% { opacity: 0; }
}

/* 🌀 휘청 — 그 한 줄이 한 번 느리게 기운다. */
#readerContent .reader-content-inner > p[data-prose-situation="tornado"] {
  transform-origin: 40% 60%;
}

#readerContent .reader-content-inner > p[data-prose-situation="tornado"]:not(.is-reach-pending) {
  animation: prose-reel 1.9s ease-in-out 1;
}

@keyframes prose-reel {
  0%, 100% { transform: rotate(0deg) translateX(0); }
  25% { transform: rotate(-2.2deg) translateX(-0.3em); }
  55% { transform: rotate(1.6deg) translateX(0.25em); }
  80% { transform: rotate(-0.6deg) translateX(-0.08em); }
}

/* 🎨 스케치북 — 굵은 외곽선의 종이 한 장, 위에는 스프링, 망점은 양옆 여백에만. */
#readerContent .reader-content-inner > p[data-prose-situation="art"] {
  --situation-bg: #fffdf8;
  --situation-border: 2.5px solid #1d1b18;
  --situation-radius: 0.35em;
  padding-inline: 1.9em;
  color: #1d1b18;
  font-weight: 600;
  background-image:
    radial-gradient(circle, rgba(29, 27, 24, 0.22) 0.11em, transparent 0.13em),
    radial-gradient(circle, rgba(29, 27, 24, 0.22) 0.11em, transparent 0.13em);
  background-size: 0.42em 0.42em, 0.42em 0.42em;
  background-position: 0.25em 0, calc(100% - 0.25em) 0;
  background-repeat: repeat-y, repeat-y;
}

#readerContent .reader-content-inner > p[data-prose-situation="art"]:is([data-prose-group-role="start"], [data-prose-group-role="solo"]) {
  padding-block-start: 1.45em;
}

#readerContent .reader-content-inner > p[data-prose-situation="art"]:is([data-prose-group-role="start"], [data-prose-group-role="solo"])::before {
  content: "";
  position: absolute;
  inset-inline: 1.2em;
  top: -0.42em;
  height: 0.9em;
  background: radial-gradient(circle at 50% 50%, transparent 0.17em, #1d1b18 0.18em 0.24em, transparent 0.25em) 0 0 / 0.95em 0.9em repeat-x;
}

html[data-theme="dark"] #readerContent .reader-content-inner > p[data-prose-situation="art"] {
  --situation-bg: #f4f1ea;
}

/* 🎬 장소 자막 — 영화의 자막처럼 짧은 금 뒤에, 천천히 떠오른다. */
#readerContent .reader-content-inner > p[data-prose-situation="location"] {
  width: fit-content;
  margin-block: 1.4em 1.2em;
  padding-inline-start: 0.9em;
  border-inline-start: 2px solid currentColor;
  font-family: var(--body-font);
  font-size: 0.84em;
  letter-spacing: 0.12em;
  opacity: 0.86;
  transition: opacity 1.6s ease, transform 1.6s ease;
}

#readerContent .reader-content-inner > p[data-prose-situation="location"].is-reach-pending {
  opacity: 0.12;
  transform: translateX(-0.4em);
}

/* 2부(112화부터 — 3인칭 · 이야기의 종이)에서는 몸의 효과와 폰의 울림이 멈춘 꼴이다. */
#readerContent:has(> .reader-content-inner[data-chapter-paper="story"]) .reader-content-inner > p:is(
  [data-prose-situation="notification"],
  [data-prose-situation="flash"],
  [data-prose-situation="tornado"]
),
#readerContent:has(> .reader-content-inner[data-chapter-paper="story"]) .reader-content-inner > p[data-prose-situation="notification"] + p {
  animation: none !important;
}

#readerContent:has(> .reader-content-inner[data-chapter-paper="story"]) .reader-content-inner > p[data-prose-situation="flash"]::after {
  content: none;
}

/* 건너가는 화면(§6-①) — 111화에서 112화로 넘어가는 순간 흰 종이(지금 자세의 종이)가 화면을 덮었다가 걷히며 이야기의 종이가
   드러난다. 시대 자막은 그 아래에서 천천히 떠오른다(닿으면 움직임). 누르기 · 스크롤을 막지 않는다. */
.prose-crossing {
  position: fixed;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 32%, var(--paper-glow, transparent), transparent 58%),
    var(--paper);
  animation: prose-crossing-open 2.2s ease-in-out forwards;
}

@keyframes prose-crossing-open {
  0% { opacity: 1; }
  35% { opacity: 1; }
  100% { opacity: 0; }
}

/* ── 서식 7~10판 — 1~20화 줄 연출(차선 C 「10판」 · 그림판 견본 e80a3bea, 2026-10-05) ──────────────────────────────
   노션 단색 아이콘 67 이름(사전 137꼴 전부). 상자인 꼴은 같은 덩이의 문단들이 바탕을 잇고, 줄 연출은 상자 없이 글자 · 빛 · 몸이
   겪는다(원칙 27). 움직임 · 그림은 그 줄이 닿을 때 한 번(is-reached — ui.js armProseReach), 튕김 없이 작게(원칙 28). 첫 화면을
   이어받은 줄은 끝난 모양(is-reach-done). 견본의 웹GL · 캔버스 입자는 옮기지 않았다 — 같은 자리에 견본의 CSS 꼴이 선다. */
:root {
  --prose-who-camellia: #b8322a;
  --prose-seed-pink: #d4508f;
  --prose-seed-pink-glow: rgba(240, 120, 180, 0.5);
  --prose-seed-blue: #3a8fc2;
  --prose-seed-blue-glow: rgba(110, 190, 235, 0.55);
  --prose-seed-crimson: #6e1423;
  --prose-dream: #0e0d0f;
  --prose-dream-ink: #ece6d9;
  --prose-noon: #edf0f1;
  --prose-noon-ink: #2a2e32;
  --prose-glint: #b5862f;
  --prose-glint-gold: #c28f22;
  --prose-thought-edge: color-mix(in srgb, var(--prose-who-me) 68%, transparent);
  --prose-thought-bg: color-mix(in srgb, var(--prose-who-me) 7%, var(--paper));
  --prose-composer-caret: var(--prose-who-me);
}

html[data-theme="dark"] {
  --prose-who-camellia: #e2645b;
  --prose-seed-pink: #ff9fcb;
  --prose-seed-pink-glow: rgba(255, 140, 200, 0.55);
  --prose-seed-blue: #7cc0ea;
  --prose-seed-blue-glow: rgba(140, 200, 240, 0.5);
  --prose-seed-crimson: #c4485c;
  --prose-dream: #050405;
  --prose-noon: #262a2e;
  --prose-noon-ink: #e4e8eb;
  --prose-glint: #ffe3a3;
  --prose-glint-gold: #ffd36b;
}

#readerContent .reader-content-inner > p[data-prose-who="camellia"] {
  --who: var(--prose-who-camellia);
}

/* 상자 없는 줄 연출 — 공통 틀(맨 종이 덩이)을 걷고 여느 문단 그대로(들여쓰기 · 문단 간격). 연출은 글자 · 빛 · 몸이 진다. */
#readerContent .reader-content-inner > p:is([data-prose-situation="burst"], [data-prose-situation="stopwatch"], [data-prose-situation="stars"], [data-prose-situation="target"], [data-prose-situation="move"], [data-prose-situation="arrow-right"], [data-prose-situation="balloon"], [data-prose-situation="zoom-out"], [data-prose-situation="cursor"], [data-prose-situation="bookmark"], [data-prose-situation="bug"], [data-prose-situation="sun"], [data-prose-situation="fog"], [data-prose-situation="lock"], [data-prose-situation="unlock"], [data-prose-situation="mirror"], [data-prose-situation="globe"], [data-prose-situation="storm"], [data-prose-situation="cat"], [data-prose-situation="binoculars"], [data-prose-situation="gear"], [data-prose-situation="moon"], [data-prose-situation="fish"], [data-prose-situation="yin-yang"], [data-prose-situation="wifi"], [data-prose-situation="infinity"], [data-prose-situation="snowflake"], [data-prose-situation="cactus"], [data-prose-situation="table"], [data-prose-situation="power"], [data-prose-situation="bomb"], [data-prose-situation="water"], [data-prose-situation="clock"], [data-prose-situation="fireworks"], [data-prose-situation="shuffle"], [data-prose-situation="refresh"], [data-prose-situation="coffee"], [data-prose-situation="arrow-down"], [data-prose-situation="crop"], [data-prose-situation="magic-wand"], [data-prose-situation="search"], [data-prose-situation="flashlight"], [data-prose-situation="shoe"], [data-prose-situation="taxi"], [data-prose-situation="fire"], [data-prose-situation="gem"], [data-prose-situation="trophy"], [data-prose-situation="flag"], [data-prose-situation="square"], [data-prose-situation="wine"], [data-prose-situation="run"], [data-prose-situation="drink"], [data-prose-situation="star"], [data-prose-situation="umbrella"], [data-prose-situation="warning"], [data-prose-situation="rainbow"], [data-prose-situation="shower"], [data-prose-situation="rain"], [data-prose-situation="book"], [data-prose-situation="pot"]) {
  --prose-line-gap: calc(var(--reader-paragraph-gap-active, var(--paragraph-gap)) + var(--reader-paragraph-gap-adjust, 0em));
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  text-indent: var(--reader-paragraph-indent, 0);
  text-align: var(--reader-paragraph-align, start);
}

html[data-mobile-viewport-guard="active"] #readerContent .reader-content-inner > p:is([data-prose-situation="burst"], [data-prose-situation="stopwatch"], [data-prose-situation="stars"], [data-prose-situation="target"], [data-prose-situation="move"], [data-prose-situation="arrow-right"], [data-prose-situation="balloon"], [data-prose-situation="zoom-out"], [data-prose-situation="cursor"], [data-prose-situation="bookmark"], [data-prose-situation="bug"], [data-prose-situation="sun"], [data-prose-situation="fog"], [data-prose-situation="lock"], [data-prose-situation="unlock"], [data-prose-situation="mirror"], [data-prose-situation="globe"], [data-prose-situation="storm"], [data-prose-situation="cat"], [data-prose-situation="binoculars"], [data-prose-situation="gear"], [data-prose-situation="moon"], [data-prose-situation="fish"], [data-prose-situation="yin-yang"], [data-prose-situation="wifi"], [data-prose-situation="infinity"], [data-prose-situation="snowflake"], [data-prose-situation="cactus"], [data-prose-situation="table"], [data-prose-situation="power"], [data-prose-situation="bomb"], [data-prose-situation="water"], [data-prose-situation="clock"], [data-prose-situation="fireworks"], [data-prose-situation="shuffle"], [data-prose-situation="refresh"], [data-prose-situation="coffee"], [data-prose-situation="arrow-down"], [data-prose-situation="crop"], [data-prose-situation="magic-wand"], [data-prose-situation="search"], [data-prose-situation="flashlight"], [data-prose-situation="shoe"], [data-prose-situation="taxi"], [data-prose-situation="fire"], [data-prose-situation="gem"], [data-prose-situation="trophy"], [data-prose-situation="flag"], [data-prose-situation="square"], [data-prose-situation="wine"], [data-prose-situation="run"], [data-prose-situation="drink"], [data-prose-situation="star"], [data-prose-situation="umbrella"], [data-prose-situation="warning"], [data-prose-situation="rainbow"], [data-prose-situation="shower"], [data-prose-situation="rain"], [data-prose-situation="book"], [data-prose-situation="pot"]) {
  --prose-line-gap: calc((var(--reader-paragraph-gap-active, var(--paragraph-gap)) * 1.04) + var(--reader-paragraph-gap-adjust, 0em));
}

#readerContent .reader-content-inner > p:is([data-prose-situation="burst"], [data-prose-situation="stopwatch"], [data-prose-situation="stars"], [data-prose-situation="target"], [data-prose-situation="move"], [data-prose-situation="arrow-right"], [data-prose-situation="balloon"], [data-prose-situation="zoom-out"], [data-prose-situation="cursor"], [data-prose-situation="bookmark"], [data-prose-situation="bug"], [data-prose-situation="sun"], [data-prose-situation="fog"], [data-prose-situation="lock"], [data-prose-situation="unlock"], [data-prose-situation="mirror"], [data-prose-situation="globe"], [data-prose-situation="storm"], [data-prose-situation="cat"], [data-prose-situation="binoculars"], [data-prose-situation="gear"], [data-prose-situation="moon"], [data-prose-situation="fish"], [data-prose-situation="yin-yang"], [data-prose-situation="wifi"], [data-prose-situation="infinity"], [data-prose-situation="snowflake"], [data-prose-situation="cactus"], [data-prose-situation="table"], [data-prose-situation="power"], [data-prose-situation="bomb"], [data-prose-situation="water"], [data-prose-situation="clock"], [data-prose-situation="fireworks"], [data-prose-situation="shuffle"], [data-prose-situation="refresh"], [data-prose-situation="coffee"], [data-prose-situation="arrow-down"], [data-prose-situation="crop"], [data-prose-situation="magic-wand"], [data-prose-situation="search"], [data-prose-situation="flashlight"], [data-prose-situation="shoe"], [data-prose-situation="taxi"], [data-prose-situation="fire"], [data-prose-situation="gem"], [data-prose-situation="trophy"], [data-prose-situation="flag"], [data-prose-situation="square"], [data-prose-situation="wine"], [data-prose-situation="run"], [data-prose-situation="drink"], [data-prose-situation="star"], [data-prose-situation="umbrella"], [data-prose-situation="warning"], [data-prose-situation="rainbow"], [data-prose-situation="shower"], [data-prose-situation="rain"], [data-prose-situation="book"], [data-prose-situation="pot"]):is([data-prose-group-role="start"], [data-prose-group-role="mid"]) {
  margin-block-end: var(--prose-line-gap);
}

/* 덩이 뒤로 한 장의 빛 · 비 · 틈이 서는 꼴은 줄 사이 숨을 바탕 안의 여백으로 쉰다(그 층이 줄마다 끊기지 않게). */
#readerContent .reader-content-inner > p:is([data-prose-situation="unlock"], [data-prose-situation="umbrella"], [data-prose-situation="rain"], [data-prose-situation="shower"], [data-prose-situation="rainbow"]):is([data-prose-group-role="start"], [data-prose-group-role="mid"]) {
  margin-block-end: 0;
  padding-block-end: var(--prose-line-gap);
}

/* 첫 화면 커널이 먼저 그린 줄을 이어받으면 그때 화면에 서 있던 줄은 끝난 모양 그대로다(두 번 움직이지 않게). */
#readerContent .reader-content-inner > p.is-reach-done,
#readerContent .reader-content-inner > p.is-reach-done::before,
#readerContent .reader-content-inner > p.is-reach-done::after,
#readerContent .reader-content-inner > p.is-reach-done *,
#readerContent .reader-content-inner > p.is-reach-done *::before,
#readerContent .reader-content-inner > p.is-reach-done *::after,
#readerContent .reader-content-inner > p.is-reach-done + p:not(.is-reach-pending):not(.is-reached):not(.is-reach-done) {
  animation: none !important;
  transition: none !important;
}

/* ── 7판 — 1인칭의 카메라 · 몸 · 손안의 폰 ── */

/* 💭 속말 — 정화 쪽(오른쪽)의 구름 말풍선, 점선 테 · 소리 없는 말. 여러 줄이면 한 풍선의 줄들(폭을 맞춘다). */
#readerContent .reader-content-inner > p[data-prose-situation="thought"] {
  --situation-bg: var(--prose-thought-bg);
  --situation-border: 1.5px dashed var(--prose-thought-edge);
  --situation-radius: 1.5em;
  --bubble-gutter: calc((100% - min(100%, var(--situation-measure))) / 2);
  width: min(84%, calc(var(--situation-measure) * 0.84));
  margin-inline: auto var(--bubble-gutter);
  padding: 0.08em 1.15em;
  transform-origin: 88% 100%;
  transition: opacity 0.45s ease, transform 0.65s cubic-bezier(0.2, 0.7, 0.3, 1);
}

#readerContent .reader-content-inner > p[data-prose-situation="thought"][data-prose-group-role="solo"] {
  width: fit-content;
  max-width: min(84%, calc(var(--situation-measure) * 0.84));
}

#readerContent .reader-content-inner > p[data-prose-situation="thought"]:is([data-prose-group-role="start"], [data-prose-group-role="solo"]) {
  padding-block-start: 0.6em;
}

#readerContent .reader-content-inner > p[data-prose-situation="thought"]:is([data-prose-group-role="end"], [data-prose-group-role="solo"]) {
  margin-block-end: 1.7em;
  padding-block-end: 0.6em;
}

/* 생각의 꼬리 — 풍선 오른쪽 아래로 작아지는 두 방울(풍선의 일부다 — 줄 옆에 붙는 기호가 아니다). */
#readerContent .reader-content-inner > p[data-prose-situation="thought"]:is([data-prose-group-role="end"], [data-prose-group-role="solo"])::after {
  content: "";
  position: absolute;
  right: 1.3em;
  bottom: -1.15em;
  width: 1.25em;
  height: 1.05em;
  pointer-events: none;
  background:
    radial-gradient(circle at 72% 22%, var(--prose-thought-bg) 0 0.22em, var(--prose-thought-edge) 0.23em 0.3em, transparent 0.31em),
    radial-gradient(circle at 22% 82%, var(--prose-thought-bg) 0 0.08em, var(--prose-thought-edge) 0.09em 0.16em, transparent 0.17em);
}

#readerContent .reader-content-inner > p[data-prose-situation="thought"].is-reach-pending {
  opacity: 0;
  transform: scale(0.97) translateY(6px);
}

/* 🏷 등장 이름표 — 인물의 색 띠 하나와 옅은 바탕(아이콘 색 = 인물). 한 번 멈춰 서고(옅은 섬광), 점호처럼 잇달면 멈춤 없이. */
#readerContent .reader-content-inner > p[data-prose-situation="badge"] {
  --situation-bg: transparent;
  --situation-border: 0 solid transparent;
  --situation-radius: 0;
  padding: 0.12em 0.95em 0.12em 1.1em;
  border-inline-start: 5px solid var(--who, var(--prose-who-other));
  background-image: linear-gradient(90deg, color-mix(in srgb, var(--who, var(--prose-who-other)) 13%, transparent), transparent 88%);
  font-family: var(--body-font);
  font-weight: 600;
  isolation: isolate;
  transition: opacity 0.4s ease, transform 0.55s cubic-bezier(0.2, 0.75, 0.3, 1);
}

#readerContent .reader-content-inner > p[data-prose-situation="badge"]:is([data-prose-group-role="start"], [data-prose-group-role="solo"]) {
  margin-block-start: 0.6em;
  padding-block-start: 0.55em;
}

#readerContent .reader-content-inner > p[data-prose-situation="badge"]:is([data-prose-group-role="end"], [data-prose-group-role="solo"]) {
  margin-block-end: 1.1em;
  padding-block-end: 0.55em;
}

#readerContent .reader-content-inner > p[data-prose-situation="badge"]::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: var(--who, var(--prose-who-other));
  opacity: 0;
}

#readerContent .reader-content-inner > p[data-prose-situation="badge"].is-reach-pending {
  opacity: 0;
  transform: translateX(-0.9em);
}

#readerContent .reader-content-inner > p[data-prose-situation="badge"]:not([data-prose-variant="quick"]).is-reached::after {
  animation: prose-badge-hold 0.6s ease-out 1;
}

#readerContent .reader-content-inner > p[data-prose-situation="badge"][data-prose-variant="quick"] {
  transition-duration: 0.22s, 0.28s;
}

@keyframes prose-badge-hold {
  0% { opacity: 0.2; }
  100% { opacity: 0; }
}

/* 💥 집중선 — 판을 뒤집는 한 마디: 먹의 붓 선이 한 번 모였다 흩어지고(가운데는 비운다) 줄이 한 번 다가온다. */
#readerContent .reader-content-inner > p[data-prose-situation="burst"] {
  padding-block: 1em;
  isolation: isolate;
  transform-origin: 50% 50%;
}

#readerContent .reader-content-inner > p[data-prose-situation="burst"]::after {
  content: "";
  position: absolute;
  inset: -0.1em 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  -webkit-mask: radial-gradient(ellipse 60% 42% at 50% 50%, transparent 86%, #000 100%);
  mask: radial-gradient(ellipse 60% 42% at 50% 50%, transparent 86%, #000 100%);
}

#readerContent .reader-content-inner > p[data-prose-situation="burst"].is-reached::after {
  background: url("/situations/speedlines.webp?av=558d187bbfe2") center / 100% 100% no-repeat;
  animation: prose-speedlines 1.25s cubic-bezier(0.2, 0.8, 0.3, 1) 1;
}

html[data-theme="dark"] #readerContent .reader-content-inner > p[data-prose-situation="burst"]::after {
  filter: invert(1);
}

#readerContent .reader-content-inner > p[data-prose-situation="burst"].is-reached {
  animation: prose-near 0.55s cubic-bezier(0.2, 0.7, 0.3, 1) 1;
}

@keyframes prose-speedlines {
  0% { opacity: 0; transform: scale(1, 1.1); }
  18% { opacity: 0.5; transform: scale(1); }
  100% { opacity: 0; transform: scale(0.98); }
}

@keyframes prose-near {
  0% { transform: scale(1.035); }
  100% { transform: none; }
}

/* ⏱ 초읽기 — 초침 그림 없이 글자가 옅게 시작해 초를 세듯 다섯 번에 걸쳐 먹이 오른다. */
#readerContent .reader-content-inner > p[data-prose-situation="stopwatch"].is-reach-pending {
  opacity: 0.42;
}

#readerContent .reader-content-inner > p[data-prose-situation="stopwatch"].is-reached {
  animation: prose-tick 4.5s steps(5, end) 0.3s 1 both;
}

@keyframes prose-tick {
  from { opacity: 0.42; }
  to { opacity: 1; }
}

/* ✨ 반짝 · 진열된 술 · 전성기 — 그림 없이 그 조각 위로 가는 빛 한 줄이 읽는 방향으로 한 번 스친다.
   글자는 늘 맨 아래 글자색 한 장이 칠한다 — 빛의 띠가 덮지 못한 자리가 투명해지면 줄이 접힌 둘째 줄이 사라진다(1화 실측).
   띠는 폭 5em 의 가는 한 장이라 낱말이든 줄 전체든 같은 굵기고, 좌우를 가장자리까지 풀어 경계가 보이지 않는다. */
#readerContent .prose-fx:is([data-prose-fx="glint"], [data-prose-fx="glint-gold"]) {
  --glint-peak: var(--prose-glint);
  background-image:
    linear-gradient(100deg,
      transparent 0%,
      color-mix(in srgb, var(--glint-peak) 14%, transparent) 24%,
      color-mix(in srgb, var(--glint-peak) 62%, transparent) 42%,
      var(--glint-peak) 50%,
      color-mix(in srgb, var(--glint-peak) 62%, transparent) 58%,
      color-mix(in srgb, var(--glint-peak) 14%, transparent) 76%,
      transparent 100%),
    linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-size: 5em 100%, 100% 100%;
  background-position: calc(0% - 5em) 0, 0 0;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

#readerContent .prose-fx[data-prose-fx="glint-gold"] {
  --glint-peak: var(--prose-glint-gold);
}

#readerContent .reader-content-inner > p.is-reached .prose-fx:is([data-prose-fx="glint"], [data-prose-fx="glint-gold"]) {
  animation: prose-glint 2.6s cubic-bezier(0.45, 0, 0.3, 1) 0.5s 1;
}

@keyframes prose-glint {
  0% { background-position: calc(0% - 5em) 0, 0 0; }
  100% { background-position: calc(100% + 5em) 0, 0 0; }
}

/* 🎯 텔레파시 — 정화 쪽에서 가는 빛줄기가 한 번 가로지른다(바로 다음 줄에서 닿는다). */
#readerContent .reader-content-inner > p[data-prose-situation="target"]::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 42%;
  height: 2px;
  pointer-events: none;
  opacity: 0;
  transform: scaleX(0);
  transform-origin: 100% 50%;
  background: linear-gradient(270deg, transparent, #e0559a 25%, #f4a9cb 70%, transparent);
  box-shadow: 0 0 6px rgba(240, 120, 180, 0.55);
}

#readerContent .reader-content-inner > p[data-prose-situation="target"].is-reached::after {
  animation: prose-beam 0.7s ease-out 0.25s 1;
}

@keyframes prose-beam {
  0% { opacity: 0.95; transform: scaleX(0); }
  55% { opacity: 0.95; transform: scaleX(1); }
  100% { opacity: 0; transform: scaleX(1); }
}

/* 몸 — 지면이 그 몸을 움직인 줄. 튕김 · 되튐 없이 작게 한 번 잦아든다(원칙 28 — 잡아당긴다 · 통통도 넘침 없이). */
#readerContent .reader-content-inner > p[data-prose-situation="move"][data-prose-variant="jolt"].is-reached {
  animation: prose-jolt 0.36s ease-in-out 1;
}

#readerContent .reader-content-inner > p[data-prose-situation="move"][data-prose-variant="tremble"].is-reached {
  animation: prose-tremble-fine 1s linear 0.35s 1;
}

#readerContent .reader-content-inner > p[data-prose-situation="move"][data-prose-variant="tug"].is-reached {
  animation: prose-tug 0.9s linear 0.3s 1;
}

#readerContent .reader-content-inner > p[data-prose-situation="move"]:is([data-prose-variant="swing"], [data-prose-variant="swing-fast"]) {
  transform-origin: 50% 0;
}

#readerContent .reader-content-inner > p[data-prose-situation="move"][data-prose-variant="swing"].is-reached {
  animation: prose-swing 1.6s ease-in-out 1s 1;
}

#readerContent .reader-content-inner > p[data-prose-situation="move"][data-prose-variant="swing-fast"].is-reached {
  animation: prose-swing-fast 1.2s ease-in-out 0.2s 1;
}

#readerContent .reader-content-inner > p[data-prose-situation="move"][data-prose-variant="hop"]:is([data-prose-group-role="start"], [data-prose-group-role="solo"]).is-reached {
  animation: prose-hop 0.9s ease-in-out 0.3s 1;
}

#readerContent .reader-content-inner > p[data-prose-situation="move"][data-prose-variant="hop"][data-prose-group-role="end"].is-reached {
  animation: prose-hop 0.9s ease-in-out 1.1s 1;
}

@keyframes prose-jolt {
  0%, 100% { transform: none; }
  35% { transform: translateY(-3px); }
}

@keyframes prose-tremble-fine {
  0%, 80%, 100% { transform: none; }
  8% { transform: translateX(0.7px); }
  16% { transform: translateX(-0.6px); }
  24% { transform: translateX(0.5px); }
  32% { transform: translateX(-0.7px); }
  40% { transform: translateX(0.4px); }
  48% { transform: translateX(-0.5px); }
  56% { transform: translateX(0.3px); }
  64% { transform: translateX(-0.3px); }
  72% { transform: translateX(0.2px); }
}

@keyframes prose-tug {
  0% { transform: none; animation-timing-function: cubic-bezier(0.2, 0.8, 0.3, 1); }
  18% { transform: translateX(-7px) skewX(1.5deg); animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1); }
  100% { transform: none; }
}

@keyframes prose-swing {
  0%, 100% { transform: none; }
  24% { transform: rotate(1.2deg); }
  52% { transform: rotate(-0.7deg); }
  76% { transform: rotate(0.3deg); }
}

@keyframes prose-swing-fast {
  0%, 100% { transform: none; }
  14% { transform: rotate(1.4deg); }
  30% { transform: rotate(-1.2deg); }
  46% { transform: rotate(0.9deg); }
  62% { transform: rotate(-0.6deg); }
  78% { transform: rotate(0.3deg); }
}

@keyframes prose-hop {
  0%, 40%, 80%, 100% { transform: none; }
  20% { transform: translateY(-3px); }
  60% { transform: translateY(-2.5px); }
}

/* ➡ 밀려온다 — 줄이 옆에서 느리게 밀려 들어와 내 앞에 멈춘다. */
#readerContent .reader-content-inner > p[data-prose-situation="arrow-right"] {
  transition: transform 2.4s cubic-bezier(0.3, 0.55, 0.2, 1), opacity 1.3s ease;
}

#readerContent .reader-content-inner > p[data-prose-situation="arrow-right"].is-reach-pending {
  opacity: 0.12;
  transform: translateX(-1.6em);
}

/* 🎈 부푼다 — 줄이 천천히 한 번 부풀었다 가라앉는다(원칙 28 — 작게). */
#readerContent .reader-content-inner > p[data-prose-situation="balloon"] {
  transform-origin: 50% 100%;
}

#readerContent .reader-content-inner > p[data-prose-situation="balloon"].is-reached {
  animation: prose-swell-once 2.8s ease-in-out 1;
}

@keyframes prose-swell-once {
  0%, 100% { transform: none; }
  50% { transform: scale(1.012, 1.05); }
}

/* 🔍 오그라든다 · 쪼그라드는 사과 — 그 줄의 굵은 조각이 한 박자 늦게 한 번 오그라든다. 몸을 접는다 — 줄이 안으로 한 번 웅크린다. */
#readerContent .reader-content-inner > p[data-prose-situation="zoom-out"][data-prose-variant="shrink"] strong {
  display: inline-block;
  transform-origin: 50% 70%;
}

#readerContent .reader-content-inner > p[data-prose-situation="zoom-out"][data-prose-variant="shrink"].is-reached strong {
  animation: prose-shrink 2.6s ease-in-out 1.35s 1;
}

#readerContent .reader-content-inner > p[data-prose-situation="zoom-out"][data-prose-variant="curl"] {
  transform-origin: 0 60%;
}

#readerContent .reader-content-inner > p[data-prose-situation="zoom-out"][data-prose-variant="curl"].is-reached {
  animation: prose-curl 1.5s cubic-bezier(0.3, 0, 0.3, 1) 0.7s 1;
}

@keyframes prose-shrink {
  0%, 100% { transform: none; }
  22%, 78% { transform: scale(0.62); }
}

@keyframes prose-curl {
  0%, 100% { transform: none; }
  28%, 55% { transform: scale(0.955, 0.97) translateY(1px); }
  72% { transform: scale(0.988); }
}

/* ⌨ 쓰는 중인 댓글 — 위 댓글창과 같은 집안(정화 쪽 파랑)의 입력창: 아직 올리지 않아 옅은 바탕과 점선 테, 끝 줄 뒤에 커서.
   이어진 입력창은 한 창(점선 머리), 「올린다」 줄이 닿으면 앞 창이 정화의 댓글(파란 바탕 · 왼쪽 띠)로 올라간다. */
#readerContent .reader-content-inner > p[data-prose-situation="keyboard"] {
  --situation-bg: color-mix(in srgb, var(--prose-me-wash) 50%, transparent);
  --situation-border: 1px dashed color-mix(in srgb, var(--prose-who-me) 45%, transparent);
  --situation-radius: 0.75em;
  padding: 0.05em 0.9em 0.05em 1.1em;
  font-family: var(--body-font);
  font-size: 0.92em;
  line-height: 1.75;
  transition: background-color 0.6s ease, border-color 0.6s ease, box-shadow 0.6s ease;
}

#readerContent .reader-content-inner > p[data-prose-situation="keyboard"]:is([data-prose-group-role="start"], [data-prose-group-role="solo"]) {
  margin-block-start: 0.8em;
  padding-block-start: 0.7em;
}

#readerContent .reader-content-inner > p[data-prose-situation="keyboard"]:is([data-prose-group-role="end"], [data-prose-group-role="solo"]) {
  margin-block-end: 1.2em;
  padding-block-end: 0.68em;
}

#readerContent .reader-content-inner > p[data-prose-situation="keyboard"][data-prose-variant="cont"]:is([data-prose-group-role="start"], [data-prose-group-role="solo"]) {
  margin-block-start: 0.3em;
}

#readerContent .reader-content-inner > p[data-prose-situation="keyboard"]:is([data-prose-group-role="end"], [data-prose-group-role="solo"])::after {
  content: "";
  display: inline-block;
  width: 1.6px;
  height: 1.05em;
  margin-inline-start: 2px;
  vertical-align: -0.17em;
  background: var(--prose-composer-caret);
}

#readerContent .reader-content-inner > p[data-prose-situation="keyboard"]:is([data-prose-group-role="end"], [data-prose-group-role="solo"]).is-reached::after {
  animation: prose-caret 1.05s steps(2, start) 8;
}

#readerContent .reader-content-inner > p[data-prose-situation="keyboard"][data-prose-variant="posted"]:has(~ p[data-prose-variant="post"]:is(.is-reached, .is-reach-done)) {
  --situation-bg: var(--prose-me-wash);
  --situation-border: 1px solid transparent;
  box-shadow: inset 3px 0 0 var(--prose-who-me);
}

#readerContent .reader-content-inner > p[data-prose-situation="keyboard"][data-prose-variant="posted"]:has(~ p[data-prose-variant="post"]:is(.is-reached, .is-reach-done))::after {
  content: none;
}

@keyframes prose-caret {
  to { visibility: hidden; }
}

/* 📥 쌓이는 알림 — 열지 않은 알림 띠(글자 없이)가 차례로 쌓이고 화면 가장자리가 조여 온다. 덩이 끝(계정 삭제)이 닿으면
   한꺼번에 걷힌다. */
#readerContent .reader-content-inner > p[data-prose-situation="inbox"] {
  --situation-bg: transparent;
  --situation-border: 0 solid transparent;
  --inbox-bar: color-mix(in srgb, var(--reader-ink, #141414) 7%, var(--prose-situation-sheet));
  --inbox-step: calc(2.1em + 6px);
  padding-inline: 0.7em;
  transition: box-shadow 2.4s ease;
}

#readerContent .reader-content-inner > p[data-prose-situation="inbox"]:is([data-prose-group-role="start"], [data-prose-group-role="solo"])::before {
  content: "";
  display: block;
  height: 2.1em;
  margin-block: 0.2em calc(4 * var(--inbox-step) + 0.9em);
  border-radius: 0.8em;
  background: var(--inbox-bar);
  box-shadow:
    0 var(--inbox-step) 0 0 var(--inbox-bar),
    0 calc(2 * var(--inbox-step)) 0 0 var(--inbox-bar),
    0 calc(3 * var(--inbox-step)) 0 0 var(--inbox-bar),
    0 calc(4 * var(--inbox-step)) 0 0 var(--inbox-bar);
  transition: opacity 0.45s ease, transform 0.45s ease;
}

#readerContent .reader-content-inner > p[data-prose-situation="inbox"].is-reach-pending:is([data-prose-group-role="start"], [data-prose-group-role="solo"])::before {
  opacity: 0;
}

#readerContent .reader-content-inner > p[data-prose-situation="inbox"].is-reached:is([data-prose-group-role="start"], [data-prose-group-role="solo"])::before {
  animation: prose-pile 2.6s steps(5, end) 1 both;
}

#readerContent .reader-content-inner > p[data-prose-situation="inbox"]:is(.is-reached, .is-reach-done) {
  box-shadow: inset 2.6em 0 2.2em -1.8em color-mix(in srgb, var(--reader-ink, #141414) 10%, transparent), inset -2.6em 0 2.2em -1.8em color-mix(in srgb, var(--reader-ink, #141414) 10%, transparent);
}

#readerContent .reader-content-inner > p[data-prose-situation="inbox"]:has(~ p[data-prose-situation="inbox"][data-prose-group-role="end"].is-reached),
#readerContent .reader-content-inner > p[data-prose-situation="inbox"][data-prose-group-role="end"].is-reached {
  box-shadow: none;
  transition-duration: 0.6s;
}

#readerContent .reader-content-inner > p[data-prose-situation="inbox"]:is([data-prose-group-role="start"], [data-prose-group-role="solo"]):has(~ p[data-prose-situation="inbox"][data-prose-group-role="end"].is-reached)::before {
  opacity: 0;
  transform: scale(0.96);
}

@keyframes prose-pile {
  0% { opacity: 1; box-shadow: 0 0 0 0 transparent, 0 0 0 0 transparent, 0 0 0 0 transparent, 0 0 0 0 transparent; }
  25% { box-shadow: 0 var(--inbox-step) 0 0 var(--inbox-bar), 0 0 0 0 transparent, 0 0 0 0 transparent, 0 0 0 0 transparent; }
  50% { box-shadow: 0 var(--inbox-step) 0 0 var(--inbox-bar), 0 calc(2 * var(--inbox-step)) 0 0 var(--inbox-bar), 0 0 0 0 transparent, 0 0 0 0 transparent; }
  75% { box-shadow: 0 var(--inbox-step) 0 0 var(--inbox-bar), 0 calc(2 * var(--inbox-step)) 0 0 var(--inbox-bar), 0 calc(3 * var(--inbox-step)) 0 0 var(--inbox-bar), 0 0 0 0 transparent; }
  100% { opacity: 1; box-shadow: 0 var(--inbox-step) 0 0 var(--inbox-bar), 0 calc(2 * var(--inbox-step)) 0 0 var(--inbox-bar), 0 calc(3 * var(--inbox-step)) 0 0 var(--inbox-bar), 0 calc(4 * var(--inbox-step)) 0 0 var(--inbox-bar); }
}

/* 👆 손가락이 미끄러진다 — 커서 그림 없이 손끝이 지나가듯 옅은 선택 빛이 그 줄을 한 번 쓸고 간다. */
#readerContent .reader-content-inner > p[data-prose-situation="cursor"] .sentence {
  background-image: linear-gradient(color-mix(in srgb, var(--reader-ink, #141414) 11%, transparent), color-mix(in srgb, var(--reader-ink, #141414) 11%, transparent));
  background-repeat: no-repeat;
  background-size: 0% 100%;
  background-position: 0 0;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

#readerContent .reader-content-inner > p[data-prose-situation="cursor"].is-reached .sentence {
  animation: prose-select 1.8s cubic-bezier(0.4, 0, 0.2, 1) 0.3s 1;
}

@keyframes prose-select {
  0% { background-size: 0% 100%; background-position: 0 0; }
  50% { background-size: 100% 100%; background-position: 0 0; }
  100% { background-size: 0% 100%; background-position: 100% 0; }
}

/* ── 8판 — 연출적 복선(인물의 뒷설정을 연출이 먼저 말한다) ── */

/* 🌙 꿈의 잔상 — 덩이면 꿈의 파스텔 오로라(정화의 꿈은 분홍 · 라벤더 · 복숭아로 흐른다), 한 줄이면 꿈의 빛이 한 번 번쩍.
   남의 씨앗의 꿈은 핑크 없는 해 질 녘 빛, 꿈의 잔해는 재빛, 폐허의 꿈은 밝고 찬 흰 낮. 화면의 줄은 덩이 머리가 닿을 때 차례로
   선다(아홉째 줄부터는 처음부터) — 빛도 그 줄과 함께 번진다.
   상자가 없다 — 빛은 문단 뒤의 가상 요소에 칠하고 흐리게 번져 화면 끝까지 스민다. 번짐은 그림의 넘침이라 문단 · 리더의
   가로 넘침(scrollWidth)이 되지 않는다. 문단마다 같은 빛을 칠하되 아래로 다음 문단 속까지 이어 칠해(끝 줄은 제자리에서 멈춘다)
   줄 사이 숨(바깥 여백)까지 빛이 메워 이음매가 지지 않게 하고, 빛은 불투명한 색이라 겹쳐도 짙어지지 않는다. 가상 요소는 리더의 쌓임 맥락 맨 아래
   (z-index -1)에 선다 — 문단 안에 가두면 아래로 이어 칠한 빛이 제 뒤 문단의 글자를 덮는다.
   화면은 글줄의 자리를 바꾸지 않는다 — 줄 사이 숨은 맨 문단과 같은 바깥 여백 그대로다(쪽 · 장면 · 스크롤마다 리더가 정한다).
   그 숨을 문단 안 여백으로 옮기면 쪽 모드의 쪽 끝에서 여백처럼 잘리지 않고 남아 줄이 다음 쪽으로 밀린다(320x568 실측 두 줄).
   1화 첫 쪽 보이는 줄 수 바닥 · 첫 5초 첫 줄 높이가 맨 글줄의 실측이라, 화면이 한 줄이라도 더 높으면 다음 문단이 다음 쪽으로
   밀린다. */
:root {
  --prose-dream-haze-ink: #4a2c3d;
  --prose-dream-pink: #d0457f;
  --prose-dream-pink-glow: rgba(255, 120, 180, 0.45);
  --prose-dream-aurora-a: #f8d2e3;
  --prose-dream-aurora-b: #e5dbf6;
  --prose-dream-aurora-c: #fbe1d5;
  --prose-dream-aurora-lamp: radial-gradient(ellipse 80% 60% at 35% 0%, rgba(255, 255, 255, 0.7), transparent 70%);
  --prose-dream-dusk-a: #d9dcec;
  --prose-dream-dusk-b: #e2dcf0;
  --prose-dream-dusk-c: #f0e2d0;
  --prose-dream-ash-a: #e5dde3;
  --prose-dream-ash-b: #ece7ea;
  --prose-dream-ash-c: #e8e1db;
  --prose-dream-noon-a: #eef2f4;
  --prose-dream-noon-b: #f5f6f7;
  --prose-dream-noon-c: #eef1f3;
}

html[data-theme="dark"] {
  --prose-dream-haze-ink: #f3e6ee;
  --prose-dream-pink: #ffb6d7;
  --prose-dream-pink-glow: rgba(255, 150, 205, 0.7);
  --prose-dream-aurora-a: #4b2c45;
  --prose-dream-aurora-b: #352f55;
  --prose-dream-aurora-c: #4d3437;
  --prose-dream-aurora-lamp: radial-gradient(ellipse 80% 60% at 35% 0%, rgba(255, 175, 220, 0.22), transparent 70%);
  --prose-dream-dusk-a: #262b42;
  --prose-dream-dusk-b: #2f2b46;
  --prose-dream-dusk-c: #43352a;
  --prose-dream-ash-a: #362d35;
  --prose-dream-ash-b: #35323d;
  --prose-dream-ash-c: #383230;
  --prose-dream-noon-a: #2a3035;
  --prose-dream-noon-b: #31363b;
  --prose-dream-noon-c: #2c3237;
}

#readerContent .reader-content-inner > p[data-prose-situation="bed"]:not([data-prose-variant="flash"]) {
  --prose-dream-ink: var(--prose-dream-haze-ink);
  --situation-bg: transparent;
  --situation-border: 0 solid transparent;
  --situation-radius: 0;
  --dream-a: var(--prose-dream-aurora-a);
  --dream-b: var(--prose-dream-aurora-b);
  --dream-c: var(--prose-dream-aurora-c);
  --dream-lamp: none;
  --dream-reach: 2.8em;
  --reader-ko-measure-active: var(--situation-measure);
  padding-block: 0;
  padding-inline: 1.15em;
  color: var(--prose-dream-ink);
  text-indent: 0;
  break-before: auto;
  break-after: auto;
  transition: opacity 1.2s ease;
}

#readerContent .reader-content-inner > p[data-prose-situation="bed"]:not([data-prose-variant="flash"])::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: calc(-1 * var(--dream-reach));
  z-index: -1;
  pointer-events: none;
  background-image: var(--dream-lamp), linear-gradient(90deg, var(--dream-a), var(--dream-b) 55%, var(--dream-c));
  filter: blur(1.4em);
}

#readerContent .reader-content-inner > p[data-prose-situation="bed"]:not([data-prose-variant="flash"]):is([data-prose-group-role="start"], [data-prose-group-role="solo"]) {
  margin-block-start: -0.55em;
  padding-block-start: 0.55em;
}

#readerContent .reader-content-inner > p[data-prose-situation="bed"]:not([data-prose-variant="flash"]):is([data-prose-group-role="end"], [data-prose-group-role="solo"]) {
  --dream-reach: 0em;
}

/* 꿈의 빛은 화면 맨 위 한 장에만(줄마다 되풀이하면 줄무늬가 진다). */
#readerContent .reader-content-inner > p[data-prose-situation="bed"][data-prose-variant="dream"]:is([data-prose-group-role="start"], [data-prose-group-role="solo"]) {
  --dream-lamp: var(--prose-dream-aurora-lamp);
}

#readerContent .reader-content-inner > p[data-prose-situation="bed"]:not([data-prose-variant="flash"]) :is(.prose-dim, .prose-color[data-prose-color="gray"]) {
  color: color-mix(in srgb, var(--prose-dream-ink) 62%, transparent);
}

#readerContent .reader-content-inner > p[data-prose-situation="bed"]:is([data-prose-variant="dream"]) .prose-color[data-prose-color="pink"] {
  color: var(--prose-dream-pink);
  text-shadow: 0 0 0.7em var(--prose-dream-pink-glow);
}

/* 꿈 화면의 줄은 덩이 머리가 화면에 닿을 때 차례로 선다(0.45초씩 — 견본 dream8). 머리가 아직이면 숨어 있다. */
#readerContent .reader-content-inner > p[data-prose-situation="bed"][data-prose-variant="dream"][data-prose-group-role="start"].is-reach-pending,
#readerContent .reader-content-inner > p[data-prose-situation="bed"][data-prose-variant="dream"][data-prose-group-role="start"].is-reach-pending + p[data-prose-situation="bed"],
#readerContent .reader-content-inner > p[data-prose-situation="bed"][data-prose-variant="dream"][data-prose-group-role="start"].is-reach-pending + p[data-prose-situation="bed"] + p[data-prose-situation="bed"],
#readerContent .reader-content-inner > p[data-prose-situation="bed"][data-prose-variant="dream"][data-prose-group-role="start"].is-reach-pending + p[data-prose-situation="bed"] + p[data-prose-situation="bed"] + p[data-prose-situation="bed"],
#readerContent .reader-content-inner > p[data-prose-situation="bed"][data-prose-variant="dream"][data-prose-group-role="start"].is-reach-pending + p[data-prose-situation="bed"] + p[data-prose-situation="bed"] + p[data-prose-situation="bed"] + p[data-prose-situation="bed"],
#readerContent .reader-content-inner > p[data-prose-situation="bed"][data-prose-variant="dream"][data-prose-group-role="start"].is-reach-pending + p[data-prose-situation="bed"] + p[data-prose-situation="bed"] + p[data-prose-situation="bed"] + p[data-prose-situation="bed"] + p[data-prose-situation="bed"],
#readerContent .reader-content-inner > p[data-prose-situation="bed"][data-prose-variant="dream"][data-prose-group-role="start"].is-reach-pending + p[data-prose-situation="bed"] + p[data-prose-situation="bed"] + p[data-prose-situation="bed"] + p[data-prose-situation="bed"] + p[data-prose-situation="bed"] + p[data-prose-situation="bed"],
#readerContent .reader-content-inner > p[data-prose-situation="bed"][data-prose-variant="dream"][data-prose-group-role="start"].is-reach-pending + p[data-prose-situation="bed"] + p[data-prose-situation="bed"] + p[data-prose-situation="bed"] + p[data-prose-situation="bed"] + p[data-prose-situation="bed"] + p[data-prose-situation="bed"] + p[data-prose-situation="bed"],
#readerContent .reader-content-inner > p[data-prose-situation="bed"][data-prose-variant="ruin"][data-prose-group-role="start"].is-reach-pending,
#readerContent .reader-content-inner > p[data-prose-situation="bed"][data-prose-variant="ruin"][data-prose-group-role="start"].is-reach-pending + p[data-prose-situation="bed"],
#readerContent .reader-content-inner > p[data-prose-situation="bed"][data-prose-variant="ruin"][data-prose-group-role="start"].is-reach-pending + p[data-prose-situation="bed"] + p[data-prose-situation="bed"],
#readerContent .reader-content-inner > p[data-prose-situation="bed"][data-prose-variant="alley"][data-prose-group-role="start"].is-reach-pending,
#readerContent .reader-content-inner > p[data-prose-situation="bed"][data-prose-variant="alley"][data-prose-group-role="start"].is-reach-pending + p[data-prose-situation="bed"],
#readerContent .reader-content-inner > p[data-prose-situation="bed"][data-prose-variant="alley"][data-prose-group-role="start"].is-reach-pending + p[data-prose-situation="bed"] + p[data-prose-situation="bed"],
#readerContent .reader-content-inner > p[data-prose-situation="bed"][data-prose-variant="alley"][data-prose-group-role="start"].is-reach-pending + p[data-prose-situation="bed"] + p[data-prose-situation="bed"] + p[data-prose-situation="bed"],
#readerContent .reader-content-inner > p[data-prose-situation="bed"][data-prose-variant="alley"][data-prose-group-role="start"].is-reach-pending + p[data-prose-situation="bed"] + p[data-prose-situation="bed"] + p[data-prose-situation="bed"] + p[data-prose-situation="bed"],
#readerContent .reader-content-inner > p[data-prose-situation="bed"][data-prose-variant="alley"][data-prose-group-role="start"].is-reach-pending + p[data-prose-situation="bed"] + p[data-prose-situation="bed"] + p[data-prose-situation="bed"] + p[data-prose-situation="bed"] + p[data-prose-situation="bed"],
#readerContent .reader-content-inner > p[data-prose-situation="bed"][data-prose-variant="alley"][data-prose-group-role="start"].is-reach-pending + p[data-prose-situation="bed"] + p[data-prose-situation="bed"] + p[data-prose-situation="bed"] + p[data-prose-situation="bed"] + p[data-prose-situation="bed"] + p[data-prose-situation="bed"],
#readerContent .reader-content-inner > p[data-prose-situation="bed"][data-prose-variant="alley"][data-prose-group-role="start"].is-reach-pending + p[data-prose-situation="bed"] + p[data-prose-situation="bed"] + p[data-prose-situation="bed"] + p[data-prose-situation="bed"] + p[data-prose-situation="bed"] + p[data-prose-situation="bed"] + p[data-prose-situation="bed"],
#readerContent .reader-content-inner > p[data-prose-situation="bed"][data-prose-variant="alley"][data-prose-group-role="start"].is-reach-pending + p[data-prose-situation="bed"] + p[data-prose-situation="bed"] + p[data-prose-situation="bed"] + p[data-prose-situation="bed"] + p[data-prose-situation="bed"] + p[data-prose-situation="bed"] + p[data-prose-situation="bed"] + p[data-prose-situation="bed"],
#readerContent .reader-content-inner > p[data-prose-situation="bed"][data-prose-variant="alley"][data-prose-group-role="start"].is-reach-pending + p[data-prose-situation="bed"] + p[data-prose-situation="bed"] + p[data-prose-situation="bed"] + p[data-prose-situation="bed"] + p[data-prose-situation="bed"] + p[data-prose-situation="bed"] + p[data-prose-situation="bed"] + p[data-prose-situation="bed"] + p[data-prose-situation="bed"],
#readerContent .reader-content-inner > p[data-prose-situation="bed"][data-prose-variant="alley"][data-prose-group-role="start"].is-reach-pending + p[data-prose-situation="bed"] + p[data-prose-situation="bed"] + p[data-prose-situation="bed"] + p[data-prose-situation="bed"] + p[data-prose-situation="bed"] + p[data-prose-situation="bed"] + p[data-prose-situation="bed"] + p[data-prose-situation="bed"] + p[data-prose-situation="bed"] + p[data-prose-situation="bed"] {
  opacity: 0;
}

#readerContent .reader-content-inner > p[data-prose-situation="bed"][data-prose-variant="dream"][data-prose-group-role="start"] + p[data-prose-situation="bed"] {
  transition-delay: 0.45s;
}

#readerContent .reader-content-inner > p[data-prose-situation="bed"][data-prose-variant="dream"][data-prose-group-role="start"] + p[data-prose-situation="bed"] + p[data-prose-situation="bed"] {
  transition-delay: 0.9s;
}

#readerContent .reader-content-inner > p[data-prose-situation="bed"][data-prose-variant="dream"][data-prose-group-role="start"] + p[data-prose-situation="bed"] + p[data-prose-situation="bed"] + p[data-prose-situation="bed"] {
  transition-delay: 1.35s;
}

#readerContent .reader-content-inner > p[data-prose-situation="bed"][data-prose-variant="dream"][data-prose-group-role="start"] + p[data-prose-situation="bed"] + p[data-prose-situation="bed"] + p[data-prose-situation="bed"] + p[data-prose-situation="bed"] {
  transition-delay: 1.8s;
}

#readerContent .reader-content-inner > p[data-prose-situation="bed"][data-prose-variant="dream"][data-prose-group-role="start"] + p[data-prose-situation="bed"] + p[data-prose-situation="bed"] + p[data-prose-situation="bed"] + p[data-prose-situation="bed"] + p[data-prose-situation="bed"] {
  transition-delay: 2.25s;
}

#readerContent .reader-content-inner > p[data-prose-situation="bed"][data-prose-variant="dream"][data-prose-group-role="start"] + p[data-prose-situation="bed"] + p[data-prose-situation="bed"] + p[data-prose-situation="bed"] + p[data-prose-situation="bed"] + p[data-prose-situation="bed"] + p[data-prose-situation="bed"] {
  transition-delay: 2.7s;
}

#readerContent .reader-content-inner > p[data-prose-situation="bed"][data-prose-variant="dream"][data-prose-group-role="start"] + p[data-prose-situation="bed"] + p[data-prose-situation="bed"] + p[data-prose-situation="bed"] + p[data-prose-situation="bed"] + p[data-prose-situation="bed"] + p[data-prose-situation="bed"] + p[data-prose-situation="bed"] {
  transition-delay: 3.15s;
}

#readerContent .reader-content-inner > p[data-prose-situation="bed"][data-prose-variant="ruin"][data-prose-group-role="start"] + p[data-prose-situation="bed"] {
  transition-delay: 0.45s;
}

#readerContent .reader-content-inner > p[data-prose-situation="bed"][data-prose-variant="ruin"][data-prose-group-role="start"] + p[data-prose-situation="bed"] + p[data-prose-situation="bed"] {
  transition-delay: 0.9s;
}

#readerContent .reader-content-inner > p[data-prose-situation="bed"][data-prose-variant="alley"][data-prose-group-role="start"] + p[data-prose-situation="bed"] {
  transition-delay: 0.45s;
}

#readerContent .reader-content-inner > p[data-prose-situation="bed"][data-prose-variant="alley"][data-prose-group-role="start"] + p[data-prose-situation="bed"] + p[data-prose-situation="bed"] {
  transition-delay: 0.9s;
}

#readerContent .reader-content-inner > p[data-prose-situation="bed"][data-prose-variant="alley"][data-prose-group-role="start"] + p[data-prose-situation="bed"] + p[data-prose-situation="bed"] + p[data-prose-situation="bed"] {
  transition-delay: 1.35s;
}

#readerContent .reader-content-inner > p[data-prose-situation="bed"][data-prose-variant="alley"][data-prose-group-role="start"] + p[data-prose-situation="bed"] + p[data-prose-situation="bed"] + p[data-prose-situation="bed"] + p[data-prose-situation="bed"] {
  transition-delay: 1.8s;
}

#readerContent .reader-content-inner > p[data-prose-situation="bed"][data-prose-variant="alley"][data-prose-group-role="start"] + p[data-prose-situation="bed"] + p[data-prose-situation="bed"] + p[data-prose-situation="bed"] + p[data-prose-situation="bed"] + p[data-prose-situation="bed"] {
  transition-delay: 2.25s;
}

#readerContent .reader-content-inner > p[data-prose-situation="bed"][data-prose-variant="alley"][data-prose-group-role="start"] + p[data-prose-situation="bed"] + p[data-prose-situation="bed"] + p[data-prose-situation="bed"] + p[data-prose-situation="bed"] + p[data-prose-situation="bed"] + p[data-prose-situation="bed"] {
  transition-delay: 2.7s;
}

#readerContent .reader-content-inner > p[data-prose-situation="bed"][data-prose-variant="alley"][data-prose-group-role="start"] + p[data-prose-situation="bed"] + p[data-prose-situation="bed"] + p[data-prose-situation="bed"] + p[data-prose-situation="bed"] + p[data-prose-situation="bed"] + p[data-prose-situation="bed"] + p[data-prose-situation="bed"] {
  transition-delay: 3.15s;
}

#readerContent .reader-content-inner > p[data-prose-situation="bed"][data-prose-variant="alley"][data-prose-group-role="start"] + p[data-prose-situation="bed"] + p[data-prose-situation="bed"] + p[data-prose-situation="bed"] + p[data-prose-situation="bed"] + p[data-prose-situation="bed"] + p[data-prose-situation="bed"] + p[data-prose-situation="bed"] + p[data-prose-situation="bed"] {
  transition-delay: 3.6s;
}

#readerContent .reader-content-inner > p[data-prose-situation="bed"][data-prose-variant="alley"][data-prose-group-role="start"] + p[data-prose-situation="bed"] + p[data-prose-situation="bed"] + p[data-prose-situation="bed"] + p[data-prose-situation="bed"] + p[data-prose-situation="bed"] + p[data-prose-situation="bed"] + p[data-prose-situation="bed"] + p[data-prose-situation="bed"] + p[data-prose-situation="bed"] {
  transition-delay: 4.1s;
}

#readerContent .reader-content-inner > p[data-prose-situation="bed"][data-prose-variant="alley"][data-prose-group-role="start"] + p[data-prose-situation="bed"] + p[data-prose-situation="bed"] + p[data-prose-situation="bed"] + p[data-prose-situation="bed"] + p[data-prose-situation="bed"] + p[data-prose-situation="bed"] + p[data-prose-situation="bed"] + p[data-prose-situation="bed"] + p[data-prose-situation="bed"] + p[data-prose-situation="bed"] {
  transition-delay: 6.9s;
}

/* 꿈의 넷째 줄이 한 번 번진다(견본 blurspread8 — 장정의 꿈 · 폐허의 꿈에는 없다). 글자만 번진다 — 상자에 거르개를 걸면 어둠의 테가 번져 줄 상자가 드러난다. */
#readerContent .reader-content-inner > p[data-prose-situation="bed"][data-prose-variant="dream"][data-prose-group-role="start"].is-reached + p[data-prose-situation="bed"] + p[data-prose-situation="bed"] + p[data-prose-situation="bed"] {
  animation: prose-blur-spread 3s ease 1.4s 1;
}

@keyframes prose-blur-spread {
  40% { color: transparent; text-shadow: 0 0 1.6px var(--prose-dream-ink), 0 0 1.6px var(--prose-dream-ink); }
}


/* 내가 없는 꿈의 잔효과(016) — 왁세의 연푸른 빛 · 아지랑이 · 포개지는 그림자 셋 · 날카로운 것의 칼빛. */
#readerContent .reader-content-inner > p[data-prose-situation="bed"].is-reached .prose-fx[data-prose-fx="sun"] {
  animation: prose-dream-sun 3.4s ease 1.2s 1;
}

#readerContent .reader-content-inner > p[data-prose-situation="bed"]:has(.prose-fx[data-prose-fx="heat"]).is-reached {
  animation: prose-heat 2.6s ease-in-out 1.4s 2;
}

#readerContent .reader-content-inner > p[data-prose-situation="bed"].is-reached .prose-fx[data-prose-fx="shade"] {
  animation: prose-shade 3.2s cubic-bezier(0.3, 0.1, 0.3, 1) 1.6s 1;
}

#readerContent .prose-fx[data-prose-fx="blade"] {
  background: linear-gradient(100deg, currentColor 0 42%, #c7d9ef 50%, currentColor 58% 100%) 100% 0 / 300% 100% no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

#readerContent .reader-content-inner > p.is-reached .prose-fx[data-prose-fx="blade"] {
  animation: prose-blade 0.9s ease-in-out 1.6s 1;
}

@keyframes prose-dream-sun {
  0%, 100% { text-shadow: none; }
  35%, 60% { text-shadow: 0 0 0.5em rgba(160, 205, 255, 0.95), 0 0 1.4em rgba(160, 205, 255, 0.55); }
}

@keyframes prose-heat {
  0%, 100% { transform: none; filter: none; }
  25% { transform: skewX(1.2deg) scaleY(1.01); filter: blur(0.5px); }
  50% { transform: skewX(-1deg); filter: blur(0.2px); }
  75% { transform: skewX(0.8deg) scaleY(0.995); filter: blur(0.45px); }
}

@keyframes prose-shade {
  0% { text-shadow: -14px 0 0 rgba(160, 205, 255, 0), 14px 0 0 rgba(255, 170, 190, 0), 0 10px 0 rgba(255, 220, 150, 0); }
  20% { text-shadow: -14px 0 0 rgba(160, 205, 255, 0.55), 14px 0 0 rgba(255, 170, 190, 0.5), 0 10px 0 rgba(255, 220, 150, 0.5); }
  85% { text-shadow: 0 0 0 rgba(160, 205, 255, 0.35), 0 0 0 rgba(255, 170, 190, 0.3), 0 0 0 rgba(255, 220, 150, 0.3); }
  100% { text-shadow: none; }
}

@keyframes prose-blade {
  0% { background-position: 100% 0; }
  100% { background-position: 0 0; }
}

/* 장정의 꿈 — 핑크 없는 어둠과 뒤에서 비치는 가로등, 음절마다 들려오는 목소리. 화의 끝 줄은 꿈이 다 선 뒤에(원칙 11). */
#readerContent .reader-content-inner > p[data-prose-situation="bed"][data-prose-variant="alley"] {
  --dream-a: var(--prose-dream-dusk-a);
  --dream-b: var(--prose-dream-dusk-b);
  --dream-c: var(--prose-dream-dusk-c);
}

#readerContent .reader-content-inner > p[data-prose-situation="bed"][data-prose-variant="alley"]:has(.prose-fx[data-prose-fx="backlit"]) {
  --dream-lamp: radial-gradient(ellipse 60% 140% at 50% 50%, rgba(255, 186, 107, 0.22), transparent 75%);
}

#readerContent .reader-content-inner > p[data-prose-situation="bed"][data-prose-variant="alley"].is-reached .prose-fx[data-prose-fx="backlit"] {
  animation: prose-backlit 3.8s ease 2s 1;
}

@keyframes prose-backlit {
  0%, 100% { color: inherit; text-shadow: none; }
  40%, 68% { color: color-mix(in srgb, var(--prose-dream-ink) 36%, transparent); text-shadow: 0 0 0.5em rgba(255, 186, 104, 0.72), 0 0 1.3em rgba(255, 168, 80, 0.32); }
}

#readerContent .reader-content-inner > p[data-prose-situation="bed"][data-prose-variant="alley"][data-prose-group-role="start"].is-reach-pending ~ p[data-prose-situation="bed"][data-prose-variant="alley"] .prose-fx[data-prose-fx^="sy"] {
  opacity: 0;
}

#readerContent .reader-content-inner > p[data-prose-situation="bed"][data-prose-variant="alley"][data-prose-group-role="start"].is-reached ~ p[data-prose-situation="bed"][data-prose-variant="alley"] .prose-fx[data-prose-fx="sy0"] {
  animation: prose-syllable 0.32s ease 4.30s 1 both;
}

#readerContent .reader-content-inner > p[data-prose-situation="bed"][data-prose-variant="alley"][data-prose-group-role="start"].is-reached ~ p[data-prose-situation="bed"][data-prose-variant="alley"] .prose-fx[data-prose-fx="sy1"] {
  animation: prose-syllable 0.32s ease 4.42s 1 both;
}

#readerContent .reader-content-inner > p[data-prose-situation="bed"][data-prose-variant="alley"][data-prose-group-role="start"].is-reached ~ p[data-prose-situation="bed"][data-prose-variant="alley"] .prose-fx[data-prose-fx="sy2"] {
  animation: prose-syllable 0.32s ease 4.54s 1 both;
}

#readerContent .reader-content-inner > p[data-prose-situation="bed"][data-prose-variant="alley"][data-prose-group-role="start"].is-reached ~ p[data-prose-situation="bed"][data-prose-variant="alley"] .prose-fx[data-prose-fx="sy3"] {
  animation: prose-syllable 0.32s ease 4.66s 1 both;
}

#readerContent .reader-content-inner > p[data-prose-situation="bed"][data-prose-variant="alley"][data-prose-group-role="start"].is-reached ~ p[data-prose-situation="bed"][data-prose-variant="alley"] .prose-fx[data-prose-fx="sy4"] {
  animation: prose-syllable 0.32s ease 4.78s 1 both;
}

#readerContent .reader-content-inner > p[data-prose-situation="bed"][data-prose-variant="alley"][data-prose-group-role="start"].is-reached ~ p[data-prose-situation="bed"][data-prose-variant="alley"] .prose-fx[data-prose-fx="sy5"] {
  animation: prose-syllable 0.32s ease 4.98s 1 both;
}

#readerContent .reader-content-inner > p[data-prose-situation="bed"][data-prose-variant="alley"][data-prose-group-role="start"].is-reached ~ p[data-prose-situation="bed"][data-prose-variant="alley"] .prose-fx[data-prose-fx="sy6"] {
  animation: prose-syllable 0.32s ease 5.10s 1 both;
}

#readerContent .reader-content-inner > p[data-prose-situation="bed"][data-prose-variant="alley"][data-prose-group-role="start"].is-reached ~ p[data-prose-situation="bed"][data-prose-variant="alley"] .prose-fx[data-prose-fx="sy7"] {
  animation: prose-syllable 0.32s ease 5.22s 1 both;
}

#readerContent .reader-content-inner > p[data-prose-situation="bed"][data-prose-variant="alley"][data-prose-group-role="start"].is-reached ~ p[data-prose-situation="bed"][data-prose-variant="alley"] .prose-fx[data-prose-fx="sy8"] {
  animation: prose-syllable 0.32s ease 5.42s 1 both;
}

#readerContent .reader-content-inner > p[data-prose-situation="bed"][data-prose-variant="alley"][data-prose-group-role="start"].is-reached ~ p[data-prose-situation="bed"][data-prose-variant="alley"] .prose-fx[data-prose-fx="sy9"] {
  animation: prose-syllable 0.32s ease 5.54s 1 both;
}

#readerContent .reader-content-inner > p[data-prose-situation="bed"][data-prose-variant="alley"][data-prose-group-role="start"].is-reached ~ p[data-prose-situation="bed"][data-prose-variant="alley"] .prose-fx[data-prose-fx="sy10"] {
  animation: prose-syllable 0.32s ease 5.74s 1 both;
}

#readerContent .reader-content-inner > p[data-prose-situation="bed"][data-prose-variant="alley"][data-prose-group-role="start"].is-reached ~ p[data-prose-situation="bed"][data-prose-variant="alley"] .prose-fx[data-prose-fx="sy11"] {
  animation: prose-syllable 0.32s ease 5.86s 1 both;
}

#readerContent .reader-content-inner > p[data-prose-situation="bed"][data-prose-variant="alley"][data-prose-group-role="start"].is-reached ~ p[data-prose-situation="bed"][data-prose-variant="alley"] .prose-fx[data-prose-fx="sy12"] {
  animation: prose-syllable 0.32s ease 5.98s 1 both;
}

#readerContent .reader-content-inner > p[data-prose-situation="bed"][data-prose-variant="alley"][data-prose-group-role="start"].is-reached ~ p[data-prose-situation="bed"][data-prose-variant="alley"] .prose-fx[data-prose-fx="sy13"] {
  animation: prose-syllable 0.32s ease 6.10s 1 both;
}

#readerContent .reader-content-inner > p[data-prose-situation="bed"][data-prose-variant="alley"][data-prose-group-role="start"].is-reached ~ p[data-prose-situation="bed"][data-prose-variant="alley"] .prose-fx[data-prose-fx="sy14"] {
  animation: prose-syllable 0.32s ease 6.34s 1 both;
}

#readerContent .reader-content-inner > p[data-prose-situation="bed"][data-prose-variant="alley"][data-prose-group-role="start"].is-reached ~ p[data-prose-situation="bed"][data-prose-variant="alley"] .prose-fx[data-prose-fx="sy15"] {
  animation: prose-syllable 0.32s ease 6.62s 1 both;
}

#readerContent .reader-content-inner > p[data-prose-situation="bed"][data-prose-variant="alley"][data-prose-group-role="start"].is-reached ~ p[data-prose-situation="bed"][data-prose-variant="alley"] .prose-fx[data-prose-fx="sy16"] {
  animation: prose-syllable 0.32s ease 6.80s 1 both;
}

@keyframes prose-syllable {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* 화의 끝 줄(끼어듦)은 꿈이 다 선 뒤에 — 끼어듦이 꿈의 차례를 앞지르지 않는다(원칙 11 · 사전 render_rules 「엔딩」). */
#readerContent .reader-content-inner > p[data-prose-situation="bed"][data-prose-variant="alley"][data-prose-group-role="start"].is-reach-pending + p[data-prose-situation="bed"] + p[data-prose-situation="bed"] + p[data-prose-situation="bed"] + p[data-prose-situation="bed"] + p[data-prose-situation="bed"] + p[data-prose-situation="bed"] + p[data-prose-situation="bed"] + p[data-prose-situation="bed"] + p[data-prose-situation="bed"] + p[data-prose-situation="bed"] + p[data-prose-end="cut"] {
  visibility: hidden;
}

#readerContent .reader-content-inner > p[data-prose-situation="bed"][data-prose-variant="alley"][data-prose-group-role="start"].is-reached + p[data-prose-situation="bed"] + p[data-prose-situation="bed"] + p[data-prose-situation="bed"] + p[data-prose-situation="bed"] + p[data-prose-situation="bed"] + p[data-prose-situation="bed"] + p[data-prose-situation="bed"] + p[data-prose-situation="bed"] + p[data-prose-situation="bed"] + p[data-prose-situation="bed"] + p[data-prose-end="cut"] {
  animation: prose-after-dream 0.01s linear 8.1s 1 both;
}

@keyframes prose-after-dream {
  from { visibility: hidden; }
  to { visibility: visible; }
}


/* 그 꿈의 잔해 — 핑크 없는 어둠에 섰다가 화 머리를 읽을 만큼 머문 뒤 글자가 빠르게 흐려진다(끝에도 읽힌다 — 「피」는 남는다).
   어둠은 그대로다 — 줄마다 반투명을 걸면 틈을 칠한 그림자가 겹쳐 줄 사이에 금이 진다. */
#readerContent .reader-content-inner > p[data-prose-situation="bed"][data-prose-variant="ruin"] {
  --dream-a: var(--prose-dream-ash-a);
  --dream-b: var(--prose-dream-ash-b);
  --dream-c: var(--prose-dream-ash-c);
}

#readerContent .reader-content-inner > p[data-prose-situation="bed"][data-prose-variant="ruin"]:is([data-prose-group-role="start"], [data-prose-group-role="solo"]).is-reached,
#readerContent .reader-content-inner > p[data-prose-situation="bed"][data-prose-variant="ruin"][data-prose-group-role="start"].is-reached + p[data-prose-situation="bed"],
#readerContent .reader-content-inner > p[data-prose-situation="bed"][data-prose-variant="ruin"][data-prose-group-role="start"].is-reached + p[data-prose-situation="bed"] + p[data-prose-situation="bed"] {
  animation: prose-crumble 1.1s ease 6s 1 forwards;
}

@keyframes prose-crumble {
  to { color: color-mix(in srgb, var(--prose-dream-ink) 42%, transparent); }
}

/* 폐허의 꿈 — 밝고 찬 흰 낮(위에서 내리쬐는 빛), 처음부터 보인다. 시야가 둔중하게 두 번 내려앉고, 닳은 검의 윤곽은 흐려진 채 남는다. */
#readerContent .reader-content-inner > p[data-prose-situation="bed"][data-prose-variant="noon"] {
  --prose-dream-ink: var(--prose-noon-ink);
  --dream-a: var(--prose-dream-noon-a);
  --dream-b: var(--prose-dream-noon-b);
  --dream-c: var(--prose-dream-noon-c);
  color: var(--prose-noon-ink);
}

#readerContent .reader-content-inner > p[data-prose-situation="bed"][data-prose-variant="noon"][data-prose-group-role="start"] {
  --dream-lamp: radial-gradient(ellipse 120% 100% at 50% 0%, rgba(255, 252, 240, 0.85), transparent 80%);
}

html[data-theme="dark"] #readerContent .reader-content-inner > p[data-prose-situation="bed"][data-prose-variant="noon"][data-prose-group-role="start"] {
  --dream-lamp: radial-gradient(ellipse 120% 100% at 50% 0%, rgba(255, 250, 236, 0.08), transparent 80%);
}

#readerContent .reader-content-inner > p[data-prose-situation="bed"][data-prose-variant="noon"]:has(.prose-fx[data-prose-fx="sway"]) {
  transform-origin: 50% 0;
}

#readerContent .reader-content-inner > p[data-prose-situation="bed"][data-prose-variant="noon"]:has(.prose-fx[data-prose-fx="sway"]).is-reached {
  animation: prose-heavy-sway 2.4s cubic-bezier(0.4, 0, 0.4, 1) 0.4s 1;
}

#readerContent .reader-content-inner > p[data-prose-situation="bed"][data-prose-variant="noon"].is-reached .prose-fx[data-prose-fx="worn"] {
  animation: prose-worn 3s ease 0.6s 1 both;
}

@keyframes prose-heavy-sway {
  0%, 100% { transform: none; }
  22% { transform: translateY(3px) rotate(0.25deg); }
  48% { transform: translateY(-1px) rotate(-0.15deg); }
  72% { transform: translateY(2.5px) rotate(0.2deg); }
}

@keyframes prose-worn {
  to { color: color-mix(in srgb, var(--prose-noon-ink) 74%, transparent); text-shadow: 0 0 0.9px color-mix(in srgb, var(--prose-noon-ink) 55%, transparent), 0 0 2.4px color-mix(in srgb, var(--prose-noon-ink) 22%, transparent); }
}

/* 한 줄의 꿈 — 꿈의 파스텔 빛이 한 번 번쩍 끼어든다(도망의 메아리 — 테 없이 번진다). 쉬는 모양은 여느 문단이다. */
#readerContent .reader-content-inner > p[data-prose-situation="bed"][data-prose-variant="flash"] {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  text-indent: var(--reader-paragraph-indent, 0);
  text-align: var(--reader-paragraph-align, start);
  isolation: isolate;
}

#readerContent .reader-content-inner > p[data-prose-situation="bed"][data-prose-variant="flash"]::after {
  content: "";
  position: absolute;
  inset: -0.3em 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  background-image: radial-gradient(circle at 70% 50%, rgba(255, 150, 200, 0.35), transparent 30%),
    linear-gradient(90deg, var(--prose-dream-aurora-a), var(--prose-dream-aurora-b) 55%, var(--prose-dream-aurora-c));
  filter: blur(0.9em);
}

#readerContent .reader-content-inner > p[data-prose-situation="bed"][data-prose-variant="flash"].is-reached::after {
  animation: prose-dream-flash 0.7s ease-out 1;
}

#readerContent .reader-content-inner > p[data-prose-situation="bed"][data-prose-variant="flash"].is-reached {
  animation: prose-dream-flash-ink 0.7s ease-out 1;
}

@keyframes prose-dream-flash {
  0% { opacity: 0; }
  18% { opacity: 0.95; }
  100% { opacity: 0; }
}

@keyframes prose-dream-flash-ink {
  0%, 100% { color: inherit; }
  18% { color: var(--prose-dream-haze-ink); }
}

/* 🔖 회수될 줄 — 리본 그림 없이 그 줄의 먹이 천천히 내려앉는다(오래 남을 줄). */
#readerContent .reader-content-inner > p[data-prose-situation="bookmark"] {
  transition: opacity 2.4s ease 0.2s;
}

#readerContent .reader-content-inner > p[data-prose-situation="bookmark"].is-reach-pending {
  opacity: 0.38;
}

/* 🐛 글리치 — 색이 갈라지고 줄이 한 번 조각난다(덩이 바로 뒤 제목 줄까지). 「조명」이면 흰빛이 한 번 넘친다. */
#readerContent .reader-content-inner > p[data-prose-situation="bug"] {
  isolation: isolate;
}

#readerContent .reader-content-inner > p[data-prose-situation="bug"]:not([data-prose-variant="flare"]).is-reached,
#readerContent .reader-content-inner > p[data-prose-situation="bug"]:is([data-prose-group-role="end"], [data-prose-group-role="solo"]):not([data-prose-variant="flare"]).is-reached + p:is([data-prose-kind="h1"], [data-prose-kind="h2"], [data-prose-kind="h3"], [data-prose-kind="h4"]) {
  animation: prose-glitch 0.9s steps(2, end) 1;
}

#readerContent .reader-content-inner > p[data-prose-situation="bug"]:is([data-prose-group-role="end"], [data-prose-group-role="solo"]):not([data-prose-variant="flare"]).is-reached + p:is([data-prose-kind="h1"], [data-prose-kind="h2"], [data-prose-kind="h3"], [data-prose-kind="h4"]) {
  animation-delay: 0.2s;
}

#readerContent .reader-content-inner > p[data-prose-situation="bug"]:not([data-prose-variant="flare"])::after {
  content: "";
  position: absolute;
  inset: -0.2em 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  mix-blend-mode: multiply;
}

#readerContent .reader-content-inner > p[data-prose-situation="bug"]:not([data-prose-variant="flare"]).is-reached::after {
  background: url("/situations/grain.webp?av=3d7a82f0c28b") 0 0 / 128px 128px;
  animation: prose-grain 0.9s steps(6, end) 1;
}

html[data-theme="dark"] #readerContent .reader-content-inner > p[data-prose-situation="bug"]::after {
  mix-blend-mode: screen;
}

#readerContent .reader-content-inner > p[data-prose-situation="bug"][data-prose-variant="flare"]::before {
  content: "";
  position: absolute;
  inset: -1.2em 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(ellipse 30% 70% at 62% 50%, rgba(255, 250, 232, 0.8), rgba(255, 240, 205, 0.45) 35%, transparent 70%),
    linear-gradient(0deg, transparent 47%, rgba(255, 236, 190, 0.75) 50%, transparent 53%);
}

#readerContent .reader-content-inner > p[data-prose-situation="bug"][data-prose-variant="flare"].is-reached::before {
  animation: prose-flare 1.9s ease-out 0.2s 1;
}

#readerContent .reader-content-inner > p[data-prose-situation="bug"][data-prose-variant="flare"].is-reached {
  animation: prose-wash 1.9s ease-out 0.2s 1;
}

@keyframes prose-glitch {
  0% { text-shadow: 2px 0 rgba(255, 0, 80, 0.65), -2px 0 rgba(0, 200, 255, 0.65); clip-path: inset(0 0 0 0); transform: translateX(0); }
  20% { text-shadow: -3px 0 rgba(255, 0, 80, 0.65), 3px 0 rgba(0, 200, 255, 0.65); clip-path: inset(10% 0 55% 0); transform: translateX(3px); }
  40% { clip-path: inset(60% 0 5% 0); transform: translateX(-4px); }
  60% { text-shadow: 1px 0 rgba(255, 0, 80, 0.6), -1px 0 rgba(0, 200, 255, 0.6); clip-path: inset(30% 0 30% 0); transform: translateX(2px); }
  100% { text-shadow: none; clip-path: inset(0 0 0 0); transform: none; }
}

@keyframes prose-grain {
  0% { opacity: 0; background-position: 0 0; }
  20% { opacity: 0.35; background-position: 31px 17px; }
  50% { opacity: 0.25; background-position: -23px 41px; }
  100% { opacity: 0; background-position: 9px -12px; }
}

@keyframes prose-flare {
  0% { opacity: 0; }
  14% { opacity: 1; }
  40% { opacity: 0.8; }
  100% { opacity: 0; }
}

@keyframes prose-wash {
  0%, 100% { color: inherit; text-shadow: none; }
  14% { color: #b8a37c; text-shadow: 0 0 0.6em rgba(255, 236, 190, 0.95), 0 0 1.4em rgba(255, 240, 210, 0.8); }
  45% { color: inherit; text-shadow: 0 0 0.35em rgba(255, 236, 190, 0.5); }
}

/* ☀ 새어 나오는 빛 — 왁세(빛을 입은 것인지 새어 나오는 것인지): 그 줄에서 연푸른 빛살이 번진다. 「구세주」는 짧고 옅게. */
#readerContent .reader-content-inner > p[data-prose-situation="sun"] {
  isolation: isolate;
}

#readerContent .reader-content-inner > p[data-prose-situation="sun"]:not([data-prose-variant="halo"])::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(14em, 70%);
  aspect-ratio: 1;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%);
  background: repeating-conic-gradient(from 0deg, rgba(170, 205, 255, 0.32) 0deg 6deg, transparent 6deg 18deg);
  -webkit-mask: radial-gradient(circle, #000 0, transparent 55%);
  mask: radial-gradient(circle, #000 0, transparent 55%);
}

#readerContent .reader-content-inner > p[data-prose-situation="sun"]:not([data-prose-variant="halo"]).is-reached::before {
  animation: prose-rays 3.4s ease-out 1;
}

#readerContent .reader-content-inner > p[data-prose-situation="sun"][data-prose-variant="halo"].is-reached {
  animation: prose-halo 2.6s ease 0.3s 1;
}

@keyframes prose-rays {
  0% { opacity: 0; transform: translate(-50%, -50%) rotate(0deg); }
  35% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -50%) rotate(20deg); }
}

@keyframes prose-halo {
  0%, 100% { text-shadow: none; }
  30%, 58% { text-shadow: 0 0 0.4em rgba(150, 198, 255, 0.85), 0 0 1.1em rgba(150, 198, 255, 0.4); }
}

/* 🌫 검은 안개 — 카멜리아의 매캐한 향: 줄 아래에서 검은 안개가 피어오른다(덩이면 그 덩이 내내 · 「틈」이면 금 사이로). */
#readerContent .reader-content-inner > p[data-prose-situation="fog"] {
  isolation: isolate;
}

#readerContent .reader-content-inner > p[data-prose-situation="fog"]::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: -0.6em;
  height: 2.6em;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(ellipse 30% 60% at 20% 100%, rgba(10, 10, 12, 0.5), transparent 70%),
    radial-gradient(ellipse 34% 70% at 55% 100%, rgba(10, 10, 12, 0.45), transparent 70%),
    radial-gradient(ellipse 28% 55% at 85% 100%, rgba(10, 10, 12, 0.4), transparent 70%);
}

html[data-theme="dark"] #readerContent .reader-content-inner > p[data-prose-situation="fog"]::after {
  filter: invert(0.15);
}

#readerContent .reader-content-inner > p[data-prose-situation="fog"].is-reached::after {
  animation: prose-mist 3.6s ease-out 1;
}

#readerContent .reader-content-inner > p[data-prose-situation="fog"][data-prose-variant="block"]::after {
  inset-block: 0;
  height: auto;
}

#readerContent .reader-content-inner > p[data-prose-situation="fog"][data-prose-variant="block"].is-reached::after {
  animation: prose-mist-block 6s ease-in-out 1;
}

#readerContent .reader-content-inner > p[data-prose-situation="fog"][data-prose-variant="crack"]::before {
  content: "";
  position: absolute;
  left: 20%;
  right: 30%;
  top: -0.2em;
  height: 2px;
  pointer-events: none;
  opacity: 0;
  transform: skewY(-4deg);
  background: repeating-linear-gradient(90deg, currentColor 0 6px, transparent 6px 9px);
  transition: opacity 0.8s ease;
}

#readerContent .reader-content-inner > p[data-prose-situation="fog"][data-prose-variant="crack"]:is(.is-reached, .is-reach-done)::before {
  opacity: 0.45;
}

@keyframes prose-mist {
  0% { opacity: 0; transform: translateY(0.6em) scaleY(0.6); }
  35% { opacity: 0.85; }
  100% { opacity: 0; transform: translateY(-1.4em) scaleY(1.3); }
}

@keyframes prose-mist-block {
  0% { opacity: 0; }
  20% { opacity: 0.7; }
  70% { opacity: 0.55; }
  100% { opacity: 0; }
}

/* 🔒 잠김 · 봉인 — 자물쇠 그림 없이 그 줄이 한 번 조여 딸깍 걸린다. */
#readerContent .reader-content-inner > p[data-prose-situation="lock"] {
  transform-origin: 50% 60%;
}

#readerContent .reader-content-inner > p[data-prose-situation="lock"].is-reached {
  animation: prose-latch 1s cubic-bezier(0.3, 0, 0.2, 1) 0.5s 1;
}

@keyframes prose-latch {
  0%, 100% { transform: none; filter: none; }
  30% { transform: scaleX(0.986); filter: brightness(0.82); }
  35% { transform: scaleX(0.986) translateX(0.6px); }
  41% { transform: scaleX(0.988) translateX(-0.5px); }
  48% { transform: scaleX(0.99); }
  70% { transform: none; filter: none; }
}

/* 🔓 문이 된다 — 줄 뒤로 가는 문틈이 열리고 그 빛 속에 감자 열둘의 그림자(열두 위격). 덩이 내내 한 장의 틈이다. */
#readerContent .reader-content-inner > p[data-prose-situation="unlock"] {
  isolation: isolate;
}

#readerContent .reader-content-inner > p[data-prose-situation="unlock"]::before {
  content: "";
  position: absolute;
  left: 50%;
  inset-block: 0;
  width: 2.5em;
  z-index: -1;
  pointer-events: none;
  transform: translateX(-50%);
  background:
    linear-gradient(90deg, rgba(14, 10, 6, 0.85), rgba(14, 10, 6, 0) 30%, rgba(14, 10, 6, 0) 70%, rgba(14, 10, 6, 0.85)),
    radial-gradient(ellipse 40% 60% at 50% 45%, rgba(255, 214, 150, 0.35), transparent 75%),
    #17110b;
  filter: saturate(0.75) brightness(0.62) contrast(1.05);
  opacity: 0.72;
  clip-path: inset(0 50% 0 50%);
  transition: clip-path 2.4s cubic-bezier(0.3, 0.1, 0.2, 1) 0.4s;
}

#readerContent .reader-content-inner > p[data-prose-situation="unlock"]:is(.is-reached, .is-reach-done)::before {
  background:
    linear-gradient(90deg, rgba(14, 10, 6, 0.85), rgba(14, 10, 6, 0) 30%, rgba(14, 10, 6, 0) 70%, rgba(14, 10, 6, 0.85)),
    radial-gradient(ellipse 40% 60% at 50% 45%, rgba(255, 214, 150, 0.35), transparent 75%),
    url("/situations/potatoes.webp?av=d30a674f2a96") center / auto 115% no-repeat,
    #17110b;
  clip-path: inset(0 0 0 0);
}

/* 🪞 겹친 얼굴 — 감자 그림자 없이 글자에 옅은 겹이 둘 셋 섰다 하나로 모인다. */
#readerContent .reader-content-inner > p[data-prose-situation="mirror"].is-reached {
  animation: prose-layers 3s ease 0.3s 1;
}

@keyframes prose-layers {
  0%, 100% { text-shadow: none; }
  25%, 55% { text-shadow: -6px 0 0 color-mix(in srgb, var(--reader-ink, #141414) 15%, transparent), 6px 0 0 color-mix(in srgb, var(--reader-ink, #141414) 11%, transparent); }
  75% { text-shadow: -2px 0 0 color-mix(in srgb, var(--reader-ink, #141414) 8%, transparent), 2px 0 0 color-mix(in srgb, var(--reader-ink, #141414) 6%, transparent); }
}

/* 🪐 행성 — 행성 그림 없이: 숨을 모으면 한 번 들이쉬고 · 부푸는 줄은 부푼 채 끝나고 · 솟는 줄은 천천히 솟는다. */
#readerContent .reader-content-inner > p[data-prose-situation="globe"] {
  transform-origin: 18% 60%;
}

#readerContent .reader-content-inner > p[data-prose-situation="globe"][data-prose-variant="inhale"].is-reached {
  animation: prose-inhale 3.2s ease-in-out 0.4s 1;
}

#readerContent .reader-content-inner > p[data-prose-situation="globe"][data-prose-variant="swell"].is-reached {
  animation: prose-swell-stay 2.8s cubic-bezier(0.3, 0.1, 0.3, 1) 0.4s 1 forwards;
}

#readerContent .reader-content-inner > p[data-prose-situation="globe"][data-prose-variant="rise"].is-reached {
  animation: prose-rise 2.8s cubic-bezier(0.3, 0.1, 0.3, 1) 0.3s 1;
}

@keyframes prose-inhale {
  0%, 100% { transform: none; }
  45%, 72% { transform: scale(1.022); }
}

@keyframes prose-swell-stay {
  to { transform: scale(1.04); }
}

@keyframes prose-rise {
  0%, 100% { transform: none; }
  45%, 75% { transform: translateY(-4px); }
}

/* 🌪 재해의 웃음 — 고리가 퍼지고 줄과 다음 두 줄이 가로로 잦아들며 흔들린다. 「말려」 있으면 흔들지 않고 조여 버틴다. */
#readerContent .reader-content-inner > p[data-prose-situation="storm"] {
  isolation: isolate;
}

#readerContent .reader-content-inner > p[data-prose-situation="storm"]:not([data-prose-variant="press"])::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1em;
  height: 1em;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  border-radius: 50%;
  border: 1.2px solid currentColor;
  box-shadow: 0 0 0 0.35em color-mix(in srgb, var(--reader-ink, #141414) 5%, transparent);
  transform: translate(-50%, -50%) scale(0.2);
}

#readerContent .reader-content-inner > p[data-prose-situation="storm"]:not([data-prose-variant="press"]).is-reached::after {
  animation: prose-ring 1.1s ease-out 1;
}

#readerContent .reader-content-inner > p[data-prose-situation="storm"]:not([data-prose-variant="press"]).is-reached {
  animation: prose-shake 0.8s cubic-bezier(0.37, 0, 0.63, 1) 1;
}

#readerContent .reader-content-inner > p[data-prose-situation="storm"]:not([data-prose-variant="press"]):is([data-prose-group-role="end"], [data-prose-group-role="solo"]).is-reached + p {
  animation: prose-shake-soft 0.8s cubic-bezier(0.37, 0, 0.63, 1) 0.2s 1;
}

#readerContent .reader-content-inner > p[data-prose-situation="storm"]:not([data-prose-variant="press"]):is([data-prose-group-role="end"], [data-prose-group-role="solo"]).is-reached + p + p {
  animation: prose-shake-softer 0.8s cubic-bezier(0.37, 0, 0.63, 1) 0.4s 1;
}

#readerContent .reader-content-inner > p[data-prose-situation="storm"][data-prose-variant="press"].is-reached {
  animation: prose-press 2s ease 0.3s 1;
}

@keyframes prose-ring {
  0% { opacity: 0.38; transform: translate(-50%, -50%) scale(0.2); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(18); }
}

@keyframes prose-shake {
  0%, 100% { transform: none; }
  15% { transform: translateX(-3px); }
  35% { transform: translateX(2.4px); }
  55% { transform: translateX(-1.5px); }
  75% { transform: translateX(0.7px); }
}

@keyframes prose-shake-soft {
  0%, 100% { transform: none; }
  15% { transform: translateX(-1.8px); }
  35% { transform: translateX(1.3px); }
  55% { transform: translateX(-0.8px); }
  75% { transform: translateX(0.3px); }
}

@keyframes prose-shake-softer {
  0%, 100% { transform: none; }
  15% { transform: translateX(-0.9px); }
  35% { transform: translateX(0.6px); }
  55% { transform: translateX(-0.3px); }
}

@keyframes prose-press {
  0%, 100% { transform: none; }
  35%, 72% { transform: scale(1.012); }
  44% { transform: scale(1.012) translateX(0.4px); }
  52% { transform: scale(1.012) translateX(-0.4px); }
  60% { transform: scale(1.012) translateX(0.3px); }
}

/* 🐈 흰 고양이 눈 — 눈 그림 없이 그 줄에 호박빛이 한 번 스친다. */
#readerContent .reader-content-inner > p[data-prose-situation="cat"].is-reached {
  animation: prose-amber 1.8s ease 0.5s 1;
}

@keyframes prose-amber {
  0%, 100% { text-shadow: none; }
  35% { text-shadow: 0 0 0.35em rgba(206, 150, 32, 0.7); }
  60% { text-shadow: 0 0 0.12em rgba(206, 150, 32, 0.25); }
}

/* 🔭 시선 — 내 것이 아닌 시선: 앞의 이름표들(점호)에서 가는 금빛 선이 내 줄로 모인다(화면 밖의 눈은 없다). */
#readerContent .reader-content-inner > p[data-prose-situation="binoculars"]::before {
  content: "";
  position: absolute;
  inset: -5em 0 40% 0;
  pointer-events: none;
  opacity: 0;
  background:
    linear-gradient(to bottom right, transparent calc(50% - 0.6px), rgba(200, 150, 60, 0.9) 50%, transparent calc(50% + 0.6px)) 2% 0 / 44% 100% no-repeat,
    linear-gradient(to bottom left, transparent calc(50% - 0.6px), rgba(200, 150, 60, 0.9) 50%, transparent calc(50% + 0.6px)) 98% 6% / 44% 94% no-repeat,
    linear-gradient(to bottom right, transparent calc(50% - 0.6px), rgba(200, 150, 60, 0.7) 50%, transparent calc(50% + 0.6px)) 8% 30% / 40% 70% no-repeat,
    linear-gradient(to bottom left, transparent calc(50% - 0.6px), rgba(200, 150, 60, 0.7) 50%, transparent calc(50% + 0.6px)) 92% 22% / 40% 78% no-repeat;
}

#readerContent .reader-content-inner > p[data-prose-situation="binoculars"].is-reached::before {
  animation: prose-gaze 2.2s ease-out 1;
}

@keyframes prose-gaze {
  0% { opacity: 0; }
  30% { opacity: 0.45; }
  100% { opacity: 0; }
}

/* ⚙ 삐걱 — 톱니 그림 없이 줄이 톱니처럼 끊어 움직인다(연구소의 기계). */
#readerContent .reader-content-inner > p[data-prose-situation="gear"].is-reached {
  animation: prose-cog 1.2s steps(6, end) 0.3s 1;
}

@keyframes prose-cog {
  0%, 33%, 66%, 100% { transform: none; }
  16%, 50%, 83% { transform: translateX(1px); }
}

/* 🌙 달 — 초승달 그림 없이 그 줄에 은빛 달빛이 한 번 번진다(선을 넘지 않는 표면 장력). */
#readerContent .reader-content-inner > p[data-prose-situation="moon"].is-reached {
  animation: prose-moonlight 3.4s ease 0.4s 1;
}

html[data-theme="dark"] #readerContent .reader-content-inner > p[data-prose-situation="moon"].is-reached {
  animation-name: prose-moonlight-night;
}

@keyframes prose-moonlight {
  0%, 100% { text-shadow: none; }
  40%, 65% { text-shadow: 0 0 0.45em rgba(150, 155, 172, 0.55), 0 0 1.1em rgba(150, 155, 172, 0.25); }
}

@keyframes prose-moonlight-night {
  0%, 100% { text-shadow: none; }
  40%, 65% { text-shadow: 0 0 0.45em rgba(228, 232, 242, 0.85), 0 0 1.1em rgba(210, 216, 230, 0.4); }
}

/* 🐟 물속처럼 뜬다 — 떠올랐다 뭉텅이로 처진다(흐림 없이). 고꾸라진 앞머리는 처진 채 남는다. */
#readerContent .reader-content-inner > p[data-prose-situation="fish"][data-prose-variant="float"]:is([data-prose-group-role="start"], [data-prose-group-role="solo"]).is-reached {
  animation: prose-lift 3.2s cubic-bezier(0.3, 0.6, 0.3, 1) 1;
}

#readerContent .reader-content-inner > p[data-prose-situation="fish"][data-prose-variant="float"][data-prose-group-role="end"].is-reached {
  animation: prose-sink 3.4s cubic-bezier(0.5, 0, 0.3, 1) 0.9s 1;
}

#readerContent .reader-content-inner > p[data-prose-situation="fish"][data-prose-variant="droop"]:is([data-prose-group-role="start"], [data-prose-group-role="solo"]).is-reached {
  animation: prose-droop 3.6s cubic-bezier(0.5, 0, 0.3, 1) 0.3s 1 forwards;
}

@keyframes prose-lift {
  0%, 100% { transform: none; }
  40% { transform: translateY(-6px); }
  70% { transform: translateY(-4px); }
}

@keyframes prose-sink {
  0%, 100% { transform: none; }
  35% { transform: translateY(5px) skewX(-1.5deg); }
  60% { transform: translateY(3px); }
}

@keyframes prose-droop {
  0% { transform: none; }
  40% { transform: translateY(4px) rotate(0.3deg); }
  100% { transform: translateY(2px); }
}

/* ☯ 음양의 목소리 — 요아비소의 목소리가 공기와 섞이지 않는다: 줄이 반 박자 어긋난 그림자를 끈다. */
#readerContent .reader-content-inner > p[data-prose-situation="yin-yang"].is-reached {
  animation: prose-desync 2.2s ease-out 1;
}

@keyframes prose-desync {
  0% { text-shadow: 6px 1px 0 rgba(120, 120, 120, 0.4); }
  50% { text-shadow: 3px 1px 0 rgba(120, 120, 120, 0.3); }
  100% { text-shadow: 0 0 0 transparent; }
}

/* 📶 우주에 시그널 — 신호 그림 없이 그 줄이 은은하게 두 번 맥박친다. */
#readerContent .reader-content-inner > p[data-prose-situation="wifi"].is-reached {
  animation: prose-signal 2.6s ease 0.3s 1;
}

@keyframes prose-signal {
  0%, 100% { text-shadow: none; }
  20% { text-shadow: 0 0 0.3em rgba(130, 130, 142, 0.45); }
  45% { text-shadow: 0 0 0.9em rgba(130, 130, 142, 0); }
  62% { text-shadow: 0 0 0.3em rgba(130, 130, 142, 0.4); }
  88% { text-shadow: 0 0 0.9em rgba(130, 130, 142, 0); }
}

/* ♾ 불로불사 — 흰머리 · 천 년: 줄의 윤곽에 은빛이 한 번 지나가고 흰 빛이 감돈다. */
#readerContent .reader-content-inner > p[data-prose-situation="infinity"] {
  background-image: linear-gradient(100deg, var(--reader-ink, #141414) 0 38%, #c9d3df 46%, #ffffff 50%, #c9d3df 54%, var(--reader-ink, #141414) 62% 100%);
  background-size: 250% 100%;
  background-position: 100% 0;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 0.6em rgba(200, 214, 230, 0.4);
}

#readerContent .reader-content-inner > p[data-prose-situation="infinity"].is-reached {
  animation: prose-silver 2.6s ease-in-out 1 forwards;
}

@keyframes prose-silver {
  0% { background-position: 100% 0; }
  100% { background-position: 0 0; }
}

/* ❄ 냉기 — 손목이 먼저 차가워진다: 줄 가장자리에 성에가 번지고 글자가 식는다. */
#readerContent .reader-content-inner > p[data-prose-situation="snowflake"] {
  isolation: isolate;
  transition: color 2s ease;
}

#readerContent .reader-content-inner > p[data-prose-situation="snowflake"]::before {
  content: "";
  position: absolute;
  right: 0;
  top: -0.6em;
  bottom: -0.6em;
  width: 72%;
  z-index: -1;
  pointer-events: none;
  opacity: 0.9;
  clip-path: inset(0 0 0 100%);
}

#readerContent .reader-content-inner > p[data-prose-situation="snowflake"]:is(.is-reached, .is-reach-done)::before {
  background: url("/situations/frost.webp?av=817c00da80ed") right center / auto 100% no-repeat;
}

#readerContent .reader-content-inner > p[data-prose-situation="snowflake"].is-reached::before {
  animation: prose-frost 4.2s cubic-bezier(0.3, 0.2, 0.2, 1) 1 forwards;
}

#readerContent .reader-content-inner > p[data-prose-situation="snowflake"].is-reach-done::before {
  clip-path: inset(0 0 0 18%);
}

#readerContent .reader-content-inner > p[data-prose-situation="snowflake"]:is(.is-reached, .is-reach-done) {
  color: #3d5b72;
}

html[data-theme="dark"] #readerContent .reader-content-inner > p[data-prose-situation="snowflake"]:is(.is-reached, .is-reach-done) {
  color: #a9cde6;
}

@keyframes prose-frost {
  from { clip-path: inset(0 0 0 100%); }
  to { clip-path: inset(0 0 0 18%); }
}

/* 🌵 가시 — 가시 그림 없이 기침 끝에서 줄이 한 번 걸린다(외로움이 가시로). */
#readerContent .reader-content-inner > p[data-prose-situation="cactus"]:is([data-prose-group-role="end"], [data-prose-group-role="solo"]).is-reached {
  animation: prose-catch 0.8s ease 0.45s 1;
}

@keyframes prose-catch {
  0%, 36%, 60%, 100% { transform: none; }
  18% { transform: translateY(-1px) scaleX(0.994); }
  24% { transform: translateY(0.6px); }
  52% { transform: translateY(-0.5px); }
}

/* 🔌 기능이 꺼진다 — 줄이 브라운관처럼 한 번 꺼졌다 켜진다. */
#readerContent .reader-content-inner > p[data-prose-situation="power"].is-reached {
  animation: prose-power 1s ease-in-out 1;
}

@keyframes prose-power {
  0%, 100% { transform: none; filter: none; opacity: 1; }
  30% { transform: scaleY(0.04); filter: brightness(2); }
  55% { transform: scaleY(0.04); opacity: 0.2; }
}

/* 💣 폭발 — 흰 섬광과 고리 · 덩이 바로 뒤의 제목 줄이 크게 흔들린다(재해다). 섬광은 한 번뿐, 어두운 화면에서는 밝기만. */
#readerContent .reader-content-inner > p[data-prose-situation="bomb"] {
  isolation: isolate;
}

#readerContent .reader-content-inner > p[data-prose-situation="bomb"]:is([data-prose-group-role="start"], [data-prose-group-role="solo"])::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1em;
  height: 1em;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  border-radius: 50%;
  border: 1.2px solid currentColor;
  transform: translate(-50%, -50%) scale(0.2);
}

#readerContent .reader-content-inner > p[data-prose-situation="bomb"]:is([data-prose-group-role="start"], [data-prose-group-role="solo"]).is-reached::after {
  animation: prose-ring 1.1s ease-out 1;
}

#readerContent .reader-content-inner > p[data-prose-situation="bomb"]:is([data-prose-group-role="start"], [data-prose-group-role="solo"]).is-reached::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background: #ffffff;
  animation: prose-flash 0.6s ease-out 1 both;
}

html[data-theme="dark"] #readerContent .reader-content-inner > p[data-prose-situation="bomb"]:is([data-prose-group-role="start"], [data-prose-group-role="solo"]).is-reached::before {
  background: rgba(255, 250, 236, 0.38);
}

#readerContent .reader-content-inner > p[data-prose-situation="bomb"]:is([data-prose-group-role="end"], [data-prose-group-role="solo"]).is-reached + p:is([data-prose-kind="h1"], [data-prose-kind="h2"], [data-prose-kind="h3"], [data-prose-kind="h4"]) {
  animation: prose-shake 1.2s cubic-bezier(0.37, 0, 0.63, 1) 0.15s 1;
}

/* 💧 물방울 · 눈물 — 물방울 그림 없이 줄에서 옅은 물기가 한 번 흘러내린다(미노리의 물방울 사슬). */
#readerContent .reader-content-inner > p[data-prose-situation="water"].is-reached {
  animation: prose-drip 2.6s ease 0.4s 1;
}

@keyframes prose-drip {
  0%, 100% { text-shadow: none; }
  30% { text-shadow: 0 0.2em 0.25em rgba(110, 120, 132, 0.3); }
  75% { text-shadow: 0 0.9em 0.5em rgba(110, 120, 132, 0); }
}

/* 🍽 둥근 테이블 · 🚩 깃발 — 작은 도해 · 응원판을 그리지 않는다(원칙 27 — 큰 그림은 노션 밖의 인서트 몫). 여느 문단이다. */

/* ── 9판 — 다양 · 자극 ── */

/* 🕐 한 박자 — 덤덤해서 웃긴 줄 위의 빈 박 하나(여백만 — 점은 그리지 않는다). 글자는 처음부터 보인다. */
#readerContent .reader-content-inner > p[data-prose-situation="clock"] {
  margin-block-start: 2.1em;
}

/* 🎆 터진다 — 폭소 · 속에서 터지는 폭죽: 줄의 양끝에서 작은 불꽃이 한 번 터진다. */
#readerContent .reader-content-inner > p[data-prose-situation="fireworks"] {
  isolation: isolate;
}

#readerContent .reader-content-inner > p[data-prose-situation="fireworks"]::before,
#readerContent .reader-content-inner > p[data-prose-situation="fireworks"]::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 2.4em;
  height: 2.4em;
  margin-top: -1.2em;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  border-radius: 50%;
  background: repeating-conic-gradient(var(--prose-who-speck) 0 7deg, transparent 7deg 30deg, var(--prose-who-jangjeong) 30deg 37deg, transparent 37deg 60deg);
  -webkit-mask: radial-gradient(circle, transparent 28%, #000 32%, #000 50%, transparent 52%);
  mask: radial-gradient(circle, transparent 28%, #000 32%, #000 50%, transparent 52%);
}

#readerContent .reader-content-inner > p[data-prose-situation="fireworks"]::before {
  left: 0.25em;
}

#readerContent .reader-content-inner > p[data-prose-situation="fireworks"]::after {
  right: 0.25em;
}

#readerContent .reader-content-inner > p[data-prose-situation="fireworks"].is-reached::before,
#readerContent .reader-content-inner > p[data-prose-situation="fireworks"].is-reached::after {
  animation: prose-spark 1.2s ease-out 1;
}

#readerContent .reader-content-inner > p[data-prose-situation="fireworks"].is-reached::after {
  animation-delay: 0.15s;
}

@keyframes prose-spark {
  0% { opacity: 0; transform: scale(0.2); }
  30% { opacity: 0.9; }
  100% { opacity: 0; transform: scale(1.2); }
}

/* 🔀 이름이 뒤섞인다 — 틀리게 부른 이름 조각만 글자마다 한 번 뒤섞였다 자리를 찾는다(줄 전체가 아니다). */
#readerContent .prose-fx[data-prose-fx^="shf"] {
  display: inline-block;
}

#readerContent .prose-fx[data-prose-fx="shf0"] {
  --k: 0;
}

#readerContent .prose-fx[data-prose-fx="shf1"] {
  --k: 1;
}

#readerContent .prose-fx[data-prose-fx="shf2"] {
  --k: 2;
}

#readerContent .prose-fx[data-prose-fx="shf3"] {
  --k: 3;
}

#readerContent .prose-fx[data-prose-fx="shf4"] {
  --k: 4;
}

#readerContent .prose-fx[data-prose-fx="shf5"] {
  --k: 5;
}

#readerContent .prose-fx[data-prose-fx="shf6"] {
  --k: 6;
}

#readerContent .prose-fx[data-prose-fx="shf7"] {
  --k: 7;
}

#readerContent .prose-fx[data-prose-fx="shf8"] {
  --k: 8;
}

#readerContent .prose-fx[data-prose-fx="shf9"] {
  --k: 9;
}


#readerContent .reader-content-inner > p.is-reached .prose-fx[data-prose-fx^="shf"] {
  animation: prose-shuffle 0.9s ease-out 1;
  animation-delay: calc(var(--k, 0) * 0.05s);
}

@keyframes prose-shuffle {
  0%, 100% { transform: none; }
  30% { transform: translate(calc((var(--k, 0) - 1.5) * -6px), -5px) rotate(-12deg); }
  60% { transform: translate(calc((var(--k, 0) - 1.5) * 4px), 3px) rotate(8deg); }
}

/* 📼 90년대 — 바랜 화면 · 주사선 · 트래킹 한 번. 게임기면 호박빛 브라운관, 빛바랜 표지면 바랜 인쇄의 망점. */
#readerContent .reader-content-inner > p[data-prose-situation="cassette"] {
  --situation-bg: #ece2cb;
  --situation-border: 0 solid transparent;
  --situation-radius: 0.2em;
  color: #3b3226;
  isolation: isolate;
  overflow: clip;
}

html[data-theme="dark"] #readerContent .reader-content-inner > p[data-prose-situation="cassette"] {
  --situation-bg: #2c2720;
  color: #e3d7bd;
}

#readerContent .reader-content-inner > p[data-prose-situation="cassette"]:not([data-prose-variant])::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.06) 0 1px, transparent 1px 3px);
}

#readerContent .reader-content-inner > p[data-prose-situation="cassette"]:not([data-prose-variant]).is-reached {
  animation: prose-tracking 1.4s steps(5, end) 1;
}

@keyframes prose-tracking {
  0% { transform: translateX(0) skewX(0deg); text-shadow: none; }
  20% { transform: translateX(-4px) skewX(-4deg); text-shadow: -2px 0 rgba(220, 60, 60, 0.45), 2px 0 rgba(40, 120, 220, 0.45); }
  40% { transform: translateX(3px); }
  60% { transform: translateX(-2px) skewX(2deg); text-shadow: 1px 0 rgba(220, 60, 60, 0.4), -1px 0 rgba(40, 120, 220, 0.4); }
  100% { transform: none; text-shadow: none; }
}

#readerContent .reader-content-inner > p[data-prose-situation="cassette"][data-prose-variant="crt"] {
  --situation-bg: #140f0a;
  --situation-radius: 1.2em;
  color: #ffd9a0;
  background-image: radial-gradient(ellipse 120% 100% at 50% 45%, #2a2016, #120d08 72%, #070504);
  text-shadow: 0 0 0.35em rgba(255, 190, 110, 0.75), -1px 0 rgba(255, 80, 60, 0.35), 1px 0 rgba(80, 160, 255, 0.3);
}

#readerContent .reader-content-inner > p[data-prose-situation="cassette"][data-prose-variant="crt"]::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.32) 0 1px, transparent 1px 3px);
}

#readerContent .reader-content-inner > p[data-prose-situation="cassette"][data-prose-variant="crt"].is-reached {
  animation: prose-crt-on 1.1s cubic-bezier(0.2, 0.8, 0.2, 1) 1;
}

@keyframes prose-crt-on {
  0% { filter: brightness(0); transform: scaleY(0.02); }
  18% { filter: brightness(2.4); transform: scaleY(0.04); }
  40% { filter: brightness(1.4); transform: none; }
  100% { filter: brightness(1); transform: none; }
}

#readerContent .reader-content-inner > p[data-prose-situation="cassette"][data-prose-variant="sleeve"] {
  --situation-bg: transparent;
  --situation-border: 0 solid transparent;
  color: inherit;
  padding: 0;
  overflow: visible;
  text-indent: var(--reader-paragraph-indent, 0);
}

#readerContent .reader-content-inner > p[data-prose-situation="cassette"][data-prose-variant="sleeve"]::before {
  content: "";
  position: absolute;
  inset: -0.45em 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(circle at 1px 1px, rgba(120, 92, 52, 0.22) 0.7px, transparent 1.1px) 0 0 / 4px 4px,
    linear-gradient(180deg, rgba(236, 220, 188, 0.5), rgba(228, 208, 170, 0.42));
}

html[data-theme="dark"] #readerContent .reader-content-inner > p[data-prose-situation="cassette"][data-prose-variant="sleeve"]::before {
  background:
    radial-gradient(circle at 1px 1px, rgba(255, 230, 190, 0.12) 0.7px, transparent 1.1px) 0 0 / 4px 4px,
    linear-gradient(180deg, rgba(90, 72, 48, 0.4), rgba(70, 56, 38, 0.34));
}

#readerContent .reader-content-inner > p[data-prose-situation="cassette"][data-prose-variant="sleeve"].is-reached::before {
  animation: prose-sleeve 4.4s ease 0.3s 1;
}

#readerContent .reader-content-inner > p[data-prose-situation="cassette"][data-prose-variant="sleeve"].is-reached {
  animation: prose-sleeve-ink 4.4s ease 0.3s 1;
}

@keyframes prose-sleeve {
  0%, 100% { opacity: 0; }
  28%, 72% { opacity: 1; }
}

@keyframes prose-sleeve-ink {
  0%, 100% { filter: none; }
  28%, 72% { filter: sepia(0.55) contrast(0.9) saturate(0.85); }
}

/* 🔁 뒤집어진다 — 모두가 웃음에 뒤집어진다: 줄이 뒤로 넘어갔다 넘침 없이 돌아온다. */
#readerContent .reader-content-inner > p[data-prose-situation="refresh"].is-reached {
  animation: prose-rock 1.1s cubic-bezier(0.45, 0, 0.55, 1) 1;
}

@keyframes prose-rock {
  0%, 100% { transform: perspective(500px) rotateX(0deg); }
  40% { transform: perspective(500px) rotateX(-34deg) translateY(-2px); }
}

/* ☕ 잔이 출렁 — 쏟을 뻔한 잔: 줄이 잔처럼 한 번 기울었다 돌아온다. */
#readerContent .reader-content-inner > p[data-prose-situation="coffee"] {
  transform-origin: 50% 100%;
}

#readerContent .reader-content-inner > p[data-prose-situation="coffee"].is-reached {
  animation: prose-tilt 1.1s ease-in-out 1;
}

@keyframes prose-tilt {
  0%, 100% { transform: none; }
  35% { transform: rotate(-1.6deg); }
}

/* ⬇ 내려앉는다 — 지면이 적은 박자만: 줄이 한 박자 늦게 툭 내려앉았다 천천히 돌아온다(그림 없이). */
#readerContent .reader-content-inner > p[data-prose-situation="arrow-down"].is-reached {
  animation: prose-sag 1.9s ease 1;
}

@keyframes prose-sag {
  0%, 30%, 100% { transform: none; }
  42% { transform: translateY(5px) skewY(0.5deg); }
}

/* 🎥 극장 — 작중 영화의 제목 카드: 어두운 극장, 스크린 빛 속에 줄이 한 번 선다. */
#readerContent .reader-content-inner > p[data-prose-situation="video-camera"] {
  --situation-bg: #0a0908;
  --situation-border: 0 solid transparent;
  --situation-radius: 0.3em;
  padding: 1.3em 1.1em 1.05em;
  color: #eeeae2;
  text-align: center;
  letter-spacing: 0.06em;
  text-shadow: 0 0 0.8em rgba(255, 236, 200, 0.35);
  background-image: radial-gradient(ellipse 120% 90% at 50% 120%, #1b1916, #0a0908 70%);
  isolation: isolate;
  overflow: clip;
}

#readerContent .reader-content-inner > p[data-prose-situation="video-camera"]::after {
  content: "";
  position: absolute;
  left: 50%;
  top: -30%;
  width: 100%;
  height: 160%;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  transform: translateX(-50%);
  background: radial-gradient(ellipse 40% 60% at 50% 0, rgba(255, 240, 200, 0.25), transparent 70%);
  transition: opacity 1.6s ease;
}

#readerContent .reader-content-inner > p[data-prose-situation="video-camera"]:is(.is-reached, .is-reach-done)::after {
  opacity: 1;
}

#readerContent .reader-content-inner > p[data-prose-situation="video-camera"].is-reached::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.13;
  mix-blend-mode: screen;
  background: url("/situations/grain.webp?av=3d7a82f0c28b") 0 0 / 160px 160px;
  animation: prose-film-grain 0.5s steps(4, end) 8;
}

@keyframes prose-film-grain {
  0% { background-position: 0 0; }
  25% { background-position: -40px 20px; }
  50% { background-position: 30px -30px; }
  75% { background-position: -10px 45px; }
}

/* ── 10판 — 자극 · 재미의 밀도 ── */

/* ✂ 표정이 멈춘다 — 정지 화면(가는 틀 · 흑백 · 결)이 한 박자 걸렸다 풀린다. 흰 섬광은 쓰지 않는다. */
#readerContent .reader-content-inner > p[data-prose-situation="crop"]::before {
  content: "";
  position: absolute;
  inset: -0.25em 0;
  pointer-events: none;
  opacity: 0;
  border: 1px solid color-mix(in srgb, var(--reader-ink, #141414) 55%, transparent);
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.035) 0 1px, transparent 1px 3px);
}

#readerContent .reader-content-inner > p[data-prose-situation="crop"].is-reached::before {
  animation: prose-frame 1.9s ease 0.3s 1;
}

#readerContent .reader-content-inner > p[data-prose-situation="crop"].is-reached {
  animation: prose-freeze 1.9s ease 0.3s 1;
}

@keyframes prose-frame {
  0% { opacity: 0; transform: scale(1.02); }
  10% { opacity: 1; transform: none; }
  80% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes prose-freeze {
  0%, 100% { filter: none; }
  10%, 80% { filter: grayscale(1) contrast(1.15); }
}

/* 🪄 주문 · 부정 — 주문은 반짝이가 터지고, 부정은 떨어지되 끝 줄에 하나가 남는다. 우주의 틈 · 비단 자락은 그 줄의 사물. */
#readerContent .reader-content-inner > p[data-prose-situation="magic-wand"] {
  isolation: isolate;
}

#readerContent .reader-content-inner > p[data-prose-situation="magic-wand"]:is([data-prose-group-role="start"], [data-prose-group-role="solo"])::before {
  content: "";
  position: absolute;
  inset: -0.6em 0 auto;
  height: 7em;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
}

#readerContent .reader-content-inner > p[data-prose-situation="magic-wand"]:is(:not([data-prose-variant]), [data-prose-variant="deny"], [data-prose-variant="veil"]):is([data-prose-group-role="start"], [data-prose-group-role="solo"]).is-reached::before {
  background: url("/situations/glitter.webp?av=c3a55dd7431c") center / cover no-repeat;
}

#readerContent .reader-content-inner > p[data-prose-situation="magic-wand"]:not([data-prose-variant]):is([data-prose-group-role="start"], [data-prose-group-role="solo"]).is-reached::before,
#readerContent .reader-content-inner > p[data-prose-situation="magic-wand"][data-prose-variant="veil"]:is([data-prose-group-role="start"], [data-prose-group-role="solo"]).is-reached::before {
  animation: prose-glitter-burst 1.6s cubic-bezier(0.2, 0.7, 0.3, 1) 0.3s 1;
}

#readerContent .reader-content-inner > p[data-prose-situation="magic-wand"][data-prose-variant="deny"]:is([data-prose-group-role="start"], [data-prose-group-role="solo"]).is-reached::before {
  height: 12em;
  animation: prose-glitter-fall 4.2s cubic-bezier(0.5, 0, 0.6, 1) 0.4s 1;
}

#readerContent .reader-content-inner > p[data-prose-situation="magic-wand"][data-prose-variant="deny"]:is([data-prose-group-role="end"], [data-prose-group-role="solo"])::after {
  content: "";
  display: inline-block;
  width: 0.7em;
  height: 0.7em;
  margin-inline-start: 0.3em;
  vertical-align: 0.1em;
  opacity: 0;
  background:
    radial-gradient(circle, rgba(255, 236, 246, 1) 0 12%, rgba(255, 160, 200, 0.55) 22%, transparent 46%),
    linear-gradient(0deg, transparent 46%, rgba(255, 190, 220, 0.95) 50%, transparent 54%),
    linear-gradient(90deg, transparent 46%, rgba(255, 190, 220, 0.95) 50%, transparent 54%);
}

#readerContent .reader-content-inner > p[data-prose-situation="magic-wand"][data-prose-variant="deny"]:is([data-prose-group-role="end"], [data-prose-group-role="solo"]).is-reach-done::after {
  opacity: 0.55;
}

#readerContent .reader-content-inner > p[data-prose-situation="magic-wand"][data-prose-variant="deny"]:is([data-prose-group-role="end"], [data-prose-group-role="solo"]).is-reached::after {
  animation: prose-last-glint 2.6s ease 1.2s 1 forwards;
}

#readerContent .reader-content-inner > p[data-prose-situation="magic-wand"][data-prose-variant="slit"]::before {
  inset: -0.8em 0;
  height: auto;
  clip-path: inset(49% 0 49% 0);
}

#readerContent .reader-content-inner > p[data-prose-situation="magic-wand"][data-prose-variant="slit"].is-reached::before {
  background:
    url("/situations/glitter.webp?av=c3a55dd7431c") center / cover no-repeat,
    url("/situations/space_bg.webp?av=d18f16c6b072") center / cover no-repeat;
  animation: prose-slit 4.6s cubic-bezier(0.3, 0.1, 0.3, 1) 0.5s 1;
}

#readerContent .reader-content-inner > p[data-prose-situation="magic-wand"][data-prose-variant="slit"].is-reached {
  animation: prose-slit-halo 4.6s cubic-bezier(0.3, 0.1, 0.3, 1) 0.5s 1;
}

#readerContent .reader-content-inner > p[data-prose-situation="magic-wand"]:is([data-prose-variant="silk"], [data-prose-variant="veil"])::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 4.2em;
  margin-top: -2.1em;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
}

#readerContent .reader-content-inner > p[data-prose-situation="magic-wand"]:is([data-prose-variant="silk"], [data-prose-variant="veil"]):is([data-prose-group-role="start"], [data-prose-group-role="solo"]).is-reached::after {
  background: url("/situations/silk.webp?av=2d828bf4808f") center / 100% 100% no-repeat;
  animation: prose-silk 4.6s cubic-bezier(0.45, 0.05, 0.35, 1) 0.3s 1;
}

#readerContent .reader-content-inner > p[data-prose-situation="magic-wand"][data-prose-variant="veil"]:is([data-prose-group-role="start"], [data-prose-group-role="solo"]).is-reached::after {
  animation-duration: 4.2s;
  animation-delay: 1.4s;
}

@keyframes prose-glitter-burst {
  0% { opacity: 0; transform: scale(0.6); }
  25% { opacity: 1; transform: scale(1.02); }
  100% { opacity: 0; transform: scale(1.05); }
}

@keyframes prose-glitter-fall {
  0% { opacity: 0.75; transform: none; }
  100% { opacity: 0; transform: translateY(38%); }
}

@keyframes prose-last-glint {
  0% { opacity: 0; transform: scale(0.4); }
  30% { opacity: 1; transform: scale(1) rotate(20deg); }
  55% { opacity: 0.5; transform: scale(0.9); }
  80% { opacity: 0.9; transform: scale(1); }
  100% { opacity: 0.55; transform: scale(0.85) rotate(45deg); }
}

@keyframes prose-slit {
  0% { opacity: 0; clip-path: inset(49% 0 49% 0); }
  10% { opacity: 1; clip-path: inset(47% 0 47% 0); }
  35% { clip-path: inset(18% 0 18% 0); }
  70% { opacity: 1; clip-path: inset(30% 0 30% 0); }
  100% { opacity: 0; clip-path: inset(49% 0 49% 0); }
}

@keyframes prose-slit-halo {
  0%, 100% { text-shadow: none; }
  10%, 70% { text-shadow: 0 0 0.12em var(--paper), 0 0 0.3em var(--paper), 0 0 0.6em var(--paper); }
}

@keyframes prose-silk {
  0% { opacity: 0; transform: translateX(-46%) skewY(-3deg) scaleY(0.8); }
  18% { opacity: 0.85; }
  45% { transform: translateX(0) skewY(2deg) scaleY(1.04); }
  72% { opacity: 0.75; transform: translateX(26%) skewY(-1.5deg) scaleY(0.95); }
  100% { opacity: 0; transform: translateX(48%) skewY(0deg) scaleY(0.9); }
}

/* 🔎 검색창 — 검색창 그림 없이 그 줄이 검색어를 치듯 한 글자씩 들어온다. */
#readerContent .reader-content-inner > p[data-prose-situation="search"].is-reached {
  animation: prose-typing 1.4s steps(26, end) 0.2s 1 both;
}

@keyframes prose-typing {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0 0 0 0); }
}

/* 🔦 조명 · 등장 — 위에서 원뿔 조명이 그 줄을 비추고 둘레가 어두워진다(무대 · 시험대 위 · 모습을 드러낸다). */
#readerContent .reader-content-inner > p[data-prose-situation="flashlight"] {
  isolation: isolate;
}

#readerContent .reader-content-inner > p[data-prose-situation="flashlight"]::before {
  content: "";
  position: absolute;
  inset: -55vh 0 -1em;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(ellipse 34% 3.2em at 50% calc(100% - 1.4em), rgba(255, 236, 190, 0) 55%, rgba(14, 10, 6, 0.28) 100%),
    conic-gradient(from 168deg at 50% 0, transparent 0deg, rgba(255, 236, 190, 0.28) 6deg, rgba(255, 236, 190, 0.28) 18deg, transparent 24deg);
  -webkit-mask: radial-gradient(ellipse 60% 100% at 50% 100%, #000 50%, transparent 100%);
  mask: radial-gradient(ellipse 60% 100% at 50% 100%, #000 50%, transparent 100%);
}

#readerContent .reader-content-inner > p[data-prose-situation="flashlight"].is-reached::before {
  animation: prose-spot 3.6s ease 1;
}

@keyframes prose-spot {
  0% { opacity: 0; }
  18%, 70% { opacity: 1; }
  100% { opacity: 0; }
}

/* 👞 발소리 — 둔한 울림 세 번이 점점 가까워진다(줄이 한 번씩 내려앉는다). 한 걸음 — 줄이 한 걸음씩 앞으로 옮겨 디딘다. */
#readerContent .reader-content-inner > p[data-prose-situation="shoe"][data-prose-variant="step"].is-reached {
  animation: prose-steps 1.9s ease-in 0.2s 1;
}

#readerContent .reader-content-inner > p[data-prose-situation="shoe"][data-prose-variant="pace"]:is([data-prose-group-role="start"], [data-prose-group-role="solo"]).is-reached {
  animation: prose-pace 0.6s ease-in-out 0.3s 1;
}

#readerContent .reader-content-inner > p[data-prose-situation="shoe"][data-prose-variant="pace"][data-prose-group-role="end"].is-reached {
  animation: prose-pace 0.6s ease-in-out 1s 1;
}

@keyframes prose-steps {
  0%, 12%, 49%, 86%, 100% { transform: none; }
  8% { transform: translateY(1px); }
  44% { transform: translateY(2px); }
  80% { transform: translateY(3px); }
}

@keyframes prose-pace {
  0%, 100% { transform: none; }
  45% { transform: translate(5px, -2px); }
}

/* 🚕 밤 택시 — 창밖의 불빛이 줄 위를 몇 번 지나가며 느려진다(주황 가로등 빛). */
#readerContent .reader-content-inner > p[data-prose-situation="taxi"] {
  isolation: isolate;
}

#readerContent .reader-content-inner > p[data-prose-situation="taxi"]::before {
  content: "";
  position: absolute;
  inset: -0.2em 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  mix-blend-mode: multiply;
  background: linear-gradient(100deg, transparent 30%, rgba(255, 168, 72, 0.3) 42%, rgba(255, 192, 104, 0.44) 50%, rgba(255, 168, 72, 0.3) 58%, transparent 70%) 180% 0 / 60% 100% no-repeat;
}

html[data-theme="dark"] #readerContent .reader-content-inner > p[data-prose-situation="taxi"]::before {
  mix-blend-mode: screen;
  background-image: linear-gradient(100deg, transparent 30%, rgba(255, 150, 50, 0.2) 42%, rgba(255, 176, 86, 0.3) 50%, rgba(255, 150, 50, 0.2) 58%, transparent 70%);
}

#readerContent .reader-content-inner > p[data-prose-situation="taxi"].is-reached::before {
  animation: prose-streetlight 4.2s linear 0.2s 1;
}

@keyframes prose-streetlight {
  0% { opacity: 0; background-position: 180% 0; }
  3% { opacity: 1; }
  16% { background-position: -150% 0; }
  16.01% { background-position: 180% 0; }
  36% { background-position: -150% 0; }
  36.01% { background-position: 180% 0; }
  63% { background-position: -150% 0; }
  63.01% { background-position: 180% 0; }
  97% { opacity: 1; }
  100% { opacity: 0; background-position: -150% 0; }
}

/* 🔥 불타오른다 — 줄 뒤로 불길이 일렁였다 스러진다. 불이 붙어 있다 — 그 줄의 불빛이 일렁이다 훅 꺼진다. */
#readerContent .reader-content-inner > p[data-prose-situation="fire"] {
  isolation: isolate;
}

#readerContent .reader-content-inner > p[data-prose-situation="fire"][data-prose-variant="blaze"]::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: -0.25em;
  height: 2.4em;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  transform-origin: 50% 100%;
}

html[data-theme="dark"] #readerContent .reader-content-inner > p[data-prose-situation="fire"][data-prose-variant="blaze"]::before {
  mix-blend-mode: screen;
}

#readerContent .reader-content-inner > p[data-prose-situation="fire"][data-prose-variant="blaze"].is-reached::before {
  background: url("/situations/flame.webp?av=2733efa71eb1") center / 100% 100% no-repeat;
  animation: prose-flame 2.8s ease-in-out 0.4s 1;
}

#readerContent .reader-content-inner > p[data-prose-situation="fire"][data-prose-variant="ember"]:is([data-prose-group-role="start"], [data-prose-group-role="solo"]).is-reached {
  animation: prose-ember 0.36s ease-in-out 0.3s 8 alternate both, prose-ember-out 1s ease-in 3.2s 1 forwards;
}

@keyframes prose-flame {
  0% { opacity: 0; transform: scaleY(0.3); }
  15% { opacity: 0.85; transform: scaleY(1.04); }
  30% { transform: scaleY(0.9) skewX(2deg); }
  45% { opacity: 0.9; transform: scaleY(1.05) skewX(-2deg); }
  62% { transform: scaleY(0.95) skewX(1deg); }
  80% { opacity: 0.6; transform: scaleY(1); }
  100% { opacity: 0; transform: scaleY(0.6); }
}

@keyframes prose-ember {
  0% { text-shadow: 0 -0.06em 0.3em rgba(240, 130, 30, 0.5); }
  100% { text-shadow: 0 -0.12em 0.45em rgba(255, 165, 50, 0.75); }
}

@keyframes prose-ember-out {
  0% { text-shadow: 0 -0.1em 0.4em rgba(255, 150, 50, 0.7); }
  100% { text-shadow: 0.6em -0.5em 0.9em rgba(150, 150, 150, 0); }
}

/* 💎 보석처럼 반짝인다 — 줄 뒤로 따뜻한 빛의 반짝임이 깜박이다 스러진다(제 줄 안에서 — 이웃 줄 글자 위로 넘지 않는다). */
#readerContent .reader-content-inner > p[data-prose-situation="gem"] {
  isolation: isolate;
}

#readerContent .reader-content-inner > p[data-prose-situation="gem"]::before,
#readerContent .reader-content-inner > p[data-prose-situation="gem"]::after {
  content: "";
  position: absolute;
  inset: -0.45em 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
}

html[data-theme="dark"] #readerContent .reader-content-inner > p[data-prose-situation="gem"]::before,
html[data-theme="dark"] #readerContent .reader-content-inner > p[data-prose-situation="gem"]::after {
  mix-blend-mode: screen;
}

#readerContent .reader-content-inner > p[data-prose-situation="gem"].is-reached::before,
#readerContent .reader-content-inner > p[data-prose-situation="gem"].is-reached::after {
  background: url("/situations/glints.webp?av=7710bb3bd321") center / cover no-repeat;
}

#readerContent .reader-content-inner > p[data-prose-situation="gem"].is-reached::before {
  animation: prose-glints-a 1.35s ease-in-out 0.3s 4 alternate;
}

#readerContent .reader-content-inner > p[data-prose-situation="gem"].is-reached::after {
  transform: scaleX(-1) translateY(6%);
  animation: prose-glints-b 1.35s ease-in-out 0.3s 4 alternate;
}

@keyframes prose-glints-a {
  from { opacity: 1; }
  to { opacity: 0.2; }
}

@keyframes prose-glints-b {
  from { opacity: 0.05; }
  to { opacity: 0.95; }
}

/* ◻ 조여 온다 — 공기 · 거리가 조밀해진다: 화면 가장자리가 안쪽으로 조여 왔다 풀린다. */
#readerContent .reader-content-inner > p[data-prose-situation="square"].is-reached::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  animation: prose-squeeze 3.2s ease-in-out 1 both;
}

@keyframes prose-squeeze {
  0%, 100% { box-shadow: inset 0 0 0 0 rgba(20, 15, 10, 0); }
  45% { box-shadow: inset 0 0 0 9vmin rgba(20, 15, 10, 0.18), inset 0 0 18vmin 10vmin rgba(20, 15, 10, 0.32); }
}

/* 🏃 뛰어간다 — 덤덤한 서술 속의 질주: 줄이 한 번 움츠렸다 바람을 끌며 앞으로 튀어 나갔다 넘침 없이 돌아온다. */
#readerContent .reader-content-inner > p[data-prose-situation="run"] {
  isolation: isolate;
}

#readerContent .reader-content-inner > p[data-prose-situation="run"]::after {
  content: "";
  position: absolute;
  left: 0;
  top: 10%;
  bottom: 10%;
  width: 62%;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  filter: blur(3px);
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--reader-ink, #141414) 20%, transparent) 65%, transparent);
}

#readerContent .reader-content-inner > p[data-prose-situation="run"].is-reached {
  animation: prose-dash 1.3s cubic-bezier(0.5, 0, 0.3, 1) 0.25s 1;
}

#readerContent .reader-content-inner > p[data-prose-situation="run"].is-reached::after {
  animation: prose-dash-streak 1.3s ease 0.25s 1;
}

@keyframes prose-dash {
  0%, 100% { transform: none; filter: none; }
  18% { transform: translateX(-4px) skewX(3deg); }
  40% { transform: translateX(1.6em) skewX(-10deg); filter: blur(1px); }
  58% { transform: translateX(0.9em) skewX(-4deg); filter: blur(0.3px); }
}

@keyframes prose-dash-streak {
  0%, 30% { opacity: 0; transform: translateX(-20%); }
  45% { opacity: 1; }
  100% { opacity: 0; transform: translateX(70%); }
}

/* 🥤 탄산 — 거품 줄기가 줄을 타고 올라 스러진다(제 줄 안에서 옅게). */
#readerContent .reader-content-inner > p[data-prose-situation="drink"] {
  isolation: isolate;
}

#readerContent .reader-content-inner > p[data-prose-situation="drink"].is-reached {
  overflow: clip;
  overflow-clip-margin: 0.2em;
}

#readerContent .reader-content-inner > p[data-prose-situation="drink"]::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
}

#readerContent .reader-content-inner > p[data-prose-situation="drink"].is-reached::before {
  background: url("/situations/fizz.webp?av=94106daf1e8a") center / cover no-repeat;
  filter: brightness(0.5) contrast(1.8);
  animation: prose-fizz 2.9s cubic-bezier(0.3, 0.1, 0.4, 1) 0.3s 1;
}

html[data-theme="dark"] #readerContent .reader-content-inner > p[data-prose-situation="drink"].is-reached::before {
  filter: none;
}

@keyframes prose-fizz {
  0% { opacity: 0; transform: translateY(38%); }
  15% { opacity: 0.55; }
  75% { opacity: 0.45; }
  100% { opacity: 0; transform: translateY(-46%); }
}

/* ⭐ 희망 — 문장 그림 없이 그 줄에 따뜻한 금빛이 번진다(장정의 처음 보는 진짜 웃음). */
#readerContent .reader-content-inner > p[data-prose-situation="star"].is-reached {
  animation: prose-warm 3.2s ease 0.4s 1;
}

@keyframes prose-warm {
  0%, 100% { text-shadow: none; }
  40%, 65% { text-shadow: 0 0 0.4em rgba(226, 172, 52, 0.55), 0 0 1em rgba(226, 172, 52, 0.22); }
}

/* ☂ 한 우산 아래 — 줄 뒤로 소나기가 곧게 내리다 몇 초 뒤 멎는다. 🌧 가는 비 — 성기게. 🚿 샤워기 아래 — 물줄기와 김. */
#readerContent .reader-content-inner > p:is([data-prose-situation="umbrella"], [data-prose-situation="rain"], [data-prose-situation="shower"]) {
  isolation: isolate;
}

#readerContent .reader-content-inner > p:is([data-prose-situation="umbrella"], [data-prose-situation="rain"], [data-prose-situation="shower"])::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
}

#readerContent .reader-content-inner > p[data-prose-situation="umbrella"].is-reached::before {
  background: url("/situations/rain_v.webp?av=56a9cff8dab8") 0 0 / 240px 240px repeat;
  animation: prose-rain-in 1.4s ease 0.2s 1 forwards, prose-rain-fall 0.5s linear 0.2s 12, prose-rain-out 1.6s ease 4.6s 1 forwards;
}

#readerContent .reader-content-inner > p[data-prose-situation="rain"].is-reached::before {
  background: url("/situations/rain.webp?av=423a9c9b4f47") 0 0 / 300px 300px repeat;
  animation: prose-rain-soft 2.4s ease 0.2s 1 forwards, prose-rain-fall-soft 0.9s linear 0.2s 8, prose-rain-out 1.6s ease 7.4s 1 forwards;
}

#readerContent .reader-content-inner > p[data-prose-situation="shower"].is-reached::before {
  background: url("/situations/rain.webp?av=423a9c9b4f47") 0 0 / 160px 160px repeat;
  transform: skewX(12deg);
  animation: prose-rain-in 1.6s ease 0.2s 1 forwards, prose-shower-fall 0.32s linear 0.2s 18, prose-rain-out 1.6s ease 5.8s 1 forwards;
}

#readerContent .reader-content-inner > p[data-prose-situation="shower"][data-prose-group-role="start"]::after,
#readerContent .reader-content-inner > p[data-prose-situation="shower"][data-prose-group-role="solo"]::after {
  content: "";
  position: absolute;
  inset: -0.6em 0 40%;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(180deg, rgba(235, 240, 246, 0.55), transparent);
  transition: opacity 6s ease 0.4s;
}

html[data-theme="dark"] #readerContent .reader-content-inner > p[data-prose-situation="shower"]::after {
  background: linear-gradient(180deg, rgba(200, 210, 225, 0.16), transparent);
}

#readerContent .reader-content-inner > p[data-prose-situation="shower"]:is(.is-reached, .is-reach-done)::after {
  opacity: 1;
}

@keyframes prose-rain-in {
  0% { opacity: 0; }
  100% { opacity: 0.62; }
}

@keyframes prose-rain-soft {
  0% { opacity: 0; }
  100% { opacity: 0.45; }
}

@keyframes prose-rain-out {
  0% { opacity: 0.62; }
  100% { opacity: 0; }
}

@keyframes prose-rain-fall {
  from { background-position: 0 0; }
  to { background-position: 0 240px; }
}

@keyframes prose-rain-fall-soft {
  from { background-position: 0 0; }
  to { background-position: 51px 300px; }
}

@keyframes prose-shower-fall {
  from { background-position: 0 0; }
  to { background-position: 0 160px; }
}

/* ⚠ 방사능 인간 — 수장의 농담: 줄 뒤로 노란 경고의 빛이 한 번 맥박친다(깜빡임은 한 번). */
#readerContent .reader-content-inner > p[data-prose-situation="warning"] {
  isolation: isolate;
}

#readerContent .reader-content-inner > p[data-prose-situation="warning"]::before {
  content: "";
  position: absolute;
  inset: -0.4em 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(ellipse 60% 90% at 50% 50%, rgba(255, 206, 40, 0.42), rgba(255, 206, 40, 0.1) 60%, transparent 80%);
}

html[data-theme="dark"] #readerContent .reader-content-inner > p[data-prose-situation="warning"]::before {
  background: radial-gradient(ellipse 60% 90% at 50% 50%, rgba(255, 206, 40, 0.22), rgba(255, 206, 40, 0.06) 60%, transparent 80%);
}

#readerContent .reader-content-inner > p[data-prose-situation="warning"].is-reached::before {
  animation: prose-warn-glow 2.2s ease 0.3s 1;
}

#readerContent .reader-content-inner > p[data-prose-situation="warning"].is-reached {
  animation: prose-warn 2.2s ease 0.3s 1;
}

@keyframes prose-warn-glow {
  0%, 100% { opacity: 0; }
  40% { opacity: 1; }
}

@keyframes prose-warn {
  0%, 100% { text-shadow: none; }
  40% { text-shadow: 0 0 0.35em rgba(255, 190, 40, 0.55); }
}

/* 🌈 파스텔의 세계 — 정화가 가져본 적 없는 촌스럽도록 찬란한 파스텔빛: 줄 뒤로 번지고 반짝이가 천천히 떠오른다. */
#readerContent .reader-content-inner > p[data-prose-situation="rainbow"] {
  isolation: isolate;
}

#readerContent .reader-content-inner > p[data-prose-situation="rainbow"]::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  filter: blur(6px);
  background: linear-gradient(100deg, rgba(255, 182, 206, 0.38), rgba(255, 214, 176, 0.3) 30%, rgba(190, 220, 255, 0.32) 62%, rgba(255, 240, 170, 0.3));
}

html[data-theme="dark"] #readerContent .reader-content-inner > p[data-prose-situation="rainbow"]::before {
  background: linear-gradient(100deg, rgba(255, 150, 190, 0.2), rgba(255, 190, 150, 0.16) 30%, rgba(150, 190, 255, 0.18) 62%, rgba(255, 230, 140, 0.16));
}

#readerContent .reader-content-inner > p[data-prose-situation="rainbow"].is-reached::before {
  animation: prose-pastel 6s ease 0.3s 1;
}

#readerContent .reader-content-inner > p[data-prose-situation="rainbow"]:is([data-prose-group-role="start"], [data-prose-group-role="solo"])::after {
  content: "";
  position: absolute;
  inset: -0.4em 0 auto;
  height: 8em;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
}

#readerContent .reader-content-inner > p[data-prose-situation="rainbow"]:is([data-prose-group-role="start"], [data-prose-group-role="solo"]).is-reached::after {
  background: url("/situations/glitter.webp?av=c3a55dd7431c") center / cover no-repeat;
  animation: prose-pastel-glitter 6s ease 0.3s 1;
}

@keyframes prose-pastel {
  0%, 100% { opacity: 0; }
  18%, 70% { opacity: 1; }
}

@keyframes prose-pastel-glitter {
  0% { opacity: 0; transform: translateY(6%); }
  20% { opacity: 0.9; }
  70% { opacity: 0.75; }
  100% { opacity: 0; transform: translateY(-8%); }
}

/* 📖 읽히기 시작한다 — 낯선 글자가 한 덩어리로 흐리게 섰다가 낱자로 또렷해진다(자간은 그대로 — 줄 수가 바뀌지 않게). */
#readerContent .reader-content-inner > p[data-prose-situation="book"] {
  transition: filter 1.9s cubic-bezier(0.4, 0, 0.2, 1) 0.5s, opacity 1.2s ease 0.5s;
}

#readerContent .reader-content-inner > p[data-prose-situation="book"].is-reach-pending {
  filter: blur(1.3px);
  opacity: 0.8;
}

/* ♨ 김이 피어오른다 — 가는 김 세 줄기가 그 줄 위 여백(문단 사이)으로 희미하게 피어올라 스러진다(앞 줄 글자에 닿지 않게). */
#readerContent .reader-content-inner > p[data-prose-situation="pot"] {
  isolation: isolate;
}

#readerContent .reader-content-inner > p[data-prose-situation="pot"]::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: -1.3em;
  bottom: calc(100% - 0.45em);
  z-index: -1;
  pointer-events: none;
  opacity: 0;
}

#readerContent .reader-content-inner > p[data-prose-situation="pot"].is-reached::before {
  background: url("/situations/steam_veil.webp?av=099db683b8a0") center / 100% 100% no-repeat;
  filter: brightness(0.8) contrast(1.1);
  animation: prose-steam 5.4s ease-out 0.4s 1;
}

html[data-theme="dark"] #readerContent .reader-content-inner > p[data-prose-situation="pot"].is-reached::before {
  filter: none;
}

@keyframes prose-steam {
  0% { opacity: 0; transform: translateY(10%) scaleY(0.92); }
  30% { opacity: 0.8; }
  70% { opacity: 0.5; }
  100% { opacity: 0; transform: translateY(-6%) scaleY(1.04); }
}

/* ── 7~9판 표식 — 씨앗의 색은 그 자리에만 빛난다 ── */

/* 제목 회수 — 제목의 조각에 한 번 쓸리는 밑줄, 줄 전부면 제목 카드(가운데 · 넓은 자간 · 위아래 실선). */
#readerContent .prose-color[data-prose-color="brown"] {
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 94%;
  background-size: 100% 1.6px;
  transition: background-size 1.7s cubic-bezier(0.6, 0, 0.2, 1) 0.35s;
}

#readerContent .reader-content-inner > p.is-reach-pending .prose-color[data-prose-color="brown"] {
  background-size: 0 1.6px;
}

/* 제목 카드는 위아래로 한 박자 쉰다(소유자 2026-10-06 「너무 줄간격이 짧아서 애매하다」) — 본문 줄이 아니라 연출로 서도록
   카드 위아래 숨을 2.4em 으로 넓힌다 — 3em 은 데스크톱 장면(등불)의 3화 한 화면을 본문 네 줄 아래로 밀었다(연속 생애 실측
   4 → 3, 읽힘 바닥 4). 큰 글자는 줄 높이 0 인 안쪽 글자로 키우고(줄 상자는 문단의 제 높이 그대로, 좁은 폭에서는
   그대로 줄바꿈) 위아래 줄은 줄 상자 바로 밖에 긋는다. 변환으로 키우면 좁은 폭에서 문단 밖으로 샌다. */
#readerContent .reader-content-inner > p[data-prose-variant="title"] {
  position: relative;
  margin-block: 2.4em;
  text-align: center;
  text-indent: 0;
  letter-spacing: 0.16em;
  transition: opacity 1.2s ease 0.2s;
}

#readerContent .reader-content-inner > p[data-prose-variant="title"] .prose-color[data-prose-color="brown"] {
  background-image: none;
  font-size: 1.18em;
  line-height: 0;
}

#readerContent .reader-content-inner > p[data-prose-variant="title"]::before,
#readerContent .reader-content-inner > p[data-prose-variant="title"]::after {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  height: 1px;
  background: currentColor;
  opacity: 0.5;
  transition: transform 1.4s cubic-bezier(0.6, 0, 0.2, 1) 0.9s;
}

#readerContent .reader-content-inner > p[data-prose-variant="title"]::before {
  top: -0.32em;
}

#readerContent .reader-content-inner > p[data-prose-variant="title"]::after {
  bottom: -0.32em;
}

#readerContent .reader-content-inner > p[data-prose-variant="title"].is-reach-pending {
  opacity: 0;
}

#readerContent .reader-content-inner > p[data-prose-variant="title"].is-reach-pending::before,
#readerContent .reader-content-inner > p[data-prose-variant="title"].is-reach-pending::after {
  transform: scaleX(0);
}

/* 씨앗 — 정화의 핑크(마법 공주의 결정) · 왁세의 연푸른: 그 낱말에만 빛이 돈다. */
#readerContent .prose-color[data-prose-color="pink"] {
  color: var(--prose-seed-pink);
  text-shadow: 0 0 0.55em var(--prose-seed-pink-glow);
}

#readerContent .prose-color[data-prose-color="blue"] {
  color: var(--prose-seed-blue);
  text-shadow: 0 0 0.5em var(--prose-seed-blue-glow);
}

/* 스페크의 게임 칩 — 금딸 일수 · 등급 · 모임의 셈: 주황 테의 픽셀 칩(2부 스페크 시점의 게임 창). */
#readerContent .prose-color[data-prose-color="orange"] {
  padding: 0 0.35em;
  margin-inline: 0.08em;
  border: 1.5px solid var(--prose-who-speck);
  border-radius: 2px;
  color: var(--prose-who-speck);
  font-family: var(--prose-lab-font);
  font-size: 0.88em;
  font-weight: 700;
  background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--prose-who-speck) 8%, transparent) 0 2px, transparent 2px 4px);
  box-shadow: 2px 2px 0 color-mix(in srgb, var(--prose-who-speck) 35%, transparent);
}

/* 검붉음 — 오즈무의 씨앗 사슬: 그 낱말에 검붉은 빛이 늦게 스민다. */
#readerContent .prose-color[data-prose-color="red_background"] {
  background-color: transparent;
  color: var(--prose-seed-crimson);
  text-shadow: 0 0 0.45em color-mix(in srgb, var(--prose-seed-crimson) 30%, transparent);
  transition: color 2.6s ease 0.5s, text-shadow 2.6s ease 0.5s;
}

#readerContent .reader-content-inner > p.is-reach-pending .prose-color[data-prose-color="red_background"] {
  color: inherit;
  text-shadow: none;
}

/* 다른 시대의 빛 — 그 자리에만(「평안」): 화지의 빛이 한 번 스민 조각. */
#readerContent .prose-color[data-prose-color="brown_background"] {
  border-radius: 0.2em;
  padding: 0 0.08em;
  background-color: transparent;
  background-image:
    radial-gradient(ellipse 70% 90% at 50% 55%, rgba(255, 238, 200, 0.95), rgba(246, 228, 190, 0.55) 60%, transparent 100%),
    url("/situations/washi.webp?av=6bae8949a681");
  background-size: 100% 100%, 90px 90px;
  box-shadow: 0 0 0.5em rgba(240, 214, 160, 0.55);
  transition: background-size 2.2s cubic-bezier(0.4, 0, 0.2, 1) 0.4s, box-shadow 2.2s ease 0.4s;
}

html[data-theme="dark"] #readerContent .prose-color[data-prose-color="brown_background"] {
  background-image:
    radial-gradient(ellipse 70% 90% at 50% 55%, rgba(176, 130, 74, 0.45), rgba(150, 110, 60, 0.25) 60%, transparent 100%),
    url("/situations/washi.webp?av=6bae8949a681");
  box-shadow: 0 0 0.5em rgba(176, 130, 74, 0.35);
}

#readerContent .reader-content-inner > p.is-reach-pending .prose-color[data-prose-color="brown_background"] {
  background-size: 0 100%, 90px 90px;
  box-shadow: none;
}

/* 움직임 줄이기 · 넘김 엔진 — 끝난 모양(닿기 전에 숨겨 둔 줄도 보인다). 화면을 덮는 막(폭발 섬광 · 조여 오는 가장자리)은 짝으로 걷는다. */
@media (prefers-reduced-motion: reduce) {
  #readerContent .reader-content-inner > p:is(.is-reached, .is-reach-pending),
  #readerContent .reader-content-inner > p:is(.is-reached, .is-reach-pending)::before,
  #readerContent .reader-content-inner > p:is(.is-reached, .is-reach-pending)::after,
  #readerContent .reader-content-inner > p:is(.is-reached, .is-reach-pending) *,
  #readerContent .reader-content-inner > p.is-reached + p,
  #readerContent .reader-content-inner > p.is-reached + p + p,
  #readerContent .prose-color:is([data-prose-color="brown"], [data-prose-color="red_background"], [data-prose-color="brown_background"]) {
    animation: none !important;
    transition: none !important;
  }

  #readerContent .reader-content-inner > p.is-reach-pending,
  #readerContent .reader-content-inner > p[data-prose-situation="bed"].is-reach-pending ~ p[data-prose-situation="bed"] {
    opacity: 1 !important;
    filter: none !important;
    clip-path: none !important;
  }

  #readerContent .reader-content-inner > p:is([data-prose-situation="bomb"], [data-prose-situation="square"])::before,
  #readerContent .reader-content-inner > p:is([data-prose-situation="bomb"], [data-prose-situation="square"])::after {
    content: none !important;
  }
}

#readerContent:is(.is-page-mode, .is-spread-mode, .is-scene-mode) .reader-content-inner > p.is-reach-pending,
#readerContent:is(.is-page-mode, .is-spread-mode, .is-scene-mode) .reader-content-inner > p[data-prose-situation="bed"].is-reach-pending ~ p[data-prose-situation="bed"] {
  opacity: 1 !important;
  filter: none !important;
  clip-path: none !important;
  visibility: visible !important;
}

#readerContent:is(.is-page-mode, .is-spread-mode, .is-scene-mode) .reader-content-inner > p:is([data-prose-situation="bomb"], [data-prose-situation="square"])::before,
#readerContent:is(.is-page-mode, .is-spread-mode, .is-scene-mode) .reader-content-inner > p:is([data-prose-situation="bomb"], [data-prose-situation="square"])::after {
  content: none !important;
}

#readerContent .reader-content-inner > p[data-prose-line="dark"] .prose-color[data-prose-color="pink"] {
  color: #ff9fcb;
  text-shadow: 0 0 0.7em rgba(255, 140, 200, 0.8);
}

@media (prefers-reduced-motion: reduce) {
  #readerContent .reader-content-inner > p:is(
    [data-prose-situation="walk"],
    [data-prose-situation="heart"],
    [data-prose-situation="wind"],
    [data-prose-situation="earthquake"],
    [data-prose-situation="hammer"]
  ),
  #readerContent .reader-content-inner > p[data-prose-situation="earthquake"] + p,
  #readerContent .reader-content-inner > p[data-prose-situation="activity"] .prose-laugh,
  #readerContent .reader-content-inner > p > .prose-deco[data-prose-deco="lp"],
  #readerContent .reader-content-inner > p > .prose-deco[data-prose-deco="lp"]::before,
  #readerContent .reader-content-inner > p:is([data-prose-situation="notification"], [data-prose-situation="tornado"]),
  #readerContent .reader-content-inner > p[data-prose-situation="notification"] + p,
  .prose-crossing {
    animation: none !important;
  }
  #readerContent .reader-content-inner > p[data-prose-situation="flash"]::after {
    content: none;
  }
  #readerContent .reader-content-inner > p[data-prose-situation="location"] {
    transition: none;
  }
  #readerContent .reader-content-inner > p[data-prose-situation="hourglass"],
  #readerContent .reader-content-inner > p[data-prose-situation="bell"]::after,
  #readerContent .reader-content-inner > p[data-prose-situation="hammer"]::after,
  #readerContent .reader-content-inner > p[data-prose-situation="hand"]::before,
  #readerContent .reader-content-inner > p[data-prose-situation="ear"] {
    transition: none;
  }
}

/* 넘김 엔진(쪽 · 펼침 · 장면)에서는 상황의 움직임을 끝난 모양으로 둔다 — 움직임 줄이기와 같은 약. 다단 칸 안의
   transform 움직임(심장 두 박 등)은 줄 자리를 흔들어 쪽 여백 · 누른 자리의 앵커 · 펼친 옆 쪽을 움직이는 도중에
   보이게 한다(10/5 리추얼 실측). 지금 독자 서랍의 모드는 흐름 하나다(PD-2026-09-27-02) — 넘김의 움직임은
   전자책 모드(PD-2026-09-28-01) 설계가 다시 정한다. 흐름(스크롤)은 그대로 움직인다. */
#readerContent:is(.is-page-mode, .is-spread-mode, .is-scene-mode) .reader-content-inner > p[data-prose-situation],
#readerContent:is(.is-page-mode, .is-spread-mode, .is-scene-mode) .reader-content-inner > p[data-prose-situation]::before,
#readerContent:is(.is-page-mode, .is-spread-mode, .is-scene-mode) .reader-content-inner > p[data-prose-situation]::after {
  animation: none !important;
  transition: none !important;
}

#readerContent:is(.is-page-mode, .is-spread-mode, .is-scene-mode) .reader-content-inner > p[data-prose-situation] *,
#readerContent:is(.is-page-mode, .is-spread-mode, .is-scene-mode) .reader-content-inner > p[data-prose-situation] *::before,
#readerContent:is(.is-page-mode, .is-spread-mode, .is-scene-mode) .reader-content-inner > p[data-prose-situation] *::after,
#readerContent:is(.is-page-mode, .is-spread-mode, .is-scene-mode) .reader-content-inner > p[data-prose-situation] + p {
  animation: none !important;
}

/* 끝 모양이 숨김인 움직임은 움직임을 끄면 정적 모양(보임)으로 선다 — 플래시의 흰 막(position: fixed · inset 0)이
   화면을 덮은 채 남는다. 움직임 줄이기 · 이야기 종이 블록과 같은 짝으로 막 자체를 걷는다. */
#readerContent:is(.is-page-mode, .is-spread-mode, .is-scene-mode) .reader-content-inner > p[data-prose-situation="flash"]::after {
  content: none !important;
}

/* 쪽 모드는 문단 자신이 가운데 자리와 쪽 여백을 진다(styles.css — Chrome 다단 칸 우회: 폭 · left:50% ·
   translateX(-50%) · 쪽 여백 padding). 상황 문단의 꼴(맨 줄의 padding 0 · 덩이의 안쪽 여백 · 말풍선의 폭과 자리 ·
   기울기)이 그것을 덮으면 줄이 쪽 가장자리에 붙거나 옆 쪽으로 번진다(10/5 리추얼 — 1화 심장이 390 · 430 첫 쪽에서 왼쪽
   여백 0). 쪽 모드에서는 상황 문단도 여느 문단과 같은 폭 · 자리 · 쪽 여백 위에 선다 — 넘김의 연출 꼴은 전자책
   모드(PD-2026-09-28-01) 설계가 다시 정한다. */
#readerContent.is-page-mode .reader-content-inner > p[data-prose-situation] {
  float: none !important;
  width: min(100%, var(--reader-page-width-active, 658px)) !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  position: relative !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  padding-right: max(var(--reader-page-text-inset), calc(env(safe-area-inset-right) + 18px)) !important;
  padding-left: max(var(--reader-page-text-inset), calc(env(safe-area-inset-left) + 18px)) !important;
}