/* =========================================================
   마스토돈 사용자 정의 CSS — 옐로 테마 (정리본)
   ---------------------------------------------------------
   색을 바꾸고 싶으면 맨 위 :root 의 변수만 고치면 됩니다.
   ========================================================= */

:root {
  --main:        #D1BB00;                    /* 메인 색상 */
  --main-hover:  #CCB600;                    /* 마우스 오버 */
  --main-deep:   #8A7B00;                    /* 연한 배경 위 글씨 */
  --main-soft:   #F9F8F1;                    /* 아주 연한 배경 */
  --main-border: #E8DB80;                    /* 연한 테두리 */
  --main-faint:  rgba(209, 187, 0, 0.1);   /* 배지 배경 등 */
  --main-ring:   rgba(209, 187, 0, 0.3);   /* 포커스 테두리 */
  --text-muted:  #444b5d;                    /* 기본 회색 글씨 */
}

/* ---------------------------------------------------------
   Bird UI 파란색 변수 자체를 메인색로 덮어쓰기
   (Bird UI는 파란색을 변수로 쓰기 때문에, 여기만 바꾸면
    개별 선택자로 못 잡던 곳까지 한 번에 바뀝니다)
   --------------------------------------------------------- */
:root,
html,
html body,
body[class],
#mastodon,
.app-holder {
  --color-brand-twitter:        #D1BB00 !important;
  --color-brand-mastodon:       #D1BB00 !important;
  --color-brand-mastodon-links: #D1BB00 !important;
  --color-accent:               #D1BB00 !important;
  --color-accent-dark:          #CCB600 !important;
  --color-accent-dark-50:       rgba(204, 182, 0, 0.5) !important;
  --color-link:                 #D1BB00 !important;
  --color-hashtag:              #D1BB00 !important;
  --color-mention:              #D1BB00 !important;
}


/* =========================================================
   1. 공통 버튼
   ========================================================= */
.button,
.btn-primary,
.button--block,
button[type="submit"],
input[type="submit"] {
  background-color: var(--main) !important;
  border-color: var(--main) !important;
  color: #FFFFFF !important;
}

.button:hover,
.btn-primary:hover,
.button--block:hover,
button[type="submit"]:hover,
input[type="submit"]:hover {
  background-color: var(--main-hover) !important;
  border-color: var(--main-hover) !important;
  color: #FFFFFF !important;
}

/* <a> 태그로 만든 버튼도 글씨는 흰색 유지 */
a.button,
a.button:hover {
  color: #FFFFFF !important;
}

/* 보조 버튼 (프로필 편집 등): 연한 메인색 바탕 + 진한 메인색 글씨 */
.button.button-secondary,
a.button.button-secondary,
.account__header__tabs__buttons .button {
  background-color: var(--main-soft) !important;
  color: var(--main-deep) !important;
  border: 1px solid var(--main-border) !important;
}

.button.button-secondary:hover,
a.button.button-secondary:hover,
.account__header__tabs__buttons .button:hover {
  background-color: var(--main) !important;
  border-color: var(--main) !important;
  color: #FFFFFF !important;
}

/* 아이콘 위주 버튼 (글쓰기창 투표/이모지 버튼 등) 활성 상태 */
.text-icon-button.active,
.compose-form .icon-button.active {
  color: var(--main) !important;
}


/* =========================================================
   2. 입력창 포커스
   ========================================================= */
.simple_form input:not([type="checkbox"]):not([type="radio"]):focus,
.simple_form textarea:focus,
.simple_form select:focus,
.search__input:focus {
  border-color: var(--main) !important;
  box-shadow: 0 0 0 2px var(--main-ring) !important;
  outline: none !important;
}

/* 글 작성창은 포커스 강조선/구분선 없이 깔끔하게 */
.compose-form__highlightable,
.compose-form__highlightable.active,
.compose-form__highlightable:focus-within {
  box-shadow: none !important;
  border: none !important;
}

.autosuggest-textarea__textarea:focus {
  box-shadow: none !important;
  outline: none !important;
}

.compose-form__buttons-wrapper,
.compose-form__footer {
  border-top: none !important;
  border-bottom: none !important;
}


/* =========================================================
   3. 링크
   ========================================================= */
.status__content a,
.reply-indicator__content a,
.account__header__content a,
.account__header__fields dd a,
.announcements__item__content a,
.hashtag-bar a,
.content-wrapper a:not(.button),
.content .hint a,
.content .muted-hint a,
.simple_form .hint a,
.about__header p a,
.about__meta__column a,
.about__section__body a,
.about__footer p a,
.link-footer a,
.link-footer a strong,
.link-footer p strong,
.version {
  color: var(--main) !important;
  text-decoration: none !important;
}

.about__header p a:hover,
.about__meta__column a:hover,
.about__footer p a:hover,
.link-footer a:hover,
.content-wrapper a:not(.button):hover {
  color: var(--main-hover) !important;
  text-decoration: underline !important;
}

/* 드래그로 글자 선택했을 때 */
::selection {
  background-color: var(--main-ring);
}


/* =========================================================
   4. 탭 / 필터 / 사이드 메뉴
   ========================================================= */

/* 프로필·알림 탭 */
.tabs-bar__link.active,
.account__section-headline a.active,
.account__section-headline button.active,
.notification__filter-bar a.active,
.notification__filter-bar button.active {
  color: var(--main) !important;
  border-bottom-color: var(--main) !important;
}

.account__section-headline a.active::before,
.account__section-headline a.active::after,
.account__section-headline button.active::before,
.account__section-headline button.active::after,
.notification__filter-bar button.active::before,
.notification__filter-bar button.active::after {
  background-color: var(--main) !important;
  border-color: var(--main) !important;
}

/* 왼쪽 내비게이션 (홈, 알림 등) 선택된 메뉴 */
.column-link.active,
.column-link--transparent.active,
.navigation-panel .column-link.active {
  color: var(--main) !important;
}

.column-link.active svg,
.column-link--transparent.active svg {
  fill: var(--main) !important;
}

/* 관리자/설정 사이드바 */
.sidebar ul li.selected > a,
.sidebar ul li > a.selected {
  background-color: transparent !important;
  color: var(--main) !important;
}

.sidebar ul li.selected > a svg,
.sidebar ul li > a.selected svg {
  fill: var(--main) !important;
}

/* 설정 페이지 상단 탭 */
.content__heading__tabs a.selected {
  background-color: var(--main) !important;
  border-color: var(--main) !important;
  color: #FFFFFF !important;
  box-shadow: none !important;
}

.content__heading__tabs a.selected svg {
  fill: #FFFFFF !important;
}

/* 팔로우 목록 등 필터 ('팔로잉', '모두', '최신') */
.filter-subset a.selected {
  background-color: transparent !important;
  background-image: none !important;
  color: var(--main) !important;
  border-bottom: 2px solid var(--main) !important;
}


/* =========================================================
   5. 컬럼 헤더 (뒤로가기 / 기능 버튼)
   ========================================================= */
.column-header,
.column-header__back-button,
.column-header__back-button span,
.column-header__button,
.column-header.active .column-header__icon {
  color: var(--main) !important;
}

.column-header svg,
.column-header .icon {
  fill: var(--main) !important;
}

.column-header__back-button:hover,
.column-header__back-button:hover span,
.column-header__button:hover {
  color: var(--main-hover) !important;
}

.column-header__back-button:hover svg,
.column-header__button:hover svg {
  fill: var(--main-hover) !important;
}

/* 새 글 도착 시 헤더에 생기는 파란 그림자 */
.column-header__wrapper.active {
  box-shadow: 0 1px 0 var(--main-ring) !important;
}

.column-header__wrapper.active::before {
  background: radial-gradient(ellipse, var(--main-ring) 0%, transparent 60%) !important;
}


/* =========================================================
   6. 게시물 액션 / 로딩
   ========================================================= */

/* 부스트 활성 상태 (즐겨찾기 별·북마크 원래 색은 유지) */
.status__action-bar .icon-button.active:not(.star-icon):not(.bookmark-icon),
.detailed-status__action-bar .icon-button.active:not(.star-icon):not(.bookmark-icon) {
  color: var(--main) !important;
}

/* 더 보기 / 상단 로딩 바 / 업로드 진행바 */
.load-more,
.load-gap {
  color: var(--main) !important;
}

.loading-bar,
.upload-progress__tracker {
  background-color: var(--main) !important;
}

/* 투표 결과 막대 및 선택지 */
.poll__chart.leading {
  background-color: var(--main) !important;
}

.poll__chart {
  background-color: var(--main-border) !important;
}

.poll__input.active,
.poll__input.checkbox.active {
  background-color: var(--main) !important;
  border-color: var(--main) !important;
}

/* 공지사항 리액션 선택 상태 */
.reactions-bar__item.active {
  background-color: var(--main-faint) !important;
}

.reactions-bar__item.active .reactions-bar__item__count {
  color: var(--main) !important;
}


/* =========================================================
   7. 드롭다운 메뉴 / 공개범위 / 언어 선택
   ========================================================= */
.dropdown-menu__item a:hover,
.dropdown-menu__item a:focus,
.dropdown-menu__item a:active,
.dropdown-menu__item button:hover,
.dropdown-menu__item button:focus,
.privacy-dropdown__option:hover,
.privacy-dropdown__option.active,
.language-dropdown__dropdown__results__item:hover,
.language-dropdown__dropdown__results__item.active {
  background-color: var(--main) !important;
  color: #FFFFFF !important;
}

/* 이모지 선택창 탭 */
.emoji-mart-anchor-selected {
  color: var(--main) !important;
}

.emoji-mart-anchor-bar {
  background-color: var(--main) !important;
}


/* =========================================================
   8. 체크박스 / 라디오 / 토글
   ========================================================= */
input[type="checkbox"],
input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  display: inline-grid;
  place-content: center;
  width: 16px;
  height: 16px;
  margin: 0;
  background-color: #FFFFFF;
  border: 1px solid var(--main) !important;
  border-radius: 3px;
  outline: none !important;
  cursor: pointer;
  vertical-align: middle;
}

input[type="radio"] {
  border-radius: 50%;
}

input[type="checkbox"]:checked,
input[type="radio"]:checked {
  background-color: var(--main) !important;
  border-color: var(--main) !important;
}

/* 체크 표시 */
input[type="checkbox"]:checked::before {
  content: "";
  width: 10px;
  height: 10px;
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
  background-color: #FFFFFF;
}

/* 라디오 가운데 점 */
input[type="radio"]:checked::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #FFFFFF;
  transform: translate(-50%, -50%);
}

/* 웹 화면의 체크박스 (새 버전 마스토돈은 span으로 그림) */
.check-box--checked,
.radio-button__input.checked {
  background-color: var(--main) !important;
  border-color: var(--main) !important;
}

/* 토글 스위치 */
.toggle-switch--checked,
.react-toggle--checked .react-toggle-track,
.react-toggle--checked:hover:not(.react-toggle--disabled) .react-toggle-track {
  background-color: var(--main) !important;
}

/* 설정 화면 라디오 버튼 목록: 제목 옆에 바짝 붙이기 */
.fields-group .input.radio_buttons {
  display: flex !important;
  align-items: flex-start !important;
}

.fields-group .input.radio_buttons > label {
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  margin-right: 15px !important;  /* ★ 줄이면 버튼이 제목에 더 붙습니다 */
}

.fields-group .input.radio_buttons .label_input,
.fields-group .input.radio_buttons .label_input__wrapper,
.fields-group .input.radio_buttons ul {
  flex: 1 1 auto !important;
  margin-left: 0 !important;
  padding-left: 0 !important;
}

.fields-group .input.radio_buttons li.radio {
  margin-left: 0 !important;
  padding: 4px 0 !important;
  list-style: none !important;
}


/* =========================================================
   9. 배지 / 알림 메시지
   ========================================================= */
.flash-message,
.recommended,
.badge {
  color: var(--main) !important;
  border-color: var(--main) !important;
  background-color: var(--main-soft) !important;
}

/* 계정 역할 배지 (Owner 등) */
.account-role {
  color: var(--main) !important;
  border-color: rgba(209, 187, 0, 0.5) !important;
  background-color: var(--main-faint) !important;
}

.account-role svg {
  fill: var(--main) !important;
}

.account-role .account-role__domain {
  color: var(--main) !important;
  opacity: 0.8;
}


/* =========================================================
   10. 확인창 / 모달
   ========================================================= */
.confirmation-modal__secondary-button,
.confirmation-modal__cancel-button,
.confirmation-modal a,
.confirmation-modal button:not(.button),
.safety-action-modal .link-button,
.safety-action-modal .link-button span,
.modal-root__modal .link-button,
.modal-root__modal .link-button span {
  color: var(--main) !important;
  background-color: transparent !important;
}

.safety-action-modal .link-button:hover span,
.modal-root__modal .link-button:hover span {
  color: var(--main-hover) !important;
  text-decoration: underline !important;
}

.safety-action-modal .button-secondary,
.safety-action-modal .button-tertiary {
  color: var(--main) !important;
  border-color: var(--main) !important;
}


/* =========================================================
   11. 정보(About) 페이지
   ========================================================= */
.about__section__title,
.about__section__title span {
  color: var(--main) !important;
}

.about__section__title svg {
  fill: var(--main) !important;
}

.about__section__title:hover,
.about__section__title:hover span {
  color: var(--main-hover) !important;
}

.about__section__title:hover svg {
  fill: var(--main-hover) !important;
}


/* =========================================================
   12. 표 (세션 목록, 팔로우 관리 등)
   ========================================================= */

/* 표 안의 링크형 액션 ('취소' 등) */
.table .table-action-link,
.table-wrapper a.table-action-link {
  display: inline-flex !important;
  align-items: center !important;
  color: var(--main) !important;
}

.table-action-link svg {
  fill: currentColor !important;
  margin-right: 4px !important;
}

/* '선택한 사용자들을 팔로우 해제' 같은 버튼형 액션은 회색 텍스트로 */
button.table-action-link {
  display: inline-flex !important;
  align-items: center !important;
  padding: 0 !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: var(--text-muted) !important;
}

button.table-action-link:hover {
  background-color: transparent !important;
  color: var(--main) !important;
}

/* 세션 목록의 브라우저/스마트폰 아이콘 */
.table tbody span svg {
  fill: var(--main) !important;
}


/* =========================================================
   13. 왼쪽 메뉴 — 남아 있던 파란색 (알림 등)
   ========================================================= */
.navigation-panel .column-link:hover,
.navigation-panel .column-link:focus,
.navigation-panel .column-link:focus-visible,
.navigation-panel .column-link.active,
.navigation-panel .column-link[aria-current="page"],
.navigation-panel a.active,
.column-link--transparent:hover,
.column-link--transparent:focus,
.column-link--transparent.active {
  color: var(--main) !important;
}

.navigation-panel .column-link:hover svg,
.navigation-panel .column-link:focus svg,
.navigation-panel .column-link.active svg,
.navigation-panel .column-link[aria-current="page"] svg,
.navigation-panel .column-link .icon-with-badge svg {
  color: var(--main) !important;
  fill: currentColor !important;
}

/* 키보드 포커스 테두리도 메인색로 */
.navigation-panel .column-link:focus-visible {
  outline-color: var(--main) !important;
}

/* 메뉴에 붙는 안 읽음 숫자 배지 */
.icon-with-badge__badge,
.column-link__badge {
  background-color: var(--main) !important;
  border-color: var(--main) !important;
  color: #FFFFFF !important;
}


/* =========================================================
   14. 알림 목록 아이콘 (가입, 팔로우, 멘션 등)
   즐겨찾기(별)와 부스트 아이콘은 원래 색 유지
   ========================================================= */
.notification-group:not(.notification-group--favourite):not(.notification-group--reblog) .notification-group__icon,
.notification-ungrouped:not(.notification-ungrouped--favourite):not(.notification-ungrouped--reblog) .notification-ungrouped__header__icon,
.notification__message .icon:not(.star-icon):not(.icon-retweet) {
  color: var(--main) !important;
}

.notification-group:not(.notification-group--favourite):not(.notification-group--reblog) .notification-group__icon svg,
.notification-ungrouped:not(.notification-ungrouped--favourite):not(.notification-ungrouped--reblog) .notification-ungrouped__header__icon svg {
  fill: currentColor !important;
}

/* 우선순위 강화: 가입·팔로우·멘션 등 알림 아이콘 (실제 HTML 기준) */
html body .notification-group--admin-sign-up .notification-group__icon,
html body .notification-group--admin-sign-up .notification-group__icon svg.icon,
html body .notification-group--admin-report .notification-group__icon,
html body .notification-group--admin-report .notification-group__icon svg.icon,
html body .notification-group--follow .notification-group__icon,
html body .notification-group--follow .notification-group__icon svg.icon,
html body .notification-group--follow-request .notification-group__icon,
html body .notification-group--follow-request .notification-group__icon svg.icon,
html body .notification-group--mention .notification-group__icon,
html body .notification-group--mention .notification-group__icon svg.icon,
html body .notification-group--status .notification-group__icon,
html body .notification-group--status .notification-group__icon svg.icon,
html body .notification-group--update .notification-group__icon,
html body .notification-group--update .notification-group__icon svg.icon,
html body .notification-group--poll .notification-group__icon,
html body .notification-group--poll .notification-group__icon svg.icon {
  color: var(--main) !important;
  fill: var(--main) !important;
}


/* =========================================================
   15. 왼쪽 메뉴 — 선택된 메뉴의 아이콘까지 메인색로
   (글씨만 메인색고 아이콘은 검정/파랑으로 남던 문제)
   ========================================================= */
html body .column-link.active svg,
html body .column-link.active .icon,
html body .column-link.active .column-link__icon,
html body .column-link--transparent.active svg,
html body .column-link--transparent.active .icon,
html body .column-link--transparent.active .column-link__icon,
html body .navigation-panel a.active svg,
html body .navigation-panel a[aria-current="page"] svg {
  color: var(--main) !important;
  fill: var(--main) !important;
}

/* 메뉴에 마우스를 올렸을 때 (글씨 + 아이콘) */
html body .column-link:hover,
html body .column-link:focus,
html body .column-link--transparent:hover,
html body .column-link--transparent:focus {
  color: var(--main) !important;
}

html body .column-link:hover .column-link__icon,
html body .column-link:focus .column-link__icon,
html body .column-link:hover svg.icon,
html body .column-link:focus svg.icon,
html body .column-link--transparent:hover .column-link__icon,
html body .column-link--transparent:focus .column-link__icon,
html body .column-link__icon:hover {
  color: var(--main) !important;
  fill: var(--main) !important;
}

/* ★ 핵심: Bird UI는 메뉴 아이콘을 '모양 틀(mask) + 배경색'으로 그립니다.
   그래서 fill/color가 아니라 background-color를 바꿔야 아이콘 색이 바뀝니다. */
html body .column-link:hover .column-link__icon,
html body .column-link:focus .column-link__icon,
html body .column-link.active .column-link__icon,
html body .column-link--transparent:hover .column-link__icon,
html body .column-link--transparent:focus .column-link__icon,
html body .column-link--transparent.active .column-link__icon {
  background-color: var(--main) !important;
}


/* =========================================================
   16. 알림 필터 바 (모두 / 멘션) 배경 + 안 읽음 표시
   ========================================================= */
.notification__filter-bar button.active,
.notification__filter-bar button:hover,
.notification__filter-bar button:focus {
  background-color: var(--main-soft) !important;
}

.notification__filter-bar button.active span {
  color: var(--main) !important;
}

.notification__filter-bar button:hover span,
.notification__filter-bar button:focus span {
  color: var(--main-hover) !important;
}

.notification__filter-bar button:hover::before,
.notification__filter-bar button:hover::after,
.notification__filter-bar button:focus::before,
.notification__filter-bar button:focus::after {
  background-color: var(--main-hover) !important;
}

/* 안 읽은 DM·알림의 왼쪽 선과 점 */
.conversation--unread,
.notification--unread,
.status__wrapper--unread {
  border-left-color: var(--main) !important;
}

.conversation__unread-marker,
.notification__unread-marker,
.status__unread-marker {
  background-color: var(--main) !important;
}