@import"https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@400;600&family=Noto+Sans+KR:wght@400;600&display=swap";*{margin:0;padding:0;box-sizing:border-box}html,body{height:100%;overflow:hidden;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}#app{height:100%}:root{--font-serif: "Noto Serif KR", "Source Serif KR", serif;--font-sans: "Pretendard", "Noto Sans KR", sans-serif;--font-gothic: "Spoqa Han Sans Neo", "Noto Sans KR", sans-serif;--font-mono: "D2Coding", "Cascadia Code", ui-monospace, monospace;--safe-top: env(safe-area-inset-top, 0px);--safe-bottom: env(safe-area-inset-bottom, 0px);--safe-left: env(safe-area-inset-left, 0px);--safe-right: env(safe-area-inset-right, 0px)}button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}input,select{font:inherit}.hidden{display:none!important}.toast{position:fixed;left:50%;bottom:calc(24px + var(--safe-bottom));transform:translate(-50%);background:#141414eb;color:#fff;padding:12px 20px;border-radius:8px;font-size:14px;z-index:9999;max-width:86vw;text-align:center;box-shadow:0 6px 24px #0000004d;animation:toast-in .2s ease}@keyframes toast-in{0%{opacity:0;transform:translate(-50%) translateY(8px)}}[data-theme=light]{--bg: #ffffff;--fg: #1a1a1a;--bg-rgb: 255, 255, 255}[data-theme=sepia]{--bg: #faf7f0;--fg: #3c3434;--bg-rgb: 250, 247, 240}[data-theme=gray]{--bg: #d6d2c8;--fg: #2a2a2a;--bg-rgb: 214, 210, 200}[data-theme=dark]{--bg: #1e1e1e;--fg: #d8d4cc;--bg-rgb: 30, 30, 30}:root{--bg: #faf7f0;--fg: #3c3434;--bg-rgb: 250, 247, 240}body{background:var(--bg);color:var(--fg);transition:background .2s ease,color .2s ease}[data-font=serif]{--reading-font: var(--font-serif)}[data-font=sans]{--reading-font: var(--font-sans)}[data-font=gothic]{--reading-font: var(--font-gothic)}[data-font=mono]{--reading-font: var(--font-mono)}:root{--reading-font: var(--font-serif)}.library{height:100%;display:flex;flex-direction:column;padding-top:var(--safe-top)}.lib-header{display:flex;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid rgba(var(--bg-rgb),0);border-bottom-color:color-mix(in srgb,var(--fg) 10%,transparent)}.lib-header h1{font-family:var(--font-serif);font-size:22px;font-weight:600;flex:1}.lib-header button{padding:8px 14px;border-radius:8px;font-size:14px;border:1px solid color-mix(in srgb,var(--fg) 18%,transparent)}.lib-header button:hover{background:color-mix(in srgb,var(--fg) 6%,transparent)}.lib-header .icon-btn{padding:8px;width:38px;height:38px;display:grid;place-items:center}.lib-search{padding:10px 20px 0}.lib-search input{width:100%;padding:10px 14px;border-radius:10px;border:1px solid color-mix(in srgb,var(--fg) 16%,transparent);background:color-mix(in srgb,var(--fg) 4%,transparent);color:var(--fg)}.book-grid{flex:1;overflow-y:auto;display:grid;gap:18px;padding:20px;padding-bottom:calc(20px + var(--safe-bottom));grid-template-columns:repeat(6,1fr);align-content:start}@media (max-width: 1439px){.book-grid{grid-template-columns:repeat(5,1fr)}}@media (max-width: 1023px){.book-grid{grid-template-columns:repeat(4,1fr)}}@media (max-width: 767px){.book-grid{grid-template-columns:repeat(3,1fr)}}@media (max-width: 480px){.book-grid{grid-template-columns:repeat(2,1fr)}}.book-card{display:flex;flex-direction:column;gap:8px;cursor:pointer}.book-cover{position:relative;aspect-ratio:2 / 3;border-radius:8px;overflow:hidden;background:color-mix(in srgb,var(--fg) 12%,var(--bg));display:grid;place-items:center;box-shadow:0 2px 10px #0000001f;transition:transform .15s ease}.book-card:hover .book-cover{transform:translateY(-3px)}.book-cover img{width:100%;height:100%;object-fit:cover}.book-cover .placeholder-title{padding:12px;font-size:13px;text-align:center;font-family:var(--font-serif);opacity:.75;line-height:1.4}.fmt-badge{position:absolute;top:8px;right:8px;font-size:10px;font-weight:600;padding:3px 7px;border-radius:5px;background:#0000008c;color:#fff;letter-spacing:.5px}.cover-progress{position:absolute;left:0;bottom:0;height:3px;background:color-mix(in srgb,var(--fg) 70%,transparent)}.book-meta{font-size:13px}.book-title{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.book-progress-text{font-size:12px;opacity:.65;margin-top:2px}.book-card.damaged .book-cover{outline:2px solid #c0392b}.damaged-badge{position:absolute;top:8px;left:8px;font-size:10px;padding:3px 7px;border-radius:5px;background:#c0392b;color:#fff}.add-card{aspect-ratio:2 / 3;border:2px dashed color-mix(in srgb,var(--fg) 28%,transparent);border-radius:8px;display:grid;place-items:center;font-size:40px;opacity:.5;cursor:pointer}.add-card:hover{opacity:.85;background:color-mix(in srgb,var(--fg) 5%,transparent)}.empty-hint{grid-column:1 / -1;text-align:center;opacity:.55;padding:60px 20px;font-size:14px;line-height:1.7}.ctx-menu{position:fixed;background:var(--bg);border:1px solid color-mix(in srgb,var(--fg) 18%,transparent);border-radius:8px;box-shadow:0 8px 28px #00000038;z-index:1000;overflow:hidden;min-width:140px}.ctx-menu button{display:block;width:100%;text-align:left;padding:10px 16px;font-size:14px}.ctx-menu button:hover{background:color-mix(in srgb,var(--fg) 8%,transparent)}.ctx-menu button.danger{color:#c0392b}.viewer{position:fixed;inset:0;background:var(--bg);color:var(--fg);overflow:hidden}.content-wrap{position:absolute;inset:0;padding:calc(32px + var(--safe-top)) 32px calc(48px + var(--safe-bottom)) 32px;display:flex;align-items:stretch;justify-content:center}@media (max-width: 767px){.content-wrap{padding:calc(24px + var(--safe-top)) 16px calc(40px + var(--safe-bottom)) 16px}}.content-inner{width:100%;max-width:580px;height:100%;position:relative}.reader-mount{width:100%;height:100%}.content-inner[data-width=narrow]{max-width:480px}.content-inner[data-width=wide]{max-width:720px}@media (max-width: 767px){.content-inner,.content-inner[data-width=narrow],.content-inner[data-width=wide]{max-width:100%}}.txt-content{width:100%;height:100%;padding:0;border:0;margin:0;column-gap:0;column-fill:auto;overflow:hidden;contain:layout paint;box-sizing:border-box;word-break:keep-all;overflow-wrap:break-word;font-family:var(--reading-font)}.txt-content p{orphans:2;widows:2;margin:0 0 .7em;text-align:left}.epub-content{width:100%;height:100%}.toolbar{position:absolute;top:0;left:0;right:0;height:calc(56px + var(--safe-top));padding:var(--safe-top) 16px 0;display:flex;align-items:center;gap:8px;background:rgba(var(--bg-rgb),.95);backdrop-filter:blur(4px);z-index:50;transform:translateY(-110%);transition:transform .22s ease}.viewer[data-ui=visible] .toolbar{transform:translateY(0)}.toolbar .tb-title{flex:1;text-align:center;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:.85}.toolbar button{width:38px;height:38px;display:grid;place-items:center;border-radius:8px;font-size:17px}.toolbar button:hover{background:color-mix(in srgb,var(--fg) 8%,transparent)}.progress-bar{position:absolute;left:0;right:0;bottom:0;padding:10px 20px calc(10px + var(--safe-bottom));background:rgba(var(--bg-rgb),.95);backdrop-filter:blur(4px);z-index:50;transform:translateY(110%);transition:transform .22s ease}.viewer[data-ui=visible] .progress-bar{transform:translateY(0)}.progress-row{display:flex;justify-content:space-between;font-size:12px;opacity:.7;margin-bottom:6px}.progress-slider{width:100%;height:4px;-webkit-appearance:none;appearance:none;background:color-mix(in srgb,var(--fg) 20%,transparent);border-radius:2px;outline:none}.progress-slider::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:var(--fg);cursor:pointer}.progress-slider::-moz-range-thumb{width:14px;height:14px;border:none;border-radius:50%;background:var(--fg);cursor:pointer}.tap-zones{position:absolute;inset:0;z-index:10;display:grid;grid-template-columns:40% 20% 40%}.tap-zones>div{height:100%}.panel{position:absolute;top:0;right:0;bottom:0;width:min(360px,86vw);background:var(--bg);border-left:1px solid color-mix(in srgb,var(--fg) 14%,transparent);box-shadow:-8px 0 28px #0003;z-index:100;transform:translate(100%);transition:transform .25s ease;overflow-y:auto;padding:calc(20px + var(--safe-top)) 22px calc(20px + var(--safe-bottom))}.panel.open{transform:translate(0)}.panel h2{font-size:17px;margin-bottom:18px;font-family:var(--font-serif)}.panel-section{margin-bottom:22px}.panel-section label{display:block;font-size:13px;opacity:.65;margin-bottom:8px}.seg{display:flex;gap:6px;flex-wrap:wrap}.seg button{flex:1;min-width:60px;padding:9px 6px;border-radius:8px;border:1px solid color-mix(in srgb,var(--fg) 18%,transparent);font-size:13px}.seg button.active{background:var(--fg);color:var(--bg)}.stepper{display:flex;align-items:center;gap:14px}.stepper button{width:40px;height:40px;border-radius:8px;border:1px solid color-mix(in srgb,var(--fg) 18%,transparent);font-size:20px}.stepper .val{flex:1;text-align:center;font-size:15px}.panel-close{position:absolute;top:calc(14px + var(--safe-top));right:16px;font-size:22px;width:36px;height:36px}.panel-backdrop{position:absolute;inset:0;background:#0000004d;z-index:90;opacity:0;pointer-events:none;transition:opacity .2s ease}.panel-backdrop.open{opacity:1;pointer-events:auto}.loading-overlay{position:absolute;inset:0;display:grid;place-items:center;background:var(--bg);z-index:200;font-size:14px;opacity:.7}.spinner{width:28px;height:28px;border:3px solid color-mix(in srgb,var(--fg) 20%,transparent);border-top-color:var(--fg);border-radius:50%;animation:spin .8s linear infinite;margin-bottom:14px}@keyframes spin{to{transform:rotate(360deg)}}