.world-frame { position: relative; min-block-size: 0; overflow: hidden; background: var(--neutral-100); isolation: isolate; }
#worldCanvas { display: block; inline-size: 100%; block-size: 100%; cursor: crosshair; touch-action: manipulation; }
.world-overlay { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.map-waypoint-label { position: absolute; z-index: 3; inset-block-start: var(--space-2); inset-inline-end: var(--space-2); max-inline-size: min(72%, 28rem); padding: var(--space-1) var(--space-2); color: var(--company-accent-600); background: var(--surface-000); border: var(--line-thin) solid var(--company-accent-600); border-radius: var(--radius-sm); box-shadow: var(--shadow-hard); font-size: var(--type-14); font-weight: 800; line-height: var(--leading-tight); text-align: end; overflow-wrap: break-word; word-break: keep-all; }
.world-state { position: absolute; inset: 0; z-index: 4; display: grid; place-content: center; justify-items: center; gap: var(--space-2); padding: var(--space-8); color: var(--ink-900); background: var(--surface-alpha); text-align: center; }
.world-state[hidden] { display: none; }
.world-state > span:last-child { max-inline-size: 36ch; color: var(--ink-600); line-height: var(--leading-body); word-break: keep-all; }
.state-spinner { inline-size: 30px; block-size: 30px; border: 3px solid var(--neutral-350); border-block-start-color: var(--company-accent-600); border-radius: 50%; animation: spin 900ms linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.map-person { position: absolute; display: grid; justify-items: center; inline-size: clamp(var(--person-min-inline), 8vw, var(--person-max-inline)); transform: translate(-50%, -72%); transition: transform var(--motion-walk) var(--ease-standard); }
.map-person:is(button) { padding: 0; border: 0; background: transparent; cursor: pointer; pointer-events: auto; }
/* 자리 배치 모드 동안에는 아바타 버튼이 클릭을 삼키지 않게 해 점유 좌석도 캔버스에서 선택된다. 모드 밖 동작은 그대로다. */
#appShell[data-seat-editing="true"] .map-person:is(button) { pointer-events: none; }
.map-nameplate { inline-size: max-content; min-inline-size: var(--person-min-inline); max-inline-size: var(--person-max-inline); padding: var(--space-1) var(--space-2); color: var(--surface-000); background: var(--navy-950); border-radius: var(--radius-sm); box-shadow: var(--shadow-hard); font-size: var(--type-14); font-weight: 700; line-height: var(--leading-tight); text-align: center; word-break: keep-all; }
/* 이름표는 기본 숨김 — 마우스를 올리거나 키보드로 고르면 보이고, 심부름 중인 직원은 계속 보인다. */
.map-nameplate { visibility: hidden; opacity: 0; transition: opacity var(--motion-state) var(--ease-standard); }
.map-person:hover .map-nameplate, .map-person:focus-visible .map-nameplate, .map-person[data-errand="true"] .map-nameplate { visibility: visible; opacity: 1; }
.map-nameplate small { display: flex; flex-wrap: nowrap; justify-content: center; column-gap: .25em; color: var(--neutral-200); font-size: inherit; font-weight: 500; white-space: nowrap; }
.map-role, .map-presence { white-space: nowrap; }
.map-role::after { content: " ·"; }
.map-person[data-current="true"] .map-nameplate { background: var(--local-accent-500); }
.company-avatar { position: relative; inline-size: var(--avatar-size); block-size: var(--avatar-tall); filter: drop-shadow(0 3px 0 var(--navy-alpha)); }
.map-person[data-current="true"] .company-avatar { border-radius: var(--radius-round); outline: 3px solid var(--local-accent-500); outline-offset: 3px; }
.avatar-layer { position: absolute; display: block; }
.avatar-shadow { inset: auto 4px 0; block-size: 8px; border-radius: 50%; background: var(--navy-alpha); }
.avatar-chair { inset: 24px 4px 5px; background: var(--wood-650); border: 2px solid var(--ink-900); border-radius: var(--radius-sm); }
.company-avatar[data-pose="standing"] .avatar-chair { display: none; }
.avatar-legs { inset: 33px 10px 3px; border-inline: 5px solid var(--ink-900); }
.avatar-torso { inset: 20px 7px 10px; border: 2px solid var(--ink-900); border-radius: 8px 8px 4px 4px; background: var(--avatar-outfit-navy); }
.company-avatar[data-outfit-color="teal"] .avatar-torso { background: var(--avatar-outfit-teal); }
.company-avatar[data-outfit-color="coral"] .avatar-torso { background: var(--avatar-outfit-coral); }
.company-avatar[data-outfit-color="sand"] .avatar-torso { background: var(--avatar-outfit-sand); }
.avatar-head { inset: 6px 9px auto; inline-size: 18px; block-size: 18px; border: 2px solid var(--ink-900); border-radius: 48% 48% 44% 44%; background: var(--avatar-skin-warm); }
.company-avatar[data-skin-tone="light"] .avatar-head { background: var(--avatar-skin-light); }
.company-avatar[data-skin-tone="medium"] .avatar-head { background: var(--avatar-skin-medium); }
.company-avatar[data-skin-tone="deep"] .avatar-head { background: var(--avatar-skin-deep); }
.avatar-hair { inset: 3px 7px auto; inline-size: 22px; block-size: 12px; border: 2px solid var(--ink-900); border-radius: 10px 10px 4px 4px; background: var(--avatar-hair-black); }
.company-avatar[data-hair-color="brown"] .avatar-hair { background: var(--avatar-hair-brown); }
.company-avatar[data-hair-color="auburn"] .avatar-hair { background: var(--avatar-hair-auburn); }
.company-avatar[data-hair-color="silver"] .avatar-hair { background: var(--avatar-hair-silver); }
.avatar-accessory, .avatar-mark { display: none; }
.company-avatar[data-accessory="glasses"] .avatar-accessory { display: block; inset: 12px 10px auto; inline-size: 16px; border-block-start: 2px solid var(--ink-900); }
.company-avatar[data-actor="ai"] .avatar-mark { inset: 0 0 auto auto; display: grid; place-items: center; inline-size: 18px; block-size: 18px; color: var(--surface-000); background: var(--company-accent-600); border: 2px solid var(--surface-000); border-radius: var(--radius-sm); font-size: 7px; font-weight: 800; }
.company-avatar[data-actor="human"] .avatar-mark { display: none; }
.interaction-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-3) var(--space-4); background: var(--surface-000); border-block-start: var(--line-thin) solid var(--neutral-350); }
.interaction-copy { display: flex; align-items: center; gap: var(--space-3); min-inline-size: 0; }
.interaction-copy > div { display: grid; min-inline-size: 0; }
.interaction-copy span:last-child { color: var(--ink-600); font-size: var(--type-14); line-height: var(--leading-body); word-break: keep-all; }
.status-dot { inline-size: 12px; block-size: 12px; flex: none; border: 2px solid var(--surface-000); border-radius: 50%; outline: 2px solid var(--local-accent-500); background: var(--local-accent-500); }
.primary-action, .secondary-action { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-block-size: var(--target-min); padding: var(--space-2) var(--space-4); border-radius: var(--radius-sm); font-weight: 700; text-decoration: none; cursor: pointer; }
.primary-action { color: var(--surface-000); background: var(--company-accent-600); border: var(--line-thin) solid var(--company-accent-600); box-shadow: var(--shadow-hard); }
.primary-action:hover { filter: brightness(.94); }
.secondary-action { color: var(--company-accent-600); background: var(--surface-000); border: var(--line-thin) solid var(--company-accent-600); }
.secondary-action svg, .primary-action svg { inline-size: 20px; block-size: 20px; }
.world-controls { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-2) var(--space-4); background: var(--neutral-050); border-block-start: var(--line-thin) solid var(--neutral-350); }
.floor-strip { display: flex; gap: var(--space-2); min-inline-size: 0; overflow-x: auto; scrollbar-width: thin; }
.floor-button { flex: none; min-block-size: var(--target-min); padding-inline: var(--space-3); border: var(--line-thin) solid var(--neutral-350); border-radius: var(--radius-sm); background: var(--surface-000); cursor: pointer; }
.floor-button[aria-current="location"] { color: var(--surface-000); background: var(--navy-850); border-color: var(--navy-850); }
.dpad { display: grid; grid-template-columns: repeat(5, 52px); gap: var(--space-1); flex: none; }
/* 마우스가 있는 데스크탑에서는 방향 패드를 숨긴다 — 클릭 이동과 방향키가 같은 일을 한다. */
@media (hover: hover) and (pointer: fine) { .dpad { display: none; } }
.dpad button { min-inline-size: var(--target-min); min-block-size: var(--target-min); padding: 0; border: var(--line-thin) solid var(--neutral-350); border-radius: var(--radius-sm); background: var(--surface-000); font-size: var(--type-12); font-weight: 700; cursor: pointer; }
.dpad button:active { transform: translateY(2px); }
.dpad-up { grid-column: 1; }.dpad-left { grid-column: 2; }.dpad-center { grid-column: 3; color: var(--surface-000); background: var(--company-accent-600) !important; }.dpad-right { grid-column: 4; }.dpad-down { grid-column: 5; }
.world-alternative { background: var(--surface-000); border-block-start: var(--line-thin) solid var(--neutral-350); }
.world-alternative summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-block-size: var(--target-min); padding: var(--space-2) var(--space-4); cursor: pointer; list-style: none; }
.world-alternative summary::-webkit-details-marker { display: none; }
.world-alternative summary > span:first-child { display: flex; align-items: baseline; gap: var(--space-3); min-inline-size: 0; }
.world-alternative summary b { white-space: nowrap; }
.world-alternative summary small { overflow: hidden; color: var(--ink-600); text-overflow: ellipsis; white-space: nowrap; }
.world-alternative[open] .nearby-open-label, .world-alternative:not([open]) .nearby-close-label { display: none; }
.world-alternative[open] summary { border-block-end: var(--line-thin) solid var(--neutral-350); }
.nearby-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr)); gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.world-alternative .nearby-list { max-block-size: 180px; padding: var(--space-3) var(--space-4); overflow-y: auto; }
.nearby-list button { inline-size: 100%; min-block-size: var(--target-min); padding: var(--space-2) var(--space-3); text-align: start; border: var(--line-thin) solid var(--neutral-350); border-radius: var(--radius-sm); background: var(--neutral-050); cursor: pointer; word-break: keep-all; }
.walk-mode { white-space: nowrap; }

/* 문 열림 연출 — 자료실·서랍에 들어설 때 나무 문짝 두 개가 양쪽으로 열린다. */
.door-reveal { position: absolute; inset: 0; z-index: 5; display: flex; overflow: hidden; pointer-events: none; }
.door-reveal-leaf { flex: 1; background: var(--wood-400); border-block: var(--line-world) solid var(--wood-650); animation: door-open 420ms var(--ease-standard) forwards; }
.door-reveal-leaf[data-side="left"] { border-inline-end: var(--line-world) solid var(--wood-650); transform-origin: left center; }
.door-reveal-leaf[data-side="right"] { border-inline-start: var(--line-world) solid var(--wood-650); transform-origin: right center; }
@keyframes door-open {
  from { transform: scaleX(1); opacity: 1; }
  70% { opacity: 1; }
  to { transform: scaleX(0); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .door-reveal { display: none; } }

/* 머리 위 말풍선 — 짧은 답만 띄우고, 캐릭터를 누르면 대화 기록이 열린다. */
.speech-bubble { position: absolute; inset-block-end: calc(100% + var(--space-2)); z-index: 4; max-inline-size: 30ch; padding: var(--space-2) var(--space-3); color: var(--ink-900); background: var(--surface-000); border: var(--line-thin) solid var(--neutral-350); border-radius: var(--radius-md); box-shadow: var(--shadow-panel); font-size: var(--type-14); font-weight: 500; line-height: var(--leading-tight); text-align: start; word-break: keep-all; pointer-events: none; }
.speech-bubble::after { content: ""; position: absolute; inset-block-start: 100%; inset-inline-start: 50%; transform: translateX(-50%); border: 7px solid transparent; border-block-start-color: var(--surface-000); }
@media (prefers-reduced-motion: no-preference) {
  .speech-bubble { animation: bubble-in 180ms var(--ease-standard); }
  @keyframes bubble-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
}