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

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;
}

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

.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;
}


/* 타임라인에서 디엠 숨김 */
[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;
}

/* 고급 인터페이스(덱 기능)에서 활성화 별 붕 뜨는 이팩트 제거 */
/* (.account-timeline__header가 들어있는 프로필 기둥은 작동 대상에서 완벽히 제외합니다)  이거 지우면 프로필 들어갔을 때 별-숫자 간격 벌어짐 */
.column:not(:has(.account-timeline__header)) .status__action-bar .status__action-bar__button.star-icon,
.column:not(:has(.account-timeline__header)) .status__action-bar .status__action-bar__button.star-icon.active,
.column:not(:has(.account-timeline__header)) .status__action-bar .status__action-bar__button.star-icon.activate {
    position: relative !important;
    top: 0 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
}

/* 2. 고급 인터페이스(덱 기능)에서 별 아이콘(SVG)이 혼자 커지는 확대 효과 차단 */
.column:not(:has(.account-timeline__header)) .status__action-bar .status__action-bar__button.star-icon svg,
.column:not(:has(.account-timeline__header)) .status__action-bar .status__action-bar__button.star-icon:hover svg,
.column:not(:has(.account-timeline__header)) .status__action-bar .status__action-bar__button.star-icon.active svg,
.column:not(:has(.account-timeline__header)) .status__action-bar .status__action-bar__button.star-icon.activate svg {
    position: static !important;
    transform: none !important;
    scale: none !important;
    transition: none !important;
    animation: none !important;
}


/* ==========================================
   가입/로그인 화면 조정 (디폴트 테마에 따라 색 조정 필요)
   ========================================== */

/* 입력창 자체의 배경색 강제 고정 (#EEFFEB) */
.sign-up .label_input__wrapper input:focus {
  background-color: #EEFFEB !important;
}

/* 자동 완성 시 배경색과 글자색을 초록색 톤으로 고정 */
.sign-up input:-webkit-autofill,
.sign-up input:-webkit-autofill:hover, 
.sign-up input:-webkit-autofill:focus {
  -webkit-text-fill-color: #000000 !important; /* 글자색 */
  -webkit-box-shadow: 0 0 0px 1000px #EEFFEB inset !important; /* 배경색 */
  transition: background-color 5000s ease-in-out 0s; /* 색상이 변하지 않게 고정 */
}

/* 사용자명 입력창의 포커스(클릭/입력) 시 테두리 색상 변경 */
.label_input__wrapper input:focus,
.sign-up .input.password input {
  border-color: #78d237 !important;
  box-shadow: 0 0 0 1px #78d237 !important;
}

/* 입력창 전체의 기본 테두리 색상도 맞추고 싶다면 추가 */
.label_input__wrapper input {
  border-color: #78d237 !important;
}

.label_input__wrapper input:focus {
  border-color: #78d237 !important;
  box-shadow: none !important; /* 그림자 효과 제거 */
}


/* 추가: 혹시 모를 내부 요소의 색상값까지 모두 초록색으로 고정 */
.progress-tracker li.active .circle::after,
.progress-tracker li.active .circle::before {
  background-color: #ADFF2F !important;
  border-color: #ADFF2F !important;
  box-shadow: none !important;
}

/* 1. 완료된 단계(completed)의 배경색 및 아이콘 */
.progress-tracker li.completed .circle {
  background-color: #ADFF2F !important;
  border-color: #ADFF2F !important;
}

/* completed 단계의 체크 아이콘(SVG)을 검정색으로 변경 */
.progress-tracker li.completed .circle svg {
  color: #000 !important; /* 검정색 */
}

/* 2. active 상태의 내부 원 아이콘 색상 변경 */
.progress-tracker li.active .circle {
  border-color: #ADFF2F !important; /* 원 테두리 */
}

/* 완료된 선(Separator)의 색상 변경 */
.progress-tracker li.separator.completed {
  background-color: #ADFF2F !important;
}

/* 2. active 상태일 때 원 내부의 작은 점(::after) 색상 변경 */
.progress-tracker li.active .circle::after {
  background-color: #ADFF2F !important;
}

/* 완료된 선(Separator)의 색상 변경 */
.progress-tracker li.separator.completed {
  background-color: #ADFF2F !important;
}

/* 개인정보처리방침 링크 색상 변경 */
label[for="user_agreement"] a {
  color: #ADFF2F !important; /* 원하시는 초록색 */
  text-decoration: underline; /* 밑줄 유지 (원하시면 none으로 변경 가능) */
}

/* ==========================================
   환경설정 란 로고/테마색 바꾸기 (라이트/다크 조정 필요)
   ========================================== */

/* 일반 버튼(btn 클래스)들의 배경색과 테두리를 연두색으로 */
.button,
.btn {
    background-color: #ADFF2F !important;
    border-color: #ADFF2F !important;
    color: #000 !important; /* 가독성을 위해 글자색은 검정 */
}

/* 사이드바는 절대 건드리지 않고, '프로필 편집' 탭 버튼만 타겟팅 */
#edit_profile.selected,
a#edit_profile.selected,
#privacy_reach.selected,
a#privacy_reach.selected,
#verification.selected,
a#verification.selected {
    background-color: #ADFF2F !important;
    border-color: #ADFF2F !important;
    color: #000 !important;
}

/* 탭 버튼 내 아이콘 색상 변경 */
#edit_profile.selected svg {
    fill: #000 !important;
}

/* 체크박스 및 라디오 버튼(설정 페이지의 파란색 점들)을 연두색으로 */
input[type="checkbox"]:checked,
input[type="radio"]:checked {
    accent-color: #ADFF2F !important;
    outline-color: #ADFF2F !important;
}


/* 환경설정 로고 이미지 숨기기 */
.logo.logo--icon, .logo.logo--wordmark {
    display: none !important;
}

/* 환경설정 로고 테마별 배경 적용 (왼쪽 여백을 background-position으로 처리) */
.theme-mastodon-bird-ui-dark a[href="/"]:has(.logo--icon),
.theme-mastodon-bird-ui-light a[href="/"]:has(.logo--icon) {
    display: block !important;
    width: 100% !important;
    height: 160px !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    /* 'left 50px'은 왼쪽에서 50px 띄우라는 뜻입니다. 원하는 만큼 숫자를 조절하세요 */
    background-position: 20px center !important; 
}

/* 환경설정 로고 테마별 이미지 주소 */
.theme-mastodon-bird-ui-dark a[href="/"]:has(.logo--icon) {
    background-image: url('https://karmic.casa/system/media_attachments/files/116/730/170/902/136/956/original/fc449ccbe4546d00.png') !important;
}

.theme-mastodon-bird-ui-light a[href="/"]:has(.logo--icon) {
    background-image: url('https://karmic.casa/system/media_attachments/files/116/730/170/913/496/212/original/8eaacca706abf833.png') !important;
}


/* 선택한 사이드바 왼쪽 바 생성(지우면 없어짐) */
.simple-navigation ul li.selected a,
.simple-navigation ul li.selected a:hover,
li.selected a.selected {
    background: transparent !important;
    border-left: 4px solid !important;
}

/* 다크 모드일 때 (밝은 연두색 포인트) */
.theme-mastodon-bird-ui-dark .simple-navigation ul li.selected a,
.theme-mastodon-bird-ui-dark li.selected a.selected {
    color: #ADFF2F !important;
    border-left-color: #ADFF2F !important;
}
.theme-mastodon-bird-ui-dark .simple-navigation ul li.selected a svg,
.theme-mastodon-bird-ui-dark li.selected a.selected svg {
    fill: #ADFF2F !important;
}

/* 라이트 모드일 때 (조금 더 진한 연두색 포인트) */
.theme-mastodon-bird-ui-light .simple-navigation ul li.selected a,
.theme-mastodon-bird-ui-light li.selected a.selected {
    color: #7ab900 !important;
    border-left-color: #7ab900 !important;
}
.theme-mastodon-bird-ui-light .simple-navigation ul li.selected a svg,
.theme-mastodon-bird-ui-light li.selected a.selected svg {
    fill: #7ab900 !important;
}

/* 4. 마우스 호버(hover) 시 반응도 테마별로 적용 */
.theme-mastodon-bird-ui-dark .simple-navigation ul li a:hover { color: #ADFF2F !important; }
.theme-mastodon-bird-ui-dark .simple-navigation ul li a:hover svg { fill: #ADFF2F !important; }

.theme-mastodon-bird-ui-light .simple-navigation ul li a:hover { color: #7ab900 !important; }
.theme-mastodon-bird-ui-light .simple-navigation ul li a:hover svg { fill: #7ab900 !important; }


/* 환경설정 선택된 텍스트 초록색으로(다크 모드) */
.theme-mastodon-bird-ui-dark .filters a.selected {
    color: #ADFF2F !important;
    border-bottom: 2px solid #ADFF2F !important;
    font-weight: bold;
}

/* 환경설정 선택된 텍스트 초록색으로(라이트 모드) */
.theme-mastodon-bird-ui-light .filters a.selected {
    color: #7ab900 !important;
    border-bottom: 2px solid #7ab900 !important;
    font-weight: bold;
}

/* 계정 설정 칸 텍스트 연두색으로(다크 모드) */
.theme-mastodon-bird-ui-dark .muted-hint a,
.theme-mastodon-bird-ui-dark .muted-hint a:hover,
.theme-mastodon-bird-ui-dark .table-action-link,
.theme-mastodon-bird-ui-dark .positive-hint {
    color: #ADFF2F !important;
}

/* 계정 설정 칸 텍스트 연두색으로(라이트 모드) */
.theme-mastodon-bird-ui-light .muted-hint a,
.theme-mastodon-bird-ui-light .muted-hint a:hover,
.theme-mastodon-bird-ui-light .table-action-link,
.theme-mastodon-bird-ui-light .positive-hint {
    color: #7ab900 !important;
}

/* 게시물 자동 삭제 부분 텍스트 연두색으로(다크 모드) */
.theme-mastodon-bird-ui-dark .flash-message {
    border: 1px solid #ADFF2F !important;                /* 연두색 테두리 */
    color: #ADFF2F !important;                              /* 글자색도 통일 */
}

/* 게시물 자동 삭제 부분 텍스트 연두색으로(라이트 모드) */
.theme-mastodon-bird-ui-light .flash-message {
    border: 1px solid #7ab900 !important;                /* 연두색 테두리 */
    color: #7ab900 !important;                              /* 글자색도 통일 */
}

/* '정상적으로 변경되었습니다' 같은 notice(성공 알림) 채우기 스타일 */
.flash-message.notice {
    background-color: rgba(173, 255, 47, 0.1) !important; /* 아주 연한 연두색 배경 */
}

/* 3. 선택창 항목에 마우스를 올릴 때 연두색으로 변경 (안 됨!!!!!!!!!!!!) 선택된것만 연두색.. 이거 바꾸려면 터미널 가야함 */ 
select option:checked,
select option:hover {
    background-color: #ADFF2F !important;
    color: #000 !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/media_attachments/files/116/816/629/207/759/728/original/4ff6f7d7ea8a96c9.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;
  color: #1f232b !important; /* 마우스 올렸을 때 조금 더 진해지는 효과 */
}

/* 사이드바 메뉴에 마우스를 올렸을 때 연두색으로 변경 */
.theme-mastodon-bird-ui-dark .navigation-bar a:hover,
.theme-mastodon-bird-ui-dark .navigation-panel a:hover:not(.button--block),
.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,
.theme-mastodon-bird-ui-dark .column-header__back-button,
.theme-mastodon-bird-ui-dark .column-header__back-button a,
.theme-mastodon-bird-ui-dark .column-header__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__back-button,
.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;
}

/* 프로필 사진을 원형으로 만들고 배경색 변경 */
.theme-mastodon-bird-ui-dark .account__avatar, 
.theme-mastodon-bird-ui-dark .account__avatar img {
  border-radius: 50% !important;
  background-color: #0d0d0d !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: #629400 !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/816/629/223/217/233/original/dde2a9a42230599a.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:not(.button--block),
.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,
.theme-mastodon-bird-ui-light .column-header__back-button,
.theme-mastodon-bird-ui-light .column-header__back-button a,
.theme-mastodon-bird-ui-light .column-header__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;
}

.theme-mastodon-bird-ui-light .dropdown-button a.active {
    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;
}


/* ====================================================
     마스토돈 자체 포인트 컬러(파랑색) 변경 
   ==================================================== */

/* (공통)토글 버튼 포커스 시의 그림자 효과(파란 테두리) 완전 차단 */
.react-toggle:focus,
.react-toggle--focus {
    box-shadow: none !important;
    outline: none !important;
}

/* (공통)클릭하거나 포커스되었을 때 생기는 파란색 테두리(outline) 제거 */
.dropdown-button:focus,
.dropdown-button:active {
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
}

/* (공통) 검색창 기록 팝업 마우스 올렸을 때(hover) 배경색과 글자색 변경 */
.search__popout__menu__item:hover,
.search__popout__menu__item:focus {
    background-color: #ADFF2F !important; /* 연두색 배경 */
    color: #000000 !important;             /* 가독성을 위해 검정 글씨 */
    outline: none !important;
}

/* (공통) 검색창 기록 팝업 내부의 mark 태그(강조된 부분) 색상도 맞춤 */
.search__popout__menu__item:hover mark,
.search__popout__menu__item:focus mark {
    background-color: transparent !important;
    color: #000000 !important;
}


/* 1. 다크 모드일 때만 적용 */
.theme-mastodon-bird-ui-dark {
    --color-brand-longwhile-links: #ADFF2F !important;
    --color-brand-longwhile: #ADFF2F !important;
    --color-accent: #ADFF2F !important;
    --color-accent-dark: #ADFF2F !important;
}

/* 토글 버튼 호버 및 테두리/그림자 제거 */
.theme-mastodon-bird-ui-dark .react-toggle:hover .react-toggle-track,
.theme-mastodon-bird-ui-dark .react-toggle:hover:not(.react-toggle--checked) .react-toggle-track {
    background-color: #ADFF2F !important;
}

/* 토글 버튼의 모든 파란색 테두리 및 효과 제거 후 초록색 적용 */
.theme-mastodon-bird-ui-dark .react-toggle:focus .react-toggle-track,
.theme-mastodon-bird-ui-dark .react-toggle--focus .react-toggle-track {
    box-shadow: none !important;
    outline: 1px solid #ADFF2F !important;
    border: none !important; /* 테두리를 연두색으로 */
}

/* 버튼 내부의 화살표 아이콘 색상도 연두색으로 */
.theme-mastodon-bird-ui-dark .dropdown-button svg {
    fill: #ADFF2F !important;
}


/* 알림 설정 페이지 내의 '허용' 버튼만 타겟팅 (범위 좁히기) */
.theme-mastodon-bird-ui-dark .setting-text .dropdown-button,
.theme-mastodon-bird-ui-dark .app-form__toggle__toggle .dropdown-button {
    border: 1px solid #ADFF2F !important;
    background-color: transparent !important;
    color: #ADFF2F !important;
}

/* 아이콘 색상도 '허용' 버튼에서만 적용되도록 */
.theme-mastodon-bird-ui-dark .setting-text .dropdown-button svg,
.theme-mastodon-bird-ui-dark .app-form__toggle__toggle .dropdown-button svg {
    fill: #ADFF2F !important;
}

/* 다이렉트 메세지 읽지 않은 알림/메시지 표시 파란색 점을 연두색으로 변경 */
.theme-mastodon-bird-ui-dark .conversation__unread,
.theme-mastodon-bird-ui-dark .notification__unread-indicator {
    background-color: #ADFF2F !important;
}


/* 2. 라이트 모드일 때만 적용 (예: 더 어두운 초록색) */
.theme-mastodon-bird-ui-light {
    --color-brand-longwhile-links: #64c81c !important; 
    --color-brand-longwhile: #64c81c !important;
    --color-accent: #64c81c !important;
    --color-accent-dark: #64c81c !important;
}

/* 토글 버튼 호버 및 테두리/그림자 제거 */
.theme-mastodon-bird-ui-light .react-toggle:hover .react-toggle-track,
.theme-mastodon-bird-ui-light .react-toggle:hover:not(.react-toggle--checked) .react-toggle-track {
    background-color: #64c81c !important;
}

/* 토글 버튼의 모든 파란색 테두리 및 효과 제거 후 초록색 적용 */
.theme-mastodon-bird-ui-light .react-toggle:focus .react-toggle-track,
.theme-mastodon-bird-ui-light .react-toggle--focus .react-toggle-track {
    box-shadow: none !important;
    outline: 1px solid #64c81c !important;
    border: none !important; /* 테두리를 연두색으로 */
}


/* 버튼 내부의 화살표 아이콘 색상도 연두색으로 */
.theme-mastodon-bird-ui-light .dropdown-button svg {
    fill: #64c81c !important;
}


/* 알림 설정 페이지 내의 '허용' 버튼만 타겟팅 (범위 좁히기) */
.theme-mastodon-bird-ui-light .setting-text .dropdown-button,
.theme-mastodon-bird-ui-light .app-form__toggle__toggle .dropdown-button {
    border: 1px solid #64c81c !important;
    background-color: transparent !important;
    color: #64c81c !important;
}

/* 아이콘 색상도 '허용' 버튼에서만 적용되도록 */
.theme-mastodon-bird-ui-light .setting-text .dropdown-button svg,
.theme-mastodon-bird-ui-light .app-form__toggle__toggle .dropdown-button svg {
    fill: #64c81c !important;
}

/* 다이렉트 메세지 읽지 않은 알림/메시지 표시 파란색 점을 연두색으로 변경 */
.theme-mastodon-bird-ui-light .conversation__unread,
.theme-mastodon-bird-ui-light .notification__unread-indicator {
    background-color: #64c81c !important;
}