/* Geometry, lighting and page deformation are rendered by book-3d.js. */
.book-scene{height:365px;perspective:none;margin-top:0}
.book-webgl{position:absolute;inset:-15px -20px -5px;z-index:2}
.book-webgl canvas{display:block;width:100%;height:100%;outline:none}
.book-scene .book-activate{inset:18px 5% 20px;height:auto;border-radius:12px;z-index:3}
.book-sky{inset:-10px -20px -15px;background:radial-gradient(ellipse at 50% 70%,#bb925421,transparent 62%)}
.book-fallback{display:none;position:absolute;inset:35% 20px auto;color:#dbbd89;font-size:13px}
.book-unavailable .book-fallback{display:block}
.book-unavailable canvas{opacity:0}
.opening-book .book-webgl{z-index:4;pointer-events:none}
.opening-book .cover-copy{animation:cover-fade .65s 1.2s both}
.opening-book .book-caption,.opening-book .cover-philosophy{animation:cover-fade .5s both}
@media(max-width:360px){.book-scene{height:330px}}
@media(prefers-reduced-motion:reduce){.opening-book .cover-copy,.opening-book .book-caption,.opening-book .cover-philosophy{animation:none}}

.book-scene .book-activate{touch-action:pan-y}
/* The HTML writing card shares the projected position of its 3D card face. */
.story-card{position:absolute;left:0;top:0;z-index:2;width:270px;height:430px;transform-origin:0 0;visibility:hidden;display:flex;flex-direction:column;box-sizing:border-box;padding:21px 22px 16px;border:7px solid #dfcaa4;border-radius:5px;background:#faf0d9;box-shadow:inset 0 0 0 1px #ac8756,inset 0 0 0 6px #f4e5c8;color:#334057;text-align:left;backface-visibility:hidden}
.story-card-ornament{display:flex;align-items:center;justify-content:space-between;color:#a27a42;font-size:21px;margin-bottom:16px}.story-card-ornament span{font:700 11px Georgia,serif;letter-spacing:.18em}
.story-card label{display:block;font-size:11px;font-weight:600;color:#806440;margin:0 0 5px}
.story-card input{width:100%;min-width:0;border:0;border-bottom:1px solid #bca67e;padding:0 1px 6px;border-radius:0;background:transparent;color:#26364a;font:500 16px/1.7 "Noto Serif KR",serif;margin-bottom:19px}
.story-card textarea{display:block;width:100%;flex:1;min-height:0;resize:none;border:0;border-radius:0;outline:none;background:repeating-linear-gradient(to bottom,transparent 0 29px,#c8b795 29px 30px,transparent 30px 32px);color:#293d53;font:14px/32px "Noto Serif KR",serif;padding:0 1px;overflow:auto}
.story-card input::placeholder,.story-card textarea::placeholder{color:#a2998b;font-size:12px}
.story-card-bottom{display:flex;justify-content:space-between;gap:5px;color:#9c845f;font:9px system-ui,sans-serif;margin-top:13px}
.story-card-star{font:15px Georgia,serif;text-align:center;color:#ac834b;margin-top:12px}
.story-card-reverse{position:absolute;inset:-7px;z-index:3;width:calc(100% + 14px);height:calc(100% + 14px);object-fit:fill;border-radius:5px;pointer-events:none}
.story-card-reverse[hidden]{display:none}
.book-writing .book-scene{height:clamp(380px,calc(100svh - 260px),550px);transition:height 1s ease}
.book-writing .cover-copy{animation:none!important;opacity:1;min-height:78px}
.book-writing .cover-copy h1{font-size:22px;margin:9px 0 6px}
.book-writing .cover-copy p{font-size:10px}
.book-writing .book-caption,.book-writing .cover-philosophy{display:none}
.book-writing .book-activate{display:none}
.book-writing .book-webgl{pointer-events:auto}
.book-writing .book-unavailable .story-card{visibility:visible!important;left:50%;top:35px;transform:translateX(-50%)!important}
.book-writing .book-unavailable .book-fallback{display:none}
@media(max-height:700px){.book-writing .book-scene{height:400px}.book-writing{padding-top:5px}}
.book-writing{padding-bottom:95px}
.book-writing .book-scene{height:clamp(320px,calc(100dvh - 290px),550px)}
.book-writing .book-webgl{inset:0 -20px}
.book-controls{position:absolute;inset:0;z-index:6;pointer-events:none}
.book-arrow{position:absolute;top:50%;transform:translateY(-50%);display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:0;background:transparent;color:#dbb77d;box-shadow:none;pointer-events:auto;transition:opacity .2s,color .2s}
.book-arrow span{display:block;width:12px;height:12px;border-top:2px solid currentColor;border-right:2px solid currentColor;font-size:0;transform:rotate(45deg);filter:drop-shadow(0 1px 1px #12223dcc)}
.book-arrow-prev span{transform:rotate(-135deg)}
.book-arrow-prev{left:-13px}.book-arrow-next{right:-13px}
.book-arrow:hover:not(:disabled){color:#ffe0a6}.book-arrow:disabled{opacity:.25;cursor:default}
.book-writing .book-arrow{color:#866435}.book-writing .book-arrow span{filter:drop-shadow(0 1px 0 #fff6dc)}.book-writing .book-arrow:hover:not(:disabled){color:#42331e}