/* event-box 위쪽/아래쪽에 장식 있던 거 강제로 제거 (혹시 있을 경우 대비) */
.event-box::before,
.event-box::after {
  content: none !important;
  background: none !important;
}
.tooltip-content {
  position: absolute !important;
  top: 50% !important; /* 아이콘 세로 중앙 기준 */
  left: 110% !important; /* 아이콘 오른쪽으로 이동 */
  transform: translateY(-50%) !important;

  background-color: #555 !important;
  color: #fff !important;
  padding: 10px !important;
  border-radius: 6px !important;

  max-width: 300px !important;
  white-space: normal !important;

  visibility: hidden !important;
  opacity: 0 !important;
  transition: opacity 0.3s ease !important;
  z-index: 9999 !important;
}

/* 마우스를 올렸을 때 툴팁 표시 */
.tooltip:hover .tooltip-content {
  visibility: visible !important;
  opacity: 1 !important;
}

/* 툴팁 컨테이너 */
.tooltip {
  position: relative !important;
  display: inline-block !important;
  cursor: help !important;
}

/* 클릭 유지(.open)할 때도 보이게 */
.tooltip.open .tooltip-content {
  visibility: visible !important;
  opacity: 1 !important;
}

/* 결과 박스는 화면에서 숨김 (조회 탭만 사용) */
#hero-result,
#shelter-result {
  display: none;
}
/* === 상단 선물 박스 데코 === */
.event-box::before {
  content: "";
  display: block;
  width: 100%;
  height: 75px; /* 선물 상자 높이 */
  background-image: url("https://i.imgur.com/cj7YxCM.png"); /* 선물상자 패턴 PNG */
  background-repeat: repeat-x;
  background-size: 110px auto;
  position: absolute;
  top: -70px;
  left: 0;
}
/* === 하단 물결 데코 === */
.event-box::after {
  content: "";
  width: 100%;
  height: 60px;
  position: absolute;
  bottom: -60px;
  left: 0;
  background-image: url("https://i.imgur.com/Tp0e2rV.png"); /* 붉은 물결 패턴 */
  background-repeat: repeat-x;
  background-size: 200px 60px;
}
.hero-visual {
  height: 240px;
  margin-top: 10px;
  background-image: url("/mnt/data/8f08cab3-c15e-4a57-8c05-e314d07acda2.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.panel-header {
  display: inline-block;
  padding: 10px 18px;
  background: #0c7a45;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  border-radius: 12px;
  margin-bottom: 16px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
  letter-spacing: -0.3px;
}
/* 탭 안 제목 버튼 컨테이너 */
.form-title-wrap {
  margin-bottom: 12px;
}

/* 제목을 버튼처럼 보이게 */
.form-title-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px 22px;
  border-radius: 999px;
  border: 2px solid #0c7a45; /* 초록 테두리 */
  background: #0c7a45; /* 초록 배경 */
  color: #ffffff; /* 흰 글씨 */
  font-size: 14px;
  font-weight: 700;
  font-family: "ThinkFont", "맑은 고딕", sans-serif;
  cursor: default; /* 클릭 안 되는 느낌 */
}
.tooltip-content {
  position: absolute !important;
  top: 50% !important;
  left: 110% !important;
  transform: translateY(-50%) !important;

  background-color: #555 !important;
  color: #fff !important;
  padding: 10px 14px !important;
  border-radius: 6px !important;

  /* ★ 가로폭 강제형식으로 설정 (이게 핵심!!) */
  min-width: 240px !important;
  max-width: 300px !important;
  width: max-content !important;
  display: block !important;

  /* 가로로 넓게 보이도록 줄바꿈 정상화 */
  white-space: normal !important;
  line-height: 1.5 !important;

  visibility: hidden !important;
  opacity: 0 !important;
  transition: opacity 0.3s ease !important;
  z-index: 9999 !important;
}

/* hover 시 표시 */
.tooltip:hover .tooltip-content {
  visibility: visible !important;
  opacity: 1 !important;
}

/* 클릭 유지(open) */
.tooltip.open .tooltip-content {
  visibility: visible !important;
  opacity: 1 !important;
}

/* 컨테이너 */
.tooltip {
  position: relative !important;
  display: inline-block !important;
  cursor: help !important;
}