/* 지점 지도 — ContentsDoc/05 구현
   지도는 브랜드 3색(블랙·화이트·오렌지)만 쓴다. 새 색을 늘리지 않는다. */

.gl-map-canvas{
  position: relative;
  max-width: 560px;
  margin: 0 auto 28px;
}
.gl-map-svg{
  width: 100%;
  height: auto;
  display: block;
}
/* 지도 도형 자체 — 채도를 낮춰 두어야 오렌지 핀이 눈에 든다 */
.gl-map-svg path,
.gl-map-svg polygon{
  fill: var(--gray-100, #f1f1f3);
  stroke: var(--gray-300, #c7c7cf);
  stroke-width: 0.6;
  transition: fill 0.25s ease;
}

/* 지점이 없거나 지도를 못 받았을 때 — 목록만 남긴다 */
.gl-map-listonly .gl-map-canvas{ display: none; }

/* ── 핀 ─────────────────────────────────────────────────────────── */
.gl-map-pin{
  opacity: 0;
  transform: translateY(-14px);
  transform-box: fill-box;
  transform-origin: center;
  transition: opacity 0.35s ease, transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--gl-pin-delay, 0ms);
}
.gl-map-in .gl-map-pin{ opacity: 1; transform: translateY(0); }

.gl-map-dot{
  fill: var(--accent, #ff5a1f);
  stroke: #fff;
  stroke-width: 1.2;
}
.gl-map-pin.on .gl-map-dot{ fill: var(--black, #0a0a0b); }

/* 핀에서 퍼져 나가는 물결 */
.gl-map-pulse{
  fill: var(--accent, #ff5a1f);
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}
.gl-map-in .gl-map-pulse{
  animation: gl-map-pulse 2.4s ease-out infinite;
  animation-delay: var(--gl-pin-delay, 0ms);
}
@keyframes gl-map-pulse{
  0%   { opacity: 0.45; transform: scale(1); }
  70%  { opacity: 0;    transform: scale(3.2); }
  100% { opacity: 0;    transform: scale(3.2); }
}

/* ── 지점 목록 — 지도와 같은 내용을 글로도 낸다 ──────────────────── */
.gl-map-table{
  width: 100%;
  border-collapse: collapse;
  font-size: 14.5px;
}
.gl-map-table th,
.gl-map-table td{
  padding: 13px 14px;
  text-align: left;
  border-bottom: 1px solid var(--gray-200, #e3e3e8);
  vertical-align: top;
}
.gl-map-table th{
  background: var(--surface-2);
  font-size: 12.5px;
  font-weight: 800;
  color: var(--muted-2);
  white-space: nowrap;
}
.gl-map-table tbody tr{ transition: background 0.2s ease; }
.gl-map-table tbody tr:hover,
.gl-map-table tbody tr.on{ background: var(--accent-soft, #fff1ea); }
.gl-map-table .muted{ color: var(--muted); font-size: 12.5px; }
.gl-map-table a{ color: inherit; text-decoration: underline; }

.gl-map-empty{
  padding: 48px 20px;
  text-align: center;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.7;
}

@media (max-width: 600px){
  /* 모바일에서는 지도를 줄이고 목록을 먼저 읽히게 한다 */
  .gl-map-canvas{ max-width: 320px; margin-bottom: 20px; }
  .gl-map-table th:nth-child(2),
  .gl-map-table td:nth-child(2){ display: none; }
}

@media (prefers-reduced-motion: reduce){
  .gl-map-pin{ opacity: 1; transform: none; transition: none; }
  .gl-map-in .gl-map-pulse{ animation: none; }
}