/* 1. 기본 배경 및 레이아웃 */
body {
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  text-align: center;
  background-color: #f0f9ff;
  color: #333;
  padding: 20px;
  margin: 0;
  line-height: 1.6;
}

/* 크롬, 사파리, 엣지, 오페라에서 화살표 제거 */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* 파이어폭스에서 화살표 제거 */
input[type="number"] {
  -moz-appearance: textfield;
}

h1 {
  color: #0284c7;
  margin-top: 10px;
  font-size: 2.2rem;
}

.headerDesc {
  font-size: 1rem;
}

/* 2. 업로드 박스 */
.upload-box {
  max-width: 550px;
  margin: 40px auto;
  border: 3px dashed #7dd3fc;
  padding: 70px 20px;
  border-radius: 25px;
  background: white;
  cursor: pointer;
  color: #0ea5e9;
  font-weight: bold;
  font-size: 1.1rem;
  transition: all 0.3s;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
}

.upload-box:hover {
  background: #e0f2fe;
  border-color: #38bdf8;
  transform: translateY(-2px);
}

/* 3. 상단 제어 바 (결과 상단에 나타남) */
.control-bar {
  max-width: 600px;
  margin: 0 auto 30px;
  padding: 15px 20px;
  background: white;
  border-radius: 20px;
  display: flex;
  flex-direction: column; /* 🌟 요소를 가로가 아닌 세로로 쌓음 */
  justify-content: center; /* 중앙 정렬 */
  align-items: center;
  gap: 15px; /* 요소 간격 */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

#fileCount {
  font-weight: bold;
  color: #64748b;
}

.action-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

/* 4. 결과 그리드 레이아웃 */
.results-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 350px));
  gap: 30px;
  max-width: 1200px;
  margin: 0 auto;
  justify-content: center;
  /* 🌟 중요: 페이드 아웃 효과를 위해 상대 위치 설정 */
  position: relative;
  /* 🌟 중요: 기본적으로는 넘치는 내용을 숨깁니다 */
  overflow: hidden;
  transition: max-height 0.5s ease-in-out; /* 부드럽게 펼쳐지는 애니메이션 */
}

/* 5. 개별 이미지 카드 */
.result-item {
  position: relative;
  background: white;
  padding: 15px;
  border-radius: 20px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
  transition: transform 0.2s ease;
  display: flex;
  flex-direction: column;
}

.result-item:hover {
  transform: translateY(-5px);
}

.result-item img {
  width: 100%;
  height: 220px;
  object-fit: contain; /* 비율 유지하며 꽉 채움 */
  background: #f8fafc;
  border-radius: 12px;
  margin-bottom: 15px;
}

/* 6. 모든 버튼 스타일 통합 */
button {
  border: none;
  border-radius: 10px;
  cursor: pointer;
  font-weight: bold;
  transition: all 0.2s;
  color: white;
}

/* 🌟 [수정] .result-item button 대신 .download-btn 사용 */
.download-btn {
  background: #0ea5e9;
  padding: 12px;
  width: 80% !important; /* 타원형 범인 검거! */
  font-size: 0.95rem;
  position: absolute;
  bottom: 15px; /* 위치 살짝 조정 */
  left: 50%;
  transform: translateX(-50%);
  transition: opacity 0.3s ease;
  color: white; /* 글자색 추가 */
  border: none;
  border-radius: 10px;
}

.result-item button:hover {
  background: #0284c7;
}

/* ❌ 삭제 버튼 스타일 (기존 유지하되 우선순위 확인) */
.delete-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 24px;
  height: 24px;
  background: rgba(255, 255, 255, 0.9) !important; /* 배경색 강제 적용 */
  color: #ff4757 !important; /* X 색상 강제 적용 */
  border: none;
  border-radius: 50% !important; /* 원형 유지 */
  cursor: pointer;
  font-size: 16px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  z-index: 20; /* 다운로드 버튼보다 위에 */
  padding: 0; /* 패딩 초기화 */
  transform: none !important; /* 위치 틀어짐 방지 */
}

/* ❌ 삭제 버튼 호버 효과 수정 */
.delete-btn:hover {
  background: #ff4757 !important; /* 배경색 강제 변경 */
  color: white !important; /* 아이콘 색상 강제 변경 */
  transform: scale(1.1) !important; /* 크기 확대 강제 적용 */
}

/* 전체 다운로드 버튼 (상단) */
#downloadAllBtn {
  background: #059669;
  padding: 10px 20px;
}

#downloadAllBtn:hover {
  background: #047857;
}

/* 🌟 Add More 버튼 스타일 */
.add-more-btn {
  background-color: #f59e0b; /* 따뜻한 주황색 */
  padding: 10px 20px;
  color: white;
  font-weight: bold;
  border-radius: 10px;
  transition: all 0.2s;
}

.add-more-btn:hover {
  background-color: #d97706;
  transform: translateY(-2px);
}

/* 버튼 사이의 간격 조정 (이미 action-btns에 gap이 있다면 생략 가능) */
.action-btns {
  display: flex;
  gap: 10px;
  align-items: center;
}

/* 리셋 버튼 */
.reset-btn {
  background: #94a3b8;
  padding: 10px 20px;
}

.reset-btn:hover {
  background: #64748b;
}

/* 7. FAQ 및 푸터 (하단부) */
.faq-container {
  max-width: 600px;
  margin: 60px auto;
  text-align: left;
}
.faq-item {
  background: white;
  padding: 18px;
  margin-bottom: 12px;
  border-radius: 12px;
  cursor: pointer;
}
.faq-answer {
  display: none;
  margin-top: 10px;
  color: #666;
  font-size: 0.95rem;
}

.site-footer {
  margin-top: 100px;
  padding: 40px;
  border-top: 1px solid #e2e8f0;
}

/* 개인정보 처리방침 박스 스타일 */
.privacy-box {
  display: none; /* 🌟 중요: 처음에는 보이지 않게 설정 */
  background: white;
  padding: 20px;
  border-radius: 15px;
  margin: 20px auto;
  max-width: 600px;
  text-align: left;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); /* 부드러운 그림자 */
  line-height: 1.6;
  color: #666;
}

/* 푸터 버튼 스타일 */
.privacy-btn {
  background: none;
  border: none;
  color: #94a3b8;
  text-decoration: underline;
  cursor: pointer;
  font-size: 0.85rem;
  margin-top: 10px;
}

/* 🌟 리사이즈 설정 스타일 */
.resize-settings {
  display: flex;
  flex-wrap: wrap; /* 모바일에서 가로/세로 입력창이 위아래로 나뉘도록 */
  gap: 15px;
  align-items: center;
  justify-content: center;
}

.input-group {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  color: #475569;
  font-weight: bold;
  white-space: nowrap; /* 글자가 잘리지 않게 설정 */
}

.input-group input {
  width: 80px;
  padding: 8px;
  border: 2px solid #e2e8f0;
  border-radius: 8px;
  text-align: center;
  outline: none;
  transition: border-color 0.2s;
}

.input-group input:focus {
  border-color: #0ea5e9;
}

/* 툴팁 전체 컨테이너 */
.tooltip-container {
  position: relative;
  display: inline-flex; /* 아이콘을 가운데 정렬하기 위해 flex 사용 */
  align-items: center;
  cursor: help;
}
/* 물음표 아이콘 디자인 (기존 동일) */
.help-icon {
  display: inline-block;
  width: 20px; /* 아이콘 크기 약간 키움 */
  height: 20px;
  background-color: #cbd5e1;
  color: white;
  font-size: 12px;
  font-weight: bold;
  line-height: 20px;
  text-align: center;
  border-radius: 50%;
  transition: background-color 0.2s;
  cursor: pointer;
}

.tooltip-container:hover .help-icon {
  background-color: #0ea5e9;
}

/* 실제 말풍선 내용 */
.tooltip-content {
  visibility: hidden;
  opacity: 0;
  width: 280px; /* 너비를 조금 더 넓게 */
  background-color: #334155;
  color: #fff;
  text-align: left;
  border-radius: 10px;
  padding: 15px; /* 패딩 약간 증가 */
  position: absolute;
  z-index: 100;
  bottom: 140%; /* 아이콘 위쪽에 표시 */
  left: 50%;
  transform: translateX(-50%);
  transition: all 0.3s ease; /* 부드러운 전환 효과 */
  font-size: 13px; /* 글자 크기 약간 키움 */
  line-height: 1.7;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3); /* 그림자 더 부드럽게 */
  pointer-events: none;
}

/* 말풍선 꼬리표 (기존 동일) */
.tooltip-content::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -8px; /* 꼬리표 크기 조정 */
  border-width: 8px;
  border-style: solid;
  border-color: #334155 transparent transparent transparent;
}

/* 마우스 호버 시 툴팁 보이기 (기존 동일) */
.tooltip-container:hover .tooltip-content {
  visibility: visible;
  opacity: 1;
  bottom: 150%; /* 살짝 올라오는 애니메이션 효과 */
}

/* 기존 input-group 내 간격 조정 (기존 동일) */
.input-group {
  display: flex;
  align-items: center;
}

/* 포멧 방식 */
#formatSelect {
  padding: 8px;
  border: 2px solid #e2e8f0;
  border-radius: 8px;
  outline: none;
  cursor: pointer;
  background: white;
  font-weight: bold;
  color: #475569;
}

#formatSelect:focus {
  border-color: #0ea5e9;
}

/* 태블릿 및 작은 화면 (약 850px 이하) */
@media (max-width: 850px) {
  .control-bar {
    padding: 20px;
    flex-direction: column; /* 세로로 큰 덩어리 배치 */
    gap: 20px;
  }

  #fileCount {
    order: -1; /* 파일 개수를 맨 위로 올림 */
    font-size: 1.1rem;
  }
}

/* 모바일 화면 (약 500px 이하) */
@media (max-width: 500px) {
  .resize-settings {
    flex-direction: column; /* 입력창을 세로로 배치 */
    width: 100%;
  }

  .input-group {
    width: 100%;
    justify-content: space-between; /* 라벨과 입력창을 양끝으로 */
  }

  .action-btns {
    width: 100%;
    flex-direction: column; /* 버튼들도 세로로 쌓기 */
  }

  .action-btns button {
    width: 100%; /* 버튼이 화면 꽉 차게 */
  }

  .input-group input {
    width: 100px; /* 입력창 크기 적절히 조절 */
  }
}