/* ============================================================
   23-floor-explorer.css — interactive floor plan explorer
   Module: <section id="explorer">
   Logic: js/floor-explorer.js
   ============================================================ */

#explorer { background: var(--c-white); }

.fx-tabs {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: var(--s-5);
  flex-wrap: wrap;
}
.fx-tab {
  padding: 10px 22px;
  background: var(--c-white);
  border: 1.5px solid var(--c-line);
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--c-ink);
  cursor: pointer;
  transition: all 0.18s ease;
}
.fx-tab:hover { border-color: var(--c-blue); color: var(--c-blue); }
.fx-tab.is-active {
  background: var(--c-blue);
  color: var(--c-white);
  border-color: var(--c-blue);
}

.fx-stage {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--s-5);
  align-items: start;
}
@media (max-width: 880px) { .fx-stage { grid-template-columns: 1fr; } }

.fx-canvas {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--c-bg);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.fx-canvas svg { width: 100%; height: 100%; display: block; }

.fx-room-shape {
  fill: var(--c-card);
  stroke: var(--c-blue);
  stroke-width: 2;
  cursor: pointer;
  transition: fill 0.2s ease;
}
.fx-room-shape:hover,
.fx-room-shape.is-selected {
  fill: var(--c-yellow);
}
.fx-room-label {
  font-family: var(--f-body);
  font-size: 12px;
  font-weight: 700;
  fill: var(--c-ink);
  pointer-events: none;
  text-anchor: middle;
}

.fx-info {
  background: var(--c-bg);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  padding: var(--s-5);
}
.fx-info h3 {
  margin-bottom: var(--s-3);
  font-size: 1.5rem;
}
.fx-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-2);
  margin-bottom: var(--s-4);
}
.fx-stat {
  background: var(--c-white);
  padding: var(--s-3);
  border-radius: var(--radius);
  text-align: center;
}
.fx-stat strong {
  display: block;
  font-family: var(--f-display);
  font-size: 1.4rem;
  font-weight: 900;
  color: var(--c-blue);
}
.fx-stat span {
  font-size: 0.74rem;
  color: var(--c-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
}

.fx-room-detail {
  background: var(--c-white);
  border-left: 3px solid var(--c-yellow);
  padding: var(--s-3);
  border-radius: var(--radius);
  margin-bottom: var(--s-3);
}
.fx-room-detail strong {
  display: block;
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-yellow-dark);
  margin-bottom: 4px;
}
.fx-room-detail h4 {
  font-size: 1.05rem;
  margin: 0 0 4px;
}
.fx-room-detail p {
  font-size: 0.92rem;
  color: var(--c-muted);
  margin: 0;
}

.fx-info-cta { display: block; width: 100%; margin-top: var(--s-2); }