:root{font-family:Manrope,'Noto Sans KR',sans-serif;color:#f4eddf;background:#30231c;font-synthesis:none;--wood:#684a33;--deep:#241b16;--cream:#f1e5cd;--amber:#c5a45b}*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;overflow:hidden}button{font:inherit;color:inherit}body{background:#30231c}.library{position:relative;width:100%;height:100svh;min-height:620px;overflow:hidden;background:linear-gradient(130deg,#403126,#9c7046)}#libraryCanvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}.shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,#21160fc9 0%,#24190f70 32%,transparent 71%),linear-gradient(0deg,#1a120fd1 0%,transparent 30%,#1d140e57 100%)}.loading{position:absolute;z-index:20;inset:0;display:flex;align-items:center;justify-content:center;gap:12px;background:#2c211a;color:#eee4d1;font-size:12px;letter-spacing:.08em;transition:opacity .18s}.loading.done{opacity:0;pointer-events:none}.loading span{width:17px;height:17px;border:2px solid #ffffff3a;border-top-color:#d5b36e;border-radius:50%;animation:spin .7s linear infinite}.topbar{position:absolute;z-index:4;left:0;right:0;top:0;height:83px;padding:0 38px;display:flex;align-items:center;gap:34px;border-bottom:1px solid #fff2;background:linear-gradient(180deg,#261b15e8,#2b1d1680);backdrop-filter:blur(15px)}.brand{display:flex;align-items:center;gap:10px;color:#f3eee0;text-decoration:none}.brand-stamp{width:35px;height:35px;border:1px solid #d5b36e86;border-radius:50%;display:grid;place-items:center;color:#e2c789;font-family:'Gowun Batang',serif;font-size:17px}.brand b{display:block;font-size:14px;letter-spacing:.12em}.brand small{display:block;margin-top:3px;font-size:7px;letter-spacing:.2em;color:#c9bda9}.location{position:absolute;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:10px;color:#e3ddcf;font-size:10px;letter-spacing:.04em;white-space:nowrap}.location i{width:6px;height:6px;border-radius:50%;background:#d6b264;box-shadow:0 0 10px #e8ca7b}.location>b{font-weight:400;color:#b5a58f}.location span:last-child{color:#e0c185}.top-right{margin-left:auto;display:flex;align-items:center;gap:18px}.top-right button{border:0;background:none;cursor:pointer}.quiet-button{font-size:16px}.quiet-button span{font-size:9px;color:#ded2bc}.people{font-size:9px;color:#ded2bc}.people-faces{color:#d7be96;letter-spacing:2px}.people b{margin:0 3px;color:#f5ead1}.avatar-chip{display:flex;align-items:center;gap:8px;text-align:left;font-size:9px}.avatar-chip i{width:30px;height:30px;display:grid;place-items:center;border-radius:50%;background:#c5a45b;color:#30231c;font-style:normal;font-size:15px}.avatar-chip small{display:block;margin-top:3px;color:#c9bda9;font-size:8px}.room-tag{position:absolute;z-index:3;top:107px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:9px;padding:8px 14px;border:1px solid #ffffff2b;border-radius:30px;background:#241a15b5;backdrop-filter:blur(12px);white-space:nowrap}.room-tag span{font-size:8px;letter-spacing:.16em;color:#dfc58e}.room-tag i{width:1px;height:12px;background:#ffffff44}.room-tag b{font-size:9px;font-weight:500}.room-tag small{margin-left:5px;color:#d2c3ae;font-size:8px}.scene-caption{position:absolute;z-index:2;left:50%;bottom:117px;transform:translateX(-50%);color:#ece8d8bd;text-shadow:0 2px 8px #111;font-family:'Gowun Batang',serif;font-size:10px;white-space:nowrap}.bottom-dock{position:absolute;z-index:5;left:50%;bottom:30px;transform:translateX(-50%);height:67px;padding:7px 9px;display:flex;align-items:center;gap:4px;border:1px solid #f4efe134;border-radius:15px;background:#261b15ed;box-shadow:0 20px 55px #160e0bcc;backdrop-filter:blur(18px)}.bottom-dock button{height:50px;min-width:100px;padding:0 12px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:3px;border:0;border-radius:10px;background:none;color:#d4c8b5;font-size:8px;cursor:pointer;transition:.18s}.bottom-dock button:hover,.bottom-dock button.active{background:#ffffff13;color:#fff0d4}.bottom-dock button i{font-style:normal;color:#dec58f;font-size:17px;line-height:1}.bottom-dock .stand-action{display:none}.bottom-dock.seated .stand-action{display:flex}.controls-hint{position:absolute;z-index:3;right:28px;bottom:51px;color:#e3ddcfb5;font-size:8px}.controls-hint kbd{padding:4px 5px;border:1px solid #ffffff38;border-radius:4px;background:#211710b5;font:inherit;color:#f2ead9}.controls-hint span{margin:0 6px}.toast{position:absolute;z-index:12;left:50%;bottom:117px;transform:translate(-50%,8px);padding:11px 17px;border:1px solid #ffffff35;border-radius:24px;background:#2a1e17f2;color:#f2eedf;font-size:10px;white-space:nowrap;opacity:0;pointer-events:none;transition:.22s}.toast.show{opacity:1;transform:translate(-50%,0)}html[data-period='day'] .shade{background:linear-gradient(90deg,#32231b80 0%,transparent 52%),linear-gradient(0deg,#1b120f91 0%,transparent 32%,#fff4e508 100%)}html[data-period='night'] .shade{background:linear-gradient(90deg,#160f0bd1 0%,#24191066 40%,transparent 75%),linear-gradient(0deg,#140e0bd1 0%,transparent 46%,#24180f75 100%)}html[data-period='dusk'] .shade{background:linear-gradient(90deg,#35231a9c 0%,transparent 56%),linear-gradient(0deg,#21140fc2 0%,transparent 35%)}
@keyframes spin{to{transform:rotate(360deg)}}@media(max-width:760px){.topbar{height:66px;padding:0 15px;gap:0}.brand{gap:7px}.brand-stamp{width:30px;height:30px}.brand b{font-size:12px}.brand small{font-size:6px}.location{top:75px}.top-right{gap:7px}.quiet-button span,.people,.avatar-chip span{display:none}.avatar-chip{padding:0}.room-tag{top:108px}.bottom-dock{bottom:13px;width:calc(100% - 20px);height:61px;justify-content:space-around;padding:5px 4px;gap:0}.bottom-dock button{min-width:78px;height:48px;padding:0 4px;font-size:7px}.bottom-dock.seated button{min-width:78px;padding:0 4px;font-size:7px}.controls-hint{display:none}.scene-caption{bottom:84px;font-size:8px}.room-tag small{display:none}}
.brand:focus-visible,.bottom-dock button:focus-visible,.book-item:focus-visible,.read-button:focus-visible{outline:2px solid #e3c99b;outline-offset:3px}

/* Reading interaction */
.reading-panel[hidden]{display:none!important}.reading-panel{position:absolute;z-index:9;left:50%;top:50%;transform:translate(-50%,-48%);width:min(780px,calc(100vw - 28px));padding:26px 30px 18px;border:1px solid #e4c78255;border-radius:20px;background:linear-gradient(145deg,#34251bfa,#1d1713fa);box-shadow:0 28px 100px #090604c9;backdrop-filter:blur(24px);color:#f4ead7}.reading-close{position:absolute;right:17px;top:14px;width:36px;height:36px;border:1px solid #ffffff24;border-radius:50%;background:#ffffff09;color:#eee2cc;font-size:22px;cursor:pointer}.reading-kicker{margin:0;color:#d9b96f;font-size:9px;letter-spacing:.22em}.reading-panel h2{margin:7px 0 18px;font-family:'Gowun Batang',serif;font-size:21px;font-weight:400}.open-book{position:relative;display:grid;grid-template-columns:1fr 1fr;min-height:310px;perspective:1200px;border-radius:7px 11px 11px 7px;box-shadow:0 16px 30px #0705048c;transform-style:preserve-3d}.open-book:before{content:"";position:absolute;z-index:2;top:0;bottom:0;left:50%;width:16px;transform:translateX(-50%);background:linear-gradient(90deg,#b2a17c,#51412e 42%,#2b221a 55%,#9b8764);opacity:.88}.page{position:relative;padding:46px 40px 36px;background:linear-gradient(90deg,#d9c8a6,#efe2c8 7%,#eee2c9);color:#473927;font-family:'Gowun Batang',serif;line-height:1.95;font-size:13px;box-shadow:inset 0 0 22px #755b3826}.page-left{border-radius:6px 0 0 6px;text-align:right;background:linear-gradient(270deg,#d6c4a1,#eee1c8 9%,#e9dcc2)}.page-right{border-radius:0 8px 8px 0}.page p{margin:12px 0 0;white-space:pre-line}.page p strong{display:block;margin-bottom:12px;font-size:16px;font-weight:700}.folio-number{position:absolute;bottom:15px;color:#8b7658;font:10px Manrope,sans-serif}.page-left .folio-number{left:25px}.page-right .folio-number{right:25px}.page-controls{display:flex;justify-content:center;align-items:center;gap:18px;margin-top:16px}.page-controls button{min-width:92px;padding:10px 14px;border:1px solid #d3b36d66;border-radius:8px;background:#8b6b3c35;color:#f4e8cf;font-size:11px;cursor:pointer}.page-controls button:disabled{opacity:.3;cursor:default}.page-controls span{min-width:42px;text-align:center;color:#d9c9ad;font-size:10px}.reading-hint{margin:12px 0 0;text-align:center;color:#c3b49d;font-size:9px}.open-book.turn-forward{animation:pageForward .38s ease-in-out}.open-book.turn-back{animation:pageBack .38s ease-in-out}@keyframes pageForward{0%{transform:rotateY(0)}42%{transform:rotateY(-8deg) scale(.985)}100%{transform:rotateY(0)}}@keyframes pageBack{0%{transform:rotateY(0)}42%{transform:rotateY(8deg) scale(.985)}100%{transform:rotateY(0)}}.bottom-dock .read-action{display:none;background:#9d7840;color:#fff2d2}.bottom-dock.seated .read-action:not([hidden]){display:flex}.bottom-dock button[hidden]{display:none!important}.library.reading .room-tag,.library.reading .scene-caption{opacity:.25}.page{cursor:pointer}@media(max-width:760px){.reading-panel{padding:20px 14px 15px;border-radius:15px}.reading-panel h2{font-size:18px;margin-bottom:12px}.open-book{min-height:280px}.page{padding:34px 17px 30px;font-size:11px;line-height:1.8}.page p strong{font-size:13px}.page-left .folio-number{left:10px}.page-right .folio-number{right:10px}.bottom-dock button{min-width:54px;font-size:6px}.bottom-dock.seated button{min-width:50px;font-size:6px}.bottom-dock button i{font-size:15px}}

.bottom-dock.ladder-active .ladder-action:not([hidden]){display:flex;background:#8b6b3c;color:#fff2d2}
.zoom-controls{position:absolute;z-index:6;right:22px;bottom:124px;display:grid;gap:6px;padding:6px;border:1px solid #ffffff30;border-radius:14px;background:#241a15c9;box-shadow:0 8px 24px #120b0870;backdrop-filter:blur(12px)}.zoom-controls button{width:40px;height:40px;border:1px solid #d3b36d50;border-radius:10px;background:#5a402b;color:#f4e8cf;font-size:19px;line-height:1;cursor:pointer}.zoom-controls button:hover{background:#8b6b3c}.zoom-controls button:last-child{font-size:16px}
@media(max-width:760px){.bottom-dock.ladder-active button{min-width:58px;padding:0 3px;font-size:6px}}
@media(max-width:760px){.zoom-controls{right:12px;bottom:100px;gap:4px;padding:5px}.zoom-controls button{width:36px;height:36px}}

.loading.failed{flex-direction:column;gap:12px;padding:24px;text-align:center}.loading.failed>span{display:none}.loading.failed strong{font-size:16px;letter-spacing:0}.loading.failed .loading-error-detail{max-width:min(520px,90vw);margin:0;color:#c8bba7;font-size:12px;line-height:1.6;letter-spacing:0;overflow-wrap:anywhere}.loading.failed button{margin-top:4px;padding:10px 18px;border:1px solid #d3b36d77;border-radius:9px;background:#6c5034;color:#f4e8cf;cursor:pointer}

/* Presence indicator and canvas click-through overlays. */
.people.connected{display:block}.people.connected .people-faces,.people.connected span:last-child{display:none!important}.people.connected b{margin:0;color:#f5ead1}.room-tag,.scene-caption,.controls-hint{pointer-events:none}
@media(max-width:760px){.people.connected{display:block!important;padding:5px 7px;border:1px solid #ffffff2a;border-radius:16px;background:#241a15aa}.people.connected b{font-size:9px}}

/* Larger, finger-friendly controls for desktop and mobile. */
.top-right button{min-height:44px}
.quiet-button{min-width:44px;padding:0 8px;font-size:19px}
.quiet-button span{font-size:10px}
.people{min-width:44px;padding:0 8px;font-size:10px}
.avatar-chip{min-width:44px;min-height:44px;gap:9px;padding:0 4px;font-size:10px}
.avatar-chip i{width:34px;height:34px;font-size:17px}
.avatar-chip small{font-size:9px}
.bottom-dock button{min-width:108px;padding:0 14px;gap:4px;font-size:9px}
.bottom-dock button i{font-size:19px}
.zoom-controls button{width:46px;height:46px;border-radius:11px;font-size:21px}

@media(max-width:760px){
  .topbar{padding:0 12px}
  .top-right{gap:4px}
  .quiet-button,.avatar-chip{width:44px;min-width:44px;height:44px;padding:0;justify-content:center}
  .avatar-chip i{width:36px;height:36px;font-size:18px}
  .bottom-dock{height:66px;padding:6px 4px}
  .bottom-dock button,.bottom-dock.seated button{min-width:72px;height:52px;padding:0 5px;font-size:8px}
  .bottom-dock button i{font-size:18px}
  .bottom-dock.ladder-active button{min-width:68px;padding:0 3px;font-size:8px}
  .scene-caption{bottom:89px}
  .zoom-controls{bottom:108px;gap:5px}
  .zoom-controls button{width:44px;height:44px}
}

.loading{flex-direction:column;gap:14px}.loading .loading-label{font-size:13px;font-weight:400}.loading progress{appearance:none;width:210px;height:4px;border:0;border-radius:4px;overflow:hidden;background:#ffffff20}.loading progress::-webkit-progress-bar{background:#ffffff20}.loading progress::-webkit-progress-value{background:#cfb073}.loading-percent{font-size:11px;color:#cdbb9c;font-weight:400}

.audio-settings{position:relative;color:#d9c8a8;font-size:10px}.audio-settings summary{cursor:pointer;list-style:none;padding:8px}.audio-settings[open]{z-index:15}.audio-settings label{position:absolute;right:0;top:36px;width:210px;padding:16px;background:#30231cf5;border:1px solid #c5a45b66;border-radius:12px;display:grid;gap:10px}.audio-settings input{width:100%;accent-color:#c5a45b}.audio-settings output{text-align:right}.audio-settings small{display:none}@media(max-width:600px){.top-right{gap:4px}.audio-settings summary{padding:6px;font-size:10px}}

/* Outfit colors share the same lightweight model and do not reload the scene. */
.avatar-panel h3{font-size:16px;color:#eee1c9;margin:22px 0 12px}.avatar-colors{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.avatar-colors button{min-height:72px;border:1px solid #c9ae7340;border-radius:14px;background:#ffffff08;color:#eee1c9;cursor:pointer;font:inherit;font-size:13px}.avatar-colors button::before{content:'';display:block;width:26px;height:26px;margin:0 auto 6px;border-radius:50%;background:var(--avatar-color);border:1px solid #ffffff45}.avatar-colors button[aria-pressed=true]{border-color:#dec286;box-shadow:0 0 0 2px #dec28644;background:#c9ae731e}.avatar-color-help{font-size:12px!important;line-height:1.6}.avatar-panel>section{max-height:calc(100dvh - 28px);overflow-y:auto}.avatar-colors button:focus-visible{outline:2px solid #dec286;outline-offset:3px}
