/* ... (기존 CSS 스타일 유지) ... */
/* ==================================== */
/* 🎨 공통 스타일 (모든 테마에 적용) */
/* ==================================== */
html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden;
    color-scheme: light dark;
}
body {
    display: flex;
    flex-direction: column;
    transition: background-color 0.3s, color 0.3s;
}
.offcanvas {
    --bs-offcanvas-width: 50%;
    max-width: 360px;
}
@media (max-width: 576px) {
    .offcanvas {
        --bs-offcanvas-width: 80%;
    }
}
#main-content {
    flex-grow: 1;
    display: flex;
    flex-direction: column; /* 수직 방향 배치 유지 */
    background-color: var(--bg-color);
    color: var(--text-color-primary);
    height: 100%;
    padding-bottom: env(safe-area-inset-bottom);
}
.navbar {
    position: relative;
    z-index: 1051;
    flex-shrink: 0;
    background-color: var(--navbar-bg);
    color: var(--navbar-text);
    transition: background-color 0.3s, color 0.3s;
}
#searchArea {
    position: relative;
    z-index: 1050;
    flex-shrink: 0;
}
#offcanvasNavbar {
    z-index: 1051;
}
#chat {
    /* 💥 [수정] 남은 공간을 모두 차지하도록 flex-grow: 1 유지 */
    flex-grow: 1;
    
    /* 💥 [수정] 메시지 영역 내부에서만 스크롤되도록 overflow-y: auto 유지 */
    overflow-y: auto;
    
    padding: 1rem;
    
    /* 💥 [수정] 입력창과의 공간을 위해 임의로 띄워두었던 padding-bottom 값을 제거합니다. */
    /* 이제 #inputArea가 물리적으로 아래에 위치하므로 패딩이 필요 없습니다. */
    padding-bottom: 1rem; /* 기본 패딩 값으로 조정 */
    
    -webkit-overflow-scrolling: touch;
}
.msg-container {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    margin-bottom: 0.8rem;
}
.msg-received {
    align-items: flex-start;
}
.msg-sent {
    align-items: flex-end;
}
.msg-content-wrapper {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* 받은 메시지(왼쪽)의 정렬: 말풍선, 시간/버튼 */
.msg-received .msg-content-wrapper {
    flex-direction: row;
}

/* 보낸 메시지(오른쪽)의 정렬 */
.msg-sent .msg-content-wrapper {
    flex-direction: row-reverse;
    justify-content: flex-end;
}

/* 시간과 버튼 그룹을 감싸는 컨테이너 */
.msg-btn-wrapper {
    display: flex;
    align-items: center; /* 세로 중앙 정렬 */
    gap: 0.5rem; /* 시간과 버튼 사이 간격 */
}

/* 받은 메시지(왼쪽)의 시간/버튼 순서: 시간, 버튼 */
.msg-received .msg-btn-wrapper {
    flex-direction: row;
}

/* 보낸 메시지(오른쪽)의 시간/버튼 순서: 버튼, 시간 */
.msg-sent .msg-btn-wrapper {
    flex-direction: row-reverse;
}

.msg {
    padding: 0.6rem 1rem;
    border-radius: 1.25rem;
    max-width: 70vw;
    min-width: unset;
    width: fit-content;
    transition: background-color 0.3s, border-color 0.3s, box-shadow 0.3s;
    white-space: pre-wrap;
	word-break: keep-all;
    overflow-wrap: break-word;
}
@media (max-width: 768px) {
    .msg {
        max-width: 60%;
        min-width: unset;
    }
    /* 관리자 모드일 경우 좌측 말풍선 너비 조정 */
    body.is-admin-mode .msg-received .msg {
        max-width: 63vw;
    }
	
	.msg-received .msg {
        max-width: 63vw;
    }
	
	.msg-sent .msg {
        max-width: 63vw;
    }
}
.msg-received .msg {
    background-color: var(--bubble-received-bg);
    border-bottom-left-radius: 0.25rem;
}
.msg-sent .msg {
    background-color: var(--bubble-sent-bg);
    border-bottom-right-radius: 0.25rem;
}
.time-outside {
    font-size: 0.7rem;
    color: var(--text-color-secondary);
    white-space: nowrap;
}

/* ==================================== */
/* 💡 [수정/추가] 닉네임 옆 버튼 위치 조정 스타일 */
/* ==================================== */

/* 1. 닉네임과 버튼 그룹을 수평으로 정렬하는 래퍼 스타일 */
.nickname-and-actions {
    display: flex;
    align-items: center; /* 수직 중앙 정렬 */
    gap: 0.4rem; /* 닉네임과 버튼 사이 간격 */
    margin: 0 0.5rem; 
    margin-bottom: 2px; /* 닉네임과 메시지 말풍선 사이 간격 */
    line-height: 1.2;
}

/* 2. 기존 .nickname의 마진을 제거 (래퍼가 마진을 가짐) */
.nickname-and-actions .nickname {
    margin: 0;
}

/* 3. 닉네임 옆 버튼 그룹 스타일 (초기에는 숨김) */
.admin-msg-actions-nickname {
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
    flex-shrink: 0; /* 버튼 그룹이 줄어들지 않도록 */
}

/* 4. 메시지 컨테이너에 마우스 오버 시 버튼 표시 */
.msg-container:hover .admin-msg-actions-nickname {
    opacity: 1; 
}

/* 5. 버튼 크기 조정 */
.admin-msg-actions-nickname .btn-group-sm .btn {
    padding: 0.1rem 0.3rem; 
    font-size: 0.7rem;
    line-height: 1.2;
}

/* 보낸 메시지(오른쪽)의 닉네임과 버튼 그룹 내부 정렬 */
/* .msg-sent는 컨테이너 정렬을 담당하므로 내부 요소 순서는 HTML로 제어했습니다. */
.msg-sent .nickname-and-actions {
    /* 닉네임과 버튼을 오른쪽으로 배치하기 위해 래퍼 내부 요소를 오른쪽 끝에 붙임 */
    justify-content: flex-end; 
}

/* 받은 메시지(왼쪽)의 닉네임과 버튼 그룹 내부 정렬 */
.msg-received .nickname-and-actions {
    /* 닉네임과 버튼을 왼쪽으로 배치 (기본값) */
    justify-content: flex-start;
}

/* 닉네임과 버튼 그룹 사이의 간격 */
.nickname {
    font-size: 0.8rem;
    font-weight: bold;
    color: var(--text-color-primary);
    margin: 0 0.5rem;
	margin-right: 5px;
}

/* 버튼 그룹의 크기 및 간격 조정 (모바일에서 버튼이 너무 크지 않게) */
.admin-msg-actions .btn-group-sm .btn {
    padding: 0.1rem 0.3rem; /* 버튼 패딩을 줄여 공간 절약 */
    font-size: 0.7rem;
}

/* 관리자 버튼 그룹이 닉네임 옆에 붙어 보이도록 마진을 제거 */
.admin-msg-actions {
    margin: 0;
    /* 필요하다면 flex-shrink: 0; 를 추가하여 너비 확보를 강제 */
    flex-shrink: 0; 
}

.btn-group {
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
}
.msg-container:hover .btn-group {
    opacity: 1;
}
#etiquette-alert {
    padding: 1rem;
    border: 1px solid #ffc107;
    border-radius: 0.5rem;
    background-color: #fff3cd;
    color: #664d03;
    font-size: 0.8rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    z-index: 1040;
    position: fixed;
    top: 72px;
    left: 50%;
    transform: translateX(-50%) scale(1);
    opacity: 1;
    width: calc(100% - 2rem);
    max-width: 500px;
    transition: all 0.4s cubic-bezier(0.25, 0.1, 0.25, 1), top 0.3s ease;
}
#etiquette-alert.dismissing {
    opacity: 0;
    transform: translateX(-50%) translateY(-100px) scale(0.8);
}
#etiquette-alert.collapsed {
    position: relative;
    top: 0;
    left: 0;
    transform: none;
    width: 100%;
    max-width: none;
    margin-bottom: 1rem;
    flex-direction: row;
    align-items: center;
    z-index: 1;
}
#etiquette-alert.re-opening {
    transform: translateX(-50%) scale(0.5);
    opacity: 0;
}
.alert-content {
    flex-grow: 1;
    text-align: left;
    margin-right: 1rem;
}
.alert-close-btn {
    background: none;
    border: none;
    font-size: 1.25rem;
    color: #333;
    cursor: pointer;
    opacity: 0.8;
}
.alert-close-btn:hover {
    opacity: 1;
}
#etiquette-alert.collapsed .alert-close-btn {
    display: none;
}
#etiquette-alert .alert-content {
    font-size: 0.9em; /* 기존보다 조금 작게 조정 */
}
.highlight-text {
    color: #dc3545;
    font-weight: bold;
}
#inputArea {
    /* 💥 [수정] position: fixed를 제거하고 Flexbox 흐름을 따릅니다. */
    position: relative; 
    
    /* 💥 [수정] flex-shrink: 0을 유지하여 입력창의 크기가 절대 줄어들지 않도록 고정합니다. */
    flex-shrink: 0;
    
    /* 🎨 [변경] 배경색을 상단 navbar와 동일하게 흰색 계열로 통일 (var(--navbar-bg) 또는 직접 하얀색으로 지정) */
    /* 현재 navbar가 'bg-body-tertiary'를 사용하므로, 라이트/다크 모드에 따라 변하는
       Bootstrap의 기본 배경 변수(--bs-body-bg)나 navbar 배경 변수를 사용하는 것이 좋습니다. */
    /* 만약 navbar와 동일한 색상 변수가 있다면 사용하고, 없다면 가장 가까운 변수를 사용합니다. */
    background: var(--navbar-bg); /* 상단 navbar와 동일하게 설정 */
    
    /* 🎨 [미세 조정 1] 상단 패딩 (입력창 위) 줄이기: 1rem (16px) -> 0.75rem (12px)로 축소 */
    padding-top: 0.5rem; 
    
	/* 🎨 [수정] 하단 패딩을 1.25rem -> 0.75rem (12px)로 축소하여 상단과 대칭 */
    /* 1. 이 줄에 줄이 그어질 것입니다. */
    padding-bottom: 0.5rem; 
    
    /* 🎨 [미세 조정 3] 좌우 패딩은 유지 */
    padding-left: 1rem;
    padding-right: 1rem;
    
    box-shadow: 0 -2px 5px rgba(0,0,0,0.05);
    border-top: 1px solid var(--border-color);
    transition: background-color 0.3s, border-color 0.3s;
    
    z-index: 1000;
    
    /* 💥 [수정] padding-bottom을 수동 설정했으므로, 안전 영역은 padding-bottom에 더해져야 합니다. */
    /* Flexbox에서 이전에 1rem이 있던 자리에 1.25rem을 넣고, 안전 영역을 추가합니다. */
    padding-bottom: calc(0.5rem + env(safe-area-inset-bottom));
}

#msgInput {
    max-height: 150px;
    resize: none;
}
#sendBtn {
    flex-shrink: 0;
}
.message-date-separator {
    text-align: center;
    font-size: 0.8rem;
    color: #888;
    margin: 10px 0;
    padding: 5px;
}
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1055;
}
.modal-content {
    background: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    max-width: 90%;
    width: 500px;
    text-align: center;
}
.highlight {
    background-color: #ffd700;
    font-weight: bold;
    color: #000;
}
/* 블라인드 메시지 컨테이너 스타일 */
.msg-blinded-container {
    display: flex; /* 가로 정렬을 위해 flex로 변경 */
    align-items: center; /* 세로 중앙 정렬 */
    justify-content: center; /* 가로 중앙 정렬 */
    width: 100%;
    margin: 10px 0;
    gap: 0.5rem; /* 요소들 사이의 간격 */
}

/* 블라인드 메시지 내용 스타일 */
.msg-blinded {
    text-align: center;
    font-style: italic;
    color: var(--text-color-secondary);
    background-color: transparent;
    border: none;
    font-size: 0.8rem;
    padding: 0.5rem 1rem;
    max-width: 80%;
    word-break: break-word;
    border-radius: 1.25rem;
}

/* 블라인드 메시지의 관리자 버튼은 처음엔 투명하게 */
.msg-blinded-container .btn-group {
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
}

/* 마우스를 올렸을 때 버튼이 보이게 */
.msg-blinded-container:hover .btn-group {
    opacity: 1;
}

/* ==================================== */
/* 🎨 테마별 스타일 변수 정의 */
/* ==================================== */
:root {
    --bg-color: #E9ECEF;
    --text-color-primary: #212529;
    --text-color-secondary: #6c757d;
    --input-area-bg: #F8F9FA;
    --border-color: #dee2e6;
    --bubble-sent-bg: #d1e7dd;
    --bubble-received-bg: #e2e3e5;
    --navbar-bg: #f8f9fa;
    --navbar-text: #212529;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg-color: #212529;
        --text-color-primary: #e9ecef;
        --text-color-secondary: #adb5bd;
        --input-area-bg: #343a40;
        --border-color: #495057;
        --bubble-sent-bg: #495057;
        --bubble-received-bg: #343a40;
        --navbar-bg: #343a40;
        --navbar-text: #e9ecef;
    }
}
body.original-style {
    --bg-color: #B0C4DE;
    --bubble-sent-bg: #ffeb33;
    --bubble-received-bg: #ffffff;
    --text-color-primary: #000000;
    --text-color-secondary: #6c757d;
    --input-area-bg: #E8E8E8;
    --border-color: #D3D3D3;
    --navbar-bg: #E8E8E8;
    --navbar-text: #000000;
}
body.original-style .msg {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
body.original-style.dark-mode {
    --bg-color: #1c1c1e;
    --bubble-sent-bg: #333333;
    --bubble-received-bg: #2c2c2e;
    --text-color-primary: #ffffff;
    --text-color-secondary: #8e8e93;
    --input-area-bg: #2c2c2e;
    --border-color: #3a3a3c;
    --navbar-bg: #2c2c2e;
    --navbar-text: #ffffff;
}
body.bs-style {
    --bg-color: #E9ECEF;
    --bubble-sent-bg: #d1e7dd;
    --bubble-received-bg: #e2e3e5;
    --text-color-primary: #212529;
    --text-color-secondary: #6c757d;
    --input-area-bg: #F8F9FA;
    --border-color: #dee2e6;
    --navbar-bg: #f8f9fa;
    --navbar-text: #212529;
}
body.bs-style .msg {
    border: 1px solid var(--border-color);
    box-shadow: none;
}
body.bs-style.dark-mode {
    --bg-color: #212529;
    --bubble-sent-bg: #495057;
    --bubble-received-bg: #343a40;
    --text-color-primary: #e9ecef;
    --text-color-secondary: #adb5bd;
    --input-area-bg: #343a40;
    --border-color: #495057;
    --navbar-bg: #343a40;
    --navbar-text: #e9ecef;
}
body.material-style {
    --bg-color: #E8EAF6;
    --bubble-sent-bg: #C5CAE9;
    --bubble-received-bg: #FFFFFF;
    --text-color-primary: #212121;
    --text-color-secondary: #757575;
    --input-area-bg: #F5F5F5;
    --border-color: #BDBDBD;
    --accent-color: #3F51B5;
    --navbar-bg: #F5F5F5;
    --navbar-text: #212121;
}
body.material-style.dark-mode {
    --bg-color: #303030;
    --bubble-sent-bg: #3F51B5;
    --bubble-received-bg: #424242;
    --text-color-primary: #ECEFF1;
    --text-color-secondary: #BDBDBD;
    --input-area-bg: #212121;
    --border-color: #616161;
    --accent-color: #5C6BC0;
    --navbar-bg: #212121;
    --navbar-text: #ECEFF1;
}
body .msg {
    padding: 0.6rem 1rem;
    border-radius: 1.25rem;
    word-break: break-word;
    transition: background-color 0.3s;
}
body .msg-received .msg {
    background-color: var(--bubble-received-bg);
    border-bottom-left-radius: 0.25rem;
}
body .msg-sent .msg {
    background-color: var(--bubble-sent-bg);
    border-bottom-right-radius: 0.25rem;
}
body.material-style .msg {
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
body.material-style .msg-sent .msg {
    border-bottom-right-radius: 2px;
}
body.material-style .msg-received .msg {
    border-bottom-left-radius: 2px;
}
body.material-style .btn-primary {
    background-color: var(--accent-color);
    border-color: var(--accent-color);
}
/* 날짜 구분선에 마우스 올렸을 때 클릭 가능하다는 표시 */
.clickable-separator {
    cursor: pointer;
    transition: background-color 0.2s;
}

.clickable-separator:hover {
    background-color: rgba(0, 0, 0, 0.1);
}

/* date input의 폰트 크기 조정 */
#dateSelectModal #dateJumpInput {
    font-size: 1.1rem; 
    padding: 10px;
}

/* 1. 달력 기본 스타일: 화면 중앙에 강제 고정 */
.flatpickr-calendar {
    /* 1. 중앙 정렬 (position: fixed와 transform은 중앙 정렬의 기본 공식입니다.) */
    position: fixed !important; /* JS의 모든 인라인 스타일을 이기도록 강제 */
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important; 
    
    /* 2. 외관 및 z-index */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    z-index: 1050;
    
    /* 3. 깜빡임 방지 핵심: 트랜지션 제거 및 닫힘 상태 강제 숨김 */
    transition: none !important; 
    
    /* 닫혀 있을 때 화면에 아예 나타나지 않도록 강제 */
    display: none !important;
}

/* 달력이 열렸을 때만 보이도록 설정 */
.flatpickr-calendar.open {
    /* JS에서 인라인으로 display: block을 적용할 것이므로, 이 CSS는 주로 백업 역할 */
    display: block !important; 
}

/* ================================================================= */
/* 💡 [추가] Flatpickr 달력 헤더의 년/월 순서를 '년 -> 월'로 변경 */
/* ================================================================= */
.flatpickr-current-month {
    /* flexbox를 사용하여 내부 요소의 순서를 제어합니다. */
    display: flex;
    flex-direction: row; /* 기본적으로 row 방향 (월-년 순서) */
    align-items: center;
}

.flatpickr-current-month .flatpickr-monthDropdown-months {
    /* 월(Month) 드롭다운을 연도(Year) 뒤로 보냅니다. */
    order: 2; 
    margin-right: 0; /* 기본 마진 제거 */
    margin-left: 5px; /* 연도와 간격 주기 */
    
    /* 한국어 '월'이 잘 보이도록 너비 조정 */
    max-width: 100px;
}

.flatpickr-current-month .numInputWrapper {
    /* 연도(Year) 입력 필드를 월 앞으로 보냅니다. */
    order: 1;
    /* '년' 텍스트를 연도 필드 바로 옆에 표시합니다. */
    /* 실제 '년' 텍스트는 JS 로케일에서 제공되거나, 필요시 CSS content로 추가해야 합니다. */
}

/* ================================================================= */
/* 💡 [수정] Flatpickr 달력 내부 '최근' 버튼 스타일 및 위치 조정 */
/* ================================================================= */

/* Flatpickr의 월/년 네비게이션(flatpickr-months)을 flexbox로 만들어 버튼을 우측에 배치 */
.flatpickr-months {
    display: flex;
    /* 월/년 드롭다운과 버튼을 양 끝으로 분리 */
    justify-content: space-between; 
    align-items: center;
    /* 기존 오른쪽 여백을 제거하고, 버튼 자체의 마진으로 위치 조정 */
    padding-right: 0; 
}

/* '최근' 버튼 스타일 (위치 조정 집중) */
.flatpickr-recent-btn {
    background: none;
    border: 1px solid var(--flatpickr-border-color, #ccc);
    color: var(--flatpickr-text-color, #333);
    cursor: pointer;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 12px;
    transition: background-color 0.2s;
    z-index: 2; 

    /* 💥 [핵심 수정 1] '>' 버튼과 겹치지 않도록 오른쪽 마진을 부여하여 왼쪽으로 이동 */
    /* 현재 Flatpickr 구조상, 오른쪽 월 이동 버튼이 버튼 영역 밖으로 나와 있으므로, 
       충분한 마진을 줍니다. (25px 정도면 적당할 것입니다.) */
    margin-right: 35px; 
    
    /* 💥 [핵심 수정 2] 수직 위치를 7.48px 내려서 다른 요소와 높이를 맞춥니다. */
    margin-top: 7.48px; 
}

.flatpickr-recent-btn:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

/* 3. 모달 내부 스타일 제거 (만약 달력이 모달 안에 들어가지 않는다면 이 코드가 충돌의 원인일 수 있습니다.) */
/* 아래 코드가 있다면, **제거하거나 주석 처리**하십시오. */
/* .modal-body .flatpickr-calendar {
    position: relative !important; 
    top: auto !important;
    left: auto !important;
    display: block !important;
}
*/

/* 💡 [필수] 날짜 텍스트를 감싸는 래퍼에만 커서와 호버 효과 적용 */
.date-label-wrapper {
    cursor: pointer;
    padding: 3px 8px; 
    border-radius: 15px; 
    transition: background-color 0.2s;
    display: inline-flex; 
    align-items: center;
}

.date-label-wrapper:hover {
    background-color: rgba(0, 0, 0, 0.1); /* 호버 효과 */
}

/* ================================================================= */
/* 💡 [수정] 날짜 구분선 하이라이트: 날짜 텍스트 영역만 깜빡이도록 수정 */
/* ================================================================= */

/* message-date-separator가 아닌 date-label-wrapper에 클래스가 추가됩니다. */
.date-label-wrapper.highlight-jump {
    animation: highlightFade 1.5s ease-out;
}

@keyframes highlightFade {
    0% {
        /* 날짜 텍스트 배경만 깜빡이도록 설정 */
        background-color: #ffde54; /* 밝은 노란색으로 설정 */
        box-shadow: 0 0 10px #ffde54;
        transform: scale(1.05);
    }
    100% {
        background-color: transparent;
        box-shadow: none;
        transform: scale(1);
    }
}

/* ================================================================= */
/* 💡 Flatpickr 비활성화된 날짜 스타일 추가 (선택 사항)           */
/* ================================================================= */
.flatpickr-day.disabled {
    /* 선택할 수 없는 날짜는 흐릿하게 보이도록 */
    color: #ccc !important;
    cursor: not-allowed;
    background: transparent !important;
}

#flatpickrCalendarHidden, /* 원본 hidden input (혹시 모를 오버라이딩 대비) */
.flatpickr-input.flatpickr-mobile { /* 모바일에서 자동 생성되는 input type="date" */
    display: none !important;
    visibility: hidden !important;
}

/* ================================================================= */
/* 💡 [추가] 모바일 가상 키보드 대응 CSS */
/* ================================================================= */

/* body에 .keyboard-open 클래스가 있을 때만 적용 */
body.keyboard-open #inputArea {
    /* 💥 Flexbox 흐름에서 벗어나 화면 하단에 고정합니다. */
    position: fixed !important; 
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    /* 너비는 100%를 보장합니다. */
    width: 100% !important; 
    
    /* 💥 z-index를 매우 높여 키보드 위에 확실히 떠 있도록 합니다. */
    z-index: 9999; 
    
    /* [선택 사항] 부드러운 전환 효과 추가 */
    transition: transform 0.3s ease-out; 
    
    /* 배경색을 다시 한번 명확히 지정하여 키보드 경계선과 겹치지 않도록 합니다. */
    background: var(--navbar-bg) !important; 
}