@charset "utf-8";
@import url('https://cdn.rawgit.com/moonspam/NanumSquare/master/nanumsquare.css');

.gallery-board {    
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
    gap: 10px;
}
.gallery-grid {
    display: flex;
    flex-direction: column;
}

.pic-header {
    display: flex;
    gap: 5px;
    align-items: center;
    justify-content: space-between;
}

.list-option {
    display: flex;
    flex: 1;
    gap: 5px;
	margin-bottom: 3px;
	opacity: 20%;
}

.list-option:hover {
	opacity: 100%;
}

.list-option.btn {
	justify-content: flex-end;
	font-size: 10px;
    font-family: nanumsquare;
}

.gall_chk {
    z-index: 10;
}

/* 보호글/비밀글 아이콘 스타일 */
.status-icon { /* .ico-secret, .ico-protect의 공통 스타일을 여기에 넣으면 됩니다 */
    /*background-color: #dc3545; /* 기본은 비밀글 색상 */
    color: #fff;
    border-radius: 10px;
    padding: 0px 5px;
    font-size: 10px;
    font-family: nanumsquare;
    display: flex;
    align-items: center;
    gap: 3px;
    z-index: 10; /* 오버레이 위로 올라오도록 설정 */
}

.status-icon.protect { /* 보호글 개별 스타일 */
   /* background-color: #ffc107; /* 주황색 계열 */
    /*color: #333;*/
}

.status-icon.secret { /* 비밀글 개별 스타일 (기본 .status-icon 색상과 동일) */
    /* 특별히 변경할 부분이 없으면 이 블록은 생략해도 됩니다. */
}

.status-icon.member { /* 멤버공개 개별 스타일 (파란색 계열) */
    /*background-color: #007bff;*/
   /* color: #fff;*/
}

.status-icon.secret i,
.status-icon.protect i,
.status-icon.member i {
    color: #fff; /* 기존 흰색 유지 */
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.8); /* 은은한 흰색 그림자 */
    /* 더 강한 효과를 원하면 그림자를 추가합니다. */
    /* text-shadow: 0 0 5px rgba(255, 255, 255, 0.8), 0 0 10px rgba(255, 255, 255, 0.5); */
}

.gallery-item {
  position: relative;
  cursor: pointer;
  overflow: hidden;
  border: 0px solid #bbb;
  border-radius: 30px;
  /*background: #eeeeee;*/
  backdrop-filter: blur(2px);
  filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, 0.5));
  transition: transform 0.2s ease-in-out; /* 부드러운 전환 효과를 추가합니다. */
}

.gallery-item:hover {
    transform: scale(1.02); /* 마우스 오버 시 틀 전체를 105% 확대합니다. */
}

.gallery-item img {
  /*mask-image: linear-gradient(to bottom right, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));*/
  mask-image: linear-gradient(
      rgba(255, 255, 255, 1) 40%,      /* 투명 효과 시작 지점을 40%로 올려 더 넓게 퍼지도록 */
      rgba(255, 255, 255, 0.5) 80%,    /* 중간에 반투명 지점 (0.3)을 추가하여 더 부드럽게 */
      rgba(255, 255, 255, 0.1)        /* 하단이 완전히 투명 대신 10% 불투명 */
  );
  /*position: relative;absolute;*/
  position: relative;
  z-index: 2;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  object-fit: cover;    
  filter: saturate(90%) brightness(100%);
  transform: scale(1.3);
}


.gallery-item img:hover {    
        overflow: hidden;
        filter: saturate(110%) brightness(105%);
	transform: scale(1.35);
	transition: .25s;
}

/* 보호글/비밀글 아이콘 및 오버레이 컨테이너 */
.list-status {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column; /* 아이콘과 텍스트가 세로로 정렬되도록 */
    justify-content: center; /* 세로 중앙 정렬 */
    align-items: center; /* 가로 중앙 정렬 */
    color: #fff; /* 아이콘 및 텍스트 색상 */
    font-size: 1.2em; /* 아이콘 크기 */
    z-index: 5; /* 썸네일 위에 표시되도록 z-index 설정 */
    text-align: center;
    padding: 10px; /* 내부 여백 */
    box-sizing: border-box; /* 패딩이 너비/높이에 포함되도록 */
    backdrop-filter: blur(5px); /* 이 줄을 추가합니다. (5px는 원하는 만큼 조절 가능) */
    -webkit-backdrop-filter: blur(5px); /* 웹킷 기반 브라우저를 위한 접두사 */
}

/* 오버레이 배경색 */
.status-protect-overlay {
    background-color: rgba(255, 204, 0, 0.4); /* 보호글 오버레이 (노란색 투명으로 변경) */
}

.status-member-overlay {
    background-color: rgba(0, 70, 108, 0.5); /* 멤버공개 오버레이 (짙은 파랑 투명) */
}

.status-secret-overlay {
    background-color: rgba(0, 0, 0, 0.6); /* 검은색 60% 반투명 */
}

/* 상태 아이콘 개별 스타일 (선택 사항, 필요시 조절) */
.status-icon {
    display: block; /* 아이콘이 한 줄씩 표시되도록 */
    font-size: 1.5em; /* 아이콘 크기 더 크게 */
    margin-bottom: 5px; /* 아이콘 아래 여백 */
}

.status-icon.protect {
    /* 특정 아이콘 색상 조절이 필요하면 여기에 추가 */
}

.status-icon.member {
    /* 특정 아이콘 색상 조절이 필요하면 여기에 추가 */
}

.status-icon.secret {
    /* 특정 아이콘 색상 조절이 필요하면 여기에 추가 */
}

/* 마우스 오버 시 투명도 조절 (선택 사항) */
.gallery-item:hover .list-status {
    opacity: 0.9; /* 마우스 오버 시 오버레이가 약간 더 투명해지도록 */
}

/* 모바일 */
@media (max-width: 768px) {
    .list-status {
        font-size: 1em; /* 모바일에서 아이콘 크기 조절 */
    }
    .status-icon {
        font-size: 2.5em; /* 모바일에서 아이콘 크기 조절 */
    }
}

.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: none; /* JavaScript로 제어 */
  z-index: 1000;
  backdrop-filter: blur(3px);
}

.modal-content {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.8); /* 초기 크기 작게 */
    opacity: 0; /* 초기 투명 */
    max-width: 900px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    z-index: 1001;
    display: flex;
    flex-direction: column;
    gap: 20px;
    transition: transform 0.15s ease-out, opacity 0.1s ease-out; /* 애니메이션 속도 0.3s에서 0.25s로 변경 */
}

.modal-content.modal-active {
    transform: translate(-50%, -50%) scale(1); /* 활성화 시 원래 크기 */
    opacity: 1; /* 활성화 시 불투명 */
}

.modal-close {
    position: relative;
    top: 10px; 
    left: 5px; 
    font-size: 45px;
    cursor: pointer;
    color: #ffffff;
    text-shadow: 0px 0px 3px black;
    transition: transform 0.3s ease-in-out; /* 0.3초 동안 부드럽게 변환 */
}

#gallery-modal-close {
    /* 기존 스타일 (위치, 크기, 색상, 커서 등)은 그대로 유지 */
    position: relative; 
    top: 10px;
    left: 5px;
    font-size: 45px;
    cursor: pointer;
    color: #ffffff;
    /* 중요: 기존 검정색 text-shadow를 유지하거나, 빛나는 효과와 충돌한다면 제거할 수 있습니다. */
    text-shadow: 0px 0px 3px black; 
    
    /* 중요: span 요소에 transform/text-shadow 적용을 위해 display를 inline-block으로 설정 */
    display: inline-block; 
    
    /* 빛나고 뜨는 효과를 위한 부드러운 전환(transition) 설정 */
    /* box-shadow 대신 text-shadow를 transition에 포함 */
    transition: text-shadow 0.2s ease-in-out, transform 0.2s ease-in-out; 
    
    /* 렌더링 최적화 */
    backface-visibility: hidden;
    transform: translateZ(0); /* 기본 상태 transform */
    /* will-change도 text-shadow를 포함하도록 변경 */
    will-change: transform, text-shadow; 
}

/* 마우스를 올렸을 때 (hover) 적용되는 효과 */
#gallery-modal-close:hover {
    transform: translateY(-2px) translateZ(0); /* 위로 3px 뜨는 효과 */
    
    /* 중요: text-shadow를 사용하여 'x' 문자 자체에 빛나는 효과 적용 */
    text-shadow: 
        0 0 5px rgba(255, 255, 255, 0.9),  /* 가까이서 진한 빛 */
        0 0 15px rgba(255, 255, 255, 0.7), /* 중간 범위의 빛 */
        0 0 20px rgba(255, 255, 255, 0.3); /* 멀리 퍼지는 부드러운 빛 */
    /* box-shadow는 여기서 제거합니다. */
}

.modal-description {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 15px; /* 상하 패딩을 10px로 줄이고, 좌우는 15px 유지 */
    border-radius: 20px;
}

.modal-title {
    font-family: nanumsquare;
    font-size: 18px;
    font-weight: bold;
    color: #eee;
	text-shadow: 1px 3px 3px black;
}

.modal-meta {
    font-family: nanumsquare;
    font-size: 12px;
    font-weight: normal;
    color: #bbb;
    /* 추가: 텍스트가 잘리지 않고 줄바꿈되도록 설정 */
    white-space: normal; /* 텍스트가 자동으로 줄바꿈되도록 합니다. */
    word-break: break-word; /* 긴 단어도 필요하면 끊어서 줄바꿈합니다. */
    line-height: 1.4; /* 줄 간격을 약간 늘려 가독성을 높일 수 있습니다. (선택 사항) */
    margin: 0; /* 혹시 모를 기본 마진 제거 */
    padding: 0; /* 혹시 모를 기본 패딩 제거 */
}

.modal-navigation {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

/* 모달 이전/다음 버튼 기본 스타일 */
.modal-nav-btn {
    background: none;
    border: none;
    font-size: 2rem;
    cursor: pointer;
    z-index: 10;
    padding: 0 10px;
    color: #eee;
    text-shadow: 3px 3px 3px black; /* 기존 검정색 text-shadow는 유지합니다. */
    
    /* 부드러운 효과를 위한 transition을 box-shadow에서 text-shadow로 변경 */
    transition: text-shadow 0.2s ease-in-out, transform 0.2s ease-in-out;
    /* will-change도 text-shadow를 포함하도록 변경하여 최적화 */
    will-change: transform, text-shadow; 
}

/* 마우스를 올렸을 때 (hover) 적용되는 효과 */
.modal-nav-btn:hover {
    transform: translateY(-3px); /* 위로 3px 살짝 이동 (뜨는 효과) */
    
    /* 중요: text-shadow를 사용하여 '<' 또는 '>' 아이콘 자체에 빛나는 효과 적용 */
    text-shadow: 
        0 0 5px rgba(255, 255, 255, 0.9),  /* 가까이서 진한 빛 */
        0 0 15px rgba(255, 255, 255, 0.7), /* 중간 범위의 빛 */
        0 0 20px rgba(255, 255, 255, 0.3); /* 멀리 퍼지는 부드러운 빛 */
    /* 기존 box-shadow는 여기서 제거합니다. */
}



.modal-img {
  max-width: 100%;
  max-height: 700px;
  display: block;
}

.simple-ui-btn {
    display: flex;
    gap: 5px;
}

.simple-btn {
    background: #eee;
    color: #333;
    padding: 5px;
    font-size: 18px;
    border-radius: 10px;
    border: 1px inset #eee;
}

.simple-btn.admin {
    background: #333 !important;
}

button.select-trash-btn {
    width: 30px;
    height: 30px;
    border: 1px inset #eee;
    background: #333;
    color: #eee;
    border-radius: 10px;
    font-size: 14px;
}

.simple-chk-option {
    display: flex;
    gap: 5px;
    justify-content: flex-end;
}

.simple-category {
    display: flex;
	gap: 5px;
    margin-bottom: 20px;
    justify-content: center;
}

.simple-category li {
    background: #333;
    color: #eee;
    font-size: 10px;
    font-family: 'NanumSquare';
    border-radius: 10px;
    padding: 2px 5px;
    border: 1px inset #333;
}

.simple-guide {
    display: flex;
    justify-content: space-between;
}

.ui-search-box select, .ui-search-box input[type="text"] {
    background: #333;
	color: #eee;
	border-radius: 15px;
    width: 100%;
}

/* 모달 콘텐츠 조절 */
#gallery-modal .modal-content {
    max-width: none;
    width: auto;
    max-height: 90vh;
    overflow: hidden; /* <--- 이 부분을 auto에서 hidden으로 변경 */
    box-sizing: border-box;
}

/* 모달 이미지 조절 */
#gallery-modal .modal-img {
    max-width: none;
    width: auto;
    height: auto;
    display: block;
    margin: 0 auto;
}

/* 모달 화면에서 제목 숨기기 */
.modal-title {
    display: none;
}

/* 모달 화면에서 작성자 및 작성 시간 숨기기 */
.modal-meta {
    display: none;
}

/* 키보드 활성화 시 효과 (hover 효과와 동일하게) */
.modal-nav-btn.keyboard-active {
    transform: translateY(-2px); /* 위로 3px 살짝 뜨는 효과 */
    text-shadow: 
        0 0 5px rgba(255, 255, 255, 0.9),  /* 빛나는 효과 */
        0 0 15px rgba(255, 255, 255, 0.7), 
        0 0 20px rgba(255, 255, 255, 0.3); 
}

/* Esc 키로 모달 닫을 때 X 아이콘에 적용되는 효과 (hover 효과와 동일) */
#gallery-modal-close.keyboard-active {
    transform: translateY(-2px); /* 위로 3px 살짝 뜨는 효과 */
    text-shadow: 
        0 0 5px rgba(255, 255, 255, 0.9),  /* 빛나는 효과 */
        0 0 15px rgba(255, 255, 255, 0.7), 
        0 0 20px rgba(255, 255, 255, 0.3); 
}

/* 클릭 불가능한 갤러리 아이템에 커서 기본값 적용 */
.gallery-item.no-click-cursor {
    cursor: default;
}

/* 이미지 슬라이드 애니메이션 정의 */
@keyframes slide-out-left {
    from { transform: translateX(0); opacity: 1; }
    to { transform: translateX(-100%); opacity: 0; }
}

@keyframes slide-out-right {
    from { transform: translateX(0); opacity: 1; }
    to { transform: translateX(100%); opacity: 0; }
}

@keyframes slide-in-left {
    from { transform: translateX(-100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

@keyframes slide-in-right {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

/* 애니메이션 적용을 위한 클래스 */
.modal-img.slide-prev-out {
    animation: slide-out-right 0.1s ease-out forwards; /* 0.25초로 줄이고 ease-in-out으로 변경 */
}

.modal-img.slide-prev-in {
    animation: slide-in-left 0.2s ease-in-out forwards; /* 0.25초로 줄이고 ease-in-out으로 변경 */
}

.modal-img.slide-next-out {
    animation: slide-out-left 0.1s ease-out forwards;
}

.modal-img.slide-next-in {
    animation: slide-in-right 0.2s ease-in-out forwards;
}

/* 애니메이션 중에는 부모 요소의 overflow를 hidden으로 설정하여 이미지가 밖으로 나가지 않게 함 */
.modal-content.is-animating-image {
    overflow: hidden;
}

/* 모바일 */
@media (max-width: 768px) {
	.gallery-board {
		gap: 10px !important;
	}
	.pic-header {
		display: none !important;
	}
	.gallery-item {
		width: 150px !important;
		height: 150px !important;
	}
}