/* ==========================================================
   WMAC 2026 자동 팝업
   고유 클래스명: modal260804-
========================================================== */


/* ==========================================================
   1. 팝업 전체 레이어
========================================================== */

.modal260804-layer {
  position: fixed;
  inset: 0;

  /* 홈페이지의 다른 요소보다 가장 위 */
  z-index: 2147483647;

  display: flex;
  width: 100%;
  padding: 50px 3%;

  visibility: hidden;
  opacity: 0;
  pointer-events: none;

  box-sizing: border-box;

  transition:
    opacity 0.3s ease,
    visibility 0.3s ease;
}


/* 팝업 활성화 */
.modal260804-layer.modal260804-active {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}


/* 종료일 이후 완전히 숨김 */
.modal260804-layer.modal260804-expired {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}


/* ==========================================================
   2. 검은 배경
========================================================== */

.modal260804-dim {
  position: absolute;
  inset: 0;
  z-index: 0;

  width: 100%;
  height: 100%;

/*   background: rgba(0, 0, 0, 0.7);

  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
 */
  cursor: pointer;
}


/* ==========================================================
   3. 팝업 본문
========================================================== */

.modal260804-container {
  position: relative;
  z-index: 1;

  width: min(100%, 550px);
  max-width: 550px;
   max-height: calc(100vh - 60px);
 height:fit-content;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border-radius: 16px;
  background: #fff;

  box-shadow:
    0 40px 100px rgba(0, 0, 0, 0.45),
    0 15px 40px rgba(0, 0, 0, 0.25);

  box-sizing: border-box;
  outline: none;

  opacity: 0;
  transform: translateY(24px) scale(0.97);

  transition:
    opacity 0.3s ease,
    transform 0.3s ease;
}


/* 팝업 활성화 애니메이션 */
.modal260804-layer.modal260804-active
.modal260804-container {
  opacity: 1;
  transform: translateY(0) scale(1);
}


/* ==========================================================
   4. 이미지 링크
========================================================== */

.modal260804-image-link {
  display: block;

  width: 100%;
  max-height: calc(100vh - 126px);

  margin: 0;
  padding: 0;

  overflow-x: hidden;
  overflow-y: auto;

  border: 0;
  background: #fff;

  box-sizing: border-box;
  text-decoration: none;

  -webkit-overflow-scrolling: touch;
}


/* 이미지 */
.modal260804-image-link img {
  display: block;

  width: 100%;
  max-width: 100%;
  height: auto;

  margin: 0;
  padding: 0;

  border: 0;
  vertical-align: top;
}


/* 이미지 링크 키보드 포커스 */
.modal260804-image-link:focus-visible {
  outline: 4px solid #dc3323;
  outline-offset: -4px;
}


/* ==========================================================
   5. 하단 버튼 영역
========================================================== */

.modal260804-footer {
  display: flex;
  align-items: center;

  width: 100%;
  min-height: 62px;

  border-top: 1px solid #e8e8e8;
  background: #fff;
}


/* 공통 버튼 */
.modal260804-button {
  display: flex;
  align-items: center;
  justify-content: center;

  flex: 1;

  min-width: 0;
  min-height: 62px;
  padding: 12px 16px;

  border: 0;
  background: #fff;

  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;

  cursor: pointer;
  box-sizing: border-box;

  transition:
    color 0.2s ease,
    background-color 0.2s ease;
}


/* 버튼 사이 구분선 */
.modal260804-button + .modal260804-button {
  border-left: 1px solid #e8e8e8;
}


/* 일반 닫기 */
.modal260804-button-close {
  color: #555;
}

.modal260804-button-close:hover {
  color: #111;
  background: #f6f6f6;
}


/* 하루 동안 열지 않기 */
.modal260804-button-today {
  color: #fff;
  background: #222;
}

.modal260804-button-today:hover {
  background: #000;
}


/* 버튼 키보드 포커스 */
.modal260804-button:focus-visible {
  position: relative;
  z-index: 1;

  outline: 3px solid rgba(220, 51, 35, 0.5);
  outline-offset: -3px;
}


/* ==========================================================
   6. 팝업 활성화 시 배경 스크롤 방지
========================================================== */

body.modal260804-body-lock {
  overflow: hidden !important;
}


/* ==========================================================
   7. 태블릿
========================================================== */

@media screen and (max-width: 1024px) {
  .modal260804-layer {
    padding: 26px 20px;
  }

  .modal260804-container {
    width: min(100%, 640px);
    max-height: calc(100vh - 52px);
  }

  .modal260804-image-link {
    max-height: calc(100vh - 116px);
  }
}


/* ==========================================================
   8. 모바일
========================================================== */

@media screen and (max-width: 720px) {
  .modal260804-layer {
    padding:
      max(112px, env(safe-area-inset-top))
      14px
      max(22px, env(safe-area-inset-bottom));
  }

  .modal260804-container {
    width: 100%;
    max-width: 100%;
    max-height: calc(100vh - 44px);

    border-radius: 12px;

    transform: translateY(18px) scale(0.98);
  }

  .modal260804-layer.modal260804-active
  .modal260804-container {
    transform: translateY(0) scale(1);
  }

  .modal260804-image-link {
    max-height: calc(100vh - 104px);
  }

  .modal260804-footer {
    min-height: 60px;
  }

  .modal260804-button {
    min-height: 60px;
    padding: 10px 8px;

    font-size: 14px;
  }
}


/* ==========================================================
   9. 작은 모바일
========================================================== */

@media screen and (max-width: 420px) {
  .modal260804-layer {
    padding:
      max(18px, env(safe-area-inset-top))
      10px
      max(18px, env(safe-area-inset-bottom));
  }

  .modal260804-container {
    max-height: calc(100vh - 36px);
    border-radius: 10px;
  }

  .modal260804-image-link {
    max-height: calc(100vh - 94px);
  }

  .modal260804-footer {
    min-height: 58px;
  }

  .modal260804-button {
    min-height: 58px;
    font-size: 13px;
  }
}


/* ==========================================================
   10. 화면 높이가 작은 경우
========================================================== */

@media screen and (max-height: 700px) {
  .modal260804-layer {
    padding-top: 16px;
    padding-bottom: 16px;
  }

  .modal260804-container {
    max-height: calc(100vh - 32px);
  }

  .modal260804-image-link {
    max-height: calc(100vh - 92px);
  }

  .modal260804-footer,
  .modal260804-button {
    min-height: 60px;
  }
}


/* ==========================================================
   11. 애니메이션 최소화 설정
========================================================== */

@media (prefers-reduced-motion: reduce) {
  .modal260804-layer,
  .modal260804-container,
  .modal260804-button {
    transition: none !important;
  }
}