@charset "utf-8";
/* =======================================================================
   SLOT TIME 프로젝트 전용 custom.css 최종본 (251118)
   - 인덱스 B안 레이아웃 + 헤더/푸터 다크톤 + 메뉴 색상
   - theme.css / navy.css 는 원본 유지, 여기서만 오버라이드
   ======================================================================= */

/* -----------------------------------------------------------------------
   1. 공통 색상/레이아웃 변수
   ----------------------------------------------------------------------- */
:root {
  /* 다크 테마 베이스 */
  --bt-bg: #0f141a;
  --bt-surface: #151b23;
  --bt-surface-soft: #1c2430;
  --bt-surface-alt: #10141c;

  --bt-primary: #1f7ae0; /* 메인 포인트 블루 */
  --bt-accent: #ffb31f; /* 강조용 (뱃지/아이콘) */
  --bt-danger: #ff4b5c; /* 경고/위험 표시 */

  --bt-text: #e5e9f0;
  --bt-text-muted: #9ca3af;
  --bt-border-subtle: #27303d;

  --bt-radius-lg: 14px;
  --bt-radius-md: 10px;
  --bt-radius-sm: 6px;

  --bt-shadow-soft: 0 12px 30px rgba(0, 0, 0, 0.35);
  --bt-shadow-card: 0 10px 26px rgba(0, 0, 0, 0.28);

  --bt-container-width: 1160px;

  /* 푸터/컨테이너 */
  --hf-shell: 1160px;
  --hf-shell-pad: 16px;

  --hf-top-bg1: #0b1727;
  --hf-top-bg2: #050814;

  --hf-footer-bg: #020617;
  --hf-footer-border: rgba(148, 163, 184, 0.16);

  --hf-text: #e5e7eb;
  --hf-muted: #9ca3af;
  --hf-accent: #ffb31f;
}

/* 다크 모드 바디 기본 */
body.bt-dark {
  background-color: var(--bt-bg);
  color: var(--bt-text);
}

/* -----------------------------------------------------------------------
   2. 인덱스 레이아웃 (bt-root / bt-layout / 히어로 등)
   ----------------------------------------------------------------------- */
.bt-root {
  max-width: var(--bt-container-width);
  margin: 0 auto;
  padding: 24px 12px 40px;
}

.bt-layout {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(260px, 1.35fr);
  gap: 24px;
  margin-top: 32px;
}

/* 메인/사이드 컬럼 */
.bt-main {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.bt-aside {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* ---------------- 히어로 영역 ---------------- */
.bt-hero {
  display: grid;
  grid-template-columns: minmax(0, 2.1fr) minmax(0, 1.65fr);
  gap: 24px;
  padding: 22px 20px;
  border-radius: var(--bt-radius-lg);
  background: radial-gradient(
    circle at top left,
    #243b5a 0%,
    #111827 55%,
    #050814 100%
  );
  color: #f9fafb;
  box-shadow: var(--bt-shadow-soft);
}

.bt-hero__left,
.bt-hero__right {
  min-width: 0;
}

.bt-hero-main__eyebrow {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: rgba(15, 23, 42, 0.65);
  border: 1px solid rgba(148, 163, 184, 0.3);
  margin-bottom: 10px;
}

.bt-hero-main__title {
  font-size: 26px;
  line-height: 1.35;
  font-weight: 800;
  margin: 0 0 12px;
}

.bt-hero-main__title span {
  color: var(--bt-accent);
}

.bt-hero-main__text {
  font-size: 13px;
  color: rgba(226, 232, 240, 0.95);
  margin: 0 0 18px;
}

.bt-hero-main__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* 우측 히어로 배너 영역 – 이미지 크기에 맞춰지는 카드 */
.bt-hero__right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;  /* 두 배너를 우측 정렬 */
  gap: 10px;              /* 위/아래 배너 사이 간격 */
}

.bt-hero-banner {
  display: inline-block;  /* 🔥 이미지 크기 기준으로 박스 너비 결정 */
  border-radius: 14px;
  overflow: hidden;
  background: radial-gradient(circle at top left, #111827 0%, #020617 55%, #000000 100%);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.75);
}

/* 배너 이미지 – 가로만 맞추고 세로는 비율 유지 */
.bt-hero-banner img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* 모바일에서는 전체 폭을 쓰도록 */
@media (max-width: 575.98px) {
  .bt-hero__right {
    align-items: stretch;
  }
  .bt-hero-banner {
    width: 100%;
  }
}


/* 메타 정보 */
.bt-hero-meta {
  border-radius: var(--bt-radius-md);
  background: rgba(15, 23, 42, 0.7);
  border: 1px dashed rgba(148, 163, 184, 0.4);
  padding: 10px 12px;
}

.bt-hero-meta dl {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
  margin: 0;
}

.bt-hero-meta dt {
  font-size: 11px;
  font-weight: 700;
  color: #e5e7eb;
}

.bt-hero-meta dd {
  margin: 0;
  font-size: 11px;
  color: rgba(209, 213, 219, 0.8);
}

/* -----------------------------------------------------------------------
   3. 공통 버튼/링크
   ----------------------------------------------------------------------- */
.bt-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 120px;
  height: 38px;
  padding: 0 16px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  border: 0;
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease,
    box-shadow 0.18s ease, transform 0.08s ease;
  text-decoration: none !important;
}

.bt-btn--primary {
  background: var(--bt-primary);
  color: #fff;
  box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.3),
    0 12px 26px rgba(15, 118, 255, 0.45);
}

.bt-btn--primary:hover {
  background: #1c64d8;
  transform: translateY(-1px);
}

.bt-btn--ghost {
  background: rgba(15, 23, 42, 0.75);
  color: #e5e7eb;
  border: 1px solid rgba(148, 163, 184, 0.5);
}

.bt-btn--ghost:hover {
  background: rgba(15, 23, 42, 0.95);
}

/* 링크형 "전체보기" */
.bt-link-more {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--bt-text-muted);
  text-decoration: none !important;
}

.bt-link-more i {
  font-size: 13px;
}

.bt-link-more:hover {
  color: #fff;
}

/* -----------------------------------------------------------------------
   4. 섹션 / 카드 / 리스트
   ----------------------------------------------------------------------- */
.bt-section {
  padding: 16px 16px 18px;
  border-radius: var(--bt-radius-md);
  background: var(--bt-surface);
  border: 1px solid var(--bt-border-subtle);
  box-shadow: var(--bt-shadow-card);
}

.bt-section--primary {
  background: var(--bt-surface-soft);
}

.bt-section--last {
  margin-bottom: 8px;
}

.bt-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.bt-section-head__titles {
  min-width: 0;
}

.bt-section-head__title {
  font-size: 17px;
  line-height: 1.4;
  font-weight: 700;
  color: #f9fafb;
  margin: 0 0 4px;
}

.bt-section-head__desc {
  margin: 0;
  font-size: 12px;
  color: var(--bt-text-muted);
}

/* 카드 그리드/리스트 */
.bt-card-grid {
  display: grid;
  gap: 14px;
}

/* 검증된 슬롯사이트: auto-fit 그리드 */
.bt-card-grid--site {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

/* 분쟁/뉴스: 3열 */
.bt-card-grid--dispute,
.bt-card-grid--news {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* 가로형 카드 줄 */
.bt-card-row {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: thin;
}

/* 블로그 카드 줄 */
.bt-card-row--blog {
  gap: 16px;
}

/* 기본 .na-item 카드 래핑 */
.bt-card-grid .na-item,
.bt-card-row .na-item {
  background: var(--bt-surface-alt);
  border-radius: var(--bt-radius-md);
  border: 1px solid rgba(55, 65, 81, 0.8);
  overflow: hidden;
  transition: transform 0.12s ease, box-shadow 0.12s ease,
    border-color 0.12s ease;
}

.bt-card-grid .na-item:hover,
.bt-card-row .na-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
  border-color: var(--bt-primary);
}

/* 검증된 슬롯사이트 전용 */
.bt-card-grid--site .na-latest,
.bt-card-grid--site .na-latest .na-item {
  display: block;
}

.bt-card-grid--site .na-item {
  background: transparent;
  border: 0;
  padding: 0;
}

.bt-card-grid--site .na-thumb {
  display: block;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 4px;
}

/* 썸네일은 가로 100%만 맞추기 */
.bt-card-grid--site .na-thumb img {
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
}

.bt-card-grid--site .na-subject,
.bt-card-grid--site .na-subject a {
  display: block;
  font-size: 13px;
  color: #f9fafb;
}

.bt-card-grid--site .na-subject a:hover {
  color: #ffb31f;
}

/* 빈 데이터 안내 */
.bt-empty {
  margin: 6px 2px 0;
  font-size: 12px;
  color: var(--bt-text-muted);
}

/* -----------------------------------------------------------------------
   5. 반응형 처리
   ----------------------------------------------------------------------- */
@media (max-width: 1199px) {
  .bt-root {
    padding-top: 18px;
  }
  .bt-layout {
    grid-template-columns: minmax(0, 2.2fr) minmax(260px, 1.6fr);
  }
}

@media (max-width: 991.98px) {
  .bt-root {
    padding: 16px 10px 28px;
  }
  .bt-hero {
    grid-template-columns: minmax(0, 1fr);
    padding: 18px 16px;
  }
  .bt-layout {
    grid-template-columns: minmax(0, 1fr);
  }
  .bt-aside {
    order: -1; /* 모바일에서 사이드 위로 올리려면 -1 */
  }
  .bt-card-grid--site {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .bt-card-grid--dispute,
  .bt-card-grid--news {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 575.98px) {
  .bt-root {
    padding-inline: 8px;
  }
  .bt-section {
    padding: 14px 12px 16px;
  }
  .bt-section-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
  .bt-section-head__title {
    font-size: 16px;
  }
  .bt-card-grid--site,
  .bt-card-grid--dispute,
  .bt-card-grid--news {
    grid-template-columns: minmax(0, 1fr);
  }
  .bt-card-row {
    padding-inline: 2px;
  }
  .bt-hero-main__title {
    font-size: 22px;
  }
}

/* =======================================================================
   6. SLOT TIME 사이드바 카드
   ======================================================================= */
.st-side {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* 기본 카드 박스 */
.st-side-card {
  background: var(--bt-surface, #151b23);
  border-radius: var(--bt-radius-md, 10px);
  border: 1px solid var(--bt-border-subtle, #27303d);
  padding: 14px 14px 16px;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.32);
}

/* 프로필/로그인 카드 */
.st-side-card--outlogin {
  padding: 0;
  overflow: hidden;
}

.st-side-card--outlogin .outlogin,
.st-side-card--outlogin .na-outlogin {
  padding: 16px 16px 18px;
}

/* 헤더 영역 */
.st-side-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}

.st-side-title {
  font-size: 14px;
  font-weight: 700;
  color: #e5e7eb;
  margin: 0;
}

.st-side-more {
  font-size: 11px;
  color: var(--bt-text-muted, #9ca3af);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.st-side-more i {
  font-size: 12px;
}

.st-side-more:hover {
  color: #f9fafb;
}

/* 본문 영역 */
.st-side-body {
  font-size: 12px;
  color: var(--bt-text-muted, #9ca3af);
}

.st-side-body .na-list,
.st-side-body .na-latest,
.st-side-body ul {
  margin-bottom: 0;
}

/* 공통 빈 상태 문구 */
.st-side-empty {
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--bt-text-muted, #9ca3af);
}

/* 추천 영상 */
.st-side-card--media {
  padding-bottom: 14px;
}

.st-side-media {
  margin-top: 4px;
}

.st-side-media-placeholder {
  border-radius: 10px;
  background: #020617;
  border: 1px dashed rgba(148, 163, 184, 0.5);
  padding: 18px 12px;
  text-align: center;
  color: #9ca3af;
  font-size: 12px;
}

.st-side-media-placeholder i {
  display: block;
  font-size: 28px;
  margin-bottom: 6px;
  color: var(--bt-primary, #1f7ae0);
}

@media (max-width: 991.98px) {
  .st-side-card {
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.28);
  }
}

@media (max-width: 575.98px) {
  .st-side-card {
    padding-inline: 12px;
  }
}

/* =======================================================================
   7. 푸터 B안 (hf-*)
   ======================================================================= */

/* 공통 컨테이너 정렬 */
.hf-shell,
#nt_footer .nt-container,
#nt_footer .nt-links > .nt-container {
  max-width: var(--hf-shell) !important;
  margin: 0 auto !important;
  padding: 0 var(--hf-shell-pad) !important;
  box-sizing: border-box;
}

/* 상단 푸터 (검색 + 방문자 + 다단 메뉴) */
#hf-foot-top {
  background: radial-gradient(
    circle at top left,
    var(--hf-top-bg1) 0%,
    var(--hf-top-bg2) 60%
  );
  color: var(--hf-text);
  border-top: 1px solid rgba(148, 163, 184, 0.18);
  border-bottom: 1px solid rgba(15, 23, 42, 0.9);
  padding: 26px 0 22px;
}

#hf-foot-top .grid {
  display: grid;
  grid-template-columns: 1.1fr 2.9fr;
  gap: 24px;
  align-items: flex-start;
}

@media (max-width: 1199px) {
  #hf-foot-top .grid {
    grid-template-columns: 1fr;
  }
}

/* 검색/뉴스레터 카드 */
.hf-newsletter {
  background: radial-gradient(circle at top left, #1e3453 0%, #0b1423 70%);
  border-radius: 14px;
  border: 1px solid rgba(148, 163, 184, 0.4);
  padding: 18px 18px 16px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
  max-width: 520px;
}

.hf-newsletter .ttl {
  font-weight: 800;
  margin: 0 0 10px;
  font-size: 15px;
  color: #f9fafb;
}

.hf-newsletter form {
  display: flex;
  gap: 10px;
}

.hf-newsletter input[type="search"] {
  flex: 1 1 auto;
  min-width: 0;
  height: 44px;
  border: 0;
  border-radius: 999px;
  padding: 0 14px;
  font-size: 13px;
  background: rgba(15, 23, 42, 0.98);
  color: #e5e7eb;
}

.hf-newsletter input[type="search"]::placeholder {
  color: #6b7280;
}

.hf-newsletter button {
  height: 44px;
  border: 0;
  border-radius: 999px;
  padding: 0 18px;
  font-weight: 700;
  font-size: 13px;
  background: var(--bt-accent, #ffb31f);
  color: #111827;
  cursor: pointer;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.5);
  white-space: nowrap;
}

.hf-newsletter button:hover {
  background: #fbbf24;
}

.hf-newsletter small {
  display: block;
  margin-top: 9px;
  opacity: 0.9;
  font-size: 11px;
  color: rgba(226, 232, 240, 0.85);
}

/* 방문자 카드 */
.hf-visit {
  margin-top: 14px;
  background: rgba(3, 7, 18, 0.96);
  border-radius: 14px;
  border: 1px solid rgba(30, 64, 175, 0.6);
  padding: 14px 14px 12px;
  color: #e5e7eb;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.5);
}

.hf-visit-title {
  font-weight: 800;
  letter-spacing: 0.03em;
  margin-bottom: 8px;
  font-size: 12px;
  text-transform: uppercase;
  color: rgba(191, 219, 254, 0.9);
}

.hf-visit-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.hf-visit .it {
  background: #020617;
  border-radius: 10px;
  border: 1px solid rgba(30, 64, 175, 0.65);
  padding: 9px 10px 8px;
}

.hf-visit .lb {
  display: block;
  font-size: 11px;
  opacity: 0.8;
  margin-bottom: 2px;
}

.hf-visit .val {
  font-size: 18px;
  font-weight: 800;
  line-height: 1.1;
}

/* 다단 메뉴 */
.hf-footcols {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

@media (max-width: 1199px) {
  .hf-footcols {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 767px) {
  .hf-footcols {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.hf-footcol .head {
  font-weight: 800;
  margin: 0 0 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.35);
  color: #e5e7eb;
  font-size: 13px;
}

.hf-footcol ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.hf-footcol li {
  padding: 7px 0;
  font-size: 13px;
}

.hf-footcol a {
  color: #cbd5f5;
  text-decoration: none;
}

.hf-footcol a:hover {
  color: #fff;
  text-decoration: underline;
}

/* 본 푸터 */
#nt_footer.hf-darkfoot {
  background: var(--hf-footer-bg);
  color: var(--hf-text);
  border-top: 1px solid rgba(15, 23, 42, 1);
}

#nt_footer .nt-links {
  border-bottom: 1px solid var(--hf-footer-border);
}

#nt_footer .nt-links ul > li::after {
  color: rgba(148, 163, 184, 0.4);
}

#nt_footer .nt-links ul > li > a {
  color: #cbd5f5 !important;
  text-decoration: none;
  font-size: 12px;
}

#nt_footer .nt-links ul > li > a:hover {
  color: #ffffff !important;
}

#nt_footer .px-3.pb-4 {
  border-top: 1px solid rgba(15, 23, 42, 0.9);
  padding-top: 16px;
  padding-bottom: 20px !important;
}

#nt_footer .copy {
  color: #d1e0ff;
  font-weight: 700;
  letter-spacing: 0.02em;
  font-size: 12px;
}

#nt_footer .copy-sub {
  display: inline-block;
  margin-top: 4px;
  font-size: 11px;
  color: var(--hf-muted);
}

#nt_footer .copy-year {
  display: inline-block;
  margin-top: 3px;
  font-size: 11px;
  color: #64748b;
}

#nt_footer i.fa-copyright {
  color: var(--hf-accent);
  margin-left: 2px;
}

@media (max-width: 991px) {
  #nt_footer .nt-links ul > li {
    padding: 0 0.6rem;
  }
}

@media (max-width: 575.98px) {
  #hf-foot-top {
    padding: 22px 0 18px;
  }
  .hf-shell {
    padding-inline: 12px !important;
  }
  #nt_footer .px-3.pb-4 {
    padding-inline: 14px !important;
  }
  #nt_footer .copy,
  #nt_footer .copy-sub,
  #nt_footer .copy-year {
    font-size: 10px;
  }
}

/* =======================================================================
   8. 사이드 로그인 카드 텍스트 강제 색상
   ======================================================================= */
.st-side-card--outlogin,
.st-side-card--outlogin * {
  color: #f9fafb !important;
}

.st-side-card--outlogin strong,
.st-side-card--outlogin b {
  color: #f9fafb !important;
  font-weight: 700;
}

.st-side-card--outlogin span,
.st-side-card--outlogin small {
  color: #e5e7eb !important;
}

/* =======================================================================
   9. 신규 슬롯게임 섹션 가로 스크롤 제거 (PC/태블릿)
   ======================================================================= */
@media (min-width: 768px) {
  .bt-card-row--scroll {
    overflow-x: visible !important;
  }
}

.bt-card-row--scroll::-webkit-scrollbar {
  display: none;
}
.bt-card-row--scroll {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* =======================================================================
   10. 전역 다크 레이아웃 (본문/게시판 중심)  ※ 관리자 제외
   ======================================================================= */

/* wrapper / nt_body 만 다크 그라데이션 적용 (adm 제외) */
body.bt-dark .wrapper,
body.bt-dark #nt_body,
body.bt-dark #thema_wrapper:not(.adm) {
  background: radial-gradient(
    circle at top left,
    #050816 0%,
    #020617 50%,
    #000000 100%
  );
}

/* 본문 컨테이너만 투명하게 (adm 제외) */
body.bt-dark #nt_body .nt-container,
body.bt-dark #nt_body .container,
body.bt-dark #thema_wrapper:not(.adm) .nt-container,
body.bt-dark #thema_wrapper:not(.adm) .container {
  background: transparent;
  color: var(--bt-text);
}

/* 기본 본문 텍스트 */
body.bt-dark,
body.bt-dark #nt_body {
  color: var(--bt-text);
}

/* 기본 카드/박스 계열 */
body.bt-dark .na-box,
body.bt-dark .na-table-box,
body.bt-dark .card,
body.bt-dark .panel,
body.bt-dark .well {
  background: #111827;
  border-color: rgba(55, 65, 81, 0.9);
  color: var(--bt-text);
}

/* 게시판 리스트 헤더/행 */
body.bt-dark #bo_list .tbl_head01,
body.bt-dark .tbl_head01 {
  background: #020617;
  border-color: rgba(55, 65, 81, 0.9);
}

body.bt-dark #bo_list .tbl_head01 thead tr,
body.bt-dark #bo_list .tbl_head01 tbody tr,
body.bt-dark .tbl_head01 tbody tr {
  background: #0b1120;
}

body.bt-dark .tbl_head01 tbody tr:nth-child(odd) {
  background: #020617;
}

/* 게시판 링크 색상 */
body.bt-dark #bo_list .tbl_head01 a,
body.bt-dark .tbl_head01 a {
  color: #e5e7eb;
}

body.bt-dark #bo_list .tbl_head01 a:hover,
body.bt-dark .tbl_head01 a:hover {
  color: #ffb31f;
}

/* 글읽기/쓰기 박스 */
body.bt-dark #bo_v,
body.bt-dark #bo_w,
body.bt-dark .bo_v_com {
  background: #020617;
  border-color: rgba(55, 65, 81, 0.9);
  color: var(--bt-text);
}

/* 입력창/폼 */
body.bt-dark input[type="text"],
body.bt-dark input[type="password"],
body.bt-dark input[type="email"],
body.bt-dark select,
body.bt-dark textarea {
  background: #020617;
  border: 1px solid rgba(55, 65, 81, 0.9);
  color: #e5e7eb;
}

body.bt-dark input::placeholder,
body.bt-dark textarea::placeholder {
  color: #6b7280;
}

/* 기본 버튼 */
body.bt-dark .btn,
body.bt-dark .btn-primary {
  background-color: #1f7ae0;
  border-color: #1d4ed8;
  color: #f9fafb;
}

body.bt-dark .btn:hover,
body.bt-dark .btn-primary:hover {
  background-color: #1d4ed8;
}

/* 사이드 영역 기본 배경 */
body.bt-dark .aside,
body.bt-dark #nt_sidebar,
body.bt-dark .nt-sidebar {
  background: #020617;
  color: var(--bt-text);
}

/* 본문 링크 기본 색 */
body.bt-dark #nt_body a,
body.bt-dark #thema_wrapper:not(.adm) a {
  color: #e5e7eb;
}

body.bt-dark #nt_body a:hover,
body.bt-dark #thema_wrapper:not(.adm) a:hover {
  color: #ffb31f;
}

/* 스크롤바 */
body.bt-dark ::-webkit-scrollbar-thumb {
  background-color: #374151;
}
body.bt-dark ::-webkit-scrollbar-track {
  background-color: #020617;
}

/* =======================================================================
   11. 헤더/메뉴 다크 스타일 (theme.css 구조 기반)
   ======================================================================= */

/* 헤더 전체 래퍼를 다크 톤으로 */
body.bt-dark #nt_header {
  background-color: #050816 !important;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.8);
  position: relative;
  z-index: 50;
}

/* 헤더 안쪽 컨테이너(로고+메뉴 박스) 흰 배경 제거 */
body.bt-dark #header_pc,
body.bt-dark #header_pc .nt-container {
  background-color: #050816 !important;
  box-shadow: none !important;
}

/* 헤더와 메인 사이 그라데이션 띠 */
body.bt-dark #nt_header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 10px;
  background: linear-gradient(
    to bottom,
    rgba(15, 23, 42, 0.9),
    rgba(15, 23, 42, 0)
  );
  pointer-events: none;
}

/* 상단 유틸 메뉴(로그인/FAQ 등) */
body.bt-dark #nt_header,
body.bt-dark #nt_header a {
  color: #e5e7eb;
}
body.bt-dark #nt_header a:hover {
  color: #ffb31f;
}

/* 메뉴 바 배경 (기본 + 고정 상태 모두 동일 색상) */
body.bt-dark #nt_menu,
body.bt-dark #nt_menu .nt-container,
body.bt-dark #nt_menu .nav-full,
body.bt-dark .nt-menu-full .me-ul,
body.bt-dark .nt-menu-fixed #nt_menu,
body.bt-dark .is-fixed #nt_menu,
body.bt-dark #nt_menu.navbar-fixed-top,
body.bt-dark #nt_menu.fixed-top,
body.bt-dark #nt_sticky_wrap.me-sticky,
body.bt-dark #nt_sticky_wrap.me-sticky #header_pc,
body.bt-dark #nt_sticky_wrap.me-sticky #header_pc .nt-container,
body.bt-dark #nt_sticky_wrap.me-sticky #nt_menu,
body.bt-dark #nt_sticky_wrap.me-sticky #nt_menu .nt-container,
body.bt-dark #nt_sticky_wrap.me-sticky .nt-menu-full .me-ul {
  background-color: #050816 !important;
  border-top: 1px solid #020617;
  border-bottom: 1px solid #020617;
}

/* 고정 상태일 때 헤더도 동일 색 유지 */
body.bt-dark .nt-menu-fixed #nt_header,
body.bt-dark .is-fixed #nt_header {
  background-color: #050816 !important;
}

/* 1차 메뉴 기본 텍스트 (me-a 사용) */
body.bt-dark #nt_menu .me-a {
  color: #d1d9ff !important;
  font-weight: 500;
}

/* 1차 메뉴 hover/활성: orangered + 진한 배경 */
body.bt-dark #nt_menu .me-li.on > .me-a,
body.bt-dark #nt_menu .me-li:hover > .me-a {
  color: orangered !important;
  background-color: rgba(15, 23, 42, 0.9) !important;
}

/* 드롭다운 1차 컨테이너 */
body.bt-dark .nt-menu .sub-1div {
  background: #050816 !important;
  border: 1px solid rgba(30, 64, 175, 0.7) !important;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.8);
}

/* 드롭다운 1차 항목 */
body.bt-dark .nt-menu .sub-1da,
body.bt-dark .nt-menu .sub-1line {
  color: #f3f4ff !important;
  background: #050816 !important;
  border-bottom: 1px solid rgba(55, 65, 81, 0.7) !important;
}

/* 드롭다운 1차 hover/활성 */
body.bt-dark .nt-menu .sub-1dli:hover .sub-1da,
body.bt-dark .nt-menu .sub-1dli.on .sub-1da {
  color: #ffb31f !important;
  background: #111827 !important;
  border-color: rgba(55, 65, 81, 0.9) !important;
}

/* 드롭다운 2차 컨테이너 */
body.bt-dark #nt_menu .sub-2div {
  background: #050816 !important;
  border: 1px solid rgba(30, 64, 175, 0.7) !important;
}

/* 드롭다운 2차 항목 */
body.bt-dark #nt_menu .sub-2da,
body.bt-dark #nt_menu .sub-2line {
  color: #f3f4ff !important;
  background: #050816 !important;
  border-bottom: 1px solid rgba(55, 65, 81, 0.7) !important;
}

/* 드롭다운 2차 hover/활성 */
body.bt-dark #nt_menu .sub-2dli:hover .sub-2da,
body.bt-dark #nt_menu .sub-2dli.on .sub-2da {
  color: #ffb31f !important;
  background: #111827 !important;
  border-color: rgba(55, 65, 81, 0.9) !important;
}

/* (부가) .dropdown-menu 구조도 같이 어둡게 */
body.bt-dark #nt_menu .dropdown-menu {
  background-color: rgba(5, 8, 22, 0.96) !important;
  border-radius: 12px;
  border: 1px solid rgba(30, 64, 175, 0.7) !important;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.75);
}
body.bt-dark #nt_menu .dropdown-menu > li,
body.bt-dark #nt_menu .dropdown-menu > li + li {
  border: 0 !important;
}
body.bt-dark #nt_menu .dropdown-menu > li > a,
body.bt-dark #nt_menu .dropdown-menu > li > a span {
  color: #f3f4ff !important;
  font-weight: 500;
}
body.bt-dark #nt_menu .dropdown-menu > li > a:hover,
body.bt-dark #nt_menu .dropdown-menu > li > a:focus {
  background-color: rgba(15, 23, 42, 0.98) !important;
  color: #ffb31f !important;
}

/* =======================================================================
   12. UI 보호 패치 (테마설정/관리자/사이드 드로어는 원래 색상 유지)
   ======================================================================= */

/* 테마 설정 모달/도움말 */
body.bt-dark #theme_setting_wrap,
body.bt-dark #theme_setting_wrap *,
body.bt-dark .thema-modal,
body.bt-dark .thema-modal *,
body.bt-dark #thema_help,
body.bt-dark #thema_help * {
  background-color: initial !important;
  color: initial !important;
  border-color: initial !important;
}

/* 관리자 영역 전체(//adm/) */
body.bt-dark #thema_wrapper.adm,
body.bt-dark #thema_wrapper.adm *,
body.bt-dark .adm-wrap,
body.bt-dark .adm-wrap * {
  background-color: initial !important;
  color: initial !important;
  border-color: initial !important;
}

/* 관리자 탭/버튼 그룹 */
body.bt-dark .thema-index-tab,
body.bt-dark .thema-index-tab *,
body.bt-dark .thema-tab,
body.bt-dark .thema-tab *,
body.bt-dark .btn-group-tab,
body.bt-dark .btn-group-tab * {
  background: initial !important;
  color: initial !important;
}

/* 우측 사이드 드로어 (회원 정보/알림 등) */
body.bt-dark #nt_mo_sidebar,
body.bt-dark #nt_mo_sidebar *,
body.bt-dark #nt_sidebar_drawer,
body.bt-dark #nt_sidebar_drawer * {
  background-color: initial !important;
  color: initial !important;
  border-color: initial !important;
}

/* Nariya 공용 모달/레이어 */
body.bt-dark .na-modal,
body.bt-dark .na-modal *,
body.bt-dark .na-layer,
body.bt-dark .na-layer * {
  background-color: initial !important;
  color: initial !important;
  border-color: initial !important;
}

/* ========================================================================== */
/* SLOT TIME — 관리자 테마설정 / 프리셋 화면 가독성 보정 (251118-ADM)        */
/*  - /adm/preset/bbs.php 처럼 테이블로 되어 있는 테마설정 화면 대상        */
/*  - 기본 라이트 배경 위에 다크 모드 색상이 덮여 글자가 희미해진 문제 수정 */
/* ========================================================================== */

body.bt-dark #thema_config,
body.bt-dark .thema-config-wrap {
  background-color: #020617;
  color: #e5e7eb;
}

/* 상단 탭 (바로가기 / SEO / 기본 / 레이아웃 / 스타일 / 메뉴 / 인덱스 / 페이지 / 타이틀 / 푸터) */
body.bt-dark .thema-config-wrap .nav-tabs > li > a {
  background-color: #020617;
  color: #e5e7eb;
  border-color: rgba(55, 65, 81, 0.8);
}

body.bt-dark .thema-config-wrap .nav-tabs > li.active > a,
body.bt-dark .thema-config-wrap .nav-tabs > li.active > a:hover,
body.bt-dark .thema-config-wrap .nav-tabs > li.active > a:focus {
  background-color: #111827;
  color: #ffb31f;
  border-color: rgba(55, 65, 81, 0.9);
}

/* 테마 설정 테이블(왼쪽 구분 / 오른쪽 설정) */
body.bt-dark .thema-config-wrap .tbl_frm01,
body.bt-dark .thema-config-wrap .tbl_frm01 th,
body.bt-dark .thema-config-wrap .tbl_frm01 td {
  background-color: #020617;
  color: #e5e7eb;
  border-color: rgba(55, 65, 81, 0.8);
}

/* 테마 설정 안내문/설명 텍스트는 약간 더 옅게 */
body.bt-dark .thema-config-wrap .tbl_frm01 td p,
body.bt-dark .thema-config-wrap .tbl_frm01 td small {
  color: #9ca3af;
}

/* Save 버튼 주변 영역 여백/배경 */
body.bt-dark .thema-config-wrap .btn_submit,
body.bt-dark .thema-config-wrap .btn_submit:hover {
  background-color: #1f7ae0;
  border-color: #1d4ed8;
  color: #f9fafb;
}

/* ========================================================================== */
/* SLOT TIME — 사이드메뉴 / 모바일 슬라이드 메뉴 하단 통계 영역 보정 (251118-SB) */
/*  - #nt_sidebar 안의 현재 접속자 / 오늘 방문자 / 어제 방문자 등 통계 박스   */
/*  - 기존 흰 배경 + 연한 글자 → 다크 배경 + 밝은 글자로 변경                */
/* ========================================================================== */

/* 사이드바 전체를 다크 배경으로 통일 */
body.bt-dark #nt_sidebar {
  background-color: #020617;
}

/* 사이드 메뉴 리스트 바로 아래 통계 블록(현재 접속자 등) */
body.bt-dark #nt_sidebar .sidebar-content + .border-top,
body.bt-dark #nt_sidebar .p-3.pb-5.border-top {
  background-color: #020617 !important;
  color: #e5e7eb !important;
  border-top-color: rgba(55, 65, 81, 0.8) !important;
}

/* 통계 항목 텍스트 – 밝게 */
body.bt-dark #nt_sidebar .p-3.pb-5.border-top li,
body.bt-dark #nt_sidebar .p-3.pb-5.border-top li span,
body.bt-dark #nt_sidebar .p-3.pb-5.border-top li strong {
  color: #e5e7eb !important;
}

/* 숫자(방문자 수)는 조금 더 강조 */
body.bt-dark #nt_sidebar .p-3.pb-5.border-top li strong {
  font-weight: 700;
}

/* 통계 영역 안에 있는 작은 설명글(예: 명, 개 등 단위) */
body.bt-dark #nt_sidebar .p-3.pb-5.border-top small {
  color: #9ca3af !important;
}

/* =========================================================
   모바일 상단/서브 메뉴 슬라이드 보정
   - 좌우 그라데이션(gra-left/right-primary)에 글자가 가려지지 않도록
   - 메인/1차/2차 서브 공통 여백 + 스페이서 li 폭 지정
========================================================= */
@media (max-width: 767px) {
  /* 스크롤 프레임 안쪽 여백 */
  #nt_menu_mobile #mobile_nav ul.d-flex,
  #nt_menu_mobile #mobile_nav_sub1 ul.d-flex,
  #nt_menu_mobile #mobile_nav_sub2 ul.d-flex {
    padding-left: 1.25rem; /* .gra 의 width(1.25rem) 만큼 확보 */
    padding-right: 1.25rem;
  }

  /* 스페이서 li : 그라데이션과 동일 폭 */
  #nt_menu_mobile li.mo-menu-spacer {
    flex: 0 0 1.25rem;
    width: 1.25rem;
    padding: 0;
    margin: 0;
    list-style: none;
  }
}

/* 회원랭킹 헤더와 탭 완전 밀착 */
.wg_head_event {
  margin-bottom: 0;
  border-bottom: none;
  border-radius: 8px 8px 0 0;
  /* 기존 디자인 유지 */
}

/* 탭 내비 – 헤더와 완전 밀착 */
.tab-carousel-nav {
  display: flex;
  gap: 0;
  justify-content: center;
  margin: 0;
  border-bottom: 2px solid #1e1e1e;
  background: #181c22;
  /* wg_head_event와 연결감 있게 */
  border-radius: 0 0 0 0;
  overflow: hidden;
}

/* 탭 버튼 – 네모, 배경색은 wg_head_event 연계 */
.tab-btn {
  background: #23272f;
  color: #fff;
  /* 미선택시 흰색 */
  border: none;
  padding: 12px 0 11px 0;
  font-weight: bold;
  border-radius: 0;
  width: 50%;
  min-width: 110px;
  font-size: 15px;
  box-shadow: none;
  cursor: pointer;
  transition: background 0.16s, color 0.16s, box-shadow 0.16s;
  outline: none;
  margin: 0;
  border-bottom: 2px solid transparent;
  border-right: 1px solid #1e1e1e;
  position: relative;
}

.tab-btn:last-child {
  border-right: none;
}

.tab-btn.active {
  background: #10131a;
  /* 더 진한 배경으로 강조 */
  color: #db3232;
  /* 선택시 빨간색 */
  border-bottom: 2px solid #db3232;
  z-index: 2;
  box-shadow: 0 -3px 18px 0 rgba(219, 50, 50, 0.08);
}

.tab-btn.active::after {
  content: "";
  position: absolute;
  left: 30%;
  right: 30%;
  bottom: 0;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: linear-gradient(90deg, #db3232 0%, #ffea7f 100%);
  opacity: 0.85;
}

.tab-carousel-content {
  background: none;
  padding: 0;
  border-radius: 0 0 8px 8px;
  overflow: hidden;
}

/* 랭킹 위젯 내부 라인에 여백 주기 */
/* 리스트 전체에 넉넉한 좌우 여백 */
#box_rank_tab .wr-list {
  padding-left: 18px !important;
  padding-right: 18px !important;
}

/* 각 항목 줄에 여백 추가 - div 또는 li 등 실제 구조에 맞게 */
#box_rank_tab .wr-list > div,
#box_rank_tab .wr-list > li,
#box_rank_tab .wr-list tr {
  padding-left: 20px !important;
  padding-right: 20px !important;
  box-sizing: border-box;
}

/* 테이블 방식이면 각 셀에도 */
#box_rank_tab .wr-list td {
  padding-left: 8px;
  padding-right: 8px;
}

.tab-pane {
  display: none;
}

.tab-pane.active {
  display: block;
}

#box_rank_tab .tab-pane {
  padding-left: 15px !important;
  padding-right: 15px !important;
  box-sizing: border-box;
}

#box_rank_tab .wr-list .d-flex > div {
  padding-left: 6px;
  padding-right: 6px;
}

@media (max-width: 600px) {
  #box_rank_tab .wr-list .d-flex {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
}

/* ==============================
   슬롯타임 - 모바일 서브메뉴 가독성 보정
   - 대상 : /theme/현재테마/css/theme.css 맨 아래
   ============================== */
@media (max-width: 767.98px) {
  /* 1차 서브메뉴 */
  #nt_menu_mobile #mobile_nav_sub1 a {
    color: #111 !important; /* 진한 글자색 */
    opacity: 1 !important;
  }

  /* 2차 서브메뉴 (있는 경우) */
  #nt_menu_mobile #mobile_nav_sub2 a {
    color: #111 !important;
    opacity: 1 !important;
  }
}

/* ===========================================
   모바일 헤더 로고 (100px 중앙정렬)
   =========================================== */
@media (max-width: 767.98px) {
  /* 모바일 헤더 전체 높이 */
  #header_mo {
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* 모바일 전용 로고 이미지 */
  #logo_img_mo {
    max-height: 100px !important;
    width: auto !important;
    display: block;
    margin: 0 auto;
  }
}

/* ===========================================
   PC 공통 레이아웃 정리
   - 헤더, LNB, 본문 모두 같은 nt-container 폭 사용
   - /theme/현재테마/css/custom.css 맨 아래에 위치
   =========================================== */
@media (min-width: 992px) {
  /* nt-container 기본 폭 강제 (1100px) */
  .nt-container {
    max-width: 1100px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* 혹시 헤더 부분만 따로 깨진 경우를 대비해 한 번 더 명시 */
  #nt_header .nt-container {
    max-width: 1100px !important;
  }
}

/* =========================================================
   모바일 헤더 로고 + 슬롯머신 레버 애니메이션
   - 대상 : /theme/현재테마/css/custom.css 맨 아래
   - PC 레이아웃과는 완전히 분리
   ========================================================= */
@media (max-width: 767.98px) {
  /* 모바일 헤더 전체 높이(100px) 세팅 */
  #header_mo {
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* 로고+레버 래퍼 */
  .mo-logo-wrap {
    position: relative;
    display: inline-block;
  }

  /* ==========================
     1) 로고 애니메이션 (SlotShake)
     2) 네온 글로우
     3) Shine(빛이 쓸고 지나감)
     ========================== */
  .mo-logo-animate {
    max-height: 80px;
    width: auto;
    display: block;
    margin: 0 auto;

    /* SlotShake + 살짝 확대 느낌 */
    animation: slotShake 1.4s ease-out 1;
    transform-origin: center;

    /* 네온 느낌 (주황/노랑 포인트) */
    filter: drop-shadow(0 0 4px rgba(255, 195, 0, 0.7))
      drop-shadow(0 0 10px rgba(255, 140, 0, 0.9));
    /* 필요하면 색상만 조정해서 사이트 톤 맞추기 */
  }

  /* Shine 효과 : 로고 위로 빛이 한 번 스윽 지나감 */
  .mo-logo-animate::after {
    content: "";
    position: absolute;
    top: 0;
    left: -120%;
    width: 120%;
    height: 100%;
    background: linear-gradient(
      120deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0.7) 50%,
      rgba(255, 255, 255, 0) 100%
    );
    pointer-events: none;
    /* SlotShake 끝나갈 때쯤 한 번만 실행 */
    animation: logoShine 1.6s ease-out 1 0.2s;
  }

  /* SlotShake 키프레임 */
  @keyframes slotShake {
    0% {
      transform: translateY(0) rotate(0deg) scale(1);
    }
    15% {
      transform: translateY(-3px) rotate(-2deg) scale(1.02);
    }
    30% {
      transform: translateY(3px) rotate(2deg) scale(1.02);
    }
    45% {
      transform: translateY(-2px) rotate(-1.5deg) scale(1.01);
    }
    60% {
      transform: translateY(2px) rotate(1.5deg) scale(1.01);
    }
    80% {
      transform: translateY(0) rotate(0deg) scale(1);
    }
    100% {
      transform: translateY(0) rotate(0deg) scale(1);
    }
  }

  /* Shine 키프레임 */
  @keyframes logoShine {
    0% {
      left: -120%;
    }
    100% {
      left: 140%;
    }
  }

/* ==========================================
   모바일 로고 네온 + 슬롯머신 레버 애니메이션
   ========================================== */
@media (max-width: 767.98px) {

  /* 모바일 헤더 높이 고정 */
  #header_mo {
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* 로고 래퍼 (레버 기준점) */
  .mo-logo-wrap {
    position: relative;
    display: inline-block;
  }

  /* 로고 이미지 + 네온 효과 */
  .mo-logo-animate {
    position: relative;
    max-height: 90px;
    width: auto;
    display: block;
    margin: 0 auto;
    z-index: 5;

    /* 살짝 흔들리는 슬롯 느낌 */
    animation: slotShake 1.2s ease-out 1;
    transform-origin: center;

    filter:
      drop-shadow(0 0 4px rgba(255, 195, 0, 0.7))
      drop-shadow(0 0 10px rgba(255, 140, 0, 0.9));
  }

  /* 로고 위로 지나가는 빛(shine) */
  .mo-logo-animate::after {
    content: "";
    position: absolute;
    top: 0;
    left: -130%;
    width: 130%;
    height: 100%;
    background: linear-gradient(
      120deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0.7) 50%,
      rgba(255, 255, 255, 0) 100%
    );
    pointer-events: none;
    z-index: 6;
    animation: logoShine 1.4s ease-out 1 0.2s;
  }

  @keyframes slotShake {
    0%   { transform: translateY(0) rotate(0deg) scale(1); }
    15%  { transform: translateY(-3px) rotate(-2deg) scale(1.02); }
    30%  { transform: translateY(3px)  rotate(2deg)  scale(1.02); }
    60%  { transform: translateY(0)  rotate(0deg)  scale(1); }
    100% { transform: translateY(0)  rotate(0deg)  scale(1); }
  }

  @keyframes logoShine {
    0%   { left: -130%; }
    100% { left: 150%; }
  }

  /* ===== 슬롯머신 레버 ===== */
  /* ===== 슬롯머신 레버 (컨테이너) ===== */
  .mo-lever {
    position: absolute;
    top: 50%;
    right: -20px; /* 로고와의 간격 조정 */
    width: 30px;
    height: 80px; /* 회전 반경을 고려해 높이 확보 */
    
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start; /* 위쪽 정렬 */

    /* ★ 핵심: 회전축을 '상단 중앙'으로 고정 */
    transform-origin: top center; 
    /* 초기 위치를 수직 중앙으로 잡음 */
    transform: translateY(-50%) rotate(0deg);

    pointer-events: none;
    z-index: 10;

    /* 딜레이 후 당기는 애니메이션 시작 */
    animation: leverPullReal 1.5s cubic-bezier(0.36, 0, 0.66, -0.56) 1 0.5s;
    /* cubic-bezier를 사용하여 당길 때 텐션감 부여 */
  }

  /* ★ 레버 관절(힌지) 추가 - 기계적인 디테일 */
  .mo-lever::before {
    content: '';
    position: absolute;
    top: -4px;
    width: 12px;
    height: 12px;
    background: radial-gradient(circle, #999 30%, #555 100%);
    border-radius: 50%;
    box-shadow: 0 1px 2px rgba(0,0,0,0.8);
    z-index: 1; /* 막대보다 뒤에 혹은 앞에 배치 */
  }

  /* 막대 (Shaft) */
  .mo-lever .lever-bar {
    position: relative;
    top: 0; /* flex 정렬 */
    width: 6px; /* 조금 더 두껍게 */
    height: 45px;
    background: linear-gradient(90deg, #888, #eee 40%, #999);
    border-radius: 0 0 4px 4px; /* 아래쪽만 둥글게 */
    box-shadow: inset 1px 0 2px rgba(0,0,0,0.5);
    z-index: 0;
  }

  /* 손잡이 (Knob) */
  .mo-lever .lever-knob {
    width: 24px; /* 손잡이를 좀 더 크게 */
    height: 24px;
    margin-top: -5px; /* 막대와 자연스럽게 연결 */
    border-radius: 50%;
    
    /* 빨간색 계열의 보석 느낌 (슬롯머신 특유의 느낌) */
    background: radial-gradient(circle at 35% 35%, #ffecb3, #ff6f00, #d84315);
    
    box-shadow: 
      0 4px 6px rgba(0,0,0,0.6), /* 그림자 */
      inset -2px -2px 6px rgba(0,0,0,0.3); /* 입체감 */
    z-index: 2;
  }

  /* ★ 사실적인 레버 당기기 모션 */
  @keyframes leverPullReal {
    0% { 
      transform: translateY(-50%) rotate(0deg); 
    }
    /* [Phase 1] 힘주어 당김 (가속) */
    20% { 
      transform: translateY(-50%) rotate(45deg); 
    }
    /* [Phase 2] 끝까지 닿았을 때의 충격 (Bounce) */
    30% { 
      transform: translateY(-50%) rotate(40deg); 
    }
    35% { 
      transform: translateY(-50%) rotate(45deg); 
    }
    /* [Phase 3] 놓았을 때 스프링처럼 튕겨 올라감 (Elastic Release) */
    50% { 
      transform: translateY(-50%) rotate(-15deg); /* 반대편으로 오버슈팅 */
    }
    /* [Phase 4] 잔진동 (Wobble) */
    65% { 
      transform: translateY(-50%) rotate(8deg); 
    }
    80% { 
      transform: translateY(-50%) rotate(-4deg); 
    }
    90% { 
      transform: translateY(-50%) rotate(2deg); 
    }
    100% { 
      transform: translateY(-50%) rotate(0deg); 
    }
  }
}

/* ==========================================================================
   SLOT TIME — 히어로 우측 2단 이미지 카드 (메인 상단 배너)
   ========================================================================== */

/* 히어로 우측 전체 래퍼 */
.st-hero-side {
  display: flex;
  flex-direction: column;
  gap: 10px; /* 두 이미지 사이 간격만 이 값으로 제어 */
}

/* 공통 카드 스타일: 라운드 + 그라디언트 + 그림자 */
.st-hero-side__top,
.st-hero-side__bottom {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  background: radial-gradient(circle at top left, #111827 0%, #020617 55%, #000000 100%);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.75);
}

/* 이미지 자체는 여백 없이 꽉 채우기 */
.st-hero-side__top img,
.st-hero-side__bottom img {
  display: block;
  width: 100%;
  height: auto;
}

/* 살짝 입체감: 아래 카드가 오른쪽/아래로 약간 이동한 느낌 */
.st-hero-side__bottom {
  margin-left: 10px;   /* 오른쪽으로 조금 밀기 */
  margin-right: -4px;  /* 겹치는 느낌 */
  transform: translateY(-4px);
}

/* 모바일에서는 겹침 효과를 줄이고 정렬만 맞추기 */
@media (max-width: 575.98px) {
  .st-hero-side__bottom {
    margin-left: 0;
    margin-right: 0;
    transform: translateY(0);
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.7);
  }
}

/* ========================================================================
   SLOT TIME – 히어로 우측 2단 배너 이미지 전용 스타일
   - 기존 bt-hero-banner의 padding/min-height 때문에 생기던 여백 제거
   - 두 배너 사이 간격 통일 + 입체감 있는 그림자 적용
   ======================================================================== */

/* 우측 히어로 컬럼 전체를 위·아래 여백 최소화 */
.bt-hero__right {
  display: flex;
  flex-direction: column;
  justify-content: center; /* 좌측 높이에 맞춰 가운데 정렬 느낌 */
}

/* 우측 히어로 안에서만 bt-hero-banner를 "순수 이미지 래퍼"로 사용 */
.bt-hero__right .bt-hero-banner {
  padding: 0;            /* 안쪽 여백 제거 */
  margin: 0 0 8px;       /* 배너 사이 간격(아래만 8px) */
  min-height: 0;         /* 강제 높이 제거 */
  background: transparent;
  border: 0;
  box-shadow: none;
}

/* 마지막 배너는 아래 여백 제거 → 위쪽과 비슷한 느낌으로 맞춤 */
.bt-hero__right .bt-hero-banner:last-child {
  margin-bottom: 0;
}

/* 실제 이미지 스타일 – 라운드 + 그림자(입체감) */
.bt-hero__right .bt-hero-banner img {
  display: block;
  width: 100%;
  height: auto;                  /* 비율 그대로 */
  border-radius: 12px;
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.6);
}

/* 상단 배너는 살짝 더 강조 (그라데이션 오버레이 등 추가하고 싶을 때 예비용) */
.bt-hero__right .bt-hero-banner:first-child img {
  border-radius: 14px;
}

/* 반응형에서 여백 조금만 줄이기 */
@media (max-width: 991.98px) {
  .bt-hero__right .bt-hero-banner {
    margin-bottom: 6px;
  }
}

/* ========================================================================
   SLOT TIME — 우측 히어로 배너: 이미지 크기에 따라 박스 높이 자동
   ======================================================================== */

/* 우측 영역: 내용 높이에 맞게 자동 늘어남 */
.bt-hero__right {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-self: flex-start;   /* 좌측보다 작으면 작은대로, 크면 큰대로 */
}

/* 배너 박스는 여백/테두리 제거, 이미지만 담당 */
.bt-hero__right .bt-hero-banner {
  padding: 0;
  margin: 0;
  background: transparent;
  border: 0;
}

/* 이미지: 가로는 박스에 맞추고, 세로는 비율대로 → 이미지 높이에 맞춰 박스가 늘어남 */
.bt-hero__right .bt-hero-banner img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.45);
}

/* 아래 텍스트 박스와 간격만 살짝 조정 */
.bt-hero-meta {
  margin-top: 4px;
}

/* ===============================
   SLOT TIME – Hero Right Banner Fix
   우측 정렬 & 배너 간격 조정
   =============================== */

/* 우측 배너 컨테이너를 오른쪽 끝에 붙이기 위한 설정 */
.bt-hero__right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;   /* 🔥 우측 정렬 핵심 */
    justify-content: flex-start;
    gap: 30px;               /* 🔥 이미지 사이 간격 */
    padding-right: 6px;      /* 🔥 너무 딱 붙지 않게 약간 여백 */
}

/* 배너 박스가 확대되거나 넘치지 않도록 제한 */
.bt-hero-banner {
    width: auto;
    max-width: 340px;       /* 이미지 크기에 맞춰 자연스럽게 조정 */
    height: auto;
    background: transparent !important;
    border: 0 !important;   /* 원래 들어가던 테두리 제거 */
    padding: 0 !important;
    box-shadow: none !important;
}

/* 흰 테두리/배경으로 보이는 문제 방지 */
.bt-hero-banner img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
}

/* =========================================================
   SLOT TIME – 히어로 우측 배너 최종 정리 (이미지 크기에 맞춰 자동)
   - 우측 배너 박스가 이미지 높이에 맞게 따라가도록 조정
   - 위/아래 여백을 통일해서 좌측 히어로와 라인 맞춤
   ========================================================= */

/* 우측 히어로 컬럼 전체: 세로로 나란히, 위쪽에 붙이고 간격만 일정하게 */
.bt-hero__right {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;   /* 위쪽부터 쌓기 */
  align-items: stretch;          /* 그리드 열 너비에 맞춰 자동 확장 */
  gap: 8px;                      /* 두 배너 사이 간격 */
}

/* 배너 래퍼는 “이미지만 감싸는 투명 박스” 역할만 하도록 */
.bt-hero__right .bt-hero-banner {
  padding: 0 !important;        /* 내부 여백 제거 */
  margin: 0 !important;         /* 바깥 여백 제거(간격은 gap으로만 제어) */
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  min-height: 0 !important;     /* 예전 min-height 영향 제거 */
}

/* 실제 이미지: 가로는 칼럼 폭에 100%, 세로는 비율 유지
   → 이미지 크기에 따라 박스 높이가 자동으로 변함 */
.bt-hero__right .bt-hero-banner img {
  display: block;
  width: 100% !important;       /* 혹시 HTML에서 width 지정해도 덮어쓰기 */
  height: auto !important;
  border-radius: 12px;
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.6); /* 살짝 입체감 */
}

/* 메타 정보와 배너 사이 간격만 조금 띄우기 */
.bt-hero__right .bt-hero-meta {
  margin-top: 6px;
}