@bwg-ui/core 1.0.0

package/dist/styles/layout.css

@@ -0,0 +1,1132 @@
+/* 메인 레이아웃 스타일 */
+.main-layout {
+  min-height: 100vh;
+  overflow: hidden;
+}
+
+/* 헤더 스타일 */
+.main-header {
+  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-user {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+}
+.header-user .ant-btn:hover {
+  background: none;
+}
+.header-user-info {
+  font-size: 14px;
+  color: #666;
+}
+.header-logout {
+  cursor: pointer;
+}
+.header-avatar {
+  width: 30px;
+  height: 30px;
+}
+
+
+/* 헤더 로고 영역 */
+.header-logo {
+  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-user {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  min-width: 200px;
+  justify-content: flex-end;
+}
+
+.main-header .ant-btn {
+  width: 30px;
+  height: 30px;
+}
+
+
+/* 사이더 스타일 */
+.main-sider {
+  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-logo {
+  height: var(--sidebar-logo-height);
+  margin: var(--spacing-md);
+  background: var(--bg-secondary);
+  color: var(--text-primary);
+  text-align: center;
+  line-height: var(--sidebar-logo-height);
+  font-weight: bold;
+  font-size: var(--font-size-lg);
+  border-radius: var(--border-radius-md);
+  transition: var(--transition-normal);
+  box-shadow: var(--shadow-light);
+}
+
+.sider-logo:hover {
+  background: var(--bg-tertiary);
+  transform: scale(1.05);
+} */
+
+.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: #777;
+  .ant-segmented-group {
+    gap: 5px;
+  }
+  .ant-segmented-item-selected {
+    color: var(--text-high);
+    font-weight: var(--font-weight-semibold);
+  }
+}
+.sider-search-ipt {
+  background: #F8F8F8;
+  border-radius: var(--border-radius-xl);
+  border: 0;
+  color: #8B8B8B;
+  font-size: 13px;
+  font-weight: var(--font-weight-medium);
+    .anticon-search svg {
+    width: 20px;
+    height: 20px;
+  }
+}
+/* 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) !important;
+}
+.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) !important;
+}
+
+/* 사이드바 메뉴 트리 전체 테마 적용 */
+.ant-layout-sider .ant-menu {
+  /* background-color: var(--sidebar-bg) !important; */
+}
+
+.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;
+}
+
+.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-active-bg);
+  &:hover {
+    background-color: var(--sidebar-menu-active-bg) !important;
+  }
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 3px;
+    height: 100%;
+    background: #5954FC;
+  }
+  .ant-menu-title-content {
+    font-weight: var(--font-weight-medium);
+    color: var(--sidebar-primary-text);
+  }
+}
+/* 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(--border-color) !important;
+  border-bottom: 1px solid var(--border-color) !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: 54px !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: 81px !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: 13px !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-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-active-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-active-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-active-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-active-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-active-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-active-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;
+  &::before {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: -19px;
+    width: 6px;
+    height: 1px;
+    background-color: #B1AEC4;
+  }
+}
+.sider-content .sider-menu .ant-menu-item-active.ant-menu-item-only-child .ant-menu-title-content > div::before {
+    background-color: var(--sidebar-primary-text);  
+}
+
+/* 사이드바 축소 스타일 */
+.sider-menu .ant-menu-submenu-vertical .ant-menu-submenu-title {
+  padding: 0 10px !important;
+  margin-bottom: 15px;
+  &:hover {
+    background-color: transparent !important;
+  }
+  &[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-icon {
+  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;
+  overflow: auto;
+  height: calc(100vh - 120px); /* 헤더(64px) + MenuTab(48px) + 마진 고려 */
+}
+
+.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 26px;
+}
+
+/* 반응형 디자인 */
+@media (max-width: 768px) {
+  .main-sider {
+    position: fixed;
+    height: 100vh;
+    z-index: 1001;
+    left: -200px;
+    transition: left 0.3s ease;
+  }
+
+  .main-sider.mobile-open {
+    left: 0;
+  }
+
+  .main-content {
+    margin: 16px 8px;
+  }
+
+  .main-header {
+    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-user {
+    gap: 8px;
+  }
+
+  .header-user-info {
+    font-size: var(--font-size-xs);
+  }
+}
+
+/* MenuTab 전용 스타일링 */
+.menu-nav-container {
+  background: var(--bg-primary);
+}
+
+.menu-nav-container .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-nav-container .ant-tabs-nav::before {
+  left: 29px;
+  bottom: 0;
+  border-bottom: 1px solid var(--border-color);
+}
+.menu-nav-container .menu-tabs.ant-tabs .ant-tabs-nav-wrap {
+  height: 35px;
+  flex: 1 !important;
+  align-items: flex-end;
+}
+
+.menu-nav-container .menu-tabs.ant-tabs .ant-tabs-nav-list {
+  display: flex;
+  align-items: center;
+  height: 100%;
+  flex-wrap: nowrap;
+}
+
+.menu-nav-container .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;
+  .ant-tabs-tab-remove {
+    width: 20px;
+    height: 20px;
+    margin-right: 0;
+    margin-left: 10px;
+    color: #A1A1A1;
+  }
+}
+
+.menu-nav-container .menu-tabs.ant-tabs .ant-tabs-tab:hover {
+  background: #dbdeec;
+  color: var(--text-secondary);
+}
+
+.menu-nav-container .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-nav-container .menu-tabs.ant-tabs .ant-tabs-content-holder {
+  display: none !important;
+}
+
+/* MenuTab 네비게이션 버튼 스타일링 */
+.menu-nav-container .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-nav-container .menu-tabs .ant-tabs-extra-content > div {
+  display: flex !important;
+  align-items: center !important;
+  gap: 4px !important;
+  flex-wrap: nowrap !important;
+}
+
+.menu-nav-container .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-nav-container .menu-tabs .ant-tabs-extra-content .ant-btn:hover {
+  color: #5E5E5E;
+}
+
+.menu-nav-container .menu-tabs .ant-tabs-extra-content .ant-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  background: none;
+}
+
+.menu-nav-container .menu-tabs .ant-tabs-extra-content .menu-tabs-close-btn {
+  margin-left: 11px;
+}
+
+/* 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-btn {
+  border-radius: 0 10px 10px 0;
+  .ant-btn {
+      border-radius: 0 10px 10px 0;
+  }
+}
+
+/* 퀵메뉴 */
+.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-item-inner {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  border-radius: var(--border-radius-lg);
+  text-align: center;
+  
+  .quick-tab-items-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .quick-tab-items-icon .anticon {
+    font-size: 28px;
+  }
+  .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);
+}