@charset 'utf-8';

/*===================================================================
* INFORMATION
* -------------------------------------------------------------------ㅋ
* @File Name: layout.css
* @Description : layout
* @Create Date: 2024-07-18
* @Last Update Date: N/A
* @History: N/A
* ====================================================================*/

/* ====================== */
/* layout */
/* ====================== */
body {min-width:800px;overflow:auto;}
#wrap {position:relative;}
#container {position:relative;}
.sidebar ~ #container {padding-left:270px;padding-top:75px;padding-right:20px;padding-bottom:40px;}

.floating-btn {position:absolute;right:20px;top:20px;display:inline-flex;z-index:10;}
.floating-btn .btn-password-set {background-color:#000000;color:#fff;font-size:14px;font-weight:500;display:block;padding:8px 20px 8px 10px;border-radius:0 30px 30px 0;}
.floating-btn .btn-password-set:before {content:'';display: inline-block;margin-right:5px;width:12px;height:12px;background:url(../images/btn_password_set.svg) no-repeat center / contain;vertical-align:-1px;}
.floating-btn .btn-admin-add {background-color:#000000;color:#fff;font-size:14px;font-weight:500;display:block;padding:8px 10px 8px 20px;border-radius:30px 0 0 30px;}
.floating-btn .btn-admin-add:before {content:'';display: inline-block;margin-right:5px;width:12px;height:12px;background:url(../images/btn_admin_add.svg) no-repeat center / contain;vertical-align:-1px;}

.page-title {font-size:26px;font-weight:700;color:#333d4b;margin-bottom:40px;padding-bottom:12px;border-bottom:1px solid #000;}

.page-mgt {display:flex;margin-bottom:14px;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;}
.page-mgt-right {display:flex;gap:10px;}
.page-mgt-right input[type='text'] {width:200px;}

/* ====================== */
/* sidebar */
/* ====================== */
.sidebar {display:flex;flex-direction:column;position:fixed;left:20px;top:20px;bottom:20px;padding:30px 0;width:210px;background-color:#000;border-radius:6px;z-index:10;}
.sidebar-logo {width:300px;margin:0 auto 48px;}

.sidebar-info {margin-bottom:28px;text-align:center;}
.sidebar-info .profile {font-size:14px;color:#fff;display:block;}
.sidebar-info .profile strong {font-size:16px;font-weight:700;margin-right:3px;}
.sidebar-info .btn-logout {margin-top:10px;display:inline-flex;padding:8px 18px;gap:5px;font-weight:500;color:#fff;font-size:12px;border-radius:100px;background:#2D2D2D;align-items:center;}
.sidebar-info .btn-logout img {display:inline-block;width:14px;}

/* 크롬, 엣지, 사파리용 (Webkit 기반 브라우저) */
.sidebar-nav::-webkit-scrollbar {
    width: 6px; /* 스크롤바 두께 */
}

.sidebar-nav::-webkit-scrollbar-track {
    background: transparent; /* 스크롤바 배경 (트랙) */
}

.sidebar-nav::-webkit-scrollbar-thumb {
    background-color: #555; /* 스크롤바 색상 */
    border-radius: 4px;      /* 둥글게 */
}

.sidebar-nav::-webkit-scrollbar-thumb:hover {
    background-color: #79B7FF; /* 스크롤바 hover 시 밝은 블루 */
}

/* 파이어폭스용 */
.sidebar-nav {
    scrollbar-width: thin; /* 얇게 */
    scrollbar-color: #555 transparent; /* thumb / track */
}

.sidebar-nav {
    padding: 0 20px;
    flex: auto;
    overflow-y: auto;    /* ★ 추가 */
    overflow-x: hidden;  /* ★ 가로 스크롤은 숨김 */
    -webkit-overflow-scrolling: touch; /* ★ iOS 부드러운 스크롤 (선택사항) */
}
.main-nav-item {display:flex;gap:10px;padding:14px 16px;width:100%;align-items:center;border-radius:6px;color:#fff;font-size:14px;font-weight:500;transition:.3s ease;}
.main-nav-item svg {flex:none;}
.main-nav-item svg path {transition:.3s ease;}
.main-nav-item.active {color:#79B7FF;background-color:#2D2D2D;}
.main-nav-item.active svg path {fill:#79B7FF;}
.main-nav-item:hover {color:#79B7FF;}
.main-nav-item:hover svg path {fill:#79B7FF;}
.main-nav-item.active + .sub-nav {display:block;}
.sub-nav {margin:3px 0 10px;padding-left:40px;display:none;}
.sub-nav-item {display:block;padding:6px 0;font-size:12px;color:#fff;transition:.3s ease;}
.sub-nav-item:hover {color:#79B7FF;}
.sub-nav-item.active {color:#79B7FF;}

.sidebar-copy {display:block;text-align:center;color:#CECECE;font-weight:300;font-size:12px;line-height:1.4;}