/* ========== [기본 설정] ========== */

html, body {

  height: 100%;

  margin: 0;

  padding: 0;

  background: #e7e7e7;

  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;

  color: #333;

  box-sizing: border-box;

}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}


/* ========== [공통 레이아웃] ========== */

.layout-wrapper { display: flex; flex-direction: column; min-height: 100vh; }

.site-main { flex: 1; }

.container { width: 100%; max-width: 1200px; margin: auto; padding: 6px 10px 0 10px; box-sizing: border-box; }




/* ========== [헤더 & 푸터] ========== */

.site-header, .site-footer {

  background: #007baf;

  color: #fff;

  text-align: center;

}

.site-header { padding: 5px 0 0; border-bottom: 1px solid #ddd; }

.site-footer { font-size: 14px; margin-top: 10px; }

.footer-content {

  text-align: center;

  font-size: 16px;

  color: #ffffff;

  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);

}



.footer-content strong {

  color: #fff;

  margin-right: 8px;

}



.footer-content .email-link {

  color: #ffffff;

  text-decoration: none;

}



.footer-content .email-link:hover {

  text-decoration: underline;

}

.footer-link {

  color: #ffffff;

  text-decoration: none;

}



.footer-link:hover {

  text-decoration: underline;

}

.logo a {

  text-decoration: none;

  font-size: 28px;

  font-weight: bold;

  color: #fff;

}

.logo-full {
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 100%;
  overflow: hidden;
}

.logo-full img,
.logo-img {
  max-width: 100%;
  height: auto;
  display: block;
}



/* ✅ 스크롤 이동 버튼 스타일 */

#scroll-buttons {

  position: fixed;

  bottom: 20px;

  right: 20px;

  z-index: 999;

  display: flex;

  flex-direction: column;

  gap: 6px;

}



#scroll-buttons button {

  background-color: #333;

  color: #fff;

  border: none;

  padding: 8px 12px;

  font-size: 14px;

  cursor: pointer;

  border-radius: 4px;

  opacity: 0.7;

  transition: opacity 0.2s;

}



#scroll-buttons button:hover {

  opacity: 1;

}




/* ========== [게시글 리스트 스크롤 래퍼] ========== */

.table-scroll-wrapper {

  overflow-x: auto;

  width: 100%;

}




/* ========== [홈페이지 레이아웃] ========== */

.homepage-container { padding: 5px; display: flex; flex-direction: column; gap: 4px; }

.top-banner, .mid-ads-row { display: flex; gap: 6px; justify-content: space-between; }

.main-grid { display: grid; grid-template-columns: 180px 1fr 240px; gap: 4px; align-items: flex-start; }

.right-ads { display: flex; flex-direction: column; gap: 7px; width: 240px; }




/* ========== [광고 박스] ========== */

.top-banner .ad-box {

  flex: 1 1 50%;

  height: 160px;

}

.ad-box {

  display: flex;

  align-items: center;

  justify-content: center;

  overflow: hidden;

  background: #fff;

  border-radius: 6px;

  width: 100%;

  height: 100%;

}

.left-ad-box {

  display: block;

  max-width: 160px; /* 필요 시 너비 제한 */

  margin: 10px auto; /* 좌우 가운데 정렬 + 상하 여백 */

}

.ad-box img, .left-size img.ad-img {

  display: block;

  width: 100%;

  height: 100%;

  object-fit: cover;

  border-radius: 6px;

}

.top-size { height: 160px; }

.right-size { height: 100%; }

.left-size {

  margin: 8px 0;

  width: 100%;

}

.header-banner {
  display: flex;
  flex-wrap: wrap;              /* ✅ 줄바꿈 허용 */
  justify-content: space-between;
  gap: 5px;
  padding: 5px 10px;
  background-color: #e7e7e7;
  box-sizing: border-box;
}

.ad-box.header-size {
  flex: 1 1 32%;                /* ✅ 줄어들 수 있고, 기본 너비는 48% */
  min-width: 180px;            /* ✅ 너무 작아지지 않도록 최소값 설정 */
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #e7e7e7;
  border: 1px solid #e7e7e7;
  box-sizing: border-box;
}

.ad-box.header-size img.ad-img {
  max-height: 100%;       /* ✅ 광고 영역보다 커지지 않도록 제한 */
  max-width: 100%;        /* ✅ 가로도 제한 */
  object-fit: contain;    /* ✅ 비율 유지 + 전체 이미지 보이게 */
  display: block;         /* ✅ 여백 제거 */
}

/* ✅ 각 광고의 순서를 명시적으로 지정 */
.ad-box.header-size.ad-header1 { order: 1; }
.ad-box.header-size.ad-header2 { order: 2; }
.ad-box.header-size.ad-header3 { order: 3; }

/* ========== [메뉴] ========== */

.left-menu {

  background: #fff;

  border: 1px solid #ccc;

  border-radius: 6px;

}

.side-menu ul, .dropdown ul {

  list-style: none;

  padding: 8px 8px 0 8px;

  margin: 0;

}

.side-menu li, .dropdown ul li {

  text-align: center;

  margin-bottom: 10px;

}

/* ========== [메뉴 버튼 기본 스타일] ========== */
.menu-button {
  display: block;
  margin: 0 auto 6px;
  text-align: center;
  font-weight: bold;
  text-decoration: none;
  background: #f5f5f5;       /* 메뉴 버튼 색상 */
  border: 1px solid #007baf;
  border-radius: 6px;
  width: 160px;
  height: 40px;
  font-size: 14px;
  line-height: 40px;
  transition: background 0.2s;
  color: #007baf;
}

.menu-button:hover {
  background: #005f87;
  color: #fff;
}

/* ========== [서브 메뉴 버튼 스타일] ========== */
.sub-menu-button {
  display: block;
  margin: 0 auto 6px;
  text-align: center;
  font-weight: bold;
  text-decoration: none;
  background: #ffffff;        /* 서브 메뉴 버튼 색상 */
  border: 1px solid #999;
  border-radius: 6px;
  width: 140px;
  height: 32px;
  font-size: 13px;
  line-height: 32px;
  transition: background 0.2s;
  color: #444;
}

.sub-menu-button:hover {
  background: #999;
  color: #fff;
}

.dropdown ul { display: none; }

.dropdown ul.show { display: block; }

#user-submenu, #support-submenu, #event-submenu { display: none; }

#user-submenu.show, #support-submenu.show, #event-submenu.show { display: block; }



/* 방문자 수 */

.left-menu li.visitor-count.dropdown > span.menu-button.text-gray {

  font-size: 11px !important;

  line-height: 1.8 !important;

  color: #666 !important;

}

.left-menu li.visitor-count.dropdown > span.menu-button.text-gray strong {

  color: #222 !important;

  font-weight: 600;

}




/* ========== [게시판 최신글 박스] ========== */

.latest-posts-container {

  background: #fff;

  border: 1px solid #ccc;

  padding: 10px;

  flex-grow: 1;

  border-radius: 6px;

}

.board-grid {

  display: grid;

  grid-template-columns: repeat(2, 1fr);

  gap: 0 6px;

}

.board-box {

  background: #fff;

  border: 1px solid #aaa;

  border-radius: 6px;

  margin-top: 6px;

}

.board-box ul { 
  padding: 0 10px 0 30px;
  margin: 10px 0 10px 0; 
}

.board-box h3 {

  text-align: center;

  font-size: 16px;

  margin: 6px;

  border-bottom: 1px solid #ddd;

  padding-bottom: 6px;

}

.board-box a {

  color: #333;

  text-decoration: none;

  transition: color 0.2s, filter 0.2s;

}

.board-box a:hover { text-decoration: underline; }




/* ========== [폼 기본 스타일] ========== */

.form-wrapper {

  width: 800px;

  max-width: 100%;

  margin: 20px auto 0;

  padding: 20px;

  background: #fff;

  border-radius: 6px;

  box-shadow: 0 1px 3px rgba(0,0,0,0.05);

  box-sizing: border-box;

}

.form-group { margin-bottom: 16px; }

.form-group label {

  display: block;

  margin-bottom: 6px;

  font-weight: 600;

}

.form-group input, .form-group select, .form-group textarea {

  width: 100%;

  padding: 10px;

  font-size: 14px;

  border: 1px solid #ccc;

  border-radius: 6px;

  box-sizing: border-box;

}

textarea.form-control::placeholder {

  white-space: pre-line;

  color: #888;

  font-style: italic;

}

.image-field {

  margin-bottom: 10px;

}

.address-link {

  color: #007baf; /* 네이버 지도 느낌에 맞게 파란색 */

  text-decoration: underline; /* 밑줄 */

  font-weight: 600; /* 약간 굵게 */

  transition: color 0.2s;

}

.address-link:hover {

  color: #005f87; /* 호버 시 더 진한 파랑 */

}




/* ========== [버튼] ========== */

.btn-submit, .btn-home {

  display: block;

  width: 100%;

  height: 44px;

  line-height: 44px;

  font-size: 16px;

  font-weight: bold;

  border-radius: 6px;

  text-align: center;

  padding: 0;

  margin: 0 auto;

  cursor: pointer;

  transition: background 0.2s;

}

.btn-submit {

  background: #000;

  color: #fff;

  margin-bottom: 10px;

}

.btn-submit:hover { background: #666; }

.btn-submit.cancel {

  background: #ccc;

  color: #333;

}

.btn-submit.cancel:hover { background: #dadada; }

.btn-home {

  background: #fff;

  color: #333;

  border: 1px solid #ccc;

}

.btn-home:hover { background: #eee; }

.form-links, .form-button-group, .write-button-wrapper {

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 12px;

  margin-top: 24px;

}



.phone-feedback-wrap,

.email-feedback-wrap {

  margin-top: 4px;

  display: flex;

  flex-direction: column;

  gap: 2px;

}



/* ✅ 약관 영역 숨김 + 토글 */

.terms-box {

  display: none;

  border: 1px solid #ccc;

  padding: 10px;

  margin-bottom: 16px;

  max-height: 220px;

  overflow-y: auto;

  background: #f9f9f9;

  font-size: 14px;

  line-height: 1.6;

}

.terms-box.show {

  display: block;

}



/* ✅ 약관 동의 체크박스 수평 + 가운데 정렬 */

.agree-wrapper {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 8px;

  white-space: nowrap;

  margin: 0 auto 0 auto;

}

.terms-error {
  color: red;
  font-size: 14px;
  margin-top: 5px;
}
.terms-error.active {
  display: block;
}

.text-blue {
  color: #007baf !important;
  font-size: 14px;
  font-weight: 400;
}

/* ========== [팝업] ========== */

#popup-backdrop {

  position: fixed;

  top: 0; left: 0;

  width: 100vw; height: 100vh;

  background: rgba(0, 0, 0, 0.5);

  z-index: 999;

  display: none;

}

.popup-box {

  position: fixed;

  background: #fff;

  padding: 10px;

  border-radius: 6px;

  box-shadow: 0 5px 20px rgba(0,0,0,0.3);

  text-align: center;

  z-index: 1000;

}

.popup-buttons {

  justify-content: space-between;

  margin-top: 10px;

}

.popup-buttons button {

  background: #333;

  color: #fff;

  border: none;

  border-radius: 6px;

  padding: 8px 16px;

  cursor: pointer;

  transition: background 0.2s;

}

.popup-buttons button:hover { background: #555; }

.popup-image {

  width: 100%;

  max-width: 100%;

  height: auto;

  border-radius: 6px;

  display: block;

}

.popup-position-1, .popup-position-2 {

  top: 80px;

  width: 300px;

}

.popup-position-1 { left: calc(50% - 330px); }

.popup-position-2 { left: calc(50% + 30px); }




/* ========== [게시판 테이블] ========== */

.post-title {

  text-align: center;

  margin-bottom: 20px; /* 아래 공간 약간 주기 */

}

.post-info-table {

  width: 100%;

  border-collapse: collapse;

  margin-bottom: 20px;

  background: #fff;

  border: 1px solid #ccc;

  table-layout: fixed;

}

.post-info-table th, .post-info-table td {

  padding: 8px;

  border: 1px solid #ccc;

  text-align: center;

  font-size: 14px;

}

.post-info-table td a {

  display: inline-block;

  max-width: 100%;

  white-space: nowrap;        /* 줄바꿈 방지 */

  overflow: hidden;           /* 넘친 글자 숨기기 */

  text-overflow: ellipsis;    /* 넘치면 ...으로 표시 */

  vertical-align: middle;

}

.post-content {
  padding: 10px;
}

.post-info-table tr:hover { background-color: #f9f9f9; }

.clickable-row { cursor: pointer; }

.table-header th {

  background-color: #f0f2f5; /* ✅ 연한 회색 배경 */

  font-weight: bold;

  text-align: center;

  padding: 10px;

  border-bottom: 2px solid #ccc;

}



.table-scroll-wrapper .post-info-table {

  min-width: 720px;

}






/* ========== [Alert Box] ========== */

.alert-box {

  max-width: 800px;

  margin: 0 auto 12px;

  padding: 12px 0 12px 0;

  border-radius: 6px;

  font-size: 14px;

  text-align: center;

}

.alert-warning { background: #fff3cd; border: 1px solid #ffeeba; color: #856404; }

.alert-danger { background: #f8d7da; border: 1px solid #f5c6cb; color: #721c24; }

.alert-success { background: #e9f7ef; border: 1px solid #c3e6cb; color: #155724; }

.alert-info { background: #e2e3e5; border: 1px solid #d6d8db; color: #383d41; }

.alert-info-light { background: #d1ecf1; border: 1px solid #bee5eb; color: #0c5460; }




/* ========== [폼 에러 메시지] ========== */

.errorlist, .error, .text-danger {

  color: red;

  font-size: 14px;

  margin-top: 6px;

  list-style: none;

  padding-left: 0;

}




/* ========== [이미지 모달] ========== */

.post-images {

  display: flex;          /* ✅ 가로 나열 */

  gap: 10px;              /* ✅ 이미지 사이 간격 */

  justify-content: center;/* ✅ 가운데 정렬 */

  flex-wrap: wrap;        /* ✅ 화면 작으면 줄바꿈 */

}

.post-images img {

  width: 200px;

  height: auto;

  border-radius: 6px;

  cursor: pointer;

  transition: transform 0.2s;

}

.post-images img:hover { transform: scale(1.05); }

#image-modal {

  position: fixed;

  top: 0; left: 0;

  width: 100vw;

  height: 100vh;

  background: rgba(0, 0, 0, 0.8);

  display: none;

  justify-content: center;

  align-items: center;

  z-index: 1000;

}

#modal-img {

  max-width: 90%;

  max-height: 90%;

  border-radius: 8px;

  box-shadow: 0 0 20px rgba(0,0,0,0.5);

}

.close-modal {

  position: absolute;

  top: 20px;

  right: 30px;

  font-size: 36px;

  color: #fff;

  cursor: pointer;

}




/* ========== [유틸리티 클래스] ========== */

.page-title { text-align: center; font-size: 24px; margin-bottom: 10px; }

.section-title { font-size: 20px; margin: 20px 0 10px; }

.text-gray { color: #999; }

.text-dark { color: #333; }

.text-success { color: green; }

.feedback-text { font-size: 13px; margin-top: 4px; }

.bump-icon { font-size: 13px; margin-left: 4px; }

.locked-label { font-size: 12px; margin-left: 4px; }

.point-link { color: #333; text-decoration: underline; }

.suspended-wrapper, .restricted-page, .signup-done-wrapper {

  text-align: center;

  padding: 40px;

}

.restricted-title, .event-closed-label {

  color: red;

  font-weight: bold;

}

.promo-wrapper, .message-area { max-width: 400px; margin: 10 auto; text-align: center;}

.pagination-wrapper {

  display: flex;

  justify-content: center;

  align-items: center;

  gap: 6px;

  flex-wrap: wrap;

  margin: 20px 0;

}

.page-jump-form { display: flex; align-items: center; gap: 6px; margin-left: 12px; }

.point-history-title { font-size: 24px; text-align: center; margin-bottom: 20px; }

.point-balance { font-size: 18px; text-align: center; margin-bottom: 20px; }

.point-empty-message { text-align: center; color: #888; margin-top: 20px; }

.board-container { background: #fff; border-radius: 6px; padding: 20px; margin-top: 20px; }

.info-box {

  border: 1px solid #ccc;

  border-radius: 8px;

  padding: 16px;

  margin-bottom: 24px;

  background-color: #f9f9f9;

}


/* ========== [전화번호 입력 필드 정렬] ========== */

.phone-number-group {

  display: flex;

  gap: 10px;

  align-items: center;

}



.phone-number-group select {

  width: 100px;              /* PC에서 고정 너비 */

  flex-shrink: 0;

}



.phone-number-group input {

  flex: 1;                   /* 뒷자리 input 필드 너비 최대한 넓게 */

  min-width: 0;

  padding: 10px;

  font-size: 14px;

  border: 1px solid #ccc;

  border-radius: 6px;

  box-sizing: border-box;

}


/* ========== [링크 기본 스타일] ========== */

a {

  color: #007baf;

  text-decoration: none;

  transition: color 0.2s, filter 0.2s;

}

/* ========== [로또 추첨기 스타일] ========== */
.lotto-container {
  text-align: center;
  max-width: 600px;
  margin: 0 auto;
}

.numbers {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin: 2rem 0;
  flex-wrap: wrap;
}

.ball {
  position: relative;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  font-size: 1.6rem;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  color: transparent;
  background-color: rgba(0, 0, 0, 0.05);
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);
  opacity: 1;
  transform: scale(1);
  transition: background-color 0.3s, color 0.3s;
  overflow: hidden;
}

/* ✅ 번호 등장 시 애니메이션 + 반짝임 효과 */
.ball.animate {
  animation: pop-bounce 0.6s ease, glow 1.5s ease-in-out infinite;
  color: #fff;
}

.ball.animate::after {
  content: "";
  position: absolute;
  width: 40%;
  height: 40%;
  top: 10%;
  left: 10%;
  background: rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  filter: blur(2px);
  pointer-events: none;
}

/* ✅ 광택이 흐르는 효과 */
.ball.animate::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.6) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: rotate(25deg) translate(-100%, -100%);
  animation: shine-move 2.2s ease-in-out infinite;
  pointer-events: none;
  border-radius: 50%;
}

/* ✅ 팝업 튕기기 + 회전 효과 */
@keyframes pop-bounce {
  0%   { transform: scale(0.3) rotate(0deg); opacity: 0; }
  50%  { transform: scale(1.4) rotate(180deg); opacity: 1; }
  70%  { transform: scale(0.9); }
  100% { transform: scale(1) rotate(360deg); opacity: 1; }
}

/* ✅ 빛나는 효과 */
@keyframes glow {
  0%   { box-shadow: 0 0 0px rgba(255, 255, 255, 0.2); }
  50%  { box-shadow: 0 0 20px rgba(255, 255, 255, 0.9); }
  100% { box-shadow: 0 0 0px rgba(255, 255, 255, 0.2); }
}

/* ✅ 광택 흐름 애니메이션 */
@keyframes shine-move {
  0%   { transform: rotate(25deg) translate(-120%, -120%); }
  50%  { transform: rotate(25deg) translate(50%, 50%); }
  100% { transform: rotate(25deg) translate(120%, 120%); }
}

.color-yellow { background-color: #fdd835; color: #000; }
.color-blue   { background-color: #42a5f5; }
.color-red    { background-color: #ef5350; }
.color-gray   { background-color: #9e9e9e; }
.color-green  { background-color: #66bb6a; }

/* ========== [모바일 최적화] ========== */

@media (max-width: 768px) {
  /* 레이아웃 */
  .container, .form-wrapper, .homepage-container {
    width: 100%;
    max-width: 100%;
    padding: 6px;
    box-sizing: border-box;
  }

  .main-grid {
    display: flex;
    flex-direction: column;
    align-items: center; 
    gap: 10px;
    width: 100%;
    box-sizing: border-box;
  }

  .left-menu,
  .right-ads,
  .latest-posts-container {
    width: 100%;
    max-width: 640px;
    margin: 0 auto;
    box-sizing: border-box;
  }

  .board-box ul li {
    font-size: 13px;
    line-height: 1.4;
  }

  /* 광고박스 */

  .header-banner {
    flex-direction: column; /* 세로 정렬 */
  }

  .ad-box.header-size {
    flex: 1 1 auto;
    width: 100%;
    max-width: 100%;
  }

  .top-banner, .mid-ads-row {
    flex-direction: column;
    gap: 10px;
    width: 100%;
  }

  .top-banner .ad-box {
    flex: 0 0 auto;
    width: 100%;
    height: 100% !important;
  }

  .top-size, .right-size {
    width: 100%;
    height: auto;
  }

  .left-size {
    width: 160px;
    height: auto;
  }

  .ad-box {
    overflow: hidden;
    display: block !important;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  .ad-box img {
    width: 100%;
    height: 100% !important;
    object-fit: cover;
    display: block;
    margin: 0;
    padding: 0;
  }

  /* 폼 입력 */
  .form-group input,
  .form-group select,
  .form-group textarea {
    width: 100%;
  }

  /* 버튼 */
  .btn-submit,
  .btn-home {
    width: 100%;
  }

  /* 텍스트 */
  .page-title {
    font-size: 20px;
  }

  .section-title {
    font-size: 18px;
  }

  .post-info-table th,
  .post-info-table td {
    font-size: 12px;
    padding: 8px;
  }

  /* 팝업 */
  .popup-box {
    width: 90% !important;
    left: 50% !important;
    transform: translateX(-50%) !important;  /* 👉 중앙 정렬 */
  }

  /* 헤더 로고 */
  .logo-full img {
    width: 100%;
    max-width: 100%;
    height: auto;
    object-fit: contain;
  }

  /* 메뉴 버튼 */
  .menu-button {
    width: 100%;
    max-width: 310px;
    height: 36px;
    font-size: 13px;
    line-height: 36px;
  }

  .sub-menu-button {
    width: 100%;
    max-width: 280px;
    height: 30px;
    font-size: 12px;
    line-height: 30px;
  }

  /* 전화번호 입력 */
  .phone-number-group select {
    width: 80px;
  }

  .phone-number-group input {
    font-size: 16px;
  }
}

/* ========== [오늘의 운세 카드 스타일] ========== */
.birth-input-group {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
.birth-input-group input {
  width: 100px;
  padding: 10px 12px;
  border: 1px solid #ccc;
  border-radius: 10px;
  background: #fdfdfc;
  font-size: 15px;
  text-align: center;
  box-shadow: 0 2px 4px rgba(0,0,0,0.06);
  transition: all 0.2s ease;
  font-family: 'Segoe UI', sans-serif;
}
.birth-input-group input:focus {
  outline: none;
  border: 2px solid gold;
  box-shadow: 0 0 6px rgba(212, 175, 55, 0.5);
  background: #fffef6;
}

.cards-wrapper {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  align-items: center;
  margin-top: 2rem;
}
.row-wrapper {
  display: flex;
  gap: 1.2rem;
  justify-content: center;
  flex-wrap: wrap;
}

.fortune-card {
  width: 270px;
  height: 140px;
  perspective: 1500px;
  cursor: pointer;
  border-radius: 16px;
  transition: transform 0.3s ease;
}
.fortune-card:hover {
  transform: scale(1.03);
}
.fortune-card:active {
  transform: scale(0.98) rotateZ(1deg);
}

.card-inner {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 1s cubic-bezier(0.4, 0.2, 0.2, 1);
  border-radius: 16px;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.15);
}
.fortune-card.flipped .card-inner {
  transform: rotateY(180deg) scale(1.03);
  transition: transform 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.card-front, .card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  text-align: center;
  box-sizing: border-box;
  letter-spacing: 0.5px;
  font-weight: bold;
  overflow: hidden;
}

.card-front {
  background: linear-gradient(135deg, #c9aa71, #fff6e0, #b58e3e);
  color: #fff;
  font-size: 18px;
  font-weight: 900;
  text-shadow:
    0 0 2px #fff,
    0 0 4px #fcd76a,
    0 0 6px #e8c24d;
  border: 3px solid #d4af37;
  box-shadow: 0 0 5px rgba(255, 215, 0, 0.4),
              0 0 20px rgba(212, 175, 55, 0.3) inset;
  font-family: 'Segoe UI', sans-serif;
}

.card-back {
  transform: rotateY(180deg);
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(4px);
  color: #000000;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.6;
  border: 2px solid #e0d3b8;
  box-shadow:
    inset 0 0 10px rgba(0, 0, 0, 0.05),
    0 8px 16px rgba(0, 0, 0, 0.1);
  text-align: center;
  padding: 16px 18px;
  word-break: keep-all;
  overflow-wrap: break-word;
  white-space: normal;
  hyphens: auto;
  font-family: 'Segoe UI', sans-serif;
  text-shadow: 0.5px 0.5px 1px rgba(0,0,0,0.15);
  animation: fadeInText 0.8s ease-in-out forwards;
  opacity: 0;
}
.fortune-card.flipped .card-back {
  opacity: 1;
}

.card-front::after, .card-back::after {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(60deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.6) 50%, rgba(255,255,255,0.1) 100%);
  transform: rotate(25deg) translate(-100%, -100%);
  animation: shine 3s infinite;
  pointer-events: none;
}

@keyframes shine {
  0%   { transform: rotate(25deg) translate(-100%, -100%); }
  50%  { transform: rotate(25deg) translate(100%, 100%); }
  100% { transform: rotate(25deg) translate(200%, 200%); }
}

.card-appear {
  opacity: 0;
  transform: translateY(30px);
  animation: fadeUp 0.6s ease forwards;
}

@keyframes fadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInText {
  to {
    opacity: 1;
  }
}

/* ✅ 텍스트만 물결치는 효과 (글자별로 애니메이션) */
.wave-text {
  display: inline-block;
  animation: waveMotion 1.6s ease-in-out infinite;
  word-break: keep-all;
  overflow-wrap: break-word;
  white-space: normal;
  text-align: center;
  font-size: inherit;
  line-height: 1.8;
}

.wave-letter {
  display: inline-block;
  animation: waveMotion 1.6s ease-in-out infinite;
  white-space: normal;
  vertical-align: baseline;
  font-size: inherit;
}

@keyframes waveMotion {
  0%, 100% { transform: translateY(0); }
  25% { transform: translateY(-2px); }
  50% { transform: translateY(2.5px); }
  75% { transform: translateY(-1.5px); }
}

@media (max-width: 768px) {
  .fortune-card {
    width: 200px;
    height: 120px;
  }
  .card-front {
    font-size: 14px;
  }
  .card-back {
    font-size: 11px;
    padding: 10px;
  }
  .birth-input-group input {
    width: 80px;
  }
}

/* ========== [슬롯 게임 스타일] ========== */
.slot-reel-wrapper {
  width: 60px;
  height: 60px;
  overflow: hidden;
  border: 2px solid #aaa;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}

.slot-reel {
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease;
  font-size: 2rem;
}

.slot-reel span {
  height: 60px;
  line-height: 60px;
  text-align: center;
}

#bet-input {
  width: 150px;
  padding: 10px;
  font-size: 1rem;
  text-align: center;
  border: 2px solid #ccc;
  border-radius: 8px;
  transition: border-color 0.3s, box-shadow 0.3s;
}

#bet-input:focus {
  outline: none;
  border-color: #3aa757;
  box-shadow: 0 0 5px rgba(58, 167, 87, 0.3);
}

.slot-guide {
  text-align: center;
  font-size: 0.9rem;
}

.center-text {
  text-align: center;
}

.mt-2rem {
  margin-top: 2rem;
}

.slot-machine {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin: 2rem auto;
}

.slot-message {
  min-height: 2em;
  margin-top: 1rem;
  text-align: center;
  font-weight: bold;
}
.jackpot-marquee-wrapper {
  width: 100%;
  overflow: hidden;
  background: #222;
  color: gold;
  padding: 6px 0;
  font-size: 0.9rem;
  margin: 20px auto 0;
  border-radius: 6px;
  position: relative;
  height: 1.6rem
}

.jackpot-marquee {
  display: inline-block;
  white-space: nowrap;
  padding-left: 100%;  /* 중요! */
  animation: jackpot-scroll 12s linear infinite;
}

@keyframes jackpot-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}
.red-text {
  color: red;
}

.weather-box {
  font-size: 0.7rem;
  text-align: center;
  border: 1px solid #ccc;
  border-radius: 6px;
  background: #f8f8f8;
  min-height: 100%;
}

.weather-card {
  display: flex;
  flex-direction: column; /* 🔽 세로 정렬 */
  align-items: center;
  background: #ffffff;
  border-radius: 8px;
  padding-bottom: 10px;
  font-size: 0.9rem;
  color: #333;
  width: 100%;
}

.weather-icon img {
  width: 50px;
  height: 50px;
}

.weather-text .desc {
  color: #666;
  font-size: 0.85rem;
}

.weather-text .temp {
  font-size: 1.1rem;
  font-weight: bold;
  color: #e07a00;
}

/* 🔽 예보 전체를 작게 정렬 */
.weather-forecast {
  display: flex;
  gap: 20px;
  margin-top: 8px;
  justify-content: center;
  flex-wrap: wrap;
  text-align: center;
  font-size: 0.65rem;
  color: #666;
  align-items: baseline
}

.forecast-item {
  line-height: 1.4;
}

.forecast-item img {
  width: 28px;
  height: auto;
}