.header--main{display:flex;flex-direction:row;align-items:center;background-color:var(---color-white);border-bottom:1px solid var(---color-board-light);padding:var(---rem-px-20) var(---rem-px-26);gap:var(---rem-px-16)}.header--menu{display:var(---header--menu-display);flex-direction:column}.header--menu-btn{width:var(---rem-px-30);height:var(---rem-px-30)}.header--left{flex:1;display:flex;flex-direction:column}.header--left-when-type-only-logo{align-items:center}.header--logo{max-width:470px;width:85%;aspect-ratio:505/48}.header--logo-when-type-only-logo{max-width:80%;width:var(---rem-px-470);aspect-ratio:505/48}.header--page{flex:1;display:flex;flex-direction:column;gap:var(---rem-px-5)}.header--page-name{color:var(---color-text-headline-and-title)}.header--page-path{display:flex;flex-direction:row;align-items:center;gap:var(---rem-px-6)}.header--page-path-icon{width:var(---rem-px-16);height:var(---rem-px-16)}.header--page-path-name{color:var(---color-text-lable-and-body-light)}.header--user-view{max-width:50%;display:flex;flex-direction:row;align-items:center;gap:var(---rem-spacing-md)}.header--user-notification{padding:var(---rem-px-10)}.header--user-notification-icon{width:var(---rem-px-20);height:var(---rem-px-20)}.header--user-view-right{flex:1}.header--user-name-view{min-height:var(---rem-px-40);display:flex;flex-direction:column;justify-content:center;padding:0 var(---rem-px-16);border-radius:var(---rem-radius-sm);background:var(---color-brand-primary-light)}.header--user-name{color:var(---color-black);text-align:center}.header--user-popup-view{position:absolute;right:0;display:none;flex-direction:column;z-index:100}.header--user-popup-view-show{display:flex}.header--user-popup-main{min-width:320px;max-width:max(min(700px,50vw),320px);display:flex;flex-direction:column;background:var(---color-white);border-radius:var(---rem-px-12);border:1px solid var(---color-board-light);box-shadow:0 var(---rem-px-7) var(---rem-px-18) 0 var(---color-grey-shadow3);transform:scale(1)}.header--user-popup-main-info-view{display:flex;flex-direction:column;padding:var(---rem-px-20);gap:var(---rem-px-24)}.header--user-popup-main-info-cell{display:flex;flex-direction:row;align-items:center;gap:var(---rem-px-8)}.header--user-popup-main-info-id-view{min-height:var(---rem-px-40);display:flex;flex-direction:column;justify-content:center;padding:0 var(---rem-px-16);border-radius:var(---rem-radius-sm);background:var(---color-brand-primary-light)}.header--user-popup-main-info-id{color:var(---color-black)}.header--user-popup-main-info-name-view{flex:1;display:flex;flex-direction:column;gap:var(---rem-px-4)}.header--user-popup-main-info-name{color:var(---color-grey-8)}.header--user-popup-main-info-email{color:var(---color-grey-2)}.header--user-popup-main-list-view{display:flex;flex-direction:column}.header--user-popup-main-list-cell{display:flex;flex-direction:row;border-top:1px dashed var(---color-board-light)}.header--user-popup-main-list-title-view{width:var(---rem-px-144);padding:var(---rem-spacing-x-sm) 0 var(---rem-spacing-x-sm) 0;gap:var(---rem-px-8)}.header--user-popup-main-list-title{color:var(---color-text-lable-and-body-light)}.header--user-popup-main-list-value-view{flex:1;padding:var(---rem-spacing-x-sm) 0 var(---rem-spacing-x-sm) var(---rem-spacing-sm);gap:var(---rem-px-8)}.header--user-popup-main-list-value{color:var(---color-text-lable-and-body)}.header--user-popup-main-btn-view{display:flex;flex-direction:column;border-top:1px solid var(---color-grey-6);padding:var(---rem-px-10);gap:var(---rem-px-12)}.header--user-popup-main-btn{display:flex;flex-direction:column;align-items:center;background:var(---color-white);padding:var(---rem-px-10) var(---rem-px-20)}.header--user-popup-main-btn-name{color:var(---color-grey-7)}.header--switch-view{display:flex;flex-direction:row;align-items:center;background:var(---color-grey-200);border-radius:var(---rem-radius-sm);padding:var(---rem-spacing-xx-sm);gap:var(---rem-spacing-xx-sm)}.header--btn-switch{display:flex;flex-direction:row;align-items:center;border-radius:var(---rem-px-6);padding:var(---rem-spacing-x-sm) var(---rem-spacing-md);gap:var(---rem-px-10)}.header--btn-switch2{background-color:var(---color-white);border:1px solid var(---color-primary-active)}.header--icon-switch{width:var(---rem-px-24);height:var(---rem-px-24)}.header--lbl-switch{color:var(---color-text-lable-and-body);vertical-align:middle}