/*
 * 이벤트 상세(포스터형) — 2026-10-29 Figma «07.Event» 01~06. 조각 _inc/event-detail.php.
 *   포스터 = 판별 이미지 조각(PC ≥1024 · 768 판 768~1023 · 360 판 ≤767) + 투명 버튼 자리(.evd-spot)
 *   댓글 = 웨딩홀 상세 댓글(venue-detail-comments.css) 재사용 · 유의사항 = HTML
 */

/* 2026-11-10 앱 CSS 정리 — 화면 전체(`*`·`body`) 규칙은 `globals.css` 가 맡는다(앱 이동은 앞 화면 CSS 를 지우지 않아 다른 화면에 걸렸다). ⚠️ 시안 `final/` 에서 다시 가져오면 다시 정리할 것. */

.evd-page {
  min-width: 320px;
  background: #fff;
  font-family: var(--font-family-base, 'Noto Sans KR', sans-serif);
}

.evd-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ── 포스터 ─────────────────────────────── */

.evd-poster {
  display: none;
}

.evd-poster__inner {
  position: relative;
  width: 100%;
  max-width: var(--evd-w);
  margin: 0 auto;
}

.evd-poster__inner img {
  display: block;
  width: 100%;
  height: auto;
}

.evd-spot {
  position: absolute;
  display: block;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: transparent;
  cursor: pointer;
}

/* 03 드림 트립 영상(Figma «video» 프레임, 라운드 9) — 화면에 보이면 소리 없이 반복 재생 · 오른쪽 위 소리 버튼 */
.evd-video {
  position: absolute;
  overflow: hidden;
  border-radius: 9px;
  background: #000;
  /* 포스터 그림에 찍힌 Figma 영상 썸네일 가장자리(어두운 선)가 비치지 않게 살짝 덮는다 */
  transform: scale(1.01);
}

/* 2026-11-08 — 07 스타일링 페어: Figma 영상 자리가 각진 모서리(라운드 0) */
.evd-video.evd-video--square {
  border-radius: 0;
}

.evd-video video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.evd-video__sound {
  position: absolute;
  top: 12px;
  right: 12px;
  display: flex;
  width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.35);
  cursor: pointer;
}

.evd-video__sound img {
  display: block;
  width: 20px;
  height: 20px;
}

.evd-spot:focus-visible {
  outline: 3px solid #81d8d0;
  outline-offset: 2px;
}

@media (min-width: 1024px) {
  .evd-poster--pc { display: block; }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .evd-poster--tab { display: block; }
  .evd-poster--tab .evd-poster__inner { max-width: none; }
}

@media (max-width: 767px) {
  .evd-poster--mo { display: block; }
  .evd-poster--mo .evd-poster__inner { max-width: none; }
}

/* ── 댓글(02·04) ─────────────────────────── */

.evd-comments {
  display: flex;
  max-width: 1000px;
  margin: 0 auto;
  flex-direction: column;
  align-items: center;
  gap: 21px;
  padding: 40px 0;
}

.evd-comments__title {
  margin: 0;
  color: rgba(34, 34, 34, 0.8);
  font-size: 23px;
  font-weight: 500;
  line-height: 1.4;
  text-align: center;
}

.evd-comments__title strong {
  font-weight: 700;
}

.evd-comments__body {
  width: 100%;
  border-top: 1px solid #eee;
}

/* ── 유의사항 ─────────────────────────────── */

.evd-notice {
  display: flex;
  max-width: 1280px;
  margin: 0 auto;
  flex-direction: column;
  gap: 21px;
  padding: 40px 80px;
}

.evd-notice--dark,
.evd-notice--mint {
  max-width: none;
  padding-right: max(80px, calc((100% - 1120px) / 2));
  padding-left: max(80px, calc((100% - 1120px) / 2));
}

.evd-notice--dark { background: #0b1313; }
.evd-notice--mint { background: #d9fffc; }

.evd-notice h2 {
  margin: 0;
  color: #949494;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.6;
}

.evd-notice ul {
  margin: 0;
  padding: 0 0 0 18px;
  color: #cbcbcb;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.6;
}

.evd-notice li.is-alert {
  color: #ef4444;
}

.evd-notice--dark h2 { color: #fff; }
.evd-notice--dark ul { color: #fff; }

@media (max-width: 1023px) {
  .evd-comments {
    padding: 40px 70px;
  }

  .evd-notice,
  .evd-notice--dark,
  .evd-notice--mint {
    padding: 40px;
  }
}

@media (max-width: 767px) {
  .evd-comments {
    padding: 40px 20px;
  }

  .evd-comments__title {
    font-size: 20px;
  }

  .evd-notice,
  .evd-notice--dark,
  .evd-notice--mint {
    gap: 10px;
    padding: 20px;
  }

  .evd-notice h2 {
    font-size: 14px;
    line-height: 20px;
  }

  .evd-notice ul {
    font-size: 11px;
    line-height: 1.5;
  }
}