/* PC 메인 팝업 — _pc/front/_components/main-popup.php
 * <dialog>.showModal() 은 브라우저 최상위 레이어(top layer)에 그려져 z-index 가 필요 없다.
 * 이미지는 비율을 유지한 채 가로 560px · 화면 높이에 맞추고, 아래 닫기 영역은 항상 화면 안에 남긴다.
 */

.main-popup {
  --main-popup-gap: 24px;
  --main-popup-bar: 48px;

  padding: 0;
  border: 0;
  border-radius: 12px;
  overflow: hidden;
  min-width: 300px;
  max-width: calc(100vw - var(--main-popup-gap) * 2);
  max-height: calc(100vh - var(--main-popup-gap) * 2);
  background: #fff;
  color: #222;
  box-shadow: 0 24px 64px rgba(0, 0, 0, .28);
}

.main-popup::backdrop {
  background: rgba(0, 0, 0, .5);
}

.main-popup__link {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  line-height: 0;
  background: #fff;
}

.main-popup__link:focus-visible {
  outline: 3px solid #1f6fff;
  outline-offset: -3px;
}

.main-popup__img {
  display: block;
  width: auto;
  height: auto;
  max-width: min(560px, calc(100vw - var(--main-popup-gap) * 2));
  max-height: calc(100vh - var(--main-popup-gap) * 2 - var(--main-popup-bar));
}

.main-popup__bar {
  display: flex;
  align-items: stretch;
  height: var(--main-popup-bar);
  border-top: 1px solid #e5e7eb;
  background: #fff;
}

.main-popup__btn {
  flex: 1 1 50%;
  margin: 0;
  padding: 0 16px;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 14px;
  color: #555;
  cursor: pointer;
}

.main-popup__btn + .main-popup__btn {
  border-left: 1px solid #e5e7eb;
}

.main-popup__btn--close {
  font-weight: 700;
  color: #222;
}

.main-popup__btn:hover {
  background: #f5f6f8;
}

.main-popup__btn:focus-visible {
  outline: 3px solid #1f6fff;
  outline-offset: -3px;
}

/* ── 모바일 메인(m., 앱 WebView) — main-popup.php 가 모바일 렌더링에서만 붙인다. PC 규칙은 위 그대로 ──
 * 좌우 16px 만 남기고 화면 너비에 가깝게 띄운다. 높이가 모자라면 비율(--main-popup-ratio)을 지키며 너비를 줄여
 * 아래 닫기 영역이 항상 화면 안에 남게 한다. dvh 는 주소창·툴바를 뺀 실제 보이는 높이 (미지원 브라우저는 vh).
 */
.main-popup--mobile {
  --main-popup-gap: 16px;
  --main-popup-bar: 52px;
  --main-popup-avail-h: calc(100vh - var(--main-popup-gap) * 2 - var(--main-popup-bar));

  min-width: 0;
  max-height: calc(100vh - var(--main-popup-gap) * 2);
  overscroll-behavior: contain;
}

@supports (height: 100dvh) {
  .main-popup--mobile {
    --main-popup-avail-h: calc(100dvh - var(--main-popup-gap) * 2 - var(--main-popup-bar));
    max-height: calc(100dvh - var(--main-popup-gap) * 2);
  }
}

.main-popup--mobile .main-popup__img {
  /* 비율을 알면: 화면 너비 · 560px · (남은 높이 × 비율) 중 작은 값 → 높이는 비율대로 자동 */
  width: min(560px, calc(100vw - var(--main-popup-gap) * 2), calc(var(--main-popup-avail-h) * var(--main-popup-ratio, 100)));
  height: auto;
  max-width: none;
  max-height: var(--main-popup-avail-h);
  object-fit: contain; /* 비율을 모를 때의 안전장치 — 높이가 잘려도 이미지는 찌그러지지 않는다 */
}

.main-popup--mobile .main-popup__btn {
  font-size: 15px;
}

/* 팝업이 열려 있는 동안 뒤쪽 화면이 터치 스크롤로 움직이지 않게 한다 */
html:has(.main-popup--mobile[open]) {
  overflow: hidden;
}