/* base.css - Navigation bar and footer styles for base template */
/* This file contains all navbar and footer CSS extracted from style.css */

/* Google Fonts Import */
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&family=Noto+Sans+KR:wght@300;400;500;700&display=swap');

/* CSS Variables */
:root {
  --font-primary: 'Lato', 'Noto Sans KR', sans-serif; /* Lato for headings, Noto Sans KR for body */
  --font-korean: 'Noto Sans KR', sans-serif;

  --color-primary-dark: #0A2342; /* Dark Navy Blue */
  --color-primary-medium: #1F4E79; /* Medium Blue for accents, borders */
  --color-accent-gold: #B08D57;   /* Gold/Bronze */
  --color-accent-light-gold: #D4AC6E; /* Lighter Gold for hover */
  
  --color-text-light: #F8F9FA;    /* Light Gray / Off-White for dark backgrounds */
  --color-text-dark: #212529;     /* Dark Gray for light backgrounds */
  --color-text-muted: #6c757d;    /* Muted Gray */

  --color-background-light: #FFFFFF;
  --color-background-medium: #F8F9FA; /* Light Gray for sections */
  --color-background-dark: var(--color-primary-dark);

  --navbar-height: 70px; /* Adjust as needed */
  --border-radius-sm: 0.25rem;
  --border-radius-md: 0.5rem;
  --box-shadow-sm: 0 .125rem .25rem rgba(0,0,0,.075);
  --box-shadow-md: 0 .5rem 1rem rgba(0,0,0,.15);
}

/* Reset and Global Styles */
html {
  height: 100%;
  overscroll-behavior: none;
  overscroll-behavior-y: none;
  -webkit-overflow-scrolling: touch;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: var(--font-korean); /* Noto Sans KR for body */
  background-color: var(--color-background-light);
  color: var(--color-text-dark);
  line-height: 1.7; /* Increased for readability */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden; /* Prevent horizontal scrollbars from minor overflows */
  overflow-y: auto; /* 세로 스크롤은 허용 */
  overscroll-behavior: none;
  overscroll-behavior-y: none;
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* Fallback for older browsers */
  min-height: 100dvh; /* Dynamic viewport height - fixes mobile browser address bar issue */
  margin: 0;
  padding: 0;
  position: relative; /* 메가 메뉴 positioning 기준 */
}

.main-page-content {
  flex: 1 0 auto;
  padding-top: var(--navbar-height); /* Offset for fixed navbar */
  width: 100%; /* Ensure main content also tries to be full width */
}

/* Main content wrapper for base template */
.main-content {
  flex: 1 0 auto;
  padding-top: var(--navbar-height); /* Offset for fixed navbar */
  width: 100%;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-primary); /* Lato for headings */
  font-weight: 700;
  color: var(--color-primary-dark);
  margin-bottom: 1rem;
  line-height: 1.3;
}

p {
  margin-bottom: 1rem;
  font-family: var(--font-korean); /* Ensure paragraphs use Noto Sans KR */
}

a {
  color: var(--color-accent-gold);
  text-decoration: none;
  transition: color 0.2s ease-in-out, text-decoration 0.2s ease-in-out;
}

a:hover {
  color: var(--color-accent-light-gold);
  text-decoration: underline;
}

.container, .container-fluid {
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 2rem;
    padding-bottom: 9rem;
}

/* iPad and tablet container optimization */
@media (max-width: 1024px) and (min-width: 768px) {
  /* Force full width on iPad */
  html, body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }
  
  .container, .container-fluid {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  
  .main-content {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  
  .main-page-content {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  
  /* Override Bootstrap's container-fluid max-width */
  .container-fluid {
    max-width: none !important;
    width: 100% !important;
  }
}

/* Smaller tablets (768px-900px) */
@media (max-width: 900px) and (min-width: 768px) {
  /* Force full width on smaller tablets */
  html, body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }
  
  .container, .container-fluid {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  
  .main-content, .main-page-content {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  
  .container-fluid {
    max-width: none !important;
    width: 100% !important;
  }
}

/* ===== NAVIGATION BAR STYLES ===== */
.navbar { /* Bootstrap class .navbar-dark .bg-dark is on the HTML element */
  background-color: var(--color-primary-dark) !important; /* Override Bootstrap's bg-dark */
  height: var(--navbar-height) !important;
  display: flex !important;
  align-items: center !important;
  padding: 0.5rem 1rem !important;
  margin: 0 !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1) !important;
  position: fixed !important; /* 고정 위치 */
  top: 0 !important; /* 상단에 고정 */
  left: 0 !important;
  right: 0 !important;
  z-index: 1030 !important; /* 다른 요소 위에 표시 */
  width: 100% !important;
  transition: all 0.3s ease !important; /* 부드러운 전환 효과 */
  overflow: visible !important; /* 메가 메뉴가 잘리지 않도록 */
}

/* 투명 네비게이션 바 상태 */
.navbar.navbar-transparent {
  background-color: transparent !important;
  box-shadow: none !important;
  backdrop-filter: blur(10px) !important; /* 블러 효과로 가독성 향상 */
}

.navbar.navbar-transparent .navbar-brand,
.navbar.navbar-transparent .nav-link,
.navbar.navbar-transparent .dropdown-toggle {
  color: #ffffff !important;
}

.navbar.navbar-transparent .navbar-brand:hover,
.navbar.navbar-transparent .nav-link:hover {
  color: var(--color-accent-gold) !important;
}

.navbar .container-fluid {
  display: flex !important;
  align-items: center !important;
  height: 100% !important;
  padding: 0 1rem !important;
  position: relative !important;
  justify-content: space-between !important; /* 로고와 햄버거 버튼 사이 간격 */
  width: 100% !important;
  overflow: visible !important; /* 메가 메뉴가 잘리지 않도록 */
}

.navbar .navbar-brand {
  display: flex !important;
  align-items: center !important;
  height: auto !important;
  padding: 0 !important;
  transition: all 0.3s ease !important;
  flex-shrink: 0 !important;
  text-decoration: none !important;
  margin-left: 0.5rem !important; /* 로고 왼쪽 마진 */
  margin-right: 0 !important; /* 로고 오른쪽 마진 제거 */
}

.navbar .navbar-brand:hover {
  transform: scale(1.05) !important;
  text-decoration: none !important;
}

.navbar .navbar-brand img.logo-img {
  height: 2.5rem !important;
  filter: brightness(0) invert(1) !important;
  transition: all 0.3s ease !important;
}

.navbar .navbar-brand .brand-text {
  font-family: var(--font-primary) !important;
  font-size: 1.4rem !important;
  font-weight: 700 !important;
  color: var(--color-text-light) !important;
  text-decoration: none !important;
  letter-spacing: -0.5px !important;
  background: linear-gradient(135deg, #ffffff, var(--color-accent-gold)) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  margin-left: 0.5rem !important;
}

/* Ensure no lines/underlines on the logo link */
.navbar .navbar-brand,
.navbar .navbar-brand:hover,
.navbar .navbar-brand:focus {
    text-decoration: none !important;
    border: none !important;
    border-bottom: none !important; /* Explicitly remove bottom border */
    box-shadow: none !important;
    /* display: inline-block; was conflicting with flex display, removed */
}

/* 프로필 드롭다운 오른쪽 정렬 */
.navbar .d-flex {
  flex-shrink: 0 !important; /* 프로필 영역이 줄어들지 않도록 */
  margin-left: auto !important; /* 오른쪽으로 밀어내기 */
}

.navbar .d-flex .dropdown > a.dropdown-toggle,
.navbar .d-flex .dropdown > a.dropdown-toggle:hover,
.navbar .d-flex .dropdown > a.dropdown-toggle:focus {
    text-decoration: none !important;
    border: none !important;
    border-bottom: none !important; /* Explicitly remove bottom border */
    box-shadow: none !important;
    outline: none !important; /* Remove outline too, just in case */
}

.navbar .d-flex .dropdown > a.dropdown-toggle::after {
    border: none !important; /* Remove any borders from the caret itself */
    border-top: 0.3em solid transparent !important; /* Re-style caret if borders are removed, or adjust as needed */
    border-right: 0.3em solid transparent !important;
    border-bottom: 0 !important;
    border-left: 0.3em solid transparent !important;
    box-shadow: none !important; /* Just in case */
    /* If the default Bootstrap caret is made of borders, this might make it disappear or look odd. */
    /* We might need to reconstruct it if this is the case, or target the line more specifically. */
    /* For now, the priority is to remove the unwanted line. */
}

/* 드롭다운 토글 캐럿 제거 */
.navbar .nav-item.dropdown .nav-link.dropdown-toggle::after {
    display: none !important;
}

.navbar-nav {
  display: flex !important;
  align-items: center !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: 4rem !important;
  flex: 1 !important;
  justify-content: center !important;
}

.navbar .nav-link {
  font-family: var(--font-primary) !important;
  color: var(--color-text-light) !important;
  font-weight: 500 !important;
  font-size: 0.95rem !important;
  padding: 0.75rem 2rem !important; /* 호버 영역 더 확대 */
  margin: 0 !important;
  border-radius: var(--border-radius-sm) !important;
  transition: all 0.3s ease !important;
  position: relative !important;
  height: auto !important;
  display: flex !important;
  align-items: center !important;
  line-height: 1.4 !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  z-index: 10 !important; /* z-index 증가 */
  pointer-events: auto !important; /* 마우스 이벤트 확실히 활성화 */
}

.navbar .nav-link:hover,
.navbar .nav-link:focus,
.navbar .nav-item.dropdown:hover > .nav-link,
.navbar .nav-item.dropdown.show > .nav-link { /* 드롭다운이 열려있을 때도 금색 유지 */
  color: #C89b4b !important;
  background: transparent !important;
  text-decoration: none !important;
  transform: none !important;
  box-shadow: none !important;
  border-bottom: none !important;
  border-radius: 0 !important;
  position: relative !important;
}

.navbar .nav-link:hover::after,
.navbar .nav-link:focus::after,
.navbar .nav-item.dropdown:hover > .nav-link::after,
.navbar .nav-item.dropdown.show > .nav-link::after { /* 드롭다운이 열려있을 때도 밑줄 유지 */
  content: '' !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 50% !important;
  width: 60% !important;
  height: 2px !important;
  background: #C89b4b !important;
  transform: translateX(-50%) !important;
  border-radius: 0 !important;
}

/* Guard: when dropdown parent is hovered but its link itself is not hovered,
   do NOT apply background to avoid affecting neighbors (e.g., 커뮤니티) */
.navbar .nav-item.dropdown:hover:not(.show) > .nav-link:not(:hover) {
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
  color: var(--color-text-light) !important;
}

/* Active page indication */
.navbar .nav-link.active {
  color: var(--color-accent-gold) !important;
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.2), rgba(255, 215, 0, 0.1)) !important;
  border-bottom: 2px solid var(--color-accent-gold) !important;
  font-weight: 600 !important;
}

/* Animated underline effect - removed */

.navbar .dropdown-menu {
  background-color: var(--color-primary-dark) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: var(--border-radius-sm) !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2) !important;
  margin-top: 0 !important; /* 간격 제거 */
  min-width: 200px !important;
  max-width: 250px !important;
  padding: 0.5rem 0 !important;
  position: absolute !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
}

/* ============================================
   메가 메뉴 스타일 (Mega Menu)
   ============================================ */

/* 메가 메뉴 컨테이너 */
.navbar .mega-menu {
  position: static !important;
}

.navbar .mega-menu .mega-menu-content {
  position: fixed !important; /* fixed로 변경하여 viewport 기준으로 위치 */
  left: 0 !important;
  right: 0 !important;
  width: 100vw !important;
  max-width: 100vw !important;
  min-width: 100vw !important;
  padding: 2rem 0 !important;
  margin-top: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  top: var(--navbar-height) !important; /* 네비게이션 바 높이만큼 아래 */
  background-color: var(--color-primary-dark) !important;
  border: none !important;
  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 0 !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3) !important;
  transform: none !important;
  z-index: 1029 !important;
  pointer-events: auto !important; /* 마우스 이벤트 활성화 */
  overflow: visible !important;
}

/* 메가 메뉴가 열릴 때 네비게이션 바와 메뉴 사이 간격 제거를 위한 보이지 않는 브릿지 */
.navbar-nav .mega-menu .mega-menu-content::before {
  content: '' !important;
  position: absolute !important;
  bottom: 100% !important;
  left: 0 !important;
  right: 0 !important;
  height: 30px !important; /* 더 큰 브릿지 */
  background: transparent !important;
  pointer-events: auto !important;
  z-index: 1030 !important;
}

/* 메가 메뉴 내부 컨테이너 */
.mega-menu-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 4rem;
  display: flex;
  gap: 4rem;
  justify-content: center;
  align-items: flex-start;
  overflow: visible !important;
  width: 100%;
}

/* 메가 메뉴 섹션 */
.mega-menu-section {
  flex: 0 0 50%;
  min-width: 0;
  max-width: 50%;
  width: 50%;
  box-sizing: border-box;
}

/* 메가 메뉴 제목 */
.mega-menu-title {
  font-family: var(--font-primary) !important;
  font-size: 0.9rem !important;
  font-weight: 600 !important;
  color: var(--color-accent-gold) !important;
  margin-bottom: 1rem !important;
  padding-bottom: 0.5rem !important;
  border-bottom: 2px solid rgba(200, 155, 75, 0.3) !important;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* 메가 메뉴 그리드 */
.mega-menu-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  width: 100%;
  justify-items: center;
  box-sizing: border-box;
}

/* 데스크톱에서 더 넓은 그리드 */
@media (min-width: 1200px) {
  .mega-menu-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* 메가 메뉴 아이템 */
.mega-menu-item {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.75rem !important;
  padding: 0.875rem 1rem !important;
  color: var(--color-text-light) !important;
  font-family: var(--font-korean) !important;
  font-size: 0.95rem !important;
  text-decoration: none !important;
  border-radius: var(--border-radius-sm) !important;
  transition: all 0.3s ease !important;
  background-color: transparent !important;
  border: none !important;
  position: relative !important;
  overflow: visible !important;
}

/* 배경 효과 제거 - 깔끔한 텍스트만 표시 */

.mega-menu-item:hover {
  background-color: transparent !important;
  color: var(--color-accent-gold) !important;
  transform: translateX(4px) !important;
  border: none !important;
  box-shadow: none !important;
}

/* 메가 메뉴 아이콘 */
.mega-menu-icon {
  font-size: 1.1rem !important;
  color: var(--color-accent-gold) !important;
  width: 20px;
  text-align: center;
  flex-shrink: 0;
  transition: all 0.3s ease;
  z-index: 1;
  position: relative;
}

.mega-menu-item:hover .mega-menu-icon {
  transform: scale(1.15);
  color: var(--color-accent-light-gold) !important;
}

/* 메가 메뉴 텍스트 */
.mega-menu-text {
  flex: 1;
  z-index: 1;
  position: relative;
  line-height: 1.4;
}

/* 메가 메뉴 호버 애니메이션 - 더 빠르게 */
.navbar-nav .mega-menu:hover .mega-menu-content,
.navbar-nav .mega-menu.show .mega-menu-content,
.navbar-nav .mega-menu .mega-menu-content.show {
  display: block !important;
  animation: megaMenuFadeIn 0.15s ease-out;
  opacity: 1;
  transform: translateY(0);
}

.navbar-nav .mega-menu .mega-menu-content {
  display: none;
  transition: opacity 0.1s ease-out, transform 0.1s ease-out;
  opacity: 0;
  transform: translateY(-5px);
  pointer-events: none;
}

.navbar-nav .mega-menu.show .mega-menu-content,
.navbar-nav .mega-menu:hover .mega-menu-content {
  display: block !important;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.navbar-nav .mega-menu .mega-menu-content:hover {
  display: block !important;
}

/* 메가 메뉴가 열려있을 때 항상 표시 */
.navbar-nav .mega-menu.show .mega-menu-content {
  display: block !important;
}

/* 메가 메뉴 페이드인 애니메이션 - 더 빠르게 */
@keyframes megaMenuFadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 메가 메뉴 호버 영역 확장 - 네비게이션 바와 메뉴 사이 간격 제거 */
.navbar-nav .mega-menu::before {
  content: '' !important;
  position: absolute !important;
  top: 100% !important;
  left: -50vw !important;
  right: -50vw !important;
  height: 80px !important; /* 간격을 더 크게 확장 */
  background: transparent !important;
  z-index: 1028 !important;
  pointer-events: auto !important; /* 마우스 이벤트 활성화 */
}

/* 메가 메뉴가 열려있을 때 호버 영역도 활성화 */
.navbar-nav .mega-menu.show::before {
  display: block !important;
}

/* 메가 메뉴가 열릴 때 네비게이션 바 아래 공간 확보 */
.navbar-nav .mega-menu:hover .mega-menu-content,
.navbar-nav .mega-menu .mega-menu-content:hover,
.navbar-nav .mega-menu:hover::before {
  display: block !important;
}

/* 메가 메뉴 컨테이너에도 호버 이벤트 활성화 */
.navbar-nav .mega-menu .mega-menu-content {
  pointer-events: auto !important;
}

/* 메가 메뉴가 열려있을 때 호버 영역도 활성화 */
.navbar-nav .mega-menu.show .mega-menu-content,
.navbar-nav .mega-menu.show::before {
  display: block !important;
}

/* 프로필 드롭다운은 오른쪽 정렬 유지 */
.navbar .d-flex .dropdown .dropdown-menu {
  left: auto !important;
  right: 0 !important;
  transform: none !important;
}

.navbar .dropdown-item {
  color: var(--color-text-light) !important;
  font-family: var(--font-korean) !important;
  padding: 0.5rem 1rem !important;
  text-align: center !important;
}

.navbar .dropdown-item:hover,
.navbar .dropdown-item:focus {
  background-color: var(--color-background-medium) !important;
  color: var(--color-text-dark) !important;
}

.navbar-nav .dropdown {
  position: relative !important;
  overflow: visible !important; /* 메가 메뉴가 잘리지 않도록 */
}

.navbar-nav {
  overflow: visible !important; /* 메가 메뉴가 잘리지 않도록 */
}

.navbar-nav .nav-item {
  position: relative !important;
  z-index: 10 !important; /* z-index 증가 */
  padding: 0.5rem 0 !important; /* 상하 패딩 더 추가로 호버 영역 확대 */
  margin: 0 -0.5rem !important; /* 좌우 마진으로 호버 영역 확대 */
}

.navbar-nav .nav-item.dropdown {
  z-index: 11 !important; /* 드롭다운은 더 높은 z-index */
}

/* 일반 링크(드롭다운이 아닌 항목) 호버 영역 확대 */
.navbar-nav .nav-item:not(.dropdown) .nav-link {
  padding: 0.75rem 2rem !important; /* 호버 영역 더 확대 */
  cursor: pointer !important;
  z-index: 10 !important;
  pointer-events: auto !important;
}

/* nav-item 자체에도 호버 영역 확대 */
.navbar-nav .nav-item::before {
  content: '' !important;
  position: absolute !important;
  top: -8px !important;
  bottom: -8px !important;
  left: -15px !important;
  right: -15px !important;
  z-index: -1 !important;
  pointer-events: auto !important;
  background: transparent !important;
}

/* nav-link의 호버 영역을 더 확실하게 */
.navbar .nav-link::before {
  content: '' !important;
  position: absolute !important;
  top: -5px !important;
  bottom: -5px !important;
  left: -10px !important;
  right: -10px !important;
  z-index: -1 !important;
  pointer-events: auto !important;
  background: transparent !important;
}

/* 드롭다운 호버 영역 확장 */
.navbar-nav .dropdown::before {
  content: '' !important;
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  right: 0 !important;
  height: 10px !important; /* 보이지 않는 호버 영역 */
  background: transparent !important;
  z-index: 999 !important;
  pointer-events: none !important; /* don't capture hover to adjacent items */
}

/* 일반 드롭다운 (메가 메뉴가 아닌 경우) */
.navbar-nav .dropdown:not(.mega-menu):hover .dropdown-menu {
  display: block;
  animation: fadeIn 0.2s ease-in;
}

.navbar-nav .dropdown:not(.mega-menu) .dropdown-menu {
  display: none;
  transition: all 0.2s ease;
}

.navbar-nav .dropdown:not(.mega-menu) .dropdown-menu:hover {
  display: block;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Dropdown item styling */
.navbar .dropdown-item {
  color: var(--color-text-light) !important;
  font-family: var(--font-korean);
  padding: 0.5rem 1rem;
  transition: all 0.2s ease;
}

.navbar .dropdown-item:hover,
.navbar .dropdown-item:focus {
  background-color: rgba(255, 255, 255, 0.1);
  color: var(--color-accent-gold) !important;
  text-decoration: none !important; /* 밑줄 제거 */
}

.navbar .dropdown-item:hover {
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.1), rgba(255, 215, 0, 0.05));
  backdrop-filter: blur(5px);
  transform: translateX(5px);
}

.navbar .dropdown-item:hover::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--color-accent-gold);
  border-radius: 0 2px 2px 0;
}

.navbar .navbar-toggler {
  border-color: rgba(255,255,255,0.25);
  z-index: 1033 !important; /* 햄버거 버튼이 최상위에 표시되도록 */
  position: relative !important;
  margin-right: 0.5rem !important; /* 햄버거 버튼 오른쪽 마진 */
  margin-left: auto !important; /* 햄버거 버튼을 오른쪽으로 밀기 */
}
.navbar-collapse {
  z-index: 1031 !important; /* Ensure it's above other content, Bootstrap's fixed-top is 1030 */
  padding: 0;
  position: relative !important;
  overflow: visible !important; /* 메가 메뉴가 잘리지 않도록 */
}

.navbar .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28248, 249, 250, 0.9%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* User profile/login icon in navbar */
/* Anonymous profile icon (font-awesome) size increase */
.navbar .d-flex .dropdown #loginDropdown i.fa-user-circle {
  font-size: 1.9rem !important; /* ~30px on desktop */
  line-height: 1 !important;
}

/* Profile icon when no profile picture */
.navbar .d-flex .dropdown #profileDropdown i.fa-user-circle {
  font-size: 2rem !important; /* ~32px to match image size */
  line-height: 1 !important;
  color: var(--color-text-light) !important;
}

/* iPad and tablet specific styles - Force hamburger menu */
@media (max-width: 1024px) and (min-width: 768px) {
  /* Force navbar to use hamburger menu on iPad */
  .navbar .navbar-collapse {
    display: none !important;
  }
  
  .navbar .navbar-collapse.show {
    display: block !important;
    background-color: var(--color-primary-dark) !important;
    padding: 1rem 0 !important;
    margin-top: 0.5rem !important;
    border-radius: var(--border-radius-sm) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2) !important;
    z-index: 1032 !important;
    position: relative !important;
  }
  
  .navbar .container-fluid {
    padding: 0 1rem !important;
    max-width: 100% !important;
    width: 100% !important;
    justify-content: space-between !important;
  }
  
  .navbar .navbar-brand {
    margin-left: 0.25rem !important;
    flex-shrink: 0 !important;
  }
  
  .navbar .d-flex {
    margin-left: 0.5rem !important;
    flex-shrink: 0 !important;
    gap: 0.5rem !important;
  }
  
  .navbar-toggler {
    display: block !important;
    border: none !important;
    padding: 0.5rem !important;
    min-width: 44px !important;
    min-height: 44px !important;
    margin-right: 0.5rem !important;
    margin-left: auto !important;
  }
  
  .navbar-nav {
    align-items: center !important;
    width: 100% !important;
    margin: 0 !important;
    gap: 0 !important;
    position: static !important;
    left: auto !important;
    transform: none !important;
    flex: none !important;
    justify-content: center !important;
    flex-direction: column !important;
  }
  
  .navbar .nav-item {
    width: 100% !important;
    text-align: center !important;
    margin: 0.25rem 0 !important;
  }
  
  .navbar .nav-item .nav-link {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    padding: 0.75rem 1rem !important;
    margin: 0 !important;
    font-size: 1rem !important;
    border-radius: var(--border-radius-sm) !important;
    transition: all 0.3s ease !important;
  }
  
  .navbar .btn-login,
  .navbar .btn-signup {
    width: 80% !important;
    margin: 0.25rem auto !important;
    padding: 0.75rem 1rem !important;
    font-size: 1rem !important;
    border-radius: 24px !important;
  }
  
  .language-switcher .btn {
    padding: 0.75rem 1.5rem !important;
    font-size: 1rem !important;
    width: 80% !important;
    margin: 0.25rem auto !important;
    justify-content: center !important;
    border-radius: 24px !important;
  }
}

/* Smaller tablets (768px-900px) - Also force hamburger menu */
@media (max-width: 900px) and (min-width: 768px) {
  .navbar .navbar-collapse {
    display: none !important;
  }
  
  .navbar .navbar-collapse.show {
    display: block !important;
  }
  
  .navbar-toggler {
    display: block !important;
  }
}

@media (max-width: 1199.98px) { /* Bootstrap xl breakpoint - 아이패드 포함 */
  /* 가로 스크롤 방지 */
  body,
  html {
    overflow-x: hidden !important;
    max-width: 100vw !important;
    width: 100% !important;
  }
  
  /* 모든 페이지에서 강제 적용 */
  body .navbar-collapse,
  html body .navbar-collapse {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    flex: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
  }
  
  /* Hide hamburger menu on mobile and tablet */
  body .navbar-toggler,
  html body .navbar-toggler {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    flex: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
  }
  
  /* Hide desktop navigation items on mobile and tablet */
  body .navbar-nav,
  html body .navbar-nav {
    display: none !important;
    visibility: hidden !important;
  }
  
  /* Hide user profile section in top nav on mobile and tablet */
  body .navbar .d-flex.align-items-center,
  html body .navbar .d-flex.align-items-center {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    flex: none !important;
    visibility: hidden !important;
  }
  
  /* 모바일에서 네비게이션 바 간소화 - 로고 왼쪽, 언어 전환 오른쪽 */
  body .navbar,
  html body .navbar {
    height: 65px !important;
    min-height: 65px !important;
    max-height: 65px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
    left: 0 !important;
    right: 0 !important;
  }
  
  body .navbar .container-fluid,
  html body .navbar .container-fluid {
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    justify-content: space-between !important;
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    position: relative !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }
  
  /* 모바일에서 로고 왼쪽 정렬 - 적절한 패딩 */
  body .navbar .navbar-brand,
  html body .navbar .navbar-brand {
    margin-left: 0 !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important;
    position: static !important;
    transform: none !important;
    flex-shrink: 0 !important;
    order: 1 !important;
  }
  
  /* 모바일 언어 전환 버튼 오른쪽 고정 - flexbox로 배치 */
  body .mobile-lang-switcher,
  html body .mobile-lang-switcher,
  body .navbar .language-switcher.mobile-lang-switcher,
  html body .navbar .language-switcher.mobile-lang-switcher {
    position: static !important;
    margin-left: auto !important;
    margin-right: 0 !important;
    flex-shrink: 0 !important;
    order: 2 !important;
    display: flex !important;
    align-items: center !important;
    width: auto !important;
    max-width: none !important;
    padding: 0 !important;
  }
  
  body .mobile-lang-switcher .btn,
  html body .mobile-lang-switcher .btn {
    margin: 0 !important;
    padding-left: 0.4rem !important;
    padding-right: 0.5rem !important;
    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important;
    border-radius: 24px 0 0 24px !important;
    font-size: 0.7rem !important;
    min-width: auto !important;
    max-width: 85px !important;
    width: auto !important;
    white-space: nowrap !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.15rem !important;
    min-height: 32px !important;
    height: 32px !important;
    box-sizing: border-box !important;
  }
  
  .mobile-lang-switcher .btn i {
    font-size: 0.75rem !important;
    flex-shrink: 0 !important;
  }
  
  .mobile-lang-switcher #langTextMobile {
    font-size: 0.7rem !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
  }
  
  /* 모바일에서 로고 크기 조정 */
  .navbar-brand .logo-img {
    height: 30px !important;
  }
  
  /* 모바일에서 main-content padding-top 조정 - 모든 페이지 강제 적용 */
  body .main-content,
  html body .main-content {
    padding-top: 65px !important;
  }

  .navbar-nav {
    align-items: center !important;
    width: 100% !important;
    margin: 0 !important;
    gap: 0 !important;
    position: static !important;
    left: auto !important;
    transform: none !important;
    flex: none !important;
    justify-content: center !important;
  }

  .navbar .nav-item {
    width: 100% !important;
    text-align: center !important;
    margin: 0.25rem 0 !important;
  }

  .navbar .nav-item .nav-link {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    padding: 0.75rem 1rem !important;
    margin: 0 !important;
    font-size: 1rem !important;
    border-radius: var(--border-radius-sm) !important;
    transition: all 0.3s ease !important;
  }

  .navbar .nav-item .nav-link:hover {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.08)) !important;
    transform: scale(1.02) !important;
  }

  /* 모바일에서 로그인/회원가입 버튼 스타일 */
  .navbar .btn-login,
  .navbar .btn-signup {
    width: 80% !important;
    margin: 0.25rem auto !important;
    padding: 0.75rem 1rem !important;
    font-size: 1rem !important;
    border-radius: 24px !important;
  }

  /* Mobile navbar improvements */
  .navbar {
    padding: 0.5rem 1rem;
  }

  /* Navbar collapsed menu - mobile */
  .navbar-collapse {
    background-color: var(--color-primary-dark);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    margin-top: 0.5rem;
    padding: 1rem 0;
    border-radius: var(--border-radius-sm);
    text-align: center;
  }

  .navbar-nav {
    text-align: center;
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center !important;
  }

  .navbar-nav .nav-link {
    padding: 0.75rem 1rem;
    font-size: 1rem;
    min-height: 44px;
    display: block;
    color: var(--color-text-light) !important;
    text-align: center;
    width: 100%;
    margin: 0 auto;
  }

  .navbar-toggler {
    border: none;
    padding: 0.5rem;
    min-width: 44px;
    min-height: 44px;
    margin-right: 0.5rem !important; /* 모바일에서 햄버거 버튼 오른쪽 마진 */
    margin-left: auto !important; /* 모바일에서 햄버거 버튼을 오른쪽으로 밀기 */
  }

  .navbar-brand .logo-img {
    height: 35px;
  }
  
  /* 모바일에서 프로필 아이콘 크기 조정 */
  .navbar .d-flex .dropdown #profileDropdown i.fa-user-circle {
    font-size: 1.8rem !important; /* 모바일에서 적절한 크기 */
  }

  /* Mobile dropdown behavior - disable hover but keep click */
  .navbar-nav .dropdown:hover .dropdown-menu {
    display: none;
  }

  /* Enable Bootstrap dropdown click functionality */
  .navbar-nav .dropdown-menu.show {
    display: block !important;
  }

  /* 모바일 메가 메뉴 스타일 - 일반 드롭다운처럼 표시 */
  .navbar .mega-menu .mega-menu-content {
    position: static !important;
    width: 90% !important;
    max-width: none !important;
    margin: 0.5rem auto !important;
    padding: 1rem 0 !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: var(--border-radius-sm) !important;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1) !important;
    background-color: rgba(255, 255, 255, 0.05) !important;
  }

  .mega-menu-container {
    max-width: 100% !important;
    padding: 0 1rem !important;
    flex-direction: column !important;
    gap: 1.5rem !important;
  }

  .mega-menu-grid {
    grid-template-columns: 1fr !important;
    gap: 0.5rem !important;
  }

  .mega-menu-item {
    padding: 0.75rem 1rem !important;
    font-size: 0.9rem !important;
  }

  .mega-menu-title {
    font-size: 0.85rem !important;
    margin-bottom: 0.75rem !important;
  }

  /* Mobile dropdown  /* 모바일 드롭다운 메뉴 개선 */
  .navbar .nav-item.dropdown .dropdown-menu {
    position: static !important;
    float: none !important;
    width: 90% !important;
    margin: 0.5rem auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: var(--border-radius-sm) !important;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1) !important;
    background-color: rgba(255, 255, 255, 0.05) !important;
    text-align: center !important;
  }

  .navbar .nav-item.dropdown .dropdown-menu .dropdown-item {
    text-align: center !important;
    padding: 0.75rem 1rem !important;
    color: var(--color-text-light) !important;
    font-size: 1rem !important;
    border-radius: var(--border-radius-sm) !important;
    margin: 0.25rem !important;
    transition: all 0.3s ease !important;
  }
  
  .navbar .nav-item.dropdown .dropdown-menu .dropdown-item:hover {
    background-color: var(--color-accent-gold) !important;
    color: var(--color-primary-dark) !important;
    transform: scale(1.02) !important;
  }

  .navbar-nav .dropdown-item {
    padding: 0.75rem 1.5rem !important;
    min-height: 44px !important;
    display: block !important;
    color: var(--color-text-light) !important;
    background-color: transparent !important;
    border: none !important;
    text-align: center !important;
    width: 100% !important;
    font-family: var(--font-korean) !important;
    margin: 0 auto !important;
  }

  .navbar-nav .dropdown-item:hover,
  .navbar-nav .dropdown-item:focus {
    background-color: rgba(255, 255, 255, 0.05) !important;
    color: var(--color-accent-gold) !important;
  }

  .navbar-nav .dropdown-item:focus {
    background-color: rgba(255, 255, 255, 0.05) !important;
    color: var(--color-accent-gold) !important;
  }

  /* Profile section alignment - 모바일 프로필 섹션 개선 */
  .navbar .d-flex.align-items-center {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 1rem 0 !important;
    border-top: 2px solid rgba(255, 255, 255, 0.1) !important;
    flex-direction: column !important;
    gap: 1rem !important;
    margin-left: 0 !important; /* 모바일에서는 margin-left 제거 */
  }

  /* 모바일에서 언어 전환 버튼 스타일 */
  .navbar .language-switcher {
    margin-right: 0 !important;
    margin-bottom: 0.5rem !important;
    width: 100% !important;
  }

  .navbar .language-switcher .btn {
    padding: 0.75rem 1.5rem !important;
    font-size: 1rem !important;
    width: 80% !important;
    margin: 0.25rem auto !important;
    justify-content: center !important;
    border-radius: 24px !important;
    background: #ffffff !important;
    box-shadow: inset 0 2px 4px rgba(85, 170, 255, 0.3) !important;
    backdrop-filter: blur(24px) !important;
  }

  .navbar .d-flex.align-items-center .dropdown {
    text-align: center !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    position: relative !important; /* anchor for absolute dropdown */
  }

  .navbar .d-flex .dropdown > a.dropdown-toggle {
    padding: 0.75rem 1.5rem !important;
    border-radius: var(--border-radius-sm) !important;
    background: transparent !important; /* 배경 제거 */
    transition: all 0.3s ease !important;
  }

  .navbar .d-flex .dropdown > a.dropdown-toggle:hover {
    background: rgba(255, 255, 255, 0.05) !important; /* 호버시에만 약간의 배경 */
    transform: scale(1.05) !important;
  }

  .navbar .d-flex .dropdown {
    margin: 0 auto !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: auto !important;
  }

  .navbar .d-flex .dropdown > a.dropdown-toggle {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
  }

  /* Larger profile image for mobile */
  .navbar .d-flex .dropdown img.rounded-circle {
    width: 48px !important;
    height: 48px !important;
    border: 2px solid var(--color-accent-gold);
  }

  .navbar .d-flex .dropdown .dropdown-menu {
    position: absolute !important; /* place under toggle */
    top: auto !important;
    bottom: 100% !important;
    right: 0 !important;
    left: auto !important;
    transform: none !important;
    margin-bottom: 0.5rem !important;
    min-width: 180px !important;
    max-width: 250px !important;
    max-height: 300px !important;
    overflow-y: auto !important;
    background-color: var(--color-primary-dark) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: var(--border-radius-sm) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2) !important;
    z-index: 1050 !important;
  }

  .navbar .d-flex .btn {
    width: 80%;
    margin: 0.25rem auto 0.5rem auto;
    min-height: 44px;
  }

  .navbar .d-flex .btn:last-child {
    margin-bottom: 0;
  }
}

/* Small mobile devices */
@media (max-width: 480px) {
  .navbar {
    padding: 0.25rem 0.5rem;
  }

  .navbar-brand .logo-img {
    height: 30px;
  }
  
  /* 소형 모바일에서 프로필 아이콘 크기 조정 */
  .navbar .d-flex .dropdown #profileDropdown i.fa-user-circle {
    font-size: 1.6rem !important; /* 소형 모바일에서 적절한 크기 */
  }
  
  /* 소형 모바일에서 로고 패딩 더욱 축소 */
  .navbar .navbar-brand {
    margin-left: 0.25rem !important; /* 로고 왼쪽 마진 더 축소 */
    margin-right: 0 !important; /* 로고 오른쪽 마진 제거 */
    padding: 0.125rem 0 !important; /* 로고 상하 패딩 최소화 */
  }

  .navbar-nav .nav-link {
    font-size: 0.9rem;
    padding: 0.75rem 1rem;
    min-height: 44px;
  }

  .navbar-nav .dropdown-item {
    padding: 0.75rem 1.5rem !important;
    font-size: 0.9rem;
  }

  /* Ensure profile dropdown doesn't get cut off on small screens */
  .navbar .d-flex .dropdown .dropdown-menu {
    bottom: 100% !important;
    top: auto !important;
    margin-bottom: 0.5rem !important;
    max-height: 250px !important; /* Reduced height for small screens */
  }

  .navbar-toggler {
    padding: 0.25rem 0.5rem;
    margin-right: 0.25rem !important; /* 소형 모바일에서 햄버거 버튼 오른쪽 마진 */
    margin-left: auto !important; /* 소형 모바일에서 햄버거 버튼을 오른쪽으로 밀기 */
  }

  .footer-custom {
    padding: 1.5rem 0.5rem;
  }

  .footer-custom h5 {
    font-size: 1.1rem;
  }

  .footer-custom .small {
    font-size: 0.8rem;
  }

  .footer-custom .social-icons {
    justify-content: center;
    gap: 0.5rem;
  }
}

/* Extra small mobile devices */
@media (max-width: 360px) {
  .navbar .d-flex .dropdown .dropdown-menu {
    bottom: 100% !important;
    top: auto !important;
    margin-bottom: 0.5rem !important;
    max-height: 200px !important; /* Further reduced height for very small screens */
    min-width: 160px !important; /* Reduced width for very small screens */
    right: 0 !important;
    left: auto !important;
  }
}

/* Mobile Footer - 768px 이하 */
@media (max-width: 768px) {
  .footer-custom .container .row {
    display: flex !important;
    flex-wrap: wrap !important;
    margin: 0 !important;
  }
  
  /* 모든 컬럼을 50% 너비로 설정 */
  .footer-custom .container .row > div {
    flex: 0 0 50% !important;
    max-width: 50% !important;
    width: 50% !important;
    margin-bottom: 1.5rem !important;
    padding: 0 0.25rem !important;
    text-align: center !important;
  }
  
  /* 브랜드 섹션 (첫 번째 div)은 전체 너비 */
  .footer-custom .container .row > div:first-child {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
  }
  
  /* 뉴스레터 섹션 (마지막 div)은 전체 너비 */
  .footer-custom .container .row > div:last-child {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
  }
}

.footer-custom .row > div {
  position: relative;
}

/* 강력한 모바일 푸터 오버라이드 */
@media (max-width: 768px) {
  .footer-custom .container .row {
    display: flex !important;
    flex-wrap: wrap !important;
    margin: 0 !important;
    width: 100% !important;
  }
  
  .footer-custom .container .row > div {
    flex: 0 0 50% !important;
    max-width: 50% !important;
    width: 50% !important;
    margin-bottom: 1.5rem !important;
    padding: 0 0.25rem !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }
  
  /* 브랜드 섹션 (col-md-3) 전체 너비 */
  .footer-custom .container .row > div.col-md-3 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
  }
  
  /* 뉴스레터 섹션 (마지막 col-md-2) 전체 너비 */
  .footer-custom .container .row > div.col-md-2:last-child {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
  }
  
  /* Product, Company, Support, Contact 섹션들을 50% 너비로 */
  .footer-custom .container .row > div.col-md-2:not(:last-child),
  .footer-custom .container .row > div.col-md-1 {
    flex: 0 0 50% !important;
    max-width: 50% !important;
    width: 50% !important;
  }
}

/* Footer Brand */
.footer-brand {
  color: #ffffff !important;
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  margin-bottom: 0.5rem !important;
  font-family: var(--font-primary) !important;
  text-align: left !important;
}

.footer-tagline {
  color: #ffffff !important;
  font-size: 1rem !important;
  margin-bottom: 0 !important;
  opacity: 0.9 !important;
  white-space: normal !important;
  line-height: 1.4 !important;
  text-align: left !important;
}

/* Footer Section Titles */
.footer-custom .footer-section-title {
  color: #c89b4b !important;
  font-weight: 600 !important;
  margin-bottom: 1rem !important;
  font-size: 1rem !important;
  font-family: var(--font-primary) !important;
  white-space: normal !important;
  text-align: left !important;
}

/* 강제로 색상 적용 */
.footer-custom h5.footer-section-title,
footer .footer-section-title,
.footer-custom .col-md-2 h5,
.footer-custom .col-md-1 h5 {
  color: #c89b4b !important;
}

/* Product 섹션과 로고 사이 간격 줄이기 */
.footer-custom .row > .col-md-2:first-of-type {
  margin-left: -4rem !important;
  padding-left: 0.25rem !important;
}

/* 로고 섹션 오른쪽 마진도 조정 */
.footer-custom .row > .col-md-3:first-of-type {
  margin-right: -2rem !important;
  padding-right: 0.5rem !important;
}

/* Contact 섹션과 Support 섹션 사이 간격 조정 */
.col-md-1.col-6 {
  margin-left: -3rem !important;
}

/* Contact 섹션과 뉴스레터 섹션 사이 간격 늘리기 */
.col-md-1.col-6 {
  margin-right: 3rem !important;
}

/* Contact 섹션에 relative 포지셔닝 추가 */
.col-md-1.col-6 {
  position: relative !important;
}

/* Contact 섹션과 뉴스레터 섹션 사이 세로 줄 */
.col-md-1.col-6::after {
  content: '';
  position: absolute;
  right: -1.5rem;
  top: 0;
  bottom: 0;
  width: 0.5px;
  background-color: #ffffff;
  z-index: 1;
}

/* Footer Newsletter Title */
.footer-newsletter-title {
  color: #ffffff !important;
  font-weight: 600 !important;
  margin-bottom: 1rem !important;
  font-size: 1rem !important;
  line-height: 1.4 !important;
  font-family: var(--font-primary) !important;
}

/* 강제로 뉴스레터 제목 색상 적용 */
.footer-custom .footer-newsletter-title,
footer .footer-newsletter-title,
.footer-custom h5.footer-newsletter-title,
.footer-custom .col-md-2 h5.footer-newsletter-title,
footer .col-md-2 h5 {
  color: #ffffff !important;
}

/* 뉴스레터 제목 스타일 */
.footer-newsletter-title {
  white-space: nowrap;
}

/* Newsletter section styling */
.footer-custom .newsletter-section {
  background: transparent;
  padding: 0;
  margin-top: 0;
}

.footer-custom .newsletter-form {
  display: flex;
  gap: 0;
  margin-top: 1rem;
}

.footer-custom .newsletter-input {
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  color: var(--color-text-light) !important;
  border-radius: 0 !important;
  padding: 0.4rem 0.6rem !important;
  font-size: 0.9rem !important;
  flex: 1.5 !important;
  height: 1.8rem !important;
  border-right: none !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  width: auto !important;
  line-height: 1rem !important;
  min-width: 180px !important;
}

.footer-custom .newsletter-input::placeholder {
  color: rgba(255, 255, 255, 0.6) !important;
}

.footer-custom .newsletter-btn {
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  color: var(--color-text-light) !important;
  font-weight: 500 !important;
  border-radius: 0 !important;
  padding: 0.1rem 0.4rem !important;
  font-size: 0.5rem !important;
  transition: all 0.3s ease !important;
  white-space: nowrap !important;
  height: 1.8rem !important;
  flex: 1 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  width: auto !important;
  min-width: 3rem !important;
  max-width: 4rem !important;
  line-height: 1rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}

.footer-custom .newsletter-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.5);
  color: var(--color-text-light);
}

/* Footer links styling */
.footer-custom ul.list-unstyled li {
  margin-bottom: 0.4rem;
}

.footer-custom ul.list-unstyled a {
  color: rgba(255, 255, 255, 0.8) !important;
  text-decoration: none !important;
  transition: all 0.3s ease !important;
  font-size: 1rem !important;
  padding: 0 !important;
  white-space: normal !important;
  display: block !important;
  line-height: 1.4 !important;
  text-align: left !important;
}

.footer-custom ul.list-unstyled a:hover {
  color: #ffffff;
  text-decoration: none;
}

/* Footer Bottom Section */
.footer-bottom {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: none !important;
}

.footer-copyright {
  color: #ffffff !important;
  font-size: 0.75rem !important;
  margin: 0 !important;
  font-weight: 500 !important;
}

.footer-disclaimer {
  color: #ffffff !important;
  font-size: 0.65rem !important;
  margin: 0 !important;
  line-height: 1.2 !important;
  opacity: 0.8 !important;
  white-space: nowrap !important;
}

/* Ensure the copyright div itself also has the dark background */
footer.footer-custom .text-center.small,
.footer-custom .text-center.small {
  background-color: var(--color-primary-dark) !important; /* Explicitly dark */
  color: var(--color-text-light) !important;
}

/* Ensure consistent footer text styling across all pages */
.footer-custom h5 {
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  margin-bottom: 1rem !important;
  color: var(--color-text-light) !important;
}

.footer-custom p.small,
.footer-custom .small {
  font-size: 0.8125rem !important;
  line-height: 1.5 !important;
  color: var(--color-text-light) !important;
}

.footer-custom ul.list-unstyled li {
  margin-bottom: 0.5rem !important;
}

.footer-custom .newsletter-section .form-control {
  height: calc(1.5em + 0.5rem + 2px) !important;
  padding: 0.25rem 0.5rem !important;
  font-size: 0.8125rem !important;
  border-radius: 0.2rem !important;
}

.footer-custom .newsletter-section .btn-primary {
  color: #fff !important;
  background-color: var(--color-primary-medium) !important;
  border-color: var(--color-primary-medium) !important;
  padding: 0.25rem 0.5rem !important;
  font-size: 0.8125rem !important;
  border-radius: 0.2rem !important;
}

.footer-custom .newsletter-section .btn-primary:hover {
  background-color: var(--color-accent-gold) !important;
  border-color: var(--color-accent-gold) !important;
}

.footer-custom .social-icons a {
  margin-right: 0.75rem !important;
  font-size: 1rem !important;
}

/* Ensure text and links in the copyright section are light and override other specificities */
footer.footer-custom .container a, footer.footer-custom .container-fluid a {
  color: var(--color-text-light) !important;
  text-decoration: none;
  transition: color 0.2s ease;
  background-color: transparent !important;
}

footer.footer-custom .container .text-center.small a, footer.footer-custom .container-fluid .text-center.small a { /* Links in copyright section */
    color: #ccc !important; /* Lighter grey for links here */
    background-color: transparent !important;
}

footer.footer-custom .container a:hover, footer.footer-custom .container-fluid a:hover {
  color: var(--color-accent-gold) !important;
  text-decoration: underline;
  background-color: transparent !important;
}

footer.footer-custom .container a:focus, footer.footer-custom .container-fluid a:focus,
footer.footer-custom .container a:focus-visible, footer.footer-custom .container-fluid a:focus-visible {
    outline: none !important;
    box-shadow: none !important;
    background-color: transparent !important;
}

footer.footer-custom .container-fluid a i { /* Ensure icons inherit link color */
    color: inherit !important;
}

@media (max-width: 767.98px) { /* md breakpoint 미만 - 모바일 뷰 */
  .footer-custom {
    padding: 2rem 0 1.5rem 0 !important;
    width: 100% !important;
    overflow-x: hidden !important; /* 가로 스크롤 방지 */
  }

  /* 모바일에서 텍스트 가로 표시 강제 */
  .footer-custom * {
    writing-mode: horizontal-tb !important;
    text-orientation: mixed !important;
    direction: ltr !important;
    white-space: normal !important;
  }

  .footer-custom > .container {
    width: 100% !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    max-width: 100% !important;
    margin: 0 !important;
  }
  
  .footer-custom .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
  }

  .footer-custom .row > div[class*="col-"] {
    margin-bottom: 1rem !important; /* 1.5rem에서 1rem으로 줄임 */
    text-align: center !important;
    padding: 0 0.75rem !important; /* 1rem에서 0.75rem으로 줄임 */
    width: 100% !important;
    flex: none !important;
    max-width: 100% !important;
  }

  /* 모바일에서 데스크톱용 마진 설정 초기화 */
  .footer-custom .row > .col-md-2:first-of-type {
    margin-left: 0 !important;
    padding-left: 0.5rem !important;
  }

  .footer-custom .row > .col-md-3:first-of-type {
    margin-right: 0 !important;
    padding-right: 0.5rem !important;
  }

  .col-md-1.col-6 {
    margin-left: 0 !important;
    margin-right: 0 !important;
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .col-md-1.col-6::after {
    display: none !important;
  }

  .footer-brand {
    font-size: 1.3rem !important;
    margin-bottom: 0.5rem !important; /* 0.75rem에서 0.5rem으로 줄임 */
    text-align: center !important;
  }

  .footer-tagline {
    font-size: 0.9rem !important;
    margin-bottom: 1rem !important; /* 1.5rem에서 1rem으로 줄임 */
    text-align: center !important;
    line-height: 1.4 !important;
  }

  .footer-section-title {
    font-size: 1rem !important;
    margin-bottom: 0.75rem !important; /* 1rem에서 0.75rem으로 줄임 */
    text-align: center !important;
    font-weight: 600 !important;
  }

  .footer-custom ul.list-unstyled {
    padding-left: 0 !important;
  }

  .footer-custom ul.list-unstyled a {
    font-size: 0.9rem !important;
    padding: 0.3rem 0 !important; /* 0.4rem에서 0.3rem으로 줄임 */
    display: block !important;
    text-align: center !important;
    line-height: 1.5 !important;
  }

  .footer-newsletter-title {
    font-size: 1rem !important;
    margin-bottom: 0.75rem !important; /* 1rem에서 0.75rem으로 줄임 */
    white-space: normal !important;
    text-align: center !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
  }

  .footer-custom .newsletter-form {
    flex-direction: column !important;
    align-items: center !important;
    gap: 0.75rem !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 1rem !important;
  }

  .footer-custom .newsletter-input {
    margin-bottom: 0 !important;
    width: 100% !important;
    height: 2.5rem !important;
    font-size: 0.9rem !important;
    padding: 0.6rem 1rem !important;
    text-align: center !important;
    border-radius: 25px !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    background: rgba(255, 255, 255, 0.1) !important;
  }

  .footer-custom .newsletter-btn {
    width: 100% !important;
    height: 2.5rem !important;
    font-size: 0.9rem !important;
    padding: 0.6rem 1rem !important;
    text-align: center !important;
    border-radius: 25px !important;
    background: var(--color-accent-gold) !important;
    color: var(--color-primary-dark) !important;
    border: none !important;
    font-weight: 600 !important;
  }

  .footer-bottom {
    margin-top: 1.5rem !important; /* 2rem에서 1.5rem으로 줄임 */
    padding-top: 1rem !important; /* 1.5rem에서 1rem으로 줄임 */
    border-top: 1px solid rgba(255, 255, 255, 0.2) !important;
  }

  .footer-copyright {
    font-size: 0.8rem !important;
    margin-bottom: 0.5rem !important; /* 0.75rem에서 0.5rem으로 줄임 */
    text-align: center !important;
    font-weight: 500 !important;
  }

  .footer-disclaimer {
    font-size: 0.7rem !important;
    margin-top: 0.5rem !important; /* 0.75rem에서 0.5rem으로 줄임 */
    line-height: 1.4 !important;
    white-space: normal !important;
    text-align: center !important;
    opacity: 0.8 !important;
  }

  .footer-bottom .row {
    text-align: center !important;
    width: 100% !important;
    margin: 0 !important;
  }

  .footer-bottom .col-md-6 {
    margin-bottom: 0.5rem !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* iPad 및 태블릿 최적화 */
@media (max-width: 1024px) and (min-width: 768px) {
  .footer-custom {
    padding: 2.5rem 0 2rem 0 !important;
    width: 100% !important;
    overflow-x: hidden !important;
  }
  
  .footer-custom > .container {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 auto !important;
  }

  /* 아이패드에서 2열 레이아웃 사용 */
  .footer-custom .row {
    display: flex !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    margin: 0 !important;
    gap: 0 !important;
  }

  /* 브랜드 섹션 - 전체 너비 */
  .footer-custom .row > .col-md-3 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    margin-bottom: 2rem !important;
    padding: 0 !important;
    text-align: center !important;
  }

  /* 제품, 회사, 지원, 연락처 섹션 - 2열로 배치 */
  .footer-custom .col-md-2.col-6,
  .footer-custom .col-md-1.col-6,
  .footer-custom .col-md-3.col-6 {
    flex: 0 0 50% !important;
    max-width: 50% !important;
    width: 50% !important;
    margin-bottom: 1.5rem !important;
    padding: 0 0.25rem !important;
    text-align: center !important;
  }
  
  /* 뉴스레터 섹션은 제외 */
  .footer-custom .row > .col-md-2:last-child {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  /* 뉴스레터 섹션 - 전체 너비 (마지막 col-md-2) */
  .footer-custom .row > .col-md-2:last-child {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
    text-align: center !important;
  }

  /* 데스크톱용 마진 설정 초기화 */
  .footer-custom .row > .col-md-2:first-of-type {
    margin-left: 0 !important;
    padding-left: 0.75rem !important;
  }

  .footer-custom .row > .col-md-3:first-of-type {
    margin-right: 0 !important;
    padding-right: 0 !important;
  }

  .col-md-1.col-6 {
    margin-left: 0 !important;
    margin-right: 0 !important;
    position: static !important;
  }

  .footer-brand {
    font-size: 1.6rem !important;
    margin-bottom: 0.75rem !important;
    text-align: center !important;
  }

  .footer-tagline {
    font-size: 1rem !important;
    margin-bottom: 0 !important;
    text-align: center !important;
    line-height: 1.5 !important;
  }

  .footer-section-title {
    font-size: 1rem !important;
    margin-bottom: 0.75rem !important;
    text-align: center !important;
    font-weight: 600 !important;
  }

  .footer-custom ul.list-unstyled {
    padding-left: 0 !important;
    margin-bottom: 0 !important;
  }

  .footer-custom ul.list-unstyled a {
    font-size: 0.85rem !important;
    padding: 0.3rem 0 !important;
    text-align: center !important;
    line-height: 1.4 !important;
    display: block !important;
  }

  .footer-newsletter-title {
    font-size: 1.1rem !important;
    margin-bottom: 1rem !important;
    text-align: center !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
  }

  .footer-custom .newsletter-form {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
    margin-top: 0 !important;
    max-width: 400px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .footer-custom .newsletter-input {
    flex: 1 !important;
    height: 2.2rem !important;
    font-size: 0.9rem !important;
    padding: 0.5rem 0.75rem !important;
    text-align: left !important;
    border-radius: 4px 0 0 4px !important;
    border-right: none !important;
  }

  .footer-custom .newsletter-btn {
    height: 2.2rem !important;
    font-size: 0.9rem !important;
    padding: 0.5rem 1rem !important;
    text-align: center !important;
    border-radius: 0 4px 4px 0 !important;
    width: auto !important;
    min-width: 80px !important;
    white-space: nowrap !important;
  }

  .footer-bottom {
    margin-top: 2.5rem !important;
    padding-top: 1.5rem !important;
    border-top: 1px solid rgba(255, 255, 255, 0.2) !important;
    clear: both !important;
  }

  .footer-copyright {
    font-size: 0.85rem !important;
    margin-bottom: 0.5rem !important;
    text-align: center !important;
  }

  .footer-disclaimer {
    font-size: 0.75rem !important;
    margin-top: 0.5rem !important;
    line-height: 1.4 !important;
    text-align: center !important;
    opacity: 0.8 !important;
  }

  .footer-bottom .row {
    text-align: center !important;
    width: 100% !important;
    margin: 0 !important;
  }

  .footer-bottom .col-md-6 {
    margin-bottom: 0.5rem !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* 아이패드에서 이상한 선 제거 */
  .footer-custom::before,
  .footer-custom::after {
    display: none !important;
  }

  /* 아이패드에서 float 문제 해결 */
  .footer-custom .row > div[class*="col-"] {
    float: none !important;
    clear: none !important;
  }

  /* 아이패드에서 flexbox 문제 해결 */
  .footer-custom .row {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
  }

  /* 아이패드에서 뉴스레터 섹션 특별 처리 */
  .footer-custom .newsletter-section {
    width: 100% !important;
    margin-top: 1rem !important;
    padding-top: 1rem !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
  }
}

/* ===== FOOTER STYLES ===== */
.footer-custom {
  background-color: var(--color-primary-dark) !important;
  color: var(--color-text-light) !important;
  padding: 3rem 0 2rem 0 !important;
  flex-shrink: 0 !important;
  width: 100% !important;
  text-align: left !important;
}

/* 한국어 텍스트 강제 가로 표시 */
.footer-custom * {
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
  direction: ltr !important;
}

/* Override global .container padding for the footer's container */
.footer-custom > .container {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin: 0 auto !important;
  max-width: 100% !important; /* 기본적으로 전체 너비 */
  width: 100% !important;
  position: relative;
  z-index: 1;
}

/* 데스크톱에서만 양쪽 마진 적용 (아이패드 제외) */
@media (min-width: 1025px) {
  .footer-custom > .container {
    max-width: calc(100% - 22.5rem) !important; /* 데스크톱에서만 양쪽 마진 */
  }
}

/* Login/Signup Button Styles */
.navbar .btn-login {
  background-color: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  color: var(--color-text-light) !important;
  font-size: 0.9rem !important;
  padding: 0.5rem 1.2rem !important;
  border-radius: 24px !important;
  transition: all 0.3s ease !important;
  font-weight: 500 !important;
}

.navbar .btn-login:hover {
  background-color: rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(255, 255, 255, 0.5) !important;
  color: var(--color-text-light) !important;
  transform: translateY(-1px) !important;
}

.navbar .btn-signup {
  background-color: #4A90E2 !important;
  border: 1px solid #4A90E2 !important;
  color: white !important;
  font-size: 0.9rem !important;
  padding: 0.5rem 1.2rem !important;
  border-radius: 24px !important;
  transition: all 0.3s ease !important;
  font-weight: 500 !important;
}

.navbar .btn-signup:hover {
  background-color: #357ABD !important;
  border-color: #357ABD !important;
  color: white !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(74, 144, 226, 0.3) !important;
}

/* Language Switcher Styles */
.language-switcher {
  margin-right: 0;
}

/* 최종 모바일 푸터 강제 적용 */
@media screen and (max-width: 768px) {
  .footer-custom .container {
    padding: 0 1rem !important;
  }
  
  .footer-custom .container .row {
    display: flex !important;
    flex-wrap: wrap !important;
    margin: 0 !important;
    width: 100% !important;
    justify-content: center !important;
    gap: 0.5rem !important;
  }
  
  .footer-custom .container .row > div {
    flex: 0 0 calc(50% - 0.25rem) !important;
    max-width: calc(50% - 0.25rem) !important;
    width: calc(50% - 0.25rem) !important;
    margin-bottom: 1.5rem !important;
    padding: 0 0.5rem !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }
  
  .footer-custom .container .row > div.col-md-3 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 1rem !important;
    text-align: center !important;
  }
  
  .footer-custom .container .row > div.col-md-2:last-child {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 1rem !important;
    text-align: center !important;
  }
  
  .footer-custom .container .row > div.col-md-2:not(:last-child),
  .footer-custom .container .row > div.col-md-1 {
    flex: 0 0 calc(50% - 0.25rem) !important;
    max-width: calc(50% - 0.25rem) !important;
    width: calc(50% - 0.25rem) !important;
    padding: 0 0.5rem !important;
    text-align: center !important;
  }
}

.language-switcher .btn {
  background: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  color: #333 !important;
  transition: all 0.3s ease !important;
  border-radius: 24px !important;
  padding: 8px 16px !important;
  font-size: 0.9rem !important;
  font-weight: 500 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-width: 100px !important;
  justify-content: center !important;
  box-shadow: inset 0 2px 4px rgba(85, 170, 255, 0.3) !important;
  backdrop-filter: blur(24px) !important;
}

.language-switcher .btn:hover {
  background: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.5) !important;
  color: #333 !important;
  transform: translateY(-1px) !important;
  box-shadow: inset 0 2px 4px rgba(85, 170, 255, 0.4), 0 4px 8px rgba(0, 0, 0, 0.15) !important;
  backdrop-filter: blur(24px) !important;
}

.language-switcher .btn:active {
  background: #ffffff !important;
  transform: translateY(0) !important;
  box-shadow: inset 0 2px 4px rgba(85, 170, 255, 0.5) !important;
  backdrop-filter: blur(24px) !important;
}

.language-switcher .btn:focus {
  box-shadow: 0 0 0 0.2rem rgba(135, 206, 235, 0.25) !important;
}

#langText {
  font-weight: 500;
  font-size: 0.9rem;
  margin: 0 4px;
}

/* 다크모드에서 네비게이션 바와 푸터 검정색 네모 제거 */
body.dark-mode .navbar .navbar-nav .nav-link {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: #ffffff !important;
}

body.dark-mode .navbar .navbar-nav .nav-link:hover {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: #00ff88 !important;
}

body.dark-mode .navbar .navbar-nav .nav-link.active {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: #00ff88 !important;
}

body.dark-mode .footer-custom {
    background-color: var(--color-primary-dark) !important;
    color: #ffffff !important;
}

body.dark-mode .footer-custom .newsletter-input {
    background-color: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    color: #ffffff !important;
}

body.dark-mode .footer-custom .newsletter-btn {
    background-color: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    color: #ffffff !important;
}

body.dark-mode .footer-custom .newsletter-btn:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
    color: #ffffff !important;
}

/* ===== MOBILE BOTTOM NAVIGATION BAR ===== */
/* 데스크톱에서는 완전히 숨김 - 최고 우선순위 */
@media (min-width: 1200px) {
    body .mobile-bottom-nav,
    html body .mobile-bottom-nav,
    body .mobile-bottom-nav *,
    html body .mobile-bottom-nav *,
    body .mobile-bottom-nav .bottom-nav-item,
    html body .mobile-bottom-nav .bottom-nav-item,
    body .mobile-bottom-nav .bottom-nav-icon,
    html body .mobile-bottom-nav .bottom-nav-icon,
    body .mobile-bottom-nav .bottom-nav-text,
    html body .mobile-bottom-nav .bottom-nav-text {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        height: 0 !important;
        width: 0 !important;
        max-height: 0 !important;
        max-width: 0 !important;
        min-height: 0 !important;
        min-width: 0 !important;
        overflow: hidden !important;
        position: absolute !important;
        left: -9999px !important;
        top: -9999px !important;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
        box-shadow: none !important;
        z-index: -1 !important;
    }
    
    body .mobile-menu-overlay,
    html body .mobile-menu-overlay,
    body .mobile-education-menu,
    html body .mobile-education-menu,
    body .mobile-community-menu,
    html body .mobile-community-menu,
    body .mobile-profile-menu,
    html body .mobile-profile-menu,
    body .mobile-education-menu *,
    html body .mobile-education-menu *,
    body .mobile-community-menu *,
    html body .mobile-community-menu *,
    body .mobile-profile-menu *,
    html body .mobile-profile-menu *,
    body .education-menu-header,
    html body .education-menu-header,
    body .community-menu-header,
    html body .community-menu-header,
    body .profile-menu-header,
    html body .profile-menu-header,
    body .education-menu-content,
    html body .education-menu-content,
    body .community-menu-content,
    html body .community-menu-content,
    body .profile-menu-content,
    html body .profile-menu-content {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        height: 0 !important;
        width: 0 !important;
        position: absolute !important;
        left: -9999px !important;
        top: -9999px !important;
        z-index: -1 !important;
    }
}

/* 모바일 및 태블릿에서만 표시 - 최고 우선순위 (아이패드 포함) */
@media (max-width: 1199.98px) {
    body .mobile-bottom-nav,
    html body .mobile-bottom-nav,
    body.d-xl-none .mobile-bottom-nav {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        background-color: var(--color-primary-dark) !important;
        border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
        display: flex !important;
        justify-content: space-around !important;
        align-items: center !important;
        padding: 0.5rem 0 calc(0.75rem + env(safe-area-inset-bottom)) 0 !important; /* iOS safe area support */
        padding-bottom: 0.75rem !important; /* Fallback for browsers without safe-area-inset support */
        z-index: 9999 !important;
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.2) !important;
        height: auto !important;
        min-height: 80px !important;
        max-height: none !important;
        width: 100% !important;
        margin: 0 !important;
        visibility: visible !important;
        opacity: 1 !important;
        box-sizing: border-box !important;
        /* Modern touch optimizations */
        -webkit-tap-highlight-color: transparent !important;
        touch-action: manipulation !important;
        user-select: none !important;
        -webkit-user-select: none !important;
    }
}

/* 모든 페이지에서 강제 적용 */
body .mobile-bottom-nav .bottom-nav-item,
html body .mobile-bottom-nav .bottom-nav-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-decoration: none !important;
    color: rgba(255, 255, 255, 0.7) !important;
    transition: all 0.3s ease !important;
    flex: 1 !important;
    padding: 0.4rem 0.25rem 0.25rem 0.25rem !important;
    position: relative !important;
    cursor: pointer !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    max-width: 20% !important;
    box-sizing: border-box !important;
    /* Modern touch optimizations */
    -webkit-tap-highlight-color: transparent !important;
    touch-action: manipulation !important;
    min-height: 44px !important; /* Minimum touch target size (WCAG) */
    min-width: 44px !important;
    user-select: none !important;
    -webkit-user-select: none !important;
}

/* 프로필 네비게이션 아이템 중앙 정렬 보장 */
body .mobile-bottom-nav .profile-nav-item,
html body .mobile-bottom-nav .profile-nav-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-align: center !important;
}

/* 홈 버튼 스타일 - 최고 우선순위 */
body .mobile-bottom-nav .bottom-nav-item:first-child,
html body .mobile-bottom-nav .bottom-nav-item:first-child,
body.d-xl-none .mobile-bottom-nav .bottom-nav-item:first-child {
    font-size: inherit !important;
    line-height: inherit !important;
    color: rgba(255, 255, 255, 0.7) !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

body .mobile-bottom-nav .bottom-nav-item:first-child .bottom-nav-text,
html body .mobile-bottom-nav .bottom-nav-item:first-child .bottom-nav-text {
    display: block !important;
    font-size: 0.7rem !important;
    color: rgba(255, 255, 255, 0.7) !important;
    margin-top: 0.1rem !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* 홈 버튼 아이콘 크기 확대 - 최고 우선순위 */
body .mobile-bottom-nav .bottom-nav-item:first-child .bottom-nav-icon,
html body .mobile-bottom-nav .bottom-nav-item:first-child .bottom-nav-icon,
body .mobile-bottom-nav .bottom-nav-item:first-child img,
html body .mobile-bottom-nav .bottom-nav-item:first-child img {
    width: 32px !important;
    height: 32px !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    max-width: 32px !important;
    max-height: 32px !important;
}

/* 프로필 버튼 스타일 - 최고 우선순위 */
body .mobile-bottom-nav .bottom-nav-item:last-child,
html body .mobile-bottom-nav .bottom-nav-item:last-child,
body.d-xl-none .mobile-bottom-nav .bottom-nav-item:last-child {
    font-size: inherit !important;
    line-height: inherit !important;
    color: rgba(255, 255, 255, 0.7) !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

body .mobile-bottom-nav .bottom-nav-item:last-child .bottom-nav-text,
html body .mobile-bottom-nav .bottom-nav-item:last-child .bottom-nav-text,
body .mobile-bottom-nav .profile-nav-item .bottom-nav-text,
html body .mobile-bottom-nav .profile-nav-item .bottom-nav-text {
    display: block !important;
    font-size: 0.7rem !important;
    color: rgba(255, 255, 255, 0.7) !important;
    visibility: visible !important;
    opacity: 1 !important;
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

body .mobile-bottom-nav .bottom-nav-item:last-child .bottom-nav-icon,
html body .mobile-bottom-nav .bottom-nav-item:last-child .bottom-nav-icon,
body .mobile-bottom-nav .profile-nav-item .bottom-nav-icon,
html body .mobile-bottom-nav .profile-nav-item .bottom-nav-icon {
    display: block !important;
    color: rgba(255, 255, 255, 0.7) !important;
    visibility: visible !important;
    opacity: 1 !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

body .mobile-bottom-nav .bottom-nav-item:last-child i.fa-user-circle,
html body .mobile-bottom-nav .bottom-nav-item:last-child i.fa-user-circle,
body .mobile-bottom-nav .profile-nav-item i.fa-user-circle,
html body .mobile-bottom-nav .profile-nav-item i.fa-user-circle {
    color: rgba(255, 255, 255, 0.7) !important;
    font-size: 24px !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

body .mobile-bottom-nav .bottom-nav-item:last-child .profile-icon,
html body .mobile-bottom-nav .bottom-nav-item:last-child .profile-icon,
body .mobile-bottom-nav .profile-nav-item .profile-icon,
html body .mobile-bottom-nav .profile-nav-item .profile-icon {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 24px !important;
    height: 24px !important;
    max-width: 24px !important;
    max-height: 24px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-top: 0 !important;
}

/* 호버/포커스 스타일 - 최고 우선순위 */
body .mobile-bottom-nav .bottom-nav-item:hover,
body .mobile-bottom-nav .bottom-nav-item:focus,
html body .mobile-bottom-nav .bottom-nav-item:hover,
html body .mobile-bottom-nav .bottom-nav-item:focus {
    color: var(--color-accent-gold) !important;
    text-decoration: none !important;
    background: transparent !important;
    border: none !important;
}

/* 모든 페이지에서 강제 적용 */
body .mobile-bottom-nav .bottom-nav-icon,
html body .mobile-bottom-nav .bottom-nav-icon {
    width: 24px !important;
    height: 24px !important;
    margin-bottom: 0.25rem !important;
    transition: all 0.3s ease !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.bottom-nav-icon.profile-icon {
    border-radius: 50% !important;
    object-fit: cover !important;
    margin-left: auto !important;
    margin-right: auto !important;
    display: block !important;
}

/* 텍스트 스타일 - 최고 우선순위 */
body .mobile-bottom-nav .bottom-nav-text,
html body .mobile-bottom-nav .bottom-nav-text {
    font-size: 0.65rem !important;
    font-weight: 500 !important;
    font-family: var(--font-korean) !important;
    white-space: nowrap !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    color: rgba(255, 255, 255, 0.7) !important;
    margin-top: 0.2rem !important;
    line-height: 1.1 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

body .mobile-bottom-nav .bottom-nav-text.small-text,
html body .mobile-bottom-nav .bottom-nav-text.small-text {
    font-size: 0.7rem !important;
    margin-top: 0.1rem !important;
}

/* 모의투자 버튼 아이콘 흰색 - 최고 우선순위 */
body .mobile-bottom-nav .bottom-nav-item.mock-trading-item .bottom-nav-icon,
body .mobile-bottom-nav .bottom-nav-item.mock-trading-item i.fa-chart-line,
body .mobile-bottom-nav .bottom-nav-item:nth-child(2) .bottom-nav-icon,
body .mobile-bottom-nav .bottom-nav-item:nth-child(2) i.fa-chart-line,
html body .mobile-bottom-nav .bottom-nav-item.mock-trading-item .bottom-nav-icon,
html body .mobile-bottom-nav .bottom-nav-item.mock-trading-item i.fa-chart-line,
html body .mobile-bottom-nav .bottom-nav-item:nth-child(2) .bottom-nav-icon,
html body .mobile-bottom-nav .bottom-nav-item:nth-child(2) i.fa-chart-line {
    color: #ffffff !important;
    fill: #ffffff !important;
    visibility: visible !important;
    opacity: 1 !important;
}

body .mobile-bottom-nav .bottom-nav-item.mock-trading-item .bottom-nav-text.small-text,
body .mobile-bottom-nav .bottom-nav-item:nth-child(2) .bottom-nav-text.small-text,
html body .mobile-bottom-nav .bottom-nav-item.mock-trading-item .bottom-nav-text.small-text,
html body .mobile-bottom-nav .bottom-nav-item:nth-child(2) .bottom-nav-text.small-text {
    font-size: 0.7rem !important;
    color: rgba(255, 255, 255, 0.7) !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* 호버/포커스 아이콘 효과 - 최고 우선순위 */
body .mobile-bottom-nav .bottom-nav-item:hover .bottom-nav-icon,
body .mobile-bottom-nav .bottom-nav-item:focus .bottom-nav-icon,
html body .mobile-bottom-nav .bottom-nav-item:hover .bottom-nav-icon,
html body .mobile-bottom-nav .bottom-nav-item:focus .bottom-nav-icon {
    transform: scale(1.1) !important;
}

/* 모의투자 버튼 호버 시에도 흰색 유지 - 최고 우선순위 */
body .mobile-bottom-nav .bottom-nav-item.mock-trading-item:hover .bottom-nav-icon,
body .mobile-bottom-nav .bottom-nav-item.mock-trading-item:hover i.fa-chart-line,
body .mobile-bottom-nav .bottom-nav-item.mock-trading-item:focus .bottom-nav-icon,
body .mobile-bottom-nav .bottom-nav-item.mock-trading-item:focus i.fa-chart-line,
body .mobile-bottom-nav .bottom-nav-item:nth-child(2):hover .bottom-nav-icon,
body .mobile-bottom-nav .bottom-nav-item:nth-child(2):hover i.fa-chart-line,
body .mobile-bottom-nav .bottom-nav-item:nth-child(2):focus .bottom-nav-icon,
body .mobile-bottom-nav .bottom-nav-item:nth-child(2):focus i.fa-chart-line,
html body .mobile-bottom-nav .bottom-nav-item.mock-trading-item:hover .bottom-nav-icon,
html body .mobile-bottom-nav .bottom-nav-item.mock-trading-item:hover i.fa-chart-line,
html body .mobile-bottom-nav .bottom-nav-item.mock-trading-item:focus .bottom-nav-icon,
html body .mobile-bottom-nav .bottom-nav-item.mock-trading-item:focus i.fa-chart-line,
html body .mobile-bottom-nav .bottom-nav-item:nth-child(2):hover .bottom-nav-icon,
html body .mobile-bottom-nav .bottom-nav-item:nth-child(2):hover i.fa-chart-line,
html body .mobile-bottom-nav .bottom-nav-item:nth-child(2):focus .bottom-nav-icon,
html body .mobile-bottom-nav .bottom-nav-item:nth-child(2):focus i.fa-chart-line {
    color: #ffffff !important;
    fill: #ffffff !important;
}

/* Active state for bottom nav items - 최고 우선순위 */
body .mobile-bottom-nav .bottom-nav-item.active,
html body .mobile-bottom-nav .bottom-nav-item.active {
    color: var(--color-accent-gold) !important;
}

body .mobile-bottom-nav .bottom-nav-item.active .bottom-nav-icon,
html body .mobile-bottom-nav .bottom-nav-item.active .bottom-nav-icon {
    transform: scale(1.15) !important;
    filter: brightness(1.2) !important;
}

/* Mobile menu overlay - 최고 우선순위 */
body .mobile-menu-overlay,
html body .mobile-menu-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 75px !important;
    background-color: rgba(0, 0, 0, 0.5) !important;
    z-index: 9997 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity 0.3s ease, visibility 0.3s ease !important;
    width: 100% !important;
    margin: 0 !important;
}

body .mobile-menu-overlay.show,
html body .mobile-menu-overlay.show {
    opacity: 1 !important;
    visibility: visible !important;
}

/* Education and Community Menu Styles - 최고 우선순위 */
body .mobile-education-menu,
body .mobile-community-menu,
body .mobile-profile-menu,
html body .mobile-education-menu,
html body .mobile-community-menu,
html body .mobile-profile-menu {
    position: fixed !important;
    bottom: 75px !important;
    left: 0 !important;
    right: 0 !important;
    background-color: var(--color-primary-dark) !important;
    max-height: 70vh !important;
    overflow-y: auto !important;
    transform: translateY(100%) !important;
    transition: transform 0.3s ease !important;
    z-index: 9998 !important;
    box-shadow: 0 -2px 20px rgba(0, 0, 0, 0.3) !important;
    display: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

body .mobile-education-menu.show,
body .mobile-community-menu.show,
body .mobile-profile-menu.show,
html body .mobile-education-menu.show,
html body .mobile-community-menu.show,
html body .mobile-profile-menu.show {
    transform: translateY(0) !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* 메뉴 헤더 스타일 - 최고 우선순위 */
body .education-menu-header,
body .community-menu-header,
body .profile-menu-header,
html body .education-menu-header,
html body .community-menu-header,
html body .profile-menu-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 1rem !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    background-color: rgba(255, 255, 255, 0.05) !important;
    width: 100% !important;
    margin: 0 !important;
}

body .education-menu-header span,
body .community-menu-header span,
body .profile-menu-header span,
html body .education-menu-header span,
html body .community-menu-header span,
html body .profile-menu-header span {
    color: var(--color-text-light) !important;
    font-size: 1.1rem !important;
    font-weight: 600 !important;
    font-family: var(--font-primary) !important;
}

/* 닫기 버튼 스타일 - 최고 우선순위 */
body .close-education-menu,
body .close-community-menu,
body .close-profile-menu,
html body .close-education-menu,
html body .close-community-menu,
html body .close-profile-menu {
    background: transparent !important;
    border: none !important;
    color: var(--color-text-light) !important;
    font-size: 1.5rem !important;
    cursor: pointer !important;
    padding: 0.5rem !important;
    transition: all 0.3s ease !important;
    visibility: visible !important;
    opacity: 1 !important;
}

body .close-education-menu:hover,
body .close-community-menu:hover,
body .close-profile-menu:hover,
html body .close-education-menu:hover,
html body .close-community-menu:hover,
html body .close-profile-menu:hover {
    color: var(--color-accent-gold) !important;
    transform: rotate(90deg) !important;
}

/* 메뉴 콘텐츠 스타일 - 최고 우선순위 */
body .education-menu-content,
body .community-menu-content,
body .profile-menu-content,
html body .education-menu-content,
html body .community-menu-content,
html body .profile-menu-content {
    padding: 1rem !important;
    width: 100% !important;
    margin: 0 !important;
}

body .education-category,
html body .education-category,
body .community-category,
html body .community-category {
    margin-bottom: 1.5rem !important;
}

body .education-category:last-child,
html body .education-category:last-child,
body .community-category:last-child,
html body .community-category:last-child {
    margin-bottom: 0 !important;
}

body .education-category h6,
html body .education-category h6,
body .community-category h6,
html body .community-category h6 {
    color: var(--color-accent-gold) !important;
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    margin-bottom: 0.75rem !important;
    font-family: var(--font-primary) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

/* 메뉴 아이템 스타일 - 최고 우선순위 */
body .education-menu-item,
body .community-menu-item,
body .profile-menu-item,
html body .education-menu-item,
html body .community-menu-item,
html body .profile-menu-item {
    display: block !important;
    padding: 0.75rem 1rem !important;
    color: var(--color-text-light) !important;
    text-decoration: none !important;
    border-radius: var(--border-radius-sm) !important;
    margin-bottom: 0.5rem !important;
    transition: all 0.3s ease !important;
    font-family: var(--font-korean) !important;
    font-size: 0.9rem !important;
    background: transparent !important;
    border: none !important;
    width: 100% !important;
    visibility: visible !important;
    opacity: 1 !important;
}

body .education-menu-item:hover,
body .community-menu-item:hover,
body .profile-menu-item:hover,
html body .education-menu-item:hover,
html body .community-menu-item:hover,
html body .profile-menu-item:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: var(--color-accent-gold) !important;
    transform: translateX(5px) !important;
    text-decoration: none !important;
}

/* 프로필 메뉴 구분선 스타일 */
body .profile-menu-divider,
html body .profile-menu-divider {
    border: none !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    margin: 0.75rem 0 !important;
    width: 100% !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Adjust main content padding for mobile bottom nav - 모든 페이지 강제 적용 */
@media (max-width: 1199.98px) {
    body .main-content,
    html body .main-content {
        padding-bottom: 85px !important; /* Space for bottom nav */
    }
    
    body .container,
    body .container-fluid,
    html body .container,
    html body .container-fluid {
        padding-bottom: 10rem !important; /* Extra space for bottom nav */
    }
}

/* Small mobile devices - 모든 페이지 강제 적용 */
@media (max-width: 480px) {
    body .navbar,
    html body .navbar {
        height: 60px !important;
        min-height: 60px !important;
        max-height: 60px !important;
    }
    
    body .main-content,
    html body .main-content {
        padding-top: 60px !important;
    }
    
    body .mobile-bottom-nav,
    html body .mobile-bottom-nav {
        height: auto !important;
        min-height: 75px !important;
        max-height: none !important;
        padding: 0.4rem 0 calc(0.6rem + env(safe-area-inset-bottom)) 0 !important; /* iOS safe area support */
        padding-bottom: 0.6rem !important; /* Fallback */
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 9999 !important;
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 100% !important;
        margin: 0 !important;
        background-color: var(--color-primary-dark) !important;
        box-sizing: border-box !important;
        /* Modern touch optimizations */
        -webkit-tap-highlight-color: transparent !important;
        touch-action: manipulation !important;
    }
    
    body .mobile-education-menu,
    body .mobile-community-menu,
    html body .mobile-education-menu,
    html body .mobile-community-menu {
        bottom: 75px !important;
        z-index: 9998 !important;
    }
    
    body .mobile-menu-overlay,
    html body .mobile-menu-overlay {
        bottom: 75px !important;
        z-index: 9997 !important;
    }
    
    body .mobile-bottom-nav .bottom-nav-icon,
    html body .mobile-bottom-nav .bottom-nav-icon {
        width: 22px !important;
        height: 22px !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    body .mobile-bottom-nav .bottom-nav-text,
    html body .mobile-bottom-nav .bottom-nav-text {
        font-size: 0.65rem !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    body .mobile-bottom-nav .bottom-nav-item:first-child .bottom-nav-icon,
    html body .mobile-bottom-nav .bottom-nav-item:first-child .bottom-nav-icon {
        width: 28px !important;
        height: 28px !important;
    }
    
    /* 모의투자 버튼 작은 화면에서도 적용 - 최고 우선순위 */
    body .mobile-bottom-nav .bottom-nav-item:nth-child(2) .bottom-nav-icon,
    body .mobile-bottom-nav .bottom-nav-item:nth-child(2) i.fa-chart-line,
    html body .mobile-bottom-nav .bottom-nav-item:nth-child(2) .bottom-nav-icon,
    html body .mobile-bottom-nav .bottom-nav-item:nth-child(2) i.fa-chart-line {
        color: #ffffff !important;
        fill: #ffffff !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    body .mobile-bottom-nav .bottom-nav-item:nth-child(2) .bottom-nav-text.small-text,
    html body .mobile-bottom-nav .bottom-nav-item:nth-child(2) .bottom-nav-text.small-text {
        font-size: 0.65rem !important;
        color: rgba(255, 255, 255, 0.7) !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    body .main-content,
    html body .main-content {
        padding-bottom: 80px !important;
    }
    
    body .container,
    body .container-fluid,
    html body .container,
    html body .container-fluid {
        padding-bottom: 9.5rem !important;
    }
}

/* 분석 제한 모달 관련 스타일 - 오른쪽 흰 공간 방지 */
body.modal-open {
    padding-right: 0 !important;
}


/* 심플한 금융 분석 제한 모달 스타일 */
.analysis-limit-modal-dialog {
    max-width: 420px;
}

/* 분석 제한 모달이 다른 모달 스타일의 영향을 받지 않도록 명시적으로 지정 */
#analysisLimitModal {
    z-index: 1060 !important;
}

#analysisLimitModal.show {
    z-index: 1060 !important;
    pointer-events: auto !important;
}

#analysisLimitModal .modal-content {
    position: relative;
    z-index: 1061 !important;
    pointer-events: auto !important;
    /* capm.css의 .modal-content 스타일 오버라이드 */
    background-color: #ffffff !important;
    margin: auto !important;
    padding: 0 !important;
    border: none !important;
    width: auto !important;
    max-width: 420px !important;
    border-radius: 12px !important;
}

.analysis-limit-modal-content {
    border: none;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(30, 58, 138, 0.2);
    overflow: hidden;
    animation: modalSlideIn 0.3s ease-out;
    background: #ffffff;
    position: relative;
    z-index: 1061 !important;
    pointer-events: auto !important;
}

/* 모달 backdrop z-index 조정 - 네비게이션 바보다 높게 */
.modal-backdrop {
    z-index: 1055 !important;
}

.modal-backdrop.show {
    z-index: 1055 !important;
}

/* 모든 모달이 네비게이션 바와 메가 메뉴보다 위에 표시되도록 */
.modal {
    z-index: 1060 !important;
}

.modal.show {
    z-index: 1060 !important;
}

.modal-dialog {
    z-index: 1061 !important;
}

.modal-content {
    z-index: 1061 !important;
    position: relative;
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(-15px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.analysis-limit-modal-header {
    background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 100%);
    color: white;
    border: none;
    padding: 1.25rem 1.5rem;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.analysis-limit-modal-header .modal-title {
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0;
    letter-spacing: -0.01em;
    color: #ffffff !important;
}

.analysis-limit-modal-header .btn-close {
    opacity: 1;
    filter: brightness(0) invert(1);
    transition: opacity 0.2s;
    padding: 0.5rem;
    margin: 0;
}

.analysis-limit-modal-header .btn-close:hover {
    opacity: 0.8;
}

.analysis-limit-modal-body {
    padding: 1.5rem;
    text-align: center;
    background: #ffffff;
}

.analysis-limit-message {
    font-size: 1rem;
    line-height: 1.6;
    color: #1e293b;
    margin-bottom: 1.25rem;
    font-weight: 500;
}

.analysis-limit-info-box {
    background: #f1f5f9;
    border-left: 3px solid #2563eb;
    border-radius: 8px;
    padding: 1rem 1.25rem;
    margin-bottom: 1.25rem;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    text-align: left;
}

.analysis-limit-info-box i {
    color: #2563eb;
    font-size: 1rem;
    margin-top: 0.1rem;
    flex-shrink: 0;
}

.analysis-limit-info-box span {
    color: #475569;
    font-size: 0.875rem;
    line-height: 1.6;
}

.analysis-limit-signup-link {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid #e2e8f0;
}

.btn-signup-link {
    background: #2563eb;
    color: white;
    border: none;
    border-radius: 8px;
    padding: 0.75rem 1.5rem;
    font-size: 0.9375rem;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.2s;
    width: 100%;
    justify-content: center;
}

.btn-signup-link:hover {
    background: #1e40af;
    color: white;
    text-decoration: none;
}

.btn-signup-link i {
    font-size: 1rem;
}

.analysis-limit-modal-footer {
    border: none;
    padding: 1rem 1.5rem 1.25rem;
    justify-content: center;
    background: #ffffff;
    border-top: 1px solid #e2e8f0;
}

.btn-close-modal {
    background: #f1f5f9;
    color: #475569;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 0.625rem 1.5rem;
    font-size: 0.9375rem;
    font-weight: 500;
    transition: all 0.2s;
    min-width: 100px;
}

.btn-close-modal:hover {
    background: #e2e8f0;
    color: #334155;
    border-color: #cbd5e1;
}

/* 반응형 디자인 */
@media (max-width: 576px) {
    .analysis-limit-modal-dialog {
        max-width: 90%;
        margin: 1rem;
    }
    
    .analysis-limit-modal-header {
        padding: 1rem 1.25rem;
    }
    
    .analysis-limit-modal-header .modal-title {
        font-size: 1rem;
        color: #ffffff !important;
    }
    
    .analysis-limit-modal-body {
        padding: 1.25rem;
    }
    
    .analysis-limit-message {
        font-size: 0.9375rem;
    }
    
    .analysis-limit-info-box {
        padding: 0.875rem 1rem;
    }
    
    .btn-signup-link {
        padding: 0.625rem 1.25rem;
        font-size: 0.875rem;
    }
    
    .analysis-limit-modal-footer {
        padding: 0.875rem 1.25rem 1rem;
    }
}