/* 모달/팝업 열림 시 스크롤바로 인한 본문 가로 폭 변화(번쩍임) 완화 */
html {
  scrollbar-gutter: stable;
}

/* 공지·이벤트 헤더: 아이콘+제목 왼쪽, +더보기 오른쪽 (Rich 샘플 레퍼런스와 동일) */
#notice-list .board-panel .header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: nowrap !important;
  box-sizing: border-box;
  padding-left: 8px;
  padding-right: 10px;
}
#notice-list .board-panel .header .title-panel {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  flex: 0 1 auto;
  min-width: 0;
  margin-right: 0 !important;
}
#notice-list .board-panel .header .more-link {
  flex-shrink: 0;
  margin-right: 0 !important;
  margin-left: 10px;
  text-decoration: none !important;
}
#notice-list .board-panel .header .more-link:hover,
#notice-list .board-panel .header .more-link:focus {
  text-decoration: none !important;
}

/* 문의채널: 카드 내 제목·@ 한 줄씩 왼쪽 정렬, 링크 밑줄 제거 */
.customer-board a.cs-panel {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  flex-wrap: nowrap !important;
  text-decoration: none !important;
  color: inherit;
}
.customer-board a.cs-panel:hover,
.customer-board a.cs-panel:focus {
  text-decoration: none !important;
  color: inherit;
}
.customer-board .cs-panel .flex-fill {
  flex: 1 1 auto;
  min-width: 0;
  text-align: left !important;
}
.customer-board .cs-panel .flex-fill span {
  text-decoration: none !important;
}
.customer-board .cs-panel .info {
  display: inline-block;
  text-align: left;
}
.customer-board .cs-panel .flex-fill > div:last-child span {
  font-size: 0.85rem;
  font-weight: 500;
  color: #5f868a;
}

/* 테마6 메인: 공지/이벤트 list-group을 Rich 보드 영역에 맞춤 */
#notice-list .list-group.notice,
#notice-list .list-group.event {
  max-height: 220px;
  overflow-y: auto;
}
#notice-list .list-group-item {
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  padding: 0.45rem 0.5rem;
  font-size: 0.9rem;
  text-align: left;
  width: 100%;
}
#notice-list .list-group-item:hover {
  background: rgba(0, 168, 150, 0.06);
}

/* 상단: 로고 좌측 · 로그인/가입 우측 */
.header-main .rich6-header-row {
  justify-content: space-between !important;
  align-items: center !important;
  width: 100%;
}
.header-main .rich6-header-auth {
  margin-left: 0 !important;
  flex-shrink: 0;
}

.header-main .rich6-auth-loggedin {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.header-main .rich6-auth-meta {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  color: #111111;
  font-size: 0.84rem;
  font-weight: 600;
  text-shadow: none;
  white-space: nowrap;
}

.header-main .rich6-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
}

.header-main .rich6-meta-id i {
  color: #0f7576;
  background: rgba(255, 255, 255, 0.92);
  border-radius: 999px;
  width: 1rem;
  height: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.74rem;
}

.header-main .rich6-meta-sep {
  color: rgba(17, 17, 17, 0.58);
  font-size: 0.72rem;
  margin: 0 0.05rem;
}

.header-main .rich6-auth-mail,
.header-main .rich6-auth-btn {
  min-height: 2rem;
  border-radius: 999px !important;
  padding: 0.34rem 0.9rem !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  line-height: 1;
}

.header-main .rich6-auth-mail {
  min-width: 3.2rem;
  padding: 0.34rem 0.72rem !important;
  position: relative;
}

.header-main .rich6-auth-mail i {
  font-size: 0.9rem;
}

.header-main .rich6-mail-count {
  position: absolute;
  right: -0.25rem;
  top: -0.35rem;
  min-width: 1.1rem;
  height: 1.1rem;
  padding: 0 0.22rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.66rem;
  font-weight: 800;
  line-height: 1;
  color: #ffffff;
  background: linear-gradient(180deg, #ff6f79 0%, #e23c49 100%);
  border: 1px solid rgba(255, 255, 255, 0.8);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.22);
}

@media (max-width: 1199.98px) {
  .header-main .rich6-auth-meta {
    font-size: 0.78rem;
  }
  .header-main .rich6-auth-mail,
  .header-main .rich6-auth-btn {
    min-height: 1.85rem;
    padding: 0.3rem 0.72rem !important;
    font-size: 0.76rem !important;
  }
}

/* GNB 링크/버튼 밑줄 제거 */
.header-menu .main-menu a,
.header-menu .main-menu a:hover,
.header-menu .main-menu a:focus,
.header-menu .main-menu a:active,
.header-menu .main-menu button.rich6-nav-action,
.header-menu .main-menu button.rich6-nav-action:hover,
.header-menu .main-menu button.rich6-nav-action:focus {
  text-decoration: none !important;
}

/* 입금·출금 등: <button>으로 바꿔도 메뉴 스타일 유지 */
.main-menu ul li button.rich6-nav-action {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  width: 100%;
  color: #ffffff;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
  padding: 0 20px;
  margin: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  font: inherit;
  box-sizing: border-box;
  -webkit-appearance: none;
  appearance: none;
}
.main-menu ul li button.rich6-nav-action .icon-panel {
  color: #8cfff4;
  font-size: 18px;
  margin-right: 5px;
}
.main-menu ul li button.rich6-nav-action:hover .icon-panel {
  animation: shakeAnim 1s ease 1;
}

/* 상단 메뉴 텍스처가 좌우 끝까지 채워지도록 보정 */
.header-menu:after {
  background-repeat: no-repeat !important;
  background-size: 100% auto !important;
  background-position: center top !important;
}

.main-menu:after {
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  border-radius: inherit !important;
  background-repeat: no-repeat !important;
  background-size: 100% auto !important;
  background-position: center top !important;
}

@media (max-width: 991.98px) {
  .header-menu.w-ba {
    display: none;
    width: 100%;
  }
  .header-menu.w-ba.rich-mobile-open {
    display: block;
  }
}

/*
 * Rich 샘플(style.css)은 .modal-wrapper용으로 .modal-content 배경을 투명,
 * .modal-body에 min-height:740px 등을 걸어두어 modal.html(Bootstrap) 레이아웃이 깨짐.
 * #systemModals / #gameModals / #infoModals 안의 시스템 모달만 되돌림.
 */
#systemModals .modal-content,
#gameModals .modal-content,
#infoModals .modal-content {
  border: 1px solid rgba(255, 196, 81, 0.38) !important;
  background: radial-gradient(circle at 18% -8%, rgba(255, 196, 81, 0.12), transparent 40%),
    linear-gradient(180deg, rgba(22, 24, 28, 0.98) 0%, rgba(12, 14, 18, 0.98) 100%) !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.58), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
  min-height: 0 !important;
}

#systemModals .modal-body,
#gameModals .modal-body,
#infoModals .modal-body {
  margin: 0.6rem !important;
  border-radius: 1rem !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  min-height: 0 !important;
  max-height: min(76vh, 840px);
  overflow-y: auto !important;
  overflow-x: hidden !important;
  background: rgba(12, 14, 18, 0.96) !important;
  color: #e7e7e7 !important;
}

#systemModals .modal-body::before,
#gameModals .modal-body::before,
#infoModals .modal-body::before {
  content: none !important;
  display: none !important;
}

#systemModals .modal-header:not(.d-block) {
  background: linear-gradient(180deg, rgba(34, 36, 42, 0.98), rgba(16, 18, 23, 0.98)) !important;
  color: #ffd36b !important;
  justify-content: center !important;
  text-align: center !important;
  padding: 0.95rem 3rem 0.7rem !important;
  border-bottom: 1px solid rgba(255, 196, 81, 0.28) !important;
  margin-bottom: 0 !important;
}

#systemModals .modal-header:not(.d-block) .modal-title {
  color: #ffd36b !important;
  font-size: clamp(1.45rem, 1.8vw, 1.95rem) !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em;
}

#systemModals .modal-header.d-block {
  background: rgba(18, 20, 26, 0.98) !important;
  padding: 1rem !important;
  border-bottom: none !important;
}

#systemModals .modal-footer:not(:empty) {
  margin: 0 0.6rem 0.6rem !important;
  border-radius: 0.85rem !important;
  background: linear-gradient(180deg, rgba(18, 20, 26, 0.96) 0%, rgba(10, 12, 16, 0.98) 100%) !important;
  border-top: 1px solid rgba(255, 196, 81, 0.22) !important;
}

/* 슬롯 등 게임 모달: 시스템 모달과 동일한 다크 + 골드 헤더 (테마7) */
#gameModals .modal-header {
  background: linear-gradient(180deg, rgba(34, 36, 42, 0.98), rgba(16, 18, 23, 0.98)) !important;
  color: #ffd36b !important;
  justify-content: center !important;
  text-align: center !important;
  padding: 0.95rem 3rem 0.7rem !important;
  border-bottom: 1px solid rgba(255, 196, 81, 0.28) !important;
}

#gameModals .modal-header .modal-title {
  color: #ffd36b !important;
  font-size: clamp(1.45rem, 1.8vw, 1.95rem) !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em;
}

#infoModals .modal-header {
  background: #ffffff !important;
  color: #0e7f83 !important;
  justify-content: center !important;
  text-align: center !important;
  padding: 0.95rem 3rem 0.7rem !important;
  border-bottom: 1px solid rgba(16, 170, 165, 0.24) !important;
}

#infoModals .modal-header .modal-title {
  color: #0e7f83 !important;
  font-size: clamp(1.45rem, 1.8vw, 1.95rem) !important;
  font-weight: 800 !important;
  letter-spacing: -0.04em;
}

/* 시스템·게임 모달 헤더 닫기 — 골드 × (Bootstrap 아이콘만 보이던 동그라미 문제 해소) */
#systemModals .modal-header .btn-close,
#gameModals .modal-header .btn-close {
  position: absolute;
  right: 0.95rem;
  top: 0.85rem;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background-color: rgba(255, 255, 255, 0.12);
  opacity: 0.95 !important;
  filter: none !important;
  background-image: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #ffd36b !important;
  font-size: 0 !important;
  line-height: 0 !important;
}

#systemModals .modal-header .btn-close::before,
#gameModals .modal-header .btn-close::before {
  content: '\00d7';
  font-size: 1.55rem;
  font-weight: 300;
  line-height: 1;
  color: inherit;
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
}

#systemModals .modal-header .btn-close:hover,
#gameModals .modal-header .btn-close:hover {
  filter: none !important;
  color: #fff3c8 !important;
  background-color: rgba(255, 196, 81, 0.22) !important;
  border-color: rgba(255, 214, 140, 0.55) !important;
  opacity: 1 !important;
}

#infoModals .modal-header .btn-close {
  position: absolute;
  right: 0.95rem;
  top: 0.85rem;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  border: 1px solid rgba(16, 170, 165, 0.26);
  background-color: #f4fffe;
  opacity: 0.9 !important;
  filter: none !important;
  background-image: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #0e7f83 !important;
  font-size: 0 !important;
  line-height: 0 !important;
}

#infoModals .modal-header .btn-close::before {
  content: '\00d7';
  font-size: 1.55rem;
  font-weight: 300;
  line-height: 1;
  color: inherit;
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
}

#infoModals .modal-header .btn-close:hover {
  opacity: 1 !important;
  background-color: #e8fbf9;
  color: #0a5c5f !important;
}

#systemModals input:not([type='checkbox']):not([type='radio']),
#systemModals select,
#systemModals textarea,
#gameModals input:not([type='checkbox']):not([type='radio']),
#gameModals select,
#gameModals textarea,
#infoModals input:not([type='checkbox']):not([type='radio']),
#infoModals select,
#infoModals textarea {
  border-color: rgba(16, 170, 165, 0.28) !important;
  border-radius: 0.65rem !important;
  box-shadow: none !important;
}

#systemModals input:focus,
#systemModals select:focus,
#systemModals textarea:focus,
#gameModals input:focus,
#gameModals select:focus,
#gameModals textarea:focus,
#infoModals input:focus,
#infoModals select:focus,
#infoModals textarea:focus {
  border-color: rgba(16, 170, 165, 0.72) !important;
  box-shadow: 0 0 0 0.2rem rgba(16, 170, 165, 0.14) !important;
}

/* ---------- 회원 정보 모달 (테마7 다크·골드, 입금/출금과 톤 통일) ---------- */
#systemModals #userInfoModal.modal .modal-dialog {
  max-width: min(100% - 1.5rem, 26.5rem) !important;
}

#systemModals #userInfoModal .modal-content {
  border: 1px solid rgba(255, 196, 81, 0.34) !important;
  border-radius: 0.95rem !important;
  overflow: hidden !important;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55) !important;
  background: linear-gradient(180deg, rgba(22, 24, 30, 0.98) 0%, rgba(12, 14, 18, 0.99) 100%) !important;
}

#systemModals #userInfoModal .modal-header {
  background: linear-gradient(180deg, rgba(34, 36, 42, 0.98), rgba(18, 20, 26, 0.98)) !important;
  color: #ffd36b !important;
  padding: 0.95rem 3rem 0.85rem !important;
  border-bottom: 1px solid rgba(255, 196, 81, 0.28) !important;
  justify-content: center !important;
  text-align: center !important;
  align-items: center !important;
}

#systemModals #userInfoModal .modal-title {
  color: #ffd36b !important;
  font-weight: 800 !important;
  font-size: 1.12rem !important;
  letter-spacing: -0.02em;
}

#systemModals #userInfoModal .modal-body {
  color: #e8e8e8 !important;
  padding: 0 !important;
  background: transparent !important;
}

#systemModals #userInfoModal .userInfoTable.row {
  --ui-line: rgba(255, 196, 81, 0.12);
  --bs-gutter-x: 0;
  --bs-gutter-y: 0;
  display: grid !important;
  grid-template-columns: minmax(0, 42%) minmax(0, 58%);
  margin: 0 !important;
  padding: 0.5rem 0.7rem 0.4rem !important;
}

#systemModals #userInfoModal .userInfoTable > .col-4,
#systemModals #userInfoModal .userInfoTable > .col-8 {
  width: 100% !important;
  max-width: none !important;
  flex: none !important;
  padding: 0.8rem 0.95rem !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  min-height: 3.15rem;
  border-bottom: 1px solid var(--ui-line);
}

#systemModals #userInfoModal .userInfoTable > .col-4.type {
  background: rgba(255, 196, 81, 0.07) !important;
  border-right: 1px solid rgba(255, 196, 81, 0.16) !important;
  color: #ffe5b0 !important;
  font-weight: 600 !important;
  font-size: 0.8125rem !important;
  gap: 0.55rem;
  line-height: 1.4;
}

#systemModals #userInfoModal .userInfoTable .type i {
  width: 1.95rem !important;
  height: 1.95rem !important;
  margin-right: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0;
  border-radius: 0.45rem;
  background: linear-gradient(180deg, rgba(255, 200, 120, 0.2) 0%, rgba(160, 110, 40, 0.12) 100%) !important;
  color: #ffd36b !important;
  font-size: 0.72rem !important;
  border: 1px solid rgba(255, 196, 81, 0.28);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

#systemModals #userInfoModal .userInfoTable > .col-8.value {
  background: rgba(0, 0, 0, 0.28) !important;
  justify-content: flex-start !important;
  font-size: 0.9rem !important;
  font-weight: 500;
  color: #f2f2f2 !important;
  word-break: break-all;
}

#systemModals #userInfoModal .userInfoTable .value span {
  color: inherit !important;
}

#systemModals #userInfoModal .userInfoTable .user-info-row-finance {
  background: rgba(255, 196, 81, 0.05) !important;
}

#systemModals #userInfoModal .userInfoTable .user-info-row-finance.value {
  background: rgba(0, 0, 0, 0.32) !important;
  font-size: 1rem !important;
}

#systemModals #userInfoModal .userInfoTable .user-info-amount {
  font-weight: 800 !important;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  color: #9fffd9 !important;
}

#systemModals #userInfoModal .userInfoTable .user-info-unit {
  margin-left: 0.28rem;
  font-size: 0.82em;
  font-weight: 600;
  color: rgba(190, 220, 208, 0.88) !important;
}

#systemModals #userInfoModal .userInfoTable .user-info-bank-start {
  border-top: 1px solid rgba(255, 196, 81, 0.26) !important;
  margin-top: 0.45rem !important;
  padding-top: 0.95rem !important;
}

#systemModals #userInfoModal .modal-body > .row.g-2 {
  margin: 0 !important;
  padding: 1rem 0.85rem 1.2rem !important;
  gap: 0.5rem 0 !important;
  background: rgba(0, 0, 0, 0.28) !important;
  border-top: 1px solid rgba(255, 196, 81, 0.14);
  --bs-gutter-x: 0.45rem;
  --bs-gutter-y: 0.45rem;
}

#systemModals #userInfoModal .modal-body > .row.g-2 > [class*="col-"] {
  padding-left: calc(var(--bs-gutter-x) * 0.5) !important;
  padding-right: calc(var(--bs-gutter-x) * 0.5) !important;
}

#systemModals #userInfoModal .historyBtn {
  border: 1px solid rgba(255, 196, 81, 0.4) !important;
  border-radius: 0.65rem !important;
  font-weight: 700 !important;
  font-size: 0.8rem !important;
  padding: 0.65rem 0.4rem !important;
  line-height: 1.25 !important;
  transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
  background: linear-gradient(180deg, rgba(255, 200, 120, 0.14) 0%, rgba(35, 30, 20, 0.75) 100%) !important;
  color: #ffe8c8 !important;
}

#systemModals #userInfoModal .historyBtn:hover {
  transform: translateY(-1px);
  border-color: rgba(255, 214, 140, 0.55) !important;
  background: linear-gradient(180deg, rgba(255, 210, 130, 0.22) 0%, rgba(50, 44, 28, 0.85) 100%) !important;
  color: #fff8e8 !important;
}

#systemModals #userInfoModal a.historyBtn {
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

#systemModals #userInfoModal .btn.asset-success.historyBtn,
#systemModals #userInfoModal .btn.asset-danger.historyBtn,
#systemModals #userInfoModal .btn.asset-primary.historyBtn {
  background: linear-gradient(180deg, rgba(255, 200, 120, 0.14) 0%, rgba(35, 30, 20, 0.75) 100%) !important;
  color: #ffe8c8 !important;
  border: 1px solid rgba(255, 196, 81, 0.4) !important;
}

#systemModals #userInfoModal .btn.asset-success.historyBtn:hover,
#systemModals #userInfoModal .btn.asset-danger.historyBtn:hover,
#systemModals #userInfoModal .btn.asset-primary.historyBtn:hover {
  background: linear-gradient(180deg, rgba(255, 210, 130, 0.22) 0%, rgba(50, 44, 28, 0.85) 100%) !important;
  color: #fff8e8 !important;
}

/* ---------- 공지 / 문의 리스트 모달 — 다크 테이블(가독성) ---------- */
#noticeModal .modal-body,
#questionModal .modal-body {
  padding: 0.85rem 1rem 1rem !important;
  background: transparent !important;
}

#noticeModal .dataTables_wrapper,
#questionModal .dataTables_wrapper {
  border: 1px solid rgba(255, 196, 81, 0.22);
  border-radius: 0.95rem;
  padding: 0.5rem 0.5rem 0.4rem;
  background: rgba(8, 10, 14, 0.92);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

#noticeModal table.dataTable,
#questionModal table.dataTable {
  border-collapse: separate !important;
  border-spacing: 0 !important;
  margin-top: 0 !important;
}

#noticeModal table.dataTable thead th,
#questionModal table.dataTable thead th {
  background: linear-gradient(180deg, rgba(42, 44, 52, 0.98) 0%, rgba(24, 26, 32, 0.99) 100%) !important;
  color: #ffd36b !important;
  border-bottom: 1px solid rgba(255, 196, 81, 0.22) !important;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  padding: 0.72rem 0.5rem !important;
}

#noticeModal table.dataTable thead th:first-child,
#questionModal table.dataTable thead th:first-child {
  border-top-left-radius: 0.55rem;
}

#noticeModal table.dataTable thead th:last-child,
#questionModal table.dataTable thead th:last-child {
  border-top-right-radius: 0.55rem;
}

#noticeModal table.dataTable tbody td,
#questionModal table.dataTable tbody td {
  border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important;
  font-size: 0.84rem;
  color: rgba(245, 245, 245, 0.94) !important;
  padding: 0.62rem 0.5rem !important;
  transition: background-color 0.16s ease;
  vertical-align: middle !important;
}

#noticeModal table.dataTable tbody tr:nth-child(even) td,
#questionModal table.dataTable tbody tr:nth-child(even) td {
  background: rgba(255, 255, 255, 0.03);
}

#noticeModal table.dataTable tbody tr:hover td,
#questionModal table.dataTable tbody tr:hover td {
  background: rgba(255, 196, 81, 0.08) !important;
}

#noticeModal table.dataTable tbody td.dataTables_empty,
#questionModal table.dataTable tbody td.dataTables_empty {
  color: rgba(230, 230, 230, 0.85) !important;
  text-align: center;
  padding: 1.25rem !important;
}

/* 제목열 */
#noticeModal table.dataTable tbody td:nth-child(4),
#questionModal table.dataTable tbody td:nth-child(4) {
  font-weight: 600;
  color: #ffffff !important;
}

/* 종류 뱃지 — 어두운 배경용 */
#noticeModal .btn.btn-sm.btn-outline-dark.disabled,
#noticeModal .btn.btn-sm.btn-outline-primary.disabled,
#noticeModal .btn.btn-sm.btn-outline-danger.disabled,
#questionModal .questionType,
#questionModal .questionState {
  border-radius: 999px !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em;
  padding: 0.25rem 0.58rem !important;
  opacity: 1 !important;
  border-width: 1px !important;
}

#noticeModal .btn.btn-sm.btn-outline-dark.disabled {
  color: #c8ebe8 !important;
  border-color: rgba(46, 230, 200, 0.45) !important;
  background: rgba(46, 230, 200, 0.12) !important;
}

#noticeModal .btn.btn-sm.btn-outline-primary.disabled {
  color: #b8d9ff !important;
  border-color: rgba(100, 170, 255, 0.45) !important;
  background: rgba(80, 140, 255, 0.12) !important;
}

#noticeModal .btn.btn-sm.btn-outline-danger.disabled {
  color: #ffb4b4 !important;
  border-color: rgba(255, 120, 120, 0.4) !important;
  background: rgba(255, 80, 80, 0.12) !important;
}

#questionModal .questionType.btn-outline-primary {
  color: #b8d9ff !important;
  border-color: rgba(100, 170, 255, 0.45) !important;
  background: rgba(80, 140, 255, 0.12) !important;
}

#questionModal .questionType.btn-outline-danger {
  color: #ffb4b4 !important;
  border-color: rgba(255, 120, 120, 0.4) !important;
  background: rgba(255, 80, 80, 0.12) !important;
}

#questionModal .questionType.btn-outline-success {
  color: #9ee8c9 !important;
  border-color: rgba(80, 220, 150, 0.45) !important;
  background: rgba(50, 200, 130, 0.12) !important;
}

#questionModal .questionType.btn-outline-warning {
  color: #ffe08a !important;
  border-color: rgba(255, 200, 80, 0.45) !important;
  background: rgba(255, 180, 60, 0.12) !important;
}

#questionModal .questionState.btn-danger {
  background: linear-gradient(180deg, #e05555 0%, #b83838 100%) !important;
  border-color: rgba(255, 120, 120, 0.35) !important;
  color: #fff !important;
}

#questionModal .questionState.btn-primary {
  background: linear-gradient(180deg, #3a9eff 0%, #2176cc 100%) !important;
  border-color: rgba(120, 190, 255, 0.35) !important;
  color: #fff !important;
}

#noticeModal .noticeCheckBtn {
  border: none !important;
  border-radius: 999px !important;
  padding: 0.31rem 0.7rem !important;
  font-size: 0.73rem !important;
  font-weight: 700 !important;
  color: #0a1210 !important;
  background: linear-gradient(180deg, #5ee6d0 0%, #2eb8a8 100%) !important;
  box-shadow: 0 3px 12px rgba(46, 200, 180, 0.25);
}

#noticeModal .noticeCheckBtn:hover,
#noticeModal .noticeCheckBtn:focus {
  filter: brightness(1.06);
  transform: translateY(-1px);
}

#noticeModal .dataTables_wrapper .dataTables_info,
#questionModal .dataTables_wrapper .dataTables_info {
  color: rgba(230, 225, 210, 0.8) !important;
  font-size: 0.78rem;
  padding-top: 0.62rem !important;
}

#noticeModal .dataTables_wrapper .dataTables_paginate,
#questionModal .dataTables_wrapper .dataTables_paginate {
  padding-top: 0.35rem !important;
}

#noticeModal .dataTables_wrapper .dataTables_paginate .paginate_button,
#questionModal .dataTables_wrapper .dataTables_paginate .paginate_button {
  border-radius: 999px !important;
  border: 1px solid rgba(255, 196, 81, 0.28) !important;
  background: rgba(255, 255, 255, 0.06) !important;
  color: rgba(255, 245, 220, 0.95) !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  min-width: 1.8rem;
  padding: 0.18rem 0.55rem !important;
  margin-left: 0.22rem !important;
}

#noticeModal .dataTables_wrapper .dataTables_paginate .paginate_button.current,
#questionModal .dataTables_wrapper .dataTables_paginate .paginate_button.current {
  border-color: rgba(255, 196, 81, 0.55) !important;
  background: linear-gradient(180deg, rgba(255, 200, 100, 0.35) 0%, rgba(200, 150, 60, 0.25) 100%) !important;
  color: #fffef8 !important;
}

#noticeModal .dataTables_wrapper .dataTables_paginate .paginate_button:hover,
#questionModal .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  border-color: rgba(255, 214, 120, 0.5) !important;
  background: rgba(255, 196, 81, 0.12) !important;
  color: #fff !important;
}

#noticeModal .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
#questionModal .dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
  opacity: 0.4;
}

#questionModal .modal-footer .btn-warning {
  background: linear-gradient(180deg, #ffd36b 0%, #c9a03a 100%) !important;
  color: #1a1408 !important;
  border: 1px solid rgba(255, 210, 120, 0.5) !important;
  font-weight: 700 !important;
}

/* 입금·출금 내역 모달 테이블(다크) */
#depositHistoryModal .modal-body,
#withdrawHistoryModal .modal-body {
  background: transparent !important;
}

#depositHistoryModal .dataTables_wrapper,
#withdrawHistoryModal .dataTables_wrapper {
  border: 1px solid rgba(255, 196, 81, 0.22);
  border-radius: 0.95rem;
  padding: 0.5rem 0.5rem 0.4rem;
  background: rgba(8, 10, 14, 0.92);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

#depositHistoryModal table.dataTable thead th,
#withdrawHistoryModal table.dataTable thead th {
  background: linear-gradient(180deg, rgba(42, 44, 52, 0.98) 0%, rgba(24, 26, 32, 0.99) 100%) !important;
  color: #ffd36b !important;
  border-bottom: 1px solid rgba(255, 196, 81, 0.22) !important;
  font-size: 0.8rem;
  font-weight: 700;
  padding: 0.65rem 0.45rem !important;
}

#depositHistoryModal table.dataTable tbody td,
#withdrawHistoryModal table.dataTable tbody td {
  border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important;
  color: rgba(245, 245, 245, 0.94) !important;
  font-size: 0.82rem;
  padding: 0.55rem 0.45rem !important;
  vertical-align: middle !important;
}

#depositHistoryModal table.dataTable tbody tr:nth-child(even) td,
#withdrawHistoryModal table.dataTable tbody tr:nth-child(even) td {
  background: rgba(255, 255, 255, 0.03);
}

#depositHistoryModal table.dataTable tbody td.dataTables_empty,
#withdrawHistoryModal table.dataTable tbody td.dataTables_empty {
  color: rgba(230, 230, 230, 0.85) !important;
  text-align: center;
}

#depositHistoryModal .dataTables_wrapper .dataTables_info,
#withdrawHistoryModal .dataTables_wrapper .dataTables_info {
  color: rgba(230, 225, 210, 0.8) !important;
  font-size: 0.78rem;
}

#depositHistoryModal .dataTables_wrapper .dataTables_paginate .paginate_button,
#withdrawHistoryModal .dataTables_wrapper .dataTables_paginate .paginate_button {
  border-radius: 999px !important;
  border: 1px solid rgba(255, 196, 81, 0.28) !important;
  background: rgba(255, 255, 255, 0.06) !important;
  color: rgba(255, 245, 220, 0.95) !important;
}

#depositHistoryModal .dataTables_wrapper .dataTables_paginate .paginate_button.current,
#withdrawHistoryModal .dataTables_wrapper .dataTables_paginate .paginate_button.current {
  border-color: rgba(255, 196, 81, 0.55) !important;
  background: linear-gradient(180deg, rgba(255, 200, 100, 0.35) 0%, rgba(200, 150, 60, 0.25) 100%) !important;
  color: #fffef8 !important;
}

/* ---------- 입금/출금 — 좌측 안내 ---------- */
#depositModal .check,
#withdrawModal .check {
  text-align: left !important;
  padding: 0.5rem 0.85rem 0.65rem 0 !important;
}

#depositModal .check h3,
#withdrawModal .check h3 {
  color: #ffd36b !important;
  font-size: 0.95rem !important;
  font-weight: 800 !important;
  text-align: left !important;
  margin-bottom: 1.05rem !important;
  letter-spacing: -0.02em;
}

#depositModal .check p,
#withdrawModal .check p {
  text-align: left !important;
  color: rgba(240, 238, 232, 0.9) !important;
  font-size: 0.8125rem !important;
  line-height: 1.68 !important;
  margin: 0 0 0.82rem !important;
  padding-left: 0.65rem !important;
  border-left: 3px solid rgba(255, 196, 81, 0.35);
}

#depositModal .check a,
#withdrawModal .check a {
  display: inline-block;
  margin-top: 0.55rem;
  color: #7ee8dc !important;
  font-weight: 600;
  font-size: 0.82rem;
}

#depositModal .check a:hover,
#withdrawModal .check a:hover {
  color: #b8fff4 !important;
}

/* ---------- 출금신청 — 다크 폼 패널 ---------- */
#withdrawModal #withdraw-btn-group {
  border: 1px solid rgba(255, 196, 81, 0.22);
  border-radius: 0.95rem;
  background: linear-gradient(165deg, rgba(22, 24, 30, 0.95) 0%, rgba(12, 14, 18, 0.98) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  padding: 1.25rem 1.2rem !important;
}

#withdrawModal #withdraw-btn-group hr {
  border-color: rgba(255, 196, 81, 0.18) !important;
  opacity: 1;
}

#withdrawModal #withdraw-cur-money,
#withdrawModal #withdraw-app-money,
#withdrawModal #withdraw-after-text,
#withdrawModal #withdraw-account {
  color: rgba(255, 230, 190, 0.92) !important;
  font-weight: 700;
  font-size: 0.84rem;
  padding-top: 0.22rem;
  padding-bottom: 0.22rem;
}

#withdrawModal #withdraw-btn-group [name='withdraw-won'],
#withdrawModal #withdraw-btn-group .userBalance {
  color: #ffffff !important;
  font-weight: 800;
}

#withdrawModal #withdraw-btn-group .input-group-text {
  border-color: rgba(255, 196, 81, 0.25) !important;
  background: rgba(255, 196, 81, 0.1) !important;
  color: #ffd36b !important;
  font-weight: 700;
  font-size: 0.8rem;
}

#withdrawModal #withdraw-btn-group .form-control {
  border-color: rgba(255, 255, 255, 0.12) !important;
  background: rgba(8, 10, 14, 0.75) !important;
  color: #f2f2f2 !important;
  font-weight: 600;
}

#withdrawModal #withdraw-btn-group .form-control:focus {
  border-color: rgba(46, 230, 200, 0.45) !important;
  box-shadow: 0 0 0 0.16rem rgba(46, 230, 200, 0.12) !important;
}

#withdrawModal #withdraw-btn-group .form-control::placeholder {
  color: rgba(200, 200, 200, 0.45);
}

#withdrawModal #withdraw-req-money,
#withdrawModal #withdraw-after-money {
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #9fffd9 !important;
}

#withdrawModal .withdraw-amount-btn,
#withdrawModal .withdraw-reset-btn {
  width: 100%;
  border-radius: 0.65rem !important;
  font-size: 0.88rem !important;
  font-weight: 700 !important;
  padding: 0.42rem 0.2rem !important;
  transition: all 0.14s ease;
}

#withdrawModal .withdraw-amount-btn.btn-light {
  border: 1px solid rgba(255, 196, 81, 0.22) !important;
  background: rgba(255, 255, 255, 0.06) !important;
  color: #f0ebe3 !important;
}

#withdrawModal .withdraw-amount-btn.btn-light:hover,
#withdrawModal .withdraw-amount-btn.btn-light:focus {
  border-color: rgba(255, 214, 120, 0.45) !important;
  background: rgba(255, 196, 81, 0.14) !important;
  color: #fff !important;
}

#withdrawModal .withdraw-reset-btn {
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  background: rgba(255, 255, 255, 0.05) !important;
  color: rgba(230, 230, 230, 0.9) !important;
}

#withdrawModal .withdraw-reset-btn:hover,
#withdrawModal .withdraw-reset-btn:focus {
  border-color: rgba(255, 255, 255, 0.28) !important;
  background: rgba(255, 255, 255, 0.1) !important;
  color: #fff !important;
}

#withdrawModal #withdraw-history,
#withdrawModal #withdraw-submit {
  width: 100%;
  min-height: 3rem;
  padding: 0.72rem 1rem !important;
  border-radius: 0.75rem !important;
  font-weight: 800 !important;
  font-size: 0.9375rem !important;
  letter-spacing: -0.01em;
}

#withdrawModal #withdraw-history {
  border: 1px solid rgba(255, 196, 81, 0.45) !important;
  background: linear-gradient(180deg, rgba(255, 210, 120, 0.22) 0%, rgba(200, 150, 60, 0.15) 100%) !important;
  color: #ffe8b8 !important;
}

#withdrawModal #withdraw-history:hover,
#withdrawModal #withdraw-history:focus {
  border-color: rgba(255, 214, 140, 0.6) !important;
  background: linear-gradient(180deg, rgba(255, 220, 140, 0.28) 0%, rgba(210, 160, 70, 0.2) 100%) !important;
  color: #fff8e8 !important;
}

#withdrawModal #withdraw-submit {
  border: 1px solid rgba(46, 200, 180, 0.45) !important;
  background: linear-gradient(180deg, #3ad4c0 0%, #1a9e8f 45%, #127a6e 100%) !important;
  color: #061510 !important;
  box-shadow: 0 6px 18px rgba(30, 180, 160, 0.25);
}

#withdrawModal #withdraw-submit:hover,
#withdrawModal #withdraw-submit:focus {
  filter: brightness(1.05);
  transform: translateY(-1px);
}

#withdrawModal #withdraw-submit:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* ---------- 입금신청 — 다크 폼 패널 ---------- */
#depositModal #deposit-btn-group {
  border: 1px solid rgba(255, 196, 81, 0.22);
  border-radius: 0.95rem;
  background: linear-gradient(165deg, rgba(22, 24, 30, 0.95) 0%, rgba(12, 14, 18, 0.98) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  padding: 1.25rem 1.2rem !important;
}

#depositModal #deposit-btn-group hr {
  border-color: rgba(255, 196, 81, 0.18) !important;
  opacity: 1;
}

#depositModal #deposit-cur-money,
#depositModal #deposit-account,
#depositModal #deposit-req-text,
#depositModal #deposit-bonus-text,
#depositModal #deposit-after-text {
  color: rgba(255, 230, 190, 0.92) !important;
  font-weight: 700;
  font-size: 0.84rem;
  padding-top: 0.22rem;
  padding-bottom: 0.22rem;
}

#depositModal #deposit-btn-group [name='deposit-won'],
#depositModal #deposit-btn-group .userBalance {
  color: #ffffff !important;
  font-weight: 800;
}

#depositModal #deposit-bank-value,
#depositModal #deposit-btn-group .form-control {
  border-color: rgba(255, 255, 255, 0.12) !important;
  background: rgba(8, 10, 14, 0.75) !important;
  color: #f0f0f0 !important;
  font-weight: 600;
}

#depositModal #deposit-bank-value:focus,
#depositModal #deposit-btn-group .form-control:focus {
  border-color: rgba(46, 230, 200, 0.45) !important;
  box-shadow: 0 0 0 0.16rem rgba(46, 230, 200, 0.12) !important;
}

#depositModal #deposit-req-money,
#depositModal #deposit-bonus-money,
#depositModal #deposit-after-money {
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #9fffd9 !important;
}

#depositModal .deposit-bank-btn {
  width: 100%;
  border-radius: 0.65rem !important;
  border: 1px solid rgba(46, 200, 180, 0.35) !important;
  background: rgba(46, 200, 180, 0.12) !important;
  color: #b8fff0 !important;
  font-size: 0.8rem !important;
  font-weight: 700 !important;
}

#depositModal .deposit-bank-btn:hover,
#depositModal .deposit-bank-btn:focus {
  border-color: rgba(80, 230, 210, 0.55) !important;
  background: rgba(46, 200, 180, 0.2) !important;
  color: #eafffb !important;
}

#depositModal .deposit-amount-btn,
#depositModal .deposit-reset-btn {
  width: 100%;
  border-radius: 0.65rem !important;
  font-size: 0.88rem !important;
  font-weight: 700 !important;
  padding: 0.42rem 0.2rem !important;
  transition: all 0.14s ease;
}

#depositModal .deposit-amount-btn.btn-light {
  border: 1px solid rgba(255, 196, 81, 0.22) !important;
  background: rgba(255, 255, 255, 0.06) !important;
  color: #f0ebe3 !important;
}

#depositModal .deposit-amount-btn.btn-light:hover,
#depositModal .deposit-amount-btn.btn-light:focus {
  border-color: rgba(255, 214, 120, 0.45) !important;
  background: rgba(255, 196, 81, 0.14) !important;
  color: #fff !important;
}

#depositModal .deposit-reset-btn {
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  background: rgba(255, 255, 255, 0.05) !important;
  color: rgba(230, 230, 230, 0.9) !important;
}

#depositModal .deposit-reset-btn:hover,
#depositModal .deposit-reset-btn:focus {
  border-color: rgba(255, 255, 255, 0.28) !important;
  background: rgba(255, 255, 255, 0.1) !important;
  color: #fff !important;
}

#depositModal #deposit-history,
#depositModal #deposit-submit {
  width: 100%;
  min-height: 3rem;
  padding: 0.72rem 1rem !important;
  border-radius: 0.75rem !important;
  font-weight: 800 !important;
  font-size: 0.9375rem !important;
  letter-spacing: -0.01em;
}

#depositModal #deposit-history {
  border: 1px solid rgba(255, 196, 81, 0.45) !important;
  background: linear-gradient(180deg, rgba(255, 210, 120, 0.22) 0%, rgba(200, 150, 60, 0.15) 100%) !important;
  color: #ffe8b8 !important;
}

#depositModal #deposit-history:hover,
#depositModal #deposit-history:focus {
  border-color: rgba(255, 214, 140, 0.6) !important;
  background: linear-gradient(180deg, rgba(255, 220, 140, 0.28) 0%, rgba(210, 160, 70, 0.2) 100%) !important;
  color: #fff8e8 !important;
}

#depositModal #deposit-submit {
  border: 1px solid rgba(90, 170, 240, 0.45) !important;
  background: linear-gradient(180deg, #5eb8ff 0%, #2a8fe0 45%, #1a6ec0 100%) !important;
  color: #061018 !important;
  box-shadow: 0 6px 18px rgba(40, 140, 220, 0.22);
}

#depositModal #deposit-submit:hover,
#depositModal #deposit-submit:focus {
  filter: brightness(1.05);
  transform: translateY(-1px);
}

#depositModal #deposit-submit:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}


/* 충전/환전 모달 — 금액 버튼·2열 여유 */
#systemModals .rich7-modal--finance.modal-dialog {
  max-width: min(780px, 98vw) !important;
  width: 100%;
}

/* 문의 작성 모달 — 적당한 폭 + 라벨 가독성 */
#systemModals .rich7-modal--inquiry.modal-dialog {
  max-width: min(480px, 94vw) !important;
  width: 100%;
}

#reqQuestionModal .rich7-inquiry-body {
  padding-top: 1rem !important;
  padding-bottom: 1.1rem !important;
}

#reqQuestionModal .rich7-inquiry-label,
#reqQuestionModal .form-label.rich7-inquiry-label {
  color: rgba(255, 224, 170, 0.95) !important;
  font-weight: 700;
  font-size: 0.88rem;
  letter-spacing: -0.01em;
}

#reqQuestionModal .form-floating > label {
  color: rgba(210, 210, 205, 0.92) !important;
}

#reqQuestionModal .form-floating > .form-control:focus ~ label,
#reqQuestionModal .form-floating > .form-select:focus ~ label {
  color: rgba(255, 214, 140, 0.95) !important;
}

/* 입금·출금 모달 — 본문 여백, 2열 간격, 금액 버튼 균일 그리드 */
#systemModals #depositModal .modal-body,
#systemModals #withdrawModal .modal-body {
  margin: 0.72rem 0.88rem 0.92rem !important;
  padding: 1.2rem 1.3rem 1.35rem !important;
}

#systemModals #depositModal .modal-body > .row,
#systemModals #withdrawModal .modal-body > .row {
  --bs-gutter-x: 1.35rem;
  --bs-gutter-y: 1.15rem;
}

#depositModal #deposit-btn-group,
#withdrawModal #withdraw-btn-group {
  padding: 1.45rem 1.35rem 1.55rem !important;
  --bs-gutter-x: 0.5rem;
  --bs-gutter-y: 0.55rem;
}

#depositModal #deposit-btn-group .col-3,
#withdrawModal #withdraw-btn-group .col-3 {
  flex: 0 0 25%;
  max-width: 25%;
}

#depositModal #deposit-btn-group hr,
#withdrawModal #withdraw-btn-group hr {
  margin-top: 0.65rem !important;
  margin-bottom: 0.65rem !important;
}

#depositModal #deposit-btn-group > .col-6,
#withdrawModal #withdraw-btn-group > .col-6 {
  padding-top: 0.15rem;
  padding-bottom: 0.15rem;
}

#withdrawModal #withdraw-btn-group > .col-12 .input-group {
  margin-bottom: 0.35rem;
}

#depositModal .deposit-amount-btn,
#depositModal .deposit-reset-btn,
#withdrawModal .withdraw-amount-btn,
#withdrawModal .withdraw-reset-btn {
  min-height: 3.2rem;
  width: 100% !important;
  max-width: 100%;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  padding-left: 0.35rem !important;
  padding-right: 0.35rem !important;
  font-size: 0.95rem !important;
  line-height: 1.2 !important;
}

#depositModal .check,
#withdrawModal .check {
  padding-top: 0.55rem !important;
  padding-right: 0.65rem !important;
  padding-bottom: 0.45rem !important;
}

/* 입금·출금 하단 액션 열 */
#depositModal #deposit-btn-group > .col-6:has(#deposit-history),
#depositModal #deposit-btn-group > .col-6:has(#deposit-submit),
#withdrawModal #withdraw-btn-group > .col-6:has(#withdraw-history),
#withdrawModal #withdraw-btn-group > .col-6:has(#withdraw-submit) {
  display: flex !important;
  align-items: stretch !important;
}

/* ---------- 받은 메세지 모달 — 다크 테이블(공지/문의와 동일 톤) ---------- */
#systemModals .rich7-modal--message.modal-dialog {
  max-width: min(720px, 96vw) !important;
  width: 100%;
}

#systemModals .rich7-modal--view-message.modal-dialog {
  max-width: min(560px, 94vw) !important;
  width: 100%;
}

#messageModal .modal-body {
  padding: 0.85rem 1rem 1rem !important;
  background: transparent !important;
}

#messageModal .dataTables_wrapper {
  border: 1px solid rgba(255, 196, 81, 0.22);
  border-radius: 0.95rem;
  padding: 0.5rem 0.5rem 0.4rem;
  background: rgba(8, 10, 14, 0.92);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

#messageModal table.dataTable {
  border-collapse: separate !important;
  border-spacing: 0 !important;
  margin-top: 0 !important;
}

#messageModal table.dataTable thead th {
  background: linear-gradient(180deg, rgba(42, 44, 52, 0.98) 0%, rgba(24, 26, 32, 0.99) 100%) !important;
  color: #ffd36b !important;
  border-bottom: 1px solid rgba(255, 196, 81, 0.22) !important;
  font-size: 0.8rem;
  font-weight: 700;
  padding: 0.72rem 0.5rem !important;
}

#messageModal table.dataTable thead th:first-child {
  border-top-left-radius: 0.55rem;
}

#messageModal table.dataTable thead th:last-child {
  border-top-right-radius: 0.55rem;
}

#messageModal table.dataTable tbody td {
  border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important;
  font-size: 0.84rem;
  color: rgba(245, 245, 245, 0.96) !important;
  padding: 0.62rem 0.5rem !important;
  transition: background-color 0.16s ease;
  vertical-align: middle !important;
}

#messageModal table.dataTable tbody tr:nth-child(even) td {
  background: rgba(255, 255, 255, 0.03);
}

#messageModal table.dataTable tbody tr:hover td {
  background: rgba(255, 196, 81, 0.08) !important;
}

#messageModal table.dataTable tbody td:nth-child(4) {
  font-weight: 600;
  color: #ffffff !important;
}

#messageModal .btn.btn-sm.btn-outline-danger[disabled],
#messageModal .btn.btn-sm.btn-outline-primary[disabled],
#messageModal .btn.btn-sm.btn-outline-success[disabled],
#messageModal .questionState {
  border-radius: 999px !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  padding: 0.25rem 0.58rem !important;
  opacity: 1 !important;
}

#messageModal .btn.btn-sm.btn-outline-danger[disabled] {
  color: #ffb4b4 !important;
  border-color: rgba(255, 120, 120, 0.4) !important;
  background: rgba(255, 80, 80, 0.12) !important;
}

#messageModal .btn.btn-sm.btn-outline-primary[disabled] {
  color: #b8d9ff !important;
  border-color: rgba(100, 170, 255, 0.45) !important;
  background: rgba(80, 140, 255, 0.12) !important;
}

#messageModal .btn.btn-sm.btn-outline-success[disabled] {
  color: #9ee8c9 !important;
  border-color: rgba(80, 220, 150, 0.45) !important;
  background: rgba(50, 200, 130, 0.12) !important;
}

#messageModal .questionState.btn-danger {
  background: linear-gradient(180deg, #e05555 0%, #b83838 100%) !important;
  border-color: rgba(255, 120, 120, 0.35) !important;
  color: #fff !important;
}

#messageModal .questionState.btn-primary {
  background: linear-gradient(180deg, #3a9eff 0%, #2176cc 100%) !important;
  border-color: rgba(120, 190, 255, 0.35) !important;
  color: #fff !important;
}

#messageModal .modal-footer {
  margin: 0 0.6rem 0.6rem !important;
  border-radius: 0.85rem !important;
  background: linear-gradient(180deg, rgba(18, 20, 26, 0.96) 0%, rgba(10, 12, 16, 0.98) 100%) !important;
  border-top: 1px solid rgba(255, 196, 81, 0.2) !important;
  padding: 0.55rem 0.75rem !important;
  flex-wrap: wrap;
  gap: 0.5rem;
}

#messageModal #deleteAllModalOpen,
#messageModal #readAllModalOpen {
  min-height: 2.25rem;
  border-radius: 0.7rem !important;
  font-size: 0.82rem !important;
  font-weight: 800 !important;
  padding: 0.35rem 0.85rem !important;
}

#messageModal #deleteAllModalOpen {
  border: 1px solid rgba(255, 120, 120, 0.45) !important;
  background: linear-gradient(180deg, #d94a52 0%, #a83238 100%) !important;
  color: #ffffff !important;
}

#messageModal #readAllModalOpen {
  border: 1px solid rgba(255, 196, 81, 0.45) !important;
  background: linear-gradient(180deg, rgba(255, 210, 120, 0.25) 0%, rgba(200, 150, 60, 0.18) 100%) !important;
  color: #ffecc8 !important;
}

#messageModal .dataTables_wrapper .dataTables_info {
  color: rgba(230, 225, 210, 0.85) !important;
  font-size: 0.78rem;
  padding-top: 0.62rem !important;
}

#messageModal .dataTables_wrapper .dataTables_paginate {
  padding-top: 0.35rem !important;
}

#messageModal .dataTables_wrapper .dataTables_paginate .paginate_button {
  border-radius: 999px !important;
  border: 1px solid rgba(255, 196, 81, 0.28) !important;
  background: rgba(255, 255, 255, 0.06) !important;
  color: rgba(255, 245, 220, 0.95) !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  min-width: 1.8rem;
  padding: 0.18rem 0.55rem !important;
  margin-left: 0.22rem !important;
}

#messageModal .dataTables_wrapper .dataTables_paginate .paginate_button.current {
  border-color: rgba(255, 196, 81, 0.55) !important;
  background: linear-gradient(180deg, rgba(255, 200, 100, 0.35) 0%, rgba(200, 150, 60, 0.25) 100%) !important;
  color: #fffef8 !important;
}

/* 메세지 상세 모달 */
#viewMessageModal .modal-content {
  border: 1px solid rgba(255, 196, 81, 0.28) !important;
  border-radius: 0.95rem !important;
  overflow: hidden !important;
  background: linear-gradient(180deg, rgba(22, 24, 30, 0.98) 0%, rgba(12, 14, 18, 0.99) 100%) !important;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.5) !important;
}

#viewMessageModal .modal-body {
  background: transparent !important;
  color: rgba(235, 235, 235, 0.95) !important;
  padding: 1rem 1.15rem 1.1rem !important;
}

#viewMessageModal .form-label {
  color: rgba(255, 224, 170, 0.95) !important;
  font-weight: 700;
}

#viewMessageModal #viewMessageType,
#viewMessageModal #viewMessageTitle,
#viewMessageModal #viewMessageContent {
  border-color: rgba(255, 196, 81, 0.22) !important;
  background: rgba(8, 10, 14, 0.88) !important;
  color: #f2f2f2 !important;
  box-shadow: none !important;
}

#viewMessageModal #viewMessageContent {
  min-height: 12rem;
  line-height: 1.55;
}

#viewMessageModal .btn-secondary {
  background: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid rgba(255, 196, 81, 0.35) !important;
  color: #ffe8c8 !important;
}

@media (max-width: 420px) {
  #systemModals #userInfoModal .userInfoTable.row {
    grid-template-columns: 1fr;
  }

  #systemModals #userInfoModal .userInfoTable > .col-4.type {
    border-right: none;
  }

  #systemModals #userInfoModal .modal-body > .row.g-2 > [class*="col-"] {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
}

/* ---------- 로그인 상태 팝업 공지: 가로 연속 배치 ---------- */
/* Bootstrap 5는 닫을 때 .show를 바로 뗌 → 레이아웃을 .show에만 묶으면 전체화면 .modal로 잠깐 튀며 번쩍임.
   display:block !important 는 닫은 뒤에도 켜질 수 있어 제거. 닫는 동안(display:block 유지) 동일 스타일 유지. */
#infoModals.popup-inline-open {
  position: fixed;
  left: 0;
  right: 0;
  top: 86px;
  z-index: 1082;
  display: flex;
  justify-content: center;
  gap: 12px;
  pointer-events: none;
  padding: 0 14px;
}

#infoModals.popup-inline-open > .modal.popup.popup-inline-item {
  position: static !important;
  margin: 0 !important;
  width: min(400px, calc(100vw - 28px));
  height: auto !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  pointer-events: auto;
  background: transparent !important;
  overflow: visible !important;
}

#infoModals.popup-inline-open > .modal.popup.popup-inline-item .modal-dialog {
  margin: 0 !important;
  max-width: none !important;
  width: 100%;
  min-height: 0 !important;
  border: none !important;
  background: transparent !important;
}

#infoModals.popup-inline-open > .modal.popup.popup-inline-item .modal-content {
  border-radius: 0.85rem !important;
  overflow: hidden;
  border: none !important;
  outline: none;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.42);
  height: 600px !important;
  min-height: 600px !important;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, #1d1f26 0%, #121318 100%) !important;
  color: #f4f4f4;
}

#infoModals.popup-inline-open > .modal.popup.popup-inline-item .modal-header {
  flex-shrink: 0;
  background: linear-gradient(180deg, #242833 0%, #191b23 100%) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  padding: 0.55rem 0.8rem !important;
}

#infoModals.popup-inline-open > .modal.popup.popup-inline-item .modal-title {
  font-size: 0.9rem !important;
  color: #ffffff !important;
  font-weight: 700;
}

#infoModals.popup-inline-open > .modal.popup.popup-inline-item .modal-body {
  padding: 0.75rem 0.9rem 0.85rem !important;
  flex: 1 1 auto;
  min-height: 320px !important;
  max-height: min(68vh, 620px);
  overflow: auto;
  background: transparent !important;
  color: #e9e9ea;
  font-size: 0.82rem;
  line-height: 1.55;
}

#infoModals.popup-inline-open > .modal.popup.popup-inline-item .modal-footer {
  flex-shrink: 0;
  padding: 0.5rem 0.65rem !important;
  border-top: none !important;
  background: rgba(255, 255, 255, 0.04) !important;
}

#infoModals.popup-inline-open > .modal.popup.popup-inline-item .modal-footer .btn {
  font-size: 0.72rem;
  border-radius: 0.35rem;
}

#infoModals.popup-inline-open > .modal.popup.popup-inline-item .btn-danger {
  background: linear-gradient(180deg, #e84f5f 0%, #ba2031 100%);
  border-color: rgba(255, 255, 255, 0.14);
}

/* 인라인 가로 팝업: 페이드만 짧게 (전체화면 튐 완화 후 잔상 최소화) */
#infoModals.popup-inline-open > .modal.popup.popup-inline-item.fade {
  transition: opacity 0.12s linear;
}

@media (max-width: 1200px) {
  #infoModals.popup-inline-open {
    overflow-x: auto;
    justify-content: flex-start;
    padding-bottom: 2px;
  }
}

/* ---------- 테마6 로그인 모달 (리치 레퍼런스) ---------- */
#systemModals .rich6-login-modal .modal-content.rich6-login-shell {
  padding: 0 !important;
  border: none !important;
  border-radius: 1.35rem !important;
  overflow: hidden !important;
  box-shadow: 0 1.25rem 3rem rgba(4, 40, 38, 0.5) !important;
  background: linear-gradient(180deg, #dff5f3 0%, #ffffff 42%) !important;
  min-height: 0 !important;
  max-width: 100%;
}

#systemModals .rich6-login-dialog {
  max-width: min(100% - 1.5rem, 50rem) !important;
}

.rich6-login-top {
  position: relative;
  padding: 1.35rem 1.25rem 1.5rem;
  background-image: linear-gradient(155deg, rgba(45, 212, 191, 0.88) 0%, rgba(38, 166, 154, 0.88) 38%, rgba(21, 122, 114, 0.92) 100%),
    url('/public/custom/type_6/rich_files/bg/main-bg.jpg');
  background-position: center, center;
  background-size: cover, cover;
  background-repeat: no-repeat, no-repeat;
  text-align: center;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.rich6-login-top::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.14;
  background-image: radial-gradient(circle at 20% 30%, #fff 0.5px, transparent 0.6px),
    radial-gradient(circle at 80% 70%, #fff 0.5px, transparent 0.6px);
  background-size: 24px 24px, 18px 18px;
}

.rich6-login-close {
  position: absolute;
  top: 0.65rem;
  right: 0.65rem;
  z-index: 2;
  opacity: 0.92;
}

.rich6-login-brand {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.85rem;
}

.rich6-login-logo-img {
  width: clamp(220px, 36vw, 340px);
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.28));
}

.rich6-login-heading {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  color: #fff;
  font-size: 1.15rem;
  font-weight: 700;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.rich6-login-heading-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 0.45rem;
  background: linear-gradient(180deg, #ffeb3b 0%, #fbc02d 100%);
  color: #5d4037;
  font-size: 1.15rem;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

.rich6-login-inner {
  padding: 1.35rem 1.35rem 1.5rem;
  background: linear-gradient(180deg, #f7fdfc 0%, #ffffff 28%);
  border-radius: 1.1rem 1.1rem 0 0;
  margin: -0.5rem 0.5rem 0;
  position: relative;
  box-shadow: 0 -4px 24px rgba(13, 90, 82, 0.12);
}

.rich6-login-fields {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.rich6-login-field {
  display: flex;
  align-items: stretch;
  margin: 0;
  border-radius: 0.65rem;
  border: 1px solid rgba(13, 115, 119, 0.22);
  background: #fff;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(13, 60, 64, 0.06);
}

.rich6-login-field:focus-within {
  border-color: #26a69a;
  box-shadow: 0 0 0 3px rgba(38, 166, 154, 0.2);
}

.rich6-login-field-icon {
  flex: 0 0 2.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #e8f5f4 0%, #d5ebe9 100%);
  color: #0f766e;
  font-size: 1.1rem;
  border-right: 1px solid rgba(13, 115, 119, 0.15);
}

.rich6-login-field .rich6-login-input {
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0.72rem 0.85rem;
  font-size: 0.95rem;
}

.rich6-login-field .rich6-login-input:focus {
  box-shadow: none !important;
}

.rich6-login-message {
  min-height: 1.25rem;
  font-size: 0.85rem;
  color: #c62828;
  margin: 0.5rem 0 0;
}

.rich6-login-captcha {
  margin-top: 0.85rem;
  border-radius: 0.65rem;
  overflow: hidden;
  border: 1px solid rgba(13, 115, 119, 0.18);
}

.rich6-login-captcha .captcha-img {
  cursor: pointer;
  max-width: 42%;
  object-fit: contain;
  border-right: 1px solid rgba(13, 115, 119, 0.15);
}

.rich6-login-forgot-row {
  text-align: right;
  margin: 0.65rem 0 0.25rem;
}

.rich6-login-forgot {
  font-size: 0.82rem;
  color: #5f868a;
  text-decoration: none;
}

.rich6-login-forgot:hover {
  color: #0d7377;
  text-decoration: underline;
}

.rich6-login-actions {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  margin-top: 0.75rem;
}

.rich6-login-action {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  border: none;
  border-radius: 999px;
  padding: 0.82rem 1rem;
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.rich6-login-action i {
  font-size: 1.15rem;
  opacity: 0.95;
}

.rich6-login-submit {
  background: linear-gradient(180deg, #3dd4c0 0%, #26a69a 45%, #1a8a7e 100%);
}

.rich6-login-submit:hover {
  filter: brightness(1.05);
  transform: translateY(-1px);
}

.rich6-login-join {
  background: linear-gradient(180deg, #2dd3ff 0%, #1098e5 52%, #0a73bf 100%);
}

.rich6-login-join:hover {
  filter: brightness(1.05);
  transform: translateY(-1px);
}

@media (max-width: 420px) {
  .rich6-login-inner {
    margin-left: 0.35rem;
    margin-right: 0.35rem;
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .rich6-login-logo-img {
    width: clamp(170px, 48vw, 240px);
  }
}

.modal-backdrop.show {
  opacity: 0.65 !important;
}

@media (max-width: 1024px) {
  #systemModals .modal-dialog,
  #gameModals .modal-dialog,
  #infoModals .modal-dialog {
    min-height: auto !important;
    margin: 0.75rem auto !important;
    align-items: center !important;
  }

  #systemModals .modal-dialog-centered,
  #gameModals .modal-dialog-centered,
  #infoModals .modal-dialog-centered {
    min-height: auto !important;
    align-items: center !important;
  }

  #systemModals .modal-content,
  #gameModals .modal-content,
  #infoModals .modal-content {
    min-height: 0 !important;
    border-radius: 0.85rem !important;
  }
}

/* -------------------------------------------------------------------------
   #slotModal — 게임사별 슬롯 목록 썸네일 크기 통일
   테마6 페이지는 style_5.css를 쓰지 않아 API 썸네일이 원본 픽셀 그대로
   커지는 경우가 있음. 그리드 셀 폭에 맞춘 고정 비율 박스 + object-fit.
   ------------------------------------------------------------------------- */
#slotModal .modal-dialog.modal-xl {
  max-width: min(1140px, 96vw);
}

#slotModal .modal-body {
  max-height: 72vh;
  overflow-y: auto;
}

#slotModal .modal-body .row {
  margin-left: -0.45rem;
  margin-right: -0.45rem;
}

#slotModal .modal-body .col-4,
#slotModal .modal-body .col-md-3,
#slotModal .modal-body .col-lg-2 {
  position: relative;
  padding-left: 0.45rem;
  padding-right: 0.45rem;
  margin-bottom: 0.65rem;
}

#slotModal .modal-body .slot-icon {
  width: 100% !important;
  max-width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center;
  display: block;
  border-radius: 10px 10px 0 0;
}

#slotModal .modal-body .overlay {
  position: relative;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 0.55rem 0.65rem 0.62rem;
  border-radius: 0 0 10px 10px;
  background: linear-gradient(180deg, rgba(18, 20, 28, 0.98) 0%, rgba(10, 11, 16, 0.99) 100%);
  border: 1px solid rgba(255, 196, 81, 0.2);
  border-top: none;
}

#slotModal .modal-body .overlay.img-thumbnail {
  background: linear-gradient(180deg, rgba(18, 20, 28, 0.98) 0%, rgba(10, 11, 16, 0.99) 100%) !important;
  border: 1px solid rgba(255, 196, 81, 0.2) !important;
  border-top: none !important;
}

#slotModal .modal-body .overlay .name {
  font-size: 0.78rem;
  font-weight: 700;
  color: #f4f3f0 !important;
  line-height: 1.38;
  margin: 0 0 0.2rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-align: center;
}

#slotModal .modal-body .overlay .provider {
  font-size: 0.68rem;
  font-weight: 600;
  color: rgba(255, 214, 140, 0.9) !important;
  margin: 0;
  text-align: center;
}

#slotModal .modal-body .overlay .slot-modal-play-badge .play {
  color: rgba(80, 220, 200, 0.95) !important;
  font-size: 1.28rem;
  line-height: 1;
}

/* 슬롯 모달: 카드 전체 클릭으로 게임 시작 (썸네일·타이틀·플레이 배지 공통 앵커) */
#slotModal .modal-body .slot-modal-game-card {
  display: block;
  color: inherit;
  cursor: pointer;
  border-radius: 12px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.25);
}

#slotModal .modal-body .slot-modal-game-card:hover {
  text-decoration: none;
  color: inherit;
}

#slotModal .modal-body .slot-modal-game-card:focus-visible {
  outline: 2px solid rgba(13, 202, 182, 0.85);
  outline-offset: 2px;
}

/* 플레이 배지는 장식(실제 클릭은 부모 <a>가 받음) */
#slotModal .modal-body .overlay .slot-modal-play-badge {
  pointer-events: none;
}

#slotModal .modal-body .overlay .slot-modal-play-badge .play {
  pointer-events: none;
}