/* 에테르 라이브러리 · library.css
   EtherXync 공통 뼈대(/assets/xync.css) 위에 얹는 서가·책·읽기 화면. 색·간격·움직임은 xync.css 의 토큰을 쓴다.
   표지는 우주 속의 광원이다: 페이지의 채도는 표지가 번지는 빛(--g1 윗그림, --g2 아래 띠)에서만 나온다.
   제목(서가·책·소개)은 --f-display, 읽기 화면은 Noto Serif KR 그대로.
   움직임: 저절로 움직이는 것은 서가 첫 화면의 빛 번짐 한 번뿐. 나머지(표지 기울기·빛 미끄러짐·카드 들림)는
   포인터와 포커스에 대한 응답이고, prefers-reduced-motion 이면 멈춘다.
   표지 이어 붙이기: 서가 카드와 책 소개의 큰 표지가 view-transition-name: cover-<slug> 를 나눠 가진다(한 페이지에 한 번). */

:root {
  --f-read: "Noto Serif KR", "Noto Serif CJK KR", "Source Han Serif K", "Nanum Myeongjo", "AppleMyungjo", serif;
  --acc: var(--ether);          /* 글자·선으로 쓰는 강조. 종이 테마에서 짙어진다 */
  --trail: var(--xync);         /* 내가 읽은 자취(진도). 사람의 온기 */
  --read-ink: #D5DCE5;          /* 밤 화면 본문 */
  --hover: rgba(255, 255, 255, 0.06);
  --measure: 34em;
  --fs-read: 17.5px;
  --lock: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'><rect x='4.5' y='10.5' width='15' height='10' rx='2.5'/><path d='M8 10.5V7.5a4 4 0 0 1 8 0v3'/></svg>");
}
@media (min-width: 700px) { :root { --fs-read: 18.5px; } }
[hidden] { display: none !important; }
.lib h1, .lib h2, .lib h3 { text-wrap: balance; }
.book-blurb p, .about-sec > p, .free-box p, .pr-list p, .book-access { text-wrap: pretty; }
.no-js .js-only { display: none !important; }

/* ───── 라이브러리 줄 (전역 머리 아래) ───── */
.lib-bar { border-bottom: 1px solid var(--line); }
.lib-bar-in { display: flex; align-items: center; justify-content: space-between; gap: 8px 24px; min-height: 54px; }
.lib-path { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.lib-name { display: inline-flex; align-items: baseline; gap: 10px; white-space: nowrap; }
.lib-name .ko { font-family: var(--f-read); font-weight: 600; font-size: 1rem; letter-spacing: -0.02em; }
.lib-name .en { font-family: var(--f-serif); font-style: italic; font-size: 1.1rem; color: var(--text-3); letter-spacing: 0; }
.lib-name:hover .en { color: var(--text-2); }
.lib-path .sep { color: var(--text-3); opacity: .6; }
.lib-path .crumb { color: var(--text-2); font-size: .92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.lib-path .crumb:hover { color: var(--text); }
.lib-links { display: flex; gap: 2px; flex: none; }
.lib-links a { display: inline-flex; align-items: center; height: 38px; padding: 0 12px; border-radius: var(--r-pill);
  color: var(--text-2); font-size: .9rem; font-weight: 600; transition: color var(--d-2), background var(--d-2); }
.lib-links a:hover { color: var(--text); background: var(--hover); }
.lib-links a[aria-current="page"] { color: var(--text); }
@media (max-width: 640px) {
  .lib-bar-in { gap: 8px; }
  .lib-name .en, .lib-path .sep, .lib-path .crumb { display: none; }
  .lib-links a { height: 44px; padding: 0 9px; }
}

.sec-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 24px; }
.sec-head h2, .lib-free h2 { font-family: var(--f-display); font-weight: var(--w-display); font-size: clamp(1.7rem, 2.9vw, 2.3rem); letter-spacing: -0.02em; line-height: 1.25; }
.sec-head p { color: var(--text-2); font-size: .95rem; }
.more { margin-top: 32px; }
.more a { font-weight: 600; color: var(--text); border-bottom: 1px solid var(--line-input); padding-bottom: 2px; transition: color var(--d-2), border-color var(--d-2); }
.more a:hover { color: var(--ether); border-color: var(--ether); }

/* ───── 첫 화면: 머리글과 빛나는 표지 셋 ───── */
.lib-hero { display: grid; gap: 8px; align-items: center; padding-block: clamp(20px, 5vw, 72px) clamp(40px, 6vw, 88px); }
@media (min-width: 960px) { .lib-hero { grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr); gap: 40px; } }
.hero-text { min-width: 0; }
.lib-hero h1 { font-family: var(--f-display); font-weight: var(--w-display); font-size: clamp(2.6rem, 5.7vw, 4.6rem); line-height: 1.18; letter-spacing: -0.03em; }
.lib-hero .lede { text-wrap: pretty; margin-top: 28px; max-width: 31em; font-size: clamp(1.03rem, 1.3vw, 1.14rem); line-height: 1.9; color: var(--text-2); }
.hero-access { text-wrap: pretty; margin-top: 16px; max-width: 31em; font-size: 1rem; line-height: 1.8; color: var(--text); }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }

/* 부채꼴 표지 셋. --nx·--ny(-1~1)는 library.js 가 포인터 자리로 넣는다(마우스·펜만).
   .hero-fan 이 통째로 포인터 쪽으로 돌아서고(최대 6도), 가운데 표지는 앞에 떠 있어 서로 어긋나 보인다.
   표지마다 빛 띠(::after)가 포인터를 따라 미끄러지고, 처음 열 때 한 번 왼쪽에서 오른쪽으로 지나간다(::before). */
.hero-covers { position: relative; height: clamp(300px, 38vw, 500px); isolation: isolate; perspective: 1400px; perspective-origin: 50% 46%; }
.hero-covers .hc, .hero-covers .hg { position: absolute; top: 50%; left: 50%; width: clamp(132px, 15vw, 214px); aspect-ratio: 2 / 3; }
.hero-covers img { width: 100%; height: 100%; object-fit: cover; }
.hc1 { --x: -124%; --y: -46%; --r: -6deg; --so: .74; }
.hc2 { --x: -50%; --y: -54%; --r: 0deg; --so: 0; }
.hc3 { --x: 24%; --y: -46%; --r: 6deg; --so: -.74; }
.hg { z-index: 0; transform: translate(var(--x), var(--y)) rotate(var(--r)); }   /* 번진 빛은 움직이지 않는다(흐림이 큰 층을 옮기면 비싸다) */
.hg img { filter: blur(42px) saturate(1.5); opacity: .58; transform: scale(1.25); }
.hero-fan { position: absolute; inset: 0; z-index: 1; transform-style: preserve-3d;
  transform: rotateX(calc(var(--ny, 0) * -4deg)) rotateY(calc(var(--nx, 0) * 6deg)); }
.hero-covers.is-tilting .hero-fan { will-change: transform; }
.hc { overflow: hidden; border-radius: 4px; background: var(--card);
  box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 40px 70px -28px rgba(0,0,0,.9);
  transform: translate3d(var(--x), var(--y), 0) rotate(var(--r)); }
.hc.hc2 { transform: translate3d(var(--x), var(--y), 36px); }
/* 빛 띠: 카드 폭의 네 배인 띠 한가운데에 밝은 줄이 있다. translateX 25% = 카드 폭 하나 */
.hc::before, .hc::after { content: ""; position: absolute; top: -20%; bottom: -20%; left: -150%; right: -150%; pointer-events: none;
  background: linear-gradient(104deg, transparent 34%, rgba(255,255,255,.28) 43%, rgba(255,255,255,.7) 50%, rgba(255,255,255,.28) 57%, transparent 66%);
  mix-blend-mode: soft-light; opacity: 0; }
.hc::after { transform: translateX(calc((var(--nx, 0) * 1.6 + var(--so)) * 25%)); transition: opacity var(--d-3) var(--ease-out); }
.hero-covers.is-lit .hc::after { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .hg img { animation: lib-glow 2.4s var(--ease-out) both; }
  .hg.hc2 img { animation-delay: .15s; } .hg.hc3 img { animation-delay: .3s; }
  .hc::before { animation: lib-sheen 1.15s var(--ease-in-out) .5s both; }
  .hc.hc2::before { animation-delay: .8s; } .hc.hc3::before { animation-delay: 1.1s; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-fan { --nx: 0; --ny: 0; }
  .hc::after { display: none; }
}
@keyframes lib-glow { from { opacity: 0; transform: scale(.8); } }
@keyframes lib-sheen {
  from { opacity: 0; transform: translateX(-32%); }
  30% { opacity: 1; }
  70% { opacity: 1; }
  to { opacity: 0; transform: translateX(32%); }
}
.lib main { overflow-x: clip; }            /* 표지 빛이 화면 밖으로 번져도 가로 스크롤이 생기지 않게 */
@media (max-width: 959px) {
  .hero-covers { order: -1; height: clamp(250px, 64vw, 340px); }
  .hero-covers .hc, .hero-covers .hg { width: clamp(112px, 30vw, 170px); }
}

/* 이어 읽기 (회원 기록 또는 이 기기의 기록) */
.resume { display: grid; grid-template-columns: 46px minmax(0, 1fr); grid-template-rows: auto auto auto auto; column-gap: 16px;
  align-items: center; margin-top: 30px; max-width: 25rem; padding: 12px 18px 14px 12px; border-radius: var(--r-md);
  border: 1px solid var(--line-2); background: var(--card);
  transition: border-color var(--d-2), transform var(--d-2) var(--ease-out); }
.resume:hover { border-color: rgba(255, 138, 102, .5); transform: translateY(-1px); }
.resume-cover { grid-row: 1 / span 4; width: 46px; height: 69px; border-radius: 3px; overflow: hidden; background: var(--card); align-self: center; }
.resume-cover img { width: 100%; height: 100%; object-fit: cover; }
.resume-k { font-size: .8rem; font-weight: 650; color: var(--trail); line-height: 1.5; }
.resume-t { font-family: var(--f-read); font-weight: 600; line-height: 1.45; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.resume-c { display: flex; justify-content: space-between; gap: 12px; font-size: .86rem; color: var(--text-2); line-height: 1.6; min-width: 0; }
.resume-c > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc { font-variant-numeric: tabular-nums; color: var(--trail); font-weight: 650; flex: none; }
.resume-bar { display: block; height: 2px; margin-top: 7px; border-radius: 2px; background: var(--line-2); overflow: hidden; }
.resume-bar span { display: block; height: 100%; width: 0; background: var(--trail); border-radius: inherit; }

/* ───── 서가 ───── */
.lib-shelf { padding-block: clamp(16px, 3vw, 32px) clamp(56px, 8vw, 104px); scroll-margin-top: var(--header-h); }
.lib-shelf .sec-head { margin-bottom: 18px; }
.shelf-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 18px; grid-auto-flow: row dense; }
.cat-group { grid-column: 1 / -1; min-width: 0; padding: 20px 0 40px; border-top: 1px solid var(--line); scroll-margin-top: var(--header-h); }
.cat-group.n1 { grid-column: span 1; }
.cat-label { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-bottom: 24px; }
.cat-rule { width: 18px; height: 2px; border-radius: 2px; background: var(--c2); flex: none; }
.cat-label h3 { font-size: .96rem; font-weight: 650; letter-spacing: -0.01em; line-height: 1.4; }
.cat-label .count { font-size: .84rem; color: var(--text-3); }
.book-grid { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 18px; }
.n1 .book-grid { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 600px) {
  .shelf-groups { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 28px; }
  .cat-group.n2 { grid-column: span 2; }
  .book-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 28px; }
  .n2 .book-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 960px) {
  .shelf-groups { grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: 32px; }
  .cat-group { padding: 24px 0 48px; }
  .cat-group.n3 { grid-column: span 3; } .cat-group.n4 { grid-column: span 4; } .cat-group.n5 { grid-column: span 5; }
  .book-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 44px 32px; }
  .n3 .book-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .n4 .book-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .n5 .book-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
.book-card a { display: block; border-radius: 6px; }
/* 표지 카드: 서가에 놓인 책. 누르거나 포커스가 가면 책이 들려 앞으로 나온다(그림자가 멀어지고 번진다).
   들린 그림자는 ::before 에 미리 그려 두고 투명도만 바꾼다. 표지 img 는 cover-<slug> 로 책 소개의 큰 표지와 이어진다. */
.book-card .cover { position: relative; display: block; aspect-ratio: 2 / 3; border-radius: 4px; background: var(--card); isolation: isolate;
  box-shadow: 0 0 0 1px rgba(255,255,255,.06), 0 2px 4px -1px rgba(0,0,0,.5), 0 18px 30px -20px rgba(0,0,0,.9), 0 26px 46px -30px rgb(var(--g2) / .9);
  transition: transform var(--d-3) var(--ease-expo); }
.book-card .cover::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; opacity: 0; pointer-events: none;
  box-shadow: 0 12px 18px -8px rgba(0,0,0,.55), 0 40px 56px -24px rgba(0,0,0,.92), 0 48px 80px -34px rgb(var(--g2) / 1);
  transition: opacity var(--d-3) var(--ease-expo); }
.book-card .cover img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; view-transition-class: cover; }
.book-card a:focus-visible .cover { transform: translateY(-8px) scale(1.02); }
.book-card a:focus-visible .cover::before { opacity: 1; }
@media (hover: hover) {
  .book-card a:hover .cover { transform: translateY(-8px) scale(1.02); }
  .book-card a:hover .cover::before { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .book-card a .cover { transform: none !important; } }
.bc-title { display: block; margin-top: 18px; font-family: var(--f-display); font-weight: var(--w-display-strong); font-size: 1.08rem; line-height: 1.4; letter-spacing: -0.02em; }
.bc-author { display: block; margin-top: 2px; font-size: .87rem; color: var(--text-2); line-height: 1.5; }
.bc-progress { display: flex; gap: 8px; margin-top: 6px; font-size: .82rem; color: var(--text-2); line-height: 1.5; }
.bc-progress .lab { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.bc-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(7, 10, 15, .6); border-radius: 0 0 4px 4px; overflow: hidden; }
.bc-bar span { display: block; height: 100%; width: 0; background: var(--trail); }
.lib-badge { position: absolute; top: 10px; left: 10px; background: rgba(7, 10, 15, .8); color: var(--text); font-size: .74rem; font-weight: 650;
  line-height: 1; padding: 6px 9px; border-radius: var(--r-pill); }
.is-coming .cover img { filter: grayscale(.6) saturate(.7); opacity: .72; }

/* ───── 번역 원칙 ───── */
.lib-principles { padding-block: clamp(56px, 8vw, 104px); border-top: 1px solid var(--line); scroll-margin-top: var(--header-h); }
.pr-list { list-style: none; display: grid; gap: 36px 40px; margin-top: 40px; }
@media (min-width: 720px) { .pr-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .lib-principles .pr-list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.pr-list li { padding-top: 22px; border-top: 1px solid var(--line-2); }
.pr-list h3 { font-family: var(--f-read); font-weight: 600; font-size: 1.22rem; letter-spacing: -0.025em; line-height: 1.4; }
.pr-list p { margin-top: 10px; color: var(--text-2); font-size: .97rem; line-height: 1.85; }

/* ───── 무료로, 자유롭게 ───── */
.lib-free { display: grid; gap: 18px 40px; padding-block: clamp(48px, 7vw, 96px) clamp(64px, 9vw, 120px); border-top: 1px solid var(--line); }
@media (min-width: 960px) { .lib-free { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); } }
.free-box { max-width: 42rem; }
.free-box p { color: var(--text-2); line-height: 1.85; }
.free-box p + p { margin-top: 14px; }
.free-box p a, .about-sec p a:not(.btn), .colophon a { color: var(--text); border-bottom: 1px solid var(--line-input); }
.free-box p a:hover, .about-sec p a:not(.btn):hover, .colophon a:hover { border-color: var(--text); }
.free-cta, .about-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }

/* ───── 책 페이지 ───── */
.book-page { padding-block: clamp(28px, 4vw, 56px) clamp(64px, 8vw, 112px); }
.book-layout { display: grid; gap: 44px; }
/* 큰 표지: 포인터를 올리면 그쪽으로 살짝 돌아서고(최대 5도) 빛이 얹힌다. --nx·--ny 는 library.js 가 넣는다 */
.book-cover { position: relative; width: min(62vw, 270px); margin: 12px auto 0; isolation: isolate; perspective: 1100px; }
@media (min-width: 900px) {
  .book-layout { grid-template-columns: 300px minmax(0, 1fr); gap: 76px; align-items: start; }
  .book-cover { position: sticky; top: calc(var(--header-h) + 32px); width: 100%; margin: 0; }
}
@media (min-width: 1100px) { .book-layout { grid-template-columns: 330px minmax(0, 1fr); gap: 96px; } }
.book-cover img { display: block; width: 100%; height: auto; border-radius: 5px; }
.book-cover .glow { position: absolute; inset: 0; height: 100%; object-fit: cover; z-index: -1; filter: blur(64px) saturate(1.7);
  opacity: .72; transform: scale(1.22) translateY(4%); }
.cover-frame { position: relative; display: block; border-radius: 5px;
  transform: rotateX(calc(var(--ny, 0) * -5deg)) rotateY(calc(var(--nx, 0) * 5deg)); }
.book-cover.is-tilting .cover-frame { will-change: transform; }
/* 테두리 빛과 그림자는 img 에 둔다: 전환 때 이름 붙은 img 와 함께 옮겨 가야 빈 테두리가 먼저 보이지 않는다 */
.book-cover .cover { box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 50px 90px -40px rgba(0,0,0,.95); view-transition-class: cover; }
.cover-sheen { position: absolute; inset: 0; overflow: hidden; border-radius: 5px; pointer-events: none; opacity: 0;
  transition: opacity var(--d-3) var(--ease-out); }
.cover-sheen::before { content: ""; position: absolute; top: -20%; bottom: -20%; left: -150%; right: -150%;
  background: linear-gradient(104deg, transparent 34%, rgba(255,255,255,.22) 43%, rgba(255,255,255,.55) 50%, rgba(255,255,255,.22) 57%, transparent 66%);
  transform: translateX(calc(var(--nx, 0) * 1.3 * 25%)); }
.cover-sheen { mix-blend-mode: soft-light; }
.book-cover.is-lit .cover-sheen { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .book-cover { --nx: 0 !important; --ny: 0 !important; } .cover-sheen { display: none; } }
.is-coming .book-cover .cover { filter: grayscale(.5) saturate(.75); opacity: .85; }
.book-info { min-width: 0; }
/* 분야(이름에 가운뎃점이 든 것도 있다)와 총서 번호: 제목 위 머리표가 아니라 지은이·번역 아래의 정보 줄 */
.book-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 16px; }
.cat-chip { display: inline-flex; align-items: center; min-height: 30px; padding: 0 12px; border-radius: var(--r-pill);
  border: 1px solid color-mix(in srgb, var(--c2) 38%, transparent); color: var(--c2); font-size: .84rem; font-weight: 650;
  transition: background var(--d-2); }
.cat-chip:hover { background: color-mix(in srgb, var(--c2) 10%, transparent); }
.series { font-size: .88rem; color: var(--text-3); font-variant-numeric: tabular-nums; }
.book-title { font-family: var(--f-display); font-weight: var(--w-display); font-size: clamp(2.5rem, 5.4vw, 3.9rem); line-height: 1.15; letter-spacing: -0.03em; }
.book-orig { margin-top: 8px; font-family: var(--f-serif); font-style: italic; font-size: clamp(1.3rem, 2.1vw, 1.65rem); line-height: 1.3; color: var(--text-2); }
.book-author { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-top: 24px; }
.book-author .au { font-weight: 650; font-size: 1.06rem; }
.book-author .au-orig { font-size: .92rem; color: var(--text-3); }
.book-source { margin-top: 8px; font-size: .95rem; color: var(--text-2); }
.src-label { display: inline-block; font-size: .76rem; font-weight: 650; color: var(--text-3); border: 1px solid var(--line-2); border-radius: 6px;
  padding: 0 7px; margin-right: 9px; line-height: 1.7; vertical-align: 1px; }
.book-tagline { text-wrap: pretty; margin-top: 30px; max-width: 30em; font-family: var(--f-read); font-size: clamp(1.14rem, 1.6vw, 1.3rem); line-height: 1.8; color: var(--text); }
.book-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.btn-resume { flex-wrap: wrap; row-gap: 0; order: -1; }
@media (max-width: 560px) {
  .book-actions, .book-files { flex-direction: column; align-items: stretch; }
  .book-actions .btn, .book-files .btn { width: 100%; }
}
.btn-resume .sub { font-weight: 500; font-size: .9rem; opacity: .85; display: inline-flex; gap: 8px; }
.btn-resume.btn-primary .pc { color: inherit; }
.book-files { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.btn-dl svg { width: 18px; height: 18px; flex: none; }
.btn-dl .size { color: var(--text-3); font-weight: 500; font-size: .84rem; font-variant-numeric: tabular-nums; }
.book-access { margin-top: 18px; max-width: 44em; color: var(--text); font-size: .96rem; line-height: 1.75; }
.book-rights { margin-top: 6px; max-width: 40em; color: var(--text-3); font-size: .86rem; line-height: 1.7; }
.book-coming { margin-top: 28px; padding: 18px 22px; border: 1px dashed var(--line-2); border-radius: var(--r-md); max-width: 34rem; color: var(--text-2); }
.book-coming .lib-badge { position: static; display: inline-block; margin-bottom: 8px; }
.book-sec { margin-top: clamp(56px, 7vw, 76px); max-width: 44rem; scroll-margin-top: calc(var(--header-h) + 16px); }
.book-sec > h2 { font-family: var(--f-display); font-weight: var(--w-display); font-size: 1.5rem; letter-spacing: -0.02em; line-height: 1.35;
  padding-bottom: 14px; margin-bottom: 20px; border-bottom: 1px solid var(--line); }
.book-blurb p { color: var(--text-2); font-size: 1.03rem; line-height: 1.95; }
.book-blurb p + p { margin-top: 16px; }
.book-blurb strong { color: var(--text); font-weight: 650; }
.highlights { list-style: none; padding: 0; color: var(--text-2); }
.highlights li + li { margin-top: 10px; }
.highlights.is-quotes li { font-family: var(--f-read); font-size: 1.06rem; line-height: 1.85; color: var(--text); border-left: 1px solid var(--line-2); padding: 2px 0 2px 20px; }
.highlights.is-quotes li + li { margin-top: 20px; }
.toc-note { font-size: .9rem; color: var(--text-2); margin: -6px 0 10px; }

/* ───── 차례 (책 페이지와 읽기 화면의 서랍) ───── */
.toc ol { list-style: none; margin: 0; padding: 0; }
.toc > ol > li { border-bottom: 1px solid var(--line); }
.toc a { display: flex; align-items: baseline; gap: .5em; padding: 12px 2px; color: var(--text); font-family: var(--f-read); line-height: 1.6; transition: color var(--d-1); }
.toc a:hover, .toc a:hover .t-name { color: var(--acc); }
.t-lab { font-weight: 600; flex: none; white-space: nowrap; }
.t-name { flex: 0 1 auto; color: var(--text-2); min-width: 0; transition: color var(--d-1); }
.toc ol ol { margin: 0 0 12px 3px; padding-left: 16px; border-left: 1px solid var(--line-2); }
.toc ol ol a { padding: 6px 2px; font-size: .95em; }
.toc ol ol .t-lab { font-weight: 500; }
.toc-group { font-size: .8rem; font-weight: 650; color: var(--text-3); margin: 26px 0 4px; }
.toc-group:first-child { margin-top: 4px; }
.toc .is-current > a, .toc .is-current > a .t-name { color: var(--acc); }
.toc .is-current > a { position: relative; }
.toc .is-current > a::before { content: ""; position: absolute; left: -12px; top: 1.3em; width: 5px; height: 5px; border-radius: 50%; background: var(--acc); }
.toc-grid > ol { display: grid; grid-template-columns: repeat(auto-fill, minmax(6.2em, 1fr)); column-gap: 24px; }
.lib-guest .toc .is-member > a::after, .lib-guest .pager a.is-member .dir::after {
  content: ""; flex: none; width: 13px; height: 13px; background: currentColor; opacity: .6;
  -webkit-mask: var(--lock) center / contain no-repeat; mask: var(--lock) center / contain no-repeat; }
.lib-guest .toc .is-member > a::after { margin-left: auto; align-self: center; color: var(--text-3); }

/* ───── 판권 ───── */
.colophon { font-size: .92rem; line-height: 1.85; color: var(--text-2); }
.colophon p { margin: .6em 0; }
.colophon h3 { font-family: var(--f-read); font-size: 1.05rem; font-weight: 600; color: var(--text); margin: 1.5em 0 .4em; letter-spacing: -0.02em; }
.colophon h4 { font-size: .84rem; font-weight: 650; color: var(--text-3); margin: 1.5em 0 .3em; letter-spacing: 0; }
.colophon hr.scene { border: 0; border-top: 1px solid var(--line); margin: 1.5em 0; height: 0; width: 56px; }
.colophon .table-wrap { overflow-x: auto; margin: .8em 0; }
.colophon table { border-collapse: collapse; font-size: .9rem; line-height: 1.6; }
.colophon td, .colophon th { border-bottom: 1px solid var(--line); padding: 6px 16px 6px 0; text-align: left; vertical-align: top; }
.colophon ul { padding-left: 1.2em; }
.colophon i.orig, .colophon em { font-style: italic; }

/* ───── 소개 ───── */
.about { padding-block: clamp(40px, 7vw, 88px) clamp(64px, 9vw, 120px); }
.about-head h1 { font-family: var(--f-display); font-weight: var(--w-display); font-size: clamp(2.3rem, 5.2vw, 3.5rem); line-height: 1.18; letter-spacing: -0.03em; }
.about-head .lede { margin-top: 26px; font-size: 1.08rem; line-height: 1.95; color: var(--text-2); }
.about-sec { margin-top: clamp(56px, 8vw, 88px); scroll-margin-top: calc(var(--header-h) + 16px); }
.about-sec > h2 { font-family: var(--f-display); font-weight: var(--w-display); font-size: 1.65rem; letter-spacing: -0.02em; line-height: 1.35;
  padding-bottom: 14px; margin-bottom: 20px; border-bottom: 1px solid var(--line); }
.about-sec > p { color: var(--text-2); font-size: 1.02rem; line-height: 1.95; }
.about-sec > p + p { margin-top: 14px; }
.about .pr-list { margin-top: 30px; }
.src-wrap { overflow-x: auto; margin-top: 26px; }
.src-table { border-collapse: collapse; width: 100%; font-size: .93rem; line-height: 1.6; }
.src-table th { font-size: .8rem; font-weight: 650; color: var(--text-3); text-align: left; padding: 10px 14px 10px 0; border-bottom: 1px solid var(--line-2); }
.src-table td { padding: 14px 14px 14px 0; border-bottom: 1px solid var(--line); vertical-align: top; color: var(--text-2); }
.src-table td.num { font-size: .88rem; font-variant-numeric: tabular-nums; color: var(--text-3); width: 4.6em; padding-top: 16px; }
.src-table a { font-family: var(--f-read); font-weight: 600; color: var(--text); }
.src-table a:hover { color: var(--ether); }
.src-table .sub { display: block; font-size: .84rem; color: var(--text-3); }
.kind { display: inline-block; font-size: .78rem; font-weight: 650; border-radius: var(--r-pill); padding: 1px 10px; white-space: nowrap; border: 1px solid var(--line-2); color: var(--text-2); }
.kind-re { border-style: dashed; }
@media (max-width: 599px) { .src-table .num { display: none; } .src-table { font-size: .88rem; } }

/* ───── 404 ───── */
.lib-notfound { padding-block: clamp(72px, 14vw, 168px); text-align: center; }
.lib-notfound .code { font-family: var(--f-display); font-weight: var(--w-display); font-size: clamp(4.5rem, 12vw, 7rem); line-height: 1; color: var(--text-3); font-variant-numeric: lining-nums; }
.lib-notfound h1 { font-family: var(--f-display); font-weight: var(--w-display); font-size: clamp(1.9rem, 4vw, 2.5rem); letter-spacing: -0.02em; margin-top: 18px; }
.lib-notfound p:not(.code) { color: var(--text-2); margin: 14px auto 30px; max-width: 28em; }

/* ───── 표지 이어 붙이기 (페이지 사이 전환) ─────
   전환 켜기(@view-transition), 머리 고정, 자리 옮기는 시간·감속(group(*))은 xync.css 가 정한다.
   여기서는 작은 표지와 큰 표지가 겹쳐 바뀌는 시간만 줄인다. 새 페이지의 규칙이 쓰이므로 홈 서가에서 올 때도 같다.
   전환 중 이름 붙은 덩어리는 문서 순서대로 쌓이므로, 스크롤된 서가로 돌아올 때 위쪽 표지가 머리를 덮지 않게
   머리 덩어리를 위로 올린다. */
::view-transition-group(xy-header) { z-index: 2; }
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(*.cover), ::view-transition-new(*.cover) { animation-duration: var(--d-2); }
  ::view-transition-old(*.cover):only-child { animation-duration: var(--d-1); }   /* 다음 페이지에 없는 표지는 본문과 함께 빨리 사라진다 */
}

/* ════════════════ 읽기 화면 ════════════════ */
:root[data-theme] { scroll-behavior: auto; scroll-padding-top: 76px; }
:root[data-theme="paper"] {
  color-scheme: light;
  --bg: #F3EFE7; --bg-2: #ECE6DB; --panel: #F8F4EC; --card: #FBF8F2; --card-2: #F1ECE2;
  --glass: rgba(250, 247, 241, .88); --veil: rgba(243, 239, 231, .9);
  --line: rgba(52, 44, 30, .12); --line-2: rgba(52, 44, 30, .2); --line-input: rgba(52, 44, 30, .32);
  --text: #19202A; --text-2: #4A515E; --text-3: #737884;
  --read-ink: #232932;
  --acc: #08705E; --trail: #BA4724;
  --ether-dim: rgba(8, 112, 94, .1);
  --hover: rgba(52, 44, 30, .06);
  --shadow-1: 0 1px 2px rgba(52, 44, 30, .06), 0 10px 26px -16px rgba(52, 44, 30, .3);
  --shadow-2: 0 2px 6px rgba(52, 44, 30, .06), 0 30px 70px -30px rgba(52, 44, 30, .45);
}
:root[data-theme="paper"] ::selection { background: rgba(8, 112, 94, .18); color: inherit; }
:root[data-theme="paper"] :focus-visible { outline-color: var(--acc); }
:root[data-theme="paper"] .xy-mark path:first-of-type { stroke: #17B393; }
:root[data-theme="paper"] .xy-mark path:last-of-type { stroke: #EE6E47; }
:root[data-theme="paper"] .xy-mark circle { fill: var(--text); }
:root[data-theme="paper"] .xy-toast, :root[data-theme="paper"] .xy-modal .box { background: var(--card); border-color: var(--line-2); color: var(--text); }
.lib-read { background: var(--bg); }

/* 진행 막대와 도구 막대 */
.read-progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 120; pointer-events: none; }
.read-progress span { display: block; height: 100%; background: var(--acc); transform: scaleX(0); transform-origin: 0 50%; will-change: transform; }
.rbar { position: sticky; top: 0; z-index: 100; display: flex; align-items: center; gap: 2px; height: 60px; padding: 0 12px 0 8px;
  background: var(--veil); -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3);
  border-bottom: 1px solid var(--line); transition: transform .28s var(--ease-out), background var(--d-3); }
.rbar.is-hidden { transform: translateY(-101%); }
.rbar-back { display: inline-flex; align-items: center; gap: 2px; flex: none; height: 44px; padding: 0 12px 0 4px; border-radius: 12px;
  color: var(--text); font-size: .9rem; font-weight: 650; white-space: nowrap; transition: background var(--d-2); }
.rbar-back svg { width: 22px; height: 22px; flex: none; }
.rbar-back:hover { background: var(--hover); }
.rbar-home { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; flex: none; transition: background var(--d-2); }
.rbar-home .xy-mark { width: 26px; height: 26px; }
.rbar-home:hover { background: var(--hover); }
.rbar-title { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; line-height: 1.3; margin-left: 6px; padding: 0 12px; border-left: 1px solid var(--line); }
.rbar-book { font-size: .78rem; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rbar-book:hover { color: var(--text); }
.rbar-chap { font-size: .96rem; font-weight: 650; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: -0.01em; }
.rbar-nav { display: flex; flex: none; }
.ibtn { display: inline-flex; align-items: center; justify-content: center; flex: none; min-width: 44px; height: 44px; padding: 0 10px;
  border: 0; border-radius: 12px; background: transparent; color: var(--text); line-height: 1; transition: background var(--d-2), color var(--d-2); }
.ibtn svg { width: 22px; height: 22px; }
.ibtn:hover { background: var(--hover); }
.ibtn-text { font-size: .9rem; font-weight: 650; }
.rbar-nav span.ibtn { opacity: .28; }
.rbar-theme .i-moon { display: none; }
:root[data-theme="paper"] .rbar-theme .i-sun { display: none; }
:root[data-theme="paper"] .rbar-theme .i-moon { display: block; }
.rbar-account { flex: none; display: flex; align-items: center; justify-content: flex-end; min-width: 44px; margin-left: 6px; visibility: hidden; }
.lib-guest .rbar-account, .lib-member .rbar-account, .no-js .rbar-account { visibility: visible; }
.rbar-account .btn-sm { min-height: 38px; padding: 0 14px; }
.rbar-me { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; }
.rbar-me:hover .avatar { box-shadow: 0 0 0 2px var(--line-input); }
@media (max-width: 560px) {
  .rbar { padding: 0 6px 0 4px; }
  .rbar-nav, .rbar-theme, .rbar-home { display: none; }
  .rbar-back { padding-right: 8px; }
  .rbar-title { margin-left: 2px; padding: 0 8px; }
  .ibtn-text { padding: 0 9px; }
  .rbar-account { margin-left: 2px; }
  .rbar-account .btn-sm { padding: 0 10px; }
}

/* 본문 */
.lib-read main.reader { padding: clamp(44px, 7vw, 84px) 20px 32px; }
.prose { max-width: var(--measure); margin: 0 auto; font-family: var(--f-read); font-size: var(--fs, var(--fs-read)); line-height: 1.95;
  color: var(--read-ink); word-break: keep-all; overflow-wrap: break-word; text-align: start; hanging-punctuation: allow-end; }
.prose [id] { scroll-margin-top: 80px; }
.read-head { text-align: center; margin: 0 0 2.3em; }
.read-head .page-title { font-family: var(--f-read); font-weight: 600; font-size: 1.6em; line-height: 1.45; letter-spacing: -0.03em; color: var(--text); margin: .2em 0 0; }
.read-head .page-title.lv2, .read-head .page-title.lv3 { font-size: 1.36em; }
@media (min-width: 700px) { .read-head .page-title { font-size: 1.78em; } .read-head .page-title.lv2, .read-head .page-title.lv3 { font-size: 1.46em; } }
.read-head .page-title::after { content: ""; display: block; width: 34px; height: 1px; background: var(--line-input); margin: 1.1em auto 0; }
.read-head .h-lab { display: block; }
.read-head .h-sub { display: block; max-width: 26em; margin: .6em auto 0; font-size: .6em; font-weight: 400; line-height: 1.65; letter-spacing: -0.01em; color: var(--text-2); }
.kicker { font-family: var(--f-sans); font-size: .78em; line-height: 1.6; color: var(--text-3); margin: 0 0 .9em; }
.kicker a:hover { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }

.chapter p { margin: 0; text-indent: 1em; }
.chapter p + p { margin-top: .55em; }
.chapter h1, .chapter h2, .chapter h3, .chapter h4, .chapter h5, .chapter h6 { font-family: var(--f-read); font-weight: 600; line-height: 1.5;
  letter-spacing: -0.02em; text-indent: 0; text-align: center; margin: 2.6em 0 1.1em; color: var(--text); }
.chapter .lv1 { font-size: 1.42em; }
.chapter .lv2 { font-size: 1.2em; }
.chapter .lv3 { font-size: 1.05em; text-align: left; margin: 2.2em 0 .9em; }
.chapter .lv4, .chapter .lv5, .chapter .lv6 { font-size: 1em; text-align: left; margin: 2em 0 .8em; }
.chapter .dup-head { position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.chapter .h-lab { display: block; }
.chapter .h-sub { display: block; font-size: .64em; font-weight: 400; line-height: 1.65; letter-spacing: 0; color: var(--text-2); margin-top: .55em; }
.chapter :is(h1, h2, h3, h4, h5, h6, hr, blockquote, .table-wrap, pre, ul, ol, .kicker) + p { text-indent: 0; }
.chapter > p:first-child { text-indent: 0; }
.chapter a { color: inherit; }
.chapter strong { font-weight: 600; color: var(--text); }
.chapter i.orig { font-style: italic; }
.chapter p.verse { text-indent: 0; text-align: left; margin: 1.1em 0 1.1em 1.5em; line-height: 1.85; }
.chapter blockquote { margin: 1.6em 0; padding: .1em 0 .1em 1.15em; border-left: 2px solid var(--line-2); color: var(--text-2); }
.chapter blockquote p { text-indent: 0; }
.chapter ul, .chapter ol { margin: 1.2em 0; padding-left: 1.3em; }
.chapter li { margin: .3em 0; }
.chapter hr.scene { border: 0; height: auto; margin: 2.2em 0; text-align: center; overflow: visible; }
.chapter hr.scene::after { content: "◆"; display: inline-block; font-size: .55em; color: var(--text-3); }
.chapter .table-wrap { margin: 1.6em 0; overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
.chapter table { border-collapse: collapse; font-family: var(--f-sans); font-size: .82em; line-height: 1.6; margin: 0 auto; text-align: left; }
.chapter th, .chapter td { border-bottom: 1px solid var(--line); padding: .45em .8em; vertical-align: top; text-align: left; min-width: 4em; }
.chapter th { font-weight: 650; border-bottom: 1.5px solid var(--line-2); color: var(--text); }
.chapter pre.fixed { font-family: var(--f-mono); font-size: .7em; line-height: 1.55; white-space: pre; overflow-x: auto; max-width: 100%; text-align: left;
  background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 1em 1.1em; margin: 1.6em 0; text-indent: 0; }
.chapter p img { display: block; margin: 1.6em auto .6em; }
.chapter img { max-width: 100%; height: auto; border-radius: 6px; background: #F3EFE7; padding: 6px; }
:root[data-theme="paper"] .chapter img { background: transparent; padding: 0; }
.noteref { font-family: var(--f-sans); font-size: .66em; font-weight: 700; line-height: 0; vertical-align: super; color: var(--acc);
  padding: .25em .2em; margin: 0 .02em; border-radius: 4px; text-indent: 0; white-space: nowrap; }
.chapter a.noteref { color: var(--acc); }
.noteref sup { font-size: inherit; vertical-align: baseline; line-height: 0; }
.noteref:hover, .noteref[aria-expanded="true"] { background: color-mix(in srgb, var(--acc) 16%, transparent); }
.noteref + .noteref sup::before { content: ","; }
.chapter .footnotes { margin-top: 3.6em; padding-top: 1.1em; border-top: 1px solid var(--line); font-family: var(--f-sans); font-size: .84em; line-height: 1.8; color: var(--text-2); text-align: left; }
.chapter .fn-title { font-family: var(--f-sans); font-size: .82rem; font-weight: 650; letter-spacing: 0; color: var(--text-3); text-align: left; margin: 0 0 .6em; line-height: 1.6; }
.chapter .footnotes ol { list-style: none; margin: 0; padding: 0; }
.chapter .footnotes li { position: relative; margin: .55em 0; padding-left: 2.3em; }
.chapter .footnotes li p { text-indent: 0; margin: 0; }
.chapter .footnotes li p + p { margin-top: .4em; }
.chapter .fn-back { position: absolute; left: 0; top: 0; min-width: 2em; color: var(--acc); font-weight: 700; font-variant-numeric: tabular-nums; }
.chapter .fn-back:hover { text-decoration: underline; }
.epigraphs { max-width: 28em; margin: .5em auto 3.4em; text-align: center; color: var(--text-2); font-size: .95em; line-height: 1.75; }
.epigraphs::after { content: ""; display: block; width: 34px; height: 1px; background: var(--line-input); margin: 3em auto 0; }
.epigraph + .epigraph { margin-top: 2.6em; }
.epigraph p { text-indent: 0; margin: 0; }
.epigraph blockquote { margin: 0; padding: 0; border: 0; }
.epigraph blockquote + blockquote { margin-top: .55em; }
.epigraph blockquote + p { margin-top: 1.3em; font-size: .88em; color: var(--text-3); text-align: right; }

/* 회원 가림막 (XY.gate 가 .gate-body 로 감싸고 .gate-card 를 붙인다) */
.read-gate { position: relative; }
.read-gate.is-locked > .gate-body { min-height: 62vh; }
.read-gate > .gate-card { margin-top: -36vh; font-family: var(--f-sans); font-size: 1rem; line-height: 1.7; color: var(--text); text-align: center; }
:root[data-theme="paper"] .gate-card { background: rgba(251, 248, 242, .95); border-color: var(--line-2); }
:root[data-theme="paper"] .gate-card .lock { color: var(--acc); }
@media (max-width: 560px) { .read-gate > .gate-card { width: 100%; padding: 30px 20px; } }

/* 첫 장 끝의 안내 (비회원) */
.free-end { max-width: 40rem; margin: 72px auto 0; padding: 32px 28px; text-align: center; border-radius: var(--r-lg); border: 1px solid var(--line-2); background: var(--card); }
.free-end h2 { font-family: var(--f-read); font-weight: 600; font-size: 1.3rem; letter-spacing: -0.03em; }
.free-end p { margin: 10px auto 0; max-width: 28em; color: var(--text-2); }
.free-end .row { justify-content: center; margin-top: 22px; gap: 10px; }

/* 이전 · 다음 */
.pager { max-width: 44rem; margin: 72px auto 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pager > a { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--card); color: var(--text); line-height: 1.5; transition: border-color var(--d-2); }
.pager > a:hover { border-color: var(--line-input); }
.pager .dir { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; color: var(--text-3); }
.pager-next .dir { justify-content: flex-end; }
.pager .lab { font-family: var(--f-read); font-weight: 600; font-size: 1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pager .sub { font-size: .82rem; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pager .lab, .pager .sub { max-width: 100%; }   /* 다음 카드는 오른쪽 정렬이라 폭을 묶어야 말줄임이 된다 */
.pager-next { grid-column: 2; text-align: right; align-items: flex-end; }
.pager-pos { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px 18px; font-size: .85rem; color: var(--text-3); margin-top: 16px; }
.pager-pos a:hover { color: var(--text); }
.pager-where { display: inline-flex; align-items: baseline; gap: 10px; }
.pager-back { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 0 18px 0 12px; border: 1px solid var(--line-2); border-radius: var(--r-pill);
  color: var(--text); font-size: .92rem; font-weight: 650; transition: border-color var(--d-2), background var(--d-2); }
.pager-back svg { width: 20px; height: 20px; }
.pager-pos .pager-back:hover { border-color: var(--line-input); background: var(--hover); }
.pager-pos .num { font-family: var(--f-mono); font-size: var(--t-mono); }
.lib-read .xy-footer { margin-top: 88px; }

/* 차례 서랍 */
.drawer { position: fixed; inset: 0; z-index: 200; }
.drawer-backdrop { position: absolute; inset: 0; background: rgba(3, 5, 8, .62); opacity: 0; transition: opacity .22s ease; }
:root[data-theme="paper"] .drawer-backdrop { background: rgba(40, 34, 24, .3); }
.drawer-panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(420px, 92vw); display: flex; flex-direction: column;
  background: var(--panel); border-left: 1px solid var(--line); box-shadow: -24px 0 60px -24px rgba(0, 0, 0, .6);
  transform: translateX(100%); transition: transform .28s var(--ease-out); }
.drawer.is-open .drawer-backdrop { opacity: 1; }
.drawer.is-open .drawer-panel { transform: none; }
.drawer-head { display: flex; align-items: center; justify-content: space-between; min-height: 60px; padding: 8px 8px 8px 24px; border-bottom: 1px solid var(--line); flex: none; }
.drawer-title { font-weight: 700; font-size: 1rem; }
.drawer-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 18px 24px 56px; }
.drawer-book { display: flex; flex-direction: column; line-height: 1.5; }
.drawer-book a { font-family: var(--f-read); font-weight: 600; font-size: 1.06rem; }
.drawer-book a:hover { color: var(--acc); }
.drawer-book span { font-size: .85rem; color: var(--text-3); }
.drawer-note { font-size: .84rem; color: var(--text-2); margin-top: 10px; }
.drawer .toc { margin-top: 8px; font-size: .95rem; }
.drawer .toc a { padding: 10px 2px; }
.drawer .toc ol ol a { font-size: .92em; padding: 5px 2px; }
html.no-scroll { overflow: hidden; }

/* 읽기 설정 */
.settings { position: fixed; top: 68px; right: 10px; z-index: 150; width: min(320px, calc(100vw - 20px)); padding: 6px 16px;
  background: var(--card); border: 1px solid var(--line-2); border-radius: var(--r-md); box-shadow: var(--shadow-2); }
.set-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; }
.set-row + .set-row { border-top: 1px solid var(--line); }
.set-label { font-size: .9rem; font-weight: 650; }
.set-ctl { display: flex; align-items: center; gap: 6px; }
.set-btn { display: inline-flex; align-items: baseline; justify-content: center; gap: 1px; min-width: 44px; height: 44px; padding: 8px 10px;
  border: 1px solid var(--line-2); border-radius: 12px; background: transparent; font-family: var(--f-read); font-size: 1rem; line-height: 1.2; }
.set-btn small { font-family: var(--f-sans); font-size: .75rem; }
.set-btn:hover { background: var(--hover); }
.set-out { min-width: 2.4em; text-align: center; font-family: var(--f-mono); font-size: var(--t-mono); color: var(--text-2); }
.seg { display: inline-flex; gap: 3px; padding: 3px; border-radius: var(--r-pill); border: 1px solid var(--line-2); }
.seg button { display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 14px; border: 0; border-radius: var(--r-pill);
  background: transparent; color: var(--text-2); font-size: .88rem; font-weight: 650; }
.seg button:hover { color: var(--text); }
.seg button[aria-pressed="true"] { background: var(--text); color: var(--bg); }
.sw { display: inline-block; width: 12px; height: 12px; border-radius: 50%; border: 1px solid rgba(128, 128, 128, .55); }
.sw-night { background: #070A0F; }
.sw-paper { background: #F3EFE7; }

/* 주 팝오버 */
.fn-pop { position: absolute; z-index: 160; width: min(27rem, calc(100vw - 24px)); max-height: min(60vh, 440px); overflow: auto; overscroll-behavior: contain;
  background: var(--card); color: var(--text-2); border: 1px solid var(--line-2); border-radius: var(--r-md); box-shadow: var(--shadow-2);
  font: 400 .95rem/1.8 var(--f-sans); word-break: keep-all; overflow-wrap: break-word; padding: 10px 16px 16px; text-align: left; }
.fn-pop.is-sheet { position: fixed; left: 0; right: 0; bottom: 0; width: auto; max-height: 58vh; border-radius: 18px 18px 0 0; border-bottom: 0;
  padding: 10px 20px calc(18px + env(safe-area-inset-bottom)); }
.fn-pop-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: .8rem; font-weight: 650; color: var(--text-3); margin: 0 -8px 2px 0; }
.fn-pop-head .ibtn { min-width: 40px; height: 40px; }
.fn-pop-head .ibtn svg { width: 18px; height: 18px; }
.fn-pop p + p { margin-top: .5em; }
.fn-pop a.noteref { font-size: .75em; }
.fn-pop-more { display: inline-block; margin-top: 10px; font-size: .82rem; color: var(--text-3); text-decoration: underline; text-underline-offset: 3px; }
.fn-pop-more:hover { color: var(--text); }

/* 손가락으로 누르는 기기: 누를 자리를 44px 이상으로 */
@media (pointer: coarse) {
  .seg button { height: 44px; }
  .rbar-account .btn-sm { min-height: 44px; }
  .toc ol ol a { padding-block: 10px; }
  .drawer .toc ol ol a { padding-block: 10px; }
  .cat-chip { position: relative; }
  .cat-chip::before { content: ""; position: absolute; inset: -8px -4px; }
  .pager-where a { padding: 12px 4px; }
}

@media print {
  .rbar, .read-progress, .pager, .drawer, .settings, .free-end, .skip, .xy-header, .xy-footer, .xy-drawer, .lib-bar, .xy-ambient { display: none !important; }
  body { background: #fff; color: #000; }
  .prose { font-size: 11pt; max-width: none; color: #000; }
}