html {
    font-size: 16px;
}
body {
    background-color: #0f0f0f; /* 배경색 */
    color: #ffffff;
    overflow-x: hidden;
    padding-top: 60px; /*상단바 안겹차게 하기 위한 padding*/
}

/* 로고 이미지 */
.ytlogo {
    width: 140px;
    height: 35px;
    object-fit: cover;
}

/* -------------------- 네비게이션 바 스타일 -------------------- */
.navbar {
    min-width: 850px;
    flex-wrap: nowrap; /*상단바 flex 안되게*/
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1030; /*영향 받지 않기 위해 상단바를 위로 보냄*/
    background-color: #0f0f0f;
    padding: 0.5rem 0rem;
}

/*토글 버튼*/
.navbar-toggler {
    border-radius: 50%; /* 둥근 모양 */
    border: none;
    outline: none;
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0; /* 내부 패딩 제거 (아이콘이 꽉 차게 보이도록) */
    background-color: transparent; /* 배경색 투명하게 */
}


/* 햄버거 아이콘 색상 변경 */
.navbar-toggler-icon {
    /* SVG 이미지에 색상을 적용하기 위해 filter 속성 사용 -> 회색 */
    filter: invert(33%) sepia(0%) saturate(1%) hue-rotate(189deg) brightness(80%) contrast(90%);
}

/* offcanvas 버튼 클릭시 focus 없애기(실패) */
.navbar-toggler:hover,
.navbar-toggler:focus,
.navbar-toggler:active {
    border:none !important;
    box-shadow: none !important;
    background-color: rgba(255, 255, 255, 0.1);
}

.navbar-brand {
    margin-right: 90px;
}

/* ------------------ 검색창 스타일 ------------------ */
.search-bar {
    flex-grow: 1; /* 남은 공간 차지 */
    max-width: 600px; /* 최대 너비 */
    border-radius: 20px;
    background-color: #0f0f0f;
    border: 1px solid #424242;
    overflow: hidden; /*원형 테두리 삐져나오는거 빼기*/
}

.search-bar .form-control {
    border: none;
    border-radius: 0; /* 개별 요소의 둥근 모서리 제거 */
    box-shadow: none;
    background-color: #0f0f0f;
    color: #aaaaaa;
    padding-left: 15px;
}

.search-bar .btn {
    border: none;
    border-radius: 0;
    border-left: 1px solid #424242;
}

.search-bar .form-control::placeholder {
    color: #aaaaaa; /* 플레이스홀더 글자색 */
}

.voice-search {
    display: flex;
    align-items: center;
}

/* -------------------- 드롭다운 메뉴 스타일 (사용자 정보)-------------------- */
.dropdown-menu {
    background-color: #282828;
    border: 1px solid #424242;
}

.dropdown-item {
    color: #ffffff;
}

.dropdown-item:hover {
    background-color: #383838;
    color: #ffffff;
}

/*드롭다운 화살표 숨기기*/
.dropdown-toggle::after {
    display: none;
}

/* 사용자 프로필 이미지 (플레이스 홀더) */
.profile-img-placeholder {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: #606060; /* 임시 색상 */
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-weight: bold;
    font-size: 1.2rem;
}

/*사이드 바 스타일*/
.expand-sidebar {
    width: 250px;
    background-color: #212121;
    color: #fff;
    position: fixed;
    left: 0; /* 왼쪽에 붙임 */
    height: 100vh;
    overflow-y: auto; /* 내용이 넘칠 경우 스크롤바 생성 */
}
/*축소 사이드바*/
.reduce-sidebar {
    width: 100px;
    background-color: #212121;
    color: #fff;
    position: fixed;
    left: 0;
    height: 100vh;
}
/* 메인 콘텐츠 영역 */
.main-content {
    flex-grow: 1; /* 남은 공간을 모두 차지하도록 함 */
}

/* -------------------- 데스크톱 사이드바 (두 개를 토글) -------------------- */
/* 공통 사이드바 스타일 (두 사이드바에 모두 적용될 기본값) */
.reduce-sidebar,
.expand-sidebar {
    background-color: #0f0f0f;
    color: #ffffff;
    position: fixed;
    left: 0;
    height: 100vh;
    overflow-y: auto;
}

/* 확장 사이드바 스타일 */
.expand-sidebar {
    width: 240px; /* 확장 시 너비 */
}

.expand-sidebar .nav-link {
    color: #ffffff;
    padding: 10px 20px;
    align-items: center;
    white-space: nowrap; /* 텍스트가 한 줄로 유지되도록 */
    font-size: 0.95rem;
    margin-right: 0.25rem;
    margin-left: 0.25rem;
}
.expand-sidebar .nav-link:hover {
    background-color: #383838;
}
.expand-sidebar .nav-link i {
    margin-right: 15px;
    width: 24px;
    text-align: center;
    font-size: 1.2rem;
}
.expand-sidebar hr {
    border-color: rgba(255, 255, 255, 0.1);
    margin: 10px 20px;
}
.expand-sidebar .sidebar-heading {
    font-size: 0.8em;
    color: #aaa;
    padding: 10px 20px 5px;
    text-transform: uppercase;
}
/*html 컴포넌트 관리 이전 임시*/
.offcanvas-body .sidebar-heading {
    font-size: 0.8em;
    color: #aaa;
    padding: 10px 20px 5px;
    text-transform: uppercase;
}

/* 축소 사이드바 스타일 */
.reduce-sidebar {
    display: none; /* 기본적으로는 숨김 */
}
.reduce-sidebar .nav-link:hover {
    background-color: #383838;
}
.reduce-sidebar .nav-link {
    display: flex;
    flex-direction: column; /* 세로 정렬: 요소를 수직으로 쌓음 */
    align-items: center;    /* 수평 중앙 정렬: 교차 축(여기서는 수평)을 따라 중앙에 정렬 */
    justify-content: center; /* 수직 중앙 정렬: 주 축(여기서는 수직)을 따라 중앙에 정렬 */
    padding: 10px 0;
    color: #ffffff;
}
/* 축소 사이드바 내의 이미지 스타일 조정 */
.reduce-sidebar .nav-link img {
    margin-right: 0 !important; /* me-3 클래스에 의해 적용된 margin-right를 0으로 재정의 */
    margin-bottom: 5px;
}

/* body 클래스에 따른 사이드바 표시/숨김 및 메인 콘텐츠 마진 조정 */
body.expanded-sidebar .expand-sidebar {
    display: block; /* 확장 사이드바 보임 */
}
body.expanded-sidebar .reduce-sidebar {
    display: none; /* 축소 사이드바 숨김 */
}
body.expanded-sidebar .main-content {
    margin-left: 240px; /* 확장된 사이드바(240px)만큼 콘텐츠를 오른쪽으로 밉니다. */
    width: calc(100% - 240px); /* 메인 콘텐츠는 뷰포트 너비에서 사이드바 너비를 뺀 공간을 차지합니다. */
}
body.reduced-sidebar .reduce-sidebar {
    display: block; /* 축소 사이드바 보임 */
}
body.reduced-sidebar .main-content {
    margin-left: 100px; /* 확장 사이드바 너비만큼 메인 콘텐츠 밀기 */
}
body.reduced-sidebar .main-content {
    margin-left: 100px; /* 축소된 사이드바(100px)만큼 콘텐츠를 오른쪽으로 밉니다. */
    width: calc(100% - 100px); /* 메인 콘텐츠는 뷰포트 너비에서 사이드바 너비를 뺀 공간을 차지합니다. */
}
/* -------------------- Offcanvas 스타일 -------------------- */
/* 큰 화면 (1200px 이상) 에서만 적용: offcanvas 숨기기 -> 미디어 쿼리로 반응형 구현*/
@media (min-width: 1200px) {
    .offcanvas {
        visibility: hidden !important; /* 요소를 숨기지만 공간은 차지하지 않음 (flexbox에서) */
        transform: translateX(-100%) !important; /* 화면 밖으로 완전히 이동 */
        display: none !important; /* 공간 차지하지 않도록 숨김 */
    }
    /* Offcanvas를 여는 햄버거 버튼 큰 화면에서 숨기기 */
    #offcanvasToggle {
        display: none !important;
    }
    /* 데스크톱 사이드바 토글 버튼 보이게 */
    .desktop-sidebar-toggler {
        display: block !important;
    }
    /* 초기 로드 시 또는 리사이즈 시 확장 사이드바를 보이게 설정 (body.expanded-sidebar에 의해 제어) */
    body.expanded-sidebar .expand-sidebar {
        display: block;
    }
    body.expanded-sidebar .reduce-sidebar {
        display: none;
    }
    body.reduced-sidebar .expand-sidebar {
        display: none;
    }
    body.reduced-sidebar .reduce-sidebar {
        display: block;
    }
}

/*작은 화면: sidebar toggle 숨기기 */
@media (max-width: 1199.98px) {
    /*sidebarToggle 의 기능 navbar 교체하기*/
    .reduce-sidebar,
    .expand-sidebar,
    #sidebarToggle {
        display: none !important;
    }
    .offcanvas-header {
        height: 63px;
    }
    .offcanvas-start {
        --bs-offcanvas-width: 300px; /*너비 설정-> 상위 설정*/
        background-color: #0f0f0f;
        color: #ffffff;
    }
    .offcanvas-body .nav-link {
        color: #ffffff;
        padding: 0.5rem 1rem;
    }
    .offcanvas-body .nav-link:hover { /*마우스 올려놓았을 때*/
        background-color: #383838;
    }
    .btn-close {
        width: 20px;
        filter: invert(33%) sepia(0%) saturate(1%) hue-rotate(189deg) brightness(80%) contrast(90%);
    }

    /* offcanvas 버튼 focus 지우기*/
    .btn-close:hover,
    .btn-close:focus,
    .btn-close:active {
        border:none !important;
        box-shadow: none !important;
        background-color: rgba(255, 255, 255, 0.1); /* 약간 투명한 흰색 배경 */
    }

    /*사이드바로 설정된 공백 지우기*/
    body.expanded-sidebar .main-content {
        margin-left: 0px; /* 확장 사이드바 너비만큼 메인 콘텐츠 밀기 */
    }
    body.reduced-sidebar .main-content {
        margin-left: 0px; /* 확장 사이드바 너비만큼 메인 콘텐츠 밀기 */
    }
    .main-content {
        margin-left: 0px !important; /* 작은 화면에서는 마진 없음 */
        width: 100% !important; /* 전체 너비 차지 */
    }
}

/*사이드바 스크롤 바 설정*/

.reduce-sidebar::-webkit-scrollbar,
.expand-sidebar::-webkit-scrollbar {
    width: 8px; /* 스크롤바의 너비 */
}

.reduce-sidebar::-webkit-scrollbar-track,
.expand-sidebar::-webkit-scrollbar-track {
    background: #282828;
    border-radius: 10px;
}
.reduce-sidebar::-webkit-scrollbar-thumb,
.expand-sidebar::-webkit-scrollbar-thumb {
    background-color: #606060;
    border-radius: 10px;
    border: 2px solid #282828;
}


.profile-thumbnail {
    width: 32px;
    height: 32px;
    border-radius: 50%;
}

.user-dropdown .dropdown-menu {
    width: 300px;
    background-color: #282828;
    border: 1px solid #444; /
    color: white;
}

.user-dropdown .dropdown-header.user-info-header {
    display: flex;
    align-items: center;
}

.user-dropdown .profile-thumbnail-lg {
    width: 48px;
    height: 48px;
    border-radius: 50%;
}

.user-dropdown .dropdown-header h6 {
    font-size: 1rem;
    font-weight: bold;
}

.user-dropdown .dropdown-header p {
    font-size: 0.85rem;
    color: #aaa;
}


.user-dropdown .dropdown-item {
    color: white;
    font-size: 0.95rem;
    padding: 0.6rem 1rem;
    display: flex;
    align-items: center;
}

.user-dropdown .dropdown-item:hover,
.user-dropdown .dropdown-item:focus {
    background-color: #3a3a3a;
    color: white;
}

.user-dropdown .dropdown-item i {
    width: 20px; /
    text-align: center;
    margin-right: 0.75rem;
    color: #aaa;
}
.user-dropdown .dropdown-divider {
    border-color: #555;
}

.user-dropdown .dropdown-header + .dropdown-divider + li:first-of-type > .dropdown-item:hover {
    background-color: transparent;
    text-decoration: underline;
}

.other-button {
    margin-left: 15px;
    margin-right: 15px;
    background-color: #383838;
    border-radius: 50px;
    text-decoration: none;
    text-align: center;
    align-items: center;
}

.other-button:hover {
    background-color: #555;
}