:root{--paper:#eee9cf;--gold:#e2b54b;--ink:#f6efdf}*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden;background:#273e47;color:var(--ink);font-family:"Apple SD Gothic Neo","Noto Sans KR",system-ui,sans-serif}#scene{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none}#scene:focus{outline:none}header{position:fixed;left:30px;top:26px;z-index:4;pointer-events:none;text-shadow:0 2px 12px #263e4266;transition:opacity .5s}header small{font-size:10px;letter-spacing:.24em;color:#ecd38b}header small span{font-size:8px;color:#cfdbd7}h1{font:500 31px/1.25 "AppleMyungjo","Nanum Myeongjo",serif;margin:10px 0 5px}header p{font:11px Georgia,serif;letter-spacing:.09em;color:#e0e3d3;margin:0}.home{position:fixed;right:22px;top:25px;z-index:5;padding:9px 13px;border:1px solid #ffffff33;border-radius:25px;text-decoration:none;color:var(--ink);font-size:11px;background:#233e4660;backdrop-filter:blur(12px)}#gallery{position:fixed;inset:0;pointer-events:none;z-index:2}#wall{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 40%,#536461,#394c50 65%,#23383f)}#frame{position:absolute;border:16px solid #bc8e4f;border-image:linear-gradient(125deg,#e7d2a0,#b48643 24%,#e0c084 47%,#87652f 72%,#c7a364) 1;box-shadow:0 17px 40px #091f2377,inset 0 0 0 3px #54452c}#frame::before{content:'';position:absolute;inset:-11px;border:2px solid #f8e5b577}#frame::after{content:'';position:absolute;inset:-3px;border:2px solid #735d36aa}#caption{position:fixed;z-index:3;left:50%;width:330px;text-align:center;transform:translateX(-50%);color:#e4e5d4;pointer-events:none}#caption b{display:block;font:500 15px "AppleMyungjo",serif;margin-bottom:6px}#caption span{font-size:10px;display:block}#caption small{display:block;font-size:9px;color:#b9ceca;margin-top:4px}#caption strong{display:block;margin-top:10px;font-size:11px;letter-spacing:.02em;font-weight:500;color:#f1e2b4}.controls{position:fixed;left:50%;bottom:max(18px,env(safe-area-inset-bottom));transform:translateX(-50%);z-index:6;display:flex;gap:7px;align-items:center;padding:8px 10px;border:1px solid #ebf1dc30;border-radius:30px;background:#23353cdb;backdrop-filter:blur(15px);box-shadow:0 8px 28px #10273050;max-width:calc(100% - 24px)}button{font:inherit;font-size:12px;color:#f3eedb;background:transparent;border:1px solid transparent;border-radius:24px;padding:10px 13px;cursor:pointer;white-space:nowrap;min-height:40px}button:hover{background:#ffffff10}button:disabled{opacity:.6;cursor:progress}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid #f4d67f;outline-offset:2px}.primary{background:#e6bd5d;color:#263c38;font-weight:700;padding:11px 21px}.primary:hover{background:#f2d085}button[aria-pressed=true]{color:#f4db93}.mood{min-width:200px;padding:0 7px}input[type=range]{appearance:none;width:100%;height:18px;margin:0;background:linear-gradient(90deg,#e8d6a4,#9cbead,#516c8e);background-size:100% 3px;background-position:center;background-repeat:no-repeat}input::-webkit-slider-thumb{appearance:none;width:13px;height:13px;border-radius:50%;background:#f4e3ae;box-shadow:0 0 0 3px #f4df9922}.labels{display:flex;justify-content:space-between}.labels button{font-size:9px;min-height:23px;min-width:35px;padding:0 2px;color:#c9d6ce}.tip{position:fixed;bottom:100px;left:50%;transform:translateX(-50%);font-size:10px;white-space:nowrap;padding:8px 13px;background:#1a384965;border-radius:20px;z-index:4;pointer-events:none;display:none}body[data-place=gallery] .inside{display:none}body[data-place=inside] #caption{display:none}body[data-mode=read] header{opacity:0}body[data-place=inside] .tip{display:block}#loading{position:fixed;inset:0;display:grid;place-items:center;background:#273e47;z-index:10;color:#d3d8bd;font-size:12px;letter-spacing:.15em;transition:opacity .6s}.ready #loading{opacity:0;pointer-events:none}#error:empty{display:none}#error{position:fixed;bottom:0;left:0;right:0;padding:12px;background:#73372e;z-index:20;margin:0;font-size:12px}
@media(max-width:640px){header{left:20px;top:22px}header small{font-size:8px}h1{font-size:24px;margin-top:8px}header p{font-size:9px}.home{top:22px;right:15px;font-size:10px;padding:7px 10px}.controls{width:calc(100% - 24px);flex-wrap:wrap;justify-content:center;border-radius:21px;gap:4px;padding:8px}.controls>button{font-size:10px;padding:9px 10px}.primary{padding:10px 13px!important;font-size:11px!important}.mood{order:5;width:100%;padding:0 8px}.labels button{font-size:9px;min-width:44px}.tip{bottom:139px;max-width:calc(100% - 30px);text-align:center;font-size:8px;white-space:normal;line-height:1.5;width:300px}#caption{width:300px}#caption b{font-size:14px}#caption strong{font-size:10px}body[data-place=inside] header{top:20px}body[data-place=inside] header h1{font-size:22px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}