:root{font-family:-apple-system,BlinkMacSystemFont,"Malgun Gothic","Noto Sans KR",sans-serif;color:#34332f;background:#ece9e3;font-synthesis:none;--bronze:#9b8670;--paper:#fcfcfa;--page-ratio:1.41429}
#book{width:100%;height:100%}
.book-toc{background:var(--paper);position:relative;aspect-ratio:595.276/841.89}
.book-toc>img{width:100%;height:auto;display:block;pointer-events:none}
.book-toc .toc-sections{position:absolute;inset:0;pointer-events:none}
.book-toc .toc-target{position:absolute;pointer-events:auto;padding:0;border:0;border-radius:0;background:transparent}
.book-toc .toc-target:hover{background:#b0997f14}
.book-toc .toc-target:focus-visible{outline-offset:-2px}
.zoom-page.book-toc{height:auto}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;height:100%}body{display:flex;flex-direction:column;background:radial-gradient(ellipse at 50% 42%,#f5f3ee 0%,#e9e5de 76%);overflow:hidden}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;border:0;cursor:pointer;color:inherit;background:none}a{color:inherit}button:focus-visible,a:focus-visible{outline:2px solid #826d54;outline-offset:5px}button:disabled{opacity:.25;cursor:default}svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.55;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}.topbar{height:86px;flex:none;display:flex;align-items:center;justify-content:space-between;padding:14px 38px;border-bottom:1px solid #b3aa9d35;position:relative;z-index:2}.brand{display:flex;align-items:center;text-decoration:none}.logo-crop{display:block;position:relative;overflow:hidden;width:132px;height:40px}.logo-crop img{position:absolute;max-width:none}.book-title{font-size:15px;color:#70695f;letter-spacing:.09em;position:absolute;left:50%;transform:translateX(-50%)}.download{display:flex;align-items:center;gap:8px;text-decoration:none;font-size:14px;padding:10px;border-radius:4px}.download:hover{background:#ffffff65}.reader{min-height:0;flex:1;display:flex;flex-direction:column;align-items:center;padding:24px 32px max(24px,env(safe-area-inset-bottom));gap:0}.stage{flex:1;min-height:0;width:100%;max-width:1180px;display:flex;align-items:center;justify-content:center;position:relative;perspective:2000px}.book-position{height:100%;width:100%;display:flex;align-items:center;justify-content:center;transition:transform .55s ease;filter:drop-shadow(0 18px 20px #29211620)}#book{visibility:hidden;flex-shrink:0}.ready #book{visibility:visible}.book-page{background:var(--paper);overflow:hidden;user-select:none}.page-content{width:100%;height:100%;position:relative;background:var(--paper)}.page-content>img{width:100%;height:100%;object-fit:contain;display:block;pointer-events:none}.page-hotspot{position:absolute;display:block;z-index:5;text-decoration:none;border-radius:1px}.page-hotspot:hover{background:#b0997f20;outline:1px solid #9b867070}.page-hotspot:focus-visible{outline:2px solid #826d54;outline-offset:-2px}.page-transcript{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.loading{position:absolute;font-size:15px;letter-spacing:.02em;color:#74695b}.ready .loading{display:none}.gesture-hint{flex:none;font-size:13px;letter-spacing:.01em;color:#8b8175;margin:20px 0 13px}.reader-tools{flex:none;display:flex;align-items:center;gap:7px;background:#fcfcfaf0;border:1px solid #d9d3c9;box-shadow:0 5px 18px #39271409;border-radius:7px;padding:6px 12px;min-height:58px}.page-navigation{display:flex;align-items:center;gap:3px}.icon-button{height:42px;width:42px;display:grid;place-items:center;border-radius:4px}.icon-button:hover:not(:disabled),.tool-button:hover,.page-counter:hover{background:#e9e4dc}.page-counter{display:flex;align-items:center;justify-content:center;gap:9px;min-width:104px;font-size:14px;font-variant-numeric:tabular-nums;height:42px;border-radius:4px}.page-counter #currentPage{font-weight:600;color:#4b4035}.page-counter .divider{color:#a49c90}.toolbar-rule{height:24px;width:1px;background:#d9d3c9;margin:0 6px}.tool-button{display:flex;align-items:center;gap:8px;padding:10px 12px;height:42px;border-radius:4px;font-size:14px}.tool-button svg{width:19px;height:19px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}dialog{color:#34332f;border:0;background:#f5f3ef;padding:0;box-shadow:0 24px 90px #0005}dialog::backdrop{background:#29251de0;backdrop-filter:blur(5px)}.contents-dialog{width:min(900px,calc(100vw - 40px));max-height:88dvh;border-radius:8px}.dialog-header{display:flex;align-items:center;justify-content:space-between;padding:20px 26px;border-bottom:1px solid #d8d2c8;gap:15px;background:#f5f3ef;position:sticky;top:0;z-index:10}.dialog-header h1{font-size:17px;margin:0;font-weight:500}.close-button{display:flex;gap:12px;align-items:center;font-size:14px;padding:7px}.close-button span{font-size:26px;font-weight:300;line-height:1}.thumbnail-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;padding:26px}.thumbnail{padding:0;text-align:left;display:flex;flex-direction:column;gap:9px;font-size:14px;line-height:1.5}.thumbnail img{width:100%;aspect-ratio:1/1.41429;object-fit:contain;box-shadow:0 3px 10px #0002;transition:transform .18s}.thumbnail:hover img{transform:translateY(-3px)}.thumbnail[aria-current=true] img{outline:2px solid #9b8670;outline-offset:4px}.thumbnail small{color:#91816d;margin-right:5px;font-size:13px}.zoom-dialog{max-width:none;width:100vw;max-height:none;height:100dvh;margin:0;background:#e6e2db;overflow:hidden}.zoom-dialog[open]{display:flex;flex-direction:column}.zoom-controls{display:flex;align-items:center;gap:12px}.zoom-controls>button:not(.close-button){width:36px;height:36px;border:1px solid #d6cfc4;border-radius:3px;font-size:23px}.zoom-controls span{font-size:14px;min-width:42px;text-align:center}.zoom-scroller{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;touch-action:pan-x pan-y pinch-zoom;padding:24px}.zoom-pages{display:flex;gap:16px;width:max-content;margin:auto;align-items:flex-start}.zoom-page{position:relative;box-shadow:0 6px 30px #0002;flex:none}.zoom-page img{width:100%;height:auto;display:block}.zoom-help{font-size:13px;text-align:center;color:#776e62;margin:0;padding:10px;background:#f5f3ef}.fallback{text-align:center;position:absolute;background:#fcfcfa;padding:28px;z-index:20;border-radius:6px;line-height:1.8;font-size:15px}.fallback a{display:block;color:#8a6f4e}.fallback button{margin-top:12px;border:1px solid #c7b7a3;padding:8px 16px}.fallback[hidden]{display:none}
/* A touch viewport keeps gestures on the page and controls at a stable size. */
html,body { height:100%; height:100dvh; }
.pan-viewport { position:relative; overflow:hidden; touch-action:none; overscroll-behavior:contain; user-select:none; -webkit-user-select:none; }
.pan-viewport[data-zoomed=true] { cursor:grab; }
.pan-viewport[data-zoomed=true]:active { cursor:grabbing; }
.pan-canvas { position:absolute; left:0; top:0; display:flex; align-items:flex-start; transform-origin:0 0; will-change:transform; }
.pan-canvas>.zoom-page { flex:none; background:var(--paper); }
.pan-canvas>.zoom-page>img { width:100%; height:100%; object-fit:contain; pointer-events:none; -webkit-user-drag:none; }
.mobile-viewport { display:none; position:absolute; inset:0; visibility:hidden; }
.ready .mobile-viewport { visibility:visible; }
.mobile-zoom-tools { display:none!important; }
.zoom-scroller { padding:0; flex:1; min-height:0; }
.zoom-page-navigation { display:flex; margin-left:auto; }
.zoom-page-navigation button { font-size:28px; }
.zoom-strip { display:flex; align-items:center; justify-content:center; gap:10px; padding:8px 16px; flex:none; background:#f5f3ef; border-bottom:1px solid #d8d2c8; }
.zoom-strip input[type=range] { width:160px; min-width:36px; height:36px; margin:0; accent-color:#877159; cursor:pointer; }
.zoom-strip output { min-width:47px; text-align:center; font-size:13px; font-variant-numeric:tabular-nums; }
.scale-button { width:38px; height:38px; flex:none; font-size:23px; border:1px solid #d6cfc4; border-radius:4px; }
.fit-button { height:38px; padding:0 12px; font-size:13px; white-space:nowrap; border-radius:4px; border:1px solid transparent; }
.fit-button[aria-pressed=true] { border-color:#c6b8a6; background:#e9e2d9; }
.reader-fullscreen .topbar,.reader-fullscreen .gesture-hint { display:none; }
.reader-fullscreen .reader { padding:4px 8px max(6px,env(safe-area-inset-bottom)); }
.reader-fullscreen .stage { max-width:none; }
.reader-fullscreen .reader-tools { margin-top:6px; }
@media(max-width:899px) {
  .topbar { height:54px; padding:8px 16px; }
  .logo-crop { width:106px; height:32px; }
  .book-title { display:none; }
  .download { font-size:13px; padding:8px 0; gap:6px; }
  .download svg { width:18px; height:18px; }
  .reader { padding:4px 6px max(6px,env(safe-area-inset-bottom)); }
  .book-position { display:none; }
  .mobile-viewport { display:block; }
  .gesture-hint { font-size:11px; margin:6px 0; }
  .reader-tools { gap:0; padding:2px 5px; min-height:46px; width:100%; max-width:440px; justify-content:space-between; box-shadow:none; }
  .icon-button { width:36px; height:40px; }
  .page-counter { min-width:70px; gap:6px; font-size:13px; height:40px; }
  .toolbar-rule { margin:0 4px; }
  .tool-button { padding:8px; gap:5px; }
  .tool-button span { font-size:12px; }
  .tool-button svg { width:18px; height:18px; }
  .desktop-zoom { display:none; }
  .mobile-zoom-tools { display:flex!important; width:100%; max-width:440px; margin-top:4px; border:0; border-radius:6px; }
  .zoom-strip { padding:3px 4px; gap:4px; }
  .zoom-strip input[type=range] { flex:1; width:0; height:36px; }
  .zoom-strip output { font-size:12px; min-width:41px; }
  .scale-button { width:32px; height:36px; font-size:22px; }
  .fit-button { padding:0 7px; height:36px; font-size:12px; }
  .contents-dialog { width:calc(100vw - 24px); max-height:92dvh; }
  .thumbnail-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px 19px; padding:22px; }
  .dialog-header { padding:8px 14px; }
  .dialog-header h1 { font-size:15px; }
  .zoom-help { font-size:11px; padding:8px; }
  .reader-fullscreen .reader { padding:0 2px max(4px,env(safe-area-inset-bottom)); }
  .reader-fullscreen .reader-tools { margin-top:2px; }
}
@media(max-width:370px) {
  .tool-button { padding:8px 6px; gap:3px; }
  .fit-button { padding:0 5px; }
}
@media(max-height:500px) and (max-width:899px) {
  .topbar,.gesture-hint { display:none; }
  .reader { display:grid; grid-template-columns:1fr 158px; grid-template-rows:1fr auto; gap:5px; }
  .stage { grid-row:1/3; height:100%; }
  .reader-tools { flex-wrap:wrap; align-self:end; }
  .toolbar-rule { display:none; }
  .mobile-zoom-tools { flex-wrap:wrap; align-self:start; }
  .mobile-zoom-tools input[type=range] { order:5; flex-basis:100%; }
  .fit-button { flex:1; }
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}}