/* ===================================
   BRI 레이어 팝업
   - 이미지 직접 노출 (헤더 없음)
   - 드래그: 이미지 영역
   - 오늘 하루 보지 않기 (localStorage)
   - 푸터: form-check__input(체크박스) + 닫기 버튼
   - 모바일: 중앙 고정, 드래그 비활성

   토큰 미존재 구조 수치:
     box-shadow rgba — 그림자 토큰 없음
     z-index: 1000   — z-index 토큰 없음
   =================================== */

.bri-popup {
  position: fixed;
  display: none;
  width: auto;
  max-width: calc(100vw - 40px);
  max-height: 80vh;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
  z-index: 1000;
}

.bri-popup.is-visible {
  display: flex;
  flex-direction: column;
}

/* 이미지 영역 (드래그 핸들) */
.bri-popup__body {
  flex: 1 1 auto;
  min-height: 0;
  line-height: 0;
  overflow: hidden;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  cursor: move;
}

.bri-popup__img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
}

/* 푸터 */
.bri-popup__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  background: var(--color-gray-50);
  border-top: 1px solid var(--color-border);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  gap: var(--gap-button-group);
}

/* 체크박스 레이블 래퍼 */
.bri-popup__no-show {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-inline-icon);
  font-family: var(--font-family);
  font-size: var(--fs-body);
  line-height: var(--lh-base);
  letter-spacing: var(--ls);
  color: var(--color-text-secondary);
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}

/* components.css form-check__input을 사용하므로
   별도 .bri-popup__chk 스타일 불필요 */

/* 닫기 버튼: 아이콘 */
.bri-popup__btn-dismiss {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-secondary);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: var(--transition-fast);
  flex-shrink: 0;
}

.bri-popup__btn-dismiss svg {
  width: var(--icon-md);
  height: var(--icon-md);
  pointer-events: none;
}

.bri-popup__btn-dismiss:hover,
.bri-popup__btn-dismiss:focus-visible {
  color: var(--color-primary-700);
}

/* 태블릿 (≤1023px) */
@media (max-width: 1023px) {
  .bri-popup {
    max-height: 75vh;
  }
}

/* 모바일: 드래그 비활성, 중앙 고정 */
@media (max-width: 767px) {
  .bri-popup {
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%);
    max-width: calc(100vw - var(--space-8));
    max-height: 90vh;
  }

  .bri-popup__body {
    cursor: default;
  }
}