/**
 * EIBE 회의실 예약 목업 — 임직원몰(EIBE Members) 디자인 토큰 계승
 * 그린 #2eac39 · 다크 #1e2640 · Pretendard · 라운드/소프트 섀도우
 * 프론트 목업 전용 (데이터는 meeting-rooms.js 인메모리)
 */
:root {
  --font-sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui,
    "Segoe UI", Roboto, "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif;

  --bg: #f4f6fa;
  --card: #ffffff;
  --line: #e5e8f0;
  --line-soft: #eef1f6;
  --text: #1b2438;
  --muted: #545c6a;
  --muted-2: #8a93a3;
  --primary: #2eac39;
  --primary-hover: #239832;
  --primary-soft: #e8f7ea;
  --dark: #1e2640;
  --danger: #cc406d;
  --warning: #d97706;
  --warning-soft: #fdf1e2;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-full: 999px;

  --shadow-sm: 0 2px 8px rgba(15, 27, 51, 0.06);
  --shadow-md: 0 4px 16px rgba(15, 27, 51, 0.08);
  --shadow-lg: 0 12px 40px rgba(15, 27, 51, 0.12);
  --shadow-xl: 0 20px 56px rgba(15, 27, 51, 0.18);

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 0.15s;
  --dur-1: 0.22s;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100%;
}

body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--text);
  font-size: 15px;
  line-height: 1.6;
  letter-spacing: -0.018em;
  word-break: keep-all;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  margin: 0;
  font-weight: 700;
  letter-spacing: -0.028em;
  line-height: 1.28;
}

.hidden { display: none !important; }

.brand-mark {
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--primary);
}
.brand-mark--link {
  text-decoration: none;
  color: inherit;
  transition: color var(--dur-fast) var(--ease-soft);
}
.brand-mark--link:hover { color: var(--dark); }

/* ===== 버튼 ===== */
.btn {
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  padding: 11px 16px;
  background: #fff;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  min-height: 44px;
  transition:
    transform var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-1) var(--ease-soft),
    background-color var(--dur-1) var(--ease-soft),
    border-color var(--dur-1) var(--ease-soft);
}
.btn:active:not(:disabled) { transform: scale(0.97); }
.btn-sm { min-height: 38px; padding: 8px 14px; font-size: 0.9rem; }
.btn-block { width: 100%; }
.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-hover); box-shadow: 0 4px 14px rgba(46, 172, 57, 0.28); }
.btn-ghost { border-color: var(--line); color: var(--text); }
.btn-ghost:hover { background: #f4f6fa; border-color: #d0d6e2; }

/* ===== 입력 ===== */
.field { display: flex; flex-direction: column; gap: 6px; }
.field__label { font-size: 0.82rem; font-weight: 600; color: var(--muted); }
.field-row { display: grid; grid-template-columns: 1fr 88px; gap: 12px; }
input {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: #fff;
  padding: 11px 13px;
  font: inherit;
  min-height: 44px;
  transition: border-color var(--dur-fast) var(--ease-soft), box-shadow var(--dur-fast) var(--ease-soft);
}
input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(46, 172, 57, 0.12);
}

/* ===== 앱 레이아웃 ===== */
.app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  /* 하단 Switch 런처와 약도가 겹치지 않게 */
  padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px));
}

@media (min-width: 921px) {
  .app {
    height: 100dvh;
    min-height: 100dvh;
    max-height: 100dvh;
    overflow: hidden;
    padding-bottom: 0;
  }
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 24px;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: saturate(1.2) blur(12px);
  border-bottom: 1px solid var(--line);
}
.topbar__brand { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.topbar__brand .brand-mark { font-size: 1.25rem; }
.topbar__crumb {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.topbar__crumb::after {
  content: "/";
  margin-left: 10px;
  color: var(--line);
  font-weight: 600;
}
.topbar__title { font-weight: 700; font-size: 1.05rem; }
.topbar__right { display: flex; align-items: center; gap: 12px; }

.dev-chip {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid #f0d4a8;
  background: var(--warning-soft);
  color: #9a5b0a;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1.4;
}

.user-chip {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 5px 12px 5px 6px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-sm);
}
.user-chip__avatar {
  width: 30px; height: 30px;
  display: grid; place-items: center;
  background: var(--dark); color: #fff;
  border-radius: 50%;
  font-weight: 700; font-size: 0.85rem;
}
.user-chip__name { font-weight: 600; font-size: 0.9rem; }

.layout {
  flex: 1;
  display: grid;
  /* PC: 약도·스케줄 열·높이 항상 고정 (미선택/선택 동일) */
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  grid-template-rows: minmax(0, 1fr);
  align-items: stretch;
  gap: 20px;
  padding: 24px;
  max-width: 1280px;
  width: 100%;
  margin: 0 auto;
  min-height: 0;
}
/* is-open: JS 마커용 — 레이아웃 크기·위치는 변하지 않음 */
.layout.is-open { }

/* ===== 패널 공통 ===== */
.floor-panel, .schedule-panel {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  padding: 22px;
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
  max-height: 100%;
  overflow: hidden;
  opacity: 1;
  transform: none;
}
/* 약도 — 스크롤바 없이 패널 높이에 맞춤 */
.floor-panel {
  position: relative;
  top: auto;
  align-self: stretch;
  width: 100%;
  max-width: none;
  margin-inline: 0;
  overflow: hidden;
  padding: 16px;
}
/* 스케줄 — 높이 고정 · overflow는 타임라인만 (현재시각 칩은 카드 밖 배경으로) */
.schedule-panel {
  align-self: stretch;
  overflow: visible;
}
.panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
  flex-shrink: 0;
}
.panel-head__title { font-size: 1.05rem; }
.panel-head__sub { margin: 2px 0 0; color: var(--muted); font-size: 0.82rem; }
.floor-badge {
  padding: 4px 10px;
  background: var(--dark);
  color: #fff;
  font-weight: 700;
  font-size: 0.76rem;
  border-radius: var(--radius-full);
}

/* ===== 약도(도면) ===== */
.floorplan {
  --gap: 10px;
  --plan-ink: rgba(30, 38, 64, 0.11);
  --plan-ink-soft: rgba(30, 38, 64, 0.055);
  --plan-green: rgba(46, 172, 57, 0.09);
  position: relative;
  display: grid;
  grid-template-columns: 1.15fr 1fr 1fr 1fr;
  /* 방 선택과 무관하게 약도 칸 비율 유지 */
  grid-template-rows: minmax(0, 1.35fr) minmax(0, 0.85fr) minmax(0, 1fr);
  gap: var(--gap);
  grid-template-areas:
    "big  top1 top2 top3"
    "big  hall hall hall"
    "lbot ent  amen amen";
  padding: 14px;
  flex: 1 1 0;
  min-height: 0;
  overflow: hidden;
  background:
    linear-gradient(165deg, #fbfcfe 0%, #f3f6fb 48%, #ebeef5 100%);
  border: 1px solid #d8dee9;
  border-radius: var(--radius-lg);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 0 0 1px rgba(255, 255, 255, 0.45),
    0 1px 2px rgba(15, 27, 51, 0.04),
    0 10px 28px rgba(15, 27, 51, 0.05);
}

/* 건축 도면 데코 (비상호작용) */
.floorplan__deco {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  border-radius: inherit;
  overflow: hidden;
}
/* 제도지 질감 · 약한 세로줄 */
.floorplan__paper {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(90% 70% at 8% 0%, rgba(255, 255, 255, 0.9), transparent 55%),
    radial-gradient(70% 60% at 100% 100%, rgba(46, 172, 57, 0.035), transparent 50%),
    repeating-linear-gradient(
      90deg,
      transparent 0 47px,
      rgba(30, 38, 64, 0.016) 47px 48px
    );
  opacity: 1;
}
/* 세밀 그리드 */
.floorplan__grid {
  position: absolute;
  inset: 12px;
  border-radius: 10px;
  background-image:
    linear-gradient(var(--plan-ink-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--plan-ink-soft) 1px, transparent 1px);
  background-size: 16px 16px;
  background-position: -1px -1px;
  opacity: 0.9;
  -webkit-mask-image: radial-gradient(120% 100% at 50% 42%, #000 55%, transparent 100%);
  mask-image: radial-gradient(120% 100% at 50% 42%, #000 55%, transparent 100%);
}
.floorplan__vignette {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 100% at 50% 40%, transparent 50%, rgba(15, 27, 51, 0.045) 100%);
}
/* 안쪽 제도 프레임 */
.floorplan__frame {
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(30, 38, 64, 0.1);
  border-radius: 10px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.55);
}
/* 코너 트림(재단선) */
.floorplan__trim {
  position: absolute;
  width: 14px;
  height: 14px;
  color: rgba(30, 38, 64, 0.28);
}
.floorplan__trim::before,
.floorplan__trim::after {
  content: "";
  position: absolute;
  background: currentColor;
}
.floorplan__trim::before { width: 14px; height: 1px; }
.floorplan__trim::after { width: 1px; height: 14px; }
.floorplan__trim--tl { top: 9px; left: 9px; }
.floorplan__trim--tl::before { top: 0; left: 0; }
.floorplan__trim--tl::after { top: 0; left: 0; }
.floorplan__trim--tr { top: 9px; right: 9px; }
.floorplan__trim--tr::before { top: 0; right: 0; }
.floorplan__trim--tr::after { top: 0; right: 0; }
.floorplan__trim--bl { bottom: 9px; left: 9px; }
.floorplan__trim--bl::before { bottom: 0; left: 0; }
.floorplan__trim--bl::after { bottom: 0; left: 0; }
.floorplan__trim--br { bottom: 9px; right: 9px; }
.floorplan__trim--br::before { bottom: 0; right: 0; }
.floorplan__trim--br::after { bottom: 0; right: 0; }
/* 레지스트레이션 십자 */
.floorplan__cross {
  position: absolute;
  width: 10px;
  height: 10px;
}
.floorplan__cross::before,
.floorplan__cross::after {
  content: "";
  position: absolute;
  background: rgba(46, 172, 57, 0.35);
}
.floorplan__cross::before {
  left: 50%; top: 0; bottom: 0;
  width: 1px; transform: translateX(-50%);
}
.floorplan__cross::after {
  top: 50%; left: 0; right: 0;
  height: 1px; transform: translateY(-50%);
}
.floorplan__cross--tl { top: 20px; left: 20px; }
.floorplan__cross--tr { top: 20px; right: 20px; }
.floorplan__cross--bl { bottom: 20px; left: 20px; }
.floorplan__cross--br { bottom: 20px; right: 20px; }
/* 방위 */
.floorplan__north {
  position: absolute;
  top: 18px;
  right: 34px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  color: rgba(30, 38, 64, 0.38);
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.12em;
}
.floorplan__north i {
  display: block;
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-bottom: 7px solid rgba(46, 172, 57, 0.55);
}
.floorplan__north b { font-weight: 800; }

.room {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 4px;
  padding: 12px 14px;
  background: linear-gradient(180deg, #ffffff, #fbfcff);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  cursor: pointer;
  font: inherit;
  text-align: left;
  color: var(--text);
  overflow: hidden;
  min-height: 0;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 1px 2px rgba(15, 27, 51, 0.05),
    0 6px 16px rgba(15, 27, 51, 0.06);
  transition:
    transform var(--dur-1) var(--ease-out),
    border-color var(--dur-1) var(--ease-soft),
    box-shadow var(--dur-1) var(--ease-soft);
}
.room:hover {
  transform: translateY(-3px);
  border-color: #cfe0d3;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 12px 28px rgba(15, 27, 51, 0.12);
}
.room:active { transform: translateY(-1px) scale(0.985); }
.room__name { font-weight: 700; font-size: 0.98rem; line-height: 1.25; letter-spacing: -0.01em; }

/* 회의중 — 말풍선이 카드 안을 채우며 오가는 연출 */
.room__chat {
  position: absolute;
  inset: 6px 10px 8px 8px;
  pointer-events: none;
  opacity: 0;
  overflow: hidden;
  transition: opacity 0.25s ease;
  z-index: 0;
}
.room[data-state="busy"] .room__chat { opacity: 1; }
.room[data-state="busy"] .room__name {
  position: relative;
  z-index: 1;
}
.room[data-state="busy"] .room__dot {
  z-index: 2;
}
.room__bubble {
  position: absolute;
  display: block;
  border-radius: 11px 11px 11px 4px;
  background: rgba(255, 255, 255, 0.92);
  border: 1.5px solid #f0d4a8;
  box-shadow: 0 2px 8px rgba(154, 91, 10, 0.1);
}
.room__bubble::before {
  content: "";
  position: absolute;
  left: 22%;
  right: 22%;
  top: 50%;
  height: 2px;
  border-radius: 999px;
  background: #e8c48a;
  transform: translateY(-50%);
  opacity: 0.65;
}
.room__bubble::after {
  content: "";
  position: absolute;
  left: 28%;
  right: 36%;
  top: calc(50% + 4px);
  height: 1.5px;
  border-radius: 999px;
  background: #f0d4a8;
  opacity: 0.45;
}
.room__bubble--a {
  left: 6%;
  top: 10%;
  width: 28px;
  height: 16px;
  animation: room-chat-bounce 2.6s ease-in-out infinite;
}
.room__bubble--b {
  right: 18%;
  top: 8%;
  width: 34px;
  height: 18px;
  border-radius: 11px 11px 4px 11px;
  background: #fff8ee;
  animation: room-chat-bounce 2.9s ease-in-out infinite 0.35s;
}
.room__bubble--c {
  left: 18%;
  top: 38%;
  width: 22px;
  height: 13px;
  animation: room-chat-drift 3.1s ease-in-out infinite 0.15s;
}
.room__bubble--d {
  right: 10%;
  top: 42%;
  width: 40px;
  height: 20px;
  border-radius: 12px 12px 4px 12px;
  background: #fffaf3;
  animation: room-chat-bounce 2.5s ease-in-out infinite 0.7s;
}
.room__bubble--e {
  left: 8%;
  bottom: 14%;
  width: 36px;
  height: 17px;
  animation: room-chat-drift 2.8s ease-in-out infinite 0.45s;
}
.room__bubble--f {
  right: 22%;
  bottom: 10%;
  width: 24px;
  height: 14px;
  border-radius: 10px 10px 4px 10px;
  background: #fff8ee;
  animation: room-chat-bounce 3.2s ease-in-out infinite 0.2s;
}
.room__bubble--g {
  left: 42%;
  top: 22%;
  width: 18px;
  height: 11px;
  opacity: 0.85;
  animation: room-chat-pop 2.4s ease-in-out infinite 0.9s;
}
@keyframes room-chat-bounce {
  0%, 100% { transform: translate(0, 3px) scale(0.88); opacity: 0.35; }
  28%      { transform: translate(3px, -5px) scale(1.06); opacity: 1; }
  55%      { transform: translate(-2px, 1px) scale(0.96); opacity: 0.7; }
  78%      { transform: translate(1px, -3px) scale(1.02); opacity: 0.9; }
}
@keyframes room-chat-drift {
  0%, 100% { transform: translate(-4px, 2px) scale(0.9); opacity: 0.3; }
  40%      { transform: translate(5px, -4px) scale(1.08); opacity: 1; }
  70%      { transform: translate(0, 1px) scale(0.95); opacity: 0.55; }
}
@keyframes room-chat-pop {
  0%, 100% { transform: translate(0, 0) scale(0.7); opacity: 0.2; }
  50%      { transform: translate(2px, -6px) scale(1.15); opacity: 1; }
}

.room[data-state="busy"] {
  border-color: #f0d4a8;
  background: linear-gradient(180deg, #fffdf9, #fff8ee);
}
.room[data-state="busy"]:hover {
  border-color: #e8c48a;
}

.room__dot {
  position: absolute;
  top: 13px; right: 13px;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 0 0 4px var(--primary-soft);
}
.room__dot::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1px solid var(--primary);
  opacity: 0;
}
.room[data-state="busy"] .room__dot { background: var(--warning); box-shadow: 0 0 0 4px var(--warning-soft); }
.room[data-state="busy"] .room__dot::after {
  border-color: var(--warning);
  animation: dot-ping 1.8s var(--ease-out) infinite;
}
@keyframes dot-ping {
  0% { opacity: 0.7; transform: scale(0.9); }
  70%, 100% { opacity: 0; transform: scale(1.9); }
}

/* 선택됨 — 링만 강조 (약도 레이아웃이 들썩이지 않도록 위치 고정) */
.room.is-selected {
  border-color: transparent;
  background: linear-gradient(180deg, #ffffff, #fbfdff);
  box-shadow:
    0 0 0 2px var(--dark),
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 14px 32px rgba(15, 27, 51, 0.16);
  transform: none;
}
.room.is-selected:hover {
  transform: none;
}
/* 회의중 카드는 선택해도 회의중 톤 유지 */
.room[data-state="busy"].is-selected,
.room[data-state="busy"].is-selected:hover {
  border-color: #e8c48a;
  background: linear-gradient(180deg, #fffdf9, #fff8ee);
  box-shadow:
    0 0 0 2px #d97706,
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    0 14px 28px rgba(154, 91, 10, 0.14);
}

.room--big { grid-area: big; }
.room--top1 { grid-area: top1; }
.room--top2 { grid-area: top2; }
.room--top3 { grid-area: top3; }
.room--left-bottom { grid-area: lbot; }

/* 복도 + 화살표 — 네비 동선 (레일 먼저 그려진 뒤 화살표 출발) */
.hallway {
  /* JS(syncHallwayRailOrigin)가 입구 중앙으로 덮어씀 — 아래는 측정 전 폴백 */
  --rail-x: calc(16.666% - 3px);
  --rail-drop: calc(100% + var(--gap) + 48px);
  --rail-dur: 5.2s;
  --rail-ease: cubic-bezier(0.4, 0.0, 0.2, 1);
  --draw-dur: 0.14s;
  --draw-gap: 0.04s;
  --draw-ease: cubic-bezier(0.2, 0.9, 0.3, 1);
  --run-wait: 0.38s; /* 레일 드로우 직후 화살표 출발 */
  grid-area: hall;
  position: relative;
  z-index: 1;
  border-radius: var(--radius-md);
  overflow: visible;
}
.hallway[data-to="room4"],
.hallway[data-to="room5"] {
  --run-wait: 0.52s; /* V + H + branch */
}
.hallway__label {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--muted-2);
  letter-spacing: 0.14em;
  z-index: 2;
  pointer-events: none;
}
.hallway__line {
  position: absolute;
  background: #9aa3b5;
  border-radius: 999px;
  overflow: visible; /* 끝 화살표(::after)가 잘리지 않도록 */
}
.hallway__line--h {
  left: var(--rail-x);
  right: 10%;
  top: 50%;
  height: 2px;
  transform: translateY(-50%);
}
/* 선택 목적지에 맞춰 가로 레일 길이 조절 (전환 애니메이션 없음 — clip-path로 그림) */
.hallway[data-to="room3"] .hallway__line--h {
  right: auto;
  width: 0;
  opacity: 0;
}
.hallway[data-to="room4"] .hallway__line--h {
  right: auto;
  width: calc(50% - var(--rail-x));
}
.hallway[data-to="room5"] .hallway__line--h {
  right: auto;
  width: calc(83% - var(--rail-x));
}
/* 1번 — 입구에서 살짝 올라온 뒤 좌회전 (긴 세로 레일 없음) */
.hallway[data-to="room1"] {
  --room1-turn: calc(100% + 18px); /* 입구 바로 위보다 살짝만 위 */
}
.hallway[data-to="room1"] .hallway__line--v {
  top: var(--room1-turn);
  height: calc(var(--rail-drop) - var(--room1-turn));
}
.hallway[data-to="room1"] .hallway__line--h {
  left: 2%;
  right: auto;
  top: var(--room1-turn);
  width: calc(var(--rail-x) - 2%);
  transform: translateY(-50%);
  overflow: visible;
}
.hallway[data-to="room1"] .hallway__line--h::after {
  right: auto;
  left: 0;
  transform: translate(-70%, -50%);
  border-left: none;
  border-right: 7px solid #7f899c;
  border-top: 4.5px solid transparent;
  border-bottom: 4.5px solid transparent;
}
.hallway[data-to="room1"] .hallway__branch {
  opacity: 0;
}
.hallway[data-to="room2"] .hallway__line--h {
  left: 0;
  right: auto;
  width: var(--rail-x);
}
/* 2번 — 가로 레일 왼쪽 끝 화살표 */
.hallway[data-to="room2"] .hallway__line--h::after {
  right: auto;
  left: 0;
  transform: translate(-70%, -50%);
  border-left: none;
  border-right: 7px solid #7f899c;
  border-top: 4.5px solid transparent;
  border-bottom: 4.5px solid transparent;
}
/* 3·4·5 — 마지막 구간은 분기 레일(위쪽)이므로 가로 끝 화살표 숨김 */
.hallway[data-to="room3"] .hallway__line--h::after,
.hallway[data-to="room4"] .hallway__line--h::after,
.hallway[data-to="room5"] .hallway__line--h::after {
  display: none;
}

/* 목적지로 꺾이는 분기 레일 — 복도 가장자리(방 앞)까지만 */
.hallway__branch {
  position: absolute;
  left: var(--nav-x, var(--rail-x));
  width: 2px;
  background: #9aa3b5;
  border-radius: 999px;
  transform: translateX(-50%);
  opacity: 0;
  pointer-events: none;
  z-index: 2;
}
.hallway[data-to="room3"] .hallway__branch,
.hallway[data-to="room4"] .hallway__branch,
.hallway[data-to="room5"] .hallway__branch {
  /* 복도 중앙 → 복도 상단(회의실 카드 앞) */
  top: 6%;
  height: 44%;
  opacity: 1;
}
/* 3·4·5 — 분기 레일 상단 끝 화살표 */
.hallway__branch::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -70%);
  border-bottom: 7px solid #7f899c;
  border-left: 4.5px solid transparent;
  border-right: 4.5px solid transparent;
  opacity: 0;
}
.hallway[data-to="room3"] .hallway__branch::after,
.hallway[data-to="room4"] .hallway__branch::after,
.hallway[data-to="room5"] .hallway__branch::after {
  opacity: 1;
}
.hallway[data-to="room2"] .hallway__branch {
  opacity: 0;
}
.hallway__line--v {
  left: var(--rail-x);
  top: 50%;
  width: 2px;
  /* 복도 중앙 → 입구 중앙 */
  height: calc(var(--rail-drop) - 50%);
  transform: translateX(-50%);
}

/* ----- 레일 쫘라락 드로우 (입구 → 목적지 순) ----- */
@keyframes rail-draw-up {
  from { clip-path: inset(100% 0 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}
@keyframes rail-draw-right {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}
@keyframes rail-draw-left {
  from { clip-path: inset(0 0 0 100%); }
  to   { clip-path: inset(0 0 0 0); }
}

/* 공통: 세로 레일(입구→위) 먼저 */
.hallway[data-to="room1"] .hallway__line--v,
.hallway[data-to="room2"] .hallway__line--v,
.hallway[data-to="room3"] .hallway__line--v,
.hallway[data-to="room4"] .hallway__line--v,
.hallway[data-to="room5"] .hallway__line--v {
  animation: rail-draw-up var(--draw-dur) var(--draw-ease) both;
}

/* 1·2: 가로 왼쪽 */
.hallway[data-to="room1"] .hallway__line--h,
.hallway[data-to="room2"] .hallway__line--h {
  animation: rail-draw-left var(--draw-dur) var(--draw-ease) both;
  animation-delay: calc(var(--draw-dur) + var(--draw-gap));
}

/* 4·5: 가로 오른쪽 */
.hallway[data-to="room4"] .hallway__line--h,
.hallway[data-to="room5"] .hallway__line--h {
  animation: rail-draw-right var(--draw-dur) var(--draw-ease) both;
  animation-delay: calc(var(--draw-dur) + var(--draw-gap));
}

/* 3·4·5: 분기 위로 */
.hallway[data-to="room3"] .hallway__branch {
  animation: rail-draw-up var(--draw-dur) var(--draw-ease) both;
  animation-delay: calc(var(--draw-dur) + var(--draw-gap));
}
.hallway[data-to="room4"] .hallway__branch,
.hallway[data-to="room5"] .hallway__branch {
  animation: rail-draw-up var(--draw-dur) var(--draw-ease) both;
  animation-delay: calc(var(--draw-dur) * 2 + var(--draw-gap) * 2);
}

/* 레일 그린 뒤 화살표·펄스 출발 */
.hallway[data-to="room1"] .hallway__runner,
.hallway[data-to="room2"] .hallway__runner,
.hallway[data-to="room3"] .hallway__runner,
.hallway[data-to="room4"] .hallway__runner,
.hallway[data-to="room5"] .hallway__runner,
.hallway[data-to="room1"] .hallway__pulse,
.hallway[data-to="room2"] .hallway__pulse,
.hallway[data-to="room3"] .hallway__pulse,
.hallway[data-to="room4"] .hallway__pulse,
.hallway[data-to="room5"] .hallway__pulse {
  animation-delay: var(--run-wait);
}

.hallway__line--h::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translate(70%, -50%);
  border-left: 7px solid #7f899c;
  border-top: 4.5px solid transparent;
  border-bottom: 4.5px solid transparent;
  z-index: 2;
}

/* 입구 중앙에서 출발할 때 한 번 퍼지는 링 */
.hallway__pulse {
  position: absolute;
  left: var(--rail-x);
  top: var(--rail-drop);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1.5px solid rgba(46, 172, 57, 0.45);
  transform: translate(-50%, -50%) scale(0.4);
  opacity: 0;
  pointer-events: none;
  z-index: 2;
  animation: rail-spawn var(--rail-dur) var(--rail-ease) infinite;
}
@keyframes rail-spawn {
  0%, 4%  { opacity: 0; transform: translate(-50%, -50%) scale(0.35); }
  10%     { opacity: 0.7; transform: translate(-50%, -50%) scale(1.15); }
  18%     { opacity: 0; transform: translate(-50%, -50%) scale(1.9); }
  100%    { opacity: 0; transform: translate(-50%, -50%) scale(1.9); }
}

/* 네비 마커 — 글래스 퍽 + 목적지별 경로 */
.hallway__runner {
  position: absolute;
  left: var(--rail-x);
  top: var(--rail-drop);
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(180deg, #ffffff 0%, #f3f7f4 100%);
  border: 1.5px solid rgba(46, 172, 57, 0.75);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 2px 6px rgba(15, 27, 51, 0.12);
  opacity: 0;
  z-index: 3;
  animation: rail-run-cruise var(--rail-dur) var(--rail-ease) infinite;
  will-change: left, top, transform, opacity;
}
.hallway[data-to="room1"] .hallway__runner { animation-name: rail-run-to-room1; }
.hallway[data-to="room2"] .hallway__runner { animation-name: rail-run-to-room2; }
.hallway[data-to="room3"] .hallway__runner { animation-name: rail-run-to-room3; }
.hallway[data-to="room4"] .hallway__runner { animation-name: rail-run-to-room4; }
.hallway[data-to="room5"] .hallway__runner { animation-name: rail-run-to-room5; }

.hallway__runner::before {
  content: "";
  width: 0;
  height: 0;
  border-left: 6px solid var(--primary);
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  margin-left: 1px;
}

/* 기본 순항 — 입구 → 복도 끝까지 */
@keyframes rail-run-cruise {
  0% {
    left: var(--rail-x); top: var(--rail-drop); opacity: 0;
    transform: translate(-50%, -50%) rotate(-90deg) scale(0.45);
  }
  6%  { opacity: 1; transform: translate(-50%, -50%) rotate(-90deg) scale(1.06); }
  16% { left: var(--rail-x); top: var(--rail-drop); transform: translate(-50%, -50%) rotate(-90deg) scale(1); }
  34% { left: var(--rail-x); top: 50%; transform: translate(-50%, -50%) rotate(-90deg) scale(1); }
  40% { left: calc(var(--rail-x) + 3%); top: 50%; transform: translate(-50%, -50%) rotate(0deg) scale(1); }
  90% { left: 86%; top: 50%; opacity: 1; transform: translate(-50%, -50%) rotate(0deg) scale(1); }
  100%{ left: 92%; top: 50%; opacity: 0; transform: translate(-50%, -50%) rotate(0deg) scale(0.75); }
}

/* 3번 — 입구 → 교차점 → 방 앞에서 정지 */
@keyframes rail-run-to-room3 {
  0% {
    left: var(--rail-x); top: var(--rail-drop); opacity: 0;
    transform: translate(-50%, -50%) rotate(-90deg) scale(0.45);
  }
  6%  { opacity: 1; transform: translate(-50%, -50%) rotate(-90deg) scale(1.06); }
  16% { left: var(--rail-x); top: var(--rail-drop); transform: translate(-50%, -50%) rotate(-90deg) scale(1); }
  36% { left: var(--rail-x); top: 50%; transform: translate(-50%, -50%) rotate(-90deg) scale(1); }
  58% { left: var(--rail-x); top: 14%; opacity: 1; transform: translate(-50%, -50%) rotate(-90deg) scale(1); }
  80% { left: var(--rail-x); top: 8%; opacity: 1; transform: translate(-50%, -50%) rotate(-90deg) scale(1); }
  100%{ left: var(--rail-x); top: 4%; opacity: 0; transform: translate(-50%, -50%) rotate(-90deg) scale(0.75); }
}

/* 4번 — 입구 → 복도 중앙 → 방 앞에서 정지 */
@keyframes rail-run-to-room4 {
  0% {
    left: var(--rail-x); top: var(--rail-drop); opacity: 0;
    transform: translate(-50%, -50%) rotate(-90deg) scale(0.45);
  }
  6%  { opacity: 1; transform: translate(-50%, -50%) rotate(-90deg) scale(1.06); }
  14% { left: var(--rail-x); top: var(--rail-drop); transform: translate(-50%, -50%) rotate(-90deg) scale(1); }
  30% { left: var(--rail-x); top: 50%; transform: translate(-50%, -50%) rotate(-90deg) scale(1); }
  36% { left: calc(var(--rail-x) + 2%); top: 50%; transform: translate(-50%, -50%) rotate(0deg) scale(1); }
  52% { left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(0deg) scale(1); }
  58% { left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-90deg) scale(1.04); }
  80% { left: 50%; top: 10%; opacity: 1; transform: translate(-50%, -50%) rotate(-90deg) scale(1); }
  100%{ left: 50%; top: 5%; opacity: 0; transform: translate(-50%, -50%) rotate(-90deg) scale(0.75); }
}

/* 5번 — 입구 → 복도 우측 → 방 앞에서 정지 */
@keyframes rail-run-to-room5 {
  0% {
    left: var(--rail-x); top: var(--rail-drop); opacity: 0;
    transform: translate(-50%, -50%) rotate(-90deg) scale(0.45);
  }
  6%  { opacity: 1; transform: translate(-50%, -50%) rotate(-90deg) scale(1.06); }
  14% { left: var(--rail-x); top: var(--rail-drop); transform: translate(-50%, -50%) rotate(-90deg) scale(1); }
  28% { left: var(--rail-x); top: 50%; transform: translate(-50%, -50%) rotate(-90deg) scale(1); }
  34% { left: calc(var(--rail-x) + 2%); top: 50%; transform: translate(-50%, -50%) rotate(0deg) scale(1); }
  52% { left: 83%; top: 50%; transform: translate(-50%, -50%) rotate(0deg) scale(1); }
  58% { left: 83%; top: 50%; transform: translate(-50%, -50%) rotate(-90deg) scale(1.04); }
  80% { left: 83%; top: 10%; opacity: 1; transform: translate(-50%, -50%) rotate(-90deg) scale(1); }
  100%{ left: 83%; top: 5%; opacity: 0; transform: translate(-50%, -50%) rotate(-90deg) scale(0.75); }
}

/* 2번 대 회의실 — 입구 → 복도 왼쪽 끝 */
@keyframes rail-run-to-room2 {
  0% {
    left: var(--rail-x); top: var(--rail-drop); opacity: 0;
    transform: translate(-50%, -50%) rotate(-90deg) scale(0.45);
  }
  6%  { opacity: 1; transform: translate(-50%, -50%) rotate(-90deg) scale(1.06); }
  16% { left: var(--rail-x); top: var(--rail-drop); transform: translate(-50%, -50%) rotate(-90deg) scale(1); }
  32% { left: var(--rail-x); top: 50%; transform: translate(-50%, -50%) rotate(-90deg) scale(1); }
  40% { left: var(--rail-x); top: 50%; transform: translate(-50%, -50%) rotate(180deg) scale(1.04); }
  74% { left: 2%; top: 50%; opacity: 1; transform: translate(-50%, -50%) rotate(180deg) scale(1); }
  100%{ left: -2%; top: 50%; opacity: 0; transform: translate(-50%, -50%) rotate(180deg) scale(0.75); }
}

/* 1번 — 입구 → 살짝 상승 → 좌회전 */
@keyframes rail-run-to-room1 {
  0% {
    left: var(--rail-x); top: var(--rail-drop); opacity: 0;
    transform: translate(-50%, -50%) rotate(-90deg) scale(0.45);
  }
  8%  { opacity: 1; transform: translate(-50%, -50%) rotate(-90deg) scale(1.06); }
  16% { left: var(--rail-x); top: var(--rail-drop); transform: translate(-50%, -50%) rotate(-90deg) scale(1); }
  34% { left: var(--rail-x); top: var(--room1-turn, calc(100% + 18px)); transform: translate(-50%, -50%) rotate(-90deg) scale(1); }
  42% { left: var(--rail-x); top: var(--room1-turn, calc(100% + 18px)); transform: translate(-50%, -50%) rotate(180deg) scale(1.04); }
  78% { left: 6%; top: var(--room1-turn, calc(100% + 18px)); opacity: 1; transform: translate(-50%, -50%) rotate(180deg) scale(1); }
  100%{ left: 2%; top: var(--room1-turn, calc(100% + 18px)); opacity: 0; transform: translate(-50%, -50%) rotate(180deg) scale(0.75); }
}

/* 비예약 공간 */
.facility {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  gap: 6px;
  grid-auto-flow: row;
  border-radius: var(--radius-md);
  border: 1.5px dashed #cdd4e2;
  background:
    repeating-linear-gradient(45deg, rgba(245, 247, 251, 0.9), rgba(245, 247, 251, 0.9) 9px, rgba(233, 237, 245, 0.9) 9px, rgba(233, 237, 245, 0.9) 18px);
  color: var(--muted-2);
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.01em;
}
.facility__ico { width: 20px; height: 20px; opacity: 0.85; }
.facility--entrance {
  grid-area: ent;
  grid-auto-flow: row;
  gap: 4px;
  align-self: end;          /* 셀 아래쪽에 배치 */
  height: 58px;             /* 셀 높이의 약 절반 → 가로 직사각형 */
  border-style: solid;
  border-color: #dbe0ec;
  background: linear-gradient(180deg, #f3f5fa, #eef1f7);
  color: var(--muted);
}
.facility--amenity {
  grid-area: amen;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 34px;
}
.facility__cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.facility__div {
  width: 1px;
  height: 30px;
  background: linear-gradient(#cdd4e2, transparent);
  background: repeating-linear-gradient(#cdd4e2 0 3px, transparent 3px 7px);
}

/* 색상 범례 + 도면 메타 플레이트 */
.legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 14px;
  margin-top: 8px;
  flex-shrink: 0;
}
.legend__status {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 18px;
}
.legend__item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--muted);
}
.legend__swatch { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.legend__swatch--free { background: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.legend__swatch--busy { background: var(--warning); box-shadow: 0 0 0 3px var(--warning-soft); }
.legend__plate {
  min-width: 148px;
  padding: 7px 9px 6px;
  border: 1px solid rgba(30, 38, 64, 0.12);
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.legend__plate-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
  line-height: 1.1;
}
.legend__plate-row b {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--primary);
}
.legend__plate-row em {
  font-style: normal;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: rgba(30, 38, 64, 0.45);
}
.legend__plate-row--meta {
  justify-content: space-between;
  gap: 8px;
  padding-top: 3px;
  border-top: 1px solid rgba(30, 38, 64, 0.08);
  font-size: 0.52rem;
  font-weight: 650;
  letter-spacing: 0.06em;
  color: rgba(30, 38, 64, 0.4);
  font-variant-numeric: tabular-nums;
}
/* 선택 회의실 상세 — 처음부터 자리 확보(선택해도 약도 크기 불변) */
.room-detail {
  margin-top: 8px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: linear-gradient(180deg, #ffffff, #f8fafc);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 4px 14px rgba(15, 27, 51, 0.05);
  flex: 0 0 168px;
  height: 168px;
  max-height: 168px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.room-detail__hint {
  margin: auto 0;
  font-size: 0.84rem;
  color: var(--muted);
  font-weight: 600;
  line-height: 1.45;
}
.room-detail__hint.hidden { display: none; }
.room-detail__body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.room-detail__body.hidden { display: none; }
.room-detail__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.room-detail__name {
  display: block;
  font-size: 0.98rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.room-detail__cap {
  margin: 4px 0 0;
  font-size: 0.82rem;
  color: var(--muted);
  font-weight: 600;
}
.room-detail__badge {
  flex: none;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 800;
  background: var(--primary-soft);
  color: #1f7a28;
  border: 1px solid #b7e4bc;
}
.room-detail__badge[data-state="busy"] {
  background: var(--warning-soft);
  color: #9a5b0a;
  border-color: #f0d4a8;
}
.room-detail__meter {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
}
.room-detail__meter-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--muted);
}
.room-detail__meter-row b {
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.room-detail__bar {
  display: block;
  height: 7px;
  border-radius: 999px;
  background: #e9edf5;
  overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(15, 27, 51, 0.08);
}
.room-detail__fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--primary), #4ade80);
  transition: width 0.45s var(--ease-out);
}
.room-detail__fill.is-mid { background: linear-gradient(90deg, var(--warning), #fbbf24); }
.room-detail__fill.is-full { background: linear-gradient(90deg, var(--danger), #f472b6); }
.room-detail__amenities {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.room-detail__amenities li {
  padding: 4px 10px;
  border-radius: 999px;
  background: #f1f4f9;
  border: 1px solid #e2e8f0;
  color: var(--text);
  font-size: 0.74rem;
  font-weight: 700;
}

/* 상단바 · 내 예약 배지 */
.mine-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 13px;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--primary-hover);
  background: var(--primary-soft);
  border: 1px solid #cfe9d3;
  border-radius: var(--radius-full);
  white-space: nowrap;
}
.mine-badge b {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  display: inline-block;
  transition: transform var(--dur-1) var(--ease-out);
}
.mine-badge b.is-bump { transform: scale(1.25); }
.mine-badge__dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 0 0 3px rgba(46, 172, 57, 0.16);
}

/* ===== 스케줄 패널 ===== */
.schedule-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--muted);
  gap: 6px;
  padding: 40px 20px;
  min-height: 0;
}
.schedule-empty__icon {
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  margin-bottom: 10px;
  border-radius: 1rem;
  background: #f1f5f9;
  color: #64748b;
  box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.35);
}
.schedule-empty__svg {
  width: 1.5rem;
  height: 1.5rem;
  display: block;
}
.schedule-empty h3 { font-size: 1.1rem; color: var(--text); }
.schedule-empty p { margin: 0; font-size: 0.9rem; }

.schedule {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  height: 100%;
  overflow: visible;
  animation: fade-in 0.35s var(--ease-out) both;
}
@keyframes fade-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.schedule__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
  flex-shrink: 0;
}
.schedule__head-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}
.schedule__room { font-size: 1.25rem; }
.schedule__meta { margin: 4px 0 0; color: var(--muted); font-size: 0.86rem; }

@keyframes now-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.65; transform: scale(0.88); }
}

.date-nav { display: flex; align-items: center; gap: 4px; }
.date-nav__btn {
  width: 34px; height: 34px;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
  color: var(--muted);
  transition: background-color var(--dur-fast), border-color var(--dur-fast);
}
.date-nav__btn:hover { background: #f4f6fa; border-color: #d0d6e2; }
.date-nav__label { min-width: 84px; text-align: center; font-weight: 600; font-size: 0.9rem; }

/* 타임라인 셸 — 여분 padding 없이, 칩은 카드 밖 배경으로 */
.schedule__timeline-shell {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: visible;
}
.schedule__timeline {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 4px 8px 0;
  border-radius: inherit;
}

/* 현재시각 — 슬롯 가로선 + 말풍선은 패널 오른쪽 밖(페이지 배경) */
.now-line {
  position: absolute;
  left: 0;
  right: 0;
  height: 0;
  pointer-events: none;
  z-index: 6;
  transition: top 0.35s var(--ease-soft), opacity 0.2s ease;
}
.now-line.is-offscreen {
  opacity: 0;
}
.now-line::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--dark) 12%, var(--dark));
  opacity: 0.45;
  transform: translateY(-50%);
}
.now-line__label {
  position: absolute;
  left: 100%;
  top: 0;
  margin-left: 12px;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  background: var(--dark);
  color: #fff;
  border-radius: var(--radius-full);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  box-shadow: 0 6px 18px rgba(30, 38, 64, 0.28);
}
.now-line__label::before {
  content: "";
  position: absolute;
  left: -5px;
  top: 50%;
  transform: translateY(-50%);
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-right: 6px solid var(--dark);
}
.now-line__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.35);
  animation: now-pulse 1.6s ease-in-out infinite;
}
/* 방 선택·날짜 이동 시 슬롯이 순차적으로 부드럽게 등장 (iOS 스프링 느낌) */
@keyframes slot-in {
  from { opacity: 0; transform: translateY(12px) scale(0.985); }
  to { opacity: 1; transform: none; }
}
.schedule__timeline.is-fresh .slot {
  animation: slot-in 0.5s var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * 28ms);
}
.slot {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  min-height: 46px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: #fff;
  overflow: hidden;
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast), transform var(--dur-fast);
}
.slot__time {
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--text);
  width: 108px;
  flex: none;
  font-variant-numeric: tabular-nums;
}
.slot__body { flex: 1; min-width: 0; }
.slot__title-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}
.slot__title {
  font-weight: 600;
  font-size: 0.92rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.slot__owner {
  flex: none;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
}
.slot__owner::before {
  content: "·";
  margin-right: 8px;
  color: var(--muted-2);
  font-weight: 500;
}

.slot--free { cursor: pointer; border-style: dashed; border-color: #cdd8cf; }
.slot--free:hover {
  border-color: var(--primary);
  border-style: solid;
  box-shadow: 0 6px 18px rgba(46, 172, 57, 0.14);
  transform: translateY(-1px);
}
.slot--free .slot__title { color: var(--muted-2); font-weight: 500; }
.slot--free .slot__cta {
  font-weight: 700;
  font-size: 0.84rem;
  color: var(--primary);
}
.slot--booked {
  background: #fbfcfe;
  align-items: center;
  min-height: calc(var(--rows, 1) * 46px + (var(--rows, 1) - 1) * 8px);
}
.slot--booked .slot__time { align-self: flex-start; padding-top: 1px; }
.slot--booked .slot__tag {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--warning);
  background: var(--warning-soft);
  padding: 3px 9px;
  border-radius: var(--radius-full);
  flex: none;
}
.slot--mine { border-color: var(--primary); background: var(--primary-soft); }
.slot--mine .slot__tag { color: var(--primary); background: #fff; }
.slot--live {
  border-color: #e8c48a;
  background: linear-gradient(180deg, #fffdf9, #fff8ee);
}
.slot--live .slot__tag {
  color: #9a5b0a;
  background: #fff;
  border: 1px solid #f0d4a8;
}
.slot--live.slot--mine {
  border-color: var(--primary);
  background: var(--primary-soft);
}
.slot--live.slot--mine .slot__tag {
  color: var(--primary);
  border-color: #bfe4c5;
}

/* 드래그 범위 선택 하이라이트 */
.timeline--selecting { cursor: grabbing; }
.timeline--selecting .slot { user-select: none; }
.slot.is-selecting {
  border-style: solid;
  border-color: var(--primary);
  background: var(--primary-soft);
  box-shadow: 0 6px 18px rgba(46, 172, 57, 0.18);
  transform: none;
}
.slot.is-selecting .slot__title { color: var(--primary); font-weight: 700; }
.slot.is-selecting .slot__cta { opacity: 0; }

/* ===== 모달 ===== */
.modal { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 20px; }
.modal__backdrop { position: absolute; inset: 0; background: rgba(15, 23, 42, 0.42); backdrop-filter: blur(2px); }
.modal__card {
  position: relative;
  width: min(420px, 100%);
  background: #fff;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  padding: 26px 24px;
  animation: card-in 0.32s var(--ease-out) both;
}
.modal__title { font-size: 1.25rem; }
.modal__sub { margin: 6px 0 18px; color: var(--muted); font-size: 0.88rem; }
.modal__form { display: flex; flex-direction: column; gap: 14px; }

/* 시간대 선택 (시작 → 종료) */
.time-range { display: flex; align-items: center; gap: 8px; }
.time-range__sel {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: #fff;
  padding: 11px 12px;
  font: inherit;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  min-height: 44px;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-soft), box-shadow var(--dur-fast) var(--ease-soft);
}
.time-range__sel:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(46, 172, 57, 0.12);
}
.time-range__arrow { color: var(--muted); font-weight: 700; flex: none; }
.time-range__dur {
  flex: none;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--primary);
  background: var(--primary-soft);
  padding: 6px 10px;
  border-radius: var(--radius-full);
  font-variant-numeric: tabular-nums;
}
.modal__actions { display: flex; gap: 10px; margin-top: auto; padding-top: 8px; }
.modal__actions .btn { flex: 1; }

/* 이메일로 공유 — 직원 검색 */
.mail-notify {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 14px;
  border-top: 1px solid var(--line-soft);
}
.mail-notify__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.mail-notify__opt { font-weight: 500; color: var(--muted-2); font-size: 0.76rem; }
.mail-notify__hint {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--muted-2);
}
.mail-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 0;
}
.mail-chips:empty { display: none; }
.mail-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 5px 8px 5px 10px;
  border-radius: 999px;
  background: var(--primary-soft);
  border: 1px solid #bfe4c5;
  color: var(--primary-hover);
  font-size: 0.8rem;
  font-weight: 700;
}
.mail-chip__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mail-chip__x {
  flex: none;
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.7);
  color: var(--muted);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}
.mail-chip__x:hover { color: var(--danger); }
.mail-search { position: relative; }
.mail-search__input {
  width: 100%;
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: #fff;
  font: inherit;
  font-size: 0.92rem;
}
.mail-search__input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(46, 172, 57, 0.12);
}
.mail-search__results {
  --mail-row: 52px; /* .mail-search__item 한 줄 대략 높이 */
  position: absolute;
  left: 0;
  right: 0;
  /* 모달 하단 필드 → 위로 펼침 (화면 밖으로 안 나가게) */
  top: auto;
  bottom: calc(100% + 4px);
  z-index: 8;
  margin: 0;
  padding: 6px;
  list-style: none;
  max-height: calc(var(--mail-row) * 3 + 12px);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: 0 -8px 24px rgba(15, 27, 51, 0.12);
}
.mail-search__results[hidden] { display: none; }
.mail-search__item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  width: 100%;
  min-height: var(--mail-row, 52px);
  box-sizing: border-box;
  padding: 8px 12px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  text-align: left;
  font: inherit;
  cursor: pointer;
}
.mail-search__item:hover,
.mail-search__item.is-active {
  background: var(--primary-soft);
}
.mail-search__item-name {
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--text);
}
.mail-search__item-email {
  font-size: 0.78rem;
  color: var(--muted);
}
.mail-search__empty {
  padding: 12px;
  font-size: 0.84rem;
  color: var(--muted);
  text-align: center;
}

/* ===== 토스트 ===== */
.toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%) translateY(20px);
  background: var(--dark);
  color: #fff;
  padding: 12px 20px;
  border-radius: var(--radius-full);
  font-weight: 600;
  font-size: 0.9rem;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-1) var(--ease-soft), transform var(--dur-1) var(--ease-out);
  z-index: 80;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ===== 반응형 ===== */
.only-mob { display: none; }

@media (min-width: 921px) {
  /* 내용만 살짝 교체감 — 패널 박스 자체는 고정 */
  .layout.is-open .schedule {
    animation: schedule-panel-in 0.28s var(--ease-out) both;
  }
}
@keyframes schedule-panel-in {
  from { opacity: 0.45; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

@media (max-width: 920px) {
  .layout,
  .layout.is-open {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap: 16px;
    height: auto;
    max-height: none;
    overflow: visible;
  }
  .floor-panel,
  .schedule-panel {
    height: auto;
    max-height: none;
  }
  .floor-panel {
    position: static;
    overflow: visible;
  }
  .schedule-panel {
    min-height: 0;
    max-height: min(70dvh, 640px);
    overflow: visible;
  }
}

@media (max-width: 768px) {
  .only-desk { display: none !important; }
  .only-mob { display: inline; }

  .now-line__label {
    font-size: 0.7rem;
    padding: 5px 10px;
    margin-left: 8px;
  }

  .layout,
  .layout.is-open {
    padding: 12px 12px calc(88px + env(safe-area-inset-bottom));
    gap: 12px;
  }

  .topbar {
    padding: 10px 14px;
    gap: 8px;
  }
  .topbar__title { font-size: 0.98rem; }
  .dev-chip { display: none; }
  .user-chip__name { display: none; }
  .mine-badge__label { display: none; }
  .mine-badge { padding: 6px 10px; }

  .floor-panel,
  .schedule-panel {
    padding: 14px;
    border-radius: var(--radius-lg);
    box-shadow: 0 1px 2px rgba(15, 27, 51, 0.05);
  }

  .panel-head {
    margin-bottom: 12px;
  }
  .panel-head__title { font-size: 1.05rem; }

  /* 도면 데코·복도·시설·타이틀블록 전부 숨김 */
  .floorplan__deco,
  .hallway,
  .facility,
  .legend__plate {
    display: none !important;
  }

  /* 회의실 = 번호 순 리스트 */
  .floorplan {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 0;
    background: none;
    border: none;
    box-shadow: none;
    overflow: visible;
    grid-template-areas: none;
    grid-template-columns: none;
    grid-template-rows: none;
  }
  .room--left-bottom { order: 1; }
  .room--big { order: 2; }
  .room--top1 { order: 3; }
  .room--top2 { order: 4; }
  .room--top3 { order: 5; }

  .room {
    min-height: 56px;
    padding: 14px 16px;
    gap: 6px;
    border-radius: 12px;
    box-shadow: none;
  }
  .room:hover { transform: none; }
  .room.is-selected { transform: none; }
  .room__chat { display: none !important; }
  .room__name { font-size: 0.95rem; }
  .room__dot {
    top: 50%;
    right: 14px;
    transform: translateY(-50%);
  }
  .room[data-state="busy"] .room__dot::after { animation: none; }

  .legend {
    margin-top: 10px;
    padding-top: 10px;
    justify-content: flex-start;
  }

  .room-detail {
    margin-top: 10px;
    padding: 12px 14px;
  }
  .room-detail__hint { font-size: 0.82rem; }

  .schedule-empty {
    padding: 28px 12px;
  }
  .schedule-empty__icon {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 0.85rem;
    margin-bottom: 8px;
  }
  .schedule-empty__svg {
    width: 1.25rem;
    height: 1.25rem;
  }
  .schedule-empty h3 { font-size: 1rem; }
  .schedule-empty p { font-size: 0.86rem; }

  .schedule__head {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .schedule__room { font-size: 1.05rem; }
  .date-nav { width: 100%; justify-content: space-between; }

  /* 전환 런처 — 작게 밀착 */
  .space-launcher-stack {
    right: max(12px, env(safe-area-inset-right));
    bottom: max(12px, env(safe-area-inset-bottom));
    gap: 8px;
  }
  .space-launcher {
    gap: 8px;
    padding: 8px 10px 8px 12px;
    border-radius: 10px;
  }
  .space-launcher__eyebrow { display: none; }
  .space-launcher__title { font-size: 0.78rem; }
  .space-launcher__arrow { font-size: 0.85rem; }
}

@media (max-width: 560px) {
  .modal__card {
    width: calc(100% - 24px);
    max-height: 90vh;
    overflow-y: auto;
    padding: 20px 18px;
  }
  .modal__actions {
    flex-direction: column-reverse;
  }
  .modal__actions .btn { width: 100%; }
  .time-range {
    flex-wrap: wrap;
  }
}

@media (prefers-reduced-motion: reduce) {
  .layout { transition: none; }
  .floor-panel { transition: none; }
  .schedule-panel { transition: none; }
  .hallway__runner,
  .hallway__pulse,
  .hallway__line--v,
  .hallway__line--h,
  .hallway__branch,
  .room__bubble { animation: none; }
  .schedule__timeline.is-fresh .slot { animation: none; }
  .schedule { animation: none; }
  .now-line { transition: none; }
  .now-line__dot { animation: none; }
}

/* ── 전환 런처 스택 (Workspace 위 · Members 아래) ── */
.space-launcher-stack {
  position: fixed;
  right: max(20px, env(safe-area-inset-right));
  bottom: max(20px, env(safe-area-inset-bottom));
  z-index: 40;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}

.space-launcher {
  --space-launcher-accent: #3cb34a;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 11px 14px 11px 15px;
  color: #f4f6f8;
  text-decoration: none;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent 42%),
    rgba(16, 19, 26, 0.92);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 10px 28px rgba(9, 12, 20, 0.28);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  isolation: isolate;
  opacity: 0;
  transform: translateY(14px) scale(0.96);
  transition:
    opacity 0.28s ease,
    transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.22s ease,
    border-color 0.22s ease;
  animation: space-launcher-in 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.25s both;
}
.space-launcher-stack .space-launcher:nth-child(2) {
  animation-delay: 0.34s;
}
.space-launcher::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  bottom: 12px;
  width: 2px;
  border-radius: 2px;
  background: var(--space-launcher-accent);
  opacity: 0.72;
  transition: opacity 0.22s ease, top 0.22s ease, bottom 0.22s ease;
}
@keyframes space-launcher-in {
  from { opacity: 0; transform: translateY(14px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.space-launcher:hover {
  transform: translateY(-2px) scale(1);
  border-color: rgba(60, 179, 74, 0.38);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.08) inset,
    0 14px 32px rgba(9, 12, 20, 0.34);
}
.space-launcher:hover::before {
  opacity: 1;
  top: 8px;
  bottom: 8px;
}
.space-launcher:focus-visible {
  outline: 2px solid var(--space-launcher-accent);
  outline-offset: 3px;
}
.space-launcher__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.15;
  min-width: 0;
}
.space-launcher__eyebrow {
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(244, 246, 248, 0.48);
}
.space-launcher__title {
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: rgba(244, 246, 248, 0.92);
}
.space-launcher__title b {
  font-weight: 750;
  color: #67c872;
}
.space-launcher__arrow {
  flex-shrink: 0;
  font-size: 0.95rem;
  font-weight: 500;
  color: rgba(103, 200, 114, 0.85);
  transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1), color 0.22s ease;
}
.space-launcher:hover .space-launcher__arrow {
  color: #7ad684;
  transform: translateX(3px);
}

@media (max-width: 560px) {
  .space-launcher-stack {
    right: 12px;
    bottom: 12px;
    gap: 6px;
  }
  .space-launcher {
    gap: 10px;
    padding: 10px 12px 10px 13px;
  }
  .space-launcher__title { font-size: 0.82rem; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}