.fortune-root {
  padding-top: 20px;
  position: relative;
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column; /* <-- 이 부분을 추가합니다 (자식 요소를 세로로 배치) */
  align-items: center;   /* <-- 이 부분을 추가하여 세로 배치된 아이템들을 가로 중앙으로 정렬합니다 */
  margin-top: 0;
  background-image: url('/fortune/img/bg3.webp'); /* 배경 이미지 경로 */
  background-size: cover; /* 이미지가 컨테이너를 꽉 채우도록 */
  background-position: center; /* 중앙 정렬 */
  background-repeat: no-repeat; /* 반복 없음 */
}

#fortune-form {
  margin-top: 60px;
  background: rgba(255, 255, 255, 0.85);
  padding: 30px;
  width: 90%;
  max-width: 800px; /* 넓이 약간 증가 */
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  z-index: 9;
  display: flex;
  flex-direction: column;

}
#fortuneOutput {
  min-height: 150px;
  font-size: 1.1rem;
  padding: 15px;
  margin-top: 20px;
  background: white;
  color: black;
}
/* 나머지 스타일은 그대로 유지 */
.form-row {
  display: flex;
  flex-direction: column;
  margin-bottom: 20px;
  position: relative;
  width: 100%;
}

.form-row label {
  margin-bottom: 8px;
  font-weight: bold;
}

input[type="text"],
button,
.gender-btn {
  padding: 10px;
  font-size: 1rem;
  border-radius: 6px;
  border: 1px solid #ccc;
}

button {
  cursor: pointer;
  background-color: #53d19d;
  border: none;
}

button:hover {
  background-color: #225842;
  color: white;
}

.gender-buttons {
  display: flex;
  gap: 10px;
}

.gender-btn {
  flex: 1;
  background: #ddd;
  border: 1px solid #bbb;
}

.gender-btn.selected {
  background-color: #28a848;
  color: white;
  font-weight: bold;
}

.button-row {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-top: 10px;
}

.falling-leaves {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 3;
}

.leaf {
  position: absolute;
  width: 60px;  /* ✅ 낙엽 크기 */
  height: auto;
  opacity: 1;
  pointer-events: none;
  z-index: 3;
}

#calendar-container {
  display: none !important; /* 기본 상태 강제 숨김 */
  position: absolute;
  transform: none; /* transform 제거로 위치 조정 */
  background: white;
  padding: 15px;
  border: 1px solid #ccc;
  z-index: 1000;
  width: 300px;
  max-height: 400px;
  overflow-y: auto;
  box-sizing: border-box;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    /* 모바일 스타일과 통일 */
}

#calendar-container.active {
  display: block !important;
}


.calendar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}

.calendar-header h3 {
  margin: 0;
  font-size: 16px;
  color: #333;
}

.back-btn {
  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
  padding: 5px 10px;
  color: #666;
  transition: color 0.2s ease;
}

.back-btn:hover {
  color: #333;
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 4열로 표시 */
  gap: 6px;
  width: 100%;
}
.calendar-grid button {
  padding: 8px;
  font-size: 14px;
  border: 1px solid #eee;
  background: #fff;
  border-radius: 4px;
  cursor: pointer;
  width: 100%;
  box-sizing: border-box;
  transition: all 0.2s ease;
}

.calendar-grid button:hover {
  background: #f0f0f0;
  border-color: #ddd;
}

.calendar-grid button.selected {
  background: #3df5cd;
  color: white;
  border-color: #3df5cd;
}

#hanja-suggestions-box {
  display: none;
  border: 1px solid #ccc;
  padding: 10px;
  background: #fff;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

#hanja-suggestions-box[style*="display: flex"] {
  display: flex !important; /* JavaScript에서 설정한 display: flex 반영 */
}

.hanja-option {
  font-size: 18px; /* 한자 크기 키움 */
  margin: 0 5px; /* 한자 간 간격 조정 */
  cursor: pointer; /* 클릭 가능 표시 */
  padding: 5px; /* 선택사항: 한자 주변 여백 */
}

.hanja-option:hover {
  background: #f0f0f0;
}


#dob-display {
  border: 1px solid #ccc; /* 1픽셀 두께의 회색 실선 테두리 */
  padding: 10px; /* 테두리 안쪽 여백 */
  margin-bottom: 20px; /* 아래쪽 요소와의 간격 (필요시 조정) */
  border-radius: 6px; /* 모서리를 둥글게 (선택 사항) */
  background-color: #f9f9f9; /* 배경색 (선택 사항) */
  color: #333333;
}

/* fortune.css 파일 하단에 추가 */
.user-info-header {
  text-align: center;
  margin: 10px 0 15px 0;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}

.user-info-header strong {
  font-size: 1.2em;
  color: #333;
}

.user-info-header small {
  display: block;
  margin-top: 5px;
  font-size: 0.9em;
  color: #777;
}

/* ===== 모바일 =====*/

@media (max-width: 600px) {
  /* 1. 기본 루트 요소 조정 */
  .fortune-root {
    background-image: none !important; /* 배경 이미지 제거 */ /* */
    padding-top: 10px;
    padding-bottom: 15px;
    min-height: 100vh; /* 전체 화면 높이 유지 */
  }

  /* 2. 애니메이션 숨기기 */
  .falling-leaves {
    display: none !important; /* 낙엽 애니메이션 숨기기 */ /* */
  }

  /* 3. 폼 스타일링 */
  #fortune-form {
    width: 90%; /* 화면 너비의 90% 사용 */ /* */
    max-width: 100%; /* PC용 최대 너비 제한 해제 */
    padding: 15px; /* 내부 여백 축소 */ /* */
    margin-top: 15px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); /* 그림자 약간 조정 */
  }

  .form-row {
    margin-bottom: 15px; /* 폼 요소 간 간격 조정 */
  }

  input[type="text"],
  button, /* 모든 버튼에 적용 */
  .gender-btn {
    font-size: 16px; /* 모바일에서 가독성 좋은 폰트 크기 */ /* */
    padding: 12px 10px; /* 버튼 및 입력창 내부 여백 조정으로 터치 용이하게 */ /* */
    width: 100%; /* 입력 필드 등 너비 100% */
    box-sizing: border-box; /* 패딩, 테두리 포함한 너비 계산 */
  }

  #nameMessage,
  #hanja-convert {
    margin-top: 5px; /* 관련 메시지나 입력창 상단 간격 */
  }

  .gender-buttons {
    display: flex; /* 성별 버튼 가로 배열 유지 */
    gap: 10px; /* 버튼 사이 간격 */
  }

  .gender-btn {
    flex-grow: 1; /* 버튼이 가능한 공간을 균등하게 차지하도록 */
  }

  .button-row {
    display: flex;
    flex-direction: column; /* 확인/취소 버튼 세로로 쌓기 */
    gap: 10px; /* 버튼 사이 간격 */
    margin-top: 15px;
  }

  #fortuneOutput {
    font-size: 1em; /* 운세 결과 폰트 크기 */ /* */
    min-height: 100px; /* 최소 높이 조정 */
    padding: 10px; /* 내부 여백 조정 */
    margin-top: 15px;
  }

  #dob-display {
    font-size: 0.95em; /* 선택된 생년월일 표시 폰트 크기 */
    padding: 10px; /* 내부 여백 */
    margin-bottom: 15px; /* 하단 간격 */ /* */
    background-color: #f0f0f0; /* 배경색 살짝 추가 */
    border: 1px solid #e0e0e0; /* 테두리 추가 */
    text-align: center;
  }

  /* 4. 달력 (Calendar) 위치 및 스타일링 */
  /*
    참고: formHandler.js 파일의 dobClickHandler 함수 내에서
    calendarContainer.style.left = `${dobRect.left + 550}px`;
    부분이 모바일 화면에서 달력 위치를 오른쪽으로 밀어내는 주요 원인입니다.
    아래 CSS는 !important를 사용하여 이를 제어하려고 시도하지만,
    가장 확실한 해결책은 JavaScript 코드를 수정하여 모바일에서는 해당 550px 더하기를 제거하거나 조정하는 것입니다.
  */
  #calendar-container.active {
    display: block !important; /* 활성화 시 보이도록 함 */ /* */
    position: absolute !important; /* JavaScript에서 설정한 top, left 값을 기준으로 위치 */

    width: 90% !important; /* 화면 너비의 90% 사용 */
    max-width: 320px !important; /* 달력의 최대 너비 제한 */
    left: 50% !important; /* 화면 중앙으로 강제 이동 (JavaScript 인라인 스타일 덮어쓰기 시도) */
    transform: translateX(-50%) !important; /* 정확한 중앙 정렬 */
    top: auto !important; /* JavaScript의 top 계산을 따르도록 하거나, 필요시 구체적인 값으로 조정 */
    /* top: [생년월일 선택 버튼 높이 + 원하는 간격]px; 와 같이 설정할 수도 있습니다. */
    /* 예: #dob-picker-btn의 bottom 값 기준으로 top 설정 필요 */

    background: white; /* */
    border: 1px solid #ccc; /* */
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    z-index: 1000001 !important; /* 다른 요소들 위에 오도록 z-index 조정 (기존 값보다 높게) */ /* */
    padding: 10px; /* 내부 여백 */
    box-sizing: border-box;
    max-height: 75vh; /* 화면 높이의 75%를 넘지 않도록 */
    overflow-y: auto; /* 내용이 길어지면 스크롤 */
  }

  .calendar-header {
    margin-bottom: 10px; /* */
    padding-bottom: 8px; /* */
  }

  .calendar-header h3 {
    font-size: 1.1em; /* */
  }

  .back-btn {
    font-size: 1.5em; /* */
    padding: 0 8px; /* */
  }

  .calendar-grid {
    /* 연도/월/일 버튼들을 화면에 맞게 자동 정렬 */
    grid-template-columns: repeat(auto-fit, minmax(55px, 1fr)) !important; /* */
    gap: 5px !important; /* */
  }

  .calendar-grid button {
    font-size: 0.9em; /* */
    padding: 10px 5px; /* */
  }

  /* 5. 한자 제안 박스 */
  #hanja-suggestions-box[style*="display: flex"] { /* JavaScript가 display:flex 로 설정 시 적용 */ /* */
    width: 100%; /* 부모 요소(입력창) 너비에 맞춤 */
    box-sizing: border-box;
    left: 0 !important; /* 위치 조정 */
    top: 100% !important; /* 입력창 바로 아래에 표시 */
    flex-wrap: wrap; /* 한자가 많을 경우 줄바꿈 */
    box-shadow: 0 2px 5px rgba(0,0,0,0.15);
    border-radius: 0 0 6px 6px;
    padding: 8px;
  }

  .hanja-option {
    font-size: 1em; /* 한자 크기 조정 */ /* */
    margin: 3px; /* 한자 간 간격 */ /* */
    padding: 6px; /* 내부 여백 */ /* */
  }
}