@charset "UTF-8";

.contents input[type="image"] {
  max-width: 100% !important; /* 가로가 화면을 넘지 못하도록 제약 */
  height: auto !important;    /* DB 인라인 고정 px를 무력화하고 가로 비율에 맞춰 세로 자동 렌더링 */
}

/* ========================================================
   라이트박스 레이어 팝업 스타일 (상하좌우 완벽 대칭 여백 스펙)
   ======================================================== */
/* 팝업 전체 외곽 프레임 */
.mylightbox {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .85);
  display: none;
  z-index: 9999;
  overflow: auto;            /* 이미지가 실제로 늘어난 정방향(오른쪽/아래)으로만 스크롤바 자동 생성 */
  text-align: left;          /* 오버플로우 스크롤 시작점 유지를 위한 텍스트 정렬 고정 */
  -webkit-overflow-scrolling: touch;
}

/* 팝업 활성화 클래스 */
.mylightbox.open { 
  display: block; 
}

/* 이미지 스테이지: inline-flex 구조로 이미지의 물리적 실제 크기에 맞춰 부모가 함께 유연하게 늘어남 */
.mylightboxstage {
  display: inline-flex;      
  min-width: 100%;           /* 기본 화면 뷰포트 크기 최하단 확보 */
  min-height: 100%;          
  justify-content: center;   /* 화면보다 이미지 크기가 작을 때 수평 정중앙 정렬 */
  align-items: center;       /* 화면보다 이미지 크기가 작을 때 수직 정중앙 정렬 */
  vertical-align: top;
  
  /* [대칭 여백] 끝까지 스크롤해도 사방 여백이 60px로 정교하게 유지되는 핵심 속성 */
  padding: 60px;             
  box-sizing: border-box;
}

/* 확대용 이미지 스타일 */
.mylightboximg {
  display: block;
  max-width: 100% !important;  /* 기존 게시판 스타일시트의 max-width 제약 완전 차단 */
  max-height: none !important;
  width: auto;
  height: auto;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  user-select: none;
  -webkit-user-drag: none;
}

/* 우측 상단 고정 닫기 X 버튼 (스크롤을 내려도 항상 고정) */
.mylightboxclose {
  position: fixed;           
  top: 20px;
  right: 20px;
  border: 0;
  width: 40px; 
  height: 40px;
  border-radius: 50%;
  background: rgba(0, 0, 0, .55);
  z-index: 10000;            /* 이미지 영역보다 무조건 앞 레이어에 노출 */
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_2515_93180)'%3E%3Cpath d='M25.3337 8.55334L23.447 6.66667L16.0003 14.1133L8.55366 6.66667L6.66699 8.55334L14.1137 16L6.66699 23.4467L8.55366 25.3333L16.0003 17.8867L23.447 25.3333L25.3337 23.4467L17.887 16L25.3337 8.55334Z' fill='%23FFFFFF'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_2515_93180'%3E%3Crect width='32' height='32' fill='red'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
  background-size: 32px;
  background-repeat: no-repeat;
  background-position: center;
  transition: background-color 0.2s;
}

.mylightboxclose:hover {
  background-color: rgba(0, 0, 0, 0.8);
}