.s04 {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  min-width: 0;
}
.s04__sites,
.s04__floors {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
}
.s04 [aria-pressed="true"] {
  border: var(--border-state) solid var(--color-green-dark);
  background: var(--color-green);
  color: var(--color-text-inverse);
}
.s04__main {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: var(--space-12);
  align-items: start;
}
.s04--narrow .s04__main {
  grid-template-columns: minmax(0, 1fr);
}
.s04__scene,
.s04__detail {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  min-width: 0;
  padding: var(--space-12);
  border: 1px solid var(--color-line-strong);
  background: var(--color-paper);
}
.s04__side {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  min-width: 0;
}
/* mock-H4 floor labels: paper lighter than the building, with a top glint and lower contact shadow. */
.s04__floor {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  padding: var(--space-8) var(--space-12);
  border: 1px solid #c8b998;
  background: repeating-linear-gradient(83deg, #f8f2df 0 7px, #f4ead5 8px 9px);
  box-shadow: inset 0 1px 0 #fffdf3, 0 1px 0 #c8b998, 0 3px 0 #d7c9ad66;
  cursor: pointer;
}
.s04__building,
.s04__floor-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  min-height: 0;
}
.s04__mock-building { min-width: 0; }
.s04__mock-building svg { display: block; width: 100%; height: auto; }
.s04__mock-building .room-name { fill: #88785c; font: 10px Meiryo, sans-serif; }
.s04__mock-building .floor-no { fill: #456354; font: 28px Georgia, serif; }
.s04__mock-building .floor-name { fill: #456354; font: 12px Meiryo, sans-serif; }
.s04__mock-building .floor-stat { display: none; }
.s04__mock-building .tag-text, .s04__mock-building .bubble-text { fill: #456354; font: 12px Meiryo, sans-serif; }
.s04__mock-building .angry-text, .s04__mock-building .red-text { fill: #9a5541; font: 12px Meiryo, sans-serif; }
.s04__floor-pager {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}
.s04__floor-name {
  margin: 0;
  font-size: var(--font-size-body);
}
.s04__floor-stats {
  font-size: var(--font-size-table);
}
.s04__marker {
  text-align: left;
}
.s04__figures {
  display: flex;
  align-items: flex-end;
  gap: var(--space-24);
  min-height: 56px;
  padding: var(--space-4) var(--space-8);
  border-bottom: var(--border-state) solid var(--color-wood);
}
.office-figure {
  position: relative;
  display: block;
  width: 28px;
  height: 48px;
}
.office-figure::before {
  position: absolute;
  top: 0;
  left: 8px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--color-gold);
  border-top: 3px solid var(--color-green-dark);
  content: "";
}
.office-figure::after {
  position: absolute;
  top: 14px;
  left: 4px;
  width: 20px;
  height: 28px;
  border-radius: 8px 8px 0 0;
  background: var(--color-green);
  content: "";
}
.office-figure__prop {
  position: absolute;
  z-index: 1;
  display: block;
}
.office-figure--desk .office-figure__prop,
.office-figure--watch .office-figure__prop,
.office-figure--slump .office-figure__prop {
  bottom: 0;
  left: -8px;
  width: 44px;
  height: 14px;
  background: var(--color-wood);
}
.office-figure--watch .office-figure__prop {
  height: 22px;
  border-top: 6px solid var(--color-green-dark);
}
.office-figure--slump::before {
  top: 14px;
}
.office-figure--phone .office-figure__prop {
  top: 2px;
  right: -4px;
  width: 6px;
  height: 18px;
  background: var(--color-vermilion);
}
.office-figure--meet .office-figure__prop {
  bottom: 0;
  left: -12px;
  width: 52px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-line-strong);
}
.office-figure--carry .office-figure__prop,
.office-figure--walk .office-figure__prop {
  bottom: 10px;
  left: 20px;
  width: 14px;
  height: 10px;
  background: var(--color-paper);
  border: 1px solid var(--color-line-strong);
}
.office-figure--walk .office-figure__prop {
  display: none;
}
.office-figure--rest .office-figure__prop {
  bottom: 12px;
  left: 22px;
  width: 8px;
  height: 10px;
  border: 2px solid var(--color-ink);
  background: var(--color-paper);
}
@media (min-width: 800px) {
  .app-frame--office .s04 { height: 408px; gap: 8px; }
  .app-frame--office .s04 > h1 { display: none; }
  .app-frame--office .s04__sites { height: 32px; flex-wrap: nowrap; gap: 4px; }
  .app-frame--office .s04__site { flex: 1 1 0; min-width: 0; min-height: 32px; height: 32px; padding: 2px 6px; font-size: 12px; white-space: nowrap; }
  .app-frame--office .s04__main, .app-frame--office .s04__main--selected { grid-template-columns: minmax(0, 1fr); gap: 0; height: 368px; }
  .app-frame--office .s04__scene { height: 368px; padding: 0; overflow: hidden; }
  .app-frame--office .s04__detail, .app-frame--office .s04__side { display: none; }
  .app-frame--office .s04__mock-building { flex: 1 1 auto; min-height: 0; overflow: hidden; }
  .app-frame--office .s04__mock-building svg { height: 100%; object-fit: contain; }
  .app-frame--office .s04__scene > h2, .app-frame--office .s04__scene > p { margin: 0; font-size: 14px; }
  .app-frame--office .s04__scene-head { display: none; }
  .app-frame--office .s04__scene-head h2 { flex: 0 1 auto; white-space: nowrap; }
  .app-frame--office .s04__floors { flex: 0 1 auto; flex-wrap: nowrap; justify-content: flex-end; gap: 2px; min-width: 0; overflow: hidden; }
  .app-frame--office .s04__floor-tab { min-width: 44px; min-height: 32px; padding: 2px 6px; font-size: 12px; }
  .app-frame--office .s04__section { font-size: 12px; color: var(--color-text-muted); }
  .app-frame--office .s04__floor { position: relative; min-height: 48px; height: 48px; padding: 0 8px 0 116px; gap: 0; overflow: hidden; background: #e8e0c4; }
  .app-frame--office .s04__floor::before { position: absolute; inset: 0 auto 0 0; width: 106px; border-right: 4px solid var(--color-wood); background: var(--color-paper); content: ""; }
  .app-frame--office .s04__floor-name, .app-frame--office .s04__floor-stats { position: absolute; z-index: 2; left: 8px; margin: 0; }
  .app-frame--office .s04__floor-name { font-family: var(--font-heading); }
  .app-frame--office .s04__building { display: grid; grid-template-columns: minmax(0, 1fr) 44px; gap: 4px; flex: 1 1 auto; overflow: hidden; }
  .app-frame--office .s04__floor-list { gap: 4px; overflow: hidden; }
  .app-frame--office .s04__floor-pager button { width: 44px; min-width: 44px; min-height: 44px; padding: 0; }
  .app-frame--office .s04__floor-pager span { font-size: 12px; }
  .app-frame--office .s04__floor-name { top: 5px; width: 102px; font-size: 13px; line-height: 16px; }
  .app-frame--office .s04__floor-stats { bottom: 3px; width: 102px; font-size: 12px; line-height: 14px; }
  .app-frame--office .s04__interior { position: absolute; inset: 0 4px 0 116px; border-bottom: 4px solid #9a7045; }
  .app-frame--office .s04__marker { position: absolute; z-index: 3; right: 12px; top: 8px; min-height: 28px; max-width: 230px; padding: 2px 6px; font-size: 12px; white-space: normal; }
  .app-frame--office .s04__detail h2 { font-size: 16px; }
  .app-frame--office .s04__detail .person-remark__traits, .app-frame--office .s04__detail .person-remark__source { display: none; }
  .app-frame--office .command-band { display: grid; grid-template-columns: 32px minmax(0, 1fr) 100px 132px; gap: 8px; height: 40px; min-height: 40px; padding: 4px 24px; }
  /* mock-H4 commandbar guide portrait: copied layered portrait frame. */
  .app-frame--office .s04__guide { width: 32px; height: 32px; overflow: hidden; border: 1px solid #8a9e80; border-radius: 16px 16px 2px 2px; background: #aaba94; } /* mock-H4 .secretary */
  .app-frame--office .s04__guide svg { display: block; width: 100%; height: 100%; }
  .app-frame--office .command-band__message { overflow: visible; font-size: 14px; line-height: 32px; white-space: nowrap; }
  .app-frame--office .command-band__reason { margin: 0; overflow: visible; padding: 0; border: 0; background: transparent; color: #c3ceb4; font-size: 12px; line-height: 32px; white-space: nowrap; }
  .app-frame--office .command-band__actions { justify-content: end; }
  .app-frame--office .command-band__actions button { width: 132px; min-height: 32px; height: 32px; padding: 2px 8px; font-size: 14px; white-space: nowrap; }
}