/* ============================================================
   00014 — 식물원 관람 안내 (제2관 / 본관)
============================================================ */

/* ── 섹션 카드 공통 ── */
.sec-card {
  background: #fff;
  border: 1px solid rgba(2,6,23,.08);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 18px rgba(2,6,23,.06);
  margin-bottom: 22px;
}
.sec-card__head {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--dg-primary-gradient);
  padding: 14px 20px;
}
.sec-card__head i {
  width: 30px;
  height: 30px;
  background: rgba(45,74,30,.10);
  color: #2d4a1e;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .85rem;
  flex-shrink: 0;
}
.sec-card__head .sc-title {
  font-size: .95rem;
  font-weight: 800;
  letter-spacing: -.02em;
  color: #2d4a1e;
}
.sec-card__body { padding: 20px 22px; }
.sec-card__body.p-0 { padding: 0; }


/* ── PC 좌우 레이아웃 ── */
.garden-layout {
  display: flex;
  align-items: flex-start;
  gap: 0;
}

/* 왼쪽: 지도 (sticky) */
.garden-layout__map {
  flex: 0 0 58%;
  position: sticky;
  top: 80px;           /* 헤더 높이에 맞게 조정 */
  align-self: flex-start;
  border-right: 1px solid rgba(2,6,23,.07);
}

/* 오른쪽: 카드 목록 (스크롤) */
.garden-layout__cards {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  max-height: 480px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(25,179,106,.3) transparent;
}
.garden-layout__cards::-webkit-scrollbar { width: 4px; }
.garden-layout__cards::-webkit-scrollbar-thumb {
  background: rgba(25,179,106,.35);
  border-radius: 4px;
}

/* 모바일: 상하 적층 */
@media (max-width: 768px) {
  .garden-layout { flex-direction: column; }
  .garden-layout__map {
    flex: none;
    width: 100%;
    position: static;
    border-right: none;
    border-bottom: 1px solid rgba(2,6,23,.07);
  }
  .garden-layout__cards {
    max-height: none;
    overflow-y: visible;
  }
}


/* ── 배치도 이미지 ── */
.map-wrap {
  position: relative;
  line-height: 0;
}
.map-wrap img {
  width: 100%;
  display: block;
}


/* ── 핫스팟 ── */
.hotspot {
  position: absolute;
  transform: translate(-50%, -50%);
  z-index: 10;
  cursor: pointer;
}

/* 번호 도트 */
.hotspot__dot {
  width: 44px;
  height: 44px;
  background: rgba(25,179,106,.45);
  border: 3px solid rgba(255,255,255,.7);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 10px rgba(2,6,23,.2);
  transition: transform .2s, background .2s, border-color .2s;
  animation: pulse 2.4s infinite;
}
.hotspot__dot span {
  font-size: .82rem;
  font-weight: 800;
  color: #fff;
  line-height: 1;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0    rgba(25,179,106,.6); }
  65%  { box-shadow: 0 0 0 12px rgba(25,179,106,.0); }
  100% { box-shadow: 0 0 0 0    rgba(25,179,106,.0); }
}

/* 라벨 */
.hotspot__label {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  background: rgba(11,18,32,.88);
  color: #fff;
  font-size: .88rem;
  font-weight: 800;
  padding: 8px 16px;
  border-radius: 8px;
  pointer-events: none;
  opacity: 0;
  transition: opacity .15s;
  line-height: 1.4;
  min-width: 110px;
  text-align: center;
  letter-spacing: -.01em;
}
.hotspot__label::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: rgba(11,18,32,.88);
}

/* 호버 / 활성 상태 */
.hotspot:hover .hotspot__label,
.hotspot.is-active .hotspot__label {
  opacity: 1;
}
.hotspot.is-active .hotspot__dot,
.hotspot:hover    .hotspot__dot {
  background: rgba(255,255,255,.9);
  border-color: var(--dg-primary);
  transform: scale(1.2);
  animation: none;
}
.hotspot.is-active .hotspot__dot span,
.hotspot:hover    .hotspot__dot span {
  color: var(--dg-primary);
}


/* ── 설명 카드 ── */
.room-card {
  border-bottom: 1px solid rgba(2,6,23,.07);
  transition: background .18s;
}
.room-card:last-child { border-bottom: none; }

.room-card__head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px 10px;
  font-size: .9rem;
  font-weight: 800;
  color: var(--dg-text);
  cursor: default;
}
.room-card__head .room-num {
  width: 22px;
  height: 22px;
  background: #e2e8f0;
  color: var(--dg-text-sub);
  border-radius: 50%;
  font-size: .72rem;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background .18s, color .18s;
}
.room-card__head i {
  color: var(--dg-text-muted);
  font-size: .85rem;
  transition: color .18s;
}

/* 카드 본문 — 기본 숨김 */
.room-card__body {
  max-height: 0;
  overflow: hidden;
  padding: 0 18px;
  transition: max-height .3s ease, padding .3s ease;
}
.room-card__body p {
  margin: 0 0 8px;
  font-size: .88rem;
  color: var(--dg-text);
  line-height: 1.7;
}

/* 활성화 상태 */
.room-card.is-active {
  background: rgba(25,179,106,.04);
}
.room-card.is-active .room-card__head {
  color: var(--dg-primary-dark);
}
.room-card.is-active .room-card__head .room-num {
  background: background: var(--dg-primary);;
  color: #fff;
}
.room-card.is-active .room-card__head i {
  color: #19b36a;
}
.room-card.is-active .room-card__body {
  max-height: 300px;
  padding: 0 18px 14px;
}

/* 모바일: 핫스팟 도트 작게 */
@media (max-width: 768px) {
  .hotspot__dot {
    width: 28px;
    height: 28px;
    border-width: 2px;
  }
  .hotspot__dot span {
    font-size: .68rem;
  }
}
  .room-card__body {
    max-height: none !important;
    padding: 0 16px 14px !important;
    overflow: visible;
  }
  .room-card__body p { font-size: .9rem; }
}


/* ── 주요식물 행 ── */
.plant-row {
  display: flex;
  flex-direction: column;
  gap: 3px;
  background: rgba(25,179,106,.07);
  border-radius: 8px;
  padding: 8px 12px;
  margin-bottom: 4px;
}
.plant-label {
  font-size: .75rem;
  font-weight: 800;
  color: #19b36a;
  display: flex;
  align-items: center;
  gap: 4px;
}
.plant-list {
  font-size: .8rem;
  color: #475569;
  line-height: 1.6;
}