/*=================타임라인=================*/

/* 툿 텍스트 입력창 최대 높이 400px, 넘치면 스크롤 */
/* 1) 외부 래퍼에 스크롤 제거 */
.compose-form__highlightable,
.compose-form__scrollable {
  max-height: none    !important;
  overflow-y: visible !important;
}

/* 2) 텍스트 입력창만 400px 넘으면 스크롤 */
.autosuggest-textarea__textarea {
  max-height: 400px   !important;
  overflow-y: auto    !important;
}



/* 멘션 길어질 때 더보기 & 번역 버튼 색 변경 */
.status__content__read-more-button,
.status__content__translate-button {
  color: #79AA83 !important;
}

/* ─── 1. 해시태그 색 변경 ─── */
a.hashtag {
  color: #79AA83 !important;
}
a.hashtag:hover {
  color: #79AA83 !important;
  text-decoration: none !important;
}

/* ─── CW 박스 테두리 & 투명 배경 ─── */
div.content-warning {
  border: 1px solid rgba(121, 170, 131, 0.8) !important;
  background-color: transparent      !important;
}

/* ─── “더 보기” 배경 투명 처리 ─── */
div.content-warning > button,
div.content-warning .link-button {
  background-color: transparent !important;
}

/* ─── “더 보기” 텍스트 색 & 밑줄 제거 ─── */
div.content-warning button.link-button,
div.content-warning button.link-button span {
  color:           rgba(121, 170, 131, 1) !important;
  text-decoration: none                       !important;
}

/* 링크 텍스트를 녹색(#83A17B)으로 변경 */
.status__content a,
.reply-indicator__content a,
.edit-indicator__content a {
  color: #83A17B !important;
}

/* ─── 개인 멘션 본문 링크 색상 및 밑줄 색 변경 ─── */
.status.status-private.status-reply 
  .status__content.status__content--with-action 
  p a span.ellipsis {
  color:                 #83A17B !important;
  text-decoration:       underline !important;
  text-decoration-color: #83A17B !important;
}

/* ─── 개인 멘션 본문 링크 글자색 & 밑줄 색 재적용 ─── */
.status.status-private.status-reply 
  .status__content.status__content--with-action 
  p a,
.status.status-private.status-reply 
  .status__content.status__content--with-action 
  p a span.ellipsis {
  color:           #83A17B !important;  /* 글자색 덮어쓰기 */
} 

/* ─── 개인 멘션 본문 링크 밑줄 제거 ─── */
.status.status-private.status-reply 
  .status__content.status__content--with-action 
  p a,
.status.status-private.status-reply 
  .status__content.status__content--with-action 
  p a span.ellipsis {
  /* 밑줄 및 border-bottom 제거 */
  text-decoration-line: none !important;
  text-decoration-color: transparent !important;
  border-bottom: none !important;
}  

/* 언핸들드 링크 텍스트 및 밑줄 색상을 동일한 녹색(#83A17B)으로 변경 */
.edit-indicator__content a.unhandled-link,
.reply-indicator__content a.unhandled-link,
.status__content a.unhandled-link {
  color: #83A17B !important;
  text-decoration-color: #83A17B !important;
}

/* ─── Status Card 전체 hover 시 제목·호스트·설명 텍스트 색 변경 ─── */
a.status-card:hover .status-card__title,
a.status-card:hover .status-card__host,
a.status-card:hover .status-card__host span,
a.status-card:hover .status-card__description {
  color: #83A17B !important;
}


/* 버튼이 호버, 포커스 또는 액티브 상태일 때 초록색으로 */
.button:hover,
.button:focus,
.button:active {
  background-color: #83A17B !important;
  border-color:     #83A17B !important;
  color:            #ffffff !important;
}

/* 만약 SVG 아이콘이 들어가 있다면, 아이콘 채우기 색상도 함께 변경 */
.button:hover svg path,
.button:focus svg path,
.button:active svg path {
  fill: #83A17B !important;
}

/* 취소 글씨색변경 */
#mastodon > div > div > div.modal-root > div > div.modal-root__container > div > div.safety-action-modal__bottom > div > button.link-button > span {
  color: #862728 !important;
}

/* 기본 상태에서 밑줄 제거 */
#mastodon > div > div > div.modal-root > div > div.modal-root__container > div > div.safety-action-modal__bottom > div > button.link-button > span {
  text-decoration: none !important;
}

/* 밑줄 색 변경 #862728로 변경 */
.link-button {
  color: #862728 !important;
}

/* 멘션 스팬 밑줄 완전 제거 */
.status__content a.mention span,
.reply-indicator__content a.mention span,
.edit-indicator__content a.mention span,
.link-footer a.mention span,
.status__content__read-more-button.mention span,
.status__content__translate-button.mention span {
  text-decoration: none !important;
  text-decoration-line: none !important;
  text-decoration-color: transparent !important;
  border-bottom: none !important;
  background-image: none !important;
  box-shadow: none !important;
}
/*=================알림 창=================*/

/* ─── 알림 배지 숫자 배경 & 글자색 변경 ─── */
.icon-with-badge__badge {
  background-color: #9D3B3C !important;
  color:            #ffffff !important;
  border-color:     #9D3B3C !important; /* 혹시 테두리가 있으면 동일 색으로 */
}

/* 새게시글 호버 상태 */
#mastodon > div > div > div.columns-area__panels
  > div.columns-area__panels__pane.columns-area__panels__pane--start.columns-area__panels__pane--navigational
  > div > div > div.navigation-panel__menu
  > a.button.navigation-panel__compose-button:hover
  > svg > path {
  fill: #ffffff !important;
}



/* ─── 알림 필터 바: 활성 탭 ::before 색 변경 ─── */
.notification__filter-bar button.active::before,
.notification__filter-bar button[aria-pressed="true"]::before {
  background-color: #9D3B3C !important;
}

/* 활성화된 섹션 헤드라인 및 알림 필터 바의 before 가상 요소를 초록색으로 */
.account__section-headline a.active:before,
.account__section-headline button.active:before,
.notification__filter-bar a.active:before,
.notification__filter-bar button.active:before {
  background-color: #83A17B !important;
  border-color:     #83A17B !important; /* 필요시 테두리 색상도 함께 변경 */
}

/*=================개인적인 멘션=================*/

/* 읽지 않은 대화(conversation__unread) 배경을 빨간색(#ff0000)으로 변경 */
.conversation__unread {
  background-color: #862728 !important;
}

/* Direct 상태 전체에 5% 블랙 오버레이 */
.layout-single-column .status__wrapper-direct,
.layout-single-column .detailed-status-direct {
  background-color: rgba(0, 0, 0, 0.1) !important;
}

/* Direct notifications 및 wrapper 배경색을 반투명 검정으로 변경 */
/* 다이렉트 DM 알림 배경 */
.notification-group--direct,
.notification-ungrouped--direct,
.status__wrapper-direct {
  background-color: rgba(0, 0, 0, 0.15) !important;
}

/* 답글/멘션 알림 배경 (필요한 경우 추가) */
.notification-ungrouped--mention {
  background-color: rgba(0, 0, 0, 0.15) !important;
}


/* 다이렉트 알림 헤더와 프리펜드(접두어) 텍스트 색상만 빨간색으로 */
.notification-ungrouped--direct .notification-ungrouped__header,
.notification-ungrouped--direct .status__prepend,
.status__wrapper-direct .notification-ungrouped__header,
.status__wrapper-direct .status__prepend {
  color: #da6b6b !important;
}

/* 읽지 않은 알림·스레드 스트라이프 색 변경 */
.notification.unread::before,
.status__wrapper.unread::before,
.conversation.unread::before {
  border-inline-start: 4px solid #83A17B !important;
}



/* 2. prepend 영역(“개인적인 멘션”)만 배경 투명 */
.layout-single-column .status.status-direct .status__prepend {
  background-color: transparent !important;
}

/* ─── “개인적인 멘션” prepend 아이콘 & 텍스트 색 변경 ─── */
.status__prepend .status__prepend__icon svg,
.status__prepend .status__prepend__icon svg path,
.status__prepend > span {
  color: #7B7B7B !important;  /* 텍스트 색 */
  fill:  #7B7B7B !important;  /* SVG 아이콘 색 */
}
/* 1) 삼각형 컨테이너 설정 */
.notification-ungrouped--mention.notification-ungrouped--direct,
.detailed-status__wrapper-direct,
.status__wrapper-direct.status__wrapper-reply .status__prepend,
.detailed-status__wrapper-direct > .detailed-status > .status__prepend,
#mastodon > div > div > div.columns-area__panels > div.columns-area__panels__main > div.columns-area.columns-area--mobile > div > div > div:nth-child(1) > div > div.status__prepend,
.status__prepend:has(.status__prepend__icon .icon-at) {
  position: relative !important;
  overflow: visible   !important;
}

/* 2) 기본 삼각형 (::before) 스타일 */
.notification-ungrouped--mention.notification-ungrouped--direct::before,
.detailed-status__wrapper-direct::before,
.status__wrapper-direct.status__wrapper-reply .status__prepend::before,
#mastodon > div > div > div.columns-area__panels > div.columns-area__panels__main > div.columns-area.columns-area--mobile > div > div > div:nth-child(1) > div > div.status__prepend::before,
.status__prepend:has(.status__prepend__icon .icon-at)::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 0;
  border-width: 0 0 16px 16px;
  border-style: solid;
  border-color: transparent transparent #c73838 transparent;
  transform: rotate(-90deg);
}

/* 3) 상세창 내부 삼각형 오버라이드 */
.detailed-status__wrapper-direct > .detailed-status > .status__prepend::before {
  border-color: transparent transparent #c73838 transparent !important;
  transform: rotate(-90deg) !important;
  transform-origin: 100% 0;
  z-index: 1;
}

/* 4) 풀 라인 before 색 변경 */
.status__line--full::before {
  background-color: #3a3a50 !important;
}

/* 5) 첫 번째 스레드 항목 border-top 제거 */
.status--first-in-thread.status--in-thread,
.status--first-in-thread.status--in-thread .status__line {
  border-top: none !important;
}




/* '@' 아이콘(wrapper)에 왼쪽 여백 추가 */
.status__prepend > .status__prepend__icon {
  margin-left: 30px !important;
}

/*=================프로필 화면=================*/

/* 돌아가기 버튼 및 아이콘 텍스트 녹색 */
.column-back-button, 
.column-back-button svg path {
  color: #AAE1B5 !important;
}

/* 돌아가기 버튼 호버 시 밑줄 제거 & 텍스트 흰색 */
.column-back-button:hover,
.column-back-button:hover svg path {
  text-decoration: none !important;
  color: #ffffff     !important;
}

/* 도메인 필(pill) 배경에 #862728 20% 오버레이, 텍스트는 빨간색 */
.account__domain-pill {
  background-color: rgba(134, 39, 40, 0.2) !important;
  color:            #DE0003           !important;
}

/* 프로필 편집 버튼 텍스트 색상을 녹색(#83A17B)으로 변경 */
.button.button-secondary {
  color: #83A17B !important;
}

/* Owner 요소의 테두리 색상 및 텍스트 색상을 녹색(#83A17B)으로 변경 */
.account-role {
  border: 1px solid #83A17B !important;
  color:  #83A17B !important;
}

/*=================기타 CSS=================*/




/*=================툿 쓰기 창=================*/


/* ─── 아이콘 버튼 클릭/활성 시 배경색 변경 ─── */
.compose-form__buttons .icon-button.inverted:active,
.compose-form__buttons .icon-button.inverted.active {
  background-color: #9D3B3C !important;
}



/* ─── 이모지 피커: 선택된 카테고리 아이콘 색 변경 ─── */
body > div:nth-child(6) .emoji-mart-bar nav button.emoji-mart-anchor.emoji-mart-anchor-selected span,
body > div:nth-child(6) .emoji-mart-bar nav button.emoji-mart-anchor.emoji-mart-anchor-selected svg,
body > div:nth-child(6) .emoji-mart-bar nav button.emoji-mart-anchor.emoji-mart-anchor-selected svg path {
  color: #9D3B3C !important;
  fill:  #9D3B3C !important;
}

/* ─── 이모지 피커: 하단 언더라인(.emoji-mart-anchor-bar) 색 변경 ─── */
body > div:nth-child(6) .emoji-mart-bar nav span.emoji-mart-anchor-bar {
  background-color: #9D3B3C !important;
}


/* ─── 내용 경고 입력창 배경 & 글자색 변경 ─── */
.spoiler-input__input {
  background-color: rgba(0, 0, 0, 0.1) !important;
  color:            #83A17B          !important;
}



/* ─── 기본 테두리 색상 유지 ─── */
.compose-form__highlightable {
  border: 1px solid var(--background-border-color);
}

/* ─── 포커스 진입 시에만 1초짜리 fade 애니메이션 실행 ─── */
@keyframes focusBorderFade {
  0%   { border-color: #83A17B; }
  100% { border-color: var(--background-border-color); }
}

.compose-form__highlightable:focus-within {
  /* border-width/style 은 기본에서 가져오고, 색만 애니메이트 */
  animation: focusBorderFade 1s ease-out forwards;
}

/* 팔로워, 한국어 포커스·액티브 백그라운드 색 변경 */
.dropdown-button.active,
.privacy-dropdown__option:focus,
.privacy-dropdown__option.active,
.language-dropdown__dropdown__results__item:focus,
.language-dropdown__dropdown__results__item.active {
  background-color: #d69999 !important;
}

/* 개인적인 멘션 경고창 배경 색 */
.compose-form__warning {
  background-color: #cebebe !important;
}

/* Column header 뒤로 가기 버튼 색상 변경 */
.column-header .column-header__back-button {
  color: #AAE1B5 !important;
}

.column-header .column-header__back-button svg {
  fill: #AAE1B5 !important;
}

/* Direct 상태 상세 보기 및 액션 바 배경색 변경 */
.detailed-status__wrapper-direct .detailed-status,
.detailed-status__wrapper-direct .detailed-status__action-bar {
  background: rgba(0, 0, 0, 0.15) !important;
}

/* Direct 상태 상세 보기에서 @ 아이콘만 빨간색으로 변경 */
/* 1) 부모 color 속성으로 제어 */
.detailed-status__wrapper-direct .status__prepend {
  color: #7B7B7B !important;
}





/* 스크롤바 thumb 색상을 초록색으로 변경 */
::-webkit-scrollbar-thumb {
  background-color: #798775 !important;
}

/* ─── 호버가 아닐 때만 secondary 버튼 테두리를 녹색으로 ─── */
.button.button-secondary:not(:hover) {
  border-color: #83A17B !important;
}

/* ─── 호버가 아닐 때만 destructive+secondary 버튼 텍스트·테두리를 녹색으로 ─── */
.button.button--destructive.button-secondary:not(:hover) {
  color:        #83A17B !important;
  border-color: #83A17B !important;
}






/* 빈 컬럼 안내 및 팔로우 요청 해제 안내 링크 색상 변경 */
.empty-column-indicator a,
.follow_requests-unlocked_explanation a {
  color: #83A17B !important;
}

/* 타임라인 힌트 링크 호버·포커스·액티브 상태 색상 변경 */
.timeline-hint a {
  color: #83A17B !important;
}

/* 호버·포커스·액티브 상태: 밑줄 제거, 색 유지 */
.timeline-hint a:hover,
.timeline-hint a:focus,
.timeline-hint a:active {
  color:           #83A17B !important;
}


/* 활성 컬럼 헤더 아이콘(svg path) 색상을 #83A17B으로 변경 */
.column-header.active .column-header__icon svg path {
  fill: #83A17B !important;
}

/* 만약 color 속성으로 제어되는 아이콘이라면 */
.column-header.active .column-header__icon {
  color: #83A17B !important;
}

/* ─── .account__avatar 기본 배경 제거 ─── */
.account__avatar {
  background: none !important;
  background-color: transparent !important;
}


/* 읽지 않은(언리드) 알림 스트라이프 색 바꾸기 */
.notification-group--unread::before,
.notification-ungrouped--unread::before {
  border-inline-start: 4px solid #83A17B !important;
}

/* 열(Header) 탭 활성화 시 박스 쉐도우 색 변경 */
.column-header__wrapper.active {
  /* #83A17B를 RGB로 변환한 값 + 투명도 .3 유지 */
  box-shadow: 0 1px rgba(131, 161, 123, 0.3) !important;
}

/* 활성화 탭 뒤의 그라디언트 컬러 변경 */
.column-header__wrapper.active::before {
  /* 앞 부분 컬러 #83A17B, 알파 .23 / 뒷 부분 알파 0, 60% 지점 유지 */
  background: radial-gradient(
    ellipse,
    rgba(131, 161, 123, 0.23),
    rgba(131, 161, 123, 0) 60%
  ) !important;
}

/* 프로필 헤더 아바타 테두리 제거 */
.account__header__bar .avatar .account__avatar {
  border: none !important;
}

















/* ─── 배경화면 변경 ─── */

body.app-body {
  background-image: url("https://wsb.hostdon.ne.jp/sgm491/media_attachments/files/114/838/720/460/728/496/original/8ffcabe7f4122997.png") !important;
  background-repeat:    no-repeat         !important;
  background-position:  center center     !important;
  background-size:      cover            !important;
  background-attachment: fixed           !important;
}

/* ─── Status Card 제목 Hover 색 변경 ─── */
.status-card__title:hover,
a.status-card__link:hover .status-card__title {
  color: #83A17B !important;
}


/* ─── 1. 기본 로고 숨기기 ─── */
.column-link.column-link--logo > svg {
  display: none !important;
}

/* ─── 2. ::before 로 직접 이미지 삽입 ─── */
.column-link.column-link--logo::before {
  content: url('https://wsb.hostdon.ne.jp/sgm491/media_attachments/files/114/838/694/128/151/412/original/620cec438d6df053.png') !important;
  display: block !important;
  width: 261px !important;    /* viewBox 비율에 맞춰 조정 */
  height: 174px !important;
  margin: 0 auto !important;  /* 가운데 정렬 */
}






/* ─── 2. 사이드바 활성 메뉴 아이콘·텍스트 색 변경 ─── */
a[aria-current="page"],
a[aria-current="page"] svg,
a[aria-current="page"] .label {
  color: #79AA83 !important;
  fill:  #79AA83 !important;
  stroke: #79AA83 !important;
}


/* ─────── 기본(라이트) 모드 ─────── */
.compose-form__actions .icon-button {
  color: #8A8A8A !important;
}
.dropdown-button {
  border-color: #9D3B3C !important;
  color: #9D3B3C !important;
}


/* 공통 버튼 스타일 */
.button {
  background-color: #862728;
  color: #fff;
  border-radius: 8px;
}
.button:hover {
  background-color: #83A17B;
}

/* 1) 원래 Mastodon 로고 숨기기 */
.column-header__title > img.logo.logo--icon {
  display: none !important;
}

/* 0) 기본: 항상 숨기기 */
button.column-header__title::before {
  content: none !important;
  display: none !important;
}

/* 1) 창너비 ≤ 1174px 일 때만 커스텀 로고 보이기 */
@media (max-width: 1174px) {
  button.column-header__title::before {
    content: "" !important;
    display: inline-block !important;
    width: 50px !important;
    height: 35px !important;
    background-image: url("https://wsb.hostdon.ne.jp/sgm491/media_attachments/files/114/838/694/128/151/412/original/620cec438d6df053.png") !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: contain !important;
    margin-right: 8px !important;
    vertical-align: middle !important;
  }
}

/* 2) 창너비 ≥ 1175px 일 때는 확실히 숨기기 */
@media (min-width: 1175px) {
  button.column-header__title::before {
    content: none !important;
    display: none !important;
  }
}

/* 점 세개 클릭(pressed) 상태 */
.icon-button:active,
.icon-button:focus,        /* 클릭 후 포커스가 남아 있을 때 */
.icon-button.active {      /* JS 등으로 active 클래스가 붙는 경우 */
  color: #c73838 !important;
}

/* SVG 아이콘 안의 path 색상까지 변경 */
.icon-button:active svg path,
.icon-button:focus svg path,
.icon-button.active svg path {
  fill: #c73838 !important;
}