/* ========================================
   기본 설정 (Base Styles)
   - 브라우저 기본값 초기화
   - 전체 페이지 기본 구조 설정
======================================== */
/* 모든 요소에 박스 크기 계산 방식 통일 (패딩/보더 포함) */
* { box-sizing: border-box; }

/* html, body 전체 화면 채우기 */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  width: 100%;
  max-width: none;
}

/* body를 세로 방향 flexbox로 설정 (헤더-메인-푸터 구조) */
body {
    display: flex;
    flex-direction: column;
}

/* 전체 배경색 */
.allbackground { background-color: #ffffff; }

/* 링크 기본 색상 */
a { color: rgb(0, 0, 0); }
/* 링크 hover 시 노란색으로 변경, 밑줄 제거 */
a:hover { color: #ffc107; text-decoration: none; }


/* ========================================
   레이아웃 구조 (Layout Structure)
   - 전체 페이지의 기본 뼈대
   - 헤더, 메인, 푸터 영역 배치
======================================== */
/* 앱 최상위 컨테이너 - 세로 방향 배치 */
.app {
  display: flex;
  flex-direction: column;
}

/* 메인 컨테이너 - 화면 전체 높이, 좌우 패딩 없음 */
/* .app > .container로 한정하여 Bootstrap .container와 충돌 방지 */
.app > .container {
  max-width: none;
  display: flex;
  width: 100%;           /* 부모 너비를 100% 사용 */
  min-height: 100vh;
  margin: 0;
  padding: 0;
  /* overflow: hidden;  <- 컨텐츠가 잘릴 수 있으니 필요 시에만 사용하세요 */
}

/* 메인 영역 - 남은 공간 모두 차지하여 푸터를 아래로 밀어냄 */
.main {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 0;
  margin: 0;
  min-width: 0;   /* 이거 없으면 또 오른쪽 여백 생길 수 있음 */
}

/* 메인 레이아웃 - 사이드바와 컨텐츠 영역 배치, 여백 제거 */
.main-layout {
  display: flex;
  flex: 1;
  width: 100%;
  padding: 0;
  margin: 0;
  gap: 0;
}

/* 페이지 컨텐츠 영역 - 메인 내용이 들어가는 곳 */
.page-content {
  flex: 1;
  margin: 0 auto;           /* 좌우 중앙 정렬 */
  padding: 20px 20px 0;     /* 상단/좌우 여백 */
  background-color: inherit;
  width: 100%;
  max-width: 1400px;        /* 최대 너비 제한으로 가독성 향상 */
}


/* 헤더, 푸터 - 중앙 정렬, 흰색 배경 */
.header, .footer {
  text-align: center;
  background-color: #ffffff;
}


/* ========================================
   사이드바 (Sidebar)
   - 왼쪽 고정 메뉴 영역
   - 페이지 네비게이션
======================================== */
/* 사이드바 컨테이너 - 220px 고정 너비, 회색 배경, 왼쪽 끝에 밀착 */
.page-sidebar {
  width: 220px;
  min-width: 220px;
  max-width: 220px;
  padding: 16px 12px;
  margin: 0;
  background: #252238;
  border-right: 1px solid #2d2a45;
  flex-shrink: 0;
  overflow-y: auto;
  overflow-x: hidden;
  align-self: stretch;
}

/* 사이드바 제목 */
.page-sidebar h6 {
  margin: 0 0 8px;
  font-size: .65rem;
  font-weight: 700;
  color: #6b6b8a;
  letter-spacing: .08em;
  text-transform: uppercase;
  border-bottom: 1px solid #2d2a45;
  padding-bottom: 10px;
}

/* 맨 위 세계 토글 (2026-10-31) — 레버레프트 / 패스포트를 눌러 고르면 아래 하단바 이름·세계 섹션이 바뀜 (backoffice/sidebar.py) */
.sidebar-world-toggle {
  display: flex;
  gap: 4px;
  margin: 0 -4px 14px;
  padding: 4px;
  background: #1d1a2e;
  border: 1px solid #322f4d;
  border-radius: 10px;
}

.sidebar-world-option {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 0;
  padding: 6px 4px;
  color: #8d8bab;
  font-size: .74rem;
  font-weight: 700;
  white-space: nowrap;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 7px;
  transition: background .2s ease, color .2s ease;
}

.sidebar-world-option img {
  width: 15px;
  height: 15px;
  border-radius: 4px;
  opacity: .55;
}

.sidebar-world-option:hover {
  color: #e0deff;
  background: #2d2a45;
}

/* 고른 세계 — 세계 색 (관리 화면 세계 배지와 같은 색 계열, 어두운 바탕에 맞게 밝게) */
.sidebar-world-option.active img {
  opacity: 1;
}

.sidebar-world-option-levereft.active {
  color: #e7f0fd;
  background: rgba(106, 166, 238, .16);
  border-color: rgba(106, 166, 238, .55);
}

.sidebar-world-option-fancy.active {
  color: #fbf3df;
  background: rgba(217, 178, 95, .16);
  border-color: rgba(217, 178, 95, .55);
}

/* 메뉴 블록 (2026-10-31) — 앱 하단바 / 앱 사이드바 / 워크스페이스를 옅은 상자로 묶어 한눈에 구분 */
.sidebar-section {
  margin: 0 -4px 14px;
  padding: 10px 4px 6px;
  background: rgba(255, 255, 255, .025);
  border: 1px solid #322f4d;
  border-radius: 10px;
}

/* 블록 제목 — 아이콘 + 이름 + 오른쪽 작은 설명 */
.sidebar-section-title {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 8px 6px;
  color: #c9c7e6;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .02em;
}

.sidebar-section-title i {
  color: #8d8bab;
}

.sidebar-section-note {
  margin-left: auto;
  color: #777694;
  font-size: .6rem;
  font-weight: 600;
}

/* 어드민·워크스페이스 블록 — 앱 메뉴(하단바·사이드바)와 떨어뜨림 (스태프가 아니면 워크스페이스 블록에) */
.sidebar-section-spaced {
  margin-top: 26px;
}

/* 블록 안 묶음 이름 — 오른쪽으로 가는 줄로 묶음을 나눔 */
.sidebar-group-label {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 12px 8px 4px;
  color: #8d8bab;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .06em;
}

.sidebar-group-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: #34314f;
}

/* 세계마다 다른 묶음 — 세계 색 점 + 글자 (관리 화면 세계 배지와 같은 색 계열, 어두운 바탕에 맞게 밝게) */
.sidebar-group-label-world::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}

.sidebar-group-label-levereft {
  color: #6aa6ee;
}

.sidebar-group-label-fancy {
  color: #d9b25f;
}

/* 사이드바 메뉴 리스트 - 기본 리스트 스타일 제거 */
.sidebar-menu {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* 사이드바 메뉴 아이템 - 아래 간격 */
.sidebar-menu li {
  margin-bottom: 4px;
}

/* 사이드바 링크 - 블록 형태, 둥근 모서리 */
.sidebar-menu a {
  display: block;
  padding: 8px 12px;
  font-size: .8rem;
  color: #a9a9c8;
  text-decoration: none;
  border-radius: 7px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background 0.2s ease, color 0.2s ease;
}

.sidebar-app-menu li > span {
  display: block;
  padding: 7px 12px;
  color: #8987a5;
  font-size: .78rem;
  white-space: nowrap;
}

.sidebar-app-menu li > span i {
  width: 16px;
  color: #777694;
}

/* 사이드바 하위 메뉴 - 위 메뉴 아래 들여쓰고 왼쪽 선으로 묶음 (예: 빌리지 : 게이트 › 여행 : 동행) */
.sidebar-submenu {
  margin: 4px 0 0 18px;
  padding-left: 8px;
  border-left: 1px solid #3a3756;
}

.sidebar-submenu a {
  padding: 6px 10px;
  font-size: .76rem;
}

/* 사이드바 링크 hover */
.sidebar-menu a:hover {
  background: #2d2a45;
  color: #e0deff;
}

/* 사이드바 활성 메뉴 */
.sidebar-menu a.active {
  background: #3d1d7a;
  color: #d0bfff;
  font-weight: 600;
}


/* ========================================
   메뉴 (Navigation Menus)
   - 상단 가로 메뉴 / 세로 메뉴
   - 페이지 네비게이션
======================================== */
/* 상단 고정 메뉴 컨테이너 */
.top-menu {
  position: relative;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1030;  /* Bootstrap fixed level - below modals (1055) */
}

/* 수평 메뉴 - 상단 가로 배치, 그라데이션 배경 (높이 70px) */
.horizontal-menu {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  height: 70px;
  padding: 0 12px;
  background: linear-gradient(90deg, #3d2456 0%, #4a3b7c 10%, #2e4a6e 25%, #1a3a5c 45%, #0d2137 80%, #0a0a0a 100%);
  color: #fff;
  white-space: nowrap;
  overflow: visible;
  font-size: 13px;
}

/* 가운데 메뉴 - 전체 높이로 클릭 영역 확장 */
.menu-center {
  height: 100%;
  align-items: stretch !important;
}

/* 오른쪽 메뉴 - 전체 높이로 클릭 영역 확장 */
.menu-right {
  height: 100%;
  align-items: stretch !important;
}

.menu-right a {
  display: flex !important;
  align-items: center;
  height: 100%;
  padding: 0 12px;
}

.menu-right a:hover {
  background-color: #ffffff20;
}

.menu-right form {
  display: flex;
  height: 100%;
}

.menu-right form button {
  display: flex !important;
  align-items: center;
  height: 100%;
  padding: 0 15px !important;
  border: none;
  background: transparent;
}

.menu-right form:hover {
  background-color: #ffffff20;
}

/* 수평 메뉴 링크 - 전체 높이, 흰색 글자 */
.horizontal-menu a {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 13px;
  text-decoration: none;
  color: #fff;
}

/* 수평 메뉴 링크 hover - 밝은 흰색 배경 */
.horizontal-menu a:hover {
  background-color: #ffffff20;
}

/* 수평 메뉴 현재 페이지 활성 */
.horizontal-menu a.nav-active {
  background-color: rgba(124,58,237,.35);
  border-bottom: 2px solid #a78bfa;
  color: #e9d5ff;
}

/* 수직 메뉴 - 왼쪽 세로 배치, 200px 고정 너비 */
.vertical-menu {
  width: 200px;
  flex-shrink: 0;
  overflow-y: auto;
}

/* 수직 메뉴 링크 - flexbox로 중앙 정렬, 최소 높이 44px */
.vertical-menu a {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  min-height: 44px;
  color: #fff;
}

/* 수직 메뉴 링크 hover - 회색 배경 */
.vertical-menu a:hover {
  background-color: #555;
}


/* ========================================
   컨텐츠 영역 (Content Areas)
   - 좌우 2단 분할 레이아웃
   - 왼쪽 사이드 영역 / 오른쪽 메인 영역
======================================== */
/* 컨텐츠 래퍼 - 좌우 영역을 감싸는 컨테이너, 여백 제거 */
.content-wrap {
  display: flex;
  flex: 1;
  min-height: 0;
  padding: 0;
  margin: 0;
  gap: 0;
}

/* 왼쪽 영역 - 30% 너비, 최소 220px, 세로 스크롤, 여백 제거 */
.left {
  width: 30%;
  min-width: 220px;
  overflow-y: auto;
  padding: 0;
  margin: 0;
}

/* 오른쪽 영역 - 남은 공간 모두 차지, 세로 스크롤, 여백 제거 */
.right {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  padding: 0;
  margin: 0;
}


/* ========================================
   폰트 스타일 (Typography)
   - 텍스트 색상 및 정렬
======================================== */
/* 검정색 폰트 - 15px, 중앙 정렬 */
.blackfont {
  color: #000000;
  font-size: 15px;
  text-align: center;
}

/* 회색 폰트 - 15px, 중앙 정렬 */
.whitefont {
  color: rgb(111, 111, 111);
  font-size: 15px;
  text-align: center;
}


/* ========================================
   버튼 (Buttons)
   - 다양한 버튼 스타일
   - 일반 버튼, 로그아웃 버튼 등
======================================== */
/* 커스텀 버튼 - 파란색 배경, 흰색 글자 */
.custom-button {
  background-color: #5b90c9;
  color: #fff;
  border: none;
  padding: 5px 5px;
  font-size: 15px;
  border-radius: 3px;
  cursor: pointer;
}

/* 커스텀 버튼 hover - 진한 파란색 */
.custom-button:hover {
  background-color: #0056b3;
}

/* 기본 버튼 - 검정 배경, 작은 크기 (13px) */
.my-button {
  background-color: #333;
  color: #fff;
  border: none;
  padding: 5px 10px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 13px;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 3px;
}

/* 스타일 버튼 - 주황색 배경, 둥근 모서리 (15px) */
.button-style {
  display: inline-block;
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  outline: none;
  color: #fff;
  background-color: #F37021;
  border: none;
  border-radius: 15px;
}

/* 스타일 버튼 hover - 녹색으로 변경 */
.button-style:hover { 
  background-color: #45a049; 
}

/* 로그아웃 버튼 - 배경/테두리 없음 (이미지 전용) */
.logout-button {
  border: none;
  background: none;
  padding: 0;
  margin: 0;
}

/* 로그아웃 버튼 이미지 - 27px 크기 */
.logout-button img {
  cursor: pointer;
  width: 27px;
  height: auto;
}

/* 버튼 리스트 - 기본 스타일 제거 */
.my-button-list { 
  list-style: none; 
  padding: 0; 
  margin: 0; 
}

/* 버튼 리스트 아이템 - 아래 간격 */
.my-button-list li { 
  margin-bottom: 10px; 
}


/* ========================================
   폼 (Forms)
   - 입력 폼 레이아웃
   - 중앙 정렬 폼
======================================== */
/* 중앙 정렬 폼 컨테이너 - flexbox로 중앙 배치 */
.centered-form {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 중앙 정렬 폼 - 최대 너비 480px, 중앙 정렬 */
.centered-form form {
  text-align: center;
  width: 100%;
  max-width: 480px;
}


/* ========================================
   테이블 (Tables)
   - 사용자 정보 테이블
   - 4개 컬럼 균등 분할
======================================== */
/* 사용자 테이블 - 전체 너비, 테두리 겹침 제거 */
.user-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
}

/* 테이블 셀 - 패딩, 왼쪽 정렬, 회색 테두리 */
.user-table th, .user-table td {
  padding: 12px;
  text-align: left;
  border: 1px solid #ddd;
}

/* 테이블 4개 컬럼 - 각각 25% 너비로 균등 분할 */
.user-table th:nth-child(1), .user-table td:nth-child(1),
.user-table th:nth-child(2), .user-table td:nth-child(2),
.user-table th:nth-child(3), .user-table td:nth-child(3),
.user-table th:nth-child(4), .user-table td:nth-child(4) {
  width: 25%;
}


/* ========================================
   리스트 (Lists)
   - ul, li 기본 스타일 초기화
   - 불릿 제거
======================================== */
/* ul 기본 스타일 제거 - 불릿, 패딩, 마진 없음 */
ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* li 기본 스타일 제거 */
li {
  list-style: none;
  padding: 0;
  margin: 0;
}


/* ========================================
   사이트맵 (Sitemap)
   - 푸터 사이트맵 네비게이션
   - 메인 메뉴 + 서브 메뉴
======================================== */
/* 사이트맵 컨테이너 - 법적 정보 영역과 톤 통일 */
.footer-sitemap {
  background-color: #2a2a2a;
  padding: 28px 20px 20px;
  border-bottom: 1px solid #333;
}

/* 사이트맵 메인 메뉴 - 가로 배치, 중앙 정렬 */
#sitemap {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 40px;
}

/* 사이트맵 링크 - 밝은 회색, 세미볼드, 13px */
#sitemap > li > a {
  color: #ddd;
  text-decoration: none;
  font-weight: 600;
  font-size: 13px;
  transition: color 0.2s ease;
}

/* 사이트맵 링크 hover */
#sitemap > li > a:hover {
  color: #fff;
}

/* 서브 사이트맵 - 중앙 정렬, 작은 글자 */
.sub-sitemap {
  list-style: none;
  padding: 0;
  margin: 6px 0 0;
  text-align: center;
}

/* 서브 사이트맵 링크 - 회색, 12px */
.sub-sitemap a {
  color: #888;
  text-decoration: none;
  font-size: 12px;
  font-weight: 400;
  transition: color 0.2s ease;
}

/* 서브 사이트맵 링크 hover */
.sub-sitemap a:hover {
  color: #ccc;
  text-decoration: none;
}


/* ========================================
   푸터 (Footer)
   - 하단 고정 영역
   - 저작권 정보 등
======================================== */
/* 푸터 고정 바 - 하단, 전체 너비, 검정 배경 */
.bodydown {
  position: static;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #333;
  color: #fff;
  padding: 3px;
  text-align: center;
  z-index: 1000;
}

/* 푸터 법적 정보 영역 */
.footer-legal {
  background-color: #222;
  color: #999;
  text-align: center;
  padding: 30px 20px 24px;
  font-size: 12px;
  line-height: 1.8;
}

/* 약관 링크 영역 */
.footer-legal-links {
  margin-bottom: 16px;
  font-size: 13px;
}

.footer-legal-links a {
  color: #ccc;
  text-decoration: none;
  transition: color 0.2s;
}

.footer-legal-links a:hover {
  color: #fff;
}

/* 개인정보처리방침 강조 */
.footer-privacy {
  color: #fff !important;
}

/* 구분선 */
.footer-legal-divider {
  margin: 0 8px;
  color: #555;
}

/* 사업자 정보 */
.footer-legal-info {
  margin-bottom: 16px;
}

.footer-legal-info p {
  margin: 0;
  padding: 0;
  line-height: 1.9;
}

.footer-legal-info a {
  color: #aaa;
  text-decoration: none;
  transition: color 0.2s;
}

.footer-legal-info a:hover {
  color: #fff;
}

/* 통신판매업 확인 링크 */
.footer-verify-link {
  color: #7ab;
  margin-left: 4px;
  font-size: 11px;
}

.footer-verify-link:hover {
  color: #adf !important;
}

/* 호스팅 정보 */
.footer-hosting {
  margin-top: 4px;
  color: #777;
  font-size: 11px;
}

/* 저작권 */
.footer-copyright {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #333;
  color: #777;
  font-size: 11px;
}


/* ========================================
   알림 (Notifications)
   - 화면 우측 하단 알림 메시지
   - 성공/에러/경고/정보 타입별 색상
======================================== */
/* 알림 컨테이너 - 우측 하단 고정, 260px 너비 */
.messages {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 260px;
  padding: 12px;
}

/* 알림 메시지 - 둥근 모서리, 최대 너비 720px */
.notification {
  color: rgb(0, 0, 0);
  padding: 8px 12px;
  border-radius: 6px;
  margin: 8px auto;
  max-width: 720px;
}

/* 성공 알림 - 보라색 배경 */
.notification.success { background-color: #afaadd8d; }
/* 에러 알림 - 빨간색 배경 */
.notification.error   { background-color: #c7948c96; }
/* 경고 알림 - 회색 배경 */
.notification.warning { background-color: #8d8b8ba2; }
/* 정보 알림 - 주황색 배경 */
.notification.info    { background-color: #ffac7889; }


/* ========================================
   로딩 (Loading)
   - 페이지 로딩 시 전체 화면 오버레이
   - 회전하는 스피너 애니메이션
======================================== */
/* 로딩 오버레이 - 전체 화면 덮기, 반투명 검정 배경 */
#loading-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

/* 로딩 스피너 - 회전 애니메이션, 원형 (50x50px) */
#loading-spinner {
  border: 5px solid #f3f3f3;
  border-top: 5px solid #3498db;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  animation: spin 2s linear infinite;
}

/* 회전 애니메이션 - 360도 무한 회전 */
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}


/* ========================================
   기타 (Miscellaneous)
   - 특정 용도의 스타일
======================================== */
/* 메뉴 숨김 처리 */
#menu {
  display: none;
}


/* ========================================
   반응형 (Responsive)
   - 모바일/태블릿 대응
======================================== */
/* 태블릿 (1024px 이하) */
@media (max-width: 1024px) {
  .horizontal-menu {
    font-size: 11px;
    gap: 6px;
    padding: 0 8px;
  }

  .horizontal-menu a {
    padding: 0 8px;
  }

  .menu-center {
    gap: 0 !important;
  }
}

/* 모바일 (768px 이하) */
@media (max-width: 768px) {
  .horizontal-menu {
    font-size: 10px;
    gap: 4px;
    padding: 0 5px;
    height: 60px;
  }

  .horizontal-menu a {
    padding: 0 5px;
  }

  .menu-left img {
    width: 50px !important;
  }

  /* 메인 레이아웃 - 세로 배치 */
  .main-layout {
    flex-direction: column;
  }

  /* 사이드바 - 위쪽에 가로로 펼침 */
  .page-sidebar {
    width: 100%;
    min-width: 100%;
    max-width: 100%;
    border-right: none;
    border-bottom: 1px solid #e5e7eb;
    padding: 12px;
  }

  /* 페이지 컨텐츠 - 아래쪽 */
  .page-content {
    padding: 10px;
  }

  /* 푸터 사이트맵 - 모바일 */
  .footer-sitemap {
    padding: 20px 15px 16px;
  }

  #sitemap {
    gap: 20px;
    flex-wrap: wrap;
  }

  #sitemap > li > a {
    font-size: 12px;
  }

  .sub-sitemap a {
    font-size: 11px;
  }

  .bodydown {
    font-size: 10px;
    padding: 2px;
  }

  /* 푸터 법적 정보 - 모바일 */
  .footer-legal {
    padding: 20px 15px 18px;
    font-size: 11px;
  }

  .footer-legal-links {
    font-size: 12px;
  }

  .footer-legal-info p .footer-legal-divider {
    display: none;
  }

  .footer-legal-info p {
    line-height: 1.7;
  }
}


/* ========================================
   알림 드롭다운 (Notification Dropdown)
   - 상단 우측 알림 버튼
   - 드롭다운 목록 스타일
======================================== */
/* 드롭다운이 잘리지 않도록 수정 */
.menu-right .dropdown {
  position: static;
}

.menu-right .dropdown-menu {
  position: absolute;
  top: 70px !important;
  right: 10px !important;
  left: auto !important;
  z-index: 2000;
}

.notification-dropdown {
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  border: 1px solid #ddd;
}

.notification-dropdown .dropdown-header {
  padding: 10px 15px;
  background: #f8f9fa;
}

.notification-item {
  padding: 10px 15px;
  border-bottom: 1px solid #eee;
  cursor: pointer;
  transition: background-color 0.2s;
}

.notification-item:hover {
  background-color: #f8f9fa;
}

.notification-item:last-child {
  border-bottom: none;
}

.notification-item .notification-type {
  font-weight: 600;
  font-size: 13px;
  color: #18314c;
}

.notification-item .notification-time {
  font-size: 11px;
  color: #999;
}

.notification-item .notification-body {
  font-size: 12px;
  color: #666;
  margin-top: 3px;
}

.notification-status {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 10px;
  margin-right: 5px;
}

.notification-status.success {
  background: #d4edda;
  color: #155724;
}

.notification-status.partial {
  background: #fff3cd;
  color: #856404;
}

.notification-status.fail {
  background: #f8d7da;
  color: #721c24;
}

.notification-badge {
  font-size: 10px;
  padding: 2px 5px;
}


/* ========================================
   Offcanvas/Modal z-index 수정
   - Bootstrap offcanvas/modal이 top-menu 위에 표시되도록
======================================== */
.offcanvas {
  z-index: 1200 !important;
}

.offcanvas-backdrop {
  z-index: 1150 !important;
}

/* Modal이 항상 상단 메뉴 위에 표시되도록 */
.modal {
  z-index: 1060 !important;
}

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