/* KWONMO — 사무실 모형의 시점·마커·터치 조작. */
.of-root [hidden] { display: none !important; }
.of-root { position: relative; width: 100%; height: 100%; overflow: hidden; isolation: isolate; color-scheme: light; color: var(--of-ink); background: var(--of-bg); font: 1rem system-ui, sans-serif; }
.of-root * { box-sizing: border-box; }
.of-stage { position: absolute; inset: 0; }
.of-stage canvas { display: block; width: 100%; height: 100%; touch-action: none; -webkit-touch-callout: none; }
.of-root .of-button { border: var(--hairline) solid var(--of-line); padding: var(--sp-sm) var(--sp-md); border-radius: 2rem; background: var(--of-paper); color: var(--of-ink); font: inherit; font-size: .8rem; cursor: pointer; }
.of-root .of-button[aria-pressed="true"] { background: var(--of-accent); color: var(--of-paper); }
.of-exit { position: absolute; z-index: 30; top: var(--sp-md); }
.of-exit { left: var(--sp-md); }
.of-markers { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.of-scene-bubble { position: absolute; transform: translate(-50%, -100%); width: max-content; padding: var(--sp-sm) var(--sp-md); border: var(--hairline) solid var(--of-line); border-radius: .8rem; background: var(--of-paper); color: var(--of-ink); font-size: .85rem; line-height: 1.5; box-shadow: 0 .15rem .5rem var(--of-shadow); }
.of-person-marker { position: absolute; transform: translate(-50%, -100%); pointer-events: auto; white-space: nowrap; }
.of-root .of-person-marker button { border: var(--hairline) solid var(--of-line); border-radius: .5rem; background: var(--of-paper); color: var(--of-ink); font: inherit; font-size: .85rem; font-weight: 600; padding: var(--sp-xs) var(--sp-sm); cursor: pointer; box-shadow: 0 .15rem .5rem var(--of-shadow); }
.of-person-marker { display: grid; grid-template-columns: auto auto auto; align-items: center; gap: var(--sp-xs); }
.of-person-label { grid-column: 1; grid-row: 1; }
.of-person-marker .of-person-tail { grid-column: 2; grid-row: 1; }
.of-person-marker #ofEnterFirstPerson { grid-column: 3; grid-row: 1; }
.of-person-marker.has-bubble .of-person-label, .of-person-marker.has-bubble .of-person-tail, .of-person-marker.has-bubble #ofEnterFirstPerson { grid-row: 2; }
.of-status-bubble { position: relative; grid-column: 1 / -1; grid-row: 1; justify-self: center; display: inline-flex; align-items: center; gap: var(--sp-xs); margin-bottom: var(--sp-xs); padding: var(--sp-xs) var(--sp-sm); border: var(--hairline) solid var(--of-line); border-radius: .8rem; background: var(--of-paper); color: var(--of-ink); font-size: .75rem; line-height: 1.5; box-shadow: 0 .15rem .5rem var(--of-shadow); pointer-events: none; }
.of-status-bubble::after { content: ''; position: absolute; top: 100%; left: 50%; width: var(--sp-xs); height: var(--sp-xs); background: var(--of-paper); border-right: var(--hairline) solid var(--of-line); border-bottom: var(--hairline) solid var(--of-line); transform: translate(-50%, -50%) rotate(45deg); }
.of-status-bubble[data-state="think"] { border-radius: 1.5rem; }
.of-status-bubble[data-state="think"]::after { border: var(--hairline) solid var(--of-line); border-radius: 50%; transform: translate(-50%, 0); }
.of-root .of-person-label { display:inline-flex; align-items:center; gap:var(--sp-xs); min-width:0; }
.of-person-icon { width:1.1em; height:1.1em; flex:none; fill:none; stroke:currentColor; stroke-width:2; }
.of-root .of-person-marker .of-person-tail { max-width:12rem; overflow:hidden; text-overflow:ellipsis; font-weight:400; }
.of-person-marker.is-edge .of-person-label { border-style:dashed; }
.of-person-marker.is-edge::after { display:none; }
.of-person-marker::after { content: ''; position: absolute; left: 50%; top: 100%; height: var(--of-leader, 0rem); border-left: var(--hairline) solid var(--of-line); pointer-events: none; }
.of-root #ofEnterFirstPerson { flex:none; color:var(--of-paper); background:var(--of-accent); }
.of-person-card { position:absolute; z-index:1; pointer-events:auto; display:flex; flex-direction:column; width:19rem; aspect-ratio:54 / 85.6; max-width:100%; max-height:100%; overflow:hidden; overflow-wrap:anywhere; padding:var(--sp-md); padding-top:3.25rem; border:var(--hairline) solid var(--of-line); border-radius:.8rem; background:var(--of-paper); color:var(--of-ink); font-size:.85rem; line-height:1.35; box-shadow:0 .25rem 1rem var(--of-shadow); }
.of-person-card::before { content:''; position:absolute; top:0; left:50%; transform:translateX(-50%); width:1.4rem; height:2.5rem; border-inline:var(--stroke-2) solid var(--of-accent); background:var(--of-bg); }
.of-person-card::after { content:''; position:absolute; top:2rem; left:50%; transform:translateX(-50%); width:2rem; height:1rem; border:var(--stroke-2) solid var(--of-line); border-radius:.4rem; background:var(--of-paper); }
.of-person-card > div + div { margin-top:var(--sp-xs); }
.of-person-portrait { display:grid; place-items:center; flex:none; align-self:center; width:10.5rem; aspect-ratio:3 / 4; overflow:hidden; border:var(--hairline) solid var(--of-line); border-radius:.4rem; background:var(--of-accent); color:var(--of-paper); font-size:2rem; font-weight:700; }
.of-person-portrait img { display:block; width:100%; height:100%; object-fit:cover; }
.of-root .of-person-close { position:absolute; top:var(--sp-sm); right:var(--sp-sm); display:grid; place-items:center; width:2rem; height:2rem; padding:0; border:var(--hairline) solid var(--of-line); border-radius:.4rem; background:var(--of-paper); color:var(--of-ink); cursor:pointer; }
.of-root .of-person-close .of-person-icon { width:1rem; height:1rem; }
.of-person-card[data-who="chloe"] .of-person-portrait { background:color-mix(in srgb, var(--of-accent) 70%, var(--of-paper)); color:var(--of-ink); }
.of-person-card[data-who="codelia"] .of-person-portrait { background:color-mix(in srgb, var(--of-accent) 35%, var(--of-paper)); color:var(--of-ink); }
.of-person-card[data-who="clark"] .of-person-portrait { background:var(--of-ink); color:var(--of-paper); }
.of-person-name { text-align:center; font-size:1.4rem; font-weight:700; }
.of-person-role { text-align:center; font-size:.8rem; }
.of-person-card .of-person-place { margin-top:var(--sp-sm); padding-top:var(--sp-xs); border-top:var(--hairline) solid var(--of-line); }
.of-person-usage { font-size:.8rem; }
.of-root .of-person-refresh { align-self:flex-end; margin-top:var(--sp-sm); padding:var(--sp-xs) var(--sp-sm); border:var(--hairline) solid var(--of-line); border-radius:.4rem; background:var(--of-paper); color:var(--of-ink); font:inherit; cursor:pointer; }
.of-root .of-person-refresh:disabled { opacity:.6; cursor:wait; }
.of-usage-panel { position:absolute; z-index:2; pointer-events:auto; width:18rem; max-width:calc(100% - 1rem); max-height:calc(100% - 1rem); overflow:auto; padding:var(--sp-sm); border:var(--hairline) solid var(--of-line); border-radius:.65rem; background:color-mix(in srgb, var(--of-paper) 78%, transparent); backdrop-filter:blur(.35rem); color:var(--of-ink); font-size:.75rem; line-height:1.35; box-shadow:0 .15rem .5rem var(--of-shadow); }
.of-usage-row { display:grid; grid-template-columns:1fr auto; gap:var(--sp-xs); }
.of-usage-row + .of-usage-row { margin-top:var(--sp-sm); }
.of-usage-remaining { font-weight:600; }
.of-usage-row progress { grid-column:1 / -1; width:100%; height:.55rem; border:0; border-radius:1rem; overflow:hidden; background:var(--of-line); appearance:none; }
.of-usage-row progress::-webkit-progress-bar { background:var(--of-line); border-radius:1rem; }
.of-usage-row progress::-webkit-progress-value { background:var(--of-accent); border-radius:1rem; }
.of-usage-row progress::-moz-progress-bar { background:var(--of-accent); border-radius:1rem; }
.of-usage-reset { grid-column:1 / -1; font-variant-numeric:tabular-nums; }
@media (max-width:48em) { .of-person-marker #ofEnterFirstPerson { display:none; } }
.of-usage-actions { display:flex; gap:var(--sp-sm); margin-top:var(--sp-sm); }
.of-root .of-usage-actions button { flex:1; margin:0; padding:var(--sp-sm); border:var(--hairline) solid var(--of-line); border-radius:.4rem; background:color-mix(in srgb, var(--of-paper) 70%, transparent); color:var(--of-ink); font:inherit; cursor:pointer; }
.of-reset { position: absolute; right: var(--sp-md); bottom: calc(var(--sp-md) + var(--safe-b)); z-index: 4; }
.of-lounge { position:absolute; right:var(--sp-md); bottom:calc(3.5rem + var(--safe-b)); z-index:4; }
.of-lounge-bubble { grid-column:1 / -1; grid-row:1; justify-self:center; max-width:15rem; white-space:normal; overflow-wrap:anywhere; padding:var(--sp-sm); border:var(--hairline) solid var(--of-line); border-radius:.8rem; background:var(--of-paper); color:var(--of-ink); font-size:.8rem; line-height:1.4; box-shadow:0 .15rem .5rem var(--of-shadow); pointer-events:none; }
.of-root.is-lounge .of-person-label, .of-root.is-lounge .of-person-tail, .of-root.is-lounge #ofEnterFirstPerson, .of-root.is-lounge .of-person-marker::after { display:none; }
/* 조이스틱은 터치 화면용 — 데스크톱은 WASD 와 마우스 끌기로 다닌다 */
.of-root .of-stick, .of-crosshair { display:none; }
@media (max-width:70rem) {
  .of-root .of-stick { --of-stick-size:clamp(7rem, 30vw, 9rem); display:block; position:absolute; z-index:5; bottom:calc(clamp(6rem, 14%, 10rem) + var(--safe-b)); width:var(--of-stick-size); height:var(--of-stick-size); border-radius:50%; background:color-mix(in srgb, var(--of-ink) 22%, transparent); opacity:.45; touch-action:none; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; }
  .of-root .of-stick-move { left:var(--sp-md); }
  .of-root .of-stick-look { right:var(--sp-md); }
  .of-root .of-stick.is-held { opacity:.8; }
  .of-stick-knob { position:absolute; left:30%; top:30%; width:40%; height:40%; display:grid; place-items:center; border-radius:50%; background:var(--of-paper); color:var(--of-ink); font-size:1.6rem; line-height:1; box-shadow:0 .15rem .5rem var(--of-shadow); pointer-events:none; }
  .of-root[data-first-person="y"] .of-crosshair { display:block; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); color:var(--of-ink); opacity:.25; pointer-events:none; }
}
.of-error { position: absolute; left: var(--sp-md); right: var(--sp-md); bottom: var(--sp-md); z-index: 40; background: var(--accent); color: var(--of-paper); padding: var(--sp-md); border-radius: .6rem; }
.of-notice { position: absolute; left: 50%; bottom: calc(var(--sp-md) + var(--safe-b)); transform: translateX(-50%); z-index: 30; max-width: calc(100% - 2rem); padding: var(--sp-sm) var(--sp-md); border: var(--hairline) solid var(--of-line); border-radius: .6rem; background: var(--of-paper); color: var(--of-ink); font-size: .85rem; box-shadow: 0 .15rem .5rem var(--of-shadow); pointer-events: none; }
@media (max-width: 40em) { .of-root .of-person-marker button { font-size: .75rem; padding: var(--sp-xs) var(--sp-sm); } }