@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@500;700;800&family=Noto+Sans+KR:wght@400;500;600&display=swap');
:root{font-family:'DM Sans','Noto Sans KR',sans-serif;color:#283b33;background:#e9ece4;font-synthesis:none;--line:#cbd2c4;--surface:#f2f4eb;--muted:#566550}*{box-sizing:border-box}body{margin:0;height:100svh;min-height:360px;display:grid;grid-template-rows:auto minmax(0,1fr) auto auto;overflow:hidden}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;font-size:14px;font-weight:500;cursor:pointer;border:0;color:inherit;background:transparent;border-radius:8px;min-height:40px;padding:8px 13px}button:hover{background:#dde4d3}button:focus-visible,a:focus-visible{outline:2px solid #a04b2b;outline-offset:3px}button[aria-pressed=true]{background:#344a3b;color:#fff}a{color:inherit;text-decoration:none}::selection{background:#bdd0ae;color:#24362c}header{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:10px 24px;border-bottom:1px solid var(--line);background:var(--surface);z-index:1}.logo{font-size:32px;font-weight:800;letter-spacing:-.04em;line-height:1}.logo span{font-size:11px;vertical-align:top;margin-left:3px;letter-spacing:0}.rooms{display:flex;gap:6px;align-items:center}.rooms button{padding-inline:18px}#help{color:var(--muted)}#world{position:relative;min-height:0;min-width:0;overflow:hidden;touch-action:none}#world canvas{display:block;width:100%;height:100%}footer{display:flex;align-items:center;gap:20px;padding:10px 24px;background:var(--surface);border-top:1px solid var(--line);z-index:1}#toggle-actions{background:#344a3b;color:#fff;white-space:nowrap;min-width:105px}#toggle-actions:hover{background:#496449}#bubble{flex:1;min-width:0;color:var(--muted);font-size:13px;line-height:1.6;margin:0;pointer-events:none}.camera-controls{display:flex;gap:4px;flex-shrink:0}.camera-controls button{white-space:nowrap}#action-drawer{display:flex;align-items:center;gap:28px;flex-wrap:wrap;padding:18px 24px;background:var(--surface);border-top:1px solid var(--line);max-height:35svh;overflow:auto;scrollbar-width:thin;scrollbar-color:#9ba990 var(--surface)}[hidden]{display:none!important}.activity-panel{min-width:180px;flex:1}.panel-heading{font-size:12px;color:var(--muted);margin-bottom:10px}#activities{display:flex;flex-wrap:wrap;gap:6px}#activities button{background:#e0e8d7}#activities button:hover{background:#cdddc1}.controls{display:flex;flex-wrap:wrap;gap:3px;max-width:400px}.needs{display:flex;gap:14px;width:185px}.needs label{font-size:12px;color:var(--muted);flex:1}meter{width:100%;height:8px;display:block;margin-top:8px}meter::-webkit-meter-bar{background:#dfe5d7;border:0}meter::-webkit-meter-optimum-value{background:#6f885b}#activity-progress{margin-top:12px}#activity-progress>div{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:13px}#cancel-action{font-size:13px;min-height:32px;text-decoration:underline;text-underline-offset:3px}progress{width:100%;height:6px;accent-color:#9c6949;display:block;margin-top:6px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}dialog{border:0;border-radius:16px;padding:36px;max-width:480px;width:90%;max-height:85svh;color:#283b33;background:var(--surface);box-shadow:0 20px 70px #18322633}dialog::backdrop{background:#203a3066}.close{position:absolute;top:8px;right:10px;font-size:28px}dialog h2{font-size:26px;margin:15px 0}dialog p{font-size:15px;line-height:1.9;color:var(--muted);white-space:pre-line}.primary{background:#344a3b;color:#fff;padding:12px 18px;margin-top:16px}#fallback{position:fixed;top:40%;left:50%;transform:translateX(-50%);background:var(--surface);padding:25px;width:min(90%,400px);border-radius:12px}
@media(max-width:700px){header{padding:12px 14px 8px;gap:10px;flex-wrap:wrap}.logo{font-size:29px}.rooms{order:3;width:100%;justify-content:space-between;gap:0}.rooms button{flex:1;padding:8px 10px;font-size:13px}#help{font-size:13px}footer{padding:8px 12px;gap:8px;flex-wrap:wrap}#toggle-actions{min-width:90px;font-size:13px}.camera-controls{margin-left:auto;gap:0}.camera-controls button{padding:8px 9px;font-size:12px;min-width:35px}#bubble{order:3;flex-basis:100%;text-align:center;font-size:12px;min-height:20px}.needs{width:170px;margin-left:auto}#action-drawer{padding:14px;gap:12px;max-height:34svh;align-items:flex-start}.activity-panel{flex-basis:100%}.controls{max-width:none;flex:1;gap:0}.controls button{font-size:12px;padding:8px 10px}.panel-heading{margin-bottom:6px}.needs label{font-size:11px}.camera-controls button[aria-label='축소'],.camera-controls button[aria-label='확대']{padding-inline:7px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}
button[aria-pressed=true]:hover,button.primary:hover{background:#496449;color:#fff}
.inventory{font-size:12px;line-height:1.7;color:var(--muted);margin:12px 0 0}#activities{max-width:650px}#activities button{min-height:38px}#stop-routine{font-size:12px;white-space:nowrap;color:#854629;background:#eadfcf}@media(max-width:700px){#stop-routine{order:3}#bubble{flex-basis:75%;text-align:left}#action-drawer .activity-panel{min-width:0}#activities button{font-size:12px}}
/* Small stacked buttons without an enclosing panel. */
#world:focus{outline:none}
#world:focus-visible{outline:2px solid #778d67;outline-offset:-3px}
#world-actions{position:fixed;z-index:4;display:flex;flex-direction:column;align-items:stretch;gap:4px;width:max-content;max-width:calc(100vw - 24px);padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;overflow-x:auto;scrollbar-width:none;color:#283b33}
#world-actions[hidden]{display:none}
.context-heading{display:contents}
.context-heading strong,#context-inventory{display:none}
#context-choices{display:flex;flex-direction:column;align-items:stretch;gap:4px}
#context-choices:empty{display:none}
#world-actions button{flex:none;min-height:24px;margin:0;padding:2px 9px;border:1px solid #b8c4aa;border-radius:4px;background:#edf1e5;box-shadow:none;font-size:11px;font-weight:500;line-height:20px;white-space:nowrap;color:#283b33;text-align:left;cursor:pointer}
#world-actions button:hover{background:#dce6ce;color:#152b1c}
#world-actions button:focus-visible{outline:1px solid #344a3b;outline-offset:2px}