/* ==========================================================================
   tour.css — 병원 둘러보기 (갤러리 + 라이트박스)
   ========================================================================== */

.tour-hero { background: linear-gradient(180deg, var(--navy-deep), var(--navy)); color: #fff; padding: 60px 0 52px; text-align: center; }
.tour-hero h1 { color: #fff; font-size: clamp(27px, 3.4vw, 38px); margin-bottom: 10px; }
.tour-hero p { color: rgba(255,255,255,.75); font-size: 15px; }

.tour-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; padding: 64px 0 96px; }
.tour-item {
  aspect-ratio: 4/3;
  border-radius: var(--radius-md);
  overflow: hidden;
  cursor: zoom-in;
  position: relative;
  background: var(--navy-mist);
}
.tour-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.tour-item:hover img { transform: scale(1.06); }
.tour-item::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(20,38,64,0.35));
  opacity: 0; transition: opacity .25s ease;
}
.tour-item:hover::after { opacity: 1; }

@media (max-width: 900px) { .tour-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; } }
@media (max-width: 560px) { .tour-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; } }

/* --- 라이트박스 --- */
.lightbox {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(10,16,24,0.94);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden; transition: opacity .25s ease;
  touch-action: pan-y;
}
.lightbox.open { opacity: 1; visibility: visible; }
.lightbox-stage {
  position: relative;
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.lightbox-track {
  display: flex;
  height: 100%;
  transition: transform .35s cubic-bezier(.22,.61,.36,1);
}
.lightbox-track.dragging { transition: none; }
.lightbox-slide {
  flex: 0 0 100%;
  display: flex; align-items: center; justify-content: center;
  padding: 60px 70px;
}
.lightbox-slide img {
  max-width: 100%; max-height: 100%;
  border-radius: var(--radius-md);
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
  user-select: none; -webkit-user-drag: none;
}
.lightbox-close, .lightbox-prev, .lightbox-next {
  position: absolute;
  color: #fff;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 50%;
  width: 46px; height: 46px;
  display: flex; align-items: center; justify-content: center;
  z-index: 5;
}
.lightbox-close:hover, .lightbox-prev:hover, .lightbox-next:hover { background: rgba(255,255,255,0.22); }
.lightbox-close { top: 20px; right: 20px; }
.lightbox-prev { left: 16px; top: 50%; transform: translateY(-50%); }
.lightbox-next { right: 16px; top: 50%; transform: translateY(-50%); }
.lightbox-prev svg, .lightbox-next svg, .lightbox-close svg { width: 22px; height: 22px; }
.lightbox-counter {
  position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%);
  color: rgba(255,255,255,0.7); font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.05em;
}

@media (max-width: 700px) {
  .lightbox-slide { padding: 90px 16px; }
  .lightbox-prev, .lightbox-next { width: 40px; height: 40px; }
  .lightbox-prev { left: 8px; }
  .lightbox-next { right: 8px; }
}