/* flexBox */
.flexBox {display: flex;}
._between {justify-content: space-between;}
._between-center {justify-content: space-between; align-items: center;}
._all-center {justify-content: center; align-items: center;}
._align-center {align-items: center;}
._alignStart {align-items: flex-start;}
._alignEnd {align-items: flex-end;}
._flexEnd {justify-content: flex-end;}
._wrap {flex-wrap: wrap;}
._column {flex-direction: column;}
.flex {display: flex;}
.flex1 {flex:1;}
.flex2 {flex:2;}
.flex3 {flex:3;}
.flexShrink0 {flex-shrink: 0;}
.flexAuto {flex:auto;}

/* basicBox */
.basicBox {padding: 16px 24px; background: #fff; border-radius: 4px; border: 1px solid #d9d9d9;}
.basicBox.pbAll12 {padding: 12px;}

/* navbar-container */
.header {position: fixed; left: 260px; top: 0; width: calc(100% - 260px); height: 60px; padding: 0 24px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #E7E7E7; background: #fff; z-index: 101;}

.side-menu {position: fixed; left: 0; top: 0; z-index: 103; height: 100%; width: 260px; padding: 24px 24px; display: flex; flex-direction: column; justify-content: space-between; border-right: 1px solid #E7E7E7; background: #fff;}
.logo-box .logo-text {color:#812B27; font-size: 24px; font-weight: 700;}
.side-menu-list .menu-section {padding: 12px 0; border-bottom: 1px solid #ddd;}
.side-menu-list .menu-box {display: flex; align-items: center; font-size: 18px; padding: 12px; border-radius: 8px; color: #555; cursor: pointer;}
.side-menu-list .menu-box .material-symbols-outlined {margin-right: 8px; font-size: 20px;}
.side-menu-list .section-title {font-size: 14px; font-weight: 500; color:#812B27; margin-bottom: 8px;}
.side-menu-list .menu-box .badge {display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 24px; background: #ddd; color: #fff; font-size: 14px;}

.side-menu-list .menu-box:hover, .side-menu-list .menu-box.active {background: linear-gradient(29deg, rgba(129,43,39,1) 50%, rgba(87,4,0,1) 100%); color: #fff; font-weight: 500;}
.side-menu-list .menu-box:hover .badge, .side-menu-list .menu-box.active .badge {background: rgba(255,255,255,0.2);}

.side-menu-info {background: #FBFAFA; padding: 16px; opacity: 1; transition: all 0.3s;}

.side-menu .close-btn {width: 30px; height: 30px; border-radius: 30px; background: #812B27; color: #fff; display: flex; align-items: center; justify-content: center; position: absolute; right: -15px; top: 15px; z-index: 2; cursor: pointer;}
.navbar-container.close .side-menu .close-btn {transform: rotate(180deg);}

.navbar-container.close .side-menu .section-title, .navbar-container.close .side-menu .menu-box .menu-txt, .navbar-container.close .side-menu .menu-box .badge, .navbar-container.close .side-menu .side-menu-info {display: none;}
.navbar-container.close .side-menu .logo-box a {visibility: hidden;}
.navbar-container.close .side-menu-info {opacity: 0; width: 0; height: 0; visibility: hidden;}
.navbar-container.close .side-menu .menu-box .material-symbols-outlined {margin-right: 0;}
.navbar-container.close .side-menu {padding: 24px 12px; width: 68px; transition: all 0.2s;}
.navbar-container.close .header {width: calc(100% - 68px); left: 68px; transition: all 0.2s;}

@media screen and (max-width: 1760px) {
  .side-menu {width: 220px; padding: 24px 16px;}
  .header {left: 220px; width: calc(100% - 220px);}
  .side-menu-list .menu-box {font-size: 16px;}

}

/* 하위 계정 이메일 오버레이 */
/* 화면 전체를 덮는 오버레이 */
#loading-overlay {position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 1050; display: flex; justify-content: center; align-items: center; }

/* 로딩 스피너 */
.loading-spinner {border: 4px solid rgba(255, 255, 255, 0.3); border-top: 4px solid #000000; border-radius: 50%; width: 40px; height: 40px; animation: spin 1s linear infinite;}


/* 스피너 애니메이션 */
@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* 계정 수정 버튼 디자인 */
.sub-pop-buttons { bottom: 0;    position: absolute; left: 0;width: 100%;background-color: white;padding: 16px 20px;box-sizing: border-box;}