/* Team Hub · AI office. Ported from SeniorAILab/office src/styles/office.css (3f54e50), same owners.
   Scoped under .jv-of; Team Hub's light UI stays outside. */
/* ==========================================================================
   PARK & KOH · AI OFFICE — 2.5D 오피스 + 게임 HUD
   공간이 UI 다. 가구가 정보를 말하고, 캐릭터가 상태를 말한다.
   여기 있는 모든 색/그림자는 "조명이 켜진 방" 을 만들기 위한 것이라
   라이트·다크 테마와 무관하게 고정이다. 바깥 UI 만 테마를 따른다.
   ========================================================================== */

.jv-of {
  --wall: #6E5A49;
  --wall-top: #8A7461;
  --wall-line: rgba(255,255,255,.16);
  --ink: #ECE7DF;
  position: relative;
  overflow: hidden;
  contain: layout paint;
  border: 1px solid #2A2C34;
  border-radius: 16px;
  background: linear-gradient(180deg, #14161C 0%, #0E1014 100%);
  box-shadow: 0 26px 60px -32px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.05);
}

/* ── 상단 HUD ─────────────────────────────────────────────────── */
.of-hud {
  position: relative; z-index: 5;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(255,255,255,.07);
  background: linear-gradient(180deg, #1B1E26, #14161D);
}
.of-hud-brand { display: flex; align-items: center; gap: 10px; }
.of-hud-mark {
  display: grid; place-items: center; width: 34px; height: 34px;
  border-radius: 10px;
  background: linear-gradient(150deg, #6D5BE8, #3F7FD8);
  color: #fff; font: 800 11px/1 ui-monospace, monospace; letter-spacing: -.02em;
  box-shadow: 0 4px 12px -4px rgba(109,91,232,.9), inset 0 1px 0 rgba(255,255,255,.35);
}
.of-hud-brand > span { display: block; }
.of-hud-brand b { display: block; color: #F2F3F5; font-size: 13px; font-weight: 800; letter-spacing: -.01em; }
.of-hud-brand em {
  display: block; margin-top: 1px;
  color: #7E869A; font: 700 9px/1 ui-monospace, monospace; font-style: normal; letter-spacing: .16em;
}
.of-hud-level {
  display: flex; flex-direction: column; gap: 4px; justify-content: center;
  margin-left: 6px; padding: 4px 10px;
  border: 1px solid rgba(233,162,59,.35); border-radius: 8px;
  background: rgba(233,162,59,.1);
  color: #F0C070; font: 800 10px/1 ui-monospace, monospace; letter-spacing: .06em;
}
.of-hud-level i { display: block; width: 54px; height: 3px; border-radius: 99px; background: rgba(255,255,255,.12); }
.of-hud-level b { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg,#E9A23B,#F5D28A); }

.of-hud-stats { display: flex; flex-wrap: wrap; gap: 7px; }
.of-stat {
  display: flex; align-items: center; gap: 7px;
  padding: 6px 10px 6px 8px;
  border: 1px solid rgba(255,255,255,.08); border-radius: 9px;
  background: rgba(255,255,255,.035);
}
.of-stat i { font-size: 10px; font-style: normal; opacity: .9; }
.of-stat b { color: #F1F2F5; font-size: 14px; font-weight: 800; letter-spacing: -.02em; }
.of-stat em { color: #7C8496; font: 600 9.5px/1 ui-monospace, monospace; font-style: normal; letter-spacing: .08em; }
.of-stat.is-pos i { color: #3DD68C } .of-stat.is-info i { color: #5EAEF0 }
.of-stat.is-brand i { color: #E9A23B } .of-stat.is-warn i { color: #A78BFA }

.of-hud-right { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.of-hud-live {
  display: flex; align-items: center; gap: 5px;
  padding: 5px 9px; border-radius: 99px;
  background: rgba(61,214,140,.12); color: #64DFA5;
  font: 800 9px/1 ui-monospace, monospace; letter-spacing: .12em;
}
.of-hud-live i { width: 6px; height: 6px; border-radius: 99px; background: currentColor; animation: jvPulse 2s ease-in-out infinite; }
.of-hud-live.is-stale { background: rgba(233,162,59,.14); color: #E9A23B; }
.of-hud-time { color: #767E90; font: 600 10.5px/1 ui-monospace, monospace; }

/* ── 본체: 좌측 메뉴 + 무대 ───────────────────────────────────── */
.of-body { position: relative; display: flex; align-items: stretch; }
.of-rail {
  display: flex; flex-direction: column; gap: 4px;
  width: 68px; padding: 10px 8px;
  border-right: 1px solid rgba(255,255,255,.06);
  background: #101219;
}
.of-rail-btn {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 9px 2px; border-radius: 10px;
  color: #6E7688; transition: background-color .15s, color .15s;
}
.of-rail-btn span { font: 700 9px/1 ui-monospace, monospace; letter-spacing: .04em; }
.of-rail-btn:hover { background: rgba(255,255,255,.05); color: #B6BDCA; }
.of-rail-btn.is-on { background: linear-gradient(150deg, rgba(109,91,232,.28), rgba(63,127,216,.16)); color: #CFCBFF; box-shadow: inset 0 0 0 1px rgba(139,132,255,.32); }
.of-rail-btn:focus-visible { outline: 2px solid #8B84FF; outline-offset: 1px; }

.of-viewport {
  position: relative;
  flex: 1; min-width: 0;
  aspect-ratio: 1000 / 620;
  overflow: hidden auto;
  overflow-y: hidden;
  background: radial-gradient(120% 100% at 50% 0%, #1A1D25 0%, #0B0D11 100%);
}
.of-stage { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.of-world {
  position: absolute; inset: 0;
  transform-origin: 0 0;
  transition: transform .8s cubic-bezier(.2,.75,.2,1);
  will-change: transform;
}
.of { position: absolute; }

/* ── 건물 · 방 · 벽 ───────────────────────────────────────────── */
.of-floor { position: absolute; inset: 0; }
.of-building {
  border: 10px solid var(--wall);
  border-top: 26px solid var(--wall-top);
  border-radius: 10px;
  box-shadow:
    inset 0 3px 0 rgba(255,255,255,.10),
    inset 0 0 70px rgba(52,34,18,.32),
    0 24px 44px -24px rgba(0,0,0,.85);
}
.of-room { border-radius: 2px; }
.of-room-workspace {
  background:
    repeating-linear-gradient(90deg, rgba(96,66,36,.10) 0 1px, transparent 1px 30px),
    repeating-linear-gradient(0deg, rgba(96,66,36,.07) 0 1px, transparent 1px 66px),
    linear-gradient(160deg, #D3B892, #C2A57E);
}
.of-room-meeting {
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.10) 0 1px, transparent 1px),
    linear-gradient(150deg, #A9B7B0, #93A49C);
  background-size: 8px 8px, auto;
}
.of-room-hall {
  background:
    repeating-linear-gradient(90deg, rgba(70,60,48,.14) 0 1px, transparent 1px 46px),
    linear-gradient(180deg, #C4BCAF, #B2A99B);
}
.of-room-ops {
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 1px, transparent 1px 24px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 1px, transparent 1px 24px),
    linear-gradient(160deg, #8B939C, #767E88);
}
.of-room-lounge {
  background:
    repeating-linear-gradient(90deg, rgba(96,66,36,.09) 0 1px, transparent 1px 34px),
    linear-gradient(160deg, #D8BE99, #C6AA83);
}
.of-wall {
  border-radius: 2px;
  background: linear-gradient(180deg, var(--wall-top), var(--wall));
  box-shadow: 0 3px 6px rgba(0,0,0,.34), inset 0 1px 0 var(--wall-line);
}
.of-wall-v { background: linear-gradient(90deg, var(--wall-top), var(--wall)); }
.of-door {
  border-radius: 2px;
  background: linear-gradient(180deg, #E4D2B4, #C6AE8A);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.4), 0 1px 3px rgba(0,0,0,.2);
}
.of-glasswall {
  border-left: 3px solid var(--wall); border-right: 3px solid var(--wall);
  background:
    linear-gradient(180deg, transparent 0 6px, rgba(255,255,255,.30) 6px 7px, transparent 7px),
    linear-gradient(100deg, rgba(196,228,238,.34), rgba(150,196,212,.14));
  box-shadow: inset 0 0 14px rgba(255,255,255,.28), 0 2px 6px rgba(0,0,0,.25);
}
.of-room-label { pointer-events: none; }
.of-room-label b {
  display: block; color: rgba(38,28,18,.62);
  font: 800 8.5px/1 ui-monospace, monospace; letter-spacing: .16em;
}
.of-room-label span { display: block; margin-top: 2px; color: rgba(38,28,18,.38); font-size: 7.5px; }
.of-hall-tag { color: rgba(48,42,34,.34); font: 700 7px/1 ui-monospace, monospace; letter-spacing: .2em; }

.of-rug { border-radius: 6px; }
.of-rug-ws { background: linear-gradient(90deg, rgba(120,90,140,.16), rgba(120,90,140,.05)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); }
.of-rug-hall { background: linear-gradient(90deg, rgba(90,70,54,.22), rgba(90,70,54,.10) 40%, rgba(90,70,54,.22)); }
.of-rug-lounge { border-radius: 10px; background: repeating-linear-gradient(45deg, rgba(139,86,60,.16) 0 8px, rgba(139,86,60,.07) 8px 16px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); }

/* ── 창 · 하늘 ────────────────────────────────────────────────── */
.of-window {
  overflow: hidden; border-radius: 3px;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.28), 0 2px 5px rgba(0,0,0,.35);
}
.of-sky { position: absolute; inset: 0; background: linear-gradient(180deg, #8FC8EE, #CFE6F5); }
.of-sun { position: absolute; right: 16%; top: 24%; width: 9px; height: 9px; border-radius: 50%; background: #FFF3C4; box-shadow: 0 0 12px 5px rgba(255,236,170,.75); }
.of-cloud {
  position: absolute; height: 6px; border-radius: 99px;
  background: rgba(255,255,255,.85); filter: blur(1px);
  animation: ofDrift linear infinite;
}
.of-cloud.c1 { top: 5px; width: 26px; animation-duration: 96s; }
.of-cloud.c2 { top: 12px; width: 18px; animation-duration: 138s; animation-delay: -40s; opacity: .7; }
.of-cloud.c3 { top: 2px; width: 34px; animation-duration: 172s; animation-delay: -90s; opacity: .5; }
@keyframes ofDrift { from { left: -40px } to { left: 105% } }
.of-window-bar { position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; background: rgba(255,255,255,.5); }

.of-floor.is-evening .of-sky { background: linear-gradient(180deg, #E9915C, #F6CFA0); }
.of-floor.is-evening .of-sun { background: #FFD9A0; box-shadow: 0 0 16px 7px rgba(255,168,92,.7); top: 55%; }
.of-floor.is-dawn .of-sky { background: linear-gradient(180deg, #5E6DA8, #E0A9A0); }
.of-floor.is-dawn .of-sun { opacity: .5; top: 60%; }
.of-floor.is-night .of-sky { background: linear-gradient(180deg, #10162E, #1E2A4A); }
.of-floor.is-night .of-sun { width: 6px; height: 6px; background: #E8EEFF; box-shadow: 0 0 8px 3px rgba(210,225,255,.5); }
.of-floor.is-night .of-cloud { opacity: .18; }
.of-floor.is-morning .of-sky { background: linear-gradient(180deg, #9ED2F2, #F1E3C6); }

/* ── 시간대 조명 ──────────────────────────────────────────────── */
.of-daylight { inset: 0; pointer-events: none; mix-blend-mode: soft-light; }
.of-floor.is-morning .of-daylight { background: linear-gradient(155deg, rgba(255,222,160,.55), transparent 62%); }
.of-floor.is-afternoon .of-daylight { background: linear-gradient(155deg, rgba(255,252,238,.35), transparent 70%); }
.of-floor.is-evening .of-daylight { background: linear-gradient(200deg, rgba(255,152,84,.55), rgba(88,58,120,.42) 78%); }
.of-floor.is-dawn .of-daylight { background: linear-gradient(200deg, rgba(150,140,220,.5), rgba(255,190,150,.3)); }
.of-floor.is-night .of-daylight { background: linear-gradient(180deg, rgba(18,26,62,.72), rgba(10,14,34,.78)); mix-blend-mode: multiply; }

.of-light { pointer-events: none; opacity: .5; mix-blend-mode: screen; }
.of-light-ws {
  left: 24px; top: 36px; width: 536px; height: 288px;
  background:
    radial-gradient(120px 90px at 24% 42%, rgba(255,226,170,.5), transparent 70%),
    radial-gradient(120px 90px at 56% 42%, rgba(255,226,170,.5), transparent 70%),
    radial-gradient(120px 90px at 86% 42%, rgba(255,226,170,.45), transparent 70%);
}
.of-light-mt {
  left: 588px; top: 36px; width: 388px; height: 288px;
  background: radial-gradient(150px 110px at 50% 45%, rgba(215,235,255,.42), transparent 72%);
}
/* 퇴근한 사무실 — 조명 일부를 끄고 책상을 비운다. "아무도 없다" 가 읽혀야 한다. */
.of-floor.is-offduty .of-light-ws { opacity: .12; }
.of-floor.is-offduty .of-light-mt { opacity: .18; }
.of-floor.is-offduty .of-desk,
.of-floor.is-offduty .of-monitor-glow { filter: brightness(.62) saturate(.7); }
.of-floor.is-offduty .of-lamp i { opacity: .25; }

.of-floor.is-night .of-light { opacity: 1; }
.of-floor.is-afternoon .of-light { opacity: .22; }

/* ── 가구: 책상 구역 ──────────────────────────────────────────── */
.of-desk { border-radius: 5px; }
.of-desk-top {
  position: absolute; inset: 0; border-radius: 5px;
  background: linear-gradient(170deg, #C58F5B, #A9743F);
  box-shadow: 0 7px 0 #7C5228, 0 12px 16px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.35);
}
.of-desk-edge { position: absolute; inset: 4px 5px auto 5px; height: 2px; border-radius: 2px; background: rgba(255,255,255,.14); }
.of-desk-plate {
  padding-top: 9px;
  color: rgba(36,24,12,.62); font: 800 7px/1 ui-monospace, monospace;
  letter-spacing: .1em; text-align: center;
}
.of-chair i {
  position: absolute; left: 3px; top: 0; right: 3px; height: 15px;
  border-radius: 7px 7px 3px 3px;
  background: linear-gradient(180deg, #4A5462, #333C48);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
}
.of-chair span {
  position: absolute; left: 0; right: 0; top: 14px; height: 16px;
  border-radius: 5px; background: #3C4552; box-shadow: 0 3px 0 #262D37;
}
.of-chair.is-flat i { height: 10px; } .of-chair.is-flat span { top: 10px; height: 13px; }

.of-monitor { }
.of-monitor-back {
  position: absolute; left: 0; top: 0; right: 0; height: 22px;
  border-radius: 4px;
  background: linear-gradient(180deg, #2A3038, #171B21);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 4px 8px rgba(0,0,0,.4);
}
.of-monitor-back::after {
  content: ''; position: absolute; left: 50%; top: 9px; width: 5px; height: 5px;
  margin-left: -2.5px; border-radius: 50%; background: #4A5260;
}
.of-monitor-stand { position: absolute; left: 50%; top: 21px; width: 12px; height: 8px; margin-left: -6px; border-radius: 0 0 3px 3px; background: #232830; }
.of-monitor-glow {
  position: absolute; left: -12px; right: -12px; top: -14px; height: 28px;
  border-radius: 50%; opacity: 0;
  background: radial-gradient(closest-side, rgba(120,200,255,.55), transparent 75%);
}
.of-monitor.is-on .of-monitor-glow { opacity: 1; animation: ofFlicker 3.4s ease-in-out infinite; }
@keyframes ofFlicker { 0%,100% { opacity: .55 } 40% { opacity: .95 } 62% { opacity: .7 } }

.of-keyboard { border-radius: 2px; background: repeating-linear-gradient(90deg, #2A303A 0 3px, #3D4551 3px 4px); box-shadow: 0 2px 0 #1E232B; }
.of-mug { border-radius: 50%; background: #F0EAE0; box-shadow: inset 0 0 0 2px #7C6A55, 0 2px 3px rgba(0,0,0,.3); }
.of-mug i { position: absolute; left: 50%; top: -6px; width: 3px; height: 7px; margin-left: -1.5px; border-radius: 99px; background: rgba(255,255,255,.5); filter: blur(1.5px); animation: ofSteam 3.6s ease-in-out infinite; }
@keyframes ofSteam { 0% { opacity: 0; transform: translateY(2px) scaleX(.7) } 40% { opacity: .8 } 100% { opacity: 0; transform: translateY(-8px) scaleX(1.3) } }
.of-papers { border-radius: 1px; background: linear-gradient(180deg, #F6F1E6, #DED6C6); box-shadow: 1.5px 1.5px 0 rgba(255,255,255,.5), 0 2px 4px rgba(0,0,0,.22); }

.of-shelf { border-radius: 3px; background: linear-gradient(180deg, #8A6440, #6E4E30); box-shadow: 0 5px 0 #4E3720, 0 8px 12px rgba(0,0,0,.3); padding: 4px; }
.of-shelf i { position: absolute; top: 5px; width: 5px; height: 15px; border-radius: 1px; background: #C9705C; }
.of-shelf i:nth-child(1) { left: 8px } .of-shelf i:nth-child(2) { left: 16px; background: #5E8BA8; height: 17px }
.of-shelf i:nth-child(3) { left: 24px; background: #D8B25E; height: 13px }
.of-shelf::after { content: ''; position: absolute; left: 5px; right: 5px; top: 24px; height: 2px; background: rgba(0,0,0,.25); }

.of-printer { border-radius: 4px; background: linear-gradient(180deg, #D6D8DC, #A9AEB6); box-shadow: 0 5px 0 #7C828C, 0 8px 12px rgba(0,0,0,.28); }
.of-printer i { position: absolute; left: 6px; right: 6px; top: 8px; height: 4px; border-radius: 1px; background: #6E7480; }
.of-printer span { position: absolute; left: 8px; right: 8px; top: 20px; height: 10px; border-radius: 1px; background: #F5F2EA; box-shadow: 0 2px 3px rgba(0,0,0,.2); }

.of-plant i {
  position: absolute; left: 50%; bottom: 0; width: 10px; height: 9px; margin-left: -5px;
  border-radius: 2px 2px 4px 4px; background: linear-gradient(180deg, #B4693F, #8C4E2C);
}
.of-plant span {
  position: absolute; left: 50%; bottom: 6px; width: 24px; height: 22px; margin-left: -12px;
  border-radius: 50% 50% 40% 40%;
  background: radial-gradient(circle at 40% 30%, #77BE7E, #3F7C4C 70%);
  transform-origin: 50% 100%; animation: ofSway 6.5s ease-in-out infinite;
}
.of-plant.is-tall span { height: 30px; bottom: 7px; border-radius: 50% 50% 30% 30%; animation-duration: 8s; }
@keyframes ofSway { 0%,100% { transform: rotate(-2.5deg) } 50% { transform: rotate(2.5deg) } }

.of-whiteboard { border-radius: 2px; background: #F4F2EA; box-shadow: inset 0 0 0 2px #9A8F7E, 0 2px 4px rgba(0,0,0,.3); }
.of-whiteboard i { position: absolute; height: 2px; border-radius: 2px; background: #7EA4C4; }
.of-whiteboard .l1 { left: 10px; top: 6px; width: 48px } .of-whiteboard .l2 { left: 10px; top: 11px; width: 78px; background: #C48F7E }
.of-whiteboard .l3 { left: 10px; top: 16px; width: 34px; background: #9AA88E }

.of-clock { border-radius: 50%; background: #F2EDE2; box-shadow: 0 0 0 2px #59493B, 0 3px 6px rgba(0,0,0,.4); }
.of-clock i { position: absolute; left: 50%; bottom: 50%; width: 1.6px; background: #2E2A24; transform-origin: 50% 100%; border-radius: 2px; }
.of-clock .hand-h { height: 8px; margin-left: -.8px }
.of-clock .hand-m { height: 11px; margin-left: -.8px; background: #6E655A }
.of-clock b { position: absolute; left: 50%; top: 50%; width: 3px; height: 3px; margin: -1.5px 0 0 -1.5px; border-radius: 50%; background: #C0392B; }

/* ── 회의실 ───────────────────────────────────────────────────── */
.of-table { border-radius: 50%; }
.of-table-top {
  position: absolute; inset: 0; border-radius: 50%;
  background: linear-gradient(160deg, #E7DCCB, #C9B99F);
  box-shadow: 0 8px 0 #8E7C63, 0 14px 20px rgba(0,0,0,.3), inset 0 2px 0 rgba(255,255,255,.5);
}
.of-table-screen {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  padding: 3px 9px; border-radius: 4px;
  background: #14181E; color: #8FD8B0;
  font: 800 8px/1 ui-monospace, monospace; letter-spacing: .12em;
}
.of-table.is-live .of-table-top { box-shadow: 0 8px 0 #8E7C63, 0 0 30px rgba(139,132,255,.55), inset 0 2px 0 rgba(255,255,255,.5); }
.of-table.is-live .of-table-screen { color: #CFCBFF; background: #221E44; animation: jvPulse 2.4s ease-in-out infinite; }
.of-mchair i {
  position: absolute; inset: 0; border-radius: 8px 8px 5px 5px;
  background: linear-gradient(180deg, #4A5462, #333C48);
  box-shadow: 0 3px 0 #232A33, inset 0 1px 0 rgba(255,255,255,.15);
}
.of-walltv {
  border-radius: 3px; background: #0C1016;
  box-shadow: inset 0 0 0 2px #39414D, 0 2px 5px rgba(0,0,0,.4);
  display: grid; place-items: center;
}
.of-walltv span {
  overflow: hidden; max-width: 100%; padding: 0 7px;
  color: #6E8AA4; font: 800 7.5px/1.3 ui-monospace, monospace; letter-spacing: .1em;
  text-overflow: ellipsis; white-space: nowrap;
}
.of-walltv.is-live { background: #171438; box-shadow: inset 0 0 0 2px #4B3F8E, 0 0 18px rgba(139,132,255,.5); }
.of-walltv.is-live span { color: #C6C1FF; }
.of-sideboard { border-radius: 3px; background: linear-gradient(180deg, #8A6440, #6B4C2E); box-shadow: 0 4px 0 #4C3520; }

.of-meeting-note {
  z-index: 30; padding: 6px 9px; border-radius: 7px;
  border: 1px solid rgba(139,132,255,.4);
  background: rgba(18,16,34,.88); backdrop-filter: blur(3px);
}
.of-meeting-note b { display: block; color: #C6C1FF; font: 800 8px/1 ui-monospace, monospace; letter-spacing: .1em; }
.of-meeting-note p {
  margin-top: 3px; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  color: #E6E7EC; font-size: 9px; line-height: 1.35;
}

/* ── OPS ROOM ─────────────────────────────────────────────────── */
.of-opsboard {
  overflow: hidden; padding: 7px 9px; border-radius: 4px;
  background: #070B10;
  box-shadow: inset 0 0 0 3px #232A33, inset 0 0 22px rgba(89,184,199,.16), 0 5px 0 #1A2027, 0 9px 14px rgba(0,0,0,.4);
}
.of-opsboard-lights { display: flex; gap: 3px; }
.of-opsboard-lights i { width: 4px; height: 4px; border-radius: 50%; background: #3DD68C; animation: jvPulse 2.6s ease-in-out infinite; }
.of-opsboard-lights i:nth-child(2) { background: #E9A23B; animation-delay: .5s }
.of-opsboard-lights i:nth-child(3) { background: #5EAEF0; animation-delay: 1s }
.of-opsboard-line {
  margin-top: 5px; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4;
  color: #BFD2CC; font-size: 6.5px; line-height: 1.45;
}
.of-opsboard em { position: absolute; left: 9px; bottom: 6px; color: #64798F; font: 700 6.5px/1 ui-monospace, monospace; font-style: normal; letter-spacing: .06em; }
.of-scan {
  position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(143,216,176,.5), transparent);
  animation: ofScan 5s linear infinite;
}
@keyframes ofScan { from { transform: translateY(0) } to { transform: translateY(78px) } }

.of-rack {
  padding: 5px 4px; border-radius: 4px; background: #12161C;
  box-shadow: inset 0 0 0 3px #262D36, 0 5px 0 #0C1014, 0 9px 12px rgba(0,0,0,.4);
}
.of-rack b { display: block; color: #6E7889; font: 800 5.5px/1 ui-monospace, monospace; letter-spacing: .14em; text-align: center; }
.of-rack > span {
  display: flex; align-items: center; gap: 3px;
  height: 22px; margin-top: 4px; padding: 0 4px;
  border-radius: 2px; background: #1D242C; box-shadow: inset 0 0 0 1px #303845;
}
.of-rack i { width: 3px; height: 3px; border-radius: 50%; background: #3DD68C; animation: ofBlink 2.2s steps(2) infinite; }
.of-rack > span:nth-child(3) i:last-child { background: #E9A23B }
.of-rack > span:nth-child(4) i:nth-child(2) { animation-delay: .7s }
.of-rack > span:nth-child(5) i:first-child { animation-delay: 1.3s }
@keyframes ofBlink { 0%,100% { opacity: 1 } 50% { opacity: .2 } }

.of-opsdesk { border-radius: 3px; background: linear-gradient(180deg, #4E5761, #3A424B); box-shadow: 0 5px 0 #262C33, 0 8px 12px rgba(0,0,0,.3); }
.of-opsdesk i { position: absolute; top: -14px; width: 42px; height: 18px; border-radius: 2px; background: #0C1016; box-shadow: inset 0 0 0 2px #333B45, 0 0 14px rgba(94,174,240,.35); }
.of-opsdesk .m1 { left: 16px } .of-opsdesk .m2 { left: 88px }
.of-opsdesk i::after { content: ''; position: absolute; inset: 3px; background: repeating-linear-gradient(180deg, rgba(94,174,240,.5) 0 1px, transparent 1px 4px); animation: ofFlicker 2.8s ease-in-out infinite; }

/* ── 라운지 ───────────────────────────────────────────────────── */
.of-sofa {
  border-radius: 12px 12px 8px 8px;
  background: linear-gradient(180deg, #6E5F58 0 18px, #8E7C74 18px);
  box-shadow: 0 6px 0 #4E433E, 0 10px 14px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.22);
}
/* 등받이 */
.of-sofa i { position: absolute; left: 4px; right: 4px; top: 3px; height: 14px; border-radius: 8px; background: linear-gradient(180deg, #9B8880, #7C6C64); box-shadow: inset 0 1px 0 rgba(255,255,255,.3); }
/* 방석 두 장 */
.of-sofa span { position: absolute; top: 20px; width: 62px; height: 24px; border-radius: 7px; background: linear-gradient(180deg, #AB988E, #907E76); box-shadow: inset 0 1px 0 rgba(255,255,255,.32), 0 2px 3px rgba(0,0,0,.2); }
.of-sofa span:nth-of-type(1) { left: 18px } .of-sofa span:nth-of-type(2) { right: 18px }
/* 팔걸이 */
.of-sofa::before, .of-sofa::after {
  content: ''; position: absolute; top: 8px; width: 14px; height: 38px;
  border-radius: 7px; background: linear-gradient(180deg, #9B8880, #6E5F58);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28);
}
.of-sofa::before { left: 2px } .of-sofa::after { right: 2px }
.of-lowtable { border-radius: 8px; background: linear-gradient(170deg, #D9C3A2, #B79B77); box-shadow: 0 5px 0 #8A7154, 0 9px 12px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.4); }
.of-lowtable .cup { position: absolute; left: 40px; top: 14px; width: 10px; height: 10px; border-radius: 50%; background: #F4EFE5; box-shadow: inset 0 0 0 2px #7C6A55; }
.of-counter { border-radius: 4px; background: linear-gradient(180deg, #B9C0C4, #8F979C); box-shadow: 0 5px 0 #6C7276, 0 9px 12px rgba(0,0,0,.3); }
.of-counter .machine { position: absolute; left: 12px; top: -16px; width: 26px; height: 20px; border-radius: 3px; background: #2E353E; box-shadow: inset 0 0 0 2px #444C57; }
.of-counter .machine::after { content: ''; position: absolute; left: 6px; bottom: 3px; width: 14px; height: 4px; border-radius: 1px; background: #E9A23B; opacity: .8; }
.of-counter .cups { position: absolute; right: 16px; top: -8px; width: 30px; height: 10px; border-radius: 2px; background: #E8E2D6; box-shadow: 0 2px 3px rgba(0,0,0,.25); }
.steam { position: absolute; width: 3px; height: 9px; border-radius: 99px; background: rgba(255,255,255,.6); filter: blur(1.6px); animation: ofSteam 4s ease-in-out infinite; }
.of-counter .s1 { left: 22px; top: -22px } .of-counter .s2 { left: 28px; top: -22px; animation-delay: 1.6s }
.of-lowtable .s1 { left: 43px; top: 6px } .of-lowtable .s2 { left: 48px; top: 6px; animation-delay: 2s }
.of-roundtable { border-radius: 50%; background: linear-gradient(170deg, #E2D2B4, #BFA983); box-shadow: 0 5px 0 #8E7C5E, 0 9px 12px rgba(0,0,0,.26); }
.of-roundtable i { position: absolute; left: 50%; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: #7CA37F; }
.of-art { border-radius: 3px; background: linear-gradient(140deg, #6E86A8, #A87E8E); box-shadow: inset 0 0 0 3px #F0E9DC, 0 3px 6px rgba(0,0,0,.32); }
.of-art i { position: absolute; left: 14%; bottom: 18%; width: 26%; height: 34%; border-radius: 50%; background: rgba(255,240,200,.7); }
.of-vending { border-radius: 4px; background: linear-gradient(180deg, #35507A, #26395A); box-shadow: 0 5px 0 #1A2740, 0 9px 12px rgba(0,0,0,.34); }
.of-vending i { position: absolute; left: 5px; top: 5px; right: 14px; bottom: 12px; border-radius: 2px; background: rgba(190,225,255,.22); box-shadow: inset 0 0 0 1px rgba(255,255,255,.25); }
.of-vending span { position: absolute; right: 4px; bottom: 8px; width: 7px; height: 12px; border-radius: 1px; background: #E9A23B; animation: ofBlink 3.4s steps(2) infinite; }

.of-cooler { border-radius: 4px 4px 3px 3px; background: linear-gradient(180deg, #DCE4E8, #A8B2B8); box-shadow: 0 5px 0 #7C868C, 0 8px 12px rgba(0,0,0,.28); }
.of-cooler i { position: absolute; left: 5px; right: 5px; top: 4px; height: 22px; border-radius: 3px; background: linear-gradient(180deg, rgba(140,200,225,.85), rgba(90,160,195,.85)); box-shadow: inset 0 1px 0 rgba(255,255,255,.5); }
.of-cooler span { position: absolute; left: 9px; right: 9px; bottom: 6px; height: 5px; border-radius: 2px; background: #6E777D; }
.of-boxes { border-radius: 3px; background: linear-gradient(180deg, #C89A63, #A87B47); box-shadow: 0 4px 0 #7E5A31, 0 7px 9px rgba(0,0,0,.25); }
.of-boxes i { position: absolute; left: 6px; right: 6px; top: 8px; height: 2px; background: rgba(255,255,255,.35); }
.of-boxes span { position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; background: rgba(0,0,0,.18); }
.of-sprint { border-radius: 3px; background: #E8E2D4; box-shadow: inset 0 0 0 2px #9A8F7E, 0 3px 6px rgba(0,0,0,.24); }
.of-sprint i { position: absolute; top: 6px; width: 12px; height: 9px; border-radius: 1px; }
.of-sprint i:nth-child(1) { left: 6px; background: #E9B45C } .of-sprint i:nth-child(2) { left: 22px; background: #7FB4D8 }
.of-sprint i:nth-child(3) { left: 38px; background: #8FCBA0 } .of-sprint i:nth-child(4) { left: 54px; background: #D89A96 }
.of-lamp i { position: absolute; left: 50%; bottom: 0; width: 12px; height: 4px; margin-left: -6px; border-radius: 2px; background: #4A5058; }
.of-lamp span { position: absolute; left: 50%; top: 0; width: 20px; height: 14px; margin-left: -10px; border-radius: 4px 4px 10px 10px; background: linear-gradient(180deg, #E8D9B8, #C9A96F); box-shadow: 0 0 16px 5px rgba(255,214,150,.35); }
.of-lamp::after { content: ''; position: absolute; left: 50%; top: 12px; bottom: 3px; width: 3px; margin-left: -1.5px; background: #5A6068; }
.of-lamp.is-floor span { width: 22px; margin-left: -11px }
.of-stool { border-radius: 50%; background: linear-gradient(180deg, #8B99A6, #64707C); box-shadow: 0 4px 0 #4C555F, 0 6px 8px rgba(0,0,0,.24); }
.of-lockers { border-radius: 3px; background: linear-gradient(180deg, #7E96AA, #5D7488); box-shadow: 0 5px 0 #45586A, 0 8px 12px rgba(0,0,0,.26); }
.of-lockers i { position: absolute; top: 5px; bottom: 5px; width: 32px; border-radius: 2px; background: rgba(255,255,255,.14); box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); }
.of-lockers i:nth-child(1) { left: 6px } .of-lockers i:nth-child(2) { left: 44px } .of-lockers i:nth-child(3) { left: 82px }
.of-projector { border-radius: 2px; background: #2E353E; box-shadow: 0 2px 4px rgba(0,0,0,.4); }
.of-projector i { position: absolute; left: 50%; bottom: -2px; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: #9FD8FF; box-shadow: 0 0 8px 3px rgba(159,216,255,.5); animation: jvPulse 3s ease-in-out infinite; }
.of-rug-meeting { border-radius: 50%; background: radial-gradient(closest-side, rgba(255,255,255,.16), rgba(255,255,255,.03)); }

/* 마스코트 로봇 — 복도를 천천히 순찰한다 */
.of-mascot { top: 374px; width: 18px; height: 18px; z-index: 20; animation: ofPatrol 64s ease-in-out infinite; }
.of-mascot-body {
  position: absolute; inset: 0; border-radius: 6px 6px 4px 4px;
  background: linear-gradient(180deg, #D7DCE4, #A8B0BC);
  box-shadow: 0 3px 0 #7C8492, 0 5px 6px rgba(0,0,0,.3);
  animation: ofHover 1.8s ease-in-out infinite;
}
.of-mascot-body i { position: absolute; top: 6px; width: 3px; height: 3px; border-radius: 50%; background: #2F3944; }
.of-mascot-body i:nth-child(1) { left: 4px } .of-mascot-body i:nth-child(2) { right: 4px }
@keyframes ofPatrol { 0% { left: 60px } 48% { left: 880px } 52% { left: 880px } 100% { left: 60px } }
@keyframes ofHover { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-2px) } }

/* ── 캐릭터 ───────────────────────────────────────────────────── */
.of-actor {
  position: absolute; left: 0; top: 0; width: 0; height: 0;
  transition-property: transform; transition-timing-function: linear;
  will-change: transform;
}
.of-actor-hit {
  position: absolute; left: -22px; top: -62px; width: 44px; height: 62px;
  cursor: pointer; border-radius: 10px;
}
.of-actor-hit:focus-visible { outline: 2px solid #8B84FF; outline-offset: 2px; }
.of-actor.is-picked .of-actor-hit { box-shadow: 0 0 0 2px rgba(139,132,255,.9), 0 0 22px rgba(139,132,255,.55); }
.of-actor.is-picked::before {
  content: ''; position: absolute; left: -19px; top: -8px; width: 38px; height: 11px;
  border-radius: 50%; box-shadow: 0 0 0 2px rgba(139,132,255,.75); animation: jvPulse 1.8s ease-in-out infinite;
}
.of-focus {
  position: absolute; left: -17px; top: -9px; width: 34px; height: 12px;
  border-radius: 50%; opacity: 0; pointer-events: none;
  background: radial-gradient(closest-side, rgba(120,200,255,.5), transparent 72%);
}
.of-actor.is-working .of-focus { opacity: 1; animation: ofFocus 2.4s ease-in-out infinite; }
.of-actor.is-thinking .of-focus { opacity: .7; background: radial-gradient(closest-side, rgba(167,139,250,.45), transparent 72%); }
.of-actor.is-error .of-focus { opacity: .8; background: radial-gradient(closest-side, rgba(240,120,100,.5), transparent 72%); animation: jvPulse 1.4s ease-in-out infinite; }
@keyframes ofFocus { 0%,100% { transform: scale(.9); opacity: .55 } 50% { transform: scale(1.12); opacity: 1 } }
.jv-ch { position: absolute; left: 0; top: 0; overflow: visible; }
.ch-shadow { fill: rgba(0,0,0,.28) }

.of-nameplate {
  position: absolute; left: 50%; top: -77px; transform: translateX(-50%);
  display: flex; align-items: center; gap: 3px; white-space: nowrap;
  padding: 1px 5px; border-radius: 99px;
  border: 1px solid color-mix(in oklab, var(--accent) 55%, transparent);
  background: rgba(14,16,22,.86);
  color: #E7E9EE; font: 800 6.5px/1.5 ui-monospace, monospace; letter-spacing: .08em;
}
.of-nameplate .dot { width: 4px; height: 4px; border-radius: 99px; }

.of-taskchip {
  position: absolute; left: 50%; top: -101px; transform: translateX(-50%);
  display: flex; align-items: center; gap: 5px; max-width: 168px;
  padding: 3px 7px; border-radius: 7px;
  border: 1px solid rgba(255,255,255,.14); background: rgba(12,14,20,.9);
  box-shadow: 0 6px 14px -6px rgba(0,0,0,.9);
  animation: jvFadeUp .4s ease both;
}
.of-taskchip span { overflow: hidden; max-width: 96px; color: #E4E7EC; font-size: 7.5px; text-overflow: ellipsis; white-space: nowrap; }
.of-taskchip i { display: block; width: 34px; height: 4px; border-radius: 99px; background: rgba(255,255,255,.14); }
.of-taskchip i b { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg,#5EAEF0,#8B84FF); transition: width .8s ease; }
.of-taskchip em { color: #9AA3B4; font: 700 7px/1 ui-monospace, monospace; font-style: normal; }

.of-emote {
  position: absolute; left: 50%; top: -99px; transform: translateX(-50%);
  display: grid; place-items: center; min-width: 20px; height: 18px; padding: 0 6px;
  border-radius: 99px 99px 99px 3px;
  background: #FBF7EF; color: #3A3128; font-size: 10px; line-height: 1;
  box-shadow: 0 4px 10px -4px rgba(0,0,0,.7);
  animation: ofBob 2.6s ease-in-out infinite;
}
.of-emote.is-error { background: #FDE7E4; color: #C0392B; font-weight: 900; animation: ofAlert .9s ease-in-out infinite; }
@keyframes ofBob { 0%,100% { transform: translate(-50%,0) } 50% { transform: translate(-50%,-3px) } }
@keyframes ofAlert { 0%,100% { transform: translate(-50%,0) scale(1) } 50% { transform: translate(-50%,-2px) scale(1.12) } }

.of-speech {
  position: absolute; left: 50%; top: -146px; transform: translateX(-50%);
  width: 190px; padding: 6px 8px; border-radius: 8px 8px 8px 2px;
  background: #FCFAF5; color: #2C3038;
  box-shadow: 0 10px 22px -10px rgba(0,0,0,.8);
  font-size: 7.5px; line-height: 1.45;
  animation: jvFadeUp .35s ease both;
}
.of-speech b { display: block; margin-bottom: 2px; color: #6D5BE8; font: 800 7px/1 ui-monospace, monospace; letter-spacing: .08em; }
.of-speech::after { content: ''; position: absolute; left: 8px; bottom: -5px; border: 5px solid transparent; border-top-color: #FCFAF5; border-bottom: 0; }

/* 라운지 잡담 — 회의 발언(정본)과 색으로 구분한다. 이건 연출이지 기록이 아니다. */
.of-speech.is-ambient { background: #EFF3FA; color: #39404E; }
.of-speech.is-ambient b { color: #7A8494; }
.of-speech.is-ambient::after { border-top-color: #EFF3FA; }

.of-xp {
  position: absolute; left: 50%; top: -118px;
  color: #3DD68C; font: 900 11px/1 ui-monospace, monospace; text-align: center;
  text-shadow: 0 2px 6px rgba(0,0,0,.8);
  animation: ofXp 4.2s cubic-bezier(.2,.8,.3,1) both; pointer-events: none;
}
.of-xp span { display: block; margin-top: 2px; color: #FFE49A; font-size: 7px; letter-spacing: .12em; }
@keyframes ofXp {
  0% { opacity: 0; transform: translate(-50%, 8px) scale(.8) }
  14% { opacity: 1; transform: translate(-50%, -6px) scale(1.08) }
  70% { opacity: 1; transform: translate(-50%, -20px) scale(1) }
  100% { opacity: 0; transform: translate(-50%, -34px) scale(1) }
}

/* 표정 — 상태마다 눈·입을 하나씩만 보여준다 */
.ch-eyes, .ch-mouth { opacity: 0 }
.ch-eyes.is-open, .ch-mouth.is-smile { opacity: 1 }
.jv-ch-working .ch-eyes, .jv-ch-reviewing .ch-eyes, .jv-ch-thinking .ch-eyes { opacity: 0 }
.jv-ch-working .ch-eyes.is-narrow, .jv-ch-reviewing .ch-eyes.is-narrow { opacity: 1 }
.jv-ch-working .ch-mouth, .jv-ch-reviewing .ch-mouth, .jv-ch-thinking .ch-mouth,
.jv-ch-break .ch-mouth, .jv-ch-error .ch-mouth, .jv-ch-meeting .ch-mouth, .jv-ch-offline .ch-mouth { opacity: 0 }
.jv-ch-working .ch-mouth.is-flat, .jv-ch-reviewing .ch-mouth.is-flat { opacity: 1 }
.jv-ch-thinking .ch-eyes.is-open { opacity: 1 }
.jv-ch-thinking .ch-mouth.is-flat { opacity: 1 }
.jv-ch-thinking .ch-face { transform: translateY(-.8px) }
.jv-ch-break .ch-eyes { opacity: 0 } .jv-ch-break .ch-eyes.is-happy { opacity: 1 }
.jv-ch-break .ch-mouth.is-smile { opacity: 1 }
.jv-ch-meeting .ch-mouth.is-open { opacity: 1; animation: ofTalk 1.1s ease-in-out infinite }
.jv-ch-error .ch-mouth.is-wave { opacity: 1 }
.jv-ch-error .ch-brow.is-left { transform: rotate(14deg) translateY(1px); transform-origin: center }
.jv-ch-error .ch-brow.is-right { transform: rotate(-14deg) translateY(1px); transform-origin: center }
.jv-ch-offline .ch-eyes { opacity: 0 } .jv-ch-offline .ch-eyes.is-happy { opacity: .8 }
.jv-ch-offline .ch-mouth.is-flat { opacity: .8 }
.jv-ch-offline { filter: grayscale(1); opacity: .42 }
@keyframes ofTalk { 0%,100% { transform: scaleY(.45) } 50% { transform: scaleY(1) } }
.ch-mouth.is-open { transform-origin: center }

/* 몸짓 */
.ch-body { transform-origin: 50% 100%; }
.ch-arm { transform-origin: 32px 32px; }
.ch-arm.is-left { transform-origin: 11px 32px; }
.ch-leg { transform-origin: 50% 43px; }
.jv-ch-idle .ch-body { animation: ofBreathe 3.6s ease-in-out infinite }
.jv-ch-working .ch-body { animation: ofType 1.2s ease-in-out infinite }
.jv-ch-working .ch-arm.is-left { animation: ofTypeArmL .5s ease-in-out infinite }
.jv-ch-working .ch-arm.is-right { animation: ofTypeArmR .5s ease-in-out infinite .24s }
.jv-ch-reviewing .ch-body { animation: ofLean 2.8s ease-in-out infinite }
.jv-ch-thinking .ch-body { animation: ofThink 2.6s ease-in-out infinite }
.jv-ch-thinking .ch-arm.is-right { transform: rotate(-58deg) }
.jv-ch-walking .ch-body { animation: ofStep .52s ease-in-out infinite }
.jv-ch-walking .ch-leg.is-left { animation: ofLegA .52s ease-in-out infinite }
.jv-ch-walking .ch-leg.is-right { animation: ofLegB .52s ease-in-out infinite }
.jv-ch-walking .ch-arm.is-left { animation: ofArmA .52s ease-in-out infinite }
.jv-ch-walking .ch-arm.is-right { animation: ofArmB .52s ease-in-out infinite }
.jv-ch-walking .ch-shadow { opacity: .55 }
.jv-ch-meeting .ch-legs { opacity: 0 }
.jv-ch-meeting .ch-body { transform: translateY(7px); animation: ofNod 3.2s ease-in-out infinite }
.jv-ch-meeting .ch-shadow { opacity: 0 }
.jv-ch-break .ch-body { animation: ofBreathe 3s ease-in-out infinite }
.jv-ch-break .ch-arm.is-right { transform: rotate(-72deg) }
.jv-ch-error .ch-body { animation: ofShake .7s ease-in-out infinite }
@keyframes ofBreathe { 0%,100% { transform: translateY(0) scaleY(1) } 50% { transform: translateY(-1px) scaleY(1.012) } }
@keyframes ofType { 0%,100% { transform: translateY(0) rotate(0) } 35% { transform: translateY(-1px) rotate(-1.2deg) } 70% { transform: translateY(-1px) rotate(1.2deg) } }
@keyframes ofTypeArmL { 0%,100% { transform: rotate(16deg) } 50% { transform: rotate(-6deg) } }
@keyframes ofTypeArmR { 0%,100% { transform: rotate(-16deg) } 50% { transform: rotate(6deg) } }
@keyframes ofLean { 0%,100% { transform: rotate(-1.4deg) } 50% { transform: rotate(1.4deg) } }
@keyframes ofThink { 0%,100% { transform: translateY(0) rotate(-2deg) } 50% { transform: translateY(-1.5px) rotate(2deg) } }
@keyframes ofStep { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-1.6px) } }
@keyframes ofLegA { 0%,100% { transform: rotate(20deg) } 50% { transform: rotate(-20deg) } }
@keyframes ofLegB { 0%,100% { transform: rotate(-20deg) } 50% { transform: rotate(20deg) } }
@keyframes ofArmA { 0%,100% { transform: rotate(-22deg) } 50% { transform: rotate(22deg) } }
@keyframes ofArmB { 0%,100% { transform: rotate(22deg) } 50% { transform: rotate(-22deg) } }
@keyframes ofNod { 0%,92%,100% { transform: translateY(7px) rotate(0) } 96% { transform: translateY(8px) rotate(1.5deg) } }
@keyframes ofShake { 0%,100% { transform: translateX(0) } 25% { transform: translateX(-1.6px) } 75% { transform: translateX(1.6px) } }
.ch-led { animation: ofBlink 2.4s steps(2) infinite }

/* ── 인스펙터 ─────────────────────────────────────────────────── */
.of-inspector {
  position: absolute; z-index: 60; right: 12px; top: 12px; width: 244px;
  padding: 13px 14px 12px;
  border: 1px solid rgba(255,255,255,.12); border-radius: 12px;
  background: rgba(13,15,20,.94); backdrop-filter: blur(12px);
  box-shadow: 0 22px 50px -18px rgba(0,0,0,.9);
  animation: jvFadeUp .3s ease both;
}
.of-inspector-close { position: absolute; right: 8px; top: 8px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 7px; color: #7F8798; }
.of-inspector-close:hover { background: rgba(255,255,255,.07); color: #fff }
.of-inspector-name { font-size: 19px; font-weight: 800; letter-spacing: -.03em; }
.of-inspector-role { margin-top: 1px; color: #737B8C; font: 700 8.5px/1 ui-monospace, monospace; letter-spacing: .12em; }
.of-inspector-lv { display: flex; align-items: center; gap: 7px; margin-top: 9px; }
.of-inspector-lv span { color: #F0C070; font: 800 10px/1 ui-monospace, monospace; }
.of-inspector-lv i { flex: 1; height: 4px; border-radius: 99px; background: rgba(255,255,255,.1); }
.of-inspector-lv b { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg,#E9A23B,#F5D28A); }
.of-inspector-label { margin-top: 11px; color: #656C7C; font: 700 8.5px/1 ui-monospace, monospace; letter-spacing: .12em; }
.of-inspector-state { margin-top: 4px; font-size: 10.5px; font-weight: 700; line-height: 1.4; }
.of-inspector-task { margin-top: 4px; color: #DCE0E8; font-size: 11.5px; line-height: 1.45; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.of-inspector-note { margin-top: 7px; color: #6A7182; font-size: 10px; }

/* 상사 지시 — 사무실에서 가장 강한 신호. 다른 카드보다 눈에 먼저 들어와야 한다. */
.of-inspector-boss { margin-top: 10px; padding: 7px 8px; border-radius: 9px;
  border: 1px solid rgba(233,74,74,.45); background: rgba(233,74,74,.12); display: grid; gap: 3px; }
.of-inspector-boss b { color: #F08A8A; font: 800 9px/1 ui-monospace, monospace; letter-spacing: .1em; }
.of-inspector-boss span { color: #E4E8F0; font-size: 10.5px; font-weight: 700; }
.of-inspector-boss em { color: #AAB2C2; font-size: 10px; font-style: normal; line-height: 1.4;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.of-inspector-bar { display: flex; align-items: center; gap: 7px; margin-top: 8px; }
.of-inspector-bar i { flex: 1; height: 7px; border-radius: 99px; background: rgba(255,255,255,.09); overflow: hidden; }
.of-inspector-bar b { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg,#5EAEF0,#8B84FF); transition: width .8s ease; }
.of-inspector-bar em { color: #AAB2C2; font: 800 10px/1 ui-monospace, monospace; font-style: normal; }
.of-inspector-gauges { display: grid; gap: 6px; margin-top: 12px; }
.of-gauge { display: flex; align-items: center; gap: 7px; }
.of-gauge em { width: 44px; color: #7A8294; font: 700 9px/1 ui-monospace, monospace; font-style: normal; }
.of-gauge i { flex: 1; height: 5px; border-radius: 99px; background: rgba(255,255,255,.09); }
.of-gauge b { display: block; height: 100%; border-radius: 99px; }
.of-gauge.is-pos b { background: linear-gradient(90deg,#2E9E6B,#3DD68C) }
.of-gauge.is-brand b { background: linear-gradient(90deg,#6D5BE8,#A9A3FF) }
.of-gauge > span { width: 24px; color: #D7DBE3; font-size: 10px; font-weight: 700; text-align: right; }
.of-inspector-meta { display: grid; grid-template-columns: repeat(3,1fr); gap: 5px; margin-top: 12px; }
.of-inspector-meta span { padding: 6px 4px; border: 1px solid rgba(255,255,255,.07); border-radius: 7px; background: rgba(255,255,255,.03); color: #6E7688; font-size: 8px; text-align: center; }
.of-inspector-meta b { display: block; margin-bottom: 2px; color: #ECEEF2; font-size: 12px; }
.of-inspector-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 12px; }
.of-inspector-actions button {
  min-height: 32px; border-radius: 8px;
  border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.05);
  color: #D6DAE2; font-size: 10.5px; font-weight: 700;
}
.of-inspector-actions button:hover { background: rgba(255,255,255,.1) }
.of-inspector-actions .is-primary { border-color: rgba(139,132,255,.45); background: rgba(109,91,232,.28); color: #CFCBFF }
.of-inspector-actions .is-primary:hover { background: rgba(109,91,232,.42) }
.of-inspector-actions button:focus-visible { outline: 2px solid #8B84FF; outline-offset: 1px }

/* ── 무대 하단 컨트롤 ─────────────────────────────────────────── */
.of-scene-foot {
  position: absolute; z-index: 50; left: 80px; bottom: 10px; right: 12px;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.of-convene-cta {
  min-height: 30px; padding: 0 14px; border-radius: 99px;
  border: 1px solid rgba(139,132,255,.5);
  background: linear-gradient(150deg, rgba(109,91,232,.9), rgba(63,127,216,.85));
  color: #fff; font-size: 11px; font-weight: 800;
  box-shadow: 0 8px 18px -8px rgba(109,91,232,.9);
}
.of-convene-cta:hover { filter: brightness(1.12) }
.of-convene-cta:focus-visible { outline: 2px solid #C6C1FF; outline-offset: 2px }
.of-meeting-flag {
  display: flex; align-items: center; gap: 6px;
  min-height: 30px; padding: 0 12px; border-radius: 99px;
  border: 1px solid rgba(139,132,255,.45); background: rgba(30,26,58,.9);
  color: #CFCBFF; font-size: 10.5px; font-weight: 800;
}
.of-meeting-flag i { width: 6px; height: 6px; border-radius: 99px; background: #A9A3FF; animation: jvPulse 1.8s ease-in-out infinite }
.of-reset-cam {
  min-height: 30px; padding: 0 11px; border-radius: 99px;
  border: 1px solid rgba(255,255,255,.14); background: rgba(14,16,22,.85);
  color: #C7CCD6; font-size: 10.5px; font-weight: 700;
}
.of-reset-cam:hover { background: rgba(255,255,255,.1) }
.of-hint {
  margin-left: auto; padding: 4px 9px; border-radius: 99px;
  background: rgba(12,14,20,.66); color: #8992A4; font-size: 9.5px;
}

/* ── 회의 소집 다이얼로그 ─────────────────────────────────────── */
.jv-convene-backdrop { position: fixed; z-index: 9999; inset: 0; display: grid; place-items: center; padding: 18px; background: rgba(5,7,11,.72); backdrop-filter: blur(5px); }
.jv-convene-dialog { position: relative; width: min(460px,100%); padding: 22px; border: 1px solid rgba(139,132,255,.35); border-radius: 14px; background: #11141B; box-shadow: 0 28px 80px rgba(0,0,0,.55); }
.jv-convene-close { position: absolute; top: 10px; right: 10px; width: 40px; height: 40px; border-radius: 8px; color: #888E99; font-size: 20px; }
.jv-convene-close:hover, .jv-convene-close:focus-visible { background: #20242E; color: #fff; outline: 2px solid #8B84FF }
.jv-convene-overline { color: #8B84FF; font: 800 9px/1 ui-monospace, monospace; letter-spacing: .14em }
.jv-convene-dialog h3 { margin-top: 8px; color: #F3F4F6; font-size: 22px; font-weight: 760; letter-spacing: -.03em }
.jv-convene-dialog label { display: block; margin-top: 18px; color: #C7CAD0; font-size: 12px; font-weight: 700 }
.jv-convene-dialog textarea, .jv-convene-dialog input { display: block; width: 100%; margin-top: 7px; padding: 12px; border: 1px solid #343944; border-radius: 9px; background: #0B0E13; color: #F1F2F4; font-size: 14px; line-height: 1.5 }
.jv-convene-dialog textarea { min-height: 112px; resize: vertical }
.jv-convene-dialog textarea:focus, .jv-convene-dialog input:focus { border-color: #8B84FF; outline: 3px solid rgba(139,132,255,.18) }
.jv-convene-meta { display: flex; justify-content: space-between; gap: 12px; margin-top: 7px; color: #747B86; font-size: 10px; line-height: 1.4 }
.jv-convene-meta b { flex: none; color: #9298A2 }
.jv-convene-error { margin-top: 10px; padding: 8px 10px; border: 1px solid rgba(239,68,68,.28); border-radius: 7px; background: rgba(239,68,68,.08); color: #FCA5A5; font-size: 11px }
.jv-convene-submit, .jv-convene-success button { width: 100%; min-height: 44px; margin-top: 16px; border-radius: 8px; background: #6D65DB; color: #fff; font-size: 12px; font-weight: 800 }
.jv-convene-submit:hover:not(:disabled), .jv-convene-submit:focus-visible, .jv-convene-success button:hover, .jv-convene-success button:focus-visible { background: #7D75ED; outline: 3px solid rgba(139,132,255,.25) }
.jv-convene-submit:disabled { cursor: not-allowed; opacity: .45 }
.jv-convene-success { margin-top: 18px; padding: 16px; border: 1px solid rgba(61,214,140,.25); border-radius: 10px; background: rgba(61,214,140,.07) }
.jv-convene-success b { display: block; color: #75E0AB; font-size: 14px }
.jv-convene-success span { display: block; margin-top: 6px; color: #AEB4BD; font-size: 12px; line-height: 1.5 }

/* ── 좁은 화면 ────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .of-hud { gap: 10px; padding: 9px 11px }
  .of-hud-right { width: 100%; margin-left: 0; justify-content: space-between }
  .of-body { flex-direction: column }
  .of-rail {
    flex-direction: row; width: auto; padding: 6px 8px; gap: 6px;
    overflow-x: auto; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.06);
  }
  .of-rail-btn { flex: 1 0 auto; flex-direction: row; gap: 6px; min-height: 40px; padding: 0 12px }
  .of-viewport { overflow-x: auto; }
  .of-scene-foot {
    position: static; padding: 8px 10px;
    border-top: 1px solid rgba(255,255,255,.06); background: #101219;
  }
  .of-inspector {
    position: static; width: auto; border-radius: 0;
    border-width: 1px 0 0; box-shadow: none; backdrop-filter: none;
  }
  .of-inspector-actions button { min-height: 40px }
  .of-hint { display: none }
}
@media (max-width: 560px) {
  .of-hud-stats { width: 100% }
  .of-stat { flex: 1 }
}

/* ---------- Team Hub adaptations ---------- */
:where(.jv-of, .jv-convene-backdrop) *, :where(.jv-of, .jv-convene-backdrop) *::before, :where(.jv-of, .jv-convene-backdrop) *::after { box-sizing: border-box; }
:where(.jv-of, .jv-convene-backdrop) p, :where(.jv-of, .jv-convene-backdrop) h3 { margin: 0; }
:where(.jv-of, .jv-convene-backdrop) button { appearance: none; background: none; border: 0; padding: 0; margin: 0; font: inherit; color: inherit; cursor: pointer; }
.jv-of { color: #ECE7DF; line-height: 1.35; }
.jv-num { font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.of-over { position: static; }
.of-actor-hit svg { display: block; }
/* turn the doll around its own centre */
.ch-flip { transform-box: view-box; transform-origin: 22px 31px; }
.of-opsboard-line { white-space: pre-line; }
.jv-convene-dialog textarea { min-height: 112px; }
@keyframes jvFadeUp { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
@keyframes jvPulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) {
  .jv-of *, .jv-of *::before, .jv-of *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; }
}
/* in the stacked phone layout the stage height must win over flex sizing */
@media (max-width: 900px) { .of-viewport { flex: none; aspect-ratio: auto; } }