:root {
  color-scheme: dark;
  /* 라틴 글꼴에는 한글이 없다. 이어 적지 않으면 기기가 알아서 고른 명조로 떨어져
     같은 책이 맥에서는 AppleMyungjo, 윈도우에서는 바탕으로 그려진다(실측). */
  --serif: "Iowan Old Style", Baskerville, "Times New Roman", Times, "Noto Serif KR", "Nanum Myeongjo", AppleMyungjo, Batang, serif;
  --sans: "Pretendard Variable", Pretendard, "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", Inter, system-ui, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
/* 껍데기(상단바·하단바·패널)의 글꼴. 지정하지 않으면 브라우저 기본으로 떨어져
   본문만 사이트 글꼴이고 제목·버튼은 시스템 글꼴이 된다(실측). 본문은 .reader-flow 가 따로 정한다. */
/* 버튼·입력창은 body 글꼴을 물려받지 않는다(브라우저 기본 글꼴을 쓴다).
   이것 때문에 목차·설정 버튼만 시스템 글꼴로 그려지고 있었다 — 실측으로 잡았다. */
button, input, select, textarea { font-family: inherit; }
html, body { margin: 0; padding: 0; height: 100%; overflow: hidden; background: #0b1520; font-family: var(--sans); }

/* 이북 리더 공통 스타일 — /books/<책> 이 함께 쓴다.
   책마다 다른 것은 데이터(book.js)뿐이고, 화면과 조작은 여기서 한 벌로 관리한다.
   색은 --r-* 변수로만 잡아 테마를 갈아 끼울 수 있게 한다. */
/* ── 이북 리더 ─────────────────────────────────────────────
   웹 페이지가 아니라 뷰어로 다룬다. 색·글자·여백은 모두 리더 안에서만
   쓰는 --r-* 변수로 잡아, 테마를 갈아 끼워도 본문 규칙을 건드리지 않는다. */
.reader {
  --r-bg: #0b1520;  --r-surface: #101c29; --r-ink: #e8eef5; --r-ink-strong: #ffffff;
  --r-muted: #93a2b3; --r-muted2: #8a99a8; --r-line: rgba(171,197,219,.20); /* muted2 4.35 → 6.31 */
  --r-line-strong: rgba(171,197,219,.36); --r-accent: #d4a748; /* 대비 8.25 */
  color-scheme: dark;
  --r-fs: 19px; --r-lh: 1.95; --r-measure: 41em; --r-family: var(--serif);
  position: fixed; inset: 0; z-index: 300; background: var(--r-bg);
  display: grid; grid-template-rows: auto 1fr auto;
  /* 트랙을 화면 폭에 못 박는다. auto 로 두면 도구모음의 min-content(모바일에서 430px 남짓)가
     트랙을 밀어올려, 본문 오른쪽이 화면 밖으로 41px 잘려 나갔다. */
  grid-template-columns: minmax(0, 1fr);
}
.reader[hidden] { display: none; }
.reader[data-theme="paper"] {
  color-scheme: light;
  --r-bg: #f6f4ef; --r-surface: #efece4; --r-ink: #1d1c1a; --r-ink-strong: #000;
  --r-muted: #5f5a52; --r-muted2: #8a8378; --r-line: rgba(0,0,0,.14);
  --r-line-strong: rgba(0,0,0,.26); --r-accent: #78550c; /* 대비 6.16 */
}
/* 세피아 - 종이책에 가깝게. 상용 리더(Kindle #FBF0D9 · Apple #F8F1E3 · Kobo #F5EFE0)에
   견주면 예전 값(#f3e9d5)이 가장 어둡고 노랬다. 노란기를 덜고 살짝 밝혔다.
   잉크도 갈색기를 빼 인쇄 잉크에 가까운 중성 다크로 - 갈색이 짙으면 바랜 인쇄처럼 보인다.
   괄호 안은 배경 대비(WCAG). 작은 글자에 쓰는 muted2 까지 4.5 를 넘겼다(3.14 → 4.64). */
.reader[data-theme="sepia"] {
  color-scheme: light;
  --r-bg: #f6efe1; --r-surface: #efe8d8;
  --r-ink: #2e2823; /* 12.71 */ --r-ink-strong: #1a1713; /* 15.61 */
  --r-muted: #5d5449; /* 6.49 */ --r-muted2: #746a5c; /* 4.64 */
  --r-line: rgba(62,50,34,.18); --r-line-strong: rgba(62,50,34,.32);
  --r-accent: #7a5416; /* 5.91 */
  /* 종이는 완전한 평면이 아니다. 아주 옅은 얼룩 두 겹으로 단색 느낌을 지운다. */
  --r-grain:
    radial-gradient(1200px 800px at 18% 12%, rgba(255,255,255,.5), transparent 60%),
    radial-gradient(900px 700px at 82% 88%, rgba(146,118,72,.07), transparent 62%);
}
.reader[data-theme="gray"] {
  color-scheme: dark;
  /* 배경은 중립 회색인데 글자만 푸른끼가 돌아 계열이 어긋났다. 전부 중립 웜그레이로 맞춘다.
     괄호 안은 배경 대비(WCAG). 보조 글자까지 4.5 이상으로 올렸다. */
  --r-bg: #2c2c2e; --r-surface: #343436; --r-ink: #e7e5e2; --r-ink-strong: #ffffff;
  --r-muted: #b0aca7; --r-muted2: #948f89; --r-line: rgba(255,255,255,.15);
  --r-line-strong: rgba(255,255,255,.28); --r-accent: #e3b366; /* 대비 7.24 */
}

/* 밝기 — 시스템 밝기를 못 만지니 화면 위에 어둠막을 덮는다 */
.reader-dim { position: fixed; inset: 0; z-index: 320; pointer-events: none; background: #000; opacity: 0; transition: opacity .2s; }

.reader-topbar { display: flex; align-items: center; gap: 10px; padding: 12px max(16px, 3vw); border-bottom: 1px solid var(--r-line); background: var(--r-surface); }
.reader-title { flex: 1; min-width: 0; margin: 0 8px; text-align: center; font-size: 14.5px; color: var(--r-muted); letter-spacing: .06em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.reader-tools { display: flex; gap: 8px; }
.reader-icon { display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: 1px solid var(--r-line); background: transparent; color: var(--r-muted); border-radius: 999px; padding: 9px 14px; font-size: 14px; line-height: 1; cursor: pointer; white-space: nowrap; transition: color .15s, border-color .15s; }
.reader-icon:hover, .reader-icon:focus-visible { color: var(--r-ink-strong); border-color: var(--r-accent); outline: none; }
.reader-close { color: var(--r-accent); }
/* 아이콘은 전부 인라인 SVG — 글자색을 따라가고 어느 OS 에서나 같은 모양·크기 */
.reader-icon svg, .reader-nav svg, .mark-del svg { width: 17px; height: 17px; flex: 0 0 auto; display: block; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.reader-icon.on svg { fill: currentColor; } /* 북마크는 켜지면 채워진다 */

/* 무대 = 여백 담당. 좌우 여백은 자르는 창(reader-viewport) 바깥이다.
   여백을 무대 안쪽 padding 으로 두면 overflow 가 padding box 에서 잘리기 때문에
   여백이 단 간격(--r-gap)보다 넓은 큰 화면에서 다음 쪽 왼쪽이 그만큼 새어 나왔다. */
.reader-stage { --r-pad: max(20px, 4vw); --r-gap: 64px; position: relative; overflow: hidden; padding: 30px 0 10px; font-size: var(--r-fs); }
.reader-viewport { position: relative; height: 100%; width: calc(100% - var(--r-pad) * 2); margin: 0 auto; }
/* 넘김 모드에서 줄 길이 설정이 아무 일도 하지 않던 문제 — 창을 줄 길이에 맞춰 좁힌다.
   흐름은 창의 100% 이므로 자르기·쪽 이동 계산은 그대로다. 큰 화면에서 한 줄이
   1000px 넘게 늘어나던 것도 함께 잡힌다. */
.reader--page .reader-viewport { width: min(var(--r-measure), calc(100% - var(--r-pad) * 2)); }
.reader--page.reader--spread .reader-viewport { width: min(calc(var(--r-measure) * 2 + var(--r-gap)), calc(100% - var(--r-pad) * 2)); }
/* clip 은 hidden 과 달리 스크롤 컨테이너를 만들지 않는다 — 포커스 이동에 밀려
   창이 몰래 스크롤되는 일이 없어 쪽 위치가 절대 틀어지지 않는다. */
.reader--page .reader-viewport { overflow: hidden; overflow: clip; }
.reader-flow { height: 100%; font-family: var(--r-family); font-size: var(--r-fs); line-height: var(--r-lh); color: var(--r-ink); text-align: var(--r-align, left); }
/* 문단 사이는 줄 간격과 따로 둔다 — 줄만 벌리면 문단 경계가 안 보인다 */
.reader-flow p + p, .reader-flow p + ul, .reader-flow ul + p { margin-top: calc(var(--r-para, 1.1) * 1em); }
/* 양쪽 맞춤에서 한글은 낱말 단위로 끊어야 사이가 벌어지지 않는다 */
.reader-flow[style*='justify'], .reader--page .reader-flow { word-break: keep-all; }
/* 이동량을 px 로 계산해 두면 창 크기가 바뀌는 순간부터 다시 조판할 때까지 어긋난다.
   100%(=제 폭) 기준으로 CSS 가 직접 계산하게 두면 어떤 크기에서도 항상 딱 맞는다. */
.reader--page .reader-flow { width: 100%; column-gap: var(--r-gap); transform: translateX(calc(-1 * var(--r-page, 0) * (100% + var(--r-gap)))); }
.reader--anim .reader-flow { transition: transform .32s cubic-bezier(.22,.61,.36,1); }

.reader--scroll .reader-stage { overflow-y: auto; overflow-x: hidden; scroll-behavior: smooth; padding-bottom: 40px; }
.reader--seeking .reader-stage { scroll-behavior: auto; }
.reader--scroll .reader-viewport { height: auto; overflow: visible; }
.reader--scroll .reader-flow { height: auto; width: min(var(--r-measure), 100%); margin: 0 auto; column-width: auto; column-count: auto; column-gap: normal; transform: none !important; transition: none; }
.reader--scroll .reader-flow > section { padding-top: 52px; margin-top: 44px; border-top: 1px solid var(--r-line); }
.reader--scroll .reader-flow > section:first-of-type { margin-top: 24px; }
.reader--scroll .reader-flow .r-cover { height: auto; min-height: 58vh; }
.reader--scroll .reader-nav { display: none; }
.reader--page .reader-flow > section { break-before: column; }
/* 조각 조판 - 큰 책에서만. 지금 읽는 조각 하나만 조판하고 나머지는 건너뛴다.
   흐름의 직계 자식은 어차피 새 단에서 시작하므로 조각마다 따로 세어 더해도 결과가 같다.
   글자는 DOM 에 그대로 있어 리더 검색·목차는 영향받지 않는다(둘 다 book 데이터를 본다).
   다만 content-visibility: hidden 은 접근성 트리에서도 빠진다 - 실측으로 확인했다.
   그래서 넘김 모드에서 스크린리더는 지금 보이는 장만 읽는다. 스크롤 모드에서는
   이 규칙이 꺼져 전체가 다시 읽히고, 기본 모드가 스크롤이라 기본 상태는 영향이 없다.
   감춘 조각의 break-before 까지 꺼야 한다. 켜 둔 채로는 감춘 조각도 한 단씩 차지해
   폭이 조각 수만큼 부풀고, 쪽수가 386 대신 1991 로 나왔다.
   명시도를 .reader--page .reader-flow > section (0,2,1) 보다 높게 잡아야 이긴다.
   높이도 0 으로 눌러야 한다. content-visibility 만으로는 표지처럼 height:100% 가
   걸린 조각이 감춘 채로도 한 단을 차지해, 조각마다 두 단씩 더 세어졌다(351 → 433).
   보이는 조각은 :not() 으로 이 규칙에서 빼 원래 모습 그대로 둔다. */
.reader--page.reader--chunked .reader-flow > *:not(.piece-on) {
  content-visibility: hidden; contain-intrinsic-size: 0 0; break-before: auto;
  height: 0; min-height: 0; margin: 0; padding: 0;
}
/* 보이는 조각도 새 단에서 시작하면 안 된다 - 앞에 눌러 둔 빈 조각들이 이미 첫 단을
   차지하고 있어, 조각마다 한 단씩 더 세어졌다(351 → 391). 혼자이므로 나눌 이유도 없다. */
.reader--page.reader--chunked .reader-flow > .piece-on { break-before: auto; }
.reader--page .reader-flow > section:first-child, .reader--page .reader-flow > .r-cover { break-before: auto; }

.reader-flow .r-cover { display: flex; flex-direction: column; justify-content: center; height: 100%; }
/* 양면일 때 표지는 홀로 한 화면을 쓴다. 표지 뒤에 빈 쪽을 넣어 짝을 맞추는 방식으로,
   다단 흐름을 끊지 않는다(column-span:all 은 쪽 계산을 무너뜨린다). */
.r-blank { display: none; }
.reader--spread .r-blank { display: block; height: 100%; break-before: column; }
/* 장을 왼쪽 쪽으로 밀기 위해 넣는 빈 칸(양면에서만 존재) */
.r-spacer { display: block; height: 100%; break-before: column; }

/* 표지 아래 동작 줄 — 링크 복사·돌아가기 */
.r-cover-actions { display: flex; gap: 10px; margin-top: 26px; flex-wrap: wrap; }
.r-share, .r-back { display: inline-flex; align-items: center; padding: 10px 16px; border: 1px solid var(--r-line-strong); border-radius: 999px; background: transparent; color: var(--r-ink); font-family: var(--sans); font-size: 14px; text-decoration: none; cursor: pointer; }
.r-share:hover, .r-back:hover, .r-share:focus-visible, .r-back:focus-visible { border-color: var(--r-accent); color: var(--r-ink-strong); outline: none; }
.r-share.done { border-color: var(--r-accent); color: var(--r-accent); }

/* 미리보기 끝 - 로그인 안내. 본문과 같은 폭·같은 리듬으로 두어 광고처럼 보이지 않게 한다. */
.reader-flow .r-gate { text-align: center; }
.reader-flow .r-gate h2 { margin-top: 6px; }
.reader-flow .r-gate p { color: var(--r-muted); }
.reader-flow .r-gate .r-gate-go { margin-top: 22px; }
/* 표지 그림 — 세로 비율이 제각각이라 폭이 아니라 높이를 기준으로 맞춘다.
   넘김 모드에서는 표지가 한 화면을 차지하므로 동작 줄이 밀려나지 않게 높이를 제한한다. */
.reader-flow .r-cover--art { text-align: center; }
.reader-flow .r-cover-art {
  display: block; margin: 0 auto 26px;
  width: auto; height: auto;
  max-width: min(330px, 74%); max-height: 52vh;
  border-radius: 3px;
  /* 어두운 표지가 배경에 잠기지 않도록 실선 한 겹. 그림자는 '책 두께' 한 겹만 —
     blur 를 쓰면 떠 있는 카드처럼 보이고 책 같지 않다. */
  border: 1px solid var(--r-line);
  box-shadow: 3px 3px 0 var(--r-line);
}
.reader-flow .r-cover--art .r-cover-actions { justify-content: center; }
/* 그림이 제목까지 담고 있을 때 — 눈에서만 감추고 접근성 트리에는 남긴다 */
.reader-flow .r-cover--art-only :is(h1, .r-sub, .r-kicker) {
  position: absolute; width: 1px; height: 1px; margin: 0; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.reader-flow .r-cover h1 { margin: 0 0 12px; font-size: 2.1em; line-height: 1.25; letter-spacing: -.01em; color: var(--r-ink-strong); }
.reader-flow .r-cover .r-sub { margin: 0 0 26px; color: var(--r-muted); font-size: 1.05em; }
.reader-flow .r-cover .r-meta { color: var(--r-muted2); font-family: var(--sans); font-size: .8em; letter-spacing: .1em; text-transform: uppercase; }
.reader-flow h2 { margin: 0 0 6px; font-size: 1.42em; line-height: 1.35; letter-spacing: -.01em; color: var(--r-ink-strong); }
.reader-flow h3 { margin: 26px 0 6px; font-size: 1.06em; line-height: 1.45; color: var(--r-accent); font-family: var(--sans); font-weight: 700; }
.reader-flow p { margin: 0 0 1.05em; }
.reader-flow .r-kicker { margin: 0 0 4px; font-family: var(--sans); font-size: .74em; letter-spacing: .16em; text-transform: uppercase; color: var(--r-muted2); }
/* 인용은 좌측 컬러 보더 대신 들여쓰기 + 따옴표 내어쓰기로 구분한다.
   원문이 이미 따옴표를 품고 있으므로 글리프를 덧붙이지 않는다(붙이면 ““ 로 겹친다).
   여는 따옴표만 글줄 밖으로 내보내 본문 왼쪽 선이 시각적으로 맞는다. */
/* 인용은 이 책의 주인공이라 본문보다 두 단계(글자 크기 단계 19px→23px, 약 1.2배) 크게. */
/* 표시용 큰 글씨는 본문 줄간격을 그대로 쓰면 두 줄이 따로 논다(실측 22.8px 에 44.5px).
   글자가 클수록 줄간격 비율은 내려가야 한다 - 사용자가 고른 값에서 일정하게 덜어 쓴다.
   좁게(1.7)에서 너무 붙지 않도록 1.5 를 바닥으로 둔다. */
.reader-flow .r-quote,
.reader-flow .r-korean { line-height: max(1.5, calc(var(--r-lh) - .32)); }
.reader-flow .r-quote {
  margin: 0 0 16px; padding-left: 1.5em; text-indent: -.55em;
  font-size: 1.2em; font-style: italic; color: var(--r-ink);
}
.reader-flow .r-korean { margin: 0 0 18px; color: var(--r-muted); font-size: 1.15em; }
/* 인용 한 편 = 원문 + 번역 + 출처. 셋을 바짝 묶고 다음 인용과의 사이만 크게 벌린다.
   출처를 절 요약용 .r-partnote 로 찍으면 위에 구분선이 생겨 제 인용과 끊기고,
   다음 인용의 머리처럼 읽힌다. 여백만으로 소속을 드러낸다. */
/* 출처는 번역과 같은 왼쪽 선에 세운다 - 인용문만 안쪽으로 들어가고 나머지는 본문 선을 지킨다 */
.reader-flow .r-source {
  margin: 0 0 34px;
  font-family: var(--sans); font-size: .78em; line-height: 1.7; color: var(--r-muted2);
}
.reader-flow .r-quote + .r-source { margin-top: -8px; }
.reader-flow .r-korean + .r-source { margin-top: -10px; }
.reader-flow .r-source::before { content: "- "; }
/* 알약은 바로 위 출처(1.70)와 글자 크기가 같다. 줄간격만 다르면 둘이 어긋나 보인다. */
.reader-flow .r-badge { display: inline-block; margin: 0 0 16px; padding: 5px 12px; border: 1px solid var(--r-line-strong); border-radius: 999px; font-family: var(--sans); font-size: .75em; line-height: 1.7; letter-spacing: .08em; color: var(--r-accent); }
.reader-flow .r-lead { font-size: 1.16em; line-height: 1.75; color: var(--r-ink); margin: 0 0 1.1em; }
.reader-flow .r-partnote { margin-top: 22px; padding-top: 14px; border-top: 1px solid var(--r-line); font-family: var(--sans); font-size: .8em; color: var(--r-muted2); }
.reader-flow .r-part h2 { font-size: 1.62em; }
.reader-flow ul { margin: 0 0 1.05em; padding-left: 1.15em; }
.reader-flow li { margin-bottom: .5em; }
.reader-flow .r-ref { font-family: var(--sans); font-size: .82em; line-height: 1.75; color: var(--r-muted); }
.reader-flow .r-ref b { color: var(--r-ink); font-weight: 600; }
.reader-flow .r-end { margin-top: 24px; color: var(--r-muted2); font-family: var(--sans); font-size: .8em; }
.reader-flow p, .reader-flow li, .reader-flow .r-quote, .reader-flow .r-badge { break-inside: avoid-column; }
/* 출처가 제 인용과 떨어져 다음 쪽 머리에 혼자 서지 않게 */
.reader-flow .r-source { break-before: avoid-column; }
.reader-flow .r-kicker, .reader-flow h2, .reader-flow h3 { break-after: avoid-column; }

.reader-bottombar { display: flex; align-items: center; gap: 16px; padding: 12px max(16px, 3vw) 16px; border-top: 1px solid var(--r-line); background: var(--r-surface); }
.reader-nav { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--r-line); background: transparent; color: var(--r-muted); border-radius: 999px; padding: 10px 16px; font-size: 14px; cursor: pointer; }
.reader-nav:hover:not(:disabled) { color: var(--r-ink-strong); border-color: var(--r-accent); }
.reader-nav:disabled { opacity: .35; cursor: default; }
.reader-progress { flex: 1; display: flex; align-items: center; gap: 14px; font-family: var(--sans); font-size: 14px; color: var(--r-muted); }
/* 라벨 폭을 고정한다 — 글자 수가 바뀔 때마다 막대 길이가 흔들리면 안 된다 */
#readerPageLabel { flex: 0 0 auto; width: 64px; text-align: right; font-variant-numeric: tabular-nums; }
/* 진행 막대 — 트랙·진행·손잡이가 --r-p (0~1) 하나만 본다.
   손잡이는 반지름(7px)만큼 안쪽으로만 움직이므로 양끝에서 막대 밖으로 삐져나오지 않고,
   진행의 오른쪽 끝과 손잡이 중심이 계산상 정확히 같은 자리다. */
.reader-progress-bar { --r-p: 0; --r-knob: 13px; position: relative; flex: 1; height: 24px; cursor: pointer; touch-action: none; }
.reader-progress-bar::before,
.reader-progress-bar i {
  content: ""; position: absolute; top: 50%; height: 4px; margin-top: -2px; border-radius: 999px;
}
.reader-progress-bar::before { left: 0; right: 0; background: var(--r-line); }
.reader-progress-bar i {
  left: 0; background: var(--r-accent); transition: width .28s cubic-bezier(.22,.61,.36,1);
  width: calc(var(--r-knob) / 2 + var(--r-p) * (100% - var(--r-knob)));
}
.reader-progress-bar::after {                       /* 손잡이 — 늘 보인다(끌 수 있다는 표시) */
  content: ""; position: absolute; top: 50%; box-sizing: border-box;
  left: calc(var(--r-p) * (100% - var(--r-knob)));
  width: var(--r-knob); height: var(--r-knob); margin-top: calc(var(--r-knob) / -2); border-radius: 50%;
  background: var(--r-accent); border: 3px solid var(--r-surface);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
  transition: left .28s cubic-bezier(.22,.61,.36,1), transform .14s;
}
.reader-progress-bar:hover::after, .reader-progress-bar:focus-visible::after { transform: scale(1.15); }
.reader-progress-bar.dragging::after { transform: scale(1.25); }
.reader-progress-bar:focus-visible { outline: none; }
.reader-progress-bar.dragging i, .reader-progress-bar.dragging::after { transition: none; }
.reader-scrub { position: absolute; bottom: 28px; left: calc(var(--r-knob) / 2 + var(--r-p) * (100% - var(--r-knob))); transform: translateX(-50%); padding: 7px 12px; border: 1px solid var(--r-line-strong); border-radius: 10px; background: var(--r-surface); color: var(--r-ink); font-family: var(--sans); font-size: 14px; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .15s; max-width: 60vw; overflow: hidden; text-overflow: ellipsis; }
.reader-progress-bar.dragging .reader-scrub { opacity: 1; }
.reader-remain { flex: 0 0 auto; width: 124px; text-align: right; color: var(--r-muted2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 목차·설정 공통 패널 */
.reader-panel { position: absolute; top: calc(var(--r-topbar, 62px) + 10px); z-index: 5; width: min(420px, calc(100vw - 32px)); max-height: 70vh; overflow-y: auto; overscroll-behavior: contain; padding: 12px 6px 12px 12px; border: 1px solid var(--r-line-strong); border-radius: 16px; background: var(--r-surface); box-shadow: 0 12px 28px rgba(0,0,0,.22); }
.reader-panel[hidden] { display: none; }
.reader-toc { left: max(16px, 3vw); }
.reader-settings { right: max(16px, 3vw); width: min(360px, calc(100vw - 32px)); }
/* 제목은 왼쪽, 쪽번호는 오른쪽 한 줄로 — 번호는 폭을 고정해 세로로 나란히 선다 */
.reader-toc button { display: flex; align-items: baseline; gap: 12px; width: 100%; text-align: left; padding: 11px 14px; border: 0; border-radius: 10px; background: transparent; color: var(--r-ink); font-family: var(--sans); font-size: 14.5px; line-height: 1.5; cursor: pointer; }
.reader-toc button:hover, .reader-toc button:focus-visible { background: var(--r-line); outline: none; }
.reader-toc button .toc-title { flex: 1; min-width: 0; }
.reader-toc button .toc-num { flex: 0 0 auto; width: 34px; text-align: right; color: var(--r-muted2); font-size: .86em; font-variant-numeric: tabular-nums; }
.reader-toc button.lvl-1 { font-weight: 700; }
.reader-toc button.lvl-2 { padding-left: 28px; font-size: 14px; color: var(--r-muted); }
.reader-toc button[aria-current="true"] { color: var(--r-accent); font-weight: 700; }
.reader-toc button[aria-current="true"] .toc-num { color: var(--r-accent); opacity: .75; }

/* 몰입 모드 — 읽는 동안 도구를 비운다. 마우스·키·터치가 있으면 곧바로 돌아온다. */
.reader--immersive .reader-topbar,
.reader--immersive .reader-bottombar { opacity: 0; pointer-events: none; }
.reader-topbar, .reader-bottombar { transition: opacity .35s ease; }
/* 몰입 중이라도 읽는 위치가 바뀌면(스크롤·쪽 넘김·스와이프) 하단 진행 표시만 잠깐 돌아온다.
   상단바는 계속 숨겨 둔다 — 한 쪽 넘길 때마다 헤더까지 깜빡이면 읽는 흐름이 끊긴다. */
.reader--immersive.reader--peek .reader-bottombar { opacity: 1; pointer-events: auto; }
.reader--immersive .reader-stage { cursor: default; }
/* 넘김 모드에서 좌우 끝은 쪽 넘김 영역이라는 힌트 */
.reader--page .reader-stage { cursor: pointer; }
.reader--page .reader-flow { cursor: auto; }

/* 양면 보기 — 넘김 모드에서 한 화면에 두 쪽.
   가운데에는 아무것도 그리지 않는다. 실선은 창을 반으로 자른 것처럼 보이고,
   접힘부 그늘은 가운데가 뿌옇게 얼룩져 더 나빴다. 단 간격(--r-gap)만으로
   두 쪽이 충분히 갈라지고, 상용 리더들도 여백으로만 나눈다. */

/* 스크롤바 — 테마 색을 따라가고, 패널의 둥근 모서리를 침범하지 않게 안쪽에 띄운다 */
.reader-panel, .reader--scroll .reader-stage { scrollbar-width: thin; scrollbar-color: var(--r-line-strong) transparent; }
.reader-panel::-webkit-scrollbar, .reader--scroll .reader-stage::-webkit-scrollbar { width: 12px; }
.reader-panel::-webkit-scrollbar-track, .reader--scroll .reader-stage::-webkit-scrollbar-track { background: transparent; }
.reader-panel::-webkit-scrollbar-thumb, .reader--scroll .reader-stage::-webkit-scrollbar-thumb {
  background: var(--r-line-strong); border-radius: 999px;
  border: 3px solid transparent; background-clip: padding-box; /* 트랙에서 띄워 얇고 둥글게 */
}
.reader-panel::-webkit-scrollbar-thumb:hover, .reader--scroll .reader-stage::-webkit-scrollbar-thumb:hover { background: var(--r-accent); background-clip: padding-box; }
.reader-panel::-webkit-scrollbar-corner, .reader--scroll .reader-stage::-webkit-scrollbar-corner { background: transparent; }

/* 북마크 — 목차 패널 맨 위에 모아 둔다 */
.toc-marks { margin: 0 0 8px; padding: 0 0 10px; border-bottom: 1px solid var(--r-line); }
.toc-marks-label { display: block; padding: 4px 14px 8px; font-family: var(--sans); font-size: 14px; letter-spacing: .05em; color: var(--r-muted2); }
.toc-mark { display: flex; align-items: center; gap: 8px; }
.toc-mark button { flex: 1; }
.toc-mark .mark-del { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--r-muted2); cursor: pointer; }
.toc-mark .mark-del svg { width: 15px; height: 15px; }
.toc-mark .mark-del:hover { color: var(--r-accent); background: var(--r-line); }
.reader-icon.on { color: var(--r-accent); border-color: var(--r-accent); }

/* 각주 — 본문의 근거 기호를 눌러 근거 목록으로 건너뛴다 */
.r-cite { padding: 1px 5px; margin: 0 1px; border: 1px solid var(--r-line); border-radius: 6px; background: transparent; color: var(--r-accent); font-family: var(--sans); font-size: .92em; line-height: 1.4; cursor: pointer; }
.r-cite:hover, .r-cite:focus-visible { border-color: var(--r-accent); background: var(--r-line); outline: none; }
/* 부록 근거의 주소·DOI. 밑줄은 글자 아래에 살짝 띄워 한글 받침을 가리지 않게 한다.
   긴 주소가 단을 밀지 않도록 어디서든 끊는다(부모의 overflow-wrap 만으로는 부족했다). */
.r-link { color: var(--r-accent); text-decoration: underline; text-underline-offset: 2px;
  text-decoration-thickness: 1px; overflow-wrap: anywhere; word-break: break-all; }
.r-link:hover, .r-link:focus-visible { text-decoration-thickness: 2px; outline: none; }

/* 본문 검색 — 넘김 모드에서는 브라우저 찾기가 닿지 않아 리더가 직접 제공한다 */
.reader-search { right: max(16px, 3vw); width: min(460px, calc(100vw - 32px)); }
.search-box { display: flex; align-items: center; gap: 10px; padding: 4px 6px 12px; border-bottom: 1px solid var(--r-line); }
.search-box input { flex: 1; min-width: 0; padding: 11px 14px; border: 1px solid var(--r-line-strong); border-radius: 10px; background: transparent; color: var(--r-ink); font-family: var(--sans); font-size: 15px; }
.search-box input:focus { outline: none; border-color: var(--r-accent); }
.search-count { flex: 0 0 auto; font-family: var(--sans); font-size: 14px; color: var(--r-muted2); }
.search-results { max-height: 52vh; overflow-y: auto; padding-top: 6px; }
.search-results button { display: block; width: 100%; text-align: left; padding: 11px 12px; border: 0; border-radius: 10px; background: transparent; color: var(--r-ink); font-family: var(--sans); font-size: 14px; line-height: 1.6; cursor: pointer; }
.search-results button:hover, .search-results button:focus-visible { background: var(--r-line); outline: none; }
.search-results .sr-chapter { display: block; margin-bottom: 3px; font-size: 14px; color: var(--r-muted2); }
.search-results mark { background: transparent; color: var(--r-accent); font-weight: 700; }
.search-empty { padding: 16px 12px; font-family: var(--sans); font-size: 14px; color: var(--r-muted2); }

/* 찾은 자리로 옮겨 갔을 때 잠깐 표시 */
.r-found { animation: rFound 1.6s ease; }
@keyframes rFound { 0%, 60% { background: color-mix(in srgb, var(--r-accent) 22%, transparent); } 100% { background: transparent; } }

.set-row { padding: 12px 6px; border-bottom: 1px solid var(--r-line); }
.set-row:last-child { border-bottom: 0; }
.set-label { display: block; margin-bottom: 9px; font-family: var(--sans); font-size: 14px; letter-spacing: .04em; color: var(--r-muted2); }
.set-options { display: flex; gap: 8px; flex-wrap: wrap; }
.set-options button { flex: 1; min-width: 62px; padding: 10px 8px; border: 1px solid var(--r-line); border-radius: 10px; background: transparent; color: var(--r-muted); font-family: var(--sans); font-size: 14px; cursor: pointer; }
.set-options button[aria-pressed="true"] { border-color: var(--r-accent); color: var(--r-ink-strong); background: var(--r-line); }
.set-swatches { display: flex; gap: 10px; }
.set-swatches button { flex: 1; height: 46px; border-radius: 10px; border: 2px solid var(--r-line); cursor: pointer; font-family: var(--sans); font-size: 14px; }
.set-swatches button[aria-pressed="true"] { border-color: var(--r-accent); }
.set-range { display: flex; align-items: center; gap: 12px; }
.set-range input[type="range"] { flex: 1; accent-color: var(--r-accent); }
.set-range output { min-width: 44px; text-align: right; font-family: var(--sans); font-size: 14px; color: var(--r-muted); }
.set-step { display: flex; align-items: center; gap: 10px; }
.set-step button { width: 44px; height: 40px; border: 1px solid var(--r-line); border-radius: 10px; background: transparent; color: var(--r-ink); font-size: 16px; cursor: pointer; }
.set-step span { flex: 1; text-align: center; font-family: var(--sans); font-size: 14px; color: var(--r-muted); }

@media (max-width: 760px) {
  .reader-stage { --r-pad: 18px; --r-gap: 40px; padding: 22px 0 6px; }
  .reader-title { display: none; }
  .reader-icon span { display: none; }          /* 라벨 접기 - 아이콘과 aria-label 로 충분하다 */
  .reader-icon { padding: 9px 11px; }
  .reader-topbar { gap: 6px; padding: 12px 12px; }
  .reader-bottombar { gap: 10px; padding: 12px 12px 16px; }
  .reader-nav { padding: 10px 14px; font-size: 14px; }
  .reader-remain { display: none; }
  .reader-panel { width: calc(100vw - 24px); left: 12px; right: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .reader--anim .reader-flow { transition: none; }
  .reader--scroll .reader-stage { scroll-behavior: auto; }
}


/* 판권 - 종이책의 판권장. 표지 다음, 본문 앞에 홀로 한 쪽을 차지한다. */
.reader-flow .r-imprint {
  display: flex; flex-direction: column; justify-content: center; height: 100%;
  font-family: var(--sans);
}
.reader--scroll .reader-flow .r-imprint { height: auto; min-height: 52vh; padding: 30px 0; }
.reader-flow .r-imprint h2 {
  margin: 0 0 6px; font-family: var(--r-family); font-size: 1.5em;
  line-height: 1.3; color: var(--r-ink-strong);
}
.reader-flow .r-imprint .r-sub { margin: 0 0 26px; color: var(--r-muted); font-size: .98em; }
.reader-flow .r-imprint dl {
  display: grid; grid-template-columns: 5.5em 1fr; gap: 9px 16px;
  margin: 0; padding: 20px 0; font-size: .88em;
  border-top: 1px solid var(--r-line); border-bottom: 1px solid var(--r-line);
}
.reader-flow .r-imprint dt { color: var(--r-muted2); }
.reader-flow .r-imprint dd { margin: 0; color: var(--r-ink); }
.reader-flow .r-imprint-rights { margin: 18px 0 0; font-size: .82em; line-height: 1.7; color: var(--r-muted2); }

/* ── 한 화면에 한 항목 (book.oneAtATime) ─────────────────────
   인용집처럼 문장 하나하나를 음미해야 하는 책. 이어지는 글로 흘리면
   1000편이 그냥 지나간다. 인용 한 편(원문 + 번역 + 출처)을 한 쪽에 세운다. */
.reader--one.reader--page .reader-flow .r-quote { break-before: column; }
/* 절 머리 바로 다음 인용은 제목과 붙여 둔다 - 표제만 있는 빈 쪽이 생기지 않게 */
.reader--one.reader--page .reader-flow .r-partnote + .r-quote,
.reader--one.reader--page .reader-flow h2 + .r-quote,
.reader--one.reader--page .reader-flow h3 + .r-quote { break-before: auto; }
.reader--one.reader--page .reader-flow .r-quote,
.reader--one.reader--page .reader-flow .r-korean,
.reader--one.reader--page .reader-flow .r-source { break-inside: avoid-column; }
.reader--one.reader--page .reader-flow .r-korean,
.reader--one.reader--page .reader-flow .r-source { break-before: avoid-column; }

/* 한 쪽에 하나뿐이니 크게 읽는다 */
.reader--one.reader--page .reader-flow .r-quote { margin-top: 9vh; font-size: 1.35em; }
.reader--one.reader--page .reader-flow .r-korean { font-size: 1.25em; }
.reader--one.reader--page .reader-flow .r-source { margin-bottom: 0; }
/* 절 머리 바로 뒤 첫 인용은 제목과 같은 쪽이라 위 여백을 줄인다 */
.reader--one.reader--page .reader-flow .r-partnote + .r-quote,
.reader--one.reader--page .reader-flow h2 + .r-quote,
.reader--one.reader--page .reader-flow h3 + .r-quote { margin-top: 30px; }

/* 원문·번역·출처를 같은 왼쪽 선에 세운다.
   원문에만 걸린 들여쓰기(따옴표 내어쓰기용)를 두면 세 줄의 왼쪽이 어긋나 보인다.
   한 쪽에 한 편만 있는 판에서는 인용임이 크기와 기울임으로 이미 드러난다. */
.reader--one .reader-flow .r-quote { padding-left: 0; text-indent: 0; }
/* 출처는 글자가 작아 같은 폭이어도 오른쪽 끝까지 꽉 찬다.
   원문보다 길어 보여 아래가 삐져나온 인상을 주므로 줄 길이를 따로 줄인다. */
.reader--one .reader-flow .r-source { max-width: 46em; }

/* 스크롤로 읽을 때도 한 편씩 끊어 보이도록 사이를 크게 벌린다 */
.reader--one.reader--scroll .reader-flow .r-source { margin-bottom: 84px; }
.reader--one.reader--scroll .reader-flow .r-quote { margin-top: 8px; }

/* 아랍어·히브리어처럼 오른쪽에서 왼쪽으로 쓰는 원문. 전사를 따로 뗐으므로
   문단마다 방향이 하나뿐이고, plaintext 로 브라우저가 알아서 잡게 두면 된다. */
.reader-flow .r-quote { unicode-bidi: plaintext; }
/* 로마자 전사 - 원문과 번역 사이. 원문을 소리 내어 읽어 보라고 두는 줄이다. */
.reader-flow .r-translit {
  margin: -6px 0 14px; font-family: var(--sans); font-size: .84em;
  line-height: 1.7; color: var(--r-muted2); letter-spacing: .01em;
}
.reader--one.reader--page .reader-flow .r-translit { font-size: .95em; margin-bottom: 18px; }
.reader--one.reader--page .reader-flow .r-translit,
.reader--one.reader--page .reader-flow .r-korean { break-before: avoid-column; }
.reader-flow .r-translit { break-inside: avoid-column; }

/* 긴 URL 은 공백이 없어 줄바꿈할 자리가 없다. 그대로 두면 단 밖으로 넘쳐
   옆 쪽을 침범한다(근거 목록에서 761px 자리에 1726px 가 흘러넘쳤다).
   anywhere 는 다른 방법이 없을 때만 끊으므로 보통 낱말은 건드리지 않는다. */
.reader-flow { overflow-wrap: anywhere; }
/* 인용문은 원문 그대로 보여야 하므로 낱말 중간을 끊지 않는다 */
.reader-flow .r-quote, .reader-flow .r-korean { overflow-wrap: break-word; }

/* 종이 얼룩 - --r-grain 을 정의한 테마에서만 켜진다. 다른 테마는 그대로다. */
.reader { background-image: var(--r-grain, none); background-attachment: fixed; }

/* 좌우 짝 - 왼쪽은 읽는 재료(원문·발음·낱말), 오른쪽은 결과(번역·풀이).
   이북은 CSS 다단으로 쪽을 나누는데, 다단 안에서 grid 를 쓰면 단 경계를 만나는 순간
   오른쪽 칸이 통째로 잘려 나간다(실측: 번역이 화면에서 사라졌다). break-inside 로 막아도
   내용이 한 단에 안 들어가면 같은 일이 난다. 그래서 책에서는 세로로 쌓는다 -
   원문 · 발음 · 낱말 · 번역 · 풀이 순서는 그대로다.
   좌우 배치는 다단을 쓰지 않는 웹(/dhammapada)에서만 한다. */
.r-pair { display: block; }
.r-pair-r { margin-top: 1.5em; }
/* 쪽으로 읽을 때는 짝의 왼쪽과 오른쪽이 각각 한 단(=한 쪽)을 차지한다.
   양면이면 왼쪽 쪽에 원문·발음·낱말이, 오른쪽 쪽에 번역·풀이가 놓인다 —
   종이책에서 원문과 대역을 마주 보게 놓는 것과 같다.
   grid 로 한 쪽 안을 가르는 방법은 단 경계에서 오른쪽이 잘려 나가 쓸 수 없었다.

   `break-before: column` 을 쓰지 않는 이유: 왼쪽이 단을 거의 채운 상태에서 강제로 단을 끊으면
   크롬이 빈 단을 하나 더 만든다(실측: 게송 59개에서 좌 10단 → 빈 11단 → 우 12단, 빈 쪽 86개).
   대신 왼쪽에 한 단 높이를 주어 뒤 내용이 저절로 다음 단으로 넘어가게 한다. */
.reader--page .reader-flow .r-pair-r {
  break-before: column; margin-top: 0;
  min-height: calc(var(--r-colh, 0px) - 1px);
}
/* 번역은 마주 보는 쪽의 한가운데에 선다. 단(=쪽) 높이는 JS 가 --r-colh 로 알려 준다.
   1px 을 덜어 두는 건 반올림으로 한 픽셀만 넘쳐도 다음 단으로 쪼개지기 때문이다. */
.reader--page .reader-flow .r-pair-r { display: flex; flex-direction: column; }
/* 번역은 남는 자리의 세로 가운데, 낱말 풀이는 쪽 맨 아래.
   둘을 한 덩어리로 가운데 세우면 쪽 한복판에 섬처럼 떠 보인다. */
.reader--page .reader-flow .r-pair-main { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; }
.reader--page .reader-flow .r-pair-foot { flex: 0 0 auto; }
/* 구분선은 넘김·스크롤 어느 쪽으로 읽든 있어야 번역과 풀이가 갈린다 */
.r-pair-foot { margin-top: 2em; padding-top: 1.1em; border-top: 1px solid var(--r-line); font-size: .95em; }
.r-pair-foot > *:last-child { margin-bottom: 0; }
/* 각주는 조임이 겹쳐 쌓인다(각주 .95em × 조임 .82em × 메모 .8em = 12.5px, 실측).
   본문 글자는 14px 아래로 내려가지 않게 바닥을 둔다. */
.reader-flow .r-pair-foot :is(p, li) { font-size: max(14px, .9em); }
/* 오른쪽이 길어 한 쪽을 넘칠 때. 왼쪽과 같은 방식으로 두 단계만 둔다(실측으로 정한 값). */
.reader--page .reader-flow .r-pair--rdense .r-pair .r-korean,
.reader--page .reader-flow .r-pair--rdense .r-korean { font-size: 1.05em; }
.reader--page .reader-flow .r-pair--rdense .r-pair-foot { font-size: .88em; margin-top: 1.4em; padding-top: .9em; }
.reader--page .reader-flow .r-pair--rdense2 .r-korean { font-size: .98em; }
.reader--page .reader-flow .r-pair--rdense2 .r-pair-foot { font-size: .82em; line-height: 1.62; margin-top: 1.1em; padding-top: .7em; }
/* 짝이 든 장의 머리 - 게송 번호가 꼭지글(제 1 장 · 144)에 이미 있어 제목까지 크게 둘 이유가 없다.
   423쪽 전부에서 위쪽 여백을 되찾아, 마주 보는 두 쪽의 첫 줄 높이가 맞는다. */
.reader--page .reader-flow section.r-spread-left > .r-kicker { margin: 0 0 2px; }
.reader--page .reader-flow section.r-spread-left > h2 { font-size: 1.12em; margin: 0 0 12px; color: var(--r-muted2); }
/* 짝 안에서는 인용(원문)이 새 단을 열지 않는다 - 게송 하나가 여러 쪽으로 쪼개진다.
   oneAtATime 책의 규칙(명시도 0-4-0)이 이기지 않도록 같은 무게로 맞춘다. */
.reader--one.reader--page .reader-flow .r-pair .r-quote,
.reader--page .reader-flow .r-pair .r-quote {
  break-before: auto; margin-top: 0; font-size: 1.12em;
}
.reader--one.reader--page .reader-flow .r-pair .r-korean,
.reader--page .reader-flow .r-pair .r-korean { break-before: auto; font-size: 1.2em; }
.reader-flow .r-pair-l .r-ref { margin: 0 0 14px; }
.reader-flow .r-pair-l .r-translit { margin: -4px 0 10px; }
/* 왼쪽(원문·발음·낱말)이 한 쪽을 넘으면 번역이 다음 펼침면으로 밀려 마주 보지 않는다.
   긴 게송도 한 쪽에 들어가도록 쪽 모드에서만 줄간과 여백을 조인다. */
.reader--page .reader-flow .r-pair-l .r-quote { font-size: 1.05em; line-height: 1.5; margin-bottom: 6px; }
.reader--page .reader-flow .r-pair-l .r-translit { font-size: .92em; margin: 0 0 8px; }
.reader--page .reader-flow .r-pair-l .r-ref { font-size: .95em; line-height: 1.62; margin: 0 0 18px; }
.reader--page .reader-flow .r-pair-l .r-ref li { margin: 0; }
.reader--page .reader-flow .r-pair-l > *:last-child { margin-bottom: 0; }
/* 낱말이 많은 게송은 더 조인다. 기준은 실측 - 항목 19개를 넘으면 한 쪽에서 넘쳤다. */
.reader--page .reader-flow .r-pair--dense .r-pair-l .r-quote { font-size: .96em; line-height: 1.45; margin-bottom: 4px; }
.reader--page .reader-flow .r-pair--dense .r-pair-l .r-translit { font-size: .86em; margin: 0 0 6px; }
.reader--page .reader-flow .r-pair--dense .r-pair-l .r-ref { font-size: .88em; line-height: 1.5; margin: 0 0 13px; }
/* 스물여섯 개를 넘는 게송(20·144편 등)은 한 단계 더. 실측으로 남은 두 편이 사라졌다. */
.reader--page .reader-flow .r-pair--dense2 .r-pair-l .r-quote { font-size: .86em; line-height: 1.4; margin-bottom: 2px; }
.reader--page .reader-flow .r-pair--dense2 .r-pair-l .r-translit { font-size: .78em; margin: 0 0 3px; }
.reader--page .reader-flow .r-pair--dense2 .r-pair-l .r-ref { font-size: .77em; line-height: 1.36; margin: 0 0 5px; }
/* 그래도 안 들어가는 게송(낱말 20개 넘는 것 둘). 글자를 더 줄이면 14px 아래로 내려가므로
   줄이는 대신 낱말 목록을 두 단으로 접는다 - 높이가 절반이 되고 글자 크기는 그대로다. */
.reader--page .reader-flow .r-pair--dense3 .r-pair-l .r-ref {
  columns: 2; column-gap: 1.6em; font-size: .8em; line-height: 1.44;
}
.reader--page .reader-flow .r-pair--dense3 .r-pair-l .r-ref li { break-inside: avoid; }

/* 재조판 중 표시 - 큰 책은 글자 크기·모드를 바꿀 때 0.3~1초 걸린다.
   아무 표시가 없으면 눌러도 반응이 없는 것처럼 느껴진다. */
/* 흐리게 하는 것은 본문만. 알약을 무대 안에 두면 부모의 opacity 를 같이 받아
   글씨까지 희미해진다. 알약은 .reader 에 붙여 제 색을 지킨다. */
.reader--busy .reader-flow { opacity: .32; transition: opacity .12s; }
.reader--busy .reader-stage { pointer-events: none; }
.reader--busy::after {
  content: "쪽 다시 세는 중"; position: fixed; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  padding: 11px 20px; border-radius: 999px;
  border: 1px solid var(--r-line-strong); background: var(--r-surface);
  color: var(--r-ink); font-family: var(--sans); font-size: 14px; white-space: nowrap;
  box-shadow: 0 8px 26px rgba(0, 0, 0, .18); z-index: 340;
}

/* ── 형광펜·밑줄·메모 ─────────────────────────────────────────
   <mark> 은 글자를 더하지 않으므로 글자 번호가 그대로다 — 표시를 지웠다 다시 칠해도
   자리가 밀리지 않는다. 색은 테마마다 다르게 잡지 않고 반투명으로 얹어 어느 테마에서나 읽힌다. */
.r-ann { background: transparent; color: inherit; border-radius: 2px; }
.r-ann--highlight { padding: .06em 0; }
.r-ann--highlight.r-ann--yellow { background: rgba(232, 196, 74, .38); }
.r-ann--highlight.r-ann--green  { background: rgba(106, 176, 130, .34); }
.r-ann--highlight.r-ann--blue   { background: rgba(102, 152, 214, .32); }
.r-ann--highlight.r-ann--pink   { background: rgba(214, 120, 152, .32); }
.r-ann--underline { background: transparent; border-bottom: 2px solid currentColor; }
.r-ann--underline.r-ann--yellow { border-bottom-color: rgba(232, 196, 74, .95); }
.r-ann--underline.r-ann--green  { border-bottom-color: rgba(106, 176, 130, .9); }
.r-ann--underline.r-ann--blue   { border-bottom-color: rgba(102, 152, 214, .9); }
.r-ann--underline.r-ann--pink   { border-bottom-color: rgba(214, 120, 152, .9); }
/* 메모가 달린 표시는 끝에 점을 찍어 '눌러 볼 것이 있다'를 알린다 */
.r-ann--noted::after { content: ""; display: inline-block; width: 5px; height: 5px; margin-left: 3px;
  vertical-align: .35em; border-radius: 50%; background: var(--r-accent); }
mark.r-ann { cursor: pointer; }

/* 고른 글 위에 뜨는 막대 */
.r-annbar { position: absolute; z-index: 40; display: flex; align-items: center; gap: 6px;
  padding: 7px 9px; border: 1px solid var(--r-line-strong); border-radius: 12px;
  background: var(--r-surface); box-shadow: 0 8px 22px rgba(0,0,0,.24); }
.r-annbar[hidden] { display: none; }
.r-annbar-color { width: 22px; height: 22px; padding: 0; border: 1px solid var(--r-line-strong);
  border-radius: 50%; cursor: pointer; }
.r-annbar-color--yellow { background: rgba(232, 196, 74, .85); }
.r-annbar-color--green  { background: rgba(106, 176, 130, .85); }
.r-annbar-color--blue   { background: rgba(102, 152, 214, .85); }
.r-annbar-color--pink   { background: rgba(214, 120, 152, .85); }
.r-annbar-btn { display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; padding: 0; border: 1px solid var(--r-line); border-radius: 8px;
  background: transparent; color: var(--r-ink); cursor: pointer; }
.r-annbar-btn:hover, .r-annbar-btn:focus-visible, .r-annbar-color:hover, .r-annbar-color:focus-visible {
  border-color: var(--r-accent); outline: none; }
.r-annbar-btn svg { width: 17px; height: 17px; fill: none; stroke: currentColor;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* 목차 패널의 형광펜·메모 목록 */
.toc-ann button[data-mark] { display: grid; gap: 3px; }
.toc-ann-swatch { display: inline-block; width: 26px; height: 4px; border-radius: 2px; }
.toc-ann-swatch.r-ann--yellow { background: rgba(232, 196, 74, .9); }
.toc-ann-swatch.r-ann--green  { background: rgba(106, 176, 130, .9); }
.toc-ann-swatch.r-ann--blue   { background: rgba(102, 152, 214, .9); }
.toc-ann-swatch.r-ann--pink   { background: rgba(214, 120, 152, .9); }
.toc-ann-quote { color: var(--r-ink); }
.toc-ann-note { color: var(--r-muted2); font-size: 14px; }

/* ── 패널 머리(제목 + 큰 닫기 단추) ─────────────────────────── */
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 2px 6px 10px; border-bottom: 1px solid var(--r-line); margin-bottom: 8px; }
.panel-head h2 { margin: 0; font-family: var(--sans); font-size: 15px; letter-spacing: .04em; color: var(--r-muted); }
.panel-close { display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0; border: 1px solid var(--r-line); border-radius: 10px;
  background: transparent; color: var(--r-muted); cursor: pointer; }
.panel-close:hover, .panel-close:focus-visible { color: var(--r-ink-strong); border-color: var(--r-accent); outline: none; }
.panel-close svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }

/* 설정 초기화 */
.set-reset { width: 100%; min-height: 44px; padding: 11px 14px; border: 1px solid var(--r-line);
  border-radius: 10px; background: transparent; color: var(--r-muted); font-family: var(--sans);
  font-size: 14px; cursor: pointer; }
.set-reset:hover, .set-reset:focus-visible { border-color: var(--r-accent); color: var(--r-ink-strong); outline: none; }
.set-reset--armed { border-color: var(--r-accent); color: var(--r-accent); }

/* 읽던 자리가 어디에 남는지 — 계정에 남으면 기기를 옮겨도 이어진다 */
.reader-sync { flex: 0 0 auto; font-family: var(--sans); font-size: 14px; color: var(--r-muted2); white-space: nowrap; }
.reader-sync[data-on="true"] { color: var(--r-accent); }

/* ── 휴대폰: 패널을 아래에서 올라오는 시트로 ──────────────────
   좁은 화면에서 패널이 화면 한가운데 떠 있으면 한 손으로 닫기 어렵다.
   아래에 붙이면 엄지가 닿는다. 노치·홈 인디케이터는 safe-area 로 피한다. */
@media (max-width: 760px) {
  .reader-panel {
    top: auto; bottom: 0; left: 0; right: 0; width: auto;
    max-height: min(74vh, 560px);
    border-radius: 18px 18px 0 0;
    border-width: 1px 0 0;
    padding-bottom: max(14px, env(safe-area-inset-bottom));
    box-shadow: 0 -12px 30px rgba(0, 0, 0, .28);
  }
  .panel-head { position: sticky; top: 0; z-index: 1; background: var(--r-surface); }
}

/* 노치·둥근 모서리 피하기.
   safe-area 를 그냥 대입하면 노치가 없는 화면(데스크톱·구형 기기)에서 0 이 되어
   원래 여백까지 지운다 — 실제로 상단 도구가 화면 맨 위에 붙어 버렸다.
   원래 여백에 더한다. */
.reader-topbar { padding-top: calc(12px + env(safe-area-inset-top, 0px)); }
.reader-bottombar { padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
.reader-stage { padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); }

/* 그림 블록 — 조판이 단(쪽) 안에 넣을 수 있어야 한다.
   단 높이(--r-colh)는 JS 가 알려 준다. 스크롤 모드에는 그 값이 없으므로 vh 로 받는다. */
.r-figure { break-inside: avoid; margin: 1.4em auto; text-align: center; }
/* 높이를 확정값으로 준다 — width/height 를 auto 로 두면 아직 안 받은 그림이
   0×0 으로 잡혀 자리를 못 잡고, 그림이 뜨는 순간 글이 밀린다.
   높이가 정해지면 width/height 속성에서 나온 aspect-ratio 로 폭이 계산된다. */
.r-figure img {
  display: block; margin: 0 auto;
  height: min(calc(var(--r-colh, 70vh) * 0.58), 460px);
  width: auto; max-width: 100%;
  object-fit: contain;
  border-radius: 4px;
}
.r-figure figcaption {
  margin-top: .5em; color: var(--r-muted, #6b6b6b);
  font-size: max(14px, .82em); line-height: 1.5; text-align: center;
}