/* ==========================================
   서버 스타일 공통 설정
   ========================================== */

body {
    /* 배경 설정 */
    background-size: cover !important;        /* 화면에 꽉 차게 */
    background-position: center !important;   /* 중앙 정렬 */
    background-repeat: no-repeat !important;  /* 반복 안 함 */
    background-attachment: fixed !important;  /* 스크롤해도 배경 고정 */
}

/* 로고 강제 교체 코드 */
.navigation-panel__logo img {
    display: none !important;
}

/* 로고 스타일 설정 */
.navigation-panel__logo  {
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    
    /* 로고 너비와 폭 지정 */
    height: 160px !important;
    width: 100% !important;
    display: block !important;
    
    pointer-events: auto !important;
    cursor: pointer !important;
}

/* 로고를 감싸고 있는 링크 태그(a)를 강제로 활성화 */
.navigation-panel__logo a {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
}

/* 게시하기, 주요버튼 스타일  */
.button, .button.button-primary {
  border-radius: 20px !important;
  font-weight: bold !important;
}

/* 팝업창 내 버튼 배경 및 텍스트 스타일 */
.theme-mastodon-bird-ui-dark  .modal-root .button,
.theme-mastodon-bird-ui-dark  .modal-root .button.button-primary,
.theme-mastodon-bird-ui-dark  .modal-root .text-btn {
    padding: 5px 15px !important;
}


/* [취소] 버튼 버튼 스타일 */
.modal-root a[role="button"] {
    background: transparent !important;
    padding: 5px 15px !important;
    text-decoration: none !important;
}

/* 홈 타임라인에서 DM/다이렉트 메시지 안보이게 하기 */
[aria-label="홈"] .status.status-direct,
[aria-label="홈"] .status.status--direct,
[aria-label="홈"] .status__wrapper--direct,
[aria-label="홈"] .status__prepend,
[aria-label="홈"] .status__prepend--direct,
[aria-label="홈"] .status__prepend-icon--direct {
    display: none !important;
}

/* 하단 판매자 문구 및 로고/버전 정보 강제 삭제 */

.link-footer {
    display: none !important;
    height: 0 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Karmic(Longwhile) 테마 전용: 답장할 멘션 탭 강제 삭제 */

a[href*="/pending-mentions"],
.navigation-bar__actions a[href*="/pending-mentions"],
.column-link[href*="/pending-mentions"],
.sidebar-wrapper a[href*="/pending-mentions"],
.navigation-panel a[href*="/pending-mentions"] {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    height: 0 !important;
    width: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    pointer-events: none !important;
}


/* ==========================================
   마스토돈 서버 커스텀 테마: 다크 모드 (Dark Mode)
   ========================================== */

.theme-mastodon-bird-ui-dark .navigation-panel__logo {
    background-image: url('https://karmic.casa/system/media_attachments/files/116/730/170/902/136/956/original/fc449ccbe4546d00.png') !important;

}

/* 다크모드 배경화면 설정 */
.theme-mastodon-bird-ui-dark {
    /* 여기에 원하는 배경 이미지 주소를 넣으세요 */
    background-image: url('https://karmic.casa/system/site_uploads/files/000/000/006/original/03bb4246134a5ccc.jpg') !important;

}

/* 배경이 너무 밝거나 어두울 때 글씨가 잘 보이게 하려면 아래 코드도 추가하세요 */
.theme-mastodon-bird-ui-dark .column, 
.theme-mastodon-bird-ui-dark .navigation-panel, 
.theme-mastodon-bird-ui-dark .drawer {
    background: rgba(13, 13, 13, 0.7) !important; /* 약간 투명한 검은색 배경 */
}

/* 오른쪽 영역(검색창, 게시물 작성)을 완전한 검정으로 변경 */
.theme-mastodon-bird-ui-dark .column, 
.theme-mastodon-bird-ui-dark .drawer
{
    background-color: #000000 !important;
}

/* 추가로, 배경색 변경에 따른 테두리나 구분선이 너무 밝으면 살짝 어둡게 처리 */
.theme-mastodon-bird-ui-dark .column-header, 
.theme-mastodon-bird-ui-dark .column-subheading 
{
    background-color: #000000 !important;
    border-bottom: 1px solid #222 !important;
}

/* ==========================================
   대시보드
   ========================================== */

/* 2. 대시보드 컬럼들을 살짝 투명하게 만들어서 배경 이미지가 비쳐 보이도록 설정 */
.theme-mastodon-bird-ui-dark .column, 
.theme-mastodon-bird-ui-dark .drawer, 
.theme-mastodon-bird-ui-dark .columns-area__panels__main, 
.theme-mastodon-bird-ui-dark .search-page__wrapper,
.theme-mastodon-bird-ui-dark .columns-area__panels__pane 
{
  background-color: rgba(13, 13, 13, 0.75) !important; /* 투명도 75% */
  background-blend-mode: multiply !important;
}

/* ==========================================
   마스토돈 포인트 컬러 (#affa01) 맞춤형 리스트
   ========================================== */

/* [1] 게시글(툿) 본문 안에서 언급된 상대방 아이디 (@멘션) */
.theme-mastodon-bird-ui-dark .status__content a.mention,
.theme-mastodon-bird-ui-dark .reply-indicator__content a.mention {
  color: #affa01 !important;
}

/* [2] '게시' 버튼 및 주요 실행 버튼 배경색 */
.theme-mastodon-bird-ui-dark .button, 
.theme-mastodon-bird-ui-dark .button.button-primary, 
.theme-mastodon-bird-ui-dark .button.button-secondary, 
.theme-mastodon-bird-ui-dark .account__header__tabs__name__wrapper .button {
  background-color: #affa01 !important;
  color: #1f232b !important; /* 글자색은 어둡게 유지하여 가독성 확보 */
  font-weight: bold !important;
}

/* [3] 버튼에 마우스 올렸을 때(Hover)의 배경색 변화 */
.theme-mastodon-bird-ui-dark .button:hover,
.theme-mastodon-bird-ui-dark .account__header__tabs__name__wrapper .button:hover {
  background-color: #9bd402 !important;
}


/* [4] '게시하기' 및 주요 버튼 스타일 (새 포인트 컬러 적용) */
.theme-mastodon-bird-ui-dark .button, .button.button-primary {
  background-color: #affa01 !important;
  color: #1f232b !important; /* 배경이 밝은 형광색이므로 글자색은 어둡게 처리하여 가독성 확보 */
}
.theme-mastodon-bird-ui-dark  .button:hover {
  background-color: #9bd402 !important; /* 마우스 올렸을 때 조금 더 진해지는 효과 */
}

/* 사이드바 메뉴에 마우스를 올렸을 때 연두색으로 변경 */
.theme-mastodon-bird-ui-dark .navigation-bar a:hover,
.theme-mastodon-bird-ui-dark .navigation-panel a:hover,
.theme-mastodon-bird-ui-dark .drawer__inner a:hover {
    color: #ADFF2F !important; /* 연두색(GreenYellow) 코드 */
}

/* 마우스를 올렸을 때 아이콘 색상도 같이 연두색으로 변경 */
.theme-mastodon-bird-ui-dark .navigation-bar a:hover i.fa,
.theme-mastodon-bird-ui-dark .navigation-panel a:hover i.fa,
.theme-mastodon-bird-ui-dark .drawer__inner a:hover i.fa {
    color: #ADFF2F !important;
}

/* '돌아가기' 버튼의 텍스트와 아이콘 색상을 연두색으로 */
.theme-mastodon-bird-ui-dark .column-back-button,
.theme-mastodon-bird-ui-dark .column-back-button a,
.theme-mastodon-bird-ui-dark .column-back-button__icon {
    color: #ADFF2F !important;
}

/* 마우스를 올렸을 때도 연두색 유지 */
.theme-mastodon-bird-ui-dark  .column-back-button:hover,
.theme-mastodon-bird-ui-dark  .column-back-button a:hover {
    color: #ADFF2F !important;
    opacity: 0.8 !important;
}


/* ====================================================
     팝업창
   ==================================================== */

/* 팝업창 내 버튼 배경 및 텍스트 스타일 통일 */
.theme-mastodon-bird-ui-dark .modal-root .button,
.theme-mastodon-bird-ui-dark .modal-root .button.button-primary,
.theme-mastodon-bird-ui-dark .modal-root .text-btn {
    background: transparent !important; /* 배경을 투명하게 만듦 */
    border: 1px solid #ADFF2F !important; /* 초록색 테두리 추가 */
    color: #ADFF2F !important;           /* 글자색을 초록색으로 */
}

/* 2. 마우스 올렸을 때 효과 */
.theme-mastodon-bird-ui-dark .button:hover, 
.theme-mastodon-bird-ui-dark .button.button-primary:hover, 
.theme-mastodon-bird-ui-dark .button.button-secondary:hover,
.theme-mastodon-bird-ui-dark .account__header__tabs__name__wrapper .button:hover {
  background-color: #9bd402 !important;
  border-color: #9bd402 !important;
}

/* 마우스를 올렸을 때 반전 효과 */
.theme-mastodon-bird-ui-dark .modal-root .button:hover,
.theme-mastodon-bird-ui-dark .modal-root .text-btn:hover {
    background: #ADFF2F !important; /* 배경을 초록색으로 채움 */
    color: #000000 !important;      /* 글자는 검은색으로 */
}

/* [취소] 버튼도 동일한 버튼 스타일로 맞추기 */
.theme-mastodon-bird-ui-dark .modal-root a[role="button"] {
    background: transparent !important;
    border: 1px solid #ADFF2F !important;
    color: #ADFF2F !important;
    padding: 5px 15px !important;
    text-decoration: none !important;
}

/* 팝업(Modal) 창의 모든 버튼과 링크 텍스트를 초록색으로 강제 변경 */
.theme-mastodon-bird-ui-dark .modal-root button, 
.theme-mastodon-bird-ui-dark .modal-root .button, 
.theme-mastodon-bird-ui-dark.modal-root .text-btn, 
.theme-mastodon-bird-ui-dark .modal-root a {
    color: #ADFF2F !important;
}

/* 팝업 내에서 '확인'이나 '게시' 같은 특정 버튼의 글자색까지 포함 */
.theme-mastodon-bird-ui-dark .modal-root .button.button-primary {
    color: #1f232b !important; /* 배경이 초록색일 땐 글자는 어둡게 */
}

/* ====================================================
     중앙 타임라인
   ==================================================== */


/* 중앙 타임라인과 게시글 영역을 게시글 작성창과 같은 검은색으로 고정 */
.theme-mastodon-bird-ui-dark .column, 
.theme-mastodon-bird-ui-dark .drawer, 
.theme-mastodon-bird-ui-dark .columns-area__panels__main, 
.theme-mastodon-bird-ui-dark .scrollable {
    background-color: #0d0d0d !important; /* 작성창 배경과 동일한 색상 */
    background-image: none !important;    /* 배경 이미지 비침 차단 */
}

/* 1. 홈 헤더 및 타이틀 영역 */
.theme-mastodon-bird-ui-dark .column-header, 
.theme-mastodon-bird-ui-dark .column-header__wrapper,
.theme-mastodon-bird-ui-dark .column-header__title {
  background: #0d0d0d !important;
}

/* 2. 설정 영역(column-settings) */
.theme-mastodon-bird-ui-dark .column-settings,
.theme-mastodon-bird-ui-dark .column-settings__wrapper {
  background: #0d0d0d !important;
}

/* 3. 게시창 영역(compose-panel) */
.theme-mastodon-bird-ui-dark .compose-panel,
.theme-mastodon-bird-ui-dark .compose-form {
  background: rgba(13, 13, 13, 0.25) !important;
}

/* 4. 검색창 및 검색 입력창 */
.theme-mastodon-bird-ui-dark .search, 
.theme-mastodon-bird-ui-dark .search__input {
  background: #0d0d0d !important;
}


/* 1. 상단 탭 영역 */
.theme-mastodon-bird-ui-dark .tabs-bar,
.theme-mastodon-bird-ui-dark .tabs-bar__portal,
.theme-mastodon-bird-ui-dark .tabs-bar__wrapper,
.theme-mastodon-bird-ui-dark .tabs-bar__title,
.theme-mastodon-bird-ui-dark .column-back-button,
.theme-mastodon-bird-ui-dark .column-header__buttons {
  background-color: #0d0d0d !important;
}

/* 2. 게시창 하단 및 입력 영역 */
.theme-mastodon-bird-ui-dark .compose-form__footer,
.theme-mastodon-bird-ui-dark .compose-form__highlightable,
.theme-mastodon-bird-ui-dark .autosuggest-textarea__textarea {
  background-color: #1a1a1a !important;
}

/* 3. 혹시 모를 배경색 변수 덮어쓰기 (입력창용) */
.theme-mastodon-bird-ui-dark .autosuggest-textarea {
  background-color: #1a1a1a !important;
}

/* ====================================================
     게시글 입력창 (오른쪽 바)
   ==================================================== */

/* 1. 게시물 작성창 전체 배경을 조금 더 깔끔하게 */
.theme-mastodon-bird-ui-dark .compose-form {
    background-color: rgba(0, 0, 0, 0) !important;
}

/* 오른쪽 사이드바 영역 배경 투명도 75% 적용 */
.theme-mastodon-bird-ui-light .column-right {
    background-color: rgba(13, 13, 13, 0.75) !important;
    background-blend-mode: multiply !important;
}

/* 2. '지금 무슨 생각을 하고 있나요?' 입력 영역 */
.theme-mastodon-bird-ui-dark .compose-form .autosuggest-textarea__textarea {
    color: #ffffff !important;           /* 입력되는 글자색은 흰색 */
    background-color: transparent !important;
}

/* 3. 게시물 작성창 하단 아이콘들도 연두색으로 */
.theme-mastodon-bird-ui-dark .compose-form .icon-button {
    color: #ADFF2F !important;
}

/* 4. 메뉴 항목에 마우스를 올렸을 때 연두색으로 변화 */
.theme-mastodon-bird-ui-dark .privacy-dropdown__option:hover {
    background-color: #7ab900 !important;
    color: #000000 !important;
}

/* 5. 선택된 항목 및 Hover 효과 (다크모드) */
.theme-mastodon-bird-ui-dark .privacy-dropdown__option {
    /* 0.2s를 0.05s로 줄여서 훨씬 빠르게 반응하게 함 */
    transition: background 0.05s ease, color 0.05s ease !important; 
}

/* 선택된 항목: 쌩연두 배경 + 검정 글씨/아이콘 */
.theme-mastodon-bird-ui-dark .privacy-dropdown__option.active,
.theme-mastodon-bird-ui-dark .privacy-dropdown__option.active *,
.theme-mastodon-bird-ui-dark .privacy-dropdown__option.active i {
    background-color: #ADFF2F !important;
    color: #000000 !important;
    fill: #000000 !important;
}

/* 마우스 올린 항목(선택 안 됨): 진한 연두 배경 + 흰색 글씨/아이콘 */
.theme-mastodon-bird-ui-dark .privacy-dropdown__option:hover:not(.active),
.theme-mastodon-bird-ui-dark .privacy-dropdown__option:hover:not(.active) *,
.theme-mastodon-bird-ui-dark .privacy-dropdown__option:hover:not(.active) i {
    background-color: #7ab900 !important;
    color: #ffffff !important;
    fill: #ffffff !important;
}

/* ==========================================
   마스토돈 서버 커스텀 테마: 라이트 모드 (Light Mode)
   ========================================== */

.theme-mastodon-bird-ui-light .navigation-panel__logo {
    background-image: url('https://karmic.casa/system/media_attachments/files/116/730/170/913/496/212/original/8eaacca706abf833.png') !important;

}

/* 라이트 모드 배경화면 설정 */
.theme-mastodon-bird-ui-light {
    /* 여기에 원하는 배경 이미지 주소를 넣으세요 */
    background-image: url('https://karmic.casa/system/media_attachments/files/116/729/283/196/321/639/original/6ea12b6c34cb0078.jpg') !important;

}

/* 배경이 너무 밝거나 어두울 때 글씨가 잘 보이게 하려면 아래 코드도 추가하세요 */
.theme-mastodon-bird-ui-light .column, 
.theme-mastodon-bird-ui-light .navigation-panel, 
.theme-mastodon-bird-ui-light .drawer {
    background: rgba(255, 255, 255, 0.7) !important; /* 약간 투명한 흰색 배경 */
}

/* 오른쪽 영역(검색창, 게시물 작성)을 완전한 흰색으로 변경 */
.theme-mastodon-bird-ui-light .column, 
.theme-mastodon-bird-ui-light .drawer
{
    background-color: #FFFFFF !important;
}

/* 추가로, 배경색 변경에 따른 테두리나 구분선이 너무 밝으면 살짝 어둡게 처리 */
.theme-mastodon-bird-ui-light .column-header, 
.theme-mastodon-bird-ui-light .column-subheading 
{
    background-color: #FFFFFF !important;
    border-bottom: 1px solid #e0e0e0 !important;
}

/* ==========================================
   대시보드
   ========================================== */

/* 2. 대시보드 컬럼들을 살짝 투명하게 만들어서 배경 이미지가 비쳐 보이도록 설정 */
.theme-mastodon-bird-ui-light .column, 
.theme-mastodon-bird-ui-light .drawer, 
.theme-mastodon-bird-ui-light .columns-area__panels__main, 
.theme-mastodon-bird-ui-light .search-page__wrapper,
.theme-mastodon-bird-ui-light .columns-area__panels__pane 
{
  background-color: rgba(255, 255, 255, 0.75) !important; /* 투명도 75% */
  background-blend-mode: multiply !important;
}

/* ==========================================
   마스토돈 포인트 컬러 (#7dfa23) 맞춤형 리스트
   ========================================== */

/* [1] 게시글(툿) 본문 안에서 언급된 상대방 아이디 (@멘션) */
.theme-mastodon-bird-ui-light .status__content a.mention,
.theme-mastodon-bird-ui-light .reply-indicator__content a.mention {
  color: #64c81c !important;
}

/* [2] '게시' 버튼 및 주요 실행 버튼 배경색 */
.theme-mastodon-bird-ui-light .button, 
.theme-mastodon-bird-ui-light .button.button-primary, 
.theme-mastodon-bird-ui-light .button.button-secondary, 
.theme-mastodon-bird-ui-light .account__header__tabs__name__wrapper .button {
  background-color: #affa01 !important;
  color: #1f232b !important; /* 글자색은 어둡게 유지하여 가독성 확보 */
  font-weight: bold !important;
}

/* [3] 버튼에 마우스 올렸을 때(Hover)의 배경색 변화 */
.theme-mastodon-bird-ui-light .button:hover,
.theme-mastodon-bird-ui-light .account__header__tabs__name__wrapper .button:hover {
  background-color: #9bd402 !important;
}


/* [4] '게시하기' 및 주요 버튼 스타일 (새 포인트 컬러 적용) */
.theme-mastodon-bird-ui-light .button, .button.button-primary {
  background-color: #affa01 !important;
  color: #1f232b !important; /* 배경이 밝은 형광색이므로 글자색은 어둡게 처리하여 가독성 확보 */
}
.theme-mastodon-bird-ui-light .button:hover {
  background-color: #9bd402 !important; /* 마우스 올렸을 때 조금 더 진해지는 효과 */
}

/* 사이드바 메뉴에 마우스를 올렸을 때 연두색으로 변경 */
.theme-mastodon-bird-ui-light .navigation-bar a:hover,
.theme-mastodon-bird-ui-light .navigation-panel a:hover,
.theme-mastodon-bird-ui-light .drawer__inner a:hover {
    color: #64c81c !important; /* 연두색(GreenYellow) 코드 */
}

/* 마우스를 올렸을 때 아이콘 색상도 같이 연두색으로 변경 */
.theme-mastodon-bird-ui-light .navigation-bar a:hover i.fa,
.theme-mastodon-bird-ui-light .navigation-panel a:hover i.fa,
.theme-mastodon-bird-ui-light .drawer__inner a:hover i.fa {
    color: #64c81c !important;
}

/* '돌아가기' 버튼의 텍스트와 아이콘 색상을 연두색으로 */
.theme-mastodon-bird-ui-light .column-back-button,
.theme-mastodon-bird-ui-light .column-back-button a,
.theme-mastodon-bird-ui-light .column-back-button__icon {
    color: #64c81c !important;
}

/* 마우스를 올렸을 때도 연두색 유지 */
.theme-mastodon-bird-ui-light  .column-back-button:hover,
.theme-mastodon-bird-ui-light  .column-back-button a:hover {
    color: #64c81c !important;
    opacity: 0.8 !important;
}

/* ====================================================
     팝업창
   ==================================================== */

/* 팝업창 내 버튼 배경 및 텍스트 스타일 통일 */
.theme-mastodon-bird-ui-light .modal-root .button,
.theme-mastodon-bird-ui-light .modal-root .button.button-primary,
.theme-mastodon-bird-ui-light .modal-root .text-btn {
    background: transparent !important; /* 배경을 투명하게 만듦 */
    border: 1px solid #64c81c !important; /* 초록색 테두리 추가 */
    color: #64c81c !important;           /* 글자색을 초록색으로 */
}

/* 2. 마우스 올렸을 때 효과 */
.theme-mastodon-bird-ui-light .button:hover, 
.theme-mastodon-bird-ui-light .button.button-primary:hover, 
.theme-mastodon-bird-ui-light .button.button-secondary:hover,
.theme-mastodon-bird-ui-light .account__header__tabs__name__wrapper .button:hover {
  background-color: #9bd402 !important;
  border-color: #9bd402 !important;
}

/* 마우스를 올렸을 때 반전 효과 */
.theme-mastodon-bird-ui-light .modal-root .button:hover,
.theme-mastodon-bird-ui-light .modal-root .text-btn:hover {
    background: #ADFF2F !important; /* 배경을 초록색으로 채움 */
    color: #000000 !important;      /* 글자는 검은색으로 */
}

/* [취소] 버튼도 동일한 버튼 스타일로 맞추기 */
.theme-mastodon-bird-ui-light .modal-root a[role="button"] {
    background: transparent !important;
    border: 1px solid #64c81c !important;
    color: #64c81c !important;
    padding: 5px 15px !important;
    text-decoration: none !important;
}

/* 팝업(Modal) 창의 모든 버튼과 링크 텍스트를 초록색으로 강제 변경 */
.theme-mastodon-bird-ui-light .modal-root button, 
.theme-mastodon-bird-ui-light .modal-root .button, 
.theme-mastodon-bird-ui-light .modal-root .text-btn, 
.theme-mastodon-bird-ui-light .modal-root a {
    color: #64c81c !important;
}

/* 팝업 내에서 '확인'이나 '게시' 같은 특정 버튼의 글자색까지 포함 */
.theme-mastodon-bird-ui-light .modal-root .button.button-primary {
    color: #1f232b !important; /* 배경이 초록색일 땐 글자는 어둡게 */
}

/* ====================================================
     중앙 타임라인
   ==================================================== */


/* 중앙 타임라인과 게시글 영역을 게시글 작성창과 같은 흰색으로 고정 */
.theme-mastodon-bird-ui-light .column, 
.theme-mastodon-bird-ui-light .drawer, 
.theme-mastodon-bird-ui-light .columns-area__panels__main, 
.theme-mastodon-bird-ui-light .scrollable {
    background-color: #FFFFFF !important; /* 작성창 배경과 동일한 색상 */
    background-image: none !important;    /* 배경 이미지 비침 차단 */
}

/* 1. 홈 헤더 및 타이틀 영역 */
.theme-mastodon-bird-ui-light .column-header, 
.theme-mastodon-bird-ui-light .column-header__wrapper,
.theme-mastodon-bird-ui-light .column-header__title {
  background: #FFFFFF !important;
}

/* 2. 설정 영역(column-settings) */
.theme-mastodon-bird-ui-light .column-settings,
.theme-mastodon-bird-ui-light .column-settings__wrapper {
  background: #FFFFFF !important;
}

/* 3. 게시창 영역(compose-panel) */
.theme-mastodon-bird-ui-light .compose-panel,
.theme-mastodon-bird-ui-light .compose-form {
  background: rgba(255, 255, 255, 0.25) !important;
}

/* 4. 검색창 및 검색 입력창 */
.theme-mastodon-bird-ui-light .search, 
.theme-mastodon-bird-ui-light .search__input {
  background: #FFFFFF !important;
}

/* 1. 상단 탭 영역 */
.theme-mastodon-bird-ui-light .tabs-bar,
.theme-mastodon-bird-ui-light .tabs-bar__portal,
.theme-mastodon-bird-ui-light .tabs-bar__wrapper,
.theme-mastodon-bird-ui-light .tabs-bar__title,
.theme-mastodon-bird-ui-light .column-back-button,
.theme-mastodon-bird-ui-light .column-header__buttons {
  background-color: #FFFFFF !important;
}

/* 2. 게시창 하단 및 입력 영역 */
.theme-mastodon-bird-ui-light .compose-form__footer,
.theme-mastodon-bird-ui-light .compose-form__highlightable,
.theme-mastodon-bird-ui-light .autosuggest-textarea__textarea {
  background-color: #eaf5f1 !important;
}

/* 3. 혹시 모를 배경색 변수 덮어쓰기 (입력창용) */
.theme-mastodon-bird-ui-light .autosuggest-textarea {
  background-color: #eaf5f1 !important;
}



/* ====================================================
     게시글 입력창 (오른쪽 바)
   ==================================================== */

/* 1. 게시물 작성창 전체 배경을 조금 더 깔끔하게 */
.theme-mastodon-bird-ui-light .compose-form {
    background-color: rgba(255, 255, 255, 0) !important;
}

/* 2. '지금 무슨 생각을 하고 있나요?' 입력 영역 */
.theme-mastodon-bird-ui-light .compose-form .autosuggest-textarea__textarea {
    color: #000000 !important;           /* 입력되는 글자색은 검정색 */
    background-color: transparent !important;
}

/* 3. 게시물 작성창 하단 아이콘들도 연두색으로 */
.theme-mastodon-bird-ui-light .compose-form .icon-button {
    color: #64c81c !important;
}

/* 4. 메뉴 항목에 마우스를 올렸을 때 연두색으로 변화 */
.theme-mastodon-bird-ui-light .privacy-dropdown__option:hover {
    background-color: #7ab900 !important;
    color: #000000 !important;
}

/* 5. 선택된 항목 및 Hover 효과 (라이트모드) */
.theme-mastodon-bird-ui-light .privacy-dropdown__option {
    /* 0.2s를 0.05s로 줄여서 훨씬 빠르게 반응하게 함 */
    transition: background 0.05s ease, color 0.05s ease !important;
}

/* 선택된 항목: 쌩연두 배경 + 검정 글씨/아이콘 */
.theme-mastodon-bird-ui-light .privacy-dropdown__option.active,
.theme-mastodon-bird-ui-light .privacy-dropdown__option.active *,
.theme-mastodon-bird-ui-light .privacy-dropdown__option.active i {
    background-color: #ADFF2F !important;
    color: #000000 !important;
    fill: #000000 !important;
}

/* 마우스 올린 항목(선택 안 됨): 연한 연두 배경 + 흰색 글씨/아이콘 */
.theme-mastodon-bird-ui-light .privacy-dropdown__option:hover:not(.active),
.theme-mastodon-bird-ui-light .privacy-dropdown__option:hover:not(.active) *,
.theme-mastodon-bird-ui-light .privacy-dropdown__option:hover:not(.active) i {
    background-color: #d6ff89 !important;
    color: #000000 !important;
    fill: #000000 !important;
}