@bwg-ui/core 1.3.0 → 1.3.2

package/dist/styles/layout.css

@@ -1,1234 +1,1289 @@
-/* 메인 레이아웃 스타일 */
-.main-layout {
-  min-height: 100vh;
-  overflow: hidden;
-  min-width: 1280px;
-}
-
-/* 헤더 스타일 */
-.header-wrapper {
-  height: 50px !important;
-  line-height: 50px !important;
-  background: var(--header-bg);
-  padding: 0 30px 0 20px;
-  border-bottom: 1px solid var(--border-color);
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  z-index: 1000;
-  gap: 24px;
-  color: var(--header-text);
-}
-
-.header-search {
-  flex-shrink: 0;
-}
-
-.header-title {
-  font-size: 18px;
-  font-weight: var(--font-weight-semibold);
-  color: var(--text-primary);
-  flex: 1;
-  text-align: center;
-}
-
-/* 헤더 로고 영역 */
-.header-left {
-  display: flex;
-  align-items: center;
-  min-width: 200px;
-}
-
-.logo-container {
-  display: flex;
-  align-items: center;
-  height: 100%;
-  gap: 10px;
-}
-
-.header-logo-image {
-  width: 81px;
-  height: 40px;
-  object-fit: contain;
-}
-
-.logo-placeholder {
-  font-size: 18px;
-  font-weight: var(--font-weight-bold);
-  color: var(--header-text);
-  padding: 8px 12px;
-  border: 2px dashed var(--header-text);
-  border-radius: var(--border-radius-sm);
-  opacity: 0.7;
-}
-
-
-/* 헤더 타이틀 영역 */
-.header-title {
-  flex: 1;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: var(--font-size-md);
-  font-weight: var(--font-weight-medium);
-  color: var(--header-text);
-}
-
-/* 헤더 사용자 영역 */
-.header-right {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  min-width: 200px;
-  justify-content: flex-end;
-}
-
-.header-wrapper .ant-btn {
-  width: 30px;
-  height: 30px;
-}
-
-
-/* 사이더 스타일 */
-.side-wrapper {
-  height: calc(100vh - 50px); /* 헤더 높이(50px)를 제외 */
-  overflow: visible; /* 토글 버튼이 짤리지 않도록 visible로 변경 */
-  display: flex;
-  flex-direction: column;
-  background-color: var(--sidebar-bg) !important;
-  position: relative; /* 토글 버튼의 absolute 포지셔닝을 위해 */
-  border-right: 1px solid var(--border-color);
-}
-
-.sider-content {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-}
-
-.sider-menu {
-  border-inline-end: none !important;
-  flex: 1;
-  overflow-y: auto; /* 필요할 때만 스크롤바 표시 */
-  overflow-x: hidden;
-  max-height: calc(100vh - 160px); /* 헤더(50px) + 로고 높이 + 마진 고려 */
-  padding-right: 0px !important; /* 스크롤바 너비만큼 여백 확보 */
-  box-sizing: border-box; /* 패딩을 포함한 박스 모델 */
-}
-.sider-menu.ant-menu-inline-collapsed  {
-  max-height: calc(100vh - 50px);
-}
-.sider-segmented {
-  padding: 5px;
-  background-color: var(--sidebar-segmented-bg);
-  border-radius: var(--border-radius-sm);
-  font-size: 13px;
-  color: var(--sidebar-segmented-text);
-}
-.sider-search-ipt {
-  background: var(--sidebar-search-bg);
-  border-radius: var(--border-radius-xl);
-  border: 0;
-  color: var(--sidebar-search-text);
-  font-size: 13px;
-  font-weight: var(--font-weight-medium);
-}
-.sider-segmented .ant-segmented-group {
-  gap: 5px;
-}
-
-/* Ant Design 메뉴 스타일 오버라이드 */
-
-.sider-menu .ant-menu-item {
-  height: 30px;
-  transition: all 0.3s ease;
-}
-
-.sider-menu .ant-menu-submenu-title {
-  height: 30px !important;
-  line-height: 30px !important;
-}
-
-.sider-menu .ant-menu-submenu-title:hover {
-  background-color: unset !important;
-}
-
-/* 사이드바 테마 적용 */
-.ant-layout-sider {
-  background-color: var(--sidebar-bg);
-}
-.ant-layout-sider-collapsed {
-  flex: 0 0 50px !important;
-  max-width: 50px !important;
-  min-width: 50px !important;
-  width: 50px !important;
-  padding: 10px 0;
-}
-
-.ant-menu-dark {
-  background-color: var(--sidebar-bg);
-}
-
-/* 사이드바 메뉴 트리 전체 테마 적용 */
-.ant-layout-sider .ant-menu {
-  background-color: var(--sidebar-bg);
-}
-
-.ant-layout-sider .ant-menu-submenu {
-  border-radius: 0;
-  margin: 0;
-  width: 100%;
-}
-
-.ant-layout-sider .ant-menu-item {
-  /* background-color: var(--sidebar-bg) !important; */
-  /* color: var(--sidebar-text) !important; */
-}
-
-.ant-layout-sider .ant-menu-item:hover {
-  background-color: unset !important;
-}
-
-/* .sider-menu가 아닌 경우에만 배경색 제거 (기존 스타일 유지) */
-.ant-layout-sider .ant-menu-item-selected {
-  background-color: unset !important;
-}
-
-.ant-layout-sider .ant-menu-submenu-title:hover {
-  background-color: unset !important;
-}
-
-.ant-layout-sider .ant-menu-submenu-open > .ant-menu-submenu-title {
-  /* background-color: rgba(255, 255, 255, 0.15) !important; */
-}
-
-.ant-layout-sider .ant-menu-sub.ant-menu-inline {
-  background: transparent !important;
-}
-/* 메뉴 공통 스타일 */
-.sider-menu .ant-menu-item,
-.sider-menu .ant-menu-submenu-title {
-  margin: 0;
-  width: 100%;
-  border-radius: 0;
-}
-.sider-menu .ant-menu-item-active.ant-menu-item-only-child {
-  background-color: var(--sidebar-menu-selected-bg);
-}
-.sider-menu .ant-menu-item-active.ant-menu-item-only-child:hover {
-  background-color: var(--sidebar-menu-selected-bg) !important;
-}
-.sider-menu .ant-menu-item-active.ant-menu-item-only-child::before {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 3px;
-  height: 100%;
-  background: var(--sidebar-menu-selected-bar);
-}
-.sider-menu .ant-menu-item-active.ant-menu-item-only-child .ant-menu-title-content {
-  font-weight: var(--font-weight-medium);
-  color: var(--sidebar-primary-text);
-}
-
-/* 선택된 메뉴 아이템 스타일 (selectedKeys로 선택된 경우) */
-.sider-menu .ant-menu-item-selected {
-  background-color: var(--sidebar-menu-selected-bg) !important;
-  color: var(--sidebar-primary-text) !important;
-}
-
-.sider-menu .ant-menu-item-selected::before {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 3px;
-  height: 100%;
-  background: var(--sidebar-menu-selected-bar);
-}
-
-.sider-menu .ant-menu-item-selected .ant-menu-title-content {
-  font-weight: var(--font-weight-medium);
-  color: var(--sidebar-primary-text);
-}
-
-/* 서브메뉴 내부 선택된 아이템 */
-.sider-menu .ant-menu-sub .ant-menu-item-selected {
-  background-color: var(--sidebar-menu-selected-bg) !important;
-  color: var(--sidebar-primary-text) !important;
-}
-
-.sider-menu .ant-menu-sub .ant-menu-item-selected::before {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 3px;
-  height: 100%;
-  background: var(--sidebar-menu-selected-bar);
-}
-
-.sider-menu .ant-menu-sub .ant-menu-item-selected .ant-menu-title-content {
-  font-weight: var(--font-weight-medium);
-  color: var(--sidebar-primary-text);
-}
-
-/* 3레벨 서브메뉴 내부 선택된 아이템 */
-.sider-menu .ant-menu-sub .ant-menu-sub .ant-menu-item-selected {
-  background-color: var(--sidebar-menu-selected-bg) !important;
-  color: var(--sidebar-primary-text) !important;
-}
-
-.sider-menu .ant-menu-sub .ant-menu-sub .ant-menu-item-selected::before {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 3px;
-  height: 100%;
-  background: var(--sidebar-menu-selected-bar);
-}
-
-/* 1레벨 스타일 */
-.sider-menu > .ant-menu-item > .ant-menu-item-icon + span,
-.sider-menu > .ant-menu-submenu > .ant-menu-submenu-title .anticon + span {
-  margin-inline-start: 6px;
-}
-/* 1레벨 활성화 스타일 */
-.ant-layout-sider .sider-menu > .ant-menu-item > .ant-menu-item-icon,
-.ant-layout-sider .sider-menu > .ant-menu-submenu > .ant-menu-submenu-title span.anticon {
-  width: 30px;
-  height: 30px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 5px;
-}
-.ant-layout-sider .sider-menu > .ant-menu-item-active > .ant-menu-item-icon,
-.ant-layout-sider .sider-menu > .ant-menu-submenu-open > .ant-menu-submenu-title span.anticon,
-.ant-layout-sider .sider-menu > .ant-menu-submenu-active > .ant-menu-submenu-title span.anticon {
-  background: var(--sidebar-active-icon-bg);
-  color: var(--primary-color);
-}
-.ant-layout-sider .sider-menu > .ant-menu-item-active > .ant-menu-title-content,
-.ant-layout-sider .sider-menu > .ant-menu-submenu-open > .ant-menu-submenu-title span.ant-menu-title-content,
-.ant-layout-sider .sider-menu > .ant-menu-submenu-active > .ant-menu-submenu-title span.ant-menu-title-content {
-  color: var(--primary-color);
-  font-weight: var(--font-weight-semibold);
-}
-.ant-layout-sider .sider-menu > .ant-menu-submenu-open > .ant-menu-submenu-title {
-  margin-bottom: 5px !important;
-}
-.ant-layout-sider .sider-menu > .ant-menu-item,
-.ant-layout-sider .sider-menu > .ant-menu-submenu {
-  margin-bottom: 15px;
-}
-/* 2레벨 ul 스타일 */
-.ant-layout-sider .sider-menu > .ant-menu-submenu-open > .ant-menu-sub {
-  background-color: var(--sidebar-open-menu-group-bg) !important;
-  border-top: 1px solid var(--sidebar-open-menu-group-border) !important;
-  border-bottom: 1px solid var(--sidebar-open-menu-group-border) !important;
-  padding: 10px 0;
-}
-.ant-layout-sider .sider-menu > .ant-menu-submenu-open > .ant-menu-sub > .ant-menu-submenu-open > .ant-menu-submenu-title {
-  margin-bottom: 5px;
-}
-
-/* 열린 메뉴 상위 텍스트 색상 */
-.ant-menu-submenu-open > .ant-menu-submenu-title .ant-menu-title-content {
-  color: var(--text-high);
-  font-weight: var(--font-weight-semibold);
-}
-
-/* 서브메뉴 내부 모든 요소 배경색 */
-.ant-layout-sider .ant-menu-sub .ant-menu-item,
-.ant-layout-sider .ant-menu-sub .ant-menu-submenu,
-.ant-layout-sider .ant-menu-sub .ant-menu-submenu-title {
-  /* background-color: var(--sidebar-bg) !important; */
-}
-
-/* 메뉴 트리 전체 배경색 강제 적용 */
-.ant-layout-sider .ant-menu-dark .ant-menu-sub,
-.ant-layout-sider .ant-menu-dark .ant-menu-sub .ant-menu-item,
-.ant-layout-sider .ant-menu-dark .ant-menu-sub .ant-menu-submenu,
-.ant-layout-sider .ant-menu-dark .ant-menu-sub .ant-menu-submenu-title {
-  /* background-color: var(--sidebar-bg) !important; */
-  border-radius: 0;
-}
-
-/* 메뉴 레벨별 색상 깊이감 */
-/* 1레벨 메뉴 - 가장 진함 */
-.ant-layout-sider .ant-menu-item,
-.ant-layout-sider .ant-menu-submenu-title {
-  /* color: var(--sidebar-text) !important; */
-  color: var(--text-secondary);
-}
-
-/* 1레벨 active 스타일 */
-.ant-layout-sider .ant-menu-item,
-.ant-layout-sider .ant-menu-submenu-title
-.ant-layout-sider .sider-menu > .ant-menu-submenu-open > .ant-menu-submenu-title span {
-  color: var(--primary-color);
-  &.ant-menu-title-content {
-    font-weight: var(--font-weight-semibold);
-  }
-}
-
-
-/* 2레벨 메뉴*/
-.ant-layout-sider .ant-menu-sub .ant-menu-item,
-.ant-layout-sider .ant-menu-sub .ant-menu-submenu-title {
-  padding-left: 20px !important;
-}
-.ant-layout-sider .ant-menu-sub .ant-menu-item.ant-menu-item-only-child {
-  padding-left: 30px !important;
-}
-/* 3레벨 메뉴*/
-.ant-layout-sider .ant-menu-sub .ant-menu-sub .ant-menu-item,
-.ant-layout-sider .ant-menu-sub .ant-menu-sub .ant-menu-submenu-title {
-  font-size: 13px !important;
-  padding-left: 30px !important;
-}
-
-/* 4레벨 메뉴*/
-.ant-layout-sider .ant-menu-sub .ant-menu-sub .ant-menu-sub .ant-menu-item,
-.ant-layout-sider
-  .ant-menu-sub
-  .ant-menu-sub
-  .ant-menu-sub
-  .ant-menu-submenu-title {
-    font-size: 12px !important;
-    padding-left: 30px !important;
-}
-/* 4레벨 ul 스타일 */
-.ant-layout-sider .ant-menu-sub .ant-menu-sub .ant-menu-submenu-open .ant-menu-sub {
-  /* background: var(--sidebar-last-open-menu-group-bg) !important; */
-}
-
-/* 메뉴 아이콘 색상 */
-.ant-layout-sider .ant-menu-item .anticon,
-.ant-layout-sider .ant-menu-submenu-title .anticon {
-  color: #444 !important;
-}
-
-/* 메뉴 텍스트 색상 */
-.ant-layout-sider .ant-menu-item,
-.ant-layout-sider .ant-menu-submenu-title {
-  color: var(--text-secondary) !important;
-}
-
-/* 메뉴 링크 색상 */
-.ant-layout-sider .ant-menu-item a,
-.ant-layout-sider .ant-menu-submenu-title a {
-  color: var(--sidebar-text) !important;
-}
-
-/* 선택된 메뉴 아이템 */
-.ant-layout-sider .ant-menu-item-selected,
-.ant-layout-sider .ant-menu-item-selected > a {
-  /* color: #6449FC !important; */
-  /* background-color: rgba(255, 255, 255, 0.2) !important; */
-}
-
-/* 호버 상태 - 모든 레벨에 적용 */
-.ant-layout-sider .ant-menu-item:hover,
-.ant-layout-sider .ant-menu-submenu-title:hover {
-  /* color: var(--sidebar-text) !important; */
-  /* background-color: rgba(255, 255, 255, 0.1) !important; */
-}
-/* 호버 상태 - 서브메뉴 텍스트 강조 */
-.ant-layout-sider .ant-menu-submenu:hover > .ant-menu-submenu-title .ant-menu-title-content span,
-.ant-layout-sider .ant-menu-item:hover > .ant-menu-title-content span {
-  font-weight: var(--font-weight-bold);
-} 
-
-/* 서브메뉴 내부 호버 상태 */
-.ant-layout-sider .ant-menu-sub .ant-menu-item:hover,
-.ant-layout-sider .ant-menu-sub .ant-menu-submenu-title:hover {
-  /* color: var(--sidebar-text) !important; */
-  /* background-color: rgba(255, 255, 255, 0.1) !important; */
-}
-
-/* 3레벨 서브메뉴 내부 호버 상태 */
-.ant-layout-sider .ant-menu-sub .ant-menu-sub .ant-menu-item:hover,
-.ant-layout-sider .ant-menu-sub .ant-menu-sub .ant-menu-submenu-title:hover {
-  color: var(--sidebar-primary-text);
-  background-color: var(--sidebar-menu-selected-bg);
-}
-
-/* 4레벨 서브메뉴 내부 호버 상태 */
-.ant-layout-sider
-  .ant-menu-sub
-  .ant-menu-sub
-  .ant-menu-sub
-  .ant-menu-item:hover,
-.ant-layout-sider
-  .ant-menu-sub
-  .ant-menu-sub
-  .ant-menu-sub
-  .ant-menu-submenu-title:hover {
-  color: var(--sidebar-primary-text);
-  background-color: var(--sidebar-menu-selected-bg);
-}
-
-/* 라이트 테마 호버 (어두운 색상) */
-.ant-layout-sider[data-theme='light'] .ant-menu-item:hover,
-.ant-layout-sider[data-theme='light'] .ant-menu-submenu-title:hover,
-.ant-layout-sider[data-theme='light'] .ant-menu-sub .ant-menu-item:hover,
-.ant-layout-sider[data-theme='light']
-  .ant-menu-sub
-  .ant-menu-submenu-title:hover,
-.ant-layout-sider[data-theme='light']
-  .ant-menu-sub
-  .ant-menu-sub
-  .ant-menu-item:hover,
-.ant-layout-sider[data-theme='light']
-  .ant-menu-sub
-  .ant-menu-sub
-  .ant-menu-submenu-title:hover,
-.ant-layout-sider[data-theme='light']
-  .ant-menu-sub
-  .ant-menu-sub
-  .ant-menu-sub
-  .ant-menu-item:hover,
-.ant-layout-sider[data-theme='light']
-  .ant-menu-sub
-  .ant-menu-sub
-  .ant-menu-sub
-  .ant-menu-submenu-title:hover {
-  background-color: rgba(0, 0, 0, 0.1) !important;
-}
-
-/* 모던 테마 호버 (어두운 색상) */
-.ant-layout-sider[data-theme='modern'] .ant-menu-item:hover,
-.ant-layout-sider[data-theme='modern'] .ant-menu-submenu-title:hover,
-.ant-layout-sider[data-theme='modern'] .ant-menu-sub .ant-menu-item:hover,
-.ant-layout-sider[data-theme='modern']
-  .ant-menu-sub
-  .ant-menu-submenu-title:hover,
-.ant-layout-sider[data-theme='modern']
-  .ant-menu-sub
-  .ant-menu-sub
-  .ant-menu-item:hover,
-.ant-layout-sider[data-theme='modern']
-  .ant-menu-sub
-  .ant-menu-sub
-  .ant-menu-submenu-title:hover,
-.ant-layout-sider[data-theme='modern']
-  .ant-menu-sub
-  .ant-menu-sub
-  .ant-menu-sub
-  .ant-menu-item:hover,
-.ant-layout-sider[data-theme='modern']
-  .ant-menu-sub
-  .ant-menu-sub
-  .ant-menu-sub
-  .ant-menu-submenu-title:hover {
-  background-color: rgba(0, 0, 0, 0.1) !important;
-}
-
-/* 메뉴 내부 모든 텍스트 강제 적용 */
-.ant-layout-sider .ant-menu * {
-  /* color: var(--sidebar-text) !important; */
-}
-
-/* 메뉴 아이템 내부 텍스트 */
-.ant-layout-sider .ant-menu-item span,
-.ant-layout-sider .ant-menu-submenu-title span {
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-}
-
-/* 강제로 모든 메뉴 텍스트 색상 적용 */
-.ant-layout-sider .ant-menu-dark .ant-menu-item,
-.ant-layout-sider .ant-menu-dark .ant-menu-submenu-title,
-.ant-layout-sider .ant-menu-dark .ant-menu-item a,
-.ant-layout-sider .ant-menu-dark .ant-menu-submenu-title a,
-.ant-layout-sider .ant-menu-dark .ant-menu-item span,
-.ant-layout-sider .ant-menu-dark .ant-menu-submenu-title span {
-  /* color: var(--sidebar-text) !important; */
-}
-
-/* 선택된 메뉴 아이템 강제 적용 */
-.ant-layout-sider .ant-menu-dark .ant-menu-item-selected,
-.ant-layout-sider .ant-menu-dark .ant-menu-item-selected > a,
-.ant-layout-sider .ant-menu-dark .ant-menu-item-selected > span {
-  /* color: var(--sidebar-text) !important; */
-}
-
-/* 선택된 메뉴 아이템 - 모든 레벨에 적용 */
-.ant-layout-sider .ant-menu-item-selected,
-.ant-layout-sider .ant-menu-item-selected > a {
-  color: var(--sidebar-primary-text);
-  background-color: var(--sidebar-menu-selected-bg);
-}
-
-/* 서브메뉴 내부 선택된 아이템 */
-.ant-layout-sider .ant-menu-sub .ant-menu-item-selected,
-.ant-layout-sider .ant-menu-sub .ant-menu-item-selected > a {
-  color: var(--sidebar-primary-text);
-  background-color: var(--sidebar-menu-selected-bg);
-}
-
-/* 3레벨 서브메뉴 내부 선택된 아이템 */
-.ant-layout-sider .ant-menu-sub .ant-menu-sub .ant-menu-item-selected,
-.ant-layout-sider .ant-menu-sub .ant-menu-sub .ant-menu-item-selected > a {
-  color: var(--sidebar-primary-text);
-  background-color: var(--sidebar-menu-selected-bg);
-}
-
-/* 4레벨 서브메뉴 내부 선택된 아이템 */
-.ant-layout-sider
-  .ant-menu-sub
-  .ant-menu-sub
-  .ant-menu-sub
-  .ant-menu-item-selected,
-.ant-layout-sider
-  .ant-menu-sub
-  .ant-menu-sub
-  .ant-menu-sub
-  .ant-menu-item-selected
-  > a {
-  color: var(--sidebar-primary-text);
-  background-color: var(--sidebar-menu-selected-bg);
-}
-
-/* 메뉴 하위 레이아웃 변경 */
-.sider-content .sider-menu > .ant-menu-item:not(.ant-menu-submenu-vertical) {
-  padding-left: 10px !important;
-}
-.sider-content .sider-menu > .ant-menu-submenu:not(.ant-menu-submenu-vertical) > .ant-menu-submenu-title {
-  margin-bottom: 15px;
-  padding-left: 10px !important;
-}
-
-/* 3~4레벨 텍스트 꾸밈 요소 */
-.sider-content .sider-menu .ant-menu-title-content {
-  height: 100%;
-  line-height: 30px;
-  overflow: visible !important;
-}
-.sider-content .sider-menu .ant-menu-item.ant-menu-item-only-child .ant-menu-title-content > div {
-  position: relative;
-}
-.sider-content .sider-menu .ant-menu-item.ant-menu-item-only-child .ant-menu-title-content > div::before {
-  content: '';
-  position: absolute;
-  top: 50%;
-  left: -10px;
-  width: 4px;
-  height: 1px;
-  background-color: var(--sidebar-menu-bullet);
-}
-
-
-.sider-content .sider-menu .ant-menu-item-active.ant-menu-item-only-child .ant-menu-title-content > div::before {
-    background-color: var(--sidebar-menu-bullet-active);  
-}
-
-/* 사이드바 축소 스타일 */
-.sider-menu .ant-menu-submenu-vertical .ant-menu-submenu-title {
-  padding: 0 10px !important;
-  margin-bottom: 15px;
-}
-.sider-menu .ant-menu-submenu-vertical .ant-menu-submenu-title:hover {
-  background-color: transparent !important;  
-}
-.sider-menu .ant-menu-submenu-vertical .ant-menu-submenu-title[aria-expanded="true"] .anticon {
-  background: var(--sidebar-active-icon-bg);
-  color: var(--primary-color) !important;
-}
-
-/* 사이드바 segemented */
-.sider-segmented .ant-segmented-item-label {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 5px;
-}
-.sider-segmented .sider-segmented-item {
-  width: 20px;
-  height: 20px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-}
-
-/* 라이트 테마 선택된 아이템 (어두운 색상) */
-.ant-layout-sider[data-theme='light'] .ant-menu-item-selected,
-.ant-layout-sider[data-theme='light'] .ant-menu-item-selected > a,
-.ant-layout-sider[data-theme='light'] .ant-menu-sub .ant-menu-item-selected,
-.ant-layout-sider[data-theme='light'] .ant-menu-sub .ant-menu-item-selected > a,
-.ant-layout-sider[data-theme='light']
-  .ant-menu-sub
-  .ant-menu-sub
-  .ant-menu-item-selected,
-.ant-layout-sider[data-theme='light']
-  .ant-menu-sub
-  .ant-menu-sub
-  .ant-menu-item-selected
-  > a,
-.ant-layout-sider[data-theme='light']
-  .ant-menu-sub
-  .ant-menu-sub
-  .ant-menu-sub
-  .ant-menu-item-selected,
-.ant-layout-sider[data-theme='light']
-  .ant-menu-sub
-  .ant-menu-sub
-  .ant-menu-sub
-  .ant-menu-item-selected
-  > a {
-  background-color: rgba(0, 0, 0, 0.2) !important;
-}
-
-/* 모던 테마 선택된 아이템 (어두운 색상) */
-.ant-layout-sider[data-theme='modern'] .ant-menu-item-selected,
-.ant-layout-sider[data-theme='modern'] .ant-menu-item-selected > a,
-.ant-layout-sider[data-theme='modern'] .ant-menu-sub .ant-menu-item-selected,
-.ant-layout-sider[data-theme='modern']
-  .ant-menu-sub
-  .ant-menu-item-selected
-  > a,
-.ant-layout-sider[data-theme='modern']
-  .ant-menu-sub
-  .ant-menu-sub
-  .ant-menu-item-selected,
-.ant-layout-sider[data-theme='modern']
-  .ant-menu-sub
-  .ant-menu-sub
-  .ant-menu-item-selected
-  > a,
-.ant-layout-sider[data-theme='modern']
-  .ant-menu-sub
-  .ant-menu-sub
-  .ant-menu-sub
-  .ant-menu-item-selected,
-.ant-layout-sider[data-theme='modern']
-  .ant-menu-sub
-  .ant-menu-sub
-  .ant-menu-sub
-  .ant-menu-item-selected
-  > a {
-  background-color: rgba(0, 0, 0, 0.2) !important;
-}
-
-/* 사이드바 스크롤바 스타일링 */
-.sider-menu::-webkit-scrollbar,
-.sider-menu-container::-webkit-scrollbar {
-  width: 6px;
-}
-.sider-menu::-webkit-scrollbar-track,
-.sider-menu-container::-webkit-scrollbar-track {
-  background: transparent;
-  border-radius: 3px;
-}
-.sider-menu::-webkit-scrollbar-thumb,
-.sider-menu-container::-webkit-scrollbar-thumb {
-  background: #d9d9d9;
-  border-radius: 3px;
-  border: 1px solid #f0f0f0;
-}
-.sider-menu::-webkit-scrollbar-thumb:hover,
-.sider-menu-container::-webkit-scrollbar-thumb:hover {
-  background: #bfbfbf;
-}
-
-/* Firefox 스크롤바 스타일링 */
-.sider-menu {
-  scrollbar-width: thin;
-  scrollbar-color: #d9d9d9 #f0f0f0;
-}
-
-/* 컨텐츠 컨테이너 스타일 */
-.content-container {
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-  overflow: hidden;
-  height: calc(100vh - 50px); /* 헤더 높이를 제외 */
-}
-
-/* 컨텐츠 스타일 */
-.main-content {
-  flex: 1;
-  height: calc(100vh - 45px);
-}
-.content-header {
-  margin-bottom: 24px;
-  padding-bottom: 16px;
-  border-bottom: 1px solid #f0f0f0;
-}
-.content-title {
-  font-size: 24px;
-  font-weight: 600;
-  color: var(--text-primary);
-  margin: 0;
-}
-.content-description {
-  color: #666;
-  margin-top: 8px;
-}
-.content-body {
-  height: 100%;
-}
-.bwg-view {
-  gap: 20px;
-  padding: 20px 30px;
-}
-
-/* 반응형 디자인 */
-@media (max-width: 768px) {
-  .side-wrapper {
-    height: 100vh;
-    z-index: 1001;
-    transition: left 0.3s ease;
-  }
-  .side-wrapper.mobile-open {
-    left: 0;
-  }
-  .header-wrapper {
-    padding: 0 16px;
-    gap: 12px;
-  }
-  .header-search {
-    width: 200px;
-  }
-  .header-search .ant-auto-complete {
-    width: 100% !important;
-  }
-  .header-title {
-    font-size: var(--font-size-md);
-    flex: 1;
-    text-align: center;
-  }
-  .header-right {
-    gap: 8px;
-  }
-}
-
-/* MenuTab 전용 스타일링 */
-.menu-tab-wrapper {
-  background: var(--bg-primary);
-}
-.menu-tab-wrapper .menu-tabs.ant-tabs .ant-tabs-nav {
-  margin: 0;
-  padding: 10px 34px 0 29px;
-  height: 45px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-.menu-tab-wrapper .ant-tabs-nav::before {
-  left: 29px;
-  bottom: 0;
-  border-bottom: 1px solid var(--border-color);
-}
-.menu-tab-wrapper .menu-tabs.ant-tabs .ant-tabs-nav-wrap {
-  height: 35px;
-  flex: 1 !important;
-  align-items: flex-end;
-}
-.menu-tab-wrapper .menu-tabs.ant-tabs .ant-tabs-nav-list {
-  display: flex;
-  align-items: center;
-  height: 100%;
-  flex-wrap: nowrap;
-}
-.menu-tab-wrapper .menu-tabs.ant-tabs .ant-tabs-tab {
-  height: 100%;
-  border-radius: 10px 10px 0 0;
-  transition: all 0.3s ease;
-  padding: 0 10px 0 24px;
-  position: relative ;
-  background: #E7E9F4;
-  margin: 0 4px 0 0;
-  font-size: var(--font-size-sm);
-  color: #777;
-  border: 0;
-}
-.menu-tab-wrapper .menu-tabs.ant-tabs .ant-tabs-tab .ant-tabs-tab-remove {
-  width: 20px;
-  height: 20px;
-  margin-right: 0;
-  margin-left: 10px;
-  color: #a1a1a1;
-}
-.menu-tab-wrapper .menu-tabs.ant-tabs .ant-tabs-tab:not(.ant-tabs-tab-active):hover {
-  background: #dbdeec;
-  color: var(--text-secondary);
-}
-.menu-tab-wrapper .menu-tabs.ant-tabs .ant-tabs-tab-active {
-  background: var(--bg-primary);
-  border: 2px solid var(--primary-color);
-  border-bottom: none;
- .ant-tabs-tab-btn {
-  color:var(--primary-color);
-  text-shadow: none;
-  font-weight: var(--font-weight-bold);
- }
-}
-/* MenuTab의 content-holder는 숨김 처리 (뷰 렌더링하지 않음) */
-.menu-tab-wrapper .menu-tabs.ant-tabs .ant-tabs-content-holder {
-  display: none !important;
-}
-
-/* MenuTab 네비게이션 버튼 스타일링 */
-.menu-tab-wrapper .menu-tabs .ant-tabs-extra-content {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  flex-shrink: 0;
-  white-space: nowrap;
-  overflow: hidden;
-  padding-bottom: 13px;
-}
-.menu-tab-wrapper .menu-tabs .ant-tabs-extra-content > div {
-  display: flex !important;
-  align-items: center !important;
-  gap: 4px !important;
-  flex-wrap: nowrap !important;
-}
-.menu-tab-wrapper .menu-tabs .ant-tabs-extra-content .ant-btn {
-  height: 20px !important;
-  width: 20px !important;
-  font-size: 12px !important;
-  display: flex !important;
-  align-items: center !important;
-  justify-content: center !important;
-  border: 0;
-  color: #bdbdbd;
-  box-shadow: none !important;
-}
-.menu-tab-wrapper .menu-tabs .ant-tabs-extra-content .ant-btn:hover {
-  color: #5E5E5E;
-}
-.menu-tab-wrapper .menu-tabs .ant-tabs-extra-content .ant-btn:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-  background: none;
-}
-.menu-tab-wrapper .menu-tabs .ant-tabs-extra-content .menu-tabs-close-btn {
-  margin-left: 11px;
-}
-.menu-nav-wrapper {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-}
-
-/* landing-wrap */
-.landing-wrap {
-  background: #f3f5f9;
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  z-index: 4;
-  right: 0;
-  left: 0;
-  background: url('./assets/images/backgrounds/landing_bg.png') no-repeat;
-  background-size: cover;
-}
-.landing-wrap .content-tit {
-  position: absolute;
-  top: 51%;
-  left: 50.6%;
-  transform: translate(-50%, -50.6%);
-  padding-top: 20px;
-  color: #9c9d9e;
-  font-size: var(--font-size-xl);
-}
-.landing-wrap .content-tit:before {
-  position: absolute;
-  top: 0;
-  left: 50%;
-  display: inline-block;
-  width: 19px;
-  height: 1px;
-  background: #9c9d9e;
-  content: '';
-  transform: translateX(-50%);
-}
-/* 20210316수정 end */
-.landing-wrap .inner {
-  position: relative;
-  height: 100%;
-  min-height: 600px;
-}
-.landing-wrap .page-tit {
-  position: absolute;
-  left: 3%;
-  bottom: 26%;
-  color: #6688ff;
-  font-size: 60px;
-  font-family: 'Poppins', sans-serif;
-}
-.landing-wrap .sub-tit {
-  position: absolute;
-  left: 3%;
-  bottom: 16%;
-  color: rgba(255, 255, 255, 0.7);
-  font-size: var(--font-size-xl);
-  line-height: 28px;
-  letter-spacing: -0.2px;
-  font-family: 'Poppins', sans-serif;
-  font-weight: 300;
-}
-.landing-wrap .content {
-  font-family: 'Poppins', sans-serif;
-  display: flex;
-  position: absolute;
-  line-height: 0;
-  bottom: 16%;
-  padding: 20px 22px;
-  width: 480px;
-  box-sizing: border-box;
-  background: rgba(255, 255, 255, 0.05);
-  right: 2%;
-  border-radius: var(--border-radius-xxxl);
-  backdrop-filter: blur(8px);
-}
-.landing-wrap .content dl {
-  position: relative;
-  width: 100%;
-  text-align: left;
-  box-sizing: border-box;
-}
-.landing-wrap .content dt {
-  margin-bottom: 10px;
-  padding-bottom: 10px;
-  color: var(--text-white);
-  font-size: 24px;
-  line-height: initial;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
-  padding-left: 9px;
-}
-.landing-wrap .content dd {
-  line-height: 20px;
-  color: var(--text-white);
-  font-size: 18px !important;
-  font-weight: var(--font-weight-regular);
-  letter-spacing: 0;
-  padding-top: 6px;
-}
-.landing-wrap .content dd span {
-  display: block;
-  padding: 6px 0 6px 40px;
-  position: relative;
-}
-.landing-wrap .content dd span:before {
-  display: block;
-  content: '';
-  left: 9px;
-  position: absolute;
-  top: 5px;
-  width: 20px;
-  height: 20px;
-  background: url(../images/common.png) no-repeat;
-  background-position: -78px -177px;
-}
-.landing-wrap .content dd span + span:before {
-  background-position: -100px -177px;
-}
-
-/* 사이드바 토글 버튼 */
-.sider-toggle-wrapper {
-  position: absolute;
-  top: 9px;
-  right: -25px;
-  z-index: 1000;
-  width: 25px;
-  height: 41px;
-  background-color: #ffffff;
-  border: 1px solid #dddddd;
-  border-radius: 0 10px 10px 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.05);
-  transition: all 0.3s ease;
-}
-
-.sider-toggle-btn .ant-btn {
-  border-radius: 0 10px 10px 0;
-  font-size: 12px;
-  color: #787878;
-  padding: 0;
-  width: 100%;
-  height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-/* 퀵메뉴 */
-.quick-tab-container {
-  width: 33px;
-  height: 118px;
-  background: #4C465D;
-  border-radius: 15px 0px 0px 15px;
-  box-shadow: 0 4px 4px rgba(61, 56, 98, 0.3);
-}
-.quick-tab-container:has(.expanded) {
-  background: var(--primary-color);
-}
-.ant-btn.quick-tab-toggle-btn {
-  width: 33px;
-  height: 67px;
-  margin: 11px 0 9px;
-  border-radius: 15px 0px 0px 15px;
-  position: absolute;
-  top: 0;
-  right: 0;
-  cursor: pointer;
-  background-image: url(./assets/images/contents/icon/quick-tab-text.svg);
-  background-repeat: no-repeat;
-  background-position: center;
-}
-.ant-btn.quick-tab-toggle-btn:not(.ant-btn-disabled):hover,
-.ant-btn.quick-tab-toggle-btn:not(.ant-btn-disabled):active {
-  background-image: url(./assets/images/contents/icon/quick-tab-text.svg);
-  background-repeat: no-repeat;
-  background-position: center;
-  background-color: transparent !important;
-}
-.quick-tab-drag-btn {
-  position: absolute;
-  bottom: 9px;
-  right: 3px;
-  width: 24px;
-  height: 24px;
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: transparent url(./assets/images/contents/icon/ico-quick-tab-move.svg) no-repeat center;
-}
-.quick-tab-drag-btn:hover {
-  background: rgba(28, 24, 37, 0.2) url(./assets/images/contents/icon/ico-quick-tab-move.svg) no-repeat center;
-}
-.quick-tab-container .quick-tab {
-  background-color: var(--primary-color);
-}
-.quick-tab-item-inner {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  border-radius: var(--border-radius-lg);
-  text-align: center;
-}
-.quick-tab-item-inner .quick-tab-items-icon {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-.quick-tab-item-inner .quick-tab-items-icon .anticon {
-  font-size: 28px;
-}
-.quick-tab-item-inner .quick-tab-items:last-child {
-  margin-bottom: 0;
-}
-.quick-tab-items-icon:has(.quick-overtime) {
-  background: #EFEBFF;
-}
-.quick-tab-items-icon:has(.quick-business-trip) {
-  background: #E3F6FF;
-}
-.quick-tab-items-icon:has(.quick-holiday) {
-  background: #FFF0F5;
-}
-.quick-tab-items-title {
-  font-size: 13px;
-  font-weight: var(--font-weight-semibold);
-  line-height: 16px;
-  word-break: keep-all;
-  color: var(--text-primary);
-}
-.quick-tab-add-icon {
-  width: 30px;
-  height: 30px;
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-.quick-tab-add-icon:hover {
-  background: rgb(28 ,24 ,37 , 0.2);
-}
-/* 퀵메뉴 스크롤 스타일 */
-.quick-tab-items-wrap::-webkit-scrollbar {
-  width: 4px;
-}
-.quick-tab-items-wrap::-webkit-scrollbar-track {
-  background: transparent;
-  border-radius: 3px;
-}
-.quick-tab-items-wrap::-webkit-scrollbar-thumb {
-  background: #d9d9d9;
-  border-radius: 3px;
-  border: 1px solid #f0f0f0;
-}
-.quick-tab-items-wrap::-webkit-scrollbar-thumb:hover {
-  background: #bfbfbf;
-}
-
-/* 잠금화면 */
-.lockscreen-form {
-  text-align: center;
-}
-.lockscreen-form .lock-icon-wrap {
-  width: 100%;
-  height: 70px;
-  margin-bottom: 15px;
-}
-.lockscreen-form .lock-icon-box {
-  display: inline-block;
-  width: 70px;
-  height: 70px;
-  border-radius: 15px;
-  background: #fff url(./assets/images/contents/icon/ico-lockscreen.svg) no-repeat center;
-  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
-}
-.lockscreen-form h2 {
-  margin-bottom: 10px;
-  font-size: 30px;
-  color: #fff;
-}
-.lockscreen-form p {
-  margin-bottom: 40px;
-  font-size: 16px;
-  color: #E2E2E2; 
-}
-.lock-ipt-wrap .ant-otp {
-  column-gap: 20px
-}
-.lock-ipt-wrap .ant-otp .ant-otp-mask-input {
-  width: 44px;
-  height: 44px;
-  border-radius: 50px;
-  opacity: .5;
-}
-.lock-ipt-wrap .ant-otp .ant-otp-mask-input:hover,
-.lock-ipt-wrap .ant-otp .ant-otp-mask-input:focus,
-.lock-ipt-wrap .ant-otp .ant-otp-mask-input:focus-within {
-  border-color: #6449fc;
-  box-shadow: 0 0 0 2px rgb(205 196 255 / 10%);
-}
-
-.bwg-load-indicator { position: absolute !important; inset: 0 !important; z-index: 40; }
-
-/* ────────────────────── 로딩 오버레이 (WAVE 스타일) ────────────────────── */
-.bwg-load-indicator { background: none !important; background-color: rgba(255,255,255,.6) !important; backdrop-filter: blur(2px); display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 12px; text-align: center; }
-.bwg-load-indicator .bwg-load-wave { display: flex; align-items: flex-end; gap: 15px; height: 18px; }
-.bwg-load-indicator .bwg-load-wave span { width: 20px; height: 20px; border-radius: 50%; background: linear-gradient(180deg, #8bb1ff 0%, #a88bff 100%); box-shadow: 0 1px 2px rgba(0,0,0,.1); animation: rg-bounceY 900ms ease-in-out infinite; }
-.bwg-load-indicator .bwg-load-wave span:nth-child(2) { animation-delay: 120ms; }
-.bwg-load-indicator .bwg-load-wave span:nth-child(3) { animation-delay: 240ms; }
-@keyframes rg-bounceY { 0%, 100% { transform: translateY(0); } 30% { transform: translateY(-8px); } 60% { transform: translateY(0); } }
-.bwg-load-indicator .bwg-load-title { font-weight: 700; letter-spacing: .06em; font-size: 16px; color: #3b3b3b; }
-.bwg-load-indicator .bwg-load-sub { font-size: 13px; color: #7a7a7a; }
-
+/* 메인 레이아웃 스타일 */
+.main-layout {
+  min-height: 100vh;
+  overflow: hidden;
+  min-width: 1280px;
+}
+
+/* 헤더 스타일 */
+.header-wrapper {
+  height: 50px !important;
+  line-height: 50px !important;
+  background: var(--header-bg);
+  padding: 0 30px 0 20px;
+  border-bottom: 1px solid var(--border-color);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  z-index: 1000;
+  gap: 24px;
+  color: var(--header-text);
+}
+
+.header-search {
+  flex-shrink: 0;
+}
+
+.header-title {
+  font-size: 18px;
+  font-weight: var(--font-weight-semibold);
+  color: var(--text-primary);
+  flex: 1;
+  text-align: center;
+}
+
+/* 헤더 로고 영역 */
+.header-left {
+  display: flex;
+  align-items: center;
+  min-width: 200px;
+}
+
+.logo-container {
+  display: flex;
+  align-items: center;
+  height: 100%;
+  gap: 10px;
+}
+
+.header-logo-image {
+  width: 81px;
+  height: 40px;
+  object-fit: contain;
+}
+
+.logo-placeholder {
+  font-size: 18px;
+  font-weight: var(--font-weight-bold);
+  color: var(--header-text);
+  padding: 8px 12px;
+  border: 2px dashed var(--header-text);
+  border-radius: var(--border-radius-sm);
+  opacity: 0.7;
+}
+
+
+/* 헤더 타이틀 영역 */
+.header-title {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: var(--font-size-md);
+  font-weight: var(--font-weight-medium);
+  color: var(--header-text);
+}
+
+/* 헤더 사용자 영역 */
+.header-right {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  min-width: 200px;
+  justify-content: flex-end;
+}
+
+.header-wrapper .ant-btn {
+  width: 30px;
+  height: 30px;
+}
+
+
+/* 사이더 스타일 */
+.side-wrapper {
+  height: calc(100vh - 50px); /* 헤더 높이(50px)를 제외 */
+  overflow: visible; /* 토글 버튼이 짤리지 않도록 visible로 변경 */
+  display: flex;
+  flex-direction: column;
+  background-color: var(--sidebar-bg) !important;
+  position: relative; /* 토글 버튼의 absolute 포지셔닝을 위해 */
+  border-right: 1px solid var(--border-color);
+}
+
+.sider-content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.sider-menu {
+  border-inline-end: none !important;
+  flex: 1;
+  overflow-y: auto; /* 필요할 때만 스크롤바 표시 */
+  overflow-x: hidden;
+  max-height: calc(100vh - 160px); /* 헤더(50px) + 로고 높이 + 마진 고려 */
+  padding-right: 0px !important; /* 스크롤바 너비만큼 여백 확보 */
+  box-sizing: border-box; /* 패딩을 포함한 박스 모델 */
+}
+.sider-menu.ant-menu-inline-collapsed  {
+  max-height: calc(100vh - 50px);
+}
+.sider-segmented {
+  padding: 5px;
+  background-color: var(--sidebar-segmented-bg);
+  border-radius: var(--border-radius-sm);
+  font-size: 13px;
+  color: var(--sidebar-segmented-text);
+}
+.sider-search-ipt {
+  background: var(--sidebar-search-bg);
+  border-radius: var(--border-radius-xl);
+  border: 0;
+  color: var(--sidebar-search-text);
+  font-size: 13px;
+  font-weight: var(--font-weight-medium);
+}
+.sider-segmented .ant-segmented-group {
+  gap: 5px;
+}
+
+/* Ant Design 메뉴 스타일 오버라이드 */
+
+.sider-menu .ant-menu-item {
+  height: 30px;
+  transition: all 0.3s ease;
+}
+
+.sider-menu .ant-menu-submenu-title {
+  height: 30px !important;
+  line-height: 30px !important;
+}
+
+.sider-menu .ant-menu-submenu-title:hover {
+  background-color: unset !important;
+}
+
+/* 사이드바 테마 적용 */
+.ant-layout-sider {
+  background-color: var(--sidebar-bg);
+}
+.ant-layout-sider-collapsed {
+  flex: 0 0 50px !important;
+  max-width: 50px !important;
+  min-width: 50px !important;
+  width: 50px !important;
+  padding: 10px 0;
+}
+
+.ant-menu-dark {
+  background-color: var(--sidebar-bg);
+}
+
+/* 사이드바 메뉴 트리 전체 테마 적용 */
+.ant-layout-sider .ant-menu {
+  background-color: var(--sidebar-bg);
+}
+
+.ant-layout-sider .ant-menu-submenu {
+  border-radius: 0;
+  margin: 0;
+  width: 100%;
+}
+
+.ant-layout-sider .ant-menu-item {
+  /* background-color: var(--sidebar-bg) !important; */
+  /* color: var(--sidebar-text) !important; */
+}
+
+.ant-layout-sider .ant-menu-item:hover {
+  background-color: unset !important;
+}
+
+/* .sider-menu가 아닌 경우에만 배경색 제거 (기존 스타일 유지) */
+.ant-layout-sider .ant-menu-item-selected {
+  background-color: unset !important;
+}
+
+.ant-layout-sider .ant-menu-submenu-title:hover {
+  background-color: unset !important;
+}
+
+.ant-layout-sider .ant-menu-submenu-open > .ant-menu-submenu-title {
+  /* background-color: rgba(255, 255, 255, 0.15) !important; */
+}
+
+.ant-layout-sider .ant-menu-sub.ant-menu-inline {
+  background: transparent !important;
+}
+/* 메뉴 공통 스타일 */
+.sider-menu .ant-menu-item,
+.sider-menu .ant-menu-submenu-title {
+  margin: 0;
+  width: 100%;
+  border-radius: 0;
+}
+.sider-menu .ant-menu-item-active.ant-menu-item-only-child {
+  background-color: var(--sidebar-menu-selected-bg);
+}
+.sider-menu .ant-menu-item-active.ant-menu-item-only-child:hover {
+  background-color: var(--sidebar-menu-selected-bg) !important;
+}
+.sider-menu .ant-menu-item-active.ant-menu-item-only-child::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 3px;
+  height: 100%;
+  background: var(--sidebar-menu-selected-bar);
+}
+.sider-menu .ant-menu-item-active.ant-menu-item-only-child .ant-menu-title-content {
+  font-weight: var(--font-weight-medium);
+  color: var(--sidebar-primary-text);
+}
+
+/* 선택된 메뉴 아이템 스타일 (selectedKeys로 선택된 경우) */
+.sider-menu .ant-menu-item-selected {
+  background-color: var(--sidebar-menu-selected-bg) !important;
+  color: var(--sidebar-primary-text) !important;
+}
+
+.sider-menu .ant-menu-item-selected::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 3px;
+  height: 100%;
+  background: var(--sidebar-menu-selected-bar);
+}
+
+.sider-menu .ant-menu-item-selected .ant-menu-title-content {
+  font-weight: var(--font-weight-medium);
+  color: var(--sidebar-primary-text);
+}
+
+/* 서브메뉴 내부 선택된 아이템 */
+.sider-menu .ant-menu-sub .ant-menu-item-selected {
+  background-color: var(--sidebar-menu-selected-bg) !important;
+  color: var(--sidebar-primary-text) !important;
+}
+
+.sider-menu .ant-menu-sub .ant-menu-item-selected::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 3px;
+  height: 100%;
+  background: var(--sidebar-menu-selected-bar);
+}
+
+.sider-menu .ant-menu-sub .ant-menu-item-selected .ant-menu-title-content {
+  font-weight: var(--font-weight-medium);
+  color: var(--sidebar-primary-text);
+}
+
+/* 3레벨 서브메뉴 내부 선택된 아이템 */
+.sider-menu .ant-menu-sub .ant-menu-sub .ant-menu-item-selected {
+  background-color: var(--sidebar-menu-selected-bg) !important;
+  color: var(--sidebar-primary-text) !important;
+}
+
+.sider-menu .ant-menu-sub .ant-menu-sub .ant-menu-item-selected::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 3px;
+  height: 100%;
+  background: var(--sidebar-menu-selected-bar);
+}
+
+/* 1레벨 스타일 */
+.sider-menu > .ant-menu-item > .ant-menu-item-icon + span,
+.sider-menu > .ant-menu-submenu > .ant-menu-submenu-title .anticon + span {
+  margin-inline-start: 6px;
+}
+/* 1레벨 활성화 스타일 */
+.ant-layout-sider .sider-menu > .ant-menu-item > .ant-menu-item-icon,
+.ant-layout-sider .sider-menu > .ant-menu-submenu > .ant-menu-submenu-title span.anticon {
+  width: 30px;
+  height: 30px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 5px;
+}
+.ant-layout-sider .sider-menu > .ant-menu-item-active > .ant-menu-item-icon,
+.ant-layout-sider .sider-menu > .ant-menu-submenu-open > .ant-menu-submenu-title span.anticon,
+.ant-layout-sider .sider-menu > .ant-menu-submenu-active > .ant-menu-submenu-title span.anticon {
+  background: var(--sidebar-active-icon-bg);
+  color: var(--primary-color);
+}
+.ant-layout-sider .sider-menu > .ant-menu-item-active > .ant-menu-title-content,
+.ant-layout-sider .sider-menu > .ant-menu-submenu-open > .ant-menu-submenu-title span.ant-menu-title-content,
+.ant-layout-sider .sider-menu > .ant-menu-submenu-active > .ant-menu-submenu-title span.ant-menu-title-content {
+  color: var(--primary-color);
+  font-weight: var(--font-weight-semibold);
+}
+.ant-layout-sider .sider-menu > .ant-menu-submenu-open > .ant-menu-submenu-title {
+  margin-bottom: 5px !important;
+}
+.ant-layout-sider .sider-menu > .ant-menu-item,
+.ant-layout-sider .sider-menu > .ant-menu-submenu {
+  margin-bottom: 15px;
+}
+/* 2레벨 ul 스타일 */
+.ant-layout-sider .sider-menu > .ant-menu-submenu-open > .ant-menu-sub {
+  background-color: var(--sidebar-open-menu-group-bg) !important;
+  border-top: 1px solid var(--sidebar-open-menu-group-border) !important;
+  border-bottom: 1px solid var(--sidebar-open-menu-group-border) !important;
+  padding: 10px 0;
+}
+.ant-layout-sider .sider-menu > .ant-menu-submenu-open > .ant-menu-sub > .ant-menu-submenu-open > .ant-menu-submenu-title {
+  margin-bottom: 5px;
+}
+
+/* 열린 메뉴 상위 텍스트 색상 */
+.ant-menu-submenu-open > .ant-menu-submenu-title .ant-menu-title-content {
+  color: var(--text-high);
+  font-weight: var(--font-weight-semibold);
+}
+
+/* 서브메뉴 내부 모든 요소 배경색 */
+.ant-layout-sider .ant-menu-sub .ant-menu-item,
+.ant-layout-sider .ant-menu-sub .ant-menu-submenu,
+.ant-layout-sider .ant-menu-sub .ant-menu-submenu-title {
+  /* background-color: var(--sidebar-bg) !important; */
+}
+
+/* 메뉴 트리 전체 배경색 강제 적용 */
+.ant-layout-sider .ant-menu-dark .ant-menu-sub,
+.ant-layout-sider .ant-menu-dark .ant-menu-sub .ant-menu-item,
+.ant-layout-sider .ant-menu-dark .ant-menu-sub .ant-menu-submenu,
+.ant-layout-sider .ant-menu-dark .ant-menu-sub .ant-menu-submenu-title {
+  /* background-color: var(--sidebar-bg) !important; */
+  border-radius: 0;
+}
+
+/* 메뉴 레벨별 색상 깊이감 */
+/* 1레벨 메뉴 - 가장 진함 */
+.ant-layout-sider .ant-menu-item,
+.ant-layout-sider .ant-menu-submenu-title {
+  /* color: var(--sidebar-text) !important; */
+  color: var(--text-secondary);
+}
+
+/* 1레벨 active 스타일 */
+.ant-layout-sider .ant-menu-item,
+.ant-layout-sider .ant-menu-submenu-title
+.ant-layout-sider .sider-menu > .ant-menu-submenu-open > .ant-menu-submenu-title span {
+  color: var(--primary-color);
+  &.ant-menu-title-content {
+    font-weight: var(--font-weight-semibold);
+  }
+}
+
+
+/* 2레벨 메뉴*/
+.ant-layout-sider .ant-menu-sub .ant-menu-item,
+.ant-layout-sider .ant-menu-sub .ant-menu-submenu-title {
+  padding-left: 20px !important;
+}
+.ant-layout-sider .ant-menu-sub .ant-menu-item.ant-menu-item-only-child {
+  padding-left: 30px !important;
+}
+/* 3레벨 메뉴*/
+.ant-layout-sider .ant-menu-sub .ant-menu-sub .ant-menu-item,
+.ant-layout-sider .ant-menu-sub .ant-menu-sub .ant-menu-submenu-title {
+  font-size: 13px !important;
+  padding-left: 30px !important;
+}
+
+/* 4레벨 메뉴*/
+.ant-layout-sider .ant-menu-sub .ant-menu-sub .ant-menu-sub .ant-menu-item,
+.ant-layout-sider
+  .ant-menu-sub
+  .ant-menu-sub
+  .ant-menu-sub
+  .ant-menu-submenu-title {
+    font-size: 12px !important;
+    padding-left: 30px !important;
+}
+/* 4레벨 ul 스타일 */
+.ant-layout-sider .ant-menu-sub .ant-menu-sub .ant-menu-submenu-open .ant-menu-sub {
+  /* background: var(--sidebar-last-open-menu-group-bg) !important; */
+}
+
+/* 메뉴 아이콘 색상 */
+.ant-layout-sider .ant-menu-item .anticon,
+.ant-layout-sider .ant-menu-submenu-title .anticon {
+  color: #444 !important;
+}
+
+/* 메뉴 텍스트 색상 */
+.ant-layout-sider .ant-menu-item,
+.ant-layout-sider .ant-menu-submenu-title {
+  color: var(--text-secondary) !important;
+}
+
+/* 메뉴 링크 색상 */
+.ant-layout-sider .ant-menu-item a,
+.ant-layout-sider .ant-menu-submenu-title a {
+  color: var(--sidebar-text) !important;
+}
+
+/* 선택된 메뉴 아이템 */
+.ant-layout-sider .ant-menu-item-selected,
+.ant-layout-sider .ant-menu-item-selected > a {
+  /* color: #6449FC !important; */
+  /* background-color: rgba(255, 255, 255, 0.2) !important; */
+}
+
+/* 호버 상태 - 모든 레벨에 적용 */
+.ant-layout-sider .ant-menu-item:hover,
+.ant-layout-sider .ant-menu-submenu-title:hover {
+  /* color: var(--sidebar-text) !important; */
+  /* background-color: rgba(255, 255, 255, 0.1) !important; */
+}
+/* 호버 상태 - 서브메뉴 텍스트 강조 */
+.ant-layout-sider .ant-menu-submenu:hover > .ant-menu-submenu-title .ant-menu-title-content span,
+.ant-layout-sider .ant-menu-item:hover > .ant-menu-title-content span {
+  font-weight: var(--font-weight-bold);
+} 
+
+/* 서브메뉴 내부 호버 상태 */
+.ant-layout-sider .ant-menu-sub .ant-menu-item:hover,
+.ant-layout-sider .ant-menu-sub .ant-menu-submenu-title:hover {
+  /* color: var(--sidebar-text) !important; */
+  /* background-color: rgba(255, 255, 255, 0.1) !important; */
+}
+
+/* 3레벨 서브메뉴 내부 호버 상태 */
+.ant-layout-sider .ant-menu-sub .ant-menu-sub .ant-menu-item:hover,
+.ant-layout-sider .ant-menu-sub .ant-menu-sub .ant-menu-submenu-title:hover {
+  color: var(--sidebar-primary-text);
+  background-color: var(--sidebar-menu-selected-bg);
+}
+
+/* 4레벨 서브메뉴 내부 호버 상태 */
+.ant-layout-sider
+  .ant-menu-sub
+  .ant-menu-sub
+  .ant-menu-sub
+  .ant-menu-item:hover,
+.ant-layout-sider
+  .ant-menu-sub
+  .ant-menu-sub
+  .ant-menu-sub
+  .ant-menu-submenu-title:hover {
+  color: var(--sidebar-primary-text);
+  background-color: var(--sidebar-menu-selected-bg);
+}
+
+/* 라이트 테마 호버 (어두운 색상) */
+.ant-layout-sider[data-theme='light'] .ant-menu-item:hover,
+.ant-layout-sider[data-theme='light'] .ant-menu-submenu-title:hover,
+.ant-layout-sider[data-theme='light'] .ant-menu-sub .ant-menu-item:hover,
+.ant-layout-sider[data-theme='light']
+  .ant-menu-sub
+  .ant-menu-submenu-title:hover,
+.ant-layout-sider[data-theme='light']
+  .ant-menu-sub
+  .ant-menu-sub
+  .ant-menu-item:hover,
+.ant-layout-sider[data-theme='light']
+  .ant-menu-sub
+  .ant-menu-sub
+  .ant-menu-submenu-title:hover,
+.ant-layout-sider[data-theme='light']
+  .ant-menu-sub
+  .ant-menu-sub
+  .ant-menu-sub
+  .ant-menu-item:hover,
+.ant-layout-sider[data-theme='light']
+  .ant-menu-sub
+  .ant-menu-sub
+  .ant-menu-sub
+  .ant-menu-submenu-title:hover {
+  background-color: rgba(0, 0, 0, 0.1) !important;
+}
+
+/* 모던 테마 호버 (어두운 색상) */
+.ant-layout-sider[data-theme='modern'] .ant-menu-item:hover,
+.ant-layout-sider[data-theme='modern'] .ant-menu-submenu-title:hover,
+.ant-layout-sider[data-theme='modern'] .ant-menu-sub .ant-menu-item:hover,
+.ant-layout-sider[data-theme='modern']
+  .ant-menu-sub
+  .ant-menu-submenu-title:hover,
+.ant-layout-sider[data-theme='modern']
+  .ant-menu-sub
+  .ant-menu-sub
+  .ant-menu-item:hover,
+.ant-layout-sider[data-theme='modern']
+  .ant-menu-sub
+  .ant-menu-sub
+  .ant-menu-submenu-title:hover,
+.ant-layout-sider[data-theme='modern']
+  .ant-menu-sub
+  .ant-menu-sub
+  .ant-menu-sub
+  .ant-menu-item:hover,
+.ant-layout-sider[data-theme='modern']
+  .ant-menu-sub
+  .ant-menu-sub
+  .ant-menu-sub
+  .ant-menu-submenu-title:hover {
+  background-color: rgba(0, 0, 0, 0.1) !important;
+}
+
+/* 메뉴 내부 모든 텍스트 강제 적용 */
+.ant-layout-sider .ant-menu * {
+  /* color: var(--sidebar-text) !important; */
+}
+
+/* 메뉴 아이템 내부 텍스트 */
+.ant-layout-sider .ant-menu-item span,
+.ant-layout-sider .ant-menu-submenu-title span {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+/* 강제로 모든 메뉴 텍스트 색상 적용 */
+.ant-layout-sider .ant-menu-dark .ant-menu-item,
+.ant-layout-sider .ant-menu-dark .ant-menu-submenu-title,
+.ant-layout-sider .ant-menu-dark .ant-menu-item a,
+.ant-layout-sider .ant-menu-dark .ant-menu-submenu-title a,
+.ant-layout-sider .ant-menu-dark .ant-menu-item span,
+.ant-layout-sider .ant-menu-dark .ant-menu-submenu-title span {
+  /* color: var(--sidebar-text) !important; */
+}
+
+/* 선택된 메뉴 아이템 강제 적용 */
+.ant-layout-sider .ant-menu-dark .ant-menu-item-selected,
+.ant-layout-sider .ant-menu-dark .ant-menu-item-selected > a,
+.ant-layout-sider .ant-menu-dark .ant-menu-item-selected > span {
+  /* color: var(--sidebar-text) !important; */
+}
+
+/* 선택된 메뉴 아이템 - 모든 레벨에 적용 */
+.ant-layout-sider .ant-menu-item-selected,
+.ant-layout-sider .ant-menu-item-selected > a {
+  color: var(--sidebar-primary-text);
+  background-color: var(--sidebar-menu-selected-bg);
+}
+
+/* 서브메뉴 내부 선택된 아이템 */
+.ant-layout-sider .ant-menu-sub .ant-menu-item-selected,
+.ant-layout-sider .ant-menu-sub .ant-menu-item-selected > a {
+  color: var(--sidebar-primary-text);
+  background-color: var(--sidebar-menu-selected-bg);
+}
+
+/* 3레벨 서브메뉴 내부 선택된 아이템 */
+.ant-layout-sider .ant-menu-sub .ant-menu-sub .ant-menu-item-selected,
+.ant-layout-sider .ant-menu-sub .ant-menu-sub .ant-menu-item-selected > a {
+  color: var(--sidebar-primary-text);
+  background-color: var(--sidebar-menu-selected-bg);
+}
+
+/* 4레벨 서브메뉴 내부 선택된 아이템 */
+.ant-layout-sider
+  .ant-menu-sub
+  .ant-menu-sub
+  .ant-menu-sub
+  .ant-menu-item-selected,
+.ant-layout-sider
+  .ant-menu-sub
+  .ant-menu-sub
+  .ant-menu-sub
+  .ant-menu-item-selected
+  > a {
+  color: var(--sidebar-primary-text);
+  background-color: var(--sidebar-menu-selected-bg);
+}
+
+/* 메뉴 하위 레이아웃 변경 */
+.sider-content .sider-menu > .ant-menu-item:not(.ant-menu-submenu-vertical) {
+  padding-left: 10px !important;
+}
+.sider-content .sider-menu > .ant-menu-submenu:not(.ant-menu-submenu-vertical) > .ant-menu-submenu-title {
+  margin-bottom: 15px;
+  padding-left: 10px !important;
+}
+
+/* 3~4레벨 텍스트 꾸밈 요소 */
+.sider-content .sider-menu .ant-menu-title-content {
+  height: 100%;
+  line-height: 30px;
+  overflow: visible !important;
+}
+.sider-content .sider-menu .ant-menu-item.ant-menu-item-only-child .ant-menu-title-content > div {
+  position: relative;
+}
+.sider-content .sider-menu .ant-menu-item.ant-menu-item-only-child .ant-menu-title-content > div::before {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: -10px;
+  width: 4px;
+  height: 1px;
+  background-color: var(--sidebar-menu-bullet);
+}
+
+
+.sider-content .sider-menu .ant-menu-item-active.ant-menu-item-only-child .ant-menu-title-content > div::before {
+    background-color: var(--sidebar-menu-bullet-active);  
+}
+
+/* 사이드바 축소 스타일 */
+.sider-menu .ant-menu-submenu-vertical .ant-menu-submenu-title {
+  padding: 0 10px !important;
+  margin-bottom: 15px;
+}
+.sider-menu .ant-menu-submenu-vertical .ant-menu-submenu-title:hover {
+  background-color: transparent !important;  
+}
+.sider-menu .ant-menu-submenu-vertical .ant-menu-submenu-title[aria-expanded="true"] .anticon {
+  background: var(--sidebar-active-icon-bg);
+  color: var(--primary-color) !important;
+}
+
+/* 사이드바 segemented */
+.sider-segmented .ant-segmented-item-label {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 5px;
+}
+.sider-segmented .sider-segmented-item {
+  width: 20px;
+  height: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+/* 라이트 테마 선택된 아이템 (어두운 색상) */
+.ant-layout-sider[data-theme='light'] .ant-menu-item-selected,
+.ant-layout-sider[data-theme='light'] .ant-menu-item-selected > a,
+.ant-layout-sider[data-theme='light'] .ant-menu-sub .ant-menu-item-selected,
+.ant-layout-sider[data-theme='light'] .ant-menu-sub .ant-menu-item-selected > a,
+.ant-layout-sider[data-theme='light']
+  .ant-menu-sub
+  .ant-menu-sub
+  .ant-menu-item-selected,
+.ant-layout-sider[data-theme='light']
+  .ant-menu-sub
+  .ant-menu-sub
+  .ant-menu-item-selected
+  > a,
+.ant-layout-sider[data-theme='light']
+  .ant-menu-sub
+  .ant-menu-sub
+  .ant-menu-sub
+  .ant-menu-item-selected,
+.ant-layout-sider[data-theme='light']
+  .ant-menu-sub
+  .ant-menu-sub
+  .ant-menu-sub
+  .ant-menu-item-selected
+  > a {
+  background-color: rgba(0, 0, 0, 0.2) !important;
+}
+
+/* 모던 테마 선택된 아이템 (어두운 색상) */
+.ant-layout-sider[data-theme='modern'] .ant-menu-item-selected,
+.ant-layout-sider[data-theme='modern'] .ant-menu-item-selected > a,
+.ant-layout-sider[data-theme='modern'] .ant-menu-sub .ant-menu-item-selected,
+.ant-layout-sider[data-theme='modern']
+  .ant-menu-sub
+  .ant-menu-item-selected
+  > a,
+.ant-layout-sider[data-theme='modern']
+  .ant-menu-sub
+  .ant-menu-sub
+  .ant-menu-item-selected,
+.ant-layout-sider[data-theme='modern']
+  .ant-menu-sub
+  .ant-menu-sub
+  .ant-menu-item-selected
+  > a,
+.ant-layout-sider[data-theme='modern']
+  .ant-menu-sub
+  .ant-menu-sub
+  .ant-menu-sub
+  .ant-menu-item-selected,
+.ant-layout-sider[data-theme='modern']
+  .ant-menu-sub
+  .ant-menu-sub
+  .ant-menu-sub
+  .ant-menu-item-selected
+  > a {
+  background-color: rgba(0, 0, 0, 0.2) !important;
+}
+
+/* 사이드바 스크롤바 스타일링 */
+.sider-menu::-webkit-scrollbar,
+.sider-menu-container::-webkit-scrollbar {
+  width: 6px;
+}
+.sider-menu::-webkit-scrollbar-track,
+.sider-menu-container::-webkit-scrollbar-track {
+  background: transparent;
+  border-radius: 3px;
+}
+.sider-menu::-webkit-scrollbar-thumb,
+.sider-menu-container::-webkit-scrollbar-thumb {
+  background: #d9d9d9;
+  border-radius: 3px;
+  border: 1px solid #f0f0f0;
+}
+.sider-menu::-webkit-scrollbar-thumb:hover,
+.sider-menu-container::-webkit-scrollbar-thumb:hover {
+  background: #bfbfbf;
+}
+
+/* Firefox 스크롤바 스타일링 */
+.sider-menu {
+  scrollbar-width: thin;
+  scrollbar-color: #d9d9d9 #f0f0f0;
+}
+
+/* 컨텐츠 컨테이너 스타일 */
+.content-container {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  overflow: hidden;
+  height: calc(100vh - 50px); /* 헤더 높이를 제외 */
+}
+
+/* 컨텐츠 스타일 */
+.main-content {
+  flex: 1;
+  height: calc(100vh - 45px);
+}
+.content-header {
+  margin-bottom: 24px;
+  padding-bottom: 16px;
+  border-bottom: 1px solid #f0f0f0;
+}
+.content-title {
+  font-size: 24px;
+  font-weight: 600;
+  color: var(--text-primary);
+  margin: 0;
+}
+.content-description {
+  color: #666;
+  margin-top: 8px;
+}
+.content-body {
+  height: 100%;
+}
+.bwg-view {
+  gap: 20px;
+  padding: 20px 30px;
+}
+
+/* 반응형 디자인 */
+@media (max-width: 768px) {
+  .side-wrapper {
+    height: 100vh;
+    z-index: 1001;
+    transition: left 0.3s ease;
+  }
+  .side-wrapper.mobile-open {
+    left: 0;
+  }
+  .header-wrapper {
+    padding: 0 16px;
+    gap: 12px;
+  }
+  .header-search {
+    width: 200px;
+  }
+  .header-search .ant-auto-complete {
+    width: 100% !important;
+  }
+  .header-title {
+    font-size: var(--font-size-md);
+    flex: 1;
+    text-align: center;
+  }
+  .header-right {
+    gap: 8px;
+  }
+}
+
+/* MenuTab 전용 스타일링 */
+.menu-tab-wrapper {
+  background: var(--bg-primary);
+}
+.menu-tab-wrapper .menu-tabs.ant-tabs .ant-tabs-nav {
+  margin: 0;
+  padding: 10px 34px 0 29px;
+  height: 45px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.menu-tab-wrapper .ant-tabs-nav::before {
+  left: 29px;
+  bottom: 0;
+  border-bottom: 1px solid var(--border-color);
+}
+.menu-tab-wrapper .menu-tabs.ant-tabs .ant-tabs-nav-wrap {
+  height: 35px;
+  flex: 1 !important;
+  align-items: flex-end;
+}
+.menu-tab-wrapper .menu-tabs.ant-tabs .ant-tabs-nav-list {
+  display: flex;
+  align-items: center;
+  height: 100%;
+  flex-wrap: nowrap;
+}
+.menu-tab-wrapper .menu-tabs.ant-tabs .ant-tabs-tab {
+  height: 100%;
+  border-radius: 10px 10px 0 0;
+  transition: all 0.3s ease;
+  padding: 0 10px 0 24px;
+  position: relative ;
+  background: #E7E9F4;
+  margin: 0 4px 0 0;
+  font-size: var(--font-size-sm);
+  color: #777;
+  border: 0;
+}
+.menu-tab-wrapper .menu-tabs.ant-tabs .ant-tabs-tab .ant-tabs-tab-remove {
+  width: 20px;
+  height: 20px;
+  margin-right: 0;
+  margin-left: 10px;
+  color: #a1a1a1;
+}
+.menu-tab-wrapper .menu-tabs.ant-tabs .ant-tabs-tab:not(.ant-tabs-tab-active):hover {
+  background: #dbdeec;
+  color: var(--text-secondary);
+}
+.menu-tab-wrapper .menu-tabs.ant-tabs .ant-tabs-tab-active {
+  background: var(--bg-primary);
+  border: 2px solid var(--primary-color);
+  border-bottom: none;
+ .ant-tabs-tab-btn {
+  color:var(--primary-color);
+  text-shadow: none;
+  font-weight: var(--font-weight-bold);
+ }
+}
+/* MenuTab의 content-holder는 숨김 처리 (뷰 렌더링하지 않음) */
+.menu-tab-wrapper .menu-tabs.ant-tabs .ant-tabs-content-holder {
+  display: none !important;
+}
+
+/* MenuTab 네비게이션 버튼 스타일링 */
+.menu-tab-wrapper .menu-tabs .ant-tabs-extra-content {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  flex-shrink: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  padding-bottom: 13px;
+}
+.menu-tab-wrapper .menu-tabs .ant-tabs-extra-content > div {
+  display: flex !important;
+  align-items: center !important;
+  gap: 4px !important;
+  flex-wrap: nowrap !important;
+}
+.menu-tab-wrapper .menu-tabs .ant-tabs-extra-content .ant-btn {
+  height: 20px !important;
+  width: 20px !important;
+  font-size: 12px !important;
+  display: flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+  border: 0;
+  color: #bdbdbd;
+  box-shadow: none !important;
+}
+.menu-tab-wrapper .menu-tabs .ant-tabs-extra-content .ant-btn:hover {
+  color: #5E5E5E;
+}
+.menu-tab-wrapper .menu-tabs .ant-tabs-extra-content .ant-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  background: none;
+}
+.menu-tab-wrapper .menu-tabs .ant-tabs-extra-content .menu-tabs-close-btn {
+  margin-left: 11px;
+}
+.menu-nav-wrapper {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+/* MenuTab - 데이터용 화면 */
+.menu-tab-wrapper .menu-tabs .ant-tabs-tab.tab-special {
+  height: calc(100% - 5px);
+  max-width: 200px;
+  margin: 2px 4px 3px 0px;
+  border-radius: 6px;
+  border: 1px solid #e7e9f4;
+  background: #e7e9f4;
+  padding: 0px 5px 0px 8px;
+}
+.menu-tab-wrapper .menu-tabs .tab-special.ant-tabs-tab-active {
+  height: calc(100% - 5px);
+  max-width: 200px;
+  margin: 2px 4px 3px 0px;
+  border-radius: 6px;
+  border: 1px solid #73c5ff;
+  background: #edf7ff;
+  padding: 0px 5px 0px 8px;
+}
+.menu-tab-wrapper .menu-tabs .tab-special .ant-tabs-tab-btn {
+  position: relative;
+  color: #567491 ;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  padding-left: 23px;
+}
+.menu-tab-wrapper .menu-tabs .tab-special.ant-tabs-tab-active .ant-tabs-tab-btn {
+  position: relative;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  padding-left: 23px;
+  color: #1D92FF;
+  text-shadow: none;
+  font-weight: var(--font-weight-bold);
+}
+.menu-tab-wrapper .menu-tabs .tab-special .ant-tabs-tab-btn::before {
+  content: '';
+  position: absolute;
+  width: 18px;
+  height: 18px;
+  top: 2px;
+  left: 0;
+  background: url(./assets/images/contents/icon/ico-tab-hashtag-grey.svg) no-repeat center;
+}
+.menu-tab-wrapper .menu-tabs .tab-special.ant-tabs-tab-active .ant-tabs-tab-btn::before {
+  content: '';
+  position: absolute;
+  width: 18px;
+  height: 18px;
+  top: 2px;
+  left: 0;
+  background: url(./assets/images/contents/icon/ico-tab-hashtag.svg) no-repeat center;
+}
+
+/* landing-wrap */
+.landing-wrap {
+  background: #f3f5f9;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  z-index: 4;
+  right: 0;
+  left: 0;
+  background: url('./assets/images/backgrounds/landing_bg.png') no-repeat;
+  background-size: cover;
+}
+.landing-wrap .content-tit {
+  position: absolute;
+  top: 51%;
+  left: 50.6%;
+  transform: translate(-50%, -50.6%);
+  padding-top: 20px;
+  color: #9c9d9e;
+  font-size: var(--font-size-xl);
+}
+.landing-wrap .content-tit:before {
+  position: absolute;
+  top: 0;
+  left: 50%;
+  display: inline-block;
+  width: 19px;
+  height: 1px;
+  background: #9c9d9e;
+  content: '';
+  transform: translateX(-50%);
+}
+/* 20210316수정 end */
+.landing-wrap .inner {
+  position: relative;
+  height: 100%;
+  min-height: 600px;
+}
+.landing-wrap .page-tit {
+  position: absolute;
+  left: 3%;
+  bottom: 26%;
+  color: #6688ff;
+  font-size: 60px;
+  font-family: 'Poppins', sans-serif;
+}
+.landing-wrap .sub-tit {
+  position: absolute;
+  left: 3%;
+  bottom: 16%;
+  color: rgba(255, 255, 255, 0.7);
+  font-size: var(--font-size-xl);
+  line-height: 28px;
+  letter-spacing: -0.2px;
+  font-family: 'Poppins', sans-serif;
+  font-weight: 300;
+}
+.landing-wrap .content {
+  font-family: 'Poppins', sans-serif;
+  display: flex;
+  position: absolute;
+  line-height: 0;
+  bottom: 16%;
+  padding: 20px 22px;
+  width: 480px;
+  box-sizing: border-box;
+  background: rgba(255, 255, 255, 0.05);
+  right: 2%;
+  border-radius: var(--border-radius-xxxl);
+  backdrop-filter: blur(8px);
+}
+.landing-wrap .content dl {
+  position: relative;
+  width: 100%;
+  text-align: left;
+  box-sizing: border-box;
+}
+.landing-wrap .content dt {
+  margin-bottom: 10px;
+  padding-bottom: 10px;
+  color: var(--text-white);
+  font-size: 24px;
+  line-height: initial;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
+  padding-left: 9px;
+}
+.landing-wrap .content dd {
+  line-height: 20px;
+  color: var(--text-white);
+  font-size: 18px !important;
+  font-weight: var(--font-weight-regular);
+  letter-spacing: 0;
+  padding-top: 6px;
+}
+.landing-wrap .content dd span {
+  display: block;
+  padding: 6px 0 6px 40px;
+  position: relative;
+}
+.landing-wrap .content dd span:before {
+  display: block;
+  content: '';
+  left: 9px;
+  position: absolute;
+  top: 5px;
+  width: 20px;
+  height: 20px;
+  background: url(../images/common.png) no-repeat;
+  background-position: -78px -177px;
+}
+.landing-wrap .content dd span + span:before {
+  background-position: -100px -177px;
+}
+
+/* 사이드바 토글 버튼 */
+.sider-toggle-wrapper {
+  position: absolute;
+  top: 9px;
+  right: -25px;
+  z-index: 1000;
+  width: 25px;
+  height: 41px;
+  background-color: #ffffff;
+  border: 1px solid #dddddd;
+  border-radius: 0 10px 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.05);
+  transition: all 0.3s ease;
+}
+
+.sider-toggle-btn .ant-btn {
+  border-radius: 0 10px 10px 0;
+  font-size: 12px;
+  color: #787878;
+  padding: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* 퀵메뉴 */
+.quick-tab-container {
+  width: 33px;
+  height: 118px;
+  background: #4C465D;
+  border-radius: 15px 0px 0px 15px;
+  box-shadow: 0 4px 4px rgba(61, 56, 98, 0.3);
+}
+.quick-tab-container:has(.expanded) {
+  background: var(--primary-color);
+}
+.ant-btn.quick-tab-toggle-btn {
+  width: 33px;
+  height: 67px;
+  margin: 11px 0 9px;
+  border-radius: 15px 0px 0px 15px;
+  position: absolute;
+  top: 0;
+  right: 0;
+  cursor: pointer;
+  background-image: url(./assets/images/contents/icon/quick-tab-text.svg);
+  background-repeat: no-repeat;
+  background-position: center;
+}
+.ant-btn.quick-tab-toggle-btn:not(.ant-btn-disabled):hover,
+.ant-btn.quick-tab-toggle-btn:not(.ant-btn-disabled):active {
+  background-image: url(./assets/images/contents/icon/quick-tab-text.svg);
+  background-repeat: no-repeat;
+  background-position: center;
+  background-color: transparent !important;
+}
+.quick-tab-drag-btn {
+  position: absolute;
+  bottom: 9px;
+  right: 3px;
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: transparent url(./assets/images/contents/icon/ico-quick-tab-move.svg) no-repeat center;
+}
+.quick-tab-drag-btn:hover {
+  background: rgba(28, 24, 37, 0.2) url(./assets/images/contents/icon/ico-quick-tab-move.svg) no-repeat center;
+}
+.quick-tab-container .quick-tab {
+  background-color: var(--primary-color);
+}
+.quick-tab-item-inner {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  border-radius: var(--border-radius-lg);
+  text-align: center;
+}
+.quick-tab-item-inner .quick-tab-items-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.quick-tab-item-inner .quick-tab-items-icon .anticon {
+  font-size: 28px;
+}
+.quick-tab-item-inner .quick-tab-items:last-child {
+  margin-bottom: 0;
+}
+.quick-tab-items-icon:has(.quick-overtime) {
+  background: #EFEBFF;
+}
+.quick-tab-items-icon:has(.quick-business-trip) {
+  background: #E3F6FF;
+}
+.quick-tab-items-icon:has(.quick-holiday) {
+  background: #FFF0F5;
+}
+.quick-tab-items-title {
+  font-size: 13px;
+  font-weight: var(--font-weight-semibold);
+  line-height: 16px;
+  word-break: keep-all;
+  color: var(--text-primary);
+}
+.quick-tab-add-icon {
+  width: 30px;
+  height: 30px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.quick-tab-add-icon:hover {
+  background: rgb(28 ,24 ,37 , 0.2);
+}
+/* 퀵메뉴 스크롤 스타일 */
+.quick-tab-items-wrap::-webkit-scrollbar {
+  width: 4px;
+}
+.quick-tab-items-wrap::-webkit-scrollbar-track {
+  background: transparent;
+  border-radius: 3px;
+}
+.quick-tab-items-wrap::-webkit-scrollbar-thumb {
+  background: #d9d9d9;
+  border-radius: 3px;
+  border: 1px solid #f0f0f0;
+}
+.quick-tab-items-wrap::-webkit-scrollbar-thumb:hover {
+  background: #bfbfbf;
+}
+
+/* 잠금화면 */
+.lockscreen-form {
+  text-align: center;
+}
+.lockscreen-form .lock-icon-wrap {
+  width: 100%;
+  height: 70px;
+  margin-bottom: 15px;
+}
+.lockscreen-form .lock-icon-box {
+  display: inline-block;
+  width: 70px;
+  height: 70px;
+  border-radius: 15px;
+  background: #fff url(./assets/images/contents/icon/ico-lockscreen.svg) no-repeat center;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
+}
+.lockscreen-form h2 {
+  margin-bottom: 10px;
+  font-size: 30px;
+  color: #fff;
+}
+.lockscreen-form p {
+  margin-bottom: 40px;
+  font-size: 16px;
+  color: #E2E2E2; 
+}
+.lock-ipt-wrap .ant-otp {
+  column-gap: 20px
+}
+.lock-ipt-wrap .ant-otp .ant-otp-mask-input {
+  width: 44px;
+  height: 44px;
+  border-radius: 50px;
+  opacity: .5;
+}
+.lock-ipt-wrap .ant-otp .ant-otp-mask-input:hover,
+.lock-ipt-wrap .ant-otp .ant-otp-mask-input:focus,
+.lock-ipt-wrap .ant-otp .ant-otp-mask-input:focus-within {
+  border-color: #6449fc;
+  box-shadow: 0 0 0 2px rgb(205 196 255 / 10%);
+}
+
+.bwg-load-indicator { position: absolute !important; inset: 0 !important; z-index: 40; }
+
+/* ────────────────────── 로딩 오버레이 (WAVE 스타일) ────────────────────── */
+.bwg-load-indicator { background: none !important; background-color: rgba(255,255,255,.6) !important; backdrop-filter: blur(2px); display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 12px; text-align: center; }
+.bwg-load-indicator .bwg-load-wave { display: flex; align-items: flex-end; gap: 15px; height: 18px; }
+.bwg-load-indicator .bwg-load-wave span { width: 20px; height: 20px; border-radius: 50%; background: linear-gradient(180deg, #8bb1ff 0%, #a88bff 100%); box-shadow: 0 1px 2px rgba(0,0,0,.1); animation: rg-bounceY 900ms ease-in-out infinite; }
+.bwg-load-indicator .bwg-load-wave span:nth-child(2) { animation-delay: 120ms; }
+.bwg-load-indicator .bwg-load-wave span:nth-child(3) { animation-delay: 240ms; }
+@keyframes rg-bounceY { 0%, 100% { transform: translateY(0); } 30% { transform: translateY(-8px); } 60% { transform: translateY(0); } }
+.bwg-load-indicator .bwg-load-title { font-weight: 700; letter-spacing: .06em; font-size: 16px; color: #3b3b3b; }
+.bwg-load-indicator .bwg-load-sub { font-size: 13px; color: #7a7a7a; }
+