/* style.css */
body {
    margin: 0;
    padding-top: 60px; /* 헤더 높이에 맞게 조정 */
    background-color: #fff;  /* 흰색 배경 */
    color: #000;             /* 검정 텍스트 */
    font-family: sans-serif;
  }
button, a {
  touch-action: manipulation;
}

/* style.css */

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
}
.photo-card-container {
  position: relative;
  overflow: hidden;
}
.photo-card {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}
.subcat-label {
  position: absolute;
  bottom: 4px;
  left: 4px;
  background: rgba(0,0,0,0.6);
  color: #fff;
  padding: 2px 6px;
  font-size: 12px;
  border-radius: 4px;
}
.overlay-text {
  position: absolute;
  top: 4px;
  left: 4px;
  background: rgba(255,255,255,0.8);
  color: #333;
  padding: 2px 4px;
  font-size: 10px;
  border-radius: 4px;
}

/* 모바일: 최대 그리드 너비 320px, 4열 */
@media (max-width: 767px) {
  #photo-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    max-width: 100%;
    padding: 7px;
    margin: 0 auto;    /* 가운데 정렬 */
    touch-action: manipulation;
  }
}
/* 그룹 헤더는 그리드 전체를 span */
#photo-grid h2 {
  grid-column: 1 / -1;  /* 시작 1열부터 마지막 열까지 */
  margin: 16px 0 8px;
  font-size: 1rem;
  font-weight: bold;
}

/* 태블릿 (패드): 최대 그리드 너비 320px, 7열 (즉, 7개 열로 나누어짐) */
@media (min-width: 768px) and (max-width: 1024px) {
  #photo-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 10px;
    padding: 7px;
    margin: 0 auto;
  }
}

/* PC: 각 포토카드 150px 고정, 화면 크기에 맞춰 여러 열 배치 */
@media (min-width: 1025px) {
  #photo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, 140px);
    gap: 10px;
    padding: 10px;
    justify-content: center;
  }
}
.photo-card,
.photo-card img {
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none;   /* 선택 방지 */
  user-select: none;
}
/* 포토카드 기본 스타일: 미보유 상태(불투명도 40%) */
.photo-card {
    display: block;
    width: 100%;
    aspect-ratio: 2 / 3;
    object-fit: cover;
    opacity: 0.4;            /* 미보유 상태 */
    transition: opacity 0.3s ease;  /* 부드러운 전환 효과 */
    border-radius: 8px; /* 둥근 테두리 추가 */
    touch-action: manipulation;
  }
  
  /* 포토카드가 보유 상태일 때: 불투명도 100% */
  .photo-card.checked {
    opacity: 1;
  }
/* 모달 기본 스타일 */
.modal {
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.8); /* 어두운 배경 */
    display: none;
  }
  
  /* 모달 컨텐츠 스타일 - 세로형 레이아웃 */
  .modal-content {
   margin: 10vh auto;  /* 뷰포트 높이의 10% 만큼 위와 아래 여백 */
   padding: 20px;
   background-color: #fff;
   width: 90%;
  max-width: 320px;   /* 최대 너비 400px */
  max-height: 70vh;   /* 최대 높이를 80% 뷰포트 높이로 제한 */
  padding: 10; /* 내부 패딩은 필요에 따라 조절 */
  border-radius: 8px;
  position: relative;
}
  
  /* 모달 닫기 버튼 스타일 */
  .close {
    position: absolute;
    top: 10px;
    right: 20px;
    font-size: 28px;
    cursor: pointer;
   }

/* 모달 안의 이미지 */
#modal-image {
  display: block;
  width: 80%;    /* 가로 폭을 모달 너비에 맞춤 */
  height: auto;   /* 세로는 비율 유지 */
  margin: 0 auto; /* 수평 중앙정렬 */
}

/* 속성 정보 영역 */
#modal-info {
  padding: 15px;        /* 이미지 아래쪽에 여백을 줍니다. */
  text-align: left;     /* 왼쪽 정렬 */
  line-height: 1.3;     /* 줄 간격 일정 */
  font-size: 16px;
  word-wrap: break-word; /* 너무 긴 단어도 줄바꿈되도록 */
}

/* 속성 하나하나를 줄바꿈하고 싶으면 p 태그마다 margin을 줍니다. */
#modal-info p {
  margin: 0 0 8px 0; /* 아래쪽에만 살짝 여백 */
}

/* FAB 버튼 스타일 */


#fab {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: #000;
    color: #fff;
    border: none;
    font-size: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 1000;
  }
  /* 좌측 하단: 카테고리 토글 버튼 */
#categoryToggleBtn {
    position: fixed;
    bottom: 20px;
    left: 20px;            /* 좌측 20px 고정 */
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: #000;
    color: #fff;
    border: none;
    font-size: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 1000;
  }
  

/* FAB 모달 내 리스트 스타일 (옵션) */
#user-modal .modal-content ul {
    list-style: none;
    padding: 0;
  }
  #user-modal .modal-content li {
    margin: 10px 0;
  }
  #user-modal .modal-content button {
    padding: 10px;
    font-size: 16px;
    cursor: pointer;
  }
 /* ── style.css 끝부분에 추가(또는 기존 header 스타일 교체) ───────── */
#search-header{
  position:fixed;            /* 이미 고정되어 있던 부분 유지 */
  top:0; left:0; width:100%;
  display:flex;              /* 한 줄 정렬 */
  align-items:center;
  gap:10px;                   /* 요소 간 여백 */
  padding: 10px;
  background:#fff;
  box-shadow:0 2px 4px rgba(0,0,0,.1);
  z-index:1000;
}

/* 검색창이 남은 공간을 모두 차지하도록 */
#search-input{
  flex:1 1 auto;             /* ← 핵심: 가변 너비 */
  min-width:0;               /* flex 축소 시 깨짐 방지 */
  line-height: 36px;
  font-size:16px;
  border:1px solid #ccc;
  border-radius:4px;
}

#view-toggle{
  flex:0 0 auto;
  margin: 0px 20px 0px 0px;
  font-size:14px;
  background:#000;
  color:#fff;
  border:none;
  border-radius:4px;
  height: 36px;    
  cursor:pointer;
  z-index: 1200;       /* count-display(1100)보다 크게 설정 */
}
#search-detail-btn {
  font-size: 20px;
  border: none;
  border-radius: 4px;
  height: 36px;    
  line-height: 36px;
  background-color: #000;
  color: #fff;
  cursor: pointer;
}


#user-data-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
}

#user-data-modal .modal-content {
  background-color: #fff;
  padding: 20px;
  width: 90%;
  max-width: 400px;
  max-height: 80vh;
  overflow-y: auto;
  border-radius: 8px;
  margin: 10vh auto;
  position: relative;
}
#count-display {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  padding: 10px 15px;
  border-radius: 50px;
  font-size: 16px;
  font-weight: bold;
  z-index: 1100;
  text-align: center;
}
      
  /* 이미 .modal에 z-index: 1000이 있다면 */
    #user-data-modal {
    z-index: 2000;
  }     
  
  .photo-card-container {
    width: 100%;
    position: relative;
    display: inline-block;
  }
  
  .image-overlay {
    position: absolute;
    bottom: 5px;
    left: 5px;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    padding: 3px 6px;
    border-radius: 4px;
    font-size: 12px;
    z-index: 10; /* 혹시 이미지보다 뒤로 깔리는 경우 대비 */
  }
  
  /* 전역 인쇄/프리뷰 격자 */
#print-preview {
  display: grid;
  grid-template-columns: repeat(16, minmax(0, 1fr));
  gap: 4px;
  margin: 16px;
}
#print-preview img {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
}
/* static/style.css 파일 맨 아래에 추가 */
.sheet-container img {
  transition: opacity 0.3s;
}

#export-modal button, 
#export-modal .download-btn {
  padding: 8px 12px;
  background: #4CAF50;
  color: white;
  border: none;
  cursor: pointer;
  margin: 5px;
}
/* style.css에 추가 */
.sheet-container {
  display: grid;
  grid-template-columns: repeat(16, 1fr); /* 16열 고정 */
  gap: 5px;
  width: 100%;
  overflow-x: auto; /* 넘칠 경우 스크롤 */
}

.sheet-container img {
  width: 100%;
  aspect-ratio: 1/1; /* 정사각형 유지 */
  object-fit: cover;
  transition: opacity 0.3s;
}
.image-loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}
/* 이미지 시트 그리드 스타일 */
.sheet-container {
  display: grid;
  grid-template-columns: repeat(16, 1fr);
  gap: 5px;
  width: 100%;
}

/* 모달 버튼 스타일 */
.modal-control-btn {
  padding: 10px 15px;
  margin: 5px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-weight: bold;
}

html, body, #photo-grid, .photo-card {
  touch-action: manipulation;
}

/* 상세 모달 안 이미지/컨테이너에서 우클릭·롱프레스 방지 */
#photo-modal,
#photo-modal .modal-content,
#modal-image {
  user-select: none;             /* 텍스트 선택 금지 */
  -webkit-user-select: none;     /* iOS Safari */
  -webkit-user-drag: none;       /* 이미지 드래그 금지 */
  -webkit-touch-callout: none;   /* 롱프레스 메뉴 금지 */
}

#friend-modal { z-index: 2100; }   /* 설정 모달보다 위 */


#save-btn { background: #4CAF50; color: white; }
#close-btn { background: #f44336; color: white; }