/* AICom 사무실 · 실시간 — 측면 단면 2.5D "디지털 디오라마" 스타일.
   부서 색: 청록(DEV) / 핑크·코랄(STUDIO) / 그린(QA). */

:root {
  --bg: #0f1320;
  --bg-soft: #161b2e;
  --ink: #e8ecf6;
  --muted: #9aa3bd;
  --line: #2a3350;

  --dev: #2dd4bf;     /* 청록 */
  --studio: #fb7185;  /* 핑크/코랄 */
  --qa: #34d399;      /* 그린 */
  --meet: #c4b5fd;    /* 회의실 보라 */

  --floor-h: 70vh;
  --hall-h: 8vh;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: radial-gradient(1200px 700px at 50% -10%, #1b2140, var(--bg) 60%);
  color: var(--ink);
  font-family: "Pretendard", "Apple SD Gothic Neo", "Noto Sans KR", system-ui, sans-serif;
  overflow: hidden;
}

/* ── 상단 헤더 ─────────────────────────────── */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 20px;
  height: 8vh; min-height: 56px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255,255,255,.03), transparent);
}
.brand h1 { margin: 0; font-size: 19px; letter-spacing: .3px; }
.subtitle { font-size: 12px; color: var(--muted); }
.status { display: flex; align-items: center; gap: 14px; }
.live-badge {
  font-size: 13px; font-weight: 700; color: #ff5d5d;
  animation: pulse 1.6s ease-in-out infinite;
}
.live-badge.stale { color: #f6c453; animation: none; }
.freshness { font-size: 12px; color: var(--muted); }
.freshness.stale { color: #f6c453; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }

/* ── 본문 플로어: 4칸 인형의 집 단면 ─────────── */
.floor {
  display: grid;
  grid-template-columns: 22fr 22fr 22fr 34fr;  /* DEV/STUDIO/QA/회의실 */
  gap: 10px;
  padding: 12px 16px;
  height: var(--floor-h);
}
.room {
  position: relative;
  border: 2px solid var(--line);
  border-radius: 12px 12px 6px 6px;
  background: var(--bg-soft);
  overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: inset 0 -30px 50px rgba(0,0,0,.35);
}
/* 부서 색 테두리 */
#room-swdev   { border-color: color-mix(in srgb, var(--dev) 55%, var(--line)); }
#room-content { border-color: color-mix(in srgb, var(--studio) 55%, var(--line)); }
#room-qa      { border-color: color-mix(in srgb, var(--qa) 55%, var(--line)); }
#room-meeting { border-color: color-mix(in srgb, var(--meet) 55%, var(--line)); }

/* 사인보드 */
.sign {
  position: absolute; top: 8px; left: 10px; z-index: 6;
  font-weight: 800; letter-spacing: 1.5px; font-size: 15px;
  padding: 3px 10px; border-radius: 6px;
  background: rgba(0,0,0,.35); cursor: default;
}
#room-swdev   .sign { color: var(--dev); }
#room-content .sign { color: var(--studio); }
#room-qa      .sign { color: var(--qa); }
.meeting-sign { color: var(--meet); }
.sign .full {
  display: none; position: absolute; top: 110%; left: 0;
  font-size: 11px; font-weight: 600; letter-spacing: .2px;
  white-space: nowrap; background: #000a; padding: 3px 8px; border-radius: 5px;
  color: var(--ink);
}
.sign:hover .full { display: block; }

/* 인테리어(배경/소품) — CSS 그라데이션·가상요소로 표현 */
.interior { position: absolute; inset: 0; z-index: 1; }

/* DEV: 다크/터미널 */
.dev-interior {
  background:
    linear-gradient(180deg, #0a0f1f 0%, #0e1530 70%, #0b1024 100%);
}
.dev-interior::before { /* 듀얼 모니터 글로우 */
  content: ""; position: absolute; left: 12%; right: 12%; top: 28%;
  height: 26%; border-radius: 4px;
  background: repeating-linear-gradient(0deg, #0f3, #0f3 1px, transparent 2px, transparent 6px);
  opacity: .22; filter: blur(.3px);
  box-shadow: 0 0 26px 6px rgba(45,212,191,.25);
  animation: scroll-code 4s linear infinite;
}
.dev-interior::after { /* 벽 화이트보드 낙서 */
  content: "▢→▢→◇"; position: absolute; right: 8%; top: 10%;
  font-size: 11px; color: #6ee7d8; opacity: .35; letter-spacing: 1px;
}
@keyframes scroll-code { from { background-position-y: 0; } to { background-position-y: 18px; } }

/* STUDIO: 밝고 컬러풀 */
.studio-interior {
  background:
    radial-gradient(120px 80px at 78% 18%, rgba(255,255,255,.18), transparent 70%),
    linear-gradient(180deg, #3a2a3f 0%, #2c2336 70%, #241c2d 100%);
}
.studio-interior::before { /* 무드보드 콜라주 */
  content: ""; position: absolute; left: 9%; top: 12%; width: 38%; height: 22%;
  border-radius: 4px;
  background:
    linear-gradient(90deg,#fb7185 0 33%, #fbbf24 33% 66%, #60a5fa 66% 100%);
  opacity: .5;
  box-shadow: 0 4px 10px #0006;
}
.studio-interior::after { /* 화분 */
  content: "🪴"; position: absolute; right: 9%; bottom: 18%; font-size: 18px; opacity: .85;
}

/* QA: 정돈된 화이트 톤 + 체크리스트 */
.qa-interior {
  background: linear-gradient(180deg, #20303a 0%, #1b2730 70%, #16212a 100%);
}
.qa-interior::before { /* 체크리스트 보드 */
  content: "☑ ☑ ☐"; position: absolute; left: 10%; top: 12%;
  font-size: 14px; color: #a7f3d0; opacity: .5; letter-spacing: 4px;
}
/* 신호등 */
.signal {
  position: absolute; right: 9%; top: 16%; z-index: 2;
  display: flex; flex-direction: column; gap: 5px;
  padding: 5px; border-radius: 6px; background: #0009;
}
.signal i { width: 13px; height: 13px; border-radius: 50%; opacity: .25; }
.signal i.red { background: #ef4444; }
.signal i.green { background: #22c55e; }
.signal.pass i.green { opacity: 1; box-shadow: 0 0 12px #22c55e; animation: blink .7s steps(1) 3; }
.signal.fail i.red   { opacity: 1; box-shadow: 0 0 12px #ef4444; animation: blink .7s steps(1) 3; }
@keyframes blink { 50% { opacity: .2; } }

/* 회의실 */
.meeting-interior {
  background:
    radial-gradient(300px 160px at 50% 30%, rgba(196,181,253,.10), transparent 70%),
    linear-gradient(180deg, #1c1830 0%, #181428 70%, #141022 100%);
  transition: background .6s;
}
#room-meeting.active .meeting-interior {
  background:
    radial-gradient(320px 180px at 50% 28%, rgba(196,181,253,.32), transparent 72%),
    linear-gradient(180deg, #241d3e 0%, #1d1733 70%, #181128 100%);
}
.table { /* 원탁 */
  position: absolute; left: 50%; bottom: 16%; transform: translateX(-50%);
  width: 56%; height: 16%; border-radius: 50%;
  background: linear-gradient(180deg, #4b4070, #2e2748);
  box-shadow: 0 6px 16px #0007, inset 0 2px 6px #ffffff14;
  opacity: .55; transition: opacity .5s;
}
#room-meeting.active .table { opacity: 1; }

/* 무대(졸라맨이 서는 바닥 영역) */
.stage {
  position: relative; z-index: 4; flex: 1;
  margin-top: auto;
}
.stage::after { /* 바닥선 */
  content: ""; position: absolute; left: 4%; right: 4%; bottom: 18%;
  height: 2px; background: linear-gradient(90deg, transparent, var(--line), transparent);
}
.meeting-stage::after { display: none; }

/* 상태 한 줄 슬롯 */
.slot {
  position: relative; z-index: 6;
  font-size: 12.5px; color: var(--muted);
  padding: 6px 10px; border-top: 1px solid var(--line);
  background: rgba(0,0,0,.28);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.meeting-header { color: var(--meet); font-weight: 600; }

/* ── 복도 ─────────────────────────────────── */
.hallway {
  position: relative; height: var(--hall-h); min-height: 36px;
  margin: 0 16px; border-radius: 8px;
  background: repeating-linear-gradient(90deg, #1a2138 0 28px, #161c30 28px 56px);
  border: 1px solid var(--line);
  overflow: hidden;
}
.hallway::before {
  content: "복도"; position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  font-size: 11px; color: #51597a; letter-spacing: 4px;
}

/* ── 하단 범례 ─────────────────────────────── */
.legend {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 8px 18px; height: 12vh; min-height: 40px;
  border-top: 1px solid var(--line); font-size: 12.5px; color: var(--muted);
  background: linear-gradient(0deg, rgba(255,255,255,.03), transparent);
}
.legend b { color: var(--ink); font-weight: 600; }
.legend .sep { color: #3a4566; opacity: .5; }
.swatch { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.sw-dev { background: var(--dev); } .sw-studio { background: var(--studio); } .sw-qa { background: var(--qa); }
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin: 0 3px; vertical-align: 0; }
.dot-green { background: #22c55e; } .dot-red { background: #ef4444; }

/* ── 졸라맨 (stick figure) ─────────────────── */
.figure {
  position: absolute; bottom: 18%;
  width: 46px; height: 96px;
  transition: left .9s ease, bottom .4s ease, opacity .4s;
  transform-origin: bottom center;
  z-index: 5;
}
.meeting-stage .figure, .hallway .figure { bottom: 8px; }
.figure svg { width: 100%; height: 100%; overflow: visible; display: block; }
.figure .body { stroke-width: 3.2; stroke-linecap: round; fill: none; }
.figure.pending .body { stroke-dasharray: 3 4; opacity: .55; }

/* 부서 색 */
.figure[data-dept="swdev"]   .body { stroke: var(--dev); }
.figure[data-dept="content"] .body { stroke: var(--studio); }
.figure[data-dept="qa"]      .body { stroke: var(--qa); }

/* 이름표 */
.figure .nametag {
  position: absolute; left: 50%; top: -16px; transform: translateX(-50%);
  font-size: 10.5px; white-space: nowrap; color: var(--ink);
  background: #0009; padding: 1px 6px; border-radius: 6px;
}
.figure .badge { /* 역할 아이콘 */
  position: absolute; left: 50%; top: -30px; transform: translateX(-50%);
  font-size: 12px;
}

/* 말풍선 */
.figure .bubble {
  position: absolute; left: 50%; top: -52px; transform: translateX(-50%) scale(.6);
  opacity: 0; transition: opacity .25s, transform .25s;
  font-size: 11px; white-space: nowrap;
  background: #fff; color: #16203a; font-weight: 600;
  padding: 3px 8px; border-radius: 10px;
  box-shadow: 0 3px 8px #0007;
}
.figure .bubble::after {
  content: ""; position: absolute; left: 50%; top: 100%; transform: translateX(-50%);
  border: 5px solid transparent; border-top-color: #fff;
}
.figure.say .bubble { opacity: 1; transform: translateX(-50%) scale(1); }
.figure .bubble.warn { background: #f6c453; }
.figure .bubble.bad  { background: #ef6a6a; color: #fff; }
.figure .bubble.good { background: #34d399; color: #06281c; }

/* 역할 기본 자세 — 머리/관절 그룹 */
.fig-head { transform-box: fill-box; transform-origin: center; }
.fig-arm-r, .fig-arm-l { transform-box: fill-box; transform-origin: top left; }

/* 포즈/동작 애니메이션 */
/* lead: 분해(클립보드 흔들기) */
.figure.act-lead .fig-arm-r { animation: wave-clip 1.1s ease-in-out infinite; }
@keyframes wave-clip { 0%,100% { transform: rotate(-8deg); } 50% { transform: rotate(18deg); } }

/* worker: 타이핑(양팔 빠른 까딱) */
.figure.act-worker .fig-arm-r { animation: type-r .28s ease-in-out infinite; }
.figure.act-worker .fig-arm-l { animation: type-l .28s ease-in-out infinite; }
@keyframes type-r { 0%,100% { transform: rotate(6deg); } 50% { transform: rotate(20deg); } }
@keyframes type-l { 0%,100% { transform: rotate(20deg); } 50% { transform: rotate(6deg); } }

/* reviewer: 돋보기 검사(상체 까딱 + 돋보기 흔들기) */
.figure.act-review .fig-head { animation: inspect 1.4s ease-in-out infinite; }
.figure.act-review .fig-arm-r { animation: glass 1.4s ease-in-out infinite; }
@keyframes inspect { 0%,100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(2px) rotate(4deg); } }
@keyframes glass { 0%,100% { transform: rotate(10deg); } 50% { transform: rotate(28deg); } }

/* queued: 대기 까딱 */
.figure.act-queued { animation: idle-bob 2.2s ease-in-out infinite; }
@keyframes idle-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }

/* idle: 커피/늘어짐 */
.figure.act-idle { animation: idle-lean 3.4s ease-in-out infinite; }
@keyframes idle-lean { 0%,100% { transform: rotate(-2deg); } 50% { transform: rotate(3deg); } }

/* pending_approval / await: 머리 위 ❗ 고정·정지 */
.figure.act-wait { animation: none; }

/* failed: 머리 숙임 */
.figure.act-failed { transform: rotate(0); }
.figure.act-failed .fig-head { transform: translateY(4px) rotate(14deg); }

/* done: 박수 1회(잠깐) */
.figure.act-clap .fig-arm-r { animation: clap-r .3s ease-in-out 3; }
.figure.act-clap .fig-arm-l { animation: clap-l .3s ease-in-out 3; }
@keyframes clap-r { 0%,100% { transform: rotate(40deg); } 50% { transform: rotate(70deg); } }
@keyframes clap-l { 0%,100% { transform: rotate(-40deg)translateX(0); } 50% { transform: rotate(-70deg); } }

/* 걷는 중(복도 이동) */
.figure.walking { animation: walk-bob .4s ease-in-out infinite; }
@keyframes walk-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }

/* 상태 마크(✔/✖) */
.figure .mark {
  position: absolute; left: 50%; bottom: 100%; transform: translateX(-50%);
  font-size: 16px; opacity: 0; transition: opacity .3s;
}
.figure.mark-ok .mark.ok   { opacity: 1; }
.figure.mark-bad .mark.bad { opacity: 1; }
.figure .alert {
  position: absolute; left: 50%; top: -30px; transform: translateX(-50%);
  font-size: 18px; color: #f6c453; opacity: 0;
  animation: none;
}
.figure.act-wait .alert { opacity: 1; animation: alert-bob 1s ease-in-out infinite; }
@keyframes alert-bob { 0%,100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(-3px); } }

/* 회의실 인계 화살표 */
.handoff-arrow {
  position: absolute; z-index: 6; font-size: 20px; color: var(--meet);
  top: 38%; left: 50%; transform: translateX(-50%);
  animation: arrow-slide 1.2s ease-in-out infinite;
}
@keyframes arrow-slide { 0%,100% { transform: translateX(-70%); opacity:.4; } 50% { transform: translateX(-30%); opacity:1; } }

/* ── 전체 idle 오버레이 ─────────────────────── */
.idle-overlay {
  position: fixed; inset: 0; z-index: 20;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(600px 400px at 50% 50%, rgba(15,19,32,.55), rgba(15,19,32,.82));
  pointer-events: none;
}
.idle-overlay[hidden] { display: none; }
.idle-card { text-align: center; animation: float 4s ease-in-out infinite; }
.idle-main { font-size: 20px; margin: 0 0 8px; }
.idle-sub  { font-size: 13px; color: var(--muted); margin: 0; }
@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

/* ── 반응형: 좁으면 2×2, 회의실은 전체폭 ─────── */
@media (max-width: 900px) {
  :root { --floor-h: auto; }
  html, body { overflow: auto; }
  .floor {
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: 240px;
    height: auto;
  }
  #room-meeting { grid-column: 1 / -1; }
}