/* 영상 플레이어(인라인 · 확대 레이어) — 2026-10-31 Figma common «card-img»(3064:134707) · «메인이미지영역 - 동영상 - 클릭시»(3064:134752).
   부품: mws-user `components/video/{VideoControls,VideoLayer,InlinePlayer}.tsx`. final 에도 같은 파일을 둔다. */

/* ── 인라인 틀 ── 크기는 각 화면 CSS 가 정한다 */
/* 특정도 0 — 화면 CSS 가 틀을 absolute 로 잡았으면 그것을 따른다(absolute 도 컨트롤의 기준이 된다) */
:where(.app-vp-host) {
  position: relative;
}

/* ── 컨트롤(인라인·확대 공용) ── */
.app-vp {
  position: absolute;
  z-index: 3;
  inset: 0;
  -webkit-tap-highlight-color: transparent;
}

.app-vp--inline {
  cursor: pointer;
}

.app-vp button {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  cursor: pointer;
}

/* 화면 CSS 의 `슬라이드 img { width:100% … }` 같은 규칙이 아이콘을 늘리지 않게 크기를 직접 준다(특정도 올림) */
.app-vp.app-vp img {
  position: static;
  display: block;
  max-width: none;
  object-fit: contain;
  border-radius: 0;
}

.app-vp.app-vp .app-vp__size img {
  width: 22px;
  height: 22px;
}

.app-vp.app-vp .app-vp__volume-btn img[src$="volume-on.svg"] {
  width: 14px;
  height: 14px;
}

.app-vp.app-vp .app-vp__volume-btn img[src$="volume-mute.svg"] {
  width: 16px;
  height: 12px;
}

.app-vp__play {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex !important;
  width: 56px;
  height: 56px;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background: rgba(0, 0, 0, 0.6) !important;
  transform: translate(-50%, -50%);
}

.app-vp__pause-icon {
  display: flex;
  gap: 4px;
}

.app-vp__pause-icon i {
  display: block;
  width: 4px;
  height: 15px;
  border-radius: 3px;
  background: #fff;
}

.app-vp__play-icon {
  display: block;
  width: 0;
  height: 0;
  margin-left: 4px;
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
  border-left: 14px solid #fff;
}

.app-vp__size {
  position: absolute;
  top: 10px;
  left: 10px;
  display: flex !important;
  width: 30px;
  height: 30px;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.1) !important;
}

.app-vp__size img {
  width: 22px;
  height: 22px;
}

/* 2026-10-31 Figma 갱신 — 오른쪽 아래(진행 막대 바로 위 46px), 위로 펼친다 */
.app-vp__volume {
  position: absolute;
  right: 10px;
  bottom: 46px;
  display: flex;
  width: 30px;
  flex-direction: column;
  align-items: center;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.2);
}

.app-vp__volume-btn {
  display: flex !important;
  width: 30px;
  height: 30px;
  align-items: center;
  justify-content: center;
}

.app-vp__volume.is-open {
  gap: 10px;
  padding: 8px 0;
}

.app-vp__volume.is-open .app-vp__volume-btn {
  height: 14px;
}

.app-vp__volume-bar {
  position: relative;
  width: 10px;
  height: 80px;
  touch-action: none;
  cursor: pointer;
}

.app-vp__volume-track,
.app-vp__volume-fill {
  position: absolute;
  bottom: 0;
  left: 4px;
  width: 2px;
}

.app-vp__volume-track {
  top: 0;
  /* Figma 는 검정 20% — 어두운 영상 위에서 막대가 안 보여 흰색 30% 로 둔다 */
  background: rgba(255, 255, 255, 0.3);
}

.app-vp__volume-fill {
  background: #fff;
}

.app-vp__volume-knob {
  position: absolute;
  left: 0;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  background: #fff;
}

.app-vp__bar {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 14px 10px 20px;
  background: rgba(0, 0, 0, 0.2);
  cursor: default;
}

.app-vp__progress {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  height: 16px;
  touch-action: none;
  cursor: pointer;
}

.app-vp__progress-track,
.app-vp__progress-fill {
  position: absolute;
  top: 7px;
  left: 0;
  height: 2px;
}

.app-vp__progress-track {
  right: 0;
  background: rgba(255, 255, 255, 0.2);
}

.app-vp__progress-fill {
  background: #fff;
}

.app-vp__progress-knob {
  position: absolute;
  top: 3px;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  background: #fff;
}

.app-vp__time {
  flex: 0 0 auto;
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* 컨트롤은 처음엔 숨김 · 마우스를 올리면 보임 · 재생 중 1초 손대지 않거나 마우스가 나가면 숨김(2026-11-03) */
.app-vp__play,
.app-vp__size,
.app-vp__volume,
.app-vp__bar {
  transition: opacity 0.3s ease;
}

.app-vp.is-idle .app-vp__play,
.app-vp.is-idle .app-vp__size,
.app-vp.is-idle .app-vp__volume,
.app-vp.is-idle .app-vp__bar {
  opacity: 0;
}

/* 상세 상단 슬라이드 — 영상 장을 보는 동안은 슬라이드 번호·막대를 숨긴다(영상 진행 막대와 겹친다 · 시간은 영상 막대가 보여 준다) */
.venue-main-slider:has(.swiper-slide-active .app-vp) .venue-main-slider__pagination,
.place-detail-hero:has(.swiper-slide-active .app-vp) .place-detail-hero__pagination {
  opacity: 0;
  pointer-events: none;
}

/* 확대 레이어의 «전체화면» — 영상 틀을 화면 가득(컨트롤 그대로) */
.app-vlayer__video:fullscreen {
  width: 100% !important;
  height: 100% !important;
  border-radius: 0;
}

.app-vlayer__video:-webkit-full-screen {
  width: 100% !important;
  height: 100% !important;
  border-radius: 0;
}

/* ── 확대 레이어 ── */
.app-vlayer {
  position: fixed;
  z-index: 1100;
  inset: 0;
  background: rgba(17, 17, 17, 0.85); /* 2026-11-03 요청 — 85% (예전 96%) */
}

.app-vlayer__stage {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: 40px 100px;
}

.app-vlayer__swiper,
.app-vlayer__single {
  width: 100%;
  min-height: 0;
  flex: 1 1 auto;
}

.app-vlayer__swiper .swiper-slide {
  height: 100%;
}

.app-vlayer__fit {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
}

.app-vlayer__video {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  background: #000;
}

.app-vlayer__video video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.app-vlayer__image {
  display: block;
  max-width: 100%;
  max-height: 100%;
  border-radius: 8px;
  object-fit: contain;
}

.app-vlayer__caption {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: center;
  margin-top: 10px;
  text-align: center;
}

.app-vlayer__title {
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  line-height: 34px;
  text-decoration: none;
}

a.app-vlayer__title:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.app-vlayer__sub {
  margin: 0;
  color: rgba(255, 255, 255, 0.8);
  font-size: 14px;
  line-height: 22px;
}

.app-vlayer__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding: 6px 14px;
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 9999px;
  color: #fff;
  font-size: 13px;
  line-height: 18px;
  text-decoration: none;
}

.app-vlayer__cta img {
  width: 12px;
  height: 12px;
}

/* 닫기 — 이미지 확대보기(`venue-gallery-modal__close`)와 같은 자리·크기 */
.app-vlayer__close,
.app-vlayer__arrow {
  position: absolute;
  z-index: 2;
  display: inline-flex;
  width: 80px;
  height: 80px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 9999px;
  background: transparent;
  cursor: pointer;
}

.app-vlayer__close {
  top: 20px;
  right: 20px;
}

.app-vlayer__close img {
  width: 20px;
  height: 20px;
}

.app-vlayer__arrow {
  top: 50%;
  transform: translateY(-50%);
}

.app-vlayer__arrow:disabled {
  opacity: 0.3;
  cursor: default;
}

.app-vlayer__arrow--prev {
  left: 20px;
}

.app-vlayer__arrow--next {
  right: 20px;
}

.app-vlayer__counter {
  position: absolute;
  top: 48px;
  left: 50%;
  margin: 0;
  color: #fff;
  font-size: 14px;
  line-height: 20px;
  transform: translateX(-50%);
}

.app-vlayer__swiper + .app-vlayer__caption,
.app-vlayer__single + .app-vlayer__caption {
  margin-top: 10px;
}

/* 여러 장이면 위 숫자 자리만큼 내린다 */
.app-vlayer:has(.app-vlayer__counter) .app-vlayer__stage {
  padding-top: 80px;
}

@media (max-width: 1024px) {
  .app-vlayer__stage {
    padding: 80px 20px 40px;
  }

  .app-vlayer__arrow {
    display: none;
  }
}

@media (max-width: 767px) {
  .app-vlayer__stage {
    padding: 80px 10px 40px; /* 2026-10-31 요청 — 모바일 좌우 10px */
  }

  .app-vlayer__close {
    top: 0;
    right: 0;
  }

  .app-vlayer__counter {
    top: 30px;
  }

  .app-vlayer__video,
  .app-vlayer__image {
    border-radius: 0;
  }

  .app-vlayer__caption {
    padding: 0 20px;
  }

  .app-vlayer__title {
    font-size: 16px;
    line-height: 24px;
  }
}

/* 2026-11-04 제보 — 매거진(body `.mgz-page`)의 `.mgz-page a { color: inherit }`(0,1,1)가 «상세 화면으로 이동»·제목 링크 색을 이겨
   CURRENT MOOD 영상 확대 레이어에서 글자가 흰색이 아니었다. 레이어 안 링크는 부모를 붙여 특정도를 올린다(다른 화면 확대 레이어와 같은 흰색). */
.app-vlayer .app-vlayer__cta,
.app-vlayer .app-vlayer__title {
  color: #fff;
}