.app-shell { display: grid; grid-template-rows: auto minmax(0, 1fr); block-size: 100dvb; min-block-size: 640px; background: var(--neutral-050); }
.company-hud { position: relative; z-index: 20; display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: var(--space-3); min-block-size: var(--hud-block); padding: var(--space-2) var(--space-4); color: var(--surface-000); background: var(--navy-950); box-shadow: 0 2px 0 var(--navy-alpha); }
.company-brand, .hud-status, .hud-status > span, .hud-button, .location-chip { display: flex; align-items: center; }
.company-brand { gap: var(--space-3); min-inline-size: 0; }
.company-brand > div { display: grid; min-inline-size: 0; }
.company-brand strong { font-size: var(--type-16); }
.company-brand span { overflow: hidden; color: var(--neutral-350); font-size: var(--type-12); text-overflow: ellipsis; white-space: nowrap; }
.hud-icon, .hud-status svg, .hud-button svg, .location-chip svg { inline-size: 22px; block-size: 22px; flex: none; }
.location-chip { gap: var(--space-2); min-block-size: var(--target-min); padding-inline: var(--space-4); border: var(--line-thin) solid var(--glass-500); border-radius: var(--radius-md); background: var(--navy-850); font-weight: 700; }
.location-chip svg { color: var(--glass-150); }
.hud-status { justify-content: flex-end; gap: var(--space-1, 4px); flex-wrap: wrap; min-inline-size: 0; }
.hud-status > span { gap: var(--space-2); white-space: nowrap; }
.hud-button { gap: 6px; min-block-size: var(--target-min); padding-inline: var(--space-2); font-size: 0.85rem; white-space: nowrap; flex: none; color: var(--surface-000); border: var(--line-thin) solid var(--neutral-350); border-radius: var(--radius-sm); background: transparent; cursor: pointer; }
.hud-button:hover, .hud-button[aria-expanded="true"] { background: var(--navy-850); }
.user-badge { min-inline-size: 5.5rem; justify-content: center; padding: var(--space-2) var(--space-3); border-radius: var(--radius-round); background: var(--company-accent-600); font-weight: 700; }
.simulation-layout { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(23rem, 27rem); min-block-size: 0; overflow: hidden; }
/* 좌측 기능 사이드바 — 데스크톱 전용, 역할별로 필요한 메뉴만 채운다 */
.feature-rail { display: flex; flex-direction: column; gap: 2px; inline-size: 92px; padding: 10px 8px; overflow-y: auto; color: var(--surface-000); background: var(--navy-950); border-inline-end: var(--line-thin) solid var(--navy-alpha); }
.feature-rail[hidden] { display: none; }
.rail-button { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 4px; border: 0; border-radius: var(--radius-sm); background: transparent; color: inherit; cursor: pointer; font-size: 11px; font-weight: 700; line-height: 1.2; text-align: center; word-break: keep-all; }
.rail-button:hover { background: var(--navy-850); }
.rail-button svg { inline-size: 20px; block-size: 20px; }
.rail-divider { margin: 6px 4px; border: 0; border-top: 1px solid var(--navy-alpha); inline-size: calc(100% - 8px); }
.world-region { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto auto auto; min-inline-size: 0; min-block-size: 0; border-inline-end: var(--line-thin) solid var(--neutral-350); background: var(--neutral-100); }
.context-panel { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); min-inline-size: 0; min-block-size: 0; background: var(--surface-000); }
.fatal-state { position: fixed; inset: 0; z-index: 200; display: grid; place-content: center; gap: var(--space-3); padding: var(--space-8); color: var(--status-error-700); background: var(--status-error-100); text-align: center; }

/* 뷰 모드 세그먼트 (사무실/CCTV) */
.view-switch { display: flex; border: var(--line-thin) solid var(--neutral-350); border-radius: var(--radius-sm); overflow: hidden; }
.view-mode { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-block-size: var(--target-min); padding-inline: var(--space-3); border: 0; background: transparent; color: var(--surface-000); cursor: pointer; white-space: nowrap; font-weight: 700; }
.view-mode svg { inline-size: 19px; block-size: 19px; }
.view-mode[aria-pressed="true"] { background: var(--company-accent-600); color: var(--navy-950); }
.view-mode:hover:not([aria-pressed="true"]) { background: var(--navy-850); }

/* 관리 드롭다운 */
.hud-menu-wrap { position: relative; display: flex; }
.hud-menu { position: absolute; inset-block-start: calc(100% + 6px); inset-inline-end: 0; z-index: 40; min-inline-size: 12rem; display: grid; padding: 6px; gap: 2px; border: var(--line-thin) solid var(--neutral-350); border-radius: var(--radius-md); background: var(--navy-950); box-shadow: 0 10px 28px rgba(0,0,0,.45); }
.hud-menu-item { display: flex; align-items: center; gap: var(--space-2); min-block-size: var(--target-min); padding-inline: var(--space-3); border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--surface-000); cursor: pointer; white-space: nowrap; text-align: start; text-decoration: none; }
.hud-menu-item:hover { background: var(--navy-850); }
.hud-menu-item svg { inline-size: 20px; block-size: 20px; flex: none; }

/* 할 일 보드 알림 배지 — 새 지시·질문·완료가 있으면 개수를 붙인다 */
.hud-menu-item[data-alerts]:not([data-alerts=""])::after,
.rail-button[data-alerts]:not([data-alerts=""])::after,
.hud-button[data-alerts]:not([data-alerts=""])::after {
  content: attr(data-alerts);
  display: inline-flex; align-items: center; justify-content: center;
  min-inline-size: 18px; block-size: 18px; padding-inline: 4px; margin-inline-start: 6px;
  border-radius: 999px; background: #d9534a; color: #fff;
  font-size: 11px; font-weight: 800; line-height: 1;
}

/* HUD 밀도 — 좁은 화면에서는 아이콘 우선, 텍스트 라벨 축소 */
@media (max-width: 1450px) {
  .hud-status > span { font-size: 0.85rem; }
  .company-brand > div > #companyStatus { display: none; }
}
@media (max-width: 1240px) {
  .hud-button span, .view-mode { font-size: 0.8rem; }
  .location-chip { display: none; }
}

/* 출근 상태 점 — 근무 중일 때만 초록 점 */
.work-state-dot { inline-size: 8px; block-size: 8px; border-radius: 999px; background: transparent; }
.hud-button[data-work-state="sharing"] .work-state-dot { background: var(--presence-available, #35c26a); }
.hud-button[data-work-state="sharing"] { border-color: var(--company-accent-600); }