/* ===== 캐릭터 & 사무실 ===== */
.office{position:relative;height:124px;border-bottom:1px solid var(--line);overflow:hidden;overflow:clip visible;flex:none;
  background:linear-gradient(to bottom,transparent 0,transparent 78%,color-mix(in srgb,var(--board) 9%,transparent) 78%),var(--paper)}
.office[hidden]{display:none}
.office .prop{position:absolute;bottom:14px;pointer-events:none;opacity:.9}
.office .tag{position:absolute;left:12px;top:8px;font-family:"Jua",sans-serif;font-size:12px;color:var(--muted);z-index:1;pointer-events:none}
.office .tag small{font-family:"IBM Plex Sans KR",sans-serif;font-size:12px}
.osize{position:absolute;right:10px;top:6px;z-index:300;border:1px solid var(--line);background:var(--memo);color:var(--ink);border-radius:999px;padding:2px 10px;font-size:12px}
.office{cursor:pointer}
.office.big{height:min(46vh,420px);background:
  repeating-linear-gradient(90deg,transparent 0 118px,color-mix(in srgb,var(--board) 7%,transparent) 118px 120px),
  repeating-linear-gradient(0deg,color-mix(in srgb,var(--postit) 14%,var(--paper)) 0 38px,color-mix(in srgb,var(--postit) 8%,var(--paper)) 38px 40px)}
.actor.me .lbl{background:var(--ink);color:var(--paper)}
.actor.me::before{content:"";position:absolute;bottom:14px;width:46px;height:10px;border-radius:50%;border:2px dashed var(--red);opacity:.55}
.actor{position:absolute;left:0;bottom:2px;width:76px;display:flex;flex-direction:column;align-items:center;cursor:pointer;will-change:transform;outline-offset:2px}
.actor .ac svg{width:72px;height:72px;display:block;transition:transform .15s}
.actor .ac.flip svg{transform:scaleX(-1)}
.actor.walk .ac{animation:bob .42s ease-in-out infinite}
.actor.walk .ft{animation:step .42s ease-in-out infinite}
.actor.walk .fr{animation-delay:.21s}
@keyframes bob{50%{transform:translateY(-3px)}}
@keyframes step{50%{transform:translateY(-2px)}}
.actor .lbl{font-size:12px;color:var(--ink);background:color-mix(in srgb,var(--paper) 85%,transparent);border-radius:6px;padding:0 5px;white-space:nowrap;max-width:110px;overflow:hidden;text-overflow:ellipsis;margin-top:-2px}
.actor.me .lbl{max-width:230px}
/* 닉네임 왼쪽 접속 점: 초록 = Realtime Presence 에 있음(사이드바 "다들 상태"와 같은 색), 회색 = 없음. em 단위라 이름표 글씨 크기를 따라간다 */
.actor .lbl .pdot{display:inline-block;width:.6em;height:.6em;border-radius:50%;background:#A0A6AE;margin-right:.35em;vertical-align:.02em;box-shadow:0 0 0 .12em rgba(255,255,255,.9);flex:none}
.actor.online .lbl .pdot{background:#4CC38A}
.actor .say{position:absolute;bottom:92px;left:50%;transform:translateX(-50%);background:var(--memo);color:var(--ink);border:1.5px solid var(--ink);border-radius:12px;padding:4px 10px;font-size:12px;line-height:1.35;width:max-content;max-width:210px;white-space:normal;word-break:keep-all;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;z-index:2}
.actor .say[hidden]{display:none}
.cav{width:34px;height:34px;flex:none;margin-top:2px;display:block}
.cav svg,.av svg{width:100%;height:100%;display:block}
.charbtn{margin:8px 4px 0;width:calc(100% - 8px);background:var(--postit);color:var(--postit-ink);border:0;border-radius:10px;padding:7px;font-size:12px;font-weight:600}
.ch-card{background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:16px;width:min(460px,100%);max-height:100%;overflow-y:auto}
.ch-prev{width:150px;height:150px;margin:4px auto 6px;background:color-mix(in srgb,var(--postit) 35%,transparent);border-radius:50%;display:grid;place-items:center}
.ch-prev svg,.ch-prev img{width:120px;height:120px;animation:bob 1.2s ease-in-out infinite}
.charimg{width:100%;height:100%;object-fit:contain;display:block;image-rendering:pixelated;backface-visibility:hidden}
.actor{transform-style:flat}
.actor .ac img{width:72px;height:72px;display:block;transition:transform .15s}
.actor .ac.flip img{transform:scaleX(-1)}
.cav img,.av img.charimg{width:100%;height:100%}
.pwrap{position:relative;display:block;width:100%;height:100%}
.pwrap img,.pwrap svg{position:absolute;inset:0;width:100%!important;height:100%!important}
.actor .ac .pwrap{width:72px;height:72px;transition:transform .15s}
.actor .ac.flip .pwrap{transform:scaleX(-1)}
.actor .ac.flip .pwrap img,.actor .ac.flip .pwrap svg{transform:none}
.ch-prev .pwrap{width:120px;height:120px;animation:bob 1.2s ease-in-out infinite}
.ch-prev .pwrap img,.ch-prev .pwrap svg{animation:none}
/* 꾸미기 편집 미리보기: 크게(64 도트 × 5배), 움직이지 않게(끌어서 맞추기 쉽도록). 도트는 계단 그대로 */
.ch-prev.edit{width:min(320px,76vw);height:min(320px,76vw);border-radius:16px;position:relative;display:block;margin:4px auto 8px;
  background:repeating-conic-gradient(color-mix(in srgb,var(--postit) 30%,transparent) 0 25%,color-mix(in srgb,var(--postit) 18%,transparent) 0 50%) 0 0/40px 40px}
.ch-prev.edit .pwrap{width:100%;height:100%;animation:none}
.ch-prev.edit .pwrap img{width:100%!important;height:100%!important;animation:none;image-rendering:pixelated}
.ch-sel{position:absolute;border:2px dashed var(--ink);border-radius:4px;cursor:move;touch-action:none;z-index:5;box-sizing:border-box;
  background:color-mix(in srgb,var(--postit) 12%,transparent)}
.ch-sel.on{border-style:solid}
.ch-grip{position:absolute;right:-11px;bottom:-11px;width:22px;height:22px;border-radius:6px;background:var(--ink);cursor:nwse-resize;touch-action:none;
  box-shadow:0 0 0 2px var(--paper)}
.ch-grip::after{content:"";position:absolute;right:5px;bottom:5px;border-right:8px solid var(--paper);border-top:8px solid transparent}
.ch-adj{margin-top:10px;padding:10px;border:1px dashed var(--line);border-radius:12px;display:flex;flex-direction:column;gap:8px}
.ch-adj-help{margin:0;font-size:12px;color:var(--muted);line-height:1.45}
.ch-adj-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ch-adj-lb{font-size:12px;color:var(--muted);width:30px;flex:none}
.ch-adj-pad{display:grid;grid-template-columns:repeat(3,34px);grid-template-rows:repeat(2,30px);gap:3px}
.ch-adj-pad button:nth-child(1){grid-column:2;grid-row:1}
.ch-adj-pad button:nth-child(2){grid-column:1;grid-row:2}
.ch-adj-pad button:nth-child(3){grid-column:3;grid-row:2}
.ch-adj-pad button:nth-child(4){grid-column:2;grid-row:2}
.ch-adj-btn{min-width:34px;height:30px;border:1px solid var(--line);background:var(--memo);border-radius:8px;font-size:14px;color:var(--ink);padding:0 6px}
.ch-adj-btn:disabled,.ch-adj-reset:disabled{opacity:.45}
.ch-adj-vals{font-size:12.5px;color:var(--ink)}
.ch-adj-range{flex:1;min-width:110px}
.ch-adj-pct{font-size:13px;min-width:42px;text-align:right}
.ch-adj-btns{display:flex;gap:6px;flex-wrap:wrap}
.ch-adj-reset{border:1px solid var(--line);background:var(--memo);border-radius:999px;padding:5px 11px;font-size:12px;color:var(--ink)}
.ch-pick{display:flex;flex-direction:column;align-items:center;gap:3px;border:1px solid var(--line);background:var(--memo);border-radius:12px;padding:6px 8px;font-size:12px;color:var(--ink);min-width:74px}
.ch-pick .pv{width:52px;height:52px;display:block}
.ch-pick .pv svg,.ch-pick .pv img{width:100%;height:100%;object-fit:contain;display:block}
.ch-pick[aria-pressed="true"]{border-color:var(--ink);box-shadow:0 0 0 2px var(--ink)}
/* 자산 v6: 512 캔버스 기준 anchor 로 겹쳐 그림 (위치·크기·z 는 app.js 가 카탈로그 값으로 넣음) */
/* 캐릭터 = 64×64 픽셀 스프라이트 한 장 (app.js 가 착용 아이템까지 합쳐 격자로 다시 찍음). 확대는 계단 그대로, 작은 아이콘만 부드럽게 */
.pwrap.cv6 img{image-rendering:pixelated;image-rendering:crisp-edges;image-rendering:pixelated;-webkit-user-drag:none;user-select:none}
.cav .pwrap.cv6 img,.av .pwrap.cv6 img,.ch-pick .pv .pwrap.cv6 img{image-rendering:auto}
.pwrap.cv6 .povl{z-index:60}
.ch-grid{max-height:228px;overflow-y:auto;padding:3px;align-content:flex-start}
.ch-pick{position:relative}
.ch-pick .ch-nm{max-width:78px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ch-pick .ch-tier{font-size:10px;color:var(--muted)}
.ch-pick.locked .pv{opacity:.45;filter:grayscale(.6)}
.ch-opt.has{font-weight:700}
.ch-opt.has::after{content:" •"}
.ch-items{max-height:200px}
.ch-item{width:56px;height:56px;border:1px solid var(--line);background:var(--memo);border-radius:10px;padding:4px;display:grid;place-items:center;font-size:12px;color:var(--ink)}
.ch-item img{max-width:100%;max-height:100%;image-rendering:pixelated;display:block}
.ch-item[aria-pressed="true"]{border-color:var(--ink);box-shadow:0 0 0 2px var(--ink)}
.ch-notice{margin:0 0 6px;padding:8px 10px;border-radius:10px;background:color-mix(in srgb,var(--postit) 45%,transparent);color:var(--ink);font-size:12px;line-height:1.5}
.ch-row{display:grid;grid-template-columns:74px 1fr;gap:8px;align-items:start;margin-top:10px}
.ch-lb{font-size:12px;color:var(--muted);padding-top:6px}
.ch-opts{display:flex;flex-wrap:wrap;gap:5px}
.ch-opt{border:1px solid var(--line);background:var(--memo);border-radius:999px;padding:5px 11px;font-size:12px;color:var(--ink)}
.ch-opt[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.ch-opt.sw{width:28px;height:28px;padding:0;border:2px solid var(--paper);box-shadow:0 0 0 1px var(--line)}
.ch-opt.sw[aria-pressed="true"]{box-shadow:0 0 0 3px var(--ink)}
#chNick{margin-top:0;width:100%}
.roam{position:fixed;inset:0;z-index:40;pointer-events:none;overflow:hidden}
.roam[hidden]{display:none}
.roam .actor{pointer-events:none}
.roam .actor .lbl{box-shadow:0 1px 3px rgba(0,0,0,.12)}
.roam .actor.low .say{bottom:auto;top:84px}
body.hide .roam,body.work .roam,body.mall .roam{display:none}
.dpad{position:fixed;left:12px;bottom:calc(84px + env(safe-area-inset-bottom,0px));z-index:45;display:grid;grid-template-columns:repeat(3,38px);grid-template-rows:repeat(2,34px);gap:3px;opacity:.85}
.dpad[hidden]{display:none}
.dpad button{border:1px solid var(--line);background:var(--memo);color:var(--ink);border-radius:8px;font-size:12px;touch-action:none;user-select:none}
.dpad .u{grid-column:2;grid-row:1}.dpad .l{grid-column:1;grid-row:2}.dpad .d{grid-column:2;grid-row:2}.dpad .r{grid-column:3;grid-row:2}
body.work .dpad,body.mall .dpad,body.hide .dpad{display:none}
body.work .wallet,body.mall .wallet,body.work .walletbtns,body.mall .walletbtns,body.work #sectWallet,body.mall #sectWallet,body.work .emo-help,body.mall .emo-help,body.work .meetbar,body.mall .meetbar,body.work #srchBtn,body.mall #srchBtn,body.work .pinbar,body.mall .pinbar{display:none}
body.work .office,body.mall .office,body.work .charbtn,body.mall .charbtn{display:none}
@media (max-width:760px){.office .tag small{display:none}.office{height:108px}.actor .ac svg,.actor .ac img{width:60px;height:60px}.actor .ac .pwrap{width:60px;height:60px}.actor .say{bottom:78px}}
/* 사무실: 등장·퇴장, 자리비움, 내 캐릭터 확대, 가장자리 이름표·말풍선 */
@keyframes actorPop{0%{opacity:0;scale:.55}70%{opacity:1;scale:1.08}100%{scale:1}}
.actor.enter .pwrap{animation:actorPop .45s ease-out}
.actor.leave{opacity:0;transition:opacity .4s ease-in;pointer-events:none}
.actor.away .pwrap{opacity:.7}
.actor .zzz.away{left:50%;transform:translateX(-50%);font-size:11px;white-space:nowrap;background:var(--memo);color:var(--ink);border:1px solid var(--line);border-radius:999px;padding:1px 7px;animation:none}
/* 더블클릭 확대는 app.js popZoom 이 Web Animations 로 .ac 의 scale 을 한 번에 이어서 재생한다(여기 CSS 전환 없음) */
/* 캐릭터는 tabIndex=-1(클릭으로만 포커스, Tab 순서에 없음)이라 전역 :focus-visible 빨간 외곽선이 클릭 뒤에 붙는 것만 끈다 */
.actor:focus,.actor:focus-visible{outline:none}
.actor.zoom .say{bottom:136px}
.actor.zoom .zzz,.actor.zoom .emoji-pop{bottom:118px}
.actor.zoom .bang{bottom:120px}
.roam .actor.low.zoom .say{bottom:auto;top:84px}
.actor.edge-l .lbl{align-self:flex-start}
.actor.edge-r .lbl{align-self:flex-end}
.actor.edge-l .say{left:0;transform:none}
.actor.edge-r .say{left:auto;right:0;transform:none}
@media (max-width:760px){.actor.zoom .say{bottom:112px}.actor.zoom .zzz,.actor.zoom .emoji-pop{bottom:98px}}
.actor.talking{z-index:5000!important}
@media (max-width:760px){.actor.me .lbl{max-width:150px}}
/* ===== 사무실 월드: 개인 자리 · 책상 · 대표님 (월드 좌표를 화면 비율로 줄여 그림) ===== */
.ospacer{height:1px}
.oworld{position:absolute;top:0;left:0;transform-origin:0 0;z-index:0;--inv:1}
.owall{position:absolute;left:0;right:0;top:0;pointer-events:none}   /* 벽 띠 색은 사무실 층(.office) 배경이 전체 폭으로 칠한다 */
/* 사무실 그림(data/office-assets.js): 도트 스프라이트를 정수배 크기로 — 번지지 않게 nearest-neighbor 로만 */
.oworld img,.desk-prev img,.dthumb{image-rendering:pixelated}
.owall .win,.owall .osign{position:absolute;display:block}
.oprop{display:block}
.owall .clock{position:absolute;top:20px;width:34px;height:34px;border-radius:50%;background:#FFF;border:3px solid #3A3A46;background-image:linear-gradient(#3A3A46,#3A3A46),linear-gradient(#3A3A46,#3A3A46);background-size:2px 11px,9px 2px;background-position:50% 5px,15px 50%;background-repeat:no-repeat}
.orug{position:absolute;bottom:120px;height:120px;border-radius:14px;background:color-mix(in srgb,#C8342A 16%,transparent);pointer-events:none}
.oprop{position:absolute;pointer-events:none}
.oworld .actor{width:164px;padding-bottom:16px}
.oworld .actor .ac .pwrap,.oworld .actor .ac img,.oworld .actor .ac svg{width:160px!important;height:160px!important}
.oworld .actor.me::before{width:100px;bottom:12px;height:14px}
.oworld .actor .zzz{bottom:168px}
.oworld .actor .emoji-pop{bottom:164px}
.oworld .actor .bang{bottom:172px}
.oworld .actor.zoom .zzz,.oworld .actor.zoom .emoji-pop{bottom:268px}
.oworld .actor.zoom .bang{bottom:272px}
.oworld .actor .lbl{position:absolute;top:calc(100% - 16px);left:50%;transform:translateX(-50%);font-size:calc(12px * var(--inv));max-width:calc(150px * var(--inv));margin:0}
.oworld .actor.edge-l .lbl{left:0;transform:none}
.oworld .actor.edge-r .lbl{left:auto;right:0;transform:none}
/* 말풍선: 캐릭터 머리 위, 픽셀풍 테두리 + 꼬리. 글은 안쪽(.st)에서 4줄까지 (전체는 대화 모아보기) */
.oworld .actor .say{bottom:184px;display:block;overflow:visible;-webkit-line-clamp:unset;font-size:calc(12.5px * var(--inv));max-width:calc(220px * var(--inv));padding:calc(5px * var(--inv)) calc(10px * var(--inv));
  background:var(--memo);color:var(--ink);border:calc(2px * var(--inv)) solid var(--ink);border-radius:calc(6px * var(--inv));box-shadow:calc(3px * var(--inv)) calc(3px * var(--inv)) 0 color-mix(in srgb,var(--ink) 30%,transparent)}
.oworld .actor .say .st{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;line-height:1.4}
.oworld .actor .say::after{content:"";position:absolute;left:var(--tail,50%);bottom:calc(-9px * var(--inv));width:calc(12px * var(--inv));height:calc(12px * var(--inv));margin-left:calc(-6px * var(--inv));background:var(--memo);border-right:calc(2px * var(--inv)) solid var(--ink);border-bottom:calc(2px * var(--inv)) solid var(--ink);transform:rotate(45deg)}
.oworld .actor .say[hidden]{display:none}
.oworld .actor.zoom .say{bottom:284px}
.oworld .actor.npc .say{background:#FFF3C4;color:#3A2A1A}
.oworld .actor.npc .say::after{background:#FFF3C4}
.oworld .actor .zzz.away{font-size:calc(11px * var(--inv))}
.actor.seated .lbl{visibility:hidden}
.actor.seated::before{display:none}
.actor.seated.away .ac{rotate:9deg;transform-origin:50% 100%}
/* 의자·책상: 그림 크기(너비·높이)는 JS 가 스프라이트 × 배율로 정한다. 모니터·키보드·마우스 위치는 DESK_DECOR_SLOTS */
.chair{position:absolute;pointer-events:none}
.chair img,.desk img{display:block}
.desk{position:absolute;cursor:pointer}
.desk i{position:absolute;display:block;font-style:normal}
.desk .dimg{position:absolute;left:0;bottom:0}
.desk .dmat{border-radius:3px;background:var(--t-desk-mat,transparent)}
/* 이름표: 책상 앞판 가운데 (위치는 DESK_DECOR_SLOTS.nameplate — JS 가 left·bottom 을 넣는다) */
.desk .dname{position:absolute;transform:translateX(-50%);font-weight:600;font-size:calc(11px * var(--inv));line-height:1.3;color:#3A2A1A;background:#FFF6E0;border:1px solid #6B4A2E;border-radius:3px;padding:0 6px;max-width:calc(120px * var(--inv));overflow:hidden;text-overflow:ellipsis;white-space:nowrap;z-index:2}
.desk.ceo .dname{background:#F2C14E;border-color:#4A2A18}
.desk.mine .dname{background:var(--postit);color:var(--postit-ink)}
/* 빈 자리는 모니터가 꺼진 것처럼 어둡게, 일하는 중(입력 중)은 화면 빛 */
.desk.nobody .dmon img{filter:brightness(.6) saturate(.6)}
.desk.working .dmon img{filter:drop-shadow(0 0 5px #9ED8FF)}
.desk .dtype{top:-18px;left:16px;font-size:13px;display:none!important}
.desk.working .dtype{display:block!important;animation:bob .8s ease-in-out infinite}
.ddecos{position:absolute;inset:0;pointer-events:none}
.ddeco{position:absolute;display:flex;align-items:flex-end;justify-content:center;font-size:22px;line-height:1}
.ddeco img{display:block;flex:none}
.actor.npc{cursor:pointer}
.actor.npc .lbl{background:#F2C14E;color:#3A2A1A}
.ceo-card{width:min(420px,100%)}
.ceo-body{display:flex;gap:12px;align-items:center;margin:8px 0 4px}
.ceo-face{flex:none;width:72px;height:72px}
.ceo-face:empty{display:none}
.ceo-body p{margin:0;font-size:14px;line-height:1.6;color:var(--ink)}
#ceoBtns{flex-wrap:wrap}
.desk-prev{position:relative;height:300px;width:360px;max-width:100%;margin:4px auto 8px;background:color-mix(in srgb,var(--postit) 25%,transparent);border-radius:12px;overflow:hidden}
.desk-prev{--inv:1}
.desk-prev .actor{left:0;bottom:0;padding-bottom:16px;width:164px}
.desk-prev .actor .ac .pwrap,.desk-prev .actor .ac img{width:160px!important;height:160px!important}
.desk-prev .actor .lbl{display:none}
.ch-item.locked{position:relative;flex-direction:column;font-size:18px;width:64px;height:60px;gap:2px}
.ch-item.locked small{font-size:10px;color:var(--muted)}
.ch-item.locked::after{content:none}
/* 자리 꾸미기: 기본 무료 / 🔒 유료(가격·구매 준비 중). 유료도 누르면 미리보기는 된다 */
.ch-item.dk-item{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:2px;width:78px;height:auto;min-height:84px;padding:5px 3px;font-size:18px}
.ch-item.dk-item[aria-pressed="true"]{border:2px solid var(--ink);padding:4px 2px}
.dk-item .dthumb{flex:none;max-width:48px;max-height:44px;object-fit:contain}
.dk-item .dk-emo{height:40px;display:grid;place-items:center}
.dk-item .dk-name{font-size:10.5px;line-height:1.25;color:var(--ink);text-align:center;word-break:keep-all}
.dk-item .dk-tag{font-size:10px;line-height:1.2;color:var(--muted);text-align:center}
.dk-item .dk-tag.free{color:#2F7A4F;font-weight:600}
.dk-item.locked .dthumb{opacity:.85}
.desk-note{margin:6px 0 0;padding:6px 10px;border-radius:10px;font-size:12.5px;line-height:1.45;background:color-mix(in srgb,#2F7A4F 12%,var(--memo));color:var(--ink)}
.desk-note.lock{background:color-mix(in srgb,var(--postit) 45%,var(--memo))}
#deskApply:disabled{opacity:.55;cursor:not-allowed}
.tint-sw{width:22px;height:14px;border-radius:3px;border:1px solid var(--line)}
@media (max-width:760px){
  .oworld .actor .say{bottom:184px}
  .oworld .actor.zoom .say{bottom:284px}
}
@media (max-width:420px){.desk-prev{zoom:.8}}
/* ===== 채팅방 전체 = 사무실 (.chat.office-mode) =====
   사무실 층이 헤더·시계 아래부터 채팅방 바닥까지 깔리고, 대화 목록·입력창은 그 위에 얹힌다.
   빈 곳(::before)은 사무실이 클릭을 받는다. 위장 스킨·캐릭터 끄기면 이 클래스가 빠져 예전 채팅 화면 그대로. */
.chat.office-mode{position:relative}
.chat.office-mode::before{content:"";order:1;flex:1 1 auto;min-height:0;pointer-events:none}
.chat.office-mode > :not(.office){position:relative;z-index:3}
.chat.office-mode > .pinbar,.chat.office-mode > .gmbar{order:2}
.chat.office-mode > .msgs{order:3}
.chat.office-mode > .meetbar,.chat.office-mode > .replybar,.chat.office-mode > .typing,.chat.office-mode > .tray,.chat.office-mode > .compose,.chat.office-mode > .note{order:4}
/* 벽 띠(위) + 바닥 타일 그림(OFFICE_ASSETS.floor — 경로·크기는 JS 가 --floor-* 로 넣는다). 다크 모드는 바닥만 살짝 어둡게 덮는다 */
.chat.office-mode > .office{position:absolute;left:0;right:0;bottom:0;height:auto!important;border:0;overflow:hidden;z-index:1;cursor:pointer;
  image-rendering:pixelated;
  background:
    linear-gradient(to bottom,color-mix(in srgb,var(--board) 22%,var(--paper)) 0 var(--wall-h,58px),color-mix(in srgb,var(--board) 40%,var(--paper)) var(--wall-h,58px) calc(var(--wall-h,58px) + 4px),transparent 0),
    linear-gradient(var(--floor-dim),var(--floor-dim)),
    var(--floor-img,none) var(--floor-x,0) var(--wall-h,58px) / var(--floor-size,200px 174px) repeat,
    color-mix(in srgb,var(--postit) 12%,var(--paper))}
.chat.office-mode{--floor-dim:transparent}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .chat.office-mode{--floor-dim:rgba(12,14,22,.42)}}
:root[data-theme="dark"] .chat.office-mode{--floor-dim:rgba(12,14,22,.42)}
.chat.office-mode .oview{position:absolute;inset:0;overflow:auto;overscroll-behavior:contain}
.chat.office-mode .msgs{flex:0 1 auto;height:min(34%,320px);width:min(400px,calc(100% - 20px));align-self:flex-start;margin:0 10px 6px;
  background:color-mix(in srgb,var(--paper) 84%,transparent);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);border:1px solid var(--line);border-radius:14px;box-shadow:0 4px 16px rgba(0,0,0,.18)}
.chat.office-mode.dock-closed .msgs{display:none}
.chat.office-mode > .typing{align-self:flex-start;min-height:0;margin:0 10px 2px;padding:2px 10px;border-radius:999px;background:color-mix(in srgb,var(--paper) 80%,transparent)}
.chat.office-mode > .typing:empty{display:none}
.chat.office-mode > .tray,.chat.office-mode > .replybar,.chat.office-mode > .meetbar{background:color-mix(in srgb,var(--paper) 88%,transparent);padding-bottom:4px}
.chat.office-mode > .compose{background:color-mix(in srgb,var(--paper) 92%,transparent);border-top:1px solid var(--line);padding-top:8px}
/* 사무실 도구: 벽 띠 위에 떠 있는 작은 버튼들 (대화·입력창과 겹치지 않음) */
.otools{position:absolute;top:6px;left:8px;right:8px;z-index:5;display:flex;align-items:center;justify-content:flex-end;gap:6px;pointer-events:none}
.otools > *{pointer-events:auto}
.obtn{border:1px solid var(--line);background:color-mix(in srgb,var(--memo) 92%,transparent);color:var(--ink);border-radius:999px;padding:3px 10px;font-size:12px;white-space:nowrap;box-shadow:0 1px 3px rgba(0,0,0,.15)}
.otools .dpad{position:static;margin-right:auto;display:flex;gap:4px;opacity:1;grid-template-columns:none;grid-template-rows:none}
.otools .dpad[hidden]{display:none}
.otools .dpad button{width:34px;height:30px;font-size:12px;background:color-mix(in srgb,var(--memo) 92%,transparent);box-shadow:0 1px 3px rgba(0,0,0,.15)}
.otools .dpad .l{order:1}.otools .dpad .u{order:2}.otools .dpad .d{order:3}.otools .dpad .r{order:4}
@media (max-width:760px){
  .chat.office-mode .msgs{width:auto;align-self:stretch;margin:0 8px 6px;height:min(34%,290px)}
  .obtn{padding:3px 8px}
  .otools{gap:4px}
}
@media (max-width:520px){ .otools .obtn .t{display:none} .otools .obtn{font-size:14px;padding:3px 9px} }   /* 좁은 화면: 아이콘만 (이름은 title·aria-label) */
.obtn .nb{display:inline-block;min-width:16px;margin-left:4px;padding:0 4px;border-radius:999px;background:var(--red);color:#fff;font-size:10.5px;line-height:16px;text-align:center}
.obtn .nb[hidden]{display:none}
/* 뒷줄처럼 위가 좁은 곳에서는 말풍선을 발 아래로 (벽·화면 위로 잘리지 않게) */
.oworld .actor.low .say{bottom:auto;top:calc(100% + 4px)}
.oworld .actor.low .say::after{bottom:auto;top:calc(-8px * var(--inv));transform:rotate(225deg)}
/* 왼쪽 패널 접기·펴기: 데스크톱은 ☰ 로 패널을 접고(대화방이 전체 폭), 모바일은 기존처럼 서랍으로 연다 */
@media (min-width:761px){
  body:not(.mall) .menu{display:block}
  body.side-closed:not(.mall) .app{grid-template-columns:1fr}
  body.side-closed:not(.mall) .side{display:none}
}
.side-x{display:none;position:absolute;top:calc(12px + env(safe-area-inset-top,0px));right:10px;background:none;border:0;color:inherit;font-size:18px;padding:4px 8px;border-radius:8px;cursor:pointer}
@media (max-width:760px){ body:not(.mall) .side-x{display:block} .side{position:fixed} }
/* 점심시간 안내 */
.lunchbar{position:absolute;left:12px;right:12px;margin:0 auto;width:max-content;top:calc(var(--wall-h,58px) + 10px);z-index:6;display:flex;align-items:center;gap:10px;max-width:calc(100% - 24px);
  background:#FFF3C4;color:#3A2A1A;border:2px solid #3A2A1A;border-radius:8px;box-shadow:3px 3px 0 rgba(58,42,26,.35);padding:8px 12px;font-size:13px;line-height:1.45}
.lunchbar b{font-family:"Jua",sans-serif;font-size:15px;font-weight:400}
.lunchbar button{border:0;background:none;font-size:14px;color:#3A2A1A;cursor:pointer}
.lunchbar[hidden]{display:none}