/* [Client] /theme/Weblease-Simple/css/betpromo_menu.css */
/* Version: v2.1.0 (Minor) */
/* Date: 2024-12-19 */
/* Author: Web-lease_AI_Assistant */
/* [변경 이력] */
/* - v2.0.0 : 헤더 통합 디자인 (과도 적용으로 레이아웃 파괴) */
/* - v2.1.0 : 핵심 문제 해결 - 중앙정렬 복구, 서브메뉴 수정, 디자인 개선 */
/* [기능 요약] */
/* 1. 헤더만 Deep Navy, 메인 영역 화이트 배경 복구 */
/* 2. 나리야 테마 중앙 정렬 시스템 완전 복구 */
/* 3. 서브메뉴 정렬 오류 해결 */
/* 4. 세련된 미니멀 디자인 적용 */

/********************************************************
■ 통합 색상 변수
********************************************************/
:root {
  --betpromo-header-bg: #1a202c; /* Deep Navy */
  --betpromo-text-white: #ffffff;
  --betpromo-text-muted: rgba(255, 255, 255, 0.8);
  --betpromo-accent-gold: #ffd700;
  --betpromo-accent-green: #4ade80; /* 밝은 그린 */
  --betpromo-accent-red: #dc3545;
}

/********************************************************
■ 1. 레이아웃 구조 완전 복구 (핵심 문제 해결)
********************************************************/

/* 메인 영역 화이트 배경 강제 복구 */
body,
#nt_body,
.nt-body,
#wrapper {
  background-color: #ffffff !important;
  background-image: none !important;
}

/* 헤더 영역만 Deep Navy 적용 */
#nt_header,
header,
#nt_sticky,
#nt_sticky_wrap {
  background-color: var(--betpromo-header-bg) !important;
  background-image: none !important;
  border: none !important;
}

/* 상단 유틸리티 영역 */
.nt-top,
.top-menu {
  background-color: rgba(0, 0, 0, 0.2) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* [중요] 중앙 정렬 시스템 완전 복구 */
.nt-container,
.container {
  max-width: 1200px !important; /* 나리야 기본 폭 복구 */
  margin: 0 auto !important; /* 중앙 정렬 복구 */
  padding-left: 20px !important;
  padding-right: 20px !important;
}

/********************************************************
■ 2. 헤더 텍스트 및 로고 스타일
********************************************************/

/* 헤더 내 모든 링크 */
#nt_header a,
#nt_sticky a,
.nt-top a {
  color: var(--betpromo-text-muted) !important;
  text-decoration: none;
  transition: color 0.3s ease;
}

#nt_header a:hover,
#nt_sticky a:hover,
.nt-top a:hover {
  color: var(--betpromo-text-white) !important;
}

/* 로고 스타일 */
.nt-logo h1 a,
.logo h1 a {
  color: var(--betpromo-text-white) !important;
  font-size: 1.6rem;
  font-weight: 800;
}

/********************************************************
■ 3. 메뉴 디자인 - 미니멀 & 세련됨 (테두리 완전 제거)
********************************************************/

/* 메뉴 컨테이너 초기화 */
#nt_menu,
#nt_menu.nt-menu {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  padding: 0;
  margin: 0;
}

/* 메뉴 리스트 정렬 */
#nt_menu .me-ul {
  display: flex !important;
  align-items: center;
  justify-content: flex-end;
  margin: 0;
}

#nt_menu .me-li {
  float: none !important;
  margin: 0 2px;
}

/* 대메뉴 링크 - 깔끔한 기본 스타일 */
#nt_menu .me-li > a {
  color: var(--betpromo-text-muted) !important;
  font-weight: 600;
  font-size: 1rem;
  padding: 15px 18px !important;
  background: transparent !important;
  border: none !important; /* 모든 테두리 제거 */
  border-radius: 0 !important;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
}

/* 메뉴 호버 효과 */
#nt_menu .me-li > a:hover {
  color: var(--betpromo-text-white) !important;
  background: rgba(255, 255, 255, 0.1) !important;
}

/* 액티브 메뉴 */
#nt_menu .me-li.on > a {
  color: var(--betpromo-text-white) !important;
  background: rgba(255, 255, 255, 0.15) !important;
}

/* 메뉴 아이콘 */
#nt_menu .me-a .fa {
  margin-right: 6px;
}

/********************************************************
■ 4. 특별 메뉴 강조 - 텍스트 색상만 변경 (세련됨)
********************************************************/

/* 프로모션 메뉴 - 골드 텍스트로만 강조 */
#nt_menu .me-li:first-child > a {
  color: var(--betpromo-accent-gold) !important;
  font-weight: 700;
  background: transparent !important;
  border: none !important;
}

#nt_menu .me-li:first-child > a:hover {
  text-shadow: 0 0 10px rgba(255, 215, 0, 0.6);
  background: rgba(255, 215, 0, 0.1) !important;
}

/* 검증업체 메뉴 - 밝은 그린 텍스트로만 강조 */
#nt_menu .me-li:nth-child(2) > a {
  color: var(--betpromo-accent-green) !important;
  font-weight: 600;
  background: transparent !important;
  border: none !important;
}

#nt_menu .me-li:nth-child(2) > a:hover {
  text-shadow: 0 0 10px rgba(74, 222, 128, 0.6);
  background: rgba(74, 222, 128, 0.1) !important;
}

/* 이벤트 메뉴 HOT 뱃지 - 작고 세련되게 */
#nt_menu .me-li:nth-child(4) > a {
  position: relative;
}

#nt_menu .me-li:nth-child(4) > a::after {
  content: "HOT";
  position: absolute;
  top: 5px;
  right: 5px;
  font-size: 9px;
  font-weight: 800;
  color: var(--betpromo-accent-red);
  animation: pulse-hot 1.5s infinite;
}

@keyframes pulse-hot {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.6;
  }
}

/********************************************************
■ 5. 서브메뉴 정렬 오류 완전 해결
********************************************************/

/* 서브메뉴 컨테이너 - 너비와 정렬 문제 해결 */
#nt_menu .sub-1div,
#nt_menu .sub-full {
  background: #ffffff;
  border-top: 3px solid var(--betpromo-header-bg);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
  border-radius: 0 0 8px 8px;
  padding: 12px 0;
  min-width: 200px; /* 최소 너비 보장 */
  white-space: nowrap; /* 텍스트 줄바꿈 방지 */
  text-align: left; /* 좌측 정렬 강제 */
  z-index: 1000;
}

/* 서브메뉴 링크 - 세로 정렬 오류 방지 */
#nt_menu .sub-1da {
  color: #333 !important;
  padding: 10px 20px;
  font-size: 0.95rem;
  font-weight: 500;
  display: block;
  white-space: nowrap; /* 중요: 세로 배치 방지 */
  text-align: left;
  border-left: 3px solid transparent;
  transition: all 0.25s ease;
}

#nt_menu .sub-1da:hover {
  color: var(--betpromo-header-bg) !important;
  background: #f8f9fa;
  border-left-color: var(--betpromo-header-bg);
  padding-left: 25px;
  text-decoration: none;
}

#nt_menu .sub-1dli.on > a {
  color: var(--betpromo-header-bg) !important;
  background: #e7f1ff;
  border-left-color: var(--betpromo-header-bg);
  font-weight: 600;
}

/* 서브메뉴 아이콘 */
#nt_menu .sub-1da .fa {
  margin-right: 8px;
  width: 16px;
  text-align: center;
  color: var(--betpromo-header-bg);
}

/********************************************************
■ 6. 모바일 메뉴
********************************************************/

#nt_menu_mobile .bg-primary {
  background: var(--betpromo-header-bg) !important;
}

#nt_menu_mobile #mobile_nav a {
  color: var(--betpromo-text-muted) !important;
  font-weight: 600;
}

#nt_menu_mobile #mobile_nav a.on {
  color: var(--betpromo-accent-gold) !important;
  font-weight: 700;
  background: rgba(255, 215, 0, 0.2);
}

/********************************************************
■ 7. Hero Section 색상 구분
********************************************************/

.betpromo-hero,
.promocity-hero {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
  margin-top: 0;
  border-radius: 0 0 15px 15px;
}

/********************************************************
■ 8. 반응형 최적화
********************************************************/

/* 대형 화면 */
@media (min-width: 1400px) {
  .nt-container,
  .container {
    max-width: 1320px !important;
  }
}

/* 태블릿 */
@media (min-width: 768px) and (max-width: 991px) {
  .nt-container,
  .container {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }

  #nt_menu .me-li > a {
    padding: 12px 15px !important;
    font-size: 0.9rem;
  }
}

/* 모바일 */
@media (max-width: 767px) {
  .nt-container,
  .container {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
}

/********************************************************
■ 9. 접근성
********************************************************/

#nt_menu .me-li > a:focus {
  outline: 3px solid var(--betpromo-accent-gold);
  outline-offset: 2px;
}

/* [Client] 메뉴 텍스트 가시성 긴급 패치 v2.1.1 */
/* Version: v2.1.1 (Patch) */
/* Date: 2024-12-19 */
/* Author: Web-lease_AI_Assistant */
/* [변경 이력] */
/* - v2.1.1 : 나리야 테마 구조 대응 텍스트 색상 긴급 수정 */

/********************************************************
■ 긴급 수정: 대메뉴 텍스트 완전 가시화
********************************************************/

/* 1. 모든 대메뉴 링크 및 내부 요소 색상 강제 적용 */
#nt_menu .me-li > a,
#nt_menu .me-li > a span,
#nt_menu .me-li > a i,
#nt_menu .me-li > a .fa {
  color: rgba(255, 255, 255, 0.9) !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5) !important;
  transition: all 0.3s ease !important;
}

/* 2. 호버 상태 강화 */
#nt_menu .me-li > a:hover,
#nt_menu .me-li > a:hover span,
#nt_menu .me-li > a:hover i,
#nt_menu .me-li > a:hover .fa {
  color: #ffffff !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.7) !important;
  background: rgba(255, 255, 255, 0.15) !important;
}

/* 3. 액티브 상태 */
#nt_menu .me-li.on > a,
#nt_menu .me-li.on > a span,
#nt_menu .me-li.on > a i,
#nt_menu .me-li.on > a .fa {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.2) !important;
}

/* 4. 프로모션 메뉴 (첫 번째) - 골드 강조 */
#nt_menu .me-li:first-child > a,
#nt_menu .me-li:first-child > a span,
#nt_menu .me-li:first-child > a i,
#nt_menu .me-li:first-child > a .fa {
  color: #ffd700 !important;
  font-weight: 700 !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8) !important;
}

#nt_menu .me-li:first-child > a:hover,
#nt_menu .me-li:first-child > a:hover span,
#nt_menu .me-li:first-child > a:hover i {
  color: #ffed4e !important;
  text-shadow: 0 0 10px rgba(255, 215, 0, 0.6) !important;
  background: rgba(255, 215, 0, 0.15) !important;
}

/* 5. 검증업체 메뉴 (두 번째) - 그린 강조 */
#nt_menu .me-li:nth-child(2) > a,
#nt_menu .me-li:nth-child(2) > a span,
#nt_menu .me-li:nth-child(2) > a i,
#nt_menu .me-li:nth-child(2) > a .fa {
  color: #4ade80 !important;
  font-weight: 600 !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8) !important;
}

#nt_menu .me-li:nth-child(2) > a:hover,
#nt_menu .me-li:nth-child(2) > a:hover span,
#nt_menu .me-li:nth-child(2) > a:hover i {
  color: #6ee7a7 !important;
  text-shadow: 0 0 10px rgba(74, 222, 128, 0.6) !important;
  background: rgba(74, 222, 128, 0.15) !important;
}

/* 6. 이벤트 메뉴 HOT 뱃지 색상 보정 */
#nt_menu .me-li:nth-child(4) > a::after {
  color: #ff4757 !important;
  background: transparent !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8) !important;
}

/* [Client] BetPromo Footer 통합 디자인 v1.0.0 */
/* Version: v1.0.0 (Stable) */
/* Date: 2024-12-19 */
/* Author: Web-lease_AI_Assistant */
/* [변경 이력] */
/* - v1.0.0 : Header와 완벽 조화 Footer 디자인 최초 생성 */
/* [기능 요약] */
/* 1. Header와 동일한 Deep Navy 배경으로 완벽한 통일감 */
/* 2. 골드 포인트 컬러로 BetPromo 브랜딩 강화 */
/* 3. 풀와이드 디자인으로 프리미엄 느낌 연출 */
/* 4. 나리야 테마 완전 호환 및 코어 비수정 */

/********************************************************
■ Footer 통합 색상 변수 (Header와 완전 동일)
********************************************************/
:root {
  --betpromo-footer-bg: #1a202c; /* Header와 동일 Deep Navy */
  --betpromo-footer-text: rgba(255, 255, 255, 0.9);
  --betpromo-footer-text-muted: rgba(255, 255, 255, 0.65);
  --betpromo-footer-link-hover: #ffffff;
  --betpromo-accent-gold: #ffd700; /* 브랜딩 골드 */
  --betpromo-accent-green: #4ade80; /* 포인트 그린 */
  --betpromo-border: rgba(255, 255, 255, 0.08);
}

/********************************************************
■ 1. Footer 전체 영역 통합 배경 (Header 완전 매칭)
********************************************************/

/* Footer 컨테이너 */
#nt_footer,
footer,
.nt-footer {
  background-color: var(--betpromo-footer-bg) !important;
  background-image: none !important;
  border-top: 2px solid var(--betpromo-accent-gold) !important; /* 골드 구분선 */
  color: var(--betpromo-footer-text);
  margin: 0;
  padding: 0;
  box-shadow: 0 -8px 25px rgba(0, 0, 0, 0.25);
  position: relative;
}

/* Footer 마스크 배경 완전 제거 */
#nt_footer.is-footer-mask,
.is-footer-mask,
#nt_footer.bg-light {
  background: var(--betpromo-footer-bg) !important;
  background-color: var(--betpromo-footer-bg) !important;
}

/* Footer 상단 여백 조정 */
#nt_footer {
  margin-top: 50px;
}

/* Footer 상단 그라데이션 라인 */
#nt_footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--betpromo-accent-gold) 30%,
    var(--betpromo-accent-gold) 70%,
    transparent 100%
  );
  box-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}

/********************************************************
■ 2. Footer 컨테이너 중앙 정렬 (Header와 동일)
********************************************************/

#nt_footer .nt-container {
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding-left: 20px !important;
  padding-right: 20px !important;
}

/********************************************************
■ 3. Footer 링크 네비게이션 스타일
********************************************************/

/* 링크 컨테이너 */
#nt_footer .nt-links,
#nt_footer nav {
  background-color: transparent !important;
  border-bottom: 1px solid var(--betpromo-border);
  padding: 25px 0 !important;
}

/* 링크 리스트 기본 스타일 */
#nt_footer .nt-links ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

#nt_footer .nt-links ul li {
  display: inline-block;
  margin: 0 8px;
  position: relative;
}

/* 링크 구분선 (세로바) */
#nt_footer .nt-links ul li::after {
  content: "|";
  position: absolute;
  right: -12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--betpromo-border);
  font-weight: 300;
}

#nt_footer .nt-links ul li:last-child::after {
  content: none;
}

/* 링크 기본 스타일 */
#nt_footer .nt-links a {
  color: var(--betpromo-footer-text-muted) !important;
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.3s ease;
  padding: 8px 12px;
  border-radius: 4px;
  display: inline-block;
}

/* 링크 호버 효과 */
#nt_footer .nt-links a:hover {
  color: var(--betpromo-footer-link-hover) !important;
  background: rgba(255, 255, 255, 0.1);
  text-decoration: none;
  transform: translateY(-2px);
}

/* 중요 링크 강조 (개인정보처리방침, 이용약관) */
#nt_footer .nt-links ul li:nth-child(2) a,
#nt_footer .nt-links ul li:nth-child(5) a {
  color: var(--betpromo-accent-gold) !important;
  font-weight: 600;
  border: 1px solid rgba(255, 215, 0, 0.3);
}

#nt_footer .nt-links ul li:nth-child(2) a:hover,
#nt_footer .nt-links ul li:nth-child(5) a:hover {
  background: rgba(255, 215, 0, 0.15);
  border-color: var(--betpromo-accent-gold);
}

/********************************************************
■ 4. Copyright 및 브랜딩 영역
********************************************************/

/* Copyright 컨테이너 */
#nt_footer .border-top {
  border-top: 1px solid var(--betpromo-border) !important;
  padding: 30px 0 !important;
  background: rgba(0, 0, 0, 0.15);
  text-align: center;
}

/* Copyright 텍스트 기본 */
#nt_footer .text-center p {
  color: var(--betpromo-footer-text-muted);
  font-size: 0.9rem;
  margin-bottom: 12px;
  line-height: 1.6;
}

/* BetPromo 브랜드명 강조 */
.betpromo-footer-brand {
  color: var(--betpromo-accent-gold) !important;
  font-weight: 800;
  font-size: 1.2em;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  letter-spacing: 0.5px;
}

/* 서브 텍스트 스타일 */
#nt_footer .f-sm.text-muted,
#nt_footer .text-muted {
  color: rgba(255, 255, 255, 0.5) !important;
  font-size: 0.85rem;
}

/********************************************************
■ 5. 추가 브랜딩 요소
********************************************************/

/* 면책 조항 영역 (기존 tail.php에 추가 가능) */
.footer-disclaimer {
  background: rgba(0, 0, 0, 0.2);
  padding: 20px 0;
  border-top: 1px solid var(--betpromo-border);
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.7);
  text-align: center;
}

.footer-disclaimer .fa-exclamation-triangle {
  color: #ffa500;
  margin-right: 5px;
}

/* 보안 배지 영역 */
.footer-security {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
  margin-top: 15px;
  padding-top: 15px;
  border-top: 1px solid var(--betpromo-border);
}

.security-badge {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--betpromo-border);
  border-radius: 20px;
  font-size: 0.8rem;
  color: var(--betpromo-footer-text-muted);
  transition: all 0.3s ease;
}

.security-badge:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--betpromo-accent-green);
}

.security-badge .fa {
  color: var(--betpromo-accent-green);
  margin-right: 5px;
}

/********************************************************
■ 6. 모바일 반응형 최적화
********************************************************/

/* 태블릿 */
@media (min-width: 768px) and (max-width: 991px) {
  #nt_footer .nt-container {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }

  #nt_footer .nt-links ul li {
    margin: 5px 6px;
  }

  #nt_footer .nt-links a {
    font-size: 0.85rem;
    padding: 6px 10px;
  }
}

/* 모바일 */
@media (max-width: 767px) {
  #nt_footer .nt-container {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  /* 모바일 링크 세로 정렬 */
  #nt_footer .nt-links ul {
    text-align: center;
    margin-bottom: 10px;
  }

  #nt_footer .nt-links ul li {
    display: block;
    margin: 8px 0;
  }

  /* 모바일 구분선 제거 */
  #nt_footer .nt-links ul li::after {
    content: none;
  }

  #nt_footer .nt-links ul.float-md-left,
  #nt_footer .nt-links ul.float-md-right {
    float: none !important;
    text-align: center;
  }

  /* Copyright 텍스트 크기 조정 */
  #nt_footer .text-center p {
    font-size: 0.85rem;
  }

  .betpromo-footer-brand {
    font-size: 1.1em;
  }

  /* 보안 배지 모바일 정렬 */
  .footer-security {
    flex-direction: column;
    gap: 8px;
  }

  #nt_footer {
    margin-top: 40px;
  }
}

/* 대형 화면 */
@media (min-width: 1400px) {
  #nt_footer .nt-container {
    max-width: 1320px !important;
    padding-left: 40px !important;
    padding-right: 40px !important;
  }
}

/********************************************************
■ 7. 접근성 및 성능 최적화
********************************************************/

/* 키보드 포커스 */
#nt_footer .nt-links a:focus {
  outline: 3px solid var(--betpromo-accent-gold);
  outline-offset: 2px;
}

/* 터치 디바이스 최적화 */
@media (hover: none) and (pointer: coarse) {
  #nt_footer .nt-links a {
    min-height: 44px;
    line-height: 28px;
    padding: 8px 15px;
  }
}

/* 성능 최적화 */
#nt_footer * {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/********************************************************
■ 8. Footer 진입 애니메이션 (선택사항)
********************************************************/

#nt_footer {
  animation: fadeInUp 0.8s ease-out;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}