/* =========================================
   마스토돈 사용자 정의 CSS (파스텔 톤 테마)
   메인 색상: #D1BB00 / 마우스 오버 색상: #CCB600
   ========================================= */

/* --- 1. 메인 UI 및 공통 버튼 --- */
.button, .btn-primary, button[type="submit"], input[type="submit"], .button--block {
  background-color: #D1BB00 !important;
  border-color: #D1BB00 !important;
  color: #FFFFFF !important;
}
.button:hover, .btn-primary:hover, button[type="submit"]:hover, input[type="submit"]:hover, .button--block:hover {
  background-color: #CCB600 !important;
  border-color: #CCB600 !important;
  color: #FFFFFF !important;
}
.input:focus, textarea:focus, select:focus {
  border-color: #D1BB00 !important;
  box-shadow: 0 0 0 2px #F9F8F1 !important;
  outline: none !important;
}

/* --- 2. 링크, 프로필 탭, 포인트 요소 --- */
.status__content a, .account__header__content a, .reply-indicator__content a, .column-back-button, .tabs-bar__link.active, .account__section-headline a.active {
  color: #D1BB00 !important;
}
.tabs-bar__link.active, .account__section-headline a.active {
  border-bottom-color: #D1BB00 !important;
}
.account__section-headline a.active::after, .account__section-headline a.active::before, .toggle-switch--checked {
  background-color: #D1BB00 !important;
}
.flash-message, .recommended, .badge { color: #D1BB00 !important; border-color: #D1BB00 !important; background-color: #F9F8F1 !important; }

/* --- 3. 체크박스 및 라디오 버튼 커스텀 --- */
input[type="checkbox"], 
input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  background-color: #FFFFFF;
  margin: 0;
  width: 16px;
  height: 16px;
  border: 1px solid #D1BB00;
  border-radius: 3px;
  display: inline-grid;
  place-content: center;
  cursor: pointer;
  vertical-align: middle;
  position: relative;
}
input[type="radio"] { border-radius: 50%; }
input[type="checkbox"]:checked, input[type="radio"]:checked {
  background-color: #D1BB00 !important;
  border-color: #D1BB00 !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 !important;
}
input[type="radio"]:checked::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #FFFFFF !important;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
} /* <-- 이 괄호가 빠져있었습니다! */

/* --- 4. 관리자 페이지 레이아웃 (사이드바 & 상단 탭) --- */
.sidebar ul li.selected > a, .sidebar ul li > a.selected {
  background-color: transparent !important;
  color: #D1BB00 !important;
}
.sidebar ul li.selected > a svg, .sidebar ul li > a.selected svg { fill: #D1BB00 !important; }
.content__heading__tabs a.selected {
  background-color: #D1BB00 !important;
  border-color: #D1BB00 !important;
  color: #FFFFFF !important;
  box-shadow: none !important;
}
.content__heading__tabs a.selected svg { fill: #FFFFFF !important; }

/* --- 5. [긴급 수리] 라디오 버튼 리스트 간격 및 위치 --- */
.fields-group .input.radio_buttons .label_input,
.fields-group .input.radio_buttons .label_input__wrapper,
.fields-group .input.radio_buttons ul {
  margin-left: 0 !important;
  padding-left: 0 !important;
  flex: 1 1 auto !important;
}

/* 제목(label)이 차지하는 너비를 줄여서 버튼을 왼쪽으로 강제 이동 */
.fields-group .input.radio_buttons > label {
  flex: 0 0 100px !important; 
  width: 100px !important;
  max-width: 100px !important;
}

/* 개별 라디오 항목 간격 */
.fields-group .input.radio_buttons li.radio {
  margin-left: 0 !important;
  padding: 4px 0 !important;
  list-style: none !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 {
  margin-left: 0 !important;
  padding-left: 0 !important;
  flex: 1 !important;
}

/* 스크린샷에서 버튼 테두리가 검은색으로 보이는 문제 수정 */
input[type="radio"] {
  border: 1px solid #D1BB00 !important;
  outline: none !important;
}


/* =========================================
   도망간 필터와 버튼들 다시 핑크색으로 포획
   ========================================= */

/* 1. 필터 ('팔로잉', '모두', '최신') 파란색 -> 핑크색으로 강제 변경 */
.filters .filter-subset a.selected,
.filter-subset a.selected {
  background-color: transparent !important;
  color: #D1BB00 !important;
  border-bottom: 2px solid #D1BB00 !important;
  background-image: none !important;
}

/* 2. '선택한 사용자들을 팔로우 해제' 버튼을 다시 깔끔한 텍스트 형태로 */
button.table-action-link,
button[type="submit"].table-action-link {
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: #444b5d !important; /* 기본 글씨색 */
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
}

button.table-action-link svg,
button[type="submit"].table-action-link svg {
  fill: currentColor !important;
  margin-right: 4px !important;
}

/* 마우스 올렸을 때만 예쁜 분홍색으로 포인트 */
button.table-action-link:hover,
button[type="submit"].table-action-link:hover {
  color: #D1BB00 !important;
  background-color: transparent !important;
}

/* 3. 체크박스 배경이 너무 진하다면 살짝 연하게 (선택사항) */
.batch-table__toolbar input[type="checkbox"]:checked {
  background-color: #D1BB00 !important;
}

/* --- 1. 글 작성창 하단의 분홍색 구분선 제거 --- */
.compose-form__buttons-wrapper {
  border-top: none !important;
}

/* --- 2. 확인창(모달)의 파란색 '취소' 글씨를 분홍색으로 변경 --- */
.confirmation-modal__secondary-button,
.confirmation-modal__cancel-button {
  color: #D1BB00 !important;
}

/* =========================================
   [긴급] Bird UI 간섭 해결 및 파란색 박멸
   ========================================= */

/* 1. 글 작성창 하단 분홍색 줄 제거 (더 강력한 선택자) */
body.admin .compose-form__buttons-wrapper,
div.compose-form__buttons-wrapper,
.compose-form__buttons-wrapper {
  border-top: none !important;
  border-bottom: none !important;
}

/* 2. 확인창(모달) 파란색 '취소' 글씨 -> 분홍색으로 강제 변경 */
/* Bird UI가 쓰는 파란색을 완전히 덮어버립니다. */
.confirmation-modal .confirmation-modal__secondary-button,
.confirmation-modal__secondary-button,
.confirmation-modal__cancel-button,
button.confirmation-modal__secondary-button {
  color: #D1BB00 !important;
  background-color: transparent !important;
}

/* 3. 혹시나 남아있을지 모를 모달 내의 다른 파란색 링크들 */
.confirmation-modal a,
.confirmation-modal button:not(.button) {
  color: #D1BB00 !important;
}

/* [최후의 통첩] 부모 요소를 전부 명시해서 우선순위 탈환 */
html body.admin .compose-form__buttons-wrapper,
html body .compose-form__buttons-wrapper {
  border-top: none !important;
  border-bottom: none !important;
}

html body .confirmation-modal__secondary-button,
html body .confirmation-modal__cancel-button {
  color: #D1BB00 !important;
  background-color: transparent !important;
}


/* =========================================
   정보 페이지 및 푸터 파란 글씨 분홍색으로 변경
   ========================================= */

/* 1. 일반 링크 및 메일 주소 색상 변경 */
.about__header p a,
.about__meta__column a,
.about__footer p a,
.link-footer a,
.about__section__body a {
  color: #D1BB00 !important;
  text-decoration: none !important;
}

/* 2. 버전 정보 및 하단 링크 강조 */
.link-footer p strong,
.version {
  color: #D1BB00 !important;
}

/* 3. 링크에 마우스 올렸을 때 살짝 진해지는 효과 */
.about__header p a:hover,
.about__meta__column a:hover,
.link-footer a:hover {
  color: #CCB600 !important;
  text-decoration: underline !important;
}

/* 4. (추가) 정보 섹션의 아이콘(v자 모양) 색상도 맞추고 싶다면 */
.about__section__title svg {
  fill: #D1BB00 !important;
}


/* 7. 기타 범용 링크 (개인정보처리방침 등 푸터 링크) */
.link-footer a,
.link-footer a strong,
.version {
  color: #D1BB00 !important;
}


/* =========================================
   계정 역할 배지 (Owner) 핑크색으로 변경
   ========================================= */

/* 배지 전체의 글씨색과 테두리색 */
.account-role {
  color: #D1BB00 !important;
  border-color: #D1BB00 !important; /* 테두리를 은은한 핑크로 */
  background-color: #F9F8F1 !important; /* 배경에 살짝 핑크빛 추가 */
}

/* 배지 내부의 아이콘(SVG) 색상 */
.account-role svg {
  fill: #D1BB00 !important;
}

/* 배지 내부의 도메인 텍스트 색상 */
.account-role .account-role__domain {
  color: #D1BB00 !important;
  opacity: 0.8; /* 도메인은 살짝 투명하게 처리하여 메인 글씨 강조 */
}


/* =========================================
   삭제 확인 모달 '취소' 버튼 핑크색 적용
   ========================================= */

/* 1. 모달 내의 취소 버튼 (link-button) 글씨색 */
.safety-action-modal .link-button,
.safety-action-modal .link-button span,
.modal-root__modal .link-button,
.modal-root__modal .link-button span {
  color: #D1BB00 !important;
  background-color: transparent !important;
}

/* 2. 마우스를 올렸을 때 살짝 진해지는 효과 */
.safety-action-modal .link-button:hover span,
.modal-root__modal .link-button:hover span {
  color: #CCB600 !important;
  text-decoration: underline !important;
}

/* 3. 혹시나 다른 곳에서 쓰일지 모르는 '삭제' 버튼 외 보조 버튼들 */
.safety-action-modal .button-secondary,
.safety-action-modal .button-tertiary {
  color: #D1BB00 !important;
  border-color: #D1BB00 !important;
}


/* =========================================
   컬럼 헤더 (돌아가기/기능 버튼) 핑크색 적용
   ========================================= */

/* 1. 컬럼 헤더 전체의 글씨 및 버튼 색상 */
.column-header,
.column-header__back-button,
.column-header__button,
.column-header__back-button span {
  color: #D1BB00 !important;
  fill: #D1BB00 !important;
}

/* 2. 헤더 내 SVG 아이콘 색상 (화살표, 눈 모양 등) */
.column-header__back-button .icon,
.column-header__button .icon,
.column-header__back-button svg,
.column-header__button svg {
  fill: #D1BB00 !important;
  color: #D1BB00 !important;
}

/* 3. 버튼에 마우스 올렸을 때 효과 */
.column-header__back-button:hover,
.column-header__button:hover,
.column-header__back-button:hover span {
  color: #CCB600 !important;
}

.column-header__back-button:hover svg,
.column-header__button:hover svg {
  fill: #CCB600 !important;
}

/* 4. 헤더 하단에 미세하게 남은 파란 선이 있다면 핑크색으로 변경 */
.column-header::after {
  background-color: #D1BB00 !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__footer {
  border-top: none !important;
}

/* --- 정보, 서버 규칙, 제한된 서버들 제목 색상 변경 --- */
.about__section__title,
.about__section__title span {
  color: #D1BB00 !important;
}

/* 마우스를 올렸을 때 아이콘과 글자 색상 변화 */
.about__section__title:hover,
.about__section__title:hover span,
.about__section__title:hover svg {
  color: #CCB600 !important;
  fill: #CCB600 !important;
}

/* 텍스트 옆의 화살표 아이콘 색상도 통일 */
.about__section__title svg {
  fill: #D1BB00 !important;
}

/* 4. 컨텐츠 영역 내의 파란색 링크 (계정 옮기기, 인증 이력 보기 등) */
.content-wrapper a,
.content .hint a,
.content p a,
.content .muted-hint a {
  color: #D1BB00 !important;
  text-decoration: none !important;
}

/* 5. 테이블 액션 링크 ('취소' 버튼 및 아이콘) */
.table .table-action-link,
.table-wrapper a.table-action-link {
  color: #D1BB00 !important;
  display: inline-flex !important;
  align-items: center !important;
}

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

/* 6. 세션 목록의 브라우저/스마트폰 아이콘 */
.table-wrapper .table tbody td span title svg.icon,
.table tbody span svg {
  fill: #D1BB00 !important;
}

/* =========================================
   <a> 태그로 만들어진 버튼 글씨색 흰색으로 구출
   ========================================= */

a.button,
.content__heading__actions a.button {
  color: #FFFFFF !important;
}

a.button:hover,
.content__heading__actions a.button:hover {
  color: #FFFFFF !important;
}


/* =========================================
   알림 필터 바 파란색 완벽 박멸 (배경 & 밑줄 포함)
   ========================================= */

/* 1. 활성화된 탭의 글씨, 테두리, 그리고 연한 파란색 배경 덮어쓰기 */
.notification__filter-bar button.active,
.notification__filter-bar button.active span {
  color: #D1BB00 !important;
  border-bottom-color: #D1BB00 !important;
  background-color: #F9F8F1 !important; /* 배경을 연한 핑크빛으로 */
}

/* 2. 테마가 가상 요소(::after, ::before)로 강제 생성한 파란색 밑줄 제압 */
.notification__filter-bar button.active::after,
.notification__filter-bar button.active::before {
  background-color: #D1BB00 !important;
  border-bottom-color: #D1BB00 !important;
}

/* 3. 비활성 탭에 마우스를 올렸을 때의 색상 */
.notification__filter-bar button:hover span {
  color: #CCB600 !important;
}

/* =========================================
   알림 필터 바 '마우스 호버' 시 파란 배경 박멸
   ========================================= */

/* 마우스를 올렸을 때(hover)나 클릭했을 때(focus)의 배경색 변경 */
.notification__filter-bar button:hover,
.notification__filter-bar button:focus {
  background-color: #F9F8F1 !important; /* 연한 핑크 배경 */
}

/* 마우스 올렸을 때 생기는 가상 요소(밑줄 등)가 있다면 핑크색으로 덮어쓰기 */
.notification__filter-bar button:hover::after,
.notification__filter-bar button:hover::before,
.notification__filter-bar button:focus::after,
.notification__filter-bar button:focus::before {
  background-color: #CCB600 !important;
}

/* 글자 색상도 확실하게 호버용 핑크(#CCB600)로 고정 */
.notification__filter-bar button:hover span,
.notification__filter-bar button:focus span {
  color: #CCB600 !important;
}