/* 중첩 스크롤 체이닝 이음새: 전역 html { scroll-behavior: smooth }와 detail 즉시 스크롤 충돌 완화 */
html:has(.guide-map) { scroll-behavior: auto; }

.guide-map__lead { margin-bottom: var(--space-60); color: var(--color-text-default); font-size: var(--font-size-h1); font-weight: 700; line-height: var(--line-height-h1); text-align: center; }
.guide-map__lead-accent { color: var(--color-text-accent); }

/* Panel */
.panel__container { display: flex; gap: var(--space-30); height: 832px; padding-top: 0; overflow: hidden; }

/* Map */
.map { position: relative; width: 50%; min-height: 0; height: 100%; }
.map__viewport { position: relative; overflow: hidden; width: 100%; height: 100%; background-color: #e8eef2; touch-action: pan-y; }
.map__viewport.is-zoomed { touch-action: none; }
.map__stage { position: absolute; inset: 0; transform-origin: 0 0; will-change: transform; }
.map__stage img { display: block; width: 100%; height: 100%; object-fit: fill; user-select: none; -webkit-user-drag: none; pointer-events: none; }
.map__markers-container { position: absolute; inset: 0; z-index: 1; }
.map__marker { position: absolute; z-index: 1; width: 3.2%; aspect-ratio: 1; padding: 0; border: 0; border-radius: 50%; background-color: transparent; transform: translate(-50%, -50%); cursor: pointer; }
.map__marker:focus-visible { outline: 2px solid var(--color-brand-accent); outline-offset: 2px; }
.map__active-marker { position: absolute; z-index: 2; width: 60px; height: 60px; aspect-ratio: 1; pointer-events: none; transform-origin: center center; }
.map__active-marker-body { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; border-radius: 50%; background-color: #ff7d01; color: var(--color-white); font-size: var(--font-size-h2); font-weight: 700; line-height: var(--line-height-h2); transform-origin: center center; animation: map-active-marker-pulse 1.4s ease-in-out infinite; }
.map__active-marker-num { position: relative; z-index: 1; }
.map__active-marker[hidden] { display: none; }
.map__expand { display: none; }
@keyframes map-active-marker-pulse { 0%, 100% { background-color: #ff7d01; transform: scale(1); } 50% { background-color: #ffc28a; transform: scale(0.7); } }
@media (prefers-reduced-motion: reduce) { .map__active-marker-body { animation: none; } }

/* Detail */
.detail { display: flex; flex-direction: column; position: relative; width: 50%; min-height: 0; padding-bottom: 1px; border: 2px solid var(--color-border-divider); overflow: hidden; }
.detail--tablet { display: none; }
.detail__scroll { flex: 1 1 auto; min-height: 0; padding: var(--space-60) var(--space-40); overflow-y: auto; overflow-anchor: none; overscroll-behavior-y: contain; }
.detail__close { display: flex; align-items: start; justify-content: end; position: absolute; top: var(--space-20); right: var(--space-20); width: 50px; height: 50px; }
.detail__close .icon-close { width: 36px; height: 36px; --icon-stroke-width: 3; }
.detail__entries { display: flex; flex-direction: column; gap: var(--space-60); }
.detail__entries.is-translating { visibility: hidden; }
.detail__entry { display: flex; flex-direction: column; }
.detail__entry + .detail__entry { padding-top: var(--space-40); border-top: 1px solid var(--color-border-divider); }

/* Detail Header */
.detail__header { display: flex; align-items: center; gap: var(--space-24); margin-bottom: var(--space-16); }
.detail__num { display: flex; align-items: center; justify-content: center; width: 60px; height: 60px; border-radius: 50%; background-color: var(--color-brand-accent); color: var(--color-white); font-size: var(--font-size-h2); font-weight: 700; line-height: var(--line-height-h2); aspect-ratio: 1; }
.detail__num[hidden] { display: none; }
.detail__info { display: flex; flex-direction: column; min-width: 0; }
.detail__title, .detail__meta { color: var(--color-text-default); font-size: var(--font-size-h2); font-weight: 700; line-height: var(--line-height-h2); }
.detail__meta:empty, .detail__meta[hidden] { display: none; }

/* Detail Desc */
.detail__desc { margin-bottom: var(--space-24); color: var(--color-text-muted); font-size: var(--font-size-body-lg); font-weight: 500; line-height: var(--line-height-body-lg); white-space: pre-line; }
.detail__desc:empty, .detail__desc[hidden] { display: none; }

/* Detail Gallery */
.detail__gallery { display: flex; align-items: center; gap: var(--space-16); }
.detail__gallery[hidden] { display: none; }
.detail__gallery.is-single .detail__arrow { display: none; }
.detail__arrow { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--color-border-divider); border-radius: 50%; aspect-ratio: 1; transition: border-color 0.3s ease; }
.detail__arrow .icon-arrow { width: 24px; height: 24px; color: var(--color-text-default); transition: color 0.3s ease; }
.detail__arrow:hover { border-color: var(--color-text-accent); }
.detail__arrow:hover .icon-arrow { color: var(--color-text-accent); }
.detail__arrow[aria-disabled="true"] { opacity: 0.3; pointer-events: none; }
.detail__arrow[aria-disabled="true"]:hover { border-color: var(--color-border-divider); }
.detail__arrow[aria-disabled="true"]:hover .icon-arrow { color: var(--color-text-default); }
.detail__swiper { width: 380px; height: auto; margin-bottom: var(--space-30); overflow: hidden; }
.detail__swiper-wrapper { width: 100%; height: 100%; }
.detail__swiper .swiper-slide { width: 100%; height: 100%; }
.detail__slide-img { display: block; width: 100%; height: 100%; object-fit: cover; }
.detail__gallery.is-single .detail__swiper { margin-inline: auto; }

/* Detail Audio */
.detail__audio-list { display: flex; flex-direction: column; gap: var(--space-15); width: 380px; margin-inline: auto; }
.detail__audio-list:empty, .detail__audio-list[hidden] { display: none; }
.detail__audio-item { display: flex; flex-direction: column; align-items: start; justify-content: space-between; gap: var(--space-10); width: 100%; }
.detail__audio-label { color: var(--color-text-default); font-size: var(--font-size-h3); font-weight: 700; line-height: var(--line-height-h3); }
audio { width: 100%; }

@media (max-width: 1400px) {
  /* Panel */
  .panel__container { flex-direction: column; align-items: center; gap: var(--space-60); height: auto;}

  /* Map */
  .map { width: 65%; height: auto; aspect-ratio: 712 / 1016; }
  .map__viewport { height: 100%; }

  /* Detail */
  .detail--desktop-mobile { display: none; }
  .detail--tablet { display: block; width: 100%; padding: var(--space-60) var(--space-50); }
  .detail--tablet .detail__entry + .detail__entry { padding-top: var(--space-40); border-top: 1px solid var(--color-border-divider); }
  .detail--tablet .detail__content { display: flex; align-items: stretch; gap: var(--space-40); }

  /* Detail Gallery */
  .detail--tablet .detail__gallery { display: flex; align-items: center; justify-content: center; position: relative; width: 50%; }
  .detail__arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 5; background-color: rgba(255, 255, 255, 0.45); }
  .detail__arrow--prev { left: var(--space-10); }
  .detail__arrow--next { right: var(--space-10); }
  .detail--tablet .detail__swiper { width: 100%; height: 100%; margin-bottom: 0; }

  /* Detail Text */
  .detail--tablet .detail__text { display: flex; flex-direction: column; justify-content: center; gap: var(--space-30); width: 50%; }
  .detail--tablet .detail__header, .detail--tablet .detail__desc { margin-bottom: 0; }

  /* Detail Audio */
  .detail__audio-list { width: 100%; }
}

@media (max-width: 1024px) {
  .guide-map__lead { margin-bottom: var(--space-30); }

  /* Panel */
  .panel__container { gap: var(--space-60); width: 100%; padding-inline: 0; }

  /* Map */
  .map { position: relative; width: 100%; height: auto; overflow: hidden; aspect-ratio: 47/67; }
  .map__viewport { height: 100%; }
  .map__marker { width: 5%; }
  .map__expand { display: flex; align-items: center; gap: var(--space-12); position: absolute; top: var(--space-20); left: var(--space-12); z-index: 3; padding: var(--space-12); background-color: rgba(43, 38, 34, 0.72); color: var(--color-text-inverse); font-size: var(--font-size-body); font-weight: 500; line-height: var(--line-height-body); opacity: 0; transform: translateY(6px); pointer-events: none; transition: opacity 0.25s ease, transform 0.25s ease; }
  .map__expand.is-visible { opacity: 1; transform: translateY(0); }
  .map__expand .icon { width: 45px; height: 45px; }
  @media (prefers-reduced-motion: reduce) { .map__expand { transition: none; } }

  /* Detail */
  .detail--tablet { display: none; }
  .detail--desktop-mobile { display: block; width: 90%; padding: 0; border: none; overflow: visible; }
  .detail__scroll { flex: none; height: auto; min-height: 0; padding: 0; overflow: visible; overscroll-behavior-y: auto; }

  /* Detail Header */
  .detail__header { gap: var(--space-16); margin-bottom: var(--space-30); }
  .detail__num { width: 55px; height: 55px; }

  /* Detail Gallery */
  .detail__gallery { position: relative;}
  .detail__swiper { width: 100%; margin-bottom: var(--space-20); aspect-ratio: 357 / 450; }
  .detail__arrow { width: 55px; height: 55px; }
  .detail__arrow:hover { border-color: var(--color-border-divider); }
  .detail__arrow:hover .icon-arrow { color: var(--color-text-default); }
  .detail__arrow:active { border-color: var(--color-text-accent); }
  .detail__arrow:active .icon-arrow { color: var(--color-text-accent); }
}