:root{--paper:#f6f1e9;--surface:#fffdf9;--ink:#2b2620;--ink-soft:#6f665b;--line:#e2d9cc;--accent:#8a5a2b;--accent-ink:#fff;--accent-soft:#f0e3d3;--danger:#b3261e;--ok:#2e7d32;--shadow:0 1px 2px #3c281414, 0 4px 16px #3c28140f;--radius:12px;--serif:"Gowun Batang", "Nanum Myeongjo", "AppleMyungjo", serif;--sans:-apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--paper:#1d1a17;--surface:#26221e;--ink:#eee6db;--ink-soft:#a89d90;--line:#3a342e;--accent:#d6a36d;--accent-ink:#1d1a17;--accent-soft:#3a2f24;--danger:#ef8a80;--ok:#81c784;--shadow:0 1px 2px #0006;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}}:root[data-theme=dark]{--paper:#1d1a17;--surface:#26221e;--ink:#eee6db;--ink-soft:#a89d90;--line:#3a342e;--accent:#d6a36d;--accent-ink:#1d1a17;--accent-soft:#3a2f24;--danger:#ef8a80;--ok:#81c784;--shadow:0 1px 2px #0006;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box}html,body{background:var(--paper);color:var(--ink);font-family:var(--sans);-webkit-text-size-adjust:100%;margin:0;font-size:16px;line-height:1.6}h1,h2,h3{font-family:var(--serif);margin:0 0 8px;line-height:1.3}h1{font-size:1.6rem}h2{font-size:1.25rem}a{color:var(--accent)}button,input,select,textarea{font:inherit;color:inherit}.app{flex-direction:column;min-height:100dvh;display:flex}.topbar{z-index:10;padding:10px 16px;padding-top:max(10px, env(safe-area-inset-top));background:color-mix(in srgb, var(--paper) 92%, transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);align-items:center;gap:16px;display:flex;position:sticky;top:0}.brand{font-family:var(--serif);color:var(--ink);font-size:1.3rem;font-weight:700;text-decoration:none}.nav{gap:4px;margin-left:auto;display:flex}.theme-toggle{border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:2px;display:inline-flex}.theme-toggle button{width:32px;height:32px;color:var(--ink-soft);cursor:pointer;background:0 0;border:0;border-radius:999px;place-items:center;display:grid}.theme-toggle button.active{background:var(--accent-soft);color:var(--ink)}.theme-toggle button:focus-visible{outline:2px solid var(--accent);outline-offset:1px}.nav a{color:var(--ink-soft);border-radius:999px;padding:6px 12px;text-decoration:none}.nav a.active{background:var(--accent-soft);color:var(--ink);font-weight:600}.main{flex:1;width:100%;max-width:960px;margin:0 auto;padding:20px 16px 40px}.footer{padding:16px;padding-bottom:max(16px, env(safe-area-inset-bottom));border-top:1px solid var(--line);color:var(--ink-soft);justify-content:space-between;align-items:center;gap:12px;font-size:.875rem;display:flex}.footer a{color:inherit}.stack{flex-direction:column;gap:28px;display:flex}.muted{color:var(--ink-soft);margin:0 0 8px}.error{color:var(--danger)}.empty{color:var(--ink-soft);border:1px dashed var(--line);border-radius:var(--radius);text-align:center;padding:20px}.button{border:1px solid var(--line);background:var(--surface);cursor:pointer;white-space:nowrap;border-radius:10px;justify-content:center;align-items:center;gap:6px;min-height:44px;padding:8px 16px;display:inline-flex}.visually-hidden{clip:rect(0 0 0 0);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.button:has(.visually-hidden:focus-visible){outline:2px solid var(--accent);outline-offset:1px}.button--disabled,.button:disabled{opacity:.5;cursor:default}.button--primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:600}.button--danger{color:var(--danger);border-color:currentColor}.icon-button{border:1px solid var(--line);background:var(--surface);cursor:pointer;border-radius:10px;min-width:40px;min-height:40px}.icon-button:disabled{opacity:.35}.link-button{color:var(--accent);cursor:pointer;background:0 0;border:0;padding:0;text-decoration:underline}.link-button--danger{color:var(--danger)}.input{border:1px solid var(--line);background:var(--surface);border-radius:10px;width:100%;min-height:44px;padding:8px 12px}.input--inline{width:auto;min-height:36px;padding:4px 8px;font-size:.9rem}select.input{appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1.5l5 5 5-5' fill='none' stroke='%236f665b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>");background-position:right 14px center;background-repeat:no-repeat;padding-right:36px}select.input--inline{background-position:right 12px center;padding-right:32px}textarea.input{resize:vertical}.input:focus,.button:focus-visible,.icon-button:focus-visible{outline:2px solid var(--accent);outline-offset:1px}.inline-form{gap:8px;margin:8px 0 16px;display:flex}.actions{justify-content:flex-end;gap:8px;margin-top:16px;display:flex}.badge{color:#fff;background:#0000008c;border-radius:6px;padding:0 6px;font-size:.7rem;position:absolute;bottom:6px;left:6px}.tip{background:var(--accent-soft);border-radius:10px;margin-top:12px;padding:10px 14px;font-size:.9rem}.tip summary{cursor:pointer;font-weight:600}.tip p{margin:8px 0 0}.book-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:16px;display:grid}.book-card{color:inherit;flex-direction:column;gap:8px;text-decoration:none;display:flex}.book-meta{flex-direction:column;line-height:1.4;display:flex}.book-meta .muted{margin:0;font-size:.85rem}.uploader{flex-direction:column;align-items:flex-start;gap:8px;display:flex}.progress{background:var(--line);border-radius:14px;width:100%;height:28px;position:relative;overflow:hidden}.progress-bar{background:var(--accent);height:100%;transition:width .2s ease-out}.progress-label{color:var(--ink);text-shadow:0 0 4px var(--surface);place-items:center;font-size:.85rem;font-weight:600;display:grid;position:absolute;inset:0}.upload-list{width:100%;max-height:240px;margin:0;padding:0;font-size:.85rem;list-style:none;overflow:auto}.upload-item{border-bottom:1px solid var(--line);justify-content:space-between;gap:12px;padding:4px 0;display:flex}.upload-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.upload-state{color:var(--ink-soft);flex-shrink:0}.upload-item--done .upload-state{color:var(--ok)}.upload-item--error .upload-state{color:var(--danger);white-space:normal;text-align:right}.photo-groups{flex-direction:column;gap:16px;display:flex}.photo-day{font-family:var(--sans);color:var(--ink-soft);margin-bottom:6px;font-size:.9rem}.photo-grid{grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:4px;display:grid}.photo-tile{aspect-ratio:1;background:var(--line);cursor:pointer;border:0;border-radius:6px;padding:0;position:relative;overflow:hidden}.photo-tile img{object-fit:cover;width:100%;height:100%;display:block}.photo-tile--selected{outline:3px solid var(--accent)}.preview{object-fit:contain;background:#000;border-radius:8px;width:100%;max-height:70dvh;display:block}.hint{margin:0;font-size:.85rem}.notice{border:1px solid var(--accent);background:var(--accent-soft);border-radius:10px;padding:12px 14px;font-size:.9rem}.notice p{margin:4px 0 0}.drop-overlay{z-index:100;background:color-mix(in srgb, var(--paper) 80%, transparent);border:4px dashed var(--accent);pointer-events:none;place-items:center;display:grid;position:fixed;inset:0}.drop-overlay p{font-family:var(--serif);border-radius:var(--radius);background:var(--surface);box-shadow:var(--shadow);padding:16px 24px;font-size:1.4rem;font-weight:700}.modal-backdrop{z-index:50;background:#00000073;justify-content:center;align-items:flex-end;display:flex;position:fixed;inset:0}.modal{background:var(--surface);width:100%;max-width:520px;max-height:92dvh;box-shadow:var(--shadow);border-radius:16px 16px 0 0;flex-direction:column;display:flex}.modal--wide{max-width:900px}.modal-header{border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;padding:12px 16px;display:flex}.modal-header h2{margin:0;font-size:1.1rem}.modal-body{padding:16px;padding-bottom:max(16px, env(safe-area-inset-bottom));flex-direction:column;gap:12px;display:flex;overflow:auto}@media (width>=640px){.modal-backdrop{align-items:center;padding:24px}.modal{border-radius:16px}}.photo-frame{position:relative;overflow:hidden}.photo-frame-media{transform-origin:50%;width:100%;height:100%;display:block;position:absolute;inset:0}.photo-frame-main{transition:opacity .35s ease-out}.photo-frame-placeholder{filter:blur(2px)}.page-box{width:var(--page-w,100%);min-width:0;container-type:inline-size}.page{--page-bg:#fbf7ef;--page-ink:#2b2620;--page-soft:#7a6f62;--page-rule:#2b262038;--pattern-ink:#2b26201a;aspect-ratio:3/4;background-color:var(--page-bg);width:100%;color:var(--page-ink);box-shadow:var(--shadow);border-radius:4px;position:relative;overflow:hidden}.page-color--white{--page-bg:#fff}.page-color--ivory{--page-bg:#f3e8d2;--page-ink:#3a2e20;--page-soft:#7d6b55}.page-color--sage{--page-bg:#dde5d4;--page-ink:#26332a;--page-soft:#5b6b5e}.page-color--sky{--page-bg:#dbe6f0;--page-ink:#1f2d3a;--page-soft:#586a7c}.page-color--rose{--page-bg:#f2dedb;--page-ink:#3b2422;--page-soft:#8a6460}.page-color--navy,.page-color--forest,.page-color--charcoal{--page-rule:#ffffff4d;--pattern-ink:#ffffff1a}.page-color--navy{--page-bg:#22304a;--page-ink:#f3efe6;--page-soft:#b9c1d1}.page-color--forest{--page-bg:#2d4436;--page-ink:#f1eee4;--page-soft:#bccabf}.page-color--charcoal{--page-bg:#2a2826;--page-ink:#f2ede5;--page-soft:#b8b0a5}.page-pattern--dots{background-image:radial-gradient(var(--pattern-ink) .45cqw, transparent .5cqw);background-size:4cqw 4cqw}.page-pattern--grid{background-image:linear-gradient(var(--pattern-ink) .2cqw, transparent .2cqw), linear-gradient(90deg, var(--pattern-ink) .2cqw, transparent .2cqw);background-size:5cqw 5cqw}.page-pattern--lines{background-image:linear-gradient(var(--pattern-ink) .2cqw, transparent .2cqw);background-size:100% 5cqw}.page-pattern--diagonal{background-image:repeating-linear-gradient(45deg, var(--pattern-ink) 0 .25cqw, transparent .25cqw 4cqw)}.page-pattern--gingham{background-image:linear-gradient(90deg, var(--pattern-ink) 50%, transparent 50%), linear-gradient(var(--pattern-ink) 50%, transparent 50%);background-size:8cqw 8cqw}.page-pattern--waves{background-image:radial-gradient(circle at 50% 120%, transparent 2.8cqw, var(--pattern-ink) 2.9cqw, var(--pattern-ink) 3.2cqw, transparent 3.3cqw);background-size:6cqw 4cqw}.page-pattern--fiber{background-image:repeating-linear-gradient(97deg, transparent 0 1.1cqw, var(--pattern-ink) 1.1cqw 1.2cqw), repeating-linear-gradient(-3deg, transparent 0 2.3cqw, var(--pattern-ink) 2.3cqw 2.35cqw)}.el{box-sizing:border-box;position:absolute}.el--photo .el-photo{border-radius:.5cqw;width:100%;height:100%}.photo-border--print,.photo-border--polaroid{background:#fff;padding:1.6cqw;box-shadow:0 .4cqw 1.2cqw #00000038,0 0 0 .15cqw #0000000f}.photo-border--polaroid{padding-bottom:7cqw}.photo-border--print .el-photo,.photo-border--polaroid .el-photo{border-radius:0}.el--empty{border:.3cqw dashed var(--page-rule);color:var(--page-soft);background:#7f7f7f14;border-radius:.5cqw;place-items:center;font-size:3.5cqw;display:grid}.el--sticker{place-items:center;display:grid}.sticker{--sticker-tint:var(--page-ink,var(--cover-ink,currentColor));width:100%;height:100%;color:var(--sticker-tint);place-items:center;display:grid}.sticker img,.sticker svg{width:100%;height:100%;display:block}.sticker-color--brown{--sticker-tint:#8a5a2b}.sticker-color--red{--sticker-tint:#d3362d}.sticker-color--orange{--sticker-tint:#e8862a}.sticker-color--yellow{--sticker-tint:#e6b422}.sticker-color--green{--sticker-tint:#3f8f4e}.sticker-color--blue{--sticker-tint:#2f6fcf}.sticker-color--purple{--sticker-tint:#7b4fb8}.sticker-color--pink{--sticker-tint:#e07aa5}.sticker-color--white{--sticker-tint:#fff}.sticker-color--black{--sticker-tint:#111}.sticker-tabs{gap:4px;display:flex}.sticker-grid{grid-template-columns:repeat(auto-fill,minmax(56px,1fr));gap:6px;display:grid}.sticker-tile{aspect-ratio:1;border:1px solid var(--line);background:var(--surface);cursor:pointer;color:var(--ink);border-radius:10px;place-items:center;padding:8px;display:grid}.sticker-tile img,.sticker-tile svg{width:100%;height:100%}.sticker-group{color:var(--ink-soft);margin:10px 0 4px;font-size:.85rem}.text-font--serif{--text-font:var(--serif);--text-scale:1;--text-title-weight:700}.text-font--sans{--text-font:var(--sans);--text-scale:1;--text-title-weight:700}.text-font--hand{--text-font:"Nanum Pen Script", cursive;--text-scale:1.3;--text-title-weight:400}.el--text{--el-font:3.8cqw;--el-line:6.6cqw;--rule:var(--page-rule);font-family:var(--text-font,var(--serif));font-size:calc(var(--el-font) * var(--text-scale,1));line-height:var(--el-line);color:var(--page-ink);flex-direction:column;padding:1cqw 1.5cqw;display:flex;overflow:hidden}.el-text--s{--el-font:3cqw;--el-line:5.4cqw}.el-text--l{--el-font:4.8cqw;--el-line:8cqw}.el-text--center{text-align:center}.el-text--right{text-align:right}.el-title{font-weight:var(--text-title-weight,700);font-size:calc(var(--el-font) * 1.25 * var(--text-scale,1));line-height:var(--el-line);overflow-wrap:anywhere;flex:none}.el-body{white-space:pre-wrap;overflow-wrap:anywhere;flex:auto;min-height:0}.el-text--ruled .el-body{background-image:linear-gradient(to top, var(--rule) 0, var(--rule) .25cqw, transparent .25cqw);background-size:100% var(--el-line);background-repeat:repeat-y}.el-text--overlay{color:#fff;--rule:#ffffff73;text-shadow:0 .2cqw .8cqw #00000080;background:linear-gradient(#0000,#00000040 30%,#0009);border-radius:.5cqw;padding:3cqw 2.5cqw 1.5cqw}.page--backdrop{box-shadow:none;background:0 0}.page-backdrop,.page-backdrop .cover-box,.cover-elements{position:absolute;inset:0}.cover-elements{--page-ink:var(--cover-ink);--page-rule:color-mix(in srgb, var(--cover-ink) 30%, transparent);--page-soft:var(--cover-soft)}.swatch-sticker{background:var(--sticker-tint,var(--ink))}.page--edit{touch-action:none;-webkit-user-select:none;user-select:none}.el-hit{cursor:move;position:absolute}.el-outline{outline:2px solid var(--accent);outline-offset:-1px;pointer-events:none;position:absolute}.el-handle{background:var(--surface);border:2px solid var(--accent);pointer-events:auto;touch-action:none;border-radius:50%;width:14px;height:14px;margin:-7px;position:absolute}@media (pointer:coarse){.el-handle{width:24px;height:24px;margin:-12px}}.el-rotate{border:2px solid var(--accent);background:var(--surface);pointer-events:auto;touch-action:none;cursor:grab;border-radius:50%;width:20px;height:20px;margin-left:-10px;position:absolute;top:-34px;left:50%}.el-rotate:after{content:"";background:var(--accent);width:2px;height:14px;margin-left:-1px;position:absolute;top:100%;left:50%}.el-rotate-badge{background:var(--accent);color:var(--accent-ink);white-space:nowrap;border-radius:6px;padding:1px 6px;font-size:.7rem;position:absolute;bottom:100%;left:50%;transform:translate(-50%,-4px)}@media (pointer:coarse){.el-rotate{width:28px;height:28px;margin-left:-14px;top:-44px}.el-rotate:after{height:16px}}.el-handle--nw{cursor:nwse-resize;top:0;left:0}.el-handle--n{cursor:ns-resize;top:0;left:50%}.el-handle--ne{cursor:nesw-resize;top:0;left:100%}.el-handle--e{cursor:ew-resize;top:50%;left:100%}.el-handle--se{cursor:nwse-resize;top:100%;left:100%}.el-handle--s{cursor:ns-resize;top:100%;left:50%}.el-handle--sw{cursor:nesw-resize;top:100%;left:0}.el-handle--w{cursor:ew-resize;top:50%;left:0}.edit-page-body{gap:16px;display:grid}@media (width>=760px){.edit-page-body{grid-template-columns:minmax(280px,400px) minmax(240px,1fr);align-items:start}.edit-page-body .page-box--edit{position:sticky;top:80px}}.edit-page-body .page-box--edit{--page-w:100%;justify-self:center;width:min(100%,400px)}.el-panel{flex-direction:column;gap:12px;display:flex}.el-panel h3{font-family:var(--sans);margin:0;font-size:.95rem}.cover-sheet{width:var(--page-w,100%)}.cover-box{width:100%;min-width:0;container-type:inline-size}.cover{--cover-bg:#fbf7ef;--cover-ink:#2b2620;--cover-soft:#7a6f62;--cover-font:var(--serif);aspect-ratio:3/4;background:var(--cover-bg);width:100%;color:var(--cover-ink);box-shadow:var(--shadow), inset 4px 0 0 #0000001f, inset 7px 0 6px -4px #0000001f;border-radius:3px 8px 8px 3px;flex-direction:column;display:flex;position:relative;overflow:hidden}.cover-color--ivory{--cover-bg:#f3e8d2;--cover-ink:#3a2e20;--cover-soft:#7d6b55}.cover-color--sage{--cover-bg:#dde5d4;--cover-ink:#26332a;--cover-soft:#5b6b5e}.cover-color--sky{--cover-bg:#dbe6f0;--cover-ink:#1f2d3a;--cover-soft:#586a7c}.cover-color--rose{--cover-bg:#f2dedb;--cover-ink:#3b2422;--cover-soft:#8a6460}.cover-color--navy{--cover-bg:#22304a;--cover-ink:#f3efe6;--cover-soft:#b9c1d1}.cover-color--forest{--cover-bg:#2d4436;--cover-ink:#f1eee4;--cover-soft:#bccabf}.cover-color--charcoal{--cover-bg:#2a2826;--cover-ink:#f2ede5;--cover-soft:#b8b0a5}.cover-font--sans{--cover-font:var(--sans)}.cover-font--hand{--cover-font:"Nanum Pen Script", cursive}.cover-photo{width:100%;display:block}.cover-text{text-align:center;flex:none;padding:5cqw 8cqw 7cqw}.cover-title{font-family:var(--cover-font);color:inherit;overflow-wrap:anywhere;margin:0;font-size:9cqw;font-weight:700;line-height:1.2}.cover-font--hand .cover-title{font-size:12cqw;font-weight:400}.cover-subtitle{font-family:var(--cover-font);color:var(--cover-soft);margin:2cqw 0 0;font-size:4.4cqw;line-height:1.4}.cover-font--hand .cover-subtitle{font-size:6cqw}.cover-author{letter-spacing:.08em;color:var(--cover-soft);margin:3cqw 0 0;font-size:3.6cqw}.cover--framed{padding:9cqw 9cqw 0}.cover--framed .cover-photo{flex:1 1 0;width:calc(100% - 2.4cqw);height:100%;min-height:0;margin:1.2cqw;box-shadow:0 0 0 1.2cqw #fff,0 1cqw 3cqw #00000040}.cover--full .cover-photo{height:100%;position:absolute;inset:0}.cover--full .cover-text{color:#fff;background:linear-gradient(#0000,#000000b8);padding-top:18cqw;position:absolute;inset:auto 0 0}.cover--full .cover-subtitle,.cover--full .cover-author{color:#ffffffd9}.cover--title,.cover--no-photo{justify-content:center}.cover--title .cover-text,.cover--no-photo .cover-text{border-top:.5cqw solid var(--cover-soft);border-bottom:.5cqw solid var(--cover-soft);margin:0 10cqw;padding:8cqw 0}.cover--full.cover--no-photo .cover-text{color:inherit;background:0 0;position:static}.cover-pos--top-left .cover-text,.cover-pos--bottom-left .cover-text{text-align:left}.cover-pos--top-right .cover-text,.cover-pos--bottom-right .cover-text{text-align:right}.cover--framed.cover-pos--top,.cover--framed.cover-pos--top-left,.cover--framed.cover-pos--top-right,.cover--framed.cover-pos--middle{padding-bottom:9cqw}.cover--framed.cover-pos--top .cover-text,.cover--framed.cover-pos--top-left .cover-text,.cover--framed.cover-pos--top-right .cover-text{order:-1;padding:0 1.2cqw 5cqw}.cover--framed.cover-pos--bottom-left .cover-text,.cover--framed.cover-pos--bottom-right .cover-text{padding-left:1.2cqw;padding-right:1.2cqw}.cover--framed.cover-pos--middle:not(.cover--no-photo) .cover-text{color:#fff;background:#00000073;padding:5cqw 4cqw;position:absolute;top:50%;left:12cqw;right:12cqw;transform:translateY(-50%)}.cover--framed.cover-pos--middle:not(.cover--no-photo) .cover-subtitle,.cover--framed.cover-pos--middle:not(.cover--no-photo) .cover-author{color:#ffffffd9}.cover--full:not(.cover--no-photo).cover-pos--top .cover-text,.cover--full:not(.cover--no-photo).cover-pos--top-left .cover-text,.cover--full:not(.cover--no-photo).cover-pos--top-right .cover-text{background:linear-gradient(#000000b8,#0000);padding:7cqw 8cqw 18cqw;inset:0 0 auto}.cover--full:not(.cover--no-photo).cover-pos--middle .cover-text{background:#0006;padding:6cqw 8cqw;inset:50% 0 auto;transform:translateY(-50%)}.cover--title.cover-pos--top,.cover--title.cover-pos--top-left,.cover--title.cover-pos--top-right,.cover--no-photo.cover-pos--top,.cover--no-photo.cover-pos--top-left,.cover--no-photo.cover-pos--top-right{justify-content:flex-start;padding-top:14cqw}.cover--title.cover-pos--bottom,.cover--title.cover-pos--bottom-left,.cover--title.cover-pos--bottom-right,.cover--no-photo.cover-pos--bottom,.cover--no-photo.cover-pos--bottom-left,.cover--no-photo.cover-pos--bottom-right{justify-content:flex-end;padding-bottom:14cqw}.viewer{--page-w:min(100%, max(240px, calc((100dvh - 230px) * .75)));--spread-w:min(100%, max(480px, calc((100dvh - 230px) * 1.5)));flex-direction:column;gap:12px;max-width:820px;margin:0 auto;display:flex}.viewer-bar{justify-content:space-between;align-items:center;min-height:36px;display:flex}.viewer-bar>*{margin:0;line-height:1.4}.viewer-stage{touch-action:pan-y;justify-content:center;display:flex}.turn-stage{width:var(--page-w,100%);aspect-ratio:3/4;perspective:2400px;touch-action:pan-y;-webkit-user-select:none;user-select:none;cursor:grab;position:relative}.turn-stage:active{cursor:grabbing}.turn-stage--spread{aspect-ratio:3/2}.turn-sheet,.turn-leaf{--page-w:100%;position:absolute;inset:0}.turn-half{--page-w:100%;width:50%;position:absolute;top:0;bottom:0}.turn-left{left:0}.turn-right{right:0}.turn-leaf--spread{inset:0 0 0 50%}.turn-spine{pointer-events:none;z-index:1;background:linear-gradient(90deg,#0000,#00000029 50%,#0000);width:5%;position:absolute;top:0;bottom:0;left:50%;transform:translate(-50%)}.turn-blank{aspect-ratio:3/4;background:var(--surface);width:100%;box-shadow:var(--shadow);border-radius:4px}.viewer--spread{--page-w:var(--spread-w);max-width:1200px}.viewer-tools{justify-content:flex-end;display:flex}.turn-leaf{transform-origin:0;transform-style:preserve-3d;z-index:2;will-change:transform}.turn-face{backface-visibility:hidden;position:absolute;inset:0}.turn-back{box-shadow:var(--shadow);background:linear-gradient(90deg,#e9e2d6,#f7f2e9 40%,#efe8dc);border-radius:4px;transform:rotateY(180deg)}.turn-shade{pointer-events:none;border-radius:4px;position:absolute;inset:0}.turn-sheet img,.turn-leaf img{-webkit-user-drag:none}.viewer-nav{width:var(--page-w,100%);justify-content:space-between;gap:12px;margin:0 auto;display:flex}.viewer-nav .button{flex:1}.editor-head{flex-direction:column;gap:10px;display:flex}.input--title{font-family:var(--serif);font-size:1.4rem;font-weight:700}.editor-tools{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.editor-tools select{width:auto}.save-state{color:var(--ink-soft);flex:1;font-size:.85rem}.save-state--saved{color:var(--ok)}.save-state--error{color:var(--danger)}.edit-cover{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);gap:20px;padding:16px;display:grid}@media (width>=640px){.edit-cover{grid-template-columns:300px 1fr;align-items:start}}.edit-cover-preview{justify-self:center;width:min(300px,80%);min-width:0}@media (width>=640px){.edit-cover-preview{width:100%;position:sticky;top:80px}}.edit-cover-controls{flex-direction:column;gap:14px;display:flex}.edit-cover-controls h2{margin:0}.edit-cover-decorate{border-top:1px solid var(--line);font-family:var(--sans);margin:8px 0 0;padding-top:12px;font-size:.95rem}.edit-cover-preview .page-box--edit{width:100%}.edit-pages-head{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 16px;margin:8px 0 -12px;display:flex}.edit-pages-title{margin:0}.field{flex-direction:column;gap:6px;display:flex}.field-label{color:var(--ink-soft);font-size:.85rem;font-weight:600}.field-row{flex-wrap:wrap;align-items:center;gap:12px;display:flex}.field-row .muted{margin:0;font-size:.85rem}.swatches{flex-wrap:wrap;gap:8px;display:flex}.swatch{background:var(--cover-bg,#fbf7ef);cursor:pointer;border:1px solid #00000026;border-radius:50%;width:34px;height:34px}.swatch.active{outline:3px solid var(--accent);outline-offset:2px}.swatch.page-color--white{background:#fff}.swatch[class*=page-color--]{background:var(--page-bg)}.pattern-chips{flex-wrap:wrap;gap:8px;display:flex}.pattern-chip{border:1px solid var(--line);cursor:pointer;background:var(--surface);border-radius:10px;flex-direction:column;width:56px;height:56px;padding:0;display:flex;overflow:hidden}.pattern-chip .page{--page-w:100%;aspect-ratio:auto;box-shadow:none;border-radius:0;flex:1}.pattern-chip span{color:var(--ink-soft);font-size:.7rem;line-height:1.4}.pattern-chip.active{outline:3px solid var(--accent);outline-offset:1px}.font-sample{font-family:var(--cover-font,var(--serif));font-size:1rem}.segmented .cover-font--hand .font-sample{font-size:1.25rem}.segmented .cover-font--serif{--cover-font:var(--serif)}.segmented .seg-font--serif{font-family:var(--serif)}.segmented .seg-font--sans{font-family:var(--sans)}.segmented .seg-font--hand{font-family:Nanum Pen Script,cursive;font-size:1.25rem;line-height:1}.edit-page{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);flex-direction:column;gap:10px;padding:14px;display:flex}.edit-page-head{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.edit-page-actions{gap:4px;margin-left:auto;display:flex}.segmented{border:1px solid var(--line);border-radius:10px;display:inline-flex;overflow:hidden}.segmented button{background:var(--surface);cursor:pointer;border:0;min-height:36px;padding:4px 10px;font-size:.85rem}.segmented--wrap{flex-wrap:wrap}.segmented button+button{border-left:1px solid var(--line)}.segmented button.active{background:var(--accent-soft);font-weight:600}.button--small{min-height:34px;padding:4px 10px;font-size:.85rem}.adjust-stage{width:min(100%, var(--adjust-w,360px));touch-action:none;cursor:grab;-webkit-user-select:none;user-select:none;margin:0 auto}.adjust-stage:active{cursor:grabbing}.adjust-stage [data-adjust-target]{outline:2px dashed var(--accent);outline-offset:-2px}.adjust-layout{gap:20px;display:grid}@media (width>=760px){.adjust-layout{grid-template-columns:min(var(--adjust-w,360px), 55%) minmax(260px, 1fr);align-items:start}.adjust-layout .adjust-stage{position:sticky;top:0}}.adjust-controls{flex-direction:column;gap:10px;display:flex}.adjust-heading{font-family:var(--sans);margin:4px 0 0;font-size:.95rem}.preset-row{flex-wrap:wrap;gap:6px;display:flex}.adjust-controls input[type=range]{width:100%;accent-color:var(--accent)}.add-page{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.danger-zone{border-top:1px solid var(--line);justify-content:space-between;padding-top:12px;display:flex}@media (width<=480px){.topbar{gap:8px;padding-left:12px;padding-right:12px}.nav a{padding:6px 8px}.theme-toggle button{width:28px;height:28px}.inline-form,.footer{flex-direction:column}}.share-box{border:1px solid var(--line);border-radius:8px;padding:6px 10px}.share-toggle{font-size:.95rem}.share-body{flex-direction:column;gap:8px;padding:6px 0 4px;display:flex}.share-url .input{flex:1;min-width:0;font-size:.85rem}.share-code-value{font-family:var(--sans);letter-spacing:.08em}.share-app{flex-direction:column;min-height:100dvh;padding:8px 16px 0;display:flex}.share-main{flex-direction:column;flex:1;justify-content:center;display:flex}.share-footer{text-align:center;color:var(--ink-soft);flex:none;padding:6px 0 8px;font-size:.7rem}.share-footer a{color:inherit}.share-title{font-family:var(--serif);white-space:nowrap;text-overflow:ellipsis;max-width:40vw;font-weight:700;overflow:hidden}.share-actions{align-items:center;gap:10px;display:flex}.share-loading{text-align:center}.share-code{text-align:center;flex-direction:column;gap:12px;max-width:360px;margin:0 auto;display:flex}.share-code h1{font-family:var(--serif);margin:0;font-size:1.4rem}.share-code .input{text-align:center;letter-spacing:.1em;font-size:1.2rem}.viewer--full{--page-w:min(100%, max(240px, calc((100dvh - 130px) * .75)));--spread-w:min(100%, max(480px, calc((100dvh - 130px) * 1.5)));width:100%;max-width:none}.share-body--link{flex-direction:row;align-items:flex-start;gap:14px}.share-fields{flex-direction:column;flex:1;gap:8px;min-width:0;display:flex}.share-qr{border:1px solid var(--line);cursor:zoom-in;background:#fff;border-radius:8px;flex:none;padding:4px;line-height:0}.qr{image-rendering:pixelated;display:block}.share-qr-big{text-align:center;flex-direction:column;align-items:center;gap:10px;display:flex}.share-qr-big .qr{background:#fff;border-radius:8px;max-width:100%;height:auto;padding:8px}.share-qr-url{color:var(--ink-soft);overflow-wrap:anywhere;margin:0;font-size:.8rem}@media (width<=480px){.share-body--link{flex-direction:column}}.book-slot{flex-direction:column;gap:6px;min-width:0;display:flex}.book-share{font:inherit;color:var(--ink-soft);border:1px solid var(--line);cursor:pointer;background:0 0;border-radius:999px;align-self:flex-start;padding:3px 10px;font-size:.8rem}.book-share--on{color:var(--accent);border-color:var(--accent)}.book-share:hover{background:var(--bg-soft,#0000000a)}.share-box--plain{border:none;padding:0}html.immersive,html.immersive body{overflow:hidden}.share-app--immersive{justify-content:center;min-height:100dvh;padding:0}.share-app--immersive .share-footer{display:none}.share-app--immersive .share-main{justify-content:center;align-items:center}.viewer--immersive{--page-w:min(100vw, calc(100dvh * .75));--spread-w:min(100vw, calc(100dvh * 1.5));gap:0}.viewer--immersive .viewer-stage{align-items:center}.immersive-exit,.turn-arrow{z-index:30;font:inherit;color:#fff;cursor:pointer;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#00000061;border:none;border-radius:999px;transition:opacity .2s;position:fixed}.immersive-exit{top:calc(10px + env(safe-area-inset-top));right:calc(10px + env(safe-area-inset-right));text-align:center;width:38px;height:38px;font-size:1.1rem;line-height:38px}.turn-arrow{text-align:center;width:40px;height:56px;padding:0;font-size:2rem;line-height:56px;top:50%;transform:translateY(-50%)}.turn-arrow--prev{left:calc(6px + env(safe-area-inset-left))}.turn-arrow--next{right:calc(6px + env(safe-area-inset-right))}.turn-arrow:disabled{opacity:.15;cursor:default}.immersive-exit:hover,.turn-arrow:not(:disabled):hover{background:#0000008c}.icon-button{border:1px solid var(--line);background:var(--surface);width:36px;height:36px;color:var(--ink);cursor:pointer;border-radius:999px;place-items:center;padding:0;display:grid}.icon-button:hover{background:var(--accent-soft)}
