/* --- 변수 정의 (기존 유지 + 보강) --- */
:root {
  --bg-color: #f0f9ff;
  --card-bg: #ffffff;
  --text-main: #1e293b;
  --text-sub: #64748b;
  --border-color: #e2e8f0;
}

[data-theme="dark"] {
  --bg-color: #0f172a;
  --card-bg: #1e293b;
  --text-main: #f1f5f9;
  --text-sub: #94a3b8;
  --border-color: #334155;
}

/* 1. 기본 배경 및 레이아웃 */
body {
  font-family: "Pretendard", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  text-align: center;
  background-color: var(--bg-color);
  color: var(--text-main);
  transition:
    background-color 0.3s,
    color 0.3s;
  padding: 20px;
  margin: 0;
  line-height: 1.6;
}

/* 아이콘 전환 효과 */
.icon-sun {
  display: none;
}
.icon-moon {
  display: inline-block;
}
[data-theme="dark"] .icon-sun {
  display: inline-block;
}
[data-theme="dark"] .icon-moon {
  display: none;
}

/* --- 🌟 기존 요소들 변수 적용 (이 부분이 중요!) --- */

/* --- 🌟 다크모드 버튼 스타일 --- */
.theme-toggle-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  font-size: 1.4rem;
  cursor: pointer;
  padding: 8px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  transition: all 0.3s;
}

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

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

h1 a {
  text-decoration: none; /* 밑줄 제거 */
  display: flex;
  flex-direction: column; /* 위아래로 배치 */
  align-items: center;
}

.brand-name {
  font-size: 2.5rem; /* 브랜드명은 크게 */
  font-weight: bold;
  color: #0ea5e9;
  line-height: 1.2;
}

.brand-tagline {
  font-size: 1rem; /* 설명은 작게 */
  font-weight: normal;
  color: #0ea5e9; /* 조금 더 연한 회색으로 */
}

.headerDesc {
  color: var(--text-sub); /* 고정색 대신 변수 사용 */
  font-size: 1rem;
  transition: all 0.3s ease;
}

.headerDesc strong {
  font-size: 1.2rem;
}

/* 2. 업로드 박스 - 돼지의 코처럼 둥글고 부드러운 느낌 */
.upload-box {
  max-width: 550px;
  margin: 40px auto;
  border: 3px dashed #7dd3fc;
  padding: 70px 20px;
  border-radius: 30px;
  background: var(--card-bg); /* white -> 변수 */
  cursor: pointer;
  color: #0ea5e9;
  font-weight: bold;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 10px 25px rgba(14, 165, 233, 0.1);
}

.upload-box:hover {
  background: #e0f2fe;
  border-color: #38bdf8;
  transform: translateY(-3px);
  box-shadow: 0 15px 30px rgba(14, 165, 233, 0.15);
}

/* 3. 상단 제어 바 (결과 상단에 나타남) */
.control-bar {
  max-width: 600px;
  margin: 0 auto 30px;
  padding: 15px 20px;
  background: var(--card-bg); /* white -> 변수 */
  border-radius: 25px;
  border: 1px solid var(--border-color); /* 고정색 -> 변수 */
  display: flex;
  flex-direction: column;
  gap: 15px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
}

#fileCount {
  font-weight: bold;
  color: var(--text-sub); /* 변수 사용 */
}

.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: var(--card-bg); /* 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: var(--bg-color); /* 연한 회색 -> 배경색 변수 */
  border-radius: 12px;
  margin-bottom: 15px;
}

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

/* 용량 표시 텍스트 스타일 */
.size-status {
  font-size: 13px;
  color: var(--text-sub); /* 변수 사용 */
  margin: 8px 0; /* 위아래 간격 */
  font-weight: 500;
  min-height: 1.2em;
  display: block;
}

/* 결과값 강조 (두껍게) */
.size-status b {
  color: inherit;
}

/* 파일명 스타일 (참고용) */
.file-name {
  font-weight: bold;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 4px;
}

/* 🌟 다운로드 버튼 위치 수정 (절대 위치 제거) */
.download-btn {
  background: #0ea5e9;
  padding: 12px;
  width: 100% !important; /* 카드 너비에 맞춤 */
  font-size: 0.95rem;
  margin-top: auto; /* 내용이 적어도 항상 카드 맨 아래로 밀어냄 */
  cursor: pointer;
  color: white;
  border: none;
  border-radius: 10px;
  transition: background 0.2s;
  /* 아래 absolute 관련 설정들은 삭제하거나 주석 처리하세요 */
  position: static !important;
  transform: none !important;
  left: auto !important;
}

.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: #0ea5e9;
  padding: 10px 20px;
}

#downloadAllBtn:hover {
  background: #0284c7;
}

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

.add-more-btn:hover {
  background-color: #0ea5e9;
  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-group h3 {
  margin-top: 30px;
  margin-bottom: 15px;
  font-size: 1.1rem;
  color: #0ea5e9; /* 파란 돼지 컨셉의 포인트 컬러 */
  border-left: 4px solid #0ea5e9;
  padding-left: 10px;
}

[data-theme="dark"] .faq-container h2 {
  color: var(--text-main); /* 이미 설정한 변수를 활용해 보세요! */
  opacity: 0.8; /* 혹은 투명도를 살짝 조절하는 것도 방법입니다. */
}

.faq-container {
  max-width: 600px;
  margin: 60px auto;
  text-align: left;
}
.faq-item {
  background: var(--card-bg); /* white -> 변수 */
  border: 1px solid var(--border-color); /* 변수 사용 */
  padding: 18px;
  margin-bottom: 10px;
  border-radius: 12px;
  cursor: pointer;
}
.faq-item:hover {
  border-color: #7dd3fc;
}
.faq-answer {
  display: none;
  margin-top: 10px;
  color: var(--text-sub); /* 변수 사용 */
  font-size: 0.95rem;
}
.faq-question {
  color: #0369a1;
  font-weight: 600;
}

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

/* 개인정보 처리방침 박스 스타일 */
.privacy-box {
  display: none; /* 🌟 중요: 처음에는 보이지 않게 설정 */
  background: var(--card-bg); /* white -> 변수 */
  color: var(--text-sub);
  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;
}

/* 푸터 버튼 스타일 */
.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; /* 글자가 잘리지 않게 설정 */
}

/* 🌟 현재 CSS 내의 이 부분을 수정하세요 */
.input-group input {
  width: 100px; /* 80px에서 100px로 확대하여 placeholder 가독성 확보 */
  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;
}

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

[data-theme="dark"] .input-group input,
[data-theme="dark"] #formatSelect {
  /* 배경을 어두운 남색 계열로 변경 */
  background-color: #0f172a !important;
  /* 글자색을 밝은 회색으로 변경 */
  color: #f1f5f9 !important;
  /* 테두리 색상을 조금 더 부드럽게 조절 */
  border-color: #334155 !important;
}

/* 입력창에 마우스를 올리거나 클릭했을 때의 효과 */
[data-theme="dark"] .input-group input:focus,
[data-theme="dark"] #formatSelect:focus {
  border-color: #0ea5e9 !important;
  outline: none;
}

/* 'Auto'라고 써있는 힌트(placeholder) 글자색 조절 */
[data-theme="dark"] .input-group input::placeholder {
  color: #64748b;
}

/* 포멧 방식 */
#formatSelect {
  padding: 8px;
  background: var(--card-bg); /* white -> 변수 */
  color: var(--text-main); /* 변수 사용 */
  border: 2px solid var(--border-color);
  border-radius: 12px;
  outline: none;
  cursor: pointer;
  font-weight: bold;
  transition: all 0.2s;
}

#formatSelect:focus {
  border-color: #0ea5e9;
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1);
}

/* 태블릿 및 작은 화면 (약 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: 110px; /* 입력창 크기 적절히 조절 */
  }
}