/* ==========================================
   1. 마스토돈 기본 테마 시스템 변수 교체
   ========================================== */
:root {
  --color-primary: #7c7c7c !important;
  --color-primary-dark: #3d3d3d !important;
  --color-accent: #7c7c7c !important;
  --theme-color: #f4f5f7 !important;
}

/* ==========================================
   2. 전체 배경 및 타임라인, 사이드바 배경색 통합 (#f4f5f7)
   ========================================== */
html, 
body, 
body.admin-wrapper,
.admin-wrapper, 
.admin-wrapper__sidebar, 
.admin-wrapper .sidebar,
.admin-wrapper .sidebar-wrapper,
.admin-wrapper .content,
.sidebar-wrapper,
.navigation-panel,
.ui, .column, .drawer, .scrollable,
.column-header,
.column-header__back-button,
.tabs-bar,
.search__input,
.getting-started,
.layout-multiple-columns .column,
.columns-area,
.columns-area__panes__pane {
  background: #f4f5f7 !important;
  background-color: #f4f5f7 !important;
}

/* 타임라인 메인 카드 및 배경 하얀색 제거 */
.status, 
.activity-stream,
.detailed-status,
.detailed-status__action-bar {
  background: #f4f5f7 !important;
  background-color: #f4f5f7 !important;
}

/* ==========================================
   3. 왼쪽 메뉴 버튼 (개발자 도구에서 올려주신 simple-navigation 타겟팅)
   ========================================== */
/* 선택된 메뉴 (프로필 편집 등 활성화 버튼 파란색 -> 회색 변경) */
.simple-navigation .selected,
a.simple-navigation-active-leaf,
.simple-navigation a.selected,
.simple-navigation li.selected a {
  background: #7c7c7c !important;
  background-color: #7c7c7c !important;
  color: #ffffff !important;
}

/* 선택된 메뉴 안의 SVG 아이콘 색상 흰색으로 통일 */
.simple-navigation .selected svg,
a.simple-navigation-active-leaf svg {
  fill: #ffffff !important;
}

/* 왼쪽 네비게이션 영역 투명화 및 배경 정돈 */
.navigation-panel,
.simple-navigation,
.simple-navigation ul,
.simple-navigation li {
  background: transparent !important;
  background-color: transparent !important;
}

/* ==========================================
   4. 상단 탭 ('프로필 편집', '외관' 등) & 기본 버튼
   ========================================== */
.button, 
button[type="submit"],
.admin-tab,
.admin-tab.active,
a.admin-tab.active,
.table-options a,
.table-options button,
.table-options a.active,
.table-options button.active,
a.table-options__item.active,
button.table-options__item.active,
.account-tabs-wrapper .tab.active,
.account-tabs-wrapper a.tab.active,
#edit_profile.selected {
  background: #7c7c7c !important;
  background-color: #7c7c7c !important;
  border-color: #7c7c7c !important;
  color: #ffffff !important;
}

.button:hover, 
button[type="submit"]:hover,
.account-tabs-wrapper .tab:hover {
  background: #3d3d3d !important;
  background-color: #3d3d3d !important;
  border-color: #3d3d3d !important;
}

/* ==========================================
   5. 로고 이미지 적용 (banner.png)
   ========================================== */
img.logo.logo--icon {
  box-sizing: border-box !important;
  padding-left: 240px !important;
  height: 120px !important;
  background-image: url('/banner.png') !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: left center !important;
  width: 0 !important;
}

img.logo.logo--wordmark {
  content: url('/banner.png') !important;
  max-height: 180px !important;
  width: auto !important;
  object-fit: contain !important;
  background: none !important;
}

/* ==========================================
   6. 알림창 및 기타 포인트 컬러
   ========================================== */
.flash-message,
.flash-message.notice,
.flash-message.success,
.notice-box,
.dismissable-banner {
  background-color: #e9ecef !important;
  color: #495057 !important;
  border: 1px solid #ced4da !important;
}

/* ==========================================
   7. 왼쪽 사이드바 배경색 및 파란 글씨/아이콘 완벽 수정
   ========================================== */
/* 왼쪽 메뉴 전체 배경을 오른쪽과 동일하게 (#f4f5f7) */
.admin-wrapper__sidebar,
.admin-wrapper .sidebar,
.admin-wrapper .sidebar-wrapper,
.admin-wrapper .sidebar-navigation {
  background: #f4f5f7 !important;
  background-color: #f4f5f7 !important;
}

/* 사이드바 메뉴 항목 배경 투명화 */
.admin-wrapper .sidebar a,
.admin-wrapper .sidebar ul,
.admin-wrapper .sidebar ul li {
  background: transparent !important;
  background-color: transparent !important;
}

/* 선택된 메뉴 (예: 서버 설정) 글자색 및 아이콘 파란색 제거 -> 어두운 회색 */
.admin-wrapper .sidebar a.selected,
.admin-wrapper .sidebar a.selected svg,
.admin-wrapper .sidebar a:hover,
.admin-wrapper .sidebar a:hover svg {
  color: #3d3d3d !important;
  fill: #3d3d3d !important;
  font-weight: bold !important;
}

/* 기본 메뉴 항목 글자색 및 아이콘 회색화 */
.admin-wrapper .sidebar a,
.admin-wrapper .sidebar a svg {
  color: #5a6268 !important;
  fill: #5a6268 !important;
}

/* ==========================================
   8. 프로필/상세 페이지 상단바 배경 및 '돌아가기' 버튼 색상 변경
   ========================================== */
/* 상단바 전체 배경색을 연회색(#f4f5f7)으로 변경 및 하단 테두리 정리 */
.column-header,
.column-header__button,
.column-back-button {
  background: #f4f5f7 !important;
  background-color: #f4f5f7 !important;
  border-bottom: 1px solid #e9ecef !important;
}

/* '← 돌아가기' 파란색 텍스트 및 화살표 아이콘을 어두운 회색으로 변경 */
.column-header__back-button,
.column-back-button,
.column-header__button,
a.column-back-button {
  color: #3d3d3d !important;
}

/* '돌아가기' 화살표 SVG 아이콘 색상 변경 */
.column-header__back-button svg,
.column-back-button svg {
  fill: #3d3d3d !important;
}

/* 마우스 올렸을 때(Hover) 약간 더 어두운 톤으로 변경 */
.column-header__back-button:hover,
.column-back-button:hover {
  color: #1a1a1a !important;
  background: #e9ecef !important;
}

/* ==========================================
   9. 메인 타임라인 상단바 ('홈', '로컬 타임라인' 등) 배경 및 테두리 정돈
   ========================================== */
/* 홈 상단바 전체 배경색 및 버튼 배경 통합 */
.column-header,
.column-header__button,
.column-header__collapsible-inner,
.column-header__title,
.column-header__icon {
  background: #f4f5f7 !important;
  background-color: #f4f5f7 !important;
  color: #3d3d3d !important;
  border-bottom: 1px solid #e9ecef !important;
}

/* 홈 상단바 오른쪽 설정/필터 버튼 SVG 아이콘 색상 */
.column-header__button,
.column-header__button svg,
.column-header__button i {
  color: #3d3d3d !important;
  fill: #3d3d3d !important;
  background: #f4f5f7 !important;
}

/* 버튼 마우스 호버 시 */
.column-header__button:hover {
  background: #e9ecef !important;
}